/* ============================================================
   ISADORA CAMPOS, "Atelier Editorial"
   Heritage design-house aesthetic. Warm bone canvas, deep olive
   & cinnamon accents, mahogany depths. Cormorant Garamond (display),
   Pinyon Script (signature), Hanken Grotesk (text).
   ============================================================ */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-italic.woff2') format('woff2');
  font-weight: 300 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pinyon Script';
  src: url('../fonts/PinyonScript.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bone:      #EAE3D4;
  --paper:     #F3EEE3;
  --paper-hi:  #F8F4EB;
  --ink:       #221E16;
  --ink-soft:  #3C372D;
  --olive:     #545826;
  --cinnamon:  #A9572F;
  --mahogany:  #47201A;
  --sand:      #D6B588;
  --pistachio: #C6C5A2;
  --stone:     #6C6454;
  --hairline:  #D5CBB8;
  --hairline-dk: rgba(234, 227, 212, 0.18);

  --font-display: 'Cormorant Garamond', Cormorant, Garamond, 'Times New Roman', serif;
  --font-script:  'Pinyon Script', 'Snell Roundhand', cursive;
  --font-text:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --text-hero:    clamp(3rem, 8.5vw, 8rem);
  --text-display: clamp(2.5rem, 5.5vw, 5rem);
  --text-title:   clamp(1.75rem, 3vw, 2.75rem);
  --text-lead:    clamp(1.375rem, 2.1vw, 1.875rem);
  --text-body:    1.0625rem;
  --text-label:   0.72rem;
  --track-label:  0.24em;
  --track-wide:   0.34em;

  --gutter: clamp(1.375rem, 4.5vw, 4rem);
  --section: clamp(6rem, 13vh, 10rem);
  --max: 1500px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 320ms;
  --dur-reveal: 1000ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 350;
  font-size: var(--text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--olive); color: var(--paper-hi); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
.on-dark :focus-visible { outline-color: var(--sand); }

.skip-link {
  position: fixed; top: -100%; left: var(--gutter); z-index: 300;
  padding: 0.75rem 1.25rem; background: var(--ink); color: var(--bone);
  font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase;
}
.skip-link:focus-visible { top: 0.5rem; }

/* ---------- Type helpers ---------- */
.display { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: 0.005em; }
.script  { font-family: var(--font-script); font-weight: 400; }
.italic  { font-style: italic; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; }

.label {
  font-family: var(--font-text);
  font-size: var(--text-label); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--stone);
}
.label--olive { color: var(--olive); }
.label--cinnamon { color: var(--cinnamon); }
.num { font-family: var(--font-display); font-style: italic; color: var(--cinnamon); }

.lead {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-lead); line-height: 1.42;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.rule { border: 0; border-top: 1px solid var(--hairline); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.4vw, 2.4rem); }

