/* ============================================================================
   fv.css — the middleton.io design system, one file.

   Replaces: casestudies/styles.css (remote), case-study.css, slides.css,
   recipes/styles.css, officehours-new.css, and the inline block in
   prototypes/index.html. Those were five palettes and four font stacks that
   drifted apart because there were five places to change.

   Token values are lifted verbatim from the Full Volume homepage. Two rules
   worth knowing before editing:
     1. marigold is the one light-valued hue. It works as a SURFACE and fails
        as ink or a thin border on light ground (1.97:1). Use --c1-line, never
        --marigold, for borders and small text.
     2. --cN-line values are the mode-flipping ones, chosen to hold 3:1 against
        the page in BOTH schemes. Borders and small coloured text use them.
   ========================================================================= */

:root{
  /* Spacing, radius, shadow and timing scales. These existed in the old root
     styles.css; pages that referenced them silently fell back to `auto` when it
     was removed, which is what pushed the case-study hover arrow to the top-left
     and collapsed the hero padding. Defined here so nothing dangles. */
  --spacing-xs:.25rem; --spacing-sm:.5rem; --spacing-md:.85rem;
  --spacing-lg:1.15rem; --spacing-xl:1.8rem; --spacing-2xl:2.8rem;
  --radius-lg:var(--r); --radius-full:99px;
  --transition-fast:.12s ease; --transition-base:.2s ease;
  --shadow-06:var(--shadow-1); --shadow-12:var(--shadow-2); --shadow-20:var(--shadow-3);
  --black-rgb:17,17,19; --purple-rgb:109,74,168;
  /* Text-safe hue variants. --cN-line holds 3:1 for BORDERS; as small text the
     hues fall under 4.5:1, especially on the dark page. Use --cN-text whenever
     a hue is the colour of words. */
  --c1-text:#8A6210; --c2-text:#AB3142; --c3-text:#266B57;
  --c4-text:#1F4B8F; --c5-text:#6D4AA8; --c6-text:#9E227D;
  /* shadows and scrims, mode-aware so sub-pages never hardcode rgba() */
  --shadow-1:0 1px 3px rgba(0,0,0,.06);
  --shadow-2:0 4px 14px rgba(0,0,0,.10);
  --shadow-3:0 10px 30px rgba(0,0,0,.15);
  --glass:rgba(255,255,255,.92);
  --tint-soft:rgba(0,0,0,.05);
  /* brand marks that must stay their own colour regardless of theme */
  --brand-sa:#f7941e;
  --brand-rss:#F26522;
  /* ---------- neutrals (flip per mode) ---------- */
  --bg:#F4F4F5; --bg2:#E9E9EC; --ink:#111113; --ink2:#5B5B62; --rule:#D8D8DD;
  /* --rule is a hairline divider. --rule-strong is for borders >=2px, which
     have to read as an object at 3:1 rather than as a whisper. */
  --rule-strong:#8B8B90;
  /* the deliberate contrast panel. Separate from --ink because --ink also
     carries text and borders, which invert; these panels must stay panels. */
  --invert:#111113; --on-invert:#F2F2F4;

  /* ---------- hue identity (same in both modes) ---------- */
  --marigold:#E8A317; --madder:#C3384B; --viridian:#2C7A63;
  --cobalt:#1F4B8F;   --plum:#6D4AA8;   --fuchsia:#9E227D;
  --on-hue:#FFFFFF;    /* text on a saturated card: >=5.16 on all five */
  --on-mari:#241700;   /* marigold is a LIGHT surface, so it needs dark text */

  /* ---------- accents as text (depend on the ground) ---------- */
  --accent-text:#AB3142;       /* small accent text on the page      5.88 */
  --accent-on-invert:#CF5F6F;  /* small accent text on the panel     4.96 */
  --gold-on-invert:#E8A317;    /* gold display text on the panel     8.74 */
  --cta-blue:#4B6FA5;
  --cta-plum:#7B55BC;   /* lifted plum: base #6D4AA8 is 2.87 vs the ink band */          /* button on the invert band          3.72 */

  /* ---------- strength chips: outlined when idle, filled when chosen ----------
     --line is the outline and must clear 3:1 against the PAGE, so it moves per
     mode. --fill is the pure hue and never moves, because a filled chip brings
     its own ground with it. */
  --c1-line:#A77510;         --c1-fill:var(--marigold); --c1-on:var(--on-mari);
  --c2-line:var(--madder);   --c2-fill:var(--madder);   --c2-on:var(--on-hue);
  --c3-line:var(--viridian); --c3-fill:var(--viridian); --c3-on:var(--on-hue);
  --c4-line:var(--cobalt);   --c4-fill:var(--cobalt);   --c4-on:var(--on-hue);
  --c5-line:var(--plum);     --c5-fill:var(--plum);     --c5-on:var(--on-hue);
  --c6-line:var(--fuchsia);  --c6-fill:var(--fuchsia);  --c6-on:var(--on-hue);

  /* ---------- rotating hero words: need 3:1 on the page ---------- */
  --swap-1:var(--cobalt); --swap-2:var(--plum);
  --swap-3:var(--viridian); --swap-4:var(--madder);

  /* ---------- writing-card dots: 3:1 on the invert panel, six distinct
       hues, no repeats. Lifted here because the panel is dark. ---------- */
  --dot-1:#4B6FA5; --dot-2:#B35299; --dot-3:#E8A317;
  --dot-4:#8A6EB9; --dot-5:#2C7A63; --dot-6:#C3384B;

  /* ---------- scrims and hairlines ---------- */
  --nav-bg:rgba(244,244,245,.92);
  --scrim-dark:rgba(0,0,0,.28);
  --scrim-light:rgba(255,255,255,.28);
  --hairline-invert:rgba(255,255,255,.17);
  --hairline-mari:rgba(0,0,0,.17);

  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:10px;
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.5;-webkit-font-smoothing:antialiased;
}

@media (prefers-color-scheme: dark){
  :root{
    --c1-text:#E8A317; --c2-text:#E8697C; --c3-text:#3FA588;
    --c4-text:#6E93CC; --c5-text:#A98FD8; --c6-text:#D96BB8;
    --shadow-1:0 1px 3px rgba(0,0,0,.5);
    --shadow-2:0 4px 14px rgba(0,0,0,.6);
    --shadow-3:0 10px 30px rgba(0,0,0,.7);
    --glass:rgba(255,255,255,.92);   /* pills over photos stay light in both modes */
    --tint-soft:rgba(255,255,255,.06);
    --bg:#0F0F12; --bg2:#17171B; --ink:#F2F2F4; --ink2:#A2A2AC; --rule:#2C2C33;
    --rule-strong:#656570;
    /* the contrast panel flips with the page so it still reads as a panel */
    --invert:#EDEDF0; --on-invert:#111113;
    /* accent-as-text trades ends: lift it on the page, deepen it on the panel */
    --accent-text:#D26978;        /* 5.50 on --bg     */
    --accent-on-invert:#AB3142;   /* 5.53 on --invert */
    /* Deep enough for the SMALL chip kicker (4.5), not just the 46px "messy."
       (3.0). One token has to satisfy the stricter of its two uses. */
    --gold-on-invert:#815B0C;     /* 5.23 on --invert; marigold is 1.97 there */
    /* cobalt and plum fall under the 3:1 large-text floor on a dark page */
    --swap-1:#4B6FA5; --swap-2:#8A6EB9;
    /* dots: the panel is light now, so the BASE hues pass and gold must deepen */
    /* outlines flip: marigold is fine on a dark page, but cobalt (2.24),
       plum (2.91) and fuchsia (2.71) all fall under 3:1 and must lift. */
    --c1-line:var(--marigold);
    --c4-line:#4B6FA5; --c5-line:#8A6EB9; --c6-line:#B14E97;
    --dot-1:#1F4B8F; --dot-2:#9E227D; --dot-3:#A77510;
    --dot-4:#6D4AA8; --dot-5:#2C7A63; --dot-6:#C3384B;
    --nav-bg:rgba(15,15,18,.92);
    --hairline-invert:rgba(0,0,0,.17);
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
@media(max-width:760px){html{scroll-padding-top:4.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- layout ---------- */
.pad{padding-inline:clamp(1rem,4vw,3rem);max-width:1400px;margin-inline:auto}
.sec{padding-block:clamp(2.4rem,5vw,4.2rem)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:.7rem;margin-bottom:1.6rem}
.sec-h h1,.sec-h h2{margin:0;font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.03em}
.sec-h span{font-size:.86rem;color:var(--ink2)}
.kick{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:500;background:var(--nav-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;padding-block:.7rem}
.mk{font-weight:800;letter-spacing:-.025em;display:grid;gap:.12rem;line-height:1.12;
  text-decoration:none;font-size:1rem}
.mk small{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:400;color:var(--ink2)}
.nav-l{display:flex;gap:1.1rem;flex-wrap:wrap}
.nav-l a{font-size:.8rem;color:var(--ink2);text-decoration:none;
  border-bottom:1px solid transparent;transition:.16s}
.nav-l a:hover{color:var(--ink);border-bottom-color:var(--marigold)}
.cta{background:var(--marigold);color:var(--on-mari);font-weight:800;font-size:.76rem;
  padding:.5rem .95rem;border-radius:99px;text-decoration:none;display:inline-block;
  transition:transform .18s}
.cta:hover{transform:translateY(-2px)}
/* one nowrap scrolling row instead of three wrapped ones: the wrapped nav ate
   20.6% of a 375px viewport and buried every anchor target underneath itself */
@media(max-width:760px){
  .nav{flex-wrap:nowrap;gap:.6rem}
  .nav-l{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;gap:.85rem;
    scrollbar-width:none;-ms-overflow-style:none}
  .nav-l::-webkit-scrollbar{display:none}
  .nav-l a{white-space:nowrap}
  .mk small{display:none}
  .cta{flex:0 0 auto}
}

/* ---------- cards: six hues, repeating past six items ---------- */
.grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  align-items:stretch}
/* an even card count reads better paired than as a row plus an orphan */
.grid--pairs{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.grid--pairs{grid-template-columns:1fr}}
.grid-3{display:grid;gap:.6rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid-3{grid-template-columns:1fr}}
/* flex column, not grid: margin-top:auto on the tag row only distributes free
   space in a flex container, so this is what actually floors the tags. */
.card{border:2px solid var(--c-line,var(--ink));border-radius:var(--r);padding:1rem;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.35rem;
  background:var(--bg);height:100%;
  transition:background .18s,color .18s,transform .18s,border-color .18s,box-shadow .18s}
/* tags sit on the card floor so they line up across a row instead of floating
   wherever the copy happens to end */
.card .tags{margin-top:auto;padding-top:.55rem}
.card:nth-child(6n+1){--c-line:var(--c1-line);--c-fill:var(--c1-fill);--c-on:var(--c1-on)}
.card:nth-child(6n+2){--c-line:var(--c2-line);--c-fill:var(--c2-fill);--c-on:var(--c2-on)}
.card:nth-child(6n+3){--c-line:var(--c3-line);--c-fill:var(--c3-fill);--c-on:var(--c3-on)}
.card:nth-child(6n+4){--c-line:var(--c4-line);--c-fill:var(--c4-fill);--c-on:var(--c4-on)}
.card:nth-child(6n+5){--c-line:var(--c5-line);--c-fill:var(--c5-fill);--c-on:var(--c5-on)}
.card:nth-child(6n+6){--c-line:var(--c6-line);--c-fill:var(--c6-fill);--c-on:var(--c6-on)}
a.card:hover{background:var(--c-fill);border-color:var(--c-line);color:var(--c-on)}
a.card:hover .card-m{color:var(--c-on)}
.card b{font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.card span{font-size:.78rem;line-height:1.42}
.card-m{font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--accent-text);transition:.22s}
.card-k{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink2)}

/* ---------- prose, for case studies and articles ---------- */
.prose{max-width:68ch}
.prose p,.prose li{font-size:1rem;line-height:1.65;color:var(--ink2)}
.prose h2{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:800;letter-spacing:-.025em;
  color:var(--ink);margin:2.2rem 0 .6rem}
.prose h3{font-size:1.02rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:1.5rem 0 .4rem}
.prose strong{color:var(--ink)}
.prose ul{padding-left:1.1rem;display:grid;gap:.45rem}
.prose li::marker{color:var(--c1-line)}
.lk{color:inherit;text-decoration:none;border-bottom:2px solid var(--marigold);
  padding-bottom:.06rem;transition:.16s}
.lk:hover{border-bottom-color:var(--ink)}

/* ---------- metrics + tags ---------- */
.metrics{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:1rem 0}
.metric b{display:block;font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.03em}
.metric span{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink2)}
.tags{display:flex;flex-wrap:wrap;gap:.32rem}
.tags span{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:99px;border:1px solid var(--rule);color:var(--ink2)}

/* ---------- footer ---------- */
.colophon{padding-block:clamp(2rem,4vw,3rem) clamp(2.4rem,5vw,3.6rem);border-top:2px solid var(--ink)}
.colo-nav{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:0 0 1.1rem}
.colo-nav a{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent}
.colo-nav a:hover{color:var(--ink);border-bottom-color:var(--marigold)}
.colo-tip{font-size:.84rem;color:var(--ink2);margin:0}

/* ---------- reveal, fails open ---------- */
.rv{opacity:1}
.js-reveal .rv{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.js-reveal .rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-reveal .rv{opacity:1!important;transform:none!important;transition:none}
}

/* Logo cards. A brand mark cannot sit on a hue fill without clashing, so these
   keep the hue as an outline and hover with a lift plus an 8% tint instead of
   the full fill the text-only cards use. */
/* Kevin: no colour on hover for logo cards. Lift and firm up the border only,
   so brand marks never sit on a tinted ground. */
a.card--soft:hover{background:var(--bg);color:inherit;transform:translateY(-2px);
  border-color:var(--ink);box-shadow:var(--shadow-2)}
.card--soft:hover .card-m{color:var(--accent-text)}
.card-logo{height:30px;max-width:130px;object-fit:contain;object-position:left center;
  justify-self:start;margin-bottom:.15rem}
.card-logo.tile{height:38px;padding:8px 11px;background:var(--brand-sa);border-radius:7px}

/* ---------------------------------------------------------------------------
   Manual theme override. The site is system-driven by default; /slides/ keeps a
   visible light/dark toggle, and this lets that toggle win over the media query
   in both directions without introducing a second palette.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"]{
    --c1-text:#E8A317; --c2-text:#E8697C; --c3-text:#3FA588;
    --c4-text:#6E93CC; --c5-text:#A98FD8; --c6-text:#D96BB8;
    --shadow-1:0 1px 3px rgba(0,0,0,.5);
    --shadow-2:0 4px 14px rgba(0,0,0,.6);
    --shadow-3:0 10px 30px rgba(0,0,0,.7);
    --glass:rgba(255,255,255,.92);   /* pills over photos stay light in both modes */
    --tint-soft:rgba(255,255,255,.06);
    --bg:#0F0F12; --bg2:#17171B; --ink:#F2F2F4; --ink2:#A2A2AC; --rule:#2C2C33;
    --rule-strong:#656570;
    /* the contrast panel flips with the page so it still reads as a panel */
    --invert:#EDEDF0; --on-invert:#111113;
    /* accent-as-text trades ends: lift it on the page, deepen it on the panel */
    --accent-text:#D26978;        /* 5.50 on --bg     */
    --accent-on-invert:#AB3142;   /* 5.53 on --invert */
    /* Deep enough for the SMALL chip kicker (4.5), not just the 46px "messy."
       (3.0). One token has to satisfy the stricter of its two uses. */
    --gold-on-invert:#815B0C;     /* 5.23 on --invert; marigold is 1.97 there */
    /* cobalt and plum fall under the 3:1 large-text floor on a dark page */
    --swap-1:#4B6FA5; --swap-2:#8A6EB9;
    /* dots: the panel is light now, so the BASE hues pass and gold must deepen */
    /* outlines flip: marigold is fine on a dark page, but cobalt (2.24),
       plum (2.91) and fuchsia (2.71) all fall under 3:1 and must lift. */
    --c1-line:var(--marigold);
    --c4-line:#4B6FA5; --c5-line:#8A6EB9; --c6-line:#B14E97;
    --dot-1:#1F4B8F; --dot-2:#9E227D; --dot-3:#A77510;
    --dot-4:#6D4AA8; --dot-5:#2C7A63; --dot-6:#C3384B;
    --nav-bg:rgba(15,15,18,.92);
    --hairline-invert:rgba(0,0,0,.17);
}
:root[data-theme="light"]{
  /* Text-safe hue variants. --cN-line holds 3:1 for BORDERS; as small text the
     hues fall under 4.5:1, especially on the dark page. Use --cN-text whenever
     a hue is the colour of words. */
  --c1-text:#8A6210; --c2-text:#AB3142; --c3-text:#266B57;
  --c4-text:#1F4B8F; --c5-text:#6D4AA8; --c6-text:#9E227D;
  /* shadows and scrims, mode-aware so sub-pages never hardcode rgba() */
  --shadow-1:0 1px 3px rgba(0,0,0,.06);
  --shadow-2:0 4px 14px rgba(0,0,0,.10);
  --shadow-3:0 10px 30px rgba(0,0,0,.15);
  --glass:rgba(255,255,255,.92);
  --tint-soft:rgba(0,0,0,.05);
  /* brand marks that must stay their own colour regardless of theme */
  --brand-sa:#f7941e;
  --brand-rss:#F26522;
  /* ---------- neutrals (flip per mode) ---------- */
  --bg:#F4F4F5; --bg2:#E9E9EC; --ink:#111113; --ink2:#5B5B62; --rule:#D8D8DD;
  /* --rule is a hairline divider. --rule-strong is for borders >=2px, which
     have to read as an object at 3:1 rather than as a whisper. */
  --rule-strong:#8B8B90;
  /* the deliberate contrast panel. Separate from --ink because --ink also
     carries text and borders, which invert; these panels must stay panels. */
  --invert:#111113; --on-invert:#F2F2F4;

  /* ---------- hue identity (same in both modes) ---------- */
  --marigold:#E8A317; --madder:#C3384B; --viridian:#2C7A63;
  --cobalt:#1F4B8F;   --plum:#6D4AA8;   --fuchsia:#9E227D;
  --on-hue:#FFFFFF;    /* text on a saturated card: >=5.16 on all five */
  --on-mari:#241700;   /* marigold is a LIGHT surface, so it needs dark text */

  /* ---------- accents as text (depend on the ground) ---------- */
  --accent-text:#AB3142;       /* small accent text on the page      5.88 */
  --accent-on-invert:#CF5F6F;  /* small accent text on the panel     4.96 */
  --gold-on-invert:#E8A317;    /* gold display text on the panel     8.74 */
  --cta-blue:#4B6FA5;          /* button on the invert band          3.72 */

  /* ---------- strength chips: outlined when idle, filled when chosen ----------
     --line is the outline and must clear 3:1 against the PAGE, so it moves per
     mode. --fill is the pure hue and never moves, because a filled chip brings
     its own ground with it. */
  --c1-line:#A77510;         --c1-fill:var(--marigold); --c1-on:var(--on-mari);
  --c2-line:var(--madder);   --c2-fill:var(--madder);   --c2-on:var(--on-hue);
  --c3-line:var(--viridian); --c3-fill:var(--viridian); --c3-on:var(--on-hue);
  --c4-line:var(--cobalt);   --c4-fill:var(--cobalt);   --c4-on:var(--on-hue);
  --c5-line:var(--plum);     --c5-fill:var(--plum);     --c5-on:var(--on-hue);
  --c6-line:var(--fuchsia);  --c6-fill:var(--fuchsia);  --c6-on:var(--on-hue);

  /* ---------- rotating hero words: need 3:1 on the page ---------- */
  --swap-1:var(--cobalt); --swap-2:var(--plum);
  --swap-3:var(--viridian); --swap-4:var(--madder);

  /* ---------- writing-card dots: 3:1 on the invert panel, six distinct
       hues, no repeats. Lifted here because the panel is dark. ---------- */
  --dot-1:#4B6FA5; --dot-2:#B35299; --dot-3:#E8A317;
  --dot-4:#8A6EB9; --dot-5:#2C7A63; --dot-6:#C3384B;

  /* ---------- scrims and hairlines ---------- */
  --nav-bg:rgba(244,244,245,.92);
  --scrim-dark:rgba(0,0,0,.28);
  --scrim-light:rgba(255,255,255,.28);
  --hairline-invert:rgba(255,255,255,.17);
  --hairline-mari:rgba(0,0,0,.17);

  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:10px;
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.5;-webkit-font-smoothing:antialiased;
}


/* ==========================================================================
   Case studies index — scoped to body.p-cases.
   Scoped because these files share class names with each other and with the
   shared layer (card, hero, tag, metric, highlight all mean different things
   in different places). :root token maps become the scope itself.
   ========================================================================== */
body.p-cases .cs-landing{
            min-height: 100vh;
            background: var(--bg);
            padding: 0;
        }body.p-cases .cs-nav{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-md) var(--spacing-xl);
            max-width: 1200px;
            margin: 0 auto;
        }body.p-cases .cs-nav a{
            color: var(--ink2);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 500;
            transition: color var(--transition-fast);
        }body.p-cases .cs-nav a:hover{ color: var(--ink); }body.p-cases .cs-nav-name{
            font-weight: 700;
            color: var(--ink) !important;
            font-size: 1.15rem !important;
            line-height: 1.3;
        }body.p-cases .cs-nav-title{
            display: block;
            font-size: 0.8rem !important;
            font-weight: 500;
            color: var(--ink2) !important;
            letter-spacing: 0.02em;
        }body.p-cases .cs-hero{ max-width:1400px; margin-inline:auto; padding: clamp(1.8rem,4.5vw,3rem) clamp(1rem,4vw,3rem) 0; }body.p-cases .cs-hero-label{
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--c5-line);
            margin-bottom: var(--spacing-sm);
        }body.p-cases .cs-hero h1{
            font-family: var(--sans);
            font-size: clamp(2.2rem, 4.5vw, 3.2rem);
            font-weight: 800;
            color: var(--ink);
            line-height: 1.1;
            margin-bottom: var(--spacing-md);
        }body.p-cases .cs-hero h1 .highlight{ color: inherit; }body.p-cases .cs-hero-intro{
            font-size: 1.05rem;
            color: var(--ink2);
            line-height: 1.7;
            max-width: 640px;
        }body.p-cases .cs-grid{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: var(--spacing-lg);
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-xl) var(--spacing-2xl);
        }body.p-cases .cs-card-link{
            text-decoration: none;
            color: inherit;
        }body.p-cases .cs-card{
            background: rgba(255,255,255, 0.65);
            border: 1px solid rgba(255,255,255, 0.55);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-06);
            padding: var(--spacing-lg);
            transition: transform var(--transition-base), box-shadow var(--transition-base);
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;
        }body.p-cases .cs-card:hover{
            transform: translateY(-4px);
            box-shadow: var(--shadow-20);
        }body.p-cases .cs-card::after{
            content: '↗';
            position: absolute;
            top: var(--spacing-lg);
            right: var(--spacing-lg);
            font-size: 1.1rem;
            color: var(--ink2);
            opacity: 0;
            transition: opacity var(--transition-base), transform var(--transition-base);
        }body.p-cases .cs-card:hover::after{
            opacity: 0.6;
            transform: translate(2px, -2px);
        }body.p-cases .cs-card-header{
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: var(--spacing-md);
        }body.p-cases .cs-card-logo{
            width: 36px;
            height: 36px;
            object-fit: contain;
            border-radius: var(--r);
            flex-shrink: 0;
        }body.p-cases .cs-card-company{
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--ink2);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }body.p-cases .cs-card-title{
            font-family: var(--sans);
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--ink);
            line-height: 1.3;
            margin-bottom: var(--spacing-xs);
        }body.p-cases .cs-card-subtitle{
            color: var(--ink2);
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: var(--spacing-lg);
            flex-grow: 1;
        }body.p-cases .cs-metrics{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            padding-top: var(--spacing-md);
            border-top: 1px solid rgba(var(--black-rgb), 0.06);
        }body.p-cases .cs-metric{
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 0 4px;
        }body.p-cases .cs-metric:not(:last-child){
            border-right: 1px solid rgba(var(--black-rgb), 0.06);
        }body.p-cases .cs-metric-value{ font-size: 1.3rem; font-weight: 800; color: var(--ink); line-height: 1.3; white-space: nowrap; margin-bottom: 4px; }body.p-cases .cs-metric-label{
            font-size: 0.68rem;
            color: var(--ink2);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-weight: 600;
            line-height: 1.35;
        }body.p-cases .cs-pills{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
            margin-bottom: var(--spacing-md);
        }body.p-cases .cs-pill{
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 4px 10px;
            border-radius: var(--radius-full);
            background: rgba(var(--purple-rgb), 0.1);
            color: var(--c5-line);
            white-space: nowrap;
        }

        @media (prefers-color-scheme: dark) {body.p-cases .cs-pill{
                background: rgba(var(--purple-rgb), 0.18);
            }
        }body.p-cases .cs-footer{
            max-width: 1200px;
            margin: 0 auto;
            padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
            text-align: center;
        }body.p-cases .cs-footer-text{
            color: var(--ink2);
            font-size: 0.95rem;
            margin-bottom: var(--spacing-sm);
        }body.p-cases .cs-footer-links{
            display: flex;
            justify-content: center;
            gap: var(--spacing-lg);
        }body.p-cases .cs-footer-links a{
            color: var(--c4-line);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            transition: opacity var(--transition-fast);
        }body.p-cases .cs-footer-links a:hover{ opacity: 0.8; }

        
        @media (prefers-color-scheme: dark) {body.p-cases .cs-card{
                background: rgba(20, 20, 25, 0.55);
                border: 1px solid rgba(255,255,255, 0.12);
                box-shadow: var(--shadow-12);
            }body.p-cases .cs-card:hover{ box-shadow: var(--shadow-20); }body.p-cases .cs-metrics{
                border-top-color: rgba(255,255,255, 0.1);
            }body.p-cases .cs-metric:not(:last-child){
                border-right-color: rgba(255,255,255, 0.1);
            }
        }

        
        @media (max-width: 768px) {body.p-cases .cs-nav{ padding: var(--spacing-sm) var(--spacing-md); }body.p-cases .cs-hero{
                padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
            }body.p-cases .cs-grid{
                grid-template-columns: 1fr;
                padding: 0 var(--spacing-md) var(--spacing-xl);
            }
        }body.p-cases .cs-grid{ grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .6rem; align-items: stretch; }body.p-cases .cs-card-link{ display: block; height: 100%; }body.p-cases .cs-card{ height: 100%; display: grid; align-content: start; gap: .45rem;
                   border: 2px solid var(--rule); background: var(--bg); padding: 1.15rem; }body.p-cases .cs-card:hover{ border-color: var(--ink); transform: translateY(-2px); }body.p-cases .cs-metrics{ margin-top: auto; padding-top: .5rem; }body.p-cases .cs-hero{ padding-block: clamp(1.8rem, 4.5vw, 3.4rem) clamp(1.2rem, 3vw, 2rem); }body.p-cases .cs-hero h1{ margin: 0 0 .6rem; }body.p-cases .cs-hero-intro{ margin: 0; }body.p-cases .cs-footer{ border-top: 2px solid var(--ink); margin-top: clamp(2rem,4vw,3rem);
                     padding-block: clamp(1.6rem,3vw,2.4rem); display: grid; gap: .7rem; }body.p-cases .cs-footer-text{ margin: 0; font-size: .84rem; color: var(--ink2); }body.p-cases .cs-footer-links{ display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }body.p-cases .cs-footer-links a{ font-family: var(--mono); font-size: .66rem; font-weight: 700;
                             letter-spacing: .09em; text-transform: uppercase;
                             color: var(--ink2); text-decoration: none; }body.p-cases .cs-footer-links a:hover{ color: var(--ink); }body.p-cases .cs-hero-head{ display:flex; align-items:baseline; justify-content:space-between;
                        gap:1rem; flex-wrap:wrap; border-bottom:2px solid var(--ink);
                        padding-bottom:.7rem; }body.p-cases .cs-hero-label{ margin:0; order:2; font-family:var(--mono); font-size:.6rem;
                         font-weight:700; letter-spacing:.14em; text-transform:uppercase;
                         color:var(--ink2); }body.p-cases .cs-hero h1{ order:1; margin:0; font-size:clamp(1.6rem,3.4vw,2.5rem);
                      font-weight:800; letter-spacing:-.03em; color:var(--ink); }body.p-cases .cs-hero-intro{ margin:1.1rem 0 0; max-width:68ch; }body.p-cases .cs-card::after{ top:auto; left:auto; bottom:.9rem; right:.9rem; }
    

