/* ============================================================
   Sora Kalden — v5 · "THE FIELD NOTEBOOK"
   A real paper-and-ink zine, not a dark portfolio wearing one.
   Warm washi paper, warm sumi-black ink, a single cinnabar seal.
   Print furniture: masthead, hand-set folios, hairline rules,
   drop cap, a printed contents index, a colophon. Sumi brush art.
   Calm, fast, single-glance. No gimmicks — just set type well.
   Reuses the class hooks the landing + build.mjs already emit.
   ============================================================ */
:root{
  --paper:#f1e8d6;        /* warm rice paper */
  --paper-2:#e9dfc9;      /* a deeper leaf — panels, margins */
  --paper-3:#e2d6bc;      /* deepest tone — plate mats */
  --edge:#d7c8a9;         /* paper edge / soft shadow tone */
  --ink:#221d17;          /* warm sumi black — body + display */
  --ink-2:#2f2820;        /* headings, a hair lighter than pure */
  --ink-soft:#5a5044;     /* secondary text (passes 4.5:1 on paper) */
  --ink-faint:#635842;    /* captions, printer's marks (AA on paper, all tones) */
  --seal:#b23a24;         /* cinnabar — the one accent (hanko red, AA small) */
  --seal-deep:#9c3018;    /* pressed seal / hover */
  --rule:rgba(34,29,23,.22);     /* ink hairline */
  --rule-soft:rgba(34,29,23,.12);/* faint hairline */
  --disp:'Fraunces',Georgia,serif;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-stuck:rgba(241,232,214,.9);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
em{font-style:italic}
img{display:block;max-width:100%}
::selection{background:var(--seal);color:#fff5ec}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(22px,5vw,52px)}

/* printer's mark — a mono kicker */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--seal)}

/* paper fibre — a whisper of tooth over the whole sheet (multiply, so it
   darkens rather than glows). Subtle; never obstructs reading. */
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

main{position:relative;z-index:1}
/* persistent faint ink bleed — a fixed, non-interactive wash behind content (z:0, under main's z:1) */
.ink-bleed{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply}
html[data-theme="dark"] .ink-bleed{mix-blend-mode:screen;filter:invert(1) hue-rotate(20deg);opacity:.55}
.foot{position:relative;z-index:1}

/* the seal / chop — an ensō ring in cinnabar, the site's recurring mark */
.seal{display:inline-block;width:1.5em;height:1.5em;color:var(--seal);vertical-align:middle}
.seal svg{width:100%;height:100%;display:block}

/* skip link */
.skip{position:fixed;top:10px;left:10px;z-index:10000;transform:translateY(-180%);
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:2px;font-family:var(--mono);font-size:13px;transition:transform .2s var(--ease)}
.skip:focus{transform:none}

/* ── NAV — a thin running-head strip ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(22px,5vw,52px);transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease)}
.nav.is-stuck{background:var(--nav-stuck);backdrop-filter:blur(9px) saturate(1.1);box-shadow:0 1px 0 var(--rule);padding-top:11px;padding-bottom:11px}
.brand{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:.005em;color:var(--ink);display:inline-flex;align-items:center;gap:9px}
/* on the landing the nameplate carries the name — the running-head brand fades in only once stuck */
.is-landing .nav:not(.is-stuck) .brand{opacity:0;pointer-events:none}
.nav .brand{transition:opacity .3s var(--ease)}
.brand::before{content:"";width:8px;height:8px;border:1.5px solid var(--seal);border-radius:50%;display:inline-block}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__links a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-soft);padding:8px 12px;border-radius:2px;transition:.18s var(--ease)}
.nav__links a:hover{color:var(--ink);background:rgba(34,29,23,.06)}
.nav__cta{color:var(--seal)!important;box-shadow:inset 0 0 0 1.4px rgba(192,65,42,.5)}
.nav__cta:hover{background:var(--seal)!important;color:var(--paper)!important;box-shadow:inset 0 0 0 1.4px var(--seal)!important}

/* ── MASTHEAD — a broadsheet nameplate; the headline is the hook ── */
.mast{position:relative;z-index:1;padding:clamp(74px,10vh,116px) 0 clamp(10px,2vh,26px)}
.mast__marks{display:flex;justify-content:space-between;align-items:baseline;gap:8px 18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  padding-bottom:11px;border-bottom:1px solid var(--rule)}
.mast__marks a{color:var(--ink-soft);border-bottom:1px dotted rgba(178,58,36,.55)}
.mast__marks a:hover{color:var(--seal)}
.mast__marks-mid{text-align:center}
.mast__name{font-family:var(--disp);font-weight:500;font-size:clamp(40px,8.6vw,96px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);text-align:center;padding:clamp(12px,2vw,22px) 0 clamp(12px,2vw,20px)}
.rule-double{border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);height:4px;margin:0}
.mast__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);align-items:center;
  padding-top:clamp(24px,4.5vh,46px)}
.mast__head{font-family:var(--disp);font-weight:500;font-size:clamp(31px,7vw,66px);line-height:1.04;letter-spacing:-.025em;color:var(--ink);max-width:15ch}
.mast__head em{font-style:italic;color:var(--seal)}
.mast__stroke{display:block;width:min(420px,78%);height:auto;color:var(--ink);opacity:.85;margin:clamp(14px,2.4vh,24px) 0}
.mast__stroke path{stroke-dasharray:1;stroke-dashoffset:0;animation:strokeDraw 1.1s cubic-bezier(.55,.06,.35,1) .15s backwards}
@keyframes strokeDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mast__dek{font-family:var(--disp);font-size:clamp(17px,2.1vw,22px);line-height:1.5;color:var(--ink-2);max-width:46ch}
.mast__portrait{position:relative;justify-self:end;width:100%;max-width:300px;aspect-ratio:3/4;
  background:var(--paper-3);padding:10px 10px 38px;box-shadow:0 26px 50px -34px rgba(34,25,15,.55),0 0 0 1px var(--edge);
  transform:rotate(1.2deg)}
.mast__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;filter:saturate(.92) contrast(1.02)}
.mast__portrait figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
/* "this month" — current obsessions under the dek */
.now-strip{margin-top:clamp(16px,2.6vh,26px);font-size:14px;line-height:1.75;color:var(--ink-soft);max-width:52ch}
.now-strip__lab{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--seal);margin-right:9px}
.now-strip a{color:var(--ink);border-bottom:1px dotted rgba(192,65,42,.6);transition:.16s var(--ease)}
.now-strip a:hover{color:var(--seal);border-bottom-color:var(--seal)}

/* ── SECTION FOLIO — the hand-set number every section opens with ── */
.folio{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(22px,3vw,34px);
  padding-bottom:12px;border-bottom:1px solid var(--rule)}
.folio__no{font-family:var(--disp);font-weight:500;font-size:clamp(22px,3vw,30px);line-height:1;color:var(--seal);letter-spacing:-.02em}
.folio__lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}
.folio__lab b{color:var(--ink);font-weight:500}

/* the buttons — pressed-ink / letterpress */
.btn{font-family:var(--mono);font-size:13px;letter-spacing:.03em;padding:13px 24px;border-radius:2px;border:1.5px solid var(--ink);
  background:transparent;color:var(--ink);transition:.18s var(--ease);cursor:pointer}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--primary{background:var(--seal);color:var(--paper);border-color:var(--seal)}
.btn--primary:hover{background:var(--seal-deep);border-color:var(--seal-deep);color:var(--paper)}
.more{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--seal);border-bottom:1px solid rgba(192,65,42,.4);
  padding-bottom:1px;transition:.18s var(--ease)}
