/* GLASS 13 — the overlay.
   ═══════════════════════════════════════════════════════════════════════

   ONE SYSTEM. Every value below is a token, and every token is written by
   `glass.js` from the document's `theme` block. There are no local
   colours, no second inset, no third glass recipe.

   That is not tidiness for its own sake. The V12 review counted, in one
   overlay: four edge insets (12, 24, 26, 30), six corner radii, three
   different frosted-glass recipes, and two whites at five opacities with
   three of them invented locally. Individually defensible, collectively
   noisy — a page where every element was decided separately. A magazine
   runs on one grid, one scale, one ink.

   THE FOUR TYPE STEPS. Nothing else is allowed:
     eyebrow  10.5px  ui-face 300  .30em     — the small tracked line
     ui       12.5px  ui-face 500  .16em     — buttons and controls
     detail   14px    ui-face 400  .04em     — footers, captions, counts
     body     20px/1.55 display-face          — reading copy

   `text-indent` matches `letter-spacing` on every tracked string. That
   compensates the trailing letter-space so centred caps are OPTICALLY
   centred. It is a print habit and it is the difference between typeset
   and typed.

   THE HIT-TARGET LAW, learned expensively: `opacity: 0` still hit-tests,
   and `pointer-events: none` on a parent does NOT protect a child that
   sets `auto`. An invisible BEGIN TOUR sat centre-screen for a whole tour
   restarting it on every click. Anything that hides itself here uses
   `visibility: hidden`. Search this file for `visibility` before adding a
   new overlay.
*/

:root {
  /* written by glass.js from doc.theme — these are only the fallbacks */
  --ink:   #f0ede8;
  --gold:  #e8d5b0;
  --dark:  #0a0907;
  --inset: 24px;
  --r-pane: 12px;
  --r-ctl: 8px;
  --glass-blur: 16px;
  --glass-bright: 1.35;
  --glass-sat: 1.05;
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-ui: 'Jost', 'Segoe UI', sans-serif;
  --f-body: 'Jost', 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, Consolas, monospace;
  --vignette: .55;
  --pin: 28px;                 /* V14 — a pin's diameter on screen */
  --pin-dim: .25;              /* what the other pins fade to in focus */

  /* ONE ink at four steps. Never write an rgba() below this line. */
  --ink-1: color-mix(in srgb, var(--ink) 100%, transparent);
  --ink-2: color-mix(in srgb, var(--ink) 72%, transparent);
  --ink-3: color-mix(in srgb, var(--ink) 45%, transparent);
  --ink-4: color-mix(in srgb, var(--ink) 22%, transparent);
  --gold-2: color-mix(in srgb, var(--gold) 55%, transparent);
  --gold-3: color-mix(in srgb, var(--gold) 30%, transparent);

  /* ONE glass */
  --glass: blur(var(--glass-blur)) brightness(var(--glass-bright)) saturate(var(--glass-sat));
  --glass-fill: color-mix(in srgb, var(--dark) 44%, transparent);

  /* the 8px scale, and nothing between */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px;
}

@media (max-width: 700px) { :root { --inset: 14px; } }

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden;
             background: var(--dark); color: var(--ink); }

#gl-ui {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;                 /* children opt IN, one at a time */
  font: 300 14px/1.6 var(--f-ui);
  -webkit-font-smoothing: antialiased;
}
#gl-ui * { box-sizing: border-box; }

/* ── the type steps ──────────────────────────────────────────────── */
.gl-eyebrow { font: 300 10.5px/1.4 var(--f-ui); letter-spacing: .30em; text-indent: .30em;
              text-transform: uppercase; color: var(--gold); }
.gl-ui      { font: 500 12.5px/1 var(--f-ui);  letter-spacing: .16em; text-indent: .16em;
              text-transform: uppercase; }
.gl-detail  { font: 400 14px/1.6 var(--f-ui);  letter-spacing: .04em; color: var(--ink-3); }
.gl-body    { font: 300 20px/1.55 var(--f-display); color: var(--ink-2); }
.gl-display { font: 300 clamp(30px, 6vw, 62px)/1.05 var(--f-display); color: var(--ink); }

/* ── the scrim. Edgeless gradient, never a slab: light where legibility
      needs it, no box. This pattern is the one thing the V12 overlay got
      unambiguously right, and everything else here copies it. ─────── */
.gl-scrim-top, .gl-scrim-bottom {
  position: absolute; left: 0; right: 0; height: 34vh; pointer-events: none;
}
.gl-scrim-top    { top: 0;    background: linear-gradient(to bottom, color-mix(in srgb, var(--dark) 78%, transparent), transparent); }
.gl-scrim-bottom { bottom: 0; background: linear-gradient(to top,    color-mix(in srgb, var(--dark) 82%, transparent), transparent); }

#gl-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center,
              transparent 42%,
              color-mix(in srgb, var(--dark) calc(var(--vignette) * 100%), transparent) 100%);
}

/* ── PAGES: landing, home, exit ──────────────────────────────────── */
.gl-page {
  position: absolute; inset: 0; display: flex; pointer-events: auto;
  visibility: hidden; opacity: 0; transition: opacity .7s ease;
}
.gl-page.on { visibility: visible; opacity: 1; }
.gl-page > .gl-plate { position: relative; z-index: 2; width: 100%; height: 100%;
                       display: flex; flex-direction: column; padding: var(--inset); }

/* centred lockup */
.gl-page[data-layout="centre"] .gl-lock { margin: auto; text-align: center; max-width: 820px; }
/* lower left, ragged right — how a picture spread works */
.gl-page[data-layout="lower-left"] .gl-lock { margin-top: auto; text-align: left; max-width: 46ch; }
/* split — title left, buttons right */
.gl-page[data-layout="split"] .gl-lock { margin-top: auto; text-align: left; max-width: 46ch; }
.gl-page[data-layout="split"] .gl-buttons { justify-content: flex-end; }

.gl-lock .gl-eyebrow { margin-bottom: var(--s2); }
.gl-lock h1 { margin: 0 0 var(--s1); font: 300 clamp(30px, 6vw, 62px)/1.05 var(--f-display); }
.gl-lock .gl-sub { margin: 0 0 var(--s2); color: var(--ink-2);
                   font: 400 12.5px/1 var(--f-ui); letter-spacing: .22em; text-indent: .22em;
                   text-transform: uppercase; }
.gl-lock .gl-copy { margin: 0 auto var(--s3); max-width: 46ch; }
.gl-page[data-layout="lower-left"] .gl-lock .gl-copy,
.gl-page[data-layout="split"] .gl-lock .gl-copy { margin-left: 0; }
.gl-logo { max-width: min(460px, 62vw); max-height: 22vh; margin: 0 auto var(--s3); display: block; }
.gl-page[data-layout="lower-left"] .gl-logo { margin-left: 0; }

/* ── buttons. ONE primary. Two identical buttons is no primary action
      at all, which is the fault that made every screen ask the visitor
      to make a decision the design should have made for them. ─────── */
.gl-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center;
              margin-top: var(--s3); }
.gl-page[data-layout="lower-left"] .gl-buttons { justify-content: flex-start; }
.gl-btn {
  pointer-events: auto; cursor: pointer;
  font: 500 12.5px/1 var(--f-ui); letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
  color: var(--ink-2); background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  border: 1px solid var(--ink-4); border-radius: var(--r-ctl);
  padding: 14px 22px; transition: color .25s, border-color .25s, background .25s;
}
.gl-btn:hover { color: var(--ink); border-color: var(--gold-2); }
.gl-btn.primary { color: var(--dark); background: var(--gold); border-color: var(--gold); }
.gl-btn.primary:hover { background: color-mix(in srgb, var(--gold) 88%, #fff); }

/* ── the contact line: one line, no labels, no columns. The format
      declares what it is — never print "EMAIL" above an address. ─── */
.gl-footer { margin-top: auto; padding-top: var(--s3); text-align: center;
             font: 400 14px/1.6 var(--f-ui); letter-spacing: .04em; color: var(--ink-3);
             display: flex; gap: var(--s2); justify-content: center; flex-wrap: nowrap;
             white-space: nowrap; overflow: hidden; }
.gl-page[data-layout="lower-left"] .gl-footer { justify-content: flex-start; text-align: left; }
.gl-footer a { color: inherit; text-decoration: none; pointer-events: auto; }
.gl-footer a:hover { color: var(--ink-2); }
.gl-footer .sep { color: var(--gold-3); }
@media (max-width: 700px) { .gl-footer { flex-wrap: wrap; white-space: normal; font-size: 12.5px; } }

/* ── the loader lives inside the page, so no layout snaps away when it
      goes. `display:none` here cost 76px of jump at the exact moment a
      visitor had been waiting a minute; this is the fix. ──────────── */
.gl-load { visibility: visible; }
.gl-load.done { visibility: hidden; }
.gl-load .gl-ui { color: var(--ink-3); }
.gl-bar { height: 2px; width: min(300px, 60vw); margin: var(--s1) auto 0;
          background: var(--ink-4); border-radius: 2px; overflow: hidden; }
.gl-page[data-layout="lower-left"] .gl-bar { margin-left: 0; }
.gl-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s ease; }

/* ── the header: a house icon, top right. That is the whole header. ─ */
#gl-home {
  position: absolute; top: var(--inset); right: var(--inset);
  width: 42px; height: 42px; border-radius: var(--r-ctl);
  display: grid; place-items: center; cursor: pointer;
  pointer-events: auto; visibility: hidden;
  background: var(--glass-fill); border: 1px solid var(--ink-4);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  transition: border-color .25s;
}
#gl-home.on { visibility: visible; }
#gl-home:hover { border-color: var(--gold-2); }
#gl-home svg { width: 18px; height: 18px; stroke: var(--ink-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#gl-home:hover svg { stroke: var(--gold); }

/* ── the modes pill, bottom right ────────────────────────────────── */
#gl-pill {
  position: absolute; bottom: var(--inset); right: var(--inset);
  display: flex; gap: 2px; padding: 4px; border-radius: var(--r-ctl);
  pointer-events: auto; visibility: hidden;
  background: var(--glass-fill); border: 1px solid var(--ink-4);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
}
#gl-pill.on { visibility: visible; }
#gl-pill button {
  pointer-events: auto; cursor: pointer; background: none; border: 0; color: var(--ink-3);
  font: 500 12.5px/1 var(--f-ui); letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
  padding: 10px 14px; border-radius: calc(var(--r-ctl) - 3px); transition: color .2s, background .2s;
}
#gl-pill button:hover { color: var(--ink); }
#gl-pill button.sel { color: var(--dark); background: var(--gold); }

/* ── the tour controls. Bare chevrons at the vertical centre of each
      edge — they FRAME the picture instead of sitting under it — and one
      caption block on the left margin. No slab, no plaque, no dots. ── */
.gl-chev {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; display: grid; place-items: center;
  cursor: pointer; pointer-events: auto; visibility: hidden;
  color: var(--ink-3); transition: color .25s;
}
.gl-chev.on { visibility: visible; }
.gl-chev:hover { color: var(--gold); }
.gl-chev svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#gl-prev { left: calc(var(--inset) / 2); }
#gl-next { right: calc(var(--inset) / 2); }

#gl-caption {
  position: absolute; left: var(--inset); bottom: var(--inset);
  max-width: 46ch;                       /* a comfortable line in space.
                                            The 74ch magazine measure in
                                            the old HUD was far too wide
                                            for something read while moving. */
  pointer-events: none; visibility: hidden; opacity: 0;
  transform: translateY(10px); transition: opacity .55s ease, transform .55s ease;
}
#gl-caption.on { visibility: visible; opacity: 1; transform: none; }
#gl-caption .gl-count { font: 400 14px/1.6 var(--f-ui); letter-spacing: .18em; color: var(--gold-2); margin-bottom: var(--s1); }
#gl-caption h2 { margin: 0 0 var(--s1); font: 300 clamp(24px, 3.4vw, 40px)/1.1 var(--f-display); color: var(--ink); }
#gl-caption .gl-body { margin: 0; }
#gl-caption .gl-act { margin-top: var(--s2); display: flex; gap: var(--s2); pointer-events: auto; }

/* ── captions that ride a loop ───────────────────────────────────── */
#gl-ride-cap {
  position: absolute; left: var(--inset); bottom: var(--inset); max-width: 46ch;
  pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .6s ease;
}
#gl-ride-cap.on { visibility: visible; opacity: 1; }
#gl-ride-cap h3 { margin: 4px 0 0; font: 300 clamp(22px, 3vw, 34px)/1.1 var(--f-display); color: var(--ink); }

/* ── titles standing IN the room ─────────────────────────────────── */
#gl-titles { position: absolute; inset: 0; pointer-events: none; }
.gl-title {
  position: absolute; transform-origin: 50% 100%; text-align: center;
  white-space: nowrap; pointer-events: none;
  /* white type over an arbitrary photographic ground fails
     unpredictably — a soft local shadow is what makes it hold */
  text-shadow: 0 2px 10px color-mix(in srgb, var(--dark) 85%, transparent),
               0 0 2px color-mix(in srgb, var(--dark) 70%, transparent);
  opacity: 0; transition: opacity .8s ease;
}
.gl-title.on { opacity: 1; }
.gl-title b { display: block; font-weight: 400; font-family: var(--f-display); color: var(--ink); letter-spacing: .04em; }
.gl-title i { display: block; font-style: normal; font-family: var(--f-ui); color: var(--gold);
              letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; }

/* ── hotspots: the gaze orbs ─────────────────────────────────────── */
#gl-spots { position: absolute; inset: 0; pointer-events: none; }
.gl-orb {
  position: absolute; --d: 10px; --o: .16;
  width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2); margin-top: calc(var(--d) / -2);
  border-radius: 50%; background: var(--gold); opacity: var(--o);
  transition: width .35s, height .35s, opacity .35s, margin .35s;
  pointer-events: none;
}
.gl-orb.awake { --d: 22px; --o: 1; pointer-events: auto; cursor: pointer;
                box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 16%, transparent); }
.gl-orb-label {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  font: 500 12.5px/1 var(--f-ui); letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .3s;
  text-shadow: 0 2px 8px var(--dark);
}
.gl-orb.awake .gl-orb-label { opacity: 1; }

