/* Wigram Trophy: the same fixed 980px desktop layout as brucejennerracing.com, shown scaled on
   phones (<meta name="viewport" content="width=980">). Home page is a vertical timeline;
   drivers, cars, results, lap times and the press archive are built from public/data. */
:root {
  --ink: #1b1d22;
  --soft: #5b6270;
  --line: #e2e4e8;
  --paper: #f7f7f5;
  --navy: #13253d;
  --red: #d7262f;
  --gold: #e0a526;
  --green: #1d8f55;
  --rail: 176px;     /* timeline column */
  --dot: 36px;       /* x position of the vertical line inside the rail */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 60px; }
body {
  margin: 0; background: #e9eaec; color: var(--ink);
  font: 15.5px/1.65 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.page { width: 980px; margin: 0 auto; background: #fff; min-height: 100vh; }
a { color: var(--red); }
img { display: block; border: 0; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 20px; }
li { margin-bottom: 4px; }
h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif; color: var(--navy); }
h2 { font-size: 27px; line-height: 1.15; margin: 0 0 6px; letter-spacing: -.01em; }
h3 { font-size: 19px; line-height: 1.25; margin: 0 0 8px; }
h4 { font-size: 15px; margin: 16px 0 6px; color: var(--ink); }
.clear { clear: both; }
.muted { color: var(--soft); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Header ---------- */
.top { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 20px 0 14px; text-decoration: none; }
.top .mark { width: 64px; height: 64px; flex: none; }
.top .word { font: 900 46px/1 Arial, Helvetica, sans-serif; letter-spacing: .08em; color: var(--navy); text-transform: uppercase; }
.top .word span { color: var(--red); }
.top .tag { display: block; font: 700 11.5px/1.2 Arial, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); margin-top: 6px; }
.nav {
  position: sticky; top: 0; z-index: 40; background: var(--navy);
  display: flex; align-items: center; padding: 0 12px; border-bottom: 3px solid var(--red);
}
.nav a { color: #fff; text-decoration: none; font: 700 12px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 15px 9px; white-space: nowrap; }
.nav a:hover, .nav a.on { background: rgba(255,255,255,.12); }
.nav .era-now { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #cfd6e0; font: 600 13px/1 Arial, sans-serif; opacity: 0; transition: opacity .3s; }
.nav .era-now.show { opacity: 1; }
.crumbs { padding: 12px 44px 0; font-size: 13px; color: var(--soft); }
.crumbs a { color: var(--soft); }

/* nav search box */
.qbox { display: flex; align-items: center; gap: 6px; margin: 6px 0 6px auto; width: 190px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 0 10px; color: #cfd6e0; transition: background .2s, width .25s; }
.qbox:focus-within { background: #fff; color: var(--navy); width: 240px; }
.qbox input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: 600 16px/1 Arial, sans-serif; padding: 7px 2px; outline: none; }
.qbox:focus-within input { color: var(--ink); }
.qbox input::placeholder { color: #b9c3d0; font-weight: 400; font-size: 14px; }
.nav .era-now + .qbox { margin-left: 12px; }

/* ---------- Hero ---------- */
.hero { display: flex; gap: 32px; padding: 34px 44px 30px; background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); border-bottom: 1px solid var(--line); }
.hero.dark { color: #e6ebf2; background: radial-gradient(120% 140% at 0% 0%, #1d3557 0%, var(--navy) 60%, #0b1626 100%); border-bottom: 4px solid var(--red); }
.hero.dark h1 { color: #fff; }
.hero.dark p { color: #cfd8e4; }
.hero .ph img { border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.hero h1 { font-size: 40px; line-height: 1.05; margin: 2px 0 12px; text-transform: uppercase; letter-spacing: -.01em; }
.hero .kicker { font: 700 12px/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.hero.dark .kicker { color: #ff6b72; }
.hero p { font-size: 16.5px; color: #333; }
.hero-text { flex: 1; min-width: 0; }
.hero-portrait { width: 330px; flex: none; margin: 0; }
.hero-portrait img { width: 330px; height: auto; border-radius: 5px; box-shadow: 0 8px 22px rgba(0,0,0,.35); background: #fff; }
.hero-portrait figcaption { color: #9fb0c6; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 0; }
.stats div { background: rgba(255,255,255,.06); border-left: 3px solid var(--red); padding: 9px 11px; border-radius: 0 4px 4px 0; }
.hero:not(.dark) .stats div { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--red); }
.stats b { display: block; font: italic 900 23px/1.1 "Arial Black", Arial, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.hero:not(.dark) .stats b { color: var(--navy); }
.stats span { display: block; font-size: 11.5px; line-height: 1.35; color: #b8c4d4; margin-top: 3px; }
.hero:not(.dark) .stats span { color: var(--soft); }
.eras { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.eras a { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--navy); font: 700 12.5px/1 Arial, sans-serif; border: 1px solid var(--line); background: #fff; border-radius: 30px; padding: 8px 13px; }
.eras a:hover { border-color: var(--red); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding: 18px 0 30px; }
.timeline::before, .tl-fill {
  content: ""; position: absolute; left: var(--dot); top: 0; width: 4px; margin-left: -2px; border-radius: 2px;
}
.timeline::before { bottom: 0; background: var(--line); }
.tl-fill { height: 0; background: linear-gradient(180deg, var(--red), var(--navy)); z-index: 1; }
.era { display: flex; position: relative; padding: 26px 0 8px; }
.era + .era { border-top: 1px dashed var(--line); }
.rail { width: var(--rail); flex: none; position: relative; }
.marker { position: sticky; top: 64px; padding: 4px 10px 12px calc(var(--dot) + 24px); z-index: 2; }
.marker::before {
  content: ""; position: absolute; left: calc(var(--dot) - 10px); top: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 4px solid var(--line); transition: border-color .35s, transform .35s;
}
.era.active .marker::before, .era.passed .marker::before { border-color: var(--red); }
.era.active .marker::before { transform: scale(1.18); background: var(--red); box-shadow: 0 0 0 5px rgba(215,38,47,.15); }
.marker .yr { font: 800 24px/1 Arial, sans-serif; color: var(--navy); letter-spacing: -.02em; }
.marker .ctry { font: 700 11px/1.3 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 5px 0 9px; }
.marker .lbl { font: 700 10.5px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 10px 0 5px; }
.marker ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.35; }
.marker li { margin: 0 0 4px; padding-left: 10px; position: relative; }
.marker li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--red); }
.marker .car { font-size: 12.5px; line-height: 1.35; color: var(--soft); }
.body { flex: 1; min-width: 0; padding: 0 34px 10px 0; }
.era-head { margin-bottom: 18px; }
.era-head .sub { font-size: 15px; color: var(--soft); margin: 0; }

/* Content blocks */
.card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px 8px; margin: 0 0 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card::after { content: ""; display: block; clear: both; }
.card.plain { border: 0; box-shadow: none; padding: 0; background: none; }
.card .when { font: 700 11.5px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.facts span, .facts a { font: 600 12px/1 Arial, sans-serif; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; color: #333; text-decoration: none; }
.facts a:hover { border-color: var(--red); }
.facts b { color: var(--navy); }
.src { font-size: 12.5px; color: var(--soft); }
.src a { color: var(--soft); }
.btn { display: inline-block; font: 700 12.5px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--red); padding: 9px 14px; border-radius: 16px; text-decoration: none; }
.btn:hover { background: #ef3640; }
.btn.ghost { background: #fff; color: var(--red); border: 1.5px solid var(--red); }
blockquote { margin: 10px 0 12px; padding: 4px 0 4px 16px; border-left: 4px solid var(--gold); font-size: 16px; color: #333; }
blockquote cite { display: block; font-size: 12.5px; font-style: normal; color: var(--soft); margin-top: 4px; }

/* Photos and clippings */
.ph { display: block; cursor: zoom-in; }
.ph img { object-fit: cover; border-radius: 4px; background: #eee; transition: box-shadow .3s; }
.ph:hover img { box-shadow: 0 6px 16px rgba(0,0,0,.18); }
figure { margin: 0 0 12px; }
figcaption { font-size: 12.5px; line-height: 1.4; color: var(--soft); margin-top: 6px; }
.fr { float: right; margin: 2px 0 12px 22px; }
.fl { float: left; margin: 2px 22px 12px 0; }
.clip { width: 220px; }
.clip img { width: 220px; height: auto; border: 1px solid var(--line); background: #fff; }

/* Footer */
.credits { padding: 14px 44px; font-size: 12.5px; color: var(--soft); border-top: 1px solid var(--line); }
.foot { background: var(--navy); color: #cfd6e0; font-size: 13px; padding: 18px 44px; display: flex; gap: 24px; justify-content: space-between; border-top: 3px solid var(--red); }
.foot a { color: #fff; }

/* Plain page */
.sec { padding: 30px 44px 16px; }
.sec h1 { font-size: 32px; margin: 0 0 14px; text-transform: uppercase; line-height: 1.1; }
.lead { font-size: 17px; line-height: 1.6; color: #333; max-width: 800px; }

/* Scroll reveal (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; height: auto; background: #fff; }
.lightbox p { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; color: #fff; font-size: 14px; }

/* ---------- Records, tables, jump links ---------- */
.rec-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.rec-jump a, .rec-jump button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1.5px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--navy); font: 700 12.5px/1 Arial, sans-serif; background: #fff; cursor: pointer; }
.rec-jump a:hover, .rec-jump button:hover { border-color: var(--navy); }
.rec-jump .on { background: var(--navy); border-color: var(--navy); color: #fff; }
.rec-jump small { font-size: 10.5px; color: #8a93a3; }
.rec-jump .on small { color: #cfd6e0; }
.rec-h { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; padding-bottom: 8px; border-bottom: 3px solid var(--red); }
.rec-table { overflow-x: auto; margin: 4px 0 12px; }
.rec-table table { border-collapse: collapse; font-size: 13.5px; width: 100%; }
.rec-table th { text-align: left; font: 700 10.5px/1.2 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); padding: 6px 12px 6px 0; border-bottom: 2px solid var(--navy); white-space: nowrap; }
.rec-table td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: top; }
.rec-table td a { text-decoration: none; }
.rec-table td a:hover { text-decoration: underline; }
.rec-table tr.win td:first-child { color: var(--red); font-weight: 700; }
.rec-table th.sort { cursor: pointer; }
.rec-table th.sort::after { content: " ↕"; color: #b7bdc7; }
.rec-bars { margin: 6px 0 12px; }
.rec-bars div { display: grid; grid-template-columns: 210px 1fr 44px; align-items: center; gap: 10px; padding: 3px 0; font-size: 13.5px; }
.rec-bars i { display: block; height: 12px; width: calc(var(--v) * 100%); min-width: 4px; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, var(--navy), #2c4a74); }
.rec-bars b { font: italic 900 15px/1 "Arial Black", Arial, sans-serif; color: var(--navy); text-align: right; }
.rec-bars a { color: var(--ink); text-decoration: none; }
.rec-bars a:hover { color: var(--red); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }

/* Position badges */
.pos { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 4px; background: var(--paper); border: 1px solid var(--line); font: 800 12px/1 Arial, sans-serif; color: var(--navy); }
.pos.p1 { background: var(--gold); border-color: #c48d14; color: #3b2800; }
.pos.p2 { background: #d9dde3; border-color: #b7bdc7; }
.pos.p3 { background: #e7c3a0; border-color: #c9996c; }
.pos.dnf { color: #8a919e; font-weight: 700; font-size: 10.5px; }

/* ---------- Explorer (drivers / cars) ---------- */
.xp { display: grid; grid-template-columns: 270px 1fr; gap: 0; border-top: 1px solid var(--line); min-height: 70vh; }
.xp-list { border-right: 1px solid var(--line); background: var(--paper); position: sticky; top: 51px; height: calc(100vh - 51px); display: flex; flex-direction: column; }
.xp-tools { padding: 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.xp-tools input, .xp-tools select { width: 100%; font: 16px Arial, sans-serif; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; }
.xp-tools input:focus { border-color: var(--navy); outline: none; }
.xp-tools .row { display: flex; gap: 6px; }
.xp-tools .row select { font-size: 13px; padding: 5px 6px; }
.xp-count { font-size: 11.5px; color: var(--soft); }
.xp-items { overflow-y: auto; flex: 1; list-style: none; margin: 0; padding: 0; }
.xp-items li { margin: 0; }
.xp-items a { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #eceef1; text-decoration: none; color: var(--ink); font-size: 13.5px; line-height: 1.3; }
.xp-items a:hover { background: #fff; }
.xp-items a.on { background: var(--navy); color: #fff; }
.xp-items a span { flex: 1; min-width: 0; }
.xp-items a small { font-size: 11px; color: #8a93a3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp-items a.on small { color: #cfd6e0; }
.xp-items a i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--red); }
.xp-items a.on i { color: #ff9aa0; }
.xp-main { min-width: 0; padding: 22px 30px 30px; }
.xp-empty { color: var(--soft); padding: 40px 0; }
.xp-compare { margin: 0 0 14px; font-size: 13px; color: var(--soft); }

/* Profile (driver / car) */
.pf-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.pf-badge { width: 64px; height: 64px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font: 900 21px/1 Arial, sans-serif; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); }
.pf-head h1, .pf-head h2 { margin: 2px 0 4px; font-size: 30px; line-height: 1.1; text-transform: none; }
.pf-sub { font-size: 13.5px; color: var(--soft); }
.pf-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.pf-stat { display: flex; align-items: baseline; gap: 6px; padding: 6px 11px; background: var(--paper); border-radius: 4px; border-left: 3px solid var(--navy); }
.pf-stat b { font: italic 900 19px/1 "Arial Black", Arial, sans-serif; color: var(--navy); font-variant-numeric: tabular-nums; }
.pf-stat span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.pf-stat.gold { border-left-color: var(--gold); } .pf-stat.gold b { color: #b98510; }
.pf-stat.green { border-left-color: var(--green); } .pf-stat.green b { color: var(--green); }
.pf-stat.red { border-left-color: var(--red); } .pf-stat.red b { color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.chips a, .chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1.5px solid var(--line); border-radius: 16px; font: 700 12px/1 Arial, sans-serif; color: var(--navy); text-decoration: none; background: #fff; }
.chips a:hover { border-color: var(--red); }
.chips small { font-size: 10.5px; color: #8a93a3; font-weight: 700; }
.pf h3 { margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line); font-size: 17px; }

/* results strip + position trace (like the Jenner race logs) */
.rs { margin: 6px 0 14px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-family: Arial, Helvetica, sans-serif; background: #fff; }
.rs::before { content: ""; display: block; height: 6px; background: repeating-conic-gradient(var(--navy) 0 25%, #fff 0 50%) 0 0 / 6px 6px; }
.rs-scroll { overflow-x: auto; scrollbar-width: thin; }
.rs-inner { position: relative; }
.rs svg { display: block; }
.rs-trace { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.rs-band { fill: rgba(224,165,38,.13); }
.rs-grid { stroke: #eceef1; }
.rs-dot { fill: var(--navy); stroke: #fff; stroke-width: 2; }
.rs-dot.pod { stroke: var(--gold); stroke-width: 2.5; }
.rs-dot.p1 { fill: var(--red); }
.rs-cols { display: flex; list-style: none; margin: 0; padding: 0 0 8px; }
.rs-col { flex: 0 0 86px; width: 86px; padding: 6px 6px 4px 8px; border-left: 1px solid #f0f1f3; position: relative; }
.rs-col.pod { background: linear-gradient(180deg, rgba(224,165,38,.12), rgba(224,165,38,0) 75%); }
.rs-col .p { font: italic 900 22px/1 "Arial Black", Arial, sans-serif; color: var(--navy); margin: 4px 0; }
.rs-col .p small { font-size: 10.5px; color: #8a919e; }
.rs-col.pod .p { color: #b98510; }
.rs-col .p.dnf { font-size: 13px; color: #9aa1ad; margin: 9px 0; }
.rs-col .r { font: 700 10.5px/1.2 Arial, sans-serif; color: var(--navy); text-transform: uppercase; max-height: 38px; overflow: hidden; }
.rs-col .y { position: absolute; top: 6px; right: 5px; font: 700 9px/1 Arial, sans-serif; color: #fff; background: var(--navy); padding: 3px 4px; border-radius: 3px; }
.rs-col .c { font-size: 10px; color: var(--soft); line-height: 1.2; margin-top: 3px; max-height: 24px; overflow: hidden; }
.rs-col a { color: inherit; text-decoration: none; }
.rs-col a:hover .r { color: var(--red); }

/* mentions (article cards in a profile) */
.mentions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 14px; }
.mention { display: flex; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--ink); background: #fff; font-size: 13px; line-height: 1.4; }
.mention:hover { border-color: var(--red); box-shadow: 0 3px 10px rgba(19,37,61,.08); }
.mention img { width: 84px; height: 58px; object-fit: cover; object-position: top; border: 1px solid var(--line); flex: none; background: #fff; }
.mention b { display: block; color: var(--navy); font-size: 13.5px; }
.mention time { display: block; font: 700 10.5px/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 2px; }
.more { display: inline-block; margin: 0 0 12px; font: 700 12px/1 Arial, sans-serif; color: var(--red); cursor: pointer; background: none; border: 0; padding: 0; }

/* ---------- Press archive ---------- */
.ar-bar { position: sticky; top: 51px; z-index: 30; background: #fff; border-bottom: 1px solid var(--line); padding: 10px 44px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ar-bar input { font: 16px Arial, sans-serif; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 6px; width: 260px; }
.ar-bar button { padding: 5px 10px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font: 700 11.5px/1 Arial, sans-serif; color: var(--navy); cursor: pointer; }
.ar-bar button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.ar-bar .n { margin-left: auto; font-size: 12px; color: var(--soft); }
.ar-year { margin: 26px 44px 10px; display: flex; align-items: baseline; gap: 10px; border-bottom: 3px solid var(--red); padding-bottom: 6px; }
.ar-year h2 { margin: 0; }
.ar-year span { font-size: 13px; color: var(--soft); }
.ar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 44px; }
.ar-item { display: block; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; }
.ar-item:hover { box-shadow: 0 6px 18px rgba(19,37,61,.15); transform: translateY(-2px); }
.ar-item img { width: 100%; height: 140px; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); background: #fff; }
.ar-item div { padding: 8px 10px 10px; font-size: 12.5px; line-height: 1.4; }
.ar-item time { display: block; font: 700 10.5px/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 3px; }
.ar-item b { display: block; color: var(--navy); font-size: 13.5px; line-height: 1.3; margin-bottom: 3px; }
.ar-item[hidden] { display: none; }

/* Article page: the scan with pan/zoom, beside what it says */
.art { display: grid; grid-template-columns: 1fr 330px; gap: 24px; padding: 18px 44px 20px; }
.viewer { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #f3f3f1; height: 560px; cursor: grab; touch-action: none; }
.viewer.drag { cursor: grabbing; }
.viewer img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; background: #fff; }
.viewer-tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; z-index: 2; }
.viewer-tools button, .viewer-tools a { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; font: 700 17px/32px Arial, sans-serif; text-align: center; cursor: pointer; text-decoration: none; }
.viewer-tools button:hover, .viewer-tools a:hover { background: var(--red); }
.viewer-hint { position: absolute; left: 10px; bottom: 8px; font-size: 11.5px; color: var(--soft); background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 10px; }
.art-side h1 { font-size: 24px; line-height: 1.15; text-transform: none; margin: 4px 0 10px; }
.art-side .chips { margin-bottom: 8px; }
.art-pn { display: flex; justify-content: space-between; gap: 10px; margin: 0 44px 10px; font-size: 13px; }
.art-pn a { text-decoration: none; font-weight: 700; }
.story { border-top: 3px solid var(--navy); padding-top: 10px; margin-bottom: 18px; }
.story h2 { font-size: 21px; margin: 2px 0 6px; }
.story .kind { font: 700 10.5px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.ocr { white-space: pre-wrap; font: 13px/1.55 Georgia, "Times New Roman", serif; color: #333; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; max-height: 520px; overflow-y: auto; }
details.ocr-wrap summary { cursor: pointer; font: 700 12.5px/1 Arial, sans-serif; color: var(--red); margin: 6px 0 10px; }

/* ---------- Search page ---------- */
.sr-box { display: flex; gap: 8px; margin: 10px 0 6px; }
.sr-box input { flex: 1; font: 18px Arial, sans-serif; padding: 11px 14px; border: 2px solid var(--navy); border-radius: 8px; }
.sr-box button { font: 700 14px Arial, sans-serif; padding: 0 18px; border: 0; border-radius: 8px; background: var(--red); color: #fff; cursor: pointer; }
.sr-sugg { font-size: 13px; color: var(--soft); }
.sr-sugg a { margin-right: 8px; }
.sr-group { margin: 22px 0 8px; font: 700 12px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); display: flex; gap: 8px; align-items: baseline; }
.sr-group b { color: var(--navy); font-size: 14px; }
.sr-ent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sr-ent a { display: block; padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 13px; }
.sr-ent a b { display: block; color: var(--navy); font-size: 14px; }
.sr-ent a:hover { border-color: var(--red); }
.sr-hit { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.sr-hit img { width: 96px; height: 66px; object-fit: cover; object-position: top; border: 1px solid var(--line); flex: none; background: #fff; }
.sr-hit b { color: var(--navy); }
.sr-hit time { font: 700 10.5px/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--red); display: block; }
.sr-hit p { margin: 3px 0 0; font-size: 13px; color: #444; }
.sr-hit:hover b { color: var(--red); }
mark { background: #ffe066; color: inherit; padding: 0 1px; border-radius: 2px; }

/* ---------- Knowledge pages ---------- */
.kb { display: grid; grid-template-columns: 1fr 250px; gap: 30px; padding: 26px 44px 20px; }
.kb h2 { margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 3px solid var(--red); font-size: 24px; }
.kb h2:first-child { margin-top: 0; }
.kb-toc { position: sticky; top: 70px; align-self: start; font-size: 13px; border-left: 3px solid var(--line); padding-left: 14px; }
.kb-toc b { display: block; font: 700 10.5px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin-bottom: 8px; }
.kb-toc a { display: block; padding: 3px 0; color: var(--navy); text-decoration: none; }
.kb-toc a:hover { color: var(--red); }
.cite { font-size: 11px; vertical-align: super; line-height: 0; text-decoration: none; }
.note { border-left: 4px solid var(--gold); background: #fffaf0; padding: 10px 14px; border-radius: 0 6px 6px 0; font-size: 14px; margin: 0 0 14px; }
.refs { font-size: 12.5px; color: var(--soft); }
.refs li { margin-bottom: 5px; }
.decade-bar { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin: 10px 0 4px; }
.decade-bar a { flex: 1; background: linear-gradient(180deg, #2c4a74, var(--navy)); border-radius: 2px 2px 0 0; min-height: 2px; position: relative; }
.decade-bar a:hover { background: var(--red); }
.decade-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--soft); }

/* no double-tap zoom on phones (pinch zoom still works) */
html, body, a, button, input, select, label { touch-action: manipulation; }
.extra { display: none; }

/* ---------- Desktop / mobile view switch (assets/site.js) ---------- */
.topwrap { position: relative; }
.view-btn { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  font: 700 12px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); background: #fff;
  border: 1.5px solid var(--navy); border-radius: 18px; padding: 8px 12px; cursor: pointer; }
.view-btn::before { content: ""; width: 9px; height: 14px; border: 2px solid currentColor; border-radius: 2px; }
.view-btn:hover { background: var(--navy); color: #fff; }
/* Shown on phones in the desktop view. The page is drawn 980px wide and scaled down to the phone,
   so everything here is big enough to read and tap at about 40%. */
.viewpick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 22px; padding: 26px 30px;
  background: var(--navy); color: #fff; border-bottom: 6px solid var(--red); text-align: center; }
.viewpick[hidden] { display: none; }
.vp-msg { flex-basis: 100%; font: 700 34px/1.25 Arial, sans-serif; }
.vp-go, .vp-no { font: 800 34px/1 Arial, sans-serif; border-radius: 40px; padding: 22px 36px; cursor: pointer; }
.vp-go { background: var(--red); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.vp-no { background: transparent; color: #cfd8e4; border: 3px solid #5c6f8a; }

/* ---------- Mobile view (html.m, width=device-width) ---------- */
html.m body { font-size: 16px; }
html.m .page { width: auto; max-width: 100%; overflow-x: hidden; }
html.m .viewpick { display: none !important; }
html.m .top { justify-content: flex-start; gap: 10px; padding: 12px 16px 10px; }
html.m .top .mark { width: 40px; height: 40px; }
html.m .top .word { letter-spacing: .04em; white-space: nowrap; }
html.m .top .tag { font-size: 9.5px; letter-spacing: .14em; margin-top: 4px; }
html.m .topwrap { display: flex; align-items: center; }
html.m .topwrap .top { flex: 1; min-width: 0; order: 1; }
html.m .view-btn { position: static; transform: none; order: 2; flex: none; margin-right: 10px; padding: 6px 8px; font-size: 9.5px; letter-spacing: .03em; }
html.m .top .word { font-size: 18px; }
html.m .top > span { min-width: 0; overflow: hidden; }
html.m .top .tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.m .nav { flex-wrap: wrap; padding: 0; position: sticky; }
html.m .nav > a { padding: 13px 10px; font-size: 11.5px; }
html.m .nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
html.m .nav::-webkit-scrollbar { display: none; }
html.m .qbox { display: none; }
html.m .crumbs { padding: 10px 16px 0; }
html.m .sec { padding: 20px 16px 12px; }
html.m .sec h1, html.m .hero h1 { font-size: 26px; }
html.m h2 { font-size: 22px; }
html.m .lead { font-size: 16px; }
html.m .hero { flex-direction: column; gap: 18px; padding: 22px 16px; }
html.m .hero-portrait, html.m .hero-portrait img { width: 100%; }
html.m .stats { grid-template-columns: 1fr 1fr; }
html.m .eras a { font-size: 12px; padding: 7px 11px; }
/* timeline: the year sits above its cards */
html.m .timeline::before, html.m .tl-fill { display: none; }
html.m .era { display: block; padding: 18px 0 4px; }
html.m .rail { width: auto; }
html.m .marker { position: static; padding: 0 16px 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
html.m .marker::before { display: none; }
html.m .marker .ctry { margin: 0; }
html.m .marker .car { flex-basis: 100%; }
html.m .marker .lbl, html.m .marker ul { display: none; }
html.m .body { padding: 0 16px 6px; }
html.m .card { padding: 14px 14px 6px; }
html.m .fr, html.m .fl { float: none; margin: 0 0 12px; }
html.m figure { max-width: 100%; }
html.m figure img, html.m .ph img { max-width: 100%; height: auto; }
html.m .cols2, html.m .cols3, html.m .mentions, html.m .sr-ent { grid-template-columns: 1fr; }
html.m .rec-table table { font-size: 13px; }
html.m .rec-bars div { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 40px; gap: 8px; font-size: 13px; }
html.m .rec-jump a, html.m .rec-jump button { font-size: 12px; padding: 7px 11px; }
/* explorers: the list above the profile */
html.m .xp { grid-template-columns: 1fr; }
html.m .xp-list { position: static; height: auto; max-height: 55vh; border-right: 0; border-bottom: 1px solid var(--line); }
html.m .xp-main { padding: 18px 16px 24px; }
html.m .pf-head h1, html.m .pf-head h2 { font-size: 24px; }
html.m .pf-badge { width: 48px; height: 48px; font-size: 17px; }
/* archive and clipping pages */
html.m .ar-bar { position: static; padding: 10px 16px; }
html.m .ar-bar input { width: 100%; }
html.m .ar-year { margin: 20px 16px 10px; }
html.m .ar-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
html.m .ar-item img { height: 110px; }
html.m .art { grid-template-columns: 1fr; padding: 12px 16px; }
html.m .art-side { order: -1; }
html.m .viewer { height: 62vh; }
html.m .art-pn { margin: 0 16px 8px; }
/* knowledge pages, search, footer */
html.m .kb { grid-template-columns: 1fr; padding: 18px 16px; }
html.m .kb-toc { display: none; }
html.m .sr-box input { font-size: 16px; }
html.m .sr-hit img { width: 72px; height: 52px; }
html.m .foot { flex-direction: column; gap: 10px; padding: 18px 16px; }
html.m .credits { padding: 12px 16px; }

/* ---------- Header banner: RNZAF Station Wigram's control tower and hangars ---------- */
.topwrap { display: flex; align-items: flex-end; min-height: 170px;
  background: linear-gradient(90deg, rgba(11,22,38,.45) 0%, rgba(11,22,38,.15) 45%, rgba(11,22,38,0) 70%),
              linear-gradient(0deg, rgba(11,22,38,.85) 0%, rgba(11,22,38,.35) 32%, rgba(11,22,38,0) 60%),
              url(/images/wigram-banner.jpg) center 50% / cover no-repeat #13253d; }
.page.home .topwrap { min-height: 340px; background-position: center, center, center 70%; }
.topwrap .top { justify-content: flex-start; padding: 0 30px 20px; }
.topwrap .top .word { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.5); }
.topwrap .top .word span { color: #ff4d57; }
.topwrap .top .tag { color: #dbe3ee; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.topwrap .top .mark { box-shadow: 0 0 0 3px rgba(255,255,255,.85); border-radius: 50%; }
.view-btn { top: 16px; transform: none; background: rgba(255,255,255,.92); }
.banner-cap { position: absolute; right: 14px; bottom: 10px; font: 11px/1.2 Arial, sans-serif; color: rgba(255,255,255,.85);
  text-shadow: 0 1px 4px rgba(0,0,0,.8); letter-spacing: .02em; }
html.m .topwrap { min-height: 120px; background-image: linear-gradient(90deg, rgba(11,22,38,.9) 0%, rgba(11,22,38,.55) 60%, rgba(11,22,38,.25) 100%),
  linear-gradient(0deg, rgba(11,22,38,.5) 0%, rgba(11,22,38,0) 50%), url(/images/wigram-banner-980.jpg); }
html.m .page.home .topwrap { min-height: 190px; }
html.m .topwrap .top { padding: 0 12px 12px; }
html.m .topwrap { align-items: flex-end; }
html.m .view-btn { position: absolute; top: 10px; right: 10px; margin: 0; }
html.m .banner-cap { display: none; }