/* DEEP FIELD — cinematic. Light-weight grotesk set very large, long quiet
   spaces, soft panels, one blue accent. Motion is slow, deep, continuous.
   Four colour variants share everything else; pick one with
   <html data-variant="…"> (Ice is the default and needs no attribute). */
:root{
  --display:"Geist", ui-sans-serif, system-ui, sans-serif; --display-weight:300; --display-case:none;
  --display-track:-0.045em; --display-stretch:100%; --display-italic:normal; --canvas-stretch:normal;
  --sans:"Geist", ui-sans-serif, system-ui, sans-serif; --mono:"Geist Mono", ui-monospace, monospace;
  --body-track:-0.01em;
  --h1:clamp(3.6rem, 9.4vw, 9.8rem); --h1-lh:.92; --h1-long:clamp(min(1.7rem, 6.4vw), 6vw, 5.6rem); --h1-long-lh:.98;
  --h2:clamp(2.4rem, 5.2vw, 4.8rem); --h2-lh:1; --cta-size:clamp(2.8rem, 6.6vw, 6.6rem);
  --em-style:normal; --em-color:var(--fg-3);
  --btn-font:500 14.5px/1 var(--sans); --btn-track:-0.01em; --btn-case:none; --btn-radius:999px; --radius:16px;
  --sect-rule:1px;
  --hero:earth; --hero-cx:.64; --hero-cy:.43; --hero-cx-m:.5; --hero-cy-m:.3;
  --ease:cubic-bezier(.16,1,.3,1); --page:1280px; --gutter:clamp(16px, 4vw, 48px);
}

/* ICE — near-black, a cold ice-blue star (default) */
:root{
  --bg:#07090c; --bg-alt:#0b0e13; --panel:#0e1218; --panel-line:rgba(231,235,239,.08);
  --fg:#e7ebef; --fg-2:#9aa4ae; --fg-3:#5e6772; --line:rgba(231,235,239,.10); --acc:#8fd3ff;
  --inv-bg:#020304; --inv-panel:#0a0d11; --inv-fg:#e7ebef; --inv-fg-2:#9aa4ae; --inv-fg-3:#5e6772; --inv-line:rgba(231,235,239,.10); --inv-acc:#8fd3ff;
  --shadow-ink:#010203;
}
/* COBALT — true black, saturated cobalt */
:root[data-variant="cobalt"]{
  --bg:#000000; --bg-alt:#05070c; --panel:#0a0e17; --panel-line:rgba(226,234,255,.08);
  --fg:#eef3ff; --fg-2:#9aa6bf; --fg-3:#5a6680; --line:rgba(226,234,255,.10); --acc:#3d7bff;
  --inv-bg:#000000; --inv-panel:#070a12; --inv-fg:#eef3ff; --inv-fg-2:#9aa6bf; --inv-fg-3:#5a6680; --inv-line:rgba(226,234,255,.10); --inv-acc:#4f88ff;
  --shadow-ink:#000000;
}
/* NAVY — blue-black, sky-blue light */
:root[data-variant="navy"]{
  --bg:#040b1a; --bg-alt:#071327; --panel:#0b1a33; --panel-line:rgba(200,220,255,.10);
  --fg:#e8f0ff; --fg-2:#9db0d0; --fg-3:#5d7196; --line:rgba(200,220,255,.12); --acc:#6fb6ff;
  --inv-bg:#020714; --inv-panel:#081428; --inv-fg:#e8f0ff; --inv-fg-2:#9db0d0; --inv-fg-3:#5d7196; --inv-line:rgba(200,220,255,.12); --inv-acc:#6fb6ff;
  --shadow-ink:#01040b;
}
/* DAYLIGHT — white and blue; the dark bands become deep navy */
:root[data-variant="daylight"]{
  --bg:#f7f9fc; --bg-alt:#eef2f8; --panel:#ffffff; --panel-line:rgba(11,18,32,.10);
  --fg:#0b1220; --fg-2:#46526a; --fg-3:#8792a6; --line:rgba(11,18,32,.12); --acc:#1f5eff;
  --inv-bg:#0a1f4f; --inv-panel:#0e2760; --inv-fg:#f2f6ff; --inv-fg-2:#aebee0; --inv-fg-3:#7186b3; --inv-line:rgba(242,246,255,.14); --inv-acc:#8cc4ff;
  --shadow-ink:#0b1220;
}
/* in daylight the hero is white */
:root[data-variant="daylight"] #hero{
  --fg:#0b1220; --fg-2:#46526a; --fg-3:#8792a6; --line:rgba(11,18,32,.12); --acc:#1f5eff; --surface:#f7f9fc; background:#f7f9fc;
}

.sect{ padding-block:clamp(110px, 14vw, 200px); }
.stale{ background:linear-gradient(180deg, color-mix(in srgb, var(--fg) 4%, var(--panel-c)), var(--panel-c)); }
.session{ box-shadow:0 0 0 1px var(--panel-line, var(--line)), 0 40px 120px -40px color-mix(in srgb, var(--acc) 22%, transparent); }
.law .n{ font-weight:200; }
.label{ letter-spacing:.06em; }
.lead{ font-weight:300; color:var(--fg-2); }
.hero-side p{ font-weight:300; }