/* ============================================================
   Vidzero concept v4. THE CONVERSATION, THE ASK, THE FOOTER.
   Built 27 August 2026 on the approved back-half plan.

   The conversation: paper, the count's crop-mark framing, DSC00153 (the
   producer talking with the subject between takes) breaking the right edge,
   the questions at display scale beside it. Opening a question is the RACK
   FOCUS: the answer arrives soft and resolves sharp as the space opens.
   One question in focus at a time; the focus pull softens the rest on hover.

   The ask: the waiting screen. Every dark surface on this page has been a
   screen with someone's story on it; the last one is empty, tally off,
   waiting. Pointing at the CTA (the hero's own iris button) flicks it to
   On air with the live monitor's own ring. "Let's talk about your video."
   is Nick's line, 26 August 2026.

   The footer: the round-7 working footer form, re-proposed and approved
   with the plan.
   ============================================================ */

/* ============================================================
   THE CONVERSATION
   ============================================================ */
.conv {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding-block: clamp(5rem, 12vh, 9rem);
}
.conv .container { position: relative; }
.conv__head {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.3rem, 5.6vw, 4.6rem); line-height: .98; letter-spacing: -.03em;
  max-width: 21ch; text-wrap: balance;
}

.conv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
/* THE MONITOR (round 16): the wall's own object beside the questions.
   The wrapper breaks the right edge and stays sticky; the bezel is the
   mon3d recipe; the screen is 16/9 and clips its contents (the clip stays
   load-bearing: the waiting shots hold scale(1.035), and transformed
   descendants extend scrollable overflow, which was 11px of horizontal
   scroll before the clip). */
.conv__monwrap {
  position: sticky; top: clamp(4rem, 12vh, 7rem);
  margin-right: calc(-1 * (var(--container-pad) + max(0px, (100vw - var(--container)) / 2 - 8px)));
}
.conv__mon {
  background: linear-gradient(158deg, #1b1b22, #0d0d12);
  padding: clamp(10px, 1.1vw, 18px);
  border-radius: 16px;
  box-shadow: 0 50px 110px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: box-shadow .45s var(--ease-out);
}
/* an open question puts the monitor on air: the wall's live ring */
.conv.is-live .conv__mon {
  box-shadow: 0 50px 120px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(82, 113, 255, .4), 0 0 70px rgba(82, 113, 255, .14);
}
.conv__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #060609;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8);
}
.conv__shot { position: absolute; inset: 0; margin: 0;
  opacity: 0; filter: blur(10px); transform: scale(1.035);
  transition: opacity .55s var(--ease-out), filter .7s var(--ease-out), transform .7s var(--ease-out);
}
.conv__shot img { width: 100%; height: 100%; object-fit: cover; }
.conv__stage[data-show="1"] .conv__shot--1, .conv__stage[data-show="2"] .conv__shot--2,
.conv__stage[data-show="3"] .conv__shot--3, .conv__stage[data-show="4"] .conv__shot--4,
.conv__stage[data-show="5"] .conv__shot--5 { opacity: 1; filter: none; transform: none; }

/* THE ANSWER TAKES THE SCREEN (round 17): the answer is the point, so it
   sits centred at card scale on a vignette scrim, the way a broadcast
   graphic owns a frame. Centred is correct here: this is a graphic ON a
   screen, not page layout. */
.conv__grade { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .4s var(--ease-out);
  background: radial-gradient(120% 120% at 50% 46%, rgba(5, 5, 9, .74) 42%, rgba(5, 5, 9, .9) 100%); }
.conv.is-live .conv__grade { opacity: 1; }
/* idle scanlines: the screen reads as a screen even at rest */
.conv__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); }
.conv__ans {
  position: absolute; inset: 0; margin: 0; z-index: 2;
  display: grid; place-items: center;
  padding: clamp(1.6rem, 8%, 3rem);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.45vw, 1.42rem);
  line-height: 1.42; letter-spacing: -.008em;
  text-align: center; color: #fff; text-wrap: pretty;
  user-select: text; -webkit-user-select: text;
  opacity: 0; pointer-events: none;
}
.conv__ans.is-in { pointer-events: auto; }
/* the TV change: the card drops in on a short roll while the screen runs
   the page's own broadcast flicker (base.css's rekey-flicker, reused) */
