/* Station page: HUD, intro, question dock, finale.
   Wide windows dock the question on the right; anything narrower than 1100px
   (a half-screen window beside AXIOM) docks it along the bottom. */

/* The chart only exists once a case is open. */
body[data-view="boot"] :is(.nodes, .links, .link-labels, .reticle) { visibility: hidden; }
/* Behind the briefing the chart is a preview: no captions, no clicks. */
body[data-view="intro"] :is(.reticle, .link-labels) { visibility: hidden; }
body[data-view="intro"] .node { pointer-events: none; }
body[data-view="intro"] .node-cap { opacity: 0; }

/* ---------- controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 20px; border-radius: var(--r-control);
  font-weight: 650; font-size: 15px; letter-spacing: 0.005em; white-space: nowrap;
  transition: background-color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), color 0.18s var(--ease-out), translate 0.12s var(--ease-out);
}
.btn:active:not(:disabled) { translate: 0 1px; }
.btn .icon { width: 18px; height: 18px; }
.btn-signal { background: var(--signal); color: var(--signal-ink); }
.btn-signal:hover:not(:disabled) { background: var(--signal-hi); }
.btn-signal:disabled { background: var(--ink-4); color: var(--mute); }
.btn-ghost { background: transparent; color: var(--paper); border: 1px solid var(--ink-5); }
.btn-ghost:hover { border-color: var(--soft); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-control); color: var(--soft); border: 1px solid transparent;
  transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}
.icon-btn:hover { color: var(--paper); border-color: var(--ink-5); }
.icon-btn .icon { width: 19px; height: 19px; }

input {
  width: 100%; height: 50px; padding: 0 14px;
  background: var(--ink-1); color: var(--paper);
  border: 1px solid var(--ink-5); border-radius: var(--r-control);
  font-size: 16px;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
input:hover { border-color: #46557a; }
input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); outline: none; }
input[aria-invalid="true"] { border-color: var(--signal); }
input.mono { font-size: 16.5px; letter-spacing: 0.01em; }

label { display: block; margin-bottom: 8px; color: var(--soft); font-size: 13.5px; font-weight: 550; }

.field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }

.form-msg, .answer-msg {
  min-height: 1.4em; margin-top: 10px; font-size: 13.5px; color: var(--signal-hi);
}

.link-btn {
  margin-top: 18px; color: var(--soft); font-size: 13.5px;
  text-decoration: underline; text-decoration-color: var(--ink-5); text-underline-offset: 4px;
}
.link-btn:hover { color: var(--paper); text-decoration-color: var(--signal); }

/* ---------- HUD ---------- */

.hud {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-hud);
  height: 64px; padding: 0 16px 0 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 28px;
  background: linear-gradient(to bottom, rgba(10, 15, 30, 0.96) 55%, rgba(10, 15, 30, 0));
}
.hud-case { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hud-mark { width: 34px; height: auto; mix-blend-mode: screen; opacity: 0.92; }
.hud-casename { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; }
.hud-casename .mono { color: var(--mute); font-size: 12px; }
.hud-title { color: var(--paper); font-size: 15px; font-weight: 650; font-stretch: 92%; overflow: hidden; text-overflow: ellipsis; }

.hud-stats { display: flex; gap: 24px; margin: 0; }
.hud-stats div { display: grid; justify-items: start; }
.hud-stats dt { color: var(--mute); font-size: 11px; font-weight: 600; font-stretch: 85%; letter-spacing: 0.06em; text-transform: uppercase; }
.hud-stats dd { margin: 0; color: var(--paper); font-size: 19px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hud-of { color: var(--mute); font-weight: 500; }
.hud-level dd { display: flex; align-items: center; }
.hud-track { display: inline-grid; grid-auto-flow: column; gap: 4px; margin-left: 12px; }
.hud-track i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink-5); }
.hud-track i.on { background: var(--paper); border-color: var(--paper); }
.hud-track i.now { border-color: var(--signal); background: var(--signal-wash); }

