/* ==========================================================================
   Bhagyesh Bhatt - portfolio
   Design system. Structure modelled on 333southwabash.com:
   single-hue flood, two type scales, masked line reveals, clip-path wipes.
   Colour is a token swap - see PALETTE below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PALETTE - to change the whole site's colour, swap the three values in
   :root below for one of the alternates. Nothing else needs to change.

   BONE (default)  surface #E7E1D6  ink #191411  mid #5F584C
   MIST            surface #DCE2E1  ink #101615  mid #545C5A
   CLAY            surface #EADCD1  ink #1E1411  mid #6A574B
   SAGE            surface #DFE3D5  ink #161A10  mid #565C48
   -------------------------------------------------------------------------- */

:root {
  /* colour */
  --surface:      #E7E1D6;
  --ink:          #191411;
  --mid:          #5F584C;

  --hairline:     color-mix(in srgb, var(--ink) 18%, transparent);
  --hairline-2:   color-mix(in srgb, var(--ink) 10%, transparent);
  --ink-wash:     color-mix(in srgb, var(--ink) 6%, transparent);
  --inverse-bg:   var(--ink);
  --inverse-ink:  var(--surface);

  /* type */
  --font: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid display scale. Two scales only - enormous, and small. */
  --t-mega:   clamp(2.75rem, 9.2vw,  10.5rem);
  --t-xl:     clamp(2.25rem, 6.0vw,   6.0rem);
  --t-lg:     clamp(1.75rem, 4.0vw,   3.75rem);
  --t-md:     clamp(1.35rem, 2.2vw,   2.0rem);
  --t-body:   clamp(1.0625rem, 1.28vw, 1.375rem);
  --t-cap:    clamp(0.6875rem, 0.78vw, 0.8125rem);

  /* rhythm */
  --marge-x:  clamp(1rem, 2.2vw, 2.25rem);
  --gutter:   clamp(0.75rem, 1.4vw, 1.5rem);
  --band:     clamp(2.5rem, 4.8vw, 5.25rem);
  --band-sm:  clamp(2rem, 3.6vw, 3.5rem);

  /* motion */
  --expo:     cubic-bezier(.19, 1, .22, 1);
  --io:       cubic-bezier(.45, 0, .55, 1);
  --o4:       cubic-bezier(.25, 1, .5, 1);
  --dur:      1100ms;
  --dur-fast: 480ms;
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

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

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

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 10000;
  padding: 0.85rem 1.25rem;
  background: var(--ink);
  color: var(--surface);
  font-size: var(--t-cap);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-120%);
  transition: transform 220ms var(--o4);
}
.skip-link:focus-visible { transform: translateY(0); }

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

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.shell { padding-inline: var(--marge-x); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.band { padding-block: var(--band); }
.band-sm { padding-block: var(--band-sm); }

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */

.cap {
  display: block;
  font-size: var(--t-cap);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}
.cap--ink { color: var(--ink); }

.display,
.display--mega,
.display--lg,
.display--md {
  font-weight: 500;
  text-wrap: balance;
}

.display        { font-size: var(--t-xl);   line-height: 0.98; letter-spacing: -0.028em; }
.display--mega  { font-size: var(--t-mega); line-height: 0.92; letter-spacing: -0.038em; }
.display--lg    { font-size: var(--t-lg);   line-height: 1.02; letter-spacing: -0.022em; }
.display--md    { font-size: var(--t-md);   line-height: 1.14; letter-spacing: -0.014em; }

.lede {
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: -0.014em;
  font-weight: 400;
  text-wrap: pretty;
}

.prose > * + * { margin-top: 1.35em; }
.prose p { text-wrap: pretty; max-width: 62ch; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }

/* A short line the brief asks to preserve as its own beat. */
.beat {
  font-size: clamp(1.35rem, 2.4vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 500;
  max-width: 22ch;
}

.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--hairline);
  border: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   LINK TREATMENTS
   -------------------------------------------------------------------------- */

.link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 420ms var(--expo);
}
.link:hover::after, .link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.link--on::after { transform: scaleX(1); transform-origin: 0 50%; }
.link--on:hover::after { transform: scaleX(0); transform-origin: 100% 50%; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.95em 1.5em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: var(--t-cap);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: color 380ms var(--o4);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  z-index: -1;
  transform: translateY(101%);
  transition: transform 520ms var(--expo);
}
.btn:hover, .btn:focus-visible { color: var(--surface); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn .arrow { transition: transform 420ms var(--expo); }
.btn:hover .arrow { transform: translateX(0.3em); }

/* --------------------------------------------------------------------------
   LOADER
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   INTRO - 3D type tunnel

   Matches 333southwabash.com's load sequence. A four-walled corridor is built
   from CSS 3D transforms. Each wall carries the phrase as a stack of ribs -
   lines set ACROSS the corridor, repeated at even intervals ALONG it - so
   perspective turns them into a ribbed tunnel receding to a rectangular
   opening. That rib construction is the whole trick: lines running lengthways
   give a few stray letters, ribs give the reference's density.

   The camera sits at the corridor's near end for the entire sequence and the
   ribs stream toward it, which is what holds the tunnel at a constant size
   with type pouring outward. Two hard constraints shaped this:

     - a plane crossing the camera plane (z = perspective) is dropped by the
       browser rather than clipped, so the corridor stays in front of it; and
     - a fractional `opacity` on a `preserve-3d` element flattens its children
       out of 3D, so every fade lives on a wrapper.

   Ten ribs at 12.5% intervals streaming by exactly 12.5% loops seamlessly.

   Beats: flood + wordmark (--intro-hold), streaming corridor
   (--intro-cruise), corridor rushes to its vanishing point (--intro-exit),
   flood clears to the site (--intro-out). Total is the sum: 7.0s here against
   the reference's ~8.4s. To lengthen it, raise --intro-cruise.
   -------------------------------------------------------------------------- */

#intro {
  --tw: 112vw;                 /* corridor width  - just off frame */
  --th: 112vh;                 /* corridor height - just off frame */
  --depth: 135vmax;            /* corridor length                  */
  --fill: 0.74;                /* share of each wall a word spans   */
  /* Measured advance widths at weight 700, tracking -0.03em. Sizing each word
     off its own width is what squares the four of them into a rectangle. */
  --w-logically: 3.7056;
  --w-creative: 3.5354;
  --intro-hold: 950ms;
  --intro-cruise: 3900ms;
  --intro-exit: 900ms;
  --intro-out: 1250ms;
  --intro-stream: 1000ms;      /* one rib interval per cycle        */

  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--surface);
  animation: intro-clear var(--intro-out) var(--io)
             calc(var(--intro-hold) + var(--intro-cruise) + var(--intro-exit)) forwards;
}

