/* ==========================================================================
   Claire Pemberton — portfolio
   Helvetica, white ground, rounded surfaces.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --surface: #f5f5f4;
  --surface-2: #ececea;
  --ink: #0a0a0a;
  --ink-2: #3f3f3d;
  --muted: #74746f;
  --line: #e7e7e4;
  --accent: var(--ink);
  --live: #22a55b;

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(10 10 10 / 0.04), 0 1px 1px rgb(10 10 10 / 0.03);
  --shadow-md: 0 12px 32px -12px rgb(10 10 10 / 0.18), 0 2px 6px rgb(10 10 10 / 0.04);

  --gutter: clamp(24px, 5vw, 80px);
  --max: 1680px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);
  --step-4: clamp(2.6rem, 1.6rem + 4.6vw, 5.75rem);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.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-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--bg); font-weight: 500;
  transform: translateY(-160%); transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Buttons & pills ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
:where(button).btn { font-family: inherit; color: inherit; cursor: pointer; }
.btn:hover { background: var(--surface); }
.btn:active { transform: scale(0.97); }
.btn--dark {
  color: var(--bg); border-color: var(--ink);
  background: var(--ink);
}
.btn--dark:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--sm { height: 38px; padding: 0 16px; font-size: 0.875rem; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translate(2px, -2px); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--step--1); font-weight: 500; letter-spacing: -0.005em;
  white-space: nowrap;
}
.pill--outline { background: transparent; border: 1px solid var(--line); }
.pill__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 rgb(34 165 91 / 0.5);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgb(34 165 91 / 0.45); }
  70%, 100% { box-shadow: 0 0 0 7px rgb(34 165 91 / 0); }
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }

.eyebrow {
  font-size: var(--step--1); font-weight: 500; color: var(--muted);
  letter-spacing: -0.005em;
}

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  padding-block: 14px;
  background: rgb(255 255 255 / 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }

.site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
}
.site-header__inner .brand { justify-self: start; }
.site-header__inner .btn--header { justify-self: end; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.025em; font-size: 1.0625rem;
}

.nav {
  display: flex; gap: 2px; padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.nav a {
  padding: 7px 16px; border-radius: var(--radius-pill);
  font-size: 0.9rem; font-weight: 500; color: var(--ink-2);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"], .nav a[aria-current="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sm); }

@media (max-width: 720px) {
  /* the name scrolls away and only the nav pill stays pinned, 8px from the top */
  .site-header { top: calc(8px - 14px - 1.0625rem * 1.6 - 10px); }
  .site-header .btn--header { display: none; }
  .site-header__inner { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
  .site-header__inner .brand { justify-self: center; }
}
@media (max-width: 440px) { .nav a { padding: 7px 9px; font-size: 0.8125rem; } }
@media (max-width: 370px) { .nav a { padding: 7px 6px; font-size: 0.75rem; } }

/* With JS, small screens keep the name on the left and fold the nav into a menu button on the right */
.nav-toggle { display: none; }
@media (max-width: 720px) {
  .js .site-header { top: 0; }
  .js .site-header__inner { grid-template-columns: 1fr auto; justify-items: stretch; gap: 16px; }
  .js .site-header__inner .brand { justify-self: start; }
  /* plain "CP" initials stand in for the name, as tall as the menu button; the link keeps its aria-label */
  .js .site-header .brand { height: 40px; color: var(--ink); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
  .js .site-header .brand::before { content: "CP"; }
  .js .site-header .brand__name { display: none; }

  .js .nav-toggle {
    display: grid; place-items: center; justify-self: end;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill);
    background: var(--surface); color: var(--ink); cursor: pointer;
    transition: background-color 0.25s var(--ease);
  }
  .js .nav-toggle:hover { background: var(--surface-2); }
  .nav-toggle__bars { position: relative; width: 16px; height: 10px; }
  .nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor;
    transition: transform 0.3s var(--ease), top 0.3s var(--ease);
  }
  .nav-toggle__bars::before { top: 1px; }
  .nav-toggle__bars::after { top: 7.5px; }
  .site-header.is-open .nav-toggle__bars::before { top: 4.25px; transform: rotate(45deg); }
  .site-header.is-open .nav-toggle__bars::after { top: 4.25px; transform: rotate(-45deg); }

  .js .site-header .nav {
    position: absolute; top: calc(100% + 6px); left: var(--gutter); right: var(--gutter);
    flex-direction: column; gap: 2px; padding: 8px;
    border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-md), 0 0 0 1px var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .js .site-header.is-open .nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s;
  }
  .js .site-header .nav a { padding: 14px 16px; border-radius: var(--radius-md); font-size: 1.0625rem; color: var(--ink); }
  .js .site-header .nav a:hover { background: var(--surface); }
  .js .site-header .nav a[aria-current="page"], .js .site-header .nav a[aria-current="true"] { background: var(--surface); box-shadow: none; }
}

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

/* Fills the first screen under the sticky header. The bottom padding matches the header's height,
   so the heading and robot sit in the middle of the whole screen, not just the space below the header. */
.hero {
  --header-h: 73px;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: 0 var(--header-h);
  text-align: left;
}
@media (max-width: 720px) { .hero { --header-h: 110px; } }
@media (max-width: 720px) { .js .hero { --header-h: 68px; } }

.hero__title { color: var(--ink); }
/* on the narrowest phones the fixed gutters leave no room past the "n" for the robot; keep a robot's width clear on the right */
@media (max-width: 400px) { .hero__title { padding-right: calc(0.55 * (0.4rem + 13.5vw)); } }
.hero__name {
  display: block;
  /* the robot stands a quarter of an em taller than the first line; this keeps her inside the centred block */
  padding-top: 0.25em;
  /* sized by width, but never so tall that the block and robot outgrow a short screen */
  font-size: clamp(2.75rem, min(0.4rem + 13.5vw, 24svh), 13.5rem);
  font-weight: 700; letter-spacing: -0.055em; line-height: 0.86;
}
.hero__name-line { display: block; white-space: nowrap; }
/* opens the gap after the "r" in the first name, to sit close to the one after the "r" in the surname */
.hero__r { margin-right: 0.03em; }
/* each letter of the surname is a platform the robot can walk on, lift, tilt and recolour */
.hero__ch {
  display: inline-block;
  transform-origin: 50% 100%;
  transform: translateY(var(--y, 0em)) rotate(var(--rot, 0deg)) scale(var(--sx, 1), var(--sy, 1));
}
/* where the "r" sits before the robot arrives to fix it; hero/main.jsx refines this to the exact type */
.hero-intro .hero__letter { --y: -0.465em; --rot: 8deg; }
/* the arm of the "r" runs into the bar of the "t" at this tracking; this opens the same gap the "e" and "r" have */
.hero__letter + .hero__ch { margin-left: 0.072em; }
.hero__baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.hero__title-line {
  display: block;
  margin-top: clamp(10px, 1.4vw, 24px);
  font-size: clamp(1.5rem, 0.5rem + 4.2vw, 4.5rem);
  font-weight: 400; letter-spacing: -0.03em; line-height: 1;
  color: var(--ink-2);
}

