/* ==========================================================================
   DocketGenius.org palace theme 2.0
   Mockup chrome: solid purple bar, palace hero, parchment program cards,
   bordered info band, five-column footer with the seal.
   Every motion rule is disabled under prefers-reduced-motion at the bottom.
   ========================================================================== */

/* One variable file covers 300–700, subset to Latin (59 KB). */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/CormorantGaramond-var.woff2") format("woff2-variations"),
       url("assets/fonts/CormorantGaramond-var.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --magic: "Cormorant Garamond", Palatino, "Palatino Linotype", Georgia, serif;
  --gold-deep: #a8801a;
  --gold-mid: #c9a227;
  --gold-hi: #ffe9a8;
  --plum: #1d0a33;
  --plum-lo: #12061f;
  --plum-hi: #3a1566;
  --violet: #7c3aed;
  --parch-hi: #fdf7e7;
  --parch-lo: #e9d8b4;
  --parch-ink: #46290a;
  --ring: 0 0 0 1px rgba(240, 215, 140, .5);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.dg-wordmark,
.dg-brand b,
.dg-hero-copy h1,
.dg-guide-hero h1,
.dg-tile h2,
.dg-band h3,
.dg-foot h6,
.dg-inner h1,
.dg-inner h2,
.dg-feat b,
.dg-sub,
.dg-panel-title,
.dg-sign h1 {
  font-family: var(--magic);
  font-weight: 600;
  letter-spacing: .01em;
}
/* Cormorant is a light-by-default old-style face; large sizes want more heft. */
.dg-hero-copy h1,
.dg-guide-hero h1,
.dg-sign h1 { font-weight: 700 }

.dg-gold-text {
  background: linear-gradient(178deg, #fff6d4 4%, #f0d78c 34%, #d9a92c 66%, #b8871a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Header — solid bar, gold hairline, centred nav with a sliding underline
   -------------------------------------------------------------------------- */

.dg-sat-bar {
  position: relative;
  z-index: 50000;
  overflow: visible;
  background: linear-gradient(180deg, #2b1049 0%, #240d3f 62%, #1e0a36 100%);
  border-bottom: 1px solid rgba(240, 215, 140, .42);
  box-shadow: 0 10px 30px rgba(8, 2, 18, .55), inset 0 -1px 0 rgba(240, 215, 140, .12);
  backdrop-filter: none;
}
.dg-sat-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 122, .85), transparent);
  pointer-events: none;
}
.dg-sat-bar .dg-bar-inner {
  overflow: visible;
  flex-wrap: nowrap;
  gap: 14px;
  padding: 11px 0;
}

.dg-brand img.dg-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(232, 197, 71, .5));
}
.dg-brand b.dg-wordmark {
  font-size: 1.42rem;
  line-height: 1.15;
  background: linear-gradient(178deg, #fff6d4, #f0d78c 40%, #d0a029);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dg-brand small { color: #b9a3dd; font-size: 11px }

.dg-nav { flex: 1; justify-content: center; gap: 6px }
.dg-nav > a,
.dg-drop > a {
  position: relative;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 15.5px;
  color: #f4ecff;
  transition: color .18s ease;
}
.dg-nav > a::after,
.dg-drop > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
  transform: translateX(-50%);
  transition: width .22s ease;
}
.dg-nav > a:hover,
.dg-drop > a:hover { background: transparent; color: var(--gold-hi) }
.dg-nav > a:hover::after,
.dg-drop:hover > a::after { width: calc(100% - 18px) }
.dg-nav > a[aria-current] { background: transparent; color: var(--gold-hi) }
.dg-nav > a[aria-current]::after,
.dg-drop.on > a::after { width: calc(100% - 18px) }

.dg-drop { z-index: 3 }
.dg-drop > a .dg-i-chevron { margin-left: 5px; transition: transform .22s ease }
.dg-drop:hover > a .dg-i-chevron { transform: translateY(2px) }
.dg-menu {
  display: none;
  z-index: 50001;
  min-width: 226px;
  padding: 9px;
  background: linear-gradient(180deg, #2e1250, #210c3b);
  border: 1px solid rgba(240, 215, 140, .6);
  border-radius: 14px;
  box-shadow: 0 22px 54px rgba(6, 1, 14, .66);
}
.dg-drop:hover .dg-menu,
.dg-drop:focus-within .dg-menu { display: grid; animation: dg-menu-in .17s ease both }
.dg-menu a { font-size: 14.5px; padding: 9px 12px }
.dg-menu a:hover { background: rgba(240, 215, 140, .16); color: var(--gold-hi) }
@keyframes dg-menu-in {
  from { opacity: 0; transform: translateY(-6px) }
  to { opacity: 1; transform: none }
}

.dg-lamp-btn {
  width: 42px;
  height: 42px;
  color: var(--gold-lt);
  border-color: rgba(240, 215, 140, .45);
  transition: box-shadow .2s ease, color .2s ease, transform .2s ease;
}
.dg-lamp-btn:hover {
  color: var(--gold-hi);
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(232, 197, 71, .45);
}

/* Buttons: purple body, gold rim — the mockup never uses a solid gold fill. */
.dg-join,
.dg-btn.gold,
.dg-go,
.dg-know button {
  background: linear-gradient(180deg, #4d1f7d 0%, #35145c 55%, #290f47 100%);
  color: #f8ecc0;
  border: 1px solid var(--gold-mid);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 235, 170, .22),
    0 0 18px rgba(232, 197, 71, .16);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.dg-join:hover,
.dg-btn.gold:hover,
.dg-go:hover,
.dg-know button:hover {
  transform: translateY(-2px);
  border-color: var(--gold-hi);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 235, 170, .3),
    0 0 28px rgba(232, 197, 71, .42);
}
.dg-btn.ghost {
  border: 1px solid var(--gold-mid);
  color: #f5e8bd;
  background: rgba(30, 10, 54, .42);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.dg-btn.ghost:hover {
  transform: translateY(-2px);
  border-color: var(--gold-hi);
  box-shadow: 0 0 24px rgba(232, 197, 71, .3);
}
.dg-btn, .dg-join { position: relative; overflow: hidden }
.dg-i { flex: none; vertical-align: middle }
.dg-btn .dg-i, .dg-join .dg-i { color: var(--gold-hi) }

/* Sparkle sweep across a button on hover. */
.dg-btn::before,
.dg-join::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 190, .3), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.dg-btn:hover::before,
.dg-join:hover::before { animation: dg-sheen .62s ease both }
@keyframes dg-sheen {
  from { left: -60%; opacity: 0 }
  30% { opacity: 1 }
  to { left: 115%; opacity: 0 }
}

.dg-nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(240, 215, 140, .45);
  background: transparent;
  color: var(--gold-lt);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Hero — palace room, art stage, copy column, card row
   -------------------------------------------------------------------------- */

body.dg-body.home .dg-hero.dg-palace {
  position: relative;
  margin: 0;
  padding: 0 0 34px;
  overflow: hidden;
  isolation: isolate;
  background-color: #140725;
  background-image: url("assets/hero-bg.jpg");
  background-image: image-set(url("assets/hero-bg.webp") type("image/webp"), url("assets/hero-bg.jpg") type("image/jpeg"));
  background-position: center 26%;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Left-weighted scrim so the gold headline always has contrast. */
body.dg-body.home .dg-hero.dg-palace::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 3, 22, .88) 0%, rgba(10, 3, 22, .62) 34%, rgba(10, 3, 22, .12) 68%, rgba(10, 3, 22, .3) 100%),
    linear-gradient(180deg, rgba(10, 3, 22, .55) 0%, transparent 22%, transparent 62%, rgba(10, 3, 22, .78) 100%);
}
/* Layering, cheapest to deepest: scrim 0, lantern bloom 1, art 3, page 4.
   Do not use a `> *` rule here — it would out-specify .dg-stage's own
   position:absolute and collapse the whole stage. */
.dg-hero-inner { position: relative; z-index: 4; padding: 54px 0 0 }

/* Soft lantern bloom pinned over the two lanterns painted in the artwork. */
.dg-lanterns { position: absolute; inset: 0; z-index: 1; pointer-events: none }
.dg-lanterns i {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 186, 92, .5) 0%, rgba(255, 150, 60, .16) 42%, transparent 72%);
  mix-blend-mode: screen;
}
.dg-lanterns i:nth-child(1) { left: -3%; top: 8%; animation: dg-lantern 5.4s ease-in-out infinite }
.dg-lanterns i:nth-child(2) { right: -2%; top: 16%; animation: dg-lantern 6.8s ease-in-out .8s infinite }
.dg-lanterns i:nth-child(3) {
  left: 30%;
  top: 26%;
  width: 150px;
  height: 150px;
  opacity: .6;
  animation: dg-lantern 7.6s ease-in-out 1.6s infinite;
}
@keyframes dg-lantern {
  0%, 100% { opacity: .55; transform: scale(1) }
  50% { opacity: .9; transform: scale(1.07) }
}

.dg-hero-copy {
  position: relative;
  z-index: 6;
  max-width: 53%;
  padding-bottom: 8px;
}
.dg-flourish-top { margin: 0 0 6px; line-height: 0 }
.dg-flourish-top .dg-i { color: var(--gold-mid); filter: drop-shadow(0 0 10px rgba(232, 197, 71, .4)) }

.dg-palace .dg-hero-copy h1 {
  font-size: clamp(38px, 5vw, 74px);
  line-height: 1.04;
  margin: 0 0 10px;
  filter: drop-shadow(0 2px 2px rgba(40, 12, 0, .5)) drop-shadow(0 0 26px rgba(232, 197, 71, .42));
}
.dg-palace .dg-hero-copy p {
  color: #e7dbf8;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 42ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
}
/* The tagline and the button row are also <p>, so they need to out-specify the
   measure set above. */
.dg-palace .dg-hero-copy p.dg-sub {
  font-size: clamp(17px, 1.66vw, 25px);
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px;
  max-width: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}