/* beat 1 - the flood's centred wordmark */
#intro .intro__mark {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  animation: intro-mark var(--intro-hold) var(--io) both;
}

#intro .intro__scene {
  position: absolute;
  inset: 0;
  perspective: 86vmin;
  perspective-origin: 50% 50%;
  opacity: 0;
  animation: intro-scene calc(var(--intro-cruise) + var(--intro-exit))
             linear var(--intro-hold) both;
}

#intro .intro__tube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  /* Sits the corridor's near end on the screen plane. */
  animation: intro-drift calc(var(--intro-cruise) + var(--intro-exit))
             linear var(--intro-hold) both;
}

#intro .intro__face {
  position: absolute;
  top: 50%;
  left: 50%;
  height: var(--depth);
  margin-top: calc(var(--depth) / -2);
  transform-style: preserve-3d;
}

/* Side walls span the corridor's height; floor and ceiling span its width. */
#intro .intro__face--l,
#intro .intro__face--r {
  width: var(--th);
  margin-left: calc(var(--th) / -2);
  --size: calc(var(--th) * var(--fill) / var(--w-creative));
}
#intro .intro__face--t,
#intro .intro__face--b {
  width: var(--tw);
  margin-left: calc(var(--tw) / -2);
  --size: calc(var(--tw) * var(--fill) / var(--w-logically));
}

/* Built inside-out: every wall's normal points INTO the corridor, so the
   camera sees each one's front and the type reads the right way round. Facing
   them outward is what made every word appear mirrored. --sdir is the sign
   that makes all four walls stream the same way, since opposite walls map
   their own +Y onto opposite world Z. */
