/* Sampled from the airframe itself. The fuselage reads blue in the photographs
   only because glossy black mirrors the sky and the hangar: the shadowed
   panels measure #0D0D0D. The registration on the boom is a warm champagne,
   #E7DCCC at its brightest. So: black, with champagne as the accent. */
:root{--bg:#f6f6f5;--ink:#0b0b0c;--mut:#5c5f63;--line:#e4e3e0;--card:#fff;
--acc:#121214;--accd:#000000;--deep:#0c0c0d;--steel:#1b1b1d;
--reg:#e7dccc;--gold:#f0a800;--bronze:#c4121b;
--sig:#d8000c;--tip:#f0a800;
--sh:0 1px 2px rgba(16,24,40,.06),0 10px 28px -10px rgba(16,24,40,.20);
--sh-lift:0 3px 6px rgba(16,24,40,.07),0 20px 40px -16px rgba(16,24,40,.28)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.d{font-family:'Barlow Condensed','Arial Narrow',sans-serif;line-height:1.02;letter-spacing:.01em;font-weight:700;text-transform:uppercase}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}img{max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--bronze);outline-offset:2px;border-radius:4px}

header{position:sticky;top:0;z-index:30;backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  background-color:#fff;
  background-image:url("/assets/img/flagband.svg");
  background-size:cover;background-repeat:no-repeat;background-position:left center}
.logo,.navr{z-index:2}
@media(max-width:700px){header{background-image:none;background-color:rgba(255,255,255,.92)}}
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 24px;max-width:1160px;margin:0 auto;position:relative}
.logo a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo .mk{width:auto;height:50px;background:none;border-radius:0;padding:0;flex:none}
.logo .mk img{height:100%;width:auto;display:block}
.logo .mk svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8}
.logo .wm{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:23px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.logo small{display:block;font-weight:600;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.navr{display:flex;align-items:center;gap:20px}
.links{display:flex;gap:22px;align-items:center}
@media(min-width:961px){
  .links{gap:20px}
  .links .mcta{display:none}
  .links a{text-shadow:0 0 7px rgba(255,255,255,.92),0 1px 0 rgba(255,255,255,.85)}
}
.links .mcta{display:none}
.links a{color:var(--ink);text-decoration:none;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:19px;letter-spacing:.02em}
.links a:hover,.links a.on{color:var(--bronze)}
.btn{background:var(--acc);color:#fff;text-decoration:none;font-weight:700;padding:11px 20px;border-radius:7px;font-size:15px;transition:.18s;border:0;cursor:pointer}
header .btn{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:19px;letter-spacing:.03em;padding:10px 20px}
.btn:hover{background:var(--accd)}
.menu{display:none;background:none;border:0;font-size:24px;color:var(--ink);cursor:pointer;padding:4px}
@media(max-width:960px){.menu{display:block;padding:9px 10px;min-width:44px;min-height:44px}
 .links{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:6px 24px 14px;border-bottom:1px solid var(--line);box-shadow:0 14px 26px -14px rgba(20,30,45,.18);z-index:40}
 .links.open{display:flex}.links a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:20px}
 header .btn{display:none}
 .links .mcta{display:block;background:var(--acc);color:#fff;border-bottom:0;border-radius:9px;
   text-align:center;padding:15px 16px;margin-top:12px;font-size:20px;letter-spacing:.03em}
 .links .mcta:hover{background:var(--accd);color:#fff}}

.hero{position:relative;color:#fff}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 44%}
.hero .ov{position:absolute;inset:0;background:linear-gradient(100deg,var(--deep) 26%,rgba(12,12,13,.84) 46%,rgba(12,12,13,.44) 68%,rgba(12,12,13,.14) 100%)}
.hero .wrap{position:relative;padding:64px 24px 58px}
/* text left, the aircraft on a card to the right */
.hgrid{display:grid;grid-template-columns:minmax(0,0.84fr) minmax(0,1.16fr);gap:40px;align-items:center}
.hcol{min-width:0}
.hpic{margin:0;border-radius:16px;overflow:hidden;line-height:0;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 2px 6px rgba(0,0,0,.28),0 28px 64px -26px rgba(0,0,0,.72)}
.hpic img{display:block;width:100%;height:auto}
@media(max-width:1000px){.hgrid{gap:34px}}
.hero .bgm{display:none}
@media(max-width:900px){
  /* On a phone the card below the text read as an afterthought, so the aircraft
     becomes the hero background instead and the card is dropped. The hangar
     shot is bright, so this layer carries its own scrim; the desktop background
     and its gradient are left exactly as they were. */
  .hgrid{grid-template-columns:1fr;gap:0}
  .hpic{display:none}
  .hero .bg{display:none}
  .hero .bgm{display:block;position:absolute;inset:0;
    background-image:url('/assets/img/n1us-nose@900.jpg');
    background-size:cover;background-position:center}
  .hero .ov{background:linear-gradient(180deg,rgba(8,12,18,.62) 0%,rgba(8,12,18,.80) 46%,
    rgba(8,12,18,.93) 100%)}
  .hero .wrap{padding:56px 24px 48px;min-height:76vh;display:flex;align-items:flex-end}
  .hero h1{max-width:none}
}
@media(max-width:520px){.hero .wrap{padding:17px 18px 16px}}
@media(max-width:900px){
  /* The record line, relocated into the hero above the buttons and given its
     own card. The hero is content sized here rather than held to a fraction of
     the viewport, so the two buttons clear a phone's address bar. */
  .hcol .marq{width:100%;margin:14px 0;
    background:rgba(10,15,22,.30);border:1px solid rgba(255,255,255,.11);
    border-radius:14px;padding:12px 14px;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    box-shadow:0 10px 26px -16px rgba(0,0,0,.5)}
  .hcol .marq .wrap{padding:0;min-height:0;display:flex;flex-direction:column;
    align-items:center;gap:5px;max-width:none}
  .hcol .marq span{justify-content:center;font-size:15px;gap:9px}
  .hero .wrap{align-items:flex-start;min-height:0;padding:10px 24px 18px}
  /* Safari overlays a toolbar that innerHeight does not report, so the block is
     sized to clear roughly 190 px more than the measured viewport suggests. */
  .hero h1{font-size:clamp(28px,7.2vw,38px);margin:9px 0 8px}
  .hero p{font-size:16px;line-height:1.48;margin-bottom:0}
  .hcta{margin-top:0;gap:10px}
  .hcta a{padding:13px 22px}
}

.eyb{display:inline-block;background:var(--acc);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;padding:6px 13px;border-radius:5px}
.hero h1{font-size:clamp(38px,4.4vw,60px);margin:16px 0 14px;max-width:15ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--sig)}
.hero p{font-size:17.5px;max-width:44ch;color:#dce3ec;text-wrap:pretty}
.hcta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hcta a{text-decoration:none;font-weight:700;padding:15px 26px;border-radius:8px}
.hcta .p{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.hcta .p:hover{background:rgba(255,255,255,.26)}
.hcta .g{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.hcta .g:hover{background:rgba(255,255,255,.26)}

.marq{background:var(--steel);color:#fff}
.marq .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:space-between;padding:18px 24px}
.marq span{display:flex;gap:9px;align-items:center;font-weight:600;font-size:14.5px}
.marq svg{width:19px;height:19px;fill:none;stroke:var(--tip);stroke-width:2}

section{padding:66px 0}
h2.d{font-size:clamp(28px,4vw,44px)}
.ey{color:var(--bronze);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.lead{color:var(--mut);font-size:18px;max-width:58ch;margin-top:10px;text-wrap:pretty}

.page-head{padding:54px 0 34px;background:#fff;border-bottom:1px solid var(--line)}
.page-head .wrap{text-align:center}
.page-head .ey{margin-bottom:10px}
.page-head h1{font-size:clamp(34px,5vw,56px)}
.page-head p{color:var(--mut);font-size:18px;max-width:64ch;margin:14px auto 0}

.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:30px}
.cred{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--sh)}
.cred .n{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:30px;color:var(--acc);line-height:1;text-transform:uppercase}
.cred .l{color:var(--mut);font-size:14px;margin-top:5px}

.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:40px}
.sc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit;display:block}
.sc:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.sc img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin-bottom:12px;display:block}
.sc h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;margin-bottom:6px;text-transform:uppercase}
.sc p{color:var(--mut);font-size:14.5px}
.sc .more{display:inline-block;margin-top:10px;color:var(--acc);font-weight:700;font-size:14px}

.split{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}.split>*{min-width:0}
.split img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.split img.wide{aspect-ratio:16/10}
.quote{border-left:3px solid var(--acc);padding:4px 0 4px 20px;font-size:18px;font-style:italic;margin:20px 0}
.quote span{display:block;font-style:normal;font-size:13.5px;color:var(--mut);margin-top:8px;font-weight:700}

.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:18px;margin-top:38px}
.ctr .dgrid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:30px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 22px;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s}
.dcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.dcard .di{width:48px;height:48px;border-radius:12px;background:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.dcard .di svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
.dcard h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:19px;margin-bottom:5px}
.dcard p{color:var(--mut);font-size:15px;line-height:1.55}

.srow{display:grid;grid-template-columns:.92fr 1.08fr;gap:36px;padding:32px 0;border-bottom:1px solid var(--line);align-items:center}
.srow:last-child{border-bottom:0}.srow>*{min-width:0}
.srow.rev{direction:rtl}.srow.rev>*{direction:ltr}
.srow img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;display:block}
.srow .tag{color:var(--bronze);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.srow h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;text-transform:uppercase;margin:4px 0 8px}
.srow p{color:var(--mut);font-size:16px;margin-bottom:8px}
@media(max-width:820px){.srow{grid-template-columns:1fr;gap:18px}}

