/* Hugo-only overrides for the existing homepage layout */
.hero-grid{
  display:flex;
  min-height:68vh;
  height:68vh;
  width:100%;
  overflow:hidden;
}
.panel{
  position:relative;
  flex:1 1 25%;
  min-height:68vh;
  height:100%;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  transition:flex-basis 600ms cubic-bezier(.22,1,.36,1), transform 300ms cubic-bezier(.22,1,.36,1);
  cursor:pointer;
  opacity:1;
  border-right:1px solid var(--color-contrast-low);
}
.panels .title{
  margin-bottom: var(--space-md);
  /* font-family: var(--font-primary, sans-serif); */
  /* letter-spacing: normal; */
}
.panel:hover{transform:translateY(-2px)}
.panel a{
  position:relative;
  display:flex;
  height:100%;
  width:100%;
  align-items:flex-end;
  text-decoration:none;
  color:inherit;
}
.panel .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  transform:scale(1.05);
  transition:transform 800ms cubic-bezier(.2,.8,.2,1);
  z-index:0;
}
.panel:hover .bg{transform:scale(1.12)}
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.65) 100%, rgba(0,0,0,0) 100%);
  transition:opacity 280ms ease-out;
  pointer-events:none;
  z-index:1;
}
.panel.is-active::after,
.panel:hover::after{
  background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 100%);
}
.caption{
  position:relative;
  z-index:2;
  width:100%;
  padding:34px 36px 36px;
  color:#fff;
}
.caption .dash{
  width:64px;
  height:2px;
  background:rgba(255,255,255,.3);
  margin-bottom:18px;
}
.caption h3{
  margin:0 0 10px;
  font-size:28px;
  font-weight:800;
  letter-spacing:.02em;
}
.caption p{
  margin:0;
  color:rgba(255,255,255,.75);
  font-weight:300;
  max-width:46ch;
  font-size:14px;
}
@media (max-width:1100px){
  .hero-grid{min-height:60vh; height:60vh}
  .panel{min-height:60vh}
}
@media (max-width:900px){
  .hero-grid{flex-direction:column; height:auto}
  .panel{
    min-height:44vh;
    height:44vh;
    flex:0 0 auto;
  }
  .panel a{height:100%}
  .caption{padding:22px 20px 24px}
}

@media (max-width:480px){
  .panel{
    min-height:38vh;
    height:38vh;
  }
  .caption h3{font-size:22px}
  .caption p{font-size:12px}
}

.quote{
  padding:90px 22px 120px;
  display:grid;
  place-items:center;
  border-top:1px solid var(--color-contrast-low);
}
.quote blockquote{
  margin:0;
  text-align:center;
  font-size:clamp(28px, 5vw, 43px);
  font-weight:300;
  max-width:47%;
  line-height:1.25;
}
.quote .em{font-weight:800}
.underquote{
  margin-top:2%;
  font-size:xx-large;
  padding:3px 20px 6px;
}
.kit{
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--color-contrast-low);
  cursor:pointer;
  color:var(--color-contrast-medium);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.kit:hover{
  background:var(--color-contrast-lower);
  border-color:var(--color-contrast-low);
  color:var(--color-contrast-high);
  transform:translateY(-2px);
}
@media (max-width:900px){
  .quote{padding:48px 18px 64px}
  .quote blockquote{max-width:90%; font-size:clamp(20px, 5.6vw, 28px); line-height:1.3}
  .underquote{display:inline-block; margin-top:20px; font-size:1rem; padding:8px 18px}
}
@media (max-width:480px){
  .quote{padding:32px 14px 40px}
  .quote blockquote{max-width:96%; font-size:clamp(18px, 6.5vw, 22px)}
  .underquote{display:block; width:fit-content; margin:2.5em auto 0}
}

@media (max-width: 600px){
  .filter-nav__btn{
    padding:6px 10px;
    font-size:12px;
    border-radius:999px;
  }
  .filter-nav__item{
    margin-right:6px;
  }
  .filter-nav__btn.active,
  .filter-nav__btn[aria-current="true"]{
    color:#fff;
  }
}

