/* =====================================================================
   PORTFOLIO v2 — one scrolling page, black and white

   Black first, white second, grey only in support — the same greyscale
   as the portrait. Structure comes from type and hairlines rather than
   boxes; glass is kept for the navbar, the form and the post cards.

   Type: IBM Plex — Serif (classic) for display, Sans for reading,
   Mono (technical) for labels, numbers and navigation.

   Motion is gated on html.js so nothing is ever hidden without the
   script that reveals it, and collapses under prefers-reduced-motion.
   ===================================================================== */

:root {
  --bg: #0a0a0b;
  --ink: #f4f4f5;
  --ink-2: #c4c4c9;
  --ink-3: #8f8f96;
  --white: #ffffff;
  --on-white: #0a0a0b;
  --gold: #c9a227;
  --gold-2: #f3d27a;
  --gold-rgb: 214, 175, 74;
  --wood-hi: #8a5a2e;
  --wood: #6a3f1c;
  --wood-lo: #4a2a11;
  --leaf: linear-gradient(180deg, #fff0bf 0%, #f0cd6e 38%, #c99a2e 70%, #9c7219 100%);
  --wood-grain:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(255, 220, 170, 0.05) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 45%, var(--wood-lo));

  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.2);

  --glass: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  --glass-edge: rgba(255, 255, 255, 0.14);

  --gutter: clamp(20px, 5vw, 56px);
  --wrap: 1240px;

  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* long, soft ease-out: things arrive quickly and settle slowly */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

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

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  /* no background here on purpose, so <body>'s colour becomes the canvas */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.has-intro { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--white); color: var(--on-white); }

:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 1300;
  padding: 10px 16px;
  background: var(--white);
  color: var(--on-white);
  font: 600 12px var(--mono);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: none; }

svg.ico { width: 1em; height: 1em; flex: 0 0 auto; }

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

/* ---------------------------------------------------------------
   Film grain — a fixed, faintly moving noise layer over everything
   --------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 950;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------------
   Intro — a counter and a curtain, once per visit
   --------------------------------------------------------------- */
.intro { display: none; }
html.has-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 5vw, 56px);
  background: #000;
  transition: transform 1.05s var(--ease-in-out);
}
.intro.is-done { transform: translateY(-100%); }
.intro__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.intro__name {
  font: 500 clamp(26px, 3.6vw, 52px) / 1 var(--serif);
  letter-spacing: -0.015em;
  animation: introUp 0.9s var(--ease) both;
}
.intro__num {
  font: 400 clamp(64px, 11vw, 168px) / 0.85 var(--serif);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  animation: introUp 0.9s var(--ease) 0.08s both;
}
.intro__num small { font-size: 0.32em; margin-left: 0.08em; color: var(--ink-3); }
.intro__bar {
  height: 1px;
  margin-top: 26px;
  background: rgba(255, 255, 255, 0.14);
}
.intro__bar i {
  display: block;
  height: 100%;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
}
@keyframes introUp { from { opacity: 0; transform: translateY(40%); } }

/* ---------------------------------------------------------------
   Navbar — plain and quiet: name, links, résumé. It gains a
   backdrop and a hairline only once the page scrolls under it.
   --------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, transform 1s var(--ease) 0.15s;
}
html.js body:not(.is-loaded) .topbar { transform: translateY(-100%); }
.topbar.is-scrolled {
  background: rgba(10, 10, 11, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--line);
}
.topbar__in {
  display: flex;
  align-items: center;
  gap: 32px;
  width: min(var(--wrap), 100% - var(--gutter) * 2);   /* lines up with .container */
  height: 64px;
  margin: 0 auto;
}

.mark {
  flex: 0 0 auto;
  color: var(--white);
  font: 500 17px var(--serif);
  letter-spacing: -0.005em;
  text-decoration: none;
}

.tnav { display: flex; gap: 28px; margin-left: auto; }
.tnav a {
  position: relative;
  padding: 6px 0;
  color: var(--ink-3);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.25s ease;
}
.tnav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.4s var(--ease);
}
.tnav a:hover,
.tnav a.active { color: var(--white); }
.tnav a.active::after { transform: scaleX(1); }

.tbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--white);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.tbtn:hover { background: var(--white); color: var(--on-white); }
.tbtn .ico { font-size: 13px; }

