:root {
  --paper: #eceff2;   /* same cool grey as the portrait background */
  --surface: #f7f8fa;
  --ink: #16233f;     /* navy from the suit */
  --muted: #535e76;
  --rule: #cbd2dc;
    --night: #0e1729;  /* hero background, the suit's shadow tone */
  --night-ink: #e6ebf3;
  --light: #f2a93b;  /* the hover light and detection box */
  --wide: "wdth" 125;
  --measure: 66ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 "Archivo", system-ui, sans-serif;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
h1, h2, h3, h4 { font-variation-settings: var(--wide); line-height: 1.05; margin: 0; }
p { margin: 0 0 0.8em; max-width: var(--measure); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: 0.5rem 1rem; z-index: 2; }

.nav, main { max-width: 1160px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.nav { display: flex; justify-content: space-between; align-items: center; height: 4.5rem; }
.nav-name { font-weight: 800; font-variation-settings: var(--wide); text-decoration: none; font-size: 1.15rem; }
.nav nav { display: flex; gap: clamp(1rem, 3vw, 2rem); }
.nav nav a { text-decoration: none; color: var(--muted); }
.nav nav a:hover { color: var(--ink); }

/* Hero: dark band, the photo sits in low light until the pointer brings a light to it. */
.dark { background: var(--night); color: var(--night-ink); }
.dark .nav nav a { color: #a9b3c6; }
.dark .nav nav a:hover { color: var(--night-ink); }
.dark :focus-visible { outline-color: var(--light); }
.hero {
  max-width: 1160px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 clamp(2rem, 5vw, 4rem);
  grid-template-areas: "name name" "text photo"; align-items: end;
}
.hero h1 { grid-area: name; }
.hero-text { grid-area: text; }
.portrait { grid-area: photo; }
.hero-text { padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero h1 { font-size: clamp(2.6rem, 8.2vw, 7.5rem); margin-bottom: clamp(1rem, 3vw, 2rem); font-weight: 850; letter-spacing: -0.015em; }
.role { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; font-variation-settings: var(--wide); margin: 0 0 1.25rem; }
.intro { font-size: 1.15rem; color: #a9b3c6; max-width: 40ch; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.btn {
  display: inline-block; padding: 0.8rem 1.4rem; border: 2px solid currentColor; border-radius: 999px;
  text-decoration: none; font-weight: 600;
}
.btn-primary { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.btn:hover { background: var(--night-ink); color: var(--night); }

.portrait { margin: 0; display: grid; grid-template-columns: 1fr 9.5rem; align-items: center; gap: 1rem; }
.photo { position: relative; }
.photo img { width: 100%; }
.dim { filter: brightness(0.22) saturate(0.5); }
.lit {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s;
  -webkit-mask-image: radial-gradient(circle 170px at var(--mx, 50%) var(--my, 35%), #000 30%, transparent 75%);
          mask-image: radial-gradient(circle 170px at var(--mx, 50%) var(--my, 35%), #000 30%, transparent 75%);
}
/* A detection box around the face, like the YOLO output from Kha's own projects. */
.box {
  position: absolute; left: 17%; top: 3%; width: 63%; height: 61%;
  border: 2px solid var(--light); opacity: 0; transition: opacity 0.35s 0.15s;
}
.box span {
  position: absolute; left: -2px; bottom: 100%; background: var(--light); color: var(--night);
  font-weight: 700; font-size: 0.85rem; padding: 0.1rem 0.45rem;
}
.box span::after { content: " 0.99"; font-weight: 500; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.notes li {
  border-left: 2px solid var(--light); padding-left: 0.7rem; font-weight: 600; font-size: 0.95rem;
  opacity: 0; transform: translateX(-0.5rem); transition: opacity 0.3s, transform 0.3s;
}
.portrait:hover .lit, .portrait:hover .box, .portrait:hover .notes li { opacity: 1; transform: none; }
.portrait:hover .notes li:nth-child(2) { transition-delay: 0.08s; }
.portrait:hover .notes li:nth-child(3) { transition-delay: 0.16s; }
.portrait:hover .notes li:nth-child(4) { transition-delay: 0.24s; }

/* Touch screens have no hover: show the photo lit, with box and notes. */
@media (hover: none) {
  .dim { filter: none; }
  .lit { display: none; }
  .box, .notes li { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lit, .box, .notes li { transition: none; }
}

/* Sections */
.section:first-child { border-top: 0; }
.section { padding: clamp(3rem, 7vw, 6rem) 0; border-top: 2px solid var(--ink); }
.section > h2 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; margin-bottom: 2rem; }
.lede { color: var(--muted); margin-top: -1.2rem; }

/* Projects: three panels on one page. The open one is wide; closed ones are dark tabs with
   vertical titles. Opening animates the widths; the body fades in after the panel has grown. */
.panels { display: flex; gap: 0.75rem; height: clamp(26rem, 64vh, 38rem); }
.panel {
  flex: 0 0 5rem; min-width: 0; position: relative; overflow: hidden; border-radius: 6px;
  display: flex; flex-direction: column; background: var(--ink); color: var(--paper);
  transition: flex 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s,
    opacity 0.6s calc(0.15s + var(--i) * 0.12s), transform 0.6s calc(0.15s + var(--i) * 0.12s);
}
.panel.open { flex: 1 1 0; background: var(--surface); color: var(--ink); }
.panel:not(.open):hover { background: #22325a; }

.panel-head {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 0.4rem;
  padding: 1.25rem 1.5rem 0.75rem; flex-direction: column;
}
.panel-head:focus-visible { outline: 3px solid var(--light); outline-offset: -3px; }
.panel-tag { font-size: 0.9rem; color: var(--muted); }
.panel-title { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 750; font-variation-settings: var(--wide); line-height: 1.05; }
.panel:not(.open) .panel-head {
  flex: 1; padding: 1.5rem 0; align-items: center; justify-content: flex-end;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.panel:not(.open) .panel-tag { color: #a9b3c6; }
.panel:not(.open) .panel-title { font-size: 1.15rem; white-space: nowrap; }
.panel.open .panel-head { cursor: default; }

.panel-body {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 1.5rem;
  padding: 0.5rem 1.5rem 1.5rem; opacity: 0; transition: opacity 0.35s;
}
.panel:not(.open) .panel-body { display: none; }
.panel.open .panel-body { opacity: 1; transition-delay: 0.3s; }
@starting-style { .panel.open .panel-body { opacity: 0; } }
.panel-text { overflow-y: auto; padding-right: 0.25rem; }
.panel-text p { font-size: 1rem; }

.media {
  background: var(--ink); color: var(--paper); border-radius: 4px; min-height: 12rem;
  display: grid; place-items: center; overflow: hidden;
}
.media video { width: 100%; height: 100%; object-fit: cover; }
/* A YouTube video (16:9) or 3D model (square) gets a wider column and a box at the top. */
.panel-body:has(iframe, model-viewer) { grid-template-columns: 1fr 1fr; }
.media:has(iframe) { align-self: start; aspect-ratio: 16 / 9; min-height: 0; }
.media:has(model-viewer) { align-self: start; aspect-ratio: 1; min-height: 0; }
.media iframe { width: 100%; height: 100%; border: 0; }
.media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.media model-viewer { width: 100%; height: 100%; background: var(--paper); }
.spec { color: var(--muted); font-size: 0.95rem; }
.sheet { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--rule); font-size: 0.92rem; line-height: 1.45; }
.sheet dt { font-weight: 700; }
.sheet dd { margin: 0; color: var(--muted); }
.result { color: var(--muted); }
.result strong { display: block; color: var(--ink); font-size: 2.2rem; font-weight: 800; font-variation-settings: var(--wide); line-height: 1; }
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.6rem 0 0; font-weight: 600; }

/* Scroll reveal (classes set in main.js): fade up in order when the page comes into view. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(1.25rem);
    transition: opacity 0.7s var(--d), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d);
  }
  .in .reveal { opacity: 1; transform: none; }
  .section:not(.in) .panel { opacity: 0; transform: translateY(2.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .panel-body { transition: none; }
}

.skills { display: grid; gap: 0; margin: 0; }
.skills > div { display: grid; grid-template-columns: 14rem 1fr; gap: 1rem 2rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.skills dt { font-weight: 700; font-variation-settings: var(--wide); }
.skills dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }

/* AMR on the Skills page: parked below the list; on big screens it drives in from the right edge and
   parks in the bottom-left corner each time the page comes into view (.in, set in main.js). */
.amr { display: block; width: 6rem; margin-top: 2rem; pointer-events: none; overflow: visible; }
.amr .lamp { fill: var(--light); stroke: var(--ink); stroke-width: 1.5; }
.amr .wheel { transform-box: fill-box; transform-origin: center; }
@media (min-width: 761px) and (min-height: 640px) {
  #skills { position: relative; }
  .amr { position: absolute; left: 0; bottom: clamp(0.75rem, 3vh, 2rem); width: 9rem; margin: 0; }
}
@media (min-width: 761px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  html { overflow-x: clip; } /* the AMR waits off the right edge; don't let that add a sideways scroll */
  #skills:not(.in) .amr { transform: translateX(100vw); }
  #skills.in .amr { transition: transform 2.8s cubic-bezier(0.25, 0.6, 0.3, 1) 0.3s; }
  /* Turns roughly match the distance driven: about 1100 px over a 24 px wheel. */
  #skills:not(.in) .amr .wheel { rotate: 5200deg; }
  #skills.in .amr .wheel { rotate: 0deg; transition: rotate 2.8s cubic-bezier(0.25, 0.6, 0.3, 1) 0.3s; }
}

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.about-grid p { font-size: 1.15rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.when { color: var(--muted); font-variant-numeric: tabular-nums; }

.contact h2 { margin-bottom: 1.5rem; }
.big-email { font-size: clamp(1.4rem, 5vw, 3.5rem); font-weight: 750; font-variation-settings: var(--wide); overflow-wrap: anywhere; }
.contact-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 2rem 0 0; font-weight: 600; }

.foot { margin-top: clamp(3rem, 8vh, 6rem); color: var(--muted); font-size: 0.9rem; }

/* One page per scroll on screens big enough to fit a page. Phones scroll freely: their pages are
   taller than the screen, and forced snapping there hides content. */
@media (min-width: 761px) and (min-height: 640px) {
  html { scroll-snap-type: y mandatory; }
  .dark, .section { min-height: 100vh; scroll-snap-align: start; }
  .dark { display: flex; flex-direction: column; }
  .hero { flex: 1; width: 100%; }
  .section { display: flex; flex-direction: column; justify-content: center; border-top: 0; padding-block: clamp(2rem, 6vh, 4rem); }
  .section > h2 { font-size: clamp(2.4rem, 7vh, 4rem); margin-bottom: clamp(1rem, 3vh, 2rem); }
  .hero h1 { font-size: min(8.2vw, 12vh); }
  .nav { width: 100%; }
  .hero { padding-top: clamp(1rem, 3vh, 2.5rem); }
  .photo { width: fit-content; }
  .photo img { width: auto; max-height: 50vh; }
  .hero-text { padding-bottom: clamp(2rem, 7vh, 5rem); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Robot arm that pulls project panels open (drawn in main.js). */
.arm { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.25s; overflow: visible; }
.arm.show { opacity: 1; }
:is(.arm, .amr) .link { fill: #f3f5f8; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
:is(.arm, .amr) .cap { fill: #d5dbe3; stroke: var(--ink); stroke-width: 2.5; }
:is(.arm, .amr) .ring { fill: #c9d1dc; stroke: var(--ink); stroke-width: 2; }
:is(.arm, .amr) * { vector-effect: non-scaling-stroke; }
.arm .finger { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }

@media (max-width: 760px) {
  .about-grid, .skills > div { grid-template-columns: 1fr; }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "name" "text"; }
  .hero { align-items: start; }
  .hero-text { padding-bottom: 3rem; }
  .portrait { grid-template-columns: 1fr 7.5rem; margin-bottom: 1.5rem; }
  .skills > div { gap: 0.4rem; }
  /* Phones: panels stack and all stay open. */
  .panels { flex-direction: column; height: auto; }
  .panel, .panel.open { flex: none; background: var(--surface); color: var(--ink); }
  .panel .panel-head, .panel:not(.open) .panel-head { writing-mode: horizontal-tb; transform: none; padding: 1.25rem 1.25rem 0.75rem; align-items: start; cursor: default; }
  .panel:not(.open) .panel-tag { color: var(--muted); }
  .panel:not(.open) .panel-title { font-size: 1.4rem; white-space: normal; }
  .panel-body, .panel:not(.open) .panel-body { display: grid; grid-template-columns: 1fr; opacity: 1; padding: 0 1.25rem 1.25rem; }
  .media { aspect-ratio: 16 / 9; min-height: 0; }
}