/* ==========================================================================
   PORTFOLIO — VISUAL SYSTEM
   Dark-first editorial: near-black base, one cream interlude section,
   a single rust/redline accent. Huge thin display sans for the hero,
   an italic-leaning serif for section heads and quotes, mono for labels.
   Section themes alternate (dark → cream → dark) and motion runs on a
   shared custom easing curve, matching the reference's rhythm.
   ========================================================================== */

:root {
  /* base theme = dark */
  --paper: #0D0D0C;
  --paper-dim: #171613;
  --ink: #EAE8E1;
  --ink-soft: #C9C7BE;
  --muted: #8A877E;
  --line: rgba(234, 232, 225, 0.16);

  /* cream interlude, applied per-section via .theme-sheet */
  --sheet: #EAE8E1;
  --sheet-dim: #DEDCD3;
  --ink-on-sheet: #171613;
  --ink-soft-on-sheet: #4A4841;
  --muted-on-sheet: #8A877E;
  --line-on-sheet: rgba(13, 13, 12, 0.14);

  --accent: #C33F27;
  --accent-soft: #D9563C;

  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-label: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-gap: clamp(3.5rem, 9vw, 8rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.theme-sheet {
  --paper: var(--sheet);
  --paper-dim: var(--sheet-dim);
  --ink: var(--ink-on-sheet);
  --ink-soft: var(--ink-soft-on-sheet);
  --muted: var(--muted-on-sheet);
  --line: var(--line-on-sheet);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .grain-overlay { display: none; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s var(--ease);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: #FAF4EF;
  padding: 0.75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: var(--gutter); top: var(--gutter); }

/* ---------- Grain overlay ---------- */
.grain-overlay {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: grain-shift 9s steps(8) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -3%); }
  20% { transform: translate(3%, 2%); }
  30% { transform: translate(-4%, 1%); }
  40% { transform: translate(2%, -2%); }
  50% { transform: translate(-1%, 3%); }
  60% { transform: translate(4%, -1%); }
  70% { transform: translate(-3%, -2%); }
  80% { transform: translate(1%, 2%); }
  90% { transform: translate(-2%, 1%); }
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Header ----------
   No background/blur/border of its own — it reads as part of whatever
   section sits behind it (the hero, on load) rather than a distinct bar. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  background: transparent;
}
.site-header .mark {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #EAE8E1;
  transition: color 0.25s var(--ease);
}
.header-right { display: flex; align-items: center; gap: 1.75rem; }
.local-time {
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: #8A877E;
  letter-spacing: 0.03em;
  transition: color 0.25s var(--ease);
}
.site-header .cta {
  font-family: var(--font-label);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #EAE8E1;
  border-bottom: 1px solid #EAE8E1;
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.site-header .cta:hover { color: var(--accent-soft); border-color: var(--accent-soft); }

/* Still no background — only the text darkens when a light (.theme-sheet)
   section is scrolled behind the header, so it stays legible there too. */
.site-header.on-light .mark { color: #171613; }
.site-header.on-light .local-time { color: #4A4841; }
.site-header.on-light .cta { color: #171613; border-bottom-color: #171613; }
.site-header.on-light .cta:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 640px) {
  .site-header { padding: 0.85rem 1rem; }
  .site-header .mark { font-size: 0.95rem; white-space: nowrap; }
  .header-right { gap: 1rem; }
  .local-time { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 12vw, 9rem) var(--gutter) clamp(2.5rem, 6vw, 5rem);
}
/* No seam into whatever section follows the hero directly — both are the
   same near-black tone, so the hairline that normally separates adjacent
   sections would just read as a stray line rather than a real boundary. */
.hero + section { border-top: none; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,12,0.15) 0%, rgba(13,13,12,0.55) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }
.hero .eyebrow {
  font-family: var(--font-label);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #B9B6AC;
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 10vw, 8.5rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0 0 1.75rem;
  max-width: 20ch;
  color: #EAE8E1;
}
.hero h1 span { display: block; font-weight: 400; font-style: normal; color: rgba(234, 232, 225, 0.5); }
.hero p {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: #C9C7BE;
  max-width: 44ch;
  margin: 0 0 2rem;
}
.hero .meta-row {
  display: flex; gap: 2.5rem; flex-wrap: wrap;
  font-family: var(--font-label);
  font-size: 0.78rem; color: #8A877E;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ---------- Homepage hero override ----------
   Background recreates drowningdot.com's hero exactly: a hidden wordmark on
   an offscreen canvas, covered by vertical accent-colored "pleats" that lift
   and slide aside near the cursor (scroll-driven sweep on touch), revealing
   the wordmark underneath — see the pleat IIFE in index.html. Fixed height
   covers the first fold on every screen size. Type treatment (lowercase,
   bold/italic contrast) kept from the prior pass; only colors flip back
   to light-on-dark so text reads over the dark canvas. */
#top.hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(3.5rem, 13vw, 9rem) var(--gutter) clamp(2.5rem, 7vw, 5.5rem);
}
#top.hero::after { content: none; }

/* CSS fallback matching the canvas's base layer exactly — shown briefly
   before the pleat script paints, and as the degraded result if it can't
   run at all (no canvas support, JS disabled). Violet and black only,
   alternating top to bottom, violet at top settling to black at the
   bottom — so the rust pleats read as the sole accent rather than
   competing with a second warm hue underneath them. */
.hero-gradient {
  background: linear-gradient(
    180deg,
    #53438B 0%,
    #0D0D0C 17%,
    #392B60 33%,
    #0D0D0C 50%,
    #231437 67%,
    #0D0D0C 83%,
    #0D0D0C 100%
  );
}
#top .pleat {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
#top .pleat canvas { display: block; }
#top.hero .eyebrow {
  font-family: var(--font-label);
  color: #B9B6AC;
}
#top.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 9vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: #EAE8E1;
}
#top.hero h1 .line1 { display: block; font-weight: 700; font-style: normal; color: #EAE8E1; }
#top.hero h1 .line2 {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: rgba(234, 232, 225, 0.6);
}
#top.hero p {
  color: #C9C7BE;
}
#top.hero .meta-row {
  font-family: var(--font-label);
  color: #8A877E;
}

