:root {
  --black: #030303;
  --white: #f6f3ee;
  --soft: rgba(246, 243, 238, 0.72);
  --muted: rgba(246, 243, 238, 0.48);
  --line: rgba(246, 243, 238, 0.18);
  --safe-x: clamp(28px, 5vw, 78px);
  --safe-y: clamp(24px, 7dvh, 68px);
  --ease: cubic-bezier(.22, .72, .18, 1);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { background: var(--black); }
body {
  margin: 0;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button { font: inherit; }
img, video { display: block; max-width: 100%; }

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: .055;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.35) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 50%, rgba(255,255,255,.18) 0 1px, transparent 1px);
  background-size: 31px 31px, 43px 43px;
}

.deck {
  width: 100vw;
  height: 100dvh;
  transform: translate3d(0, 0, 0);
  transition: transform 980ms var(--ease);
  will-change: transform;
}

.slide {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}

.tone-black { background: #020202; }

.media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #070707;
}
.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  filter: saturate(.95) contrast(1.08);
}
.slide.active .media img,
.slide.active .media video { animation: drift 13s ease-out both; }
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 35%, rgba(0,0,0,0) 0 28%, rgba(0,0,0,.22) 63%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.dim-20::before, .dim-25::before, .dim-28::before, .dim-30::before, .dim-35::before, .dim-50::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  pointer-events: none;
}
.dim-20::before { opacity: .20; }
.dim-25::before { opacity: .25; }
.dim-28::before { opacity: .28; }
.dim-30::before { opacity: .30; }
.dim-35::before { opacity: .35; }
.dim-50::before { opacity: .50; }