.dg-palace .dg-hero-copy p.dg-hero-cta { max-width: none }
.dg-hero-cta { margin-top: 22px; gap: 14px }
.dg-hero-cta .dg-btn { padding: 12px 22px; font-size: 15.5px }
/* genius.css only gives .ghost padding and a border. */
.dg-btn.ghost { display: inline-flex; align-items: center; gap: 8px }

/* ---- the art stage ---- */

.dg-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.dg-stage .dg-prop,
.dg-stage .dg-mist,
.dg-stage .dg-burst,
.dg-stage .dg-spark,
.dg-stage .dg-panel {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.dg-stage .dg-prop { height: auto; display: block }
.dg-stage .dg-prop img {
  display: block;
  width: 100%;
  height: auto;
}

/* Purple bloom around the lamp. The genie art carries its own mist, so this is
   the only atmosphere the stage adds. */
.dg-stage::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: -6%;
  width: 30%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 70, 235, .42), rgba(120, 50, 200, .14) 58%, transparent 78%);
  filter: blur(6px);
  z-index: 2;
}
.dg-stage .dg-genie {
  left: 42%;
  top: 3%;
  width: 49%;
  z-index: 4;
  --from-x: 26%;
  --from-y: 46%;
  --from-rot: -12deg;
  transform-origin: 72% 100%;
}
.dg-stage .dg-genie img { filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .5)) }
.dg-stage .dg-panel {
  right: 9.5%;
  top: 5%;
  width: 17.5%;
  min-width: 148px;
  z-index: 6;
  --from-x: -32%;
  --from-y: 54%;
  --from-rot: 10deg;
  transform-origin: 20% 120%;
}
.dg-stage .dg-papers {
  right: 2.5%;
  top: 21%;
  width: 19%;
  z-index: 5;
  --from-x: -40%;
  --from-y: 46%;
  --from-rot: 14deg;
  transform-origin: 10% 120%;
}
.dg-stage .dg-papers img { filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .45)) }
.dg-stage .dg-hero-lamp {
  right: 5.5%;
  bottom: 5%;
  width: 14.5%;
  min-width: 130px;
  z-index: 5;
  transform-origin: 50% 92%;
}
.dg-stage .dg-hero-lamp img {
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(186, 110, 255, .4));
}
/* Plume rising out of the lamp spout. */
.dg-stage .dg-plume {
  position: absolute;
  right: 12.5%;
  bottom: 16%;
  width: 3px;
  height: 132px;
  z-index: 4;
  border-radius: 3px;
  background: linear-gradient(0deg, rgba(196, 120, 255, .75), rgba(196, 120, 255, .12) 60%, transparent);
  filter: blur(3px);
  opacity: 0;
}

/* The floating DocketPDF checklist: the art supplies the card and its green
   ticks; these rows are the label text, tilted onto the card's own perspective.
   Row offsets were measured off checklist.png — the ticks sit at 39%, 56%, 73%
   and 88% of the art's height and step right as they descend. */
.dg-panel-art { display: block; width: 100%; height: auto }
.dg-panel-body {
  position: absolute;
  inset: 0;
  font-size: clamp(7.5px, .74vw, 11px);
  line-height: 1.2;
  color: #f7f1ff;
  text-shadow: 0 1px 3px rgba(24, 4, 46, .95), 0 0 8px rgba(24, 4, 46, .8);
  white-space: nowrap;
}
.dg-panel-title {
  position: absolute;
  left: 15%;
  top: 27.5%;
  display: flex;
  align-items: center;
  gap: .45em;
  font-size: 1.3em;
  color: #fff;
  transform-origin: 0 50%;
  translate: 0 -50%;
  rotate: -12deg;
}
.dg-panel-title .dg-i { width: 1.35em; height: 1.35em }
.dg-panel-body ul { list-style: none; margin: 0; padding: 0 }
/* rotate/translate stay as their own properties so the tick animation can
   move a row without having to restate the card's tilt. */
.dg-panel-body li {
  position: absolute;
  opacity: 0;
  transform-origin: 0 50%;
  translate: 0 -50%;
  rotate: -12deg;
}
.dg-panel-body li:nth-child(1) { left: 19%; top: 39.3% }
.dg-panel-body li:nth-child(2) { left: 22%; top: 56.3% }
.dg-panel-body li:nth-child(3) { left: 24.5%; top: 72.8% }
.dg-panel-body li:nth-child(4) { left: 27%; top: 87.6% }

.dg-burst {
  right: 11%;
  bottom: 14%;
  width: 140px;
  height: 140px;
  z-index: 7;
  transform: translate(50%, 50%);
}
.dg-burst i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 7%, #ffe27a 15%, rgba(186, 80, 255, .68) 36%, transparent 66%);
}
.dg-burst i:nth-child(2) { inset: 14%; background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 6%, transparent 54%) }
.dg-burst i:nth-child(3),
.dg-burst i:nth-child(4) { inset: 26%; background: none; border: 2px solid rgba(255, 226, 122, .85) }
.dg-burst i:nth-child(4) { inset: 8%; border-color: rgba(196, 120, 255, .6) }

.dg-sparks { position: absolute; inset: 0; z-index: 8; pointer-events: none }
.dg-spark {
  width: 15px;
  height: 15px;
  background: url("assets/spark.svg") center / contain no-repeat;
}
.dg-sparks .dg-spark:nth-child(1) { right: 22%; bottom: 34%; --dx: -70px; --dy: -60px; animation-delay: 60ms }
.dg-sparks .dg-spark:nth-child(2) { right: 16%; bottom: 30%; --dx: 54px; --dy: -74px; animation-delay: 90ms }
.dg-sparks .dg-spark:nth-child(3) { right: 26%; bottom: 26%; --dx: -30px; --dy: -96px; animation-delay: 40ms }
.dg-sparks .dg-spark:nth-child(4) { right: 12%; bottom: 38%; --dx: 86px; --dy: -22px; animation-delay: 120ms }
.dg-sparks .dg-spark:nth-child(5) { right: 30%; bottom: 32%; --dx: -92px; --dy: -12px; animation-delay: 80ms }
.dg-sparks .dg-spark:nth-child(6) { right: 20%; bottom: 42%; --dx: 16px; --dy: -84px; animation-delay: 150ms }
.dg-sparks .dg-spark:nth-child(7) { right: 8%; bottom: 28%; --dx: 62px; --dy: -48px; animation-delay: 110ms }
.dg-sparks .dg-spark:nth-child(8) { right: 34%; bottom: 38%; --dx: -56px; --dy: -44px; animation-delay: 170ms }

/* ---- nothing animates until every prop has decoded ---- */

.dg-stage .dg-genie,
.dg-stage .dg-panel,
.dg-stage .dg-papers,
.dg-stage .dg-burst,
.dg-stage .dg-spark { opacity: 0 }

.dg-stage.is-lit .dg-genie { animation: dg-pow-in 900ms cubic-bezier(.16, 1.04, .3, 1) 40ms both }
.dg-stage.is-lit .dg-panel { animation: dg-pow-in 840ms cubic-bezier(.16, 1.04, .3, 1) 340ms both }
.dg-stage.is-lit .dg-papers { animation: dg-pow-in 840ms cubic-bezier(.16, 1.04, .3, 1) 520ms both }
.dg-stage.is-lit .dg-plume { animation: dg-plume 4.6s ease-in-out 1.1s infinite }
.dg-stage.is-lit .dg-burst i { animation: dg-burst 760ms cubic-bezier(.15, .8, .2, 1) 20ms both }
.dg-stage.is-lit .dg-burst i:nth-child(2) { animation-name: dg-burst-ring; animation-duration: 880ms }
.dg-stage.is-lit .dg-burst i:nth-child(3),
.dg-stage.is-lit .dg-burst i:nth-child(4) { animation-name: dg-burst-ring; animation-duration: 960ms }
.dg-stage.is-lit .dg-burst i:nth-child(4) { animation-delay: 90ms }
.dg-stage.is-lit .dg-spark { animation: dg-spark 900ms cubic-bezier(.12, .8, .28, 1) both }
.dg-stage.is-lit .dg-panel-body li { animation: dg-tick 420ms ease-out both }
.dg-stage.is-lit .dg-panel-body li:nth-child(1) { animation-delay: .78s }
.dg-stage.is-lit .dg-panel-body li:nth-child(2) { animation-delay: .92s }
.dg-stage.is-lit .dg-panel-body li:nth-child(3) { animation-delay: 1.06s }
.dg-stage.is-lit .dg-panel-body li:nth-child(4) { animation-delay: 1.2s }

/* Idle drift starts once the entrance is done, on the inner image so the two
   transforms never fight each other. */
.dg-stage.is-lit .dg-genie img { animation: dg-drift-a 7.5s ease-in-out 1.1s infinite }
.dg-stage.is-lit .dg-panel .dg-panel-art { animation: dg-drift-b 6.2s ease-in-out 1.3s infinite }
.dg-stage.is-lit .dg-papers img { animation: dg-drift-c 8.4s ease-in-out 1.5s infinite }
.dg-stage.is-lit .dg-hero-lamp img { animation: dg-lamp-idle 4.4s ease-in-out infinite }

@keyframes dg-pow-in {
  0% { opacity: 0; transform: translate(var(--from-x), var(--from-y)) scale(.14) rotate(var(--from-rot)) }
  44% { opacity: 1; transform: translate(calc(var(--from-x) * .09), calc(var(--from-y) * .09)) scale(1.05) rotate(calc(var(--from-rot) * .1)) }
  70% { transform: translate(0, -.5%) scale(.985) rotate(-.6deg) }
  100% { opacity: 1; transform: none }
}
@keyframes dg-tick {
  0% { opacity: 0; translate: -9px -50% }
  60% { opacity: 1; translate: 1px -50% }
  100% { opacity: 1; translate: 0 -50% }
}
@keyframes dg-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) }
  50% { transform: translate3d(0, -14px, 0) rotate(-.7deg) }
}
@keyframes dg-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) }
  50% { transform: translate3d(-6px, -11px, 0) rotate(1.2deg) }
}
@keyframes dg-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) }
  50% { transform: translate3d(5px, -13px, 0) rotate(-1.4deg) }
}
@keyframes dg-lamp-idle {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-5px) }
}
@keyframes dg-plume {
  0% { opacity: 0; transform: translateY(10px) scaleY(.5) }
  35% { opacity: .85 }
  100% { opacity: 0; transform: translateY(-58px) scaleY(1.25) }
}
@keyframes dg-burst {
  0% { transform: scale(.15); opacity: 0 }
  18% { opacity: 1 }
  100% { transform: scale(2.3); opacity: 0 }
}
@keyframes dg-burst-ring {
  0% { transform: scale(.2); opacity: .9 }
  100% { transform: scale(2.6); opacity: 0 }
}
@keyframes dg-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.25) rotate(0deg) }
  20% { opacity: 1 }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5) rotate(150deg) }
}

