/* =====================================================================
   RSIG LEO, THE GUIDE (/assets/surgeon.css?v=<ASSET_V>): the home section after the film, and its preview page /console/.
   Built by work.nosync/hero (apply_hero.py); edit work.nosync/hero/src/surgeon.css and re-run, never this copy.
   The plate is one picture (LEO, a small round robot in a scrub cap, under the golden arc of sketches); LEO's face-screen is a DOM layer
   clipped to the screen measured on the plate (eyes that blink, look and squint; a link's icon; the console view with ENGAGE); the four
   quick links sit around LEO (under it on phones). The ENGAGE button sits exactly over the printed one.
   The frame: the plate (1440 frame units wide) plus a strip of its own sky on top (--sg-e), covering the stage and resting on its bottom
   edge, so a wide screen loses only sky and the button never leaves the screen. Every position inside it is in frame units (--u).
   Scoped to .sg. PHONES (to 820 px) have their own block and never change the laptop layout. Motion: transform and opacity only.
   html.still (the Motion control off) and no script: the finished poster, the links, a working button.
   ===================================================================== */

/* GEO START (generated from measure.json and clip.json by build_hero.py: do not edit by hand)
   plate leo-final-blank-4k 4096x2294, 1 frame unit = 2.8444 plate px; clip none */
