/* ============================================================
   Case study pages.

   Type scale, spacing, and container styling are measured from the
   reference site's own case pages, not approximated:
     title      32px  Fraunces 300, -0.06em, 1.15
     sub-head   24px  line-height 130%, #313336
     body       15px
     labels     12px  uppercase mono, rgba(0,0,0,.6)
     media      8px radius, 30px padding, light grey field
     sections   ~80px top, ~70px bottom
   ============================================================ */

.backbtn{
  position:fixed;
  top:22px;left:22px;
  z-index:60;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px 11px 14px;
  border-radius:999px;
  background:#2f2f2f;color:#fff;
  font-size:14px;text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.16);
  transition:transform .18s ease,background .18s ease;
}
.backbtn:hover{background:#141414;transform:translateY(-1px)}
.backbtn svg{flex:none}

.case{
  margin:8px;
  border-radius:24px;
  background:#fff;
  overflow:hidden;
}
.case + .case{margin-top:8px}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}

/* ── header ───────────────────────────────────────────────── */
.case-head{padding:106px 0 40px}
.case-head h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:32px;
  letter-spacing:-.06em;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 30px;
}
.meta{
  display:grid;
  grid-template-columns:200px 265px 1fr;
  gap:16px;
}
.meta.m4{grid-template-columns:repeat(4,1fr);gap:20px}
.mlabel{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(0,0,0,.6);
  margin:0 0 6px;
}
.mval{font-size:15px;line-height:1.45;color:var(--body);margin:0}

/* ── full-bleed tinted band ───────────────────────────────── */
.band{
  background:var(--tint,#eee);
  padding:50px 24px;
}
.band-inner{
  max-width:1000px;margin:0 auto;
  border-radius:8px;overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 3px 10px rgba(0,0,0,.06),0 20px 50px rgba(0,0,0,.10);
}
.band-inner img,.band-inner video{width:100%;height:auto;display:block}

/* ── sections ─────────────────────────────────────────────── */
.sec{padding:80px 0 70px}
.sec.tight{padding:50px 0 40px}
.slabel{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(0,0,0,.6);
  margin:0 0 14px;
}
/* two-tone headline: setup clause grey, punch clause dark */
.shead{
  font-family:var(--sans);
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  color:var(--body);
  margin:0 0 20px;
  max-width:44ch;
}
.shead .dim{color:rgba(0,0,0,.55);font-weight:500}

.lede,.copy{font-size:15px;line-height:1.65;color:var(--body);margin:0 0 14px}
.copy:last-child,.lede:last-child{margin-bottom:0}
.copy strong,.lede strong{font-weight:600;color:var(--ink)}
.copy em,.lede em{font-style:italic}
.copy a,.lede a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

/* ── bullets ──────────────────────────────────────────────── */
.bullets{margin:14px 0 0;padding:0;list-style:none}
.bullets li{
  position:relative;
  padding-left:18px;
  font-size:15px;line-height:1.6;color:var(--body);
  margin-bottom:7px;
}
.bullets li::before{
  content:"";position:absolute;left:2px;top:9px;
  width:4px;height:4px;border-radius:50%;background:rgba(0,0,0,.45);
}
.bullets strong{font-weight:600;color:var(--ink)}

/* ── grey box: scenario callouts and figure captions ──────── */
.callout,.capbox{
  background:rgba(0,0,0,.035);
  border-radius:8px;
  padding:30px;
  margin:0 0 24px;
}
.callout .mono{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(0,0,0,.45);
  margin:0 0 10px;
}
.callout p,.capbox p{font-size:15px;line-height:1.6;color:var(--body);margin:0}
.callout strong,.capbox strong{font-weight:600;color:var(--ink)}
.capbox em{font-style:italic}

/* ── figures: grey field, 30px padding, 8px radius ────────── */
figure{margin:0 0 24px}
.figbox{
  background:rgba(0,0,0,.035);
  border-radius:8px;
  padding:30px;
  text-align:center;
}
.figbox img{
  /* natural size up to the column, so small assets stay sharp */
  width:auto;max-width:100%;height:auto;
  margin:0 auto;
  border-radius:4px;
}
figcaption{
  font-size:14px;line-height:1.55;
  color:rgba(49,51,54,.75);
  margin:12px 0 0;
}
figcaption em{font-style:italic}

/* video figures */
.figbox.vid{padding:0;background:transparent}
.figbox.vid video{width:100%;height:auto;display:block;border-radius:8px}
.figbox.phone{background:transparent;padding:0}
.figbox.phone video{border-radius:0}

/* ── grids ────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}
.duo figure,.trio figure{margin:0}

.screenrow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
  margin:0 0 24px;
}
.screenrow .scr{margin:0}
.screenrow figcaption{font-size:13px;line-height:1.5}
.screenrow figcaption strong{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}

/* ── stats ────────────────────────────────────────────────── */
.statrow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:24px;
  padding:26px 0 4px;
  border-top:1px solid var(--line);
  margin-bottom:24px;
}
.stat .num{
  font-family:var(--serif);
  font-weight:300;
  font-size:38px;
  letter-spacing:-.05em;
  line-height:1;
  color:var(--ink);
  margin:0 0 8px;
}
.stat .num em{font-style:normal;color:var(--accent-mid)}
.stat .lab{font-size:14px;line-height:1.45;color:rgba(0,0,0,.6);margin:0}