/* --------------------------------------------------------------------------
   Program cards — parchment, gold double rule, feature glyph row
   -------------------------------------------------------------------------- */

.dg-palace .dg-hero-tiles { margin-top: 30px; z-index: 5 }
.dg-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* The lamp stands in the gap the cards leave on the right, as in the mockup. */
.dg-palace .dg-card-row { width: 83%; max-width: 1000px }

.dg-parchment.dg-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 18px 16px;
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--sans);
  color: var(--parch-ink);
  background:
    radial-gradient(150px 90px at 88% 0, rgba(232, 197, 71, .22), transparent 60%),
    linear-gradient(180deg, var(--parch-hi), var(--parch-lo));
  box-shadow:
    0 0 0 2px var(--gold-deep),
    0 0 0 4px #f7ecd2,
    0 0 0 6px var(--gold-mid),
    0 16px 34px rgba(6, 1, 14, .48);
  transition: transform .26s ease, box-shadow .26s ease;
}
.dg-tile:hover {
  transform: translateY(-7px);
  box-shadow:
    0 0 0 2px var(--gold-deep),
    0 0 0 4px #fdf6e2,
    0 0 0 6px var(--gold-hi),
    0 24px 46px rgba(6, 1, 14, .56),
    0 0 40px rgba(232, 197, 71, .3);
}
/* Shimmer sweep on hover. */
.dg-tile::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -70%;
  width: 45%;
  height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .58), transparent);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}
.dg-tile:hover::after { animation: dg-sheen .78s ease both }

.dg-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
.dg-tile-head .dg-i { width: 32px; height: 32px; flex: none }
.dg-tile h2 {
  margin: 0;
  min-width: 0;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.1;
  color: #4a2c04;
  overflow-wrap: anywhere;
}
.dg-tile h2 a { color: inherit; text-decoration: none }
.dg-tile h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold-deep) }
.dg-tile-tag {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #5c3c11;
}

.dg-glyphs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.dg-glyphs li { min-width: 0; text-align: center }
.dg-glyphs i {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 52px;
  margin: 0 auto 5px;
  border-radius: 10px;
  color: #6d4a12;
  background: linear-gradient(180deg, rgba(255, 252, 240, .95), rgba(232, 214, 172, .9));
  box-shadow: inset 0 0 0 1px rgba(168, 128, 26, .55), 0 2px 5px rgba(74, 44, 4, .18);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.dg-glyphs i .dg-i { width: 60%; height: 60% }
.dg-tile:hover .dg-glyphs i { box-shadow: inset 0 0 0 1px rgba(168, 128, 26, .8), 0 4px 9px rgba(74, 44, 4, .22) }
.dg-glyphs li:hover i { transform: translateY(-3px) scale(1.06); color: #4a2c04 }
.dg-glyphs span {
  display: block;
  font-size: 9.6px;
  line-height: 1.25;
  letter-spacing: .01em;
  color: #6a4813;
  overflow-wrap: break-word;
  hyphens: auto;
}

.dg-tile .dg-btn {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
  padding: 10px 14px;
  font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   Info band — three columns inside one gold-ruled panel
   -------------------------------------------------------------------------- */

.dg-info {
  position: relative;
  padding: 24px 0 40px;
  background: linear-gradient(180deg, #1d0a33 0%, #190826 60%, #150720 100%);
}
.dg-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(240, 215, 140, .5);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(38, 14, 66, .92), rgba(24, 9, 42, .94));
  box-shadow: 0 18px 44px rgba(6, 1, 14, .5), inset 0 1px 0 rgba(255, 235, 170, .12);
  overflow: hidden;
}
.dg-band > article {
  position: relative;
  padding: 24px 26px 22px;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 6px 16px;
  align-content: start;
}
.dg-band > article + article { border-left: 1px solid rgba(240, 215, 140, .32) }
.dg-band .dg-band-art {
  grid-row: 1 / span 3;
  align-self: start;
  color: var(--gold-mid);
}
.dg-band .dg-band-art .dg-i { width: 84px; height: auto; filter: drop-shadow(0 0 14px rgba(232, 197, 71, .28)) }
.dg-band h3 {
  margin: 0;
  font-size: 19px;
  color: var(--gold-lt);
  letter-spacing: .02em;
}
.dg-band ol,
.dg-band ul {
  margin: 6px 0 12px;
  padding-left: 1.25em;
  color: #dccff2;
  font-size: 13px;
  line-height: 1.62;
}
.dg-band li { margin: 2px 0 }
.dg-band ul { list-style: none; padding-left: 0 }
.dg-band ul li { position: relative; padding-left: 1.1em }
.dg-band ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-mid);
}
.dg-band-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold-lt);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.dg-band-more .dg-i { transition: transform .2s ease }
.dg-band-more:hover { color: var(--gold-hi); border-bottom-color: rgba(240, 215, 140, .5) }
.dg-band-more:hover .dg-i { transform: translateX(4px) }

.dg-rule { margin: 0 0 8px; line-height: 0; text-align: center }
.dg-rule .dg-i { width: min(600px, 88%); height: auto; color: var(--gold-mid); opacity: .85 }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.dg-foot {
  background: linear-gradient(180deg, #1a0a2c, #120620);
  border-top: 1px solid rgba(240, 215, 140, .4);
  padding: 30px 0 18px;
}
.dg-foot .dg-flourish {
  height: 16px;
  margin-bottom: 20px;
  background: radial-gradient(circle at 50% 0, rgba(240, 215, 140, .75), transparent 62%);
  opacity: .55;
}
.dg-foot-grid {
  grid-template-columns: 1.5fr .8fr .8fr .8fr .8fr 1.35fr auto;
  gap: 26px;
  align-items: start;
}
.dg-foot h6 {
  font-size: 14.5px;
  color: var(--gold-lt);
  letter-spacing: .06em;
  margin: 0 0 10px;
}
.dg-foot a { color: #cbbae6; font-size: 13px; transition: color .16s ease, transform .16s ease }
.dg-foot a:hover { color: var(--gold-hi) }
.dg-foot .dg-brand b.dg-wordmark { font-size: 1.2rem }
/* genius.css styles .dg-foot p, so these need the extra class to win. */
.dg-foot .dg-foot-grid p { font-size: 13px; color: #b9a6d8; max-width: 34ch }

.dg-know label { color: var(--gold-lt); font-size: 13.5px; margin-bottom: 7px }
.dg-know div { gap: 7px }
.dg-know input {
  border: 1px solid rgba(240, 215, 140, .55);
  border-radius: 9px;
  background: rgba(12, 4, 22, .75);
  color: var(--cream);
  padding: 9px 11px;
  font-size: 13px;
}
.dg-know input::placeholder { color: #8f7cb0 }
.dg-know input:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 1px }
.dg-know button { border-radius: 9px; padding: 9px 13px; font-size: 13px; gap: 6px }

.dg-social { display: flex; gap: 9px; margin-top: 14px }
.dg-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--gold-lt);
  border: 1px solid rgba(240, 215, 140, .45);
  transition: transform .18s ease, box-shadow .2s ease, color .18s ease;
}
.dg-social a:hover {
  color: var(--gold-hi);
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(232, 197, 71, .4);
}

.dg-seal-col { display: grid; place-items: center }
.dg-seal-col .dg-i {
  width: 118px;
  height: 118px;
  color: var(--gold-lt);
  filter: drop-shadow(0 0 18px rgba(232, 197, 71, .3));
  animation: dg-seal-spin 64s linear infinite;
}
@keyframes dg-seal-spin { to { transform: rotate(360deg) } }

.dg-foot p.dg-legal {
  max-width: 1180px;
  margin: 22px auto 0;
  padding: 14px 24px 0;
  border-top: 1px solid rgba(240, 215, 140, .16);
  color: #8b78a6;
  font-size: 12px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Program information pages
   -------------------------------------------------------------------------- */

.dg-guide {
  position: relative;
  overflow: hidden;
  padding: 46px 0 68px;
  background:
    radial-gradient(900px 420px at 86% -4%, rgba(124, 58, 237, .38), transparent 58%),
    linear-gradient(180deg, #1b0930, #12061f 44%, #0d0417);
}
.dg-guide::before {
  content: "";
  position: absolute;
  right: -6%;
  top: -10%;
  width: 58%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 70, 235, .3), rgba(120, 50, 200, .1) 60%, transparent 78%);
  pointer-events: none;
}
.dg-guide > * { position: relative }
.dg-guide-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 30px;
  align-items: center;
  margin-bottom: 34px;
}
.dg-guide-hero > div:first-child { position: relative; z-index: 2 }
.dg-guide-hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  margin: 0 0 12px;
  filter: drop-shadow(0 0 22px rgba(232, 197, 71, .3));
}
.dg-guide-hero .dg-lede { color: #ece1fb }
.dg-guide-art { position: relative; min-height: 300px; overflow: hidden }
.dg-guide-art img { position: absolute; display: block }
.dg-guide-art .genie {
  left: 6%;
  top: 4%;
  width: 92%;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .5));
  animation: dg-drift-a 8s ease-in-out infinite;
}
.dg-guide-art .lamp {
  right: 4%;
  bottom: 2%;
  width: 34%;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(186, 110, 255, .38));
  animation: dg-lamp-idle 4.6s ease-in-out infinite;
}

