/* ============================================================
   Fisga Studio — single page
   Light ground. Dark is a component, not the background.
   Palette inherited from Fisga. Square corners throughout.
   Type: Sans Forgetica wordmark / Roboto Black 900 / Roboto Light 300.
   ============================================================ */

:root{
  --paper:  #F3F1EE;   /* Light Gray  — page ground */
  --grey:   #CAC4B7;   /* Mid Gray    — alternate band */
  --white:  #FFFFFF;   /* not in the palette; cards need to lift off both greys */
  --ink:    #11190C;   /* Bolt Black  — type, and the dark blocks */
  --ink-2:  #1A2414;   /* Bolt Black, lifted — hover on dark surfaces */
  --accent: #EBFC72;   /* unchanged by instruction — a FILL, never ink on light */
  --mid:    #444638;   /* Darker Gray — body copy on light */
  --gray:   #787664;   /* Dark Gray   — secondary, larger text only */
  --label:  #444638;   /* small uppercase labels — Dark Gray fails AA at that size */
  --lgray:  #CAC4B7;   /* Mid Gray */

  --line:   rgba(17,25,12,.14);
  --line-2: rgba(17,25,12,.08);
  --on-dark:     #F3F1EE;
  --on-dark-dim: rgba(243,241,238,.72);
  --on-dark-mut: rgba(243,241,238,.52);
  --line-dark:   rgba(243,241,238,.15);

  --fs-display: clamp(2.6rem, 6.6vw, 5.3rem);
  --fs-h2:      clamp(1.7rem, 3.4vw, 2.75rem);
  --fs-stmt:    clamp(1.5rem, 3.1vw, 2.5rem);
  --fs-body:    clamp(.95rem, 1.05vw, 1.02rem);

  --wrap: 1240px;
  --pad:  clamp(1.15rem, 4vw, 3rem);
  --sp:   clamp(4rem, 9vw, 7.5rem);
  --gap:  clamp(.6rem, 1.4vw, 1.25rem);   /* inset around the dark cards */

  --mark:  "NeoPixel", "Roboto", system-ui, sans-serif;
  --title: "Roboto", system-ui, "Helvetica Neue", Arial, sans-serif;
  --body:  "Roboto", system-ui, "Helvetica Neue", Arial, sans-serif;
}

/* NeoPixel — the face the Fisga logo is drawn in. Wordmark only: never body
   copy, never headings. */
@font-face{
  font-family:"NeoPixel";
  src:url("/assets/fonts/NeoPixel-Regular.woff2") format("woff2"),
      url("/assets/fonts/NeoPixel-Regular.otf") format("opentype");
  font-weight:400; font-display:swap;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-weight:300; font-size:var(--fs-body);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{ position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--ink);
       padding:.7rem 1rem; z-index:99; }
.skip:focus{ left:0; }

/* ---------- type primitives ---------- */
h1,h2,h3{ margin:0; font-family:var(--title); font-weight:900; letter-spacing:-.03em; }
h1{ font-size:var(--fs-display); line-height:1.1; letter-spacing:-.038em; color:var(--on-dark); }
h1 em{ font-style:normal; background:var(--accent); color:var(--ink); padding:0 .12em .04em; }
.h2{ font-size:var(--fs-h2); line-height:1.02; max-width:22ch; }
.h2 em{ font-style:normal; background:var(--accent); color:var(--ink); padding:0 .12em .04em; }
.h2--dark{ color:var(--on-dark); }
p{ margin:0 0 1.05em; }

.eyebrow{
  display:flex; align-items:flex-start; gap:.55rem;
  font-family:var(--body); font-weight:500; font-size:.68rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--label); margin:0 0 1.5rem;
}
.eyebrow--dark{ color:var(--on-dark-mut); }
.tick{ width:8px; height:8px; background:var(--accent); flex:0 0 8px; margin-top:.32em; }

.sub{ max-width:62ch; color:var(--mid); margin-top:1.3rem; }
.ulink{ text-decoration:none; border-bottom:1px dashed var(--line); padding-bottom:2px;
        font-size:.9rem; letter-spacing:.02em; }
