/* ==========================================================================
   utpals.com — "trace"
   Spec: .claude/skills/brand-system/SKILL.md — tokens live here and nowhere else.

   1  tokens            8  skills
   2  reset + base      9  projects
   3  primitives        10 awards
   4  nav               11 education + certificates
   5  hero              12 contact + footer
   6  experience        13 responsive
   7  expertise         14 reduced motion, print
   ========================================================================== */

/* --- 1. tokens ----------------------------------------------------------- */

:root {
  /* ground */
  --black: #000000;
  --ink-1: #08080a;
  --ink-2: #101013;
  --rule: #1e1e22;
  --rule-hi: #2e2e34;
  --rule-btn: #3a3a42;

  /* text */
  --bone: #f5f5f7;
  --bone-dim: #a1a1a6;
  --slate: #86868b;
  --white: #ffffff; /* only on filled cobalt surfaces and in print */

  /* accent */
  --cobalt: #2997ff;
  --cobalt-deep: #0071e3; /* filled surfaces carrying white text (4.7:1) */
  --cobalt-press: #0066cc; /* its hover: darker, never lighter (5.6:1) */

  /* type: the system stack — SF Pro on Apple, Segoe UI on Windows, Roboto on Android */
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display',
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --fs-mono: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-xl: clamp(2rem, 3.6vw, 3rem);
  --fs-display: clamp(2.75rem, 6vw, 4.5rem);

  /* space */
  --gutter: clamp(20px, 5vw, 40px);
  --container: 1140px;
  --section-y: clamp(72px, 11vw, 128px);
  --trace-meta: 300px; /* experience: width of the company column */

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-hover: 180ms;
  --t-reveal: 420ms;

  /* liquid glass — the scrolled nav only. A nearly clear pane that bends the
     page behind it (blur, boosted saturation and brightness), lit from the top
     left: a bright specular rim fading round the edge, and an inner glow. */
  --glass: rgba(255, 255, 255, 0.05);
  --glass-solid: rgba(8, 8, 10, 0.94);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-rim: rgba(255, 255, 255, 0.55);
  --glass-rim-lo: rgba(255, 255, 255, 0.06);
  --glass-glow: rgba(255, 255, 255, 0.07);
  --glass-lens: rgba(255, 255, 255, 0.1);
  --glass-spec: rgba(255, 255, 255, 0.16);
  --glass-liquid: rgba(10, 10, 12, 0.56);
  --glass-blur: blur(16px) saturate(200%) brightness(1.1);

  color-scheme: dark;
}

/* --- 2. reset + base ----------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, p, pre, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

body {
  background: var(--black);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  letter-spacing: -0.011em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--cobalt); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}

p { color: var(--bone-dim); }

strong { color: var(--bone); font-weight: 600; }

/* --- 3. primitives ------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--rule);
}

.section--flush::before { display: none; }

.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--bone);
}

.mono {
  font-family: var(--sans);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--slate);
}

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
  max-width: 760px;
}

.sec-head .mono { color: var(--cobalt); }

.sec-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  color: var(--bone-dim);
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}

.tag:hover { color: var(--bone); border-color: var(--rule-hi); }

/* the skills a group is built on read brighter than the supporting ones */
.tag--core { color: var(--bone); border-color: var(--rule-hi); background: var(--ink-2); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 13px 22px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}

.btn__arrow { transition: transform var(--t-hover) var(--ease); }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }

.btn--primary { background: var(--cobalt-deep); color: var(--white); }
.btn--primary:hover { background: var(--cobalt-press); }

.btn--ghost { border-color: var(--rule-btn); color: var(--bone); }
.btn--ghost:hover { border-color: var(--bone-dim); background: var(--ink-1); }

/* icon-only: square, same height as its text siblings */
.btn--icon { padding: 13px; }
.btn--icon svg { width: 20px; height: 20px; }

.tlink {
  color: var(--bone);
  border-bottom: 1px solid var(--rule-hi);
  padding-bottom: 1px;
  transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}

.tlink:hover { color: var(--cobalt); border-color: var(--cobalt); }

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--cobalt-deep);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 2px;
}

.skip:focus { left: 16px; }

/* scroll reveal: main.js adds .is-revealed once, never removes it */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}

.reveal.is-revealed { opacity: 1; transform: none; }

.hero .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* --- 4. nav -------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: padding var(--t-reveal) var(--ease);
}

.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: height var(--t-reveal) var(--ease), max-width var(--t-reveal) var(--ease),
    padding var(--t-reveal) var(--ease), background var(--t-reveal) var(--ease),
    border-color var(--t-reveal) var(--ease), box-shadow var(--t-reveal) var(--ease);
}

