/* Jayaseelan James: portfolio
   Sim view. One accent. Built from BUILD-PLAN.md. */

@layer reset, tokens, base, layout, components, sections, motion, utilities;

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("assets/fonts/martian-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, p, ol, ul, li, dl, dt, dd, figure { margin: 0; padding: 0; }
  ol, ul { list-style: none; }
  img, picture, canvas, svg, video { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; }
  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    --charcoal: #111318;
    --graphite: #252A34;
    --white: #F5F7FA;
    --grey: #9CA3AF;
    --cyan: #00C2FF;
    --ink: #0B0D11;
    --line: rgba(245, 247, 250, .10);
    --line-strong: rgba(245, 247, 250, .22);
    --cyan-dim: rgba(0, 194, 255, .14);

    --m: clamp(1.25rem, 7vw, 8rem);          /* outer margin */
    --gut: clamp(1rem, 2vw, 2rem);
    --hdr: 4.5rem;
    --pad: clamp(6rem, 14vh, 12rem);         /* chapter padding */

    --ease: cubic-bezier(.16, 1, .3, 1);     /* settle: fast rise, no overshoot */
    --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --mono: "Martian Mono", ui-monospace, "SF Mono", Consolas, monospace;
  }
  @media (max-width: 1023px) { :root { --hdr: 3.75rem; } }
}

