/* ==========================================================================
   AVERNOX — "Descent"
   ==========================================================================
   Reference lock (see docs/DESIGN-RESEARCH.md):
     primary   Active Theory   — void canvas, emitted light, low density, no shadow
     borrowed  Julia Krantz    — 1px 12% structural seams, 0 radius, dim-the-others hover
     borrowed  entire studios  — utility micro-label voice
     borrowed  Liron Moran     — one composition: monumental type + figure through it
     borrowed  Exo Ape         — negative tracking at display scale

   One rule generates everything: nothing is visible unless a threshold is near it.
   ========================================================================== */

/* ---------- Type ---------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* declared last so it wins for codepoints both subsets contain (e.g. U+0131) */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens -------------------------------------------------------- */

:root {
  --abyss: #000000;
  --ground: #04050a;
  --ground-hi: #0c0d13;
  --ground-lo: #010103;

  --ice: #eef1f7;
  --muted: #98a1b6;
  --slate: #788098;

  /* Julia Krantz's exact structural value */
  --hair: rgba(238, 241, 247, 0.12);
  --hair-lit: rgba(238, 241, 247, 0.26);

  --seam: linear-gradient(
    90deg,
    #8a2e63 0%, #ff6fa6 13%, #f062c8 30%, #a768ff 46%,
    #5c74ff 62%, #2e4bc8 80%, #161c50 100%
  );

  --shell: 1560px;
  --gutter: clamp(1.25rem, 4.4vw, 5rem);
  --chapter: clamp(4rem, 6.4vw, 7.25rem);

  --t-micro: 200ms;
  --t-content: 900ms;
  --t-threshold: 1600ms;
  --e-content: cubic-bezier(0.22, 1, 0.36, 1);
  --e-threshold: cubic-bezier(0.62, 0.02, 0.16, 1);

  color-scheme: dark;
}

/* ---------- Reset --------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ground);
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ice);
  font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 370;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img, svg, picture, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: rgba(167, 104, 255, 0.3); color: var(--ice); }

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

.vh {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 300;
  padding: 0.8rem 1.3rem;
  background: var(--ground-hi);
  border: 1px solid var(--hair-lit);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  transform: translateY(-180%);
  transition: transform var(--t-micro) var(--e-content);
}
.skip:focus { transform: translateY(0); }

/* ---------- Grain --------------------------------------------------------- */
/* The brand kit dithers its own dark fields to stop banding. Same purpose. */

.grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { .grain { display: none; } }

/* ---------- Type scale ---------------------------------------------------- */
/* Display is compressed and architectural (-0.035em, real weight).
   Micro-label is stretched and instrumental (+0.2em). The tension is the voice. */

.d1, .d2, .d3 { text-transform: uppercase; text-wrap: balance; }

.d1 {
  font-size: clamp(2.55rem, 8.6vw, 8.25rem);
  font-variation-settings: 'wdth' 115, 'wght' 420;
  letter-spacing: -0.035em;
  line-height: 0.88;
}

.d2 {
  font-size: clamp(1.9rem, 5.4vw, 4.6rem);
  font-variation-settings: 'wdth' 112, 'wght' 400;
  letter-spacing: -0.028em;
  line-height: 0.95;
}

.d3 {
  font-size: clamp(1.35rem, 2.8vw, 2.35rem);
  font-variation-settings: 'wdth' 108, 'wght' 380;
  letter-spacing: -0.018em;
  line-height: 1.12;
}

.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  font-variation-settings: 'wdth' 100, 'wght' 320;
  line-height: 1.58;
  color: rgba(238, 241, 247, 0.88);
  text-wrap: pretty;
}

.body {
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  font-variation-settings: 'wdth' 100, 'wght' 370;
  line-height: 1.78;
  color: var(--muted);
  text-wrap: pretty;
}
.body + .body { margin-top: 1.15em; }

.label {
  font-size: 0.6875rem;
  font-variation-settings: 'wdth' 100, 'wght' 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.label--tight { font-size: 0.625rem; letter-spacing: 0.24em; }

.idx {
  font-size: 0.625rem;
  font-variation-settings: 'wdth' 100, 'wght' 500;
  letter-spacing: 0.24em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.wordmark {
  font-variation-settings: 'wdth' 115, 'wght' 250;
  letter-spacing: 0.44em;
  text-transform: uppercase;
}

.ice { color: var(--ice); }
.dim { color: var(--slate); }

/* ---------- Layout -------------------------------------------------------- */

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

.split { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(2.5rem, 6vw, 7rem); }
}

.split-top { align-items: start; }

.cols-2 { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 760px) { .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Plates in a text column: a frame the plane moves inside, never a card. */
.col-plate, .wide-plate { position: relative; margin: 0; }
.col-plate > picture, .wide-plate > picture {
  display: block; position: relative; overflow: hidden; background: #08090e;
  border-top: 1px solid var(--hair);
}
.col-plate > picture { aspect-ratio: 4 / 5; }
.wide-plate > picture { aspect-ratio: 21 / 9; }
.col-plate img, .wide-plate img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 899px) { .col-plate { display: none; } }

.bleed-plate {
  position: relative; margin: clamp(3rem, 6vw, 5.5rem) 0 0;
  border-top: 1px solid var(--hair);
}
.bleed-plate > picture {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 21 / 9; background: #020204;
}
@media (max-width: 719px) { .bleed-plate > picture { aspect-ratio: 4 / 3; } }
/* on very wide screens a 21:9 band becomes a wall of black; the composition
   is horizontal, so let it get wider rather than taller */
@media (min-width: 1800px) { .bleed-plate > picture { aspect-ratio: 32 / 9; } }
@media (min-width: 2300px) { .bleed-plate > picture { aspect-ratio: 40 / 9; } }
.bleed-plate img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
.bleed-cap { display: block; margin-top: 0.9rem; }
.bleed-cap /* ---------- Creed (studio) ------------------------------------------------ */
/* The one place the tagline is allowed to be said out loud: over the night
   itself, at full bleed, with the seam drawn first. */

.creed {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-block: clamp(5rem, 13vw, 11rem);
  border-block: 1px solid var(--hair);
}
.creed-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.creed-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.5;
}
.creed-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,5,10,0.86), rgba(4,5,10,0.42) 45%, rgba(4,5,10,0.9));
}
.creed-in { position: relative; z-index: 2; }
.creed-line { max-width: 30rem; }
@media (min-width: 900px) { .creed-line { max-width: 56rem; } }

