/* ─── BRAND CASE STUDY — template for brand/motion/campaign client-work pages · @layer templates ─── */
@layer templates {

/* ─── CASE STUDY — shared layout for client-work pages ─── */
/* pages use the global accent by default; a few specialized templates still
   read --client for project-local components */

/* outermost page wrapper — some case-study pages (folio/meridian/relay,
   converted from hashed classes) need this; others don't use it at all */
.cs-page { min-height: 100vh; }

.hero { padding: clamp(64px,10vh,110px) var(--pad) 0; border-bottom: none; }
.hero .back-link {
  display: inline-block;
  margin-bottom: 20px;
  font-family: var(--body);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
}
.hero .back-link:hover { color: var(--ink); }
.hero-eyebrow { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-eyebrow i { font-style: normal; color: currentColor; }
/* eyebrow spec — one voice across hero eyebrow, about-page eyebrow, and the
   screens-page back link (site.css/screens.css hold the other two) */
.hero-eyebrow span {
  font-family: var(--body); font-size: var(--fs-11); font-weight: 500;
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--mid);
}
/* .hero h1 inherits font-family/weight/size/letter-spacing/text-transform/
   max-width from the base-layer `h1` rule in site.css — this only refines
   line-height for the hero context specifically (1.04 vs the generic 1.02). */
.hero h1 { line-height: var(--lh-hero); }
.hero-thesis { margin-top: 26px; max-width: 46ch; font-family: var(--display); font-style: italic; font-size: var(--fs-serif-lede); font-weight: 400; line-height: 1.42; letter-spacing: var(--tr-snug); }

/* ─── HERO OUTCOME TEASER — one result pulled forward from the Outcome
   section at the bottom, so it isn't the only payoff after a long
   scroll. Deliberately quiet: small, muted, no card chrome. ─── */
.hero-outcome {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  max-width: 56ch;
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
  color: var(--mid);
}
.hero-outcome .label { color: var(--rosa); margin-right: 8px; }

.cs-page section[id],
.cs-page [id][data-screen-label],
.cs-page .sdiv[id],
.cs-page .section-divider[id],
.cs-page .wf-section[id] {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

/* auto-fit tracks at minmax(150px,1fr) with padding:18px clamp(20px,4vw,56px)
   inside each cell left too little content width per cell at a ~700px
   column — "Confidential ·" and "Research → Product Design" wrapped one
   short word per line and blew the row out to 139px tall. */
.meta-ledger { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 220px),1fr)); border-top: 1px solid var(--line); }
.meta-ledger div { padding: 18px clamp(14px, 2vw, 26px); border-right: 1px solid var(--line); min-width: 0; }
.meta-ledger div:last-child { border-right: none; }
.meta-ledger .label { display: block; margin-bottom: 5px; }
.meta-ledger dd { margin: 0; font-weight: 600; font-size: var(--fs-14); overflow-wrap: break-word; }
.meta-link { color: inherit; }

.block { display: grid; grid-template-columns: minmax(160px,1fr) 3fr; gap: 24px 56px; padding: clamp(36px,6vh,64px) var(--pad); }
/* type/color inherited from the base-layer `section > h2, .block h2,
   .sec-head h2` rule (site.css) — --client no longer sets headings. */
.block p { max-width: 64ch; font-size: var(--fs-16); line-height: var(--lh-prose); }
.block p + p { margin-top: 1em; }
.scope {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  max-width: 64ch;
  border-top: 1px solid var(--line);
}
.scope li {
  font-family: var(--body);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
/* ─── SYSTEM STRIP — compact in-page proof of the project's design
   tokens (palette + type family names), replacing a standalone
   stylebook page. Colors come from each project's own --sf-* custom
   properties below via .sys-<project> scoping — see .sys-strip-a..e
   per project. No extra fonts loaded for this — the family names shown
   in .sys-strip-fonts are hardcoded HTML text, not generated from these
   tokens (see docs/visual-system-v2.md §2); update both by hand together. ─── */
.sys-strip { margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.sys-strip-row { display: flex; align-items: center; gap: 7px; }
.sys-strip-swatch { width: 20px; height: 20px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.08); }
.sys-strip-fonts { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--tr-caps); color: var(--mid); }

/* ─── FOLIO — design tokens (single source of truth), scoped to .sys-folio
   so it never collides with the site's paper tokens or the other
   projects' tokens. ─── */
.sys-folio {
  /* surfaces */
  --sf-page:    #F0EBE1;   /* app background */
  --sf-cream:   #FAF7F2;   /* card / screen surface */
  --sf-sand:    #F5EFE6;   /* raised / secondary surface */
  --sf-white:   #FFFFFF;

  /* text */
  --sf-ink:     #2A2218;   /* primary text & the balance number */
  --sf-bark:    #5C4A35;   /* headings / strong secondary */
  --sf-stone:   #7A6E62;   /* body-muted */
  --sf-mute:    #B5A99A;   /* faint / captions */
  --sf-rule:    #DDD5C8;   /* hairlines & borders */

  /* accents */
  --sf-sage:    #2D6A4F;   /* primary · positive (money in) */
  --sf-terra:   #C25B3C;   /* attention (never alarm-red) */
  --sf-honey:   #D4842A;   /* highlight · caution */
  --sf-teal:    #2E8B8B;   /* secondary accent */
  --sf-violet:  #6B5B9A;   /* tertiary accent */

  /* accent tints (backgrounds) */
  --sf-sage-t:   #E8F5EE;
  --sf-terra-t:  #FAEAE5;
  --sf-honey-t:  #FDF3E7;
  --sf-teal-t:   #E5F5F5;
  --sf-violet-t: #F0EDF8;
}
.sys-folio .sys-strip-a { background: var(--sf-sage); }
.sys-folio .sys-strip-b { background: var(--sf-terra); }
.sys-folio .sys-strip-c { background: var(--sf-honey); }
.sys-folio .sys-strip-d { background: var(--sf-teal); }
.sys-folio .sys-strip-e { background: var(--sf-violet); }

