/* The YAHWAYLOVE grounds (run 50): the home page is a daylight world. The HTML chrome stays few and quiet:
   a top bar (the company, Skip to the site, Start a project, Menu), the map, and one panel at a time.
   Round 2 (2026-10-22): the chrome is set in the Press Room's craft like the site (site.css tokens): paper cards with
   crop marks and an ink rule, mono slugs, Copydesk headings, square buttons, the dark keys. Positions and sizes of the
   map, the pins, the route row, the prompt and the pads are unchanged (the grounds gate measures them). */
.page-grounds{--top:60px;--dock:0px;height:100dvh;overflow:hidden;overscroll-behavior:none}
.page-grounds .skip:focus{top:8px}

/* the stage: the still Gate picture paints first; the 3D canvas fades in over it once it draws */
.g-stage{position:fixed;inset:0;z-index:0;background:var(--stage)}
.g-stage picture,.g-poster{position:absolute;inset:0;width:100%;height:100%}
.g-poster{object-fit:cover;object-position:50% 50%;transition:opacity .6s}
#gCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s;touch-action:none;outline:none}
.world-on #gCanvas{opacity:1}
.world-on .g-poster{opacity:0}
/* both stills load with the page, so a change of light or dark mode swaps the picture at once (no fetch, no fade) */
.g-night,[data-theme="dark"] .g-day{display:none}
[data-theme="dark"] .g-night{display:block}

/* top bar: the site's masthead */
.g-top{position:fixed;z-index:30;top:0;left:0;right:0;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));background:var(--paper);border-bottom:1px solid var(--ink)}
.g-brand{display:flex;align-items:center;gap:10px;min-height:44px;min-width:44px;text-decoration:none;margin-right:auto;line-height:1.1}
.g-brand img{width:38px;height:auto}
.g-brand b{display:block;font:650 1.12rem/1.1 var(--serif);letter-spacing:-.01em}
.g-brand small{display:block;font:500 .6875rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.g-top-acts{display:flex;align-items:center;gap:6px}
.g-top .tt{background:var(--paper)}
.g-top .tt[aria-pressed="true"]{background:var(--ink)}
.g-top .btn{background:var(--paper)}
.g-top .btn.solid{background:var(--ink)}
.g-top .btn:hover,.g-top .btn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.g-top .btn.solid:hover{background:var(--sap);border-color:var(--sap);color:var(--on-sap)}
@media (max-width:759px){
  .g-brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .g-top .btn{padding:0 9px;font-size:.64rem;letter-spacing:.04em}
}
/* phones: the Gate card already offers Skip to the site (and the menu), so the top bar keeps one line */
@media (max-width:520px){.g-top .g-skip{display:none}}

/* panels: one at a time, real web text over the world, each a card with an ink rule (the Gate also has its crop marks) */
.pn,.g-menu{position:fixed;z-index:20;background:var(--paper);color:var(--ink);border:1px solid var(--ink);overflow:auto;overscroll-behavior:contain;padding:18px 20px 22px;display:grid;gap:14px;align-content:start}
.pn[hidden],.g-menu[hidden],.g-prompt[hidden],.g-pads[hidden],.g-hint[hidden]{display:none}
.pn-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:-18px;margin:-18px -20px 0;padding:8px 10px 8px 20px;background:var(--paper);border-bottom:2px solid var(--ink);z-index:2}
.pn-k{margin:0;font:700 .6875rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);outline:none}
.pn-k::before{content:"";display:inline-block;width:18px;height:1px;background:var(--gold);vertical-align:middle;margin-right:8px}
.pn h3{font:650 clamp(1.55rem,2.5vw,2rem)/1.05 var(--serif);letter-spacing:-.02em}
.pn .what{font-size:.96rem}
.pn .figs{margin:2px 0}
.pn .note{margin:2px 0}
.pn .ba{margin:0}
.pn .acts{gap:8px}
.pn .film-frame{max-width:none}
.pn .contact-grid{grid-template-columns:1fr;gap:18px}
.pn .pcf{margin-top:4px}
.pn .pc-side{padding-top:10px}
@media (min-width:900px){
  .pn,.g-menu{top:calc(var(--top) + 14px);right:16px;bottom:16px;width:min(470px,calc(100vw - 32px))}
  .g-menu{bottom:auto;max-height:calc(100dvh - var(--top) - 30px);width:360px}
  #pn-drive{bottom:auto}
}
@media (max-width:899px){
  .page-grounds{--dock:162px}
  .pn,.g-menu{top:calc(var(--top) + 8px);left:8px;right:8px;bottom:calc(var(--dock) + 8px)}
  .g-menu{bottom:auto;max-height:calc(100dvh - var(--top) - var(--dock) - 16px)}
}