.more:hover{border-bottom-color:var(--seal)}

/* ── sumi brush divider ── */
.brush{position:relative;z-index:1;height:clamp(40px,6vw,72px);margin:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cdefs%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.42' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='18'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23221d17' stop-opacity='0'/%3E%3Cstop offset='0.18' stop-color='%23221d17' stop-opacity='0.82'/%3E%3Cstop offset='0.55' stop-color='%23221d17' stop-opacity='0.6'/%3E%3Cstop offset='0.84' stop-color='%23221d17' stop-opacity='0.82'/%3E%3Cstop offset='1' stop-color='%23221d17' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 44 C 280 22 520 58 760 38 S 1080 30 1170 46' stroke='url(%23g)' stroke-width='8' fill='none' stroke-linecap='round' filter='url(%23r)'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:min(1080px,92%) 100%;opacity:.5}
.brush--flip{transform:scaleX(-1)}

/* ── THE WORK, RIGHT NOW — four stories, each with an artifact ── */
.work{position:relative;z-index:1;padding:clamp(30px,5vh,64px) 0 clamp(20px,3vh,40px)}
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center;
  padding:clamp(34px,6vh,64px) 0;border-top:1px solid var(--rule-soft)}
.story:first-of-type{border-top:0;padding-top:clamp(10px,2vh,22px)}
.story--flip .story__text{order:2}
.story--flip .story__art{order:1}
.story__no{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--seal);margin-bottom:15px}
.story__no span{font-family:var(--disp);font-size:15px;color:var(--ink-faint)}
.story__h{font-family:var(--disp);font-weight:500;font-size:clamp(25px,3.6vw,41px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-bottom:16px;max-width:24ch}
.story__b{font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.62;color:var(--ink-soft);max-width:56ch}
.story__b strong{color:var(--ink);font-weight:600}
.story__b a{color:var(--ink);font-weight:600;border-bottom:1px dotted rgba(192,65,42,.6);transition:.16s var(--ease)}
.story__b a:hover{color:var(--seal);border-bottom-color:var(--seal)}
.story__b em{color:var(--seal);font-style:italic}
.story__cta{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;align-items:center}
.story__fine{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-faint)}
.story__art{display:flex;flex-direction:column;align-items:center;gap:13px}
.story__cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);text-align:center;max-width:40ch;line-height:1.6}
.story__cap b{color:var(--ink);font-weight:600}

/* the kaldenOS wire — an overnight telegraph on kraft */
.wire,.goons{width:100%;max-width:440px;background:var(--paper-2);border:1px solid var(--rule);
  box-shadow:0 22px 46px -36px rgba(34,25,15,.5);padding:18px 20px 20px}
.wire__head{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--seal);
  border-bottom:1px dashed var(--rule);padding-bottom:10px;margin-bottom:12px}
.wire__feed{list-style:none;display:flex;flex-direction:column;gap:9px}
.wire__feed li{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink-soft)}
.wire__feed li:last-child{color:var(--ink);font-weight:600}
.wire__feed li.is-typing::after{content:"▌";color:var(--seal);animation:caret 1s steps(1) infinite}
.wire__feed li.is-wait{visibility:hidden}
@keyframes caret{50%{opacity:0}}

/* the goons chat strip */
.goons__chat{list-style:none;display:flex;flex-direction:column;gap:9px}
.goons__chat li{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.goons__chat b{font-weight:600;margin-right:6px}
.goons__chat .g1{color:#7d500f}.goons__chat .g2{color:#31633e}.goons__chat .g3{color:#274e79}.goons__chat .g4{color:var(--seal)}
.goons__typing i{color:var(--ink-faint);font-style:italic}
.goons__typing i::after{content:"▌";color:var(--seal);margin-left:2px;animation:caret 1.1s steps(1) infinite}

/* the PeakCharts plate — an episode chart printed in ink */
.chart{display:block;width:100%;max-width:460px;background:var(--paper-2);border:1px solid var(--rule);
  box-shadow:0 22px 46px -36px rgba(34,25,15,.5);padding:16px 18px 12px;transition:.2s var(--ease)}
.chart:hover{border-color:var(--seal);transform:translateY(-2px)}
.chart__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:8px}
.chart__head b{color:var(--ink);letter-spacing:.2em}
.chart svg{display:block;width:100%;height:auto}
.chart__tick{stroke:var(--rule-soft);stroke-width:1}
.chart__line{stroke:var(--ink);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.chart--armed .chart__line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.4,.05,.3,1) .15s}
.chart--armed.is-in .chart__line{stroke-dashoffset:0}
.chart__peak{fill:var(--seal)}
.chart--armed .chart__peak{opacity:0;transition:opacity .4s var(--ease) 1.9s}
.chart--armed.is-in .chart__peak{opacity:1}
.chart__labels{display:flex;gap:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-faint);
  padding-top:6px;border-top:1px solid var(--rule-soft);margin-top:4px}
.chart__labels span{flex:1}
.chart__labels .chart__note{flex:none;color:var(--seal);font-weight:600}

/* ── device mockups (hard keep — dark product plates on paper) ── */
button.device{border:0;font:inherit;text-align:inherit;cursor:pointer;display:block}
button.device:focus-visible{outline:2px solid var(--seal);outline-offset:4px}
/* tap-to-reveal — the app's real gesture. JS arms it; no-JS shows the card revealed. */
.fl-reveal{display:flex;flex-direction:column;align-items:center;gap:7px}
.fl-tap{display:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#9db6ff;
  border:1px dashed rgba(155,182,255,.5);border-radius:999px;padding:7px 14px;margin-top:4px;animation:tapPulse 2.2s var(--ease) infinite}
