/* ==========================================================================
   PulseCatalog V2 — Contemporary Editorial / Artist Archive
   Movement × permanence. Paper, ink, one signal.
   ========================================================================== */

:root {
  --paper: #F1EFE9;
  --paper-2: #E8E5DD;
  --paper-3: #DAD6CC;
  --print: #FBFAF6;
  --ink: #0B0B0B;
  --ink-2: #26251F;
  --grey: #74716A;
  --grey-2: #A5A198;
  --rule: rgba(11, 11, 11, .16);
  --signal: #FF3B25;
  --signal-deep: #C41E14;

  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--grey);
  --line: var(--rule);
  --accent: var(--signal);

  --serif: 'Instrument Serif', 'Times New Roman', Times, serif;
  --sans: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --pad: clamp(16px, 3.2vw, 48px);
  --gutter: clamp(12px, 1.8vw, 28px);
  --header-h: 60px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Tones (artists momentarily take over the page) ---------- */
.tone-ink     { --bg: var(--ink); --fg: var(--paper); --muted: #8F8B83; --line: rgba(241, 239, 233, .16); }
.tone-paper2  { --bg: var(--paper-2); }
.tone-andrea  { --bg: #080808; --fg: #F0F0ED; --muted: #8B8986; --line: rgba(240, 240, 237, .14); --accent: #CC0000; }
.tone-pluto   { --bg: #000; --fg: #FFF; --muted: #7C7C7C; --line: rgba(255, 255, 255, .22); --accent: #FFF; }
.tone-connor  { --bg: #F5EFE2; --fg: #2E1A0A; --muted: #8B6542; --line: rgba(46, 26, 10, .16); --accent: #A47B48; }
.tone-tone    { --bg: #08080D; --fg: #F5F0E8; --muted: #8C8774; --line: rgba(200, 169, 110, .22); --accent: #C8A96E; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--signal); color: var(--paper); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
  font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  transition: top .2s;
}
.skip:focus { top: 12px; }

/* Grain — slight, constant, never decorative */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.1 .62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Page transitions (cross-document view transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pc-page-out .32s var(--ease) both; }
::view-transition-new(root) { animation: pc-page-in .7s var(--ease-out) both; }
@keyframes pc-page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes pc-page-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Layout primitives ---------- */
.wrap { padding-inline: var(--pad); max-width: 1680px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.toned { background: var(--bg); color: var(--fg); }

/* ---------- Type ---------- */
.mono, .kicker {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.kicker { color: var(--muted); }
.signal { color: var(--signal); }
.display, .d-xxl, .d-xl, .d-l, .d-m {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
}
.d-xxl { font-size: clamp(3.25rem, 10.4vw, 11.5rem); line-height: .86; letter-spacing: -.03em; }
.d-xl  { font-size: clamp(2.75rem, 7.2vw, 7.5rem); line-height: .9; letter-spacing: -.025em; }
.d-l   { font-size: clamp(2.1rem, 4.6vw, 4.75rem); line-height: .98; }
.d-m   { font-size: clamp(1.6rem, 2.7vw, 2.6rem); line-height: 1.06; letter-spacing: -.012em; }
.display em, .d-xxl em, .d-xl em, .d-l em, .d-m em { font-style: italic; }
.lede { font-size: clamp(1.1rem, 1.45vw, 1.375rem); line-height: 1.42; letter-spacing: -.012em; max-width: 34ch; }
.body-copy { font-size: 17px; line-height: 1.6; max-width: 52ch; }
.body-copy + .body-copy { margin-top: 1em; }
.muted { color: var(--muted); }

.dot-signal {
  display: inline-block; width: .16em; height: .16em; border-radius: 50%;
  background: var(--signal); margin-left: .04em; vertical-align: baseline;
}

/* ---------- Links ---------- */
.link-arrow {
  display: inline-flex; align-items: center; gap: .55em; white-space: nowrap;
  font: 500 15px/1 var(--sans); letter-spacing: -.01em;
  padding-block: 9px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .55s var(--ease-out);
}
.link-arrow:hover { background-size: 0 1px; background-position: 100% 100%; }
.link-arrow .ar { display: inline-block; transition: translate .45s var(--ease-out); }
.link-arrow:hover .ar-ne { translate: 3px -3px; }
.link-arrow:hover .ar-e  { translate: 5px 0; }
.link-arrow:hover .ar-s  { translate: 0 4px; }
.link-arrow:hover .ar-w  { translate: -5px 0; }
.arw {
  display: inline-block; flex: none; width: .86em; height: .86em; vertical-align: -.06em;
  fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: square; overflow: visible;
}
.arw path { vector-effect: non-scaling-stroke; }
.arw--signal { color: var(--signal); }

/* ==========================================================================
   Header + menu
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding-inline: var(--pad);
  color: var(--ink);
  transition: color .45s var(--ease), background-color .45s var(--ease), translate .6s var(--ease-out);
  view-transition-name: site-header;
}
.site-header.on-dark { color: var(--paper); }
.site-header.is-scrolled {
  background: rgba(241, 239, 233, .8);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}
.site-header.is-scrolled.on-dark { background: rgba(11, 11, 11, .55); }
.site-header.is-hidden { translate: 0 -100%; }
.brand { display: inline-flex; align-items: flex-start; font: 500 17px/1 var(--sans); letter-spacing: -.03em; justify-self: start; }
.brand sup { font-size: 9px; margin-left: 1px; margin-top: -1px; letter-spacing: 0; }
.nav { justify-self: end; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); font-size: 14px; letter-spacing: -.01em; }
.nav a { position: relative; padding-block: 6px; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -11px; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--signal); translate: 0 -50%;
}
.nav-cta { display: inline-flex; align-items: center; gap: .45em; }
.nav-cta .ar { transition: translate .4s var(--ease-out); }
.nav-cta:hover .ar { translate: 2px -2px; }
.menu-btn { display: none; justify-self: end; align-items: center; gap: 10px; padding: 10px 0; }
.menu-btn i { display: block; width: 18px; height: 1px; background: currentColor; position: relative; transition: background-color .3s; }
.menu-btn i::before, .menu-btn i::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  transition: transform .45s var(--ease-out);
}
.menu-btn i::before { transform: translateY(-4px); }
.menu-btn i::after { transform: translateY(4px); }
.menu-open .menu-btn i { background: transparent; }
.menu-open .menu-btn i::before { transform: rotate(45deg); }
.menu-open .menu-btn i::after { transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--paper); color: var(--ink);
  padding: calc(var(--header-h) + 28px) var(--pad) 28px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .7s var(--ease-out), visibility 0s linear .7s;
}
.menu-open .menu { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease-out), visibility 0s; }
.menu-open { overflow: hidden; }
.menu-open .site-header { color: var(--ink); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; translate: 0 0; }
.menu ul { border-top: 1px solid var(--rule); }
.menu li a {
  display: flex; align-items: baseline; gap: 14px;
  padding-block: 14px; border-bottom: 1px solid var(--rule);
  font: 400 clamp(2.6rem, 12vw, 4.5rem)/1 var(--serif); letter-spacing: -.02em;
}
.menu li a .arw { width: .5em; height: .5em; stroke-width: 2px; align-self: center; }
.menu-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

@media (max-width: 899px) {
  :root { --header-h: 56px; }
  .site-header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (min-width: 900px) { .menu { display: none; } }

/* ==========================================================================
   Custom cursor (fine pointers only, added by JS)
   ========================================================================== */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor [data-cursor] { cursor: none; }
.has-cursor input, .has-cursor textarea { cursor: text; }
.cursor {
  position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.cursor.is-active { opacity: 1; }
.cursor-dot {
  position: absolute; left: 0; top: 0;
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--signal);
  display: grid; place-items: center;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out),
              background-color .3s, border-color .3s;
  border: 1px solid transparent;
}
.cursor.is-link .cursor-dot { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: transparent; border-color: var(--signal); }
.cursor.is-label .cursor-dot { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: var(--signal); }
.cursor-label {
  font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper);
  opacity: 0; transition: opacity .2s; white-space: nowrap;
}
.cursor.is-label .cursor-label { opacity: 1; transition-delay: .1s; }

/* ==========================================================================
   Reveal system (only gated when JS is running)
   ========================================================================== */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"] { overflow: hidden; opacity: 1; transform: none; clip-path: inset(10% 8% 10% 8%); transition: clip-path 1.4s var(--ease-out); }
.js [data-reveal="clip"] > img, .js [data-reveal="clip"] > video { transform: scale(1.12); transition: transform 1.8s var(--ease-out); }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="clip"].is-in > img, .js [data-reveal="clip"].is-in > video { transform: none; }
.js [data-reveal="fade"] { transform: none; }

/* Cursor-driven depth: elements drift 5–16px against the pointer */
[data-depth] {
  translate: calc(var(--mx, 0) * var(--depth, 0) * 1px) calc(var(--my, 0) * var(--depth, 0) * 1px);
  transition: translate 1.2s var(--ease-out);
}

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.section { padding-block: clamp(88px, 12vw, 190px); }
.sec-head { row-gap: 22px; align-items: end; }
.sec-head .kicker { grid-column: 1 / 4; align-self: start; padding-top: .6em; }
.sec-head h2 { grid-column: 4 / 13; }
.sec-head .sec-note { grid-column: 4 / 10; margin-top: 8px; color: var(--muted); max-width: 52ch; font-size: 17px; }
@media (max-width: 899px) {
  .sec-head .kicker, .sec-head h2, .sec-head .sec-note { grid-column: 1 / -1; }
}

/* ==========================================================================
   01 — Arrival
   ========================================================================== */
.hero {
  min-height: 100svh;
  padding: calc(var(--header-h) + 18px) var(--pad) 22px;
  display: flex; flex-direction: column; gap: clamp(20px, 3vh, 36px);
  max-width: 1680px; margin-inline: auto; overflow-x: clip;
}
.hero-stage {
  flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: end;
}
.hero-stack {
  grid-area: 1 / 7 / 2 / 13; align-self: start; justify-self: end; width: 100%;
  position: relative; isolation: isolate;
  aspect-ratio: 1 / .74;
  margin-top: clamp(4px, 2vh, 24px);
}
.hero-title {
  grid-area: 1 / 1 / 2 / -1; position: relative; z-index: 2;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.3rem, 9.4vw, 10.6rem); line-height: .86; letter-spacing: -.035em;
  pointer-events: none;
}
.hero-title .ln { display: block; overflow: hidden; padding: 0 .12em .07em 0; margin-bottom: -.07em; }
.hero-title .ln > span { display: inline-block; color: var(--ink); }
.hero-title .dot-signal { width: .15em; height: .15em; }
.hero-title .w { display: inline-block; white-space: nowrap; }
.hero-title .ch { display: inline-block; }
.hero-foot {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px;
  align-items: end;
}
.hero-ctas { grid-column: 1 / -1; display: flex; gap: clamp(20px, 3vw, 44px); justify-content: flex-end; flex-wrap: wrap; }

/* Prints — physical-feeling site windows on a table */
.print {
  display: block;
  position: absolute; left: var(--l, 0); top: var(--t, 0); z-index: var(--z, 1);
  width: 70%;
  padding: 5px 5px 0;
  background: var(--print);
  box-shadow: 0 1px 1px rgba(11, 11, 11, .06), 0 22px 44px -22px rgba(11, 11, 11, .5);
  transform: rotate(var(--r, 0deg));
  transition: transform .9s var(--ease-out), translate 1.2s var(--ease-out), box-shadow .9s var(--ease-out), filter .6s var(--ease);
}
.print img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; }
.print-cap {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 2px 7px; font-size: 9.5px; color: #5B5850;
}
.print-cap b { font-weight: 500; color: var(--ink); }
.scene .print:hover, .print.is-lifted {
  transform: rotate(0deg) scale(1.045); z-index: 10;
  box-shadow: 0 2px 2px rgba(11, 11, 11, .06), 0 40px 70px -28px rgba(11, 11, 11, .6);
}
.hero .print { padding: 0; background: none; box-shadow: 0 28px 52px -26px rgba(11, 11, 11, .55); }
.hero .print img { display: block; }
/* Red filter only exists once the lift cycle has started; cards arrive in full colour */
.hero .print::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--signal); mix-blend-mode: color; opacity: 0;
  transition: opacity .8s var(--ease);
}
.hero .print::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(255, 59, 37, .18); opacity: 0;
  transition: opacity .8s var(--ease);
}
.hero-stack.is-cycling .print:not(.is-lifted)::after { opacity: .9; }
.hero-stack.is-cycling .print:not(.is-lifted)::before { opacity: 1; }
.hero-stack.is-cycling .print:not(.is-lifted) { filter: blur(4px); }
.hero .print { transition: transform .9s var(--ease-out), translate 1.2s var(--ease-out), box-shadow .9s var(--ease-out), filter .8s var(--ease); }
/* Hero sequence: a deep-red wave runs through each letter; once the last letter is ink again the dot lands, then the cards arrive */
.hero { --wave-total: 25; --wave-step: 46ms; --wave-dur: .8s; }
.hero-title.is-waving .ch {
  animation: ch-wave var(--wave-dur) cubic-bezier(.3, .7, .3, 1) backwards;
  animation-delay: calc(.25s + var(--c, 0) * var(--wave-step));
}
@keyframes ch-wave {
  0%   { color: var(--ink); transform: translateY(0); }
  24%  { color: var(--signal-deep); transform: translateY(-.13em); }
  50%  { color: var(--signal-deep); transform: translateY(.03em); }
  70%  { color: var(--signal-deep); transform: translateY(-.012em); }
  100% { color: var(--ink); transform: translateY(0); }
}
.js .hero-title .dot-signal { opacity: 0; animation: pc-failsafe 0s linear 4s forwards; }
.js .hero-title.is-waving .dot-signal {
  opacity: 1; animation: dot-land .8s linear backwards;
  animation-delay: calc(.25s + (var(--wave-total) - 1) * var(--wave-step) + var(--wave-dur));
}
@keyframes dot-land {
  0%   { opacity: 0; transform: translateY(-1.3em) scale(.7); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  42%  { opacity: 1; transform: translateY(0) scale(1.25, .78); animation-timing-function: ease-out; }
  62%  { transform: translateY(-.22em) scale(.94, 1.06); animation-timing-function: ease-in; }
  80%  { transform: translateY(0) scale(1.08, .93); animation-timing-function: ease-out; }
  100% { transform: none; }
}
.js .hero .print { opacity: 0; animation: pc-failsafe 0s linear 4.5s forwards; }
.js .hero.is-landed .print { opacity: 1; animation: print-in 1.2s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * .14s); }
@keyframes print-in { from { opacity: 0; transform: translateY(56px) rotate(calc(var(--r, 0deg) + 7deg)); } }
@keyframes pc-failsafe { to { opacity: 1; } }
.js .hero-foot { animation: fade-in 1.2s var(--ease-out) .5s backwards; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 899px) {
  .hero { min-height: auto; gap: 22px; }
  .hero-stage { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 64px; }
  .hero-title { font-size: clamp(3rem, 14.2vw, 6.5rem); }
  .hero-stack { aspect-ratio: 1 / .93; width: 100%; margin-top: 8px; }
  .print { width: 70%; }
  .hero-ctas { grid-column: 1 / -1; }
  .hero-ctas { justify-content: flex-start; }
}

