/* ============================================================
   spencerlab.tech — "HUD / holographic engineering deck"
   Dark-committed. Green-black ground · blueprint grid · viridian signal ·
   electric-green terminal · glossy glass · Rajdhani / IBM Plex Mono / IBM Plex Sans.
   Visual language modeled on the owner's mockup; identity is spencerlab's own.
   Painted explicitly; one visual world by intent.
   ============================================================ */
:root{
  --void:#04100b; --ground:#08140f; --raise:#0b1c15; --raise-2:#0e2019;
  --ink:#eef2fb; --ink-soft:#93b3a5; --ink-faint:#5f7d70;
  --line:rgba(80,180,140,.16); --line-2:rgba(80,180,140,.30);
  --accent:#1fb894; --accent-2:#35d6a8; --accent-cyan:#2ee6c0; --accent-iris:#14b39a;
  --accent-ink:#6de9c2;
  --grad:linear-gradient(135deg,#1fb894 0%,#35d6a8 100%);
  --grad-text:linear-gradient(115deg,#35d6a8 0%,#8ff0d6 55%,#8ff0c8 100%);
  --glow:rgba(31,184,148,.44); --glow-cyan:rgba(46,230,192,.30); --glow-iris:rgba(20,179,154,.26);
  --ok:#37e08a; --warn:#f2b84f; --fail:#ff6f6b;
  --ok-soft:rgba(55,224,138,.12); --warn-soft:rgba(242,184,79,.12); --fail-soft:rgba(255,111,107,.13);
  --glass:linear-gradient(158deg,rgba(150,225,190,.14) 0%,rgba(150,225,190,.038) 30%,rgba(150,225,190,.006) 62%);
  --glass-hi:inset 0 1px 0 rgba(198,245,222,.22), inset 0 -1px 0 rgba(0,0,0,.28);
  --drop:0 20px 44px -24px rgba(0,0,0,.92), 0 6px 16px -10px rgba(0,0,0,.6);
  --term-bg:#03120c; --term-ink:#4dfd7e; --term-dim:#3f8f5f; --term-line:rgba(80,180,140,.16);
  --maxw:1180px; --readw:780px; --pad:26px;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Rajdhani","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--void)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{
  margin:0; color:var(--ink); background:var(--ground); font-family:var(--sans);
  font-size:16px; line-height:1.62; letter-spacing:-.002em; -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden;
}
/* ambient world: aurora glows + blueprint grid, fixed behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1000px 680px at 78% -6%, var(--glow) 0%, transparent 58%),
    radial-gradient(680px 520px at 96% 8%, var(--glow-iris) 0%, transparent 60%),
    radial-gradient(820px 620px at 4% 104%, var(--glow-cyan) 0%, transparent 62%),
    linear-gradient(180deg, var(--ground), var(--void));
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(80,180,140,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,180,140,.05) 1px, transparent 1px);
  background-size:54px 54px; background-position:center -1px;
  mask-image:radial-gradient(130% 100% at 50% 0%, #000 32%, transparent 80%);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%, #000 32%, transparent 80%);
}
a{color:var(--accent-ink); text-decoration:none}
a:hover{color:#c0ffe4}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
code,kbd,.mono{font-family:var(--mono)}
img{max-width:100%}
::selection{background:rgba(31,184,148,.32); color:#eef6ff}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.readwrap{max-width:var(--readw); margin:0 auto; padding:0 var(--pad)}

/* glossy glass — the recurring surface */
.glass{position:relative; background:var(--glass); background-color:rgba(11,24,18,.66);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--glass-hi), var(--drop)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:12px 20px; border-radius:11px;
  border:1px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap; color:#eaf3ff}
.btn.primary{background:var(--grad); box-shadow:0 10px 30px -10px var(--glow), var(--glass-hi)}
.btn.primary:hover{filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 16px 38px -12px var(--glow), var(--glass-hi)}
.btn.ghost{background:rgba(90,200,160,.05); border-color:var(--line-2); color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent); color:#d9ffe8; background:rgba(31,184,148,.08)}
.btn .arw{transition:transform .18s} .btn:hover .arw{transform:translateX(3px)}

/* ---------------- top nav ---------------- */
.nav{position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(6,18,13,.9), rgba(6,18,13,.55));
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line)}
.nav::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.55}
.nav .bar{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); height:70px; display:flex; align-items:center; gap:20px}
.brand{display:inline-flex; align-items:center; white-space:nowrap}
.brand .wordmark{font-family:var(--disp); font-weight:700; font-size:23px; letter-spacing:.005em; color:#f2f6ff; line-height:1; text-shadow:0 0 24px rgba(31,184,148,.25)}
.brand .wordmark .tld{color:var(--accent-ink)}
.navlinks{margin-left:auto; display:flex; gap:2px; align-items:center; flex-wrap:wrap}
.navlinks a{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); padding:8px 12px;
  border-radius:8px; letter-spacing:.06em; text-transform:uppercase; transition:.16s}
