/* =========================================================================
   William G. Lewis — portfolio
   Design plan — "Systems Playground"
   -----------------------------------------------------------------------
   Thesis   The site itself behaves like a system: identity → role →
            architecture → projects → capabilities → resume, each section
            a distinct "scene," connected by one interaction language
            (an index drives a stage; a route lights up; a mode switches).
            Color is meaning, not decoration — it shows up when something
            is active, not at rest.
   Type     Archivo pushed hard at display scale for the few moments that
            deserve it (name, project titles, year marks). IBM Plex Sans
            for reading. IBM Plex Mono only for real technical metadata.
   Motion   One pointer-reactive hero system, one pinned scroll story in
            the architecture section, one index-driven project stage.
            Everything else stays quiet. Reduced motion gets static,
            legible fallbacks everywhere.
   ========================================================================= */

/* ------------------------------ tokens ------------------------------ */
:root {
  --bg:        #090D13;
  --bg-1:      #050709;
  --bg-2:      #0C121A;
  --panel:     #121927;
  --panel-2:   #17202F;
  --border:      rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.18);
  --text:      #F3F6F9;
  --text-2:    #B7C1CE;
  --text-dim:  #78828F;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 48px -24px rgba(0,0,0,.7);

  /* signal: shows up only when a system is active — not ambient */
  --signal:      #45D7FF;
  --signal-rgb:  69 215 255;
  --signal-on:   #051419;
  --amber:       #FFB454;
  --amber-rgb:   255 180 84;
  --teal:        #33D6B0;
  --teal-rgb:    51 214 176;
  --clay:        #FF6B5B;
  --clay-rgb:    255 107 91;
  --violet:      #B49BFF;
  --violet-rgb:  180 155 255;

  --idx-bright:     #F2A93B;
  --idx-deep:       #8A5605;
  --idx-bright-rgb: 242 169 59;
  --idx-deep-rgb:   138 90 5;
  --idx:     var(--idx-bright);
  --idx-rgb: var(--idx-bright-rgb);

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shell: 1280px;
  --pad: clamp(1.15rem, 4vw, 3rem);
  --r: 4px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        #F3F5F8; --bg-1: #FFFFFF; --bg-2: #EAEDF2;
  --panel:     #FFFFFF; --panel-2: #F5F7FA;
  --border:      rgba(10,16,24,.10);
  --border-strong: rgba(10,16,24,.22);
  --text:      #0B0F15; --text-2: #3C4552; --text-dim: #737E8C;
  --shadow: 0 1px 2px rgba(10,16,24,.05), 0 20px 40px -22px rgba(10,16,24,.18);
  --signal:     #0E7EA8; --signal-rgb: 14 126 168; --signal-on: #F5FBFD;
  --amber: #B36A17; --amber-rgb: 179 106 23;
  --teal: #128069; --teal-rgb: 18 128 105;
  --clay: #C43A2A; --clay-rgb: 196 58 42;
  --violet: #6B4FCC; --violet-rgb: 107 79 204;
  --idx: var(--idx-deep); --idx-rgb: var(--idx-deep-rgb);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ------------------------------ base ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.6rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: color .3s ease, background-color .3s ease;
}
@media (hover: hover) and (pointer: fine) { body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } }

h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  letter-spacing: -.01em; line-height: 1.03; text-wrap: balance; margin: 0;
}
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px; }
::selection { background: rgb(var(--signal-rgb) / .3); }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--panel); color: var(--text); padding: .7rem 1rem; border: 1px solid var(--signal); font-family: var(--font-mono); font-size: .8rem; }
.skip:focus { left: 1rem; top: 1rem; }

