/* ==========================================================================
   Studio 369 — styles
   ========================================================================== */

:root {
  --bg: #ffffff;
  --paper: #f3f3f1;
  --ink: #0d0d0d;
  --muted: #a3a39e;
  --line: rgba(13, 13, 13, 0.14);
  --accent: #ff4a1c;

  --gutter: clamp(16px, 2.2vw, 36px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html.is-loading { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.45;
}

.label { color: inherit; opacity: 0.66; }

.section-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.arrow-box {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--ink);
  color: var(--bg);
  font-size: 22px;
  flex-shrink: 0;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.5s var(--ease);
}

/* Reveal ------------------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Loader — liquid chrome (site palette)
   A small fragment shader paints flowing high-key chrome with warm orange
   reflections; the pointer ripples it. Words stay in the site's Geist.
   No strobing; one flash at the climax.
   ========================================================================== */
.loader { position: fixed; inset: 0; z-index: 100; cursor: pointer; color: var(--ink); }
html:not(.js) .loader { display: none; }

/* Stage: the chrome canvas (rendered at reduced resolution, scaled up — chrome is smooth). */
.loader__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Fallback / pre-first-frame: a brushed-chrome gradient. */
  background:
    linear-gradient(172deg, #f4f3f0 0%, #c9c8c4 22%, #fbfaf8 38%, #8f8e8a 52%, #efeeea 66%, #b9b7b2 82%, #f6f5f2 100%);
  transition: opacity 0.25s;
}
.loader__chrome { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s ease; }
.loader__chrome.is-live { opacity: 1; }
.loader__stage::after { /* fine grain keeps the metal from looking plastic */
  content: "";
  position: absolute;
  inset: -12%;
  will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: multiply;
  animation: grain 0.9s steps(6) infinite;
  pointer-events: none;
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-5%, 3%, 0); } 40% { transform: translate3d(4%, -6%, 0); }
  60% { transform: translate3d(-2%, 6%, 0); } 80% { transform: translate3d(6%, 2%, 0); } 100% { transform: translate3d(0, 0, 0); }
}

/* A soft bright halo behind the words keeps black type crisp on the metal. */
.loader__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120vmax;
  height: 70vmax;
  margin: -35vmax 0 0 -60vmax;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(250, 249, 246, 0.82) 0%, rgba(250, 249, 246, 0.55) 22%, rgba(250, 249, 246, 0) 52%);
  transition: opacity 0.4s ease;
}

