/* ═══════════════════════════════════════════════════════════════════════
   v2 · Desktop. The data lives in retro OS windows on a dot-grid desktop.
   Layout only: every colour comes from the tokens in shared/theme.css.
═══════════════════════════════════════════════════════════════════════ */

:root {
  --off: 8px;                 /* window drop-plate offset */
  --win-pad: clamp(20px, 3vw, 40px);
}

main { position: relative; overflow-x: clip; }

/* The desktop surface: one dot grid behind every section, faded under the nav. */
.desk {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: 22px 22px;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--ink) 220px);
          mask-image: linear-gradient(to bottom, transparent 0, var(--ink) 220px);
}
main > section { position: relative; z-index: 1; }

.sec { padding: clamp(64px, 9vw, 124px) 0; }
.sec-head { max-width: 780px; display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head .lede { max-width: 680px; }

/* Lowercase path labels: the desktop's own annotation voice. */
.path {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-3);
}
.path span { color: var(--ink-2); }

.pr { color: var(--ink-3); }
.caret {
  display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px;
  vertical-align: -0.18em; background: var(--ink);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Window chrome additions ──────────────────────────────────────────── */
.win {
  position: relative;
  box-shadow: var(--off) var(--off) 0 -1px var(--bg), var(--off) var(--off) 0 0 var(--line-strong);
}
.win-bar { gap: 10px; flex-shrink: 0; }
.win-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.win-grip {
  flex: 1; min-width: 12px; height: 9px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 3px);
  opacity: 0.75;
}
.win-status {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-3);
}
.win-status span:last-child:not(:first-child) { text-align: right; }

.tb {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.addr {
  flex: 1; max-width: 440px; min-width: 0; height: 28px;
  display: flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--bg);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden;
}
.tb-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* Classic group box: a hairline frame with its label sitting on the border. */
.grp {
  position: relative;
  border: 1px solid var(--line-strong); border-radius: 3px;
  padding: 26px 22px 20px;
}
.grp-t {
  position: absolute; top: -0.8em; left: 14px; padding: 0 8px;
  background: var(--surface);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
  line-height: 1.6;
}

/* Tiny technical annotations and crosshairs on art panels. */
.anno {
  position: absolute; z-index: 2; pointer-events: none;
  padding: 1px 5px; background: var(--bg); border-radius: 2px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.a-tl { top: 10px; left: 10px; }
.a-br { bottom: 10px; right: 10px; }
.cross {
  position: absolute; z-index: 2; width: 18px; height: 18px; pointer-events: none;
  fill: none; stroke: var(--ink-3); stroke-width: 1;
}
.c-tl { top: 34px; left: 14px; }
.c-br { bottom: 34px; right: 14px; }

/* Hairline geometry (large thin circles and axes). */
.geo { position: absolute; pointer-events: none; fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.geo * { vector-effect: non-scaling-stroke; }

/* Stats: big light numbers over mono labels, divided by hairlines. */
.stats { display: grid; border-top: 1px solid var(--line-strong); }
.stats li { display: grid; gap: 6px; align-content: start; padding: 14px 16px 4px 0; }
.stats li + li { border-left: 1px solid var(--line); padding-left: 16px; }
.stat-v { font-size: clamp(30px, 2.8vw, 42px); font-weight: 300; line-height: 1; letter-spacing: -0.035em; white-space: nowrap; }
.stat-u { margin-left: 0.14em; font-size: 0.62em; letter-spacing: 0.01em; }
.stat-l { font-family: var(--font-mono); font-size: 11px; line-height: 1.45; letter-spacing: 0.04em; color: var(--ink-3); }
.stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ═══ 1. Hero ═══════════════════════════════════════════════════════════ */
.hero { padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 56px)); padding-bottom: clamp(56px, 7vw, 96px); }
.hero-stage { position: relative; }
.geo-hero { width: min(820px, 76vw); right: -14%; top: 50%; transform: translateY(-50%); z-index: 0; }