.ulink:hover{ border-bottom-color:var(--ink); }
.arw{ font-size:.9em; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:rgba(243,241,238,0); border-bottom:1px solid transparent;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .3s ease, border-color .3s ease;
}
.nav.is-stuck{ background:rgba(243,241,238,.92); border-bottom-color:var(--line-2); }
.nav__in{ display:flex; align-items:center; gap:2rem; height:66px; }
.mark{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mark); font-weight:400; font-size:1.96rem; letter-spacing:.01em;
  text-decoration:none; margin-right:auto; line-height:1;
}
.mark__sub{
  font-family:var(--body); font-weight:300; font-size:1.148rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--mid);
  transform:translateY(1px);
}
/* The yellow square divides the lockup: Fisga ▪ Studio. */
.mark__dot{
  display:block; width:8.4px; height:8.4px; background:var(--accent); flex:0 0 8.4px;
}
.nav__links{ display:flex; gap:1.8rem; }
.nav__links a{ font-size:.8rem; letter-spacing:.03em; text-decoration:none; color:var(--mid); }
.nav__links a:hover{ color:var(--ink); }
@media (max-width:860px){ .nav__links{ display:none; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent); color:var(--ink); text-decoration:none;
  font-size:.85rem; font-weight:500; letter-spacing:.01em;
  padding:.85rem 1.5rem; border:1px solid var(--accent); border-radius:0;
  transition:transform .18s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-2px); background:#F2FF96; }
.btn--sm{ padding:.55rem 1rem; font-size:.78rem; white-space:nowrap; }
.btn--lg{ padding:1rem 2rem; font-size:.92rem; margin-top:2.6rem; }
.btn--ghost{ background:transparent; color:var(--on-dark); border-color:var(--line-dark); }
.btn--ghost:hover{ background:transparent; border-color:var(--on-dark); }

/* ═══════════ HERO — dark card inset in the light page ═══════════ */
.hero{ padding-inline:0; padding-block:var(--gap); padding-top:calc(66px + var(--gap)); }
.hero--end{ padding-top:var(--gap); padding-bottom:calc(var(--gap) * 2); }
.hero__card{
  position:relative; overflow:hidden; background:var(--ink); color:var(--on-dark);
  min-height:min(88vh, 780px); display:flex; flex-direction:column;
  padding-block:clamp(1.6rem,4vw,3.4rem);
}
.hero__card--end{ min-height:auto; }
/* Hero photograph. The picture already carries a near-black left third, so the
   scrims only have to (a) hold that side down and (b) darken the lower right,
   where the buttons sit over the figure's mid-grey mass. Layer order is
   top-most first. */
.hero__field{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(17,25,12,.93) 0%, rgba(17,25,12,.74) 34%, rgba(17,25,12,.34) 58%, rgba(17,25,12,0) 84%),
    linear-gradient(to top, rgba(17,25,12,.92) 0%, rgba(17,25,12,.62) 22%, rgba(17,25,12,0) 58%),
    url("/assets/img/hero.jpg") 68% center / cover no-repeat,
    var(--ink);
}
@media (max-width:720px){
  /* keep the figure in frame when the card goes tall and narrow */
  .hero__field{ background-position:0 0, 0 0, 74% center, 0 0; }
}
.hero__field--end{
  background:
    radial-gradient(46% 60% at 88% 40%, rgba(235,252,114,.16), transparent 70%),
    linear-gradient(100deg, rgba(17,25,12,.96) 45%, rgba(17,25,12,.7) 100%);
}
.hero__slot{
  position:absolute; right:clamp(1rem,3vw,2.2rem); top:clamp(1rem,3vw,2.2rem);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  background:var(--accent); color:var(--ink); padding:5px 9px;
}
.hero__body{ position:relative; margin-top:auto; }
.hero h1{ margin-bottom:clamp(2rem,5vw,3.4rem); max-width:15ch; }
.hero__foot{ display:flex; flex-wrap:wrap; gap:2rem 3rem; align-items:flex-end; }
.hero__list{ list-style:none; margin:0; padding:0; color:var(--on-dark-dim); font-size:.95rem; line-height:1.75; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-left:auto; }
.hero__steps{
  position:relative; list-style:none; display:flex; flex-wrap:wrap; gap:2.5rem;
  margin-top:clamp(2.2rem,5vw,3.4rem); padding-top:1.3rem;
  border-top:1px solid var(--line-dark);
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:500; color:var(--on-dark-mut);
}
@media (max-width:720px){
  .hero__card{ min-height:auto; padding-top:5rem; }
  .hero__cta{ margin-left:0; }
  .hero__steps{ gap:.5rem 1.4rem; }
  /* the enlarged lockup is too wide next to the nav CTA at phone widths */
  .mark{ font-size:1.4rem; gap:.5rem; }
  .mark__sub{ font-size:.82rem; }
  .mark__dot{ width:6px; height:6px; flex:0 0 6px; }
}