/* ==========================================================================
   Case study detail — scoped to body.p-case.
   Scoped because these files share class names with each other and with the
   shared layer (card, hero, tag, metric, highlight all mean different things
   in different places). :root token maps become the scope itself.
   ========================================================================== */
body.p-case{
  
  --surface: var(--bg2);
  --surface-2: var(--bg2);
  --border: var(--rule);
  --text: var(--ink);
  --text-dim: var(--ink2);
  --text-muted: var(--ink2);
  --blue: var(--c4-text);
  --purple: var(--c5-text);
  --pink: var(--c6-text);
  --mint: var(--c3-text);
  --yellow: var(--c1-text);
  --peach: var(--c1-text);
  --font-sans: var(--sans);
  --font-mono: var(--mono);
  --radius: var(--r);

}body.p-case *{ margin: 0; padding: 0; box-sizing: border-box; }body.p-case{
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}body.p-case .window-chrome{
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 100;
}body.p-case .window-dots{
    display: flex;
    gap: 8px;
}body.p-case .window-dot{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}body.p-case .window-dot.red{ background: #ff5f57; }body.p-case .window-dot.yellow{ background: #ffbd2e; }body.p-case .window-dot.green{ background: #28c840; }body.p-case .window-title{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
}body.p-case .window-title img{
    width: 20px;
    height: 20px;
    border-radius: 4px;
}body.p-case .back-link{
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}body.p-case .back-link:hover{
    color: var(--blue);
}body.p-case .hero{
    padding: 60px 24px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}body.p-case .hero-label{
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}body.p-case .hero h1{
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}body.p-case .hero-subtitle{
    font-size: 16px;
    color: var(--text-dim);
    max-width: 600px;
    margin: 0 auto 32px;
}body.p-case .hero-metrics{
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 32px;
    max-width: 600px;
    margin: 0 auto 24px;
}body.p-case .hero-metrics.metrics-2{ max-width: 400px; }body.p-case .hero-metrics.metrics-3{ max-width: 600px; }body.p-case .hero-metrics.metrics-4{ max-width: 700px; gap: 24px; }body.p-case .metric{
    text-align: center;
}body.p-case .hero-metrics.metrics-4 .metric{
    min-width: 120px;
}body.p-case .metric-value{
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 600;
    color: var(--mint);
}body.p-case .metric-label{
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}body.p-case .hero-meta{
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}body.p-case .hero-meta-list{
    display: flex;
    justify-content: center;
    gap: 8px 24px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}body.p-case .hero-meta-item{
    text-align: center;
    max-width: 100%;
}


