/* THE GREAT STUPA — presentation look.
   House grammar carried over from the GlassWorks visitor pages:
     gold  #e8d5b0  = warmth / what wakes and what you have done
     ink   #f0ede8  = structure, deliberately quiet
     dark  #0a0907  = the ground every pane sits on
   Faces: Cinzel for the carved title, Cormorant Garamond for reading,
   Jost for lettered UI. Every face has a real fallback.

   The engine's own chrome is hidden, not deleted — the viewer JS
   dereferences those ids at boot and a missing node white-screens it. */

:root {
  --gs-gold: #e8d5b0;
  --gs-ink: #f0ede8;
  --gs-ink-dim: rgba(240, 237, 232, .62);
  --gs-dark: #0a0907;
  /* lighter than the first cut — the slides read too dark over this scan */
  --gs-glass: rgba(46, 42, 34, .32);
  --gs-line: rgba(232, 213, 176, .55);
  --gs-title: 'Cinzel', 'Times New Roman', serif;
  --gs-serif: 'Cormorant Garamond', Georgia, serif;
  --gs-sans: 'Jost', 'Segoe UI', sans-serif;
  --gs-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 22px rgba(0, 0, 0, .45);
}

html, body { margin: 0; padding: 0; background: var(--gs-dark); overflow: hidden; }

/* The stock viewer UI: present for the engine, invisible to the visitor.
   Open the page with ?ui to reveal the whole stock SuperSplat control bar
   alongside this overlay — pure engine navigation, for testing or taste. */
#ui { display: none !important; }
body.gs-stockui #ui { display: block !important; }

/* ── the overlay root ─────────────────────────────────────────────────
   Everything of ours lives under #gs-ui, which ignores the pointer;
   individual controls opt back in. The canvas keeps its events — the
   engine's own orbit/fly/walk input needs them in rest and roam. */
#gs-ui {
  position: fixed; inset: 0; z-index: 500;
  pointer-events: none;
  font-family: var(--gs-sans);
  color: var(--gs-ink);
}

/* ── top bar — the identity and the links, floating free over the scan.
   NO strip: the glass slab that used to box them read as a black bar
   across the top and ate the headroom a statue title needs to stand
   above the piece. Legibility now comes from the text shadow the ink
   already carries, which is what the rest of the overlay relies on. ── */
#gs-topbar {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 26px 12px;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
/* The bar is gone, but a white lockup still has to survive a PALE scan —
   Dzambhala stands against a near-white wall, where the logo simply
   vanished once the slab went. This is a scrim, not a bar: it fades to
   nothing with no edge to read as a box, and being a gradient it costs
   no headroom. */
#gs-topbar::before {
  content: ''; position: absolute; left: -12px; right: -12px; top: -12px;
  height: 150px; pointer-events: none; z-index: -1;
  background: linear-gradient(to bottom,
    rgba(10, 9, 7, .58) 0%, rgba(10, 9, 7, .34) 42%, rgba(10, 9, 7, 0) 100%);
}
body.gs-in #gs-topbar { opacity: 1; pointer-events: auto; }
/* the landing's own lockup, small — same artwork, so the identity does
   not change face between the landing and the tour */
#gs-brand-logo {
  height: 38px; width: auto; display: block;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6));
}
/* fallback wordmark for a project with no logo — in the SITE's face
   (Poppins), not the display serif, so it matches the landing too */
#gs-brand {
  display: none;
  font: 600 15px/1 'Poppins', 'Segoe UI', sans-serif;
  letter-spacing: .18em; text-indent: .18em;
  color: var(--gs-ink); text-shadow: var(--gs-shadow);
  white-space: nowrap;
}
#gs-topbar nav { display: flex; gap: 26px; align-items: center; }
.gs-navlink {
  pointer-events: auto; cursor: pointer;
  font: 500 11.5px/1 'Poppins', 'Segoe UI', sans-serif;   /* the site's face */
  letter-spacing: .22em; text-indent: .22em;
  color: var(--gs-ink-dim); text-decoration: none; text-shadow: var(--gs-shadow);
  padding: 10px 2px; transition: color .25s ease;
}
.gs-navlink:hover { color: var(--gs-gold); }
/* HOME sits beside WEBSITE and CONTACT, so it wears their exact face —
   it was the odd one out in Jost while they were in the site's Poppins */
