/* fonts, self-hosted (SIL Open Font License, see fonts/OFL-*.txt): latin and latin-ext subsets only */
@font-face { font-family:'Cascadia Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/cascadia-mono-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Cascadia Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/cascadia-mono-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Geist'; font-style:normal; font-weight:300 600; font-display:swap; src:url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Geist'; font-style:normal; font-weight:300 600; font-display:swap; src:url(../fonts/geist-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/instrument-serif-italic-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/instrument-serif-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/instrument-serif-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/instrument-serif-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================
   AMMAAR REHMAN — ePortfolio
   design system · monochrome UI, the ascii carries color
   type: Instrument Serif (headings) · Geist (prose) · Cascadia Mono (ui + terminal + ascii)
   all three are SIL Open Font License
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg:#0a0a0a; --bg2:#050505;
  --line:#1c1c1c; --line2:#262626;
  --t1:#efefef; --t2:#9e9e9e; --t3:#7c7c7c; --t4:#5e5e5e;   /* t4: decoration only */
  --acc:#e9e3d3; --accent:#f454a6; --green:#4ADE80; --label:var(--t1); --pane-bg:#0d0d0d;
  --warn:#FFB000;
  /* radar palette (atc scope inspo) */
  --amber:#FFB000; --cyan:#4DD6E8; --mag:#E879F9; --blue:#5B8DEF; --red:#FF5252;
  --amber-dim:#a07e32; --cyan-dim:#4f8793;
  /* film-print cream (poster inspo) */
  --cream:#E8E0C9;
  --glyph-dim:#2c2c2c;
  --nav-bg:rgba(10,10,10,.82);
  --spot:rgba(255,255,255,.055);
  --mono:'Cascadia Mono', ui-monospace, Menlo, monospace;
  --sans:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1000px;
  color-scheme:dark;
}
/* paper light mode: follows the OS unless the ◐ toggle picked one */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#f4f1ea; --bg2:#ece8de; --line:#ddd7c9; --line2:#c9c1af;
    --t1:#161616; --t2:#44423d; --t3:#6b675e; --t4:#827c70;
    --acc:#2a261f; --accent:#b3206f; --green:#136f39; --warn:#8f5400; --pane-bg:#f8f6f0;
    --amber:#8a5c00; --cyan:#0b6e7c; --mag:#a63fb8; --blue:#2f5fc4; --red:#c73a3a;
    --amber-dim:#8a6312; --cyan-dim:#2d6b75; --cream:#1d1a14;
    --glyph-dim:#d3ccbc; --nav-bg:rgba(244,241,234,.85); --spot:rgba(0,0,0,.04); color-scheme:light;
  }
}
:root[data-theme="light"] {
  --bg:#f4f1ea; --bg2:#ece8de; --line:#ddd7c9; --line2:#c9c1af;
  --t1:#161616; --t2:#44423d; --t3:#6b675e; --t4:#827c70;
  --acc:#2a261f; --accent:#b3206f; --green:#136f39; --warn:#8f5400; --pane-bg:#f8f6f0;
  --amber:#8a5c00; --cyan:#0b6e7c; --mag:#a63fb8; --blue:#2f5fc4; --red:#c73a3a;
  --amber-dim:#8a6312; --cyan-dim:#2d6b75; --cream:#1d1a14;
  --glyph-dim:#d3ccbc; --nav-bg:rgba(244,241,234,.85); --spot:rgba(0,0,0,.04); color-scheme:light;
}

::selection { background:var(--t1); color:var(--bg); }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--line2); }
html { scroll-behavior:smooth; }
html, body { overflow-x:clip; }        /* nothing may widen the page on phones */
body {
  background:var(--bg); color:var(--t2);
  font-family:var(--mono); font-size:14px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s, color .4s;
}
/* the background: two ascii hands reaching for each other (js/hands.js), fixed
   behind everything. a soft vignette keeps the reading column calm */
.hands {
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.2s ease;
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0,0,0,.75) 30%, #000 75%);
  mask-image:radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0,0,0,.75) 30%, #000 75%);
}
.hands.on { opacity:1; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 22px; position:relative; z-index:1; }
a { color:var(--t1); text-decoration:none; }
[id] { scroll-margin-top:58px; }        /* anchors land below the sticky nav */
pre.art { white-space:pre; line-height:1.22; font-size:11px; font-weight:500; overflow-x:auto; }
@media (max-width:560px) { pre.art { font-size:8px; } }

/* ── a11y ── */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip {
  position:fixed; left:12px; top:-60px; z-index:300; background:var(--t1); color:var(--bg);
  padding:8px 14px; font-size:12px; transition:top .2s;
}
.skip:focus { top:12px; }
:focus-visible { outline:1px dashed var(--accent); outline-offset:3px; }

