/* ==========================================================================
   palette.css — Blueberry + Mist Gray. A colour-only layer, loaded last.
   Re-points the existing tokens (journal.css / cinema.css); no layout, type or spacing here.
   Left alone on purpose: the cable and plugs (--cable, --cable-2, --rail, --teal), the character, the phone body.
   ========================================================================== */
:root{
  --violet:#293F91; --violet-2:#1F3175;           /* Blueberry, and its hover/pressed step */
  --ivory:#F0F2F5;                                 /* Mist Gray: page background */
  --paper:#FFFFFF;                                 /* cards, panels, popups */
  --oat:#E7EAF0; --wash:#EAEDF2; --sage-tint:#E4E8EF; --blush:#E9EDF8;   /* quiet section and tint grounds */
  --ink:#171A2B; --ink-2:#3C3F55; --muted:#62657D; /* Deep Navy headings, Muted Gray secondary text */
  --ink-rgb:23,26,43; --ivory-rgb:240,242,245;
  --navy:#293F91; --navy-2:#1F3175;                /* primary buttons, selected stage, selection */
  --terra:#293F91; --terra-text:#293F91;           /* links, highlights, active nav, focus ring */
  --rule:#E0E3EB; --rule-soft:#E8EAF0;             /* borders and dividers */
  --panel-a:#EAEEF9; --panel-b:#D5DDF2;            /* the hero stage behind the character */
}
:root[data-theme="dark"]{
  --terra:#8FA3E8; --terra-text:#A9B9F2;           /* the accent, lightened to read on the dark ground */
}

/* teal was the secondary accent in the UI; text and highlights now use the one accent (the lit circuit keeps its teal) */
html body .kicker,html body .wk-meta .cat,html body .sh-k,html body .circuit-note a{color:var(--terra-text)}
html body .kicker .no{color:var(--ink)}
html body .is-powered .node{border-color:color-mix(in srgb,var(--terra) 55%,var(--rule))}
html body .is-powered .dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--terra) 26%,transparent)}

/* shadows: navy-tinted, subtle */
html body .popbox{box-shadow:0 22px 44px -18px rgba(23,26,43,.22)}
:root[data-theme="dark"] body .popbox{box-shadow:0 22px 44px -18px rgba(0,0,0,.6)}

/* the journey intro and note */
html body .j-intro{color:var(--muted)}
html body .j-note{color:var(--muted)}
html body .j-note-k{color:var(--terra-text)}
:root[data-theme="dark"] body .j-intro,:root[data-theme="dark"] body .j-note{color:var(--ink-2)}

/* EIR: the membership helix */
html body .helixblock{--hx-ink:var(--ink);--hx-mut:var(--muted);--hx-teal:var(--terra-text);--hx-rust:var(--terra);--hx-rule:var(--rule)}

