/* Site shell: the masthead, the footer and the page-heading block, shared by
   every page so the brand, the nav and the H1 sit in the same place whichever
   page you land on. Pages keep their own --w for the body underneath; nothing
   in here should ever depend on it. Relies on the colour/type tokens each
   page declares in its own :root. */
:root{--shell:1000px;--shell-pad:28px}

/* Two-class selectors on purpose: they outrank a page's own .wrap rule
   wherever this file is linked, so a page cannot drift the shell by accident. */
.mast .wrap,.foot .wrap,.wrap.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--shell-pad)}

/* — masthead — */
.mast{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
@media (max-width:720px){.mast{backdrop-filter:none;background:color-mix(in oklab,var(--bg) 96%,transparent)}}
/* .mast .mast__row, not .mast__row: the row is also a .wrap, and a page whose
   .wrap uses the padding shorthand would otherwise zero this out. */
.mast .mast__row{display:flex;justify-content:space-between;align-items:center;padding-block:11px}
.mast__brand{font-family:var(--serif);font-size:22px;letter-spacing:-0.01em;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.mast__mark{width:45px;height:45px;display:inline-block;image-rendering:pixelated;border-radius:4px;flex:none}
.mast__brand span{display:inline-flex;align-items:baseline;gap:10px}
.mast__nav{display:flex;gap:22px;font-family:var(--serif);font-size:13.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.mast__nav a{color:var(--muted);transition:color .16s ease}
.mast__nav a:hover{color:var(--ink)}
.mast__nav a.here{color:var(--lens)}
@media (min-width:821px){.mast__nav{align-items:center}}

/* Discord nav link with a live member-count readout (logo, count, arrow). The readout stays hidden
   until real numbers arrive, so on failure this is just the plain Discord link. */
.mast__disc{display:inline-flex;align-items:center;gap:12px}
.mast__disc-meta{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.mast__disc-meta[hidden]{display:none}
.mast__disc-meta b{font-weight:500}
.mast__disc-mark{width:15px;height:15px;flex:none;fill:var(--lens)}
.mast__disc-arr{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;color:var(--lens)}

/* — mobile menu — */
.mast__burger{display:none;width:44px;height:44px;margin:0 -8px 0 0;align-items:center;justify-content:center;border-radius:8px;color:var(--ink);background:none;border:none;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
.mast__burger:hover{color:var(--lens)}
.mast__burger .x{display:none}
.mast.is-open .mast__burger .x{display:block}
.mast.is-open .mast__burger .bars{display:none}
@media (max-width:820px){
  .mast .mast__row{padding-block:9px;gap:10px}
  .mast__mark{width:32px;height:32px}
  .mast__brand{font-size:18px;gap:8px}
  .mast__burger{display:inline-flex}
  .mast__nav{position:absolute;top:100%;left:0;right:0;display:flex!important;flex-direction:column;gap:0;background:color-mix(in oklab,var(--bg) 97%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .3s var(--ease,ease),opacity .2s ease}
  .mast.is-open .mast__nav{max-height:75vh;opacity:1;pointer-events:auto}
  .mast__nav a{padding:14px var(--shell-pad);min-height:44px;display:flex;align-items:center;font-size:15px;border-top:1px solid var(--rule);letter-spacing:0.08em}
  .mast__nav a:first-child{border-top:none}
  .mast__disc{justify-content:space-between;gap:9px}
  .mast__disc-meta{gap:9px}
}
@media (prefers-reduced-motion:reduce){.mast__nav{transition:none!important}}

/* — page heading: eyebrow, H1, lead —
   Top padding and the H1 box are fixed here so the heading lands at the same
   height on every page. Pages set only the H1 measure (max-width) and the
   space under the block. */
.page-head{padding-top:clamp(42px,6vw,76px)}
/* The eyebrow's margins are part of the H1's position, so they are pinned too. */
.page-head .eyebrow{margin:11px 0}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,62px);line-height:1;letter-spacing:-0.02em;margin:16px 0;text-wrap:balance}
.page-head h1 .gl{color:var(--lens);text-shadow:0 0 26px var(--glow)}

/* — footer — */
.foot{padding:20px 0 26px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.foot__row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot__aff{text-align:right}
.foot__aff small{display:block;font-size:9.5px;letter-spacing:0.045em;opacity:.7;margin-top:2px}
.foot a:hover{color:var(--lens)}
.foot__contact{display:inline-flex;align-items:center;justify-content:center;min-height:28px;margin-left:8px;padding:0 9px;border:1px solid var(--rule);border-radius:3px;color:var(--ink-2);vertical-align:middle;transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease)}
.foot__contact:hover,.foot__contact:focus-visible{border-color:var(--lens);color:var(--lens);background:color-mix(in oklab,var(--lens) 6%,transparent);outline:none}