.tag { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); display: inline-flex; align-items: center; gap: .55rem; }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); flex: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.section { padding-block: clamp(3.4rem, 8vw, 6rem); position: relative; }
.section-head { display: flex; flex-direction: column; gap: .8rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 42rem; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.section-head .lede { color: var(--text-2); font-size: 1.02rem; max-width: 60ch; }

.panel { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }

/* ---- buttons: a custom clipped-corner shape, not a capsule ---- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  padding: .85rem 1.4rem .85rem 1.2rem;
  border: 1px solid var(--border-strong);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  background: transparent; color: var(--text); text-decoration: none; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .18s cubic-bezier(.2,.8,.3,1.2);
}
.btn:hover { border-color: var(--signal); color: var(--signal); }
.btn--primary { background: var(--signal); border-color: var(--signal); color: var(--signal-on); font-weight: 700; }
.btn--primary:hover { color: var(--signal-on); filter: brightness(1.08); box-shadow: 0 8px 26px -10px rgb(var(--signal-rgb) / .6); }
.btn--ghost:hover { background: rgb(var(--signal-rgb) / .08); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--sm { padding: .6rem 1.05rem .6rem .85rem; font-size: .82rem; }

.link { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: color .18s ease, text-decoration-color .18s ease; }
.link:hover { color: var(--signal); text-decoration-color: var(--signal); }

/* ------------------------------ custom cursor ------------------------------ */
.cursor { position: fixed; z-index: 300; top: 0; left: 0; pointer-events: none; will-change: transform; opacity: 0; transition: opacity .2s ease; }
.cursor.is-on { opacity: 1; }
.cursor__ring {
  position: absolute; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid var(--border-strong); border-radius: 50%;
  display: grid; place-items: center;
  transition: width .22s cubic-bezier(.2,.8,.2,1), height .22s cubic-bezier(.2,.8,.2,1), margin .22s cubic-bezier(.2,.8,.2,1), border-color .2s ease, background-color .2s ease;
}
.cursor__dot { position: absolute; top: 0; left: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--text); transition: opacity .2s ease; }
.cursor__label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); opacity: 0; transition: opacity .15s ease; white-space: nowrap; }
.cursor.is-active .cursor__ring { width: 68px; height: 68px; margin: -34px 0 0 -34px; border-color: var(--signal); background: rgb(var(--signal-rgb) / .08); }
.cursor.is-active .cursor__dot { opacity: 0; }
.cursor.is-active .cursor__label { opacity: 1; }
.cursor__thumb { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; opacity: 0; transition: opacity .18s ease; }
.cursor.is-project .cursor__thumb { opacity: 1; }
.cursor.is-project .cursor__ring { border-color: var(--amber); }
.cursor.is-project .cursor__label { color: var(--amber); }
.cursor__thumb svg { width: 100%; height: 100%; color: var(--text); }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor { display: none; } }

/* ------------------------------ toast (easter egg) ------------------------------ */
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 12px); z-index: 250; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); background: var(--panel-2); border: 1px solid var(--signal); padding: .7rem 1.1rem; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------ instrument bar ------------------------------ */
.bar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--border); }
.bar__in { display: flex; align-items: center; gap: 1rem; height: 3.6rem; }
.bar__mark { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 800; font-stretch: 120%; font-size: 1rem; text-decoration: none; flex: none; color: var(--text); cursor: pointer; background: none; border: 0; padding: 0; }
.bar__mark i { width: 9px; height: 9px; display: block; background: var(--text-dim); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); flex: none; transition: background-color .2s ease, box-shadow .2s ease; }
.bar__mark:hover i { background: var(--signal); box-shadow: 0 0 10px rgb(var(--signal-rgb) / .7); }
.bar__nav { display: flex; gap: .1rem; margin-left: auto; }
.bar__nav a { font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--text-dim); text-decoration: none; padding: .5rem .7rem; transition: color .18s ease; }
.bar__nav a:hover { color: var(--text); }
.bar__nav a[aria-current="true"] { color: var(--signal); }
.bar__tools { display: flex; align-items: center; gap: .45rem; flex: none; }
.icon-btn { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; padding: 0; transition: border-color .18s ease, color .18s ease; }
.icon-btn:hover { border-color: var(--signal); color: var(--signal); }
.icon-btn svg { width: 16px; height: 16px; }
.bar__progress { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--signal); width: 0; transition: width .1s linear; }
@media (max-width: 980px) { .bar__nav { display: none; } }