.micro-cap { margin-top: 0; }

/* ---------- Creed (studio) ------------------------------------------------ */
/* The one place the tagline is allowed to be said out loud: over the night
   itself, at full bleed, with the seam drawn first. */

.creed {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-block: clamp(5rem, 13vw, 11rem);
  border-block: 1px solid var(--hair);
}
.creed-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.creed-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.5;
}
.creed-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,5,10,0.86), rgba(4,5,10,0.42) 45%, rgba(4,5,10,0.9));
}
.creed-in { position: relative; z-index: 2; }
.creed-line { max-width: 30rem; }
@media (min-width: 900px) { .creed-line { max-width: 56rem; } }

.micro-cap {
  display: block; margin-top: 0.85rem;
  font-size: 0.5625rem;
  font-variation-settings: 'wdth' 100, 'wght' 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate); line-height: 1.6;
}

.measure { max-width: 34rem; }
.measure-wide { max-width: 46rem; }

.row-end {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem 2.5rem;
}

.mt-xs { margin-top: 0.6rem; }
.mt-sm { margin-top: 1.15rem; }
.mt-md { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.mt-lg { margin-top: clamp(2.5rem, 4.5vw, 4rem); }
.mt-xl { margin-top: clamp(3.5rem, 7vw, 6.5rem); }
.mb-md { margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
.mb-lg { margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }


/* CSP-safe utility values formerly expressed as inline style attributes. */
.hdr-actions { display: flex; align-items: center; gap: 0.85rem; }
.grid-zero { display: grid; gap: 0; }
.arrow-gap { margin-left: 0.25em; }
.studio-symbol { width: clamp(3.5rem, 7vw, 5.5rem); }
.ambient-35 { opacity: 0.35; }
.ambient-50 { opacity: 0.5; }
.ambient-55 { opacity: 0.55; }
.m0 { margin: 0; }
.chapter-top-compact { padding-top: clamp(2rem, 4vw, 3rem); }
.pad-block-mid { padding-block: clamp(2.5rem, 5vw, 4rem); }
.mb-1 { margin-bottom: 1rem; }
.ambient-still { transition: opacity 900ms ease; }
.chapter-shell-pad { padding-top: var(--chapter); padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.shell-top-tight { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Reveal and drawer staggering. Values stay in CSS so strict style-src can
   reject markup style attributes without changing the motion choreography. */
.d60 { --d: 60; } .d80 { --d: 80; } .d90 { --d: 90; } .d100 { --d: 100; }
.d110 { --d: 110; } .d120 { --d: 120; } .d130 { --d: 130; } .d140 { --d: 140; }
.d150 { --d: 150; } .d160 { --d: 160; } .d180 { --d: 180; } .d190 { --d: 190; }
.d200 { --d: 200; } .d220 { --d: 220; } .d230 { --d: 230; } .d240 { --d: 240; }
.d250 { --d: 250; } .d260 { --d: 260; } .d280 { --d: 280; } .d300 { --d: 300; }
.d320 { --d: 320; } .d360 { --d: 360; } .d380 { --d: 380; } .d400 { --d: 400; }
.d820 { --d: 820; }
.i0 { --i: 0; } .i1 { --i: 1; } .i2 { --i: 2; } .i3 { --i: 3; } .i4 { --i: 4; } .i5 { --i: 5; }

/* ---------- The seam ------------------------------------------------------ */
/* Strong at the centre, extinguished at the ends — the mark's own rule. */

.seam {
  position: relative; width: 100%; height: 1px;
  background: var(--seam);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  opacity: 0.85;
}
.seam::after {
  content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 17px;
  background: var(--seam);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  filter: blur(10px); opacity: 0.36;
}
.seam--short { width: 2.5rem; }
.seam--short::after { display: none; }

/* ---------- Threshold ----------------------------------------------------- */
/* A section boundary is an aperture. As it enters the viewport it opens across
   the width, throws light down onto the section, then settles. --lit is written
   by the scroll driver (0 → 1). */

.threshold {
  position: relative;
  --lit: 0;
}

.threshold::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--seam);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: calc(0.18 + var(--lit) * 0.62);
  transform: scaleX(calc(0.24 + var(--lit) * 0.76));
  transform-origin: center;
  transition: opacity var(--t-threshold) var(--e-threshold),
              transform var(--t-threshold) var(--e-threshold);
  will-change: transform, opacity;
}

/* light thrown down from the aperture onto the section beneath it */
.threshold::after {
  content: ''; position: absolute; inset-inline: 0; top: 0;
  height: clamp(160px, 26vh, 340px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(122, 138, 226, 0.11) 0%,
    rgba(122, 138, 226, 0.045) 26%,
    transparent 100%
  );
  opacity: var(--lit);
  transition: opacity var(--t-threshold) var(--e-threshold);
}

@media (prefers-reduced-motion: reduce) {
  .threshold { --lit: 1; }
  .threshold::before, .threshold::after { transition: none; }
}

/* ---------- Ambient far plane --------------------------------------------- */

.ambient {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.ambient img, .ambient canvas {
  width: 100%; height: 100%; object-fit: cover;
}
.ambient::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(125% 100% at 50% 42%, transparent 52%, var(--ground) 100%);
}

/* ---------- Header -------------------------------------------------------- */

.hdr {
  position: fixed; inset-inline: 0; top: 0; z-index: 150;
  border-bottom: 1px solid transparent;
  transition: background-color 500ms var(--e-content), border-color 500ms var(--e-content);
}
.hdr.is-stuck {
  background: rgba(4, 5, 10, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border-bottom-color: var(--hair);
}
.hdr.is-open { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }

.hdr-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; height: 4.25rem;
}
@media (min-width: 1000px) { .hdr-in { height: 5.5rem; } }

/* The wordmark is 16px tall by design; the thing you tap is not. Padding grows
   the hit box to 44px and the matching negative margin keeps the header height
   exactly where the composition wants it. */
.brand {
  position: relative; z-index: 180; display: inline-flex; align-items: center;
  padding: 0.875rem 0.5rem; margin: -0.875rem -0.5rem;
}
.brand img { height: 1rem; width: auto; }
@media (min-width: 1000px) { .brand img { height: 1.125rem; } }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: block; }
  .nav ul { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.75rem); }
  .nav a {
    position: relative; display: inline-block;
    font-size: 0.625rem;
    font-variation-settings: 'wdth' 100, 'wght' 500;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--slate); padding-block: 0.4rem;
    transition: color 320ms var(--e-content);
  }
  .nav a::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
    background: var(--seam);
    transition: width 460ms var(--e-content);
  }
  .nav a:hover, .nav a:focus-visible { color: var(--ice); }
  .nav a:hover::after, .nav a:focus-visible::after { width: 100%; }
  .nav a[aria-current='page'] { color: var(--ice); }
  .nav a[aria-current='page']::after { width: 100%; }
}

