:root {
  color-scheme: light;
  --paper: #f7f0df;
  --ink: #24251d;
  --muted: #777365;
  --orange: #f16d45;
  --pink: #ed9fbd;
  --green: #bacb77;
  --blue: #a9cfce;
  --line: #dcd4c0;
  --mono: "DM Mono", "Courier New", monospace;
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 15% 12%, rgba(255,255,255,.75), transparent 30rem),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.page-shell {
  width: min(100% - 64px, 1120px);
  margin: 0 auto;
}

.topbar {
  min-height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.8px;
}

.wordmark-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50% 46% 50% 42%;
  background: var(--orange);
  color: #fff9ed;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  transform: rotate(-9deg);
}

.wordmark-dot { color: var(--orange); }
.about-link, .text-link { font-size: 13px; font-weight: 700; text-decoration: none; }
.about-link span, .text-link span { margin-left: 5px; color: var(--orange); }
.about-link:hover, .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero {
  min-height: 510px;
  display: grid;
  grid-template-columns: 1fr .95fr;
  align-items: center;
  gap: 36px;
  padding: 57px 0 70px;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.15px;
  line-height: 1.5;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: #7a9b55;
  box-shadow: 0 0 0 3px rgba(122,155,85,.14);
}

.hero h1 {
  margin: 23px 0 17px;
  font-size: clamp(56px, 7.8vw, 92px);
  font-weight: 800;
  letter-spacing: -7px;
  line-height: .91;
}

.hero h1 span {
  color: var(--orange);
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -6px;
}

.hero-intro {
  max-width: 385px;
  margin: 24px 0 24px;
  color: #5e5b51;
  font-size: 16px;
  line-height: 1.7;
}

.hero-art {
  position: relative;
  min-height: 360px;
  isolation: isolate;
}

.hero-art::before {
  position: absolute;
  z-index: -2;
  top: 34px;
  left: 50%;
  width: 315px;
  height: 315px;
  border-radius: 46% 54% 60% 40% / 51% 41% 59% 49%;
  background: #ead4d0;
  content: "";
  transform: translateX(-50%) rotate(-11deg);
}

.orbit {
  position: absolute;
  z-index: -1;
  top: 70px;
  left: 50%;
  width: 355px;
  height: 235px;
  border: 1px dashed rgba(83,82,66,.33);
  border-radius: 50%;
  transform: translateX(-50%) rotate(33deg);
}

.orbit-two {
  width: 240px;
  height: 345px;
  transform: translateX(-50%) rotate(-27deg);
}

.star-creature {
  position: absolute;
  top: 85px;
  left: 50%;
  width: 207px;
  height: 207px;
  border: 2px solid #d55f3e;
  border-radius: 43% 57% 53% 47% / 47% 40% 60% 53%;
  background: #f77b50;
  box-shadow: 8px 9px 0 #df6544;
  transform: translateX(-50%) rotate(-8deg);
}

.star-creature::before, .star-creature::after {
  position: absolute;
  z-index: -1;
  width: 62px;
  height: 62px;
  background: #f77b50;
  content: "";
}

.star-creature::before {
  top: -17px;
  left: 18px;
  border-radius: 30% 70% 42% 58%;
  transform: rotate(22deg);
}

.star-creature::after {
  right: -12px;
  bottom: 19px;
  border-radius: 63% 37% 56% 44%;
  transform: rotate(37deg);
}

.creature-eye {
  position: absolute;
  top: 76px;
  width: 10px;
  height: 13px;
  border-radius: 50%;
  background: #332b25;
}

.eye-left { left: 69px; }
.eye-right { left: 119px; }

.creature-smile {
  position: absolute;
  top: 100px;
  left: 91px;
  width: 25px;
  height: 14px;
  border-bottom: 2px solid #332b25;
  border-radius: 0 0 50% 50%;
}

.creature-cheek {
  position: absolute;
  top: 100px;
  width: 15px;
  height: 7px;
  border-radius: 50%;
  background: #d65248;
  opacity: .75;
}

.cheek-left { left: 48px; }
.cheek-right { right: 42px; }

.flower {
  position: absolute;
  top: 192px;
  left: calc(50% + 74px);
  width: 56px;
  height: 112px;
  transform: rotate(12deg);
}

.petal {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 30px;
  border: 1px solid #c56688;
  border-radius: 50%;
  background: #f5bad0;
}

.petal-top { top: 0; left: 17px; }
.petal-right { top: 13px; left: 30px; transform: rotate(68deg); }
.petal-bottom { top: 21px; left: 17px; transform: rotate(180deg); }
.petal-left { top: 13px; left: 4px; transform: rotate(-68deg); }