/* Words ---------------------------------------------------------------------- */
.loader__words {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: color 0.4s ease;
}
.lf {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
/* Each line is a mask; text rises into it and leaves out of the top. */
.lf__line { display: block; overflow: hidden; padding: 0.06em 0.08em 0.12em; margin: -0.06em 0 -0.12em; white-space: nowrap; }
.lf__in { display: inline-block; transform: translateY(115%); transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
.lf__in.is-in { transform: none; }
.lf.is-out .lf__in { transform: translateY(-115%); transition: transform 0.42s cubic-bezier(0.55, 0, 0.75, 0.2); transition-delay: 0s !important; }

.t-bold { font-size: min(11vw, 19vh); font-weight: 700; line-height: 0.9; letter-spacing: -0.065em; }
.t-thin { font-size: min(12.5vw, 21vh); font-weight: 200; line-height: 0.9; letter-spacing: -0.055em; }
.t-outline { font-size: min(9.5vw, 16vh); font-weight: 700; line-height: 0.9; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: max(1.4px, 0.11vw) var(--ink); }
.t-accent { color: var(--accent); }
.t-num {
  font-size: min(34vw, 58vh);
  font-weight: 100;
  line-height: 0.8;
  letter-spacing: -0.07em;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), font-weight 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.loader.is-bold .t-num { font-weight: 700; }

/* Climax: the orange iris opens over the chrome ------------------------------ */
.loader__iris {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.loader.is-slab .loader__iris { transform: scale(1); }
.loader.is-slab .loader__halo { opacity: 0; }

/* Landing slab: a full-screen rectangle that shrinks onto the hero band via transform. */
.loader__slab {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform-origin: 0 0;
  opacity: 0;
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.loader.is-morph { pointer-events: none; }
.loader.is-morph .loader__slab { opacity: 1; }
.loader.is-morph .loader__iris,
.loader.is-morph .loader__stage,
.loader.is-morph .loader__halo,
.loader.is-morph .loader__hud,
.loader.is-morph .loader__line { opacity: 0; }

.loader__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.loader.is-flash .loader__flash { animation: flash 0.38s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes flash { 0% { opacity: 0.42; } 100% { opacity: 0; } }

/* HUD: the site's mono labels */
.loader__hud { position: absolute; inset: var(--gutter); pointer-events: none; transition: opacity 0.25s; }
.loader__hud > * { position: absolute; }
.loader__tl { left: 0; top: 0; }
.loader__tr { right: 0; top: 0; font-variant-numeric: tabular-nums; }
.loader__bl { left: 0; bottom: 14px; display: flex; align-items: center; gap: 8px; }
.loader__bl b { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: rec 1.2s steps(1) infinite; }
.loader__br { right: 0; bottom: 14px; pointer-events: auto; cursor: pointer; font: inherit; color: inherit; opacity: 0.7; background: none; border: 0; padding: 0; }
.loader__br:hover { opacity: 1; text-decoration: underline; }

.loader__line {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  height: 1px;
  background: rgba(13, 13, 13, 0.14);
  transition: opacity 0.25s;
}
.loader__line i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* ==========================================================================
   Cursor
   ========================================================================== */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 0;
  height: 0;
  pointer-events: none;
  display: none;
}
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

.cursor::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.45s var(--ease), background 0.3s;
}
.cursor.is-link::before { transform: scale(2.4); background: var(--accent); }
.cursor.is-label::before { transform: scale(9); background: var(--accent); }
.cursor.is-dark::before { background: var(--bg); }
.cursor-light .cursor:not(.is-link):not(.is-label)::before { background: var(--bg); }
.nav-ink .cursor.is-label::before,
.nav-ink .cursor.is-link::before { background: var(--ink); }
.nav-ink .cursor__label { color: var(--accent); }

.cursor__label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: opacity 0.3s, transform 0.45s var(--ease);
}
.cursor.is-label .cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
}
.nav-ink .nav { mix-blend-mode: normal; color: var(--ink); }
.nav__logo { font-weight: 700; font-size: 19px; letter-spacing: -0.05em; justify-self: start; }
.nav__logo span { opacity: 0.45; margin: 0 1px; }

.nav__links { display: flex; gap: clamp(20px, 2.5vw, 40px); font-size: 14px; }
.nav__links a { position: relative; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__right { justify-self: end; display: flex; gap: 20px; align-items: center; }
.nav__menu { display: none; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 96px var(--gutter) var(--gutter);
  background: var(--ink);
  color: var(--bg);
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(3rem, 16vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.menu nav a .mono { color: var(--accent); letter-spacing: 0.04em; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--bg);
}

#hero-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.gl-ready #hero-gl { opacity: 1; }
.gl-shown [data-gl-rect] { visibility: hidden; }

.hero__band {
  position: absolute;
  left: 33%;
  right: 0;
  top: 52%;
  height: 25%;
  background: var(--accent);
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 92px var(--gutter) var(--gutter);
  pointer-events: none;
}
.hero__inner a { pointer-events: auto; }

.hero__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Width-led, but capped by height so short/wide screens keep room for the button below
     (two lines at 0.8 line-height = 1.6em; ~210px is the nav and the foot). */
  font-size: clamp(4.5rem, min(23.5vw, calc((100vh - 210px) / 1.6)), 34rem);
  font-size: clamp(4.5rem, min(23.5vw, calc((100svh - 210px) / 1.6)), 34rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.07em;
  margin: 0 -0.04em;
}
.hero__line { display: block; }
.hero__line--r { text-align: right; }
.hero__line > span { display: inline-block; }

.js .hero__line > span {
  transform: translateY(18%);
  opacity: 0;
  transition: transform 1.4s var(--ease), opacity 1s var(--ease);
}
.js .hero__line--r > span { transition-delay: 0.1s; }
.is-ready .hero__line > span { transform: none; opacity: 1; }
/* Coming from the loader: hero "369." sits still (no rise) and stays hidden until the loader's copy lands on it. */
.from-loader .hero__line--r > span { transition: none; transform: none; opacity: 1; visibility: hidden; }
.from-loader.hero-369-in .hero__line--r > span { visibility: visible; }
.from-loader:not(.hero-369-in) .hero__band { visibility: hidden; }

.hero__foot {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.hero__cta { display: flex; align-items: center; gap: 16px; }
.hero__cta:hover .arrow-box { background: var(--accent); color: var(--ink); transform: translateY(4px); }


/* ==========================================================================
   Statement — variable-weight type
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.statement {
  position: relative;
  padding: clamp(90px, 11vw, 180px) var(--gutter) clamp(70px, 8vw, 130px);
  overflow: hidden;
}

.statement__meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: rgba(13, 13, 13, 0.66);
}
.statement__readout { font-variant-numeric: tabular-nums; }
.statement__readout b { font-weight: 500; color: var(--ink); display: inline-block; min-width: 3.2ch; text-align: right; }
.statement__hint { justify-self: end; }
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }

.statement__title {
  margin: clamp(48px, 7vw, 110px) 0 clamp(56px, 8vw, 120px);
  font-size: clamp(3.4rem, 15vw, 17rem);
  font-weight: 200;
  line-height: 0.84;
  letter-spacing: -0.06em;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.statement__line { display: block; white-space: nowrap; }
.statement__line--r { text-align: right; }
.statement__title em { font-style: normal; color: var(--accent); }

/* Each glyph gets a fixed width (set in JS) so weight changes never reflow the line. */
.statement .ch { display: inline-block; text-align: center; }
.statement .ch--sp { width: 0.22em; }

.statement__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}
.statement__list li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 8px;
  padding: 20px 20px 22px 0;
  border-right: 1px solid var(--line);
}
.statement__list li:not(:first-child) { padding-left: 20px; }
.statement__list li:last-child { border-right: 0; }
.statement__list li > span:nth-child(1) { color: var(--accent); padding-top: 0.55em; }
.statement__list li > span:nth-child(2) {
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  transition: transform 0.6s var(--ease);
}
.statement__list li > span:nth-child(3) { grid-column: 2; opacity: 0.66; }
.statement__list li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.statement__list li:hover::before { transform: scaleX(1); }
.statement__list li:hover > span:nth-child(2) { transform: translateX(6px); }

/* ==========================================================================
   Studio / manifesto
   ========================================================================== */
.studio { padding: clamp(80px, 10vw, 160px) var(--gutter) clamp(80px, 10vw, 160px); }

.manifesto {
  margin-top: clamp(40px, 6vw, 90px);
  font-size: clamp(2.1rem, 5.6vw, 6.4rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-indent: 18%;
}
.manifesto s {
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}
.manifesto s::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 52%;
  height: 0.09em;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.manifesto s.is-lit::after { transform: scaleX(1); }

.js .manifesto .w { color: var(--muted); transition: color 0.35s linear; }
.js .manifesto .w.is-lit { color: var(--ink); }

.studio__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  margin-top: clamp(60px, 8vw, 120px);
  padding-left: 25%;
}
.studio__copy { font-size: clamp(16px, 1.3vw, 20px); max-width: 38ch; }
.studio__facts li {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.studio__facts li:last-child { border-bottom: 1px solid var(--line); }
.studio__facts li span:last-child { opacity: 0.66; }
/* The two USPs get the accent. */
.studio__facts li.is-usp span:first-child { color: var(--accent); }
.studio__facts li.is-usp span:last-child { opacity: 1; }
.statement__list li.is-usp > span:nth-child(2) { color: var(--accent); }
/* Laptops and up: the studio reads as one screen. Type scales with height too. */
@media (min-width: 901px) {
  .studio {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding-top: clamp(84px, 12svh, 128px);
    padding-bottom: clamp(40px, 7svh, 88px);
  }
  .manifesto {
    margin-top: clamp(24px, 5svh, 64px);
    font-size: clamp(2.1rem, min(4.9vw, 7.6svh), 6.4rem);
    text-indent: 14%;
  }
  .studio__grid {
    margin-top: auto;
    padding-top: clamp(28px, 5svh, 72px);
    padding-left: 14%;
    grid-template-columns: 1.15fr 1fr;
    align-items: end;
  }
  .studio__copy { max-width: 50ch; }
  .studio__facts li { padding: clamp(9px, 1.5svh, 14px) 0; }
}

/* ==========================================================================
   Work — pinned editorial filmstrip
   ========================================================================== */
.work { position: relative; }

.work__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 84px var(--gutter) 22px;
  overflow: hidden;
}

.work__bar,
.work__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.work__bar { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.work__bar > :last-child,
.work__foot > :last-child { justify-self: end; }

.work__stage {
  display: grid;
  grid-template-columns: minmax(250px, 23vw) 1fr;
  min-height: 0;
}

/* Side column ------------------------------------------------------------- */
.work__side {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--gutter) 10px 0;
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.work__heading {
  font-size: clamp(4rem, 8.4vw, 10rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.075em;
  margin-left: -0.05em;
}
.work__heading em { font-style: normal; color: var(--accent); }

.work__count {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font-size: clamp(4.4rem, 8vw, 9rem);
  font-weight: 200;
  line-height: 0.8;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.work__count .mono { font-size: 12px; letter-spacing: 0.04em; padding-bottom: 0.3em; opacity: 0.5; }

.work__meta { display: grid; }
.work__meta div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.work__meta dt { opacity: 0.66; }
.work__meta dd { font-size: 14px; min-width: 0; overflow: hidden; } /* never spill past the column rule */

/* Rolling values: children stack in one grid cell and slide through it. */
.roll { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.roll > span {
  grid-area: 1 / 1;
  display: block;
  white-space: nowrap;
  transition: transform 0.8s var(--ease);
}

/* Track ------------------------------------------------------------------- */
.work__viewport { position: relative; min-height: 0; overflow: hidden; }
.work__track {
  display: flex;
  align-items: center;
  gap: 5.5vw;
  width: max-content;
  height: 100%;
  padding: 0 14vw 0 5vw;
  will-change: transform;
}

.card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: skewX(var(--skew, 0deg));
}
.card--top { align-self: flex-start; margin-top: 4vh; }
.card--bottom { align-self: flex-end; margin-bottom: 3vh; }

.card__link { display: flex; flex-direction: column; gap: 16px; }

.card__media {
  position: relative;
  width: 40vh;
  aspect-ratio: 4 / 5;
  overflow: visible; /* shapes float free: no frame */
  transform: perspective(1200px) scale(var(--s, 0.92)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  filter: grayscale(1) contrast(1.05);
  transition: transform 0.7s var(--ease), filter 0.9s var(--ease);
}
.card--wide .card__media { width: 50vh; aspect-ratio: 5 / 4; }
.card--small .card__media { width: 27.5vh; }
.card.is-active .card__media { --s: 1; filter: none; }
.card__link:hover .card__media { transition: transform 0.25s ease-out, filter 0.9s var(--ease); }

/* Each shape floats on its own rhythm; a soft shadow on the floor breathes with it. */
.card { --fd: 6.6s; --fdl: 0s; }
.card:nth-child(2) { --fd: 7.6s; --fdl: -2.4s; }
.card:nth-child(3) { --fd: 5.8s; --fdl: -1.1s; }
.card:nth-child(4) { --fd: 7.1s; --fdl: -3.3s; }
.card:nth-child(5) { --fd: 6.2s; --fdl: -0.6s; }
.card:nth-child(6) { --fd: 8s; --fdl: -4.2s; }
.card:nth-child(7) { --fd: 6.9s; --fdl: -1.8s; }
.card:nth-child(8) { --fd: 7.3s; --fdl: -2.9s; }
.card__media::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -6%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(13, 13, 13, 0.24), rgba(13, 13, 13, 0) 70%);
  animation: floor var(--fd) ease-in-out var(--fdl) infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes floor { from { transform: scaleX(0.78); opacity: 0.5; } to { transform: scaleX(1.06); opacity: 1; } }

.card__inner {
  position: absolute;
  inset: 0;
  container-type: size;
  animation: float var(--fd) ease-in-out var(--fdl) infinite alternate;
  will-change: transform;
}
@keyframes float {
  from { transform: translate3d(0, -3.5%, 0) rotate(-1.8deg); }
  to { transform: translate3d(0, 3%, 0) rotate(1.6deg); }
}
/* No frame: the covers are just their shapes. */
.card__inner .poster { background: none; padding: 0; color: var(--ink); box-shadow: none; }
.card__inner .poster::after { display: none; }
.card__inner .poster--ad .clap { left: 4%; top: 6%; width: 92%; height: 88%; }
.card__inner .poster--ai .net { left: 2%; top: 6%; width: 96%; height: 88%; }
.card__inner .poster--corp .city { left: 0; top: 6%; bottom: auto; width: 100%; height: 88%; -webkit-mask: none; mask: none; }
.card__inner .poster--brand .mark { left: 4%; top: 8%; width: 92%; height: 84%; }
.card__inner .poster--doc .lens { top: 4%; width: 92%; height: 92%; }
.card__inner .poster--social .phone { left: 0; top: 2%; width: 100%; height: 96%; }
.card__inner .poster--web .browser { top: 20%; height: 56%; box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) calc(-3 * var(--u)) rgba(0, 0, 0, 0.18); }
.card__inner .poster--web .cursor-art { left: 42%; top: 52%; width: 26%; }
/* Layered parallax (--par set per frame in JS): type and graphics drift at different rates. */
.card__inner .poster > b,
.card__inner .poster > i { transform: translate3d(calc(var(--par, 0) * -26px), 0, 0); }
.card__inner .poster > .art { transform: translate3d(calc(var(--par, 0) * 44px), 0, 0); }

.card__caption {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 6px;
  width: 0;
  min-width: 100%; /* captions never widen the frame */
}
.card__caption .card__title { grid-column: 1 / -1; grid-row: 2; }
.card__desc {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 4px;
  max-width: 38ch;
  font-size: 13.5px;
  line-height: 1.45;
  opacity: 0.68;
}
.card__caption > .mono:last-child { grid-row: 1; grid-column: 2; }
.card__caption .mono { opacity: 0.66; }
.card__title {
  font-size: clamp(1.25rem, 1.9vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.1;
}
.card--small .card__title { font-size: clamp(1.1rem, 1.5vw, 1.6rem); }
/* Each word is its own one-line clip window, so titles can wrap. */
.card__title .word { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: top; }
/* Letter roll: each glyph carries an orange copy below itself via text-shadow. */
.card__title .ch {
  display: inline-block;
  text-shadow: 0 1.1em var(--accent);
  transition: transform 0.55s var(--ease) calc(var(--i) * 16ms);
}
.card__link:hover .card__title .ch,
.card__link:focus-visible .card__title .ch { transform: translateY(-1.1em); }

/* Closing card */
/* 3D mode: one shared canvas draws chrome + glass objects into each card's frame. */
.work__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; }
.work.is-3d .card:not(.card--cta) .card__inner { visibility: hidden; } /* flat shapes stay as the fallback */
.work.is-3d .card:not(.card--cta) .card__media { filter: none; }

/* Closing card: a floating orange disc. */
.card--cta .card__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5%;
  aspect-ratio: 1;
  padding: 12%;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  text-align: center;
  filter: none;
  --s: 1;
}
.card--cta .card__media b {
  font-size: clamp(2rem, 4vw, 4.2rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.065em;
}
.card--cta .card__media b span { color: #fff; }
.card--cta .arrow-box { background: var(--ink); color: var(--accent); border-radius: 50%; }
.card--cta .card__link:hover .arrow-box { transform: translateX(8px); }

/* Footer: progress with project ticks -------------------------------------- */
.work__foot { padding-top: 14px; border-top: 1px solid var(--line); }
.work__ticks {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: clamp(240px, 36vw, 560px);
  padding-top: 10px;
}
.work__ticks::before,
.work__ticks i {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
}
.work__ticks i { background: var(--ink); transform: scaleX(0); transform-origin: left; }
.work__ticks span { opacity: 0.5; transition: opacity 0.4s, color 0.4s; }
.work__ticks span.is-active { opacity: 1; color: var(--accent); }

/* Grain: gives the flat CSS artwork a printed texture. */
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.35;
}

/* Posters: one CSS-art cover per discipline ------------------------------- */
.poster {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(7 * var(--u));
  /* 1 unit = 1% of the poster width in its native 4:5 frame; shrinks to fit wider frames. */
  --u: min(1cqi, 0.8cqh);
  container-type: size;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.poster b {
  position: relative;
  font-size: calc(22 * var(--u));
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.07em;
  text-transform: lowercase;
}
.poster i { position: relative; font-style: normal; font-size: max(8px, calc(4 * var(--u))); }
.poster .art { position: absolute; pointer-events: none; }

/* 01 Ad Film: a clapperboard on orange */
.poster--ad { background: var(--accent); }
.poster--ad .clap { left: 8%; right: 8%; top: 14%; height: 62%; width: 84%; }
.poster--ad b { margin-top: auto; font-size: calc(24 * var(--u)); letter-spacing: -0.05em; }

/* 02 AI Content: a neural network on ink */
.poster--ai { background: var(--ink); color: var(--bg); }
.poster--ai .net { left: 4%; right: 4%; top: 20%; width: 92%; height: 62%; }
.poster--ai b {
  font-size: calc(26 * var(--u));
  text-transform: none;
  color: transparent;
  -webkit-text-stroke: max(1px, calc(0.5 * var(--u))) var(--bg);
  letter-spacing: -0.04em;
}
.poster--ai i { margin-top: auto; background: var(--bg); color: var(--ink); padding: calc(1.2 * var(--u)) calc(2 * var(--u)); align-self: flex-start; }

/* 03 Corporate Film: a skyline under an orange sun */
.poster--corp { background: #f3f2ee; justify-content: flex-start; }
.poster--corp .city { left: 0; right: 0; bottom: 0; width: 100%; height: 64%; }
.poster--corp .city { -webkit-mask: linear-gradient(#000 88%, transparent); mask: linear-gradient(#000 88%, transparent); }
.poster--corp b { font-size: calc(13 * var(--u)); }
.poster--corp i { margin-top: calc(3 * var(--u)); opacity: 0.6; }

/* 04 Branding: a mark construction sheet */
.poster--brand { background: #fbfaf7; }
.poster--brand .mark { left: 12%; top: 12%; width: 76%; height: 64%; }
.poster--brand b { margin-top: auto; font-size: calc(22 * var(--u)); text-transform: none; letter-spacing: -0.06em; }
.poster--brand i { opacity: 0.6; }

/* 05 Documentary: a lens aperture on ink */
.poster--doc { background: var(--ink); color: var(--bg); justify-content: flex-end; }
.poster--doc .lens { left: 50%; top: 8%; width: 74%; height: 74%; transform: translate3d(calc(-50% + var(--par, 0) * 44px), 0, 0) !important; }
.poster--doc b {
  position: absolute;
  right: calc(5 * var(--u));
  top: calc(6 * var(--u));
  writing-mode: vertical-rl;
  font-size: calc(9 * var(--u));
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* 06 Social Media: a phone with a post, a heart and a comment */
.poster--social { background: #d6d6d1; justify-content: flex-end; }
.poster--social .phone { left: 4%; top: 4%; width: 92%; height: 76%; }
.poster--social b { font-size: calc(15 * var(--u)); }

/* 07 Website: a browser, and a big cursor clicking the button */
.poster--web { background: #f3f2ee; justify-content: flex-end; }
.poster--web .browser {
  left: calc(7 * var(--u));
  right: calc(7 * var(--u));
  top: calc(8 * var(--u));
  height: 52%;
  border: 1px solid var(--ink);
  border-radius: calc(1.5 * var(--u));
  background:
    radial-gradient(circle, var(--accent) 45%, transparent 50%) calc(2 * var(--u)) calc(1.5 * var(--u)) / calc(3 * var(--u)) calc(3 * var(--u)) no-repeat,
    radial-gradient(circle, var(--ink) 45%, transparent 50%) calc(5.5 * var(--u)) calc(1.5 * var(--u)) / calc(3 * var(--u)) calc(3 * var(--u)) no-repeat,
    radial-gradient(circle, var(--ink) 45%, transparent 50%) calc(9 * var(--u)) calc(1.5 * var(--u)) / calc(3 * var(--u)) calc(3 * var(--u)) no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 calc(6 * var(--u)) / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 10% 36% / 62% 12% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 10% 68% / 34% 16% no-repeat,
    linear-gradient(rgba(13, 13, 13, 0.3), rgba(13, 13, 13, 0.3)) 90% 62% / 36% 4% no-repeat,
    linear-gradient(rgba(13, 13, 13, 0.3), rgba(13, 13, 13, 0.3)) 90% 74% / 30% 4% no-repeat,
    #fff;
}
.poster--web .cursor-art { left: 40%; top: 38%; width: 24%; height: auto; filter: drop-shadow(0 calc(1.5 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.25)); }
.poster--web b { font-size: calc(30 * var(--u)); }
.poster--web i { margin-top: calc(3 * var(--u)); }

/* ==========================================================================
   369 method
   ========================================================================== */
.method {
  position: relative;
  height: 330vh;
  background: var(--paper);
}
.method__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--gutter);
  padding: 92px var(--gutter) var(--gutter);
  overflow: hidden;
}
.method__dots { width: 100%; height: 100%; display: block; min-height: 0; }

.method__side {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  border-left: 1px solid var(--line);
  padding-left: var(--gutter);
}
.method__head h2 {
  margin-top: 18px;
  font-size: clamp(2.4rem, 4.8vw, 5.6rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.06em;
}
.method__head h2 span { color: var(--muted); }

.method__steps { position: relative; align-self: center; min-height: 18rem; }
.step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease);
  pointer-events: none;
}
.step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.step.is-past { transform: translateY(-30px); }
.step__n b { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--accent); color: var(--ink); margin-right: 6px; }
.step h3 { font-size: clamp(1.6rem, 2.6vw, 2.8rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.step > p:not(.step__n) { max-width: 40ch; font-size: clamp(15px, 1.1vw, 17px); opacity: 0.75; }
.step__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 6px; }
.step__list li { padding: 10px 0; border-top: 1px solid var(--line); }

.method__progress { display: flex; align-items: center; gap: 16px; }
.method__bar { flex: 1; height: 2px; background: var(--line); }
.method__bar span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* ==========================================================================
   Finale — scroll-driven cinematic contact
   ========================================================================== */
.finale { position: relative; height: 460vh; background: var(--ink); }
.finale__anchor { position: absolute; left: 0; bottom: 100vh; height: 1px; width: 1px; }

.finale__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--bg);
}

/* Before the bars close: a quiet cue on white. */
.finale__cue {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--ink);
}
.finale__cue span { opacity: 0.5; }

/* Letterbox bars: close from top and bottom into black. */
.finale__bars i {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: var(--ink);
  transform: scaleY(0);
  will-change: transform;
}
.finale__bars i:first-child { top: 0; transform-origin: top; }
.finale__bars i:last-child { bottom: 0; transform-origin: bottom; }

/* Title card */
.finale__card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22em;
  font-size: clamp(3.2rem, 13vw, 16rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.07em;
  white-space: nowrap;
  will-change: transform, opacity;
}
.finale__word { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }
.finale__word em { font-style: normal; color: var(--accent); }

/* Iris: an orange circle that opens to reveal the answer. */
.finale__iris {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--accent);
  color: var(--ink);
  clip-path: circle(0px at 50% 50%);
  pointer-events: none;
}
.finale.is-open .finale__iris { pointer-events: auto; }

.finale__inner {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(16px, 3vh, 36px);
  padding: 92px var(--gutter) clamp(28px, 5vh, 56px);
}
.finale__top { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid rgba(13, 13, 13, 0.25); }

.finale__title {
  align-self: center;
  font-size: min(15vw, 24vh, calc((100vw - 2 * var(--gutter)) / 5.4));
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.075em;
  margin-left: -0.05em;
  transform-origin: left center;
}

.finale__ctawrap { will-change: transform, opacity; }
.finale__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.finale__email {
  font-size: clamp(1.4rem, 4.2vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  white-space: nowrap;
}
.finale__btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: clamp(64px, 7vw, 110px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
  font-size: clamp(22px, 2.2vw, 34px);
  transition: transform 0.5s var(--ease);
}
.finale__btn span { transition: transform 0.5s var(--ease); }
.finale__cta:hover .finale__btn span { transform: rotate(-45deg); }

.finale__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  font-size: 15px;
  will-change: transform, opacity;
}
.finale__grid > div { display: flex; flex-direction: column; gap: 4px; }
.finale__grid .mono { opacity: 0.8; margin-bottom: 6px; }
.finale__grid a {
  width: fit-content;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--ease);
}
.finale__grid a:hover { background-size: 100% 1px; }

/* Viewfinder HUD — difference blend keeps it legible on white, black and orange. */
.finale__hud {
  position: absolute;
  inset: 74px var(--gutter) var(--gutter);
  z-index: 4;
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
}
.finale__hud .c { position: absolute; width: 18px; height: 18px; border: 0 solid currentColor; }
.finale__hud .c--tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.finale__hud .c--tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.finale__hud .c--bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.finale__hud .c--br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.finale__scene, .finale__tc, .finale__rec, .finale__frame { position: absolute; }
.finale__scene { left: 28px; top: 4px; }
.finale__tc { right: 28px; top: 4px; font-variant-numeric: tabular-nums; }
.finale__rec { left: 28px; bottom: 4px; display: flex; align-items: center; gap: 8px; }
.finale__rec b { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: rec 1.2s steps(1) infinite; }
.finale__frame { right: 28px; bottom: 4px; }
@keyframes rec { 50% { opacity: 0; } }
/* The HUD steps aside once the answer is on screen. */
.finale.is-open .finale__hud { opacity: 0; transition: opacity 0.6s; }
.finale__hud { transition: opacity 0.6s; }

/* Reduced motion / no JS: just show the final frame. */
.finale.is-static { height: auto; }
.finale.is-static .finale__stage { position: relative; height: auto; min-height: 100svh; }
.finale.is-static .finale__iris { position: relative; clip-path: none; pointer-events: auto; min-height: 100svh; }
.finale.is-static .finale__card,
.finale.is-static .finale__bars,
.finale.is-static .finale__cue,
.finale.is-static .finale__hud { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--ink); color: var(--bg); padding: 0 var(--gutter) var(--gutter); overflow: hidden; container-type: inline-size; }
.footer__word {
  font-size: 19.5vw;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.055em;
  margin-left: -0.045em;
  padding-top: 0.06em;
  white-space: nowrap;
  width: max-content;
}
.footer__links { display: flex; gap: 20px; }
.footer__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(20px, 2vw, 32px);
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0.6;
}

/* ==========================================================================
   Discipline pages (open over the site from a Work card)
   ========================================================================== */
.dp { position: fixed; inset: 0; z-index: 70; background: var(--bg); color: var(--ink); will-change: clip-path; }
.dp[hidden] { display: none; }
.dp__inner { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) clamp(48px, 8vh, 96px); }

.dp__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.dp__close { display: inline-flex; gap: 10px; align-items: center; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 99px; transition: background 0.3s, color 0.3s; }
.dp__close:hover { background: var(--ink); color: var(--bg); }

/* Content rises in once the page has opened (staggered with --d). */
.dp__r { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
.dp.is-open .dp__r { opacity: 1; transform: none; }

.dp__hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--gutter);
  align-items: center;
  min-height: min(76vh, 760px);
  padding: clamp(24px, 4vh, 48px) 0;
}
.dp__title {
  margin: 14px 0 22px -0.05em;
  font-size: clamp(3.6rem, 10.5vw, 12rem);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.07em;
}
.dp__lede { max-width: 30ch; font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1.3; letter-spacing: -0.02em; }
.dp__art { --fd: 6.6s; --fdl: 0s; position: relative; width: min(100%, 56vh); aspect-ratio: 4 / 5; justify-self: center; }
.dp__art .card__inner { visibility: visible !important; }