@keyframes tapPulse{0%,100%{opacity:.65}50%{opacity:1}}
.device--armed .fl-reveal{display:none}
.device--armed .fl-tap{display:inline-block}
.device{position:relative;width:clamp(224px,25vw,284px);aspect-ratio:1/2.04;border-radius:34px;padding:8px;
  background:linear-gradient(155deg,#3a352c,#211d17);
  box-shadow:0 40px 66px -40px rgba(34,25,15,.7),0 0 0 1px rgba(34,29,23,.14),inset 0 0 0 1.4px rgba(255,255,255,.05)}
.device--sm{width:clamp(172px,20vw,208px)}
.device__notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:32%;height:18px;background:#211d17;border-radius:11px;z-index:3}
.scr{position:relative;width:100%;height:100%;border-radius:27px;overflow:hidden;display:flex;flex-direction:column}
/* Flua screen — the app's real light theme (matches the paper site) */
.scr-flua{background:#faf8f3;color:#1a1813;padding:34px 15px 14px;font-family:var(--sans)}
.fl-top{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);color:#8d8779}
.fl-timer{display:flex;flex-direction:column;align-items:center;color:#635f55;font-size:13px;letter-spacing:.06em}
.fl-timer small{font-size:7px;letter-spacing:.14em;color:#8d8779;margin-top:2px}
.fl-ic{font-size:13px;color:#8d8779}
.fl-dots{display:flex;gap:3px;margin:11px 2px 0}
.fl-dots i{height:3px;flex:1;border-radius:2px;background:rgba(26,24,19,.1)}
.fl-dots i.on{background:#2f5bd0}
.fl-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;position:relative}
.fl-new{position:absolute;top:6px;left:2px;font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;color:#2f5bd0}
.fl-audio{display:inline-flex;align-items:center;gap:6px;background:rgba(47,91,208,.12);color:#2f5bd0;border-radius:999px;padding:7px 13px;margin-bottom:4px}
.fl-wave{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.fl-wave i{width:2px;background:#2f5bd0;border-radius:1px;height:40%}
.fl-wave i:nth-child(2){height:90%}.fl-wave i:nth-child(3){height:60%}.fl-wave i:nth-child(4){height:100%}.fl-wave i:nth-child(5){height:50%}
.fl-fr{font-family:var(--disp);font-size:23px;color:#1a1813}
.fl-fr u{text-decoration-color:#2f5bd0;text-underline-offset:3px}
.fl-rule{width:58%;height:1px;background:rgba(26,24,19,.1);margin:3px 0}
.fl-lbl{font-family:var(--mono);font-size:7.5px;letter-spacing:.2em;color:#8d8779}
.fl-en{font-family:var(--disp);font-size:18px;color:#1a1813}
.fl-gloss{font-size:11px;color:#635f55}
.fl-hint{font-size:8.5px;color:#8d8779;text-align:center;margin:6px 2px 8px;line-height:1.35}
.fl-hint b{color:#3a362c}
.fl-btns{display:flex;gap:7px}
.fl-again,.fl-good{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;border-radius:10px;padding:8px 0;font-size:12px;font-weight:600}
.fl-again{background:rgba(184,118,20,.14);color:#b87614}
.fl-good{background:rgba(29,155,98,.14);color:#1d9b62}
.fl-again small,.fl-good small{font-size:8px;font-weight:400;opacity:.85}
/* the tap-to-reveal pill on the light card */
.fl-tap{color:#2f5bd0;border-color:rgba(47,91,208,.45)}
/* Weave screen */
.scr-weave{background:#e9efe1;color:#33402b;padding:34px 16px 12px;font-family:var(--sans);align-items:center}
.wv-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.wv-logo{display:inline-flex;align-items:center;gap:5px;color:#4f6b42;font-weight:600;font-size:13px}
.wv-gear{color:#8aa07c;font-size:13px}
.wv-day{margin-top:22px;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:#7d9070}
.wv-num{font-family:var(--disp);font-weight:500;font-size:46px;line-height:1;color:#2f3d28;margin-top:7px}
.wv-num small{font-size:13px;color:#7d9070;margin-left:2px}
.wv-target{font-size:10.5px;color:#7d9070;margin-top:9px}
.wv-track{font-family:var(--disp);font-size:18px;color:#3a4a30;margin-top:auto}
.wv-prog{font-size:10px;color:#7d9070;margin-top:4px}
.wv-streak{margin-top:14px;display:inline-flex;align-items:center;gap:5px;background:#dde7d0;color:#5a7049;font-size:10px;border-radius:999px;padding:5px 12px}
.wv-tabs{display:flex;justify-content:center;gap:34px;margin-top:14px;padding-top:10px;border-top:1px solid rgba(0,0,0,.07);width:100%}
.wv-tabs i{width:15px;height:15px;border-radius:4px;background:#c2cfb2}
.wv-tabs i.on{background:#5a7049}

/* ── THE INDEX — the range as a printed table of contents ── */
.range{position:relative;z-index:1;padding:clamp(56px,9vh,104px) 0}
.range__h{font-family:var(--disp);font-weight:500;font-size:clamp(28px,4.2vw,48px);letter-spacing:-.02em;color:var(--ink);margin-bottom:12px;max-width:22ch}
.range__note{font-family:var(--disp);font-style:italic;color:var(--ink-soft);max-width:62ch;margin-bottom:clamp(30px,5vw,46px);font-size:clamp(16px,1.9vw,19px);line-height:1.5}
.cats{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:720px){.cats{grid-template-columns:1fr 1fr;column-gap:clamp(36px,5vw,64px)}}
/* each shelf is a native <details> — tap to open, no JS, accessible */
.cat{border-top:1px solid var(--rule)}
.cat[open]{padding-bottom:18px}
.cat__sum{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:baseline;
  column-gap:14px;padding:18px 0 16px;position:relative;transition:.16s var(--ease)}
.cat__sum::-webkit-details-marker{display:none}
.cat__sum:hover .cat__k{color:var(--seal-deep)}
.cat__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--seal);display:flex;align-items:baseline;gap:11px;transition:.16s var(--ease)}
.cat__k span{color:var(--ink-faint);font-family:var(--disp);font-size:14px}
.cat__d{grid-column:1;font-family:var(--disp);font-style:italic;font-size:14.5px;line-height:1.4;color:var(--ink-soft);margin-top:5px}
/* the ▸ marker + count sit on the right, marker rotates on open */
.cat__n{grid-row:1;grid-column:2;font-family:var(--mono);font-size:11px;color:var(--ink-faint);display:inline-flex;align-items:center;gap:9px}
.cat__n::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--seal);border-bottom:1.5px solid var(--seal);
  transform:rotate(-45deg);transition:transform .2s var(--ease);opacity:.8}
.cat[open] .cat__n::after{transform:rotate(45deg)}
.cat__l{list-style:none;display:flex;flex-direction:column;gap:2px;padding-bottom:4px;
  animation:catOpen .28s var(--ease)}
@keyframes catOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* leader-dot index rows — title …… tag, like a book's contents */
.cat__l li{font-size:14px;line-height:1.5;color:var(--ink-soft);display:flex;align-items:baseline;gap:6px;padding:3px 0}
.cat__l a{color:var(--ink);border-bottom:1px solid transparent;transition:.16s var(--ease)}
.cat__l a:hover{color:var(--seal);border-bottom-color:var(--seal)}
.cat__l .lead-t{color:var(--ink)}
.cat__l .dots{flex:1;border-bottom:1px dotted var(--ink-faint);transform:translateY(-3px);min-width:14px;opacity:.6}
.cat__l .tag{white-space:nowrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-faint)}

/* ── THE RABBIT HOLE — reading list, printed contents ── */
.writing{position:relative;z-index:1;padding:clamp(56px,9vh,104px) 0;border-top:4px double var(--rule)}
.writing__h{font-family:var(--disp);font-weight:500;font-size:clamp(28px,4.2vw,48px);letter-spacing:-.02em;color:var(--ink);margin-bottom:12px;max-width:20ch}
.writing__note{font-family:var(--disp);font-style:italic;color:var(--ink-soft);max-width:60ch;margin-bottom:clamp(26px,4vw,38px);font-size:clamp(16px,1.9vw,19px);line-height:1.5}
.wlist{list-style:none}
.wrow{border-top:1px solid var(--rule)}
.wrow:last-child{border-bottom:1px solid var(--rule)}
.wrow a{display:block;padding:20px 4px;transition:.2s var(--ease)}
.wrow a:hover{padding-left:14px;background:linear-gradient(90deg,rgba(192,65,42,.06),transparent 78%)}
.wrow__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.wrow__t{font-family:var(--disp);font-size:clamp(19px,2.3vw,27px);line-height:1.12;color:var(--ink);transition:.18s var(--ease)}
.wrow a:hover .wrow__t{color:var(--seal)}
.wrow__m{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.wrow__d{display:block;margin-top:7px;color:var(--ink-soft);font-size:14.5px;line-height:1.55;max-width:80ch}
.writing__foot{margin-top:24px}
.writing__foot a{color:var(--seal);border-bottom:1px solid currentColor;font-family:var(--mono);font-size:13px}

/* rabbit-hole "more" disclosure — the long tail, tucked away */
.wmore{border-bottom:1px solid var(--rule)}
.wmore__sum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:18px 4px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);transition:.16s var(--ease)}
.wmore__sum::-webkit-details-marker{display:none}
.wmore__sum:hover{color:var(--seal)}
.wmore__mk{width:8px;height:8px;border-right:1.6px solid var(--seal);border-bottom:1.6px solid var(--seal);
  transform:rotate(45deg);transition:transform .2s var(--ease)}
.wmore[open] .wmore__mk{transform:rotate(-135deg)}
.wmini{list-style:none;padding:0 0 16px;animation:catOpen .28s var(--ease)}
.wmini li{border-top:1px solid var(--rule-soft)}
.wmini a{display:flex;align-items:baseline;gap:8px;padding:12px 4px;transition:.16s var(--ease)}
.wmini a:hover{padding-left:12px}
.wmini__t{font-family:var(--disp);font-size:clamp(16px,1.7vw,19px);color:var(--ink);transition:.16s var(--ease)}
.wmini a:hover .wmini__t{color:var(--seal)}
.wmini .dots{flex:1;border-bottom:1px dotted var(--ink-faint);transform:translateY(-3px);min-width:14px;opacity:.5}
.wmini__m{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}

/* ── SOMEDAY — dreams, as marginalia over a duotone plate ── */
.dreams{position:relative;padding:clamp(72px,13vh,150px) 0;overflow:hidden;border-top:1px solid var(--rule)}
.dreams__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.16;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.1)}
.dreams::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--paper),transparent 45%,var(--paper))}
.dreams__inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 clamp(22px,5vw,52px)}
.dreams__h{font-family:var(--disp);font-weight:500;font-size:clamp(28px,4.6vw,52px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin-bottom:30px;max-width:20ch}
.dreams__list{list-style:none;display:flex;flex-direction:column;gap:15px;max-width:64ch;counter-reset:dream}
.dreams__list li{font-family:var(--disp);font-weight:400;font-size:clamp(16.5px,2vw,21px);line-height:1.45;color:var(--ink-2);padding-left:38px;position:relative}
.dreams__list li::before{counter-increment:dream;content:"№" counter(dream);position:absolute;left:0;top:.15em;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--seal)}
.dreams__list em{color:var(--seal);font-style:italic}

/* ── PLATES — photography + the travel ledger ── */
.photography{position:relative;z-index:1;padding:clamp(56px,9vh,104px) 0;border-top:1px solid var(--rule)}
.gallery__h{font-family:var(--disp);font-weight:500;font-size:clamp(28px,4.2vw,48px);letter-spacing:-.02em;color:var(--ink)}
.gallery__note{font-family:var(--disp);font-style:italic;margin-top:12px;color:var(--ink-soft);max-width:52ch;font-size:clamp(15.5px,1.8vw,18px);line-height:1.5}
.gallery__strip{display:flex;gap:16px;margin-top:36px;padding:0 clamp(22px,5vw,52px) 6px;overflow-x:auto;scrollbar-width:none}
.gallery__strip::-webkit-scrollbar{display:none}
.gallery__strip .tile{flex:none;width:min(72vw,320px);aspect-ratio:4/5;background:var(--paper-3);padding:9px 9px 34px;
  box-shadow:0 20px 40px -30px rgba(34,25,15,.6),0 0 0 1px var(--edge);position:relative}
.gallery__strip .tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.gallery__strip .tile figcaption{position:absolute;left:0;right:0;bottom:11px;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

/* boarding-pass travel ledger — a printed ticket */
.ticket{display:grid;grid-template-columns:1fr auto;margin-top:44px;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--rule);box-shadow:0 22px 46px -36px rgba(34,25,15,.5)}
.ticket__main{padding:22px clamp(20px,3vw,28px)}
.ticket__head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-bottom:1px dashed var(--rule);padding-bottom:12px;margin-bottom:16px}
.ticket__brand{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--seal)}
.ticket__class{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-faint)}
.ticket__route{display:flex;align-items:flex-end;gap:7px;flex-wrap:wrap}
.ticket__city{display:flex;flex-direction:column;gap:2px}
.ticket__city b{font-family:var(--disp);font-weight:500;font-size:clamp(17px,2.3vw,25px);color:var(--ink);letter-spacing:.02em}
.ticket__city small{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.ticket__plane{color:var(--seal);font-size:13px;padding-bottom:7px}
.ticket__dash{flex:1;min-width:12px;border-bottom:1px dotted var(--ink-faint);margin:0 1px 9px}
.ticket__foot{margin-top:16px;font-size:13px;color:var(--ink-soft);line-height:1.5}
.ticket__stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  padding:22px;border-left:2px dashed var(--rule);background:var(--paper-3);text-align:center}
.ticket__stub::before,.ticket__stub::after{content:"";position:absolute;left:-7px;width:13px;height:13px;border-radius:50%;background:var(--paper)}
.ticket__stub::before{top:-7px}.ticket__stub::after{bottom:-7px}
.ticket__seat{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-soft)}
.ticket__barcode{display:block;width:56px;height:60px;opacity:.8;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 13px)}
.ticket__more{font-family:var(--mono);font-size:12px;color:var(--seal)}

/* ── CORRESPONDENCE / CONNECT ── */
.connect{padding:clamp(72px,13vh,150px) 0;text-align:center;border-top:4px double var(--rule)}
.connect__wrap{max-width:820px}
.connect .eyebrow{display:block;margin-bottom:20px}
.connect__h{font-family:var(--disp);font-weight:500;font-size:clamp(29px,5vw,54px);line-height:1.08;letter-spacing:-.02em;margin-bottom:22px;color:var(--ink)}
.connect__h em{color:inherit;font-style:italic}
.connect__h .hl{color:var(--seal)}
.connect__body{font-size:clamp(16px,1.95vw,19px);line-height:1.6;color:var(--ink-soft);max-width:56ch;margin:0 auto 34px}
.connect__actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}

/* ── COLOPHON / FOOT ── */
.foot{border-top:1px solid var(--ink);padding:26px 0;background:var(--paper-2)}
.foot__wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.foot__note{font-style:normal}
.foot a{color:var(--ink-soft);border-bottom:1px solid transparent}
.foot a:hover{color:var(--seal);border-bottom-color:var(--seal)}

/* ============================================================
   DEEP PAGES — projects/blog/ideas list + post, generated by
   build.mjs. Printed-leaf header, editorial prose, contents.
   ============================================================ */
.crumb{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:20px;transition:.18s var(--ease)}
.crumb:hover{color:var(--seal)}

/* deep-page header — a printed leaf, art as a faint duotone band */
.dhero{position:relative;padding:clamp(112px,17vh,168px) 0 clamp(30px,5vh,54px);overflow:hidden;border-bottom:1px solid var(--rule)}
.dhero::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--dhero-art);background-size:cover;background-position:center;
  opacity:.14;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.1)}
.dhero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent,var(--paper))}
.dhero--slim{padding-top:clamp(104px,15vh,140px)}
.dhero--slim::before{opacity:.1}
.dhero__inner{position:relative;z-index:2}
.dhero__kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--seal);margin-bottom:16px}
.dhero__title{font-family:var(--disp);font-weight:500;font-size:clamp(34px,6vw,68px);line-height:1.02;letter-spacing:-.025em;color:var(--ink);max-width:18ch}
.dhero__dek{margin-top:20px;font-family:var(--disp);font-weight:400;font-size:clamp(17px,2.1vw,22px);line-height:1.5;color:var(--ink-soft);max-width:60ch}

/* article + TOC grid */
.layout{display:grid;grid-template-columns:1fr;padding-top:clamp(38px,6vh,64px);padding-bottom:clamp(40px,8vh,90px)}
@media(min-width:1000px){.layout:has(.toc){grid-template-columns:210px minmax(0,1fr);gap:clamp(40px,6vw,84px);align-items:start}}
.layout:not(:has(.toc)) .prose{margin-left:auto;margin-right:auto}
.toc{display:none}
@media(min-width:1000px){.toc{display:block;position:sticky;top:88px}}
.toc__h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:13px}
.toc nav{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--rule)}
.toc a{font-size:13px;line-height:1.35;color:var(--ink-faint);padding:6px 0 6px 15px;margin-left:-1px;border-left:1px solid transparent;transition:.18s var(--ease)}
.toc a:hover{color:var(--ink-soft)}
.toc a.is-active{color:var(--seal);border-left-color:var(--seal)}

/* long-form prose */
.prose{max-width:68ch;font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.75;color:var(--ink-2)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.4vw,37px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-top:1.9em;scroll-margin-top:88px}
.prose h3{font-family:var(--disp);font-weight:500;font-size:clamp(20px,2.4vw,25px);line-height:1.2;color:var(--ink);margin-top:1.5em}
.prose h4{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--seal);margin-top:1.4em}
.prose strong{color:var(--ink);font-weight:600}
.prose em{font-style:italic}
.prose a{color:var(--seal);border-bottom:1px solid rgba(192,65,42,.4);transition:.16s var(--ease)}
.prose a:hover{border-bottom-color:var(--seal)}
.prose ul,.prose ol{padding-left:1.2em;color:var(--ink-2)}
.prose li+li{margin-top:.5em}
.prose hr{border:0;height:1px;background:var(--rule);margin:2.4em 0}
.prose code{font-family:var(--mono);font-size:.86em;color:var(--seal-deep);background:rgba(34,29,23,.06);padding:.12em .4em;border-radius:3px}
.prose blockquote{border-left:2px solid var(--seal);padding-left:22px;color:var(--ink-soft);font-style:italic}
/* pull-quote */
.prose .pq{border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:24px 0;margin:2em 0;font-family:var(--disp);font-style:italic;font-weight:400;font-size:clamp(20px,2.6vw,27px);line-height:1.4;color:var(--ink)}
.prose .pq cite{display:block;margin-top:13px;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.08em;color:var(--ink-faint)}
/* proof list */
.prose .proof{list-style:none;padding:0;margin:1.4em 0}
.prose .proof li{position:relative;padding-left:24px;color:var(--ink-2)}
.prose .proof li+li{margin-top:.5em}
.prose .proof li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--seal)}
/* now / next split */
.prose .now-next{display:grid;gap:18px;margin:1.8em 0}
@media(min-width:640px){.prose .now-next{grid-template-columns:1fr 1fr}}
.prose .now-next>div{border:1px solid var(--rule);padding:22px 24px;background:var(--paper-2)}
.prose .now-next h4{margin-top:0}
.prose .now-next .next{border-color:var(--seal);border-left-width:3px}
/* figure */
.prose .fig{margin:2em 0}
.prose .fig img{width:100%;background:var(--paper-3);padding:9px;box-shadow:0 26px 50px -36px rgba(34,25,15,.5),0 0 0 1px var(--edge)}
.prose .fig figcaption{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-faint);text-align:center}
/* photo plates inside deep pages — editorial figures, book-plate style */
.pfig{margin:34px 0}
.pfig img{width:100%;height:auto;background:var(--paper-3);box-shadow:0 26px 50px -36px rgba(34,25,15,.5),0 0 0 1px var(--edge)}
.pfig figcaption{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.pfig--n{max-width:460px;margin-left:auto;margin-right:auto}
.pfig-row{display:flex;gap:16px;margin:34px 0}
.pfig-row .pfig{flex:1;margin:0}
@media(max-width:640px){.pfig-row{display:block}.pfig-row .pfig{margin:20px 0}}
/* keep-going footer */
.prose .keepgoing{margin-top:2.4em;border-top:1px solid var(--rule);padding-top:1.2em;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink-faint)}
.prose .keepgoing strong{color:var(--seal);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:11px;display:block;margin-bottom:8px}
.prose .keepgoing a{color:var(--ink)}
/* photo grid inside deep pages */
.prose .photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:2em 0}
@media(min-width:720px){.prose .photo-grid{grid-template-columns:repeat(3,1fr)}}
.prose .photo-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;box-shadow:0 14px 32px -24px rgba(34,25,15,.6),0 0 0 1px var(--edge);transition:.22s var(--ease)}
.prose .photo-grid img:hover{filter:brightness(1.03)}
.prose .photo-grid--wide{grid-template-columns:repeat(2,1fr)}
.prose .photo-grid--wide img{aspect-ratio:3/2}