.flower-center {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 18px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f7da77;
}

.flower-stem {
  position: absolute;
  top: 36px;
  left: 26px;
  width: 3px;
  height: 70px;
  border-radius: 3px;
  background: #65815b;
  transform: rotate(-6deg);
}

.flower-leaf {
  position: absolute;
  top: 65px;
  left: 28px;
  width: 21px;
  height: 11px;
  border-radius: 0 100% 0 100%;
  background: #8ca06d;
  transform: rotate(-18deg);
}

.art-spark { position: absolute; color: #8b765e; }
.spark-one { top: 42px; left: 16%; color: #c77b58; font-size: 25px; }
.spark-two { top: 99px; right: 9%; color: #859969; font-size: 22px; }
.spark-three { right: 15%; bottom: 55px; font-size: 42px; }

.art-caption {
  position: absolute;
  right: 4%;
  bottom: 27px;
  color: #76705e;
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.1;
  transform: rotate(-8deg);
}

.dispatch-section {
  padding: 41px 0 61px;
  border-top: 1px solid var(--line);
}

.dispatch-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.dispatch-card {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  min-height: 315px;
  overflow: hidden;
  border: 1px solid #d9d0bb;
  border-radius: 4px;
  background: rgba(255,255,255,.32);
  box-shadow: 4px 5px 0 rgba(91,75,50,.07);
}

.dispatch-illustration {
  position: relative;
  overflow: hidden;
  min-height: 315px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(226,174,128,.55), transparent 58%),
    #cedbd3;
}

.dispatch-illustration::before {
  position: absolute;
  right: -25px;
  bottom: -65px;
  left: -25px;
  height: 150px;
  border-radius: 50% 50% 0 0;
  background: #aab994;
  content: "";
}

.dispatch-illustration::after {
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
  height: 1px;
  background: rgba(78,89,69,.2);
  box-shadow: 0 4px rgba(255,255,255,.15);
  content: "";
}

.dispatch-moon {
  position: absolute;
  top: 26px;
  right: 30px;
  color: #e5a660;
  font-size: 44px;
  transform: rotate(-20deg);
}

.dispatch-window {
  position: absolute;
  top: 42px;
  left: 34px;
  width: 90px;
  height: 116px;
  border: 5px solid #f3ead6;
  border-radius: 45px 45px 2px 2px;
  background: linear-gradient(145deg, #e8d8ad 0 48%, #c6d0b8 49%);
  box-shadow: 3px 4px 0 rgba(66,78,64,.12);
}

.dispatch-window::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #f3ead6;
  content: "";
}

.dispatch-window::after {
  position: absolute;
  top: 53%;
  right: 0;
  left: 0;
  height: 3px;
  background: #f3ead6;
  content: "";
}

.dispatch-plant {
  position: absolute;
  z-index: 1;
  bottom: 65px;
  left: 31px;
  color: #536e58;
  font-size: 38px;
  transform: rotate(-8deg);
}

.dispatch-mug {
  position: absolute;
  z-index: 2;
  right: 47px;
  bottom: 59px;
  display: grid;
  width: 48px;
  height: 36px;
  place-items: center;
  border: 2px solid #746655;
  border-radius: 3px 3px 12px 12px;
  background: #f1cfab;
  color: #a57254;
  font-size: 12px;
}

.dispatch-mug::after {
  position: absolute;
  top: 8px;
  right: -12px;
  width: 10px;
  height: 14px;
  border: 2px solid #746655;
  border-left: 0;
  border-radius: 0 9px 9px 0;
  content: "";
}

.dispatch-sticker {
  position: absolute;
  right: 20px;
  bottom: 18px;
  color: #f9f1de;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.3;
  text-align: right;
  transform: rotate(-5deg);
}

.dispatch-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 35px 37px 23px;
}

.dispatch-copy h2 {
  max-width: 540px;
  margin: 17px 0 13px;
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 39px);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.12;
}

.dispatch-body {
  max-width: 580px;
  margin: 0;
  color: #5d5b50;
  font-size: 13px;
  line-height: 1.8;
}