/* ==========================================================================
   Selected work — pinned artist scenes
   Each artist owns the full viewport. The next one slides up over it while the
   previous recedes; pc.js settles the scroll so you never rest between two.
   ========================================================================== */
.work-intro { padding-block: clamp(110px, 15vw, 230px) clamp(72px, 9vw, 140px); }
.entry-links { display: flex; gap: 10px 32px; flex-wrap: wrap; align-items: center; }
figcaption.mono, .cap { color: var(--muted); margin-top: 10px; }
.serif-cap { font: italic 400 18px/1.35 var(--serif); color: var(--muted); margin-top: 12px; letter-spacing: 0; text-transform: none; }
.print--inline { position: relative; left: auto; top: auto; width: 100%; transform: rotate(var(--r, 0deg)); }

.scenes { position: relative; background: var(--paper); }
.scenes-exit { position: relative; min-height: 100vh; min-height: 100svh; background: var(--paper); }
.scene {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--bg); color: var(--fg);
  transform-origin: 50% 35%;
  transform: scale(calc(1 - var(--cover, 0) * .075));
  border-radius: calc(var(--cover, 0) * 22px);
}
.scene::after {
  content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: #000; opacity: calc(var(--cover, 0) * .55);
}
.scene:first-child {
  clip-path: inset(calc((1 - var(--enter, 1)) * 7vh) calc((1 - var(--enter, 1)) * 5vw) 0 round calc((1 - var(--enter, 1)) * 28px));
}
.scene-stage {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: clamp(14px, 2.4vh, 28px);
  padding: calc(var(--header-h) + 14px) var(--pad) clamp(22px, 4.5vh, 48px);
}
.scene-tags {
  display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 2.4vw, 36px);
  padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted);
}
.scene-tags .grow { margin-left: auto; }
.scene-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, min(10vw, 17svh), 11rem); line-height: .86; letter-spacing: -.03em;
}
.scene-name em { font-style: italic; color: var(--accent); }
.scene-line { font: 400 clamp(1.45rem, min(2.5vw, 4.2svh), 2.5rem)/1.06 var(--serif); letter-spacing: -.012em; max-width: 22ch; }
.scene-foot {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 18px;
  align-items: end;
}
.scene-foot > :first-child { grid-column: 1 / 8; }
.scene-side { grid-column: 9 / 13; display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 24px); }
.scene-mid { min-height: 0; position: relative; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.scene-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Entrance: plays each time a scene becomes the one you're in */
.js .scene [data-in] {
  opacity: 0; translate: 0 28px;
  transition: opacity .9s var(--ease-out), translate 1.2s var(--ease-out);
  transition-delay: calc(.12s + var(--i, 0) * .11s);
}
.js .scene.is-active [data-in] { opacity: 1; translate: 0 0; }
.scene .scene-bg, .scene .connor-photo img { transform: scale(1.08); transition: transform 7s var(--ease-out); }
.scene.is-active .scene-bg, .scene.is-active .connor-photo img { transform: scale(1); }

/* Andrea — cinematic, the film is the room */
.scene--andrea .scene-shade { background: linear-gradient(180deg, rgba(8, 8, 8, .6) 0%, rgba(8, 8, 8, .08) 32%, rgba(8, 8, 8, .2) 58%, rgba(8, 8, 8, .9) 100%); }
.scene--andrea .scene-name em { color: #BDBBB6; }
.scene--andrea .scene-mid { display: flex; justify-content: flex-end; align-items: center; }
.scene--andrea .scene-mid > div { width: min(32vw, 54svh * 16 / 9, 520px); }
.scene--andrea .print { position: relative; left: auto; top: auto; width: 100%; }

/* Pluto — monolith */
.pluto-stage { display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; isolation: isolate; height: 100%; }
.pluto-slit { grid-area: 1 / 1; height: 100%; max-height: 64svh; width: auto; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1) contrast(1.2); background: #111; }
.pluto-name-wrap { grid-area: 1 / 1; align-self: end; mix-blend-mode: difference; color: #fff; }
.pluto-name {
  font: 400 clamp(5.5rem, min(27vw, 34svh), 28rem)/.78 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  letter-spacing: -.005em; white-space: nowrap;
}
.pluto-term {
  margin: 0; font: 400 12px/1.8 var(--mono); letter-spacing: .02em; white-space: pre; color: #CFCFCF;
}
.pluto-term b { color: #fff; font-weight: 500; }
.scene--pluto .scene-line { font: 500 clamp(1.5rem, min(3vw, 5svh), 3.2rem)/.95 var(--sans); text-transform: uppercase; letter-spacing: -.03em; max-width: 16ch; }

/* Connor — warm, photograph-led spread */
.connor-photo { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; margin: 0; overflow: hidden; z-index: 1; }
.connor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.scene--connor .scene-stage { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: var(--gutter); }
.connor-col {
  grid-column: 7 / 13; align-self: center; min-height: 0;
  display: flex; flex-direction: column; gap: clamp(14px, 2.8vh, 32px);
}
.scene--connor .scene-name { font-size: clamp(3rem, min(7.4vw, 13svh), 8rem); }
.connor-col .connor-print { width: min(100%, 34svh * 16 / 9); }

/* Tone — contact sheet, gold on void */
.scene--tone .scene-stage { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.tone-sheet {
  min-height: 0; height: 100%;
  display: grid; grid-template-columns: 2.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px;
  padding: 8px; border: 1px solid var(--line); background: #0E0E15;
}
.tone-sheet figure { position: relative; min-height: 0; overflow: hidden; }
.tone-sheet img { width: 100%; height: 100%; object-fit: cover; }
.tone-sheet .ts-a { grid-row: 1 / 3; }
.tone-sheet .ts-a img { object-position: 0 0; }
.tone-sheet .ts-b { grid-column: 2 / 4; }
.tone-sheet figcaption {
  position: absolute; left: 8px; top: 8px; margin: 0;
  color: var(--accent); font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: rgba(8, 8, 13, .72); padding: 4px 6px;
}
.tone-sheet figure:not(.ts-a) img { filter: saturate(.85) contrast(1.05); transition: filter .5s; }
.tone-sheet figure:not(.ts-a):hover img { filter: none; }
.scene--tone .scene-foot .entry-links { grid-column: 9 / 13; justify-content: flex-end; }

@media (max-width: 899px) {
  .scene-foot > :first-child, .scene-side, .scene--tone .scene-foot .entry-links { grid-column: 1 / -1; justify-content: flex-start; }
  .scene-tags .grow { margin-left: 0; }
  .scene-name { font-size: clamp(2.9rem, min(15vw, 9svh), 6rem); }
  .scene--andrea .scene-mid > div { width: min(72vw, 30svh * 16 / 9); }
  .pluto-slit { max-height: 46svh; }
  .pluto-name { font-size: min(31vw, 22svh); }
  .connor-photo { width: 100%; bottom: auto; height: 40svh; }
  .scene--connor .scene-stage { padding-top: calc(40svh + 18px); }
  .connor-col { grid-column: 1 / -1; align-self: start; }
  .connor-col .connor-print { display: none; }
  .scene--connor .scene-name { font-size: clamp(2.9rem, min(14vw, 8svh), 5rem); }
  .tone-sheet { grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(0, 1.6fr) minmax(0, 1fr); }
  .tone-sheet .ts-a { grid-row: 1; grid-column: 1 / -1; }
  .tone-sheet .ts-b { grid-column: auto; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .pluto-term { display: none; }
}
@media (max-height: 640px) and (min-width: 900px) {
  .connor-col .connor-print { display: none; }
}

.work-more { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 28px; border-bottom: 1px solid var(--rule); }

/* ==========================================================================
   03 — Statement
   ========================================================================== */
.statement h2 { grid-column: 1 / -1; }
.scatter {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 36px;
  align-items: center; margin-top: clamp(56px, 7vw, 110px);
  padding-block: clamp(28px, 3vw, 44px); border-block: 1px solid var(--rule);
}
.scatter-list { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 9px; }
.scatter-list li { position: relative; width: max-content; color: var(--grey); font: 400 12px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.scatter-list li::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out);
  transition-delay: calc(.35s + var(--i, 0) * .11s);
}
.scatter.is-in .scatter-list li::after { transform: scaleX(1); }
.scatter-arrow { grid-column: 5 / 8; height: 1px; background: var(--rule); position: relative; }
.scatter-arrow::after {
  content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px;
  border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: rotate(45deg);
}
.scatter-home { grid-column: 8 / 13; }
.scatter-home .d-l { white-space: nowrap; }
.js .scatter-home { opacity: 0; transform: translateX(-16px); transition: opacity 1s var(--ease-out) 1.1s, transform 1.2s var(--ease-out) 1.1s; }
.js .scatter.is-in .scatter-home { opacity: 1; transform: none; }
.statement-copy { grid-column: 5 / 11; margin-top: clamp(40px, 5vw, 72px); }
@media (max-width: 899px) {
  .scatter-list, .scatter-home, .statement-copy { grid-column: 1 / -1; }
  .scatter-arrow { grid-column: 1 / 7; }
  .scatter-home .d-l { white-space: normal; overflow-wrap: anywhere; }
}

/* ==========================================================================
   04 — What I build
   ========================================================================== */
.practice-intro { grid-column: 4 / 10; margin-top: 28px; }
.practice-list { margin-top: clamp(48px, 6vw, 90px); border-top: 1px solid var(--ink); }
.practice-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 8px;
  padding-block: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--rule); align-items: baseline;
}
.practice-row h3 {
  grid-column: 1 / 7;
  font: 500 clamp(1.3rem, 2vw, 1.8rem)/1.1 var(--sans); letter-spacing: -.03em;
  transition: translate .6s var(--ease-out);
}
.practice-row p { grid-column: 8 / 13; color: var(--muted); max-width: 40ch; }
.practice-row:hover h3 { translate: 10px 0; }
.practice-more { margin-top: 28px; }
@media (max-width: 899px) {
  .practice-intro { grid-column: 1 / -1; }
  .practice-row h3, .practice-row p { grid-column: 1 / -1; }
}

/* ==========================================================================
   05 — Studio / Jarod
   ========================================================================== */
.studio-grid { row-gap: 48px; align-items: start; }
.portrait { grid-column: 1 / 6; background: var(--paper-2); position: relative; }
.tone-paper2 .portrait { background: var(--paper); }
.portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%;
  mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08) brightness(1.02);
}
.portrait figcaption { position: absolute; left: 12px; bottom: 10px; margin: 0; color: var(--grey); }
.studio-text { grid-column: 7 / 13; display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); padding-top: 4px; }
.signature { display: flex; flex-direction: column; gap: 8px; }
.signature .sig { font: italic 400 clamp(2.6rem, 4vw, 3.6rem)/1 var(--serif); letter-spacing: -.02em; }
@media (max-width: 899px) { .portrait, .studio-text { grid-column: 1 / -1; } .portrait { max-width: 520px; } }

