/* ==========================================================================
   Souhaib Moustajib — Portfolio
   --------------------------------------------------------------------------
   Palette:   black on white (white on black in dark mode) with one navy
              accent. No gradients and no secondary hues.
   Type:      platform system fonts, size-specific tracking and leading.
   Materials: translucent chrome over scrolling content, scroll-edge hairline.
   Motion:    spring timing defined by damping ratio + response. The CSS
              fallbacks below approximate it; spring.js swaps in exact
              linear() curves sampled from the same physics the JS uses.
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */
:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --surface: #f5f6f8;
  --surface-hover: #eff1f4;
  --raised: #ffffff;
  --well: #eceef2;
  --fill: rgba(12, 22, 44, 0.05);
  --fill-strong: rgba(12, 22, 44, 0.09);

  --label: #0b0c0e;
  --label-2: #4a5161;
  --label-3: #7b8394;
  --hairline: rgba(12, 22, 44, 0.09);
  --hairline-strong: rgba(12, 22, 44, 0.16);

  /* Navy is the only accent. */
  --accent: #16294a;
  --accent-hover: #1e365f;
  --accent-text: #1a3160;
  --accent-soft: rgba(22, 41, 74, 0.07);
  --accent-soft-hover: rgba(22, 41, 74, 0.12);
  --on-accent: #ffffff;
  --connector: rgba(22, 41, 74, 0.28);

  --material: rgba(255, 255, 255, 0.76);
  --material-heavy: rgba(255, 255, 255, 0.95);
  --material-edge: rgba(12, 22, 44, 0.1);
  --glass: rgba(255, 255, 255, 0.8);
  --glass-edge: rgba(12, 22, 44, 0.08);

  --card-ring: transparent;

  /* Maze canvas palette — rgb triplets so the canvas can blend them. */
  --maze-wall: 236 238 242;
  --maze-corridor: 255 255 255;
  --maze-heat-from: 150 168 205;
  --maze-heat-to: 22 41 74;
  --maze-heat-mix: 0.13;
  --maze-path: #16294a;
  --maze-start: #0b0c0e;

  --radius-xl: 1.5rem;
  --radius-l: 1.125rem;
  --radius-m: 0.875rem;
  --radius-pill: 999px;
  --inset: 0.5rem;

  --content: 64rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --nav-h: 3.25rem;

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Critically damped springs (damping 1.0): response 0.4s and 0.28s. */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-spring: 600ms;
  --ease-spring-quick: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-spring-quick: 430ms;
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #0b1222;
    --surface-hover: #0f182b;
    --raised: #131c31;
    --well: #070c18;
    --fill: rgba(255, 255, 255, 0.07);
    --fill-strong: rgba(255, 255, 255, 0.11);

    --label: #eef0f4;
    --label-2: #a4acbc;
    --label-3: #6f788a;
    --hairline: rgba(255, 255, 255, 0.09);
    --hairline-strong: rgba(255, 255, 255, 0.15);

    /* Navy fills stay navy; navy text lifts to a pale tint so it stays legible on black. */
    --accent: #22407a;
    --accent-hover: #2a4b8a;
    --accent-text: #a9bde6;
    --accent-soft: rgba(140, 170, 230, 0.12);
    --accent-soft-hover: rgba(140, 170, 230, 0.18);
    --connector: rgba(169, 189, 230, 0.32);

    --material: rgba(0, 0, 0, 0.72);
    --material-heavy: rgba(5, 9, 18, 0.95);
    --material-edge: rgba(255, 255, 255, 0.1);
    --glass: rgba(19, 28, 49, 0.78);
    --glass-edge: rgba(255, 255, 255, 0.08);

    --card-ring: rgba(255, 255, 255, 0.05);

    --maze-wall: 7 12 24;
    --maze-corridor: 22 32 54;
    --maze-heat-from: 60 84 130;
    --maze-heat-to: 169 189 230;
    --maze-heat-mix: 0.22;
    --maze-path: #a9bde6;
    --maze-start: #eef0f4;
  }
}

/* -------------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-text);
  font-size: 1.0625rem;           /* 17px body, Apple’s reading size */
  line-height: 1.55;
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Ease light/dark switches instead of an abrupt brightness jump. */
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

