/* Phil Mosher, home page. Poster field, oversized name, a live "now" strip, plain type, the field again to close.
   Four colours, no lines, no boxes. */

/* ---------- fonts (self-hosted, Latin subset, variable) ---------- */
@font-face {
  font-family: "Anybody";
  src: url("/fonts/anybody-var-latin.woff2") format("woff2");
  font-weight: 500 900;
  font-stretch: 85% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks so the swap does not move anything. */
@font-face {
  font-family: "Anybody Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Roboto Bold");
  font-weight: 100 900;
  size-adjust: 108%;
  ascent-override: 73.6%;
  descent-override: 22.2%;
  line-gap-override: 0%;
}
/* The name sets Anybody at 90% width inside per-letter boxes. This fallback is sized so every
   Arial-metric capital fits its box (E and L are the tightest), so the name keeps its exact
   width, nothing overlaps, and the swap moves nothing sideways. app.js re-fits the boxes if
   the font never arrives and the fallback turns out wider. */
@font-face {
  font-family: "Anybody Name Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Roboto Bold");
  font-weight: 100 900;
  size-adjust: 84%;
  ascent-override: 94.6%;
  descent-override: 28.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"), local("Helvetica Neue"), local("Roboto");
  font-weight: 100 900;
  size-adjust: 102.5%;
  ascent-override: 95.3%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}

:root {
  --bg: #F5F1EA;
  --ink: #1A1411;
  --muted: #665A52;
  --accent: #F0502F;
  --on-accent: var(--ink);

  --display: "Anybody", "Anybody Fallback", sans-serif;
  --body: "Schibsted Grotesk", "Schibsted Fallback", sans-serif;

  /* type scale, 7 steps */
  --t1: 0.9375rem;                                   /* 15  meta, labels, dock */
  --t2: 1.125rem;                                    /* 18  body */
  --t3: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);     /* 20 to 24  lead, list links, live values */
  --t4: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);     /* 28 to 44  morph line, tool names, aside */
  --t5: clamp(2.5rem, 1.6rem + 3.4vw, 5.25rem);      /* 40 to 84  numbers */
  --t6: clamp(2.75rem, 1.5rem + 5vw, 6rem);          /* 44 to 96  section heads */
  /* step 7 is the name and the closing link, sized to fit their container (see .name and .hi) */

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --rec: clamp(132px, 17vw, 248px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Two speeds. UI answers (hover swell, the dock pill, the role line's glyph swap) take --dur-ui.
     Entrances and number rolls take --dur-roll. A number already on screen never rolls. */
  --dur-ui: 220ms;
  --dur-roll: 1.1s;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17120F; --ink: #F3ECE3; --muted: #A89C92; --accent: #E8502F; --on-accent: var(--bg);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17120F; --ink: #F3ECE3; --muted: #A89C92; --accent: #E8502F; --on-accent: var(--bg);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--ink);
  scroll-padding-top: 16px;
  scroll-padding-bottom: var(--dock-space);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--t2);
  line-height: 1.5;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
::selection { background: var(--accent); color: var(--on-accent); }
p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }
svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

a, button {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: auto;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a.sw { display: inline-block; transform-origin: 50% 60%; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: 12px; z-index: 50;
  background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: var(--t1);
  padding: 12px 16px; min-height: 44px;
  border-radius: 8px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.skip:focus-visible { outline-color: var(--accent); }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter-r); }
.inner { max-width: 1360px; margin: 0 auto; }

/* ---------- field (the one bold colour) ---------- */
.field { background: var(--accent); color: var(--on-accent); }
.field ::selection { background: var(--on-accent); color: var(--accent); }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: 20px 0; container-type: inline-size; }
.topbar { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: var(--t1); min-height: 44px; }
.topbar .today { min-width: 0; }
.topbar a { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; }
/* The one primary action on the first screen: plain ink on the field, display type, the spring swell. */
.topbar a.cta {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: var(--t3);
  line-height: 1.15;
  text-align: right;
  max-width: 100%;
}
@media (max-width: 560px) {
  .topbar { gap: 8px 12px; }
  .topbar a.cta { font-size: var(--t2); }
}

/* The name always fits its container. Letter boxes are locked (in em) to each letter's
   widest weight, so the hover swell and the decode never move anything. */