@media (max-width: 600px) {body.p-case .hero-meta-list{
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
}body.p-case .toc-static{
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    overflow-x: auto;
}body.p-case .toc-grid{
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}body.p-case .toc-item{
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid var(--border);
    transition: all 0.2s;
    white-space: nowrap;
}body.p-case .toc-item[data-section="introduction"]:hover, body.p-case .toc-item[data-section="introduction"].active{
    color: var(--blue);
    border-color: var(--blue);
    background: rgba(92, 138, 255, 0.1);
}body.p-case .toc-item[data-section="problem"]:hover, body.p-case .toc-item[data-section="problem"].active{
    color: var(--purple);
    border-color: var(--purple);
    background: rgba(160, 120, 255, 0.1);
}body.p-case .toc-item[data-section="strategy"]:hover, body.p-case .toc-item[data-section="strategy"].active{
    color: var(--mint);
    border-color: var(--mint);
    background: rgba(74, 224, 160, 0.1);
}body.p-case .toc-item[data-section="platform"]:hover, body.p-case .toc-item[data-section="platform"].active{
    color: var(--peach);
    border-color: var(--peach);
    background: rgba(255, 159, 106, 0.1);
}body.p-case .toc-item[data-section="walkthrough"]:hover, body.p-case .toc-item[data-section="walkthrough"].active{
    color: var(--blue);
    border-color: var(--blue);
    background: rgba(92, 138, 255, 0.1);
}body.p-case .toc-item[data-section="execution"]:hover, body.p-case .toc-item[data-section="execution"].active{
    color: var(--purple);
    border-color: var(--purple);
    background: rgba(160, 120, 255, 0.1);
}body.p-case .toc-item[data-section="outcomes"]:hover, body.p-case .toc-item[data-section="outcomes"].active{
    color: var(--mint);
    border-color: var(--mint);
    background: rgba(74, 224, 160, 0.1);
}body.p-case .toc-item[data-section="challenges"]:hover, body.p-case .toc-item[data-section="challenges"].active{
    color: var(--peach);
    border-color: var(--peach);
    background: rgba(255, 159, 106, 0.1);
}body.p-case .toc-item[data-section="lessons"]:hover, body.p-case .toc-item[data-section="lessons"].active{
    color: var(--yellow);
    border-color: var(--yellow);
    background: rgba(255, 192, 72, 0.1);
}body.p-case .toc-item[data-section="testimonials"]:hover, body.p-case .toc-item[data-section="testimonials"].active{
    color: var(--mint);
    border-color: var(--mint);
    background: rgba(74, 224, 160, 0.1);
}body.p-case .toc-item[data-color="blue"]:hover, body.p-case .toc-item[data-color="blue"].active{
    color: var(--blue);
    border-color: var(--blue);
    background: rgba(92, 138, 255, 0.1);
}body.p-case .toc-item[data-color="purple"]:hover, body.p-case .toc-item[data-color="purple"].active{
    color: var(--purple);
    border-color: var(--purple);
    background: rgba(160, 120, 255, 0.1);
}body.p-case .toc-item[data-color="mint"]:hover, body.p-case .toc-item[data-color="mint"].active{
    color: var(--mint);
    border-color: var(--mint);
    background: rgba(74, 224, 160, 0.1);
}body.p-case .toc-item[data-color="peach"]:hover, body.p-case .toc-item[data-color="peach"].active{
    color: var(--peach);
    border-color: var(--peach);
    background: rgba(255, 159, 106, 0.1);
}body.p-case .toc-item[data-color="yellow"]:hover, body.p-case .toc-item[data-color="yellow"].active{
    color: var(--yellow);
    border-color: var(--yellow);
    background: rgba(255, 192, 72, 0.1);
}body.p-case .toc-item[data-color="pink"]:hover, body.p-case .toc-item[data-color="pink"].active{
    color: var(--pink);
    border-color: var(--pink);
    background: rgba(255, 110, 180, 0.1);
}body.p-case .toc-floating{
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 140px;
}body.p-case .toc-floating.visible{
    opacity: 1;
    visibility: visible;
}body.p-case .toc-floating .toc-grid{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}body.p-case .toc-floating .toc-item{
    font-size: 10px;
    padding: 5px 10px;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 6px;
    background: transparent;
}body.p-case .toc-floating .toc-item[data-section="introduction"]:hover, body.p-case .toc-floating .toc-item[data-section="introduction"].active{
    background: rgba(92, 138, 255, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-section="problem"]:hover, body.p-case .toc-floating .toc-item[data-section="problem"].active{
    background: rgba(160, 120, 255, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-section="strategy"]:hover, body.p-case .toc-floating .toc-item[data-section="strategy"].active{
    background: rgba(74, 224, 160, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-section="platform"]:hover, body.p-case .toc-floating .toc-item[data-section="platform"].active{
    background: rgba(255, 159, 106, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-section="walkthrough"]:hover, body.p-case .toc-floating .toc-item[data-section="walkthrough"].active{
    background: rgba(92, 138, 255, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-section="execution"]:hover, body.p-case .toc-floating .toc-item[data-section="execution"].active{
    background: rgba(160, 120, 255, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-section="outcomes"]:hover, body.p-case .toc-floating .toc-item[data-section="outcomes"].active{
    background: rgba(74, 224, 160, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-section="challenges"]:hover, body.p-case .toc-floating .toc-item[data-section="challenges"].active{
    background: rgba(255, 159, 106, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-section="lessons"]:hover, body.p-case .toc-floating .toc-item[data-section="lessons"].active{
    background: rgba(255, 192, 72, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-section="testimonials"]:hover, body.p-case .toc-floating .toc-item[data-section="testimonials"].active{
    background: rgba(74, 224, 160, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-color="blue"]:hover, body.p-case .toc-floating .toc-item[data-color="blue"].active{
    background: rgba(92, 138, 255, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-color="purple"]:hover, body.p-case .toc-floating .toc-item[data-color="purple"].active{
    background: rgba(160, 120, 255, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-color="mint"]:hover, body.p-case .toc-floating .toc-item[data-color="mint"].active{
    background: rgba(74, 224, 160, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-color="peach"]:hover, body.p-case .toc-floating .toc-item[data-color="peach"].active{
    background: rgba(255, 159, 106, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-color="yellow"]:hover, body.p-case .toc-floating .toc-item[data-color="yellow"].active{
    background: rgba(255, 192, 72, 0.15);
    border: none;
}body.p-case .toc-floating .toc-item[data-color="pink"]:hover, body.p-case .toc-floating .toc-item[data-color="pink"].active{
    background: rgba(255, 110, 180, 0.15);
    border: none;
}


@media (max-width: 1200px) {body.p-case .toc-static{ display: none; }body.p-case .toc-floating{ display: none !important; }
}body.p-case .section{
    padding: 60px 24px;
    border-bottom: 1px solid var(--border);
}body.p-case .section-container{
    max-width: 900px;
    margin: 0 auto;
}body.p-case .section-header{
    margin-bottom: 40px;
}body.p-case .section-label{
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}body.p-case .section h2{
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}body.p-case .section-intro{
    font-size: 15px;
    color: var(--text-dim);
    line-height: 1.7;
}body.p-case .section--blue{ border-left: 3px solid var(--blue); }body.p-case .section--purple{ border-left: 3px solid var(--purple); }body.p-case .section--mint{ border-left: 3px solid var(--mint); }body.p-case .section--peach{ border-left: 3px solid var(--peach); }body.p-case .section--yellow{ border-left: 3px solid var(--yellow); }body.p-case .section--pink{ border-left: 3px solid var(--pink); }body.p-case .two-col{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 32px;
}

@media (max-width: 768px) {body.p-case .two-col{ grid-template-columns: 1fr; }
}body.p-case .two-col h3{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text);
}body.p-case .two-col p{
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.7;
}body.p-case .card-grid{
    display: grid;
    gap: 16px;
    margin-top: 32px;
}body.p-case .card-grid.grid-2{
    grid-template-columns: repeat(2, 1fr);
}body.p-case .card-grid.grid-3{
    grid-template-columns: repeat(3, 1fr);
}body.p-case .card-grid.grid-4{
    grid-template-columns: repeat(2, 1fr);
}body.p-case .card-grid.grid-5{
    grid-template-columns: repeat(2, 1fr);
}body.p-case .card-grid.grid-5 .card:nth-child(5){
    grid-column: span 2;
}body.p-case .card-grid.grid-6{
    grid-template-columns: repeat(3, 1fr);
}body.p-case .card-grid.grid-6-tall{
    grid-template-columns: repeat(2, 1fr);
}


@media (max-width: 768px) {body.p-case .card-grid.grid-2, body.p-case .card-grid.grid-3, body.p-case .card-grid.grid-4, body.p-case .card-grid.grid-5, body.p-case .card-grid.grid-6, body.p-case .card-grid.grid-6-tall{
        grid-template-columns: 1fr;
    }body.p-case .card-grid.grid-5 .card:nth-child(5){
        grid-column: span 1;
    }
}body.p-case .card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}body.p-case .card h3{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}body.p-case .card h4{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}body.p-case .card p{
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
}body.p-case .card ul{
    list-style: none;
    font-size: 13px;
    color: var(--text-dim);
}body.p-case .card ul li{
    padding-left: 16px;
    position: relative;
    margin-bottom: 8px;
}body.p-case .card ul li::before{
    content: '→';
    position: absolute;
    left: 0;
    color: var(--mint);
}body.p-case .card--blue{ border-top: 3px solid var(--blue); }body.p-case .card--purple{ border-top: 3px solid var(--purple); }body.p-case .card--mint{ border-top: 3px solid var(--mint); }body.p-case .card--peach{ border-top: 3px solid var(--peach); }body.p-case .card--yellow{ border-top: 3px solid var(--yellow); }body.p-case .card--pink{ border-top: 3px solid var(--pink); }body.p-case .walkthrough-grid{
    display: grid;
    gap: 16px;
    margin-top: 32px;
}body.p-case .walkthrough-grid.walkthrough-2{
    grid-template-columns: repeat(2, 1fr);
}body.p-case .walkthrough-grid.walkthrough-3{
    grid-template-columns: repeat(3, 1fr);
}body.p-case .walkthrough-grid.walkthrough-4{
    grid-template-columns: repeat(4, 1fr);
}body.p-case .walkthrough-grid.walkthrough-5{
    grid-template-columns: repeat(6, 1fr);
}body.p-case .walkthrough-grid.walkthrough-5 .walkthrough-item:nth-child(1), body.p-case .walkthrough-grid.walkthrough-5 .walkthrough-item:nth-child(2), body.p-case .walkthrough-grid.walkthrough-5 .walkthrough-item:nth-child(3){
    grid-column: span 2;
}body.p-case .walkthrough-grid.walkthrough-5 .walkthrough-item:nth-child(4){
    grid-column: 2 / span 2;
}body.p-case .walkthrough-grid.walkthrough-5 .walkthrough-item:nth-child(5){
    grid-column: 4 / span 2;
}body.p-case .walkthrough-grid.walkthrough-6{
    grid-template-columns: repeat(3, 1fr);
}


@media (max-width: 900px) {body.p-case .walkthrough-grid.walkthrough-3, body.p-case .walkthrough-grid.walkthrough-4, body.p-case .walkthrough-grid.walkthrough-5, body.p-case .walkthrough-grid.walkthrough-6{
        grid-template-columns: repeat(2, 1fr);
    }body.p-case .walkthrough-grid.walkthrough-5 .walkthrough-item:nth-child(1), body.p-case .walkthrough-grid.walkthrough-5 .walkthrough-item:nth-child(2), body.p-case .walkthrough-grid.walkthrough-5 .walkthrough-item:nth-child(3), body.p-case .walkthrough-grid.walkthrough-5 .walkthrough-item:nth-child(4), body.p-case .walkthrough-grid.walkthrough-5 .walkthrough-item:nth-child(5){
        grid-column: span 1;
    }
}


@media (max-width: 500px) {body.p-case .walkthrough-grid.walkthrough-2, body.p-case .walkthrough-grid.walkthrough-3, body.p-case .walkthrough-grid.walkthrough-4, body.p-case .walkthrough-grid.walkthrough-5, body.p-case .walkthrough-grid.walkthrough-6{
        grid-template-columns: 1fr;
    }
}body.p-case .walkthrough-item{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}body.p-case .walkthrough-image{
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}body.p-case .walkthrough-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.2s;
}body.p-case .walkthrough-image:hover img{
    transform: scale(1.05);
}body.p-case .walkthrough-caption{
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    min-height: 44px;
    display: flex;
    align-items: center;
}body.p-case .timeline{
    margin-top: 32px;
}body.p-case .timeline-item{
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}body.p-case .timeline-dot{
    width: 12px;
    height: 12px;
    background: var(--purple);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    position: relative;
}body.p-case .timeline--blue .timeline-dot{ background: var(--blue); }body.p-case .timeline--purple .timeline-dot{ background: var(--purple); }body.p-case .timeline--mint .timeline-dot{ background: var(--mint); }body.p-case .timeline--peach .timeline-dot{ background: var(--peach); }body.p-case .timeline--yellow .timeline-dot{ background: var(--yellow); }body.p-case .timeline--pink .timeline-dot{ background: var(--pink); }body.p-case .timeline--blue .timeline-date{ color: var(--blue); }body.p-case .timeline--purple .timeline-date{ color: var(--purple); }body.p-case .timeline--mint .timeline-date{ color: var(--mint); }body.p-case .timeline--peach .timeline-date{ color: var(--peach); }body.p-case .timeline--yellow .timeline-date{ color: var(--yellow); }body.p-case .timeline--pink .timeline-date{ color: var(--pink); }body.p-case .timeline-item:not(:last-child) .timeline-dot::after{
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 16px);
    background: var(--border);
}body.p-case .timeline-content{
    flex: 1;
}body.p-case .timeline-date{
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--purple);
    margin-bottom: 4px;
}body.p-case .timeline-content h3{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}body.p-case .timeline-content p{
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
}body.p-case .lessons-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 32px;
}

@media (max-width: 768px) {body.p-case .lessons-grid{ grid-template-columns: 1fr; }
}body.p-case .lesson-card{
    background: rgba(255, 192, 72, 0.08);
    border: 1px solid rgba(255, 192, 72, 0.2);
    border-radius: var(--radius);
    padding: 24px;
}body.p-case .lesson-card h3{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--yellow);
}body.p-case .lesson-card p{
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
}body.p-case .lessons-grid--blue .lesson-card{
    background: rgba(92, 138, 255, 0.08);
    border-color: rgba(92, 138, 255, 0.2);
}body.p-case .lessons-grid--blue .lesson-card h3{ color: var(--blue); }body.p-case .lessons-grid--purple .lesson-card{
    background: rgba(160, 120, 255, 0.08);
    border-color: rgba(160, 120, 255, 0.2);
}body.p-case .lessons-grid--purple .lesson-card h3{ color: var(--purple); }body.p-case .lessons-grid--mint .lesson-card{
    background: rgba(74, 224, 160, 0.08);
    border-color: rgba(74, 224, 160, 0.2);
}body.p-case .lessons-grid--mint .lesson-card h3{ color: var(--mint); }body.p-case .lessons-grid--peach .lesson-card{
    background: rgba(255, 159, 106, 0.08);
    border-color: rgba(255, 159, 106, 0.2);
}body.p-case .lessons-grid--peach .lesson-card h3{ color: var(--peach); }body.p-case .lessons-grid--pink .lesson-card{
    background: rgba(255, 110, 180, 0.08);
    border-color: rgba(255, 110, 180, 0.2);
}body.p-case .lessons-grid--pink .lesson-card h3{ color: var(--pink); }


@media (prefers-color-scheme: light) {body.p-case .lesson-card{
        background: rgba(217, 119, 6, 0.08);
        border-color: rgba(217, 119, 6, 0.25);
    }body.p-case .lessons-grid--blue .lesson-card{
        background: rgba(37, 99, 235, 0.08);
        border-color: rgba(37, 99, 235, 0.25);
    }body.p-case .lessons-grid--purple .lesson-card{
        background: rgba(124, 58, 237, 0.08);
        border-color: rgba(124, 58, 237, 0.25);
    }body.p-case .lessons-grid--mint .lesson-card{
        background: rgba(5, 150, 105, 0.08);
        border-color: rgba(5, 150, 105, 0.25);
    }body.p-case .lessons-grid--peach .lesson-card{
        background: rgba(234, 88, 12, 0.08);
        border-color: rgba(234, 88, 12, 0.25);
    }body.p-case .lessons-grid--pink .lesson-card{
        background: rgba(219, 39, 119, 0.08);
        border-color: rgba(219, 39, 119, 0.25);
    }
}body.p-case .testimonials-grid{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
    max-width: 800px;
}body.p-case .testimonials-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

@media (max-width: 768px) {body.p-case .testimonials-row{
        grid-template-columns: 1fr;
    }
}body.p-case .testimonial-media{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}body.p-case .testimonial-media a{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
}body.p-case .testimonial-media img{
    width: 100%;
    flex: 1;
    object-fit: cover;
    object-position: top;
    min-height: 200px;
    transition: transform 0.2s;
}body.p-case .testimonial-media:hover img{
    transform: scale(1.02);
}body.p-case .testimonial-media-caption{
    padding: 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--mint);
    text-align: center;
    flex-shrink: 0;
}body.p-case .testimonial-quote{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
}body.p-case .testimonial-quote--wide{
    width: 100%;
}

@media (max-width: 768px) {body.p-case .testimonials-grid{
        max-width: 100%;
    }
}body.p-case .testimonial-text{
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    font-style: italic;
    flex: 1;
    margin-bottom: 16px;
}body.p-case .testimonial-author{
    display: flex;
    flex-direction: column;
    gap: 2px;
}body.p-case .testimonial-author-name{
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}body.p-case .testimonial-author-role{
    font-size: 12px;
    color: var(--text-muted);
}body.p-case .testimonial-icon{
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    color: var(--mint);
    opacity: 0.4;
}body.p-case .testimonial-icon svg{
    width: 100%;
    height: 100%;
}body.p-case .footer{
    padding: 40px 24px;
    text-align: center;
    background: var(--surface);
}body.p-case .footer-meta{
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}body.p-case .lightbox{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    cursor: pointer;
}body.p-case .lightbox.active{
    display: flex;
}body.p-case .lightbox img{
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}body.p-case .lightbox-caption{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
    background: var(--surface);
    padding: 12px 20px;
    border-radius: 8px;
    max-width: 600px;
    text-align: center;
}


@media (max-width: 768px) {body.p-case .hero{ padding: 40px 16px; }body.p-case .section{ padding: 40px 16px; }body.p-case .hero-metrics{ flex-direction: column; gap: 16px; padding: 20px; }body.p-case .window-chrome{ position: relative; }body.p-case .window-dots{ display: none; }body.p-case .window-title{ font-size: 0; }body.p-case .back-link{ white-space: nowrap; }
}


/* ==========================================================================
   Slides — scoped to body.p-slides.
   Scoped because these files share class names with each other and with the
   shared layer (card, hero, tag, metric, highlight all mean different things
   in different places). :root token maps become the scope itself.
   ========================================================================== */
body.p-slides{
  
  --radius: var(--r);
  --radius-sm: 8px;
  --font: var(--sans);
  --font-display: var(--sans);
  --font-mono: var(--mono);
  --maxw: 760px;
  
  
  --bg-soft: var(--bg2);
  --surface: var(--bg2);
  --surface-2: var(--bg2);
  --border: var(--rule);
  --border-soft: var(--rule);
  --text: var(--ink);
  --text-soft: var(--ink2);
  --muted-strong: var(--ink2);
  --accent: var(--c1-line);
  --accent-soft: var(--c1-text);
  --accent-tint: color-mix(in srgb, var(--c1-line) 10%, transparent);
  --accent-ring: color-mix(in srgb, var(--c1-line) 28%, transparent);
  --good: var(--c3-text);
  --bad: var(--c2-text);
  --info: var(--c4-text);
  --shadow: var(--shadow-1);
  --shadow-soft: var(--shadow-1);

}body.p-slides [data-theme="dark"]{
  --bg: #0e0f12;
  --bg-soft: #15171c;
  --surface: #1a1d24;
  --surface-2: #20242d;
  --border: #2a2f3a;
  --border-soft: #232831;
  --text: #e8eaf0;
  --text-soft: #b6bac6;
  --muted-strong: #9aa0b0;
  --accent: #ff8a3d;
  --accent-soft: #ffb787;
  --accent-tint: rgba(255, 138, 61, 0.10);
  --accent-ring: rgba(255, 138, 61, 0.30);
  --good: #4cfec8;
  --bad: #ff6b8a;
  --info: #7ab8ff;
  --shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
  --shadow-soft: 0 4px 14px rgba(0,0,0,0.25);
}body.p-slides, body.p-slides .entry-card, body.p-slides .dl, body.p-slides .email, body.p-slides .verdict, body.p-slides .callout, body.p-slides .embed, body.p-slides .intro-panel, body.p-slides .topnav a, body.p-slides .theme-toggle, body.p-slides .hero .meta .pill, body.p-slides .entry-card .tag{
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}body.p-slides *, body.p-slides *::before, body.p-slides *::after{ box-sizing: border-box; }body.p-slides{ scroll-behavior: smooth; }body.p-slides{
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.65;
}body.p-slides .wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 24px 96px;
}
@media (max-width: 600px) {body.p-slides .wrap{ padding: 32px 18px 64px; }body.p-slides{ font-size: 16px; }
}body.p-slides .topnav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 48px;
}body.p-slides .topnav a{
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}body.p-slides .topnav a:hover{ color: var(--accent); border-bottom-color: var(--accent); }body.p-slides .topnav .home{ font-weight: 600; }body.p-slides .topnav-right{
  display: flex;
  align-items: center;
  gap: 14px;
}body.p-slides .topnav .crumb{ color: var(--muted-strong); }body.p-slides .theme-toggle{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg-soft);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}body.p-slides .theme-toggle:hover{
  color: var(--accent);
  border-color: var(--accent);
  background: var(--surface);
}body.p-slides .theme-toggle:active{ transform: scale(0.95); }body.p-slides .theme-toggle svg{ width: 16px; height: 16px; display: block; }body.p-slides .theme-toggle .icon-sun{ display: block; }body.p-slides .theme-toggle .icon-moon{ display: none; }body.p-slides [data-theme="light"] .theme-toggle .icon-sun{ display: none; }body.p-slides [data-theme="light"] .theme-toggle .icon-moon{ display: block; }
@media (prefers-color-scheme: light) {body.p-slides :root:not([data-theme="dark"]) .theme-toggle .icon-sun{ display: none; }body.p-slides :root:not([data-theme="dark"]) .theme-toggle .icon-moon{ display: block; }
}body.p-slides .hero{ margin-bottom: 56px; }body.p-slides .hero .eyebrow{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-ring);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
}body.p-slides .hero h1{
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 18px;
}body.p-slides .hero .lede{
  font-size: 19px;
  color: var(--text-soft);
  margin: 0;
  max-width: 640px;
}body.p-slides .hero .meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted-strong);
}body.p-slides .hero .meta .pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
}body.p-slides .hero .meta .pill.good{ color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); }body.p-slides .hero .meta .pill.bad{ color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 30%, transparent); }body.p-slides .hero .meta .pill.info{ color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }body.p-slides section{ margin: 56px 0; }body.p-slides section + section{ margin-top: 64px; }body.p-slides section h2{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}body.p-slides section h2 .num{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-ring);
  padding: 2px 8px;
  border-radius: 6px;
  margin-right: 12px;
  vertical-align: middle;
  transform: translateY(-2px);
}body.p-slides section h3{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 8px;
}body.p-slides section p{ margin: 0 0 14px; color: var(--text-soft); }body.p-slides section p strong{ color: var(--text); font-weight: 600; }body.p-slides section a{ color: var(--accent-soft); }body.p-slides section a:hover{ color: var(--accent); }body.p-slides section ul{ padding-left: 22px; color: var(--text-soft); }body.p-slides section li{ margin-bottom: 6px; }body.p-slides .entries{
  display: grid;
  gap: 16px;
  margin-top: 32px;
}body.p-slides .entry-card{
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  transition: border-color .15s, transform .15s, background .15s;
}body.p-slides .entry-card:hover{
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
}body.p-slides .entry-card .row1{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}body.p-slides .entry-card .company{
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}body.p-slides .entry-card .date{
  font-size: 12px;
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}body.p-slides .entry-card .title{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--text);
}body.p-slides .entry-card .desc{
  font-size: 15px;
  color: var(--text-soft);
  margin: 0 0 10px;
}body.p-slides .entry-card .row2{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--muted-strong);
}body.p-slides .entry-card .tag{
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  padding: 2px 8px;
  border-radius: 999px;
}body.p-slides .entry-card .tag.good{ color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }body.p-slides .entry-card .tag.bad{ color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 35%, transparent); }body.p-slides .entry-card .tag.info{ color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }body.p-slides .entry-card .tag.warn{ color: var(--c1-text); border-color: var(--accent-ring); }body.p-slides .callout{
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin: 22px 0;
}body.p-slides .callout p:last-child{ margin-bottom: 0; }body.p-slides .callout .label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}body.p-slides .redacted{
  background-color: var(--text);
  color: transparent;
  border-radius: 2px;
  padding: 0 6px;
  user-select: none;
  text-decoration: none;
}body.p-slides .highlight{
  background: rgba(255, 220, 60, 0.45);
  color: var(--text);
  border-radius: 2px;
  padding: 0 2px;
}body.p-slides .email{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 22px 0;
  box-shadow: var(--shadow);
}body.p-slides .email-head{
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  font-size: 13px;
  display: grid;
  grid-template-columns: 60px 1fr;
  row-gap: 4px;
  column-gap: 12px;
  font-family: var(--font-mono);
}body.p-slides .email-head .k{ color: var(--muted-strong); text-align: right; }body.p-slides .email-head .v{ color: var(--text); word-break: break-word; }body.p-slides .email-body{
  padding: 22px 24px 24px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
  white-space: pre-wrap;
}body.p-slides .email-body p:first-child{ margin-top: 0; }body.p-slides .email-body p:last-child{ margin-bottom: 0; }body.p-slides .email .signature{
  margin-top: 18px;
  color: var(--muted-strong);
  font-size: 14px;
}body.p-slides .verdict{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 22px 0;
}body.p-slides .verdict .icon{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}body.p-slides .verdict.bad  .icon{ background: color-mix(in srgb, var(--bad)  12%, transparent); color: var(--bad); }body.p-slides .verdict.good .icon{ background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); }body.p-slides .verdict.neutral .icon{ background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); }body.p-slides .verdict h3{
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0 0 4px;
}body.p-slides .verdict p{ margin: 0; color: var(--text-soft); font-size: 15px; }body.p-slides .downloads{
  display: grid;
  gap: 10px;
  margin-top: 16px;
}body.p-slides .dl{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}body.p-slides .dl:hover{ border-color: var(--accent); background: var(--surface-2); }body.p-slides .dl .ext{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--muted-strong);
  min-width: 56px;
  text-align: center;
  text-transform: uppercase;
  flex-shrink: 0;
}body.p-slides .dl .name{ font-weight: 600; font-size: 15px; }body.p-slides .dl .desc{ font-size: 13px; color: var(--muted-strong); margin-top: 2px; }body.p-slides .dl .arrow{ margin-left: auto; color: var(--muted-strong); transition: transform .15s, color .15s; flex-shrink: 0; }body.p-slides .dl:hover .arrow{ color: var(--accent); transform: translateX(2px); }body.p-slides .embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 18px 0;
}body.p-slides .slide-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 18px 0;
}body.p-slides .slide-strip img{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: block;
}body.p-slides .foot{
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted-strong);
}body.p-slides .foot a{ color: var(--text-soft); text-decoration: none; }body.p-slides .foot a:hover{ color: var(--accent); }body.p-slides .intro-panel{
  background: color-mix(in srgb, var(--info) 12%, var(--bg-soft));
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  margin: -16px 0 36px;
  font-size: 15px;
  line-height: 1.55;
}body.p-slides .intro-panel summary{
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  padding: 4px 0;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
}body.p-slides .intro-panel summary::-webkit-details-marker{ display: none; }body.p-slides .intro-panel summary::before{
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
  flex-shrink: 0;
}body.p-slides .intro-panel[open] summary::before{ transform: rotate(90deg); }body.p-slides .intro-panel summary:hover{ color: var(--accent); }body.p-slides .intro-panel[open]{ padding-bottom: 14px; }body.p-slides .intro-panel p{ margin: 6px 0; color: var(--text-soft); }body.p-slides .intro-panel p:first-of-type{ margin-top: 10px; }body.p-slides .intro-panel p:last-child{ margin-bottom: 0; }body.p-slides .intro-panel p.muted{ font-size: 13.5px; color: var(--muted-strong); margin-top: 8px; }
@media (max-width: 600px) {body.p-slides .intro-panel{ padding: 8px 14px; }body.p-slides .intro-panel[open]{ padding-bottom: 12px; }
}body.p-slides .muted{ color: var(--muted-strong); }body.p-slides .mono{ font-family: var(--font-mono); }body.p-slides hr{ border: none; border-top: 1px solid var(--border); margin: 40px 0; }


