.elementor-114 .elementor-element.elementor-element-b4ssec01{padding:0px 0px 0px 0px;}.elementor-114 .elementor-element.elementor-element-b4scol01 > .elementor-element-populated{padding:0px 0px 0px 0px;}/* Start custom CSS *//* B4 assembled cascade: tokens -> screens-v2 -> poda (package order) */
:root {
  /* ---------- Colour [MEASURED 2026-10-17 palette] ---------- */
  --paper:        #0F0F0F;  /* [MEASURED] page ground — near-black; body background on all six pages probed */
  --paper-deep:   #FE1E0B;  /* [MEASURED] alternating colour-block ground — signal red (entire /work/ ground, CTA bands on every page) */
  --paper-card:   #EECEC6;  /* [MEASURED] pale blush — card/chip ground on dark (work filter chips); sibling section shade #EBD0C9 on home */
  --ink:          #EECEC6;  /* [MEASURED] primary text on the dark ground — headings, paragraphs */
  --ink-soft:     #8BB7E8;  /* [MEASURED] secondary text on dark — sky blue (serif links on home/project, stories text on royal) */
  --ink-faint:    #333333;  /* [MEASURED] faint/ghost text on dark — the giant swirl headline; also the body default colour */
  --red:          #FE1E0B;  /* [MEASURED] signal red — primary accent (h1 home, buttons, footer links, menu) */
  --red-deep:     #A93420;  /* [INFERRED] red pressed/hover — hover state not probed */
  --ochre:        #E9A426;  /* [INFERRED] mustard — no ochre element found on any probed page */
  --blue:         #1428E6;  /* [MEASURED] royal blue — headings + colour-block ground (about, contact, stories); deep variant #071BD8 for text on sky */
  --green:        #527A4A;  /* [INFERRED] muted leaf green — no green element found on any probed page */
  --pink:         #E3A7B8;  /* [INFERRED] dusty pink — not measured; the measured blush #EECEC6 fills this register */
  --line:         #EECEC6;  /* default border colour — follows measured --ink (border widths/colours not directly probed) */
  --line-soft:    rgba(238, 206, 198, 0.18); /* hairlines on the ground — base = measured --ink; alpha not measured */
  --focus:        #2F5D8A;  /* [INFERRED] focus ring — focus state not probed */
  --error:        #B02A1B;  /* [INFERRED] form errors — error state not probed */
  --success:      #527A4A;  /* [INFERRED] form success — success state not probed */

  /* On-ink (dark section) variants */
  --ink-ground:   #0F0F0F;  /* [MEASURED] dark ground — footer effective background on every page */
  --paper-on-ink: #EECEC6;  /* [MEASURED] text on dark */
  --line-on-ink:  rgba(238, 206, 198, 0.28); /* base = measured --paper-on-ink; alpha not measured */

  /* ---------- Typography [MEASURED 2026-10-17 equivalents] ----------
     The reference's real faces, read from computed styles:
     "Right Serif Wide Black" (display, weight 600, uppercase),
     "Right Serif Bold" (headings/text serif, computed weight 400)
     and "Supply" (labels, paragraphs, form fields — the site's
     mono-register face). These are the site's own (licensed) faces,
     named here so the build can license or substitute knowingly.
     The body element's default stack is the WordPress system stack
     (16px), but every rendered text element overrides it with the
     faces above. */
  --font-display: "Right Serif Wide Black", sans-serif;
  --font-body:    "Supply", sans-serif;
  --font-mono:    "Supply", sans-serif;
  --font-hand:    "Caveat", "Comic Sans MS", cursive; /* [INFERRED] — no hand face found on the live pages */

  /* Type scale (desktop reference 1440px; the reference is fluid —
     display sizes are vw-driven, canonical px values measured) */
  --type-display-1: 11.25rem;  /* [MEASURED] 180px home h1, Right Serif Wide Black */
  --type-display-2: 6.25rem;   /* [MEASURED] 100px contact h1; page heroes measured 79.2–184.32px (fluid) */
  --type-h2:        2.5rem;    /* [MEASURED] 40px Right Serif Bold — the recurring section heading on every page */
  --type-h3:        1.875rem;  /* [MEASURED] 30px Right Serif Bold — project sub-headings */
  --type-h4:        1.5rem;    /* 24px [INFERRED] — not measured; nearest measured serif text is 25px (links) */
  --type-lead:      1.375rem;  /* 22px [INFERRED] — no distinct lead size measured; paragraphs run 15px */
  --type-body:      0.9375rem; /* [MEASURED] 15px Supply paragraphs on every page */
  --type-small:     0.8125rem; /* [MEASURED] 13px — project paragraphs, contact form fields */
  --type-caption:   0.6875rem; /* [MEASURED] 11px — captions, meta */
  --type-label:     0.6875rem; /* [MEASURED] 11px Supply labels, uppercase, negative tracking */

  --leading-display: 0.8;  /* [MEASURED] 180→144px, 138→110.4px, 79.2→63.36px */
  --leading-tight:   1.0;  /* [MEASURED] Right Serif Bold heads: 40→40px, 30→30px */
  --leading-body:    1.5;  /* [MEASURED] body 16→24px; paragraphs 15→22.5px */
  --leading-loose:   1.75; /* [INFERRED] — not measured */
  --tracking-label:  -0.02em; /* [MEASURED] −0.2px at 11px, −0.3px at 13–14px (negative, not tracked out) */
  --tracking-display: 0;     /* [MEASURED] 'normal' on home/contact/project display heads; about h1 −2px at 184px is the exception */

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */
  --section-y: clamp(5rem, 9vw, 8.5rem); /* vertical section rhythm */
  --gutter:    clamp(1.25rem, 4vw, 4rem); /* page side padding */

  /* ---------- Layout ---------- */
  --container: 1440px;  /* max content width [INFERRED] — the reference is full-bleed/fluid; not measured */
  --container-narrow: 880px; /* article / text measure */
  --grid-gap: clamp(1rem, 2.5vw, 2.5rem);

  /* ---------- Radii (print register: near-sharp) ---------- */
  --radius-0: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px; /* chips only */

  /* ---------- Borders & shadows (misregistered print) ---------- */
  --border: 2px solid var(--line);
  --border-thin: 1px solid var(--line);
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-lift: 10px 14px 0 rgba(28, 26, 21, 0.16);

  /* ---------- Motion [INFERRED from described pacing: slow, deliberate] ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;
  --marquee-dur: 36s;   /* greeting band, one loop */
  --reveal-dur: 900ms;   /* scroll reveal travel */

  /* ---------- Z-index ---------- */
  --z-header: 90;
  --z-menu: 100;
  --z-popup: 120;
}
:root {
  /* Page frame (components-v2 §1) */
  --frame-inset: 12px;          /* backdrop rim visible around frames */
  --frame-radius: 12px;
  --grid-cell: 40px;            /* grid overlay cell @1440 — pixel-verified */
  --grid-cell-mobile: 28px;     /* grid overlay cell @390 */
  --grid-line: rgba(238, 206, 198, 0.07); /* on black; tint per world */

  /* Strip bar (components-v2 §4) */
  --strip-h: 30px;              /* desktop one-line bar */
  --strip-panel-radius: 12px;   /* mobile closing panel */

  /* Nav blocks (components-v2 §3) */
  --nav-block-radius: 6px;
  --nav-block-gap: 3px;

  /* Buttons (components-v2 §8) */
  --btn-radius: 4px;
  --submit-h: 64px;

  /* Cover rail (components-v2 §11) */
  --rail-card-w: 312px;
  --rail-card-h: 416px;         /* 3:4 portrait */
  --rail-gap: 4px;
  --rail-offset: 9vw;           /* left start inside the blush panel */

  /* Radii (components-v2 §18/§25/§26) */
  --radius-cover: 12px;         /* rail cards + project gallery */
  --radius-card: 14px;          /* work masonry cards (16px mobile) */
  --radius-story: 24px;         /* story cards (28px mobile) */
  --radius-chip: 3px;           /* filter chips + meta chip */

  /* Badges & team (components-v2 §14/§16) */
  --badge-lg: 310px;            /* coin badge, home ghost section */
  --badge-sm: 150px;            /* dashed-ring badge, CTA bands */
  --team-disc: 150px;           /* portrait disc */
  --team-ring: 185px;           /* dashed outer ring */

  /* Bands & panels */
  --ticker-h: 52px;             /* one ticker row (components-v2 §12) */
  --sky-panel-h: 570px;         /* terminal sky panel @1440 (§28) */
  --base-bar-h: 64px;           /* closing base strip, nominal 55–75px */

  /* Contact form (components-v2 §22) */
  --form-col: 470px;            /* centred form column @1440 */
  --field-rule: 2px;           /* underline field rule weight */
}
:root {
  /* Mockup stand-ins per REBUILD-SPEC font plan (production uses
     the licensed faces named in tokens.css):
     display → Alfa Slab One · serif heads → Bitter 700 ·
     Supply → IBM Plex Mono. Stand-ins are listed FIRST so they
     actually render in the mockups. */
  --font-display: "Alfa Slab One", "Right Serif Wide Black", sans-serif;
  --font-serif:   "Bitter", "Right Serif Bold", serif;
  --font-body:    "IBM Plex Mono", "Supply", monospace;
  --font-mono:    "IBM Plex Mono", "Supply", monospace;

  --deep-blue: #071BD8;          /* [MEASURED] text on sky */
  --blush-shade: #EBD0C9;        /* [MEASURED] blush sibling shade */
  --royal-soft: #2B3BEB;         /* [FROM CAPTURE] tone-on-tone royal */

  /* Component size vars — desktop defaults; .sheet--mobile
     (on <body> of the *-mobile.html files) rescales them. */
  --hero-display: 180px;         /* home hero [MEASURED] */
  --ghost-display: 138px;        /* home ghost head [MEASURED] */
}
:root {
  /* — Token remap: same blocking system, new fingerprint — */
  --paper:        #12100D;  /* warm near-black page/frame ground */
  --paper-deep:   #FFC400;  /* alternating colour-block ground */
  --paper-card:   #FFF3D6;  /* cream paper — text/sheet on dark */
  --ink:          #FFF3D6;  /* primary text on the dark ground */
  --ink-soft:     #7ED3B2;  /* mint — sky panel ground, ticker text,
                               story-card + story-page ground */
  --ink-faint:    #2E2A24;  /* ghost type on the warm black */
  --red:          #FFC400;  /* hero flood colour → poda yellow
                               (rides every --red slot: hero type,
                               nav blocks, strips, buttons, ghost,
                               team names, dashed rings) */
  --red-deep:     #D9A400;  /* pressed yellow */
  --blue:         #0E7A3D;  /* royal flood → palm green
                               (ticker band ground, palm accents) */
  --green:        #0E7A3D;
  --line:         #FFF3D6;
  --line-soft:    rgba(255, 243, 214, 0.18);
  --line-on-ink:  rgba(255, 243, 214, 0.28);
  --paper-on-ink: #FFF3D6;
  --ink-ground:   #12100D;
  --blush-shade:  #F7E7BE;  /* services sheet top shade (cream) */

  /* Tokens declared inside screens-v2.css's own :root — restated
     here so the PODA values win the cascade on every page: */
  --deep-blue:    #0A4D2A;  /* deep palm — body text on mint
                               (contact fields, story body) */
  --royal-soft:   #2F9E63;  /* soft palm — tone-on-tone on palm
                               grounds (wall accents, ticker) */

  /* — Faces — */
  --font-display: "Fraunces", "Georgia", serif;
  --font-serif:   "Fraunces", "Georgia", serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Space Mono", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Type helpers */
.display {
  font-family: var(--font-display);
  font-weight: 400; /* Alfa Slab One ships one weight; the real
                       face computes 600 — see font plan gap note */
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.serif-head {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: var(--leading-tight);
}
.caps {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}


/* ---------- 02 · Backdrop (§1) ---------- */
/* Full-bleed illustrated backdrop; frames are inset ~12px so a
   rim of it shows around every frame. The artwork is an ORIGINAL
   collage scene drawn for this package (inline SVG in each
   screen's .backdrop element). */
.backdrop {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden;
  background: #1D3A5F;
}
.backdrop svg { width: 100%; height: 100%; }

/* ---------- 03 · Frame & grid overlay (§1) ---------- */
.frame {
  position: relative;
  margin: var(--frame-inset);
  border-radius: var(--frame-radius);
  overflow: hidden;
  background: var(--paper);
  --grid-line: rgba(238, 206, 198, 0.07); /* on black */
}
.frame--grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}
.frame > * { position: relative; z-index: 1; }

.frame--black { background: var(--paper); }
.frame--sky   { background: var(--ink-soft); --grid-line: rgba(20, 40, 230, 0.10); }
.frame--royal { background: var(--blue);     --grid-line: rgba(139, 183, 232, 0.12); }
.frame--red   { background: var(--red);      --grid-line: rgba(15, 15, 15, 0.10); }

/* Unframed black zone carrying the grid too (home ghost/team) */
.zone--grid {
  position: relative;
}
.zone--grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(238,206,198,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,206,198,0.05) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}
.zone--grid > * { position: relative; z-index: 1; }


