/* /about/ (marker main): the history of OCR as a time-travel page. Thirteen full-width chapters, each with a big OCR-B year in a word box,
   a clip or still, the story text, and the voice. Tokens of ocr.css only (light and dark); no font request, no external file.
   Motif: the amber word box of the product (year, heading words, the word read right now, corners of every picture). */
main{--box:color-mix(in srgb,var(--cta) 24%,transparent);overflow-x:clip;font-family:var(--font-body)}
main *{box-sizing:border-box}
main .ch{position:relative;padding:clamp(44px,7vw,104px) 24px;border-top:1px solid var(--border);scroll-margin-top:56px}
main .section:has(> .section-inner > .ch){padding:0;margin:0;background:none;border:0}
main .section-inner:has(> .ch){max-width:none;width:100%;padding:0;margin:0}
main .ch.flip,main .ch-hero{background:var(--bg-subtle)}
main .ch .ch-in > *{text-align:left}
main .ch-end .ch-in > *{text-align:center}
main .ch-hero{border-top:0;padding-top:clamp(36px,5vw,72px)}
main .ch-in{max-width:1180px;margin:0 auto;display:grid;column-gap:clamp(28px,5vw,72px);grid-template-columns:minmax(0,1fr);
  grid-template-areas:"year" "title" "media" "text" "act" "src" "x"}
main .ch-in > *{min-width:0}
@media (min-width:900px){
main .ch-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto auto auto auto 1fr auto;
  grid-template-areas:"year media" "title media" "text media" "act media" "src media" ". media" "x x"}
main .ch.flip .ch-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-areas:"media year" "media title" "media text" "media act" "media src" "media ." "x x"}
main .ch-media{align-self:start;position:sticky;top:88px}
}
/* year in a word box */
main .ch-year{grid-area:year;position:relative;display:block;margin:22px 0 14px;padding:0;justify-self:start;line-height:1}
main .ch-year b{display:block;font:400 clamp(64px,9vw,128px)/1 var(--font-accent);letter-spacing:.02em;padding:.06em .14em .02em;
  color:var(--text);border:2px solid var(--cta);background:var(--box);border-bottom-width:5px}
main .ch-year i{position:absolute;left:-2px;bottom:100%;margin-bottom:2px;font:600 12px/1 var(--font-accent);letter-spacing:.08em;font-style:normal;
  padding:5px 8px;background:var(--cta);color:var(--on-cta)}
