/* burnhamdash.co.uk. The game's two looks, one against the other (Web/README.md, The look): the HUD's salmon paper
   and near-black ink for everything said (HudKit.Paper, HudKit.Ink, HudKit.Ivory, HubPubHud.NameColour), lettered in
   Montserrat Bold for what is pressed and Cormorant Garamond for what is said, and the run's fog, night and old
   television breaking in over it. Downing Street at sunset is the one warm band. No eyebrows or labels over headings. */

@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("/media/fonts/montserrat-bold.woff?v=6949048bed") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("/media/fonts/cormorant-semibold.woff?v=8ff149758b") format("woff"); }
@font-face { font-family: "VT323"; font-weight: 400; font-display: block; src: url("/media/fonts/vt323.woff?v=7d23c5b115") format("woff"); }

:root {
  --paper: #FFE8D8;
  --paper-deep: #FFCFAE;
  --ink: #211F1F;
  --ink-soft: #574B46;
  --rule: rgba(33, 31, 31, .22);
  --claret: #8E3330;
  --ivory: #F0E8DA;
  --yellow: #F2CB45;
  --night: #131315;
  --night-2: #1C1C20;
  --fog: #A9A8AC;
  --amber: #FFB01F;
  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --wide: 1240px;
  --gutter: clamp(18px, 4.5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 600 1.3rem/1.5 var(--serif); font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--claret); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 900px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--ivory); padding: .5em 1em; font: 700 .8rem var(--sans); }
.skip:focus { left: 8px; }

/* Headings that are pressed: Montserrat capitals, spaced as the HUD's keys are. */
.caps, .bar a, .btn, .road h2, .road h3, .sunset h2, .press h2, .faq h2, .facts dt, .release-on, .foot nav {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
}