.navlinks a:hover{background:rgba(90,200,160,.06); color:var(--ink)}
.navlinks a[aria-current="page"]{color:#c8ffe6; box-shadow:inset 0 -2px 0 var(--accent)}
.nav .btn{margin-left:8px; padding:9px 15px}
@media(max-width:840px){.brand .wordmark{font-size:20px} .nav .btn{display:none} .nav .bar{height:60px}}

/* ---------------- hero ---------------- */
.hero{padding:74px 0 46px}
.hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start}
@media(max-width:960px){.hero .grid{grid-template-columns:1fr; gap:34px} .hero{padding:52px 0 34px}}
.hero .kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 22px;
  padding:7px 15px; border:1px solid var(--line-2); border-radius:100px; background:rgba(31,184,148,.06)}
.hero .kicker::before,.hero .kicker::after{content:"◆"; font-size:8px; color:var(--accent)}
.hero h1{font-family:var(--disp); font-weight:700; font-size:clamp(40px,6.6vw,68px); line-height:.98;
  letter-spacing:.004em; text-transform:uppercase; margin:0 0 22px; text-wrap:balance; color:#f4f8ff}
.hero h1 .accent{background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 26px var(--glow))}
.hero .sub{font-size:18px; color:var(--ink-soft); max-width:52ch; margin:0 0 30px; text-wrap:pretty}
.hero .actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px}
.trustedby .tb-label{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px}
.trustedby .tb-row{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center}
.trustedby .tb-row span{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); letter-spacing:.02em; opacity:.85}