@keyframes conv-roll {
  0% { opacity: 0; transform: translateY(-7%); }
  16% { opacity: 1; transform: translateY(1%); }
  100% { opacity: 1; transform: none; }
}
.conv.is-live .conv__ans.is-in {
  opacity: 1;
  animation: conv-roll .5s var(--ease-out), rekey-flicker .52s steps(1, end);
}
/* the CRT sweep: one bright band rolls down the screen on every change */
.conv__sweep { position: absolute; left: 0; right: 0; top: 0; height: 14%;
  pointer-events: none; opacity: 0; z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(214, 226, 255, .32) 45%, rgba(214, 226, 255, .1) 60%, transparent); }
@keyframes conv-sweep {
  0% { transform: translateY(-110%); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: .8; }
  100% { transform: translateY(760%); opacity: 0; }
}
.conv__stage.is-sweep .conv__sweep { animation: conv-sweep .55s var(--ease-out); }
.conv__tally {
  position: absolute; top: 12px; left: 14px;
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-soft);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.conv__tally b { font-weight: 400; }
.conv__tally i { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 7px var(--rec); }
.conv.is-live .conv__tally { opacity: 1; }

/* DESKTOP: the monitor IS the accordion's expansion, so the in-list
   regions collapse to screen-reader-only (they stay the disclosure's
   source of truth; display none would silence them). */
@media (min-width: 1001px) {
  .conv__a { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .conv.is-live .conv__ans.is-in { animation: none; }
  .conv__sweep, .conv__stage.is-sweep .conv__sweep { animation: none; display: none; }
}

.conv__list {
  margin-top: clamp(2.2rem, 5vw, 3.6rem);
  display: grid;
}
/* each question carries the count's hairline, wiping in as it lands */
.conv__item { position: relative; }
.conv__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  transition: background var(--dur-2) var(--ease-out);
}
.conv__item.is-in::before { transform: scaleX(1); transition: transform .5s var(--ease-out) .15s, background var(--dur-2) var(--ease-out); }
.conv__item.is-open::before { background: var(--accent); }

/* the focus pull: the question you point at resolves, the rest settle back.
   Two classes deep on purpose: base.css's .is-in[data-reveal] declares its
   own transition at the same specificity and this file loads later, so this
   one wins the cascade (the round-7 lesson, kept). */
.conv__list .conv__item { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); }
@media (hover: hover) {
  .conv__list:hover .conv__item { opacity: .42; }
  .conv__list:hover .conv__item:hover { opacity: 1; }
  .conv__list:hover .conv__item.is-open { opacity: 1; }
}

.conv__q { margin: 0; }
.conv__btn {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.4rem);
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1.06; letter-spacing: -.025em;
  color: var(--ink); text-wrap: balance;
}
.conv__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.conv__label { flex: 1 1 auto; }
/* the marker: an iris that closes to solid when its question is open */
.conv__ring {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 40%, transparent);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.conv__item.is-open .conv__ring { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }

/* THE RACK-FOCUS OPEN: the space opens on 0fr to 1fr, and the answer pulls
   focus as it arrives, soft and low to sharp and seated. The blur is a
   one-shot transition on one paragraph, never scroll-driven. */
