/* ============================================================================
   css/shojo.css — Shojo Editorial design tokens + primitives
   ----------------------------------------------------------------------------
   The single source of truth for the rebrand. Reference: docs/rebrand-reference.png
   (values eyedropped from it, then contrast-checked — see §1).

   OPT-IN BY PAGE. Everything here is scoped to :root[data-skin="shojo"][data-mode="gremlin"], so a
   page only changes when its <html> gains data-skin="shojo". Pages that haven't
   migrated keep their old inline tokens untouched. That scope also gives these
   rules specificity (0,4,0), which beats both css/site.css and the per-page
   inline :root[data-mode][data-theme] blocks (both (0,3,0)) — so migrating a
   page does NOT require surgically deleting its inline token block first.

   ROLLOUT PROTOCOL (per page):
     1. add data-skin="shojo" to <html>
     2. delete the page's inline :root[data-mode][data-theme] token block
     3. done — everything re-colors through the legacy aliases in §3

   RULE: no page or component may hardcode a hex value. Consume the tokens.
   ============================================================================ */


/* ── 0. Type ────────────────────────────────────────────────────────────────
   2026-09-30: display face switched Fraunces -> Source Serif 4 (Sara: Fraunces'
   f crossbar and top-heavy s read blurry). SourceSerif4-display.woff2 = fontsource
   latin wght 200..900, subset to the same 104 codepoints as the Fraunces file (28.9KB).
   Fraunces files stay in fonts/ unused. History of the Fraunces subset:
   Self-hosted, latin-subset, axis-pinned (tools note in TODO-assets.md):
     Fraunces  65.8KB -> 21.3KB — opsz pinned to 9, the TEXT end of the axis:
               sturdy, low stroke contrast, sits with Nunito. (It was pinned to
               144, the display end, where the thins go hairline — that is what
               read "way too thin". opsz is a real axis, not a size hint.)
               wght stays variable 300..900.
               f glyph edited 2026-09-30: left arm of the crossbar shortened to 45%
               (it poked into the letter before). tools/fix_fraunces_f.py; original in fonts/_attic/.
     Caveat    72.8KB -> 38.8KB — pinned to wght 500. Was already loaded from
               the Google CDN by index.html; self-hosting drops that round trip.
   Display face only. Hairline fashion serifs are a trap at body sizes, so body
   copy keeps Nunito/DM Sans (see §4).
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Source Serif 4';
    src: url('/fonts/SourceSerif4-display.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

/* --nav-h before JS (2026-10-02). page-base.js / site.js write the real nav
   height inline at the END of <body>, but several pages pad <main> by
   calc(var(--nav-h) + ...) and not all of them load site.css (the only place
   that defined a default). With it undefined, the calc is invalid: <main>
   painted flush under the nav, then jumped down ~90px (accessibility, toolshed,
   everything). Values = measured rendered nav height per mode/breakpoint, so
   the JS write is a no-op on first paint. */
:root[data-skin="shojo"] { --nav-h: 57px; }
:root[data-skin="shojo"][data-mode="pro"] { --nav-h: 56px; }
@media (min-width: 769px) {
    :root[data-skin="shojo"] { --nav-h: 71px; }
    :root[data-skin="shojo"][data-mode="pro"] { --nav-h: 68px; }
}

/* Metric-matched stand-in for Source Serif 4 while it loads (font-display: swap).
   Plain Georgia set the same words ~11% narrower, so a heading near its line
   width wrapped one way on first paint and re-wrapped when the real face
   landed. size-adjust = SS4 wght-700 avg width / Georgia avg width
   (0.4946 / 0.4458, capsize letter-frequency weighting); ascent/descent are
   SS4's hhea (1036 / 335) divided by that same factor. Bold is synthesized
   from regular Georgia, which keeps advances unchanged. */
@font-face {
    font-family: 'Source Serif 4 Fallback';
    src: local('Georgia');
    font-weight: 200 900;
    size-adjust: 110.9%;
    ascent-override: 93.4%;
    descent-override: 30.2%;
    line-gap-override: 0%;
}

/* Same idea for the gremlin body face. Nunito wght-400 avg width 0.4521 vs
   Arial 0.4458 (capsize weighting) -> size-adjust 101.4%; ascent/descent are
   Nunito's hhea (1011 / 353) over that factor. */
@font-face {
    font-family: 'Nunito Fallback';
    src: local('Arial'), local('ArialMT');
    font-weight: 200 1000;
    size-adjust: 101.4%;
    ascent-override: 99.7%;
    descent-override: 34.8%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Caveat Note';
    src: url('/fonts/Caveat-note.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}


/* ── 1. Palette ─────────────────────────────────────────────────────────────
   Two tiers per hue, because the mockup's rose is 2.32:1 on cream — it fails
   even the 3:1 large-text floor. Same split DESIGN.md already established for
   gremlin pastel pink (#F4A7C3 decorative / #9C2D63 ink).

     --<hue>        identity value. DECORATION ONLY unless noted.
     --<hue>-ink    the accessible text value. Safe at any size.
     --<hue>-wash   the pale blob/fill value.

   Contrast vs --paper (measured, light theme):
     ink      11.62:1   body ✓        rose       2.32:1   DECOR ONLY
     ink-2     7.21:1   body ✓        rose-ink   5.55:1   body ✓
     sage      1.43:1   DECOR ONLY    peri       3.72:1   large text only
     sage-ink  4.51:1   body ✓        peri-ink   5.71:1   body ✓
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"][data-theme="light"] {
    /* 2026-09-29: Sara kept her ORIGINAL site palette (matches the business
       card) and took only the shojo placement. Values are the classic gremlin
       tokens; contrast vs --paper #F6F1F6: ink 9.6, ink-2 7.5, rose-ink 6.3,
       peri-ink 4.9, sage-ink 4.5 (all AA body); rose/peri 1.7 = DECOR ONLY.
       The July eyedropped shojo values live in tag archive/shojo-editorial-2026-07. */
    --paper:      #F6F1F6;   /* gremlin --bg */
    --paper-2:    #FFFFFF;
    --paper-3:    #E3D3EE;

    --ink:        #4A3560;   /* gremlin --text */
    --ink-2:      #5E4278;

    --rose:       #F4A7C3;   /* gremlin --pink */
    --rose-ink:   #9C2D63;   /* the DESIGN.md ink pink */
    --rose-wash:  #FFDDEB;   /* first stop of the old desk-mat gradient */

    --peri:       #89C4E1;   /* gremlin --blue */
    --peri-ink:   #1F6F9E;
    --peri-wash:  #CFE7FB;   /* last stop of the old desk-mat gradient */

    --sage:       #A8E0C4;   /* gremlin --mint */
    --sage-ink:   #3F7A5E;
    --sage-wash:  #DDF3E8;

    --hairline:   rgba(74, 53, 96, 0.16);
    --nav-rule:   #C4A8E0;   /* the purple line under the nav (was the squiggle's stroke) */
    --lift:       rgba(74, 53, 96, 0.10);
}

/* Night sky, not neon. Still paper-and-ink: the cream and the ink swap places
   and the accents go moonlit. Everything below clears 6.7:1 on --paper, so the
   two-tier split relaxes here — rose is safe as text in the dark. */
:root[data-skin="shojo"][data-mode="gremlin"][data-theme="dark"] {
    /* Original gremlin dark palette. Everything clears 8.9:1 on --paper. */
    --paper:      #141019;   /* gremlin dark --bg */
    --paper-2:    #1E1726;
    --paper-3:    #2F2540;

    --ink:        #F0D6FF;   /* 14.1:1 */
    --ink-2:      #C4A8E0;   /*  9.0:1 */

    --rose:       #F4A7C3;   /* 10.0:1 */
    --rose-ink:   #F4A7C3;
    --rose-wash:  #3A2342;   /* old dark mat, first stop */

    --peri:       #89C4E1;
    --peri-ink:   #9FD2EC;   /* 11.5:1 */
    --peri-wash:  #272250;   /* old dark mat, middle stop */

    --sage:       #A8E0C4;
    --sage-ink:   #B8E6CF;
    --sage-wash:  #1F3029;

    --hairline:   rgba(240, 214, 255, 0.16);
    --nav-rule:   #C4A8E0;   /* the purple line under the nav (was the squiggle's stroke) */
    --lift:       rgba(0, 0, 0, 0.45);
}


/* ── 2. Non-colour tokens ───────────────────────────────────────────────── */

/* Fraunces' "ff"/"fi" ligatures render with the two stems at different heights
   ("stuff" looked lopsided). Turn standard ligatures off site-wide in shojo gremlin. */
:root[data-skin="shojo"][data-mode="gremlin"] body {
    font-variant-ligatures: no-common-ligatures;
}

:root[data-skin="shojo"][data-mode="gremlin"] {
    --font-display: 'Source Serif 4', 'Source Serif 4 Fallback', 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-note:    'Caveat Note', 'Caveat', cursive;

    /* Display type wants tight leading and a whisper of negative tracking. */
    --display-leading: 0.86;
    --display-track:  -0.015em;

    /* The wordmark is fluid across the whole viewport range rather than
       stepped, so "Sara Kay" never wraps and never overruns the blob. */
    /* Capped against viewport HEIGHT too: width-only sizing ate the fold on
       short laptops and pushed the link row under the accessibility pill. */
    /* opsz 9 / wght 700 has far more visual mass than the old opsz 144 / 400
       at the same px, and overlap is now 0 so the block is a full line taller.
       Both mean the type has to come down or it eats the fold. */
    --wordmark-size: clamp(3rem, min(12.5vw, 19vh), 11rem);
    /* 0 = the two words stack clean. Any negative value rides "Kay" up into
       Sara's a/r, which is the collision Sara called out in the mockup. */
    --wordmark-overlap: 0em;

    --stat-size: clamp(2.75rem, 6vw, 5rem);

    /* Decoration geometry */
    --blob-blur: 0px;              /* blobs are flat shapes, not glows */
    --capsule-radius: 999px;
    --doodle-gap: 0.35em;
}


/* ── 3. Legacy aliases ──────────────────────────────────────────────────────
   The rest of the site is written against --bg/--text/--accent/etc. Aliasing
   them onto the shojo tokens is what makes the rollout mechanical: a migrated
   page re-colours wholesale without touching a single component rule.

   !important is load-bearing on --accent only: css/a11y.css sets it with
   !important at (0,3,0) for the pro contrast floor. This selector is (0,4,0),
   so !important here wins — and the value it wins with is already AA.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"][data-theme] {
    --bg:      var(--paper);
    --bg-2:    var(--paper-2);
    --text:    var(--ink);
    --text-2:  var(--ink-2);
    --border:  var(--hairline);
    --card-bg: var(--paper);
    --card-shadow: var(--lift);
    --card-hover-shadow: var(--lift);
    --accent-glow: var(--rose-wash);

    /* named gremlin palette, remapped onto the shojo hues */
    --pink:     var(--rose);
    --blue:     var(--peri);
    --lavender: var(--peri);
    --mint:     var(--sage);
    --peach:    var(--rose-wash);
    --stroke:   var(--hairline);
    --outline:  var(--paper);
    --mat-edge: var(--hairline);
    --keyshadow: var(--lift);
}

:root[data-skin="shojo"][data-mode="gremlin"][data-theme="light"] { --accent: var(--rose-ink) !important; }
:root[data-skin="shojo"][data-mode="gremlin"][data-theme="dark"]  { --accent: var(--rose-ink) !important; }

/* The old gremlin canvas was a three-stop pastel gradient. Shojo is flat
   cream paper — kill the gradient and the frosted body wash under it. */
:root[data-skin="shojo"][data-mode="gremlin"][data-theme] { --mat: var(--paper); }

:root[data-skin="shojo"][data-mode="gremlin"] body { background: var(--paper); color: var(--ink); }
:root[data-skin="shojo"][data-mode="gremlin"] body::before { display: none !important; }


/* ── 3b. Pro is untouched ───────────────────────────────────────────────────
   Everything in this file is scoped to [data-mode="gremlin"]. Pro keeps its
   original identity exactly — same tokens, same DM Sans, same #FF1493 accent.

   But the rebrand ADDED elements to index.html's markup (the blobs, the
   wordmark flourish, the stat accents, the note underline). Unstyled, an
   inline <svg> still renders at its default box, so pro would show a stray
   pink slab in the hero. Default them off; gremlin turns them back on.
   ───────────────────────────────────────────────────────────────────────── */

[data-skin="shojo"] .blob,
[data-skin="shojo"] .wordmark-flourish,
[data-skin="shojo"] .stat-accent,
[data-skin="shojo"] .margin-note-underline { display: none; }

[data-skin="shojo"][data-mode="gremlin"] .blob,
[data-skin="shojo"][data-mode="gremlin"] .wordmark-flourish,
[data-skin="shojo"][data-mode="gremlin"] .stat-accent,
[data-skin="shojo"][data-mode="gremlin"] .margin-note-underline { display: block; }


/* ── 4. Type stack ──────────────────────────────────────────────────────────
   Display face for display sizes only. Body copy keeps the existing readable
   sans in both modes — a hairline fashion serif at 16px is an accessibility
   trap, and the readable-font toggle must still be able to override everything.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"] h1,
:root[data-skin="shojo"][data-mode="gremlin"] h2,
:root[data-skin="shojo"][data-mode="gremlin"] .display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--display-leading);
    letter-spacing: var(--display-track);
}

:root[data-skin="shojo"][data-mode="gremlin"] h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* The readable-font toggle outranks the rebrand, always. */
:root[data-skin="shojo"][data-mode="gremlin"][data-font="on"] h1,
:root[data-skin="shojo"][data-mode="gremlin"][data-font="on"] h2,
:root[data-skin="shojo"][data-mode="gremlin"][data-font="on"] h3,
:root[data-skin="shojo"][data-mode="gremlin"][data-font="on"] .display,
:root[data-skin="shojo"][data-mode="gremlin"][data-font="on"] .margin-note {
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
}


/* ── 5. Wordmark ────────────────────────────────────────────────────────────
   Two-tone, overlapping baselines. Semantics stay a plain <h1> containing the
   real string "Sara Kay" — the two-tone is spans, so crawlers and screen
   readers get one clean accessible name.

   The rose "Kay" is 2.32:1 on cream. That is deliberate and permitted: it is a
   logotype, which WCAG 1.4.3 exempts, and DESIGN.md already carries the same
   exemption for the current hero words. Nothing else on the page may use it.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"] .wordmark {
    font-family: var(--font-display);
    font-size: var(--wordmark-size);
    line-height: var(--display-leading);
    letter-spacing: var(--display-track);
    font-weight: 700;
    display: block;
    margin: 0;
    position: relative;
    z-index: 2;
    margin-bottom: 0.12em;   /* room for the Kay descender */
}

/* index.html's <h1> carries BOTH .hero-name (pro's original Pacifico +
   white text-stroke treatment) and .wordmark. In gremlin the shojo rules win
   on specificity, but only for properties they actually set — the stroke and
   the uppercase transform have to be switched off explicitly. */
:root[data-skin="shojo"][data-mode="gremlin"] .wordmark {
    -webkit-text-stroke: 0;
    text-stroke: 0;
    text-transform: none;
}

:root[data-skin="shojo"][data-mode="gremlin"] .wordmark-first,
:root[data-skin="shojo"][data-mode="gremlin"] .wordmark-last {
    display: block;
    white-space: nowrap;
}

:root[data-skin="shojo"][data-mode="gremlin"] .wordmark-first { color: var(--ink);  padding-left: 0.06em; }
:root[data-skin="shojo"][data-mode="gremlin"] .wordmark-last  { color: var(--rose); margin-top: var(--wordmark-overlap); padding-left: 0.56em; }

/* The looping flourish that trails off toward the tagline. Decorative, so it
   is aria-hidden in markup and simply absent in pro. */
:root[data-skin="shojo"][data-mode="gremlin"] .wordmark-flourish {
    position: absolute;
    inset: auto auto -4% -3%;
    width: 38%;
    height: auto;
    aspect-ratio: 100 / 80;
    overflow: visible;
    pointer-events: none;
    /* Behind the letters. The spans are in-flow (z-index auto), so a positive
       z-index here painted the line ON TOP of the type; -1 keeps it inside
       .wordmark's stacking context but underneath the glyphs. */
    z-index: -1;
}

:root[data-skin="shojo"][data-mode="gremlin"] .wordmark-flourish path {
    fill: none;
    /* Stroke weight must not scale with the SVG box, or the hairline thickens
       as the wordmark grows and reads as a different line at each breakpoint. */
    vector-effect: non-scaling-stroke;
    stroke: var(--ink-2);
    stroke-width: 1.1;
    stroke-linecap: round;
    opacity: 0.55;
}

:root[data-skin="shojo"][data-mode="gremlin"] .wordmark-flourish .flourish-dotted {
    stroke-dasharray: 1 6;
    opacity: 0.5;
}


/* ── 6. Blobs ───────────────────────────────────────────────────────────────
   Soft organic section backgrounds. Flat fills, no gradients, no blur — the
   mockup's blobs are printed shapes, not glows. Gremlin only, aria-hidden,
   and absolutely positioned out of flow so they contribute zero layout shift.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"] .blob {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    display: block;
}

:root[data-skin="shojo"][data-mode="gremlin"] .blob path { fill: var(--rose-wash); }
:root[data-skin="shojo"][data-mode="gremlin"] .blob-peri path { fill: var(--peri-wash); }

/* Top-left rose blob, bleeding off the corner. */
:root[data-skin="shojo"][data-mode="gremlin"] .blob-corner {
    /* Tucked up under the nav so it meets the nav's wavy rule instead of
       floating with a gap (Sara 2026-09-29); the nav's opaque paper covers
       the overlap. */
    top: -40px;
    /* Bleed off the viewport's left edge, not the 1400px container's: on wide
       screens anchoring to the container left a hard vertical edge mid-page.
       (100% - 100vw) / 2 is minus the gutter between the hero and the window. */
    left: min(0px, calc((100% - 100vw) / 2));
    width: calc(clamp(140px, 17vw, 290px) + max(0px, (100vw - 100%) / 2));   /* larger and it cuts across the S */
    height: auto;
}

/* Large periwinkle blob behind the illustration cluster. */
:root[data-skin="shojo"][data-mode="gremlin"] .blob-cluster {
    top: -6%;
    /* Same fix on the right: always reach the window edge (the overflow is
       clipped), and grow by the extra gutter so the left curve stays put. */
    right: min(-14%, calc((100% - 100vw) / 2));
    width: calc(clamp(420px, 56vw, 900px) + max(0px, (100vw - 100%) / 2 - 14%));
    height: auto;
}


/* ── 7. Links: underline + trailing doodle ──────────────────────────────────
   No buttons anywhere in the shojo layer. A link is underlined text with a
   small doodle riding after it. The doodle is a ::after glyph so it never
   lands in the accessible name or the copy buffer.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"] .doodle-link {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: var(--doodle-gap);
    padding-bottom: 0.22em;
    border-bottom: 1px solid var(--ink);
    transition: color 0.2s ease, border-color 0.2s ease;
}

:root[data-skin="shojo"][data-mode="gremlin"] .doodle-link::after {
    content: attr(data-doodle);
    /* Fraunces has no bow/heart glyph, so a display-font doodle fell back
       per-glyph and rendered inconsistently. One symbol-capable stack. */
    font-family: system-ui, 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
    font-size: 0.85em;
    color: var(--rose-ink);
    line-height: 1;
    transition: transform 0.25s ease;
}

:root[data-skin="shojo"][data-mode="gremlin"] .doodle-link:hover,
:root[data-skin="shojo"][data-mode="gremlin"] .doodle-link:focus-visible {
    color: var(--rose-ink);
    border-bottom-color: var(--rose-ink);
}

@media (prefers-reduced-motion: no-preference) {
    [data-skin="shojo"][data-mode="gremlin"][data-motion="on"] .doodle-link:hover::after,
    [data-skin="shojo"][data-mode="gremlin"]:not([data-motion]) .doodle-link:hover::after {
        transform: translateY(-2px) rotate(8deg);
    }
}

/* Lucide icons inside hero links are redundant now that every link carries a
   doodle — hide them in the shojo skin rather than editing every page. */
:root[data-skin="shojo"][data-mode="gremlin"] .doodle-link > i,
:root[data-skin="shojo"][data-mode="gremlin"] .doodle-link > svg.lucide { display: none; }


/* ── 8. Ticker capsule ──────────────────────────────────────────────────────
   Thin outlined capsule holding the current-activities strip, sparkle glyphs
   between items. Replaces the old full-bleed marquee band.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"] .ticker-capsule {
    border: 1px solid var(--paper-3);
    border-radius: var(--capsule-radius);
    background: transparent;
    padding: 0.7rem 1.6rem;
    overflow: hidden;
    position: relative;
}

:root[data-skin="shojo"][data-mode="gremlin"] .ticker-capsule .marquee-item {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-2);
    letter-spacing: 0.01em;
}

:root[data-skin="shojo"][data-mode="gremlin"] .ticker-capsule .marquee-separator {
    color: var(--rose);
    font-size: 0.8rem;
    padding: 0 0.9rem;
}


/* ── 9. Stats row ───────────────────────────────────────────────────────────
   Oversized serif numerals alternating ink / rose / periwinkle, small serif
   labels underneath, hand-drawn accents behind.

   Colours are assigned by :nth-child so the rhythm survives adding or removing
   a stat. Every value used here clears 3:1 at these sizes; --rose is barred, so
   the rose numerals use --rose-ink.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"] .stats-bar {
    background: transparent;
    border: none;
    box-shadow: none;
}

:root[data-skin="shojo"][data-mode="gremlin"] .stat-item { padding-bottom: 16px; }

:root[data-skin="shojo"][data-mode="gremlin"] .stat-number {
    font-family: var(--font-display);
    font-size: var(--stat-size);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    position: relative;
}

/* Tone is declared per stat rather than derived with nth-child: the grid
   interleaves .stat-divider between items, so any nth-child arithmetic here
   would silently break the moment a stat is added, removed, or reordered. */
