/* /glorious_maximvs - "The Atlas of the Arentus Empire". Imperial art direction: White-Gold limestone, Imperial
   crimson, gold leaf, porphyry, night blue (docs/design-briefs/glorious-maximus/CONCEPT.md). */
.gm {
  --ff-inscr: "Cinzel", "Forum", "Trajan Pro", serif;
  --ff-prose: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --gold: #d8b25e; --gold-hi: #f3d995; --gold-lo: #8a6a2c;
  --crimson: #8f1f1d; --porphyry: #3a1418; --limestone: #efe6d2; --ink: #2b2017; --night: #0b0f1c;
  --img: url('/img/glorious-maximus/');
  position: relative; color: var(--limestone); font-family: var(--ff-prose); background: #120c0a;
  overflow-x: clip;
}
/* The site sets overflow-x: hidden on html/body on small screens, which turns the body into a scroll container that
   never scrolls and breaks the sticky stage. clip clips the same way without creating a scroll container. */
html:has(.gm), body:has(.gm) { overflow-x: clip !important; overflow-y: visible !important; }
.gm :where(p, h1, h2, h3, ol) { margin: 0; }
.gm section { padding: 0; }

/* ── the stage: one sticky viewport over the atlas ─────────────────────── */
.gm-journey { position: relative; }
.gm-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0;
  background: #0e0b08 url('/img/glorious-maximus/tex-parchment.webp') center / 512px;
}
.gm-world {
  position: absolute; left: 0; top: 0; width: 1536px; height: 1024px;   /* sized by the script to cover the stage */
  transform-origin: 0 0; will-change: transform;   /* one stable layer; the script re-lays it out at rest for sharpness */
  contain: layout paint;
}
.gm-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.gm-map--night { opacity: 0; transition: opacity 1.2s ease; }
.gm.is-night .gm-map--night { opacity: 1; }
.gm-glint {   /* the light running over the gold leaf: a band slid by transform on its own layer, so the map never repaints */
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .9; overflow: hidden;
  -webkit-mask: var(--mask) center / 100% 100%; mask: var(--mask) center / 100% 100%;
}
.gm-glint::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; will-change: transform;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 170, .55) 50%, transparent 60%);
  animation: gm-glint 9s linear infinite;
}
@keyframes gm-glint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* the sky: cloud decks placed by the script with the camera (each its own layer, so the map never repaints for them) */
.gm-sky {
  position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; overflow: hidden; pointer-events: none;
  will-change: transform; opacity: calc(var(--skyo, 1) * var(--deck, .3));
}
.gm-sky--far { --deck: .26; } .gm-sky--near { --deck: .22; }
.gm-sky__drift { position: absolute; inset: 0; animation: gm-wind 260s linear infinite; will-change: transform; }
.gm-sky--near .gm-sky__drift { animation-duration: 170s; }
@keyframes gm-wind { from { transform: translateX(0); } to { transform: translateX(88%); } }   /* west wind, one period */
.gm-sky__drift img {
  position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.gm-sky__drift .gm-sky__shade { filter: brightness(0) blur(10px); opacity: .55; translate: 1.6% 2.6%; }   /* the clouds' shadow on the land */
.gm-weather { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes gm-drift { from { transform: translate3d(-2%, -1%, 0); } to { transform: translate3d(2%, 1%, 0); } }
.gm-far { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 8s ease-out; pointer-events: none; }
.gm-far.is-on { opacity: 1; transform: scale(1); }
.gm-arrows { transition: opacity 1s ease; }
.gm.is-marching .gm-arrows { opacity: 0; }
.gm-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(14, 8, 4, .75) 100%); }

/* region labels and arrows (the Muster). Labels and markers live in .gm-pins, above the map, not in the scaled world:
   the script sets the world's on-screen box (--tx --ty --ww --wh, px) and each pin places itself at its % of it */