/* ------------------------------------------------------------ base */
@layer base {
  html {
    background: var(--charcoal);
    color: var(--white);
    font-family: var(--sans);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-padding-top: 0;
  }
  body {
    font-size: 1.0625rem;
    line-height: 1.6;
    font-weight: 400;
    min-height: 100vh;
    overflow-x: clip;
  }
  ::selection { background: var(--cyan); color: var(--charcoal); }
  :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
  [tabindex="-1"]:focus { outline: none; }
  h1, h2, h3 { font-weight: 650; text-wrap: balance; }
  p { text-wrap: pretty; }

  /* width axis: animated through --wdth, narrowed by scroll velocity through --wv */
  .kin, .t-display-l, .t-h2, .t-h3 {
    font-stretch: calc((var(--wdth, 100) - var(--wv, 0)) * 1%);
  }
  .t-display-l {
    --wdth: 110;
    font-size: clamp(2.75rem, min(8.6vw, 17vh), 9.5rem);
    font-weight: 700;
    line-height: .94;
    letter-spacing: -.03em;
  }
  .t-h2 {
    --wdth: 105;
    font-size: clamp(2rem, 4.4vw, 4.5rem);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.02em;
  }
  .t-h3 {
    font-size: clamp(1.375rem, 2vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
  }
  .t-lead {
    font-size: clamp(1.1875rem, 1.55vw, 1.625rem);
    line-height: 1.4;
  }
  .ln { display: block; white-space: nowrap; }
}

/* ------------------------------------------------------------ layout */
@layer layout {
  .wrap { padding-inline: var(--m); }
  .chapter { position: relative; }
  main { position: relative; }
}

/* ------------------------------------------------------------ components */
@layer components {
  .skip {
    position: fixed; left: 1rem; top: 1rem; z-index: 300;
    padding: .7rem 1rem; background: var(--cyan); color: var(--charcoal);
    font-weight: 600; text-decoration: none; border-radius: 2px;
    transform: translateY(-300%);
  }
  .skip:focus { transform: none; }

  /* buttons */
  .btn {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    padding: .85rem 1.4rem; border: 1px solid transparent; border-radius: 2px;
    font-size: 1rem; font-weight: 600; line-height: 1.1; text-decoration: none; white-space: nowrap;
    transition: color .3s var(--ease), border-color .3s var(--ease);
  }
  .btn--primary { background: var(--cyan); color: var(--charcoal); }
  .btn--primary::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white);
    transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
  }
  .btn--primary:hover::before, .btn--primary:focus-visible::before { transform: scaleX(1); }
  .btn--ghost { border-color: var(--line-strong); color: var(--white); }
  .btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--cyan); }
  .btn--sm { padding: .6rem 1rem; font-size: .875rem; }
  .btn--lg { padding: 1.15rem 1.9rem; font-size: 1.0625rem; }

  /* text link: underline redraws in cyan from the left */
  .link {
    color: var(--white); text-decoration: none; padding-bottom: .18em;
    background:
      linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0 1px no-repeat,
      linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat;
    transition: background-size .5s var(--ease);
  }
  .link:hover, .link:focus-visible { background-size: 100% 1px, 100% 1px; }

  /* joint: chapter boundary, a ring on the rail axis and a hairline across the page */
  .joint {
    position: relative; display: flex; align-items: baseline; gap: .6em;
    padding-top: 1.1rem; margin-bottom: clamp(2rem, 6vh, 4.5rem);
    font-family: var(--mono); font-size: .75rem; color: var(--grey);
  }
  .joint span { color: var(--white); }
  .joint::before {
    content: ""; position: absolute; top: 0; height: 1px; background: var(--line);
    left: calc(var(--m) * -1); right: calc(var(--m) * -1);
  }
  .joint::after {
    content: ""; position: absolute; top: -5px; left: calc(var(--m) * -.5 - 5px);
    width: 9px; height: 9px; border-radius: 50%;
    border: 1px solid var(--line-strong); background: var(--charcoal);
  }

  /* header */
  .hdr {
    position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hdr);
    display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem);
    padding-inline: var(--m);
    transition: transform .6s var(--ease), background-color .4s, box-shadow .4s;
  }
  .hdr.is-solid { background: rgba(17, 19, 24, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
  .hdr.is-hidden { transform: translateY(-101%); }
  .hdr:focus-within, .menu-open .hdr { transform: none; }
  .hdr__brand { display: flex; align-items: center; gap: .55rem; margin-right: auto; color: var(--white); text-decoration: none; }
  .hdr__name { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
  .hdr__nav { display: flex; gap: clamp(1rem, 2vw, 1.75rem); }
  .hdr__nav a { color: var(--grey); text-decoration: none; font-size: .9375rem; transition: color .3s; }
  .hdr__nav a:hover, .hdr__nav a:focus-visible { color: var(--white); }
  .hdr__menu { display: none; padding: .6rem 0 .6rem 1rem; font-size: .9375rem; font-weight: 600; }

  .menu {
    position: fixed; inset: 0; z-index: 55; background: var(--charcoal);
    display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
    padding: calc(var(--hdr) + 2rem) var(--m) 2.5rem;
  }
  .menu__nav { display: flex; flex-direction: column; }
  .menu__nav a {
    padding: .5rem 0; border-bottom: 1px solid var(--line);
    font-size: clamp(2rem, 9vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
    text-decoration: none; color: var(--white);
  }

  /* joint rail */
  .rail { position: fixed; left: calc(var(--m) / 2); top: 50%; z-index: 40; transform: translate(-50%, -50%); }
  .rail ol { position: relative; display: flex; flex-direction: column; }
  .rail ol::before { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 1px; margin-left: -.5px; background: var(--line-strong); }
  .rail a { position: relative; display: grid; place-items: center; width: 28px; height: 28px; text-decoration: none; }
  .rail a::before {
    content: ""; position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%;
    border: 1px solid var(--grey); background: var(--charcoal);
    transition: transform .4s var(--ease), background-color .3s, border-color .3s;
  }
  .rail a.is-on::before { background: var(--cyan); border-color: var(--cyan); transform: scale(1.4); }
  .rail__id, .rail__name { position: absolute; left: 100%; font-family: var(--mono); font-size: .6875rem; line-height: 1; white-space: nowrap; pointer-events: none; }
  .rail__id { color: var(--cyan); opacity: 0; transition: opacity .3s; }
  .rail a.is-on .rail__id { opacity: 1; }
  .rail__name { padding: .35rem .5rem; background: var(--graphite); color: var(--white); opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .4s var(--ease); }
  .rail a:hover .rail__name, .rail a:focus-visible .rail__name { opacity: 1; transform: none; }
  .rail a:hover .rail__id, .rail a:focus-visible .rail__id { opacity: 0; }

  /* gripper cursor: an overlay that trails the native pointer */
  .cursor { position: fixed; left: 0; top: 0; z-index: 250; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
  .cursor.is-live { opacity: 1; }
  .cursor i, .cursor b { position: absolute; background: var(--white); transition: transform .35s var(--ease), background-color .3s; }
  .cursor i { top: -10px; width: 1.5px; height: 20px; }
  .cursor i:nth-of-type(1) { left: -15px; }
  .cursor i:nth-of-type(2) { left: 13.5px; }
  .cursor b { left: -15px; top: -10px; width: 30px; height: 1.5px; opacity: .45; transform-origin: center; }
  .cursor.is-grasp i { background: var(--cyan); }
  .cursor.is-grasp i:nth-of-type(1) { transform: translateX(7px); }
  .cursor.is-grasp i:nth-of-type(2) { transform: translateX(-7px); }
  .cursor.is-grasp b { transform: scaleX(.55); background: var(--cyan); }

  /* grain */
  .grain { position: fixed; inset: -80px; z-index: 240; pointer-events: none; opacity: .05; background-size: 128px 128px; }

  /* preloader */
  .homing { display: none; }
  .pre .homing { display: block; position: fixed; inset: 0; z-index: 280; animation: homing-failsafe 0s linear 7s forwards; }
  .homing__half { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--ink); }
  .homing__half--top { top: 0; box-shadow: inset 0 -1px 0 var(--line-strong); }
  .homing__half--bot { bottom: 0; }
  .homing__ui { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; }
  .homing__joints { display: flex; gap: 14px; }
  .homing__joints li { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--grey); transition: background-color .15s, border-color .15s; }
  .homing__joints li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 1px; margin-right: 1px; background: var(--line-strong); }
  .homing__joints li.is-on { background: var(--cyan); border-color: var(--cyan); }
  .homing__text { font-family: var(--mono); font-size: .75rem; color: var(--grey); }
  @keyframes homing-failsafe { to { visibility: hidden; } }

  /* telemetry */
  .telemetry {
    display: grid; grid-template-columns: repeat(4, auto); gap: .2rem 1.1rem; justify-content: end;
    font-family: var(--mono); font-size: .6875rem; line-height: 1.5; font-variant-numeric: tabular-nums;
  }
  .telemetry div { display: flex; gap: .6em; justify-content: space-between; }
  .telemetry dt { color: var(--grey); }
  .telemetry dd { min-width: 6ch; text-align: right; color: var(--white); }
  .telemetry__xyz:nth-of-type(8) { grid-column-start: 1; }
  .telemetry__state { grid-column: 1 / -1; justify-content: flex-start !important; padding-top: .35rem; margin-top: .25rem; border-top: 1px solid var(--line); }
  .telemetry__state dd { min-width: 0; text-align: left; color: var(--cyan); }

  /* availability */
  .status { display: flex; align-items: center; gap: .55rem; margin-top: .3rem; color: var(--white); }
  .status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }

  /* ledgers and ruled rows */
  .ledger > div, .figures__grid > li, .mission__rules > li, .facts > div { border-top: 1px solid var(--line-strong); }
  .ledger > div { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) auto; gap: .25rem 1.25rem; align-items: baseline; padding-block: 1.1rem; }
  .ledger dt { font-weight: 600; }
  .ledger dd { color: var(--grey); }
  .ledger__when { font-family: var(--mono); font-size: .6875rem; white-space: nowrap; }
  .ledger__title { margin-bottom: .9rem; font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--grey); }
  .ledger + .ledger__title { margin-top: clamp(2.5rem, 7vh, 4.5rem); }

  /* pipeline beats */
  .beats { display: grid; gap: .6rem; }
  .beats li { display: grid; grid-template-columns: 1.4rem 5rem minmax(0, 1fr); align-items: baseline; }
  .beats li::before { font-family: var(--mono); font-size: .6875rem; color: var(--grey); }
  .beats li:nth-child(1)::before { content: "1"; }
  .beats li:nth-child(2)::before { content: "2"; }
  .beats li:nth-child(3)::before { content: "3"; }
  .beats li:nth-child(4)::before { content: "4"; }
  .beats b { font-weight: 600; }
  .beats span { color: var(--grey); font-size: .9375rem; line-height: 1.5; }

  /* footage layer */
  .footage { position: absolute; inset: 0; z-index: 3; clip-path: circle(0 at 50% 50%); pointer-events: none; }
  .footage video { width: 100%; height: 100%; object-fit: cover; }
  .hero__pin > .footage { z-index: 0; }
  .viewswitch {
    position: absolute; right: 1rem; bottom: 1rem; z-index: 4;
    padding: .5rem .8rem; border: 1px solid var(--line-strong); border-radius: 2px;
    background: rgba(17, 19, 24, .7); font-size: .8125rem;
  }
  .viewswitch:hover { border-color: var(--cyan); }
}