/* Restrained load-in: fade + slide-up, staggered per line via JS class toggle */
#top .hero-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#top .hero-fade.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Marquee ---------- */
.marquee-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  padding: 1.1rem 0;
  background: var(--paper);
}
.marquee-track {
  display: inline-flex;
  animation: marquee 28s linear infinite;
}
.marquee-track span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.5vw, 1.7rem);
  letter-spacing: -0.01em;
  padding: 0 2.25rem;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.marquee-track span:hover { color: var(--accent-soft); }
.marquee-track span::after { content: "—"; margin-left: 2.25rem; color: var(--accent); font-style: normal; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Section shell ---------- */
section { padding: var(--section-gap) 0; background: var(--paper); color: var(--ink); transition: background 0.4s var(--ease), color 0.4s var(--ease); }
section + section { border-top: 1px solid var(--line); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); flex-wrap: wrap;
}
.section-head .index {
  font-family: var(--font-label); font-size: 0.78rem;
  color: var(--accent-soft); letter-spacing: 0.08em;
}
.section-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  letter-spacing: -0.01em;
  margin: 0.35rem 0 0;
  max-width: 20ch;
  color: var(--ink);
}
.section-head p { color: var(--muted); max-width: 38ch; margin: 0; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Voice (type-swap demo) ---------- */
#voice {
  /* Padded well beyond the generic section rhythm so the section alone
     covers roughly three-quarters of the viewport height on load. */
  padding-top: clamp(4rem, 20vh, 10rem);
  padding-bottom: clamp(4rem, 20vh, 10rem);
  min-height: 75vh;
  display: flex;
  align-items: center;
}
#voice .wrap { width: 100%; }
.voice-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.voice-left .index {
  font-family: var(--font-label); font-size: 0.78rem;
  color: var(--accent-soft); letter-spacing: 0.08em;
  margin: 0 0 1rem;
}
.voice-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  color: var(--ink);
  transition: font-family 0.15s var(--ease), font-weight 0.15s var(--ease);
}
.voice-headline .line1, .voice-headline .line2 { display: block; }
.voice-headline.is-sans { letter-spacing: -0.02em; }
.voice-sub { color: var(--muted); max-width: 40ch; margin: 0 0 2rem; }

.voice-ref { display: flex; align-items: center; gap: 0.85rem; }
.voice-ref-thumb {
  width: 3.25rem; height: 3.25rem; flex: none;
  border-radius: 14px;
  background: var(--paper-dim);
  border: 1px solid var(--line);
}
.voice-ref-name {
  font-family: var(--font-label); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}