/* ---------- 05 · Strip bar (§4) ---------- */
.strip-bar {
  background: var(--red); color: #fff;
  height: var(--strip-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 16px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: -0.2px; line-height: 1.3;
}
.strip-bar .sb-zone { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.strip-bar .sb-zone--centre { gap: 22px; }
.strip-bar a:hover { text-decoration: underline; }
.strip-bar .wordmark {
  display: inline-flex; align-items: center; gap: 1px;
  text-transform: lowercase; letter-spacing: 0;
}
.strip-bar .wordmark svg { width: 15px; height: 9px; color: #fff; }


/* ---------- Stories index — page world ---------- */
.b4-stories { background: var(--blue); }
/* Opaque royal ground under intro → grid → say-hi: without it
   the fixed backdrop collage paints over the content zone
   (proven in a real 390px viewport render, not just stitches) */
.stories-body { background: var(--blue); position: relative; }


/* ---------- 19 · Ghost word wall ---------- */
.stories-hero { padding-bottom: 0; }
.stories-hero .site-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
}
.word-wall { position: relative; overflow: hidden; padding: 18px 0 30px; }
.wall-row { overflow: hidden; white-space: nowrap; }
.wall-track {
  display: flex; width: max-content;
  animation: ticker-scroll 52s linear infinite;
}
.wall-row--rev .wall-track { animation-direction: reverse; }
.wall-row--slow .wall-track { animation-duration: 68s; }
.wall-half {
  display: flex; align-items: baseline; white-space: nowrap;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 24vw; line-height: .95; color: var(--ink-soft);
}
.wall-half .w { padding-right: .28em; }
.wall-fish {
  position: absolute; z-index: 3;
  width: 200px; height: 200px; border-radius: 50%;
  border: 2px dashed rgba(139, 183, 232, 0.85);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.wall-fish svg { width: 72%; height: auto; }

/* Mobile wall: full-bleed, no frame, no strip (§19 mobile) */
.wall-m { position: relative; overflow: hidden; background: var(--blue); }
.wall-m .wall-half { font-size: 15.5vw; line-height: 1.02; }
.wall-m .wall-track { animation-duration: 46s; }
.wall-m .wall-row--slow .wall-track { animation-duration: 60s; }
.wall-m-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 16px 0;
}


/* ---------- Stories intro ---------- */
.stories-intro { text-align: center; padding: 88px 20px 0; }
.stories-intro h1 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 40px; line-height: 1.05; color: var(--ink-soft);
  max-width: 560px; margin: 0 auto 24px;
}
.stories-intro .intro-copy {
  font-size: 13px; line-height: 1.6; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  max-width: 560px; margin: 0 auto;
}
.sheet--mobile .stories-intro { padding-top: 64px; }
.sheet--mobile .stories-intro h1 { font-size: 34px; }
.sheet--mobile .stories-intro .intro-copy { font-size: 15px; max-width: 340px; }


/* ---------- 26 · Filter chips (stories world) ---------- */
.filter-chips {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px; padding: 36px 20px 0;
}
.filter-chips .chip {
  border: 1px solid var(--ink-soft); border-radius: var(--radius-chip);
  color: var(--ink-soft); background: transparent;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: 5px 10px; line-height: 1.2; cursor: pointer;
}
.filter-chips .chip--active { background: var(--ink-soft); color: var(--blue); }
.sheet--mobile .filter-chips .chip { font-size: 15px; padding: 10px 14px; }


/* ---------- 18 · Story cards + grid ---------- */
.story-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; padding: 58px 45px 0; align-items: start;
}
.story-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.story-card {
  display: block; background: var(--ink-soft);
  border-radius: var(--radius-story);
  padding: 30px 28px 34px; text-align: center; color: var(--blue);
}
.story-card .cover {
  border-radius: 14px; overflow: hidden; margin-bottom: 28px;
  background: var(--blue);
}
.story-card .cover svg { width: 100%; height: auto; }
.sc-meta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--blue);
}
.sc-meta svg { width: 17px; height: 9px; color: var(--blue); flex: none; }
.sc-rule { border: 0; border-top: 1px dotted rgba(20, 40, 230, 0.55); margin: 16px 0 20px; }
.story-card h3 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 40px; line-height: 1.02; color: var(--blue);
}
.story-card .excerpt {
  margin-top: 18px; font-size: 13px; line-height: 1.55;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--blue);
}
.sheet--mobile .story-grid { grid-template-columns: 1fr; padding: 46px 20px 0; gap: 24px; }
.sheet--mobile .story-card { border-radius: 28px; padding: 26px 22px 30px; }
.sheet--mobile .story-card h3 { font-size: 34px; }