.hud-who { display: flex; align-items: center; gap: 10px; }
.hud-who p { display: grid; justify-items: end; line-height: 1.2; }
.hud-name { color: var(--paper); font-weight: 650; font-size: 14px; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-badge { color: var(--mute); font-size: 11.5px; }

.popover {
  position: absolute; top: 60px; right: 14px; width: min(320px, calc(100vw - 28px));
  padding: 16px; border-radius: var(--r-panel);
  background: var(--ink-2); border: 1px solid var(--ink-4); box-shadow: var(--shadow-panel);
  color: var(--soft); font-size: 14px;
}
.popover-actions { display: flex; gap: 8px; margin-top: 14px; }
.popover-label { color: var(--mute); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-stretch: 88%; }
.resume-code { margin-top: 4px; color: var(--paper); font-size: 26px; font-weight: 700; letter-spacing: 0.12em; }
.popover-note { margin-top: 6px; color: var(--mute); font-size: 13px; line-height: 1.5; }
.popover-end { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink-4); color: var(--soft); }

/* ---------- intro ---------- */

.intro {
  position: fixed; inset: 0; z-index: var(--z-chrome);
  display: grid; align-content: center;
  padding: 96px clamp(20px, 6vw, 96px) 88px;
  align-content: safe center;   /* taller than the window: scroll, never clip the title */
  background: linear-gradient(90deg, rgba(10, 15, 30, 0.97) 0%, rgba(10, 15, 30, 0.86) 38%, rgba(10, 15, 30, 0.2) 72%, rgba(10, 15, 30, 0) 100%);
  overflow-y: auto;
}
.intro-brand {
  position: absolute; top: 22px; left: clamp(20px, 6vw, 96px);
  display: flex; align-items: center; gap: 10px;
  color: var(--paper); font-weight: 700; font-stretch: 110%; letter-spacing: 0.02em;
}
.intro-brand img { width: 34px; height: auto; mix-blend-mode: screen; }
.intro-inner { max-width: 600px; }
.intro-title {
  color: var(--paper);
  font-size: clamp(2.7rem, 5.6vw, 4.8rem); line-height: 0.98;
  font-weight: 820; font-stretch: 106%; letter-spacing: -0.025em;
  text-wrap: balance;
}
.intro-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; color: var(--mute); font-size: 13.5px; }
.intro-meta .mono { color: var(--signal-hi); font-size: 12.5px; }
.intro-brief { margin-top: 22px; max-width: 56ch; color: var(--soft); font-size: 16.5px; line-height: 1.62; }
/* How this works: three ghost leads joined by a link, read left to right. */
.howto { margin-top: 26px; }
.howto-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.howto-title { color: var(--paper); font-size: 15px; font-weight: 700; }
.howto-list {
  position: relative; list-style: none; counter-reset: howto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 16px 0 0; padding: 0;
}
.howto-list::before {
  content: ""; position: absolute; top: 14px; left: 14px; right: calc((100% - 36px) / 3 - 14px);
  border-top: 1px dashed var(--ink-5);
}
.howto-list li {
  counter-increment: howto;
  display: grid; gap: 10px; align-content: start;
  color: var(--soft); font-size: 14.5px; line-height: 1.5;
}
.howto-list li::before {
  content: counter(howto); position: relative;
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; border: 1.25px dashed var(--ink-5); background: var(--ink-1);
  color: var(--paper); font-size: 13px; font-weight: 650;
}
.howto-list b { color: var(--paper); font-weight: 650; }
.watch-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 16px 0 5px; border-radius: 99px;
  border: 1px solid var(--ink-5); color: var(--paper); font-size: 14px; font-weight: 600;
  transition: border-color 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}
.watch-btn .icon {
  box-sizing: content-box; width: 12px; height: 12px; padding: 7px;
  border-radius: 50%; background: var(--ink-3); color: var(--paper);
}
.watch-btn:hover { border-color: var(--soft); background: var(--ink-2); }

.intro-form { margin-top: 28px; max-width: 520px; }
.resume-input { text-transform: uppercase; letter-spacing: 0.14em; }
.form-help { margin-top: 9px; color: var(--mute); font-size: 13px; }
.intro-foot {
  position: absolute; left: clamp(20px, 6vw, 96px); right: 20px; bottom: 22px;
  max-width: 70ch; color: var(--mute); font-size: 12.5px;
}