.voice-right { border-top: 1px solid var(--line); }
.voice-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.3rem 0; border-bottom: 1px solid var(--line);
  cursor: default;
  transition: border-color 0.25s var(--ease);
}
.voice-row:hover, .voice-row:focus-visible { border-color: var(--accent); outline: none; }
.voice-sample {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--muted);
  transition: color 0.2s var(--ease), font-weight 0.2s var(--ease);
}
.voice-font-serif { font-family: var(--font-serif); }
.voice-font-sans { font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 700; }
.voice-font-italic { font-family: var(--font-serif); font-style: italic; }
.voice-row:hover .voice-sample, .voice-row:focus-visible .voice-sample { color: var(--ink); }
.voice-label {
  font-family: var(--font-label); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); flex: none;
  transition: color 0.2s var(--ease);
}
.voice-row:hover .voice-label, .voice-row:focus-visible .voice-label { color: var(--accent-soft); }

@media (max-width: 900px) {
  .voice-grid { grid-template-columns: 1fr; }
  .voice-left { margin-bottom: 0.5rem; }
}
@media (max-width: 640px) {
  .voice-row { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1rem 0; }
}

/* ---------- Work Grid (cream interlude section) ---------- */
.work-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.work-preview { position: sticky; top: calc(4.5rem + 1.5rem); }
.work-thumb {
  width: 100%;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: var(--font-label); font-size: 0.72rem; color: var(--muted);
  text-align: center; padding: 1rem;
  filter: grayscale(1);
  transition: width 0.35s var(--ease), height 0.35s var(--ease),
    filter 0.35s var(--ease), border-color 0.35s var(--ease);
}
.work-thumb.is-active { filter: grayscale(0); border-color: var(--accent-soft); }
.work-thumb-label {
  text-transform: uppercase; letter-spacing: 0.05em;
  transition: color 0.35s var(--ease);
}
.work-thumb.is-active .work-thumb-label { color: var(--accent); }

.work-list { border-top: 1px solid var(--line); }
.work-row {
  display: grid; grid-template-columns: 2.5rem 1fr auto;
  align-items: center; gap: 1.5rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--line);
  transition: padding-left 0.25s var(--ease);
}
.work-row:hover, .work-row:focus-visible { padding-left: 0.5rem; }
.work-row .num { font-family: var(--font-label); font-size: 0.78rem; color: var(--muted); }
.work-row .title-block h3 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem); margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
  transition: color 0.25s var(--ease);
}
.work-row:hover .title-block h3 { color: var(--accent); }
.work-row .title-block span { color: var(--muted); font-size: 0.95rem; }
.work-row .arrow {
  font-family: var(--font-label); font-size: 1.1rem; color: var(--accent);
  transition: transform 0.25s var(--ease);
}
.work-row:hover .arrow { transform: translateX(4px); }

/* ---------- Graphics Gallery: "takes" grid ----------
   Edge-to-edge 3-up grid of clickable tiles. Hover reveals a title/tag
   overlay over the image; click opens a fullscreen viewer that pages
   through every piece. */
.takes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 900px) { .takes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .takes-grid { grid-template-columns: 1fr; } }

.takes-tile {
  position: relative;
  display: block; width: 100%; margin: 0; padding: 0; border: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-dim);
  cursor: pointer;
}
.takes-placeholder {
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  border: 1px dashed var(--line);
}
.takes-placeholder-label {
  font-family: var(--font-label); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.takes-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(1.5px) grayscale(1) brightness(1.12) contrast(1.05);
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}
.takes-tile:hover .takes-img, .takes-tile:focus-visible .takes-img {
  filter: blur(0) grayscale(0) brightness(1) contrast(1);
  transform: scale(1.045);
}
/* Halftone dot screen sitting over every thumbnail, at rest and on hover —
   a repeating radial-gradient tiled at 3px, same trick a print halftone uses. */