/* ==========================================================================
   Recipes — scoped to body.p-recipes.
   Scoped because these files share class names with each other and with the
   shared layer (card, hero, tag, metric, highlight all mean different things
   in different places). :root token maps become the scope itself.
   ========================================================================== */
body.p-recipes{
  --color-bg: var(--bg);
  --color-bg-elevated: var(--bg2);
  --color-bg-card: var(--bg2);
  --color-bg-card-hover: var(--bg2);
  --color-accent-pink: var(--c6-line);        
  --color-accent-pink-text: var(--c6-text);   
  --color-accent-turquoise-text: var(--c3-text);
  --color-pink-fill: #C40067;        
  --color-pink-fill-hover: #A80059;  
  --color-accent-orange: var(--c1-line);
  --color-accent-turquoise: var(--c3-line);
  --color-accent-purple: var(--c5-line);
  --color-text: var(--ink);
  --color-text-light: var(--ink2);
  --color-text-muted: var(--ink2);
  --color-border: var(--rule);
  --color-border-subtle: var(--rule);
  --font-main: var(--sans);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --shadow-glow: none;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --transition-fast: 0.15s ease;
  --transition-med: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}body.p-recipes *, body.p-recipes *::before, body.p-recipes *::after{
  box-sizing: border-box;
}body.p-recipes{
  scroll-behavior: smooth;
}body.p-recipes{
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}body.p-recipes .page-wrapper{
  max-width: 780px;
  margin: 0 auto;
  padding: 60px 30px 40px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}body.p-recipes main{
  flex: 1;
}body.p-recipes header{
  margin-bottom: 50px;
}body.p-recipes .header-title{
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 32px;
}body.p-recipes .header-emoji{
  width: auto;
  height: 140px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--c6-line) 18%, transparent));
}body.p-recipes header h1{
  font-family: var(--font-main);
  font-weight: 800;
  margin: 0;
  color: var(--color-text);
  line-height: 1;
}body.p-recipes header h1 .title-line{
  display: block;
}body.p-recipes header h1 .title-top{
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-text-light);
  margin-bottom: 2px;
}body.p-recipes header h1 .title-pm{
  font-size: 5rem;
  font-weight: 800;
  letter-spacing: -3px;
  line-height: 0.85;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}body.p-recipes header .subtitle{
  font-family: var(--font-main);
  font-size: 0.65rem;
  color: var(--color-accent-pink-text);
  margin: 8px 0 0 0;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}body.p-recipes .preamble{
  margin-bottom: 30px;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
}body.p-recipes .preamble summary{
  padding: 16px 20px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color var(--transition-fast);
  font-weight: 600;
}body.p-recipes .preamble summary::-webkit-details-marker{
  display: none;
}body.p-recipes .preamble-icon{
  color: var(--color-accent-turquoise-text);
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform var(--transition-med);
}body.p-recipes .preamble[open] .preamble-icon{
  transform: rotate(45deg);
}body.p-recipes .preamble summary:hover{
  color: var(--color-text);
}body.p-recipes .preamble-content{
  padding: 0 20px 20px 20px;
  font-size: 0.92rem;
  color: var(--color-text-light);
  line-height: 1.7;
  animation: fadeIn var(--transition-med) ease;
}@keyframes fadeIn{
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}body.p-recipes .preamble-content p{
  margin: 0 0 14px 0;
}body.p-recipes .preamble-content p:last-child{
  margin-bottom: 0;
}body.p-recipes .controls{
  display: flex;
  flex-direction: column;
  gap: 18px;
}body.p-recipes .search-wrapper{
  position: relative;
}body.p-recipes .search-icon{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: color var(--transition-fast);
}body.p-recipes #search{
  width: 100%;
  padding: 14px 18px 14px 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-family: var(--font-main);
  background: var(--color-bg-card);
  backdrop-filter: blur(10px);
  color: var(--color-text);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}body.p-recipes #search:focus{
  outline: none;
  border-color: var(--color-accent-turquoise-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c3-line) 18%, transparent), var(--shadow-sm);
}body.p-recipes #search:focus + .search-icon, body.p-recipes .search-wrapper:focus-within .search-icon{
  color: var(--color-accent-turquoise-text);
}body.p-recipes #search::placeholder{
  color: var(--color-text-muted);
}body.p-recipes .filters-wrapper{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}body.p-recipes .filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}body.p-recipes .filter-btn{
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-main);
  font-weight: 500;
  color: var(--color-text-light);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}body.p-recipes .filter-btn:hover{
  border-color: var(--color-accent-turquoise-text);
  color: var(--color-accent-turquoise-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}body.p-recipes .filter-btn:active{
  transform: translateY(0) scale(0.98);
}body.p-recipes .filter-btn.active{
  background: var(--color-pink-fill);
  color: #fff;
  border-color: var(--color-pink-fill);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c6-line) 18%, transparent);
}body.p-recipes .filter-btn.active:hover{
  background: var(--color-pink-fill-hover);
  border-color: var(--color-pink-fill-hover);
}body.p-recipes .clear-filters{
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-family: var(--font-main);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 5px;
  transition: color var(--transition-fast);
}body.p-recipes .clear-filters svg{
  width: 14px;
  height: 14px;
}body.p-recipes .clear-filters:hover{
  color: var(--color-accent-pink-text);
}body.p-recipes .clear-filters.visible{
  display: inline-flex;
}body.p-recipes .recipe-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}body.p-recipes .recipe-card{
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  cursor: pointer;
  transition: all var(--transition-med);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}body.p-recipes .recipe-card::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-accent-pink) 0%, var(--color-accent-turquoise) 100%);
  transform: scaleY(0);
  transition: transform var(--transition-med);
}body.p-recipes .recipe-card:hover{
  border-color: var(--color-border);
  background: var(--color-bg-card-hover);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transform: translateY(-3px);
}body.p-recipes .recipe-card:hover::before{
  transform: scaleY(1);
}body.p-recipes .recipe-card:active{
  transform: translateY(-1px);
}body.p-recipes .recipe-card .card-content{
  flex: 1;
  min-width: 0;
}body.p-recipes .recipe-card h2{
  font-family: var(--font-main);
  font-weight: 700;
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  color: var(--color-text);
  transition: color var(--transition-fast);
}body.p-recipes .recipe-card:hover h2{
  color: var(--color-accent-turquoise-text);
}body.p-recipes .recipe-card .meta{
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}body.p-recipes .recipe-card .tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}body.p-recipes .recipe-card .card-thumb{
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: all var(--transition-med);
  box-shadow: var(--shadow-sm);
}body.p-recipes .recipe-card:hover .card-thumb{
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}body.p-recipes .tag{
  display: inline-block;
  background: var(--color-bg);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}body.p-recipes .recipe-detail{
  display: none;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: 45px 50px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
  animation: slideUp var(--transition-slow) ease;
}@keyframes slideUp{
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}body.p-recipes .recipe-detail.visible{
  display: block;
}body.p-recipes .recipe-detail .back-btn{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-family: var(--font-main);
  font-weight: 500;
  color: var(--color-accent-turquoise-text);
  padding: 8px 0;
  margin-bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
}body.p-recipes .recipe-detail .back-btn:hover{
  color: var(--color-accent-pink-text);
  gap: 12px;
}body.p-recipes .recipe-detail .back-btn svg{
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}body.p-recipes .recipe-detail .back-btn:hover svg{
  transform: translateX(-3px);
}body.p-recipes .recipe-detail .detail-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 10px;
}body.p-recipes .recipe-detail .detail-header-content{
  flex: 1;
  min-width: 0;
}body.p-recipes .recipe-detail .detail-thumb{
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}body.p-recipes .recipe-detail h1{
  font-family: var(--font-main);
  font-weight: 800;
  margin: 0;
  font-size: 2rem;
  color: var(--color-text);
  letter-spacing: -0.5px;
  line-height: 1.25;
}body.p-recipes .recipe-detail .title-rule{
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-pink), var(--color-accent-turquoise));
  margin: 18px 0 20px 0;
  border: none;
  border-radius: 2px;
}body.p-recipes .recipe-detail .meta{
  color: var(--color-text-muted);
  font-size: 0.95rem;
}body.p-recipes .recipe-detail .meta a{
  color: var(--color-accent-turquoise-text);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}body.p-recipes .recipe-detail .meta a:hover{
  color: var(--color-accent-pink-text);
  text-decoration: underline;
}body.p-recipes .recipe-detail .intro{
  font-family: var(--font-main);
  font-style: italic;
  color: var(--color-text-light);
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 35px 0;
  padding: 25px 30px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent-pink);
}body.p-recipes .recipe-detail h2{
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.8rem;
  margin: 40px 0 20px 0;
  color: var(--color-accent-turquoise-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}body.p-recipes .recipe-detail h2::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}body.p-recipes .recipe-detail h3{
  font-size: 0.85rem;
  font-weight: 600;
  margin: 24px 0 12px 0;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}body.p-recipes .recipe-detail ul{
  margin: 0;
  padding: 0;
  list-style: none;
}body.p-recipes .recipe-detail ul li{
  padding: 10px 0 10px 28px;
  position: relative;
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-border-subtle);
}body.p-recipes .recipe-detail ul li:last-child{
  border-bottom: none;
}body.p-recipes .recipe-detail ul li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--color-accent-pink);
  border-radius: 50%;
  opacity: 0.9;
}body.p-recipes .recipe-detail ol{
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}body.p-recipes .recipe-detail ol li{
  padding: 18px 0 18px 55px;
  position: relative;
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-border-subtle);
  counter-increment: step;
  line-height: 1.7;
}body.p-recipes .recipe-detail ol li:last-child{
  border-bottom: none;
}body.p-recipes .recipe-detail ol li::before{
  content: counter(step);
  position: absolute;
  left: 0;
  top: 16px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--color-accent-pink), var(--color-accent-purple));
  color: #fff;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c6-line) 18%, transparent);
}body.p-recipes .recipe-detail .notes{
  margin-top: 45px;
  padding: 22px 26px;
  background: var(--color-bg-elevated);
  border-left: 4px solid var(--color-accent-orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.92rem;
  color: var(--color-text-light);
  line-height: 1.7;
  position: relative;
}body.p-recipes .recipe-detail .notes::before{
  content: '✎';
  position: absolute;
  top: -12px;
  left: 20px;
  background: linear-gradient(135deg, var(--color-accent-orange), var(--color-accent-pink));
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c1-line) 18%, transparent);
}body.p-recipes .recipe-detail .notes strong{
  color: var(--color-text);
  font-weight: 600;
}body.p-recipes .recipe-detail .back-btn-bottom{
  background: none;
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 0.88rem;
  font-family: var(--font-main);
  font-weight: 500;
  color: var(--color-text-light);
  padding: 12px 20px;
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}body.p-recipes .recipe-detail .back-btn-bottom:hover{
  border-color: var(--color-accent-turquoise-text);
  color: var(--color-accent-turquoise-text);
}body.p-recipes .recipe-detail .back-btn-bottom svg{
  width: 18px;
  height: 18px;
}body.p-recipes footer{
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}body.p-recipes footer p{
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}body.p-recipes footer a{
  color: var(--color-accent-turquoise-text);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}body.p-recipes footer a:hover{
  color: var(--color-accent-pink-text);
  text-decoration: underline;
}body.p-recipes .hidden{
  display: none;
}body.p-recipes .no-results{
  color: var(--color-text-muted);
  font-style: italic;
  padding: 50px 0;
  text-align: center;
  font-size: 1rem;
}