/* the Gate: the first screen (no close button: Start or Skip), set like the site's masthead */
.pn-gate{padding:0;--m:8px;--a:14px}
.pn-gate.crop{position:fixed}
.gate-card{padding:28px 30px 26px;display:grid;gap:12px;justify-items:start;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
.gate-card>*{grid-column:1 / -1}
.gate-card .kick{grid-column:2;align-self:end}
.gate-mark{grid-column:1;grid-row:1 / span 2;width:72px;height:auto}
.pn-gate h1{grid-column:2;margin:0;font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:.95;letter-spacing:-.03em;outline:none}
.gate-owners{font:600 .72rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-bottom:12px;border-bottom:1px solid var(--line);justify-self:stretch}
.pn-gate .co-fact{font-size:1rem;max-width:42ch;color:var(--ink)}
.gate-svc{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 .72rem/1.6 var(--mono);color:var(--ink-2);max-width:46ch;counter-reset:s}
.gate-svc li{counter-increment:s}
.gate-svc li::before{content:counter(s,decimal-leading-zero);display:inline-block;margin-right:6px;padding:0 4px;background:var(--ink);color:var(--paper);font-weight:700;font-size:.64rem;line-height:1.6}
.gate-acts{margin-top:8px;gap:12px 18px}
.gate-start{min-width:140px;font-size:.8rem;padding:0 30px;min-height:48px}
@media (min-width:900px){.pn-gate{top:calc(var(--top) + 32px);left:clamp(16px,4vw,64px);right:auto;bottom:auto;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - var(--top) - 260px)}}
@media (max-width:899px){
  /* phones: the card sits above the map, so the still Gate picture shows above it */
  .pn-gate{top:auto;bottom:calc(var(--dock) + 8px);max-height:calc(100dvh - var(--top) - var(--dock) - 16px)}
  .gate-card{padding:18px 18px 24px;gap:7px 12px}
  .pn-gate{--m:6px;--a:12px}
  .gate-mark{width:46px}
  .pn-gate h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .gate-owners{padding-bottom:7px;font-size:.66rem}
  .pn-gate .co-fact{font-size:.92rem;line-height:1.45}
  .gate-svc{font-size:.66rem;gap:3px 12px}
  .gate-acts{margin-top:4px}
}

/* the map: always on screen; one tap travels. A proof card (ink rule, square, mono labels) over the grounds themselves:
   the 3D world rendered straight down (2026-10-28, Andrew: "more realistic and user-intuitive"), day or night with the
   theme. Each place has a marker on its building; its label points at it; the car is a "you" arrow with a view cone */
.g-map{position:fixed;z-index:25;left:16px;bottom:16px;width:372px;height:232px;overflow:hidden;background:var(--map-bg);border:1px solid var(--ink);outline:none;container-type:size}
.g-map::after{content:"";position:absolute;inset:5px;border:1px solid var(--map-rule);pointer-events:none;box-shadow:inset 0 0 28px rgba(28,25,20,.22)}
.g-map:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the render covers x -160..160 m, z -50..58 m (a short, wide phone or tablet card shows far to the sides); the SVG's view (100 x 68 m, centred on z 4) is fitted inside the card
   (meet), so 1 m is min(100cqw, 147.06cqh) / 100 and the picture is placed in the same metres */
