/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;

  --color-heading: #858585;
  --color-inactive: #A2A2A2;
  --color-body: #404040;
  --color-hairline: #DEDEDE;
  --color-bg: #FBFBF9;

  --header-pad: clamp(24px, 3vw, 44px);
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;          /* the document never scrolls */
  overscroll-behavior: none;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-body);
}

/* Images are inert to the pointer: no right-click save, no dragging.
   Clicks and hovers land on their containers instead. */
img, canvas {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* ============================================================
   Persistent header
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--header-pad);
  pointer-events: none;
}

.site-header__brand,
.site-header__menu {
  pointer-events: auto;
  font-family: 'DM Sans', var(--font-body);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-heading);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Menu toggle: three-line hamburger that folds into an X when open. */
.site-header__menu {
  position: relative;
  width: 24px;
  height: 16px;
}

.site-header__menu span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #555555;
  transition:
    top 450ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
}

.site-header__menu span:nth-child(1) { top: 0; }
.site-header__menu span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.site-header__menu span:nth-child(3) { top: 100%; transform: translateY(-100%); }

.site-header__menu.is-open span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.site-header__menu.is-open span:nth-child(2) { opacity: 0; }

.site-header__menu.is-open span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* The wordmark asset is white; brightness maps it to #858585 over
   light ground. Over imagery it stays white (.is-light), crossfading
   as the background beneath it changes. */
.site-header__logo {
  display: block;
  height: 13px;
  width: auto;
  filter: brightness(0.522);
  transition: filter 500ms ease;
}

.site-header__logo.is-light { filter: brightness(1); }

/* ============================================================
   Split-screen shell (reusable)
   ============================================================ */
.split {
  position: fixed;
  inset: 0;
  display: flex;
}