/* SafeSpace prototypes showcase (the phone body stays dark: it is the device) */
html body .ssx{background:linear-gradient(180deg,#EEF1FA,#DFE5F5);color:var(--ink)}
html body .ssx-eyebrow{color:var(--terra-text)}
html body .ssx-title{color:var(--ink)}
html body .ssx-sub,html body .ssx-cap{color:var(--ink-2)}
html body .ssx-link a{color:var(--terra-text)}
html body .ssx-link a:hover{color:var(--ink)}
html body .ssx-link small,html body .ssx-tab{color:var(--ink-2)}
html body .ssx-tab:hover,html body .ssx-tab[aria-selected=true]{color:var(--ink)}
html body .ssx-tab:focus-visible{outline-color:var(--terra-text)}
html body .ssx-tab::before{background:rgba(23,26,43,.14)}
html body .ssx-tab::after{background:var(--terra)}
html body .ssx-phone{box-shadow:0 40px 60px -20px rgba(23,26,43,.3)}
html body .ssx-screen .miss{background:repeating-linear-gradient(135deg,#E0E5F2 0 10px,#EEF1F8 10px 20px)}

/* the heartbeat line on the journey rail keeps its original red (#B56E57, set on the svg) */

/* ==========================================================================
   Visual polish pass (colour, contrast and legibility only)
   ========================================================================== */

/* small mono labels: never below 11-12px, and strong enough on every ground */
html body .fot-no,html body .fot-row{font-size:11px}
html body .label,html body .src,html body .j-note,html body .roles{font-size:12px;line-height:1.5}
html body .kicker{font-size:12px}

/* SafeSpace phone: larger so the interface inside stays legible (the screens are 556px wide, so they stay sharp) */
html body .ssx-phone{width:288px;height:600px}
html body .ssx{min-height:820px}
@media (max-width:900px){html body .ssx{min-height:0}}

/* ---------- dark mode ---------- */
/* hero stage: the same navy family as the page, a step lighter and bluer so it still reads as a stage */
:root[data-theme="dark"]{--panel-a:#1C2B4F; --panel-b:#111D38; --muted:#AAB6BC}
/* SafeSpace: a dark navy panel instead of the light one, with light type */
:root[data-theme="dark"] body .ssx{background:linear-gradient(180deg,#15213B,#0E1A30);color:var(--ink)}
:root[data-theme="dark"] body .ssx-title{color:var(--ink)}
:root[data-theme="dark"] body .ssx-sub,:root[data-theme="dark"] body .ssx-cap{color:var(--ink-2)}
:root[data-theme="dark"] body .ssx-link small,:root[data-theme="dark"] body .ssx-tab{color:var(--muted)}
:root[data-theme="dark"] body .ssx-tab:hover,:root[data-theme="dark"] body .ssx-tab[aria-selected=true]{color:var(--ink)}
:root[data-theme="dark"] body .ssx-link a:hover{color:var(--ink)}
:root[data-theme="dark"] body .ssx-tab::before{background:rgba(236,229,217,.22)}
:root[data-theme="dark"] body .ssx-phone{box-shadow:0 0 0 1px rgba(236,229,217,.2),0 40px 60px -20px rgba(0,0,0,.65)}   /* a rim, so the dark phone body does not vanish into the ground */
:root[data-theme="dark"] body .ssx-screen .miss{background:repeating-linear-gradient(135deg,#1B2A44 0 10px,#223352 10px 20px)}
@media (max-width:520px){html body .ssx-phone{width:262px;height:546px}}

/* ==========================================================================
   Small type, +1 to +2px across the site (labels, eyebrows, notes, nav, captions)
   ========================================================================== */
html body .fot-no,html body .fot-row,html body .fot-eyebrow,html body .gl .lab,html body .j-note-k,html body .ssx-link small,
html body .act small,html body .wk-act small,html body .sh-k,html body .go small,html body .hx-stat span{font-size:13px}
html body .label,html body .src,html body .kicker,html body .roles,html body .wk-meta,html body .meta,html body .foot-in,
html body .say,html body .ssx-tab,html body .ssx-eyebrow,html body .circuit-note,html body .count,html body .fig .label,
html body .sh-t,html body .mast nav a{font-size:13.5px}
html body .j-note{font-size:14px}
html body .dot{font-size:14px}
html body small,html body .row .act small,html body .row .go small{font-size:13px}
html body .meta .cat,html body .meta .no,html body .count,html body .count span,html body .entry .no,html body .door-copy .roles,html body .row .no,html body .row .cat{font-size:13.5px}
html body .entry .go small,html body .go small{font-size:13px}
html body .sym .n,html body .p-work li::before,html body .qs li::before{font-size:13.5px}
@media (max-width:380px){html body .mast nav a{font-size:12.5px;letter-spacing:.1em}}
html body .j-note{max-width:780px}   /* the bumped note size still fits on one line on desktop */

/* the ghost "Gap" fills the blue stage and is cut off by the stage's own edges (same box as the stage's background) */
html body .gapwrap{inset:calc(-1 * clamp(18px,3.4svh,48px)) calc(-1 * var(--edge)) -7px clamp(-28px,-2vw,0px);container-type:inline-size}
html body .gapword{font-size:min(clamp(200px,22vw,380px),64cqw);bottom:.16em}
@media (max-width:900px){html body .gapwrap{inset:0 calc(-1 * var(--edge)) -7px calc(-1 * var(--edge))}html body .gapword{right:auto;left:50%;transform:translateX(-50%);font-size:min(clamp(140px,42vw,260px),64cqw)}}

/* ==========================================================================
   Viewport-height responsive scale: the journey scene and the SafeSpace phone size themselves to the screen height too,
   so they fit a laptop at 100% zoom (no more zooming out to see the whole scene)
   ========================================================================== */
/* journey: the character is sized from the width and the height of the viewport; the space above the timeline follows her height */
html body .journey{--ch:clamp(230px,min(23vw,46svh),400px)}
html body .journey .walker{--ch:unset}
html body .journey .tl-wrap{margin-top:calc(var(--ch) * .56)}
@media (max-width:900px){
  html body .journey{--ch:clamp(230px,min(68vw,46svh),330px)}
  html body .journey .tl-wrap{margin-top:calc(var(--ch) * .72)}
}
/* SafeSpace: the phone keeps its proportions and always fits the viewport, bottom edge included */
html body .ssx{min-height:0;padding-block:clamp(40px,8svh,80px)}
html body .ssx-phone{height:clamp(430px,calc(100svh - 200px),600px);width:auto;aspect-ratio:288/600}
@media (max-width:520px){html body .ssx-phone{height:clamp(430px,calc(100svh - 200px),546px);width:auto}}

/* "04 A few other things": less empty space above and below the section */
html body .fot{padding-block:clamp(40px,4.4vw,56px);margin-block:calc(-1 * clamp(40px,6vw,96px))}
@media (max-width:900px){html body .fot{padding-block:48px}}

/* the four cards size themselves to the viewport height, so the whole 2x2 grid fits on screen at 100% zoom */
html body .fot-grid{gap:30px;max-width:clamp(400px,calc((100svh - 174px) * 1.05),710px);justify-self:center}
html body .fot-card{container-type:inline-size}
html body .fot-name{font-size:clamp(21px,12.5cqw,34px)}
html body .fot-card{padding:clamp(16px,3.4svh,26px)}
html body .fot-name{max-width:none}
@media (max-width:900px){html body .fot-grid{max-width:640px}}

/* Index header: the line on the right sits under the label, on the same left edge */
html body section.work .work-head{flex-direction:column;align-items:flex-start;gap:14px}

/* journey: the heartbeat line is blue; the selected stage keeps its white button and is lifted by a soft blue glow behind it */
html body #flowEkg #railPulse{stroke:var(--terra)}
html body .node[aria-pressed=true] .dot{background:var(--paper);color:var(--ink);border-color:var(--terra);box-shadow:0 0 0 7px color-mix(in srgb,var(--terra) 16%,transparent),0 8px 22px color-mix(in srgb,var(--terra) 38%,transparent)}

/* the track under the heartbeat line: light gray */
:root{--rail:#D7DBE3}