#intro .intro__face--l {
  --sdir: 1;
  transform: translateX(calc(var(--tw) / -2)) rotateY( 90deg) rotateZ(-90deg);
}
#intro .intro__face--r {
  --sdir: -1;
  transform: translateX(calc(var(--tw) /  2)) rotateY(-90deg) rotateZ(-90deg);
}
#intro .intro__face--t {
  --sdir: 1;
  transform: translateY(calc(var(--th) / -2)) rotateX(-90deg);
}
#intro .intro__face--b {
  --sdir: -1;
  transform: translateY(calc(var(--th) /  2)) rotateX( 90deg);
}

#intro .intro__ribs {
  position: absolute;
  inset: 0;
  /* Clips the ribs to their own wall. The wall ends coincide with the frame
     edge and the vanishing opening, so neither cut is visible. Safe here:
     this box is flat, so clipping it does not disturb its parent's 3D. */
  overflow: hidden;
  animation: intro-stream var(--intro-stream) linear infinite;
}

/* One word per rib, centred on its wall: LOGICALLY on the floor and ceiling,
   CREATIVE on the two side walls, exactly as sketched. */
#intro .intro__ribs i {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  text-align: center;
  white-space: nowrap;
  font-style: normal;
  font-size: var(--size);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  transform: translateY(-50%);
}
#intro .intro__ribs i:nth-child(1) { top: -20%; }
#intro .intro__ribs i:nth-child(2) { top: 0%; }
#intro .intro__ribs i:nth-child(3) { top: 20%; }
#intro .intro__ribs i:nth-child(4) { top: 40%; }
#intro .intro__ribs i:nth-child(5) { top: 60%; }
#intro .intro__ribs i:nth-child(6) { top: 80%; }
#intro .intro__ribs i:nth-child(7) { top: 100%; }
#intro .intro__ribs i:nth-child(8) { top: 120%; }

/* One rib interval per cycle, so the loop is seamless and the ribs read as
   arriving one line at a time. */
@keyframes intro-stream {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--sdir) * 20%)); }
}

@keyframes intro-drift {
  0%   { transform: translateZ(calc(var(--depth) / -2 + 24vmax)) rotateZ(-5deg);
         animation-timing-function: cubic-bezier(.22, 0, .28, 1); }
  30%  { transform: translateZ(calc(var(--depth) / -2)) rotateZ(-2deg); }
  81%  { transform: translateZ(calc(var(--depth) / -2)) rotateZ(3deg);
         animation-timing-function: cubic-bezier(.62, 0, .84, 1); }
  100% { transform: translateZ(-2600vmax) rotateZ(11deg); }
}

@keyframes intro-scene {
  0%   { opacity: 0; }
  9%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes intro-mark {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes intro-clear {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.intro-skip #intro,
.no-js #intro { display: none; }

@media (prefers-reduced-motion: reduce) {
  #intro { animation: intro-clear 400ms linear 900ms forwards; }
  #intro .intro__scene { display: none; }
  #intro .intro__mark { opacity: 1; animation: none; }
}

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0;
  z-index: 9994;
  width: 100%;
  padding: 0.85rem var(--marge-x) 0.7rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  mix-blend-mode: normal;
  transition: transform 520ms var(--expo), background-color 300ms linear;
}
.nav::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--surface);
  opacity: 0;
  transition: opacity 320ms linear;
}
.nav.is-solid::after { opacity: 1; }
.nav.is-hidden { transform: translateY(-102%); }

.nav__id { font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.5rem); }
.nav__links a { font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }

.nav__cv {
  font-size: var(--t-cap);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.5em 1.05em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color 340ms var(--o4);
}
.nav__cv::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 460ms var(--expo);
}
.nav__cv:hover, .nav__cv:focus-visible { color: var(--surface); }
.nav__cv:hover::before, .nav__cv:focus-visible::before { transform: translateY(0); }

@media (max-width: 800px) { .nav__cv { display: none; } }
.nav__toggle { display: none; font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }

@media (max-width: 800px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
}