/* ==========================================================================
   Journal rows (home + index)
   ========================================================================== */
.notes { border-top: 1px solid var(--ink); }
.note-row {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) 200px 28px; column-gap: var(--gutter); row-gap: 6px;
  align-items: baseline;
  padding-block: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--line);
}
.note-row .no { color: var(--muted); transition: color .3s; }
.note-row .t { font: 400 clamp(1.4rem, 2.1vw, 2.05rem)/1.08 var(--serif); letter-spacing: -.012em; }
.note-row .t small { display: block; margin-top: 8px; font: 400 15px/1.45 var(--sans); color: var(--muted); letter-spacing: -.005em; max-width: 62ch; }
.note-row .m { color: var(--muted); }
.note-row .ar { justify-self: end; transition: translate .45s var(--ease-out); }
.note-row:hover .no { color: var(--signal); }
.note-row:hover .ar { translate: 6px 0; }
.note-row:hover .t > span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.notes-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 16px; }
@media (max-width: 899px) {
  .note-row { grid-template-columns: minmax(0, 1fr) auto; }
  .note-row .no { grid-column: 1; grid-row: 1; }
  .note-row .m { grid-column: 2; grid-row: 1; text-align: right; }
  .note-row .t { grid-column: 1 / -1; grid-row: 2; }
  .note-row .ar { display: none; }
}