/* holographic globe + HUD stack (hero right) */
.deck{display:flex; flex-direction:column; gap:16px}
.globe{position:relative; display:grid; place-items:center; margin:-8px 0 2px}
.globe svg{width:min(330px,92%); height:auto; overflow:visible}
.globe .g-ring{animation:ringflow 2.6s linear infinite}
.globe .g-glow{transform-box:fill-box; transform-origin:center; animation:glowpulse 5.5s ease-in-out infinite}
.globe .tw{transform-box:fill-box; transform-origin:center; animation:twinkle 3.4s ease-in-out infinite}
@keyframes ringflow{to{stroke-dashoffset:-24}}
@keyframes glowpulse{0%,100%{opacity:.82; transform:scale(1)} 50%{opacity:1; transform:scale(1.045)}}
@keyframes twinkle{0%,100%{opacity:.18} 50%{opacity:.72}}
.hud-row{display:grid; grid-template-columns:1.15fr .85fr; gap:14px}
@media(max-width:520px){.hud-row{grid-template-columns:1fr}}
.hud{padding:15px 16px}
.hud .hud-tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; align-items:center; gap:7px; margin-bottom:10px}
.hud .hud-tag .d{width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px 1px var(--glow)}
.hud dl{margin:0; display:flex; flex-direction:column; gap:9px}
.hud .kv{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.hud .kv dt{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.hud .kv dd{margin:0; font-family:var(--mono); font-size:13px; color:var(--accent-ink); font-weight:600}
.hud .kv dd.ok{color:var(--ok)}
.term{background:var(--term-bg); border-radius:14px; overflow:hidden; border:1px solid var(--term-line); box-shadow:var(--glass-hi), var(--drop)}
.term-bar{display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--term-line); background:linear-gradient(180deg,rgba(90,200,160,.04),transparent)}
.term-bar .lights{display:flex; gap:6px}
.term-bar .lights i{width:9px; height:9px; border-radius:50%; display:block}
.term-bar .lights i:nth-child(1){background:rgba(255,111,107,.55)} .term-bar .lights i:nth-child(2){background:rgba(242,184,79,.55)} .term-bar .lights i:nth-child(3){background:rgba(55,224,138,.55)}
.term-bar .who{font-family:var(--mono); font-size:11px; color:var(--term-dim); margin-left:6px}
.term pre{margin:0; padding:15px 16px; overflow-x:auto; font-family:var(--mono); font-size:12.6px; line-height:1.75; color:var(--term-ink); tab-size:2}
.term pre .p{color:#8affae; font-weight:600; text-shadow:0 0 10px rgba(77,253,126,.4)} .term pre .c{color:#3f8f5f} .term pre .v{color:#eaf2ff} .term pre .g{color:var(--ok)}

/* ---------------- section frame ---------------- */
.panel{position:relative; margin:26px 0; padding:34px 30px; border-radius:22px; border:1px solid var(--line);
  border-top-color:rgba(198,245,222,.20); overflow:hidden;
  background:linear-gradient(158deg,rgba(150,225,190,.07) 0%,rgba(11,24,18,.5) 32%,rgba(7,16,12,.55) 100%);
  box-shadow:var(--glass-hi), var(--drop)}
.panel::before{content:""; position:absolute; left:0; right:0; top:0; height:120px; pointer-events:none;
  background:linear-gradient(180deg, rgba(180,235,208,.09), transparent)}
.panel>*{position:relative}
@media(max-width:640px){.panel{padding:24px 18px; border-radius:18px}}
.sec-head{margin:0 0 22px}
.sec-head .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-ink); display:block; margin-bottom:8px}
.sec-head h2{font-family:var(--disp); font-weight:700; font-size:clamp(24px,3.6vw,32px); letter-spacing:.01em; text-transform:uppercase; margin:0; color:#f2f6ff}
.sec-head .intro{color:var(--ink-soft); margin:.5em 0 0; max-width:62ch; font-size:15px}
.sec-head.row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.sec-head.row .more{font-family:var(--mono); font-size:12px}

/* ---------------- disciplines (categories) ---------------- */
.xgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:14px}
.xcard{position:relative; display:flex; flex-direction:column; padding:22px 18px; border-radius:15px;
  border:1px solid var(--line); background:var(--glass); background-color:rgba(10,26,20,.55);
  backdrop-filter:blur(8px); box-shadow:var(--glass-hi); overflow:hidden; transition:.2s}
.xcard::before{content:""; position:absolute; inset:0; border-radius:15px; padding:1px;
  background:linear-gradient(140deg, transparent 58%, var(--accent)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:.2s}
.xcard:hover{transform:translateY(-4px); border-color:var(--line-2); text-decoration:none;
  box-shadow:var(--glass-hi), 0 30px 50px -26px rgba(0,0,0,.9), 0 0 34px -10px var(--glow)}
.xcard:hover::before{opacity:.75}
.xcard .ico{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  color:var(--accent-2); background:rgba(31,184,148,.10); border:1px solid rgba(31,184,148,.28)}
.xcard .ico svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6}
.xcard .n{position:absolute; top:16px; right:18px; font-family:var(--mono); font-size:11px; color:var(--ink-faint)}
.xcard h3{font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:.02em; text-transform:uppercase; margin:0 0 7px; color:var(--ink)}
.xcard p{margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.5; flex:1}
.xcard .foot{margin-top:16px; display:flex; align-items:center; justify-content:space-between}
.xcard .count{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
.xcard .arw{color:var(--accent-2); transition:transform .18s} .xcard:hover .arw{transform:translateX(4px)}

/* ---------------- stat strip ---------------- */
.stats{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.stats{grid-template-columns:1fr}}
.stat{display:flex; align-items:center; gap:13px; padding:16px 14px; border-radius:13px; border:1px solid var(--line); background:rgba(10,26,20,.4)}
.stat .si{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:var(--accent-2); background:rgba(31,184,148,.10); border:1px solid rgba(31,184,148,.24); flex:none}
.stat .si svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6}
.stat .sv{font-family:var(--disp); font-weight:700; font-size:24px; letter-spacing:.01em; color:#f2f6ff; line-height:1}
.stat .sl{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:5px}

/* ---------------- featured / recent entries as project cards ---------------- */
.projects{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px}
.pcard{display:flex; flex-direction:column; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--glass); background-color:rgba(10,26,20,.55); box-shadow:var(--glass-hi); transition:.2s}
.pcard:hover{transform:translateY(-4px); border-color:var(--line-2); text-decoration:none;
  box-shadow:var(--glass-hi), 0 30px 52px -26px rgba(0,0,0,.9), 0 0 34px -12px var(--glow)}
