/* ==========================================================================
   components.css — every section and component, top to bottom.
   ========================================================================== */

/* ============================== HERO ===================================== */
.hero {
  padding-block: clamp(2.5rem, 2rem + 4vw, 6rem) var(--s-7);
}
.hero-copy { align-self: center; }
@media (min-width: 1024px) {
  .hero-copy { grid-column: 1 / 8; }
  .hero-visual { grid-column: 8 / 13; align-self: center; }
}

.status-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  padding: 0.35rem 0.8rem 0.35rem 0.65rem;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: var(--fs-2xs);
}
.status-main { display: inline-flex; align-items: center; gap: 0.6rem; }
@media (max-width: 520px) {
  .status-chip { border-radius: var(--radius-sm); }
  .status-sep { display: none; }
}
.status-sep { width: 1px; height: 12px; background: var(--line-strong); }
.status-loc { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); }
.status-loc .icon { width: 13px; height: 13px; }
.clock { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pulse {
  position: relative;
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.pulse::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}

.hero-name {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.hero-name-line { display: block; }
.hero-name-italic { padding-left: 0.5em; letter-spacing: -0.035em; }
.hero-role {
  margin-top: var(--s-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.hero-lede {
  margin-top: var(--s-3);
  max-width: 52ch;
  color: var(--ink-2);
}
.hero-ctas {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero-meta {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  color: var(--ink-2);
}
.hero-meta div { display: flex; gap: 0.4rem; }
.hero-meta dt { color: var(--muted); }
.hero-meta dt::after { content: ":"; }

/* "Plate": a framed figure with crop marks, like a drawing on a spec sheet. */
.plate {
  position: relative;
  margin-top: var(--s-7);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}
@media (min-width: 1024px) { .plate { margin-top: 0; } }
.plate::before, .plate::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--accent);
  border-style: solid;
  pointer-events: none;
}
.plate::before { top: -6px; left: -6px; border-width: 1px 0 0 1px; }
.plate::after { bottom: -6px; right: -6px; border-width: 0 1px 1px 0; }
.plate-head, .plate-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--pad-bar);
  color: var(--muted);
  font-size: var(--fs-2xs);
}
.plate-head { border-bottom: var(--hairline) solid var(--line); }
.plate-foot { border-top: var(--hairline) solid var(--line); min-height: 2.6rem; color: var(--ink-2); }
.plate-hint { color: var(--accent); }

/* Architecture SVG */
.arch { width: 100%; height: auto; padding: 0.5rem; }
.arch .dot-grid { fill: var(--line-strong); }
.arch .wire {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  transition: stroke var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.arch .wire-labels text { font-size: 10px; fill: var(--muted); }
.arch .node { cursor: pointer; outline: none; transition: opacity var(--dur-2) var(--ease-out); }
.arch .node rect {
  fill: var(--bg-elev);
  stroke: var(--line-strong);
  stroke-width: 1;
  transition: stroke var(--dur-2) var(--ease-out), fill var(--dur-2) var(--ease-out);
}
.arch .node-core rect { stroke: var(--ink-2); }
.arch .n-title { font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-heavy); letter-spacing: -0.01em; fill: var(--ink); }
.arch .n-sub, .arch .wire-labels text { font-family: var(--font-label); font-weight: var(--fw-medium); letter-spacing: var(--tracking-label); }
.arch .n-sub { font-size: 10.5px; fill: var(--muted); }
.arch .port { fill: var(--bg-elev); stroke: var(--accent); stroke-width: 1.25; }
.arch .node:is(:hover, :focus-visible, .is-hot) rect {
  stroke: var(--accent);
  fill: color-mix(in srgb, var(--accent) 7%, var(--bg-elev));
}
.arch .node:focus-visible rect { stroke-width: 2; }
.arch.has-hot .node:not(.is-hot, .is-linked) { opacity: 0.4; }
.arch.has-hot .wire:not(.is-linked) { opacity: 0.25; }
.arch .wire.is-linked { stroke: var(--accent); }
.arch .packet .halo { opacity: 0.22; }
.arch .packet-out { fill: var(--accent); }
.arch .packet-in { fill: var(--flow); }
.arch.has-hot .packet:not(.is-linked) { opacity: 0.2; }
@media (max-width: 600px) {
  .arch .n-title { font-size: 19px; }
  .arch .n-sub { font-size: 13px; }
  .arch .wire-labels text { font-size: 13px; }
}

/* ============================== ABOUT ==================================== */
@media (min-width: 900px) {
  .about-copy { grid-column: 4 / 11; }
}
.limits {
  overflow: hidden; /* keeps the cell hover glow inside the rounded panel */
  margin-top: var(--space-block);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}
.limits-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: var(--pad-bar);
  border-bottom: var(--hairline) solid var(--line);
  color: var(--muted);
  font-size: var(--fs-2xs);
}
.limits-status { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ok); }
.ok-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.limits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .limits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.limit {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  padding: var(--s-5) var(--s-3) var(--s-5);
  border-right: var(--hairline) solid var(--line);
  border-bottom: var(--hairline) solid var(--line);
}
.limit:nth-child(2n) { border-right: 0; }
.limit:nth-child(n + 3) { border-bottom: 0; }
@media (min-width: 900px) {
  .limit { border-bottom: 0; }
  .limit:nth-child(2n) { border-right: var(--hairline) solid var(--line); }
  .limit:last-child { border-right: 0; }
}
.limit { --g: 150px; }
@media (max-width: 420px) { .limit { --g: 128px; } }
.gauge { width: var(--g); height: auto; overflow: visible; }
.gauge .track { fill: none; stroke: var(--line); stroke-width: 7; stroke-linecap: butt; }
.gauge .seg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-dasharray: var(--fill, 1) 2;
  stroke-dashoffset: 0;
}
.gauge .seg.is-retired { stroke: var(--muted); stroke-dasharray: 0.08 0.06; stroke-dashoffset: 0; }
/* The open segment after the last full year reads as "and counting". */
.gauge .track-open { stroke: var(--muted); stroke-dasharray: 0.04 0.045; opacity: 0.55; }
/* The value sits on the arc's centre: the circle centre is at half the gauge width. */
.limit-value {
  position: absolute;
  top: calc(var(--s-5) + var(--g) * 0.5);
  left: 0; right: 0;
  translate: 0 -50%;
  font-family: var(--font-display);
  font-size: calc(var(--g) * 0.28);
  font-weight: var(--fw-light);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.limit-suffix { color: var(--accent); }
.limit-label { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--ink); }
.limit-max { margin-top: 0.2rem; font-size: var(--fs-2xs); color: var(--muted); }

