/* asraya.io: a refuge for the age of intelligence. The v12 system, carried home.
   Everything is served from this folder: fonts, geometry, sound. Nothing is fetched. */

@font-face { font-family: 'Fraunces'; src: url('./fonts/fraunces-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('./fonts/fraunces-latin-italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('./fonts/geist-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('./fonts/geist-mono-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --bg: #0B0A08;            /* ink */
  --ink: #E9E1D0;           /* bone */
  --soft: rgba(233, 225, 208, 0.68);
  --faint: rgba(233, 225, 208, 0.42);
  --ghost: rgba(233, 225, 208, 0.16);
  --card: #13110D;
  --rule: rgba(233, 225, 208, 0.16);
  --bronze: #C9A46A;
  --bronze-hi: #DDBE8C;
  /* the four stages, from v12, plus the prima materia */
  --root: #8A6A3E;
  --nigredo: #3A342B;       /* v12's #151310 is invisible on ink; lifted one step so the mark reads */
  --albedo: #DCD7CC;
  --solve: #6E6A62;
  --citrinitas: #C39337;
  --rubedo: #8E2318;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body.gated { overflow: hidden; height: 100vh; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: rgba(201, 164, 106, 0.35); }
:focus-visible { outline: 1px solid var(--bronze); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card); padding: 8px 12px; font: 12px var(--mono); }
.skip:focus { left: 8px; }
em { font-style: italic; color: var(--bronze); }

.mono { font: 400 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- the field: the Krystal plate behind everything ---------- */
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#field .plate { transition: opacity 2.2s var(--ease); }
body:not(.gated) #field .plate { opacity: .34; }
/* strokes are sized in grid units from --px (one screen pixel, in units; set by site.js). Not
   vector-effect: non-scaling-stroke, which breaks pathLength dashes in Chromium and drew every line dashed. */
#field .plate path, #field .plate line, #field .plate circle { fill: none; }
#field .g-hatch line { stroke: var(--ink); stroke-width: calc(var(--px) * .5); opacity: 0; transition: opacity 2.4s var(--ease) 1.2s; }
#field.drawn .g-hatch line { opacity: .05; }
#field .g-major path { stroke: var(--ink); stroke-width: calc(var(--px) * .8); opacity: .2; }
#field .g-hex path { stroke: var(--bronze); stroke-width: calc(var(--px) * .7); opacity: .26; }
#field .g-minor path { stroke: var(--ink); stroke-width: calc(var(--px) * .5); opacity: .12; }
#field .g-cube path { stroke: var(--ink); stroke-width: calc(var(--px) * .5); opacity: .1; }
#field .g-spiral path { stroke: var(--bronze); stroke-width: calc(var(--px) * .5); opacity: .16; }
#field .g-nodes circle, #field .g-nodes path { fill: var(--ink); stroke: none; opacity: 0; transition: opacity .9s var(--ease); }
#field.drawn .g-nodes circle, #field.drawn .g-nodes path { opacity: .2; }
#field .g-nodes .azura { fill: var(--bronze); }
/* the plate is drawn whole and opened from the centre as one breath (site.js sets --r), not stroke by stroke,
   which left the first two seconds a scatter of fragments */
body.gated #field:not(.drawn) { opacity: 0; }
#field.revealing { -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 var(--r), transparent calc(var(--r) + 26vmin)); mask-image: radial-gradient(circle at var(--mx) var(--my), #000 var(--r), transparent calc(var(--r) + 26vmin)); }

/* the relic, drawn from the hexagram's upward triangle */
.relic path { fill: none; stroke: var(--bronze); stroke-width: calc(var(--px, .06) * 1.2); stroke-linecap: round; stroke-linejoin: round; }
.relic .band { fill: url(#bandFill); fill-opacity: 0; stroke: none; transition: fill-opacity 2.4s var(--ease); }
.relic.lit .band { fill-opacity: 1; }
.relic .inner { stroke: var(--bronze-hi); }
/* hidden, not just dashed off, until its stroke starts: a dashed-off path still shows a sliver at its start */
.relic [pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 2.6s var(--ease), opacity .25s linear; }
.relic.lit [pathLength] { stroke-dashoffset: 0; opacity: 1; }
.relic .bindu { fill: var(--bronze-hi); opacity: 0; transition: opacity 1.4s var(--ease) 1.6s; }
.relic .halo { fill: url(#halo); opacity: 0; transition: opacity 2s var(--ease) 1.8s; transform-box: fill-box; transform-origin: center; }
.relic.lit .bindu { opacity: 1; }
.relic.lit .halo { opacity: 1; animation: breath 10s ease-in-out 3.8s infinite; }
@keyframes breath { 0%, 100% { transform: scale(.8); opacity: .55; } 40% { transform: scale(1.18); opacity: 1; } }

/* the word */
.word path { fill: var(--bronze); fill-opacity: 0; stroke: var(--bronze); stroke-width: calc(var(--pxw, 1) * .8); stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 3.2s var(--ease), fill-opacity 2s var(--ease), opacity .25s linear; }
.word.lit path { stroke-dashoffset: 0; fill-opacity: .92; opacity: 1; transition-delay: 1.2s, 3s, 1.2s; }
body:not(.gated) #field .relic, body:not(.gated) #field .word, body:not(.gated) #holdRing, body:not(.gated) #holdTrack { opacity: 0; transition: opacity 1.6s var(--ease); }

/* the relic as a jewel (jewel.js): gold dust gathers onto the mark, the crisp jewel resolves over it,
   and the line drawing beneath gives way */
.jewel { position: absolute; pointer-events: none; --heat: 0; }
#jewelGate { position: fixed; z-index: 1; transition: opacity 1.4s var(--ease); }
body:not(.gated) #jewelGate { opacity: 0; }
.jewel .dust { position: absolute; left: -35%; top: -35%; width: 170%; height: 170%; }
.jewel .gem, .jewel .light { position: absolute; inset: 0; width: 100%; height: 100%; }
.jewel .gem { opacity: 0; filter: blur(10px); transform: scale(1.025); transition: opacity 1.8s var(--ease), filter 2.2s var(--ease), transform 2.6s var(--ease); }
.jewel.resolved .gem { opacity: 1; filter: blur(0); transform: none; }
.jewel .light { mix-blend-mode: screen; }
.jewel i { position: absolute; inset: 0; pointer-events: none; }
/* centred on the sapphire: jewel.js sets --gx, --gy from the image's own measurements */
.jewel .glow { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 52%), rgba(170, 195, 255, .5) 0, rgba(110, 140, 255, .16) 4.5%, rgba(221, 190, 140, .1) 12%, transparent 26%); mix-blend-mode: screen; transform-origin: var(--gx, 50%) var(--gy, 52%); opacity: 0; transition: opacity 2s var(--ease) .8s; }
.jewel.resolved .glow { opacity: 1; animation: gembreath 10s ease-in-out infinite; }
@keyframes gembreath { 0%, 100% { transform: scale(.82); opacity: .6; } 40% { transform: scale(1.12); opacity: 1; } }
.jewel .heat { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 52%), rgba(255, 226, 170, .75) 0, rgba(240, 190, 110, .3) 9%, rgba(201, 164, 106, .08) 26%, transparent 44%); mix-blend-mode: screen; opacity: var(--heat); transform-origin: var(--gx, 50%) var(--gy, 52%); }
.jewel.flare .heat { animation: flare 1.8s cubic-bezier(.16, 1, .3, 1); }
@keyframes flare { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(1.3); } 100% { opacity: var(--heat); transform: scale(1); } }
#field.jeweled #gateRelic { opacity: 0; }
.relic-wrap { position: relative; width: min(52vw, 280px); margin-bottom: 8px; }
.relic-wrap .relic-big { display: block; width: 100%; height: auto; overflow: visible; transition: opacity 1.8s var(--ease) .4s; }
.relic-wrap.jeweled .relic-big { opacity: 0; }
/* #jewelBig is placed over the svg's (-6.6, -6.6, 13.2, 11) box by site.js, from the image's own box */
.hero .glyph { width: 104px; height: 104px; }

/* the hold ring around the centre */
body:not(.holding) #holdRing { opacity: 0; }
#holdRing { fill: none; stroke: var(--bronze-hi); stroke-width: calc(var(--px) * 1.5); stroke-dasharray: 1 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
#holdTrack { fill: none; stroke: var(--rule); stroke-width: calc(var(--px) * .8); opacity: 0; transition: opacity 1.2s var(--ease) 3.4s; }
#field.drawn #holdTrack { opacity: 1; }

/* ---------- the gate ---------- */
#gate { position: fixed; inset: 0; z-index: 20; -webkit-touch-callout: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 20px max(26px, env(safe-area-inset-bottom)); touch-action: none; user-select: none; -webkit-user-select: none; transition: opacity 1.4s var(--ease), visibility 0s linear 1.4s; }
body:not(.gated) #gate { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-top { position: absolute; top: 22px; left: 0; right: 0; text-align: center; color: var(--faint); opacity: 0; transition: opacity 1.6s var(--ease) 2.6s; }
.gate-foot { display: grid; gap: 14px; justify-items: center; opacity: 0; transition: opacity 1.6s var(--ease) 3.2s; }
#field.drawn ~ #gate .gate-top, #field.drawn ~ #gate .gate-foot { opacity: 1; }
#holdBtn { font: 500 12.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 12px 20px; border: 1px solid var(--rule); border-radius: 999px; transition: border-color .6s var(--ease), color .6s var(--ease); }
#holdBtn:hover, #gate.holding #holdBtn { border-color: var(--bronze); color: var(--bronze-hi); }
.gate-row { display: flex; gap: 22px; align-items: center; color: var(--faint); }
.gate-row button { color: var(--faint); transition: color .4s; }
.gate-row button:hover, .gate-row button[aria-pressed="true"] { color: var(--ink); }
.gate-row .sep { width: 1px; height: 12px; background: var(--rule); }

/* ---------- head, rail ---------- */
.head { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: 72px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateY(-8px); transition: opacity 1.4s var(--ease) .6s, transform 1.4s var(--ease) .6s; pointer-events: none; }
body:not(.gated) .head { opacity: 1; transform: none; pointer-events: auto; }
.head::before { content: ''; position: absolute; inset: 0 0 -28px; background: linear-gradient(var(--bg) 30%, transparent); z-index: -1; }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 500 13px var(--sans); letter-spacing: .26em; }
.mark svg { width: 22px; height: 22px; overflow: visible; }
.mark svg path { fill: none; stroke: var(--bronze); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mark svg circle { fill: var(--bronze-hi); }
.head-right { display: flex; align-items: center; gap: 22px; color: var(--faint); }
#soundBtn { display: flex; align-items: center; gap: 9px; color: var(--faint); transition: color .4s; }
#soundBtn:hover { color: var(--ink); }
#soundBtn .bars { display: flex; gap: 2px; align-items: flex-end; height: 10px; }
#soundBtn .bars i { width: 2px; height: 3px; background: currentColor; transition: height .4s var(--ease); }
#soundBtn[aria-pressed="true"] { color: var(--bronze-hi); }
#soundBtn[aria-pressed="true"] .bars i { animation: bar 1.6s ease-in-out infinite; }
#soundBtn[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.5s; }
#soundBtn[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -1s; }
@keyframes bar { 0%, 100% { height: 3px; } 50% { height: 10px; } }

.rail { position: fixed; left: 30px; top: 50%; transform: translateY(-50%); z-index: 9; display: grid; gap: 18px; opacity: 0; transition: opacity 1.4s var(--ease) 1s; }
body:not(.gated) .rail { opacity: 1; }
.rail a { position: relative; display: block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--c, var(--faint)); text-decoration: none; transition: background .8s var(--ease), transform .6s var(--ease); }
.rail a.on { background: var(--c); }
.rail a.here { transform: scale(1.45); }
.rail a span { position: absolute; left: 22px; top: 50%; transform: translate(-4px, -50%); white-space: nowrap; color: var(--faint); opacity: 0; transition: opacity .5s, transform .5s var(--ease); pointer-events: none; }
.rail a.here span, .rail a:hover span { opacity: 1; transform: translate(0, -50%); }
.rail a.sealed::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--rubedo); animation: seal 3.2s ease-out infinite; }
@keyframes seal { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.rail::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); z-index: -1; }