#gs-home {
  pointer-events: auto; cursor: pointer;
  font: 500 11.5px/1 'Poppins', 'Segoe UI', sans-serif;
  letter-spacing: .22em; text-indent: .22em;
  color: var(--gs-ink); background: none; border: none;
  text-shadow: var(--gs-shadow);
  padding: 10px 2px;
  transition: color .25s ease;
}
#gs-home:hover { color: var(--gs-gold); }

/* ── landing ──────────────────────────────────────────────────────── */
#gs-landing {
  position: absolute; inset: 0; z-index: 40;
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center,
    rgba(10, 9, 7, .48) 0%, rgba(10, 9, 7, .78) 62%, rgba(10, 9, 7, .96) 100%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 1; visibility: visible;
  transition: opacity .85s ease, visibility 0s linear 0s;
}
/* A faded-out landing must be INERT, not merely invisible. `pointer-events:
   none` on this container is NOT enough: a descendant that declares
   `pointer-events: auto` — which .gs-mode does — wins over its parent's
   none and stays hittable. BEGIN TOUR sat invisible dead centre of the
   screen (x554-812, y442-513 at 1600x900) for the whole tour, so a plain
   click "on the statue" restarted the tour at hotspot 0 — reported as
   "it always brings me back to the Jade Buddha". A drag never fires a
   button click, which is why orbiting was safe. `visibility: hidden`
   removes it from hit-testing outright; the delayed transition lets the
   fade finish first, and the descendant rule is belt and braces. */
#gs-landing.gone {
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .85s ease, visibility 0s linear .85s;
}
#gs-landing.gone * { pointer-events: none; }
#gs-land-lockup { width: min(420px, 74vw); margin-bottom: 30px; }
#gs-land-logo {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5));
}
/* BENDIGO · VICTORIA in the lockup's own face (Poppins), its left edge
   on the left edge of "The Great Stupa" text inside the logo (the text
   begins ~30.5% into the artwork, right of the pictogram) */
#gs-land-sub {
  text-align: left; margin: 7px 0 0 34.6%;   /* the text in the artwork starts at 380/1097 — measured */
  font: 600 clamp(13px, 2.05vw, 19.5px)/1 'Poppins', 'Segoe UI', sans-serif;
  letter-spacing: .045em; color: var(--gs-ink); text-transform: uppercase;
  text-shadow: var(--gs-shadow); font-style: normal; text-indent: 0;
}
#gs-land-eyebrow {
  font: 300 12px/1.6 var(--gs-sans); letter-spacing: .42em; text-indent: .42em;
  color: var(--gs-gold); text-transform: uppercase; margin-bottom: 26px;
}
#gs-land-eyebrow:empty { display: none; }
/* no flash of the fallback title before the script decides — hidden
   until fitTitle() shows it for logo-less projects */
#gs-land-title { display: none; }
/* The title is a BLOCK: "THE GREAT" on one line, "STUPA" bigger beneath,
   both the same width so the two lines read as one rectangle of type.
   tour.js measures the rendered lines after the fonts load and scales the
   top line so the widths actually match — CSS alone can't promise it. */
#gs-land-title {
  font-family: var(--gs-title); font-weight: 400;
  font-size: clamp(58px, 11vw, 148px); line-height: 1;
  margin: 0 24px; color: var(--gs-ink); text-shadow: var(--gs-shadow);
}
#gs-lt1 {
  display: block; font-size: .4em; line-height: 1.1;
  letter-spacing: .3em; margin-bottom: .06em;
}
#gs-lt2 {
  display: block; font-size: 1em; line-height: .95;
  letter-spacing: .12em;
}
#gs-land-load {
  font: 300 11.5px/1 var(--gs-sans); letter-spacing: .34em; text-indent: .34em;
  color: var(--gs-ink-dim); min-height: 46px; margin-top: 30px;
}
#gs-land-modes { display: none; gap: 22px; }
#gs-land-modes.ready { display: flex; }
#gs-land-load.ready { display: none; }
/* The pane is FROSTED, not tinted. It used to carry a 30% warm-black
   wash on top of the landing's own vignette, which read as a dark shape
   behind the label; with the label now big enough to hold its own, the
   pane only needs the out-of-focus effect. Background stays fully
   transparent and the brightness lift keeps it reading as glass rather
   than a hole. Hover brightens — it used to go DARKER (rgba(10,9,7,.6)),
   which fought the whole idea. */