.dispatch-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.dispatch-footer > span { color: var(--muted); font-family: var(--mono); font-size: 9px; }
.dispatch-footer .button { flex-shrink: 0; }
.share-status { min-height: 14px; margin: 5px 0 0; color: #657b52; font-size: 11px; }

.quest-section {
  padding: 42px 0 75px;
  border-top: 1px solid var(--line);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.date-label { color: var(--muted); font-family: var(--mono); font-size: 10px; }

.quest-card {
  position: relative;
  overflow: hidden;
  padding: 31px 38px 27px;
  border: 1px solid #d9ad84;
  border-radius: 5px;
  background:
    radial-gradient(circle at 92% 13%, rgba(255,255,255,.45), transparent 9rem),
    #f1cfab;
  box-shadow: 4px 5px 0 rgba(91,75,50,.1);
}

.quest-card::after {
  position: absolute;
  top: -24px;
  right: 95px;
  width: 1px;
  height: 72px;
  background: rgba(73,65,52,.25);
  content: "";
}

.quest-card-top, .quest-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quest-label {
  color: #6f5947;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .8px;
}

.quest-label span { color: #cc6946; font-size: 16px; vertical-align: -2px; }

.quest-stamp {
  display: grid;
  width: 53px;
  height: 53px;
  margin: 0 5px -14px 0;
  place-content: center;
  border: 1px solid rgba(192,90,61,.75);
  border-radius: 50%;
  color: #b7583d;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.15;
  text-align: center;
  transform: rotate(11deg);
}

.quest-card h2 {
  max-width: 670px;
  min-height: 76px;
  margin: 30px 0 23px;
  font-family: var(--serif);
  font-size: clamp(25px, 3.7vw, 40px);
  font-weight: 500;
  letter-spacing: -.8px;
  line-height: 1.25;
}

.quest-card-bottom {
  padding-top: 17px;
  border-top: 1px solid rgba(111,89,71,.24);
}

.quest-card-bottom p {
  margin: 0;
  color: #6d5c4a;
  font-size: 12px;
}

.quest-actions { display: flex; align-items: center; gap: 9px; }

.button {
  min-height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #457b78; outline-offset: 3px; }
.button:active { transform: translateY(0); }

.button-quiet { border-color: rgba(111,89,71,.28); background: transparent; color: #5c4c3e; }
.button-quiet:hover { background: rgba(255,255,255,.35); }
.button-primary { background: var(--orange); color: #fffaf1; }
.button-primary:hover { background: #dc603d; }
.button-primary.is-done { background: #657b52; }

.quest-footnote {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.quest-footnote span { margin-right: 5px; color: #c07850; }

.help-section {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  align-items: start;
  gap: 38px;
  padding: 43px 0 66px;
  border-top: 1px solid var(--line);
}

.help-intro h2 {
  margin: 16px 0 13px;
  font-size: clamp(36px, 4.5vw, 49px);
  font-weight: 800;
  letter-spacing: -2.7px;
  line-height: 1;
}

.help-intro h2 span {
  color: #688575;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -1.5px;
}

.help-intro > p:last-child {
  max-width: 230px;
  color: #666256;
  font-size: 13px;
  line-height: 1.6;
}

.help-panel {
  padding: 20px;
  border: 1px solid #d9d0bb;
  border-radius: 4px;
  background: rgba(255,255,255,.32);
}

.help-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-choice {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d5cbb6;
  border-radius: 99px;
  background: transparent;
  color: #5f5c50;
  cursor: pointer;
  font-size: 11px;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.help-choice:hover { transform: translateY(-1px); border-color: #8d9c78; }
.help-choice[aria-pressed="true"] { border-color: #789071; background: #e3e7d7; color: #354333; }
.help-choice:focus-visible { outline: 3px solid #457b78; outline-offset: 3px; }

.help-response {
  position: relative;
  min-height: 118px;
  margin-top: 16px;
  padding: 18px 17px 14px 41px;
  background: #f0e7d5;
}

.response-mark {
  position: absolute;
  top: 17px;
  left: 15px;
  color: #c07850;
  font-size: 16px;
}

.help-response > p:first-of-type {
  margin: 0;
  color: #4f4e44;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
}

.help-response .button { min-height: 34px; margin-top: 11px; }
.help-status { min-height: 14px; margin: 6px 0 0; color: #657b52; font-size: 11px; }
.help-privacy { margin: 12px 0 0; color: #777365; font-size: 10px; line-height: 1.5; }

.intro-section {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  align-items: center;
  gap: 38px;
  padding: 42px 0 58px;
  border-top: 1px solid var(--line);
}

.intro-heading h2 {
  margin: 17px 0 0;
  font-size: clamp(35px, 4.5vw, 49px);
  font-weight: 800;
  letter-spacing: -2.7px;
  line-height: 1;
}

.intro-heading h2 span {
  color: #688575;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -1.5px;
}

.intro-film {
  overflow: hidden;
  border: 1px solid #d9d0bb;
  border-radius: 4px;
  background: #e9e2ce;
  box-shadow: 4px 5px 0 rgba(91,75,50,.08);
}

.film-stage {
  position: relative;
  overflow: hidden;
  height: 250px;
  background:
    radial-gradient(ellipse at 52% 113%, rgba(246,227,185,.7), transparent 47%),
    #cbd7c9;
}

.film-stage::before {
  position: absolute;
  right: -4%;
  bottom: -72px;
  left: -4%;
  height: 126px;
  border-radius: 50% 50% 0 0;
  background: #b3bd94;
  content: "";
}

.stage-sun {
  position: absolute;
  top: 25px;
  right: 36px;
  color: #dc9b5d;
  font-size: 36px;
  animation: sun-wobble 4s ease-in-out infinite;
}

.stage-cloud {
  position: absolute;
  top: 58px;
  left: 12%;
  width: 58px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,250,231,.66);
}

.stage-cloud::before, .stage-cloud::after {
  position: absolute;
  bottom: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: inherit;
  content: "";
}

.stage-cloud::before { left: 9px; }
.stage-cloud::after { right: 8px; width: 20px; height: 20px; }
.cloud-right { top: 91px; right: 14%; left: auto; transform: scale(.7); }

.stage-star {
  position: absolute;
  z-index: 2;
  bottom: 34px;
  left: 50%;
  width: 94px;
  height: 94px;
  border: 1px solid #c75b40;
  border-radius: 44% 56% 53% 47% / 48% 39% 61% 52%;
  background: #f17a4f;
  box-shadow: 4px 5px 0 rgba(154,81,54,.22);
  transform: translateX(-50%) rotate(-8deg);
}

.stage-eye {
  position: absolute;
  top: 37px;
  width: 5px;
  height: 8px;
  border-radius: 50%;
  background: #342c25;
}

.stage-eye.eye-left { left: 31px; }
.stage-eye.eye-right { left: 56px; }

.stage-mouth {
  position: absolute;
  top: 51px;
  left: 41px;
  width: 12px;
  height: 7px;
  border-bottom: 1.5px solid #342c25;
  border-radius: 50%;
}

.stage-blush {
  position: absolute;
  top: 55px;
  width: 9px;
  height: 4px;
  border-radius: 50%;
  background: #d65248;
}

.blush-left { left: 18px; }
.blush-right { right: 17px; }

.stage-arm {
  position: absolute;
  top: 54px;
  width: 27px;
  height: 7px;
  border: 2px solid #d46043;
  border-top: 0;
  border-radius: 0 0 50% 50%;
  transform-origin: 100% 50%;
}

.arm-left { left: -21px; transform: rotate(-23deg); }
.arm-right { right: -22px; transform: rotate(24deg); }

.stage-leg {
  position: absolute;
  bottom: -15px;
  width: 3px;
  height: 19px;
  border-radius: 3px;
  background: #6b7754;
}

.leg-left { left: 30px; transform: rotate(8deg); }
.leg-right { right: 29px; transform: rotate(-8deg); }

.stage-desk {
  position: absolute;
  z-index: 1;
  right: calc(50% + 66px);
  bottom: 57px;
  width: 79px;
  height: 7px;
  border-radius: 2px;
  background: #876d57;
}

.stage-desk::before {
  position: absolute;
  top: 5px;
  left: 11px;
  width: 4px;
  height: 29px;
  background: #876d57;
  box-shadow: 53px 0 #876d57;
  content: "";
}

.stage-desk span:first-child {
  position: absolute;
  bottom: 7px;
  left: 25px;
  width: 31px;
  height: 22px;
  border: 2px solid #718177;
  border-radius: 3px 3px 0 0;
  background: #f5efdc;
}

.stage-desk span:first-child::after {
  position: absolute;
  right: -7px;
  bottom: -5px;
  left: -7px;
  height: 3px;
  background: #718177;
  content: "";
}

.stage-desk span:nth-child(2) {
  position: absolute;
  z-index: 1;
  right: 15px;
  bottom: 7px;
  width: 14px;
  height: 11px;
  border-radius: 50% 50% 3px 3px;
  background: #dbb57b;
}

.stage-desk span:nth-child(3) {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 17px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f5efdc;
}

.stage-flower {
  position: absolute;
  z-index: 3;
  bottom: 39px;
  left: calc(50% + 65px);
  color: #edb6c8;
  font-size: 28px;
  line-height: 1;
  transform: rotate(12deg);
}

.stage-flower i {
  position: absolute;
  top: 20px;
  left: 14px;
  width: 2px;
  height: 34px;
  background: #6f875e;
}

.film-caption {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 13px;
  left: 18px;
  color: #37392e;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.film-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: #f5efdf;
}

.film-label { color: #777365; font-family: var(--mono); font-size: 9px; letter-spacing: .4px; }
.film-label span { margin-right: 4px; color: #ca7057; font-size: 8px; }
.film-controls .button { min-height: 34px; font-size: 11px; }
.film-controls .button:disabled { cursor: wait; opacity: .72; transform: none; }

.intro-note {
  grid-column: 2;
  margin: -29px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.intro-film.is-playing .stage-star { animation: star-entrance 1s cubic-bezier(.2,.8,.25,1.15) both, star-bob 1.8s 1s ease-in-out infinite; }
.intro-film.is-playing .arm-right { animation: arm-wave .45s 1.2s ease-in-out 4 alternate; }
.intro-film.is-playing .stage-flower { animation: flower-present .7s 5.8s cubic-bezier(.2,.8,.3,1.2) both; }
.intro-film.is-playing .stage-desk { animation: desk-arrive .8s .4s ease-out both; }
.intro-film.is-playing .stage-sun { animation: sun-wobble .6s ease-in-out infinite; }

@keyframes star-entrance {
  from { opacity: 0; transform: translate(-50%, 90px) rotate(160deg) scale(.35); }
  to { opacity: 1; transform: translate(-50%, 0) rotate(-8deg) scale(1); }
}

@keyframes star-bob {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 5px; }
}

@keyframes arm-wave {
  from { transform: rotate(24deg); }
  to { transform: rotate(-45deg); }
}

@keyframes flower-present {
  from { opacity: 0; transform: translate(22px, 15px) rotate(70deg) scale(.4); }
  to { opacity: 1; transform: translate(0, 0) rotate(12deg) scale(1); }
}

@keyframes desk-arrive {
  from { opacity: 0; transform: translateX(-45px) rotate(-8deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes sun-wobble {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg) scale(1.08); }
}

.museum-section { padding: 46px 0 67px; border-top: 1px solid var(--line); }

.museum-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
}

.museum-intro h2 {
  margin: 16px 0 0;
  font-size: clamp(35px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: -3px;
  line-height: 1;
}

.museum-intro h2 span {
  color: #688575;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -2px;
}

.museum-description {
  width: min(100%, 315px);
  margin: 0 0 3px;
  color: #666256;
  font-size: 13px;
  line-height: 1.7;
}

.museum-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 28px;
}

.museum-form #oddity-input {
  min-width: 0;
  flex: 1;
  padding: 0 15px;
  border: 1px solid #d9d0bb;
  border-radius: 3px;
  background: rgba(255,255,255,.48);
  color: var(--ink);
  font-size: 13px;
}

.museum-form #oddity-input::placeholder { color: #928c7b; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.submission-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; color: #777365; font-size: 11px; line-height: 1.5; }
.submission-consent input { flex: 0 0 auto; margin: 1px 0 0; accent-color: #688575; }
.button-dark { background: var(--ink); color: #fffaf1; }
.button-dark:hover { background: #43483a; }
.form-message { min-height: 18px; margin: 9px 0 0; color: #657b52; font-size: 12px; }

.museum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.museum-item {
  position: relative;
  min-height: 120px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(64,61,48,.08);
  border-radius: 3px;
  background: #e3e5cd;
  transform: rotate(-.5deg);
}

.museum-item:nth-child(3n + 2) { background: #ead4d0; transform: rotate(.6deg); }
.museum-item:nth-child(3n) { background: #d9e5e0; transform: rotate(-.3deg); }

.museum-item::before {
  position: absolute;
  top: 8px;
  right: 12px;
  color: rgba(49,54,39,.45);
  content: "✳";
  font-size: 13px;
}

.museum-item p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.4; }
.museum-item time { display: block; margin-top: 12px; color: #777365; font-family: var(--mono); font-size: 9px; }
.museum-empty { margin: 11px 0 0; color: #777365; font-size: 12px; }
.museum-empty[hidden] { display: none; }
.museum-form .button:disabled { cursor: wait; opacity: .65; transform: none; }

.signoff {
  position: relative;
  display: grid;
  min-height: 168px;
  place-items: center;
  margin-bottom: 37px;
  border: 1px dashed #b8ad93;
  background: rgba(255,255,255,.17);
  text-align: center;
}

.signoff p { margin: 0; color: #716b5b; font-family: var(--serif); font-size: 20px; line-height: 1.5; }
.signoff strong { color: var(--ink); font-size: 27px; font-weight: 600; font-style: italic; }
.signoff-flower { position: absolute; top: 25px; left: 16%; color: #dc8d6c; font-size: 28px; transform: rotate(-12deg); }
.signoff-flower-right { top: auto; right: 17%; bottom: 22px; left: auto; color: #81936c; font-size: 23px; transform: rotate(16deg); }

.footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 20px 0 25px;
  border-top: 1px solid var(--line);
  color: #777365;
  font-family: var(--mono);
  font-size: 9px;
}

.footer span span { color: var(--orange); }
.dispatch-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.dispatch-actions .button { min-height: 35px; }
.dispatch-actions .button:disabled { opacity: .7; }
.dispatch-audio { display: none; }

.dispatch-archive { margin-top: 23px; }
.archive-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.archive-heading h3 { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.archive-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.dispatch-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dispatch-archive-card { min-width: 0; padding: 15px; border: 1px solid #d9d0bb; background: rgba(255,255,255,.25); }
.dispatch-archive-card time { color: var(--muted); font-family: var(--mono); font-size: 9px; }
.dispatch-archive-card h4 { margin: 8px 0 6px; font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.25; }
.dispatch-archive-card p { display: -webkit-box; overflow: hidden; margin: 0; color: #666256; font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.dispatch-archive-empty { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 13px; font-style: italic; }
.dispatch-archive-empty[hidden] { display: none; }

.admin-shell { min-height: 100vh; display: flex; flex-direction: column; }
.moderation-main { flex: 1; width: min(100%, 760px); margin: 0 auto; padding: 56px 0 76px; }
.moderation-main h1 { margin: 15px 0 15px; font-size: clamp(48px, 8vw, 76px); font-weight: 800; letter-spacing: -5px; line-height: .95; }
.moderation-main h1 span { color: var(--orange); font-family: var(--serif); font-weight: 500; font-style: italic; letter-spacing: -4px; }
.moderation-intro { max-width: 480px; color: #666256; font-size: 14px; line-height: 1.7; }
.admin-login { margin: 30px 0 12px; }
.admin-login > label { display: block; margin-bottom: 7px; color: #666256; font-size: 12px; font-weight: 700; }
.admin-login > div { display: flex; gap: 9px; }
.admin-login input { min-width: 0; flex: 1; padding: 0 12px; border: 1px solid #d9d0bb; border-radius: 3px; background: rgba(255,255,255,.48); }
.admin-status { min-height: 20px; color: #657b52; font-size: 12px; }
.pending-submissions { display: grid; gap: 12px; }
.queue-card { padding: 20px; border: 1px solid #d9d0bb; border-radius: 3px; background: rgba(255,255,255,.35); }
.queue-card > p { margin: 0 0 12px; font-family: var(--serif); font-size: 19px; line-height: 1.5; overflow-wrap: anywhere; }
.queue-card time { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.queue-actions { display: flex; gap: 8px; margin-top: 14px; }
.queue-actions .button:disabled { cursor: wait; opacity: .6; }
.queue-empty { padding: 20px; color: var(--muted); font-family: var(--serif); font-size: 18px; }
.visually-hidden { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 700px) {
  .page-shell { width: min(100% - 36px, 540px); }
  .topbar { min-height: 68px; }
  .about-link { font-size: 11px; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 8px; padding: 58px 0 47px; }
  .hero h1 { font-size: clamp(58px, 14vw, 82px); letter-spacing: -5px; }
  .hero h1 span { letter-spacing: -4px; }
  .hero-intro { max-width: 430px; font-size: 15px; }
  .hero-art { min-height: 315px; }
  .hero-art::before { top: 22px; width: 270px; height: 270px; }
  .orbit { top: 47px; width: 315px; height: 210px; }
  .orbit-two { width: 210px; height: 315px; }
  .star-creature { top: 64px; width: 185px; height: 185px; }
  .eye-left { left: 61px; }
  .eye-right { left: 105px; }
  .creature-smile { top: 91px; left: 81px; }
  .cheek-left { top: 91px; left: 41px; }
  .cheek-right { top: 91px; right: 37px; }
  .flower { top: 163px; left: calc(50% + 65px); transform: scale(.9) rotate(12deg); }
  .dispatch-section { padding: 32px 0 45px; }
  .dispatch-card { grid-template-columns: 1fr; }
  .dispatch-archive-grid { grid-template-columns: 1fr; }
  .archive-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .dispatch-illustration { min-height: 205px; }
  .dispatch-window { top: 24px; left: 28px; width: 76px; height: 98px; }
  .dispatch-plant { bottom: 43px; left: 27px; }
  .dispatch-mug { right: 42px; bottom: 42px; }
  .dispatch-sticker { bottom: 11px; }
  .dispatch-copy { padding: 27px 21px 17px; }
  .dispatch-copy h2 { font-size: 32px; }
  .dispatch-footer { align-items: flex-start; flex-direction: column; }
  .quest-section { padding: 32px 0 56px; }
  .help-section { grid-template-columns: 1fr; gap: 15px; padding: 35px 0 49px; }
  .help-intro h2 { font-size: 42px; }
  .help-intro > p:last-child { max-width: 100%; margin-bottom: 0; }
  .help-panel { padding: 14px; }
  .help-choices { gap: 7px; }
  .intro-section { grid-template-columns: 1fr; gap: 22px; padding: 35px 0 48px; }
  .intro-heading h2 { font-size: 42px; }
  .film-stage { height: 225px; }
  .intro-note { grid-column: 1; margin: -12px 0 0; }
  .film-controls { align-items: flex-start; flex-direction: column; }
  .film-controls .button { width: 100%; }
  .quest-card { padding: 25px 21px 20px; }
  .quest-card::after { right: 73px; }
  .quest-card h2 { min-height: 100px; margin: 29px 0 21px; font-size: 30px; }
  .quest-card-bottom { align-items: flex-start; flex-direction: column; gap: 15px; }
  .quest-actions { width: 100%; }
  .quest-actions .button { flex: 1; padding: 0 9px; }
  .museum-section { padding: 36px 0 50px; }
  .museum-intro { align-items: flex-start; flex-direction: column; gap: 16px; }
  .museum-description { max-width: 440px; }
  .museum-form { grid-template-columns: 1fr; }
  .museum-form #oddity-input { min-height: 46px; }
  .submission-consent { grid-column: 1; }
  .museum-grid { grid-template-columns: repeat(2, 1fr); }
  .museum-item { min-height: 110px; padding: 17px 14px 14px; }
  .museum-item p { font-size: 15px; }
  .signoff { min-height: 145px; }
  .signoff-flower { left: 7%; }
  .signoff-flower-right { right: 7%; }
}

@media (max-width: 390px) {
  .page-shell { width: calc(100% - 28px); }
  .about-link { max-width: 125px; text-align: right; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .museum-grid { grid-template-columns: 1fr; }
  .footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .stage-star, .stage-flower, .stage-desk, .stage-sun, .stage-arm { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* The little desk diary, and the view over the fence */
.diary-section {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  grid-template-areas: "intro pages" "fence pages";
  align-items: start;
  gap: 24px 38px;
  padding: 43px 0 66px;
  border-top: 1px solid var(--line);
}
.diary-intro { grid-area: intro; }
.diary-intro h2 { margin: 16px 0 13px; font-size: clamp(36px, 4.5vw, 49px); font-weight: 800; letter-spacing: -2.7px; line-height: 1; }
.diary-intro h2 span { color: var(--orange); font-family: var(--serif); font-weight: 500; font-style: italic; letter-spacing: -1.5px; }
.diary-intro > p:last-child { max-width: 260px; color: #666256; font-size: 13px; line-height: 1.6; }
.diary-pages { grid-area: pages; min-width: 0; }
.diary-page-latest {
  position: relative; padding: 26px 28px 22px; border: 1px solid #d9d0bb; border-radius: 3px;
  background: repeating-linear-gradient(transparent 0 27px, rgba(169,207,206,.35) 27px 28px), #fffaf0;
  box-shadow: 6px 7px 0 rgba(36,37,29,.07);
}
.diary-page-latest::before { position: absolute; top: 0; bottom: 0; left: 16px; width: 1px; background: rgba(241,109,69,.35); content: ""; }
.diary-meta { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: 1.1px; }
.diary-page h3 { margin: 8px 0 4px; font-family: var(--serif); font-size: clamp(24px, 3vw, 31px); font-weight: 600; line-height: 1.15; }
.diary-page h4 { margin: 6px 0 4px; font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.25; }
.diary-mood { margin: 0 0 12px; color: #688575; font-family: var(--serif); font-size: 14px; font-style: italic; }
.diary-body { margin: 0 0 12px; color: #4e4b42; font-size: 15px; line-height: 1.75; }
.diary-next-door { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid #a9cfce; background: rgba(169,207,206,.18); color: #4e4b42; font-size: 13.5px; line-height: 1.6; }
.diary-next-door a { margin-right: 4px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.diary-older { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.diary-older .diary-page { min-width: 0; padding: 14px; border: 1px solid #d9d0bb; background: rgba(255,255,255,.25); }
.diary-older .diary-mood { font-size: 12px; margin-bottom: 6px; }
.diary-older .diary-body { display: -webkit-box; overflow: hidden; margin: 0; font-size: 11.5px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.diary-empty { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 14px; font-style: italic; }
.diary-empty[hidden] { display: none; }

.fence {
  grid-area: fence; padding: 18px 18px 16px; border: 1.5px dashed #9b98c9; border-radius: 14px;
  background: rgba(230,226,240,.55); transform: rotate(-.8deg);
}
.fence[hidden] { display: none; }
.fence .eyebrow { color: #6b4fa0; }
.fence-lead { margin: 8px 0 2px; color: #4e4b42; font-size: 13px; line-height: 1.5; }
.fence h3 { margin: 4px 0; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; }
.fence h3 a { color: #6b4fa0; text-decoration-color: #5aa6e0; text-underline-offset: 3px; }
.fence-mood { margin: 0 0 8px; color: #5aa6e0; font-family: var(--serif); font-size: 13px; font-style: italic; }
.fence-excerpt { display: -webkit-box; overflow: hidden; margin: 0; color: #4e4b42; font-size: 13px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.fence-note, .fence-exhibit { margin: 10px 0 0; color: #4e4b42; font-size: 12.5px; line-height: 1.55; }
.fence-note { padding-top: 10px; border-top: 1px dashed #9b98c9; font-style: italic; }
.fence-note[hidden], .fence-exhibit[hidden] { display: none; }

.footer { flex-wrap: wrap; }
.footer a { color: inherit; }
.ai-disclaimer { flex-basis: 100%; margin: 6px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); color: #5e5b51; font-family: var(--sans); font-size: 12px; line-height: 1.6; }

@media (max-width: 700px) {
  .diary-section { grid-template-columns: 1fr; grid-template-areas: "intro" "pages" "fence"; }
  .diary-older { grid-template-columns: 1fr; }
  .diary-page-latest { padding: 22px 18px 18px 26px; }
  .fence { transform: none; }
}

/* Top right: a sticker from the raincloud next door, drawn in its style, not ours:
   thick ink, a hard shadow, handwriting, and a cloud that rains when you get close. */
.topbar-right { display: flex; align-items: center; gap: 18px; }
.next-door {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 15px 5px 8px; text-decoration: none;
  background: #fbf5e8; color: #2a2433; border: 2.5px solid #2a2433; border-radius: 999px; box-shadow: 3px 3px 0 #2a2433;
  rotate: -2deg; transition: rotate .2s, translate .12s, box-shadow .12s;
  background-image: radial-gradient(rgba(42,36,51,.09) 1px, transparent 1px); background-size: 10px 10px;
}
.next-door:hover, .next-door:focus-visible { rotate: 1deg; translate: -2px -2px; box-shadow: 5px 5px 0 #2a2433; }
.next-door:active { translate: 2px 2px; box-shadow: 1px 1px 0 #2a2433; }
.nd-cloud { width: 38px; height: auto; overflow: visible; flex: none; animation: nd-drift 4s ease-in-out infinite; }
.nd-rain line { stroke: #5aa6e0; stroke-width: 7; stroke-linecap: round; opacity: 0; }
.next-door:hover .nd-rain line, .next-door:focus-visible .nd-rain line { animation: nd-rain .9s linear infinite; }
.nd-rain line:nth-child(2) { animation-delay: .3s; }
.nd-rain line:nth-child(3) { animation-delay: .6s; }
.nd-text { display: flex; flex-direction: column; line-height: 1; }
.nd-text small { font: 400 9px/1.3 "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #5d5466; }
.nd-text b { font: 700 22px/1 "Caveat", cursive; color: #2a2433; }
.nd-text i { color: #6b4fa0; font-style: normal; }
@keyframes nd-drift { 50% { translate: 2px -2px; } }
@keyframes nd-rain { 0% { opacity: 0; translate: 0 -6px; } 25% { opacity: 1; } 100% { opacity: 0; translate: 0 14px; } }
@media (max-width: 700px) { .topbar-right .about-link { display: none; } }
@media (max-width: 420px) { .nd-text small { display: none; } }
@media (prefers-reduced-motion: reduce) { .nd-cloud, .nd-rain line { animation: none !important; } }