:root {
  --ink: #000;
  --ink-soft: #626262;
  --accent: #ff0900;
  --measure: 62ch;
  --fade: 100ms;
  font-family: "Courier New", "Courier Prime", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink);
  background: #fff;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  font-size: clamp(.9375rem, .89rem + .12vw, 1rem);
  line-height: 1.7;
}
/* Paper is decorative and independent of document content height. */
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 72rem;
  background: #fff url("bg.webp") no-repeat top center / 58.875rem 80rem;
  pointer-events: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.stage {
  --paper-top: clamp(6rem, 13.5vw, 12.1875rem);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding: var(--paper-top) clamp(1.5rem, 5vw, 3rem) 3rem;
  gap: 1.5rem;
  text-align: center;
}
/* The artwork has blank space below the paper; its visible edge and shadow
   end at about 72rem at the current background size. Reserve that height.
   Content can grow naturally if text wraps or the visitor zooms in. */
.sheet {
  width: 100%;
  max-width: var(--measure);
  min-height: calc(72rem - var(--paper-top));
}
.copy p { margin: 0 0 1.4em; }
.copy p:last-child { margin-bottom: 0; }
.link-word {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  touch-action: manipulation;
}
.link-word:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.link-word.is-loading { text-decoration-style: dotted; cursor: progress; }
.signature { width: 111px; margin: 1.9rem 0 0 auto !important; }
.signature img { display: block; width: 100%; height: auto; }
.friends { margin: clamp(5rem, 13vw, 11rem) 0 0; }
.friends img { display: block; width: min(100%, 549px); height: auto; margin-inline: auto; }
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 2rem;
  margin-top: 0;
  max-width: 100%;
  font-size: .85em;
  color: var(--ink-soft);
}
.footer a { white-space: nowrap; color: inherit; text-decoration: underline; text-underline-offset: 3px; padding-block: .3rem; }
.footer a:hover { color: var(--ink); }
.gallery {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #111;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade) ease, visibility 0s linear var(--fade);
  touch-action: manipulation;
  overflow: hidden;
}
.gallery__media { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gallery__media.is-current { display: block; }
body.is-playing .gallery { opacity: 1; visibility: visible; transition: opacity var(--fade) ease; }
body.is-playing .stage { pointer-events: none; }
body.is-playing .copy { color: transparent; }
body.is-playing .signature, body.is-playing .friends, body.is-playing .footer { opacity: 0; }
body.is-playing .link-word { color: transparent; }
body.is-playing .link-word.is-active { position: relative; z-index: 3; color: var(--accent); pointer-events: auto; }
.copy, .link-word { transition: color var(--fade) ease; }
.signature, .friends, .footer { transition: opacity var(--fade) ease; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .stage { --paper-top: clamp(4.5rem, 15vw, 6rem); padding-bottom: 2rem; }
  body { line-height: 1.65; }
  body::before { background-size: 58.875rem 80rem; }
  .friends { margin-top: 4.5rem; }
  .footer { gap: .5rem 1.4rem; max-width: 22rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --fade: 0ms; }
}