/* ═══════════════════════════════════════════════════════════════════════════
   THE RANGE — shared world
   Floodlit night photography, mercury vapour on wet tarmac, heavy grotesk.
   Four variations share this file; each page adds only its own demonstration.

   Anchor (unchanged from direction H): the driving range at eleven at night.
   Nobody under those lights is being entertained — they are hitting the same
   ball again to fix one thing. That is deliberate practice, and it is the one
   world in this category with real photographic weight.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Archivo carries the whole weight axis in one variable file, so the 800 the
   headings ask for costs nothing beyond the 400 the body already needs. The
   comp was set in Helvetica Neue, which only exists on Macs — it stays in the
   fallback chain, where it is a good match rather than the load-bearing face.
   Space Mono is already self-hosted for the app's own pages. */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #06090a;
  --night-2: #0b1214;
  --night-3: #101a1c;
  --mercury: #7fd6c4;
  --mercury-hot: #cffaee;
  --mercury-dim: #2f5f58;
  --text: #e6f2ef;
  --text-dim: #92a8a4;
  --hot: #ff6f60;

  --display: "Archivo", "Helvetica Neue", Helvetica, "Arial Black", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --figure: "Space Mono", Menlo, "SF Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
}
:focus-visible { outline: 2px solid var(--mercury); outline-offset: 3px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ── Opening bay ─────────────────────────────────────────────────────────── */
.opening {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  /* The hero is a variable so a page can swap it without touching this file.
     H1–H4 keep the original range shot for comparison; H5 sets its own. */
  background-color: #05080a;
  background-image: var(--hero, url("assets/range.jpg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.opening::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(4, 8, 9, 0.95) 0 14%, rgba(4, 8, 9, 0.34) 52%, rgba(4, 8, 9, 0.55)),
    radial-gradient(120% 80% at 50% 0%, rgba(127, 214, 196, 0.14), transparent 60%);
}
.opening > * { position: relative; z-index: 2; }
.opening-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px 58px; }

.mast {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 32px;
  display: flex;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
  font-family: var(--figure);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(230, 242, 239, 0.6);
}
.mast b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.24em;
  color: var(--text);
  white-space: nowrap;
}

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.7rem, 8.6vw, 6.6rem);
  line-height: 0.87;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0 0 22px;
  max-width: 15ch;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--mercury); }
.standfirst {
  max-width: 48ch;
  font-size: clamp(1rem, 1.7vw, 1.26rem);
  line-height: 1.5;
  color: rgba(230, 242, 239, 0.82);
  margin: 0;
}
.cue {
  font-family: var(--figure);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mercury);
  margin: 28px 0 0;
}

/* ── The lane ────────────────────────────────────────────────────────────── */
.lane { position: relative; padding: 0 0 40px; }
.lane::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 120px;
  width: 1px;
  background: linear-gradient(to bottom, var(--mercury), var(--mercury-dim) 30%, rgba(47, 95, 88, 0.18));
}
.bay { position: relative; padding: 82px 0 0 78px; max-width: 1200px; margin: 0 auto; }
.bay::before {
  content: "";
  position: absolute;
  left: 0;
  top: 92px;
  width: 30px;
  height: 1px;
  background: var(--mercury-dim);
}
.bay-no {
  position: absolute;
  left: 0;
  top: 74px;
  font-family: var(--figure);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--mercury);
}
.bay h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0 0 16px;
  max-width: 18ch;
}
.bay p { max-width: 52ch; color: var(--text-dim); margin: 0 0 15px; }
.bay p:last-child { margin-bottom: 0; }
.bay b { color: var(--text); font-weight: 700; }