/* ---------- Framed / matted imagery (heritage motif) ---------- */
.frame { position: relative; overflow: hidden; background: var(--paper); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--43 { aspect-ratio: 4 / 3; }
.frame--45 { aspect-ratio: 4 / 5; }
.frame--34 { aspect-ratio: 3 / 4; }
.frame--169 { aspect-ratio: 16 / 9; }
.frame--square { aspect-ratio: 1 / 1; }

/* gallery mat: cream border + hairline, like a matted print */
.mat {
  background: var(--paper-hi);
  padding: clamp(0.75rem, 1.4vw, 1.375rem);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(34, 30, 22, 0.03);
}
.mat .frame { border: 1px solid var(--hairline); }

/* postage-stamp perforated edge */
.stamp { background: var(--paper-hi); padding: 10px;
  --p: 7px;
  -webkit-mask:
    radial-gradient(var(--p) at var(--p) var(--p), #0000 98%, #000) -var(--p) -var(--p),
    radial-gradient(var(--p), #000 98%, #0000);
}
.stamp { /* simpler robust perforation via repeating radial on a light card */
  -webkit-mask: none; mask: none;
  position: relative;
}
.stamp::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 4px at 0 50%, var(--bone) 96%, transparent 100%) 0 0 / 14px 14px repeat-y,
    radial-gradient(circle 4px at 100% 50%, var(--bone) 96%, transparent 100%) 100% 0 / 14px 14px repeat-y,
    radial-gradient(circle 4px at 50% 0, var(--bone) 96%, transparent 100%) 0 0 / 14px 14px repeat-x,
    radial-gradient(circle 4px at 50% 100%, var(--bone) 96%, transparent 100%) 0 100% / 14px 14px repeat-x;
}

/* ---------- Reveals ---------- */
[data-reveal] { opacity: 0; transform: translateY(2rem); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="curtain"] { opacity: 1; transform: none; }
[data-reveal="curtain"] .frame { clip-path: inset(100% 0 0 0); transition: clip-path 1150ms var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal="curtain"].is-in .frame { clip-path: inset(0 0 0 0); }
[data-reveal="line"] { transform: scaleX(0); transform-origin: left center; transition: transform 1100ms var(--ease); }
[data-reveal="line"].is-in { transform: scaleX(1); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color 420ms var(--ease), border-color 420ms var(--ease), transform 420ms var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .container { position: relative; max-width: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 1.5rem; }
.site-header .nav-left { grid-column: 1; justify-self: start; }
.site-header .nav-right { grid-column: 3; justify-self: end; }
.site-header .wordmark { position: absolute; left: 50%; transform: translateX(-50%); justify-self: center; text-align: center; white-space: nowrap; }
.site-header.is-light:not(.is-scrolled) .wordmark,
.site-header.is-light:not(.is-scrolled) .site-nav a { color: var(--paper-hi); }
.site-header.is-light:not(.is-scrolled) .menu-toggle span { background: var(--paper-hi); }
.site-header.is-scrolled {
  background: rgba(234, 227, 212, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline);
}
.site-header.is-hidden { transform: translateY(-100%); }

.wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.wordmark .amp { font-style: italic; color: var(--cinnamon); }

.site-nav { display: flex; gap: clamp(1.5rem, 2.6vw, 2.75rem); align-items: center; }
.site-nav a { position: relative; font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); padding-block: 0.25rem; }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 360ms var(--ease); }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); transform-origin: left center; }