.takes-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--ink) 30%, transparent 32%);
  background-size: 3px 3px;
  opacity: 0.5;
  pointer-events: none;
}
.takes-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem 1.15rem;
  background: linear-gradient(180deg, rgba(13, 13, 12, 0) 45%, rgba(13, 13, 12, 0.88) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.takes-tile:hover .takes-overlay, .takes-tile:focus-visible .takes-overlay { opacity: 1; }
.takes-overlay-title {
  display: block;
  font-family: var(--font-serif); font-weight: 400; font-size: 1.15rem;
  color: var(--ink); text-align: left;
}
.takes-overlay-tag {
  display: block;
  font-family: var(--font-label); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  margin-top: 0.2rem;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 13, 12, 0.94);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox-frame { width: min(1100px, 90vw); max-height: 78vh; }
.lightbox-img {
  display: block; width: 100%; max-height: 78vh;
  object-fit: contain; background: var(--paper-dim);
  filter: grayscale(0);
}
.lightbox-info {
  position: fixed; left: var(--gutter); bottom: 1.75rem;
  max-width: 60vw;
}
.lightbox-title {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--ink);
}
.lightbox-tag {
  display: block; font-family: var(--font-label); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  margin-top: 0.25rem;
}
.lightbox-controls {
  position: fixed; right: var(--gutter); bottom: 1.75rem;
  display: flex; align-items: center; gap: 0.85rem;
}
.lightbox-count {
  font-family: var(--font-label); font-size: 0.78rem; color: var(--muted);
}
.lightbox-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); color: var(--ink);
  font-size: 1rem; cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lightbox-btn:hover { border-color: var(--accent-soft); color: var(--accent-soft); }
.lightbox-close {
  font-family: var(--font-label); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink);
  background: none; border: none; border-bottom: 1px solid var(--ink);
  padding: 0.2rem 0; cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox-close:hover { color: var(--accent-soft); border-color: var(--accent-soft); }

@media (max-width: 640px) {
  .lightbox-info { position: static; text-align: center; max-width: none; margin-bottom: 1rem; }
  .lightbox-controls { position: static; justify-content: center; margin-top: 1rem; }
  .lightbox { flex-direction: column; padding: 1.5rem 1rem; overflow-y: auto; }
}

/* ---------- Testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.testimonial { border-left: 2px solid var(--accent); padding-left: 1.25rem; }
.testimonial p.quote {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 1.4rem; font-style: italic; line-height: 1.35; margin: 0 0 1rem;
  color: var(--ink);
}
.testimonial .who {
  font-family: var(--font-label); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}

/* ---------- Process (numbered rows intensify like a proof sheet) ---------- */
.process-list { counter-reset: step; border-top: 1px solid var(--accent); }
.process-step {
  position: relative;
  display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem;
  padding: 2rem 1.25rem; border-bottom: 1px solid var(--line);
  background: rgba(195, 63, 39, var(--step-tint, 0));
  transition: background 0.3s var(--ease);
}
.process-step:nth-child(1) { --step-tint: 0.05; }
.process-step:nth-child(2) { --step-tint: 0.10; }
.process-step:nth-child(3) { --step-tint: 0.16; }
.process-step:nth-child(4) { --step-tint: 0.23; }
.process-step:nth-child(5) { --step-tint: 0.30; }
.process-step:nth-child(6) { --step-tint: 0.38; }
.process-step .step-num { font-family: var(--font-label); font-size: 0.85rem; color: var(--accent-soft); padding-top: 0.2rem; }
.process-step h3 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem); margin: 0 0 0.5rem;
}
.process-step p { color: var(--ink-soft); max-width: 68ch; margin: 0; }
.process-step.meta-row { grid-template-columns: 8rem 1fr; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
}
/* Everything but the marquee lives in here, so the pool canvas (absolutely
   positioned, anchored to this wrapper's own bottom) stays confined to the
   links/contact block and never bleeds into the marquee sitting after it. */
.footer-main {
  position: relative; overflow: hidden;
  padding: 0 0 2rem;
}
.footer-main > .wrap { padding-top: clamp(2.5rem, 6vw, 4rem); position: relative; z-index: 2; }
.footer-main .pool-canvas {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 60%;
  z-index: 0; opacity: 0.85;
  pointer-events: none;
}
/* Case-study footer is much shorter (no marquee/links/big email line below
   it), so the ripple should cover its full height, not just the bottom 60%
   tuned for the taller landing-page footer. */
.cs-site-footer .pool-canvas { top: 0; bottom: auto; height: 100%; }

.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-bottom: 2.5rem; }
.footer-links a {
  font-family: var(--font-label); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
  display: inline-block;
}
.footer-links a:hover { border-color: var(--accent-soft); color: var(--accent-soft); transform: translateX(3px); }