:root[data-skin="shojo"][data-mode="gremlin"] .stat-item[data-tone="ink"]  .stat-number { color: var(--ink); }
:root[data-skin="shojo"][data-mode="gremlin"] .stat-item[data-tone="rose"] .stat-number { color: var(--rose-ink); }
:root[data-skin="shojo"][data-mode="gremlin"] .stat-item[data-tone="peri"] .stat-number { color: var(--peri-ink); }

:root[data-skin="shojo"][data-mode="gremlin"] .stat-label {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-2);
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}

/* The vertical rules between stats go away — the mockup separates them with
   dotted arcs and whitespace instead. */
:root[data-skin="shojo"][data-mode="gremlin"] .stat-divider { display: none; }

/* Hand-drawn accents: a circle around one figure, squiggle underlines, dotted
   arcs between. Decorative, gremlin only, aria-hidden. */
:root[data-skin="shojo"][data-mode="gremlin"] .stat-accent {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

:root[data-skin="shojo"][data-mode="gremlin"] .stat-accent path,
:root[data-skin="shojo"][data-mode="gremlin"] .stat-accent ellipse {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-width: 1.4;
}

:root[data-skin="shojo"][data-mode="gremlin"] .stat-accent-ring ellipse { stroke: var(--ink-2); opacity: 0.6; }
:root[data-skin="shojo"][data-mode="gremlin"] .stat-accent-squiggle path { stroke: var(--rose); opacity: 0.9; }
:root[data-skin="shojo"][data-mode="gremlin"] .stat-accent-arc path { stroke: var(--ink-2); stroke-dasharray: 2 7; opacity: 0.5; }


/* ── 10. Margin notes ───────────────────────────────────────────────────────
   Handwritten annotations in the gutters ("psst — the stickers move!").

   Caveat is a stand-in. The intended end state is Sara's own scanned
   handwriting, which becomes an SVG-path swap on .margin-note — see
   TODO-assets.md. Gremlin only; pro never gets a handwritten aside.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"] .margin-note {
    font-family: var(--font-note);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    line-height: 1.15;
    color: var(--peri-ink);
    transform: rotate(-4deg);
    display: inline-block;
    position: relative;
}

:root[data-skin="shojo"][data-mode="gremlin"] .margin-note-underline path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke: var(--peri);
    stroke-width: 1.6;
    stroke-linecap: round;
}


/* ── 11. Spot illustrations ─────────────────────────────────────────────────
   The cluster scattered across the periwinkle blob, joined by dotted connector
   lines. Placeholder art for now (see TODO-assets.md); the container geometry
   is percentage-based so commissioned replacements are a pure file swap.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"] .spot-cluster {
    position: relative;
    aspect-ratio: 5 / 4;
    width: 100%;
}

/* The width attribute on a sticker <img> is the sizing authority; a CSS
   width:100% resolves against the shrink-to-fit button and doubles it. */
:root[data-skin="shojo"][data-mode="gremlin"] .sticker-art img { display: block; height: auto; max-width: none; }

:root[data-skin="shojo"][data-mode="gremlin"] .spot {
    position: absolute;
    width: var(--spot-w, 14%);
    height: auto;
    /* Reserve the box up front so late-decoding art cannot shift the hero. */
    aspect-ratio: var(--spot-ar, 1);
    object-fit: contain;
}

:root[data-skin="shojo"][data-mode="gremlin"] .spot-threads path {
    fill: none;
    stroke: var(--ink-2);
    stroke-width: 1;
    stroke-dasharray: 1.5 6;
    stroke-linecap: round;
    opacity: 0.45;
}


/* ── 12. Decoration kill-switch ─────────────────────────────────────────────
   One selector that removes every decorative layer. Pro mode already opts out
   above; this additionally honours the existing accents toggle, so a visitor
   who turned accents off gets the clean editorial page in gremlin too.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"][data-accents="off"] .blob,
:root[data-skin="shojo"][data-mode="gremlin"][data-accents="off"] .spot-cluster,
:root[data-skin="shojo"][data-mode="gremlin"][data-accents="off"] .stat-accent,
:root[data-skin="shojo"][data-mode="gremlin"][data-accents="off"] .wordmark-flourish,
:root[data-skin="shojo"][data-mode="gremlin"][data-accents="off"] .margin-note {
    display: none;
}


/* ── 13. Reduced motion ─────────────────────────────────────────────────────
   Nothing in this file animates by default. The wordmark entrance (added after
   Sara picks an audition) must live behind the same triple guard the rest of
   the site uses: OS preference, then the sara-motion toggle, then the effect.
   With motion off the wordmark simply appears, fully styled.
   ───────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    [data-skin="shojo"][data-mode="gremlin"] * {
        animation: none !important;
        transition: none !important;
    }
}


/* ── 14. Homepage ───────────────────────────────────────────────────────────
   Index-specific composition. Everything above is reusable across the site;
   this section is the one place that knows about the homepage's own layout.

   The illustration cluster is NOT new furniture — it is the existing draggable
   sticker layer (js at the foot of index.html) with its inline-SVG art swapped
   for the mockup's drawings. Seven of the eight map one-to-one (pipeline ->
   chained squares, scroll -> paper, mail -> envelope, pine -> tree, plus tv /
   mic / hand-heart), and the laser cutter becomes the desk lamp. That is what
   the "the stickers move" margin note is pointing at.

   Consequence: no dotted connector threads. The mockup draws them between the
   drawings, but these are draggable — a static thread would detach the moment
   anything moved, which breaks the "motion must match state" rule in MOTION.md.
   ───────────────────────────────────────────────────────────────────────── */

/* The periwinkle blob bleeds off the right edge by design: clip it, never scroll. */
:root[data-skin="shojo"][data-mode="gremlin"],
:root[data-skin="shojo"][data-mode="gremlin"] body { overflow-x: clip; }

:root[data-skin="shojo"][data-mode="gremlin"] .hero { position: relative; }
:root[data-skin="shojo"][data-mode="gremlin"] .hero-copy { position: relative; z-index: 2; }

/* Copy column stays left so the sticker cluster (hx >= 0.58) never collides.
   The cap is on the prose only: on the link row it squeezed the row to 205px
   at 1280px and wrapped "let's chat" below the fold. */
@media (min-width: 900px) {
    :root[data-skin="shojo"][data-mode="gremlin"] .hero-tagline { max-width: 46%; }
}

:root[data-skin="shojo"][data-mode="gremlin"] .hero-tagline {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink-2);
    margin-bottom: 34px;
}

/* Links: strip the pill/keycap treatment and re-lay as underlined text.
   Reset and appearance are one rule so the reset cannot clobber the underline. */
:root[data-skin="shojo"][data-mode="gremlin"] .hero-download-btn,
:root[data-skin="shojo"][data-mode="gremlin"] .social-link {
    background: none;
    background-image: none;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    padding: 0 0 0.22em;
    transform: none;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 500;
    color: var(--ink);
    gap: var(--doodle-gap);
}

:root[data-skin="shojo"][data-mode="gremlin"] .hero-download-btn:hover,
:root[data-skin="shojo"][data-mode="gremlin"] .social-link:hover,
:root[data-skin="shojo"][data-mode="gremlin"] .hero-download-btn:focus-visible,
:root[data-skin="shojo"][data-mode="gremlin"] .social-link:focus-visible {
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--rose-ink);
    border-bottom-color: var(--rose-ink);
}

:root[data-skin="shojo"][data-mode="gremlin"] .hero-location-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 34px;
    width: 100%;
}

:root[data-skin="shojo"][data-mode="gremlin"] .hero-download-section,
:root[data-skin="shojo"][data-mode="gremlin"] .social-links { gap: 34px; }

/* Margin note. .margin-note sets position:relative for its underline, which
   beat .zone-hint's own position:absolute and dropped the note into flow at
   the far left — re-assert absolute for this instance. */
:root[data-skin="shojo"][data-mode="gremlin"] .zone-hint {
    position: absolute;
    right: 8%;
    bottom: 4%;
    left: auto;
    font-family: var(--font-note);
    color: var(--peri-ink);
    max-width: 15em;
    text-align: center;
    line-height: 1.1;
}

:root[data-skin="shojo"][data-mode="gremlin"] .zone-hint .hint-spark { color: var(--rose); }

:root[data-skin="shojo"][data-mode="gremlin"] .margin-note-underline {
    display: block;
    width: 88%;
    height: 8px;
    margin: 4px auto 0;
    overflow: visible;
}

/* Nav: the mockup's nav is plain editorial text, not the keycap row. The
   mode/theme keys stay pills — those are controls and should read as controls. */
:root[data-skin="shojo"][data-mode="gremlin"] .top-nav {
    background: var(--paper);
    border-bottom: 1px solid var(--paper-3);
    box-shadow: none;
    backdrop-filter: none;
}

:root[data-skin="shojo"][data-mode="gremlin"] .nav-link {
    position: relative;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 2px;
    color: var(--ink-2);
    transform: none;
}

:root[data-skin="shojo"][data-mode="gremlin"] .nav-link:hover,
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link:focus-visible,
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link.active {
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--rose-ink);
}

:root[data-skin="shojo"][data-mode="gremlin"] .nav-link.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--rose-ink);
    transform: translateX(-50%);
}

:root[data-skin="shojo"][data-mode="gremlin"] .nav-links { gap: 26px; }

/* Ticker: the old full-bleed band becomes a bounded outlined capsule. */
:root[data-skin="shojo"][data-mode="gremlin"] .currently {
    background: none;
    border: 0;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

:root[data-skin="shojo"][data-mode="gremlin"] .currently::before,
:root[data-skin="shojo"][data-mode="gremlin"] .currently::after { display: none; }

/* Stats: strip the gremlin keycap cards back to bare numerals on paper. */
:root[data-skin="shojo"][data-mode="gremlin"] .stats-bar {
    background: none;
    border: 0;
    padding: 56px 40px 40px;
}

:root[data-skin="shojo"][data-mode="gremlin"] .stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px 12px;
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;   /* the arcs reach into the next gutter; no scrollbar */
}

:root[data-skin="shojo"][data-mode="gremlin"] .stat-item {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 8px 16px;
    min-width: 0;
    transform: none;
    position: relative;
    flex: 1 1 auto;
}

/* Alternating baselines — the mockup's numerals don't sit on one line. */
:root[data-skin="shojo"][data-mode="gremlin"] .stat-item:nth-child(even) { padding-top: 14px; }
:root[data-skin="shojo"][data-mode="gremlin"] .stat-number { margin-bottom: 10px; }

/* Accent placement, tracked against each stat's own box. */
:root[data-skin="shojo"][data-mode="gremlin"] .stat-accent-ring {
    top: -14%; left: 50%;
    width: 132%; height: 78%;
    transform: translateX(-50%);
}

:root[data-skin="shojo"][data-mode="gremlin"] .stat-accent-squiggle {
    left: 50%; transform: translateX(-50%);
    bottom: 0;
    width: 86%; height: 8px;
}

/* Dotted arcs retired 2026-09-30: the gutters between stats are narrower
   than the arcs, so they landed on the next numeral (through the 5 of 54%,
   across the 2). Markup stays; ring + squiggles carry the hand-drawn feel. */
:root[data-skin="shojo"][data-mode="gremlin"] .stat-accent-arc { display: none; }


/* ── 15. Mobile ─────────────────────────────────────────────────────────────
   On phones the sticker script abandons hero-relative placement and spreads
   the drawings down the whole page (the MOBILE map in index.html). That leaves
   the cluster blob sitting in an otherwise empty hero, eating the fold.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    :root[data-skin="shojo"][data-mode="gremlin"] {
        /* min(16vw, 25vh) collapsed to 60px on a 375px screen — smaller than
           the body copy. Width-driven with a real floor instead. */
        --wordmark-size: clamp(3.25rem, 16vw, 5.5rem);
        --wordmark-overlap: 0em;
        --stat-size: clamp(2.25rem, 13vw, 3.25rem);
    }

    :root[data-skin="shojo"][data-mode="gremlin"] .blob-cluster { display: none; }
    :root[data-skin="shojo"][data-mode="gremlin"] .blob-corner { width: 52vw; opacity: 0.8; }

    :root[data-skin="shojo"][data-mode="gremlin"] .hero { min-height: 0; padding: 56px 0 32px; }
    :root[data-skin="shojo"][data-mode="gremlin"] .hero-tagline { max-width: none; }

    /* Scroll cue is absolutely positioned and collided with the in-flow note.
       Phones don't need a scroll hint. */
    :root[data-skin="shojo"][data-mode="gremlin"] .scroll-indicator { display: none; }

    /* Note joins the flow under the links rather than floating over them. */
    :root[data-skin="shojo"][data-mode="gremlin"] .zone-hint {
        position: static;
        display: block;
        margin: 28px 0 0;
        text-align: left;
        max-width: 20em;
    }
    :root[data-skin="shojo"][data-mode="gremlin"] .margin-note-underline { margin: 4px 0 0; width: 70%; }

    :root[data-skin="shojo"][data-mode="gremlin"] .hero-location-wrapper { gap: 20px 24px; }
    :root[data-skin="shojo"][data-mode="gremlin"] .hero-download-section,
    :root[data-skin="shojo"][data-mode="gremlin"] .social-links { gap: 24px; }

    :root[data-skin="shojo"][data-mode="gremlin"] .ticker-capsule { border-radius: 18px; padding: 0.6rem 1rem; }

    /* At two stats per row the 132% ring reached into its neighbour. */
    :root[data-skin="shojo"][data-mode="gremlin"] .stats-grid { justify-content: center; gap: 34px 16px; }
    :root[data-skin="shojo"][data-mode="gremlin"] .stat-item { flex: 0 1 40%; padding-top: 0; }
    :root[data-skin="shojo"][data-mode="gremlin"] .stat-item:nth-child(even) { padding-top: 0; }
    :root[data-skin="shojo"][data-mode="gremlin"] .stat-accent-ring { width: 108%; }
    :root[data-skin="shojo"][data-mode="gremlin"] .stat-accent-arc { display: none; }
}

/* ── 16. View keycaps ───────────────────────────────────────────────────────
   The gremlin mode key was a saturated magenta->purple gradient
   (#B14371 -> #7E5FA3, from the July contrast pass, index.html's #a11y-ink
   block). Against cream paper it read as leftover hot pink, and it sits at
   the top of the page where you land after scrolling back up.

   That rule is (1,2,0) — an id plus two attributes — so overriding it needs an
   id too. These are (1,4,0). Gremlin only: pro keeps its original keycaps.

   The mockup's treatment: mode is a filled ink pill, theme is an outlined one.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"] .view-key {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0;
    border-radius: var(--capsule-radius);
    border: 1px solid var(--paper-3);
    background: var(--paper);
    color: var(--ink);
    box-shadow: none;
    transform: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

:root[data-skin="shojo"][data-mode="gremlin"][data-theme] #modeKey,
:root[data-skin="shojo"][data-mode="gremlin"][data-theme] #themeKey:hover,
:root[data-skin="shojo"][data-mode="gremlin"][data-theme] #modeKey:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: none;
}

:root[data-skin="shojo"][data-mode="gremlin"][data-theme] .view-key:active { transform: none; }


/* ── 17. Type system (2026-09-29) ───────────────────────────────────────────
   Sara: "the biggest thing that bugs me is the font inconsistency, thinness
   for readability, and the nav bar." A census of the gremlin homepage found six
   families (Fraunces 400/500/700, Nunito, Bubblegum Sans, Caveat, Caveat Note,
   DM Mono), with thin Fraunces 400 carrying the tagline, nav and body copy.

   Three roles, three faces, nothing else:
     DISPLAY  Fraunces 700: stat numbers, section titles, card titles. Big only.
     TEXT/UI  Nunito 600 body, 700 UI (nav, links, labels, ticker, chips, keycaps).
              Her deliberate rounded face (ANTISLOP.md "keep" list).
     NOTE     Caveat Note: handwritten asides only (margin note, eyebrows).
   Minimum 14px for any label. Pro mode is untouched.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-mode="gremlin"] {
    --font-ui: 'Nunito', 'Nunito Fallback', system-ui, sans-serif;
}

/* TEXT / UI → Nunito */
:root[data-skin="shojo"][data-mode="gremlin"] body,
:root[data-skin="shojo"][data-mode="gremlin"] p,
:root[data-skin="shojo"][data-mode="gremlin"] .hero-tagline,
:root[data-skin="shojo"][data-mode="gremlin"] .marquee-item,
:root[data-skin="shojo"][data-mode="gremlin"] .stat-label,
:root[data-skin="shojo"][data-mode="gremlin"] .ach-name,
:root[data-skin="shojo"][data-mode="gremlin"] .ach-desc,
:root[data-skin="shojo"][data-mode="gremlin"] .skill-group-label,
:root[data-skin="shojo"][data-mode="gremlin"] .hat-panel-name,
:root[data-skin="shojo"][data-mode="gremlin"] .bubble-title,
:root[data-skin="shojo"][data-mode="gremlin"] .sky-telescope figcaption,
:root[data-skin="shojo"][data-mode="gremlin"] .cert-badge,
:root[data-skin="shojo"][data-mode="gremlin"] .honor-pill,
:root[data-skin="shojo"][data-mode="gremlin"] .work-chip,
:root[data-skin="shojo"][data-mode="gremlin"] .work-alias,
:root[data-skin="shojo"][data-mode="gremlin"] footer,
:root[data-skin="shojo"][data-mode="gremlin"] footer * {
    font-family: var(--font-ui);
}
:root[data-skin="shojo"][data-mode="gremlin"] p,
:root[data-skin="shojo"][data-mode="gremlin"] .hero-tagline,
:root[data-skin="shojo"][data-mode="gremlin"] .ach-desc { font-weight: 600; }

:root[data-skin="shojo"][data-mode="gremlin"] .hero-tagline {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.5;
    color: var(--ink);
}
:root[data-skin="shojo"][data-mode="gremlin"] .ticker-capsule .marquee-item { font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem; }
:root[data-skin="shojo"][data-mode="gremlin"] .stat-label { font-weight: 700; font-size: 0.95rem; }
:root[data-skin="shojo"][data-mode="gremlin"] .ach-name,
:root[data-skin="shojo"][data-mode="gremlin"] .bubble-title,
:root[data-skin="shojo"][data-mode="gremlin"] .skill-group-label,
:root[data-skin="shojo"][data-mode="gremlin"] .hat-panel-name { font-weight: 800; }
:root[data-skin="shojo"][data-mode="gremlin"] .work-chip,
:root[data-skin="shojo"][data-mode="gremlin"] .work-alias,
:root[data-skin="shojo"][data-mode="gremlin"] .cert-badge,
:root[data-skin="shojo"][data-mode="gremlin"] .honor-pill { font-weight: 800; letter-spacing: 0.02em; }

/* Links in the hero: UI face, not the display serif */
:root[data-skin="shojo"][data-mode="gremlin"] .hero-download-btn,
:root[data-skin="shojo"][data-mode="gremlin"] .social-link {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.05rem;
}

/* DISPLAY → Fraunces 700 only (never thin) */
:root[data-skin="shojo"][data-mode="gremlin"] .section-header,
:root[data-skin="shojo"][data-mode="gremlin"] .class-card-title,
:root[data-skin="shojo"][data-mode="gremlin"] .deep-dive-text-title,
:root[data-skin="shojo"][data-mode="gremlin"] .footer-contact h2 {
    font-family: var(--font-display);
    font-weight: 700;
}

/* NOTE → Caveat Note (was a mix of Caveat and Bubblegum Sans) */
:root[data-skin="shojo"][data-mode="gremlin"] .work-eyebrow,
:root[data-skin="shojo"][data-mode="gremlin"] .work-more,
:root[data-skin="shojo"][data-mode="gremlin"] .zone-hint {
    font-family: var(--font-note);
}

/* ── Nav: one readable row at every width ─────────────────────────────────── */
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.97rem;
    color: var(--ink-2);
    white-space: nowrap;
}
:root[data-skin="shojo"][data-mode="gremlin"] .nav-links {
    gap: clamp(12px, 1.7vw, 26px);
    flex-wrap: nowrap;
}
:root[data-skin="shojo"][data-mode="gremlin"] .view-key {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.85rem;
}
/* the "press to change" mono label: same UI face, quieter */
:root[data-skin="shojo"][data-mode="gremlin"] .view-controls::before {
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
}
/* Between phone and wide desktop the ten links + keycaps don't fit on one line:
   drop the hint label and let the link group scroll sideways (with an edge
   fade) instead of wrapping into a second row. */
@media (min-width: 769px) and (max-width: 1280px) {
    :root[data-skin="shojo"][data-mode="gremlin"] .view-controls::before { display: none; }
    :root[data-skin="shojo"][data-mode="gremlin"] .top-nav { flex-wrap: nowrap; gap: 16px; }
    :root[data-skin="shojo"][data-mode="gremlin"] .nav-links {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    }
    :root[data-skin="shojo"][data-mode="gremlin"] .nav-links::-webkit-scrollbar { display: none; }
    :root[data-skin="shojo"][data-mode="gremlin"] .view-controls { flex: 0 0 auto; }
}


