/* ═══════════════════════════════════════════════════════════════════════════
   SHELL — the parts of the page frame that fg.css does not carry
   ───────────────────────────────────────────────────────────────────────────
   fg.css owns tokens, type, tone, buttons, the bar and the edge effect. The
   mobile drawer and the footer are page furniture rather than system, so they
   live here — ported verbatim from the reference homepage so this site and
   FluidGhost's share one drawer and one footer rather than two near-identical
   ones.
   Load order: lg.css -> fg.css -> brand.css -> shell.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── MOBILE DRAWER ───────────────────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:200;display:none;padding:var(--s4)}
.sheet[open]{display:block}
.sheet::backdrop{background:rgba(6,5,10,.6)}
.sheetpanel{border-radius:var(--r-xl);padding:var(--s5);display:grid;gap:var(--s4);
  max-width:520px;margin:70px auto 0}
/* z-index:5 on every child, because the material's tint layer sits at -1 and
   its specular at 0 — anything in flow needs to be above both. */
.sheetpanel .shead{display:flex;justify-content:space-between;align-items:center;
  position:relative;z-index:5}
.sheetpanel nav{display:grid;gap:2px;position:relative;z-index:5}
.sheetpanel nav a{padding:13px 14px;border-radius:var(--r-sm);font-size:17px;
  font-weight:600;letter-spacing:-.015em;color:#f2eefc}
.sheetpanel nav a:hover{background:rgba(255,255,255,.07)}
.sheetpanel .scta{display:grid;gap:10px;position:relative;z-index:5}
.sheetx{background:none;border:0;color:#cfc8e0;cursor:pointer;padding:8px;
  border-radius:var(--r-pill)}
.sheetx svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
footer{padding:var(--s9) 0 var(--s7);background:var(--black);color:var(--ink-d);
  border-top:1px solid rgba(255,255,255,.07)}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s6)}
@media(max-width:760px){.footgrid{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.footcol{display:grid;gap:10px;align-content:start;font-size:14px}
.footh{font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink3-d)}
.footcol a{color:var(--ink2-d)}
.footcol a:hover{color:var(--ink-d)}
.footbar{margin-top:var(--s8);font:500 12px var(--mono);color:var(--ink3-d);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* ── SKIP LINK ───────────────────────────────────────────────────────────── */
/* The nav is a fixed pill at the top of a tall page; without this the first
   tab stop on a phone is a burger and the second is the bottom of the page. */
.skip{position:absolute;left:-9999px;top:0;z-index:300}
.skip:focus{left:12px;top:12px;padding:10px 16px;border-radius:var(--r-pill);
  background:var(--panel);color:var(--ink-d);font:600 14px var(--body)}