.footer-contact { padding: 1.75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.footer-contact a {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.75rem, 6vw, 3.5rem);
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.footer-contact a:hover { color: var(--accent-soft); text-decoration: underline; }

.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-family: var(--font-label); font-size: 1rem; color: var(--muted);
}
.footer-bottom a { color: var(--muted); transition: color 0.25s var(--ease); }
.footer-bottom a:hover { color: var(--accent-soft); }
.footer-bottom-contact { display: flex; gap: 1.5rem; }

@media (max-width: 860px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-preview { display: none; }
}

@media (max-width: 640px) {
  .work-row { grid-template-columns: 2rem 1fr; }
  .work-row .arrow { display: none; }
  .process-step, .process-step.meta-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .hero .meta-row { flex-direction: column; gap: 0.5rem; }
}

/* ==========================================================================
   CASE STUDY — long-form narrative template
   Self-contained visual system, scoped under .cs-root so it doesn't touch
   the rust/dark tokens the rest of the site uses: a white page, a grayscale
   ink scale, no accent color, and every section rendered as a large-radius
   "panel" that stays flush until it scrolls into view, then gains a soft
   shadow and lifts a few pixels — the one motion cue on the page.
   ========================================================================== */

.cs-root {
  --cs-ink: #0A0A0A;
  --cs-ink-soft: #1A1A1A;
  --cs-ink-dim: #5A5A5A;
  --cs-ink-faint: #8A8A8A;
  --cs-paper: #FFFFFF;
  --cs-rule: #E6E6E6;
  --cs-surface-2: #F5F3EE;
  --cs-radius: 28px;
  --cs-shadow-pop: 0 0 40px 0 rgba(0, 0, 0, 0.10), 0 0 4px 0 rgba(0, 0, 0, 0.04);
  --cs-lift: -6px;
  --cs-max: 1120px;
  --cs-pad-x: 64px;
  --cs-pad-y: 56px;
  --cs-serif: var(--font-serif);
  --cs-sans: var(--font-display);
  --cs-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  background: var(--cs-paper);
  color: var(--cs-ink);
  font-family: var(--cs-sans);
}
@media (max-width: 640px) {
  .cs-root { --cs-pad-x: 28px; --cs-pad-y: 36px; }
}

/* ---------- Top nav: sticky, frosted, gains a hairline once scrolled ---------- */
.cs-topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--cs-ease);
}
.cs-topnav.is-scrolled { border-bottom-color: var(--cs-rule); }
.cs-topnav-inner {
  max-width: var(--cs-max); margin: 0 auto;
  padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px;
}
.cs-home { font-family: var(--cs-sans); font-weight: 500; letter-spacing: -0.01em; color: var(--cs-ink); }
.cs-crumb { font-family: var(--cs-sans); color: var(--cs-ink-dim); }
.cs-crumb b { color: var(--cs-ink); font-weight: 600; }

.cs-main { max-width: var(--cs-max); margin: 0 auto; padding: 64px 32px 96px; }
@media (max-width: 640px) {
  .cs-main { padding: 32px 18px 80px; }
}

/* ---------- Panel: the one repeating shape every section is built from ---------- */
.cs-panel {
  position: relative;
  background: var(--cs-paper);
  border-radius: var(--cs-radius);
  padding: var(--cs-pad-y) var(--cs-pad-x);
  margin: 28px 0;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transform: translateY(0);
  transition: box-shadow 0.55s var(--cs-ease), transform 0.55s var(--cs-ease);
}
.cs-panel.is-lifted { box-shadow: var(--cs-shadow-pop); transform: translateY(var(--cs-lift)); }
.cs-panel:first-child { margin-top: 0; }

/* ---------- Hero ----------
   Stays the site's existing dark gradient hero (not a white .cs-panel) —
   only the type scale, the reading-mode toggle, and the meta grid are
   restyled here to match the case-study system's proportions. */
.cs-hero {
  position: relative;
  border-radius: var(--cs-radius);
  padding-top: clamp(4.5rem, 11vw, 7rem);
  padding-bottom: 2.5rem;
}
.cs-hero h1 {
  font-family: var(--cs-serif); font-weight: 400; font-style: normal;
  font-size: clamp(2.25rem, 6vw, 4.25rem); line-height: 1.05;
  letter-spacing: -0.015em; color: #EAE8E1; margin: 0 0 24px; max-width: none;
}
.cs-hero h1 em { display: block; font-style: italic; font-weight: 400; color: var(--accent-soft); }
.cs-hero p {
  font-family: var(--cs-sans); color: #C9C7BE;
  letter-spacing: -0.01em; max-width: 780px;
  font-size: clamp(1.05rem, 2vw, 1.375rem); line-height: 1.45;
  margin: 0 0 3.5rem;
}