/* ── 18. Nav tabs by type (2026-09-29) ──────────────────────────────────────
   Sara picked B3 from auditions/nav.html: each link is a little pastel label,
   like washi-tape index tabs, coloured by what kind of page it is, and the
   links are grouped by kind in components/nav.html with a gap between groups.
     me             home, about                  lavender (--paper-3)
     things I build work, projects, toolshed     blue     (--peri-wash)
     things I share writing, talks, press        pink     (--rose-wash)
     hands & heart  maker, volunteering          green    (--sage-wash)
   The current page gets a rose outline. A hand-drawn wavy rule replaces the
   hairline under the bar. The group-gap spans are inert everywhere else.
   ───────────────────────────────────────────────────────────────────────── */

.nav-group-gap { display: none; }
/* toolshed moved mid-row: keep its little mark on the same line in every mode */
.nav-link-shelf { white-space: nowrap; }

:root[data-skin="shojo"][data-mode="gremlin"] .top-nav { border-bottom: 0; }
:root[data-skin="shojo"][data-mode="gremlin"] .top-nav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;   /* edge to edge, so the blobs below meet it at the window edge too */
    height: 2px;
    pointer-events: none;
    background: var(--nav-rule);
}
/* Solid rule, not the hand-drawn squiggle (2026-09-30): the wave's peaks and
   dips never lined up with the page-hero blobs below it, so the gap looked
   uneven. It sits flush on the nav's bottom edge, so the blobs meet it. */
:root[data-skin="shojo"][data-mode="gremlin"] .nav-links { gap: clamp(6px, .9vw, 12px); align-items: center; }
:root[data-skin="shojo"][data-mode="gremlin"] .nav-group-gap { display: block; width: clamp(6px, 1.4vw, 18px); flex: 0 0 auto; }
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link {
    padding: 5px 12px;
    border-radius: 7px 11px 7px 11px;
    color: var(--ink);
    transform: rotate(-.8deg);
    transition: transform .2s ease;
}
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link:nth-child(even) { transform: rotate(.9deg); }
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link[href="index.html"],
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link[href="about.html"] { background: var(--paper-3); }
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link[href="work.html"],
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link[href="projects.html"],
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link[href="shelf.html"] { background: var(--peri-wash); }
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link[href="writing.html"],
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link[href="talks.html"],
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link[href="press.html"] { background: var(--rose-wash); }
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link[href="maker.html"],
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link[href="volunteering.html"] { background: var(--sage-wash); }
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link:hover,
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link:focus-visible { transform: translateY(-2px) rotate(0deg); color: var(--ink); }
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link.active {
    outline: 1.5px solid var(--rose-ink);
    outline-offset: -1.5px;
    color: var(--rose-ink);
}
:root[data-skin="shojo"][data-mode="gremlin"] .nav-link.active::after { display: none; }
:root[data-skin="shojo"][data-mode="gremlin"] .view-controls::before { display: none; }
@media (prefers-reduced-motion: reduce) {
    :root[data-skin="shojo"][data-mode="gremlin"] .nav-link { transition: none; }
}

/* ── Pro nav fits one row on desktop (2026-10-20) ────────────────────────────
   With 11 links (arcade added) the pro row measured 1511px wide in a 1200px
   window, pushing the mode/theme keys off-screen. Tighter mono links and gaps
   bring it to roughly 1060px. Link boxes stay shorter than the view keys, so
   the nav height (and --nav-h: 68px desktop) is unchanged. */
@media (min-width: 769px) {
    :root[data-skin="shojo"][data-mode="pro"] .top-nav { padding-left: 24px; padding-right: 24px; gap: 16px; }
    :root[data-skin="shojo"][data-mode="pro"] .nav-links { gap: 10px; flex-wrap: nowrap; }
    :root[data-skin="shojo"][data-mode="pro"] .nav-link {
        font-size: 13px;
        padding: 6px 8px;
        letter-spacing: 0;
        white-space: nowrap;
    }
    :root[data-skin="shojo"][data-mode="pro"] .nav-link:hover::after,
    :root[data-skin="shojo"][data-mode="pro"] .nav-link.active::after { width: calc(100% - 16px); }
    :root[data-skin="shojo"][data-mode="pro"] .view-controls { flex: 0 0 auto; }
}
@media (min-width: 769px) and (max-width: 1280px) {
    :root[data-skin="shojo"][data-mode="pro"] .view-controls::before { display: none; }
}
/* Safety net for narrow desktop windows: if the links still don't fit, the
   link group scrolls sideways (edge fade) and the keys stay pinned on screen.
   Padding/margin pair gives focus outlines room without changing height. */
@media (min-width: 769px) and (max-width: 1120px) {
    :root[data-skin="shojo"][data-mode="pro"] .nav-links {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 4px 4px;
        margin: -4px 0;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    }
    :root[data-skin="shojo"][data-mode="pro"] .nav-links::-webkit-scrollbar { display: none; }
}

/* ── Gremlin nav fits at 1200-1400 (2026-10-20) ──────────────────────────────
   With 11 tabs (arcade added) the gremlin row overflowed by ~90px at 1280 and
   "the arcade" faded under the keys. Narrower tab padding and gaps save ~200px.
   Font size and vertical padding are unchanged, so the row height and --nav-h
   (71px desktop) stay what they were. Below 1024 the sideways scroll with the
   edge fade (769-1280 block above) is still the fallback. */
@media (min-width: 1024px) and (max-width: 1400px) {
    :root[data-skin="shojo"][data-mode="gremlin"] .nav-links { gap: 6px; }
    :root[data-skin="shojo"][data-mode="gremlin"] .nav-group-gap { width: 10px; }
    :root[data-skin="shojo"][data-mode="gremlin"] .nav-link { padding-left: 7px; padding-right: 7px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SUBPAGE ROLLOUT (2026-09-29, docs/SHOJO_ROLLOUT.md)
   §19–§23 are the shared subpage pieces; §24+ are per-page compositions.
   Every rule here carries [data-page] in its scope. tools/apply_shojo_page.py
   stamps data-page="<name>" on a migrated page's <html>; index.html has no
   data-page, so nothing below can move the homepage (the reference).
   Specificity: :root[data-skin][data-page][data-mode] = (0,4,0), which beats
   every page's inline gremlin rules (at most (0,2,1)) without !important.
   ════════════════════════════════════════════════════════════════════════════ */


/* ── 19. Page hero ──────────────────────────────────────────────────────────
   Ten subpages share .page-hero > .page-title + .page-subtitle. Same gesture
   as the homepage: pink corner blob tucked under the nav, blue blob bleeding
   off the right edge, optionally carrying ONE wash sticker (light/dark twins).
   Blobs + sticker are aria-hidden, absolutely positioned: zero CLS.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page] {
    /* distance from .page-hero's top edge up to the top of the page, so the
       corner blob starts under the fixed nav (container 80px + hero 60px) */
    --page-hero-lift: 140px;
}

:root[data-skin="shojo"][data-page][data-mode="gremlin"] .page-hero {
    position: relative;
    z-index: 1;
    max-width: none;
    margin-bottom: 72px;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"] .page-hero > :not(.blob):not(.page-hero-sticker) {
    position: relative;
    z-index: 2;
}

:root[data-skin="shojo"][data-page][data-mode="gremlin"] .page-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 5.25rem);
    line-height: 0.95;
    letter-spacing: var(--display-track);
    color: var(--rose-ink);   /* the pink of "Sara" in the homepage signature */
    -webkit-text-stroke: 0;
    text-stroke: 0;
    text-transform: none;
    margin-bottom: 18px;
}

:root[data-skin="shojo"][data-page][data-mode="gremlin"] .page-subtitle {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 34em;
}

:root[data-skin="shojo"][data-page][data-mode="gremlin"] .page-blob-corner {
    top: calc(-1 * var(--page-hero-lift));
    left: min(0px, calc((100% - 100vw) / 2));
    width: calc(clamp(130px, 15vw, 250px) + max(0px, (100vw - 100%) / 2));
    height: auto;
}

:root[data-skin="shojo"][data-page][data-mode="gremlin"] .page-blob-right {
    top: calc(-1 * var(--page-hero-lift));
    right: min(0px, calc((100% - 100vw) / 2));
    width: calc(clamp(240px, 30vw, 460px) + max(0px, (100vw - 100%) / 2));
    height: auto;
}

/* One sticker, sat on the blue blob. Twins swap by theme like the homepage. */
:root[data-skin="shojo"][data-page] .page-hero-sticker { display: none; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="light"] .page-hero-sticker.is-light,
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="dark"]  .page-hero-sticker.is-dark {
    display: block;
    position: absolute;
    z-index: 1;
    top: 4px;
    right: clamp(24px, 9vw, 150px);
    width: clamp(110px, 11vw, 160px);
    height: auto;
    transform: rotate(6deg);
    pointer-events: none;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-accents="off"] .page-hero-sticker { display: none !important; }

@media (max-width: 768px) {
    /* subpage containers drop their 80px top padding on phones */
    :root[data-skin="shojo"][data-page] { --page-hero-lift: 60px; }
}
@media (max-width: 767px) {
    :root[data-skin="shojo"][data-page][data-mode="gremlin"] .page-blob-right,
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero-sticker { display: none; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"] .page-blob-corner { width: 48vw; opacity: 0.8; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"] .page-hero { margin-bottom: 48px; }
}


/* ── 20. Card ───────────────────────────────────────────────────────────────
   Paper on the desk: solid --paper-2, one hairline, a soft offset shadow that
   reads as a sheet sitting slightly proud of the mat. No glass, no side
   stripes, no tilt, no gradient. Pages list their card classes here rather
   than inventing a new wrapper, so markup (and generators) stay untouched.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page] {
    --card-offset: 3px 4px 0 var(--paper-3);
}

:root[data-skin="shojo"][data-page][data-mode="gremlin"] :is(
    .shojo-card, .achievement-card, .press-item, .milestone-card,
    .story-panel, .hat-panel, .project-card, .issue-card, .tcard,
    .testimonial-card, .availability-card
) {
    background: var(--paper-2);
    background-image: none;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    color: var(--ink);
}

/* Linked cards lift a hair on hover; the shadow grows to meet them. */
:root[data-skin="shojo"][data-page][data-mode="gremlin"] :is(a.shojo-card, a.milestone-card, a.project-card, a.issue-card, a.tcard):hover,
:root[data-skin="shojo"][data-page][data-mode="gremlin"] :is(a.shojo-card, a.milestone-card, a.project-card, a.issue-card, a.tcard):focus-visible {
    transform: translate(-1px, -2px);
    box-shadow: 5px 7px 0 var(--paper-3);
    border-color: var(--rose-ink);
}


/* ── 21. Section headers ────────────────────────────────────────────────────
   .section-header  Fraunces 700, the page's big display line (like the
                    homepage's "what is this?"). The ✦ after it is drawn by
                    js/constellation.js; the old lucide header icons go.
   .section-divider the group eyebrow ("the career stuff"): a handwritten
                    aside in Caveat Note, left-aligned, slightly tilted.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page][data-mode="gremlin"] .section-header {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1;
    letter-spacing: var(--display-track);
    color: var(--ink);
    -webkit-text-stroke: 0;
    text-transform: none;
}

:root[data-skin="shojo"][data-page][data-mode="gremlin"] .section-divider {
    font-family: var(--font-note);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    letter-spacing: 0;
    color: var(--rose-ink);
    text-align: left;
    transform: rotate(-2deg);
    transform-origin: left center;
    margin-bottom: 8px;
}

:root[data-skin="shojo"][data-page][data-mode="gremlin"] .hdr-icon { display: none; }


/* ── 22. Links, chips, badges ───────────────────────────────────────────────
   Text links: the §7 doodle link, in the UI face. Chips and badges: the §18
   nav-tab shape (Nunito 800 on a pastel wash, uneven corners), never below
   14px, never a filled accent slab.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page][data-mode="gremlin"] .doodle-link {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.05rem;
}

/* color is !important because css/a11y.css pins .skill-tag (and friends) to a
   dark ink with !important for the old pastel chips, which goes dark-on-dark on
   the shojo night washes. --ink on any --*-wash is 8:1+ in both themes. */
:root[data-skin="shojo"][data-page][data-mode="gremlin"] :is(.shojo-chip, .skill-tag, .honor-pill, .active-badge, .pub-pill, .tchip, .filter-btn) {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--ink) !important;
    background: var(--paper-3);
    background-image: none;
    border: 0;
    border-radius: 7px 11px 7px 11px;
    box-shadow: none;
    padding: 5px 12px;
}


/* ── 23. Type sweep ─────────────────────────────────────────────────────────
   Migrated pages still carry dozens of inline font rules (Bubblegum Sans,
   DM Mono, old Caveat). Rather than chase each class, everything visible
   drops to the UI face, then display and note roles are re-asserted after it.
   SVG internals, icons and code keep their own faces. The readable-font toggle
   (css/readable-font.css, !important) still outranks all of it.
   ───────────────────────────────────────────────────────────────────────── */

/* :where() keeps the exclusions at zero specificity: this rule is (0,4,1),
   above every page's inline CSS (max (0,2,1)) but below every shojo component
   rule (0,5,0), so the roles set in §19-§25 always win over the sweep. */
:root[data-skin="shojo"][data-page][data-mode="gremlin"] body *:where(:not(svg, svg *, i, .lucide, pre, code, kbd, samp)) {
    font-family: var(--font-ui);
}
/* Inline text (the <span>s that carry pro/gremlin copy, links, emphasis) takes
   its parent's face instead, so a heading's or card title's role reaches its
   text without a per-class rule. */
:root[data-skin="shojo"][data-page][data-mode="gremlin"] body :is(span, a, em, strong, b, small, time, abbr, sup, sub, label, q, cite):where(:not(svg *)) {
    font-family: inherit;
}