/* ---------- client strip ---------- */
.strip{ border-bottom:1px solid var(--line-2); padding-block:clamp(1.6rem,3vw,2.4rem); }
.strip__in{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.8rem 2.2rem; }
.strip__lead{
  margin:0; font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  font-weight:500; color:var(--label); white-space:nowrap;
}
.strip__names{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 2rem; margin:0; padding:0; }
.strip__names li{
  font-family:var(--title); font-weight:900; font-size:clamp(.85rem,1.15vw,1rem);
  letter-spacing:-.02em; color:var(--ink); opacity:.72;
}

/* ---------- bands ---------- */
.band{ padding-block:var(--sp); }
.band--tight{ padding-top:clamp(3rem,6vw,4.5rem); }
.band--grey{ background:var(--grey); }
.band--dark{ background:var(--ink); color:var(--on-dark); }
.band--dark .sub{ color:var(--on-dark-dim); }

/* ---------- grey-fade statement ---------- */
.stmt{
  font-family:var(--title); font-weight:900; font-size:var(--fs-stmt);
  line-height:1.14; letter-spacing:-.03em; max-width:24ch; margin:0;
}
.stmt .fade1{ color:var(--mid); }
.stmt .fade2{ color:var(--gray); }
.stmt__link{ margin:2.4rem 0 0; }

/* ---------- living glow (desktop only) ----------
   Two canvases behind the statement: grey bubbles at the back, accent bubbles in
   front, each layer drifting on its own and bouncing off the section edges. Drawn
   by assets/js/glow.js from the --accent and --ink tokens; nothing is hard-coded. */
.band--glow{ position:relative; overflow:hidden; }
.band--glow .wrap{ position:relative; z-index:1; }
.glow{ position:absolute; top:0; right:0; bottom:0; width:55%; pointer-events:none; }
.glow canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.glow__back{ filter:blur(48px); }   /* far: softer, slower */
.glow__front{ filter:blur(26px); }  /* near: crisper, quicker */
@media (max-width:900px){ .glow{ display:none; } }

/* ---------- named principals ----------
   PORTRAIT HOUSE STYLE: black and white, dark ground, a single acid-yellow rim
   light from behind. SQUARE frames, head about two thirds of the height, clear
   space above. Shoot to that and the crop comes straight out of the photograph
   with no canvas extension — which is what keeps the edges sharp. Every portrait
   added later, principals and network alike, matches this. It is the thing that
   will make a roster shot in six cities look like one studio. */
