/* The Human Variable — typography-first, paper-feel, zero-JS-required.
   One serif family carries the whole design. Restraint is the aesthetic.
   The intersection of past and future: a printer's-mark monogram, quietly alive. */

/* ---- Fonts: self-hosted, font-display:optional for CLS 0 ---- */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal; font-weight: 380 620; font-display: optional;
  src: url("fonts/source-serif-4.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic; font-weight: 380 620; font-display: optional;
  src: url("fonts/source-serif-4-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Paper Fallback";
  src: local("Georgia"), local("Times New Roman"), local("serif");
  size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

:root {
  --paper:      #f7f2e7;
  --paper-edge: #efe8d8;
  --ink:        #262019;
  --ink-soft:   #5c5344;
  --ink-faint:  #726750;   /* AA-compliant on paper (4.99:1) */
  --rule:       #ddd3bd;
  --accent:     #7a3b23;
  --measure:    34rem;
  --gap:        1.7rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Source Serif 4", "Paper Fallback", Georgia, serif;
  font-size: 1.19rem; line-height: 1.62; font-weight: 400;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  font-feature-settings: "onum" 1, "kern" 1;
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: .5rem; top: .5rem; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.35rem; }
.page { padding-bottom: 4rem; }

/* ---- Chapter masthead: identity only, borderless for a cleaner top ---- */
.masthead { margin-bottom: 2.4rem; }
.masthead .wrap { padding-top: 1.05rem; padding-bottom: 1.05rem; }
.wordmark {
  font-size: .96rem; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 600; color: var(--ink); text-decoration: none;
}
.wordmark:hover { color: var(--accent); }

a { color: inherit; text-underline-offset: .14em; text-decoration-thickness: from-font; }
a:hover { color: var(--accent); }

/* ---- Headings ---- */
h1, h2, h3 { font-weight: 600; line-height: 1.14; letter-spacing: -0.01em; }
.chapter-eyebrow { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .9rem; }
h1.title { font-size: clamp(2.15rem, 6.2vw, 3.15rem); margin: 0 0 .5rem; font-weight: 620; }
.dek { font-style: italic; color: var(--ink-soft); font-size: 1.18rem; line-height: 1.5; margin: 0 0 2.4rem; max-width: 30rem; }
h2 { font-size: 1.5rem; margin: 2.8rem 0 .2rem; }
h3 { font-size: 1.18rem; margin: 2.1rem 0 .1rem; color: var(--ink-soft); }

/* ---- Prose ---- */
.prose > p { margin: 0 0 var(--gap); }
.prose > p:first-of-type { margin-top: .4rem; }
.prose strong { font-weight: 620; }
.prose > p.lede { font-size: 1.28rem; line-height: 1.5; }
.brk { border: 0; text-align: center; margin: 2.4rem 0; }
.brk::before { content: "\2042"; color: var(--ink-faint); font-size: 1.3rem; letter-spacing: .4em; }
/* content links (e.g. the author's X in the afterword): clearly a link, on-brand, never blue */
.prose a[href^="http"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: .18em; }
.prose a[href^="http"]:hover { color: var(--ink); }

/* ---- Sidenotes: a margin number; the note reveals on hover or click, with a fade.
        Pure CSS. Readable and reachable with JS disabled; the note stays in the DOM. ---- */
.snref { font-size: .72em; line-height: 0; vertical-align: super; text-decoration: none; color: var(--accent); padding: 0 .08em; font-style: normal; }
.snref:hover { text-decoration: underline; }

.sidenote { font-size: .82rem; line-height: 1.45; color: var(--ink-faint); margin: .55rem 0; }
.sidenote .mark {
  display: inline-block; width: 1.5rem; height: 1.5rem; line-height: 1.42rem; text-align: center;
  font-size: .74rem; color: var(--accent); border: 1px solid var(--rule); border-radius: 50%;
  background: var(--paper); cursor: help; transition: border-color .25s ease, background .25s ease;
}
.sidenote:hover .mark, .sidenote:target .mark { border-color: var(--accent); }
.sidenote .note {
  display: block; overflow: hidden; max-height: 0; opacity: 0;
  transition: opacity .35s ease, max-height .4s ease;
}
.sidenote:hover .note, .sidenote:target .note {
  max-height: 44em; opacity: 1; margin-top: .45rem;
}
.sidenote .n { color: var(--ink-soft); }
.sidenote .ret { color: var(--ink-soft); text-decoration: none; }
.sidenote.flag .mark { border-color: var(--accent); color: var(--accent); }
.sidenote.flag .tag { display: inline-block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-right: .35rem; }

@media (min-width: 1000px) {
  .sidenote {
    float: right; clear: right; width: 15.5rem; margin-right: -18.5rem; margin-top: 0; margin-bottom: .5rem;
    position: relative;
  }
}

/* ---- Forward / back ---- */
.pager { margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 1rem; }
.pager a { text-decoration: none; max-width: 47%; }
.pager .dir { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .25rem; }
.pager .ttl { color: var(--ink); font-size: 1.02rem; }
.pager a:hover .ttl { color: var(--accent); }
.pager .movement { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: .2rem; }
.pager .next { text-align: right; margin-left: auto; }

/* ---- Footer ---- */
.foot { border-top: 1px solid var(--rule); margin-top: 3.5rem; }
.foot .wrap { padding-top: 1.2rem; padding-bottom: 2.4rem; }
.foot .byline { color: var(--ink-soft); font-size: .78rem; letter-spacing: .01em; margin: 0; }
.foot .byline a { color: inherit; text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: .16em; }
.foot .byline a:hover { color: var(--accent); }
.foot .thanks { color: var(--ink-faint); font-size: .72rem; font-style: italic; line-height: 1.5; margin: .55rem 0 0; max-width: 30rem; }
.foot .rights { color: var(--ink-faint); font-size: .68rem; line-height: 1.45; margin: .5rem 0 0; max-width: 32rem; }

/* ---- Landing: the entrance. Title + subtitle only; a click unfolds the movements. ---- */
.landing-body { display: flex; flex-direction: column; min-height: 100vh; }
.landing { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12vh 1.35rem 4rem; }
/* With JS the entrance opens centered and collapsed, then rises on click. Without JS
   the contents are simply shown, so the whole piece stays navigable. */
html.js .landing { padding-top: 40vh; transition: padding-top .65s cubic-bezier(.2,.72,.2,1); }
html.js .landing.is-open { padding-top: 11vh; }
.hero { max-width: 42rem; width: 100%; }

.landing-title { margin: 0; line-height: 1.04; letter-spacing: -0.015em; text-align: center; }
/* Title: one word per line, typed in on load — identical on every screen. */
.title-btn {
  position: relative; display: inline-block; font: inherit; font-size: clamp(3rem, 13vw, 5.2rem); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.02; white-space: pre-line; text-align: left;
  color: var(--ink); background: none; border: 0; padding: 0; margin: 0; cursor: default;
}
/* the ghost reserves the title's exact 3-line space so the typing never shifts layout */
.t-ghost { visibility: hidden; }
.t-type { position: absolute; left: 0; top: 0; width: 100%; white-space: pre-line; }
.title-btn.typing .t-type::after { content: ""; display: inline-block; width: .05em; height: 1em; margin-left: .04em; background: var(--accent); vertical-align: -.08em; animation: caret .8s steps(1, end) infinite; }
@keyframes caret { 50% { opacity: 0; } }
html.js .title-btn { cursor: pointer; transition: font-size .55s cubic-bezier(.2,.72,.2,1), color .3s ease; }
html.js .title-btn:hover { color: var(--accent); }
html.js .landing.is-open .title-btn { font-size: clamp(1.7rem, 5vw, 2.4rem); }

.landing-frame { font-size: clamp(1.14rem, 2.5vw, 1.4rem); line-height: 1.5; color: var(--ink-soft); margin: 1.8rem auto 0; max-width: 30rem; }

/* Click affordance: a quiet "Contents" cue with a bobbing chevron. JS only. */
.reveal-cue { display: none; }
html.js .reveal-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 2.2rem;
  background: none; border: 0; cursor: pointer; color: var(--ink-faint); font: inherit;
  transition: color .3s ease, opacity .4s ease;
}
html.js .reveal-cue .cue-label { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; }
html.js .reveal-cue .cue-chev { display: block; width: 1rem; color: var(--accent); }
html.js .reveal-cue .cue-chev svg { display: block; width: 100%; height: auto; }
html.js .reveal-cue:hover { color: var(--accent); }
/* the cue persists once open, flipping to a "Close" control so there is always a way out */
html.js .landing.is-open .reveal-cue .cue-chev { transform: rotate(180deg); animation: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .landing:not(.is-open) .reveal-cue .cue-chev { animation: cue-bob 1.7s ease-in-out infinite; }
}
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* Contents: an index of the whole piece, unfolding along a spine. Visible with JS off. */
.contents { position: relative; width: 100%; max-width: 27rem; margin: 2.6rem auto 0; text-align: left; }
html.js .contents {
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; pointer-events: none;
  transition: max-height .7s cubic-bezier(.2,.72,.2,1), opacity .55s ease, margin-top .7s ease;
}
html.js .landing.is-open .contents { max-height: 66rem; opacity: 1; margin-top: 3rem; pointer-events: auto; }
.contents::before { content: ""; position: absolute; left: .5rem; top: .7rem; bottom: .7rem; width: 1px; background: var(--rule); }
.c-movements { list-style: none; margin: 0; padding: 0; }

.c-node, .c-mv-head { position: relative; display: block; width: 100%; padding: .55rem 0 .55rem 1.9rem; text-decoration: none; text-align: left; }
.c-node::before, .c-mv-head::before {
  content: ""; position: absolute; left: .18rem; top: 1.05rem; width: .66rem; height: .66rem;
  border-radius: 50%; background: var(--paper); border: 1.5px solid var(--rule);
  transition: border-color .25s ease, background .25s ease;
}
.c-start::before { border-color: var(--accent); background: var(--accent); }
.c-node:hover::before, .c-mv:hover .c-mv-head::before, .c-mv.open .c-mv-head::before { border-color: var(--accent); }

.c-kicker { display: block; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .12rem; }
.c-heading { display: block; font-size: 1.12rem; color: var(--ink); line-height: 1.2; }
.c-node:hover .c-heading { color: var(--accent); }

.c-mv-head { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; display: flex; align-items: baseline; gap: .7rem; }
.c-mv-head .c-num { font-size: .72rem; letter-spacing: .16em; color: var(--ink-faint); min-width: 1.2rem; }
.c-mv-head .c-name { font-size: 1.12rem; color: var(--ink); }
.c-mv:hover .c-name, .c-mv.open .c-name, .c-mv:hover .c-num, .c-mv.open .c-num { color: var(--accent); }
.c-caret { margin-left: auto; width: .7rem; color: var(--ink-faint); transition: transform .35s ease, color .3s ease; }
.c-caret svg { display: block; width: 100%; height: auto; }
.c-mv.open .c-caret { transform: rotate(180deg); color: var(--accent); }

.c-chapters { list-style: none; margin: 0; padding: 0 0 .3rem 1.9rem; }
html.js .c-chapters { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .35s ease; }
html.js .c-mv.open .c-chapters { max-height: 16rem; opacity: 1; }
.c-ch { display: block; padding: .32rem 0; font-size: .96rem; color: var(--ink-soft); text-decoration: none; }
.c-ch:hover { color: var(--accent); }
.c-ch::before { content: ""; display: inline-block; width: .6rem; height: 1px; background: var(--rule); vertical-align: middle; margin-right: .55rem; }

/* staggered entrance of each stop as the contents opens */
@media (prefers-reduced-motion: no-preference) {
  html.js .contents .c-start, html.js .contents .c-mv, html.js .contents .c-end {
    opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease;
  }
  html.js .landing.is-open .contents .c-start { opacity: 1; transform: none; transition-delay: .12s; }
  html.js .landing.is-open .contents .c-mv:nth-child(1) { opacity: 1; transform: none; transition-delay: .2s; }
  html.js .landing.is-open .contents .c-mv:nth-child(2) { opacity: 1; transform: none; transition-delay: .28s; }
  html.js .landing.is-open .contents .c-mv:nth-child(3) { opacity: 1; transform: none; transition-delay: .36s; }
  html.js .landing.is-open .contents .c-end { opacity: 1; transform: none; transition-delay: .44s; }
}

/* Jump-ahead modal: a quiet, human ask, faded in. JS only; without it the links just go. */
.jump-modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.jump-modal.show { display: flex; }
.jump-backdrop { position: absolute; inset: 0; background: rgba(20,16,10,.42); }
.jump-card { position: relative; max-width: 26rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 2.2rem 1.85rem 1.9rem; box-shadow: 0 18px 50px rgba(20,16,10,.22); }
.jump-x { position: absolute; top: .35rem; right: .5rem; width: 2rem; height: 2rem; line-height: 1; font-size: 1.55rem; background: none; border: 0; color: var(--ink-faint); cursor: pointer; border-radius: 3px; }
.jump-x:hover { color: var(--accent); }
.jump-msg { font-size: 1.18rem; font-style: italic; line-height: 1.5; color: var(--ink); margin: 0 0 1.6rem; }
.jump-actions { display: flex; flex-direction: column; gap: .75rem; }
.jump-begin { text-align: center; text-decoration: none; background: var(--ink); color: var(--paper); padding: .68rem 1rem; border-radius: 3px; font-size: .98rem; }
.jump-begin:hover { background: var(--accent); color: var(--paper); }
.jump-go { text-align: center; background: none; border: 0; color: var(--ink-faint); font: inherit; font-size: .9rem; cursor: pointer; padding: .35rem; text-decoration: underline; text-underline-offset: .16em; }
.jump-go:hover { color: var(--accent); }

/* Landing footer: author and thanks live only here, centered at the bottom. */
.landing-foot { border-top: 0; }
.landing-foot .wrap { text-align: center; }
.landing-foot .thanks { margin: 1.5rem auto 0; }
.landing-foot .rights { margin: 1rem auto 0; }

/* ---- Focus, motion, print ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }

/* Chapters arrive with a soft fade-up; the modal fades in over a dimmed page. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .page article { animation: fade-rise .55s ease-out both; }
  .jump-modal.show .jump-card { animation: modal-in .35s ease-out both; }
  .jump-modal.show .jump-backdrop { animation: fade-in .3s ease-out both; }
}
@keyframes fade-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.js .landing, html.js .title-btn, html.js .contents,
  .sidenote .note, .sidenote .mark { transition: none; }
  .page article { animation: none; }
}

@media print {
  .masthead, .pager, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sidenote { float: none; width: auto; margin: .5rem 0; }
  .sidenote .note { max-height: none; opacity: 1; }
  .sidenote .mark { display: none; }
}