.menu-btn {
  display: none;
  place-items: center;
  width: 36px; height: 36px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-btn span,
.menu-btn span::before {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--white);
  transition: transform 0.35s var(--ease);
}
.menu-btn span { position: relative; transform: translateY(-3px); }
.menu-btn span::before { content: ''; position: absolute; left: 0; top: 6px; }
.menu-btn[aria-expanded='true'] span { transform: translateY(0) rotate(45deg); }
.menu-btn[aria-expanded='true'] span::before { top: 0; transform: rotate(-90deg); }

.sheet {
  display: none;
  flex-direction: column;
  padding: 4px max(var(--gutter), (100% - var(--wrap)) / 2) 18px;
  background: rgba(10, 10, 11, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.sheet.open { display: flex; animation: sheetIn 0.35s var(--ease); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(-6px); } }
.sheet a {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 16px;
  text-decoration: none;
}
.sheet a.active { color: var(--white); }
.sheet a.sheet__cta { margin-top: 14px; padding: 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--white); text-align: center; font-size: 14px; }
.topbar:has(.sheet.open) { background: rgba(10, 10, 11, 0.96); border-color: var(--line); }

@media (max-width: 899px) {
  .tnav, .tbtn { display: none; }
  .menu-btn { display: grid; }
}

/* ---------------------------------------------------------------
   Buttons and links
   --------------------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 11.5px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  transform: translateY(102%);
  transition: transform 0.6s var(--ease);
}
.btn:hover::before { transform: none; }
.btn .ico { font-size: 15px; transition: transform 0.5s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }
.btn:disabled { opacity: 0.6; cursor: wait; }

.btn--solid { background: var(--white); color: var(--on-white); }
.btn--solid::before { background: #cfcfd3; }
.btn--ghost { border-color: var(--line-2); color: var(--white); }
.btn--ghost::before { background: var(--white); }
.btn--ghost:hover { color: var(--on-white); border-color: var(--white); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  color: var(--white);
  font: 600 11.5px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size 0.6s var(--ease);
}
.link-arrow:hover { background-size: 30% 1px; }

/* ---------------------------------------------------------------
   Hero — full screen, no box
   --------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px 0 clamp(40px, 7vh, 72px);
  overflow: hidden;
}

/* the existing photo collage, dimmed and drifting slowly */
.hero__bg {
  position: absolute;
  inset: -10% 0 0;
  z-index: -2;
  transform: translate3d(0, calc(var(--hs, 0) * 18vh), 0);
  will-change: transform;
}
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/Group 17.png') center / cover no-repeat;
  filter: grayscale(1) brightness(2.6) contrast(1.05);
  opacity: 0.3;
  animation: drift 40s ease-in-out infinite alternate;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 70% at 72% 38%, transparent 0%, rgba(10, 10, 11, 0.5) 55%, var(--bg) 100%),
    linear-gradient(to bottom, rgba(10, 10, 11, 0.3), transparent 28%, var(--bg) 94%);
}
@keyframes drift {
  from { transform: scale(1.06) translate3d(-1%, 0, 0); }
  to   { transform: scale(1.14) translate3d(1.5%, -2%, 0); }
}
html.js .hero__bg::before { transition: opacity 2s ease 0.2s; }
html.js body:not(.is-loaded) .hero__bg::before { opacity: 0; }

/* portrait: full height, lit from behind so it separates from black */
.hero__portrait {
  position: absolute;
  z-index: -1;
  right: max(0px, (100vw - 1320px) / 2);
  bottom: 0;
  height: min(88vh, 920px);
  aspect-ratio: 1258 / 1300;
  transform: translate3d(0, calc(var(--hs, 0) * 14vh), 0);
  will-change: transform;
}
.hero__portrait-in {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 8px), 0);
}
.hero__glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 118%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 14px), 0);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07) 48%, transparent 72%);
  pointer-events: none;
}
.hero__portrait img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: grayscale(1) contrast(1.04);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 99%);
}

/* copy */
.hero__copy {
  position: relative;
  opacity: calc(1 - var(--hs, 0) * 1.4);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink-2);
  font: 500 12px var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero__dash { width: 44px; height: 1px; background: var(--white); }