/* ---------- page ---------- */
main { position: relative; z-index: 2; overflow-x: clip; }
.hero { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px 24px 80px; }
.hero-in { max-width: 980px; display: grid; justify-items: center; gap: 26px; }
.hero h1 { margin: 0; font: 330 clamp(40px, 6.6vw, 104px)/1.02 var(--serif); letter-spacing: -.03em; font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1; text-wrap: balance; }
.hero .sub { margin: 0; font: 340 clamp(19px, 1.9vw, 26px)/1.4 var(--serif); font-style: italic; color: var(--soft); }
.hero .meta { color: var(--faint); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero .meta b { font-weight: 400; color: var(--bronze); }
.descend { margin-top: 30px; display: grid; justify-items: center; gap: 10px; color: var(--faint); text-decoration: none; }
.descend i { width: 1px; height: 46px; background: linear-gradient(var(--bronze), transparent); animation: drip 2.8s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.chamber { min-height: 92vh; display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 640px); gap: clamp(28px, 6vw, 96px); justify-content: center; align-content: center; padding: 14vh max(24px, 7vw) 14vh max(72px, 9vw); position: relative; }
.chamber::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(90vw, 980px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 9%, transparent), transparent); pointer-events: none; z-index: -1; opacity: 0; transition: opacity 2.4s var(--ease); }
.chamber.in::before { opacity: 1; }
.c-meta { display: grid; align-content: start; gap: 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
.c-num { font: 300 italic clamp(44px, 5vw, 76px)/1 var(--serif); color: var(--c); font-variation-settings: 'opsz' 144; }
.chamber[data-stage="nigredo"] .c-num { color: var(--faint); }
.c-stage { color: var(--ink); }
.c-sub { color: var(--faint); }
.c-body h2 { margin: 0 0 30px; font: 340 clamp(30px, 3.7vw, 56px)/1.08 var(--serif); letter-spacing: -.02em; font-variation-settings: 'opsz' 144, 'WONK' 1; text-wrap: balance; }
.c-body p { margin: 0 0 1.05em; font: 340 clamp(17px, 1.3vw, 19.5px)/1.62 var(--serif); color: var(--soft); max-width: 36em; text-wrap: pretty; }
.c-body p.lead { color: var(--ink); }

/* reveals */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 100ms); }
.in .rv { opacity: 1; transform: none; }

