/* ════════════════════════════════════════════════════════════════════════════
   TWIN-SPARROW — ARCHIVE ENTRY (shared reading-page stylesheet)
   Linked by every entry-*.html reading page. Aurelian tokens, fonts, header,
   theme toggle, article measure, and footer — one source of truth, no drift.
   Paired with entry.js. The archive index (archive.html) and landing (index.html)
   keep their own styles; this file is scoped to reading entries only.
   ════════════════════════════════════════════════════════════════════════════ */

/* display face uses font-display:block — the big title waits for Parabole instead of flashing the serif fallback (the preload in each page keeps the wait imperceptible) */
@font-face{font-family:'Parabole Trial';font-weight:400;font-display:block;src:url('https://framerusercontent.com/assets/0y4e28KwuMuJgY5cxdBv6l6Fw.woff2') format('woff2')}
@font-face{font-family:'Parabole Trial';font-weight:500;font-display:block;src:url('https://framerusercontent.com/assets/dQxMkOZ2GHXTd4jTaZ8Hj8N0.woff2') format('woff2')}
@font-face{font-family:'Decima Mono Pro';font-weight:400;font-display:swap;src:url('https://framerusercontent.com/assets/EsB0jGCUCPYAB4Nf3JqZjMvX8I.woff2') format('woff2')}

:root{
  --grey-hero:#6C6B67; --grey-mid:#B3B3B3; --paper:#EDEDEC; --beige:#F4F2EC;
  --dark:#0A0A0A; --dark-2:#161616;
  --ink:#2C2B2B;
  --ink-70:rgba(44,43,43,.70); --ink-55:rgba(44,43,43,.55); --ink-40:rgba(44,43,43,.40);
  --ink-15:rgba(44,43,43,.15); --ink-line:rgba(44,43,43,.055);
  --bone:#F0EEE8;
  --bone-70:rgba(240,238,232,.70); --bone-55:rgba(240,238,232,.55);
  --bone-40:rgba(240,238,232,.40); --bone-line:rgba(240,238,232,.055);
  --sage:#AFB9A7; --sage-deep:#8E9A85; --sage-ink:#23261F;
  --display:'Parabole Trial','Gloock','Times New Roman',serif;
  --serif:'Shippori Mincho','Noto Serif JP',Georgia,serif;
  --body:'Zen Kaku Gothic New',system-ui,-apple-system,sans-serif;
  --mono:'Decima Mono Pro','IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(20px,5vw,64px); --max:1280px; --section-y:clamp(88px,14vh,190px);
  --dur-micro:160ms; --dur-ui:240ms; --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ── Dark reading theme (reading page only) — remap the paper tokens to a warm near-black; sage accents already read on both surfaces ── */
:root[data-theme="dark"]{
  --paper:#0E0D0C;
  --ink:#EDEBE4;
  --ink-70:rgba(237,235,228,.72); --ink-55:rgba(237,235,228,.55); --ink-40:rgba(237,235,228,.42);
  --ink-15:rgba(237,235,228,.16); --ink-line:rgba(237,235,228,.08);
}
/* smooth cross-fade only while switching themes — never during scroll reveals */
html.theming, html.theming *{transition:background-color .45s ease, color .45s ease, border-color .45s ease, text-decoration-color .45s ease !important}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1;letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.wrap{width:min(100% - (var(--pad)*2),var(--max));margin-inline:auto;position:relative;z-index:2}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.section{padding-block:var(--section-y)}

/* ═══ Logo / header ═══ */
.logo{display:inline-flex;align-items:center;gap:12px}
.logo .logo-bird{height:32px;width:auto;display:block}
.foot .logo-mark .logo-bird{filter:brightness(1.4)}       /* stays light on the dark footer */

.hdr{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--paper);color:var(--ink);border-bottom:0.5px solid transparent;transition:border-color var(--dur-ui) ease}
.hdr.scrolled{border-bottom-color:var(--ink-line)}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.nav{display:flex;align-items:center;margin-left:auto}
.nav .links{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.nav .links a{position:relative;opacity:.5;transition:opacity var(--dur-micro) ease}
.nav .links a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-ui) var(--ease-out)}
.nav .links a:hover{opacity:1}
.nav .links a.is-current{opacity:1}
.nav .links a.is-current::after{transform:scaleX(1);opacity:.9}
@media(hover:hover){.nav .links a:hover::after{transform:scaleX(1)}}
.nav .links .slash{opacity:.34}
@media(max-width:560px){
  .hdr-inner{height:60px}
  .nav .links{gap:10px;font-size:10px}
}