.hero-main { position: relative; z-index: 1; width: 80%; }
.hero-plate {
  position: absolute; inset: 0; transform: translate(14px, 14px);
  border: 1px solid var(--line-strong); border-radius: 6px;
  pointer-events: none;
}
.w-welcome { box-shadow: none; }
.strip {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-3);
}
.strip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-body { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: clamp(480px, 62vh, 620px); }
.welcome-text { padding: var(--win-pad); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.hero-name { display: grid; gap: 2px; font-size: 15px; line-height: 1.4; }
.hero-name b { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.hero-name span { color: var(--ink-2); }
.hero-h { font-weight: 300; font-size: clamp(36px, 3.9vw, 58px); line-height: 1.02; letter-spacing: -0.035em; }
.hero-h b { font-weight: 600; }
.welcome-text .lede { font-size: clamp(16px, 1.2vw, 18px); max-width: 520px; }
.welcome-text .btns { margin-top: 6px; }

.welcome-art { position: relative; border-left: 1px solid var(--line-strong); background: var(--bg); }
.welcome-art .art { position: absolute; inset: 0; }

.w-syslog { position: absolute; z-index: 3; top: 52px; right: 0; width: 300px; pointer-events: none; }
.syslog { padding: 14px 16px 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--ink); }
.syslog .out { color: var(--ink-2); padding-left: 14px; margin-bottom: 4px; }
.syslog .spark-dot { width: 7px; height: 7px; margin-right: 4px; vertical-align: 0.05em; }
.w-rays { position: absolute; z-index: 2; right: 30px; bottom: 44px; width: 240px; pointer-events: none; }
.w-rays .art { height: 150px; background: var(--bg); }
.w-rays .win-status { font-size: 10px; padding: 5px 10px; }

.domains { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: auto 1fr; gap: 14px 28px; align-items: start; }
.domains .path { padding-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 11px 0 9px;
  border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--surface);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  white-space: nowrap;
}
.chip .doc { width: 13px; height: 13px; color: var(--ink-3); flex-shrink: 0; }

/* ═══ 2. About ══════════════════════════════════════════════════════════ */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.w-about { display: flex; flex-direction: column; }
.txt { padding: var(--win-pad); display: grid; gap: 18px; }
.txt .h2 { margin-bottom: 6px; }
.txt > p:not(.path):not(.motto) { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; max-width: 640px; }
.motto {
  margin-top: 10px; padding-top: 18px; border-top: 1px dashed var(--line-strong);
  font-family: var(--font-mono); font-size: 14px; color: var(--ink);
}
.w-neural { margin-top: 72px; display: flex; flex-direction: column; }
.neural { position: relative; height: clamp(360px, 44vw, 560px); background: var(--bg); }
.neural .art { position: absolute; inset: 0; cursor: crosshair; }

/* ═══ 3. Work ═══════════════════════════════════════════════════════════ */
.folder { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.folder-icons { padding: clamp(18px, 2.4vw, 32px); }
.icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ico {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 4px 16px; text-align: center;
  border: 1px dashed transparent; border-radius: 4px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ico-svg { width: 68px; height: 68px; color: var(--ink); transition: transform var(--dur) var(--ease); }
.ico-name {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.4;
  padding: 2px 6px; border-radius: 2px; color: var(--ink);
  overflow-wrap: anywhere;
}
.ico-title { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); max-width: 15em; }
.ico:hover, .ico:focus-visible { border-color: var(--line-strong); background: var(--glass); }
.ico:hover .ico-svg, .ico:focus-visible .ico-svg { transform: translateY(-2px); }
.ico:hover .ico-name, .ico:focus-visible .ico-name, .ico.is-sel .ico-name { background: var(--ink); color: var(--bg); }
.ico:focus-visible { outline-offset: 2px; border-radius: 4px; }

.props { border-left: 1px solid var(--line-strong); padding: clamp(28px, 3vw, 40px) clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px); background: var(--surface); }
.props .grp { display: grid; gap: 12px; }
.props-file { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.props-title { font-weight: 500; }
.props-tag { font-size: 15px; }
.props .stats { margin-top: 8px; }
.props .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.props .stats-4 li:nth-child(3) { border-left: 0; padding-left: 0; }
.props .stats-4 li:nth-child(n+3) { border-top: 1px solid var(--line); }
.props .btn { justify-self: start; margin-top: 10px; }
.props .btn svg { width: 14px; height: 14px; }

/* PROJECT.EXE dialog */
.pj-overlay { padding: 20px; }
.pj-overlay .overlay-panel.pj {
  width: min(1060px, 100%);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--off) var(--off) 0 -1px var(--bg), var(--off) var(--off) 0 0 var(--line-strong), var(--shadow);
}
.pj .win-bar { height: 34px; }
.pj .win-ctrls i, .pj .win-ctrls button { width: 22px; height: 22px; font-size: 12px; }
.pj .win-ctrls button { color: var(--ink); }
.pj-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* The art column stretches with the content; the panel inside it sticks
   while long content scrolls, and never grows past the visible body. */