/* ── the hotspot sheet ───────────────────────────────────────────── */
#gl-sheet {
  position: absolute; left: var(--inset); bottom: var(--inset); width: min(420px, calc(100vw - var(--inset) * 2));
  padding: var(--s3); border-radius: var(--r-pane);
  background: var(--glass-fill); border: 1px solid var(--ink-4);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  pointer-events: auto; visibility: hidden; opacity: 0; transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease;
}
#gl-sheet.on { visibility: visible; opacity: 1; transform: none; }
#gl-sheet h3 { margin: 0 0 var(--s1); font: 300 26px/1.1 var(--f-display); color: var(--ink); }
#gl-sheet .gl-close { position: absolute; top: 10px; right: 12px; cursor: pointer; color: var(--ink-3);
                      font: 300 20px/1 var(--f-ui); }
#gl-sheet .gl-close:hover { color: var(--ink); }
#gl-sheet img { width: 100%; border-radius: var(--r-ctl); margin-top: var(--s2); display: block; }

/* ── the hint line, and the play/pause mark ──────────────────────── */
#gl-hint {
  position: absolute; left: 50%; bottom: calc(var(--inset) + 6px); transform: translateX(-50%);
  font: 400 14px/1.6 var(--f-ui); letter-spacing: .1em; color: var(--ink-3);
  pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .5s;
  text-shadow: 0 2px 10px var(--dark); text-align: center;
}
#gl-hint.on { visibility: visible; opacity: 1; }

#gl-paused {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .3s;
}
#gl-paused.on { visibility: visible; opacity: .85; }
#gl-paused svg { width: 46px; height: 46px; fill: var(--ink); }

/* ── the engine's own chrome stays out of the way unless asked for ── */
#ui { display: none !important; }
body.gl-stockui #ui { display: block !important; }

/* ══════════════════════════════════════════════════════════════════════
   V14 — THE LOOK'S SWITCHES. Each is a body class written by glass.js
   from the theme; the sheet reads them and nothing else does.
   ══════════════════════════════════════════════════════════════════════ */
/* the primary button filled with the INK — a white pill on black, the
   shape a hardware brand launches with */
body.gl-primary-ink .gl-btn.primary { color: var(--dark); background: var(--ink); border-color: var(--ink); }
body.gl-primary-ink .gl-btn.primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--dark)); }
body.gl-primary-ink #gl-pill button.sel { color: var(--dark); background: var(--ink); }
/* eyebrows in the dimmed ink instead of the accent */
body.gl-eyebrow-ink .gl-eyebrow { color: var(--ink-3); }
body.gl-eyebrow-ink #gl-caption .gl-count { color: var(--ink-3); }
/* titles in tracked capitals — the brand that shouts quietly */
body.gl-caps .gl-lock h1, body.gl-caps #gl-caption h2, body.gl-caps #gl-sheet h3,
body.gl-caps #gl-card h2, body.gl-caps #gl-card h3, body.gl-caps .gl-title b, body.gl-caps #gl-ride-cap h3 {
  text-transform: uppercase; letter-spacing: .10em; text-indent: .10em; font-weight: 500;
}
body.gl-caps .gl-lock h1 { letter-spacing: .12em; text-indent: .12em; }
/* the header mark is the LOGO, top centre, and it stays up on the pages */
body.gl-mark-logo #gl-home {
  right: auto; left: 50%; transform: translateX(-50%);
  width: 48px; height: 48px; border: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0;
}
body.gl-mark-logo #gl-home svg { display: none; }
body.gl-mark-logo #gl-home img { width: 34px; height: 34px; display: block; transition: transform .3s; }
body.gl-mark-logo #gl-home:hover img { transform: scale(1.08); }
.gl-wordmark { display: block; height: 10px; width: auto; margin: 0 auto var(--s3); opacity: .9; }
.gl-page[data-layout="lower-left"] .gl-wordmark { margin-left: 0; }

/* ── the finish control: one small word, bottom left, sky view only ── */
#gl-finish {
  position: absolute; left: var(--inset); bottom: var(--inset);
  font: 500 12.5px/1 var(--f-ui); letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer; pointer-events: auto; visibility: hidden;
  padding: 12px 0; transition: color .25s; text-shadow: 0 2px 10px var(--dark);
}
#gl-finish.on { visibility: visible; }
#gl-finish:hover { color: var(--ink); }
#gl-finish:empty { visibility: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   V14 — PINS. A ring, constant size at any distance, the accent lit
   inside it on hover and while open. The hit target is the 44px box
   around it. Hidden with `visibility` (LAW 7) — a pin behind the bike
   must not eat a click meant for the picture.
   ══════════════════════════════════════════════════════════════════════ */
#gl-pins { position: absolute; inset: 0; pointer-events: none; }
.gl-pin {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  pointer-events: auto; cursor: pointer;
  visibility: hidden; opacity: 0;
  transition: none;
}
/* V15 — the opacity is the player's: eased, with hysteresis, and fading
   out near the camera (`--vis`); CSS no longer animates it */
body.gl-pins-on .gl-pin:not(.off) { visibility: visible; opacity: var(--vis, 1); transition: none; }
.gl-pin-dot {
  position: absolute; left: 50%; top: 50%; width: var(--pin); height: var(--pin);
  margin: calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2);
  border-radius: 50%; border: 1.5px solid var(--ink);
  background: color-mix(in srgb, var(--dark) 40%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dark) 60%, transparent), 0 2px 12px color-mix(in srgb, var(--dark) 70%, transparent);
  transition: transform .25s ease, border-color .25s, background .25s;
}
.gl-pin-dot i {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .25s ease;
}
.gl-pin:hover .gl-pin-dot { transform: scale(1.15); }
/* the dot marks the OPEN pin only — a hover shows the name, so the pin
   under a resting pointer never reads as selected */
.gl-pin.active .gl-pin-dot i { transform: scale(1); }
.gl-pin.active .gl-pin-dot { border-color: var(--gold); }
/* the label: number in the ink, name beside it, a hairline leader */
.gl-pin-label {
  position: absolute; left: calc(50% + var(--pin) / 2 + 14px); top: 50%; transform: translateY(-50%);
  display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
  font: 500 11.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-shadow: 0 1px 8px var(--dark), 0 0 2px var(--dark);
  transition: opacity .3s;
}
.gl-pin-label::before {
  content: ''; position: absolute; right: 100%; top: 50%; width: 12px; height: 1px; margin-right: 2px;
  background: var(--ink-3);
}
.gl-pin-label b { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gl-pin.flip .gl-pin-label { left: auto; right: calc(50% + var(--pin) / 2 + 14px); flex-direction: row-reverse; }
.gl-pin.flip .gl-pin-label::before { right: auto; left: 100%; margin-right: 0; margin-left: 2px; }
/* the document may keep labels for hover only */
body.gl-pin-labels-hover .gl-pin:not(:hover):not(.active) .gl-pin-label { opacity: 0; }
body.gl-pin-labels-never .gl-pin-label { display: none; }
/* in focus the others fall back, still there, still clickable */
body.gl-focus .gl-pin:not(.active):not(:hover) { opacity: calc(var(--vis, 1) * var(--pin-dim)); }
body.gl-focus .gl-pin.active { pointer-events: none; }
@media (pointer: coarse) { .gl-pin:hover .gl-pin-dot { transform: none; } }

/* ══════════════════════════════════════════════════════════════════════
   V14 — THE CARD PANEL. Desktop: 380px on the side away from the
   subject. Phone: a bottom sheet. Cards inside it cross-fade; the camera
   never moves for a card.
   ══════════════════════════════════════════════════════════════════════ */
#gl-card {
  position: absolute; top: var(--inset); bottom: var(--inset); width: min(380px, calc(100vw - var(--inset) * 2));
  display: flex; flex-direction: column;
  padding: var(--s3); border-radius: var(--r-pane);
  background: color-mix(in srgb, var(--dark) 78%, transparent); border: 1px solid var(--ink-4);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  pointer-events: auto; visibility: hidden; opacity: 0;
  transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .32s;
}
#gl-card.right { right: var(--inset); transform: translateX(24px); }
#gl-card.left  { left: var(--inset);  transform: translateX(-24px); }
#gl-card.on { visibility: visible; opacity: 1; transform: none; transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s; }
#gl-card.quick { transition: none; }
#gl-card .gl-card-grip { display: none; }
#gl-card .gl-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
#gl-card .gl-eyebrow { font-variant-numeric: tabular-nums; }
#gl-card .gl-close {
  cursor: pointer; background: none; border: 1px solid var(--ink-4); color: var(--ink-2);
  width: 34px; height: 34px; border-radius: 50%; font: 300 20px/1 var(--f-ui); display: grid; place-items: center;
  transition: color .2s, border-color .2s; flex: 0 0 auto;
}
#gl-card .gl-close:hover { color: var(--ink); border-color: var(--ink-2); }
#gl-card h2 { margin: 0 0 var(--s2); font: 500 22px/1.15 var(--f-display); color: var(--ink); }
#gl-card .gl-card-pages { position: relative; flex: 1 1 auto; overflow: auto; min-height: 0; scrollbar-width: thin; }
#gl-card .gl-card-page { display: none; animation: gl-card-in .32s ease; }
#gl-card .gl-card-page.on { display: block; }
@keyframes gl-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#gl-card h3 { margin: 0 0 var(--s1); font: 500 18px/1.2 var(--f-display); color: var(--ink); }
#gl-card h2 + .gl-card-pages h3 { font-size: 15px; color: var(--ink-2); }
#gl-card .gl-card-body { margin: 0 0 var(--s2); font: 300 15.5px/1.55 var(--f-body); color: var(--ink-2); }
#gl-card .gl-card-foot { margin: var(--s2) 0 0; font: 400 12.5px/1.5 var(--f-ui); color: var(--ink-3); letter-spacing: .02em; }
/* the figures: label small and tracked, value large in the figures face,
   one hairline between rows — the brand's own spec table */
.gl-stats { margin: 0; padding: 0; border-top: 1px solid var(--ink-4); }
.gl-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
                  padding: 11px 0; border-bottom: 1px solid var(--ink-4); }
.gl-stats dt { margin: 0; font: 500 10.5px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.gl-stats dd { margin: 0; font: 400 17px/1.2 var(--f-mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
#gl-card .gl-card-nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s2); padding-top: var(--s2);
                        border-top: 1px solid var(--ink-4); }
#gl-card .gl-card-nav button {
  cursor: pointer; background: none; border: 1px solid var(--ink-4); color: var(--ink-2);
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: color .2s, border-color .2s;
}
#gl-card .gl-card-nav button:hover { color: var(--ink); border-color: var(--ink-2); }
#gl-card .gl-card-nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.gl-dots { display: flex; gap: 8px; }
.gl-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); transition: background .25s, transform .25s; }
.gl-dots i.on { background: var(--gold); transform: scale(1.25); }

/* the phone sheet */
body.gl-sheet #gl-card, body.gl-sheet #gl-card.left, body.gl-sheet #gl-card.right {
  top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 60vh;
  border-radius: var(--r-pane) var(--r-pane) 0 0; border-bottom: 0;
  padding: var(--s1) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
}
body.gl-sheet #gl-card.on { transform: none; }
body.gl-sheet #gl-card.dragging { transition: none; }
body.gl-sheet #gl-card .gl-card-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--ink-4);
                                       margin: 0 auto var(--s2); cursor: grab; touch-action: none; }
body.gl-sheet #gl-card .gl-card-head { touch-action: none; }
body.gl-sheet #gl-card h2 { font-size: 19px; }
body.gl-sheet .gl-stats dd { font-size: 15px; }

/* ── the reveal: a picture hung in the room ─────────────────────────── */
#gl-reveal { position: absolute; inset: 0; pointer-events: none; }
#gl-reveal img {
  position: absolute; transform: translate(-50%, -50%); max-width: none; opacity: 0;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--dark) 60%, transparent));
}
#gl-reveal.on img { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   V14 — PREV / NEXT AT THE BOTTOM CENTRE. Round hairline buttons and a
   counter between them: a carousel control, the shape a product site
   uses. The edge chevrons remain the other design (theme.nav = edges).
   ══════════════════════════════════════════════════════════════════════ */
#gl-count {
  position: absolute; left: 50%; bottom: var(--inset); transform: translateX(-50%);
  height: 48px; display: flex; align-items: center; justify-content: center; min-width: 96px;
  font: 500 11px/1 var(--f-ui); letter-spacing: .18em; text-indent: .18em; text-transform: uppercase;
  color: var(--ink-3); pointer-events: none; visibility: hidden; text-shadow: 0 2px 10px var(--dark);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#gl-count.on { visibility: visible; }
body.gl-nav-centre .gl-chev {
  top: auto; bottom: var(--inset); transform: none;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--ink-4); background: color-mix(in srgb, var(--dark) 40%, transparent);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  color: var(--ink-2); transition: color .25s, border-color .25s, background .25s;
}
body.gl-nav-centre .gl-chev:hover { color: var(--ink); border-color: var(--ink-2); }
body.gl-nav-centre .gl-chev svg { width: 16px; height: 16px; stroke-width: 2; }
body.gl-nav-centre #gl-prev { left: calc(50% - 48px - 56px); right: auto; }
body.gl-nav-centre #gl-next { right: calc(50% - 48px - 56px); left: auto; }
/* the finish word steps aside for the cluster on a phone */
@media (max-width: 700px) {
  body.gl-nav-centre #gl-prev { left: calc(50% - 48px - 44px); }
  body.gl-nav-centre #gl-next { right: calc(50% - 48px - 44px); }
  body.gl-nav-centre #gl-count { min-width: 72px; }
}
/* the sheet on a phone sits above the cluster */
body.gl-sheet.gl-nav-centre #gl-card.on { bottom: calc(var(--inset) + 48px + var(--s2)); border-radius: var(--r-pane); border-bottom: 1px solid var(--ink-4); }