/* ------------------------------------------------------------ sections */
@layer sections {

  /* ---- J1 hero ---- */
  .hero { position: relative; }
  .hero__pin { position: relative; height: 100vh; height: 100svh; min-height: 34rem; overflow: clip; }
  .hero__canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
  .hero__ui {
    position: absolute; inset: 0; z-index: 1; container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "role tele" ". ." "lead lead" "name name" "row row";
    padding-top: calc(var(--hdr) + clamp(.75rem, 2.5vh, 2rem));
    padding-bottom: clamp(1.25rem, 3.5vh, 2.5rem);
  }
  .hero__role { grid-area: role; max-width: 18ch; font-size: clamp(1.125rem, 1.7vw, 1.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
  .hero__tele { grid-area: tele; align-self: start; }
  .hero__lead { grid-area: lead; max-width: 36ch; margin-bottom: clamp(.9rem, 2.6vh, 1.75rem); font-size: clamp(1.0625rem, 1.35vw, 1.375rem); line-height: 1.42; }
  .hero__name {
    grid-area: name; --wdth: 125;
    font-size: min(14.7cqw, 27vh); font-size: min(14.7cqw, 27svh);
    font-weight: 800; line-height: .84; letter-spacing: -.035em; font-kerning: none;
    transform-origin: 0 0; will-change: transform;
  }
  .hero__line { display: block; white-space: nowrap; }
  .hero__name .ch { font-stretch: calc((var(--wdth, 125) - var(--wv, 0)) * 1%); }
  .hero__row { grid-area: row; display: flex; align-items: flex-end; gap: clamp(1.25rem, 3vw, 3rem); margin-top: clamp(1rem, 3vh, 2rem); }
  .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
  .hero__detail { max-width: 36ch; font-size: .875rem; line-height: 1.45; color: var(--grey); }
  .hero__cue { margin-left: auto; font-size: .875rem; color: var(--grey); white-space: nowrap; }
  .hero__caption {
    position: absolute; left: var(--m); bottom: clamp(2rem, 10vh, 6rem); max-width: 11ch;
    font-size: clamp(2rem, 4.4vw, 4.5rem); font-weight: 650; line-height: 1; letter-spacing: -.02em;
    font-stretch: 105%; display: none;
  }

  /* ---- stats strip ---- */
  .stats { position: relative; padding-block: clamp(4rem, 11vh, 8rem) clamp(5rem, 13vh, 10rem); }
  .stats__intro { margin-bottom: clamp(2.5rem, 6vh, 4rem); font-size: clamp(1.375rem, 2vw, 2rem); font-weight: 600; letter-spacing: -.01em; }
  .stats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3rem clamp(1.25rem, 2.6vw, 3rem); }
  .dim { position: relative; padding-top: 1.9rem; }
  .dim__line { position: absolute; left: 0; right: 0; top: .5rem; height: 1px; background: var(--line-strong); }
  .dim__line::before, .dim__line::after { content: ""; position: absolute; top: -7px; width: 1px; height: 15px; background: var(--grey); }
  .dim__line::before { left: 0; }
  .dim__line::after { right: 0; }
  .dim::before, .dim::after { content: ""; position: absolute; top: calc(.5rem - 3px); border: 3.5px solid transparent; }
  .dim::before { left: 1px; border-left: 0; border-right: 8px solid var(--grey); }
  .dim::after { right: 1px; border-right: 0; border-left: 8px solid var(--grey); }
  .dim__val {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45rem;
    font-size: clamp(2.75rem, 5.4vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
  }
  .dim__unit { font-size: .28em; font-weight: 500; letter-spacing: 0; color: var(--grey); }
  .dim__label { margin-top: .8rem; max-width: 24ch; font-size: .9375rem; line-height: 1.45; color: var(--grey); }

  /* ---- J2 mission ---- */
  .mission__pin { display: flex; align-items: center; padding-block: var(--pad); }
  .mission__pin > .wrap { width: 100%; }
  .mission__head { max-width: 14ch; }
  .mission__head .w { display: inline-block; }
  .mission__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; margin-top: clamp(2rem, 6vh, 4.5rem); }
  .mission__body { max-width: 46ch; }
  .mission__rules > li { padding-block: 1rem; font-size: clamp(1.1875rem, 1.7vw, 1.75rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }

  /* ---- J3 axes ---- */
  .axes__wrap { padding-block: var(--pad); }
  .axes__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gut) clamp(2rem, 6vw, 7rem); align-items: end; }
  .axes__head .t-lead { max-width: 44ch; color: var(--grey); }
  .axes__stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gut) clamp(2rem, 6vw, 7rem); margin-top: clamp(2rem, 5vh, 4rem); }
  .axes__view { position: relative; min-height: 22rem; }
  .axes__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .axis { padding-block: 2rem; border-top: 1px solid var(--line-strong); }
  .axis__letter { margin-bottom: .5rem; font-size: clamp(3.5rem, 7vw, 7.5rem); font-weight: 800; font-stretch: 125%; line-height: .85; color: var(--cyan); }
  .axis__line { margin-top: .9rem; max-width: 40ch; font-size: clamp(1.125rem, 1.45vw, 1.5rem); line-height: 1.4; }
  .axis__tools { margin: 1rem 0 1.4rem; max-width: 52ch; font-size: .9375rem; color: var(--grey); }

  /* ---- J4 work ---- */
  .work__intro { padding-block: var(--pad) clamp(3rem, 8vh, 6rem); }
  .work__intro h2 { max-width: 16ch; }

  .project--scene { position: relative; border-top: 1px solid var(--line); }
  .project__pin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 44rem; }
  .project__text {
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--hdr) + 1rem) clamp(1.5rem, 3vw, 3.5rem) 2rem var(--m);
  }
  .project__when { font-family: var(--mono); font-size: .6875rem; color: var(--grey); margin-bottom: 1rem; }
  .project__sub { margin-top: .5rem; color: var(--grey); }
  .project__hook { margin-top: clamp(1rem, 3vh, 1.75rem); font-size: clamp(1.1875rem, 1.55vw, 1.625rem); line-height: 1.35; font-weight: 500; max-width: 26ch; }
  .project__body { margin-top: .9rem; max-width: 46ch; color: var(--grey); font-size: .9375rem; }
  .project .beats { margin-top: clamp(1.25rem, 3.5vh, 2rem); }
  .project__stack { margin-top: clamp(1rem, 3vh, 1.75rem); padding-top: 1rem; border-top: 1px solid var(--line); max-width: 46ch; font-size: .875rem; color: var(--grey); }
  .project__links { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin-top: 1.1rem; font-size: .9375rem; font-weight: 500; }

  .project__view { position: relative; min-height: 26rem; background: var(--ink); border-left: 1px solid var(--line); overflow: hidden; }
  .project__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .project__tag { position: absolute; left: 1rem; top: calc(var(--hdr) + .5rem); z-index: 4; font-family: var(--mono); font-size: .6875rem; color: var(--grey); }
  .project__turn {
    position: absolute; left: 50%; bottom: clamp(1.25rem, 5vh, 3rem); z-index: 4; transform: translateX(-50%);
    padding: .5rem .9rem; border: 1px solid var(--cyan); border-radius: 2px; background: rgba(11, 13, 17, .8);
    font-size: .9375rem; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .4s var(--ease);
  }
  .project__turn.is-on { opacity: 1; }
  .turn--touch { display: none; }
  @media (hover: none), (pointer: coarse) { .turn--fine { display: none; } .turn--touch { display: inline; } }

  .project--figures { border-top: 1px solid var(--line); }
  .figures { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); padding-block: clamp(5rem, 14vh, 10rem); align-items: start; }
  .figures__text .project__hook { max-width: 22ch; }
  .figures__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 3rem); }
  .figures__grid > li { padding: 1.4rem 0 2.2rem; }
  .figures__n { display: block; font-size: clamp(4rem, 8vw, 8.5rem); font-weight: 800; font-stretch: 125%; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .figures__l { display: block; margin-top: .8rem; max-width: 27ch; font-size: .9375rem; line-height: 1.45; color: var(--grey); }

  /* ---- J5 story ---- */
  .story > .wrap { padding-block: var(--pad); }
  .story__lead { margin-top: clamp(1.25rem, 3vh, 2rem); color: var(--grey); }
  .story__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; margin-top: clamp(3rem, 9vh, 6.5rem); }
  .path { position: relative; padding-left: 3.75rem; }
  .path__draw { position: absolute; left: 0; top: 0; width: 44px; height: 100%; pointer-events: none; }
  .path__svg { width: 44px; height: 100%; overflow: visible; }
  .path__svg path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .path__track { stroke: var(--line); }
  .path__line { stroke: var(--white); stroke-opacity: .85; }
  .path__dash { stroke: var(--cyan); stroke-dasharray: 3 6; }
  .wp { position: relative; padding-bottom: clamp(2.75rem, 8vh, 5.5rem); }
  .wp:last-child { padding-bottom: 0; }
  .wp__ring {
    position: absolute; left: calc(-3.75rem + 15.5px); top: .2rem; width: 13px; height: 13px; border-radius: 50%;
    border: 1px solid var(--grey); background: var(--charcoal);
    transition: background-color .4s, border-color .4s, transform .5s var(--ease);
  }
  .wp.is-on .wp__ring { background: var(--white); border-color: var(--white); }
  .wp--next .wp__ring, .wp--next.is-on .wp__ring { background: var(--charcoal); border-color: var(--cyan); }
  .wp--next.is-on .wp__ring { transform: scale(1.3); }
  .wp__when { font-family: var(--mono); font-size: .6875rem; color: var(--grey); margin-bottom: .6rem; }
  .wp__what { margin: .4rem 0 .9rem; font-weight: 500; }
  .wp > p:not([class]) { max-width: 56ch; color: var(--grey); }
  .wp .link { display: inline-block; margin-top: 1.1rem; font-weight: 500; }

  .story__side { position: sticky; top: calc(var(--hdr) + 1.5rem); }
  .portrait { position: relative; aspect-ratio: 3 / 4; background: var(--graphite); }
  .portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.9); transition: filter 1s var(--ease); }
  .portrait:hover img { filter: none; }
  .portrait::before, .portrait::after { content: ""; position: absolute; z-index: 1; width: 16px; height: 16px; pointer-events: none; }
  .portrait::before { left: -7px; top: -7px; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
  .portrait::after { right: -7px; bottom: -7px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
  .facts { margin-top: 1.5rem; }
  .facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding-block: .65rem; font-size: .875rem; line-height: 1.45; }
  .facts dt { color: var(--grey); }

  /* ---- J6 team ---- */
  .team > .wrap { padding-block: var(--pad); }
  .team__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
  .team__head { position: sticky; top: calc(var(--hdr) + 1.5rem); }
  .team__title { max-width: 11ch; transform-origin: 0 50%; }
  .team__head .t-lead { margin-top: clamp(1.25rem, 3vh, 2rem); max-width: 30ch; color: var(--grey); }

  /* ---- J7 contact ---- */
  .contact { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: clip; }
  .contact__canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
  .contact__wrap { position: relative; z-index: 1; width: 100%; padding-block: var(--pad) clamp(4rem, 10vh, 8rem); container-type: inline-size; }
  .contact__head {
    --wdth: 125;
    font-size: min(11.9cqw, 30vh); font-size: min(11.9cqw, 30svh);
    font-weight: 800; line-height: .88; letter-spacing: -.035em; white-space: nowrap; font-kerning: none;
  }
  .contact__head .ch { font-stretch: calc((var(--wdth, 125) - var(--wv, 0)) * 1%); }
  .contact__lead { margin-top: clamp(1.5rem, 4vh, 2.75rem); max-width: 34ch; }
  .contact__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(1.75rem, 5vh, 3rem); }
  .contact__more { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 2rem; font-size: .9375rem; font-weight: 500; }

  /* ---- footer title block ---- */
  .titleblock { position: relative; padding-block: clamp(3rem, 8vh, 5rem) 2.25rem; border-top: 1px solid var(--line); }
  .tb {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong);
    text-transform: uppercase; font-size: .8125rem; letter-spacing: .045em; line-height: 1.3;
  }
  .tb > div { padding: .7rem .95rem .8rem; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
  .tb dt { margin-bottom: .3rem; font-size: .625rem; letter-spacing: .09em; color: var(--grey); }
  .tb__a { grid-column: span 3; } .tb__b { grid-column: span 7; } .tb__c { grid-column: span 2; }
  .tb__d { grid-column: span 3; } .tb__e { grid-column: span 4; } .tb__f { grid-column: span 3; } .tb__g { grid-column: span 2; }
  .foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.75rem; font-size: .875rem; color: var(--grey); }
  .foot__links { display: flex; gap: 1.5rem; }

  /* ---- tablet and phone ---- */
  @media (max-width: 1023px) {
    .hdr__nav, .hdr__cta { display: none; }
    /* larger tap targets for inline links */
    .axis .link, .project__links .link, .wp .link, .contact__more .link, .foot .link { display: inline-block; padding-top: .8rem; }
    .hdr__menu { display: block; }

    .rail { left: 0; right: 0; top: 0; z-index: 70; transform: none; pointer-events: none; }
    .rail ol { flex-direction: row; gap: 2px; }
    .rail ol::before { display: none; }
    .rail li { flex: 1; }
    .rail a { display: block; width: auto; height: 3px; }
    .rail a::before { display: block; width: 100%; height: 3px; border: 0; border-radius: 0; background: var(--line-strong); }
    .rail a.is-on::before { transform: none; background: var(--cyan); }
    .rail__id, .rail__name { display: none; }
    .joint::after { display: none; }

    .hero__ui { grid-template-areas: "role tele" "lead lead" ". ." "name name" "row row"; grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
    .hero__lead { margin-top: 1rem; margin-bottom: 0; max-width: 34ch; font-size: 1rem; }
    .hero__row { flex-wrap: wrap; align-items: flex-start; gap: .9rem 1.5rem; }
    .hero__cue { display: none; }
    .telemetry { grid-template-columns: auto; }
    .telemetry div:not(.telemetry__xyz):not(.telemetry__state) { display: none; }

    .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats__grid li:last-child { grid-column: 1 / -1; }

    .mission__cols, .axes__head, .axes__stage, .figures, .story__cols, .team__cols { grid-template-columns: minmax(0, 1fr); }
    .axes__view { position: sticky; top: var(--hdr); z-index: 2; height: 34vh; height: 34svh; min-height: 0; background: var(--charcoal); border-bottom: 1px solid var(--line); margin-inline: calc(var(--m) * -1); }
    .axes__head .t-lead { max-width: 40ch; }

    .project__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; }
    .project__view { order: -1; height: 52vh; height: 52svh; min-height: 0; border-left: 0; border-bottom: 1px solid var(--line); }
    .project__tag { display: none; }
    .project__turn { top: calc(var(--hdr) + .5rem); bottom: auto; font-size: .875rem; }
    .project__text { justify-content: flex-start; padding: 1.5rem var(--m) 2.5rem; }

    .story__side { position: static; max-width: 22rem; }
    .team__head { position: static; }
    .ledger > div { grid-template-columns: minmax(0, 1fr) auto; }
    .ledger dt { grid-column: 1; }
    .ledger dd:not(.ledger__when) { grid-column: 1 / -1; grid-row: 2; }
    .ledger__when { grid-column: 2; grid-row: 1; }

    .contact { align-items: flex-end; }
    .contact__wrap { padding-top: 46vh; padding-top: 46svh; }
    .contact__cta .btn { flex: 1 1 100%; min-height: 3.25rem; }

    .tb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb > div { grid-column: span 1; }
    .tb > .tb__b { grid-column: 1 / -1; order: -1; }
  }
  @media (max-width: 639px) {
    .hero__cta .btn { padding-inline: 1rem; font-size: .9375rem; }
    .hero__detail { font-size: .8125rem; }
    .figures__grid { grid-template-columns: minmax(0, 1fr); }
    .beats li { grid-template-columns: 1.4rem 4.5rem minmax(0, 1fr); }
  }
}