img, svg, canvas { display: block; max-width: 100%; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
code, pre { font-family: var(--font-mono); }
strong { font-weight: 600; }

::selection { background: var(--accent-soft-hover); }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Sections receive focus after menu navigation; they need no ring. */
section[tabindex="-1"]:focus { outline: none; }

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.625rem;
  left: 0.625rem;
  z-index: 300;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--label);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  translate: 0 -200%;
}
.skip-link:focus { translate: 0 0; }

.top-sentinel {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 8px;
  pointer-events: none;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--content));
  margin-inline: auto;
}

/* -------------------------------------------------------------- Typography */
/* Tracking tightens as size grows; leading tightens with it. */
.display {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 1.6rem + 2.8vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}

.title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.024em;
  font-weight: 600;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--label-2);
  text-wrap: pretty;
}

.eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent-text);
  margin-bottom: 0.5rem;
}

.accent { color: var(--accent-text); }

/* ----------------------------------------------------------------- Buttons */
.btn {
  --btn-bg: var(--fill);
  --btn-bg-hover: var(--fill-strong);
  --btn-fg: var(--label);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.375rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Release springs back; the press itself (below) is near-instant. */
  transition:
    background-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out),
    scale var(--dur-spring-quick) var(--ease-spring-quick);
}
.btn:active {
  scale: 0.96;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), scale 0.09s var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { background: var(--btn-bg-hover); }
}

.btn-filled { --btn-bg: var(--accent); --btn-bg-hover: var(--accent-hover); --btn-fg: var(--on-accent); }
.btn-tinted { --btn-bg: var(--accent-soft); --btn-bg-hover: var(--accent-soft-hover); --btn-fg: var(--accent-text); }

.btn-large { min-height: 3rem; padding: 0 1.5rem; }
.btn-large .icon { font-size: 1.125rem; }

.btn-small {
  min-height: 1.875rem;
  padding: 0 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
/* Small visual, full-size hit target. */
.btn-small::after {
  content: "";
  position: absolute;
  inset: -0.4375rem -0.25rem;
}

.link-chevron {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--accent-text);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.link-chevron .icon {
  font-size: 0.9em;
  stroke-width: 2;
  transition: translate var(--dur-spring-quick) var(--ease-spring-quick);
}
@media (hover: hover) {
  .link-chevron:hover { text-decoration: underline; text-underline-offset: 0.18em; }
  /* Hint in the direction of travel. */
  .link-chevron:hover .icon { translate: 0.125rem 0; }
}
.link-chevron:active { opacity: 0.7; }

/* -------------------------------------------------------------- Navigation */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
}

.nav-bar {
  position: relative;
  height: var(--nav-h);
  isolation: isolate;
}
/* Translucent material: content scrolls underneath instead of behind an opaque strip. */
.nav-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background-color 0.3s var(--ease-out);
}
/* Scroll-edge effect: the hairline only exists once content is under the bar. */
.nav-bar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--material-edge);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.nav.is-scrolled .nav-bar::after { opacity: 1; }
.nav.is-open .nav-bar::before { background: var(--material-heavy); }

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-brand {
  margin-right: auto;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.016em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.nav-link {
  position: relative;
  z-index: 1;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  letter-spacing: -0.006em;
  color: var(--label-2);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.nav-link:hover,
.nav-link[aria-current] { color: var(--label); }
.nav-link:active { opacity: 0.65; }

/* Active-section pill. Position and width are driven by two springs in main.js. */
.nav-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 2rem;
  margin-top: -1rem;
  border-radius: var(--radius-pill);
  background: var(--fill);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
  will-change: transform, width;
  pointer-events: none;
}
.nav-indicator.is-visible { opacity: 1; }

.nav-cta { margin-left: 0.5rem; }

.nav-menu-btn {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-menu-btn span {
  grid-area: 1 / 1;
  width: 1.125rem;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-spring) var(--ease-spring);
}
.nav-menu-btn span:first-child { transform: translateY(-3.5px); }
.nav-menu-btn span:last-child { transform: translateY(3.5px); }
.nav-menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.nav-menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* Mobile sheet: grows down out of the bar and returns the same way. */
.nav-sheet {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  padding: 1rem var(--gutter) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--material-heavy);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.75rem;
  transition:
    opacity 0.24s var(--ease-out),
    translate var(--dur-spring-quick) var(--ease-spring-quick),
    visibility 0s linear 0.24s;
}
.nav.is-open .nav-sheet {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition:
    opacity 0.3s var(--ease-out),
    translate var(--dur-spring) var(--ease-spring),
    visibility 0s;
}
.nav-sheet-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  text-decoration: none;
  opacity: 0;
  translate: 0 -0.5rem;
  transition: opacity 0.2s var(--ease-out), translate var(--dur-spring-quick) var(--ease-spring-quick);
  -webkit-tap-highlight-color: transparent;
}
.nav-sheet-list a .icon { font-size: 0.75em; color: var(--label-2); }
.nav-sheet-list a:active { opacity: 0.6; }
.nav.is-open .nav-sheet-list a {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(var(--i) * 35ms + 60ms);
  transition-duration: 0.35s, var(--dur-spring);
}