/* ── V14 fixes from the first Stark run ──────────────────────────── */
/* a brand in capitals still speaks its sub-line as a sentence */
body.gl-caps .gl-lock .gl-sub { text-transform: none; letter-spacing: 0; text-indent: 0;
                                font: 300 clamp(15px, 2vw, 18px)/1.5 var(--f-body); color: var(--ink-2); max-width: 40ch; margin-left: auto; margin-right: auto; }
body.gl-caps .gl-page[data-layout="lower-left"] .gl-lock .gl-sub { margin-left: 0; }
/* the hint stands above the centre cluster */
body.gl-nav-centre #gl-hint { bottom: calc(var(--inset) + 48px + var(--s2)); }
/* the close cross as a line, not a glyph the brand font lacks */
#gl-card .gl-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }
/* room for the scrollbar so a value never sits under it */
#gl-card .gl-card-pages { scrollbar-gutter: stable; padding-right: 6px; margin-right: -6px; }
/* the wordmark above a capitals title: closer, smaller */
body.gl-caps .gl-wordmark { height: 9px; margin-bottom: var(--s2); }
/* a launch title: bigger in capitals, and the page breathes around it */
body.gl-caps .gl-lock h1 { font-size: clamp(38px, 8vw, 104px); line-height: 1; margin-bottom: var(--s2); }
body.gl-caps .gl-lock .gl-buttons { margin-top: var(--s4); }
/* the card is content-sized, hung from the top inset — a product card,
   not a column; on a phone it stays a sheet */
body:not(.gl-sheet) #gl-card { bottom: auto; max-height: calc(100vh - var(--inset) * 2); }
#gl-reveal img { opacity: 0; }
#gl-reveal.on img { opacity: inherit; }
/* on a phone the finish word climbs above the cluster it would collide with */
@media (max-width: 700px) {
  body.gl-nav-centre #gl-finish { bottom: calc(var(--inset) + 48px + var(--s2)); padding: 8px 0; }
  body.gl-nav-centre #gl-hint { bottom: calc(var(--inset) + 48px + var(--s2) + 30px); font-size: 12.5px; }
}

/* ── V15: the universe canvas stands UNDER the engine's transparent canvas ── */
#gl-universe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
               background: var(--dark); display: block; }
body.gl-universe #application-canvas { background: transparent !important; position: relative; z-index: 1; }


/* ── V15: the wordmark as the home control, top right, a watermark ──── */
body.gl-mark-wordmark #gl-home {
  right: var(--inset); left: auto; transform: none;
  width: auto; height: 40px; padding: 0 2px; border: 0; background: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; opacity: .82; transition: opacity .25s;
}
body.gl-mark-wordmark #gl-home:hover { opacity: 1; }
body.gl-mark-wordmark #gl-home svg { display: none; }
body.gl-mark-wordmark #gl-home img { height: 11px; width: auto; display: block;
                                     filter: drop-shadow(0 1px 6px color-mix(in srgb, var(--dark) 80%, transparent)); }
@media (max-width: 700px) { body.gl-mark-wordmark #gl-home img { height: 9px; } }
/* no leader: the dot and the name, nothing between */
body.gl-pin-noleader .gl-pin-label::before { display: none; }
body.gl-pin-noleader .gl-pin-label { left: calc(50% + var(--pin) / 2 + 8px); }
body.gl-pin-noleader .gl-pin.flip .gl-pin-label { left: auto; right: calc(50% + var(--pin) / 2 + 8px); }


/* ── V15: the logo as the home control, top right, a watermark ──────── */
body.gl-mark-logo-right #gl-home {
  right: var(--inset); left: auto; transform: none;
  width: 44px; height: 44px; border: 0; background: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; opacity: .85; transition: opacity .25s, transform .3s;
}
body.gl-mark-logo-right #gl-home:hover { opacity: 1; transform: scale(1.06); }
body.gl-mark-logo-right #gl-home svg { display: none; }
body.gl-mark-logo-right #gl-home img { width: 34px; height: 34px; display: block;
                                       filter: drop-shadow(0 1px 8px color-mix(in srgb, var(--dark) 80%, transparent)); }


/* ── V15: the pages let gestures through — the plate is the picture,
      only the buttons and links are controls ───────────────────────── */
body.gl-page-input .gl-page { pointer-events: none; }
body.gl-page-input .gl-page .gl-btn, body.gl-page-input .gl-page .gl-footer a { pointer-events: auto; }

/* ── V15: the OPEN layout — title high, button low, the middle clear ── */
.gl-page[data-layout="open"] .gl-lock { margin: 7vh auto 0; text-align: center; max-width: 820px;
                                        display: flex; flex-direction: column; flex: 1 1 auto; align-items: center; }
.gl-page[data-layout="open"] .gl-lock .gl-buttons { margin-top: auto; margin-bottom: 9vh; }
.gl-page[data-layout="open"] .gl-lock .gl-load { margin-top: var(--s2); }
@media (max-width: 700px) { .gl-page[data-layout="open"] .gl-lock { margin-top: 9vh; } .gl-page[data-layout="open"] .gl-lock .gl-buttons { margin-bottom: 12vh; } }

/* the wordmark above the title reads white; the sub 15% quieter */
.gl-wordmark { opacity: 1; }
body.gl-caps .gl-lock .gl-sub { font-size: clamp(12.75px, 1.7vw, 15.3px); }

/* ── V15: the card WALKS IN. The pane rises and fades over half a
      second, then its rows follow one after another; a set's next card
      does the same. Nothing pops. ──────────────────────────────────── */
#gl-card { transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1), visibility 0s linear .55s; }
#gl-card.right { transform: translate(28px, 12px); }
#gl-card.left  { transform: translate(-28px, 12px); }
#gl-card.on { transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1), visibility 0s; }
#gl-card.quick { transition: opacity .25s ease, visibility 0s linear .25s; }
#gl-card .gl-card-head, #gl-card h2, #gl-card .gl-card-page > h3, #gl-card .gl-card-page > .gl-card-body,
#gl-card .gl-stats > div, #gl-card .gl-card-foot, #gl-card .gl-card-nav {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
#gl-card.on .gl-card-head { opacity: 1; transform: none; transition-delay: .12s; }
#gl-card.on h2 { opacity: 1; transform: none; transition-delay: .2s; }
#gl-card.on .gl-card-page.on > h3 { opacity: 1; transform: none; transition-delay: .26s; }
#gl-card.on .gl-card-page.on > .gl-card-body { opacity: 1; transform: none; transition-delay: .32s; }
#gl-card.on .gl-card-page.on .gl-stats > div { opacity: 1; transform: none; transition-delay: calc(.4s + var(--i, 0) * .07s); }
#gl-card.on .gl-card-page.on > .gl-card-foot { opacity: 1; transform: none; transition-delay: .7s; }
#gl-card.on .gl-card-nav { opacity: 1; transform: none; transition-delay: .55s; }
#gl-card .gl-card-page { animation: none; }
/* the phone sheet keeps its slide and takes the same walk-in */
body.gl-sheet #gl-card, body.gl-sheet #gl-card.left, body.gl-sheet #gl-card.right { transform: translateY(100%); }
body.gl-sheet #gl-card.on { transform: none; }


/* ── V15: the INFO pill between the arrows — the card on request ──── */
#gl-count.gl-info {
  pointer-events: auto; cursor: pointer; min-width: 0; padding: 0 22px; height: 48px;
  border: 1px solid var(--ink-4); border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--dark) 40%, transparent);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  color: var(--ink-2); font-size: 11.5px; letter-spacing: .18em; text-indent: .18em;
  transition: color .25s, border-color .25s, background .25s, opacity .25s;
}
#gl-count.gl-info:hover { color: var(--ink); border-color: var(--ink-2); }
#gl-count.gl-info.lit { color: var(--dark); background: var(--ink); border-color: var(--ink); }
#gl-count.gl-info.wait { opacity: .45; pointer-events: none; }
/* the desktop card can be dragged away; the head is the handle */
body:not(.gl-sheet) #gl-card .gl-card-head { cursor: grab; touch-action: none; }
#gl-card.dragging { transition: none; }

/* the landing lockup high, EXPLORE just above the footer */
.gl-page[data-layout="open"] .gl-lock { margin-top: 3vh; }
.gl-page[data-layout="open"] .gl-lock .gl-buttons { margin-bottom: var(--s3); }
@media (max-width: 700px) { .gl-page[data-layout="open"] .gl-lock { margin-top: 4vh; } .gl-page[data-layout="open"] .gl-lock .gl-buttons { margin-bottom: var(--s3); } }


/* ── V15: the brand top left — the identity, never a control ────────── */
#gl-brand { position: absolute; top: var(--inset); left: var(--inset); display: none; align-items: center; gap: 12px;
            pointer-events: none; opacity: .92; }
body.gl-brand-top-left #gl-brand { display: flex; }
#gl-brand .gl-brand-logo { width: 30px; height: 30px; }
#gl-brand .gl-brand-word { height: 10px; width: auto; }
@media (max-width: 700px) { #gl-brand .gl-brand-logo { width: 24px; height: 24px; } #gl-brand .gl-brand-word { height: 8px; } }

/* the house, top right, in the brand's own button */
body.gl-nav-centre #gl-home { width: 48px; height: 48px; border-radius: 50%; }
body.gl-nav-centre #gl-home svg { width: 17px; height: 17px; stroke-width: 1.3; }

/* ── V15: the cog and its panel ─────────────────────────────────────── */
#gl-cog {
  position: absolute; right: var(--inset); bottom: var(--inset); width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto; visibility: hidden;
  border: 1px solid var(--ink-4); background: color-mix(in srgb, var(--dark) 40%, transparent);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); color: var(--ink-2);
  transition: color .25s, border-color .25s, background .25s;
}
#gl-cog.on { visibility: visible; }
#gl-cog:hover { color: var(--ink); border-color: var(--ink-2); }
#gl-cog.lit { color: var(--dark); background: var(--ink); border-color: var(--ink); }
#gl-cog svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#gl-settings {
  position: absolute; right: var(--inset); bottom: calc(var(--inset) + 48px + var(--s2)); width: 260px;
  padding: var(--s2) var(--s3); border-radius: var(--r-pane);
  background: color-mix(in srgb, var(--dark) 78%, transparent); border: 1px solid var(--ink-4);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  pointer-events: auto; visibility: hidden; opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s;
}
#gl-settings.on { visibility: visible; opacity: 1; transform: none; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s; }
#gl-settings .gl-eyebrow { margin-bottom: var(--s2); }
.gl-range { display: flex; align-items: center; gap: 12px; }
.gl-range .end { font: 400 16px/1 var(--f-ui); color: var(--ink-3); width: 14px; text-align: center; }
.gl-range input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 24px; background: none; margin: 0; }
.gl-range input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ink-4); }
.gl-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink);
                                                     margin-top: -7.5px; box-shadow: 0 0 0 1px var(--dark); cursor: pointer; }
.gl-range input[type=range]::-moz-range-track { height: 1px; background: var(--ink-4); }
.gl-range input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 0; cursor: pointer; }
.gl-swatches { display: flex; gap: 12px; align-items: center; }
.gl-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
             box-shadow: 0 0 0 1px var(--ink-4); transition: transform .2s, box-shadow .2s; }
.gl-swatch:hover { transform: scale(1.1); }
.gl-swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.gl-swatch-name { margin-top: var(--s1); }
@media (max-width: 700px) { #gl-settings { width: calc(100vw - var(--inset) * 2); right: var(--inset); } body.gl-nav-centre #gl-cog { bottom: var(--inset); } body.gl-nav-centre #gl-settings { bottom: calc(var(--inset) + 48px + var(--s2)); } }

/* ── V15: the OPEN layout, again — body low centre, EXPLORE bottom right ── */
.gl-page[data-layout="open"] .gl-lock .gl-copy { margin-top: auto; margin-bottom: var(--s3); max-width: 46ch; font-size: 17px; }
/* EXPLORE stands beside the cog, bottom right, so the cog's panel never covers it */
.gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons { position: absolute; right: calc(var(--inset) + 48px + var(--s2)); bottom: calc(var(--inset) + 3px); margin: 0; }
body:not(.gl-cog-on) .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons { right: var(--inset); }
.gl-page[data-layout="open"] .gl-lock { position: static; }
.gl-page[data-layout="open"] .gl-plate { position: relative; }
@media (max-width: 700px) { .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons { right: calc(var(--inset) + 48px + var(--s2)); bottom: calc(var(--inset) + 3px); } }

/* ── V15: PANES on a page — logo, tabs, a swipeable track, the contact line ── */
.gl-panes { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; min-height: 0; width: 100%; pointer-events: auto; }
.gl-panes-logo { width: 42px; height: 42px; margin: 2vh auto var(--s2); display: block; }
.gl-tabs { display: flex; gap: var(--s4); justify-content: center; margin-bottom: var(--s3); pointer-events: auto; }
.gl-tab { background: none; border: 0; cursor: pointer; padding: 10px 2px; color: var(--ink-3);
          font: 500 11.5px/1 var(--f-ui); letter-spacing: .18em; text-indent: .18em; text-transform: uppercase;
          border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.gl-tab:hover { color: var(--ink); }
.gl-tab.on { color: var(--ink); border-bottom-color: var(--gold); }
.gl-track-view { width: min(1040px, 100%); overflow: hidden; flex: 1 1 auto; min-height: 0; touch-action: pan-y; cursor: grab; }
.gl-track { display: flex; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.gl-pane { flex: 0 0 100%; width: 100%; overflow: auto; padding: 0 var(--s2); scrollbar-width: thin; }
.gl-pane .gl-lock { margin: 0 auto var(--s3); text-align: center; max-width: 820px; }
.gl-pane h2 { margin: 0 0 var(--s1); font: 500 clamp(22px, 3vw, 34px)/1.1 var(--f-display); color: var(--ink); }
body.gl-caps .gl-pane h2 { text-transform: uppercase; letter-spacing: .12em; text-indent: .12em; }
.gl-pane .gl-sub { margin: var(--s1) 0 0; color: var(--ink-2); font: 300 clamp(14px, 1.7vw, 17px)/1.5 var(--f-body); text-transform: none; letter-spacing: 0; }
.gl-pane .gl-buttons { margin-top: var(--s3); }
.gl-notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); max-width: 900px; margin: var(--s3) auto 0; width: 100%; }
.gl-note { text-align: center; padding: var(--s3) var(--s2); border-right: 1px solid var(--ink-4); }
.gl-note:last-child { border-right: 0; }
.gl-note p { margin: 0 0 var(--s2); font: 300 16px/1.5 var(--f-body); color: var(--ink); }
.gl-btn.small { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 11px; text-decoration: none; }
.gl-btn.small .chev { font-size: 14px; line-height: 1; }
.gl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); width: 100%; max-width: 960px; margin: 0 auto; }
.gl-tile { background: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: var(--r-pane); padding: var(--s3) var(--s2) var(--s2); text-align: center; }
.gl-tile-big { font: 300 clamp(34px, 4.6vw, 58px)/1 var(--f-display); color: var(--ink); }
.gl-tile-small { margin-top: 6px; font: 500 10.5px/1 var(--f-ui); letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; color: var(--ink-3); }
.gl-tile hr { border: 0; border-top: 1px solid var(--ink-4); margin: var(--s2) 0 var(--s2); }
.gl-tile-label { font: 300 15px/1.4 var(--f-body); color: var(--ink); }
.gl-tile.words { display: grid; place-items: center; min-height: 120px; }
.gl-panes .gl-dots { justify-content: center; margin: var(--s2) 0 var(--s1); }
@media (max-width: 700px) {
  .gl-tabs { gap: var(--s2); } .gl-tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .gl-tile-big { font-size: 30px; }
  .gl-notes { grid-template-columns: 1fr; } .gl-note { border-right: 0; border-bottom: 1px solid var(--ink-4); } .gl-note:last-child { border-bottom: 0; }
}


