/* ========================================================================= THE LEDGER — a single path One paper. One spine down the middle. One thing at a time. Skinned by a class on : .path--decay or .path--potential ========================================================================= */ /* ── skins ─────────────────────────────────────────────────────────────── */ .path--decay{ --ground:var(--ink); --ground-2:var(--ink-2); --gold:var(--gold-ink); --panel:var(--ground-2); /* the ink page is left exactly as it was */ --fg:var(--on-ink); --fg-dim:var(--on-ink-dim); --accent:var(--oxide); --accent-lift:var(--oxide-lift); --rule:rgba(232,224,213,.16); --plate:grayscale(1) contrast(1.06) brightness(.8) sepia(.42) hue-rotate(-14deg) saturate(1.5); --cross:var(--patina-lift); /* the colour of where the button goes */ --decay-edge:var(--oxide-lift); --decay-wash:var(--oxide-wash-d); --hope-edge:var(--patina-lift); --hope-wash:var(--patina-wash-d); color-scheme:dark; } .path--potential{ --ground:var(--bone); --ground-2:var(--bone-2); --gold:var(--gold-bone); --panel:var(--bone-lift); --fg:var(--on-bone); --fg-dim:var(--on-bone-dim); --accent:var(--patina); --accent-lift:var(--patina-lift); --rule:rgba(26,21,18,.18); --plate:grayscale(1) contrast(1.02) brightness(1.0) sepia(.28) hue-rotate(178deg) saturate(.85); --cross:var(--oxide); --decay-edge:var(--oxide); --decay-wash:var(--olive-wash); --hope-edge:var(--patina); --hope-wash:var(--patina-wash-l); color-scheme:light; } body.path{ background:var(--ground); color:var(--fg); } .path .grain{ opacity:.038; } .path--potential .grain{ mix-blend-mode:multiply; opacity:.05; } /* ── top bar ───────────────────────────────────────────────────────────── */ #bar{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem clamp(1rem,3vw,2rem); background:color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--rule); } #bar a{ text-decoration:none; color:var(--fg-dim); } #bar a:hover{ color:var(--accent-lift); } #bar .here{ color:var(--accent); } #bar .yr{ color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:.1em; } #bar .cross{ border:1px solid var(--rule); border-radius:999px; padding:.4rem .8rem; } #bar .cross:hover{ border-color:var(--accent); } /* ── search ──────────────────────────────────────────────────────────────── Sits in the fixed bar. It filters the page rather than navigating to a results list, so the reader keeps the spine, the years and the sense of where they are. Everything it needs is already in memory. */ #find{ display:flex; align-items:center; gap:.5rem; flex:0 1 auto; } #find-q{ font-family:var(--font-meta); font-size:.62rem; letter-spacing:.08em; color:var(--fg); background:none; border:1px solid var(--rule); border-radius:999px; padding:.4rem .85rem; width:7rem; transition:width .3s var(--ease), border-color .2s var(--ease); -webkit-appearance:none; appearance:none; } #find-q::placeholder{ color:var(--fg-dim); opacity:1; } #find-q::-webkit-search-cancel-button{ display:none; } #find-q:focus{ outline:none; border-color:var(--accent); width:12rem; } #find-q:not(:placeholder-shown){ border-color:var(--accent); width:12rem; } #find-n{ font-size:.55rem; color:var(--fg-dim); white-space:nowrap; } #find-x{ font-family:var(--font-meta); font-size:.8rem; line-height:1; cursor:pointer; color:var(--fg-dim); background:none; border:0; padding:.2rem .3rem; } #find-x:hover{ color:var(--accent); } /* A stop that does not match is hidden outright rather than dimmed: with 277 entries on a path, a dimmed one still costs the reader a scroll. */ .stop.nomatch{ display:none; } .chapter.nomatch, .breather.nomatch, .hinge.nomatch{ display:none; } /* Entries fade in as they are scrolled to, which is right when reading and wrong when searching: a result the reader has never scrolled past would arrive invisible, because its observer never fired. While a search is running, every surviving entry is simply shown. */ body.searching .stop .copy{ opacity:1; transform:none; transition:none; } /* Pressing Enter scrolls to a result. Without a mark, the reader arrives in the middle of a page of entries that all look alike and has no way of telling which one they were sent to. The mark fades on its own. */ .stop.found .copy{ animation:found 1.4s ease-out; } @keyframes found{ 0% { box-shadow:0 0 0 1px var(--accent), 0 0 2.5rem -.5rem var(--accent); } 60% { box-shadow:0 0 0 1px var(--accent), 0 0 2.5rem -.5rem var(--accent); } 100% { box-shadow:0 0 0 1px transparent, 0 0 2.5rem -.5rem transparent; } } @media (prefers-reduced-motion: reduce){ .stop.found .copy{ animation:none; box-shadow:0 0 0 1px var(--accent); } } #find-none{ max-width:var(--measure); margin:6rem auto; padding:0 1.4rem; font-family:var(--font-meta); font-size:.68rem; line-height:2; color:var(--fg-dim); text-align:center; } #find-none b{ color:var(--fg); font-weight:400; } #find-none a{ color:var(--cross); } @media (max-width: 820px){ #bar .cross span{ display:none; } #find-q{ width:5.5rem; } #find-q:focus, #find-q:not(:placeholder-shown){ width:8.5rem; } } @media (max-width: 560px){ #bar .here{ display:none; } } @media (prefers-reduced-motion: reduce){ #find-q{ transition:none; } } #track{ position:fixed; top:0; left:0; height:2px; width:0; z-index:41; background:var(--accent); } /* Shown only when JavaScript is off, where the spine would otherwise be an empty page under a masthead. */ .noscript-note{ max-width:var(--measure); margin:5rem auto; padding:0 1.4rem; font-family:var(--font-meta); font-size:.66rem; line-height:2.1; color:var(--fg-dim); } .noscript-note a{ color:var(--accent); } /* ── masthead ──────────────────────────────────────────────────────────── */ #masthead{ position:relative; min-height:100svh; display:grid; align-items:center; padding:5rem clamp(1.2rem,4vw,3rem) 4rem; overflow:hidden; } #masthead .bg{ position:absolute; inset:0; z-index:0; } #masthead .bg img{ width:100%; height:100%; object-fit:cover; filter:var(--plate); opacity:.5; } .path--potential #masthead .bg img{ opacity:.42; } #masthead .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient( color-mix(in srgb, var(--ground) 72%, transparent), color-mix(in srgb, var(--ground) 88%, transparent) 55%, var(--ground)); } #masthead .inner{ position:relative; z-index:1; max-width:42rem; } #masthead .meta{ color:var(--accent); } #masthead h1{ font-size:clamp(2.4rem,7.5vw,5.4rem); font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144; margin:1rem 0 1.6rem; letter-spacing:-.03em; } #masthead .lead{ font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--fg); } #masthead p{ color:var(--fg-dim); max-width:36rem; } #masthead .cue{ margin-top:clamp(2rem,6vh,3.5rem); display:inline-flex; align-items:center; gap:.7rem; color:var(--accent); text-decoration:none; } #masthead .cue::after{ content:""; width:3rem; height:1px; background:currentColor; animation:cue 2.4s var(--ease) infinite; } @keyframes cue{ 0%,100%{ transform:scaleX(.4); transform-origin:left; } 50%{ transform:scaleX(1); transform-origin:left; } } @media (prefers-reduced-motion: reduce){ #masthead .cue::after{ animation:none; } } /* ── the spine ─────────────────────────────────────────────────────────── */ #spine{ position:relative; padding:clamp(3rem,10vh,7rem) 0 4rem; } /* the line itself */ #spine::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--rule); z-index:0; } /* one entry */ .stop{ position:relative; z-index:1; display:grid; grid-template-columns:1fr clamp(4rem,9vw,7rem) 1fr; align-items:start; padding:clamp(2rem,6vh,4.5rem) clamp(1.2rem,4vw,3rem); } .stop .copy{ max-width:var(--measure); opacity:0; transform:translateY(1.4rem); transition:opacity .9s var(--ease), transform .9s var(--ease); } .stop.in .copy{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .stop .copy{ opacity:1; transform:none; transition:none; } } /* alternating sides */ .stop.a .copy{ grid-column:1; justify-self:end; text-align:right; } .stop.b .copy{ grid-column:3; justify-self:start; } /* the marker on the line */ .stop .mark{ grid-column:2; grid-row:1; justify-self:center; align-self:start; display:flex; flex-direction:column; align-items:center; gap:.5rem; padding-top:.15rem; } .stop .mark .dot{ width:9px; height:9px; border-radius:50%; background:var(--ground); border:1px solid var(--accent); transition:background .5s var(--ease); } .stop.in .mark .dot{ background:var(--accent); } .stop .mark .y{ font-family:var(--font-meta); font-size:.58rem; letter-spacing:.06em; line-height:1.5; color:var(--fg-dim); text-align:center; max-width:100%; text-wrap:balance; } .stop h3{ font-size:clamp(1.35rem,3vw,2.3rem); margin:0 0 .7rem; color:var(--fg); } .stop .lbl{ color:var(--accent); display:block; margin-bottom:.5rem; } .stop p{ color:var(--fg-dim); margin:0; font-size:1rem; } /* ── plates ────────────────────────────────────────────────────────────── */ .stop .plate{ margin:0 0 1.2rem; } .plate figure{ margin:0; } /* A hairline, the way a museum mats a pale object. Without it a papyrus or a manuscript leaf dissolves into the bone ground and reads as an empty box. */ .plate .frame{ position:relative; overflow:hidden; background:var(--ground-2); border:1px solid var(--rule); } /* ─────────────────────────────────────────────────────────────────────── THE MUTE DIAL — the one number to argue about. At rest, plates are held back so 98 sources across 4,000 years read as one collection and the oxide/patina accents stay the loudest colour on the page. On hover they come up to full, true colour and expand. 1 = no mute at all (documentary, true colour, busier) 0.55 = current: disciplined, still legibly terracotta 0.2 = near-duotone, most "art object", least legible ─────────────────────────────────────────────────────────────────────── */ .path{ --plate-mute:.55; } .plate img{ width:100%; display:block; height:auto; filter:saturate(var(--plate-mute)) contrast(1.05) brightness(.97); transform:scale(1.001); transition:filter 1.1s var(--ease), transform 1.8s var(--ease); } .plate:hover img,.plate:focus-within img{ filter:saturate(1.02) contrast(1.03) brightness(1.02); transform:scale(1.035); } /* plates keep their own proportions; only the extremes are reined in */ .stop .plate .frame.clamped{ aspect-ratio:var(--ar); } .stop .plate .frame.clamped img{ height:100%; object-fit:cover; } .plate figcaption{ display:flex; gap:.55rem; flex-wrap:wrap; margin-top:.5rem; font-family:var(--font-meta); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); } .stop.a .plate figcaption{ justify-content:flex-end; } .plate figcaption .lic{ color:var(--accent); } .plate figcaption a{ text-decoration:none; border-bottom:1px solid currentColor; } /* the veil */ .plate.veiled img{ filter:blur(26px) grayscale(1) brightness(.4) saturate(.3); transform:scale(1.12); } .veil{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.9rem; padding:clamp(1rem,3vw,2rem); background:rgba(12,10,9,.6); transition:opacity .7s var(--ease); } .plate:not(.veiled) .veil{ opacity:0; pointer-events:none; } .veil p{ max-width:34rem; font-family:var(--font-meta); font-size:.66rem; line-height:1.85; color:#e8e0d5; margin:0; text-transform:none; letter-spacing:.03em; } .veil button{ font-family:var(--font-meta); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); background:none; cursor:pointer; border:1px solid rgba(201,162,39,.5); border-radius:999px; padding:.6rem 1.2rem; transition:background .35s var(--ease), letter-spacing .35s var(--ease); } .veil button:hover{ background:rgba(201,162,39,.14); letter-spacing:.3em; } /* ── full-bleed hinge moments ──────────────────────────────────────────── */ .stop.bleed{ grid-template-columns:1fr; padding-left:0; padding-right:0; padding-block:clamp(3rem,9vh,6rem); } .stop.bleed .mark{ display:none; } .stop.bleed .copy{ grid-column:1; max-width:none; justify-self:stretch; text-align:left; } .stop.bleed .plate{ margin-bottom:0; } .stop.bleed .plate .frame{ aspect-ratio:auto; height:clamp(24rem,72svh,46rem); } .stop.bleed .plate img{ height:100%; object-fit:cover; } /* line 56 = masthead backdrop, 246 = chapter backdrop: both carry type over them, so those stay graded. A hinge plate is the subject, so it stays true. */ .stop.bleed .words{ max-width:44rem; margin:0 auto; padding:clamp(1.6rem,4vw,2.6rem) clamp(1.2rem,4vw,3rem) 0; text-align:center; } .stop.bleed h3{ font-size:clamp(1.8rem,4.6vw,3.4rem); } .stop.bleed p{ font-size:1.06rem; } .stop.bleed .plate figcaption{ justify-content:center; padding:.6rem clamp(1.2rem,4vw,3rem) 0; } /* ── era breaks ────────────────────────────────────────────────────────── */ .chapter{ position:relative; z-index:1; text-align:center; padding:clamp(4rem,14vh,9rem) clamp(1.2rem,4vw,3rem); display:grid; place-items:center; } .chapter .ch-inner{ position:relative; z-index:2; max-width:38rem; } .chapter .n{ color:var(--accent); } .chapter h2{ font-size:clamp(2.1rem,6.5vw,4.4rem); margin:.9rem 0 .7rem; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144; letter-spacing:-.025em; } .chapter .range{ font-family:var(--font-meta); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-dim); } .chapter .theme{ max-width:30rem; margin:1.5rem auto 0; font-style:italic; font-size:clamp(1.05rem,1.9vw,1.3rem); } /* the line breathes around a chapter mark */ .chapter::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:9px; transform:translateX(-4px); background:var(--ground); z-index:0; } /* ── chapters that open on a plate ─────────────────────────────────────── */ .chapter.has-plate{ min-height:clamp(30rem,88svh,54rem); padding-inline:clamp(1.2rem,4vw,3rem); } .chapter.has-plate::before{ display:none; } /* the plate breaks the line itself */ .chapter .ch-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; } .chapter .ch-bg img{ width:100%; height:100%; object-fit:cover; filter:var(--plate); } .path--decay .chapter .ch-bg img{ opacity:.62; } .path--potential .chapter .ch-bg img{ opacity:.5; } /* fade into the ground at both ends so the spine emerges out of the image */ .chapter .ch-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(var(--ground), color-mix(in srgb, var(--ground) 30%, transparent) 26%, color-mix(in srgb, var(--ground) 45%, transparent) 62%, var(--ground)), radial-gradient(80% 60% at 50% 50%, color-mix(in srgb, var(--ground) 62%, transparent), transparent 70%); } .chapter.has-plate .theme{ color:var(--fg); } .chapter .ch-credit{ margin-top:2.2rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; font-size:.56rem; color:var(--fg-dim); } .chapter .ch-credit a{ color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor; } /* ── chapters with nothing to photograph (2025 onward) ─────────────────── */ .chapter.no-plate{ min-height:clamp(20rem,56svh,32rem); } .chapter.no-plate .theme{ color:var(--fg-dim); } .chapter.no-plate .ch-norec{ margin-top:2.4rem; font-size:.58rem; letter-spacing:.2em; color:var(--gold); display:inline-flex; align-items:center; gap:.9rem; } .chapter.no-plate .ch-norec::before, .chapter.no-plate .ch-norec::after{ content:""; width:2.2rem; height:1px; background:currentColor; opacity:.5; } /* ── the 2025 line ─────────────────────────────────────────────────────── */ .hinge{ position:relative; z-index:1; text-align:center; padding:clamp(4rem,14vh,9rem) clamp(1.2rem,4vw,3rem); } .hinge::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:11px; transform:translateX(-5px); background:var(--ground); z-index:-1; } .hinge .meta{ color:var(--gold); } .hinge h2{ font-size:clamp(1.9rem,5.5vw,3.4rem); margin:1rem auto; max-width:18ch; } .hinge p{ max-width:34rem; margin:1.2rem auto 0; color:var(--fg-dim); } .hinge .norec{ margin-top:2rem; font-family:var(--font-meta); font-size:.64rem; letter-spacing:.16em; line-height:2.1; text-transform:uppercase; color:var(--gold); max-width:30rem; margin-inline:auto; } /* ── the end of a path ─────────────────────────────────────────────────── */ #outro{ position:relative; z-index:1; padding:clamp(4rem,14vh,9rem) clamp(1.2rem,4vw,3rem); border-top:1px solid var(--rule); text-align:center; } #outro h2{ font-size:clamp(1.8rem,5vw,3.2rem); max-width:20ch; margin:0 auto 1.4rem; } #outro > p{ max-width:34rem; margin:0 auto 3rem; color:var(--fg-dim); } .onward{ display:grid; gap:1rem; max-width:56rem; margin-inline:auto; grid-template-columns:1fr 1fr; } .onward a{ display:block; text-decoration:none; text-align:left; border:1px solid var(--rule); padding:clamp(1.2rem,3vw,1.9rem); transition:border-color .4s var(--ease), background .4s var(--ease); } .onward a:hover{ border-color:var(--accent); background:var(--ground-2); } .onward .meta{ color:var(--accent); } .onward h3{ font-size:1.3rem; margin:.5rem 0 .4rem; color:var(--fg); } .onward p{ font-size:.88rem; color:var(--fg-dim); margin:0; } footer.path-foot{ position:relative; z-index:1; padding:2rem clamp(1.2rem,4vw,3rem) 3rem; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; font-family:var(--font-meta); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); } footer.path-foot a{ color:var(--accent); text-decoration:none; } /* ── responsive ────────────────────────────────────────────────────────── */ @media (max-width: 820px){ /* the line moves to the edge and everything stacks beside it */ #spine::before{ left:1.35rem; } .stop{ grid-template-columns:2.7rem 1fr; padding-inline:clamp(1rem,4vw,2rem); } .stop .mark{ grid-column:1; grid-row:1; justify-self:center; } .stop .mark .y{ writing-mode:horizontal-tb; font-size:.52rem; } .stop.a .copy,.stop.b .copy{ grid-column:2; grid-row:1; justify-self:stretch; text-align:left; max-width:none; } .stop.a .plate figcaption{ justify-content:flex-start; } .chapter::before,.hinge::before{ left:1.35rem; transform:translateX(-5px); } .chapter,.hinge{ text-align:left; padding-left:4rem; } .chapter .theme,.hinge p,.hinge .norec,#outro > p,#outro h2{ margin-inline:0; } .stop.bleed{ grid-template-columns:1fr; padding-inline:0; } .stop.bleed .words{ text-align:left; } .onward{ grid-template-columns:1fr; } #bar .yr{ display:none; } } @media (max-width: 480px){ #bar .cross span{ display:none; } } /* the line under the title that does the metaphorical work */ #masthead .strap{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.15rem,2.6vw,1.85rem); line-height:1.3; color:var(--accent-lift); margin:-.6rem 0 1.6rem; max-width:24ch; letter-spacing:-.01em; } .path--potential #masthead .strap{ color:var(--patina); } /* ── the eye, and the wall label it opens ──────────────────────────────── */ .plate-eye{ display:inline-flex; align-items:center; gap:.4rem; font:inherit; font-family:var(--font-meta); font-size:inherit; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); background:none; border:0; padding:0; cursor:pointer; border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease); } .plate-eye:hover,.plate-eye[aria-expanded="true"]{ color:var(--accent); border-bottom-color:currentColor; } .plate-eye svg{ display:block; } /* deliberately quieter than the body text: it annotates, it does not compete */ .plate-note{ margin:.75rem 0 0; font-size:.8rem; line-height:1.5; color:var(--fg-dim); max-width:32rem; border-left:1px solid var(--accent); padding-left:.85rem; } .stop.a .plate-note{ border-left:0; border-right:1px solid var(--accent); padding-left:0; padding-right:.85rem; margin-left:auto; } .stop.bleed .plate-note{ border:0; padding:0; margin:1rem auto 0; text-align:center; max-width:36rem; } /* ── breathers: a passage between chapters ─────────────────────────────── */ .breather{ position:relative; z-index:1; min-height:clamp(26rem,80svh,44rem); display:grid; place-items:center; padding:clamp(3rem,10vh,6rem) clamp(1.2rem,4vw,3rem); overflow:hidden; } .breather::before{ /* the spine does not run through a breather */ content:""; position:absolute; left:50%; top:0; bottom:0; width:11px; transform:translateX(-5px); background:var(--ground); z-index:0; } .breather .br-bg{ position:absolute; inset:0; z-index:0; } .breather .br-bg img{ width:100%; height:100%; object-fit:cover; filter:var(--plate) blur(2px); } .path--decay .breather .br-bg img{ opacity:.34; } .path--potential .breather .br-bg img{ opacity:.26; } .breather .br-bg::after{ content:""; position:absolute; inset:0; background: radial-gradient(72% 58% at 50% 50%, color-mix(in srgb, var(--ground) 72%, transparent), var(--ground) 78%), linear-gradient(var(--ground), transparent 22%, transparent 78%, var(--ground)); } .breather .br-inner{ position:relative; z-index:2; max-width:46rem; text-align:center; } .breather figure{ margin:0; } .breather .br-text{ margin:0; font-family:var(--font-display); font-style:italic; font-size:clamp(1.35rem,3.4vw,2.5rem); line-height:1.34; letter-spacing:-.015em; color:var(--fg); text-wrap:balance; } .breather figcaption{ margin-top:clamp(1.8rem,5vh,2.8rem); display:flex; flex-direction:column; align-items:center; gap:.5rem; } .breather .br-cite{ font-style:normal; font-family:var(--font-meta); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); } .breather .br-note{ font-size:.58rem; color:var(--fg-dim); letter-spacing:.14em; max-width:32rem; } @media (max-width: 820px){ .breather::before{ left:1.35rem; transform:translateX(-5px); } .breather{ padding-left:4rem; } .breather .br-inner{ text-align:left; } .breather figcaption{ align-items:flex-start; } .stop.a .plate-note{ border-right:0; border-left:1px solid var(--accent); padding-right:0; padding-left:.9rem; margin-left:0; } } /* ── sources: every entry carries one, image or no image ───────────────── */ .sources{ margin-top:1.1rem; padding-top:.7rem; border-top:1px solid var(--rule); max-width:32rem; } .stop.a .sources{ margin-left:auto; } .sources .src-label{ display:block; color:var(--accent); font-size:.55rem; margin-bottom:.4rem; } .sources ul{ list-style:none; margin:0; padding:0; } .sources li{ font-family:var(--font-meta); font-size:.62rem; line-height:1.65; color:var(--fg-dim); margin:0 0 .25rem; } .sources a{ color:var(--fg-dim); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent); transition:color .3s var(--ease), border-color .3s var(--ease); } .sources a:hover{ color:var(--accent); border-bottom-color:currentColor; } .stop.bleed .sources{ margin-inline:auto; text-align:center; max-width:36rem; } @media (max-width: 820px){ .stop.a .sources{ margin-left:0; } } /* The light path needs a touch more separation: pale artefacts on pale paper. */ .path--potential{ --plate-mute:.66; } .path--potential .plate img{ filter:saturate(var(--plate-mute)) contrast(1.09) brightness(.955); } .path--potential .plate:hover img, .path--potential .plate:focus-within img{ filter:saturate(1.02) contrast(1.05) brightness(1); } /* ========================================================================= ERA NAVIGATION — the contents page Three treatments behind body[data-nav]. Pick one, then delete the other two and the switcher in path.js (wireNavStyles). ========================================================================= */ .era-nav{ margin:clamp(2rem,6vh,3.2rem) 0 0; } .era-nav .en-head{ color:var(--fg-dim); padding-bottom:.7rem; margin-bottom:.9rem; border-bottom:1px solid var(--rule); } .era-nav ol{ list-style:none; margin:0; padding:0; } .era-nav a{ text-decoration:none; color:var(--fg-dim); transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .era-nav a:hover,.era-nav a.on{ color:var(--fg); } .era-nav .en-n{ font-family:var(--font-meta); } .era-nav .en-range{ font-family:var(--font-meta); } /* ── A · pills ─────────────────────────────────────────────────────────── */ [data-nav="a"] .era-nav ol{ display:flex; flex-wrap:wrap; gap:.45rem; } [data-nav="a"] .era-nav a{ display:inline-flex; align-items:baseline; gap:.5rem; border:1px solid var(--rule); border-radius:999px; padding:.5rem .9rem; } [data-nav="a"] .era-nav a:hover, [data-nav="a"] .era-nav a.on{ border-color:var(--accent); background:var(--ground-2); } [data-nav="a"] .era-nav a.on .en-n{ color:var(--accent); } [data-nav="a"] .era-nav .en-n{ font-size:.56rem; letter-spacing:.1em; opacity:.7; } [data-nav="a"] .era-nav .en-name{ font-size:.9rem; } [data-nav="a"] .era-nav .en-range{ display:none; } /* ── B · index (a book's table of contents) ────────────────────────────── */ [data-nav="b"] .era-nav a{ display:grid; grid-template-columns:2rem 1fr auto; gap:.9rem; align-items:baseline; padding:.62rem 0; border-bottom:1px solid var(--rule); } [data-nav="b"] .era-nav li:last-child a{ border-bottom:0; } [data-nav="b"] .era-nav a:hover, [data-nav="b"] .era-nav a.on{ border-bottom-color:var(--accent); } [data-nav="b"] .era-nav .en-n{ font-size:.6rem; letter-spacing:.1em; color:var(--accent); } [data-nav="b"] .era-nav .en-name{ font-family:var(--font-display); font-size:1.12rem; letter-spacing:-.01em; } [data-nav="b"] .era-nav .en-range{ font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; opacity:.65; text-align:right; } /* ── the switcher (temporary) ──────────────────────────────────────────── */ /* The A/B switcher that set data-nav has been removed from path.js; the two layouts it chose between are still defined below. */ @media (max-width: 820px){ [data-nav="b"] .era-nav a{ grid-template-columns:1.6rem 1fr; } [data-nav="b"] .era-nav .en-range{ grid-column:2; text-align:left; } } /* ── acceleration window: status, two readings, why it matters ──────────── */ .stop .status{ display:inline-block; margin-bottom:.6rem; font-size:.52rem; color:var(--fg-dim); border:1px solid var(--rule); border-radius:2px; padding:.22rem .5rem; } .stop.is-fork .status{ border-color:var(--gold); color:var(--gold); } .readings{ margin-top:1.1rem; display:grid; gap:.9rem; } .reading .r-tag{ display:block; font-size:.55rem; margin-bottom:.4rem; } .reading p{ margin:0; font-size:.95rem; } .matters{ margin-top:1.1rem; padding:.85rem 1rem; background:var(--panel); border-left:1px solid var(--gold); } .stop.a .matters{ border-left:0; border-right:1px solid var(--gold); } .matters .m-tag{ display:block; color:var(--gold); font-size:.55rem; margin-bottom:.4rem; } .matters p{ margin:0; font-size:.95rem; color:var(--fg); } @media (max-width: 820px){ .stop.a .matters{ border-right:0; border-left:1px solid var(--gold); } } /* decade suffix: mono digits, serif "s", so 1860s cannot read as 18605 */ .dec{ font-family:var(--font-body); font-style:italic; font-size:1.15em; letter-spacing:0; text-transform:lowercase; } /* ── floating chapter nav ──────────────────────────────────────────────── */ .nav-fab{ position:fixed; right:.9rem; bottom:3.4rem; z-index:60; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-meta); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; color:var(--fg); background:color-mix(in srgb, var(--ground) 90%, transparent); border:1px solid var(--rule); border-radius:999px; padding:.6rem 1rem; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:border-color .3s var(--ease), color .3s var(--ease); } .nav-fab:hover,.nav-fab[aria-expanded="true"]{ border-color:var(--accent); color:var(--accent); } .nav-fab svg{ display:block; } .nav-panel{ position:fixed; right:.9rem; bottom:6.4rem; z-index:60; width:min(22rem, calc(100vw - 1.8rem)); max-height:min(30rem, 66svh); overflow-y:auto; -webkit-overflow-scrolling:touch; background:color-mix(in srgb, var(--ground) 96%, transparent); border:1px solid var(--rule); border-radius:4px; padding:1rem 1.1rem; box-shadow:0 12px 40px rgba(0,0,0,.35); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); animation:rise .3s var(--ease) both; } .era-nav.floating{ margin:0; } .era-nav.floating .en-head{ font-size:.52rem; } /* the floating panel always uses the index treatment, whichever style is set */ .nav-panel .era-nav a{ display:grid !important; grid-template-columns:1.7rem 1fr; gap:.7rem; align-items:baseline; padding:.5rem 0; border:0; border-bottom:1px solid var(--rule) !important; border-radius:0 !important; background:none !important; } .nav-panel .era-nav li:last-child a{ border-bottom:0 !important; } .nav-panel .era-nav .en-n{ display:block !important; font-size:.55rem; color:var(--accent); } .nav-panel .era-nav .en-name{ font-family:var(--font-display); font-size:1rem; } .nav-panel .era-nav .en-range{ display:block !important; grid-column:2; font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; opacity:.6; text-align:left; } .nav-panel .era-nav a.on .en-name, .nav-panel .era-nav a:hover .en-name{ color:var(--accent); } .nav-panel .era-nav ol{ display:block !important; } @media (max-width: 820px){ .nav-fab{ bottom:.9rem; } .nav-panel{ bottom:3.6rem; } } /* the date in the gutter can never overflow into a plate */ .stop .mark .y{ max-width:100%; overflow-wrap:anywhere; hyphens:none; } /* the content note at the entrance, replacing the per-image veils */ #masthead .content-note{ margin-top:clamp(1.6rem,4vh,2.4rem); padding:1rem 1.1rem; border:1px solid var(--rule); border-left:2px solid var(--accent); font-size:.92rem; line-height:1.6; color:var(--fg-dim); max-width:38rem; } #masthead .content-note b{ color:var(--fg); font-weight:400; } /* a plate that is itself the evidence gets a hairline in the accent colour */ .plate.is-record .frame{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); } /* ── the residue: historical entries that never actually ended ─────────── */ .matters.residue{ border-left-color: var(--oxide-lift); } .stop.a .matters.residue{ border-right-color: var(--oxide-lift); } .matters.residue .m-tag{ color: var(--oxide-lift); } /* ── crossing over ───────────────────────────────────────────────────────── The button carries the colour of the path it goes to, not the one you are standing on, so the choice is legible before you make it. */ #bar .cross{ border-color:color-mix(in srgb, var(--cross) 55%, transparent); color:var(--cross); } #bar .cross:hover, #bar .cross:focus-visible{ border-color:var(--cross); background:color-mix(in srgb, var(--cross) 14%, transparent); color:var(--cross); } .onward a[href$="potential.html"]{ --card:var(--patina-lift); } .onward a[href$="decay.html"]{ --card:var(--oxide-lift); } .path--potential .onward a[href$="decay.html"]{ --card:var(--oxide); } .onward a[href$="potential.html"]:hover, .onward a[href$="decay.html"]:hover{ border-color:var(--card); } .onward a[href$="potential.html"] .meta, .onward a[href$="decay.html"] .meta{ color:var(--card); } /* ── one fact, two readings ──────────────────────────────────────────────── Colour the readings by what they say, not by which path you happen to be standing on. The hope reading is cobalt on a pale blue ground on both paths; the decay reading is oxide. The reading for the path you are on keeps full weight, the other is stepped back. */ .reading{ padding:.8rem .95rem; border-left:1px solid var(--rule); border-radius:2px; } .stop.a .reading{ padding:.8rem .95rem; border-left:0; border-right:1px solid var(--rule); } .reading--hope{ border-color:var(--hope-edge); background:var(--hope-wash); } .reading--hope .r-tag{ color:var(--hope-edge); } .reading--decay{ border-color:var(--decay-edge); background:var(--decay-wash); } .reading--decay .r-tag{ color:var(--decay-edge); } /* The .stop.a rule above uses the border-right shorthand, which resets the colour these two set. Restore it explicitly or every left-aligned fork loses its accent edge and both panels read as neutral. */ .stop.a .reading--hope{ border-right-color:var(--hope-edge); } .stop.a .reading--decay{ border-right-color:var(--decay-edge); } .reading.other{ opacity:.82; } .reading.other .r-tag{ opacity:.9; } .reading.mine p, .reading.other p{ color:var(--fg); } /* On bone, the decay reading is the heavy half of the fork and has to look it. Fading the whole panel to .82 lifted its olive back towards the paper, so here the stepping-back is done in the text rather than in the ground. */ .path--potential .reading--decay.other{ opacity:1; } .path--potential .reading--decay.other p{ color:color-mix(in srgb, var(--fg) 86%, transparent); } @media (max-width: 820px){ .stop.a .reading{ border-right:0; border-left:1px solid var(--rule); } .stop.a .reading--hope{ border-left-color:var(--hope-edge); } .stop.a .reading--decay{ border-left-color:var(--decay-edge); } } /* ── the thread ──────────────────────────────────────────────────────────── A forecast has no plate of its own. What it has is the entries it grew out of, closed by default and opened on a click. Native