/* ---------- badge reveal ---------- */

.badge-reveal {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-content: center; justify-items: center; gap: 10px;
  text-align: center; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 15, 30, 0.9), rgba(10, 15, 30, 0.55));
}
.badge-label { color: var(--mute); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-stretch: 88%; }
.badge-digits { color: var(--paper); font-size: clamp(4rem, 14vw, 9rem); font-weight: 700; letter-spacing: 0.06em; line-height: 1; }
.badge-note { color: var(--soft); font-size: 15px; }
.badge-sub { max-width: 44ch; color: var(--mute); font-size: 13.5px; line-height: 1.5; }

/* ---------- question dock ---------- */

.dock {
  position: fixed; z-index: var(--z-chrome);
  top: 76px; right: 18px; width: 430px; max-height: calc(100dvh - 94px);
  display: flex; flex-direction: column;
  background: rgba(16, 23, 45, 0.95); border: 1px solid var(--ink-4); border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;   /* the sticky answer bar keeps to the rounded corners */
}
.dock-scroll { --pad-x: 22px; overflow-y: auto; overscroll-behavior: contain; padding: 22px var(--pad-x) 0; }

.q-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.q-disc {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  border: 1.25px dashed var(--ink-5); background: var(--ink-1);
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--soft);
}
.q-disc .icon { width: 19px; height: 19px; }
.q-disc.is-solved { border-style: solid; border-color: var(--paper); background: var(--paper); color: var(--ink-1); }
.q-disc.is-locked { border-color: var(--ink-4); color: var(--mute); }
.q-disc.is-locked .icon { width: 16px; height: 16px; }

.q-locked { display: grid; justify-items: start; gap: 16px; }
.locked-line { display: flex; gap: 10px; align-items: flex-start; color: var(--soft); font-size: 15px; line-height: 1.55; }
.locked-icon { display: inline-grid; place-items: center; margin-top: 2px; color: var(--mute); }
.locked-icon .icon { width: 17px; height: 17px; }
.q-heading h2 { color: var(--paper); font-size: 21px; line-height: 1.2; font-weight: 700; font-stretch: 96%; letter-spacing: -0.01em; text-wrap: balance; }
.q-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; color: var(--mute); font-size: 13px; }
.q-meta [data-qworth] { color: var(--soft); font-variant-numeric: tabular-nums; }
.q-meta s { color: var(--mute); text-decoration-color: var(--signal); margin-right: 6px; }
.dock-toggle { display: none; margin: -4px -8px 0 0; }
.dock-toggle .icon { transition: rotate 0.25s var(--ease-out); }
.dock.is-collapsed .dock-toggle .icon { rotate: 180deg; }
.dock.is-collapsed .dock-body { display: none; }
.dock.is-collapsed .dock-scroll { padding-bottom: 16px; }

.dock-body { margin-top: 18px; }
.q-story { color: var(--mute); font-size: 14.5px; line-height: 1.55; }
.q-task { margin-top: 12px; color: var(--paper); font-size: 17px; line-height: 1.45; font-weight: 600; }
/* The answer bar holds to the bottom of the dock while the steps scroll past,
   so the box is always in reach. It settles into place once scrolled to. */
.answer {
  position: sticky; bottom: 0; z-index: 1;
  margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x));
  padding: 14px var(--pad-x) 14px;
  background: rgb(16, 23, 45); border-top: 1px solid var(--ink-4);
}
.q-open { padding-bottom: 24px; }
.q-locked, .finding { padding-bottom: 24px; }