.menu-toggle { display: none; position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.menu-toggle span { display: block; width: 26px; height: 1.5px; background: var(--ink); transition: transform 360ms var(--ease), opacity 240ms var(--ease); }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.menu-overlay { position: fixed; inset: 0; z-index: 90; background: var(--bone); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity 480ms var(--ease), visibility 0s linear 480ms; }
.menu-open .menu-overlay { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-overlay nav { display: flex; flex-direction: column; gap: 0.25rem; }
.menu-overlay a { font-family: var(--font-display); font-size: clamp(2.5rem, 11vw, 4rem); color: var(--ink); display: flex; align-items: baseline; gap: 1rem; opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.menu-overlay a sup { font-family: var(--font-text); font-size: 0.6875rem; letter-spacing: var(--track-label); color: var(--cinnamon); }
.menu-open .menu-overlay a { opacity: 1; transform: none; }
.menu-open .menu-overlay a:nth-child(1) { transition-delay: 120ms; }
.menu-open .menu-overlay a:nth-child(2) { transition-delay: 190ms; }
.menu-open .menu-overlay a:nth-child(3) { transition-delay: 260ms; }
.menu-open { overflow: hidden; }

/* ============================================================
   HERO, editorial split
   ============================================================ */
.hero { padding-top: clamp(8rem, 18vh, 12rem); padding-bottom: var(--section); }
.hero .grid-12 { align-items: center; row-gap: clamp(2.5rem, 5vw, 4rem); }
.hero-copy { grid-column: 1 / 7; }
.hero-media { grid-column: 8 / 13; }
.hero .eyebrow { display: block; margin-bottom: 1.75rem; }
.hero h1 { font-size: var(--text-hero); font-weight: 300; letter-spacing: 0.004em; }
.hero h1 em { font-style: italic; color: var(--ink); }
.hero .hero-name { font-weight: 400; line-height: 0.9; letter-spacing: -0.004em; }
.hero .signature { font-family: var(--font-script); font-size: clamp(2.5rem, 5vw, 4rem); color: var(--cinnamon); line-height: 1; margin-top: 1.5rem; }
.hero .hero-sub { margin-top: 2.25rem; max-width: 40ch; color: var(--stone); font-size: 1.0625rem; }
.hero .hero-cta { margin-top: 2.5rem; }
.hero-media figcaption { margin-top: 0.875rem; text-align: right; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--stone); }

.scroll-cue { display: inline-flex; align-items: center; gap: 0.875rem; margin-top: 3.5rem; color: var(--stone); font-size: 0.625rem; letter-spacing: var(--track-wide); text-transform: uppercase; }
.scroll-cue::after { content: ""; width: 44px; height: 1px; background: var(--stone); transform-origin: left; animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 0%,100% { transform: scaleX(0.3); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } }

/* ---------- Hero: full-bleed lower-third ---------- */
.hero--full {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--paper-hi); overflow: hidden; isolation: isolate;
  padding: 7rem var(--gutter) 5rem;
}
.hero--full .hero-media { position: absolute; inset: 0; z-index: -2; }
.hero--full .hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2600ms var(--ease); }
.is-loaded .hero--full .hero-media img { transform: scale(1); }
.hero--full::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(18,13,7,0.28) 0%, rgba(18,13,7,0.08) 34%, rgba(18,13,7,0.74) 100%),
    linear-gradient(90deg, rgba(18,13,7,0.24) 0%, transparent 24%, transparent 76%, rgba(18,13,7,0.24) 100%);
}
.hero--full::before {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 48%, rgba(18,13,7,0.52) 0%, rgba(18,13,7,0.32) 32%, transparent 68%);
  pointer-events: none;
}
.hero-overlay {
  width: min(90vw, 760px);
  max-width: min(90vw, 760px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,0.72), 0 8px 42px rgba(18,13,7,0.58);
}
.hero-overlay .hero-title { margin-top: 1.125rem; font-family: var(--font-text); font-weight: 500; font-size: var(--text-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--paper-hi); }
.hero-overlay .hero-tagline { width: 100%; font-family: var(--font-display); font-style: italic; font-size: clamp(1.55rem, 2.6vw, 2.55rem); line-height: 1.18; text-align: center; }
.hero-overlay .hero-sub { width: 100%; margin-top: 0.875rem; font-size: 1rem; color: rgba(248,244,235,0.92); max-width: 34ch; margin-inline: auto; text-align: center; }
.hero-overlay .hero-cta { margin-top: 1.5rem; color: var(--paper-hi); }
.hero--full .scroll-cue { position: absolute; bottom: clamp(1.5rem, 3vh, 2.25rem); left: 50%; transform: translateX(-50%); flex-direction: column; gap: 0.75rem; color: rgba(243,238,227,0.72); }
.hero--full .scroll-cue::after { width: 1px; height: 46px; animation: cuev 2.6s var(--ease) infinite; }
@keyframes cuev { 0%,100% { transform: scaleY(0.3); opacity: 0.4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; transform-origin: top; } }

/* ---------- Buttons ---------- */
.btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 0.9rem; font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; padding-block: 0.6rem; position: relative; text-align: center; }
.btn-line::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; opacity: 0.3; }
.btn-line::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 420ms var(--ease); }
.btn-line:hover::after { transform: scaleX(1); transform-origin: left center; }
.btn-line .arrow { transition: transform 360ms var(--ease); }
.btn-line:hover .arrow { transform: translateX(6px); }
.arrow { width: 1.4em; height: 1em; flex: none; }
.arrow path { stroke: currentColor; stroke-width: 1.1; fill: none; }

/* ============================================================
   INTRO / positioning
   ============================================================ */
.intro .grid-12 { row-gap: 3rem; }
.intro .intro-label { grid-column: 1 / 4; }
.intro .intro-copy { grid-column: 4 / 12; }
.intro .lead { max-width: 24ch; }
.intro .intro-meta { margin-top: 3rem; display: flex; gap: clamp(2rem, 5vw, 4.5rem); flex-wrap: wrap; }
.intro .intro-meta div { max-width: 26ch; }
.intro .intro-meta .label { display: block; margin-bottom: 0.75rem; }
.intro .intro-meta p { font-size: 0.9375rem; color: var(--stone); }

