/* ============================================================================
   Polarisk site chrome: masthead, footer, skip link.
   ----------------------------------------------------------------------------
   Split out of polarisk.css deliberately. The two interactive tools carry their
   own page CSS with rules for `section`, `a`, `ul` and `h2` that conflict with
   the full design system, so they cannot load it. They can load this, which
   means every page on the site shares one masthead and one footer even where
   the page body is bespoke.

   Self-sufficient by design: it declares the custom properties it needs rather
   than assuming polarisk.css loaded first. Pages that also load polarisk.css
   simply redeclare the same values, which is harmless.
   ========================================================================= */

:root{
  --night:#05090F;
  --night-panel:#080E18;
  --night-hi:#0B1422;
  --starlight:#EDF1FA;
  --dim:#9FADC6;
  --dimmer:#6E7C95;
  --gold:#D9B45B;
  --star:#EAD9A8;
  --rule:rgba(159,173,198,.17);
  --rule-strong:rgba(159,173,198,.30);
  --rule-gold:rgba(217,180,91,.30);
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --shell:1180px;
  --gutter:clamp(20px,5vw,64px);
}

/* --- Skip link ---------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--night);
  font-family:var(--mono);font-size:13px;padding:12px 18px;text-decoration:none;
  border:0;
}
.skip:focus{left:12px;top:12px}

/* --- Masthead ----------------------------------------------------------- */
.mast{
  position:sticky;top:0;z-index:90;
  background:rgba(5,9,15,.90);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.mast__in{
  max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:26px;min-height:66px;
}
.mast__brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;border:0}
.mast__roundel{width:26px;height:26px;flex:0 0 auto}
.mast__name{
  font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.055em;
  color:var(--starlight);text-transform:none;
}
.mast__name b{color:var(--gold);font-weight:600}

.mast__nav{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.mast__nav a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;text-transform:none;
  color:var(--dim);text-decoration:none;padding:9px 12px;border-radius:2px;border:0;
  white-space:nowrap;
}
.mast__nav a:hover{color:var(--starlight);background:rgba(159,173,198,.07)}
.mast__nav a[aria-current]{color:var(--gold)}
.mast__cta{
  font-family:var(--mono);font-size:12.5px;
  border:1px solid var(--rule-gold)!important;color:var(--star)!important;
  padding:9px 15px!important;margin-left:8px;
}
.mast__cta:hover{background:rgba(217,180,91,.10);border-color:var(--gold)!important}

.mast__toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  color:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  padding:9px 13px;border-radius:2px;cursor:pointer;
}
.mast__toggle:hover{color:var(--starlight);border-color:var(--rule-strong)}

@media (max-width:979px){
  .mast__toggle{display:block}
  .mast__nav{
    display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:0;margin:0;padding:6px 0 14px;border-top:1px solid var(--rule);
  }
  .mast__nav a{padding:12px 2px;font-size:14px}
  .mast__cta{margin:10px 0 0;text-align:center}
  .mast[data-open="true"] .mast__in{flex-wrap:wrap;padding-bottom:0}
  .mast[data-open="true"] .mast__nav{display:flex}
}

/* Homepage variant: rides over the star field, earns its background on scroll.
   Without JS it simply stays lit, which is the safe state. */
.mast[data-mast="over"][data-lit="false"]{
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  transition:background .3s ease,border-color .3s ease;
}
.mast[data-mast="over"][data-lit="false"] .mast__nav a{text-shadow:0 1px 10px rgba(4,8,15,.9)}

.mast a:focus-visible,.mast__toggle:focus-visible,.skip:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;
}

/* --- Footer ------------------------------------------------------------- */
.foot{
  border-top:1px solid var(--rule);
  padding:clamp(46px,6vw,72px) 0 40px;
  background:var(--night-panel);
  font-family:var(--sans);color:var(--dim);text-align:left;
  margin-top:0;font-size:16px;line-height:1.62;
}
.foot__grid{
  max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,52px);
}
@media (max-width:859px){.foot__grid{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:519px){.foot__grid{grid-template-columns:1fr}}
.foot__brand{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.foot__brand svg{width:24px;height:24px}
.foot__brand span{
  font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:.05em;
  color:var(--starlight);text-transform:none;
}
.foot__brand b{color:var(--gold);font-weight:600}
.foot__blurb{color:var(--dim);font-size:15px;line-height:1.6;max-width:34ch;margin:0}
.foot h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dimmer);margin:0 0 15px;font-weight:400;
}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:0 0 10px;padding:0}
.foot li::marker{content:""}
.foot a{color:var(--dim);font-size:14.5px;border:0;text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot__legal{
  max-width:var(--shell);margin:clamp(34px,4.5vw,50px) auto 0;
  padding:24px var(--gutter) 0;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;color:var(--dimmer);line-height:1.7;
}
.foot__legal p{margin:0 0 8px;max-width:64ch;color:var(--dimmer);font-size:11.5px}
.foot__legal nav{margin:0 0 10px}
.foot__legal a{color:var(--dimmer);font-size:11.5px}
.foot__legal a:hover{color:var(--gold)}

@media print{
  .mast,.skip,.foot__grid{display:none!important}
  .foot{background:none;border-color:#ddd;color:#333}
  .foot__legal{color:#555}
}