@media (max-width: 47.99rem) {
  .nav-links, .nav-cta { display: none; }
  .nav-menu-btn { display: inline-grid; }
}
@media (min-width: 48rem) {
  .nav-sheet { display: none; }
}

/* -------------------------------------------------------------------- Hero */
.hero {
  padding: calc(var(--nav-h) + clamp(3rem, 9vh, 6rem)) 0 clamp(3.5rem, 7vw, 5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--label-2);
}
.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-text);
  box-shadow: 0 0 0 3px var(--accent-soft-hover);
}

.hero-kicker {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.014em;
}
.hero-kicker span { color: var(--label-3); padding: 0 0.125rem; }

.hero .display {
  margin-top: 0.5rem;
  max-width: 13em;
}

.hero-lede {
  max-width: 34rem;
  margin-top: 1.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

.hero-photo {
  justify-self: end;
  width: min(100%, 22rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--card-ring);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(3rem, 7vw, 4.5rem);
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0.125rem 1.25rem;
  border-left: 1px solid var(--hairline);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat dd {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.026em;
  font-variant-numeric: tabular-nums;
}
.stat dt {
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.003em;
  color: var(--label-2);
  max-width: 13rem;
}

@media (max-width: 47.99rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-photo {
    order: -1;
    justify-self: start;
    width: min(11rem, 44vw);
    border-radius: var(--radius-l);
  }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------- Sections */
/* One background throughout; a hairline at the top of each section marks the break. */
.section { padding-bottom: clamp(4rem, 8vw, 6rem); }
.section > .container {
  padding-top: clamp(3.5rem, 7vw, 5rem);
  border-top: 1px solid var(--hairline);
}

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.section-head .lede { margin-top: 0.875rem; }

/* ------------------------------------------------------------------- Cards */
.card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px var(--card-ring);
}

/* Whole-card links: tone shift on hover, compress on press, spring back on release. */
.card--link {
  transition:
    background-color 0.25s var(--ease-out),
    scale var(--dur-spring-quick) var(--ease-spring-quick);
}
@media (hover: hover) {
  .card--link:hover { background: var(--surface-hover); }
}
.card--link:active {
  scale: 0.985;
  transition: background-color 0.25s var(--ease-out), scale 0.1s var(--ease-out);
}

.stretched { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-xl);
}
.stretched:focus-visible { outline: none; }
.stretched:focus-visible::after {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.badge-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.tags li {
  padding: 0.1875rem 0.5625rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.35;
  color: var(--label-2);
}

/* --------------------------------------------------------- Featured project */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: var(--inset);
}
.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  padding-right: 0;
}
.feature-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
}
.feature-sub {
  margin-top: -0.75rem;
  color: var(--label-2);
}

.checklist {
  display: grid;
  gap: 1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--label-2);
}
.checklist li {
  display: grid;
  grid-template-columns: 1.375rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.checklist .icon {
  width: 1.375rem;
  height: 1.375rem;
  padding: 0.25rem;
  margin-top: 0.0625rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  stroke-width: 2.5;
}
.checklist strong { color: var(--label); }
.feature-link { margin-top: auto; padding-top: 0.25rem; }

/* Architecture diagram */
.arch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: calc(var(--radius-xl) - var(--inset));  /* concentric with the card */
  background: var(--well);
}
.arch-node {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-m);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.arch-node--edge { box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.arch-node--stack { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.arch-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 1.125rem;
}
.arch-icon .icon { stroke-width: 1.9; }
.arch-text { min-width: 0; }
.arch-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.arch-sub {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--label-2);
}
.arch-link,
.arch-fork {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arch-link { height: 2.75rem; }
.arch-link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--connector);
}
.arch-fork {
  --c: calc((100% - 0.75rem) / 4);  /* centre of each column in .arch-pair */
  height: 3.5rem;
}
.arch-fork::before {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  left: var(--c);
  right: var(--c);
  border: 1.5px solid var(--connector);
  border-bottom: 0;
  border-radius: 0.75rem 0.75rem 0 0;
}
.arch-fork::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 50%;
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--connector);
}
.arch-link span,
.arch-fork span {
  position: relative;
  z-index: 1;
  padding: 0.125rem 0.5625rem;
  border-radius: var(--radius-pill);
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--label-2);
}
.arch-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 55.99rem) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature-copy { padding-right: clamp(1.5rem, 3vw, 2.25rem); padding-bottom: 0.5rem; }
}