/* How I work: four steps, each card ends with where that work was done. */
.approach-block { margin-top: var(--space-block); }
.approach-block > .label { margin-bottom: var(--s-3); }
.approach { display: grid; gap: var(--col-gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .approach { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.approach-step {
  display: flex;
  flex-direction: column;
  padding: var(--pad-card);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}
.approach-num { color: var(--accent); }
.approach-step h3 { margin-top: var(--s-3); font-size: var(--fs-lg); line-height: 1.2; }
.approach-step p { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--fs-sm); }
.approach-step .approach-where {
  margin-top: auto;
  padding-top: var(--s-4);
  color: var(--muted);
  font-size: var(--fs-2xs);
}

/* ============================ EXPERIENCE ================================= */
/* The rail sits a fixed 28px left of the cards at every width; on desktop
   the list moves into columns 4–12 and the dates hang in the margin. */
.timeline {
  position: relative;
  display: grid;
  gap: var(--s-5);
  padding-left: 40px;
}
@media (min-width: 900px) {
  .timeline { grid-column: 4 / -1; padding-left: 0; }
}
.timeline-rail {
  position: absolute;
  top: 8px; bottom: 8px;
  left: 12px;
  width: 1px;
  background: var(--line-strong);
}
@media (min-width: 900px) { .timeline-rail { left: -28px; } }
.timeline-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--accent), var(--flow));
  transform-origin: top;
  transform: scaleY(var(--progress, 1));
}
.role { position: relative; }
.role-node {
  position: absolute;
  left: -33px;
  top: calc(var(--pad-card) + 5.5px);
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  transition: border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}
.role-node::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring);
}
.role.is-active .role-node { border-color: var(--accent); background: var(--accent); }
.role.is-active .role-node::after { opacity: 0.45; transform: scale(1); }