.conv__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-inout, ease);
}
.conv__item.is-open .conv__a { grid-template-rows: 1fr; }
.conv__a-inner { overflow: hidden; min-height: 0; }
.conv__a p {
  margin: 0 0 clamp(1.1rem, 2.4vw, 1.7rem);
  font-family: var(--f-prose);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54ch;
  text-wrap: pretty;
  filter: blur(8px); opacity: 0; transform: translateY(8px);
  transition: filter .6s var(--ease-out) .08s, opacity .45s var(--ease-out) .05s, transform .6s var(--ease-out) .08s;
}
.conv__item.is-open .conv__a p { filter: none; opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .conv__grid { grid-template-columns: 1fr; }
  /* the monitor goes below 1000, so it VISITS each answer instead: opening
     a question opens its answer as an on-air card, that question's own
     photograph behind the broadcast vignette, the answer centred like the
     desktop card, the tally in the corner (Nick's mobile pass: losing the
     monitor needed compensating) */
  .conv__monwrap { display: none; }
  .conv__a-inner { position: relative; border-radius: 6px; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(8, 6, 28, .5); }
  .conv__item.is-open .conv__a-inner { margin-bottom: clamp(1.1rem, 3.5vw, 1.5rem); }
  .conv__a p {
    display: grid; place-items: center; text-align: center;
    margin: 0; padding: clamp(2.4rem, 9vw, 3rem) clamp(1.1rem, 5vw, 1.6rem) clamp(2rem, 8vw, 2.6rem);
    min-height: 210px; max-width: none;
    font-family: var(--f-display); font-weight: 600;
    font-size: 1.04rem; line-height: 1.45; letter-spacing: -.008em;
    color: #fff;
    background-size: cover; background-position: center;
  }
  .conv__item[data-shot="1"] .conv__a p { background-image: radial-gradient(120% 120% at 50% 46%, rgba(5,5,9,.74) 42%, rgba(5,5,9,.9) 100%), url("../img/count-shirt-700.jpg"); }
  .conv__item[data-shot="2"] .conv__a p { background-image: radial-gradient(120% 120% at 50% 46%, rgba(5,5,9,.74) 42%, rgba(5,5,9,.9) 100%), url("../img/faq-cost-800.jpg"); }
  .conv__item[data-shot="3"] .conv__a p { background-image: radial-gradient(120% 120% at 50% 46%, rgba(5,5,9,.74) 42%, rgba(5,5,9,.9) 100%), url("../img/conv-set-800.jpg"); }
  .conv__item[data-shot="4"] .conv__a p { background-image: radial-gradient(120% 120% at 50% 46%, rgba(5,5,9,.74) 42%, rgba(5,5,9,.9) 100%), url("../img/faq-brands-800.jpg"); }
  .conv__item[data-shot="5"] .conv__a p { background-image: radial-gradient(120% 120% at 50% 46%, rgba(5,5,9,.74) 42%, rgba(5,5,9,.9) 100%), url("../img/faq-oz-800.jpg"); }
  .conv__a-inner::before { content: ""; position: absolute; top: 12px; left: 14px; z-index: 2;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--rec); box-shadow: 0 0 7px var(--rec);
    opacity: 0; transition: opacity .3s var(--ease-out); }
  .conv__a-inner::after { content: "On air"; position: absolute; top: 8px; left: 28px; z-index: 2;
    font-family: var(--f-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--on-dark-soft);
    opacity: 0; transition: opacity .3s var(--ease-out); }
  .conv__item.is-open .conv__a-inner::before, .conv__item.is-open .conv__a-inner::after { opacity: 1; }
}

/* ============================================================
   THE ASK  (the gathering)
   The copy holds the centre; the work gathers around it and stays alive.
   Pinned inside .askhold across the runway; flow.js writes --cp (eased)
   and is-here; main.js bakes the seats and the reach-closer hover.
   ============================================================ */
.askhold { position: relative; }
.askhold__runway { height: 130dvh; pointer-events: none; }
.ask {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
  /* the menu's own world, kept from the waiting screen */
  background: radial-gradient(120% 100% at 82% 0%, #14104a 0%, #0a0730 55%, #06041c 100%);
  color: var(--on-dark);
}
.ask::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(239,234,250,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(239,234,250,.05) 1px, transparent 1px);
  background-size: 46px 46px; }
.ask::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); }

/* the gathering */
.ask__cloud { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transition: transform .7s var(--ease-out); }
.ask.is-near .ask__cloud { transform: scale(.965); }
.ask__seat { position: absolute; left: 50%; top: 50%;
  transform:
    translate(-50%, -50%)
    translate(var(--px), var(--py))
    translate(calc(var(--sx) * (1 - var(--cp, 0))), calc(var(--sy) * (1 - var(--cp, 0))))
    rotate(calc(var(--sr) * (1 - var(--cp, 0))))
    scale(calc(1 - .3 * (1 - var(--cp, 0))));
  opacity: calc(var(--fo) * (0.15 + 0.85 * var(--cp, 0)));
}
/* alive, forever: two axes and a lean, quick enough to register against
   the fly-in (tuned on the bench with Nick) */
