/* ==========================================================================
   FUTURE HUB FORUM 2026 — "The Line"

   MAVR's decade rendered as a Kyoto rail line. Station nameplates, a strip-map
   nav, a departure board, and eleven numbered stations terminating at Future
   Hub — with the next station deliberately blank, because it gets named in the
   room on November 8.

   Palette is fixed by the event brand (pink / blue / cream). Everything else
   here — type, grid, texture, density, motion — is the rail signage system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type
   Barlow Condensed carries the signage voice; Barlow the reading voice;
   Martian Mono every number that behaves like measured data (times, station
   codes, the countdown). Noto Sans JP is a 16-character subset — only the kana
   and kanji the real station and university names need.
   -------------------------------------------------------------------------- */

@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlowcond-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlowcond-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('../fonts/martian-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('../fonts/martian-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Noto Sans JP'; src: url('../fonts/notojp-subset.woff2') format('woff2'); font-weight: 700; font-display: swap;
  unicode-range: U+3099, U+30c1-30c2, U+30cf-30d0, U+30d5-30d6, U+30e3, U+30e5, U+30fc, U+4eac, U+56fd, U+5916, U+5927, U+5b66, U+897f, U+8a9e, U+90fd, U+9662; }

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand — fixed. Pink is the line colour; blue is every action. */
  --pink: #ff65c3;
  --blue: #345894;
  --cream: #fff0f8;
  --white: #fff;

  /* Structural neutrals, derived from the blue so nothing new enters the hue set */
  --ink: #0c1526;
  --ink-2: #16233d;
  --ink-3: #22314f;
  --rule: #d3d7e2;
  --rule-soft: #e7e9f0;

  /* Signage ink on light ground */
  --text: #131c2e;
  --text-2: #4a5570;

  /* Board (dark) foregrounds */
  --led: #fff2f9;
  --led-2: rgba(255, 242, 249, 0.62);
  /* The dim tier still has to clear 4.5:1 on --ink; it carries the countdown
     labels, film captions and the footer address, not just decoration. */
  --led-3: rgba(255, 242, 249, 0.5);

  --pink-ink: #c9187f; /* pink darkened to pass contrast on cream/white */
  --blue-ink: #2a4677;

  --font-sign: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-data: 'Martian Mono', ui-monospace, monospace;
  --font-jp: 'Noto Sans JP', var(--font-sign);

  --wrap: 1180px;
  --wrap-read: 820px;
  --wrap-narrow: 760px;

  --nav-h: 66px;
  /* Symmetric breathing room either side of the pink separator under the
     nameplate. One value, so the two gaps cannot drift apart. */
  --hero-gap: clamp(22px, 3vw, 34px);
  --pad-y: clamp(64px, 8vw, 116px);
  --pad-x: clamp(18px, 4vw, 40px);

  --line-w: 6px;

  /* Signage corners are nearly square; the roundels are the only true circles. */
  --r-panel: 4px;
  --r-card: 6px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
iframe { border: 0; display: block; }
h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--blue); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
.board :focus-visible, .sec--ink :focus-visible, .foot :focus-visible { outline-color: var(--pink); }
.final :focus-visible { outline-color: var(--ink); }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */

.sec { padding: var(--pad-y) var(--pad-x); }
.sec--cream { background: var(--cream); }
.sec--white { background: var(--white); }
.sec--ink { background: var(--ink); color: var(--led); }

.wrap { max-width: var(--wrap); margin: 0 auto; }
.wrap--read { max-width: var(--wrap-read); margin: 0 auto; }
.wrap--narrow { max-width: var(--wrap-narrow); margin: 0 auto; }

/* Section headings: the signage voice. No eyebrows anywhere on this page —
   a heading that needs a label above it isn't finished. */
.h2 {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text);
}
.sec--ink .h2 { color: var(--led); }

/* The rule under a heading is the line itself. */
.h2-rule {
  margin-top: 20px;
  height: var(--line-w);
  background: var(--pink);
  width: 84px;
}

.lede {
  margin-top: 26px;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 68ch;
}
.sec--ink .lede { color: var(--led-2); }

