@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
}

:root {
  --night: #070b16;
  --night-2: #0d1630;
  --ink: #e9eefb;
  --muted: #9aa6c4;
  --amber: #ffc46b;
  --amber-hot: #ffe2a8;
  --gutter: 16px;
  /* one turn of the lamp; the flare and the lettering's highlight share it to stay in step */
  --spin: 9s;
}

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

html, body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
}

/* a solid base under the gradient, so long pages never scroll past the sky */
html { background: var(--night-2); }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 700px at 50% 100%, #1b2a55 0%, transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color: var(--ink);
  font: 400 17px/1.65 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow-wrap: anywhere;
}

/* the sky sits behind everything and never takes part in layout */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 62%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 47%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 79% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 66%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 79%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 88%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 9%, #fff 50%, transparent 51%);
  opacity: 0.7;
  animation: twinkle 7s ease-in-out infinite alternate;
}

@keyframes twinkle { to { opacity: 0.35; } }

/* ---- home: the lighthouse, its beam, and the word ---- */

.home { overflow: hidden; }

.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* sized so the sky above the dome (7.5% down the svg) is half what it was at
     min(80dvh, 680px), with the base still on the bottom edge */
  --tower-h: calc(100dvh * 0.5405 + min(80dvh, 680px) * 0.5);
}

/* centred with auto margins, not a transform, so it opens no stacking context and the
   beam inside it can still blend over the word */
.tower {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  height: var(--tower-h);
  aspect-ratio: 1 / 2;
}

.lighthouse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* a zero-size pivot at the lamp (100,76 in the 200x400 viewbox); the beam hangs from it.
   the near layer paints over the tower and the word, the far layer under both */
.beam {
  position: absolute;
  left: 50%;
  top: 19%;
  width: 0;
  height: 0;
  z-index: 2;
  pointer-events: none;
}

.beam.far { z-index: 0; }