/* SAY HI! link after the grid (CANON-V2 stories §4) */
.say-hi { text-align: center; padding: 44px 20px 0; }
.say-hi a {
  color: var(--ink-soft); font-size: 13px; text-transform: uppercase;
  letter-spacing: var(--tracking-label); text-decoration: underline;
  text-underline-offset: 4px;
}


/* ---------- 17 · CTA closing band (stories variant) ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--red); color: var(--paper-card);
  margin-top: 96px; padding: 100px 30px 116px; text-align: center;
}
.cta-band::before { /* grid overlay on red (§1) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(15,15,15,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,15,15,0.10) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band .notch {
  position: absolute; top: 0; left: 50%; z-index: 2;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid var(--blue);
}
.cta-band h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 103.68px; line-height: .8; color: var(--paper-card);
}
.cta-band h2 .line { display: block; }
.cta-band h2 .u { text-decoration: underline; text-underline-offset: 10px; }
/* Mobile: band becomes an inset red panel, strip wraps inside */
.sheet--mobile .cta-band {
  margin: var(--frame-inset); margin-top: 72px;
  border-radius: var(--strip-panel-radius);
  padding: 58px 18px 0;
}
.sheet--mobile .cta-band h2 { font-size: 52px; }
.sheet--mobile .cta-band .notch { border-top-color: var(--blue); }
.cta-strip {
  margin: 44px -18px 0; padding: 6px 18px 20px;
  text-align: center; font-size: 13px; line-height: 2;
  color: #F6E7E1; text-transform: uppercase; letter-spacing: -0.2px;
}
.cta-strip a { white-space: nowrap; }
.cta-strip .sep { opacity: .75; padding: 0 2px; }


/* F2 item 3 — story cards need an explicit [hidden] rule */
.story-card[hidden] { display: none; }

/* Fraunces ships real weights — the stand-in rules above set
   display at 400 (Alfa has one weight) and serif heads at 700
   (Bitter). Pin PODA's actual cuts: 900 display, 600 serif. */
.display,
.btn,
.member h3,
.sky-panel .whats-next,
.sky-panel .wn-cta { font-weight: 900; }
.hero-side h3,
.services h2,
.services-list,
.services .closing-line,
.text-block .lead,
.text-block .meet,
.ticker-set { font-weight: 600; }