/* ---------------------------------------------------------------- Projects */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.project--wide { grid-column: span 2; }

.project {
  display: flex;
  flex-direction: column;
}
.project-visual {
  position: relative;
  margin: var(--inset) var(--inset) 0;
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - var(--inset));
  background: var(--well);
}
.project-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.75rem 1.625rem;
}
.project-kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--label-2);
}
.project-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.016em;
  overflow-wrap: anywhere;
}
.project-desc {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--label-2);
}
.project-hint { color: var(--label); }
.project-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.875rem;
}
.project-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: none;
}
.project-link .icon {
  font-size: 0.85em;
  stroke-width: 2;
  transition: translate var(--dur-spring-quick) var(--ease-spring-quick);
}
@media (hover: hover) {
  .card--link:hover .project-link .icon,
  a.project-link:hover .icon { translate: 0.125rem -0.125rem; }
}

/* Maze */
.project--maze .project-visual { height: clamp(16rem, 28vw, 20rem); }
.maze canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.glass-chip,
.glass-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border-radius: var(--radius-pill);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 4px 12px -4px rgba(0, 0, 0, 0.12);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  color: var(--label);
}
.glass-chip { padding: 0.4375rem 0.75rem; font-variant-numeric: tabular-nums; }
.maze-hud {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  pointer-events: none;
}
.maze-hud-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--maze-path);
}
.glass-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: scale var(--dur-spring-quick) var(--ease-spring-quick);
}
.glass-btn::after { content: ""; position: absolute; inset: -0.25rem; }
.glass-btn .icon { font-size: 1rem; stroke-width: 2; }
.glass-btn:active { scale: 0.95; transition-duration: 0.09s; }

/* More on GitHub */
.more-list {
  display: grid;
  margin-top: 0.5rem;
}
.more-list li + li { border-top: 1px solid var(--hairline); }
.more-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.more-list a > span { display: grid; gap: 0.125rem; }
.more-list strong { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.more-list a span span { font-size: 0.875rem; color: var(--label-2); }
.more-list .icon { color: var(--accent-text); stroke-width: 2; transition: translate var(--dur-spring-quick) var(--ease-spring-quick); }
@media (hover: hover) {
  .more-list a:hover .icon { translate: 0.125rem -0.125rem; }
  .more-list a:hover strong { color: var(--accent-text); }
}
.more-list a:active { opacity: 0.6; }
.project-all { margin-top: auto; padding-top: 0.75rem; }

@media (max-width: 39.99rem) {
  .projects-grid { grid-template-columns: minmax(0, 1fr); }
  .project--wide { grid-column: auto; }
  .project--maze .project-visual { height: 18rem; }
  .project-body { padding-inline: 1.375rem; }
}

/* ------------------------------------------------------------------ Skills */
/* A plain two-column list: category on the left, what's in it on the right. */
.skills-list { border-top: 1px solid var(--hairline); }
.skill-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75rem 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline);
}
.skill-row dt {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}
.chips li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--fill);
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: -0.003em;
}
.chips .is-strong {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}
.chips small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

@media (max-width: 47.99rem) {
  .skill-row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------- Education */
.edu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
}
.edu-main {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}
.edu-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--label-2);
}
.edu-title {
  margin-top: 1.125rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.edu-sub { margin-top: 0.375rem; color: var(--label-2); }
.edu-body { margin-top: 1.25rem; color: var(--label-2); max-width: 34rem; }

.edu-side { padding: 1.5rem 1.75rem; }
.edu-side p { color: var(--label-2); font-size: 1rem; }
.side-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin-bottom: 0.625rem;
}