/* ------------------------------ hero: asymmetric split ------------------------------ */
.hero { position: relative; min-height: min(100vh, 940px); display: flex; align-items: center; padding-block: 5.5rem 2rem; overflow: hidden; background: radial-gradient(120% 90% at 15% 8%, rgb(var(--signal-rgb) / .09), transparent 55%), var(--bg); }
@media (max-width: 980px) { .hero { min-height: 0; padding-block: 6.5rem 3rem; } }
.hero__grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(1rem, 4vw, 3rem); align-items: center; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__left { display: grid; gap: 1.1rem; position: relative; z-index: 2; }
.hero__kicker { display: flex; align-items: center; gap: .55rem; }
.hero__kicker i { background: var(--signal); box-shadow: 0 0 8px rgb(var(--signal-rgb) / .7); }

.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5.4rem); font-weight: 900; font-stretch: 122%; letter-spacing: -.02em; line-height: .94; margin: 0; }
.hero__role { font-family: var(--font-display); font-weight: 700; font-stretch: 110%; font-size: clamp(1.1rem, 2.2vw, 1.45rem); color: var(--signal); margin-top: .1rem; }
.hero__pitch { color: var(--text-2); font-size: 1.06rem; max-width: 46ch; margin-top: .2rem; }

.hero__proof { display: flex; flex-wrap: wrap; gap: 0; margin-top: .3rem; font-family: var(--font-mono); font-size: .82rem; }
.hero__proof span { padding-right: .9rem; margin-right: .9rem; border-right: 1px solid var(--border-strong); color: var(--text-2); }
.hero__proof span:last-child { border-right: 0; }
.hero__proof b { color: var(--text); font-weight: 600; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.1rem; }

/* the living system — its own visual object, not a full-bleed background */
.hero__system { position: relative; aspect-ratio: 1/1; max-height: 640px; z-index: 1; }
.hero__system canvas { position: absolute; inset: -14% -14%; width: 128%; height: 128%; }
@media (min-width: 981px) { .hero__system canvas { top: -16%; bottom: -16%; left: -42%; right: -8%; width: auto; height: auto; } }
.hero__system-label { position: absolute; left: 50%; bottom: -.4rem; transform: translateX(-50%); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); opacity: 0; transition: opacity .3s ease; white-space: nowrap; }
.hero__system-label.is-on { opacity: 1; }
/* mobile: the system stops being its own block (it was shoving the name
   far down the page) and becomes a quiet backdrop behind the text instead */
@media (max-width: 980px) {
  .hero__system {
    position: absolute; inset: 0 0 auto 0; height: 60%; max-height: 420px;
    aspect-ratio: auto; z-index: 0; opacity: .55; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 92%);
    mask-image: linear-gradient(to bottom, black 45%, transparent 92%);
  }
  .hero__system canvas { inset: -6%; width: 112%; height: 112%; }
  .hero__system-label { display: none; }
}

.hero__scroll { position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; color: var(--text-dim); text-decoration: none; }
.hero__scroll svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) { .hero__scroll svg { animation: scrollcue 1.8s ease-in-out infinite; } }
@keyframes scrollcue { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(5px); opacity: 1; } }
@media (max-width: 700px) { .hero__scroll { display: none; } }

/* ------------------------------ lens / profile ------------------------------ */
.lens-section { border-top: 1px solid var(--border); }
.lens-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-bottom: 1.8rem; }
.mode-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.mode-tabs button { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-body); font-size: .88rem; font-weight: 600; padding: .58rem 1rem .58rem .8rem; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-2); cursor: pointer; transition: border-color .2s ease, color .2s ease, box-shadow .25s ease; }
.mode-tabs button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex: none; transition: background-color .2s ease, box-shadow .2s ease; }
.mode-tabs button:hover:not([aria-pressed="true"]) { color: var(--text); border-color: var(--border-strong); }
.mode-tabs button[aria-pressed="true"] { color: var(--text); border-color: var(--tab-c, var(--signal)); box-shadow: 0 0 0 1px var(--tab-c, var(--signal)); }
.mode-tabs button[aria-pressed="true"]::before { background: var(--tab-c, var(--signal)); box-shadow: 0 0 8px var(--tab-c, var(--signal)); }
.ctx-tabs { display: flex; gap: .3rem; background: var(--panel-2); border: 1px solid var(--border); padding: .2rem; }
.ctx-tabs button { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; font-weight: 500; padding: .48rem .9rem; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; transition: color .18s ease, background-color .18s ease; }
.ctx-tabs button:hover:not([aria-pressed="true"]):not(:disabled) { color: var(--text); }
.ctx-tabs button[aria-pressed="true"] { color: var(--signal-on); background: var(--signal); }
.ctx-tabs button:disabled { opacity: .35; cursor: not-allowed; }