/* full-bleed menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: var(--ink);
  color: var(--surface);
  padding: 4.5rem var(--marge-x) var(--marge-x);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-101%);
  transition: transform 720ms var(--expo);
  visibility: hidden;
}
.menu.is-open { transform: translateY(0); visibility: visible; }
.menu__close {
  position: absolute; top: 0.85rem; right: var(--marge-x);
  font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.menu__list { display: flex; flex-direction: column; gap: 0.15em; }
.menu__list a {
  font-size: clamp(2.5rem, 12vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.menu__foot { display: flex; flex-direction: column; gap: 0.4rem; }
.menu__cv { align-self: flex-start; margin-bottom: 1.25rem; border-color: var(--surface); color: var(--surface); }
.menu__cv::before { background: var(--surface); }
.menu__cv:hover, .menu__cv:focus-visible { color: var(--ink); }

.menu__foot a, .menu__foot span { font-size: var(--t-cap); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--surface) 70%, transparent); }

/* --------------------------------------------------------------------------
   HERO - pinned, scroll-driven

   The reference site pins its first screen and plays a sequence across it.
   Here the sequence is the six campaign covers, advancing with scroll
   progress (--p, set by js/site.js). The images are decorative duplicates of
   the Selected Work grid below, so they carry empty alt text and the panel is
   hidden from assistive technology.
   -------------------------------------------------------------------------- */

.hero { position: relative; }

.hero__pin {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.25rem, 2.2vw, 1.85rem);
  padding: 4.75rem var(--marge-x) var(--marge-x);
}