/* ---------- Language switcher --------------------------------------------- */
/* Present but quiet: a hairline-bordered strip of two-letter codes. */

.lang { position: relative; z-index: 180; display: flex; align-items: center; }

.lang ul {
  display: flex; align-items: stretch;
  border: 1px solid var(--hair);
}
.lang li + li { border-left: 1px solid var(--hair); }
.lang a {
  display: flex; align-items: center; padding: 0.42rem 0.5rem;
  font-size: 0.5625rem;
  font-variation-settings: 'wdth' 100, 'wght' 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--slate);
  transition: color var(--t-micro) ease, background-color var(--t-micro) ease;
}
@media (min-width: 600px) { .lang a { padding: 0.42rem 0.62rem; letter-spacing: 0.18em; } }
.lang a:hover, .lang a:focus-visible { color: var(--ice); }
.lang a[aria-current='true'] {
  color: var(--ice);
  background: rgba(238, 241, 247, 0.07);
}

/* Below the desktop breakpoint the compact header would force 30px targets,
   so the switcher moves into the drawer, where it can be full size. */
@media (max-width: 999px) {
  .hdr-right > .lang { display: none; }
}

/* the drawer gets a larger version */
.drawer .lang ul { border-color: var(--hair-lit); flex-direction: row; }
.drawer .lang a {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.9rem; min-width: 3rem; padding: 0.7rem 1rem; font-size: 0.6875rem;
}

/* ---------- Mobile toggle + drawer ---------------------------------------- */

.burger {
  position: relative; z-index: 180;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-right: -0.7rem;
}
@media (min-width: 1000px) { .burger { display: none; } }

.burger span { position: relative; display: block; width: 1.375rem; height: 0.5rem; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 1px;
  background: var(--ice); transition: transform 380ms var(--e-content);
}
.burger span::before { top: 0; }
.burger span::after { bottom: 0; }
.hdr.is-open .burger span::before { transform: translateY(3.5px) rotate(45deg); }
.hdr.is-open .burger span::after { transform: translateY(-3.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 170;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  background: var(--ground);
  visibility: hidden; opacity: 0;
  transition: opacity 380ms var(--e-content), visibility 380ms var(--e-content);
}
@media (min-width: 1000px) { .drawer { display: none; } }
.hdr.is-open .drawer { visibility: visible; opacity: 1; }

.drawer nav ul { display: flex; flex-direction: column; gap: 0.1rem; }
.drawer nav li { overflow: hidden; }
.drawer nav a {
  display: block; padding-block: 0.42rem;
  font-size: clamp(1.7rem, 9vw, 2.5rem);
  font-variation-settings: 'wdth' 112, 'wght' 400;
  letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--slate);
  transform: translateY(110%);
  transition: transform 620ms var(--e-content), color var(--t-micro) ease;
}
.hdr.is-open .drawer nav a {
  transform: translateY(0);
  transition-delay: calc(0.05s + var(--i, 0) * 0.05s);
}
.drawer nav a[aria-current='page'] { color: var(--ice); }
.drawer-foot { margin-top: 2.75rem; }
.drawer-foot .seam { margin-bottom: 1.5rem; }
.drawer-foot .lang { margin-top: 1.25rem; }

/* ---------- Actions ------------------------------------------------------- */
/* Ghost only. A filled chromatic CTA would break the colour rule. */

.act {
  position: relative; display: inline-flex; align-items: center; gap: 1.15rem;
  padding: 1rem 1.75rem;
  border: 1px solid var(--hair-lit);
  font-size: 0.625rem;
  font-variation-settings: 'wdth' 100, 'wght' 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ice); overflow: hidden;
  transition: border-color 420ms var(--e-content), color 420ms var(--e-content);
}
.act::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--seam);
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--e-threshold);
}
.act:hover, .act:focus-visible { border-color: rgba(238, 241, 247, 0.42); }
.act:hover::before, .act:focus-visible::before { transform: scaleX(1); }
.act .arrow { transition: transform 420ms var(--e-content); }
.act:hover .arrow { transform: translateX(5px); }