/* ── V15: EXPLORE back to the bottom centre on the open page ────────── */
.gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons,
body:not(.gl-cog-on) .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons {
  position: static; margin: auto auto var(--s3); right: auto; bottom: auto;
}
@media (max-width: 700px) { .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons { position: static; margin: auto auto var(--s3); } }
/* the sub on the open page is the one line under the title: a shade larger */
.gl-page[data-layout="open"] .gl-lock .gl-sub { margin-top: var(--s2); }
body.gl-caps .gl-page[data-layout="open"] .gl-lock .gl-sub { font-size: clamp(14px, 1.9vw, 18px); }

/* ── V15: the brand top left — a quarter bigger, the name under the ring, white ── */
body.gl-brand-top-left #gl-brand { flex-direction: column; align-items: flex-start; gap: 9px; opacity: 1; }
#gl-brand .gl-brand-logo { width: 38px; height: 38px; }
#gl-brand .gl-brand-word { height: 12.5px; }
@media (max-width: 700px) { #gl-brand .gl-brand-logo { width: 30px; height: 30px; } #gl-brand .gl-brand-word { height: 10px; } }

/* ── V15: the swipe finger — the orbit gesture, shown ───────────────── */
#gl-swipe {
  position: absolute; left: 50%; bottom: calc(var(--inset) + 48px + var(--s3) + 12px); transform: translateX(-50%);
  width: 260px; text-align: center; pointer-events: none;
  visibility: hidden; opacity: 0; transition: opacity .8s ease, visibility 0s linear .8s;
}
#gl-swipe.on { visibility: visible; opacity: 1; transition: opacity .8s ease, visibility 0s; }
.gl-swipe-stage { position: relative; height: 84px; }
.gl-swipe-track { position: absolute; left: 30px; right: 30px; top: 46px; height: 1px; background: var(--ink-4); }
.gl-swipe-track::before, .gl-swipe-track::after { content: ''; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.gl-swipe-track::before { left: -3px; } .gl-swipe-track::after { right: -3px; }
.gl-swipe-hand { position: absolute; left: 50%; top: 14px; width: 34px; height: 46px; margin-left: -17px;
                 stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
                 filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--dark) 80%, transparent)); }
#gl-swipe.on .gl-swipe-hand { animation: gl-swipe 2.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes gl-swipe {
  0%   { transform: translateX(-80px) rotate(-6deg); }
  50%  { transform: translateX(80px) rotate(6deg); }
  100% { transform: translateX(-80px) rotate(-6deg); }
}
.gl-swipe-text { margin-top: 2px; font: 500 11.5px/1 var(--f-ui); letter-spacing: .18em; text-indent: .18em; text-transform: uppercase;
                 color: var(--ink-2); text-shadow: 0 2px 10px var(--dark); }
@media (max-width: 700px) { #gl-swipe { bottom: calc(var(--inset) + 48px + var(--s2) + 40px); } }
/* a two-word title stays on one line */
body.gl-caps .gl-lock h1 { font-size: clamp(34px, 6.4vw, 88px); white-space: nowrap; }
@media (max-width: 700px) { body.gl-caps .gl-lock h1 { font-size: clamp(26px, 9vw, 44px); } }


/* ── V15 round ten ──────────────────────────────────────────────────── */
/* the swipe: no track, higher, and a diagonal in the stroke */
.gl-swipe-track { display: none; }
#gl-swipe { bottom: calc(var(--inset) + 48px + var(--s3) + 64px); }
@keyframes gl-swipe {
  0%   { transform: translate(-80px, 14px) rotate(-8deg); }
  25%  { transform: translate(-30px, -6px) rotate(-3deg); }
  50%  { transform: translate(80px, -14px) rotate(8deg); }
  75%  { transform: translate(30px, 6px) rotate(3deg); }
  100% { transform: translate(-80px, 14px) rotate(-8deg); }
}
/* the brand mark back in a row, the name beside the ring, white */
body.gl-brand-top-left #gl-brand { flex-direction: row; align-items: center; gap: 12px; }
#gl-brand .gl-brand-word { height: 12px; }
/* the open page: eyebrow in white, a little more air at the top, body above EXPLORE */
.gl-page[data-layout="open"] .gl-lock { margin-top: 7vh; }
.gl-page[data-layout="open"] .gl-lock .gl-eyebrow { color: var(--ink); font-weight: 500; font-size: 12px; letter-spacing: .26em; text-indent: .26em; margin-bottom: var(--s2); }
.gl-page[data-layout="open"] .gl-lock .gl-copy { margin-top: auto; margin-bottom: var(--s2); }
.gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons,
body:not(.gl-cog-on) .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons { margin: 0 auto var(--s3); }
@media (max-width: 700px) { .gl-page[data-layout="open"] .gl-lock { margin-top: 8vh; } }
/* the panes: a title where the logo was, the content spread down the page,
   the page's buttons under it */
.gl-panes-title { margin: 3vh 0 var(--s2); font: 500 clamp(26px, 3.6vw, 44px)/1 var(--f-display); color: var(--ink); text-align: center; }
body.gl-caps .gl-panes-title { text-transform: uppercase; letter-spacing: .12em; text-indent: .12em; }
.gl-track-view { display: flex; align-items: stretch; }
.gl-pane { display: flex; flex-direction: column; justify-content: center; gap: var(--s3); }
.gl-pane .gl-lock { margin: 0 auto; }
.gl-notes { margin: 0 auto; max-width: 980px; }
.gl-note { padding: var(--s3) var(--s3); }
.gl-note p { font-size: 18px; }
.gl-tiles { max-width: 1060px; gap: var(--s3); }
.gl-tile { padding: var(--s4) var(--s2) var(--s3); }
.gl-tile-big { font-size: clamp(40px, 5.2vw, 66px); }
.gl-tile.words { min-height: 150px; }
.gl-tile-label { font-size: 16.5px; }
.gl-panes-buttons { margin: var(--s2) 0 var(--s2); }
@media (max-width: 700px) { .gl-tile { padding: var(--s3) var(--s2); } .gl-tile.words { min-height: 110px; } .gl-tile-label { font-size: 14px; } }


/* ── V15 round twelve: the pin's sub heading, the marks, the tabs, the title ── */
.gl-pin-label.has-sub { flex-direction: column; align-items: flex-start; gap: 5px; width: max-content; }
.gl-pin.flip .gl-pin-label.has-sub { align-items: flex-end; text-align: right; }
.gl-pin-sub { display: block; font: 400 10.5px/1.35 var(--f-body); letter-spacing: .03em; text-transform: none;
              color: var(--ink-2); white-space: normal; max-width: 260px; }
#gl-card .gl-card-mark { height: 32px; width: auto; display: block; margin: 0 0 var(--s2); opacity: .92; }
.gl-pane .gl-pane-mark { height: 40px; width: auto; display: block; margin: 0 auto var(--s2); opacity: .95; }
/* the title at the weight the brand's own headings carry (400, .10em) */
body.gl-caps .gl-lock h1 { font-weight: 400; letter-spacing: .10em; text-indent: .10em; }
/* six tabs on a phone wrap to two rows rather than run off the edge */
@media (max-width: 700px) {
  .gl-tabs { flex-wrap: wrap; row-gap: 2px; column-gap: 14px; }
  .gl-tab { font-size: 10px; letter-spacing: .12em; text-indent: .12em; padding: 8px 0; }
  .gl-pane .gl-pane-mark { height: 30px; }
  .gl-pin-sub { max-width: min(260px, calc(100vw - 120px)); }
}

/* ── V15 round twelve, phones: the panes fit the width and clear the brand row ── */
.gl-pane { box-sizing: border-box; }
@media (max-width: 700px) { .gl-panes-title, .gl-panes-logo { margin-top: 44px; } }
@media (max-width: 700px) {
  .gl-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gl-tile { min-width: 0; padding: var(--s2) 8px var(--s1); }
}
/* a pane that overflows starts at its top (auto margins centre when there
   is room and vanish when there is not; `justify-content: center` clipped
   the first row of nine tiles on a short screen) */
.gl-pane { justify-content: flex-start; }
.gl-pane > :first-child { margin-top: auto; }
.gl-pane > :last-child { margin-bottom: auto; }


/* ── V15 round thirteen: the cog above the pages, the info icon, the brand at the foot, the softened scan ── */
#gl-cog, #gl-settings { z-index: 6; }
/* the INFO control as an icon, the same round button as home and the cog */
#gl-count.gl-info.icon { min-width: 48px; width: 48px; height: 48px; padding: 0; border-radius: 50%; text-indent: 0; letter-spacing: 0;
  border: 1px solid var(--ink-4); background: color-mix(in srgb, var(--dark) 40%, transparent);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); color: var(--ink-2); }
#gl-count.gl-info.icon:hover { color: var(--ink); border-color: var(--ink-2); }
#gl-count.gl-info.icon.lit { color: var(--dark); background: var(--ink); border-color: var(--ink); }
#gl-count.icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
/* the brand at the foot of a page: white, centred, a link; it glides to the top left for the tour */
body.gl-brand-foot #gl-brand { top: auto; bottom: var(--inset); left: 0; right: 0; margin: 0 auto; width: max-content;
  flex-direction: row; align-items: center; gap: 12px; opacity: 1; z-index: 4; }
body.gl-brand-foot #gl-brand .gl-brand-word { opacity: 1; }
#gl-brand { z-index: 4; will-change: transform; }
#gl-brand.gl-brand-link { pointer-events: auto; cursor: pointer; }
#gl-brand.gl-brand-link:hover .gl-brand-word { opacity: .8; }
/* the page's own buttons and panes leave room for the brand at the foot */
body.gl-brand-foot .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons,
body.gl-brand-foot:not(.gl-cog-on) .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons { margin-bottom: calc(var(--inset) + 38px + var(--s2)); }
body.gl-brand-foot .gl-panes { padding-bottom: calc(var(--inset) + 38px + var(--s2)); }
/* the card: no head when it is empty; the eyebrow under the title; the whole sheet drags */
#gl-card .gl-card-head:empty { display: none; }
#gl-card .gl-card-sub { margin: calc(var(--s1) * -1) 0 var(--s2); }
body.gl-sheet #gl-card { touch-action: none; }
/* the scan softened behind a page that asks for it */
#application-canvas { transition: filter 1.2s ease; }
#gl-universe { transition: opacity 1.2s ease; }
body.gl-scan-soft #application-canvas { filter: blur(var(--scan-blur, 0px)) brightness(calc(1 - var(--scan-dim, 0))); }
body.gl-scan-soft #gl-universe { opacity: calc(1 - var(--scan-dim, 0)); }
/* the tiles darker, so they stand out from the picture */
.gl-tile { background: color-mix(in srgb, var(--dark) 58%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
/* on a phone the brand at the foot is smaller, so it clears the cog in the corner */
@media (max-width: 700px) {
  body.gl-brand-foot #gl-brand { gap: 10px; }
  body.gl-brand-foot #gl-brand .gl-brand-logo { width: 26px; height: 26px; }
  body.gl-brand-foot #gl-brand .gl-brand-word { height: 8.5px; }
}

/* ── V15 round thirteen, the review's findings ── */
#gl-card img { -webkit-user-drag: none; user-drag: none; user-select: none; }
/* a page that keeps its contact line lifts it clear of the brand at the foot */
body.gl-brand-foot .gl-page .gl-footer { padding-bottom: calc(38px + var(--s2)); }
/* a × alone in the head stays at the right */
#gl-card .gl-card-head > .gl-close:only-child { margin-left: auto; }


/* ── V15 round fourteen: the brand in the corner, the arms, the info glyph, no scrollbars ── */
body.gl-brand-corner #gl-brand { top: auto; bottom: var(--inset); left: var(--inset); right: auto;
  flex-direction: row; align-items: center; gap: 12px; opacity: 1; z-index: 4; }
body.gl-brand-corner #gl-brand .gl-brand-word { opacity: 1; }
body.gl-brand-corner .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons,
body.gl-brand-corner:not(.gl-cog-on) .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-buttons { margin-bottom: calc(var(--inset) + 38px + var(--s2)); }
body.gl-brand-corner .gl-panes { padding-bottom: calc(var(--inset) + 38px + var(--s2)); }
body.gl-brand-corner .gl-page .gl-footer { padding-bottom: calc(38px + var(--s2)); }
@media (max-width: 700px) {
  body.gl-brand-corner #gl-brand { gap: 10px; }
  body.gl-brand-corner #gl-brand .gl-brand-logo { width: 26px; height: 26px; }
  body.gl-brand-corner #gl-brand .gl-brand-word { height: 8.5px; }
}
/* the INFO icon is one of the nav buttons — never a white disc */
#gl-count.gl-info.icon.lit { color: var(--ink); background: color-mix(in srgb, var(--dark) 40%, transparent); border-color: var(--ink-2); }
/* the panes scroll without a scrollbar */
.gl-pane { scrollbar-width: none; }
.gl-pane::-webkit-scrollbar { display: none; }
/* THE ARMS — the settings around the cog, all at once. The panel is a
   point at the cog's centre; every arm is placed from it. */
#gl-settings.arms { width: 0; height: 0; padding: 0; border: 0; background: none; border-radius: 0; overflow: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  right: calc(var(--inset) + 24px); bottom: calc(var(--inset) + 24px); transform: none; }
#gl-settings.arms.on { transform: none; }
#gl-settings.arms .gl-arm { position: absolute; pointer-events: auto; }
#gl-settings.arms .gl-arm-label { position: absolute; font: 500 10px/1 var(--f-ui); letter-spacing: .18em; text-indent: .18em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; text-shadow: 0 1px 6px var(--dark); }
#gl-settings.arms input[type=range] { -webkit-appearance: none; appearance: none; height: 24px; background: none; margin: 0; width: 200px; display: block; }
#gl-settings.arms input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ink-3); }
#gl-settings.arms input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink);
  margin-top: -7.5px; box-shadow: 0 0 0 1px var(--dark); cursor: pointer; }