/* Where to click in AXIOM: ghost discs that settle to paper once ticked off. */
.steps {
  margin-top: 16px; padding: 14px 14px 10px;
  border-radius: var(--r-control); background: var(--ink-1); border: 1px solid var(--ink-4);
}
.steps-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.steps-title { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); font-size: 14.5px; font-weight: 700; }
.steps-title .icon { width: 17px; height: 17px; color: var(--soft); vertical-align: 0; }
.steps-note { color: var(--mute); font-size: 12.5px; }
.steps-list { list-style: none; display: grid; gap: 2px; margin: 8px -6px 0; padding: 0; }
.step {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px; align-items: start;
  width: 100%; padding: 7px 6px; border-radius: 8px; text-align: left;
  color: var(--soft); font-size: 14.5px; line-height: 1.5;
  transition: background-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.step:hover { background: var(--ink-2); }
.step:focus-visible { outline-offset: 0; border-radius: 8px; }
.step-disc {
  display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px;
  border-radius: 50%; border: 1.25px dashed var(--ink-5);
  color: var(--paper); font-size: 12.5px; font-weight: 650;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.step-disc .icon { display: none; width: 13px; height: 13px; }
.step .ui-label { color: var(--paper); font-weight: 650; }
.step .mono { color: var(--paper); font-size: 0.93em; overflow-wrap: anywhere; }
.step[aria-pressed="true"] { color: var(--mute); }
.step[aria-pressed="true"] :is(.ui-label, .mono) { color: var(--soft); }
.step[aria-pressed="true"] .step-disc { border-style: solid; border-color: var(--paper); background: var(--paper); color: var(--ink-1); }
.step[aria-pressed="true"] .step-disc .icon { display: block; }
.step[aria-pressed="true"] .step-n { display: none; }
.steps-watch { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.steps-watch .icon { width: 15px; height: 15px; }

.answer { margin-top: 18px; }
.answer-label { color: var(--mute); font-size: 12.5px; letter-spacing: 0.02em; }
.answer-format { margin-top: 9px; color: var(--mute); font-size: 13px; }
.answer-msg { display: flex; gap: 8px; align-items: flex-start; }
.answer-msg:empty { display: none; }
.answer-msg .icon { margin-top: 2px; }

.aids { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.aid {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 13px; border-radius: var(--r-control);
  border: 1px solid var(--ink-5); color: var(--soft); font-size: 13.5px; font-weight: 550;
  transition: border-color 0.18s var(--ease-out), color 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}
.aid:hover:not(:disabled) { border-color: var(--soft); color: var(--paper); }
.aid:disabled { opacity: 0.45; }
.aid[aria-expanded="true"] { border-color: var(--signal-line); color: var(--paper); }
.aid.is-open { display: none; }
.aid .icon { width: 16px; height: 16px; }

.tip, .hints { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ink-4); }
.tip p { color: var(--soft); font-size: 14.5px; line-height: 1.6; }
.hints { list-style: none; display: grid; gap: 14px; }
.hints:empty { display: none; }
.hints li { overflow: hidden; }
.hints .hint-label { display: block; color: var(--mute); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-stretch: 88%; margin-bottom: 3px; }
.hints .hint-text { color: var(--paper); font-size: 14.5px; line-height: 1.55; }

.finding-head { display: flex; align-items: center; gap: 10px; color: var(--paper); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-stretch: 88%; }
.finding-check { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); color: var(--ink-1); }
.finding-check .icon { width: 14px; height: 14px; }
.finding-level { margin-left: auto; color: var(--signal-hi); }
.finding-value {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r-control);
  background: var(--ink-1); border: 1px solid var(--ink-4);
  color: var(--paper); font-size: 19px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
}
.finding-debrief { margin-top: 14px; color: var(--soft); font-size: 15px; line-height: 1.6; }
.finding-next { margin-top: 20px; width: 100%; justify-content: space-between; }
.finding-next span:first-child { overflow: hidden; text-overflow: ellipsis; }

/* ---------- case closed ---------- */

.closed {
  position: fixed; inset: 64px 0 0 0; z-index: var(--z-overlay);
  display: grid; align-content: center;
  padding: 24px clamp(20px, 5vw, 80px) 40px;
  background: linear-gradient(90deg, rgba(10, 15, 30, 0.97) 0%, rgba(10, 15, 30, 0.9) 34%, rgba(10, 15, 30, 0) 52%);
  overflow-y: auto;
  pointer-events: none;
}
.closed-inner { max-width: min(640px, 44vw); pointer-events: auto; }
.closed-title {
  color: var(--paper);
  font-size: clamp(3.2rem, 7.4vw, 7.6rem); line-height: 0.9;
  font-weight: 900; font-stretch: 118%; letter-spacing: -0.03em; text-transform: uppercase;
}
.closed-line { margin-top: 22px; max-width: 60ch; color: var(--soft); font-size: 17px; line-height: 1.6; }
.closed-stats { display: flex; flex-wrap: wrap; gap: 18px 48px; margin: 30px 0 0; }
.closed-stats dt { color: var(--mute); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-stretch: 88%; }
.closed-stats dd { margin: 2px 0 0; color: var(--paper); font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 750; font-variant-numeric: tabular-nums; }
.closed-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

/* ---------- idle check and banner ---------- */

.idle {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center; padding: 20px;
  background: rgba(6, 9, 20, 0.78);
}
.idle-card {
  max-width: 440px; padding: 26px; border-radius: var(--r-panel);
  background: var(--ink-2); border: 1px solid var(--ink-4); box-shadow: var(--shadow-panel);
}
.idle-card h2 { color: var(--paper); font-size: 22px; line-height: 1.25; font-weight: 700; }
.idle-card p { margin-top: 10px; color: var(--soft); }
.idle-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.banner {
  position: fixed; left: 50%; bottom: 20px; translate: -50% 0; z-index: var(--z-overlay);
  max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--r-control);
  background: var(--ink-3); border: 1px solid var(--signal-line); color: var(--paper); font-size: 14px;
}

