/* case.css — case-study page layout. Inherits tokens + shell from portfolio.css.
   Each case page sets --p-accent / --p-ink on :root for its own treatment. */

.case-hero{padding-top:clamp(110px,16vh,170px);padding-bottom:clamp(2rem,5vw,3.5rem);position:relative;overflow:clip}
.case-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 78% -10%,color-mix(in oklab,var(--p-accent) 22%,transparent),transparent 60%)}
.case-back{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-2);font-size:.9rem;margin-bottom:1.4rem}
.case-back:hover{color:var(--ink)}
.case-hero__meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-bottom:1.1rem;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--p-accent)}
.case-hero__meta .dot{color:var(--ink-3)}
.case-hero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;line-height:1;
  font-size:clamp(2.6rem,7vw,5rem);max-width:16ch}
.case-hero__sum{margin-top:1.2rem;font-size:clamp(1.1rem,1.9vw,1.45rem);color:var(--ink-2);
  max-width:54ch;line-height:1.45}

.case-cover{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-1);box-shadow:0 50px 120px -60px rgba(0,0,0,.95);margin-top:clamp(1.5rem,4vw,2.5rem);
  aspect-ratio:16/10}
.case-cover img{width:100%;height:100%;object-fit:cover;object-position:top}

/* fact bar */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(1.5rem,4vw,2.5rem)}
.fact{background:var(--bg);padding:1.1rem 1.2rem}
.fact dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
.fact dd{font-weight:600;font-size:.95rem}
@media(min-width:720px){.facts{grid-template-columns:repeat(4,1fr)}}

/* generic prose block */
.cblock{display:grid;grid-template-columns:1fr;gap:1rem 3rem;align-items:start}
.cblock__label{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--p-accent);padding-top:.4rem}
.cblock__body{max-width:60ch}
.cblock__body p{color:var(--ink-2);margin-bottom:1rem;font-size:1.05rem}
.cblock__body p:last-child{margin-bottom:0}
.cblock h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.05;margin-bottom:.4rem;max-width:18ch}
@media(min-width:860px){.cblock{grid-template-columns:.4fr 1fr}}

/* approach steps */
.steps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.step__n{font-family:var(--font-mono);color:var(--p-accent);font-size:.85rem}
.step p{color:var(--ink-2);font-size:1.05rem;max-width:60ch}

/* highlights / results lists */
.hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.hl li{background:var(--bg-1);padding:1.2rem 1.3rem;display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-2)}
.hl li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--p-accent);margin-top:.55rem}

/* gallery */
.gal{display:grid;grid-template-columns:1fr;gap:1.2rem}
.gal figure{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-1)}
.gal img,.gal video{width:100%;display:block;object-fit:cover}
/* Mixed image/video galleries: --gal-ratio gives every card one media aspect so
   they stay aligned. Set it to the aspect of the asset that must not lose any of
   its composition — cover then fills the other cards without ever clipping that one. */
.gal--ratio img,.gal--ratio video{height:auto;aspect-ratio:var(--gal-ratio)}
/* Natural-aspect gallery: each capture keeps its own ratio via its width/height
   attributes (no single --gal-ratio), so a mix of wide and tall interface
   screenshots renders in full without cover-cropping. Rows stay even when the two
   cards in a row share the same capture ratio. */
.gal--natural img,.gal--natural video{height:auto}
.gal figcaption{padding:.7rem 1rem;font-size:.82rem;color:var(--ink-3);font-family:var(--font-mono);
  border-top:1px solid var(--line)}
@media(min-width:760px){.gal--2{grid-template-columns:1fr 1fr}}

/* reference / note callout */
.note{border:1px solid var(--line);border-left:3px solid var(--p-accent);border-radius:var(--r);
  padding:1rem 1.2rem;color:var(--ink-2);font-size:.95rem;background:var(--bg-1)}
.note a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.note a:hover{color:var(--p-accent)}

/* prev / next */
.pager{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.pager a{background:var(--bg);padding:1.6rem var(--gutter);display:flex;flex-direction:column;gap:.3rem;
  transition:background .3s}
.pager a:hover{background:var(--bg-1)}
.pager .dir{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pager .ttl{font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.pager .next{text-align:right;align-items:flex-end}
@media(min-width:760px){.pager{grid-template-columns:1fr 1fr}}

.case-section{padding-block:clamp(2.4rem,6vw,4.5rem)}
.case-section + .case-section{border-top:1px solid var(--line)}