/* ── pull quote ───────────────────────────────────────────── */
.quote{border-left:2px solid var(--accent);padding:4px 0 4px 22px;margin:0 0 24px}
.quote p{
  font-family:var(--serif);font-weight:300;
  font-size:24px;line-height:1.35;letter-spacing:-.03em;
  color:var(--ink);margin:0 0 10px;
}
.quote .attr{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,.45);margin:0}

/* ── numbered process ─────────────────────────────────────── */
.steps{counter-reset:s;margin:0 0 24px;padding:0;list-style:none}
.steps li{
  counter-increment:s;
  position:relative;
  padding:16px 0 16px 52px;
  border-bottom:1px solid var(--line);
}
.steps li:first-child{border-top:1px solid var(--line)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:18px;
  font-family:var(--mono);font-size:12px;
  color:var(--accent-mid);
}
.steps h4{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--ink)}
.steps p{margin:0;font-size:15px;line-height:1.55;color:rgba(0,0,0,.6)}

/* ── key/value facts ──────────────────────────────────────── */
.facts{margin:0 0 24px;border-top:1px solid var(--line)}
.facts .row{
  display:grid;grid-template-columns:220px 1fr;gap:20px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.facts .k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,.6)}
.facts .v{font-size:15px;line-height:1.55;color:var(--body)}

/* ── research verbatims ───────────────────────────────────── */
.voicegrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 24px}
.voice{
  margin:0;padding:24px;
  border-radius:8px;
  background:rgba(0,0,0,.035);
  font-size:15px;line-height:1.6;color:var(--body);
}
.voice::before{content:"\201C"}
.voice::after{content:"\201D"}

/* ── timeline ─────────────────────────────────────────────── */
.timeline{margin:0 0 24px;padding:0;list-style:none;border-left:1px solid var(--line)}
.timeline li{position:relative;padding:0 0 22px 26px}
.timeline li::before{
  content:"";position:absolute;left:-4.5px;top:6px;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px #fff;
}
.timeline .ph{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(0,0,0,.45);margin:0 0 4px;
}
.timeline h4{margin:0 0 3px;font-size:15px;font-weight:600;color:var(--ink)}
.timeline p{margin:0;font-size:15px;line-height:1.55;color:rgba(0,0,0,.6)}

/* ── a named sub-block inside a section ───────────────────── */
.block{margin:0 0 44px}
.block:last-child{margin-bottom:0}
.block h4{
  font-family:var(--sans);
  font-size:24px;font-weight:700;line-height:1.3;
  color:var(--body);
  margin:0 0 14px;
  max-width:44ch;
}
.block .why{font-size:15px;line-height:1.65;color:var(--body);margin:0 0 20px}
.block .why strong{font-weight:600;color:var(--ink)}

/* persona */
.persona{border-top:1px solid var(--line);padding:24px 0 6px}
.persona h4{margin:0 0 4px;font-size:17px;font-weight:600;color:var(--ink)}
.persona .who{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(0,0,0,.45);margin:0 0 12px;
}

/* before / after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 24px}
.ba figure{margin:0 0 12px}
.ba .tagline{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(0,0,0,.45);margin:0 0 10px;
}
.ba p.copy{font-size:14px}

/* ── next project ─────────────────────────────────────────── */
.nextbar{
  border-top:1px solid var(--line);
  margin-top:20px;
  padding:34px 0 60px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nextbar .nlabel{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(0,0,0,.45);margin:0 0 6px;
}
.nextbar a.nname{
  font-family:var(--serif);font-weight:300;
  font-size:30px;letter-spacing:-.05em;color:var(--ink);
  text-decoration:none;transition:color .18s ease;
}
.nextbar a.nname:hover{color:var(--accent-ink)}

@media (max-width:900px){
  .meta,.meta.m4{grid-template-columns:1fr;gap:18px}
  .case-head{padding:96px 0 32px}
  .sec{padding:54px 0 46px}
  .duo,.trio,.voicegrid,.ba{grid-template-columns:1fr}
  .facts .row{grid-template-columns:1fr;gap:4px}
  .band{padding:24px 16px}
  .backbtn{top:14px;left:14px}
  .figbox,.callout,.capbox{padding:18px}
}

/* ── phone screens ─────────────────────────────────────────
   `.figbox.phone` existed in the markup but never set a size, so a portrait
   clip inherited `width:100%` from `.figbox.vid` and rendered at 952x2037.
   Five of those ran the FONRA page to 22,000px. A phone screen renders at
   phone size, centred on the column, with a device-ish edge since these
   recordings carry no bezel of their own. */
.figbox.phone video,
.figbox.phone img{
  width:auto;max-width:100%;
  height:auto;max-height:640px;
  margin:0 auto;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.10),0 18px 40px rgba(0,0,0,.12);
}