/* ─── MERIDIAN — design tokens, scoped to .sys-meridian. ─── */
.sys-meridian {
  /* surfaces */
  --sf-page:    #EFEDE7;   /* app background — warm newsprint, not blue-grey */
  --sf-surface: #F8F6F1;   /* ledger surface */
  --sf-sand:    #F1EEE7;   /* raised / secondary surface */
  --sf-white:   #FDFCF9;

  /* text */
  --sf-ink:     #1B1A17;   /* primary text & figures */
  --sf-slate:   #4A463F;   /* body / secondary */
  --sf-mute:    #7C776E;   /* faint / captions */
  --sf-rule:    #D6D1C6;   /* hairlines — the only structure in the UI */

  /* accents */
  --sf-teal:    #1B1A17;   /* "brand" is ink — a ledger has no brand colour */
  --sf-navy:    #1B1A17;   /* retired: navy chrome removed entirely */
  --sf-green:   #2F5D3A;   /* positive · cash in — muted, print-weight */
  --sf-gold:    #8A6A22;   /* caution · covenant near-limit */
  --sf-red:     #9C2B1B;   /* danger · anomaly — the one loud value */
  --sf-purple:  #4A463F;   /* retired: tertiary accent → secondary ink */

  /* accent tints (backgrounds) */
  --sf-teal-t:   #F1EEE7;
  --sf-green-t:  #EDF1EA;
  --sf-gold-t:   #F5F0E1;
  --sf-red-t:    #F7EAE6;
  --sf-purple-t: #F1EEE7;
}
.sys-meridian .sys-strip-a { background: var(--sf-teal); }
.sys-meridian .sys-strip-b { background: var(--sf-navy); }
.sys-meridian .sys-strip-c { background: var(--sf-gold); }
.sys-meridian .sys-strip-d { background: var(--sf-green); }
.sys-meridian .sys-strip-e { background: var(--sf-red); }

/* RELAY's .sys-relay design-token block lived here — removed 2026-09-07 when
   Relay was iceboxed (see decisions.md). Preserved at
   _icebox/relay/css/sys-relay-tokens.css; restore it above the HALYARD block
   below if Relay comes back off ice. */

/* ─── HALYARD — design tokens, scoped to .sys-halyard (industrial
   field-tech palette — steel/copper/hi-viz, GWO safety-orange accents). ─── */
.sys-halyard {
  /* surfaces (dark — field-device UI) */
  --sf-slate:      #1C2B36;   /* page/panel ground */
  --sf-slate-mid:  #2E4457;
  --sf-slate-deep: #131E27;   /* device screen ground */
  --sf-steel:      #243543;

  /* text */
  --sf-ink:      #14202A;
  --sf-graphite: #5A6B78;
  --sf-ash:      #9AA8B2;     /* muted / captions */
  --sf-rule:     #D4DCE2;

  /* accents */
  --sf-copper: #B4643A;   /* primary — technician/field, GWO hi-viz adjacent */
  --sf-hiviz:  #E8A317;   /* caution · state marker */
  --sf-signal: #2E7D5B;   /* positive · confirmed · healthy */
  --sf-alarm:  #C0392B;   /* danger · safety-critical */
  --sf-sky:    #4A90A4;   /* secondary · Halyard's own voice in the transcript */

  /* accent tints (backgrounds) */
  --sf-copper-t: #F7EDE7;
  --sf-hiviz-t:  #FDF4E0;
  --sf-signal-t: #E6F2EC;
  --sf-alarm-t:  #FBEAE8;
  --sf-sky-t:    #E7F1F4;
}
.sys-halyard .sys-strip-a { background: var(--sf-copper); }
.sys-halyard .sys-strip-b { background: var(--sf-sky); }
.sys-halyard .sys-strip-c { background: var(--sf-hiviz); }
.sys-halyard .sys-strip-d { background: var(--sf-signal); }
.sys-halyard .sys-strip-e { background: var(--sf-alarm); }

/* ─── SCREENS PREVIEW — a gray placeholder stands in for each real screen
   (the real mockups live only on <project>-full.html; this page loads
   none of that CSS). Rod's call: no alternating/dark bands here — every
   project stages on the same light paper, so a dark product and a light
   one read as the same kind of object on the page. (A version of this
   rule already existed in screens.css, but that file never loads on the
   pages .cs-screen-preview appears on, so it never took effect — moved
   here, where it's live, and matches site.css's actual body background
   exactly so there's no seam even where the img's own margin collapses
   through this figure's top edge.) Top spacing lives in this figure's own
   padding, not the child's margin, specifically so it can't collapse out
   and expose whatever's behind it. */
.cs-screen-preview { border-bottom: 1px solid var(--line); margin: 0; padding: clamp(64px,10vh,112px) var(--pad) 0; background: var(--paper); }
.cs-screen-caption {
  padding: 78px var(--pad) clamp(72px,10vw,120px);
  text-align: left;
}
.cs-screen-caption b {
  display: block;
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-ui);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 10px;
}
.cs-screen-caption p {
  max-width: 62ch;
  margin-inline: 0;
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--mid);
}
.cs-full-more { padding: 28px var(--pad) clamp(40px,6vh,64px); text-align: center; border-bottom: 1px solid var(--line); }
.cs-full-more a {
  display: inline-flex; align-items: center; gap: 12px;
  width: max-content;
  font-family: var(--body); font-size: var(--fs-11); font-weight: 600; font-style: normal; line-height: 1;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--rosa); padding-bottom: 8px;
}
.cs-full-more a::after {
  content: "→";
  color: var(--rosa);
  line-height: 1;
  transition: transform .25s var(--ease, ease);
}
.cs-full-more a:hover::after { transform: translateX(3px); }

.media { padding: 0; }
.media figure { margin: 0; }
.media img, .media video { max-width: 100%; height: auto; display: block; }
.media figcaption { padding: 12px var(--pad); font-family: var(--body); font-weight: 500; font-size: var(--fs-11); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--mid); border-top: 1px solid var(--line); }
/* Shared centered-caption variant — Dazz + DigitalOcean. Font stays Geist per
   the 2026-08-29 mono decision (mono is for IDs/states/metadata/artifact
   labels, never editorial explanation); replaces the two body.proj-* mono
   patches this used to be. */