/* ------------------------------------------------------------ motion (only when JS, the libraries and the visitor all allow it) */
@layer motion {
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }

  .motion .grain { animation: grain 1s steps(1) infinite; }
  @keyframes grain {
    0% { transform: translate(0, 0); } 16% { transform: translate(-37px, 21px); } 33% { transform: translate(29px, -44px); }
    50% { transform: translate(-58px, -19px); } 66% { transform: translate(46px, 38px); } 83% { transform: translate(-21px, 57px); }
  }

  /* hero */
  .motion .hero { height: 220vh; }
  .motion .hero__pin { position: sticky; top: 0; }
  .motion .hero [data-in] { opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
  .motion .hero.is-ready [data-in] { opacity: 1; transform: none; }
  .motion .hero__role [data-in] { --d: .15s; display: block; }
  .motion .hero__lead [data-in] { --d: .3s; display: block; }
  .motion .hero__cta { --d: .45s; }
  .motion .hero__detail { --d: .55s; }
  .motion .hero__cue { --d: .65s; }
  .motion .telemetry { --d: .75s; }
  .motion .hero__canvas { opacity: 0; }
  .motion .hero:not(.is-ready) .hero__line { opacity: 0; }
  .motion .hero__caption { display: block; opacity: 0; visibility: hidden; }
  .motion .hdr__name { opacity: 0; }

  /* stats */
  .motion .dim__line { clip-path: inset(-10px 50% -10px 50%); transition: clip-path 1s var(--ease) calc(var(--i, 0) * 90ms); }
  .motion .dim::before, .motion .dim::after { opacity: 0; transition: opacity .4s calc(var(--i, 0) * 90ms + .7s); }
  .motion .dim__val, .motion .dim__label { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease) calc(var(--i, 0) * 90ms + .25s), transform .9s var(--ease) calc(var(--i, 0) * 90ms + .25s); }
  .motion .dim__label { transition-delay: calc(var(--i, 0) * 90ms + .45s); }
  .motion .stats.is-in .dim__line { clip-path: inset(-10px 0 -10px 0); }
  .motion .stats.is-in .dim::before, .motion .stats.is-in .dim::after { opacity: 1; }
  .motion .stats.is-in .dim__val, .motion .stats.is-in .dim__label { opacity: 1; transform: none; }

  /* ruled rows: the hairline draws from the left, then the content arrives */
  .motion :is(.ledger > div, .figures__grid > li, .mission__rules > li, .facts > div) {
    border-top-color: transparent;
    background: linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 0 1px no-repeat;
    transition: background-size 1.1s var(--ease);
  }
  .motion :is(.ledger > div, .figures__grid > li, .mission__rules > li, .facts > div) > * { opacity: 0; transition: opacity .7s var(--ease) .2s; }
  .motion :is(.ledger > div, .figures__grid > li, .mission__rules > li, .facts > div).is-in { background-size: 100% 1px; }
  .motion :is(.ledger > div, .figures__grid > li, .mission__rules > li, .facts > div).is-in > * { opacity: 1; }

  .motion [data-pivot] { transform-origin: 0 100%; will-change: transform; }

  @media (min-width: 1024px) {
    /* mission: pinned read-in */
    .motion .mission { height: 180vh; }
    .motion .mission__pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: calc(var(--hdr) + 1rem) 2rem; }

    /* axes: pinned, three steps */
    .motion .axes { height: 300vh; }
    .motion .axes__pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
    .motion .axes__wrap { display: flex; flex-direction: column; height: 100%; padding-block: calc(var(--hdr) + 1rem) clamp(1.5rem, 4vh, 3rem); }
    .motion .axes__stage { flex: 1; min-height: 0; margin-top: clamp(1rem, 3vh, 2.5rem); }
    .motion .axes__view { min-height: 0; }
    .motion .axes__panels { position: relative; }
    .motion .axis {
      position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
      padding: 0; border: 0; opacity: 0; visibility: hidden; transform: translateY(18px);
      transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s .5s;
    }
    .motion .axis.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }

    /* project scenes: pinned */
    .motion .project--scene { height: 300vh; }
    .motion .project__pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }

    /* beats: names in a row, one sentence slot */
    .motion .beats { grid-template-columns: repeat(4, auto); justify-content: start; gap: .7rem 1.6rem; }
    .motion .beats li { display: contents; }
    .motion .beats li::before { display: none; }
    .motion .beats b { grid-row: 1; color: var(--grey); transition: color .35s; white-space: nowrap; }
    .motion .beats b::before { margin-right: .5em; font-family: var(--mono); font-size: .6875rem; font-weight: 400; color: var(--grey); transition: color .35s; }
    .motion .beats li:nth-child(1) b::before { content: "1"; }
    .motion .beats li:nth-child(2) b::before { content: "2"; }
    .motion .beats li:nth-child(3) b::before { content: "3"; }
    .motion .beats li:nth-child(4) b::before { content: "4"; }
    .motion .beats span { grid-row: 2; grid-column: 1 / -1; min-height: 4.5em; max-width: 44ch; opacity: 0; transition: opacity .4s var(--ease); }
    .motion .beats li.is-done b { color: var(--white); }
    .motion .beats li.is-on b { color: var(--white); }
    .motion .beats li.is-on b::before { color: var(--cyan); }
    .motion .beats li.is-on span { opacity: 1; }
  }

  @media (max-width: 1023px) {
    /* phone and tablet: the scene pins as one screen, canvas on top */
    .motion .project--scene { height: 250vh; }
    .motion .project__pin { position: sticky; top: 0; height: 100vh; height: 100svh; grid-template-rows: auto minmax(0, 1fr); }
    .motion .project__view { height: 48vh; height: 48svh; }
    .motion .project__text { padding-block: 1.1rem 1rem; overflow: hidden; }
    .motion .project__when, .motion .project__body, .motion .project__sub { display: none; }
    .motion .project__hook { margin-top: .4rem; font-size: 1.0625rem; }
    .motion .project .beats { margin-top: .9rem; }
    .motion .beats { grid-template-columns: repeat(4, auto); justify-content: start; gap: .45rem 1.1rem; }
    .motion .beats li { display: contents; }
    .motion .beats li::before { display: none; }
    .motion .beats b { grid-row: 1; color: var(--grey); font-size: .9375rem; transition: color .35s; }
    .motion .beats span { grid-row: 2; grid-column: 1 / -1; min-height: 4.6em; font-size: .875rem; opacity: 0; transition: opacity .4s var(--ease); }
    .motion .beats li.is-done b, .motion .beats li.is-on b { color: var(--white); }
    .motion .beats li.is-on b { box-shadow: 0 2px 0 var(--cyan); }
    .motion .beats li.is-on span { opacity: 1; }
    .motion .project__stack { margin-top: .6rem; padding-top: .6rem; font-size: .8125rem; }
    .motion .project__links { margin-top: .7rem; }
  }
  @media (max-width: 1023px) and (max-height: 720px) {
    .motion .project__stack { display: none; }
    .motion .project__view { height: 44vh; height: 44svh; }
  }
}