/* no figure needs to be taller than the reader's screen */
.figbox img{max-height:760px}
.figbox.vid video{max-height:760px;width:auto;max-width:100%;margin:0 auto}

@media (max-width:640px){
  .figbox.phone video,.figbox.phone img{max-height:480px}
  .figbox img,.figbox.vid video{max-height:560px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME, 2026-09-01.. Case pages follow the home page.
   Band tints are deliberately left bright: they are each project's own colour
   and they read as posters on a dark wall rather than as errors.
   ═══════════════════════════════════════════════════════════════════════════ */
.backbtn{
  background:#f2f2f4;color:#0b0b0d;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.4);
}
.backbtn:hover{background:#ffffff}

.case{background:var(--panel)}

/* figures sat on a light grey field; on black they need a raised dark one */
.figbox{background:rgba(255,255,255,.045);border:1px solid var(--line)}
.capbox{background:rgba(255,255,255,.05);border:1px solid var(--line)}
.callout{background:rgba(255,255,255,.05);border-color:var(--line)}
.quote{border-color:var(--accent)}
.persona{background:rgba(255,255,255,.045);border:1px solid var(--line)}
.voice{background:rgba(255,255,255,.045);border:1px solid var(--line)}

.slabel,.mlabel{color:var(--muted)}
.shead,.mval,.block h4,.stat .num,.facts .k{color:var(--ink)}
.copy,.lede,.why,.stat .lab,.facts .v{color:var(--body)}
.facts .row{border-color:var(--line)}
.steps li{border-color:var(--line)}
.steps li h4{color:var(--ink)}
.steps li p{color:var(--body)}
figcaption{color:var(--muted)}
.nextwrap,.nextlink{border-color:var(--line)}
.nextlink h3{color:var(--ink)}

/* ── dark theme, round two: rules that still carried a light value ───────────
   Found by diffing every colour-bearing rule in this file against the dark
   block above. The first one was the bad one: the grey half of every two-tone
   section headline was rgba(0,0,0,.55), so on black it was invisible and every
   headline read as only its second clause. */
.shead .dim{ color:rgba(255,255,255,.52); }

/* the media container inside a tinted band was a white card */
.band-inner{
  background:#0b0b0d;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}

/* bullet dots were black on black */
.bullets li::before{ background:rgba(255,255,255,.45); }

/* every small mono label in the component set was rgba(0,0,0,.45) */
.callout .mono,
.quote .attr,
.timeline .ph,
.persona .who,
.ba .tagline,
.nextbar .nlabel{ color:rgba(255,255,255,.45); }

.steps p,
.timeline p{ color:var(--body); }
.timeline li::before{ box-shadow:0 0 0 4px var(--panel); }
.nextbar{ border-color:var(--line); }
.nname{ color:var(--ink); }
.band-inner{ background:#000; }

/* ── full-bleed opening hero ──────────────────────────────────────────────────
   Modelled on lalau.ca: the page opens on the work at full viewport scale,
   edge to edge, and the title comes after.

   It used to say that and not do it. The art sat in a 1500px rounded card with
   a shadow, centred on the black page with padding around it, so every case
   study opened on a boxed screenshot floating in a void, and because the art is
   wider than the viewport is tall it also ran past the fold and cut itself off.
   Now the section is one screen tall and the media fills it. The cover art is
   authored at 16:9 for exactly this (make_covers_v2.py), so `cover` trims very
   little on a normal window. */
.hero-cover{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  margin:0;
  padding:0;
  background:var(--tint,#0b0b0d);
  overflow:hidden;
  isolation:isolate;
}
.hero-cover-in{
  position:absolute; inset:0;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}
.hero-cover-in img,
.hero-cover-in video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-scroll{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
  mix-blend-mode:difference;          /* legible on the pale fields and the dark ones */
  pointer-events:none;
}
.hero-scroll::after{
  content:""; display:block; width:1px; height:22px; margin:9px auto 0;
  background:linear-gradient(rgba(255,255,255,.72), transparent);
}

/* the title block now follows the hero, so it needs its own air */
.case-head{ padding-top:82px; }

@media (max-width:820px){
  .hero-cover{ min-height:64svh; padding:0; }
  .case-head{ padding-top:54px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LONG-FORM CASE COMPONENTS, 2026-09-03
   Killshot runs the longer grammar decoded off chenmelody.com/workato: a
   concept figure over a blurred ground, composed multi-panel figures, numbered
   mono annotations, a mid-page panel break, and a closing reflection.

   All additive. Nothing above this line changed, so the other four case
   studies render exactly as they did.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── concept figure ─────────────────────────────────────────────────────────
   The reference sets its diagram over an out-of-focus photograph of a desk.
   There is no photograph of an agency here, so the ground is the console's own
   inbox, blurred and levelled down to a field (assets/killshot-ground.jpg,
   mean luminance 61 so white cards still read as objects on it). */
.concept{margin:0 0 24px}
.cground{
  border-radius:8px;
  border:1px solid var(--line);
  background-size:cover;
  background-position:center;
  padding:76px 46px;
  overflow:hidden;
}
.crow{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap}
.ccard{
  background:rgba(255,255,255,.95);
  border-radius:12px;
  padding:22px 24px;
  flex:0 1 330px;
  box-shadow:0 12px 38px rgba(0,0,0,.46);
}
.ct{font-size:15px;font-weight:600;color:#0f0f0f;margin:0 0 6px;letter-spacing:-.005em}
.cs{font-size:13px;line-height:1.5;color:#4a4d51;margin:0 0 16px}
.cf{
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:#6a6d72;
  margin:0;padding-top:12px;border-top:1px solid rgba(0,0,0,.10);
}
.cdash{
  flex:0 0 84px;height:1px;position:relative;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 6px,transparent 6px 12px);
}
.cdash::after{
  content:"";position:absolute;right:0;top:-3.5px;
  border-left:6px solid rgba(255,255,255,.68);
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}
.cm{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#6a6d72;margin:0 0 14px;
}
.cpills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.cpills li{
  font-size:12px;color:#26282b;
  background:rgba(0,0,0,.055);border:1px solid rgba(0,0,0,.08);
  border-radius:999px;padding:5px 11px;
}
.cpills li:last-child{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  background:none;border-color:transparent;color:#6a6d72;padding-left:2px;
}

/* ── composed multi-panel figure ────────────────────────────────────────────
   The reference's governance figure overlaps its panels in one field rather
   than running them as separate screenshots. `over` sits on top of `under`. */
.figbox.stack{
  display:flex;flex-direction:column;align-items:center;
  padding:38px 30px;
}
.figbox.stack img{display:block;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.figbox.stack img.over{width:94%;position:relative;z-index:2;margin-bottom:-30px}
.figbox.stack img.under{width:82%}

/* ── numbered mono annotations ──────────────────────────────────────────────
   A caps line that states the move, then the panel that proves it. */
.annot{
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-radius:8px;padding:40px 30px;margin:0 0 24px;
}
.astep + .astep{margin-top:36px;padding-top:36px;border-top:1px dashed var(--line)}
.alab{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.60);margin:0 0 20px;
  display:flex;align-items:center;gap:12px;
}
.alab em{font-style:normal;color:#fff}
.anum{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;color:rgba(255,255,255,.72);
}
.afig{text-align:center}
.afig img{max-width:100%;height:auto;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ── reflection ─────────────────────────────────────────────────────────────
   The reference closes on a context paragraph, an italic hinge line, and three
   lessons that each lead on a bold statement. */
.wit{font-size:15px;line-height:1.65;color:var(--body);margin:24px 0 16px}
.wit em{font-style:italic}
.lesson{margin-bottom:16px}
.lesson:last-child{margin-bottom:0}
.lesson strong{font-weight:600;color:var(--ink)}

@media (max-width:760px){
  .cground{padding:40px 22px}
  .crow{flex-direction:column;flex-wrap:wrap}
  .ccard{flex:0 0 auto;width:100%}
  .cdash{transform:rotate(90deg);margin:28px 0}
  .figbox.stack img.over{width:100%;margin-bottom:-18px}
  .figbox.stack img.under{width:96%}
  .annot{padding:28px 20px}
  .alab{align-items:flex-start}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LONG-FORM CASE COMPONENTS, ROUND TWO, 2026-09-03

   Decoded off two more reference pages, on top of the workato set above:

     chenmelody.com/loop   research-led grammar. A cloud of verbatim quotes
                           with the themes pulled out of it, numbered pain
                           cards, a mission statement, how-might-we, and a
                           design evolution built from emoji-led findings.

     tianyix.com/venmo     product-led grammar. Centred accent headings, giant
                           ghosted words carrying a list, full-bleed alternating
                           feature blocks, a chevron process bar, three-up
                           principle rows, and persona cards with a big quote.

   PER-PAGE ACCENT. Both references run their own project colour through every
   one of these. `--ca` defaults to the site aqua, and a case page overrides it
   in the head, so the five studies stay one system while each keeps its hue.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ca:#3ddfe2;                    /* per-case accent, overridden per page */
  --ca-ink:#83eff0;                /* readable small text in that hue */
  --ca-soft:rgba(61,223,226,.14);  /* fills and highlights */
}

/* ── voice cloud: verbatim quotes, with the themes pulled out of them ────────
   The reference scatters interview quotes and floats the insight themes over
   the middle. Scattering by absolute position breaks at every width, so this
   runs a column-masonry field with the themes as a full-width band through it,
   which reads the same and survives reflow. */
.cloud{
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-radius:8px;padding:34px 30px;margin:0 0 24px;
}
.cloud-q{columns:2;column-gap:20px;margin:0 0 26px}
.cloud-q blockquote{
  break-inside:avoid;margin:0 0 14px;padding:16px 18px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;
  font-size:13.5px;line-height:1.55;color:var(--body);
}
.cloud-q blockquote .src{
  display:block;margin-top:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:rgba(255,255,255,.42);
}
.cloud-q blockquote em{font-style:normal;color:var(--ink);font-weight:500}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.theme{
  background:var(--ca-soft);border:1px solid var(--ca);border-radius:8px;
  padding:18px 18px 20px;text-align:center;
}
.theme .tn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ca);margin:0 0 8px;
}
.theme h5{font-size:16px;font-weight:600;color:var(--ink);margin:0;line-height:1.3}

/* ── numbered pain cards, alternating ───────────────────────────────────────
   The reference alternates art and text side to side down the column. */
.pain{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  margin:0 0 18px;background:rgba(255,255,255,.03);
}
.pain.flip .pain-art{order:2}
.pain-art{
  background:rgba(255,255,255,.045);
  display:flex;align-items:center;justify-content:center;
  padding:30px;min-height:210px;
}
.pain-art .pnum{
  font-family:var(--serif);font-weight:300;font-size:104px;line-height:1;
  letter-spacing:-.06em;color:var(--ca);opacity:.5;
}
.pain-art .pstat{text-align:center}
.pain-art .pstat .v{
  font-family:var(--serif);font-weight:300;font-size:52px;line-height:1;
  letter-spacing:-.05em;color:var(--ca);display:block;margin-bottom:10px;
}
.pain-art .pstat .l{
  font-size:12.5px;line-height:1.5;color:var(--body);display:block;max-width:24ch;margin:0 auto;
}
.pain-body{padding:30px}
.pain-body h4{
  font-size:19px;font-weight:600;color:var(--ink);margin:0 0 12px;line-height:1.3;
}
.pain-body h4 .n{color:var(--ca);margin-right:6px}
.pain-body p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0 0 12px}
.pain-body p:last-child{margin:0}
.pain-body blockquote{
  margin:14px 0 0;padding-left:14px;border-left:2px solid var(--ca);
  font-size:13.5px;line-height:1.55;color:var(--body);
}
.pain-body blockquote .src{
  display:block;margin-top:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:rgba(255,255,255,.42);
}

/* ── mission statement ──────────────────────────────────────────────────────
   One large sentence carrying the whole product, with the load-bearing clause
   marked. The reference decorates it with hand-drawn marks; here the accent
   underline does that work without borrowing their illustration. */
.mission{
  padding:44px 30px;margin:0 0 24px;text-align:center;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:8px;
}
.mission p{
  font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.35;
  letter-spacing:-.03em;color:var(--ink);margin:0 auto;max-width:24ch;
}
.mission .hi{
  background:linear-gradient(transparent 62%,var(--ca-soft) 62%);
  box-shadow:inset 0 -2px 0 var(--ca);
  padding:0 2px;
}
@media (max-width:640px){ .mission p{font-size:23px} }

/* ── how might we ───────────────────────────────────────────────────────────
   Accent cell on the left spanning the rows, statements stacked on the right. */
.hmw{display:grid;grid-template-columns:132px 1fr;gap:10px;margin:0 0 24px}
.hmw-key{
  background:var(--ca-soft);border:1px solid var(--ca);border-radius:8px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ca);padding:16px 10px;
}
.hmw-list{display:grid;gap:10px}
.hmw-list div{
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:8px;
  padding:18px 20px;font-size:15px;line-height:1.55;color:var(--body);
}
.hmw-list div strong{font-weight:600;color:var(--ink)}

/* ── finding / solution notes ───────────────────────────────────────────────
   The reference leads each with an emoji: a face for the problem it found in
   testing, a bulb for what it did about it. */
.note{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--ca-soft);border:1px solid var(--ca);border-radius:8px;
  padding:20px 22px;margin:0 0 20px;
}
.note .ico{font-size:18px;line-height:1.4;flex:0 0 auto}
.note p{margin:0;font-size:14.5px;line-height:1.6;color:var(--body)}
.note p strong{font-weight:600;color:var(--ink)}

/* ── design evolution: ghosted numeral behind the work ──────────────────────*/
.evo{position:relative;margin:0 0 46px;padding-top:8px}
.evo:last-child{margin-bottom:0}
.evo-n{
  position:absolute;left:-6px;top:-26px;z-index:0;
  font-family:var(--serif);font-weight:300;font-size:150px;line-height:1;
  letter-spacing:-.06em;color:var(--ca);opacity:.16;pointer-events:none;
}
.evo-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.evo-media{display:flex;gap:14px;align-items:center;justify-content:center}
.evo-media img{
  max-width:100%;height:auto;max-height:420px;width:auto;
  border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.evo-arrow{
  flex:0 0 auto;color:var(--ca);font-size:20px;line-height:1;opacity:.9;
}
/* wide mode: landscape artefacts (wireframes, flows) need the whole column, so
   the pair stacks and the handoff arrow turns with it. Two 1215px-wide frames
   side by side in a half-column overflowed by 256px before this existed. */
.evo-wide .evo-in{grid-template-columns:1fr;gap:20px}
.evo-wide .evo-media{flex-direction:column;gap:16px}
.evo-wide .evo-media img{width:100%;max-height:none}
.evo-wide .evo-arrow{transform:rotate(90deg)}
.evo-media{min-width:0}
.evo-media img{min-width:0}
.evo h4{font-size:19px;font-weight:600;color:var(--ink);margin:0 0 12px;line-height:1.3}
.evo p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0 0 14px}

/* ── venmo grammar: mono outlined chips ─────────────────────────────────────*/
.tags{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0}
.tags span{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--ca);border:1px solid var(--ca);border-radius:4px;padding:9px 16px;
}

/* ── centred accent heading + centred body ──────────────────────────────────*/
.mid{text-align:center;margin:0 0 24px}
.mid h3{
  font-family:var(--serif);font-weight:300;font-size:36px;letter-spacing:-.05em;
  color:var(--ca);margin:0 0 22px;line-height:1.15;
}
.mid p{
  font-size:16px;line-height:1.65;color:var(--body);
  max-width:56ch;margin:0 auto 14px;
}
.mid p:last-child{margin-bottom:0}
.mid p strong{font-weight:600;color:var(--ink)}
@media (max-width:640px){ .mid h3{font-size:27px} }

/* ── giant ghosted word carrying a list, alternating side ───────────────────*/
.ghosts{margin:0 0 24px}
.ghost{margin:0 0 40px}
.ghost:last-child{margin-bottom:0}
.ghost.r{text-align:right}
.ghost .gw{
  font-family:var(--sans);font-weight:700;font-size:64px;line-height:1;
  letter-spacing:-.045em;color:rgba(255,255,255,.16);margin:0 0 14px;
}
.ghost ol{margin:0;padding:0 0 0 20px;list-style:decimal}
.ghost.r ol{padding:0 20px 0 0;list-style-position:inside}
.ghost li{font-size:15px;line-height:1.7;color:var(--body)}
.ghost li strong{font-weight:600;color:var(--ink)}
@media (max-width:760px){
  .ghost .gw{font-size:42px}
  .ghost.r{text-align:left}
  .ghost.r ol{padding:0 0 0 20px;list-style-position:outside}
}

/* ── full-bleed alternating feature block ───────────────────────────────────
   Colour panel carrying the claim, product screen beside it, sides swapping
   down the page. The reference runs this on its brand blue. */
.feat{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0 0 20px;
}
.feat.flip .feat-copy{order:2}
.feat-copy{
  background:var(--ca-soft);padding:44px 38px;
  display:flex;flex-direction:column;justify-content:center;
}
.feat-copy .flabel{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ca);margin:0 0 18px;
}
.feat-copy h4{
  font-size:25px;font-weight:600;line-height:1.25;color:var(--ink);margin:0 0 16px;
  letter-spacing:-.015em;
}
.feat-copy p{font-size:14.5px;line-height:1.65;color:var(--body);margin:0}
.feat-media{
  background:rgba(255,255,255,.03);padding:34px;
  display:flex;align-items:center;justify-content:center;
}
.feat-media img,.feat-media video{
  max-width:100%;max-height:440px;width:auto;height:auto;display:block;
  border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.5);
}

/* ── chevron process bar ────────────────────────────────────────────────────*/
.chev{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 20px}
.chev span{
  flex:1 1 0;min-width:104px;
  background:var(--ca-soft);border:1px solid var(--ca);
  color:var(--ink);font-size:13px;font-weight:500;text-align:center;
  padding:15px 8px;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%,13px 50%);
}
.chev span:first-child{clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%)}
.chev span:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,13px 50%)}