/* the specular rim: a 1px gradient ring, brightest where the light lands */
.nav__inner::before,
.nav__links::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--glass-rim),
    var(--glass-rim-lo) 35%,
    var(--glass-rim-lo) 65%,
    var(--glass-edge)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-reveal) var(--ease);
}

/* specular highlight: a soft pool of light that follows the pointer across the
   glass (main.js writes --mx); it rests near the left edge otherwise */
.nav__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(160px 70px at var(--mx, 12%) 0%, var(--glass-spec), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-reveal) var(--ease);
}

/* Once the page moves, the bar lifts into a floating liquid-glass capsule. Its
   width is the content column plus its own padding, so the brand and the last
   link stay aligned with the page edges below. */
.nav[data-scrolled='true'] { padding-top: 10px; }

.nav[data-scrolled='true'] .nav__inner {
  width: calc(100% - 24px);
  max-width: calc(var(--container) - 2 * var(--gutter) + 48px);
  height: 52px;
  padding-inline: 24px 8px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* inner light, not elevation: the glass glows at its edges */
  box-shadow: inset 0 1px 1px var(--glass-glow), inset 0 0 16px var(--glass-glow);
}

.nav[data-scrolled='true'] .nav__inner::before,
.nav[data-scrolled='true'] .nav__inner::after { opacity: 1; }

/* Chromium: the real thing. The page bends at the rim (SVG displacement built
   by main.js), with only a whisper of blur so the bending stays visible. */
.liquid .nav[data-scrolled='true'] .nav__inner {
  background: var(--glass-liquid);
  -webkit-backdrop-filter: url(#liquid-glass) blur(4px) saturate(190%) brightness(1.08);
  backdrop-filter: url(#liquid-glass) blur(4px) saturate(190%) brightness(1.08);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav[data-scrolled='true'] .nav__inner,
  .nav__links { background: var(--glass-solid); }
}

.nav__brand {
  padding-block: 12px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--bone);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease),
    visibility 0s linear 0s;
}

/* The hero already shows the name in 4rem type, so the nav repeats it only
   once that h1 has scrolled out of view. Gated on .js so the brand stays
   visible when the script never runs. */
.js .nav:not([data-brand='show']) .nav__brand {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease),
    visibility 0s linear var(--t-hover);
}

.nav__brand span { color: var(--slate); }

.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav__link {
  position: relative;
  z-index: 1;
  padding: 9px 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--bone-dim);
  transition: color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}

/* glass controls swell slightly under the finger, like the system ones */
.nav__link:active,
.nav__toggle:active { transform: scale(1.06); }

.nav__link:hover,
.nav__link[aria-current='true'] { color: var(--bone); }

/* The current section sits under a small lens of brighter glass that slides
   from link to link (positioned by main.js). Without the script the link
   still brightens. */
.nav__lens {
  position: absolute;
  top: 50%;
  left: 0;
  right: 100%;
  height: 34px;
  border-radius: 999px;
  background: var(--glass-lens);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 10px var(--glass-glow);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--t-hover) var(--ease);
  pointer-events: none;
}

.nav__lens[data-on='true'] { opacity: 1; }

/* Liquid, not spring: main.js moves the two ends separately, the leading edge
   first and the trailing edge after it, so the lens stretches towards the new
   link and draws itself in, never overshooting. While stretched it thins, as a
   drop does. */
.nav__lens.is-flowing { animation: lens-flow 640ms cubic-bezier(0.45, 0, 0.25, 1); }

@keyframes lens-flow {
  0%, 100% { scale: 1 1; }
  45% { scale: 1 0.84; }
}

.nav__toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--bone);
  transition: transform var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}

.nav__toggle:hover { background: var(--glass-lens); }

/* three lines; when open, the outer two turn into a cross and the middle fades */
.nav__bars { position: relative; display: block; width: 18px; height: 12px; }

.nav__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--t-reveal) var(--ease), opacity var(--t-hover) var(--ease);
}

.nav__bars i:nth-child(1) { top: 0; }
.nav__bars i:nth-child(2) { top: 5.25px; }
.nav__bars i:nth-child(3) { bottom: 0; }

.nav__toggle[aria-expanded='true'] .nav__bars i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__bars i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded='true'] .nav__bars i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* --- 5. hero ------------------------------------------------------------- */

.hero { padding-top: 136px; padding-bottom: clamp(56px, 7vw, 88px); }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}

.hero__avatar {
  width: 44px;
  height: 44px;
  border-radius: 2px;
  border: 1px solid var(--rule-hi);
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--t-hover) var(--ease);
}