.media.caption-center figcaption { text-align: center; }
/* Dazz icons clip — centered on a soft pink panel */
body.proj-dazz section[data-screen-label="Icons"] { background: #FEF5F5; padding: clamp(40px, 7vh, 88px) var(--pad); }
body.proj-dazz section[data-screen-label="Icons"] figure { max-width: 480px; margin-inline: auto; }

/* Closing tote-bag shot is portrait — center it instead of letting it sit flush left */
body.proj-digitalocean section[data-screen-label="Closing"] figure { max-width: 640px; margin-inline: auto; }
/* Icons clip — centered on a plain white panel */
body.proj-digitalocean section[data-screen-label="Icons"] { background: #FFFFFF; padding: clamp(40px, 7vh, 88px) var(--pad); }
body.proj-digitalocean section[data-screen-label="Icons"] figure { max-width: 480px; margin-inline: auto; }

.case-hero-media { margin-top: clamp(28px, 5vh, 56px); background: var(--paper); }
.case-hero-media figure { margin: 0; }
.case-hero-media img,
.case-hero-media video { width: 100%; height: auto; display: block; }

/* ─── MEDIA PLACEHOLDER — stand-in for missing/broken imagery, matching
   the site's existing dashed-border placeholder look (see .flag-media
   in home.css). Used where a <figure> would otherwise hold a <img> or
   <video> pointing at an asset that isn't actually available. ─── */
/* border/background/centering shared with .flag-media (pages.css) and
   .specimen-box below — composed from site.css, see that rule's comment. */
.media-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 24px;
}
.media-placeholder.is-video { aspect-ratio: 16 / 9; }
.media-placeholder.is-wide  { aspect-ratio: 21 / 9; }        /* full-bleed banners / hero */
.media-placeholder.is-tall  { aspect-ratio: 3 / 4; }         /* portrait desktop / long page */
.media-placeholder.is-phone { aspect-ratio: 9 / 19; max-width: 300px; margin-inline: auto; } /* mobile screens */

/* Thin full-width divider between high-fidelity screen groups */
.cs-rule { border: 0; border-top: 1px solid var(--line); margin: clamp(28px,4.5vh,52px) 0; }

/* Scrollable phone mock — embed a full mobile page and scroll/drag it like a device */
.phone-frame { max-width: 300px; aspect-ratio: 900 / 1915; margin-inline: auto; overflow: hidden;
  border-radius: 4px; background: #fff;
  box-shadow: 0 16px 36px -14px rgba(22,21,20,.22); }
.phone-frame .phone-scroll { height: 100%; overflow-y: auto; cursor: grab;
  scrollbar-width: none; -ms-overflow-style: none; }        /* hide scrollbar */
.phone-frame .phone-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.phone-frame img { width: 100%; height: auto; display: block; margin: 0; border-radius: 0; box-shadow: none; max-width: none; }
/* Full-height mobile screen shown at phone width (no frame) */
.phone-shot { max-width: 300px; margin-inline: auto; }
.phone-shot img { width: 100%; height: auto; display: block; margin: 0; border-radius: 12px;
  box-shadow: 0 16px 36px -14px rgba(22,21,20,.22); }

/* ── U-M page fixes ──────────────────────────────────────────────
   Force proportional scaling (imgs carry width/height attrs), and make the
   single full-page desktop screens 25% narrower and centered. */
body.proj-umich .media img,
body.proj-umich .shot-card img { height: auto; }
/* Screen / wireframe / old-site cards: a single centered "screen zone" ≈ 55% of
   the viewport (per Rod's red-box guide). A single screen fills the zone; a pair
   splits it, so single and double rows read at the same width and centering.
   Full-width and stacked below the tablet breakpoint. */
body.proj-umich .shot-gallery.screens .shot-card { margin-inline: auto; }
@media (min-width: 760px) {
  body.proj-umich .shot-gallery.screens .shot-card { max-width: min(70vw, 1120px); }
  body.proj-umich .shot-gallery.screens.cols-2 {
    grid-template-columns: repeat(2, min(34vw, 545px));
    justify-content: center;
    gap: clamp(16px, 2.2vw, 40px);
  }
  body.proj-umich .shot-gallery.screens.cols-2 .shot-card { max-width: 100%; }
}
/* single clean separator between consecutive screen bands (was a double bar) */
body.proj-umich .shot-gallery.screens + .shot-gallery.screens { border-top: 1px solid var(--line); }
/* mobile screens sit closer together */
body.proj-umich .shot-gallery.cols-3 { gap: clamp(6px, 0.8vw, 14px); }
.media-placeholder span {
  font-family: var(--body);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--mid);
  max-width: 32ch;
}
.two-up { display: grid; grid-template-columns: 1fr 1fr; }
.two-up figure + figure { border-left: 1px solid var(--line); }
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; background: #000; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ─── PHONE GALLERY — framed mobile screenshots, own breathing room + shadow ─── */
.phone-gallery { background: var(--paper-2); padding: clamp(72px,12vh,128px) var(--pad); display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,280px)); justify-content: center; gap: 48px 40px; }
.phone-card { margin: 0; display: flex; flex-direction: column; align-items: center; }
.phone-card img { max-width: 100%; border-radius: 12px; display: block; box-shadow: 0 16px 36px -14px rgba(22,21,20,.22), 0 5px 14px -6px rgba(22,21,20,.12); }
/* mono artifact-caption voice — shared with .shot-card figcaption and
   body.proj-lucid figcaption below (identical base; only margin/max-width/
   line-height/border genuinely differ per context). */
.phone-card figcaption, .shot-card figcaption, body.proj-lucid figcaption {
  text-align: center; font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-10); letter-spacing: .1em; text-transform: uppercase; color: var(--mid);
}
.phone-card figcaption { margin-top: 22px; max-width: 220px; line-height: var(--lh-ui); }
.phone-card.wide { max-width: none; }
.phone-card.wide img { max-width: 100%; }