.dg-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 16px;
  margin: 10px 0 26px;
}
.dg-feat {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 4px 13px;
  align-content: start;
  padding: 17px 16px;
  border-radius: 13px;
  color: #2c1a06;
  background: linear-gradient(180deg, var(--parch-hi), var(--parch-lo));
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 4px #f7ecd2, 0 0 0 6px var(--gold-mid);
  transition: transform .22s ease, box-shadow .22s ease;
}
.dg-feat:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 4px #fdf6e2, 0 0 0 6px var(--gold-hi), 0 14px 28px rgba(6, 1, 14, .4) }
.dg-feat .dg-i { grid-row: 1 / span 2; width: 46px; height: 46px; color: #6d4a12 }
.dg-feat b { font-size: 17px; margin: 0; color: #4a2c04 }
.dg-feat p { margin: 0; font-size: 13px; line-height: 1.5 }
.dg-guide-cta { display: flex; gap: 12px; flex-wrap: wrap }

/* --------------------------------------------------------------------------
   Magic dust and scroll reveal
   -------------------------------------------------------------------------- */

.dg-dust {
  position: fixed;
  inset: 0;
  z-index: 90000;
  pointer-events: none;
  opacity: .95;
}

.dg-reveal { opacity: 0; transform: translateY(20px); will-change: opacity, transform }
.dg-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .62s ease, transform .62s cubic-bezier(.18, .9, .3, 1);
}
.dg-reveal.is-in.d1 { transition-delay: .08s }
.dg-reveal.is-in.d2 { transition-delay: .16s }
.dg-reveal.is-in.d3 { transition-delay: .24s }

/* ==========================================================================
   Attractions — /mission and /library staged as rides

   These sections sit after .dg-reveal on purpose: the reveal rule resets
   transform, so a hover lift declared earlier would never win the cascade.
   ========================================================================== */

.dg-ride { --bulb: #ffe9a8; --bulb-off: rgba(255, 233, 168, .2) }
.dg-ride .dg-lede { color: #ece1fb }

/* --------------------------------------------------------------------------
   The marquee: night sky, arch tunnel, velvet drapes, a sign full of bulbs
   -------------------------------------------------------------------------- */

.dg-marquee {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(430px, 43vw, 560px);
  padding: 0 0 58px;
  background:
    radial-gradient(1100px 520px at 50% -14%, rgba(124, 58, 237, .44), transparent 62%),
    linear-gradient(180deg, #1a0830 0%, #1d0a33 44%, #12061f 100%);
}
.dg-marquee-inner { position: relative; z-index: 4; padding: 46px 0 0 }

.dg-night { position: absolute; inset: 0 0 34% 0; z-index: 0; pointer-events: none }
.dg-moon {
  position: absolute;
  right: 42%;
  top: 5%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff6d4 0 18%, #f0d78c 48%, #c2971f 82%, rgba(194, 151, 31, 0) 84%);
  box-shadow: 0 0 62px rgba(240, 215, 140, .42), 0 0 150px rgba(232, 197, 71, .2);
  animation: dg-moon-breathe 9.4s ease-in-out infinite;
}
.dg-stars { position: absolute; inset: 0 }
.dg-stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff6d4;
  box-shadow: 0 0 7px rgba(255, 246, 212, .95);
  animation: dg-twinkle 3.6s ease-in-out infinite;
}
.dg-stars i:nth-child(1) { left: 7%; top: 16%; animation-delay: .1s }
.dg-stars i:nth-child(2) { left: 15%; top: 40%; animation-delay: 1.4s }
.dg-stars i:nth-child(3) { left: 23%; top: 9%; animation-delay: .7s }
.dg-stars i:nth-child(4) { left: 31%; top: 28%; animation-delay: 2.1s }
.dg-stars i:nth-child(5) { left: 42%; top: 13%; animation-delay: 1.1s }
.dg-stars i:nth-child(6) { left: 49%; top: 34%; animation-delay: 2.6s }
.dg-stars i:nth-child(7) { left: 58%; top: 11%; animation-delay: .4s }
.dg-stars i:nth-child(8) { left: 66%; top: 30%; animation-delay: 1.8s }
.dg-stars i:nth-child(9) { left: 74%; top: 18%; animation-delay: 3s }
.dg-stars i:nth-child(10) { left: 84%; top: 38%; animation-delay: .9s }
.dg-stars i:nth-child(11) { left: 91%; top: 22%; animation-delay: 2.3s }
.dg-stars i:nth-child(12) { left: 96%; top: 47%; animation-delay: 1.6s }

/* Concentric arches read as the mouth of a ride. JS nudges --dg-par on scroll. */
.dg-colonnade {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: min(1180px, 98%);
  height: 88%;
  translate: -50% 0;
  pointer-events: none;
  transform: translateY(var(--dg-par, 0px));
}
.dg-colonnade i {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  border: 2px solid rgba(240, 215, 140, .55);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 32% 32% 0 0;
  background: linear-gradient(180deg, rgba(124, 58, 237, .16), transparent 62%);
  box-shadow: 0 0 26px rgba(232, 197, 71, .12), inset 0 0 40px rgba(124, 58, 237, .16);
  animation: dg-arch-pulse 6.6s ease-in-out infinite;
}
.dg-colonnade i:nth-child(1) { width: 100%; height: 100%; opacity: .3; animation-delay: 0s }
.dg-colonnade i:nth-child(2) { width: 82%; height: 88%; opacity: .42; animation-delay: .4s }
.dg-colonnade i:nth-child(3) { width: 64%; height: 76%; opacity: .54; animation-delay: .8s }
.dg-colonnade i:nth-child(4) { width: 46%; height: 64%; opacity: .68; animation-delay: 1.2s }
.dg-colonnade i:nth-child(5) { width: 28%; height: 52%; opacity: .82; animation-delay: 1.6s }
/* The floor the tunnel stands on, lit from the middle out. */
.dg-colonnade::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 122, .65), transparent);
  box-shadow: 0 0 26px rgba(232, 197, 71, .35);
}

/* Lanterns on chains. Mission only: the library hangs books instead. */
.dg-hanglamps { position: absolute; inset: 0; z-index: 3; pointer-events: none }
.dg-hanglamps i {
  --chain: 150px;
  position: absolute;
  top: var(--chain);
  display: block;
  color: var(--gold-lt);
  transform-origin: 50% calc(-1 * var(--chain));
  filter: drop-shadow(0 0 16px rgba(255, 186, 92, .6));
  animation: dg-lamp-swing 6.4s ease-in-out infinite;
}
.dg-hanglamps i::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: var(--chain);
  translate: -50% 0;
  background: repeating-linear-gradient(180deg, var(--gold-mid) 0 6px, transparent 6px 10px);
}
.dg-hanglamp-glow {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 168px;
  height: 168px;
  translate: -50% -50%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 186, 92, .46) 0%, rgba(255, 150, 60, .15) 44%, transparent 72%);
  animation: dg-lantern 5.6s ease-in-out infinite;
}
.dg-hanglamps i:nth-child(1) { right: 11%; --chain: 104px; animation-duration: 6.2s }
.dg-hanglamps i:nth-child(2) { right: 21%; --chain: 188px; animation-duration: 7.8s; animation-delay: .9s }
.dg-hanglamps i:nth-child(3) { right: 31%; --chain: 136px; animation-duration: 8.6s; animation-delay: 1.8s }

.dg-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 20%;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .42) 0 9px,
      rgba(255, 255, 255, .06) 9px 22px,
      rgba(0, 0, 0, .34) 22px 32px),
    linear-gradient(180deg, #4d1133 0%, #350b24 58%, #240717 100%);
  box-shadow: 0 0 70px rgba(6, 1, 14, .7);
}
.dg-curtain.left { left: 0; border-radius: 0 0 46% 0 / 0 0 16% 0; animation: dg-curtain-l 1.5s cubic-bezier(.2, .84, .26, 1) both }
.dg-curtain.right { right: 0; border-radius: 0 0 0 46% / 0 0 0 16%; animation: dg-curtain-r 1.5s cubic-bezier(.2, .84, .26, 1) both }
/* The gold valance rod the drapes hang from. */
.dg-curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  background: linear-gradient(180deg, #f6e6bb, #c9a227 52%, #7d5f10);
  box-shadow: 0 3px 12px rgba(6, 1, 14, .6);
}

.dg-motes { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none }
.dg-motes i {
  position: absolute;
  bottom: -6%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff6d4 0 22%, rgba(255, 214, 110, .55) 48%, transparent 72%);
  animation: dg-mote 12s linear infinite;
}
.dg-motes i:nth-child(1) { left: 6%; --mx: 34px; animation-delay: 0s; animation-duration: 11s }
.dg-motes i:nth-child(2) { left: 13%; --mx: -26px; animation-delay: 1.9s; animation-duration: 13s }
.dg-motes i:nth-child(3) { left: 21%; --mx: 18px; animation-delay: 4.2s; animation-duration: 12s }
.dg-motes i:nth-child(4) { left: 28%; --mx: -40px; animation-delay: 6.6s; animation-duration: 14s }
.dg-motes i:nth-child(5) { left: 36%; --mx: 28px; animation-delay: 2.7s; animation-duration: 10.5s }
.dg-motes i:nth-child(6) { left: 44%; --mx: -18px; animation-delay: 8.1s; animation-duration: 13.5s }
.dg-motes i:nth-child(7) { left: 52%; --mx: 44px; animation-delay: 3.4s; animation-duration: 12.5s }
.dg-motes i:nth-child(8) { left: 60%; --mx: -32px; animation-delay: 5.8s; animation-duration: 11.5s }
.dg-motes i:nth-child(9) { left: 68%; --mx: 22px; animation-delay: 9.3s; animation-duration: 14.5s }
.dg-motes i:nth-child(10) { left: 75%; --mx: -44px; animation-delay: 1.2s; animation-duration: 12.8s }
.dg-motes i:nth-child(11) { left: 82%; --mx: 30px; animation-delay: 7.4s; animation-duration: 10.8s }
.dg-motes i:nth-child(12) { left: 89%; --mx: -22px; animation-delay: 4.9s; animation-duration: 13.2s }
.dg-motes i:nth-child(13) { left: 94%; --mx: 16px; animation-delay: 10.2s; animation-duration: 11.8s }
.dg-motes i:nth-child(14) { left: 2%; --mx: -14px; animation-delay: 6s; animation-duration: 14.2s }

