:root{ --paper:#ECEAE3; --page:#FCFBF7; --ink:#1C1B18; --ink-2:#6C675C; --rule:#D6D1C4; --accent:#4E5A6E; --accent-soft:rgba(78,90,110,.10); --serif:"Charter","Bitstream Charter","Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --measure:34ch; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif); font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased; overflow-x:hidden} /* faint paper grain over the whole ground */ body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .doc{position:relative;z-index:1;padding:0 20px 96px} .wrap{max-width:720px;margin:0 auto} /* reading pages stay a single narrow measure; everything else widens on desktop */ @media(min-width:900px){ body.home .wrap,body.wide .wrap{max-width:1080px} } a{color:inherit} ::selection{background:var(--accent-soft)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} /* 2026 native: smooth cross-fade between pages (ignored where unsupported) */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.4s} /* skip link + persistent site header */ .skip{position:absolute;left:12px;top:-52px;z-index:60;background:var(--accent); color:#F3F1EA;font-family:var(--sans);font-size:.85rem;padding:9px 15px; border-radius:7px;text-decoration:none;transition:top .2s} .skip:focus{top:12px} .topbar{position:sticky;top:0;z-index:30;background:var(--paper); border-bottom:1px solid var(--rule)} @supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .topbar{background:color-mix(in srgb,var(--paper) 80%,transparent); backdrop-filter:blur(9px) saturate(1.1);-webkit-backdrop-filter:blur(9px) saturate(1.1)} } .topbar-inner{max-width:1080px;margin:0 auto;padding:9px 20px;min-height:54px; display:flex;align-items:center;justify-content:space-between;gap:6px 18px;flex-wrap:wrap} .wordmark{font-family:var(--serif);font-weight:700;font-size:1.02rem; letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap} .topnav{display:flex;gap:2px;flex-wrap:wrap} .topnav a{font-family:var(--sans);font-size:.82rem;color:var(--ink-2); text-decoration:none;padding:6px 11px;border-radius:6px;white-space:nowrap; transition:color .2s,background .2s} .topnav a:hover{color:var(--ink);background:var(--accent-soft)} .topnav a[aria-current="page"]{color:var(--accent);font-weight:700} :target{scroll-margin-top:78px} .eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);font-weight:600;margin:0} header.mast{padding:48px 0 32px;border-bottom:1px solid var(--rule);margin-bottom:40px} h1{font-weight:700;font-size:clamp(2rem,5.4vw,3rem);line-height:1.06; letter-spacing:-.012em;text-wrap:balance;margin:.5rem 0 0} .lede{max-width:60ch;color:var(--ink-2);font-size:1.05rem;margin:1rem 0 0} /* reading-progress bar (chapter pages) */ .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:20;background:transparent} .progress>i{display:block;height:100%;width:0;background:var(--accent); transition:width .08s linear} /* scroll reveal — only armed once JS marks */ .js .reveal{opacity:0;transform:translateY(16px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .js .reveal.in{opacity:1;transform:none} /* ---- the cover / home hero ---- */ .hero{min-height:88vh;min-height:88svh;display:flex;flex-direction:column; justify-content:center;align-items:center;text-align:center;padding:56px 0 40px; position:relative} .hero .kicker{font-family:var(--sans);font-size:.72rem;letter-spacing:.28em; text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 26px} .hero h1{font-size:clamp(2.6rem,10vw,5.4rem);line-height:.98;margin:0; letter-spacing:-.02em;max-width:16ch} .hero .sub{font-size:clamp(1.05rem,2.6vw,1.35rem);color:var(--ink-2); font-style:italic;margin:22px 0 0;max-width:34ch} .hero .born{font-family:var(--sans);font-size:.74rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-2);margin:30px 0 0} .hero .born b{color:var(--accent);font-weight:700} .hero .epi{margin:44px auto 0;max-width:30ch;position:relative;padding-top:30px} .hero .epi::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:44px;height:1px;background:var(--rule)} .hero .epi p{font-size:clamp(1.25rem,3.4vw,1.7rem);line-height:1.32;margin:0; text-wrap:balance} .hero .epi cite{display:block;font-family:var(--sans);font-style:normal; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2); margin-top:18px} .scrollcue{margin-top:52px;font-family:var(--sans);font-size:.7rem; letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2); display:inline-flex;flex-direction:column;align-items:center;gap:10px; text-decoration:none} .scrollcue .arrow{width:1px;height:34px;background:var(--rule);position:relative; overflow:hidden} .scrollcue .arrow::after{content:"";position:absolute;top:-60%;left:0;width:100%; height:60%;background:var(--accent);animation:cue 2.2s ease-in-out infinite} @keyframes cue{0%{top:-60%}60%,100%{top:100%}} /* the cover settles in on load, one line at a time */ @media(prefers-reduced-motion:no-preference){ .home .hero>*{opacity:0;animation:heroRise .9s cubic-bezier(.2,.7,.2,1) forwards} .home .hero .kicker{animation-delay:.10s} .home .hero h1{animation-delay:.22s} .home .hero .sub{animation-delay:.40s} .home .hero .born{animation-delay:.54s} .home .hero .epi{animation-delay:.68s} .home .hero .scrollcue{animation-delay:.86s} } @keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* and drifts gently as you scroll past it (2026 scroll-driven, no JS) */ @supports(animation-timeline:scroll()){ @media(prefers-reduced-motion:no-preference){ .home .hero{animation:heroDrift linear both;animation-timeline:scroll(root); animation-range:0 78vh} } } @keyframes heroDrift{to{transform:translateY(26px);opacity:.5}} /* section framing on the home + journey pages */ .band{padding:72px 0;border-top:1px solid var(--rule)} .band-label{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 6px} .band h2{font-size:clamp(1.7rem,4.4vw,2.4rem);line-height:1.08;margin:0 0 8px; letter-spacing:-.01em;text-wrap:balance} .band .intro{color:var(--ink-2);max-width:52ch;margin:0 0 30px} /* home entry cards — stacked on mobile, a 3-up row on desktop */ .entries{display:grid;gap:16px} @media(min-width:760px){.entries{grid-template-columns:repeat(3,1fr);gap:22px}} .entry{display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden; background:var(--page);border:1px solid var(--rule);border-radius:10px; padding:28px 28px 24px;text-decoration:none; transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s} .entry::after{content:"";position:absolute;left:0;top:0;height:3px;width:0; background:var(--accent);transition:width .45s cubic-bezier(.2,.7,.2,1)} .entry:hover{transform:translateY(-4px);border-color:var(--accent); box-shadow:0 18px 42px -26px rgba(28,27,24,.55)} .entry:hover::after{width:100%} .entry .idx{font-family:var(--sans);font-size:.78rem;font-weight:700; color:var(--accent);letter-spacing:.1em;margin-bottom:4px} .entry h3{margin:0;font-size:1.4rem;line-height:1.12} .entry p{margin:0;color:var(--ink-2);font-size:.96rem;flex:1} .entry .go{margin-top:16px;font-family:var(--sans);color:var(--accent); font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600} .entry:hover .go{text-decoration:underline;text-underline-offset:3px} /* "his voice" feature */ .voice{background:var(--accent);color:#F3F1EA;border-radius:10px; padding:clamp(30px,6vw,52px);display:grid;gap:8px;text-decoration:none; position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1)} .voice:hover{transform:translateY(-3px)} .voice .band-label{color:rgba(243,241,234,.72)} .voice h2{color:#fff;margin:0} .voice p{margin:.5rem 0 0;color:rgba(243,241,234,.82);max-width:46ch} .voice .play{margin-top:20px;font-family:var(--sans);font-size:.8rem; letter-spacing:.08em;text-transform:uppercase;display:inline-flex; align-items:center;gap:12px;font-weight:600} .voice .play .disc{width:34px;height:34px;border-radius:50%; border:1px solid rgba(243,241,234,.5);display:inline-flex;align-items:center; justify-content:center} .voice .play .disc::before{content:"";border-left:9px solid #F3F1EA; border-top:6px solid transparent;border-bottom:6px solid transparent; margin-left:3px} /* download strip */ .download{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px; justify-content:space-between;background:var(--page);border:1px solid var(--rule); border-radius:8px;padding:22px 26px} .download .t{margin:0;font-size:1.05rem} .download .t span{display:block;color:var(--ink-2);font-size:.9rem} .btn{font-family:var(--sans);font-size:.82rem;letter-spacing:.06em;font-weight:600; text-decoration:none;color:#F3F1EA;background:var(--accent);border-radius:999px; padding:11px 22px;white-space:nowrap;transition:transform .3s,opacity .3s} .btn:hover{transform:translateY(-2px)} /* ---- the journey timeline ---- */ .timeline{position:relative;margin:8px 0 0;padding-left:34px} .timeline .tl-track{position:absolute;left:7px;top:8px;bottom:8px;width:2px; background:var(--rule)} .timeline .tl-progress{position:absolute;left:7px;top:8px;width:2px;height:0; background:var(--accent)} .tl-item{position:relative;padding:0 0 46px} .tl-item:last-child{padding-bottom:4px} .tl-item .tl-dot{position:absolute;left:-34px;top:4px;width:16px;height:16px; border-radius:50%;background:var(--page);border:2px solid var(--accent); box-shadow:0 0 0 5px var(--paper)} .tl-year{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 4px} .tl-item h3{margin:0 0 .35rem;font-size:1.5rem;line-height:1.1} .tl-item p{margin:0;color:var(--ink-2);max-width:54ch} .tl-item .tl-read{display:inline-block;margin-top:12px;font-family:var(--sans); font-size:.78rem;letter-spacing:.04em;color:var(--accent);text-decoration:none; font-weight:600} .tl-item .tl-read:hover{text-decoration:underline;text-underline-offset:3px} /* the journey route — a line that draws his crossings between two latitudes */ .route{margin:0 0 44px} .route svg{width:100%;height:auto;max-width:640px;display:block;margin:0 auto;overflow:visible} .route .guide{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 6} .route .wave{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round; stroke-linejoin:round;stroke-dashoffset:0} .js .route .wave{stroke-dasharray:1;stroke-dashoffset:1} .js .route.in .wave{animation:draw 2.1s cubic-bezier(.45,0,.15,1) forwards} @keyframes draw{to{stroke-dashoffset:0}} .route .node{fill:var(--page);stroke:var(--accent);stroke-width:2.5} .route .node.end{fill:var(--accent)} .route .place{fill:var(--ink-2);font-family:var(--sans);font-size:12px; font-weight:600;letter-spacing:.12em;text-transform:uppercase} .route .yr{fill:var(--accent);font-family:var(--sans);font-size:13px;font-weight:700; letter-spacing:.06em} .route figcaption{text-align:center;font-family:var(--sans);font-size:.82rem; color:var(--ink-2);margin-top:14px;max-width:52ch;margin-inline:auto} /* contents + session lists */ .toc{list-style:none;margin:0;padding:0} .toc li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule); align-items:baseline;transition:padding-left .25s} .toc li:hover{padding-left:6px} .toc .n{font-family:var(--sans);font-size:.78rem;color:var(--accent); font-weight:700;min-width:2.4em;text-align:right;flex-shrink:0} .toc a{text-decoration:none;font-size:1.08rem} .toc a:hover{text-decoration:underline;text-decoration-color:var(--rule); text-underline-offset:3px} .toc .chips{margin-left:auto} .chips{display:flex;gap:6px;flex-shrink:0} .chip{font-family:var(--sans);font-size:.66rem;letter-spacing:.06em; text-transform:uppercase;border:1px solid var(--rule);border-radius:999px; padding:2px 9px;color:var(--ink-2)} .chip.audio{border-color:var(--accent);color:var(--accent)} /* the book page sheet */ .sheet{background:var(--page);border:1px solid var(--rule);border-radius:8px; padding:clamp(26px,6vw,68px);box-shadow:0 30px 60px -50px rgba(28,27,24,.55)} .sheet p{max-width:65ch;text-wrap:pretty} .ch-progress{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-2);margin:0 0 26px} .chapter .headnote{color:var(--ink-2);font-size:1rem;margin-bottom:.5em} .chapter .body>p:first-of-type::first-letter{float:left;font-size:3.4em; line-height:.82;padding:.05em .1em 0 0;font-weight:700;color:var(--accent)} hr{border:none;border-top:1px solid var(--rule);margin:2.2em auto;width:34%} blockquote{margin:1.2em 0 1.2em 1.2em;color:var(--ink-2);font-style:italic} .sheet h2,.sheet h3{letter-spacing:-.01em} /* a hand-picked pull-quote, set large mid-chapter */ .pull{margin:2.8em 0;text-align:center;padding:0} .pull::before{content:"C";display:block;font-family:var(--serif); font-size:3.4rem;line-height:.5;color:var(--accent);opacity:.45;margin:.35em 0 .2em} .pull p{font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.26;font-style:italic; color:var(--ink);margin:0 auto;max-width:24ch;text-wrap:balance;max-inline-size:24ch} /* transcripts */ .utt{margin:0 0 1em} .spk{font-family:var(--sans);font-size:.68rem;letter-spacing:.1em; text-transform:uppercase;color:var(--accent);font-weight:700;display:block} audio{width:100%;margin:.4em 0 1em} .audiocard{background:var(--page);border:1px solid var(--rule);border-radius:8px; padding:22px 24px;margin:0 0 8px} .audiocard .band-label{margin-bottom:10px} /* section heads + in-page jumps on session pages */ .sechead{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);font-weight:600; border-bottom:1px solid var(--rule);padding-bottom:.5em;margin:2.6em 0 1.2em} .jump{font-family:var(--sans);font-size:.85rem;margin:-16px 0 32px;padding:0} .jump a{color:var(--ink-2);text-decoration:none;margin-right:16px} .jump a:hover{color:var(--ink)} .meta{font-family:var(--sans);font-size:.82rem;color:var(--ink-2);margin:.8rem 0 0} /* prev/next chapter nav: a quiet centred Contents link over two cards */ .chnav{margin-top:38px} .chnav .contents{display:block;text-align:center;font-family:var(--sans); font-size:.74rem;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);font-weight:600;text-decoration:none;margin:0 0 18px} .chnav .contents:hover{text-decoration:underline;text-underline-offset:4px} .chnav .pair{display:flex;flex-wrap:wrap;gap:14px} .chnav .pair a{flex:1 1 240px;max-width:calc(50% - 7px); display:flex;flex-direction:column;gap:4px;background:var(--page); border:1px solid var(--rule);border-radius:8px;padding:16px 20px; text-decoration:none;transition:border-color .3s,transform .3s,box-shadow .3s} .chnav .pair a:hover{border-color:var(--accent);transform:translateY(-2px); box-shadow:0 12px 28px -22px rgba(28,27,24,.5)} .chnav .pair .prev{margin-right:auto} .chnav .pair .next{margin-left:auto;text-align:right;align-items:flex-end} .chnav .dir{font-family:var(--sans);font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;color:var(--accent);font-weight:600} .chnav .ttl{font-size:1.05rem;line-height:1.2} @media(max-width:540px){.chnav .pair a{max-width:100%} .chnav .pair .next{text-align:left;align-items:flex-start}} footer.foot{margin-top:80px;padding-top:22px;border-top:1px solid var(--rule); font-family:var(--sans);font-size:.8rem;color:var(--ink-2); display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between} footer.foot nav a{color:var(--ink-2);text-decoration:none;margin-right:16px} footer.foot nav a:hover{color:var(--ink)} footer.foot .colophon{opacity:.85} /* ---- desktop layers: use the width instead of endless scrolling ---- */ /* Ordered/sequential lists (contents, sessions) stay a single top-to-bottom column on purpose — a paired two-column layout forces an awkward down-then-across scan. Only the timeline branches, and it still reads strictly top-to-bottom. */ @media(min-width:820px){ /* two-sided spine: cards alternate left/right down a centre line and fade in from their side as you scroll — the height is the point, it's a walk */ .timeline{padding-left:0} .timeline .tl-track,.timeline .tl-progress{left:50%;margin-left:-1px} .tl-item{width:calc(50% - 50px);background:var(--page);border:1px solid var(--rule); border-radius:12px;padding:26px 32px;margin-bottom:30px;overflow:hidden; box-shadow:0 24px 48px -44px rgba(28,27,24,.62)} .tl-item:nth-child(odd){margin-right:auto} /* left of the spine */ .tl-item:nth-child(even){margin-left:auto} /* right of the spine */ .tl-item .tl-dot{top:30px;box-shadow:0 0 0 5px var(--paper)} .tl-item:nth-child(odd) .tl-dot{left:auto;right:-58px} .tl-item:nth-child(even) .tl-dot{left:-58px} .tl-item::before{content:"";position:absolute;top:37px;width:36px;height:1px; background:var(--rule);z-index:0} .tl-item:nth-child(odd)::before{right:-40px} .tl-item:nth-child(even)::before{left:-40px} /* a faint year numeral behind each card */ .tl-item::after{content:attr(data-year);position:absolute;bottom:-.34em; font-family:var(--serif);font-weight:700;font-size:5rem;line-height:1; color:var(--accent);opacity:.06;pointer-events:none;z-index:0;letter-spacing:-.02em} .tl-item:nth-child(odd)::after{left:14px} .tl-item:nth-child(even)::after{right:14px} .tl-item>.tl-year,.tl-item>h3,.tl-item>p,.tl-item>.tl-read{position:relative;z-index:1} /* the reveal slides each card in from its own side of the spine */ .js .tl-item:nth-child(odd){transform:translateX(-26px)} .js .tl-item:nth-child(even){transform:translateX(26px)} .js .tl-item.in{transform:none} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important} .js .reveal{opacity:1!important;transform:none!important;transition:none!important} .js .route .wave{stroke-dashoffset:0!important} /* show the line, don't draw it */ .scrollcue .arrow::after{display:none} }