/* ============================================================
   Selected Photographs — GLASS theme (alternate)
   An iOS/macOS-style frosted look: translucent panels, generous
   corner radii and soft layered shadows. Not "liquid glass" — no
   refraction or distortion, just blur + depth.

   Drop-in alternate for style.css. It defines the same tokens and
   the same class names, so it runs on the identical app.js and
   photos.js. Use it via index-glass.html.

   Frosted panels need something behind them to blur, so the page
   sits on a soft tinted wash rather than flat white.
   ============================================================ */
/* Registering --accent as a real colour lets it INTERPOLATE, so the ambient
   wash behind the glass eases from one chapter's colour to the next instead of
   snapping. Browsers without @property just cut straight to the new colour. */
@property --accent{syntax:'<color>';inherits:true;initial-value:#0A84FF}

:root{
  --gr0:#F7F8FA; --gr1:#ECEEF2; --gr2:#DDE0E6; --gr3:#B9BEC7;
  --ink:#11141A; --ink2:#525863; --ink3:#8A909B;
  --mark:#0A84FF;                              /* iOS blue */
  --accent:#0A84FF;                            /* set per chapter by app.js */

  /* SF on Apple hardware, a clean sans everywhere else */
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Inter,
         Helvetica,Arial,sans-serif;
  --disp:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Inter,
         Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --rail:248px;
  --gut:clamp(18px,3vw,44px);
  --gap:clamp(12px,1.4vw,20px);

  --s1:clamp(10px,1.2vw,16px);
  --s2:clamp(18px,2.2vw,30px);
  --s3:clamp(30px,3.6vw,50px);
  --s4:clamp(46px,6vw,84px);
  --s5:clamp(64px,8vw,116px);

  --line:1px solid var(--gr2);
  --ease:cubic-bezier(.32,.72,.24,1);          /* iOS-ish spring-out */

  /* the glass recipe, in one place */
  --glass:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.82);
  --glass-edge:1px solid rgba(255,255,255,.72);
  --glass-blur:saturate(180%) blur(22px);
  --r-lg:22px; --r-md:16px; --r-sm:11px;

  /* three-layer shadow: contact, lift, ambient */
  --sh-1:0 1px 2px rgba(14,18,26,.05), 0 4px 12px rgba(14,18,26,.06);
  --sh-2:0 2px 4px rgba(14,18,26,.06), 0 12px 30px rgba(14,18,26,.10);
  --sh-3:0 4px 8px rgba(14,18,26,.08), 0 24px 60px rgba(14,18,26,.16);
  color-scheme:light;
}
/* Light is the default. Dark is opt-in via the Theme button only. */
:root[data-theme="dark"]{
  --gr0:#0B0C0F; --gr1:#15171C; --gr2:#282C34; --gr3:#3D424C;
  --ink:#F2F3F5; --ink2:#A7ADB8; --ink3:#7C828D; --mark:#4AA3FF; --accent:#4AA3FF;
  --glass:rgba(30,33,40,.62);
  --glass-strong:rgba(30,33,40,.80);
  --glass-edge:1px solid rgba(255,255,255,.10);
  --sh-1:0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.28);
  --sh-2:0 2px 4px rgba(0,0,0,.34), 0 12px 30px rgba(0,0,0,.40);
  --sh-3:0 4px 8px rgba(0,0,0,.40), 0 24px 60px rgba(0,0,0,.55);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;letter-spacing:-.011em;overflow-x:hidden;
  background:var(--gr0)}
/* the wash the glass blurs — fixed, so panels stay lively while you scroll */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1150px 720px at 10% -10%,
      color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(900px 640px at 94% 2%,
      color-mix(in srgb, var(--accent) 13%, transparent), transparent 58%),
    radial-gradient(1000px 820px at 62% 106%,
      color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    var(--gr0)}
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(1150px 720px at 10% -10%,
      color-mix(in srgb, var(--accent) 34%, transparent), transparent 60%),
    radial-gradient(900px 640px at 94% 2%,
      color-mix(in srgb, var(--accent) 18%, transparent), transparent 58%),
    radial-gradient(1000px 820px at 62% 106%,
      color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    var(--gr0)}
:root{transition:--accent 1.1s var(--ease)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--mark)}
:focus-visible{outline:2.5px solid var(--mark);outline-offset:3px;border-radius:6px}
::selection{background:var(--mark);color:#fff}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance;letter-spacing:-.028em}

/* type roles */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:0;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.lab{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink3);margin:0}
.disp{font-family:var(--disp)}
.q{color:var(--ink2)}
.ph1{font-family:var(--disp);font-size:clamp(36px,5.6vw,68px);font-weight:700;
  line-height:1.03;letter-spacing:-.038em}