/* ---- the lit sign ---- */

.dg-sign {
  position: relative;
  display: inline-block;
  margin: 0 0 20px;
  padding: 24px 44px 20px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(240, 215, 140, .55);
  background: linear-gradient(180deg, rgba(48, 19, 84, .9), rgba(23, 8, 40, .94));
  box-shadow:
    0 0 0 7px rgba(20, 7, 36, .78),
    0 0 0 8px rgba(240, 215, 140, .3),
    0 24px 56px rgba(6, 1, 14, .62),
    inset 0 1px 0 rgba(255, 235, 170, .18);
  /* theme.js writes a two-degree lean here on pointermove. */
  transform-origin: 50% 60%;
  transition: transform .28s ease;
  will-change: transform;
}
/* A light band crosses the board every few seconds, like a real marquee. */
.dg-sign::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -60%;
  width: 38%;
  height: 160%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 190, .16), transparent);
  transform: skewX(-16deg);
  animation: dg-sign-shine 7.5s ease-in-out infinite;
}
.dg-bulbs { position: absolute; inset: 0; pointer-events: none }
.dg-bulbs i {
  position: absolute;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--bulb-off);
  box-shadow: 0 0 0 1px rgba(240, 215, 140, .34);
  animation: dg-bulb 2s linear infinite;
}
/* Twenty bulbs: ten across the top rail, ten across the bottom. One set of
   nth-child(10n+k) rules places and phases both rows at once. */
.dg-bulbs i:nth-child(-n+10) { top: 9px }
.dg-bulbs i:nth-child(n+11) { bottom: 9px }
.dg-bulbs i:nth-child(10n+1) { left: 5%; animation-delay: 0s }
.dg-bulbs i:nth-child(10n+2) { left: 15.5%; animation-delay: -.2s }
.dg-bulbs i:nth-child(10n+3) { left: 26%; animation-delay: -.4s }
.dg-bulbs i:nth-child(10n+4) { left: 36.5%; animation-delay: -.6s }
.dg-bulbs i:nth-child(10n+5) { left: 47%; animation-delay: -.8s }
.dg-bulbs i:nth-child(10n+6) { left: 57.5%; animation-delay: -1s }
.dg-bulbs i:nth-child(10n+7) { left: 68%; animation-delay: -1.2s }
.dg-bulbs i:nth-child(10n+8) { left: 78.5%; animation-delay: -1.4s }
.dg-bulbs i:nth-child(10n+9) { left: 89%; animation-delay: -1.6s }
.dg-bulbs i:nth-child(10n+10) { left: 95.5%; animation-delay: -1.8s }

.dg-sign-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 6px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.dg-sign-kicker .dg-i { color: var(--gold-mid) }
.dg-sign h1 {
  margin: 0;
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.02;
  filter: drop-shadow(0 2px 2px rgba(40, 12, 0, .5)) drop-shadow(0 0 28px rgba(232, 197, 71, .45));
}
.dg-sign-sub {
  margin: 6px 0 0;
  font-family: var(--magic);
  font-size: clamp(16px, 1.6vw, 23px);
  font-weight: 600;
  color: #f3e7ff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .75);
}
.dg-marquee-lede { max-width: 62ch; margin: 0 0 6px; text-shadow: 0 1px 10px rgba(0, 0, 0, .7) }
.dg-marquee .dg-hero-cta { margin-top: 20px }

.dg-ropelight {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 5px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 226, 122, 0), rgba(255, 226, 122, .95) 40%, rgba(186, 110, 255, .9) 60%, rgba(255, 226, 122, 0));
  background-size: 44% 100%;
  background-repeat: no-repeat;
  animation: dg-rope 6s linear infinite;
}
.dg-ropelight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(240, 215, 140, .5) 0 6px, transparent 6px 19px);
}

/* --------------------------------------------------------------------------
   Section headings shared by both attractions
   -------------------------------------------------------------------------- */

.dg-ride-h {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 4px 0 26px;
  font-family: var(--magic);
  font-weight: 600;
  font-size: clamp(25px, 3vw, 40px);
  line-height: 1.12;
  color: var(--gold-lt);
}
.dg-ride-h > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  color: var(--gold-mid);
  border: 1px solid rgba(240, 215, 140, .4);
  background: rgba(240, 215, 140, .08);
  box-shadow: inset 0 1px 0 rgba(255, 235, 170, .16);
  animation: dg-lamp-idle 5.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Mission — the three-room tour
   -------------------------------------------------------------------------- */