.ms-next-case--buttons{
  margin-top:var(--space-xxl);
}
.ms-next-case__buttons{
  display:flex;
  gap:var(--space-md);
  justify-content:center;
  flex-wrap:wrap;
  max-width:720px;
  margin:0 auto;
  margin-bottom: var(--space-md);
}
.ms-next-case__buttons .btn{
  min-width:150px;
  justify-content:center;
}
.ms-next-case__buttons .is-disabled{
  opacity:.45;
  pointer-events:none;
}
.scroll-cue{
  position:fixed;
  left:50%;
  bottom:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
  color:var(--color-contrast-medium);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transform:translateX(-50%);
  opacity:1;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
  z-index:2;
}
.scroll-cue.is-hidden{
  opacity:0;
  transform:translate(-50%, -6px);
}
.scroll-cue__mouse{
  width:22px;
  height:34px;
  border:2px solid var(--color-contrast-low);
  border-radius:12px;
  position:relative;
}
.scroll-cue__mouse::before{
  content:"";
  position:absolute;
  left:50%;
  top:6px;
  width:4px;
  height:8px;
  background:var(--color-contrast-medium);
  border-radius:2px;
  transform:translateX(-50%);
  animation:scroll-dot 1.6s infinite;
}
@keyframes scroll-dot{
  0%{opacity:0; transform:translate(-50%,0)}
  30%{opacity:1}
  70%{opacity:1; transform:translate(-50%,10px)}
  100%{opacity:0; transform:translate(-50%,14px)}
}
.port-meta-strip{
  position:relative;
  padding-bottom:28px;
}
.case-tabs{margin-top:24px}
.ms-content--portfolio > .case-tabs{
  margin-left: calc(var(--space-xxl) * -1);
  margin-right: calc(var(--space-xxl) * -1);
}
.case-tabs .panels{
  border-radius:0;
}
.case-tabs,
.case-tabs .panels{
  width:100%;
}
.tabs{
  display:flex;
  gap:12px;
  justify-content:center;
  border-bottom:0;
  padding:0;
  border-radius:0;
  margin-bottom: var(--space-xl);
  position:relative;
  padding-bottom:18px;
  width:100%;
}
.tabs::after{content:none}
.tab{
  cursor:pointer;
}
.tab::after{
  content:none;
}
.tab:hover{
  transform:translateY(-1px);
}
.case-tabs .tab.btn{
  padding:12px 22px;
  min-width:140px;
  justify-content:center;
}
.case-tabs .tab.btn[aria-selected="false"]{
  background:transparent;
  border:1px solid var(--color-contrast-low);
  color:var(--color-contrast-medium);
}
.case-tabs .tab.btn[aria-selected="true"]{
  background:var(--color-primary);
  border-color:transparent;
  color:#fff;
}
.case-tabs .tab.btn[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-24px;
  width:14px;
  height:14px;
  border-right:2px solid var(--color-primary);
  border-bottom:2px solid var(--color-primary);
  transform:translateX(-50%) rotate(45deg);
  opacity:0.8;
}
.case-tabs .tab.btn.is-cue[aria-selected="true"]::after{
  animation:tab-cue 2s ease-out 1;
}
@keyframes tab-cue{
  0%{opacity:0; transform:translate(-50%, -6px) rotate(45deg)}
  20%{opacity:1; transform:translate(-50%, 0) rotate(45deg)}
  40%{opacity:.8; transform:translate(-50%, 2px) rotate(45deg)}
  60%{opacity:0; transform:translate(-50%, -6px) rotate(45deg)}
  80%{opacity:1; transform:translate(-50%, 0) rotate(45deg)}
  100%{opacity:.8; transform:translate(-50%, 2px) rotate(45deg)}
}
.tab:focus-visible{outline:2px solid #6aa9ff; outline-offset:2px}
.case-tabs [hidden]{display:none !important}
.panels{
  border-top:0;
  padding:22px;
  border-radius:0 10px 10px 10px;
  width:100%;
  box-sizing:border-box;
}
.text-align-left{text-align:left}
.deliverables{margin-top:28px}
.deliverables h3{margin:0 0 10px; font-size:18px}
.gallery-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.gallery-item{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--color-contrast-lower);
}
.gallery-item img{
  width:100%;
  height:auto;
  display:block;
}