/* ==========================================================================
   07 — Conversion band
   ========================================================================== */
.cta-band { background: var(--bg); color: var(--fg); padding-block: clamp(100px, 14vw, 210px) clamp(56px, 7vw, 100px); }
.cta-band h2 { grid-column: 1 / -1; }
.cta-band .lede { grid-column: 1 / 6; margin-top: clamp(32px, 4vw, 56px); }
.cta-action { grid-column: 7 / 13; margin-top: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cta-big {
  display: inline-flex; align-items: center; gap: .3em;
  font: 400 clamp(2.4rem, 5vw, 5rem)/1 var(--serif); letter-spacing: -.02em;
  padding-bottom: 8px; border-bottom: 1px solid currentColor;
  transition: translate .6s var(--ease-out);
}
.cta-big .arw { width: .5em; height: .5em; stroke-width: 2px; margin-left: .08em; transition: translate .45s var(--ease-out); }
.cta-big:hover .arw { translate: 6px -6px; }
.cta-band .base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(80px, 10vw, 150px); padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 899px) { .cta-band .lede, .cta-action { grid-column: 1 / -1; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding: clamp(56px, 7vw, 96px) var(--pad) 22px; max-width: 1680px; margin-inline: auto; }
.footer-grid { row-gap: 36px; }
.footer-brand { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 10px; }
.footer-col { grid-column: span 2; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.footer-col .kicker { margin-bottom: 8px; }
.footer-col a { width: max-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease-out); }
.footer-col a:hover { background-size: 100% 1px; }
.footer-col.fc-1 { grid-column: 7 / 9; }
.footer-col.fc-2 { grid-column: 9 / 11; }
.footer-col.fc-3 { grid-column: 11 / 13; }
.footer-mark {
  font: 400 clamp(4rem, 24.2vw, 25.5rem)/.8 var(--serif); letter-spacing: -.045em;
  margin: clamp(56px, 8vw, 120px) 0 18px -.04em; white-space: nowrap;
}
.footer-mark sup { font: 400 .12em/1 var(--sans); vertical-align: top; letter-spacing: 0; margin-left: .05em; position: relative; top: .55em; }
.footer-base { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--grey); }
@media (max-width: 899px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-col.fc-1, .footer-col.fc-2, .footer-col.fc-3 { grid-column: span 6; }
}