.data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sign);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: var(--blue);
  color: var(--white);
  padding: 17px 28px;
  font-size: 19px;
  line-height: 1;
  border-radius: var(--r-panel);
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.btn svg { width: 20px; height: 12px; flex: none; }
.btn:active { transform: scale(0.97); }
.btn--lg { font-size: 22px; padding: 20px 34px; }
.btn--pink { background: var(--pink); color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink); color: var(--white); }
  .btn--pink:hover { background: var(--white); color: var(--ink); }
}

/* Roundel — the station number badge. Real geometry, not decoration. */
.roundel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 3px solid var(--pink);
  background: var(--white);
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.03em;
  color: var(--text);
  flex: none;
}

/* --------------------------------------------------------------------------
   Strip-map navigation — the diagram above the train doors
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 32px);
}

.nav__mark {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.nav__mark b { color: var(--pink-ink); font-weight: 700; }

/* The strip map: one continuous pink line with a stop per section. */
.strip {
  position: relative;
  flex: 1;
  display: flex;
  min-width: 0;
  height: 100%;
}
/* The line belongs to the track, not the viewport onto it — otherwise the
   stops that scroll past the fold sit on no line at all. */
.strip__track {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 6px;
}
.strip__track::before {
  content: '';
  position: absolute;
  left: 6px; right: 6px;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--pink);
  opacity: 0.28;
}

.stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0 2px;
  text-decoration: none;
  color: var(--text-2);
  font-family: var(--font-sign);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 200ms var(--ease-out);
}
.stop__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--pink);
  transition: transform 260ms var(--ease-out), background 260ms var(--ease-out);
}
.stop[aria-current='true'] { color: var(--text); }
.stop[aria-current='true'] .stop__dot {
  background: var(--pink);
  transform: scale(1.42);
}

@media (hover: hover) and (pointer: fine) {
  .stop:hover { color: var(--pink-ink); }
  .stop:hover .stop__dot { background: var(--pink); }
}

.nav__apply {
  padding: 12px 20px;
  font-size: 16px;
  white-space: nowrap;
}
.nav__apply svg { width: 17px; height: 10px; }

/* --------------------------------------------------------------------------
   Hero — the station nameplate (駅名標)
   -------------------------------------------------------------------------- */

.hero {
  background: var(--white);
  padding: clamp(16px, 2.2vw, 26px) var(--pad-x) 0;
}
.hero__inner { max-width: var(--wrap); margin: 0 auto; }
/* The nameplate block clears the separator by the same gap the pitch below it
   uses, so the pink line sits centred in its own space rather than flush. */
header.hero { padding-bottom: var(--hero-gap); }

.hero__operator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(12px, 1.8vw, 20px);
}
.hero__logo { width: clamp(140px, 17vw, 210px); height: auto; }
.hero__linename {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 11px;
}
.hero__linename::before {
  content: '';
  width: 30px; height: var(--line-w);
  background: var(--pink);
  flex: none;
}

/* The nameplate itself */
.plate {
  position: relative;
  border: 2px solid var(--text);
  border-radius: var(--r-panel);
  background: var(--white);
  padding: clamp(16px, 2.4vw, 28px) clamp(20px, 3.4vw, 44px) 0;
  overflow: hidden;
}
.plate__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.plate__num {
  width: clamp(58px, 6.4vw, 78px);
  height: clamp(58px, 6.4vw, 78px);
  border-width: 4px;
  font-size: clamp(15px, 1.6vw, 19px);
}
.plate__meta {
  text-align: right;
  font-family: var(--font-data);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.9;
}

.plate__name {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 104px);
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-top: clamp(14px, 2vw, 24px);
  color: var(--text);
}
.plate__kana {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(17px, 2.1vw, 27px);
  letter-spacing: 0.16em;
  color: var(--text-2);
  margin-top: 14px;
}

/* Previous / next station strip along the bottom of the plate */
.plate__adj {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: clamp(14px, 2vw, 22px) calc(-1 * clamp(20px, 3.4vw, 44px)) 0;
  padding: 16px clamp(20px, 3.4vw, 44px);
  border-top: 2px solid var(--rule);
}
.adj {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-family: var(--font-sign);
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.adj--next { justify-content: flex-end; text-align: right; }
.adj svg { width: 26px; height: 13px; flex: none; color: var(--pink-ink); }
.adj__code {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}

/* The blank next station — the thesis of the whole page. */
.adj--next .adj__unknown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 2px dashed var(--pink);
  border-radius: var(--r-panel);
  color: var(--pink-ink);
  font-weight: 700;
}

