/*
  =============================================================================
  NHgreen Architects · v3 "MONOGRAPH"
  =============================================================================
  CONCEPT: The work is the design. Photography dominates; type is restrained;
  whitespace is luxury. Inspired by Chipperfield, 6a Architects, John Pawson —
  architecture studios whose websites are visual books, not technical drawings.

  No paper grain. No graph grid. No drafting labels. No title blocks.
  Just photographs, restrained type, generous space, and one quiet accent.
  =============================================================================
*/

:root {
  /* ivory paper of a fine monograph */
  --paper:      #FAF8F2;
  --paper-2:    #F1ECE0;
  --ink:        #131611;
  --ink-2:      #2C2F26;
  --ink-3:      #6B6E60;
  --ink-faint:  #B8B5A4;
  --hair:       #DBD5C5;
  --hair-soft:  #ECE7D8;

  /* one accent — the signature shutter green */
  --moss:       #3F5A3A;
  --moss-deep:  #1F3019;

  /* secondary accents (sparingly used) */
  --gold:       #E8D689;   /* warm brass on dark sections */
  --yellow:     #E8D689;   /* alias */
  --terracotta: #9B4A2E;   /* brick / annotation accent */
  --red:        #9B4A2E;   /* alias for drafting annotations */
  --sheet:      #F1ECE0;   /* paper-2 alias */
  --grid-deep:  #DBD5C5;   /* hair alias */

  --shadow-sm:  0 1px 2px rgba(19,22,17,.04), 0 2px 8px rgba(19,22,17,.05);
  --shadow-lg:  0 30px 80px -20px rgba(19,22,17,.18), 0 8px 24px rgba(19,22,17,.06);

  /* type */
  --f-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --f-body:    "Inter Tight", "Inter", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* fluid scale */
  --s-2: 0.7rem;
  --s-1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --s0:  clamp(1rem, 0.92rem + 0.4vw, 1.12rem);
  --s1:  clamp(1.18rem, 1rem + 0.8vw, 1.4rem);
  --s2:  clamp(1.4rem, 1.15rem + 1.2vw, 1.85rem);
  --s3:  clamp(2rem, 1.4rem + 2.8vw, 3rem);
  --s4:  clamp(2.8rem, 1.8rem + 4.4vw, 5rem);
  --s5:  clamp(3.8rem, 2.4rem + 7vw, 7.5rem);
  --s6:  clamp(5rem, 3rem + 10vw, 11rem);

  /* spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 192px;

  --t-fast: 200ms cubic-bezier(.22,.61,.36,1);
  --t-mid:  450ms cubic-bezier(.22,.61,.36,1);
  --t-slow: 800ms cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"] {
  --paper:     #0E0F0B;
  --paper-2:   #16180F;
  --ink:       #EFEAD9;
  --ink-2:     #D5CFB9;
  --ink-3:     #8E8D77;
  --ink-faint: #4A4D3F;
  --hair:      #2A2D22;
  --hair-soft: #1E2017;
  --moss:      #92B488;
  --moss-deep: #C7DAB7;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--t-slow), color var(--t-slow);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.024em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  color: var(--ink);
}
h1 { font-size: var(--s5); }
h2 { font-size: var(--s4); }
h3 { font-size: var(--s2); }

em, .italic {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* caption — mono, small, restrained */
.cap {
  font-family: var(--f-mono);
  font-size: var(--s-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.cap--ink { color: var(--ink); }
.cap--white { color: var(--paper); }
.cap--moss { color: var(--moss); }

/* label — section eyebrow, same family as .cap (used across inner pages) */
.label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.label--ink   { color: var(--ink); }
.label--moss  { color: var(--moss); }
.label--white { color: color-mix(in oklab, var(--paper) 72%, transparent); }
.label--red   { color: var(--terracotta); }

/* container */
.container { width: min(100% - 56px, 1480px); margin: 0 auto; }
.container--tight { width: min(100% - 56px, 1180px); margin: 0 auto; }
.container--reading { width: min(100% - 56px, 760px); margin: 0 auto; }

/* ---------- NAV (minimal, clean) ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: var(--sp-5) 0;
  background: transparent;
  transition: padding var(--t-mid), background var(--t-mid), color var(--t-mid);
  color: var(--paper);
}
.nav:not(.scrolled):not(.nav--inverted) .brand__wm,
.nav:not(.scrolled):not(.nav--inverted) .brand__mark,
.nav:not(.scrolled):not(.nav--inverted) .nav__links a,
.nav:not(.scrolled):not(.nav--inverted) .brand__tag {
  text-shadow: 0 1px 14px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
.nav:not(.scrolled):not(.nav--inverted) .brand__mark svg path,
.nav:not(.scrolled):not(.nav--inverted) .brand__mark svg line {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.55));
}
.nav.scrolled {
  padding: var(--sp-3) 0;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  color: var(--ink);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.nav--inverted { color: var(--ink); }
.nav--inverted:not(.scrolled) {
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px) saturate(150%);
}
.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-7);
  align-items: center;
}

/* brand — clean wordmark with custom NH logomark */
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: inherit;
}
.brand__mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: inherit;
}
.brand__mark svg { width: 100%; height: 100%; }
.brand__wm {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-variation-settings: "opsz" 32, "SOFT" 40;
  letter-spacing: -0.012em;
  line-height: 1;
}
.brand__wm em {
  color: var(--moss);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.nav.scrolled .brand__wm em, .nav--inverted .brand__wm em { color: var(--moss); }
.brand__tag {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.7;
  margin-top: 4px;
}

.nav__links {
  display: inline-flex;
  gap: var(--sp-7);
  justify-content: center;
  font-family: var(--f-display);
}
.nav__links a {
  font-size: 0.98rem;
  color: currentColor;
  position: relative;
  padding: 6px 2px;
  transition: opacity var(--t-fast);
  opacity: 0.78;
}
.nav__links a:hover, .nav__links a[aria-current="page"] {
  opacity: 1;
}
.nav__links a[aria-current="page"] {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--moss);
}
.nav.scrolled .nav__links a[aria-current="page"],
.nav--inverted .nav__links a[aria-current="page"] {
  color: var(--moss);
}

.nav__right { display: inline-flex; align-items: center; gap: var(--sp-4); }

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: currentColor;
  transition: all var(--t-fast);
  border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
}
.icon-btn:hover {
  border-color: currentColor;
}
.icon-btn svg { width: 16px; height: 16px; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

/* button — quiet, refined */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--f-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  transition: all var(--t-fast);
  position: relative;
}
.btn:hover {
  background: currentColor;
}
.btn:hover > * { color: var(--paper); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.btn--ink:hover > * { color: var(--paper); }
.btn--moss { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.btn--moss:hover { background: var(--moss-deep); border-color: var(--moss-deep); }
.btn--moss:hover > * { color: var(--paper); }
.btn--ghost-white { color: var(--paper); border-color: var(--paper); }
.btn--ghost-white:hover { background: var(--paper); color: var(--ink); }
.btn--ghost-white:hover > * { color: var(--ink); }
/* gold accent button — used on dark CTA bands (replaces the old --red intent) */
.btn--red, .btn--gold {
  background: var(--gold); border-color: var(--gold); color: var(--moss-deep);
}
.btn--red:hover, .btn--gold:hover {
  background: var(--paper); border-color: var(--paper); color: var(--ink);
}
.btn--red:hover > *, .btn--gold:hover > * { color: var(--ink); }
.btn svg { width: 14px; height: 14px; }
/* subtle press feedback on every button */
.btn { will-change: transform; }
.btn:active { transform: scale(0.97); }

.menu-btn { display: none; }

/* mobile nav */
.mobile-nav {
  position: fixed; inset: 0; z-index: 100;
  background: var(--paper);
  display: none; flex-direction: column;
  padding: var(--sp-5);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.mobile-nav.open { display: flex; opacity: 1; }
.mobile-nav__top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--hair);
}
.mobile-nav__close {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--ink); display: grid; place-items: center; color: var(--ink);
}
.mobile-nav__links { display: flex; flex-direction: column; padding: var(--sp-6) 0; }
.mobile-nav__links a {
  font-family: var(--f-display);
  font-size: clamp(2rem, 8vw, 3rem);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hair-soft);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.mobile-nav__foot {
  margin-top: auto;
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.8;
}
.mobile-nav__foot strong { color: var(--ink); font-weight: 500; }