.dg-tour { padding: 26px 0 14px; background: linear-gradient(180deg, #12061f, #170826) }
.dg-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 34px 0 12px;
  list-style: none;
}
.dg-track::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 215, 140, .55), rgba(186, 110, 255, .55), rgba(240, 215, 140, .55), transparent);
}
/* The car: one spark that runs the length of the track and back. */
.dg-track::after {
  content: "";
  position: absolute;
  left: 8%;
  top: 30px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 24%, #ffe27a 52%, rgba(186, 80, 255, .5) 78%, transparent);
  box-shadow: 0 0 18px rgba(255, 226, 122, .85);
  animation: dg-car 9s ease-in-out infinite;
}
.dg-room {
  position: relative;
  z-index: 1;
  padding: 30px 20px 20px;
  border-radius: 16px;
  border: 1px solid rgba(240, 215, 140, .4);
  background: linear-gradient(180deg, rgba(44, 17, 76, .94), rgba(23, 8, 40, .96));
  box-shadow: 0 18px 40px rgba(6, 1, 14, .5), inset 0 1px 0 rgba(255, 235, 170, .12);
}
.dg-tour .dg-room { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease }
.dg-tour .dg-room:hover {
  transform: translateY(-7px);
  border-color: var(--gold-hi);
  box-shadow: 0 26px 52px rgba(6, 1, 14, .58), 0 0 38px rgba(232, 197, 71, .26);
}
.dg-room-no {
  position: absolute;
  top: -22px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--magic);
  font-size: 22px;
  font-weight: 700;
  color: #2a1248;
  background: radial-gradient(circle at 34% 30%, #fff6d4, #f0d78c 46%, #c9a227);
  box-shadow: 0 0 0 4px #170826, 0 0 24px rgba(232, 197, 71, .5);
  animation: dg-medallion 4.4s ease-in-out infinite;
}
.dg-room-art { display: block; margin: 4px 0 10px; color: var(--gold-mid) }
.dg-tour .dg-room:hover .dg-room-art .dg-i { color: var(--gold-hi) }
.dg-room-art .dg-i { transition: color .28s ease }
.dg-room h3 {
  margin: 0 0 7px;
  font-family: var(--magic);
  font-weight: 600;
  font-size: 22px;
  color: var(--gold-lt);
}
.dg-room p { margin: 0; font-size: 14.5px; line-height: 1.62; color: #ded1f4 }

/* --------------------------------------------------------------------------
   Mission — the creed, on a scroll that unfurls when it scrolls in
   -------------------------------------------------------------------------- */

.dg-creed { padding: 40px 0 44px; background: linear-gradient(180deg, #170826, #12061f) }
.dg-scroll { position: relative; width: min(880px, 100%); margin: 0 auto }
.dg-scroll-rod {
  position: relative;
  display: block;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(180deg, #f8ebc6, #c9a227 48%, #7d5f10);
  box-shadow: 0 5px 16px rgba(6, 1, 14, .55), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.dg-scroll-rod::before,
.dg-scroll-rod::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 15px;
  height: 26px;
  border-radius: 6px;
  translate: 0 -50%;
  background: linear-gradient(180deg, #fff3d2, #c9a227 52%, #6d520d);
  box-shadow: 0 4px 12px rgba(6, 1, 14, .55);
}
.dg-scroll-rod::before { left: -12px }
.dg-scroll-rod::after { right: -12px }
/* 0fr -> 1fr is the cheapest honest "roll open" there is. */
.dg-scroll-sheet { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .95s cubic-bezier(.2, .86, .28, 1) }
.dg-scroll.is-in .dg-scroll-sheet { grid-template-rows: 1fr }
.dg-scroll-body {
  min-height: 0;
  overflow: hidden;
  color: var(--parch-ink);
  background:
    radial-gradient(420px 200px at 88% 0, rgba(232, 197, 71, .26), transparent 62%),
    linear-gradient(180deg, var(--parch-hi), var(--parch-lo));
  box-shadow: inset 0 14px 22px -16px rgba(74, 44, 4, .55), inset 0 -14px 22px -16px rgba(74, 44, 4, .55);
}
.dg-scroll-body > * { margin: 0 44px }
.dg-scroll-body > :first-child { margin-top: 26px }
.dg-scroll-body > :last-child { margin-bottom: 30px }
.dg-scroll-seal { display: block; margin-bottom: 4px; color: #8a6a12 }
.dg-scroll-body h2 {
  margin-top: 2px;
  margin-bottom: 12px;
  font-family: var(--magic);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  color: #4a2c04;
}
.dg-scroll-body p { font-size: 15px; line-height: 1.66; margin-bottom: 12px }
.dg-scroll-sign {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid rgba(138, 106, 18, .4);
  font-family: var(--magic);
  font-size: 16px;
  color: #5c3c11;
}

/* --------------------------------------------------------------------------
   Mission — ticket stubs
   -------------------------------------------------------------------------- */

.dg-stubs { padding: 36px 0 34px; background: linear-gradient(180deg, #12061f, #180829) }
.dg-stub-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dg-stub {
  position: relative;
  overflow: hidden;
  padding: 18px 16px 16px 32px;
  border-radius: 10px;
  color: var(--parch-ink);
  transform-origin: 50% 100%;
  background:
    radial-gradient(130px 80px at 88% 0, rgba(232, 197, 71, .26), transparent 62%),
    linear-gradient(180deg, var(--parch-hi), var(--parch-lo));
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 4px #f7ecd2, 0 14px 30px rgba(6, 1, 14, .46);
}
.dg-stubs .dg-stub { transition: transform .28s cubic-bezier(.2, .9, .3, 1), box-shadow .28s ease }
.dg-stubs .dg-stub:hover {
  transform: translateY(-9px) rotate(-1.8deg);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 4px #fdf6e2, 0 22px 42px rgba(6, 1, 14, .55), 0 0 34px rgba(232, 197, 71, .28);
}
.dg-stub::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -4px;
  bottom: -4px;
  border-left: 2px dashed rgba(138, 106, 18, .45);
}
/* Sheen sweep, same trick the parchment tiles use. */
.dg-stub::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -70%;
  width: 45%;
  height: 140%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-16deg);
}
.dg-stubs .dg-stub:hover::after { animation: dg-sheen .78s ease both }
.dg-stub-punch {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  translate: 0 -50%;
  background: #12061f;
  box-shadow: inset 0 0 0 1px rgba(138, 106, 18, .5);
}
.dg-stub b {
  display: block;
  font-family: var(--magic);
  font-size: 21px;
  font-weight: 600;
  color: #4a2c04;
}
.dg-stub > span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: #5c3c11 }
.dg-stub em {
  display: block;
  margin-top: 10px;
  font-family: Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: .12em;
  color: #8a6a12;
}

/* --------------------------------------------------------------------------
   Mission — the house-rules plaque, hung on two chains
   -------------------------------------------------------------------------- */

.dg-house { padding: 30px 0 56px; background: linear-gradient(180deg, #180829, #12061f) }
.dg-hang {
  position: relative;
  width: min(620px, 100%);
  margin: 52px auto 0;
  transform-origin: 50% -48px;
  animation: dg-swing 7.2s ease-in-out infinite;
}
.dg-chain {
  position: absolute;
  top: -48px;
  width: 3px;
  height: 50px;
  background: repeating-linear-gradient(180deg, var(--gold-mid) 0 6px, transparent 6px 10px);
}
.dg-chain:nth-of-type(1) { left: 16% }
.dg-chain:nth-of-type(2) { right: 16% }
.dg-plaque {
  padding: 24px 28px 22px;
  border-radius: 14px;
  border: 1px solid rgba(240, 215, 140, .55);
  background: linear-gradient(180deg, rgba(48, 19, 84, .94), rgba(23, 8, 40, .96));
  box-shadow: 0 22px 48px rgba(6, 1, 14, .6), inset 0 1px 0 rgba(255, 235, 170, .16);
}
.dg-plaque h2 {
  margin: 0 0 12px;
  font-family: var(--magic);
  font-weight: 600;
  font-size: 27px;
  color: var(--gold-lt);
}
.dg-plaque ul { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none }
.dg-plaque li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #ece1fb;
}
.dg-plaque li .dg-i { flex: none; color: #ff9e9e }
.dg-plaque p { margin: 0; padding-top: 12px; border-top: 1px solid rgba(240, 215, 140, .22); font-size: 14.5px; color: #c8b6e6 }

/* --------------------------------------------------------------------------
   Mission — exit through the lamp
   -------------------------------------------------------------------------- */

.dg-exit {
  position: relative;
  overflow: hidden;
  padding: 46px 0 64px;
  background:
    radial-gradient(720px 340px at 16% 0%, rgba(124, 58, 237, .42), transparent 62%),
    linear-gradient(180deg, #12061f, #0d0417);
}
.dg-exit-inner { display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, .7fr); gap: 34px; align-items: center }
.dg-exit-lamp { position: relative; display: block; width: min(300px, 100%); margin: 0 auto }
.dg-exit-lamp img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(186, 110, 255, .45));
  animation: dg-lamp-idle 4.4s ease-in-out infinite;
}
.dg-exit-plume {
  position: absolute;
  right: 26%;
  top: 4%;
  width: 3px;
  height: 118px;
  border-radius: 3px;
  background: linear-gradient(0deg, rgba(196, 120, 255, .8), rgba(196, 120, 255, .12) 60%, transparent);
  filter: blur(3px);
  opacity: 0;
  animation: dg-plume 4.6s ease-in-out infinite;
}
.dg-exit h2 {
  margin: 0 0 10px;
  font-family: var(--magic);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  filter: drop-shadow(0 0 24px rgba(232, 197, 71, .34));
}
.dg-exit p { color: #ece1fb; line-height: 1.6; max-width: 56ch }

/* --------------------------------------------------------------------------
   Library — the stacks behind the sign, and the ask desk
   -------------------------------------------------------------------------- */

.dg-marquee-lib { padding-bottom: 64px }
.dg-marquee-lib .dg-moon { right: 8%; top: 11%; width: 104px; height: 104px }
.dg-stacks {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 42%;
  padding: 0 2.5%;
  opacity: .62;
  pointer-events: none;
  transform: translateY(var(--dg-par, 0px));
}
/* Night falling over the tops of the spines, so the copy keeps its contrast. */
.dg-stacks::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -46px;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(22, 9, 44, .94) 0%,
    rgba(22, 9, 44, .6) 28%,
    rgba(18, 6, 31, .22) 62%,
    transparent 100%);
}
/* The rail the volumes stand on. */
.dg-stacks::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(180deg, #7a5516, #2e1f06);
  box-shadow: 0 0 24px rgba(232, 197, 71, .2);
}
.dg-stacks i {
  position: relative;
  flex: 1;
  height: var(--h, 70%);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(100deg, rgba(11, 3, 20, .5), transparent 28%, rgba(255, 255, 255, .08) 50%, transparent 74%),
    linear-gradient(180deg, rgba(240, 215, 140, .62), rgba(124, 58, 237, .3));
  box-shadow: inset 0 0 0 1px rgba(240, 215, 140, .34);
  animation: dg-stack-breathe 6.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
/* The gold bands every legal binding seems to get. */
.dg-stacks i::before,
.dg-stacks i::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 5px;
  background: rgba(255, 233, 168, .6);
}
.dg-stacks i::before { top: 14% }
.dg-stacks i::after { top: 26% }
/* Uneven widths are what makes a shelf read as books instead of a bar chart. */
.dg-stacks i:nth-child(2n) { flex: .58 }
.dg-stacks i:nth-child(3n) { flex: 1.24 }
.dg-stacks i:nth-child(5n) { flex: .82 }
.dg-stacks i:nth-child(4n) { background: linear-gradient(100deg, rgba(11, 3, 20, .5), transparent 28%, rgba(255, 255, 255, .08) 50%, transparent 74%), linear-gradient(180deg, rgba(186, 110, 255, .55), rgba(70, 28, 122, .4)) }
.dg-stacks i:nth-child(7n) { background: linear-gradient(100deg, rgba(11, 3, 20, .5), transparent 28%, rgba(255, 255, 255, .08) 50%, transparent 74%), linear-gradient(180deg, rgba(140, 23, 64, .62), rgba(77, 11, 36, .45)) }

.dg-flyers { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: rgba(240, 215, 140, .62) }
.dg-flyers i { position: absolute; display: block; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .55)) }
.dg-flyers i:nth-child(1) { left: 5%; top: 24%; animation: dg-fly-a 9.6s ease-in-out infinite }
.dg-flyers i:nth-child(2) { left: 24%; top: 60%; animation: dg-fly-b 11.4s ease-in-out infinite }
.dg-flyers i:nth-child(3) { right: 8%; top: 52%; animation: dg-fly-c 10.2s ease-in-out infinite }

.dg-ask.dg-console {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(740px, 100%);
  margin: 26px 0 16px;
  padding: 12px 12px 12px 96px;
  border-radius: 999px;
  border: 1px solid rgba(240, 215, 140, .5);
  background: linear-gradient(180deg, rgba(48, 19, 84, .92), rgba(23, 8, 40, .95));
  box-shadow: 0 18px 46px rgba(6, 1, 14, .6), inset 0 1px 0 rgba(255, 235, 170, .16);
  transition: border-color .24s ease, box-shadow .24s ease;
}
.dg-ask.dg-console:focus-within {
  border-color: var(--gold-hi);
  box-shadow: 0 18px 46px rgba(6, 1, 14, .6), inset 0 1px 0 rgba(255, 235, 170, .22), 0 0 42px rgba(232, 197, 71, .34);
}
.dg-console-ring {
  position: absolute;
  inset: -9px;
  border-radius: 999px;
  border: 1px solid rgba(240, 215, 140, .3);
  pointer-events: none;
  animation: dg-ring 3.8s ease-in-out infinite;
}
.dg-console-lamp { position: absolute; left: -4px; bottom: -10px; width: 108px; pointer-events: none }
.dg-console-lamp img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)) drop-shadow(0 0 20px rgba(186, 110, 255, .5));
  animation: dg-lamp-idle 4.4s ease-in-out infinite;
}
.dg-console-plume {
  position: absolute;
  right: 14%;
  top: -54px;
  width: 3px;
  height: 66px;
  border-radius: 3px;
  background: linear-gradient(0deg, rgba(196, 120, 255, .85), rgba(196, 120, 255, .1) 62%, transparent);
  filter: blur(3px);
  opacity: 0;
}
.dg-ask.dg-console:focus-within .dg-console-plume { animation: dg-plume 3.2s ease-in-out infinite }
.dg-console input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid rgba(240, 215, 140, .42);
  background: rgba(11, 3, 20, .72);
  color: var(--cream);
  font: inherit;
}
.dg-console input[type="search"]::placeholder { color: #a48fc8 }
.dg-console input[type="search"]:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 1px }
.dg-console .dg-btn.gold { flex: none; padding: 12px 22px }

.dg-chips {
  position: relative;
  text-shadow: 0 1px 8px rgba(10, 3, 22, .9);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 13px;
  color: #c2afe2;
}
.dg-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: var(--gold-lt);
  border: 1px solid rgba(240, 215, 140, .4);
  background: rgba(240, 215, 140, .07);
}
.dg-chips .dg-chip { transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, color .18s ease }
.dg-chips .dg-chip:hover {
  transform: translateY(-2px);
  color: var(--gold-hi);
  border-color: var(--gold-hi);
  box-shadow: 0 0 20px rgba(232, 197, 71, .36);
}

