/* Self-contained, motion-free, no external assets or fonts. */
:root { color-scheme: dark; --ink: #fff8eb; --muted: #e2d9cc; --accent: #edb779; --night: #081017; }
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.page { min-height: 100vh; min-height: 100svh; position: relative; isolation: isolate; display: flex; flex-direction: column; padding: clamp(24px, 4vw, 64px); }
.artwork, .shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.artwork { object-fit: cover; object-position: center center; }
.shade { z-index: -1; background: linear-gradient(90deg, rgba(4,12,18,.87) 0%, rgba(4,12,18,.70) 32%, rgba(4,12,18,.12) 70%), linear-gradient(0deg, rgba(4,12,18,.6), transparent 60%); }
header { display: flex; justify-content: space-between; align-items: start; gap: 24px; }
.brand { font-size: 12px; line-height: 1.6; font-weight: 700; letter-spacing: .20em; text-transform: uppercase; }
.status { font-size: 10px; line-height: 1.6; letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; border: 1px solid rgba(255,248,235,.35); border-radius: 99px; padding: 7px 12px; background: rgba(4,12,18,.55); }
main { width: min(100%, 690px); padding: clamp(100px, 17vh, 185px) 0 clamp(50px, 8vh, 100px); margin: auto 0; }
.rule { width: 40px; height: 1px; background: var(--accent); margin-bottom: 28px; }
h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(44px, 4.8vw, 76px); line-height: 1.04; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
h1 em { color: var(--accent); font-weight: 400; }
.closed { margin: 32px 0 12px; font-size: 17px; line-height: 1.55; font-weight: 600; }
.thanks { max-width: 400px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
footer { color: var(--muted); font-size: 10px; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; }
.mermaid { --accent: #a6dedc; --night: #04151b; }
@media (min-width: 1800px) { main { width: 760px; } h1 { font-size: 84px; } }
@media (max-width: 700px) {
  .page { padding: 25px 24px; min-height: max(850px, 100svh); }
  .artwork { object-position: 76% top; }
  .mermaid .artwork { object-position: 83% top; }
  .shade { background: linear-gradient(0deg, rgba(4,12,18,.98) 0%, rgba(4,12,18,.94) 32%, rgba(4,12,18,.68) 54%, rgba(4,12,18,.05) 78%, rgba(4,12,18,.5) 100%); }
  .brand { font-size: 10px; max-width: 170px; }
  .status { font-size: 8px; padding: 5px 9px; }
  main { padding: 280px 0 44px; margin: auto 0 0; }
  h1 { font-size: clamp(40px, 10vw, 64px); line-height: 1.06; }
  .rule { margin-bottom: 22px; }
  .closed { margin-top: 25px; font-size: 15px; }
  .thanks { font-size: 14px; line-height: 1.75; max-width: 340px; }
}
@media (max-width: 350px) { .page { padding-inline: 20px; } h1 { font-size: 38px; } }
@media (prefers-contrast: more) { .shade { background: rgba(4,12,18,.88); } }
@media print { .artwork, .shade, .status, .rule { display: none; } body, .page { background: white; color: black; } .page { min-height: auto; padding: 20px; } main { padding: 50px 0; } h1 em, .thanks, footer { color: black; } }