.dp__kicker { padding: 16px 0; border-top: 1px solid var(--ink); }
.dp__method { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); padding: 8px 0 clamp(40px, 7vh, 80px); }
.dp__method li { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.dp__method b { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; background: var(--accent); color: var(--ink); }
.dp__method h3 { font-size: clamp(1.4rem, 2.2vw, 2.2rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; }
.dp__method li > p:last-child { max-width: 40ch; font-size: 15.5px; line-height: 1.55; opacity: 0.82; }

.dp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding-bottom: clamp(40px, 7vh, 80px); }
.dp__grid .label { margin-bottom: 12px; }
.dp__list li { padding: 13px 0; border-top: 1px solid var(--line); font-size: clamp(1.05rem, 1.4vw, 1.35rem); letter-spacing: -0.02em; }
.dp__list li:last-child { border-bottom: 1px solid var(--line); }
.dp__best { font-size: clamp(1.05rem, 1.4vw, 1.35rem); letter-spacing: -0.02em; max-width: 32ch; }
.dp__base { margin-top: 28px; }

.dp__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 calc(var(--gutter) * -1);
  padding: clamp(12px, 1.4vw, 20px) var(--gutter);
  background: var(--accent);
  font-size: clamp(1.3rem, 3.2vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
}
.dp__cta .arrow-box { width: clamp(48px, 5vw, 80px); height: clamp(48px, 5vw, 80px); }
.dp__cta:hover .arrow-box { transform: translateX(6px); }

.dp__next { display: flex; flex-direction: column; gap: 10px; padding: clamp(40px, 8vh, 90px) 0 0; }
.dp__next-title { font-size: clamp(2.6rem, 8vw, 8rem); font-weight: 700; line-height: 0.88; letter-spacing: -0.065em; transition: transform 0.6s var(--ease), color 0.4s; }
.dp__next:hover .dp__next-title { transform: translateX(14px); color: var(--accent); }

@media (max-width: 900px) {
  .dp__hero { grid-template-columns: 1fr; min-height: 0; }
  .dp__art { width: min(78vw, 46vh); order: -1; }
  .dp__method, .dp__grid { grid-template-columns: 1fr; }
  .dp__cta { font-size: clamp(1rem, 4.4vw, 1.5rem); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .nav__menu { display: block; }
  .nav__clock { display: none; }

  .hero__title { font-size: min(31vw, calc((100vh - 240px) / 1.6)); font-size: min(31vw, calc((100svh - 240px) / 1.6)); }
  .hero__band { left: 18%; top: 48%; height: 20%; }

  .statement__meta { grid-template-columns: 1fr auto; }
  .statement__readout { grid-column: 1 / -1; grid-row: 2; }
  .statement__title { font-size: 18.5vw; }
  .statement__list { grid-template-columns: 1fr 1fr; }
  .statement__list li { border-bottom: 1px solid var(--line); padding-right: 12px; }
  .statement__list li:nth-child(odd) { padding-left: 0; }
  .statement__list li:nth-child(even) { border-right: 0; }

  .manifesto { text-indent: 0; }
  .studio__grid { grid-template-columns: 1fr; padding-left: 0; }

  .work__pin { padding-top: 70px; padding-bottom: 14px; }
  .work__bar > :nth-child(2) { display: none; }
  .work__bar { grid-template-columns: 1fr 1fr; }
  .work__stage { grid-template-columns: 1fr; }
  .work__side {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    padding: 14px 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    gap: 0 16px;
  }
  .work__heading { font-size: min(19vw, 9svh); }
  .work__count { font-size: min(12vw, 6svh); }
  .work__meta { grid-column: 1 / -1; margin-top: 12px; }
  .work__meta div { padding: 7px 0; }
  /* Phones: same pinned filmstrip as desktop. Scrolling down slides the disciplines right to left. */
  .work__track { gap: 12vw; padding: 0 16vw 0 2vw; }
  .card--top, .card--bottom { margin: 0; align-self: center; }
  .card__media { width: min(64vw, 29svh); }
  .card--wide .card__media { width: min(78vw, 36svh); }
  .card--small .card__media { width: min(56vw, 25svh); }
  .card { max-width: 80vw; }
  .work__foot { grid-template-columns: 1fr; justify-items: center; margin-top: 10px; }
  .work__foot > :first-child,
  .work__foot > :last-child { display: none; }
  .work__ticks { width: 100%; }

  .method { height: 300vh; }
  .method__sticky { grid-template-columns: 1fr; grid-template-rows: 34vh 1fr; padding-top: 76px; gap: 12px; }
  .method__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .method__head h2 { font-size: 2.1rem; margin-top: 10px; }
  .method__head h2 br { display: none; }
  .method__steps { min-height: 17rem; }
  .step { gap: 10px; }

  .finale { height: 400vh; }
  .finale__inner { padding-top: 76px; }
  .finale__title { font-size: min(17vw, 16vh); }
  .finale__email { font-size: clamp(0.9rem, 4.8vw, 1.6rem); }
  .finale__grid { grid-template-columns: 1fr 1fr; row-gap: 18px; font-size: 14px; }
  .finale__grid > div:nth-child(n+3) { display: none; }
  .finale__hud { inset: 64px var(--gutter) var(--gutter); }
  .finale__tc { display: none; }
  .footer__meta { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Short phones: the card already names the discipline, so the side list steps aside for room. */
@media (max-width: 900px) and (max-height: 760px) {
  .work__meta { display: none; }
}