.name {
  --name-w: 4.082;
  font-family: "Anybody", "Anybody Name Fallback", sans-serif;
  font-weight: 650;
  font-stretch: 90%;
  font-size: min(calc((100vw - 32px) / var(--name-w)), 420px);
  font-size: min(calc((100cqi - var(--gutter) - var(--gutter-r)) / var(--name-w)), 420px);
  line-height: 0.82;
  text-transform: uppercase;
  margin-top: clamp(16px, 3vw, 44px);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  font-kerning: none;
  font-variant-numeric: lining-nums;
}
.name .line { display: block; }
.name .l1 { padding-left: var(--gutter); }
.name .l2 { text-align: right; padding-right: var(--gutter-r); }
.name .ch { display: inline-block; text-align: center; }
.c-P { width: 0.629em; } .c-H { width: 0.666em; } .c-I { width: 0.314em; } .c-L { width: 0.491em; }
.c-M { width: 0.911em; } .c-O { width: 0.668em; } .c-S { width: 0.657em; } .c-E { width: 0.533em; } .c-R { width: 0.647em; }
@media (min-width: 1024px) {
  /* Large screens: the surname runs to the right edge of the field. Nothing is cut. */
  .name {
    font-size: min(calc((100vw - 12vw) / var(--name-w)), 420px);
    font-size: min(calc(88cqi / var(--name-w)), 420px);
  }
  .name .l2 { padding-right: 0; }
}

.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 28px 48px;
  align-items: end;
  padding-block: clamp(20px, 4vw, 56px) calc(var(--rec) / 2 + 40px);
}
/* The role line with its control right next to it, then the speaking line. */
.morph-box { display: grid; grid-template-columns: minmax(0, max-content) 44px; justify-content: start; gap: 14px 4px; align-items: start; container-type: inline-size; }
.morph-box .talks-line { grid-column: 1 / -1; font-size: var(--t3); line-height: 1.45; max-width: 30ch; }
.morph {
  font-family: var(--display);
  font-weight: 620;
  font-stretch: 100%;
  /* The longest piece that can't wrap ("versioner") is 5.32em, so it always fits the column. */
  font-size: min(var(--t4), calc((100vw - 32px) / 5.4));
  font-size: min(var(--t4), calc(100cqi / 5.4));
  line-height: 1.15;
  font-kerning: none;
  max-width: 11em; /* two short lines, so the control sits right beside the words */
}
.morph-vis { display: grid; }
.morph-vis > * { grid-area: 1 / 1; }
.morph .ghost { visibility: hidden; }
.morph .stage { position: relative; }
.morph .w { white-space: nowrap; }
.morph .c { display: inline-block; white-space: pre; }
.morph .gone { position: absolute; left: 0; top: 0; pointer-events: none; }
/* One small glyph, no words: pause while it runs, play when paused, replay when it has finished. */
.morph-ctl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-top: calc(0.575 * min(var(--t4), 100cqi / 5.4) - 22px);
  border-radius: 22px;
}
.morph-ctl svg { width: 26px; height: 26px; fill: currentColor; }
.morph-ctl path { display: none; }
.morph-ctl[data-icon="pause"] .g-pause, .morph-ctl[data-icon="play"] .g-play, .morph-ctl[data-icon="replay"] .g-replay { display: inline; }
.intro { display: grid; gap: 14px; font-size: var(--t3); line-height: 1.45; max-width: 44ch; }