/* ---------- HERO · full-bleed photograph ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  color: var(--paper);
}
.hero__img {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  will-change: transform;
}
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.42) 12%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 50%);
}
.hero__content {
  position: relative; z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 110px 0 var(--sp-7);
}
.hero__center {
  align-self: end;
  max-width: 880px;
}
.hero__lede {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 1.4rem + 5vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 380;
  margin-bottom: var(--sp-6);
}
.hero__lede em {
  font-style: italic; color: var(--paper);
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 340;
  opacity: 0.92;
}
.hero__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid color-mix(in oklab, var(--paper) 28%, transparent);
}
.hero__caption {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 70%, transparent);
  line-height: 1.8;
  max-width: 36ch;
}
.hero__caption strong {
  display: block;
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 1.2rem; color: var(--paper);
  text-transform: none; letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  margin-bottom: 6px;
}
.hero__cta-wrap {
  display: flex; gap: var(--sp-4);
  justify-self: center;
}
.hero__meta-right {
  text-align: right;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 70%, transparent);
  line-height: 1.8;
}

/* scroll indicator */
.hero__scroll {
  position: absolute; bottom: var(--sp-7); left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: none;  /* hidden by default; only shown when no hero__bottom */
  flex-direction: column; align-items: center; gap: 8px;
  color: var(--paper);
}
.hero__scroll span {
  font-family: var(--f-mono); font-size: 0.66rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  opacity: 0.75;
}
.hero__scroll svg { width: 14px; height: 26px; opacity: 0.85; }