.pcard .shot{height:132px; position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(120% 120% at 80% 15%, rgba(31,184,148,.20), transparent 60%), var(--term-bg); display:grid; place-items:center}
.pcard .shot svg{width:84%; height:auto; opacity:.92}
.pcard .shot .tag{position:absolute; top:11px; left:12px; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink); padding:4px 9px; border-radius:100px; background:rgba(5,14,10,.7); border:1px solid var(--line-2)}
.pcard .pbody{padding:18px 18px 20px; display:flex; flex-direction:column; gap:9px; flex:1}
.pcard .pbody .date{font-family:var(--mono); font-size:11px; color:var(--ink-faint)}
.pcard h3{font-family:var(--disp); font-weight:600; font-size:20px; letter-spacing:.015em; text-transform:uppercase; line-height:1.1; margin:0; color:var(--ink); text-wrap:balance}
.pcard p{margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.5; flex:1}
.pcard .tags{display:flex; flex-wrap:wrap; gap:6px}
.pcard .tags span{font-family:var(--mono); font-size:10px; color:var(--ink-faint); border:1px solid var(--line); border-radius:7px; padding:2px 8px}
.pcard .view{margin-top:4px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); display:inline-flex; align-items:center; gap:7px}
.pcard:hover .view .arw{transform:translateX(4px)} .view .arw{transition:transform .18s}
.pcard.big{grid-column:1/-1} .pcard.big .shot{height:176px}
.emptyc{border:1px dashed var(--line-2); border-radius:14px; padding:22px; color:var(--ink-faint); font-size:14px; background:rgba(90,200,160,.02); font-family:var(--mono)}

/* ---------------- built-with strip ---------------- */
.techrow{display:flex; flex-wrap:wrap; gap:10px}
.tech{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); padding:9px 15px; border-radius:100px;
  border:1px solid var(--line); background:rgba(90,200,160,.03); transition:.16s; letter-spacing:.02em}
.tech:hover{border-color:var(--accent); color:#d9ffe8; background:rgba(31,184,148,.07)}

/* ---------------- colophon / how it runs ---------------- */
.contact{position:relative; margin:26px 0 8px; padding:46px 34px; border-radius:22px; overflow:hidden; border:1px solid var(--line-2)}
.contact::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(0deg, rgba(31,184,148,.16), transparent 55%),
    radial-gradient(120% 90% at 50% 120%, rgba(46,230,192,.16), transparent 60%),
    linear-gradient(180deg, var(--raise), var(--void))}