/* ── NAV ── */
.nav {
  position:sticky; top:0; z-index:10; background:var(--nav-bg);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav-inner {
  max-width:var(--maxw); margin:0 auto; padding:0 22px; height:58px;
  display:flex; align-items:center; gap:18px;
}
.nav-logo { font-weight:700; font-size:15px; letter-spacing:.5px; flex:none; }
.nav-logo span { color:var(--t3); font-weight:400; }
.nav-links {
  display:flex; gap:22px; font-size:12px; margin-left:auto; min-width:0;
  overflow-x:auto; scrollbar-width:none; white-space:nowrap;
}
.nav-links::-webkit-scrollbar { display:none; }
/* reading progress: a hairline under the nav driven by the page scroll (css only) */
@supports (animation-timeline: scroll()) {
  .nav::after {
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:linear-gradient(90deg, #5a5a5a, var(--t1) 70%, var(--accent));
    transform-origin:left; transform:scaleX(0);
    animation:progress linear both; animation-timeline:scroll(root);
  }
  @keyframes progress { to { transform:scaleX(1); } }
}
.nav-links a { color:var(--t3); transition:color .2s; position:relative; padding:4px 0; }
.nav-links a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-links a:hover, .nav-links a.on { color:var(--t1); }
.nav-links a.on::after { transform:scaleX(1); }
.theme-btn {
  flex:none; width:30px; height:30px; display:grid; place-items:center;
  background:none; border:1px solid var(--line2); color:var(--t2);
  font-size:14px; line-height:1; cursor:pointer; transition:transform .5s var(--ease), color .2s, border-color .2s;
}
.theme-btn:hover { color:var(--t1); border-color:var(--t3); transform:rotate(180deg); }
@media (max-width:680px) {
  .nav-inner { gap:12px; }
  .nav-links a { padding:14px 0; }            /* ≥24px touch targets */
  .theme-btn { width:36px; height:36px; }
  .nav-links { gap:16px; font-size:11.5px; mask-image:linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent); }
}

/* ── SECTIONS: each one is a terminal pane ── */
.label { font-size:11px; letter-spacing:3px; color:var(--t3); text-transform:uppercase; }
.wp { font-size:9px; }
.section { padding:34px 0; }
.section:first-child { padding-top:56px; }
.section-heading {                                   /* only the 404 page still uses this */
  font-family:var(--serif); font-size:clamp(34px, 5.2vw, 48px); font-weight:400;
  color:var(--t1); letter-spacing:-.01em; margin-bottom:12px; line-height:1.05;
}
.section-heading em { font-style:italic; }
.xp h3, .work-title { text-wrap:balance; }
.pane-sub, .about-text p, .xp li, .work-desc, .rack-desc { text-wrap:pretty; }
.pane {
  position:relative; background:var(--pane-bg); border:1px solid var(--line2); border-radius:10px;
  padding:34px 28px 28px;
}
.pane-title {
  position:absolute; top:-.75em; left:22px; margin:0; padding:0 10px; background:var(--bg);
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--t1);
}
.pane-title::before { content:"■ "; color:var(--accent); }
.pane-cmd { font-family:var(--mono); font-size:12.5px; color:var(--t3); margin-bottom:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pane-sub { font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--t2); max-width:600px; margin-bottom:22px; }
.win-bar {
  display:flex; align-items:center; gap:10px; height:28px; padding:0 10px;
  background:var(--bg2); border-bottom:1px solid var(--line2);
  font-family:var(--mono); font-size:11px; color:var(--t3); white-space:nowrap; overflow:hidden;
}
.win-bar .term-dots { gap:5px; flex:none; }
.win-bar .term-dots i { width:8px; height:8px; }
dl.tree > div { display:grid; grid-template-columns:104px minmax(0,1fr); gap:10px; line-height:1.9; }
dl.tree dt { font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--t1); white-space:nowrap; }
dl.tree dt::before { content:"├─ "; color:var(--t4); font-weight:400; }
dl.tree > div:last-child dt::before { content:"└─ "; }
dl.tree dd { font-family:var(--sans); font-size:14px; color:var(--t2); min-width:0; }
dl.tree dd a { color:var(--t1); border-bottom:1px dashed var(--t3); }
dl.tree dd a:hover { color:var(--accent); border-color:var(--accent); }
@media (max-width:680px) {
  .pane { padding:30px 16px 20px; border-radius:8px; }
  .pane-title { left:12px; font-size:12px; }
  dl.tree > div { grid-template-columns:86px minmax(0,1fr); }
}

/* ── HERO: a terminal window running neofetch ──
   always a night terminal, even on paper: its tokens are set locally */
