/* BT50 v06 — Card and timeline layout refinement
   Built directly from the original v04 interaction/layout baseline.
   Outer-card and inner-reader geometry are intentionally unchanged. */

:root{
  --bt-cyan:#0084B6;
  --bt-cyan-dark:#006B96;
  --bt-cyan-vibrant:#009FC9;
  --bt-page:#111417;
  --bt-page-2:#171B20;
  --bt-card:#FFF6EC;
  --bt-card-2:#F2E8DC;
  --bt-ink:#F7F4EE;
  --bt-ink-card:#121417;
  --bt-muted:#AEB5BB;
  --bt-muted-card:#5C646D;
  --bt-rule:#4B535B;
  --bt-rule-card:#CFC4B7;
  --bt-rule-dark:#121417;
  --bt-panel:#181D22;
  --bt-panel-strong:#101317;
  --bt-font-display:"Public Sans",Arial,sans-serif;
  --bt-font-editorial:"Public Sans",Arial,sans-serif;
  --bt-font-ui:"Public Sans",Arial,sans-serif;

  --bg:var(--bt-page);
  --bg-deep:#0B0D10;
  --bg-mid:var(--bt-page-2);
  --ink:var(--bt-ink);
  --muted:var(--bt-muted);
  --accent:var(--bt-cyan-vibrant);
  --accent-highlight:#DDF7FF;
  --accent-ink:#061014;
  --panel:rgba(24,29,34,.96);
  --panel-strong:rgba(16,19,23,.98);
  --topbar:rgba(17,20,23,.96);
  --line:rgba(247,244,238,.24);
  --tunnel:rgba(247,244,238,.14);
  --tunnel-glow:transparent;
  --stage-glow:transparent;
  --stage-ring:rgba(247,244,238,.04);
  --paper:var(--bt-card);
  --paper-2:var(--bt-card-2);
  --paper-ink:var(--bt-ink-card);
  --paper-muted:var(--bt-muted-card);
  --paper-rule:var(--bt-rule-dark);
  --paper-shadow:rgba(0,0,0,.34);
  --reader-overlay:rgba(7,9,11,.78);
  --dial-1:#252B31;
  --dial-2:#181D22;
  --dial-3:#22282E;
  --dial-4:#15191E;
  --dial-5:#20262C;
  --dial-end-1:#2E363E;
  --dial-end-2:#1A2026;
  --dial-end-3:#101419;
  --dial-stroke:#717A83;
  --dial-end-stroke:#717A83;
  --dial-tick:#C3CBD1;
  --dial-major:#FFFFFF;
  --dial-year:#F7F4EE;
  --dial-index:#AEB5BB;
  --intro-paper:#111417;
  --intro-paper-deep:#171B20;
  --intro-ink:#F7F4EE;
  --intro-muted:#BCC3C8;
  --intro-gold:#C57736;
  --intro-gold-shadow:#A55A25;
  --intro-gold-highlight:#F3AE5B;
  --intro-blend-mid:#15191D;
  --intro-blend-end:#0B0D10;
}

html[data-theme="light"]{
  --bt-page:#FFF6EC;
  --bt-page-2:#F5EBDD;
  --bt-card:#FFF9F1;
  --bt-card-2:#F3E9DD;
  --bt-ink:#121417;
  --bt-ink-card:#121417;
  --bt-muted:#5C646D;
  --bt-muted-card:#5C646D;
  --bt-rule:#D5CDBE;
  --bt-rule-card:#CFC4B7;
  --bt-panel:#FFF9F1;
  --bt-panel-strong:#F4EADF;

  --bg:var(--bt-page);
  --bg-deep:#F4E9DB;
  --bg-mid:#FAF1E6;
  --ink:var(--bt-ink);
  --muted:var(--bt-muted);
  --accent:var(--bt-cyan);
  --accent-highlight:#E7F7FC;
  --accent-ink:#FFFFFF;
  --panel:rgba(255,249,241,.95);
  --panel-strong:rgba(244,234,223,.98);
  --topbar:rgba(255,246,236,.97);
  --line:rgba(18,20,23,.20);
  --tunnel:rgba(18,20,23,.12);
  --tunnel-glow:transparent;
  --stage-glow:transparent;
  --stage-ring:rgba(18,20,23,.035);
  --paper:var(--bt-card);
  --paper-2:var(--bt-card-2);
  --paper-ink:var(--bt-ink-card);
  --paper-muted:var(--bt-muted-card);
  --paper-rule:var(--bt-rule-dark);
  --paper-shadow:rgba(70,60,45,.14);
  --reader-overlay:rgba(18,20,23,.36);
  --dial-1:#FAF7F0;
  --dial-2:#ECE5D9;
  --dial-3:#FFFDF8;
  --dial-4:#E5DDD0;
  --dial-5:#F4EEE4;
  --dial-end-1:#FFFDF8;
  --dial-end-2:#E9E1D4;
  --dial-end-3:#D8CFC1;
  --dial-stroke:#8E877C;
  --dial-end-stroke:#8E877C;
  --dial-tick:#5C646D;
  --dial-major:#121417;
  --dial-year:#121417;
  --dial-index:#5C646D;
  --intro-paper:#FFF6EC;
  --intro-paper-deep:#F4E9DB;
  --intro-ink:#121417;
  --intro-muted:#5C646D;
  --intro-blend-mid:#F4E9DB;
  --intro-blend-end:#F4E9DB;
}

html,body,button{font-family:var(--bt-font-ui)}
body{
  background:var(--bt-page);
  color:var(--bt-ink);
}

/* Intro: retain v02 counter choreography, apply Style 01 editorial hierarchy. */
.bt50-intro{
  background:linear-gradient(180deg,var(--intro-paper) 0%,var(--intro-paper) 72%,var(--intro-paper-deep) 90%,var(--intro-blend-end) 100%);
}
.bt50-intro::after{
  height:clamp(64px,10vh,128px);
  background:linear-gradient(180deg,transparent,var(--intro-blend-end));
}
.bt50-intro__title{
  color:var(--bt-cyan);
  font-family:var(--bt-font-display);
  font-weight:900;
  line-height:.88;
  letter-spacing:normal!important;
  text-transform:uppercase;
}
.bt50-intro .bt50-intro__title-part{letter-spacing:normal!important}
.bt50-intro__source{filter:drop-shadow(0 7px 14px rgba(0,0,0,.10))}
.bt50-intro__glass::after{opacity:.44}
.bt50-intro__subheader{
  color:var(--intro-muted);
  font-family:var(--bt-font-editorial);
  font-style:italic;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
}
.bt50-intro__enter{
  border:1px solid color-mix(in srgb,var(--bt-cyan) 56%,var(--bt-rule));
  border-radius:2px;
  color:var(--bt-cyan-dark);
  background:color-mix(in srgb,var(--bt-cyan) 8%,var(--intro-paper));
  box-shadow:none;
  font-family:var(--bt-font-ui);
  letter-spacing:.075em;
}
@media (max-width:700px) and (orientation:portrait){
  .bt50-intro .bt50-intro__title-part--left{
    width:max-content;
    max-width:none;
    font-size:clamp(2.5rem,12.2vw,3.2rem);
    white-space:nowrap;
  }
}
[data-theme="dark"] .bt50-intro__enter{
  color:#EAF9FD;
  background:color-mix(in srgb,var(--bt-cyan) 20%,var(--intro-paper));
}
.bt50-intro__enter::before{border-color:color-mix(in srgb,var(--bt-cyan) 35%,transparent)}
.bt50-intro__enter:hover{
  color:#fff;
  background:var(--bt-cyan-dark);
  text-decoration:none;
}
.bt50-intro__enter:focus-visible{outline-color:var(--bt-cyan)}

/* Timeline canvas: warm newsprint in light mode, ink-room equivalent in dark mode. */
#timeline,
html[data-theme="dark"] #timeline{
  background:linear-gradient(180deg,var(--intro-blend-end) 0%,var(--bt-page) 9%,var(--bt-page) 100%);
}
#timeline .topbar{background:transparent}
.stage:before{
  background:
    radial-gradient(ellipse 54% 34% at 50% 47%,color-mix(in srgb,var(--bt-cyan) 4%,transparent),transparent 70%);
}
.tunnel{
  border:1px solid var(--tunnel);
  box-shadow:none;
  opacity:.5;
}

/* Header utilities. */
.timeline-return,
.theme-toggle,
.category-scroll-button{
  border-color:var(--line);
  border-radius:2px;
  background:var(--panel);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.timeline-return{border-radius:2px}
.timeline-return:hover,.theme-toggle:hover,.category-scroll-button:hover{
  background:color-mix(in srgb,var(--panel) 88%,var(--bt-cyan) 12%);
  text-decoration:none;
}
.status{font-family:var(--bt-font-ui);color:var(--muted);letter-spacing:.025em}
.status strong{
  color:var(--bt-cyan);
  font-family:var(--bt-font-display);
  font-size:1.2em;
  font-weight:800;
  letter-spacing:.02em;
}
#surpriseButton{
  border-color:color-mix(in srgb,var(--bt-cyan) 58%,var(--line));
  color:var(--bt-cyan-dark);
  background:color-mix(in srgb,var(--bt-cyan) 8%,var(--panel));
}
[data-theme="dark"] #surpriseButton{color:#EAF9FD;background:color-mix(in srgb,var(--bt-cyan) 18%,var(--panel))}
#surpriseButton::before,#surpriseButton::after{display:none!important}

