/* ───────────────────────────────────────────────────────────────
   NCMP Architects — bespoke type & layout system
   Gotham Greek · white paper · whitespace as the primary material
   ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Gotham Greek";
  src: url("fonts/GothamGreek-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham Greek";
  src: url("fonts/GothamGreek-Book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham Greek";
  src: url("fonts/GothamGreek-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham Greek";
  src: url("fonts/GothamGreek-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --paper:        #ffffff;
  --paper-warm:   oklch(0.965 0.004 80);
  --paper-deep:   oklch(0.93 0.004 80);
  --ink:          oklch(0.18 0.006 60);
  --ink-soft:     oklch(0.42 0.005 60);
  --ink-quiet:    oklch(0.62 0.005 60);
  --rule:         oklch(0.86 0.005 60);
  --ember:        oklch(0.55 0.18 28);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --m: 6vw;             /* page outer margin */
  --m-tight: 3.2vw;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Gotham Greek", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
body { cursor: none; }
@media (pointer: coarse) { body { cursor: auto; } }

img { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; cursor: none; }
@media (pointer: coarse) { a { cursor: pointer; } }

/* ─── Type scale ─── */
.eyebrow {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow-quiet { color: var(--ink-quiet); }
.lede {
  font-weight: 300;
  font-size: clamp(28px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.lede em {
  font-style: normal;
  color: var(--ember);
  font-weight: 300;
}
.body {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.body-tight {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.label {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.title {
  font-weight: 700;
  font-size: clamp(36px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

/* ─── Custom cursor ─── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--ink);
  border-radius: 50%;
  transition: opacity 0.3s var(--ease-out), background 0.3s, width 0.3s, height 0.3s;
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out), opacity 0.4s, border-color 0.3s;
  mix-blend-mode: difference;
}
body.cursor-hover .cursor-ring { width: 64px; height: 64px; border-color: var(--ember); }
body.cursor-hover .cursor-dot  { background: var(--ember); width: 4px; height: 4px; }
body.cursor-click .cursor-ring { width: 28px; height: 28px; }
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ─── Top chrome (mark + index) ─── */
.chrome {
  position: fixed;
  top: 28px; left: 0; right: 0;
  padding: 0 var(--m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  mix-blend-mode: difference;
  color: #fff;
  transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
body.menu-open .chrome {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
.chrome .mark {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.15em;
}
.chrome .mark span { font-weight: 300; opacity: 0.7; }
.index-btn {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.index-btn .dotgrid {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 2px;
}
.index-btn .dotgrid i {
  width: 4px; height: 4px;
  background: currentColor;
  border-radius: 50%;
  transition: transform 0.4s var(--ease-out);
}
.index-btn:hover .dotgrid i:nth-child(odd) { transform: scale(0.5); }

/* ─── Sections ─── */
section { position: relative; }
.section-rule {
  border-top: 1px solid var(--rule);
  margin: 0 var(--m);
}

/* ─── HERO (big-image stage with auto-rotating projects) ─── */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

/* The big image stage on the right */
.hero-stage {
  position: absolute;
  top: 0; right: 0;
  width: 64%;
  height: 100vh;
  overflow: hidden;
  background: var(--paper-warm);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);            /* closed curtain */
  transition: clip-path 1.4s var(--ease-out), opacity 0.4s linear 0.1s;
  will-change: clip-path, opacity;
}
.hero-slide.is-active {
  opacity: 1;
  clip-path: inset(0 0 0 0);                 /* curtain open */
  transition: clip-path 1.6s var(--ease-out), opacity 0.4s linear;
  z-index: 2;
}
.hero-slide.is-leaving {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.4s var(--ease-out), opacity 0.6s linear 0.6s;
  z-index: 1;
}
.hero-slide.is-leaving::after {
  /* a paper veil that wipes across the leaving slide for a quiet handover */
  content: "";
  position: absolute; inset: 0;
  background: var(--paper);
  clip-path: inset(0 100% 0 0);
  animation: paperWipe 1.4s var(--ease-out) forwards;
}
@keyframes paperWipe {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 8s var(--ease-out);
}
.hero-slide.is-active img { transform: scale(1.0); }    /* slow Ken Burns */

/* Initial page-load reveal — slit grows to full size */
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: inset(0 0 0 0);
  pointer-events: none;
  z-index: 5;
  animation: stageOpen 1.6s 0.2s var(--ease-out) forwards;
}
@keyframes stageOpen {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 100% 0); }
}

/* Left editorial column */
.hero-edit {
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100vh;
  padding: 22vh var(--m) 8vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
}

.hero-mark {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-mark .line { width: 36px; height: 1px; background: var(--ink-soft); }
.hero-mark .sub { color: var(--ink-quiet); font-weight: 400; }

.hero-titleblock {
  position: relative;
  margin-top: 4vh;
}
.hero-titleblock .index-num {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--ember);
  margin-bottom: 2vh;
  display: block;
}
.hero-titleblock .stack {
  position: relative;
  height: clamp(120px, 22vh, 240px);
  overflow: hidden;
}
.hero-title {
  position: absolute;
  top: 0; left: 0; right: 0;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  hyphens: manual;
  overflow-wrap: break-word;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.6s, transform 1.1s var(--ease-out);
}
.hero-title.is-active {
  opacity: 1;
  transform: translateY(0);
}
.hero-title.is-leaving {
  opacity: 0;
  transform: translateY(-30%);
  transition: opacity 0.5s, transform 1.0s var(--ease-out);
}
.hero-title em {
  font-style: normal;
  font-weight: 300;
  display: block;
  font-size: 0.42em;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-top: 0.6em;
  text-transform: none;
}

.hero-meta {
  margin-top: 3vh;
  position: relative;
  height: 60px;
  overflow: hidden;
}
.hero-meta-row {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  gap: 28px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.9s var(--ease-out);
}
.hero-meta-row.is-active { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.hero-meta-row.is-leaving { opacity: 0; transform: translateY(-12px); transition-delay: 0s; }
.hero-meta-row .quiet { color: var(--ink-quiet); font-weight: 400; }

.hero-controls {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero-thumbs {
  display: flex;
  gap: 14px;
}
.hero-thumb {
  flex: 0 0 56px;
  height: 72px;
  overflow: hidden;
  position: relative;
  opacity: 0.55;
  filter: grayscale(0.3);
  transition: opacity 0.5s, filter 0.5s, transform 0.5s var(--ease-out);
  cursor: pointer;
  background: var(--paper-warm);
}
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-thumb.is-active { opacity: 1; filter: none; transform: translateY(-4px); }
.hero-thumb:hover { opacity: 1; filter: none; }
.hero-thumb .tnum {
  position: absolute;
  bottom: 4px; left: 6px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.hero-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-quiet);
}
.hero-progress .bar {
  flex: 1;
  height: 1px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.hero-progress .bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 100%;
  background: var(--ink);
  transform: translateX(-100%);
  animation: heroProgress 6s linear infinite;
}
.hero-progress.is-paused .bar::before { animation-play-state: paused; }
@keyframes heroProgress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0%); }
}
.hero-progress .count em { font-style: normal; color: var(--ink); }

/* Open-project hover affordance over the stage */
.hero-stage::before {
  content: "View project ↗";
  position: absolute;
  bottom: 6vh; right: 4vw;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.5s var(--ease-out);
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.hero-stage:hover::before { opacity: 1; transform: translateY(0); }

/* Brand wordmark intro overlay */
.hero-intro {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: heroIntroOut 0.9s 2.1s var(--ease-in-out) forwards;
}
.hero-intro .word {
  font-weight: 900;
  font-size: clamp(80px, 18vw, 280px);
  letter-spacing: -0.04em;
  line-height: 1;
  display: flex;
  gap: 0.02em;
  color: var(--ink);
}
.hero-intro .word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  animation: heroIntroLetter 0.7s var(--ease-out) forwards;
}
.hero-intro .word span:nth-child(1) { animation-delay: 0.15s; }
.hero-intro .word span:nth-child(2) { animation-delay: 0.30s; }
.hero-intro .word span:nth-child(3) { animation-delay: 0.45s; }
.hero-intro .word span:nth-child(4) { animation-delay: 0.60s; }
@keyframes heroIntroLetter {
  0%   { opacity: 0; transform: translateY(60%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroIntroOut {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}

@media (max-width: 880px) {
  .hero-stage { width: 100%; height: 60vh; }
  .hero-edit  { width: 100%; height: auto; position: relative; top: 60vh; padding: 6vh var(--m); }
  .hero { min-height: calc(60vh + 50vh); }
  .hero-titleblock .stack { height: 120px; }
}

/* ─── Reveal ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-clip] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.4s var(--ease-out);
}
[data-reveal-clip].in {
  clip-path: inset(0 0 0 0);
}

/* ─── Projects index (home section) ─── */
.projects-list {
  padding: 16vh var(--m) 12vh;
  position: relative;
}
.projects-list .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8vh;
}
.proj-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: end;
  gap: 4vw;
  padding: 2.6vh 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: padding 0.6s var(--ease-out);
}
.proj-row:first-of-type { border-top: 1px solid var(--rule); }
.proj-row .pname {
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 0.7s var(--ease-out), color 0.4s;
}
.proj-row:hover .pname { transform: translateX(20px); color: var(--ember); }
.proj-row .pmeta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}
.proj-row .pyear { font-weight: 700; color: var(--ink); }
.proj-row .arrow {
  font-size: 18px;
  transform: translateX(-6px);
  opacity: 0.4;
  transition: transform 0.5s var(--ease-out), opacity 0.4s;
}
.proj-row:hover .arrow { transform: translateX(0); opacity: 1; }

.proj-row .peek {
  position: absolute;
  right: 14vw; top: 50%;
  width: 22vw; max-width: 320px;
  aspect-ratio: 4 / 5;
  transform: translate(0, -50%) scale(0.94);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.3);
}
.proj-row:hover .peek { opacity: 1; transform: translate(0, -50%) scale(1); }
.proj-row .peek img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Studio block ─── */
.studio {
  padding: 6vh var(--m) 10vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: start;
}
.studio .col-tag { padding-top: 8px; }
.studio .lede { max-width: 680px; }
.studio-aside {
  margin-top: 8vh;
  padding: 0 var(--m);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4vw;
}
.studio-aside .stat .label { display: block; color: var(--ink-quiet); margin-bottom: 8px; }
.studio-aside .stat .val {
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.02em;
}

/* ─── Contact block ─── */
.contact {
  padding: 14vh var(--m) 6vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: end;
}
.contact .heading {
  font-weight: 300;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.025em;
}
.contact .heading em {
  font-style: normal;
  color: var(--ember);
}
.contact .right { display: grid; gap: 28px; }
.contact .right .group { display: grid; gap: 6px; }
.contact .right a {
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  display: inline-block;
  width: max-content;
  transition: border-color 0.4s;
}
.contact .right a:hover { border-color: var(--ember); color: var(--ember); }

/* ─── Footer with the GIANT NCMP wordmark ─── */
.foot {
  position: relative;
  padding: 8vh var(--m) 28px;
  background: var(--paper);
}
.foot .above {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 6vh;
  gap: 4vw;
  flex-wrap: wrap;
}
.foot .menu {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px 56px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.foot .menu a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
}
.foot .menu a::before {
  content: "";
  position: absolute;
  left: -18px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember);
  transform: translateY(-50%) scale(0);
  transition: transform 0.4s var(--ease-out);
}
.foot .menu a:hover::before { transform: translateY(-50%) scale(1); }
.foot .menu a:hover { color: var(--ember); }

.foot .contact-strip {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  display: grid;
  gap: 2px;
  text-align: right;
}
.foot .contact-strip .lbl { font-size: 9px; letter-spacing: 0.25em; color: var(--ink-quiet); text-transform: uppercase; }

.brandmark {
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.04em;
  font-size: 26vw;
  margin: 0 -0.04em;
  user-select: none;
  display: flex;
  justify-content: space-between;
  color: oklch(0.92 0.003 80);          /* very light grey */
}
.brandmark span {
  display: inline-block;
}
.brandmark .glyph {
  display: inline-block;
  transition: transform 0.7s var(--ease-out), color 0.7s;
  transform-origin: 50% 100%;
}
.brandmark:hover .glyph:nth-child(1) { transform: translateY(-0.02em); }
.brandmark:hover .glyph:nth-child(2) { color: var(--ember); }
.brandmark:hover .glyph:nth-child(3) { transform: translateY(-0.02em); }
.brandmark:hover .glyph:nth-child(4) { transform: rotate(-3deg); }

.foot .colophon {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* ─── INDEX overlay (slide-down full nav) ─── */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.9s var(--ease-in-out);
  padding: 80px var(--m) var(--m);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;        /* clip nav overflow so closed overlay doesn't peek */
}
.overlay.open { transform: translateY(0); }
.overlay::before {
  /* solid white shield, isolates overlay from mix-blend-mode chrome above */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  z-index: -1;
}
.overlay .brand-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6vh;
}
.overlay .brand-line .mark {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.15em;
}
.overlay .brand-line .mark span { font-weight: 300; opacity: 0.7; }
.overlay .close {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.overlay .close::after {
  content: "";
  width: 14px; height: 14px;
  background:
    linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%);
}
.overlay nav {
  align-self: center;
  display: grid;
  gap: 3vh;
  min-height: 0;            /* allow grid track to shrink */
  overflow-y: auto;         /* if content > viewport, scroll instead of overflow */
  scrollbar-width: none;
}
.overlay nav::-webkit-scrollbar { display: none; }
.overlay nav a {
  font-weight: 700;
  font-size: clamp(36px, 7vw, 110px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 24px;
  transition: color 0.4s, transform 0.6s var(--ease-out);
}
.overlay nav a .n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ink-quiet);
  transform: translateY(-0.5em);
}
.overlay nav a:hover { color: var(--ember); transform: translateX(20px); }
.overlay .footer-strip {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* ─── Project detail page ─── */
.project-hero {
  padding: 22vh var(--m) 8vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: end;
  min-height: 100vh;
}
.project-hero .left .eyebrow { margin-bottom: 32px; }
.project-hero .title {
  margin-bottom: 28px;
}
.project-hero .pmeta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 32px;
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-top: 4vh;
}
.project-hero .pmeta-grid dt {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-size: 10px;
  letter-spacing: 0.22em;
  padding-top: 4px;
}
.project-hero .pmeta-grid dd { font-weight: 400; color: var(--ink); }

.project-hero .right {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.project-hero .right img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Scattered photo composition for case study ─── */
.canvas-section {
  position: relative;
  padding: 12vh var(--m);
}
.scatter {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12vh 2vw;
}
.scatter .frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-warm);
}
.scatter .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.scatter .frame:hover img { transform: scale(1.03); }
.scatter .cap {
  position: absolute;
  bottom: -22px; left: 0;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-weight: 700;
}
.scatter .cap .n { color: var(--ember); margin-right: 8px; }

.txt-block {
  padding: 14vh var(--m);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: start;
}
.txt-block .col-tag .label { color: var(--ink-quiet); }
.txt-block p + p { margin-top: 1.2em; }
.txt-block .pull {
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 28ch;
}

/* Project next / prev */
.next-project {
  padding: 18vh var(--m) 10vh;
  border-top: 1px solid var(--rule);
}
.next-project a {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 4vw;
  align-items: center;
  padding: 4vh 0;
}
.next-project .nlabel { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-quiet); font-weight: 700; }
.next-project .ntitle {
  font-weight: 700;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: color 0.4s, transform 0.7s var(--ease-out);
}
.next-project a:hover .ntitle { color: var(--ember); transform: translateX(20px); }
.next-project .nthumb {
  width: 22vw; max-width: 320px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.next-project .nthumb img { width:100%; height:100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.next-project a:hover .nthumb img { transform: scale(1.06); }

/* ─── Filmstrip — horizontal scroll-revealing sequence ─── */
.filmstrip-section {
  padding: 10vh 0 14vh;
  position: relative;
}
.filmstrip-head {
  padding: 0 var(--m);
  margin-bottom: 6vh;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.filmstrip-head .label { color: var(--ink-quiet); }
.filmstrip {
  display: flex;
  gap: 1.6vw;
  padding: 0 var(--m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filmstrip::-webkit-scrollbar { display: none; }
.strip-frame {
  flex: 0 0 auto;
  position: relative;
  width: 28vw;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--paper-warm);
}
.strip-frame:nth-child(odd) { margin-top: 4vh; }
.strip-frame:nth-child(3n)  { width: 36vw; aspect-ratio: 16 / 10; margin-top: 0; }
.strip-frame:nth-child(5n)  { width: 22vw; aspect-ratio: 3 / 4; margin-top: 8vh; }
.strip-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.strip-frame:hover img { transform: scale(1.05); }
.strip-num {
  position: absolute;
  top: 14px; left: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
@media (max-width: 880px) {
  .strip-frame { width: 70vw !important; aspect-ratio: 4/5 !important; margin-top: 0 !important; }
}

/* Plan figure (architecture drawing on white) */
.plan-figure {
  padding: 10vh var(--m);
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 4vw;
  align-items: start;
}
.plan-figure .plan-img {
  background: var(--paper-warm);
  padding: 6vh 4vw;
}
.plan-figure .plan-img img { width: 100%; mix-blend-mode: multiply; }
.plan-figure .plan-meta .label { color: var(--ink-quiet); }

/* ─── Responsive ─── */
@media (max-width: 880px) {
  .hero-base { flex-direction: column; align-items: flex-start; gap: 4vh; }
  .studio { grid-template-columns: 1fr; gap: 4vh; }
  .studio-aside { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; gap: 6vh; }
  .project-hero { grid-template-columns: 1fr; gap: 6vh; padding-top: 16vh; }
  .txt-block { grid-template-columns: 1fr; }
  .plan-figure { grid-template-columns: 1fr; }
  .proj-row { grid-template-columns: 1fr auto; gap: 2vw; }
  .proj-row .pmeta { display: none; }
  .proj-row .peek { display: none; }
  .brandmark { font-size: 32vw; }
}