.team{
  list-style:none; margin:clamp(2.4rem,5vw,3.4rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:2px;
}
.team__i{ background:var(--white); display:flex; flex-direction:column; }
.team__img{ position:relative; aspect-ratio:1/1; display:flex; align-items:flex-end; padding:.7rem; }
.team__img--a{ background:url("/assets/img/team-ed.jpg") 50% 50% / cover no-repeat, var(--ink); }
.team__img--b{ background:url("/assets/img/team-david.jpg") 50% 50% / cover no-repeat, var(--ink); }
.team__img--c{ background:url("/assets/img/team-elio.jpg") 50% 50% / cover no-repeat, var(--ink); }
.team__img--d{ background:url("/assets/img/team-guto.jpg") 50% 50% / cover no-repeat, var(--ink); }
.team__meta{ padding:1.2rem 1.3rem 1.5rem; }
.team__meta b{ display:block; font-family:var(--title); font-weight:900; font-size:1.12rem; letter-spacing:-.025em; }
.team__meta i{ display:block; font-style:normal; font-size:.8rem; font-weight:500; margin-top:.3rem; }
.team__meta span{ display:block; font-size:.74rem; color:var(--label); margin-top:.45rem;
  padding-bottom:.7rem; border-bottom:1px dashed var(--line); }
.team__meta p{ margin:.8rem 0 0; font-size:.81rem; line-height:1.6; color:var(--mid); }

.eyebrow--sub{ margin-top:clamp(2.6rem,5vw,3.6rem); margin-bottom:0; }

/* ---------- partners ----------
   Companies, not people. Deliberately typographic — no logos, because a logo
   wall of two looks thinner than a list of two. */
.partners{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:1px; background:var(--line); border-block:1px solid var(--line);
}
.partners li{ background:var(--paper); padding:1.5rem 1.5rem 1.7rem; }
.partners b{ display:block; font-family:var(--title); font-weight:900; font-size:1.4rem; letter-spacing:-.03em; }
.partners span{
  display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--label); margin-top:.5rem;
  padding-bottom:.85rem; border-bottom:1px dashed var(--line);
}
.partners p{ margin:.95rem 0 1rem; font-size:.85rem; line-height:1.65; color:var(--mid); max-width:46ch; }
.partners__note{ margin:1.1rem 0 0; font-size:.8rem; color:var(--label); max-width:60ch; }

/* ---------- three cards ---------- */
.grid3{ margin-top:clamp(2.4rem,5vw,3.6rem);
        display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }
.card{ background:var(--white); padding:clamp(1.5rem,2.4vw,2.1rem); }
.card__n{ display:block; font-size:.68rem; letter-spacing:.17em; font-weight:500;
          color:var(--ink); background:var(--accent); padding:3px 7px; margin-bottom:1.5rem; align-self:start; width:max-content; }
.card h3{ font-size:1.35rem; margin-bottom:.8rem; }
.card p{ color:var(--mid); margin:0; font-size:.94rem; }
@media (max-width:880px){ .grid3{ grid-template-columns:1fr; } }

/* ---------- capabilities ---------- */
.caps{ margin-top:clamp(2.4rem,5vw,3.4rem);
       display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.4rem 2rem; }
.caps__col h3{
  font-family:var(--body); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--on-dark-mut); padding-bottom:.85rem; margin-bottom:1rem;
  border-bottom:1px solid var(--line-dark);
}
.caps__col ul{ list-style:none; margin:0; padding:0; }
.caps__col li{ font-weight:300; font-size:1rem; line-height:1.42; padding:.38rem 0; color:var(--on-dark-dim); }
@media (max-width:960px){ .caps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .caps{ grid-template-columns:1fr; } }

/* ---------- split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,4.5rem); }
.split__r p{ color:var(--mid); max-width:54ch; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; padding:0; margin:1.8rem 0 0; }
.chips li{ font-size:.75rem; letter-spacing:.04em; padding:.35rem .75rem;
           border:1px solid var(--line); color:var(--mid); }

/* ---------- work ---------- */
.work{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,4rem); }
.work__h{
  font-family:var(--body); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--label); padding-bottom:.85rem;
  border-bottom:1px solid var(--line); margin-bottom:.3rem;
}
.work__list{ list-style:none; margin:0; padding:0; }
.work__list li{ padding:.95rem 0; border-bottom:1px solid var(--line-2); }
.work__list b{ display:block; font-family:var(--title); font-weight:900; font-size:1.1rem; letter-spacing:-.025em; }
.work__list span{ display:block; font-size:.82rem; color:var(--mid); margin-top:.15rem; }
@media (max-width:780px){ .work{ grid-template-columns:1fr; } }

/* ---------- fisga ---------- */
.fisga{ max-width:62ch; }
/* Fisga's wordmark, set live in its own face rather than shipped as an image:
   scales, recolours and stays selectable. PNG versions remain in assets/img
   for anywhere that needs a file. */
.fisga__mark{
  display:block; font-family:var(--mark); font-weight:400;
  font-size:2.5rem; letter-spacing:.005em; line-height:1;
  margin:0 0 1.5rem; color:var(--ink);
}
.fisga__h{ font-size:clamp(1.4rem,2.5vw,1.95rem); line-height:1.08; margin-bottom:1rem; }
.fisga p{ color:var(--mid); }