/* Cards: clean front-page sheets instead of torn/glass artefacts. */
.clipping__paper,
.is-mobile-smooth .clipping__paper{
  -webkit-clip-path:none!important;
  clip-path:none!important;
  border:1px solid var(--bt-rule-card);
  border-radius:0;
  background:linear-gradient(180deg,var(--bt-card),var(--bt-card) 78%,var(--bt-card-2));
  box-shadow:0 18px 38px var(--paper-shadow),0 1px 0 rgba(255,255,255,.65) inset;
}
.clipping.is-active .clipping__paper,
.is-mobile-smooth .clipping.is-active .clipping__paper{
  box-shadow:0 22px 44px var(--paper-shadow),0 0 0 2px var(--bt-cyan);
}
.clipping__year{
  color:var(--bt-cyan);
  font-family:var(--bt-font-display);
  font-weight:900;
  letter-spacing:.005em;
}
.clipping__visual-circle{
  border-color:color-mix(in srgb,var(--bt-rule-card) 70%,var(--story-accent,var(--bt-cyan)) 30%);
}
.clipping__visual-circle:after{border-color:color-mix(in srgb,var(--bt-cyan) 18%,transparent)}
.clipping__visual-image{filter:drop-shadow(0 7px 5px rgba(18,20,23,.15))}
.clipping__visual-image--artwork{filter:none}
.clipping__stat b{
  color:var(--bt-ink-card);
  font-family:var(--bt-font-display);
  font-weight:800;
  letter-spacing:-.025em;
}
.clipping__stat small{
  color:var(--bt-muted-card);
  font-family:var(--bt-font-ui);
  font-weight:650;
  letter-spacing:.015em;
}

/* Bottom controls and rotary selector. */
.control{
  background:linear-gradient(180deg,transparent,var(--bt-page) 26%);
}
.wheel-shell{
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--panel);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.wheel-labels{
  color:var(--muted);
  font-family:var(--bt-font-ui);
  letter-spacing:.02em;
}
.wheel-labels strong{color:var(--ink);font-weight:700}
.category-pill{
  border-radius:2px;
  font-family:var(--bt-font-ui);
  font-weight:650;
  box-shadow:none;
}
.category-pill[data-category]:not([data-category="All"]):not([aria-pressed="true"]){
  background:color-mix(in srgb,var(--category-color) 7%,var(--panel));
}
.category-pill[aria-pressed="true"]{
  border-color:var(--bt-cyan);
  color:#fff;
  background:var(--bt-cyan);
}
.category-pill[data-category]:not([data-category="All"])[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--category-color) 78%,var(--bt-rule-dark));
}
.rotary-dial{
  border:1px solid var(--line);
  border-radius:3px;
  background:color-mix(in srgb,var(--panel-strong) 94%,var(--bt-cyan) 6%);
}
.rotary-dial::before,.rotary-dial::after{display:none!important}
#rotarySvg [filter]{filter:none!important}
.dial-end-hit{border-radius:2px}
.dial-end-hit span{
  color:var(--bt-cyan-dark);
  border:1px solid color-mix(in srgb,var(--bt-cyan) 50%,var(--line));
  background:color-mix(in srgb,var(--bt-cyan) 10%,var(--panel));
  box-shadow:none;
}
[data-theme="dark"] .dial-end-hit span{color:#EAF9FD;background:color-mix(in srgb,var(--bt-cyan) 18%,var(--panel))}
.hint{color:var(--muted);font-family:var(--bt-font-ui)}

/* Reader: editorial paper sheet with a restrained cyan rule. */
.reader{backdrop-filter:none;-webkit-backdrop-filter:none}
.reader__card{
  border:1px solid var(--bt-rule-card);
  border-radius:0;
  color:var(--bt-ink-card);
  background:var(--bt-card);
  box-shadow:0 28px 70px rgba(0,0,0,.28);
}
.reader__card::before{height:5px;background:var(--bt-cyan)!important}
.reader__close{
  border-color:var(--bt-rule-card);
  border-radius:2px;
  color:var(--bt-ink-card);
  background:var(--bt-card-2);
}
.reader__year{
  color:var(--bt-cyan)!important;
  font-family:var(--bt-font-display);
  font-weight:900;
  letter-spacing:0;
}
.reader__headline{
  color:var(--bt-ink-card);
  font-family:var(--bt-font-editorial);
  font-weight:600;
  letter-spacing:-.02em;
}
.reader__stat{border-top:3px double var(--bt-rule-dark)!important}
.reader__number{
  color:var(--bt-ink-card)!important;
  font-family:var(--bt-font-display);
  font-weight:800;
  letter-spacing:-.02em;
}
.reader__label{
  color:var(--bt-muted-card);
  font-family:var(--bt-font-editorial);
  font-weight:400;
  line-height:1.5;
}

/* Reading view inherits the same print system. */
.reading-view{
  color:var(--bt-ink-card);
  background:var(--bt-page);
}
.reading-view__article{font-family:var(--bt-font-editorial)}
.reading-view__back{color:var(--bt-cyan-dark);font-family:var(--bt-font-ui)}
.reading-view__eyebrow{color:var(--bt-cyan);font-family:var(--bt-font-ui);letter-spacing:.12em}
.reading-view__title{
  color:var(--bt-cyan);
  font-family:var(--bt-font-display);
  font-weight:900;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.reading-view__dek{color:var(--bt-muted-card);font-family:var(--bt-font-editorial);font-style:italic}
.reading-view__story{border-top:3px double var(--bt-rule-dark)}
.reading-view__story h2{font-family:var(--bt-font-editorial);font-weight:600}
.reading-view__category{color:var(--bt-muted-card);font-family:var(--bt-font-ui)}
.reading-view__figure{color:var(--bt-cyan-dark);font-family:var(--bt-font-display);font-weight:800}
.reading-view__detail{font-family:var(--bt-font-editorial)}

/* Small-screen restraint: preserve existing geometry and touch targets. */
@media (max-width:700px){
  .bt50-intro__title{letter-spacing:normal!important}
  .bt50-intro .bt50-intro__title-part{letter-spacing:normal!important}
  .wheel-shell{border-radius:2px}
}

@media (prefers-reduced-motion:reduce){
  .timeline-return__icon{animation:none}
}

/* Flat rotary control + blue intro counter. */

/* The animated 01-50 counter retains its blue treatment. */
.bt50-intro__source,
.bt50-intro__output{
  color:var(--bt-cyan);
}

/* Flatten the timeline control: remove the glass/pill treatment while
   retaining the same hit areas, tick layer and interaction geometry. */
.wheel-shell{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.rotary-dial{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden;
}
.rotary-dial::before,
.rotary-dial::after{
  display:none!important;
}
#rotarySvg [filter]{
  filter:none!important;
}
/* Main dial body: single flat surface, no end-cap ellipses or sheen. */
#rotarySvg > g > rect:first-of-type{
  fill:var(--panel-strong)!important;
  stroke:var(--line)!important;
  stroke-opacity:1!important;
  rx:4px!important;
}
#rotarySvg > g > ellipse{
  display:none!important;
}
#rotarySvg > g > g[clip-path]{
  display:none!important;
}
/* Active story marker: retain the cyan register, without the rounded glass tab. */
#rotarySvg > g > rect[fill="var(--accent)"]{
  fill:var(--bt-cyan)!important;
  fill-opacity:1!important;
  stroke:none!important;
  rx:3px!important;
}
#rotarySvg > g > path{
  display:none!important;
}
#rotarySvg > g > line{
  stroke:#fff!important;
  stroke-opacity:.72!important;
}
/* Arrow controls stay circular for recognition/touchability, but are now
   simple flat cyan buttons with no beige/metal end-cap behind them. */
.dial-end-hit{
  border-radius:0!important;
}
.dial-end-hit span,
html[data-theme="light"] .dial-end-hit span,
[data-theme="dark"] .dial-end-hit span{
  color:#fff!important;
  border:1px solid var(--bt-cyan-dark)!important;
  background:var(--bt-cyan)!important;
  box-shadow:none!important;
  opacity:1!important;
}
.dial-end-hit:hover span,
.dial-end-hit:focus-visible span,
.dial-end-hit:active span{
  background:var(--bt-cyan-dark)!important;
  box-shadow:none!important;
}
.dial-end-hit:disabled span,
html[data-theme="light"] .dial-end-hit:disabled span{
  opacity:.38!important;
  filter:none!important;
}

/* v03 WCAG 2.2 remediation — 2026-08-25
   Contrast, focus visibility, and short-landscape legibility only. */
:root{
  --bt-cyan-text:#006B96;
  --bt-cyan-control:#006B96;
  --bt-card-edge-aa:#746B60;
  --bt-card-detail-aa:#3F4448;
}

/* WCAG 1.4.11: make every era-paper boundary independently perceivable
   against the warm page without darkening the archival paper surface. */