@media (max-width: 640px) {body.p-recipes .page-wrapper{
    padding: 35px 20px 30px;
  }body.p-recipes .header-title{
    gap: 16px;
  }body.p-recipes .header-emoji{
    height: 100px;
  }body.p-recipes header h1 .title-top{
    font-size: 1.1rem;
  }body.p-recipes header h1 .title-pm{
    font-size: 3.5rem;
    letter-spacing: -2px;
  }body.p-recipes header .subtitle{
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    margin-top: 6px;
  }body.p-recipes .recipe-card{
    padding: 18px 20px;
    gap: 16px;
  }body.p-recipes .recipe-card h2{
    font-size: 1.1rem;
  }body.p-recipes .recipe-card .card-thumb{
    width: 70px;
    height: 70px;
  }body.p-recipes .recipe-detail{
    padding: 30px 25px;
    border-radius: var(--radius-md);
  }body.p-recipes .recipe-detail h1{
    font-size: 1.5rem;
  }body.p-recipes .recipe-detail .detail-header{
    flex-direction: column-reverse;
    gap: 20px;
  }body.p-recipes .recipe-detail .detail-thumb{
    width: 100%;
    height: 220px;
    border-radius: var(--radius-md);
  }body.p-recipes .recipe-detail .intro{
    font-size: 1.05rem;
    padding: 20px 22px;
    margin: 25px 0;
  }body.p-recipes .recipe-detail ol li{
    padding-left: 45px;
  }body.p-recipes .recipe-detail ol li::before{
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}body.p-recipes body.detail-view .preamble, body.p-recipes body.detail-view .controls{
  display: none;
}body.p-recipes body.detail-view header{
  margin-bottom: 30px;
}

@media (max-width: 640px) {body.p-recipes body.detail-view header{
    margin-bottom: 20px;
  }
}


@media print {body.p-recipes{
    background: #fff;
    padding: 0;
    font-size: 11pt;
    line-height: 1.4;
  }body.p-recipes .page-wrapper{
    max-width: none;
    padding: 0;
  }body.p-recipes header, body.p-recipes .preamble, body.p-recipes .controls, body.p-recipes .recipe-list, body.p-recipes .back-btn, body.p-recipes footer{
    display: none !important;
  }body.p-recipes .recipe-detail{
    display: block !important;
    box-shadow: none;
    padding: 0;
    background: #fff;
    border: none;
    animation: none;
  }body.p-recipes .recipe-detail.visible{
    display: block !important;
  }body.p-recipes .recipe-detail .detail-header{
    margin-bottom: 15px;
  }body.p-recipes .recipe-detail .detail-thumb{
    width: 120px;
    height: 120px;
  }body.p-recipes .recipe-detail h1{
    font-size: 20pt;
  }body.p-recipes .recipe-detail .title-rule{
    background: var(--ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }body.p-recipes .recipe-detail .intro{
    background: var(--bg2);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }body.p-recipes .recipe-detail h2{
    font-size: 11pt;
    margin: 20px 0 12px 0;
    page-break-after: avoid;
    color: var(--ink);
  }body.p-recipes .recipe-detail h2::after{
    display: none;
  }body.p-recipes .recipe-detail h3{
    font-size: 10pt;
    margin: 14px 0 8px 0;
    page-break-after: avoid;
  }body.p-recipes .recipe-detail ul, body.p-recipes .recipe-detail ol{
    page-break-inside: avoid;
  }body.p-recipes .recipe-detail ul li::before{
    background: var(--ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }body.p-recipes .recipe-detail ol li{
    padding-left: 40px;
    margin-bottom: 8px;
  }body.p-recipes .recipe-detail ol li::before{
    background: var(--ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }body.p-recipes .recipe-detail .meta a{
    color: #000;
  }body.p-recipes .recipe-detail .meta a::after{
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: var(--ink2);
  }body.p-recipes .recipe-detail .notes{
    background: var(--bg2);
    border-left-color: var(--ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }body.p-recipes .recipe-detail .notes::before{
    display: none;
  }
}


/* --- case-study card pills, reworked after review -------------------------
   They were centred, which made every card's tag block read as a different
   ragged shape. Left-aligned to the card's text column, tighter, and pinned to
   the card floor so the metric strip below always lines up across a row. */
body.p-cases .cs-pills{justify-content:flex-start;gap:.3rem;margin-bottom:.6rem}
body.p-cases .cs-pill{font-family:var(--mono);font-size:.55rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.22rem .5rem;
  border:1px solid var(--rule);background:transparent;color:var(--ink2)}
body.p-cases .cs-card-link{display:flex;height:100%}
body.p-cases .cs-card{display:flex;flex-direction:column;height:100%}
body.p-cases .cs-pills{margin-top:auto}



/* --- card "go" arrow ------------------------------------------------------
   Was the ↗ glyph, which renders hairline-thin at every weight. This is a
   drawn arrow with a 2.4px rounded stroke, applied as a mask so it takes
   currentColor and flips with the theme. */
body.p-cases .cs-card::after{
  content:'';
  position:absolute; bottom:.9rem; right:.9rem; top:auto; left:auto;
  width:20px; height:20px;
  background:currentColor; color:var(--ink2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0; transform:translateX(-3px);
  transition:opacity .18s ease, transform .18s ease;
}
body.p-cases .cs-card:hover::after{opacity:.75; transform:translateX(0)}
body.p-cases .cs-card{position:relative}


/* --- case-study index nav + metrics, final pass -------------------------- */
/* match the primary index wordmark: name in the sans stack, role beneath in the
   mono kicker. The original rule was sans sentence-case and !important, hence
   the matching !important here. */
body.p-cases .cs-nav-name{font-weight:800;letter-spacing:-.025em;font-size:1rem}
body.p-cases .cs-nav-title{
  font-family:var(--mono)!important; font-size:.6rem!important; font-weight:400!important;
  letter-spacing:.1em!important; text-transform:uppercase!important; color:var(--ink2)!important;
}
/* text-align cannot undo align-items on a flex column, which is why these still
   read centred after the first attempt */



/* --- back link: same drawn arrow, pointing left --------------------------
   Replaces the ← glyph so every arrow on the site is the same object at the
   same weight. Masked, so it inherits colour and flips with the theme. */
.back-link,.cs-nav .back-to{display:inline-flex;align-items:center;gap:.4rem}
.back-link::before,.cs-nav .back-to::before{
  content:''; width:17px; height:17px; flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M11.5 5.5 5 12l6.5 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M11.5 5.5 5 12l6.5 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s ease;
}
.back-link:hover::before,.cs-nav .back-to:hover::before{transform:translateX(-3px)}


/* --- inline arrow ---------------------------------------------------------
   For "0 -> 1" style values. The glyph renders hairline next to heavy numerals;
   this is the same drawn arrow at the same weight, sized in em so it tracks the
   type it sits in. Marked aria-hidden with a visually-hidden "to" beside it, so
   it reads as "0 to 1" rather than "0 right arrow 1". */
.arw{display:inline-block;width:.78em;height:.78em;background:currentColor;
  vertical-align:-.04em;margin-inline:.1em;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M12.5 5.5 19 12l-6.5 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M12.5 5.5 19 12l-6.5 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}


/* --- case-study list markers ---------------------------------------------
   Were the → glyph, hairline against body copy. Same drawn arrow as everywhere
   else, masked so it inherits colour and flips with the theme. */
body.p-case .card ul li::before{
  content:''; width:.72em; height:.72em; top:.42em;
  background:var(--c3-text);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M12.5 5.5 19 12l-6.5 6.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M12.5 5.5 19 12l-6.5 6.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.p-case .card ul li{position:relative;padding-left:1.35em}

/* --- case-study metric strip ---------------------------------------------
   Three fixed columns forced long labels to wrap mid-phrase. Let the columns
   size to their content and wrap as a group instead. */



/* --- recipes: bring it into the system ------------------------------------
   Kevin wants this reading as part of the site rather than a separate brand.
   Keeps the stacked "Cook Like a / PM" title and the fuchsia, both of which are
   the page's character, but moves the chrome onto the shared vocabulary: mono
   kicker for the subtitle, 2px ink rules, --r radius, shared nav and footer. */
body.p-recipes .header-text{display:grid;gap:.3rem}
body.p-recipes header{max-width:1400px;margin-inline:auto;
  padding-inline:clamp(1rem,4vw,3rem);padding-block:clamp(1.6rem,4vw,2.6rem)}
body.p-recipes .header-title{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:.9rem}
body.p-recipes .header-emoji{width:64px;height:64px;border-radius:var(--r);object-fit:cover}
body.p-recipes .subtitle{font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0}
body.p-recipes h1{margin:0;letter-spacing:-.035em;line-height:.95}
body.p-recipes .title-line{display:block}
body.p-recipes .title-pm{color:var(--c6-text)}
body.p-recipes .preamble{border:2px solid var(--ink);border-radius:var(--r);
  padding:.9rem 1.1rem;margin-top:1.1rem;max-width:68ch}
body.p-recipes .preamble summary{font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.5rem;color:var(--ink)}
body.p-recipes .preamble-icon{color:var(--c6-text);font-weight:700}
body.p-recipes .recipe-card{border:2px solid var(--rule);border-radius:var(--r);
  background:var(--bg);transition:border-color .18s,transform .18s}
body.p-recipes .recipe-card:hover{border-color:var(--ink);transform:translateY(-2px)}
body.p-recipes .filter-btn{border-radius:99px;font-family:var(--mono);font-size:.6rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase}


/* --- shared nav component: hold its own colours -------------------------
   On the blog, styles-merged.css sets a{color:var(--coral-text)}, which the
   wordmark inherited. The component has to be self-contained to look the same
   on every page, so it states its colours rather than relying on inheritance. */
.nav .mk,.nav .mk:visited{color:var(--ink);text-decoration:none}
.nav .mk small{color:var(--ink2)}
.nav-l a,.nav-l a:visited{color:var(--ink2);text-decoration:none}
.nav-l a:hover{color:var(--ink)}
.fv .cta,.nav .cta,.nav .cta:visited{background:var(--marigold);color:var(--on-mari);text-decoration:none}


/* --- blog buttons on the shared palette ---------------------------------- */
body .btn-primary,body .header-cta{background:var(--marigold);color:var(--on-mari);border-color:var(--marigold)}
body .btn-primary:hover,body .header-cta:hover{background:var(--c1-line);color:var(--on-mari)}
body .btn-secondary{border:2px solid var(--ink);color:var(--ink);background:transparent}
body .btn-secondary:hover{background:var(--ink);color:var(--on-invert)}

/* --- case-study metric strip: breathing room around the dividers ---------
   The values were butting up against the 1px rules between columns. */


/* --- About: lead sits alongside the photo, not centred against it -------- */
.about-intro{align-items:flex-start;gap:1.2rem}
.about-intro .about-lead{margin:0;flex:1 1 18rem;min-width:0;align-self:center}


/* --- slides: bring the chrome to the shared vocabulary ------------------- */
body.p-slides .topnav{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:.8rem;margin-bottom:1.6rem}
body.p-slides .topnav .mk{font-weight:800;letter-spacing:-.025em;font-size:1rem;
  display:grid;gap:.12rem;line-height:1.12;text-decoration:none;color:var(--ink)}
body.p-slides .topnav .mk small{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:400;color:var(--ink2)}
body.p-slides .back-to{font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);text-decoration:none}
body.p-slides .back-to:hover{color:var(--ink)}
body.p-slides .colophon{border-top:2px solid var(--ink);margin-top:clamp(2rem,4vw,3rem)}


/* --- case-study metric strip, spacing pass ------------------------------
   Kevin: values were crowding the dividers. Give each cell real inside room
   and keep the rule as a separator rather than a wall the text leans on. */



/* ==========================================================================
   Review pass: nav responsiveness, case-study palette, metric layout
   ========================================================================== */

/* --- nav: it overflowed well above the 760px breakpoint --------------------
   The link row had no min-width:0, so it refused to shrink and pushed the CTA
   off-screen on any narrow window, not just phones. Now it shrinks and scrolls
   at every width, and the wordmark never wraps to two lines. */
.nav{flex-wrap:nowrap;gap:.75rem}
.nav .mk{flex:0 0 auto;white-space:nowrap}
.nav-l{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.nav-l::-webkit-scrollbar{display:none}
.nav-l a{white-space:nowrap}
.nav .cta{flex:0 0 auto}
@media(max-width:760px){.nav .mk small{display:none}}

/* --- case studies: palette from the shared theme -------------------------
   Kevin: keep the side nav, retheme everything else. These were the last of
   the original purple/green identity. */
body.p-case .hero-label,body.p-case .section-label{color:var(--c5-text)}
body.p-case .metric-value,body.p-case .hero-metrics .metric-value{color:var(--c3-text)}
body.p-case .toc-item{border-color:var(--rule);color:var(--ink2)}
body.p-case .toc-item:hover,body.p-case .toc-item.active{border-color:var(--ink);color:var(--ink)}
body.p-case .back-link{color:var(--ink2)}
body.p-case .back-link:hover{color:var(--ink)}
body.p-case .window-chrome{background:var(--bg2);border-color:var(--rule)}
body.p-case .window-title{color:var(--ink2)}



/* --- slides: theme colours + a calmer header ---------------------------- */
body.p-slides .hero h1{font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:-.035em;margin:0 0 .6rem}
body.p-slides .hero .lede{font-size:1rem;color:var(--ink2);max-width:64ch}
body.p-slides .hero .eyebrow{font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
body.p-slides .entry-card .company{color:var(--c1-text)}
body.p-slides .entry-card .title{color:var(--ink)}
body.p-slides .callout{border-left:3px solid var(--c1-line);background:var(--bg2)}
body.p-slides .verdict.good .icon{color:var(--c3-text)}
body.p-slides .verdict.bad .icon{color:var(--c2-text)}


/* --- nav below 900px: two rows, every page ---------------------------------
   Squeezing wordmark + links + CTA onto one line truncated the links mid-word,
   and hiding them on sub-pages just made the bar look unfinished. The homepage
   already solved this by wrapping to a second row; this makes that the shared
   behaviour so every page has the same nav. Row 1 is wordmark + Office Hours,
   row 2 is the full-width link rail, which scrolls if it needs to. */
@media(max-width:900px){
  .nav{flex-wrap:wrap;row-gap:.55rem;align-items:center}
  .nav .mk{order:1}
  .nav .cta{order:2;margin-left:auto}
  .nav .mk small{display:block}
  .nav-l{order:3;flex:0 0 100%;gap:.9rem;flex-wrap:nowrap;
    overflow-x:auto;padding-bottom:.1rem}
}
@media(max-width:520px){
  .nav .mk small{display:none}
}

/* --- slides: one hue per card -------------------------------------------- */
body.p-slides .entry-card{border-width:2px;border-style:solid}
body.p-slides .entry-card:nth-of-type(6n+1){border-color:var(--c1-line)}
body.p-slides .entry-card:nth-of-type(6n+2){border-color:var(--c2-line)}
body.p-slides .entry-card:nth-of-type(6n+3){border-color:var(--c3-line)}
body.p-slides .entry-card:nth-of-type(6n+4){border-color:var(--c4-line)}
body.p-slides .entry-card:nth-of-type(6n+5){border-color:var(--c5-line)}
body.p-slides .entry-card:nth-of-type(6n+6){border-color:var(--c6-line)}
body.p-slides .entry-card:nth-of-type(6n+1) .company{color:var(--c1-text)}
body.p-slides .entry-card:nth-of-type(6n+2) .company{color:var(--c2-text)}
body.p-slides .entry-card:nth-of-type(6n+3) .company{color:var(--c3-text)}
body.p-slides .entry-card:nth-of-type(6n+4) .company{color:var(--c4-text)}
body.p-slides .entry-card:nth-of-type(6n+5) .company{color:var(--c5-text)}
body.p-slides .entry-card:nth-of-type(6n+6) .company{color:var(--c6-text)}
body.p-slides .entry-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}





/* --- prototype cards: logo + company on one line ---------------------------
   The company name used to sit under the mark on its own row, which read as two
   separate labels for the same thing. Side by side it reads as one lockup. */
body.p-proto .card-head{display:flex;align-items:center;gap:.65rem;min-width:0}
body.p-proto .card-head .card-logo{flex:0 0 auto;margin-bottom:0}
body.p-proto .card-head .card-k{min-width:0;line-height:1.25}
/* No wrap fallback on phones: the point of the lockup is that the name sits
   beside the mark. The name wraps to two lines instead, the mark shrinks. */
@media(max-width:480px){
  body.p-proto .card-head{gap:.55rem}
  body.p-proto .card-head .card-logo{max-width:88px}
  body.p-proto .card-head .card-logo.tile{max-width:none;height:32px}
}

/* The Success Academy mark is boxed in its brand orange. The width attribute
   (a presentational hint) pinned the tile to 130px while object-fit only drew
   the glyph at ~74px, leaving a strip of bare orange on the right. Letting the
   width follow the height and the intrinsic 98:29 ratio makes the tile hug it. */
.card-logo.tile{width:auto}


/* Six links at 390px overran the rail by ~28px, clipping the last one with no
   scroll affordance to explain it. Tightening the gap and type fits all six. */
@media(max-width:430px){
  .nav-l{gap:.62rem}
  .nav-l a{font-size:.74rem}
}

/* The rail grows to fill the space between wordmark and CTA (that flex:1 is what
   stops it overflowing near 1000px), but its links were left-aligned inside it,
   so they hugged the wordmark and left a wide gap before Office Hours.  */
@media(min-width:901px){
  .nav-l{justify-content:center}
}

/* Centre the rail on the PAGE, not between its neighbours. space-between put
   the links midway between the wordmark (283px) and the CTA (106px), which sits
   ~88px right of true centre. A three-column grid with equal side tracks makes
   the middle track the page centre regardless of how wide the flanks are. */
@media(min-width:901px){
  .nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;gap:1rem}
  .nav .mk{justify-self:start;grid-column:1}
  .nav-l{justify-self:center;grid-column:2;flex:0 0 auto;min-width:0;max-width:100%}
  .nav .cta{justify-self:end;grid-column:3}
}


/* --- case-study cards: a border you can actually see -----------------------
   2px of --rule was 1.29:1 in light and, once the translucent dark value was
   composited, 1.39:1 in dark. Both fail the 3:1 an object border needs. */
body.p-cases .cs-card{border-color:var(--rule-strong)}


/* --- inline diagonal arrow ------------------------------------------------
   The "go and see it" arrow that trails an outbound link label. Same object and
   path as the case-study card hover arrow, sized in em so it tracks its type.
   aria-hidden with a visually-hidden word beside it, so a screen reader gets
   "View Press Coverage, opens in a new tab" rather than a glyph name. */
.arw-ne{display:inline-block;width:.72em;height:.72em;background:currentColor;
  vertical-align:-.02em;margin-inline-start:.28em;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}


/* --- case-study index metric strip (single source of truth) ---------------
   This replaced four stacked blocks that accumulated across successive fixes:
   a left-align pass, a flex-to-grid pass, a column-sizing pass, and a divider
   pass. Each only patched what the one before got wrong, so the real values
   were spread over ~250 lines and you had to read all four to know what won.
   Every property the earlier blocks touched is set explicitly here, so this
   block alone determines the result regardless of what the imported
   case-studies CSS above it says.

   Three even columns that collapse to one on a narrow card. Dividers are drawn
   on the LEFT of every cell but the first; the imported CSS drew them on the
   right as well, which is what produced doubled rules. */
body.p-cases .cs-metrics{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.2rem 0;
  margin-top:auto;
  padding-top:.7rem;
  border-top:1px solid var(--rule);
  text-align:left;
  justify-items:start;
}
body.p-cases .cs-metric{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  align-items:flex-start;
  text-align:left;
  min-width:0;
  padding:0 .8rem;
  border-left:1px solid var(--rule);
  border-right:0;                 /* cancels the imported :not(:last-child) rule */
}
body.p-cases .cs-metric:not(:last-child){border-right:0}
body.p-cases .cs-metric:first-of-type{padding-left:0;border-left:0}
body.p-cases .cs-metric-value{
  font-size:1.15rem;font-weight:800;color:var(--ink);
  line-height:1.2;white-space:nowrap;margin-bottom:4px;
}
body.p-cases .cs-metric-label{
  font-size:.56rem;color:var(--ink2);text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;line-height:1.35;
  white-space:normal;hyphens:auto;
}
@media(max-width:460px){
  body.p-cases .cs-metrics{grid-template-columns:1fr}
  body.p-cases .cs-metric{padding:0;border-left:0}
}


/* ==========================================================================
   HOMEPAGE (Full Volume)
   Moved out of the inline <style> in full-volume.html so the site has one
   stylesheet. Scoped under .fv, the wrapper around the whole homepage,
   because the two sheets had drifted: 19 of the 23 selectors they shared
   disagreed, .pad most importantly (fv.css caps it at 1400px, the homepage
   never did). Scoping preserves both instead of silently re-laying-out one.
   .js-reveal sits on <html>, an ancestor of the wrapper, so those become
   html.js-reveal .fv; the lone html rule is scoped with :has(.fv).
   ========================================================================== */
.fv{
  /* ---------- neutrals (flip per mode) ---------- */
  --bg:#F4F4F5; --bg2:#E9E9EC; --ink:#111113; --ink2:#5B5B62; --rule:#D8D8DD;
  /* the deliberate contrast panel. Separate from --ink because --ink also
     carries text and borders, which invert; these panels must stay panels. */
  --invert:#111113; --on-invert:#F2F2F4;

  /* ---------- hue identity (same in both modes) ---------- */
  --marigold:#E8A317; --madder:#C3384B; --viridian:#2C7A63;
  --cobalt:#1F4B8F;   --plum:#6D4AA8;   --fuchsia:#9E227D;
  --on-hue:#FFFFFF;    /* text on a saturated card: >=5.16 on all five */
  --on-mari:#241700;   /* marigold is a LIGHT surface, so it needs dark text */

  /* ---------- accents as text (depend on the ground) ---------- */
  --accent-text:#AB3142;       /* small accent text on the page      5.88 */
  --accent-on-invert:#CF5F6F;  /* small accent text on the panel     4.96 */
  --gold-on-invert:#E8A317;    /* gold display text on the panel     8.74 */
  --cta-blue:#4B6FA5;          /* button on the invert band          3.72 */

  /* ---------- strength chips: outlined when idle, filled when chosen ----------
     --line is the outline and must clear 3:1 against the PAGE, so it moves per
     mode. --fill is the pure hue and never moves, because a filled chip brings
     its own ground with it. */
  --c1-line:#A77510;         --c1-fill:var(--marigold); --c1-on:var(--on-mari);
  --c2-line:var(--madder);   --c2-fill:var(--madder);   --c2-on:var(--on-hue);
  --c3-line:var(--viridian); --c3-fill:var(--viridian); --c3-on:var(--on-hue);
  --c4-line:var(--cobalt);   --c4-fill:var(--cobalt);   --c4-on:var(--on-hue);
  --c5-line:var(--plum);     --c5-fill:var(--plum);     --c5-on:var(--on-hue);
  --c6-line:var(--fuchsia);  --c6-fill:var(--fuchsia);  --c6-on:var(--on-hue);

  /* ---------- rotating hero words: need 3:1 on the page ---------- */
  --swap-1:var(--cobalt); --swap-2:var(--plum);
  --swap-3:var(--viridian); --swap-4:var(--madder);

  /* ---------- writing-card dots: 3:1 on the invert panel, six distinct
       hues, no repeats. Lifted here because the panel is dark. ---------- */
  --dot-1:#4B6FA5; --dot-2:#B35299; --dot-3:#E8A317;
  --dot-4:#8A6EB9; --dot-5:#2C7A63; --dot-6:#C3384B;

  /* ---------- scrims and hairlines ---------- */
  --nav-bg:rgba(244,244,245,.92);
  --scrim-dark:rgba(0,0,0,.28);
  --scrim-light:rgba(255,255,255,.28);
  --hairline-invert:rgba(255,255,255,.17);
  --hairline-mari:rgba(0,0,0,.17);

  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:10px;
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.5;-webkit-font-smoothing:antialiased;
}.fv *{box-sizing:border-box}/* Deliberately left at (0,1,1). Anything that paints its own foreground on a
   coloured surface must be at least (0,2,0) to win. Do NOT add :not() here to
   fix a card: that raises this to (0,2,1) and silently outranks every
   two-class button rule instead. */
.fv a{color:inherit}/* Mirrors the live site, which hides #skills, #education, #career-highlights
   and #looking-for behind a config-driven display:none. Same tack here: the
   markup stays, one class turns it off. */
.fv .is-off{display:none}.fv .pad{padding-left:clamp(1rem,4vw,3.2rem);padding-right:clamp(1rem,4vw,3.2rem)}/* reveal — fail-open: content is visible unless JS opts in to animating it.
   No JS, a thrown error, or an unsupported API leaves the page fully readable. */
.fv .rv{opacity:1;transform:none}html.js-reveal .fv .rv{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}html.js-reveal .fv .rv.on{opacity:1;transform:none}.fv .d1{transition-delay:.05s}.fv .d2{transition-delay:.1s}.fv .d3{transition-delay:.15s}.fv .d4{transition-delay:.2s}.fv .d5{transition-delay:.25s}.fv .d6{transition-delay:.3s}/* nav */
.fv .nav{position:sticky;top:0;z-index:500;background:var(--nav-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding-top:.85rem;padding-bottom:.85rem}.fv .nav-l{display:flex;gap:1.1rem;flex-wrap:wrap}
/* The sticky nav wrapped to three rows at 375px, eating 167px (20.6%) of the
   viewport permanently and burying every anchor target 125px underneath itself.
   One nowrap row that scrolls horizontally keeps all six links reachable and
   holds the bar near 60px. */
@media(max-width:760px){.fv .mk small{display:none}.fv .cta{flex:0 0 auto}
}.fv .nav-l a{font-size:.8rem;color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent;transition:.16s}.fv .nav-l a:hover{color:var(--ink);border-bottom-color:var(--marigold)}.fv .mk{font-weight:800;letter-spacing:-.025em;display:grid;gap:.12rem;line-height:1.12}/* who and where, persistent. Lets the hero drop its own location line. */
.fv .mk small{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2);font-weight:400;line-height:1.3}
@media(max-width:560px){.fv .mk small{font-size:.55rem;letter-spacing:.07em}}/* .fv prefix is load-bearing: `.fv a{color:inherit}` is (0,1,1) and was
   beating a bare `.cta` at (0,1,0), so this text was page ink, not on-mari.
   Invisible in light mode, 1.94:1 in dark. */
.fv .cta{background:var(--marigold);color:var(--on-mari);font-weight:800;font-size:.76rem;
  padding:.42rem .85rem;border-radius:var(--r);text-decoration:none;white-space:nowrap;transition:transform .18s}.fv .cta:hover{transform:translateY(-2px)}
/* Narrow: identity and the CTA share the top row, links drop to their own.
   Without this the three flex children stack into three rows and the sticky
   bar eats a fifth of a phone screen. */
/* Below 900 the bar is two rows: wordmark + CTA, then the links beneath.
   flex-basis:100% is what drops the links to their own line, so this block
   needs wrap ON. A later rule forcing nowrap squeezed all three onto one line
   and clipped the links, which is the bug this comment exists to prevent. */
@media(max-width:900px){.fv .nav{align-items:center;row-gap:.65rem;flex-wrap:wrap}.fv .mk{order:1}.fv .cta{order:2;margin-left:auto}.fv .nav-l{order:3;flex-basis:100%;gap:.9rem;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-ms-overflow-style:none}.fv .nav-l::-webkit-scrollbar{display:none}.fv .nav-l a{white-space:nowrap}
}
/* Six links at 390px overran the rail by ~28px, clipping the last one with no
   scroll affordance to explain it. Tightening the gap and type fits all six. */
/* The rail grows to fill the space between wordmark and CTA (that flex:1 is what
   stops it overflowing near 1000px), but its links were left-aligned inside it,
   so they hugged the wordmark and left a wide gap before Office Hours.  */
@media(min-width:901px){.fv .nav-l{justify-content:center}
}
/* Centre the rail on the PAGE, not between its neighbours. space-between put
   the links midway between the wordmark (283px) and the CTA (106px), which sits
   ~88px right of true centre. A three-column grid with equal side tracks makes
   the middle track the page centre regardless of how wide the flanks are. */
@media(min-width:901px){.fv .nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;gap:1rem}.fv .nav .mk{justify-self:start;grid-column:1}.fv .nav-l{justify-self:center;grid-column:2;flex:0 0 auto;min-width:0;max-width:100%}.fv .nav .cta{justify-self:end;grid-column:3}
}
@media(max-width:430px){.fv .nav-l{gap:.62rem}.fv .nav-l a{font-size:.74rem}
}/* section furniture */
.fv .sec{padding-top:clamp(2.6rem,5.5vw,4.4rem);padding-bottom:clamp(.4rem,1vw,1rem)}.fv .sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.2rem;padding-bottom:.7rem;border-bottom:2px solid var(--ink)}.fv .sec-h h2{margin:0;font-size:clamp(1.3rem,3vw,2.05rem);font-weight:800;letter-spacing:-.033em}.fv .sec-h span{font-size:.76rem;color:var(--ink2)}/* hero */
.fv .hero{padding-top:clamp(2.4rem,6vw,5rem);padding-bottom:clamp(1.4rem,3vw,2.2rem)}.fv .big{margin:0;font-weight:800;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(2.1rem,7.4vw,5.4rem);max-width:19ch;text-wrap:balance}.fv .swap{display:inline-grid;vertical-align:baseline}.fv .swap b{grid-area:1/1;opacity:0;transform:translateY(.3em) rotate(-2.5deg);
  transition:opacity .4s,transform .4s,color .4s}.fv .swap b.live{opacity:1;transform:none}/* One theme colour per word — the same four the bento cards use, so the
   headline rhymes with the work below it. Marigold is deliberately excluded:
   at 1.97:1 on this ground it fails contrast outright. These four clear the 3:1
   large-text floor, and "judgment" takes cobalt (6.81:1) because it's the
   word that stays on screen after the cycle stops. */
.fv .swap b:nth-child(1){color:var(--swap-1)}/* judgment  7.76:1 */
.fv .swap b:nth-child(2){color:var(--swap-2)}/* taste     5.98:1 */
.fv .swap b:nth-child(3){color:var(--swap-3)}/* discovery 4.69:1 */
.fv .swap b:nth-child(4){color:var(--swap-4)}/* thinking  4.79:1 */
/* ---- hero: type left, skyline right, hard 2px rule between ----
   A real <img> rather than a background: the browser can prioritise it, it
   carries alt text into the text layer, and width/height stop it shifting the
   page as it decodes. <picture> does the light/dark swap with the plates the
   live site already ships. */
.fv .hero-split{display:grid;grid-template-columns:1.05fr .95fr;
  border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;
  min-height:clamp(17rem,34vw,23rem)}.fv .hero-type{padding:clamp(1.1rem,2.4vw,1.9rem);
  display:flex;flex-direction:column;justify-content:center;
  border-right:2px solid var(--ink);min-width:0}.fv .hero-shot{display:block;position:relative;min-width:0}.fv .hero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}/* The headline and arc are sized for a full-width hero; in a column they need
   their own scale. The arc especially: .arc-chain is nowrap, so if it does not
   fit the column it overflows rather than wrapping. */
.fv .hero-split .big{font-size:clamp(1.7rem,3.9vw,3.1rem);max-width:16ch}.fv .hero-split .arc{font-size:clamp(.8rem,1.24vw,1.02rem);max-width:none;margin-top:1rem}
@media(max-width:820px){.fv .hero-split{grid-template-columns:1fr}.fv .hero-type{border-right:0;border-bottom:2px solid var(--ink)}.fv .hero-shot{min-height:clamp(9rem,26vw,13rem)}.fv .hero-split .big{font-size:clamp(2rem,6.4vw,3rem);max-width:19ch}.fv .hero-split .arc{font-size:clamp(.78rem,2.9vw,1rem)}
}/* the arc. Two quiet steps then the weighted term, so it reads as a run-up
   rather than three equal items, and "Full Stack Product Manager" gets defined
   by the chain instead of by a sentence. No numbers here on purpose: the line
   is about range, not duration. */
/* 60ch, not 54: the drawn arrows are wider than the glyph they replaced and
   the line needs 56ch to stay on one row. */
.fv .arc{margin:1.2rem 0 0;font-size:clamp(1rem,1.9vw,1.4rem);line-height:1.45;max-width:60ch;text-wrap:balance}.fv .arc-step{color:var(--ink2);font-size:.8em;white-space:nowrap}/* Drawn, not typed. U+2192 falls back to whatever arrow font the platform has,
   so it renders stubby and inconsistent; this is a 1px hairline that matches the
   rules used elsewhere on the page and scales with the type. */
.fv .arc-sep{display:inline-block;position:relative;width:1.75em;height:1em;
  margin:0 .26em;vertical-align:middle;color:var(--ink2)}.fv .arc-sep::before{content:"";position:absolute;left:0;right:.08em;top:50%;
  height:1px;background:currentColor;transform:translateY(-50%)}.fv .arc-sep::after{content:"";position:absolute;right:.08em;top:50%;
  width:.42em;height:.42em;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg)}
@media(max-width:560px){.fv .arc-sep{width:1.25em;margin:0 .2em}/* sized so the nowrap chain still fits a 375px screen without overflowing */
  .fv .arc{font-size:clamp(.74rem,3.3vw,1rem);max-width:none}
}/* nowrap: the whole term is the payoff of the chain, so it must never break
   across lines and orphan "Manager" on its own. */
.fv .arc-now{font-weight:800;letter-spacing:-.025em;color:var(--ink);white-space:nowrap}/* its own beat: this is the line that answers the gap */
/* The chain is one unit: if anything has to drop to a second line it must be
   "Still building.", never a word out of the arc. nowrap enforces that, and the
   mobile type scale below is what keeps nowrap from overflowing. */
.fv .arc-chain{white-space:nowrap}/* The arrow is drawn in CSS, so the separator span was empty and every text
   extractor saw "EngineerConsultantFull Stack Product Manager". A real U+2192
   now lives in the text layer, clipped rather than display:none or
   visibility:hidden, both of which would drop it right back out of the tree.
   position:absolute keeps it out of flow so the drawn arrow does not move. */
/* inline-block, not absolute: an absolutely-positioned box is block-level, so
   innerText came back as "Engineer\n -> \nConsultant". Inline-block keeps the
   whole chain on one line in the text layer. The &nbsp; are load-bearing here:
   with plain spaces innerText collapses them to "Engineer->Consultant".
   Measured visual delta: 0px. */
/* Live had scroll-behavior:smooth plus [id]{scroll-margin-top:80px}; the
   redesign shipped neither, so anchors landed under the sticky bar. */
html:has(.fv){scroll-behavior:smooth;scroll-padding-top:5rem}
@media(max-width:760px){html:has(.fv){scroll-padding-top:4.5rem}}
@media(prefers-reduced-motion:reduce){html:has(.fv){scroll-behavior:auto}}.fv .arc-sep-text{
  display:inline-block; width:1px; height:1px; vertical-align:baseline;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}/* bento */
/* 3 columns with an uneven second row, matching the live bento. The 4-col
   version squeezed the plugin list to 276px and clipped it. */
/* Row heights are derived, not eyeballed. A small card needs 89.4px of content
   (55.8 of text + 2x1.05rem padding) plus ~31px of clear space for the .go
   hover bar that slides up over the bottom edge: 7.6rem = 121.6px leaves 32.2.
   Row 2 holds the 2-up .bstack, so it MUST be two small cards plus the gap:
   2 x 7.6rem + .6rem = 15.8rem exactly. Get that wrong and the two stacked
   cards stop matching the two beside them. */
.fv .bento{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:7.6rem 15.8rem;gap:.6rem}.fv .bstack{display:grid;grid-template-rows:1fr 1fr;gap:.6rem;min-height:0}.fv .bstack .bc{min-height:0}/* Clearance for the .go bar at every width. The bar is ~31px and the content
   box already has 16.8px of bottom padding, so it eats ~14px of content. The
   old 14px of padding left exactly that much underneath it, which is why
   "Read more" printed over the last list item. */
.fv .bento .h2>div, .fv .bento .b-mari>div{padding-bottom:34px}
/* Touch has no hover, so a hover-only CTA is either dead UI or slides over
   text. Show it in place instead. */
@media(hover:none){.fv .bc .go{transform:none}}
/* The two list cards are taller than their content by construction: the writing
   card spans both rows and the plugins card is sized by the .bstack next to it,
   so neither height has anything to do with what's in it. Let the list itself
   take up the room instead of pooling every spare pixel as a blank band at the
   bottom. padding-bottom stops the list at the top edge of the .go bar, which
   reaches 13.8px into the content box. Scoped to the 3-col layout: at narrower
   widths these cards are already content-tight (and the plugins card already
   overflowed its 8.6rem auto-row before this change). */
@media(min-width:901px){/* align-content:stretch is load-bearing. `.bc` sets space-between, which
     content-sizes the single in-flow row, so height:100% on the child resolves
     to the child's own height and nothing stretches. stretch grows the auto row
     to the full card instead. */
  .fv .bento .h2, .fv .bento .b-mari{align-content:stretch}.fv .bento .h2>div, .fv .bento .b-mari>div{display:flex;flex-direction:column}/* Equal rows, so the list fills the leftover height instead of leaving a blank
     band under it. 6 rows in the writing card and 3 in the plugins card come out
     within ~2px of each other (52.4 vs 54.3), so the two read as the same list.
     grid-auto-rows:1fr is minmax(auto,1fr) — rows still refuse to shrink below
     their text, so nothing clips when the titles wrap at narrow 3-col widths. */
  .fv .bento .h2 .posts, .fv .bento .b-mari .posts{flex:1;gap:0;grid-auto-rows:1fr}/* The row track is 1fr, so the <a> is centred in its band by the grid; inside
     the <a> the dot aligns to the FIRST line, not to the centre of a wrapped
     block. Centring both put the dot between the two lines of a title that
     wraps. margin-top drops it onto the first line's optical centre. */
  .fv .bento .h2 .posts a, .fv .bento .b-mari .posts a{align-items:flex-start;align-self:center;padding:.3rem 0;
    border-top:1px solid var(--hairline-invert)}.fv .bento .b-mari .posts a{border-top-color:var(--hairline-mari)}.fv .bento .h2 .posts a:first-child, .fv .bento .b-mari .posts a:first-child{border-top:0}.fv .bento .h2 .posts i, .fv .bento .b-mari .posts i{margin-top:.3rem}
}
@media(max-width:900px){.fv .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:minmax(8.6rem,auto)}.fv .bento .h2, .fv .bstack{grid-row:span 2}
}
/* Below 700 go single column and let every card size to its own content. The
   bento composition is a desktop idea; at 2 columns it degrades into ragged
   masonry with an orphaned gap, and the list cards get narrow enough that every
   item wraps to two lines and overflows its row. */
@media(max-width:700px){/* template-rows:none is explicit so this block stands on its own instead of
     inheriting it from the 900px rule above. */
  .fv .bento{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto}.fv .bento .h2, .fv .bstack{grid-row:auto}.fv .bstack{grid-template-rows:auto auto}.fv .bento .bc{min-height:8.6rem}
}.fv .bc{border-radius:var(--r);padding:1.05rem;display:grid;align-content:space-between;
  position:relative;overflow:hidden;text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.3,1)}/* Two selectors on purpose. `.bc` elements carry `.rv` themselves, and the
   reveal's end state `.js-reveal .rv.on{transform:none}` is (0,3,0) — it was
   silently beating a plain `.bc:hover` at (0,2,0), so the lift never fired
   once a card revealed. The first selector wins that fight; the second keeps
   hover working when JS never runs and `.on` is never added. */
