/* ============================================================
   podium.css — the view at a podium: the passing sky above, the open
   stone book become a living page in the middle (bronze meander border,
   gilt bosses, parchment, a gutter), the playlist rail drifting below,
   and the "Hit Escape to exit" bubble.
   The open animation unfolds the two halves from the spine.
   ============================================================ */
#podium { pointer-events: none; }
#podium > .pod-root { pointer-events: none; }
.pod-root {
  --pod-glow: #F0C878;
  --sky-h: 19vh;
  --frame-w: min(72vw, 1500px);
  --frame-h: 68vh;
  --frame-top: 15.2vh;
  --rail-h: 11vh;
  --B: 22px;                                   /* the meander band */
  --ink: #2A1C10;
  --ink-2: #5A4128;
  --paper-1: #F1E6CC;
  --paper-2: #E6D4AE;
  --bronze-1: #7A5A2E;
  --bronze-2: #3B2A16;
  position: absolute; inset: 0; overflow: hidden;
  font-family: var(--body); color: var(--ink);
}
/* a soft vignette so the rail and plaque stand off the blurred world */
.pod-root::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 62% at 50% 52%, transparent 58%, rgba(4, 10, 6, .42) 100%),
    linear-gradient(to top, rgba(4, 10, 6, .55), transparent 18%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.pod-root[data-state="open"]::before { opacity: 1; }

/* ---------------- the sky band ---------------- */
.pod-sky {
  position: absolute; left: 0; right: 0; top: 0; height: var(--sky-h); width: 100%; display: block;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
  opacity: 0; transition: opacity .9s var(--ease);
}
.pod-root[data-state="open"] .pod-sky { opacity: .97; }
.pod-root[data-state="closing"] .pod-sky { opacity: 0; transition-duration: .45s; }

/* ---------------- the Escape bubble ---------------- */
.pod-esc {
  position: absolute; left: 50%; top: 1.7vh; transform: translate(-50%, -8px);
  display: inline-flex; align-items: center; gap: 10px; pointer-events: auto; cursor: pointer;
  padding: 6px 16px 6px 7px; border-radius: 999px;
  font-family: var(--util); font-size: 12.5px; letter-spacing: .12em; color: var(--sand-lt);
  background: linear-gradient(180deg, rgba(10, 36, 22, .62), rgba(5, 19, 12, .72));
  border: 1px solid rgba(232, 211, 160, .38);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 241, 196, .12);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0; transition: opacity .5s var(--ease) .55s, transform .6s var(--ease-out) .55s, border-color .2s;
}
.pod-esc:hover { border-color: rgba(255, 227, 154, .7); }
.pod-root[data-state="open"] .pod-esc { opacity: 1; transform: translate(-50%, 0); }
.pod-root[data-state="closing"] .pod-esc { opacity: 0; transition-delay: 0s; transition-duration: .2s; }
.pod-esc kbd {
  display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px 2px;
  font: 400 15px/1 -apple-system, 'Apple Symbols', 'Segoe UI Symbol', var(--util); color: var(--green-deep);
  border-radius: 6px;
  background: linear-gradient(180deg, #FFF6DA, #E8D3A0 70%, #CDB27A);
  box-shadow: 0 2px 0 #8C7648, 0 3px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.pod-esc kbd svg { width: 15px; height: 15px; display: block; }
.pod-esc b { font-weight: 400; color: #FFF1C4; }

/* ---------------- the book ---------------- */
.pod-book {
  position: absolute; left: 50%; top: var(--frame-top);
  width: var(--frame-w); height: var(--frame-h); margin-left: calc(var(--frame-w) / -2);
  perspective: 2600px; perspective-origin: 50% 30%;
  pointer-events: none;
}
.pod-half {
  position: absolute; top: 0; bottom: 0; width: 50%;
  border: var(--B) solid transparent;
  border-image: var(--pod-meander) 22 / var(--B) round;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform-style: flat;
  box-shadow:
    0 0 0 1.5px #1C1208,
    0 0 0 4px #6B4E26,
    0 0 0 5px #D8B46A,
    0 0 0 6.5px #2A1B0C,
    0 34px 70px -10px rgba(0, 0, 0, .6),
    0 0 90px -6px color-mix(in srgb, var(--pod-glow) 42%, transparent);
  pointer-events: auto;
}
.pod-half.l { left: 0; border-right-width: 0; transform-origin: 100% 50%; clip-path: inset(-240px 0 -240px -240px); }
.pod-half.r { right: 0; border-left-width: 0; transform-origin: 0 50%; clip-path: inset(-240px -240px -240px 0); }

/* the parchment: two layers of papyrus fibre, foxing, a warm burn at the edges */
.pod-page {
  position: absolute; inset: 0; overflow: hidden;
  background-color: var(--paper-1);
  background-image:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(255, 250, 235, .55), transparent 70%),
    radial-gradient(circle at 82% 78%, rgba(150, 100, 40, .10), transparent 22%),
    radial-gradient(circle at 12% 88%, rgba(150, 100, 40, .08), transparent 18%),
    var(--pod-fibre),
    linear-gradient(180deg, var(--paper-1), var(--paper-2));
  background-size: auto, auto, auto, 420px 420px, auto;
  box-shadow:
    inset 0 0 0 1px rgba(120, 84, 34, .55),
    inset 0 0 0 4px rgba(241, 230, 204, .7),
    inset 0 0 0 5px rgba(169, 114, 28, .45),
    inset 0 0 60px rgba(110, 70, 20, .32),
    inset 0 0 12px rgba(80, 50, 10, .25);
}
/* the gutter: the fold of an open book */
.pod-half.l .pod-page::after, .pod-half.r .pod-page::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none;
}
.pod-half.l .pod-page::after {
  right: 0;
  background: linear-gradient(to left, rgba(70, 42, 12, .22), rgba(70, 42, 12, .08) 24%, rgba(255, 248, 228, .24) 48%, transparent);
}
.pod-half.r .pod-page::after {
  left: 0;
  background: linear-gradient(to right, rgba(70, 42, 12, .22), rgba(70, 42, 12, .08) 24%, rgba(255, 248, 228, .24) 48%, transparent);
}
/* the spine stitch */
.pod-spine {
  position: absolute; left: 50%; top: calc(var(--B) - 2px); bottom: calc(var(--B) - 2px); width: 2px; margin-left: -1px;
  /* stitched only at head and tail, so it never runs through the page's text */
  background: linear-gradient(to bottom, transparent, rgba(60, 36, 10, .4) 2%, rgba(60, 36, 10, .3) 8%, transparent 17%, transparent 83%, rgba(60, 36, 10, .3) 92%, rgba(60, 36, 10, .4) 98%, transparent);
  pointer-events: none; opacity: 0; transition: opacity .4s var(--ease) .5s;
}
.pod-root[data-state="open"] .pod-spine { opacity: .75; }

/* gilt corner bosses */
.pod-boss {
  position: absolute; width: 50px; height: 50px; margin: -25px; border-radius: 50%; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 246, 214, .95) 0 7%, transparent 20%),
    radial-gradient(circle, #F6D98C 0 17%, #9C6A1E 19%, #E7BE62 22%, transparent 24%),
    repeating-conic-gradient(from 11deg, #E9C06A 0 12deg, #B07E2A 12deg 24deg, #F3D48A 24deg 30deg),
    radial-gradient(circle, #E6B653 0 60%, #6E4710 62%);
  -webkit-mask: radial-gradient(circle, #000 0 39%, transparent 40%, transparent 44%, #000 45% 70%, transparent 71%);
  mask: radial-gradient(circle, #000 0 39%, transparent 40%, transparent 44%, #000 45% 70%, transparent 71%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}
.pod-boss::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 0 69%, #D9B25E 70%, #7A5418 71%, transparent 72%);
}
.pod-half.l .pod-boss.t { left: calc(var(--B) / -2); top: calc(var(--B) / -2); margin: -14px; }
.pod-half.l .pod-boss.b { left: calc(var(--B) / -2); bottom: calc(var(--B) / -2); top: auto; margin: -14px; }
.pod-half.r .pod-boss.t { right: calc(var(--B) / -2); top: calc(var(--B) / -2); margin: -14px; }
.pod-half.r .pod-boss.b { right: calc(var(--B) / -2); bottom: calc(var(--B) / -2); margin: -14px; }
.pod-boss { width: 28px; height: 28px; }

/* the content sits over both halves, inside the band */
.pod-content {
  position: absolute; inset: var(--B); padding: 30px 30px 18px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  color: var(--ink); pointer-events: auto;
}
.pod-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(120, 84, 34, .5) transparent; }
.pod-reader-host { position: absolute; inset: var(--B); display: none; z-index: 5; pointer-events: auto; }
.pod-root.reading .pod-reader-host { display: block; }
.pod-root.reading .pod-content { visibility: hidden; }
.pod-voice {
  flex: none; align-self: center; text-align: center; margin: 0 0 12px; padding: 4px 28px;
  background: radial-gradient(ellipse at center, rgba(244, 233, 206, .96) 0 55%, rgba(244, 233, 206, 0) 72%);
  font: italic 400 clamp(17px, 2.3vh, 22px)/1.2 var(--body); color: var(--ink-2); letter-spacing: .01em;
}
.pod-voice span { font-style: normal; font-family: var(--util); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #8C6A3A; margin-left: .8em; }
.pod-voice::before, .pod-voice::after { content: '❦'; font-style: normal; color: rgba(140, 100, 40, .55); margin: 0 .7em; font-size: .8em; vertical-align: .1em; }

/* ---------------- the plaque: a tabula ansata in green enamel and gold ---------------- */
.pod-plaque {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -54%);
  z-index: 6; pointer-events: none; text-align: center; white-space: nowrap;
  padding: 9px 38px 10px; min-width: 300px;
  background:
    linear-gradient(180deg, rgba(255, 241, 196, .07), transparent 40%),
    radial-gradient(ellipse at 50% 0%, #0F3321, #06170E 70%);
  border: 1px solid #C9AE7C;
  box-shadow: 0 0 0 3px #06170E, 0 0 0 4px rgba(201, 174, 124, .6), 0 10px 26px rgba(0, 0, 0, .5), 0 0 40px -6px color-mix(in srgb, var(--pod-glow) 50%, transparent);
  opacity: 0;
}
.pod-plaque::before, .pod-plaque::after {           /* the dovetail ears */
  content: ''; position: absolute; top: 50%; width: 26px; height: 34px; margin-top: -17px;
  background: linear-gradient(180deg, #D9BD84, #8C6A34);
}
.pod-plaque::before { left: -29px; clip-path: polygon(100% 0, 100% 100%, 0 78%, 22% 50%, 0 22%); }
.pod-plaque::after { right: -29px; clip-path: polygon(0 0, 100% 22%, 78% 50%, 100% 78%, 0 100%); }
.pod-plaque h2 {
  margin: 0; font: 600 clamp(17px, 2.35vh, 23px)/1.15 var(--display); letter-spacing: .2em; text-transform: uppercase;
  background: linear-gradient(180deg, #FFF1C4 10%, #E6C27A 55%, #B98A3A 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
}
.pod-plaque p { margin: 2px 0 0; font: italic 400 clamp(13px, 1.75vh, 16px)/1.2 var(--body); color: rgba(232, 211, 160, .82); letter-spacing: .02em; }

/* ---------------- the close button ---------------- */
.pod-close {
  position: absolute; right: -19px; top: -19px; z-index: 7; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto;
  border: 1px solid rgba(232, 211, 160, .55); color: var(--sand-lt); font: 300 17px/1 var(--util);
  background: radial-gradient(circle at 40% 30%, #1B4630, #06170E 75%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 0 3px rgba(6, 23, 14, .8), inset 0 1px 0 rgba(255, 241, 196, .15);
  opacity: 0; transition: transform .25s var(--ease-out), border-color .2s, opacity .4s var(--ease);
}
.pod-close:hover { transform: rotate(90deg) scale(1.06); border-color: #FFE39A; }
.pod-root[data-state="open"] .pod-close { opacity: 1; transition-delay: 0s, 0s, .6s; }

/* ---------------- the open / close choreography ---------------- */
.pod-root[data-state="opening"] .pod-half.l, .pod-root[data-state="open"] .pod-half.l { animation: pod-unfold-l .78s cubic-bezier(.2, .75, .25, 1) both; }
.pod-root[data-state="opening"] .pod-half.r, .pod-root[data-state="open"] .pod-half.r { animation: pod-unfold-r .78s cubic-bezier(.2, .75, .25, 1) both; }
.pod-root[data-state="opening"] .pod-book, .pod-root[data-state="open"] .pod-book { animation: pod-rise .8s var(--ease-out) both; }
.pod-root[data-state="open"] .pod-content { animation: pod-ink .6s var(--ease) .46s both; }
.pod-root[data-state="opening"] .pod-content { opacity: 0; }
.pod-root[data-state="open"] .pod-plaque { animation: pod-plaque .55s var(--ease-out) .42s both; }
.pod-root[data-state="closing"] .pod-half.l { animation: pod-fold-l .5s cubic-bezier(.55, 0, .8, .35) .12s both; }
.pod-root[data-state="closing"] .pod-half.r { animation: pod-fold-r .5s cubic-bezier(.55, 0, .8, .35) .12s both; }
.pod-root[data-state="closing"] .pod-content,
.pod-root[data-state="closing"] .pod-reader-host { animation: pod-fade-out .18s var(--ease) both; }
.pod-root[data-state="closing"] .pod-plaque { animation: pod-fade-out .22s var(--ease) both; }
.pod-root[data-state="closing"] .pod-book { animation: pod-sink .62s var(--ease) both; }

@keyframes pod-unfold-l { 0% { transform: rotateY(84deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: rotateY(0); opacity: 1; } }
@keyframes pod-unfold-r { 0% { transform: rotateY(-84deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: rotateY(0); opacity: 1; } }
@keyframes pod-fold-l { from { transform: rotateY(0); opacity: 1; } 85% { opacity: 1; } to { transform: rotateY(86deg); opacity: 0; } }
@keyframes pod-fold-r { from { transform: rotateY(0); opacity: 1; } 85% { opacity: 1; } to { transform: rotateY(-86deg); opacity: 0; } }
@keyframes pod-rise { from { transform: translateY(3vh) scale(.965); } to { transform: none; } }
@keyframes pod-sink { from { transform: none; } to { transform: translateY(2.5vh) scale(.975); } }
@keyframes pod-ink { from { opacity: 0; filter: blur(5px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes pod-plaque { from { opacity: 0; transform: translate(-50%, -85%); } to { opacity: 1; transform: translate(-50%, -54%); } }
@keyframes pod-fade-out { to { opacity: 0; } }

/* a gilt light sweeps the page once it lies flat */
.pod-sweep {
  position: absolute; inset: var(--B); pointer-events: none; z-index: 4; overflow: hidden; opacity: 0;
}
.pod-sweep::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 32%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 180, .0) 20%, rgba(255, 236, 180, .38) 50%, rgba(255, 236, 180, 0) 80%, transparent);
  transform: skewX(-12deg); mix-blend-mode: soft-light;
}
.pod-root[data-state="open"] .pod-sweep { opacity: 1; }
.pod-root[data-state="open"] .pod-sweep::before { animation: pod-sweep 1.5s var(--ease) .62s both; }
@keyframes pod-sweep { from { left: -40%; } to { left: 115%; } }

/* ---------------- the playlist rail ---------------- */
.pod-rail {
  position: absolute; left: 50%; bottom: 1.5vh; height: var(--rail-h);
  width: min(88vw, 1720px); transform: translate(-50%, 24px);
  display: flex; align-items: center; gap: 18px; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease) .3s, transform .8s var(--ease-out) .3s;
}
.pod-root[data-state="open"] .pod-rail { opacity: 1; transform: translate(-50%, 0); }
.pod-root[data-state="closing"] .pod-rail { opacity: 0; transform: translate(-50%, 18px); transition-delay: 0s; transition-duration: .35s; }

.rail-lead {
  flex: none; pointer-events: auto; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 5px; align-items: center;
  padding: 10px 16px 10px 12px; border-radius: 16px; min-width: 238px;
  background: linear-gradient(180deg, rgba(10, 36, 22, .7), rgba(5, 19, 12, .82));
  border: 1px solid var(--glass-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 241, 196, .08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--sand-lt);
}
.rail-lead .rail-stop {
  grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--glass-line); background: rgba(232, 211, 160, .06); color: var(--sand-lt); transition: border-color .2s, background .2s;
}
.rail-lead .rail-stop:hover { border-color: var(--glass-line-2); background: rgba(232, 211, 160, .14); }
.rail-lead .rail-stop svg { width: 12px; height: 12px; }
.rail-lead .rail-stop[disabled] { opacity: .45; cursor: default; }
.rail-now { min-width: 0; line-height: 1.1; }
.rail-now small { display: block; font: 400 9.5px/1.2 var(--util); letter-spacing: .24em; text-transform: uppercase; color: var(--sand-dim); }
.rail-now b { display: block; font: 600 16px/1.2 var(--body); color: var(--sand-lt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.rail-vol { display: flex; align-items: center; gap: 8px; color: var(--sand-dim); }
.rail-vol svg { width: 14px; height: 14px; flex: none; }
.rail-vol input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; cursor: pointer; margin: 0;
  --v: 60%;
}
.rail-vol input[type=range]::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #E6B653 0 var(--v), rgba(232, 211, 160, .22) var(--v) 100%);
}
.rail-vol input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF1C4, #E6B653 60%, #A9721C); box-shadow: 0 0 0 1px rgba(110, 71, 16, .6), 0 0 8px rgba(255, 214, 120, .5);
}
.rail-vol input[type=range]::-moz-range-track { height: 2px; background: rgba(232, 211, 160, .22); }
.rail-vol input[type=range]::-moz-range-progress { height: 2px; background: #E6B653; }
.rail-vol input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #E6B653; }

.rail-track {
  position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; pointer-events: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 2%, #000 14%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent 0, transparent 2%, #000 14%, #000 88%, transparent);
}
.rail-strip { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; width: max-content; animation: rail-drift 150s linear infinite; will-change: transform; }
.rail-track:hover .rail-strip, .rail-track:focus-within .rail-strip { animation-play-state: paused; }
.rail-set { display: flex; align-items: center; gap: 14px; padding-right: 14px; }
@keyframes rail-drift { to { transform: translateX(-50%); } }

.rail-chip {
  --bob: 0s;
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
  height: 52px; padding: 0 20px 0 7px; border-radius: 999px;
  color: var(--sand-lt); text-align: left;
  background: linear-gradient(180deg, rgba(12, 40, 25, .66), rgba(5, 19, 12, .78));
  border: 1px solid rgba(201, 174, 124, .3);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 241, 196, .07);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: chip-bob 7s ease-in-out var(--bob) infinite alternate;
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.rail-chip:hover { border-color: rgba(255, 227, 154, .62); box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 22px -4px rgba(255, 214, 120, .35), inset 0 1px 0 rgba(255, 241, 196, .1); }
@keyframes chip-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
.rail-chip .ico {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, rgba(232, 211, 160, .16), rgba(232, 211, 160, .04));
  border: 1px solid rgba(201, 174, 124, .28); color: #E6C27A;
}
.rail-chip .ico svg { width: 18px; height: 18px; }
.rail-chip .txt { display: flex; flex-direction: column; line-height: 1.12; }
.rail-chip .txt b { font: 600 17px/1.12 var(--body); letter-spacing: .01em; color: #F3E3BD; white-space: nowrap; }
.rail-chip .txt small { font: 400 9.5px/1.3 var(--util); letter-spacing: .2em; text-transform: uppercase; color: rgba(201, 174, 124, .85); white-space: nowrap; }
.rail-chip .eq { display: none; gap: 2.5px; align-items: flex-end; height: 16px; }
.rail-chip .eq i { width: 3px; border-radius: 1px; background: linear-gradient(180deg, #FFF1C4, #E6B653); height: 30%; animation: eq 1s ease-in-out infinite alternate; }
.rail-chip .eq i:nth-child(2) { animation-duration: .72s; animation-delay: -.3s; }
.rail-chip .eq i:nth-child(3) { animation-duration: .9s; animation-delay: -.6s; }
.rail-chip .eq i:nth-child(4) { animation-duration: .64s; animation-delay: -.1s; }
@keyframes eq { 0% { height: 18%; } 50% { height: 92%; } 100% { height: 40%; } }
.rail-chip.active {
  border-color: rgba(255, 227, 154, .9);
  background: linear-gradient(180deg, rgba(40, 60, 30, .8), rgba(14, 34, 18, .86));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 214, 120, .25), 0 0 30px -2px rgba(255, 214, 120, .5), inset 0 1px 0 rgba(255, 241, 196, .2);
}
.rail-chip.active .ico { background: radial-gradient(circle at 40% 30%, rgba(255, 227, 154, .35), rgba(169, 114, 28, .25)); border-color: rgba(255, 227, 154, .7); }
.rail-chip.active .ico svg { display: none; }
.rail-chip.active .eq { display: flex; }
.rail-chip.pending .ico { animation: chip-wait 1s ease-in-out infinite alternate; }
@keyframes chip-wait { from { box-shadow: 0 0 0 0 rgba(255, 214, 120, .0); } to { box-shadow: 0 0 0 5px rgba(255, 214, 120, .18); } }

/* ---------------- page typography for content we render ourselves ---------------- */
.pod-custom { display: flex; flex-direction: column; gap: 2.2vh; padding: 1vh 1.5vw 2vh; }
.pod-custom h3, .pod-custom .lede { align-self: center; padding: 2px 34px; background: radial-gradient(ellipse at center, rgba(244, 233, 206, .95) 0 58%, rgba(244, 233, 206, 0) 74%); }
.pod-custom h3 {
  margin: 0; text-align: center; font: 600 clamp(20px, 3vh, 30px)/1.1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #3A2616;
}
.pod-custom .lede { margin: -1.2vh 0 0; text-align: center; font: italic 400 clamp(16px, 2.2vh, 20px)/1.3 var(--body); color: var(--ink-2); }
.pod-custom .rule { height: 12px; margin: 0 auto; width: 240px; background:
  linear-gradient(90deg, transparent, rgba(140, 100, 40, .6) 30%, transparent 48%, transparent 52%, rgba(140, 100, 40, .6) 70%, transparent) center / 100% 1px no-repeat;
  position: relative; }
.pod-custom .rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; background: #A9721C; transform: rotate(45deg); }
.cu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cu-tile {
  position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; text-align: left; cursor: pointer;
  padding: 16px 18px 16px 14px; border-radius: 12px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 251, 238, .94), rgba(242, 229, 199, .92));
  border: 1px solid rgba(140, 100, 40, .35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 8px rgba(90, 60, 20, .12);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease), border-color .2s;
}
.cu-tile:hover { transform: translateY(-2px); border-color: rgba(140, 100, 40, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 18px rgba(90, 60, 20, .2); }
.cu-tile .glyph {
  grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font: 600 22px/1 var(--display); color: #FFF1C4;
  background: radial-gradient(circle at 38% 30%, #1B4630, #06170E 78%);
  box-shadow: 0 0 0 1px #C9AE7C, 0 0 0 3px rgba(6, 23, 14, .15), 0 3px 8px rgba(0, 0, 0, .25);
}
.cu-tile b { font: 600 clamp(16px, 2.2vh, 20px)/1.15 var(--body); color: #2A1C10; }
.cu-tile small { font: 400 clamp(13px, 1.75vh, 15px)/1.3 var(--body); color: var(--ink-2); }
.cu-tile.current { border-color: #A9721C; box-shadow: 0 0 0 2px rgba(201, 150, 60, .35), 0 6px 16px rgba(90, 60, 20, .18); }
.cu-tile.current::after { content: 'last used'; position: absolute; right: 12px; top: 9px; font: 400 9px/1 var(--util); letter-spacing: .2em; text-transform: uppercase; color: #8C6A3A; }
.cu-url { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; max-width: 760px; margin: 0 auto; width: 100%; }
.cu-url label { grid-column: 1 / -1; justify-self: center; padding: 5px 30px; background: radial-gradient(ellipse at center, rgba(244, 233, 206, .95) 0 60%, rgba(244, 233, 206, 0) 76%); font: 400 10.5px/1 var(--util); letter-spacing: .24em; text-transform: uppercase; color: #8C6A3A; }
.cu-url input {
  font: 400 18px/1.2 var(--body); color: var(--ink); padding: 11px 16px; border-radius: 10px; outline: none;
  border: 1px solid rgba(140, 100, 40, .45); background: rgba(255, 252, 242, .95); box-shadow: inset 0 1px 3px rgba(90, 60, 20, .15);
}
.cu-url input:focus { border-color: #A9721C; box-shadow: inset 0 1px 3px rgba(90, 60, 20, .15), 0 0 0 3px rgba(201, 150, 60, .22); }
.pod-btn {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 400 12px/1 var(--util); letter-spacing: .16em; text-transform: uppercase;
  padding: 12px 18px; border-radius: 999px; border: 1px solid #06170E;
  background: linear-gradient(180deg, #164029, #06170E); color: #F3E3BD;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 241, 196, .12);
  transition: transform .15s var(--ease), box-shadow .2s;
}
.pod-btn:hover { box-shadow: 0 5px 14px rgba(0, 0, 0, .28), 0 0 0 2px rgba(201, 150, 60, .35), inset 0 1px 0 rgba(255, 241, 196, .12); }
.pod-btn.ghost { background: transparent; color: #3A2616; border-color: rgba(140, 100, 40, .5); box-shadow: none; }
.pod-btn.ghost:hover { border-color: #A9721C; background: rgba(255, 250, 235, .5); }

/* an address shown in a frame: the bar on top, the page filling the rest */
.pod-body.fill { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.cu-bar {
  flex: none; display: flex; align-items: center; gap: 12px; margin: 0; padding: 2px 2px 10px;   /* no negative margin: .fill clips it */
  border-bottom: 1px solid rgba(140, 100, 40, .25);
  font: 400 11px/1 var(--util); letter-spacing: .18em; text-transform: uppercase; color: #8C6A3A;
}
.cu-bar b { font: 600 17px/1.1 var(--body); letter-spacing: .01em; text-transform: none; color: #2A1C10; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-bar .sp { flex: 1; }
.cu-bar .pod-btn { padding: 8px 13px; font-size: 10.5px; }
.cu-frame { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 8px; overflow: hidden; background: #FBF6EA; box-shadow: inset 0 0 0 1px rgba(140, 100, 40, .3); }
.cu-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.cu-notice {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; z-index: 2;
  background: radial-gradient(ellipse at 50% 45%, rgba(251, 246, 234, .97), rgba(240, 226, 194, .97));
}
.cu-notice[hidden] { display: none; }
.cu-notice h4 { margin: 0 0 8px; font: 600 clamp(18px, 2.6vh, 24px)/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #3A2616; }
.cu-notice p { margin: 0 auto 18px; max-width: 520px; font: 400 clamp(16px, 2.2vh, 19px)/1.45 var(--body); color: var(--ink-2); }
.cu-notice .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* a pasted book page, recognised: the book's plate under the reader */
.cu-found small { display: block; margin: 0 0 8px; font: 400 10.5px/1 var(--util); letter-spacing: .24em; text-transform: uppercase; color: #8C6A3A; }
.cu-found .by { margin-top: -4px; font-style: italic; }
.cu-found-cover { display: block; width: 96px; aspect-ratio: 2 / 3; object-fit: cover; margin: 0 auto 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(90, 60, 20, .35), 0 10px 22px -8px rgba(60, 36, 6, .55); }
.cu-hint { font: italic 400 15px/1.3 var(--body); text-transform: none; letter-spacing: 0; color: #8C6A3A; }
.cu-hint a { color: #6E4710; }

/* the stand-in while the page loads, and honest errors */
.pod-wait { display: grid; place-items: center; height: 100%; min-height: 200px; font: italic 400 20px/1.4 var(--body); color: var(--ink-2); text-align: center; }
.pod-wait i { display: block; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; border: 1.5px solid rgba(140, 100, 40, .25); border-top-color: #A9721C; animation: pod-spin 1.1s linear infinite; }
@keyframes pod-spin { to { transform: rotate(360deg); } }

/* ---------------- smaller screens ---------------- */
@media (max-width: 1400px) {
  .pod-root { --B: 18px; }
  .rail-chip { height: 46px; padding-right: 16px; }
  .rail-chip .ico { width: 34px; height: 34px; }
  .rail-chip .txt b { font-size: 15.5px; }
  .rail-lead { min-width: 214px; }
}
@media (max-height: 760px) {
  .pod-content { padding: 22px 22px 12px; }
  .cu-tile { padding: 11px 14px 11px 11px; grid-template-columns: 44px 1fr; }
  .cu-tile .glyph { width: 44px; height: 44px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-strip, .rail-chip { animation: none !important; }
}

/* gateway podiums (Round 2): libraries outside the basilica, opened in a new tab */
.pod-gateway .cu-url { grid-template-columns: 1fr; max-width: 640px; }
.pod-gateway .cu-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gw-tile { cursor: default; align-items: start; row-gap: 3px; }
.gw-tile:hover { transform: none; }
.gw-tile .pod-btn { grid-column: 2; justify-self: start; margin-top: 9px; padding: 8px 13px; font-size: 10.5px; }
/* "Also at": sister libraries under a real source's browser */
.pod-links {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 9px 2px 2px;
  border-top: 1px solid rgba(140, 100, 40, .25);
  font: 400 10.5px/1.4 var(--util); letter-spacing: .18em; text-transform: uppercase; color: #8C6A3A;
}
.pod-links a { font: 600 15px/1.2 var(--body); letter-spacing: .01em; text-transform: none; color: #2A1C10; text-decoration: none; border-bottom: 1px solid rgba(140, 100, 40, .35); }
.pod-links a:hover { border-color: #A9721C; color: #5A3A12; }