/* The bar: nothing but the way round, over the film. */
.bar { position: absolute; inset: 0 0 auto; z-index: 10; padding: 18px var(--gutter); }
.bar nav { display: flex; justify-content: flex-end; gap: clamp(14px, 3vw, 34px); max-width: var(--wide); margin: 0 auto; }
.bar a { color: var(--ivory); font-size: .72rem; text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.bar a:hover { color: var(--yellow); }

/* The hero: the run on the old television, the fog rolling over its foot onto the paper. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--ivory); background: var(--night);
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 96px 0 clamp(150px, 26vh, 260px);
}
.hero-poster img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.hero-video { opacity: 0; transition: opacity .6s; }
.hero-video.playing { opacity: 1; }
.hero-crt {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(90deg, rgba(10, 10, 12, .78) 0%, rgba(10, 10, 12, .45) 38%, transparent 70%);
}
.hero-words { position: relative; width: 100%; }
.title { display: flex; flex-direction: column; gap: .1em; }
.title-name {
  font: 700 clamp(3.1rem, 10.5vw, 8.6rem)/.92 var(--sans); text-transform: uppercase; letter-spacing: .1em;
  max-width: 7.5em; text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.title-sub { font: 600 clamp(1.9rem, 4.4vw, 3.4rem)/1 var(--serif); color: var(--yellow); letter-spacing: .01em; }
.hero-line { max-width: 31ch; margin: 1.1em 0 1.4em; font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.3; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }

/* The release date as a Bee Network bus's destination blind: amber dots on black. */
.release { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.blind {
  display: inline-flex; gap: 6px; padding: 6px; background: #070707; border-radius: 7px;
  box-shadow: 0 0 0 3px #2B2B2E, 0 14px 34px rgba(0, 0, 0, .5);
}
.blind span {
  position: relative; display: block; padding: .14em .42em .04em; background: #110B03; border-radius: 3px;
  font: 400 clamp(2.2rem, 6vw, 3.3rem)/1 "VT323", ui-monospace, monospace; letter-spacing: .08em;
  color: var(--amber); text-shadow: 0 0 4px rgba(255, 150, 20, .9), 0 0 14px rgba(255, 140, 10, .45);
}
.blind span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle, transparent 0 46%, rgba(7, 5, 2, .62) 58%) 0 0 / 4px 4px;
}
.blind-route { min-width: 2.2ch; text-align: center; }
.release-on { margin: 0; font-size: .74rem; color: var(--ivory); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* The fog: the run's mist lying over the foot of the film and thinning into paper. */
.fog {
  position: absolute; inset: auto 0 0; height: clamp(170px, 30vh, 300px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(169, 168, 172, 0) 0%, rgba(176, 172, 172, .72) 45%, rgba(236, 214, 200, .96) 78%, var(--paper) 100%);
}
.fog i {
  position: absolute; left: -30%; width: 160%; height: 130%; bottom: -10%; border-radius: 50%; opacity: .55;
  background: radial-gradient(50% 50% at 50% 50%, rgba(214, 208, 206, .9), rgba(214, 208, 206, 0) 70%);
  filter: blur(18px); animation: drift 38s ease-in-out infinite alternate;
}
.fog i:nth-child(2) { bottom: 6%; left: -55%; opacity: .4; animation-duration: 53s; animation-delay: -20s; }
.fog i:nth-child(3) { bottom: -30%; left: -10%; opacity: .6; animation-duration: 71s; animation-direction: alternate-reverse; }
@keyframes drift { to { transform: translateX(22%); } }

/* Breaking News: the game's notification, glass over the film, dropping in once. */
.notice {
  position: absolute; z-index: 5; top: 64px; left: 50%; width: min(92vw, 400px); display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border-radius: 22px; color: #fff; transform: translate(-50%, -160%); opacity: 0;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35); cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  transition: transform .55s cubic-bezier(.2, .9, .25, 1.15), opacity .4s;
}
.notice.in { transform: translate(-50%, 0); opacity: 1; }
.notice img { border-radius: 9px; flex: none; }
.notice p { margin: 0; font-size: .9rem; line-height: 1.3; letter-spacing: -.01em; }
.notice-head { display: flex; justify-content: space-between; }
.notice-head span { opacity: .7; font-size: .8rem; }

/* Andy on the red BusBall, running on the spot where the fog meets the paper (the loading animation's drawings). */
.story { position: relative; padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 120px); }
.runner {
  position: absolute; right: clamp(18px, 9vw, 140px); top: -204px; display: block; width: 124px; height: 210px; padding: 0; border: 0;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sprite {
  display: block; width: 124px; height: 210px; image-rendering: pixelated; image-rendering: crisp-edges;
  background: url("/media/busball.png?v=337d2ad07e") 0 0 / 1984px 630px no-repeat;
  animation: run .667s steps(8) infinite;
}
.runner.flip .sprite { background-position-y: -210px; animation: flip 1.333s steps(16) 1; }
.runner.teeter .sprite { background-position-y: -420px; animation: teeter 1.167s steps(14) infinite; }
@keyframes run { from { background-position-x: 0; } to { background-position-x: -992px; } }
@keyframes flip { from { background-position-x: 0; } to { background-position-x: -1984px; } }
@keyframes teeter { from { background-position-x: 0; } to { background-position-x: -1736px; } }

/* The story: a broadsheet's page. */
.lede {
  max-width: 21ch; padding-top: 22px; border-top: 4px solid var(--ink);
  font: 600 clamp(2.1rem, 4.8vw, 3.9rem)/1.06 var(--serif); letter-spacing: -.01em;
}
.columns { margin-top: clamp(28px, 4vw, 48px); padding-top: 18px; border-top: 1px solid var(--rule); }
.columns p { break-inside: avoid-column; hyphens: auto; }
.columns p:first-child::first-letter {
  float: left; margin: .06em .1em -.1em 0; font: 700 4.4em/.8 var(--serif); color: var(--claret);
}
@media (min-width: 760px) { .columns { column-count: 2; column-gap: 44px; column-rule: 1px solid var(--rule); } }
@media (min-width: 1120px) { .columns { column-count: 3; } }

/* The road: the run's night, every picture on the old television. */
.road { background: var(--night); color: var(--ivory); padding: clamp(60px, 9vw, 120px) 0; }
.shot { position: relative; margin: 0; overflow: hidden; background: #000; }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .5) 100%);
}
.road-lead { display: grid; gap: 28px 56px; align-items: end; margin-bottom: clamp(48px, 7vw, 88px); }
.road-lead h2 { font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.1; color: var(--yellow); margin-bottom: .6em; }
.road-lead p { font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.35; max-width: 26ch; }
@media (min-width: 900px) { .road-lead { grid-template-columns: 1.55fr 1fr; } }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 28px; }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tiles h3 { margin: 22px 0 10px; font-size: .86rem; line-height: 1.4; }
.tiles h3::before { content: ""; display: block; width: 36px; height: 4px; margin-bottom: 14px; background: var(--yellow); }
.tiles p { font-size: 1.18rem; line-height: 1.42; color: rgba(240, 232, 218, .86); }

