/* ===========================================================================
   AEROSPACE HISTORY — style.css
   Paper-archive palette, mobile-first single column, vertical time axis.

   Palette   ink on kraft paper; one printing ink per country
             --us NASA red   --fr French blue   --ru Vostok ochre
   Type      Bitter (slab display) / PT Sans (body) / JetBrains Mono (data)
             all three carry Cyrillic; Noto swaps in for Chinese
   Layout    560px max column, 60px left gutter reserved for the time axis
   =========================================================================== */

:root{
  --paper:#EDE4D0; --paper2:#E4D8BE; --card:#F4EDDC;
  --ink:#191510; --ink2:#5C5142; --rule:rgba(25,21,16,.18);
  --us:#B8352A; --fr:#27477A; --ru:#A9761A; --int:#3E5C4A;
  --disp:'Bitter',Georgia,serif; --body:'PT Sans',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
}
html[lang="zh"]{--disp:'Noto Serif SC',serif;--body:'Noto Sans SC',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.5;
  background-image:radial-gradient(circle at 12% 8%,rgba(140,118,80,.10),transparent 42%),radial-gradient(circle at 88% 62%,rgba(140,118,80,.09),transparent 46%);
  background-attachment:fixed}
.app{max-width:560px;margin:0 auto;padding:0 34px 128px 12px}

header{position:sticky;top:0;z-index:30;background:rgba(237,228,208,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);margin:0 -34px 0 -12px;padding:0 34px 0 12px}
.hrow{display:flex;align-items:center;justify-content:space-between;height:52px;gap:10px}
.logo{font-family:var(--disp);font-weight:800;font-size:14px;line-height:1.05}
.logo i{font-style:normal;display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;color:var(--ink2);font-weight:400}
.lang{display:flex;gap:1px}
.lang a{font-family:var(--mono);font-size:10.5px;color:var(--ink2);padding:8px 5px;text-decoration:none;border-bottom:2px solid transparent}
.lang a[aria-current=true]{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}
.lang a:hover{color:var(--ink)}
a.logo{color:inherit;text-decoration:none}
button:focus-visible{outline:2px solid var(--ru);outline-offset:2px}

/* era navigation */
.eranav{display:flex;gap:6px;overflow-x:auto;padding:9px 0;border-top:1px solid var(--rule);scrollbar-width:none}
.eranav::-webkit-scrollbar{display:none}
.eranav button{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.05em;background:none;border:1px solid var(--rule);color:var(--ink2);padding:7px 10px;cursor:pointer;white-space:nowrap;line-height:1.3;text-align:left}
.eranav button b{display:block;font-family:var(--body);font-size:11.5px;letter-spacing:0;font-weight:700}
.eranav button[aria-current=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.intro{padding:30px 0 24px}
.stamp{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--ink);padding:5px 9px;transform:rotate(-1.4deg);margin-bottom:18px}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,8vw,40px);line-height:1.05;letter-spacing:-.015em}
h1 em{font-style:italic;font-family:var(--body);font-weight:400}
.lede{margin-top:14px;font-size:16px;color:#3A3226}
.count{margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink2);display:flex;gap:14px;flex-wrap:wrap}

/* the vertical time axis */
#feed{position:relative}
#feed:before{content:"";position:absolute;left:33px;top:0;bottom:60px;width:1px;background:var(--rule)}
.item,.mark{padding-left:60px;position:relative}
.item{border-bottom:1px solid var(--rule);padding-top:24px;padding-bottom:28px;scroll-margin-top:132px}
.item.hide,.mark.hide{display:none}
.item:after{content:"";position:absolute;left:29px;top:30px;width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--paper)}
.item.us:after{background:var(--us)}.item.fr:after{background:var(--fr)}.item.ru:after{background:var(--ru)}.item.int:after{background:var(--int)}
.yr{position:absolute;left:0;top:29px;font-family:var(--mono);font-size:9px;font-weight:700;color:var(--ink2);letter-spacing:.02em}
.item.flash{animation:fl 1.6s ease}
@keyframes fl{0%,60%{background:rgba(169,118,26,.16)}100%{background:transparent}}

/* era marker on the axis */
.mark{padding-top:34px;padding-bottom:14px;scroll-margin-top:118px}
.mark:after{content:"";position:absolute;left:26px;top:40px;width:16px;height:16px;background:var(--ink);box-shadow:0 0 0 5px var(--paper);transform:rotate(45deg)}
.mark h2{font-family:var(--disp);font-weight:800;font-size:26px;line-height:1.1}
.mark span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink2)}