.g-map-base{position:absolute;--m:calc(min(100cqw, 147.06cqh) / 100);-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);width:calc(320 * var(--m));height:calc(108 * var(--m));max-width:none;left:calc(50% - 160 * var(--m));top:calc(50% - 54 * var(--m));pointer-events:none;user-select:none}
/* past the render's ends (a very wide card) the card is the colour of its edges, and the render fades into it */
.g-map{background:#655522}
[data-theme="dark"] .g-map{background:#0a0e0a}
.g-map-night,[data-theme="dark"] .g-map-day{display:none}
[data-theme="dark"] .g-map-night{display:block}
.g-map-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.g-mk circle{fill:#fbf8f2;stroke:#1c1914;stroke-width:.4;transition:r .15s}
.g-mk .g-mk-in{fill:#2a4a7a;stroke:none}
.g-map:has(.g-pin[data-go="gate"]:is(:hover,:focus-visible,[aria-current="true"])) .g-mk[data-place="gate"],.g-map:has(.g-pin[data-go="work"]:is(:hover,:focus-visible,[aria-current="true"])) .g-mk[data-place="work"],.g-map:has(.g-pin[data-go="lab"]:is(:hover,:focus-visible,[aria-current="true"])) .g-mk[data-place="lab"],.g-map:has(.g-pin[data-go="drive"]:is(:hover,:focus-visible,[aria-current="true"])) .g-mk[data-place="drive"],.g-map:has(.g-pin[data-go="company"]:is(:hover,:focus-visible,[aria-current="true"])) .g-mk[data-place="company"],.g-map:has(.g-pin[data-go="mail"]:is(:hover,:focus-visible,[aria-current="true"])) .g-mk[data-place="mail"],.g-map:has(.g-pin[data-go="press"]:is(:hover,:focus-visible,[aria-current="true"])) .g-mk[data-place="press"]{r:3px}
.g-map-car{display:none}
.world-on .g-map-car{display:inline}
.g-car-cone{fill:#2a4a7a;opacity:.3}
.g-car-ring{fill:#fbf8f2;stroke:#2a4a7a;stroke-width:.7}
.g-car-arrow{fill:#2a4a7a}
/* labels: a point (u, v) of that view lands at the card's centre plus its offset times the fitted size; each label sits
   above or below its marker with a pointer to it */
.g-pins{position:absolute;inset:0;margin:0;padding:0;list-style:none;z-index:1}
.g-pins li{position:absolute;z-index:1;left:calc(50% + (var(--u) - .5) * min(100cqw, 147.06cqh));top:calc(50% + (var(--v) - .5) * min(100cqh, 68cqw));width:max-content;transform:translate(-50%,-50%)}
.g-pins li[data-at="above"]{transform:translate(-50%,calc(-100% + 3px))}
.g-pins li[data-at="below"]{transform:translate(-50%,-3px)}
.g-pin{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px;background:none;border:0;color:var(--ink);line-height:1.1}
.g-pin-c{position:relative;display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 2px;background:var(--paper);border:1px solid var(--ink);font:600 .74rem/1.2 var(--mono);white-space:nowrap;box-shadow:0 1px 3px rgba(28,25,20,.35)}
.g-pin-c::after{content:"";position:absolute;left:50%;margin-left:-5px;border:5px solid transparent}
[data-at="above"] .g-pin-c::after{top:100%;border-top-color:var(--ink)}
[data-at="below"] .g-pin-c::after{bottom:100%;border-bottom-color:var(--ink)}
.g-pin kbd{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 3px;background:var(--key-face);color:var(--key-ink);font:700 .64rem/1 var(--mono);border-bottom:2px solid var(--key-base)}
.g-pin:hover .g-pin-c{background:var(--card);box-shadow:inset 0 -2px 0 var(--gold),0 1px 3px rgba(28,25,20,.35)}
.g-pin:focus-visible{outline:none}
.g-pin:focus-visible .g-pin-c{outline:2px solid var(--ink);outline-offset:2px}
.g-pin[aria-current="true"] .g-pin-c{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.g-pin[aria-current="true"] kbd{background:var(--paper);color:var(--ink);border-bottom-color:var(--gold)}
@media (pointer:coarse){.g-pin kbd{display:none}.g-pin-c{padding:3px 9px}}
.g-north,.g-scale{position:absolute;z-index:2;display:flex;align-items:center;gap:4px;padding:2px 6px;background:var(--paper);border:1px solid var(--ink);font:700 .62rem/1.2 var(--mono);letter-spacing:.08em;color:var(--ink);pointer-events:none}
.g-north{top:9px;right:10px}
.g-north svg{width:11px;height:11px}
/* the scale: 10 m at the map's own metre; a short card (a phone) has no room for it */
.g-scale{right:10px;bottom:9px;letter-spacing:.04em}
.g-scale i{display:block;width:calc(10 * min(100cqw, 147.06cqh) / 100);height:5px;border:1.5px solid var(--ink);border-top:0}
/* a short card (phones and tablets: a 154 px strip) squeezes the places together: smaller labels without the key
   badges, the scale and compass out of the way, and labels placed per place to use the strip's width */
@container (max-height:200px){
  .g-scale{display:none}.g-north{top:auto;bottom:9px}
  .g-pin-c{font-size:.66rem;padding:2px 6px}.g-pin kbd{display:none}
  .g-pins li[data-at-short="above"]{transform:translate(-50%,calc(-100% + 3px))}
  .g-pins li[data-at-short="below"]{transform:translate(-50%,-3px)}
  .g-pins li[data-at-short="left"]{transform:translate(calc(-100% - 4px),-50%)}
  .g-pins li[data-at-short="right"]{transform:translate(4px,-50%)}
  [data-at-short] .g-pin-c::after{top:auto;bottom:auto;left:50%;right:auto;margin:0 0 0 -5px;border-color:transparent}
  [data-at-short="above"] .g-pin-c::after{top:100%;border-top-color:var(--ink)}
  [data-at-short="below"] .g-pin-c::after{bottom:100%;border-bottom-color:var(--ink)}
  [data-at-short="left"] .g-pin-c::after{top:50%;left:100%;margin:-5px 0 0;border-left-color:var(--ink)}
  [data-at-short="right"] .g-pin-c::after{top:50%;left:auto;right:100%;margin:-5px 0 0;border-right-color:var(--ink)}
}
@media (max-width:899px){.g-map{left:8px;right:8px;bottom:8px;width:auto;height:calc(var(--dock) - 8px)}}
@media (max-width:899px){.g-pin-c{font-size:.7rem;padding:2px 7px}}

/* the prompt at a place, the light tier's hint, the touch pedals */
.g-prompt{position:fixed;z-index:22;left:50%;transform:translateX(-50%);top:calc(var(--top) + 16px)}
.g-prompt .btn{font-size:.78rem;padding:0 22px;min-height:48px;outline:1px solid var(--paper);outline-offset:0}
.g-hint{position:fixed;z-index:22;left:50%;transform:translateX(-50%);bottom:28px;padding:10px 16px;background:var(--paper);border:1px solid var(--ink);font:600 .74rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@media (max-width:899px){.g-hint{bottom:calc(var(--dock) + 16px)}}
.menu-open .pn:not(.pn-gate){display:none}
@media (max-width:899px){.menu-open .pn-gate{display:none}}
.g-pads{position:fixed;z-index:22;left:12px;right:12px;bottom:calc(var(--dock) + 76px);display:flex;justify-content:space-between;pointer-events:none}
.g-pads>div{display:flex;gap:10px;pointer-events:auto}
/* phones and tablets: the pedals sit just above the map strip, under the thumbs (Andrew, 2026-10-28: "closer to the map") */
@media (max-width:899px){.g-pads{bottom:calc(var(--dock) + 10px)}}
.pad{width:60px;height:60px;border-radius:12px;background:var(--key-face);border:1px solid var(--key-edge);border-bottom:5px solid var(--key-base);color:var(--key-ink);font-size:1.1rem;touch-action:none;user-select:none;-webkit-user-select:none;opacity:.92}
.pad:active{background:var(--sap);border-bottom-width:2px}
.panel-open .g-pads,.panel-open .g-prompt,.menu-open .g-prompt,.menu-open .g-pads{display:none}

/* the menu: a ruled ledger */
.g-menu-list{display:grid;border-top:2px solid var(--ink)}
.g-menu-list li{border-bottom:1px solid var(--line-2)}
.g-menu-list a,.g-menu-list button{display:flex;align-items:center;width:100%;min-height:48px;text-align:left;text-decoration:none;font:650 1.1rem/1.2 var(--serif)}
.g-menu-list a::after,.g-menu-list button::after{content:"→";margin-left:auto;font:600 .8rem/1 var(--mono);color:var(--ink-3)}
.g-menu-list a:hover,.g-menu-list button:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.g-keys,.g-menu .credit{max-width:46ch}
.g-keys{font-family:var(--mono);font-size:.72rem;line-height:1.6}

/* the Work yard's case viewer: the docket's dark keys */
.wk-index{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));gap:6px}
.wk-i{min-width:44px;min-height:46px;border:1px solid var(--key-edge);border-radius:8px;background:var(--key-face);color:var(--key-ink);border-bottom:4px solid var(--key-base);font:650 1.15rem/1 var(--serif)}
.wk-i .mono{font-family:var(--serif);font-feature-settings:normal}
.wk-i:hover{background:var(--key-cur)}
.wk-i[aria-current="true"]{background:var(--paper);color:var(--ink);border-color:var(--ink);border-bottom:4px solid var(--gold)}
.wk-case{display:grid;gap:12px}
.wk-case[hidden]{display:none}
.wk-cap{border:1px solid var(--line);background:var(--paper-2)}
.wk-cap img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top}
.wk-case[data-case="job-radar"] .wk-cap img{object-fit:contain;object-position:center;background:var(--card)}
.wk-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:2px solid var(--ink)}
.wk-nav .mono{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.wk-case .text-link{background:none;border:0}

/* the Lab, the Company house */
.lab-soon{font:650 2rem/1.1 var(--serif);color:var(--ink-2);padding:24px 0}
.lab-list{display:grid;gap:18px}
.lab-list li{display:grid;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.lab-list img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--paper-2);border:1px solid var(--line)}
.lab-list h3{font-size:1.3rem}
.lab-list p{font-size:.92rem;color:var(--ink-2)}
.co{display:grid;gap:16px}
.co .pitch{margin:0}
.co .pitch p{font-size:1rem}
.co h3{font-size:1.25rem;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.co .ledger-rows{border-top:2px solid var(--ink)}
.co .svc li{font-size:1.02rem;padding:10px 0}

/* light tier and reduced motion: no transitions needed */
@media (prefers-reduced-motion:reduce){.g-poster,#gCanvas{transition:none}}

/* navigation (run 50, round 2): "Where to?", the route row, the light tier's Drive button, Jump in the menu */
.g-nav{position:fixed;z-index:24;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 24px)}
.g-nav[hidden],.g-route[hidden],.g-where-list[hidden],.g-drive[hidden]{display:none}
.g-nav .btn{background:var(--paper)}
.g-nav .btn.solid{background:var(--ink);color:var(--paper)}
.g-nav .btn:hover{background:var(--ink);color:var(--paper)}
.g-where{font-size:.78rem;padding:0 22px;min-height:48px}
.g-route{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 14px;background:var(--paper);border:1px solid var(--ink)}
.g-route-t{font:600 .78rem/1.2 var(--mono);color:var(--ink);white-space:nowrap}
.g-where-list{width:min(300px,calc(100vw - 24px));background:var(--paper);border:1px solid var(--ink);padding:12px;display:grid;gap:6px}
.g-where-k{font:700 .6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:4px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.g-where-list ul{display:grid;gap:0}
.g-dest{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 10px;border:0;border-bottom:1px solid var(--line-2);background:var(--paper);text-align:left;font:650 1.02rem/1.2 var(--serif)}
.g-dest:hover{background:var(--card);box-shadow:inset 3px 0 0 var(--gold)}
.g-dest[data-visited]::after{content:"visited";font:600 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.g-sugg{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.g-sugg::after{content:"→";font:600 .85rem/1 var(--mono)}
.g-sugg:hover{background:var(--sap);border-color:var(--sap);color:var(--on-sap);box-shadow:none}
.g-drive{position:fixed;z-index:24;left:50%;transform:translateX(-50%);top:calc(var(--top) + 14px);padding:0 28px;min-height:48px;font-size:.8rem;outline:1px solid var(--paper)}
.g-jump{display:grid;gap:8px}
.g-jump-k{font:700 .6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.g-jump-b{display:flex;flex-wrap:wrap;gap:6px}
.g-jump-b .btn{padding:0 12px;font-size:.66rem}
.panel-open .g-nav,.menu-open .g-nav{display:none}
@media (min-width:900px){.g-prompt{top:calc(var(--top) + 16px)}}
@media (max-width:899px){
  /* phone: Where to? and the route share one compact card at the top, and Open sits just above the pads, so the
     route never stacks down over the place itself (run 50, round 3) */
  .g-nav{top:calc(var(--top) + 8px);bottom:auto;flex-flow:row wrap;justify-content:center;gap:4px 6px}
  .g-nav:has(#gRoute:not([hidden])){padding:6px 8px 8px;background:var(--paper);border:1px solid var(--ink)}
  .g-route:not([hidden]){display:contents}
  .g-route-t{order:-1;flex-basis:100%;text-align:center;font-size:.74rem}
  .g-where,.g-route .btn{white-space:nowrap;padding:0 12px;font-size:.66rem;min-height:44px}
  .g-where-list{flex-basis:100%}
  .g-prompt{top:auto;bottom:calc(var(--dock) + 148px)}
  .g-prompt .btn{white-space:nowrap;min-height:44px}
  body:has(#gWhere[aria-expanded="true"]) :is(.g-pads,.g-prompt){display:none}
}
@media (min-width:900px){.g-nav{left:auto;right:24px;transform:none;align-items:flex-end}}
/* state changes are instant on the grounds (a pin or button that turns current never passes through low contrast) */
.g-pin,.wk-i,.g-dest{transition:none}
.page-grounds .btn{transition:none}
/* the keys line (run 50, round 3): bottom centre on a keyboard device, while driving */
.g-keys-tip{position:fixed;z-index:22;left:50%;transform:translateX(-50%);bottom:24px;margin:0;padding:8px 14px;background:var(--paper);border:1px solid var(--ink);font:500 .76rem/1.6 var(--mono);color:var(--ink);white-space:nowrap}
.g-keys-tip[hidden],.panel-open .g-keys-tip,.menu-open .g-keys-tip,body[data-tier="light"] .g-keys-tip{display:none}
.g-keys-tip kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;margin:0 1px;padding:0 4px;border-radius:4px;background:var(--key-face);color:var(--key-ink);border-bottom:2px solid var(--key-base);font:700 .68rem/1 var(--mono)}
@media (max-width:1180px){.g-keys-tip{left:404px;transform:none;bottom:24px;white-space:normal;max-width:calc(100vw - 404px - 190px)}}
/* phones: an open place panel takes the screen; its Close comes before Drive (Drive sat over the panel's heading) */
@media (max-width:899px){body:has(.pn:not(.pn-gate):not([hidden])) .g-drive{display:none}}
/* tablets in landscape and desktops: the Gate card sits top left, so Drive moves to the top right, clear of it */
@media (min-width:900px){.g-drive{left:auto;right:24px;transform:none}}

/* the splash (Andrew, 2026-10-27: "Have a splash loading screen with an awesome graphic animation"): it covers the load
   until the grounds can be seen whole. A gate rises over the Hill Country, the six lanterns light as the world loads,
   and when it is ready the gate swings open and the view drives through it onto the live grounds. Everything that
   moves (the hills, the pillars, the beam, the seal, the gates, the rays, the glow, the road's centre line, the stars)
   is its own layer and moves by transform or opacity only, so the compositor runs it without repainting and the world
   builds at full speed behind it (animating parts inside one drawing repainted it every frame and slowed the build). Without script it
   is never shown; if the script never lifts it, it lifts itself after 25 s */
.splash{display:none}
.js .splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px 16px 76px;overflow:hidden;
  --sp-bg:#f6f1e7;--sp-bg1:#fffdf9;--sp-sky1:#dfe7e6;--sp-sky2:#f6eedd;--sp-halo:#f2c46a;--sp-ray:#e0ae4c;--sp-h3:#c9c8b8;--sp-h2:#bca673;--sp-h1:#a8955f;
  --sp-g1:#b3aa70;--sp-g2:#9d9560;--sp-r1:#ece2c8;--sp-r2:#d9c69e;--sp-edge:rgba(96,72,48,.35);--sp-dash:#b08d3f;
  --sp-stone:#efe4cc;--sp-stone-edge:#b8a47c;--sp-course:#cdb88f;--sp-beam:#6e5238;--sp-strap:#2a2520;--sp-iron:#2a2520;
  --sp-lampbody:#1c1914;--sp-glass:#e8dcc0;--sp-lamp:#ffc761;--sp-ring:#b08d3f;--sp-tree:#7f7a45;
  background:var(--sp-bg);
  animation:sp-safety .01s linear 25s forwards}
:root[data-theme="dark"] .splash{--sp-bg:#0d1018;--sp-bg1:#161b26;--sp-sky1:#0d1220;--sp-sky2:#1c2436;--sp-halo:#a9bde0;--sp-ray:#7f97c4;
  --sp-h3:#222a3c;--sp-h2:#2a3347;--sp-h1:#323c52;--sp-g1:#2b3242;--sp-g2:#1e2330;--sp-r1:#45474e;--sp-r2:#37393f;
  --sp-edge:rgba(201,164,74,.25);--sp-dash:#c9a44a;--sp-stone:#4b4945;--sp-stone-edge:#3a3835;--sp-course:#35332f;
  --sp-beam:#4c3c2b;--sp-strap:#0b0d12;--sp-iron:#0e1015;--sp-lampbody:#0e1015;--sp-glass:#3d3a33;--sp-lamp:#ffbf52;--sp-ring:#c9a44a;--sp-tree:#1a2030}
.js .splash[hidden]{display:none}
@keyframes sp-safety{to{opacity:0;visibility:hidden}}
.sp-in{display:grid;justify-items:center;gap:10px;width:min(1040px,100%)}
/* the picture: 640 x 480 units from y -60 (1u = 100cqw / 640), as large as the screen allows; its edges fade into the page */
.sp-stage{position:relative;width:min(100%,calc((100dvh - 230px) * 4 / 3));aspect-ratio:4/3;container-type:inline-size;overflow:hidden;transform-origin:50% 68.3%;
  background:linear-gradient(var(--sp-sky1),var(--sp-sky2) 62%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 14%,#000 80%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 14%,#000 80%,transparent);mask-composite:intersect}
.sp-layer{position:absolute;inset:0;width:100%;height:100%}
.sp-name{font:600 clamp(1.45rem,1.1rem + 1.6vw,2.15rem)/1.1 var(--serif);letter-spacing:.01em;color:var(--ink);margin-top:2px}
.sp-line{display:flex;gap:12px;font:600 .6875rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sp-pct{min-width:4ch;text-align:right;font-feature-settings:"tnum";color:var(--ink-2)}
.sp-bar{display:block;width:min(220px,60vw);height:2px;background:var(--line);overflow:hidden}
.sp-bar i{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);transition:transform .3s linear}
.sp-skip{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%)}

/* the layers that keep moving: composited transform and opacity only */
.sp-stars{fill:#f4ecd8;opacity:0}
:root[data-theme="dark"] .sp-stars{animation:sp-twinkle 3.2s ease-in-out infinite alternate}
:root[data-theme="dark"] .sp-stars-b{animation-delay:-1.6s}
.sp-rays{overflow:visible;fill:var(--sp-ray);opacity:.2;transform-origin:50% 39.17%;-webkit-mask-image:radial-gradient(circle calc(230 * 100cqw / 640) at 50% 39.17%,#000 15%,transparent 100%);mask-image:radial-gradient(circle calc(230 * 100cqw / 640) at 50% 39.17%,#000 15%,transparent 100%);will-change:transform;animation:sp-fade 1.6s 1s both,sp-spin 120s linear infinite}
.sp-halo{position:absolute;left:26.56%;top:7.92%;width:46.88%;aspect-ratio:1;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sp-halo) 75%,transparent) 0%,color-mix(in srgb,var(--sp-halo) 22%,transparent) 45%,transparent 100%);
  animation:sp-fade 1.2s .9s both,sp-breathe 3.6s ease-in-out 2.1s infinite alternate}
.sp-dash{--u:calc(100cqw / 640);position:absolute;left:calc(318.8 * var(--u));top:calc(364 * var(--u));width:calc(2.4 * var(--u));height:calc(116 * var(--u));overflow:hidden;animation:sp-fade .4s .6s both}
.sp-dash i{display:block;height:calc(100% + 22 * var(--u));background:repeating-linear-gradient(to bottom,var(--sp-dash) 0 calc(9 * var(--u)),transparent calc(9 * var(--u)) calc(22 * var(--u)));
  will-change:transform;animation:sp-flow .7s linear infinite}

/* the drawing: it builds once, layer by layer, then holds still (origins in % of the 640 x 480 stage) */
#spGlow stop{stop-color:var(--sp-lamp)}
#spGround .a{stop-color:var(--sp-g1)}#spGround .b{stop-color:var(--sp-g2)}#spRoad .a{stop-color:var(--sp-r1)}#spRoad .b{stop-color:var(--sp-r2)}
.sp-h3{fill:var(--sp-h3)}.sp-h2{fill:var(--sp-h2)}.sp-h1{fill:var(--sp-h1)}.sp-trees{fill:var(--sp-tree)}
.sp-hills{animation:sp-rise 1s var(--ease) both}
.sp-ground{animation:sp-fade .7s .1s both}
.sp-road{stroke:var(--sp-edge);stroke-width:1}
.sp-lamps{animation:sp-fade .5s 1.1s both}
.sp-lamp{fill:var(--sp-lampbody)}
.sp-glass{fill:var(--sp-glass);transition:fill .4s}
.sp-glow{fill:url(#spGlow);opacity:0;transition:opacity .5s}
.sp-lamp.on .sp-glass{fill:var(--sp-lamp)}
.sp-lamp.on .sp-glow{opacity:1}
.sp-pillars{transform-origin:50% 75.83%;animation:sp-grow .75s .35s cubic-bezier(.2,.9,.25,1) both}
.sp-stone{fill:var(--sp-stone);stroke:var(--sp-stone-edge);stroke-width:.8}
.sp-course{fill:none;stroke:var(--sp-course);stroke-width:.9}
.sp-beam{animation:sp-drop .55s .8s var(--ease) both}
.sp-beam rect{fill:var(--sp-beam)}.sp-beam .sp-strap{fill:var(--sp-strap)}
.sp-leaf{fill:none;stroke:var(--sp-iron);stroke-width:1.6;stroke-linecap:round;animation:sp-fade .5s 1.05s both;transition:transform .7s cubic-bezier(.6,0,.2,1)}
.sp-frame{stroke-width:2.2}
.sp-leaf-l{transform-origin:43.28% 68.33%}.sp-leaf-r{transform-origin:56.72% 68.33%}
.sp-seal{transform-origin:50% 39.17%;animation:sp-pop .8s .95s cubic-bezier(.34,1.56,.64,1) both}
.sp-post{fill:var(--sp-strap)}.sp-ring{fill:var(--sp-bg1);stroke:var(--sp-ring);stroke-width:3;transition:stroke .5s}
.splash.done .sp-ring{stroke:var(--sp-lamp)}
.sp-name{animation:sp-up .7s 1.05s var(--ease) both}.sp-line{animation:sp-up .7s 1.15s var(--ease) both}.sp-bar{animation:sp-up .7s 1.2s var(--ease) both}
.sp-skip{animation:sp-fade .6s 2.5s both}
@keyframes sp-rise{from{transform:translateY(46px);opacity:0}}
@keyframes sp-grow{from{transform:scaleY(0)}}
@keyframes sp-drop{from{transform:translateY(-34px);opacity:0}}
@keyframes sp-pop{from{transform:scale(.3);opacity:0}}
@keyframes sp-fade{from{opacity:0}}
@keyframes sp-up{from{transform:translateY(12px);opacity:0}}
@keyframes sp-flow{from{transform:translateY(calc(-22 * var(--u)))}}
@keyframes sp-spin{to{transform:rotate(360deg)}}
@keyframes sp-breathe{from{transform:scale(.92);opacity:.78}to{transform:scale(1.06);opacity:1}}
@keyframes sp-twinkle{from{opacity:.2}to{opacity:.9}}
/* ready: the gate swings open and the view drives through it while the splash clears */
.splash.out{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .75s .55s,visibility 0s 1.3s}
.splash.out .sp-leaf{transform:scaleX(.06)}
.splash.out .sp-stage{transform:scale(5.5);transition:transform 1.3s cubic-bezier(.65,0,.35,1) .2s}
.splash.out .sp-name,.splash.out .sp-line,.splash.out .sp-bar,.splash.out .sp-skip{animation:none;opacity:0;transition:opacity .3s}
/* reduced motion: no splash at all (it is an animation, and the light tier has nothing heavy to wait for); the Gate and its
   still show from the first paint, as before the splash */
@media (prefers-reduced-motion:reduce){.js .splash{display:none}}