.quiet {
  position: relative; display: inline-block;
  font-size: 0.8125rem; color: var(--slate);
  padding: 0.5rem 0 0.38rem;
  transition: color 320ms var(--e-content);
}
.quiet::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--hair-lit); transition: background 380ms var(--e-content);
}
.quiet:hover, .quiet:focus-visible { color: var(--ice); }
.quiet:hover::after { background: rgba(238, 241, 247, 0.5); }

.arrow { overflow: visible; display: inline-block; vertical-align: middle; flex: none; }
.arrow path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- Reveal variants ----------------------------------------------- */
/* Different chapters use different members of one family — never the same
   reveal twice in a row. All resolve to the final state under reduced motion. */

.rv     { opacity: 0; transform: translate3d(0, 14px, 0); }
.rv-l   { opacity: 0; transform: translate3d(-18px, 0, 0); }
.rv-s   { opacity: 0; transform: scale(0.985); }
.rv-b   { opacity: 0; filter: blur(6px); }
.rv, .rv-l, .rv-s, .rv-b {
  transition: opacity var(--t-content) var(--e-content),
              transform var(--t-content) var(--e-content),
              filter var(--t-content) var(--e-content);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.rv.in, .rv-l.in, .rv-s.in, .rv-b.in {
  opacity: 1; transform: none; filter: none;
}

/* Masked line rise for display type. The mask has to clear the line box on
   both sides: Turkish and French set diacritics well above cap height
   (İ Ö Ü Ğ Â) and display line-heights here are below 1, so without the top
   allowance the mask would shave them off. */
.rise {
  display: block; overflow: hidden;
  padding-block: 0.16em 0.1em;
  margin-block: -0.16em -0.1em;
}
.rise > span {
  display: block; transform: translate3d(0, 108%, 0);
  transition: transform 1100ms var(--e-content);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.in .rise > span, .rise.in > span { transform: none; }

/* a wipe that uncovers left-to-right, used where a rise would be wrong */
/* A curtain of ground slides off to the right, its leading edge lit. The
   element itself is never clipped — a clip-path here would zero its own
   intersection rectangle and deadlock both the observer and lazy loading. */
.wipe { position: relative; }
.wipe::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--ground);
  box-shadow: -1px 0 0 rgba(238, 241, 247, 0.5), -14px 0 26px -6px rgba(167, 104, 255, 0.28);
  transform-origin: 100% 50%;
  transition: transform 1250ms var(--e-threshold);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.wipe.in::after { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-l, .rv-s, .rv-b, .rise > span {
    opacity: 1 !important; transform: none !important;
    filter: none !important; clip-path: none !important; transition: none !important;
  }
  .wipe::after { display: none; }
}

/* ---------- Hero ---------------------------------------------------------- */

.hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh; min-height: 100svh;
  padding-top: 9rem; padding-bottom: clamp(2rem, 6vh, 4rem);
  overflow: hidden;
}