.fv .bc.rv.on:hover, .fv .bc:hover{transform:translateY(-6px)}.fv .bc h3{margin:0;font-size:1.2rem;font-weight:800;letter-spacing:-.026em;line-height:1.05}.fv .bc p{margin:.3rem 0 0;font-size:.79rem;line-height:1.38;opacity:.9}.fv .bc .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;opacity:1}.fv .bc .go{position:absolute;left:0;right:0;bottom:0;padding:.5rem 1.05rem;background:var(--scrim-dark);
  font-family:var(--mono);font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;
  transform:translateY(101%);transition:transform .26s cubic-bezier(.2,.8,.3,1)}.fv .bc:hover .go{transform:none}/* marigold is the one light card: a dark scrim collapses toward its dark
   label (4.35:1). A white scrim separates them instead (10.06:1). */
.fv .b-mari .go{background:var(--scrim-light)}.fv .w2{grid-column:span 2}.fv .h2{grid-row:span 2}/* Each surface class owns BOTH its background and its foreground. Splitting
   them (bg here, colour on .bc/.val) is what put white on marigold.
   `.fv` prefix is load-bearing: it makes these (0,2,0) so they outrank
   `.fv a{color:inherit}` at (0,1,1) on cards that are links. */
.fv .b-blue{background:var(--cobalt);color:var(--on-hue)}.fv .b-red{background:var(--madder);color:var(--on-hue)}.fv .b-green{background:var(--viridian);color:var(--on-hue)}.fv .b-plum{background:var(--plum);color:var(--on-hue)}.fv .b-mari{background:var(--marigold);color:var(--on-mari)}.fv .b-ink{background:var(--invert);color:var(--on-invert)}.fv .posts{display:grid;gap:.42rem;margin-top:.55rem}.fv .posts a{display:flex;gap:.5rem;align-items:flex-start;font-size:.78rem;line-height:1.34;
  color:inherit;text-decoration:none;transition:opacity .18s}.fv .posts a:hover{text-decoration:underline;text-underline-offset:3px}/* dots on the light card need a dark fill; the inline colours are tuned for ink */