.proof { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }
.proof__text { display: grid; gap: 1rem; align-content: start; }
.proof__text h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.proof__text p { color: var(--text-2); font-size: 1rem; max-width: 56ch; }
.proof__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); overflow: hidden; }
.proof__stat { padding: 1.1rem 1.2rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.proof__stat:nth-child(3n) { border-right: 0; }
.proof__stat .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--signal); }
.proof__stat .l { font-size: .78rem; color: var(--text-dim); margin-top: .2rem; }

.swap { transition: opacity .3s cubic-bezier(.2,.7,.3,1), transform .3s cubic-bezier(.2,.7,.3,1); }
.swap.is-out { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .swap { transition: none; } .swap.is-out { opacity: 1; transform: none; } }

/* ------------------------------ architecture: pinned scroll story ------------------------------ */
.arch-section { background: var(--bg-1); border-top: 1px solid var(--border); padding-block: clamp(3rem, 7vw, 5rem) 0; }
.arch-section .section-head { padding-inline: var(--pad); max-width: 52rem; }

.arch-scenes { position: relative; min-height: 380vh; }
.arch-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); padding-inline: clamp(1rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.arch-stage__svg { flex: 1 1 auto; min-width: 0; }
.arch-stage__svg svg { display: block; width: 100%; height: auto; }

.arch-hud { flex: 0 0 auto; width: clamp(13rem, 19vw, 19rem); display: grid; gap: .7rem; pointer-events: none; }
.arch-hud__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 5vw, 4rem); color: var(--border-strong); line-height: .85; transition: color .3s ease; }
.arch-hud__title { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.arch-hud__copy { font-size: 1rem; color: var(--text-2); }
.arch-progress { position: absolute; right: clamp(1rem, 4vw, 3rem); top: 50%; transform: translateY(-50%); z-index: 2; display: grid; gap: .5rem; }
.arch-progress i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.arch-progress i.is-on { background: var(--signal); box-shadow: 0 0 8px rgb(var(--signal-rgb) / .8); transform: scale(1.4); }
@media (max-width: 900px) {
  .arch-stage { position: static; height: auto; padding-block: 2rem; flex-direction: column; align-items: stretch; }
  .arch-hud { width: auto; }
  .arch-progress { display: none; }
  .arch-stage__svg { overflow-x: auto; }
  .arch-stage__svg svg { min-width: 760px; }
}

.n-box { fill: var(--panel-2); stroke: var(--border-strong); stroke-width: 1.2; transition: stroke .3s ease, fill .3s ease, opacity .3s ease; }
.n-hit { cursor: pointer; transition: opacity .3s ease; }
.n-hit:hover .n-box, .n-hit:focus-visible .n-box { stroke: var(--signal); }
.n-hit.is-active .n-box, .n-hit.is-lit .n-box { stroke: var(--signal); fill: rgb(var(--signal-rgb) / .12); }
.n-hit.is-dim { opacity: .22; }
.n-hit text { pointer-events: none; }
.n-t { font-family: var(--font-body); font-weight: 600; font-size: 14px; fill: var(--text); }
.n-s { font-family: var(--font-mono); font-size: 11px; fill: var(--text-dim); letter-spacing: .03em; }
.e-edge { transition: opacity .3s ease; }
.e-edge.is-dim { opacity: .12; }
.e-line { stroke: var(--border-strong); stroke-width: 1.2; fill: none; }
.e-edge.is-lit .e-line { stroke: var(--signal); stroke-width: 1.8; stroke-dasharray: 3 4; }
@media (prefers-reduced-motion: no-preference) { .e-edge.is-lit .e-line { animation: archflow 1s linear infinite; } }
@keyframes archflow { to { stroke-dashoffset: -14; } }
.e-lab { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text-dim); letter-spacing: .02em; }
.enclave { fill: none; stroke: var(--signal); stroke-width: 1.3; stroke-dasharray: 7 5; opacity: .5; }
.enclave-fill { fill: rgb(var(--signal-rgb) / .04); stroke: none; }
.diode { fill: rgb(var(--amber-rgb) / .18); stroke: var(--amber); stroke-width: 1.5; }

