/* The wordmark face: Cormorant Garamond, pinned to weight 600 and subsetted to
   caps, lower case and digits (8.6 KB). Chosen against the original Myst cover
   art for its splayed M, extreme stroke contrast and fine downward-wedge serifs
   on the T. Self-hosted — no CDN, no third-party request. SIL OFL, see
   fonts/OFL.txt.

   Lower case is in the subset because the book's cover reads "PhreakMyst", not
   PHREAKMYST; the wordmark here is still caps only. */
@font-face {
  font-family: 'Cormorant Caps';
  src: url('/fonts/cormorant-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+0030-0039, U+0041-005A, U+0061-007A;
}

/* Palette lifted from the game client (Phreaknyst client/style.css) so the teaser
   and the game read as the same object. */
:root {
  --bg: #050706;
  --panel: #0d1311;
  --edge: #1d2a25;
  --ink: #7fe0b0;
  --ink-dim: #4e8f74;
  --text: #d6e6df;
  --muted: #7d918a;

  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", "Liberation Mono", monospace;
  /* Georgia first in the fallback: it is the widely-available face whose
     proportions are least jarring if the woff2 never arrives. */
  --display: 'Cormorant Caps', Georgia, 'Times New Roman', Times, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
}

body {
  min-height: 100vh;
  min-height: 100dvh; /* mobile: exclude the collapsing URL bar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  /* A faint pool of phosphor behind the wordmark, so the page isn't flat black. */
  background-image: radial-gradient(
    ellipse 90% 60% at 50% 38%,
    #0d1a14 0%,
    var(--bg) 70%
  );
}

/* CRT scanlines — decorative, sits above the background and below the text. */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    180deg,
    #0000 0px,
    #0000 2px,
    #00000038 3px,
    #00000038 4px
  );
}

.stage {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Wide enough that the wordmark at its 6.5rem cap still sits inside the
     stage rather than spilling past it. Below this the stage is just 100%. */
  max-width: 900px;
  text-align: center;
}

/* Wordmark */

.mark h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  /* Cormorant's caps are small for its em, so this runs larger than the
     monospace it replaced to land at the same optical size. */
  /* 10 tracked caps have to fit the viewport minus the 20px body padding each
     side. Driven by vw, with the tracking floor in em so the two scale together
     — at 390px this lands the ink at ~318px in a 350px column. */
  font-size: clamp(2rem, 11vw, 6.5rem);
  font-weight: 600;
  /* The Myst logo is very widely tracked; that spacing is half the look. */
  letter-spacing: clamp(0.09em, 0.9vw, 0.2em);
  /* Letter-spacing adds a trailing space after the final glyph, which centring
     counts as ink — the word lands half a letter-space left of true centre.
     Nudge back by exactly half. */
  text-indent: clamp(0.045em, 0.45vw, 0.1em);
  line-height: 1.05;
  /* Lighter glow than the monospace had: this face has hairline strokes that a
     heavy bloom turns to mush. */
  text-shadow: 0 0 14px #7fe0b038, 0 0 40px #7fe0b01f;
}

.tagline {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: clamp(0.72rem, 2.6vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Countdown */

.countdown {
  margin: clamp(36px, 8vh, 64px) 0 0;
  /* Hold the row's height before the script paints, so nothing jumps — and
     centre within that reserve, or the slack all pools underneath the clock. */
  min-height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown .fallback {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 4vw, 1.5rem);
  letter-spacing: 0.1em;
}

.clock {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 4vw, 34px);
  margin: 0;
}

.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: clamp(56px, 17vw, 96px);
}

.unit .value {
  color: var(--ink);
  font-size: clamp(1.9rem, 9vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  /* Tabular figures stop the digits from shuffling width each second. */
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px #7fe0b03d;
}

.unit .label {
  color: var(--ink-dim);
  font-size: clamp(0.56rem, 2.1vw, 0.72rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* The state shown once the countdown reaches zero. */
.open {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.4rem, 6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 0 20px #7fe0b04d;
}

.open a {
  color: inherit;
  text-decoration-color: var(--ink-dim);
  text-underline-offset: 6px;
}

.open a:hover,
.open a:focus-visible {
  text-decoration-color: var(--ink);
}

/* Visible only to assistive tech. Clipped rather than display:none, which
   would take it out of the accessibility tree entirely. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The glow and the scanlines are the only motion-ish effects here; drop the
   scanlines for anyone who has asked for less of that. */
@media (prefers-reduced-motion: reduce) {
  .scanlines { display: none; }
}

/* Very short landscape viewports (a phone turned sideways) — tighten the stack
   so the wordmark and the clock both stay above the fold. */
@media (max-height: 520px) {
  .countdown { margin-top: 24px; min-height: 0; }
}