:root {
  color-scheme: dark;
  --ink: #25101a;
  --cream: #fff1d6;
  --gold: #ffc755;
  --red: #ec513f;
  --heading: "Archivo Black", "Arial Black", Impact, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font: 16px/1.55 system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, .stage:focus-visible { outline: 3px solid #ffe68f; outline-offset: 5px; }
button { font: inherit; cursor: pointer; }
header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 5%; background: #25101a; border-bottom: 1px solid #ffd18b38; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 900 21px/1 var(--heading); letter-spacing: -.04em; white-space: nowrap; }
.brand span { display: grid; place-items: center; width: 35px; height: 35px; background: var(--red); color: var(--cream); border-radius: 8px; font: 700 22px/1 system-ui, sans-serif; }
nav { display: flex; gap: 26px; font-size: 14px; font-weight: 700; }
nav a:hover, footer a:hover { color: var(--gold); }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 19px; border-radius: 8px; font-weight: 850; font-size: 13px; border: 1px solid transparent; transition: translate .2s, box-shadow .2s; }
.button:hover { translate: 0 -3px; }
.gold { background: var(--gold); color: var(--ink); box-shadow: 0 4px 0 #a65325; }
.outline { border-color: #ffca8c80; background: #31141dc7; }
.compact { padding: 10px 14px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 740px; padding: 45px 7% 36px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 75% 48%,#e74931 0,#a82538 37%,#46132d 67%,#2b1121 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg,transparent 0 39px,#ffe2a613 40px),repeating-linear-gradient(90deg,transparent 0 39px,#ffe2a613 40px); mask-image: linear-gradient(90deg,transparent,#000); }
.sun { position: absolute; width: min(44vw, 650px); aspect-ratio: 1; right: 3%; top: 50%; translate: 0 -54%; z-index: -1; border-radius: 50%; background: repeating-linear-gradient(0deg,transparent 0 27px,#e547353d 28px 32px),linear-gradient(#fff0a4,#ffc055 50%,#ff703f); box-shadow: 0 0 85px #ff9c4f7a; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .18em; margin: 0 0 20px; }
h1,h2 { font-family: var(--heading); font-weight: 900; margin: 0; line-height: .94; letter-spacing: -.065em; }
h1 { font-size: clamp(65px, 9.5vw, 154px); text-shadow: 0 7px #3b1022; }
h1 em { font-style: normal; color: var(--gold); }
.lead { max-width: 415px; color: #ffdfc9; font-size: clamp(16px, 1.5vw, 21px); margin: 27px 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ticker { color: #ffdcc5; font-size: 13px; margin: 25px 0 0; }
.ticker strong { color: var(--gold); }
.exhibit { min-width: 0; position: relative; }
.stage { position: relative; display: grid; place-items: center; perspective: 1050px; height: 585px; touch-action: pan-y; cursor: grab; }
.stage.dragging { cursor: grabbing; }
.slab { --w: clamp(195px, 25vw, 346px); --d: 22px; --z: calc(var(--d) / 2); width: var(--w); height: calc(var(--w) * 1.65); position: relative; transform-style: preserve-3d; transform: rotateX(-8deg) rotateY(-17deg) rotateZ(5deg); transition: transform .58s cubic-bezier(.2,.7,.2,1); }
.dragging .slab { transition: none; }
.face, .edge { position: absolute; backface-visibility: hidden; }
.face { inset: 0; border-radius: 4.2% / 2.6%; overflow: hidden; }
.front { transform: translateZ(var(--z)); background: #d2ccd0; box-shadow: inset 0 0 0 2px #fff9; }
.front img { position: absolute; width: 184.4%; max-width: none; left: -42.2%; top: -4.3%; user-select: none; pointer-events: none; }
.glare { position: absolute; inset: 0; background: linear-gradient(115deg,transparent 16%,#fff8 31%,transparent 48%,transparent 63%,#ffecac42 76%,transparent 88%); mix-blend-mode: screen; opacity: .45; pointer-events: none; }
.back { transform: rotateY(180deg) translateZ(var(--z)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; border: 8px ridge #ecd9bd; background: repeating-linear-gradient(45deg,#64192d 0 10px,#711c32 10px 20px); text-align: center; }
.back b { border: 2px solid var(--gold); border-radius: 50%; display: grid; place-items: center; font-size: clamp(54px, 8vw, 100px); width: 59%; aspect-ratio: 1; color: var(--gold); }
.back strong { font: 900 32px/1 var(--heading); }
.back span,.back small { font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.edge { background: linear-gradient(90deg,#746b68,#ffefdd 25%,#b8afac 55%,#fff1de 75%,#918181); }
.left,.right { width: var(--d); top: 2.1%; bottom: 2.1%; left: calc(50% - var(--z)); }
.left { transform: translateX(calc(var(--w) / -2)) rotateY(-90deg); }
.right { transform: translateX(calc(var(--w) / 2)) rotateY(90deg); }
.upper,.lower { height: var(--d); left: 3%; right: 3%; top: calc(50% - var(--z)); background: linear-gradient(#8d7978,#fff0e4,#a9918c); }
.upper { transform: translateY(calc(var(--w) * -.825)) rotateX(90deg); }
.lower { transform: translateY(calc(var(--w) * .825)) rotateX(-90deg); }
.controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 800; color: #fff4d5; }
.controls span { margin-right: 6px; }
.controls button { background: #431321; border: 1px solid #ffcd937a; color: inherit; border-radius: 6px; padding: 6px 10px; }
.controls button:hover { background: #672138; }
.wrap { width: min(86%, 1250px); margin-inline: auto; }
.archive { background: #fff1d6; color: #411b25; padding: 80px 0 66px; }
.archive .eyebrow { color: #a32e34; }
.archive-heading { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 36px; margin-bottom: 35px; }
h2 { font-size: clamp(45px, 6vw, 91px); }
.archive-heading > p,.character p:not(.eyebrow) { max-width: 430px; font-size: 18px; }
.banner { margin-block: 0; }
.banner img { width: 100%; display: block; border-radius: 16px; }
figcaption { font-size: 12px; margin-top: 9px; }
.character { background: radial-gradient(at 80% 45%,#99412e,#4c1729 57%,#281320); padding: 55px 0; }
.character-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 35px; }
.character img { width: 100%; max-width: 580px; justify-self: end; }
.character .button { margin-top: 12px; }
footer { padding: 30px 0; border-top: 1px solid #ffd18b38; }
footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; }
footer small { color: #e1b6a4; }
@media (max-width: 900px) {
  .hero { padding-inline: 5%; min-height: 610px; }
  .stage { height: 470px; }
  .slab { --w: clamp(190px, 29vw, 280px); }
}
@media (max-width: 660px) {
  header { padding: 12px 5%; }
  .brand { font-size: 17px; }
  .brand span { width: 29px; height: 29px; font-size: 18px; }
  nav { display: none; }
  .compact { font-size: 11px; }
  .hero { grid-template-columns: minmax(0,1fr); padding: 34px 6% 24px; }
  .hero-copy { text-align: center; }
  h1 { font-size: clamp(61px, 15vw, 96px); }
  .lead { margin: 17px auto; }
  .actions { justify-content: center; }
  .actions .button { padding: 10px 12px; font-size: 11px; }
  .ticker { margin-top: 18px; }
  .sun { width: 90vw; right: 5%; top: auto; bottom: 35px; translate: none; }
  .stage { height: 395px; }
  .slab { --w: clamp(174px, 48vw, 218px); --d: 16px; }
  .archive, .character { padding: 44px 0; }
  .archive-heading,.character-grid { grid-template-columns: 1fr; gap: 14px; }
  .character img { justify-self: center; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }

.sound-toggle { flex: 0 0 auto; color: var(--cream); background: #431321; border: 1px solid #ffcd937a; border-radius: 8px; padding: 8px 10px; font-size: 12px; font-weight: 800; }
.sound-toggle[aria-pressed="true"] { color: var(--ink); background: var(--gold); }
@media (pointer: fine) {
  body { cursor: url('assets/paw.png') 2 2, auto; }
  a, button, .stage, .stage.dragging { cursor: url('assets/paw-active.png') 2 2, pointer; }
}
@media (max-width: 660px) {
  header { gap: 8px; padding-inline: 4%; }
  header .brand { font-size: 13px; gap: 5px; }
  header .compact, .sound-toggle { padding: 7px; font-size: 10px; }
}