/* ─── SHOT GALLERY — framed desktop/browser screenshots, own breathing room + shadow ─── */
.shot-gallery { background: var(--paper-2); padding: clamp(72px,12vh,128px) var(--pad); display: grid; gap: clamp(64px,10vh,112px); }
.shot-gallery.cols-2 { grid-template-columns: 1fr 1fr; align-items: start; }
.shot-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); align-items: start; }
.shot-card { margin: 0; }
.shot-card img { max-width: 100%; height: auto; margin: 0 auto; display: block; border-radius: 4px; box-shadow: 0 16px 36px -14px rgba(22,21,20,.22), 0 5px 14px -6px rgba(22,21,20,.12); }
.shot-card figcaption { margin-top: 18px; }
/* two views of one screen — full desktop context stacked above a tight
   crop on just the interaction area — within one .ss entry. */
.shot-pair { display: flex; flex-direction: column; gap: 32px; }
/* some HP Elite Earbuds exports (modal/dialog components) carry their own
   drop shadow baked into the PNG's alpha channel — the CSS shadow above
   would double up, so it's suppressed for those. */
.shot-card--natural-shadow img { box-shadow: none; }
/* HP Elite Earbuds screens are dense app-window captures, not phone shots —
   at droplove/set-set's 1040px cap they read as oversized on the page. */
body.proj-hpelitebuds .shot-card img { max-width: 100%; }
/* HP Wolf Cloud Endpoint Manager — wide (~1440px) enterprise console captures.
   Same reasoning as hpelitebuds: full container width, no phone-shot cap. */
body.proj-hpcem .shot-card img { max-width: 100%; }

/* ── LUCID — real editorial media: full-bleed automotive photography + autoplay
   product video, plus contained device-mockup spots and a tall design collage.
   This project is single-page and media-led, so it leans on .media (full-bleed)
   and .shot-gallery (contained bands) rather than a full case study page. */
body.proj-lucid .media { background: var(--paper); }
body.proj-lucid figure { margin: 0; }
body.proj-lucid .media img,
body.proj-lucid .media video { width: 100%; height: auto; display: block; }
body.proj-lucid .lucid-collage figure { max-width: 1400px; margin: 0 auto; }

/* base voice composed above (identical to .shot-card figcaption); this just
   adds the margin + resets needed to override .media figcaption's border/
   padding on the same element. */
body.proj-lucid figcaption { margin-top: 18px; border-top: none; padding: 0; }
/* full-bleed .media caption: symmetric space above and below so the label reads as
   vertically centred in its own zone (equal image→label and label→next-section gaps). */
body.proj-lucid .media figcaption { margin-top: 30px; }
body.proj-lucid .media + .block { padding-top: 30px; }

/* framed product video / screen — a browser "screen display" on a paper-2 band with
   breathing room, matching how the other projects present their product screens */