/* Downing Street at sunset: the one warm place, its words on a card of the HUD's paper. */
.sunset { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(92vh, 860px); padding: clamp(28px, 6vw, 72px) var(--gutter); }
.sunset > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.sunset::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(120, 50, 10, .45), rgba(255, 170, 60, 0) 55%); }
.card {
  max-width: 560px; padding: clamp(24px, 3.6vw, 40px); background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink);
}
.card h2 { font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.25; margin-bottom: .9em; color: var(--claret); }
.card p { font-size: 1.2rem; line-height: 1.45; }
.card p:last-child { margin: 0; }
@media (min-width: 1000px) { .sunset { padding-left: max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter))); } }

/* Press: for the people who write about it. */
.press { padding: clamp(64px, 9vw, 120px) 0; border-bottom: 1px solid var(--rule); }
.press-grid { display: grid; gap: 48px 72px; }
@media (min-width: 960px) { .press-grid { grid-template-columns: 1fr 1.1fr; } }
.press h2, .faq h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); padding-top: 18px; border-top: 4px solid var(--ink); margin-bottom: .8em; }
.press-words > p { max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6em 0; }
.btn {
  display: inline-flex; align-items: baseline; gap: .7em; padding: 15px 22px; font-size: .74rem; text-decoration: none;
  background: var(--ink); color: var(--ivory); border: 2px solid var(--ink); transition: transform .12s, box-shadow .12s;
}
.btn:hover { color: var(--yellow); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--claret); }
.btn-quiet { background: transparent; color: var(--ink); }
.btn-quiet:hover { color: var(--claret); }
.btn small { font-size: .62rem; letter-spacing: .1em; opacity: .7; white-space: nowrap; }
@media (min-width: 480px) { .btn { white-space: nowrap; } }
.press-mail { font-size: 1.15rem; }
.facts { margin: 0; border-top: 1px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: .64rem; padding-top: .55em; color: var(--ink-soft); }
.facts dd { margin: 0; font-size: 1.12rem; line-height: 1.35; }
@media (max-width: 480px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }

/* The studio: who made it, in the broadsheet's standfirst. */
.studio { padding: clamp(56px, 8vw, 104px) 0; background: var(--paper-deep); }
.studio-grid { display: grid; gap: 18px 72px; align-items: start; }
@media (min-width: 960px) { .studio-grid { grid-template-columns: 1fr 1.6fr; } }
.studio h2 { font: 700 clamp(1.5rem, 3.2vw, 2.4rem)/1.15 var(--sans); text-transform: uppercase; letter-spacing: .14em; padding-top: 18px; border-top: 4px solid var(--ink); }
.studio p { margin: 0; padding-top: 18px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; max-width: 34ch; }

/* Questions. */
.faq { padding: clamp(64px, 9vw, 120px) 0; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0;
  font-size: clamp(1.3rem, 2.3vw, 1.65rem); line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 1.3rem/1 var(--sans); color: var(--claret); transition: transform .2s; padding-top: .15em; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 60ch; padding-bottom: 8px; color: var(--ink-soft); }

/* Footer: ink. */
.foot { background: var(--ink); color: var(--ivory); padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 1.05rem; }
.foot .wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .foot .wrap { grid-template-columns: auto 1fr auto; align-items: start; } }
.foot img { border-radius: 14px; }
.foot p { max-width: 52ch; margin-bottom: .5em; }
.foot .small { font-size: .95rem; opacity: .7; }
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: .68rem; }
.foot nav a { text-decoration: none; }
.foot a:hover { color: var(--yellow); }

/* Plain pages: privacy, and the page that went into the fog. */
.plain { padding: 120px 0 90px; min-height: 70vh; }
.plain h1 { font: 600 clamp(2.2rem, 5vw, 3.6rem)/1.05 var(--serif); padding-top: 18px; border-top: 4px solid var(--ink); margin-bottom: .7em; }
.plain h2 { font: 700 .82rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .14em; margin: 2em 0 .8em; }
.plain p, .plain li { max-width: 62ch; }
.plain .bar { position: static; padding: 0; }
.plain-bar { background: var(--ink); }
.plain-bar .bar { position: static; }
.lost { position: relative; text-align: left; }
.lost .runner { position: relative; top: auto; right: auto; margin: 0 0 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fog i, .sprite { animation: none !important; }
  .notice { display: none; }
}