/* The line, running full-bleed out of the plate. This sits at body level, so
   it is already edge to edge — negative margins here would overflow the page. */
.hero__line {
  height: var(--line-w);
  background: var(--pink);
}

.hero__pitch {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--hero-gap) 0 clamp(24px, 3.2vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
.hero__h1 {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text);
}
.hero__h1 em {
  font-style: normal;
  color: var(--pink-ink);
}
.hero__sub {
  margin-top: 22px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 46ch;
}
.hero__act { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hero__deadline {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-2);
}
.hero__deadline b { color: var(--pink-ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   Departure board — dark, LED, the page's one authored motion moment
   -------------------------------------------------------------------------- */

.board {
  background: var(--ink);
  color: var(--led);
  /* The dot grid is the board's physical LED matrix, not a decorative texture. */
  background-image: radial-gradient(rgba(255, 242, 249, 0.06) 1px, transparent 1px);
  background-size: 4px 4px;
}

.depart {
  padding: clamp(26px, 3.4vw, 40px) var(--pad-x);
}
.depart__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
  flex-wrap: wrap;
}
.depart__when {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.depart__label {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink);
}
.depart__date {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Countdown as flap cells.
   The parent carries the perspective: without it rotateX is an orthographic
   projection and the flap reads as a vertical squash rather than a hinge. */
.clock { display: flex; align-items: flex-start; gap: clamp(10px, 1.6vw, 18px); }
.clock__unit { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.clock__cells { display: flex; gap: 4px; perspective: 260px; }
.cell {
  --cell-w: clamp(26px, 3.3vw, 40px);
  position: relative;
  width: var(--cell-w);
  height: calc(var(--cell-w) * 1.42);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-2);
  border-radius: 3px;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: clamp(17px, 2.1vw, 26px);
  color: var(--led);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 242, 249, 0.07);
  backface-visibility: hidden;
  /* the flap hinges from its top edge */
  transform-origin: 50% 0;
}
/* the seam the flap folds on */
.cell::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.cell.is-flipping { animation: flap 190ms var(--ease-out); }
@keyframes flap {
  0% { transform: rotateX(-84deg); filter: blur(1.2px); }
  100% { transform: rotateX(0deg); filter: blur(0); }
}
.clock__label {
  font-family: var(--font-data);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--led-3);
}

/* The theme song title, given the board's full width. Static, so it needs no
   pause control and adds no second motion to compete with the flap. */
.anthem {
  position: relative;
  border-top: 1px solid rgba(255, 242, 249, 0.14);
  padding: clamp(40px, 6vw, 84px) var(--pad-x);
  /* the platform edge: text runs in and out of frame, never spills */
  overflow: hidden;
}

/* The rail the line runs on. */
.anthem__rail {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(22px, 3vw, 40px);
  height: 3px;
  background: var(--pink);
  opacity: 0.3;
}

.anthem__pause {
  position: absolute;
  top: clamp(16px, 2vw, 26px);
  right: var(--pad-x);
  z-index: 2;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 242, 249, 0.4);
  border-radius: 50%;
  background: transparent;
  color: var(--led-2);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.anthem__pause svg { width: 11px; height: 11px; }
/* 32px reads right on the board but is under the 44px touch minimum, so the
   hit area is extended without changing what you see. */