.hero-in { position: relative; z-index: 2; width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* the oversized wordmark the seam writes */
.hero-mark {
  position: absolute; inset-inline: 0; z-index: 1;
  top: 33%; transform: translateY(-50%);
  pointer-events: none; -webkit-user-select: none; user-select: none;
  text-align: center;
  font-size: min(11.4vw, 9.5rem);
  font-variation-settings: 'wdth' 115, 'wght' 250;
  letter-spacing: 0.4em; text-indent: 0.4em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(238, 241, 247, 0.05);
}
.hero-mark b {
  font-weight: inherit;
  color: rgba(238, 241, 247, 0.05);
  transition: color 700ms var(--e-content), text-shadow 700ms var(--e-content);
}
.hero.lit b {
  color: rgba(238, 241, 247, 0.24);
  text-shadow: 0 0 12px rgba(122, 138, 226, 0.22);
  transition-delay: calc(var(--k) * 105ms);
}

/* the seam that writes it */
.hero-seam {
  position: absolute; z-index: 2; inset-inline: 0; top: 33%;
  height: 60px; margin-top: -30px; pointer-events: none;
  clip-path: inset(0 50% 0 50%);
  animation: seam-open 1750ms var(--e-threshold) 420ms both;
}
.hero-seam svg { width: 100%; height: 60px; overflow: visible; }
.hero-seam .glow { filter: blur(9px); opacity: 0.6; }

@keyframes seam-open { to { clip-path: inset(0 0 0 0); } }

.hero-eyebrow { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.hero-title { margin: 0; }
.hero-title .l2 { padding-left: clamp(0rem, 8vw, 9rem); }

.hero-foot {
  display: grid; gap: 1.75rem;
  margin-top: clamp(2rem, 5vh, 3.25rem);
  align-items: end;
}
@media (min-width: 900px) { .hero-foot { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
.hero-foot p { max-width: 33rem; }

.cue {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  z-index: 2; display: none; flex-direction: column; align-items: center; gap: 0.55rem;
  color: var(--slate); font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase;
}
@media (min-width: 1000px) and (min-height: 720px) { .cue { display: flex; } }
.cue i {
  display: block; width: 1px; height: 2.25rem;
  background: linear-gradient(180deg, rgba(238, 241, 247, 0.4), transparent);
  transform-origin: top; animation: cue 2.8s var(--e-content) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  45% { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cue i { animation: none; transform: scaleY(1); }
  .hero-seam { animation: none; clip-path: none; }
  .hero-mark b { color: rgba(238, 241, 247, 0.26); }
}

/* ---------- Page opener --------------------------------------------------- */

.opener {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: clamp(8rem, 20vh, 13rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}
.opener > .shell { position: relative; z-index: 2; }

/* ---------- Doors (index → the rest of the site) -------------------------- */
/* Julia Krantz's dim-the-others mechanic: the light moves to what you point at. */

.doors { display: grid; border-top: 1px solid var(--hair); }
@media (min-width: 860px) { .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .doors.doors-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.door {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(19rem, 34vw, 28rem);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border-bottom: 1px solid var(--hair);
  transition: opacity 480ms var(--e-content), background-color 480ms var(--e-content);
}
@media (min-width: 860px) {
  .door + .door { border-left: 1px solid var(--hair); }
}
@media (min-width: 720px) and (max-width: 859px) {
  .doors-2 .door + .door { border-left: 1px solid var(--hair); }
}

/* The door is a lit surface, not a text box: the image sits deep in the
   ground and only comes forward under the pointer. */
.door-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.door-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.52) saturate(0.6) contrast(1.06);
  --pz: 1.08;
  transition: filter 900ms var(--e-content), transform 1400ms var(--e-content);
}
.door:hover .door-bg img, .door:focus-visible .door-bg img {
  filter: brightness(0.86) saturate(1) contrast(1.02);
  --pz: 1.15;
}
.door-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 2, 6, 0.72) 0%, rgba(2, 2, 6, 0.34) 42%, rgba(2, 2, 6, 0.93) 100%),
    linear-gradient(90deg, rgba(2, 2, 6, 0.7) 0%, rgba(2, 2, 6, 0.1) 62%);
}
.door > *:not(.door-bg) { position: relative; z-index: 2; }
.door::before {
  content: ''; position: absolute; inset-inline: 0; top: -1px; height: 1px;
  background: var(--seam); transform: scaleX(0); transform-origin: left;
  transition: transform 620ms var(--e-threshold);
}
.door:hover::before, .door:focus-visible::before { transform: scaleX(1); }
.doors:hover .door { opacity: 0.34; }
.doors .door:hover, .doors .door:focus-visible { opacity: 1; background: rgba(238, 241, 247, 0.022); }
@media (hover: none) { .doors:hover .door { opacity: 1; } }

.door-n { margin-bottom: auto; }
.door h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-variation-settings: 'wdth' 110, 'wght' 380;
  letter-spacing: -0.018em; text-transform: uppercase; line-height: 1.05;
  margin-top: 2.5rem;
}
.door p { margin-top: 0.85rem; max-width: 24rem; }
.door .go { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.75rem; }
.door .go .arrow { transition: transform 420ms var(--e-content); }
.door:hover .go .arrow { transform: translateX(6px); }

/* ---------- Mosaic (work index) ------------------------------------------- */
/* Contact-sheet: flush tiles, 1px seams, hover dims everything else. */

.mosaic {
  display: grid; gap: 0;
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
@media (min-width: 640px) { .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tile {
  position: relative; display: block; overflow: hidden;
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  transition: opacity 480ms var(--e-content);
}
.mosaic:hover .tile { opacity: 0.3; }
.mosaic .tile:hover, .mosaic .tile:focus-visible { opacity: 1; }
@media (hover: none) { .mosaic:hover .tile { opacity: 1; } }

.tile-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0a0b11; }
.tile-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.82);
  transform: scale(1.001);
  transition: filter 620ms var(--e-content), transform 900ms var(--e-content);
}
.tile:hover .tile-img img { filter: brightness(1.04); transform: scale(1.04); }

/* the lit band that crosses the plate on hover */
.tile-img::after {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--seam); opacity: 0;
  transform: translateY(0);
  transition: transform 900ms var(--e-threshold), opacity 300ms ease;
}
.tile:hover .tile-img::after { opacity: 0.9; transform: translateY(clamp(9rem, 22vw, 16rem)); }

.tile-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 1.1rem clamp(1rem, 1.6vw, 1.4rem) 1.3rem;
}
.tile-name {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-variation-settings: 'wdth' 108, 'wght' 380;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--ice);
}

/* ---------- Study chapters ------------------------------------------------ */

.study { scroll-margin-top: 6rem; }
.study-plate { position: relative; overflow: hidden; }
.study-plate img { width: 100%; max-height: 84vh; object-fit: cover; }
.study-plate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,5,10,0.5) 0%, rgba(4,5,10,0.05) 32%, rgba(4,5,10,0.94) 100%);
}
.study-cap { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding-bottom: clamp(1.5rem, 4vw, 3rem); }

.plate { position: relative; overflow: hidden; background: #0a0b11; }
.plate img { width: 100%; }
.plate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 100px rgba(1, 1, 3, 0.7);
}
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-16-10 img, .ratio-4-3 img, .ratio-1-1 img { height: 100%; object-fit: cover; }

.tag {
  display: inline-block; padding: 0.45rem 0.8rem;
  border: 1px solid var(--hair);
  font-size: 0.5625rem;
  font-variation-settings: 'wdth' 100, 'wght' 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--slate); line-height: 1;
}

/* ---------- Parallax planes ----------------------------------------------- */
/* One rAF loop writes --py. Nothing but transform moves, and the slight
   over-scale means the plane can never expose an edge of its frame. */

[data-par] {
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--pz, 1.12));
  transform-origin: 50% 50%;
  will-change: transform;
}
/* motion off: the plane keeps its composed scale, it simply stops travelling */
@media (prefers-reduced-motion: reduce) { [data-par] { --py: 0px; } }

/* ---------- Product band (index → work) ----------------------------------- */
/* Three made things, edge to edge, no card and no radius. Pointing at one
   takes the light off the other two — the same rule the doors and the
   contact sheet obey, so the whole site dims the same way. */