.gs-mode {
  pointer-events: auto; cursor: pointer;
  min-width: 190px; padding: 19px 34px;
  background: transparent; border: 1px solid var(--gs-line); border-radius: 11px;
  backdrop-filter: blur(16px) brightness(1.9); -webkit-backdrop-filter: blur(16px) brightness(1.9);
  color: var(--gs-ink);
  font: 500 15px/1 'Poppins', 'Segoe UI', sans-serif;
  letter-spacing: .22em; text-indent: .22em;
  text-shadow: var(--gs-shadow);
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.gs-mode:hover { border-color: var(--gs-gold); color: var(--gs-gold); background: rgba(232, 213, 176, .12); }
/* The details live along the FOOT of the landing — pulled out of the
   centred flex column and pinned to the bottom, so the lockup and the
   two buttons own the middle of the screen on their own. */
#gs-land-links {
  position: absolute; left: 24px; right: 24px; bottom: 30px;
  margin-top: 0;
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(28px, 6vw, 82px); flex-wrap: wrap;
}
.gs-land-col {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  max-width: 260px;
}
.gs-land-col.gone { display: none; }
/* PHONE has no link to sit behind it, but must match its siblings */
.gs-navlabel { pointer-events: none; cursor: default; }
#gs-land-links .gs-navlink {
  font: 500 13px/1 'Poppins', 'Segoe UI', sans-serif;
  color: rgba(240, 237, 232, .8); letter-spacing: .14em; text-indent: .14em;
  padding: 4px 2px;
}
.gs-land-detail {
  pointer-events: auto; cursor: pointer; text-decoration: none;
  font: 400 13px/1.5 'Poppins', 'Segoe UI', sans-serif;
  color: rgba(240, 237, 232, .8); letter-spacing: .02em;
  text-align: center; text-shadow: var(--gs-shadow);
  transition: color .25s ease;
}
/* the address runs to two lines — it is a destination, not a link label */
#gs-address-detail { max-width: 250px; }
.gs-land-detail:hover { color: var(--gs-gold); }

/* ── the guided-tour HUD ──────────────────────────────────────────────
   One wide glass slab along the bottom, its edges meeting the two
   corner pills so the whole bottom row lines up. It rises slowly as
   the camera settles into a stop, and stays up while the visitor
   orbits around the hotspot — nothing dismisses it but FREE ROAM. */
#gs-hud {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  pointer-events: auto;
  background: var(--gs-glass);
  border: 1px solid var(--gs-line); border-radius: 14px;
  backdrop-filter: blur(16px) brightness(1.35) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) brightness(1.35) saturate(1.05);
  padding: 42px 26px 18px;
  text-align: center;
  transition: transform 1.1s cubic-bezier(.32, 0, .18, 1), opacity .9s ease;
}
#gs-hud.away { transform: translateY(190%); opacity: 0; pointer-events: none; }
/* the heading rides its own little plaque, straddling the slide's top
   edge — same glass, same darkness as the slide beneath it */