/* ============================================================
   SELECTED WORK, editorial
   ============================================================ */
.work-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: clamp(3rem, 6vh, 5rem); }
.work-head h2 { font-size: var(--text-display); font-weight: 300; }
.work-head .script { font-size: clamp(2rem, 4.8vw, 4.5rem); color: var(--cinnamon); }

.work-grid { display: grid; grid-template-columns: 1fr; gap: clamp(5rem, 11vh, 8rem); }
.work-grid .wcard {
  min-height: clamp(38rem, 82vh, 54rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5.5rem);
}
.work-grid .wcard:nth-child(even) { transform: none; }
.wcard .mat { grid-column: 1 / 8; }
.wcard:nth-child(even) .mat { grid-column: 6 / 13; grid-row: 1; }
.wcard .wcard-copy { grid-column: 8 / 13; align-self: end; padding-bottom: clamp(2rem, 8vh, 6rem); }
.wcard:nth-child(even) .wcard-copy { grid-column: 1 / 6; grid-row: 1; }
.wcard .frame img { transition: transform 1200ms var(--ease); }
.wcard:hover .frame img { transform: scale(1.035); }
.wcard .wcard-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.wcard h3 { font-size: var(--text-title); font-weight: 400; transition: color var(--dur) var(--ease); }
.wcard:hover h3 { color: var(--cinnamon); }
.wcard .wcard-sub { margin-top: 0.375rem; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }

/* ============================================================
   MAHOGANY BAND, deep editorial section
   ============================================================ */