/* Deliverables (specs.md) shared styling */
.deliverables{
  margin-top: 36px;
}
.deliverables h3{
  margin:0 0 16px;
  font-size:20px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align: left;
}
.specs-grid{
  margin-top: 24px;
}
.specs-grid .specs-block{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 15px;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.specs-block h3::after{
  content:"";
  display:block;
  width:48px;
  height:2px;
  margin-top:10px;
  background: rgba(255,255,255,0.35);
}
.specs-block ul{
  list-style: none;
  padding-left:0;
}
.specs-block ul li{
  position:relative;
  padding-left:20px;
}
.specs-block ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:8px;
  height:8px;
  border-radius:50%;
  background: #4aa3ff;
}
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  padding:20px 0;
  transform:translateZ(0);
}
.topbar-bg{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 24px;
  max-width:1200px;
  margin:0 auto;
  border-radius:10px;
  background-color:var(--header-bg);
  backdrop-filter:blur(10px);
  backface-visibility:hidden;
  border:1px solid var(--color-contrast-low);
}
.brand{
  font-weight:800;
  letter-spacing:.5px;
  font-size:20px;
  color:var(--color-contrast-high);
}
.divider-dot{opacity:.5}
.nav{
  font-size:14px;
  color:var(--color-contrast-medium);
  margin-right:auto;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.nav a{
  opacity:.85;
  position:relative;
  padding-bottom:4px;
  transition:opacity .2s ease, color .2s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:var(--color-primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav a:hover{
  opacity:1;
  color:var(--color-contrast-high);
}
.nav a:hover::after{
  transform:scaleX(1);
}
.kit{
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--color-contrast-low);
  cursor:pointer;
  color:var(--color-contrast-medium);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.kit:hover{
  background:var(--color-contrast-lower);
  border-color:var(--color-contrast-low);
  color:var(--color-contrast-high);
  transform:translateY(-2px);
}
.theme-toggle{
  margin-left:var(--space-sm);
  display:flex;
  align-items:center;
}
.theme-toggle .checkbox{
  opacity:0;
  position:absolute;
}
.theme-toggle .checkbox-label{
  background-color:#111;
  width:53px;
  height:26px;
  border-radius:50px;
  position:relative;
  padding:5px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.theme-toggle .fa-moon{color:var(--color-contrast-high);}
.theme-toggle .fa-sun{color: #fff}
.theme-toggle .checkbox-label .ball{
  background-color:#fff;
  width:22px;
  height:22px;
  position:absolute;
  left:2px;
  top:2px;
  border-radius:50%;
  transition:transform 0.2s linear;
}
.theme-toggle .checkbox:checked + .checkbox-label .ball{
  transform:translateX(24px);
}
@media (max-width: 900px){
  .topbar{padding:12px 0}
  .topbar-bg{
    flex-wrap:wrap;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:0;
    border:0;
    border-bottom:1px solid var(--color-contrast-low);
  }
  .nav{
    justify-content:flex-start;
    width:auto;
    flex-wrap:nowrap;
    gap:8px;
    white-space:nowrap;
    overflow-x:auto;
  }
  .kit{
    margin-right:0;
  }
  .theme-toggle{
    margin-left:0;
  }
}

@media (max-width: 700px){
  .topbar-bg{
    justify-content:space-between;
  }
  .brand{font-size:16px}
  .nav{font-size:12px}
  .kit{font-size:10px; padding:2px 8px}
  .theme-toggle .checkbox-label{width:44px; height:22px}
  .theme-toggle .checkbox-label .ball{width:18px; height:18px}
}

@media (max-width: 900px){
  .port-meta-strip{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .port-meta-strip .meta-divider{
    width:100%;
    height:1px;
  }
  .port-meta-strip .meta-right{
    justify-content:flex-start;
    width:100%;
  }
  .port-meta-strip .tools-icons{
    flex-wrap:wrap;
    gap:8px;
  }
  .port-meta-strip .tool-icon{
    width:38px;
    height:38px;
    font-size:12px;
  }
}

@media (max-width: 900px){
  .case-tabs .panels{
    padding:18px;
    border-radius:10px;
  }
  .ms-content--portfolio > .case-tabs{
    margin-left:0;
    margin-right:0;
  }
  .tabs{
    flex-wrap:wrap;
    gap:10px;
  }
  .case-tabs .tab.btn{
    min-width:0;
    padding:10px 18px;
  }
}

@media (max-width: 600px){
  .port-meta-strip{
    padding: var(--space-xs) 0;
  }
  .port-meta-strip .tools-icons{
    gap:6px;
  }
  .port-meta-strip .tool-icon{
    width:34px;
    height:34px;
    font-size:11px;
  }
  .case-tabs{
    margin-top:18px;
  }
  .tabs{
    margin-bottom: var(--space-md);
  }
  .case-tabs .tab.btn{
    padding:9px 14px;
    font-size:12px;
  }
  .case-tabs .tab.btn[aria-selected="true"]::after{
    bottom:-18px;
  }
  .panels{
    padding:16px;
  }
}

#about:target{display:block}
.about-panel{
  --h:0px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(8px);
  margin:0 auto;
  transition:
    max-height 600ms cubic-bezier(.22,1,.36,1),
    opacity 300ms ease,
    transform 300ms ease,
    margin 0ms linear 600ms;
}
.about-panel.is-open{
  max-height:var(--h);
  opacity:1;
  transform:none;
  margin:20px auto 28px;
  transition:
    max-height 600ms cubic-bezier(.22,1,.36,1),
    opacity 300ms ease,
    transform 300ms ease,
    margin 0ms;
}
.about-card{
  background:#f3eee8;
  color:#000;
  padding:56px 20px 64px;
}
.about-title{
  font-size:clamp(40px,6.5vw,64px);
  line-height:1.1;
  margin:0 0 8px;
  text-align:center;
}
.about-social{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:10px 0 16px;
}
.about-social a{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  background:#fff;
  transition:.2s ease;
}
.about-social a:hover{
  background:#ffffff22;
  color:#000;
  transform:translateY(-2px);
}
.about-lead{
  max-width:60ch;
  margin:0 auto;
  text-align:center;
  margin-top:3em;
}
.about-quote{
  text-align:center;
  margin-top:2em;
}
.about-cta{text-align:center}
.about-cta .kit:hover{
  color:#000;
  background:#e2dcd6;
  border-color:#c4bfb9;
  transform:translateY(-2px);
}
.about-close{
  display:inline-block;
  margin-top:10px;
  font-weight:600;
  color:#000;
  border:1px solid rgba(0,0,0,.56);
  padding:6px 14px;
  border-radius:999px;
  transition:.2s ease;
  text-align:center;
}
body.about-open #projects{
  opacity:.5;
  filter:blur(1px);
}

.about-panel{
  scroll-margin-top: 200px;
}
#projects{
  scroll-margin-top: 200px;
}

html[data-theme="dark"] .about-card{
  background:#111318;
  color:#e9eaee;
}
html[data-theme="dark"] .about-title{
  color:#e9eaee;
}
html[data-theme="dark"] .about-social a{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}
html[data-theme="dark"] .about-close{
  color:#e9eaee;
  border-color:rgba(255,255,255,.3);
}

html[data-theme="light"]{
  --header-bg: rgba(255, 255, 255, .8);
  --color-bg: hsl(0, 0%, 100%);
  --color-contrast-lower: hsl(0, 0%, 95%);
  --color-contrast-low: hsl(240, 1%, 83%);
  --color-contrast-medium: hsl(240, 0%, 61%);
  --color-contrast-high: hsl(219, 38%, 24%);
  --color-contrast-higher: hsl(0, 0%, 0%);
  --color-primary: hsl(217, 84%, 43%);
  --color-primary-light: hsl(217, 84%, 75%);
  --color-primary-lighter: hsl(220, 84%, 97.5%);
}

html[data-theme="dark"]{
  --header-bg: rgba(16, 18, 22, .85);
  --color-bg: hsl(0, 0%, 13%);
  --color-contrast-lower: hsl(240, 6%, 15%);
  --color-contrast-low: hsl(252, 4%, 25%);
  --color-contrast-medium: hsl(240, 1%, 57%);
  --color-contrast-high: hsl(0, 0%, 89%);
  --color-contrast-higher: hsl(0, 0%, 100%);
  --color-primary: hsl(208, 100%, 62%);
  --color-primary-lighter: rgba(62, 166, 255, .3);
}