#gs-hud-title {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -52%);
  font-family: var(--gs-title); font-weight: 400; font-size: 22px;
  letter-spacing: .1em; text-indent: .1em; color: var(--gs-ink);
  white-space: nowrap; max-width: calc(100vw - 56px); overflow: hidden;
  background: var(--gs-glass);
  border: 1px solid var(--gs-line); border-radius: 12px;
  padding: 10px 28px 9px;
  backdrop-filter: blur(16px) brightness(1.35) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) brightness(1.35) saturate(1.05);
}
#gs-hud-desc {
  font-family: var(--gs-serif); font-size: 19px; line-height: 1.6;
  color: rgba(247, 245, 240, .85); margin: 0 auto; max-width: 74ch;
}
/* PREV and NEXT hold the edges of the slide; EXPLORE rides the centre */
#gs-hud-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 15px;
}
#gs-dots { justify-content: center; margin-top: 14px; }
.gs-btn {
  pointer-events: auto; cursor: pointer;
  background: none; border: 1px solid rgba(240, 237, 232, .28); border-radius: 10px;
  color: var(--gs-ink); padding: 13px 22px; min-height: 44px;
  font: 400 11px/1 var(--gs-sans); letter-spacing: .26em; text-indent: .26em;
  transition: border-color .25s ease, color .25s ease, transform .15s ease, background .25s ease;
}
.gs-btn:hover { border-color: var(--gs-gold); color: var(--gs-gold); transform: translateY(-1px); }
.gs-btn:active { transform: translateY(0); background: rgba(232, 213, 176, .1); }
.gs-btn:focus-visible { outline: 2px solid var(--gs-gold); outline-offset: 2px; }
.gs-btn.gold { border-color: var(--gs-line); color: var(--gs-gold); }
.gs-btn.gold:hover { background: rgba(232, 213, 176, .12); }
.gs-btn[disabled] { opacity: .3; pointer-events: none; }
#gs-dots { display: flex; gap: 8px; }
.gs-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(240, 237, 232, .3); transition: background .3s ease, transform .3s ease;
}
.gs-dot.here { background: var(--gs-gold); transform: scale(1.35); }

/* ── the instruction line — fades itself out; rides above the slide
   whenever the slide is up ── */
#gs-hint {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  font: 300 16.5px/1.7 var(--gs-sans); letter-spacing: .24em; text-indent: .24em;
  color: var(--gs-ink); text-shadow: var(--gs-shadow); text-align: center;
  opacity: 0; transition: opacity .8s ease, bottom .5s ease; white-space: nowrap;
}
#gs-hud:not(.away) ~ #gs-hint { bottom: 310px; }
#gs-hint.show { opacity: 1; }
#gs-hint b { color: var(--gs-gold); font-weight: 400; }

/* ── the MARK gizmo (?mark) — save this exact view as a numbered mark ── */
#gs-mark {
  position: absolute; right: 26px; bottom: 96px;
  pointer-events: auto; cursor: pointer;
  display: none; flex-direction: column; align-items: center; gap: 4px;
  width: 110px; box-sizing: border-box; padding: 11px 10px 10px;
  background: var(--gs-glass);
  border: 1px solid var(--gs-line); border-radius: 12px;
  backdrop-filter: blur(14px) brightness(1.3); -webkit-backdrop-filter: blur(14px) brightness(1.3);
  color: var(--gs-gold);
  transition: color .25s ease, border-color .25s ease;
}
#gs-mark.show { display: flex; }
#gs-mark:hover { border-color: var(--gs-gold); }
#gs-mark-glyph { font-size: 20px; line-height: 1; }
#gs-mark-word { font: 400 10.5px/1 var(--gs-sans); letter-spacing: .26em; text-indent: .26em; }

/* ── the two corner pills: NAV (bottom right, walk→orbit→fly) and
   FREE ROAM / TOUR (bottom left) — identical layout and sizing ── */
#gs-nav, #gs-roampill {
  position: absolute; bottom: 26px;
  pointer-events: auto; cursor: pointer;
  display: none; flex-direction: column; align-items: center; gap: 6px;
  width: 110px; box-sizing: border-box; padding: 13px 10px 11px;
  background: var(--gs-glass);
  border: 1px solid var(--gs-line); border-radius: 12px;
  backdrop-filter: blur(14px) brightness(1.3); -webkit-backdrop-filter: blur(14px) brightness(1.3);
  color: var(--gs-ink);
  transition: color .25s ease, border-color .25s ease;
}
#gs-nav { right: 26px; }
#gs-roampill { left: 26px; }
#gs-nav.show, #gs-roampill.show { display: flex; }
#gs-nav:hover, #gs-roampill:hover { color: var(--gs-gold); border-color: var(--gs-gold); }
#gs-nav svg, #gs-roampill svg { fill: currentColor; }
#gs-nav-word, #gs-roampill-word {
  font: 400 10.5px/1 var(--gs-sans); letter-spacing: .26em; text-indent: .26em;
}

