:root {
  --parchment: #EFE6D2;
  --marble: #D7CEC0;
  --olive: #6F785E;
  --rose: #B98278;
  --umber: #2F2A24;
  --blue: #6C7F91;
  --gold: #C0A15A;
  --soft-shadow: rgba(47, 42, 36, 0.18);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  font-family: "Quicksand", system-ui, sans-serif;
  color: var(--umber);
  background:
    radial-gradient(circle at 12% 18%, rgba(192, 161, 90, 0.18), transparent 24rem),
    radial-gradient(circle at 86% 78%, rgba(108, 127, 145, 0.16), transparent 28rem),
    linear-gradient(135deg, #EFE6D2 0%, #E8DDC8 48%, #D7CEC0 100%);
}

.civic-gallery {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
}

.garden-lines {
  position: absolute;
  inset: -12%;
  opacity: 0.38;
  background:
    repeating-radial-gradient(ellipse at 18% 35%, transparent 0 30px, rgba(111, 120, 94, 0.16) 32px 34px, transparent 36px 62px),
    repeating-radial-gradient(ellipse at 75% 64%, transparent 0 44px, rgba(47, 42, 36, 0.08) 46px 48px, transparent 50px 86px);
  transform: rotate(-4deg);
  z-index: -3;
}

.garden-lines::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(47, 42, 36, 0.12) 1px, transparent 1px),
    radial-gradient(rgba(185, 130, 120, 0.12) 1px, transparent 1px);
  background-size: 37px 41px, 73px 69px;
}

.marble-crumbs span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marble);
  box-shadow: inset -2px -2px 0 rgba(47, 42, 36, 0.08), 0 12px 22px rgba(47, 42, 36, 0.12);
  z-index: 1;
}

.marble-crumbs span:nth-child(1) { left: 7%; top: 20%; }
.marble-crumbs span:nth-child(2) { right: 11%; top: 15%; width: 13px; height: 13px; }
.marble-crumbs span:nth-child(3) { left: 18%; bottom: 13%; width: 6px; height: 6px; }
.marble-crumbs span:nth-child(4) { right: 23%; bottom: 19%; }
.marble-crumbs span:nth-child(5) { left: 48%; top: 8%; width: 5px; height: 5px; }
.marble-crumbs span:nth-child(6) { right: 4%; top: 57%; width: 10px; height: 10px; }

.room {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.room.active { opacity: 1; }

.room-copy {
  position: absolute;
  left: clamp(22px, 4vw, 68px);
  top: clamp(24px, 5vh, 58px);
  width: min(390px, 35vw);
  z-index: 4;
  transform: translateY(14px);
  transition: transform 900ms ease, opacity 900ms ease;
  opacity: 0.74;
}

.room.active .room-copy { transform: translateY(0); opacity: 1; }

.overline, .inscription, .room-label, .tile span {
  font-family: "Cormorant Garamond", Georgia, serif;
}

.overline {
  margin: 0 0 12px;
  color: var(--olive);
  font-size: 0.98rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

h1, h2 {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--umber);
}

h1 { font-size: clamp(2.6rem, 5.8vw, 6.4rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 5rem); }

.room-copy p:last-child {
  font-size: clamp(0.92rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  max-width: 29rem;
  color: rgba(47, 42, 36, 0.76);
}

.specimen-tray {
  position: absolute;
  inset: clamp(78px, 11vh, 122px) clamp(22px, 5vw, 82px) clamp(56px, 7vh, 86px) clamp(22px, 5vw, 82px);
  display: grid;
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  grid-template-rows: repeat(4, minmax(104px, 1fr));
  gap: clamp(12px, 1.4vw, 24px);
  z-index: 2;
  transition: transform 1000ms cubic-bezier(.2,.8,.2,1), filter 1000ms ease;
}

.tile {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(14px, 1.6vw, 24px);
  border: 1px solid rgba(47, 42, 36, 0.13);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 20% 18%, rgba(239, 230, 210, 0.95), transparent 32%),
    linear-gradient(145deg, #D7CEC0, #CDBFAF 52%, #EFE6D2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset -13px -18px 40px rgba(47,42,36,0.05), 0 22px 45px var(--soft-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(42px) scale(0.96) rotate(var(--r, 0deg));
  transition: grid-area 900ms ease, opacity 750ms ease, transform 900ms cubic-bezier(.2,.8,.2,1), border-radius 900ms ease, background 900ms ease;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 15%, rgba(47,42,36,0.07) 16%, transparent 19% 48%, rgba(108,127,145,0.10) 49%, transparent 53%),
    linear-gradient(35deg, transparent 20%, rgba(255,255,255,0.18) 21%, transparent 25% 80%, rgba(47,42,36,0.05) 82%, transparent 86%);
  opacity: 0.8;
  pointer-events: none;
}

.tile::after {
  content: attr(data-artifact);
  position: absolute;
  right: 18px;
  bottom: 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: rgba(47, 42, 36, 0.38);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.tile:hover::after, .tile.revealed::after { opacity: 1; transform: translateY(0); }
.tile.placed { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r, 0deg)); }