.pj-artcol { border-right: 1px solid var(--line-strong); background: var(--bg); min-height: 360px; }
.pj-art {
  position: sticky; top: 0;
  height: min(100%, calc(100vh - 136px));
  height: min(100%, calc(100dvh - 136px));
}
.pj-art .art { position: absolute; inset: 0; }
.pj-content { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 22px; align-content: start; }
.pj-title { font-size: clamp(30px, 3vw, 44px); }
.pj-prose { display: grid; gap: 14px; color: var(--ink-2); }
.pj-block { display: grid; gap: 12px; }
.contrib { counter-reset: c; border-top: 1px solid var(--line); }
.contrib li {
  counter-increment: c;
  display: grid; grid-template-columns: 30px 1fr; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
}
.contrib li::before { content: '+'; font-family: var(--font-mono); color: var(--ink-3); }
.pj-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.pj-foot {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px 10px 16px;
  border-top: 1px solid var(--line-strong); background: var(--surface-2);
}
.pj-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); }
.pj-foot .btn { height: 38px; padding: 0 16px 0 12px; gap: 8px; }

/* ═══ 4. Timeline ═══════════════════════════════════════════════════════ */
.w-term .term { background: var(--bg); padding: var(--win-pad); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
.t-prompt { color: var(--ink); }
.t-list { margin: 18px 0 22px; }
.t-entry {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px;
  padding: 24px 0; border-top: 1px dashed var(--line-strong);
}
.t-entry:last-child { border-bottom: 1px dashed var(--line-strong); }
.t-when { color: var(--ink-3); white-space: nowrap; padding-top: 3px; }
.t-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-weight: 400; }
.t-type {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em;
  padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink-2);
}
.t-type.is-edu { border-style: dashed; color: var(--ink-3); }
.t-title { font-family: var(--font-sans); font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; letter-spacing: -0.015em; color: var(--ink); line-height: 1.3; }
.t-org { color: var(--ink-2); }
.t-pts { margin-top: 12px; padding-left: 26px; }
.t-pts li { position: relative; padding: 3px 0; color: var(--ink-2); max-width: 78ch; }
.t-pts li::before { content: ''; position: absolute; left: -20px; top: 0; bottom: 0; border-left: 1px solid var(--line-strong); }
.t-pts li:first-child::before { top: -6px; }
.t-pts li:last-child::before { bottom: auto; height: calc(3px + 0.85em); }
.t-pts li::after { content: ''; position: absolute; left: -20px; top: calc(3px + 0.85em); width: 12px; border-top: 1px solid var(--line-strong); }