body.proj-lucid .lucid-screen { background: var(--paper-2); padding: clamp(56px,9vh,112px) var(--pad); }
body.proj-lucid .lucid-screen figure { margin: 0 auto; max-width: 1080px; }
body.proj-lucid .browser { border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 80px -30px rgba(22,21,20,.34), 0 12px 28px -12px rgba(22,21,20,.16); }
body.proj-lucid .browser-bar { height: 36px; display: flex; align-items: center; gap: 8px;
  padding: 0 15px; background: #ECEAE5; border-bottom: 1px solid rgba(22,21,20,.10); }
body.proj-lucid .browser-bar span { width: 11px; height: 11px; border-radius: 50%; }
body.proj-lucid .browser-bar span:nth-child(1) { background: #FF5F57; }
body.proj-lucid .browser-bar span:nth-child(2) { background: #FEBC2E; }
body.proj-lucid .browser-bar span:nth-child(3) { background: #28C840; }
body.proj-lucid .browser video, body.proj-lucid .browser img { display: block; width: 100%; height: auto; }
/* contained device / slide screens on a paper-2 band, with breathing room */
body.proj-lucid .lucid-screen.is-plain figure { max-width: 1160px; }
body.proj-lucid .lucid-screen.is-plain img { display: block; width: 100%; height: auto;
  border-radius: 8px; box-shadow: 0 30px 70px -30px rgba(22,21,20,.26); }

/* bento of mobile shots — one tall spot on the left, two stacked on the right */
body.proj-lucid .lucid-bento { background: var(--paper-2); padding: clamp(48px,8vh,104px) var(--pad); }
body.proj-lucid .lucid-bento figure { margin: 0 auto; max-width: 1120px; }
body.proj-lucid .lucid-bento .bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
body.proj-lucid .lucid-bento .bento-grid img { display: block; width: 100%; height: auto; border-radius: 10px; margin: 0; }
body.proj-lucid .lucid-bento .b-tall { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 760px) {
  body.proj-lucid .lucid-bento .bento-grid { grid-template-columns: 1fr; }
  body.proj-lucid .lucid-bento .b-tall { grid-column: 1; grid-row: auto; }
}

/* the tall page-design collage — enlarged reference column (per Rod: bigger than the
   first 700px pass) */
body.proj-lucid .lucid-collage { background: var(--paper-2); padding: clamp(56px,9vh,112px) var(--pad); }
body.proj-lucid .lucid-collage img { display: block; width: 100%; max-width: 1400px; margin: 0 auto; border-radius: 8px; box-shadow: 0 30px 70px -28px rgba(22,21,20,.30); }
/* the ambition pull-quote — the engagement's north-star line */
body.proj-lucid .lucid-ambition { background: var(--ink); color: var(--paper); padding: clamp(72px,12vh,140px) var(--pad); }
body.proj-lucid .lucid-ambition p { max-width: 22ch; margin: 0 auto; font-family: var(--display); font-weight: 400; font-size: var(--fs-d2); line-height: var(--lh-hero); letter-spacing: var(--tr-tight); text-align: center; text-wrap: balance; }
body.proj-lucid .lucid-ambition .label { display: block; text-align: center; margin-bottom: 24px; color: var(--mid); }

@media (max-width: 800px) {
  .shot-gallery.cols-2 { grid-template-columns: 1fr; }
  .shot-gallery.cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .shot-gallery.cols-3 { grid-template-columns: 1fr; }
}

.results { background: var(--paper-2); }
.results ul { list-style: none; max-width: 64ch; }
.results li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-16); line-height: var(--lh-body); }
.results li:last-child { border-bottom: none; }
.results li::before { content: '→'; font-family: var(--mono); color: var(--mid); margin-right: 14px; }

.pn { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.pn a { padding: 32px var(--pad); text-decoration: none; transition: background .18s; }
.pn a:hover { background: var(--paper-2); }
.pn a + a { border-left: 1px solid var(--line); text-align: right; }
.pn .label { display: block; margin-bottom: 8px; }
.pn b { font-family: var(--display); font-weight: 500; font-size: var(--fs-23); text-transform: none; letter-spacing: var(--tr-snug); }
.pn a:hover b { color: var(--rosa); }

@media (max-width: 800px) {
  .block { grid-template-columns: 1fr; gap: 14px; }
  .two-up { grid-template-columns: 1fr; }
  .two-up figure + figure { border-left: none; border-top: 1px solid var(--line); }
  .pn { grid-template-columns: 1fr; }
  .pn a + a { border-left: none; border-top: 1px solid var(--line); text-align: left; }
}
@media (max-width: 900px) {
  .meta-ledger { grid-template-columns: repeat(2, 1fr); }
  .meta-ledger div { border-bottom: 1px solid var(--line); }
  .meta-ledger div:nth-child(2n) { border-right: none; }
}

/* ─── HERO MEDIA SLOT — fallback for case studies without real hero art.
   Markup is injected by js/site.js. Grey, unstyled on purpose: it is a
   placeholder for real hero imagery, not a design element. ─── */
.hero-stage {
  position: relative;
  width: calc(100% + 2 * var(--pad));
  margin: clamp(32px, 5vh, 52px) calc(-1 * var(--pad)) 0;
  aspect-ratio: 16 / 7;
  max-height: 69vh;
  background: #E3E1DB;
  border: 1px dashed #C9C6BE;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-stage-cap {
  font-family: var(--body);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--tr-caps-wide);
  text-transform: uppercase;
  color: #8A867E;
}
@media (max-width: 800px) {
  .hero-stage { display: none; }
}

/* ─── FEATURED SECTION — Research is the anchor section on every case
   study: tinted background and enlarged serif opening paragraph to give
   the primary-research methodology visual weight. ─── */
section[data-screen-label="Research"] { background: var(--paper-2); }
section[data-screen-label="Research"] > div > p {
  font-family: var(--display); font-size: var(--fs-23); line-height: 1.42; max-width: 48ch; color: var(--ink);
}
/* stat-grid layout standardized 2026-08-07 — all four projects use the base
   4-across grid (see .stat-grid in @layer templates); per-project column
   overrides removed so the Research stat boxes are identical site-wide. */

}

/* ─── TIER 3 — BRAND & IDENTITY — template variation for brand/identity-led
   work. Pairs with the shared sections above (hero, meta-ledger, pn,
   results) — owns the sections unique to identity-system case studies: the
   specimen showcase and the applications grid. --client (body.proj-tier3brand,
   set in site.css) is the demo accent; swap it per real project when this
   template gets used for actual client work. ─── */
@layer templates {

.specimen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.specimen-tile {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(24px,3vw,32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.specimen-tile:nth-child(4n) { border-right: none; }
/* border/background/centering composed from site.css — see .media-placeholder
   above (same shared rule). */
.specimen-box {
  aspect-ratio: 1 / 1;
  padding: 12px;
}
.specimen-box.wide { aspect-ratio: 16 / 9; }
.specimen-box span {
  font-family: var(--mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--mid);
  line-height: var(--lh-body);
}
.specimen-swatches { display: flex; gap: 8px; }
.specimen-swatch {
  flex: 1;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--line);
  background: var(--paper-2);
  display: flex;
  align-items: flex-end;
  padding: 6px;
}
.specimen-swatch span { font-family: var(--mono); font-size: var(--fs-10); color: var(--mid); }
.specimen-type {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: var(--tr-snug);
  font-size: 64px;
  line-height: var(--lh-solid);
  color: var(--client);
}
.specimen-type.sm { font-size: 44px; }
/* .specimen-label + .specimen-desc now live inside a <figcaption>; this
   keeps their own 16px stacked gap so the figure's 3-item flex column
   (box, label, desc) reads identically to before as a 2-item column
   (box, figcaption) with the same gap nested one level in. */
.specimen-tile figcaption { display: flex; flex-direction: column; gap: 16px; }
/* mono demoted to Geist wherever it was setting a label/caption, not a figure */
.specimen-label { font-family: var(--body); font-weight: 500; letter-spacing: var(--tr-caps); font-size: var(--fs-13); text-transform: uppercase; }
.specimen-desc { font-size: var(--fs-12); line-height: var(--lh-body); color: var(--mid); }

.applications {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.application-tile {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.application-tile:nth-child(3n) { border-right: none; }
.application-box {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.application-box span {
  font-family: var(--mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--mid);
}
.application-caption {
  padding: 14px clamp(20px,3vw,28px);
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-11);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--mid);
}

@media (max-width: 900px) {
  .specimen { grid-template-columns: repeat(2, 1fr); }
  .specimen-tile:nth-child(2n) { border-right: none; }
  .applications { grid-template-columns: 1fr; }
  .application-tile { border-right: none !important; }
}

}

/* ─── TIER 3 — MOTION & FILM — template variation for motion/video-led
   work. Owns the sections unique to motion-led case studies: the reel, the
   storyboard grid, motion principles, and the crew credit block. --client
   (body.proj-tier3motion, set in site.css) is the demo accent; swap it per
   real project when this template gets used for actual client work. ─── */
@layer templates {

.reel {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.reel span {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--mid);
}

.storyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.storyboard-frame {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.storyboard-frame:nth-child(3n) { border-right: none; }
.storyboard-box {
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  position: relative;
}
.storyboard-box::before {
  content: attr(data-frame);
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--mono);
  font-size: var(--fs-10);
  color: var(--client);
  font-weight: 600;
}
.storyboard-box span {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-10);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--mid);
}
.storyboard-caption {
  padding: 12px clamp(20px,3vw,28px);
  font-family: var(--body);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  font-size: var(--fs-11);
  color: var(--mid);
}

/* .principles itself (display, columns, divider, 900px collapse) is fully
   defined in site.css's shared hairline-grid rule — see .flagships in
   pages.css for the reasoning on why it's kept whole in one @layer. */
/* section > h2 (site.css base layer) supplies the type; this just spans it
   full-width above the 3-column grid instead of competing for a column. */
.principles > h2 { grid-column: 1 / -1; padding: clamp(24px,3vw,32px) var(--pad) 0; }
.principle {
  padding: clamp(28px,3vw,36px) var(--pad);
}
.principle h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: var(--tr-snug);
  font-size: var(--fs-14);
  text-transform: none;
  color: var(--client);
  margin-bottom: 10px;
}
.principle p { font-size: var(--fs-13); line-height: var(--lh-body); color: var(--ink); }

.credits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
}
.credit { padding: 18px var(--pad); border-right: 1px solid var(--line); }
.credit:last-child { border-right: none; }
.credit .label { display: block; margin-bottom: 5px; }
.credit dd { margin: 0; font-weight: 600; font-size: var(--fs-14); }

