@font-face {
  font-family: SchoolSerif;
  src: url('../assets/fonts/SourceHanSerifCN-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: SiteSans;
  src: url('../assets/fonts/NotoSansSC%5Bwght%5D.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #fffdf8;
  --paper: #322e2b;
  --muted: #736c62;
  --green: #c72731;
  --line: #dfd5c6;
  --serif: SchoolSerif, serif;
  --sans: SiteSans, sans-serif;
  --anniversary-red: #c72731;
}
body { background: var(--ink); color: var(--paper); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip { background: var(--anniversary-red); color: #fff; }
.masthead { top: 22px; align-items: flex-start; mix-blend-mode: normal; }
.anniversary-mark {
  display: block;
  width: 150px;
  height: auto;
  aspect-ratio: 355 / 300;
  overflow: hidden;
  stroke: none;
}
.edition { padding-top: 17px; color: var(--anniversary-red); font-weight: 500; }
.edition-note { color: #766b60; }
.chapter-nav a { color: #756d62; }
.chapter-nav a:before { border-color: #a49179; }
.chapter-nav a[aria-current] { color: var(--anniversary-red); }
.chapter-nav a[aria-current]:before { background: var(--anniversary-red); border-color: var(--anniversary-red); }
.stage {
  background: radial-gradient(ellipse at 60% 105%, #fff0d6 0, transparent 55%), #fffdf8;
}
.stage:after {
  background-image: none;
  opacity: 1;
  box-shadow: inset 0 -38px 45px #fffdf8;
}
.hero-context { color: #756655; font-weight: 500; }
.hero h1 { color: #bd2935; }
.hero-subtitle { color: #6d6258; }
.explore { color: #8c2b32; font-weight: 500; }
.spatial-label p { color: #7b6d5c; }
.spatial-label h2 { color: #41352e; }
.gallery-loading {
  position: absolute;
  left: 50%;
  top: 66%;
  transform: translateX(-50%);
  z-index: 6;
  color: #756552;
  font-size: 13px;
}
.scene-tools {
  background: #ffffffed;
  border-color: #e4d7c5;
  box-shadow: 0 8px 30px #80654312;
}
.scene-tools button { color: #a72a32; }
.scene-tools button:hover { background: #faeee7; }
.scene-tools span { color: #6e6052; }
.bottom-rail { color: #736352; }
.bottom-rail a { color: #9d2932; font-weight: 500; }
.progress-track { background: #e5d6c0; }
.progress-track span { background: #c72731; }
.scene-fallback { background: #fffdf8; }
.scene-fallback span { color: #746657; }
.workshop-entry {
  background: #fff8ed;
  border-top: 1px solid #eee1ce;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: 6%;
  padding: 145px 6% 120px 15%;
}
.entry-context { color: #b32833; font-weight: 500; }
.entry-copy h2 { color: #a92a32; }
.entry-description { color: #6b5e51; }
.enter-workshop {
  color: #fff;
  background: #c72731;
  border-color: #c72731;
  font-weight: 500;
}
.enter-workshop:hover { background: #a9232c; border-color: #a9232c; }
.entry-note { color: #7b6b5a; font-size: 12px; }
.entry-art {
  height: auto;
  margin: 0;
  background: #fff;
  padding: 14px 14px 0;
  border: 1px solid #ecdfca;
  box-shadow: 0 24px 55px #8a65321a;
  transform: rotate(-3deg);
}
.entry-art img { display: block; width: 100%; height: auto; }
.entry-art figcaption {
  display: flex;
  justify-content: space-between;
  padding: 19px 5px 21px;
  gap: 18px;
  font-size: 13px;
  color: #514132;
}
.entry-art figcaption span { color: #96785c; font-size: 11px; }
.entry-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 18px;
  width: 100%;
  max-width: 720px;
  align-items: start;
}
.entry-gallery .entry-art { width: 100%; max-width: none; grid-row: auto; padding: 10px 10px 0; transform: rotate(1.3deg); }
.entry-gallery .entry-art--lead { grid-column: 1 / -1; padding: 14px 14px 0; transform: rotate(-1.4deg); }
.entry-gallery .entry-art:last-child { transform: rotate(-1.2deg); }
.entry-gallery .entry-art figcaption { padding: 13px 3px 16px; gap: 8px; }
.entry-gallery .entry-art--lead figcaption { padding: 17px 5px 20px; }
.entry-photo-window { display: block; width: 100%; height: auto; aspect-ratio: 2084 / 1212; overflow: hidden; stroke: none; }
.entry-gallery .entry-botanical { width: 100%; aspect-ratio: 2084 / 1212; height: auto; object-fit: contain; }
.entry-art--planning figcaption { flex-wrap: wrap; }
.entry-art--planning figcaption span { color: #b82431; }
.page-footer { background: #fffdf8; color: #746657; }
.page-footer div { display: flex; gap: 28px; }
.page-footer a:hover { color: #b32732; }
#workshop-dialog { background: #fffdf8; }
#workshop-dialog::backdrop { background: #eee2ce; }
#workshop-dialog[open] { display: flex; flex-direction: column; }
#workshop-dialog[open] > #module-container { height: auto; flex: 1; min-height: 0; }
.dialog-bar { flex: none; }
.dialog-bar { background: #fffdf8; border-color: #e3d8c7; }
.dialog-bar h2 { color: #ae2630; }
.dialog-bar button { color: #a5252e; border-color: #d9beb1; }

@media (max-width: 900px) {
  .anniversary-mark { width: 135px; }
  .edition { padding-top: 12px; }
  .entry-art { height: auto; }
  .workshop-entry { grid-template-columns: minmax(250px, .82fr) minmax(0, 1.18fr); padding-left: 14%; padding-right: 5%; gap: 5%; }
  .entry-gallery { gap: 16px 12px; }
  .entry-gallery .entry-art:not(.entry-art--lead):not(.entry-art--planning) figcaption span { display: none; }
}
@media (max-width: 600px) {
  .masthead { top: 16px; }
  .anniversary-mark { width: 110px; }
  .edition { padding-top: 7px; }
  .chapter-nav { top: 123px; }
  .entry-art { height: auto; padding: 10px 10px 0; }
  .entry-art figcaption { padding: 16px 2px 17px; }
  .workshop-entry { grid-template-columns: 1fr; padding: 120px 28px 70px; gap: 45px; }
  .entry-gallery { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 26px; }
  .entry-gallery .entry-art--lead { grid-column: auto; padding: 10px 10px 0; }
  .entry-gallery .entry-art:not(.entry-art--lead):not(.entry-art--planning) figcaption span { display: inline; }
  .gallery-loading { top: 58%; white-space: nowrap; }
  .dialog-bar { height: auto; min-height: 66px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 8px 12px; }
  .dialog-bar #close-workshop { grid-column: 2; grid-row: 1; }
  .dialog-bar #module-status { grid-column: 1 / -1; grid-row: 2; white-space: normal; line-height: 1.6; overflow-wrap: anywhere; }
  .dialog-bar #module-status:empty { display: none; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .anniversary-mark { width: 95px; }
  .masthead { top: 10px; }
  .edition { padding-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage:after { opacity: 1; }
}