.arch-static { display: none; }
@media (prefers-reduced-motion: reduce), (max-width: 900px) {
  .arch-scenes { height: auto !important; min-height: 0 !important; }
  .arch-hud { display: none; }
  .arch-static { display: grid; gap: 1.5rem; padding: 2rem var(--pad) 3rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); max-width: var(--shell); margin-inline: auto; }
  .arch-static div { border-top: 1px solid var(--border); padding-top: .8rem; }
  .arch-static .n { font-family: var(--font-mono); color: var(--signal); font-size: .7rem; }
  .arch-static h4 { font-size: 1rem; margin-top: .3rem; }
  .arch-static p { color: var(--text-2); font-size: .9rem; margin-top: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .arch-stage { position: static; height: auto; padding-block: 2rem; }
}
.arch-legacy-panel { display: none; }

/* ------------------------------ selected work: editorial index ------------------------------ */
.work-section { background: linear-gradient(180deg, var(--bg-2), var(--bg) 40%); border-top: 1px solid var(--border); position: relative; }
.work-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 88% 15%, rgb(var(--amber-rgb) / .07), transparent 70%); pointer-events: none; }
.work-editorial { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; position: relative; }
@media (max-width: 900px) { .work-editorial { grid-template-columns: 1fr; } }

.work-index { display: grid; }
.work-item { border-top: 1px solid var(--border); }
.work-item:last-child { border-bottom: 1px solid var(--border); }
.work-item__title { width: 100%; display: flex; align-items: baseline; gap: 1rem; padding-block: 1.1rem; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text-dim); transition: color .25s ease, opacity .25s ease; }
.work-item__n { font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim); flex: none; }
.work-item__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.05; }
.work-item.is-active .work-item__title { color: var(--text); }
.work-item.is-active .work-item__n { color: var(--signal); }
.work-index.has-active .work-item:not(.is-active) .work-item__title { opacity: .38; }

.work-item__mobile { display: none; }
@media (max-width: 900px) {
  .work-item__mobile { display: grid; gap: .7rem; padding-bottom: 1.3rem; }
  .work-item__mobile .work-glyph { aspect-ratio: 16/9; }
}

.work-stage { position: sticky; top: 5rem; display: grid; gap: 1rem; }
@media (max-width: 900px) { .work-stage { display: none; } }
.work-glyph { border: 1px solid var(--border); background: radial-gradient(120% 100% at 15% 0%, rgb(var(--work-c, var(--signal-rgb)) / .14), var(--panel) 65%); aspect-ratio: 4/3; display: grid; place-items: center; padding: 1.6rem; }
.work-glyph svg { width: 100%; height: 100%; color: var(--work-c-solid, var(--signal)); }
.work-stage__status { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--work-c-solid, var(--signal)); }
.work-stage__row { display: flex; gap: 1.6rem 2.2rem; flex-wrap: wrap; }
.work-stage__row div { display: grid; gap: .25rem; max-width: 26ch; }
.work-stage__row .k { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.work-stage__row .v { font-size: .93rem; color: var(--text-2); }
.work-stage__stack { font-family: var(--font-mono); font-size: .76rem; color: var(--text-dim); }
.work-stage__more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .5rem; color: var(--signal); font-weight: 600; font-size: .88rem; }
.work-stage__more summary::-webkit-details-marker { display: none; }
.work-stage__more p { font-size: .95rem; color: var(--text-2); margin-top: .6rem; max-width: 58ch; }