/* ── three-up row on a band ─────────────────────────────────────────────────*/
.threeup{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:8px;padding:34px 28px;margin:0 0 24px;
}
.threeup.four{grid-template-columns:repeat(4,1fr);gap:14px}
.threeup .cell{text-align:center}
.threeup .cell .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0 0 10px;
}
.threeup .cell h4{font-size:18px;font-weight:600;color:var(--ca);margin:0 0 12px;line-height:1.3}
.threeup .cell p{font-size:14px;line-height:1.6;color:var(--body);margin:0}

/* ── persona card with a big quote ──────────────────────────────────────────*/
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 24px}
.pcard{
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-radius:8px;padding:30px;
}
.pcard .ask{font-size:13px;font-style:italic;color:rgba(255,255,255,.5);margin:0 0 14px}
.pcard .big{
  font-family:var(--serif);font-weight:300;font-size:27px;line-height:1.25;
  letter-spacing:-.03em;color:var(--ca);margin:0 0 22px;
}
.pcard .rows{display:grid;gap:8px;margin:0 0 20px}
.pcard .rows div{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:13.5px}
.pcard .rows .k{font-style:italic;color:rgba(255,255,255,.5)}
.pcard .rows .v{color:var(--ink);font-weight:500}
.pcard h5{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0 0 10px;
}
.pcard ol{margin:0 0 20px;padding-left:18px}
.pcard ol li{font-size:13.5px;line-height:1.6;color:var(--body)}
.pcard .who{font-size:13.5px;font-style:italic;color:var(--ca);margin:0 0 6px}
.pcard .nm{
  font-family:var(--serif);font-weight:300;font-size:27px;letter-spacing:-.04em;
  color:var(--ink);margin:0;
}