.hero__avatar:hover { filter: grayscale(0); }

.hero__title {
  font-size: var(--fs-display);
  max-width: 26ch;
  margin-bottom: 28px;
}

.hero__role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--bone);
  margin-bottom: 16px;
}

/* 44px hit area without changing the look */
.hero__role a { display: inline-flex; border-radius: 2px; padding-block: 10px; margin-block: -10px; }

/* same treatment as the avatar: monochrome at rest, the brand's own colour on hover */
.hero__org {
  width: auto;
  height: 24px;
  filter: grayscale(1) brightness(1.5);
  transition: filter var(--t-hover) var(--ease);
}

.hero__role a:hover .hero__org { filter: none; }

.hero__lede {
  font-size: var(--fs-md);
  max-width: 58ch;
  margin-bottom: 40px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- 6. experience ------------------------------------------------------- */

.trace { margin-top: 8px; }

.trace__rows { border-bottom: 1px solid var(--rule); }

.trace__row {
  display: grid;
  grid-template-columns: var(--trace-meta) 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  transition: background var(--t-hover) var(--ease);
}

.trace__row:hover { background: var(--ink-1); }

.trace__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* the company mark links to its website; the name beside it stays plain text */
.trace__logo {
  flex: none;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--rule-hi);
  transition: border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}

.trace__logo img { width: 100%; height: 100%; object-fit: cover; }

.trace__logo:hover { border-color: var(--bone-dim); transform: translateY(-1px); }

.trace__org {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bone);
}

/* a company with more than one role lists each with its own dates */
.trace__roles {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.trace__roles li {
  font-family: var(--sans);
  font-size: var(--fs-mono);
  letter-spacing: -0.005em;
}

.trace__roles b { display: block; font-weight: 500; color: var(--bone); }

.trace__roles > li > span {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  letter-spacing: 0;
  color: var(--slate);
}

.trace__roles i { font-style: normal; color: var(--bone-dim); }

.trace__body { min-width: 0; }

.trace__notes li {
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--bone-dim);
}

.trace__notes li + li { margin-top: 6px; }

.trace__notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--rule-hi);
}

/* the headline note of a role: brighter, slightly larger, its dash in the accent */
.trace__notes .trace__note--lead { font-size: var(--fs-base); color: var(--bone); }
.trace__notes .trace__note--lead::before { background: var(--cobalt); top: 12px; }

/* --- 7. expertise -------------------------------------------------------- */

.grid-hair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.cell {
  display: flex;
  flex-direction: column;
  background: var(--black);
  padding: clamp(28px, 3.4vw, 40px);
  transition: background var(--t-hover) var(--ease);
}

.cell:hover { background: var(--ink-1); }

.cell__k {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cobalt);
  margin-bottom: 20px;
}

.cell__t {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin-bottom: 12px;
}

.cell__d { font-size: var(--fs-base); margin-bottom: 24px; }

/* the evidence for the claim above, pinned to the bottom so the four cards line up */
.cell__proof {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--slate);
}

/* --- 8. skills ----------------------------------------------------------- */

/* label on the left, tags on the right: nothing else, so the section scans */
.stack__group {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}

.stack__group:last-child { border-bottom: 1px solid var(--rule); }

.stack__k {
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bone);
}

.stack__tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- 9. projects --------------------------------------------------------- */

.features { border: 1px solid var(--rule); }

/* text on the left, the link inline at the end of the row */
.feature {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
}

.feature + .feature { border-top: 1px solid var(--rule); }

.feature__k {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cobalt);
  margin-bottom: 18px;
}

.feature__t {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
}

.feature__d { font-size: var(--fs-base); max-width: 68ch; }

.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--slate);
}

.metrics b { color: var(--bone); font-weight: 500; }

/* --- 10. awards ---------------------------------------------------------- */

/* Same row shape as education — name, issuer, year — because they are the same
   kind of fact and the page should not learn a second pattern for it. */

.award__row {
  display: grid;
  grid-template-columns: 160px 1fr 180px 90px;
  gap: 24px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}

.award__row:last-child { border-bottom: 1px solid var(--rule); }

.award__row--plain .award__main { grid-column: 1 / 3; }

.award__fig {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule-hi);
  border-radius: 2px;
  background: var(--ink-1);
}

.award__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--t-hover) var(--ease);
}

.award__fig:hover img { filter: none; }

.award__n { font-size: var(--fs-base); font-weight: 400; color: var(--bone); }

.award__d {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--bone-dim);
  max-width: 60ch;
}

.award__i,
.award__y {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--bone-dim);
}

.award__y { text-align: right; color: var(--slate); }