/* ------------------------------------------------------------ utilities */
@layer utilities {
  .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  }
  @media print {
    .grain, .cursor, .rail, .homing, .hdr { display: none !important; }
  }
}

/* ------------------------------------------------------------ language switch (EN / DE), top right */
@layer components {
  .lang { display: none; align-items: center; font-family: var(--mono); font-size: .75rem; line-height: 1; }
  .js .lang { display: flex; }                      /* the switch needs the script, so it only shows with it */
  .lang a { position: relative; padding: .85rem .55rem; color: var(--grey); text-decoration: none; transition: color .3s; }
  .lang a + a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: .9em; background: var(--line-strong); transform: translateY(-50%); }
  .lang a:hover, .lang a:focus-visible { color: var(--white); }
  .lang a.is-on { color: var(--white); cursor: default; }
  .lang a.is-on::after { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .5rem; height: 1px; background: var(--cyan); }
  @media (max-width: 1023px) {
    .lang { margin-right: -.35rem; }
    .lang a { padding: 1rem .8rem; }                /* 44px tap targets */
    .lang a.is-on::after { left: .8rem; right: .8rem; bottom: .65rem; }
  }
}

/* ------------------------------------------------------------ German: longer words, longer lines */
@layer sections {
  /* hyphenate only long compounds (13 letters and up), never short words */
  :lang(de) :is(p, li, dd, h3) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 13 5 5; overflow-wrap: break-word; }
  /* names, tools and course titles stay in English: no German hyphenation rules on them */
  :lang(de) :is(.wp__what, .facts dd, .project__when, .project__stack, .axis__tools, .ledger__when) { hyphens: manual; -webkit-hyphens: manual; }
  :lang(de) .hero__role { max-width: 24ch; hyphens: manual; -webkit-hyphens: manual; }   /* breaks only at its soft hyphen */
  :lang(de) .team__title { max-width: 16ch; }
  /* "Vernetzen wir uns." is longer than "Let's connect.": same fill of the line, smaller size */
  :lang(de) .contact__head { font-size: min(9.1cqw, 30vh); font-size: min(9.1cqw, 30svh); }
}