.brand-lockup,
.counter,
.fullscreen,
.hint {
  position: fixed;
  z-index: 30;
  letter-spacing: .14em;
  font-size: 11px;
  line-height: 1;
  color: rgba(246,243,238,.78);
}
.brand-lockup {
  position: absolute;
  top: var(--safe-y);
  left: var(--safe-x);
  z-index: 3;
  font-weight: 600;
}
.fullscreen {
  top: 18px;
  right: 22px;
  padding: 10px 12px;
  border: 1px solid rgba(246,243,238,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}
.fullscreen:hover { border-color: rgba(246,243,238,.44); transform: translateY(-1px); }
.counter { right: 28px; bottom: 24px; }
.hint { left: 28px; bottom: 24px; color: rgba(246,243,238,.38); }

.slide-copy,
.copy-panel,
.portfolio-header,
.closing-inner,
.small-line {
  position: absolute;
  z-index: 4;
}
.top-left { top: var(--safe-y); left: var(--safe-x); }
.bottom-left { left: var(--safe-x); bottom: var(--safe-y); }
.bottom-right { right: var(--safe-x); bottom: var(--safe-y); }
.right { right: var(--safe-x); top: 50%; transform: translateY(-50%); }
.center-left { left: var(--safe-x); top: 50%; transform: translateY(-50%); }
.center {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10dvh var(--safe-x);
}

.eyebrow {
  margin: 0 0 clamp(12px, 1.9dvh, 20px);
  color: var(--soft);
  font-size: clamp(10px, min(.85vw, 1.6dvh), 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
}
h1, h2 {
  margin: 0;
  max-width: 12ch;
  font-weight: 520;
  letter-spacing: -.065em;
  line-height: .89;
  text-wrap: balance;
}
h1 { font-size: clamp(54px, min(8.4vw, 10.2dvh), 128px); }
h2 { font-size: clamp(40px, min(6.4vw, 8.2dvh), 104px); }
.hero-copy h1 { max-width: 11ch; }
.typography-moment h2 { max-width: 14ch; }
.typography-moment h2 span { color: rgba(246,243,238,.56); }
.compact h2 { max-width: 12.5ch; font-size: clamp(36px, min(5.2vw, 7.1dvh), 86px); }
.wide h2 { max-width: 17ch; font-size: clamp(36px, min(5.7vw, 7.6dvh), 92px); }
.architectural-copy h2 { max-width: 12ch; }
.micro {
  max-width: 32ch;
  margin: clamp(16px, 3dvh, 28px) 0 0;
  color: var(--soft);
  font-size: clamp(15px, min(1.38vw, 2.2dvh), 21px);
  line-height: 1.28;
}
.small-line {
  left: var(--safe-x);
  bottom: var(--safe-y);
  color: var(--muted);
  letter-spacing: .17em;
  text-transform: uppercase;
  font-size: clamp(10px, min(.9vw, 1.6dvh), 13px);
}
.statement-card {
  width: min(42vw, 560px);
  padding: clamp(24px, 4.4vw, 56px);
  background: linear-gradient(140deg, rgba(3,3,3,.74), rgba(3,3,3,.28));
  border: 1px solid rgba(246,243,238,.13);
  backdrop-filter: blur(18px);
}
.statement-card h2 { font-size: clamp(34px, min(4.9vw, 6.9dvh), 78px); max-width: 10ch; }
.warm-card { background: linear-gradient(140deg, rgba(60,3,12,.72), rgba(3,3,3,.22)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: clamp(20px, 3vw, 42px);
  padding: var(--safe-y) var(--safe-x);
  align-items: stretch;
}
.split.reverse { grid-template-columns: .86fr 1.14fr; }
.panel,
.copy-panel {
  position: relative;
  inset: auto;
  width: 100%;
  height: calc(100dvh - (var(--safe-y) * 2));
  min-height: 0;
  border: 1px solid rgba(246,243,238,.10);
}
.panel img { transform: none; object-fit: cover; }
.copy-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: rgba(246,243,238,.14);
  padding: clamp(28px, 4.3vw, 64px);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
}
.copy-panel h2 { font-size: clamp(36px, min(5.6vw, 7.4dvh), 86px); max-width: 11ch; }
.tall-crop img { object-position: center 42%; }

.editorial-grid,
.installation-grid,
.portfolio-grid {
  position: absolute;
  z-index: 3;
  display: grid;
}
.range-grid {
  right: var(--safe-x);
  bottom: var(--safe-y);
  width: min(63vw, 940px);
  height: min(56dvh, 470px);
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
}
.range-grid figure:first-child { grid-row: span 2; }
.grid figure { margin: 0; position: relative; overflow: hidden; background: #111; }
.grid img, .portfolio-grid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.08); }
figcaption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: rgba(246,243,238,.78);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.installation-grid {
  right: var(--safe-x);
  bottom: var(--safe-y);
  width: min(66vw, 980px);
  height: min(61dvh, 520px);
  grid-template-columns: 1.35fr .8fr .8fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
}
.installation-grid .large { grid-row: span 2; }
.portfolio-header {
  top: var(--safe-y);
  left: var(--safe-x);
  right: var(--safe-x);
  display: flex;
  justify-content: space-between;
  gap: 34px;
  align-items: flex-start;
}
.portfolio-header h2 { max-width: 14ch; font-size: clamp(34px, min(4.4vw, 6.1dvh), 70px); }
.portfolio-grid {
  left: var(--safe-x);
  right: var(--safe-x);
  bottom: var(--safe-y);
  height: min(58dvh, 510px);
  grid-template-columns: 1.2fr .9fr 1.08fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
}
.portfolio-grid img:first-child { grid-row: span 2; }
.portfolio-grid img:nth-child(3) { grid-column: span 2; }

.closing-inner {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 12dvh var(--safe-x) 13dvh;
}
.closing-inner h2 {
  max-width: 15ch;
  font-size: clamp(44px, min(6.5vw, 8dvh), 102px);
}
.closing-line {
  margin: clamp(22px, 4dvh, 36px) 0 0;
  color: var(--soft);
  font-size: clamp(13px, min(1.25vw, 2dvh), 18px);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* The closing frame must never drift or sit partially outside the viewport. */
.closing-inner {
  transform: none !important;
  transition: opacity 740ms ease;
}

.slide-copy,
.copy-panel,
.portfolio-header,
.grid {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 740ms ease, transform 900ms var(--ease);
}
.closing-inner {
  opacity: 0;
}
.slide.active .slide-copy,
.slide.active .copy-panel,
.slide.active .portfolio-header,
.slide.active .closing-inner,
.slide.active .grid {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.slide.active .right,
.slide.active .center-left { transform: translateY(-50%); }

@keyframes drift {
  from { transform: scale(1.03); }
  to { transform: scale(1.085); }
}

@media (max-height: 780px) {
  :root { --safe-y: clamp(20px, 5.8dvh, 46px); --safe-x: clamp(24px, 4.4vw, 60px); }
  h1 { font-size: clamp(48px, min(7.5vw, 9dvh), 104px); }
  h2 { font-size: clamp(36px, min(5.8vw, 7.2dvh), 86px); }
  .statement-card { padding: clamp(22px, 3.4vw, 40px); }
  .portfolio-grid { height: 52dvh; }
  .range-grid, .installation-grid { height: 53dvh; }
}

@media (max-width: 900px) {
  .fullscreen, .hint { display: none; }
  .split, .split.reverse { display: block; padding: 0; }
  .panel { inset: 0; position: absolute; height: 100dvh; border: none; }
  .copy-panel {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 24px;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(14px);
  }
  .range-grid, .installation-grid, .portfolio-grid {
    left: 22px; right: 22px; width: auto; height: 50dvh;
    grid-template-columns: 1fr 1fr;
  }
  .portfolio-grid img:first-child, .installation-grid .large, .range-grid figure:first-child { grid-row: auto; }
  .portfolio-grid img:nth-child(3) { grid-column: auto; }
  .statement-card { width: calc(100vw - 44px); left: 22px; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .deck, .slide-copy, .copy-panel, .portfolio-header, .closing-inner, .grid { transition: none; }
  .slide.active .media img, .slide.active .media video { animation: none; }
}