/* ---------- SECTION ---------- */
section { position: relative; }

.section--pad { padding: clamp(80px, 12vh, 160px) 0; }
.section--pad-lg { padding: clamp(120px, 16vh, 220px) 0; }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink .cap { color: color-mix(in oklab, var(--paper) 60%, transparent); }
.section--ink .cap--ink { color: var(--paper); }
.section--moss { background: var(--moss-deep); color: var(--paper); }
.section--moss h1, .section--moss h2, .section--moss h3 { color: var(--paper); }
.section--paper2 { background: var(--paper-2); }

/* ---------- THE OVERTURE (philosophy) ---------- */
.overture {
  padding: clamp(120px, 18vh, 200px) 0;
  border-bottom: 1px solid var(--hair);
}
.overture__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 7vw, 120px);
}
.overture__label .cap { display: block; margin-bottom: var(--sp-5); }
.overture__label__num {
  font-family: var(--f-display); font-style: italic;
  color: var(--moss);
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  line-height: 0.9;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
/* tall image fills the otherwise-empty label column */
.overture__label__img {
  display: block;
  margin-top: var(--sp-7);
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: var(--paper-2);
}
.overture__label__cap {
  display: block;
  font-family: var(--f-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  margin-top: var(--sp-3); line-height: 1.7;
}
.overture__body h2 {
  font-size: clamp(2rem, 1.4rem + 3.2vw, 4rem);
  line-height: 1.05;
  margin-bottom: var(--sp-6);
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 360;
  max-width: 22ch;
}
.overture__body h2 em { color: var(--moss); }
.overture__body p {
  font-size: var(--s1);
  color: var(--ink-2);
  max-width: 58ch;
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}
.overture__sig {
  margin-top: var(--sp-7);
  display: inline-flex; align-items: center; gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hair);
}
.overture__sig img {
  width: 92px; height: 92px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--hair);
}
.overture__sig--mark .overture__sig__svg {
  width: 132px; height: 36px;
  color: var(--moss);
  flex-shrink: 0;
}
.overture__sig__name {
  font-family: var(--f-display); font-style: italic;
  font-size: 1.2rem; font-variation-settings: "opsz" 144, "SOFT" 100;
}
.overture__sig__role {
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
  margin-top: 3px;
}

/* ---------- PROJECT FEATURE (full-bleed spread) ---------- */
.feature {
  padding: clamp(80px, 14vh, 160px) 0;
  border-bottom: 1px solid var(--hair);
}
.feature__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-5);
  align-items: end;
  margin-bottom: clamp(48px, 8vh, 80px);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--hair);
}
.feature__head .left {
  display: flex; flex-direction: column; gap: 12px;
}
.feature__head h2 {
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem);
  line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 360;
}
.feature__head h2 em { color: var(--moss); }
.feature__head .right {
  text-align: right; line-height: 1.7;
}
/* featured-project body — lead + specs + CTA (sits above the full-bleed photo) */
.feature__body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.feature__lead {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 40, "SOFT" 40, "wght" 380;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 30ch;
}
.feature__specs { list-style: none; border-top: 1px solid var(--ink); }
.feature__specs li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--hair);
  font-family: var(--f-mono); font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.feature__specs li span:first-child { color: var(--ink-3); }