.cs-hero-toggle {
  position: absolute; top: 2.5rem; right: var(--gutter);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.cs-hero-toggle-track {
  position: relative; display: inline-flex;
  background: rgba(234, 232, 225, 0.16); border-radius: 100px; padding: 4px;
}
.cs-hero-toggle-thumb {
  position: absolute; top: 4px; left: 4px;
  height: calc(100% - 8px); width: calc(50% - 4px);
  background: #EAE8E1; border-radius: 100px;
  transition: transform 0.3s var(--cs-ease);
  pointer-events: none; z-index: 0;
}
.cs-hero-toggle-track[data-active="story"] .cs-hero-toggle-thumb { transform: translateX(100%); }
.cs-hero-toggle-btn {
  position: relative; z-index: 1;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 16px; border-radius: 100px;
  font-family: var(--cs-sans); font-size: 14px; font-weight: 500;
  color: rgba(234, 232, 225, 0.68);
  transition: color 0.2s var(--cs-ease);
}
.cs-hero-toggle-btn.is-active { color: #14140F; }
.cs-hero-toggle-ai {
  font-family: var(--cs-sans); font-size: 11px; letter-spacing: 0.04em;
  color: rgba(234, 232, 225, 0.55); opacity: 1; background: none; border: none;
  cursor: pointer; padding: 0; width: 100%; text-align: center;
  transition: color 0.2s var(--cs-ease);
}
.cs-hero-toggle-ai:hover, .cs-hero-toggle-ai.is-active { color: #EAE8E1; }
@media (max-width: 640px) {
  .cs-hero-toggle { position: static; align-items: flex-start; margin-bottom: 1.75rem; }
}

/* Timeline / Team / Role / Surface */
.cs-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  border-top: 1px solid rgba(234, 232, 225, 0.16); padding-top: 32px;
}
.cs-meta dt {
  font-family: var(--cs-sans); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em; color: #8A877E;
  margin: 0 0 0.5rem;
}
.cs-meta dd { font-family: var(--cs-serif); font-size: 1.2rem; color: #EAE8E1; margin: 0; }
@media (max-width: 640px) {
  .cs-meta { grid-template-columns: 1fr 1fr; }
}

/* ---------- Section label: bar + number + name ---------- */
.cs-tag {
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
  font-family: var(--cs-sans); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs-ink-faint);
}
.cs-tag-bar { flex: 0 0 36px; height: 1px; background: var(--cs-ink); }
.cs-tag-num { color: var(--cs-ink); }

/* Section headline — left-aligned, sits inside the panel like every other run of text */
.cs-panel h2 {
  font-family: var(--cs-serif); font-weight: 400; font-style: normal;
  font-size: clamp(1.75rem, 4.4vw, 3.25rem); line-height: 1.05;
  letter-spacing: -0.015em; color: var(--cs-ink); margin: 0 0 36px;
  max-width: 26ch;
}
.cs-panel h2 em { font-style: italic; color: var(--cs-ink-dim); }

/* Named sub-beat heading within a section */
.cs-subh {
  font-family: var(--cs-serif); font-style: italic; font-weight: 400;
  font-size: 1.75rem; letter-spacing: -0.01em; color: var(--cs-ink);
  margin: 3rem 0 1.1rem;
}
.cs-panel > .cs-subh:first-of-type { margin-top: 0; }

.cs-text p { font-size: 1.05rem; line-height: 1.7; color: var(--cs-ink-soft); margin: 0 0 1.4rem; }
.cs-text p:last-child { margin-bottom: 0; }
.cs-text strong { color: var(--cs-ink); font-weight: 600; }
.cs-text ol, .cs-text ul { padding-left: 1.3rem; margin: 0 0 1.4rem; color: var(--cs-ink-soft); }
.cs-text li { margin-bottom: 0.55rem; line-height: 1.65; }
.cs-text li strong { color: var(--cs-ink); }
.cs-short-only .cs-text { max-width: 72ch; }

/* Two-up row: narrative text beside an inset visual */
.cs-row {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;
  margin: 28px 0;
}
@media (max-width: 780px) {
  .cs-row { grid-template-columns: 1fr; }
}

/* Quick-summary stack: Problem / Solution / Impact, separated by hairlines */
.cs-triad { display: flex; flex-direction: column; gap: 18px; }
.cs-triad-row { padding-top: 28px; }
.cs-triad-row:first-child { padding-top: 0; border-top: none; }
.cs-triad-row:not(:first-child) { border-top: 1px solid var(--cs-rule); }
.cs-triad-tag { display: flex; align-items: baseline; gap: 12px; margin-bottom: 0.6rem; }
.cs-triad-mark {
  font-family: var(--cs-sans); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cs-ink-faint);
}

/* Full-width figure with literal caption */
.cs-figure { margin: 28px 0; }
.cs-figure-frame {
  aspect-ratio: 16 / 7; width: 100%;
  background: var(--cs-surface-2); border: 1px solid var(--cs-rule);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cs-sans); font-size: 0.78rem; color: var(--cs-ink-faint);
  text-align: center; padding: 1.5rem;
}
.cs-figure figcaption {
  margin-top: 0.85rem;
  font-family: var(--cs-sans); font-size: 0.78rem; color: var(--cs-ink-faint); line-height: 1.5;
}