#gl-settings.arms input[type=range]::-moz-range-track { height: 1px; background: var(--ink-3); }
#gl-settings.arms input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 0; cursor: pointer; }
/* MOVE: left of the cog, its track through the cog's centre */
#gl-settings.arms .gl-arm.h { right: 40px; bottom: -12px; width: 200px; height: 24px; }
#gl-settings.arms .gl-arm.h .gl-arm-label { right: 0; bottom: 100%; margin-bottom: 6px; }
/* LENS and SPEED: up from the cog, the input turned on its end */
#gl-settings.arms .gl-arm.v, #gl-settings.arms .gl-arm.v2 { bottom: 40px; width: 24px; height: 200px; }
#gl-settings.arms .gl-arm.v { right: -12px; }
#gl-settings.arms .gl-arm.v2 { right: 44px; }
#gl-settings.arms .gl-arm.v input, #gl-settings.arms .gl-arm.v2 input { position: absolute; left: 0; top: 200px; width: 200px; transform-origin: 0 0; transform: rotate(-90deg); }
#gl-settings.arms .gl-arm.v .gl-arm-label, #gl-settings.arms .gl-arm.v2 .gl-arm-label { left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 10px; }
/* the two climbing arms stagger their names, or LENS and SPEED read as one line */
#gl-settings.arms .gl-arm.v2 .gl-arm-label { margin-bottom: 26px; }
/* COLOUR: the paints on the diagonal between the arms */
#gl-settings.arms .gl-arm.d { right: 0; bottom: 0; width: 0; height: 0; }
#gl-settings.arms .gl-arm.d .gl-swatch { position: absolute; right: calc(var(--k) * 44px + 118px); bottom: calc(var(--k) * 44px + 118px); }
#gl-settings.arms .gl-arm.d .gl-arm-label { right: 196px; bottom: 246px; }
@media (max-width: 700px) {
  #gl-settings.arms { width: 0; }
  #gl-settings.arms .gl-arm.h { width: 170px; }
  #gl-settings.arms .gl-arm.h input[type=range] { width: 170px; }
  #gl-settings.arms .gl-arm.v, #gl-settings.arms .gl-arm.v2 { height: 170px; }
  #gl-settings.arms .gl-arm.v input, #gl-settings.arms .gl-arm.v2 input { width: 170px; top: 170px; }
  #gl-settings.arms .gl-arm.d .gl-swatch { right: calc(var(--k) * 40px + 104px); bottom: calc(var(--k) * 40px + 104px); }
  #gl-settings.arms .gl-arm.d .gl-arm-label { right: 174px; bottom: 218px; }
}

/* the cards scroll without a bar either, and a pane with more below it fades out */
#gl-card, #gl-card .gl-card-pages { scrollbar-width: none; }
#gl-card::-webkit-scrollbar, #gl-card .gl-card-pages::-webkit-scrollbar { display: none; }
.gl-pane.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%); }
/* on a phone, while a PAGE is up (the brand is at its page position), the
   arms sit a little higher so the MOVE name clears the page's own button */
@media (max-width: 700px) {
  body.gl-brand-corner #gl-settings.arms, body.gl-brand-foot #gl-settings.arms { bottom: calc(var(--inset) + 24px + 30px); }
}


/* ── V15 round fifteen: bare icons, the standing sliders, the lockup ── */
/* the house and the cog are glyphs, not plates */
#gl-home, #gl-cog { border: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
#gl-home svg, #gl-cog svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 6px rgba(0,0,0,.75)); }
#gl-cog.lit { color: var(--ink); }
/* the INFO glyph is the letter alone — the pill is its circle */
#gl-count.icon svg { width: 20px; height: 20px; stroke-width: 2.4; }
/* the pin's sub heading wraps rather than running off the screen */
.gl-pin-sub { max-width: 190px; white-space: normal; }
@media (max-width: 700px) { .gl-pin-sub { max-width: min(190px, calc(100vw - 130px)); } }
/* the home lockup: VARG over MX 1.2, the second line a display line */
/* the second line of the lockup — the PAGE's own, never a pane's */
.gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-sub { margin-top: 2px; color: var(--ink); font-family: var(--f-display); font-weight: 300; }
body.gl-caps .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-sub {
  font-size: clamp(20px, 3.1vw, 42px); line-height: 1.05; letter-spacing: .12em; text-indent: .12em; text-transform: uppercase; }
.gl-eyebrow-foot { margin: auto auto var(--s2); }
.gl-page[data-layout="open"] .gl-lock .gl-copy + .gl-eyebrow-foot { margin-top: var(--s1); }

/* ── the settings: three standing sliders left of the cog, paints above ── */
body.gl-arms-on .gl-chev, body.gl-arms-on #gl-count { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.gl-chev, #gl-count { transition: opacity .3s ease; }
#gl-settings.arms .gl-arm.s1, #gl-settings.arms .gl-arm.s2, #gl-settings.arms .gl-arm.s3 {
  bottom: 6px; width: 44px; height: 210px; }
#gl-settings.arms .gl-arm.s1 { right: 52px; }
#gl-settings.arms .gl-arm.s2 { right: 108px; }
#gl-settings.arms .gl-arm.s3 { right: 164px; }
#gl-settings.arms .gl-arm.s1 input, #gl-settings.arms .gl-arm.s2 input, #gl-settings.arms .gl-arm.s3 input {
  position: absolute; left: 0; top: 210px; width: 210px; height: 44px; transform-origin: 0 0; transform: rotate(-90deg); }
#gl-settings.arms .gl-arm.s1 .gl-arm-label, #gl-settings.arms .gl-arm.s2 .gl-arm-label, #gl-settings.arms .gl-arm.s3 .gl-arm-label {
  left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 8px; }
/* a finger-sized thumb and a finger-sized track */
#gl-settings.arms input[type=range] { height: 44px; }
#gl-settings.arms input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--ink-3); }
#gl-settings.arms input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -12px; box-shadow: 0 0 0 1px var(--dark), 0 2px 10px rgba(0,0,0,.6); }
#gl-settings.arms input[type=range]::-moz-range-track { height: 2px; background: var(--ink-3); }
#gl-settings.arms input[type=range]::-moz-range-thumb { width: 26px; height: 26px; box-shadow: 0 0 0 1px var(--dark), 0 2px 10px rgba(0,0,0,.6); }
/* the paints: a column straight above the cog */
#gl-settings.arms .gl-arm.paints { right: 0; bottom: 44px; width: 48px; height: 0; }
#gl-settings.arms .gl-arm.paints .gl-swatch { position: absolute; right: 11px; bottom: calc(var(--k) * 40px); width: 26px; height: 26px; }
@media (max-width: 700px) {
  #gl-settings.arms .gl-arm.s1, #gl-settings.arms .gl-arm.s2, #gl-settings.arms .gl-arm.s3 { height: 180px; }
  #gl-settings.arms .gl-arm.s1 input, #gl-settings.arms .gl-arm.s2 input, #gl-settings.arms .gl-arm.s3 input { width: 180px; top: 180px; }
  #gl-settings.arms .gl-arm.s1 { right: 48px; } #gl-settings.arms .gl-arm.s2 { right: 100px; } #gl-settings.arms .gl-arm.s3 { right: 152px; }
}
/* ── the panes: the mark on top, the dots under the tabs, real scrolling ── */
.gl-panes-mark { height: 40px; width: auto; display: block; margin: 2.4vh auto var(--s1); }
.gl-panes .gl-dots { margin: 0 0 var(--s2); }
.gl-pane { touch-action: pan-y; overscroll-behavior: contain; }
.gl-track-view { touch-action: pan-y; }
@media (max-width: 700px) { .gl-panes-mark { height: 30px; margin-top: 44px; } }

/* the standing sliders name themselves in one word, tight enough to clear each other */
#gl-settings.arms .gl-arm.s1 .gl-arm-label, #gl-settings.arms .gl-arm.s2 .gl-arm-label, #gl-settings.arms .gl-arm.s3 .gl-arm-label { font-size: 9.5px; letter-spacing: .1em; text-indent: .1em; }
/* one note left on a pane centres itself rather than sitting in a column */
.gl-note:only-child { grid-column: 1 / -1; border-right: 0; }

/* on a phone the standing sliders cross the page's own button: while they
   are out, the page stands back — a tap away brings it straight back */
@media (max-width: 700px) {
  body.gl-arms-on .gl-page > .gl-plate > .gl-lock { opacity: .1; pointer-events: none; transition: opacity .3s ease; }
  .gl-pin-sub { max-width: min(150px, calc(100vw - 150px)); }
}


/* ── V15 round sixteen: the lockup as a statement, and a rail for the panes ── */
/* THE HOME LOCKUP. Stark's own display type is large and LIGHT with tight
   leading (their figures are ExtraLight 200 at 56 px, no tracking); their
   headings are small tracked caps. So the statement is made by SIZE, not
   by weight, and the model line is the small tracked counterpoint sitting
   right under it — not a caption floating away from the name. */
body.gl-caps .gl-page[data-layout="open"] > .gl-plate > .gl-lock > h1 {
  /* the size answers to BOTH axes: on a short window the bike sits higher
     up the screen, and a width-only clamp printed the model line over it */
  font-size: clamp(56px, min(10.4vw, 18vh), 172px);
  font-weight: 300;
  line-height: .86;
  letter-spacing: .022em;
  text-indent: .022em;
  margin: 0;
}
body.gl-caps .gl-page[data-layout="open"] > .gl-plate > .gl-lock > .gl-sub {
  margin-top: clamp(7px, .8vw, 12px);
  font-size: clamp(15px, min(1.85vw, 3.3vh), 30px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--ink-2);
}
/* the lockup starts a little higher, so the type has the room it now wants */
.gl-page[data-layout="open"] .gl-lock { padding-top: 2.4vh; }
@media (max-width: 700px) { .gl-page[data-layout="open"] .gl-lock { padding-top: 3vh; } }

/* ── the pane rail: 2 px of the brand's accent, never a scrollbar ── */
.gl-track-view { position: relative; }
.gl-rail { position: absolute; top: 6px; bottom: 6px; right: 2px; width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 12%, transparent); opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 3; }
.gl-rail.on { opacity: 1; }
.gl-rail i { position: absolute; left: 0; right: 0; top: 0; height: 30%; border-radius: 2px;
  background: color-mix(in srgb, var(--gold) 88%, transparent); transition: top .12s linear, height .2s ease; }
@media (max-width: 700px) { .gl-rail { right: 0; } }