.split__panel {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

/* ============================================================
   Left panel — project names
   ============================================================ */
.names {
  position: absolute;
  inset: 0;
  padding-left: clamp(40px, 8vw, 140px);
  padding-right: clamp(24px, 4vw, 64px);
}

.names__slot {
  position: absolute;
  top: 50%;
  left: clamp(40px, 8vw, 140px);
  right: clamp(24px, 4vw, 64px);
  transform-origin: left center;
  will-change: transform;
  white-space: nowrap;
}

.names__title {
  margin: 0;
  font-family: 'DM Sans', var(--font-body);
  font-weight: 300;              /* DM Sans Light */
  font-size: clamp(34px, 3.8vw, 64px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #555555;
  transform: translateY(-50%);
}

.names__tag {
  position: absolute;
  top: 50%;
  left: clamp(40px, 8vw, 140px);
  font-family: 'DM Sans', var(--font-body);
  font-size: 14px;
  font-weight: 200;              /* DM Sans ExtraLight */
  letter-spacing: 0.05em;
  color: #858585;
  opacity: 0;
  transition: opacity 0.7s ease 0.15s;   /* gentle fade-in once settled */
  pointer-events: none;
}

.names__tag.is-visible { opacity: 1; }

.names__tag.is-hidden-fast {
  opacity: 0;
  transition: opacity 0.14s ease 0s;      /* quick, early fade-out */
}

/* Only the settled, centred title is clickable. */
.names__slot.is-active { cursor: pointer; }

.names__slot .names__title { transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

.names__slot.is-active:hover .names__title { opacity: 0.55; }

/* ============================================================
   Right panel — thumbnail carousel
   ============================================================ */
.carousel {
  position: absolute;
  inset: 0;
}

.carousel__slot {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  will-change: transform, opacity;
}

.carousel__slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover cue on the settled, centred thumbnail only. */
.carousel__slot.is-active { cursor: pointer; }

.carousel__slot.is-active:hover img { transform: scale(1.05); }

.carousel__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 21, 21, 0.22);
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.carousel__slot.is-active:hover .carousel__overlay { opacity: 1; }

.carousel__plus {
  position: relative;
  width: 28px;
  height: 28px;
}

.carousel__plus::before,
.carousel__plus::after {
  content: '';
  position: absolute;
  background: #ffffff;
}

.carousel__plus::before {
  left: 0; right: 0; top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}

.carousel__plus::after {
  top: 0; bottom: 0; left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}

/* ============================================================
   Project page — white reveal + copy block
   ============================================================ */
.project-reveal {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #ffffff;
  transform: translateY(-101%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.project-reveal.is-open {
  transform: translateY(0);
  pointer-events: auto;
}

/* ============================================================
   Project pages — stacked strips pushing in opposite directions
   ============================================================ */
.ppages {
  position: absolute;
  inset: 0;
  z-index: 6;
  visibility: hidden;
  will-change: transform;
  /* Slower, more drawn-out than the home carousel. */
  transition: transform 1150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.split.is-project-open .ppages { visibility: visible; }

.ppage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.ppage--white {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full-height, full-bleed image running edge to edge. */
.ppage__bleed {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full-screen video layer. Spans the whole viewport and slides in as a
   single whole unit (not split like the image pages), over the strips. */
/* Full-bleed media (image or video) rides this single full-screen plane
   and slides as one whole unit, instead of splitting across the panels.
   Its transform is driven inline from JS (parked off-screen, slid to 0). */
.project-media {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 1150ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.project-media__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-media__el.is-hidden { display: none; }

/* Smaller image floating in generous white space. */
.ppage__inset {
  display: block;
  width: 44%;
  max-height: 62%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Centred quote block. */
.quote {
  text-align: center;
  padding: 0 48px;
  max-width: 560px;
}

.quote__name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 28px;
}

.quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 32px);
  line-height: 1.55;
  color: var(--color-heading);
}

/* ============================================================
   Subpages (About / Contact) — split view, signature entrance
   ============================================================ */
.subpage {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  font-family: 'DM Sans', var(--font-body);
}

.subpage.is-open { pointer-events: auto; }

.subpage__half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Left enters from the bottom, right from the top — as everywhere. */
.subpage__half--left  { left: 0;  transform: translateY(101%); }
.subpage__half--right { right: 0; transform: translateY(-101%); background: #ffffff; }

.subpage.is-open .subpage__half { transform: translateY(0); }

.subpage__half--left img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subpage__content {
  height: 100%;
  overflow-y: auto;
  padding: 16vh clamp(40px, 7vw, 110px) clamp(56px, 9vh, 110px)
           clamp(48px, 9%, 130px);
}

.subpage__content > p {
  margin: 0 0 1.5em;
  max-width: 600px;
  font-size: clamp(16px, 1.15vw, 19px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-body);
}

/* About: large copy up top, collaborations marquee seated at the foot. */
.subpage__content--about {
  display: flex;
  flex-direction: column;
  padding: 14vh 0 6vh;
  overflow: hidden;
}

/* Copy sits centred in the panel, both axes, set centred. */
.about-copy {
  margin: auto;
  max-width: 780px;
  padding: 0 clamp(28px, 3.5vw, 56px);
  text-align: center;
}

.about-copy p {
  margin: 0 0 1.3em;
  font-size: clamp(18px, 1.3vw, 26px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-body);
  text-wrap: pretty;             /* no single-word last lines */
}

.about-copy p:last-child { margin-bottom: 0; }

.about-collabs { margin-top: auto; }

.about-collabs__label {
  text-align: center;
  font-size: clamp(17px, 1.2vw, 22px);
  font-weight: 300;
  color: var(--color-body);
  margin-bottom: 26px;
}

/* Endless sliding client list, clipped by the panel edges, with a
   gentle fade at either end. */
.about-marquee {
  overflow: hidden;
  white-space: nowrap;
  /* Names surface only toward the centre; the outer thirds fade away. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 38%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 38%, #000 62%, transparent 100%);
}

.about-marquee__track {
  display: inline-flex;
  animation: marquee-slide 55s linear infinite;
  will-change: transform;
}

.about-marquee__seq {
  white-space: pre;
  font-size: clamp(17px, 1.35vw, 26px);
  font-weight: 200;              /* DM Sans ExtraLight */
  color: #A2A2A2;
}

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Contact: heading + invitation, centred like the About copy and
   sharing its type scale. */
.subpage__content--contact {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-block {
  max-width: 780px;
  padding: 0 clamp(28px, 3.5vw, 56px);
  text-align: center;
}

.contact-block__lead {
  margin: 0 0 3.2em;
  font-size: clamp(18px, 1.3vw, 26px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-body);
}

.contact-block__body {
  margin: 0;
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-body);
  text-wrap: pretty;             /* no single-word last lines */
}

.contact-block__body a {
  color: #A2A2A2;
  text-decoration: none;
  transition: opacity 0.35s ease;
}

.contact-block__body a:hover { opacity: 0.6; }

/* Back arrow — over the project-page images, returns to the carousel. */
.project-back {
  position: fixed;
  left: var(--header-pad);
  bottom: var(--header-pad);
  z-index: 7;
  padding: 8px;
  margin: -8px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity 550ms ease, transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-back.is-visible {
  opacity: 0.9;
  pointer-events: auto;
  transform: translateX(0);
}

.project-back:hover { opacity: 1; }

.project-back svg { display: block; }

/* Dark arrow when the left half beneath it is white, not a photograph. */
.project-back.is-dark svg path { stroke: #555555; }

/* ============================================================
   Loading animation — plays once over the home page on load
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  /* White fill so the site (carousel) isn't glimpsed while the halves
     are still sliding in. Cleared on exit so the halves reveal the site. */
  background: #ffffff;
}

.loader.is-exiting { background: transparent; }

.loader.is-done { display: none; }

.loader__half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 1050ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* The halves enter from opposite vertical directions —
   left from the bottom, right from the top — and leave the same way. */
.loader__half--left  { left: 0;  transform: translateY(101%); }
.loader__half--right { right: 0; transform: translateY(-101%); }

.loader.is-in .loader__half { transform: translateY(0); }

.loader__half img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The wordmark breathes outward while the images hold.
   The logo PNG is sliced into its letters at runtime (home.js) so the
   gap between the real letterforms can be tracked open, exactly like
   animated letter-spacing. The gap values are set inline by the JS. */
.loader__word {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: clamp(26px, 3.6vw, 58px);
  /* Text styles only matter for the graceful fallback. */
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 96px);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: #ffffff;
  opacity: 0;
  transition: opacity 700ms ease 250ms;
}

/* Tracking animates via per-letter transforms (GPU-composited and
   subpixel-smooth), not the layout gap, which would jitter. */
.loader__word canvas.loader__letter {
  display: block;
  height: 100%;
  width: auto;
  transition: transform 2600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.loader.is-in .loader__word { opacity: 1; }

.loader .loader__word.is-gone {
  opacity: 0;
  transition:
    opacity 550ms ease,
    gap 2600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scroll cue: a minimal chevron, pulsing ever so slightly. */
.loader__cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 900ms ease;
}

.loader__cue svg { display: block; }

.loader__cue.is-in { opacity: 1; }

.loader__cue.is-in svg {
  animation: cue-pulse 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes cue-pulse {
  0%, 100% { transform: translateY(0);   opacity: 1;    }
  50%      { transform: translateY(5px); opacity: 0.75; }
}

/* ============================================================
   Dropdown menu — white panel over the right half only
   ============================================================ */
/* Soft blur over the whole site while the menu is open. */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8;                    /* above subpages, below the panel */
  visibility: hidden;
  background: rgba(251, 251, 249, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition:
    backdrop-filter 600ms ease,
    -webkit-backdrop-filter 600ms ease,
    background 600ms ease,
    visibility 0s linear 600ms;
}

.menu-backdrop.is-on {
  visibility: visible;
  background: rgba(251, 251, 249, 0.12);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition:
    backdrop-filter 600ms ease,
    -webkit-backdrop-filter 600ms ease,
    background 600ms ease;
}

.menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 9;                    /* over everything except the header */
  background: #ffffff;
  transform: translateY(-101%);
  transition: transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding: 18vh clamp(32px, 6vw, 96px) clamp(56px, 9vh, 110px)
           clamp(48px, 10%, 140px);
}

.menu-panel.is-open { transform: translateY(0); }

.menu-nav { display: block; }

.menu-nav__item {
  display: block;
  width: fit-content;
  font-family: 'DM Sans', var(--font-body);
  font-weight: 300;              /* DM Sans Light, matching project titles */
  font-size: clamp(30px, 2.8vw, 50px);
  line-height: 1.15;
  color: #555555;
  text-decoration: none;
  margin-bottom: clamp(22px, 3.4vh, 40px);
}


/* Studio block sits lower, clearly separated from the navigation. */
.menu-studio {
  margin-top: auto;
  max-width: 420px;
}

.menu-studio p {
  margin: 0;
  font-family: 'DM Sans', var(--font-body);
  font-size: 16px;
  font-weight: 300;              /* DM Sans Light */
  line-height: 1.5;
  color: #858585;
  padding-top: 22px;
  border-top: 1px solid var(--color-hairline);   /* footer line above */
}

.menu-studio__aff { display: block; }            /* aligned left edges */

/* Items fade in one at a time, quickly. */
.menu-nav__item,
.menu-studio {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.menu-panel .is-in { opacity: 1; }

.menu-panel .menu-nav__item.is-in:hover { opacity: 0.55; }

/* Copy block seats into the bottom-left corner, mirroring STASIS. */
.project-copy {
  position: absolute;
  left: var(--header-pad);
  bottom: var(--header-pad);
  right: clamp(40px, 8vw, 140px);
  max-width: 420px;
}

.project-copy section {
  opacity: 0;
  transition: opacity 0.75s ease;
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: 22px;
  margin-bottom: 22px;
}

.project-copy section:last-child { margin-bottom: 0; }

.project-copy section.is-in { opacity: 1; }

.project-copy h3 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-heading);
}

.project-copy p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-body);
}

/* ============================================================
   Mobile — single column. The two panels stack top/bottom and
   push in opposite vertical directions (top ↑, bottom ↓). The
   transform math is identical to desktop; only the layout changes.
   Desktop (>768px) is untouched.
   ============================================================ */
@media (max-width: 768px) {
  /* Stack the shell: names/text on top, image on the bottom. */
  .split { flex-direction: column; }
  .split__panel { width: 100%; height: 50%; }

  /* Names (top panel) */
  .names { padding-left: 24px; padding-right: 24px; }
  .names__slot { left: 24px; right: 24px; }
  .names__title { font-size: clamp(22px, 6.2vw, 36px); }
  .names__tag { left: 24px; font-size: 12px; }

  /* Loader halves stack: top enters from above, bottom from below. */
  .loader__half { width: 100%; height: 50%; }
  .loader__half--left  { left: 0; top: 0;   transform: translateY(-101%); }
  .loader__half--right { left: 0; top: 50%; transform: translateY(101%); }

  /* Project copy block sits in the top half, below the header. */
  .project-copy {
    left: var(--header-pad);
    right: var(--header-pad);
    top: clamp(64px, 11vh, 104px);
    bottom: auto;
    max-width: none;
  }

  /* Menu covers the full width. */
  .menu-panel {
    width: 100%;
    padding: 16vh clamp(28px, 8vw, 64px) clamp(40px, 7vh, 80px);
  }

  /* Subpages stack: content/text on top, image on the bottom. */
  .subpage__half { width: 100%; height: 50%; }
  .subpage__half--left  { left: 0; top: 50%; }   /* image → bottom */
  .subpage__half--right { left: 0; top: 0; }      /* content → top */
  .subpage__content { padding: 14vh 24px 5vh; }
  .subpage__content--about { padding: 9vh 0 4vh; }
  .about-copy { padding: 0 24px; }
  .about-copy p { font-size: clamp(15px, 4vw, 19px); }
  .about-collabs__label { font-size: 15px; margin-bottom: 14px; }
  .about-marquee__seq { font-size: 15px; }
  .contact-block { padding: 0 24px; }
  .contact-block__lead { font-size: clamp(17px, 5vw, 22px); margin-bottom: 2em; }
  .contact-block__body { font-size: clamp(15px, 4vw, 18px); }
}