.tile svg {
  width: min(74%, 132px);
  height: min(74%, 132px);
  overflow: visible;
  filter: drop-shadow(0 10px 10px rgba(47,42,36,0.13));
  z-index: 1;
}

.tile path, .tile circle {
  fill: none;
  stroke: var(--umber);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile .vein { stroke: rgba(108, 127, 145, 0.38); stroke-width: 3; }
.tile .chip { fill: rgba(185, 130, 120, 0.18); stroke: var(--rose); }
.tile .flame { fill: rgba(192, 161, 90, 0.22); stroke: var(--gold); }

.tile span:not(.wordmark):not(.inscription) {
  position: absolute;
  left: 18px;
  top: 14px;
  color: rgba(47,42,36,0.58);
  font-size: 1rem;
}

.day-stone {
  grid-area: 2 / 2 / span 2 / span 2;
  border-radius: 48px;
  background: transparent;
  box-shadow: none;
  border: 0;
  --r: -1deg;
}

.day-stone::before, .day-stone::after { display: none; }

.marble-disk {
  width: min(34vw, 390px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  background:
    radial-gradient(circle at 32% 27%, rgba(255,255,255,0.55), transparent 20%),
    linear-gradient(128deg, transparent 0 31%, rgba(108,127,145,0.16) 32% 34%, transparent 36% 58%, rgba(47,42,36,0.08) 59% 60%, transparent 62%),
    linear-gradient(145deg, #EFE6D2, #D7CEC0 58%, #CBBBA8);
  border: 1px solid rgba(47,42,36,0.16);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.62), inset -22px -26px 42px rgba(47,42,36,0.08), 0 28px 65px rgba(47,42,36,0.2);
}

.marble-disk::before {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(192, 161, 90, 0.42);
  border-radius: 50%;
}

.wordmark {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4.3vw, 4.8rem);
  letter-spacing: -0.055em;
  color: var(--umber);
  z-index: 1;
}

.inscription {
  position: absolute;
  bottom: 23%;
  color: var(--olive);
  letter-spacing: 0.12em;
  font-size: clamp(0.78rem, 1.2vw, 1.05rem);
  text-transform: lowercase;
}

.ballot { grid-area: 1 / 3 / span 1 / span 1; border-radius: 50%; --r: 3deg; }
.amphora { grid-area: 1 / 5 / span 2 / span 1; --r: -2deg; }
.well-one { grid-area: 1 / 4 / span 1 / span 1; --r: 1deg; }
.column { grid-area: 1 / 1 / span 2 / span 1; --r: -3deg; }
.speech { grid-area: 3 / 4 / span 1 / span 2; --r: 1.5deg; }
.bench { grid-area: 4 / 1 / span 1 / span 2; --r: 2deg; }
.decree { grid-area: 4 / 3 / span 1 / span 1; --r: -1deg; }
.ear { grid-area: 2 / 4 / span 1 / span 1; border-radius: 42px 42px 54px 34px; --r: 2deg; }
.rostrum { grid-area: 3 / 1 / span 1 / span 1; --r: 1deg; }
.laurel { grid-area: 2 / 5 / span 1 / span 1; border-radius: 50%; --r: -1deg; }
.microphone { grid-area: 4 / 4 / span 1 / span 1; --r: 2.5deg; }
.owl { grid-area: 3 / 5 / span 1 / span 1; border-radius: 50%; --r: -3deg; }
.well-two { grid-area: 4 / 5 / span 1 / span 1; --r: 2deg; }

.empty-well {
  background: rgba(239, 230, 210, 0.36);
  border: 1px dashed rgba(47,42,36,0.16);
  box-shadow: inset 0 12px 32px rgba(47,42,36,0.06);
}

.empty-well span {
  inset: auto !important;
  position: relative !important;
  color: rgba(47, 42, 36, 0.28) !important;
  letter-spacing: 0.16em;
}

.pulse-rose.pulsing, .pulse-blue.pulsing, .pulse-olive.pulsing { animation: breathingTile 5s ease-in-out infinite; }
.pulse-rose.pulsing { --pulse: rgba(185, 130, 120, 0.44); }
.pulse-blue.pulsing { --pulse: rgba(108, 127, 145, 0.42); }
.pulse-olive.pulsing { --pulse: rgba(111, 120, 94, 0.42); }

@keyframes breathingTile {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 22px 45px var(--soft-shadow), 0 0 0 0 var(--pulse); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 22px 45px var(--soft-shadow), 0 0 0 18px rgba(185,130,120,0); }
}