/* ==========================================================================
   Page heads (Work, Studio, Journal, Start)
   ========================================================================== */
.page-head { padding-top: calc(var(--header-h) + clamp(48px, 8vw, 120px)); padding-bottom: clamp(56px, 7vw, 100px); }
.page-head h1 { margin-top: 0; }
.page-head .lede { margin-top: clamp(28px, 3vw, 44px); }

/* ==========================================================================
   Work — catalog index
   ========================================================================== */
.catalog { border-top: 1px solid var(--ink); }
.cat-row, .cat-head {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) 70px minmax(0, 1.8fr) 28px;
  column-gap: var(--gutter); align-items: baseline;
}
.cat-head { padding-block: 12px; border-bottom: 1px solid var(--rule); color: var(--grey); }
.cat-row { padding-block: clamp(18px, 2vw, 28px); border-bottom: 1px solid var(--rule); position: relative; }
.cat-row .name { font: 400 clamp(1.8rem, 3vw, 3rem)/1 var(--serif); letter-spacing: -.02em; transition: translate .6s var(--ease-out); }
.cat-row .ar { justify-self: end; transition: translate .45s var(--ease-out); }
.cat-row:hover .name { translate: 12px 0; }
.cat-row:hover .ar { translate: 5px 0; }
.cat-row .thumb { display: none; }
.cat-row--open { color: var(--grey); }
.cat-row--open .name { font-style: italic; }
.cat-preview {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  width: clamp(260px, 24vw, 380px); padding: 5px; background: var(--print);
  box-shadow: 0 30px 60px -28px rgba(11, 11, 11, .55);
  opacity: 0; scale: .92; rotate: -2deg;
  transition: opacity .3s var(--ease), scale .5s var(--ease-out);
}
.cat-preview.is-on { opacity: 1; scale: 1; }
.cat-preview img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 899px) {
  .cat-head { display: none; }
  .cat-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .cat-row .name { grid-column: 1; grid-row: 1; }
  .cat-row .yr { grid-column: 2; grid-row: 1; text-align: right; }
  .cat-row .disc { grid-column: 1 / -1; grid-row: 2; }
  .cat-row .scope, .cat-row .ar { display: none; }
  .cat-row .thumb { display: block; grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .cat-row .thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .cat-preview { display: none; }
}

.plates { row-gap: clamp(64px, 8vw, 130px); padding-block: clamp(88px, 11vw, 170px); }
.plate { display: block; }
.plate-frame { background: var(--bg); padding: clamp(18px, 4vw, 56px); transition: padding .8s var(--ease-out); }
.plate-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .55); }
.plate:hover .plate-frame { padding: clamp(12px, 3vw, 40px); }
.plate-cap { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; margin-top: 14px; color: var(--ink); }
.plate-cap .nm { font: 400 clamp(1.5rem, 2.2vw, 2.1rem)/1 var(--serif); letter-spacing: -.015em; }
.plate-cap .mono:last-child { color: var(--grey); }
.plate:nth-child(1) { grid-column: 1 / 8; }
.plate:nth-child(2) { grid-column: 9 / 13; margin-top: 28%; }
.plate:nth-child(3) { grid-column: 2 / 7; }
.plate:nth-child(4) { grid-column: 7 / 13; margin-top: 16%; }
@media (max-width: 899px) { .plate:nth-child(n) { grid-column: 1 / -1; margin-top: 0; } }

/* ==========================================================================
   Case study (catalog entry)
   ========================================================================== */