.feature__specs li span:last-child { color: var(--ink); text-align: right; }
.feature__aside .btn { margin-top: var(--sp-5); }
@media (max-width: 1100px) {
  .feature__body { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* full-bleed photo */
.fb-photo {
  position: relative;
  width: 100%;
  height: clamp(60vh, 80vh, 720px);
  overflow: hidden;
  background: var(--paper-2);
}
.fb-photo img { width: 100%; height: 100%; object-fit: cover; }
.fb-photo__cap {
  position: absolute; left: var(--sp-7); bottom: var(--sp-7);
  background: var(--paper);
  padding: var(--sp-4) var(--sp-5);
  max-width: 360px;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.8;
}
.fb-photo__cap strong {
  display: block;
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 1.3rem; color: var(--ink);
  text-transform: none; letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  margin-bottom: 4px;
}
.fb-photo__cap em { color: var(--moss); }

/* split feature: photo left, text right */
.split-feature {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  padding: clamp(80px, 14vh, 160px) 0;
  border-bottom: 1px solid var(--hair);
}
.split-feature--reverse { grid-template-columns: 1fr 1.2fr; }
.split-feature--reverse .split-feature__photo { order: 2; }

.split-feature__photo {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--paper-2);
}
.split-feature__photo img { width: 100%; height: 100%; object-fit: cover; }

.split-feature__copy h3 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  line-height: 1.02;
  margin: var(--sp-3) 0 var(--sp-5);
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 360;
}
.split-feature__copy h3 em { color: var(--moss); }
.split-feature__copy p {
  font-size: var(--s1);
  color: var(--ink-2);
  margin-bottom: var(--sp-4);
  line-height: 1.65;
  max-width: 48ch;
}

/* ---------- PROJECT GRID (monograph "plates") ---------- */
.plates {
  padding: clamp(100px, 14vh, 160px) 0;
  border-bottom: 1px solid var(--hair);
}
.plates__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 100px) clamp(40px, 5vw, 80px);
}
.plate { display: block; color: inherit; }
.plate__photo {
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: var(--sp-5);
  background: var(--paper-2);
  position: relative;
}
.plate__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms cubic-bezier(.22,.61,.36,1), filter 800ms;
}
.plate:hover .plate__photo img { transform: scale(1.03); filter: brightness(0.95); }
.plate__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-4);
  padding-top: var(--sp-3);
}
.plate__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 380;
  line-height: 1.05;
  flex: 1;
}
.plate__title em { color: var(--moss); }
.plate__loc {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  align-self: center;
  text-align: right;
  line-height: 1.6;
}

.plates--alt .plate:nth-child(even) { margin-top: clamp(48px, 8vw, 120px); }

/* ---------- PROJECT WIDE STRIP (1 hero, 2 thumbs) ---------- */
.proj-strip {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-5);
  padding: clamp(80px, 12vh, 160px) 0;
  border-bottom: 1px solid var(--hair);
}
.proj-strip__big {
  aspect-ratio: 4/3.4;
  overflow: hidden; background: var(--paper-2);
}
.proj-strip__big img { width: 100%; height: 100%; object-fit: cover; }
.proj-strip__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-5);
}
.proj-strip__sm {
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: auto;
}
.proj-strip__sm img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- PULL QUOTE ---------- */
.pull {
  padding: clamp(80px, 14vh, 160px) 0;
  text-align: center;
}
.pull blockquote {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1.2rem + 2.4vw, 3.2rem);
  line-height: 1.2;
  font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 360;
  max-width: 22ch;
  margin: 0 auto;
  letter-spacing: -0.018em;
}
.pull blockquote em { color: var(--moss); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; }
.pull blockquote::before,
.pull blockquote::after {
  content: ""; display: block;
  width: 40px; height: 1px;
  background: var(--ink);
  margin: var(--sp-7) auto;
  opacity: 0.4;
}
.pull__cite {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--sp-5);
}
.pull__cite strong {
  display: block;
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 1.1rem; color: var(--ink);
  text-transform: none; letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  margin-bottom: 4px;
}