@media (max-width:760px){
  .cloud-q{columns:1}
  .themes{grid-template-columns:1fr}
  .pain,.evo-in,.feat,.pgrid{grid-template-columns:1fr}
  .pain.flip .pain-art,.feat.flip .feat-copy{order:0}
  .threeup,.threeup.four{grid-template-columns:1fr;gap:26px}
  .hmw{grid-template-columns:1fr}
  .hmw-key{padding:12px}
  .evo-n{font-size:96px;top:-14px}
  .feat-copy{padding:30px 24px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEDIA AND TYPE PASS, 2026-09-03 (second round)

   Her notes, in her words: "the boxes look rough", "some of the app screenshots
   you used have borders", "some of the image proportions look off for somni",
   "fonra image proportions are off", "somni text and overall case study seem a
   little small compared to the others, match them".

   All four are the same underlying problem: the figure system was built for one
   kind of asset and this site has five. Everything below overrides the rules
   above rather than editing them, so it lifts out in one block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the boxes ──────────────────────────────────────────────────────────────
   A hard-edged bright screenshot pasted on a near-black panel reads as rough.
   The container radius was 16 and the image radius 4, which made every figure
   look like two mismatched rectangles. Matched radii, a softer surface, and a
   real shadow so the screenshot sits inside the box instead of on top of it. */
.figbox{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:26px;
}
.figbox img{
  border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45);
}
.capbox,.callout,.cloud,.annot,.threeup,.pcard,.persona,.voice,.note,
.hmw-list div,.hmw-key,.theme,.mission,.pain,.feat{
  border-radius:14px;
}
.pain,.feat{overflow:hidden}

/* ── media that already carries its own frame ───────────────────────────────
   The FONRA and Somni phone clips are rendered with a device bezel baked into
   the file (measured: their corner pixels are darker than their centre). Giving
   those a second radius and a second shadow is the double border she spotted.
   `.framed` opts a clip out of the frame the figure system would add. */
.framed,
.figbox.phone video,.figbox.phone img,
.feat-media .framed,.evo-media .framed{
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
.figbox.framed-box{background:transparent;border:0;padding:0}

/* ── proportions ────────────────────────────────────────────────────────────
   The assets run from 0.36 (a phone wireframe) to 1.87 (a dashboard). Left
   uncapped, a 0.36 at full column width renders 2400px tall and dwarfs the
   1.87 above it. Capping HEIGHT rather than width is what makes mixed ratios
   sit together, because it equalises the visual weight instead of the span. */
.figbox img{max-height:620px}
.duo .figbox img,.trio .figbox img{max-height:420px}
.duo .figbox,.trio .figbox{
  display:flex;align-items:center;justify-content:center;
}
.evo-wide .evo-media img{
  width:auto;max-width:100%;max-height:560px;
}
.evo-media img{max-height:440px}
@media (max-width:640px){
  .figbox img{max-height:480px}
  .duo .figbox img,.trio .figbox img{max-height:340px}
}

/* ── type scale ─────────────────────────────────────────────────────────────
   Somni and FONRA lean on the components written first (timeline, persona,
   steps, facts, screen row), which sat two steps below the ones written for
   Killshot and Canary (mid 16px, feature heads 25px). Same page, two type
   scales, and Somni reads smaller because it uses more of the older set. */
.timeline h4,.steps h4{font-size:17px}
.timeline p,.steps p{font-size:15.5px;line-height:1.6}
.persona h4{font-size:19px}
.persona .bullets li,.bullets li{font-size:15.5px;line-height:1.65}
.screenrow figcaption{font-size:14.5px;line-height:1.55}
.facts .v{font-size:15.5px;line-height:1.6}
.stat .lab{font-size:15px}
.voice{font-size:15.5px;line-height:1.65}
.copy,.lede{font-size:15.5px;line-height:1.68}
.block .why{font-size:15.5px;line-height:1.68}
.capbox p,.callout p,.note p{font-size:15.5px;line-height:1.65}
.pain-body p{font-size:15.5px;line-height:1.65}
.feat-copy p{font-size:15.5px;line-height:1.68}
.threeup .cell p{font-size:15px;line-height:1.65}
.mid p{font-size:16.5px}

/* ══ THE OPENING, 2026-09-05 ═══════════════════════════════════════════════
   Her note: "a cool image on top, a little bit about it in the middle, and
   then the 3 phones next to each other with the recordings", pointing at
   lalau.ca/projects/thru.html. Decoded off that page's own markup:

     #thru-hero            full bleed, one screen, the app's identity object
     .grid-12col           two columns, name and meta left, prose right
     img.fit screens.png   three phones side by side on a dusk gradient

   The opener already ran full bleed. These are the other two.                */

/* The writing, beside the identity rather than under it. The reference puts
   the name in columns 4-7 and the prose in 8-11 of a twelve, which is a 1:1
   split with the pair pushed right; at this container width that reads as
   over-indented, so it is 1fr 1.55fr with the whole block left-aligned.      */
.introgrid{
  display:grid;
  grid-template-columns:1fr 1.55fr;
  gap:56px;
  align-items:start;
}
.introgrid h1{margin:0 0 22px}
/* Stacked in the left column, because three across a 300px column would set
   each value on its own line anyway and lose the alignment. */
.introgrid .meta{grid-template-columns:1fr;gap:15px}
.introgrid-r > :first-child{margin-top:0}
.introgrid-r .lede,
.introgrid-r .copy:first-child{margin-top:0}

/* The device row. Full width of the text column, its own rounded card, and no
   figure chrome around it: the art already carries its own field and a border
   round that would be a second frame. `.roundy` in the reference.            */
.devices{
  /* Wider than the text column, the way the reference's screens.png is wider
     than its prose. Not full bleed: every other figure on these pages is
     column width, and edge to edge here would read as a different page. The
     wrap is max-width 1000px and centred, so the breakout centres on it. */
  width:min(1200px, calc(100vw - 40px));
  /* Centred with margin alone, NOT margin-left:50% plus translateX(-50%).
     The figure carries data-reveal, and the reveal animates `transform`, so a
     layout transform here is overwritten the moment the element scrolls into
     view and the row jumps 124px to the right. Same class of bug as the nav
     hide fighting riseIn. */
  margin-top:52px;
  margin-left:calc(50% - min(600px, 50vw - 20px));
  border-radius:22px;
  overflow:hidden;
  line-height:0;
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.devices video,
.devices img{width:100%;height:auto;display:block}
.devices figcaption{
  line-height:1.5;
  padding:14px 2px 0;
}

/* The opener crops with object-fit:cover, which at a phone width shows about
   40% of the frame and cuts the subject out of its own picture. Below 820px it
   contains instead: the render's own ground colour is the band's tint, so the
   letterbox is invisible and the whole composition survives. */
@media (max-width:820px){
  .hero-cover-in img,
  .hero-cover-in video{object-fit:contain}
  .introgrid{grid-template-columns:1fr;gap:26px}
  .devices{width:100%;margin:30px 0 0;border-radius:16px}
}

/* A figure past the text column, on the same breakout the device row uses.
   Added 2026-09-05: three full dashboards in a trio rendered about 320px wide
   each, where a 2560px capture is unreadable. Same centring rule as .devices,
   margin only and never a transform, because these carry data-reveal. */
.figwide{
  width:min(1200px, calc(100vw - 40px));
  margin-left:calc(50% - min(600px, 50vw - 20px));
}
.figwide .figbox img{max-height:none;width:100%;height:auto}

/* The feature screens were sitting small inside a lot of padding, which reads
   as a low-resolution asset even when it is not. 2026-09-05: less padding and
   more height, so the screen is the subject of its half rather than a stamp in
   the middle of it. */
.feat-media{padding:26px}
.feat-media img,.feat-media video{max-height:520px}

/* Quotation marks on the research quotes, and the source label hidden.
   2026-09-05, her call: the "Finch: Self-Care Pet, 4 stars" style attributions
   came off and the quotes needed to read as quotes without them. */
.cloud-q blockquote::before,
.pain-body blockquote::before{content:"\201C"}
.cloud-q blockquote::after,
.pain-body blockquote::after{content:"\201D"}
.cloud-q blockquote .src,
.pain-body blockquote .src{display:none}

/* Captions under a breakout figure belong to the TEXT column, not the figure.
   2026-09-06: .devices and .figwide are 1200px wide against a 952px text
   column, so their captions started 124px left of every paragraph on the page
   and read as broken indentation. Constraining the caption to the text width
   and centring it puts its left edge back on the same axis as the body copy,
   at every viewport, because both are centred on the same point. */
.devices figcaption,
.figwide figcaption{
  max-width:952px;
  margin-left:auto;
  margin-right:auto;
}

/* .persona was a borderless block with a top rule and no side padding, which
   was right when it was just a rule and some text. The dark-theme pass gave it
   a background and a border and turned it into a card, but nothing added the
   horizontal padding a card needs, so every persona's text sat flush against
   its own left border. Fixed 2026-09-06. */
.persona{
  padding:24px 22px 18px;
  border-top-width:1px;
}

/* ── THE PROJECT FILM ─────────────────────────────────────────────────────
   Added 2026-09-10 for the Somni capstone film. The film opens the study, so
   it takes the widest breakout on the site rather than sitting in the 1000px
   text column as a figure clip does.

   Same centring rule as .devices and .figwide: margin only, never
   margin-left:50% plus translateX(-50%). Everything in a sec() sits inside a
   data-reveal wrapper whose animation owns `transform`, and a layout transform
   here is overwritten the moment it scrolls into view.

   aspect-ratio holds the 16:9 box before the video's metadata arrives, so the
   sections below it do not jump up the page while a 30 MB file is still
   negotiating. */
.film{
  width:min(1240px, calc(100vw - 40px));
  margin-left:calc(50% - min(620px, 50vw - 20px));
  margin-top:8px;
}
.filmbox{
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden;
  line-height:0;
  background:#08060E;
  box-shadow:0 28px 70px rgba(0,0,0,.40);
}
.filmbox video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
/* Caption belongs to the text column, not to the 1240px figure, so its left
   edge lands on the same axis as every paragraph on the page. */
.film figcaption{
  max-width:952px;
  margin:14px auto 0;
  line-height:1.5;
}
@media (max-width:820px){
  .film{width:100%;margin-left:0}
  .filmbox{border-radius:16px}
}