.anthem__pause::after { content: ''; position: absolute; inset: -8px; }
.anthem__pause:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .anthem__pause:hover { border-color: var(--pink); color: var(--pink); }
}
.anthem__lines {
  max-width: var(--wrap);
  margin: 0 auto;
  font-family: var(--font-sign);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.anthem__a, .anthem__b {
  display: block;
  /* Arrive, stand at the platform long enough to be read, depart. The second
     line trails the first the way a carriage trails the one ahead of it. */
  animation: anthemRun 9s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.anthem__b { animation-delay: 0.22s; }
/* Stopping should always leave the line readable, so pausing resets it to
   standing at the platform rather than freezing wherever it happened to be. */
.anthem__lines[data-paused='true'] .anthem__a,
.anthem__lines[data-paused='true'] .anthem__b {
  animation: none;
  transform: none;
  opacity: 1;
}

@keyframes anthemRun {
  0%   { transform: translateX(106%); opacity: 0; }
  10%  { transform: translateX(0);    opacity: 1;
         animation-timing-function: linear; }
  79%  { transform: translateX(0);    opacity: 1;
         animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  92%  { transform: translateX(-106%); opacity: 0; }
  100% { transform: translateX(-106%); opacity: 0; }
}
.anthem__a {
  font-size: clamp(30px, 5.8vw, 82px);
  color: var(--led);
}
.anthem__b {
  margin-top: 0.1em;
  font-size: clamp(24px, 4.5vw, 64px);
  color: var(--pink);
}

/* --------------------------------------------------------------------------
   Through-service (about)
   -------------------------------------------------------------------------- */

.through { display: grid; gap: clamp(30px, 4vw, 54px); }
.through__body p + p { margin-top: 18px; }
.through__body p {
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--text-2);
  max-width: 70ch;
}

.aims { margin-top: clamp(30px, 4vw, 46px); display: grid; gap: 0; }
.aim {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}
.aim:last-child { border-bottom: 1px solid var(--rule); }
.aim__mark {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  color: var(--pink-ink);
}
.aim__mark svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   The Line — eleven stations
   -------------------------------------------------------------------------- */

.line { margin-top: clamp(38px, 5vw, 62px); position: relative; }

.station {
  position: relative;
  display: grid;
  grid-template-columns: 74px 58px minmax(0, 1fr);
  gap: 0 20px;
  align-items: start;
}
.station__year {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 19px);
  letter-spacing: -0.03em;
  color: var(--pink);
  text-align: right;
  padding-top: 21px;
}
/* rail column */
.station__rail { position: relative; height: 100%; }
.station__rail::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: var(--line-w);
  margin-left: calc(var(--line-w) / -2);
  background: var(--pink);
}
.station:first-child .station__rail::before { top: 26px; }
/* The terminus keeps its rail running to the row edge so the solid service
   hands off to the dashed continuation with no break in the line. */

.station__dot {
  position: absolute;
  left: 50%; top: 26px;
  width: 20px; height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--pink);
  transition: transform 300ms var(--ease-out), background 300ms var(--ease-out);
}
.station[data-open='true'] .station__dot { background: var(--pink); transform: scale(1.28); }
/* the terminus gets the double ring every rail map uses */
.station--terminus .station__dot {
  width: 26px; height: 26px;
  margin-left: -13px;
  top: 23px;
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px var(--pink);
}

.station__body { padding: 0 0 8px; min-width: 0; }
.station__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  background: transparent;
  border: 0;
  border-radius: var(--r-card);
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .station__btn:hover { background: rgba(255, 242, 249, 0.07); }
}
.station__code {
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pink);
  display: block;
  margin-bottom: 7px;
}
.station__title {
  display: block;
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--led);
}
.station__meta {
  display: block;
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--led-2);
  max-width: 62ch;
}
.station__toggle {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 242, 249, 0.55);
  color: var(--pink);
  transition: border-color 200ms var(--ease-out), transform 300ms var(--ease-out);
}
.station__toggle svg { width: 14px; height: 14px; }
.station[data-open='true'] .station__toggle { border-color: var(--pink); transform: rotate(180deg); }

.station__panel { padding: 0 20px 24px; }
.station__text {
  font-size: 16px;
  line-height: 1.68;
  color: var(--led-2);
  max-width: 68ch;
}
.films { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 18px; }
.film { flex: 1 1 300px; min-width: 0; max-width: 460px; }
.film__frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid rgba(255, 242, 249, 0.16);
}
.film__frame iframe { width: 100%; height: 100%; }
.film__cap {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--led-3);
}

/* Terminus → the unnamed next line */
.onward {
  display: grid;
  grid-template-columns: 74px 58px minmax(0, 1fr);
  gap: 0 20px;
  align-items: center;
}
.onward__rail { position: relative; height: 104px; }
.onward__rail::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 20px;
  width: var(--line-w);
  margin-left: calc(var(--line-w) / -2);
  /* dashed = service continues beyond the timetable */
  background: repeating-linear-gradient(var(--pink) 0 10px, transparent 10px 20px);
}
.onward__dot {
  position: absolute;
  left: 50%; bottom: 0;
  width: 20px; height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  border: 4px dashed var(--pink);
  background: transparent;
}
.onward__body { padding: 20px; }
.onward__title {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 25px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--pink);
}
.onward__note { margin-top: 8px; font-size: 15px; color: var(--led-2); max-width: 54ch; }