/* ---------- now strip ---------- */
.now { padding-block: 0 clamp(64px, 9vw, 128px); scroll-margin-top: calc(var(--rec) / 2 + 16px); }
.now .inner { display: grid; grid-template-columns: var(--rec) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); align-items: start; }
.record {
  display: block;
  width: var(--rec); height: var(--rec);
  margin-top: calc(var(--rec) / -2);
  position: relative; z-index: 2;
  border-radius: 50%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.record.dragging { cursor: grabbing; }
.record:focus-visible { outline-offset: 4px; border-radius: 50%; }
.spin { display: block; width: 100%; height: 100%; animation: spin 1.8s linear infinite paused; }
@keyframes spin { to { transform: rotate(360deg); } }
.r-disc { fill: var(--ink); }
.r-groove { fill: none; stroke: var(--muted); stroke-width: 0.7; }
.r-shine { fill: none; stroke: var(--bg); stroke-width: 2; stroke-linecap: round; }
.r-label { fill: var(--accent); }
.r-text { fill: var(--on-accent); font-family: var(--display); font-size: 9px; font-weight: 700; }
.r-hole { fill: var(--bg); }

.onair {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px clamp(28px, 4vw, 64px);
  padding-top: 28px;
  min-height: calc(28px + 1.5 * var(--t1) + 1.15 * var(--t3));
}
.onair > div { min-width: 0; flex: 0 1 auto; max-width: min(100%, 24rem); }
.k { font-size: var(--t1); color: var(--muted); }
.v {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 100%;
  font-size: var(--t3);
  line-height: 1.15;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

/* ---------- sections ---------- */
.block { padding-block: clamp(56px, 8vw, 120px); }
.block .inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
/* Section heads. The size is capped by the screen width (not the text size), so the longest word in
   any head always fits a phone at 280px and at 400% zoom: no word ever breaks mid-way. The
   unbreakable pairs (.keep) only stay together where there's room. */
h1, h2, h3 { hyphens: manual; }
h2 {
  font-family: var(--display);
  font-weight: 760;
  font-stretch: 112%;
  font-size: min(var(--t6), calc((100vw - 32px) / 6.5));
  line-height: 1.05;
  text-wrap: balance;
  overflow-wrap: break-word;
  grid-column: 1 / -1;
}
@media (min-width: 480px) { .keep { white-space: nowrap; } }
.copy { grid-column: 1 / span 6; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; max-width: 40ch; font-size: var(--t3); line-height: 1.45; }
.fig { grid-column: 7 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; justify-items: start; }
.big {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: min(var(--t5), calc((100vw - 32px) / 5.2)); /* "to $132K" always fits on one line */
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-kerning: none;
}
.roll { white-space: nowrap; }
.cap { color: var(--muted); font-size: var(--t1); max-width: 38ch; }
.more { min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }

.tools { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
.tools li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; justify-items: start; }
.tools a {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 118%;
  font-size: min(var(--t4), calc((100vw - 32px) / 7.2)); /* "Templates" fits at any text size */
  line-height: 1.15;
}
.tools p { color: var(--muted); max-width: 32ch; }

/* The impressions line: one quiet line beside the lists, never poster scale. */
.reach { grid-column: 1 / span 5; font-size: var(--t2); line-height: 1.45; color: var(--muted); max-width: 30ch; align-self: start; }
.lists { grid-column: 7 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.lists h3 { font-size: var(--t1); font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.lists ul { display: grid; gap: 20px; }
.lists li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; justify-items: start; }
.lists a, .tools a, .copy a { max-width: 100%; }
.lists a { font-size: var(--t3); line-height: 1.3; }
.lists .m { font-size: var(--t1); color: var(--muted); }

.lede { grid-column: 1 / span 8; font-size: var(--t3); line-height: 1.45; max-width: 40ch; margin-top: -16px; }

/* talks: three topics, one line each, the quote and the clip */
.topics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); }
.topics li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.topics h3 { font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: var(--t4); line-height: 1.1; }
.topics p { color: var(--muted); max-width: 32ch; }
.said { grid-column: 1 / span 9; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; }
.quote { margin: 0; font-family: var(--display); font-weight: 600; font-stretch: 100%; font-size: min(var(--t4), calc((100vw - 32px) / 8)); line-height: 1.15; text-wrap: balance; overflow-wrap: break-word; max-width: 100%; min-width: 0; }
.said .m { font-size: var(--t1); color: var(--muted); }
.said .clip { display: grid; gap: 2px; justify-items: start; margin-top: 20px; }
.said .clip a { font-size: var(--t3); line-height: 1.3; max-width: 100%; }
.said .ask { font-size: var(--t3); line-height: 1.45; max-width: 40ch; margin-top: 20px; }

.also {
  grid-column: 1 / span 10;
  font-family: var(--display);
  font-weight: 560;
  font-stretch: 100%;
  font-size: var(--t4);
  line-height: 1.15;
  text-wrap: balance;
}

/* ---------- close ---------- */
.close { padding-block: clamp(56px, 8vw, 112px) calc(var(--dock-space) + 32px); container-type: inline-size; }
.close .inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hi {
  --hi-w: 5.62; /* "LinkedIn" at this width and weight, in em */
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 120%;
  /* about half the old poster size: a clear sign-off, not the loudest thing on the page */
  font-size: min(max(2rem, 6.5vw), 104px, calc((100vw - 32px) / var(--hi-w)));
  font-size: min(max(2rem, 6.5cqi), 104px, calc((100cqi - var(--gutter) - var(--gutter-r)) / var(--hi-w)));
  line-height: 1.04;
  text-decoration-thickness: 0.045em;
  text-underline-offset: 0.09em;
  text-decoration-skip-ink: auto;
  text-wrap: balance;
  overflow-wrap: anywhere;
  justify-self: start;
  max-width: 100%;
  transform-origin: 0 60%;
}
.hi .wv { white-space: nowrap; }
/* One underline under the whole line, drawn behind the letters: per-letter underlines would show
   seams, and the letters ripple over it on hover. */
.hi { text-decoration: none; }
.hi .wave {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 0.135em) / 100% 0.045em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hi .wave span span { position: relative; }
/* Hover: the letters ripple up one after another, like a wave hello. The underline rides along. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hi:hover .wave span span, .hi:focus-visible .wave span span {
    animation: hi-wave 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i) * 32ms) both;
  }
}
@keyframes hi-wave {
  0% { top: 0; }
  30% { top: -0.16em; }
  60% { top: 0.03em; }
  100% { top: 0; }
}
.close .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; font-size: var(--t2); }
.close .row > * { min-width: 0; }
.close .row p { max-width: 52ch; }
.close .links { display: flex; gap: 4px 24px; flex-wrap: wrap; }
.close .links a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- dock ---------- */
.dock {
  position: relative;
  z-index: 20;
  width: max-content;
  max-width: calc(100vw - 24px);
  margin: 24px auto;
  background: var(--ink);
  color: var(--bg);
  border-radius: 27px;
  padding: 5px;
  display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 2px;
  font-family: var(--body);
  font-size: var(--t1);
  font-weight: 600;
  line-height: 1.2;
}
/* Without JS the dock is plain, in the flow, so it can never cover anything. With JS it floats
   over the page like the iOS tab bar: it slides away as you scroll down and comes back as you
   scroll up, at the top and bottom of the page, and whenever it has keyboard focus (/dock.js).
   The page keeps --dock-space free at the bottom, so the last line and focused elements clear it. */
.dock-band { display: contents; }
:root { --dock-space: calc(var(--dock-h, 54px) + 24px + env(safe-area-inset-bottom, 0px)); }
@media (scripting: enabled) {
  .dock {
    position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    max-width: calc(100vw - 24px);
    transform: translate(-50%, calc(100% + 16px + env(safe-area-inset-bottom, 0px)));
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .dock.shown { transform: translateX(-50%); }
  /* Glass: the pill blurs what scrolls behind it. Solid where blur isn't supported, or when
     someone asks for less transparency. */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dock {
      background: color-mix(in srgb, var(--ink) 84%, transparent);
      -webkit-backdrop-filter: blur(24px) saturate(1.8);
      backdrop-filter: blur(24px) saturate(1.8);
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    .dock { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
}
@media (max-width: 767.98px) {
  /* Always one row. Tighter type and padding first; if the items still don't fit (320px, or 200%
     text), the pill scrolls sideways inside itself and snaps to an item. The item cut by the edge
     shows there's more. No fade: that would be a tint. */
  .dock {
    gap: 0;
    font-size: 0.875rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 5px;
    scrollbar-width: none;
  }
  .dock::-webkit-scrollbar { display: none; }
  .dock a { padding: 0 9px; scroll-snap-align: start; flex: none; }
}
.dock .ind {
  display: none;
  position: absolute; left: 0; top: 0;
  width: 0; height: 44px;
  border-radius: 22px;
  background: var(--accent);
  pointer-events: none;
}
.js .dock .ind { display: block; }
/* Swiping (dock-scrub.js): the pill lifts a little while it follows you. Vertical scrolling
   still belongs to the page. */
.js .dock { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dock .ind { transition: scale 0.18s var(--ease); }
/* the stretch and overshoot stay inside the pill's rounded edge */
.js .dock { overflow: clip; }
@media (max-width: 767.98px) { .js .dock { overflow-x: auto; overflow-y: hidden; } }
.dock.scrub .ind { scale: 1.08; }
.dock.scrub-off .ind { scale: 0.92; }
.dock.scrub { cursor: grabbing; }
.dock a {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  padding: 0 13px;
  border-radius: 22px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--bg);
}
.dock a.on { color: var(--on-accent); }
.dock a:focus-visible {
  outline: 3px solid var(--bg);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--ink);
  border-radius: 22px;
}

/* ---------- number roll ---------- */
/* The window is clipped to the digits' ink (0.09em to 0.79em of the line box), and the digits on
   the strip sit 1.6em apart, so the gap between two digits (0.9em) is taller than the window:
   a neighbouring digit can never peek in while one rolls past. */
.roll .col { display: inline-block; position: relative; line-height: 1; vertical-align: baseline; clip-path: inset(0.07em -0.3em 0.19em); }
.roll .ph { visibility: hidden; }
.roll .strip { position: absolute; left: 0; top: 0; width: 100%; display: block; transition: transform var(--dur-roll) var(--ease); }
.roll .strip.go { will-change: transform; }
.roll .strip span { display: block; height: 1.6em; line-height: 1; text-align: center; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .copy, .fig, .reach, .lists, .also, .lede, .said { grid-column: 1 / -1; }
  .tools, .topics { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .now .inner { grid-template-columns: minmax(0, 1fr); }
  .record { justify-self: end; }
  .onair { padding-top: 0; gap: 22px 28px; }
  .onair > div { flex: 1 1 9.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .roll .strip { transition: none; }
  .dock, .dock.shown { transition: none; }
  .dock .ind { transition: none; }
  .spin { animation-play-state: paused; }
}

/* ---------- Windows High Contrast and other forced colours ---------- */
@media (forced-colors: active) {
  .dock { background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
  .dock-band { background: Canvas; }
  .dock .ind, .js .dock .ind { display: none; }
  .dock a { color: LinkText; }
  .dock a[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .dock a:focus-visible { outline: 3px solid CanvasText; box-shadow: none; }
  .field { border-block: 0; }
  .record:focus-visible { outline: 3px solid Highlight; }
}