/* — Grid lines: warm cream instead of blush — */
.frame { --grid-line: rgba(255, 243, 214, 0.07); }
.frame--sky { --grid-line: rgba(14, 122, 61, 0.12); }   /* palm grid on mint */
.frame--royal { --grid-line: rgba(126, 211, 178, 0.14); } /* mint grid on palm */
.frame--red { --grid-line: rgba(18, 16, 13, 0.10); }   /* ink grid on yellow */
.zone--grid::before {
  background-image:
    linear-gradient(rgba(255,243,214,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,243,214,0.05) 1px, transparent 1px);
}
.backdrop { background: #0E7A3D; }  /* beats the #1D3A5F hardcode above */

/* — Header furniture: ink text on the yellow blocks — */
.block-nav a { color: #12100D; }
.nav-m nav a { color: #12100D; }
.nav-m summary { color: var(--red); } /* the + toggle in yellow */

/* — Strip bars: yellow band, ink type, mono register — */
.strip-bar {
  color: #12100D;
  font-family: var(--font-mono);
}
.strip-bar--closing { color: var(--red); } /* black bar, yellow links */
.strip-bar--panel { color: #12100D; }     /* beats the #F6E7E1 hardcode */
.strip-bar--inband { color: #12100D; }

/* — Buttons: yellow slab, ink type — */
.btn { color: #12100D; }
.btn--submit { color: #12100D; }

/* — Mono-register texts (standfirst, service intro, body copy) — */
.hero-side .standfirst,
.services .intro,
.text-block .body-copy { font-family: var(--font-mono); }

/* — Services sheet: cream paper, ink type, palm accents — */
.panel--blush {
  background:
    linear-gradient(rgba(18,16,13,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,16,13,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blush-shade) 0, var(--paper-card) 300px);
  background-size: var(--grid-cell) var(--grid-cell), var(--grid-cell) var(--grid-cell), 100% 100%;
}
.services h2,
.services .intro,
.services-list { color: #12100D; }
.services .accent,
.services-list li:nth-child(4),
.services .closing-line { color: var(--blue); }

/* — Ticker: palm band (via --blue), mint type, yellow tab, ink label — */
.ticker-tab {
  color: #12100D;
  font-family: var(--font-mono);
}
/* Blush-tab ticker variant (about + project pages): cream tab set */
.ticker-set--blush { color: #12100D; }
.ticker-tab--blush { color: #12100D; font-family: var(--font-mono); }

/* — Team rail: yellow dashed device — */
.team-rail::before { border-top-color: rgba(255, 196, 0, 0.55); }
.member .portrait { border-color: rgba(255, 196, 0, 0.65); }

/* — Interlude + greet figures (new art, new proportions) — */
.interlude .hang-fig { width: 252px; }
.greet .balloon-fig { width: 104px; }

/* — Closing sky panel: mint ground (via --ink-soft), ink giant
     type, palm-grid, palm CTA with cream type — */
.sky-panel::after {
  background-image:
    linear-gradient(rgba(14,122,61,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,122,61,0.12) 1px, transparent 1px);
}
.sky-panel .whats-next { color: #12100D; }
.sky-panel .wn-cta { background: var(--blue); color: var(--paper-card); }

/* — CTA closing bands (§17, work/about/stories/mood): cream
     display type on the warm black; the band's strip line and
     badge ring ride the yellow — */
.cta17-strip { color: var(--paper-card); }  /* beats #F6E7E1 hardcode */


/* ============================================================
   STORIES — word wall, cards, say-hi strip
   Wall: mint words (via --ink-soft) on the palm frame; the
   dashed motif rings turn mint; cards are mint with ink type.
   ============================================================ */
.wall-fish { border-color: rgba(126, 211, 178, 0.85); } /* beats sky hardcode */
.story-card { color: #12100D; }        /* mint card (via --ink-soft) */
.story-card h3 { color: #12100D; }
.story-card .excerpt { color: rgba(18, 16, 13, 0.78); }
.sc-meta { color: var(--deep-blue); }  /* deep palm on mint */
.sc-rule { border-color: rgba(18, 16, 13, 0.25); }
.cta-strip, .say-hi { color: var(--red); }

/* ============================================================
   STORY — article on the mint ground
   Headings ride --blue → palm; body rides --deep-blue → deep
   palm; accents (marker, links, meta glyph) ride --red → yellow.
   ============================================================ */
.story-body .faq-q {
  background: rgba(255, 243, 214, 0.5);  /* cream tint on mint;
                                           beats the GC sky rgba */
  border-color: var(--blue);
  color: var(--deep-blue);
}
.story-cap { color: var(--deep-blue); }
.story-prev { color: var(--red); }


/* — Display type re-derived for Fraunces 900 + PODA copy —
     (beats the F2 calibration rules for the GC copy: same
     specificity, later file) */
@media (min-width: 761px) {
  .hero-type h1 { font-size: 155px; }  /* REFUSE TO ≈ full measure */
  .ghost h2 { font-size: 148px; }      /* MEET THE CREW ≈ full zone */
  .sky-panel .whats-next { font-size: 17.2vw; } /* WHERE TO fits panel */
}
@media (max-width: 760px) {
  .hero--m .hero-type h1 { font-size: clamp(50px, 17vw, 70px); }
  .sheet--mobile .sky-panel .whats-next { font-size: 17vw; }
  .sheet--mobile .services-list { font-size: clamp(32px, 11vw, 44px); }

  /* — MOBILE GHOST FIX (T1) —
     The sample shrank the badge to 50vw and set the ghost at
     7.5vw, but the badge still sat ON the centred lines and
     ate their middles (only "SIN…NDS" read). The fix: the
     badge leaves the overlay position entirely and rides IN
     FLOW inside the headline, between the "To Whisper," line
     and the "Meet" line (home-mobile.html carries it there),
     slightly smaller — and the type steps up to 8.6vw so the
     lines carry the same full-bleed presence as desktop.
     Every glyph of every line is now on the page, readable,
     at every width 320–430. Desktop is untouched. */
  .sheet--mobile .ghost h2 { font-size: 8.6vw; }
  .sheet--mobile .char-badge {
    position: relative; left: auto; top: auto; transform: none;
    display: block;
    width: 46vw; height: 46vw;
    margin: 1.5vw auto;
  }
}

/* ============================================================
   T4 APPEND — MOOD · CONTACT · LINKTREE
   (Worker T4: only the two linktree text lines PODA-BIBLE §10
   requires have no v2 class — styled here. Everything else on
   T4's pages rides T1's rules above.)
   ============================================================ */
.lt-tagline {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  letter-spacing: .12em; color: var(--deep-blue);
  margin: 16px auto 0; max-width: 300px;
}
.lt-foot {
  font-family: var(--font-mono); font-size: 10px; line-height: 1.7;
  letter-spacing: .1em; color: var(--deep-blue);
  margin: 20px auto 0;
}

/* ============================================================
   — T3 APPEND (About · Stories · Story) —
   Appended per PODA-BIBLE §12.3; T1's rules above untouched.
   Value gaps found by T3 (logged in BUILD-LOG-T3.md for T1):
   · §17 closing bands ride --red → poda yellow, but their
     headline/strip type was left cream (--paper-card on the
     h2s, #F6E7E1 hardcodes on the in-band strips): cream on
     yellow is unreadable. PODA furniture on yellow is ink
     (strip bars, buttons, chips) — the bands now match.
   · .story-main's grid tint was still the GC royal rgba —
     restated as palm on mint, poda.css's .frame--sky recipe.
   Plus: the mobile About band badge rides IN FLOW (T1's
   standing decision — badges never overlay headline text on
   mobile), the About services list + facts row, and the
   story page's figure plate.
   ============================================================ */
.cta17 h2, .cta-band h2 { color: #12100D; }
.cta-strip, .cta17-strip { color: #12100D; }
.story-main {
  background-image:
    linear-gradient(rgba(14,122,61,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,122,61,0.12) 1px, transparent 1px);
}
.sheet--mobile .cta17-badge--m {
  position: relative; left: auto; top: auto; transform: none;
  display: block; margin: 20px auto 4px;
}

/* — About: services long form + facts row (inside .stext) — */
.ab-svc { list-style: none; margin: 18px 0 6px; padding: 0; }
.ab-svc li {
  font-size: 14.5px; line-height: 1.45;
  color: var(--deep-blue); margin-bottom: 9px;
}
.ab-svc strong {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 17px; color: var(--blue);
}
.ab-facts { font-family: var(--font-mono); font-size: 11.5px; }

/* — Story: figure plate (label flat-lay) + caption — */
.story-fig { margin: 6px 0 20px; }
.story-fig svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.story-fig .story-cap { margin-top: 12px; margin-bottom: 0; }

/* — Story: the disc section's offset (the v2 rule for this slot
   is named after the reference's subject; PODA's section gets
   its own class with the same geometry) — */
.story-sec--disc .story-disc { top: -190px; }

/* — About: the Sticker Garage arrow takes deep palm — poda
   yellow (the --red remap) is illegible on the mint scene
   ground; deep palm keeps it in-palette and readable. — */
.stext a.stext-arrow { color: #0A4D2A; }

/* — Story: the article marker takes palm — poda yellow (the
   --red remap) washes out on the mint article ground; palm
   matches the H1 unit beneath it. (Article LINKS stay yellow
   per PODA-BIBLE §6.4.) — */
.story-marker { color: var(--blue); }

/* ════════════════════════════════════════════════════════════
   TF FIX PASS — VERIFY-PODA blockers (stories transcription +
   project panel re-fit)
   ════════════════════════════════════════════════════════════ */

/* — Stories: the card date line (bible §6.3 — every card renders
   its date). Wears the sc-meta typography; sits after the
   excerpt, closing the card. — */
.story-card .sc-date {
  margin-top: 14px; font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--deep-blue);
}

/* — Project terminal panel re-fit (VERIFY-PODA gap): the PODA
   headline at the inherited 17.2vw/55% ran 1328px wide with only
   ~48% inside the panel (v2 reference: 975px, ~65% visible).
   Type size + anchor adjusted together — copy, badge and button
   untouched — to restore the reference proportion. Measured
   before/after in FIX-LOG-TF.md. Mobile panel measured 93%
   visible and is NOT touched. — */
.sky-panel--project .whats-next { left: 47%; font-size: 15vw; }

/* ════════════════════════════════════════════════════════════
   IMP2 — WORK + PROJECT improvement pass (Sheku's improvement
   round; IMPROVE-LOG-IMP2.md). Copy untouched throughout;
   rules above this section untouched. All rules are scoped to
   the work pages (.b4-stories) or to project-only components
   (.p-gallery), so no other page's cascade changes.
   ════════════════════════════════════════════════════════════ */

/* — W-D1 · Work hero stack recomposed. Before: inner top
   −190px put the dark first row's glyphs ~55% out of the
   frame — sliced mid-stroke at the top edge, reading as a
   rendering accident. Now the rows step down (35vw → 30vw
   desktop) and the inner sits at +8px with the drift gentled
   to −14px, so row 1 (dark) and row 2 (yellow) sit FULLY in
   the frame with glyph clearance at every point of the
   drift, and row 3 keeps the deliberate ~60% bleed at the
   base the design already had. Same rows, tones, order and
   X-offsets. — */
.b4-stories .work-stack-inner {
  top: 8px;
  animation: ws-drift-imp2 16s ease-in-out infinite alternate;
}
.b4-stories .ws-row { font-size: 30vw; }
@keyframes ws-drift-imp2 {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
/* — W-M1 · Mobile stack: same recomposition (44vw → 42vw,
   top −60px → +2px, drift −6px) — row 1 full, row 3 ~82%
   bleed at the base. — */
.sheet--mobile.b4-stories .work-stack-inner {
  top: 2px;
  animation: ws-drift-imp2-m 16s ease-in-out infinite alternate;
}
.sheet--mobile.b4-stories .ws-row { font-size: 42vw; }
@keyframes ws-drift-imp2-m {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .b4-stories .work-stack-inner { animation: none; }
}

/* — W-D2 · H1 standfirst on the yellow intro frame: cream →
   ink (PODA's standing rule: furniture on yellow is ink),
   and the zone's grid lines ink-tinted so they exist on
   yellow at all. — */
.b4-stories .work-h1 { color: #12100D; }
.b4-stories .work-gridzone {
  background-image:
    linear-gradient(rgba(18,16,13,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,16,13,.09) 1px, transparent 1px);
}

/* — W-D3 · Caps lede: cream → ink on DESKTOP. In real
   viewports the lede renders over the fixed backdrop
   collage; at desktop reading position that ground is the
   mint sky, where cream failed and ink reads. On MOBILE
   the lede's reading position sits over the collage's palm
   hills — there cream was already right and ink would
   fail, so the mobile file keeps cream (higher-specificity
   rule below). — */
.b4-stories .work-lede { color: #12100D; }
.sheet--mobile.b4-stories .work-lede { color: var(--paper-card); }

/* — W-D4 · Filter chips at the design's presence scale
   (the mobile stories chip: 15px / 10px 14px). Desktop was
   11px / 5px 10px — specks under a 40px H1. Selected state
   (ink slab, yellow type) unchanged in kind. Mobile keeps
   its verified 15px size via the higher-specificity rule
   below. — */
.b4-stories .filter-chips .chip {
  font-size: 14px; padding: 10px 18px; border-width: 1.5px;
}
.sheet--mobile.b4-stories .filter-chips .chip {
  font-size: 15px; padding: 10px 14px;
}

/* — W-D5 · Caption system unified. One scrim ramp for all
   24 cards (the old single ramp landed as a heavy band on
   light art and as nothing on dark art); cap inset unified
   (left 18px / bottom 16px desktop; 16/14 mobile). The art
   elements that struck the caption band are lifted in the
   SVGs themselves (see IMPROVE-LOG-IMP2 W-D5). — */
.b4-stories .wcard .scrim {
  height: 46%;
  background: linear-gradient(to top,
    rgba(10,8,5,.80) 0%, rgba(10,8,5,.38) 55%, rgba(10,8,5,0) 100%);
}
.b4-stories .wcard-cap { left: 18px; right: 16px; bottom: 16px; }
.sheet--mobile.b4-stories .wcard-cap { left: 16px; bottom: 14px; }

/* — W-D9 · Closing band air. The badge was absolutely
   centred at top:52% — dead on the third headline line,
   overlapping the dash and crowding the HOP IN underline.
   It now leaves the overlay and signs off, centred, under
   the headline; the headline's line-height opens .88 → .94
   (mobile .92 → .96; the mobile badge stays hidden, the
   v2 call). — */
.b4-stories .cta-band h2 { line-height: .94; }
.b4-stories .cta-badge {
  position: relative; left: auto; top: auto; transform: none;
  display: block; margin: 38px auto 0;
}
.b4-stories .cta-band { padding-bottom: 88px; }
.sheet--mobile.b4-stories .cta-band h2 { line-height: .96; }

/* — P-D3 · Gallery straddle re-balanced (desktop). The
   −192px pull put the hero strip (bottom:87px, z6) across
   the plates' art — it amputated plate 1's middle bottle
   cap and sliced plate 4's papaya in half. At −124px the
   straddle stays (plates still ride over the frame base)
   but the strip crosses only the plates' empty top margin
   (~viewBox y0–27); every plate's art now starts below it.
   Mobile gallery has no straddle and is untouched (the
   .sheet--mobile rule above this file wins there). — */
.p-gallery { margin-top: -124px; }

/* ════════════════════════════════════════════════════════════
   IMP4 — MOOD · CONTACT · LINKTREE improvement pass
   (Sheku's ruling: every page improves; inspection + before/
   after measurements in IMPROVE-LOG-IMP4.md. Copy untouched —
   craft only. All rules scoped to their pages so no other
   screen's cascade moves.)
   ════════════════════════════════════════════════════════════ */

/* — CONTACT · labels (the tracking fix) —
   The v2 label style inherits --tracking-label at −0.02em:
   at 11px uppercase the words run together ("WHAT
   DOYOUNEEDHELPWITH?"). PODA's label register: a size up,
   semibold, tracked OUT, and real air above the field. — */
.page-contact .field label,
.page-contact .field-label {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .13em; margin-bottom: 9px;
}
/* The required asterisk + legal bullets rode --red → poda
   yellow on the mint ground: nearly invisible. Palm reads. */
.page-contact .field .req,
.page-contact .form-legal .ast { color: var(--blue); }

/* — CONTACT · focus states (none existed: outline:none and no
   :focus rule anywhere). The active field's rule turns deep
   amber with a cream tint wash; its label warms to palm. — */
.page-contact .field input[type="text"]:focus,
.page-contact .field input[type="email"]:focus,
.page-contact .field select:focus,
.page-contact .field textarea:focus {
  border-bottom-color: var(--red-deep);
  box-shadow: inset 0 -3px 0 var(--red-deep);
  background: rgba(255, 243, 214, 0.28);
}
.page-contact .field:focus-within label,
.page-contact .field:focus-within .field-label { color: var(--blue); }

/* — CONTACT · check-set (8 chips, counts frozen) —
   Bigger boxes, real gap between box and word, tracked-out
   text, breathing rows; a hover wash so the set feels alive. */
.page-contact .check-set { gap: 14px 30px; padding-top: 12px; max-width: 540px; }
.page-contact .check {
  gap: 10px; font-size: 12.5px; letter-spacing: .05em; padding: 2px 0;
}
.page-contact .check .box { width: 16px; height: 16px; border-width: 2px; }
.page-contact .check input { width: 16px; height: 16px; }
.page-contact .check:hover .box { background: rgba(14, 122, 61, 0.14); }

/* — CONTACT · form rhythm —
   Groups get a touch more air now the labels carry weight;
   the zone's dead tail trims; the legal line steps up a size;
   the submit slab gains the site's hard ink offset shadow +
   a press response. — */
.page-contact .form-zone .field { margin-bottom: 40px; }
.page-contact .form-zone { padding-bottom: 84px; }
.page-contact .form-legal { font-size: 10px; letter-spacing: .04em; }
.page-contact .btn--submit {
  box-shadow: 5px 5px 0 rgba(18, 16, 13, 0.9);
  transition: transform .15s ease, box-shadow .15s ease;
}
.page-contact .btn--submit:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 rgba(18, 16, 13, 0.9); }
.page-contact .btn--submit:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 rgba(18, 16, 13, 0.9); }
.page-contact .btn--submit:focus-visible { outline: 3px solid var(--deep-blue); outline-offset: 3px; }

/* — MOOD · tile object treatment —
   The tiles carried no border and no shadow: the five
   near-black artworks dissolved into the page ground. A cream
   hairline rim + a soft drop shadow make every tile a pinned
   object on the board, desktop and mobile alike. (Canon for
   this page is no captions — the treatment is the object
   itself, not added text.) — */
.md-tile {
  border: 1px solid rgba(255, 243, 214, 0.16);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

/* — MOOD · desktop grid rhythm —
   The stagger stays (it IS the collage language); the row gap
   and the three largest offsets compress ≈15% to close the
   dead pockets right of t3, under t4 and between the rows. — */
@media (min-width: 761px) {
  .md-grid { gap: 72px 44px; }
  .md-t2 { margin-top: 100px; }
  .md-t3 { margin-top: 36px; }
  .md-t4 { margin-top: 148px; }
  .md-t6 { margin-top: -22px; }
  .md-t7 { margin-top: 76px; }
  .md-t10 { margin-top: 92px; }
  .md-t11 { margin-top: 26px; }
  .md-t12 { margin-top: 108px; }
}

/* — MOOD · mobile grid (8 tiles — the count stays) —
   Gentler offsets so the four pairs read as grouped on
   purpose rather than scattered by accident. — */
.md-grid--m .md-t3 { margin-top: 24px; }
.md-grid--m .md-t4 { margin-top: -10px; }
.md-grid--m .md-t7 { margin-top: 18px; }

/* — LINKTREE · social discs —
   The 8 bare glyphs (drawn icons + text glyphs at uneven
   optical weights) become uniform palm-ringed discs with a
   fill-on-hover. The row wraps centred at narrow widths
   rather than overflowing. — */
.page-linktree .lt-socials {
  flex-wrap: wrap; gap: 4px; margin: 26px 0 4px;
}
.page-linktree .lt-socials a {
  width: 31px; height: 31px;
  border: 1.5px solid var(--blue); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.page-linktree .lt-socials svg { width: 17px; height: 17px; }
.page-linktree .lt-socials a:hover {
  background: var(--blue); color: var(--paper-card); transform: translateY(-2px);
}
.page-linktree .lt-socials a:focus-visible {
  outline: 2px solid var(--deep-blue); outline-offset: 2px;
}

/* — LINKTREE · divider + card + buttons —
   The card grounds itself with a soft deep-palm shadow; the
   buttons take the same hard ink offset shadow as the contact
   submit (the site's sticker language) with hover lift, press
   travel and a focus ring; rhythm opens by a beat. — */
.page-linktree .lt-card { box-shadow: 0 24px 48px rgba(10, 77, 42, 0.20); }
.page-linktree .lt-divider { margin: 24px 4px 28px; }
.page-linktree .lt-btn {
  padding: 19px 10px 17px; margin-bottom: 13px;
  box-shadow: 4px 4px 0 rgba(18, 16, 13, 0.85);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.page-linktree .lt-btn:hover { background: var(--red-deep); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(18, 16, 13, 0.85); }
.page-linktree .lt-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(18, 16, 13, 0.85); }
.page-linktree .lt-btn:focus-visible { outline: 3px solid var(--deep-blue); outline-offset: 3px; }
.page-linktree .lt-foot { margin-top: 24px; }

/* ════════════════════════════════════════════════════════════
   IMP1 — HOME IMPROVEMENT PASS (Sheku: every page improves;
   home first). Visual/structural craft only — copy untouched.
   EVERY rule is scoped under body.page-home (class added to
   home.html + home-mobile.html) so no other page can move.
   Inspection + before/after measurements: IMPROVE-LOG-IMP1.md.
   ════════════════════════════════════════════════════════════ */

@media (min-width: 761px) {
  /* — Hero: rebalance the right column (finding 1). The bus
     grows into its 300px column (230 → 256) and the stack's
     rhythm opens (22/18/24 → 34/26/34) while the frame's bottom
     padding tightens 54 → 40: the column composes the full
     height instead of dying above the strip. — */
  body.page-home .hero-side .char-slot { width: 256px; margin-bottom: 34px; }
  body.page-home .hero-side h3 { margin-bottom: 26px; }
  body.page-home .hero-side .standfirst { margin-bottom: 34px; }
  body.page-home .hero-main { padding-bottom: 40px; }

  /* — ALL ABOARD band: whole letters, deliberate tuck
     (finding 2). Type steps 23vw → 21vw and the band gains
     40px of top air so NO glyph top is cut; the panel's overlap
     eases −6.5vw → −1.7vw so the sheet tucks only the letters'
     feet (~12% of cap height). The bus-stop figure re-anchors
     so its pole still plants on the panel's top edge. — */
  body.page-home .greet { padding-top: 40px; }
  body.page-home .greet-set { font-size: 21vw; }
  body.page-home .panel--blush { margin-top: -1.7vw; }
  body.page-home .greet .balloon-fig { bottom: -28px; }

  /* — Services intro: legibility (finding 3). 13px mono with
     negative tracking → 15px, neutral tracking, wider measure
     (430 → 500) so the text occupies its field. — */
  body.page-home .services .intro {
    font-size: 15px; letter-spacing: 0.01em;
    line-height: 1.62; max-width: 500px;
  }
  body.page-home .services h2 { margin-bottom: 30px; }

  /* — Ghost badge: composed position (finding 6). Centred on
     the seam between "To Whisper," and "Meet The Crew" — the
     same joint the mobile layout parks it in, in flow — and
     eased 310 → 296 so "Behind The" stays nearly clean. — */
  body.page-home .char-badge {
    top: 51%; width: 296px; height: 296px;
  }

  /* — Closing panel: the conductor takes his size
     (finding 7). 190 → 232 wide, settled into the notch
     between the two type lines (right 21%/top 15% →
     right 16%/top 13%). — */
  body.page-home .sky-panel .wn-char {
    width: 232px; right: 16%; top: 13%;
  }
}

/* — Services sheet finish (finding 4): round the sheet's
   bottom corners (14px, matching its top + the site frame
   radius) so where its bottom edge passes behind the rail
   cards it reads as a designed sheet, not a hard notch.
   Rail geometry (−148 tuck / overhang) is untouched.
   Applies at both widths. — */
body.page-home .panel--blush { border-radius: 14px; }

/* — Crew rail start (finding 5): the negative track margins
   (−70 desktop / −120 mobile) clipped Kadi — on mobile the
   clipped 80px sat before the scroll origin, unreachable
   forever. Track now starts at its own 40px padding: Kadi
   whole at the left, the rail still bleeds off the right
   like every rail on the site. — */
body.page-home .team-track { margin-left: 0; }

/* — Crew descriptors (finding 5): the page's smallest text
   (11px, negative tracking) → 12.5px, neutral-positive
   tracking, a touch more leading and measure. — */
body.page-home .member p {
  font-size: 12.5px; letter-spacing: 0.02em;
  line-height: 1.5; max-width: 220px;
}

@media (max-width: 760px) {
  /* — Mobile hero: tighten the H1 → bus gap (finding 1).
     111px of perceived gap = 40 flex gap + 26 slot margin +
     svg whitespace; the two margins give back 32px. — */
  body.page-home .hero--m .hero-side { margin-top: -16px; }
  body.page-home .hero--m .hero-side .char-slot { margin-top: 10px; }

  /* — Mobile closing panel (finding 7): "WHERE TO" at 17vw
     measured 380 wide in a 366 panel — the O was sliced by
     the panel edge. 15.2vw ≈ 340 wide: the word fits whole,
     as it does on desktop. — */
  body.page-home .sky-panel .whats-next { font-size: 15.2vw; }

  /* — Mobile crew descriptors: one more step up on the
     small screen (form text precedent: 13/16px). — */
  body.page-home .member p { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════
   IMP3 — ABOUT · STORIES · STORY IMPROVEMENT PASS
   (Sheku: every page improves; inspect every section.)
   Inspection + before/after measurements: IMPROVE-LOG-IMP3.md.
   COPY FROZEN — every rule below is colour, size, spacing or
   treatment only. Scoped to IMP3's pages: .ab-* classes exist
   only on About; story/stories rules ride those pages' own
   components (the shared .cta17-badge is NOT touched — the
   About band carries the cta17--about modifier for its seat).
   ════════════════════════════════════════════════════════════ */

/* — F1 · About services list: breathe at the column's rhythm.
   Was 18px above / 9px between items against the column's 16px
   paragraph rhythm — the eight items read as a dense block.
   Now 26px in, 13px between, a touch more line-height. — */
.ab-svc { margin-top: 26px; margin-bottom: 10px; }
.ab-svc li { margin-bottom: 13px; line-height: 1.5; }

/* — F2 · About facts register: restore its intended voice.
   T3 specified 11.5px mono, but .stext p (0,1,1) outranks
   .ab-facts (0,1,0), so the line has been rendering at body
   size (15px desktop / 18.5px mobile) and merging into the
   list's tail (9px gap). This body.elementor-page-114 (0,2,1) restores the
   specified size and gives the sign-off real air: 24px above,
   wrapped lines at 1.75. — */
.stext p.ab-facts {
  font-size: 11.5px; line-height: 1.75; margin-top: 24px;
}

/* — F3 · About closing band: re-seat the coin badge.
   The v2 device is a SMALL coin pinned at a line seam
   (~1.2 line-heights); PODA's inherited 150px badge runs ~1.9
   line-heights over solid ink type and punched the middles
   out of "PROBABLY" and "SOMEWHERE." (150×122px + 150×28px
   of overlap, measured). At 104px, centred on the seam
   between the headline's wrapped middle lines, it stamps
   ~2 letters a line — the device, at the reference's
   proportion — and clears the "SO HOP IN" line entirely. — */
.cta17--about .cta17-badge {
  width: 104px; height: 104px; top: 48.5%;
}

/* — F4 · Stories date: give it the card's own furniture.
   TF added the date to close a blocker (margin-top:14px, the
   meta's typography, nothing else) and it read as a footnote
   to the excerpt. It now closes the card under a dotted rule —
   the same rule language as .sc-rule between meta and title —
   with air on both sides. Words, size and colour unchanged. — */
.story-card .sc-date {
  margin-top: 22px; padding-top: 13px;
  border-top: 1px dotted rgba(18, 16, 13, 0.25);
}

/* — F5 · Story disc: rebalance against the article column.
   Was 440×440 at left:-580 / top:-190 — two-thirds the column
   width, towering over two sections from the left margin.
   At 330×330, left:-468 / top:-118 it is a medallion anchored
   at its section's head ("The shelf is a street."), holding
   the same 130px+ clearance from the text column. — */
.story-sec--disc .story-disc {
  width: 330px; height: 330px; left: -468px; top: -118px;
}

/* — F6 · Story links: deep palm, yellow kept as the underline.
   Yellow #FFC400 on the mint ground measures ~1.55:1 — the
   closing "Hop in!" and any in-copy link washed out. The text
   now rides deep palm (--deep-blue, ~5.5:1) with PODA yellow
   as a 2px underline accent: the brand colour stays in the
   treatment, the words become readable. (Bible §6.4 mandates
   yellow links; this answers VERIFY-PODA's contrast nit the
   way the verifier itself proposed — a deep-palm link.) — */
.story-body p a,
.story-close .lets-talk {
  color: var(--deep-blue);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.story-body p a:hover,
.story-close .lets-talk:hover { color: var(--blue); }

/* — F7 · Story FAQ: group the pairs.
   Question→answer was 12px and answer→next-question 18px
   (collapsed margins) — near-even spacing blurred the pairs.
   The next question now takes 30px of air (margin collapse
   makes the effective gap 30px), so each bar visibly owns
   its answer. First bar (after the H2) is untouched. — */
.story-body p + .faq-q { margin-top: 30px; }

/* ════════════════════════════════════════════════════════════
   PC3 — PREMIUM CLEANUP · MOOD · CONTACT · LINKTREE
   (Sheku's 2026-10-18 cleanup ruling: raise the finish to
   the reference's level — "not halfway slop". WORDS FROZEN:
   every rule below is colour, spacing, treatment or depth.
   Inspection + before/after measurements: CLEANUP-LOG-PC3.md.
   IMP4's gains are kept and refined, never removed. All
   rules are page-scoped so no other screen's cascade moves.)
   ════════════════════════════════════════════════════════════ */

/* — C1 · Contact form-zone grid: palm, not the base file's
   GC-royal tint. screens-v2 paints the zone's grid with
   rgba(20,40,230,.07) and PODA never restated it (the hero
   frame's grid IS palm) — the zone read as a subtly foreign
   panel against its own hero. Same recipe as the frame:
   palm lines over the mint. The mobile hero's grid carries
   the same royal tint at .10 — restated too. — */
.page-contact .form-zone {
  background:
    linear-gradient(rgba(14, 122, 61, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 122, 61, 0.10) 1px, transparent 1px),
    var(--ink-soft);
  background-size: var(--grid-cell) var(--grid-cell), var(--grid-cell) var(--grid-cell), 100% 100%;
}
.page-contact .contact-hero--m {
  background-image:
    linear-gradient(rgba(14, 122, 61, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 122, 61, 0.12) 1px, transparent 1px);
}

/* — C5 · Contact headline depth. The reference headline is a
   deep saturated flood; PODA's H1 rode mid palm #0E7A3D and
   read flat over the busy balloon field. It now rides deep
   palm #0A4D2A — the page's own text colour, in-palette —
   at both widths. The serif sub keeps mid palm, so the
   hierarchy sharpens too. — */
.page-contact .contact-hero h1,
.page-contact .contact-hero--m h1 { color: var(--deep-blue); }

/* — C2 · Placeholders at full register. The base sets
   placeholder opacity .55 — on the mint the prompts washed
   out ("COMPANY / STUDIO", "TELL US WHERE YOU'RE
   HEADING…"). The reference's prompts read at near-full
   strength; .75 keeps the prompt/input hierarchy without
   the wash. Colour unchanged (deep palm). — */
.page-contact .field input::placeholder,
.page-contact .field textarea::placeholder { opacity: .75; }

/* — C3 · Focus finish (IMP4's states kept, refined). The
   active field keeps IMP4's amber rule + cream wash; it
   gains a soft cream halo outside the rule and every state
   change now eases over .18s instead of snapping — the
   difference between a switch and a finish. — */
.page-contact .field input[type="text"],
.page-contact .field input[type="email"],
.page-contact .field select,
.page-contact .field textarea {
  transition: border-bottom-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.page-contact .field input[type="text"]:focus,
.page-contact .field input[type="email"]:focus,
.page-contact .field select:focus,
.page-contact .field textarea:focus {
  box-shadow: inset 0 -3px 0 var(--red-deep), 0 0 0 5px rgba(255, 243, 214, 0.18);
}

/* — C4 · Form-zone tail (desktop). IMP4 trimmed the dead
   mint run 96 → 84; the reference ends its zone close
   under the legal line. 84 → 72 on desktop; mobile keeps
   its IMP4 84 (its tail measured right). — */
@media (min-width: 761px) {
  .page-contact .form-zone { padding-bottom: 72px; }
}

/* — M3 · Mood tile presence. IMP4's rim + shadow made the
   tiles objects; the reference posters carry more weight
   than that. Rim .16 → .20, shadow 0 16/32 @ .35 →
   0 18/36 @ .42 — same treatment, one step deeper, both
   widths. — */
.md-tile {
  border-color: rgba(255, 243, 214, 0.20);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
}

/* — M4 · Mood outro tail. The grid-to-CTA run tightens:
   outro bottom padding 84 → 72 desktop, 52 → 46 mobile. — */
@media (min-width: 761px) {
  .md-outro { padding: 30px 20px 72px; }
}
.md-outro--m { padding-bottom: 46px; }

/* — L1 · Linktree field: palm grid + a fuller field. The
   field's grid is the base file's GC-royal tint
   (rgba(20,40,230,.10) computed) — restated palm, the
   contact C1 hygiene. And where the reference's field is
   a dense wall of balloons, ours were sparse: the four
   corner-anchor balloons grow ~13% so the field reads
   full at the card's edges. Positions unchanged; the
   card (z-2) still sits clean over them. — */
.page-linktree .lt-field {
  background-image:
    linear-gradient(rgba(14, 122, 61, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 122, 61, 0.12) 1px, transparent 1px);
}
.page-linktree .lt-b1 { width: 70px; }
.page-linktree .lt-b2 { width: 82px; }
.page-linktree .lt-b5 { width: 66px; }
.page-linktree .lt-b6 { width: 72px; }

/* — L2 · Linktree card seat. IMP4 grounded the card with a
   soft deep-palm shadow; one step deeper (0 24/48 @ .20 →
   0 28/56 @ .28) so the door sits IN the field rather
   than hovering over it. Border unchanged (2px palm). — */
.page-linktree .lt-card { box-shadow: 0 28px 56px rgba(10, 77, 42, 0.28); }

/* — L3 · Linktree name depth — the same move as the
   contact H1 (C5): mid palm → deep palm, full presence. — */
.page-linktree .lt-h1 { color: var(--deep-blue); }

/* — L4 · Linktree button presence. The reference's slabs
   are the card's main event; ours step up one size —
   type 19 → 20px, padding 19/17 → 20/18, tracking
   .4 → .6px. IMP4's hard ink shadow + hover/press/focus
   behaviour ride along untouched (the shadow grows with
   the slab via the existing hover states). — */
.page-linktree .lt-btn {
  font-size: 20px; letter-spacing: .6px;
  padding: 20px 10px 18px;
}

/* === PC2 premium cleanup: about/stories/story === */
/* PC2 (2026-10-18) — finish pass on Sheku's ruling: raise About/Stories/Story
   to the reference's standard of finish. Words frozen; palette/type identity
   kept. Detail per fix in CLEANUP-LOG-PC2.md. All rules page-scoped. */

/* F-A1 · About chute presence: 215px → 238px, lifted — the right column
   breathes tighter against the sub-headline (desktop only; --m untouched). */
@media (min-width: 761px) {
  .ab-chute { width: 238px; top: 148px; }
}

/* F-A4 · Scene depth: a gentle 3-stop mint gradient on the About scene world
   replaces the dead-flat field (same family, no new colour). */
.ab-world {
  background: linear-gradient(180deg, #7ED3B2 0%, #77D0AC 55%, #6CC7A2 100%);
}

/* F-A6 · Services names to deep palm: 3.06:1 → 5.62:1 on mint. The Fraunces
   600 face still separates name from description. */
.ab-svc strong { color: var(--deep-blue); }

/* F-S1 · Stories filter chips at the work page's presence (desktop; the
   mobile sheet already runs 15px chips). Inactive hover gets a mint wash. */
@media (min-width: 761px) {
  .b4-stories .filter-chips .chip {
    font-size: 14px; padding: 10px 18px; border-width: 1.5px;
  }
}
.b4-stories .filter-chips .chip { transition: background-color .2s ease, color .2s ease; }
.b4-stories .filter-chips .chip:not(.chip--active):hover { background: rgba(126, 211, 178, .16); }

/* F-S2 · Caps tracking repair: --tracking-label computes NEGATIVE (-0.02em)
   on this page's caps registers — the fused-letters disease IMP4 cured on
   Contact. Track them open instead. */
.b4-stories .stories-intro .intro-copy { letter-spacing: .06em; }
.b4-stories .story-card .excerpt { letter-spacing: .05em; }
.b4-stories .sc-meta,
.b4-stories .story-card .sc-date,
.b4-stories .say-hi a { letter-spacing: .06em; }

/* F-S3 · Grid rhythm: the story-article rule .story-col{padding:118px 10px 0}
   also matches the grid's column wrappers and stacks a phantom 118px over
   the grid's own padding (chips→first card measured 232px vs mobile 86px).
   Zero it inside the stories grid only, and settle the grid pad at 48px. */
.b4-stories .story-grid .story-col { padding-top: 0; }
.b4-stories .story-grid { padding-top: 48px; }

/* F-S4 · Card object finish: resting depth (deep-palm tinted shadow), hover
   lift, keyboard focus ring, and a hairline inset ring on the covers. Cards
   stay flat-tint at rest — the shadow is furniture, not a redesign. */
.b4-stories .story-card {
  box-shadow: 0 14px 28px rgba(6, 46, 24, .20);
  transition: transform .25s ease, box-shadow .25s ease;
}
.b4-stories .story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 38px rgba(6, 46, 24, .28);
}
.b4-stories .story-card:focus-visible {
  outline: 3px solid var(--red); outline-offset: 3px;
}
.b4-stories .story-card .cover { position: relative; }
.b4-stories .story-card .cover::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(18, 16, 13, .16); pointer-events: none;
}

/* F-T1 · Story reading comfort: leading 1.55 → 1.66, paragraph gap 18 → 20px,
   H2 air 58/20 → 64/22 on desktop (mobile keeps its 48px H2 top). Family,
   size and the 660px column are bible + disc geometry — untouched. */
.page-story .story-body p { line-height: 1.66; margin-bottom: 20px; }
@media (min-width: 761px) {
  .page-story .story-body h2 { margin: 64px 0 22px; }
}

/* F-T2 · Story meta register: same negative-tracking repair. */
.page-story .story-meta { letter-spacing: .06em; }

/* === PC1 premium cleanup: home/work/project === */
/* PC1 (2026-10-18) — finish pass on Sheku's ruling: raise Home/Work/Project
   to the reference's standard of finish, words frozen. Full section-by-
   section comparison + evidence in CLEANUP-LOG-PC1.md. Every rule scoped
   to these pages (body.page-home / .b4-stories / project-only classes).
   Headline finding: full-page stitches paint the FIXED backdrop collage
   only at the page top, so transparent sections read "clean" in stitches
   while a true viewport (the preview iframes, any real browser) shows the
   collage through them. These rules paint the grounds the design always
   intended. */

/* — H1 · Home ghost/manifesto/crew zone: solid warm black (was
   transparent — yellow crew names sat on mint at ~1.6:1, the collage
   road struck the descriptors and the backdrop bus covered ~2 letters
   of Tombo's name; VERIFY-IMPROVE §4 nit 1 closes by construction).
   Cream/ink/yellow on #12100D: 17.22 / 11.89. Desktop + mobile. — */
body.page-home .zone--grid { background: #12100D; }

/* — H2 · Home featured rail surround: solid black, so the cards hang
   over the section's own ground (reference behaviour), not the sky. — */
body.page-home .rail-wrap { background: #12100D; }

/* — C1 · Home closing panel: conductor presence 232 → 254px against
   the 19vw type (desktop; IMP1's right/top stand). — */
@media (min-width: 761px) {
  body.page-home .sky-panel .wn-char { width: 254px; }
}

/* — W1 · Work gridzone: paint the yellow the H1 was designed on (was
   transparent — a cloud ellipse struck "Twenty-four" and the sun disc
   sat behind "One" in true viewport). IMP2's ink grid lines stay. — */
.b4-stories .work-gridzone { background-color: #FFC400; }

/* — W2 · Work flood: paint the yellow (was transparent — the lede was
   struck by a collage house on desktop; on mobile the cream lede sat
   on mint at ~1.3:1 with the sun disc over the BRANDING chip). One
   continuous yellow panel, strip → closing band, as the reference's
   red flood runs. — */
.b4-stories .work-flood { background-color: #FFC400; }

/* — W3 · Filter chips: the logged 1.5px border actually renders
   (VERIFY-IMPROVE §5 nit — a base rule was winning the cascade). — */
.b4-stories .chip { border-width: 1.5px; }

/* — W6 · Kinetic stack tones lifted for depth: the mid amber was the
   system's weakest tone (2.38:1 on yellow), the dark row read muddy.
   Still tone-on-tone against the rows' yellow/black grounds. — */
.b4-stories .ws-row--dark { color: #7A5800; }
.b4-stories .ws-row--mid { color: #B08200; }

/* — W4 · Closing band: top air 118 → 84px (desktop) — the empty field
   above the headline read as dead space vs the reference's tighter
   band. IMP2's 88px bottom stands. — */
@media (min-width: 761px) {
  .b4-stories .cta-band { padding-top: 84px; }
}

/* — W5 · Closing badge: 150 → 196px sign-off presence. The glyph
   itself is repainted ink-on-yellow in work.html (was cream on
   yellow, ~1.1:1 — an empty-looking dashed ring). Mobile keeps the
   badge hidden (screens-v2 rule stands; display untouched). — */
.b4-stories .cta-badge { width: 196px; height: 196px; }

/* — J1 · Mobile work lede → ink, matching the desktop lede. IMP2's
   cream assumed the collage hills behind it; on the painted yellow
   flood (W2) cream is ~1.35:1. Colour/contrast only — no words.
   Judgement call, flagged in CLEANUP-LOG-PC1.md. — */
.sheet--mobile.b4-stories .work-lede { color: #12100D; }

/* — P1 · Project mobile gallery: the straddle the desktop has. The
   mobile sheet rule set margin-top:+26px, so the plates started
   below a collage gap; −40px pulls plate 1 onto the hero frame's
   base, clear of the intro's last line (verified in after renders).
   .p-gallery exists only on the project pages. — */
.sheet--mobile .p-gallery { margin-top: -40px; }

/* ════════════════════════════════════════════════════════════
   PF — BLOCKER FIXES for the VERIFY-CLEANUP verdict (B1–B3).
   Geometry and paint only; every word frozen. B2 + B3 ride
   in the mood/story SVGs themselves; B1 is the rule below.
   Before/after measurements: FIX-LOG-PF.md.
   ════════════════════════════════════════════════════════════ */

/* === PF blockers fix === */

/* — B1 · Contact-mobile form wrap: the GC royal grid still
   rendered under the palm form-zone — screens-v2's
   .contact-m-wrap paints linear-gradient(rgba(20,40,230,.07)
   1px, …) lines and PC3's C1 restated the hero and the
   form-zone but missed the wrap. Restated here in the C1
   recipe: palm lines at the form-zone alpha (.10) over the
   same mint ground (var(--ink-soft)), mobile cell size
   kept — one grid language across hero, zone and wrap,
   and no GC tint anywhere on the page. — */
.page-contact .contact-m-wrap {
  background:
    linear-gradient(rgba(14, 122, 61, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 122, 61, 0.10) 1px, transparent 1px),
    var(--ink-soft);
  background-size: var(--grid-cell-mobile) var(--grid-cell-mobile), var(--grid-cell-mobile) var(--grid-cell-mobile), 100% 100%;
}

/* ════════════════════════════════════════════════════════════
   MW — MOTION POLISH: filter transitions on the Work +
   Stories pages. The base filter scripts (in the HTML) stay
   the source of truth for WHICH cards show — the companion
   MW script only adds/removes the classes below, and every
   animation is transform/opacity, so card boxes never move.
   Outgoing cards fade/shrink (150ms) while still laid out
   (the [hidden].mw-exiting rule below keeps them painted
   until the exit lands); incoming cards sit invisible
   (.mw-pre) until the exit completes, then rise + fade in
   with a 40ms stagger (.mw-in); cards visible on both sides
   dip softly as the columns/grid settle (.mw-in-soft).
   prefers-reduced-motion: the MW script adds no classes at
   all (filtering is instant) and the media query below
   kills the animations as a second guard.
   Rails: probed 2026-10-18 — no horizontally scrollable
   rail exists on these four pages (the site's rails live on
   Home/About), so no scroll-snap rules are needed here and
   no layout geometry changes. Measurements: MOTION-LOG-MW.md.
   ════════════════════════════════════════════════════════════ */

/* === MW motion polish === */

.b4-stories .wcard.mw-pre,
.b4-stories .story-card.mw-pre { opacity: 0; }

.b4-stories .wcard[hidden].mw-exiting,
.b4-stories .story-card[hidden].mw-exiting {
  display: block;
  animation: mw-out 150ms ease-in forwards;
}
.b4-stories .wcard.mw-in,
.b4-stories .story-card.mw-in {
  animation: mw-in 340ms cubic-bezier(.22, .61, .21, 1) backwards;
}
.b4-stories .wcard.mw-in-soft,
.b4-stories .story-card.mw-in-soft {
  animation: mw-in-soft 260ms ease-out backwards;
}
@keyframes mw-out {
  to { opacity: 0; transform: translateY(6px) scale(.96); }
}
@keyframes mw-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mw-in-soft {
  from { opacity: .45; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .b4-stories .wcard.mw-exiting,
  .b4-stories .wcard.mw-in,
  .b4-stories .wcard.mw-in-soft,
  .b4-stories .story-card.mw-exiting,
  .b4-stories .story-card.mw-in,
  .b4-stories .story-card.mw-in-soft { animation: none; }
}

/* === PF2 skeleton tint zeroing === */
/* VERIFY-DEPTH §7.1: two grid tints inherited from the shared
   screens-v2 skeleton still computed foreign colours. Restated
   here in Poda tones at the SAME alpha and 1px weight — colour
   only; background-size (28px mobile / 40px band) and every
   position come from the base rules untouched.
   (a) .proj-body mobile grid over the warm-ink ground: GC blush
       rgba(238,206,198,0.05) → warm cream rgba(255,243,214,0.05)
       (the same blush→cream translation as .zone--grid above).
   (b) .cta17 closing-band grid over poda yellow: GC near-black
       rgba(15,15,15,0.07) → warm ink rgba(18,16,13,0.07)
       (the house ink-on-yellow grid tone, cf. .frame--red). */
.sheet--mobile .proj-body {
  background-image:
    linear-gradient(rgba(255,243,214,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,243,214,0.05) 1px, transparent 1px);
}
.cta17 {
  background-image:
    linear-gradient(rgba(18,16,13,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,16,13,0.07) 1px, transparent 1px);
}
/* === B4 · WP adaptations (Stories) === */
.b4-stories { position: relative; }
@media (max-width: 760px) {
  .b4-stories .stories-intro { padding-top: 64px; }
  .b4-stories .stories-intro h1 { font-size: 34px; }
  .b4-stories .stories-intro .intro-copy { font-size: 15px; max-width: 340px; }
  .b4-stories .story-grid { grid-template-columns: 1fr; padding: 40px 20px 0; }
}

/* === WF2 · Stories mobile grid — the design's mobile sheet values
   (screens-v2.css .sheet--mobile set) under the mobile breakpoint.
   The port never received the mobile sheet: at <=760px the grid
   stayed 3-up, cards squeezed to ~81px, and headline words spilled
   past the card boxes, driving document scrollWidth +99..+136.
   Desktop untouched. (The word wall's containment — .word-wall /
   .wall-row overflow:hidden, design section 19 — is already in
   this cascade and verified live; it was not the scroll driver.) === */
@media (max-width: 760px) {
  .stories-body .story-grid { grid-template-columns: 1fr; padding: 46px 20px 0; gap: 24px; }
  .stories-body .story-card { border-radius: 28px; padding: 26px 22px 30px; }
  .stories-body .story-card h3 { font-size: 34px; }
}/* End custom CSS */