.contact::after{content:""; position:absolute; left:0; right:0; bottom:0; height:52%; z-index:-1; opacity:.5;
  background:repeating-linear-gradient(90deg, rgba(31,184,148,.14) 0 2px, transparent 2px 26px);
  mask-image:linear-gradient(0deg,#000,transparent); -webkit-mask-image:linear-gradient(0deg,#000,transparent)}
.contact .cgrid{display:grid; grid-template-columns:1.3fr 1fr; gap:30px; align-items:center}
@media(max-width:760px){.contact .cgrid{grid-template-columns:1fr; gap:22px} .contact{padding:34px 20px}}
.contact h2{font-family:var(--disp); font-weight:700; font-size:clamp(28px,4.6vw,42px); letter-spacing:.01em; text-transform:uppercase; margin:0 0 12px; line-height:1.02; color:#f4f8ff}
.contact .sub{color:var(--ink-soft); margin:0 0 4px; max-width:46ch}
.contact .clist{display:flex; flex-direction:column; gap:12px; margin-bottom:4px}
.contact .clist a,.contact .clist span{display:flex; align-items:center; gap:11px; font-family:var(--mono); font-size:13.5px; color:var(--ink)}
.contact .clist svg{width:17px; height:17px; stroke:var(--accent-2); fill:none; stroke-width:1.6; flex:none}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line); margin-top:30px; padding:34px 0 60px; color:var(--ink-faint); font-size:13px}
.foot .row{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center}
.foot .wordmark{font-family:var(--disp); font-weight:700; font-size:16px; color:#eaf2ff; line-height:1}
.foot .wordmark .tld{color:var(--accent-ink)}
.foot .tagline{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
.foot a{color:var(--ink-soft)} .foot .spacer{margin-left:auto}

/* ============================================================
   ENTRY + CATEGORY BODY COMPONENTS (article pages)
   ============================================================ */
.pagehead{padding:44px 0 8px}
.pagehead .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-ink); display:block; margin-bottom:10px}
.pagehead h1{font-family:var(--disp); font-weight:700; font-size:clamp(30px,5vw,46px); letter-spacing:.01em; text-transform:uppercase; margin:0 0 12px; color:#f4f8ff; text-wrap:balance}
.pagehead p{color:var(--ink-soft); margin:0; max-width:60ch}

.entry{padding-bottom:26px}
.entry .masthead{position:relative; border-bottom:1px solid var(--line); overflow:hidden}
.entry .masthead::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(720px 400px at 84% -30%, var(--glow), transparent 60%)}
.entry .masthead .readwrap{padding-top:46px; padding-bottom:38px}
.entry .backlink{display:inline-flex; gap:7px; align-items:center; font-family:var(--mono); font-size:12px; margin-bottom:14px; color:var(--accent-ink)}
.entry .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink);
  display:inline-flex; align-items:center; gap:10px; margin:0 0 16px; padding:6px 13px; border:1px solid var(--line-2); border-radius:100px; background:rgba(31,184,148,.06)}