.hero { padding:44px 0 56px; border-bottom:1px solid var(--line); }
.hero-links { margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.hero-links a {
  font-size:12px; color:var(--t2); border:1px solid var(--line);
  background:var(--bg2); padding:8px 16px;
  transition:color .2s, border-color .2s, translate .25s var(--ease);
}
.hero-links a:hover { color:var(--t1); border-color:var(--t3); translate:0 -2px; }
.hero-links a.primary { color:var(--t1); border-color:var(--t3); font-weight:500; }
.term {
  --bg:#0c0c0c; --bg2:#101010; --line:#222; --line2:#333;
  --t1:#ececec; --t2:#b4b4b4; --t3:#858585; --t4:#5a5a5a; --acc:#dcdcdc; --label:#f4f4f4; --accent:#FFB000; --green:#4ADE80;
  position:relative; background:var(--bg); color:var(--t2); border:1px solid #2c2c2c; border-radius:10px; overflow:hidden;
  font-family:var(--mono);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03);
}
.term-bar {
  display:flex; align-items:center; gap:14px; height:38px; padding:0 14px;
  background:#161616; border-bottom:1px solid var(--line); font-size:12px; color:var(--t3);
}
.term-dots { display:flex; gap:7px; }
.term-dots i { width:12px; height:12px; border-radius:50%; background:#ff5f57; }
.term-dots i:nth-child(2) { background:#febc2e; } .term-dots i:nth-child(3) { background:#28c840; }
.term-tab { flex:1; text-align:center; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.term-size { color:var(--t4); }
.term-body { position:relative; padding:18px 24px 20px; font-size:13.5px; line-height:1.65; }
.term-body::after {                                   /* CRT: faint scanlines and a vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
             radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35) 100%);
}
.t-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-prompt { color:var(--t1); font-weight:600; }
.t-dim { color:var(--t3); }
.t-acc { color:var(--t1); }
.t-ok { color:var(--green); }
.t-warn { color:var(--accent); }
.fetch { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:26px; align-items:center; margin:14px 0 12px; }
.orb-btn {
  display:block; width:100%; aspect-ratio:1; padding:0; border:0; background:none; cursor:pointer;
  border-radius:50%; transition:transform .6s var(--ease);
}
.orb-btn:hover { transform:scale(1.015); }
.orb-btn:active { transform:scale(.985); }
.orb-btn:focus-visible { outline-offset:-30px; }
canvas.orb { display:block; width:100%; height:100%; filter:drop-shadow(0 0 14px var(--orb-glow, rgba(214,206,188,.3))); }
.orb-hint { text-align:center; font-size:11px; color:var(--t3); margin-top:-6px; }
.t-hey { color:var(--t1); }
.t-name { font-family:var(--mono); font-size:16px; font-weight:600; line-height:1.5; color:var(--t1); margin-top:6px; }
.t-at { color:var(--accent); }
.t-rule { color:var(--t3); font-size:16px; line-height:1; }
.t-box { position:relative; border:1px solid var(--line2); padding:14px 14px 8px; margin-top:18px; }
.t-box-title {
  position:absolute; top:-.8em; left:50%; translate:-50% 0; background:var(--bg); padding:0 8px;
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--t1); white-space:nowrap;
}
.t-box dl > div { display:grid; grid-template-columns:78px minmax(0,1fr); gap:8px; font-size:12.5px; line-height:1.9; }
.t-box dt { color:var(--label); font-weight:700; white-space:nowrap; }
.t-box dt::before { content:"├─ "; color:var(--t4); font-weight:400; }
.t-box dl > div:last-child dt::before { content:"└─ "; }
.t-box dd { color:var(--t1); min-width:0; }
.t-box dd a { color:var(--t1); border-bottom:1px dashed var(--t3); }
.t-box dd a:hover { color:var(--accent); border-color:var(--accent); }
/* bars made of little squares, like a status grid */
.t-bar {
  position:relative; display:inline-block; width:64px; height:9px; margin:0 6px; vertical-align:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 6px, transparent 6px 8px);
}
.t-bar.full { background:repeating-linear-gradient(90deg, var(--t1) 0 6px, transparent 6px 8px); }
.t-bar.busy::after {                                  /* in progress: a block scans back and forth */
  content:""; position:absolute; top:0; bottom:0; left:0; width:24px;
  background:repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 8px);
  animation:busy 2.4s steps(8) infinite alternate;
}
@keyframes busy { to { left:40px; } }
.t-greet { margin-top:18px; color:var(--t2); }
.t-swatch { display:flex; gap:8px; margin-top:10px; }
.t-swatch i { width:9px; height:9px; border-radius:50%; background:#9e9e9e; }
.t-swatch i:nth-child(2) { background:#efefef; } .t-swatch i:nth-child(3) { background:#4DD6E8; } .t-swatch i:nth-child(4) { background:#E879F9; }
.t-swatch i:nth-child(5) { background:#5B8DEF; } .t-swatch i:nth-child(6) { background:#FFB000; } .t-swatch i:nth-child(7) { background:#4ADE80; } .t-swatch i:nth-child(8) { background:#FF5252; }
.t-cmds { white-space:normal; display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }
.t-cmds a { color:var(--t1); border-bottom:1px dashed var(--t3); }
.t-cmds a:hover { color:var(--accent); border-color:var(--accent); }
/* boot sequence: lines appear in order once the terminal is revealed */
.js .t-in { opacity:0; transition:opacity .35s ease; transition-delay:var(--d, 0s); }
.js .term.in .t-in { opacity:1; }
.js .t-type { display:inline-block; vertical-align:bottom; overflow:hidden; white-space:nowrap; width:0; }
.js .term.in .t-type { animation:type .5s steps(8) .45s forwards; }
@keyframes type { to { width:8ch; } }
/* a small orb keeps you company at the end of the page */
canvas.orb-mini {
  position:absolute; right:18px; top:50%; width:260px; height:260px; translate:0 -50%;
  z-index:0; pointer-events:none; opacity:.85; filter:drop-shadow(0 0 10px var(--orb-glow, rgba(214,206,188,.3)));
}
@media (max-width:820px) {
  .hero { padding:22px 0 40px; }
  .fetch { grid-template-columns:minmax(0,1fr); gap:6px; }
  .fetch-art { max-width:360px; width:100%; margin:0 auto; }
  .term-body { padding:14px 14px 16px; font-size:12.5px; }
  .term-size { display:none; }
  .t-box { padding:14px 10px 8px; }
  .t-box dl > div { grid-template-columns:78px minmax(0,1fr); font-size:11.5px; }
  .t-box dt::before { content:"├ "; }
  .t-box dl > div:last-child dt::before { content:"└ "; }
  .t-bar { width:56px; }
  @keyframes busy { to { left:32px; } }
  canvas.orb-mini { display:none; }
}

/* ── WINDOWS: working traffic lights, a dock, maximize (js/windows.js) ── */
.win-ctl { display:flex; gap:7px; flex:none; }
.pane > .win-ctl { position:absolute; top:-7px; right:18px; padding:0 8px; background:var(--bg); z-index:2; }
.wb {
  position:relative; width:12px; height:12px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:#3a3a3a; transition:background-color .2s, transform .15s;
}
.wb::after {                                         /* the glyphs appear on hover, like macOS */
  position:absolute; inset:0; display:grid; place-items:center; font:700 9px/1 var(--mono); color:rgba(0,0,0,.6); opacity:0; transition:opacity .15s;
}
@media (pointer: coarse) { .wb::before { content:""; position:absolute; inset:-6px -3px; } }   /* a 24px tap target around each 12px light */
.wb-close::after { content:"×"; } .wb-min::after { content:"–"; } .wb-max::after { content:"+"; }
.win-ctl.live .wb-close, .win-ctl:hover .wb-close { background:#ff5f57; }
.win-ctl.live .wb-min, .win-ctl:hover .wb-min { background:#febc2e; }
.win-ctl.live .wb-max, .win-ctl:hover .wb-max { background:#28c840; }
.win-ctl:hover .wb::after, .wb:focus-visible::after { opacity:1; }
.wb:active { transform:scale(.88); }
:root[data-theme="light"] .pane > .win-ctl .wb { background:#c9c1af; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .pane > .win-ctl .wb { background:#c9c1af; } }
:root[data-theme="light"] .pane > .win-ctl:hover .wb-close { background:#ff5f57; } :root[data-theme="light"] .pane > .win-ctl:hover .wb-min { background:#febc2e; } :root[data-theme="light"] .pane > .win-ctl:hover .wb-max { background:#28c840; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pane > .win-ctl:hover .wb-close { background:#ff5f57; }
  :root:not([data-theme="dark"]) .pane > .win-ctl:hover .wb-min { background:#febc2e; }
  :root:not([data-theme="dark"]) .pane > .win-ctl:hover .wb-max { background:#28c840; }
}
/* minimized: the section folds shut, and stays out of the way */
.section.folding, .hero.folding { overflow:hidden; padding-top:0 !important; padding-bottom:0 !important; }
.section.min, .hero.min { display:none; }
/* the dock */
.dock {
  position:fixed; left:50%; bottom:16px; translate:-50% 0; z-index:120; max-width:calc(100% - 24px);
  display:flex; align-items:center; gap:6px; padding:6px; overflow-x:auto; scrollbar-width:none;
  background:rgba(18,18,18,.82); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid #2e2e2e; border-radius:12px; box-shadow:0 18px 40px -16px rgba(0,0,0,.8);
  animation:dock-in .35s cubic-bezier(.2,.9,.3,1);
}
.dock[hidden] { display:none; }
@keyframes dock-in { from { translate:-50% 20px; opacity:0; } }
.dock-item, .dock-all {
  flex:none; font-family:var(--mono); font-size:12px; color:#e6e6e6; cursor:pointer; white-space:nowrap;
  background:#1c1c1c; border:1px solid #2e2e2e; border-radius:8px; padding:7px 12px;
  transition:translate .2s var(--ease), border-color .2s, color .2s;
}
.dock-item:hover { translate:0 -3px; border-color:var(--accent); }
.dock-item.pop { animation:dock-pop .5s cubic-bezier(.2,.9,.3,1.4) .45s both; }
@keyframes dock-pop { from { transform:scale(.6); } }
.dock-glyph { color:#f454a6; margin-right:7px; font-size:10px; }
.dock-all { color:#b4b4b4; border-style:dashed; }
.dock-all:hover { color:#e6e6e6; }
/* maximized: the window lifts over a blurred page */
.win-backdrop { position:fixed; inset:0; z-index:130; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.win-backdrop[hidden] { display:none; }
html.win-maxed { overflow:hidden; }
.container.has-maxed { z-index:140; }
.maxed {
  position:fixed !important; inset:clamp(8px, 3vw, 28px); z-index:140; overflow:auto;
  transform:none !important; opacity:1 !important; box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
}
.pane.maxed { padding-top:44px; }
.pane.maxed > .pane-title { position:absolute; top:14px; background:none; }
.pane.maxed > .win-ctl { top:16px; background:none; }

/* ── BOOT: vintage startup screen (js/boot.js), first visit per session ── */
#boot { display:none; }
html.booting { overflow:hidden; }
html.booting #boot {
  display:block; position:fixed; inset:0; z-index:400; background:#050505; color:#bdbdbd;
  font-family:var(--mono); font-size:clamp(11px, 1.35vw, 15px); line-height:1.55; padding:clamp(18px, 4vw, 48px);
  text-shadow:0 0 6px rgba(255,255,255,.18); animation:crt-flicker 3s steps(40) infinite;
}
#boot::before {                                        /* scanlines + curved-glass vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
             radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6) 100%);
}
.boot-log { white-space:pre-wrap; font:inherit; margin:0; max-width:62ch; }
.boot-log b { color:#f4f4f4; font-weight:700; }
.boot-log i { font-style:normal; color:#f4f4f4; }
.boot-cur { display:inline-block; width:.6em; height:1.05em; vertical-align:-.15em; background:#dcdcdc; animation:blink 1s steps(1) infinite; }
.boot-logo { position:absolute; top:clamp(18px, 4vw, 48px); right:clamp(18px, 4vw, 48px); margin:0; font:inherit; line-height:1.15; color:#f454a6; text-shadow:0 0 10px rgba(244,84,166,.5); }
.boot-foot { position:absolute; left:clamp(18px, 4vw, 48px); bottom:clamp(18px, 4vw, 40px); color:#7a7a7a; }
@keyframes crt-flicker { 0%, 100% { opacity:1; } 50% { opacity:.97; } 51% { opacity:1; } }
/* switch-off: the picture collapses to a bright line, then to a dot */
#boot.off { animation:crt-off .5s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes crt-off {
  0%   { transform:scale(1, 1); filter:brightness(1); }
  55%  { transform:scale(1, .004); filter:brightness(3); }
  100% { transform:scale(0, .004); filter:brightness(5); opacity:0; }
}
@media (max-width:560px) { .boot-logo { display:none; } }

/* ── pi's ISLAND: full-screen walkable world (js/world.js) ── */
html.in-world, html.in-world body { overflow:hidden; }
.world {
  position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh; z-index:150; background:#1f4e79;
  opacity:0; transition:opacity .6s ease;
}
.world.show { opacity:1; }
.world::after {                                   /* vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(4,8,20,.45) 100%);
}
.w-cv { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; touch-action:none; outline:none; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.w-hud {
  position:absolute; left:0; right:0; top:0; z-index:2; display:flex; align-items:center; gap:18px;
  padding:14px 18px; font-family:var(--mono); font-size:12px; color:#f4f4f4;
  background:linear-gradient(rgba(5,8,18,.7), transparent); pointer-events:none;
}
.w-title { font-weight:700; letter-spacing:1px; white-space:nowrap; }
.w-title .wp { color:#f454a6; }
.w-found { font-weight:400; color:#4DD6E8; margin-left:10px; }
.w-clock { font-weight:400; color:#FFB000; margin-left:8px; }
.w-keys { color:rgba(244,244,244,.75); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.w-exit {
  pointer-events:auto; font-family:var(--mono); font-size:12px; color:#f4f4f4; cursor:pointer;
  background:rgba(10,10,10,.75); border:1px solid rgba(244,244,244,.5); padding:7px 14px;
}
.w-exit:hover, .w-sound:hover, .w-gear:hover, .w-restore:hover { border-color:#f4f4f4; }
.w-exit, .w-restore { white-space:nowrap; }
.w-restore { pointer-events:auto; font-family:var(--mono); font-size:12px; color:#f4f4f4; cursor:pointer; background:rgba(10,10,10,.75); border:1px solid #f454a6; padding:7px 12px; }
.w-restore[hidden] { display:none; }
.w-cv:focus-visible { outline:2px solid #f454a6; outline-offset:-4px; }
.w-dialog a:focus-visible, .w-set :focus-visible, .w-pause button:focus-visible { outline:2px solid #f454a6; outline-offset:2px; }
.w-hud button:focus-visible { outline:2px solid #f454a6; outline-offset:2px; }
/* the title card, for a moment, as you land */
.w-card {
  position:absolute; left:50%; top:42%; translate:-50% -50%; z-index:5; display:flex; flex-direction:column; align-items:center; gap:6px; width:max-content; max-width:calc(100vw - 32px);
  padding:18px 26px; background:rgba(8,8,10,.82); border:2px solid #f4f4f4; box-shadow:4px 4px 0 rgba(0,0,0,.5);
  color:#efefef; font-family:var(--mono); font-size:13px; text-align:center; pointer-events:none;
  animation:w-card 2.2s ease forwards;
}
.w-card[hidden] { display:none; }
.w-pause {
  position:absolute; inset:0; z-index:7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(4,6,12,.62); color:#efefef; font-family:var(--mono); font-size:13px;
}
.w-pause[hidden] { display:none; }
/* the eight log pips in the hud */
.w-pips { display:inline-flex; gap:3px; vertical-align:middle; margin-right:2px; }
.w-pips i { display:inline-block; width:7px; height:7px; border:1px solid #4DD6E8; }
.w-pips i.on { background:#4DD6E8; }
.w-pips i.pop { animation:w-pip .6s var(--ease); }
@keyframes w-pip { 0% { scale:1; } 35% { scale:1.9; background:#fff; } 100% { scale:1; } }
/* the credits roll, then the contact card */
.w-credits { position:absolute; inset:0; z-index:8; overflow:hidden; background:rgba(3,4,8,.97); color:#efefef; font-family:var(--mono); outline:none; }
.w-credits[hidden] { display:none; }
.w-roll { position:absolute; left:0; right:0; top:100%; text-align:center; font-size:14px; line-height:2.1; animation:w-roll 16s linear forwards; }
.w-roll .w-roll-h { font-size:20px; letter-spacing:2px; font-weight:700; }
.w-roll .w-roll-k { color:#8a8a8a; font-size:11px; letter-spacing:2px; text-transform:uppercase; }
@keyframes w-roll { to { transform:translateY(calc(-100% - 100vh)); } }
.w-contact { position:absolute; left:50%; top:50%; translate:-50% -50%; width:min(460px, calc(100% - 32px)); display:none; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:22px; background:#0a0a0a; border:2px solid #f4f4f4; box-shadow:4px 4px 0 rgba(0,0,0,.5); }
.w-cred-end .w-roll { display:none; }
.w-cred-end .w-contact { display:flex; animation:w-pop .25s var(--ease); }
.w-contact b { font-size:18px; letter-spacing:1px; }
.w-contact p { margin:0; font-family:var(--sans); font-size:15px; color:#cfcfcf; }
.w-contact .w-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.w-contact a, .w-contact button { font-family:var(--mono); font-size:12px; color:#efefef; border:1px solid #5e5e5e; padding:7px 12px; background:#141414; cursor:pointer; }
.w-contact a:hover, .w-contact button:hover { border-color:#efefef; }
.w-contact :focus-visible { outline:2px solid #f454a6; outline-offset:2px; }
.w-snd-chip { position:absolute; left:50%; top:62px; translate:-50% 0; z-index:4; font-family:var(--mono); font-size:12px; color:#f4f4f4; cursor:pointer; background:#0a0a0a; border:1px solid #f454a6; padding:7px 12px; }
.w-snd-chip[hidden] { display:none; }
.w-toast { position:absolute; left:50%; top:98px; translate:-50% 0; z-index:5; font-family:var(--mono); font-size:12px; color:#0a0a0a; background:#FFB000; border:2px solid #0a0a0a; box-shadow:3px 3px 0 rgba(0,0,0,.45); padding:7px 12px; pointer-events:none; white-space:nowrap; }
.w-toast[hidden] { display:none; }
.w-toast-in { animation:w-pop .3s var(--ease); }
.w-pause b { font-size:18px; letter-spacing:3px; text-transform:uppercase; }
.w-pause .w-lm { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; width:min(520px, calc(100% - 32px)); }
.w-pause .w-lm button { text-align:left; border-color:#5e5e5e; }
.w-pause .w-lm button[data-found="1"]::after { content:" ✓"; color:#4DD6E8; }
@media (max-width:520px) { .w-pause .w-lm { grid-template-columns:1fr; } }
.w-pause .w-ctl { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; max-width:min(520px, calc(100% - 32px)); font-size:12px; }
.w-pause .w-ctl[hidden] { display:none; }
.w-pause .w-ctl dt { color:#9a9a9a; } .w-pause .w-ctl dd { margin:0; }
.w-map { position:absolute; inset:0; z-index:7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; background:rgba(4,6,12,.86); color:#efefef; font-family:var(--mono); font-size:12px; outline:none; overflow:auto; }
.w-map[hidden] { display:none; }
.w-map-top { display:flex; align-items:center; justify-content:space-between; gap:12px; width:min(900px, 100%); }
.w-map-top b { letter-spacing:2px; text-transform:uppercase; font-size:13px; }
.w-map canvas { image-rendering:pixelated; border:2px solid #f4f4f4; box-shadow:4px 4px 0 rgba(0,0,0,.5); cursor:pointer; max-width:100%; }
.w-map .w-lm { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; width:min(900px, 100%); }
@media (max-width:760px) { .w-map .w-lm { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.w-map button { font-family:var(--mono); font-size:12px; color:#f4f4f4; cursor:pointer; background:#0a0a0a; border:1px solid #5e5e5e; padding:7px 10px; text-align:left; }
.w-map button[disabled] { color:#6a6a6a; cursor:default; }
.w-map button[data-found="1"]::after { content:" ✓"; color:#4DD6E8; }
.w-map button:focus-visible { outline:2px solid #f454a6; outline-offset:2px; }
.w-pause .w-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.w-pause button { font-family:var(--mono); font-size:12px; color:#f4f4f4; cursor:pointer; background:#0a0a0a; border:1px solid #f4f4f4; padding:8px 14px; }
.w-pause button:focus-visible { outline:2px solid #f454a6; outline-offset:2px; }
.w-card b { font-size:18px; letter-spacing:2px; }
.w-card .w-card-k { color:#9a9a9a; font-size:11px; margin-top:4px; }
.w-card.w-card-stay { animation:w-pop .25s var(--ease); pointer-events:auto; }
.w-card.w-card-stay .w-card-k { display:none; }
.w-card-go { display:flex; gap:10px; margin-top:10px; }
.w-card-go[hidden] { display:none; }
.w-card-go button { font-family:var(--mono); font-size:13px; color:#f4f4f4; cursor:pointer; background:#141414; border:1px solid #f4f4f4; padding:10px 16px; }
.w-card-go button:first-child { border-color:#f454a6; }
.w-tour { pointer-events:auto; font-family:var(--mono); font-size:12px; color:#f4f4f4; cursor:pointer; white-space:nowrap; background:rgba(10,10,10,.75); border:1px solid rgba(244,244,244,.5); padding:7px 12px; }
.w-tour:hover { border-color:#f4f4f4; }
.w-tour[aria-pressed="true"] { border-color:#f454a6; }
@keyframes w-card { 0% { opacity:0; } 12% { opacity:1; } 72% { opacity:1; } 100% { opacity:0; } }
.w-gear[aria-expanded="true"] { border-color:#f4f4f4; background:#1a1a1a; }
.w-sound, .w-gear {
  pointer-events:auto; font-family:var(--mono); font-size:12px; color:#f4f4f4; cursor:pointer; white-space:nowrap;
  background:rgba(10,10,10,.75); border:1px solid rgba(244,244,244,.5); padding:7px 12px;
}
.w-sound[aria-pressed="false"] { color:#9a9a9a; }
.w-debug { position:absolute; left:8px; bottom:8px; z-index:9; margin:0; max-width:min(560px, calc(100vw - 16px)); max-height:46vh; overflow:hidden; padding:8px 10px; background:rgba(0,0,0,.78); color:#b8f5c0; font:11px/1.45 "Cascadia Mono", ui-monospace, monospace; white-space:pre-wrap; word-break:break-all; pointer-events:none; border:1px solid #2a2a2a; }
/* the island's settings: sound levels and comfort switches, top right under the hud */
.w-set {
  position:absolute; top:58px; right:18px; z-index:6; width:min(300px, calc(100% - 24px)); max-height:calc(100% - 80px); overflow:auto;
  background:#0a0a0a; color:#efefef; border:2px solid #f4f4f4; box-shadow:4px 4px 0 rgba(0,0,0,.5);
  padding:14px 16px 16px; font-family:var(--mono); font-size:12px; animation:w-pop-r .18s var(--ease);
}
.w-set[hidden] { display:none; }
@keyframes w-pop-r { from { opacity:0; translate:0 -6px; } }
.w-set h3 { margin:0 0 10px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#e9e3d3; font-weight:700; }
.w-set h4 { margin:14px 0 6px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#8a8a8a; font-weight:400; }
.w-set label { display:grid; grid-template-columns:78px 1fr 34px; align-items:center; gap:8px; margin:6px 0; }
.w-set label.w-chk { grid-template-columns:18px 1fr; }
.w-set input[type=range] { width:100%; accent-color:#f454a6; }
.w-set input[type=checkbox] { accent-color:#f454a6; width:14px; height:14px; margin:0; }
.w-set output { text-align:right; color:#9a9a9a; }
.w-set .w-row { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.w-set button { font-family:var(--mono); font-size:12px; color:#f4f4f4; cursor:pointer; background:#141414; border:1px solid #5e5e5e; padding:6px 10px; }
.w-set button:hover { border-color:#f4f4f4; }
.w-set .w-note { color:#7c7c7c; font-size:11px; margin-top:8px; line-height:1.5; }
.w-dialog {
  position:fixed; left:50%; bottom:22px; top:auto; right:auto; margin:0; max-width:none; max-height:calc(100% - 90px); overflow:auto;
  translate:-50% 0; z-index:3; width:min(640px, calc(100% - 28px));
  background:#0a0a0a; color:#efefef; border:2px solid #f4f4f4; box-shadow:4px 4px 0 rgba(0,0,0,.5);
  padding:16px 20px 14px; font-family:var(--mono);
  animation:w-pop .25s var(--ease);
}
@keyframes w-pop { from { translate:-50% 12px; opacity:0; } }
.w-dialog[hidden] { display:none; }
.w-dialog:focus { outline:none; }
.w-dialog:focus-visible { outline:2px solid #f454a6; outline-offset:2px; }
.w-dialog::backdrop { background:transparent; }
.w-name { margin:0; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#e9e3d3; margin-bottom:6px; }
.w-text { font-family:var(--sans); font-size:15px; line-height:1.6; min-height:3.2em; }
.w-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.w-links:empty { display:none; }
.w-links a { font-size:12px; color:#efefef; border:1px solid #5e5e5e; padding:6px 12px; }
.w-links a:hover { border-color:#efefef; }
.w-more { position:absolute; right:14px; bottom:8px; font-size:10px; color:#7c7c7c; animation:blink 1.2s steps(1) infinite; }
@media (max-width:680px) {
  .w-keys { display:none; }
  .w-hud { justify-content:space-between; gap:8px; padding:12px; }
  .w-title { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .w-clock { display:none; }
  .w-sound-l { display:none; }
  .w-text { font-size:14px; }
}
/* the cave terminal on the island */
.w-term {
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:4; width:min(680px, calc(100% - 24px)); height:min(440px, calc(100% - 120px));
  display:flex; flex-direction:column; background:#070807; color:#d6dccf; border:2px solid #f4f4f4; box-shadow:4px 4px 0 rgba(0,0,0,.5), 0 0 60px rgba(74,222,128,.12);
  font-family:var(--mono); font-size:13px; line-height:1.5; animation:w-term-in .22s var(--ease);
}
.w-term[hidden] { display:none; }
@keyframes w-term-in { from { opacity:0; scale:.97; } }
.w-term::after {                                  /* scanlines */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.18) 2px 3px);
}
.w-term-bar { display:flex; justify-content:space-between; align-items:center; padding:6px 10px 6px 14px; border-bottom:1px solid #2a2a2a; color:#8a8f86; font-size:11px; letter-spacing:1px; }
.w-term-x { background:none; border:1px solid #444; color:#d6dccf; font:inherit; font-size:14px; line-height:1; padding:2px 8px; cursor:pointer; }
.w-term-x:hover { border-color:#f4f4f4; }
.w-term-out { flex:1; overflow-y:auto; padding:10px 14px 4px; white-space:pre-wrap; overflow-wrap:anywhere; scrollbar-width:thin; }
.w-term-line.cmd { color:#f4f4f4; }
.w-term-line.dim { color:#7c8378; }
.w-term-line.err { color:#ff6b6b; }
.w-term-line.ok, .w-term-line.hi { color:#4ADE80; }
.w-term-row { display:flex; gap:8px; align-items:center; padding:4px 14px 12px; }
.w-term-ps { color:#4ADE80; white-space:nowrap; }
.w-term-in { flex:1; min-width:0; background:none; border:0; outline:0; color:#f4f4f4; font:inherit; caret-color:#FFB000; padding:2px 0; }
@media (max-width:680px) { .w-term { font-size:12px; height:calc(100% - 140px); top:calc(50% - 30px); } }
canvas.warp { position:fixed; inset:0; width:100vw; height:100vh; z-index:160; pointer-events:none; }

/* ── REVEAL ──
   without js everything is simply visible; html.js hides .rv until
   js/site.js marks it .in (hero on load, the rest on scroll) */
.js .rv {
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0s);
}
.js .rv.in { opacity:1; transform:none; }
.js .section-heading.rv { transform:none; }
/* section headings rise word by word out of a mask */
.section-heading .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .06em .1em 0; margin-bottom:-.1em; }
.js .section-heading .w > span {
  display:inline-block; transform:translateY(110%);
  transition:transform 1s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--wi) * 80ms + var(--d, 0s) + .05s);
}
.js .section-heading.in .w > span, .js .in .section-heading .w > span { transform:none; }

/* each section pane has its own accent, like the first design's dividers */
#about { --accent:var(--amber); } #skills { --accent:var(--cyan); } #experience { --accent:var(--green); }
#projects { --accent:var(--mag); } #education { --accent:var(--blue); } #contact { --accent:var(--red); }
.pane-cmd .t-prompt, .stack-cmd .t-prompt, .prompt-line .t-prompt { color:var(--accent); }
dl.tree dt::before { color:var(--accent); opacity:.7; }
.pane .t-box-title { color:var(--accent); }

/* ── ABOUT ── */
.about-grid { display:grid; grid-template-columns:210px minmax(0,1fr); gap:34px; align-items:start; }
@media (max-width:820px) { .about-grid { grid-template-columns:minmax(0,1fr); } .about-photo { max-width:240px; } }
.about-photo { position:relative; border:1px solid var(--line2); border-radius:8px; overflow:hidden; background:var(--bg2); cursor:crosshair; }
.about-photo img { display:block; width:100%; height:auto; aspect-ratio:720/707; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:opacity .45s ease; }
/* hover: the photo decodes into terminal ascii (js/face.js) */
.face-ascii { position:absolute; left:0; pointer-events:none; opacity:0; background:#0b0b0b; transition:opacity .35s ease; }
.about-photo.ascii .face-ascii { opacity:1; }
.about-photo.ascii img { opacity:.08; }
.about-photo figcaption { font-family:var(--mono); font-size:11px; color:var(--t3); padding:7px 10px; border-top:1px solid var(--line2); }
.about-text p { margin-bottom:16px; font-family:var(--sans); font-size:15.5px; line-height:1.65; color:var(--t2); }
.about-text b { color:var(--t1); font-weight:500; }
.about-text a { border-bottom:1px dashed var(--t3); }
.about-text a:hover { border-color:var(--accent); }
.about-text dl.tree { margin-top:20px; padding-top:16px; border-top:1px dashed var(--line2); }

/* ── SKILLS: terminal tabs over ls output ── */
.stack-tabs { display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line2); margin:0 0 16px; }
.stack-tabs button {
  font-family:var(--mono); font-size:12px; padding:8px 14px; cursor:pointer; margin-bottom:-1px;
  background:none; color:var(--t3); border:1px solid transparent; border-radius:6px 6px 0 0; transition:color .2s;
}
.stack-tabs button:hover { color:var(--t1); }
.stack-tabs button.on { color:var(--t1); background:var(--bg2); border-color:var(--line2); border-bottom-color:var(--bg2); box-shadow:inset 0 2px 0 var(--accent); }
.stack-cmd { font-family:var(--mono); font-size:12.5px; color:var(--t3); margin-bottom:12px; }
.stack-chips { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:4px 22px; min-height:80px; align-content:start; }
.stack-chips span {
  font-family:var(--mono); font-size:13px; color:var(--t1); padding:2px 0;
  animation:chip-in .45s var(--ease) both; animation-delay:calc(var(--i, 0) * 22ms);
}
.stack-chips .grp { grid-column:1 / -1; color:var(--t3); margin-top:10px; }
.stack-chips .grp:first-child { margin-top:0; }
.stack-chips .grp::after { content:"/"; }
@keyframes chip-in { from { opacity:0; translate:0 6px; } }

/* ── EXPERIENCE: a career log ── */
.xp { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; padding:20px 0; border-bottom:1px dashed var(--line2); }
.xp:first-child { padding-top:4px; }
.xp:last-child { border-bottom:none; padding-bottom:0; }
@media (max-width:680px) { .xp { grid-template-columns:minmax(0,1fr); gap:6px; } }
.xp-when { font-family:var(--mono); font-size:12px; color:var(--t1); letter-spacing:.5px; line-height:1.9; }
.xp-when .where { color:var(--t3); }
.xp-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:8px; vertical-align:1px; }
.xp-dot.live { animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow:0 0 0 0 rgba(74,222,128,.5); } 50% { box-shadow:0 0 0 5px rgba(74,222,128,0); } }
.xp h3 { font-family:var(--mono); font-size:16px; color:var(--t1); font-weight:700; }
.xp .role { font-family:var(--mono); font-size:12.5px; color:var(--t3); margin-bottom:10px; }
.xp .role-2 { margin-top:14px; }
.xp ul { list-style:none; }
.xp li { font-family:var(--sans); font-size:14.5px; line-height:1.6; color:var(--t2); padding-left:18px; position:relative; margin-bottom:6px; }
.xp li::before { content:"›"; position:absolute; left:2px; top:-.05em; color:var(--accent); font-family:var(--mono); }

/* ── PROJECTS: each card is a small window ── */
.work-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
@media (max-width:820px) { .work-grid { grid-template-columns:minmax(0,1fr); } }
.work-item {
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  border:1px solid var(--line2); border-radius:8px; background:var(--bg2);
  transition:border-color .3s, translate .35s var(--ease);
}
.work-item::before {                                   /* spotlight that follows the pointer (--x/--y from js/site.js) */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s; z-index:1;
  background:radial-gradient(380px circle at var(--x, 50%) var(--y, 0%), var(--spot), transparent 65%);
}
.work-item:hover { border-color:var(--t4); translate:0 -3px; }
.work-item:hover::before { opacity:1; }
.work-img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:left top; border-bottom:1px solid var(--line2); filter:grayscale(1) brightness(.92); transition:filter .5s ease; }
.work-item:hover .work-img { filter:grayscale(0) brightness(1); }
.work-item.no-img .work-img { display:none; }
.work-body { display:flex; flex-direction:column; flex:1; padding:16px 18px 18px; }
.work-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.work-type { font-family:var(--mono); font-size:11px; color:var(--t3); }
.work-title { font-family:var(--mono); color:var(--t1); font-size:16px; font-weight:700; margin-bottom:8px; }
.work-desc { font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--t2); margin-bottom:14px; flex:1; }
.work-stack { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.work-stack span { font-family:var(--mono); font-size:10.5px; color:var(--t3); border:1px solid var(--line2); border-radius:4px; padding:2px 7px; }
.work-links { display:flex; gap:16px; font-family:var(--mono); font-size:12px; }
.work-links a { color:var(--t1); border-bottom:1px dashed var(--t3); }
.work-links a:hover { color:var(--accent); border-color:var(--accent); }
/* status tags: pink means running right now */
.status { font-family:var(--mono); font-size:10.5px; letter-spacing:1px; white-space:nowrap; padding:1px 7px; border:1px solid var(--line2); border-radius:3px; color:var(--t2); }
.status-live { color:var(--green); border-color:currentColor; }
.status-live::before { content:"● "; animation:blink 1.6s steps(1) infinite; }
.status-shipped { color:var(--cyan); border-color:currentColor; }
.status-active { color:var(--amber); border-color:currentColor; }
.rack-head { margin-top:30px; }
.rack { border-top:1px dashed var(--line2); }
.rack-row {
  display:grid; grid-template-columns:92px minmax(0,200px) minmax(0,1fr) auto; gap:16px; align-items:baseline;
  padding:11px 6px; border-bottom:1px dashed var(--line2); transition:background-color .2s;
}
.rack-row:hover { background:var(--bg2); }
.rack-row:hover .rack-title { color:var(--accent); }
.rack-perm { font-family:var(--mono); font-size:12px; color:var(--t4); }
.rack-title { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--t1); transition:color .2s; overflow-wrap:anywhere; }
.rack-desc { font-family:var(--sans); font-size:13.5px; line-height:1.55; color:var(--t2); }
@media (max-width:680px) {
  .rack-row { grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; }
  .rack-perm { display:none; }
  .rack-desc { grid-column:1 / -1; }
  .rack-row .status { grid-row:1; grid-column:2; }
}

/* ── EDUCATION: the same boxes as the hero readout ── */
.edu-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 22px; }
@media (max-width:820px) { .edu-grid { grid-template-columns:minmax(0,1fr); } }
.pane .t-box-title { background:var(--pane-bg); }
.pane .t-box dl > div { grid-template-columns:96px minmax(0,1fr); }
.pane .t-box dd { font-size:13px; }
.pane .t-box .status { margin-left:6px; }

/* ── CONTACT ── */
.prompt-line { margin:4px 0 22px; font-family:var(--mono); font-size:15px; overflow-wrap:anywhere; color:var(--t2); position:relative; z-index:1; }
.prompt-line a { color:var(--t1); font-weight:700; border-bottom:1px dashed var(--t3); padding-bottom:1px; }
.prompt-line a:hover { color:var(--accent); border-color:var(--accent); }
.copy-btn {
  font-family:var(--mono); font-size:11px; letter-spacing:1px; vertical-align:2px; margin-left:10px;
  background:var(--bg2); color:var(--t3); border:1px solid var(--line2); border-radius:4px; padding:4px 10px; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.copy-btn:hover { color:var(--t1); border-color:var(--t3); }
.copy-btn.done { color:var(--accent); border-color:var(--accent); }
.cursor { display:inline-block; width:8px; height:15px; background:var(--t1); vertical-align:-2px; animation:blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.contact-rows { position:relative; z-index:1; max-width:520px; }

/* ── FOOTER ── */
.footer { padding:26px 0 44px; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 20px; font-family:var(--mono); font-size:11.5px; color:var(--t3); }
.footer-inner b { color:var(--t2); font-weight:600; }
.footer-inner a { color:var(--t2); border-bottom:1px dashed var(--t4); }
.footer-inner a:hover { color:var(--accent); border-color:var(--accent); }
.reboot-btn {
  font-family:var(--mono); font-size:12px; color:var(--t1); background:var(--bg2); cursor:pointer;
  border:1px solid var(--line2); border-radius:6px; padding:8px 16px; transition:color .2s, border-color .2s;
}
.reboot-btn:hover { color:var(--accent); border-color:var(--accent); }

/* ── THEME SWITCH: a circle wipes out from the ◐ button ── */
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-new(root) { animation:wipe .6s var(--ease); }
@keyframes wipe { from { clip-path:circle(0 at var(--vx, 100%) var(--vy, 0)); } to { clip-path:circle(150% at var(--vx, 100%) var(--vy, 0)); } }

/* ── PRINT: a clean one-pager for anyone printing the site ── */
@media print {
  :root { --bg:#fff; --bg2:#fff; --line:#ccc; --line2:#bbb; --t1:#000; --t2:#222; --t3:#444; --t4:#777; --cream:#000; --acc:#136f39; --warn:#8f5400; --amber-dim:#6b4a00; --cyan-dim:#0b5560; }
  .hands, .world, .warp, .dock, .win-backdrop, .win-ctl, .fetch-art, .term-bar, canvas.orb-mini, .nav, .skip, .theme-btn, .copy-btn, .cursor, .stack-tabs, .stack-cmd, .pane-cmd, .win-bar, .reboot-btn, .work-img, .hero-links { display:none !important; }
  .js .rv, .js .section-heading .w > span { opacity:1 !important; transform:none !important; }
  .section { padding:18px 0; break-inside:avoid-page; }
  .hero { padding:0 0 12px; }
  .section.min, .hero.min { display:block !important; }
  .term { border:none; box-shadow:none; background:none; } .term-body::after { display:none; }
  .fetch { grid-template-columns:1fr; }
  .work-item, .t-box, .pane, .xp { break-inside:avoid; }
  .contact-rows a::after { content:" (" attr(href) ")"; font-size:10px; color:#555; }
}

/* ── REDUCED MOTION: everything visible, nothing drifts ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .js .rv, .js .section-heading .w > span { opacity:1; transform:none; transition:none; }
  .stack-chips span, .nav::after, .xp-dot.live, .status-live::before { animation:none; }
  .nav::after { display:none; }
  ::view-transition-new(root) { animation:none; }
  *, *::before, *::after { transition-duration:.01ms !important; }
}

/* ── the 404 page ── */
.lost { min-height:100vh; display:grid; place-items:center; padding:40px 0; }
.lost pre { font-size:clamp(7px, 2.4vw, 13px); line-height:1.15; color:var(--t1); font-weight:700; }
.lost pre i { color:var(--glyph-dim); font-style:normal; }
.lost .section-heading { margin-top:28px; }
.lost p { font-family:var(--sans); font-size:15px; color:var(--t2); max-width:460px; }
.lost .hero-links { margin-top:24px; }
.lost .lost-red { color:var(--red); }
.lost .lost-hot { color:#E879F9; }

/* github links switched off (js/head.js): hide the repo buttons, and links left as plain text read as text */
.no-gh [data-gh="hide"] { display:none !important; }
.no-gh a.gh-off { cursor:default; text-decoration:none; }
.no-gh .work-links:not(:has(a:not([data-gh="hide"]))) { display:none; }