/* ---------------- rail: a floating glass panel ---------------- */
.rail{position:fixed;inset:14px auto 14px 14px;width:var(--rail);
  padding:22px 18px 18px;z-index:50;display:flex;flex-direction:column;gap:22px;
  overflow-y:auto;scrollbar-width:none;
  background:var(--glass);border:var(--glass-edge);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.rail::-webkit-scrollbar{display:none}
.railtop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wm{font-family:var(--disp);font-size:20px;font-weight:700;line-height:1.12;
  letter-spacing:-.03em;text-align:left;color:var(--ink)}
.wm b{display:block;font-weight:700}
.wm span{display:block;font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:8px}
.menu{display:none}
.railwrap{display:flex;flex-direction:column;gap:22px;flex:1;min-height:0}
.navlab{margin:0 0 6px;padding-left:12px;font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.navgrp{display:flex;flex-direction:column;gap:2px}
.nav{position:relative;display:flex;align-items:baseline;gap:8px;
  padding:8px 12px;border-radius:10px;text-align:left;color:var(--ink2);
  font-size:14.5px;font-weight:500;line-height:1.3;
  transition:background .22s var(--ease),color .22s var(--ease),
             box-shadow .22s var(--ease)}
.nav:hover{color:var(--ink);background:rgba(120,130,150,.10)}
/* the selected row is its own raised glass pill, tinted by the chapter */
.nav[aria-current="page"]{color:var(--ink);background:var(--glass-strong);
  box-shadow:var(--sh-1);font-weight:600}
.nav[aria-current="page"]::after{content:"";position:absolute;left:0;top:9px;bottom:9px;
  width:3px;border-radius:2px;background:var(--accent)}
.nav .ct{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.railend{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:18px}
.tgl{padding:8px 14px;border:var(--glass-edge);border-radius:999px;
  background:var(--glass-strong);box-shadow:var(--sh-1);
  font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink2);align-self:flex-start;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease)}
.tgl:hover{color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-1px)}
.tgl:active{transform:translateY(0) scale(.97)}
.railfoot{font-family:var(--mono);font-size:10px;color:var(--ink3);line-height:1.9}
.scrim{position:fixed;inset:0;z-index:40;background:rgba(8,10,14,.30);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

.main{margin-left:calc(var(--rail) + 28px);min-height:100vh;
  display:flex;flex-direction:column}
.wrap{max-width:1560px;padding:0 var(--gut)}
.narrow{max-width:730px;padding:0 var(--gut)}
.pad{padding-top:var(--s4);padding-bottom:var(--s5)}

/* ---------------- photographs ---------------- */
.fr{position:relative;overflow:hidden;background:var(--gr1);
  border-radius:var(--r-md);box-shadow:var(--sh-1);
  transition:box-shadow .32s var(--ease),transform .32s var(--ease)}
.fr img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(16px);transform:scale(1.15);transition:opacity .6s var(--ease)}
.fr img.rl{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .6s var(--ease),transform .7s var(--ease)}
.fr.on img.rl{opacity:1}
.fr.on img.ph{opacity:0}

.tile{display:block;width:100%;position:relative;text-align:left}
/* photographs rise into place as you reach them */
.rise{opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (hover:hover){
  .tile:hover .fr{transform:translateY(-4px);box-shadow:var(--sh-3)}
  .tile:hover .fr img.rl{transform:scale(1.05)}
}
.tile:active .fr{transform:translateY(-1px) scale(.995)}

/* ---------------- galleries ----------------
   Columns are real elements filled in order by app.js rather than CSS
   `column-count`, which would break the reading order of a sequence. */
.galx{display:flex;gap:var(--gap);align-items:flex-start}
.galcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}

/* ---------------- section heads ---------------- */
.secthead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;padding-bottom:14px;border-bottom:var(--line);margin-bottom:var(--s2)}
.secthead h2{font-family:var(--disp);font-size:clamp(21px,2.4vw,30px);font-weight:700;
  letter-spacing:-.03em}

/* ---------------- cards ---------------- */
.cards{display:grid;gap:var(--gap) clamp(16px,2vw,28px);grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{display:block;width:100%;text-align:left;position:relative}
.card .fr{aspect-ratio:4/5}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:14px}
.card h3{font-family:var(--disp);font-size:clamp(18px,1.9vw,23px);font-weight:600;
  letter-spacing:-.028em;transition:color .2s var(--ease)}
@media (hover:hover){
  .card:hover .fr{transform:translateY(-5px);box-shadow:var(--sh-3)}
  .card:hover .fr img.rl{transform:scale(1.05)}
  .card:hover h3{color:var(--accent)}
}