/* --- 11. education + certificates ---------------------------------------- */

.edu__row {
  display: grid;
  grid-template-columns: 1fr 300px 90px;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}

.edu__row:last-child { border-bottom: 1px solid var(--rule); }

.edu__n { font-size: var(--fs-base); font-weight: 400; color: var(--bone); }

.edu__q,
.edu__y {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--bone-dim);
}

.edu__y { text-align: right; color: var(--slate); }

/* --- 12. contact + footer ------------------------------------------------ */

.contact__eyebrow { display: block; margin-bottom: 16px; color: var(--cobalt); }

.contact__title { font-size: clamp(2rem, 5vw, 3.5rem); max-width: 18ch; margin-bottom: 32px; }

.contact__lede { font-size: var(--fs-md); max-width: 54ch; margin-bottom: 48px; }

.contact__mail {
  display: inline-block;
  font-family: var(--display);
  font-weight: 560;
  font-size: clamp(1.25rem, 3.4vw, 2.25rem);
  letter-spacing: -0.03em;
  color: var(--bone);
  border-bottom: 1px solid var(--rule-hi);
  padding-bottom: 6px;
  transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}

.contact__mail:hover { color: var(--cobalt); border-color: var(--cobalt); }

.contact__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 64px;
}

.contact__cell { background: var(--black); padding: 24px; }

.contact__cell a { color: var(--bone); }
.contact__cell a:hover { color: var(--cobalt); }

.contact__k {
  display: block;
  font-size: var(--fs-mono);
  letter-spacing: -0.005em;
  color: var(--slate);
  margin-bottom: 10px;
}

.contact__v {
  display: block;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--bone);
}

.socials { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }

.socials a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--fs-mono);
  letter-spacing: -0.005em;
  color: var(--bone);
  transition: color var(--t-hover) var(--ease);
}

.socials a:hover { color: var(--cobalt); }

.socials svg { width: 15px; height: 15px; flex: none; color: var(--slate); }

.socials a:hover svg { color: var(--cobalt); }

.footer {
  position: relative;
  padding-block: 32px 40px;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-mono);
  letter-spacing: -0.005em;
  color: var(--slate);
}

.footer__inner .tlink { display: inline-flex; align-items: center; min-height: 44px; }

/* --- 13. responsive ------------------------------------------------------ */

@media (max-width: 1080px) and (min-width: 861px) {
  /* eight section links plus the brand stop fitting on one line: tighten the
     run and drop the role suffix rather than wrap the nav */
  .nav__links { gap: 0; }
  .nav__link { padding-inline: 8px; }
  .nav__brand span { display: none; }
}

@media (max-width: 1040px) {
  :root { --trace-meta: 240px; }
}

@media (max-width: 860px) {
  .nav[data-scrolled='true'] .nav__inner { padding-inline: 20px 8px; }

  /* one line in the capsule: the name alone */
  .nav__brand span { display: none; }

  /* The open menu is a second pane of the same glass under the capsule. It is
     always glass, even at the top of the page, so the links stay legible. */
  .nav__links {
    position: fixed;
    inset: 72px 12px auto 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--glass-solid);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: 24px;
    padding: 8px;
    box-shadow: inset 0 0 16px var(--glass-glow);
  }

  .nav__links::before { opacity: 1; }
  .nav__links[hidden] { display: none; }

  .nav__link { padding: 14px 16px; border-radius: 16px; }
  .nav__link[aria-current='true'] { background: var(--glass-lens); }
  .nav__lens { display: none; }
  .nav__toggle { display: grid; }

  .grid-hair { grid-template-columns: 1fr; }
  .stack__group { grid-template-columns: 1fr; gap: 12px; }
  .feature { grid-template-columns: 1fr; align-items: start; }
  .feature > div { margin-bottom: 28px; }
  .contact__meta { grid-template-columns: 1fr; }

  .award__row { grid-template-columns: 1fr; gap: 4px; }
  .award__y { text-align: left; }
  .award__fig { max-width: 360px; aspect-ratio: 16 / 9; margin-bottom: 12px; }
  .award__row--plain .award__main { grid-column: auto; }
}

@media (max-width: 760px) {
  .trace__row { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 620px) {
  .hero { padding-top: 128px; }
  .hero__title { max-width: none; }

  .edu__row { grid-template-columns: 1fr; gap: 4px; }
  .edu__y { text-align: left; }

  .award__d { margin-bottom: 4px; }
}

/* --- 14. reduced motion, print ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
}

@media print {
  body { background: var(--white); color: var(--black); }
  .nav, .socials { display: none; }
  .reveal { opacity: 1; transform: none; }
}