.entry .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 9px 1px rgba(55,224,138,.7)}
.entry h1.title{font-family:var(--disp); font-weight:700; font-size:clamp(30px,5.4vw,50px); line-height:1.02; letter-spacing:.01em; text-transform:uppercase; margin:0 0 16px; color:#f4f8ff; text-wrap:balance}
.entry .lede{font-size:18px; color:var(--ink-soft); margin:0; max-width:60ch; text-wrap:pretty}
.entry .byline{margin-top:24px; font-family:var(--mono); font-size:12px; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:8px 20px}
.entry .byline b{color:var(--accent-ink); font-weight:600}
.entry section{padding:42px 0; border-bottom:1px solid var(--line)}
.entry section:last-of-type{border-bottom:none}
.entry .part-tag{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--accent-ink); display:inline-flex; gap:9px; margin:0 0 12px}
.entry .part-tag .num{color:var(--ink-faint)}
.entry h2{font-family:var(--disp); font-weight:700; font-size:clamp(23px,4vw,31px); letter-spacing:.01em; text-transform:uppercase; line-height:1.1; margin:.1em 0 .5em; color:#f1f6ff; text-wrap:balance}
.entry h3{font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:.02em; text-transform:uppercase; margin:1.8em 0 .5em; color:var(--ink)}
.entry p{margin:0 0 1.05em; max-width:66ch; color:var(--ink)}
.entry .small{font-size:14.5px; color:var(--ink-soft)}
.entry ul.tight{margin:.4em 0 1.1em; padding-left:1.25em} .entry ul.tight li{margin:.3em 0; max-width:64ch}

.entry .term{margin:1.4em 0}
.entry p code,.entry li code,.entry td code,.callout code{background:rgba(31,184,148,.10); border:1px solid rgba(31,184,148,.22); padding:.06em .4em; border-radius:6px; font-size:.86em; color:var(--accent-ink)}

.callout{position:relative; border-radius:14px; padding:17px 19px 16px; margin:1.5em 0; border:1px solid var(--line); background:var(--glass); background-color:rgba(10,26,20,.5); backdrop-filter:blur(8px); box-shadow:var(--glass-hi)}
.callout .ctag{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; gap:8px; margin-bottom:8px}
.callout p:last-child{margin-bottom:0}
.callout.lesson{border-left:2px solid var(--accent)} .callout.lesson .ctag{color:var(--accent-ink)}
.callout.gotcha{border-left:2px solid var(--warn); background-color:var(--warn-soft)} .callout.gotcha .ctag{color:var(--warn)}
.callout.fail{border-left:2px solid var(--fail); background-color:var(--fail-soft)} .callout.fail .ctag{color:var(--fail)}
.callout.win{border-left:2px solid var(--ok); background-color:var(--ok-soft)} .callout.win .ctag{color:var(--ok)}

.tablewrap{overflow-x:auto; margin:1.4em 0; border:1px solid var(--line); border-radius:14px; box-shadow:var(--glass-hi), var(--drop)}
.entry table{border-collapse:collapse; width:100%; font-size:14.5px; background:rgba(9,20,15,.6)}
.entry th,.entry td{text-align:left; padding:11px 15px; border-bottom:1px solid var(--line); vertical-align:top}
.entry thead th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; background:rgba(31,184,148,.05)}
.entry tbody tr:last-child td{border-bottom:none}
.entry tbody tr:hover td{background:rgba(90,200,160,.03)}
.entry td.mono,.entry th.mono{font-family:var(--mono); font-size:13px; white-space:nowrap; color:var(--ink-soft)}

.facts{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:1.5em 0; box-shadow:var(--drop)}
.facts div{background:rgba(9,20,15,.72); padding:14px 16px}
.facts dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px}
.facts dd{margin:0; font-family:var(--mono); font-size:13.5px; color:var(--accent-ink); word-break:break-word}

.ladder{display:flex; flex-direction:column; gap:11px; margin:1.6em 0}
.rung{display:grid; grid-template-columns:92px 1fr; gap:17px; align-items:center; border:1px solid var(--line); border-radius:13px; padding:14px 17px; background:var(--glass); background-color:rgba(10,26,20,.5); box-shadow:var(--glass-hi)}
.rung .code{font-family:var(--mono); font-weight:600; font-size:27px; text-align:center; letter-spacing:-.02em}
.rung .desc{font-size:14.5px; color:var(--ink-soft)} .rung .desc b{color:var(--ink)}
.rung.r522{border-left:3px solid var(--fail)} .rung.r522 .code{color:var(--fail); text-shadow:0 0 18px rgba(255,111,107,.5)}
.rung.r502{border-left:3px solid var(--warn)} .rung.r502 .code{color:var(--warn); text-shadow:0 0 18px rgba(242,184,79,.45)}
.rung.r200{border-left:3px solid var(--ok)}   .rung.r200 .code{color:var(--ok); text-shadow:0 0 18px rgba(55,224,138,.5)}

.entry figure{margin:1.7em 0}
.entry figure svg{display:block; width:100%; height:auto; background:rgba(8,18,13,.7); border:1px solid var(--line); border-radius:14px; box-shadow:var(--glass-hi), var(--drop); padding:10px; color:var(--ink-soft)}
.entry figcaption{font-size:13px; color:var(--ink-faint); margin-top:10px; text-align:center; max-width:60ch; margin-left:auto; margin-right:auto}
.pillrow{display:flex; flex-wrap:wrap; gap:9px; margin:1.3em 0}
.pill{font-family:var(--mono); font-size:12px; padding:6px 13px; border-radius:100px; border:1px solid var(--line); background:rgba(90,200,160,.03); color:var(--ink-soft)}
.pill.ok{color:var(--ok); border-color:rgba(55,224,138,.35); background:rgba(55,224,138,.08)}