.band { background: var(--mahogany); color: var(--paper); }
.band .grid-12 { align-items: center; row-gap: 2.5rem; }
.band .band-text { grid-column: 2 / 8; }
.band .band-aside { grid-column: 9 / 12; }
.band .label { color: var(--sand); }
.band .script { font-family: var(--font-script); color: var(--sand); font-size: clamp(2.25rem, 4vw, 3.5rem); display: block; margin-bottom: 1rem; }
.band blockquote { font-family: var(--font-display); font-weight: 300; font-size: var(--text-display); line-height: 1.16; letter-spacing: 0.005em; }
.band .band-aside p { color: rgba(243, 238, 227, 0.72); font-size: 0.9375rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: var(--bone); padding-block: clamp(4.5rem, 9vh, 7rem) 2.5rem; }
.site-footer .foot-script { font-family: var(--font-script); font-size: clamp(3rem, 7vw, 6rem); color: var(--sand); line-height: 1; }
.site-footer .foot-mark { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: 0.02em; margin-top: 0.5rem; }
.site-footer .foot-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem clamp(1rem, 2.4vw, 2.4rem); margin-top: clamp(3rem, 6vh, 4.5rem); padding-top: 2.5rem; border-top: 1px solid var(--hairline-dk); }
.site-footer .foot-col { grid-column: span 4; }
.site-footer .foot-col .label { color: rgba(234, 227, 212, 0.45); display: block; margin-bottom: 1rem; }
.site-footer .foot-col p, .site-footer .foot-col a { font-size: 0.9375rem; font-weight: 350; color: rgba(234, 227, 212, 0.85); overflow-wrap: break-word; }
.site-footer .foot-col a { display: inline-block; padding-block: 0.15rem; position: relative; }
.site-footer .foot-col a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 340ms var(--ease); }
.site-footer .foot-col a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-footer .foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: clamp(3rem, 6vh, 4.5rem); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(234, 227, 212, 0.42); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader { position: fixed; inset: 0; z-index: 400; background: var(--bone); display: flex; align-items: center; justify-content: center; transition: opacity 700ms var(--ease), visibility 0s linear 700ms; }
.preloader .pre-mark { font-family: var(--font-script); font-size: clamp(3rem, 8vw, 5.5rem); color: var(--cinnamon); opacity: 0; animation: prem 900ms var(--ease) 100ms forwards; }
@keyframes prem { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.is-loaded .preloader { opacity: 0; visibility: hidden; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 899px) {
  .hero-copy { grid-column: 1 / -1; }
  .hero-media { grid-column: 1 / -1; max-width: 460px; }
  .intro .intro-label { grid-column: 1 / -1; }
  .intro .intro-copy { grid-column: 1 / -1; }
  .work-grid .wcard {
    min-height: auto;
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
  }
  .wcard .mat,
  .wcard:nth-child(even) .mat,
  .wcard .wcard-copy,
  .wcard:nth-child(even) .wcard-copy {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .wcard .wcard-copy { padding-bottom: 0; }
  .band .band-text { grid-column: 1 / -1; }
  .band .band-aside { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .site-nav { display: none; }
  .menu-toggle { display: flex; }
  .work-head { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .work-head .script { font-size: clamp(2rem, 13vw, 3.35rem); }
  .work-grid { grid-template-columns: 1fr; gap: 3rem; }
  .work-grid .wcard:nth-child(even) { transform: none; }
  .site-footer .foot-col { grid-column: span 6; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal="curtain"] .frame { clip-path: none !important; }
  .hero--full .hero-media img { transform: none; }
}

/* ============================================================
   INTERIOR PAGES — head, portfolio, project, about, contact
   ============================================================ */
.page-head { padding-top: clamp(9rem, 20vh, 13rem); }
.page-head h1 { font-size: var(--text-display); font-weight: 300; max-width: 18ch; margin-top: 1.25rem; letter-spacing: 0.004em; }
.page-head h1 em { font-style: italic; }
.page-head .page-sub { margin-top: 1.5rem; max-width: 48ch; color: var(--stone); }

/* portfolio grid (Work index) */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,7vh,5.5rem) clamp(2rem,5vw,5rem); }
.pgrid .pcard:nth-child(even) { transform: translateY(clamp(2.5rem,8vh,6rem)); }
.pcard .frame img { transition: transform 1200ms var(--ease); }
.pcard:hover .frame img { transform: scale(1.04); }
.pcard-meta { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top: 1.375rem; }
.pcard-meta h2 { font-size: clamp(1.5rem,2.2vw,2rem); font-weight: 400; transition: color var(--dur) var(--ease); }
.pcard:hover .pcard-meta h2 { color: var(--cinnamon); }
.pcard-sub { margin-top: 0.375rem; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }

/* project detail */
.hero--short { min-height: 76svh; }
.brief { padding-block: clamp(4.5rem,9vh,7rem); }
.brief .grid-12 { row-gap: 2.5rem; }
.brief-copy { grid-column: 1 / 8; }
.brief-copy .lead { max-width: 30ch; }
.brief-copy p.body { margin-top: 2rem; max-width: 56ch; color: var(--stone); }
.brief-facts { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 1.625rem; }
.fact .label { display:block; color: var(--stone); margin-bottom: 0.375rem; }
.fact p { font-size: 0.9375rem; }
.gallery { display: flex; flex-direction: column; gap: clamp(2rem,5vh,4rem); }
.gallery .g-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.gallery .g-duo figure:nth-child(2) { margin-top: clamp(2.5rem,7vh,5rem); }
.gallery figcaption { margin-top: 0.875rem; font-size: 0.6875rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--stone); }
.next-project { display:block; position: relative; color: var(--paper-hi); overflow: hidden; text-align:center; }
.next-project .frame { aspect-ratio: 21/8; }
.next-project::after { content:""; position:absolute; inset:0; background: rgba(24,18,12,0.5); transition: background 500ms var(--ease); }
.next-project:hover::after { background: rgba(24,18,12,0.4); }
.next-project .np-copy { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0.875rem; text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
.next-project .np-copy h2 { font-size: var(--text-display); font-weight:300; }
.next-project .frame img { transition: transform 1400ms var(--ease); }
.next-project:hover .frame img { transform: scale(1.045); }

/* about */
.founder-figure { grid-column: 1 / 6; }
.founder-copy { grid-column: 7 / 13; }
.founder-copy .lead { margin-bottom: 1.5rem; }
.steps { counter-reset: step; }
.steps .step { display:grid; grid-template-columns: repeat(12,1fr); column-gap: clamp(1rem,2.4vw,2.4rem); padding-block: clamp(2rem,5vh,3.25rem); border-top:1px solid var(--hairline); }
.steps .step:last-child { border-bottom:1px solid var(--hairline); }
.steps .num { grid-column:1/3; font-size: clamp(1.25rem,2vw,1.75rem); }
.steps h3 { grid-column:3/7; font-size: clamp(1.375rem,2.2vw,2rem); font-weight:400; }
.steps p { grid-column:7/12; color: var(--stone); font-size:0.9375rem; max-width:52ch; align-self:center; }

/* contact form */
.contact-grid { display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(2.5rem,6vw,5rem) clamp(1rem,2.4vw,2.4rem); }
.contact-form { grid-column: 1 / 8; }
.contact-side { grid-column: 9 / 13; display:flex; flex-direction:column; gap: 2rem; }
.hp-field { position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.turnstile-widget { margin: 0 0 1.75rem; min-height: 65px; }
.field { margin-bottom: 2rem; }
.field label { display:block; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--stone); margin-bottom: 0.7rem; }
.field label .req { color: var(--cinnamon); }
.field input, .field select, .field textarea { width:100%; font:inherit; font-weight:350; color: var(--ink); background:transparent; border:0; border-bottom:1px solid var(--hairline); padding: 0.6rem 0 0.85rem; border-radius:0; transition: border-color var(--dur) var(--ease); min-height:44px; }
.field select { cursor:pointer; appearance:none; }
.field-select { position: relative; }
.field-select::after { content:""; position:absolute; right:4px; bottom:1.4rem; width:8px; height:8px; border-right:1px solid var(--stone); border-bottom:1px solid var(--stone); transform:rotate(45deg); pointer-events:none; }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-bottom-color: var(--olive); }
.field .hint { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--stone); }
.field .error-msg { display:none; margin-top:0.6rem; font-size:0.8125rem; color:#9B3B25; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color:#9B3B25; }
.field.has-error .error-msg { display:block; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem; }
.btn-solid { display:inline-flex; align-items:center; gap:1rem; background: var(--ink); color: var(--bone); font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; padding: 1.05rem 2.4rem; min-height:44px; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn-solid:hover { background: var(--ink-soft); }
.btn-solid:active { transform: scale(0.985); }
.btn-solid[disabled] { opacity:0.45; cursor:default; }
.form-status { margin-top:1.4rem; font-size:0.9375rem; display:none; }
.form-status.is-ok { display:block; color: var(--ink); }
.form-status.is-err { display:block; color:#9B3B25; }

@media (max-width: 899px) {
  .brief-copy { grid-column: 1 / -1; }
  .brief-facts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 2rem 3rem; }
  .founder-figure { grid-column: 1 / -1; max-width: 460px; }
  .founder-copy { grid-column: 1 / -1; }
  .steps .num { grid-column: 1/-1; margin-bottom: 0.4rem; }
  .steps h3 { grid-column: 1/-1; margin-bottom: 0.6rem; }
  .steps p { grid-column: 1/-1; }
  .contact-form { grid-column: 1/-1; }
  .contact-side { grid-column: 1/-1; }
}
@media (max-width: 719px) {
  .pgrid { grid-template-columns: 1fr; }
  .pgrid .pcard:nth-child(even) { transform: none; }
  .gallery .g-duo { grid-template-columns: 1fr; }
  .gallery .g-duo figure:nth-child(2) { margin-top: 0; }
  .form-row { grid-template-columns: 1fr; }
  .next-project .frame { aspect-ratio: 4/3; }
}

/* project hero title (over full-bleed image) */
.hero-overlay h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 7.5vw, 6.5rem); line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; }
.hero-overlay .hero-loc { margin-top: 1rem; font-family: var(--font-text); font-size: var(--text-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: rgba(248,244,235,0.9); }
.hero-overlay .hero-eyebrow { display:block; margin-bottom: 1.25rem; font-family: var(--font-text); font-weight:500; font-size: var(--text-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--sand); }