@media (max-width: 900px) {
  .storyboard { grid-template-columns: repeat(2, 1fr); }
  .storyboard-frame:nth-child(2n) { border-right: none; }
  /* .principles collapse + its divider flip to border-top now live in
     site.css's shared hairline-grid media query. */
}

/* Real Motion & Film pages. --client is the per-project accent, used by the
   storyboard frame numbers and principle headings. The reel holds a real Vimeo
   embed instead of the placeholder box, so it fills the 16:9 band edge-to-edge. */
body.proj-chipotle { --client: #A81612; }
body.proj-hpcemsizzle { --client: #0096D6; }
body.proj-chipotle .reel,
body.proj-hpcemsizzle .reel { padding: 0; }
body.proj-chipotle .reel iframe,
body.proj-hpcemsizzle .reel iframe { width: 100%; height: 100%; border: 0; display: block; }
.storyboard-box--image { padding: 0; overflow: hidden; }
.storyboard-box--image img { width: 100%; height: 100%; object-fit: cover; display: block; }

}

/* ─── TIER 3 — WEB & DIGITAL CAMPAIGN — template variation for
   web/campaign-led work. Owns the sections unique to web/digital case
   studies: the channel breakdown, responsive-view showcase, and the stats
   strip. --client (body.proj-tier3web, set in site.css) is the demo
   accent; swap it per real project when this template gets used for
   actual client work. ─── */
@layer templates {

.channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* section > h2 (site.css base layer) supplies the type; this just spans it
   full-width above the 4-column grid instead of competing for a column. */
.channels > h2 { grid-column: 1 / -1; padding: clamp(24px,3vw,32px) var(--pad) 0; }
.channel {
  padding: clamp(24px,3vw,32px) var(--pad);
  border-right: 1px solid var(--line);
}
.channel:last-child { border-right: none; }
.channel .label { color: var(--client); margin-bottom: 10px; }
.channel h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: var(--tr-snug);
  font-size: var(--fs-14);
  text-transform: none;
  margin-bottom: 8px;
}
.channel p { font-size: var(--fs-12); line-height: var(--lh-body); color: var(--mid); }

.responsive-views {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  padding: clamp(40px,5vw,64px) var(--pad);
  background: var(--paper-2);
  flex-wrap: wrap;
}
.responsive-frame {
  border: 1px dashed var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
}
.responsive-frame figcaption {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-10);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--mid);
}
.responsive-frame.desktop { width: min(520px, 90vw); aspect-ratio: 16 / 9; }
.responsive-frame.tablet { width: 220px; aspect-ratio: 3 / 4; }
.responsive-frame.mobile { width: 120px; aspect-ratio: 9 / 19.5; }

.web-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.web-stat { padding: clamp(24px,3vw,32px) var(--pad); border-right: 1px solid var(--line); }
.web-stat:last-child { border-right: none; }
.web-stat .num {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-tight);
  font-size: var(--fs-num);
  color: var(--client);
  line-height: var(--lh-solid);
  margin-bottom: 8px;
}
.web-stat .desc { font-size: var(--fs-12); color: var(--mid); }

@media (max-width: 900px) {
  .channels { grid-template-columns: repeat(2, 1fr); }
  .channel:nth-child(2n) { border-right: none; }
  .channel:nth-child(n+3) { border-top: 1px solid var(--line); }
}

}

/* ─── HALYARD — case-study narrative styling ───────────────────────
   Voice-first field agent for onshore wind O&M. Same shared scaffold as
   Folio/Meridian/Relay above (hero/meta-ledger/block/scope/results/pn) —
   this adds the custom content modules that scaffold doesn't cover: stat
   grid, findings-with-quotes, persona cards, IA map, task-flow cards.
   Class names here are hand-written (not the hashed `.c-xxxxxx` convention
   the other 3 projects carry from their original inline-style extraction)
   but the visual spec — spacing, borders, type scale — matches those
   exactly. Not tied to --client (left unset here, same as the other 3
   Deep UX projects — .block h2 just inherits --mid). ─── */
@layer templates {

/* ─── STAT GRID — Research section, 4 top-line numbers ─── */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 26px 0 8px; }
.stat-tile { background: var(--paper); padding: 20px 18px; }
.stat-tile-caption { margin-top: 8px; font-size: var(--fs-12); line-height: var(--lh-ui); color: var(--mid); }
/* figures — tabular everywhere, mono, not expanded grotesk */
.stat-num { font-family: var(--mono); font-weight: 500; font-size: var(--fs-num); line-height: var(--lh-solid); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-num .unit { font-family: var(--body); font-weight: 500; font-size: var(--fs-16); }

@media (max-width: 800px) {
  .stat-grid { grid-template-columns: repeat(2,1fr); }
}

/* Relay stat-grid override removed 2026-08-07 — now uses the base 4-across
   layout like every other project (standardized per Rod's request). */

/* ─── FINDINGS — Research section, numbered findings with a supporting quote ─── */
.findings { margin-top: 34px; }
.finding { padding: 22px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr; gap: 0 16px; }
.finding:first-child { border-top: none; }
.finding-tag { font-family: var(--mono); font-size: var(--fs-12); font-weight: 600; color: var(--signal); padding-top: 4px; }
/* font-family/weight/letter-spacing/text-transform inherited from the
   base-layer `h3, h4` rule (site.css) — a bare h3, no exception carved out
   for it, so it gets the same serif/500 treatment as every other h3/h4. */
.finding h3 { font-size: var(--fs-18); }
.finding p { margin-top: 8px; max-width: 60ch; font-size: var(--fs-14); line-height: var(--lh-prose); color: var(--ink); }
/* accent survives on finding/flow markers; everything else goes ink */
.finding blockquote { margin: 14px 0 0; padding-left: 16px; border-left: 2px solid var(--ink); font-style: italic; font-size: var(--fs-14); line-height: var(--lh-body); max-width: 58ch; }
.finding cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--tr-caps); color: var(--mid); }