, so it works with JavaScript off, the same as the source lists. */ .thread{ margin-top:1.1rem; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .thread > summary{ list-style:none; cursor:pointer; padding:.8rem 0; display:flex; align-items:center; gap:.9rem; } .thread > summary::-webkit-details-marker{ display:none; } .thread > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* Closed, the plates are a fanned stack, so four fit on one line. They separate on hover and on focus, so it is legible that there are four rather than one with a shadow. */ .stack{ display:flex; flex:0 0 auto; } .stack img{ width:2.9rem; height:2.15rem; object-fit:cover; filter:var(--plate); border:1px solid var(--ground); margin-left:-.85rem; transition:margin-left .28s var(--ease); } .stack img:first-child{ margin-left:0; } .thread > summary:hover .stack img, .thread > summary:focus-visible .stack img, .thread[open] > summary .stack img{ margin-left:.25rem; } .thread > summary:hover .stack img:first-child, .thread > summary:focus-visible .stack img:first-child, .thread[open] > summary .stack img:first-child{ margin-left:0; } .t-label{ font-size:.58rem; letter-spacing:.18em; color:var(--gold); } .t-count{ color:var(--fg-dim); margin-left:.7em; letter-spacing:.1em; } .chev{ margin-left:auto; color:var(--fg-dim); font-size:.7rem; transition:transform .28s var(--ease); } .thread[open] .chev{ transform:rotate(180deg); } .strand{ padding:.2rem 0 1.1rem; border-left:1px solid var(--rule); margin-left:1.35rem; } .t-link{ display:grid; grid-template-columns:5.4rem 1fr; gap:.9rem; padding:.8rem 0 .8rem 1.25rem; position:relative; text-decoration:none; color:inherit; } .t-link::before{ content:""; position:absolute; left:0; top:50%; width:.8rem; height:1px; background:var(--rule); } .t-link:hover, .t-link:focus-visible{ background:color-mix(in srgb, var(--fg) 4%, transparent); outline:none; } .t-link img{ width:5.4rem; height:4rem; object-fit:cover; filter:var(--plate); } .t-noplate{ display:block; width:5.4rem; height:4rem; border:1px dashed var(--rule); } .t-y{ font-size:.55rem; letter-spacing:.18em; color:var(--fg-dim); } .t-cross{ color:var(--cross); margin-left:.7em; letter-spacing:.1em; } .t-t{ font-family:var(--font-body); font-size:1rem; line-height:1.3; margin:.35rem 0 .3rem; } .t-link:hover .t-t, .t-link:focus-visible .t-t{ border-bottom:0; color:var(--accent); } .t-w{ margin:0; font-size:.85rem; color:var(--fg-dim); } @media (max-width: 520px){ .t-link{ grid-template-columns:4rem 1fr; } .t-link img, .t-noplate{ width:4rem; height:3rem; } } @media (prefers-reduced-motion: reduce){ .stack img, .chev{ transition:none; } } /* ── predictions ─────────────────────────────────────────────────────────── A claim with a date on it. The status is the only part that ever changes, and it changes in public. */ .pred{ border-left-color:var(--gold); } .stop.a .pred{ border-left:0; border-right-color:var(--gold); } .pred-head{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:.45rem; } .pred-head .m-tag{ margin-bottom:0; } .pred-status{ font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; border:1px solid currentColor; border-radius:999px; padding:.16rem .5rem; } .pred--open { border-left-color:var(--gold); } .pred--open .pred-status{ color:var(--gold); } .pred--happened{ border-left-color:var(--oxide-lift); } .pred--happened .pred-status{ color:var(--oxide-lift); } .pred--late .pred-status{ color:var(--oxide-lift); opacity:.85; } .pred--partly .pred-status{ color:var(--fg-dim); } .pred--wrong { border-left-color:var(--rule); } .pred--wrong .pred-status{ color:var(--fg-dim); } .pred--wrong .pred-claim{ opacity:.6; } .pred-claim{ margin:0; font-size:.95rem; color:var(--fg); } .pred-meta{ margin:.55rem 0 0; font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); } .pred-resolution{ margin:.6rem 0 0; padding-top:.6rem; font-size:.9rem; color:var(--fg); border-top:1px solid var(--rule); } .pred-resolution b{ color:var(--accent); font-weight:500; } /* ── what a forecast is built on ─────────────────────────────────────────── Below the 2026 line nothing can be cited, so each forecast names the fact above the line that it is the continuation of. Quieter than the residue: this is scaffolding, not argument. */ .matters.basis{ background:transparent; border-left-color:color-mix(in srgb, var(--fg-dim) 50%, transparent); padding-top:.6rem; padding-bottom:.6rem; } .stop.a .matters.basis{ border-right-color:color-mix(in srgb, var(--fg-dim) 50%, transparent); } .matters.basis .m-tag{ color:var(--fg-dim); } .matters.basis p{ font-size:.9rem; color:var(--fg-dim); } /* ── sources, collapsed ──────────────────────────────────────────────────── The citations carry the whole argument and they should not be the first thing the eye lands on. Closed by default, one line high, opened by click or keyboard.

does the work; this only removes the default marker and makes the summary read as a control. */ .sources > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.4rem; padding:.15rem 0; user-select:none; border-bottom:1px solid transparent; transition:color .25s var(--ease); } .sources > summary::-webkit-details-marker{ display:none; } .sources > summary::after{ content:""; width:.42rem; height:.42rem; margin-left:.1rem; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translate(-1px,-1px); transition:transform .25s var(--ease); } .sources[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px); } .sources > summary:hover, .sources > summary:focus-visible{ color:var(--accent); } .sources > summary:focus-visible{ outline:1px solid var(--accent); outline-offset:.3rem; } .sources .src-n{ font-size:.9em; opacity:.65; } .sources .src-n::before{ content:"("; } .sources .src-n::after{ content:")"; } .sources[open] > ul{ margin-top:.55rem; } /* the right-aligned column puts the control on the right too */ .stop.a .sources > summary{ flex-direction:row-reverse; } @media (prefers-reduced-motion: reduce){ .sources > summary, .sources > summary::after{ transition:none; } } /* every source visible on paper, whatever the screen was doing */ @media print{ .sources > summary::after{ display:none; } .sources > ul{ display:block !important; } }