.role-card { padding: var(--pad-card); }
.role-head { display: grid; gap: 0.15rem; }
.role-dates { color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 0.4rem; }
@media (min-width: 900px) {
  /* Dates move into the margin left of the rail; both centre on the company name. */
  .role { --head-mid: calc(var(--pad-card) + 0.575 * var(--fs-xl)); }
  .role-minor { --head-mid: calc(var(--pad-card) + 0.575 * var(--fs-lg)); }
  .role-node { top: calc(var(--head-mid) - 4.5px); }
  .role-dates {
    position: absolute;
    top: var(--head-mid);
    transform: translateY(-50%);
    right: calc(100% + 56px);
    /* sits in columns 1–3 */
    width: max-content;
    max-width: 22ch;
    text-align: right;
  }
  .role.is-active .role-dates { color: var(--ink); }
}
.role-company { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-heading); line-height: 1.15; }
.role-title { margin-top: 0.15rem; font-weight: var(--fw-medium); color: var(--ink-2); }
.role-points { margin-top: var(--s-4); display: grid; gap: 0.6rem; color: var(--ink-2); }
.role-points li { position: relative; padding-left: 1.4rem; }
.role-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.7rem; height: 1px;
  background: var(--accent);
}
.role-more > ul { margin-top: 0; padding-top: 0.6rem; }
.role-award { margin-top: var(--s-4); width: fit-content; display: flex; }
.role-stack {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line-strong);
  color: var(--ink-2);
  font-size: var(--fs-2xs);
  line-height: 1.8;
}
.role-minor .role-company { font-size: var(--fs-lg); }

.more-toggle {
  margin-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0;
  color: var(--accent);
}
.more-toggle svg {
  width: 12px; height: 12px;
  transition: transform var(--dur-2) var(--ease-spring);
}
.is-open .more-toggle svg { transform: rotate(180deg); }

/* ============================ CASE STUDIES =============================== */
/* One full-width card per case: the structured write-up on the left, the
   pattern diagram on the right. Stacks on narrow screens. */