/* ---------------- hero ---------------- */
.hero{position:relative;height:min(84vh,820px);min-height:460px;overflow:hidden;
  background:var(--gr1);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  /* 14px so the hero card lines up with the floating rail's inset */
  margin:14px var(--gut) 0}
.hero .fr{position:absolute;inset:0;border-radius:0;box-shadow:none}
.hero .fr img.rl{object-position:center 45%}
.heroscrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,rgba(6,8,12,.72) 0%,rgba(6,8,12,.26) 30%,rgba(6,8,12,0) 58%)}
.herotype{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(24px,4vw,52px) clamp(28px,4vw,48px);
  color:#fff}
.heroeye{margin:0 0 var(--s1);color:rgba(255,255,255,.82);font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.herotype h1{font-family:var(--disp);font-size:clamp(44px,8vw,104px);line-height:.96;
  font-weight:700;letter-spacing:-.045em;max-width:14ch;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
.herometa{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:var(--s2)}
.fade{opacity:0;transform:translateY(14px);animation:fin .9s var(--ease) forwards}
@keyframes fin{to{opacity:1;transform:none}}

/* ---------------- figures ---------------- */
.figrow{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:0;padding:22px;border-radius:var(--r-lg);
  background:var(--glass);border:var(--glass-edge);box-shadow:var(--sh-1);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.figrow>div{padding:6px 10px}
.figrow b{display:block;font-family:var(--disp);font-size:clamp(26px,3vw,38px);
  font-weight:700;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.figrow span{display:block;margin-top:6px;font-size:13px;color:var(--ink3)}

/* ---------------- controls ---------------- */
.ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:15px 0}
.chip{font-size:13px;font-weight:500;padding:8px 16px;border-radius:999px;
  border:var(--glass-edge);background:var(--glass-strong);color:var(--ink2);
  box-shadow:var(--sh-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             background .2s var(--ease),color .2s var(--ease)}
.chip:hover{color:var(--ink);transform:translateY(-1px);box-shadow:var(--sh-2)}
.chip:active{transform:translateY(0) scale(.97)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:#fff;
  box-shadow:var(--sh-2)}
.fld{background:var(--glass-strong);border:var(--glass-edge);border-radius:12px;
  padding:11px 15px;font:inherit;font-size:15px;color:var(--ink);width:100%;
  box-shadow:var(--sh-1);transition:box-shadow .2s var(--ease)}
.fld::placeholder{color:var(--ink3)}
.fld:focus{outline:none;
  box-shadow:var(--sh-1),0 0 0 3.5px color-mix(in srgb, var(--accent) 34%, transparent)}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 24px;
  border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  box-shadow:var(--sh-2);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:var(--sh-3)}
.btn:active{transform:translateY(0) scale(.975)}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}

/* ---------------- about ---------------- */
.abmeta{margin-top:var(--s3);padding:20px;border-radius:var(--r-lg);
  background:var(--glass);border:var(--glass-edge);box-shadow:var(--sh-1);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.abmeta>div{padding:4px 8px}
.abmeta .lab+p{margin:8px 0 0;font-size:14.5px;color:var(--ink2)}

/* ---------------- index (contact sheet) ---------------- */
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:clamp(12px,1.3vw,18px)}
.sh{display:block;width:100%;text-align:left;position:relative}
.sh .fr{border-radius:var(--r-sm)}
.shno{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;
  color:var(--ink3);font-variant-numeric:tabular-nums;transition:color .2s var(--ease)}
@media (hover:hover){
  .sh:hover .fr{transform:translateY(-3px) scale(1.02);box-shadow:var(--sh-2)}
  .sh:hover .shno{color:var(--ink)}
}
.peek{position:fixed;z-index:70;pointer-events:none;width:300px;border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--sh-3);opacity:0;visibility:hidden;
  transition:opacity .2s var(--ease);top:0;left:0}
.peek .fr{border-radius:var(--r-md);box-shadow:none}

/* ---------------- viewer ---------------- */
.vw{position:fixed;inset:0;z-index:100;color:#F2F3F5;display:flex;flex-direction:column;
  background:rgba(10,11,14,.72);
  -webkit-backdrop-filter:saturate(150%) blur(30px);
          backdrop-filter:saturate(150%) blur(30px)}
.vw .stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:66px 78px 14px;min-height:0}
.vw .stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:var(--r-md);box-shadow:0 10px 30px rgba(0,0,0,.5),0 40px 90px rgba(0,0,0,.55)}
.vtop{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:18px;
  padding:16px 20px;z-index:3}