/* ── V16 round one: the veil, the hint on the home page ── */
#gl-veil { position: absolute; inset: 0; background: #000; opacity: 1; pointer-events: none; }
/* the instructions on the home page sit over the picture's middle, clear of the lockup and the button */
#gl-swipe.home { bottom: 40%; }
@media (max-width: 700px) { #gl-swipe.home { bottom: 42%; } }


/* ── V16 round two: THE STRIP — the panes are the tour ── */
.gl-page[data-layout="strip"] > .gl-plate { position: relative; display: flex; flex-direction: column; align-items: center; }
.gl-page[data-layout="strip"] > .gl-plate > .gl-lock { padding-top: 2.4vh; text-align: center; }
body.gl-caps .gl-page[data-layout="strip"] > .gl-plate > .gl-lock > h1 {
  font-size: clamp(56px, min(10.4vw, 18vh), 172px); font-weight: 300; line-height: .86; letter-spacing: .022em; text-indent: .022em; margin: 0; }
body.gl-caps .gl-page[data-layout="strip"] > .gl-plate > .gl-lock > .gl-sub {
  margin-top: clamp(7px, .8vw, 12px); font-size: clamp(15px, min(1.85vw, 3.3vh), 30px); font-weight: 400; line-height: 1;
  letter-spacing: .34em; text-indent: .34em; color: var(--ink-2); font-family: var(--f-display); text-transform: uppercase; }
/* RIDE ANYWHERE, ANYTIME — a line of the lockup now, larger than an eyebrow */
.gl-eyebrow-strip { margin-top: clamp(10px, 1.6vh, 18px); font-size: clamp(12px, 1.05vw, 16px); letter-spacing: .3em; text-indent: .3em; color: var(--ink); }
/* the panes stand in the bottom third */
.gl-page[data-layout="strip"] .gl-panes { position: absolute; left: 0; right: 0; bottom: var(--inset); height: 31vh; min-height: 225px; justify-content: flex-start; }
.gl-page[data-layout="strip"] .gl-tabs { margin-bottom: var(--s1); }
.gl-page[data-layout="strip"] .gl-panes .gl-dots { margin: 0 0 var(--s2); }
.gl-page[data-layout="strip"] .gl-pane { gap: var(--s2); padding-bottom: var(--s2); }
.gl-page[data-layout="strip"] .gl-pane .gl-lock { margin-bottom: 0; max-width: 820px; }
.gl-page[data-layout="strip"] .gl-pane h2 { font-size: clamp(18px, 2.1vw, 28px); }
.gl-page[data-layout="strip"] .gl-pane .gl-sub { font-size: clamp(13px, 1.25vw, 16px); margin-top: 6px; }
.gl-page[data-layout="strip"] .gl-pane .gl-buttons { margin-top: var(--s2); }
.gl-page[data-layout="strip"] .gl-tiles { max-width: 720px; gap: 10px; }
.gl-page[data-layout="strip"] .gl-tile { padding: var(--s2) var(--s2) 10px; }
.gl-page[data-layout="strip"] .gl-tile-big { font-size: clamp(26px, 3vw, 40px); }
.gl-page[data-layout="strip"] .gl-tile hr { margin: 8px 0; }
.gl-page[data-layout="strip"] .gl-tile-label { font-size: 13px; }
.gl-page[data-layout="strip"] .gl-tile.words { min-height: 72px; }
.gl-page[data-layout="strip"] .gl-notes { margin-top: var(--s2); }
@media (max-width: 700px) {
  .gl-page[data-layout="strip"] > .gl-plate > .gl-lock { padding-top: 66px; }   /* under the brand row */
  .gl-page[data-layout="strip"] .gl-panes { height: 38vh; bottom: calc(var(--inset) + 48px + 6px); }
  .gl-page[data-layout="strip"] .gl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .gl-page[data-layout="strip"] .gl-tile { padding: 10px 6px 8px; }
  .gl-page[data-layout="strip"] .gl-tile-big { font-size: 24px; }
  .gl-page[data-layout="strip"] .gl-tile-label { font-size: 11px; }
  .gl-page[data-layout="strip"] .gl-tile.words { min-height: 56px; }
}
/* the home hint clears the strip: it stands over the picture's middle third */
#gl-swipe.home { bottom: 44%; }
@media (max-width: 700px) { #gl-swipe.home { bottom: 57%; } }


/* ── V16 round three: the strip line, no logo, no dots ── */
.gl-strip-line { font: 500 clamp(11px, .95vw, 14px)/1 var(--f-ui); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 var(--s2); text-shadow: 0 1px 8px var(--dark); }
.gl-page[data-layout="strip"] .gl-tabs { margin-bottom: var(--s2); }


/* ── V17 round one (2026-09-11): the starting shot, the strip's arrows, the
      tab bar, the heading-sized line, finger-sized arms, the paints in a
      pane, the brand ring in the corner at the cog's size ── */

/* THE STARTING SHOT. A strip page that carries an EXPLORE button opens as
   .gl-prestart: the panes wait below the bottom edge and the button stands
   at the foot with the page's line. Pressing it makes the page
   .gl-explored: the button fades, the panes rise from the edge, and the
   lockup comes down to a smaller size so there is more picture to explore.
   All of it is transition — nothing is re-laid out, so nothing jumps. */
.gl-page[data-layout="strip"] .gl-panes { transition: transform 1.05s cubic-bezier(.2,.7,.2,1) .12s; }
.gl-page.gl-prestart[data-layout="strip"] .gl-panes { transform: translateY(calc(100% + var(--inset) + 16px)); pointer-events: none; }
.gl-page[data-layout="strip"] > .gl-plate > .gl-lock { transform-origin: 50% 0; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.gl-page.gl-explored[data-layout="strip"] > .gl-plate > .gl-lock { transform: scale(.62); }
.gl-explore { position: absolute; left: 0; right: 0; bottom: calc(var(--inset) + 7vh); display: flex; flex-direction: column; align-items: center;
  gap: var(--s3); transition: opacity .5s ease, transform .5s ease, visibility 0s linear 0s; }
.gl-explore .gl-strip-line { margin: 0; }
/* visibility, not pointer-events: a child that sets `auto` is not protected
   by its parent's `none` (the hit-target law at the top of this file) */
.gl-page.gl-explored .gl-explore { opacity: 0; transform: translateY(12px); visibility: hidden;
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
@media (max-width: 700px) { .gl-explore { bottom: calc(var(--inset) + 48px + 9vh); } }

/* RIDE ANYWHERE, ANYTIME — the size of a pane's heading (FEEL IT TO BELIEVE IT) */
.gl-strip-line { font: 500 clamp(18px, 2.1vw, 28px)/1.1 var(--f-display); letter-spacing: .12em; text-indent: .12em; }

/* THE TAB BAR: a rounded bar of the accent with a soft glow, not a hairline */
.gl-page[data-layout="strip"] .gl-tab { position: relative; }
.gl-page[data-layout="strip"] .gl-tab.on { border-bottom-color: transparent; }
.gl-page[data-layout="strip"] .gl-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px;
  background: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 55%, transparent);
  opacity: 0; transform: scaleX(.35); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.gl-page[data-layout="strip"] .gl-tab.on::after { opacity: 1; transform: none; }

/* THE STRIP'S ARROWS — either side of the pane, the swipe for a mouse */
.gl-strip-chev { position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 12%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .25s ease, opacity .3s ease; }
.gl-strip-chev:hover { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.gl-strip-chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gl-strip-chev.prev { left: max(4px, calc(50% - 426px)); }
.gl-strip-chev.next { right: max(4px, calc(50% - 426px)); }
.gl-strip-chev.off { opacity: 0; visibility: hidden; transition: background .25s ease, opacity .3s ease, visibility 0s linear .3s; }
@media (max-width: 700px) { .gl-strip-chev { display: none; } }

/* THE PAINTS IN A PANE: the swatches centred, the paint's name beside them */
.gl-pane-paints { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; width: 100%; max-width: 720px; margin: 0 auto; }
.gl-pane-paints-swatches { grid-column: 2; display: flex; gap: 14px; align-items: center; }
.gl-pane-paints .gl-swatch { width: 30px; height: 30px; pointer-events: auto; }
.gl-pane-paints-name { grid-column: 3; justify-self: start; font: 500 11px/1 var(--f-ui); letter-spacing: .2em; text-indent: .2em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 700px) { .gl-pane-paints .gl-swatch { width: 28px; height: 28px; } .gl-pane-paints-name { font-size: 10px; letter-spacing: .14em; } }

/* THE ARMS, finger-sized: wider bands, a thicker track filled with the
   accent up to the thumb (--v, written by the slider), a larger thumb, and
   touch-action none so a phone never takes the drag for a scroll */
#gl-settings.arms .gl-arm.s1, #gl-settings.arms .gl-arm.s2, #gl-settings.arms .gl-arm.s3 { width: 56px; height: 230px; bottom: 6px; touch-action: none; }
#gl-settings.arms .gl-arm.s1 { right: 50px; }
#gl-settings.arms .gl-arm.s2 { right: 114px; }
#gl-settings.arms .gl-arm.s3 { right: 178px; }
#gl-settings.arms .gl-arm.s1 input, #gl-settings.arms .gl-arm.s2 input, #gl-settings.arms .gl-arm.s3 input { top: 230px; width: 230px; height: 56px; touch-action: none; }
#gl-settings.arms input[type=range] { --v: .5; }
#gl-settings.arms input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px;
  background: linear-gradient(to right, var(--gold) 0, var(--gold) calc(var(--v) * 100%), color-mix(in srgb, var(--ink) 22%, transparent) calc(var(--v) * 100%), color-mix(in srgb, var(--ink) 22%, transparent) 100%); }
#gl-settings.arms input[type=range]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -12px; }
#gl-settings.arms input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
#gl-settings.arms input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--gold); }
#gl-settings.arms input[type=range]::-moz-range-thumb { width: 30px; height: 30px; }
@media (max-width: 700px) {
  #gl-settings.arms .gl-arm.s1, #gl-settings.arms .gl-arm.s2, #gl-settings.arms .gl-arm.s3 { height: 190px; }
  #gl-settings.arms .gl-arm.s1 input, #gl-settings.arms .gl-arm.s2 input, #gl-settings.arms .gl-arm.s3 input { width: 190px; top: 190px; }
  #gl-settings.arms .gl-arm.s1 { right: 46px; } #gl-settings.arms .gl-arm.s2 { right: 108px; } #gl-settings.arms .gl-arm.s3 { right: 170px; }
}

/* THE BRAND RING IN THE CORNER, the same size as the cog, mirrored across the
   bottom edge; the corner no longer pads the strip (it stands beside it) */
body.gl-brand-corner #gl-brand { bottom: calc(var(--inset) + 6px); left: calc(var(--inset) + 6px); }
body.gl-brand-corner #gl-brand .gl-brand-logo { width: 36px; height: 36px; }
#gl-cog svg { width: 36px; height: 36px; stroke-width: 1.35; }
body.gl-brand-corner .gl-page[data-layout="strip"] .gl-panes { padding-bottom: 0; }
@media (max-width: 700px) {
  body.gl-brand-corner #gl-brand .gl-brand-logo { width: 30px; height: 30px; }
  #gl-cog svg { width: 30px; height: 30px; }
  /* the lockup no longer waits under a brand row at the top */
  body.gl-brand-corner .gl-page[data-layout="strip"] > .gl-plate > .gl-lock { padding-top: 4vh; }
}

/* the strip stands back while the arms are out, so the taller sliders read clearly over it */
.gl-page[data-layout="strip"] .gl-panes { transition: transform 1.05s cubic-bezier(.2,.7,.2,1) .12s, opacity .3s ease; }
body.gl-arms-on .gl-page[data-layout="strip"] .gl-panes { opacity: .22; }

/* the line stays one centred line — at a heading size it outgrew a phone and wrapped flush left */
.gl-strip-line { text-align: center; white-space: nowrap; }
@media (max-width: 700px) { .gl-strip-line { font-size: min(18px, 4.5vw); letter-spacing: .1em; text-indent: .1em; } }
/* the waiting panes clear the bottom edge whatever lifts them (a phone raises the strip over the cog row) */
.gl-page.gl-prestart[data-layout="strip"] .gl-panes { transform: translateY(calc(100% + 140px)); }
/* on a phone the ring is 30 px in a 48 px row: centred on the cog glyph, not on its box edge */
@media (max-width: 700px) { body.gl-brand-corner #gl-brand { bottom: calc(var(--inset) + 9px); left: calc(var(--inset) + 9px); } }

/* the strip fits a laptop: at 800 px tall every pane shows its words and tiles without
   scrolling — tighter spacing everywhere, and on a short desktop window the
   tiles go compact and the strip keeps a 262 px floor (the lockup coming down
   to 0.62 gives far more picture back at the top than that takes) */
.gl-page[data-layout="strip"] .gl-panes .gl-strip-line { margin-bottom: 10px; }
.gl-page[data-layout="strip"] .gl-tabs { margin-bottom: 8px; }
.gl-page[data-layout="strip"] .gl-tab { padding-top: 8px; padding-bottom: 8px; }
.gl-page[data-layout="strip"] .gl-pane { gap: 10px; padding-bottom: 0; }
@media (min-width: 701px) and (max-height: 860px) {
  .gl-page[data-layout="strip"] .gl-panes { height: max(31vh, 262px); }
  .gl-page[data-layout="strip"] .gl-tile { padding: 10px 12px 8px; }
  .gl-page[data-layout="strip"] .gl-tile-big { font-size: clamp(24px, 2.4vw, 32px); }
  .gl-page[data-layout="strip"] .gl-tile hr { margin: 5px 0; }
}


/* ── V17 round two (2026-09-11): the arrows in the sliders' language, the
      paint bar on the bottom line, the instructions one at a time ── */

/* THE STRIP'S ARROWS, in the same language as the settings sliders: a white
   disc like the sliders' thumbs, a dark chevron, and the accent's glow ring
   when a hand is on it */
.gl-strip-chev { width: 42px; height: 42px; margin-top: -21px; color: var(--dark); background: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--dark), 0 2px 10px rgba(0,0,0,.6);
  transition: transform .2s ease, box-shadow .25s ease, opacity .3s ease; }
.gl-strip-chev svg { width: 20px; height: 20px; stroke-width: 2.4; }
.gl-strip-chev:hover { background: var(--ink);
  box-shadow: 0 0 0 1px var(--dark), 0 0 0 4px color-mix(in srgb, var(--gold) 90%, transparent), 0 0 18px color-mix(in srgb, var(--gold) 55%, transparent); }
.gl-strip-chev:active { transform: scale(.93); }
.gl-strip-chev:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--dark), 0 0 0 4px var(--gold); }

/* THE PAINT BAR: the swatches centred on the bottom line, between the brand
   ring and the cog; the chosen paint's name beside them on a desk */
#gl-paintbar { position: absolute; left: 50%; bottom: var(--inset); height: 48px; transform: translateX(-50%);
  width: min(520px, calc(100vw - 2 * (var(--inset) + 72px)));
  display: none; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px;
  pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .6s ease, visibility 0s linear .6s; z-index: 5; }
body.gl-paintbar-on #gl-paintbar { display: grid; }
#gl-paintbar.on { visibility: visible; opacity: 1; transition: opacity .6s ease, visibility 0s; }
.gl-paintbar-swatches { grid-column: 2; display: flex; gap: 14px; align-items: center; }
#gl-paintbar .gl-swatch { width: 30px; height: 30px; pointer-events: auto; }
.gl-paintbar-name { grid-column: 3; justify-self: start; font: 500 11px/1 var(--f-ui); letter-spacing: .2em; text-indent: .2em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap; text-shadow: 0 1px 6px var(--dark); }
/* the slides and the starting shot's button stand clear of that line */
body.gl-paintbar-on .gl-page[data-layout="strip"] .gl-panes { bottom: calc(var(--inset) + 48px + 6px); }
body.gl-paintbar-on .gl-explore { bottom: calc(var(--inset) + 48px + 5vh); }
@media (max-width: 700px) {
  #gl-paintbar .gl-swatch { width: 28px; height: 28px; }
  .gl-paintbar-swatches { gap: 12px; }
  .gl-paintbar-name { display: none; }
  /* on a phone the standing sliders reach down to the bottom line: the bar steps aside while they are out */
  body.gl-arms-on #gl-paintbar { opacity: 0; visibility: hidden; }
}