/* the beam points right from the pivot; the spin keyframes swing and shorten it */
.beam::before {
  content: '';
  position: absolute;
  left: 0;
  top: -30vmax;
  width: 75vmax;
  height: 60vmax;
  transform-origin: 0 50%;
  /* conic angles run clockwise from straight up, so 90deg points along the beam */
  background: conic-gradient(from 76deg at 0% 50%,
    transparent 0deg,
    rgba(255, 226, 168, 0.5) 8deg,
    rgba(255, 244, 214, 0.75) 14deg,
    rgba(255, 226, 168, 0.5) 20deg,
    transparent 28deg 360deg);
  -webkit-mask-image: radial-gradient(circle at 0% 50%, #000 0, #000 15vmax, transparent 75vmax);
  mask-image: radial-gradient(circle at 0% 50%, #000 0, #000 15vmax, transparent 75vmax);
  mix-blend-mode: screen;
  animation: spin var(--spin) linear infinite, near-light var(--spin) linear infinite;
}

.beam.far::before {
  animation: spin var(--spin) linear infinite, far-light var(--spin) linear infinite;
}

/* the lamp blazes as the beam turns to face the viewer */
.flare {
  position: absolute;
  left: 50%;
  top: 19%;
  width: 40%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e6 0%, rgba(255, 214, 140, 0.6) 25%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  animation: flare var(--spin) linear infinite;
}

@keyframes flare {
  0%, 15% { opacity: 0; scale: 0.6; }
  25% { opacity: 1; scale: 1.4; }
  35%, 100% { opacity: 0; scale: 0.6; }
}

/* generated: a beam tilted 40deg below the horizon turning about the tower's vertical axis,
   projected onto the screen; both layers share the turn and hand over side-on, where the
   tower hides neither */
@keyframes spin {
  0% { transform: rotate(40.00deg) scaleX(1.000); }
  2.5% { transform: rotate(40.35deg) scaleX(0.993); }
  5% { transform: rotate(41.42deg) scaleX(0.972); }
  7.5% { transform: rotate(43.28deg) scaleX(0.938); }
  10% { transform: rotate(46.05deg) scaleX(0.893); }
  12.5% { transform: rotate(49.88deg) scaleX(0.841); }
  15% { transform: rotate(54.99deg) scaleX(0.785); }
  17.5% { transform: rotate(61.58deg) scaleX(0.731); }
  20% { transform: rotate(69.78deg) scaleX(0.685); }
  22.5% { transform: rotate(79.44deg) scaleX(0.654); }
  25% { transform: rotate(90.00deg) scaleX(0.643); }
  27.5% { transform: rotate(100.56deg) scaleX(0.654); }
  30% { transform: rotate(110.22deg) scaleX(0.685); }
  32.5% { transform: rotate(118.42deg) scaleX(0.731); }
  35% { transform: rotate(125.01deg) scaleX(0.785); }
  37.5% { transform: rotate(130.12deg) scaleX(0.841); }
  40% { transform: rotate(133.95deg) scaleX(0.893); }
  42.5% { transform: rotate(136.72deg) scaleX(0.938); }
  45% { transform: rotate(138.58deg) scaleX(0.972); }
  47.5% { transform: rotate(139.65deg) scaleX(0.993); }
  50% { transform: rotate(140.00deg) scaleX(1.000); }
  52.5% { transform: rotate(139.65deg) scaleX(0.993); }
  55% { transform: rotate(138.58deg) scaleX(0.972); }
  57.5% { transform: rotate(136.72deg) scaleX(0.938); }
  60% { transform: rotate(133.95deg) scaleX(0.893); }
  62.5% { transform: rotate(130.12deg) scaleX(0.841); }
  65% { transform: rotate(125.01deg) scaleX(0.785); }
  67.5% { transform: rotate(118.42deg) scaleX(0.731); }
  70% { transform: rotate(110.22deg) scaleX(0.685); }
  72.5% { transform: rotate(100.56deg) scaleX(0.654); }
  75% { transform: rotate(90.00deg) scaleX(0.643); }
  77.5% { transform: rotate(79.44deg) scaleX(0.654); }
  80% { transform: rotate(69.78deg) scaleX(0.685); }
  82.5% { transform: rotate(61.58deg) scaleX(0.731); }
  85% { transform: rotate(54.99deg) scaleX(0.785); }
  87.5% { transform: rotate(49.88deg) scaleX(0.841); }
  90% { transform: rotate(46.05deg) scaleX(0.893); }
  92.5% { transform: rotate(43.28deg) scaleX(0.938); }
  95% { transform: rotate(41.42deg) scaleX(0.972); }
  97.5% { transform: rotate(40.35deg) scaleX(0.993); }
  100% { transform: rotate(40.00deg) scaleX(1.000); }
}

/* the near half: in front of the tower, brightest facing the viewer */
@keyframes near-light {
  0% { opacity: 0.70; }
  2.5% { opacity: 0.75; }
  5% { opacity: 0.79; }
  7.5% { opacity: 0.84; }
  10% { opacity: 0.88; }
  12.5% { opacity: 0.91; }
  15% { opacity: 0.94; }
  17.5% { opacity: 0.97; }
  20% { opacity: 0.99; }
  22.5% { opacity: 1.00; }
  25% { opacity: 1.00; }
  27.5% { opacity: 1.00; }
  30% { opacity: 0.99; }
  32.5% { opacity: 0.97; }
  35% { opacity: 0.94; }
  37.5% { opacity: 0.91; }
  40% { opacity: 0.88; }
  42.5% { opacity: 0.84; }
  45% { opacity: 0.79; }
  47.5% { opacity: 0.75; }
  50% { opacity: 0.70; }
  50.01%, 99.99% { opacity: 0; }
  100% { opacity: 0.70; }
}

/* the far half: behind the tower, dimmest pointing straight away */
@keyframes far-light {
  0%, 49.99% { opacity: 0; }
  50% { opacity: 0.70; }
  52.5% { opacity: 0.64; }
  55% { opacity: 0.58; }
  57.5% { opacity: 0.52; }
  60% { opacity: 0.46; }
  62.5% { opacity: 0.42; }
  65% { opacity: 0.38; }
  67.5% { opacity: 0.34; }
  70% { opacity: 0.32; }
  72.5% { opacity: 0.30; }
  75% { opacity: 0.30; }
  77.5% { opacity: 0.30; }
  80% { opacity: 0.32; }
  82.5% { opacity: 0.34; }
  85% { opacity: 0.38; }
  87.5% { opacity: 0.42; }
  90% { opacity: 0.46; }
  92.5% { opacity: 0.52; }
  95% { opacity: 0.58; }
  97.5% { opacity: 0.64; }
  99.99% { opacity: 0.70; }
  100% { opacity: 0; }
}

.wordmark {
  position: absolute;
  /* tied to the tower so the word stays the same distance below the lamp at any size */
  top: calc(100% - var(--tower-h) * 0.52);
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  padding-inline: var(--gutter);
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(4rem, 19vw, 9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144;
  /* a bright band crosses right to left while the beam's near half sweeps the word */
  background: linear-gradient(100deg,
    var(--amber) 0%, var(--amber) 40%, #fffaf0 50%, var(--amber) 60%, var(--amber) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(255, 196, 107, 0.3));
  animation: sheen var(--spin) linear infinite;
}

@keyframes sheen {
  0% { background-position: 0% 0; }
  50%, 100% { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stars, .beam::before, .flare, .wordmark { animation: none; }
  .beam::before { transform: rotate(90deg) scaleX(0.64); opacity: 0.8; }
  .beam.far::before { opacity: 0; }
}

/* ---- privacy and terms ---- */

main.page {
  width: min(680px, 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: 56px 0 64px;
}

h1, h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
}

.page h1 {
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  color: var(--amber);
  margin: 0 0 4px;
}

.page h2 {
  font-size: 1.3rem;
  margin: 32px 0 8px;
}

.updated { color: var(--muted); margin: 0 0 24px; }

a { color: var(--amber-hot); text-underline-offset: 3px; }
a:hover { color: #fff; }

.back { display: inline-block; margin-bottom: 28px; text-decoration: none; }