/* ------------------------------ career: progression track ------------------------------ */
.career-section { border-top: 1px solid var(--border); background: var(--bg); }
.career-track { position: relative; padding-block: 1.5rem 3rem; }
.career-track__line { position: relative; height: 2px; background: var(--border-strong); margin-inline: 4px; }
.career-track__fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--signal); width: 100%; transform-origin: left; }
.career-track__years { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); margin-top: .6rem; }
.career-track__stops { position: absolute; inset: 0 4px auto; top: 0; height: 2px; }
.career-stop { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong); cursor: pointer; padding: 0; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.career-stop:hover, .career-stop:focus-visible { transform: translate(-50%, -50%) scale(1.25); }
.career-stop.is-active { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 12px rgb(var(--signal-rgb) / .7); }

.career-detail { display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr); gap: 1rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 760px) { .career-detail { grid-template-columns: 1fr; } }
.career-detail__year { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.2rem, 9vw, 6.5rem); line-height: .82; color: var(--border-strong); }
.career-detail__body { display: grid; gap: .6rem; align-content: start; }
.career-detail__role { font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
.career-detail__org { font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim); }
.career-detail__scope { color: var(--text-2); font-size: .98rem; max-width: 62ch; }
.career-detail__win { font-size: .98rem; color: var(--text); border-left: 2px solid var(--signal); padding-left: .8rem; }
.career-detail__more summary { cursor: pointer; list-style: none; color: var(--signal); font-weight: 600; font-size: .86rem; display: inline-flex; align-items: center; gap: .4rem; }
.career-detail__more summary::-webkit-details-marker { display: none; }
.career-detail__more ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.career-detail__more li { color: var(--text-2); font-size: .92rem; }
.career-detail__more li::marker { color: var(--signal); }

/* ------------------------------ capabilities: system map ------------------------------ */
.caps-section { border-top: 1px solid var(--border); }
.cap-map { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 840px) { .cap-map { grid-template-columns: 1fr; } }
.cap-index { display: grid; }
.cap-idx-item { border-top: 1px solid var(--border); }
.cap-idx-item:last-child { border-bottom: 1px solid var(--border); }
.cap-idx-item button { width: 100%; display: flex; align-items: center; gap: .8rem; padding-block: .9rem; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text-dim); transition: color .2s ease, opacity .2s ease; }
.cap-idx-item button .n { font-family: var(--font-mono); font-size: .82rem; margin-left: auto; color: var(--text-dim); }
.cap-idx-item button .name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.cap-idx-item.is-active button { color: var(--text); }
.cap-idx-item.is-active button .n { color: var(--signal); }
.cap-index.has-active .cap-idx-item:not(.is-active) button { opacity: .4; }
.cap-detail { border: 1px solid var(--border); padding: 1.5rem 1.6rem; min-height: 12rem; display: grid; gap: .8rem; align-content: start; }
.cap-detail__label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.cap-detail__list { font-size: 1rem; color: var(--text-2); line-height: 1.95; }
.cap-detail__list span::after { content: ", "; color: var(--text-dim); }
.cap-detail__list span:last-child::after { content: ""; }

/* ------------------------------ resume ------------------------------ */
.resume-section { border-top: 1px solid var(--border); }
.res-plate { padding: clamp(1.6rem, 3vw, 2.2rem); display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 1.4rem clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 820px) { .res-plate { grid-template-columns: 1fr; } }
.res-plate__badge { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.res-plate h3 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin-top: .4rem; }
.res-plate__tag { font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim); margin-top: .35rem; }
.res-plate__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.1rem; }
.res-plate__file { font-family: var(--font-mono); font-size: .68rem; color: var(--text-dim); margin-top: .5rem; }
.res-plate__sum { font-size: .97rem; color: var(--text-2); }

