/* Shared shell for every section of the site — the Codex (/), and the personal
   section (/me). Theme tokens for both themes, the chamfered engram frame, the top bar
   and the footer. Section-specific styles stay in each section's own sheet; anything
   both need belongs here, so a colour fix only ever happens once. */
:root{
  /* ===== Frostlight — default light theme ===== */
  --ink:#DBE3EC;
  --ink-2:#D3DBE5;
  --gunmetal:#EDF2F8;
  --gunmetal-2:#E2E9F1;
  --edge:#C2CEDC;
  --edge-2:#A9B8C9;
  --edge-shadow:#D3DBE5;
  --ghost:#136C86;       /* accent — deepened Ghost teal so it reads on a light ground */
  --ghost-deep:#0C4E62;
  --accent-1:#136C86;    /* first stop in accent-button gradients (= --ghost here; dark mode tints it down) */
  --accent-2:#1C86A3;    /* second stop in accent-button gradients */
  --glow:#0F5A70;        /* emphasis text */
  --on-accent:#EEF7FB;   /* text sitting on an accent button */
  --text:#16202C;
  --muted:#556274;
  --muted-2:#7D8A9A;
  /* washes + decorative (theme-aware) */
  --bg-1:#E9EFF6;
  --wash:rgba(19,108,134,0.06);
  --beam:rgba(19,108,134,0.12);
  --aura:rgba(19,108,134,0.16);
  --accent-glow:rgba(19,108,134,0.30);
  --accent-wash:rgba(19,108,134,0.06);
  --accent-wash-2:rgba(19,108,134,0.10);
  --kw-bg:rgba(19,108,134,0.10);
  --nav-wash:rgba(226,233,241,0.70);
  --bubble-bg:rgba(237,242,248,0.64);   /* translucent Ghost speech banner — wallpaper shows through */
  --hair:rgba(169,184,201,0.55);
  --bar-bg:rgba(224,231,239,0.82);   /* translucent sticky top bar */
  --bar-edge:rgba(169,184,201,0.55);
  --home-veil:linear-gradient(rgba(224,231,239,0.84), rgba(224,231,239,0.70));  /* readability veil over the hero photo */
  --panel-glass:rgba(237,242,248,0.66);   /* translucent hero tiles/search — lets the wallpaper show through */
  --panel2-glass:rgba(226,233,241,0.62);
  /* semantic only — rarity + element (nudged darker so they read on light) */
  --exotic:#A87F1E;
  --legendary:#7548BC;
  --rare:#376AAC;
  --uncommon:#3C8650;
  --common:#66707D;
  --danger:#B23B3B;
  /* Destiny damage types — darkened so they pass contrast on the light ground */
  --kinetic:#4F5866; --arc:#166A88; --solar:#9C4710; --void:#6E3FA8; --stasis:#2A57B5; --strand:#1F7340;
  /* status semantics: --info = calm/working (arc), --warn = a problem (solar),
     --inspect = "this is someone else's Guardian" (violet, unlike anything else) */
  --info:var(--arc); --warn:var(--solar); --inspect:#5B3FC4;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --c:13px; /* chamfer */
  --bar-h:64px; /* sticky top-bar height — used to offset the sub-page nav */
}
:root[data-theme="dark"]{
  /* ===== original near-black theme — opt-in ===== */
  --ink:#080A0F;
  --ink-2:#0B0E15;
  --gunmetal:#12161E;
  --gunmetal-2:#161B25;
  --edge:#232B38;
  --edge-2:#2f3a4a;
  --edge-shadow:#10151d;
  --ghost:#8FE9FF;
  --ghost-deep:#3d6f7e;
  --accent-1:#2a6676;    /* accent buttons: a deep teal fill, not the bright --ghost — kept dark on purpose */
  --accent-2:#1a4652;
  --glow:#A6BFC6;   /* was #CFEFF7, dimmed 20% — near-white glared on the dark ground */
  --on-accent:#cfe6ec;   /* light text on the dark-teal buttons */
  --text:#BABEC3;   /* was #E9EEF4, dimmed 20% for the same reason */
  --muted:#7C8797;
  --muted-2:#5a6472;
  --bg-1:#17202e;
  --wash:rgba(143,233,255,0.05);
  --beam:rgba(143,233,255,0.10);
  --aura:rgba(143,233,255,0.20);
  --accent-glow:rgba(143,233,255,0.40);
  --accent-wash:rgba(143,233,255,0.05);
  --accent-wash-2:rgba(143,233,255,0.08);
  --kw-bg:rgba(143,233,255,0.10);
  --nav-wash:rgba(20,26,36,0.55);
  --bubble-bg:rgba(9,13,19,0.64);
  --hair:rgba(35,43,56,0.55);
  --bar-bg:rgba(9,11,16,0.80);
  --bar-edge:rgba(35,43,56,0.85);
  --home-veil:linear-gradient(rgba(8,10,15,0.80), rgba(8,10,15,0.60));
  --panel-glass:rgba(18,22,30,0.58);
  --panel2-glass:rgba(22,27,37,0.58);
  --exotic:#CEAE33;
  --legendary:#A579D6;
  --rare:#4E7FB8;
  --uncommon:#4E9E5E;
  --common:#B8BEC6;
  --danger:#E5654F;
  --kinetic:#d9dde3; --arc:#7ad4f0; --solar:#f0913e; --void:#b183df; --stasis:#4d88ff; --strand:#35c56a;
  --inspect:#a990ff;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(1100px 620px at 50% -240px, var(--bg-1) 0%, transparent 62%),
    radial-gradient(900px 900px at 88% 8%, var(--wash) 0%, transparent 60%),
    var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:15px; line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;   /* fallback for older browsers */
  overflow-x:clip;     /* clip horizontally without making body a scroll container, so position:sticky works */
}
a{color:inherit;text-decoration:none}

