/* JetBrains Mono (SIL OFL 1.1), self-hosted variable font, Latin subset. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Light mode is airmail: navy ink on aged paper, with red and blue stripes. */
  --bg: #f1e9d6;
  --fg: #1b2340;
  --muted: #6e6656;
  --rule: #ddd1b6;
  --accent: #1f3f94;
  --red: #c42a2a;
  --blue: #1f3f94;
  /* The letter and its envelope, drawn by envelope.js. */
  --paper: #faf5e8;
  --envelope: #ebe0c6;
}
@media (prefers-color-scheme: dark) {
  /* Dark mode is a synthwave sunset: hot pink and cyan on deep purple. */
  :root {
    --bg: #14092a;
    --fg: #f4e8ff;
    --muted: #a48cc8;
    --rule: #3a2560;
    --accent: #2de2e6;
    --red: #ff2a6d;
    --blue: #2de2e6;
    --paper: #221142;
    --envelope: #2c1652;
    /* The sun's top and bottom, and the sky at the horizon, drawn by scene.js. */
    --sun: #ffd319;
    --sunset: #ff2975;
    --sky: #4a1260;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15.5px/1.7 "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-feature-settings: "calt" 0;
}
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
main {
  max-width: 38rem;
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(2rem, 10vh, 6rem) 1rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* The letter sits in its envelope: the room below it (padding) is where envelope.js
   draws the open envelope, with the letter's bottom edge tucked inside. */
.stage {
  position: relative;
  width: min(100%, 30rem);
  margin: 0 auto;
  padding: 0 1.5rem clamp(8rem, 36vw, 12rem);
}
#envelope {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.letter {
  position: relative;
  padding: 2rem 1.75rem 2.75rem;
  /* Without JavaScript the letter is plain paper; envelope.js draws its own. */
  background: var(--paper);
  border: 2px solid var(--accent);
}
h1 {
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  color: var(--red);
}
.letter p { margin: 0; }
.nowrap { white-space: nowrap; }

/* With scripting, envelope.js draws the paper and reveals the text once the letter is
   out. If the script never runs, the text still appears after a few seconds. */
@media (scripting: enabled) {
  .letter {
    background: none;
    border-color: transparent;
    opacity: 0;
    animation: appear 0.4s steps(4) 4s forwards;
  }
  .letter.shown {
    animation: appear 0.4s steps(4) forwards;
  }
  .letter.still {
    animation: none;
    opacity: 1;
  }
}
@keyframes appear {
  to { opacity: 1; }
}

/* 404.html: no envelope, just the message on a sheet of paper. */
.notice {
  width: min(100%, 30rem);
  margin: 0 auto;
  padding: 2rem 1.75rem 1rem;
  background: var(--paper);
  border: 2px solid var(--blue);
}
.notice p { margin: 0 0 1rem; }

footer {
  margin-top: 3rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}
footer p {
  width: fit-content;
  margin: 0 auto 0.5rem;
  padding: 0 0.5rem;
}
/* Backed with the page color so it stays legible over the synthwave grid. */
@media (prefers-color-scheme: dark) {
  footer p { background: var(--bg); }
}