/* ---------- BIG CTA STRIP ---------- */
.cta {
  padding: clamp(100px, 16vh, 200px) 0;
  text-align: center;
}
.cta h2 {
  font-size: clamp(2.8rem, 1.8rem + 4.4vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 340;
  margin-bottom: var(--sp-5);
}
.cta h2 em { color: var(--moss); }
.cta .lede {
  font-size: var(--s1);
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0 auto var(--sp-7);
}
.section--ink.cta .lede { color: color-mix(in oklab, var(--paper) 78%, transparent); }
.section--moss.cta .lede { color: color-mix(in oklab, var(--paper) 90%, transparent); }
.section--moss.cta h2 em { color: color-mix(in oklab, var(--paper) 70%, transparent); font-style: italic; }
.section--moss .cta__info > div strong { color: color-mix(in oklab, var(--paper) 65%, transparent); }
.section--moss .cta__info { border-top-color: color-mix(in oklab, var(--paper) 25%, transparent); }
.section--moss .cta__info > div { color: var(--paper); }
.cta__buttons {
  display: inline-flex; gap: var(--sp-4); flex-wrap: wrap;
  justify-content: center;
}
.cta__info {
  margin-top: var(--sp-9); padding-top: var(--sp-7);
  border-top: 1px solid color-mix(in oklab, currentColor 15%, transparent);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  text-align: left;
  max-width: 880px; margin-left: auto; margin-right: auto;
}
.cta__info > div { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em; line-height: 1.7; }
.cta__info > div strong {
  display: block;
  font-family: var(--f-mono); font-size: 0.66rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 8px; font-weight: 500;
}

/* inner-page CTA — a self-contained dark panel (deterministic colours) */
.cta__grid {
  display: grid;
  grid-template-columns: 1.6fr auto;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  text-align: left;
  background:
    radial-gradient(120% 140% at 85% 0%, color-mix(in oklab, var(--moss) 32%, var(--moss-deep)) 0%, var(--moss-deep) 60%);
  color: var(--paper);
  border-radius: 6px;
  padding: clamp(44px, 6vw, 92px);
  position: relative;
  overflow: hidden;
}
.cta__grid::after {
  /* faint shutter-slat texture, top-right */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 26px, color-mix(in oklab, var(--paper) 4%, transparent) 26px 27px);
  -webkit-mask: linear-gradient(250deg, #000 0%, transparent 55%);
          mask: linear-gradient(250deg, #000 0%, transparent 55%);
  opacity: .5;
}
.cta__copy { position: relative; z-index: 1; }
.cta__copy .label, .cta__copy .label--white {
  color: color-mix(in oklab, var(--paper) 66%, transparent);
}
.cta__copy h2 {
  color: var(--paper);
  font-size: clamp(2.1rem, 1.5rem + 3vw, 3.8rem);
  line-height: 1;
  margin: var(--sp-4) 0 var(--sp-4);
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 350;
}
.cta__copy h2 em { color: var(--gold); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; }
.cta__copy p {
  color: color-mix(in oklab, var(--paper) 82%, transparent);
  max-width: 50ch; font-size: var(--s1); line-height: 1.65;
}
.cta__grid .btn { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .cta__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cta__grid .btn { justify-self: start; }
}

/* ---------- FOOTER ---------- */
footer {
  background: var(--ink); color: var(--paper);
  padding: clamp(100px, 14vh, 160px) 0 var(--sp-7);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-7);
  align-items: end;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid color-mix(in oklab, var(--paper) 18%, transparent);
}
.foot__top h2 {
  font-size: clamp(3rem, 2rem + 5vw, 7rem);
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 340;
  line-height: 0.92;
  color: var(--paper);
}
.foot__top h2 em { font-style: italic; color: var(--moss); font-variation-settings: "opsz" 144, "SOFT" 100; }
.foot__top__right {
  font-family: var(--f-mono); font-size: 0.74rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 65%, transparent);
  text-align: right; line-height: 1.7;
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  padding: var(--sp-9) 0 var(--sp-7);
}
.foot__brand p {
  margin-top: var(--sp-4);
  color: color-mix(in oklab, var(--paper) 75%, transparent);
  font-size: 0.96rem;
  line-height: 1.65;
  max-width: 32ch;
}
.foot__socials {
  display: flex; gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.foot__socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--paper) 30%, transparent);
  display: grid; place-items: center;
  color: var(--paper);
  transition: all var(--t-fast);
}
.foot__socials a:hover { background: var(--moss); border-color: var(--moss); }
.foot__socials svg { width: 16px; height: 16px; }