.cs { background: var(--bg); color: var(--fg); }
.cs-head { padding-top: calc(var(--header-h) + clamp(36px, 6vw, 90px)); }
.cs-top { display: flex; gap: 16px; color: var(--muted); }
.cs-top a:hover { color: var(--fg); }
.cs-name { margin-top: clamp(28px, 5vw, 72px); }
.cs-name.is-bebas { font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; font-size: clamp(6rem, 24vw, 24rem); line-height: .8; letter-spacing: 0; }
.cs-name em { color: var(--accent); }
.tone-andrea .cs-name em { color: #B9B7B2; }
.cs-facts {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px;
  margin-top: clamp(40px, 5vw, 72px); padding-top: 14px; border-top: 1px solid var(--line);
}
.cs-facts dt { color: var(--muted); margin-bottom: 6px; }
.cs-facts dd { font-size: 15px; line-height: 1.4; }
.cs-facts a { border-bottom: 1px solid currentColor; }
@media (max-width: 899px) { .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-hero { margin-top: clamp(40px, 5vw, 72px); overflow: hidden; }
.cs-hero video, .cs-hero img { width: 100%; max-height: 88vh; aspect-ratio: 16 / 9; object-fit: cover; background: #111; }
.cs-hero.is-gray video, .cs-hero.is-gray img { filter: grayscale(1) contrast(1.15); }
.cs-section { padding-block: clamp(80px, 10vw, 160px) 0; }
.cs-intro .kicker { grid-column: 1 / 4; padding-top: .7em; }
.cs-intro .d-l { grid-column: 4 / 12; }
.cs-cols { grid-column: 4 / 12; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
.cs-cols h3 { margin-bottom: 12px; color: var(--muted); }
.cs-cols p { font-size: 17px; line-height: 1.6; }
@media (max-width: 899px) {
  .cs-intro .kicker, .cs-intro .d-l, .cs-cols { grid-column: 1 / -1; }
  .cs-cols { grid-template-columns: 1fr; }
}
.cs-site .frame { border: 1px solid var(--line); padding: clamp(10px, 2vw, 28px); }
.cs-site img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cs-site .cap { display: flex; justify-content: space-between; gap: 16px; }
.cs-systems ul { grid-column: 4 / 13; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); border-top: 1px solid var(--line); }
.cs-systems li { display: flex; gap: 18px; align-items: baseline; padding-block: 18px; border-bottom: 1px solid var(--line); font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: -.015em; }
.cs-systems .kicker { grid-column: 1 / 4; padding-top: 18px; }
@media (max-width: 899px) { .cs-systems ul, .cs-systems .kicker { grid-column: 1 / -1; } .cs-systems ul { grid-template-columns: 1fr; } }

.cs-plates { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.cs-plates img { width: 100%; height: 100%; object-fit: cover; }
.cs-plates figure { position: relative; }
.cs-plates figcaption { margin-top: 8px; }
.cs-plates--andrea figure:nth-child(1) { grid-column: 1 / 8; } .cs-plates--andrea figure:nth-child(1) img { aspect-ratio: 1; }
.cs-plates--andrea figure:nth-child(2) { grid-column: 9 / 13; align-self: end; } .cs-plates--andrea figure:nth-child(2) img { aspect-ratio: 3 / 4; }
.cs-plates--andrea figure:nth-child(3) { grid-column: 2 / 6; } .cs-plates--andrea figure:nth-child(3) img { aspect-ratio: 3 / 4; }
.cs-plates--andrea figure:nth-child(4) { grid-column: 7 / 13; margin-top: 18%; } .cs-plates--andrea figure:nth-child(4) img { aspect-ratio: 4 / 3; }
.cs-plates--pluto { gap: 0; border: 1px solid var(--line); }
.cs-plates--pluto figure { grid-column: span 6; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-plates--pluto figure:nth-child(2n) { border-right: 0; }
.cs-plates--pluto figure:nth-last-child(-n+2) { border-bottom: 0; }
.cs-plates--pluto img { aspect-ratio: 4 / 3; filter: grayscale(1) contrast(1.15); }
.cs-plates--pluto figcaption { position: absolute; left: 12px; bottom: 10px; margin: 0; color: #fff; mix-blend-mode: difference; }
.cs-plates--connor figure:nth-child(1) { grid-column: 1 / 7; } .cs-plates--connor figure:nth-child(1) img { aspect-ratio: 3 / 4; }
.cs-plates--connor figure:nth-child(2) { grid-column: 8 / 13; margin-top: 30%; } .cs-plates--connor figure:nth-child(2) img { aspect-ratio: 3 / 4; }
.cs-plates--connor figcaption { font: italic 400 18px/1.35 var(--serif); color: var(--muted); text-transform: none; letter-spacing: 0; }
.cs-plates--tone { padding: 12px; border: 1px solid var(--line); background: #0E0E15; gap: 10px; }
.cs-plates--tone figure { grid-column: span 4; }
.cs-plates--tone img { aspect-ratio: 2 / 3; }
.cs-plates--tone figure:first-child { grid-column: 1 / -1; } .cs-plates--tone figure:first-child img { aspect-ratio: 16 / 9; }
.cs-plates--tone figcaption { position: absolute; left: 8px; top: 8px; margin: 0; color: var(--accent); background: rgba(8, 8, 13, .7); padding: 4px 6px; }
@media (max-width: 899px) {
  .cs-plates figure:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .cs-plates--tone figure:nth-child(n+2) { grid-column: span 6; }
  .cs-plates--pluto figure { border-right: 0; border-bottom: 1px solid var(--line); }
}

.cs-colophon .grid { row-gap: 36px; border-top: 1px solid var(--line); padding-top: 18px; }
.colo { grid-column: span 4; display: flex; flex-direction: column; gap: 12px; }
.colo .kicker { margin-bottom: 4px; }
.colo li { font-size: 16px; }
.swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.swatch { display: flex; flex-direction: column; gap: 8px; }
.swatch i { width: 64px; height: 64px; background: var(--c); border: 1px solid var(--line); }
.swatch span { font: 400 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 899px) { .colo { grid-column: 1 / -1; } }
.cs-live { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: clamp(80px, 10vw, 150px) clamp(56px, 6vw, 90px); }

.next-entry { padding-block: clamp(72px, 9vw, 140px); }
.next-entry a.next { display: block; margin-top: 18px; }
.next-entry .next .d-xxl { transition: translate .7s var(--ease-out); }
.next-entry .next:hover .d-xxl { translate: 14px 0; }
.next-entry .next .arw { width: .42em; height: .42em; stroke-width: 2px; vertical-align: .08em; }
.next-entry .row { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--grey); }

/* ==========================================================================
   Studio page
   ========================================================================== */
.manifesto { padding-block: clamp(96px, 13vw, 200px); }
.manifesto .kicker { grid-column: 1 / 4; padding-top: .6em; }
.manifesto-body { grid-column: 4 / 12; display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.manifesto-body p { font: 400 clamp(1.7rem, 3vw, 3rem)/1.12 var(--serif); letter-spacing: -.015em; }
.manifesto-body p.small { font: 400 clamp(1.15rem, 1.5vw, 1.4rem)/1.5 var(--sans); letter-spacing: -.01em; color: var(--muted); max-width: 46ch; }
.manifesto-body .tenets { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.manifesto-body .tenets li { font: 400 clamp(1.4rem, 2.2vw, 2.1rem)/1.15 var(--serif); padding-block: 14px; border-bottom: 1px solid var(--line); display: flex; gap: 18px; align-items: baseline; }
@media (max-width: 899px) { .manifesto .kicker, .manifesto-body { grid-column: 1 / -1; } }

.disciplines { border-top: 1px solid var(--ink); margin-top: clamp(48px, 6vw, 90px); }
.discipline {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 14px;
  padding-block: clamp(26px, 3vw, 44px); border-bottom: 1px solid var(--rule);
}
.discipline h3 { grid-column: 1 / 7; font: 400 clamp(1.9rem, 3.2vw, 3rem)/1 var(--serif); letter-spacing: -.02em; }
.discipline h3 + p { grid-column: 1 / 7; color: var(--muted); margin-top: 6px; }
.discipline ul { grid-column: 8 / 13; grid-row: 1 / 3; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.discipline li { padding-block: 10px; border-bottom: 1px solid var(--rule); font-size: 15.5px; display: flex; gap: 12px; }
.discipline li::before { content: "—"; color: var(--grey-2); }
@media (max-width: 899px) {
  .discipline h3, .discipline h3 + p, .discipline ul { grid-column: 1 / -1; grid-row: auto; }
}

.process { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(48px, 6vw, 90px); }
.step { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.step h3 { font: 400 clamp(1.7rem, 2.5vw, 2.3rem)/1 var(--serif); letter-spacing: -.02em; }
.step p { color: var(--muted); font-size: 15.5px; }
.process-note { margin-top: 36px; color: var(--muted); }
@media (max-width: 899px) { .process { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } }

.engagements { margin-top: clamp(48px, 6vw, 90px); border-top: 1px solid var(--ink); }
.engagement {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 8px;
  align-items: baseline; padding-block: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--rule);
}
.engagement h3 { grid-column: 1 / 5; font: 400 clamp(1.7rem, 2.6vw, 2.5rem)/1 var(--serif); letter-spacing: -.02em; }
.engagement p { grid-column: 5 / 10; color: var(--muted); }
.engagement .price { grid-column: 10 / 13; text-align: right; font: 500 16px/1.3 var(--sans); letter-spacing: -.01em; }
.engagement .price small { display: block; font: 400 10.5px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--grey); }
@media (max-width: 899px) {
  .engagement h3, .engagement p { grid-column: 1 / -1; }
  .engagement .price { grid-column: 1 / -1; text-align: left; }
}

.faq { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--ink); }
.faq details { position: relative; border-bottom: 1px solid var(--rule); }
.faq details::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--signal); transform: scaleX(0); transform-origin: left center;
  transition: transform .6s var(--ease-out);
}
.faq details[open]::before { transform: scaleX(1); }
.faq summary { cursor: pointer; transition: color .3s var(--ease); }
.faq summary:hover { color: var(--signal); }
.faq details[open] summary { color: var(--signal); }
.faq details[open] p { animation: fade-in .5s var(--ease-out); }
.faq summary {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: var(--gutter);
  align-items: baseline; padding-block: 22px;
  font: 400 clamp(1.35rem, 2vw, 1.85rem)/1.15 var(--serif); letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { justify-self: end; font: 300 22px/1 var(--sans); transition: rotate .4s var(--ease-out), color .3s var(--ease); }
.faq details[open] summary .pm { rotate: 45deg; }
.faq details p { padding: 0 0 26px; color: var(--muted); max-width: 70ch; }
@media (max-width: 599px) {
  .faq summary { font-size: 1.3rem; }
}

/* ==========================================================================
   Start a project
   ========================================================================== */
.start { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 110px)); padding-bottom: clamp(80px, 10vw, 150px); }
.start-grid { row-gap: 56px; align-items: start; }
.start-aside { grid-column: 1 / 6; position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); }
.start-form { grid-column: 7 / 13; }
.next-steps { border-top: 1px solid var(--line); }
.next-steps li { display: block; padding-block: 14px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
@media (max-width: 899px) { .start-aside, .start-form { grid-column: 1 / -1; position: static; } }

.field { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 22px 18px; border-bottom: 1px solid var(--rule); }
.field--first { border-top: 1px solid var(--ink); }
.field label:not(.chip), .field .label { font: 400 clamp(1.35rem, 2vw, 1.75rem)/1.15 var(--serif); letter-spacing: -.012em; padding: 0; }
.field .req { color: var(--signal); }
.field .hint { color: var(--grey); font-size: 13.5px; margin-top: 4px; }
.field input, .field textarea {
  width: 100%; margin-top: 12px; padding: 8px 0;
  font: 400 17px/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  transition: border-color .3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--grey-2); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; }
.field[aria-invalid="true"] label:not(.chip), .field[aria-invalid="true"] .label { color: var(--signal); }
.field .err { color: var(--signal); font: 400 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block; padding: 9px 14px; border: 1px solid var(--rule);
  font: 400 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .25s, color .25s, border-color .25s;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 32px; }
.submit {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--paper); padding: 18px 26px;
  font: 500 15px/1 var(--sans); letter-spacing: -.01em;
  transition: background-color .3s;
}
.submit:hover { background: #222; }
.submit[disabled] { opacity: .6; }
.form-error { margin-top: 18px; color: var(--signal); font-size: 15px; }
.form-error a { text-decoration: underline; }
.form-success { border-top: 1px solid var(--ink); padding-top: 28px; display: flex; flex-direction: column; gap: 22px; }

/* ==========================================================================
   Journal
   ========================================================================== */
.j-title { font-size: clamp(4.4rem, 18vw, 19rem); line-height: .78; padding-bottom: .1em; letter-spacing: -.045em; margin-left: -.04em; }
.j-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.j-filters button {
  padding: 9px 14px; border: 1px solid var(--rule);
  font: 400 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  transition: background-color .25s, color .25s, border-color .25s;
}
.j-filters button:hover { border-color: var(--ink); }
.j-filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.j-lead { row-gap: 32px; align-items: end; padding-bottom: clamp(56px, 7vw, 100px); }
.j-cover {
  grid-column: 1 / 6; aspect-ratio: 4 / 5; background: var(--paper-2);
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(16px, 2vw, 26px); overflow: hidden;
}
.j-cover .top, .j-cover .bot { display: flex; justify-content: space-between; color: var(--grey); position: relative; }
.j-cover .big {
  position: absolute; left: clamp(10px, 1.4vw, 20px); top: 50%; translate: 0 -54%;
  font: italic 400 clamp(4rem, 9vw, 9.5rem)/.85 var(--serif); letter-spacing: -.04em; color: var(--ink); max-width: 92%;
  transition: translate 1.2s var(--ease-out);
}
.j-cover .big .dot-signal { width: .14em; height: .14em; }
.j-lead:hover .j-cover .big { translate: 10px -54%; }
.j-lead-text { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 22px; }
.j-lead-text .d-l { max-width: 18ch; }
@media (max-width: 899px) { .j-cover, .j-lead-text { grid-column: 1 / -1; } }

/* Article */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }
.note-head { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 96px)); }
.note-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--grey); }
.note-meta a:hover { color: var(--ink); }
.note-meta .num { color: var(--signal); }
.note-title { margin-top: clamp(32px, 5vw, 72px); font: 400 clamp(2.7rem, 6.6vw, 7rem)/.94 var(--serif); letter-spacing: -.028em; max-width: 15ch; }
.note-title .sub { display: block; margin-top: .3em; font-style: italic; font-size: .5em; line-height: 1.04; letter-spacing: -.015em; max-width: 24ch; color: var(--ink-2); }
.note-dek-row { margin-top: clamp(28px, 3.6vw, 52px); row-gap: 20px; align-items: end; }
.note-dek { grid-column: 4 / 10; font-size: clamp(1.15rem, 1.55vw, 1.42rem); line-height: 1.42; letter-spacing: -.012em; color: var(--ink-2); }
.note-by { grid-column: 1 / 4; grid-row: 1; color: var(--grey); align-self: end; }
.note-grid { margin-top: clamp(48px, 6vw, 96px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--rule); align-items: start; }
.note-index { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + 28px); display: flex; flex-direction: column; gap: 14px; padding-right: 12px; }
.note-index ul { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.note-index li a {
  display: block; padding-block: 9px; border-bottom: 1px solid var(--rule);
  font-size: 13.5px; line-height: 1.35; color: var(--grey); transition: color .3s;
}
.note-index li a:hover, .note-index li a.is-active { color: var(--ink); }
.note-index li a.is-active { box-shadow: inset 2px 0 0 var(--signal); padding-left: 10px; }
.note-index li a { transition: color .3s, padding .4s var(--ease-out); }
.note-body { grid-column: 4 / 10; max-width: 690px; }
.note-aside { grid-column: 10 / 13; position: sticky; top: calc(var(--header-h) + 28px); color: var(--grey); display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
@media (max-width: 1099px) {
  .note-body { grid-column: 4 / 13; }
  .note-aside { display: none; }
}
@media (max-width: 899px) {
  .note-index { display: none; }
  .note-body, .note-dek, .note-by { grid-column: 1 / -1; grid-row: auto; }
}

/* Prose */
.prose { font-size: 18px; line-height: 1.68; color: #1C1B18; letter-spacing: -.008em; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  margin-top: 2.3em; margin-bottom: -.25em;
  font: 400 clamp(1.9rem, 2.9vw, 2.65rem)/1.06 var(--serif); letter-spacing: -.018em; color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h3 { margin-top: 1.9em; margin-bottom: -.35em; font: 600 1.08rem/1.3 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--signal); transition: color .2s; }
.prose a:hover { color: var(--signal); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: "—"; position: absolute; left: -1.25em; color: var(--grey-2); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { font: 500 .8em var(--mono); color: var(--signal); }
.prose li + li { margin-top: .5em; }
.prose code { font: 400 .84em/1 var(--mono); background: var(--paper-2); padding: .18em .38em; border-radius: 2px; }
.prose blockquote {
  margin: 1.6em 0; padding: 0;
  font: italic 400 clamp(1.75rem, 2.9vw, 2.6rem)/1.12 var(--serif); letter-spacing: -.015em; color: var(--ink);
}
.prose blockquote::before { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); margin-bottom: 18px; }
.prose .tldr { border-block: 1px solid var(--ink); padding-block: 22px 26px; font-size: 16px; line-height: 1.55; }
.prose .tldr-label { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-bottom: 14px; }
.prose .tldr ul { padding-left: 1.25em; }
.prose .article-img, .prose > img { width: 100%; height: auto; margin-block: 2em; filter: grayscale(1) contrast(1.06); }
.prose .chart-wrap, .prose figure.chart-wrap {
  background: var(--ink); color: var(--paper);
  padding: clamp(18px, 3vw, 36px); margin-block: 2.2em;
  margin-inline: clamp(-90px, -6vw, 0px);
}
.prose .chart-wrap { overflow: hidden; }
.prose .chart-wrap svg { width: 100%; max-width: 100%; height: auto; }
.prose .chart-wrap figcaption { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: #B4B0A7; }
.prose .code-block { background: var(--ink); color: #E9E6DE; padding: 20px 22px; overflow-x: auto; }
.prose .code-block pre { margin: 0; font: 400 12.5px/1.65 var(--mono); }
.prose pre { overflow-x: auto; }
.prose .content-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); border-top: 1px solid var(--ink); padding-top: 18px; font-size: 15.5px; }
.prose .split-box-label, .prose .example-label { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; }
.prose .example-box { border: 1px solid var(--rule); padding: 18px 20px; font-size: 16px; }
.prose .video-wrap { aspect-ratio: 16 / 9; background: var(--ink); }
.prose .video-wrap iframe { width: 100%; height: 100%; border: 0; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font: 500 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--grey); }
.prose .faq-section { margin-top: 3em; border-top: 1px solid var(--ink); }
.prose .faq-section h2 { margin-top: 1.1em; margin-bottom: .6em; }
.prose .faq-item { padding-block: 18px; border-bottom: 1px solid var(--rule); }
.prose .faq-item strong { display: block; font: 400 1.45rem/1.2 var(--serif); letter-spacing: -.012em; margin-bottom: 8px; }
.prose .faq-answer { font-size: 16.5px; color: var(--ink-2); }
@media (max-width: 1099px) {
  .prose .chart-wrap, .prose figure.chart-wrap { margin-right: 0; }
}
@media (max-width: 899px) {
  .prose { font-size: 17px; }
  .prose .chart-wrap, .prose figure.chart-wrap { margin-inline: 0; }
  .prose .content-split { grid-template-columns: 1fr; }
}

.note-end-col { grid-column: 4 / 10; }
@media (max-width: 899px) { .note-end-col { grid-column: 1 / -1; } }
.note-end { padding-block: clamp(72px, 9vw, 130px) 0; }
.author { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; padding-block: 22px; border-block: 1px solid var(--rule); }
.author .ph { width: 72px; height: 72px; background: var(--paper-2); overflow: hidden; }
.author .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08); }
.author p { font-size: 15px; color: var(--ink-2); max-width: 58ch; }
.author b { display: block; font-weight: 500; color: var(--ink); }

/* ---------- Utilities ---------- */
.mt-s { margin-top: 16px; } .mt-m { margin-top: clamp(28px, 3vw, 44px); } .mt-l { margin-top: clamp(48px, 6vw, 90px); }
@media (max-width: 599px) { .hide-sm { display: none !important; } }
@media (max-width: 899px) { .hide-md { display: none !important; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .js .scatter-home { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}