/* ==========================================================================
   For Schools
   Loads on top of app.css for the reset, the face and the navbar. No new type
   is introduced: every size, weight and tracking here is the system already
   used across the site (Inter, 400 headings, -.04em).
   One field spans the whole page and its three stops are written by the driver
   every frame, so navy → green → crimson → navy/amber happens continuously and
   never at a section boundary. No cubes on this page by design.
   ========================================================================== */

:root{
  --f1:#12203a; --f2:#0a1424; --f3:#050a14;   /* the live field blend */
  --accent:#6f95e2;
  --pad: clamp(22px, 5.4vw, 104px);
}

.sbody{background:#050a14;color:#fff;overflow-x:hidden}

/* the whole page sits on this one surface */
.s-field{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(96% 78% at 12% -8%, var(--f1) 0%, transparent 62%),
    radial-gradient(92% 82% at 88% 104%, var(--f2) 0%, transparent 66%),
    linear-gradient(158deg, var(--f2) 0%, var(--f3) 74%);
}

/* ── Type ─────────────────────────────────────────────────────────────────
   Identical scale to the rest of the site. */

.s-eyebrow{
  margin:0 0 clamp(14px,1.5vw,22px);
  font-size:clamp(11px,.82vw,13px);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);
}
.s-h{
  margin:0;font-weight:400;
  font-size:clamp(2.05rem,4.2vw,4.2rem);line-height:1.05;letter-spacing:-.04em;
  color:#fff;text-wrap:balance;
}
.s-sub{
  margin:clamp(18px,2vw,30px) 0 0;
  font-size:clamp(.98rem,1.15vw,1.24rem);line-height:1.55;
  color:rgba(255,255,255,.72);
}

/* the scale figures. A dash is what shows until a verified number is supplied */
.s-stats{list-style:none;margin:clamp(30px,3.4vw,54px) 0 0;padding:0;display:grid;gap:clamp(14px,1.5vw,22px)}
.s-stats li{display:flex;align-items:baseline;gap:clamp(10px,1vw,16px)}
.s-stat{
  font-size:clamp(1.5rem,2.5vw,2.5rem);font-weight:400;
  letter-spacing:-.035em;color:#fff;
  font-variant-numeric:tabular-nums;
  min-width:3.4ch;
}
.s-lab{font-size:clamp(.9rem,1.02vw,1.08rem);color:rgba(255,255,255,.6)}

/* ── 01–04 · the geographic stage ─────────────────────────────────────────── */

.sg{position:relative;height:calc(100svh + 620svh)}
.sg__pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
#sgCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.sg__copy{position:absolute;inset:0;z-index:2;pointer-events:none}
.sg__ch{
  position:absolute;top:50%;left:var(--pad);
  width:min(40%,540px);
  opacity:var(--o,0);
  translate:0 calc(-50% + (1 - var(--o,0)) * 20px);
}
/* the two globe lines sit centre-left with more air around them */
.sg__ch[style*="--n:2"],.sg__ch[style*="--n:3"]{width:min(44%,600px)}

/* ── 05–08 · the privacy stage ────────────────────────────────────────────── */

.sl{position:relative;height:calc(100svh + 640svh)}
.sl__pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.sl__svg{position:absolute;inset:0;width:100%;height:100%;display:block}

.sl__copy{
  position:absolute;top:50%;left:var(--pad);z-index:2;
  width:min(42%,600px);translate:0 -50%;pointer-events:none;
}
#slSub{opacity:var(--subO,1)}

/* ── 09 · the close ───────────────────────────────────────────────────────── */

.sc{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding:clamp(90px,11vw,150px) var(--pad);
}
.sc__in{position:relative;z-index:2;width:min(100%,680px)}
.s-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:clamp(30px,3.2vw,50px);
  height:clamp(50px,3.6vw,60px);padding-inline:clamp(28px,2.4vw,42px);
  border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.04);
  color:#fff;font-size:clamp(.9rem,1vw,1.02rem);font-weight:500;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.s-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}

/* ── Entrance ─────────────────────────────────────────────────────────────
   Hidden only while the driver is alive; if it never arrives the class comes
   off and the opening chapter shows unaided. */
html:not(.js-s) .sg__ch[style*="--n:0"]{opacity:1}

/* ── Narrow ───────────────────────────────────────────────────────────────
   Same story and order, shorter tracks, copy above the artwork rather than
   beside it, and the canvas does its own simplification (fewer points, no
   graticule) from the same breakpoint. */

@media (max-width:860px){
  .sg{height:calc(100svh + 460svh)}
  .sl{height:calc(100svh + 480svh)}
  .sg__ch,.sg__ch[style*="--n:2"],.sg__ch[style*="--n:3"]{
    left:var(--pad);right:var(--pad);width:auto;top:26%;
  }
  .sl__copy{left:var(--pad);right:var(--pad);width:auto;top:24%;translate:0 -50%}
  .s-h{font-size:clamp(1.8rem,7.4vw,2.6rem)}
  .s-stat{font-size:clamp(1.3rem,6vw,1.8rem)}
}

@media (prefers-reduced-motion:reduce){
  html:not(.js-s) .sg__ch[style*="--n:0"]{opacity:1}
}

/* ── The padlock ──────────────────────────────────────────────────────────
   One object for the whole privacy sequence. --red carries it from green
   (open, connecting) to crimson (closed, protected) on the same scroll that
   moves the field, so the lock and the page never disagree. */

.sl__svg{
  --gl: color-mix(in srgb, #ff5566 calc(var(--red,0) * 100%), #55e2a4);
}
.lk__body,.lk__shackle{
  fill:none;stroke:var(--gl);stroke-width:2.6;stroke-linecap:round;
  opacity:calc(var(--lockIn,0) * .96);
  filter:drop-shadow(0 0 10px var(--gl)) drop-shadow(0 0 34px var(--gl));
}
.lk__hole{fill:var(--gl);stroke:none;opacity:calc(var(--lockIn,0) * .5)}

.lk__line{
  stroke:var(--gl);stroke-width:1.2;fill:none;stroke-linecap:round;
  filter:drop-shadow(0 0 4px var(--gl));
}
.lk__pk{fill:#fff;filter:drop-shadow(0 0 7px var(--gl))}

.sysb__box{
  fill:rgba(255,255,255,.035);
  stroke:color-mix(in srgb, var(--gl) 50%, transparent);stroke-width:1;
}
.sysb__t{
  fill:rgba(255,255,255,.82);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-size:12px;font-weight:500;letter-spacing:.06em;
}
.sysb{transition:none}