/* ═══ Theme toggle (reading page only) — orb + label, sage on hover ═══ */
.theme-toggle{position:relative;display:inline-flex;align-items:center;gap:0;padding:6px 2px;margin:0;background:none;border:0;cursor:pointer;color:var(--ink-40);-webkit-tap-highlight-color:transparent;transition:color var(--dur-micro) ease}
.tt-orb{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--ink-15);display:inline-flex;align-items:center;justify-content:center;transition:border-color var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out)}
.tt-orb svg{width:16px;height:16px;color:var(--sage-deep);transition:color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out)}
.tt-icon{display:none}
.tt-sun{display:block}
:root[data-theme="dark"] .tt-sun{display:none}
:root[data-theme="dark"] .tt-moon{display:block}
/* label is a quiet italic whisper — revealed only on hover of the orb */
.tt-label{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-5px);white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:.01em;color:var(--ink-55);opacity:0;pointer-events:none;transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out)}
.tt-label::after{content:"return to the dark"}
:root[data-theme="dark"] .tt-label::after{content:"let there be light"}
.theme-toggle:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px;border-radius:6px}
@media(hover:hover){
  .theme-toggle:hover{color:var(--sage-ink)}
  .theme-toggle:hover .tt-orb{border-color:var(--sage-deep);transform:rotate(-15deg)}
  .theme-toggle:hover .tt-orb svg{color:var(--sage-deep);transform:rotate(15deg)}
  .theme-toggle:hover .tt-label,.theme-toggle:focus-visible .tt-label{opacity:1;transform:translateY(-50%) translateX(0)}
  :root[data-theme="dark"] .theme-toggle:hover{color:var(--sage)}
  :root[data-theme="dark"] .art-body a:hover{color:var(--sage)}
}
@media(max-width:560px){
  .tt-orb{width:30px;height:30px}
  .tt-label{font-size:12px}
}

/* ═══ Reveal primitives ═══ */
.js [data-rise]{opacity:0;transform:translateY(40px)}
.is-static [data-rise]{opacity:1!important;transform:none!important}

/* ═══ Article ═══ */
main{padding-top:70px}
.article{width:min(100%,64ch);margin-inline:auto}
.back{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-40);display:inline-block;margin-bottom:clamp(40px,6vh,72px);transition:color var(--dur-micro) ease}
.back:hover{color:var(--sage-deep)}
.art-head{margin-bottom:clamp(38px,5.5vh,64px)}
.art-head .eyebrow{color:var(--ink-40)}
.art-title{font-size:clamp(2.1rem,5.6vw,3.5rem);letter-spacing:-.025em;line-height:1.04;margin-top:16px}
.art-body{font-family:var(--serif);font-size:clamp(1.06rem,1.5vw,1.2rem);line-height:1.8;color:var(--ink)}
.art-body p+p{margin-top:1.5em}
.art-body .lede{font-size:1.12em;line-height:1.7;color:var(--ink)}
.art-body .who{font-variant:small-caps;letter-spacing:.02em}
/* minimal source links — ink text, hairline underline, warms to sage on hover */
.art-body a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--ink-40);text-underline-offset:2.5px;transition:text-decoration-color var(--dur-micro) ease,color var(--dur-micro) ease}
@media(hover:hover){.art-body a:hover{text-decoration-color:var(--sage-deep);color:var(--sage-ink)}}
.art-close{margin-top:2.4em;padding-top:1.4em;border-top:0.5px solid var(--sage-deep);font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.18;letter-spacing:-.01em;color:var(--ink)}
.art-foot{margin-top:clamp(48px,8vh,84px);padding-top:26px;border-top:0.5px solid var(--ink-line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40)}
.art-foot a{color:var(--ink-40);transition:color var(--dur-micro) ease}
.art-foot a:hover{color:var(--sage-deep)}

/* ═══ Footer ═══ */
.foot{background:var(--dark);color:var(--bone);border-top:0.5px solid var(--bone-line)}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;padding-block:56px;align-items:center}
.foot .logo-mark{display:inline-flex;align-items:center}
.foot .logo-mark .logo-bird{height:30px;opacity:.82;transition:opacity var(--dur-micro) ease,transform var(--dur-ui) var(--ease-out)}
.foot .logo-mark:hover .logo-bird{opacity:1;transform:translateY(-3px)}
.foot .clock{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--bone-40);transform:translateY(-7px)}
.foot .cols{display:flex;flex-wrap:wrap;gap:36px;transform:translateY(8px)}
.foot a.rep{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--bone-55);transition:color var(--dur-micro) ease}
.foot a.rep:hover{color:var(--sage)}
.foot .credit{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--bone-40);width:100%;border-top:0.5px solid var(--bone-line);padding-top:24px}
.foot .credit .rhine-link{color:var(--sage);transition:opacity var(--dur-micro) ease}
.foot .credit .rhine-link:hover{opacity:.78}
.foot .jp{color:var(--sage);opacity:.8}
/* minimal stacked footer on mobile — mascot, links (2-col), then meta */
@media(max-width:600px){
  .foot-inner{flex-direction:column;align-items:flex-start;gap:26px;padding-block:44px}
  .foot .logo-mark{order:1}
  .foot .cols{order:2;transform:none;display:grid;grid-template-columns:1fr 1fr;gap:15px 22px;width:100%}
  .foot .clock{order:3;transform:none}
  .foot .credit{order:4}
}

:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}