/* ---------- contact ---------- */
.contact__h{ font-family:var(--title); font-weight:900; font-size:var(--fs-h2);
             line-height:1.02; color:var(--on-dark); }
.contact__sub{ max-width:52ch; color:var(--on-dark-dim); margin-top:1.2rem; }
.contact__grid{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line-dark); border-block:1px solid var(--line-dark);
}
.contact__item{ background:var(--ink); padding:1.3rem 1.2rem; text-decoration:none; transition:background .2s ease; }
a.contact__item:hover{ background:var(--ink-2); }
.contact__item .eyebrow{ margin-bottom:.45rem; }
.contact__item b{ display:block; font-family:var(--title); font-weight:900; font-size:1rem;
                  letter-spacing:-.02em; word-break:break-word; color:var(--on-dark); }
@media (max-width:720px){ .contact__grid{ grid-template-columns:1fr; } }

/* ---------- lineage ----------
   Deliberately quiet. The only place the former name appears, and it appears as
   history rather than as the brand. Keep it small — if it grows, it starts
   competing with the name at the top of the page. */
.lineage{ border-top:1px solid var(--line); padding-block:clamp(1.8rem,3.5vw,2.6rem); }
.lineage__in{ display:grid; grid-template-columns:9rem minmax(0,1fr); gap:.6rem 2.5rem; align-items:baseline; }
.lineage__lbl{
  margin:0; font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  font-weight:500; color:var(--label);
}
.lineage__txt{ margin:0; max-width:64ch; font-size:.88rem; line-height:1.65; color:var(--mid); }
.lineage__txt b{ font-weight:500; color:var(--ink); }
@media (max-width:680px){ .lineage__in{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line-2); padding-block:1.8rem; font-size:.78rem; color:var(--label); }
.foot__in{ display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; }
@media (max-width:720px){ .foot__mid{ order:3; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   WORK — tiles on the home page and /work/, and the case-study
   pages under /work/<slug>/. Generated from tools/work.json by
   tools/build_work.py; the markup is the template, this is its skin.
   ============================================================ */

/* ---------- nav on inner pages ----------
   No dark hero to sit over, so the bar is solid from the first pixel. */
.nav--solid{ background:rgba(243,241,238,.92); border-bottom-color:var(--line-2); }

/* ---------- tiles ----------
   White cards on the grey band, 2px gutters, same rhythm as the principals.
   The cover is cropped to 4:5 on purpose: one shape across eleven very
   different pieces is what makes them read as one body of work. */
.tiles{
  list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px;
}
.tile__a{ display:flex; flex-direction:column; height:100%; background:var(--white);
          color:var(--ink); text-decoration:none; }
.tile__img{ display:block; aspect-ratio:4/5; overflow:hidden; background:var(--grey); }
.tile__img img{ width:100%; height:100%; object-fit:cover;
                transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.tile__a:hover .tile__img img{ transform:scale(1.03); }
@media (prefers-reduced-motion: reduce){ .tile__img img{ transition:none; } .tile__a:hover .tile__img img{ transform:none; } }
.tile__meta{ display:flex; flex-direction:column; padding:1.1rem 1.2rem 1.3rem; border-top:2px solid var(--paper); }
.tile__client{ font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; font-weight:500; color:var(--label); }
.tile__title{ font-family:var(--title); font-weight:900; font-size:1.15rem; letter-spacing:-.025em;
              line-height:1.12; margin-top:.45rem; }
.tile__type{ font-size:.8rem; color:var(--mid); margin-top:.45rem; }
.tile__a:hover .tile__title{ background:var(--accent); align-self:flex-start; padding:0 .12em .04em; margin-left:-.12em; }
@media (max-width:960px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .tiles{ grid-template-columns:1fr; } }

.work__more{ margin:1.6rem 0 clamp(2.4rem,5vw,3.6rem); }

/* ---------- case header ---------- */
.case{ padding-top:calc(66px + clamp(2.6rem,6vw,4.6rem)); padding-bottom:clamp(2rem,4vw,3rem); }
.crumb{ text-decoration:none; color:var(--ink); }
.crumb:hover{ background:var(--accent); }
.crumb__sep{ margin-inline:.5em; color:var(--gray); }
.case__client{ font-family:var(--title); font-weight:900; font-size:1rem; letter-spacing:-.02em;
               color:var(--gray); margin:0 0 .6rem; }
.case__h1{ font-family:var(--title); font-weight:900; font-size:var(--fs-display); line-height:1.02;
           letter-spacing:-.038em; color:var(--ink); max-width:16ch; }
.case__sum{ font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.5; color:var(--mid);
            max-width:52ch; margin:1.4rem 0 0; }

/* ---------- lead media — inset like the hero card ---------- */
.lead{ padding-block:0 var(--gap); }
.lead__card{ background:var(--ink); margin-inline:var(--gap); }
.lead__media{ display:block; width:100%; height:auto; max-height:min(86vh, 900px); object-fit:contain; margin-inline:auto; }
video.lead__media{ aspect-ratio:16/9; background:var(--ink); }
.lead__cap{ margin:0; padding:.7rem var(--pad); font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
            font-weight:500; color:var(--on-dark-mut); }

/* ---------- story: sticky facts on the left, copy on the right ---------- */
.story__grid{ display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); }
.story__meta{ position:sticky; top:calc(66px + 1.5rem); align-self:start; }
.meta{ margin:0; border-top:1px solid var(--line); }
.meta__row{ display:grid; grid-template-columns:5.6rem minmax(0,1fr); gap:.6rem; padding:.7rem 0; border-bottom:1px solid var(--line-2); }
.meta dt{ font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; font-weight:500; color:var(--label); padding-top:.15em; }
.meta dd{ margin:0; font-size:.86rem; color:var(--ink); line-height:1.45; }
.meta__h{ margin:1.6rem 0 0; font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; font-weight:500; color:var(--label); }
.chips--tight{ margin-top:.7rem; gap:.35rem; }
.story__body p{ color:var(--mid); max-width:58ch; font-size:clamp(1rem,1.15vw,1.08rem); }
.story__body{ margin-top:1.6rem; }
@media (max-width:860px){
  .story__grid{ grid-template-columns:1fr; }
  .story__meta{ position:static; }
}

/* ---------- gallery ----------
   Rows of equal-height figures; each figure's width is proportional to its
   aspect ratio (set inline as flex-grow by the generator), so a poster and a
   square share a row without cropping either. Wide images take a row alone. */
.g__rows{ display:flex; flex-direction:column; gap:2px; margin-top:clamp(1.6rem,3vw,2.4rem); }
.g__row{ display:flex; gap:2px; }
.g__fig{ margin:0; min-width:0; background:var(--white); position:relative; }
.g__spacer{ min-width:0; }
.g__fig img{ width:100%; height:auto; display:block; }
.g__fig figcaption{
  position:absolute; left:0; bottom:0; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; background:var(--accent); color:var(--ink); padding:4px 8px;
}
@media (max-width:560px){
  /* phones: one image per row, full width, caption underneath */
  .g__row{ flex-direction:column; }
  .g__fig{ flex:none !important; }
  .g__spacer{ display:none; }
  .g__fig figcaption{ position:static; }
}

/* ---------- previous / next ---------- */
.casenav{ border-top:1px solid var(--line); }
.casenav__in{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-2); }
.casenav__a{ background:var(--paper); padding:1.5rem 1.4rem 1.6rem; text-decoration:none; color:var(--ink); transition:background .2s ease; }
.casenav__a:hover{ background:var(--white); }
.casenav__a .eyebrow{ margin-bottom:.7rem; }
.casenav__a b{ display:block; font-family:var(--title); font-weight:900; font-size:1.05rem; letter-spacing:-.025em; }
.casenav__a i{ display:block; font-style:normal; font-size:.82rem; color:var(--mid); margin-top:.2rem; }
.casenav__all{ text-align:center; }
.casenav__all .eyebrow{ justify-content:center; }
@media (max-width:720px){
  .casenav__in{ grid-template-columns:1fr; }
  .casenav__all{ text-align:left; order:3; }
  .casenav__all .eyebrow{ justify-content:flex-start; }
}