/* ─── PERSONA CARDS — Personas section ─── */
/* card shell shared with .flow-card below (border + white fill) — only the
   spacing/accent genuinely differ between the two. */
.persona-card, .flow-card { border: 1px solid var(--line); background: #fff; }
.persona-card { margin-bottom: 18px; }
.persona-card:first-of-type { margin-top: 28px; }
.persona-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
/* base voice (mono/11px/caps-wide) composed from site.css's .eyebrow utility;
   only the color + margin genuinely differ here. */
.persona-role { color: var(--signal); margin-bottom: 8px; }
.persona-name { font-weight: 700; font-size: 28px; line-height: var(--lh-solid); letter-spacing: var(--tr-tight); }
.persona-ctx { margin-top: 8px; font-size: var(--fs-13); color: var(--mid); }
.persona-age { text-align: center; flex-shrink: 0; }
.persona-age-lbl { font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--tr-caps-wide); text-transform: uppercase; color: var(--mid); }
.persona-age-num { font-weight: 700; font-size: 38px; line-height: var(--lh-solid); }
.persona-body { padding: 22px 24px; }
.persona-body > p { max-width: 64ch; font-size: var(--fs-14); line-height: var(--lh-prose); color: var(--ink); }
.persona-impl { margin-top: 18px; background: var(--paper-2); padding: 16px 18px; }
.persona-impl-lbl { font-family: var(--mono); font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--tr-caps-wide); text-transform: uppercase; color: var(--mid); margin-bottom: 10px; }
.persona-impl-body { font-size: var(--fs-13); line-height: var(--lh-body); color: var(--ink); }