/* Reflective "lesson" line that closes a section */
.cs-lesson { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--cs-rule); }
.cs-lesson p {
  font-family: var(--cs-serif); font-style: italic; font-weight: 400;
  font-size: 1.2rem; line-height: 1.5; color: var(--cs-ink); margin: 0;
}
.cs-lesson strong { font-style: normal; font-weight: 600; }

/* Reading-mode visibility: default = story mode. Short mode swaps full prose
   for a one-paragraph tl;dr per section. AI mode collapses everything down
   to a single standalone summary panel. */
.cs-short-only { display: none; }
[data-read-mode="short"] .cs-full-only { display: none; }
[data-read-mode="short"] .cs-short-only { display: block; }
.cs-ai-summary-panel { display: none; }
[data-read-mode="ai"] .cs-ai-summary-panel { display: block; }
[data-read-mode="ai"] .cs-panel.cs-section:not(.cs-ai-summary-panel) { display: none; }

/* ---------- Page end: other projects + slim contact footer ---------- */
.cs-pageend { text-align: center; color: var(--cs-ink-faint); font-family: var(--cs-sans); letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; margin-top: 80px; }
.cs-other-heading { margin-bottom: 48px !important; }
.cs-other-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 780px) {
  .cs-other-grid { grid-template-columns: 1fr; }
}
.cs-other-card {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0;
  min-height: 200px; padding: 36px;
  background: var(--cs-paper); border-radius: var(--cs-radius);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transform: translateY(0);
  transition: box-shadow 0.55s var(--cs-ease), transform 0.55s var(--cs-ease);
}
.cs-other-card.is-lifted { box-shadow: var(--cs-shadow-pop); transform: translateY(var(--cs-lift)); }
@media (max-width: 780px) {
  .cs-other-card { grid-template-columns: 1fr; min-height: auto; gap: 1.25rem; }
}
.cs-other-info { display: flex; flex-direction: column; gap: 10px; padding-right: 28px; }
.cs-other-eyebrow { font-family: var(--cs-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-ink-faint); }
.cs-other-title { font-family: var(--cs-serif); font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--cs-ink); margin: 0; }
.cs-other-image {
  height: 140px; border: 1px solid var(--cs-rule); border-radius: 14px;
  background: var(--cs-surface-2); overflow: hidden;
}

.cs-footer { text-align: left; text-transform: none; letter-spacing: normal; margin-top: 40px; }
.cs-footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--cs-sans); font-size: 17px;
  padding-top: 20px; border-top: 1px solid var(--cs-rule);
}
@media (max-width: 640px) {
  .cs-footer-inner { flex-direction: column; align-items: flex-start; gap: 0; }
}
.cs-footer-contact {
  display: flex; align-items: center; gap: 28px;
}
.cs-footer-social { display: flex; align-items: center; gap: 20px; }
@media (max-width: 640px) {
  .cs-footer-contact {
    flex-direction: column; align-items: flex-start; gap: 14px;
    width: 100%; border-bottom: 1px solid var(--cs-rule);
    margin-bottom: 14px; padding-bottom: 14px;
  }
  .cs-footer-social { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 4px; }
}
.cs-footer a { color: var(--cs-ink-soft); transition: color 0.2s var(--cs-ease); }
.cs-footer a:hover { color: var(--cs-ink); }
.cs-footer-social-label { color: var(--cs-ink-faint); font-size: 0.85em; margin-right: 0.3em; }