@keyframes ask-drift {
  0% { transform: translate(calc(-.6 * var(--amp)), calc(-1 * var(--amp))) rotate(-1.1deg); }
  50% { transform: translate(var(--amp), calc(.4 * var(--amp))) rotate(.4deg); }
  100% { transform: translate(calc(-.2 * var(--amp)), var(--amp)) rotate(1.1deg); }
}
.ask__floaty { display: block; animation: ask-drift var(--dur) ease-in-out var(--del) infinite alternate; }
.ask__frag { display: block; width: var(--fw); aspect-ratio: 16 / 9;
  background-image: url("../img/field-sprite.jpg?v=20260828a");
  background-size: calc(100% * 9) calc(100% * 6);
  background-position: var(--bx) var(--by);
  border-radius: 3px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* the centred copy: this page's one deliberate centring, at the close */
.ask__heart { position: relative; z-index: 3; text-align: center;
  display: grid; justify-items: center;
  padding-inline: var(--container-pad); max-width: 46rem;
  opacity: clamp(0, calc((var(--cp, 0) - .35) / .4), 1);
}
/* invisible copy must not hit-test (the transparent-layer trap); flow.js
   flips is-here past the halfway mark */
.ask__heart { pointer-events: none; }
.ask.is-here .ask__heart { pointer-events: auto; }
.ask__heart h2 {
  font-family: var(--f-display); font-weight: 800; color: #fff;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: .98; letter-spacing: -.035em; text-wrap: balance;
  text-shadow: 0 4px 40px rgba(6, 4, 21, .8);
}
.ask__line {
  margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
  font-family: var(--f-prose); font-size: clamp(1.02rem, 1.16vw, 1.16rem);
  line-height: 1.62; color: rgba(240, 238, 252, .95); max-width: 38ch; text-wrap: pretty;
  text-shadow: 0 2px 24px rgba(6, 4, 21, .9);
}
.ask__row { margin-top: clamp(1.7rem, 3.8vh, 2.4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.1rem clamp(1.4rem, 3vw, 2.2rem); }
.ask__go { margin-top: .4rem; }
/* The marker hover (Nick, round 21): the underline rises INTO the text as
   a band, like a highlighter. The band is a TRANSLUCENT accent tint, which
   is the whole trick: a solid accent band fails 4.5:1 against both white
   and ink (the accent is mid-lightness), but a real highlighter is
   translucent, so the text keeps its own colour and its contrast barely
   moves. content-box clip, or the band would rise from the touch padding's
   edge instead of the underline's. */
.ask__mail { display: inline-block; padding: .6em .4em; margin-block: -.6em;
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem;
  color: var(--accent-on-dark, #8FA3FF);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
  text-decoration-color: var(--accent-on-dark, #8FA3FF);
  background-image: linear-gradient(color-mix(in srgb, var(--accent-on-dark, #8FA3FF) 30%, transparent),
                                    color-mix(in srgb, var(--accent-on-dark, #8FA3FF) 30%, transparent));
  background-repeat: no-repeat; background-origin: content-box; background-clip: content-box;
  background-position: 0 100%; background-size: 100% 0;
  transition: background-size var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out); }
.ask__mail:hover, .ask__mail:focus-visible {
  color: #fff; background-size: 100% .78em; }

/* phone: only the poles, above and below the heart, COMPRESSED into the
   visible band: at the baked desktop radii they hid at the screen's very
   edges (Nick's mobile pass). main.js bakes --pxM/--pyM for this. */
@media (max-width: 720px) {
  .ask__seat--side { display: none; }
  .ask__frag { min-width: 24vw; }
  .ask__seat {
    transform:
      translate(-50%, -50%)
      translate(var(--pxM, var(--px)), var(--pyM, var(--py)))
      translate(calc(var(--sx) * (1 - var(--cp, 0))), calc(var(--sy) * (1 - var(--cp, 0))))
      rotate(calc(var(--sr) * (1 - var(--cp, 0))))
      scale(calc(1 - .3 * (1 - var(--cp, 0))));
  }
}

/* ============================================================
   THE FOOTER  (rebuilt 27 August 2026 to Nick's list)
   Logo, the one-liner, the sitemap links, copyright and credits, framed by
   the paper sections' crop marks, ending on the menu's closed clapper.
   ============================================================ */
.foot {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--rule);
  /* the bottom padding clears the crop marks' downward reach (--mark-out-y)
     plus real air: without it the bottom corners sat on the page's very
     last pixels (Nick, 27 August 2026) */
  padding-block: clamp(3.5rem, 8vh, 6rem) calc(var(--mark-out-y) + clamp(1.6rem, 3.5vh, 2.4rem));
  --mark-out: clamp(1rem, 3.4vw, 4.5rem); --mark-out-y: clamp(1.4rem, 3.4vw, 3rem);
}
.foot .container { position: relative; }
.foot__marks {
  position: absolute;
  top: calc(-1 * var(--mark-out-y)); bottom: calc(-1 * var(--mark-out-y));
  left: max(0px, calc(var(--container-pad) - var(--mark-out)));
  right: max(0px, calc(var(--container-pad) - var(--mark-out)));
  pointer-events: none;
}
/* Vidzero's own marks usage, found on their crew shirt (Nick, 27 August
   2026): TWO corners only, top left and bottom right, and much bigger.
   Four small corners read as a border; two large ones read as a crop. */
.foot__marks i { position: absolute; width: clamp(38px, 3.6vw, 58px); height: clamp(38px, 3.6vw, 58px); border: 2px solid var(--ink); opacity: .3; }
.foot__marks i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.foot__marks i:nth-child(2), .foot__marks i:nth-child(3) { display: none; }
.foot__marks i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: start;
}
.foot__brand {
  display: inline-block;
  font-family: var(--f-display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.03em; color: var(--ink);
}
.foot__brand .dot { color: var(--accent); }
.foot__line {
  margin-top: clamp(.8rem, 1.6vw, 1.1rem);
  font-family: var(--f-prose); font-size: 1rem; line-height: 1.6;
  color: var(--ink-soft); max-width: 42ch; text-wrap: pretty;
}
.foot__mail {
  display: inline-block; margin-top: clamp(1.4rem, 3vh, 2.2rem);
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  letter-spacing: -.03em; line-height: 1.1;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  /* the marker hover, paper-ground version: see .ask__mail for the why */
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent),
                                    color-mix(in srgb, var(--accent) 22%, transparent));
  background-repeat: no-repeat;
  background-position: 0 100%; background-size: 100% 0;
  transition: background-size var(--dur-1) var(--ease-out);
}
.foot__mail:hover, .foot__mail:focus-visible {
  background-size: 100% .74em;
}
.foot__nav {
  /* FIXED tracks, never max-content: with content-sized columns the hover
     indent widened the left column and pushed the right one sideways
     (Nick, 27 August 2026). Inside a fixed track the indent moves only the
     hovered label. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 24rem;
  gap: clamp(.55rem, 1.4vh, .9rem) clamp(1.2rem, 2.5vw, 2rem);
  padding-top: .35rem;
}
/* the menu rows' own hover, on paper: the accent bar grows in from the
   left, the label indents and resolves from soft to ink, and main.js
   re-keys the text (pointer only, the same deliberate keyboard exception
   the menu rows carry). The shared rekey-flicker keyframe lives in
   base.css. */
.foot__nav a {
  position: relative;
  display: inline-block; padding: .25em .3em .25em 0; margin: -.25em -.3em -.25em 0;
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem;
  color: var(--ink-soft);
  transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
}
.foot__nav a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 0; background: var(--accent);
  transition: height var(--dur-2) var(--ease-out);
}
.foot__nav a:hover { color: var(--ink); padding-left: 1.1rem; }
.foot__nav a:hover::before { height: 72%; }
.foot__nav a.is-rekey { animation: rekey-flicker .52s steps(1, end); }
.foot__nav a:focus-visible { color: var(--ink); outline: 2px solid var(--accent); outline-offset: 3px; }

/* the bottom bar: copyright left, credit right, and the page ends on the
   menu's own closed clapper reading Cut (the clapper styles are the nav's,
   currentColor, shared) */
.foot__bar {
  margin-top: clamp(2.2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1rem, 2.4vh, 1.6rem);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .8rem clamp(1.6rem, 4vw, 3rem);
  font-family: var(--f-prose); font-size: .92rem; color: var(--ink-soft);
}
.foot__bar a {
  display: inline-block; padding: .8em .4em; margin-block: -.8em;
  color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 3px;
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent),
                                    color-mix(in srgb, var(--accent) 22%, transparent));
  background-repeat: no-repeat; background-origin: content-box; background-clip: content-box;
  background-position: 0 100%; background-size: 100% 0;
  transition: background-size var(--dur-1) var(--ease-out);
}
.foot__bar a:hover, .foot__bar a:focus-visible { background-size: 100% .72em; }

/* PLAY FROM START: the footer's back-to-top (Nick's label, round 23;
   it replaced "Back to one"). The glyph is the skip-to-start transport
   icon, the bar with two arrows pointing back at it. Machine voice like
   the REC and On air labels, never the underlined-link treatment (the
   .foot__bar a rules are overridden below by the two-class selector).
   Desktop: the bar's centre. Phone: its own full-width row above the
   copyright. */
.foot__bar .foot__rewind {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .8em .6em; margin-block: -.8em;
  font-family: var(--f-machine); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; background-image: none;
  transition: color var(--dur-1) var(--ease-out);
}
.foot__rewind-glyph { display: inline-flex; align-items: center; gap: 2px;
  transition: transform var(--dur-1) var(--ease-out); }
/* the start mark the arrows point back at */
.foot__rewind-glyph::before { content: ""; width: 2px; height: 8px;
  background: currentColor; }
.foot__rewind-glyph i { width: 0; height: 0;
  border-block: 4px solid transparent; border-right: 6px solid currentColor; }
.foot__bar .foot__rewind:hover, .foot__bar .foot__rewind:focus-visible {
  color: var(--ink); background-image: none; }
.foot__bar .foot__rewind:hover .foot__rewind-glyph,
.foot__bar .foot__rewind:focus-visible .foot__rewind-glyph {
  transform: translateX(-3px); }
@media (max-width: 720px) {
  .foot__bar .foot__rewind { order: -1; flex-basis: 100%;
    padding: .9em 0; margin-block: 0; min-height: 44px; }
}

/* the accreditation strip: the two certification marks and the cut-down
   inclusive-employer line, above the bottom bar */
.foot__accred {
  margin-top: clamp(2.2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.6rem, 3.5vh, 2.4rem);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.4rem clamp(1.8rem, 4vw, 3rem);
}
.foot__badges { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.6rem); flex: 0 0 auto; }
.foot__badges img { display: block; width: clamp(58px, 6vw, 78px); height: auto; }
.foot__accred-line {
  margin: 0; flex: 1 1 34ch;
  font-family: var(--f-prose); font-size: .98rem; line-height: 1.6;
  /* 80ch, deliberately past the 65 to 75 body band: Nick wants the longer
     supplied text on fewer lines, and this is footer small print beside the
     badges, not a body column */
  color: var(--ink-soft); max-width: 80ch; text-wrap: pretty;
}

@media (max-width: 720px) {
  .foot__grid { grid-template-columns: 1fr; }
  .foot__bar { justify-content: flex-start; }
}
@media (max-width: 480px) {
  /* phones have rounded corners: the marks keep a real inset from every
     edge (the bottom right one was touching the corner, Nick's mobile
     pass) */
  .foot { --mark-out-y: 1rem; }
  .foot__marks {
    left: max(14px, calc(var(--container-pad) - var(--mark-out)));
    right: max(14px, calc(var(--container-pad) - var(--mark-out)));
  }
  .foot__marks i { width: 34px; height: 34px; }
}

/* ============================================================
   REDUCED MOTION: opens are instant, nothing racks, the tally still works.
   Sits after everything it overrides; a media query adds no specificity.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* the gathering: seated, still, everything visible; the runway goes and
     the section stands as a plain viewport */
  .askhold__runway { display: none; }
  .ask { position: relative; }
  .ask__seat { opacity: var(--fo); transform: translate(-50%, -50%) translate(var(--px), var(--py)); }
  .ask__floaty { animation: none; }
  .ask__heart { opacity: 1; pointer-events: auto; }
  .ask.is-near .ask__cloud, .ask__cloud { transform: none; transition: none; }
  .conv__item, .conv__item::before, .conv__item.is-in::before { transition: none; }
  .conv__item.is-in::before { transform: scaleX(1); }
  .conv__a { transition: none; }
  .conv__a p { filter: none; transform: none; transition: none; }
  .conv__a p { opacity: 0; }
  .conv__item.is-open .conv__a p { opacity: 1; }
  .conv__ring { transition: none; }
  .ask__screen, .ask__tally { transition: none; }
  .foot__mail, .foot__meta a { transition: none; }
}