/* Layout: a museum that hired a carnival as its decorator. Gold frames hang crooked, every hall has its own color world,
   placards are stickers, audio guides talk in speech bubbles, and the Mission gallery is stained glass.
   Deliberately single-theme: every color is set explicitly so it reads the same on any host background. */
:root{
  color-scheme:light;
  --ink:#1A1033;
  --paper:#FFFDF6;
  --pink:#FF3D7F;
  --teal:#00B3A4;
  --sun:#FFD23F;
  --grape:#6B2FBF;
  --tang:#FF6A1F;
  --leaf:#1E7A3E;
  --gold:#E3A21A;
  --gold-dk:#7A5200;
  --muted:#4A4160;
  --hall:var(--grape); --hall-2:var(--pink); --tint:#F3E8FF;
  --f-display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-loud:"Bungee", "Impact", "Arial Black", sans-serif;
  --f-shade:"Bungee Shade", "Bungee", "Impact", sans-serif;
  --f-body:"Libre Franklin", "Franklin Gothic", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-road:"Overpass", "Highway Gothic", "Arial Narrow", Arial, sans-serif;
  --f-kitsch:"Rye", "Rockwell", Georgia, serif;
}
/* each hall's color world */
.p-lobby   {--hall:#6B2FBF;--hall-2:#FF3D7F;--tint:#F3E8FF}
.p-founders{--hall:#4B1D8F;--hall-2:#E3A21A;--tint:#FFF1D6}
.p-canine  {--hall:#1A1033;--hall-2:#FFD23F;--tint:#FFF6B8}
.p-woods   {--hall:#1E7A3E;--hall-2:#FFD23F;--tint:#DFF5E4}
.p-voyages {--hall:#FF6A1F;--hall-2:#00B3A4;--tint:#FFE6D3}
.p-ventures{--hall:#E8336D;--hall-2:#6B2FBF;--tint:#FFE1EC}
.p-mission {--hall:#1D3A8A;--hall-2:#E3A21A;--tint:#E6ECFF}
.p-shop    {--hall:#00A396;--hall-2:#FF3D7F;--tint:#D8F6F1}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background-color:var(--tint);
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--hall) 22%, transparent) 1.6px, transparent 2px);
  background-size:22px 22px;
  color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:0;
  overflow-x:hidden;
}
html{overflow-x:clip}
.wrap{max-width:1100px;margin:0 auto}
a{color:var(--hall);text-underline-offset:3px;font-weight:600}
a:focus-visible,button:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- Velvet rope nav ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--ink)}
.rope{position:sticky;top:env(safe-area-inset-top, 0px);z-index:6;background:var(--ink);margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  border-bottom:6px solid transparent;border-image:repeating-linear-gradient(90deg,var(--pink) 0 28px,var(--sun) 28px 56px,var(--teal) 56px 84px,var(--tang) 84px 112px) 6}
.rope-inner{max-width:1100px;margin:0 auto;padding:10px max(16px, env(safe-area-inset-left, 0px));display:flex;gap:6px 8px;flex-wrap:wrap;align-items:center}
.rope-inner a{font-family:var(--f-loud);font-weight:400;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-decoration:none;padding:6px 10px;border-radius:999px;transition:transform .15s, background .15s}
.rope-inner a:nth-child(7n+2):hover{background:var(--pink)}
.rope-inner a:nth-child(7n+3):hover{background:var(--teal)}
.rope-inner a:nth-child(7n+4):hover{background:var(--leaf)}
.rope-inner a:nth-child(7n+5):hover{background:var(--tang)}
.rope-inner a:nth-child(7n+6):hover{background:var(--grape)}
.rope-inner a:nth-child(7n+7):hover{background:#1D3A8A}
.rope-inner a:nth-child(7n+8):hover{background:#00A396}
.rope-inner a:hover{transform:rotate(-4deg) scale(1.06)}
.rope-inner a[aria-current="page"]{background:var(--sun);color:var(--ink)}
.rope-inner .brand{font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:0;text-transform:none;margin-right:auto;color:var(--sun);padding-left:0}
.rope-inner .brand[aria-current="page"]{background:transparent;color:var(--sun)}

/* ---------- Marquee ---------- */
.ticker{margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));background:var(--sun);color:var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;gap:0;padding-block:7px;animation:tick 48s linear infinite;font-family:var(--f-loud);font-size:13px;letter-spacing:.06em}
.ticker-track span{padding-right:2.4em}
.ticker-track span::after{content:"\2605";margin-left:2.4em;color:var(--pink)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Lobby ---------- */
.lobby{padding-block:40px 32px;display:grid;gap:28px;position:relative}
.motto{font-family:var(--f-loud);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--grape);padding:10px 14px;text-align:center;transform:rotate(-1deg);box-shadow:5px 5px 0 var(--ink)}
.lobby h1{font-family:var(--f-display);font-weight:800;font-size:clamp(46px, 9.5vw, 116px);line-height:.92;letter-spacing:-.01em;color:var(--ink);
  text-shadow:4px 4px 0 var(--sun), 8px 8px 0 var(--pink), 12px 12px 0 var(--teal)}
.lobby h1 em{display:block;margin-top:.12em;font-style:normal;font-family:var(--f-shade);font-weight:400;font-size:.62em;letter-spacing:.01em;text-shadow:none;
  background:linear-gradient(90deg,var(--pink),var(--tang),var(--sun),var(--teal),var(--grape));-webkit-background-clip:text;background-clip:text;color:transparent}
.burst{position:absolute;top:calc(118px + clamp(46px, 9.5vw, 116px));right:0;width:150px;height:150px;display:grid;place-items:center;text-align:center;background:var(--pink);color:#fff;
  clip-path:polygon(50% 0%,61% 12%,75% 4%,79% 20%,95% 18%,90% 34%,100% 45%,90% 56%,96% 72%,80% 74%,76% 90%,62% 85%,50% 100%,38% 85%,24% 90%,20% 74%,4% 72%,10% 56%,0% 45%,10% 34%,5% 18%,21% 20%,25% 4%,39% 12%);
  font-family:var(--f-loud);font-size:15px;line-height:1.05;padding:24px;animation:spin 14s linear infinite}
.burst small{display:block;font-family:var(--f-mono);font-size:9.5px;margin-top:4px;letter-spacing:.02em}
@keyframes spin{to{transform:rotate(360deg)}}
.lobby-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
.lobby-grid > *{min-width:0}
.lede{font-size:21px;max-width:34ch;font-weight:600}
.facts{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;margin-top:24px}
.facts div{padding:12px 14px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);color:var(--ink)}
.facts div:nth-child(1){background:var(--sun);transform:rotate(-2deg)}
.facts div:nth-child(2){background:var(--teal);color:#fff;transform:rotate(1.5deg)}
.facts div:nth-child(3){background:var(--pink);color:#fff;transform:rotate(-1deg)}
.facts div:nth-child(4){background:var(--tang);color:#fff;transform:rotate(2deg)}
.facts b{display:block;font-family:var(--f-loud);font-weight:400;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.facts span{font-size:12.5px;font-weight:600}
.charter{margin-top:26px;padding:20px 22px;background:var(--paper);border:6px double var(--gold-dk);box-shadow:0 0 0 6px var(--gold), 0 0 0 9px var(--ink), 10px 10px 0 9px var(--ink)}
.charter .eyebrow{color:var(--gold-dk)}
.charter blockquote{margin:8px 0 0;font-family:var(--f-display);font-size:23px;line-height:1.3}
.quote{font-family:var(--f-display);font-style:italic;font-size:20px;line-height:1.45;background:var(--paper);border:3px solid var(--ink);padding:18px 20px;box-shadow:6px 6px 0 var(--teal);transform:rotate(.6deg)}
.quote cite{display:block;margin-top:8px;font-family:var(--f-mono);font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- Do Not Touch ---------- */
.dnt-wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px}
.dnt-btn{font-family:var(--f-loud);font-size:16px;color:#fff;background:#E0182D;border:4px solid var(--ink);border-radius:999px;padding:16px 22px;cursor:pointer;box-shadow:0 7px 0 var(--ink);transition:transform .1s, box-shadow .1s}
.dnt-btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}
.dnt-note{font-family:var(--f-mono);font-size:12px;color:var(--muted);max-width:28ch}
.alarm-msg{position:fixed;left:50%;top:calc(env(safe-area-inset-top, 0px) + 90px);transform:translateX(-50%) rotate(-2deg);z-index:20;background:var(--sun);color:var(--ink);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:16px 20px;font-family:var(--f-loud);font-size:18px;line-height:1.2;text-align:center;width:min(92vw, 520px)}
.alarm-msg small{display:block;font-family:var(--f-body);font-size:14px;margin-top:8px}
body.alarm{animation:alarm .35s steps(2) 6}
@keyframes alarm{50%{background-color:#FFB3BC}}

/* ---------- Audio guide = speech bubble ---------- */
.guide{position:relative;display:flex;gap:12px;align-items:flex-start;background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:22px;padding:14px 16px;margin-top:22px;font-size:15.5px;font-weight:500;box-shadow:5px 5px 0 var(--ink)}
.guide::after{content:"";position:absolute;left:34px;bottom:-17px;width:26px;height:17px;background:var(--sun);border:3px solid var(--ink);border-top:none;clip-path:polygon(0 0,100% 0,0 100%);border-left-width:3px}
.guide .who{font-family:var(--f-loud);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--pink);display:block;margin-bottom:2px}
.p-canine .guide .who,.p-woods .guide .who{color:var(--hall)}
.guide button{flex:none;font:400 12px/1 var(--f-loud);letter-spacing:.04em;text-transform:uppercase;border:3px solid var(--ink);background:var(--pink);color:#fff;padding:9px 11px;border-radius:999px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.guide button:hover{transform:rotate(-3deg)}

/* ---------- Halls ---------- */
.hall{padding-block:48px}
.hall-head{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-items:center;margin-bottom:32px}
.hall-no{grid-row:span 2;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:var(--hall);color:#fff;font-family:var(--f-display);font-weight:800;font-size:40px;line-height:1;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--hall-2);transform:rotate(-8deg)}
.hall-head .eyebrow{background:var(--ink);color:#fff;justify-self:start;padding:4px 10px;transform:rotate(-1deg)}
.hall-head h2{font-family:var(--f-display);font-weight:800;font-size:clamp(36px, 6.4vw, 72px);line-height:.98;color:var(--hall);text-shadow:4px 4px 0 var(--hall-2), 8px 8px 0 var(--ink)}
.p-canine .hall-head h2{color:var(--ink);text-shadow:4px 4px 0 var(--sun), 8px 8px 0 var(--pink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.two > *{min-width:0}
.stack{display:grid;gap:22px;align-content:start}

/* placards are stickers */
.placard{background:var(--paper);border:3px solid var(--ink);padding:16px 18px;font-size:15.5px;display:grid;gap:8px;box-shadow:7px 7px 0 var(--hall-2);transform:rotate(-.6deg);color:var(--ink)}
.stack > .placard:nth-of-type(even){transform:rotate(.7deg);box-shadow:7px 7px 0 var(--hall)}
.placard h3{font-family:var(--f-display);font-weight:800;font-size:24px;line-height:1.1;color:var(--hall)}
.placard .meta{font-family:var(--f-loud);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--hall);justify-self:start;padding:3px 8px}
.placard dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:4px 0 0}
.placard dt{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.placard dd{margin:0}
.fill{font-family:var(--f-mono);font-size:13px;background:var(--sun);color:var(--ink);padding:1px 6px;border:2px dashed var(--ink)}

/* crooked gold frames */
.frame{margin:0;padding:14px 14px 0;position:relative;transition:transform .25s;
  background:repeating-linear-gradient(45deg,#F5C84C 0 6px,#D99A12 6px 12px);
  border:4px solid var(--gold-dk);box-shadow:inset 0 0 0 4px #FFE58A, 10px 12px 0 var(--ink);transform:rotate(-1.6deg)}
.stack > .frame:nth-of-type(even), .two > .frame:nth-child(even), .portrait-row > .stack:nth-child(even) .frame, .billboards > .stack:nth-child(even) .frame{transform:rotate(1.4deg)}
.frame:hover{transform:rotate(0) scale(1.02)}
.frame-in{background:var(--paper);aspect-ratio:var(--ar, 4/5);max-width:100%;overflow:hidden;position:relative;border:4px solid var(--gold-dk)}
.frame-in img{width:100%;height:100%;object-fit:cover;display:block}
.frame figcaption{font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--ink);background:#FFE58A;border:2px solid var(--gold-dk);margin:10px auto 12px;padding:6px 10px;letter-spacing:.02em;max-width:92%;text-align:center}
.pending{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:14px;overflow:auto;color:var(--ink);font-size:13.5px;line-height:1.45;
  background:repeating-linear-gradient(-45deg, var(--tint) 0 16px, var(--paper) 16px 32px)}
.pending .tag{font-family:var(--f-loud);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--pink);align-self:flex-start;padding:3px 8px}
.pending .tag + .fname + .what + .tag{background:var(--ink)}
.pending .fname{font-family:var(--f-mono);font-size:12px;font-weight:600;background:var(--sun);border:2px solid var(--ink);padding:3px 6px;align-self:flex-start;word-break:break-word}
.pending .what{font-weight:600}
.pending .prompt{font-family:var(--f-mono);font-size:12px;background:var(--paper);border:2px solid var(--ink);padding:8px;white-space:pre-wrap}
.pending button{align-self:flex-start;font:400 11px/1 var(--f-loud);letter-spacing:.04em;text-transform:uppercase;border:3px solid var(--ink);background:var(--teal);color:#fff;padding:8px 10px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}

/* ---------- Canine Wing: hazard tape ---------- */
.p-canine main{position:relative}
.p-canine .hall::before{content:"SECURITY ZONE \2022 SECURITY ZONE \2022 SECURITY ZONE \2022 SECURITY ZONE \2022 SECURITY ZONE \2022 SECURITY ZONE";display:block;white-space:nowrap;overflow:hidden;font-family:var(--f-loud);font-size:13px;color:var(--ink);padding:6px 0;margin:0 0 28px;
  background:repeating-linear-gradient(-45deg,var(--sun) 0 18px,#FFE680 18px 36px);border-block:4px solid var(--ink);transform:rotate(-1.2deg)}
.badge{background:var(--paper);border:3px solid var(--ink);display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px;align-items:center;box-shadow:6px 6px 0 var(--ink)}
.badge .stamp{font-family:var(--f-loud);font-size:13px;letter-spacing:.04em;text-transform:uppercase;border:3px solid #E0182D;color:#E0182D;padding:6px 8px;transform:rotate(-8deg);background:#FFF0F2}
.rules{counter-reset:r;list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rules li{counter-increment:r;padding-left:46px;position:relative;font-size:15.5px;font-weight:500}
.rules li::before{content:"\00A7" counter(r);position:absolute;left:0;top:-1px;font-family:var(--f-loud);font-size:13px;color:var(--ink);background:var(--sun);border:2px solid var(--ink);padding:1px 6px}

/* ---------- Woods: road signs ---------- */
.acre{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;margin-bottom:28px}
.acre div{background:var(--leaf);color:#fff;padding:12px 14px;border-radius:10px;box-shadow:inset 0 0 0 3px var(--leaf), inset 0 0 0 6px #fff, 5px 5px 0 var(--ink)}
.acre div:nth-child(3){background:var(--sun);color:var(--ink);box-shadow:inset 0 0 0 3px var(--sun), inset 0 0 0 6px var(--ink), 5px 5px 0 var(--ink);transform:rotate(2deg)}
.acre b{font-family:var(--f-road);font-weight:800;font-size:34px;display:block;line-height:1;font-variant-numeric:tabular-nums}
.acre span{font-size:13px;font-weight:600}
.signs{display:grid;grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));gap:14px}
.sign{background:var(--leaf);color:#fff;border-radius:10px;box-shadow:inset 0 0 0 3px var(--leaf), inset 0 0 0 6px #fff, 5px 6px 0 var(--ink);padding:14px 16px 12px;font-family:var(--f-road);font-weight:800;font-size:19px;line-height:1.1;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:88px;border:none;text-align:left;cursor:pointer;transition:transform .15s}
.sign:nth-child(3n+1){transform:rotate(-1.5deg)}
.sign:nth-child(3n+2){transform:rotate(1deg)}
.sign:nth-child(5n){background:#1D4FA0;box-shadow:inset 0 0 0 3px #1D4FA0, inset 0 0 0 6px #fff, 5px 6px 0 var(--ink)}
.sign:nth-child(7n){background:#8A4B12;box-shadow:inset 0 0 0 3px #8A4B12, inset 0 0 0 6px #fff, 5px 6px 0 var(--ink)}
.sign small{font-family:var(--f-mono);font-weight:600;font-size:11px;opacity:.95;letter-spacing:.04em}
.sign:hover{transform:rotate(-3deg) scale(1.05)}
.sign[aria-pressed="true"]{transform:scale(1.07) rotate(0)}
.sign[aria-pressed="true"]::after{content:"YOU ARE HERE";font-family:var(--f-loud);font-weight:400;font-size:11px;letter-spacing:.04em;background:var(--pink);color:#fff;padding:3px 7px;align-self:flex-start}

/* ---------- Voyages: roadside sunburst ---------- */
.roadside{color:var(--ink);padding:30px 22px;display:grid;gap:22px;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);
  background:repeating-conic-gradient(from 0deg at 50% 0%, #FF6A1F 0deg 9deg, #FF8A3D 9deg 18deg)}
.roadside .hall-head h2{font-family:var(--f-kitsch);font-weight:400;color:#FFF8E8;text-shadow:4px 4px 0 var(--teal), 8px 8px 0 var(--ink)}
.roadside .hall-no{background:var(--teal)}
.roadside .eyebrow{color:#fff}
.billboards{display:grid;grid-template-columns:repeat(2, 1fr);gap:30px}
.billboards > *{min-width:0}
.worlds{font-family:var(--f-kitsch);font-size:20px;color:var(--tang);transform:rotate(-2deg);justify-self:start}
.roadside .guide[style]{background:var(--sun)!important;color:var(--ink)!important}
.roadside .guide .who[style]{color:var(--pink)!important}

/* ---------- Ventures ---------- */
.portrait-row{display:grid;grid-template-columns:repeat(3, 1fr);gap:28px}
.portrait-row > *{min-width:0}
.former::after{content:"ON PERMANENT LOAN";position:absolute;top:22px;right:-6px;z-index:2;font-family:var(--f-loud);font-size:12px;letter-spacing:.04em;background:var(--pink);color:#fff;border:3px solid var(--ink);padding:6px 10px;transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink)}

/* ---------- Mission: stained glass ---------- */
.chapel{position:relative;padding:clamp(18px, 4vw, 40px);border:6px solid var(--ink);
  background:
   conic-gradient(from 45deg at 20% 30%, #C0392B 0 25%, #1D3A8A 0 50%, #E3A21A 0 75%, #1E7A3E 0) 0 0/120px 120px;
  box-shadow:10px 10px 0 var(--ink)}
.chapel-in, .chapel > *{position:relative}
.chapel::before{content:"";position:absolute;inset:clamp(18px, 4vw, 40px);background:var(--paper);border:4px solid var(--ink)}
.chapel > *{z-index:1;margin-inline:clamp(14px, 3vw, 32px)}
.chapel > :first-child{margin-top:clamp(14px, 3vw, 32px)}
.chapel > :last-child{margin-bottom:clamp(14px, 3vw, 32px)}
.chapel{display:grid;gap:26px}
.chapel .eyebrow{color:var(--gold-dk)!important}
.chapel .mission{font-family:var(--f-display);font-weight:800;font-size:clamp(28px, 4.4vw, 46px);line-height:1.15;max-width:26ch;color:#1D3A8A}
.verses{display:grid;grid-template-columns:repeat(2, 1fr);gap:24px 36px}
.verses > *{min-width:0}
.verse{border-left:6px solid var(--gold);padding-left:14px}
.verse:nth-child(2){border-color:#C0392B}.verse:nth-child(3){border-color:#1E7A3E}.verse:nth-child(4){border-color:#1D3A8A}
.verse p{font-family:var(--f-display);font-size:19px;line-height:1.5}
.verse span{display:block;margin-top:6px;font-family:var(--f-mono);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dk)}
.bsb{font-size:12.5px;color:var(--muted)}

/* ---------- Shop ---------- */
.shop{display:grid;grid-template-columns:repeat(2, 1fr);gap:30px}
.shop > *{min-width:0}
.shop a.big{font-family:var(--f-loud);font-weight:400;font-size:26px;color:var(--pink)}
.copyline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.copyline code{font-family:var(--f-mono);font-size:14px;font-weight:600;background:var(--tint);border:2px solid var(--ink);padding:3px 7px;user-select:all;word-break:break-all}
.copyline button{font:400 11px/1 var(--f-loud);letter-spacing:.04em;text-transform:uppercase;border:3px solid var(--ink);background:var(--sun);color:var(--ink);padding:7px 9px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}

/* ---------- Floor plan ---------- */
.floorplan{padding-block:48px}
.floorplan .hall-no{font-size:22px;font-family:var(--f-loud);font-weight:400}
.plan{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.room{background:var(--paper);color:var(--ink);text-decoration:none;font-weight:400;padding:18px;display:grid;gap:6px;align-content:start;min-height:180px;border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);transition:transform .15s}
.room:nth-child(odd){transform:rotate(-1.2deg)}
.room:nth-child(even){transform:rotate(1deg)}
.room:hover{transform:rotate(0) scale(1.04)}
.room .no{font-family:var(--f-display);font-weight:800;font-size:44px;line-height:.9}
.room h3{font-family:var(--f-display);font-weight:800;font-size:24px;line-height:1.1}
.room p{font-size:14.5px;font-weight:500}
.room .narr{font-family:var(--f-mono);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:auto}
.plan .room:nth-child(1){background:#4B1D8F;color:#fff}.plan .room:nth-child(1) .no{color:var(--gold)}
.plan .room:nth-child(2){background:var(--sun)}
.plan .room:nth-child(3){background:var(--leaf);color:#fff}.plan .room:nth-child(3) .no{color:var(--sun)}
.plan .room:nth-child(4){background:var(--tang);color:#fff}.plan .room:nth-child(4) .no{color:var(--ink)}
.plan .room:nth-child(5){background:#E8336D;color:#fff}.plan .room:nth-child(5) .no{color:var(--sun)}
.plan .room:nth-child(6){background:#1D3A8A;color:#fff}.plan .room:nth-child(6) .no{color:var(--gold)}
.plan .room:nth-child(7){background:#00A396;color:#fff}.plan .room:nth-child(7) .no{color:var(--ink)}
.room.staff{background:repeating-linear-gradient(135deg,var(--sun) 0 16px,var(--ink) 16px 32px)!important;color:var(--ink);position:relative}
.room.staff > *{background:var(--paper);padding:2px 6px;justify-self:start}

/* ---------- Tour nav, crumb, footer ---------- */
.crumb{font-family:var(--f-mono);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:22px}
.crumb a{color:var(--hall)}
.tour{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-block:8px 48px}
.tour a{display:grid;gap:4px;padding:16px 18px;border:4px solid var(--ink);text-decoration:none;color:var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);transition:transform .15s}
.tour .next{text-align:right;grid-column:2;background:var(--hall);color:#fff}
.p-canine .tour .next{background:var(--sun);color:var(--ink)}
.tour a:hover{transform:translate(-2px,-2px) rotate(-1deg)}
.tour .dir{font-family:var(--f-loud);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.tour b{font-family:var(--f-display);font-weight:800;font-size:24px;line-height:1.1}
footer{padding-block:34px 56px;margin-top:8px;border-top:6px solid var(--ink);display:grid;gap:12px;font-size:14px;color:var(--muted);font-weight:500}
.counter{font-family:var(--f-mono);font-variant-numeric:tabular-nums;background:var(--ink);color:#7CFFB2;padding:2px 8px;letter-spacing:.14em}

@media (max-width:820px){
  .lobby-grid,.two,.billboards,.portrait-row,.verses,.shop{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2, 1fr)}
  .burst{position:relative;top:auto;right:auto;justify-self:end;width:120px;height:120px;font-size:12px;padding:18px;margin-top:-10px}
  .hall-no{width:68px;height:68px;font-size:30px}
}
@media (max-width:620px){.tour{grid-template-columns:1fr}.tour .next{grid-column:1}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ---------- Photo archives: nav link + lobby banner ---------- */
.rope-inner a.ext{background:var(--pink);color:#fff}
.rope-inner a.ext:hover{background:var(--teal)}
.archive{padding-block:24px 8px}
.archive a{display:grid;gap:6px;text-decoration:none;color:var(--ink);padding:26px 28px;border:5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);transform:rotate(-.8deg);transition:transform .15s;
  background:repeating-linear-gradient(90deg,var(--pink) 0 60px,var(--tang) 60px 120px,var(--sun) 120px 180px,var(--teal) 180px 240px,var(--grape) 240px 300px)}
.archive a:hover{transform:rotate(0) scale(1.01)}
.archive a > span{background:var(--paper);justify-self:start;padding:2px 10px;border:3px solid var(--ink)}
.archive-tag{font-family:var(--f-loud);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--pink)}
.archive-title{font-family:var(--f-display);font-weight:800;font-size:clamp(32px, 6vw, 60px);line-height:1.05}
.archive-sub{font-size:16px;font-weight:600}