/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · theme: Almanac · enrichment: procedural 3D instruments · nav: N6 · footer: Ft4 · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast/slop/mobile: pass */
*{box-sizing:border-box}
html,body{margin:0;min-width:0;overflow-x:clip;background:var(--color-paper);color:var(--color-ink)}
html{scroll-behavior:smooth}
body{font:400 var(--text-base)/1.58 var(--font-body);background-image:linear-gradient(to right,color-mix(in oklch,var(--color-rule) 18%,transparent) 1px,transparent 1px);background-size:clamp(3rem,7vw,7rem) 100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{cursor:not-allowed;opacity:.42}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
button:active{transform:translateY(1px)}
.skip{position:fixed;z-index:1000;inset-block-start:-7rem;inset-inline-start:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-ink);color:var(--color-paper);font:500 var(--text-sm)/1 var(--font-mono)}
.skip:focus{inset-block-start:var(--space-sm)}
.loader{position:fixed;z-index:900;inset:0;display:grid;place-items:center;background:var(--color-paper)}
.loader[hidden]{display:none}
.loader__box{width:min(30rem,calc(100% - 2rem));padding-block:var(--space-lg);border-block:var(--rule-heavy) double var(--color-ink);font:500 var(--text-sm)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.loader__rule{height:.25rem;margin-block:var(--space-md);overflow:hidden;background:var(--color-paper-3)}
.loader__rule i{display:block;width:24%;height:100%;background:var(--color-1972);animation:load var(--dur-long) var(--ease-in-out) infinite alternate}
@keyframes load{to{transform:translateX(315%)}}
.masthead{max-width:var(--max-width);margin:auto;padding:var(--space-md);border-bottom:var(--rule-heavy) double var(--color-ink)}
.masthead__issue{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding-block:var(--space-sm);border-block:var(--rule-hair) solid var(--color-ink);font:500 var(--text-xs)/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.masthead__issue strong{font-family:var(--font-display);font-size:var(--text-md);letter-spacing:-.02em}
.masthead__title{padding-block:var(--space-2xl)}
.masthead__title h1{margin:0;min-width:0;overflow-wrap:anywhere;font:700 var(--text-display)/.92 var(--font-display);letter-spacing:-.045em}
.masthead__title h1 em{font-weight:500;color:var(--color-1972)}
.masthead__title p{max-width:65ch;margin:var(--space-lg) 0 0;font-size:var(--text-md)}
.masthead__note{padding-block:var(--space-lg);border-top:var(--rule-hair) solid var(--color-rule);display:grid;gap:var(--space-sm)}
.masthead__note span{font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.12em}
.masthead__note p{max-width:65ch;margin:0;color:var(--color-ink-soft)}
main{max-width:var(--max-width);margin:auto;padding:var(--space-md)}
.timeline-shell{display:grid;gap:var(--space-lg);padding-block:var(--space-xl) var(--space-2xl)}
.era-rail{min-width:0;border-top:var(--rule-heavy) solid var(--color-ink)}
.era-rail__head{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-sm);border-bottom:var(--rule-hair) solid var(--color-ink);font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.era-picker{display:grid}
.era-pick{--era:var(--color-1972);position:relative;display:grid;grid-template-columns:5.25rem minmax(0,1fr);min-height:6.75rem;padding:0;border:0;border-bottom:var(--rule-hair) solid var(--color-rule);background:transparent;text-align:start}
.era-pick canvas{display:block;width:5.25rem;height:6.7rem;border-inline-end:var(--rule-hair) solid var(--color-rule)}
.era-pick__copy{align-self:center;padding:var(--space-sm) var(--space-md)}
.era-pick__year{display:block;font:700 var(--text-xl)/1 var(--font-display);font-variant-numeric:tabular-nums}
.era-pick__name{display:block;margin-top:var(--space-xs);font:600 var(--text-sm)/1.2 var(--font-body)}
.era-pick__lens{display:block;margin-top:var(--space-2xs);font:400 var(--text-xs)/1.3 var(--font-mono);color:var(--color-ink-soft)}
.era-pick[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper)}
.era-pick[aria-pressed="true"]::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:.32rem;background:var(--era)}
.era-pick[aria-pressed="true"] .era-pick__lens{color:var(--color-paper-2)}
.datasheet{padding-block:var(--space-lg)}
.datasheet h2{margin:0 0 var(--space-sm);font:700 var(--text-lg)/1 var(--font-display)}
.specs{margin:0}.specs div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-md);padding-block:.4rem;border-bottom:var(--rule-hair) dotted var(--color-rule);font:400 var(--text-xs)/1.4 var(--font-mono)}
.specs dt,.specs dd{margin:0}.specs dd{text-align:end;font-weight:500}
.instrument{min-width:0}
.stage{position:relative;height:35rem;overflow:hidden;border:var(--rule-hair) solid var(--color-ink);background:var(--color-paper-2);isolation:isolate}
.stage::after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background-image:linear-gradient(to right,color-mix(in oklch,var(--color-rule) 24%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in oklch,var(--color-rule) 24%,transparent) 1px,transparent 1px);background-size:3.5rem 3.5rem}
#main-canvas{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;cursor:grab}
#main-canvas:active{cursor:grabbing}
.stage__head{position:absolute;z-index:5;inset-block-start:0;inset-inline:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-bottom:var(--rule-hair) solid var(--color-ink);font:500 var(--text-xs)/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.stage__hint{position:absolute;z-index:5;inset-inline-start:var(--space-md);inset-block-end:var(--space-sm);max-width:52%;font:400 var(--text-xs)/1.4 var(--font-mono);letter-spacing:.05em;pointer-events:none}
.stage-fallback{position:absolute;z-index:3;inset:0;display:none;place-items:center;padding:var(--space-xl);text-align:center;font-family:var(--font-mono)}
.stage-fallback[aria-hidden="false"]{display:grid}.stage-fallback p{max-width:36ch}
.fallback-camera{width:13rem;height:7rem;border:var(--rule-heavy) solid var(--color-ink);border-radius:var(--radius-md);position:relative;margin:auto}.fallback-camera::before{content:"";position:absolute;width:5rem;height:5rem;border:var(--rule-heavy) double var(--color-ink);border-radius:50%;inset:1rem auto auto 4rem}.fallback-camera::after{content:"";position:absolute;width:4rem;height:2rem;border:var(--rule-heavy) solid var(--color-ink);inset:-2.1rem auto auto 4.5rem}
.labels{position:absolute;z-index:7;inset:0;pointer-events:none}.labels svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.labels line{stroke:var(--color-ink);stroke-width:1;vector-effect:non-scaling-stroke}.label-btn{position:absolute;max-width:6.4rem;min-height:1.8rem;padding:.3rem .42rem;border:var(--rule-hair) solid var(--color-ink);background:var(--color-paper);font:500 var(--text-xs)/1.15 var(--font-mono);text-align:start;text-transform:uppercase;transform:translateX(-50%);pointer-events:auto}.label-btn::before{content:"";display:inline-block;width:.42rem;height:.42rem;margin-inline-end:.35rem;background:var(--era);vertical-align:.02rem}
.transport{display:grid;gap:var(--space-sm);padding:var(--space-sm);border:var(--rule-hair) solid var(--color-ink);border-top:0;background:var(--color-paper)}
.view-toggle{display:flex}.view-toggle button{flex:1;min-height:2.75rem;padding:var(--space-sm) var(--space-md);border:var(--rule-hair) solid var(--color-ink);background:transparent;font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.view-toggle button+button{border-inline-start:0}.view-toggle button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper)}
.explode-control{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-sm);min-height:2.75rem;font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.explode-control input{width:100%;accent-color:var(--color-ink)}.explode-control output{min-width:3.25rem;text-align:end;font-variant-numeric:tabular-nums}
.reset-view{min-height:2.75rem;padding:var(--space-sm) var(--space-md);border:var(--rule-hair) solid var(--color-ink);background:transparent;font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.manifest-strip{--era:var(--color-1972);display:grid;gap:var(--space-sm);padding:var(--space-md);border-inline:var(--rule-hair) solid var(--color-ink);border-bottom:var(--rule-heavy) solid var(--color-ink);background:var(--color-dark-paper);color:var(--color-dark-ink);font-family:var(--font-mono)}
.manifest-strip__metrics{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);font-size:var(--text-xs);text-transform:uppercase}.manifest-strip__bar{display:flex;height:.42rem;background:var(--color-paper-3)}.manifest-strip__bar i{display:block;background:var(--era);opacity:var(--opacity)}.manifest-strip__legend{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);font-size:var(--text-xs);text-transform:uppercase}.manifest-strip__legend span::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-inline-end:.3rem;background:var(--era);opacity:var(--opacity)}
.parts-ledger{display:grid;margin-top:var(--space-lg);border-top:var(--rule-heavy) solid var(--color-ink)}
.parts-ledger__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);padding-block:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-ink)}
.parts-ledger__head h2{margin:0;font:700 var(--text-xl)/1 var(--font-display)}.parts-ledger__head span{font:500 var(--text-xs)/1 var(--font-mono);text-transform:uppercase}
.parts-list{display:grid;grid-template-columns:minmax(0,1fr)}
.part-row{--era:var(--color-1972);display:grid;grid-template-columns:2.2rem .55rem minmax(0,1fr);align-items:center;min-height:2.75rem;padding:.45rem var(--space-sm);border:0;border-bottom:var(--rule-hair) solid var(--color-rule-soft);background:transparent;text-align:start}.part-row__num{font:500 var(--text-xs)/1 var(--font-mono);color:var(--color-ink-soft)}.part-row__mark{width:.45rem;height:.45rem;background:var(--era);opacity:var(--opacity)}.part-row__name{font-size:var(--text-sm);font-weight:600;line-height:1.2}.part-row[data-active="true"]{background:var(--color-ink);color:var(--color-paper)}.part-row[data-active="true"] .part-row__num{color:var(--color-paper-2)}
.detail{min-height:15rem;padding:var(--space-lg);border-bottom:var(--rule-heavy) solid var(--color-ink);background:var(--color-paper-2)}.detail__category{display:inline-flex;align-items:center;gap:var(--space-xs);font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.detail__category i{width:.55rem;height:.55rem;background:var(--era);opacity:var(--opacity)}.detail h3{margin:var(--space-md) 0 var(--space-xs);font:700 var(--text-xl)/1 var(--font-display)}.detail__line{margin:0 0 var(--space-md);font:400 var(--text-xs)/1.4 var(--font-mono);color:var(--color-ink-soft)}.detail p:last-child{max-width:62ch;margin:0}
.chapters{padding-block:var(--space-4xl);border-top:var(--rule-heavy) double var(--color-ink)}
.chapters__intro{display:grid;gap:var(--space-md);padding-bottom:var(--space-2xl)}.chapters__intro span{font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.1em}.chapters__intro h2{margin:0;min-width:0;overflow-wrap:anywhere;font:700 clamp(2.5rem,6vw,5.2rem)/.95 var(--font-display);letter-spacing:-.04em}
.chapter{--era:var(--color-1972);display:grid;gap:var(--space-md);padding-block:var(--space-2xl);border-top:var(--rule-heavy) solid var(--color-ink)}.chapter__number{font:500 var(--text-sm)/1 var(--font-mono)}.chapter__year{font:700 clamp(4.5rem,18vw,10rem)/.72 var(--font-display);color:var(--era);font-variant-numeric:tabular-nums}.chapter__copy h3{margin:0 0 var(--space-md);font:700 var(--text-2xl)/1 var(--font-display)}.chapter__copy p{max-width:65ch;margin:0 0 var(--space-md)}.chapter--1997{--era:var(--color-1997)}.chapter--2018{--era:var(--color-2018)}
.colophon{max-width:var(--max-width);margin:auto;padding:var(--space-xl) var(--space-md);border-top:var(--rule-heavy) double var(--color-ink);display:grid;gap:var(--space-lg);font:400 var(--text-xs)/1.5 var(--font-mono);text-transform:uppercase}.colophon div{display:grid;gap:var(--space-xs)}.colophon strong{font:700 var(--text-xl)/1 var(--font-display);text-transform:none}.colophon p{max-width:72ch;margin:0}
@media (hover:hover) and (pointer:fine){.era-pick:hover:not([aria-pressed="true"]),.part-row:hover,.view-toggle button:hover:not([aria-pressed="true"]),.reset-view:hover,.label-btn:hover{background:var(--color-paper-3)}}
@media (min-width:40rem){.masthead,.timeline-shell,main,.colophon{padding-inline:var(--space-xl)}.masthead__note{grid-template-columns:9rem minmax(0,1fr)}.transport{grid-template-columns:auto minmax(12rem,1fr) auto;align-items:center}.parts-list{grid-template-columns:repeat(2,minmax(0,1fr))}.part-row:nth-child(odd){border-inline-end:var(--rule-hair) solid var(--color-rule-soft)}.detail{min-height:13rem}.label-btn{max-width:8rem}.chapter{grid-template-columns:4rem 12rem minmax(0,1fr);align-items:start}.chapter__year{font-size:clamp(5rem,13vw,10rem)}.colophon{grid-template-columns:1fr 1fr}}
@media (min-width:60rem){.masthead{display:grid;grid-template-columns:minmax(12rem,.55fr) minmax(0,2fr) minmax(14rem,.72fr);gap:var(--space-xl);align-items:end;padding-top:var(--space-xl)}.masthead__issue{align-self:start;display:grid;border-top:0}.masthead__title{padding-block:var(--space-3xl)}.masthead__note{display:block;padding-block:var(--space-xl);border-top:0;border-inline-start:var(--rule-hair) solid var(--color-rule);padding-inline-start:var(--space-lg)}.masthead__note p{margin-top:var(--space-md)}.timeline-shell{grid-template-columns:minmax(17rem,.72fr) minmax(0,2.28fr);align-items:start;padding-bottom:var(--space-4xl)}.era-rail{position:sticky;top:var(--space-md)}.stage{height:clamp(36rem,68vh,50rem)}.parts-ledger{grid-template-columns:minmax(0,1.25fr) minmax(22rem,.75fr)}.parts-ledger__head{grid-column:1/-1}.parts-list{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}.detail{border-inline-start:var(--rule-hair) solid var(--color-ink);border-bottom:var(--rule-heavy) solid var(--color-ink);min-height:100%}.chapters__intro{grid-template-columns:minmax(0,1fr);align-items:start}.chapter{grid-template-columns:4rem minmax(21rem,23rem) minmax(0,1fr);gap:var(--space-xl)}}
@media (min-width:90rem){.timeline-shell,main,.masthead,.colophon{padding-inline:var(--space-2xl)}.era-pick{grid-template-columns:6.5rem minmax(0,1fr)}.era-pick canvas{width:6.5rem}.stage{height:50rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:150ms!important;animation-iteration-count:1!important;transition-duration:150ms!important;scroll-behavior:auto!important}.loader__rule i{transform:none;width:100%}}