.foot__col h4 {
  font-family: var(--f-mono);
  font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 55%, transparent);
  font-weight: 500; margin-bottom: var(--sp-4);
}
.foot__col ul { list-style: none; }
.foot__col li { margin-bottom: var(--sp-3); }
.foot__col a {
  font-size: 0.96rem;
  color: color-mix(in oklab, var(--paper) 88%, transparent);
  transition: color var(--t-fast);
}
.foot__col a:hover { color: var(--moss); }

.foot__bottom {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 55%, transparent);
}
.foot__bottom a { color: var(--moss); border-bottom: 1px dotted var(--moss); }
.foot__bottom a:hover { color: var(--paper); border-color: var(--paper); }

/* ---------- INSIDE THE STUDIO · 5-tile editorial collage ---------- */
.studio-life {
  border-bottom: 1px solid var(--hair);
}
.studio-life__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: clamp(16px, 2vw, 28px);
}
.studio-life figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--paper-2);
}
.studio-life figure img,
.studio-life figure video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms cubic-bezier(.22,.61,.36,1);
  display: block;
}
.studio-life figure:hover img,
.studio-life figure:hover video { transform: scale(1.03); }
.studio-life--video::before {
  content: "REEL";
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 0.62rem; letter-spacing: 0.28em;
  color: var(--paper);
  padding: 6px 10px;
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 2px;
}
.studio-life figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-7) var(--sp-5) var(--sp-4);
  background: linear-gradient(to top, rgba(19,22,17,0.85) 0%, rgba(19,22,17,0) 100%);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
}
.studio-life figcaption strong {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--paper);
  text-transform: none;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  margin-bottom: 4px;
}

/* asymmetric editorial layout (desktop) */
.studio-life__a { grid-column: span 7; grid-row: span 2; aspect-ratio: 4/3; }
.studio-life__b { grid-column: span 5; aspect-ratio: 4/3; }
.studio-life__c { grid-column: span 5; aspect-ratio: 4/3; }
.studio-life__d { grid-column: span 4; aspect-ratio: 4/4.4; }
.studio-life__e { grid-column: span 8; aspect-ratio: 4/2.4; }

@media (max-width: 1100px) {
  .studio-life__grid { grid-template-columns: repeat(6, 1fr); }
  .studio-life__a { grid-column: span 6; aspect-ratio: 4/3; }
  .studio-life__b { grid-column: span 3; aspect-ratio: 4/4.4; }
  .studio-life__c { grid-column: span 3; aspect-ratio: 4/4.4; }
  .studio-life__d { grid-column: span 3; aspect-ratio: 4/4.4; }
  .studio-life__e { grid-column: span 3; aspect-ratio: 4/4.4; }
}
@media (max-width: 600px) {
  .studio-life__grid { grid-template-columns: 1fr; }
  .studio-life__a, .studio-life__b, .studio-life__c, .studio-life__d, .studio-life__e {
    grid-column: span 1; aspect-ratio: 4/3.4;
  }
}

/* ---------- READABILITY POLISH ---------- */
/* Slightly larger body, more line-height for breathing */
body { font-size: 17px; line-height: 1.6; }
.overture__body p, .split-feature__copy p {
  font-size: clamp(1.06rem, 0.96rem + 0.4vw, 1.18rem);
  line-height: 1.72;
  letter-spacing: -0.005em;
}
.hero__caption, .fb-photo__cap, .hero__meta-right {
  line-height: 1.85;
}
/* tighten very large headlines so they don't feel sparse */
.overture__body h2, .feature__head h2 {
  letter-spacing: -0.022em;
}
/* improve nav legibility on hero — scrim behind the bar + stronger shadow */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,9,0.62) 0%, rgba(10,12,9,0.28) 55%, rgba(10,12,9,0) 100%);
  opacity: 0; transition: opacity var(--t-mid);
}
.nav:not(.scrolled):not(.nav--inverted)::before { opacity: 1; }
.nav:not(.scrolled):not(.nav--inverted) {
  text-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 2px 18px rgba(0,0,0,0.35);
}
.nav.scrolled::before, .nav--inverted::before { opacity: 0; }
.nav.scrolled, .nav--inverted { text-shadow: none; }

