/* ============================================================
   Section + page styles
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  isolation: isolate;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: 120px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hero__bg { z-index: -1; position: absolute; inset: 0 }
.hero__bg canvas, .hero__bg video {
  object-fit: cover;
  filter: grayscale(.2) contrast(1.1);
  opacity: .8;
  width: 100%;
  height: 100%;
}
.hero__shade {
  background:
    radial-gradient(120% 80% at 70% 20%, transparent 0%, #14141459 60%, #141414d9 100%),
    linear-gradient(180deg, #14141499 0%, #1414140d 30%, #141414b3 75%, var(--ink) 100%);
  position: absolute;
  inset: 0;
}
.hero__scan {
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, #ffffff06 0 1px, #0000 1px 3px);
  position: absolute;
  inset: 0;
}
.hero__content { width: 100%; padding-bottom: clamp(44px, 5vw, 72px) }
.hero__title {
  text-transform: none;
  letter-spacing: -.05em;
  color: #e8e8e8;
  font-size: clamp(2.6rem, 6vw, 8.4rem);
  font-weight: 600;
  line-height: 1;
  display: block;
}
.hero__line { white-space: nowrap; padding-block: .03em; display: block; overflow: hidden }
.hero__line > span { display: inline-block }
.hero__line--pill { align-items: center; gap: .22em; display: flex }
.pill {
  border-radius: var(--radius-pill);
  background: var(--ink-3);
  flex: none;
  width: 1.75em;
  height: .74em;
  position: relative;
  overflow: hidden;
  translate: 0 .1em;
}
.pill img {
  object-fit: cover;
  object-position: 50% 45%;
  filter: grayscale() contrast(1.1);
  width: 100%;
  height: 100%;
  transition: opacity .6s var(--ease-out), filter .6s var(--ease-out), transform .8s var(--ease-out);
  position: absolute;
  inset: 0;
}
html.js .pill img:not(.is-loaded) { opacity: 0 }
.pill img.is-loaded { opacity: 1 }
.pill:hover img { filter: none; transform: scale(1.06) }
.hero__rotate { position: relative }
.hero__rotate .roll { will-change: transform; display: inline-block; position: relative }
.hero__rotate .roll__next { white-space: nowrap; position: absolute; top: 140%; left: 0 }
.hero__line .char { display: inline-block }
.hero__bottom {
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-top: clamp(40px, 5vw, 80px);
  display: flex;
}
.hero__intro {
  max-width: 440px;
  color: var(--muted);
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  line-height: 1.45;
}
.reel-btn { flex: none; align-items: center; gap: 12px; padding-block: 6px; display: inline-flex }
.reel-btn__text {
  transition: background-size .6s var(--ease-out);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 4px;
}
.reel-btn__icon { color: var(--accent); transition: transform .6s var(--ease-out); place-items: center; display: grid }
.reel-btn:hover .reel-btn__text { background-size: 100% 1px }
.reel-btn:hover .reel-btn__icon { transform: translate(4px) }
@media (width <= 900px) {
  .hero { padding-top: 96px }
  .hero__title { font-size: clamp(2rem, 9.4vw, 5rem); line-height: 1.02 }
  .hero__line > .hero__rotate { margin-bottom: -.08em; padding-bottom: .08em; display: block; overflow: hidden }
  .hero__line--pill { gap: .18em }
  .pill { width: 1.3em; height: .62em }
  .hero__bottom { flex-direction: column; align-items: flex-start }
}

/* ---------- Tech strip (logos) ---------- */
.logos {
  border-block: 1px solid var(--line);
  margin-top: clamp(40px, 6vw, 96px);
  padding-block: clamp(40px, 4.4vw, 64px);
}
.logos__head {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(32px, 3.6vw, 48px);
  display: flex;
}
.logos__head .label { align-items: center; gap: 12px; display: flex }
.logos__strip { overflow: hidden; mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000) }
.logos__track { width: max-content; display: flex }
.logos__group { flex: none; align-items: center; display: flex }
.logos__item { padding-right: clamp(40px, 5vw, 80px) }
.logos__word {
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .5;
  font-size: clamp(1.1rem, 2.1vw, 2rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1;
  transition: opacity .4s var(--ease-out), color .4s var(--ease-out);
  display: block;
}
.logos__item:hover .logos__word { opacity: 1; color: var(--accent) }

/* ---------- Statement + stats ---------- */
.statement__grid { display: grid }
.statement__text {
  letter-spacing: -.03em;
  text-wrap: pretty;
  max-width: calc(75% - 24px);
  font-size: clamp(1.7rem, 3.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.12;
}
.stats {
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(80px, 10vw, 160px);
  display: grid;
}
.stat {
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 16px;
  padding: 24px 24px 28px 0;
  display: flex;
  position: relative;
}
.stat + .stat { border-left: 1px solid var(--line); padding-left: 24px }
.stat__value { letter-spacing: -.05em; font-size: clamp(3.2rem, 6.6vw, 7rem) }
.stat__index { color: var(--faint); position: absolute; top: 24px; right: 16px }
@media (width <= 900px) {
  .statement__text { max-width: none }
  .stats { margin-inline: calc(-1 * var(--gutter)); grid-template-columns: 1fr 1fr }
  .stat, .stat + .stat { padding: 24px 16px 28px var(--gutter); border-left: 0 }
  .stat + .stat:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 16px }
  .stat:nth-child(2n) .stat__index { right: var(--gutter) }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line) }
}