/* --------------------------------------------------------------------------
   Operator plate (About MAVR)
   -------------------------------------------------------------------------- */

.operator {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 60px);
  align-items: start;
}
.operator__logo { width: 220px; height: auto; }
.operator__body p { font-size: 16.5px; line-height: 1.68; color: var(--text-2); max-width: 70ch; }
.operator__body p + p { margin-top: 16px; }
.operator__body a { color: var(--blue-ink); font-weight: 600; }
.operator__sign {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
}
/* "Peace," sits above the signature, as the organizers wrote it. */
.operator__sign span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Ticket
   -------------------------------------------------------------------------- */

.ticket {
  margin-top: clamp(32px, 4vw, 48px);
  background: var(--white);
  border: 2px solid var(--text);
  border-radius: var(--r-panel);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  overflow: hidden;
}
.ticket__main { padding: clamp(26px, 3.4vw, 42px); }
.ticket__route {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.ticket__rows { margin-top: clamp(24px, 3vw, 34px); display: grid; gap: 0; }
.trow {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
.trow:first-child { border-top: 0; padding-top: 0; }
.trow__k {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pink-ink);
}
.trow__v { font-size: 17px; line-height: 1.45; font-weight: 500; color: var(--text); }

/* Perforated stub */
.ticket__stub {
  position: relative;
  background: var(--cream);
  padding: clamp(26px, 3.4vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  border-left: 2px dashed var(--text);
}
.stub__fare {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(46px, 6.5vw, 84px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--pink-ink);
}
.stub__note { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.stub__code {
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-2);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Timetable
   -------------------------------------------------------------------------- */

.timetable { margin-top: clamp(32px, 4vw, 46px); }
.tt__head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  padding: 0 clamp(14px, 2vw, 22px) 12px;
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pink);
  border-bottom: 1px solid rgba(255, 242, 249, 0.16);
}
.tt__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  padding: clamp(16px, 2vw, 21px) clamp(14px, 2vw, 22px);
  border-bottom: 1px solid rgba(255, 242, 249, 0.09);
  align-items: baseline;
}
.tt__time {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: -0.04em;
  color: var(--led);
  display: flex;
  gap: 2px;
  perspective: 200px;
}
/* Board times reuse the flap, minus the cell chrome — the row is the board. */
.tt__time .cell {
  --cell-w: 15px;
  height: 1.35em;
  font-size: inherit;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.tt__time .cell::after { display: none; }
.tt__title {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--led);
}
.tt__note { margin-top: 7px; font-size: 15px; line-height: 1.5; color: var(--led-2); max-width: 62ch; }
.tt__foot {
  margin-top: 20px;
  padding: 0 clamp(14px, 2vw, 22px);
  font-size: 14px;
  color: var(--led-3);
}

/* --------------------------------------------------------------------------
   Station (venue)
   -------------------------------------------------------------------------- */

.venue { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: 20px; }
.venue__top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; }
.venue__film {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 2px solid var(--pink);
}
.venue__film iframe { width: 100%; height: 100%; }
.facilities { display: flex; flex-direction: column; gap: 12px; }
.facility {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  padding: 17px 19px;
  background: var(--ink-2);
  border-radius: var(--r-card);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--led-2);
}
.facility svg { width: 20px; height: 20px; color: var(--pink); margin-top: 2px; }
.venue__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--pink);
  text-decoration: none;
  padding: 6px 0;
}
.venue__link svg { width: 20px; height: 12px; }
@media (hover: hover) and (pointer: fine) { .venue__link:hover { color: var(--led); } }

.venue__bottom { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; }
.venue__map { border-radius: var(--r-card); overflow: hidden; min-height: 300px; background: var(--ink-2); }
.venue__map iframe { width: 100%; height: 100%; min-height: 300px; }
.getting { background: var(--ink-2); border-radius: var(--r-card); padding: clamp(22px, 2.6vw, 30px); }
.getting__h {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--led);
}
.getting__addr { margin-top: 15px; font-size: 15.5px; line-height: 1.65; color: var(--led-2); }
.getting__addr .jp { font-family: var(--font-jp); font-weight: 700; }
.getting__walk {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 242, 249, 0.12);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--led-2);
}
.getting__walk .roundel {
  width: 38px; height: 38px;
  font-size: 10.5px;
  background: transparent;
  color: var(--pink);
  border-width: 2px;
}