/* ---------- the AXIOM intro video ---------- */

.film {
  width: min(1180px, calc(100vw - 32px), calc((100dvh - 150px) * 16 / 9 + 32px));
  max-width: none; max-height: none; margin: auto; padding: 14px 16px 16px;
  border-radius: var(--r-panel); background: var(--ink-2); border: 1px solid var(--ink-4); color: var(--soft);
}
.film::backdrop { background: rgba(6, 9, 20, 0.88); }
.film[open] { animation: film-in 0.4s var(--ease-out); }
@keyframes film-in { from { opacity: 0; translate: 0 12px; scale: 0.985; } }
.film-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.film-title { color: var(--paper); font-size: 17px; font-weight: 700; }
.film-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-control); background: var(--ink-1); }
.film-note { margin-top: 10px; color: var(--mute); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .film[open] { animation: none; }
}

/* ---------- narrower windows: dock along the bottom ---------- */

@media (max-width: 1099px) {
  .hud { gap: 16px; }
  .hud-title { display: none; }
  .dock {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 58dvh;
    border-radius: var(--r-panel) var(--r-panel) 0 0; border-bottom: 0;
  }
  .dock-scroll { --pad-x: 18px; padding: 16px var(--pad-x) 0; }
  .q-open, .q-locked, .finding { padding-bottom: 20px; }
  .dock-toggle { display: inline-grid; }
  .dock-body { margin-top: 14px; }
  .q-task { font-size: 16px; }
  .step { font-size: 14px; }
  .intro { background: rgba(10, 15, 30, 0.9); }
  .closed { align-content: end; background: linear-gradient(to top, rgba(10, 15, 30, 0.98) 0%, rgba(10, 15, 30, 0.9) 55%, rgba(10, 15, 30, 0) 70%); }
  .closed-inner { max-width: 640px; }
}

@media (max-width: 720px) {
  .hud { grid-template-columns: auto 1fr auto; padding: 0 10px 0 12px; }
  .hud-casename { display: none; }
  .hud-stats { gap: 16px; justify-self: center; }
  .hud-badge { display: none; }
  .hud-track { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .intro-foot { position: static; margin-top: 32px; }
  .intro { align-content: start; }
  .howto-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .howto-list::before { display: none; }
  .howto-list li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
}

/* Booth PCs at 125% scaling leave about 780px of height: tighten the intro so the name box shows. */
@media (max-height: 940px) and (min-width: 721px) {
  .intro { padding-top: 76px; padding-bottom: 32px; }
  .intro-title { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
  .intro-meta { margin-top: 14px; }
  .intro-brief { margin-top: 16px; font-size: 16px; line-height: 1.58; }
  .intro-foot { position: static; margin-top: 24px; }
}

@media (max-height: 640px) and (max-width: 1099px) {
  .dock { max-height: 64dvh; }
}