/* ---------- Work index ---------- */
.work { padding-bottom: clamp(24px, 4vw, 64px) }
.index { border-top: 1px solid var(--line) }
.row { border-bottom: 1px solid var(--line) }
.row__link {
  isolation: isolate;
  grid-template-columns: 64px 1fr auto 40px;
  align-items: center;
  gap: 24px;
  padding-block: clamp(18px, 2.4vw, 34px);
  display: grid;
  position: relative;
}
.row__link:before {
  content: "";
  inset: 0 calc(var(--gutter) * -1);
  background: var(--accent);
  transform-origin: bottom;
  transition: transform .7s var(--ease-out);
  z-index: -1;
  position: absolute;
  transform: scaleY(0);
}
.row__num { color: var(--muted); transition: color .5s }
.row__title {
  letter-spacing: -.045em;
  text-transform: uppercase;
  transition: font-stretch .8s var(--ease-out), letter-spacing .8s var(--ease-out), transform .8s var(--ease-out);
  /* 1.5rem floor (not 2.2) so a long project name still fits a 390px viewport.
     No min-width/overflow-wrap here: on desktop the row is
     `64px 1fr auto 40px`, and letting the title shrink below min-content hands
     the space to the auto meta column, which breaks a long name mid-word. */
  font-size: clamp(1.5rem, 6.2vw, 6.6rem);
  font-weight: 800;
  font-stretch: 100%;
  line-height: .9;
}
.row__meta { color: var(--muted); transition: color .5s }
.row__arrow { transition: transform .6s var(--ease-out); justify-self: end; font-size: 1.6rem }
.row__thumb { display: none }
@media (hover: hover) {
  .index:hover .row__title { color: #ffffff47 }
  .row__link:hover:before { transform: scaleY(1) }
  .row__link:hover .row__title {
    color: var(--paper);
    letter-spacing: -.02em;
    font-stretch: 125%;
    transform: translate(12px);
  }
  .row__link:hover .row__num, .row__link:hover .row__meta { color: var(--paper) }
  .row__link:hover .row__arrow { transform: rotate(45deg) }
}
.preview {
  aspect-ratio: 16 / 10;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  border-radius: 4px;
  width: clamp(260px, 26vw, 460px);
  margin: calc(clamp(260px, 26vw, 460px) / -3.2) 0 0 calc(clamp(260px, 26vw, 460px) / -2);
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: scale(.85);
}
.preview__item { position: absolute; inset: 0 }
.preview__item img { object-fit: cover; width: 100%; height: 100% }
@media (width <= 900px), (hover: none) {
  .row__link { grid-template-columns: 40px 1fr; row-gap: 12px }
  .row__meta, .row__arrow { display: none }
  /* safe here — the meta column is gone, so nothing competes for the space */
  .row__title { overflow-wrap: anywhere }
  .row__thumb { aspect-ratio: 16 / 9; grid-column: 1 / -1; display: block; overflow: hidden }
  .row__thumb img { object-fit: cover; width: 100%; height: 100% }
  .preview { display: none }
}

/* ---------- Spotlight (featured platform) ---------- */
.bth { isolation: isolate; scroll-margin-top: 40px; position: relative; overflow: hidden }
.bth__bg { z-index: -1; position: absolute; inset: 0 }
.bth__bg canvas { object-fit: cover; filter: grayscale(.6) blur(2px); width: 100%; height: 100%; transform: scale(1.04) }
.bth__bg:after {
  content: "";
  background:
    linear-gradient(180deg, var(--ink) 0%, #141414e6 18%, #141414e6 82%, var(--ink) 100%),
    radial-gradient(90% 70% at 30% 40%, #14141480, transparent);
  position: absolute;
  inset: 0;
}
.bth__grid { grid-template-columns: 1fr 1.15fr; align-items: center; gap: clamp(40px, 6vw, 110px); display: grid }
.bth__brand { align-items: center; gap: 20px; margin-bottom: 32px; display: flex }
.bth__mark { width: clamp(48px, 4.4vw, 64px); height: auto }
.bth__title {
  text-transform: none;
  letter-spacing: -.05em;
  font-size: clamp(2.6rem, 6vw, 8.4rem);
  font-weight: 700;
  line-height: 1;
}
.bth__title .line-mask { padding-top: .04em }
.bth__lead {
  letter-spacing: -.02em;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
}
.bth__text { max-width: 520px; margin-top: 16px; font-size: 1.02rem }
.bth__ctas { flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 40px; display: flex }
.bth__media { position: relative }
.bth__main {
  aspect-ratio: 16 / 9;
  background: var(--ink-2);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px #00000073;
}
.bth__media img { object-fit: cover; width: 100%; height: 100% }
.bth__media figcaption {
  backdrop-filter: blur(6px);
  background: #141414b3;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  display: flex;
  position: absolute;
  top: 12px;
  left: 12px;
}
.bth__foot {
  border-top: 1px solid var(--line);
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(64px, 8vw, 120px);
  padding-top: 32px;
  display: grid;
}
.bth__stats { grid-template-columns: repeat(3, 1fr); gap: 24px; display: grid }
.bth__stat { flex-direction: column-reverse; justify-content: flex-end; gap: 10px; display: flex }
.bth__stat dd { letter-spacing: -.04em; font-size: clamp(2.2rem, 3.6vw, 3.6rem); font-weight: 700 }
.bth__quote { margin: 0; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.45 }
.bth__quote footer { margin-top: 14px }
@media (width <= 900px) {
  .bth__grid, .bth__foot { grid-template-columns: minmax(0, 1fr) }
  .bth__stats { gap: 12px }
  .bth__stat dt { letter-spacing: .12em; font-size: .55rem }
}

/* ---------- Capabilities ---------- */
.caps { grid-template-columns: 1fr 1.25fr; gap: clamp(40px, 6vw, 120px); display: grid }
.caps__sticky { gap: 28px; display: grid; position: sticky; top: 120px }
.tagsets { gap: 28px; max-width: 400px; margin-top: 8px; display: grid }
.tagset__label { margin-bottom: 12px; font-size: .62rem }
.tagset__list { flex-wrap: wrap; gap: 6px; display: flex }
.tagset__list li {
  letter-spacing: .14em;
  border-radius: var(--radius-pill);
  color: var(--paper);
  background: 0 0;
  border: 1px solid #14141438;
  padding: 8px 14px;
  font-size: .6rem;
  transition: background-color .3s, color .3s;
}
.tagset__list li:hover { background: var(--paper); color: var(--ink) }
.cap {
  border-top: 1px solid var(--line);
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding-block: 36px;
  display: grid;
  position: relative;
}
.cap:last-child { border-bottom: 1px solid var(--line) }
.cap:after {
  content: "";
  background: var(--accent);
  transform-origin: 0;
  width: 100%;
  height: 1px;
  transition: transform .9s var(--ease-out);
  position: absolute;
  top: -1px;
  left: 0;
  transform: scaleX(0);
}
.cap:hover:after { transform: scaleX(1) }
.cap__num { color: var(--accent); padding-top: .6em }
.cap__title {
  font-size: var(--fs-h3);
  letter-spacing: -.03em;
  transition: font-stretch .7s var(--ease-out);
  font-weight: 700;
  line-height: 1.05;
}
.cap:hover .cap__title { font-stretch: 118% }
.cap__desc { max-width: 520px; margin-top: 14px }
@media (width <= 900px) {
  .caps { grid-template-columns: 1fr }
  .caps__sticky { position: static }
}

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); padding-block: clamp(14px, 2vw, 26px); overflow: hidden }
.marquee__track { width: max-content; display: flex }
.marquee__group { flex: none; display: flex }
.marquee__item {
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
  font-size: clamp(1.3rem, 3vw, 3.2rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  display: inline-flex;
}
.marquee--outline .marquee__item { color: #0000; -webkit-text-stroke: 1px #fff6 }
.marquee__sep { background: var(--accent); flex: none; width: .16em; height: .16em }

/* ---------- Recognition table ---------- */
.rec__kicker { align-items: center; gap: 12px; display: flex }
.rec__table { border-top: 1px solid var(--line) }
.rec__row {
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  transition: padding .6s var(--ease-out), color .4s;
  grid-template-columns: 2.2fr 1.4fr .6fr 1.4fr 32px;
  align-items: center;
  gap: 24px;
  padding-block: 26px;
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  display: grid;
  position: relative;
}
.rec__row--head { color: var(--faint); font-size: var(--fs-label); padding-block: 16px }
a.rec__row:before {
  content: "";
  inset: 0 calc(var(--gutter) * -1);
  background: var(--paper);
  transform-origin: top;
  transition: transform .6s var(--ease-out);
  z-index: -1;
  position: absolute;
  transform: scaleY(0);
}
a.rec__row:hover { color: var(--ink); padding-inline: 16px }
a.rec__row:hover:before { transform: scaleY(1) }
.rec__title { font-weight: 600 }
.rec__arrow { color: var(--accent); transition: transform .5s var(--ease-out); justify-self: end }
a.rec__row:hover .rec__arrow { transform: rotate(45deg) }
@media (width <= 800px) {
  .rec__row { grid-template-columns: 1fr auto; gap: 4px 16px }
  .rec__row--head { display: none }
  .rec__title { grid-column: 1 / -1 }
  .rec__row > :nth-child(4) { color: var(--muted) }
  .rec__arrow { display: none }
}

/* ============================================================
   Work page
   ============================================================ */
.wh {
  padding-top: clamp(140px, 18vw, 240px);
  padding-bottom: clamp(48px, 6vw, 96px);
  isolation: isolate;
  position: relative;
  overflow: hidden;
}
/* Plexus network canvas, painted behind the Work heading */
.wh__bg { z-index: -1; position: absolute; inset: 0 }
.wh__bg canvas { width: 100%; height: 100%; display: block }
/* Darkens behind the heading on the left rather than wiping the whole lower
   half, so the network stays readable across the right of the hero. */
.wh__shade {
  background:
    radial-gradient(95% 130% at 2% 58%, #141414e8 0%, #141414ad 42%, transparent 72%),
    linear-gradient(180deg, #14141459 0%, #14141400 28%, #1414148a 84%, var(--ink) 100%);
  position: absolute;
  inset: 0;
}
/* Streams radiate from the middle, so shade from the edges inward instead of
   from one side — keeps the heading legible without flattening the centre. */
.wh__shade--center {
  background:
    radial-gradient(78% 108% at 50% 50%, transparent 0%, #1414143d 46%, #141414c4 100%),
    linear-gradient(90deg, #141414b3 0%, #14141430 30%, #14141400 58%),
    linear-gradient(180deg, #14141459 0%, #14141400 30%, #1414148a 84%, var(--ink) 100%);
}
.wh__scan {
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, #ffffff06 0 1px, #0000 1px 3px);
  position: absolute;
  inset: 0;
}
/* The hero is short on phones and the copy runs full width, so hold the
   background further back than on desktop. */
@media (width <= 700px) {
  .wh__shade {
    background:
      radial-gradient(90% 120% at 10% 50%, #141414e8 0%, #141414bd 48%, #14141487 100%),
      linear-gradient(180deg, #14141473 0%, #14141440 34%, #141414a6 86%, var(--ink) 100%);
  }
  .wh__shade--center {
    background:
      radial-gradient(84% 110% at 50% 46%, #1414147a 0%, #141414b3 52%, #141414d9 100%),
      linear-gradient(180deg, #14141473 0%, #14141440 30%, #141414a6 86%, var(--ink) 100%);
  }
}
.wh__kicker { align-items: center; gap: 12px; margin-bottom: 28px; display: flex }
.nowrap { white-space: nowrap }
.wh__title { font-size: var(--fs-display) }
.filters { flex-wrap: wrap; gap: 8px; margin-top: clamp(40px, 5vw, 72px); display: flex }
.chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  font-size: .62rem;
  transition: background-color .4s, border-color .4s, color .4s;
}
.chip:hover { border-color: var(--paper) }
.chip[aria-pressed=true] { background: var(--accent); border-color: var(--accent) }
.grid {
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px) clamp(16px, 2vw, 32px);
  padding-bottom: clamp(96px, 12vw, 180px);
  display: grid;
}
/* card/media/tags are spans inside the <a>, so they need an explicit display —
   aspect-ratio is ignored on inline boxes. */
.card { display: block }
.card__media { display: block; aspect-ratio: 16 / 10; background: var(--ink-2); overflow: hidden }
.card__media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 1.4s var(--ease-out), filter 1s var(--ease-out);
  transform: scale(1.02);
}
.card:hover .card__media img { transform: scale(1.07) }
.card__meta { grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 12px; margin-top: 20px; display: grid }
.card__title {
  letter-spacing: -.035em;
  transition: font-stretch .8s var(--ease-out);
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
}
.card:hover .card__title { font-stretch: 112% }
.card__tags { display: block; margin: 10px 0 0 52px; font-size: .62rem }
@media (width <= 800px) { .grid { grid-template-columns: 1fr } }

/* ============================================================
   Page hero (about / project)
   ============================================================ */
.ph {
  grid-template-rows: auto 1fr auto auto;
  height: 100svh;
  min-height: 620px;
  padding-top: 104px;
  display: grid;
  position: relative;
  overflow: hidden;
}
.ph__top { justify-content: space-between; display: flex }
/* padding-inline gives [data-fit] a gutter to measure against, so long project
   names scale down to fit instead of being clipped at both edges */
.ph__title {
  pointer-events: none;
  place-items: center;
  margin-top: -4vh;
  padding-inline: var(--gutter);
  display: grid;
  position: absolute;
  inset: 0;
}
.ph__word {
  white-space: nowrap;
  letter-spacing: -.06em;
  font-size: clamp(5rem, 19vw, 26rem);
  font-stretch: 100%;
  line-height: .8;
}
.ph__word > span { display: inline-block }
.ph__media {
  z-index: 2;
  width: clamp(240px, 26vw, 460px);
  height: clamp(240px, 26vw, 460px);
  position: absolute;
  top: calc(50% - 4vh);
  left: 50%;
  overflow: hidden;
  translate: -50% -50%;
}
.ph__caption {
  --media: clamp(240px, 26vw, 460px);
  left: calc(50% + var(--media) / 2);
  top: calc(50% - 4vh - var(--media) / 2 - 14px);
  text-align: right;
  white-space: nowrap;
  z-index: 3;
  justify-items: end;
  gap: 4px;
  display: grid;
  position: absolute;
  translate: -100% -100%;
}
.ph__media img { object-fit: cover; width: 100%; height: 100% }
.ph__bottom {
  --media: clamp(240px, 26vw, 460px);
  left: 0;
  right: 0;
  top: calc(50% - 4vh + var(--media) / 2 + clamp(28px, 3vw, 44px));
  text-align: center;
  z-index: 3;
  justify-items: center;
  gap: 22px;
  display: grid;
  position: absolute;
}
.ph__summary {
  letter-spacing: -.01em;
  max-width: 640px;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  font-weight: 500;
  line-height: 1.25;
}
.ph__tag { border: 1px solid #ffffff80; padding: 8px 14px; font-size: .62rem }
.ph__foot {
  z-index: 3;
  grid-row: 4;
  justify-content: space-between;
  align-items: center;
  padding-block: 28px;
  display: flex;
  position: relative;
}
.ph__scroll { align-items: center; gap: 10px; display: inline-flex }
.ph__sq { color: var(--accent); letter-spacing: 0; animation: ph-arrow 1.8s var(--ease-in-out) infinite; font-size: 1rem }
@keyframes ph-arrow {
  0%, to { opacity: 1; transform: translateY(-3px) }
  50%    { opacity: .5; transform: translateY(5px) }
}
@media (width <= 900px) {
  .ph__media { width: 62vw; height: 62vw }
  .ph__bottom, .ph__caption { --media: 62vw }
  .ph__word { font-size: 24vw }
}

/* ============================================================
   About page
   ============================================================ */
.bio { grid-template-columns: 1fr 2fr; gap: clamp(32px, 6vw, 120px); padding-block: clamp(64px, 10vw, 160px); display: grid }
.bio__kicker { align-items: center; gap: 12px; height: fit-content; padding-top: .8em; display: flex }
.bio__text { color: var(--muted); align-content: start; gap: 28px; font-size: 1.1rem; display: grid }
.bio__text .lead {
  color: var(--paper);
  letter-spacing: -.025em;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
}
.mission {
  border-top: 1px solid var(--line);
  color: #ffffff80;
  letter-spacing: -.02em;
  margin: 24px 0 0;
  padding-top: 52px;
  font-size: clamp(1.25rem, 1.9vw, 1.8rem);
  font-weight: 400;
  line-height: 1.25;
}
.currently { color: var(--paper); align-items: center; gap: 12px; display: flex }
.tldr__list { border-top: 1px solid var(--line) }
.tldr__row {
  border-bottom: 1px solid var(--line);
  letter-spacing: -.015em;
  grid-template-columns: 1fr 3fr;
  gap: 24px;
  padding-block: 28px;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  display: grid;
}
.tldr__row dt { padding-top: .5em }
@media (width <= 900px) { .bio, .tldr__row { grid-template-columns: 1fr } }

/* ---------- Experience timeline ---------- */
.exp__head { grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(32px, 6vw, 120px); margin-bottom: clamp(48px, 6vw, 96px); display: grid }
.exp__kicker { align-items: center; gap: 12px; margin-bottom: 24px; display: flex }
.exp__title { text-transform: none; letter-spacing: -.05em; font-size: clamp(2.6rem, 6vw, 8.4rem); font-weight: 700; line-height: 1 }
.exp__copy { gap: 24px; max-width: 520px; display: grid }
.exp__text { font-size: var(--fs-lead); color: var(--muted); line-height: 1.45 }
.exp__list { border-top: 1px solid var(--line) }
.exp__item {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 96px 1fr 1fr;
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(32px, 4vw, 52px);
  display: grid;
  position: relative;
}
.exp__item:after {
  content: "";
  background: var(--accent);
  transform-origin: 0;
  width: 100%;
  height: 1px;
  transition: transform .9s var(--ease-out);
  position: absolute;
  top: -1px;
  left: 0;
  transform: scaleX(0);
}
.exp__item:hover:after { transform: scaleX(1) }
.exp__num { color: var(--accent); padding-top: .5em }
.exp__role {
  letter-spacing: -.035em;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  transition: font-stretch .7s var(--ease-out);
}
.exp__item:hover .exp__role { font-stretch: 116% }
.exp__org { color: var(--muted); margin-top: 10px; font-size: 1.02rem }
.exp__when { color: var(--faint); margin-top: 6px }
.exp__points { color: var(--muted); gap: 12px; display: grid; font-size: 1.02rem; line-height: 1.5 }
.exp__points li { padding-left: 20px; position: relative }
.exp__points li:before {
  content: "";
  background: var(--accent);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: .62em;
  left: 0;
}
@media (width <= 900px) {
  .exp__head { grid-template-columns: 1fr }
  .exp__item { grid-template-columns: 48px 1fr }
  .exp__points { grid-column: 1 / -1; margin-top: 8px }
}

/* ============================================================
   Project detail
   ============================================================ */
.info__kicker { align-items: center; gap: 12px; margin-bottom: 40px; display: flex }
.info__grid { grid-template-columns: 1.6fr 1fr; gap: clamp(40px, 8vw, 140px); display: grid }
.info__text { max-width: 820px; color: var(--muted); gap: 24px; font-size: 1.05rem; display: grid }
.info__text .lead {
  color: var(--paper);
  letter-spacing: -.02em;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
}
.facts { border-top: 1px solid var(--line); height: fit-content }
.fact { border-bottom: 1px solid var(--line); grid-template-columns: 120px 1fr; gap: 16px; padding-block: 16px; display: grid }
.contained { max-width: calc(1440px + var(--gutter) * 2); margin-inline: auto }
.gallery, .g-row { gap: clamp(12px, 1.4vw, 24px); display: grid }
.g-row--pair { grid-template-columns: 1fr 1fr; align-items: start }
.g-row--multi { grid-template-columns: repeat(var(--cols), 1fr); align-items: start }
.g-item img { background: var(--ink-2); width: 100%; height: auto }
.g-item figcaption { margin-top: 10px }
.g-text { max-width: 760px; padding-block: clamp(48px, 8vw, 120px) }
.g-text__h { font-size: var(--fs-h3); letter-spacing: -.03em; margin-bottom: 16px }
.credits__list { border-top: 1px solid var(--line) }
.credits__list li {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  padding-block: 18px;
  font-size: 1.1rem;
  display: flex;
}
.credits__copy { margin-top: 24px }
.next {
  height: clamp(420px, 80vh, 860px);
  margin-top: clamp(96px, 12vw, 180px);
  display: block;
  position: relative;
  overflow: hidden;
}
.next__media { position: absolute; inset: -10% 0 }
.next__media img {
  object-fit: cover;
  filter: brightness(.45) grayscale(.4);
  width: 100%;
  height: 100%;
  transition: filter 1s var(--ease-out), transform 1.4s var(--ease-out);
}
.next:hover .next__media img { filter: brightness(.7) grayscale(0) }
.next__content {
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  height: 100%;
  padding-bottom: 48px;
  display: flex;
  position: relative;
}
/* block + full width so the inner [data-fit] span has a parent to measure;
   --fs-mega is the no-JS fallback size */
.next__title {
  display: block;
  width: 100%;
  font-size: var(--fs-mega);
  transition: font-stretch .9s var(--ease-out), color .5s;
}
.next:hover .next__title { color: var(--accent); font-stretch: 112% }
@media (width <= 900px) {
  .info__grid, .g-row--pair { grid-template-columns: 1fr }
  .g-row--multi[style*="--cols: 5"] { grid-template-columns: repeat(3, 1fr) }
  .fact { grid-template-columns: 110px 1fr }
}

/* ============================================================
   Contact page
   ============================================================ */
.ch { padding-top: clamp(130px, 16vw, 220px) }
.ch__kicker { align-items: center; gap: 12px; margin-bottom: 32px; display: flex }
.ch__title { font-size: var(--fs-display); text-transform: none; letter-spacing: -.05em; line-height: .92 }
.cb {
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 8vw, 140px);
  padding-block: clamp(64px, 9vw, 140px) clamp(96px, 12vw, 180px);
  display: grid;
}
.cb__aside { align-content: start; gap: 32px; display: grid }
.cb__main { align-content: start; gap: clamp(32px, 4vw, 56px); display: grid }
.cb__lead { font-size: var(--fs-lead); color: var(--muted); max-width: 640px }
.cb__email { letter-spacing: -.02em; width: fit-content; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 600 }
.cb__socials { border-top: 1px solid var(--line) }
.cb__socials a {
  border-bottom: 1px solid var(--line);
  transition: padding .5s var(--ease-out), color .3s;
  justify-content: space-between;
  padding-block: 14px;
  display: flex;
}
.cb__socials a:hover { color: var(--accent); padding-inline: 10px }
.cb__time { text-transform: uppercase }
.form { gap: 40px; display: grid }
.field { gap: 14px; display: grid }
.field input, .field textarea {
  font: inherit;
  letter-spacing: -.02em;
  color: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--line);
  resize: vertical;
  background: 0 0;
  border-radius: 0;
  padding: 8px 0 16px;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  transition: border-color .4s;
}
.field input::placeholder, .field textarea::placeholder { color: #ffffff2e }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none }
.form__consent { flex: 180px; max-width: 420px; font-size: .85rem; line-height: 1.5 }
.form__consent a { color: var(--paper) }
.form [data-form-status]:empty { display: none }
.form [data-form-status][data-state=sent] { color: var(--accent) }
.form [data-form-status][data-state=error] { color: var(--paper) }
.form__foot { justify-content: space-between; align-items: center; gap: 24px; display: flex }
.form__foot .btn { flex: none }
@media (width <= 520px) {
  .form__foot { flex-direction: column; align-items: flex-start }
  .form__consent { flex: none }
}
@media (width <= 900px) { .cb { grid-template-columns: 1fr } }

/* ============================================================
   Résumé page
   ============================================================ */
.res { padding-block: clamp(32px, 5vw, 64px) clamp(96px, 12vw, 180px) }
.res__grid { grid-template-columns: 1fr 2fr; gap: clamp(32px, 6vw, 120px); display: grid }
.res__aside { align-content: start; gap: 28px; display: grid; position: sticky; top: 120px; height: fit-content }
.res__block { border-top: 1px solid var(--line); padding-top: 28px }
.res__block + .res__block { margin-top: 36px }
.res__h { font-size: var(--fs-h3); letter-spacing: -.03em; font-weight: 700; margin-bottom: 24px }
.res__line { border-bottom: 1px solid var(--line); grid-template-columns: 1fr 2fr; gap: 16px; padding-block: 18px; display: grid }
.res__line dt { color: var(--muted); font-size: .9rem }
.res__list { color: var(--muted); gap: 10px; display: grid; line-height: 1.5 }
.res__list li { padding-left: 20px; position: relative }
.res__list li:before {
  content: "";
  background: var(--accent);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: .62em;
  left: 0;
}
@media (width <= 900px) {
  .res__grid, .res__line { grid-template-columns: 1fr }
  .res__aside { position: static }
}

/* ============================================================
   Skills page
   ============================================================ */
.sk { padding-bottom: clamp(96px, 12vw, 180px) }
.sk__group { border-top: 1px solid var(--line); grid-template-columns: 1fr 2fr; gap: clamp(24px, 4vw, 64px); padding-block: clamp(36px, 4vw, 56px); display: grid; position: relative }
.sk__group:last-child { border-bottom: 1px solid var(--line) }
.sk__group:after {
  content: "";
  background: var(--accent);
  transform-origin: 0;
  width: 100%;
  height: 1px;
  transition: transform .9s var(--ease-out);
  position: absolute;
  top: -1px;
  left: 0;
  transform: scaleX(0);
}
.sk__group:hover:after { transform: scaleX(1) }
.sk__name { font-size: var(--fs-h3); letter-spacing: -.03em; font-weight: 700; line-height: 1.05 }
.sk__num { color: var(--accent); margin-bottom: 12px; display: block }
.sk__items { flex-wrap: wrap; gap: 8px; display: flex; align-content: start }
.sk__items li {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: .62rem;
  transition: background-color .4s, border-color .4s, color .4s;
}
.sk__items li:hover { background: var(--accent); border-color: var(--accent); color: #fff }
@media (width <= 900px) { .sk__group { grid-template-columns: 1fr } }

/* ============================================================
   Misc pages (privacy / terms / 404)
   ============================================================ */
.doc { max-width: 760px; padding-block: clamp(140px, 18vw, 240px) clamp(96px, 12vw, 180px) }
.doc h1 { font-size: var(--fs-h2); letter-spacing: -.04em; font-weight: 700; line-height: .95; margin-bottom: 40px }
.doc h2 { font-size: var(--fs-h3); letter-spacing: -.03em; margin: 48px 0 16px }
.doc p, .doc li { color: var(--muted); line-height: 1.6; margin-bottom: 14px }
.doc ul { padding-left: 20px; list-style: disc }
.nf { place-content: center; min-height: 100svh; display: grid; text-align: center }
.nf__code { font-size: var(--fs-mega); line-height: .85 }