.ticker { display: inline-grid; overflow: hidden; }
.ticker__item {
  grid-area: 1 / 1;
  white-space: nowrap;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
}
.ticker__item.is-on { transform: none; opacity: 1; }
.ticker__item.is-off { transform: translateY(-110%); opacity: 0; }

.hero__name {
  margin: 22px 0 30px;
  font: 500 clamp(64px, 9.4vw, 172px) / 0.9 var(--serif);
  letter-spacing: -0.025em;
  transform: translate3d(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -5px), 0);
}
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.hero__line:nth-child(1) { transform: translate3d(calc(var(--hs, 0) * -10vw), 0, 0); }
.hero__line:nth-child(2) { transform: translate3d(calc(var(--hs, 0) * 6vw), 0, 0); }
.hero__line-in { display: block; }
.ch { display: inline-block; }

.hero__bio {
  max-width: 38ch;
  color: var(--ink-2);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  max-width: 560px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero__meta b { display: block; font: 500 20px / 1.2 var(--serif); }
.hero__meta span { display: block; margin-top: 4px; color: var(--ink-3); font: 500 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(40px, 7vh, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--ink-3);
  font: 500 10px var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__scroll span { writing-mode: vertical-rl; }
.hero__scroll i {
  position: relative;
  width: 1px;
  height: 64px;
  overflow: hidden;
  background: var(--line-2);
}
.hero__scroll i::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 40%;
  background: var(--white);
  animation: scrollDot 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollDot { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }

/* ---- hero entrance (runs when body gets .is-loaded) ---- */
html.js .ch {
  transform: translateY(108%);
  transition: transform 1.2s var(--ease) calc(var(--i) * 42ms + 150ms);
}
html.js body.is-loaded .ch { transform: none; }

html.js .hero__portrait-in {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.7s var(--ease-in-out) 0.2s, transform 0.2s linear;
}
html.js body.is-loaded .hero__portrait-in { clip-path: inset(0 0 0 0); }
html.js .hero__portrait img { transform: scale(1.12); transition: transform 2.4s var(--ease) 0.2s; }
html.js body.is-loaded .hero__portrait img { transform: none; }
html.js .hero__glow { opacity: 0; transition: opacity 2s ease 0.9s; }
html.js body.is-loaded .hero__glow { opacity: 1; }

.hero__eyebrow { --d: 0.45s; }
.hero__bio { --d: 0.85s; }
.hero__cta { --d: 1s; }
.hero__meta { --d: 1.15s; }
.hero__scroll { --d: 1.4s; }
html.js .hero__eyebrow,
html.js .hero__fade {
  transition: opacity 1.1s var(--ease) var(--d), transform 1.1s var(--ease) var(--d);
}
html.js body:not(.is-loaded) .hero__eyebrow,
html.js body:not(.is-loaded) .hero__fade { opacity: 0; transform: translateY(18px); }

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
.section { position: relative; padding: clamp(110px, 17vh, 180px) 0; }
.section--tight { padding-top: clamp(40px, 8vh, 80px); }

.sec-head { margin-bottom: clamp(56px, 9vh, 96px); }
.sec-head__idx {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  color: var(--ink-3);
  font: 500 11.5px var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sec-head__idx span { display: flex; align-items: center; gap: 14px; color: var(--white); }
.sec-head__idx span::after { content: ''; width: 40px; height: 1px; background: var(--line-2); }
.sec-head__title {
  max-width: 15ch;
  font: 500 clamp(42px, 6.2vw, 96px) / 1.02 var(--serif);
  letter-spacing: -0.022em;
}
.sec-head__title--sm { font-size: clamp(34px, 4.4vw, 64px); max-width: none; }

/* split headings: each word rises out of its own mask */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.w > i { display: inline-block; font-style: inherit; }
html.js [data-split] .w > i {
  transform: translateY(108%);
  transition: transform 1.15s var(--ease) calc(var(--i) * 70ms);
}
html.js [data-split].in .w > i { transform: none; }

/* generic reveal */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
html.js .reveal.in { opacity: 1; transform: none; }

/* image reveal: the frame opens and the picture settles */
.reveal-img { overflow: hidden; }
html.js .reveal-img {
  clip-path: inset(16% 0 16% 0);
  transition: clip-path 1.5s var(--ease-in-out);
}
html.js .reveal-img img {
  transform: scale(1.22);
  transition: transform 1.8s var(--ease), filter 0.6s ease;
}
html.js .reveal-img.in { clip-path: inset(0 0 0 0); }
html.js .reveal-img.in img { transform: scale(1); }

/* ---- about ---- */
.statement {
  max-width: 30ch;
  font: 400 clamp(26px, 3.3vw, 48px) / 1.3 var(--serif);
  letter-spacing: -0.012em;
}
.sw { transition: opacity 0.5s ease; }
html.js .sw { opacity: 0.16; }
html.js .sw.lit { opacity: 1; }

.about__grid {
  display: grid;
  gap: 48px;
  margin-top: clamp(64px, 10vh, 110px);
}
.about__text { display: grid; gap: 18px; align-content: start; max-width: 56ch; }
.about__text p { color: var(--ink-2); line-height: 1.8; }
.about__text strong { color: var(--white); font-weight: 600; }
.about__text .link-arrow { justify-self: start; margin-top: 10px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-content: start; }
.stat { padding: 24px 0 26px; border-top: 1px solid var(--line-2); }
.stat b {
  display: block;
  font: 500 clamp(38px, 4.4vw, 60px) / 1 var(--serif);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 12px; max-width: 26ch; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }

.sub-block { margin-top: clamp(80px, 13vh, 140px); }
.sub-block--first { margin-top: 0; }
.sub-title {
  margin-bottom: 22px;
  color: var(--ink-3);
  font: 500 11.5px var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---- hairline rows (skills, education, jobs, leadership) ---- */
.rows { border-top: 1px solid var(--line); }
.row {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 10px 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.rows > li:has(> .row) { border: 0; }
.row::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.4);
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease);
}
.row:hover::before { transform: scaleY(1); }
.row h4 { font: 500 clamp(20px, 1.9vw, 26px) / 1.25 var(--serif); letter-spacing: -0.008em; }
.row p { color: var(--ink-3); font-size: 15px; line-height: 1.65; }
.row__no { color: var(--ink-3); font: 500 11.5px var(--mono); letter-spacing: 0.16em; padding-top: 6px; }
.row__when { display: flex; flex-direction: column; gap: 3px; color: var(--ink-3); font: 500 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 6px; }
.row__when span:first-child { color: var(--ink-2); }
.row__note { color: var(--ink-2); font: 500 12px var(--mono); letter-spacing: 0.08em; padding-top: 6px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tags li {
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font: 500 10px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- job cards: the headline section, so they get glass, gold and a metric ---- */
.jobs { display: grid; gap: 14px; }
@media (min-width: 1000px) { .jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.job {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 26px;
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--gold-rgb), 0.09), transparent 55%),
    var(--glass);
}
.job::after {
  content: '';
  position: absolute;
  left: -1px; top: 22px; bottom: 22px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--gold-2), var(--gold));
  transform: scaleY(0.4);
  transition: transform 0.6s var(--ease);
}
.job:hover { border-color: rgba(var(--gold-rgb), 0.45); }
.job:hover::after { transform: scaleY(1); }
html.js .job.reveal {
  transition: opacity 1.1s var(--ease), transform 0.6s var(--ease), border-color 0.4s ease;
}
html.js .job.reveal.in:hover { transform: translateY(-3px); }
.job h4 { font: 500 clamp(20px, 1.8vw, 24px) / 1.2 var(--serif); letter-spacing: -0.01em; }
.job__head { display: grid; gap: 10px; order: -1; }
.job__body { display: flex; flex-direction: column; flex: 1; }
.job .tags { margin-top: auto; padding-top: 14px; }
.job__org { margin-top: 4px; color: var(--ink-2); font-size: 14px; }
.job__when {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  color: var(--ink-3);
  font: 500 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 4px;
}
.job__when span:nth-last-child(2) { color: var(--ink-2); }
.job__metric b {
  display: block;
  font: 500 clamp(32px, 3vw, 42px) / 1 var(--serif);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.job__metric span { display: block; margin-top: 6px; max-width: 20ch; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.job__badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: var(--on-white);
  font-weight: 600;
  letter-spacing: 0.14em;
}
.job .points { gap: 4px; }
.job .points li { font-size: 14.5px; line-height: 1.6; }
.job .points li::before { background: var(--gold); }
.job .tags li { border-color: rgba(var(--gold-rgb), 0.28); }

.points { display: grid; gap: 9px; }
.points li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.points li::before { content: ''; position: absolute; left: 0; top: 0.82em; width: 8px; height: 1px; background: var(--white); }

/* ---- leadership: a carved wooden honour roll with gold-leaf lettering ---- */
.honour {
  padding: clamp(12px, 1.6vw, 20px);
  border-radius: 14px;
  background: var(--wood-grain);
  box-shadow:
    inset 0 2px 0 rgba(255, 230, 190, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.honour__board {
  position: relative;
  padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 52px) clamp(18px, 3vw, 36px);
  border: 2px solid rgba(var(--gold-rgb), 0.55);
  border-radius: 6px;
  outline: 1px solid rgba(0, 0, 0, 0.55);
  outline-offset: 3px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 190, 110, 0.14), transparent 70%),
    repeating-linear-gradient(1deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-1deg, rgba(255, 210, 160, 0.03) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #3e2213, #2b170b 60%, #24130a);
  box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 0 5px rgba(0, 0, 0, 0.25);
}
.honour__head { text-align: center; margin-bottom: clamp(18px, 3vw, 30px); }
.honour__kicker {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: #d9b45a;
  font: 500 11px var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.honour__kicker i { width: clamp(28px, 6vw, 70px); height: 1px; background: linear-gradient(90deg, transparent, #d9b45a); }
.honour__kicker i:last-child { transform: scaleX(-1); }
.honour__title,
.honour__org h5,
.honour__roles b {
  background: var(--leaf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
}
.honour__title {
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 240, 0.95) 50%, transparent 60%) -150% 0 / 60% 100% no-repeat,
    var(--leaf);
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 10px;
  font: 600 clamp(30px, 4vw, 52px) / 1.05 var(--serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.honour__list { border-top: 1px solid rgba(var(--gold-rgb), 0.35); }
.honour__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 14px 22px;
  padding: 18px clamp(4px, 1vw, 12px);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.22);
  color: inherit;
  text-decoration: none;
  transition: background 0.4s ease;
}
.honour__list li:last-child .honour__item { border-bottom: 0; }
a.honour__item:hover { background: rgba(255, 200, 120, 0.06); }
.honour__logo {
  display: grid; place-items: center;
  width: 84px; height: 84px;
  transition: transform 0.5s var(--ease);
}
a.honour__item:hover .honour__logo { transform: scale(1.06) rotate(-3deg); }
/* the DeSoc mark is wide and reads small at the shared size */
.honour__logo img.honour__logo--lg { transform: scale(1.3); }
/* logos sit straight on the wood, like inlaid emblems */
.honour__logo img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 200, 120, 0.12));
}
.honour__org h5 { font: 600 clamp(19px, 1.8vw, 24px) / 1.2 var(--serif); letter-spacing: 0.04em; text-transform: uppercase; }
.honour__lc { text-transform: none; }
.honour__org p { margin-top: 4px; color: #c8ac86; font-size: 13.5px; line-height: 1.5; }
.honour__roles { display: grid; gap: 6px; grid-column: 1 / -1; }
.honour__roles li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.honour__roles b { font: italic 500 17px / 1.3 var(--serif); }
.honour.in .honour__title { animation: leafShine 1.8s var(--ease-in-out) 0.7s 1 both; }
@keyframes leafShine { to { background-position: 250% 0, 0 0; } }
.honour__roles time { flex: 0 0 auto; color: #e6d3b0; font: 500 11px var(--mono); letter-spacing: 0.08em; }
@media (min-width: 760px) {
  .honour__item { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 0.9fr); }
  .honour__roles { grid-column: auto; }
}

/* ---- ask my portfolio: a chat box over the /api/ask RAG function ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ask__head { margin-bottom: clamp(28px, 5vh, 48px); }
.ask__lede { margin-top: 18px; max-width: 60ch; color: var(--ink-3); font-size: 15px; line-height: 1.7; }
.ask__box {
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  background: var(--glass);
}
.ask__status { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--ink-3); font: 500 11px var(--mono); letter-spacing: 0.08em; }
.ask__status:empty { display: none; }
.ask__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.ask__status.is-on::before { background: #7bd88f; box-shadow: 0 0 8px #7bd88f; }
.ask__status.is-waking::before { background: var(--gold-2); animation: caret 1.2s ease-in-out infinite; }
.ask__status.is-off::before { background: #eaa9a7; }
.ask__ai {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px dashed rgba(var(--gold-rgb), 0.35);
  border-radius: 12px;
  overflow: hidden;
}
.ask__ai[hidden] { display: none; }
.ask__ai button {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: var(--on-white);
  font: 600 12.5px var(--sans);
  cursor: pointer;
}
.ask__ai button:disabled { cursor: default; opacity: 0.85; }
.ask__ai span { flex: 1; min-width: 200px; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.ask__ai.is-on { border-style: solid; border-color: rgba(123, 216, 143, 0.35); }
.ask__ai.is-on button { background: rgba(123, 216, 143, 0.16); color: #a8e6b5; }
.ask__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: var(--gold-2); transition: width 0.3s ease; opacity: 0; }
.ask__ai.is-loading .ask__bar { opacity: 1; }
.ask__a.is-snippet { color: var(--ink-2); }
.ask__log { display: grid; gap: 18px; max-height: 460px; overflow-y: auto; scrollbar-width: thin; }
.ask__log:not(:empty) { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ask__q { justify-self: end; max-width: 80%; padding: 10px 16px; border-radius: 16px 16px 4px 16px; background: var(--white); color: var(--on-white); font-size: 15px; }
.ask__a { max-width: 70ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.75; }
.ask__a.is-error { color: #eaa9a7; }
.ask__a.is-wait::after { content: ''; display: inline-block; width: 7px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--ink-2); animation: caret 0.9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ask__a sup {
  margin: 0 1px 0 3px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(var(--gold-rgb), 0.16);
  color: var(--gold-2);
  font: 600 10px var(--mono);
  cursor: help;
}
.ask__src { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.ask__src li { color: var(--ink-3); font: 500 10.5px var(--mono); letter-spacing: 0.06em; }
.ask__src li b { color: var(--gold-2); font-weight: 600; margin-right: 4px; }
.ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ask__chips button {
  padding: 7px 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.ask__chips button:hover { border-color: var(--white); color: var(--white); }
.ask__form { display: flex; gap: 10px; }
.ask__form input {
  flex: 1;
  min-width: 0;
  padding: 13px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--white);
  font: 400 15px var(--sans);
  outline: none;
  transition: border-color 0.25s ease;
}
.ask__form input:focus { border-color: var(--white); }
.ask__form input::placeholder { color: var(--ink-3); }
.ask__form button {
  display: grid; place-items: center;
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--on-white);
  font-size: 18px;
  cursor: pointer;
}
.ask__form button:disabled,
.ask__chips button:disabled { opacity: 0.45; cursor: wait; }

/* ---- pixel critters living on top of the boxes (critters.js) ---- */
.critter {
  position: absolute;
  left: 0; top: 0;
  z-index: 600;              /* above the boxes, under the navbar and lightbox */
  width: 48px; height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;        /* lets touch drag the critter instead of scrolling */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  animation: critterIn 0.6s var(--ease) both;
}
@keyframes critterIn { from { opacity: 0; } }
.critter canvas { display: block; width: 48px; height: 40px; image-rendering: pixelated; }
.critter.is-held { z-index: 790; cursor: grabbing; }
.critter:focus-visible { outline: none; }
.critter__say {
  position: absolute;
  bottom: calc(100% - 10px);
  left: 50%;
  padding: 3px 7px 4px;
  border-radius: 6px;
  background: var(--white);
  color: var(--on-white);
  font: 600 10px var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px) scale(0.7);
  transition: opacity 0.2s ease, transform 0.35s var(--ease);
}
.critter__say::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  margin-left: -3px;
  border: 3px solid transparent;
  border-top-color: var(--white);
}
.critter__say.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.bears {
  position: absolute;
  left: 0; top: 0;
  z-index: 600;
  pointer-events: none;      /* clicks are matched to the bears in critters.js */
  image-rendering: pixelated;
  animation: critterIn 0.6s var(--ease) both;
}
html.over-bear, html.over-bear * { cursor: pointer !important; }
/* clear lane above the honour roll so the bears don't walk over its label */
.sub-title:has(+ .honour) { margin-bottom: 56px; }