.arrangement-constellation .day-stone { grid-area: 1 / 2 / span 2 / span 2; }
.arrangement-constellation .speech { grid-area: 1 / 4 / span 1 / span 2; }
.arrangement-constellation .ear { grid-area: 2 / 4 / span 1 / span 1; }
.arrangement-constellation .decree { grid-area: 3 / 2 / span 1 / span 1; }
.arrangement-constellation .bench { grid-area: 4 / 3 / span 1 / span 2; }
.arrangement-constellation .column { grid-area: 2 / 1 / span 2 / span 1; }
.arrangement-constellation .owl { grid-area: 3 / 5 / span 1 / span 1; }
.arrangement-constellation .ballot { grid-area: 4 / 1 / span 1 / span 1; }

.arrangement-attention .tile { filter: saturate(0.86); }
.arrangement-attention .ballot, .arrangement-attention .speech, .arrangement-attention .ear { filter: saturate(1.1); }
.arrangement-attention .day-stone { grid-area: 2 / 2 / span 2 / span 2; }
.arrangement-attention .amphora { grid-area: 1 / 1 / span 2 / span 1; }
.arrangement-attention .speech { grid-area: 1 / 4 / span 1 / span 2; }
.arrangement-attention .ear { grid-area: 3 / 4 / span 1 / span 1; }

.arrangement-garden { transform: scale(0.94); }
.arrangement-garden .tile:not(.day-stone):not(.ballot):not(.bench):not(.ear):not(.decree) { opacity: 0.18; transform: translateY(26px) scale(0.9) rotate(var(--r)); }
.arrangement-garden .day-stone { grid-area: 1 / 3 / span 2 / span 2; }
.arrangement-garden .ballot { grid-area: 3 / 2 / span 1 / span 1; }
.arrangement-garden .ear { grid-area: 3 / 4 / span 1 / span 1; }
.arrangement-garden .bench { grid-area: 4 / 2 / span 1 / span 2; }
.arrangement-garden .decree { grid-area: 4 / 4 / span 1 / span 1; }

.floating-coin {
  position: absolute;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #EFE6D2;
  color: var(--gold);
  box-shadow: 0 14px 30px rgba(47,42,36,0.14);
  z-index: 5;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 900ms ease, transform 900ms ease;
}

.floating-coin.visible { opacity: 1; transform: scale(1); }
.coin-one { left: 17%; top: 37%; }
.coin-two { right: 29%; top: 18%; color: var(--blue); }
.coin-three { right: 16%; bottom: 24%; color: var(--rose); }

.pebble-nav {
  position: absolute;
  right: clamp(18px, 3vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 14px;
  z-index: 8;
}

.pebble {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(47,42,36,0.2);
  border-radius: 50%;
  background: var(--marble);
  box-shadow: inset -3px -4px 8px rgba(47,42,36,0.08), 0 9px 18px rgba(47,42,36,0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 350ms ease, background 350ms ease;
}

.pebble.active { transform: scale(1.45); background: var(--gold); }
.pebble span { position: absolute; right: 28px; opacity: 0; white-space: nowrap; font-family: "Cormorant Garamond", Georgia, serif; color: rgba(47,42,36,0.6); transform: translateX(6px); transition: opacity 300ms ease, transform 300ms ease; }
.pebble:hover span, .pebble.active span { opacity: 1; transform: translateX(0); }

.room-label {
  position: absolute;
  left: clamp(22px, 4vw, 68px);
  bottom: clamp(18px, 4vh, 42px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(47,42,36,0.6);
  z-index: 7;
  letter-spacing: 0.08em;
}

.label-index {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(215, 206, 192, 0.75);
  color: var(--olive);
}

@media (max-width: 900px) {
  html, body { overflow: auto; }
  .civic-gallery { min-height: 1080px; height: auto; }
  .room-copy { position: relative; width: auto; max-width: 88vw; padding-top: 24px; }
  .specimen-tray { position: relative; inset: auto; margin: 56px 18px 78px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; grid-template-rows: none; }
  .tile, .day-stone, .ballot, .amphora, .well-one, .column, .speech, .bench, .decree, .ear, .rostrum, .laurel, .microphone, .owl, .well-two { grid-area: auto !important; }
  .day-stone { grid-column: span 2 !important; grid-row: span 2 !important; }
  .marble-disk { width: min(72vw, 360px); }
  .pebble-nav { right: 18px; top: 24px; transform: none; display: flex; }
  .pebble span { display: none; }
  .room-label { position: fixed; }
}