/* ---------- chamfered "engram" frame ---------- */
.engram{ position:relative; background:var(--gunmetal);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.engram::after{ content:""; position:absolute; inset:0; pointer-events:none; padding:1px;
  background:linear-gradient(140deg, var(--edge-2), var(--edge) 45%, var(--edge-shadow) 100%);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:background .25s ease, filter .25s ease; }

/* ---------- top bar ---------- */
.wrap{position:relative;z-index:2}
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(16px,4vw,44px);
  background:var(--bar-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bar-edge);
}
.mark{display:flex; align-items:center; gap:12px}
.mark .shellmark{width:26px;height:26px;flex:0 0 26px}
.mark .word{font-family:var(--display); font-weight:600; letter-spacing:.34em;
  font-size:14px; text-transform:uppercase; color:var(--glow)}
.mark .sub{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--muted-2);
  text-transform:uppercase; margin-top:1px}
.nav{display:flex; align-items:center; gap:10px}
.signin{
  font-family:var(--display); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--glow); padding:9px 18px; background:transparent;
  --c:9px;
}
.signin::after{background:linear-gradient(140deg, var(--ghost-deep), var(--edge))}
.signin:hover::after{background:linear-gradient(140deg, var(--ghost), var(--ghost-deep)); filter:drop-shadow(0 0 6px var(--accent-glow))}
.signin:hover{color:#fff}
/* Two lines: the invitation on top, what it actually does underneath — so the
   button can have a voice without leaving anyone guessing what they're clicking. */
.connect{ font-family:var(--display); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--on-accent); padding:6px 18px; background:linear-gradient(140deg,var(--accent-1),var(--accent-2)); --c:9px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1.25; text-align:center }
.connect .lead{ font-size:12.5px }
.connect .hint{ font-size:8.5px; letter-spacing:.12em; font-weight:500; opacity:.82 }
.connect::after{ background:transparent }
.connect:hover{ filter:brightness(1.08); color:var(--on-accent) }
/* Dark mode: no fill, just the same hairline frame as the signed-in .signin button,
   so signed-out and signed-in look like one control. (The unfilled look began as an
   accident while --accent-2/--on-accent were broken; it's kept on purpose.) */
:root[data-theme="dark"] .connect:not(.is-offline){ background:transparent; color:var(--glow) }
:root[data-theme="dark"] .connect:not(.is-offline)::after{ background:linear-gradient(140deg, var(--ghost-deep), var(--edge)) }
:root[data-theme="dark"] .connect:not(.is-offline):hover{ filter:none; color:#fff }
:root[data-theme="dark"] .connect:not(.is-offline):hover::after{ background:linear-gradient(140deg, var(--ghost), var(--ghost-deep)); filter:drop-shadow(0 0 6px var(--accent-glow)) }
.authbox{display:flex; align-items:center; gap:10px}
/* Bungie is unreachable. The button still works — the health probe is cached, so
   "offline" can be a few seconds stale and we'd rather let someone try than block
   them — but it stops presenting itself as the obvious next step. */
.connect.is-offline{ background:var(--gunmetal-2); color:var(--muted) }
.connect.is-offline::after{ background:linear-gradient(140deg, var(--edge-2), var(--edge)) }
.connect.is-offline .hint{ opacity:1; color:var(--exotic) }
.connect.is-offline:hover{ filter:none; color:var(--text) }
/* ---------- server-status pill (inline in the topbar, next to the mark) ---------- */
#statusbar{
  display:flex; align-items:center; gap:7px; flex:0 0 auto; margin-right:auto;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--uncommon); white-space:nowrap;
}
#statusbar[hidden]{ display:none }
#statusbar::before{ content:""; width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--uncommon); box-shadow:0 0 6px var(--uncommon) }
#statusbar.down{ color:var(--danger) }
#statusbar.down::before{ background:var(--danger); box-shadow:0 0 6px var(--danger) }
@media (max-width:520px){ #statusbar .txt{ display:none } }
.advisorlink{ font-family:var(--display); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:8px 4px; text-decoration:none; transition:color .15s }
.advisorlink:hover{ color:var(--glow) }
.discord{ display:inline-flex; align-items:center; justify-content:center; color:var(--muted); padding:7px 11px; --c:8px;
  box-shadow:inset 0 0 0 1px var(--edge); clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  transition:color .15s, box-shadow .15s }
.discord:hover{ color:#5865F2; box-shadow:inset 0 0 0 1px #5865F2 }   /* Discord blurple */
.discord svg{ width:20px; height:20px; display:block }
.themetog{ display:inline-flex; align-items:center; justify-content:center; color:var(--muted); padding:7px 10px; --c:8px; cursor:pointer; background:transparent; border:0;
  box-shadow:inset 0 0 0 1px var(--edge); clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  transition:color .15s, box-shadow .15s }
.themetog:hover{ color:var(--glow); box-shadow:inset 0 0 0 1px var(--ghost-deep) }
.themetog svg{ width:19px; height:19px; display:block }
.themetog .ic-sun{ display:none }                              /* light theme (default): offer the moon */
:root[data-theme="dark"] .themetog .ic-moon{ display:none }    /* dark theme: offer the sun */
:root[data-theme="dark"] .themetog .ic-sun{ display:block }

/* ---------- footer ---------- */
.foot{max-width:960px; margin:44px auto 30px; padding:20px clamp(16px,4vw,44px) 0;
  border-top:1px solid var(--edge); color:var(--muted-2); font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}