.fv .b-mari .posts i{background:var(--on-mari)}/* .31rem lands the dot on the first line's optical centre at the base font
   size; the bento override re-tunes it for its own scale. */
.fv .posts i{width:.42rem;height:.42rem;border-radius:99px;flex:0 0 auto;margin-top:.31rem}/* six distinct hues, no repeats, each >=3:1 on the panel it sits on. The panel
   flips per mode, so the tokens do too. */
.fv .posts i.d1{background:var(--dot-1)}.fv .posts i.d2{background:var(--dot-2)}.fv .posts i.d3{background:var(--dot-3)}.fv .posts i.d4{background:var(--dot-4)}.fv .posts i.d5{background:var(--dot-5)}.fv .posts i.d6{background:var(--dot-6)}/* looking for */
.fv .want{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem}.fv .want-col{border-radius:var(--r);padding:1.1rem;border:2px solid var(--ink)}.fv .want-col h3{margin:0 0 .7rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}.fv .want-col.no{background:var(--invert);color:var(--on-invert);border-color:var(--invert)}.fv .want-col.no h3{color:var(--accent-on-invert)}.fv .chips{display:flex;flex-wrap:wrap;gap:.35rem}.fv .chip{font-size:.82rem;font-weight:600;padding:.28rem .6rem;border-radius:99px;background:var(--invert);color:var(--on-invert)}.fv .want-col.also .chip{background:none;border:1.5px solid var(--ink);color:var(--ink)}.fv .want-col.no .chip{background:none;border:1.5px solid var(--madder);color:var(--on-invert);text-decoration:line-through;text-decoration-color:var(--madder)}/* values */
/* 6 items. auto-fit chased the widest fit and landed on 4 or 5 columns at
   common widths, orphaning the last card. Lock to divisors of 6 (3/2/1) so
   every row is full at every size. */
.fv .vals{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(max-width:900px){.fv .vals{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fv .vals{grid-template-columns:1fr}}.fv .val{border-radius:var(--r);padding:1.05rem}.fv .val h3{margin:0 0 .35rem;font-size:1rem;font-weight:800;letter-spacing:-.02em}.fv .val p{margin:0;font-size:.8rem;line-height:1.45;opacity:.92}/* record */
/* Padding is constant and pulled back out with a negative inline margin, so
   the hover tint gets its gutter without animating a layout property. The
   previous `transition:padding` reflowed the whole ledger on every hover. */
/* 4 columns, not 3: the ::after toggle is a grid item too, and with only
   three tracks it wrapped onto its own row. Date column is wide enough for
   a full "Sep 2024 – Nov 2025" on one line. */
/* company first, dates last. The company column is fixed because the names
   vary in length and a ragged left edge kills the ledger read; "CACI
   INTERNATIONAL" is the longest at 18 characters. */
.fv .rrow{display:grid;grid-template-columns:11.2rem 1fr auto 1.1rem;gap:1rem;align-items:baseline;
  padding:.85rem .5rem;margin-inline:-.5rem;
  border-bottom:2px solid var(--ink);font-size:clamp(.95rem,2vw,1.28rem);font-weight:700;letter-spacing:-.02em;
  text-decoration:none;color:inherit;transition:background .2s}.fv .rrow:hover{background:var(--bg2)}.fv .rrow time{font-family:var(--mono);font-size:.68rem;font-weight:400;color:var(--ink2);text-align:right}/* the GridStrong/HVAC overlap is real and explainable; say so on the row
   rather than leaving a reader to wonder. */
.fv .rrow time small{display:block;font-size:.85em;margin-top:.15rem;line-height:1.3}/* the company cell now stacks: name, sector pill, acquisition note */
/* Pill sits to the RIGHT of the company name wherever it fits, and drops below
   only when it cannot. Flex-wrap does that with no breakpoints: on mobile all
   nine go inline (241px worst case in a 321px cell) and on desktop seven of
   nine do. The alternative, widening the fixed company column to force all nine
   inline, costs the title column 62px and pushes 1-2 extra titles into wrapping
   between 700 and 1200px, so this way is free. */
.fv .rrow i{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .5rem;
  font-style:normal;font-weight:700;font-size:.78rem;letter-spacing:.02em;color:var(--ink)}/* the acquisition note always starts its own line under the name + pill */
.fv .exp-acq{flex-basis:100%}/* same pill vocabulary as .rrow-tags, so the row and its expanded body match */
/* Four sector types, four hues. The hue carries the border and a 14% tint;
   the label stays --ink. Colouring the label itself would fail: as ~8.5px text
   the hues land between 3.63 and 4.02 on the dark page, under 4.5. Border-only
   needs 3:1, which is exactly what the --c*-line values guarantee. */
.fv .exp-tag{font-family:var(--mono);font-size:.53rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-style:normal;padding:.18rem .45rem;border-radius:99px;
  border:1px solid var(--pill,var(--rule));color:var(--ink);
  background:color-mix(in srgb, var(--pill, transparent) 14%, transparent)}.fv .exp-tag--startup{--pill:var(--c3-line)}.fv .exp-tag--acquired{--pill:var(--c5-line)}.fv .exp-tag--enterprise{--pill:var(--c4-line)}.fv .exp-tag--public{--pill:var(--c2-line)}/* dotted at rest so it reads as a link inside a row that is itself clickable */
.fv .exp-co{color:inherit;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--rule);text-underline-offset:3px;transition:text-decoration-color .18s}.fv .exp-co:hover, .fv .exp-co:focus-visible{text-decoration-style:solid;text-decoration-color:var(--ink)}.fv .exp-acq{font-family:var(--mono);font-size:.55rem;font-style:normal;font-weight:400;
  letter-spacing:.02em;line-height:1.35;color:var(--ink2)}.fv .exp-loc{display:block;font-size:.85em;margin-top:.2rem;color:var(--ink2)}/* Resume / Journey. Journey reorders the ledger oldest-first and adds the
   preamble; it is the same nine rows, read the other direction. Invert fill
   rather than a hue, so it does not compete with the strength chips. */
.fv .exp-modes{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:0 0 1rem}.fv .exp-switch{display:inline-flex;border:2px solid var(--ink);border-radius:99px;padding:2px;gap:2px}.fv .exp-mode{font:inherit;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:.42rem .95rem;border:0;border-radius:99px;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .18s,color .18s}.fv .exp-mode[aria-pressed="true"]{background:var(--invert);color:var(--on-invert)}.fv .exp-mode:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.fv .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.fv .exp-hint{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--ink2)}/* expandable ledger. <details> so it works with zero JS and stays keyboard
   and screen-reader operable for free. */
.fv summary.rrow{cursor:pointer;list-style:none}.fv summary.rrow::-webkit-details-marker{display:none}.fv summary.rrow::after{content:"+";font-family:var(--mono);font-weight:400;font-size:1rem;
  color:var(--ink2);justify-self:end;transition:transform .2s}.fv .rrow-d[open] summary.rrow::after{transform:rotate(45deg)}.fv .rrow-d[open] summary.rrow{border-bottom-color:var(--marigold)}.fv .rrow-d{border-bottom:0}.fv .rrow-body{padding:.9rem .5rem 1.4rem;margin-inline:-.5rem;
  border-bottom:2px solid var(--ink);display:grid;gap:.85rem}.fv .rrow-desc{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink2);max-width:68ch}.fv .rrow-hi{margin:0;padding-left:1.1rem;display:grid;gap:.5rem}.fv .rrow-hi li{font-size:.86rem;line-height:1.55;color:var(--ink2);max-width:72ch}.fv .rrow-hi li::marker{color:var(--marigold)}.fv .rrow-tags{display:flex;flex-wrap:wrap;gap:.32rem}.fv .rrow-tags span{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:99px;border:1px solid var(--rule);color:var(--ink2)}.fv .rrow-cs{justify-self:start;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--accent-text);text-decoration:none;
  border-bottom:2px solid var(--marigold);padding-bottom:.12rem}.fv .rrow-cs:hover{color:var(--ink)}
/* Mobile ledger. The old rule set two columns but placed nothing, so the job
   title auto-flowed into the 1.1rem chevron column: an 18px-wide box that
   rendered the title one character per line, 160px tall. Every child is now
   placed explicitly.

       GRIDSTRONG AI                    +
       Director of Product Management
       Sep 2024 - Nov 2025
*/
@media(max-width:640px){.fv summary.rrow{
    grid-template-columns:1fr auto;
    column-gap:.75rem; row-gap:.28rem;
    align-items:start;
  }.fv summary.rrow i{grid-area:1/1/2/2}.fv summary.rrow::after{grid-area:1/2/2/3;align-self:start;line-height:1}.fv summary.rrow span{grid-area:2/1/3/3;line-height:1.25}.fv summary.rrow time{grid-area:3/1/4/3;text-align:left;margin-top:.12rem}
}/* footer easter egg, carried over from the live site */
.fv .egg-line{margin:1.2rem 0 0}.fv .egg{font-size:.84rem;color:var(--ink2);text-decoration:none;
  border-bottom:1px dashed var(--rule);transition:color .18s,border-color .18s}.fv .egg:hover{color:var(--accent-text);border-bottom-color:var(--accent-text)}/* case studies */
/* same 6-item orphan problem as .vals */
.fv .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(max-width:900px){.fv .cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fv .cases{grid-template-columns:1fr}}/* Same six hues as the strength chips, in the same order, so the two
   six-item sections rhyme instead of each inventing a palette. */