/* --------------------------------------------------------------------------
   Crew
   -------------------------------------------------------------------------- */

.crew { margin-top: clamp(32px, 4vw, 48px); }
.crew__lead {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
  padding-bottom: clamp(28px, 3.4vw, 40px);
  border-bottom: 2px solid var(--text);
}
.crew__rest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0 clamp(28px, 4vw, 52px);
}
.person { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 20px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.person__photo { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; background: var(--rule-soft); }
.crew__lead .person__photo { width: 132px; height: 132px; }
.person__name {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text);
}
.crew__lead .person__name { font-size: clamp(28px, 3.4vw, 42px); }
.person__role {
  margin-top: 7px;
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--pink-ink);
}
.person__bio { margin-top: 12px; font-size: 15.5px; line-height: 1.58; color: var(--text-2); max-width: 62ch; }
.person__link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--blue-ink);
  text-decoration: none;
}
.person__link svg { width: 18px; height: 11px; }

/* --------------------------------------------------------------------------
   Connections (partners)
   -------------------------------------------------------------------------- */

.conn { margin-top: clamp(30px, 4vw, 44px); }
.conn__group + .conn__group { margin-top: clamp(34px, 4vw, 50px); }
.conn__label {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.conn__row {
  padding-top: clamp(22px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(26px, 4vw, 52px);
}
.conn__row img { width: auto; }
.conn__row--lead img { height: clamp(72px, 9vw, 104px); }
.logo-wills { height: 76px; }
.logo-jalt  { height: 58px; }
.logo-iafor { height: 52px; border-radius: 4px; }
.logo-upou  { height: 64px; }
.logo-isco  { height: 40px; }
.logo-istar { height: 56px; }
.chip { background: var(--ink); border-radius: var(--r-card); padding: 10px 14px; display: inline-flex; }
.conn__note { margin-top: clamp(24px, 3vw, 32px); font-size: 14.5px; color: var(--text-2); }
.conn__note b { font-family: var(--font-sign); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); display: block; margin-bottom: 5px; }

/* --------------------------------------------------------------------------
   Passenger information (FAQ)
   -------------------------------------------------------------------------- */

.faq { margin-top: clamp(30px, 4vw, 44px); }
.q { border-top: 1px solid var(--rule); }
.q:last-child { border-bottom: 1px solid var(--rule); }
.q__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .q__btn:hover { color: var(--pink-ink); } }
.q__mark {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--rule);
  border-radius: 50%;
  color: var(--pink-ink);
  transition: transform 300ms var(--ease-out), border-color 200ms var(--ease-out);
}
.q__mark svg { width: 13px; height: 13px; }
.q[data-open='true'] .q__mark { transform: rotate(180deg); border-color: var(--pink); }
.q__panel { padding: 0 60px 26px 0; }
.q__panel p { font-size: 16.5px; line-height: 1.68; color: var(--text-2); max-width: 68ch; }

/* Shared collapse animation for both accordions */
.collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 340ms var(--ease-out), opacity 240ms var(--ease-out);
}
.collapse > * { overflow: hidden; min-height: 0; }
.collapse[data-collapsed='true'] { grid-template-rows: 0fr; opacity: 0; }

/* --------------------------------------------------------------------------
   Final call
   -------------------------------------------------------------------------- */