/* ---- marquee ---- */
.marquee {
  overflow: hidden;
  padding: 30px 0;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font: italic 400 clamp(30px, 4.2vw, 62px) / 1 var(--serif);
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
}
.marquee span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.45); }
.marquee i { width: 9px; height: 9px; background: rgba(255, 255, 255, 0.4); transform: rotate(45deg); flex: 0 0 auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- work ---- */
.projects { display: grid; gap: clamp(80px, 13vh, 150px); }
.project { display: grid; gap: 28px; align-items: center; }
.project__media { aspect-ratio: 16 / 10; border-radius: 4px; background: #141416; }
.project__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.project:hover .project__media img { filter: none; }
html.js .project:hover .reveal-img.in img { transform: scale(1.04); }
.project__body { display: grid; gap: 14px; align-content: center; }
.project__no { color: var(--ink-3); font: 500 11.5px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.project h3 { font: 500 clamp(32px, 3.6vw, 54px) / 1.04 var(--serif); letter-spacing: -0.02em; }
.project p { max-width: 44ch; color: var(--ink-3); font-size: 16px; line-height: 1.7; }

/* ---- achievements ---- */
.trophies { display: grid; gap: 40px 28px; }
.trophy { cursor: zoom-in; }
.trophy__media { aspect-ratio: 4 / 3; border-radius: 4px; background: #141416; }
.trophy__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.trophy:hover .trophy__media img { filter: none; }
html.js .trophy:hover .reveal-img.in img { transform: scale(1.04); }
.trophy figcaption { padding-top: 18px; }
.trophy figcaption span { color: var(--ink-3); font: 500 10.5px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.trophy h4 { margin-top: 8px; font: 500 19px / 1.3 var(--serif); }
.trophy p { margin-top: 6px; color: var(--ink-3); font-size: 14px; line-height: 1.65; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox figure { display: flex; flex-direction: column; align-items: center; transform: scale(0.97); transition: transform 0.6s var(--ease); }
.lightbox.open figure { transform: none; }
.lightbox img { max-width: min(1100px, 100%); max-height: 82vh; object-fit: contain; border-radius: 4px; }
.lightbox p { margin-top: 14px; color: var(--ink-2); font: 500 12px var(--mono); letter-spacing: 0.08em; text-align: center; }
.lightbox button {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--on-white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ---- posts ---- */
.rail + .rail { margin-top: 48px; }
.rail__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.rail__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--white); color: var(--on-white); font-size: 16px; }
.rail__id { margin-right: auto; }
.rail__id h3 { font: 500 17px var(--serif); }
.rail__id p { color: var(--ink-3); font: 500 11px var(--mono); letter-spacing: 0.06em; }
.rail__link {
  padding: 9px 15px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font: 600 10.5px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.rail__link:hover { background: var(--white); color: var(--on-white); }
.rail__navs { display: none; gap: 6px; }
.rail__navs button {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.rail__navs button:hover:not(:disabled) { background: var(--white); color: var(--on-white); }
.rail__navs button:disabled { opacity: 0.3; cursor: default; }
.rail__navs .prev svg { transform: rotate(180deg); }
.rail.is-static .rail__navs { display: none !important; }

.rail__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.rail__track::-webkit-scrollbar { display: none; }

.post {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: min(300px, 80vw);
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: 12px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-edge);
  text-decoration: none;
  transition: transform 0.6s var(--ease), border-color 0.4s ease;
}
.post:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.3); }
.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: #141416; }
.post__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.5s ease, transform 0.8s var(--ease); }
.post:hover .post__media img { filter: none; transform: scale(1.05); }
.post__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.post__chip { color: var(--ink-3); font: 600 9.5px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.post h4 { font: 500 15.5px / 1.35 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post p { color: var(--ink-3); font-size: 13px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post__cta { margin-top: auto; padding-top: 4px; font: 600 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.post--empty { justify-content: center; gap: 10px; padding: 28px 24px; min-height: 240px; }
.post--empty h4 { font-size: 19px; -webkit-line-clamp: unset; }
.post--empty p { -webkit-line-clamp: unset; }

/* ---- contact ---- */
.contact__grid { display: grid; gap: 64px; align-items: start; }
.contact__title {
  font: 500 clamp(48px, 7vw, 112px) / 0.98 var(--serif);
  letter-spacing: -0.025em;
}
.contact__mail {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  padding-bottom: 8px;
  font: 400 clamp(20px, 2.1vw, 30px) var(--serif);
  text-decoration: none;
  background:
    linear-gradient(var(--white), var(--white)) left bottom / 0% 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.8s var(--ease);
  word-break: break-all;
}
.contact__mail:hover { background-size: 100% 1px, 100% 1px; }
.contact__mail .ico { font-size: 0.8em; transition: transform 0.5s var(--ease); }
.contact__mail:hover .ico { transform: translate(3px, -3px); }

.contact__links { margin-top: 44px; border-top: 1px solid var(--line); max-width: 460px; }
.contact__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font: 500 12px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease, padding 0.5s var(--ease);
}
.contact__links a:hover { color: var(--white); padding-left: 10px; }
.contact__links .ico { font-size: 16px; transition: transform 0.5s var(--ease); }
.contact__links a:hover .ico { transform: translate(3px, -3px); }
.contact__note { margin-top: 26px; color: var(--ink-3); font-size: 14px; }

.form {
  padding: clamp(26px, 3.5vw, 44px);
  border-radius: 16px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.field { position: relative; margin-bottom: 28px; }
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 24px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font: 400 16px var(--sans);
  outline: none;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.field label {
  position: absolute;
  left: 0; top: 24px;
  color: var(--ink-3);
  font: 500 11.5px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.5s var(--ease), color 0.3s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label { transform: translateY(-22px) scale(0.86); color: var(--ink-2); }
.field::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.field:has(textarea)::after { bottom: 6px; }
.field:focus-within::after { transform: scaleX(1); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }
.form__status { font-size: 13.5px; font-weight: 500; }
.form__status.ok { color: #b5dcc4; }
.form__status.err { color: #eaa9a7; }

/* ---- footer ---- */
.footer { padding: clamp(70px, 12vh, 120px) 0 34px; border-top: 1px solid var(--line); overflow: hidden; }
.footer__mark {
  font: 500 clamp(34px, 9.6vw, 158px) / 0.92 var(--serif);
  letter-spacing: -0.035em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.015));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: clamp(30px, 5vh, 54px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font: 500 11px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer__row a { text-decoration: none; transition: color 0.3s ease; }
.footer__row a:hover { color: var(--white); }

/* ---------------------------------------------------------------
   Mobile hero
   --------------------------------------------------------------- */
@media (max-width: 899px) {
  /* phones: portrait first, and the name overlaps its faded lower edge
     like a magazine cover, so the first screen has both face and name */
  .hero {
    justify-content: flex-start;
    padding: 84px 0 56px;
  }
  .hero__portrait {
    order: 1;
    position: relative;
    right: auto;
    align-self: center;
    width: min(100%, 480px);
    height: auto;
    transform: none;
  }
  .hero__portrait img {
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 52%, transparent 96%);
  }
  .hero__copy { order: 2; margin-top: max(-34vw, -170px); opacity: 1; }
  .hero__name { margin: 14px 0 22px; font-size: clamp(56px, 17vw, 110px); }
  .hero__line:nth-child(n) { transform: none; }
  .hero__meta { gap: 14px 28px; margin-top: 34px; }
  .hero__scroll { display: none; }
}

/* ---------------------------------------------------------------
   Desktop layouts
   --------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero__copy > * { max-width: min(640px, 52%); }
  .hero__copy > .hero__name { max-width: none; }

  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 110px); }

  .skill { grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.3fr); }
  .edu { grid-template-columns: 190px minmax(0, 1fr) auto; }

  .project { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 84px); }
  .project:nth-child(even) .project__media { order: 2; }

  .trophies { grid-template-columns: repeat(3, 1fr); }
  .rail__navs { display: flex; }
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(48px, 7vw, 110px); }
}

@media (min-width: 560px) and (max-width: 899px) {
  .trophies { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
  .job { padding: 20px; }
}
@media (max-width: 559px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 0 20px; }
}

/* ---------------------------------------------------------------
   Reduced motion: everything visible, nothing travelling
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .grain { animation: none; }
  .marquee__track { animation: none; }
  .hero__bg, .hero__portrait, .hero__portrait-in, .hero__name, .hero__line:nth-child(n) { transform: none !important; }
  .hero__copy { opacity: 1 !important; }
}