/* ── gaze layer ───────────────────────────────────────────────────────
   The GlassWorks gaze model: every hotspot is a dim orb; the one nearest
   the centre of the screen (inside the gaze circle) wakes and breathes.
   Clicking a woken orb flies you in and re-opens the tour there. */
#gs-gaze { position: absolute; inset: 0; overflow: hidden; display: none; }
#gs-gaze.on { display: block; }
/* A sleeping orb is not clickable at all, and the awake one has a
   modest target — a wide always-on hit box meant a click anywhere near
   a hotspot threw you into the guided tour. */
.gs-orb {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none; cursor: pointer;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
}
.gs-orb.awake .core { pointer-events: auto; }
.gs-orb .core {
  width: var(--d, 10px); height: var(--d, 10px); border-radius: 50%;
  background: var(--gs-gold); opacity: var(--o, .16);
  box-shadow: 0 0 12px rgba(232, 213, 176, .0);
  transition: width .26s ease, height .26s ease, opacity .26s ease, box-shadow .26s ease;
}
.gs-orb.awake .core {
  --d: 22px; --o: 1;
  box-shadow: 0 0 18px rgba(232, 213, 176, .85), 0 0 46px rgba(232, 213, 176, .4);
  animation: gsBreathe 3.6s ease-in-out infinite;
}
@keyframes gsBreathe {
  0%, 100% { box-shadow: 0 0 18px rgba(232, 213, 176, .85), 0 0 46px rgba(232, 213, 176, .4); }
  50% { box-shadow: 0 0 26px rgba(232, 213, 176, 1), 0 0 64px rgba(232, 213, 176, .55); }
}
.gs-orb .tag {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px);
  white-space: nowrap;
  font: 400 11px/1 var(--gs-sans); letter-spacing: .3em; text-indent: .3em;
  color: var(--gs-ink); text-shadow: var(--gs-shadow);
  opacity: 0; transition: opacity .3s ease .1s;
}
.gs-orb.awake .tag { opacity: 1; }
#gs-reticle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(240, 237, 232, .0); border: 1px solid rgba(240, 237, 232, .25);
  transition: transform .3s ease, border-color .3s ease;
}
#gs-gaze.hot #gs-reticle { transform: translate(-50%, -50%) scale(1.6); border-color: rgba(232, 213, 176, .6); }

/* ── titles that stand IN the scan ────────────────────────────────────
   Anchored to a 3-D point (authored in the Mark Studio with T), they
   scale with distance and fade in when their stop is reached. */
#gs-titles { position: absolute; inset: 0; overflow: hidden; }
.gs-title {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap; text-align: center;
  font-family: var(--gs-title); font-weight: 400;
  letter-spacing: .12em; text-indent: .12em;
  color: var(--gs-ink); text-shadow: var(--gs-shadow);
  opacity: 0; transition: opacity .9s ease;
  will-change: transform;
}
.gs-title.show { opacity: 1; }
.gs-title .sub {
  display: block; margin-top: .45em;
  font-family: var(--gs-sans); font-weight: 300;
  font-size: .42em; letter-spacing: .34em; text-indent: .34em;
  color: var(--gs-gold);
}

/* ── explore captions — big serif titles over the flyaround ── */
#gs-caption {
  position: absolute; left: 50%; top: 16%; transform: translateX(-50%);
  text-align: center; width: min(760px, 92vw);
  opacity: 0; transition: opacity 1.1s ease;
}
#gs-caption.show { opacity: 1; }
#gs-caption .cap-eyebrow {
  font: 300 11px/1 var(--gs-sans); letter-spacing: .4em; text-indent: .4em;
  color: var(--gs-gold); text-transform: uppercase; margin-bottom: 14px;
}
#gs-caption .cap-title {
  font-family: var(--gs-title); font-weight: 400;
  font-size: clamp(28px, 4.6vw, 54px); letter-spacing: .12em; text-indent: .12em;
  color: var(--gs-ink); text-shadow: var(--gs-shadow);
}