.fv .case:nth-child(1){--c-line:var(--c1-line);--c-fill:var(--c1-fill);--c-on:var(--c1-on)}.fv .case:nth-child(2){--c-line:var(--c2-line);--c-fill:var(--c2-fill);--c-on:var(--c2-on)}.fv .case:nth-child(3){--c-line:var(--c3-line);--c-fill:var(--c3-fill);--c-on:var(--c3-on)}.fv .case:nth-child(4){--c-line:var(--c4-line);--c-fill:var(--c4-fill);--c-on:var(--c4-on)}.fv .case:nth-child(5){--c-line:var(--c5-line);--c-fill:var(--c5-fill);--c-on:var(--c5-on)}.fv .case:nth-child(6){--c-line:var(--c6-line);--c-fill:var(--c6-fill);--c-on:var(--c6-on)}.fv .case{border:2px solid var(--c-line,var(--ink));border-radius:var(--r);padding:1rem;text-decoration:none;color:inherit;
  display:grid;gap:.3rem;align-content:start;transition:.22s;background:var(--bg)}.fv .case:hover{background:var(--c-fill);border-color:var(--c-line);color:var(--c-on)}/* the metric rides the fill on hover, so it takes the fill's text colour;
   marigold was 1.97 on a light fill and invisible on the marigold card. */
.fv .case:hover .case-m{color:var(--c-on)}.fv .case b{font-size:1.02rem;font-weight:800;letter-spacing:-.02em}/* No blanket opacity here: `.case span` is (0,1,1) and silently overrode
   `.case-m`'s own opacity at (0,1,0), dragging the metric to 3.85:1. */
.fv .case span{font-size:.78rem;line-height:1.42}.fv .case-m{font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--accent-text);transition:.22s}/* about */
.fv .about{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.2rem,4vw,3rem);align-items:start}.fv .about-lead{margin:0;font-size:clamp(1.25rem,3.2vw,2.1rem);font-weight:800;letter-spacing:-.032em;
  line-height:1.1;text-wrap:balance}/* square source, so a circle avoids an arbitrary crop and keeps the column
   rhythm. Wraps above the lead on narrow screens rather than shrinking it. */
/* Kevin: the lead should start alongside the photo, not sit under it. The
   column is ~518px, so the photo takes 104 and the lead gets the rest; it only
   drops below on a genuinely narrow screen. */
.fv .about-intro{display:flex;align-items:center;gap:1.05rem;flex-wrap:wrap}.fv .about-intro .about-lead{flex:1 1 14rem;min-width:0;margin:0}.fv .about-photo{width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:2px solid var(--ink);flex:0 0 auto}
@media(max-width:480px){.fv .about-intro{gap:.8rem}}.fv .offsite-note{margin:0;max-width:62ch;font-size:1rem;line-height:1.65;color:var(--ink2)}
@media(max-width:560px){.fv .about-photo{width:84px;height:84px}}.fv .about-body{display:grid;gap:.9rem}.fv .about-body p{margin:0;font-size:.95rem;line-height:1.65;color:var(--ink2);max-width:56ch}.fv .about-body p:first-child{color:var(--ink);font-size:1.02rem}
@media(max-width:760px){.fv .about{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){}/* skills */
.fv .skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem}.fv .sk h3{margin:0 0 .55rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink2);padding-bottom:.4rem;border-bottom:1px solid var(--rule)}.fv .sk ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.3rem}.fv .sk li{font-size:.8rem;padding:.24rem .55rem;border:1px solid var(--rule);border-radius:99px;
  transition:transform .16s,background .16s,border-color .16s,color .16s;cursor:default}.fv .sk li:hover{color:var(--on-hue);transform:translateY(-2px)}/* each group fills with its own colour, so the three columns read as three
   different kinds of skill rather than one long undifferentiated list */
.fv .sk:nth-child(1) li:hover{background:var(--cobalt);border-color:var(--cobalt)}.fv .sk:nth-child(2) li:hover{background:var(--madder);border-color:var(--madder)}.fv .sk:nth-child(3) li:hover{background:var(--viridian);border-color:var(--viridian)}/* education */
.fv .edu{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}.fv .edu-row{padding:.6rem 0;border-bottom:1px solid var(--rule);font-size:.86rem}.fv .edu-row b{display:block;font-weight:700}.fv .edu-row span{color:var(--ink2);font-size:.79rem}.fv .aside{font-style:normal;color:var(--accent-text);font-weight:600}/* recommendations */
/* Fixed 3 columns, not auto-fit. auto-fit plus a spanning card is what left a
   lone card stranded on its own row at 1280 and everywhere below 900. With a
   full-width hero quote and exactly 3 cards under it, every row is full at both
   breakpoints. No 2-column step: 3 cards in 2 columns always orphans one. */
.fv .recs{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(max-width:720px){.fv .recs{grid-template-columns:1fr}}/* Explicit rows: kicker, quote, name. The quote row takes every spare pixel,
   so the kicker and the first line of the quote sit at the same height in all
   three cards and the name is pinned to the bottom. Auto rows let
   align-content:stretch share the leftover height between the rows instead,
   which is what pushed a short quote down the card and scattered the names. */
.fv .rec{border-radius:var(--r);padding:1.1rem;background:var(--bg2);border:1px solid var(--rule);
  display:grid;grid-template-rows:auto 1fr auto;gap:.7rem}.fv .rec p{margin:0;font-size:.88rem;line-height:1.55}/* madder, not marigold: on the warm card ground marigold sits at 1.58:1 and
   the quote mark all but disappears. */
/* Four cards, four of the six hues: the four most separated that clear 3:1 on
   --bg2 in both modes. Marigold is excluded again, at 1.79 on the light card. */
.fv .rec p::before{content:"“";font-size:2em;line-height:0;vertical-align:-.35em;
  color:var(--q,var(--accent-text));margin-right:.08em}.fv .rec:nth-child(1){--q:var(--c4-line)}.fv .rec:nth-child(2){--q:var(--c2-line)}.fv .rec:nth-child(3){--q:var(--c3-line)}.fv .rec:nth-child(4){--q:var(--c6-line)}/* The hero quote. Short lines deserve big type; the old layout gave double
   width to the longest, most abstract quote and left the best one small. */
.fv .rec-hero{grid-column:1/-1}.fv .rec-hero p{font-size:clamp(1.3rem,2.9vw,2rem);line-height:1.24;font-weight:700;
  letter-spacing:-.022em;max-width:24ch}/* Names what each quote is evidence of, so four similar endorsements read as
   four angles. Same mono kicker as the strength chips. --ink2, not the card's
   hue: at this size the hues land between 4.26 and 4.35 on --bg2, under 4.5. */
.fv .rec-k{display:block;font-family:var(--mono);font-size:.55rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-style:normal}.fv .rec-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.95rem;
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-text);text-decoration:none}.fv .rec-more:hover{text-decoration:underline}.fv .rec footer{font-size:.76rem;color:var(--ink2);line-height:1.35}/* Two lines reserved for the role line. Matt's spans two companies and wraps
   below ~1100px; without the reservation his taller footer lifted his name
   18px above the other two, since the footer is bottom-pinned. */
.fv .rec:not(.rec-hero) .rec-role{display:block;min-height:2.7em}.fv .rec footer b{display:block;color:var(--ink);font-size:.86rem}/* NOT `.big` — that's the hero headline class, and its letter-spacing:-.045em
   computes against an 86px font then inherits into the quote as an absolute
   -3.9px, smearing the letters together. */

/* connect */
.fv .connect{margin-top:clamp(2.4rem,5vw,4rem);padding-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(2.4rem,5vw,4rem);
  background:var(--invert);color:var(--on-invert)}.fv .connect h2{margin:0;font-size:clamp(1.9rem,6vw,4.2rem);font-weight:800;letter-spacing:-.04em;line-height:.94;max-width:16ch}.fv .connect h2 em{font-style:normal;color:var(--gold-on-invert)}.fv .cbtns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.6rem}.fv .cb{padding:.7rem 1.15rem;border-radius:var(--r);font-weight:700;font-size:.88rem;text-decoration:none;transition:transform .18s}.fv .cb:hover{transform:translateY(-3px)}/* "messy." keeps the marigold; the buttons take the rest of the palette.
   Base cobalt (2.22) and plum (2.88) are too dark to read as SHAPES against
   the ink band, so cobalt gets a lifted variant. Each is >=3:1 vs the band
   and >=4.5:1 for its white label. */
.fv .cb.c-mail{background:var(--madder);color:var(--on-hue)}/* 3.60 vs ink, 5.27 label */
.fv .cb.c-oh{background:var(--viridian);color:var(--on-hue)}/* 3.67 vs ink, 5.16 label */
.fv .cb.c-li{background:var(--cta-blue);color:var(--on-hue)}/* 3.72 vs ink, 5.10 label */
.fv .cb.c-gh{background:var(--cta-plum);color:var(--on-hue)}/* GitHub had no rule */
.fv .cb:hover{transform:translateY(-2px)}/* ---- strengths concept: specialty tabs -> one wide detail stage ---- */
/* the claim the six chips are evidence FOR. Without it the section is a menu;
   with it, the chips are subordinate. */
.fv .spine{margin:0 0 1.4rem;font-size:clamp(1rem,1.8vw,1.28rem);line-height:1.5;
  max-width:62ch;color:var(--ink2)}.fv .spine strong{color:var(--ink);font-weight:700}
/* 62ch broke this one-sentence lead onto three lines, the last of them a stub.
   It is a single lead paragraph rather than running body copy, so a wider
   measure is fine here; narrow screens keep 62ch, where the container binds
   before the max-width does anyway. */
@media(min-width:901px){.fv .spine{max-width:78ch}}/* also 6 items, also orphaned 4+2 on auto-fit. Divisors of 6 only. */
.fv .spec-row{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
@media(max-width:1150px){.fv .spec-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.fv .spec-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.fv .spec-row{grid-template-columns:1fr}}.fv .spec{text-align:left;font:inherit;cursor:pointer;background:var(--bg);color:var(--ink);
  border:2px solid var(--c-line,var(--ink));border-radius:var(--r);padding:.85rem .9rem;
  display:grid;gap:.2rem;position:relative;
  transition:background .18s,color .18s,transform .18s,border-color .18s}.fv .spec:nth-child(1){--c-line:var(--c1-line);--c-fill:var(--c1-fill);--c-on:var(--c1-on)}.fv .spec:nth-child(2){--c-line:var(--c2-line);--c-fill:var(--c2-fill);--c-on:var(--c2-on)}.fv .spec:nth-child(3){--c-line:var(--c3-line);--c-fill:var(--c3-fill);--c-on:var(--c3-on)}.fv .spec:nth-child(4){--c-line:var(--c4-line);--c-fill:var(--c4-fill);--c-on:var(--c4-on)}.fv .spec:nth-child(5){--c-line:var(--c5-line);--c-fill:var(--c5-fill);--c-on:var(--c5-on)}.fv .spec:nth-child(6){--c-line:var(--c6-line);--c-fill:var(--c6-fill);--c-on:var(--c6-on)}.fv .spec b{font-size:.95rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}.fv .spec span{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}.fv .spec:hover{transform:translateY(-2px)}/* Border stays --c-line even when filled. Swapping it to the fill left the
   selected chip edgeless: marigold is 1.97 on the light page, and in dark mode
   every fill is dark-on-dark. --c-line is the one value guaranteed 3:1 in both
   modes, so it's what keeps the selected block readable as a block. */
.fv .spec[aria-selected="true"]{background:var(--c-fill);border-color:var(--c-line);color:var(--c-on)}/* the kicker rides the fill, so it takes the fill's own text colour */
.fv .spec[aria-selected="true"] span{color:var(--c-on)}/* the notch in the sketch: ties the chosen tab to the stage below it */
.fv .spec[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-.5rem;
  width:.85rem;height:.85rem;background:var(--c-fill);transform:translateX(-50%) rotate(45deg)}/* --ink, not --marigold: a marigold ring is 1.97 on the light page, i.e. a
   focus indicator you cannot see. --ink clears 15:1 in both modes. */
.fv .spec:focus-visible{outline:3px solid var(--ink);outline-offset:2px}/* --stage-line is set from pick() to the selected chip's --c-line, so the
   notch does not point a coloured chip into an ink-bordered panel. */
.fv .spec-stage{margin-top:.95rem;border:2px solid var(--stage-line,var(--ink));border-radius:var(--r);
  transition:border-color .18s;
  background:var(--bg2);padding:clamp(1rem,2.5vw,1.5rem)}/* balance stops a one-word orphan ("...on the weekend.") on the last line;
   the wider max-width lets the longest lead sit on a single line on desktop. */
.fv .spec-lead{margin:0 0 1rem;font-size:clamp(1.05rem,2.2vw,1.5rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.25;max-width:62ch;text-wrap:balance}.fv .ev-list{display:grid;gap:0}/* rows are plain containers, NOT links: nothing to highlight, nothing that
   looks clickable when it isn't. The links live in the text. */
.fv .ev{display:grid;grid-template-columns:10rem 1fr;gap:1rem;align-items:baseline;
  padding:.7rem 0;border-top:1px solid var(--rule)}.fv .ev i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--accent-text)}.fv .ev p{margin:0;font-size:.88rem;line-height:1.65;color:var(--ink2);max-width:64ch}/* inline links: underlined and coloured so they read as links without hover */
.fv .lk{color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--marigold);text-decoration-thickness:2px;
  text-underline-offset:2px;white-space:nowrap;transition:color .16s,text-decoration-color .16s}.fv .lk:hover{color:var(--accent-text);text-decoration-color:var(--accent-text)}.fv .lk:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:3px}.fv .lk-case{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
@media(max-width:620px){.fv .ev{grid-template-columns:1fr;gap:.25rem}.fv .spec[aria-selected="true"]::after{display:none}
}
@media(prefers-reduced-motion:reduce){.fv .spec{transition:none}}.fv .rec-lead{margin:0 0 1.1rem;font-size:clamp(1rem,1.8vw,1.22rem);line-height:1.5;
  max-width:56ch;color:var(--ink2)}

/* ===== dark mode =====
   Neutrals invert. The accent HUES do not: they are card backgrounds carrying
   white text, so they are self-contained and read the same on either page.
   What does change is accent-as-text, because the ground moved: cobalt (2.24)
   and plum (2.91) fall under the 3:1 large-text floor on a dark page, and the
   small madder text needs lifting. All values below were computed, not picked. */
@media (prefers-color-scheme: dark){.fv{
    --bg:#0F0F12; --bg2:#17171B; --ink:#F2F2F4; --ink2:#A2A2AC; --rule:#2C2C33;
    /* the contrast panel flips with the page so it still reads as a panel */
    --invert:#EDEDF0; --on-invert:#111113;
    /* accent-as-text trades ends: lift it on the page, deepen it on the panel */
    --accent-text:#D26978;        /* 5.50 on --bg     */
    --accent-on-invert:#AB3142;   /* 5.53 on --invert */
    /* Deep enough for the SMALL chip kicker (4.5), not just the 46px "messy."
       (3.0). One token has to satisfy the stricter of its two uses. */
    --gold-on-invert:#815B0C;     /* 5.23 on --invert; marigold is 1.97 there */
    /* cobalt and plum fall under the 3:1 large-text floor on a dark page */
    --swap-1:#4B6FA5; --swap-2:#8A6EB9;
    /* dots: the panel is light now, so the BASE hues pass and gold must deepen */
    /* outlines flip: marigold is fine on a dark page, but cobalt (2.24),
       plum (2.91) and fuchsia (2.71) all fall under 3:1 and must lift. */
    --c1-line:var(--marigold);
    --c4-line:#4B6FA5; --c5-line:#8A6EB9; --c6-line:#B14E97;
    --dot-1:#1F4B8F; --dot-2:#9E227D; --dot-3:#A77510;
    --dot-4:#6D4AA8; --dot-5:#2C7A63; --dot-6:#C3384B;
    --nav-bg:rgba(15,15,18,.92);
    --hairline-invert:rgba(0,0,0,.17);
  }
}/* footer */
/* Without this the only routes to /prototypes/ and /recipes/ were the sitemap. */
.fv .colo-nav{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:0 0 1.1rem}.fv .colo-nav a{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent}.fv .colo-nav a:hover{color:var(--ink);border-bottom-color:var(--marigold)}.fv .colophon{padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2.4rem,5vw,3.6rem);
  border-top:2px solid var(--ink)}.fv .colo-tip{margin:0;font-size:.86rem;color:var(--ink2)}.fv .colo-tip a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--marigold);text-decoration-thickness:2px}.fv .colo-tip a:hover{color:var(--madder)}.fv .colo-tip code{font-family:var(--mono);font-size:.82em;background:var(--invert);color:var(--on-invert);
  padding:.14em .42em;border-radius:3px}

@media(max-width:820px){/* the .bento/.w2/.h2 lines that used to live here are gone: they sat AFTER
     the 900px and 560px rules and silently re-declared 2 columns at every
     narrow width, so the single-column layout never applied. */
  .fv .edu{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fv *{animation:none!important;transition:none!important}.fv .rv{opacity:1!important;transform:none!important}.fv .swap b{position:static;opacity:1}.fv .swap b:not(:first-child){display:none}
}


/* The hero metric numerals are 24px/600, so the shared .arw at .78em read as a
   hairline beside them. Size it to the type it sits in on these two surfaces
   only; the case-study index arrow stays as approved. */
/* font-size:inherit is load-bearing: a rule downsizes spans inside
   .metric-value to 9.28px, so em on the arrow resolved against that instead
   of the 24px numerals and it rendered at 9px. */
body.p-case .metric-value .arw{font-size:inherit;width:.9em;height:.9em;
  vertical-align:-.08em;margin-inline:.16em}


/* "messy." holds the light-mode marigold in dark mode too. The connect panel
   inverts (dark band on a light page, light band on a dark page), so the shared
   --gold-on-invert darkens to #815B0C in dark to stay legible on the light
   band. Kevin's call: at 67px the marigold reads fine there and the brand
   colour matters more. --marigold is theme-invariant, so this pins it. Scoped
   to this one element; --gold-on-invert is untouched for any other use. */
.fv .connect h2 em{color:var(--marigold)}