html[data-theme="light"] .clipping.era-1970s,
html[data-theme="light"] .clipping.era-1980s,
html[data-theme="light"] .clipping.era-1990s,
html[data-theme="light"] .clipping.era-2000s,
html[data-theme="light"] .clipping.era-2010s,
html[data-theme="light"] .clipping.era-2020s{
  --era-border-color:var(--bt-card-edge-aa);
  --era-border-width:1.5px;
}
html[data-theme="light"] .clipping[class*="era-"] .clipping__paper,
html[data-theme="light"] .is-mobile-smooth .clipping[class*="era-"] .clipping__paper{
  border-color:var(--bt-card-edge-aa)!important;
  border-width:1.5px!important;
}
html[data-theme="light"] .clipping.era-2000s:not(.is-active) .clipping__paper,
html[data-theme="light"] .clipping.era-2010s:not(.is-active) .clipping__paper,
html[data-theme="light"] .clipping.era-2020s:not(.is-active) .clipping__paper{
  box-shadow:0 16px 30px rgba(62,52,40,.18),inset 0 0 0 1px rgba(255,255,255,.34)!important;
}

/* WCAG 1.4.3: darker cyan is reserved for small/light-mode text roles.
   Large hero cyan remains unchanged. */
html[data-theme="light"] .clipping__year,
html[data-theme="light"] .status strong,
html[data-theme="light"] .reading-view__eyebrow,
html[data-theme="light"] .reading-view__figure,
html[data-theme="light"] .reading-view__back{
  color:var(--bt-cyan-text)!important;
}
html[data-theme="light"] .clipping__stat small{
  color:var(--bt-card-detail-aa)!important;
}

/* Selected small controls: white on #006B96 is AA-compliant. */
.category-pill[aria-pressed="true"],
.category-pill[data-category]:not([data-category="All"])[aria-pressed="true"]{
  color:#fff!important;
  background:var(--bt-cyan-control)!important;
  border-color:var(--bt-cyan-control)!important;
}
#rotarySvg > g > rect[fill="var(--accent)"]{
  fill:var(--bt-cyan-control)!important;
}

/* Keep helper/instruction copy at a practical minimum size wherever shown. */
.hint{
  font-size:.75rem!important;
  line-height:1.3;
}
@media (orientation:landscape) and (max-width:950px) and (max-height:520px){
  #timeline #surpriseButton .theme-toggle__label{
    font-size:.75rem!important;
    line-height:1.15;
  }
}

/* Make modal visibility switch synchronously so focus can enter it on the
   same keyboard activation; opacity may still animate independently. */
.reader{
  transition:opacity .25s ease!important;
}
.reader.is-open{
  visibility:visible!important;
}


/* v04 - sticky Reading View return control.
   The wrapper creates a full-width paper utility row so content scrolls
   beneath a clean surface instead of showing through the return link. */
.reading-view__backbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  min-height:60px;
  padding:max(.5rem,env(safe-area-inset-top)) 0 .5rem;
  margin:calc(-1 * clamp(28px,6vw,72px)) 0 18px;
  background:linear-gradient(180deg,var(--bt-card) 0%,color-mix(in srgb,var(--bt-card) 96%,var(--bt-card-2)) 100%);
  border-bottom:1px solid color-mix(in srgb,var(--bt-ink-card) 22%,transparent);
}
.reading-view__back{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  min-height:44px;
  padding:.55rem .75rem;
  margin-left:-.75rem;
  color:var(--bt-cyan-text,var(--bt-cyan-dark));
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-family:var(--bt-font-ui);
  font-weight:700;
  text-underline-offset:4px;
}
.reading-view__back:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}
html[data-theme="dark"] .reading-view__backbar{
  background:linear-gradient(180deg,var(--bt-panel) 0%,color-mix(in srgb,var(--bt-panel) 96%,var(--bt-panel-strong)) 100%);
  border-bottom-color:color-mix(in srgb,var(--bt-ink) 28%,transparent);
}
@media (max-width:430px){
  .reading-view__backbar{
    min-height:56px;
    margin-top:-28px;
    margin-bottom:14px;
    padding:max(.375rem,env(safe-area-inset-top)) 0 .375rem;
  }
  .reading-view__back{
    min-height:44px;
    padding:.5rem .5rem;
    margin-left:-.5rem;
  }
}


/* v05 spec-only visual pass -------------------------------------------------
   IMPORTANT: these rules intentionally avoid card/reader geometry. They only
   change typeface, colour, border, fill and shadow treatment so the original
   v04 outer-card and inner-reader layouts remain intact. */

:root{
  --bt50-paper:#FFF6EC;
  --bt50-paper-warm:#F3E9DD;
  --bt50-halo:#D6E5EB;
  --bt50-ink:#231F20;
  --bt50-date-grey:#808889;
}

/* The PDF uses a sans hero and a display serif for editorial emphasis. */
.bt50-intro__title,
.status strong,
.clipping__stat b,
.reader__number,
.reading-view__title,
.reading-view__figure{
  font-family:"Public Sans",Arial,sans-serif!important;
}
.clipping__year,
.reader__year,
.reader__headline,
.reading-view__story h2,
.bt50-intro__subheader,
.reading-view__dek{
  font-family:"Public Sans",Arial,sans-serif!important;
}

/* Keep long-form reading copy in Public Sans, matching the production spec. */
.reading-view__article,
.reading-view__detail,
.reader__label{
  font-family:"Public Sans",Arial,sans-serif!important;
}

/* Paper and archival image treatment: flatter, warmer and less UI-like. */
.clipping__paper,
.is-mobile-smooth .clipping__paper{
  border-color:color-mix(in srgb,var(--bt50-ink) 34%,var(--bt-card))!important;
  background:linear-gradient(180deg,var(--bt-card),var(--bt-card) 82%,var(--bt-card-2))!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--paper-shadow) 70%,transparent),inset 0 0 0 1px rgba(255,255,255,.34)!important;
}
.clipping.is-active .clipping__paper,
.is-mobile-smooth .clipping.is-active .clipping__paper{
  box-shadow:0 14px 30px color-mix(in srgb,var(--paper-shadow) 74%,transparent),0 0 0 2px var(--bt-cyan)!important;
}
.clipping__visual-circle{
  border-color:color-mix(in srgb,var(--bt-cyan) 56%,var(--bt-rule-card))!important;
  background:color-mix(in srgb,var(--bt50-halo) 48%,transparent)!important;
}
.clipping__visual-circle:after{
  border-color:color-mix(in srgb,var(--bt-cyan) 28%,transparent)!important;
}
.clipping__visual-image:not(.clipping__visual-image--artwork){
  filter:drop-shadow(0 5px 4px rgba(35,31,32,.14))!important;
}

/* Serif decade/year treatment, but retain v04 scale and placement exactly. */
.clipping__year{
  color:var(--bt-cyan-dark)!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
}
.clipping__stat b{
  color:var(--bt50-ink)!important;
  font-weight:650!important;
  letter-spacing:-.035em!important;
}
.clipping__stat small{
  color:#3F4448!important;
  font-family:"Public Sans",Arial,sans-serif!important;
}

/* Inner reader keeps the v04 composition; only its print styling changes. */
.reader__card{
  border-color:color-mix(in srgb,var(--bt50-ink) 25%,var(--bt-card))!important;
  background:var(--bt-card)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.22)!important;
}
.reader__card::before{background:var(--bt-cyan)!important}
.reader__year{
  color:var(--bt-cyan-dark)!important;
  font-weight:600!important;
  letter-spacing:-.035em!important;
}
.reader__headline{
  color:var(--bt50-ink)!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
}
.reader__stat{border-top-color:var(--bt50-ink)!important}
.reader__number{color:var(--bt50-ink)!important}
.reader__label{color:#4B5054!important}
.reader__close{
  color:var(--bt50-ink)!important;
  background:color-mix(in srgb,var(--bt-card) 88%,var(--bt50-halo) 12%)!important;
}

/* Reading view follows the same print system without changing its flow. */
.reading-view{background:var(--bt50-paper)!important}
.reading-view__article{color:var(--bt50-ink)!important}
.reading-view__title{color:var(--bt-cyan)!important}
.reading-view__story{border-top-color:var(--bt50-ink)!important}
.reading-view__story h2{color:var(--bt50-ink)!important}
.reading-view__figure,.reading-view__back,.reading-view__eyebrow{color:var(--bt-cyan-dark)!important}
.reading-view__category,.reading-view__dek{color:#565B60!important}

/* Controls remain the same size/placement, but use the flatter print palette. */
.timeline-return,
.theme-toggle,
.category-scroll-button{
  border-color:color-mix(in srgb,var(--bt-cyan) 22%,var(--line))!important;
  background:color-mix(in srgb,var(--panel) 96%,var(--bt50-halo) 4%)!important;
}
#surpriseButton{
  border-color:color-mix(in srgb,var(--bt-cyan-dark) 52%,var(--line))!important;
  color:var(--bt-cyan-dark)!important;
  background:color-mix(in srgb,var(--bt-cyan) 7%,var(--panel))!important;
}
.category-pill[aria-pressed="true"],
.category-pill[data-category]:not([data-category="All"])[aria-pressed="true"]{
  color:#fff!important;
  background:var(--bt-cyan-dark)!important;
  border-color:var(--bt-cyan-dark)!important;
}

/* Dark mode: retain the v04 layout and paper-card behaviour, with brighter UI
   cyan where it sits on the dark canvas. */
html[data-theme="dark"] .bt50-intro__title,
html[data-theme="dark"] .status strong{
  color:var(--bt-cyan-vibrant)!important;
}
html[data-theme="dark"] .timeline-return,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .category-scroll-button{
  background:color-mix(in srgb,var(--panel) 96%,var(--bt-cyan) 4%)!important;
}
html[data-theme="dark"] #surpriseButton{
  color:#EAF9FD!important;
  background:color-mix(in srgb,var(--bt-cyan) 16%,var(--panel))!important;
}