/* fade veil for mode changes — a slow blink, never a hard cut */
#gs-veil {
  position: absolute; inset: 0; background: var(--gs-dark);
  opacity: 0; transition: opacity .5s ease; z-index: 30;
}
#gs-veil.on { opacity: .55; }

/* ── the editor (?edit only) ── */
#gs-edit {
  position: absolute; right: 16px; top: 76px; width: 300px;
  pointer-events: auto;
  background: rgba(10, 9, 7, .88); border: 1px solid rgba(240, 237, 232, .25);
  border-radius: 10px; padding: 14px; z-index: 60;
  font: 400 12px/1.6 var(--gs-sans); color: var(--gs-ink);
  max-height: calc(100vh - 110px); overflow: auto; display: none;
}
#gs-edit.on { display: block; }
#gs-edit h3 { margin: 0 0 8px; font: 400 12px/1 var(--gs-sans); letter-spacing: .2em; color: var(--gs-gold); }
#gs-edit .row { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
#gs-edit button {
  cursor: pointer; background: none; border: 1px solid rgba(240, 237, 232, .3);
  border-radius: 6px; color: var(--gs-ink); padding: 6px 9px; font: 400 11px/1 var(--gs-sans);
}
#gs-edit button:hover { border-color: var(--gs-gold); color: var(--gs-gold); }
#gs-edit input {
  width: 100%; box-sizing: border-box; background: rgba(240, 237, 232, .08);
  border: 1px solid rgba(240, 237, 232, .25); border-radius: 6px;
  color: var(--gs-ink); padding: 6px 8px; font: 400 12px/1.4 var(--gs-sans);
}
#gs-edit .hs { padding: 4px 6px; border-radius: 5px; cursor: pointer; }
#gs-edit .hs.sel { background: rgba(232, 213, 176, .16); color: var(--gs-gold); }
#gs-edit .mono { font: 400 10.5px/1.5 Consolas, monospace; color: var(--gs-ink-dim); word-break: break-all; }
#gs-crosshair {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; display: none; z-index: 55;
}
#gs-crosshair.on { display: block; }
#gs-crosshair::before, #gs-crosshair::after {
  content: ''; position: absolute; background: rgba(232, 213, 176, .8);
}
#gs-crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; }
#gs-crosshair::after { top: 50%; left: 0; right: 0; height: 1px; }

/* ── small screens: the same system, tightened ── */
@media (max-width: 760px) {
  #gs-hud { padding: 32px 14px 12px; }
  #gs-hud-title { font-size: 16px; padding: 9px 18px 8px; }
  #gs-hud-desc { font-size: 15.5px; }
  #gs-hud-row { gap: 8px; margin-top: 12px; }
  .gs-btn { padding: 12px 12px; letter-spacing: .12em; text-indent: .12em; font-size: 10.5px; }
  #gs-topbar { padding: 9px 14px 8px; }
  #gs-brand { font-size: 11px; }
  #gs-brand-logo { height: 26px; }
  #gs-topbar nav { gap: 12px; }
  .gs-navlink { font-size: 9.5px; letter-spacing: .18em; }
  #gs-home { font-size: 9.5px; letter-spacing: .18em; }
  /* the foot details stack rather than crowd */
  #gs-land-links { gap: 18px 26px; bottom: 18px; left: 12px; right: 12px; }
  #gs-land-links .gs-navlink { font-size: 10.5px; }
  .gs-land-detail { font-size: 11.5px; }
  .gs-mode { font-size: 13px; min-width: 172px; padding: 16px 26px; }
  #gs-hint { font-size: 12.5px; letter-spacing: .16em; white-space: normal; max-width: 92vw; }
  #gs-hud:not(.away) ~ #gs-hint { bottom: 250px; }
  #gs-nav, #gs-roampill { width: 88px; padding: 10px 8px 9px; bottom: 14px; }
  #gs-nav { right: 14px; }
  #gs-roampill { left: 14px; }
  #gs-land-modes { flex-direction: column; gap: 14px; }
}