.res-alt { margin-top: 1.4rem; }
.res-alt > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .6rem; color: var(--text-2); font-weight: 600; font-size: .92rem; padding: .6rem 0; }
.res-alt > summary::-webkit-details-marker { display: none; }
.res-alt > summary::before { content: "+"; font-family: var(--font-mono); color: var(--signal); }
.res-alt[open] > summary::before { content: "\2212"; }
.res-register { width: 100%; border-collapse: collapse; margin-top: .4rem; }
.res-register tr { border-top: 1px solid var(--border); }
.res-register td { padding: .7rem .5rem; font-size: .88rem; vertical-align: baseline; }
.res-register td:first-child { padding-left: 0; }
.res-register td:last-child { padding-right: 0; text-align: right; }
.res-register .edition { color: var(--text); }
.res-register .ctx { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--text-dim); margin-top: .15rem; }
.res-register a { font-family: var(--font-mono); font-size: .78rem; color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.res-register tr.is-active td:first-child { border-left: 2px solid var(--signal); padding-left: .5rem; }

/* ------------------------------ contact: finale ------------------------------ */
.contact-section { background: var(--bg-1); border-top: 1px solid var(--border); min-height: 88vh; display: flex; align-items: center; padding-block: 4rem; }
.contact-fin { width: 100%; display: grid; gap: clamp(2rem, 6vw, 3.5rem); }
.contact-fin h2 { font-size: clamp(2.6rem, 8vw, 6rem); line-height: .96; }
.contact-fin__lede { color: var(--text-2); font-size: 1.05rem; max-width: 56ch; margin-top: 1rem; }
.contact-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.contact-links a { background: var(--bg-1); padding: 1.4rem 1.5rem; display: grid; gap: .3rem; text-decoration: none; color: var(--text); transition: background-color .2s ease, color .2s ease; }
.contact-links a:hover { background: var(--panel); color: var(--signal); }
.contact-links .k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.contact-links .v { font-size: 1rem; word-break: break-word; }

.foot { border-top: 1px solid var(--border); padding-block: 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; }
.foot p { font-family: var(--font-mono); font-size: .7rem; color: var(--text-dim); }
.foot .spacer { margin-left: auto; }

/* ------------------------------ command palette ------------------------------ */
.pal { position: fixed; inset: 0; z-index: 220; display: none; }
.pal[open] { display: block; }
.pal__scrim { position: absolute; inset: 0; background: rgba(4,7,10,.6); backdrop-filter: blur(4px); }
.pal__box { position: relative; margin: 12vh auto 0; width: min(560px, calc(100% - 2rem)); background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.pal__in { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.pal__in svg { width: 15px; height: 15px; color: var(--signal); flex: none; }
.pal__in input { flex: 1; border: 0; background: transparent; color: var(--text); font-family: var(--font-mono); font-size: .9rem; outline: none; }
.pal__list { max-height: 46vh; overflow-y: auto; padding: .4rem; margin: 0; list-style: none; }
.pal__list li { padding: .6rem .7rem; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: .7rem; font-size: .88rem; }
.pal__list li[aria-selected="true"] { background: rgb(var(--signal-rgb) / .14); }
.pal__list li .g { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-left: auto; }
.pal__foot { padding: .55rem 1rem; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: .66rem; color: var(--text-dim); }
kbd { font-family: var(--font-mono); font-size: .95em; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: .05em .4em; color: var(--text-2); }

/* ------------------------------ reveal (sparing) ------------------------------ */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

@media (hover: hover) and (prefers-reduced-motion: no-preference) { .magnetic { will-change: transform; } }

/* diagnostic easter-egg mode */
body.diagnostic .n-s { fill: var(--amber) !important; opacity: 1 !important; }
body.diagnostic .e-edge .e-line { animation-duration: .3s !important; }

@media print {
  @page { size: letter; margin: 0.5in; }
  body { background: #fff !important; color: #000; font-size: 10pt; }
  .bar, .hero__system, .hero__scroll, .pal, .skip, .no-print, .foot, .cursor, .toast { display: none !important; }
  .panel { border: 1px solid #bbb; box-shadow: none; }
  .rv { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; color: #000; }
}