/*
  The contributors' greeting at send.finnehninger.com (6b step 8): its own
  small stylesheet, from design/09-send-greeting.html (approved by Bill
  2026-11-08) and the parts of static/site/site.css that page uses. Dark only.
  Fonts from this upload's own copies, exactly as published (fonts/, with
  their licences). A change to the site's fonts, logo or colours comes here
  too (app/OPERATIONS.md, "Things that must change together").
*/
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleNext[wght].ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Jersey 10"; src: url("fonts/jersey-10/Jersey10-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #17181D; --ink: #EDE8DE; --muted: #A8A196; --on-accent: #1E1B18;
  /* Palette 5 (Bill, 2026-11-04, for now), as site.css */
  --blue: #6D7AF3;    --blue-pale: #99A2F7;
  --teal: #55A6FF;    --teal-pale: #88C1FF;
  --amber: #B0CCFF;   --amber-pale: #C8DBFF;
  --mustard: #FFF6E0; --mustard-pale: #FFF9E9;
  --c: var(--blue); --c-pale: var(--blue-pale);
  --read: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --texture: repeating-conic-gradient(rgba(255,255,255,.06) 0 25%, transparent 0 50%);
}
*, *::before, *::after { box-sizing: border-box; }
.site {
  margin: 0; background-color: var(--bg); color: var(--ink);
  background-image: var(--texture); background-size: 8px 8px;
  font-family: var(--read); font-size: 18px; line-height: 1.5;
}
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 18px; line-height: 1.2; text-decoration: none; cursor: pointer;
  background: var(--c-pale); color: var(--on-accent);
  border: 3px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 0 var(--ink);
  padding: 10px 20px; min-height: 48px;
}
.btn:hover { color: var(--on-accent); }
.btn:active { transform: translate(4px, 4px); box-shadow: none; }
.narrow-aware { container-type: inline-size; }

/* One narrow column, centred, as the viewers' greeting: the stacked logo, then the lines */
.frame { position: relative; margin: 0 auto; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.door { position: relative; z-index: 1; max-width: 420px; margin: 0 auto; padding: 40px 16px 56px; text-align: center; }
/* The snake's canvas fills the whole page, behind the logo and the words (Bill, 11-08: "Snake behind everything") */
.roam { position: absolute; left: 0; top: 0; z-index: 0; image-rendering: pixelated; pointer-events: none; }
.roam.stopped { filter: brightness(.4); }
/* Line breaks (Bill, 11-08: widows and orphans): balanced lines, and no-break spaces before last words */
.door p, .door h1 { text-wrap: balance; }
.door li { text-wrap: pretty; }
.door-logo { display: block; margin: 0 auto 40px; max-width: 100%; }
.door-logo img { display: block; width: 100%; height: auto; }
/* Short screens only (Bill, 11-08: "Do tighter on short screens only"): 20 px above the logo; 40 px below it as
   everywhere, as the approved mock shows (Bill, 11-12: "B: 40 px") */
@media (max-height: 700px) { .door { padding-top: 20px; } }
@container (min-width: 601px) { .door { padding-top: 72px; } }
.line { margin: 0 0 12px; }
.line.first { font-size: 24px; font-weight: 700; }
/* A little more air between each waiting line as it comes on (Bill, 11-08): 20 px */
.words .line { margin-bottom: 20px; }
.door .btn { justify-content: center; width: 100%; margin-top: 12px; }
/* Set-up: the heading, then the steps, read left to right */
.setup h1 { font-size: 24px; font-weight: 700; margin: 0 0 20px; }
.setup ol { text-align: left; margin: 0; padding-left: 1.6em; }
.setup li { margin: 0 0 14px; line-height: 1.5; }