.wip{font-family:var(--mono);font-size:13px;color:var(--seal);border:1px dashed var(--seal);border-radius:2px;padding:12px 16px;margin-bottom:1.4em}
.next-up{padding:clamp(38px,6vh,72px) clamp(22px,5vw,52px);border-top:1px solid var(--rule)}

/* list pages (projects / blog / ideas) */
.list-wrap{padding:clamp(28px,5vh,48px) clamp(22px,5vw,52px) clamp(50px,9vh,100px)}
.post-list{list-style:none}
.post-row{border-top:1px solid var(--rule);padding:22px 0}
.post-row:last-child{border-bottom:1px solid var(--rule)}
.post-row a{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.post-row__t{font-family:var(--disp);font-size:clamp(19px,2.6vw,28px);color:var(--ink);transition:.18s var(--ease)}
.post-row a:hover .post-row__t{color:var(--seal)}
.post-row__m{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.post-row__d{margin-top:8px;color:var(--ink-soft);font-size:15px;line-height:1.55;max-width:64ch}

/* ── RESPONSIVE ── */
@media(max-width:980px){
  .story{grid-template-columns:1fr;gap:26px;padding:clamp(30px,5vh,44px) 0}
  .story--flip .story__text{order:1}
  .story--flip .story__art{order:2}
  .story__art{order:2}
  .story__h{max-width:none}
}
@media(max-width:900px){
  .mast{padding-top:clamp(64px,9vh,88px)}
  .mast__grid{grid-template-columns:1fr;gap:8px;padding-top:clamp(18px,3vh,30px)}
  .mast__portrait{display:none}
  .mast__marks-mid{display:none}
}
@media(max-width:680px){
  body{font-size:16px}
  .foot__wrap{flex-direction:column;text-align:center}
  .masthead-marks{justify-content:center;gap:8px 18px}
}
@media(max-width:560px){
  .ticket{grid-template-columns:1fr}
  .ticket__stub{border-left:0;border-top:2px dashed var(--rule);flex-direction:row;gap:18px}
  .ticket__stub::before{left:-7px;top:-7px}.ticket__stub::after{left:auto;right:-7px;top:-7px;bottom:auto}
}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:2px}

/* nav — the old floating style-switcher pill is gone from the canonical
   site (it lives on in /museum/), so every page keeps a real nav. */
.brand{white-space:nowrap}
.nav__links a{white-space:nowrap}
@media(max-width:760px){
  .nav{padding-left:14px;padding-right:14px}
  .nav__links{gap:0}
  .nav__links a{font-size:11.5px;padding:7px 8px}
  .brand{font-size:17px}
}
@media(max-width:430px){
  .is-landing .nav__links a:not(.nav__cta){display:none}
}
@media(max-width:600px){
  .is-deep .nav__links a[href="/"]{display:none}
  .is-deep .brand{font-size:16px}
  .is-deep .nav__links a{font-size:11px;padding:7px 6px}
}

/* ── hero intro — CSS-only so it never gates the LCP on JS ── */
@keyframes coverUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mast__marks,.mast__name,.mast__grid{animation:coverUp .8s var(--ease) both}
.mast__name{animation-delay:.06s}
.mast__grid{animation-delay:.16s}

/* ── scroll-reveal (progressive; content visible without JS) ── */
.develop{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.develop.is-in{opacity:1;transform:none}

/* ── view transitions between pages ── */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .develop{opacity:1;transform:none;transition:none}
  .cat__l,.wmini{animation:none}
  .cat__n::after,.wmore__mk{transition:none}
  .mast__stroke path{animation:none;stroke-dashoffset:0}
  .chart--armed .chart__line{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .chart--armed .chart__peak{opacity:1;transition:none}
  .fl-tap{animation:none}
  @view-transition{navigation:none}
}


/* ============================================================
   NIGHT — the dark theme. Not a dark portfolio: the same print
   object at night, where the paper and the ink trade places.
   Warm sumi-black ground, warm paper-cream ink, brighter cinnabar.
   Every token flips here; components that hardcode ink/paper get
   surgical overrides below. Auto by prefers-color-scheme, and a
   visible toggle. AA-checked on the night ground.
   ============================================================ */
html[data-theme="dark"]{
  --paper:#191510;        /* warm sumi-black — ink pooled into a page */
  --paper-2:#211c15;      /* lifted panel */
  --paper-3:#2a2318;      /* deepest — plate mats */
  --edge:#3a3226;         /* mat edge / hairline tone */
  --ink:#ece3d0;          /* warm paper-cream — body + display */
  --ink-2:#f2ebda;        /* headings, a hair brighter */
  --ink-soft:#bcb29b;     /* secondary (8.6:1) */
  --ink-faint:#948a74;    /* captions / marks (5.3:1, AA) */
  --seal:#d76c4a;         /* cinnabar, brighter to read on ink (5.4:1) */
  --seal-deep:#e6835f;    /* pressed / hover */
  --rule:rgba(236,227,208,.20);
  --rule-soft:rgba(236,227,208,.11);
  --nav-stuck:rgba(25,21,16,.9);
  color-scheme:dark;
}
/* paper grain: multiply darkens on light; on ink it must lighten */
html[data-theme="dark"] .grain{mix-blend-mode:soft-light;opacity:.06}
/* portrait/plate mats already use --paper-3 → flip automatically.
   duotone bands blend by multiply on paper; on ink they must screen. */
html[data-theme="dark"] .dreams__bg,
html[data-theme="dark"] .dhero::before{mix-blend-mode:screen;opacity:.12;filter:grayscale(1) contrast(1.05) brightness(1.1)}
/* the sumi brush divider is a hardcoded black stroke — lift it to cream */
html[data-theme="dark"] .brush{filter:invert(.92) sepia(.25) saturate(1.1) brightness(1.05)}
/* the Flua device plate follows the site: light site → light card,
   night site → the app's real dark theme. */
html[data-theme="dark"] .scr-flua{background:#0e0f13;color:#e8e6e0}
html[data-theme="dark"] .fl-top,html[data-theme="dark"] .fl-ic{color:#8a8f99}
html[data-theme="dark"] .fl-timer{color:#d2d1cb}
html[data-theme="dark"] .fl-timer small,html[data-theme="dark"] .fl-lbl,html[data-theme="dark"] .fl-gloss{color:#6a6f78}
html[data-theme="dark"] .fl-dots i{background:rgba(255,255,255,.12)}
html[data-theme="dark"] .fl-dots i.on{background:#5b8cff}
html[data-theme="dark"] .fl-new{color:#5b8cff}
html[data-theme="dark"] .fl-audio{background:rgba(91,140,255,.16);color:#9db6ff}
html[data-theme="dark"] .fl-wave i{background:#9db6ff}
html[data-theme="dark"] .fl-fr,html[data-theme="dark"] .fl-en{color:#fff}
html[data-theme="dark"] .fl-fr u{text-decoration-color:#5b8cff}
html[data-theme="dark"] .fl-rule{background:rgba(255,255,255,.1)}
html[data-theme="dark"] .fl-hint{color:#7a7f88}
html[data-theme="dark"] .fl-hint b{color:#cfcec8}
html[data-theme="dark"] .fl-again{background:rgba(150,110,40,.22);color:#d8a23f}
html[data-theme="dark"] .fl-good{background:rgba(40,120,80,.22);color:#5fbf8a}
html[data-theme="dark"] .fl-tap{color:#9db6ff;border-color:rgba(155,182,255,.5)}
/* selection stays cinnabar; ensure legible on either ground */
html[data-theme="dark"] ::selection{background:var(--seal);color:#1a1510}

/* ── day / night toggle — a small print-shop dial in the running head ── */
.theme-toggle{margin-left:9px;width:34px;height:34px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:50%;color:var(--ink-soft);background:transparent;cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease);position:relative;overflow:hidden}
.theme-toggle:hover{color:var(--seal);border-color:var(--seal)}
.tt-ic{position:absolute;transition:opacity .25s var(--ease),transform .4s var(--ease)}
.tt-sun{opacity:0;transform:rotate(-80deg) scale(.5)}
.tt-moon{opacity:1;transform:none}
html[data-theme="dark"] .tt-moon{opacity:0;transform:rotate(80deg) scale(.5)}
html[data-theme="dark"] .tt-sun{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.tt-ic{transition:opacity .15s linear}}

/* ── Kuzure — the leaning tower artifact (brutal architecture) ── */
.tower{position:relative;width:100%;max-width:320px;min-height:340px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:6px;padding:30px 20px 34px;margin:0 auto}
.tower__blk{width:132px;height:26px;border-radius:2px;transform:translateX(var(--x,0)) rotate(var(--r,0deg));
  background:linear-gradient(150deg,#33333a,#1e1e22);box-shadow:0 6px 14px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .3s var(--ease)}
.tower__blk--slate{background:linear-gradient(150deg,#5a5e68,#3c3f47)}
.tower__blk--seal{background:linear-gradient(150deg,var(--seal),var(--seal-deep));box-shadow:0 8px 20px -8px rgba(178,58,36,.6)}
.tower__ground{width:190px;height:1px;background:var(--rule);margin-top:12px}
/* the whole tower leans a touch further on hover — it wants to fall */
.tower:hover .tower__blk{transform:translateX(calc(var(--x,0) * 1.5)) rotate(calc(var(--r,0deg) * 1.4))}

/* the biggest claim on the page is clickable proof (the Maranges move) —
   styled invisibly; only cursor + a hover underline give it away */
.mast__head-link{color:inherit;text-decoration:none}
.mast__head-link em{transition:.18s var(--ease)}
.mast__head-link:hover em{color:var(--seal-deep);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

/* ── PLATES · /photography/ — a photobook, not a photo wall.
   Soth's sequenced single column; numbered plates are the Best tier
   (full column width + wall space), supporting rows are aspect-ratio
   proportional pairs. The lightbox is a dark room in both themes. ── */
.plates-wrap{max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.plates-head{padding:clamp(96px,14vh,150px) 0 clamp(26px,4vw,46px)}
.plates-h{font-family:var(--disp);font-weight:500;font-size:clamp(36px,6.6vw,74px);line-height:1.02;letter-spacing:-.025em;margin:10px 0 18px}
.plates-note{font-family:var(--disp);font-size:clamp(16px,1.9vw,19.5px);line-height:1.6;color:var(--ink-soft);max-width:58ch}
.plates-sec{margin:clamp(48px,7vw,88px) 0}
.plates-sec__h{display:flex;align-items:baseline;gap:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:clamp(18px,3vw,30px)}
.plates-sec__h::after{content:"";flex:1;border-top:1px solid var(--rule-soft);transform:translateY(-3px)}
.plates-sec__no{font-family:var(--disp);font-size:21px;font-weight:500;color:var(--seal);letter-spacing:-.01em}
.plate{position:relative;min-width:0}
.plate picture{display:block}
.plate img{width:100%;height:auto;background:var(--paper-3)}
.plate:focus-visible{outline:2px solid var(--seal);outline-offset:5px}
.plate--best{margin:clamp(44px,7vw,92px) 0}
.plate--best:first-of-type{margin-top:clamp(18px,3vw,30px)}
.plate--best figcaption{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.plate-row{display:flex;gap:clamp(10px,1.8vw,20px);margin:clamp(10px,1.8vw,20px) 0}
.plate-row .plate{flex-grow:var(--ar,1);flex-basis:0}
@media(max-width:700px){
  .plate-row{display:block;margin:0}
  .plate-row .plate{margin:14px 0}
  .plate--best{margin:clamp(34px,9vw,52px) 0}
}
.plates-colophon{margin:clamp(64px,9vw,110px) 0 96px;padding-top:28px;border-top:1px solid var(--rule)}
.plates-colophon p{font-family:var(--disp);font-size:17.5px;line-height:1.65;color:var(--ink-soft);max-width:56ch}
.plates-colophon a{color:var(--seal);border-bottom:1px solid rgba(178,58,36,.35)}
.plates-back{margin-top:16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.plates-back a{color:var(--ink-soft);border-bottom:0}
.plates-back a:hover{color:var(--seal)}
/* the dark room — deliberately near-black in BOTH themes; warm grounds
   shift color perception of photographs, so the paper yields here */
.lb{border:0;padding:0;margin:auto;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
.lb::backdrop{background:rgba(13,12,10,.97)}
.lb[open]{display:grid;place-items:center}
.lb__fig{display:grid;gap:12px;justify-items:center;max-width:min(94vw,1600px)}
.lb__fig img{max-width:94vw;max-height:82vh;width:auto;height:auto;box-shadow:0 30px 90px rgba(0,0,0,.55);background:#1a1814}
.lb__fig figcaption{display:flex;gap:20px;align-items:baseline;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#cbc0aa}
.lb__count{color:#8d8471}
.lb__close{position:fixed;top:14px;right:16px;z-index:2;width:46px;height:46px;border:1px solid rgba(203,192,170,.35);border-radius:50%;
  background:transparent;color:#cbc0aa;font-size:24px;line-height:1;cursor:pointer;transition:.18s var(--ease)}
.lb__close:hover{color:#fff;border-color:#fff}
.lb__nav{position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:84px;border:0;background:transparent;
  color:#cbc0aa;font-size:40px;font-family:var(--disp);cursor:pointer;transition:.18s var(--ease)}
.lb__nav:hover{color:#fff}
.lb__prev{left:6px}.lb__next{right:6px}
@media(max-width:700px){.lb__nav{display:none}.lb__fig img{max-height:76vh}}
/* landing hooks for the plates page */
.gallery__h a{color:inherit}
.gallery__h a:hover{color:var(--seal-deep);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px}

/* ── ticket stops are buttons now — every stop has a story ── */
.ticket__city{background:none;border:0;font:inherit;cursor:pointer;text-align:left}
.ticket__city:hover b,.ticket__city.is-on b{color:var(--seal)}
.ticket__city.is-on small{color:var(--seal)}
.ticket__city:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
.ticket__foot{min-height:5.6em}
@media(max-width:600px){.ticket__foot{min-height:12.5em}}

/* ── the Flua card is a real screenshot now — four shots (front/revealed ×
   light/dark), the visible one picked by theme + armed state ── */
.device--shot{aspect-ratio:390/844}
.scr-shot{background:#faf8f3}
html[data-theme="dark"] .scr-shot{background:#141518}
.fl-shot{position:absolute;inset:0;opacity:0;transition:opacity .25s var(--ease)}
.fl-shot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fl-shot.is-vis{opacity:1}
/* no-JS default: the revealed light shot */
@media (scripting: none){.fl-shot--back.fl-shot--l{opacity:1}}
.fl-tap--shot{display:none;position:absolute;left:50%;bottom:13%;transform:translateX(-50%);z-index:2;
  background:rgba(250,248,243,.86);backdrop-filter:blur(3px)}
html[data-theme="dark"] .fl-tap--shot{background:rgba(20,21,24,.82)}
.device--armed .fl-tap--shot{display:inline-block}

/* ── the Kuzure story art is the real box ── */
/* Kuzure box as a real 3D object — a shaded off-white box with the cover
   art on its face; tilts with the cursor, casts a soft shadow. */
.kzwrap{filter:drop-shadow(0 30px 26px rgba(28,20,10,.32));margin:8px auto 24px;width:fit-content}
.kzscene{--kw:264px;--kh:456px;--kd:52px;display:block;width:var(--kw);height:var(--kh);perspective:1300px}
.kzbox3d{position:relative;width:var(--kw);height:var(--kh);transform-style:preserve-3d;
  transform:rotateX(4deg) rotateY(-17deg);transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform}
.kzface{position:absolute;top:0;left:0;overflow:hidden;backface-visibility:hidden}
.kzface--front{width:var(--kw);height:var(--kh);transform:translateZ(calc(var(--kd)/2));
  background:#e2e2de url(/assets/img/kuzure/linen.webp) center/150px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.kzface--front picture{display:block;width:100%;height:100%}
.kzface--front img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* every off-white side wears the box's OWN linen (sampled from the cover); a
   translucent shade keeps the 3D read so it looks like one continuous object */
.kzface--right{width:var(--kd);height:var(--kh);left:calc((var(--kw) - var(--kd))/2);
  transform:rotateY(90deg) translateZ(calc(var(--kw)/2));
  background:linear-gradient(90deg,rgba(38,33,24,.05),rgba(38,33,24,.17)),url(/assets/img/kuzure/linen.webp) center/150px #e2e2de}
.kzface--left{width:var(--kd);height:var(--kh);left:calc((var(--kw) - var(--kd))/2);
  transform:rotateY(-90deg) translateZ(calc(var(--kw)/2));
  background:linear-gradient(90deg,rgba(38,33,24,.17),rgba(38,33,24,.05)),url(/assets/img/kuzure/linen.webp) center/150px #e2e2de}
.kzface--top{width:var(--kw);height:var(--kd);top:calc((var(--kh) - var(--kd))/2);
  transform:rotateX(90deg) translateZ(calc(var(--kh)/2));
  background:linear-gradient(180deg,rgba(255,254,249,.12),rgba(38,33,24,.05)),url(/assets/img/kuzure/linen.webp) center/150px #e2e2de}
.kzface--bottom{width:var(--kw);height:var(--kd);top:calc((var(--kh) - var(--kd))/2);
  transform:rotateX(-90deg) translateZ(calc(var(--kh)/2));
  background:linear-gradient(180deg,rgba(38,33,24,.12),rgba(38,33,24,.22)),url(/assets/img/kuzure/linen.webp) center/150px #e2e2de}
html[data-theme="dark"] .kzwrap{filter:drop-shadow(0 30px 26px rgba(0,0,0,.5))}
html[data-theme="dark"] .kzface--front img{filter:brightness(.93)}
/* night: dim the linen sides so the box doesn't glow bright against the dark page */
html[data-theme="dark"] .kzface--right,html[data-theme="dark"] .kzface--left,
html[data-theme="dark"] .kzface--top,html[data-theme="dark"] .kzface--bottom{filter:brightness(.9)}
@media(max-width:520px){.kzscene{--kw:232px;--kh:400px;--kd:46px}}

/* ── WORK WITH ME — /consult/, /courses/, /terms/, /thanks/ ── */
.ww-wrap{max-width:880px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.ww-head{padding:clamp(90px,13vh,140px) 0 clamp(22px,3.4vw,40px)}
.ww-h{font-family:var(--disp);font-weight:500;font-size:clamp(32px,5.8vw,62px);line-height:1.04;letter-spacing:-.025em;margin:10px 0 16px}
.ww-h em{color:var(--seal);font-style:italic}
.ww-note{font-family:var(--disp);font-size:clamp(16px,1.9vw,19.5px);line-height:1.6;color:var(--ink-soft);max-width:58ch}
.ww-note strong{color:var(--ink);font-weight:600}
.ww-sec{margin:clamp(38px,6vw,66px) 0}
.ww-sec>h2{font-family:var(--disp);font-weight:500;font-size:clamp(22px,3.2vw,32px);letter-spacing:-.015em;margin-bottom:14px}
.ww-sec>p{font-size:16px;line-height:1.66;color:var(--ink-soft);max-width:62ch;margin-top:10px}
.ww-sec>p strong{color:var(--ink)}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,20px);margin-top:22px}
@media(max-width:700px){.lanes{grid-template-columns:1fr}}
.lane{border:1px solid var(--rule);background:var(--paper-2);padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.lane h3{font-family:var(--disp);font-weight:600;font-size:18.5px;letter-spacing:-.01em}
.lane p{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.lane .more{margin-top:auto;padding-top:8px}
.pricebox{margin-top:26px;padding:clamp(20px,3vw,30px);border:1.5px solid var(--ink);background:var(--paper-2)}
.pricebox h3{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.4vw,23px)}
.pricebox p{font-size:15px;line-height:1.62;color:var(--ink-soft);max-width:58ch;margin-top:9px}
.pricebox p strong{color:var(--ink)}
.pricebox .cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin-top:16px}
.pricebox .fine{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-faint);margin-top:12px}
.pricebox .fine a{color:var(--ink-soft)}
.testi{margin:18px 0 0;display:grid;gap:14px}
.testi blockquote{border-left:3px solid var(--seal);padding:4px 0 4px 18px;font-family:var(--disp);font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.testi cite{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-style:normal}
.syl{margin-top:14px;border-top:1px solid var(--rule)}
.syl__row{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.syl__n{font-family:var(--mono);font-size:12px;color:var(--seal)}
.syl__t{font-size:15.5px;color:var(--ink)}
.ww-fineprint p{font-size:14.5px;line-height:1.7;color:var(--ink-soft);max-width:64ch;margin:10px 0}
.ww-fineprint h2{margin-top:34px}
.ww-back{margin:clamp(44px,7vw,70px) 0 90px;font-family:var(--mono);font-size:12.5px}
.ww-back a{color:var(--ink-soft)}
.ww-back a:hover{color:var(--seal)}

/* ── correspondence: a warm always-open invitation, then a printed directory ── */
/* the invitation — the real "say hi", foregrounded (no pitch, no box) */
.post{max-width:60ch;margin:6px auto 0;text-align:center}
.post__body{font-size:clamp(16px,1.95vw,19px);line-height:1.62;color:var(--ink-soft);margin:0 auto 28px}
.post__cta{display:inline-flex;flex-direction:column;align-items:center;gap:5px;
  padding:4px 6px 11px;border-bottom:2px solid var(--seal);transition:.18s var(--ease)}
.post__cta-k{font-family:var(--disp);font-weight:600;font-size:clamp(23px,3.6vw,32px);letter-spacing:-.015em;color:var(--ink)}
.post__cta-addr{font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--seal)}
.post__arrow{display:inline-block;transition:transform .18s var(--ease)}
.post__cta:hover{border-color:var(--seal-deep);background:linear-gradient(180deg,transparent,rgba(178,58,36,.06))}
.post__cta:hover .post__cta-addr{color:var(--seal-deep)}
.post__cta:hover .post__arrow{transform:translateX(4px)}

/* the specific asks — a ruled contents-index, not floaty cards */
.dir{max-width:680px;margin:clamp(40px,7vh,72px) auto 0;text-align:left}
.dir__lead{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);text-align:center;margin-bottom:12px}
.dir__row{border-top:1px solid var(--rule)}
.dir__row:last-child{border-bottom:1px solid var(--rule)}
.dir__row summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;
  padding:16px 4px;transition:padding .18s var(--ease),background .18s var(--ease)}
.dir__row summary::-webkit-details-marker{display:none}
.dir__row summary:hover{padding-left:12px;background:linear-gradient(90deg,rgba(178,58,36,.06),transparent 78%)}
.dir__row summary::after{content:"+";font-family:var(--mono);font-size:16px;color:var(--seal);flex:none;transition:transform .2s var(--ease)}
.dir__row[open] summary::after{transform:rotate(45deg)}
.dir__k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--seal);min-width:96px;flex:none}
.dir__t{font-family:var(--disp);font-weight:600;font-size:clamp(17px,2.2vw,20px);letter-spacing:-.01em;color:var(--ink)}
.dir__row summary:hover .dir__t{color:var(--seal-deep)}
.dir__dots{flex:1 1 24px;min-width:16px;border-bottom:1px dotted var(--ink-faint);transform:translateY(-4px);opacity:.55}
.dir__sub{flex:1 1 100%;order:5;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-faint);padding-left:106px}
.dir__body{padding:0 4px 20px 106px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.dir__body p{max-width:52ch}
.dir__body .cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:13px}
.hi__lanes{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.hi__lanes a{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:9px 14px;border:1px solid var(--rule);
  color:var(--ink-soft);transition:.16s var(--ease)}
.hi__lanes a:hover{border-color:var(--seal);color:var(--seal)}
@media(max-width:600px){
  .dir__k{flex:1 1 100%;order:-1;min-width:0}
  .dir__dots{display:none}
  .dir__sub{padding-left:0}
  .dir__body{padding-left:4px}
}

/* ── landing PeakCharts card is a real screenshot now ── */
.chart--shot{display:block}
.chart__shot{display:block}
.chart__shot img{width:100%;height:auto;display:block;border-radius:4px;border:1px solid var(--rule)}

/* lane cards on the consult hub are links now */
a.lane{text-decoration:none;transition:border-color .18s var(--ease),transform .18s var(--ease)}
a.lane:hover{border-color:var(--seal);transform:translateY(-2px)}
a.lane .more{margin-top:auto;padding-top:10px}

/* dreams note (the monthly-calendar context line) */
.dreams__note{font-family:var(--disp);font-size:clamp(15px,1.8vw,18px);line-height:1.55;color:var(--ink-soft);max-width:56ch;margin:-6px 0 18px}
.dreams__note a{color:var(--seal);border-bottom:1px solid rgba(178,58,36,.35)}