.band { display: grid; gap: 0; border-block: 1px solid var(--hair); }
@media (min-width: 720px) { .band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.band-item {
  position: relative; display: block; overflow: hidden;
  transition: opacity 520ms var(--e-content);
}
@media (min-width: 720px) { .band-item + .band-item { border-left: 1px solid var(--hair); } }
@media (max-width: 719px) { .band-item + .band-item { border-top: 1px solid var(--hair); } }
.band:hover .band-item { opacity: 0.32; }
.band .band-item:hover, .band .band-item:focus-visible { opacity: 1; }
@media (hover: none) { .band:hover .band-item { opacity: 1; } }

.band-img { display: block; position: relative; aspect-ratio: 5 / 6; overflow: hidden; background: #08090e; }
@media (min-width: 720px) and (max-width: 1099px) { .band-img { aspect-ratio: 3 / 4; } }
.band-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.7) saturate(0.72);
  transition: filter 780ms var(--e-content);
}
.band-item:hover .band-img img, .band-item:focus-visible .band-img img {
  filter: brightness(1) saturate(1);
}
.band-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 2, 6, 0.5) 0%, rgba(2, 2, 6, 0) 34%, rgba(2, 2, 6, 0.86) 100%);
}
/* the seam that marks the piece as available */
.band-img::before {
  content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--seam); transform: scaleX(0); transform-origin: left;
  transition: transform 760ms var(--e-threshold);
}
.band-item:hover .band-img::before, .band-item:focus-visible .band-img::before { transform: scaleX(1); }

.band-meta {
  display: block;
  position: absolute; z-index: 2; inset-inline: 0; bottom: 0;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
}
.band-name {
  display: block; color: var(--ice); line-height: 1.04; margin-top: 0.7rem;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-variation-settings: 'wdth' 108, 'wght' 380;
  letter-spacing: -0.012em; text-transform: uppercase;
}

/* ---------- Founder band (index) ------------------------------------------ */
/* Not a portrait beside a paragraph: one plane, the statement crossing the
   full width, the figure standing in front of its last line, and a single
   seam of light cutting through both at eye level. */

.fband { position: relative; overflow: hidden; isolation: isolate; }
.fband-in {
  position: relative; z-index: 2;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) 0;
  min-height: clamp(28rem, 52vw, 40rem);
}
.fband-type { position: relative; z-index: 2; max-width: 62rem; }
.fband-fig.portrait-fig {
  position: relative; z-index: 3; margin-top: clamp(-7rem, -9vw, -2.5rem);
  width: clamp(14rem, 44vw, 22rem);
  margin-inline-start: auto; margin-inline-end: 0;
}
@media (min-width: 900px) {
  .fband-fig.portrait-fig {
    width: min(26rem, 34%);
    margin-top: clamp(-15rem, -17vw, -7rem);
    margin-inline-end: clamp(1rem, 6vw, 7rem);
  }
}
.fband-body { position: relative; z-index: 4; margin-top: clamp(-3rem, -5vw, -1rem); max-width: 30rem; }
@media (min-width: 900px) {
  .fband-body { margin-top: clamp(-22rem, -26vw, -10rem); max-width: 28rem; }
}
/* the seam crosses the whole band, behind the figure */
.fband-seam {
  position: absolute; z-index: 2; inset-inline: 0; top: 58%; height: 1px;
  background: var(--seam); opacity: 0.5;
  transform: scaleX(var(--lit, 0)); transform-origin: left;
  transition: transform 1500ms var(--e-threshold);
}
.fband-glow {
  position: absolute; z-index: 1; inset-inline: 0; top: 58%; height: clamp(6rem, 14vw, 12rem);
  background: linear-gradient(180deg, rgba(120, 96, 220, 0.16), transparent 78%);
  opacity: calc(var(--lit, 0) * 0.9); pointer-events: none;
}

.index-list li + li { margin-top: 0.2rem; }
.index-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: 0.85rem; border-bottom: 1px solid var(--hair);
  color: var(--slate); font-size: 0.8125rem;
  transition: color 320ms var(--e-content), border-color 320ms var(--e-content);
}
.index-list a:hover, .index-list a:focus-visible { color: var(--ice); border-bottom-color: var(--hair-lit); }
.index-list .arrow { transition: transform 320ms var(--e-content); }
.index-list a:hover .arrow { transform: translateY(3px); }

/* ---------- Descent ledger (practice) ------------------------------------- */
/* The seam runs vertically; each discipline ignites as the descent reaches it. */

.descent { position: relative; }
@media (min-width: 900px) {
  .descent { padding-left: 5rem; }
  .descent::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
    background: var(--hair);
  }
  .descent::after {
    content: ''; position: absolute; left: 0; top: 0; width: 1px;
    height: calc(var(--run, 0) * 100%);
    background: linear-gradient(180deg, #ff6fa6 0%, #a768ff 38%, #5c74ff 72%, rgba(46,75,200,0) 100%);
    transition: height 900ms var(--e-content);
  }
}

.step { position: relative; display: grid; gap: 1rem; }
@media (min-width: 900px) { .step { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 4vw, 4rem); } }
.step + .step { margin-top: clamp(2.75rem, 5.5vw, 5rem); padding-top: clamp(2.75rem, 5.5vw, 5rem); border-top: 1px solid var(--hair); }

.step h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-variation-settings: 'wdth' 110, 'wght' 380;
  letter-spacing: -0.015em; text-transform: uppercase; line-height: 1.1;
  margin-top: 0.7rem;
  color: var(--slate);
  transition: color 700ms var(--e-content);
}
.step.in h3 { color: var(--ice); }

/* the node on the spine */
@media (min-width: 900px) {
  .step::before {
    content: ''; position: absolute; left: -5rem; top: 1.1rem;
    width: 11px; height: 1px; background: var(--hair);
    transition: background 700ms var(--e-content), width 700ms var(--e-content);
  }
  .step.in::before { background: var(--ice); width: 22px; }
}

/* ---------- Material plates (commerce) ------------------------------------ */
/* A lit band sweeps across the plate and reveals the macro detail beneath. */

.material { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .material { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); } }
.material + .material { margin-top: clamp(3rem, 6vw, 6rem); }
.material:nth-child(even) .material-media { order: 2; }