main .ch h2,main .ch-h1{grid-area:title;font-family:var(--font-heading);font-weight:400;letter-spacing:0;color:var(--text);margin:0 0 .6em;max-width:24ch;text-wrap:balance}
main .ch h2{font-size:clamp(25px,3vw,38px);line-height:1.18}
main .hw{display:inline-block;border-radius:2px}
main .ch-text{grid-area:text;margin:0;max-width:46ch;font-size:clamp(18px,1.55vw,21px);line-height:1.65;color:var(--text)}
main .w{border-radius:3px;transition:background-color .12s,box-shadow .12s,color .2s}
main .speaking .w:not(.done):not(.on){color:var(--text-muted)}
main .speaking .w.on{background:var(--box);box-shadow:0 0 0 2px var(--cta)}
main .ch-act{grid-area:act;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 8px}
main .ch-act audio{width:100%;max-width:420px;height:44px}
/* picture or clip */
main .ch-media{grid-area:media;position:relative;margin:0 0 28px;aspect-ratio:16/9;background:#05070f;border:1px solid var(--border);overflow:hidden}
main .ch-media > img,main .ch-media > video{display:block;width:100%;height:100%;object-fit:cover}
main .ch-media::after{content:"";position:absolute;inset:10px;pointer-events:none;--c:var(--cta);
  background:linear-gradient(var(--c),var(--c)) 0 0/24px 3px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/3px 24px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 0/24px 3px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/3px 24px no-repeat,
  linear-gradient(var(--c),var(--c)) 0 100%/24px 3px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/3px 24px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 100%/24px 3px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/3px 24px no-repeat}
main .ch-media::before{content:"AI illustration";position:absolute;left:18px;bottom:16px;z-index:2;padding:4px 7px;font:600 11px/1 var(--font-accent);letter-spacing:.08em;
  color:#fff;background:rgba(6,16,79,.78);pointer-events:none}
main .pace{position:absolute;top:22px;right:22px;z-index:2;padding:8px 12px 9px;background:rgba(6,16,79,.84);border:2px solid var(--cta);color:#fff;text-align:left;pointer-events:none}
main .pace b{display:block;font:400 clamp(22px,3vw,34px)/1 var(--font-accent);color:var(--cta);font-weight:400}
main .pace i{display:block;margin-top:4px;font-style:normal;font-size:13px;line-height:1.2}
main .ebox{position:absolute;left:44.2%;top:56.8%;width:12.4%;height:14.4%;border:2px solid var(--cta);background:var(--box);z-index:1;pointer-events:none;border-bottom-width:4px}
main .ebox i{position:absolute;left:-2px;bottom:100%;padding:3px 6px;font:600 11px/1 var(--font-accent);letter-spacing:.06em;font-style:normal;background:var(--cta);color:var(--on-cta)}
main .vid-toggle{position:absolute;right:14px;bottom:12px;z-index:3;width:44px;height:44px;border:0;background:rgba(6,16,79,.78);color:#fff;cursor:pointer;display:grid;place-items:center}
main .vid-toggle:hover{background:rgba(6,16,79,.95)}
main .vid-toggle::before{content:"";width:14px;height:16px;background:currentColor;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
main .vid-toggle[aria-pressed=true]::before{clip-path:polygon(0 0,100% 50%,0 100%)}
/* hero */
main .ch-hero .ch-in{grid-template-areas:"title" "media" "intro"}
@media (min-width:900px){
main .ch-hero .ch-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"title media" "intro media";align-items:start}
}
main .ch-h1{font-size:clamp(32px,4.6vw,58px);line-height:1.08;max-width:15ch;margin-bottom:.5em}
main .ch-intro{grid-area:intro}
main .ch-hero .ch-text{font-size:clamp(20px,2vw,25px);line-height:1.5;max-width:30ch;color:var(--text)}
main .ch-note{margin:14px 0 0;max-width:52ch;font-size:15px;line-height:1.55;color:var(--text-muted)}
main .story-jump{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
main .story-jump li{margin:0;max-width:none}
main .story-jump a{display:block;padding:7px 12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:400 14px/1.3 var(--font-accent);text-decoration:none;min-height:34px}
main .story-jump a:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--bg))}
main .story-jump a[aria-current=true]{border-color:var(--cta);background:var(--box)}
/* play buttons */
main .ch-play,main .whole{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;border:1px solid var(--primary);background:transparent;color:var(--primary);font:600 15px/1.2 var(--font-body);cursor:pointer}
main .whole{background:var(--cta);border-color:var(--cta);color:var(--on-cta)}
main .ch-play:hover{background:color-mix(in srgb,var(--primary) 9%,var(--bg))}
main .whole:hover{background:var(--cta-hover)}
main .ch-play::before,main .whole::before{content:"";width:12px;height:14px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);flex:none}
main .ch-play[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}
main .ch-play[aria-pressed=true]::before,main .whole[aria-pressed=true]::before{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
main .ch-play small{font-weight:400;font-size:13px;opacity:.85}
/* sources */
main .ch-src{grid-area:src;margin-top:8px;font-size:14px}
main .ch-src summary{cursor:pointer;display:inline-block;padding:10px 0;color:var(--text-muted);font-weight:600}
main .ch-src ul{margin:0 0 8px;padding-left:1.1em;line-height:1.55;color:var(--text-muted);max-width:60ch}
main .ch-src li{margin:0 0 6px;max-width:none}
main .ch-src a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
/* speed ladder */
main .ladder{grid-area:x;margin:36px 0 0;padding:20px 20px 12px;border:1px solid var(--border);background:var(--bg)}
main .ld{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:14px;margin:0 0 14px}
main .ld-y{grid-row:1/3;font:400 22px/34px var(--font-accent);color:var(--text)}
main .ld-bar{display:block;height:34px;width:var(--w);border:2px solid var(--cta);border-bottom-width:4px;background:var(--box);transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
main .ld-t{margin-top:4px;font-size:15px;color:var(--text)}
main .ladder figcaption{margin:4px 0 6px;font-size:13px;line-height:1.5;color:var(--text-muted);max-width:70ch}
/* end card and bridge */
main .ch-end{background:var(--footer-bg);color:#fff;border-top:0;text-align:center}
main .ch-end .ch-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"card" "h" "t";justify-items:center}
main .end-card{grid-area:card;margin:0 0 .6em;font:400 clamp(34px,8vw,100px)/1.1 var(--font-accent);color:#fff}
main .end-card b{display:inline-block;font-weight:400;padding:0 .12em;border:2px solid var(--cta);border-bottom-width:5px;background:color-mix(in srgb,var(--cta) 22%,transparent)}
main .ch-end h2{grid-area:h;color:#fff;margin:0 0 .5em;max-width:none;font-size:clamp(24px,3vw,34px)}
main .end-text{grid-area:t;margin:0;max-width:56ch;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#e9ecf1}
main .end-text a{color:var(--cta);text-decoration:underline;text-underline-offset:3px}
main .ch-end a:focus-visible{outline-color:#fff}
/* player dock (made by about.js) */
.story-dock{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg);color:var(--text);border-top:1px solid var(--border);box-shadow:0 -6px 24px var(--shadow);padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
.story-dock[hidden]{display:none}
.story-dock .dk-bar{position:absolute;left:0;top:-1px;height:3px;width:var(--p,0%);background:var(--cta)}
.story-dock .dk-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:6px}
.story-dock button{width:44px;height:44px;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;display:grid;place-items:center;flex:none}
.story-dock button:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--bg))}
.story-dock svg{width:18px;height:18px;fill:currentColor}
.story-dock .dk-pp{background:var(--cta);border-color:var(--cta);color:var(--on-cta)}
.story-dock .dk-t{flex:1;min-width:0;padding:0 8px;line-height:1.25}
.story-dock .dk-t b{font:400 22px/1 var(--font-accent);margin-right:8px}
.story-dock .dk-t span{font-size:13px;color:var(--text-muted)}
html.dock-on body{padding-bottom:72px}
/* motion only with script, and only when allowed */
@media (prefers-reduced-motion:no-preference){
.js-story .ch:not(.seen) .ch-year b{clip-path:inset(0 100% 0 0)}
.js-story .ch .ch-year b{transition:clip-path .8s cubic-bezier(.2,.7,.2,1)}
.js-story .ch.seen .ch-year b{clip-path:inset(0 0 0 0)}
.js-story .ch:not(.seen) .ch-media{opacity:0;transform:translateY(20px)}
.js-story .ch .ch-media{transition:opacity .8s ease .15s,transform .8s ease .15s}
.js-story .ch:not(.ch-hero):not(.seen) .ch-text{opacity:0}
.js-story .ch .ch-text{transition:opacity .8s ease .3s}
.js-story .ch.seen .hw{animation:hwscan 1.2s ease both;animation-delay:calc(var(--k) * 70ms + .3s)}
.js-story .ladder:not(.seen) .ld-bar{width:0}
}
@keyframes hwscan{0%{box-shadow:0 0 0 0 transparent;background:transparent}25%,55%{box-shadow:0 0 0 2px var(--cta);background:var(--box)}100%{box-shadow:0 0 0 0 transparent;background:transparent}}
@media (max-width:600px){
main .ch{padding-left:16px;padding-right:16px}
main .ch-year b{font-size:clamp(56px,20vw,92px)}
main .pace{top:16px;right:16px}
main .ch-media::after{inset:6px}
main .ch-media::before{left:12px;bottom:12px}
main .ch-act{margin-top:20px}
main .ladder{padding:14px 14px 8px}
main .ld{grid-template-columns:48px minmax(0,1fr)}
.story-dock .dk-t b{font-size:18px}
}