/* category list reuse */
.entries{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.ecard{position:relative; display:flex; flex-direction:column; gap:11px; padding:22px; border-radius:16px; border:1px solid var(--line); background:var(--glass); background-color:rgba(10,26,20,.55); box-shadow:var(--glass-hi); transition:.2s}
.ecard:hover{transform:translateY(-3px); border-color:var(--line-2); text-decoration:none; box-shadow:var(--glass-hi), 0 30px 50px -26px rgba(0,0,0,.9), 0 0 34px -10px var(--glow)}
.ecard .top{display:flex; align-items:center; gap:9px}
.chip{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; padding:4px 9px; border-radius:100px; color:var(--accent-ink); background:rgba(31,184,148,.09); border:1px solid rgba(31,184,148,.26)}
.ecard .date{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin-left:auto}
.ecard h3{font-family:var(--disp); font-weight:600; font-size:20px; letter-spacing:.015em; text-transform:uppercase; line-height:1.15; margin:0; color:var(--ink); text-wrap:balance}
.ecard p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.5}
.ecard .tags{display:flex; flex-wrap:wrap; gap:6px} .ecard .tags span{font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); border:1px solid var(--line); border-radius:7px; padding:2px 8px}

/* ============================================================
   GLOSS PASS — resting lift, top reflection line, surface sheen
   ============================================================ */
.xcard,.pcard,.ecard,.hud,.stat,.term,.tablewrap,.facts{box-shadow:var(--glass-hi), var(--drop)}
.xcard,.ecard,.hud{border-top-color:rgba(198,245,222,.18)}
/* project thumbnails get a glossy top highlight over the artwork */
.pcard{border-top:1px solid rgba(198,245,222,.16)}
.pcard .shot{background:
  linear-gradient(180deg, rgba(198,245,222,.12), transparent 32%),
  radial-gradient(120% 120% at 80% 15%, rgba(31,184,148,.22), transparent 60%),
  var(--term-bg)}
/* glossy primary buttons: bright top edge + deeper glow */
.btn.primary{box-shadow:0 12px 30px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.34)}
.btn.primary:hover{box-shadow:0 18px 40px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,.4)}
/* HUD chips + brand badge in nav get a subtle sheen */
.hud .hud-tag .d,.brand .wordmark .tld{filter:drop-shadow(0 0 8px var(--glow))}
/* stat tiles: reflective top */
.stat{border-top:1px solid rgba(198,245,222,.14)}

/* ============================================================
   RESPONSIVE HARDENING (mobile)
   ============================================================ */
/* grid/flex children must be allowed to shrink, or a wide child (the terminal
   block, a long word) blows the track past the viewport and scrolls the page. */
.hero .grid>*, .hud-row>*, .projects>*, .xgrid>*, .stats>*, .entries>*, .contact .cgrid>*{min-width:0}
.term pre, .tablewrap{max-width:100%}

/* small phones: tighter gutters + a headline that fits a 320px screen */
@media(max-width:520px){
  :root{--pad:18px}
  .hero h1{font-size:clamp(33px,8.8vw,46px)}
  .hero .sub{font-size:16.5px}
  .sec-head h2{font-size:clamp(22px,7vw,28px)}
  .stat .sv{font-size:22px}
  .foot .row{gap:8px 16px}
  .foot .spacer{margin-left:0}
}

/* nav: below ~720px the brand + links won't share a line — stack them and let
   the bar grow instead of clipping wrapped links against a fixed height. */
@media(max-width:720px){
  .nav .bar{height:auto; flex-wrap:wrap; padding-top:9px; padding-bottom:9px; gap:6px 10px}
  .brand{width:100%}
  .navlinks{margin-left:0; width:100%; gap:2px 4px; justify-content:flex-start}
  .navlinks a{padding:7px 9px}
  .nav .btn{display:none}
  .nav::after{opacity:.35}
}

/* the hero deck (globe + HUD) sits comfortably below the copy on one column */
@media(max-width:960px){
  .deck{max-width:520px; margin-inline:auto; width:100%}
  .globe{margin-top:6px}
}