.hero__lede {
  max-width: 28em;
  margin-top: clamp(24px, 3vw, 44px);
  font-size: var(--step-1); line-height: 1.5; letter-spacing: -0.01em;
  font-weight: 400; color: var(--ink-2);
}

/* ---------- Section heading ---------- */

.section { padding-block: clamp(48px, 8vw, 112px); }
.section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.section-head h2 { font-size: var(--step-3); }
.section-head p { color: var(--muted); max-width: 36ch; }

/* ---------- Placeholder media ---------- */

.ph {
  --a: #efede8; --b: #d9d5cc;
  position: relative; overflow: hidden;
  aspect-ratio: var(--ratio, 16 / 9);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 18% 12%, rgb(255 255 255 / 0.55), transparent 55%),
    radial-gradient(90% 80% at 85% 95%, rgb(0 0 0 / 0.08), transparent 60%),
    linear-gradient(135deg, var(--a), var(--b));
  isolation: isolate;
}
.ph::after {
  /* faint grain so the gradient reads as a photo stand-in */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.18; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
}
.ph__label {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink-2); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em;
}
.ph__play {
  position: absolute; inset: 0; margin: auto;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(255 255 255 / 0.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
.ph__play svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--ink); }

/* filler tones — all neutral grey for now; swap for real imagery per case study */
.tone-1,
.tone-2,
.tone-3,
.tone-4,
.tone-neutral { --a: #f2f1ee; --b: #dcdad4; }

/* ---------- Capabilities / about preview ---------- */

.panel {
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: clamp(28px, 5vw, 64px);
}
.split { display: grid; gap: clamp(28px, 5vw, 64px); }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }

.statement { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.04em; line-height: 1.08; text-wrap: balance; }
.prose { display: grid; gap: 1.1em; color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; letter-spacing: -0.012em; }

.cards { display: grid; gap: 12px; margin-top: clamp(28px, 4vw, 48px); padding: 0; list-style: none; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); font-size: 0.8125rem; font-weight: 600; margin-bottom: 28px; }
.card h3 { font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.25; }
.card p { margin-top: 8px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }

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

