:root {
  --ink:#172f2b;
  --ink-deep:#10241f;
  --paper:#f4f1e9;
  --gold:#d9bd82;
  --text:#253932;
  --muted:#77827a;
  --line:#dadcd1;
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"Microsoft YaHei","PingFang SC",system-ui,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:88px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  -webkit-font-smoothing:antialiased
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
img {
  max-width:100%;
  display:block
}
button {
  border:0;
  background:none
}
button:disabled {
  cursor:wait;
  opacity:.5
}
button:focus-visible,a:focus-visible,canvas:focus-visible {
  outline:2px solid #c59c50;
  outline-offset:5px
}
::selection {
  background:var(--gold);
  color:var(--ink)
}
[hidden] {
  display:none!important
}
.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  padding:12px;
  background:var(--gold);
  z-index:100
}
.skip-link:focus {
  top:12px
}
.site-header {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5%;
  border-bottom:1px solid #ffffff15;
  background:var(--ink);
  color:var(--paper);
  position:relative;
  z-index:20
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0
}
.brand-mark {
  width:38px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold);
  color:var(--gold);
  font:40px var(--serif);
  border-radius:18px 18px 4px 4px
}
.brand strong {
  font:600 21px var(--serif);
  letter-spacing:2px
}
.brand small {
  display:block;
  font-size:8px;
  letter-spacing:3px;
  margin-top:7px;
  color:#b8bdb2
}
.brand-dot {
  color:var(--gold)
}
.desktop-nav {
  display:flex;
  align-self:stretch;
  gap:36px
}
.desktop-nav a {
  display:flex;
  align-items:center;
  position:relative;
  font-size:13px;
  color:#c4ccc3;
  transition:color .2s
}
.desktop-nav a:hover,.desktop-nav a.active {
  color:var(--gold)
}
.desktop-nav a.active:after {
  content:"";
  position:absolute;
  bottom:19px;
  left:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--gold)
}
.header-actions {
  display:flex;
  align-items:center;
  gap:25px
}
.language-label {
  font-size:10px;
  letter-spacing:2px;
  color:#a7b6a8
}
.header-explore {
  font-size:12px;
  border:1px solid #d9bd8270;
  padding:12px 19px;
  color:var(--gold)
}
.header-explore span {
  padding-left:20px
}
.menu-button {
  display:none;
  color:var(--gold);
  font-size:25px
}
.hero {
  padding:26px 5% 0;
  background:radial-gradient(ellipse at 75% 55%,#34504360,transparent 48%),var(--ink);
  color:var(--paper);
  overflow:hidden
}
.hero-topline,.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#a9b7a8;
  font-size:10px;
  letter-spacing:2px
}
.hero-topline {
  padding:0 0 14px
}
.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--gold);
  border-radius:50%;
  margin-right:9px;
  box-shadow:0 0 0 4px #d9bd820c
}
.edition {
  font-size:9px;
  letter-spacing:2.7px
}
.hero-layout {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  position:relative;
  min-height:625px;
  max-width:1480px;
  margin:auto
}
.hero-copy {
  padding-top:58px;
  z-index:2
}
.eyebrow {
  font-size:10px;
  letter-spacing:2.8px;
  font-weight:400;
  line-height:1.8
}
.hero-copy .eyebrow {
  color:var(--gold);
  font-size:11px;
  letter-spacing:3px;
  display:flex;
  align-items:center;
  gap:12px
}
.gold-line {
  width:26px;
  height:1px;
  background:var(--gold)
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font:500 clamp(49px,5.1vw,80px)/1.3 var(--serif);
  letter-spacing:5px;
  margin:30px 0 20px
}
.outlined-text {
  color:var(--gold)
}
.hero-english {
  font:400 11px/1.7 Georgia,serif;
  letter-spacing:4.5px;
  color:#a7b7a4
}
.hero-description {
  font-size:13px;
  line-height:2.1;
  color:#bac4b7;
  letter-spacing:1px;
  margin:26px 0
}
.hero-buttons {
  display:flex;
  align-items:center;
  gap:27px;
  margin-top:28px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:17px 23px;
  font-size:12px;
  letter-spacing:1px;
  transition:background .2s,transform .2s;
  min-height:48px
}
.button:hover {
  transform:translateY(-3px)
}
.button-gold {
  background:var(--gold);
  color:var(--ink-deep)
}
.button-gold:hover {
  background:#ead2a1
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  letter-spacing:.5px;
  color:#d6dccb
}
.text-link:hover {
  color:var(--gold)
}
.circle-icon {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid #b6c1ad55;
  border-radius:50%
}
.hero-footnote {
  display:flex;
  align-items:center;
  gap:15px;
  margin:43px 0 34px
}
.heritage-seal {
  display:block;
  font:15px/1.3 var(--serif);
  padding:6px;
  border:1px solid #bda16a85;
  color:var(--gold);
  transform:rotate(-5deg)
}
.hero-footnote p {
  font-size:10px;
  line-height:2;
  margin:0;
  color:#c4cbbc;
  letter-spacing:1px
}
.hero-footnote p span {
  color:#849789
}
.exhibit {
  position:relative;
  min-width:0;
  isolation:isolate;
  margin:12px 26px 30px 0;
  height:592px
}
.exhibit-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:absolute;
  top:20px;
  left:24px;
  right:0;
  z-index:5
}
.exhibit-label {
  font-size:10px;
  letter-spacing:2px;
  color:#c0c9b6
}
.icon-button {
  width:36px;
  height:36px;
  display:inline-grid;
  place-items:center;
  border:1px solid #d9bd8230;
  border-radius:50%;
  color:var(--gold);
  font-size:18px;
  transition:background .2s
}
.icon-button:hover {
  background:#d9bd8222
}
.viewer {
  position:absolute;
  inset:30px 0 87px;
  z-index:2
}
.model-poster {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  inset:0;
  filter:drop-shadow(0 12px 24px #06171255);
  transition:opacity .4s;
  opacity:1;
  padding:12px 35px 0
}
.viewer canvas {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  opacity:0;
  transition:opacity .4s;
  touch-action:pan-y
}
.viewer.is-ready canvas {
  opacity:1;
  touch-action:none
}
.viewer.is-ready .model-poster {
  opacity:0;
  pointer-events:none
}
.exhibit-watermark {
  position:absolute;
  top:47%;
  left:50%;
  transform:translate(-50%,-50%);
  font:100px Georgia,serif;
  letter-spacing:6px;
  color:#c2d3ac07;
  z-index:-1
}
.exhibit-orbit {
  position:absolute;
  border:1px solid #d9bd8218;
  border-radius:50%;
  width:450px;
  height:450px;
  max-width:95%;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%);
  z-index:-1
}
.orbit-two {
  width:360px;
  height:360px;
  border-style:dashed;
  border-color:#d9bd821b
}
.orbit-one:before,.orbit-one:after {
  content:"✧";
  position:absolute;
  color:var(--gold);
  font-size:22px;
  background:#203a2f;
  padding:4px
}
.orbit-one:before {
  top:63px;
  right:40px
}
.orbit-one:after {
  bottom:48px;
  left:40px;
  font-size:15px
}
.model-plinth {
  position:absolute;
  bottom:81px;
  width:65%;
  height:62px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,#576344,#2d4737 70%);
  left:50%;
  transform:translateX(-50%);
  border:1px solid #bca36a33;
  box-shadow:0 9px 0 #1b3329,0 10px 0 #bca36a26,0 27px 40px #071b1880;
  z-index:0
}
.model-caption {
  display:flex;
  gap:16px;
  align-items:center;
  position:absolute;
  bottom:95px;
  left:5px;
  z-index:3;
  pointer-events:none
}
.model-number {
  font:10px Georgia,serif;
  letter-spacing:1px;
  color:var(--gold);
  writing-mode:vertical-rl;
  padding-right:10px;
  border-right:1px solid #d9bd8240
}
.model-caption h2 {
  font:500 28px var(--serif);
  letter-spacing:5px;
  margin:0 0 8px
}
.model-caption p {
  font-size:9px;
  letter-spacing:1px;
  color:#b4bdaa;
  margin:0
}
.model-character {
  font:42px var(--serif);
  color:var(--gold);
  margin-left:8px;
  opacity:.24
}
.viewer-bottom {
  position:absolute;
  bottom:15px;
  left:5px;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #d9bd8228;
  padding-top:16px;
  z-index:5
}
.viewer-status {
  font-size:10px;
  letter-spacing:1px;
  color:#a5b79e
}
.viewer-status button {
  color:var(--gold);
  text-decoration:underline;
  padding:7px
}
.viewer-tools {
  display:flex;
  gap:8px
}
.viewer-tools .icon-button {
  width:31px;
  height:31px;
  font-size:14px
}
.model-progress {
  position:absolute;
  bottom:66px;
  left:5px;
  right:0;
  height:1px;
  background:transparent;
  z-index:5
}
.model-progress span {
  display:block;
  width:0;
  height:100%;
  background:var(--gold);
  transition:width .3s
}
.exhibit-side {
  position:absolute;
  right:-32px;
  top:150px;
  writing-mode:vertical-rl;
  font-size:9px;
  letter-spacing:2px;
  color:#8ea18b
}
.exhibit-side span {
  margin:20px 0
}
.hero-bottom {
  padding:20px 0 24px;
  border-top:1px solid #ffffff17;
  font-size:9px;
  letter-spacing:1px
}
.hero-bottom a {
  display:flex;
  gap:16px;
  color:#d1d7c7
}
.hero-bottom>span:last-child {
  font-family:Georgia,serif
}
.motif-divider {
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:25px;
  padding:20px 4%;
  background:#e9e5d8;
  color:#7e836f;
  font-size:9px;
  letter-spacing:2px;
  border-bottom:1px solid #dddccd;
  white-space:nowrap;
  overflow:hidden
}
.motif-divider span {
  font-size:18px;
  color:#9b885f
}
.section-shell {
  padding:95px 5%;
  max-width:1680px;
  margin:0 auto
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:38px
}
.section-heading .eyebrow,.epic-copy .eyebrow {
  color:#8d7952
}
.section-heading h2,.epic-copy h2 {
  font:500 clamp(27px,2.6vw,40px)/1.5 var(--serif);
  letter-spacing:2px;
  margin:13px 0 0
}
.section-heading h2 span {
  color:#7d8874
}
.section-intro {
  font-size:11px;
  color:#7d8779;
  line-height:2;
  letter-spacing:.5px;
  margin:0 0 5px
}
.collection-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:35px 0 28px;
  border-bottom:1px solid var(--line)
}
.filters {
  display:flex;
  gap:26px
}
.filter {
  padding:14px 0 18px;
  font-size:12px;
  color:#808878;
  position:relative
}
.filter sup {
  font:9px Georgia,serif;
  margin-left:4px
}
.filter.active {
  color:var(--ink)
}
.filter.active:after {
  content:"";
  position:absolute;
  height:2px;
  background:var(--ink);
  bottom:-1px;
  left:0;
  right:0
}
.collection-hint {
  font-size:10px;
  color:#85907e
}
.collection-hint span {
  margin-left:12px
}
.heroes-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px 22px
}
.hero-card {
  position:relative;
  min-width:0;
  transition:transform .25s
}
.hero-card:hover {
  transform:translateY(-5px)
}
.card-visual {
  position:relative;
  background:#e7e8df;
  aspect-ratio:1/.98;
  overflow:hidden
}
.hero-card:nth-child(4n+2) .card-visual {
  background:#e6e2d8
}
.hero-card:nth-child(4n+3) .card-visual {
  background:#e2e7e0
}
.hero-card:nth-child(4n) .card-visual {
  background:#e9e0d6
}
.card-open {
  display:block;
  width:100%;
  height:100%;
  padding:0
}
.card-visual:after {
  content:"";
  position:absolute;
  border:1px solid #78836a12;
  inset:20px;
  border-radius:50%;
  pointer-events:none
}
.card-visual img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:25px 32px 10px;
  transition:transform .5s;
  filter:drop-shadow(0 9px 8px #22372b15)
}
.card-open:hover img {
  transform:scale(1.05)
}
.card-index {
  position:absolute;
  top:14px;
  left:16px;
  font:10px Georgia,serif;
  color:#6f7a66;
  letter-spacing:1px
}
.card-tag {
  position:absolute;
  bottom:14px;
  left:14px;
  font-size:8px;
  letter-spacing:1px;
  padding:5px 8px;
  background:#f5f3e9d9;
  color:#8d7440;
  pointer-events:none
}
.save-button {
  position:absolute;
  right:10px;
  top:8px;
  width:36px;
  height:36px;
  border-radius:50%;
  z-index:2;
  color:#75836c;
  font-size:17px
}
.save-button:hover,.save-button[aria-pressed="true"] {
  color:#947440;
  background:#f5f1e1
}
.save-button svg {
  width:15px;
  height:19px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.3;
  vertical-align:middle
}
.save-button[aria-pressed="true"] svg {
  fill:currentColor
}
.card-info {
  padding:17px 1px 0;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.card-info h3 {
  font:600 19px var(--serif);
  letter-spacing:2px;
  margin-bottom:7px
}
.card-info p {
  font-size:10px;
  color:#808977;
  letter-spacing:1px;
  margin:0
}
.card-arrow {
  width:32px;
  height:32px;
  border:1px solid #b9bead;
  border-radius:50%;
  font-size:16px;
  color:#687861
}
.collection-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:36px 0 0;
  margin-top:5px;
  padding-bottom:30px;
  font-size:10px;
  color:#8b927f;
  letter-spacing:1px
}
.dark-link {
  color:#344e3e
}
.dark-link:hover {
  color:#8c7445
}
.empty-state {
  padding:65px 20px;
  text-align:center;
  color:var(--muted);
  font-size:13px
}
.epic-section {
  padding-top:20px;
  padding-bottom:105px;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:8%;
  align-items:center
}
.epic-art {
  position:relative;
  height:490px;
  overflow:hidden;
  background:#647f59
}
.epic-art>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:40%;
  filter:saturate(.63)
}
.epic-art:after {
  content:"";
  position:absolute;
  inset:40% 0 0;
  background:linear-gradient(transparent,#1a372bc9)
}
.art-caption {
  position:absolute;
  left:32px;
  bottom:32px;
  z-index:1;
  color:var(--paper)
}
.art-caption span {
  font:25px var(--serif);
  letter-spacing:3px
}
.art-caption small {
  display:block;
  margin-top:12px;
  font-size:8px;
  letter-spacing:3px;
  color:#d5dcc8
}
.epic-copy h2 {
  margin:20px 0 28px;
  font-size:clamp(30px,3vw,45px);
  line-height:1.55
}
.epic-copy h2 span {
  color:#8c957f
}
.epic-copy>p:not(.eyebrow) {
  font-size:12px;
  line-height:2.2;
  color:#7b8676;
  max-width:480px
}
.epic-values {
  display:flex;
  margin:30px 0;
  gap:44px
}
.epic-values>span {
  font:22px var(--serif);
  letter-spacing:3px
}
.epic-values small {
  display:block;
  font:8px var(--sans);
  letter-spacing:2px;
  color:#8d967e;
  margin-top:10px
}
.craft-section {
  background:#ebeade;
  max-width:none
}
.craft-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:22px
}
.craft-card {
  position:relative;
  min-height:420px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end
}
.craft-card>div {
  padding:30px;
  z-index:1
}
.craft-card h3 {
  font:25px/1.4 var(--serif);
  letter-spacing:1px;
  margin:12px 0 15px
}
.craft-card p:not(.eyebrow) {
  font-size:11px;
  line-height:2;
  opacity:.7;
  margin-bottom:0
}
.craft-card .eyebrow {
  font-size:8px;
  letter-spacing:2px
}
.craft-feature {
  background:#263f30;
  color:white
}
.craft-feature>img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  opacity:.65
}
.craft-feature:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 15%,#13291afa)
}
.craft-digital {
  background:var(--ink);
  color:var(--paper)
}
.craft-symbol {
  position:absolute;
  font:260px Georgia,serif;
  line-height:1;
  color:#d9bd823d;
  top:0;
  right:30px;
  transform:rotate(15deg)
}
.craft-digital .eyebrow {
  color:var(--gold)
}
.craft-card .text-link {
  margin-top:26px
}
.craft-story {
  background:#dfe1d3
}
.story-number {
  position:absolute;
  top:0;
  right:18px;
  font:180px Georgia,serif;
  color:#7e8e6a24;
  line-height:1.1
}
.closing {
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  max-width:none;
  padding-top:72px;
  padding-bottom:85px;
  position:relative;
  overflow:hidden
}
.closing:before,.closing:after {
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  border:1px solid #d9bd8210;
  transform:rotate(45deg);
  top:-90px;
  pointer-events:none
}
.closing:before {
  left:-280px
}
.closing:after {
  right:-280px
}
.closing-star {
  font-size:33px;
  color:var(--gold)
}
.closing .eyebrow {
  font-size:9px;
  color:#a8b69f;
  margin:16px 0
}
.closing h2 {
  font:40px/1.5 var(--serif);
  letter-spacing:4px;
  margin:22px 0 30px
}
.closing h2 span {
  color:var(--gold)
}
.closing .button {
  min-width:210px
}
.site-footer {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:42px;
  padding-top:52px;
  padding-bottom:24px;
  align-items:center
}
.site-footer .brand strong {
  font-size:19px
}
.site-footer .brand small {
  color:#7c8a73
}
.site-footer .brand-mark {
  color:#937b4b;
  border-color:#b39c71
}
.site-footer>p {
  font-size:11px;
  line-height:2;
  color:#66765f;
  margin:0
}
.site-footer>p>span {
  font-size:10px;
  color:#8d9586
}
.back-top {
  font-size:11px;
  letter-spacing:1px
}
.footer-bottom {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:22px;
  color:#909780;
  font-size:9px;
  letter-spacing:1px
}
.hero-dialog {
  padding:0;
  border:1px solid #d9bd82;
  width:min(840px,92vw);
  max-height:90dvh;
  background:var(--paper);
  color:var(--ink);
  overflow:auto
}
.hero-dialog[open] {
  display:grid;
  grid-template-columns:.9fr 1.1fr
}
.hero-dialog::backdrop {
  background:#081b16c9;
  backdrop-filter:blur(5px)
}
.dialog-close {
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  color:var(--ink);
  border-color:#86977655;
  font-size:23px
}
.dialog-image {
  background:#dfe3d5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:25px
}
.dialog-image img {
  max-height:490px;
  width:100%;
  object-fit:contain
}
.dialog-copy {
  padding:55px 34px 36px
}
.dialog-copy h2 {
  font:35px var(--serif);
  letter-spacing:3px;
  margin:17px 0
}
.dialog-title {
  color:#958051;
  font-size:12px
}
.dialog-copy>p:not(.eyebrow):not(.dialog-title) {
  font-size:12px;
  line-height:2;
  color:#76836a
}
.dialog-copy h3 {
  font-size:12px;
  font-weight:500;
  margin-top:24px
}
.dialog-copy ul {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding-left:16px;
  gap:12px;
  font-size:10px;
  line-height:1.5;
  color:#78856c;
  margin-bottom:30px
}
.dialog-copy .dialog-note {
  font-size:9px!important;
  margin:18px 0 0
}
.toast {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translate(-50%,15px);
  background:var(--ink);
  border:1px solid #d9bd8266;
  color:var(--paper);
  padding:14px 24px;
  font-size:12px;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  text-align:center;
  max-width:90vw;
  width:max-content
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.exhibit.expanded {
  position:fixed;
  inset:3vh 6vw;
  height:94dvh;
  margin:0;
  z-index:60;
  background:radial-gradient(ellipse at center,#345043,#172f2b 75%);
  box-shadow:0 0 0 10vw #0c211de8;
  padding:30px
}
.exhibit.expanded .exhibit-top {
  left:35px;
  right:35px
}
.exhibit.expanded .viewer {
  inset:45px 0 95px
}
.exhibit.expanded .viewer-bottom {
  left:35px;
  right:35px;
  bottom:20px
}
.exhibit.expanded .model-caption {
  left:35px;
  bottom:115px
}
.exhibit.expanded .model-plinth {
  max-width:500px
}
.exhibit.expanded .model-progress {
  left:35px;
  right:35px;
  bottom:72px
}
body.viewer-expanded {
  overflow:hidden
}
.exhibit.expanded .exhibit-orbit {
  width:600px;
  height:600px
}
.exhibit.expanded .orbit-two {
  width:490px;
  height:490px
}
.section-shell[id] {
  scroll-margin-top:12px
}

@media(min-width:1600px) {
  .site-header,.hero {
  padding-left:max(5%,calc((100vw - 1480px)/2));
  padding-right:max(5%,calc((100vw - 1480px)/2))
}
.hero-layout {
  min-height:700px
}
.exhibit {
  height:660px
}
.hero-copy {
  padding-top:70px
}
.hero-footnote {
  margin-top:55px
}
.heroes-grid {
  gap:35px
}

}

@media(max-width:1100px) {
  .desktop-nav {
  gap:20px
}
.header-actions {
  gap:15px
}
.language-label {
  display:none
}
.hero-layout {
  min-height:580px
}
.exhibit {
  height:550px;
  margin-right:10px
}
.hero-copy {
  padding-top:40px
}
h1 {
  font-size:57px
}
.hero-buttons {
  gap:16px
}
.hero-buttons .text-link {
  font-size:10px
}
.hero-buttons .button {
  gap:20px;
  padding:16px
}
.exhibit-orbit {
  width:350px;
  height:350px
}
.orbit-two {
  width:280px;
  height:280px
}
.hero-footnote {
  margin-top:30px
}
.section-shell {
  padding-top:70px;
  padding-bottom:70px
}
.section-heading h2 {
  font-size:30px
}
.heroes-grid {
  gap:24px 17px
}
.card-visual img {
  padding:25px 20px 10px
}
.epic-section {
  padding-top:10px;
  gap:5%
}
.epic-art {
  height:430px
}
.craft-grid {
  gap:15px
}
.craft-card>div {
  padding:23px
}
.craft-card h3 {
  font-size:22px
}
.craft-card {
  min-height:390px
}

}

@media(max-width:760px) {
  html {
  scroll-padding-top:70px
}
.site-header {
  height:74px;
  padding:0 6%
}
.brand strong {
  font-size:17px;
  letter-spacing:1px
}
.brand small {
  font-size:7px;
  letter-spacing:2px
}
.brand-mark {
  width:30px;
  height:38px;
  font-size:32px
}
.header-explore {
  padding:9px 12px;
  font-size:10px
}
.header-explore span {
  padding-left:9px
}
.menu-button {
  display:block;
  width:34px;
  height:40px
}
.header-actions {
  gap:10px
}
.desktop-nav {
  display:none;
  position:absolute;
  top:74px;
  left:0;
  right:0;
  background:var(--ink);
  padding:16px 6% 24px;
  box-shadow:0 12px 20px #0b201c40
}
.desktop-nav.open {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.desktop-nav a {
  padding:13px
}
.desktop-nav a.active:after {
  left:0;
  bottom:18px
}
.hero {
  padding:23px 6% 0
}
.hero-topline {
  font-size:8px;
  letter-spacing:1px
}
.edition {
  display:none
}
.hero-layout {
  display:flex;
  flex-direction:column;
  min-height:0
}
.hero-copy {
  padding-top:18px
}
.hero-copy .eyebrow {
  font-size:9px;
  letter-spacing:2px
}
h1 {
  font-size:clamp(42px,9.8vw,66px);
  line-height:1.3;
  letter-spacing:3px;
  margin:22px 0 18px
}
.hero-english {
  position:absolute;
  right:0;
  top:70px;
  font-size:7px;
  letter-spacing:1.3px;
  writing-mode:vertical-rl;
  line-height:1.7
}
.hero-description {
  font-size:11px;
  line-height:2;
  margin:17px 0
}
.hero-buttons {
  margin-top:22px;
  gap:20px
}
.hero-buttons .button {
  padding:14px 18px;
  gap:23px;
  font-size:11px
}
.hero-buttons .text-link {
  font-size:10px
}
.hero-footnote {
  display:none
}
.exhibit {
  width:100%;
  height:480px;
  margin:18px 0 5px
}
.exhibit-top {
  top:10px;
  left:0
}
.exhibit-label {
  font-size:8px
}
.viewer {
  inset:26px 0 82px
}
.model-poster {
  padding:12px 40px 0
}
.exhibit-orbit {
  width:320px;
  height:320px;
  top:45%
}
.orbit-two {
  width:250px;
  height:250px
}
.exhibit-watermark {
  font-size:65px
}
.model-caption {
  left:0;
  bottom:91px
}
.model-caption h2 {
  font-size:25px
}
.model-caption p {
  font-size:8px
}
.model-character {
  display:none
}
.model-plinth {
  bottom:78px;
  width:65%;
  height:44px
}
.viewer-bottom {
  bottom:12px;
  left:0;
  padding-top:12px
}
.viewer-status {
  font-size:9px
}
.exhibit-side {
  display:none
}
.hero-bottom {
  padding:18px 0;
  font-size:8px
}
.hero-bottom>span:last-child {
  display:none
}
.hero-bottom a {
  gap:10px
}
.motif-divider {
  font-size:8px;
  gap:18px;
  justify-content:flex-start;
  padding:14px 6%
}
.motif-divider span {
  font-size:14px
}
.section-shell {
  padding:52px 6%
}
.section-heading {
  display:block;
  margin-bottom:25px
}
.section-heading h2 {
  font-size:27px;
  line-height:1.65;
  letter-spacing:1px
}
.section-heading h2 span {
  display:block
}
.section-intro {
  margin-top:15px;
  font-size:11px
}
.eyebrow {
  font-size:9px;
  letter-spacing:2px
}
.collection-toolbar {
  margin-top:20px;
  margin-bottom:20px;
  overflow-x:auto;
  scrollbar-width:none
}
.filters {
  gap:24px;
  white-space:nowrap
}
.filter {
  font-size:11px;
  padding:12px 0 16px;
  min-height:44px
}
.filter sup {
  font-size:8px
}
.collection-hint {
  display:none
}
.heroes-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 14px
}
.card-visual {
  aspect-ratio:1/1.12
}
.card-visual img {
  padding:25px 12px 8px
}
.card-visual:after {
  inset:12px
}
.card-index {
  font-size:8px;
  left:12px;
  top:13px
}
.save-button {
  right:4px;
  top:5px
}
.card-tag {
  font-size:7px;
  padding:4px 6px;
  left:8px;
  bottom:8px
}
.card-info {
  padding-top:12px
}
.card-info h3 {
  font-size:17px;
  letter-spacing:1px
}
.card-info p {
  font-size:8px;
  letter-spacing:0
}
.card-arrow {
  width:26px;
  height:26px;
  font-size:13px;
  flex-shrink:0
}
.collection-bottom {
  font-size:8px;
  padding-top:28px;
  padding-bottom:20px;
  gap:14px
}
.collection-bottom .text-link {
  font-size:9px;
  gap:8px
}
.epic-section {
  padding-top:4px;
  display:flex;
  flex-direction:column;
  gap:32px;
  align-items:stretch
}
.epic-art {
  height:340px
}
.art-caption {
  left:24px;
  bottom:24px
}
.art-caption span {
  font-size:23px
}
.epic-copy h2 {
  font-size:33px;
  margin-top:14px;
  margin-bottom:24px
}
.epic-copy>p:not(.eyebrow) {
  font-size:12px;
  max-width:none
}
.epic-values {
  gap:40px;
  margin:25px 0
}
.epic-values>span {
  font-size:21px
}
.craft-grid {
  grid-template-columns:1fr
}
.craft-card {
  min-height:340px
}
.craft-feature {
  min-height:380px
}
.craft-card>div {
  padding:28px
}
.craft-card h3 {
  font-size:25px
}
.craft-card p:not(.eyebrow) {
  font-size:12px;
  max-width:330px
}
.craft-symbol {
  font-size:240px;
  right:45px;
  top:-18px
}
.story-number {
  font-size:170px;
  right:30px
}
.closing {
  padding-top:50px;
  padding-bottom:60px
}
.closing h2 {
  font-size:29px;
  letter-spacing:2px
}
.closing .button {
  min-width:195px
}
.site-footer {
  grid-template-columns:1fr auto;
  gap:25px;
  padding-bottom:22px
}
.site-footer>p {
  grid-row:2;
  grid-column:1/-1;
  font-size:10px
}
.site-footer .brand strong {
  font-size:16px
}
.back-top {
  font-size:9px
}
.footer-bottom {
  flex-direction:column;
  gap:12px;
  font-size:8px;
  line-height:1.8
}
.hero-dialog[open] {
  grid-template-columns:1fr
}
.dialog-image {
  height:260px;
  padding:18px
}
.dialog-image img {
  height:100%;
  width:auto
}
.dialog-copy {
  padding:28px
}
.dialog-copy h2 {
  font-size:29px;
  margin:12px 0
}
.dialog-copy ul {
  font-size:10px;
  margin-bottom:24px
}
.dialog-close {
  background:var(--paper)
}
.exhibit.expanded {
  inset:0;
  height:100dvh;
  padding:0
}
.exhibit.expanded .exhibit-top {
  left:20px;
  right:20px;
  top:20px
}
.exhibit.expanded .viewer-bottom {
  left:20px;
  right:20px
}
.exhibit.expanded .model-caption {
  left:20px
}
.exhibit.expanded .model-progress {
  left:20px;
  right:20px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*:before,*:after {
  animation:none!important;
  transition:none!important
}
.hero-card:hover,.button:hover {
  transform:none
}

}
/* Keep the complete interactive exhibit visible earlier on narrow screens. */
@media (max-width: 760px) {
  .hero-copy { padding-top: 8px; }
  .hero-copy h1 { font-size: clamp(38px, 9.8vw, 58px); line-height: 1.23; margin: 17px 0 12px; }
  .hero-description { margin: 12px 0; }
  .hero-buttons { margin-top: 17px; }
  .exhibit { height: 420px; margin-top: 16px; }
  .exhibit.expanded { height: 100dvh; margin: 0; }
}
/* Editorial reading room */
.story-section { padding-top: 15px; }
.story-reader { display:grid; grid-template-columns:260px 1fr; border:1px solid #d7d8c9; }
.chapter-navigation { background:#e9e9dd; padding:18px 25px; }
.chapter-tab { width:100%; text-align:left; display:flex; align-items:center; gap:17px; padding:29px 0; border-bottom:1px solid #cdd2c1; }
.chapter-tab:last-child { border-bottom:0; }
.chapter-tab>span { font:30px var(--serif); color:#a8ad95; }
.chapter-tab>div { font:19px var(--serif); letter-spacing:2px; }
.chapter-tab small { display:block; font:8px var(--sans); letter-spacing:1.6px; color:#8c957e; margin-top:9px; }
.chapter-tab b { margin-left:auto; font-size:16px; font-weight:400; opacity:0; }
.chapter-tab.active>span,.chapter-tab:hover>span { color:#9f7f42; }
.chapter-tab.active b { opacity:1; }
.chapter-tab.active>div { color:#142e22; }
.chapter-pages { background:#f9f7ef; }
.chapter-panel { position:relative; padding:48px 56px; min-height:495px; overflow:hidden; }
.chapter-panel>.eyebrow { color:#937b4d; }
.chapter-panel h3 { font:32px/1.5 var(--serif); letter-spacing:2px; position:relative; }
.chapter-panel>p:not(.eyebrow) { position:relative; max-width:720px; font-size:12px; line-height:2.1; color:#6c7965; }
.chapter-watermark { position:absolute; right:20px; top:5px; font:180px var(--serif); color:#9fac8510; pointer-events:none; }
.chapter-question { border-left:2px solid #c5b07b; margin:24px 0; padding:3px 0 3px 17px; }
.chapter-question span { color:#a18a58; font-size:9px; letter-spacing:2px; }
.chapter-question p { font:16px/1.8 var(--serif); margin:7px 0 0; }
.editorial-note { color:#89917d; font-size:10px; line-height:1.9; margin:18px 0 0; }
/* Living oral tradition */
.living-section { background:#203930; color:var(--paper); max-width:none; display:grid; grid-template-columns:1fr 1.15fr; gap:9%; }
.living-heading .eyebrow { color:var(--gold); }
.living-heading h2 { font:42px/1.5 var(--serif); letter-spacing:3px; margin:23px 0; }
.living-heading h2 span { color:var(--gold); }
.living-heading>p:not(.eyebrow) { color:#abbca5; font-size:12px; line-height:2.1; }
.living-heading .text-link { margin-top:18px; font-size:10px; }
.voice-lines { display:flex; align-items:center; gap:10px; height:70px; margin-top:38px; }
.voice-lines i { display:block; width:2px; height:18px; background:#9baf8260; }
.voice-lines i:nth-child(3n) { height:45px; }
.voice-lines i:nth-child(4n) { height:63px; background:#d9bd8280; }
.voice-lines i:nth-child(5n) { height:34px; }
.transmission-path article { display:flex; gap:23px; padding:9px 0 28px; }
.transmission-path article:not(:last-child) { border-bottom:1px solid #d9bd8226; margin-bottom:27px; }
.transmission-path article>span { font:15px Georgia,serif; color:#b59c66; padding-top:6px; }
.transmission-path h3 { font:24px var(--serif); letter-spacing:2px; margin-bottom:17px; }
.transmission-path p { font-size:12px; color:#b4c0ac; line-height:2.1; margin:0; }
/* Design vocabulary */
.motif-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.motif-card { background:#eeeee3; }
.motif-art { height:185px; display:flex; justify-content:center; align-items:center; background:#e4e6d9; }
.motif-art svg { width:75%; max-height:155px; stroke:#899273; stroke-width:2.3; }
.motif-border { background:#eae2d4; }
.motif-border svg { stroke:#ac9163; }
.motif-colors { background:#e0e5db; gap:8px; padding:25px; }
.motif-colors span { width:33px; height:88px; border-radius:30px; background:#bda267; transform:translateY(-10px); }
.motif-colors span:nth-child(2) { background:#719b98; transform:translateY(10px); }
.motif-colors span:nth-child(3) { background:#8c453b; }
.motif-colors span:nth-child(4) { background:#486150; transform:translateY(10px); }
.motif-colors span:nth-child(5) { background:#cdc4a8; }
.motif-body { padding:29px; }
.motif-body .eyebrow { color:#9a8355; }
.motif-body h3 { font:23px/1.5 var(--serif); margin-bottom:17px; }
.motif-body>p:not(.eyebrow) { font-size:12px; line-height:2; color:#7a856d; min-height:75px; }
.motif-body .text-link { margin-top:15px; font-size:10px; }
/* Questions to take home */
.discover-grid { display:grid; grid-template-columns:1fr 1fr; gap:7%; align-items:start; }
.quiz-card { padding:35px; background:#e6e8da; min-height:440px; }
.quiz-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; color:#8e784b; }
.quiz-top .eyebrow { margin:0; }
#quiz-progress { font:11px Georgia,serif; letter-spacing:2px; }
.quiz-card h3 { font:26px/1.6 var(--serif); margin-bottom:22px; }
.quiz-options { display:grid; gap:10px; }
.quiz-option { padding:14px 17px; border:1px solid #b5bea59c; text-align:left; display:flex; align-items:center; gap:15px; font-size:12px; transition:background .2s; }
.quiz-option span { font:11px Georgia,serif; color:#7f8e70; }
.quiz-option:hover:not(:disabled) { background:#f5f4e9; border-color:#8c9a77; }
.quiz-option:disabled { cursor:default; opacity:1; }
.quiz-option.correct { border-color:#567154; background:#d5e3ce; }
.quiz-option.incorrect { border-color:#ba907d; background:#ecded2; }
.quiz-option b { margin-left:auto; font-weight:400; font-size:10px; }
.quiz-feedback { font-size:12px; line-height:1.9; margin:18px 0; color:#526a48; }
.quiz-feedback:empty { display:none; }
.quiz-card .button { padding:13px 20px; }
.quiz-footnote { font-size:9px; color:#939b84; margin:25px 0 0; }
.quiz-result { padding:5px 0 20px; }
.quiz-score { font:62px Georgia,serif; color:#8f7747; margin:12px 0; }
.quiz-score small { font-size:24px; color:#919d81; }
.quiz-result p { font-size:12px; line-height:2; color:#6e7e62; }
.visit-notes>.eyebrow { color:#978051; margin-top:3px; }
.visit-notes>h3 { font:29px var(--serif); margin:19px 0 29px; }
.visit-notes details { padding:19px 0; border-bottom:1px solid var(--line); }
.visit-notes summary { cursor:pointer; font-size:13px; line-height:1.6; list-style:none; display:flex; justify-content:space-between; gap:20px; }
.visit-notes summary::-webkit-details-marker { display:none; }
.visit-notes summary:after { content:'＋'; color:#8a9777; }
.visit-notes details[open] summary:after { content:'−'; }
.visit-notes details p { margin:15px 0 3px; font-size:12px; line-height:2; color:#7b866e; }
.visit-notes details a { margin-top:12px; }
.visit-notes summary:focus-visible { outline:2px solid #a5905e; outline-offset:6px; }
@media (min-width:761px) and (max-width:1200px) {
  .desktop-nav { gap:17px; }
  .desktop-nav a { font-size:11px; }
  .header-explore { display:none; }
  .chapter-panel { padding:38px; }
  .living-section { gap:5%; }
  .living-heading h2 { font-size:36px; }
  .motif-grid { gap:16px; }
  .motif-body { padding:22px; }
  .motif-body h3 { font-size:20px; }
}
@media (max-width:760px) {
  .story-section { padding-top:0; }
  .story-reader { grid-template-columns:1fr; }
  .chapter-navigation { display:grid; grid-template-columns:repeat(2,1fr); padding:10px 16px; gap:0 20px; }
  .chapter-tab { padding:15px 0; gap:10px; }
  .chapter-tab:nth-child(3) { border-bottom:0; }
  .chapter-tab>span { font-size:22px; }
  .chapter-tab>div { font-size:15px; letter-spacing:1px; }
  .chapter-tab small { font-size:6px; letter-spacing:1px; margin-top:6px; }
  .chapter-tab b { display:none; }
  .chapter-panel { padding:28px 23px; min-height:510px; }
  .chapter-panel h3 { font-size:25px; letter-spacing:1px; }
  .chapter-panel>p:not(.eyebrow) { font-size:12px; line-height:2.1; }
  .chapter-watermark { font-size:140px; }
  .chapter-question p { font-size:15px; }
  .editorial-note { font-size:9px; }
  .living-section { grid-template-columns:1fr; gap:28px; }
  .living-heading h2 { font-size:33px; }
  .voice-lines { margin-top:18px; height:45px; }
  .voice-lines i:nth-child(4n) { height:42px; }
  .voice-lines i:nth-child(3n) { height:32px; }
  .transmission-path article { gap:18px; }
  .transmission-path h3 { font-size:22px; letter-spacing:1px; }
  .transmission-path p { font-size:12px; }
  .motif-grid { grid-template-columns:1fr; gap:20px; }
  .motif-art { height:145px; }
  .motif-art svg { max-height:125px; }
  .motif-body { padding:25px; }
  .motif-body h3 { font-size:24px; }
  .motif-body>p:not(.eyebrow) { min-height:0; }
  .motif-colors span { height:76px; }
  .discover-grid { grid-template-columns:1fr; gap:36px; }
  .quiz-card { padding:26px; min-height:420px; }
  .quiz-card h3 { font-size:24px; }
  .quiz-option { padding:14px 12px; font-size:12px; }
  .visit-notes>h3 { font-size:27px; margin-bottom:18px; }
}
.detail-button { color:var(--gold);font-size:10px;letter-spacing:.5px;padding:7px 9px;border:1px solid #d9bd8240;border-radius:3px; }
.detail-button:hover:not(:disabled) { background:#d9bd8218; }
.detail-button:disabled { opacity:.75; }
.viewer-tools { align-items:center; }
@media(max-width:760px) {
  .viewer-bottom { gap:8px; }
  .viewer-status { max-width:48%;line-height:1.7; }
  .viewer-tools { gap:5px; }
  .detail-button { font-size:9px;padding:7px;white-space:nowrap; }
}