/* ─── IA MAP — Information Architecture section ─── */
.ia-map { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 26px; }
.ia-item { background: var(--paper-2); padding: 16px 18px; border-left: 3px solid var(--_accent, var(--rosa)); }
.ia-item-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 12px; }
.ia-item-hd b { font-size: var(--fs-14); }
.ia-item-tag { font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--mid); }
.ia-item-views { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.ia-item-views span { font-family: var(--mono); font-size: var(--fs-11); color: var(--mid); background: #fff; border: 1px solid var(--line); padding: 3px 9px; }
.ia-item p { margin-top: 10px; font-size: var(--fs-13); color: var(--mid); line-height: var(--lh-ui); }

/* Semantic accent palette — universal, content-driven */
.accent-core     { --_accent: #1F8A5B; }
.accent-insight  { --_accent: #B0791E; }
.accent-critical { --_accent: #AC2318; }
.accent-explore  { --_accent: #6B5B9A; }

/* ─── TASK FLOW CARDS ─── */
.flow-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.flow-card { border-top: 3px solid var(--_accent, var(--rosa)); padding: 20px; }
.flow-tag { font-family: var(--mono); font-size: var(--fs-11); font-weight: 600; color: var(--signal); }
.flow-card h3 { margin-top: 4px; font-size: var(--fs-18); }
.flow-who { margin-top: 2px; font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--tr-caps); color: var(--mid); }
.flow-card p { margin-top: 10px; font-size: var(--fs-13); line-height: var(--lh-body); color: var(--ink); }

@media (max-width: 800px) {
  .flow-list { grid-template-columns: 1fr; }
}

}

/* ─── FOLIO — case-study narrative styling, converted from hashed classes
   per docs/css-refactor-plan.md Phase 5. Reuses the shared .finding/
   .persona-card/.ia-map/.flow-list/.stat-grid scaffold established above
   (Halyard's semantic classes) wherever folio's rendered values already
   matched; body.proj-folio overrides carry the handful of properties
   that genuinely differ (mostly literal pre-WCAG-fix colors that were
   never in revamp.css's reach, so they still render as authored — kept
   literal, not "corrected", per the plan's no-visual-change rule). New
   class names only where folio has no Halyard equivalent (stat tiles,
   goals/frustrations columns, mockup screen chrome). ─── */
@layer templates {

.block > p.lede { max-width: 64ch; font-size: var(--fs-16); line-height: var(--lh-prose); margin-bottom: 26px; }
.block p.cont { max-width: 64ch; font-size: var(--fs-16); line-height: var(--lh-prose); margin-top: 1em; }

.persona-goals { border-top-width: 2px; border-top-style: solid; padding-top: 12px; }
.persona-goals .label { font-family: var(--mono); font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--tr-caps-wide); text-transform: uppercase; margin-bottom: 10px; }
.persona-frustrations { border-top: 2px solid #AC2318; padding-top: 12px; }
.persona-frustrations .label { font-family: var(--mono); font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--tr-caps-wide); text-transform: uppercase; color: #AC2318; margin-bottom: 10px; }
.persona-goals ul, .persona-frustrations ul { list-style: none; font-size: var(--fs-13); line-height: var(--lh-ui); color: #3B3934; display: flex; flex-direction: column; gap: 8px; }
.persona-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.persona-goals + .persona-impl, .persona-frustrations + .persona-impl { margin-top: 20px; }
body.proj-folio .persona-goals, body.proj-folio .persona-goals .label { border-top-color: #3E7A5E; color: #3E7A5E; }
body.proj-meridian .persona-goals, body.proj-meridian .persona-goals .label { border-top-color: #1F8A5B; color: #1F8A5B; }

.callout { margin-top: 24px; background: #ECEBE6; border: 1px solid var(--line); padding: 18px 20px; }
.callout .label { font-family: var(--mono); font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--tr-caps-wide); text-transform: uppercase; color: #AC2318; margin-bottom: 12px; }
.callout p { font-size: var(--fs-14); line-height: var(--lh-prose); color: #3B3934; max-width: 66ch; }

/* ─── REAL-IMAGE SCREENS PREVIEW ──────────────────────────────
   HP Elite Earbuds reuses the same .cs-screen-preview/.cs-screen-caption
   shape as folio/meridian/relay/halyard's landing pages, but has real
   screenshots to show instead of a placeholder box — scoped so the
   live-mockup screen-system projects are unaffected. */
body.proj-hpelitebuds .cs-screen-preview img,
body.proj-hpcem .cs-screen-preview img {
  display: block; margin: 0 auto;
  max-width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 16px 36px -14px rgba(22,21,20,.22), 0 5px 14px -6px rgba(22,21,20,.12);
}
.modal-gallery .modal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px;
  padding: 0 var(--pad) 28px;
}
.modal-gallery .shot-card { margin: 0; }
.modal-gallery .shot-card img { box-shadow: 0 16px 36px -14px rgba(22,21,20,.22), 0 5px 14px -6px rgba(22,21,20,.12); }
@media (max-width: 800px) { .modal-gallery .modal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .modal-gallery .modal-grid { grid-template-columns: 1fr; } }

.screen-greeting { padding: 12px 20px 0; display: flex; justify-content: space-between; align-items: center; }
.txn-info { flex: 1; }
.pulse-total-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }

/* stat-grid: Folio + Meridian per-project overrides removed 2026-08-07 so all
   four Research stat grids share the one base standard (4-across bordered grid,
   base figure size). */

/* findings — colors that never made it into revamp.css's reach */
body.proj-folio .finding h3, body.proj-meridian .finding h3 { font-weight: 700; letter-spacing: var(--tr-snug); }
body.proj-folio .finding p, body.proj-meridian .finding p { color: #3B3934; }
body.proj-folio .finding cite, body.proj-meridian .finding cite { color: #8A8781; }

/* personas */
body.proj-folio .persona-role, body.proj-meridian .persona-role { color: #AC2318; }
body.proj-folio .persona-ctx, body.proj-meridian .persona-ctx { color: #6E6B64; }
body.proj-folio .persona-age-lbl, body.proj-meridian .persona-age-lbl { color: #A79E92; }
body.proj-folio .persona-body > p, body.proj-meridian .persona-body > p { color: #3B3934; }
body.proj-folio .persona-impl, body.proj-meridian .persona-impl { background: #F6F4EF; }
body.proj-folio .persona-impl-lbl, body.proj-meridian .persona-impl-lbl { color: #8A8781; }
body.proj-folio .persona-impl-body, body.proj-meridian .persona-impl-body { color: #3B3934; }
body.proj-folio .persona-card:last-child, body.proj-meridian .persona-card:last-child { margin-bottom: 0; }
/* Meridian's persona-age-num hash (.c-2a43bc) shares a revamp.css twin
   selector with the stat-num hash (.c-9c978b) — a Phase-5 grouping artifact
   that accidentally restyled the age figure to look like a stat figure
   (mono, 33px, 500 weight) instead of its own 850/38px spec. Preserved
   as-is. Relay had the byte-identical rule (same original hash, same
   artifact) until it was iceboxed 2026-09-07 — see decisions.md. */
body.proj-meridian .persona-age-num { font-family: var(--mono); font-weight: 500; font-size: var(--fs-num); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* Maya's persona-impl (the one following the two-column goals/frustrations)
   carries its own +2px margin-top in the original hash (.c-1c766d: 20px vs
   the generic 18px) — a per-instance author choice, not reachable via the
   .persona-goals/.persona-frustrations + .persona-impl selector above since
   persona-impl is a sibling of .persona-cols, not of .persona-goals itself. */
body.proj-meridian .persona-cols + .persona-impl { margin-top: 20px; }

/* Meridian's ia-item hashes (.c-7d7adb etc., pre-conversion) all used the
   literal --paper tone (#F2F1ED, same as .stat-tile) — not var(--paper-2)
   (#ECEBE6) that the shared .ia-item rule carries (tuned for folio, which
   matches --paper-2 already). Preserved as-authored. */
body.proj-meridian .ia-item { background: #F2F1ED; }

.ia-item { min-height: 0; overflow: visible; }
body.proj-folio .ia-item-hd, body.proj-meridian .ia-item-hd { row-gap: 4px; column-gap: 12px; min-height: 0; overflow: visible; }
body.proj-folio .ia-item-hd b, body.proj-meridian .ia-item-hd b { line-height: var(--lh-title); }
body.proj-folio .ia-item-tag, body.proj-meridian .ia-item-tag { color: #8A8781; }
body.proj-folio .ia-item-views, body.proj-meridian .ia-item-views { margin-top: 12px; min-height: 0; }
body.proj-folio .ia-item-views span { color: #6E6B64; border-color: #E4DDD1; }
body.proj-meridian .ia-item-views span { color: #6E6B64; border-color: var(--line); }
body.proj-folio .ia-item p, body.proj-meridian .ia-item p { color: #6E6B64; }

body.proj-folio .flow-card--featured, body.proj-meridian .flow-card--featured { grid-column: 1 / -1; background: #ECEBE6; border-top: 1px solid var(--line); padding: 22px 24px; }
body.proj-folio .flow-card--featured header, body.proj-meridian .flow-card--featured header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
body.proj-folio .flow-card--featured h3, body.proj-meridian .flow-card--featured h3 { font-size: var(--fs-18); }
body.proj-folio .flow-card--featured p, body.proj-meridian .flow-card--featured p { max-width: 70ch; font-size: var(--fs-14); }
body.proj-folio .flow-tag, body.proj-meridian .flow-tag { color: #AC2318; }
body.proj-folio .flow-card h3, body.proj-meridian .flow-card h3 { font-weight: 700; }
body.proj-folio .flow-who, body.proj-meridian .flow-who { color: #8A8781; }
body.proj-folio .flow-card p, body.proj-meridian .flow-card p { color: #3B3934; }

/* Meridian-only: a one-line stated success condition inside 4 of its 5 task-
   flow cards (F5's is folded into its paragraph instead) — no folio/Halyard
   equivalent, so this is a new class rather than a reused one. */
.flow-outcome { margin-top: 12px; border-left: 2px solid #1F8A5B; padding-left: 12px; font-size: var(--fs-12); font-style: italic; color: #4a4842; }

}