.cases { display: grid; gap: var(--col-gap); }
.case { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .case { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .case .diagram { border-top: 0; border-left: var(--hairline) solid var(--line); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
}
.case-body { padding: var(--pad-card); flex: 1; }
.case-meta { display: flex; justify-content: space-between; color: var(--muted); }
.case-meta span:first-child { color: var(--accent); }
.case-title {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
}
.case-spec { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.case-spec > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding-top: var(--s-3);
  border-top: var(--hairline) solid var(--line);
}
.case-spec dt { color: var(--muted); padding-top: 0.2em; }
.case-spec dd { color: var(--ink-2); font-size: var(--fs-sm); }
.case-spec dd .chips:not(:last-child) { margin-bottom: 0.5rem; }
@media (max-width: 560px) {
  /* Narrow screens: label above value, so the text gets the full card width. */
  .case-spec > div { grid-template-columns: 1fr; gap: 0.3rem; }
}

.also {
  margin-top: var(--space-block);
  padding: var(--pad-card);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}
.also ul { margin-top: var(--s-3); display: grid; gap: 0.5rem; color: var(--ink-2); font-size: var(--fs-sm); }
.also li { padding-left: 1.4rem; position: relative; }
.also li::before { content: "+"; position: absolute; left: 0; color: var(--flow); font-family: var(--font-label); font-weight: var(--fw-medium); }

/* Mini diagrams */
.diagram {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--s-3);
  padding: var(--pad-card);
  border-top: var(--hairline) solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background:
    radial-gradient(circle at 1px 1px, var(--line-strong) 1px, transparent 1.2px) 0 0 / 16px 16px,
    var(--bg-sunk);
}
.diagram svg { width: 100%; max-width: 400px; height: auto; justify-self: center; overflow: visible; }
.diagram figcaption { color: var(--muted); font-size: var(--fs-2xs); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; }
.diagram text { font-family: var(--font-label); font-size: 11.5px; font-weight: var(--fw-medium); letter-spacing: 0.01em; fill: var(--ink-2); }
.diagram .d-sub { fill: var(--accent); font-size: 10px; }
.diagram .d-label { fill: var(--muted); font-size: 10px; }
.d-node rect, .d-node circle, .d-node polygon { fill: var(--bg-elev); stroke: var(--line-strong); }
.d-frame { fill: none; stroke: var(--line-strong); stroke-dasharray: 4 4; }
.d-decision polygon, .d-core rect { stroke: var(--accent); }
.d-window .d-bar { fill: none; stroke: var(--line-strong); }
.d-window .d-dots circle { fill: var(--line-strong); stroke: none; }
.d-aura rect { fill: var(--accent-soft); stroke: var(--accent); }
.d-bolt { fill: var(--accent); stroke: none; }
.d-lines { fill: none; stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.d-wire { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 4; }
.d-clock path { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.d-packet { fill: var(--accent); }
.d-packet-in { fill: var(--flow); }
.d-chunk { fill: var(--flow); }
.key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.6rem; }
.key-out { background: var(--accent); }
.key-in { background: var(--flow); }

/* Before/after segmented toggle (pure CSS radios). */
.seg-toggle {
  position: relative;
  justify-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
}
.seg-toggle label {
  position: relative;
  z-index: 1;
  padding: 0.25rem 0.9rem;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  transition: color var(--dur-2) var(--ease-out);
}
.seg-thumb {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--radius-pill);
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease-spring);
}
#kip-after:checked ~ .seg-toggle .seg-thumb { transform: translateX(100%); }
#kip-before:checked ~ .seg-toggle label[for="kip-before"],
#kip-after:checked ~ .seg-toggle label[for="kip-after"] { color: var(--bg); }
#kip-before:focus-visible ~ .seg-toggle label[for="kip-before"],
#kip-after:focus-visible ~ .seg-toggle label[for="kip-after"] { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-pill); }
.d-mw, .kip-after-only, .d-strike { transition: opacity var(--dur-3) var(--ease-out); }
.kip-lift { transition: transform var(--dur-3) var(--ease-out); }
.d-strike { stroke: var(--flow); stroke-width: 1.5; opacity: 0; }
.kip-after-only { opacity: 0; }
#kip-after:checked ~ svg .d-mw { opacity: 0.35; }
#kip-after:checked ~ svg .d-strike, #kip-after:checked ~ svg .kip-after-only { opacity: 1; }
/* Node labels stay centred: they rise only when the sub-label appears. */
#kip-after:checked ~ svg .kip-lift { transform: translateY(-6px); }


/* ============================== SKILLS =================================== */
.constellation {
  position: relative;
  margin-bottom: var(--space-block);
  height: clamp(340px, 30vw + 160px, 520px);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  overflow: hidden;
}
.constellation canvas { width: 100%; height: 100%; }
.constellation-readout {
  position: absolute;
  left: 1.125rem; bottom: 0.75rem;
  color: var(--muted);
  font-size: var(--fs-2xs);
  pointer-events: none;
}
html:not(.js) .constellation { display: none; }
@media (max-width: 640px) { .constellation { height: 660px; } }