/* THE INSTRUCTIONS, ONE AT A TIME: the drawn gesture follows the step */
#gl-swipe .gl-swipe-hand { transform-origin: 50% 20%; }
#gl-swipe.on[data-step="tap"] .gl-swipe-hand { animation: gl-step-tap 1.5s ease-in-out infinite; }
#gl-swipe.on[data-step="zoom"] .gl-swipe-hand { animation: gl-step-scroll 1.8s ease-in-out infinite; }
body.gl-sheet #gl-swipe.on[data-step="zoom"] .gl-swipe-hand { animation: gl-step-pinch 1.8s ease-in-out infinite; }
#gl-swipe[data-step="tap"] .gl-swipe-stage::after { content: ''; position: absolute; left: 50%; top: 16px; width: 18px; height: 18px; margin-left: -12px;
  border-radius: 50%; border: 2px solid var(--ink); opacity: 0; }
#gl-swipe.on[data-step="tap"] .gl-swipe-stage::after { animation: gl-step-ripple 1.5s ease-out infinite; }
@keyframes gl-step-tap { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(4px) scale(.9); } 55% { transform: translateY(0) scale(1); } }
@keyframes gl-step-ripple { 0%, 30% { opacity: 0; transform: scale(.4); } 40% { opacity: .85; } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes gl-step-scroll { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }
@keyframes gl-step-pinch { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.12); } }


/* ── V17 round three (2026-09-11): the selection ring in the paint's colour,
      see-through arrows, a low strip, and the words out in the scan ── */

/* the chosen swatch wears a ring of its OWN colour (--sw, written by paintsMark) */
.gl-swatch.on { box-shadow: 0 0 0 2px var(--dark), 0 0 0 4px var(--sw, var(--ink)); }

/* THE ARROWS, see-through: glass with a fine white ring and a white chevron;
   the accent's glow ring when a hand is on them */
.gl-strip-chev { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 65%, transparent); }
.gl-strip-chev:hover { background: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 3px color-mix(in srgb, var(--gold) 85%, transparent), 0 0 16px color-mix(in srgb, var(--gold) 50%, transparent); }
.gl-strip-chev:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 3px var(--gold); }

/* THE STRIP, LOW: it is only as tall as what it carries (the tabs and the
   tiles, now the words are in the scan), and once the paint bar has gone
   after EXPLORE it stands on the bottom edge again on a desk. A phone keeps
   it over the ring-and-cog row. */
.gl-page[data-layout="strip"] .gl-panes { height: auto; min-height: 0; }
@media (min-width: 701px) and (max-height: 860px) { .gl-page[data-layout="strip"] .gl-panes { height: auto; } }
@media (max-width: 700px) { .gl-page[data-layout="strip"] .gl-panes { height: auto; } }
@media (min-width: 701px) { body.gl-paintbar-on .gl-page[data-layout="strip"] .gl-panes { bottom: var(--inset); } }

/* THE CALLOUT: a dot on the part, a line that grows out, a card that unfolds
   from the line's end. Opening runs dot → line → card; folding runs card →
   line → dot. The card unfolds FROM the edge the line meets (data-side). */
#gl-callout { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 1; transition: opacity .35s ease; }
#gl-callout.away { opacity: 0; }
body.gl-arms-on #gl-callout { opacity: .15; }
.gl-callout-dot { position: absolute; left: -100px; top: -100px; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  box-sizing: border-box; border: 1.5px solid var(--ink); background: color-mix(in srgb, var(--dark) 35%, transparent);
  box-shadow: 0 0 12px rgba(0,0,0,.55); display: grid; place-items: center;
  transform: scale(0); opacity: 0; transition: transform .28s ease .5s, opacity .28s ease .5s; }
.gl-callout-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent); }
.gl-callout-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; }
#gl-callout.open .gl-callout-dot { transform: scale(1); opacity: 1; transition: transform .38s cubic-bezier(.2,.7,.2,1) 0s, opacity .25s ease 0s; }
#gl-callout.open .gl-callout-dot::after { animation: gl-callout-pulse 2.4s ease-out .4s infinite; }
@keyframes gl-callout-pulse { 0% { opacity: .75; transform: scale(.9); } 100% { opacity: 0; transform: scale(2.1); } }

.gl-callout-line { position: absolute; left: -100px; top: -100px; width: 0; height: 0; transform-origin: 0 0; }
.gl-callout-line i { display: block; height: 1.5px; margin-top: -.75px; border-radius: 2px;
  background: linear-gradient(to right, var(--gold), color-mix(in srgb, var(--ink) 85%, transparent));
  box-shadow: 0 0 8px rgba(0,0,0,.5); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s ease .22s; }
#gl-callout.open .gl-callout-line i { transform: scaleX(1); transition: transform .5s cubic-bezier(.2,.7,.2,1) .28s; }

.gl-callout-card { position: absolute; left: -1000px; top: 0; width: min(320px, 30vw); box-sizing: border-box; padding: 14px 18px 16px;
  border-radius: 12px; background: color-mix(in srgb, var(--dark) 52%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); box-shadow: 0 12px 40px rgba(0,0,0,.45);
  clip-path: inset(0 100% 0 0 round 12px); opacity: 0;
  transition: clip-path .32s cubic-bezier(.4,0,.6,1) 0s, opacity .25s ease 0s; }
#gl-callout[data-side="left"] .gl-callout-card { clip-path: inset(0 0 0 100% round 12px); }
#gl-callout[data-side="up"] .gl-callout-card { clip-path: inset(100% 0 0 0 round 12px); }
#gl-callout[data-side="down"] .gl-callout-card { clip-path: inset(0 0 100% 0 round 12px); }
#gl-callout.open .gl-callout-card { clip-path: inset(0 0 0 0 round 12px); opacity: 1;
  transition: clip-path .55s cubic-bezier(.2,.7,.2,1) .72s, opacity .3s ease .72s; }
.gl-callout-eyebrow { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px;
  font: 500 10.5px/1 var(--f-ui); letter-spacing: .24em; text-indent: 0; text-transform: uppercase; color: var(--ink-2); }
.gl-callout-eyebrow b { color: var(--gold); font-weight: 600; letter-spacing: .12em; }
.gl-callout-text { margin: 0; font: 300 14.5px/1.5 var(--f-body); color: var(--ink); text-transform: none; letter-spacing: 0; }
@media (max-width: 700px) {
  .gl-callout-card { width: min(320px, calc(100vw - 32px)); padding: 12px 16px 14px; }
  .gl-callout-text { font-size: 13.5px; }
}


/* ── V17 round four (2026-09-11): the callout in the room and quicker, a red
      dot, grey line work, the arrows on the bottom line ── */
:root { --callout-grey: color-mix(in srgb, var(--ink) 34%, transparent); }

/* THE DOT: red, glowing, nothing else — no ring, no radar */
.gl-callout-dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 0; background: var(--gold);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--gold) 65%, transparent), 0 0 22px 4px color-mix(in srgb, var(--gold) 35%, transparent);
  transition: transform .22s ease .36s, opacity .22s ease .36s; }
.gl-callout-dot i, .gl-callout-dot::after { display: none; }
#gl-callout.open .gl-callout-dot { transition: transform .3s cubic-bezier(.2,.7,.2,1) 0s, opacity .2s ease 0s; }
#gl-callout.open .gl-callout-dot::after { animation: none; }

/* THE LINE: red at the dot, the card's own grey at the card */
.gl-callout-line i { background: linear-gradient(to right, var(--gold), var(--callout-grey)); transition: transform .24s ease .16s; }
#gl-callout.open .gl-callout-line i { transition: transform .38s cubic-bezier(.2,.7,.2,1) .16s; }

/* THE CARD: a notch smaller, its words in the show's grey, its outline the
   line's grey — and placed in 3-D by a matrix3d from its top-left corner */
.gl-callout-card { left: 50%; top: 50%; transform-origin: 0 0; will-change: transform;
  width: min(270px, 26vw); padding: 11px 14px 13px; border-radius: 10px; border: 1px solid var(--callout-grey);
  clip-path: inset(0 100% 0 0 round 10px); transition: clip-path .24s cubic-bezier(.4,0,.6,1) 0s, opacity .2s ease 0s; }
#gl-callout[data-side="left"] .gl-callout-card { clip-path: inset(0 0 0 100% round 10px); }
#gl-callout[data-side="up"] .gl-callout-card { clip-path: inset(100% 0 0 0 round 10px); }
#gl-callout[data-side="down"] .gl-callout-card { clip-path: inset(0 0 100% 0 round 10px); }
#gl-callout.open .gl-callout-card { clip-path: inset(0 0 0 0 round 10px);
  transition: clip-path .45s cubic-bezier(.2,.7,.2,1) .46s, opacity .25s ease .46s; }
.gl-callout-eyebrow { margin-bottom: 6px; font-size: 9.5px; }
.gl-callout-text { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 700px) {
  .gl-callout-card { width: min(280px, calc(100vw - 40px)); padding: 10px 13px 12px; }
  .gl-callout-text { font-size: 12.5px; }
}

/* THE ARROWS: the callout card's glass (transparent and blurred), grey line
   work, standing on the bottom line between the brand ring and the cog */
.gl-strip-chev { top: auto; margin-top: 0; bottom: calc(var(--inset) + 3px); z-index: 5; color: var(--ink-2);
  background: color-mix(in srgb, var(--dark) 52%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 0 0 1.5px var(--callout-grey); }
.gl-strip-chev.prev { left: max(calc(var(--inset) + 54px), calc(50% - 411px)); }
.gl-strip-chev.next { right: max(calc(var(--inset) + 54px), calc(50% - 411px)); }
.gl-strip-chev:hover { color: var(--ink); background: color-mix(in srgb, var(--dark) 40%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--callout-grey), 0 0 0 3px color-mix(in srgb, var(--gold) 85%, transparent), 0 0 16px color-mix(in srgb, var(--gold) 50%, transparent); }
.gl-strip-chev:focus-visible { box-shadow: inset 0 0 0 1.5px var(--callout-grey), 0 0 0 3px var(--gold); }
/* not on the starting shot, and out of the way of the settings sliders */
.gl-page.gl-prestart .gl-strip-chev, body.gl-arms-on .gl-strip-chev { opacity: 0; visibility: hidden; }
@media (max-width: 700px) {
  .gl-strip-chev { display: grid; }
  .gl-strip-chev.prev { left: calc(50% - 83px); }
  .gl-strip-chev.next { right: calc(50% - 83px); }
}
/* the strip steps up to make room for that line on a desk (a phone's already clears it) */
@media (min-width: 701px) {
  .gl-page[data-layout="strip"] .gl-panes,
  body.gl-paintbar-on .gl-page[data-layout="strip"] .gl-panes { bottom: calc(var(--inset) + 48px + 8px); }
}


/* ── V17 round five (2026-09-11): the callout strictly in the scan; the way
      back to the starting shot ── */

/* THE CARD IN THE SCAN: rasterised at the size it stands at, so a card the
   visitor zooms into reads sharp (will-change kept the first frame's texture
   and stretched it) */
.gl-callout-card { will-change: auto; }

/* BACK TO THE STARTING SHOT: while the strip sinks, the button with its line
   and the paints wait for it to clear before they come back (only on the way
   back — the first load keeps its approved timing) */
body.gl-back-to-start .gl-page.gl-prestart .gl-explore { transition: opacity .6s ease .6s, transform .6s ease .6s, visibility 0s linear 0s; }
body.gl-back-to-start #gl-paintbar.on { transition: opacity .6s ease .5s, visibility 0s; }
/* after the last pane the next arrow is the way back: a turning arrow */
.gl-strip-chev.gl-to-start svg { width: 19px; height: 19px; stroke-width: 2.1; }


/* ── V17 round five, c (2026-09-11): the opening's type; the instructions in
      the hand's own gestures; the callout without a number; the closing shot ── */

/* THE OPENING: VARG MX 1.2 a size up and a weight heavier; the line, the
   button and the paints a touch smaller. Explored, the lockup still comes
   down to the size it had (.62 of the old title = .58 of this one;
   gw-show.js LOCK_EXPLORED is the same number) */
body.gl-caps .gl-page[data-layout="strip"] > .gl-plate > .gl-lock > h1 {
  font-size: clamp(62px, min(11.6vw, 20vh), 192px); font-weight: 400; }
body.gl-caps .gl-page[data-layout="strip"] > .gl-plate > .gl-lock > .gl-sub {
  font-size: clamp(16px, min(2.07vw, 3.7vh), 34px); font-weight: 500; }
.gl-page.gl-explored[data-layout="strip"] > .gl-plate > .gl-lock { transform: scale(.58); }
.gl-strip-line,
.gl-page[data-layout="strip"] .gl-pane h2 { font-size: clamp(16px, 1.9vw, 25px); }
.gl-explore-btn { font-size: 11.5px; padding: 12.5px 20px; }
#gl-paintbar .gl-swatch { width: 27px; height: 27px; }
.gl-paintbar-swatches { gap: 13px; }
.gl-paintbar-name { font-size: 10.5px; }
@media (max-width: 700px) {
  .gl-strip-line, .gl-page[data-layout="strip"] .gl-pane h2 { font-size: min(16px, 4.05vw); }
  #gl-paintbar .gl-swatch { width: 26px; height: 26px; }
  .gl-paintbar-swatches { gap: 11px; }
}

/* THE INSTRUCTIONS: a hand on a touch screen, a mouse on a desk */
.gl-swipe-mouse, .gl-swipe-pinch { position: absolute; left: 50%; display: none; fill: none; stroke: var(--ink); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--dark) 80%, transparent)); }
.gl-swipe-mouse { top: 12px; width: 30px; height: 44px; margin-left: -15px; }
.gl-swipe-pinch { top: 10px; width: 56px; height: 56px; margin-left: -28px; }
#gl-swipe[data-input="mouse"] .gl-swipe-hand { display: none; }
#gl-swipe[data-input="mouse"] .gl-swipe-mouse { display: block; }
#gl-swipe[data-input="touch"][data-step="zoom"] .gl-swipe-hand { display: none; }
#gl-swipe[data-input="touch"][data-step="zoom"] .gl-swipe-pinch { display: block; }
.gl-mouse-left, .gl-mouse-wheel { fill: var(--ink); stroke: none; }
.gl-mouse-left { opacity: 0; }
/* drag: the mouse travels with its left button held */
#gl-swipe.on[data-input="mouse"][data-step="drag"] .gl-swipe-mouse { animation: gl-swipe 2.6s cubic-bezier(.45,0,.55,1) infinite; }
#gl-swipe[data-input="mouse"][data-step="drag"] .gl-mouse-left { opacity: .8; }
/* click: the left button presses, and the ring goes out from it */
#gl-swipe.on[data-input="mouse"][data-step="tap"] .gl-mouse-left { animation: gl-mouse-click 1.5s ease-in-out infinite; }
#gl-swipe[data-input="mouse"][data-step="tap"] .gl-swipe-stage::after { top: 13px; margin-left: -16px; }
/* scroll: the wheel rolls */
#gl-swipe.on[data-input="mouse"][data-step="zoom"] .gl-mouse-wheel { animation: gl-mouse-wheel 1.1s ease-in-out infinite; }
@keyframes gl-mouse-click { 0%, 28%, 62%, 100% { opacity: 0; } 36%, 54% { opacity: .9; } }
@keyframes gl-mouse-wheel { 0% { transform: translateY(-2px); opacity: 1; } 65% { transform: translateY(5px); opacity: .1; }
  66% { transform: translateY(-2px); opacity: 0; } 100% { transform: translateY(-2px); opacity: 1; } }