/* ═══ 5. Projects (explorer) ════════════════════════════════════════════ */
.explorer { display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.ex-side { border-right: 1px solid var(--line); padding: 16px 10px; display: grid; align-content: start; gap: 2px; background: var(--surface-2); }
.ex-side .label { padding: 4px 10px 10px; }
.ex-filter {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  min-height: 36px; padding: 0 10px; border-radius: 3px;
  font-size: 14px; color: var(--ink-2); text-align: left;
}
.ex-filter .n { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.ex-filter:hover { color: var(--ink); background: var(--glass); }
.ex-filter[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.ex-filter[aria-pressed='true'] .n { color: var(--bg); opacity: 0.7; }

.ex-head, .ex-row {
  display: grid;
  grid-template-columns: minmax(0, 3.4fr) 92px minmax(0, 1fr) minmax(0, 1.3fr) 88px;
  gap: 20px; padding: 0 20px;
}
.ex-head {
  height: 34px; align-items: center; border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.ex-row { padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); align-items: start; transition: background-color var(--dur) var(--ease); }
.ex-row:last-child { border-bottom: 0; }
.ex-row:hover { background: var(--glass); }
.ex-row[hidden] { display: none; }
.ex-name { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
/* A small live screen per project (art.js 'tile'), dark in both themes. */
.ex-thumb { position: relative; width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: var(--bg); }
.ex-thumb .art { position: absolute; inset: 0; }
.ex-title { font-weight: 500; font-size: 16px; line-height: 1.4; }
.ex-desc { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ex-status .tag { height: 24px; padding: 0 10px; }
.ex-meta, .ex-stack { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--ink-2); padding-top: 2px; }
.ex-stack { color: var(--ink-3); }
.ex-link { padding-top: 2px; }
.ex-link .arrow-link { font-size: 13px; }

/* ═══ 6. Testimonial ════════════════════════════════════════════════════ */
.testi { padding-top: clamp(24px, 4vw, 48px); }
.testi-wrap { position: relative; }
.geo-testi { width: 380px; left: 2%; top: 50%; transform: translateY(-50%); }
.w-mail { position: relative; max-width: 880px; margin-left: auto; }
.mail-nav { display: flex; align-items: center; gap: 6px; }
.mail-nav[hidden] { display: none; }
.mail-btn { width: 30px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink-2); }
.mail-btn svg { width: 14px; height: 14px; }
.mail-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.mail-dots { display: flex; align-items: center; gap: 2px; padding: 0 4px; }
.mail-dot { width: 18px; height: 22px; display: grid; place-items: center; }
.mail-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink-3); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mail-dot:hover::before { border-color: var(--ink); }
.mail-dot[aria-current]::before { background: var(--accent); border-color: var(--accent); }
/* A carousel: one message fills the window; the track scrolls and snaps
   between them (desktop.js advances it and drives the arrows and dots). */
.mail-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.mail-track::-webkit-scrollbar { display: none; }
.mail-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mail-msg { scroll-snap-align: start; display: flex; flex-direction: column; }
.mail-msg .mail-body { flex: 1; align-content: space-between; }
.mail-who { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.mail-who:hover { border-color: var(--ink); }
.mail-in { margin-left: auto; font-size: 12.5px; }
.mail-in svg { width: 15px; height: 15px; }
.mail-head { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; font-family: var(--font-mono); font-size: 12.5px; }
.mail-head div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
.mail-head dt { color: var(--ink-3); }
.mail-head dd { margin: 0; color: var(--ink); }
.mail-head dd span { color: var(--ink-3); }
.mail-body { margin: 0; padding: var(--win-pad); display: grid; gap: 26px; }
.quote { font-size: clamp(22px, 2.3vw, 32px); font-weight: 300; line-height: 1.32; letter-spacing: -0.02em; }
.quote b { font-weight: 600; }
.mail-body footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.sig-rule { width: 36px; height: 1px; background: var(--ink-3); }

/* ═══ 7. Homelab ════════════════════════════════════════════════════════ */
.mon-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); border-bottom: 1px solid var(--line-strong); }
.mon-sum { padding: var(--win-pad); display: grid; gap: 32px; align-content: space-between; }
.mon-sum .lede { max-width: 640px; }
.mon-art { position: relative; min-height: 340px; border-left: 1px solid var(--line-strong); background: var(--bg); }
.mon-art .art { position: absolute; inset: 0; }
.mon-grps { padding: calc(var(--win-pad) + 6px) var(--win-pad) var(--win-pad); display: grid; gap: 40px; }

.m-head, .m-row { display: grid; grid-template-columns: 130px minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.5fr); gap: 20px; }
.m-head { padding-bottom: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.m-row { padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.m-name { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.m-ico { width: 20px; height: 20px; color: var(--ink-2); flex-shrink: 0; }
.m-role { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.m-specs { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--ink-2); padding-top: 1px; }
.m-runs { display: flex; flex-wrap: wrap; gap: 6px; }
.m-runs li {
  height: 24px; display: inline-flex; align-items: center; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap;
}

.svc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.svc-cat { display: flex; justify-content: space-between; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.svc-cat span { color: var(--ink-3); }
.svc-col li { padding: 4px 0; font-size: 14.5px; color: var(--ink); }

/* ═══ 8. Contact ════════════════════════════════════════════════════════ */
.contact { padding-bottom: clamp(72px, 9vw, 120px); }
.contact-body { position: relative; overflow: hidden; padding: clamp(32px, 6vw, 88px) var(--win-pad); min-height: clamp(380px, 46vw, 520px); display: flex; align-items: center; }
.geo-contact { width: min(600px, 70%); right: -6%; top: 50%; transform: translateY(-50%); }
.geo-contact .geo-dot { fill: var(--spark); stroke: none; }
.contact-text { position: relative; display: grid; gap: 22px; justify-items: start; }
.ct-h { margin-top: 4px; }
.ct-mail { font-family: var(--font-mono); font-size: clamp(15px, 1.6vw, 20px); color: var(--ink-2); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; overflow-wrap: anywhere; }
.ct-mail:hover { color: var(--ink); border-color: var(--ink); }
.now { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px var(--win-pad); border-top: 1px solid var(--line-strong); background: var(--surface-2); }
.now-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.now-k::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--ink); vertical-align: 0.1em; }
.now p { font-size: 14.5px; color: var(--ink-2); }

/* ── Footer taskbar ───────────────────────────────────────────────────── */
.taskbar { position: relative; z-index: 1; border-top: 1px solid var(--line-strong); background: var(--surface-2); }
.tb-wrap { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.tb-start {
  height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 8px;
  border: 1px solid var(--ink); border-radius: 3px; font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
}
.tb-start .dot { color: var(--spark); }
.tb-logo { width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 2px; background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 3px); }
.tb-items { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-item {
  height: 32px; display: inline-flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 3px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tb-item:hover { color: var(--ink); border-color: var(--ink); }
.tb-tray { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.tb-tray a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.tb-tray a:hover { color: var(--ink); }
.tb-tray svg { width: 12px; height: 12px; }
.clock { padding: 0 8px; height: 26px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; color: var(--ink-2); }

/* ═══ Responsive ════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .hero-main { width: 84%; }
  .w-syslog { width: 270px; }
  .w-rays { width: 210px; right: 10px; }
  .w-rays .art { height: 130px; }
  .ex-head, .ex-row { grid-template-columns: minmax(0, 2.4fr) 88px minmax(0, 1.2fr) 84px; }
  .ex-head span:nth-child(4), .ex-stack { display: none; }
  .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  /* Hero: windows stack, decorative ones tuck under the main window. */
  .hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 0 24px; }
  .hero-main { width: auto; grid-column: 1 / -1; }
  .geo-hero { width: 120vw; right: -40%; top: 72%; }
  .hero-h { font-size: clamp(36px, 6vw, 52px); }
  .w-syslog, .w-rays { position: relative; inset: auto; width: auto; margin-top: 36px; }
  .w-rays { margin-top: 64px; }
  .welcome-body { grid-template-columns: 1fr; min-height: 0; }
  .welcome-art { height: clamp(260px, 60vw, 400px); border-left: 0; border-top: 1px solid var(--line-strong); }
  .domains { grid-template-columns: 1fr; }

  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .w-neural { margin-top: 0; }

  .folder { grid-template-columns: 1fr; }
  .props { border-left: 0; border-top: 1px solid var(--line-strong); }

  .pj-body { grid-template-columns: 1fr; }
  .pj-artcol { min-height: clamp(200px, 40vw, 300px); border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .pj-art { position: relative; height: clamp(200px, 40vw, 300px); }

  .t-entry { grid-template-columns: 1fr; gap: 8px; }

  .explorer { grid-template-columns: 1fr; }
  .ex-side { border-right: 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; }
  .ex-side .label { padding: 0 6px 0 4px; }
  .ex-filter { border: 1px solid var(--line-strong); min-height: 34px; }
  .ex-head { display: none; }
  .ex-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name status' 'meta link' 'stack stack';
    gap: 10px 16px; padding: 18px 16px;
  }
  .ex-name { grid-area: name; }
  .ex-status { grid-area: status; }
  .ex-meta { grid-area: meta; padding-left: 30px; }
  .ex-link { grid-area: link; text-align: right; }
  .ex-stack { grid-area: stack; display: block; padding-left: 30px; }

  .geo-testi { display: none; }

  .mon-top { grid-template-columns: 1fr; }
  .mon-art { min-height: 300px; border-left: 0; border-top: 1px solid var(--line-strong); }
  .stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-5 li:nth-child(4) { border-left: 0; padding-left: 0; }
  .stats-5 li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .m-head { display: none; }
  .m-row { grid-template-columns: 130px minmax(0, 1fr); grid-template-areas: 'name role' 'name specs' 'name runs'; gap: 6px 20px; padding: 16px 0; }
  .m-name { grid-area: name; align-self: start; }
  .m-role { grid-area: role; }
  .m-specs { grid-area: specs; }
  .m-runs { grid-area: runs; margin-top: 4px; }
}

@media (max-width: 640px) {
  :root { --off: 5px; }
  .hero-stage { grid-template-columns: 1fr; }
  .w-syslog { margin-top: 32px; }
  .w-rays { width: 62%; justify-self: end; margin-top: -26px; margin-right: 6px; z-index: 4; }
  .welcome-art { height: clamp(300px, 84vw, 400px); }
  .win-status > span:last-child:not(:first-child) { display: none; }
  .ex-side .label { display: none; }
  .hero-plate { transform: translate(8px, 8px); }
  .strip span:last-child { display: none; }
  .hero-h { font-size: clamp(32px, 9vw, 40px); }
  .welcome-text .btns .btn { flex: 1 1 auto; justify-content: center; }

  .icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ico-svg { width: 56px; height: 56px; }
  .grp { padding: 24px 16px 16px; }
  .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-4 li:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats-4 li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .props .btn { justify-self: stretch; justify-content: center; }

  .pj-overlay { padding: 8px; }
  .pj-overlay .overlay-panel.pj { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .pj-hint { display: none; }
  .pj-foot .btn { margin-left: auto; }
  .contrib li { grid-template-columns: 20px 1fr; font-size: 14.5px; }

  .w-term .term { font-size: 12.5px; }
  .t-pts { padding-left: 20px; }
  .t-pts li::before, .t-pts li::after { left: -16px; }
  .t-pts li::after { width: 9px; }

  .ex-row { grid-template-areas: 'name name' 'status link' 'meta meta' 'stack stack'; }
  .ex-status { padding-left: 66px; }
  .ex-meta { padding-left: 66px; }

  .mail-head div { grid-template-columns: 64px minmax(0, 1fr); }

  .stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-5 li:nth-child(4) { border-left: 1px solid var(--line); padding-left: 16px; }
  .stats-5 li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats-5 li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .mon-grps { gap: 32px; }
  .m-row { grid-template-columns: 1fr; grid-template-areas: 'name' 'role' 'specs' 'runs'; }
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }

  .contact-body { min-height: 0; }
  .geo-contact { width: 110%; right: -55%; opacity: 0.7; }
  .now { grid-template-columns: 1fr; gap: 6px; }
  .contact-text .btns .btn { flex: 1 1 40%; justify-content: center; }
  .tb-tray { margin-left: 0; }
}

/* ═══ Work preview (summary of the hovered icon) ════════════════════════ */
/* All slides share one grid cell, so the panel is as tall as the tallest
   slide and never jumps when the text length changes. */
.rot-stage { display: grid; }
.rot-slide {
  grid-area: 1 / 1; display: grid; gap: 14px; align-content: start;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}
.rot-slide.is-on { opacity: 1; visibility: visible; transition: opacity 0.2s var(--ease), visibility 0s; }
.rot-art { position: relative; height: 150px; border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; background: var(--bg); }
.rot-art .art { position: absolute; inset: 0; }
.rot-text { display: grid; gap: 10px; }
.rot-text .stats { margin-top: 4px; }
.rot-text .btn { justify-self: start; margin-top: 6px; }

/* ═══ Career log: colour roles ═════════════════════════════════════════ */
.term .pr { color: var(--accent); }
.t-when { color: var(--ink-2); }
.t-when .spark-dot { width: 7px; height: 7px; margin-right: 8px; vertical-align: 0.05em; }
.t-type:not(.is-edu) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.t-org { color: var(--accent); }
.t-pts li::before, .t-pts li::after { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* Peach spark as a status marker. */
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--spark); }
.ico { position: relative; }
.ico.is-sel::after {
  content: ''; position: absolute; top: 12px; right: 14px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--spark);
}

/* ═══ Light mode: more contrast ════════════════════════════════════════
   Light mode used to sit in one narrow band of cream and grey. It now gets a
   slightly deeper page, darker secondary text (4.5:1 or better), crisp ink
   window chrome with hard retro shadows, black title bars on each section's
   main window, and dark "screens" for the art and the terminal. */
[data-theme='light'] {
  --bg: #eae8e2;
  --ink-2: rgba(11, 11, 12, 0.74);
  --ink-3: rgba(11, 11, 12, 0.6);
}
/* A dark screen inside a light page: re-scoped tokens, so art.js (which reads
   colours from the element) and any text inside draw in the dark palette. */
[data-theme='light'] .screen {
  --bg: #0b0b0d; --surface: #111114; --surface-2: #17171b;
  --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.28);
  --ink: #f1f0ec; --ink-2: rgba(241, 240, 236, 0.72); --ink-3: rgba(241, 240, 236, 0.55);
  --art: #ffffff; --art-soft: rgba(255, 255, 255, 0.35);
  --accent: #5aa8ff; --accent-2: #b27dff; --spark: #ff9e6d;
  --glass: rgba(255, 255, 255, 0.04);
  background: var(--bg); color: var(--ink);
}
[data-theme='light'] .win { border-color: color-mix(in srgb, var(--ink) 85%, transparent); box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--ink) 88%, transparent); }
[data-theme='light'] .w-welcome { box-shadow: none; }
[data-theme='light'] .hero-plate { border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
[data-theme='light'] .win-bar { border-bottom-color: color-mix(in srgb, var(--ink) 85%, transparent); }
[data-theme='light'] :is(.w-welcome, .w-about, .w-folder, .w-term, .w-explorer, .w-mail, .w-mon, .w-contact, .pj) > .win-bar {
  background: var(--ink); border-bottom-color: var(--ink);
}
[data-theme='light'] :is(.w-welcome, .w-about, .w-folder, .w-term, .w-explorer, .w-mail, .w-mon, .w-contact, .pj) > .win-bar .win-title { color: var(--surface); }
[data-theme='light'] :is(.w-welcome, .w-about, .w-folder, .w-term, .w-explorer, .w-mail, .w-mon, .w-contact, .pj) > .win-bar .win-grip {
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--surface) 40%, transparent) 0 1px, transparent 1px 3px);
}
[data-theme='light'] :is(.w-welcome, .w-about, .w-folder, .w-term, .w-explorer, .w-mail, .w-mon, .w-contact, .pj) > .win-bar :is(.win-ctrls i, .win-ctrls button) {
  border-color: color-mix(in srgb, var(--surface) 50%, transparent); color: var(--surface);
}
[data-theme='light'] .stat-v { font-weight: 400; }
[data-theme='light'] .stats li:first-child .stat-v { color: var(--accent); }

/* Touch screens cannot hover, so the preview panel goes and a tap on an
   icon opens its window directly. */
.hint-touch { display: none; }
@media (hover: none) {
  .folder { grid-template-columns: 1fr; }
  .props { display: none; }
  .hint-hover { display: none; }
  .hint-touch { display: inline; }
}
/* The light-mode terminal matches the other windows' white body. */
[data-theme='light'] .w-term .term { background: var(--surface); }

/* Company links: inherit the surrounding colour, underline on a hairline. */
.co-link { color: inherit; border-bottom: 1px solid var(--line-strong); transition: border-color var(--dur) var(--ease); }
.co-link:hover { border-color: currentColor; }