.hero__eyebrow { align-self: flex-start; }
.hero__mid { display: flex; flex-direction: column; gap: clamp(1rem, 1.9vw, 1.6rem); max-width: 58%; }
.hero__title {
  font-size: var(--t-mega);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 500;
  max-width: 12ch;
}
.hero__support { font-size: clamp(1.125rem, 1.45vw, 1.5rem); max-width: 42ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__foot { display: flex; flex-direction: column; gap: 0.9rem; }

.proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6em 2em;
  width: 100%;
}
.proof li {
  flex: 1 1 auto;
  text-align: center;
  font-size: clamp(0.75rem, 1.02vw, 1.0625rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.proof li:first-child { text-align: left; }
.proof li:last-child  { text-align: right; }

@media (max-width: 700px) {
  .proof { justify-content: flex-start; gap: 0.5em 1.5em; }
  .proof li,
  .proof li:first-child,
  .proof li:last-child { flex: 0 1 auto; text-align: left; }
}

.hero__media {
  position: absolute;
  right: var(--marge-x);
  top: 50%;
  transform: translateY(-50%);
  /* Height-driven so the portrait uses whatever vertical room the screen has
     rather than being pinned to a width. */
  height: min(66svh, 36rem);
  width: auto;
  aspect-ratio: 4 / 5;
}
.hero__media img,
.hero__media .frame { width: 100%; height: 100%; object-fit: cover; }

/* Short laptop screens (1366x768 and friends): keep the whole first screen,
   proof line included, above the fold. */
/* Short laptop screens (1366x768, 1470x760 and friends): the whole first
   screen, proof line included, stays above the fold without shrinking the
   supporting copy or the portrait. */
@media (min-width: 1000px) and (max-height: 860px) {
  .hero__pin { padding-top: 4rem; gap: 0.85rem; }
  .hero__mid { gap: 0.75rem; }
  .hero__title { font-size: clamp(2.5rem, 8vw, 7.5rem); }
  .hero__media { height: min(64svh, 32rem); }
}

@media (max-width: 1000px) {
  .hero__mid { max-width: none; }
  .hero__media {
    position: static;
    transform: none;
    height: auto;                 /* undo the height-driven desktop sizing */
    width: min(100%, 24rem);
    aspect-ratio: 4 / 5;
  }
  .hero__pin { padding-top: 4.5rem; gap: 2rem; }
  .hero__title { max-width: 14ch; }
}



/* --------------------------------------------------------------------------
   OPENING STATEMENT
   -------------------------------------------------------------------------- */

.statement { border-top: 1px solid var(--hairline); }
.statement__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(1.75rem, 3.5vw, 3rem);
}
.statement__label { grid-column: 1 / 4; }
.statement__body { grid-column: 4 / 12; }
.statement__body p {
  font-size: clamp(1.35rem, 2.6vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.022em;
  font-weight: 400;
  max-width: 26ch;
  text-wrap: pretty;
}
.statement__body p + p { margin-top: 1.1em; color: var(--mid); }
.statement__body strong { font-weight: 500; color: var(--ink); }

@media (max-width: 900px) {
  .statement__label, .statement__body { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   ACTS - the two-act career narrative
   -------------------------------------------------------------------------- */

.act { position: relative; }
.act + .act { border-top: 1px solid var(--hairline); }
.act__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(1.75rem, 3.5vw, 3rem); }
.act__label { grid-column: 1 / 4; }
.act__label .cap { position: sticky; top: 4.5rem; }
.act__body { grid-column: 4 / 12; display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }

.act__work { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.act__work .work__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.act--turn { background: var(--ink); color: var(--surface); padding-block: calc(var(--band) * 1.6); }
.act--turn .cap { color: color-mix(in srgb, var(--surface) 62%, transparent); }
.act--turn .prose p { max-width: 58ch; }

@media (max-width: 900px) {
  .act__label { grid-column: 1 / -1; }
  .act__label .cap { position: static; }
  .act__body { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   PROCESS
   -------------------------------------------------------------------------- */

.process__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; }
.process__intro .cap { grid-column: 1 / 4; }
.process__intro > div { grid-column: 4 / 12; display: flex; flex-direction: column; gap: 1.75rem; }

.questions { display: flex; flex-direction: column; gap: 0.05em; }
.questions li {
  font-size: clamp(1.75rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  font-weight: 500;
}

.steps { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); border-top: 1px solid var(--hairline); }
.step {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0.85rem;
  padding-block: clamp(1.75rem, 3.2vw, 2.75rem);
  border-bottom: 1px solid var(--hairline);
}
.step__no { grid-column: 1 / 3; }
.step__name { grid-column: 3 / 7; }
.step__copy { grid-column: 7 / 12; color: var(--mid); }
.step__copy p { max-width: 46ch; }

@media (max-width: 900px) {
  .process__intro .cap, .process__intro > div { grid-column: 1 / -1; }
  .step__no { grid-column: 1 / -1; }
  .step__name { grid-column: 1 / -1; }
  .step__copy { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   WORK
   -------------------------------------------------------------------------- */

.work__head { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }

.cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(2.5rem, 5.5vw, 4.5rem); align-items: start; }

.card { grid-column: span 6; display: flex; flex-direction: column; gap: 1.35rem; }
.card:nth-child(4n + 1), .card:nth-child(4n + 4) { grid-column: span 7; }
.card:nth-child(4n + 2), .card:nth-child(4n + 3) { grid-column: span 5; }
.card:nth-child(even) { margin-top: clamp(0rem, 5vw, 5.5rem); }

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--ink-wash);
  /* Each card declares its source image's true ratio via --ar, so nothing
     is cropped through a headline or a face. */
  aspect-ratio: var(--ar, 4 / 3);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--expo);
}
.card:hover .card__media img { transform: scale(1.035); }
.card__title { text-wrap: balance; }
.card__body { display: flex; flex-direction: column; gap: 0.85rem; }
.card__desc { color: var(--mid); max-width: 44ch; }
.card__cta { font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }

/* Three-up grids, used inside the two career acts. */
.cards--3 .card,
.cards--3 .card:nth-child(n) { grid-column: span 4; margin-top: 0; }

@media (max-width: 900px) {
  .cards--3 .card, .cards--3 .card:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 800px) {
  .card, .card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
}

@media (max-width: 640px) {
  .cards--3 .card, .cards--3 .card:nth-child(n) { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   AWARDS
   -------------------------------------------------------------------------- */

.awards__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; }
.awards__head .cap { grid-column: 1 / 4; }
.awards__head > div { grid-column: 4 / 12; display: flex; flex-direction: column; gap: 1.5rem; }

/* One flowing run rather than eighteen stacked rows: the same information in
   roughly a fifth of the page height. */
.awards__run {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.3em;
}
.awards__run li {
  font-size: clamp(1.05rem, 1.75vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.014em;
  font-weight: 500;
  text-wrap: nowrap;
}
.awards__run li:not(:last-child)::after {
  content: "\00b7";
  margin: 0 0.5em;
  color: var(--mid);
  font-weight: 400;
}

@media (max-width: 900px) {
  .awards__head .cap, .awards__head > div { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */

.about { background: var(--ink); color: var(--surface); padding-block: calc(var(--band) * 1.4); }
.about .cap { color: color-mix(in srgb, var(--surface) 62%, transparent); }
.about__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(2rem, 4vw, 3.5rem); }
.about__label { grid-column: 1 / 4; }
.about__body { grid-column: 4 / 12; display: flex; flex-direction: column; gap: clamp(1.75rem, 3vw, 2.5rem); }
.about__portrait { grid-column: 11 / 13; }

.placeholder {
  aspect-ratio: 3 / 4;
  border: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent);
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
}
.placeholder span { font-size: var(--t-cap); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); text-align: center; }
.hero__media .placeholder { aspect-ratio: 4 / 5; background: var(--ink-wash); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.75rem; }
.facts dt { font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--surface) 62%, transparent); margin-bottom: 0.5rem; }
.facts dd { margin: 0; font-size: 1rem; line-height: 1.45; }
.facts dd + dd { margin-top: 0.3rem; }

@media (max-width: 1000px) {
  .about__label, .about__body, .about__portrait { grid-column: 1 / -1; }
  .about__portrait { max-width: 220px; }
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.foot { padding: var(--band-sm) var(--marge-x) 1.25rem; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.foot__links { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.foot__links a { font-size: clamp(1.05rem, 1.7vw, 1.4rem); font-weight: 500; letter-spacing: -0.01em; }
.foot__bottom { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); padding-top: 1rem; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.foot__bottom span { font-size: var(--t-cap); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); }

/* --------------------------------------------------------------------------
   CASE STUDY
   -------------------------------------------------------------------------- */

.cs-hero { padding-top: clamp(7rem, 14vw, 12rem); }
.cs-hero__inner { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }
.cs-hero__title { font-size: var(--t-xl); line-height: 0.96; letter-spacing: -0.03em; max-width: 15ch; }
.cs-hero__sub { max-width: 30ch; color: var(--mid); }
.cs-meta { display: flex; flex-wrap: wrap; gap: 0.5em 1.5em; }
.cs-meta li { font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); }

.chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(2.75rem, 6vw, 5.5rem);
  border-top: 1px solid var(--hairline);
}
.chapter__head { grid-column: 1 / 5; }
.chapter__head > div { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.chapter__title { max-width: 18ch; text-wrap: pretty; }
.chapter__body { grid-column: 6 / 12; }

@media (max-width: 900px) {
  .chapter__head { grid-column: 1 / -1; }
  .chapter__head > div { position: static; }
  .chapter__body { grid-column: 1 / -1; }
}

.pull {
  font-size: clamp(1.35rem, 2.6vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 24ch;
  padding-left: 1.25rem;
  border-left: 2px solid var(--ink);
}

.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.phase dt { font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); margin-bottom: 0.6rem; }
.phase dd { margin: 0; max-width: 40ch; }

/* asset breaks between chapters */
.plate { padding-block: clamp(1rem, 2vw, 2rem); }
.plate--full { padding-inline: 0; }
.plate figure { margin: 0; }
.plate figcaption, .figcap {
  margin-top: 0.85rem;
  font-size: var(--t-cap);
  letter-spacing: 0.09em;
  line-height: 1.5;
  color: var(--mid);
  max-width: 52ch;
  text-transform: none;
}
.plate--full figcaption { padding-inline: var(--marge-x); }

.frame { position: relative; overflow: hidden; background: var(--ink-wash); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

.plate-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(1.5rem, 3vw, 2.5rem); }
.plate-grid > * { grid-column: span 4; }
.plate-grid > .span-6 { grid-column: span 6; }
.plate-grid > .span-8 { grid-column: span 8; }
.plate-grid > .span-12 { grid-column: span 12; }
.plate-grid > .offset-2 { grid-column: 3 / 11; }

@media (max-width: 800px) {
  .plate-grid > * { grid-column: span 6; }
  .plate-grid > .span-8, .plate-grid > .span-12, .plate-grid > .offset-2 { grid-column: 1 / -1; }
}

.missing {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  min-height: clamp(180px, 24vw, 320px);
  padding: 2rem;
  border: 1px dashed var(--hairline);
  text-align: center;
}
.missing span { font-size: var(--t-cap); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); }

/* next project */
.next { border-top: 1px solid var(--hairline); padding-block: clamp(2.5rem, 5.5vw, 4.5rem); }
.next a { display: flex; flex-direction: column; gap: 1rem; }
.next__title { font-size: clamp(2rem, 6.5vw, 5rem); line-height: 1; letter-spacing: -0.032em; font-weight: 500; }
.next a:hover .next__title { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 1px; }

/* --------------------------------------------------------------------------
   ANIMATION PRIMITIVES

   Content is visible by default. The hidden "before" state only exists while
   <html> carries .motion-armed, which js/site.js adds ONLY once it has
   confirmed it can actually drive the reveals - and removes again if the
   observer never delivers. A broken, blocked or slow script therefore leaves
   a complete, readable page rather than a blank one.
   -------------------------------------------------------------------------- */

/* masked word reveal - built by js/site.js */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.line-in { display: block; }

.motion-armed .line-in {
  transform: translateY(105%);
  transition: transform var(--dur) var(--expo);
  transition-delay: var(--d, 0ms);
}
.motion-armed .is-in .line-in { transform: translateY(0); }

/* fade + rise */
.motion-armed [data-rise]:not(.is-in) {
  opacity: 0;
  transform: translateY(1.75rem);
}
.motion-armed [data-rise] {
  transition: opacity 900ms var(--o4), transform 900ms var(--expo);
  transition-delay: var(--d, 0ms);
}

/* clip-path wipe for media */
.motion-armed [data-wipe]:not(.is-in) { clip-path: inset(100% 0 0 0); }
.motion-armed [data-wipe] {
  transition: clip-path 1200ms var(--expo);
  transition-delay: var(--d, 0ms);
}

/* hairline wipe */
.motion-armed [data-line]:not(.is-in) { transform: scaleX(0); }
.motion-armed [data-line] {
  transform-origin: 0 50%;
  transition: transform 1000ms var(--expo);
}

/* --------------------------------------------------------------------------
   VIDEO

   Poster-first: the YouTube player is only fetched when someone presses play,
   so a page with four films still loads as fast as one with none, and nothing
   is requested from a third party until the viewer asks for it.
   -------------------------------------------------------------------------- */

.vid {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.vid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--expo), opacity 300ms linear;
}
.vid__btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  cursor: pointer;
}
.vid__play {
  width: clamp(3.25rem, 5.5vw, 4.5rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: transform 420ms var(--expo);
}
.vid__play svg { width: 34%; height: 34%; margin-left: 8%; }
.vid__btn:hover .vid__play,
.vid__btn:focus-visible .vid__play { transform: scale(1.09); }
.vid__btn:hover + img,
.vid:has(.vid__btn:hover) img { transform: scale(1.03); }
.vid__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.7rem 1rem;
  font-size: var(--t-cap);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--surface);
  text-shadow: 0 1px 12px rgb(0 0 0 / 55%);
  pointer-events: none;
}
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid.is-playing img,
.vid.is-playing .vid__btn,
.vid.is-playing .vid__tag { display: none; }

/* A link out to something that cannot be embedded. */
.outlink {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.outlink__name { font-size: clamp(1.05rem, 1.7vw, 1.4rem); font-weight: 500; letter-spacing: -0.012em; }
.outlink:hover .outlink__name { text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; }

/* --------------------------------------------------------------------------
   REDUCED MOTION - everything resolves instantly, nothing is hidden
   -------------------------------------------------------------------------- */

@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;
    transition-delay: 0ms !important;
  }
  .motion-armed .line-in,
  .motion-armed [data-rise]:not(.is-in),
  .motion-armed [data-wipe]:not(.is-in),
  .motion-armed [data-line]:not(.is-in) {
    transform: none;
    opacity: 1;
    clip-path: none;
  }
}

/* If JS never runs, nothing may stay invisible. */