.final { background: var(--pink); color: var(--ink); text-align: center; }
.final__h {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(42px, 7.4vw, 104px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
  /* ink, not white: white on this pink is 2.64:1 and fails even large-text AA */
  color: var(--ink);
}
.final__note {
  margin: 26px auto 0;
  max-width: 56ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: rgba(12, 21, 38, 0.86);
}
.final .btn { margin-top: 34px; }

/* --------------------------------------------------------------------------
   Operator footer
   -------------------------------------------------------------------------- */

.foot { background: var(--ink); color: var(--led); padding: clamp(46px, 5vw, 68px) var(--pad-x) clamp(96px, 9vw, 120px); }
.foot__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.foot__name {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.foot__line { margin-top: 14px; height: 3px; width: 64px; background: var(--pink); }
.foot__body { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--led-2); max-width: 56ch; }
.foot__addr { margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--led-3); }
.foot__addr .jp { font-family: var(--font-jp); font-weight: 700; }
.foot__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.foot__copy { font-family: var(--font-data); font-size: 10px; letter-spacing: 0.08em; color: var(--led-3); text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Theme song — the on-board announcement
   -------------------------------------------------------------------------- */

.player {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 70;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.player.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 20px 9px 9px;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(12, 21, 38, 0.42);
}
.player__btn {
  width: 44px; height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--pink);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.player__btn svg { width: 15px; height: 15px; }
.player__btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .player__btn:hover { background: var(--white); } }
.player__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.player__t {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--led);
  white-space: nowrap;
}
.player__s { font-family: var(--font-data); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--led-3); white-space: nowrap; }
.player__bar { width: 74px; height: 3px; background: rgba(255, 242, 249, 0.18); border-radius: 2px; overflow: hidden; flex: none; }
.player__fill {
  height: 100%;
  width: 100%;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms linear;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__pitch { grid-template-columns: 1fr; align-items: start; gap: 30px; }
  .operator { grid-template-columns: 160px minmax(0, 1fr); }
  .operator__logo { width: 160px; }
  .venue__top, .venue__bottom { grid-template-columns: 1fr; }
  .ticket { grid-template-columns: 1fr; }
  .ticket__stub { border-left: 0; border-top: 2px dashed var(--text); flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
}

@media (max-width: 860px) {
  :root { --hero-gap: 16px; }

  /* Once the pitch stacks, the hero has to give the apply action room to land
     inside the first viewport. */
  .hero { padding-top: 8px; }
  .hero__operator { margin-bottom: 8px; }
  .hero__logo { width: 108px; }
  .plate { padding-top: 12px; }
  .plate__num { width: 46px; height: 46px; font-size: 13px; border-width: 3px; }
  .plate__meta { font-size: 10.5px; line-height: 1.7; }
  .plate__name { font-size: clamp(32px, 9.4vw, 40px); margin-top: 10px; }
  .plate__kana { font-size: 14px; margin-top: 6px; }
  .plate__adj { margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
  .hero__h1 { font-size: 34px; }
  .hero__sub { margin-top: 12px; font-size: 16px; }
  .hero__pitch { padding-bottom: 18px; gap: 18px; }
  .hero__act { gap: 10px; }

  /* The strip map keeps its form and scrolls, exactly as a real one does. */
  .nav__inner { gap: 14px; }
  .strip {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* the map is scrollable: fade the edge so truncation reads as more map */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  }
  .strip::-webkit-scrollbar { display: none; }
  .strip__track { justify-content: flex-start; gap: 30px; min-width: max-content; }
  .nav__mark { font-size: 18px; }
  .nav__apply { padding: 10px 15px; font-size: 14px; }
  .nav__apply .btn-label { display: none; }

  .crew__lead { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
  .crew__lead .person__photo { width: 96px; height: 96px; }
  .foot__inner { grid-template-columns: 1fr; }
  .foot__right { text-align: left; align-items: flex-start; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .station { grid-template-columns: 52px 40px minmax(0, 1fr); gap: 0 12px; }
  .onward { grid-template-columns: 52px 40px minmax(0, 1fr); gap: 0 12px; }
  .station__year { font-size: 14px; padding-top: 19px; }
  .station__btn { padding: 15px 12px; }
  .station__panel { padding: 0 12px 20px; }
  .plate { padding-left: 18px; padding-right: 18px; }
  .plate__adj { grid-template-columns: 1fr; gap: 12px; text-align: left; margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .adj--next { justify-content: flex-start; text-align: left; }
  .plate__adj .adj-sep { display: none; }
  .trow { grid-template-columns: 1fr; gap: 5px; }
  .tt__row, .tt__head { grid-template-columns: 1fr; gap: 6px; }
  .tt__head { display: none; }
  .person { grid-template-columns: 60px minmax(0, 1fr); gap: 16px; }
  .person__photo { width: 60px; height: 60px; }
  .q__panel { padding-right: 0; }
  /* On a phone the player must not sit on top of the copy it shares a corner
     with: drop the progress bar and keep the control plus its state. */
  .player { right: 10px; bottom: 10px; gap: 10px; padding: 6px 14px 6px 6px; }
  .player__bar { display: none; }
  .player__btn { width: 38px; height: 38px; }
  .player__t { font-size: 12px; }
  .clock { gap: 8px; }
  .cell { --cell-w: 25px; }
}

/* --------------------------------------------------------------------------
   Short viewports

   Laptops are the common desktop case and their usable height is well under
   900px. The apply action has to reach the first viewport there too, so the
   hero scales to the height available, not just the width.
   -------------------------------------------------------------------------- */

@media (min-width: 861px) and (max-height: 960px) {
  :root { --hero-gap: 22px; }
  .hero { padding-top: 12px; }
  .hero__operator { margin-bottom: 10px; }
  .hero__logo { width: clamp(130px, 11vw, 160px); }
  .plate { padding-top: 16px; }
  .plate__num { width: 58px; height: 58px; font-size: 15px; }
  .plate__name { font-size: clamp(40px, 6.4vw, 78px); margin-top: 10px; }
  .plate__kana { font-size: 19px; margin-top: 8px; }
  .plate__adj { margin-top: 14px; padding-top: 12px; padding-bottom: 12px; }
  .hero__pitch { padding-bottom: 22px; }
  .hero__h1 { font-size: clamp(38px, 4.6vw, 60px); }
  .hero__sub { margin-top: 14px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — keep meaning, drop movement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cell.is-flipping { animation: none; }
  .collapse { transition: opacity 200ms linear; }
  .anthem__a, .anthem__b { animation: none !important; transform: none; opacity: 1; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Additions from the finish review
   -------------------------------------------------------------------------- */

/* Skip link — ten tab stops precede the content on every load without it. */
.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--led);
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: var(--r-panel);
  transition: top 180ms var(--ease-out);
}
.skip:focus-visible { top: 12px; }

/* The nameplate carries the event, not only the room it happens in. */
.plate__name b {
  display: block;
  margin-top: 0.06em;
  font-weight: 700;
  font-size: 0.42em;
  letter-spacing: -0.015em;
  color: var(--pink-ink);
}

/* The divider between previous and next stop, as drawn on a real plate. */
.adj-sep {
  display: block;
  width: 2px;
  height: 34px;
  background: var(--rule);
}

/* Partner note: the ampersand line is its own block, not a run-on. */
.conn__note span { display: block; }

/* --------------------------------------------------------------------------
   The previous service — Future Hub Forum 2023 and its published report
   -------------------------------------------------------------------------- */

/* Screens take a pink frame, paper objects take an ink one — the distinction
   holds across the venue film, the timeline films and the report cover. */
.prev__film { margin: clamp(28px, 3.6vw, 42px) 0 0; }
.prev__film-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 2px solid var(--pink);
  background: var(--cream);
}
.prev__film-frame iframe { width: 100%; height: 100%; }
.prev__film-cap {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

.prev {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

/* The report is treated as a physical object on the platform, framed the same
   way the nameplate and the ticket are. */
.prev__cover {
  margin: 0;
  /* the object stays alongside the findings instead of leaving a void */
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  border: 2px solid var(--text);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--cream);
}
.prev__cover img { width: 100%; height: auto; }

.prev__intro {
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--text-2);
}

.prev__title {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px solid var(--text);
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text);
}
.prev__by {
  margin-top: 10px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--text-2);
}

.prev__lead {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.findings { margin-top: 12px; display: grid; }
.finding {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text);
}
.finding:last-child { border-bottom: 1px solid var(--rule-soft); }
.finding__mark { width: 26px; height: 26px; display: grid; place-items: center; color: var(--pink-ink); }
.finding__mark svg { width: 22px; height: 22px; }

.prev__note {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
}

.prev__body .btn { margin-top: 26px; }
.prev__link-note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-2);
}

/* The thread back to 2026: this is the proof the format carries people forward. */
.prev__thread {
  margin-top: clamp(34px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 2px solid var(--text);
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 30ch;
}

@media (max-width: 860px) {
  .prev { grid-template-columns: 1fr; gap: 28px; }
  .prev__cover { max-width: 340px; position: static; }
}