:root {
  --ink: #050607;
  --paper: #eeeae2;
  --smoke: #979995;
  --cyan: #16d7c2;
  --cyan-soft: #8dfff4;
  --violet: #8870a2;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

body {
  font-family: Georgia, "Times New Roman", serif;
}

button, .maker {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.skip {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 50;
  background: var(--paper);
  color: var(--ink);
  padding: 0.8rem 1rem;
}

.skip:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--ink);
}

.webgl, .css3d {
  position: absolute;
  inset: 0;
}

.webgl { z-index: 0; }

.css3d {
  z-index: 2;
  pointer-events: none;
}

#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #05060700 0%, #05060799 22%, #0506078c 58%, #05060700 92%),
    linear-gradient(#05060700 10%, #05060740 50%, #05060700 90%);
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

body:not([data-stop="0"]):not([data-stop="6"]) #stage::after { opacity: 1; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.film {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, transparent 18%, #05060755 62%, #050607ee 100%),
    linear-gradient(90deg, #05060788, transparent 18%, transparent 82%, #05060788);
}

/****************************************
************ Chrome *********************
****************************************/

.topbar {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.1rem clamp(1rem, 3vw, 3rem);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(#050607e8, transparent);
}

.maker {
  color: var(--paper);
  text-decoration: none;
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.maker {
  min-height: 44px;
  width: fit-content;
  justify-self: start;
  pointer-events: auto;
  transition: opacity 0.25s;
}

.maker:hover,
.maker:focus-visible {
  opacity: 0.8;
}

.maker:hover span,
.maker:focus-visible span {
  border-color: var(--cyan);
}

.maker span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #606566;
  color: var(--cyan);
}

.topbar p {
  margin: 0;
  color: #7f8482;
}

.topbar button {
  justify-self: end;
  color: #8b908f;
  background: none;
  border: 0;
  padding: 0.7rem;
  font: inherit;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.topbar button:hover,
.topbar button:focus-visible {
  color: var(--paper);
  outline: 1px solid #5f6765;
}

.progress {
  position: fixed;
  z-index: 30;
  left: clamp(0.8rem, 2.4vw, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  color: #666b69;
  font: 600 0.59rem ui-monospace, Menlo, Consolas, monospace;
}

.progress i {
  position: relative;
  width: 1px;
  height: 34vh;
  background: #2c302f;
}

.progress b {
  position: absolute;
  inset: 0 0 auto;
  height: 0;
  background: linear-gradient(var(--cyan-soft), var(--cyan), var(--violet));
  box-shadow: 0 0 12px #16d7c280;
  transition: height 0.8s var(--ease);
}

.coordinate {
  position: fixed;
  z-index: 30;
  right: 3vw;
  bottom: 5.2rem;
  margin: 0;
  color: #616765;
  font: 600 0.58rem ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.controls {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.controls button {
  color: var(--cyan);
  background: #080a0bcc;
  border: 1px solid #245e58;
  padding: 0.75rem 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.62rem;
  cursor: pointer;
}

.controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

.controls button:focus-visible,
.controls button:hover:not(:disabled) {
  color: var(--paper);
  border-color: var(--cyan);
}

#instruction {
  margin: 0;
  min-width: 14rem;
  text-align: center;
  color: #777d7a;
  font: 600 0.58rem ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/****************************************
************ Prologue and coda **********
****************************************/

.prologue, .coda {
  position: fixed;
  z-index: 12;
  pointer-events: none;
  transition: opacity 0.7s var(--ease);
}

.prologue {
  left: clamp(3.2rem, 9vw, 8rem);
  top: 50%;
  transform: translateY(-54%);
  width: min(620px, 62vw);
  opacity: 1;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: linear-gradient(90deg, #050607e6 0%, #050607b3 32%, #05060700 62%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

body[data-stop="0"]::after { opacity: 1; }

body:not([data-stop="0"]) .prologue,
body[data-stop="0"]:not(.settled) .prologue { opacity: 0; }

.eyebrow {
  margin: 0;
  color: var(--cyan);
  font: 600 0.66rem/1.4 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.prologue h1 {
  margin: 1.4rem 0 0;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(3.6rem, 7.4vw, 7.2rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.025em;
}

.prologue h1 em {
  font-style: normal;
  color: var(--smoke);
}

.subtitle {
  margin: 2rem 0 0;
  color: #b8bab5;
  font: italic clamp(1.1rem, 1.7vw, 1.4rem)/1.35 Georgia, serif;
}

.prologue blockquote {
  margin: 1.8rem 0 0;
  max-width: 34rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--cyan);
  color: #8b908d;
  font: italic 1rem/1.7 Georgia, serif;
}

.coda {
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  background: linear-gradient(#05060700, #05060788 30%, #050607cc);
}

body[data-stop="6"].settled .coda {
  opacity: 1;
  pointer-events: auto;
}

.coda > div {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 0 1.5rem;
}

.coda-note {
  margin: 2.2rem 0 0;
  max-width: 22em;
  color: var(--paper);
  font: 400 clamp(1.55rem, 3.1vw, 2.5rem)/1.28 Georgia, serif;
  letter-spacing: -0.015em;
  text-wrap: balance;
  text-shadow: 0 2px 26px #050607;
}

.coda blockquote {
  margin: 2.6rem 0 0;
  max-width: 26em;
  padding-top: 1.6rem;
  border-top: 1px solid #ffffff22;
  color: #9ea39f;
  font: italic clamp(1rem, 1.5vw, 1.2rem)/1.5 Georgia, serif;
  text-wrap: balance;
}

.coda-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.2rem;
  margin-top: 2.2rem;
}

#backToSite {
  color: var(--paper);
  border-bottom-color: #ffffff55;
}

.coda a {
  color: var(--cyan);
  text-decoration: none;
  font: 600 0.65rem ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cyan);
  padding-bottom: 0.4rem;
  pointer-events: auto;
}

/****************************************
************ Billboards *****************
****************************************/

.board {
  --accent: var(--cyan);
  width: 760px;
  padding: 56px 64px 52px;
  color: var(--paper);
  text-shadow: 0 2px 22px #050607, 0 0 3px #050607;
  background: radial-gradient(ellipse 80% 72% at 45% 50%, #050607e0 0%, #050607b0 58%, #05060700 100%);
}

.board-violet { --accent: #a48fbd; }

.board-kicker {
  margin: 0;
  color: var(--accent);
  font: 600 13px/1.4 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.board h2 {
  margin: 18px 0 0;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 68px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.board h2 em {
  font-style: normal;
  color: var(--smoke);
}

.board-question {
  margin: 24px 0 0;
  max-width: 30em;
  color: #c2c5c0;
  font: italic 25px/1.35 Georgia, serif;
  text-wrap: balance;
}

.board-lines {
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: 1px solid var(--accent);
}

.board-line {
  margin: 0;
  padding-left: 58px;
  text-indent: -58px;
  color: #a6aba7;
  font: italic 18px/1.6 Georgia, serif;
}

.board-line + .board-line { margin-top: 8px; }

.board-line span,
.board-fact {
  display: inline-block;
  width: 52px;
  text-indent: 0;
  color: var(--accent);
  font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.board-fact {
  width: auto;
  margin: 18px 0 0;
  color: #858a87;
}

.board-carried {
  margin: 22px 0 0;
  color: var(--accent);
  font: 600 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Phones and narrow windows: a narrower board, scaled up by the script */
.board-narrow {
  width: 400px;
  padding: 40px 28px 36px;
  background: radial-gradient(ellipse 95% 85% at 50% 50%, #050607e8 0%, #050607c0 62%, #05060700 100%);
}

.board-narrow .board-kicker { font-size: 12px; }
.board-narrow h2 { font-size: 50px; margin-top: 14px; }
.board-narrow .board-question { font-size: 22px; margin-top: 20px; }
.board-narrow .board-lines { margin-top: 22px; padding-left: 14px; }
.board-narrow .board-line { font-size: 17px; padding-left: 52px; text-indent: -52px; }
.board-narrow .board-line span { width: 46px; }
.board-narrow .board-fact { width: auto; margin-top: 14px; font-size: 11px; letter-spacing: 0.1em; }
.board-narrow .board-carried { font-size: 11px; letter-spacing: 0.14em; margin-top: 20px; }

/* Phones and narrow windows: the chapter text is ordinary page text, so it stays crisp and centred */
.mboard { display: none; }

body.narrow .mboard {
  --accent: var(--cyan);
  display: block;
  position: fixed;
  z-index: 12;
  left: 50%;
  top: 47%;
  width: min(92vw, 460px);
  padding: 1.8rem 1.5rem 1.6rem;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  color: var(--paper);
  text-shadow: 0 2px 18px #050607, 0 0 3px #050607;
  background: radial-gradient(ellipse 100% 90% at 50% 50%, #050607ea 0%, #050607c4 62%, #05060700 100%);
  transition: opacity 0.7s var(--ease);
}

body.narrow .mboard.show { opacity: 1; }
body.narrow .mboard.board-violet { --accent: #a48fbd; }

.mboard .board-kicker {
  margin: 0;
  color: var(--accent);
  font: 600 0.72rem/1.4 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mboard h2 {
  margin: 0.8rem 0 0;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(2.6rem, 13vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mboard h2 em { font-style: normal; color: var(--smoke); }

.mboard .board-question {
  margin: 1.1rem 0 0;
  color: #c9ccc7;
  font: italic clamp(1.15rem, 5vw, 1.4rem)/1.38 Georgia, serif;
}

.mboard .board-lines {
  margin: 1.3rem 0 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--accent);
}

.mboard .board-line {
  margin: 0;
  padding-left: 3.4rem;
  text-indent: -3.4rem;
  color: #aeb2ae;
  font: italic clamp(1rem, 4.2vw, 1.15rem)/1.5 Georgia, serif;
}

.mboard .board-line + .board-line { margin-top: 0.5rem; }

.mboard .board-line span {
  display: inline-block;
  width: 3rem;
  text-indent: 0;
  color: var(--accent);
  font: 600 0.65rem/1 ui-monospace, Menlo, Consolas, monospace;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mboard .board-fact {
  margin: 0.9rem 0 0;
  color: #858a87;
  font: 600 0.65rem/1.4 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mboard .board-carried {
  margin: 1.2rem 0 0;
  color: var(--accent);
  font: 600 0.68rem/1.5 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reduce-motion .mboard { transition: none; }

.reduce-motion .noise { display: none; }
.reduce-motion .progress b,
.reduce-motion .prologue,
.reduce-motion .coda { transition: none; }

@media (max-width: 780px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar p { display: none; }
  .prologue { left: 3.2rem; width: calc(100vw - 4.4rem); }
  .prologue h1 { font-size: clamp(3.2rem, 16vw, 5rem); }
  body::after { background: linear-gradient(180deg, #05060700 10%, #050607cc 45%, #050607cc 75%, #05060700); }
  .coordinate { right: 1rem; bottom: 5.6rem; }
  .controls { width: calc(100% - 2rem); justify-content: space-between; }
  #instruction { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .noise { display: none; }
  .progress b, .prologue, .coda { transition: none; }
}