/* ── The rep panel ───────────────────────────────────────────────────────── */
.rep {
  margin: 26px 0 0;
  background: var(--night-2);
  border: 1px solid rgba(127, 214, 196, 0.14);
  /* Lit from above, like the bay it sits in: a bright top lip and a real cast
     shadow beneath. Not a halo. */
  border-top-color: rgba(127, 214, 196, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(127, 214, 196, 0.22),
    0 28px 46px -30px rgba(0, 0, 0, 0.95);
  position: relative;
}
.rep-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(127, 214, 196, 0.16);
  font-family: var(--figure);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.rep-head b { color: var(--mercury); font-weight: 400; }
.chart-hold { position: relative; }
.chart { display: block; width: 100%; height: auto; }
/* The reveal is staged by each page, so the static "HIDDEN" legend that ships
   in the source SVG would collide with the target callout. */
.chart .rev-label,
.chart .done-label { display: none; }

.rep-foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  background: rgba(127, 214, 196, 0.16);
  border-top: 1px solid rgba(127, 214, 196, 0.16);
}
.rep-foot div { background: var(--night-2); padding: 11px 14px; }
.rep-foot span {
  display: block;
  font-family: var(--figure);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.rep-foot b { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
.rep-foot .hot b { color: var(--hot); }
.rep-foot .cool b { color: var(--mercury); }

/* ── Controls ────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--mercury);
  color: #04100e;
  border: 0;
  padding: 12px 26px;
  cursor: pointer;
  transition: background 150ms ease, transform 90ms ease;
}
.btn:hover { background: var(--mercury-hot); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { background: #1d3a36; color: #6d918b; cursor: default; }
.btn.ghost {
  background: transparent;
  color: var(--mercury);
  box-shadow: inset 0 0 0 1px var(--mercury-dim);
}
.btn.ghost:hover { background: rgba(127, 214, 196, 0.08); color: var(--mercury-hot); }

/* ── Twin scores ─────────────────────────────────────────────────────────── */
.twin { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 28px; }
.twin div { border-top: 2px solid var(--mercury); padding-top: 14px; }
.twin span {
  display: block;
  font-family: var(--figure);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.twin b {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6.6vw, 4.2rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--mercury);
}
.twin p { margin: 10px 0 0; font-size: 14.5px; color: var(--text-dim); }

/* ── Price + close ───────────────────────────────────────────────────────── */
.price { display: flex; gap: 40px; flex-wrap: wrap; margin: 22px 0 0; }
.price div span {
  display: block;
  font-family: var(--figure);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.price div b { font-family: var(--display); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.03em; }
.price .free b { color: var(--mercury); }

.close {
  text-align: center;
  padding: 100px 32px 84px;
  background: radial-gradient(120% 100% at 50% 100%, rgba(127, 214, 196, 0.16), transparent 62%);
}
.close h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 7vw, 4.4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0 auto 24px;
  max-width: 16ch;
}
.close .btn { font-size: 1.2rem; padding: 17px 44px; }
.close p { color: var(--text-dim); margin: 18px 0 0; font-size: 14.5px; }
.close p a { color: var(--mercury); text-underline-offset: 3px; }
.close p a:hover { color: var(--mercury-hot); }

footer {
  border-top: 1px solid rgba(127, 214, 196, 0.16);
  font-family: var(--figure);
  font-size: 11px;
  line-height: 1.65;
  color: var(--text-dim);
}
footer nav {
  max-width: 78ch;
  margin: 0 auto;
  padding: 26px 32px 0;
  display: flex;
  gap: 26px;
}
footer nav a {
  color: var(--mercury);
  text-decoration: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
footer nav a:hover,
footer nav a:focus-visible { border-bottom-color: var(--mercury); }

footer div { max-width: 78ch; margin: 0 auto; padding: 24px 32px 52px; }

@media (max-width: 820px) {
  .lane::before { left: 20px; }
  /* The bays only ever held narrow text, which happened to fit; anything wider
     ran straight off the right edge because there was no gutter on that side. */
  .bay { padding-left: 52px; padding-right: 20px; }
  .bay::before { width: 18px; }
  .opening-inner, .mast { padding-left: 20px; padding-right: 20px; }
  .wrap { padding: 0 20px; }
}