.tag{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);margin-bottom:11px}
.tag s{width:7px;height:7px;border-radius:50%;text-decoration:none;flex:none}
.tag u{text-decoration:none;margin-left:auto;font-weight:700;color:var(--ink);letter-spacing:.06em}
.plate{background:var(--card);border:1px solid var(--rule);padding:14px 10px;position:relative;overflow:hidden}
.plate:after{content:"";position:absolute;inset:6px;border:1px dashed rgba(25,21,16,.13);pointer-events:none}
.plate svg{display:block;width:100%;height:auto;color:var(--ink)}
.plate .cap{position:absolute;left:11px;bottom:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--ink2);text-transform:uppercase}
h3{font-family:var(--disp);font-weight:800;font-size:21px;line-height:1.15;margin:14px 0 2px;letter-spacing:-.01em}
.dates{font-family:var(--mono);font-size:11px;color:var(--ink2);letter-spacing:.06em}
.hook{margin-top:9px;font-size:16px;line-height:1.45}
.specs{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.specs div{background:var(--paper);padding:8px 10px}
.specs dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.specs dd{font-family:var(--mono);font-size:14px;font-weight:700;margin-top:3px}
.portrait{width:96px;height:96px;border-radius:50%;background:var(--card);border:1px solid var(--rule);overflow:hidden;flex:none}
.portrait svg{width:100%;height:100%;display:block;color:rgba(25,21,16,.34)}
.phead{display:flex;gap:14px;align-items:center}
.role{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.person h3{margin-top:5px;font-size:19px}
.person .plate{display:none}

/* time scrubber, right edge */
.scrub{position:fixed;right:8px;top:132px;bottom:104px;width:24px;z-index:25;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
.scrub:before{content:"";position:absolute;top:4px;bottom:4px;width:1px;background:var(--rule)}
.scrub button{position:relative;width:24px;height:24px;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:8px;color:var(--ink2);display:flex;align-items:center;justify-content:center}
.scrub button:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--paper);border:1px solid var(--ink2)}
.scrub button span{position:relative;z-index:1;opacity:0}
.scrub button[aria-current=true]:before{background:var(--ink);border-color:var(--ink);width:18px;height:18px}
.scrub button[aria-current=true] span{opacity:1;color:var(--paper);font-weight:700}

/* bottom bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(228,216,190,.96);backdrop-filter:blur(12px);border-top:1px solid var(--rule);padding:9px 0 calc(9px + env(safe-area-inset-bottom))}
.bar .in{max-width:560px;margin:0 auto;display:flex;gap:6px;overflow-x:auto;padding:0 16px;scrollbar-width:none}
.bar .in::-webkit-scrollbar{display:none}
.chip{flex:none;font-family:var(--mono);font-size:11px;background:none;border:1px solid var(--rule);color:var(--ink2);padding:9px 12px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px}
.chip s{width:7px;height:7px;border-radius:50%}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:700}
.chip.rnd{border-color:var(--ink);color:var(--ink);font-weight:700}
.end{padding:34px 0 8px;padding-left:60px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink2);text-transform:uppercase}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.item.flash{animation:none}}
/* --------------------------------------------------------------- photographs
   A photograph replaces the silhouette when one has been licensed. The frame,
   the caption and the credit line are identical for machines and for people,
   so the page does not change rhythm when a picture arrives. */
.shot{margin:0;background:var(--card);border:1px solid var(--rule);padding:8px}
.shot img{display:block;width:100%;height:auto;background:var(--paper2)}
.shot figcaption{font-family:var(--mono);font-size:8.5px;line-height:1.5;letter-spacing:.04em;
  color:var(--ink2);margin-top:7px;text-transform:uppercase}
.shot figcaption a{color:var(--ink2)}
.person .shot{width:96px;flex:none;padding:5px;border-radius:0}
.person .shot img{aspect-ratio:1;object-fit:cover;object-position:50% 22%}
.person .shot figcaption{display:none}
.person .shot+div .role{margin-top:0}
/* credit for a portrait moves under the whole card, where there is room */
.person .credit{font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;color:var(--ink2);
  margin-top:10px;text-transform:uppercase}
.item:target{animation:fl 2s ease}