.gm-pins, .gm-labels, .gm-markers { position: absolute; inset: 0; pointer-events: none; }
.gm-pins { --tx: 0; --ty: 0; --ww: 1536; --wh: 1024; z-index: 3; }   /* above the sky (1) and the weather (2) */
.gm-atmos { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }   /* clipped to the map by the script */
.gm-sky { z-index: 1; } .gm-weather { z-index: 2; } .gm-far, .gm-vignette { z-index: 4; }
.gm-label, .gm-marker, .gmt-tondo, .gm-life, .gmt-token { position: absolute; left: 0; top: 0; --at: translate(calc(var(--tx) * 1px + var(--x) * var(--ww) * .01px), calc(var(--ty) * 1px + var(--y) * var(--wh) * .01px)); }
.gm-label {
  transform: var(--at) translate(-50%, -50%);
  font: 500 italic clamp(10px, 1.1vw, 15px) / 1 var(--ff-inscr); letter-spacing: .28em; text-transform: uppercase;
  color: rgba(62, 36, 16, .82); text-shadow: 0 0 6px rgba(240, 220, 170, .7); white-space: nowrap; opacity: 0;
}
.gm-arrows, .gm-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gm-arrows > path { fill: none; stroke: #a3201c; stroke-width: .45; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 .25px rgba(255, 240, 200, .9)); }
.gm-route path { fill: none; stroke: var(--gold-hi); stroke-width: .35; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 .3px #2a1405); opacity: 0; }

/* markers: an ink sketch that gilds */
.gm-marker {
  width: 54px; height: 54px; margin: -47.5px 0 0 -27px;   /* the anchor (50%, 88%) sits on the point */
  transform: var(--at) scale(var(--ms, 1)); transform-origin: 27px 47.5px; display: grid; place-items: end center;
}
.gm-marker img { position: absolute; bottom: 0; left: 50%; max-width: 100%; max-height: 100%; transform: translateX(-50%); }
.gm-marker__gilt { opacity: 0; transition: opacity .9s ease; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
.gm-marker__ink { opacity: 0; transition: opacity .6s ease; }
.gm-marker.is-inked .gm-marker__ink { opacity: 1; }
.gm-marker.is-inked.is-gilded.is-gold .gm-marker__gilt { opacity: 1; }
.gm-marker.is-inked.is-gilded.is-gold .gm-marker__ink { opacity: 0; }
.gm-marker.is-sketch.is-inked::after {   /* still to be rebuilt: a dashed ring */
  content: ''; position: absolute; inset: 20% 4% -16%; border: 1.5px dashed rgba(70, 40, 20, .75); border-radius: 50%;
}
.gm-marker__name {
  position: absolute; top: 102%; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 600 11px / 1.2 var(--ff-inscr); letter-spacing: .08em; color: #2a170b; text-shadow: 0 0 4px #f2e3bf, 0 0 8px #f2e3bf;
  opacity: 0; transition: opacity .4s;
}
.gm-marker.is-active .gm-marker__name, .gm.is-explore .gm-marker__name { opacity: 1; }
.gm-marker.is-active { --ms: 1.35; }
.gm-marker--city .gm-marker__ring {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(143, 31, 29, .55), 0 0 18px rgba(255, 210, 120, .6);
  opacity: 0; transition: opacity .6s;
}
.gm-marker--city.is-inked .gm-marker__ring { opacity: 1; }
.gm-marker.is-edge::before {   /* Akavir: off the map, an arrow to the east */
  content: '➝'; position: absolute; left: 100%; bottom: 30%; color: var(--crimson); font-size: 22px; opacity: .85;
}
/* the living reconstruction: painted pieces that grow with the map (unlike the markers), shown once the camera is close */
.gm-life {
  width: 120px; opacity: 0; visibility: hidden; transition: opacity .8s, visibility .8s; z-index: 0; pointer-events: none;
  transform: var(--at) translate(-50%, -82%) scale(clamp(.24, calc(var(--zoom, 1) * .19), .78)); transform-origin: 50% 82%;
}
.gm.is-close .gm-life, .gm.is-command .gm-life { opacity: 1; visibility: visible; pointer-events: auto; }
.gm-life img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 3px rgba(30, 15, 5, .45)); }
.gm-life[data-anim="swing"] img { transform-origin: 40% 90%; animation: gm-crane 9s ease-in-out infinite alternate; }
@keyframes gm-crane { 0%, 20% { rotate: -2.5deg; } 80%, 100% { rotate: 2.5deg; } }
.gm-life[data-anim="sway"] img { animation: gm-sway 4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes gm-sway { from { skew: -1deg 0deg; } to { skew: 1deg 0deg; } }
.gm-life[data-anim="fire"] img { animation: gm-flare 1.3s steps(3) infinite alternate; }
@keyframes gm-flare { from { filter: drop-shadow(0 3px 3px rgba(30, 15, 5, .45)) brightness(1); } to { filter: drop-shadow(0 0 10px rgba(255, 140, 40, .8)) brightness(1.15); } }
.gm-life__smoke {   /* a wisp rising and widening */
  position: absolute; left: 58%; top: 18%; width: 26%; height: 40%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse, rgba(90, 85, 80, .55), transparent 70%); filter: blur(4px); animation: gm-wisp 5s ease-out infinite;
}
.gm-life__smoke + .gm-life__smoke { animation-delay: -2.5s; left: 52%; }
.gm-life[data-anim="fire"] .gm-life__smoke { background: radial-gradient(ellipse, rgba(60, 50, 45, .65), transparent 70%); }
@keyframes gm-wisp { 0% { opacity: 0; transform: translateY(0) scale(.5); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-120%) translateX(20%) scale(1.6); } }
.gm-life::after {   /* the line of the Chronicle */
  content: attr(data-note); position: absolute; left: 50%; bottom: 100%; width: 240px; padding: 8px 11px; margin-bottom: 6px;
  transform: translateX(-50%) scale(calc(1 / clamp(.24, calc(var(--zoom, 1) * .19), .78))); transform-origin: 50% 100%;
  font: italic 500 14px / 1.35 var(--ff-prose); color: #2b1a0c; text-align: center; pointer-events: none;
  background: url('/img/glorious-maximus/tex-parchment.webp') center / 300px; border: 1px solid var(--gold-lo); box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .3s;
}
.gm-life:hover::after { opacity: 1; }
/* a dragon crossing the province: a dark shape high over the map, its blurred shadow on the land (screen space) */
.gm-dragon { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.gm-dragon svg { display: block; width: 100%; height: auto; overflow: visible; }
.gm-dragon svg path { fill: rgba(34, 24, 20, .9); stroke: #4a382c; stroke-width: 1; }
.gm-dragon svg .gm-dragon__bone { fill: none; stroke: #7a5e46; stroke-width: 1.6; stroke-linecap: round; }
.gm-dragon:not(.gm-dragon--shadow) { filter: drop-shadow(0 0 1px rgba(255, 230, 190, .35)); }
.gm-dragon--shadow svg .gm-dragon__bone { stroke: none; }
.gm-dragon { aspect-ratio: 220 / 180; }
.gm-dragon__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gm-dragon__img--b { animation: gm-frames .9s steps(1) infinite; }   /* the two painted wing poses, alternating */
.gm-dragon__img:not(.gm-dragon__img--b) { animation: gm-frames .9s steps(1) infinite reverse; }
@keyframes gm-frames { 0% { opacity: 0; } 50% { opacity: 1; } }
.gm-dragon--shadow .gm-dragon__img { filter: brightness(0); }
/* the painted wingbeat: eight poses in a strip, stepped through once per flap (--flap); the shadow beats with it */
.gm-dragon__beat { position: absolute; inset: 0; background: 0 0 / 800% 100% no-repeat; animation: gm-beat var(--flap, .85s) steps(8) infinite; }
@keyframes gm-beat { to { background-position: calc(800% / 7) 0; } }
.gm-dragon--shadow .gm-dragon__beat { filter: brightness(0); }
.gm-dragon--shadow { z-index: 2; opacity: .32; filter: blur(7px); }
.gm-dragon--shadow svg path { fill: #000; stroke: none; }
.gm-dragon__wing { transform-box: fill-box; animation: gm-wingbeat .9s ease-in-out infinite alternate; }
.gm-dragon__wing--a { transform-origin: 100% 100%; } .gm-dragon__wing--b { transform-origin: 100% 0%; }
@keyframes gm-wingbeat { from { scale: 1 1; } to { scale: .92 .35; } }
/* sites, wonders and travellers (js/glorious-maximus-life.js): each its own size (--s), some alive */
.gm-life { width: calc(120px * var(--s, 1)); }
.gm-traveller { z-index: 1; }
/* travellers and wonders read as pieces on the table, not terrain: they keep a readable size from the first view and
   grow less steeply than the land (--ls), and their notes counter-scale with them */
.gm-traveller, .gm-wonder { --ls: clamp(.62, calc(var(--zoom, 1) * .36), 1.2); transform: var(--at) translate(-50%, -82%) scale(var(--ls)); }
.gm-traveller::after, .gm-wonder::after { transform: translateX(-50%) scale(calc(1 / var(--ls))); }
.gm-traveller img, .gm-wonder img { filter: drop-shadow(0 3px 2px rgba(20, 10, 4, .55)) contrast(1.05) saturate(1.08); }
.gm-traveller img { transition: transform .4s; }
.gm-life[data-anim="circle"] img { animation: gm-circle 26s linear infinite; }
@keyframes gm-circle { to { rotate: 360deg; } }
.gm-life[data-anim="bob"] img { animation: gm-bob-whale 9s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes gm-bob-whale { 0%, 100% { opacity: 0; translate: 0 18%; } 25%, 60% { opacity: 1; translate: 0 0; } 75% { opacity: .2; translate: 0 12%; } }
.gm-life[data-anim="flock"] img { animation: gm-flock 40s linear infinite; }
@keyframes gm-flock { 0% { translate: -160% 40%; opacity: 0; } 8%, 92% { opacity: 1; } 100% { translate: 320% -60%; opacity: 0; } }
.gm-life[data-anim="glow"] img { animation: gm-glow-life 3s ease-in-out infinite alternate; }
@keyframes gm-glow-life { from { filter: drop-shadow(0 3px 3px rgba(30, 15, 5, .45)); } to { filter: drop-shadow(0 0 12px rgba(255, 235, 170, .95)); } }
.gm-life[data-anim="scuttle"] img { animation: gm-scuttle 5s steps(10) infinite alternate; }
@keyframes gm-scuttle { from { translate: -12% 0; } to { translate: 12% 0; } }
.gm-wonder[data-lit] { cursor: pointer; }
.gm-wonder.is-lit img { filter: drop-shadow(0 0 14px rgba(120, 200, 255, .95)); }
.gm-wonder[data-lit]:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.gm-life:hover img { filter: drop-shadow(0 0 6px rgba(255, 220, 140, .9)); }
@media (prefers-reduced-motion: reduce) { .gm-life img, .gm-life__smoke { animation: none !important; } }

/* the Imperial City's builds stand under one marker until the camera comes close; hidden ones only in the editor */
.gm-marker.is-city, .gm-marker.is-hidden { display: none; }
.gm.is-zoomed .gm-marker.is-city:not(.is-hidden), .gm.is-editing .gm-marker.is-city, .gm.is-editing .gm-marker.is-hidden { display: grid; }
.gm.is-zoomed .gm-marker--city, .gm.is-editing .gm-marker--city { display: none; }

/* ── the owner's map editor (js/creator-map-editor.js) ────────────────── */
.gm-edit-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 50; padding: .7em 1.2em; cursor: pointer;
  font: 600 13px / 1 var(--ff-inscr); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi);
  background: rgba(30, 14, 12, .92); border: 1px solid var(--gold-lo); border-radius: 3px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.gm-edit-toggle:hover { border-color: var(--gold); }
.gm.is-editing .gm-edit-toggle, .gm.is-editing .gm-steps, .gm.is-editing .gm-sky, .gm.is-editing .gm-weather, .gm.is-editing .gm-far, .gm.is-editing .gm-route { display: none; }
.gm.is-editing .gm-stage { position: fixed; inset: 0; height: auto; z-index: 10000; cursor: grab; touch-action: none; }
.gm.is-editing .gm-stage:active { cursor: grabbing; }
.gm.is-editing .gm-stage img { -webkit-user-drag: none; user-select: none; }
html.gm-editing-page, html.gm-editing-page body { overflow: hidden !important; }   /* after the html:has(.gm) rule above */
.gm.is-editing.is-adding .gm-stage { cursor: crosshair; }
.gm.is-editing .gm-label { opacity: .55 !important; }
.gm.is-editing .gm-marker { cursor: move; pointer-events: auto; }
.gm.is-editing .gm-marker__name { opacity: 1; }
.gm.is-editing .gm-marker.is-hidden { opacity: .4; }
.gm.is-editing .gm-marker.is-city .gm-marker__name::before { content: '◆ '; color: var(--crimson); }
.gm-marker.is-selected { --ms: 1.4; z-index: 2; }
.gm-marker.is-selected .gm-marker__name { color: #fff3d0; text-shadow: 0 0 4px #5a1210, 0 0 9px #5a1210; }
.gme-bar, .gme-panel {
  position: absolute; z-index: 3; cursor: default; color: var(--limestone); font: 15px / 1.35 var(--ff-prose);
  background: rgba(24, 12, 10, .94); border: 1px solid var(--gold-lo); box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.gme-bar { left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; border-radius: 3px; }
.gme-title { font: 600 14px / 1 var(--ff-inscr); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); margin-right: 6px; }
.gme-status { flex: 1 1 220px; font-style: italic; opacity: .8; font-size: 14px; }
.gme-btn {
  padding: .45em .9em; cursor: pointer; font: 600 12px / 1.1 var(--ff-inscr); letter-spacing: .08em; text-transform: uppercase;
  color: var(--limestone); background: rgba(255, 255, 255, .04); border: 1px solid rgba(216, 178, 94, .45); border-radius: 2px;
}
.gme-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-hi); }
.gme-btn:disabled { opacity: .45; cursor: default; }
.gme-btn--main { background: var(--crimson); border-color: var(--gold); color: #fff3d0; }
.gme-zoom { width: 2.2em; padding-inline: 0; font-size: 15px; }
.gme-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--gold); font: italic 14px / 1.2 var(--ff-prose); text-decoration: underline; text-underline-offset: 3px; }
.gme-danger { color: #e0705f; }
.gme-panel {
  right: 12px; top: 72px; bottom: 12px; width: min(340px, calc(100% - 24px)); overflow-y: auto; padding: 16px 18px; border-radius: 3px;
  display: flex; flex-direction: column; gap: 11px;
}
.gme-panel[hidden] { display: none; }
.gme-panel h3 { font: 600 16px / 1.25 var(--ff-inscr); color: var(--gold-hi); letter-spacing: .05em; padding-right: 26px; }
.gme-field { display: flex; flex-direction: column; gap: 4px; }
.gme-field > span { font: 600 11px / 1 var(--ff-inscr); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.gme-field input, .gme-field select {
  width: 100%; box-sizing: border-box; padding: 7px 9px; font: 15px / 1.2 var(--ff-prose); color: var(--limestone);
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(216, 178, 94, .35); border-radius: 2px;
}
.gme-field select option { background: #1e0f0c; }
.gme-styles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.gme-style { padding: 3px; cursor: pointer; background: rgba(0, 0, 0, .3); border: 1px solid transparent; border-radius: 2px; aspect-ratio: 1; }
.gme-style img { width: 100%; height: 100%; object-fit: contain; }
.gme-style.is-on { border-color: var(--gold); background: rgba(143, 31, 29, .45); }
.gme-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.gme-check input { accent-color: var(--crimson); width: 16px; height: 16px; }
.gme-acts { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.gme-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--gold); font-size: 24px; line-height: 1; cursor: pointer; }
@media (max-width: 820px) {
  .gme-panel { top: auto; bottom: 0; right: 0; left: 0; width: auto; max-height: 55%; border-radius: 0; }
}

/* ── the steps that scroll over the stage ─────────────────────────────── */
.gm-steps { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.gm-step { min-height: 140vh; display: flex; align-items: center; padding: 10vh max(16px, 5vw); }
.gm-step > * { pointer-events: auto; }
.gm-step--proclamation { min-height: 120vh; flex-direction: column; justify-content: center; gap: 4vh; }
.gm-band {
  text-align: center; padding: 2.2rem clamp(1.2rem, 4vw, 4.5rem) 1.8rem; max-width: min(1240px, 94vw);
  background: url('/img/glorious-maximus/porphyry-band.webp') center / cover; border-block: 3px solid var(--gold-lo);
  box-shadow: 0 0 0 1px rgba(243, 217, 149, .35) inset, 0 30px 60px rgba(0, 0, 0, .55);
}
.gm-band__frame { font: italic 600 clamp(1rem, 1.6vw, 1.3rem) / 1.4 var(--ff-prose); color: #fbe9c4; letter-spacing: .03em; text-shadow: 0 1px 2px #000; }
.gm-band__name {
  font: 600 clamp(2.2rem, 5vw, 4.8rem) / 1.05 var(--ff-inscr); letter-spacing: .12em; margin: .6rem 0 .5rem;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
.gm-band__sub { font: 600 clamp(.8rem, 1.2vw, 1rem) / 1.3 var(--ff-inscr); letter-spacing: .3em; text-transform: uppercase; color: #fbe9c4; text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .8); }
.gm-cue { font: 500 .8rem / 1 var(--ff-inscr); letter-spacing: .3em; text-transform: uppercase; color: #3b2412; text-shadow: 0 0 6px #f0e0bc; }
.gm-step--muster, .gm-step--works { justify-content: center; align-items: flex-end; padding-bottom: 14vh; }
.gm-caption, .gm-counter {
  font: 600 clamp(1rem, 2vw, 1.5rem) / 1.2 var(--ff-inscr); letter-spacing: .22em; text-transform: uppercase;
  padding: .8rem 1.6rem; background: rgba(40, 14, 16, .82); border: 1px solid var(--gold-lo); color: var(--gold-hi);
}
.gm-step--works { flex-direction: column; align-items: center; justify-content: flex-end; gap: 1.2rem; }
.gm-counter { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; justify-content: center; }
.gm-counter__n { font-size: 1.6em; color: var(--gold-hi); }
.gm-counter__l { font-size: .62em; letter-spacing: .26em; color: #e7d3b0; }
.gm-counter__sep { color: var(--gold-lo); }
.gm-btn {
  font: 600 .9rem / 1 var(--ff-inscr); letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
  color: #fff4d6; padding: 1rem 1.8rem; background: linear-gradient(180deg, #a42a23, #6e1513); border: 1px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(143, 31, 29, .35), 0 10px 24px rgba(0, 0, 0, .5);
}
.gm-btn:hover, .gm-btn:focus-visible { filter: brightness(1.15); }

/* the Scroll's memory: the ink draft (a canvas) over the painted province, holes cut where his life has coloured it in */
.gm-ink {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none;
  opacity: var(--ink-o, 1); transition: opacity 2.4s ease;
}
.gm:is(.is-command, .is-explore, .is-editing) .gm-ink { opacity: 0; }
/* each milestone reached: his seal is pressed on it */
.gm-stamp {
  position: absolute; left: 0; top: 0; z-index: 5; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none;
  --at: translate(calc(var(--tx) * 1px + var(--x) * var(--ww) * .01px), calc(var(--ty) * 1px + var(--y) * var(--wh) * .01px));
  transform: var(--at); animation: gm-stamp 3.2s cubic-bezier(.2, .7, .2, 1) forwards;
}
.gm-stamp img { width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.gm-stamp::after {   /* the dust it knocks up */
  content: ''; position: absolute; inset: -40%; border-radius: 50%; border: 2px solid rgba(243, 217, 149, .7);
  opacity: 0; animation: gm-stamp-ring 1.1s .32s ease-out forwards;
}
@keyframes gm-stamp {
  0% { transform: var(--at) scale(2.8) rotate(-24deg); opacity: 0; }
  12% { opacity: 1; }
  20% { transform: var(--at) scale(.9) rotate(4deg); }
  28%, 78% { transform: var(--at) scale(1) rotate(0); opacity: 1; }
  100% { transform: var(--at) scale(.8) translateY(-26px); opacity: 0; }
}
@keyframes gm-stamp-ring { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.5); } }
/* his standard on the gold road */
.gm-legion {
  position: absolute; left: 0; top: 0; z-index: 4; width: 34px; margin: -64px 0 0 -17px; pointer-events: none;
  --at: translate(calc(var(--tx) * 1px + var(--x, 0) * var(--ww) * .01px), calc(var(--ty) * 1px + var(--y, 0) * var(--wh) * .01px));
  transform: var(--at); opacity: 0; transition: opacity .8s;
}
.gm-legion img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; animation: gm-legion-sway 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); }
@keyframes gm-legion-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-2px); } }
.gm.is-marching .gm-legion.is-on { opacity: 1; }
.gm:is(.is-command, .is-editing) .gm-legion { display: none; }

/* the marble plaque of each milestone; its numeral stands huge beside it on the map */
.gm-step--stop { position: relative; justify-content: flex-end; min-height: 170vh; }
.gm-step--stop::before {
  content: attr(data-numeral); position: absolute; left: 4vw; top: calc(50% + 12vh); pointer-events: none;   /* low, clear of the milestone */
  font: 600 min(20vw, 38vh) / 1 var(--ff-inscr); letter-spacing: .02em; color: transparent;
  -webkit-text-stroke: 2px rgba(243, 217, 149, .6); filter: drop-shadow(0 0 14px rgba(20, 8, 4, .6));
  opacity: 0; transform: translate(-3vw, 0); transition: opacity 1.4s ease, transform 2.2s cubic-bezier(.2, .7, .2, 1);
}
.gm-step--stop.is-current::before { opacity: 1; transform: translate(0, 0); }
@media (max-width: 820px) { .gm-step--stop::before { top: 12vh; font-size: 28vw; } }

/* the Emperor, as the Scroll remembers him: a sticky scene inside its step, faded in and out by --ep (0..1, the step's
   way through the screen: js/glorious-maximus.js) */
.gm-step--emperor { display: block; min-height: 0; height: 230vh; padding: 0; }
.gm-emperor {
  --ep: .5; --fade: clamp(0, min(calc((var(--ep) - .2) * 7), calc((.8 - var(--ep)) * 7)), 1);
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none;
}
.gm-emperor__veil { position: absolute; inset: 0; opacity: var(--fade);
  background: radial-gradient(ellipse 60% 70% at 72% 55%, rgba(110, 22, 20, .55), transparent 70%), radial-gradient(ellipse at 50% 50%, rgba(14, 6, 5, .62), rgba(6, 3, 2, .92)); }
.gm-emperor__banner {   /* his banner hangs behind him: crimson silk, gold border, the double lozenge, a swallowtail */
  position: absolute; right: 11vw; top: 0; width: min(26vw, 380px); height: 84vh; opacity: var(--fade);
  transform: translateY(calc((var(--ep) - .5) * -10%));
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 18%, transparent 82%, rgba(0, 0, 0, .35)),
              linear-gradient(#d8b25e, #d8b25e) left / 6px 100% no-repeat, linear-gradient(#d8b25e, #d8b25e) right / 6px 100% no-repeat,
              repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 3px, transparent 3px 9px), linear-gradient(#7d1717, #5a0f10 70%, #3e0a0b);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%); box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
}
.gm-emperor__banner span, .gm-emperor__banner span::before {   /* the double lozenge, in gold */
  position: absolute; left: 50%; top: 46%; width: 40%; aspect-ratio: 1; border: 4px solid #d8b25e; transform: translate(-50%, -50%) rotate(45deg) scaleY(1.3);
}
.gm-emperor__banner span::before { content: ''; width: 46%; top: 50%; border-width: 3px; transform: translate(-50%, -50%); }
.gm-emperor__img {
  position: absolute; right: 4vw; bottom: 0; height: 96vh; width: auto; max-width: 56vw; object-fit: contain; object-position: 50% 100%;
  opacity: var(--fade); transform: translateY(calc((.5 - var(--ep)) * 14%)) scale(calc(1.04 - var(--fade) * .04)); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(#000 74%, transparent 98%); mask-image: linear-gradient(#000 74%, transparent 98%);
  filter: drop-shadow(0 0 40px rgba(255, 190, 110, .18));
}
.gm-emperor__dust { position: absolute; inset: 0; opacity: var(--fade); }
.gm-emperor__dust i {
  position: absolute; bottom: -4%; width: 4px; height: 4px; border-radius: 50%; background: #ffe2a0; box-shadow: 0 0 8px #ffcf70;
  animation: gm-dust 9s linear infinite;
}
.gm-emperor__dust i:nth-child(1) { left: 58%; animation-delay: -1s; } .gm-emperor__dust i:nth-child(2) { left: 66%; animation-delay: -3.4s; animation-duration: 11s; }
.gm-emperor__dust i:nth-child(3) { left: 74%; animation-delay: -5.2s; } .gm-emperor__dust i:nth-child(4) { left: 82%; animation-delay: -7s; animation-duration: 12s; }
.gm-emperor__dust i:nth-child(5) { left: 88%; animation-delay: -2.2s; width: 3px; height: 3px; } .gm-emperor__dust i:nth-child(6) { left: 62%; animation-delay: -8.1s; width: 3px; height: 3px; }
.gm-emperor__dust i:nth-child(7) { left: 70%; animation-delay: -4.4s; animation-duration: 13s; } .gm-emperor__dust i:nth-child(8) { left: 79%; animation-delay: -6.3s; width: 5px; height: 5px; }
@keyframes gm-dust { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(-40px, -104vh); opacity: 0; } }
.gm-emperor__text {
  position: absolute; left: 7vw; top: 50%; width: min(560px, 42vw); pointer-events: auto;
  opacity: var(--fade); transform: translateY(calc(-50% + (var(--ep) - .5) * -60px));
}
.gm-emperor__kicker { margin: 0; font: italic 500 1.15rem / 1.3 var(--ff-prose); color: #e9cf98; text-shadow: 0 1px 3px #000; }
.gm-emperor__name {
  margin: .5rem 0 .6rem; font: 600 clamp(2.2rem, 4.6vw, 4.4rem) / 1.02 var(--ff-inscr); letter-spacing: .1em;
  background: linear-gradient(180deg, #fff1c8, var(--gold-hi) 30%, var(--gold) 62%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .7));
}
.gm-emperor__style { margin: 0 0 1.2rem; font: 600 .82rem / 1.5 var(--ff-inscr); letter-spacing: .26em; text-transform: uppercase; color: #f1dcb4; text-shadow: 0 1px 3px #000; }
.gm-emperor__line { margin: 0 0 1.4rem; font: 500 clamp(1.08rem, 1.5vw, 1.3rem) / 1.6 var(--ff-prose); color: #f6ead0; text-shadow: 0 1px 3px #000; }
.gm-emperor__titles { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.gm-emperor__titles li { display: flex; align-items: center; gap: .7rem; font: 600 .74rem / 1.3 var(--ff-inscr); letter-spacing: .2em; text-transform: uppercase; color: #e2c895; }
.gm-emperor__titles li::before { content: ''; width: 9px; height: 9px; flex: none; border: 1.5px solid var(--gold); transform: rotate(45deg) scaleY(1.3); box-shadow: inset 0 0 0 2px rgba(143, 31, 29, .9); }
@media (max-width: 820px) {
  .gm-step--emperor { height: 200vh; }
  .gm-emperor__banner { right: 50%; transform: translateX(50%); width: 62vw; height: 70vh; }
  .gm-emperor__img { right: 50%; height: 64vh; max-width: 96vw; transform: translateX(50%); }
  .gm-emperor__text { left: 16px; right: 16px; top: 4vh; width: auto; transform: none; }
  .gm-emperor__line { font-size: 1rem; }
  .gm-emperor__titles { display: none; }
}
.gm-plaque {
  width: min(560px, 100%); padding: 1.6rem 1.7rem 1.4rem; color: var(--ink);
  background: url('/img/glorious-maximus/tex-marble.webp') center / 520px; border: 2px solid var(--gold-lo);
  box-shadow: 0 0 0 5px rgba(243, 217, 149, .25), 0 0 0 6px var(--gold-lo), 0 40px 80px rgba(0, 0, 0, .6);
  position: relative;
}
.gm-plaque__stop { font: 600 .74rem / 1.4 var(--ff-inscr); letter-spacing: .2em; text-transform: uppercase; color: #6b4a1e; display: flex; align-items: center; gap: .6rem; }
.gm-milestone {
  display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .4rem; font-size: 1rem; letter-spacing: .06em; color: #fff4d6;
  background: linear-gradient(180deg, #a42a23, #6e1513); border: 1px solid var(--gold);
}
.gm-plaque__title { font: 600 clamp(1.5rem, 2.6vw, 2.1rem) / 1.12 var(--ff-inscr); letter-spacing: .05em; margin: .8rem 0 .25rem; color: #2a170b; }
.gm-plaque__sub { font: italic 500 1.12rem / 1.35 var(--ff-prose); color: #5a3b1c; }
.gm-plaque__note { font: italic 600 1.15rem / 1.4 var(--ff-prose); color: var(--crimson); margin-top: .9rem; }
.gm-plaque__story { font: 500 1.08rem / 1.55 var(--ff-prose); margin-top: .6rem; color: #2d2116; }

/* stone by stone: the drawing builds into his screenshot */
.gm-build { position: relative; margin: 1rem 0 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--gold-lo); background: #e9dcbf; }
.gm-build img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-build__ink { filter: grayscale(1) contrast(2.1) brightness(1.35) sepia(.85) hue-rotate(-8deg); mix-blend-mode: multiply; opacity: .95; }
.gm-build__stone { clip-path: inset(100% 0 0 0); }
.gm-build.is-built .gm-build__stone { clip-path: inset(0 0 0 0); }
.gm-build__scaffold {
  position: absolute; inset: 0; pointer-events: none; opacity: .75; transition: opacity 1s .8s;
  background:
    repeating-linear-gradient(90deg, transparent 0 11%, rgba(92, 60, 28, .7) 11% 11.6%),
    repeating-linear-gradient(0deg, transparent 0 16%, rgba(92, 60, 28, .55) 16% 16.6%);
}
.gm-build.is-built .gm-build__scaffold { opacity: 0; }

.gm-path { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem .4rem; counter-reset: gm; }
.gm-path li {
  counter-increment: gm; font: 600 .7rem / 1.3 var(--ff-inscr); letter-spacing: .1em; text-transform: uppercase; color: #3a2512;
  padding: .32rem .6rem; border: 1px solid rgba(138, 106, 44, .6); background: rgba(255, 248, 230, .55);
}
.gm-path li::before { content: counter(gm, upper-roman) ' · '; color: var(--crimson); }
.gm-film { display: flex; gap: .4rem; overflow-x: auto; margin-top: .9rem; padding-bottom: .3rem; scrollbar-width: thin; }
.gm-film__shot { flex: 0 0 auto; width: 92px; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--gold-lo); background: #000; cursor: zoom-in; }
.gm-film__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-film__shot:hover, .gm-film__shot:focus-visible { outline: 2px solid var(--crimson); outline-offset: 1px; }
.gm-plaque__foot { margin-top: 1rem; display: grid; gap: .6rem; font: 500 .95rem / 1.4 var(--ff-prose); color: #4a321a; }
.gm-order { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; background: rgba(255, 248, 230, .7); border: 1px dashed rgba(138, 106, 44, .8); }
.gm-order__seal { flex: 0 0 34px; height: 34px; background: url('/img/glorious-maximus/wax-seal.webp') center / contain no-repeat; }
.gm-order__cmd { flex: 1; min-width: 0; font: 600 .78rem / 1.3 ui-monospace, Consolas, monospace; color: #3b2412; overflow-wrap: anywhere; }
.gm-order__copy { font: 600 .7rem / 1 var(--ff-inscr); letter-spacing: .14em; text-transform: uppercase; padding: .5rem .7rem; border: 1px solid var(--gold-lo); background: #6e1513; color: #fff4d6; cursor: pointer; }
.gm-plaque__link { font: 600 .78rem / 1 var(--ff-inscr); letter-spacing: .16em; text-transform: uppercase; color: var(--crimson); text-decoration: none; }
.gm-plaque__soon { font: italic 600 .95rem / 1 var(--ff-prose); color: #7a5a2c; }

/* lightbox */
.gm-lightbox { padding: 0; border: 2px solid var(--gold-lo); background: #0d0907; max-width: min(1400px, 94vw); color: var(--limestone); }
.gm-lightbox::backdrop { background: rgba(8, 5, 3, .88); }
.gm-lightbox img { display: block; max-width: 100%; max-height: 82vh; }
.gm-lightbox__cap { padding: .7rem 1rem; font: italic 500 1.05rem / 1.4 var(--ff-prose); }
.gm-lightbox__close { position: absolute; top: .4rem; right: .5rem; width: 2.4rem; height: 2.4rem; font-size: 1.6rem; background: rgba(0, 0, 0, .6); color: #fff; border: 1px solid var(--gold-lo); cursor: pointer; }

:where(.gm) :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ── the portfolio's own cursors: a gilded Imperial set (img/glorious-maximus/cursors), over the site's themed sets ── */
html:has(.gm) *, html:has(.gm) *::before, html:has(.gm) *::after { cursor: url('/img/glorious-maximus/cursors/arrow.png') 1 1, url('/img/glorious-maximus/cursors/arrow.svg') 3 2, default; }
html:has(.gm) :is(a, button, [role="button"], label[for], select, summary, .gm-marker, .gm-marker *, .gmt-tondo, .gmt-tondo *, .gm-wonder[data-lit], .gm-wonder[data-lit] *, .gmt-entry, .gmt-entry *) {
  cursor: url('/img/glorious-maximus/cursors/pointer.png') 12 1, url('/img/glorious-maximus/cursors/pointer.svg') 12 2, pointer;
}
html:has(.gm) :is(input[type="text"], input[type="search"], input[type="number"], input:not([type]), textarea, [contenteditable="true"]) { cursor: url('/img/glorious-maximus/cursors/text.png') 22 22, url('/img/glorious-maximus/cursors/text.svg') 16 16, text; }
html:has(.gm) :is(.gm-film__shot, .gm-film__shot *, .gmt-chart, .gmt-chart *) { cursor: url('/img/glorious-maximus/cursors/zoom.png') 15 15, url('/img/glorious-maximus/cursors/zoom.svg') 13 13, zoom-in; }
.gm:is(.is-command, .is-editing) .gm-stage, .gm:is(.is-command, .is-editing) .gm-stage :is(.gm-world, .gm-world *, .gm-sky, .gm-sky *, .gm-pins, .gm-weather, .gmt-ink, .gmt-frame) {
  cursor: url('/img/glorious-maximus/cursors/grab.png') 22 22, url('/img/glorious-maximus/cursors/grab.svg') 16 16, grab;
}
.gm:is(.is-command, .is-editing) .gm-stage:active, .gm:is(.is-command, .is-editing) .gm-stage:active :is(.gm-world, .gm-world *, .gm-sky, .gm-sky *, .gm-pins, .gm-weather, .gmt-ink, .gmt-frame) {
  cursor: url('/img/glorious-maximus/cursors/grabbing.png') 22 22, url('/img/glorious-maximus/cursors/grabbing.svg') 16 16, grabbing;
}
.gm.is-editing .gm-marker, .gm.is-editing .gm-marker * { cursor: url('/img/glorious-maximus/cursors/grab.png') 22 22, url('/img/glorious-maximus/cursors/grab.svg') 16 16, move; }
.gm.is-editing.is-adding .gm-stage, .gm.is-editing.is-adding .gm-stage * { cursor: crosshair; }

/* the map's own layers for the War Table: lit windows at night, the City plan up close, a collection's gold road */
.gm-map--lights { opacity: 0; mix-blend-mode: screen; transition: opacity 2s; pointer-events: none; }
.gm.is-night .gm-map--lights { opacity: .9; }
.gm-cityplan {
  position: absolute; left: 52.61%; top: 29.3%; width: 5.2%; height: 7.8%; border-radius: 50%; pointer-events: none;
  opacity: var(--plan, 0); visibility: hidden;
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 71%); mask: radial-gradient(circle, #000 60%, transparent 71%);
}
.gm-cityplan[src] { visibility: visible; }
.gm-world::after {   /* the visitor's own hour over the table: dawn gold, a long amber dusk, night blue (under the roads) */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2s, background 2s;
}
.gm-world > svg { z-index: 2; }
.gm.is-dawn .gm-world::after { opacity: 1; mix-blend-mode: soft-light; background: linear-gradient(160deg, rgba(255, 190, 140, .75), rgba(255, 225, 170, .35) 55%, rgba(120, 140, 200, .3)); }
.gm.is-dusk .gm-world::after { opacity: 1; mix-blend-mode: multiply; background: linear-gradient(200deg, rgba(255, 170, 90, .55), rgba(200, 110, 70, .45) 60%, rgba(90, 60, 110, .5)); }
.gm.is-night .gm-world::after { opacity: 1; mix-blend-mode: multiply; background: rgba(70, 90, 150, .35); }
.gm-croute { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.gm-croute path { fill: none; stroke: var(--gold-hi); stroke-width: 2.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #2a1405); opacity: 0; transition: opacity .8s; }
.gm.is-command .gm-croute { display: block; }
.gm-croute.is-on path { opacity: .95; }
/* seasons without a painted plate yet: the summer map graded (static filters - the world layer is drawn once) */
.gm.season-autumn.no-season-plate .gm-map:not(.gm-map--night):not(.gm-map--lights) { filter: sepia(.24) saturate(1.22) brightness(.97); }   /* (no hue-rotate: it turned the water teal) */
.gm.season-winter.no-season-plate .gm-map:not(.gm-map--night):not(.gm-map--lights) { filter: saturate(.48) brightness(1.1) contrast(.92) hue-rotate(6deg); }
.gm.season-spring.no-season-plate .gm-map:not(.gm-map--night):not(.gm-map--lights) { filter: saturate(1.14) brightness(1.03); }
.gm.season-winter .gm-world::before {   /* frost over the land */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 80% 60% at 50% 10%, rgba(240, 246, 255, .35), rgba(225, 235, 248, .12) 70%);
}
.gm.is-sepia .gm-map:not(.gm-map--lights) { filter: sepia(.75) saturate(.8) contrast(1.05); transition: filter 1.2s; }   /* Oblivion's cartographer map */

/* ── IV. the War Table: the hall on the page ──────────────────────────── */
.gm-table { position: relative; z-index: 2; overflow-x: clip; overflow-y: visible; padding: 16vh 0 16vh; background: #0b0705; perspective: 1600px; perspective-origin: 50% 30%; }
.gm-table::before {   /* the atlas above sinks into the hall's dark */
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 40vh; pointer-events: none;
  background: linear-gradient(rgba(11, 7, 5, 0), rgba(11, 7, 5, .8) 60%, #0b0705);
}
/* the room beyond the plate: the same hall out of focus, braziers' light, smoke and embers */
.gm-table__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* the command tent (his Emperor's Camp): crimson canvas in sewn panels, sagging between the poles; a valance of gold
   meander tabs along the top, crenellated like his; the legion's hangings; two lanterns. --bg-s: the scroll's slow push. */
.gm-tent { position: absolute; inset: 0; transform: scale(var(--bg-s, 1.08)); transform-origin: 50% 40%; }
.gm-tent__canvas, .gm-command-tent {
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255, 150, 70, .16), transparent 70%),                 /* lamplight on the cloth */
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .32) 0 2px, transparent 2px 9%, rgba(255, 210, 160, .05) 9% 9.6%, transparent 9.6% 18%),   /* sewn panels */
    repeating-linear-gradient(90deg, transparent 0 4.5%, rgba(0, 0, 0, .18) 6.5%, transparent 9%),        /* soft folds */
    linear-gradient(180deg, #2a0807 0%, #5c1210 22%, #6e1714 50%, #4a0e0c 80%, #1a0504 100%);
}
.gm-tent__canvas { position: absolute; inset: 0; }
.gm-tent__canvas::after {   /* the canvas sags between the poles: a darker swag under the valance */
  content: ''; position: absolute; left: 0; right: 0; top: 64px; height: 120px;
  background: radial-gradient(ellipse 30% 100% at 25% 0, rgba(0, 0, 0, .45), transparent 70%), radial-gradient(ellipse 30% 100% at 75% 0, rgba(0, 0, 0, .45), transparent 70%);
}
.gm-tent__valance {   /* gold meander on crimson tabs with a crenellated hem, as on his tent */
  position: absolute; left: 0; right: 0; top: 0; height: 86px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='86' viewBox='0 0 120 86'%3E%3Cpath d='M4 0H116V62H104V70H92V62H76V70H64V62H56V70H44V62H28V70H16V62H4Z' fill='%23731613' stroke='%23c99a4a' stroke-width='2.5'/%3E%3Cpath d='M22 50V14H98V44H40V26H80V34' fill='none' stroke='%23d9ae5c' stroke-width='5'/%3E%3C/svg%3E") 0 0 / 120px 86px repeat-x;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6));
}
.gm-tent__pole {   /* turned wooden poles with bronze bands */
  position: absolute; top: 0; bottom: 0; width: 22px;
  background: repeating-linear-gradient(180deg, transparent 0 140px, #b58a3e 140px 148px, transparent 148px 300px), linear-gradient(90deg, #1e0f06, #6a4322 40%, #8a5a2e 55%, #2a160a);
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
}
.gm-tent__pole--l { left: 7%; } .gm-tent__pole--r { right: 7%; }
.gm-table .gm-tent__pole { display: none; }   /* the painted tent has its own poles */
.gm-tent__banner { position: absolute; top: 74px; width: clamp(70px, 7vw, 120px); height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .65)) brightness(.9); transform-origin: 50% 0; animation: gm-banner 7s ease-in-out infinite alternate; }
.gm-tent__banner--l { left: calc(7% + 30px); } .gm-tent__banner--r { right: calc(7% + 30px); animation-delay: -3.5s; }
@keyframes gm-banner { from { rotate: -.6deg; } to { rotate: .6deg; } }
.gm-tent__lamp {   /* hanging lanterns: a warm pool of light, flickering */
  position: absolute; top: 18%; width: 36vw; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 190, 110, .32), rgba(255, 140, 60, .1) 40%, transparent 70%); animation: gm-fire 2.6s ease-in-out infinite alternate;
}
.gm-tent__lamp--l { left: -6vw; } .gm-tent__lamp--r { right: -6vw; animation-delay: -1.3s; }
.gm-table__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(#0b0705 0%, rgba(11, 7, 5, .2) 22%, rgba(11, 7, 5, .1) 60%, rgba(11, 7, 5, .85) 88%, #0b0705 100%),
    radial-gradient(ellipse 70% 60% at 50% 42%, transparent 40%, rgba(8, 4, 2, .75) 100%);
}
.gm-table__smoke {
  position: absolute; width: 70vw; height: 50vh; border-radius: 50%; filter: blur(40px); opacity: .22; mix-blend-mode: screen;
  background: radial-gradient(ellipse, rgba(200, 160, 120, .55), transparent 70%); animation: gm-smoke 38s ease-in-out infinite alternate;
}
.gm-table__smoke--a { left: -20vw; top: 8%; }
.gm-table__smoke--b { right: -25vw; top: 30%; animation-duration: 52s; animation-delay: -18s; }
@keyframes gm-smoke { from { transform: translateX(-6vw) scale(1); } to { transform: translateX(10vw) scale(1.2); } }
.gm-table__embers { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }

.gm-table__head { position: relative; z-index: 2; text-align: center; margin-bottom: clamp(-3rem, -4vw, -1rem); }
.gm-table__crest { position: relative; display: inline-grid; place-items: center; width: 92px; height: 92px; margin-bottom: .4rem; }
.gm-table__crest img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)); }
.gm-table__crest b { position: relative; top: -4px; font: 600 1.25rem / 1 var(--ff-inscr); color: var(--gold-hi); letter-spacing: .08em; text-shadow: 0 2px 4px #000; }
.gm-table__kicker { font: 600 .82rem / 1 var(--ff-inscr); letter-spacing: .4em; text-transform: uppercase; color: #f1dcb4; text-shadow: 0 1px 3px #000; }
.gm-table__title {
  margin: .7rem 0 0; font: 600 clamp(2rem, 5vw, 4.4rem) / 1.05 var(--ff-inscr); letter-spacing: .16em;
  background: linear-gradient(180deg, #fff1c8, var(--gold-hi) 30%, var(--gold) 60%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 24px rgba(255, 170, 70, .25));
}

/* the hall plate: its edges melt into the room; the camera comes down onto it as the page scrolls (script) */
.gm-table__hall {
  position: relative; z-index: 1; width: min(1560px, 112vw); margin: 0; left: 50%; translate: -50% 0; aspect-ratio: 1672 / 941;   /* centred by left + translate only: margin: auto shifted it right on wide screens */
  transform-origin: 50% 70%; transform: rotateX(var(--tilt, 0deg)) scale(var(--hs, 1));
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 7%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 7%, #000 88%, transparent);
  mask-composite: intersect;
}
.gm-table__room { display: block; width: 100%; height: 100%; }
.gm-table__top {   /* the whole 3:2 map laid on the tent's tabletop in perspective (sized and projected by the script, data-quad) */
  position: absolute; left: 0; top: 0; width: 600px; height: 400px; overflow: hidden; transform-origin: 0 0; visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(60, 30, 10, .6), inset 0 0 60px rgba(20, 8, 2, .5);
}
.gm-table__top.is-laid { visibility: visible; }
.gm-table__top img { display: block; width: 100%; height: 100%; object-fit: fill; filter: sepia(.12) brightness(.95); }
.gm-table__top::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 55%, rgba(30, 12, 4, .45)); }
.gm-table__pin { position: absolute; z-index: 1; width: 8px; height: 8px; margin: -4px; border-radius: 50%; border: 1px dashed rgba(60, 30, 10, .85); }
.gm-table__pin.is-gilded { border: 0; background: radial-gradient(circle, #fff3c4, var(--gold) 55%, transparent 70%); box-shadow: 0 0 8px 2px rgba(255, 200, 100, .55); animation: gm-pin 3s ease-in-out infinite alternate; }
@keyframes gm-pin { from { opacity: .65; } to { opacity: 1; } }
.gm-table__fire {   /* the braziers' light breathing over the hall */
  position: absolute; top: 12%; width: 22%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: var(--fire, 1);
  background: radial-gradient(circle, rgba(255, 160, 60, .5), rgba(255, 110, 30, .14) 45%, transparent 70%); animation: gm-fire 2.3s ease-in-out infinite alternate;
}
.gm-table__fire--l { left: 9%; } .gm-table__fire--r { right: 9%; animation-delay: -1.1s; }   /* over the tent's two braziers */
@keyframes gm-fire { 0% { scale: 1; filter: brightness(.85); } 40% { scale: 1.05; filter: brightness(1.1); } 70% { filter: brightness(.9); } 100% { scale: .98; filter: brightness(1); } }
.gm-table__invite {   /* the table itself is a way in: hover lights the map and names the command. Its box is the tabletop
                         quad's bounding box; the clip trims it to the quad itself (data-quad, in % of this box) */
  position: absolute; left: 24.56%; top: 35%; width: 51.19%; height: 30.8%; z-index: 2; padding: 0; border: 0; cursor: pointer; background: none;
  clip-path: polygon(7.21% 0, 93.46% 0, 100% 100%, 0 100%);
}
/* the glow is drawn by the projected map itself, so it lies exactly on the tabletop's edges */
.gm-table__top { transition: filter .5s; }
.gm-table__top::after { transition: box-shadow .5s, background-color .5s; }
.gm-table__hall:has(.gm-table__invite:is(:hover, :focus-visible)) .gm-table__top { filter: drop-shadow(0 0 14px rgba(255, 190, 90, .75)) brightness(1.1); }
.gm-table__hall:has(.gm-table__invite:is(:hover, :focus-visible)) .gm-table__top::after {
  background-color: rgba(255, 210, 120, .08);
  box-shadow: inset 0 0 0 2px rgba(255, 230, 170, .95), inset 0 0 44px rgba(255, 200, 110, .5);
}
.gm-table__invite span {
  display: inline-block; padding: .7rem 1.4rem; font: 600 .85rem / 1 var(--ff-inscr); letter-spacing: .26em; text-transform: uppercase; color: #fff4d6;
  background: rgba(40, 14, 16, .85); border: 1px solid var(--gold); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s;
}
.gm-table__invite:is(:hover, :focus-visible) span { opacity: 1; transform: none; }

/* the plaque below: the words, the census struck as gold coins, the three roads, the command */
.gm-table__band {
  position: relative; z-index: 2; width: min(1080px, 94vw); margin: clamp(-5rem, -5vw, -1.5rem) auto 0; padding: 4.4rem clamp(1.2rem, 4vw, 3.5rem) 4.6rem; text-align: center;   /* clear of the laurel trims */
  background: url('/img/glorious-maximus/porphyry-band.webp') center / cover; border-block: 3px solid var(--gold-lo);
  box-shadow: 0 0 0 1px rgba(243, 217, 149, .35) inset, 0 40px 80px rgba(0, 0, 0, .7), 0 0 60px rgba(255, 150, 60, .08);
}
.gm-table__sub { max-width: 50rem; margin: 0 auto; font: italic 500 clamp(1.08rem, 1.6vw, 1.32rem) / 1.5 var(--ff-prose); color: #fbe9c4; text-shadow: 0 1px 2px #000; }
.gm-census { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem clamp(1rem, 2.6vw, 2.2rem); margin: 1.7rem 0 1.4rem; }
.gm-census__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: .55rem; width: 6.6rem; }   /* coins in one row, labels hang below */
.gm-census__n {   /* an aureus: struck gold with a raised rim, the numeral cut into its face */
  margin: 0; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c9 0%, #f0cf7a 22%, #c9993d 55%, #8a6324 85%, #6b4a18 100%);
  box-shadow: inset 0 0 0 4px rgba(120, 80, 25, .7), inset 0 0 0 6px rgba(255, 236, 170, .55), inset 0 -6px 12px rgba(80, 50, 10, .5), 0 6px 14px rgba(0, 0, 0, .55);
}
.gm-census__n span { font: 700 clamp(.95rem, 1.5vw, 1.25rem) / 1 var(--ff-inscr); letter-spacing: .02em; color: #5c3b0c; text-shadow: 0 1px 0 rgba(255, 240, 190, .8), 0 -1px 0 rgba(60, 35, 5, .4); }
.gm-census__l { font: 600 .66rem / 1.3 var(--ff-inscr); letter-spacing: .2em; text-transform: uppercase; color: #f0dfbf; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .8); }
.gm-table__roads { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .8rem; margin: 0 0 1.6rem; font: 600 .78rem / 1.4 var(--ff-inscr); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.gm-table__roads > span[aria-hidden] { color: var(--gold-lo); }
.gm-table__road::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: .45rem; vertical-align: -3px; background: url('/img/glorious-maximus/wax-seal.webp') center / contain no-repeat; }
.gm-table__tools { margin-top: 1rem; font: italic 500 .98rem / 1.4 var(--ff-prose); color: rgba(251, 233, 196, .75); }
.gm-table__command { cursor: pointer; font-size: 1rem; padding: 1.1rem 2.4rem; }

/* ── IV. the War Table: command mode (the stage above, full screen) ── */
html.gm-command-page, html.gm-command-page body { overflow: hidden !important; }
.gm.is-command .gm-stage {   /* inside the command tent: the crimson canvas all round, lamplight pooling on the table */
  position: fixed; inset: 0; height: auto; z-index: 10000; cursor: grab; touch-action: none;
  background:
    radial-gradient(ellipse 70% 65% at 60% 52%, transparent 40%, rgba(10, 2, 2, .7) 100%),
    radial-gradient(ellipse 60% 55% at 60% 50%, rgba(255, 150, 70, .14), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .32) 0 2px, transparent 2px 9%, rgba(255, 210, 160, .05) 9% 9.6%, transparent 9.6% 18%),
    repeating-linear-gradient(90deg, transparent 0 4.5%, rgba(0, 0, 0, .18) 6.5%, transparent 9%),
    linear-gradient(180deg, #2a0807 0%, #5c1210 30%, #6e1714 55%, #3a0b0a 100%);
}
/* the map is a chart laid on the war table: a dark oak rim with a gilt bead, its shadow on the cloth (all inside the
   world's layer, so it scales with the map and leaves the screen as the camera comes down) */
.gm.is-command .gm-world {
  box-shadow: 0 0 0 3px #c9a050, 0 0 0 16px #3b2210, 0 0 0 18px #8a6130, 0 0 0 26px #2a1708, 0 26px 60px 26px rgba(0, 0, 0, .7);
}
.gm.is-codex .gmt-codex { transform: none; }
/* a day passing over the table (--night, --dusk set by the script; each layer composited on its own) */
.gm.is-cycle .gm-map--night { opacity: var(--night, 0); transition: opacity .45s linear; will-change: opacity; }
.gm.is-cycle .gm-map--lights { opacity: calc(var(--night, 0) * .95); transition: opacity .45s linear; will-change: opacity; }
.gm.is-cycle .gm-world::after {
  opacity: var(--dusk, 0); mix-blend-mode: multiply; transition: opacity .45s linear; will-change: opacity;
  background: linear-gradient(200deg, rgba(255, 170, 90, .6), rgba(200, 110, 70, .5) 60%, rgba(90, 60, 110, .55));
}
.gm-traveller::before {   /* a lantern on the road at night */
  content: ''; position: absolute; left: 50%; top: 35%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 130, .95), rgba(255, 150, 50, .35) 40%, transparent 70%); mix-blend-mode: screen;
  opacity: var(--night, 0); transition: opacity .45s linear;
}
.gmt-hour {   /* the month and the hour, a small plaque on the table's rim (bottom left) */
  position: absolute; left: 22px; bottom: 16px; z-index: 5; padding: 6px 12px; white-space: nowrap; pointer-events: none;
  font: italic 500 14px / 1 var(--ff-prose); color: #f6e6c4; background: rgba(30, 12, 8, .82); border: 1px solid var(--gold-lo);
}
.gmt-replay { margin-left: auto; }
@media (max-width: 1700px) { .gmt-seal small { display: none; } .gmt-seal { padding-right: 10px; letter-spacing: .06em; } }
@media (max-width: 1520px) {   /* keep the bar to one row */
  .gm .gmt-bar { gap: 6px 8px; }
  .gm .gmt-seals { flex: 0 1 auto; }
  .gm .gmt-seal { font-size: 10.5px; letter-spacing: .03em; padding: 5px 9px 5px 5px; gap: 5px; }
  .gm .gmt-seal::before { width: 16px; height: 16px; }
  .gm .gmt-btn { padding: .5em .7em; letter-spacing: .05em; font-size: 11px; }
  .gm .gmt-close { margin-left: 0; }
}
.gm.is-marching-replay .gmt-chart, .gm.is-marching-replay .gmt-hint { display: none; }
.gmt-replay.is-on { border-color: var(--gold); background: rgba(143, 31, 29, .55); color: #fff4d6; }
/* ink under the cursor, and the standard that walks the Chronicle */
.gmt-ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.gmt-token { width: 46px; z-index: 6; pointer-events: none; transform: var(--at) translate(-50%, -92%); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); }
.gmt-token img { display: block; width: 100%; height: auto; animation: gm-token .9s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes gm-token { from { rotate: -3deg; } to { rotate: 3deg; } }
.gmt-survey em { display: block; margin-top: 6px; max-width: 520px; font: italic 500 15px / 1.4 var(--ff-prose); letter-spacing: 0; color: #f6e8c8; }
/* the whole screen is the war table (war-tent-table-top: seen from above, candles, daggers, scroll cases round its carved
   rim); the map lies in its wooden field, and a copy of the plate with that field cut out (.gmt-frame) lies over the map,
   so a zoomed map stays inside the table. The script sets the field (--hx --hy --hw --hh) and .has-table when it fits. */
.gm.is-command.has-table .gm-stage { background: url('/img/glorious-maximus/war-tent-table-top-1600.webp') center / cover no-repeat, #2a1208; }
.gm.is-command.has-table .gm-world { box-shadow: 0 0 30px 6px rgba(0, 0, 0, .55); }
.gmt-frame { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gm.is-command.has-table .gmt-frame {
  display: block; background: url('/img/glorious-maximus/war-tent-table-top-1600.webp') center / cover no-repeat;
  -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) var(--hx) var(--hy) / var(--hw) var(--hh) no-repeat;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) var(--hx) var(--hy) / var(--hw) var(--hh) no-repeat;
  mask-composite: exclude;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, .7));
}
.gm.is-command .gm-pins { z-index: 4; }   /* the markers and the tondi above the table's rim */
@media (min-width: 1700px), (min-resolution: 1.5dppx) { .gm.is-command.has-table .gm-stage, .gm.is-command.has-table .gmt-frame { background-image: url('/img/glorious-maximus/war-tent-table-top.webp'); } }   /* the 2560 plate for big or dense screens */
.gm.is-command .gm-stage:active { cursor: grabbing; }
.gm.is-command :is(.gm-steps, .gm-far, .gm-arrows, .gm-route, .gm-edit-toggle, .gm-replay) { display: none; }
.gm.is-command .gm-stage img { -webkit-user-drag: none; user-select: none; }
.gm.is-command .gm-label { opacity: .75 !important; }
.gm.is-command .gm-marker { pointer-events: auto; cursor: pointer; transition: opacity .5s, filter .5s; }
.gm.is-command .gm-marker.is-dim { opacity: .22; filter: grayscale(.8); }
.gm.is-command .gm-marker.is-hot, .gm.is-command .gm-marker.is-active { --ms: 1.35; z-index: 3; }
.gm.is-command .gm-marker.is-hot::before, .gm.is-command .gm-marker.is-active::before {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 34px; height: 12px; margin-left: -17px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 220, 140, .85), transparent 70%); animation: gm-pin 1s ease-in-out infinite alternate;
}
.gm.is-command .gm-marker.is-active .gm-marker__name { opacity: 1; }
.gmt-ui { position: absolute; z-index: 5; cursor: default; color: var(--limestone); font-family: var(--ff-prose); }
.gmt-bar {
  left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px;
  background: linear-gradient(180deg, rgba(40, 14, 16, .94), rgba(26, 10, 10, .94)); border: 1px solid var(--gold-lo); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.gmt-bar__title { font: 600 15px / 1 var(--ff-inscr); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); margin-right: 4px; }
.gmt-seals { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.gmt-seal {   /* wax-seal tabs */
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; cursor: pointer; border-radius: 999px;
  font: 600 11.5px / 1 var(--ff-inscr); letter-spacing: .1em; text-transform: uppercase; color: #f1e2c2;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(216, 178, 94, .35);
}
.gmt-seal::before { content: ''; width: 20px; height: 20px; background: url('/img/glorious-maximus/wax-seal.webp') center / contain no-repeat; filter: grayscale(.7) brightness(.8); transition: filter .3s; }
.gmt-seal[aria-pressed="true"] { border-color: var(--gold); background: rgba(143, 31, 29, .55); color: #fff4d6; }
.gmt-seal[aria-pressed="true"]::before { filter: none; }
.gmt-seal small { opacity: .7; font-size: 10px; }
.gmt-btn {
  padding: .5em .95em; cursor: pointer; font: 600 12px / 1.1 var(--ff-inscr); letter-spacing: .1em; text-transform: uppercase;
  color: var(--limestone); background: rgba(255, 255, 255, .05); border: 1px solid rgba(216, 178, 94, .45);
}
.gmt-btn:hover { border-color: var(--gold); color: var(--gold-hi); }
.gmt-codex-toggle { display: inline-flex; align-items: center; gap: 7px; }
.gmt-codex-toggle::before {
  content: ''; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3d995' stroke-width='1.8'%3E%3Cpath d='M4 4h7a2 2 0 0 1 2 2v14a2 2 0 0 0-2-2H4zM20 4h-5a2 2 0 0 0-2 2v14a2 2 0 0 1 2-2h5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gm.is-codex .gmt-codex-toggle { border-color: var(--gold); background: rgba(143, 31, 29, .55); color: #fff4d6; }
@media (max-width: 1560px) { .gmt-bar__title { display: none; } }   /* the bar stays one row: the table speaks for itself */
.gmt-close { margin-left: auto; }
.gmt-codex {   /* the Imperial register: a leather board holding a vellum page */
  left: 12px; top: var(--gmt-top, 74px); bottom: 12px; width: 300px; display: flex; flex-direction: column; padding: 14px;
  transform: translateX(calc(-100% - 24px)); transition: transform .45s cubic-bezier(.2, .8, .2, 1);   /* closed until the Codex button */
  background: url('/img/glorious-maximus/tex-leather.webp') center / 420px; border: 1px solid #3b2112; box-shadow: 0 14px 40px rgba(0, 0, 0, .6), inset 0 0 0 3px rgba(216, 178, 94, .25);
}
.gmt-codex__page { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 12px 10px; color: var(--ink); background: url('/img/glorious-maximus/tex-parchment.webp') center / 420px; box-shadow: inset 0 0 22px rgba(90, 55, 20, .45); }
.gmt-codex h2 { font: 600 15px / 1.1 var(--ff-inscr); letter-spacing: .16em; text-transform: uppercase; color: #5a1a14; text-align: center; padding-bottom: 8px; border-bottom: 1px solid rgba(110, 60, 20, .35); }
.gmt-search { margin: 10px 0 6px; width: 100%; box-sizing: border-box; padding: 7px 10px; font: italic 15px / 1.2 var(--ff-prose); color: var(--ink); background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 60, 20, .4); }
.gmt-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.gmt-list h3 { margin: 12px 0 4px; font: 600 11px / 1.2 var(--ff-inscr); letter-spacing: .18em; text-transform: uppercase; color: #7a2a1c; }
.gmt-list ol { list-style: none; margin: 0; padding: 0; }
.gmt-entry {
  display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 4px 10px; width: 100%; padding: 5px 4px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px dotted rgba(110, 60, 20, .3); color: var(--ink); font: inherit;
}
.gmt-entry img, .gmt-entry .gmt-blank { grid-row: span 2; width: 46px; height: 30px; object-fit: cover; border: 1px solid rgba(110, 60, 20, .5); }
.gmt-blank { background: repeating-linear-gradient(45deg, rgba(110, 70, 30, .15) 0 4px, transparent 4px 8px); }
.gmt-entry b { font: 600 13px / 1.2 var(--ff-inscr); letter-spacing: .03em; }
.gmt-entry small { font: italic 13px / 1.2 var(--ff-prose); color: #6b4a1e; }
.gmt-entry.is-sketch b, .gmt-entry.is-sketch small { opacity: .55; }   /* works to come in faded ink */
.gmt-entry:hover, .gmt-entry:focus-visible, .gmt-entry.is-hot { background: rgba(216, 178, 94, .2); outline: none; }
.gmt-entry:hover b, .gmt-entry.is-hot b { text-decoration: underline; text-decoration-color: var(--crimson); }
.gmt-empty { font: italic 14px / 1.4 var(--ff-prose); color: #6b4a1e; padding: 10px 2px; }
.gmt-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.gmt-thread path { fill: none; stroke: var(--gold-hi); stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(255, 200, 100, .9)); stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset .6s ease-out; }
.gmt-thread.is-on path { stroke-dashoffset: 0; }
.gmt-card {   /* the relic card over a marker */
  width: 230px; padding: 9px 9px 10px; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
  background: linear-gradient(160deg, #3a1914, #1d0c0a); border: 1px solid var(--gold); box-shadow: 0 0 0 3px rgba(216, 178, 94, .2), 0 18px 40px rgba(0, 0, 0, .6);
}
.gmt-card.is-on { opacity: 1; }
.gmt-card__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--gold-lo); background: #000; }
.gmt-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gmt-card__img.is-sketch { background: #e9dcbf repeating-linear-gradient(90deg, transparent 0 11%, rgba(92, 60, 28, .55) 11% 11.8%), repeating-linear-gradient(0deg, transparent 0 18%, rgba(92, 60, 28, .45) 18% 18.8%); }
.gmt-card__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, .35) 50%, transparent 65%); background-size: 250% 100%; background-position: var(--sheen, 50%) 0; }
.gmt-card b { display: block; margin-top: 8px; font: 600 14px / 1.2 var(--ff-inscr); letter-spacing: .04em; color: var(--gold-hi); }
.gmt-card small { display: block; margin-top: 3px; font: italic 13.5px / 1.3 var(--ff-prose); color: #eadbbd; }
.gmt-panel {   /* the house panel: the Chronicle's marble plaque, at the side of the table */
  right: 12px; top: var(--gmt-top, 74px); bottom: 12px; width: min(470px, calc(100% - 24px)); overflow-y: auto; padding: 0; scrollbar-width: thin;
  transform: translateX(110%); transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.gmt-panel.is-on { transform: none; }
.gmt-panel .gm-plaque { width: auto; margin: 6px; }
.gmt-panel .gm-plaque__story { display: block; }
.gmt-panel__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 2.2rem; height: 2.2rem; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #fff4d6; background: #6e1513; border: 1px solid var(--gold); }
.gmt-tocome { aspect-ratio: 16 / 9; margin-top: 1rem; display: grid; place-items: center; border: 1px dashed rgba(110, 60, 20, .7); color: #6b4a1e; font: italic 1rem / 1.4 var(--ff-prose); text-align: center; padding: 1rem;
  background: #efe3c6 repeating-linear-gradient(90deg, transparent 0 11%, rgba(92, 60, 28, .35) 11% 11.6%), repeating-linear-gradient(0deg, transparent 0 16%, rgba(92, 60, 28, .3) 16% 16.6%); }
/* beyond the borders: the provinces' laurel tondi at the map's edges (only at the War Table) */
.gmt-tondo {
  display: none; width: 96px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; text-align: center;
  transform: var(--at) translate(-50%, -50%); transition: filter .3s;
}
.gm.is-command .gmt-tondo { display: block; }
.gmt-tondo img { display: block; width: 96px; height: 96px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .65)); transition: transform .35s; }
.gmt-tondo:hover img, .gmt-tondo:focus-visible img { transform: scale(1.1) rotate(-3deg); }
.gmt-tondo b {
  display: inline-block; margin-top: 2px; padding: 3px 9px; font: 600 10.5px / 1.2 var(--ff-inscr); letter-spacing: .16em; text-transform: uppercase;
  color: #fff1d0; background: rgba(40, 14, 16, .85); border: 1px solid var(--gold-lo);
}
.gmt-tondo i { position: absolute; top: 2px; right: 6px; min-width: 22px; height: 22px; border-radius: 11px; font: 700 12px / 22px var(--ff-inscr); font-style: normal; color: #fff4d6; background: var(--crimson); border: 1px solid var(--gold); }
.gmt-tondo::before {   /* an arrow out of Cyrodiil, towards the province */
  content: '➝'; position: absolute; left: 50%; top: 48px; width: 0; color: var(--gold-hi); font-size: 18px; line-height: 0; text-shadow: 0 1px 3px #000;
  transform: rotate(var(--out, 0rad)) translateX(58px); transform-origin: 0 0;
}
.gmt-pop {
  width: 280px; padding: 14px 16px 16px; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .3s, transform .3s;
  background: url('/img/glorious-maximus/tex-marble.webp') center / 420px; color: var(--ink); border: 2px solid var(--gold-lo); box-shadow: 0 0 0 4px rgba(243, 217, 149, .25), 0 20px 40px rgba(0, 0, 0, .6);
}
.gmt-pop.is-on { opacity: 1; pointer-events: auto; transform: none; }
.gmt-pop h3 { font: 600 18px / 1.2 var(--ff-inscr); letter-spacing: .06em; color: #2a170b; margin: 2px 0 6px; }
.gmt-pop p { font: 500 15px / 1.45 var(--ff-prose); color: #3a2a1a; }
.gmt-pop .gmt-pop__kicker { font: 600 10px / 1.2 var(--ff-inscr); letter-spacing: .22em; text-transform: uppercase; color: #7a2a1c; margin-top: 6px; }
.gmt-pop__close { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 22px; line-height: 1; color: #6e1513; cursor: pointer; }
/* the detail chart pinned to the table when the camera is over its region */
.gmt-chart {
  left: 330px; bottom: 44px; width: 250px; display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; padding: 8px; text-align: left; cursor: zoom-in;
  background: rgba(26, 14, 10, .92); border: 1px solid var(--gold-lo); box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transform: translateY(10px) rotate(-1.5deg); transition: opacity .5s, transform .5s;
}
.gmt-chart.is-on { opacity: 1; pointer-events: auto; transform: rotate(-1.5deg); }
.gmt-chart img { width: 96px; height: 64px; object-fit: cover; border: 2px solid var(--gold-lo); }
.gmt-chart span { font: 600 13px / 1.25 var(--ff-inscr); color: var(--gold-hi); letter-spacing: .04em; }
.gmt-chart small { display: block; font: 600 9.5px / 1.3 var(--ff-inscr); letter-spacing: .22em; text-transform: uppercase; color: #e7d3b0; }
.gmt-chart em { display: block; margin-top: 4px; font: italic 500 13px / 1.2 var(--ff-prose); color: #f1dfbd; }
.gm.is-panel .gmt-chart { display: none; }
@media (max-width: 820px) {
  .gmt-tondo, .gmt-tondo img { width: 62px; } .gmt-tondo img { height: 62px; }
  .gmt-tondo b { font-size: 9px; padding: 2px 6px; letter-spacing: .1em; }
  .gmt-tondo::before { top: 31px; transform: rotate(var(--out, 0rad)) translateX(40px); }
  .gmt-chart { left: 8px; bottom: 64px; width: 220px; grid-template-columns: 80px 1fr; }
  .gmt-chart img { width: 80px; height: 54px; }
  .gm.is-codex .gmt-chart { display: none; }
}
.gmt-tray {   /* the mason's tray: published works with no place on the map yet */
  right: 12px; bottom: 12px; width: 250px; padding: 10px 12px 12px 92px; min-height: 84px;
  background: rgba(26, 14, 10, .92) url('/img/glorious-maximus/masons-tray.webp') 6px 50% / 78px no-repeat; border: 1px solid var(--gold-lo);
}
.gmt-tray b { font: 600 12px / 1.2 var(--ff-inscr); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.gmt-tray p { margin: 4px 0 6px; font: italic 13px / 1.3 var(--ff-prose); color: #e7d3b0; }
.gmt-tray a { display: block; font: 600 12.5px / 1.5 var(--ff-inscr); color: #fff1d0; text-decoration: none; }
.gmt-tray a:hover { color: var(--gold-hi); text-decoration: underline; }
.gm.is-panel .gmt-tray { display: none; }
.gmt-hint, .gmt-survey { left: 50%; bottom: 14px; transform: translateX(-50%); text-align: center; pointer-events: none; }
.gmt-hint { font: 600 10.5px / 1.4 var(--ff-inscr); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 244, 220, .78); text-shadow: 0 1px 3px #000, 0 0 10px #000; width: max-content; max-width: 60vw; transition: opacity .8s; }
.gmt-survey { bottom: 44px; padding: .6rem 1.6rem; opacity: 0; transition: opacity .8s; background: rgba(40, 14, 16, .85); border: 1px solid var(--gold-lo); font: 600 15px / 1.2 var(--ff-inscr); letter-spacing: .14em; color: var(--gold-hi); }
.gmt-survey small { display: block; font: 600 9.5px / 1.4 var(--ff-inscr); letter-spacing: .3em; text-transform: uppercase; color: #e7d3b0; }
.gm.is-surveying .gmt-survey { opacity: 1; }
.gm.is-surveying .gmt-hint { opacity: 0; }
@media (max-width: 820px) {
  .gmt-bar { left: 8px; right: 8px; top: 8px; padding: 6px 8px; }
  .gmt-bar__title { display: none; }
  .gmt-seals { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gmt-seal { flex: 0 0 auto; }
  .gmt-codex-toggle { display: inline-block; }
  .gmt-codex { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 58%; padding: 8px; transform: translateY(105%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .gm.is-codex .gmt-codex { transform: none; }
  .gmt-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 72%; transform: translateY(105%); }
  .gmt-panel.is-on { transform: none; }
  .gmt-card, .gmt-hint { display: none; }
  .gmt-tray { left: 8px; right: auto; bottom: 8px; width: auto; max-width: 70%; }
  .gm.is-codex .gmt-tray { display: none; }
  .gm-table__band { margin-top: 1rem; }
}

/* ── V. the Arch of Honours (js/glorious-maximus-arch.js) ─────────────────
   One sticky stage under a 520vh scroll, a painted place in layers: the dusk sky; the world - the processional road and his arch
   on one 16:9 plate covering the screen, the braziers burning on it - which the camera moves over (--px --py: the world
   point at the screen's middle, in %; --wz: zoom); petals and embers; the legion in front. Then the attic seen close,
   his honours set into its rings, and night through the opening. Phones and reduced motion: .is-static. */
.gm-arch { position: relative; z-index: 2; height: 520vh; background: #0a0d1c; }
.gm-arch__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #1a0f22; }
.ga-sky {   /* drifts a little on its own, and moves less than the road (it is far) */
  position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: 50% 30%;
  transform: translateY(calc((var(--py, 50) - 50) * -.25%)) scale(calc(1 + (var(--wz, 1) - 1) * .12)) translateX(var(--drift, 0%));
  animation: gm-dusk 60s ease-in-out infinite alternate;
}
@keyframes gm-dusk { from { --drift: -1.2%; } to { --drift: 1.2%; } }
@property --drift { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.ga-world {
  position: absolute; left: 50%; top: 50%; width: max(100%, 100vh * 16 / 9); width: max(100%, 100svh * 16 / 9); aspect-ratio: 16 / 9;
  transform: translate(calc(var(--px, 50) * -1%), calc(var(--py, 50) * -1%)) scale(var(--wz, 1));
  transform-origin: calc(var(--px, 50) * 1%) calc(var(--py, 50) * 1%); will-change: transform;
}
.ga-road { display: block; width: 100%; height: 100%; }
.ga-fire {   /* stands on the painted fire: its base at (--x, --y), --h of the plate's height tall */
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); height: calc(var(--h) * 1%); aspect-ratio: 96 / 144;
  transform: translate(-50%, -96%); pointer-events: none; mix-blend-mode: screen;
}
.ga-fire::before {   /* the light it throws on the stone round it */
  content: ''; position: absolute; left: 50%; top: 60%; width: 520%; aspect-ratio: 1.6; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 70, .3), rgba(255, 120, 40, .1) 55%, transparent); animation: ga-throb 2.2s ease-in-out infinite alternate; animation-delay: var(--fd);
}
.ga-fire i {
  position: absolute; inset: 0; background: url('/img/glorious-maximus/arch-flames.webp') 0 0 / 800% 100% no-repeat;
  animation: ga-flame .72s steps(8, jump-none) infinite; animation-delay: var(--fd);
}
@keyframes ga-flame { to { background-position: 100% 0; } }
@keyframes ga-throb { from { opacity: .75; } to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.gm-arch__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ga-crowd {   /* the legion at the road's edges, laurels raised; the camera walks past it */
  position: absolute; z-index: 1; left: 50%; bottom: -1%; width: max(104%, 118vh * 1960 / 840 * .5); height: auto; pointer-events: none;
  transform: translateX(-50%) scale(var(--cs, 1)); transform-origin: 50% 100%; opacity: var(--cro, 1);
  filter: brightness(.9) drop-shadow(0 -10px 30px rgba(0, 0, 0, .45));
  animation: ga-cheer 2.6s ease-in-out infinite alternate;
}
@keyframes ga-cheer { to { translate: 0 -.8%; } }
.gm-arch__head { position: absolute; z-index: 2; left: 0; right: 0; top: 5vh; text-align: center; opacity: var(--ho, 1); pointer-events: none; }
.gm-arch__kicker { font: 600 .82rem / 1 var(--ff-inscr); letter-spacing: .4em; text-transform: uppercase; color: #f1dcb4; text-shadow: 0 1px 3px #000; }
.gm-arch__title {
  margin: .6rem 0 0; font: 600 clamp(2rem, 4.6vw, 4rem) / 1.05 var(--ff-inscr); letter-spacing: .16em;
  background: linear-gradient(180deg, #fff1c8, var(--gold-hi) 30%, var(--gold) 60%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(255, 170, 70, .25));
}
/* the attic, seen close (1960 x 840): the dedication in its panel (13.75 .. 86.6 % x 16.8 .. 43.8 %), ten laurel rings
   (centres at --x %, 61.3 % down, 6.75 % of the width inside) */
.ga-attic {
  position: relative; width: min(94vw, 54vh * 1960 / 840); aspect-ratio: 1960 / 840; min-height: 0; container-type: inline-size; flex: none;
  transform: scale(var(--as, 1)); filter: blur(calc(var(--ab, 0) * 1px)); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.ga-attic__img { display: block; width: 100%; height: 100%; border-radius: 2px; }
.gm-arch__dedication {
  position: absolute; left: 15%; top: 7.93cqw; width: 70%; height: 10.07cqw;   /* in the attic plate's width: the box grows on phones */ margin: 0; display: flex; align-items: center; align-content: center; justify-content: center; flex-wrap: wrap; column-gap: .55em;
  text-align: center; font: 600 2.55cqw / 1.3 var(--ff-inscr); letter-spacing: .12em; color: #5e3f12;
  text-shadow: 0 .1cqw 0 rgba(255, 246, 220, .7), 0 -.08cqw 0 rgba(60, 35, 5, .55);
}
.gm-arch__dedication .w { display: inline-block; white-space: nowrap; }
.gm-arch__dedication .ch { display: inline-block; opacity: 0; }
.gm-arch__roundel {   /* each painted ring catches the light as his honours are set */
  position: absolute; left: calc(var(--x) * 1%); top: 26.27cqw; width: 10%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1s ease;
  background: radial-gradient(circle, transparent 36%, rgba(255, 236, 170, .75) 44%, rgba(230, 180, 80, .3) 54%, transparent 66%); mix-blend-mode: screen;
}
.gm-arch__roundel.is-lit { opacity: 1; }
.ga-rings { list-style: none; margin: 0; padding: 0; }
.gm-coin.ga-coin { --c: 6.9cqw; position: absolute; left: calc(var(--x) * 1%); top: 26.27cqw; width: var(--c); margin: calc(var(--c) * -.5) 0 0 calc(var(--c) * -.5); cursor: pointer; }
.ga-coin .gm-coin__name, .ga-coin .gm-coin__back, .ga-coin .gm-coin__ring { display: none; }
.ga-coin .gm-coin__spin { transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.gm .gm-coin.ga-coin:is(:hover, :focus-visible, .is-flipped) .gm-coin__spin { transform: scale(1.12); }   /* no turn: the line below reads it */
.ga-coin .gm-coin__face { box-shadow: inset 0 0 0 .25cqw #c99a43, inset 0 0 1.2cqw rgba(0, 0, 0, .7), 0 .3cqw .8cqw rgba(0, 0, 0, .5); }
.ga-coin.is-great .gm-coin__face { box-shadow: inset 0 0 0 .3cqw #f0cf7d, inset 0 0 1.2cqw rgba(0, 0, 0, .6), 0 0 2.4cqw rgba(255, 200, 100, .55); }
.ga-coin:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: 50%; }
/* the coin read: its name, what it was given for, the day */
.ga-legend { min-height: 3.4em; margin: 0; max-width: 46rem; text-align: center; display: grid; gap: 2px; opacity: 0; transition: opacity .3s; }
.ga-legend.is-on { opacity: 1; }
.ga-legend b { font: 600 .95rem / 1.2 var(--ff-inscr); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 1px 3px #000; }
.ga-legend span { font: italic 500 1.08rem / 1.35 var(--ff-prose); color: #f6e6c4; text-shadow: 0 1px 3px #000; }
.ga-legend em { font: 600 .72rem / 1.2 var(--ff-inscr); font-style: normal; letter-spacing: .2em; color: #d8b25e; }
/* the honours: the attic close, in the warm dark of the dusk (the road behind it blurs and dims) */
.gm-arch__honours {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 5vh 3vw;
  opacity: var(--hno, 0); pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(20, 8, 4, .62), rgba(10, 4, 2, .9));   /* (no moving blur on the road behind: it repainted every frame) */
}
.gm-arch__honours.is-on { pointer-events: auto; }
.gm-arch__intro { max-width: 46rem; margin: 0; text-align: center; font: italic 500 clamp(1.05rem, 1.5vw, 1.26rem) / 1.5 var(--ff-prose); color: #f6e6c4; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.gm-arch__none { font: italic 500 1.1rem / 1.4 var(--ff-prose); color: #e7d3b0; }
.gm-arch__rows { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.gm-arch__rows:empty { display: none; }
.gm-arch__coins { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
.gm-coin { --c: clamp(84px, 7.4vw, 118px); position: relative; width: var(--c); display: flex; flex-direction: column; align-items: center; gap: 6px; perspective: 700px; outline: none;
  opacity: var(--co, 1); transform: scale(calc(.6 + var(--co, 1) * .4)); }
.gm-coin__spin { position: relative; width: var(--c); height: var(--c); transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.gm-coin:is(:hover, :focus-visible, .is-flipped):not(.gm-coin--road) .gm-coin__spin { transform: rotateY(180deg); }
.gm-coin__face, .gm-coin__back { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gm-coin__face { background: radial-gradient(circle, #3a1a14 40%, #1c0c0a 64%); }
.gm-coin__frame { position: absolute; inset: 13%; width: 74%; height: 74%; object-fit: contain; }
.gm-coin__emblem { position: absolute; inset: 24%; width: 52%; height: 52%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.gm-coin__ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gm-coin__glint { position: absolute; inset: 6%; border-radius: 50%; overflow: hidden; pointer-events: none; }
.gm-coin__glint::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, rgba(255, 248, 210, .85) 50%, transparent 62%); transform: translateX(-120%); }
.gm-coin.is-struck .gm-coin__glint::after { animation: gm-coin-glint 1.4s ease-out; }
@keyframes gm-coin-glint { to { transform: translateX(120%); } }
.gm-coin__back { transform: rotateY(180deg); background: radial-gradient(circle, #4a1b16, #26100c 66%); display: grid; place-items: center; }
.gm-coin__back p { position: relative; width: 60%; margin: 0; text-align: center; display: grid; gap: 2px; }
.gm-coin__back b { font: 600 calc(var(--c) * .074) / 1.15 var(--ff-inscr); letter-spacing: .04em; color: var(--gold-hi); text-transform: uppercase; }
.gm-coin__back span { font: italic 500 calc(var(--c) * .08) / 1.2 var(--ff-prose); color: #f1dfbd; }
.gm-coin__back em { font: 600 calc(var(--c) * .056) / 1.2 var(--ff-inscr); font-style: normal; letter-spacing: .06em; color: #d8b25e; }
.gm-coin__name { font: 700 10.5px / 1.25 var(--ff-inscr); letter-spacing: .12em; text-transform: uppercase; color: #f3dfb8; text-align: center; text-shadow: 0 1px 2px #000; }
.gm-coin--legendary .gm-coin__face::after {
  content: ''; position: absolute; inset: -10%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(255, 200, 100, .5), transparent 70%);
  animation: gm-glow 2.6s ease-in-out infinite alternate;
}
/* honours still on the road: blank stone with a chalk outline and a tally */
.gm-arch__road { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gm-arch__road-title { margin: 0; font: 700 .72rem / 1 var(--ff-inscr); letter-spacing: .3em; text-transform: uppercase; color: #e2c895; text-shadow: 0 1px 2px #000; }
.gm-coin--road .gm-coin__face { background: radial-gradient(circle, #6a6660 40%, #4a4743 66%); }
.gm-coin__emblem--chalk { filter: grayscale(1) brightness(2.2) contrast(.6); opacity: .35; mix-blend-mode: screen; }
.gm-coin__tally { position: absolute; left: 0; right: 0; bottom: 17%; text-align: center; font: 700 calc(var(--c) * .12) / 1 var(--ff-inscr); color: #f6f1e4; text-shadow: 0 1px 2px #000; letter-spacing: .06em; }
.gm-arch__through { position: absolute; z-index: 3; left: 50%; bottom: 14vh; width: min(760px, 90vw); transform: translateX(-50%); text-align: center; margin: 0; opacity: var(--tho, 0);
  font: italic 500 clamp(1.25rem, 2.2vw, 1.8rem) / 1.45 var(--ff-prose); color: #fff2d4; text-shadow: 0 1px 3px #000, 0 0 24px rgba(0, 0, 0, .9); }
.gm-arch__night { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: var(--no, 0); background: radial-gradient(ellipse 60% 50% at 50% 70%, rgba(160, 40, 20, .28), transparent 60%), linear-gradient(#050817, #0a1030); }
/* phones and reduced motion: the road and the arch as a picture, the attic below it, the honours as coins under it */
.gm-arch.is-static { height: auto; }
.gm-arch.is-static .gm-arch__stage { position: relative; height: auto; overflow: visible; padding: 6vh 0 8vh; display: flex; flex-direction: column; align-items: center; }
.gm-arch.is-static .gm-arch__head { position: relative; top: 0; order: -1; margin-bottom: 3vh; }
.gm-arch.is-static .ga-sky { inset: 0; width: 100%; height: 100%; transform: none; }
.gm-arch.is-static .ga-world { position: relative; left: auto; top: auto; width: 100%; transform: none; filter: none; }
.gm-arch.is-static .ga-crowd { display: none; }
.gm-arch.is-static .gm-arch__night { display: none; }
.gm-arch.is-static .gm-arch__honours { position: relative; inset: auto; opacity: 1; pointer-events: auto; padding: 5vh 4vw 0; background: none; }
.gm-arch.is-static .ga-attic { width: min(94vw, 900px); }
.gm-arch.is-static .gm-arch__through { position: relative; left: auto; bottom: auto; transform: none; margin: 6vh auto 0; opacity: 1; }
.gm-arch.is-static .gm-arch__dedication .ch { opacity: 1; }
@media (max-width: 820px) {   /* rings too small to read on a phone: the coins below the attic, each with its name */
  .gm-arch.is-static .ga-attic { aspect-ratio: auto; box-shadow: none; }
  .gm-arch.is-static .ga-attic__img { height: auto; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
  .gm-arch.is-static .ga-rings { margin-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; }
  .gm-arch.is-static .gm-coin.ga-coin { --c: 84px; position: relative; left: auto; top: auto; margin: 0; }
  .gm-arch.is-static .ga-coin .gm-coin__name { display: block; }
}

/* ── VI. the Siege (js/glorious-maximus-siege.js) ──────────────────────────
   One sticky stage under a 1300vh scroll; the scenes cross-fade (--o on each, set by the script). Slower than anywhere
   else: long holds, few sounds. Phones and reduced motion: .is-static, the scenes stacked. */
.gm-siege { position: relative; z-index: 2; height: 1300vh; background: #07060c; }
.gm-siege__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #07060c; }
.gs-scene { position: absolute; inset: 0; opacity: var(--o, 0); visibility: hidden; }
.gs-scene.is-on { visibility: visible; }
.gs-head { position: absolute; left: 0; right: 0; top: 4.5vh; text-align: center; z-index: 2; pointer-events: none; }
.gs-kicker { font: 600 .82rem / 1 var(--ff-inscr); letter-spacing: .4em; text-transform: uppercase; color: #d9c7a8; text-shadow: 0 1px 3px #000; }
.gs-title {
  margin: .6rem 0 0; font: 600 clamp(2rem, 4.6vw, 4rem) / 1.05 var(--ff-inscr); letter-spacing: .16em;
  background: linear-gradient(180deg, #f4efe6, #c9c2b6 45%, #7d766c); -webkit-background-clip: text; background-clip: text; color: transparent;   /* cold iron, not gold */
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 24px rgba(200, 40, 20, .3));
}
.gs-caption {
  position: absolute; left: 50%; bottom: 8vh; width: min(760px, 90vw); transform: translateX(-50%); margin: 0; z-index: 3; text-align: center;
  font: italic 500 clamp(1.1rem, 1.9vw, 1.5rem) / 1.5 var(--ff-prose); color: #f2e4cc; text-shadow: 0 1px 3px #000, 0 0 22px rgba(0, 0, 0, .9);
  opacity: var(--co, 0); transition: opacity .8s;
}
.gs-scene.is-told .gs-caption { --co: 1; }
/* 0. the last defence: a cold grey dusk; the plaque in charcoal */
.gs-impaler { background: radial-gradient(ellipse 80% 70% at 50% 40%, #2b2a30, #0d0c11 75%); }
.gs-impaler__dusk { position: absolute; inset: 0; background: url('/img/glorious-maximus/houses/impaler/02-burning-house.webp') center / cover; opacity: .16; filter: grayscale(.85) blur(14px); }
.gs-plaque { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); width: min(620px, 92vw); max-height: 74vh; overflow: auto; z-index: 2;
  filter: saturate(.55) brightness(.93); scrollbar-width: thin; }
.gm-build--charcoal .gm-build__ink { filter: grayscale(1) contrast(2.4) brightness(1.1); mix-blend-mode: multiply; opacity: 1; }
.gm-build--charcoal { background: #d9d5cc; }
.gm-build--charcoal .gm-build__stone { filter: grayscale(.35) brightness(.86) contrast(1.05); }
/* 1. the panorama: four layers, the nearer moving more (--px from the script) */
.gs-pano { background: #120608; }
.gs-pano__layer { position: absolute; left: -6%; width: 112%; height: 100%; object-fit: cover; object-position: 50% 60%; top: 0;
  transform: translateX(calc(var(--px, 0) * var(--d) * 1%)) scale(calc(1 + var(--d) * .015)); will-change: transform; }
.gs-pano__layer--reeds { object-position: 50% 100%; }
.gs-pano__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* B18: smoke columns off the City and fires on its roofs, in the City layer's own frame (it pans with it) */
.gs-pano__burn { position: absolute; left: -6%; top: 0; width: 112%; height: 100%; pointer-events: none;
  transform: translateX(calc(var(--px, 0) * var(--d) * 1%)) scale(calc(1 + var(--d) * .015)); }
.gs-pano__layer--camps, .gs-pano__layer--reeds { z-index: 1; }   /* the near shore stays in front of the City's smoke */
.gs-smoke {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); height: 46vh; width: auto; transform-origin: 50% 100%;
  transform: translate(-50%, -100%); opacity: .82; animation: gs-smoke 14s ease-in-out infinite alternate; animation-delay: var(--sd);
  -webkit-mask-image: linear-gradient(transparent, #000 35%); mask-image: linear-gradient(transparent, #000 35%);
}
@keyframes gs-smoke { from { transform: translate(-50%, -100%) scale(.94, .9) skewX(-2deg); } to { transform: translate(-48%, -100%) scale(1.04, 1.08) skewX(3deg); } }
.gs-blaze {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(7vh * var(--s)); aspect-ratio: 160 / 110;
  transform: translate(-50%, -92%); mix-blend-mode: screen;
  background: url('/img/glorious-maximus/siege-blaze.webp') 0 0 / 800% 100% no-repeat; animation: gs-blaze .8s steps(8) infinite; animation-delay: var(--bd);
}
@keyframes gs-blaze { to { background-position: calc(800% / 7) 0; } }
/* the alliances: their painted banners where they set out, their hosts on the roads (placed by the script) */
.gs-standard { position: absolute; z-index: 2; width: 7.5%; margin: 0; opacity: var(--bo, 0); display: flex; flex-direction: column; align-items: center; gap: 4px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); transform: translateY(calc((1 - var(--bo, 0)) * 14px)); }
.gs-standard img { width: 100%; height: auto; animation: gs-flutter 3.2s ease-in-out infinite alternate; transform-origin: 50% 8%; }
@keyframes gs-flutter { to { transform: skewX(-2.5deg) scaleX(.97); } }
.gs-standard .gs-banner { position: static; opacity: 1; white-space: nowrap; }
.gs-host { position: absolute; z-index: 1; left: 0; top: 0; width: 6.5%; height: auto; pointer-events: none; transform: translate(-50%, -78%); opacity: 0;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .7)) brightness(1.05); transition: opacity .5s; }
.gs-host--bearer { width: 4.2%; z-index: 2; } .gs-host--camp { width: 6%; } .gs-host--engine { width: 5.2%; }
.gs-host.is-on { opacity: 1; }
/* the fall: the vision cracks, top to bottom (--crack 1 -> 0 as the band cracks) */
.gs-crack { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 5; pointer-events: none; mix-blend-mode: screen;
  clip-path: inset(0 0 calc(var(--crack, 1) * 100%) 0); opacity: calc(1 - var(--crack, 1) * .2); visibility: var(--crv, hidden); }
/* over all of it: ash in the air, and the burning edge of the Scroll's vision closing in (--be: 0 far out -> 1 close) */
.gs-ash { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.gs-burn { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 4; pointer-events: none;
  transform: scale(calc(1.5 - var(--be, 0) * .5)); opacity: min(1, calc(var(--be, 0) * 3)); animation: gs-burn 2.6s ease-in-out infinite alternate; }
@keyframes gs-burn { from { filter: brightness(.92) saturate(.95); } to { filter: brightness(1.12) saturate(1.1); } }
/* 2 and 5. the map (3:2, covering the stage), his works as lights that do not go out */
.gs-map { position: absolute; left: 50%; top: 50%; width: max(100vw, 150vh); aspect-ratio: 3 / 2; transform: translate(-50%, -50%) scale(var(--ms, 1)); }
.gs-map__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gs-map__dim { position: absolute; inset: 0; background: #04030a; opacity: var(--dim, 0); }
.gs-map__arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gs-arrow { fill: none; stroke-width: .5; stroke-linecap: round; stroke-dasharray: .999 1.001; stroke-dashoffset: var(--draw, 1); filter: drop-shadow(0 0 1px #000); }
.gs-arrow--aldmeri { stroke: #e2b445; } .gs-arrow--daggerfall { stroke: #3f73c9; } .gs-arrow--ebonheart { stroke: #c7342c; }
.gs-banner { position: absolute; padding: 5px 11px; font: 600 11px / 1 var(--ff-inscr); letter-spacing: .16em; text-transform: uppercase; color: #fff; opacity: var(--bo, 0);
  background: rgba(10, 8, 16, .82); border-left: 4px solid; }
.gs-banners { background: radial-gradient(ellipse 70% 70% at 50% 50%, #0d0b18, #030208); }
.gs-banners .gs-map { width: min(100vw, 150vh); }   /* the whole province, so every army can be seen coming */
.gs-map--dawn .gs-work { box-shadow: 0 0 18px 7px rgba(255, 205, 110, .85), 0 0 0 2px rgba(255, 240, 200, .9); }
.gs-banner--aldmeri { border-color: #e2b445; } .gs-banner--daggerfall { border-color: #3f73c9; } .gs-banner--ebonheart { border-color: #c7342c; }
.gs-work {   /* a work of his: a point of gold that stays lit */
  position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle, #fff6d0, #f0c25a 45%, rgba(240, 180, 70, 0) 72%); box-shadow: 0 0 14px 5px rgba(255, 200, 100, .7);
  animation: gm-glow 2s ease-in-out infinite alternate;
}
/* 3. the last stand, seen as the Scroll sees it */
.gs-stand { background: #000; }
.gs-stand__img, .gs-stand__blur { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; transform: scale(var(--ss, 1)); }
.gs-stand__blur { filter: blur(10px) brightness(1.2) sepia(.3);
  -webkit-mask: radial-gradient(ellipse 60% 56% at 50% 46%, transparent 40%, #000 92%); mask: radial-gradient(ellipse 60% 56% at 50% 46%, transparent 40%, #000 92%); }
.gs-stand__tint { position: absolute; inset: 0; mix-blend-mode: screen; background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 45%, rgba(255, 210, 170, .4) 100%); }
.gs-token { position: absolute; left: 78%; bottom: 31vh; width: 64px; transform-origin: 50% 100%; transform: rotate(var(--tr, 0deg)); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .7)); z-index: 2; }
.gs-band {   /* the porphyry band his ending is cut into */
  position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(980px, 94vw); padding: 1.4rem 2rem; z-index: 3; text-align: center;
  background: url('/img/glorious-maximus/porphyry-band.webp') center / cover; border-block: 3px solid var(--gold-lo); box-shadow: 0 20px 50px rgba(0, 0, 0, .7);
}
.gs-band__line { margin: .15rem 0; font: 600 clamp(.95rem, 1.6vw, 1.3rem) / 1.35 var(--ff-inscr); letter-spacing: .06em; color: #fbe9c4; text-shadow: 0 1px 2px #000;
  opacity: 0; transform: translateY(6px); transition: opacity .9s, transform .9s; }
.gs-band__line.is-cut { opacity: 1; transform: none; }
.gs-band__crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gs-band__crack path { fill: none; stroke: #120604; stroke-width: 1.4; stroke-dasharray: .999 1.001; stroke-dashoffset: var(--crack, 1); filter: drop-shadow(0 1px 0 rgba(255, 220, 170, .35)); }
.gs-white { position: absolute; inset: 0; background: #fff; opacity: var(--wo, 0); pointer-events: none; z-index: 6; }
/* 5. dawn and the stele */
.gs-map--dawn .gs-map__img { filter: saturate(.7) brightness(.95) hue-rotate(-6deg) contrast(.95); }
.gs-map--dawn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 210, 170, .35), rgba(160, 180, 220, .25) 60%, rgba(40, 50, 80, .45)); mix-blend-mode: soft-light; }
.gs-dawn::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 60% 70% at 30% 50%, transparent 30%, rgba(10, 12, 24, .65)); }
.gs-stele { position: absolute; right: 7vw; top: 50%; height: 86vh; aspect-ratio: 804 / 1519;   /* stele-v2 (B18): the double lozenge on its pediment */ z-index: 2; transform: translateY(calc(-50% + var(--sy, 40) * 1vh)); opacity: var(--so, 0);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); }
.gs-stele img { width: 100%; height: 100%; display: block; }
.gs-stele__text { position: absolute; left: 28%; top: 43%; width: 44%; height: 33%; display: flex; flex-direction: column; justify-content: center; gap: 1.2em; text-align: center; container-type: inline-size; }
.gs-stele__line { margin: 0; font: 600 9cqw / 1.25 var(--ff-inscr); letter-spacing: .08em; color: #5a4a36; text-shadow: 0 .4cqw 0 rgba(255, 250, 235, .55), 0 -.3cqw 0 rgba(40, 30, 20, .35);
  opacity: 0; filter: blur(3px); transition: opacity 1.2s, filter 1.2s; }
.gs-stele__line--2 { font-size: 13cqw; letter-spacing: .14em; }
.gs-stele__line--3 { font-size: 7.4cqw; }
.gs-stele__line.is-cut { opacity: 1; filter: none; }
.gs-moth {   /* the Ancestor moths come back from the Scroll and settle on the stele */
  position: absolute; left: 50%; top: 30%; width: 34px; height: 34px; z-index: 3; pointer-events: none; opacity: var(--so, 0);
  background: url('/img/glorious-maximus/moths-strip.webp') 0 0 / 800% 100%; animation: gm-moth-flap .6s steps(8) infinite, gm-moth-drift 7s ease-in-out infinite alternate;
  animation-delay: 0s, var(--md); translate: var(--mx) var(--my);
}
@keyframes gm-moth-flap { to { background-position: 100% 0; } }
@keyframes gm-moth-drift { from { transform: translate(-14px, 8px) rotate(-8deg); } to { transform: translate(16px, -10px) rotate(8deg); } }
.gs-dawn__words { position: absolute; left: 6vw; bottom: 10vh; width: min(620px, 52vw); z-index: 3; }
.gs-caption--dawn { position: relative; left: auto; bottom: auto; transform: none; width: auto; text-align: left; }
.gs-closing { margin: 1.4rem 0 0; font: 600 clamp(1.25rem, 2.3vw, 2rem) / 1.3 var(--ff-inscr); letter-spacing: .06em;
  background: linear-gradient(180deg, #fff1c8, var(--gold-hi) 40%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .8)); opacity: var(--clo, 0); }
/* phones and reduced motion: the scenes one after another */
.gm-siege.is-static { height: auto; }
.gm-siege.is-static .gm-siege__stage { position: relative; height: auto; overflow: visible; }
.gm-siege.is-static .gs-scene { position: relative; inset: auto; min-height: 100vh; opacity: 1; visibility: visible; overflow: hidden; --co: 1; --bo: 1; --draw: 0; --dim: .5; --so: 1; --sy: 0; --clo: 1; }
.gm-siege.is-static .gs-plaque { position: relative; left: auto; top: auto; transform: none; margin: 18vh auto 6vh; max-height: none; }
.gm-siege.is-static .gs-band__line, .gm-siege.is-static .gs-stele__line { opacity: 1; filter: none; transform: none; }
.gm-siege.is-static .gs-white { display: none; }
.gm-siege.is-static :is(.gs-crack, .gs-burn, .gs-ash) { display: none; }
.gm-siege.is-static .gs-host { opacity: 1; }
@media (max-width: 820px) {
  .gs-stele { right: 50%; transform: translate(50%, -60%); height: 60vh; }
  .gs-dawn__words { left: 5vw; right: 5vw; width: auto; bottom: 90px; }   /* clear of the floating buttons */
  .gs-banner { font-size: 9px; }
}

/* ── the loader (gmLoaderHtml, model): the site's loader in his colours - the crimson seal, his name, a brass bar ── */
body > #loaderReadiness { display: none !important; }   /* the site's readiness panel looks for its own loader; this page has its own */
.gm-loader {
  position: fixed; inset: 0; z-index: 30000; display: grid; place-items: center; overflow: hidden;
  background: #0a0605; color: #f3ebdd; transition: opacity .8s ease, visibility 0s .8s;
}
.gm-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.gm-loader__glow {
  position: absolute; inset: -10%;
  background: radial-gradient(ellipse 46% 40% at 50% 46%, rgba(143, 31, 29, .34), transparent 70%),
              radial-gradient(ellipse 80% 70% at 50% 50%, rgba(58, 20, 24, .5), transparent 75%),
              repeating-linear-gradient(115deg, rgba(255, 240, 200, .012) 0 2px, transparent 2px 7px);
  animation: gmlBreathe 5s ease-in-out infinite;
}
@keyframes gmlBreathe { 50% { opacity: .7; transform: scale(1.03); } }
.gm-loader__content { position: relative; width: min(440px, calc(100vw - 56px)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.gm-loader__kicker { margin: 0 0 24px; font: 9px/1.4 var(--font-mono, ui-monospace, monospace); letter-spacing: .26em; color: #cbbba3; }
.gm-loader__seal { position: relative; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .7)); }
.gm-loader__seal svg { display: block; width: 100%; height: 100%; }
.gm-loader__sweep {   /* a glint crosses the seal, as on the site's emblem */
  position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 200, .5) 50%, transparent 65%);
  transform: translateX(-120%); animation: gmlSweep 2.8s ease-in-out infinite; mix-blend-mode: soft-light;
}
@keyframes gmlSweep { 55%, 100% { transform: translateX(120%); } }
.gm-loader__name { margin: 26px 0 4px; padding-left: .3em; font: 400 clamp(22px, 3vw, 30px)/1.1 var(--ff-inscr); letter-spacing: .3em; color: #f3d995; text-shadow: 0 2px 16px #000; }
.gm-loader__title { margin: 0 0 26px; font: italic 500 17px/1.3 var(--ff-prose); color: #ddd5c8; }
.gm-loader__status { margin: 0 0 18px; min-height: 1.4em; font: 500 16px/1.4 var(--ff-prose); color: #cfc3ad; }
.gm-loader__bar { display: flex; align-items: center; gap: 10px; width: 100%; }
.gm-loader__bar i { font-style: normal; font-size: 9px; color: #c8ac78; }
.gm-loader__track { position: relative; flex: 1; height: 2px; background: rgba(220, 200, 156, .2); border-radius: 2px; overflow: hidden; }
.gm-loader__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #7d5a22, #d8b25e 60%, #fff0c2); box-shadow: 0 0 10px rgba(215, 183, 126, .35); }
.gm-loader__pct { margin: 10px 0 0; font: 10px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .2em; color: #9d8f78; }
@media (max-width: 600px) { .gm-loader__kicker { font-size: 8px; letter-spacing: .18em; } .gm-loader__seal { width: 94px; height: 94px; } .gm-loader__name { font-size: 22px; letter-spacing: .2em; } }
@media (prefers-reduced-motion: reduce) { .gm-loader__glow, .gm-loader__sweep { animation: none; } .gm-loader { transition-duration: .2s; } }

/* ── I. the entrance: reading the Elder Scroll (js/glorious-maximus-scroll.js) ──
   Shown only while html.gm-scroll-on (set by the inline script in the body before the first paint). */
.gm-scroll { display: none; }
html.gm-scroll-on, html.gm-scroll-on body { overflow: hidden !important; }
html.gm-scroll-on .gm-scroll {
  display: block; position: fixed; inset: 0; z-index: 20000; overflow: hidden; background: #040302;
  color: var(--limestone); font-family: var(--ff-prose); cursor: default; touch-action: none;
}
.gm-scroll img { user-select: none; -webkit-user-drag: none; }
.gm-scroll::after { content: ''; position: absolute; inset: 0; z-index: 50; background: #040302; pointer-events: none; transition: opacity .2s; }   /* black until the script has drawn */
.gm-scroll.is-ready::after { opacity: 0; }
.gm-scroll__vault, .gm-scroll__vault img, .gm-scroll__moths, .gm-scroll__white, .gm-scroll__dark, .gm-scroll__grain, .gm-scroll__visions {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.gm-scroll__room { position: absolute; inset: 0; opacity: 0; visibility: hidden; overflow: hidden; }
.gm-scroll__room img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; object-position: 50% 53%; }
.gm-scroll__room::after {   /* the edges of sight fall into shadow around the page */
  content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 35%, rgba(4, 3, 2, .82) 100%);
}
.gm-scroll__halo {   /* the shaft's light pooling behind the Scroll, breathing */
  position: absolute; left: 50%; top: 46%; width: 90vmin; height: 90vmin; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(215, 225, 255, .32), rgba(170, 180, 230, .12) 40%, transparent 68%); animation: gm-halo 6s ease-in-out infinite alternate;
}
@keyframes gm-halo { from { opacity: .7; transform: translate(-50%, -50%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.gm-scroll__vault { transform-origin: 50% 53%; }
.gm-scroll__vault::after {   /* the floor falls into shadow, so the words read over the dais */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 3, 2, .9) 0%, rgba(4, 3, 2, .62) 24%, transparent 48%), radial-gradient(ellipse 80% 75% at 50% 42%, transparent 55%, rgba(4, 3, 2, .6) 100%);
}
.gm-scroll__vault img { object-fit: cover; object-position: 50% 53%; }
.gm-scroll__shaft { mix-blend-mode: screen; transform-origin: 50% 0; animation: gm-shaft 7s ease-in-out infinite alternate; }
@keyframes gm-shaft { from { opacity: .55; } to { opacity: .95; } }
.gm-scroll__case { animation: gm-bob 6s ease-in-out infinite alternate; filter: drop-shadow(0 0 18px rgba(200, 180, 255, .35)); }
@keyframes gm-bob { from { transform: translateY(-.6%); } to { transform: translateY(.6%); } }.gm-scroll__moths { pointer-events: none; }
.gm-scroll__closed {   /* placed and turned by the script */
  position: absolute; left: 0; top: 0; width: 600px; height: auto; transform-origin: 50% 50%; pointer-events: none;
  visibility: hidden; filter: drop-shadow(0 0 18px rgba(200, 180, 255, .35)) drop-shadow(0 14px 18px rgba(0, 0, 0, .6));
}

/* the reading, as an Elder Scroll is read: the case held level, the parchment sliding down out of its body, weighted by
   a gold bar; first a star chart in ink on pale vellum, then (.is-glow) the chart wakes - luminous on black, the room
   gone to a sky of stars, smoke off the page. The script sizes the parchment to the case (it comes out of its body). */
.gm-scroll__closed { z-index: 3; }
.gm-scroll__parch { position: absolute; left: 0; top: 0; width: 600px; height: 700px; z-index: 2; opacity: 0; visibility: hidden; transform-origin: 50% 0; }
.gm-scroll__parch.is-hanging { animation: gm-hang 7s ease-in-out infinite alternate; }
@keyframes gm-hang { from { rotate: -.5deg; } to { rotate: .5deg; } }
.gm-parch__sheet {
  position: absolute; inset: 0; clip-path: inset(0 0 100% 0);
  /* pale vellum: the page curls back towards its edges, the case shades its top, the grain shows through */
  background:
    linear-gradient(rgba(40, 30, 15, .55), rgba(40, 30, 15, 0) 7%),
    linear-gradient(90deg, rgba(70, 55, 30, .42), rgba(70, 55, 30, .08) 6%, rgba(255, 250, 235, .12) 22%, transparent 45%, transparent 70%, rgba(70, 55, 30, .1) 92%, rgba(70, 55, 30, .45)),
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(255, 252, 238, .28), transparent 75%),
    url('/img/glorious-maximus/tex-parchment.webp') center / 640px,
    #e3dcc7;
  background-blend-mode: normal, normal, screen, soft-light, normal;
  box-shadow: inset 0 0 0 1px rgba(110, 90, 55, .35), inset 0 -30px 40px rgba(70, 55, 30, .25), 0 24px 50px rgba(0, 0, 0, .6);
  -webkit-mask: linear-gradient(90deg, transparent, #000 1.2%, #000 98.8%, transparent); mask: linear-gradient(90deg, transparent, #000 1.2%, #000 98.8%, transparent);
}
.gm-parch__sheet::after {   /* the page goes dark as the chart wakes */
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease;
  background: radial-gradient(ellipse 70% 60% at 50% 48%, #0b1a1d, #020607 80%);
}
.gm-scroll.is-glow .gm-parch__sheet::after { opacity: .94; }
.gm-parch__bar {   /* the weighted bar along the bottom edge, gilt with a meander */
  position: absolute; left: -4%; right: -4%; bottom: -24px; height: 34px; border-radius: 3px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 12.5H4V3H16V9.5H10V6.5H13' fill='none' stroke='%23523208' stroke-width='1.7'/%3E%3Cpath d='M14 12.5H28' fill='none' stroke='%23523208' stroke-width='1.7'/%3E%3C/svg%3E") 0 50% / 28px 14px repeat-x,
    linear-gradient(transparent 0 18%, rgba(82, 50, 8, .7) 18% 22%, transparent 22% 78%, rgba(82, 50, 8, .7) 78% 82%, transparent 82%),
    linear-gradient(#fff3cc, #e2b85e 30%, #b4842f 62%, #6b4815);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, .9), inset 0 -3px 4px rgba(60, 35, 5, .6), 0 10px 18px rgba(0, 0, 0, .65);
}
.gm-scroll__chart { position: absolute; inset: 3% 4% 4%; width: 92%; height: 93%; overflow: visible; pointer-events: none; transform-origin: 50% 48%; opacity: 0; visibility: hidden; }
/* every stroke has pathLength="1": a dash slid from 1 to 0 draws it; the dash ends just before the path starts, so nothing shows undrawn */
.gm-scroll__chart :is(ellipse, circle, path, line) { fill: none; stroke: rgba(62, 50, 36, .78); stroke-width: .28; stroke-linecap: butt; stroke-dasharray: .999 1.001; stroke-dashoffset: 1; transition: stroke 1.6s ease; }
.gm-scroll__chart .sc-script path { stroke: rgba(80, 70, 52, .2); stroke-width: .55; }
.gm-scroll__chart .sc-glyph path { stroke: #b0852a; stroke-width: .55; }
.gm-scroll__chart .sc-glyph ellipse { stroke-width: .32; }
.gm-scroll__chart .sc-dots circle { stroke-width: .6; }
.gm-scroll.is-glow .gm-scroll__chart { filter: drop-shadow(0 0 .8px rgba(170, 250, 255, .95)) drop-shadow(0 0 5px rgba(60, 220, 230, .55)); animation: gm-flick 3.2s steps(12) infinite; }
.gm-scroll.is-glow .gm-scroll__chart :is(ellipse, circle, path, line) { stroke: #c8fbff; }
.gm-scroll.is-glow .gm-scroll__chart .sc-glyph path { stroke: #7cf4ff; }
.gm-scroll.is-glow .gm-scroll__chart .sc-script path { stroke: rgba(110, 225, 235, .28); }
@keyframes gm-flick { 0%, 100% { opacity: 1; } 30% { opacity: .9; } 32% { opacity: 1; } 61% { opacity: .85; } 63% { opacity: 1; } }
/* the sky the Scroll opens onto: nebulae and stars, turning slowly */
.gm-scroll__cosmos {
  position: absolute; inset: -10%; opacity: 0; visibility: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 35% 28% at 26% 34%, rgba(110, 60, 170, .55), transparent 70%),
    radial-gradient(ellipse 40% 30% at 76% 58%, rgba(30, 150, 170, .5), transparent 70%),
    radial-gradient(ellipse 30% 22% at 58% 18%, rgba(170, 60, 120, .35), transparent 70%),
    radial-gradient(ellipse 50% 40% at 40% 78%, rgba(50, 70, 160, .35), transparent 70%),
    #02030a;
  animation: gm-cosmos 90s linear infinite;
}
.gm-scroll__cosmos::before, .gm-scroll__cosmos::after {   /* two fields of stars */
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 90px 140px, #dff, transparent),
    radial-gradient(1.4px 1.4px at 160px 60px, #fff, transparent), radial-gradient(1px 1px at 230px 190px, #cfe, transparent),
    radial-gradient(1px 1px at 300px 110px, #fff, transparent), radial-gradient(1.6px 1.6px at 60px 220px, #eef, transparent);
  background-size: 320px 260px; opacity: .8;
}
.gm-scroll__cosmos::after { background-size: 470px 390px; background-position: 130px 70px; opacity: .55; animation: gm-twinkle 4s ease-in-out infinite alternate; }
@keyframes gm-cosmos { from { transform: rotate(0deg) scale(1.05); } to { transform: rotate(8deg) scale(1.12); } }
@keyframes gm-twinkle { from { opacity: .3; } to { opacity: .75; } }
/* smoke rising off the waking page */
.gm-parch__smoke { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2s; }
.gm-scroll.is-glow .gm-parch__smoke { opacity: 1; }
.gm-parch__smoke i {
  position: absolute; bottom: 30%; width: 22%; height: 60%; border-radius: 50%; filter: blur(18px); mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(ellipse 30% 50%, rgba(170, 245, 255, .55), transparent 70%); animation: gm-smoke-rise 6s ease-out infinite;
}
.gm-parch__smoke i:nth-child(1) { left: 8%; } .gm-parch__smoke i:nth-child(2) { left: 30%; animation-delay: -1.2s; }
.gm-parch__smoke i:nth-child(3) { left: 52%; animation-delay: -2.6s; } .gm-parch__smoke i:nth-child(4) { left: 70%; animation-delay: -3.7s; }
.gm-parch__smoke i:nth-child(5) { left: 40%; animation-delay: -4.8s; width: 30%; }
@keyframes gm-smoke-rise { 0% { opacity: 0; transform: translateY(10%) scaleX(.6) rotate(0); } 30% { opacity: .7; } 100% { opacity: 0; transform: translateY(-75%) scaleX(1.5) rotate(14deg); } }

/* the vision: one painted or built scene at a time, seen the way an Elder Scroll shows it */
.gm-scroll__visions { opacity: 0; visibility: hidden; }
.gm-vision { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; overflow: hidden; }
.gm-vision.is-on { opacity: 1; visibility: visible; }
.gm-vision > img { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: var(--focus, 50% 50%); will-change: transform; }
.gm-vision__img { filter: sepia(.22) saturate(1.08) contrast(1.04); }
.gm-vision__blur {   /* the radial blur: a blurred, brighter copy, seen only towards the edges */
  filter: blur(9px) brightness(1.25) sepia(.3);
  -webkit-mask: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 42%, #000 92%); mask: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 42%, #000 92%);
}
.gm-vision__tint {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 45%, rgba(255, 236, 200, .55) 100%), linear-gradient(rgba(255, 196, 120, .12), rgba(255, 170, 90, .14));
  mix-blend-mode: screen;
}
/* the painted Dark Anchor: framed like the scene it was painted over (it takes .gm-vision > img), sharp above the edge
   blur, under the vision's warm tint; its portal breathes */
.gm-vision > .gm-vision__anchor { z-index: 1; animation: gm-anchor-pulse 3.2s ease-in-out infinite alternate; }
.gm-vision__tint { z-index: 2; } .gm-vision__cap { z-index: 3; }
@keyframes gm-anchor-pulse { from { filter: brightness(.92) saturate(1); } to { filter: brightness(1.12) saturate(1.15) drop-shadow(0 0 18px rgba(170, 120, 255, .35)); } }
.gm-vision__cap::before {   /* a soft shade so the words read over bright fog or fire */
  content: ''; position: absolute; inset: -30% -12% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(12, 7, 4, .62), transparent 72%);
}
@keyframes gm-glow { from { opacity: .6; } to { opacity: 1; } }
@keyframes gm-turn { to { transform: rotate(360deg); } }
/* the wheel the visions are seen through, as before - centred on the screen, as wide as its longer side, turning slowly -
   now with the painted band of the thirteen constellations (B19, one per vision, in its colours) round the chart's own
   rings. --wr: the turn that brings the vision's sign beside the scene; the outer layer adds a slow drift. --wt: its colour. */
.gm-vision__wheel {
  --wr: 0deg; --wt: 255, 240, 214;
  position: absolute; left: 50%; top: 50%; width: max(100vw, 100vh); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity 1.6s ease; animation: gm-drift 46s ease-in-out infinite alternate;
}
.gm-vision__wheel.is-on { opacity: 1; }
@keyframes gm-drift { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.gm-vision__rings, .gm-vision__wheel-art {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  transform: rotate(var(--wr)); transition: transform 3.2s cubic-bezier(.45, .05, .25, 1), opacity 1.6s ease;
}
.gm-vision__rings { opacity: .22; mix-blend-mode: screen; }
.gm-vision__rings circle, .gm-vision__rings path { fill: none; stroke: rgb(var(--wt)); stroke-width: .22; transition: stroke 1.6s ease; }
.gm-vision__wheel-art { inset: 2%; width: 96%; height: 96%; opacity: 0; object-fit: contain; mix-blend-mode: screen; }   /* its band's outer rim at the screen's long edge */
.gm-vision__wheel-art.is-on { opacity: .32; }
/* each scene's constellation (the painted sigil, B19; drawn in stars without it), lit as the caption is told */
.gm-vision__sign {   /* above the caption, centred - clear of each scene's subject; a dark halo keeps it legible on bright fog */
  position: absolute; left: 13vw; top: 50vh; width: min(24vmin, 240px); aspect-ratio: 1; translate: -50% -62%; pointer-events: none; z-index: 2;   /* beside its own sector of the wheel, turned to the left */
  filter: drop-shadow(0 0 1.5px rgba(30, 14, 40, .95)) drop-shadow(0 0 7px rgba(255, 240, 210, .7)); opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(closest-side, rgba(20, 10, 30, .38), transparent); border-radius: 50%; }
.gm-vision.is-told .gm-vision__sign { opacity: 1; }
.gm-vision__sign img { width: 100%; height: 100%; object-fit: contain; animation: gm-sign-breathe 5s ease-in-out infinite alternate; }
.gm-vision__sign svg { width: 100%; height: 100%; overflow: visible; }
.gm-vision__sign .sign-ring { fill: none; stroke: rgba(255, 236, 200, .35); stroke-width: .35; stroke-dasharray: .006 .014; }
.gm-vision__sign .sign-line { fill: none; stroke: rgba(255, 244, 222, .85); stroke-width: .55; stroke-linecap: round; stroke-dasharray: .999 1.001; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease-out; }
.gm-vision__sign .sign-star { fill: #fffaf0; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .6s ease;
  animation: gm-star 3.2s ease-in-out infinite alternate; }
.gm-vision.is-told .sign-line { stroke-dashoffset: 0; }
.gm-vision.is-told .sign-star { opacity: 1; }
@keyframes gm-star { from { transform: scale(.75); } to { transform: scale(1.25); } }
@keyframes gm-sign-breathe { from { filter: brightness(.9); } to { filter: brightness(1.2); } }
.gm-vision__under { display: block; margin-bottom: .4rem; font: italic 500 .95rem / 1.3 var(--ff-prose); letter-spacing: .04em; color: rgba(255, 240, 214, .8); }
@media (max-width: 820px) { .gm-vision__sign { left: 50%; top: 9vh; width: 30vmin; translate: -50% 0; } }
@keyframes gm-strand { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.gm-vision__cap { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(820px, 90vw); text-align: center; text-shadow: 0 1px 3px #000, 0 0 18px rgba(0, 0, 0, .8); }
.gm-vision__n { display: block; font: 600 clamp(1.4rem, 2.6vw, 2.1rem) / 1 var(--ff-inscr); color: var(--gold-hi); letter-spacing: .14em; }
.gm-vision__place { display: block; margin-top: .45rem; font: 600 clamp(.72rem, 1.1vw, .9rem) / 1.2 var(--ff-inscr); letter-spacing: .3em; text-transform: uppercase; color: #f6e6c4; }
.gm-vision__line { margin-top: .8rem; font: italic 500 clamp(1.15rem, 2.1vw, 1.7rem) / 1.4 var(--ff-prose); color: #fff7e8; }
.gm-vision__cap > * { opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease, transform 1.6s ease; }
.gm-vision.is-told .gm-vision__cap > * { opacity: 1; transform: none; }
.gm-vision.is-told .gm-vision__place { transition-delay: .25s; } .gm-vision.is-told .gm-vision__line { transition-delay: .6s; }

/* white-out, Lepicalcos (the canvas) and a film grain over everything */
.gm-scroll__white { background: radial-gradient(circle at 50% 50%, #fff 0%, #f6fbff 55%, #e6f3ff 100%); opacity: 0; pointer-events: none; }
.gm-scroll__dark { pointer-events: none; }
.gm-scroll__grain {
  pointer-events: none; opacity: .09; mix-blend-mode: overlay; animation: gm-grain 1s steps(6) infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes gm-grain { 0% { background-position: 0 0; } 33% { background-position: -40px 25px; } 66% { background-position: 30px -35px; } 100% { background-position: 0 0; } }

/* the words and the controls */
.gm-scroll__ui { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); width: min(760px, 92vw); text-align: center; display: grid; justify-items: center; gap: .9rem; }
.gm-scroll__place { font: 600 clamp(.68rem, 1vw, .82rem) / 1.3 var(--ff-inscr); letter-spacing: .32em; text-transform: uppercase; color: rgba(236, 226, 205, .7); }
.gm-scroll__line { font: 600 clamp(1.25rem, 2.6vw, 2.1rem) / 1.25 var(--ff-inscr); letter-spacing: .08em; color: #f4ead6; text-shadow: 0 2px 12px #000; }
.gm-scroll__line .w { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(6px); }
.gm-scroll__read {
  margin-top: .6rem; padding: 1rem 2.2rem; cursor: pointer; font: 600 .92rem / 1 var(--ff-inscr); letter-spacing: .3em; text-transform: uppercase;
  color: #f8f0ff; background: radial-gradient(ellipse at 50% 0, rgba(160, 120, 220, .35), rgba(30, 20, 40, .85)); border: 1px solid rgba(200, 180, 255, .55);
  box-shadow: 0 0 0 4px rgba(120, 90, 180, .18), 0 0 30px rgba(150, 120, 230, .25); transition: box-shadow .4s, transform .4s;
}
.gm-scroll__read:hover, .gm-scroll__read:focus-visible { box-shadow: 0 0 0 4px rgba(160, 130, 230, .35), 0 0 46px rgba(170, 140, 255, .5); transform: translateY(-1px); }
.gm-scroll__atlas, .gm-scroll__skip {
  background: none; border: 0; cursor: pointer; font: italic 500 1rem / 1.2 var(--ff-prose); color: rgba(236, 226, 205, .65);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(236, 226, 205, .3);
}
.gm-scroll__atlas:hover, .gm-scroll__skip:hover { color: #fff; }
.gm-scroll__skip { position: absolute; right: 20px; top: 16px; opacity: 0; pointer-events: none; transition: opacity .6s; z-index: 2; }
.gm-scroll.is-reading .gm-scroll__skip { opacity: 1; pointer-events: auto; }
.gm-scroll.is-reading .gm-scroll__ui { pointer-events: none; }
.gm-scroll__hint {
  position: absolute; left: 50%; bottom: 2.2vh; transform: translateX(-50%); width: max-content; max-width: 92vw; text-align: center; line-height: 1.5; opacity: 0; transition: opacity 1s; pointer-events: none;
  font: 600 .66rem / 1 var(--ff-inscr); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 246, 228, .6); text-shadow: 0 1px 3px #000;
}
.gm-scroll.is-vision .gm-scroll__hint { opacity: 1; }
.gm-scroll.is-vision { cursor: pointer; }

/* the replay: a small Scroll in the corner once the atlas is open */
.gm-replay {
  position: fixed; left: 16px; bottom: 16px; z-index: 50; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(20, 12, 24, .82); border: 1px solid rgba(200, 180, 255, .45); box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.gm-replay span { display: block; width: 100%; height: 100%; background: url('/img/glorious-maximus/scroll-closed.webp') center / 140% auto no-repeat; transform: rotate(-35deg); }
.gm-replay:hover { border-color: #d9cbff; }
html.gm-scroll-on .gm-replay, .gm.is-editing .gm-replay { display: none; }
/* the sound of the land: one control, off until pressed (js/glorious-maximus-weather.js) */
.gm-sound {
  position: fixed; left: 72px; bottom: 16px; z-index: 50; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(20, 12, 24, .82); border: 1px solid rgba(216, 178, 94, .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.gm-sound span {
  display: block; width: 100%; height: 100%; background: center / 22px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3d995' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M17 9l4 6M21 9l-4 6'/%3E%3C/svg%3E");
}
.gm-sound[aria-pressed="true"] span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3d995' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E");
}
.gm-sound[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216, 178, 94, .25), 0 6px 18px rgba(0, 0, 0, .5); }
html.gm-scroll-on .gm-sound, .gm.is-editing .gm-sound { display: none; }
.gm.is-command .gm-sound { z-index: 10001; left: auto; right: 20px; bottom: 16px; }
/* the music (includes/creator-soundscape.php): beside the replay Scroll; above the Elder Scroll, so its opening can be
   heard from the first moment; over the War Table's full screen, at the right */
.gm { --cs-accent: var(--gold); --cs-ink: #efe4c8; --cs-dim: #b5a68a; --cs-bg: rgba(20, 12, 10, .86); --cs-font: var(--ff-prose); --cs-heading: var(--ff-inscr); }
.gm .cs { left: 72px; bottom: 16px; z-index: 60; }
html.gm-scroll-on .gm .cs { left: 20px; bottom: 20px; z-index: 20001; }
html.gm-scroll-on .gm .cs-toggle { background: rgba(4, 3, 2, .55); border-color: rgba(216, 178, 94, .3); }
.gm.is-command .cs { z-index: 10001; left: auto; right: 20px; align-items: flex-end; }
.gm.is-editing .cs { display: none; }
/* the mixer (js/glorious-maximus-weather.js): a name on each slider; on a first visit the card stands open with its words */
.gm .cs-now__vol { align-items: center; gap: .6rem; }
.gm-mix__tag { flex: none; min-width: 5.6em; font: 600 .66rem / 1 var(--ff-inscr); letter-spacing: .16em; text-transform: uppercase; color: var(--cs-dim); }
.gm-mix__amb { margin-top: .45rem; }
.gm .cs-now__row .cs-now__vol { flex: 1; }
.gm-mix__links { margin-top: .55rem; text-align: right; }
.gm-mix__intro { margin-bottom: .7rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(216, 178, 94, .25); }
.gm-mix__title { margin: 0 0 .3rem; font: 600 .78rem / 1.3 var(--ff-inscr); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.gm-mix__text { margin: 0; font: italic 500 .95rem / 1.4 var(--ff-prose); color: #e9dcc0; }
.cs.is-intro :is(.cs-now__label, .cs-now__title, .cs-now__credit) { display: none; }
.cs.is-intro .cs-now { border-color: rgba(216, 178, 94, .45); }
.cs.is-intro .cs-toggle { animation: gm-mix-call 2.4s ease-in-out infinite; }
@keyframes gm-mix-call { 50% { box-shadow: 0 0 0 4px rgba(216, 178, 94, .28), 0 0 22px rgba(255, 200, 110, .35); } }
@media (prefers-reduced-motion: reduce) { .cs.is-intro .cs-toggle { animation: none; } }
@media (max-width: 560px) {
  .gm .cs-now { width: calc(100vw - 72px - 12px); }   /* beside the replay Scroll, inside the screen */
  /* on the Scroll the player goes to the top, button first, so the Scroll's own words and buttons stay clear below */
  html.gm-scroll-on .gm .cs { left: 12px; top: 12px; bottom: auto; flex-direction: column-reverse; }
  html.gm-scroll-on .gm .cs-now { width: calc(100vw - 24px); }
  .gm-mix__text { font-size: .88rem; }
}
/* ── VII. the Scroll closes (the coda in js/glorious-maximus-siege.js) ──────────
   One sticky stage under 320vh: --ro the Library's light, --ink the chart, --roll the parchment (1 hanging -> 0 rolled
   up), --cg the case's glow, --mo the moths scattering, --wo the words, --eo the ending. */
.gm-coda { position: relative; z-index: 2; height: 320vh; background: #050307; }
.gm-coda__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #050307;
  --ro: 0; --ink: 1; --roll: 1; --cg: 0; --mo: 0; --wo: 0; --eo: 0; }
.gm-coda__room { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; object-position: 50% 53%;
  opacity: calc(var(--ro) * (1 - var(--eo) * .45)); filter: brightness(.55) saturate(.9); }
.gm-coda__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 30% at 50% 24%, rgba(255, 236, 190, calc(.12 + var(--cg) * .35)), transparent 70%),
              radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(3, 2, 5, .85)); }
.gm-coda__scroll {   /* the case held level near the top (its metal 39 .. 61 % of the plate's height), the parchment below it */
  position: absolute; left: 50%; top: 6vh; width: min(70vw, 104vh); aspect-ratio: 2 / 1; translate: -50% 0;
  transform: translateY(calc(var(--eo) * -16vh)) scale(calc(1 - var(--eo) * .3)); transform-origin: 50% 30%; opacity: calc(1 - var(--eo) * .25);
}
.gm-coda__case { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  filter: drop-shadow(0 0 calc(var(--cg) * 26px) rgba(255, 220, 140, calc(var(--cg) * .9))) brightness(calc(1 + var(--cg) * .25)); }
.gm-coda__parch {
  position: absolute; left: 21%; top: 50%; width: 58%; height: min(56vh, 70vw); z-index: 1;
  clip-path: inset(0 0 calc((1 - var(--roll)) * 100%) 0);
  background: linear-gradient(rgba(40, 28, 12, .5), transparent 8%, transparent 90%, rgba(40, 28, 12, .35)),
              url('/img/glorious-maximus/tex-parchment.webp') center / cover, #e7d9b8;
  box-shadow: inset 0 0 40px rgba(90, 60, 20, .45), 0 18px 40px rgba(0, 0, 0, .55);
}
.gm-coda__chart { position: absolute; inset: 6% 8%; width: 84%; height: 88%; opacity: var(--ink); overflow: visible; }
.gm-coda__chart * { fill: none !important; stroke: rgba(70, 42, 16, .62) !important; stroke-width: .35 !important; stroke-dashoffset: 0 !important; opacity: 1 !important; visibility: visible !important; }
.gm-coda__bar {   /* the weighted bar at the parchment's foot, rising as it rolls up */
  position: absolute; left: 19%; width: 62%; height: 1.6%; z-index: 1; border-radius: 4px; top: 50%;
  transform: translateY(calc(var(--roll) * min(56vh, 70vw)));
  background: linear-gradient(#fff0c2, #d8b25e 40%, #7d5a22); box-shadow: 0 4px 10px rgba(0, 0, 0, .6);
  opacity: calc(var(--roll) * 4);
}
.gm-coda__moth {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; z-index: 3; pointer-events: none;
  background: url('/img/glorious-maximus/moths-strip.webp') 0 0 / 800% 100%; animation: gm-coda-flap .6s steps(7) infinite; animation-delay: var(--md);
  opacity: calc(min(1, var(--mo) * 6) * (1 - max(0, var(--mo) - .7) * 3.3));
  transform: translate(calc(var(--dx) * var(--mo)), calc(var(--dy) * var(--mo))) scale(calc(.6 + var(--mo) * .5));
}
@keyframes gm-coda-flap { to { background-position: calc(800% / 8 * 7) 0; } }
.gm-coda__words { position: absolute; left: 50%; bottom: 9vh; width: min(760px, 90vw); translate: -50% 0; text-align: center; z-index: 3;
  opacity: calc(var(--wo) * (1 - var(--eo))); }
.gm-coda__kicker { margin: 0 0 1rem; font: 600 .82rem / 1 var(--ff-inscr); letter-spacing: .4em; text-transform: uppercase; color: #d9c7a8; text-shadow: 0 1px 3px #000; }
.gm-coda__line { margin: 0 0 .7rem; font: italic 500 clamp(1.15rem, 2vw, 1.55rem) / 1.45 var(--ff-prose); color: #f6ead0; text-shadow: 0 1px 3px #000, 0 0 20px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(8px); transition: opacity 1s ease, transform 1s ease; }
.gm-coda__line.is-on { opacity: 1; transform: none; }
.gm-coda__end { position: absolute; left: 50%; top: 52%; width: min(1100px, 94vw); translate: -50% -30%; text-align: center; z-index: 4;
  opacity: var(--eo); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.gm-coda__end.is-on { pointer-events: auto; }
.gm-coda__seal { width: 64px; height: 64px; background: url('/img/glorious-maximus/wax-seal.webp') center / contain no-repeat; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.gm-coda__name { margin: .2rem 0 0; font: 600 clamp(1.7rem, 4.6vw, 4.2rem) / 1.05 var(--ff-inscr); letter-spacing: .12em; white-space: nowrap;
  background: linear-gradient(180deg, #fff1c8, var(--gold-hi) 32%, var(--gold) 62%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .7)); }
.gm-coda__sub { margin: 0; font: 600 .82rem / 1.4 var(--ff-inscr); letter-spacing: .3em; text-transform: uppercase; color: #f1dcb4; }
.gm-coda__count { margin: .6rem 0 1rem; font: italic 500 1.12rem / 1.4 var(--ff-prose); color: #e6d6b6; }
.gm-coda__count b { font: 600 1.2rem / 1 var(--ff-inscr); font-style: normal; color: var(--gold-hi); letter-spacing: .06em; }
.gm-coda__ways { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1rem; }
.gm-btn--ghost { background: rgba(20, 10, 8, .55); box-shadow: 0 0 0 1px rgba(216, 178, 94, .25); cursor: pointer; }
/* phones and reduced motion: the last frame */
.gm-coda.is-static { height: auto; }
.gm-coda.is-static .gm-coda__stage { position: relative; min-height: 100vh; --ro: 1; --roll: 0; --cg: .6; --mo: 0; --wo: 0; --eo: 1; }
.gm-coda.is-static .gm-coda__end { position: relative; left: auto; top: auto; translate: none; margin: 46vh auto 8vh; }
.gm-coda.is-static .gm-coda__words { display: none; }
.gm-coda.is-static .gm-coda__scroll { top: 12vh; width: 92vw; transform: none; opacity: 1; }
.gm-coda.is-static .gm-coda__end { margin-top: 38vh; }

/* "Music on this page": a leaf of the Imperial archive - porphyry between gilt bands, the laurel over the title, each track
   a parchment plaque with its wax seal (numbered), its credit, where it plays and a gilt link to the official release */
.gm .cs-credits {
  position: relative; z-index: 2; max-width: none; margin: 0; counter-reset: gm-track;
  padding: 7rem max(1.25rem, calc(50% - 34rem)) 6.5rem; color: #d9cbb0;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(143, 31, 29, .28), transparent 70%),
              linear-gradient(rgba(14, 6, 6, .72), rgba(10, 5, 4, .9)), url('/img/glorious-maximus/tex-porphyry.webp') center / 900px, #1a0c0b;
}
.gm .cs-credits::before, .gm .cs-credits::after {   /* the gilt bands, top and bottom */
  content: ''; position: absolute; left: 0; right: 0; height: 26px;
  background: url('/img/glorious-maximus/porphyry-band.webp') center / auto 300% repeat-x; filter: saturate(.9) brightness(.95);
  box-shadow: 0 0 0 1px rgba(243, 217, 149, .35), 0 6px 18px rgba(0, 0, 0, .55);
}
.gm .cs-credits::before { top: 0; } .gm .cs-credits::after { bottom: 0; transform: scaleY(-1); }
.gm .cs-credits__title {
  position: relative; margin: 0 auto .9rem; padding-top: 74px; width: fit-content; text-align: center;
  font: 600 clamp(1.6rem, 3vw, 2.4rem) / 1.1 var(--ff-inscr); letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff1c8, var(--gold-hi) 35%, var(--gold) 65%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7));
}
.gm .cs-credits__title::before {   /* the laurel crowning it */
  content: ''; position: absolute; left: 50%; top: 0; width: 120px; height: 62px; transform: translateX(-50%);
  background: url('/img/glorious-maximus/laurel.webp') center / contain no-repeat; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6));
}
.gm .cs-credits__intro {
  position: relative; max-width: 40rem; margin: 0 auto 3rem; padding-bottom: 2rem; text-align: center;
  font: italic 500 1.08rem / 1.6 var(--ff-prose); color: #e6d6b6;
}
.gm .cs-credits__intro::after {   /* a rule with the double lozenge at its heart */
  content: ''; position: absolute; left: 50%; bottom: 0; width: min(420px, 80%); height: 18px; transform: translateX(-50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M15 1 L24 9 L15 17 L6 9 Z' fill='none' stroke='%23d8b25e' stroke-width='1.6'/%3E%3Cpath d='M15 5.5 L19 9 L15 12.5 L11 9 Z' fill='%23d8b25e'/%3E%3C/svg%3E") center / 30px 18px no-repeat,
    linear-gradient(90deg, transparent, rgba(216, 178, 94, .7) 30%, transparent 46%, transparent 54%, rgba(216, 178, 94, .7) 70%, transparent) center / 100% 1px no-repeat;
}
.gm .cs-credits__intro a { color: var(--gold-hi); }
.gm .cs-credits__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1.1rem 1.3rem; border: 0; }
.gm .cs-credits__list li {
  position: relative; counter-increment: gm-track; gap: .25rem; padding: 1.15rem 1.3rem 1.15rem 5.1rem; border: 0; border-radius: 3px; color: #4a3622;
  background: linear-gradient(rgba(255, 248, 230, .55), rgba(240, 225, 192, .4)), url('/img/glorious-maximus/tex-parchment.webp') center / 520px, #e9dcbc;
  box-shadow: inset 0 0 0 1px rgba(138, 106, 44, .55), inset 0 0 0 4px rgba(255, 246, 220, .45), inset 0 0 0 5px rgba(138, 106, 44, .4), inset 0 0 30px rgba(120, 80, 30, .25), 0 10px 24px rgba(0, 0, 0, .45);
}
.gm .cs-credits__list li::before {   /* its wax seal, numbered */
  content: counter(gm-track, upper-roman); position: absolute; left: 1rem; top: 1rem; width: 52px; height: 52px; display: grid; place-items: center;
  font: 700 .8rem / 1 var(--ff-inscr); letter-spacing: .04em; color: #f6dcae; text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
  background: url('/img/glorious-maximus/wax-seal.webp') center / contain no-repeat; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}
.gm .cs-credits__name { font: 600 1.06rem / 1.25 var(--ff-inscr); letter-spacing: .06em; color: #5a1512; }
.gm .cs-credits__by { font: 500 .92rem / 1.45 var(--ff-prose); color: #4a3622; }
.gm .cs-credits__where { font: italic 500 .9rem / 1.4 var(--ff-prose); color: #6b5232; }
.gm .cs-credits__release {
  justify-self: start; margin-top: .35rem; padding: .38rem .8rem .36rem; border-radius: 2px; text-decoration: none;
  font: 600 .68rem / 1 var(--ff-inscr); letter-spacing: .18em; text-transform: uppercase; color: #fff1cf;
  background: linear-gradient(180deg, #a42a23, #6e1513); border: 1px solid #d8b25e; box-shadow: 0 0 0 2px rgba(143, 31, 29, .25), 0 3px 8px rgba(0, 0, 0, .3);
  transition: filter .2s;
}
.gm .cs-credits__release::after { content: ' →'; }
.gm .cs-credits__release:hover, .gm .cs-credits__release:focus-visible { filter: brightness(1.18); }
@media (max-width: 560px) { .gm .cs-credits__list li { padding-left: 4.4rem; } .gm .cs-credits__list li::before { width: 44px; height: 44px; left: .8rem; } }

/* the name is chiselled letter by letter when the atlas opens */
.gm-band__name.is-split { background: none; }
.gm-band__name .ch {
  display: inline-block; white-space: pre; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
}

/* phones: the stage stays, the plaque spans the width at the bottom */
@media (min-width: 821px) { .gm-band__name { white-space: nowrap; } }
@media (max-width: 820px) {
  .gm-step--stop { justify-content: center; align-items: flex-end; min-height: 150vh; padding-bottom: 6vh; }
  .gm-plaque { padding: 1.2rem 1.1rem 1rem; }
  .gm-plaque__story { display: none; }   /* the plaque must leave the map visible above it */
  .gm-path { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; }
  .gm-path li { flex: 0 0 auto; }
  .gm-marker { width: 40px; height: 40px; margin: -35.2px 0 0 -20px; transform-origin: 20px 35.2px; }
  .gm-band__name { letter-spacing: .06em; }
}
/* reduced motion: no drift, no glint; the camera cuts instead of flying (script) */
@media (prefers-reduced-motion: reduce) {
  .gm-glint::before, .gm-sky__drift { animation: none; }
  .gm-build__stone { clip-path: none; } .gm-build__scaffold, .gm-build__ink { display: none; }
  .gm-scroll__shaft, .gm-scroll__case, .gm-vision__storm, .gm-vision__anchor, .gm-vision__rings, .gm-vision__wheel, .gm-vision__sign img, .gm-vision__sign .sign-star, .gm-scroll__grain { animation: none; }
  .gm-vision__blur { display: none; }
  .gm-table__fire, .gm-table__pin.is-gilded { animation: none; }
}