.material-media { position: relative; overflow: hidden; background: #0a0b11; }
.material-media img { width: 100%; display: block; }
.material-media .under {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--sweep, 0%), transparent var(--sweep, 0%));
  mask-image: linear-gradient(180deg, #000 0%, #000 var(--sweep, 0%), transparent var(--sweep, 0%));
}
.material-media .band {
  position: absolute; inset-inline: 0; top: var(--sweep, 0%); height: 1px;
  background: var(--seam); opacity: 0.9;
}
.material-media .band::after {
  content: ''; position: absolute; inset-inline: 0; top: -9px; height: 19px;
  background: var(--seam); filter: blur(11px); opacity: 0.4;
}

/* ---------- Portrait (studio) --------------------------------------------- */
/* Liron Moran's move: monumental cropped type with the figure standing through it.
   Premium warm/cool split light resolves on approach. */

.portrait-scene {
  position: relative; isolation: isolate;
  padding-top: clamp(2rem, 6vw, 5rem);
  /* the name is meant to run past the frame; the frame is the scene, never
     the document, so this must not become a page-wide scroll */
  overflow-x: clip;
}

.portrait-type {
  position: relative; z-index: 1;
  font-size: clamp(4rem, 20vw, 19rem);
  font-variation-settings: 'wdth' 118, 'wght' 380;
  letter-spacing: -0.05em; line-height: 0.8; text-transform: uppercase;
  color: rgba(238, 241, 247, 0.94);
  pointer-events: none; -webkit-user-select: none; user-select: none;
  white-space: nowrap;
}
.portrait-type .b { display: block; }
.portrait-type .b + .b { margin-left: clamp(0rem, 9vw, 8rem); }

.portrait-fig {
  --px: 50%; --py: 34%; --shift-x: 0px; --shift-y: 0px;
  position: relative; z-index: 2;
  width: min(34rem, 78%);
  margin-inline: auto;
  margin-top: clamp(-11rem, -17vw, -3rem);
}
@media (min-width: 900px) {
  .portrait-fig { margin-inline: 0; margin-left: auto; margin-right: clamp(2rem, 9vw, 9rem); width: min(30rem, 42%); margin-top: clamp(-19rem, -20vw, -8rem); }
}

.portrait-fig figure {
  position: relative; margin: 0; isolation: isolate;
  transform: translate3d(0,0,0);
}
.portrait-base { position: relative; z-index: 2; display: block; }
.portrait-fig img {
  width: 100%; display: block; position: relative;
  transform: translate3d(var(--shift-x), var(--shift-y), 0) scale(1);
  transform-origin: 50% 46%;
  transition: transform 980ms cubic-bezier(.2,.72,.2,1), filter 980ms cubic-bezier(.2,.72,.2,1);
}
.portrait-base img {
  z-index: 2;
  filter: grayscale(1) saturate(.62) contrast(1.055) brightness(.94);
}

/* The colour plate is a restrained photographic grade of the real founder image,
   not a generated replacement. A broad pointer-origin mask makes the colour feel
   as if light is reaching the portrait instead of toggling an overlay. */