.skill-groups {
  display: grid;
  gap: var(--s-5) var(--col-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.skill-group {
  padding-top: var(--s-4);
  border-top: var(--hairline) solid var(--line-strong);
  transition: opacity var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.skill-group h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--s-3);
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.01em;
}
.skill-group h3 .icon { color: var(--accent); }
.skill-evidence { margin: -0.25rem 0 var(--s-3); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.skill-groups.has-active .skill-group:not(.is-active) { opacity: 0.4; }
.skill-group.is-active { border-color: var(--accent); }
.skill-group.is-active .chips > * { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--ink); }

/* ========================== CERTIFICATIONS =============================== */
.certs {
  display: grid;
  gap: var(--col-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-feature { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .certs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cert-feature { grid-row: span 2; }
}
.cert {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 170px;
  padding: var(--pad-card);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  overflow: hidden;
  isolation: isolate;
}
.cert-top { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.cert-top .icon { color: var(--accent); width: 20px; height: 20px; }
.cert-top .pill { margin-left: auto; }
/* Names start at the same height in every card; the track line pins to the bottom. */
.cert-issuer { padding-top: var(--s-5); color: var(--muted); font-size: var(--fs-2xs); }
.cert-name {
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
}
.cert-track { margin-top: auto; padding-top: var(--s-3); color: var(--muted); font-size: var(--fs-2xs); }
.cert-feature .cert-name { font-size: calc(var(--fs-xl) * 1.3); letter-spacing: -0.03em; line-height: 1.08; max-width: 11ch; }
.cert-feature { min-height: 260px; }
.cert-retired .cert-name { color: var(--muted); }
.cert-retired .cert-top .icon { color: var(--muted); }

.awards { margin-top: var(--space-block); }
@media (min-width: 900px) { .awards { grid-column: 4 / 13; } }
.awards h3 { margin-bottom: var(--s-3); }
.awards ul { display: grid; border-top: var(--hairline) solid var(--line); }
.awards li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: var(--hairline) solid var(--line);
  color: var(--ink-2);
}
.awards li .icon { color: var(--accent); }
.awards strong { font-weight: var(--fw-heavy); color: var(--ink); }

/* ============================= EDUCATION ================================= */
.edu { display: grid; border-top: var(--hairline) solid var(--line); }
.edu-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: var(--s-5) 0;
  border-bottom: var(--hairline) solid var(--line);
}
.edu-row > .icon { color: var(--accent); margin-top: 0.15rem; }
.edu-row h3 { font-weight: var(--fw-heavy); font-size: var(--fs-base); letter-spacing: -0.01em; }
.edu-row p { color: var(--ink-2); font-size: var(--fs-sm); }
.edu-row > div, .edu-score { align-self: first baseline; }
.edu-score { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .edu { grid-column: 4 / 13; }
}

/* ============================== CONTACT ================================== */
.contact { padding-bottom: var(--space-section); }
.contact .section-note { display: flex; align-items: baseline; gap: 0.7rem; color: var(--ink); }
.contact .section-note .pulse { translate: 0 -0.1em; }
@media (min-width: 900px) { .contact-main { grid-column: 4 / 13; } }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.email-link {
  font-size: clamp(1.15rem, 0.55rem + 2.6vw, 2.5rem);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.copy-icons { position: relative; width: 1.1em; height: 1.1em; }
.copy-icons .icon { position: absolute; inset: 0; width: 100%; height: 100%; }
.copy-btn.is-copied { border-color: var(--ok); color: var(--ok); }

.contact-links { margin-top: var(--space-block); border-top: var(--hairline) solid var(--line); }
.contact-link {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 0.25rem;
  border-bottom: var(--hairline) solid var(--line);
  transition: background-color var(--dur-2) var(--ease-out);
}
.contact-link > * { transition: transform var(--dur-2) var(--ease-out); }
.contact-link > .icon:first-child { color: var(--accent); }
.contact-link .arrow { transition: transform var(--dur-2) var(--ease-spring); color: var(--muted); }
.contact-link:hover { background: var(--bg-sunk); }
.contact-link:hover > * { transform: translateX(0.5rem); }
.contact-link:hover .arrow { transform: translate(2px, -2px); color: var(--ink); }
@media (max-width: 480px) {
  .contact-link { grid-template-columns: auto 1fr auto; }
  .contact-link .muted { grid-column: 2; grid-row: 2; margin-top: -0.6rem; }
}

/* ============================== FOOTER =================================== */
.site-footer { border-top: var(--hairline) solid var(--line); padding-block: var(--s-6); color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; font-size: var(--fs-2xs); }
.egg { transition: color var(--dur-2) var(--ease-out); }
.egg:hover { color: var(--ink); }
.egg kbd { font-size: 0.95em; }

/* ========================= COMMAND PALETTE =============================== */
dialog {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  max-width: none;
  max-height: none;
}
dialog::backdrop {
  background: color-mix(in srgb, var(--bg-sunk) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.palette {
  margin: 12vh auto auto;
  width: min(620px, calc(100% - 32px));
}
.palette-box {
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.45), var(--shadow);
  overflow: hidden;
}
.palette-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  border-bottom: var(--hairline) solid var(--line);
}
.palette-field .icon { color: var(--muted); }
.palette-field input {
  flex: 1;
  height: 56px;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--fs-base);
}
.palette-field input::placeholder { color: var(--muted); }
.palette-list { max-height: min(52vh, 420px); overflow-y: auto; padding: 0.4rem; scroll-padding: 0.4rem; }
.palette-group {
  padding: 0.6rem 0.75rem 0.3rem;
  font-family: var(--font-label);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}
.palette-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink-2);
}
.palette-item .icon { color: var(--muted); }
.palette-item mark { background: none; color: var(--accent); font-weight: var(--fw-heavy); }
.palette-item .hint { margin-left: auto; font-family: var(--font-label); font-weight: var(--fw-medium); font-size: var(--fs-2xs); color: var(--muted); }
.palette-item[aria-selected="true"] { background: var(--bg-sunk); color: var(--ink); }
.palette-item[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.palette-item[aria-selected="true"] .icon { color: var(--accent); }
.palette-empty { padding: 1.5rem; text-align: center; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.palette-foot {
  display: flex;
  gap: 1.25rem;
  padding: 0.6rem 1rem;
  border-top: var(--hairline) solid var(--line);
  color: var(--muted);
  font-size: var(--fs-2xs);
}
.palette-foot kbd { margin-right: 0.2rem; }

/* ============================= TERMINAL ================================== */
/* The terminal keeps its own dark palette in both themes, as terminals do. */
.terminal {
  margin: 8vh auto auto;
  width: min(760px, calc(100% - 24px));
  height: min(520px, 76vh);
  display: none;
  flex-direction: column;
  border: 1px solid var(--t-line);
  border-radius: var(--radius-lg);
  background: var(--t-bg);
  color: var(--t-ink);
  box-shadow: var(--t-shadow);
  overflow: hidden;
}
.terminal[open] { display: flex; }
.term-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--t-line);
  color: var(--t-dim);
  font-size: var(--fs-2xs);
}
.term-dots { display: flex; gap: 6px; }
.term-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--t-line-strong); }
.term-close {
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--t-line-strong);
  border-radius: var(--radius-xs);
  color: var(--t-dim);
}
.term-close:hover { color: var(--t-ink); }
.term-out {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem 1rem 0.4rem;
  font-size: var(--fs-xs);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.term-out .t-cmd { color: var(--t-ink); }
.term-out .t-cmd::before { content: "❯ "; color: var(--t-acc); }
.term-out .t-dim { color: var(--t-dim); }
.term-out .t-acc { color: var(--t-acc); }
.term-out .t-ok { color: var(--t-ok); }
.term-out .t-flow { color: var(--t-flow); }
.term-out .t-err { color: var(--t-err); }
.term-out .t-bar { color: var(--t-flow); }
.term-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem 0.9rem;
  border-top: 1px solid var(--t-line);
}
.term-prompt { color: var(--t-acc); }
.term-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--t-ink);
  caret-color: var(--t-acc);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.terminal :focus-visible { outline-color: var(--t-acc); }
/* The terminal stays monospaced: its tables align by character count. */
.terminal .mono { font-family: var(--font-mono); font-weight: var(--fw-book); letter-spacing: var(--tracking-mono); }