.site-footer { padding-block: clamp(48px, 8vw, 96px) 28px; }
.cta {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--ink); color: var(--bg);
  padding: clamp(32px, 6vw, 80px);
}
.cta::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.14), transparent);
  pointer-events: none;
}
.cta .eyebrow { color: rgb(255 255 255 / 0.6); }
.cta h2 { margin-top: 14px; font-size: var(--step-4); letter-spacing: -0.04em; line-height: 0.98; max-width: 12ch; }
.cta p { margin-top: 20px; max-width: 46ch; color: rgb(255 255 255 / 0.72); font-size: var(--step-1); line-height: 1.5; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.cta .btn { background: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.78)); color: var(--ink); border-color: rgb(255 255 255 / 0.8); }
.cta .btn:hover { background: linear-gradient(180deg, rgb(255 255 255 / 1), rgb(255 255 255 / 0.88)); }
.cta .btn--ghost { background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)); color: var(--bg); border-color: rgb(255 255 255 / 0.24); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2); }
.cta .btn--ghost:hover { background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.08)); }
.cta--light { background: var(--surface); color: var(--ink); }
.cta--light::before { content: none; }
.cta--light .eyebrow { color: var(--muted); }
.cta--light p { color: var(--ink-2); }
.cta--light .btn { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cta--light .btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.cta--light .btn--ghost { background: var(--bg); color: var(--ink); border-color: var(--line); box-shadow: none; }
.cta--light .btn--ghost:hover { background: var(--surface-2); }

/* About: the robot stands to the right of the text and sends a paper plane to the email button */
.cta--robot { display: grid; gap: 8px; }
.cta__stage { position: relative; min-height: 240px; }
.cta-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta-scene canvas { display: block; }
.cta-still { position: absolute; left: 50%; bottom: 0; height: 88%; max-height: 440px; transform: translateX(-50%); }
@media (min-width: 820px) {
  .cta--robot { grid-template-columns: minmax(0, 1fr) minmax(240px, 36%); align-items: stretch; gap: 32px; }
  .cta__stage { min-height: 300px; }
}
.cta__send.is-pinged { animation: cta-ping 0.7s var(--ease); }
@keyframes cta-ping {
  0% { box-shadow: 0 0 0 0 rgb(10 10 10 / 0.28); transform: scale(1); }
  30% { transform: scale(1.05); }
  100% { box-shadow: 0 0 0 14px rgb(10 10 10 / 0); transform: scale(1); }
}

.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 28px; padding: 0 4px;
  color: var(--muted); font-size: 0.875rem;
}
.footer-bar nav { display: flex; flex-wrap: wrap; gap: 4px; margin-inline: -12px; }
.footer-bar nav a { padding: 6px 12px; border-radius: var(--radius-pill); transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.footer-bar nav a:hover { background: var(--surface); color: var(--ink); }

/* ---------- Work & Ventures ---------- */

.section--divided {
  --divided-pad: clamp(40px, 6vw, 80px);
  padding-top: var(--divided-pad);
  /* nav jumps land on the divider, not the padding above it */
  scroll-margin-top: calc(-1 * var(--divided-pad));
}

/* thin rule across the top, title row underneath */
.section-title {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-bottom: 80px;
}
.section-title h2 { font-size: var(--step-3); }
@media (max-width: 1023px) { .section-title { margin-bottom: 64px; } }
@media (max-width: 767px)  { .section-title { margin-bottom: 48px; } }

.filters { display: flex; gap: 6px; }
.filter {
  height: 40px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 500; letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.filter:hover { transform: translateY(-1px); background: var(--surface); }
.filter:active { transform: scale(0.98); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 639px) { .filter { height: 32px; padding: 0 14px; font-size: 0.875rem; } }

.work-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px 32px;
  margin: 0; padding: 0; list-style: none;
}
.work-item.is-wide { grid-column: 1 / -1; }
.work-item[hidden] { display: none; }
@media (max-width: 1023px) { .work-grid { row-gap: 48px; } }
@media (max-width: 767px)  { .work-grid { grid-template-columns: 1fr; } }
@media (max-width: 639px)  { .work-grid { row-gap: 32px; } }

/* animations: square tiles, four across */
.work-grid--motion {
  --cols: 4; --col-gap: 24px;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 48px var(--col-gap);
  grid-auto-flow: dense; container-type: inline-size;
}
.work-grid--motion .work-card__media { aspect-ratio: 1 / 1; }
@media (max-width: 1023px) { .work-grid--motion { --cols: 3; } }
@media (max-width: 767px) { .work-grid--motion { --cols: 2; --col-gap: 16px; row-gap: 32px; } }
/* a double-width tile, exactly as tall as the square tiles beside it */
.work-grid--motion .work-item--span2 { grid-column: span 2; }
.work-grid--motion .work-item--span2 .work-card__media { aspect-ratio: auto; height: calc((100cqi - (var(--cols) - 1) * var(--col-gap)) / var(--cols)); }
/* keep every row full: 8 tiles fill 4 columns, the double tile only pays off at 3, and 2 columns need a second double */
@media (min-width: 1024px) {
  .work-grid--motion .work-item--span2 { grid-column: auto; }
  .work-grid--motion .work-item--span2 .work-card__media { aspect-ratio: 1 / 1; height: auto; }
}
@media (max-width: 767px) {
  .work-grid--motion .work-item--span2-sm { grid-column: span 2; }
  .work-grid--motion .work-item--span2-sm .work-card__media { aspect-ratio: auto; height: calc((100cqi - (var(--cols) - 1) * var(--col-gap)) / var(--cols)); }
}

/* hover transition: the hover panel is clipped in from a different shape each time */
.hx {
  --hx-dur: 0.72s;
  --hx-x: 50%; --hx-y: 50%;
  container-type: inline-size;
  cursor: pointer; outline-offset: 4px;
}
.hx .work-card__count { display: none; }
.hx__panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(14px, 7cqi, 28px);
  transition: clip-path var(--hx-dur) var(--ease), transform var(--hx-dur) var(--ease);
}
.hx__panel--default { background: var(--surface); color: var(--ink); }
.hx__panel--hover { background: #ffcce5; color: var(--ink); clip-path: var(--hx-from); }
.hx.is-on .hx__panel--hover { clip-path: var(--hx-to); }

.hx__eyebrow {
  font-size: clamp(0.625rem, 3.2cqi, 0.75rem); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgb(10 10 10 / 0.5);
}
.hx__mark {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 46cqi; font-weight: 600; letter-spacing: -0.08em; line-height: 1;
  color: rgb(10 10 10 / 0.05);
}
.hx__foot { position: relative; }
.hx__name { font-size: clamp(1rem, 8.5cqi, 1.875rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; }
.hx__panel--hover .hx__name { font-size: clamp(0.8125rem, 4.4cqi, 1rem); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 2px; }
.hx__sub { margin-top: 4px; font-size: clamp(0.6875rem, 3.8cqi, 0.875rem); line-height: 1.35; color: rgb(10 10 10 / 0.55); }
.hx__quote {
  max-width: 22ch;
  font-size: clamp(0.875rem, 6.4cqi, 1.375rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.15;
}

/* hover content settles in a beat behind the reveal */
.hx__panel--hover > * { transform: translateY(10px); opacity: 0; transition: transform var(--hx-dur) var(--ease), opacity 0.3s var(--ease); }
.hx.is-on .hx__panel--hover > * { transform: none; opacity: 1; transition-delay: 0.08s; }
.hx.is-on .hx__panel--hover > .hx__foot { transition-delay: 0.14s; }

.hx__effect {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink);
  transition: opacity 0.2s var(--ease);
}
.hx.is-on .hx__effect { opacity: 0; }
@container (max-width: 240px) {
  .hx__effect { top: 8px; right: 8px; height: 20px; padding: 0 8px; font-size: 0.625rem; }
  .hx__panel--default > .hx__eyebrow { visibility: hidden; }
}

/* from / to shapes; each pair has matching point counts so clip-path can tween */
.hx[data-effect="ripple"]   { --hx-from: circle(0% at var(--hx-x) var(--hx-y));  --hx-to: circle(145% at var(--hx-x) var(--hx-y)); }
.hx[data-effect="wipe"]     { --hx-from: inset(0 100% 0 0);                       --hx-to: inset(0 0 0 0); }
.hx[data-effect="curtain"]  { --hx-from: inset(0 50% 0 50%);                      --hx-to: inset(0 0 0 0); }
.hx[data-effect="diagonal"] { --hx-from: polygon(0 0, 0 0, 0 0);                  --hx-to: polygon(0 0, 200% 0, 0 200%); }
.hx[data-effect="parallax"] { --hx-from: inset(0 0 0 0);                          --hx-to: inset(0 0 0 0); }
.hx[data-effect="parallax"] .hx__panel--hover { transform: translateX(100%); }
.hx[data-effect="parallax"].is-on .hx__panel--hover { transform: none; }
.hx[data-effect="parallax"].is-on .hx__panel--default { transform: translateX(-30%); }

@media (prefers-reduced-motion: reduce) {
  .hx__panel, .hx__panel--hover > * { transition: opacity 0.2s linear !important; transform: none !important; }
  .hx .hx__panel--hover { clip-path: none; opacity: 0; }
  .hx.is-on .hx__panel--hover { opacity: 1; }
}

/* Gallery Tunnel: a still poster until the WebGL scene is ready, then the scene fades in over it */
.tunnel {
  position: absolute; inset: 0;
  background: var(--surface) url("../assets/tunnel/poster.webp") center / cover no-repeat;
}
.tunnel__stage { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.tunnel.is-ready .tunnel__stage { opacity: 1; }
.tunnel__stage canvas { display: block; }
.tunnel__stage > div:active { cursor: grabbing !important; }

/* Collection Surfer: laid out on a 1000px stage that js/collection-surfer.js scales to the card */
.surfer {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--surface); color: #000;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.surfer.is-dragging { cursor: grabbing; }
.surfer__stage { position: absolute; top: 0; left: 0; width: 1000px; transform-origin: 0 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.surfer.is-ready .surfer__stage { opacity: 1; }
.surfer__scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  perspective: 2000px; perspective-origin: 10% 10%;
}
.surfer__track { position: relative; width: 0; height: 0; transform-style: preserve-3d; }
.surfer__card { position: absolute; top: -170px; left: -120px; width: 360px; height: 480px; transform-style: preserve-3d; }
.surfer__frame {
  position: absolute; inset: 0; overflow: hidden; border-radius: 28px;
  background: #171717;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.surfer__frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75); transition: filter 0.3s var(--ease); }
.surfer__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top right, rgb(0 0 0 / 0.2), transparent); }
.surfer__num {
  position: absolute; top: -34px; left: -16px;
  font: 500 20px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.04em;
  opacity: 0.5; transition: opacity 0.3s var(--ease);
}
.surfer__card:hover .surfer__frame img, .surfer__card.is-facing .surfer__frame img { filter: none; }
.surfer__card:hover .surfer__num, .surfer__card.is-facing .surfer__num { opacity: 1; }
.surfer__title {
  position: absolute; top: 30px; left: 30px; z-index: 2;
  pointer-events: none;
  font-weight: 700; font-size: 64px; line-height: 0.9; letter-spacing: -0.05em; text-transform: uppercase;
}
.surfer__line { display: block; }
.surfer__line--indent { margin-left: 40px; }
.surfer__title sup {
  font: 400 0.4em/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0;
  vertical-align: top; position: relative; top: 0.6em; margin-left: 8px;
  font-variant-numeric: tabular-nums;
}
.surfer__hint {
  position: absolute; right: 30px; bottom: 30px; z-index: 2; pointer-events: none;
  font: 500 22px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.7;
}
/* Bookshelf: a transparent WebGL canvas over the card's surface, faded in once the scene is up */
.bookshelf { position: absolute; inset: 0; }
.bookshelf__stage { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.bookshelf.is-ready .bookshelf__stage { opacity: 1; }
.bookshelf__host { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; outline: none; }
.bookshelf__host:active { cursor: grabbing; }
.bookshelf__host:focus-visible { box-shadow: inset 0 0 0 2px currentColor; }
.bookshelf__host canvas { display: block; }
.bookshelf__tip {
  position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none;
  display: grid; gap: 2px; max-width: 220px; padding: 8px 10px; margin: -12px 0 0 14px;
  border-radius: 8px; background: rgb(255 255 255 / 0.94); box-shadow: 0 6px 20px rgb(0 0 0 / 0.1);
  font-size: 12px; line-height: 1.3; opacity: 0; transition: opacity 0.15s linear;
}
.bookshelf__tip.is-on { opacity: 1; }
.bookshelf__tip span { opacity: 0.6; }
.bookshelf__hint {
  position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; pointer-events: none;
  font-size: 12px; opacity: 0.5;
}
@media (hover: none) { .bookshelf__tip { display: none; } }
/* Fur: a WebGL scene on the card grey, faded in once the first frame is drawn */
.fur { position: absolute; inset: 0; background: var(--surface); }
.fur:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.fur__stage { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.fur.is-ready .fur__stage { opacity: 1; }
.fur__host, .fur__host > div { position: absolute; inset: 0; }
.fur__host { touch-action: pan-y; cursor: grab; }
.fur__host.is-pressing { cursor: grabbing; }
.fur__host canvas { display: block; }
.fur__hint {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 1;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; white-space: nowrap;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.7); border: 1px solid rgb(10 10 10 / 0.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; color: rgb(10 10 10 / 0.6);
  pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease);
}
.fur.is-ready .fur__hint { opacity: 1; }
.fur.is-ready.is-active .fur__hint { opacity: 0; }
/* Pixel Canvas: js/pixel-canvas.js draws the panel; a quarter-size copy underneath is blurred into the bloom */
.pixels {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--surface); cursor: crosshair; touch-action: pan-y; outline-offset: 4px;
}
.pixels__canvas, .pixels__glow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pixels__glow { filter: blur(10px) saturate(1.4); opacity: 0.55; mix-blend-mode: multiply; transform: scale(1.02); }
.pixels__hint {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; white-space: nowrap;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.7); border: 1px solid rgb(0 0 0 / 0.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; color: rgb(0 0 0 / 0.6);
  pointer-events: none; transition: opacity 0.4s var(--ease);
}
.pixels.is-active .pixels__hint { opacity: 0; }
/* Dymaxion map: animations/dymaxion folds the Whole Earth net on a loop; the still shows until the scene is ready */
.dymaxion {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--surface); cursor: grab; touch-action: pan-y;
}
.dymaxion.is-grabbing { cursor: grabbing; }
.dymaxion__still {
  position: absolute; left: 8%; top: 50%; width: 84%; height: auto; translate: 0 -50%;
  transition: opacity 0.8s var(--ease);
}
.dymaxion.is-ready .dymaxion__still { opacity: 0; }
.dymaxion__stage { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.dymaxion.is-ready .dymaxion__stage { opacity: 1; }
.dymaxion__host, .dymaxion__host > div { position: absolute; inset: 0; }
.dymaxion__host canvas { display: block; }
.dymaxion__hint {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 1;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; white-space: nowrap;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.7); border: 1px solid rgb(10 10 10 / 0.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; color: rgb(10 10 10 / 0.6);
  pointer-events: none; transition: opacity 0.4s var(--ease);
}
.dymaxion.is-active .dymaxion__hint { opacity: 0; }
.work-card__media:has(.pixels) .work-card__count,
.work-card__media:has(.dymaxion) .work-card__count,
.work-card__media:has(.fur) .work-card__count,
.work-card__media:has(.bookshelf) .work-card__count,
.work-card__media:has(.tunnel) .work-card__count,
.work-card__media:has(.surfer) .work-card__count { display: none; }

/* Orbit card stack: sized in --u, which main.js sets so the open fan fills the tile (this is the fallback) */
.orbit { --u: calc(0.18cqh); container-type: size; }
.orbit__stage { position: absolute; inset: 0; }
.orbit .work-card__count { display: none; }
.orbit__card {
  --x: 0; --y: 0; --r: 0deg; --s: 0.97;
  position: absolute; left: 50%; top: var(--top, 46%);
  width: calc(280 * var(--u)); padding: calc(12 * var(--u));
  border-radius: calc(26 * var(--u));
  background: var(--bg); color: var(--ink);
  box-shadow: 0 0 0 1px rgb(10 10 10 / 0.06), 0 calc(14 * var(--u)) calc(34 * var(--u)) calc(-14 * var(--u)) rgb(10 10 10 / 0.22);
  transform-origin: 50% 100%;
  transform: translate(calc(-50% + var(--x) * var(--u)), calc(-50% + var(--y) * var(--u))) rotate(var(--r)) scale(var(--s));
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer; outline: none;
}
.orbit__card:focus-visible { box-shadow: 0 0 0 1px rgb(10 10 10 / 0.06), 0 0 0 calc(5 * var(--u)) rgb(10 10 10 / 0.18); }
.orbit__shot {
  position: relative; aspect-ratio: 1.36; overflow: hidden;
  border-radius: calc(18 * var(--u));
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgb(10 10 10 / 0.06);
}
.orbit__shot img { width: 100%; height: 100%; object-fit: cover; }
.orbit__arrow {
  position: absolute; top: calc(10 * var(--u)); right: calc(10 * var(--u));
  display: grid; place-items: center;
  width: calc(36 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgb(10 10 10 / 0.2);
}
.orbit__arrow svg { width: 40%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.orbit__body { padding: calc(18 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)); }
.orbit__role, .orbit__stat {
  font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.orbit__name { margin-top: calc(6 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.orbit__stat { margin-top: calc(14 * var(--u)); padding-top: calc(11 * var(--u)); border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .orbit__card { transition-duration: 0ms; } }

.work-card { display: flex; flex-direction: column; transition: transform 0.25s var(--ease); }
.work-card:active { transform: scale(0.99); }

.work-card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: var(--surface);
  isolation: isolate;
}
.work-card__media > .ph { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }

/* stacked frames; the hovered slice of the image picks which one shows */
.frame {
  opacity: 0;
  background:
    radial-gradient(120% 90% at calc(14% + var(--shift) * 14%) 12%, rgb(255 255 255 / 0.6), transparent 55%),
    radial-gradient(90% 80% at 85% 95%, rgb(0 0 0 / 0.08), transparent 60%),
    linear-gradient(calc(120deg + var(--shift) * 18deg), var(--a), var(--b));
}
.frame.is-active { opacity: 1; }
.frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* "2 / 4" while the mouse is over the image; stands in for the placeholder labels */
.work-card__media[data-scrub] .ph__label { display: none; }
.work-card__count {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  color: var(--ink); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
@media (hover: hover) {
  .work-card__media:hover .work-card__count { opacity: 1; }
  .work-card__media:hover .ph__label { opacity: 0; }
}

.work-card__title {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 24px;
}
.work-card__title h3,
.work-card__excerpt {
  font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.015em;
}
.work-card__title h3 { font-weight: 500; }
/* what the project is, on its own line under the name */
.work-card__kind { display: block; font-weight: 400; color: var(--ink-2); }
/* sits right after the name, not after the longer line beneath it */
.work-card__arrow { display: inline-block; margin-left: 2px; transition: transform 0.3s var(--ease); }
.work-card:hover .work-card__arrow { transform: translateX(4px); }
.work-card__excerpt { margin: 0; font-weight: 400; color: var(--muted); }

/* ---------- Blog ---------- */

.blog-hero { padding-block: clamp(40px, 8vw, 104px) 0; }
.blog-hero h1 { font-size: var(--step-4); letter-spacing: -0.04em; line-height: 0.98; }
.blog-hero__lede { margin-top: 24px; max-width: 44ch; color: var(--ink-2); font-size: var(--step-2); font-weight: 400; line-height: 1.25; letter-spacing: -0.03em; }

.blog-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 32px;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
@media (max-width: 639px)  { .blog-grid { grid-template-columns: 1fr; row-gap: 40px; } }

.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--surface);
  isolation: isolate;
}
.post-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease);
}
@media (hover: hover) { .post-card:hover .post-card__media img { transform: scale(1.035); } }

.post-card__body { padding-top: 22px; }
.post-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  color: var(--muted); font-size: var(--step--1); font-weight: 500; letter-spacing: -0.005em;
}
.post-card__meta > * + *::before {
  content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 14px;
  border-radius: 50%; background: currentColor; vertical-align: middle; opacity: 0.6;
}
.post-card__topic { color: var(--ink); }
.post-card__title { margin-top: 12px; font-size: var(--step-2); font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; }
.post-card__excerpt { margin-top: 10px; max-width: 36ch; color: var(--muted); font-size: 0.9875rem; line-height: 1.5; }

/* the newest post runs across the grid on the same column track as the cards
   below: image over the first two thirds, text in the last third */
.blog-item--feature { grid-column: 1 / -1; }
.blog-item--feature .post-card { display: grid; gap: 0 32px; }
@media (min-width: 640px) {
  .blog-item--feature .post-card { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .blog-item--feature .post-card__body { padding-top: 0; }
}
@media (min-width: 1024px) {
  .blog-item--feature .post-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-item--feature .post-card__media { grid-column: span 2; aspect-ratio: 16 / 10; }
}
.blog-item--feature .post-card__title { font-size: var(--step-3); line-height: 1.04; }
.blog-item--feature .post-card__excerpt { margin-top: 16px; max-width: 32em; font-size: var(--step-1); }

/* grey filler until each post has its own imagery */
.post-card__media > .ph { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; transition: transform 0.9s var(--ease); }
@media (hover: hover) { .post-card:hover .post-card__media > .ph { transform: scale(1.035); } }

/* ---------- Blog post ---------- */

.post-hero { padding-block: clamp(40px, 8vw, 104px) clamp(28px, 4vw, 48px); }
.post-hero h1 { margin-top: 16px; font-size: var(--step-4); letter-spacing: -0.045em; line-height: 0.98; text-wrap: balance; }
.post-hero__lede { margin-top: 24px; color: var(--ink-2); font-size: var(--step-2); font-weight: 400; line-height: 1.25; letter-spacing: -0.03em; text-wrap: pretty; }

.post-body {
  max-width: 720px; margin: clamp(48px, 7vw, 96px) auto 0;
  color: var(--ink-2); font-size: var(--step-1); line-height: 1.6; letter-spacing: -0.01em;
}
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { margin-top: 2.2em; color: var(--ink); font-size: var(--step-2); letter-spacing: -0.03em; line-height: 1.15; }
.post-body strong { color: var(--ink); font-weight: 500; }
.post-body em { font-style: italic; }
.post-body a { text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { padding-left: 1.2em; }
.post-body li + li { margin-top: 0.5em; }
.post-body blockquote {
  margin-block: 1.8em; padding-block: 4px; padding-left: clamp(20px, 3vw, 32px);
  border-left: 2px solid var(--ink);
  color: var(--ink); font-size: var(--step-2); font-weight: 500; letter-spacing: -0.03em; line-height: 1.25; text-wrap: pretty;
}
.post-body figure { margin-block: 2em; }
.post-body .caption { margin-top: 12px; }
/* wide figures break out of the text column */
.post-figure--wide { position: relative; left: 50%; width: min(1120px, 100vw - var(--gutter) * 2); transform: translateX(-50%); }
.post-figure-pair { display: grid; gap: clamp(12px, 2vw, 20px); }
@media (min-width: 640px) { .post-figure-pair { grid-template-columns: 1fr 1fr; } }
.post-body .cs-todo { font-size: 0.9375rem; }
.post-notes { margin-top: 2.6em; }
.post-notes details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-notes summary { display: flex; align-items: center; gap: 10px; padding: 18px 0; cursor: pointer; list-style: none; }
.post-notes summary::-webkit-details-marker { display: none; }
.post-notes h2 { margin: 0; font-size: var(--step-1); line-height: 1.05; }
.post-notes__count { color: var(--muted); font-size: var(--step--1); }
.post-notes__icon { margin-left: auto; margin-right: 4px; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); }
.post-notes summary:hover .post-notes__icon { border-color: var(--ink); }
.post-notes details[open] .post-notes__icon { transform: translateY(2px) rotate(-135deg); }
.post-notes ol { margin: 0 0 20px; padding-left: 1.2em; color: var(--muted); font-size: var(--step--1); line-height: 1.55; }
.post-notes li + li { margin-top: 6px; }

/* ---------- Case study page ---------- */

.cs-hero { padding-block: clamp(40px, 8vw, 104px) clamp(28px, 4vw, 48px); }
.cs-hero__cta { margin-top: 28px; }
/* same slow twist as the about portrait; uses rotate so the press scale still applies */
.cs-hero__cta .btn { transform-origin: 50% 100%; animation: cta-twist 6s ease-in-out infinite; background: #efefed; border-color: #efefed; }
.cs-hero__cta .btn:hover { background: var(--line); border-color: var(--line); }
@keyframes cta-twist {
  0%, 100% { rotate: -2deg; }
  50% { rotate: 2deg; }
}
.cs-hero h1 { font-size: var(--step-4); letter-spacing: -0.04em; line-height: 0.98; }
.cs-hero h1 span { display: block; color: var(--accent); }
.cs-hero__intro { margin-top: 24px; max-width: 44ch; font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.03em; color: var(--ink-2); font-weight: 400; }

.facts {
  display: grid; gap: 1px; overflow: hidden;
  margin-top: clamp(16px, 3vw, 28px);
  border-radius: var(--radius-lg);
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts > div { background: var(--bg); padding: 20px 22px; }
.facts dt { font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.facts dd { margin: 6px 0 0; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; }

.cs-body { display: grid; gap: clamp(20px, 3vw, 32px); }
.cs-chapter { display: flex; align-items: center; gap: 12px; padding-top: clamp(40px, 6vw, 80px); }
.cs-chapter h2 { font-size: var(--step-3); }
.cs-statement { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; max-width: 40ch; text-wrap: pretty; padding-block: clamp(16px, 3vw, 32px); }

.cs-split { display: grid; gap: clamp(20px, 3vw, 32px); align-items: center; }
@media (min-width: 860px) {
  .cs-split { grid-template-columns: 1fr 1fr; }
  .cs-split--left .cs-split__text { order: 2; }
  .cs-split--flip > :first-child { order: 2; }
}
.cs-split__text { font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.025em; color: var(--ink-2); font-weight: 400; padding: 0 4px; }

.cs-grid { display: grid; gap: clamp(12px, 2vw, 20px); }
@media (min-width: 640px) {
  .cs-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .cs-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .cs-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 959px) { .cs-grid--4 { grid-template-columns: repeat(2, 1fr); } }
.cs-vertical { max-width: 440px; margin-inline: auto; width: 100%; }

.caption { margin-top: 12px; padding-left: 4px; color: var(--muted); font-size: var(--step--1); font-weight: 500; }

.cs-quote {
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: clamp(32px, 6vw, 80px);
  margin-top: clamp(20px, 3vw, 40px);
}
.cs-quote p { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; max-width: 40ch; text-wrap: pretty; }
.cs-quote footer { margin-top: 20px; color: var(--muted); font-weight: 500; }

/* long-form case study text: type grows on wide screens so the measure fills the column without overlong lines */
.cs-body { --cs-prose-size: var(--step-1); --cs-measure: 68ch; }
@media (min-width: 1024px) { .cs-body { --cs-prose-size: clamp(1.3125rem, 0.75rem + 0.9vw, 1.5rem); --cs-measure: 92ch; } }
.cs-prose { max-width: var(--cs-measure); color: var(--ink-2); font-size: var(--cs-prose-size); line-height: 1.55; letter-spacing: -0.01em; }
.cs-prose > * + * { margin-top: 1em; }
.cs-prose h3 { color: var(--ink); font-size: var(--step-2); margin-top: 1.6em; }
.cs-prose h3:first-child { margin-top: 0; }
.cs-prose strong { color: var(--ink); font-weight: 500; }
.cs-prose ul, .cs-prose ol { margin-block: 0; padding-left: 1.2em; }
.cs-prose li + li { margin-top: 0.4em; }
.cs-prose cite { font-style: normal; color: var(--muted); font-size: 0.85em; }
.cs-sub { font-size: var(--step-2); padding-top: clamp(16px, 3vw, 32px); }

.cs-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cs-stat { border-radius: var(--radius-lg); background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.cs-stat strong { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
/* word labels instead of figures: a step down so long words like "Comprehension" fit the card */
.cs-stats--labels .cs-stat strong { font-size: var(--step-2); letter-spacing: -0.03em; line-height: 1.1; }
.cs-stat { min-width: 0; }
.cs-stat strong { overflow-wrap: anywhere; hyphens: auto; }
.cs-stat p { color: var(--ink-2); line-height: 1.45; }
.cs-stat cite { margin-top: auto; font-style: normal; color: var(--muted); font-size: var(--step--1); }

.cs-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cs-card { border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.cs-card h3 { font-size: var(--step-1); line-height: 1.25; }
.cs-card p { color: var(--ink-2); line-height: 1.5; }
.cs-card dl { margin: 0; display: grid; gap: 10px; }
.cs-card dt { font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.cs-card dd { margin: 2px 0 0; color: var(--ink-2); line-height: 1.5; }
.cs-reflect .cs-card { gap: 16px; }
.cs-reflect ul { margin: 0; padding-left: 1.2em; color: var(--ink-2); line-height: 1.5; }
.cs-reflect li + li { margin-top: 0.6em; }
.cs-reflect strong { color: var(--ink); font-weight: 500; }

/* final experience: one feature = heading, one visual, and the research -> design -> result trail behind it */
.cs-feature { display: grid; gap: clamp(16px, 2.5vw, 28px); grid-template-areas: "head" "media" "trail"; padding-top: clamp(12px, 3vw, 40px); }
.cs-feature__head { grid-area: head; display: grid; gap: 12px; justify-items: start; max-width: var(--cs-measure); }
.cs-feature__head h3 { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; text-wrap: balance; }
.cs-feature__head p { color: var(--ink-2); font-size: var(--cs-prose-size); line-height: 1.5; letter-spacing: -0.01em; }
.cs-feature__head strong { color: var(--ink); font-weight: 500; }
.cs-feature > .ph, .cs-feature > figure, .cs-feature > .cs-grid { grid-area: media; }
.cs-trail { grid-area: trail; margin: 0; display: grid; }
.cs-trail > div { border-top: 1px solid var(--line); padding-block: 16px; }
.cs-trail dt { font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.cs-trail dd { margin: 6px 0 0; color: var(--ink-2); line-height: 1.5; }
.cs-trail__result strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: var(--step-3); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
@media (min-width: 860px) {
  .cs-trail { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
  .cs-feature--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media head" "media trail"; column-gap: clamp(24px, 4vw, 56px); align-items: center; }
  .cs-feature--split.cs-feature--flip { grid-template-areas: "head media" "trail media"; }
  .cs-feature--split .cs-feature__head { align-self: end; }
  .cs-feature--split .cs-trail { align-self: start; grid-template-columns: none; }
}
.cs-also { border-radius: var(--radius-lg); background: var(--surface); padding: clamp(24px, 3vw, 36px); max-width: none; margin-top: clamp(8px, 2vw, 24px); }
.cs-also h3 { font-size: var(--step-1); }
.cs-also li { break-inside: avoid; margin-bottom: 0.6em; }
.cs-also li + li { margin-top: 0; }
@media (min-width: 860px) { .cs-also ul { columns: 2; column-gap: clamp(24px, 4vw, 56px); } }
.cs-card__tag {
  align-self: flex-start; max-width: 100%;
  height: auto; min-height: 30px; padding: 5px 12px;
  border-radius: 15px; white-space: normal; line-height: 1.35;
}
/* tablets: two even columns, and an odd card out spans the row instead of sitting alone */
@media (min-width: 560px) and (max-width: 1099px) {
  .cs-stats, .cs-cards:not(.cs-cards--row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-stats > :last-child:nth-child(odd), .cs-cards:not(.cs-cards--row) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
  .cs-cards--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; scrollbar-width: thin; }
  .cs-cards--row > .cs-card { scroll-snap-align: start; }
}

.cs-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.cs-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.cs-table th, .cs-table td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cs-table tr:last-child td { border-bottom: 0; }
.cs-table th { background: var(--surface); color: var(--muted); font-size: var(--step--1); font-weight: 500; }
.cs-table td { color: var(--ink-2); }
.cs-table td:first-child { color: var(--ink); font-weight: 500; }

/* drafting note: marks content that waits on primary research */
.cs-todo { border-radius: var(--radius-md); border: 1px dashed var(--muted); padding: 16px 20px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.cs-todo strong { color: var(--ink); font-weight: 500; }

.cs-sources { padding-top: clamp(40px, 6vw, 80px); }
.cs-sources + .cs-sources { padding-top: 0; margin-top: calc(-1 * clamp(20px, 3vw, 32px)); }
.cs-sources details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-sources + .cs-sources details { border-top: 0; }
.cs-sources summary { display: flex; align-items: center; gap: 10px; padding: 18px 0; cursor: pointer; list-style: none; }
.cs-sources summary::-webkit-details-marker { display: none; }
.cs-sources h2 { font-size: var(--step-1); }
.cs-sources__count { color: var(--muted); font-size: var(--step--1); }
.cs-sources__icon { margin-left: auto; margin-right: 4px; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); }
.cs-sources summary:hover .cs-sources__icon { border-color: var(--ink); }
.cs-sources details[open] .cs-sources__icon { transform: translateY(2px) rotate(-135deg); }
.cs-sources ol { margin: 0 0 20px; padding-left: 1.2em; color: var(--muted); font-size: var(--step--1); line-height: 1.55; }
.cs-sources .caption { margin: 0 0 20px; }
.cs-sources li { break-inside: avoid; }
.cs-sources li + li { margin-top: 6px; }
@media (min-width: 960px) { .cs-sources ol { columns: 2; column-gap: clamp(40px, 5vw, 80px); } }
.cs-sources a { text-decoration: underline; text-underline-offset: 2px; }

.next { margin-top: clamp(64px, 10vw, 128px); }
.next__link {
  display: grid; gap: 20px; align-items: center;
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: 12px;
  transition: background-color 0.3s var(--ease);
}
@media (min-width: 720px) { .next__link { grid-template-columns: 280px 1fr auto; padding: 12px 32px 12px 12px; } }
.next__link:hover { background: var(--surface-2); }
.next__link .ph { border-radius: calc(var(--radius-xl) - 12px); }
.next__text { padding: 4px 12px; }
.next__text h2 { margin-top: 6px; font-size: var(--step-2); }
.next__link .btn { margin: 0 12px 12px; justify-self: start; }
@media (min-width: 720px) { .next__link .btn { margin: 0; } }

/* ---------- About page ---------- */

.about-hero { display: grid; gap: clamp(28px, 5vw, 64px); padding-block: clamp(40px, 8vw, 104px) clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 860px) {
  .about-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  /* name sits level with the top of the portrait, tags with its bottom */
  .about-intro { display: flex; flex-direction: column; justify-content: space-between; }
  /* if the text runs taller than 4:5, the portrait grows to match it */
  .about-hero .about-portrait { width: 100%; min-height: 100%; }
}
.about-hero .ph { --ratio: 4 / 5; border-radius: var(--radius-xl); }
/* tablets stack the portrait over the text, so a wider crop keeps it from filling the whole screen */
@media (min-width: 600px) and (max-width: 859px) { .about-hero .about-portrait { aspect-ratio: 3 / 2; } .about-hero .about-portrait .frame__img { object-position: 50% 22%; } }
.about-portrait .frame__img { object-position: 50% 30%; }
/* slow side-to-side twist, pivoting from the bottom edge */
.about-portrait { transform-origin: 50% 100%; animation: portrait-twist 6s ease-in-out infinite; }
@keyframes portrait-twist {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.about-hero h1 {
  font-size: clamp(3.2rem, 1.4rem + 7vw, 8.5rem); font-weight: 500;
  letter-spacing: -0.055em; line-height: 0.88;
}
.about-hero h1 span { display: block; }
.about-surname {
  color: var(--ink);
}

.about-hero .prose {
  margin-top: 24px; max-width: 34em;
}
.about-hero .prose p:first-child { color: var(--ink); font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.025em; }
.about-hero .prose p:not(:first-child) { color: var(--muted); }

.about-tags { margin-top: 32px; gap: 8px; }
.about-tags .pill {
  height: 36px; padding: 0 16px;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.about-tags .pill:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: translateY(-2px); }
/* pills follow the column in, one after another */
.js .about-intro .about-tags .pill { opacity: 0; transform: translateY(10px); }
.js .about-intro.is-in .about-tags .pill {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  transition-delay: calc(0.45s + var(--i, 0) * 0.06s);
}
.js .about-intro.is-in .about-tags .pill:hover { transform: translateY(-2px); transition-delay: 0s; }
.about-tags .pill:nth-child(2) { --i: 1; }
.about-tags .pill:nth-child(3) { --i: 2; }
.about-tags .pill:nth-child(4) { --i: 3; }
.about-tags .pill:nth-child(5) { --i: 4; }

/* ---------- About: process ---------- */

.process { border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 72px); }
.process__head { display: grid; gap: 12px; margin-bottom: clamp(24px, 3vw, 36px); }
.process__head h2 { font-size: var(--step-3); }
.process__head p:last-child { color: var(--muted); max-width: none; font-size: var(--step-1); line-height: 1.5; }

.process-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }

.process-step {
  display: flex; flex-direction: column;
  padding: 6px 6px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.process-step__art {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius-lg) - 6px);
  background: #efefed;
  overflow: hidden;
}

.process-step__body { padding: 14px 10px 0; }
.process-step__num {
  display: block; color: var(--muted);
  font-size: 0.75rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.process-step h3 { margin-top: 6px; font-size: 1rem; letter-spacing: -0.02em; line-height: 1.25; }
.process-step p { margin-top: 4px; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
@media (max-width: 559px) { .process-step__body { padding: 12px 6px 0; } .process-step h3 { font-size: 0.9375rem; } }

.process-step__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
@media (hover: hover) { .process-step:hover .process-step__art img { transform: scale(1.03); } }

.list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.list li {
  display: flex; gap: 16px; align-items: baseline;
  padding-block: 18px; border-top: 1px solid var(--line);
  font-size: var(--step-1); letter-spacing: -0.015em; line-height: 1.4;
}
.list li:last-child { border-bottom: 1px solid var(--line); }
.list li span { flex: none; width: 28px; color: var(--muted); font-size: var(--step--1); font-weight: 500; font-variant-numeric: tabular-nums; }
.list-title { font-size: var(--step-2); margin-bottom: 20px; }

/* phones: a row of cards that swipes sideways and runs to the screen edges, with the next card peeking in */
@media (max-width: 559px) {
  .process-steps, .cs-cards--row {
    display: grid; gap: 10px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .process-steps::-webkit-scrollbar, .cs-cards--row::-webkit-scrollbar { display: none; }
  .process-steps > *, .cs-cards--row > * { scroll-snap-align: start; }
}

/* ---------- Contact page ---------- */

.contact { display: grid; gap: clamp(32px, 5vw, 72px); padding-block: clamp(40px, 8vw, 104px) clamp(16px, 3vw, 32px); align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: 5fr 6fr; } }
.contact h1 {
  font-size: clamp(3.2rem, 1.4rem + 7vw, 8.5rem);
  letter-spacing: -0.055em; line-height: 0.88;
}
.contact__lede { margin-top: 28px; max-width: 30em; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; letter-spacing: -0.012em; }
.contact__details { display: grid; margin: 40px 0 0; max-width: 30em; }
.contact__details > div {
  display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center;
  min-height: 56px; padding-block: 12px; border-top: 1px solid var(--line);
}
.contact__details > div:last-child { border-bottom: 1px solid var(--line); }
/* small phones: label above value, so the email never breaks mid-word */
@media (max-width: 400px) { .contact__details > div { grid-template-columns: 1fr; gap: 4px; } }
.contact__details dt { color: var(--muted); font-size: var(--step--1); font-weight: 500; }
.contact__details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.contact__details dd a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: text-decoration-color 0.25s var(--ease); }
.contact__details dd a:hover { text-decoration-color: currentColor; }

.contact__card {
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: clamp(20px, 4vw, 48px);
}

.contact-form { display: grid; gap: 22px; }
.contact-form[hidden] { display: none; }
.contact-form__row { display: grid; gap: 22px; }
@media (min-width: 640px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }
.contact-form__label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 0 4px; font-size: 0.875rem; font-weight: 500; }
.contact-form__topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.contact-form__topics .tags { gap: 8px; }

.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--bg);
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.chip:hover span { color: var(--ink); border-color: var(--surface-2); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.field__optional { color: var(--muted); font-weight: 400; }
.field input,
.field textarea {
  display: block; width: 100%;
  padding: 0 16px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--bg);
  font: inherit; color: var(--ink); letter-spacing: -0.01em;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input { height: 52px; }
.field textarea { min-height: 168px; padding-block: 14px; resize: vertical; line-height: 1.5; }
.field input:hover,
.field textarea:hover { border-color: var(--surface-2); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(10 10 10 / 0.08); }
.field__error { display: none; margin-top: 8px; padding: 0 4px; color: #c2361f; font-size: var(--step--1); font-weight: 500; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: #c2361f; }
.field.is-invalid .field__error { display: block; }

.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.contact-form__actions .btn { height: 52px; padding: 0 26px; }
.contact-form__actions .btn[disabled] { opacity: 0.6; cursor: progress; }
.contact-form__status { color: var(--muted); font-size: 0.875rem; }
.contact-form__status.is-error { color: #c2361f; }

.contact-sent { display: grid; justify-items: start; gap: 14px; padding-block: clamp(24px, 6vw, 72px); outline: none; }
.contact-sent[hidden] { display: none; }
.contact-sent__mark {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px;
  border-radius: 50%; background: var(--ink); color: var(--bg);
}
.contact-sent__mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-sent h2 { font-size: var(--step-3); }
.contact-sent p { color: var(--ink-2); font-size: var(--step-1); }
.contact-sent .btn { margin-top: 10px; }

.site-footer--slim { padding-block: clamp(32px, 5vw, 64px) 28px; }

/* ---------- Reveal on scroll ---------- */

.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .about-intro .about-tags .pill { opacity: 1; transform: none; }
}

/* ---------- Demo video ---------- */

/* Covers a demo video until it's started */
.cs-video { position: relative; }
.cs-video__start {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  padding: 0; border: 0; cursor: pointer;
  background: rgb(10 10 10 / 0.12);
  transition: background-color 0.4s var(--ease);
}
.cs-video__start:hover { background: rgb(10 10 10 / 0.2); }
.cs-video__start .btn { box-shadow: var(--shadow-md); }
/* Custom player bar: the scrubber is split into one segment per demo stage */
.cs-player {
  position: absolute; inset: auto 0 0; z-index: 2;
  padding: 64px 16px 10px;
  color: #fff;
  background: linear-gradient(to top, rgb(10 10 10 / 0.72), rgb(10 10 10 / 0.38) 55%, rgb(10 10 10 / 0));
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.cs-video.is-active .cs-player,
.cs-video.is-paused .cs-player,
.cs-player:has(:focus-visible) { opacity: 1; }
.cs-video.has-player:not(.is-active):not(.is-paused) { cursor: none; }
.cs-video.has-player video { cursor: pointer; }
.cs-player__track {
  position: relative; display: flex; gap: 3px;
  height: 16px; align-items: center;
  cursor: pointer; touch-action: none;
  border-radius: 0;
}
.cs-player__seg {
  position: relative; flex: 1 1 0; height: 4px; overflow: hidden;
  background: rgb(255 255 255 / 0.32);
  transition: height 0.15s var(--ease);
}
.cs-player__seg:first-child { border-radius: 2px 0 0 2px; }
.cs-player__seg:nth-last-child(2) { border-radius: 0 2px 2px 0; }
.cs-player__track:hover .cs-player__seg { height: 6px; }
.cs-player__seg:hover { height: 8px !important; }
.cs-player__fill,
.cs-player__hover {
  position: absolute; inset: 0;
  transform: scaleX(0); transform-origin: left;
}
.cs-player__hover { background: rgb(255 255 255 / 0.35); }
.cs-player__fill { background: #fff; }
.cs-player__tip {
  position: absolute; bottom: 22px; left: 0;
  display: grid; justify-items: center; gap: 2px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: rgb(10 10 10 / 0.8); white-space: nowrap;
  font-size: 0.8125rem; line-height: 1.2;
  transform: translateX(-50%);
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.cs-player__tip-title:empty { display: none; }
.cs-player__tip-time { opacity: 0.7; font-variant-numeric: tabular-nums; }
.cs-player__track:hover .cs-player__tip { opacity: 1; }
.cs-player__row { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 0.875rem; }
.cs-player__btn {
  display: grid; place-items: center;
  width: 36px; height: 36px; margin-left: -8px; padding: 0;
  border: 0; border-radius: var(--radius-pill);
  background: none; color: inherit; cursor: pointer;
}
.cs-player__btn:last-child { margin: 0 -8px 0 auto; }
.cs-player__btn:hover { background: rgb(255 255 255 / 0.15); }
.cs-player__btn svg { width: 20px; height: 20px; }
.cs-player__btn[data-play] svg { fill: currentColor; }
.cs-player__btn[data-full] svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-player__time { font-variant-numeric: tabular-nums; }
.cs-player__stage:not(:empty)::before { content: "\00b7"; margin-right: 12px; opacity: 0.7; }
.cs-player :focus-visible { outline-color: #fff; }
@media (max-width: 640px) {
  .cs-player { padding: 28px 12px 2px; }
  .cs-player__row { margin-top: 0; gap: 8px; font-size: 0.8125rem; }
  .cs-player__btn { width: 32px; height: 32px; }
  .cs-player__btn svg { width: 18px; height: 18px; }
}
.cs-video:fullscreen { border-radius: 0; aspect-ratio: auto; }
.cs-video:fullscreen video { object-fit: contain; background: #000; }

/* ---------- Lightbox (work pages) ---------- */

.is-zoomable { cursor: zoom-in; }
.is-zoomable .frame__img { transition: transform 0.6s var(--ease); }
.is-zoomable:hover .frame__img { transform: scale(1.015); }
.has-lightbox { overflow: hidden; }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--surface);
  color: var(--ink);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { animation: lightbox-in 0.25s var(--ease); }
@keyframes lightbox-in { from { opacity: 0; } }
.lightbox__figure {
  display: grid; place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: 100%; height: 100%; margin: 0;
  padding: 72px clamp(16px, 6vw, 96px);
  cursor: zoom-out;
}
.lightbox__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--bg);
  cursor: default;
}
.lightbox__count {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums;
}
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--ink);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background 0.15s;
}
.lightbox__btn:hover { background: var(--surface-2); }
.lightbox__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close { top: 14px; right: 16px; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.lightbox.is-single .lightbox__prev,
.lightbox.is-single .lightbox__next,
.lightbox.is-single .lightbox__count { display: none; }
@media (max-width: 640px) {
  .lightbox__figure { padding: 64px 12px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 12px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: none; }
  .is-zoomable .frame__img { transition: none; }
}