.portrait-color {
  position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none;
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 94% 82% at var(--px) var(--py),
    #000 0%, #000 34%, rgba(0,0,0,.96) 47%, rgba(0,0,0,.68) 62%, rgba(0,0,0,.18) 79%, transparent 95%);
  mask-image: radial-gradient(ellipse 94% 82% at var(--px) var(--py),
    #000 0%, #000 34%, rgba(0,0,0,.96) 47%, rgba(0,0,0,.68) 62%, rgba(0,0,0,.18) 79%, transparent 95%);
  transition: opacity 1050ms cubic-bezier(.16,.78,.18,1);
  will-change: opacity, -webkit-mask-image, mask-image;
}
.portrait-color img {
  z-index: 3;
  filter: saturate(.96) contrast(1.035) brightness(.995);
}

/* The seam passes behind the figure. */
.portrait-fig figure::before {
  content: ''; position: absolute; z-index: 1;
  left: -30%; right: -30%; top: 47%; height: 1px;
  background: var(--seam);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  opacity: 0.85; transform: scaleX(0);
  transition: transform 1500ms var(--e-threshold) 200ms;
}
.portrait-fig.in figure::before { transform: scaleX(1); }

/* Warm key + cool rim + a very small pointer sheen. These layers are clipped to
   the portrait alpha, so colour never blooms into the empty cut-out rectangle. */
.portrait-lights {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden;
  -webkit-mask-image: url('/img/founder-900.webp');
  mask-image: url('/img/founder-900.webp');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.portrait-lights i {
  position: absolute; inset: -2%; display: block; opacity: 0;
  transition: opacity 980ms cubic-bezier(.16,.78,.18,1);
}
.portrait-lights .warm {
  mix-blend-mode: soft-light;
  background: radial-gradient(78% 58% at calc(var(--px) - 17%) calc(var(--py) - 11%),
    rgba(255,188,118,.70) 0%, rgba(224,120,62,.32) 39%, rgba(165,72,36,.10) 56%, transparent 73%);
}
.portrait-lights .cool {
  mix-blend-mode: screen;
  background: radial-gradient(56% 82% at calc(var(--px) + 48%) calc(var(--py) + 24%),
    rgba(96,183,235,.42) 0%, rgba(47,110,180,.20) 42%, rgba(31,62,130,.07) 59%, transparent 74%);
}
.portrait-lights .sheen {
  mix-blend-mode: screen;
  background: radial-gradient(31% 22% at var(--px) var(--py),
    rgba(255,244,226,.28) 0%, rgba(255,203,154,.08) 42%, transparent 74%);
}

@media (hover: hover) and (pointer: fine) {
  .portrait-fig:is(:hover, .portrait-active) .portrait-base img {
    filter: grayscale(.84) saturate(.72) contrast(1.055) brightness(.965);
    transform: translate3d(var(--shift-x), var(--shift-y), 0) scale(1.012);
  }
  .portrait-fig:is(:hover, .portrait-active) .portrait-color { opacity: .97; }
  .portrait-fig:is(:hover, .portrait-active) .portrait-color img {
    transform: translate3d(var(--shift-x), var(--shift-y), 0) scale(1.012);
  }
  .portrait-fig:is(:hover, .portrait-active) .portrait-lights .warm { opacity: .42; }
  .portrait-fig:is(:hover, .portrait-active) .portrait-lights .cool { opacity: .28; }
  .portrait-fig:is(:hover, .portrait-active) .portrait-lights .sheen { opacity: .16; }
}

/* Touch has its own choreography. JS activates it while the portrait occupies the
   central part of the viewport; there is no fake hover or flashlight tracking. */
@media (hover: none), (pointer: coarse) {
  .portrait-fig.portrait-active .portrait-base img {
    filter: grayscale(.76) saturate(.75) contrast(1.05) brightness(.965);
    transform: scale(1.008);
  }
  .portrait-fig.portrait-active .portrait-color { opacity: .90; }
  .portrait-fig.portrait-active .portrait-color img { transform: scale(1.008); }
  .portrait-fig.portrait-active .portrait-lights .warm { opacity: .34; }
  .portrait-fig.portrait-active .portrait-lights .cool { opacity: .20; }
  .portrait-fig.portrait-active .portrait-lights .sheen { opacity: .08; }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-fig { --px: 52%; --py: 33%; --shift-x: 0px; --shift-y: 0px; }
  .portrait-fig img, .portrait-color, .portrait-lights i { transition: none !important; transform: none !important; }
  .portrait-base img { filter: grayscale(.58) saturate(.78) contrast(1.04) brightness(.97); }
  .portrait-color {
    opacity: .74;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .portrait-lights .warm { opacity: .22; }
  .portrait-lights .cool { opacity: .12; }
  .portrait-lights .sheen { opacity: 0; }
  .portrait-fig figure::before { transform: scaleX(1); }
}

.portrait-cap {
  position: relative; z-index: 3;
  margin-top: 1.15rem; padding-top: 1rem;
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1.5rem;
}

/* ---------- Channels (contact) -------------------------------------------- */
/* The seam opens vertically into a doorway on approach. */

.channels { border-top: 1px solid var(--hair); }
.channel {
  position: relative; display: grid; gap: 0.3rem;
  padding-block: clamp(1.6rem, 3.6vw, 2.6rem);
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
  transition: border-color 480ms var(--e-content);
}
@media (min-width: 760px) {
  .channel { grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr); gap: 1.5rem; }
}
.channel::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 0;
  background: var(--seam); transform: translateY(-50%);
  transition: height 620ms var(--e-threshold);
}
.channel:hover::before, .channel:focus-visible::before { height: 100%; }
.channel:hover { border-bottom-color: var(--hair-lit); }
.channel-v {
  font-size: clamp(1.4rem, 4.2vw, 2.9rem);
  font-variation-settings: 'wdth' 110, 'wght' 350;
  letter-spacing: -0.022em; color: var(--ice);
  transition: transform 520ms var(--e-content);
  transform-origin: left;
}
@media (min-width: 760px) { .channel:hover .channel-v { transform: translateX(0.85rem); } }
.channel-h { color: var(--slate); font-size: 0.8125rem; }
@media (min-width: 760px) { .channel-h { text-align: right; } }

/* ---------- Legal --------------------------------------------------------- */

.legal { display: grid; gap: 1rem; }
@media (min-width: 900px) { .legal { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); } }
.legal + .legal { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.legal h2 {
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  font-variation-settings: 'wdth' 106, 'wght' 400;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.35; color: var(--ice);
}
.legal .idx { display: block; margin-bottom: 0.55rem; }

/* ---------- 404 ----------------------------------------------------------- */

.err {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding-block: 8rem 5rem;
}
.err > .shell { position: relative; z-index: 2; }

/* an aperture that tries to open and fails */
.err-aperture {
  position: absolute; z-index: 1; inset-inline: 0; top: 50%;
  height: 1px; pointer-events: none;
  background: var(--seam);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  transform: scaleX(0);
  animation: stall 4.6s var(--e-threshold) 500ms infinite;
}
@keyframes stall {
  0%   { transform: scaleX(0);    opacity: 0; }
  26%  { transform: scaleX(0.62); opacity: 0.9; }
  36%  { transform: scaleX(0.52); opacity: 0.5; }
  46%  { transform: scaleX(0.68); opacity: 0.75; }
  70%  { transform: scaleX(0.1);  opacity: 0.12; }
  100% { transform: scaleX(0);    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .err-aperture { animation: none; transform: scaleX(0.55); opacity: 0.5; }
}
.err-mark { width: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* ---------- Footer -------------------------------------------------------- */

.ftr { position: relative; padding-block: clamp(3.25rem, 6.5vw, 5.5rem) clamp(1.75rem, 3.5vw, 2.75rem); }
.ftr-top { display: grid; gap: clamp(2.25rem, 4.5vw, 4rem); }
@media (min-width: 900px) { .ftr-top { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); } }

.ftr-brand img { height: 1.1875rem; width: auto; margin-bottom: 1.35rem; }

.ftr-nav { display: grid; gap: 1.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ftr-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); } }
.ftr-nav h2 { margin-bottom: 1rem; }
.ftr-nav li + li { margin-top: 0.05rem; }
.ftr-nav a {
  display: inline-block; padding-block: 0.5rem;
  font-size: 0.8125rem; color: var(--slate);
  transition: color 300ms var(--e-content);
}
.ftr-nav a:hover, .ftr-nav a:focus-visible { color: var(--ice); }

.ftr-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
}
.ftr-base p { font-size: 0.75rem; color: var(--slate); }