:root {
  --paper: #eee5d8;
  --paper-soft: #e4d8c7;
  --paper-deep: #d4c2aa;
  --ink: #1d1814;
  --muted: #746b62;
  --brown: #725139;
  --brown-soft: #8c6b50;
  --deep: #181411;
  --deep-2: #241d18;
  --line: rgba(29, 24, 20, .16);
  --white: #f7f0e7;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --pad: clamp(20px, 4vw, 64px);
  --section-y: clamp(76px, 8.5vw, 132px);
  --content: 1640px;
  --gap: clamp(14px, 1.8vw, 28px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: #7f6249; color: #fff8ed; }

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: .08;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.section-pad {
  width: min(100%, calc(var(--content) + (var(--pad) * 2)));
  margin-inline: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.section-index {
  margin: 0;
  font-size: 10px;
  letter-spacing: .19em;
  text-transform: uppercase;
  font-weight: 600;
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--pad);
  color: var(--white);
  mix-blend-mode: difference;
  transition: background .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
.site-header.scrolled {
  padding-top: 15px;
  padding-bottom: 15px;
  background: rgba(24, 20, 17, .88);
  backdrop-filter: blur(12px);
  mix-blend-mode: normal;
}
.brand {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .12em;
  font-weight: 600;
}
.nav { display: flex; gap: 32px; }
.nav a, .project-back {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 600;
  position: relative;
}
.nav a::after, .text-link::after, .project-back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transition: right .3s ease;
}
.nav a:hover::after, .text-link:hover::after, .project-back:hover::after { right: 0; }
.menu-toggle { display: none; }

.hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background: var(--deep);
  color: var(--white);
}
.hero-media {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  transform: scale(1.02);
  animation: hero-in 1.7s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes hero-in { from { transform: scale(1.07); filter: saturate(.78); } to { transform: scale(1.02); filter: saturate(.95); } }
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,10,.22) 0%, rgba(20,14,10,.04) 43%, rgba(20,14,10,.72) 100%), linear-gradient(90deg, rgba(20,14,10,.46), transparent 60%);
}
.hero-copy {
  position: absolute;
  left: max(var(--pad), calc((100vw - var(--content)) / 2 + var(--pad)));
  bottom: clamp(112px, 14vh, 160px);
  max-width: 980px;
}
.eyebrow, .story-meta {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}
.hero-copy h1, .manifesto h2, .section-heading h2, .story-heading h3, .film-copy h3, .about h2,
.project-title-grid h1 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
  line-height: .92;
  letter-spacing: -.03em;
}
.hero-copy h1 { font-size: clamp(58px, 8.4vw, 138px); }
.hero-copy h1 em, .film-copy h3 em, .about h2 em, .project-title-grid h1 em { font-weight: 500; }
.hero-sub { max-width: 470px; margin: 20px 0 0; color: rgba(245,239,230,.82); }
.hero-scroll {
  position: absolute;
  right: max(var(--pad), calc((100vw - var(--content)) / 2 + var(--pad)));
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-scroll .arrow { font-size: 18px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* Home intro */
.manifesto { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(42px, 6vw, 100px);
  align-items: end;
  margin-top: 32px;
}
.manifesto h2 { font-size: clamp(50px, 6vw, 94px); }
.manifesto-copy { max-width: 470px; color: #5f574f; }
.manifesto-copy p { margin: 0 0 14px; }

/* Work */
.work { padding-bottom: 0; }
.section-heading {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(42px, 5vw, 72px);
}
.section-heading h2 { font-size: clamp(52px, 6vw, 94px); }
.story-rally { padding-bottom: var(--section-y); }
.story-heading {
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 22px;
  margin-bottom: var(--gap);
}
.story-heading h3 { font-size: clamp(56px, 7vw, 108px); margin-top: 5px; }
.story-year { font-family: var(--serif); font-size: 30px; }

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "wide wide wide wide wide wide wide wide tall tall tall tall"
    "note note note note detail detail detail detail portrait portrait portrait portrait"
    "land land land land land land land land land land land land";
  gap: var(--gap);
  align-items: stretch;
}
.photo { overflow: hidden; background: #c9bca9; }
.photo img { height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.75,.2,1), filter .5s ease; }
.photo:hover img { transform: scale(1.025); filter: saturate(.92) contrast(1.025); }
.photo-wide { grid-area: wide; aspect-ratio: 1.52; }
.photo-tall { grid-area: tall; aspect-ratio: .75; }
.story-note {
  grid-area: note;
  min-height: 100%;
  background: var(--paper-soft);
  padding: clamp(28px, 3vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(29,24,20,.08);
}
.story-note p { color: #665c53; max-width: 410px; }
.handwritten { font-family: var(--serif); font-style: italic; font-size: 27px; color: var(--brown); }
.text-link {
  display: inline-flex;
  width: max-content;
  position: relative;
  gap: 10px;
  margin-top: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.photo-detail { grid-area: detail; aspect-ratio: .9; }
.photo-portrait { grid-area: portrait; aspect-ratio: .9; }
.photo-landscape { grid-area: land; aspect-ratio: 2.05; }

.story-film {
  background: var(--deep);
  color: var(--white);
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
  overflow: hidden;
}
.film-copy {
  padding-top: var(--section-y);
  padding-bottom: clamp(48px, 5.5vw, 78px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  align-items: end;
  gap: clamp(42px, 7vw, 110px);
}
.film-copy h3 { font-size: clamp(64px, 8.5vw, 132px); margin-top: 10px; }
.film-description { max-width: 430px; color: rgba(245,239,230,.72); padding-bottom: 5px; }
.text-link.light { color: var(--white); }
.film-frame { position: relative; aspect-ratio: 16/8.6; overflow: hidden; background: #070706; }
.film-frame video { height: 100%; object-fit: cover; }
.film-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.24)); pointer-events: none; }
.film-badge {
  position: absolute;
  left: var(--pad);
  bottom: 28px;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: rgba(20,16,13,.68);
  backdrop-filter: blur(9px);
  padding: 10px 13px;
}
.sound-toggle {
  position: absolute;
  right: var(--pad);
  bottom: 22px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50px;
  background: rgba(20,16,13,.35);
  color: var(--white);
  padding: 10px 15px;
  cursor: pointer;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.about { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.about-grid { display: grid; grid-template-columns: .35fr 1.65fr; gap: clamp(35px, 5vw, 80px); }
.about h2 { font-size: clamp(56px, 7vw, 108px); }
.about-lead { font-family: var(--serif); font-size: clamp(23px, 2.4vw, 38px); line-height: 1.23; max-width: 920px; margin: 34px 0 20px; }
.about-small { color: var(--muted); font-size: 11px; letter-spacing: .08em; }

.contact { background: #6f5039; color: #f1e8dd; }
.contact-inner { padding-top: clamp(72px, 7vw, 110px); padding-bottom: clamp(58px, 6vw, 92px); }
.contact-kicker { margin: 38px 0 4px; color: rgba(241,232,221,.68); }
.contact-cta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--serif);
  font-size: clamp(52px, 7.6vw, 116px);
  line-height: .95;
  border-bottom: 1px solid rgba(241,232,221,.38);
  padding-bottom: 25px;
}
.contact-cta span { font-family: var(--sans); font-size: clamp(22px, 2.5vw, 38px); transition: transform .3s ease; }
.contact-cta:hover span { transform: translate(6px,-6px); }
.contact-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: 24px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.social-links, .footer-socials { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
.social-links a, .footer-socials a { position: relative; }
.social-links a::after, .footer-socials a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px; background: currentColor; transition: right .3s ease; }
.social-links a:hover::after, .footer-socials a:hover::after { right: 0; }

.footer {
  background: #6f5039;
  color: rgba(241,232,221,.68);
  border-top: 1px solid rgba(241,232,221,.2);
  padding: 18px var(--pad) 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .06s; }
.delay-2 { transition-delay: .12s; }

/* Project pages */
.project-page { min-height: 100vh; }
.project-header { position: absolute; mix-blend-mode: normal; }
.project-light { background: var(--paper); }
.project-light .project-header { color: var(--ink); }
.project-intro { padding-top: clamp(125px, 11vw, 170px); padding-bottom: clamp(50px, 5vw, 76px); }
.project-title-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr);
  gap: clamp(40px, 6vw, 95px);
  align-items: end;
  margin-top: 26px;
}
.project-title-grid h1 { font-size: clamp(74px, 11vw, 168px); }
.project-facts { border-top: 1px solid currentColor; padding-top: 15px; max-width: 430px; }
.project-facts span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 18px; }
.project-facts p { color: var(--muted); margin: 0; }
.project-hero {
  margin: 0 auto;
  width: min(calc(100% - (var(--pad) * 2)), var(--content));
  aspect-ratio: 16/9;
  overflow: hidden;
}
.project-hero img { height: 100%; object-fit: cover; }

/* Clean, intentional Rally story flow */
.project-gallery {
  padding-top: clamp(48px, 5.5vw, 82px);
  padding-bottom: var(--section-y);
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.2vw, 52px);
}
.project-gallery figure { margin: 0; overflow: hidden; }
.project-gallery img { height: 100%; object-fit: cover; }
.gallery-row { display: grid; gap: var(--gap); align-items: stretch; }
.gallery-row.intro-row { grid-template-columns: minmax(0, .92fr) minmax(300px, .58fr); align-items: center; }
.gallery-row.duo { grid-template-columns: repeat(2, minmax(0,1fr)); }
.gallery-row.trio { grid-template-columns: .95fr 1.1fr .95fr; }
.gallery-row.detail-row { grid-template-columns: 1.15fr .85fr; }
.gallery-copy-card {
  padding: clamp(30px, 4vw, 64px);
  background: var(--paper-soft);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(29,24,20,.08);
}
.gallery-copy-card .chapter-no { font-size: 9px; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.gallery-copy-card p { margin: 0; font-family: var(--serif); font-size: clamp(25px, 2.35vw, 38px); line-height: 1.18; }
.gallery-copy-card .small-copy { margin-top: 18px; font-family: var(--sans); font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 420px; }
.gallery-portrait { aspect-ratio: 4/5; }
.gallery-landscape { aspect-ratio: 3/2; }
.gallery-cinematic { aspect-ratio: 2/1; }
.gallery-squareish { aspect-ratio: 1/1.05; }
.gallery-row.trio figure { aspect-ratio: 4/5; }
.gallery-end {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.light-footer { background: var(--paper); color: var(--muted); border-top-color: var(--line); }

/* Film page */
.film-project { background: var(--deep); color: var(--white); }
.film-header { color: var(--white); }
.film-intro .project-facts p { color: rgba(245,239,230,.65); }
.project-video-wrap { width: min(100%, var(--content)); margin: 0 auto; padding: 0 var(--pad); }
.project-video { max-height: 82vh; object-fit: contain; background: #000; }
.film-quote { padding-top: clamp(68px, 7vw, 110px); padding-bottom: clamp(78px, 8vw, 124px); }
.film-quote p { font-family: var(--serif); font-size: clamp(42px, 6.2vw, 92px); line-height: .98; max-width: 1120px; margin: 0 0 44px; }
.dark-footer { background: var(--deep); border-top-color: rgba(255,255,255,.16); color: rgba(245,239,230,.58); }

@media (max-width: 900px) {
  .site-header { padding-top: 20px; padding-bottom: 20px; }
  .menu-toggle { display: grid; gap: 5px; width: 38px; height: 38px; align-content: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
  .menu-toggle span { width: 21px; height: 1px; background: currentColor; transition: transform .3s ease; }
  .menu-toggle.active span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle.active span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .nav { position: fixed; inset: 0; background: rgba(24,20,17,.96); backdrop-filter: blur(18px); flex-direction: column; align-items: center; justify-content: center; gap: 28px; opacity: 0; visibility: hidden; transition: .3s ease; z-index: -1; }
  .nav.open { opacity: 1; visibility: visible; }
  .nav a { font-family: var(--serif); font-size: 45px; text-transform: none; letter-spacing: 0; }
  .manifesto-grid, .film-copy, .about-grid, .project-title-grid { grid-template-columns: 1fr; }
  .manifesto-copy { max-width: 560px; margin-left: auto; }
  .film-description { margin-left: auto; }
  .about-grid { gap: 28px; }
  .project-facts { width: min(100%, 480px); margin-left: auto; }
  .gallery-row.intro-row { grid-template-columns: 1fr 1fr; }
  .gallery-row.trio { grid-template-columns: 1fr 1fr; }
  .gallery-row.trio figure:last-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
}

@media (max-width: 700px) {
  :root { --section-y: 72px; --gap: 12px; }
  .hero-media { object-position: 58% center; }
  .hero-copy { left: var(--pad); bottom: 112px; }
  .hero-copy h1 { font-size: clamp(52px, 16vw, 86px); }
  .hero-sub { max-width: 320px; }
  .hero-scroll { left: var(--pad); right: auto; bottom: 32px; }
  .manifesto-grid { margin-top: 25px; gap: 30px; }
  .manifesto h2 { font-size: 15vw; }
  .manifesto-copy { margin: 0 0 0 10vw; }
  .section-heading { display: block; margin-bottom: 34px; }
  .section-heading h2 { margin-top: 18px; font-size: 16vw; }
  .story-heading { align-items: flex-end; padding-bottom: 17px; }
  .story-heading h3 { font-size: 15vw; }
  .story-year { font-size: 22px; }
  .editorial-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "wide wide"
      "tall detail"
      "note note"
      "portrait portrait"
      "land land";
  }
  .photo-wide { aspect-ratio: 1.35; }
  .photo-tall, .photo-detail { aspect-ratio: .78; }
  .story-note { min-height: 260px; }
  .photo-portrait { aspect-ratio: 1.25; }
  .photo-landscape { aspect-ratio: 1.38; }
  .film-copy { gap: 30px; }
  .film-copy h3 { font-size: 17vw; }
  .film-description { margin: 0 0 0 10vw; }
  .film-frame { aspect-ratio: 4/5; }
  .film-frame video { object-position: center; }
  .film-badge { display: none; }
  .about h2 { font-size: 15vw; }
  .about-lead { font-size: 27px; margin-top: 24px; }
  .contact-kicker { margin-top: 28px; }
  .contact-cta { display: block; font-size: 14vw; }
  .contact-cta span { display: inline-block; margin-left: 8px; }
  .contact-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .social-links, .footer-socials { flex-direction: column; justify-content: flex-start; gap: 7px; }
  .footer { flex-direction: column; }

  .project-intro { padding-top: 112px; padding-bottom: 38px; }
  .project-title-grid { margin-top: 18px; gap: 24px; }
  .project-title-grid h1 { font-size: 21vw; }
  .project-facts { margin: 0 0 0 12vw; width: auto; }
  .project-hero { width: 100%; aspect-ratio: 4/3; }
  .project-gallery { padding-top: 28px; gap: 16px; }
  .gallery-row, .gallery-row.intro-row, .gallery-row.duo, .gallery-row.trio, .gallery-row.detail-row { grid-template-columns: 1fr; }
  .gallery-row.trio figure:last-child { grid-column: auto; aspect-ratio: 4/5; }
  .gallery-copy-card { min-height: 250px; }
  .gallery-cinematic { aspect-ratio: 4/3; }
  .gallery-end { align-items: flex-start; flex-direction: column; }
  .project-video-wrap { padding: 0; }
  .film-quote p { font-size: 13vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* v1.6 — tighter editorial rhythm + immersive motion */
html { scroll-padding-top: 72px; }
body { overflow-x: hidden; }

.rally-home-sequence {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.9vw, 30px);
}
.rally-opening,
.rally-details {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--gap);
  align-items: start;
}
.rally-opening-wide { aspect-ratio: 1.52; }
.rally-opening-tall { aspect-ratio: .75; }
.rally-details { grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr); }
.rally-detail { aspect-ratio: .9; }
.rally-portrait { aspect-ratio: 1.28; }
.rally-landscape { aspect-ratio: 2.08; }

.story-interlude {
  display: grid;
  grid-template-columns: minmax(120px, .42fr) minmax(320px, 1.35fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 86px);
  padding: clamp(26px, 3vw, 44px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.story-interlude-index {
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
}
.story-interlude-copy {
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(240px, 1fr);
  align-items: baseline;
  gap: clamp(24px, 4vw, 68px);
}
.story-interlude .handwritten {
  font-size: clamp(28px, 2.25vw, 38px);
  white-space: nowrap;
}
.story-interlude p {
  margin: 0;
  max-width: 560px;
  color: #655b52;
  line-height: 1.7;
}
.story-interlude .text-link { margin-top: 0; white-space: nowrap; }

/* More cinematic reveals: the frame opens first, then the image settles. */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s cubic-bezier(.2,.65,.2,1), transform 1.05s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.media-reveal {
  clip-path: inset(0 0 10% 0);
  transition: opacity .9s ease, transform 1.05s cubic-bezier(.16,1,.3,1), clip-path 1.25s cubic-bezier(.16,1,.3,1);
}
.media-reveal.visible { clip-path: inset(0 0 0 0); }
.media-reveal img,
.media-reveal video {
  transform: scale(1.045) translate3d(0, var(--parallax-y, 0px), 0);
  transition: transform 1.6s cubic-bezier(.16,1,.3,1), filter .6s ease;
  will-change: transform;
}
.media-reveal.visible img,
.media-reveal.visible video { transform: scale(1.02) translate3d(0, var(--parallax-y, 0px), 0); }
.photo.media-reveal:hover img { transform: scale(1.045) translate3d(0, var(--parallax-y, 0px), 0); }

.hero-media {
  will-change: transform;
  transform: scale(1.045) translate3d(0, var(--hero-shift, 0px), 0);
}
.hero-copy,
.hero-scroll { will-change: transform, opacity; }

.film-frame,
.project-hero,
.project-video-wrap,
.project-gallery figure { overflow: hidden; }
.project-hero.reveal,
.project-video-wrap.reveal,
.project-gallery figure.reveal,
.film-frame.reveal { clip-path: inset(0 0 9% 0); transition: opacity 1s ease, transform 1.05s cubic-bezier(.16,1,.3,1), clip-path 1.2s cubic-bezier(.16,1,.3,1); }
.project-hero.reveal.visible,
.project-video-wrap.reveal.visible,
.project-gallery figure.reveal.visible,
.film-frame.reveal.visible { clip-path: inset(0); }
.project-gallery figure.reveal img,
.project-hero.reveal img { transform: scale(1.035) translate3d(0, var(--parallax-y, 0px), 0); transition: transform 1.5s cubic-bezier(.16,1,.3,1); will-change: transform; }
.project-gallery figure.reveal.visible img,
.project-hero.reveal.visible img { transform: scale(1.015) translate3d(0, var(--parallax-y, 0px), 0); }

/* Subtle progress line makes long-form scrolling feel continuous. */
.scroll-progress {
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: rgba(239, 220, 196, .8);
  pointer-events: none;
  mix-blend-mode: difference;
}

/* Page-to-page film-like curtain. */
.page-transition {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  background: #1a1512;
  color: #efe5d8;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform .9s cubic-bezier(.76,0,.24,1);
  pointer-events: none;
}
.page-transition span {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: .16em;
  opacity: .86;
  transition: opacity .28s ease;
}
body.page-ready .page-transition { transform: scaleY(0); }
body.page-ready .page-transition span { opacity: 0; }
body.page-leaving .page-transition {
  transform-origin: bottom;
  transform: scaleY(1);
  pointer-events: auto;
}
body.page-leaving .page-transition span { opacity: .86; transition-delay: .32s; }

.contact {
  background:
    radial-gradient(circle at 20% 20%, rgba(245,232,216,.08), transparent 34%),
    radial-gradient(circle at 76% 58%, rgba(27,18,13,.10), transparent 42%),
    #6f5039;
}
.contact-cta { transition: letter-spacing .6s cubic-bezier(.16,1,.3,1); }
.contact-cta:hover { letter-spacing: .005em; }

@media (max-width: 900px) {
  .story-interlude { grid-template-columns: .42fr 1.58fr; }
  .story-interlude .text-link { grid-column: 2; }
  .story-interlude-copy { grid-template-columns: 1fr; gap: 8px; }
  .story-interlude .handwritten { white-space: normal; }
}

@media (max-width: 700px) {
  .rally-opening,
  .rally-details { grid-template-columns: 1fr 1fr; }
  .rally-opening-wide { grid-column: 1 / -1; aspect-ratio: 1.34; }
  .rally-opening-tall { grid-column: 2; width: 88%; justify-self: end; margin-top: -7vw; }
  .story-interlude { grid-template-columns: 1fr; gap: 16px; padding: 24px 0 26px; }
  .story-interlude .text-link { grid-column: auto; margin-top: 4px; }
  .story-interlude-copy { gap: 8px; }
  .rally-details { align-items: end; }
  .rally-detail { aspect-ratio: .82; }
  .rally-portrait { aspect-ratio: .86; }
  .rally-landscape { aspect-ratio: 1.42; }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
  .scroll-progress { display: none; }
  .media-reveal,
  .project-hero.reveal,
  .project-video-wrap.reveal,
  .project-gallery figure.reveal,
  .film-frame.reveal { clip-path: none; }
  .media-reveal img,
  .media-reveal video,
  .project-gallery figure.reveal img,
  .project-hero.reveal img,
  .hero-media { transform: none !important; }
}

/* v1.7 — denser Rally composition + smoother cinematic motion */

/* Keep the homepage Rally sequence visually connected: every paired row has one
   deliberate height, so a shorter image can never leave an accidental blank strip. */
.rally-opening,
.rally-details {
  align-items: stretch;
}
.rally-opening {
  grid-template-columns: minmax(0, 1.72fr) minmax(280px, .78fr);
  height: clamp(520px, 41vw, 720px);
}
.rally-details {
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  height: clamp(430px, 33vw, 600px);
}
.rally-opening .photo,
.rally-details .photo {
  height: 100%;
  aspect-ratio: auto;
}
.rally-opening .photo img,
.rally-details .photo img {
  height: 100%;
  object-fit: cover;
}
.rally-opening-tall img { object-position: center 54%; }
.rally-detail img { object-position: center center; }
.rally-portrait img { object-position: center 45%; }

/* The copy between images is now a compact chapter beat instead of a large card. */
.story-interlude {
  min-height: 0;
  grid-template-columns: minmax(135px, .34fr) minmax(0, 1.66fr) auto;
  gap: clamp(24px, 4vw, 68px);
  padding: clamp(22px, 2.2vw, 34px) clamp(2px, .7vw, 10px);
  background: linear-gradient(90deg, rgba(114,81,57,.035), rgba(114,81,57,0) 48%);
}
.story-interlude-copy {
  grid-template-columns: minmax(190px, .58fr) minmax(260px, 1fr);
  gap: clamp(22px, 3.2vw, 52px);
}
.story-interlude .handwritten {
  font-size: clamp(30px, 2.45vw, 42px);
  line-height: 1;
}
.story-interlude p {
  max-width: 610px;
  line-height: 1.62;
}

/* Overscan every parallaxed image so motion never exposes the frame background. */
.media-reveal img,
.media-reveal video,
.project-gallery figure.reveal img,
.project-hero.reveal img {
  transform-origin: center center;
}
.media-reveal img,
.media-reveal video {
  transform: scale(1.075) translate3d(0, var(--parallax-y, 0px), 0);
}
.media-reveal.visible img,
.media-reveal.visible video {
  transform: scale(1.055) translate3d(0, var(--parallax-y, 0px), 0);
}
.photo.media-reveal:hover img {
  transform: scale(1.075) translate3d(0, var(--parallax-y, 0px), 0);
}
.project-gallery figure.reveal img,
.project-hero.reveal img {
  transform: scale(1.07) translate3d(0, var(--parallax-y, 0px), 0);
}
.project-gallery figure.reveal.visible img,
.project-hero.reveal.visible img {
  transform: scale(1.05) translate3d(0, var(--parallax-y, 0px), 0);
}

/* Softer scroll entrances: less jumping, more of a film dissolve. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  filter: blur(3px);
  transition:
    opacity 1.05s cubic-bezier(.2,.65,.2,1),
    transform 1.2s cubic-bezier(.16,1,.3,1),
    filter 1s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
.media-reveal,
.project-hero.reveal,
.project-video-wrap.reveal,
.project-gallery figure.reveal,
.film-frame.reveal {
  clip-path: inset(0 0 6% 0);
  transition:
    opacity 1.05s ease,
    transform 1.2s cubic-bezier(.16,1,.3,1),
    filter 1s ease,
    clip-path 1.35s cubic-bezier(.16,1,.3,1);
}

/* Internal navigation feels like one continuous film rather than a hard page swap. */
main,
.footer {
  transition: opacity .48s ease, transform .58s cubic-bezier(.16,1,.3,1), filter .48s ease;
}
body.page-leaving main,
body.page-leaving .footer {
  opacity: .72;
  transform: scale(.996);
  filter: blur(2px);
}
.page-transition {
  background:
    radial-gradient(circle at 50% 45%, rgba(111,80,57,.28), transparent 42%),
    #181411;
  transition: transform .72s cubic-bezier(.76,0,.24,1);
}
.page-transition span {
  transform: translateY(4px);
  letter-spacing: .19em;
  transition: opacity .3s ease, transform .45s ease;
}
body.page-ready .page-transition span {
  opacity: 0;
  transform: translateY(-4px);
}
body.page-leaving .page-transition span {
  transform: translateY(0);
}

@media (max-width: 900px) {
  .rally-opening { height: clamp(470px, 58vw, 630px); }
  .rally-details { height: clamp(390px, 47vw, 520px); }
}

@media (max-width: 700px) {
  .rally-opening,
  .rally-details {
    height: auto;
    align-items: end;
  }
  .rally-opening .photo,
  .rally-details .photo { height: auto; }
  .rally-opening-wide { aspect-ratio: 1.34; }
  .rally-opening-tall { aspect-ratio: .78; }
  .rally-detail { aspect-ratio: .82; }
  .rally-portrait { aspect-ratio: .86; }
  .story-interlude {
    padding: 21px 0 23px;
    background: none;
  }
}


/* v1.8 — softer scene transitions + a calmer, more balanced social ending */

/* Let the hero dissolve into the warm paper instead of ending on a hard cut. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(58px, 7vw, 118px);
  background: linear-gradient(180deg, rgba(238,229,216,0) 0%, rgba(238,229,216,.28) 48%, var(--paper) 100%);
  pointer-events: none;
}
.hero-copy,
.hero-scroll { z-index: 3; }

/* Use the existing breathing room after Rally as a colour dissolve into film. */
.story-film {
  position: relative;
  isolation: isolate;
}
.story-film::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: clamp(-94px, -5.7vw, -72px);
  height: clamp(74px, 6vw, 100px);
  background: linear-gradient(180deg, rgba(238,229,216,0) 0%, rgba(70,57,47,.48) 56%, var(--deep) 100%);
  pointer-events: none;
}
.story-film > * { position: relative; z-index: 1; }

/* Film -> About is also a dissolve, but compact enough to keep the page moving. */
.about {
  position: relative;
  background:
    linear-gradient(180deg, var(--deep) 0, rgba(59,49,41,.74) 30px, rgba(171,156,139,.52) 74px, var(--paper) 118px, var(--paper) 100%);
  padding-top: clamp(112px, 9vw, 148px);
  padding-bottom: clamp(82px, 7vw, 112px);
}

/* The previous socials block was visually too wide: keep the sentence together
   and let the arrow be the only element that travels to the far edge. */
.contact {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 15%, rgba(245,232,216,.10), transparent 34%),
    radial-gradient(circle at 78% 62%, rgba(27,18,13,.14), transparent 46%),
    linear-gradient(180deg, rgba(231,220,205,.92) 0%, rgba(203,177,152,.74) 12%, rgba(143,104,74,.66) 25%, rgba(119,87,63,.98) 38%, #6b4c37 66%, #5d402f 100%);
}
.contact::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(88px, 8vw, 124px);
  background: linear-gradient(180deg, rgba(238,229,216,.82) 0%, rgba(225,211,195,.42) 42%, rgba(225,211,195,0) 100%);
  pointer-events: none;
}
.contact::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(44vw, 760px);
  background-image:
    linear-gradient(90deg, #6b4c37 0%, rgba(107,76,55,.80) 24%, rgba(107,76,55,.28) 66%, rgba(107,76,55,.38) 100%),
    url("assets/rally-southwest-team.jpg");
  background-size: cover;
  background-position: center;
  opacity: .16;
  filter: sepia(.22) saturate(.72) contrast(.92);
  pointer-events: none;
}
.contact-inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(54px, 5vw, 78px);
  padding-bottom: clamp(54px, 5vw, 78px);
}
.contact-kicker {
  margin: clamp(24px, 2.4vw, 36px) 0 8px;
}
.contact-cta {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: clamp(22px, 3vw, 48px);
  font-size: clamp(58px, 7vw, 108px);
  line-height: .9;
  padding: 10px 0 28px;
}
.contact-title {
  display: inline-flex;
  align-items: baseline;
  gap: .16em;
  white-space: nowrap;
}
.contact-title em { font-weight: 500; }
.contact-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: clamp(21px, 2vw, 32px);
}
.contact-cta:hover .contact-arrow { transform: translate(6px,-6px); }
.contact-bottom {
  margin-top: 18px;
  padding-top: 2px;
}
.footer {
  background: linear-gradient(90deg, #694a35, #5c3f2e);
  border-top-color: rgba(241,232,221,.14);
}

@media (max-width: 900px) {
  .about {
    padding-top: clamp(96px, 12vw, 120px);
    background: linear-gradient(180deg, var(--deep) 0, rgba(94,80,68,.55) 34px, var(--paper) 94px, var(--paper) 100%);
  }
  .contact::after { width: 58vw; opacity: .12; }
  .contact-cta { font-size: clamp(52px, 10vw, 86px); }
}

@media (max-width: 700px) {
  .hero::after { height: 70px; }
  .story-film::before { top: -56px; height: 58px; }
  .contact::before { top: 0; height: 64px; }
  .about {
    padding-top: 92px;
    padding-bottom: 74px;
    background: linear-gradient(180deg, var(--deep) 0, rgba(94,80,68,.45) 28px, var(--paper) 72px, var(--paper) 100%);
  }
  .contact::after { width: 100%; opacity: .08; }
  .contact-inner { padding-top: 50px; padding-bottom: 52px; }
  .contact-cta {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    font-size: 13vw;
  }
  .contact-title {
    display: inline;
    white-space: normal;
  }
  .contact-arrow { margin-left: auto; margin-bottom: .08em; }
}

/* v1.8.1 — make the new CTA wrappers immune to the older generic span rules. */
.contact-cta .contact-title {
  display: inline-flex;
  align-items: baseline;
  gap: .16em;
  margin-left: 0;
  font-family: var(--serif);
  font-size: 1em;
  line-height: .9;
  letter-spacing: inherit;
  transform: none;
  transition: none;
}
.contact-cta .contact-title em {
  font-family: var(--serif);
  font-size: 1em;
  line-height: inherit;
}
.contact-cta .contact-arrow {
  display: inline-block;
  margin-left: auto;
  font-family: var(--sans);
  font-size: clamp(21px, 2vw, 32px);
}
.contact-cta:hover .contact-title { transform: none; }

@media (max-width: 700px) {
  .contact-cta .contact-title {
    display: inline;
    margin-left: 0;
    white-space: normal;
    font-size: 1em;
  }
  .contact-cta .contact-arrow { margin-left: auto; }
}

/* v1.9 — wider Rally project on large / ultrawide screens */
.project-page .project-gallery {
  width: min(100%, calc(2200px + (var(--pad) * 2)));
}
.project-page .project-hero {
  width: min(calc(100% - (var(--pad) * 2)), 2200px);
}

@media (min-width: 1800px) {
  .project-page .project-gallery {
    padding-left: clamp(70px, 4vw, 102px);
    padding-right: clamp(70px, 4vw, 102px);
  }
}


/* v1.11 — cleaner Socials entrance without the detached beige band. */
.contact-inner { padding-top: clamp(44px, 4.2vw, 66px); }
@media (max-width: 700px) {
  .contact-inner { padding-top: 44px; }
}