.tests{background:var(--deep);color:#fff}.tests .ey{color:var(--gold)}.tests h2{color:#fff}
.tg{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:40px}
.tc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:24px;display:flex;flex-direction:column}
.tc blockquote{font-size:15.5px;margin-bottom:12px;line-height:1.6}
.tc cite{font-style:normal;font-weight:700;margin-top:auto}.tc cite span{font-weight:400;color:#9fb0c2}

.loc{background:var(--deep);color:#fff}.loc h2{color:#fff}.loc .ey{color:var(--gold)}
.locgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start}
.loc .li{color:#c4cedb;margin-bottom:6px;font-size:15px}
.loc .b{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;color:#fff;display:block;margin:16px 0 6px;font-size:15px;letter-spacing:.05em}
.hoursbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px 24px}
@media(max-width:820px){.locgrid{grid-template-columns:1fr;gap:26px}}

.cta{background:var(--acc);color:#fff;text-align:center}.cta h2{color:#fff}
.cta .big{display:inline-flex;flex-direction:column;margin-top:22px;background:#fff;color:var(--accd);text-decoration:none;padding:15px 32px;border-radius:9px;line-height:1.15}
.cta .big small{font-weight:600;opacity:.7;font-size:13px}
.cta .big b{font-size:20px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase}

/* One centered block. It used to repeat the header navigation verbatim and
   split into two justified columns, which read as a second menu bar. */
footer{background:var(--deep);color:#93a2b3;padding:52px 0 48px;font-size:14px;text-align:center}
.ftmark{
  width:46px;height:46px;border-radius:11px;display:inline-flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
}
.ftmark svg{width:24px;height:24px;fill:none;stroke:var(--reg);stroke-width:1.8}
.ftname{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:21px;color:#e9eef4;margin-top:14px;line-height:1;
}
.ftrec{color:#aab7c6;font-size:14.5px;margin-top:9px}
footer b{color:#e5ebf1;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.02em}
.attr{color:#8797a8;font-size:12.5px;line-height:1.65;max-width:74ch;
  margin:22px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:36px}
.gal figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff}
.gal img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.gal figcaption{padding:12px 15px;font-size:13.5px;color:var(--mut);font-weight:600}
.gal .src{display:block;font-weight:400;font-size:11px;color:#667281;margin-top:4px}
.gal .src a{color:inherit}

.prose{max-width:780px}
.prose h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:22px;margin:26px 0 8px}
.prose p{color:var(--mut);font-size:16.5px;margin-bottom:13px}
.prose ul{margin:6px 0 14px 2px;list-style:none;padding:0}
.prose li{color:var(--mut);font-size:16px;padding-left:26px;position:relative;margin-bottom:8px}
.prose li:before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--accd)}
.prose b{color:var(--ink)}

table.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:26px}
table.tbl th,table.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
table.tbl thead th{background:var(--bg);font-weight:700;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td.n{font-weight:700;color:var(--acc);white-space:nowrap}
.tblwrap{overflow-x:auto}

/* ---- the eleven days, as a timeline -------------------------------------
 * A rail with a node per entry rather than a flat bordered list, so the
 * sequence reads as a sequence. The day the record was nearly lost gets a
 * marked node and a lifted card.
 */
.daynav{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.daynav a{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-weight:600;font-size:13.5px;color:var(--ink);
  text-decoration:none;transition:.15s;white-space:nowrap;
}
.daynav a:hover{border-color:var(--bronze);color:var(--bronze)}
.daynav a.key{border-color:var(--bronze);color:var(--bronze)}

.tl{margin-top:34px}
.tlrow{
  display:grid;grid-template-columns:92px 26px minmax(0,1fr);
  gap:0 20px;padding:0 0 30px;scroll-margin-top:96px;
}
.tlrow .dt{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:20px;color:var(--bronze);line-height:1.05;padding-top:2px;text-align:right;
}
.tlrow .dt span{
  display:block;font-family:Inter;font-weight:600;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);margin-top:5px;
}
.tlrow .node{position:relative}
.tlrow .node::before{
  content:"";position:absolute;left:50%;top:20px;bottom:-30px;width:2px;
  transform:translateX(-50%);background:var(--line);
}
.tlrow:last-child .node::before{display:none}
.tlrow .node::after{
  content:"";position:absolute;left:50%;top:5px;width:13px;height:13px;border-radius:50%;
  background:var(--acc);border:3px solid #fff;box-shadow:0 0 0 2px var(--line);
  transform:translateX(-50%);
}
.tlc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px 22px;box-shadow:var(--sh)}
.tlc h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:21px;margin-bottom:6px}
.tlc p{color:var(--mut);font-size:16px}
.tlc figure{margin:14px 0 0}
.tlc img{width:100%;height:auto;max-width:440px;aspect-ratio:16/10;object-fit:cover;border-radius:10px;display:block}
.tlc .src{display:block;font-size:11px;color:#667281;margin-top:6px}
.tlc .src a{color:inherit}

/* the day at Okhotsk, which is the pivot of the whole record */
.tlrow.is-key .node::after{width:17px;height:17px;top:3px;background:var(--sig);box-shadow:0 0 0 3px var(--acc)}
.tlrow.is-key .tlc{border-color:var(--acc);box-shadow:0 14px 34px -22px rgba(20,30,45,.45)}
.tlrow.is-key .tlc h3{color:var(--acc)}
.keytag{
  display:inline-block;background:var(--acc);color:#fff;font-weight:700;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:4px;margin-bottom:10px;
}


/* ---- the replay, which is the one thing carried over ---- */
.replay{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.globe-shell{position:relative;background:var(--deep);border:1px solid var(--line);border-radius:14px;margin-top:30px;overflow:hidden}
#globe{width:100%;height:min(62vh,600px);min-height:380px;background:var(--deep);display:block}
#globe canvas{display:block}
.globe-badge{position:absolute;top:14px;left:14px;z-index:5;display:flex;align-items:center;gap:8px;font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92);background:rgba(15,24,34,.72);border:1px solid rgba(255,255,255,.2);padding:7px 13px;border-radius:6px}
.globe-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.globe-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:4;background:var(--deep);color:rgba(255,255,255,.55);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:opacity .6s ease}
.globe-loading.gone{opacity:0;pointer-events:none}
.globe-fallback{display:none;padding:70px 24px;text-align:center;color:rgba(255,255,255,.7);font-size:15px}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px}
.readout > div{background:#fff;padding:16px 18px}
.hud-k{font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.hud-v{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:25px;line-height:1;color:var(--ink)}
.hud-s{color:var(--mut);font-size:12.5px;margin-top:5px}
.hud-icao{display:inline-block;font-weight:700;font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:5px;background:var(--bg);border:1px solid var(--line);color:var(--mut);margin-top:6px}
.hud-icao.is-anchor{background:#eef3fa;border-color:#cddcee;color:var(--acc)}
.phase{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;line-height:1.05}
.phase.is-gnd{color:var(--mut)}.phase.is-climb{color:var(--acc)}.phase.is-desc{color:#a56b12}.phase.is-air{color:var(--ink)}
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:16px}
#playBtn{min-width:104px}
#scrub{flex:1;min-width:220px;height:6px;-webkit-appearance:none;appearance:none;background:var(--line);border-radius:99px;outline:none}
#scrub::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acc);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
#scrub::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--acc);border:3px solid #fff;cursor:pointer}
.speeds{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.spd{background:none;border:0;border-right:1px solid var(--line);padding:10px 14px;font:inherit;font-weight:600;font-size:13.5px;color:var(--mut);cursor:pointer;white-space:nowrap}
.spd:last-child{border-right:0}
.spd.is-on{background:var(--acc);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:600;font-size:13.5px;color:var(--ink);cursor:pointer;font-family:inherit;min-height:38px}
.chip:hover{border-color:var(--acc);color:var(--acc)}
.chiplab{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin-top:22px;font-weight:700}
.keyhint{color:var(--mut);font-size:12.5px;margin-top:14px}
.keyhint kbd{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:var(--bg);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 6px;margin:0 2px}
@media(max-width:1023px){.keyhint{display:none}}
.cesium-widget-credits,.cesium-viewer-bottom{display:none!important}

.rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:30px}}
@media(max-width:640px){.hero .wrap{padding:52px 24px 46px}.hero h1{font-size:clamp(34px,9vw,46px)}.hcta a{flex:1 1 100%;text-align:center}
 .nav{padding:11px 16px}.logo .wm{font-size:17px}.logo small{display:none}}
.chip.is-on{background:var(--acc);color:#fff;border-color:var(--acc)}
#scrub{background:linear-gradient(90deg,var(--acc) 0,var(--acc) var(--p,0%),var(--line) var(--p,0%),var(--line) 100%)}
.hud-icao.is-recon{background:var(--bg);border-color:var(--line);color:var(--mut)}

/* the long note the replay writes belongs under the readout, not inside a
   stat cell, where it stretched the row to 628px */
.replay-note{color:var(--mut);font-size:13.5px;line-height:1.55;margin-top:12px;max-width:78ch}
.readout > div{min-width:0}

/* ---- the one photograph of the record aircraft ---- */
/* Centred. The figure used to be sized with width:fit-content, which sizes to
   the CAPTION's max-content width, not the image's, so the figure quietly ran
   the full column and the picture sat against its left edge. */
.feature{margin:30px auto 0;max-width:100%;text-align:center}
.feature img{
  display:inline-block;width:auto;max-width:100%;height:auto;
  max-height:min(560px,64vh);border-radius:14px;border:1px solid var(--line);
}
.feature figcaption{
  display:block;text-align:center;max-width:68ch;margin:16px auto 0;
  color:var(--mut);font-size:15.5px;line-height:1.55;
}
.feature .src{display:block;margin:8px 0 0;font-size:11.5px;color:#667281}
.feature .src a{color:inherit}
.crewpic{margin:0;text-align:center}
.crewpic img{
  display:inline-block;width:auto;max-width:100%;height:auto;
  max-height:min(520px,58vh);border-radius:12px;
}
.crewpic figcaption{
  margin:16px auto 0;max-width:66ch;color:var(--mut);
  font-size:15px;line-height:1.55;text-align:center;
}
.crewpic .src{display:block;margin-top:7px;font-size:11.5px;color:#667281}
.crewwho{
  display:grid;grid-template-columns:1fr 1fr;gap:0 34px;
  margin-top:30px;padding-top:30px;border-top:1px solid var(--line);
}
.crewwho > article{min-width:0}
.crewwho > article + article{
  padding-left:34px;margin-left:0;border-left:1px solid var(--line);
}
.crewwho h3{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:22px;letter-spacing:.01em;margin-bottom:4px;
}
.crewwho .role{
  color:var(--bronze);font-weight:700;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:12px;
}
.crewwho p{color:var(--mut);font-size:15.5px;line-height:1.62;margin-bottom:12px}
.crewwho p:last-child{margin-bottom:0}
@media(max-width:820px){
  .crewcard{padding:22px 20px 24px}
  .crewwho{grid-template-columns:1fr;gap:0}
  .crewwho > article + article{
    padding-left:0;border-left:0;margin-top:26px;padding-top:26px;
    border-top:1px solid var(--line);
  }
}

/* ---- the aircraft page opens on the aircraft -----------------------------
 * The page head, its lede and the gap under it filled the whole first screen,
 * so the helicopter sat below the fold. Title and picture now share one
 * viewport-height block, with the image taking whatever room the type leaves.
 */
.ahero{
  background:var(--bg);
  min-height:calc(100svh - 104px);
  display:flex;flex-direction:column;justify-content:center;
  padding:26px 0 30px;border-bottom:1px solid var(--line);
}
.ahero .wrap{width:100%;text-align:center}
.ahero .ey{margin-bottom:8px}
.ahero h1{font-size:clamp(38px,5.4vw,68px);margin:0 0 10px}
.ahero__lede{
  color:var(--mut);font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.55;
  max-width:74ch;margin:0 auto;
}
.ahero__pic{margin:clamp(18px,3vh,32px) 0 0;min-height:0}
.ahero__pic img{
  display:inline-block;width:auto;max-width:100%;height:auto;
  max-height:min(58vh,620px);border-radius:14px;border:1px solid var(--line);
}
.ahero__pic figcaption{
  display:block;max-width:70ch;margin:14px auto 0;color:var(--mut);
  font-size:14.5px;line-height:1.5;
}
.ahero__pic .src{display:block;margin-top:6px;font-size:11.5px;color:#667281}

/* On a short laptop the title block was taking 347px, nearly half the screen,
   and clipping the bottom of the aircraft. Tighten the type and give the
   picture the room instead. */
@media (min-width:761px) and (max-height:900px){
  .ahero{padding:18px 0 22px}
  .ahero h1{font-size:clamp(32px,4.2vw,48px);margin-bottom:8px}
  .ahero__lede{font-size:15px;line-height:1.5;max-width:92ch}
  .ahero__pic{margin-top:16px}
  .ahero__pic img{max-height:48vh}
  .ahero__pic figcaption{font-size:13px;margin-top:10px;max-width:80ch}
}
@media (min-width:761px) and (max-height:760px){
  .ahero__lede{font-size:14.5px;max-width:100ch}
  .ahero__pic img{max-height:44vh}
}

/* With the picture lifted into the opening, the biographies are the card's
   first child and no longer need the rule that separated them from it. */
.crewcard > .crewwho:first-child{margin-top:0;padding-top:0;border-top:0}

/* ---- the replay, sized to the screen -------------------------------------
 * On the home page and on /replay the player is the point, so the stage is
 * given the viewport: a compact title, then the canvas taking whatever height
 * the readout and the controls leave. The globe height is clamped so it never
 * collapses on a short laptop or runs away on a tall display.
 */
.rstage{background:var(--bg);padding:22px 0 26px;border-bottom:1px solid var(--line)}
.rstage .wrap{text-align:center}
.rstage .ey{margin-bottom:7px}
.rstage h1{font-size:clamp(30px,4vw,52px);margin:0 0 9px}
.rstage__lede{
  color:var(--mut);font-size:clamp(15px,1.4vw,17.5px);line-height:1.5;
  max-width:78ch;margin:0 auto 18px;
}
.rstage .globe-shell{margin-top:0}
.rstage #globe{height:clamp(300px,calc(100svh - 500px),700px);min-height:0}
.rstage .readout{text-align:left}
.rstage .controls{justify-content:center}
.rstage .chips{justify-content:center}
.rstage .chiplab,.rstage .keyhint{text-align:center}

/* The canvas fitted but the play button and the scrubber fell below the fold,
   so the replay was visible and not operable. Tighten the heading block on
   short screens and the whole control set comes up with it. */
@media (min-width:761px) and (max-height:900px){
  .rstage{padding:14px 0 18px}
  .rstage h1{font-size:clamp(26px,3.4vw,38px);margin-bottom:6px}
  .rstage__lede{font-size:14.5px;line-height:1.45;max-width:98ch;margin-bottom:12px}
  .rstage .readout > div{padding:11px 13px}
  .rstage .hud-v{font-size:21px}
  .rstage .controls{margin-top:12px}
}
@media (min-width:761px) and (max-height:780px){
  .rstage__lede{display:none}
  .rstage #globe{height:clamp(300px,calc(100svh - 430px),700px);min-height:0}
}

/* Short laptops need a little more room again once the controls are in the
   flow directly under the canvas. */
@media (min-width:761px) and (max-height:745px){
  .rstage #globe{height:300px;min-height:0}
  .rstage .readout > div{padding:10px 12px}
  .rstage .hud-v{font-size:19px}
}

/* On a small phone the control row wraps onto three lines, so the standfirst
   gives up its space to keep play and scrub above the fold. */
@media(max-width:400px){
  .rstage__lede{display:none}
  .rstage #globe{height:min(36vh,290px);min-height:0}
  .rstage .speeds{width:100%}
  .rstage .spd{flex:1;padding:10px 6px;font-size:12.5px}
}

/* Five ways in, five across. auto-fit with a 240px floor was landing on four
   columns at 1160 and dropping the fifth card onto a row of its own. */
@media(min-width:1080px){
  .svc:has(>:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .svc:not(:has(>:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))}
  .svc:has(>:nth-child(5)) .sc{padding:18px 18px 20px}
  .svc:has(>:nth-child(5)) .sc h3{font-size:19px}
  .svc:has(>:nth-child(5)) .sc p{font-size:13.5px;line-height:1.5}
  .svc:has(>:nth-child(5)) .sc .more{font-size:13px}
}
/* the crew frame is nearly square, so hold the heads when it crops to 16:10 */
.sc img.p35{object-position:center 32%}


/* speed slider, in place of the old four presets */
.speeds{align-items:center;gap:10px;padding:6px 12px}
.rate-l{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
#rate{-webkit-appearance:none;appearance:none;width:150px;height:6px;border-radius:99px;outline:none;
  background:linear-gradient(90deg,var(--acc) 0,var(--acc) var(--p,0%),var(--line) var(--p,0%),var(--line) 100%)}
#rate::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--acc);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
#rate::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--acc);border:3px solid #fff;cursor:pointer}
.rate-v{font-weight:700;font-size:13.5px;min-width:74px;text-align:right;font-variant-numeric:tabular-nums}

/* The full stop list. Every cell rule has to outrank `table.tbl td`, which is a
   class plus two elements; a bare `.stoptable td` loses to it silently, which is
   why the table stayed wide however hard the numbers were tuned. */
.stoptable{max-height:560px;overflow-y:auto;border:1px solid var(--line);border-radius:12px}
.stoptable table.tbl{margin-top:0;border:0;border-radius:0;table-layout:auto}
.stoptable table.tbl thead th{position:sticky;top:0;background:#fff;z-index:1;box-shadow:0 1px 0 var(--line)}
.stoptable table.tbl th,.stoptable table.tbl td,.stoptable table.tbl td.n{
  font-size:12.5px;padding:6px 8px;white-space:nowrap}
/* the place is the one column allowed to wrap, so a long name costs height */
.stoptable table.tbl th:nth-child(2),.stoptable table.tbl td:nth-child(2){
  white-space:normal;min-width:78px}

@media(max-width:820px){
  .stoptable table.tbl th,.stoptable table.tbl td,.stoptable table.tbl td.n{
    font-size:11.5px;padding:5px 6px}
  /* the coordinates and the match distance are there so an identification can be
     checked, which is a desk job; they are the first thing to go on a phone */
  .stoptable table.tbl th:nth-child(6),.stoptable table.tbl td:nth-child(6),
  .stoptable table.tbl th:nth-child(7),.stoptable table.tbl td:nth-child(7){display:none}
}
@media(max-width:560px){
  .stoptable table.tbl th:first-child,.stoptable table.tbl td:first-child{display:none}
  .stoptable table.tbl th:nth-child(3),.stoptable table.tbl td:nth-child(3),
  .stoptable table.tbl td.n:nth-child(3){white-space:normal;min-width:46px}
  .stoptable table.tbl th,.stoptable table.tbl td,.stoptable table.tbl td.n{
    font-size:11px;padding:4px 4px}
  .stoptable table.tbl th:nth-child(2),.stoptable table.tbl td:nth-child(2){min-width:56px}
}
@media(min-width:961px) and (max-width:1150px){.logo .mk{height:auto;width:120px}
  .logo .wm{white-space:nowrap;font-size:20px}
  .links{gap:14px}.links a{font-size:17.5px}
  header .btn{font-size:17px;padding:9px 15px}
  header .btn{white-space:nowrap;padding:10px 15px;font-size:14px}}
@media(max-width:960px){.logo .mk{height:auto;width:168px}}
@media(max-width:820px){.logo .mk{width:150px}}
@media(max-width:700px){.logo .mk{width:132px}}
@media(max-width:560px){.logo .mk{width:110px}}
@media(max-width:500px){.logo .mk{width:92px}}
@media(max-width:460px){
  /* the wider aircraft mark pushed the menu button past the viewport edge */
  .logo .mk{width:96px}
  .logo .wm{font-size:15.5px}
  header .btn{padding:9px 12px;font-size:13px}
  .logo .wm{font-size:18px}
  .logo a{gap:8px}
  .nav{padding:11px 16px}
}
/* the crest in the footer */
.ftlogo{display:block;width:360px;max-width:74vw;height:auto;margin:0 auto 10px;opacity:.98}

/* a chart drawn from the data, not an illustration of it */
.chartfig{margin:32px auto 8px;max-width:940px}
.chartcard{background:#fff;border-radius:14px;padding:16px 18px;
  border:1px solid rgba(16,24,40,.07);
  box-shadow:var(--sh)}
.chartcard img{display:block;width:100%;height:auto}
.chartfig figcaption{margin-top:12px;color:var(--mut);font-size:13.5px;line-height:1.55;text-align:center}
@media(max-width:640px){.chartfig{margin:24px auto 4px}.chartcard{padding:11px 12px;border-radius:11px}
  .chartfig figcaption{font-size:12.5px}}

/* centered sections, Why It Stands */
.ctr section > .wrap{text-align:center}
.ctr section .ey,.ctr section h2.d{text-align:center}
.ctr section .lead{margin-left:auto;margin-right:auto}
.ctr section .prose{margin-left:auto;margin-right:auto;max-width:74ch;text-align:center}
.ctr section .prose p{text-align:center}
.ctr section .tblwrap{text-align:left}
.ctr section table.tbl th,.ctr section table.tbl td{text-align:left}
.ctr section table.tbl td.n,.ctr section table.tbl th.n{text-align:right}
.ctr .dcard{text-align:left}

/* the registration, centered on its own card */
.regcard{max-width:860px;margin:0 auto;background:#fff;border:1px solid rgba(16,24,40,.07);
  border-radius:14px;padding:24px 26px;box-shadow:var(--sh);text-align:center}
.regcard .ey{margin-bottom:10px}
.regcard .prose{margin:18px auto 0;max-width:64ch;text-align:center}
.regcard .prose p{text-align:center}
.regcard .tblwrap{margin-top:24px;text-align:left}
.regcard table.tbl td{text-align:left}
.regcard table.tbl td.n{text-align:right;white-space:nowrap}
@media(max-width:640px){.regcard{padding:20px 18px;border-radius:12px}}

/* The Aircraft: no dividers, tighter rhythm */
.tight section{padding:40px 0;border-top:0;border-bottom:0}
.tight .ahero{padding:34px 0 30px;border-bottom:0;min-height:0;justify-content:flex-start}
.tight .regcard{padding:20px 22px}
.tight .regcard .prose{margin-top:14px}
.tight .regcard .tblwrap{margin-top:16px}
@media(max-width:640px){.tight section{padding:30px 0}.tight .regcard{padding:16px 15px}}

/* the aircraft above its own numbers, on one card */
.speccard{max-width:960px;margin:0 auto;background:#fff;border:1px solid rgba(16,24,40,.07);
  border-radius:14px;padding:14px 14px 0;box-shadow:var(--sh)}
.speccard__pic{margin:0}
.speccard__pic img{display:block;width:100%;height:auto;border-radius:10px}
.speccard__pic figcaption{color:var(--mut);font-size:13px;line-height:1.55;
  text-align:center;margin:12px auto 0;max-width:76ch;padding:0 6px}
/* the tiles go flat inside the card: a card inside a card reads as clutter */
.speccard .creds{margin-top:16px;gap:0;border-top:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.speccard .cred{background:none;border:0;border-radius:0;box-shadow:none;
  padding:18px 12px;text-align:center;border-right:1px solid var(--line)}
.speccard .cred:last-child{border-right:0}
@media(max-width:760px){
  .speccard{padding:10px 10px 0}
  .speccard .cred{border-right:0;border-bottom:1px solid var(--line);padding:14px 8px}
  .speccard .cred:last-child{border-bottom:0}
}

/* ---- mobile only ---- */
/* Everything below is inside a max-width query, so no desktop rule is touched. */
@media(max-width:560px){
  /* A three column table cannot hold its shape at 390 px, so the rows stack:
     figure, then value, then source. Only tables with a head are restacked;
     the two column fact tables already fit, and the stop list has its own
     column hiding treatment. */
  .tblwrap:not(.stoptable) table.tbl:has(thead){border:0;border-radius:0;margin-top:18px}
  .tblwrap:not(.stoptable) table.tbl:has(thead) thead{display:none}
  .tblwrap:not(.stoptable) table.tbl:has(thead) tbody,
  .tblwrap:not(.stoptable) table.tbl:has(thead) tr,
  .tblwrap:not(.stoptable) table.tbl:has(thead) td{display:block;width:auto}
  .tblwrap:not(.stoptable) table.tbl:has(thead) tr{
    background:#fff;border:1px solid var(--line);border-radius:11px;
    padding:12px 14px;margin-bottom:10px;box-shadow:var(--sh)}
  .tblwrap:not(.stoptable) table.tbl:has(thead) td{
    border:0;padding:2px 0;text-align:left;font-size:14.5px;white-space:normal}
  .tblwrap:not(.stoptable) table.tbl:has(thead) td:first-child{
    font-weight:700;color:var(--ink);font-size:15px}
  .tblwrap:not(.stoptable) table.tbl:has(thead) td.n{
    text-align:left;font-size:19px;font-family:'Barlow Condensed',sans-serif;
    letter-spacing:.01em;margin:2px 0 1px;white-space:normal}
  .tblwrap:not(.stoptable) table.tbl:has(thead) tbody tr:last-child td{border-bottom:0}

  /* credits and micro labels were sitting at 11 to 11.5 px */
  .gal .src,.tlc .src,.feature .src,.crewpic .src,.ahero__pic .src,.speccard__pic .src{font-size:12.5px}
  .crewwho .role{font-size:12.5px}
  .stoptable table.tbl th,.stoptable table.tbl td,.stoptable table.tbl td.n{font-size:12px;padding:5px 5px}

  /* Vertical rhythm was still desktop's: 66 px above and below every section on
     a 390 px screen. These are all lower specificity than the per page rules
     (.tight section, .hero .wrap), so those keep their own values. */
  section{padding:40px 0}
  .page-head{padding:34px 0 26px}
  footer{padding:38px 0 34px}
  .wrap{padding:0 18px}
  .creds{gap:12px;margin-top:20px}
  .gal{gap:16px}
  table.tbl{margin-top:18px}
  h2.d{font-size:clamp(25px,7.2vw,34px)}
  .lead{font-size:16px;margin-top:8px}
  /* a legacy 640 px rule sets this later in the sheet, so restate it here */
  .hero .wrap{padding:8px 18px 16px;min-height:0}
}
@media(max-width:400px){
  .wrap{padding:0 15px}
  section{padding:34px 0}
  .hero .wrap{padding:15px 15px 14px}
  .hero h1{font-size:clamp(29px,8.4vw,36px);margin:10px 0 8px}
  .hero p{font-size:16px;line-height:1.5}
  .hcol .marq{padding:11px 17px;margin:31px 0}
  .hcol .marq .wrap{gap:6px}
  .hcol .marq span{font-size:14.5px}
  .hcta{gap:10px}
  .hcta a{padding:13px 20px}
}

/* Short viewports. Width alone does not decide whether the hero fits: a 375 px
   phone with a 667 px screen has less room than a 360 px one with 780. These
   tiers are keyed on height, and only inside the mobile layout. */
@media(max-width:900px) and (max-height:720px){
  .hero .wrap{padding:12px 15px 12px}
  .eyb{font-size:11px;padding:5px 10px}
  .hero h1{font-size:clamp(26px,7.6vw,32px);margin:8px 0 6px}
  .hero p{font-size:15px;line-height:1.45}
  .hcol .marq{padding:11px 15px;margin:10px 0}
  .hcol .marq .wrap{gap:5px}
  .hcol .marq span{font-size:13.5px}
  .hcta{gap:9px}
  .hcta a{padding:11px 18px}
}
@media(max-width:900px) and (max-height:620px){
  /* two columns of ticks instead of four rows */
  .hcol .marq .wrap{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;align-items:start}
  .hcol .marq span{font-size:12.5px;justify-content:flex-start;gap:7px}
  .hero h1{font-size:clamp(23px,6.8vw,28px);margin:6px 0 5px}
  .hero p{font-size:13.5px;line-height:1.42}
  .hcta{gap:9px}
  .hcta a{padding:10px 16px;font-size:14px}
}

/* hero fit, last word
   These restate the hero's mobile type and spacing at the end of the sheet,
   because an earlier max-width:640px block sets .hero h1 and .hero .wrap later
   in source order than the mobile rules above and was winning on equal
   specificity. Sized so the two buttons clear Safari's overlaid toolbar, which
   innerHeight does not report. */
@media(max-width:900px){
  /* svh is the viewport height with the browser's toolbars showing, so a hero
     sized to it is never cut off by them. The column fills that height and the
     buttons take the slack with margin-top:auto, which puts them at the foot of
     the first screen without turning them into a fixed bar. Taller phones
     simply get more space above them. */
  .hero{padding:0}
  .hero .wrap{padding:20px 20px 18px;align-items:stretch;
    min-height:calc(100vh - 74px);min-height:calc(100svh - 74px)}
  .hcol{display:flex;flex-direction:column;justify-content:flex-start;min-height:100%;
    align-items:center;text-align:center}
  /* the card and the buttons stay full width inside the centered column */
  .hcol .hcta{align-self:stretch;width:100%}
  .hcol .marq{align-self:center;width:auto;max-width:100%}
  .hero p{margin-left:auto;margin-right:auto}
  /* one line, and always starting a fresh one: a pseudo newline rather
     than display:block, which would change the line box above it */
  .hero h1 em{white-space:nowrap}
  .hero h1 em::before{content:"\A";white-space:pre}
  .hcol .hcta{padding-top:0}
  .hero .eyb{font-size:11.5px;padding:5px 11px}
  .hero h1{font-size:clamp(35px,9.4vw,50px);margin:30px 0 24px;line-height:1.04;max-width:none}
  .hero p{font-size:15.5px;line-height:1.45;margin-bottom:0}
  .hcol .marq{margin:36px 0;padding:13px 21px}
  .hcol .marq .wrap{gap:6px}
  .hcol .marq span{font-size:14px;gap:8px}
  .hcta{gap:10px;margin-top:0}
  .hcta a{padding:12px 20px;font-size:15px}
}
@media(max-width:900px) and (max-height:700px){
  .hero h1{font-size:clamp(30px,8.2vw,40px);margin:22px 0 17px;max-width:none}
  .hero p{font-size:14px;line-height:1.4}
  .hcol .marq{margin:28px 0;padding:11px 18px}
  .hcol .marq .wrap{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}
  .hcol .marq span{font-size:12.5px;justify-content:flex-start}
  .hcta a{padding:10px 16px;font-size:14px}
}

/* Flight timeline, mobile only.
   The desktop row is 92px of date plus a 26px rail plus two 20px gaps, which is
   158px of gutter. On a 390px screen that left the card about 202px wide and
   squeezed the illustrations. Here the date moves above the card on its own
   line and only a thin rail stays in the gutter. */
@media(max-width:640px){
  .tlrow{grid-template-columns:16px minmax(0,1fr);grid-template-rows:auto auto;
    gap:0 12px;padding-bottom:24px}
  .tlrow .dt{grid-column:2;grid-row:1;text-align:left;padding-top:0;margin-bottom:9px;
    font-size:19px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .tlrow .dt span{display:inline;margin-top:0;font-size:11.5px}
  .tlrow .node{grid-column:1;grid-row:1 / span 2}
  .tlrow .node::after{top:4px;width:11px;height:11px;border-width:2.5px}
  .tlrow .node::before{top:15px;bottom:-24px}
  .tlrow.is-key .node::after{width:14px;height:14px;top:3px}
  .tlc{padding:15px 15px 17px}
  .tlc img{max-width:none}
}

/* the chart, its caption and its figures as one connected card */
.chartcard figcaption{margin:14px 2px 0;color:var(--mut);font-size:13.5px;line-height:1.55;text-align:center}
.chartcard .chartjoin{margin:14px -18px 0;border-top:1px solid var(--line);overflow-x:visible}
.chartcard .chartjoin table.tbl{margin:0;border:0;border-radius:0;background:none}
.chartcard .chartjoin table.tbl thead th{background:var(--bg);border-bottom:1px solid var(--line)}
.chartcard .chartjoin table.tbl th:first-child,
.chartcard .chartjoin table.tbl td:first-child{padding-left:18px}
.chartcard .chartjoin table.tbl th:last-child,
.chartcard .chartjoin table.tbl td:last-child{padding-right:18px}
.chartcard .chartjoin table.tbl tbody tr:last-child td{border-bottom:0}
/* the caption now lives inside the card, so the figure needs none below it */
.chartfig > figcaption{display:none}
@media(max-width:640px){
  .chartcard .chartjoin{margin:11px -12px 0}
  .chartcard .chartjoin table.tbl th:first-child,
  .chartcard .chartjoin table.tbl td:first-child{padding-left:12px}
  .chartcard .chartjoin table.tbl th:last-child,
  .chartcard .chartjoin table.tbl td:last-child{padding-right:12px}
  .chartcard figcaption{font-size:12.5px;margin-top:11px}
}
@media(max-width:560px){
  /* the stacked rows sit flush inside the card rather than as loose cards */
  .chartcard .chartjoin table.tbl:has(thead) tr{
    background:none;border:0;border-bottom:1px solid var(--line);
    border-radius:0;box-shadow:none;padding:11px 12px;margin:0}
  .chartcard .chartjoin table.tbl:has(thead) tbody tr:last-child{border-bottom:0}
}

/* a table that starts at the top of its card, with the quote closing it */
.chartcard .chartjoin--top{margin-top:-16px;border-top:0;border-radius:14px 14px 0 0;overflow:hidden}
.chartcard .chartjoin--top table.tbl thead th{border-top:0}
.chartcard .cardquote{position:relative;margin:0 -18px;padding:30px 30px 26px;
  border-top:1px solid var(--line);border-left:0;background:var(--bg);
  border-radius:0 0 13px 13px;text-align:center;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-style:normal;
  font-weight:600;font-size:26px;line-height:1.24;letter-spacing:.005em;color:var(--ink)}
/* an opening mark in the livery red, set large and held well back */
.chartcard .cardquote::before{content:"\201C";display:block;margin:0 auto 2px;
  font-family:'Barlow Condensed',serif;font-weight:700;font-size:58px;line-height:.62;
  color:var(--sig);opacity:.30}
.chartcard .cardquote span{display:block;margin-top:16px;font-family:Inter,system-ui,sans-serif;
  font-style:normal;font-weight:700;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut)}
/* the three livery blocks again, laid flat above the attribution */
.chartcard .cardquote span::before{content:"";display:block;width:44px;height:3px;margin:0 auto 11px;
  background:linear-gradient(90deg,#16181A 0 56%,var(--sig) 56% 78%,var(--tip) 78% 100%)}
@media(max-width:640px){
  .chartcard .cardquote{margin:0 -12px;padding:22px 16px 20px;font-size:20px;border-radius:0 0 10px 10px}
  .chartcard .cardquote::before{font-size:46px}
  .chartcard .cardquote span{font-size:11px;margin-top:13px}
  .chartcard .cardquote span::before{width:36px;height:2px;margin-bottom:9px}
}
@media(max-width:640px){.chartcard .chartjoin--top{margin-top:0;border-radius:0}}

@media(max-width:900px){.ctr .dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:600px){.ctr .dgrid{grid-template-columns:1fr;gap:12px}}

/* A card head that matches the charts: condensed title, navy sub-line, and a
   short red keyline under it. The charts draw the same three things inside
   their own SVG, so a table card and a chart card now open identically. */
.chartcard .cardhead{position:relative;padding:1px 2px 0 16px;margin-bottom:16px;text-align:left}
.chartcard .cardhead::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;
  border-radius:1px;background:linear-gradient(180deg,#16181A 0 56%,var(--sig) 56% 78%,var(--tip) 78% 100%)}
.chartcard .cardhead h3{font-size:26px;letter-spacing:.01em;color:var(--ink);margin:0 0 5px}
.chartcard .cardhead p{color:#355579;font-size:15.5px;margin:0}
@media(max-width:640px){
  .chartcard .cardhead{margin-bottom:12px;padding-left:13px}
  .chartcard .cardhead::before{width:3px}
  .chartcard .cardhead h3{font-size:21px}
  .chartcard .cardhead p{font-size:13px}
}

/* a card whose content is a photograph rather than a chart or a table */
.chartcard--pic img{display:block;width:100%;height:auto;border-radius:10px}
.chartcard--pic figcaption{margin:13px 2px 0;color:var(--mut);font-size:13.5px;
  line-height:1.55;text-align:center}
.chartcard--pic figcaption .src{display:block;margin-top:6px;font-size:12px;color:#667281}
@media(max-width:640px){.chartcard--pic figcaption{font-size:12.5px;margin-top:10px}}

/* two photographs side by side inside one card */
.picpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.picpair figure{margin:0}
.picpair img{display:block;width:100%;height:auto;border-radius:10px;aspect-ratio:3/2;object-fit:cover}
.picpair figcaption{margin:10px 2px 0;color:var(--mut);font-size:13px;line-height:1.5;text-align:center}
.picpair figcaption .src{display:block;margin-top:5px;font-size:11.5px;color:#667281}
@media(max-width:700px){.picpair{grid-template-columns:1fr;gap:16px}
  /* stacked, the AHMEC award reads first */
  .picpair figure:first-child{order:2}
  .picpair figure:last-child{order:1}
  .picpair figcaption{font-size:12.5px}}

/* the numbered headings are plain; the rail belongs to graphs and tables only */
.secthead{display:block;max-width:56rem;margin:0 auto}
.secthead .ey{margin-bottom:10px}

/* the photograph card takes the accent flat, under its head */
.chartcard--pic .cardhead{padding-left:2px}
.chartcard--pic .cardhead::before{display:none}
.chartcard--pic .cardhead::after{content:"";display:block;width:46px;height:4px;
  margin-top:13px;border-radius:1px;
  background:linear-gradient(90deg,#16181A 0 56%,var(--sig) 56% 78%,var(--tip) 78% 100%)}
@media(max-width:640px){.chartcard--pic .cardhead::after{width:38px;height:3px;margin-top:10px}}

/* the accent as a divider */
.hrule{width:46px;height:4px;margin:30px auto 0;border-radius:1px;
  background:linear-gradient(90deg,#16181A 0 56%,var(--sig) 56% 78%,var(--tip) 78% 100%)}
@media(max-width:640px){.hrule{width:38px;height:3px;margin-top:24px}}

/* the image note on Sources: present but deliberately quiet */
.prose p.imgnote{font-size:13px;line-height:1.55;color:#667281;
  border-top:1px solid var(--line);padding-top:14px;margin-top:22px;max-width:74ch;
  margin-left:auto;margin-right:auto;text-align:center}
@media(max-width:640px){.prose p.imgnote{font-size:12.5px;padding-top:12px;margin-top:18px}}

/* ---- quotations ----
   One treatment everywhere: the display face rather than italics, a pale red
   opening mark, and the three livery blocks as a rule above the attribution.
   The dark variant swaps the ink block for cream so it reads on a dark ground. */
.quote,.tc blockquote{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-style:normal;
  font-weight:600;line-height:1.24;letter-spacing:.005em}
.quote{position:relative;border-left:0;padding:0;margin:24px 0;text-align:center;
  font-size:26px;color:var(--ink)}
.quote::before,.tc blockquote::before{content:"\201C";display:block;
  font-family:'Barlow Condensed',serif;font-weight:700;line-height:.62;
  color:var(--sig);opacity:.30;margin-bottom:2px}
.quote::before{font-size:58px;margin-left:auto;margin-right:auto}
.quote span{display:block;margin-top:16px;font-family:Inter,system-ui,sans-serif;
  font-style:normal;font-weight:700;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut)}
.quote span::before{content:"";display:block;width:44px;height:3px;margin:0 auto 11px;
  background:linear-gradient(90deg,#16181A 0 56%,var(--sig) 56% 78%,var(--tip) 78% 100%)}

/* The quote card above it is centered, so a button left aligned under it read as
   a loose end. It is an anchor, so it centers as a block sized to its own text
   rather than by stretching. */
.quote + .btn{display:block;width:fit-content;margin-left:auto;margin-right:auto}

/* Reached by screen readers and by nothing else. The timeline's dispatch
   headlines are h3, so without this the page stepped h1 straight to h3. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Mobile only: the wordmark centers on the header rather than sitting against
   the helicopter. It is taken out of flow and centered on .nav, which is
   already the positioned ancestor, so the menu dropdown still anchors to the
   full row. The link keeps the helicopter as its hit area; the wordmark is
   pointer-transparent so a tap in the middle of the header is not a dead zone
   over the page beneath it. */
@media(max-width:960px){
  /* The wordmark stacks one word per line and is centered on the header: on the
     viewport horizontally, and on the helicopter and menu button vertically,
     since .nav is the positioned ancestor and both of those sit on its middle.
     Centering on .nav rather than offsetting from the helicopter means the
     helicopter can change size at any breakpoint without moving the title. */
  .nav .logo .wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    white-space:nowrap;text-align:center;
    font-size:15px;line-height:.98;letter-spacing:.06em}
  .nav .logo .wm > span{display:block}
  /* the menu button, heavier and a touch larger */
  .menu{font-size:29px;line-height:1;-webkit-text-stroke:.7px currentColor}
}
/* the helicopter a little smaller on phones */
@media(max-width:460px){
  .logo .mk{width:86px}
}

/* A two column key and value table has no business staying in two columns on a
   phone. The label column sizes itself to the longest label, which left the
   values about 180 px and broke ROTOR1US LLC, Middleburg, Virginia across three
   lines. Stacked, each value gets the full width and the label reads as an
   eyebrow above it. Scoped to .kv so the data tables are untouched. */
@media(max-width:640px){
  table.tbl.kv,table.tbl.kv tbody,table.tbl.kv tr,table.tbl.kv td{display:block;width:auto}
  table.tbl.kv tr{padding:13px 16px;border-bottom:1px solid var(--line)}
  table.tbl.kv tbody tr:last-child{border-bottom:0}
  table.tbl.kv td,table.tbl.kv td.n{padding:0;border:0;font-size:15.5px;text-align:center}
  table.tbl.kv td:first-child{font-family:Inter,system-ui,sans-serif;font-size:11.5px;
    letter-spacing:.11em;text-transform:uppercase;color:var(--mut);font-weight:700;
    margin-bottom:4px}
}

/* the dispatch cards, on a dark ground */
.tc blockquote{font-size:21px;margin-bottom:14px;line-height:1.28;color:#fff}
.tc blockquote::before{font-size:44px;opacity:.55}
.tc cite{font-style:normal;font-weight:700;margin-top:auto;padding-top:4px;
  font-family:Inter,system-ui,sans-serif;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#cdd8e4}
.tc cite span{font-weight:400;color:#9fb0c2;letter-spacing:.08em}
@media(max-width:640px){
  .quote{font-size:20px}
  .quote::before{font-size:46px}
  .tc blockquote{font-size:18px}
  .tc blockquote::before{font-size:36px}
}