.vtop>span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.vtop>button{padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.16);font-weight:600;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .2s var(--ease),transform .2s var(--ease)}
.vtop>button:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
.vbar{display:flex;align-items:center;gap:12px 24px;padding:14px 22px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.10)}
.vplace{color:#DFE1E5}
.vexif{color:#8B9099;margin-left:auto;text-align:right}
.vbar>button{padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:600;
  transition:background .2s var(--ease)}
.vbar>button:hover{background:rgba(255,255,255,.2)}
.varr{position:absolute;top:0;bottom:0;width:78px;display:flex;align-items:center;
  justify-content:center;color:rgba(242,243,245,.4);font-size:30px;
  transition:color .2s var(--ease)}
.varr:hover{color:#fff}
.varr::before{content:"";position:absolute;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transform:scale(.85);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.varr:hover::before{opacity:1;transform:scale(1)}
.varr>*{position:relative}
.vstrip{display:flex;gap:7px;overflow-x:auto;padding:10px 22px 18px;scrollbar-width:none}
.vstrip::-webkit-scrollbar{display:none}
.vstrip button{flex:0 0 auto;opacity:.42;border-radius:7px;overflow:hidden;
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.vstrip button:hover{opacity:.8;transform:translateY(-2px)}
.vstrip button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px #fff}
.vstrip img{height:54px;width:auto;display:block}

/* ---------------- footer ---------------- */
.foot{margin-top:auto;padding:0 var(--gut) 16px}
.footin{max-width:1560px;margin-top:var(--s3);padding:16px 22px;border-radius:var(--r-lg);
  background:var(--glass);border:var(--glass-edge);box-shadow:var(--sh-1);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  display:flex;gap:10px 26px;flex-wrap:wrap;align-items:baseline;
  font-size:12.5px;color:var(--ink3)}

/* ---------------- phone tab bar (hidden on desktop) ---------------- */
.tabs{display:none}
.tsheet{display:none}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  :root{--rail:0px}
  /* the sidebar is a desktop idea — phones get the bottom bar instead */
  .rail{display:none}
  .main{margin-left:0}
  /* keep content clear of the bar, and respect the home indicator */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:stretch;justify-content:space-around;
    padding:0 4px calc(env(safe-area-inset-bottom)) 4px;
    background:var(--glass-strong);border-top:var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    box-shadow:0 -10px 40px rgba(10,12,16,.20)}
  .tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:9px 2px 8px;color:var(--ink3);
    transition:color .2s var(--ease),transform .2s var(--ease)}
  .tab svg{width:23px;height:23px;display:block}
  .tab span{font-size:9.5px;letter-spacing:.03em;font-weight:500}
  .tab[aria-current="page"]{color:var(--ink)}
  .tab[aria-current="page"] svg{stroke-width:2.1}
  .tab:active{transform:scale(.92)}

  /* series sheet, slides up from the bar */
  .tsheet{display:block;position:fixed;left:0;right:0;
    bottom:calc(60px + env(safe-area-inset-bottom));z-index:61;
    background:var(--glass-strong);border:var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(10,12,16,.20);
    max-height:min(66vh,520px);overflow-y:auto;
    animation:sheetup .3s var(--ease)}
  .tsheet[hidden]{display:none}
  @keyframes sheetup{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
  .tsin{padding:10px 16px 18px}
  .grab{width:38px;height:4px;border-radius:2px;background:var(--gr3);opacity:.5;
    margin:0 auto 12px}
  .tslist{display:flex;flex-direction:column;gap:2px;margin-top:4px}
  .tsrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 12px;border-radius:12px;font-size:16.5px;color:var(--ink);
    text-align:left;transition:background .18s var(--ease)}
  .tsrow::before{content:"";width:3px;align-self:stretch;border-radius:2px;
    background:var(--accent);margin-right:11px}
  .tsrow:active{background:var(--gr1)}
  .tsrow .ct{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-left:auto}
  .tsfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-top:16px;padding-top:14px;border-top:var(--line)}
  body.menuopen{overflow:hidden}

  .vw .stage{padding:50px 10px 6px}
  .varr{width:44px}
  .ldg .sm{display:none}
  .peek{display:none}
}
@media (min-width:901px){ .scrim{display:none} }
@media (max-width:620px){
  .heroeye{display:none}
  .herotype h1{font-size:clamp(38px,12vw,60px)}
  .vexif{margin-left:0;text-align:left;flex:1 0 100%}
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--ink);color:var(--gr0);
  padding:10px 16px;border-radius:10px}

/* backdrop-filter is widely supported, but if it isn't, fall back to solid
   panels so nothing turns into unreadable transparent text. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,255,255,.94); --glass-strong:#fff}
  :root[data-theme="dark"]{--glass:rgba(24,26,32,.95); --glass-strong:#22252C}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fade,.rise{opacity:1;transform:none}
}