/*
  Contrast against --bg (#050505), WCAG 2.2 AA (4.5:1 for small text):
  --ink-1 #a19e97 ≈ 7.6:1   --ink-2 #8c8983 ≈ 5.9:1   --ink-3 #7f7c76 ≈ 4.9:1
  --lit-1..3 ≈ 11–12:1      grey with a faint cool cast; the blue lives mostly in the glow.
*/
:root {
  --bg: #050505;
  --ink-0: #b6b3ac;
  --ink-1: #a19e97;
  --ink-2: #8c8983;
  --ink-3: #7f7c76;
  --lit-1: #c2cedd;
  --lit-2: #bbc9df;
  --lit-3: #c2c4e0;
  --sans: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --gap: 14px;
}

/* Self-hosted, OFL-licensed. Variable files: one request covers every weight. */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

/*
  The page is a fixed card, not a document: no scrolling, no rubber-band
  bounce, no pull-to-refresh. Touch drags go to the feather instead.
*/
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  position: fixed;
  inset: 0;
}

body {
  overflow-x: hidden;
  font-family: var(--sans);
}

/* Stage above, text resting low beneath it. */
/*
  Feather and text are one group, centred a little above the middle of the
  screen (more padding below than above). The gap between them is smaller
  than the space around them, so they read as one mark, not two islands.
*/
main {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 24px calc(10vh + env(safe-area-inset-bottom));
  cursor: default;
  /* One-finger swipes don't pan the page; pinch-zoom stays available. */
  touch-action: pinch-zoom;
}

/* Layout box only; the canvas inside it spans the whole page behind. */
.stage {
  width: 100%;
  height: clamp(170px, 42vh, 400px);
  flex: none;
}

canvas {
  position: absolute;
  top: 0;
  display: block;
  pointer-events: none;
}

.copy {
  position: relative;
  margin-top: clamp(14px, 4.5vh, 48px);
  max-width: 34rem;
  text-align: center;
}

.copy > * {
  margin: 0;
  opacity: 0;
  animation: rise 1.8s cubic-bezier(.2, .7, .2, 1) forwards;
}
.copy > * + * { margin-top: var(--gap); }
.copy > :nth-child(1) { animation-delay: 1.3s; }
.copy > :nth-child(2) { animation-delay: 1.55s; }
.copy > :nth-child(3) { animation-delay: 1.8s; }
.copy > :nth-child(4) { animation-delay: 2.05s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/*
  Four lines in one quiet register: sizes stay within 10.5–15.5px, and each
  line is told apart by one move only — case, colour, face, or brightness.
*/

/*
  1 — Signature: serif capitals, set like an old letterhead. A touch larger
  and lit by a faint warm-white glow, the neutral twin of the blue line below.
*/
h1 {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--ink-0);
  text-shadow: 0 0 1px rgba(255, 252, 245, 0.35), 0 0 10px rgba(255, 250, 240, 0.16), 0 0 24px rgba(255, 248, 235, 0.08);
}

/* 2 — The focus line: the only colour, three neighbouring blues. */
.pillars {
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.pillars > span:not(.x):not(.sr) { white-space: nowrap; }

/*
  Grey letters lit from within: a hairline of blue hugs each glyph, then a
  soft halo spreads out. The hue drifts sky → azure → periwinkle across the line.
*/
.p-1 { color: var(--lit-1); text-shadow: 0 0 1px rgba(165, 205, 255, 0.85), 0 0 5px rgba(115, 175, 255, 0.62), 0 0 16px rgba(95, 160, 255, 0.36); }
.p-2 { color: var(--lit-2); text-shadow: 0 0 1px rgba(145, 188, 255, 0.85), 0 0 5px rgba(90, 148, 255, 0.62), 0 0 16px rgba(75, 132, 255, 0.36); }
.p-3 { color: var(--lit-3); text-shadow: 0 0 1px rgba(168, 172, 255, 0.85), 0 0 5px rgba(122, 126, 255, 0.62), 0 0 16px rgba(108, 110, 250, 0.36); }

.x {
  display: inline-block;
  margin: 0 0.7em;
  color: var(--ink-3);
  font-weight: 400;
}

/* 3 — Statement: upright text serif, optically sized for small sizes. */
.lede {
  max-width: 25em;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-1);
  text-wrap: balance;
}

/* 4 — Subheadline: smallest caps, dimmest, most open. */
.focus {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.plus {
  display: inline-block;
  margin: 0 0.45em 0 0.25em;
  font-weight: 400;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

a {
  color: var(--ink-1);
  text-underline-offset: 3px;
}
a:focus-visible {
  outline: 1px solid var(--ink-1);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Narrow phones: tighten rather than wrap, so each line stays whole. */
@media (max-width: 374px) {
  main { padding-left: 16px; padding-right: 16px; }
  .pillars { font-size: 12px; letter-spacing: 0.04em; }
  .x { margin: 0 0.5em; }
  .focus { letter-spacing: 0.12em; text-indent: 0.12em; white-space: nowrap; }
  .plus { margin: 0 0.35em 0 0.2em; }
}

/* Short landscape screens: let the stage give a little so nothing scrolls. */
@media (max-height: 480px) {
  main { padding-top: 8px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .stage { height: clamp(120px, 42vh, 170px); }
  .copy { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .copy > * { animation: none; opacity: 1; }
}