/* v06 — Card hierarchy and flatter timeline navigation ---------------------
   The v05 dimensions and all interaction markup remain the source of truth.
   These overrides only re-order the existing Reader content visually and tune
   spacing within the established outer-card and control containers. */

/* Outer card: register the year, then use a small editorial rule to separate
   it from the artwork. The category guide is intentionally left untouched. */
.clipping:not(.clipping--category-intro) .clipping__rule{
  position:absolute;
  z-index:2;
  top:17.5%;
  left:50%;
  display:block;
  width:clamp(28px,11cqw,52px);
  height:1px;
  margin:0;
  border:0;
  background:color-mix(in srgb,var(--bt-cyan-dark) 72%,var(--bt-rule-card));
  transform:translateX(-50%);
}
.clipping:not(.clipping--category-intro) .clipping__visual-zone{
  top:23%;
  width:min(48%,16rem);
}
.clipping:not(.clipping--category-intro) .clipping__stat{
  right:5%;
  bottom:8%;
  width:90%;
  gap:clamp(6px,1cqw,12px);
}
.clipping:not(.clipping--category-intro) .clipping__stat small{
  max-width:30ch;
}
@media (max-width:430px){
  .clipping:not(.clipping--category-intro) .clipping__visual-zone{top:22.5%;width:50%;}
  .clipping:not(.clipping--category-intro) .clipping__stat{bottom:6%;}
}
@media (orientation:landscape) and (max-height:760px){
  .clipping:not(.clipping--category-intro) .clipping__rule{top:18%;}
  .clipping:not(.clipping--category-intro) .clipping__visual-zone{top:24%;width:45%;}
  .clipping:not(.clipping--category-intro) .clipping__stat{bottom:5%;}
}

/* Reader: visual sequence is year/rule, image, headline, figure band, detail.
   DOM IDs, focus target, modal scrolling and reader data bindings are unchanged. */
.reader__card{
  --v06-reader-inset:clamp(30px,3vw,38px);
  display:flex;
  flex-direction:column;
}
.reader__year{
  order:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0 0 clamp(16px,2vw,22px)!important;
  text-align:center;
}
.reader__year::after{
  content:"";
  display:block;
  width:42px;
  height:1px;
  margin-top:clamp(10px,1.25vw,14px);
  background:var(--bt-cyan-dark);
}
.reader__image{
  order:2;
  align-self:center;
  width:100%!important;
  height:min(30dvh,300px);
  margin:0 0 clamp(18px,2vw,24px)!important;
  object-fit:contain;
  object-position:center;
}
.reader__headline{
  order:3;
  max-width:18ch;
  margin:0 auto clamp(20px,2.25vw,28px)!important;
  text-align:center;
}
.reader__stat{
  order:4;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:0;
  align-self:stretch;
  margin:0 calc(-1 * var(--v06-reader-inset));
  padding:0!important;
  border:0!important;
}
#reader .reader__stat{
  gap:0;
}
.reader__stat::before{
  display:none;
}
.reader__number{
  z-index:1;
  grid-column:1;
  grid-row:1;
  justify-self:stretch!important;
  width:auto!important;
  padding:clamp(18px,2.4vw,26px) var(--v06-reader-inset);
  color:#fff!important;
  background:var(--reader-color,var(--bt-cyan-dark));
  text-align:center;
}
.reader__label{
  z-index:1;
  grid-column:1;
  grid-row:2;
  max-width:none;
  padding:clamp(16px,2vw,22px) var(--v06-reader-inset) 0;
}
#reader .reader__label{
  margin-top:0;
  text-align:center;
}
.clipping.is-stat-spacing-adjusted .clipping__stat{
  top:var(--story-stat-image-top);
  bottom:auto;
}
@media (max-width:600px) and (orientation:portrait){
  .reader__card{--v06-reader-inset:21px;}
  .reader__image{height:min(28dvh,220px);}
}
@media (max-width:390px) and (orientation:portrait){
  .reader__card{--v06-reader-inset:18px;}
}
@media (max-width:430px) and (max-height:740px) and (orientation:portrait){
  .reader__image{height:min(21dvh,150px);}
}
@media (min-width:601px) and (orientation:landscape) and (max-height:760px){
  .reader__image{height:min(25dvh,220px);}
}

/* Bottom controls: category filters read as one quiet inline row and the
   existing rotary selector becomes a numbered editorial timeline. */
.category-filters{
  gap:0;
  margin:0 0 8px;
  padding:0 0 2px;
  border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.category-filters::-webkit-scrollbar{display:none;}
.category-pill,
.category-pill[data-category]:not([data-category="All"]),
.category-pill[data-category]:not([data-category="All"]):not([aria-pressed="true"]){
  position:relative;
  min-height:34px;
  padding:8px 10px;
  border:0!important;
  border-radius:0!important;
  color:var(--muted)!important;
  background:transparent!important;
}
.category-pill::after{
  content:"";
  position:absolute;
  right:10px;
  bottom:-3px;
  left:10px;
  height:2px;
  background:transparent;
}
.category-pill[aria-pressed="true"],
.category-pill[data-category]:not([data-category="All"])[aria-pressed="true"]{
  color:var(--category-pill-safe,var(--bt-cyan-dark))!important;
  background:transparent!important;
}
.category-pill[aria-pressed="true"]::after{
  background:var(--category-color,var(--bt-cyan-dark));
}
@media (min-width:901px){
  .category-filter-controls .category-filters{
    justify-content:space-between;
  }
  .category-pill,
  .category-pill[data-category]:not([data-category="All"]),
  .category-pill[data-category]:not([data-category="All"]):not([aria-pressed="true"]){
    padding-right:0;
    padding-left:0;
  }
  .category-pill::after{
    right:0;
    left:0;
  }
}
.rotary-dial{background:transparent!important;}
#rotarySvg > g > rect:first-of-type{
  fill:transparent!important;
  stroke:var(--line)!important;
  stroke-opacity:1!important;
}
#rotarySvg > g > rect[fill="var(--accent)"]{
  fill:var(--bt-cyan)!important;
  fill-opacity:1!important;
  stroke:none!important;
  rx:3px!important;
}
#rotarySvg > g > line{
  stroke:#fff!important;
  stroke-opacity:1!important;
}
.dial-year{font-size:clamp(.72rem,1.2vw,.84rem);letter-spacing:.07em;}
.dial-index{font-size:clamp(.56rem,.85vw,.66rem);letter-spacing:.11em;}
.dial-end-hit span,
#timeline .dial-end-hit span{
  width:20px!important;
  height:20px!important;
  color:var(--bt-cyan-dark)!important;
  border:0!important;
  background:transparent!important;
}
.dial-end-hit:hover span,
.dial-end-hit:focus-visible span,
.dial-end-hit:active span{color:var(--bt-cyan)!important;background:transparent!important;}
.dial-end-hit:disabled span{color:var(--muted)!important;opacity:.55!important;}
html[data-theme="dark"] .category-pill[aria-pressed="true"]{color:var(--category-pill-dark-ink,var(--bt-cyan-vibrant))!important;}
html[data-theme="dark"] .dial-end-hit span{color:var(--bt-cyan-vibrant)!important;}

/* v06 — restore the v35 outer-card paper progression. The linked v05 layer
   deliberately normalised card surfaces, so the era variables inherited from
   the v04 baseline need a final, scoped paint layer. Category guide cards and
   Reader cards remain outside this treatment. */