/* --------------------------------------------------------------------------
   Library — the shelf of volumes
   -------------------------------------------------------------------------- */

.dg-floor { position: relative; padding: 30px 0 58px; background: linear-gradient(180deg, #12061f, #170826 58%, #12061f) }
.dg-shelf {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: 20px;
  padding-bottom: 26px;
}
.dg-shelf-rail {
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: 0;
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(180deg, #7a5516, #3a2708);
  box-shadow: 0 10px 26px rgba(6, 1, 14, .62), inset 0 1px 0 rgba(255, 235, 170, .32);
}
.dg-hit.dg-vol {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  margin: 0;
  padding: 17px 18px 15px 27px;
  border-radius: 4px 13px 13px 4px;
  border: 1px solid rgba(240, 215, 140, .4);
  background: linear-gradient(180deg, rgba(44, 17, 76, .94), rgba(23, 8, 40, .96));
  box-shadow: 0 16px 34px rgba(6, 1, 14, .5), inset 0 1px 0 rgba(255, 235, 170, .1);
  transform-origin: 0 100%;
}
.dg-shelf .dg-vol { transition: transform .3s cubic-bezier(.2, .9, .3, 1), box-shadow .3s ease, border-color .3s ease }
.dg-shelf .dg-vol:hover,
.dg-shelf .dg-vol:focus-visible {
  transform: translateY(-9px) rotate(-1.2deg);
  border-color: var(--gold-hi);
  box-shadow: 0 28px 50px rgba(6, 1, 14, .6), 0 0 38px rgba(232, 197, 71, .26);
}
.dg-vol-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: linear-gradient(180deg, #f0d78c, #c9a227 46%, #7d5f10);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .4);
}
.dg-vol-head { display: flex; align-items: center; gap: 9px; color: var(--gold-mid) }
.dg-hit.dg-vol b {
  display: block;
  font-family: var(--magic);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.18;
  color: var(--gold-lt);
}
.dg-hit.dg-vol > span { display: block; font-size: 13.5px; line-height: 1.56; color: #d7c9f2 }
.dg-vol-open,
.dg-vol-gate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--gold-lt);
}
.dg-vol-open .dg-i { transition: transform .22s ease }
.dg-shelf .dg-vol:hover .dg-vol-open .dg-i { transform: translateX(5px) }
.dg-hit.dg-vol.gated { border-style: dashed }
.dg-vol.gated .dg-vol-spine { background: linear-gradient(180deg, #8878c0, #4a3a7e 46%, #2a1f4d) }
.dg-vol.gated .dg-vol-head { color: #b9a3dd }
.dg-vol.gated .dg-vol-gate { color: #d8c6f2 }
/* A velvet sash across the corner of anything above the reader's plan. */
.dg-vol.gated::after {
  content: "";
  position: absolute;
  right: -42px;
  top: 16px;
  width: 138px;
  height: 19px;
  rotate: 38deg;
  background: linear-gradient(180deg, #8c1740, #4d0b24);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.dg-shelfmark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-lt);
  border: 1px solid rgba(240, 215, 140, .38);
  background: rgba(240, 215, 140, .07);
}

.dg-drawer {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 4px 20px;
  align-items: center;
  padding: 26px 28px;
  border-radius: 16px;
  border: 1px dashed rgba(240, 215, 140, .45);
  background: linear-gradient(180deg, rgba(44, 17, 76, .8), rgba(23, 8, 40, .86));
}
.dg-drawer-art { grid-row: 1 / span 2; color: var(--gold-mid); animation: dg-drawer-nudge 5.2s ease-in-out infinite }
.dg-drawer h3 { margin: 0; font-family: var(--magic); font-weight: 600; font-size: 23px; color: var(--gold-lt) }
.dg-drawer p { margin: 4px 0 0; font-size: 14.5px; color: #ded1f4 }

.dg-floor-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 26px 0 0;
  font-size: 13.5px;
  color: #c2afe2;
}
.dg-floor-note .dg-i { flex: none; color: var(--gold-mid) }

/* --------------------------------------------------------------------------
   Library — the reading room
   -------------------------------------------------------------------------- */

.dg-readroom {
  position: relative;
  overflow: hidden;
  padding: 30px 0 64px;
  background:
    radial-gradient(760px 380px at 12% -8%, rgba(124, 58, 237, .4), transparent 60%),
    linear-gradient(180deg, #1b0930, #12061f 46%, #0d0417);
}
.dg-readroom-inner { position: relative; z-index: 2; max-width: 880px }
.dg-lampglow {
  position: absolute;
  right: -8%;
  top: -14%;
  z-index: 0;
  width: 54%;
  height: 66%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 186, 92, .3), rgba(150, 70, 235, .12) 56%, transparent 78%);
  mix-blend-mode: screen;
  animation: dg-lantern 7.4s ease-in-out infinite;
}
.dg-backstack { margin: 0 0 14px }
.dg-backstack a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  text-decoration: none;
  color: var(--gold-lt);
  border: 1px solid rgba(240, 215, 140, .38);
  background: rgba(240, 215, 140, .07);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dg-backstack a:hover { transform: translateX(-4px); border-color: var(--gold-hi); box-shadow: 0 0 20px rgba(232, 197, 71, .3) }
.dg-backstack .dg-i-back { rotate: 180deg }
.dg-readroom h1 {
  margin: 12px 0 10px;
  font-family: var(--magic);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.06;
  filter: drop-shadow(0 0 24px rgba(232, 197, 71, .3));
}
.dg-readroom .dg-body { max-width: 68ch; color: #ece1fb; line-height: 1.72; font-size: 15.5px }
.dg-readroom .dg-body p { margin: 0 0 16px }
/* Illuminated capital, the way the manuscript would have wanted it. */
.dg-illuminated::first-letter {
  float: left;
  padding: 6px 12px 0 0;
  font-family: var(--magic);
  font-size: 3.7em;
  font-weight: 700;
  line-height: .78;
  color: var(--gold-lt);
  text-shadow: 0 0 26px rgba(232, 197, 71, .55);
}
.dg-steps.dg-stairs { margin: 24px 0; padding: 0; list-style: none; counter-reset: dgstep }
.dg-stairs li {
  position: relative;
  margin: 0 0 10px;
  padding: 14px 18px 14px 58px;
  border-radius: 12px;
  border: 1px solid rgba(240, 215, 140, .3);
  background: linear-gradient(90deg, rgba(44, 17, 76, .88), rgba(23, 8, 40, .6));
  counter-increment: dgstep;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.dg-stairs li::before {
  content: counter(dgstep);
  position: absolute;
  left: 15px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  translate: 0 -50%;
  font-family: var(--magic);
  font-weight: 700;
  font-size: 16px;
  color: #2a1248;
  background: radial-gradient(circle at 34% 30%, #fff6d4, #f0d78c 46%, #c9a227);
  box-shadow: 0 0 18px rgba(232, 197, 71, .45);
}
.dg-stairs li:nth-child(2) { margin-left: 16px }
.dg-stairs li:nth-child(3) { margin-left: 32px }
.dg-stairs li:nth-child(4) { margin-left: 48px }
.dg-stairs li:nth-child(5) { margin-left: 64px }
.dg-stairs li:nth-child(n+6) { margin-left: 80px }
.dg-stairs li:hover { transform: translateX(7px); border-color: var(--gold-hi); box-shadow: 0 0 26px rgba(232, 197, 71, .22) }

.dg-readroom .dg-gate {
  position: relative;
  overflow: hidden;
  margin: 26px 0;
  padding: 34px 28px 26px 122px;
  border-radius: 16px;
  border: 1px solid var(--gold-mid);
  background: linear-gradient(180deg, rgba(48, 19, 84, .94), rgba(23, 8, 40, .96));
  box-shadow: 0 22px 48px rgba(6, 1, 14, .55);
}
.dg-gate-rope {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 17px;
  border-radius: 0 0 40% 40% / 0 0 100% 100%;
  background: linear-gradient(180deg, #8c1740, #4d0b24);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .55);
}
.dg-gate-lock {
  position: absolute;
  left: 38px;
  top: 54%;
  translate: 0 -50%;
  color: var(--gold-lt);
  filter: drop-shadow(0 0 18px rgba(232, 197, 71, .5));
  animation: dg-lock-shake 6.4s ease-in-out infinite;
}
.dg-readroom .dg-gate h3 { margin: 0 0 8px; font-family: var(--magic); font-weight: 600; font-size: 25px; color: var(--gold-lt) }
.dg-readroom .dg-gate p { margin: 0 0 14px; color: #ded1f4 }
.dg-readroom .dg-tiny { color: #9d87c4; font-size: 12.5px }
.dg-readroom-more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }

/* --------------------------------------------------------------------------
   Attraction keyframes
   -------------------------------------------------------------------------- */

@keyframes dg-moon-breathe {
  0%, 100% { opacity: .82; transform: scale(1) }
  50% { opacity: 1; transform: scale(1.035) }
}
@keyframes dg-twinkle {
  0%, 100% { opacity: .25; transform: scale(.8) }
  50% { opacity: 1; transform: scale(1.25) }
}
@keyframes dg-arch-pulse {
  0%, 100% { border-color: rgba(240, 215, 140, .22) }
  50% { border-color: rgba(255, 226, 122, .58) }
}
@keyframes dg-curtain-l {
  from { transform: translateX(-46%) }
  to { transform: none }
}
@keyframes dg-curtain-r {
  from { transform: translateX(46%) }
  to { transform: none }
}
@keyframes dg-bulb {
  0%, 100% { background: var(--bulb-off); box-shadow: 0 0 0 1px rgba(240, 215, 140, .3) }
  16% { background: var(--bulb); box-shadow: 0 0 11px 2px rgba(255, 226, 122, .9), 0 0 26px rgba(255, 200, 80, .5) }
  44% { background: var(--bulb-off); box-shadow: 0 0 0 1px rgba(240, 215, 140, .3) }
}
@keyframes dg-sign-shine {
  0%, 62% { left: -60%; opacity: 0 }
  68% { opacity: 1 }
  92%, 100% { left: 120%; opacity: 0 }
}
@keyframes dg-rope {
  from { background-position: -46% 0 }
  to { background-position: 146% 0 }
}
@keyframes dg-mote {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.55) }
  10% { opacity: .95 }
  72% { opacity: .65 }
  100% { opacity: 0; transform: translate3d(var(--mx, 20px), -560px, 0) scale(1.05) }
}
@keyframes dg-medallion {
  0%, 100% { box-shadow: 0 0 0 4px #170826, 0 0 20px rgba(232, 197, 71, .4) }
  50% { box-shadow: 0 0 0 4px #170826, 0 0 34px rgba(232, 197, 71, .78) }
}
@keyframes dg-car {
  0% { left: 8%; opacity: 0 }
  8%, 42% { opacity: 1 }
  50% { left: calc(92% - 10px); opacity: 1 }
  58%, 92% { opacity: 1 }
  100% { left: 8%; opacity: 0 }
}
@keyframes dg-swing {
  0%, 100% { transform: rotate(-.85deg) }
  50% { transform: rotate(.85deg) }
}
@keyframes dg-lamp-swing {
  0%, 100% { transform: rotate(-3.4deg) }
  50% { transform: rotate(3.4deg) }
}
@keyframes dg-stack-breathe {
  0%, 100% { opacity: .68 }
  50% { opacity: 1 }
}
@keyframes dg-fly-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg) }
  50% { transform: translate3d(16px, -26px, 0) rotate(5deg) }
}
@keyframes dg-fly-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(7deg) }
  50% { transform: translate3d(-20px, -32px, 0) rotate(-6deg) }
}
@keyframes dg-fly-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg) }
  50% { transform: translate3d(-14px, -22px, 0) rotate(-8deg) }
}
@keyframes dg-ring {
  0%, 100% { opacity: .35; transform: scale(1) }
  50% { opacity: .9; transform: scale(1.014) }
}
@keyframes dg-drawer-nudge {
  0%, 100% { transform: translateX(0) }
  50% { transform: translateX(6px) }
}
@keyframes dg-lock-shake {
  0%, 84%, 100% { transform: rotate(0deg) }
  88% { transform: rotate(-8deg) }
  92% { transform: rotate(7deg) }
  96% { transform: rotate(-4deg) }
}

/* --------------------------------------------------------------------------
   Narrower screens
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .dg-palace .dg-card-row { width: 100%; max-width: none }
  .dg-stage .dg-hero-lamp { width: 13%; bottom: auto; top: 40%; right: 2% }
  .dg-stage .dg-plume { display: none }
  .dg-foot-grid { grid-template-columns: 1.4fr .8fr .8fr .8fr 1.2fr; }
  .dg-seal-col { display: none }
}

@media (max-width: 980px) {
  .dg-nav-toggle { display: inline-flex; align-items: center; justify-content: center }
  .dg-nav {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 12px;
    right: 12px;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(180deg, #2a1048, #1d0a34);
    border: 1px solid rgba(240, 215, 140, .55);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 22px 48px rgba(6, 1, 14, .6);
  }
  .dg-sat-bar.is-open .dg-nav { display: flex }
  .dg-nav > a::after, .dg-drop > a::after { display: none }
  .dg-drop .dg-menu {
    position: static;
    display: grid;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 12px;
  }
  /* 1100px wide palace instead of 1672 — half the bytes on a phone. */
  body.dg-body.home .dg-hero.dg-palace {
    background-image: url("assets/hero-bg-sm.jpg");
    background-image: image-set(url("assets/hero-bg-sm.webp") type("image/webp"), url("assets/hero-bg-sm.jpg") type("image/jpeg"));
  }
  .dg-hero-inner { padding-top: 26px }
  .dg-hero-copy { max-width: 100% }
  .dg-palace .dg-hero-copy p { max-width: 54ch }
  /* The stage becomes a banner above the copy: genie left, checklist right,
     lamp in the corner. Papers would only add clutter at this width. */
  .dg-stage { position: relative; inset: auto; height: 62vw; max-height: 420px; margin: 6px 0 0 }
  /* overflow:hidden would clip the bloom into a visible rectangle here */
  .dg-stage::after { display: none }
  .dg-stage .dg-genie { left: -5%; top: 0; width: 80% }
  .dg-stage .dg-panel { right: 1%; top: 2%; width: 35%; min-width: 132px }
  .dg-stage .dg-papers { display: none }
  .dg-stage .dg-hero-lamp { right: 4%; bottom: 2%; top: auto; width: 27%; min-width: 96px }
  .dg-band { grid-template-columns: 1fr }
  .dg-band > article + article { border-left: 0; border-top: 1px solid rgba(240, 215, 140, .32) }
  .dg-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dg-guide-hero { grid-template-columns: 1fr }

  /* Attractions: the drapes and the arch tunnel cost width the copy needs. */
  .dg-curtain { display: none }
  .dg-colonnade { width: 130%; opacity: .7 }
  .dg-marquee .dg-moon { width: 74px; height: 74px; right: 6% }
  .dg-hanglamps i:nth-child(3) { display: none }
  .dg-hanglamps i:nth-child(1) { right: 8% }
  .dg-hanglamps i:nth-child(2) { right: 24% }
  .dg-track { grid-template-columns: 1fr; padding-top: 30px }
  .dg-track::before, .dg-track::after { display: none }
  .dg-room { margin-top: 14px }
  .dg-stub-row { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dg-exit-inner { grid-template-columns: 1fr }
  .dg-exit-lamp { width: min(240px, 56%) }
  .dg-flyers i:nth-child(2) { display: none }
  .dg-scroll-body > * { margin-left: 26px; margin-right: 26px }
  .dg-stairs li:nth-child(n) { margin-left: 0 }
}

@media (max-width: 700px) {
  .dg-card-row, .dg-palace .dg-card-row { grid-template-columns: 1fr; width: 100% }
  .dg-brand small { display: none }
  .dg-brand b.dg-wordmark { font-size: 1.04rem }
  .dg-brand img.dg-logo { width: 36px; height: 36px }
  .dg-sat-bar .dg-bar-inner { gap: 6px }
  .dg-join { white-space: nowrap; padding: 8px 12px; font-size: 12.5px }
  .dg-join .dg-i { display: none }
  .dg-lamp-btn { width: 36px; height: 36px }
  .dg-glyphs { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .dg-foot-grid { grid-template-columns: 1fr }
  .dg-band > article { grid-template-columns: 1fr; padding: 20px }
  .dg-band .dg-band-art { grid-row: auto }

  .dg-marquee-inner { padding-top: 28px }
  .dg-hanglamps { display: none }
  /* The sign goes full width here, and there is nowhere left to hang a moon. */
  .dg-marquee .dg-moon { display: none }
  .dg-stacks { height: 32%; opacity: .5 }
  .dg-sign { display: block; padding: 22px 26px 18px }
  .dg-bulbs i:nth-child(10n+2),
  .dg-bulbs i:nth-child(10n+4),
  .dg-bulbs i:nth-child(10n+6),
  .dg-bulbs i:nth-child(10n+8),
  .dg-bulbs i:nth-child(10n+10) { display: none }
  .dg-stub-row { grid-template-columns: 1fr }
  .dg-ride-h > span { width: 44px; height: 44px; border-radius: 12px }
  /* The lamp would eat the input at this width; the ring keeps the magic. */
  .dg-ask.dg-console { flex-wrap: wrap; padding: 12px }
  .dg-console-lamp { display: none }
  .dg-console input[type="search"] { flex: 1 1 100% }
  .dg-console .dg-btn.gold { width: 100% ; justify-content: center }
  .dg-shelf { grid-template-columns: 1fr }
  .dg-readroom .dg-gate { padding: 30px 22px 22px }
  .dg-gate-lock { position: static; display: block; margin: 6px 0 10px; translate: none }
  .dg-drawer { grid-template-columns: 1fr; gap: 8px }
  .dg-drawer-art { grid-row: auto }
}

/* --------------------------------------------------------------------------
   Reduced motion — show the finished picture, skip the theatre
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dg-stage .dg-genie,
  .dg-stage .dg-panel,
  .dg-stage .dg-papers,
  .dg-stage .dg-panel-body li,
  .dg-reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .dg-stage.is-lit .dg-genie img,
  .dg-stage.is-lit .dg-panel .dg-panel-art,
  .dg-stage.is-lit .dg-papers img,
  .dg-stage.is-lit .dg-hero-lamp img,
  .dg-lanterns i,
  .dg-seal-col .dg-i { animation: none !important }
  .dg-burst, .dg-spark, .dg-plume, .dg-dust { display: none !important }
  .dg-tile:hover, .dg-feat:hover, .dg-btn:hover, .dg-join:hover { transform: none }
  .dg-tile::after, .dg-btn::before, .dg-join::before { display: none }

  /* Attractions: keep the set, turn off the show. */
  .dg-moon,
  .dg-stars i,
  .dg-colonnade i,
  .dg-curtain,
  .dg-bulbs i,
  .dg-sign::after,
  .dg-ropelight,
  .dg-ride-h > span,
  .dg-room-no,
  .dg-track::after,
  .dg-hang,
  .dg-stacks i,
  .dg-flyers i,
  .dg-console-ring,
  .dg-console-lamp img,
  .dg-exit-lamp img,
  .dg-hanglamps i,
  .dg-hanglamp-glow,
  .dg-lampglow,
  .dg-drawer-art,
  .dg-gate-lock { animation: none !important }
  .dg-motes, .dg-exit-plume, .dg-console-plume { display: none !important }
  .dg-bulbs i { background: var(--bulb); box-shadow: 0 0 8px rgba(255, 226, 122, .6) }
  /* The scroll never rolls, so it has to start open. */
  .dg-scroll-sheet { grid-template-rows: 1fr !important; transition: none !important }
  .dg-tour .dg-room:hover,
  .dg-stubs .dg-stub:hover,
  .dg-shelf .dg-vol:hover,
  .dg-chips .dg-chip:hover,
  .dg-stairs li:hover,
  .dg-backstack a:hover { transform: none }
  .dg-stub::after { display: none }
}