.lang-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--hairline);
  font-size: 1rem;
  font-weight: 500;
}
.lang-list li:first-child { border-top: 0; padding-top: 0.25rem; }
.level {
  padding: 0.1875rem 0.5625rem;
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--label-2);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.75rem;
}
.cycle li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem 0.4375rem 0.4375rem;
  border-radius: var(--radius-pill);
  background: var(--fill);
  font-size: 0.9375rem;
  font-weight: 500;
}
.cycle li span {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cycle li + li::before {
  content: "";
  width: 0.875rem;
  height: 1.5px;
  margin-left: -1.125rem;
  margin-right: 0.125rem;
  background: var(--connector);
  order: -1;
}
.cycle li + li { margin-left: 0.75rem; }

@media (max-width: 47.99rem) {
  .edu-grid { grid-template-columns: minmax(0, 1fr); }
  .edu-main { grid-row: auto; }
}

/* ----------------------------------------------------------------- Contact */
.contact-lede { max-width: 32rem; margin-top: 0.875rem; }
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.contact-email {
  margin-top: 1.125rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--label-2);
  user-select: all;
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: 2rem;
}

/* Copy button: the confirmation happens on the control that caused it. */
.copy-icons { display: grid; font-size: 1.125rem; }
.copy-icons .icon {
  grid-area: 1 / 1;
  transition: opacity 0.18s var(--ease-out), scale var(--dur-spring-quick) var(--ease-spring-quick);
}
.copy-icons .icon-check { opacity: 0; scale: 0.5; stroke-width: 2.25; }
.copy-btn.is-copied .icon-copy { opacity: 0; scale: 0.5; }
.copy-btn.is-copied .icon-check { opacity: 1; scale: 1; }
.copy-btn.is-copied { --btn-bg: var(--accent); --btn-bg-hover: var(--accent); --btn-fg: var(--on-accent); }

/* ------------------------------------------------------------------ Footer */
.footer {
  padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--label-2);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--label);
  text-decoration: none;
}
.footer-top:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* ------------------------------------------------------------------ Reveal */
/* Only hidden when JS is present, so content never depends on a script. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 1rem;
  transition:
    opacity 0.7s var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--dur-spring) var(--ease-spring) var(--reveal-delay, 0ms);
}
.js .card--link[data-reveal] {
  transition:
    opacity 0.7s var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--dur-spring) var(--ease-spring) var(--reveal-delay, 0ms),
    background-color 0.25s var(--ease-out),
    scale var(--dur-spring-quick) var(--ease-spring-quick);
}
.js [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ------------------------------------------------------------ Accessibility */
@media (prefers-reduced-motion: reduce) {
  /* Keep comprehension cues (opacity, colour); drop travel and spring overshoot. */
  .js [data-reveal] { translate: none; transition: opacity 0.3s ease; }
  .card--link,
  .js .card--link[data-reveal] { transition: opacity 0.3s ease, background-color 0.3s ease; }
  .btn:active, .card--link:active, .glass-btn:active { scale: none; }
  .nav-sheet, .nav.is-open .nav-sheet { translate: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  .nav.is-open .nav-sheet { transition: opacity 0.2s ease, visibility 0s; }
  .nav-sheet-list a, .nav.is-open .nav-sheet-list a { translate: none; transition: opacity 0.2s ease; transition-delay: 0s; }
  .nav-menu-btn span, .link-chevron .icon, .project-link .icon, .more-list .icon { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --material: var(--bg);
    --material-heavy: var(--bg);
    --glass: var(--raised);
  }
  .nav-bar::before, .nav-sheet, .glass-chip, .glass-btn {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --label-2: #2e3442;
    --hairline: rgba(0, 0, 0, 0.32);
    --hairline-strong: rgba(0, 0, 0, 0.5);
    --material: var(--bg);
    --card-ring: rgba(0, 0, 0, 0.4);
  }
  .nav-bar::after { opacity: 1; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --label-2: #d1d5de;
    --hairline: rgba(255, 255, 255, 0.35);
    --hairline-strong: rgba(255, 255, 255, 0.5);
    --card-ring: rgba(255, 255, 255, 0.4);
  }
}

@media (forced-colors: active) {
  .card { border: 1px solid CanvasText; }
  .nav-indicator { display: none; }
  .nav-link[aria-current] { text-decoration: underline; }
}

/* ------------------------------------------------------------------- Print */
@media print {
  .nav, .skip-link, .maze, .glass-btn, .contact-actions, .footer-top { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-bottom: 1.5rem; }
  .section > .container { padding-top: 1.5rem; }
  .hero { padding-top: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .js [data-reveal] { opacity: 1; translate: none; }
}