.clipping.era-1970s{
  --v06-era-paper:color-mix(in srgb,var(--bt-card) 62%,#d1a03f 38%);
  --v06-era-paper-2:color-mix(in srgb,var(--bt-card-2) 55%,#a97524 45%);
  --v06-era-border:rgba(103,72,20,.46);
  --v06-era-radius:1px;
  --v06-era-grain:.42;
}
.clipping.era-1980s{
  --v06-era-paper:color-mix(in srgb,var(--bt-card) 74%,#dfbd69 26%);
  --v06-era-paper-2:color-mix(in srgb,var(--bt-card-2) 66%,#bc8f35 34%);
  --v06-era-border:rgba(111,83,28,.36);
  --v06-era-radius:3px;
  --v06-era-grain:.34;
}
.clipping.era-1990s{
  --v06-era-paper:color-mix(in srgb,var(--bt-card) 84%,#eee3bd 16%);
  --v06-era-paper-2:color-mix(in srgb,var(--bt-card-2) 78%,#d6c18b 22%);
  --v06-era-border:rgba(83,76,57,.28);
  --v06-era-radius:5px;
  --v06-era-grain:.27;
}
.clipping.era-2000s{
  --v06-era-paper:color-mix(in srgb,var(--bt-card) 90%,#f1efe7 10%);
  --v06-era-paper-2:color-mix(in srgb,var(--bt-card-2) 86%,#dfe2dc 14%);
  --v06-era-border:rgba(74,83,76,.22);
  --v06-era-radius:7px;
  --v06-era-grain:.2;
}
.clipping.era-2010s{
  --v06-era-paper:color-mix(in srgb,var(--bt-card) 95%,#fbfcf9 5%);
  --v06-era-paper-2:color-mix(in srgb,var(--bt-card-2) 92%,#edf2ee 8%);
  --v06-era-border:rgba(71,91,83,.2);
  --v06-era-radius:10px;
  --v06-era-grain:.12;
}
.clipping.era-2020s{
  --v06-era-paper:color-mix(in srgb,var(--bt-card) 98%,#fff 2%);
  --v06-era-paper-2:color-mix(in srgb,var(--bt-card-2) 96%,#f8fbf8 4%);
  --v06-era-border:transparent;
  --v06-era-radius:0;
  --v06-era-grain:.04;
}
html[data-theme] .clipping[class*="era-"]:not(.clipping--category-intro) .clipping__paper,
html[data-theme] .is-mobile-smooth .clipping[class*="era-"]:not(.clipping--category-intro) .clipping__paper{
  border:1px solid var(--v06-era-border)!important;
  border-radius:var(--v06-era-radius)!important;
  background:linear-gradient(145deg,var(--v06-era-paper),var(--v06-era-paper-2))!important;
}
html[data-theme] .clipping[class*="era-"] .clipping__paper::before{opacity:var(--v06-era-grain)!important;}
.clipping.era-1970s:not(.is-active) .clipping__paper{box-shadow:0 18px 38px color-mix(in srgb,var(--paper-shadow) 78%,#8a5c1a 22%),inset 0 0 0 1.5px var(--v06-era-border)!important;}
.clipping.era-1980s:not(.is-active) .clipping__paper{box-shadow:0 17px 35px color-mix(in srgb,var(--paper-shadow) 84%,#96701d 16%),inset 0 0 0 1.25px var(--v06-era-border)!important;}
.clipping.era-1990s:not(.is-active) .clipping__paper{box-shadow:0 16px 33px color-mix(in srgb,var(--paper-shadow) 88%,#8b6b30 12%),inset 0 0 0 1px var(--v06-era-border)!important;}
.clipping.era-2000s:not(.is-active) .clipping__paper{box-shadow:0 15px 31px color-mix(in srgb,var(--paper-shadow) 91%,#687269 9%),inset 0 0 0 .75px var(--v06-era-border)!important;}
.clipping.era-2010s:not(.is-active) .clipping__paper{box-shadow:0 14px 29px color-mix(in srgb,var(--paper-shadow) 94%,#65736c 6%),inset 0 0 0 .75px var(--v06-era-border)!important;}
.clipping.era-2020s:not(.is-active) .clipping__paper{box-shadow:0 13px 27px color-mix(in srgb,var(--paper-shadow) 96%,#536a62 4%),inset 0 0 0 1px var(--v06-era-border)!important;}
html[data-theme] .clipping.era-2020s.is-idle-motion .clipping__paper,
.clipping[class*="era-"].is-far .clipping__paper{box-shadow:none!important;}

/* v06 intro copy carousel: one editorial paragraph at a time, with the
   timeline action unlocked only after the final slide is reached. */
.bt50-intro__carousel{
  position:absolute;
  z-index:5;
  left:50%;
  width:min(760px,calc(100vw - 48px));
  margin:0;
  color:var(--intro-ink);
  font-family:var(--bt-font-ui);
  font-style:normal;
  font-weight:400;
  opacity:0;
  transform:translate(-50%,20px);
  transition:opacity 560ms ease 760ms,transform 720ms cubic-bezier(.2,.75,.18,1) 760ms;
  touch-action:pan-y;
}
.bt50-intro.is-glass-lifted .bt50-intro__carousel{
  opacity:1;
  transform:translate(-50%,0);
}
.bt50-intro__carousel:focus-visible{
  outline:2px solid var(--bt-cyan);
  outline-offset:7px;
}
.bt50-intro__carousel-viewport{
  display:grid;
  align-items:center;
  min-height:clamp(96px,10vw,132px);
}
.bt50-intro__carousel-slide{
  grid-area:1/1;
  margin:0;
  color:var(--intro-ink);
  font:400 clamp(.94rem,1.3vw,1.15rem)/1.48 var(--bt-font-ui);
  text-align:center;
  text-wrap:pretty;
}
.bt50-intro__carousel-slide[hidden],
.bt50-intro__enter[hidden]{display:none!important}
.bt50-intro__carousel-controls{
  display:grid;
  grid-template-columns:44px minmax(72px,1fr) 44px;
  align-items:center;
  gap:12px;
  margin-top:clamp(12px,1.7vw,18px);
}
.bt50-intro__carousel-button{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:10px;
  border:0;
  color:var(--bt-cyan-dark);
  background:transparent;
  cursor:pointer;
}
.bt50-intro__carousel-button:first-child{justify-self:start}
.bt50-intro__carousel-button:last-child{justify-self:end}
.bt50-intro__carousel-button:hover{color:var(--bt-cyan);background:transparent}
.bt50-intro__carousel-button:focus-visible{outline:2px solid var(--bt-cyan);outline-offset:3px}
.bt50-intro__carousel-button:disabled{color:var(--intro-muted);background:transparent;cursor:default;opacity:.48}
.bt50-intro__carousel-arrow{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.bt50-intro__carousel-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
}
.bt50-intro__carousel-status span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:color-mix(in srgb,var(--intro-muted) 55%,transparent);
  transition:transform 160ms ease,background-color 160ms ease;
}
.bt50-intro__carousel-status span[aria-current="true"]{background:var(--bt-cyan);transform:scale(1.18)}
html[data-theme="dark"] .bt50-intro__carousel-button{color:var(--bt-cyan-vibrant);background:transparent}
html[data-theme="dark"] .bt50-intro__carousel-button:hover{background:transparent}

@media(max-width:700px){
  .bt50-intro__carousel{width:min(560px,calc(100vw - 32px))}
  .bt50-intro__carousel-viewport{min-height:clamp(126px,35vw,170px)}
  .bt50-intro__carousel-slide{font-size:clamp(.875rem,3.65vw,1rem);line-height:1.42}
  .bt50-intro__carousel-controls{grid-template-columns:44px minmax(72px,1fr) 44px;gap:8px;margin-top:10px}
}
@media(max-width:360px){
  .bt50-intro__carousel{width:calc(100vw - 24px)}
  .bt50-intro__carousel-slide{font-size:.83rem}
}
@media(orientation:landscape) and (max-height:760px){
  .bt50-intro__carousel{width:min(760px,calc(100vw - 120px))}
  .bt50-intro__carousel-viewport{min-height:72px}
  .bt50-intro__carousel-slide{font-size:clamp(.78rem,1.75vw,.92rem);line-height:1.34}
  .bt50-intro__carousel-controls{margin-top:6px}
  .bt50-intro__carousel-button{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.bt50-intro__carousel{transition:none}}

/* v06 r1 — compact phone intro fit and timeline CTA state.
   Keep the editorial type scale intact; reclaim vertical room by lifting the
   animated counter and tightening only the inter-block spacing on short phones. */
html.is-in-timeline .bt50-intro__enter{display:none!important}

@media(max-width:430px) and (max-height:860px) and (orientation:portrait){
  .bt50-intro__counter{
    top:clamp(104px,16.5svh,142px);
  }
  .bt50-intro__carousel-controls{
    margin-top:6px;
  }
}

@media(max-width:430px) and (max-height:700px) and (orientation:portrait){
  .bt50-intro__counter{
    top:clamp(88px,14.5svh,112px);
  }
}

/* r3: inner-reader headline alignment + wrap hardening.
   Restore the intended centred editorial headline measure on all reader cards.
   Balance line boxes to avoid single-word final lines without changing copy. */
.reader__card .reader__headline{
  justify-self:center;
  width:fit-content;
  max-width:min(22ch,100%);
  margin-inline:auto!important;
  text-align:center!important;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* r4: inner-reader detail paragraph orphan control.
   Prefer pretty line wrapping where supported, with the JS display helper
   protecting the final word pair as a fallback. Editorial data is untouched. */
#reader .reader__label{
  text-wrap:pretty;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* r5: first-arrival outer-card interaction cue.
   A lightweight, non-interactive pointer/ripple appears once when the timeline
   settles into view, then clears on any timeline interaction or automatically. */
.timeline-tap-hint{
  position:absolute;
  z-index:4;
  right:clamp(10px,5.5%,28px);
  top:52%;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:6px 10px 6px 7px;
  border:1px solid color-mix(in srgb,var(--accent) 48%,var(--paper) 52%);
  border-radius:999px;
  color:var(--paper-ink);
  background:color-mix(in srgb,var(--paper) 92%,var(--accent) 8%);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  font-size:clamp(.66rem,1.6vw,.78rem);
  font-weight:750;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(7px,8px,0) scale(.96);
  transition:opacity .22s ease,transform .22s ease,visibility .22s step-end;
}
.active-hit-target.is-tap-hint-visible .timeline-tap-hint{
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0) scale(1);
  transition:opacity .22s ease,transform .22s ease,visibility 0s;
  animation:bt50-card-cue-float 1.05s ease-in-out 3;
}
.timeline-tap-hint__cursor{
  position:relative;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
}
.timeline-tap-hint__cursor svg{
  position:relative;
  z-index:2;
  display:block;
  width:19px;
  height:19px;
  fill:var(--accent);
  stroke:var(--paper);
  stroke-width:.75;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
  transform-origin:35% 30%;
}
.active-hit-target.is-tap-hint-visible .timeline-tap-hint__cursor svg{
  animation:bt50-card-cue-click 1.05s ease-in-out 3;
}
.timeline-tap-hint__pulse{
  position:absolute;
  z-index:1;
  right:-1px;
  bottom:-1px;
  width:9px;
  height:9px;
  border:1.5px solid var(--accent);
  border-radius:50%;
  opacity:0;
  transform:scale(.4);
}
.active-hit-target.is-tap-hint-visible .timeline-tap-hint__pulse{
  animation:bt50-card-cue-ripple 1.05s ease-out 3;
}
@keyframes bt50-card-cue-float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  48%{transform:translate3d(-2px,-1px,0) scale(1)}
}
@keyframes bt50-card-cue-click{
  0%,24%,100%{transform:translate3d(0,0,0) scale(1)}
  43%{transform:translate3d(-3px,3px,0) scale(.92)}
  58%{transform:translate3d(-1px,1px,0) scale(.97)}
}
@keyframes bt50-card-cue-ripple{
  0%,30%{opacity:0;transform:scale(.35)}
  43%{opacity:.72;transform:scale(.6)}
  76%,100%{opacity:0;transform:scale(2.05)}
}
@media(max-width:600px){
  .timeline-tap-hint{
    right:clamp(7px,3.5%,14px);
    top:54%;
    min-height:32px;
    padding:5px 9px 5px 6px;
    gap:5px;
    font-size:.68rem;
  }
  .timeline-tap-hint__cursor{width:20px;height:20px;flex-basis:20px}
  .timeline-tap-hint__cursor svg{width:17px;height:17px}
}
@media(max-width:360px){
  .timeline-tap-hint{right:4px;top:55%;font-size:.64rem;padding-right:8px}
}
@media(prefers-reduced-motion:reduce){
  .active-hit-target.is-tap-hint-visible .timeline-tap-hint,
  .active-hit-target.is-tap-hint-visible .timeline-tap-hint__cursor svg,
  .active-hit-target.is-tap-hint-visible .timeline-tap-hint__pulse{animation:none}
}

/* r8 vertical intro story: the three editorial paragraphs now advance through
   ordinary page scrolling and flow directly into the timeline. */
.bt50-intro{
  min-height:150vh;
  min-height:150svh;
  overflow:visible;
}
.bt50-intro__frame{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
}
.bt50-intro__story{
  --intro-copy-viewport-top:48svh;
  --intro-copy-viewport-height:22svh;
  position:absolute;
  z-index:5;
  inset:0;
  height:150vh;
  height:150svh;
  margin:0;
  padding:0;
}
.bt50-intro__story-viewport{
  position:sticky;
  top:var(--intro-copy-viewport-top);
  z-index:2;
  display:grid;
  width:100%;
  height:clamp(96px,12svh,120px);
  min-height:96px;
  overflow:hidden;
  place-items:center;
  padding:12px clamp(22px,5vw,72px);
}
.bt50-intro__story-track{
  position:relative;
  z-index:1;
  margin-top:calc(-1 * var(--intro-copy-viewport-height));
}
.bt50-intro__story-step{
  min-height:50vh;
  min-height:50svh;
}
.bt50-intro__story-copy{
  grid-area:1/1;
  width:min(780px,100%);
  margin:0;
  color:var(--intro-ink);
  font:400 clamp(1rem,1.45vw,1.22rem)/1.5 var(--bt-font-ui);
  text-align:center;
  text-wrap:pretty;
  opacity:0;
  transform:translateY(26px);
  transition:opacity 420ms ease,transform 560ms cubic-bezier(.2,.75,.18,1);
}
.bt50-intro__story-copy.is-active{
  opacity:1;
  transform:translateY(0);
}
.bt50-intro__story-copy:last-child{width:min(780px,100%)}
#timeline{visibility:visible;pointer-events:auto}
#timeline.is-card-scroll-locked .stage,
#timeline.is-card-scroll-locked .active-hit-target,
#timeline.is-card-scroll-locked .rotary-dial{
  cursor:default;
  touch-action:pan-y!important;
}
#timeline.is-card-scroll-locked .active-hit-target,
#timeline.is-card-scroll-locked .rotary-dial{pointer-events:none}

/* r8: category paper palettes supplied for the lower-section cards. */
html[data-theme] .clipping[data-category]:not(.clipping--category-intro) .clipping__paper,
html[data-theme] .is-mobile-smooth .clipping[data-category]:not(.clipping--category-intro) .clipping__paper{
  color:var(--card-ink)!important;
  border:1px solid var(--card-border)!important;
  background-color:var(--card-paper)!important;
  background-image:linear-gradient(145deg,var(--card-paper) 0%,var(--card-paper) 68%,var(--card-paper-2) 100%)!important;
}
html[data-theme] .clipping[data-category]:not(.clipping--category-intro) .clipping__paper::before{
  opacity:.08!important;
}
html[data-theme] .clipping[data-category]:not(.clipping--category-intro) .clipping__year,
html[data-theme] .clipping[data-category]:not(.clipping--category-intro) .clipping__stat b{
  color:var(--card-accent)!important;
}
html[data-theme] .clipping[data-category]:not(.clipping--category-intro) .clipping__rule{
  background:var(--card-accent)!important;
}
html[data-theme] .reader__card[data-category]{
  color:var(--card-ink)!important;
  border-color:var(--card-border)!important;
  background-color:var(--card-paper)!important;
  background-image:linear-gradient(145deg,var(--card-paper) 0%,var(--card-paper) 68%,var(--card-paper-2) 100%)!important;
}
html[data-theme] .reader__card[data-category] .reader__year,
html[data-theme] .reader__card[data-category] .reader__number{
  color:var(--card-accent)!important;
}
html[data-theme] .reader__card[data-category] .reader__number{
  background:color-mix(in srgb,var(--card-accent) 20%,var(--card-paper) 80%)!important;
  font-size:clamp(45px,calc(2.4vw + 32.8px),60.8px)!important;
}
html[data-theme] .reader__card[data-category] .reader__stat{
  background:transparent!important;
  border-color:var(--card-border)!important;
}
html[data-theme] .reader__card[data-category].is-reader-figure-long .reader__number{
  font-size:clamp(42px,calc(1.44vw + 35.2px),54.4px)!important;
}

/* Filter intro cards inherit the same five category papers as story cards. */
html[data-theme] .clipping--category-intro[data-category] .clipping__paper,
html[data-theme] .is-mobile-smooth .clipping--category-intro[data-category] .clipping__paper{
  color:var(--card-accent)!important;
  border:0!important;
  background:linear-gradient(145deg,var(--card-paper) 0%,var(--card-paper) 68%,var(--card-paper-2) 100%)!important;
  box-shadow:0 14px 34px rgba(40,35,30,.16)!important;
}
html[data-theme] #timeline .clipping--category-intro[data-category] .clipping__paper,
html[data-theme] #timeline .is-mobile-smooth .clipping--category-intro[data-category] .clipping__paper{
  background:var(--card-paper)!important;
}
.clipping--category-intro[data-category] .clipping__intro-title{
  color:var(--card-accent)!important;
}

/* Borderless outer cards with restrained depth instead of perimeter lines. */
html[data-theme] .clipping[data-category] .clipping__paper,
html[data-theme] .is-mobile-smooth .clipping[data-category] .clipping__paper{
  border:0!important;
  box-shadow:0 14px 34px rgba(40,35,30,.16)!important;
}
html[data-theme] .clipping[data-category].is-active .clipping__paper,
html[data-theme] .is-mobile-smooth .clipping[data-category].is-active .clipping__paper{
  box-shadow:0 18px 44px rgba(40,35,30,.22)!important;
}

/* Card years and their rules use one solid-black hierarchy. */
html[data-theme] #timeline .clipping:not(.clipping--category-intro) .clipping__year,
html[data-theme] #reader .reader__year{
  color:#000!important;
}
html[data-theme] #timeline .clipping:not(.clipping--category-intro) .clipping__year{
  font-size:clamp(1.1rem,3.06vw,2.43rem)!important;
}
html[data-theme] #reader .reader__year{
  font-size:clamp(25px,3.4vw,36px)!important;
}
html[data-theme] #timeline .clipping:not(.clipping--category-intro) .clipping__rule{
  height:5px!important;
  background:#000!important;
}
html[data-theme] #reader .reader__year::after{
  height:5px!important;
  background:#000!important;
}

html[data-theme] #timeline .clipping:not(.clipping--category-intro) .clipping__stat b{
  font-size:clamp(1.84rem,11.96cqw,3.91rem)!important;
}
html[data-theme] #timeline .clipping.is-figure-medium:not(.clipping--category-intro) .clipping__stat b{
  font-size:clamp(1.61rem,9.66cqw,3.22rem)!important;
}
html[data-theme] #timeline .clipping.is-figure-long:not(.clipping--category-intro) .clipping__stat b{
  font-size:clamp(1.38rem,8.1cqw,2.53rem)!important;
}

/* Flat card surfaces: no drop shadow on outer, guide or Reader cards. */
html[data-theme] #timeline .clipping[data-category] .clipping__paper,
html[data-theme] #timeline .is-mobile-smooth .clipping[data-category] .clipping__paper,
html[data-theme] #timeline .clipping[data-category].is-active .clipping__paper,
html[data-theme] #timeline .is-mobile-smooth .clipping[data-category].is-active .clipping__paper,
html[data-theme] #reader .reader__card[data-category]{
  box-shadow:none!important;
}

/* Keep all three intro passages on one shared measure and spacing rhythm. */
.bt50-intro__story-copy,
.bt50-intro__story-copy:last-child{
  width:min(780px,100%);
}

/* Libre title case, retaining the established cyan. */
.bt50-intro .bt50-intro__title,
.bt50-intro .bt50-intro__title-part{
  color:var(--bt-cyan)!important;
  font-family:"Public Sans",Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
}

/* Strong white image rings and a tighter year-to-rule relationship. */
.clipping:not(.clipping--category-intro) .clipping__rule{
  display:none!important;
}
.clipping:not(.clipping--category-intro) .clipping__visual-circle{
  border:2px solid #fff!important;
}
.clipping:not(.clipping--category-intro) .clipping__visual-circle::after{
  border-width:2px!important;
  border-color:#fff!important;
}
.clipping.has-outer-artwork:not(.clipping--category-intro) .clipping__visual-zone::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:1.5%;
  border:4px solid #fff;
  border-radius:50%;
  pointer-events:none;
}
html[data-theme] #timeline .clipping:not(.clipping--category-intro) .clipping__year{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  line-height:1.05!important;
}
html[data-theme] #timeline .clipping:not(.clipping--category-intro) .clipping__year::after{
  content:"";
  display:block;
  width:clamp(17.55px,6.435cqw,31.2px);
  height:5px;
  margin-top:clamp(10px,3cqw,18px);
  background:#000;
}

.clipping:not(.clipping--category-intro) .clipping__stat,
.clipping:not(.clipping--category-intro).is-stat-spacing-adjusted .clipping__stat{
  top:calc(84% + clamp(9px,1.5vw,15px))!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
}

.clipping:not(.clipping--category-intro) .clipping__visual-zone{
  top:calc(17% + clamp(18px,3vw,30px))!important;
  width:min(62.4%,20.8rem)!important;
}

@media(max-width:700px) and (orientation:portrait){
  .bt50-intro .bt50-intro__title-part--left{
    max-width:calc(100vw - 20px);
    font-size:clamp(2.2rem,10.8vw,2.8rem);
  }
  .bt50-intro__story{
    --intro-copy-viewport-top:57svh;
    --intro-copy-viewport-height:27svh;
  }
  .bt50-intro__story-viewport{
    padding:10px 20px;
  }
  .bt50-intro__story-copy{
    width:min(560px,100%);
    font-size:clamp(.94rem,4vw,1.08rem);
    line-height:1.48;
  }
}
@media(max-width:360px) and (orientation:portrait){
  .bt50-intro__story-viewport{padding-inline:14px}
  .bt50-intro__story-copy{font-size:.88rem;line-height:1.43}
}
@media(orientation:landscape) and (max-height:760px){
  .bt50-intro__story{
    --intro-copy-viewport-top:53svh;
    --intro-copy-viewport-height:39svh;
  }
  .bt50-intro__story-viewport{padding-inline:max(60px,9vw)}
  .bt50-intro__story-copy{
    width:min(760px,100%);
    font-size:clamp(.8rem,1.8vw,.98rem);
    line-height:1.38;
  }
}
@media(prefers-reduced-motion:reduce){
  .bt50-intro__story-copy{transition:none}
}

/* r7 intro stability: skipping/reduced-motion completion should arrive at the
   final title spacing in one paint rather than replaying the title settle. */
.bt50-intro.is-instant-complete .bt50-intro__title-part{
  transition:none!important;
}

/* r7 touch QA: preserve a full 44px target for category-rail arrows on
   coarse-pointer phones and tablets, including compact landscape/iPad rules. */
@media (pointer:coarse){
  #timeline .category-scroll-button{
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
  }
}
@media (pointer:coarse){
  #timeline .dial-year{font-size:clamp(.75rem,1.2vw,.84rem)}
}


/* r9 — Sep 2 intro/scrolly containment + timeline contrast repair.
   1) Keep the skip control above the absolute scrolly layer without blocking
      paragraph selection after the intro resolves.
   2) Give the three 50svh story states a full 150svh runway AFTER the sticky
      100svh intro viewport. This keeps the timeline outside the viewport until
      the third paragraph has completed at every orientation.
   3) Darken only the light-theme timeline backdrop enough for the palest
      category paper to maintain >=3:1 non-text contrast. */
.bt50-intro{
  min-height:250vh;
  min-height:250svh;
  overflow:visible;
}
.bt50-intro__frame{
  z-index:6;
  height:100vh;
  height:100svh;
  min-height:100vh;
  min-height:100svh;
  pointer-events:none;
}
.bt50-intro__skip{
  pointer-events:auto;
}
.bt50-intro__story{
  height:250vh;
  height:250svh;
}
.bt50-intro__story-track{
  position:absolute;
  top:100vh;
  top:100svh;
  left:0;
  right:0;
  margin-top:0;
}
.bt50-intro__story-step{
  min-height:50vh;
  min-height:50svh;
}
.bt50-intro__story-viewport{
  transition:opacity 220ms ease,visibility 220ms linear;
}
.bt50-intro:not(.is-glass-lifted) .bt50-intro__story-viewport{
  opacity:0;
  visibility:hidden;
}
.bt50-intro.is-glass-lifted .bt50-intro__story-viewport{
  opacity:1;
  visibility:visible;
}

/* The old iPad-only mandatory snap could jump across two 50svh trigger zones
   in a single snap. The scrolly is intentionally continuous now. */
@media (min-width:701px) and (max-width:780px) and (orientation:portrait){
  html{scroll-snap-type:none!important}
  .bt50-intro__story-step,#timeline{
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
  }
}

html[data-theme="light"] #timeline{
  --muted:#121417;
  background:linear-gradient(180deg,#A98235 0%,#A88033 52%,#A47C2F 100%)!important;
}
html[data-theme="light"] #timeline .stage::before{
  background:none!important;
}

@media(prefers-reduced-motion:reduce){
  .bt50-intro__story-viewport{transition:none}
}

/* r9 scrolly copy handoff: inactive paragraphs disappear immediately so the
   fixed copy box never renders two editorial passages on top of each other. */
.bt50-intro__story-copy{
  visibility:hidden;
  opacity:0;
  transform:translateY(12px);
  transition:none!important;
}
.bt50-intro__story-copy.is-active{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  animation:bt50-intro-copy-in 260ms cubic-bezier(.2,.75,.18,1);
}
@keyframes bt50-intro-copy-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .bt50-intro__story-copy.is-active{animation:none}
}

/* Base copy window also needs to contain the longer third passage on wide
   desktop measures; keep one stable rectangle across all three states. */
.bt50-intro__story-viewport{
  height:clamp(140px,18svh,172px);
  min-height:140px;
}
@media(max-width:700px) and (orientation:portrait){
  .bt50-intro__story-viewport{
    height:clamp(190px,26svh,220px);
    min-height:190px;
  }
}

/* The earlier WCAG cyan status override was designed for the pale timeline.
   On the deeper r9 ochre it falls below AA, so keep header status text black. */
html[data-theme="light"] #timeline .status,
html[data-theme="light"] #timeline .status strong{
  color:#121417!important;
}


/* r10: restore the pale timeline surface while increasing tonal separation by
   approximately 5% from the original #FFF6EC. One shared handoff colour is
   used at the bottom of the intro and the top of the timeline so the hero,
   scrolly copy and timeline read as one continuous composition. */
html[data-theme="light"]{
  --bt50-timeline-surface:#FBF0E3;
  --bt50-card-outline:#8A7A63;
  --intro-blend-end:var(--bt50-timeline-surface);
}
html[data-theme="light"] .bt50-intro{
  background:linear-gradient(180deg,
    var(--intro-paper) 0%,
    var(--intro-paper) 56%,
    color-mix(in srgb,var(--intro-paper) 72%,var(--bt50-timeline-surface) 28%) 78%,
    var(--bt50-timeline-surface) 100%)!important;
}
html[data-theme="light"] .bt50-intro::after{
  background:linear-gradient(180deg,transparent,var(--bt50-timeline-surface))!important;
}
html[data-theme="light"] #timeline{
  --muted:#121417;
  margin-top:0!important;
  padding-top:0!important;
  background:var(--bt50-timeline-surface)!important;
}
html[data-theme="light"] #timeline .stage::before{background:none!important}

/* Pale cards need a perceptible boundary without reintroducing heavy depth.
   This 1px neutral edge is >=3:1 against both the timeline surface and all
   five category-paper fills. */
html[data-theme="light"] #timeline .clipping[data-category] .clipping__paper,
html[data-theme="light"] #timeline .is-mobile-smooth .clipping[data-category] .clipping__paper,
html[data-theme="light"] #timeline .clipping[data-category].is-active .clipping__paper,
html[data-theme="light"] #timeline .is-mobile-smooth .clipping[data-category].is-active .clipping__paper{
  box-shadow:0 0 0 1px var(--bt50-card-outline)!important;
}

/* The third passage is a held beat, not a moving scroll element. Pin its copy
   box to the same viewport coordinate until the timeline reaches the viewport
   boundary, then release it cleanly at the handoff. */
.bt50-intro.is-story-final-pinned .bt50-intro__story-viewport{
  position:fixed!important;
  top:var(--intro-copy-viewport-top)!important;
  left:0!important;
  right:0!important;
  width:100%!important;
}
.bt50-intro__story-copy:last-child.is-active{
  animation:none!important;
  transform:none!important;
}
.bt50-intro.is-story-at-timeline-handoff .bt50-intro__story-viewport{
  opacity:0!important;
  visibility:hidden!important;
}


/* r11: explicit intro sequence gate.
   1) 100svh opening animation / hero viewport.
   2) Three 50svh editorial text beats.
   3) One final 50svh Enter timeline beat.
   The timeline therefore remains outside the viewport until the CTA has been
   presented, and the existing card-open cue can appear after entry. */
.bt50-intro{
  min-height:300vh;
  min-height:300svh;
}
.bt50-intro__story{
  height:300vh;
  height:300svh;
}
.bt50-intro__story-enter{
  grid-area:1/1;
  position:relative!important;
  z-index:4;
  top:auto!important;
  left:auto!important;
  align-self:center;
  justify-self:center;
  width:max-content;
  margin:0;
  opacity:0!important;
  visibility:hidden;
  pointer-events:none!important;
  transform:translateY(12px) scale(.98)!important;
  transition:opacity 260ms ease,transform 320ms cubic-bezier(.2,.75,.18,1),background-color 180ms ease!important;
}
.bt50-intro.is-enter-stage-active .bt50-intro__story-enter:not([hidden]){
  opacity:1!important;
  visibility:visible;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
}
.bt50-intro.is-enter-stage-active .bt50-intro__story-viewport{
  position:fixed!important;
  top:var(--intro-copy-viewport-top)!important;
  left:0!important;
  right:0!important;
  width:100%!important;
}
.bt50-intro:not(.is-enter-stage-active) .bt50-intro__story-enter{display:none!important}
.bt50-intro.is-story-at-timeline-handoff .bt50-intro__story-enter{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
@media(prefers-reduced-motion:reduce){
  .bt50-intro__story-enter{transition:none!important}
}


/* v08-webp2 intro rhythm: reserve a stable byline slot between the animated
   title cluster and the scrolly copy. JS resolves the exact top position from
   the rendered bottom edge of "numbers", avoiding viewport-height drift. */
.bt50-intro{
  --intro-content-gap:22px;
  --intro-byline-color:#9aa0a3;
}
@media(max-width:900px){
  .bt50-intro{--intro-content-gap:20px}
}
@media(max-width:600px){
  .bt50-intro{--intro-content-gap:18px}
}
:root[data-theme="light"] .bt50-intro{
  --intro-byline-color:#85898c;
}
.bt50-intro__byline{
  position:absolute;
  z-index:6;
  left:50%;
  top:52svh;
  width:min(560px,calc(100vw - 40px));
  margin:0;
  color:var(--intro-byline-color);
  font:600 clamp(.72rem,.92vw,.86rem)/1.35 var(--bt-font-ui);
  text-align:center;
  text-wrap:balance;
  opacity:0;
  transform:translate(-50%,8px);
  transition:opacity 320ms ease 120ms,transform 420ms cubic-bezier(.2,.75,.18,1) 120ms;
  pointer-events:none;
}
.bt50-intro.is-glass-lifted .bt50-intro__byline{
  opacity:1;
  transform:translate(-50%,0);
}
/* Paragraphs start at the copy-window top instead of being vertically centred
   inside a viewport-height-dependent box, so longer copy can grow downward
   without altering the title-to-copy gap. */
.bt50-intro__story-viewport{
  padding-block:0;
}
.bt50-intro__story-copy{
  align-self:start;
  justify-self:center;
}
@media(max-width:430px) and (orientation:portrait){
  .bt50-intro{--intro-content-gap:16px}
  .bt50-intro__byline{
    width:calc(100vw - 44px);
    font-size:.72rem;
  }
}
@media(orientation:landscape) and (max-height:760px) and (max-width:950px){
  .bt50-intro{
    --intro-content-gap:12px;
  }
  .bt50-intro__byline{
    font-size:.68rem;
    line-height:1.25;
  }
}
@media(prefers-reduced-motion:reduce){
  .bt50-intro__byline{transition:none}
}


/* v10-webp2: keep the scroll affordance visually attached to the active
   scrolly paragraph instead of the bottom safe area. JS measures the rendered
   paragraph after every state/layout change and writes --intro-scroll-cue-top,
   which gives phones, tablets and desktop the same paragraph-to-cue rhythm. */
.bt50-intro__scroll-cue{
  position:fixed;
  z-index:12;
  left:50%;
  top:var(--intro-scroll-cue-top,74svh);
  bottom:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:44px;
  min-height:44px;
  margin:0;
  padding:5px 10px;
  border:0;
  color:var(--intro-muted);
  background:transparent;
  font:700 clamp(.69rem,.82vw,.78rem)/1.1 var(--bt-font-ui);
  letter-spacing:.035em;
  text-align:center;
  text-transform:uppercase;
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(6px);
  transition:opacity 220ms ease,transform 280ms ease,visibility 220ms linear;
  pointer-events:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.bt50-intro__scroll-cue-icon{
  display:block;
  font-size:1.15rem;
  font-weight:700;
  line-height:1;
}
.bt50-intro.is-glass-lifted:not(.is-enter-stage-active):not(.is-story-at-timeline-handoff) .bt50-intro__scroll-cue{
  opacity:.92;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.bt50-intro.is-glass-lifted:not(.is-enter-stage-active):not(.is-story-at-timeline-handoff) .bt50-intro__scroll-cue-icon{
  animation:bt50-scroll-cue-nudge 1.55s ease-in-out infinite;
}
.bt50-intro__scroll-cue:hover{color:var(--intro-ink)}
.bt50-intro__scroll-cue:focus-visible{
  outline:2px solid var(--intro-gold-shadow);
  outline-offset:4px;
  border-radius:2px;
  color:var(--intro-ink);
}
@keyframes bt50-scroll-cue-nudge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}
@media(max-width:430px) and (orientation:portrait){
  .bt50-intro__scroll-cue{
    font-size:.68rem;
  }
}
@media(orientation:landscape) and (max-height:600px){
  .bt50-intro__scroll-cue{
    flex-direction:row;
    gap:7px;
    min-height:36px;
    padding:3px 8px;
    font-size:.65rem;
  }
  .bt50-intro__scroll-cue-icon{font-size:.98rem}
}
@media(prefers-reduced-motion:reduce){
  .bt50-intro__scroll-cue{transition:none}
  .bt50-intro__scroll-cue-icon{animation:none!important}
}

/* v11-webp2 — dark-mode category navigation contrast hardening.
   Keep the flat editorial row, but make every category label explicitly
   readable against the dark timeline canvas. This final layer also neutralises
   the legacy Money and markets paper-pill special case. */
html[data-theme="dark"] .category-pill,
html[data-theme="dark"] .category-pill[data-category]:not([data-category="All"]):not([aria-pressed="true"]){
  color:#C8D0D6!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .category-pill[data-category="Money and markets"]:not([aria-pressed="true"]){
  color:#F7F4EE!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .category-pill[aria-pressed="true"],
html[data-theme="dark"] .category-pill[data-category]:not([data-category="All"])[aria-pressed="true"]{
  color:#FFFFFF!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .category-pill[aria-pressed="true"]::after{
  background:var(--category-color,var(--bt-cyan-vibrant))!important;
}
html[data-theme="dark"] .category-pill[data-category="Money and markets"][aria-pressed="true"]::after{
  background:#F7F4EE!important;
}
html[data-theme="dark"] .category-pill:focus-visible{
  outline:2px solid #F7F4EE!important;
  outline-offset:3px;
  box-shadow:none!important;
}

/* Keep the selected accountability category aligned with its gold card palette. */
html[data-theme="dark"] .category-pill[data-category="Power, rules and accountability"]:not([data-category="All"])[aria-pressed="true"] {
  color:var(--category-pill-dark-ink)!important;
}

/* Five chapter shortcuts share spare space, and scroll naturally when crowded. */
.category-filter-controls .category-filters .category-pill {
  flex:1 0 auto;
  text-align:center;
  padding-inline:12px;
}

/* Resizable desktop windows keep card typography tied to the card itself. */
@media (hover:hover) and (pointer:fine){
  html[data-theme] #timeline .clipping:not(.clipping--category-intro) .clipping__year{
    font-size:clamp(1.1rem,7.344cqw,2.43rem)!important;
  }
  .clipping:not(.clipping--category-intro) .clipping__stat,
  .clipping:not(.clipping--category-intro).is-stat-spacing-adjusted .clipping__stat{
    top:calc(84% + clamp(9px,3cqw,15px))!important;
  }
  .clipping:not(.clipping--category-intro) .clipping__visual-zone{
    top:calc(17% + clamp(18px,6cqw,30px))!important;
  }
}