:root[data-skin="shojo"][data-page][data-mode="gremlin"] body :is(h1, h2, h3, .display, .page-title, .section-header) {
    font-family: var(--font-display);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"] body :is(.section-divider, .margin-note, .shojo-note) {
    font-family: var(--font-note);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"] body .footer-col h2 { font-family: var(--font-ui); }

/* 14px floor for shared chrome on migrated pages: footer labels (12–13px) and
   the mode/theme keycaps (13.6px). The homepage keeps its own values. */
:root[data-skin="shojo"][data-page][data-mode="gremlin"] .footer-col h2,
:root[data-skin="shojo"][data-page][data-mode="gremlin"] .site-footer-base,
:root[data-skin="shojo"][data-page][data-mode="gremlin"] .view-key { font-size: 14px; }

/* >>> shojo-footer */
/* ── 19. Footer: torn paper, taped note card, pen "say hi", stickers, giant signature ──
   Sara picked "all together" from auditions/footer-experiments.html (2026-09-29).
   The decorations live in components/footer.html on every page but are hidden
   unless the page opts into data-skin="shojo" and is in gremlin mode, so pro
   and un-migrated pages keep their footer exactly. Plays once when the footer
   scrolls into view; reduced motion / motion keycap off shows the end state. */
.footer-torn, .footer-peeks, .footer-sayhi, .footer-tapes, .footer-giant { display: none; }

:root[data-skin="shojo"][data-mode="gremlin"] .site-footer {
    position: relative;
    margin-top: 130px;
    border-top: 0;
    background: var(--paper-2);
    color: var(--ink-2);
    overflow: visible;
    padding-bottom: 0;
}
:root[data-skin="shojo"][data-mode="gremlin"] .footer-torn {
    display: block; position: absolute; left: 0; right: 0; top: -22px; height: 24px; background: var(--paper-2);
    clip-path: polygon(0 60%,4% 34%,8% 60%,12% 30%,16% 56%,20% 36%,24% 62%,28% 28%,32% 54%,36% 36%,40% 60%,44% 30%,48% 56%,52% 38%,56% 62%,60% 30%,64% 56%,68% 34%,72% 60%,76% 28%,80% 54%,84% 36%,88% 60%,92% 32%,96% 58%,100% 36%,100% 100%,0 100%);
}
:root[data-skin="shojo"][data-mode="gremlin"] .footer-peeks { display: block; position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-peek {
    position: absolute; left: var(--x); bottom: -4px; width: 86px; height: auto;
    filter: drop-shadow(2px 0 0 var(--paper)) drop-shadow(-2px 0 0 var(--paper)) drop-shadow(0 -2px 0 var(--paper));
    transform: rotate(var(--r));
}
:root[data-skin="shojo"][data-mode="gremlin"] .footer-peek-dark { display: none; }
:root[data-skin="shojo"][data-mode="gremlin"][data-theme="dark"] .footer-peek-light { display: none; }
:root[data-skin="shojo"][data-mode="gremlin"][data-theme="dark"] .footer-peek-dark { display: block; }
:root[data-skin="shojo"][data-mode="gremlin"] .site-footer.foot-armed .footer-peek { transform: translateY(46px) rotate(var(--r)); opacity: 0; }
:root[data-skin="shojo"][data-mode="gremlin"] .site-footer.foot-played .footer-peek { animation: footer-peek .75s cubic-bezier(.34,1.56,.64,1) var(--d) both; }
@keyframes footer-peek { from { transform: translateY(46px) rotate(var(--r)); opacity: 0; } to { transform: translateY(0) rotate(var(--r)); opacity: 1; } }

/* the contact block becomes a taped note card */
:root[data-skin="shojo"][data-mode="gremlin"] .footer-contact {
    position: relative; background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px;
    padding: 26px 26px 22px; transform: rotate(-1.3deg); box-shadow: 0 10px 24px var(--lift); max-width: 380px; flex: 0 1 380px;
}
/* keep the link columns beside the card on desktop */
:root[data-skin="shojo"][data-mode="gremlin"] .footer-nav { gap: 32px; }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-tapes { display: block; }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-tape {
    position: absolute; top: -13px; width: 96px; height: 26px; transition: transform .25s ease;
    clip-path: polygon(4% 0,96% 4%,100% 50%,95% 100%,3% 96%,0 48%);
}
:root[data-skin="shojo"][data-mode="gremlin"] .footer-tape-a { left: 18px; background: rgba(244,167,195,.55); transform: rotate(-6deg); }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-tape-b { right: 18px; background: rgba(137,196,225,.55); transform: rotate(5deg); }
:root[data-skin="shojo"][data-mode="gremlin"][data-theme="dark"] .footer-tape-a { background: rgba(244,167,195,.35); }
:root[data-skin="shojo"][data-mode="gremlin"][data-theme="dark"] .footer-tape-b { background: rgba(137,196,225,.35); }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-contact:hover .footer-tape-a { transform: rotate(-11deg) translate(-3px, -5px); }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-contact:hover .footer-tape-b { transform: rotate(10deg) translate(3px, -5px); }

/* "say hi" in the hero's pointed pen; the real h2 stays for screen readers */
:root[data-skin="shojo"][data-mode="gremlin"] .footer-contact > h2 {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
:root[data-skin="shojo"][data-mode="gremlin"] .footer-sayhi { display: block; width: min(230px, 60%); height: auto; margin: -8px 0 4px -6px; overflow: visible; }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-giant { display: block; overflow: hidden; margin-top: 18px; }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-giant-sig { display: block; width: min(1400px, 100%); height: auto; margin: 0 auto -2vw; padding: 0 16px; overflow: visible; }
:root[data-skin="shojo"][data-mode="gremlin"] .pp-ink .w0 { fill: #C94F82; }
:root[data-skin="shojo"][data-mode="gremlin"] .pp-ink .w1 { fill: #2F7FAE; }
:root[data-skin="shojo"][data-mode="gremlin"][data-theme="dark"] .pp-ink .w0 { fill: #F4A7C3; }
:root[data-skin="shojo"][data-mode="gremlin"][data-theme="dark"] .pp-ink .w1 { fill: #89C4E1; }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-giant-sig .pp-ink .w0 { fill: #F1D4E3; }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-giant-sig .pp-ink .w1 { fill: #D3E5F4; }
:root[data-skin="shojo"][data-mode="gremlin"][data-theme="dark"] .footer-giant-sig .pp-ink .w0 { fill: #2A1E33; }
:root[data-skin="shojo"][data-mode="gremlin"][data-theme="dark"] .footer-giant-sig .pp-ink .w1 { fill: #1D2140; }
:root[data-skin="shojo"][data-mode="gremlin"] .pp-pen path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
:root[data-skin="shojo"][data-mode="gremlin"] .site-footer.foot-armed .footer-giant-sig { transform: translateY(30%); opacity: 0; }
:root[data-skin="shojo"][data-mode="gremlin"] .site-footer.foot-played .footer-giant-sig { transform: none; opacity: 1; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .8s ease; }

/* type + links inside the footer follow §17 */
:root[data-skin="shojo"][data-mode="gremlin"] .footer-col h2 { font-family: var(--font-note); font-weight: 400; font-size: 1.35rem; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-col a,
:root[data-skin="shojo"][data-mode="gremlin"] .footer-socials a { font-weight: 700; color: var(--ink); }
:root[data-skin="shojo"][data-mode="gremlin"] .footer-email { font-weight: 800; text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 5px; color: var(--ink); }
:root[data-skin="shojo"][data-mode="gremlin"] .site-footer-base { border-top-color: var(--hairline); }
@media (max-width: 700px) {
    :root[data-skin="shojo"][data-mode="gremlin"] .footer-peek { width: 64px; }
    :root[data-skin="shojo"][data-mode="gremlin"] .footer-peek:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    :root[data-skin="shojo"][data-mode="gremlin"] .site-footer .footer-peek,
    :root[data-skin="shojo"][data-mode="gremlin"] .site-footer .footer-giant-sig { animation: none !important; transition: none !important; transform: rotate(var(--r, 0deg)) !important; opacity: 1 !important; }
}
/* <<< shojo-footer */


/* ── 24. About page ─────────────────────────────────────────────────────────
   about.html composition. Scoped to data-page="about".
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .about-bio {
    font-weight: 600;
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    line-height: 1.6;
    color: var(--ink);
    max-width: 38em;
}

/* Work history: company in the display face, dates as a quiet label. */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .work-company {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem;
    color: var(--ink);
    text-decoration: none;
    border: 0;
    background: none;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .work-company::after { display: none; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .work-title { font-weight: 700; font-size: 1rem; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] :is(.work-dates, .volunteer-dates) {
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--rose-ink); text-transform: none;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] :is(.work-description, .volunteer-description) {
    font-weight: 600; font-size: 1rem; line-height: 1.65; color: var(--ink); max-width: 46em;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .work-entry { padding-bottom: 8px; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .volunteer-org { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .volunteer-role { font-weight: 700; color: var(--ink-2); }

/* Skills: the chip shape from §22, coloured by group like the nav tabs. */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .skill-group-label {
    font-family: var(--font-note); font-weight: 700; font-size: 1.35rem; color: var(--ink-2); text-transform: none; letter-spacing: 0;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .skill-group:nth-child(4n+1) .skill-tag { background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .skill-group:nth-child(4n+2) .skill-tag { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .skill-group:nth-child(4n+3) .skill-tag { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .skill-group:nth-child(4n+4) .skill-tag { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .skill-tag:nth-child(even) { transform: rotate(0.8deg); }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .skill-tag:nth-child(odd)  { transform: rotate(-0.6deg); }

/* "here's what that looks like": the same bento the homepage shows
   ("achievements unlocked"), matched to it: white paper cards, uppercase
   Nunito 800 names (the copy itself is uppercase), no icon bubbles. */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .ach-bento-item {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    backdrop-filter: none;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .ach-bento-item:hover,
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .ach-bento-item:focus-visible {
    transform: translate(-1px, -2px); box-shadow: 5px 7px 0 var(--paper-3); border-color: var(--rose-ink);
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .ach-icon-bubble { display: none; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"][data-theme] .ach-name { color: var(--ink); font-weight: 800; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .ach-desc { font-size: 1rem; color: var(--ink); }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .ach-link-label {
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--rose-ink);
}

/* "cool things i've done", "in the news", family milestones: §20 cards.
   The milestone cards and the logo-wall captions are styled INLINE in the
   markup (pro depends on those inline values), so their gremlin overrides
   need !important. Scoped to shojo gremlin on this page only. */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .achievement-year {
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; text-transform: none; color: var(--rose-ink);
}
/* press-year: css/a11y.css pins it to white-on-#B0126B with !important (the
   fix for white on pastel accent). Here it is ink on a pale wash instead,
   9:1+ in both themes, so the pin is overridden in kind. */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .press-year {
    display: inline-block; width: auto;
    font-weight: 800; font-size: 0.875rem; color: var(--ink) !important;
    background: var(--rose-wash) !important; border-radius: 7px 11px 7px 11px; padding: 3px 11px;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .milestone-intro {
    text-align: left !important; margin-left: 0 !important; font-weight: 600; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] :is(.achievement-title, .press-title) {
    font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--ink);
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] :is(.achievement-org, .press-source) { font-weight: 700; font-style: normal; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] :is(.achievement-description, .press-description) {
    font-weight: 600; font-size: 1rem; color: var(--ink);
}

:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .milestone-card {
    background: var(--paper-2) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .milestone-date {
    font-size: 0.875rem !important; letter-spacing: 0.02em !important; text-transform: none !important;
    font-weight: 800 !important; color: var(--rose-ink) !important;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .milestone-card h3 {
    font-family: var(--font-display); font-weight: 700 !important; font-size: 1.3rem !important; line-height: 1.2; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .milestone-card p {
    font-weight: 600; font-size: 1rem !important; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .milestone-more {
    display: inline-block; font-weight: 700 !important; font-size: 1rem !important; color: var(--ink) !important;
    border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .milestone-card:hover .milestone-more,
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .milestone-card:focus-visible .milestone-more { color: var(--rose-ink) !important; border-color: var(--rose-ink); }

:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .logos-footnote {
    font-family: var(--font-ui) !important; font-weight: 700; font-size: 1rem !important; color: var(--ink-2) !important;
}
/* logo wall captions ("site reliability", "grad student"): inline DM Mono */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .logo-card [style*="DM Mono"] {
    font-family: var(--font-ui) !important; font-weight: 800; font-size: 0.875rem !important; letter-spacing: 0.01em;
}

/* "see all the ... stuff": sat inline, glued to the next heading. Own line. */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .see-all-link {
    display: table;
    margin: 28px 0 0;
    font-weight: 700; font-size: 1.05rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.2em;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .see-all-link:hover,
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .see-all-link:focus-visible { color: var(--rose-ink); border-color: var(--rose-ink); }

:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] :is(.laptop-intro, .hat-intro) {
    font-weight: 600; font-size: 1.1rem; color: var(--ink);
}



/* ── 25. Hat shelf (about) ──────────────────────────────────────────────────
   Sara: "the hat shelf feels super messy". It was a three-column board
   (panel | stack | shelf) in one box: the detail panel floated alone top-left,
   "pick some hats" sat in a 300px void, 10px uppercase labels, and two
   hardcoded colours only worked in dark mode.

   Now two columns, read left to right the way you use it:
     SHELF   the hats sit on hand-drawn planks, one plank per row, with
             handwritten "at work" / "outside work" tags.
     MIRROR  the stack on a blue wash (the page's second blob), with the
             capacity line and status under it. The stage grows with the
             stack, so six hats never climb over the label or out of the box.
     DETAIL  the card for the focused hat sits under the shelf, in what used
             to be dead space. Phone: shelf, mirror, detail, one column.
   Chips and stacked hats are real <button>s now (keyboard + screen reader).
   Phone: one column, shelf first. Interaction and copy are unchanged.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-shelf-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "shelf mirror" "panel mirror";
    grid-template-rows: auto 1fr;
    gap: 36px 56px;
    align-items: start;
    padding: 36px 40px 40px;
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    box-shadow: var(--card-offset);
}

/* SHELF */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-shelf-right { grid-area: shelf; gap: 30px; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-panel { grid-area: panel; align-self: start; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-shelf-section-label,
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-stack-label {
    font-family: var(--font-note);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-2);   /* = the value css/a11y.css already pins these labels to */
    display: inline-block;
    transform: rotate(-2deg);
    margin-bottom: 14px;
}

:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip-grid {
    grid-template-columns: repeat(auto-fill, 84px);
    gap: 22px 18px;
}

:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip {
    appearance: none;
    background: none;
    border: 0;
    padding: 0 0 8px;
    margin: 0;
    color: inherit;
    font: inherit;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}
/* the plank: each chip draws its stretch, reaching into the column gap, so a
   full row reads as one continuous hand-drawn shelf */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip::after {
    content: '';
    position: absolute;
    left: -9px; right: -9px; top: 56px;
    height: 7px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 7' preserveAspectRatio='none'%3E%3Cpath d='M0 3.6 C17 2.2 34 4.8 51 3.4 C68 2 85 4.6 102 3.4' fill='none' stroke='%23C4A8E0' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip-hat { width: 84px; height: 58px; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip-label {
    font-weight: 800; font-size: 0.9rem; color: var(--ink); margin-top: 10px; line-height: 1.15;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip:focus-visible {
    outline: 2px solid var(--rose-ink);
    outline-offset: 4px;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip.hat-worn .hat-chip-hat { opacity: 0.22; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip.hat-worn .hat-chip-label { color: var(--ink-2); }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip.hat-worn,
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip.hat-locked { opacity: 1; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip.hat-locked .hat-chip-hat { opacity: 0.4; }

/* MIRROR */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-mirror {
    grid-area: mirror;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-stack-zone { position: relative; padding-top: 4px; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-stack-stage {
    --stage-blob: 290px;
    width: 100%;
    max-width: 300px;
    height: auto;
    min-height: var(--stage-blob);   /* empty size; hatRender() grows it to fit the stack */
    margin: 0 auto;
    position: relative;
    background: none;
    transition: height 0.2s ease;
}
/* flat organic blob, same wash as the page's blue blob, anchored to the floor
   so a tall stack rises out of it instead of pushing it around */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-stack-stage::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--stage-blob);
    background: var(--peri-wash);
    border-radius: 62% 38% 55% 45% / 48% 42% 58% 52%;
    z-index: 0;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-empty-state { position: relative; z-index: 1; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-stack-item {
    appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-stack-item.hat-focused,
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-stack-item:focus-visible {
    outline: 2px solid var(--rose-ink);
    outline-offset: 3px;
    border-radius: 12px;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-empty-state {
    font-family: var(--font-note);
    font-style: normal;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--peri-ink);
    text-align: center;
    padding: 0 24px 110px;
    transform: rotate(-3deg);
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-capacity-bar {
    width: 160px; height: 6px; margin: 16px auto 0; background: var(--paper-3); border-radius: 999px;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-status-msg {
    font-weight: 700; font-size: 1rem; color: var(--ink); min-height: 24px; margin-top: 8px;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-remove-hint {
    font-weight: 600; font-size: 0.9rem; color: var(--ink-2); opacity: 1; min-height: 0;
}

/* detail card (a §20 card) */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-panel { padding: 20px 22px; min-height: 0; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-panel-empty {
    color: var(--ink-2); font-weight: 600; font-size: 1rem; line-height: 1.55; min-height: 0;
    justify-content: flex-start; text-align: left;
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-panel-name {
    font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.1; color: var(--ink);
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-panel-desc {
    font-weight: 600; font-size: 1rem; line-height: 1.6; color: var(--ink);
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-panel-link {
    display: inline-flex; gap: var(--doodle-gap); align-items: baseline;
    background: none; box-shadow: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
    padding: 0 0 0.22em; font-weight: 700; font-size: 1.02rem; color: var(--ink);
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-panel-link::after {
    content: '\2726'; font-family: system-ui, 'Apple Symbols', sans-serif; font-size: 0.85em; color: var(--rose-ink);
}
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-panel-link:hover,
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-panel-link:focus-visible { background: none; color: var(--rose-ink); border-color: var(--rose-ink); }

@media (max-width: 900px) {
    :root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-shelf-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas: "shelf" "mirror" "panel";
        grid-template-rows: auto;
        max-width: 560px;
        margin-left: auto; margin-right: auto;
        padding: 26px 20px 28px;
    }
    :root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip-grid { justify-content: start; }
}
@media (max-width: 600px) {
    :root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-stack-stage { --stage-blob: 250px; max-width: 280px; }
    :root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-empty-state { padding-bottom: 90px; }
}
@media (max-width: 420px) {
    :root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip-grid { grid-template-columns: repeat(auto-fill, 76px); gap: 20px 14px; }
    :root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip-hat { width: 76px; height: 54px; }
    :root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-chip::after { left: -7px; right: -7px; top: 52px; }
}

/* about: the school flip cards keep their school colours (brand, like the logo
   wall), but their small print comes up to the 14px floor. */
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] :is(.edu-honors-gremlin, .edu-project, .edu-project *, .report-card-course, .flip-hint, .achievement-org, .press-source) { font-size: 0.875rem; }
:root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .report-card-label { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.02em; }


/* ── 26. Work page ──────────────────────────────────────────────────────────
   work.html composition. Scoped to data-page="work". Hero sticker: "work"
   (the database-to-server one), kept. Filter chips are the §22 shape; the
   pressed one wears the pink wash. Project cards are §20 paper, sitting
   straight (no tilt, no hover jump). The career-arc cards and testimonial
   previews are styled INLINE for pro, so their gremlin overrides need
   !important; both lose their left side-stripe (ANTISLOP).
   ───────────────────────────────────────────────────────────────────────── */

/* hero reads left like about.html (the page CSS centres it) */
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .page-hero { text-align: left; }
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .page-subtitle { margin-left: 0; margin-right: 0; }

/* filter chips. The bar fades in from opacity 0 via a keyframe, and §13 kills
   every gremlin animation under reduced motion, so the filters stayed
   invisible there. Gremlin shows them outright (pro was never affected). */
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .filter-bar {
    gap: 10px; margin-bottom: 36px;
    opacity: 1; transform: none; animation: none;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .filter-btn {
    font-size: 0.95rem;
    padding: 8px 18px;
    min-height: 40px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--hairline);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .filter-btn:hover { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .filter-btn.active {
    background: var(--rose-wash);
    box-shadow: inset 0 0 0 1px var(--rose-ink);
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .filter-btn:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 3px; }

/* project cards */
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .projects-grid { gap: 28px; }
/* the blue blob runs past the hero into the grid: everything after the hero
   sits on top of the printed shape instead of under it (hero is z-index 1) */
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] main > :not(.page-hero) { position: relative; z-index: 1; }
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .project-card { padding: 28px 28px 24px; }
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .project-title {
    font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; color: var(--ink);
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .project-card[data-active] .project-title { padding-right: 88px; }   /* room for the Active chip */
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .project-company {
    font-weight: 700; font-size: 0.95rem; color: var(--ink-2); margin: 4px 0 10px;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .project-tag {
    font-weight: 800; font-size: 0.875rem; color: var(--ink); background: var(--peri-wash);
    border-radius: 7px 11px 7px 11px; padding: 3px 11px;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .project-tag + .project-tag { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .project-description {
    font-weight: 600; font-size: 1rem; line-height: 1.65; color: var(--ink);
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .project-tech {
    font-weight: 700; font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); border-top-color: var(--hairline);
}

/* "Active": a sage chip with a still dot, not a glowing green pill.
   css/a11y.css pins the old green with !important, so this answers in kind;
   --ink on --sage-wash is 8:1+ in both themes. */
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .active-badge {
    top: 24px; right: 22px;
    gap: 7px;
    background: var(--sage-wash) !important;
    box-shadow: none;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .active-badge::before {
    background: var(--sage-ink); animation: none; width: 7px; height: 7px;
}

/* the path here (career arc) */
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .career-arc { margin: 96px 0 72px !important; }
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] :is(.arc-heading, .testimonials-teaser h2) {
    font-family: var(--font-display);
    font-weight: 700 !important;
    font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
    line-height: 1;
    letter-spacing: var(--display-track);
    color: var(--ink) !important;
    text-align: left !important;
    margin: 0 0 14px !important;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-intro {
    text-align: left !important; margin: 0 0 32px !important; font-weight: 600; font-size: 1.1rem; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-grid { gap: 24px !important; }
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-card {
    background: var(--paper-2) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: var(--card-offset);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-card:hover,
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-card:focus-visible {
    transform: translate(-1px, -2px); box-shadow: 5px 7px 0 var(--paper-3); border-color: var(--rose-ink) !important;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-date {
    font-size: 0.875rem !important; letter-spacing: 0.02em !important; text-transform: none !important;
    font-weight: 800 !important; color: var(--rose-ink) !important;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-card h3 {
    font-family: var(--font-display); font-weight: 700 !important; font-size: 1.3rem !important; line-height: 1.2; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-card p {
    font-weight: 600; font-size: 1rem !important; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-more {
    display: inline-block; font-weight: 700 !important; font-size: 1rem !important; color: var(--ink) !important;
    border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-card:hover .arc-more,
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .arc-card:focus-visible .arc-more { color: var(--rose-ink) !important; border-color: var(--rose-ink); }

/* what colleagues say */
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .testimonials-teaser { border-top: 0; margin-top: 72px; padding-top: 0; }
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .testimonials-preview {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin: 28px 0 32px;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .testimonial-preview-card {
    display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 14px;
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    padding: 24px 26px;
    transform: none;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .testimonial-preview-quote {
    font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 1.2rem; line-height: 1.45; color: var(--ink); margin: 0;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .testimonial-preview-author {
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.01em; color: var(--rose-ink); margin: 0;
}
:root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .testimonials-link:hover { transform: none; }

@media (max-width: 767px) {
    /* §19 means to hide the hero sticker on phones, but its show rule
       (…[data-theme="light"] .page-hero-sticker.is-light) out-ranks the hide,
       so the sticker sat on the title. Reported for the §19 owner. */
    :root[data-skin="shojo"][data-page="work"][data-mode="gremlin"][data-theme] .page-hero-sticker.page-hero-sticker { display: none; }
    :root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .project-card { padding: 22px 20px 20px; }
    :root[data-skin="shojo"][data-page="work"][data-mode="gremlin"] .career-arc { margin: 64px 0 48px !important; }
}


/* ── 27. Projects page ──────────────────────────────────────────────────────
   projects.html composition. Scoped to data-page="projects". CSS only: the
   cards between the proj-cards markers belong to tools/gen_projects.py, so
   every hook here is a class the generator already writes. Hero sticker:
   "projects" (the house-rules book, Codex 2026-09-29). The metric headers go from two-stop
   gradients to one flat wash per accent (the CSV's accent column still picks
   the colour); group titles take the §21 display line; chips hit 14px.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page="projects"] { --pc-peach: #FCE9D6; }
:root[data-skin="shojo"][data-page="projects"][data-theme="dark"] { --pc-peach: #3A2A24; }

/* hero reads left like about.html (the page CSS centres it) */
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .page-hero { text-align: left; }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .page-subtitle { margin-left: 0; margin-right: 0; }

/* filter chips: same as §26 (the bar is plain markup above the generated cards) */
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .filter-bar { gap: 10px; margin-bottom: 48px; }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .filter-btn {
    font-size: 0.95rem;
    padding: 8px 18px;
    min-height: 40px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--hairline);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .filter-btn:hover { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .filter-btn.active { background: var(--rose-wash); box-shadow: inset 0 0 0 1px var(--rose-ink); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .filter-btn:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 3px; }

/* group headers */
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .proj-group { margin-bottom: 80px; }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .proj-group-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.02;
    letter-spacing: var(--display-track);
    color: var(--ink);
    margin-bottom: 10px;
}
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .proj-group-sub {
    font-weight: 600; font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); max-width: 40em; margin-bottom: 28px;
}

/* cards: §20 paper (overflow + zero padding stay from the generator's CSS) */
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards { gap: 26px; }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-hdr { border-bottom: 1px solid var(--hairline); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-hdr-img { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-hdr-img img { box-shadow: 0 2px 8px var(--lift); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-pink     { background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-blue     { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-lavender { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-mint     { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-peach    { background: var(--pc-peach); }

:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-hdr-metric { color: var(--ink); gap: 8px; }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-hdr-metric .pc-ico { opacity: 0.75; }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-hdr-metric .pc-big {
    font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; letter-spacing: var(--display-track); color: var(--ink);
}
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-hdr-metric .pc-big.word { font-size: 1.7rem; }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-hdr-metric .pc-cap {
    font-family: var(--font-note); font-weight: 700; font-size: 1.35rem; line-height: 1; text-transform: none; letter-spacing: 0;
    color: var(--ink-2); opacity: 1; transform: rotate(-2deg);
}
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-mpill {
    font-weight: 800; font-size: 0.875rem; color: var(--ink); background: var(--paper-2);
    border: 1px solid var(--hairline); border-radius: 7px 11px 7px 11px; padding: 4px 11px;
}

:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-body { padding: 20px 22px 22px; gap: 11px; }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .project-title {
    font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; color: var(--ink);
}
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .project-tag {
    font-weight: 800; font-size: 0.875rem; text-transform: none; color: var(--ink);
    background: var(--peri-wash); border: 0; border-radius: 7px 11px 7px 11px; padding: 3px 10px;
}
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .project-tag + .project-tag { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .project-tag + .project-tag + .project-tag { background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .project-description {
    font-weight: 600; font-size: 1rem; line-height: 1.6; color: var(--ink);
}
/* stack chips: quieter than the tags (outline, not wash) so the card has one loud row */
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-skills { gap: 6px 7px; }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-skills .skill {
    font-weight: 700; font-size: 0.875rem; color: var(--ink-2);
    background: none; border: 1px solid var(--hairline); border-radius: 7px 11px 7px 11px; padding: 2px 9px;
}

/* "view on GitHub →" / "read more →": underlined text links, pink on hover */
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-links { gap: 12px 22px; padding-top: 6px; }
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-readmore {
    font-weight: 700; font-size: 1rem; color: var(--ink);
    border-bottom: 1px solid var(--ink); padding: 0 0 2px;
}
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-readmore:hover,
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-readmore:focus-visible { color: var(--rose-ink); border-bottom-color: var(--rose-ink); }

/* "Active": same sage chip as work (§26); css/a11y.css pins the old green with !important */
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .active-badge {
    gap: 7px; margin-bottom: 2px;
    background: var(--sage-wash) !important;
    box-shadow: none;
}
:root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .active-badge::before {
    background: var(--sage-ink); animation: none; width: 7px; height: 7px;
}

@media (max-width: 767px) {
    /* same §19 phone-sticker fix as §26 */
    :root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"][data-theme] .page-hero-sticker.page-hero-sticker { display: none; }
}
@media (max-width: 560px) {
    :root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .proj-group { margin-bottom: 56px; }
    :root[data-skin="shojo"][data-page="projects"][data-mode="gremlin"] .pcards .pc-body { padding: 18px 18px 20px; }
}


/* ── 28. Writing page ───────────────────────────────────────────────────────
   writing.html composition. Scoped to data-page="writing". 14 §20 issue cards
   in three groups; the Substack button becomes a doodle link; the featured
   paper and the Shut Up & Write shout-out lose their inline side stripes
   (ANTISLOP). Inline styles stay in the markup (pro depends on them), so the
   overrides of those need !important, scoped to shojo gremlin on this page.
   ───────────────────────────────────────────────────────────────────────── */

/* hero: left-aligned like about, same top space so the §19 blobs line up */
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .page-hero { text-align: left; padding-top: 60px; }
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .page-subtitle { margin: 0 0 22px; }

/* Substack: a doodle link, not a pink slab. css/a11y.css pins .newsletter-cta
   to white on #B0126B with !important, so this answers in kind. */
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .newsletter-cta {
    background: none !important;
    color: var(--ink) !important;
    padding: 0 0 0.22em;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .newsletter-cta:hover,
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .newsletter-cta:focus-visible {
    color: var(--rose-ink) !important;
    box-shadow: none;
    transform: none;
}

/* group headings: "academic stuff i wrote" (h2.series-title) and the two
   inline-styled h2s ("newsletter posts", "elsewhere i've written") share one
   display line, a step under §21's section header. */
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] :is(.series-title, .writing-group-title) {
    font-family: var(--font-display);
    font-weight: 700 !important;
    font-size: clamp(2rem, 4.2vw, 3rem) !important;
    line-height: 1.05;
    letter-spacing: var(--display-track);
    color: var(--ink) !important;
    -webkit-text-stroke: 0;
    text-transform: none;
    margin: 4.5rem 0 1.5rem !important;
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .series-header .series-title { margin-top: 0 !important; }
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .series-description {
    font-weight: 600; font-size: 1.1rem; line-height: 1.6; color: var(--ink); max-width: 40em;
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .series-header { margin-bottom: 28px; }

/* "i'm on google scholar now": a plain underlined link in ink */
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .scholar-link {
    color: var(--ink) !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .scholar-link:hover,
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .scholar-link:focus-visible { color: var(--rose-ink) !important; border-color: var(--rose-ink); }

/* issue cards (§20 paper). The old hover scaled the card 1.02; §20's lift wins. */
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issues-grid { gap: 22px; }
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-card { padding: 24px 24px 22px; }
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] div.issue-card:hover { transform: none; box-shadow: var(--card-offset); border-color: var(--hairline); }
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-featured {
    border-left: 1px solid var(--hairline) !important;   /* the inline 4px stripe goes */
    background: var(--rose-wash);
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-number {
    display: inline-block;
    font-family: var(--font-ui);
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.01em;
    color: var(--ink);
    background: var(--paper-2);
    border-radius: 7px 11px 7px 11px;
    padding: 3px 11px;
    margin-bottom: 12px;
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-title {
    font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--ink);
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-description {
    font-weight: 600; font-size: 1rem; line-height: 1.6; color: var(--ink);
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-date {
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--rose-ink);
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-date > span { font-weight: 800; }
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-video-link {
    font-weight: 700; font-size: 0.95rem !important; color: var(--ink) !important;
    border-bottom: 1px solid var(--ink); padding-bottom: 1px;
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-video-link > :is(i, svg) { display: none; }
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-video-link:hover,
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .issue-video-link:focus-visible { color: var(--rose-ink) !important; border-color: var(--rose-ink); }

/* Shut Up & Write shout-out: a small taped note, left edge, no stripe, no icon */
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .shoutout-card {
    background: var(--paper-2) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: var(--card-offset);
    margin: 4rem 0 0 !important;
    transform: rotate(-1deg);
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .shoutout-card > span[aria-hidden] { display: none !important; }
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .shoutout-card p {
    font-weight: 600; font-size: 1.05rem !important; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .shoutout-card p > span[aria-hidden] { color: var(--rose-ink) !important; }
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .shoutout-card:hover,
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .shoutout-card:focus-visible {
    transform: rotate(-1deg) translate(-1px, -2px); border-color: var(--rose-ink) !important; box-shadow: 5px 7px 0 var(--paper-3);
}
@media (prefers-reduced-motion: reduce) {
    :root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .shoutout-card:hover { transform: rotate(-1deg); }
}

/* .series-section fades in with an inline keyframe from opacity 0; §13 kills
   animation under reduced motion, which left all three groups invisible.
   The groups simply sit on the page here (same call as §26). */
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .series-section { opacity: 1; transform: none; animation: none; }
/* keep the long title clear of the hero sticker (the sticker hides <768px) */
@media (min-width: 768px) {
    :root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"] .page-title { padding-right: calc(clamp(110px, 11vw, 160px) + clamp(24px, 9vw, 150px)); }
}

/* phones: §19 means to hide the sticker <768px, but its show rule (with
   .is-light/.is-dark) out-ranks the hide, so it sat on the title. Page-scoped
   fix here; the shared fix belongs in §19. */
@media (max-width: 767px) {
    :root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) { display: none; }
}

/* spot illustration: the coffee cup + pencil (images/stickers/spot/, light and
   dark twins) sits in the Shut Up & Write note. Hidden outside shojo gremlin,
   so pro never lays it out; width/height attrs reserve the box (zero CLS). */
:root[data-skin="shojo"][data-page="writing"] .spot-illo { display: none; }
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"][data-theme="light"] .spot-illo.is-light,
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"][data-theme="dark"]  .spot-illo.is-dark {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 84px;
    margin: -14px 2px -8px -4px;
    transform: rotate(-5deg);
    pointer-events: none;
}
:root[data-skin="shojo"][data-page="writing"][data-mode="gremlin"][data-accents="off"] .spot-illo { display: none !important; }



/* ── 29. Talks page ─────────────────────────────────────────────────────────
   talks.html composition. Scoped to data-page="talks". The tcard timeline
   (§20 paper cards on a hairline spine, dates as small paper keycaps), tchips
   on the §22 chip shape coloured by talk type, the gremlin publication cards
   (§20 paper, straightened, year badge + journal pill as chips), and the
   speaker button as a doodle link. The pub-citation side stripe (pro-only
   list) was removed in talks.html's own CSS, with Sara's OK to touch pro.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .page-hero { text-align: left; padding-top: 60px; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .page-subtitle { margin: 0; }

/* timeline: spine + dots + date keycaps */
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .talks-timeline { max-width: 820px; margin: 0; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .talks-timeline::before { background: var(--hairline); width: 1px; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tdot {
    background: var(--paper-2); border: 2px solid var(--rose-ink); width: 13px; height: 13px;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .twhen {
    font-family: var(--font-ui);
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 9px 12px 9px 12px;
    box-shadow: 2px 3px 0 var(--paper-3);
    padding: 7px 4px 8px;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .twhen .mo { font-weight: 800; font-size: 0.875rem; letter-spacing: 0.04em; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .twhen .yr { font-weight: 700; font-size: 0.875rem; color: var(--ink-2); margin-top: 0; }

/* the card (§20 supplies the paper); overflow stays hidden for the detail drawer */
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tnode { margin-bottom: 22px; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .thead { padding: 20px 22px; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .thead:focus-visible { outline: 3px solid var(--rose-ink); outline-offset: 2px; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tevent {
    font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--ink);
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .ttitle {
    font-weight: 700; font-style: normal; font-size: 1rem; line-height: 1.45; color: var(--ink-2); margin-top: 6px;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tdate {
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--rose-ink); margin-top: 10px;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tchips { gap: 8px; margin-top: 12px; }
/* chip colour by talk type, the nav-tab washes (§22 sets shape, ink, 14px) */
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tchip.c-panel    { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tchip.c-poster   { background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tchip.c-workshop { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tchip.c-pres     { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .ttoggle {
    font-family: var(--font-ui); font-weight: 800; font-size: 0.875rem; color: var(--ink);
    border-bottom: 1px solid var(--ink); padding-bottom: 1px;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .thead:hover .ttoggle { color: var(--rose-ink); border-color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .ttoggle .lbl::after { font-family: system-ui, 'Apple Symbols', sans-serif; font-size: 0.75em; color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tnode.open .tdetail { border-top-color: var(--hairline); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tbody { padding: 18px 22px 22px; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tbody p { font-weight: 600; font-size: 1rem; line-height: 1.6; color: var(--ink); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tmeta { font-weight: 700; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2); margin-top: 14px; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tmeta a { color: var(--ink); border-bottom: 1px solid var(--ink); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tmeta a:hover,
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tmeta a:focus-visible { color: var(--rose-ink); border-color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .tshot { border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--card-offset); }

/* publications */
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] #publications-section { margin-top: 96px; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .scholar-link {
    color: var(--ink) !important; font-weight: 700 !important; border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .scholar-link:hover,
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .scholar-link:focus-visible { color: var(--rose-ink) !important; border-color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .publications-gremlin { gap: 22px; margin-top: 28px; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .pub-card-gremlin {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    transform: none;
    padding: 22px 22px 20px;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .pub-card-gremlin:hover { transform: none; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .pub-short-title {
    font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--ink); margin-bottom: 14px;
}
/* journal pill (§22 chip) + year badge beside it, both chips */
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .pub-pill { background: var(--peri-wash); margin-bottom: 0; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .pub-year-badge {
    font-family: var(--font-ui); font-weight: 800; font-size: 0.875rem; color: var(--ink);
    background: var(--rose-wash); border-radius: 7px 11px 7px 11px; padding: 5px 12px; margin-left: 6px;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .pub-read-link {
    display: table; margin-top: 12px;
    font-weight: 700; font-size: 1rem; color: var(--ink);
    border-bottom: 1px solid var(--ink); padding-bottom: 1px;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .pub-card-gremlin .pub-read-link:first-of-type { margin-top: 16px; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .pub-read-link:hover,
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .pub-read-link:focus-visible { color: var(--rose-ink); border-color: var(--rose-ink); text-decoration: none; }

/* speaker inquiry: left-aligned, display heading, doodle link instead of the
   gradient key. css/a11y.css pins .speak-cta to white on #B0126B !important. */
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .speak-section { text-align: left !important; margin: 96px 0 0 !important; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .speak-title {
    font-family: var(--font-display); font-weight: 700 !important; font-size: clamp(2rem, 4.2vw, 3rem) !important;
    line-height: 1.05; letter-spacing: var(--display-track); color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .speak-section p {
    margin-left: 0 !important; font-weight: 600; font-size: 1.1rem; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .speak-cta {
    background: none !important;
    color: var(--ink) !important;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0.22em;
    transform: none;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .speak-cta:hover,
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .speak-cta:focus-visible,
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .speak-cta:active {
    color: var(--rose-ink) !important; transform: none; box-shadow: none;
}

/* "where i talk at people" ran under the microphone sticker at 1440: the title
   keeps clear of it and wraps instead (the sticker hides <768px). */
@media (min-width: 768px) {
    :root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .page-title { padding-right: calc(clamp(110px, 11vw, 160px) + clamp(24px, 9vw, 150px)); }
}

/* phones: §19 means to hide the sticker <768px, but its show rule (with
   .is-light/.is-dark) out-ranks the hide, so it sat on the title. Page-scoped
   fix here; the shared fix belongs in §19. */
@media (max-width: 767px) {
    :root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) { display: none; }
}

/* spot illustration: the lanyard badge by "want me at your event?" (light and
   dark twins, gremlin only, width/height attrs reserve the box). */
:root[data-skin="shojo"][data-page="talks"] .spot-illo { display: none; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"] .speak-section { max-width: 780px !important; }
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"][data-theme="light"] .spot-illo.is-light,
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"][data-theme="dark"]  .spot-illo.is-dark {
    display: block;
    float: right;
    width: auto;
    height: 160px;
    margin: -12px 0 12px 28px;
    transform: rotate(5deg);
    pointer-events: none;
}
:root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"][data-accents="off"] .spot-illo { display: none !important; }
@media (max-width: 600px) {
    :root[data-skin="shojo"][data-page="talks"][data-mode="gremlin"][data-theme] .spot-illo:is(.is-light, .is-dark) { height: 104px; margin: -6px 0 8px 14px; }
}



/* ── 30. Maker page ─────────────────────────────────────────────────────────
   maker.html composition. Scoped to data-page="maker".
   The page had the heaviest glass on the site (19 backdrop-filter rules, pink
   frosted panels, tilted gallery cards). Glass goes; the page reads as paper on
   the desk, and the real maker photo is the texture: the Miku LED stand gets a
   tall slot in the gallery instead of one square among emoji placeholders.
     capabilities   the four machines become four wash tiles (rose / peri /
                    sage / lilac) drawn in CSS from the flat title/desc/machine
                    paragraphs, so no wrapper markup is needed.
     work with me   the inline accent side-stripe goes; the card sits on a
                    rose wash and the magenta button becomes an underlined link.
     note cards     the LinkedIn cards take about's milestone-card treatment.
   Inline styles in the markup belong to pro, so their gremlin overrides here
   carry !important (the same pattern as about's milestone cards).
   ───────────────────────────────────────────────────────────────────────── */

/* .about-section and .gallery-item start at opacity 0 and fade in with a
   keyframe. §13 turns every animation off under reduced motion, which left
   them invisible. Gremlin shows them outright (the calm first fold rule). */
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] :is(.about-section, .gallery-item) { opacity: 1; transform: none; animation: none; }

/* hero: left-aligned like about (the page CSS centres it) */
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .page-hero { text-align: left; }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .page-subtitle { margin: 0; }

/* the three text sections: §20 paper cards */
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section {
    background: var(--paper-2);
    background-image: none;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    padding: 32px 36px;
    margin-bottom: 40px;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.25rem);
    line-height: 1.05;
    letter-spacing: var(--display-track);
    text-transform: lowercase;
    color: var(--ink);
    margin-bottom: 16px;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section p {
    font-weight: 600; font-size: 1.05rem; line-height: 1.7; color: var(--ink); max-width: 46em;
}

/* capabilities: four wash tiles. Each tile is three stacked paragraphs
   (title, description, machine) sharing one wash, rounded top and bottom. */
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cap-title {
    font-family: var(--font-display);
    font-weight: 700 !important;
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--ink) !important;
    margin: 0 !important;
    padding: 20px 22px 6px;
    border-radius: 14px 14px 0 0;
    max-width: none;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cap-desc {
    margin: 0 !important;
    padding: 0 22px 10px;
    font-size: 1rem;
    max-width: none;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cap-machine {
    margin: 0 0 18px !important;
    padding: 2px 22px 20px;
    border-radius: 0 0 14px 14px;
    font-family: var(--font-ui) !important;
    font-weight: 800;
    font-size: 0.875rem !important;
    letter-spacing: 0.01em;
    color: var(--ink-2) !important;
    max-width: none;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cap-machine em { font-style: normal; }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :is(:nth-child(3), :nth-child(4), :nth-child(5)) { background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :is(:nth-child(6), :nth-child(7), :nth-child(8)) { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :is(:nth-child(9), :nth-child(10), :nth-child(11)) { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :is(:nth-child(12), :nth-child(13), :nth-child(14)) { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cap-foot {
    margin-top: 6px !important; font-size: 1rem !important; color: var(--ink-2) !important;
}

/* two tiles per row from tablet up: explicit placement, since the tiles are
   flat siblings (h2, intro, 4 x [title, desc, machine], footnote) */
@media (min-width: 769px) {
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 20px;
        row-gap: 0;
    }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :is(h2, :nth-child(2), .maker-cap-foot) { grid-column: 1 / -1; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(2) { margin-bottom: 22px; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(3)  { grid-area: 3 / 1; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(4)  { grid-area: 4 / 1; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(5)  { grid-area: 5 / 1; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(6)  { grid-area: 3 / 2; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(7)  { grid-area: 4 / 2; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(8)  { grid-area: 5 / 2; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(9)  { grid-area: 6 / 1; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(10) { grid-area: 7 / 1; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(11) { grid-area: 8 / 1; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(12) { grid-area: 6 / 2; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(13) { grid-area: 7 / 2; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > :nth-child(14) { grid-area: 8 / 2; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section:has(> .maker-cap-title) > .maker-cap-foot { grid-row: 9; }
    /* the machine line stretches so side-by-side tiles end on one baseline */
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cap-machine { align-self: stretch; }
}

/* work with me: rose wash, no side stripe, the button becomes a link */
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cta-card {
    background: var(--rose-wash);
    border: 1px solid var(--hairline) !important;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cta-row { text-align: left !important; margin-top: 26px !important; }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cta-link {
    display: inline-block !important;
    background: none !important;
    color: var(--ink) !important;
    padding: 0 0 0.22em !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--ink);
    font-weight: 800 !important;
    font-size: 1.15rem;
    opacity: 1 !important;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cta-link:hover,
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .maker-cta-link:focus-visible { color: var(--rose-ink) !important; border-color: var(--rose-ink); }

/* "recent projects" / "notes from the maker side": left-aligned display heads */
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .group-head { text-align: left !important; margin: 88px 0 28px !important; }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .group-head h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
    line-height: 1;
    letter-spacing: var(--display-track);
    color: var(--ink);
    margin-bottom: 14px !important;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .group-intro {
    margin: 0 !important; max-width: 40em !important; font-weight: 600; font-size: 1.1rem; color: var(--ink) !important;
}

/* gallery: paper cards, no tilt. The one real photo takes a tall slot
   (col 1, two rows) so it leads; the emoji tiles sit on pastel washes. */
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-grid { gap: 24px; }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    transform: none;
    display: flex;
    flex-direction: column;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item:nth-child(even) { transform: none; }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item:hover {
    transform: translate(-1px, -2px);
    box-shadow: 5px 7px 0 var(--paper-3);
    border-color: var(--rose-ink);
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-image {
    aspect-ratio: 16 / 10;
    background-image: none;
    font-size: 2.6rem;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item:nth-child(4n+2) .gallery-image { background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item:nth-child(4n+3) .gallery-image { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item:nth-child(4n+4) .gallery-image { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item:nth-child(4n+5) .gallery-image { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item:has(img) .gallery-image { background: var(--paper-3); }
/* real product photos (cropped 1:1 in auditions/photo-fix) fill their two-row slot square instead of 16:10 */
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item:has(img) .gallery-image { aspect-ratio: 1 / 1; }
/* hatsune-miku-led-gdq.jpeg is a screenshot of the AGDQ prize page: the photo
   of the stand is its left 41% (x 28-875, y 50-1180 of 2048x1215). Gremlin
   crops to just the photo, a 3:4 portrait; pro keeps the whole screenshot. */
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item:has(img[src*="hatsune-miku-led-gdq"]) .gallery-image { aspect-ratio: 847 / 1130; display: block; }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-image img[src*="hatsune-miku-led-gdq"] {
    width: 241.8%; max-width: none; height: auto; object-fit: fill;
    margin: -5.9% 0 0 -3.3%;
}
@media (min-width: 769px) {
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-item:has(img) { grid-row: span 2; }
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-caption { padding: 18px 22px 22px; }
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-title {
    font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .gallery-description { font-weight: 600; font-size: 1rem; line-height: 1.6; }

/* LinkedIn note cards: about's milestone-card treatment */
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .milestone-card {
    background: var(--paper-2) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .milestone-date {
    font-size: 0.875rem !important; letter-spacing: 0.02em !important; text-transform: none !important;
    font-weight: 800 !important; color: var(--rose-ink) !important;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .milestone-card h3 {
    font-family: var(--font-display); font-weight: 700 !important; font-size: 1.3rem !important; line-height: 1.2; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .milestone-card p {
    font-weight: 600; font-size: 1rem !important; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .milestone-more {
    display: inline-block; font-weight: 700 !important; font-size: 1rem !important; color: var(--ink) !important;
    border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .milestone-card:hover .milestone-more,
:root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .milestone-card:focus-visible .milestone-more { color: var(--rose-ink) !important; border-color: var(--rose-ink); }

@media (max-width: 768px) {
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .about-section { padding: 24px 20px; }
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"] .group-head { margin: 64px 0 22px !important; }}
@media (max-width: 767px) {
    /* §19's phone hide (0,6,0) loses to its own theme-twin show rule (0,7,0),
       so the sticker sat on the title at 390. Same patch as work/writing. */
    :root[data-skin="shojo"][data-page="maker"][data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) { display: none; }
}


/* ── 33. Testimonials ───────────────────────────────────────────────────────
   testimonials.html. Two long LinkedIn recommendations. The page had no
   .page-hero, so tools/apply_shojo_page.py wraps back link + title +
   subtitle in one (a bare div in pro). Quote cards are §20 paper with a big
   rose quote mark hung in the corner; "read more" is a §7 doodle link.
   ───────────────────────────────────────────────────────────────────────── */

/* hero sits right at the top of .container (6rem, 5rem on phones) */
:root[data-skin="shojo"][data-page="testimonials"] { --page-hero-lift: 96px; }
@media (max-width: 768px) {
    :root[data-skin="shojo"][data-page="testimonials"] { --page-hero-lift: 80px; }
}

:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .back-link {
    font-weight: 700; font-size: 1rem; color: var(--ink-2); margin-bottom: 28px;
}
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .back-link:hover,
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .back-link:focus-visible { color: var(--rose-ink); transform: none; }
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .back-link > :is(i, svg) { display: none; }
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .page-subtitle { margin-bottom: 0; }

:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .testimonials-grid { gap: 40px; max-width: 900px; margin-inline: auto; position: relative; z-index: 2; }   /* centred under the header card (it sat flush left) */

/* the §20 card, minus the old side stripe, tilt and fade-up */
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .testimonial-card {
    position: relative;
    padding: 36px 40px 30px 40px;
    animation: none;
}
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .testimonial-card:hover { transform: none; box-shadow: var(--card-offset); }
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .testimonial-card::before {
    content: "\201C" / "";
    position: absolute;
    top: -30px; left: 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 6rem;
    line-height: 1;
    color: var(--rose);
    pointer-events: none;
}

:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .testimonial-header { margin-bottom: 18px; gap: 12px 24px; }
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .author-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; }
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .author-name a {
    color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px;
}
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .author-name a:hover,
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .author-name a:focus-visible { color: var(--rose-ink); border-color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .author-title { font-weight: 700; font-size: 1rem; color: var(--ink-2); }
/* "managed sara directly at ...": a §22 chip on the blue wash. css/a11y.css
   pins its colour to dark ink with !important (for the old lavender pill),
   which is dark-on-dark on the night wash, so the override is !important too. */
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .author-relationship {
    align-self: flex-start;
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.01em;
    color: var(--ink) !important; background: var(--peri-wash);
    border-radius: 7px 11px 7px 11px; padding: 5px 12px; margin-top: 6px;
}
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .testimonial-date {
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--rose-ink); white-space: nowrap;
}

/* the short pull quote reads like the homepage's display lines; no faux italic */
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .quote-short {
    font-family: var(--font-display); font-weight: 500; font-style: normal;
    font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.45; color: var(--ink);
}
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .quote-full p {
    font-weight: 600; font-size: 1.05rem; line-height: 1.7; color: var(--ink); max-width: 44em;
}

:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .read-more-btn {
    margin-top: 20px; padding: 0 0 0.22em; background: none; cursor: pointer; text-transform: lowercase;
}
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .read-more-btn:hover { transform: none; color: var(--rose-ink); border-color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .read-more-btn:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 4px; }

/* hero sticker (speech bubbles). §19 means to hide stickers under 768px but its
   theme show rule out-ranks the hide; here that is kept on purpose: it stays on phones, small, in the back-link
   row (the title starts ~52px down, the sticker ends at ~40px), so it clears. */
@media (max-width: 767px) {
    :root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) {
        top: -6px; right: 0; width: 64px;
    }
}
@media (max-width: 768px) {
    :root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .testimonial-card { padding: 30px 22px 24px; }
    :root[data-skin="shojo"][data-page="testimonials"][data-mode="gremlin"] .testimonial-card::before { font-size: 4.5rem; top: -22px; left: 12px; }
}


/* ── 34. Case studies ───────────────────────────────────────────────────────
   case-studies.html. The cards live between the proj-cards generator markers
   (tools/gen_projects.py owns that markup), so this is CSS only: §20 paper,
   flat washes for the metric headers, Fraunces numbers, §22 chips at 14px,
   and the "read more" links drawn as §7 underlines.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .page-hero { text-align: left; }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .page-subtitle { margin: 0; }
/* hero sticker (magnifier on a blueprint). Phones: the title starts at the top
   of the hero, so the hero gains a 64px band and the sticker sits in it on the
   right, opposite the pink corner blob; it never shares a line with the title. */
@media (max-width: 767px) {
    :root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .page-hero { padding-top: 64px; }
    :root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) {
        top: -4px; right: 0; width: 76px;
    }
}

/* filters: §22 chips; the pressed one takes the rose wash + an ink outline */
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .filter-bar {
    gap: 10px; margin-bottom: 32px;
    /* its fade-up starts at opacity 0 and never ran here: calm first fold, just show it */
    opacity: 1; transform: none; animation: none;
}
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .filter-btn { cursor: pointer; padding: 7px 14px; }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .filter-btn:hover { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .filter-btn.active { background: var(--rose-wash); box-shadow: inset 0 0 0 1.5px var(--ink); }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .filter-btn:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 2px; }

:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards { gap: 26px; }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .project-card { overflow: hidden; }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .project-card:hover {
    transform: translate(-1px, -2px); box-shadow: 5px 7px 0 var(--paper-3); border-color: var(--rose-ink);
}

/* metric headers: flat washes (the old pastel gradients were light-only) */
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-hdr { border-bottom: 1px solid var(--hairline); }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-hdr-metric { color: var(--ink); background-image: none; }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards :is(.pc-pink, .pc-peach) { background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-blue { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-mint { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-lavender { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-hdr-img { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-hdr-img img { box-shadow: var(--card-offset); }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-ico { display: none; }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-hdr-metric .pc-big {
    font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; letter-spacing: var(--display-track);
}
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-hdr-metric .pc-big.word { font-size: 1.9rem; }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-hdr-metric .pc-cap {
    font-family: var(--font-note); font-weight: 700; font-size: 1.3rem; text-transform: none; letter-spacing: 0; opacity: 1; color: var(--ink-2);
}
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-mpill {
    font-weight: 800; font-size: 0.875rem; color: var(--ink); background: var(--paper-2);
    border: 1px solid var(--hairline); border-radius: 7px 11px 7px 11px; padding: 4px 11px;
}

:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-body { padding: 18px 20px 20px; gap: 11px; }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .project-title {
    font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; color: var(--ink);
}
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .project-description { font-weight: 600; font-size: 1rem; line-height: 1.55; color: var(--ink); }

/* "Active": a11y.css pins it to white on deep green with !important; here it
   is ink on the sage wash (8:1+ both themes) with a solid sage dot. */
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .active-badge {
    background: var(--sage-wash) !important; box-shadow: none; margin: 0;
}
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .active-badge::before { background: var(--sage-ink); animation: none; }

/* category tags + skills: §22 chip shape at the 14px floor, lighter weight for skills */
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards :is(.project-tag, .pc-skills .skill) {
    font-family: var(--font-ui); font-size: 0.875rem; text-transform: none; color: var(--ink);
    border: 0; border-radius: 7px 11px 7px 11px; padding: 3px 10px;
}
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .project-tag { font-weight: 800; background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-skills .skill { font-weight: 700; background: var(--paper-3); }

:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-links { gap: 10px 22px; padding-top: 6px; }
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-readmore {
    font-weight: 700; font-size: 1rem; color: var(--ink);
    border-bottom: 1px solid var(--ink); padding: 0 0 0.2em;
}
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-readmore:hover,
:root[data-skin="shojo"][data-page="case-studies"][data-mode="gremlin"] .pcards .pc-readmore:focus-visible { color: var(--rose-ink); border-color: var(--rose-ink); }


/* ── 35. Shelf (the Toolshed) ───────────────────────────────────────────────
   shelf.html, already on css/site.css; cards, section heads and filter chips
   are rendered by js/shelf.js, so everything here keys off its classes. The
   applier wraps .shelf-intro in a .page-hero and hooks .page-title /
   .page-subtitle (site.css has no rules for either, so pro is unchanged).
   ───────────────────────────────────────────────────────────────────────── */

/* body is the container here: hero top = nav + 34px of body padding */
:root[data-skin="shojo"][data-page="shelf"] { --page-hero-lift: calc(var(--nav-h, 64px) + 34px); }
/* shelf's body IS the 1000px column, and the shared body { overflow-x: clip } clips at its box, so the blobs
   and the footer were boxed in. In gremlin the column moves to <main>: body
   goes full width, blobs reach the window edge, footer runs edge to edge. */
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] body { max-width: none; padding: calc(var(--nav-h) + 34px) 0 0; }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] #main-content { max-width: 1000px; margin: 0 auto; padding: 0 20px 40px; }
/* everything after the hero sits above its blobs (the hero is z-index 1) */
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] :is(.shelf-demo-banner, .shelf-controls, #shelf-root) { position: relative; z-index: 2; }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-intro { margin-bottom: 0; }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-intro .page-subtitle { max-width: 34em; color: var(--ink-2); }
/* hero sticker (pegboard). The shelf column is 1000px, so §19's inset put it on
   the end of the subtitle at 1440: pin it to the column's right edge instead.
   Phones: same 64px band as case studies. */
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) { right: 0; top: -6px; }
@media (max-width: 767px) {
    :root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .page-hero { padding-top: 64px; }
    :root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) {
        top: -4px; right: 0; width: 64px;
    }
}

/* demo banner: a §20 card; its pill becomes a doodle link. css/a11y.css pins
   .banner-btn to white on #B0126B with !important, so the override is too
   (ink on paper, 9:1+ both themes). */
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-demo-banner {
    background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 14px;
    box-shadow: var(--card-offset); padding: 18px 22px; color: var(--ink); font-weight: 700; font-size: 1.05rem;
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-demo-banner:hover,
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-demo-banner:focus-visible {
    transform: translate(-1px, -2px); box-shadow: 5px 7px 0 var(--paper-3); border-color: var(--rose-ink);
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-demo-banner .banner-btn {
    background: none !important; color: var(--ink) !important;
    border-radius: 0; padding: 0 0 0.22em; font-size: 1.05rem;
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-demo-banner:hover .banner-btn,
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-demo-banner:focus-visible .banner-btn {
    color: var(--rose-ink) !important; border-color: var(--rose-ink); filter: none;
}

/* search + type chips (§22 shape; pressed = rose wash + ink outline) */
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] #shelf-search {
    font-weight: 600; font-size: 1rem; color: var(--ink);
    background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 10px 14px 10px 14px;
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] #shelf-search::placeholder { color: var(--ink-2); opacity: 1; }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] #shelf-search:focus { outline: 2px solid var(--rose-ink); }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .type-filter {
    font-family: var(--font-ui); font-weight: 800; font-size: 0.875rem; letter-spacing: 0.01em;
    color: var(--ink); background: var(--paper-3); border: 0; border-radius: 7px 11px 7px 11px;
    padding: 6px 13px; box-shadow: none;
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .type-filter:hover { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .type-filter.active { background: var(--rose-wash); box-shadow: inset 0 0 0 1.5px var(--ink); }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .type-filter:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 2px; }

/* section heads: Fraunces over a hairline, count as a chip */
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-section { margin-bottom: 56px; }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-section-head {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.25rem);
    letter-spacing: var(--display-track); color: var(--ink);
    line-height: 1.1;   /* inherited ~0.95 made two-line heads on phones touch */
    border-bottom: 1px solid var(--hairline); padding-bottom: 10px; margin-bottom: 22px;
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-count {
    font-family: var(--font-ui); font-weight: 800; font-size: 0.875rem; letter-spacing: 0;
    color: var(--ink); background: var(--rose-wash); border-radius: 7px 11px 7px 11px; padding: 3px 10px;
}

/* tool cards: §20 paper */
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-card {
    background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 14px;
    box-shadow: var(--card-offset); padding: 18px 20px; margin-bottom: 22px; color: var(--ink);
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-card-name {
    font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--ink);
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-card-what { font-weight: 600; font-size: 1rem; line-height: 1.55; color: var(--ink); }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-card-meta { font-size: 0.9375rem; color: var(--ink-2); gap: 6px; }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-meta-key {
    font-family: var(--font-note); font-weight: 700; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--rose-ink);
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-meta-line a {
    font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--ink); text-decoration: none;
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-meta-line a:hover,
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-meta-line a:focus-visible { color: var(--rose-ink); border-color: var(--rose-ink); text-decoration: none; }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-last { font-size: 0.875rem; font-weight: 700; }
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .type-chip {
    font-family: var(--font-ui); font-weight: 800; font-size: 0.875rem; letter-spacing: 0; color: var(--ink);
}
:root[data-skin="shojo"][data-page="shelf"][data-mode="gremlin"] .shelf-error { font-style: normal; font-weight: 600; color: var(--ink-2); }


/* ── 37. Tail pages: accessibility, privacy, downloads, everything ──────────
   Batch 8. Four short utility pages already on css/site.css. Same gesture as
   about: §19 hero (the wrapper is added by apply_shojo_page.py's _pre pass),
   Fraunces section heads, paper cards (§20 look, no side stripes), prose held
   to ~70ch. Every rule carries data-page, so nothing here reaches another page.
   ───────────────────────────────────────────────────────────────────────── */

/* hero lift = distance from .page-hero's top edge to the top of the page
   (body padding on these pages, not about's container + hero padding) */
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="everything"]) { --page-hero-lift: calc(var(--nav-h) + 34px); }
:root[data-skin="shojo"][data-page="downloads"] { --page-hero-lift: calc(var(--nav-h) + 48px); }
:root[data-skin="shojo"][data-page="privacy"]   { --page-hero-lift: 40px; }  /* no nav on privacy */
@media (max-width: 560px) {
    :root[data-skin="shojo"][data-page="downloads"] { --page-hero-lift: calc(var(--nav-h) + 32px); }
}

:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"], [data-page="downloads"], [data-page="everything"])[data-mode="gremlin"] .page-hero {
    padding-top: 28px;
    margin-bottom: 56px;
}
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"], [data-page="downloads"], [data-page="everything"])[data-mode="gremlin"] .page-title {
    font-size: clamp(2.75rem, 6.5vw, 4.5rem);
    margin-bottom: 16px;
}

/* These pages cap <body> at 820-1100px, and body + html both clip (§8), so
   the blobs were cut square at the body edge. Let html alone clip here. */
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"], [data-page="downloads"], [data-page="everything"])[data-mode="gremlin"] body { overflow-x: visible; }
/* the capped body's own bottom padding showed as a lavender strip under the footer */
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"], [data-page="everything"])[data-mode="gremlin"] body { padding-bottom: 0; }
/* the blue blob runs past a short hero: content after it sits on top of the
   printed shape instead of under it */
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"], [data-page="downloads"], [data-page="everything"])[data-mode="gremlin"] main > :not(.page-hero) {
    position: relative;
    z-index: 1;
}
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"], [data-page="downloads"], [data-page="everything"])[data-mode="gremlin"] .page-blob-right {
    width: calc(clamp(220px, 26vw, 400px) + max(0px, (100vw - 100%) / 2));
}
/* the footer lives inside the capped body: bleed it to the window like about's */
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"], [data-page="downloads"], [data-page="everything"])[data-mode="gremlin"] .site-footer {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* hero sticker: these titles run nearly the full column, so the §19 top-right
   spot lands on the title. Sit it bottom-right instead, beside the lede (58ch)
   or, on privacy, the intro paragraph (70ch). Still hidden under 768px (§19). */
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"], [data-page="downloads"], [data-page="everything"])[data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) {
    top: auto;
    bottom: -12px;
    /* past the 820px column, onto the blue blob's bleed, but never past the
       viewport: between ~768 and ~880px there is no gutter to step into and the
       sticker hung off-screen, giving the page a sideways scroll (2026-10-02).
       (100% - 100vw) / 2 is minus the gutter width; keep 20px of it clear. */
    right: max(-56px, calc((100% - 100vw) / 2 + 20px));
    width: clamp(100px, 10vw, 140px);
    transform: rotate(5deg);
}
/* everything's column is 1100px, no gutter to step into at 1024 */
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) { right: 0; }
:root[data-skin="shojo"][data-page="privacy"][data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) { bottom: -96px; width: clamp(96px, 9vw, 124px); }
/* §19's phone hide is out-ranked by its own light/dark show rule, so it's repeated here at (0,6,0) */
@media (max-width: 767px) {
    :root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"], [data-page="downloads"], [data-page="everything"])[data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) { display: none; }
}

/* the quiet date line under the title (pro-visible text, restyled only) */
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"])[data-mode="gremlin"] .last-updated {
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--rose-ink); margin-bottom: 14px;
}

/* ledes: the §19 subtitle voice, long enough to need a measure */
:root[data-skin="shojo"][data-page="accessibility"][data-mode="gremlin"] .a11y-intro,
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-intro,
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .map-intro p {
    font-weight: 600;
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 54ch;   /* leaves the sticker its corner */
}

/* ── prose pages (accessibility, privacy) ── */
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"])[data-mode="gremlin"] main h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.35rem);
    line-height: 1.05;
    color: var(--ink);
    border-bottom: 0;
    padding-bottom: 0;
    margin-top: 60px;
    margin-bottom: 16px;
}
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"])[data-mode="gremlin"] main :is(p, li) {
    font-weight: 600;
    line-height: 1.7;
    color: var(--ink);
    max-width: 70ch;
}
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"])[data-mode="gremlin"] main li::marker { color: var(--rose-ink); }
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"])[data-mode="gremlin"] main :is(p, li) a {
    color: var(--ink);
    font-weight: 700;
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-color: var(--rose-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"])[data-mode="gremlin"] main :is(p, li) a:hover { opacity: 1; color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="privacy"][data-mode="gremlin"] main code {
    font-family: var(--font-ui); font-weight: 800; font-size: 0.95em;
    background: var(--paper-3); border-radius: 5px 8px 5px 8px; padding: 1px 7px; color: var(--ink);
}

/* "tell me" / "contact me": a §20 paper card, the side stripe goes */
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"])[data-mode="gremlin"] .contact-box {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    padding: 24px 28px;
    max-width: 70ch;
}
:root[data-skin="shojo"]:is([data-page="accessibility"], [data-page="privacy"])[data-mode="gremlin"] .contact-box p:last-child { margin-bottom: 0; }

/* privacy has no nav, so "back to home" is its only way out: a doodle link */
:root[data-skin="shojo"][data-page="privacy"][data-mode="gremlin"] .page-back {
    font-weight: 800; font-size: 1rem; color: var(--ink);
    border-bottom: 0; text-decoration: underline; text-decoration-color: var(--rose-ink);
    text-decoration-thickness: 2px; text-underline-offset: 4px;
}
:root[data-skin="shojo"][data-page="privacy"][data-mode="gremlin"] .page-back:hover { opacity: 1; color: var(--rose-ink); }

/* accessibility: "what's built in" becomes one sheet of paper, ✦ per item */
:root[data-skin="shojo"][data-page="accessibility"][data-mode="gremlin"] .feature-list {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    padding: 6px 28px;
    max-width: 70ch;
}
:root[data-skin="shojo"][data-page="accessibility"][data-mode="gremlin"] .feature-list li {
    padding: 16px 0 16px 30px;
    margin: 0;
}
:root[data-skin="shojo"][data-page="accessibility"][data-mode="gremlin"] .feature-list li + li { border-top: 1px solid var(--hairline); }
:root[data-skin="shojo"][data-page="accessibility"][data-mode="gremlin"] .feature-list li::before { top: 16px; color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="accessibility"][data-mode="gremlin"] .feature-list li strong {
    font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 2px;
}
/* the pill's "bring it back" button: the §22 chip shape, big enough to hit */
:root[data-skin="shojo"][data-page="accessibility"][data-mode="gremlin"] .a11y-restore-btn {
    font-weight: 800; font-size: 1rem; color: var(--ink);
    background: var(--rose-wash); border: 0; border-radius: 9px 14px 9px 14px;
    padding: 10px 18px; min-height: 44px;
    box-shadow: 3px 4px 0 var(--paper-3);
}
:root[data-skin="shojo"][data-page="accessibility"][data-mode="gremlin"] .a11y-restore-btn:focus-visible { outline: 3px solid var(--rose-ink); outline-offset: 3px; }

/* ── downloads ── */
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .kicker {
    font-family: var(--font-note);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    letter-spacing: 0;
    text-transform: none;
    color: var(--rose-ink);
    transform: rotate(-2deg);
    transform-origin: left center;
    margin-bottom: 4px;
}
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-intro a {
    color: var(--ink); font-weight: 700; text-decoration-color: var(--rose-ink); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-formats > div { border-top-color: var(--hairline); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-formats dt { font-weight: 800; font-size: 1rem; color: var(--ink); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-formats dd { font-weight: 600; font-size: 0.95rem; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] :is(.dl-agents, .dl-foot) { font-weight: 600; font-size: 0.95rem; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] :is(.dl-agents a, .dl-src a, .dl-skill, .dl-foot a) {
    color: var(--ink); font-weight: 700; text-decoration-color: var(--rose-ink); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] :is(.dl-agents a, .dl-src a, .dl-skill, .dl-foot a):hover { color: var(--rose-ink); }

/* code: the checksums and pip lines stay selectable chips; the UI face keeps
   the page on its three families (hashes are copied, not read) */
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] :is(.dl-pip code, .dl-files code, .dl-agents code) {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 6px 9px 6px 9px;
}

:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-group { margin-top: 64px; }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-group > h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.35rem);
    line-height: 1.05;
    color: var(--ink);
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 20px;
}

/* each app is a paper card; rows are generated, so this is CSS only */
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-app {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    padding: 22px 26px 18px;
    margin-bottom: 20px;
}
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-app:target { border-color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-app:target h3 { color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-head h3 { font-size: 1.45rem; color: var(--ink); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-ver { font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-sum { font-weight: 600; font-size: 1rem; line-height: 1.65; color: var(--ink); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-notes { font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-note { font-size: 0.875rem; font-weight: 800; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-more { font-size: 0.95rem; }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-more summary { font-weight: 800; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-more summary:hover { color: var(--rose-ink); }

/* download buttons: a pressable tab in the group's nav colour (apps blue like
   "things I build", python + skills green), a paper shadow, no accent slab */
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-btn {
    background: var(--peri-wash);
    color: var(--ink);
    border: 0;
    border-radius: 10px 15px 10px 15px;
    box-shadow: 3px 4px 0 var(--paper-3);
    padding: 11px 18px;
}
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-group:nth-of-type(even) .dl-btn { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-btn:hover,
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-btn:focus-visible {
    transform: translate(-1px, -2px);
    box-shadow: 5px 7px 0 var(--paper-3);
}
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-btn.is-mine { outline: 2px solid var(--rose-ink); outline-offset: 3px; }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-btn-main { font-weight: 800; font-size: 1rem; }
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-btn-sub { font-family: var(--font-ui); font-weight: 700; font-size: 0.875rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
    :root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"] .dl-btn:hover { transform: none; }
}
:root[data-skin="shojo"][data-page="downloads"][data-mode="gremlin"][data-motion="off"] .dl-btn:hover { transform: none; }

/* ── everything: the quest board ── */
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .map-intro { margin-bottom: 0; }
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zone {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    padding: 24px 24px 12px;
}
/* zone name as a nav tab, in the same colour its pages wear in the nav */
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zone-title {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--ink);
    background: var(--paper-3);
    border-radius: 7px 11px 7px 11px;
    padding: 4px 12px 5px;
    transform: rotate(-1deg);
}
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zone:nth-child(1) .zone-title { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zone:nth-child(2) .zone-title { background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zone:nth-child(3) .zone-title { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zone-sub {
    font-family: var(--font-note);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--rose-ink);
    margin-top: 8px;
}
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zone-links li { border-top-color: var(--hairline); }
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zone-links a { color: var(--ink); }
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zl-title { font-weight: 800; font-size: 1.05rem; }
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zl-title::after { content: " \2726"; opacity: 1; color: var(--rose-ink); font-size: 0.8em; }
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zl-desc { font-weight: 600; font-size: 0.95rem; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zone-links a:is(:hover, :focus-visible) .zl-title { color: var(--rose-ink); }
:root[data-skin="shojo"][data-page="everything"][data-mode="gremlin"] .zone-links a:focus-visible { outline-color: var(--rose-ink); }


/* ── 36. Deep dives: talks/*.html, case-studies/*.html ──────────────────────
   All 8 share data-page="deep-dive" (two templates: the .hero story page in a
   .container, and the .archive-wrap talk archive). build.js injects the shared
   head + nav, so the §18 tabs arrive with ../ hrefs; their colours are
   re-keyed here rather than widening §18. Sections become §20 paper cards,
   titles go to the §19 hero voice (Fraunces 700, rose ink, blobs behind).
   ───────────────────────────────────────────────────────────────────────── */

/* nav: §18 tab colours for the ../ hrefs build.js writes into subfolder pages */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .nav-link:is([href="../index.html"], [href="../about.html"]) { background: var(--paper-3); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .nav-link:is([href="../work.html"], [href="../projects.html"], [href="../shelf.html"]) { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .nav-link:is([href="../writing.html"], [href="../talks.html"], [href="../press.html"]) { background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .nav-link:is([href="../maker.html"], [href="../volunteering.html"]) { background: var(--sage-wash); }
/* the page's own inline "v2 deskscape" keycap nav adds a border + drop shadow */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .nav-link { border: 0; box-shadow: none; }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .nav-link.active { box-shadow: none; }

/* hero: blobs reach up under the fixed nav to the top of the page */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .hero,
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-wrap { position: relative; }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .hero { --page-hero-lift: 6rem; text-align: left; margin-bottom: 64px; z-index: 1; }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-wrap { --page-hero-lift: calc(48px + var(--nav-h, 64px)); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] :is(.hero, .archive-wrap) > :not(.blob) { position: relative; z-index: 2; }
/* the story pages' photo row and cards sit over the blue blob, not under it */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .container > :is(.images-grid, .section) { position: relative; z-index: 2; }

:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .hero h1,
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-wrap h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    line-height: 0.98;
    letter-spacing: var(--display-track);
    color: var(--rose-ink);
    -webkit-text-stroke: 0;
    text-stroke: 0;
    paint-order: normal;
    text-transform: none;
    margin-bottom: 18px;
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .hero .meta,
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-wrap .subline {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 36em;
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .back-link { font-size: 1rem; margin-top: 24px; }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-wrap .back-link { margin: 0 0 28px; }

/* story sections: §20 paper cards */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .section {
    background: var(--paper-2);
    background-image: none;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .section h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.7rem, 2.8vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: var(--display-track);
    color: var(--ink);
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .section h3 { font-weight: 700; color: var(--ink); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .section :is(p, ul, ol) { color: var(--ink); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .images-grid img { border-color: var(--hairline); }

/* talk archives */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-wrap .kicker {
    font-family: var(--font-note);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    letter-spacing: 0;
    text-transform: none;
    color: var(--rose-ink);
    transform: rotate(-2deg);
    transform-origin: left center;
    margin-bottom: 6px;
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-wrap h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    line-height: 1.1;
    color: var(--ink);
    border-bottom: 0;
    padding-bottom: 0;
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .facts :is(th, td) { border-bottom-color: var(--hairline); color: var(--ink); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .facts th {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink-2);
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] :is(blockquote.listing, .archive-note) {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    color: var(--ink);
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-note { font-size: 0.9375rem; }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .rot-note { font-size: 0.875rem; }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-wrap .links a {
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.15em;
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-wrap .links a:is(:hover, :focus-visible) { color: var(--rose-ink); border-bottom-color: var(--rose-ink); opacity: 1; }

/* the story pages' own footer: its 13px link row comes up to the 14px floor
   (an inline style, so !important; gremlin only, pro keeps 13px) */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] footer[role="contentinfo"] p[style*="font-size: 13px"] { font-size: 14px !important; }

@media (max-width: 768px) {
    :root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .hero { --page-hero-lift: 5rem; margin-bottom: 40px; }
}
@media (max-width: 560px) {
    :root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .archive-wrap { --page-hero-lift: calc(32px + var(--nav-h, 64px)); }
}


/* ── 31. Volunteering page ──────────────────────────────────────────────────
   volunteering.html composition. Scoped to data-page="volunteering".
   The page opened on one big tilted, magenta-bordered "availability" box with
   four striped tiles and two magenta buttons inside it. CSS alone breaks it
   up, no markup: the outer box dissolves (no border, fill, tilt or padding),
   its tagline becomes the page's first display head, and the four categories
   stand as their own paper cards, each labelled with a pastel tab chip in the
   §22 shape. The two buttons become underlined links.
   Timeline entries are §20 cards without the side stripe or the tilt; the
   LinkedIn notes take about's milestone-card treatment.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .page-hero { text-align: left; }
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .page-subtitle { margin: 0; }

/* the box dissolves */
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-card {
    position: relative;   /* above the hero's blue blob, which reaches this far down */
    z-index: 2;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    transform: none;
    text-align: left;
    margin-bottom: 88px;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-tagline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1;
    letter-spacing: var(--display-track);
    color: var(--ink);
    text-transform: none;
    margin-bottom: 16px;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-intro {
    font-weight: 600; font-size: 1.1rem; line-height: 1.6; color: var(--ink); max-width: 40em; margin-bottom: 32px;
}

/* four paper cards, each with its own tab chip */
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-categories {
    /* 2 x 2: four across squeezes "donors/volunteers/whatever" out of its card,
       and auto-fit left three plus an orphan */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 0;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-category {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    padding: 22px 22px 24px;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .category-title {
    display: inline-block;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--ink);
    background: var(--paper-3);
    border-radius: 7px 11px 7px 11px;
    padding: 5px 12px;
    margin-bottom: 14px;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-category:nth-child(4n+1) .category-title { background: var(--rose-wash); }
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-category:nth-child(4n+2) .category-title { background: var(--peri-wash); }
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-category:nth-child(4n+3) .category-title { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .category-items {
    font-weight: 600; font-size: 1rem; line-height: 1.6; color: var(--ink);
}

/* the two buttons: underlined links. css/a11y.css pins white-on-magenta with
   !important for the old buttons, so the override matches it in kind. */
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-cta {
    display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 32px;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-cta a {
    margin: 0;
    padding: 0 0 0.22em;
    background: none !important;
    color: var(--ink) !important;
    border-radius: 0;
    border-bottom: 1px solid var(--ink);
    box-shadow: none;
    font-weight: 800;
    font-size: 1.1rem;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-cta a:hover,
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-cta a:focus-visible {
    color: var(--rose-ink) !important; border-color: var(--rose-ink); transform: none; box-shadow: none;
}

/* timeline: paper cards, no stripe, no tilt */
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .volunteer-timeline { gap: 28px; }
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .volunteer-entry {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    transform: none;
    padding: 28px 32px;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .volunteer-entry:hover { transform: none; box-shadow: var(--card-offset); }
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .volunteer-org {
    font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; color: var(--ink);
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .volunteer-role { font-weight: 700; font-size: 1rem; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .volunteer-dates {
    font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--rose-ink); text-transform: none;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .volunteer-description {
    font-weight: 600; font-size: 1rem; line-height: 1.65; color: var(--ink); max-width: 46em;
}

/* "notes from the field": left-aligned display head + milestone cards */
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .group-head { text-align: left !important; margin: 88px 0 28px !important; }
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .group-head h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
    line-height: 1;
    letter-spacing: var(--display-track);
    color: var(--ink);
    margin-bottom: 14px !important;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .group-intro {
    margin: 0 !important; max-width: 40em !important; font-weight: 600; font-size: 1.1rem; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .milestone-card {
    background: var(--paper-2) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .milestone-date {
    font-size: 0.875rem !important; letter-spacing: 0.02em !important; text-transform: none !important;
    font-weight: 800 !important; color: var(--rose-ink) !important;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .milestone-card h3 {
    font-family: var(--font-display); font-weight: 700 !important; font-size: 1.3rem !important; line-height: 1.2; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .milestone-card p {
    font-weight: 600; font-size: 1rem !important; color: var(--ink) !important;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .milestone-more {
    display: inline-block; font-weight: 700 !important; font-size: 1rem !important; color: var(--ink) !important;
    border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .milestone-card:hover .milestone-more,
:root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .milestone-card:focus-visible .milestone-more { color: var(--rose-ink) !important; border-color: var(--rose-ink); }

@media (max-width: 768px) {
    :root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .volunteer-entry { padding: 22px 20px; }
    :root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .availability-categories { grid-template-columns: 1fr; }
    :root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] :is(.availability-card, .group-head) { margin-bottom: 64px; }
    :root[data-skin="shojo"][data-page="volunteering"][data-mode="gremlin"] .group-head { margin-top: 64px !important; }
}


/* ── 32. Press page ─────────────────────────────────────────────────────────
   press.html composition. Scoped to data-page="press".
   Matches about's "in the news": §20 cards, the magenta year bar becomes the
   rose-wash year chip, press-link buttons become underlined links. The
   inline accent side-stripe on the video card goes, and so does the tilt.
   "Legislative impact" sits on a sage wash (the one green card: laws passed).
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .page-hero { text-align: left; }
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .page-subtitle { margin: 0; }
/* press's container is narrower than maker's, so a full-width subtitle ran
   under the research sticker. Keep it clear of the sticker on desktop. */
@media (min-width: 768px) {
    :root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .page-subtitle { max-width: 28em; }
}

/* "video stuff" / "press stuff" */
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .group-title {
    font-family: var(--font-display);
    font-weight: 700 !important;
    font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
    line-height: 1;
    letter-spacing: var(--display-track);
    color: var(--ink) !important;
    margin: 0 0 28px !important;
}
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-timeline + .group-title,
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-timeline ~ .group-title { margin-top: 88px !important; }
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-timeline { gap: 28px; margin-bottom: 0 !important; }

/* cards: no stripe (one is inline, so !important), no tilt */
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-item {
    border: 1px solid var(--hairline) !important;
    transform: none;
    padding: 28px 32px;
}
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-item:nth-child(even),
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-item:hover { transform: none; box-shadow: var(--card-offset); }

/* the year chip (about's in-the-news chip). css/a11y.css pins the old bar to
   white on #B0126B with !important; ink on the pale wash is 9:1+ both themes. */
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-year {
    display: inline-block; width: auto;
    font-weight: 800; font-size: 0.875rem; color: var(--ink) !important;
    background: var(--rose-wash) !important; border-radius: 7px 11px 7px 11px; padding: 3px 11px;
    margin-bottom: 14px;
}
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-title {
    font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.2; color: var(--ink);
}
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-source { font-weight: 700; font-style: normal; font-size: 0.95rem; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-description {
    font-weight: 600; font-size: 1rem; line-height: 1.65; color: var(--ink); max-width: 46em;
}

/* links: underlined text, no icon. css/a11y.css pins .press-link colours with
   !important, so these match it in kind. */
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-link {
    color: var(--ink) !important;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.15em;
    gap: 0;
}
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-link:hover,
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-link:focus-visible {
    color: var(--rose-ink) !important; border-color: var(--rose-ink); text-decoration: none;
}
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-link > :is(i, svg.lucide) { display: none; }
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-archive {
    font-size: 0.95rem !important; font-weight: 600; color: var(--ink-2) !important; border-bottom-style: dashed;
}
/* the ResearchGate link under the hero */
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .page-hero .press-link { font-size: 1.05rem; }

/* legislative impact: sage wash, checks in the sage ink */
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .legislative-impact {
    background: var(--sage-wash);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    padding: 28px 32px;
    margin-top: 72px;
}
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .impact-title {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.25rem); line-height: 1.05; color: var(--ink);
}
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .impact-list li {
    font-weight: 600; font-size: 1rem; line-height: 1.65; color: var(--ink);
}
:root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .impact-list li::before { color: var(--sage-ink); }

@media (max-width: 768px) {
    :root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] :is(.press-item, .legislative-impact) { padding: 22px 20px; }
    :root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-timeline ~ .group-title { margin-top: 64px !important; }
    /* "(backup...)" wraps under "Read feature" on phones: own line, no indent */
    :root[data-skin="shojo"][data-page="press"][data-mode="gremlin"] .press-archive { display: table; margin: 12px 0 0 !important; }
}
@media (max-width: 767px) {
    /* same §19 phone-hide patch as work/writing/maker */
    :root[data-skin="shojo"][data-page="press"][data-mode="gremlin"][data-theme] .page-hero-sticker:is(.is-light, .is-dark) { display: none; }
}


/* ── 36b. Case-study deep dives: index card + chapters ──────────────────────
   Sara picked "b · index card" from auditions/case-study-mockups.html. The five
   case-studies/ pages (main.cs-index; tools/apply_shojo_page.py CASE_INDEX)
   get a washi-taped at-a-glance card under the hero, a handwritten "chapter N"
   eyebrow over each section, and pull quotes lifted verbatim from the copy.
   Sections open up (no card per section) so the chapters carry the rhythm.
   All three pieces are gremlin only: pro keeps its page exactly.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-skin="shojo"][data-page="deep-dive"] :is(.cs-index-card, .cs-chapter, .cs-pull) { display: none; }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] :is(.cs-index-card, .cs-chapter, .cs-pull) { display: block; }

/* open sections: the chapter eyebrows do the separating now */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] main.cs-index > .section {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 52px;
    margin-bottom: 0;
}

/* the index card: paper, two strips of washi tape, a slight hand-placed tilt */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-index-card {
    position: relative;
    z-index: 2;
    margin: 0 0 64px;
    padding: 30px 24px 22px;
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--card-offset);
    transform: rotate(-0.65deg);
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-index-card::before,
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-index-card::after {
    content: '';
    position: absolute;
    top: -14px;
    width: 92px;
    height: 27px;
    clip-path: polygon(4% 0, 96% 5%, 100% 48%, 95% 100%, 3% 95%, 0 45%);
    pointer-events: none;
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-index-card::before { left: 18px; background: rgba(244,167,195,.55); transform: rotate(-5deg); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-index-card::after  { right: 18px; background: rgba(137,196,225,.55); transform: rotate(4deg); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"][data-theme="dark"] .cs-index-card::before { background: rgba(244,167,195,.35); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"][data-theme="dark"] .cs-index-card::after  { background: rgba(137,196,225,.35); }

:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 20px; margin: 0; }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-facts > div { border-bottom: 1px solid var(--hairline); padding-bottom: 8px; min-width: 0; }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-facts dt { font-family: var(--font-ui); font-weight: 800; font-size: 0.875rem; color: var(--ink-2); }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-facts dd { margin: 2px 0 0; font-family: var(--font-ui); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-facts a { color: var(--rose-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 42rem) {
    :root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-facts > div:first-child { grid-column: 1 / -1; }
}

/* chapter eyebrow over each section heading */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-chapter {
    margin-bottom: 6px;
    font-family: var(--font-note);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--rose-ink);
    transform: rotate(-1deg);
    transform-origin: left center;
}

/* pull quote: a line from the section, big, in rose ink */
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-pull {
    margin: 28px 0 4px;
    padding: 14px 0 14px 22px;
    border: 0;
    border-left: 1px solid var(--rose-ink);
    background: none;
}
:root[data-skin="shojo"][data-page="deep-dive"][data-mode="gremlin"] .cs-pull p {
    margin: 0;
    max-width: 22em;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: var(--display-track);
    font-style: normal;
    color: var(--rose-ink);
}

/* >>> hero-objects */
/* ── 37. Page heroes as desk objects (2026-09-30) ───────────────────────────
   Sara's picks from auditions/hero-reimagine (round 1): instead of the pink
   corner + blue right blob on every page, these pages each get one object.
     writing       notebook   torn ruled sheet behind the copy, margin note
     talks         curtain    rose valance with a scalloped hem, copy centred
     maker         mat        sage cutting mat in its own grid column
     testimonials  letter     the hero is a pinned letter
     press         clipping   taped newspaper clipping (CSS only) in its own grid column
     volunteering  signup     taped sign-up sheet in its own grid column
     work          sheet      a spreadsheet printed on tractor-feed green-bar paper
     projects      desktop    a cluttered computer desktop, a bajillion windows open
     about         hello      a HELLO my name is badge whose name is every role, as whiteboard magnets
   Keyed off .page-hero[data-hero]. The blobs stay in the markup (a revert is
   deleting the attribute) and are hidden here. Decor is one aria-hidden
   .hero-deco span per hero. Side objects sit IN FLOW in a grid column, never
   absolutely over the copy, so the title can't collide with them at any width.
   Gremlin only: .hero-deco is display:none everywhere else, pro never moves.
   ───────────────────────────────────────────────────────────────────────── */

.hero-deco { display: none; }

:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero] > .blob { display: none; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero] > .hero-deco {
    display: block;
    --rule: color-mix(in srgb, var(--ink) 16%, transparent);
    pointer-events: none;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero] > .hero-deco * { display: block; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero] .page-title { padding-right: 0; text-wrap: balance; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero] .page-subtitle { text-wrap: pretty; }

/* washi tape: translucent wash strip */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero] .hd-tape {
    position: absolute;
    height: 22px;
    background: color-mix(in srgb, var(--tape, var(--sage-wash)) 88%, transparent);
    border-left: 1px dashed color-mix(in srgb, var(--ink) 12%, transparent);
    border-right: 1px dashed color-mix(in srgb, var(--ink) 12%, transparent);
}
/* the dark washes are too close to the dark paper to read as tape: tint from the hue instead */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="dark"] .page-hero[data-hero] .hd-tape { background: color-mix(in srgb, var(--tape-hue, var(--sage)) 30%, var(--paper-2)); }


/* ── side-object pages (maker, press, volunteering): two-column grid ───── */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero:is([data-hero="mat"], [data-hero="clipping"], [data-hero="signup"], [data-hero="sheet"], [data-hero="desktop"], [data-hero="hello"]) {
    display: grid;
    padding-top: 48px;        /* the object's ruler/tape needs air under the nav */
    grid-template-columns: minmax(0, 1fr) clamp(240px, 30%, 330px);
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: 0;
    align-items: start;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero:is([data-hero="mat"], [data-hero="clipping"], [data-hero="signup"], [data-hero="sheet"], [data-hero="desktop"], [data-hero="hello"]) > :not(.hero-deco):not(.page-hero-sticker):not(.blob) { grid-column: 1; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero:is([data-hero="mat"], [data-hero="clipping"], [data-hero="signup"], [data-hero="sheet"], [data-hero="desktop"], [data-hero="hello"]) > :is(.hero-deco, .page-hero-sticker) {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero:is([data-hero="mat"], [data-hero="clipping"], [data-hero="signup"], [data-hero="sheet"], [data-hero="desktop"], [data-hero="hello"]) > .hero-deco {
    position: relative;
    z-index: 0;
    width: 100%;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero:is([data-hero="mat"], [data-hero="clipping"]) > .page-hero-sticker {
    position: relative;
    z-index: 1;
    top: auto; right: auto; left: auto; bottom: auto;
    justify-self: center;
    width: clamp(120px, 12vw, 150px);
    height: auto;
}

/* maker: cutting mat */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="mat"] > .hero-deco {
    aspect-ratio: 5 / 4;
    border-radius: 10px;
    border: 1px solid var(--hairline);
    background-color: var(--sage-wash);
    background-image:
        linear-gradient(var(--rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: -1px -1px;
    box-shadow: 4px 5px 0 var(--paper-3);
    transform: rotate(-2deg);
}
/* the mat's 45 degree guide */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="mat"] .hd-diag {
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top right, transparent calc(50% - 1px), color-mix(in srgb, var(--sage-ink) 40%, transparent) 50%, transparent calc(50% + 1px));
}
/* a ruler lying across the top edge */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="mat"] .hd-ruler {
    position: absolute; left: 16px; right: 16px; top: -11px; height: 24px;
    border-radius: 3px;
    border: 1px solid var(--hairline);
    background-color: var(--paper-2);
    background-image:
        repeating-linear-gradient(90deg, var(--ink-2) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(90deg, var(--ink-2) 0 1px, transparent 1px 50px);
    background-size: calc(100% - 16px) 6px, calc(100% - 16px) 11px;
    background-repeat: no-repeat;
    background-position: 8px 0, 8px 0;
    box-shadow: 2px 3px 0 var(--lift);
}

/* press: a taped newspaper clipping, drawn whole in CSS (no sticker: the
   research sticker read as a notebook, not news) */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="clipping"] > .hero-deco {
    padding: 30px 24px 26px;
    transform: rotate(2deg);
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    box-shadow: 4px 5px 0 var(--paper-3);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="clipping"] .hd-masthead {
    padding-bottom: 8px;
    border-bottom: 3px double var(--ink-2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--ink);
    text-align: center;
}
/* headline: two thick bars */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="clipping"] .hd-lines {
    height: 26px;
    margin-top: 14px;
    background:
        linear-gradient(var(--ink-2), var(--ink-2)) 0 0 / 92% 9px no-repeat,
        linear-gradient(var(--ink-2), var(--ink-2)) 0 15px / 64% 9px no-repeat;
    opacity: 0.55;
}
/* the photo: a little wash landscape */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="clipping"] .hd-photo {
    height: 96px;
    margin-top: 14px;
    border: 1px solid var(--hairline);
    background:
        radial-gradient(circle at 74% 34%, var(--rose) 0 13px, transparent 14px),
        radial-gradient(ellipse 70% 55% at 30% 105%, var(--sage) 0 99%, transparent 100%),
        radial-gradient(ellipse 60% 45% at 85% 110%, color-mix(in srgb, var(--sage) 70%, var(--peri-wash)) 0 99%, transparent 100%),
        var(--peri-wash);
}
/* body copy: two columns of grey lines */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="clipping"] .hd-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="clipping"] .hd-cols > span {
    height: 52px;
    background: repeating-linear-gradient(to bottom, var(--rule) 0 5px, transparent 5px 11px);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="clipping"] .hd-tape { --tape: var(--sage-wash); --tape-hue: var(--sage); top: -12px; left: 29%; width: 42%; transform: rotate(-4deg); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="clipping"] > .page-hero-sticker.page-hero-sticker { display: none; }

/* volunteering: taped sign-up sheet */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="signup"] > .hero-deco {
    padding: 30px 28px 26px;
    transform: rotate(1.5deg);
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    box-shadow: 4px 5px 0 var(--paper-3);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="signup"] .hd-title {
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rose);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--rose-ink);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="signup"] .hd-row {
    position: relative;
    padding: 10px 0 8px 36px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-note);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--ink-2);
}
/* the ticked box, drawn in CSS (no glyph fallback to worry about) */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="signup"] .hd-row::before {
    content: "";
    position: absolute; left: 2px; top: 50%;
    width: 18px; height: 18px; margin-top: -9px;
    border: 2px solid var(--ink-2);
    border-radius: 4px;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="signup"] .hd-row::after {
    content: "";
    position: absolute; left: 8px; top: 50%;
    width: 7px; height: 13px; margin-top: -11px;
    border: solid var(--rose-ink);
    border-width: 0 3px 3px 0;
    transform: rotate(40deg);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="signup"] .hd-tape { --tape: var(--rose-wash); --tape-hue: var(--rose); top: -12px; left: 30%; width: 40%; transform: rotate(-3deg); }


/* work: a spreadsheet printed on tractor-feed green-bar paper */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] { grid-template-columns: minmax(0, 1fr) clamp(300px, 36%, 380px); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] > .hero-deco {
    padding: 18px 34px 56px;       /* sides: the sprocket holes; bottom: room for the sticker */
    transform: rotate(-1.5deg);
    background-color: var(--paper-2);
    border: 1px solid var(--hairline);
    box-shadow: 4px 5px 0 var(--paper-3);
}
/* sprocket holes down both edges */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] > .hero-deco::before,
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] > .hero-deco::after {
    content: "";
    position: absolute; top: 10px; bottom: 10px; width: 12px;
    background: radial-gradient(circle, var(--paper) 0 3.5px, var(--hairline) 4px 4.6px, transparent 5px) 50% 0 / 12px 22px;
    background-repeat: no-repeat round;   /* whole holes only, never a half one at the bottom */
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] > .hero-deco::before { left: 9px; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] > .hero-deco::after { right: 9px; }
/* formula bar */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] .hd-fx {
    display: flex; gap: 10px; align-items: baseline;
    padding: 6px 10px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink-2);
    white-space: nowrap;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] .hd-fx > b { font-style: italic; color: var(--sage-ink); }
/* the grid: row-number gutter + three columns, green-bar banding */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] .hd-grid {
    display: grid;
    grid-template-columns: 22px repeat(3, minmax(0, 1fr));
    margin-top: 12px;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink-2);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] .hd-grid > span {
    padding: 6px 7px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] .hd-grid > .hd-ax { padding-left: 0; padding-right: 0; text-align: center; color: color-mix(in srgb, var(--ink-2) 70%, transparent); background: var(--paper-3); font-weight: 600; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] .hd-grid > .hd-band { background: var(--sage-wash); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] .hd-grid > .hd-head { color: var(--ink); font-weight: 800; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] .hd-grid > .hd-done { color: var(--sage-ink); }
/* the work sticker rides the sheet's corner: its twins live INSIDE the deco
   (so it tracks the paper at every width); the page-level twins are hidden */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] > .page-hero-sticker.page-hero-sticker { display: none; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] .hd-stk {
    position: absolute; right: -16px; bottom: -20px;
    width: clamp(120px, 12vw, 150px); height: auto;
    transform: rotate(5deg);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="light"] .page-hero[data-hero="sheet"] .hd-stk.is-dark,
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="dark"]  .page-hero[data-hero="sheet"] .hd-stk.is-light { display: none; }


/* projects: a cluttered desktop, a bajillion windows open. Every window title
   sits in a strip no other window covers (the cascade is ordered so), so no
   text is ever hidden; the overlaps are only window bodies. */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] { grid-template-columns: minmax(0, 1fr) clamp(340px, 42%, 460px); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] > .hero-deco {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    border: 1px solid var(--hairline);
    overflow: hidden;
    background-color: var(--peri-wash);
    background-image: radial-gradient(color-mix(in srgb, var(--peri) 45%, transparent) 1px, transparent 1.5px);
    background-size: 16px 16px;
    box-shadow: 4px 5px 0 var(--paper-3);
    transform: rotate(1deg);
    overflow: visible;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-menubar {
    position: absolute; left: 0; right: 0; top: 0; height: 18px;
    border-radius: 12px 12px 0 0;
    background: color-mix(in srgb, var(--paper-2) 85%, transparent);
    border-bottom: 1px solid var(--hairline);
}
/* a window: title bar with three dots, a body */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-win {
    position: absolute;
    border: 1px solid var(--hairline);
    border-radius: 7px;
    background: var(--paper-2);
    box-shadow: 2px 3px 0 var(--lift);
    overflow: hidden;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-bar {
    height: 22px;
    padding: 0 8px 0 40px;
    border-bottom: 1px solid var(--hairline);
    background:
        radial-gradient(circle at 10px 50%, var(--rose) 0 3.5px, transparent 4px),
        radial-gradient(circle at 21px 50%, #F4D98B 0 3.5px, transparent 4px),
        radial-gradient(circle at 32px 50%, var(--sage) 0 3.5px, transparent 4px),
        var(--paper-3);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    color: var(--ink-2);
    white-space: nowrap;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-body { position: absolute; inset: 23px 0 0 0; }
/* window contents */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-pic {           /* a photo: wash sky, sun, hill */
    background:
        radial-gradient(circle at 72% 32%, var(--rose) 0 9px, transparent 10px),
        radial-gradient(ellipse 75% 60% at 28% 108%, var(--sage) 0 99%, transparent 100%),
        var(--peri-wash);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-thumbs {        /* a folder of thumbnails */
    background:
        linear-gradient(var(--rose-wash), var(--rose-wash)) 10% 18% / 36% 32% no-repeat,
        linear-gradient(var(--sage-wash), var(--sage-wash)) 88% 18% / 36% 32% no-repeat,
        linear-gradient(var(--peri-wash), var(--peri-wash)) 10% 84% / 36% 32% no-repeat,
        linear-gradient(var(--paper-3), var(--paper-3)) 88% 84% / 36% 32% no-repeat;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-lines {         /* a text file */
    margin: 8px 10px;
    background: repeating-linear-gradient(to bottom, var(--rule) 0 4px, transparent 4px 10px);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-progress {      /* something still loading */
    background:
        linear-gradient(var(--sage), var(--sage)) 12px 50% / calc(62% - 12px) 10px no-repeat,
        linear-gradient(var(--paper-3), var(--paper-3)) 12px 50% / calc(100% - 24px) 10px no-repeat;
}
/* the cascade: back to front */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-w1 { left: 5.1%; top: 13.8%; width: 40%; height: 36%; z-index: 1; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-w2 { left: 55%; top: 8%;  width: 40%; height: 34%; z-index: 1; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-w3 { left: 27%; top: 26%; width: 42%; height: 38%; z-index: 2; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-w4 { left: 6%;  top: 60%; width: 38%; height: 20%; z-index: 3; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-w5 { left: 48%; top: 54%; width: 34%; height: 34%; z-index: 3; }
/* more clutter, none of it with text: a cascade of blank windows stacked
   behind pets.png, a tiny photo, a stray dialog, a row of desktop icons */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-ghost {
    position: absolute; width: 40%; height: 30%; z-index: 0;
    border: 1px solid var(--hairline); border-radius: 7px;
    background:
        radial-gradient(circle at 10px 11px, var(--rose) 0 3.5px, transparent 4px),
        radial-gradient(circle at 21px 11px, #F4D98B 0 3.5px, transparent 4px),
        radial-gradient(circle at 32px 11px, var(--sage) 0 3.5px, transparent 4px),
        linear-gradient(var(--paper-3) 0 22px, var(--paper-2) 22px);
    box-shadow: 2px 3px 0 var(--lift);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-g1 { left: 1.2%; top: 8.4%; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-g2 { left: 2.5%; top: 10.2%; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-g3 { left: 3.8%; top: 12%; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-w6 { left: 72%; top: 44%; width: 24%; height: 22%; z-index: 2; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-w6 .hd-bar { padding: 0; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-dialog {
    position: absolute; left: 29%; top: 71%; width: 20%; height: 14%; z-index: 4;
    border: 1px solid var(--hairline); border-radius: 7px;
    background:
        linear-gradient(var(--rose), var(--rose)) 50% 72% / 42% 26% no-repeat,
        linear-gradient(var(--rule), var(--rule)) 50% 30% / 70% 4px no-repeat,
        var(--paper-2);
    box-shadow: 2px 3px 0 var(--lift);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-icons {
    position: absolute; left: 5%; top: 89%; width: 16px; height: 16px; z-index: 1;
    border-radius: 4px;
    background: var(--rose);
    box-shadow: 26px 0 0 var(--sage), 52px 0 0 var(--peri), 78px 0 0 #F4D98B, 104px 0 0 var(--ink-2), 130px 0 0 var(--sage-ink);
}
/* the pointer, mid-drag */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-cursor {
    position: absolute; left: 66%; top: 43%; z-index: 4;
    width: 14px; height: 20px;
    background: var(--ink);
    clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 100%, 58% 94%, 40% 56%, 76% 56%);
}
/* the house-rules sticker slapped on the corner (twins inside the deco) */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] > .page-hero-sticker.page-hero-sticker { display: none; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-stk {
    position: absolute; right: -18px; bottom: -22px; z-index: 5;
    width: clamp(96px, 9vw, 118px); height: auto;
    transform: rotate(6deg);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="light"] .page-hero[data-hero="desktop"] .hd-stk.is-dark,
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="dark"]  .page-hero[data-hero="desktop"] .hd-stk.is-light { display: none; }


/* about: HELLO my name is ... all of these. The badge's name area is a little
   whiteboard and the "name" is every role as a magnet (Sara: nothing crossed
   out, it's all of those things). Magnets flex-wrap, so none can clip. */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] { grid-template-columns: minmax(0, 1fr) clamp(300px, 38%, 400px); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] > .hero-deco {
    padding: 0 10px 10px;
    border-radius: 14px;
    background: var(--rose-ink);
    box-shadow: 4px 5px 0 var(--paper-3);
    transform: rotate(-2deg);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-hello {
    padding: 14px 8px 2px;
    font-family: var(--font-ui);
    font-weight: 900;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--paper-2);
    text-align: center;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-myname {
    padding: 4px 8px 10px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    color: var(--paper-2);
    text-align: center;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="dark"] .page-hero[data-hero="hello"] :is(.hd-hello, .hd-myname) { color: var(--paper); }
/* the whiteboard */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-board {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 12px 10px;
    min-height: 150px;
    padding: 20px 14px 30px;
    border-radius: 8px;
    border: 3px solid color-mix(in srgb, var(--ink) 14%, var(--paper-2));
    background: var(--paper-2);
    position: relative;
}
/* marker tray along the bottom edge, with one marker */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-board::after {
    content: "";
    position: absolute; left: 18%; right: 18%; bottom: 8px; height: 6px;
    border-radius: 3px;
    background:
        linear-gradient(90deg, transparent 0 62%, var(--peri) 62% 80%, var(--ink-2) 80% 84%, transparent 84%) 0 -2px / 100% 5px no-repeat,
        color-mix(in srgb, var(--ink) 12%, var(--paper-2));
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-magnet {
    padding: 7px 13px;
    border-radius: 9px;
    background: var(--m, var(--paper-3));
    border: 1px solid var(--hairline);
    box-shadow: 2px 3px 0 var(--lift);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    color: var(--ink);
    white-space: nowrap;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-magnet:nth-child(6n+1) { --m: var(--rose-wash);  transform: rotate(-3deg); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-magnet:nth-child(6n+2) { --m: var(--peri-wash);  transform: rotate(2deg); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-magnet:nth-child(6n+3) { --m: var(--sage-wash);  transform: rotate(-1.5deg); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-magnet:nth-child(6n+4) { --m: var(--paper-3);    transform: rotate(3deg); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-magnet:nth-child(6n+5) { --m: color-mix(in srgb, #F4D98B 55%, var(--paper-2)); transform: rotate(-2deg); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] .hd-magnet:nth-child(6n)   { --m: var(--rose-wash);  transform: rotate(1.5deg); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="dark"] .page-hero[data-hero="hello"] .hd-magnet:nth-child(6n+5) { --m: color-mix(in srgb, #F4D98B 22%, var(--paper-2)); }

/* about, desktop (2026-10-20): the badge used to span the grid rows, so the
   hero grew to the badge's height and left a tall empty block under "the whole
   deal" before the bio. Float the badge instead: title, subtitle and the bio
   that follows the hero all wrap beside it, and the hat shelf clears it. */
@media (min-width: 900px) {
    :root[data-skin="shojo"][data-page="about"][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] {
        display: block;
        margin-bottom: 28px;
    }
    :root[data-skin="shojo"][data-page="about"][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] > .hero-deco {
        float: right;
        width: clamp(300px, 38%, 400px);
        margin: 0 0 24px clamp(32px, 5vw, 72px);
    }
    :root[data-skin="shojo"][data-page="about"][data-mode="gremlin"] .hat-section { clear: both; }
}

@media (max-width: 899px) {
    /* one column: the object follows the copy */
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero:is([data-hero="mat"], [data-hero="clipping"], [data-hero="signup"], [data-hero="sheet"], [data-hero="desktop"], [data-hero="hello"]) { grid-template-columns: minmax(0, 1fr); }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero:is([data-hero="mat"], [data-hero="clipping"], [data-hero="signup"], [data-hero="sheet"], [data-hero="desktop"], [data-hero="hello"]) > :is(.hero-deco, .page-hero-sticker) {
        grid-column: 1;
        grid-row: 20;
        margin-top: 40px;
        justify-self: center;
    }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="mat"] > .hero-deco { width: min(100%, 360px); aspect-ratio: 5 / 3; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="clipping"] > .hero-deco { width: min(100%, 290px); }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="signup"] > .hero-deco { width: min(100%, 300px); }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] > .hero-deco { width: min(100%, 360px); }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] > .hero-deco { width: min(100%, 420px); }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] > .hero-deco { width: min(100%, 360px); }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="desktop"] .hd-stk { right: -6px; width: 92px; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="sheet"] .hd-stk { right: -8px; width: 120px; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero:is([data-hero="mat"]) > .page-hero-sticker { width: 110px; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="mat"] > .page-hero-sticker { align-self: center; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="light"] .page-hero[data-hero="mat"] > .page-hero-sticker.is-light,
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="dark"]  .page-hero[data-hero="mat"] > .page-hero-sticker.is-dark { display: block; }
}


@media (max-width: 768px) {
    /* about's own CSS drops the container's top padding on phones, so the
       hero needs its own room under the fixed nav */
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="hello"] { padding-top: 96px; }
}


/* ── writing: torn notebook sheet behind the copy ──────────────────────── */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="notebook"] {
    --margin: clamp(92px, 8vw, 112px);
    padding: 48px calc(clamp(110px, 11vw, 150px) + 64px) 44px var(--margin);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="notebook"] > .hero-deco {
    position: absolute; inset: 0; z-index: 0;
    filter: drop-shadow(4px 5px 0 var(--paper-3));
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="notebook"] .hd-sheet {
    position: absolute; inset: 0;
    background-color: var(--paper-2);
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px);
    background-position: 0 20px;
    /* torn left edge */
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 8px 100%, 0 96%, 9px 91%, 1px 85%, 10px 79%, 2px 73%, 9px 67%, 0 61%, 10px 55%, 2px 49%, 9px 43%, 1px 37%, 10px 31%, 2px 25%, 9px 19%, 0 13%, 10px 7%, 3px 3%);
}
/* the margin rule */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="notebook"] .hd-sheet::before {
    content: "";
    position: absolute; top: 0; bottom: 0;
    left: calc(var(--margin) - 20px);
    width: 2px;
    background: color-mix(in srgb, var(--rose) 75%, transparent);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="notebook"] .hd-note {
    position: absolute;
    left: 14px; top: 64px;
    width: calc(var(--margin) - 32px);
    font-family: var(--font-note);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.05;
    color: var(--rose-ink);
    text-align: center;
    transform: rotate(-8deg);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="notebook"] > .page-hero-sticker {
    top: auto; bottom: 28px; right: 36px;
    width: clamp(110px, 11vw, 150px);
    transform: rotate(5deg);
}
/* the margin note only where the margin is wide enough to hold it whole */
@media (max-width: 1119px) {
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="notebook"] .hd-note { display: none; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="notebook"] { --margin: 64px; }
}
@media (max-width: 767px) {
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="notebook"] { --margin: 46px; padding: 36px 20px 34px var(--margin); }
}


/* ── talks: curtain valance, copy centred under it ─────────────────────── */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="curtain"] {
    --valance: 56px;          /* how far the curtain hangs below the hero's top edge */
    --scallop: 36px;
    --stk: clamp(96px, 9vw, 124px);
    padding-top: calc(var(--valance) + var(--scallop) / 2 + 44px);
    text-align: center;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="curtain"] > .hero-deco {
    position: absolute; z-index: 0;
    top: calc(-1 * var(--page-hero-lift));
    left: min(0px, calc((100% - 100vw) / 2));
    right: min(0px, calc((100% - 100vw) / 2));
    height: calc(var(--page-hero-lift) + var(--valance));
    background: var(--rose-wash);
}
/* scalloped hem */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="curtain"] > .hero-deco::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 100%;
    height: calc(var(--scallop) / 2);
    background: radial-gradient(circle at 50% 0, var(--rose-wash) 0 calc(var(--scallop) / 2), transparent calc(var(--scallop) / 2 + 0.5px)) 50% 0 / var(--scallop) var(--scallop) repeat-x;
}
/* a stitched line just above the hem */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="curtain"] .hd-hem {
    position: absolute; left: 0; right: 0; bottom: 12px;
    border-bottom: 2px dashed color-mix(in srgb, var(--rose-ink) 35%, transparent);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="curtain"] :is(.page-title, .page-subtitle) {
    margin-left: auto; margin-right: auto;
    max-width: min(34em, calc(100% - 2 * (var(--stk) + 40px)));
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="curtain"] > .page-hero-sticker {
    top: calc(var(--valance) - 36px); right: clamp(8px, 3vw, 48px);
    width: var(--stk);
    transform: rotate(6deg);
}
@media (max-width: 767px) {
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="curtain"] { --valance: 20px; --scallop: 28px; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="curtain"] :is(.page-title, .page-subtitle) { max-width: none; }
}


/* ── testimonials: the hero is a pinned letter ─────────────────────────── */
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="letter"] {
    max-width: 960px;
    margin-left: auto; margin-right: auto;
    padding: 52px clamp(28px, 6vw, 72px) 76px;
    text-align: center;
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="letter"] .page-title { font-size: clamp(2.6rem, 6vw, 4.6rem); }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="letter"] > .hero-deco {
    position: absolute; inset: 0; z-index: 0;
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    box-shadow: 4px 5px 0 var(--paper-3);
    transform: rotate(-1deg);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="letter"] .hd-pin {
    position: absolute; left: 50%; top: -9px;
    width: 18px; height: 18px; margin-left: -9px;
    border-radius: 50%;
    background: var(--rose);
    border: 2px solid var(--rose-ink);
    box-shadow: 2px 3px 0 var(--lift);
}
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="letter"] :is(.page-title, .page-subtitle) { margin-left: auto; margin-right: auto; }
:root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="letter"] > .page-hero-sticker {
    top: auto; right: auto; left: -24px; bottom: -28px;
    width: clamp(104px, 10vw, 132px);
    transform: rotate(-7deg);
}
@media (max-width: 767px) {
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="letter"] { padding: 44px 22px 88px; text-align: left; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme] .page-hero[data-hero="letter"] > .page-hero-sticker { left: -4px; bottom: -16px; width: 96px; }
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="light"] .page-hero[data-hero="letter"] > .page-hero-sticker.is-light,
    :root[data-skin="shojo"][data-page][data-mode="gremlin"][data-theme="dark"]  .page-hero[data-hero="letter"] > .page-hero-sticker.is-dark { display: block; position: absolute; }
}
/* <<< hero-objects */

/* Deep-dive images carry width/height attributes so the browser reserves their space
   (no layout shift while they load); let CSS widths drive the size. 2026-09-30 */
:root[data-page="deep-dive"] main img[width][height] { height: auto; }