/* pinch: two fingertips open and close along a diagonal */
.gl-pinch-a, .gl-pinch-b { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.gl-pinch-path { stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 2 4; }
#gl-swipe.on[data-input="touch"][data-step="zoom"] .gl-pinch-a { animation: gl-pinch-a 1.8s ease-in-out infinite; }
#gl-swipe.on[data-input="touch"][data-step="zoom"] .gl-pinch-b { animation: gl-pinch-b 1.8s ease-in-out infinite; }
@keyframes gl-pinch-a { 0%, 100% { transform: translate(3px, -3px); } 50% { transform: translate(-6px, 6px); } }
@keyframes gl-pinch-b { 0%, 100% { transform: translate(-3px, 3px); } 50% { transform: translate(6px, -6px); } }

/* THE CALLOUT'S EYEBROW: no number — a short red rule before the name */
.gl-callout-eyebrow { align-items: center; }
.gl-callout-eyebrow b { flex: 0 0 auto; width: 14px; height: 2px; border-radius: 2px; background: var(--gold);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 60%, transparent); }

/* THE CLOSING SHOT (pane.finale): the strip's last pane stands like the
   starting shot — the tabs step away, the lockup comes back up to size, and
   the heading, the words and the buttons stand at the foot, the buttons on
   EXPLORE's line */
.gl-page[data-layout="strip"] .gl-tabs { transition: opacity .45s ease, visibility 0s linear 0s; }
.gl-page.gl-finale[data-layout="strip"] .gl-tabs { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.gl-page.gl-explored.gl-finale[data-layout="strip"] > .gl-plate > .gl-lock { transform: none; }
.gl-page.gl-explored.gl-finale[data-layout="strip"] .gl-panes { transform: translateY(calc(8px - 5vh)); }
.gl-page[data-layout="strip"] .gl-pane.gl-finale-pane { justify-content: flex-end; }
.gl-page[data-layout="strip"] .gl-pane.gl-finale-pane > :last-child { margin-bottom: 0; }
.gl-pane.gl-finale-pane .gl-buttons { flex-wrap: nowrap; gap: 12px; margin-top: 22px; }
.gl-pane.gl-finale-pane .gl-btn { font-size: 11.5px; padding: 12.5px 20px; }
@media (max-width: 700px) {
  .gl-page.gl-explored.gl-finale[data-layout="strip"] .gl-panes { transform: translateY(calc(6px - 5vh)); }
  .gl-pane.gl-finale-pane .gl-buttons { gap: 10px; }
  .gl-pane.gl-finale-pane .gl-btn { padding: 12px 15px; letter-spacing: .12em; text-indent: .12em; }
}


/* ── V17 round six (2026-09-11): the arrows over the ring and the cog, the
      slides between them down to the foot; the callout back on the screen and
      a size smaller; the eyebrow's dot; the instructions a third quicker ── */

/* THE ARROWS stand directly over the brand ring (back) and the cog (next):
   centred on them (ring and cog both centre inset + 24 px in), 8 px over their
   48 px line */
.gl-strip-chev { bottom: calc(var(--inset) + 56px); }
.gl-strip-chev.prev { left: calc(var(--inset) + 3px); right: auto; }
.gl-strip-chev.next { right: calc(var(--inset) + 3px); left: auto; }
@media (max-width: 700px) {
  .gl-strip-chev.prev { left: calc(var(--inset) + 3px); }
  .gl-strip-chev.next { right: calc(var(--inset) + 3px); }
}

/* THE SLIDES come down to the foot, between the arrows' columns (arrow 42 px
   + a 10 px gap, 6 px on a phone): the tabs keep their width above them, the
   panels narrow to fit — on a phone the tiles' type comes down to suit */
.gl-page[data-layout="strip"] .gl-panes,
body.gl-paintbar-on .gl-page[data-layout="strip"] .gl-panes { bottom: var(--inset); }
.gl-page[data-layout="strip"] .gl-track-view { width: min(1040px, calc(100% - 2 * (var(--inset) + 55px))); }
@media (max-width: 700px) {
  .gl-page[data-layout="strip"] .gl-track-view { width: calc(100% - 2 * (var(--inset) + 51px)); }
  .gl-page[data-layout="strip"] .gl-pane { padding: 0; }
  .gl-page[data-layout="strip"] .gl-tiles { gap: 5px; }
  .gl-page[data-layout="strip"] .gl-tile { padding: 8px 4px 7px; }
  .gl-page[data-layout="strip"] .gl-tile-big { font-size: 19px; }
  .gl-page[data-layout="strip"] .gl-tile-small { margin-top: 4px; font-size: 9px; letter-spacing: .14em; text-indent: .14em; }
  .gl-page[data-layout="strip"] .gl-tile hr { margin: 5px 0; }
  .gl-page[data-layout="strip"] .gl-tile-label { font-size: 10px; line-height: 1.3; }
  .gl-page[data-layout="strip"] .gl-tile.words { min-height: 50px; }
}

/* THE CLOSING SHOT from the lower strip: its words keep the full width (they
   stand over the arrows' line), its buttons still on EXPLORE's line — on a
   phone compact enough to stand between the arrows */
.gl-page.gl-finale[data-layout="strip"] .gl-track-view { width: min(1040px, 100%); }
.gl-page.gl-explored.gl-finale[data-layout="strip"] .gl-panes { transform: translateY(calc(-48px - 5vh)); }
@media (max-width: 700px) {
  .gl-page.gl-explored.gl-finale[data-layout="strip"] .gl-panes { transform: translateY(calc(-48px - 5vh)); }
  .gl-page.gl-finale[data-layout="strip"] .gl-pane { padding: 0 var(--s2); }
  .gl-pane.gl-finale-pane .gl-buttons { gap: 8px; }
  .gl-pane.gl-finale-pane .gl-btn { font-size: 11px; padding: 11px 13px; letter-spacing: .1em; text-indent: .1em; }
}

/* THE CALLOUT, back on the screen: a flat card placed by its top-left corner,
   a size down so the part it names keeps its room */
.gl-callout-card { left: 0; top: 0; transform-origin: 0 0; will-change: transform;
  width: min(236px, 22vw); padding: 10px 13px 11px; }
.gl-callout-text { font-size: 12.5px; line-height: 1.45; }
.gl-callout-eyebrow { margin-bottom: 5px; font-size: 9px; }
@media (max-width: 700px) {
  .gl-callout-card { width: min(226px, calc(100vw - 72px)); padding: 9px 11px 10px; }
  .gl-callout-text { font-size: 12px; line-height: 1.42; }
}
/* the eyebrow's mark: a small red dot, not a line */
.gl-callout-eyebrow b { width: 6px; height: 6px; border-radius: 50%;
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--gold) 55%, transparent); }

/* THE INSTRUCTIONS come and go a third quicker (the step's own timings live in
   gw-show.js and pins.stepSeconds) */
#gl-swipe.home { transition: opacity .56s ease, visibility 0s linear .56s; }
#gl-swipe.home.on { transition: opacity .56s ease, visibility 0s; }

/* (round six, b) THE NARROW PHONE SLIDES: each tile takes at least the width of
   its own figure and longest word, sharing what is left, so 14,200 and
   "Arkenstone" fit at the row's own type size (measured: 14,200 overflowed a
   62 px tile at every size down to 14 px). THE CLOSING SHOT on a phone stands
   clear over the arrows (their tops are inset + 98 px up, 8 px more), its
   buttons back at round five's size */
@media (max-width: 700px) {
  .gl-page[data-layout="strip"] .gl-tiles { grid-template-columns: repeat(3, minmax(min-content, 1fr)); }
  .gl-page.gl-explored.gl-finale[data-layout="strip"] .gl-panes { transform: translateY(calc(-1 * max(48px + 5vh, 106px))); }
  .gl-pane.gl-finale-pane .gl-buttons { gap: 10px; }
  .gl-pane.gl-finale-pane .gl-btn { font-size: 11.5px; padding: 12px 15px; letter-spacing: .12em; text-indent: .12em; }
}


/* ── V17 round seven (2026-09-11): the ring and the cog to the top corners on
      the tour; the arrows level with the slides; the closing shot without
      arrows ── */

/* THE CORNERS ON THE TOUR (pages.cornersOnTour 'top'): gw-show.js fades the
   ring and the cog out (.gl-corners-fading), moves them (.gl-corners-top) and
   fades them up again (.gl-corners-rising) */
body.gl-corners-fading #gl-brand, body.gl-corners-fading #gl-cog { opacity: 0 !important; transition: opacity .35s ease !important; }
body.gl-corners-rising #gl-brand, body.gl-corners-rising #gl-cog { transition: opacity .55s ease !important; }
body.gl-brand-corner.gl-corners-top #gl-brand { top: calc(var(--inset) + 6px); bottom: auto; }
body.gl-corners-top #gl-cog { top: var(--inset); bottom: auto; }
/* the settings' sliders hang down from the cog up there, their names under them */
body.gl-corners-top #gl-settings.arms { top: calc(var(--inset) + 24px); bottom: auto; }
body.gl-corners-top #gl-settings.arms .gl-arm.s1,
body.gl-corners-top #gl-settings.arms .gl-arm.s2,
body.gl-corners-top #gl-settings.arms .gl-arm.s3 { top: 6px; bottom: auto; }
body.gl-corners-top #gl-settings.arms .gl-arm.s1 .gl-arm-label,
body.gl-corners-top #gl-settings.arms .gl-arm.s2 .gl-arm-label,
body.gl-corners-top #gl-settings.arms .gl-arm.s3 .gl-arm-label { top: 100%; bottom: auto; margin-top: 10px; margin-bottom: 0; }
@media (max-width: 700px) {
  body.gl-brand-corner.gl-corners-top #gl-brand { top: calc(var(--inset) + 9px); bottom: auto; }
  body.gl-brand-corner.gl-corners-top #gl-settings.arms { top: calc(var(--inset) + 24px); bottom: auto; }
}

/* THE ARROWS on such a tour stand in the bottom corners the ring and the cog
   left, level with the middle of the slides (--gl-view-h, the slides' own
   height, written by gw-show.js) */
.gl-page.gl-explored[data-corners="top"] .gl-strip-chev { bottom: calc(var(--inset) + var(--gl-view-h, 120px) / 2 - 21px); }

/* THE CLOSING SHOT has no arrows — its buttons are the way on — and on a phone
   its buttons stand on EXPLORE's line again, wrapping to a second row */
.gl-page.gl-finale[data-layout="strip"] .gl-strip-chev { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 700px) {
  .gl-page.gl-explored.gl-finale[data-layout="strip"] .gl-panes { transform: translateY(calc(-48px - 5vh)); }
  .gl-pane.gl-finale-pane .gl-buttons { flex-wrap: wrap; row-gap: 10px; }
}


/* ── V17 round eight (2026-09-11): a phone's slides keep their own height;
      the closing shot's buttons stand clear of its words; the arrows' tap
      light fades ── */

/* THE PHONE'S SLIDES: the closing pane's words stand on the pane's foot out of
   the flow, so the tile slides are only as tall as their tiles (its words, wrapped
   into the narrow strip, had made every slide 229 px tall) — the closing shot lets
   them rise over the slides and widens the strip, as before */
@media (max-width: 700px) {
  .gl-page[data-layout="strip"] .gl-pane.gl-finale-pane { position: relative; overflow: visible; }
  .gl-page[data-layout="strip"] .gl-pane.gl-finale-pane > .gl-lock { position: absolute; left: var(--s2); right: var(--s2); bottom: 0; margin: 0; }
  .gl-page[data-layout="strip"] .gl-pane.gl-finale-pane.more { -webkit-mask-image: none; mask-image: none; }
  .gl-page.gl-finale[data-layout="strip"] .gl-track-view { overflow: visible; }
  .gl-page[data-layout="strip"] .gl-pane.gl-finale-pane .gl-buttons { margin-top: 28px; }
}

/* THE ARROWS' TAP: no hover light on a touch screen (it held after the tap);
   a tap lights the arrow and the light fades (gw-show.js tapFlash) */
@media (hover: none) {
  .gl-strip-chev:hover { color: var(--ink-2); background: color-mix(in srgb, var(--dark) 52%, transparent); box-shadow: inset 0 0 0 1.5px var(--callout-grey); }
}
.gl-strip-chev.gl-tapped { color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--callout-grey), 0 0 0 3px color-mix(in srgb, var(--gold) 85%, transparent), 0 0 16px color-mix(in srgb, var(--gold) 50%, transparent); }
.gl-strip-chev.gl-tap-fading { transition: color .5s ease, background .5s ease, box-shadow .5s ease, opacity .3s ease; }