/* ---------- REVEAL / UTILITY ---------- */
.reveal { opacity: 1; transform: none; }
.reveal--hidden { opacity: 0; transform: translateY(30px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .overture__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .feature__head { grid-template-columns: 1fr; gap: var(--sp-3); }
  .feature__head .right { text-align: left; }
  .split-feature { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split-feature--reverse .split-feature__photo { order: -1; }
  .plates__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .plates--alt .plate:nth-child(even) { margin-top: 0; }
  .proj-strip { grid-template-columns: 1fr; }
  .cta__info { grid-template-columns: 1fr; gap: var(--sp-5); }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .menu-btn { display: grid; }
  .nav__inner { grid-template-columns: auto auto; justify-content: space-between; }
  .hero__bottom { grid-template-columns: 1fr; gap: var(--sp-5); padding-top: var(--sp-5); }
  .hero__meta-right { text-align: left; }
  .hero__cta-wrap { justify-self: start; }
  .fb-photo__cap { left: var(--sp-4); bottom: var(--sp-4); padding: var(--sp-3); max-width: 78%; }
  .foot__top { grid-template-columns: 1fr; gap: var(--sp-4); }
  .foot__top__right { text-align: left; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
}

@media (max-width: 600px) {
  .container, .container--tight, .container--reading { width: calc(100% - 32px); }
  .foot__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
  .hero { height: 100dvh; min-height: 560px; }
}

/* =============================================================================
   PREMIUM MOTION LAYER  ·  v4
   Award-site interactions, all transform/opacity, native scroll (no Lenis),
   fail-open (JS adds the "hidden" state; if JS dies, content stays visible),
   and fully disabled under prefers-reduced-motion at the bottom of this file.
   ============================================================================= */

/* scroll progress — a hairline moss bar pinned to the very top */
.scrollbar-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--moss);
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 200; pointer-events: none;
  will-change: transform;
}

/* HERO · slow ken-burns drift on the photograph */
.js-anim .hero__img img { animation: kenburns 22s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.12) translateY(-1.2%); }
  to   { transform: scale(1.02) translateY(0); }
}
/* hero bottom bar — set hidden by JS, revealed by GSAP; this is the fallback */
.js-anim .hero__bottom > * { will-change: transform, opacity; }

/* HEADING LINE-MASK · each <br>-separated line rises out of a clip */
.lines-split { /* set by JS */ }
.lines-split .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
/* NOTE: initial hidden offset is applied by GSAP via yPercent (gsap.set), NOT here —
   a CSS translateY(%) is read by GSAP as px (y) and would never be undone by yPercent:0,
   leaving the text permanently clipped. Keep this transform-free. */
.lines-split .line__inner { display: block; will-change: transform; }

/* CLIP IMAGE REVEAL · container unmasks bottom→top as it scrolls in */
.js-anim .clip-reveal { clip-path: inset(0 0 100% 0); will-change: clip-path; }
.js-anim .clip-reveal.is-in { clip-path: inset(0 0 0% 0); transition: clip-path 1100ms cubic-bezier(.22,.61,.36,1); }

/* NAV auto-hide on scroll-down, reveal on scroll-up */
.nav { transition: transform var(--t-mid), padding var(--t-mid), background var(--t-mid), color var(--t-mid); }
.nav--hidden { transform: translateY(-100%); }

/* MAGNETIC button wrapper (desktop only, set by JS) */
.magnetic { display: inline-flex; will-change: transform; }

/* KINETIC MARQUEE band (homepage + re-enabled subtickers) */
.marquee {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: var(--sp-5) 0;
  overflow: hidden;
  background: var(--paper);
}
.marquee__track {
  display: inline-flex; white-space: nowrap;
  will-change: transform;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 360;
  letter-spacing: -0.02em;
  padding: 0 var(--sp-5);
  color: var(--ink);
}
.marquee span em { color: var(--moss); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; }
.marquee .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--moss); vertical-align: middle; margin: 0 var(--sp-4);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  /* force every motion primitive to its resting/visible state */
  .clip-reveal { clip-path: none !important; }
  .lines-split .line__inner { transform: none !important; }
  .hero__img img { animation: none !important; transform: scale(1.02) !important; }
  .scrollbar-progress { display: none !important; }
  .marquee__track { animation: none !important; }
  .nav--hidden { transform: none !important; }
}