.sg {--sg-ph:806.48;--sg-sky:linear-gradient(90deg,rgb(24,12,22),rgb(38,22,31),rgb(64,40,45),rgb(98,67,65),rgb(110,79,75),rgb(99,68,66),rgb(63,39,44),rgb(39,22,30),rgb(24,14,22));--sg-sky-c:rgb(63,39,44);--sg-b-x:726.29;--sg-b-y:753.5;--sg-b-r:20.39;--sg-b-rd:16.21;--sg-b-img:radial-gradient(circle at 50% 50%,transparent 0 79%,#3a2a20 80% 83%,#d8c3a0 84%,#8a6b4c 92%,#2a1c15 100%),radial-gradient(circle at 46% 36%,#ff8a6b 0,#e0402c 34%,#a5241a 70%,#5e110b 100%);--sg-cloth:rgb(77,46,49);--sg-cloth-in:rgb(48,29,30);--sg-disc:rgb(200,40,30);--sg-apex:169.95;--sg-arc-x:716.06;--sg-face-happy:url(/assets/console/leo-face-happy.webp);--sg-face-curious:url(/assets/console/leo-face-curious.webp);--sg-face-surprised:url(/assets/console/leo-face-surprised.webp);--sg-face-wink:url(/assets/console/leo-face-wink.webp);--sg-face-love:url(/assets/console/leo-face-love.webp);--sg-face-thinking:url(/assets/console/leo-face-thinking.webp);--sg-face-excited:url(/assets/console/leo-face-excited.webp);--sg-face-sleepy:url(/assets/console/leo-face-sleepy.webp);--sg-lamp-x:720.0;--sg-lamp-y:269.47;--sg-lamp-r:37.16;--sg-scr-x:558.28;--sg-scr-y:354.38;--sg-scr-w:309.38;--sg-scr-h:216.56;--sg-scr-r:108.28;--sg-glass-dark:rgb(45,25,27);--sg-glass-mid:rgb(49,34,41);--sg-ew:20.45%;--sg-eh:29.22%;--sg-elx:17.90%;--sg-ely:26.62%;--sg-erx:65.67%;--sg-ery:26.62%;--sg-lid:75.6%;--sg-mx:45.91%;--sg-my:57.79%;--sg-mw:12.73%;--sg-mh:7.14%;--sg-scr-img:url(/assets/console/leo-final-blank-4k-screen.webp);--sg-leo-x:490.22;--sg-leo-y:191.95;--sg-leo-w:445.5;--sg-leo-h:422.3;--sg-phx:26.3672%;--sg-phw:47.2656%}
/* GEO END */

.sg {
  --sg-gold:#E2B46A;                        /* the reference's gold: the headline glow's middle layer and the reticle over the stage */
  --sg-e:30;                                /* the sky strip above the plate, frame units */
  --sg-fh:calc(var(--sg-ph) + var(--sg-e));
  --sg-hdr:96px;                            /* the condensed header; fx/surgeon.js writes the real one */
  position:relative;z-index:0;background:var(--sg-sky-c,#211713);color:var(--text-primary);isolation:isolate}
.sg__stage {position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;
  --u:max(100vw / 1440, 100svh / var(--sg-fh))}
@supports (width:1cqw) {
  .sg__stage {container-type:size}
  .sg__stage > * {--u:max(100cqw / 1440, 100cqh / var(--sg-fh))}
}
.sg__frame {position:absolute;left:50%;bottom:0;width:calc(1440 * var(--u));height:calc(var(--sg-fh) * var(--u));
  margin-left:calc(-720 * var(--u));transform-origin:50% 62%}
.sg__sky {position:absolute;left:0;right:0;top:0;height:calc((var(--sg-e) + 40) * var(--u));background:var(--sg-sky)}
.sg__plate {position:absolute;left:0;right:0;bottom:0;height:calc(var(--sg-ph) * var(--u))}
.sg__pic,.sg__pic img {position:absolute;inset:0;width:100%;height:100%;max-width:none}
.sg__pic img {object-fit:fill;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 calc(28 * var(--u)));mask-image:linear-gradient(to bottom,transparent,#000 calc(28 * var(--u)))}

/* the head-turn clip (when a clip of this plate exists): the crop's own rectangle, blended in by an elliptical mask */
.sg__clip {position:absolute;left:calc(var(--sg-cl-x) * var(--u));top:calc(var(--sg-cl-y) * var(--u));
  width:calc(var(--sg-cl-w) * var(--u));height:calc(var(--sg-cl-h) * var(--u));max-width:none;object-fit:fill;pointer-events:none;
  -webkit-mask-image:var(--sg-cl-mask);mask-image:var(--sg-cl-mask);opacity:0;transition:opacity .6s var(--ease-out)}
.sg.is-clip .sg__clip {opacity:1}

/* ---------- LEO's FACE-SCREEN: it covers the printed eyes with the screen's own glass colours and draws LEO's eyes (they blink, look
   toward what you point at, squint happily), a link's icon, and with ENGAGE the console view (two eyepieces, crosshairs, 3D) ---------- */
.sg__screen {visibility:hidden;position:absolute;left:calc(var(--sg-scr-x) * var(--u));top:calc(var(--sg-scr-y) * var(--u));width:calc(var(--sg-scr-w) * var(--u));
  height:calc(var(--sg-scr-h) * var(--u));border-radius:calc(var(--sg-scr-r) * var(--u));overflow:hidden;pointer-events:none;
  background:var(--sg-scr-img,none) center/100% 100% no-repeat,radial-gradient(120% 110% at 50% 40%,var(--sg-glass-mid) 0%,var(--sg-glass-dark) 62%);
  --lx:0;--ly:0}
/* the blank screen (the plate's own glass, cut from the blank plate) is laid over the poster's drawn face only while the eyes are live */
.sg.is-alive .sg__screen,.sg.is-live .sg__screen {visibility:visible}
.sg__glass {position:absolute;inset:0;z-index:3;background:linear-gradient(160deg,rgba(255,240,220,.06) 0%,transparent 30%)}
.sg__face {position:absolute;inset:0;transition:transform .42s var(--ease-out),opacity .3s var(--ease-out);
  transform:translate(calc(var(--lx) * 9%),calc(var(--ly) * 8%))}
/* LEO's faces: the owner's OLED glyph sprites (gen/leo/faces, keyed to alpha by tools/glyphs.py, each the size of the screen); CSS only
   moves them: the look is a translate, a blink a scaleY, an expression a cross-fade. The happy face loads with the page, the others
   once he has woken (.sg.is-faces). */
.sg__f {position:absolute;inset:0;background:center/100% 100% no-repeat;opacity:0;transition:opacity .22s var(--ease-out)}
.sg__f--happy {background-image:var(--sg-face-happy)}
.sg.is-faces .sg__f--curious {background-image:var(--sg-face-curious)}
.sg.is-faces .sg__f--surprised {background-image:var(--sg-face-surprised)}
.sg.is-faces .sg__f--wink {background-image:var(--sg-face-wink)}
.sg.is-faces .sg__f--love {background-image:var(--sg-face-love)}
.sg.is-faces .sg__f--thinking {background-image:var(--sg-face-thinking)}
.sg.is-faces .sg__f--excited {background-image:var(--sg-face-excited)}
.sg.is-faces .sg__f--sleepy {background-image:var(--sg-face-sleepy)}
.sg__face[data-face="happy"] .sg__f--happy,.sg__face[data-face="curious"] .sg__f--curious,.sg__face[data-face="surprised"] .sg__f--surprised,
.sg__face[data-face="wink"] .sg__f--wink,.sg__face[data-face="love"] .sg__f--love,.sg__face[data-face="thinking"] .sg__f--thinking,
.sg__face[data-face="excited"] .sg__f--excited,.sg__face[data-face="sleepy"] .sg__f--sleepy {opacity:1}
.sg__screen.is-blink .sg__face {transform:translate(calc(var(--lx) * 9%),calc(var(--ly) * 8%)) scaleY(.08);transition:transform .07s ease-in}
.sg__screen.is-happy .sg__face {transform:translate(calc(var(--lx) * 9%),calc(var(--ly) * 8%)) scale(1.04,.9)}
/* the head lamp: a soft gold glow over its lens, breathing; brighter in console mode */
.sg__lamp {position:absolute;left:calc((var(--sg-lamp-x) - var(--sg-lamp-r) * 1.4) * var(--u));top:calc((var(--sg-lamp-y) - var(--sg-lamp-r) * 1.4) * var(--u));
  width:calc(var(--sg-lamp-r) * 2.8 * var(--u));height:calc(var(--sg-lamp-r) * 2.8 * var(--u));border-radius:50%;pointer-events:none;opacity:.55;
  background:radial-gradient(closest-side,rgba(255,244,214,.95),rgba(255,206,120,.55) 30%,rgba(255,170,70,.18) 62%,transparent);transition:opacity .5s var(--ease-out)}
html:not(.still) .sg.is-vis .sg__lamp {animation:sgLamp 3.2s var(--ease-inout) infinite}
@keyframes sgLamp {0%,100% {opacity:.45;transform:scale(.92)} 50% {opacity:.85;transform:scale(1.06)}}
.sg.is-live .sg__lamp {opacity:1;transform:scale(1.35)}
html:not(.still) .sg.is-live.is-vis .sg__lamp {animation:sgLampOn 1.6s var(--ease-inout) infinite}
@keyframes sgLampOn {0%,100% {opacity:.9;transform:scale(1.25)} 50% {opacity:1;transform:scale(1.45)}}
.sg__ico {position:absolute;left:50%;top:50%;width:46%;height:auto;max-height:84%;transform:translate(-50%,-50%) scale(.82);opacity:0;overflow:visible;
  transition:opacity .28s var(--ease-out),transform .45s var(--ease-out)}
.sg__ico g {opacity:0;transition:opacity .2s}
.sg__ico [data-ico] {fill:none;stroke:#F6C25A;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.sg__ico text {fill:#F6C25A;stroke:none;font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.02em}
.sg__screen[data-show] .sg__face {opacity:0;transform:translate(calc(var(--lx) * 18%),calc(var(--ly) * 12%)) scale(.85)}
.sg__screen[data-show] .sg__ico {opacity:1;transform:translate(-50%,-50%) scale(1)}
.sg__screen[data-show="robot"] [data-ico="robot"],.sg__screen[data-show="atlas"] [data-ico="atlas"],
.sg__screen[data-show="events"] [data-ico="events"],.sg__screen[data-show="join"] [data-ico="join"] {opacity:1}
/* console mode (ENGAGE): the stereo viewer, two eyepieces with crosshairs, a slow scan */
.sg__hud {position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease-out)}
.sg__hud i {position:absolute;top:20%;bottom:26%;width:33%;border:calc(1.8 * var(--u)) solid rgba(246,194,90,.92);border-radius:calc(9 * var(--u));
  box-shadow:0 0 calc(8 * var(--u)) rgba(255,170,60,.45),inset 0 0 calc(10 * var(--u)) rgba(255,170,60,.25)}
.sg__hud i:nth-child(1) {left:12%}
.sg__hud i:nth-child(2) {right:12%}
.sg__hud i::before,.sg__hud i::after {content:"";position:absolute;left:50%;top:50%;background:rgba(246,194,90,.95)}
.sg__hud i::before {width:46%;height:calc(1.5 * var(--u));transform:translate(-50%,-50%)}
.sg__hud i::after {width:calc(1.5 * var(--u));height:46%;transform:translate(-50%,-50%)}
.sg__hud b {position:absolute;left:0;right:0;top:0;height:18%;background:linear-gradient(to bottom,transparent,rgba(246,194,90,.22),transparent);transform:translateY(-100%)}
.sg__hud em {position:absolute;left:50%;bottom:7%;transform:translateX(-50%);font-style:normal;font-family:var(--f-display);font-weight:700;
  font-size:max(8px,calc(10 * var(--u)));line-height:1;letter-spacing:.14em;color:#F6C25A;text-shadow:0 0 6px rgba(255,170,60,.8)}
.sg.is-live .sg__face,.sg.is-live .sg__ico {opacity:0}
.sg.is-live .sg__hud {opacity:1}
html:not(.still) .sg.is-live.is-vis .sg__hud b {animation:sgScan 2.4s linear infinite}
@keyframes sgScan {to {transform:translateY(560%)}}
/* LEO himself is a button: a click or a tap shows the next link on his screen and marks it (the link then opens on its own press) */
.sg__leo {position:absolute;left:calc(var(--sg-leo-x) * var(--u));top:calc(var(--sg-leo-y) * var(--u));width:calc(var(--sg-leo-w) * var(--u));
  height:calc(var(--sg-leo-h) * var(--u));padding:0;margin:0;border:0;background:none;border-radius:42%;cursor:pointer;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
.sg__leo:focus-visible {outline:2px solid var(--accent);outline-offset:4px;box-shadow:0 0 0 3px var(--canvas),0 0 0 5px var(--text-primary)}

/* the light coming on (the entrance): the room under a dark veil that lifts, and a bloom from the arc */
.sg__veil {position:absolute;inset:0;background:#120c09;opacity:0;pointer-events:none}
.sg__bloom {position:absolute;left:calc(var(--sg-arc-x) * var(--u) - 520 * var(--u));top:calc(var(--sg-apex) * var(--u));
  width:calc(1040 * var(--u));height:calc(520 * var(--u));pointer-events:none;opacity:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,196,120,.32),rgba(180,71,46,.14) 45%,transparent 72%)}

/* ---------- the ENGAGE button: exactly over the printed one. Its face is the plate's own button (the same pixels), set in a socket of
   the scrubs' cloth, so a press sinks it; ON, a lit disc says LIVE over the printed word. 44 px of target at least. ---------- */
.sg__eng {position:absolute;left:calc((var(--sg-b-x) - var(--sg-b-r)) * var(--u));top:calc((var(--sg-b-y) - var(--sg-b-r)) * var(--u));
  width:calc(var(--sg-b-r) * 2 * var(--u));height:calc(var(--sg-b-r) * 2 * var(--u));padding:0;margin:0;border:0;border-radius:50%;
  background:radial-gradient(closest-side,var(--sg-cloth-in) 70%,var(--sg-cloth) 96%,transparent);cursor:pointer;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;font:inherit;color:inherit}
.sg__eng::before {content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%);border-radius:50%}
.sg__eng-face {position:absolute;inset:0;border-radius:50%;background:var(--sg-b-img) center/100% 100% no-repeat;transition:transform .32s var(--ease-stamp)}
.sg__eng-halo {position:absolute;left:50%;top:50%;width:260%;height:260%;margin:-130% 0 0 -130%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,96,64,.42),rgba(180,71,46,.16) 48%,transparent 74%)}
.sg__eng-ring {position:absolute;inset:calc(-5 * var(--u));border-radius:50%;pointer-events:none;border:1px solid rgba(226,180,106,.7);opacity:0}
.sg__eng-live,.sg__eng-off {position:absolute;left:50%;top:50%;width:calc(var(--sg-b-rd) * 1.86 * var(--u));height:calc(var(--sg-b-rd) * 1.86 * var(--u));
  transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;
  background:radial-gradient(circle at 50% 38%,#ff6a4d,var(--sg-disc) 52%,#7d1a10 100%);
  box-shadow:inset 0 0 calc(6 * var(--u)) rgba(255,190,160,.45),0 0 calc(18 * var(--u)) rgba(255,70,40,.75);
  font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(var(--sg-b-rd) * .5 * var(--u)));line-height:1;letter-spacing:.06em;text-transform:uppercase;
  color:#FFF4EA;text-shadow:0 0 calc(6 * var(--u)) rgba(255,190,160,.9)}
.sg__eng-off {box-shadow:none}                /* the printed word says ENGAGE; this copy shows on the Arabic page, and on a drawn button */
.sg[data-btn="drawn"] .sg__eng-off {opacity:1;background:none;font-size:max(7px,calc(var(--sg-b-rd) * .36 * var(--u)));letter-spacing:.04em}
.sg[data-btn="drawn"] .sg__eng-face {box-shadow:0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(10,5,3,.6),0 0 calc(12 * var(--u)) rgba(255,70,40,.45)}
.sg[data-btn="drawn"].is-live .sg__eng-off {opacity:0}
.sg__eng:active .sg__eng-face {transform:scale(.88)}
.sg.is-live .sg__eng-live {opacity:1}
.sg.is-live .sg__eng-halo {opacity:1}
.sg__eng:focus-visible {outline:2px solid var(--accent);outline-offset:4px;box-shadow:0 0 0 3px var(--canvas),0 0 0 5px var(--text-primary)}
html:not(.still) .sg.is-vis:not(.is-live) .sg__eng-halo {animation:sgBreathe 2.6s var(--ease-inout) infinite}
html:not(.still) .sg.is-vis:not(.is-live) .sg__eng-ring {animation:sgRing 2.6s var(--ease-out) infinite}
@keyframes sgBreathe {0%,100% {opacity:.15;transform:scale(.86)} 50% {opacity:.75;transform:scale(1)}}
@keyframes sgRing {0% {opacity:0;transform:scale(.92)} 30% {opacity:.9} 100% {opacity:0;transform:scale(1.55)}}

/* ---------- the words: the headline glows in the sky above the arc, the line under it (kit: display 700, .9 leading, the kit pass's
   .045em tracking); when a wide screen leaves no sky, they sit as high as the header allows over a soft umber wash ---------- */
.sg__zone {position:absolute;left:var(--gutter,24px);right:var(--gutter,24px);top:calc(var(--sg-hdr) + 10px);
  bottom:calc((var(--sg-ph) - var(--sg-apex) + 12) * var(--u));display:flex;flex-direction:column;align-items:center;pointer-events:none}
.sg__copy {margin-top:auto;position:relative;text-align:center;max-width:min(100%,calc(1100 * var(--u)))}
.sg__copy::before {content:"";position:absolute;left:-12%;right:-12%;top:-30%;bottom:-38%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 52%,rgba(20,13,10,.62),rgba(20,13,10,.34) 55%,transparent 78%)}
.sg__h {margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(46px,calc(92 * var(--u)),168px);line-height:.9;letter-spacing:.045em;
  text-transform:uppercase;color:#F3E6CC;padding-left:.045em;
  text-shadow:0 0 calc(14 * var(--u)) rgba(243,230,204,.55),0 0 calc(34 * var(--u)) rgba(226,180,106,.55),0 0 calc(70 * var(--u)) rgba(180,71,46,.6)}
.sg__s {margin:calc(12 * var(--u)) auto 0;font-family:var(--f-body);font-weight:300;font-size:clamp(15px,calc(19 * var(--u)),30px);line-height:1.4;
  letter-spacing:.01em;color:#D9C6A6;text-shadow:0 1px 2px rgba(20,13,10,.9),0 0 18px rgba(20,13,10,.7);max-width:60em}
.sg__cap {position:absolute;bottom:clamp(14px,calc(22 * var(--u)),34px);margin:0;font-family:var(--f-mono);font-weight:500;
  font-size:clamp(10.5px,calc(11.5 * var(--u)),15px);line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);
  text-shadow:0 1px 2px rgba(20,13,10,.95),0 0 12px rgba(20,13,10,.8);pointer-events:none}
.sg__cap--l {inset-inline-start:var(--gutter,24px)}
.sg__cap--r {inset-inline-end:var(--gutter,24px)}
.sg__cap bdi {unicode-bidi:isolate}

/* ---------- LEO's QUICK LINKS: two each side of LEO on a laptop (on dark glass over the arc), a 2 x 2 grid of big targets under him on a
   phone. Hover or focus turns LEO toward the link and puts its icon on his screen. No chips, no icons in the links: number, title, line. ---------- */
.sg__go {position:absolute;inset:0;pointer-events:none;--u:max(100vw / 1440, 100svh / var(--sg-fh))}
.sg__a {position:absolute;width:clamp(230px,calc(300 * var(--u)),420px);padding:clamp(14px,calc(18 * var(--u)),26px) clamp(16px,calc(20 * var(--u)),28px);
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;pointer-events:auto;text-decoration:none;color:var(--text-primary);
  background:rgba(26,18,14,.72);border:1px solid rgba(242,233,216,.14);border-top-color:rgba(242,233,216,.24);border-radius:4px;
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);box-shadow:0 18px 50px rgba(10,6,4,.4);
  transition:transform .4s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.sg__a::after {content:"";position:absolute;left:clamp(16px,calc(20 * var(--u)),28px);right:clamp(16px,calc(20 * var(--u)),28px);bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:var(--sg-o,0 50%);transition:transform .45s var(--ease-out)}
.sg__a--l {left:max(var(--gutter,24px),calc(50% - 560 * var(--u)));--sg-o:0 50%}
.sg__a--r {right:max(var(--gutter,24px),calc(50% - 560 * var(--u)));--sg-o:100% 50%}
.sg__a--1,.sg__a--3 {top:calc(100% - 430 * var(--u))}
.sg__a--2,.sg__a--4 {top:calc(100% - 270 * var(--u))}
.sg__n {grid-row:span 2;font-family:var(--f-display);font-weight:400;font-size:clamp(13px,calc(15 * var(--u)),20px);letter-spacing:.08em;color:var(--accent);
  font-variant-numeric:tabular-nums}
.sg__t {font-family:var(--f-display);font-weight:700;font-size:clamp(26px,calc(34 * var(--u)),48px);line-height:.95;letter-spacing:.045em;text-transform:uppercase}
.sg__d {margin-top:6px;font-family:var(--f-body);font-weight:300;font-size:clamp(14px,calc(15 * var(--u)),19px);line-height:1.35;color:var(--text-secondary)}
.sg__a:hover,.sg__a:focus-visible,.sg__a.is-on {background-color:rgba(38,26,20,.84);border-color:rgba(226,180,106,.45)}
.sg__a:hover::after,.sg__a:focus-visible::after,.sg__a.is-on::after {transform:scaleX(1)}
.sg__a--l:hover,.sg__a--l:focus-visible,.sg__a--l.is-on {transform:translateX(6px)}
.sg__a--r:hover,.sg__a--r:focus-visible,.sg__a--r.is-on {transform:translateX(-6px)}

/* the entrance waits unseen only while script runs it (fx/surgeon.js adds .sg--wait and removes it as each part arrives) */
.sg--wait .sg__h,.sg--wait .sg__s,.sg--wait .sg__cap,.sg--wait .sg__eng,.sg--wait .sg__a {opacity:0}
.sg--wait .sg__veil {opacity:.86}

/* the cursor over the stage: the site's reticle opens into the console's crosshair (html.sg-aim, set by fx/surgeon.js) */
@media (hover:hover) and (pointer:fine) {
  html.sg-aim .ret:not(.is-lock):not(.is-lens):not(.is-snap) .ret__ring {transform:scale(1.3);color:var(--sg-gold,#E2B46A)}
  html.sg-aim .ret:not(.is-lock):not(.is-lens):not(.is-snap) {color:rgba(226,180,106,.9)}
}

/* ---------- PHONES AND TABLETS (to 820 px): sky on top for the words, LEO filling the screen, the four links under him ---------- */
@media (max-width:820px) {
  .sg {--sg-e:96;--sg-hdr:64px}
  .sg__stage {min-height:520px}
  .sg__zone {top:calc(var(--sg-hdr) + 8px);left:18px;right:18px}
  .sg__h {font-size:clamp(40px,13vw,64px);letter-spacing:.05em}
  .sg__s {margin-top:10px;font-size:14px;line-height:1.45;max-width:24em}
  .sg__cap {font-size:10px;letter-spacing:.14em;max-width:44%}
  .sg__cap--l {inset-inline-start:16px}
  .sg__cap--r {display:none}
  .sg__go {position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 12px max(18px,env(safe-area-inset-bottom));
    pointer-events:auto;background:var(--sg-sky-c,#211713)}
  .sg__a {position:relative;left:auto;right:auto;top:auto;width:auto;min-height:76px;padding:14px;grid-template-columns:1fr;row-gap:4px;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:rgba(242,233,216,.05)}
  .sg__n {grid-row:auto;font-size:12px}
  .sg__t {font-size:22px}
  .sg__d {margin-top:2px;font-size:13px}
  .sg__a--l:hover,.sg__a--l.is-on,.sg__a--r:hover,.sg__a--r.is-on,.sg__a--l:focus-visible,.sg__a--r:focus-visible {transform:none}
}
/* phones: the picture is the plate's middle cut (the only part a phone can show), laid at its own place on the plate */
@media (max-width:820px) { .sg__pic img {left:var(--sg-phx);width:var(--sg-phw);right:auto} }
/* a phone held sideways: little height, so the words shrink and the line goes */
@media (max-height:500px) and (orientation:landscape) {
  .sg__h {font-size:clamp(34px,calc(70 * var(--u)),60px)}
  .sg__s {display:none}
}

/* ---------- ARABIC (/ar/): the system Arabic face carries the words (ar.css), no tracking; the links mirror (logical sides) ---------- */
html[lang="ar"] .sg__h {line-height:1.2;letter-spacing:0;padding-left:0}
html[lang="ar"] .sg__s {font-weight:400;line-height:1.7}
html[lang="ar"] .sg__cap {letter-spacing:0;font-size:max(12px,calc(12 * var(--u)))}
html[lang="ar"] .sg__t {letter-spacing:0;line-height:1.25}
html[lang="ar"] .sg__a--l {left:auto;right:max(var(--gutter,24px),calc(50% - 560 * var(--u)))}
html[lang="ar"] .sg__a--r {right:auto;left:max(var(--gutter,24px),calc(50% - 560 * var(--u)))}
html[lang="ar"] .sg__eng-off {opacity:1;font-size:max(8px,calc(var(--sg-b-rd) * .42 * var(--u)))}
html[lang="ar"] .sg.is-live .sg__eng-off {opacity:0}
@media (max-width:820px) { html[lang="ar"] .sg__a--l,html[lang="ar"] .sg__a--r {left:auto;right:auto} }

/* ---------- forced colours: the plate, the words and the links, nothing decorative ---------- */
@media (forced-colors:active) {
  .sg__screen,.sg__bloom,.sg__veil,.sg__eng-halo,.sg__eng-ring {display:none}
  .sg__h,.sg__s {text-shadow:none}
  .sg__eng,.sg__a {border:2px solid ButtonText}
}