@layer utilities {
  /* German is swapped in by script.js; nothing is shown until it has run (released after 3s at the latest) */
  .lang-wait body { visibility: hidden; }
}

/* ------------------------------------------------------------ my role on team projects; solo projects */
@layer sections {
  .project__role { margin-top: clamp(.9rem, 2.4vh, 1.4rem); max-width: 46ch; font-size: .875rem; line-height: 1.5; color: var(--white); }
  .project__role b { font-weight: 650; margin-right: .35em; }
  .project__role + .project__stack { margin-top: clamp(.8rem, 2.2vh, 1.25rem); }

  .solo > li { padding-bottom: 2.6rem; }
  .solo__when { font-family: var(--mono); font-size: .6875rem; color: var(--grey); }
  .solo__title { margin: .75rem 0 0; font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 650; font-stretch: 105%; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
  .solo__text { margin-top: .8rem; max-width: 40ch; font-size: .9375rem; line-height: 1.5; color: var(--grey); }
  .solo__flow { margin-top: 1rem; font-family: var(--mono); font-size: .6875rem; line-height: 1.7; color: var(--white); }
  .solo__flow span { white-space: nowrap; }                      /* never break inside an arrow */
  :lang(de) :is(.solo__when, .solo__flow) { hyphens: manual; -webkit-hyphens: manual; }
}
@layer motion {
  @media (max-width: 1023px) {
    /* pinned phone layout: the role takes the place of the tool list */
    .motion .project--scene .project__stack { display: none; }
    .motion .project__role { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.45; }
  }
}
@layer motion {
  /* short screens: the pinned project text gives up its description first, then its tool list */
  @media (min-width: 1024px) and (max-height: 880px) {
    .motion .project--scene .project__body { display: none; }
  }
  @media (min-width: 1024px) and (max-height: 790px) {
    .motion .project--scene .project__stack { display: none; }
    .motion .project--scene .project__role { padding-top: .9rem; border-top: 1px solid var(--line); }
    .motion .project--scene .beats span { min-height: 3.2em; }
  }
  @media (max-width: 1023px) and (max-height: 720px) {
    .motion .project__view { height: 35vh; height: 35svh; }
    .motion .project__role { font-size: .78rem; line-height: 1.4; }
  }
}