/* the constellation */
.constellation { margin: 34px 0 0; position: relative; width: min(100%, 560px); aspect-ratio: 1; }
.constellation canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.constellation figcaption { position: absolute; left: 0; bottom: -8px; display: flex; gap: 14px; color: var(--faint); }
.constellation figcaption b { color: var(--bronze-hi); font-weight: 400; min-width: 3ch; }

/* the manifest */
.manifest { margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); max-width: 36em; }
.manifest li { display: grid; grid-template-columns: 9.5em 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.manifest .k { color: var(--faint); }
.manifest .v { font: 340 16px/1.45 var(--serif); color: var(--ink); }
.manifest .v.dim { color: var(--faint); font-style: italic; }

/* the gangway */
.gangway { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 16vh 24px 20vh; position: relative; --c: var(--rubedo); }
.gangway::before { content: ''; position: absolute; left: 50%; top: 42%; width: min(110vw, 1100px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(142, 35, 24, .16), transparent); pointer-events: none; z-index: -1; }
.g-in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; max-width: 760px; }
.g-in h2 { margin: 0; font: 330 clamp(34px, 4.6vw, 70px)/1.05 var(--serif); letter-spacing: -.025em; font-variation-settings: 'opsz' 144, 'WONK' 1; text-wrap: balance; }
.g-in .when { color: var(--bronze-hi); }
.g-in .lede { margin: 0; font: 340 18px/1.6 var(--serif); color: var(--soft); max-width: 30em; }
.doors { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.door { font: 500 12.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 15px 22px; border: 1px solid var(--rule); border-radius: 999px; transition: border-color .5s var(--ease), color .5s var(--ease), background .5s var(--ease); }
.door:hover, .door[aria-expanded="true"] { border-color: var(--bronze); color: var(--bronze-hi); }
.door[aria-expanded="true"] { background: rgba(201, 164, 106, .07); }
#passage { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; width: min(100%, 460px); margin-top: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .9s var(--ease), opacity .9s var(--ease); }
#passage.open { max-height: 1600px; opacity: 1; }
#passage .note { margin: 0; font: 340 italic 16.5px/1.5 var(--serif); color: var(--soft); }
/* the application: one form, two doors; each door switches on its own fieldsets (site.js) */
#passage { text-align: left; }
#passage .note { text-align: center; justify-self: center; }
#passage fieldset { border: 0; margin: 0; padding: 0; min-width: 0; width: 100%; }
#passage fieldset[disabled] { display: none; }
.fld { display: grid; gap: 8px; width: 100%; }
.fld[hidden] { display: none; }
.fld .mono, .modes legend { color: var(--faint); text-transform: none; letter-spacing: .02em; font-size: 12px; }
.fld input, .fld textarea { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--faint); color: var(--ink); font: 340 18px/1.45 var(--serif); padding: 6px 2px 10px; outline: none; resize: vertical; transition: border-color .4s; }
.fld textarea { min-height: 3.2em; }
.fld input:focus, .fld textarea:focus { border-color: var(--bronze); }
.fld.bad input, .fld.bad textarea { border-color: #b4574a; }
.modes { display: flex !important; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
#passage .modes[disabled] { display: none !important; }
.modes legend { width: 100%; margin-bottom: 8px; padding: 0; }
.modes label { display: flex; align-items: center; gap: 8px; font: 340 17px var(--serif); color: var(--soft); }
.modes input { accent-color: #C9A46A; }
.consent { margin: 4px 0 0; font: 340 italic 14.5px/1.5 var(--serif); color: var(--faint); text-align: center; justify-self: center; }
.door.send { justify-self: center; border-color: var(--bronze); color: var(--bronze-hi); }
#formMsg { text-align: center; justify-self: center; }

/* the proof ledger, the lessons, the vows */
.ledger-group { margin-top: 26px; max-width: 36em; }
.ledger-group .g { margin: 22px 0 0; color: var(--bronze-hi); }
.ledger-group .g:first-child { margin-top: 0; }
.ledger-group .ledger { margin-top: 10px; }
.c-body p.close { margin-top: 22px; color: var(--ink); font-style: italic; }
.ledger { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--rule); max-width: 36em; }
.ledger li { display: grid; grid-template-columns: 11.5em 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.ledger .k { color: var(--bronze); padding-top: 3px; }
.ledger .v { font: 340 16.5px/1.45 var(--serif); color: var(--ink); }
.lessons { list-style: none; margin: 8px 0 0; padding: 0; max-width: 36em; display: grid; gap: 12px; }
.lessons li { font: 340 clamp(18px, 1.5vw, 21px)/1.45 var(--serif); color: var(--ink); padding-left: 22px; position: relative; }
.lessons li::before { content: ''; position: absolute; left: 0; top: .62em; width: 9px; height: 1px; background: var(--c, var(--bronze)); }
.manifest .v i.dim { color: var(--faint); }
.vows { margin-top: 34px; padding: 22px 0 0; border-top: 1px solid var(--rule); max-width: 36em; display: grid; gap: 10px; }
.vows .mono { color: var(--faint); margin: 0 0 4px; }
.vows p { margin: 0; font: 340 clamp(18px, 1.5vw, 21px)/1.45 var(--serif); color: var(--soft); }
.vows b { font-weight: 420; color: var(--bronze-hi); }
footer a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
footer a:hover { color: var(--bronze-hi); border-color: var(--bronze); }
@media (max-width: 860px) { .ledger li { grid-template-columns: 1fr; gap: 4px; } }
#formMsg { min-height: 1.5em; color: var(--faint); }
.held { display: none; gap: 12px; justify-items: center; }
.held.show { display: grid; animation: rise 1.6s var(--ease) both; }
.held p { margin: 0; font: 330 clamp(28px, 3vw, 44px)/1.15 var(--serif); }
.held .mono { color: var(--faint); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.bot { position: absolute; left: -9999px; }

#burst { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }

footer { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; padding: 26px 28px 30px; border-top: 1px solid var(--rule); color: var(--faint); }
footer span b { font-weight: 400; color: var(--soft); }

/* ---------- cursor ---------- */
#cursor, #cursorDot { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; border-radius: 50%; display: none; }
#cursor, #cursorDot { opacity: 0; transition: opacity .4s; }
body.pointed #cursor, body.pointed #cursorDot { opacity: 1; }
@media (pointer: fine) {
  #cursor { display: block; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid rgba(201, 164, 106, .55); transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), border-color .4s; }
  #cursorDot { display: block; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--bronze-hi); }
  body.hovering #cursor { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-color: var(--bronze-hi); }
  body, body * { cursor: none !important; }
  #passage input:not([type=radio]), #passage textarea { cursor: text !important; }
}

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .rail { display: none; }
  .head { padding: 0 18px; height: 60px; }
  .head-right .when { display: none; }
  .chamber { grid-template-columns: 1fr; gap: 26px; padding: 12vh 24px; min-height: auto; }
  .c-meta { grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 4px; padding-top: 14px; }
  .c-num { grid-row: 1 / span 2; grid-column: 1; align-self: center; }
  .c-stage { grid-column: 2; align-self: end; }
  .c-sub { grid-column: 2; align-self: start; }
  .manifest li { grid-template-columns: 1fr; gap: 4px; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
}

/* ---------- v5: the thesis, the present ledger, the horizon, the promises at the door ---------- */
.c-body p.thesis { margin: 30px 0 0; padding-left: 22px; border-left: 1px solid var(--bronze); font: 330 italic clamp(22px, 2.3vw, 32px)/1.32 var(--serif); color: var(--bronze-hi); max-width: 26em; text-wrap: balance; }
.g-after { margin: 40px 0 0; color: var(--bronze-hi); }
.c-body .lessons { margin-top: 14px; }

/* the present: what is done, what is happening now, what comes next. Updated by hand. */
.status { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--rule); max-width: 36em; }
.status li { display: grid; grid-template-columns: 14px 7.5em 1fr; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.status i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--bronze); position: relative; top: 1px; }
.status .done i { background: var(--bronze); }
.status .now i { background: var(--bronze-hi); box-shadow: 0 0 0 0 rgba(221, 190, 140, .6); animation: nowpulse 2.4s ease-out infinite; }
@keyframes nowpulse { 0% { box-shadow: 0 0 0 0 rgba(221, 190, 140, .55); } 100% { box-shadow: 0 0 0 9px rgba(221, 190, 140, 0); } }
.status .next i { border-color: var(--soft); }
.status .k { color: var(--soft); }
.status .now .k { color: var(--bronze-hi); }
.status .v { font: 340 16.5px/1.45 var(--serif); color: var(--ink); }
.status .next .v { color: var(--soft); }

/* the future: three horizons */
.horizon { list-style: none; margin: 30px 0 0; padding: 0; max-width: 36em; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.horizon li { display: grid; grid-template-columns: 9.5em 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.horizon .k { color: var(--bronze); padding-top: 3px; }
.horizon .v { font: 340 clamp(17px, 1.35vw, 19px)/1.5 var(--serif); color: var(--ink); }
.horizon li:last-child .v { color: var(--bronze-hi); font-style: italic; }

/* the promises, at the door */
.promises { width: min(100%, 620px); text-align: left; margin-top: 8px; padding: 22px 0 4px; border-top: 1px solid var(--rule); }
.promises .mono { color: var(--soft); margin: 0 0 12px; text-align: center; }
.promises ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.promises li { font: 340 15.5px/1.5 var(--serif); color: var(--soft); }
.promises b { font-weight: 420; color: var(--bronze-hi); }

@media (max-width: 860px) {
  .status li { grid-template-columns: 14px 6.5em 1fr; gap: 12px; }
  .horizon li { grid-template-columns: 1fr; gap: 4px; }
  .promises ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .status .now i { animation: none; } }

/* ---------- v6: one timeline, research to horizon, with a "we are here" marker ---------- */
.timeline { list-style: none; margin: 34px 0 0; padding: 0 0 0 30px; max-width: 38em; position: relative; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--bronze) 0%, var(--bronze) 42%, var(--rule) 46%, var(--rule) 100%); }
.timeline li { position: relative; display: grid; grid-template-columns: 8.5em 1fr; column-gap: 20px; row-gap: 4px; padding: 0 0 26px; }
.timeline li::before { content: ''; position: absolute; left: -29px; top: 6px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--bronze); background: var(--bg); }
.timeline .past::before { background: var(--bronze); }
.timeline .here::before { background: var(--bronze-hi); border-color: var(--bronze-hi); animation: nowpulse 2.4s ease-out infinite; }
.timeline .next::before, .timeline .horizon-end::before { border-color: var(--soft); }
.timeline .when { grid-row: span 2; color: var(--soft); padding-top: 4px; }
.timeline .past .when { color: var(--bronze); }
.timeline .here .when { color: var(--bronze-hi); }
.timeline .phase { font: 380 clamp(19px, 1.6vw, 23px)/1.25 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.timeline .what { font: 340 16px/1.5 var(--serif); color: var(--soft); }
.timeline .past .what { color: var(--ink); opacity: .82; }
.timeline .here { padding: 16px 18px 22px; margin: 0 0 26px -12px; border: 1px solid rgba(201, 164, 106, .45); border-radius: 4px; background: rgba(201, 164, 106, .05); }
.timeline .here::before { left: -17px; top: 22px; }
.timeline .here .phase { color: var(--bronze-hi); }
.timeline .here .what { color: var(--ink); }
.timeline .tag { display: inline-block; margin-left: 10px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--bronze); color: var(--bronze-hi); font-weight: 400; vertical-align: middle; position: relative; top: -2px; }
.timeline .next .phase { color: var(--soft); }
.timeline .horizon-end .phase { color: var(--bronze-hi); font-style: italic; }
.timeline .horizon-end .what { font-style: italic; }
@media (max-width: 860px) {
  .timeline { padding-left: 24px; }
  .timeline li { grid-template-columns: 1fr; }
  .timeline .when { grid-row: auto; padding-top: 0; }
  .timeline li::before { left: -23px; }
  .timeline .here { margin-left: -8px; padding: 14px 14px 18px; }
  .timeline .here::before { left: -15px; top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .timeline .here::before { animation: none; } }