/* ============================================================
   IMG WEDDINGS — design system  (v2 · editorial fine-art)
   Bodoni Moda display · Hanken Grotesk · warm espresso/parchment
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=Hanken+Grotesk:wght@300;400;500;600&family=Sacramento&family=Caveat:wght@400;500;600&display=swap');

:root{
  /* palette — warm, moody, editorial */
  --parch:       oklch(0.957 0.012 80);   /* page bg            */
  --parch-deep:  oklch(0.930 0.016 78);   /* alt section bg     */
  --sand:        oklch(0.872 0.022 74);   /* cards / dividers   */
  --taupe:       oklch(0.585 0.022 56);   /* muted text         */
  --clay:        oklch(0.540 0.074 44);   /* single accent      */
  --espresso:    oklch(0.288 0.022 47);   /* primary text       */
  --espresso-dk: oklch(0.205 0.018 44);   /* dark sections      */

  --bg:  var(--parch);
  --fg:  var(--espresso);

  /* legacy palette aliases (v1 → v2) — keep older pages rendering correctly */
  --ink:       var(--espresso-dk);
  --ink-deep:  var(--espresso-dk);
  --bone:      var(--parch);

  /* type */
  --serif: 'Bodoni Moda', 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --script:'Sacramento', cursive;        /* elegant signature accent */
  --hand:  'Caveat', cursive;             /* casual handwritten notes */
  --mono:  ui-monospace, 'Courier New', monospace;

  /* rhythm */
  --gutter: clamp(1.4rem, 5.2vw, 6rem);
  --section: clamp(5.5rem, 12vw, 12rem);
  --maxw: 1560px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--fg);
  font-weight:400;
  line-height:1.62;
  font-size:clamp(15px,1.02vw,16.5px);
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--clay); color:var(--parch); }

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.0;
  letter-spacing:-0.005em;
  color:var(--espresso-dk);
  text-wrap:balance;
}
.display{ font-size:clamp(2.9rem,8vw,7.6rem); font-weight:400; line-height:0.96; }
.h-xl{ font-size:clamp(2.3rem,5vw,4.6rem); font-weight:400; line-height:1.02; }
.h-lg{ font-size:clamp(1.95rem,3.4vw,3.3rem); line-height:1.04; }
.h-md{ font-size:clamp(1.5rem,2.3vw,2.2rem); line-height:1.1; }
.italic{ font-style:italic; }
.lc{ text-transform:lowercase; }

.lead{
  font-size:clamp(1.08rem,1.5vw,1.32rem);
  line-height:1.62; color:var(--espresso); font-weight:300;
}
p.body{ color:var(--espresso); max-width:46ch; }
.muted{ color:var(--taupe); }

/* archival annotation system */
.anno{ font-family:var(--sans); font-weight:500; font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--taupe); }
.anno--clay{ color:var(--clay); }
.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--clay); display:inline-flex; align-items:center; gap:.9em;
}
.eyebrow::before{ content:""; width:2.4em; height:1px; background:currentColor; opacity:.55; }
.eyebrow.center::before{ display:none; }
.fig{ font-family:var(--sans); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--taupe); }
.vlabel{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--sans); font-size:.64rem; letter-spacing:.42em; text-transform:uppercase; color:var(--taupe);
  white-space:nowrap;
}
.rule{ height:1px; background:var(--sand); border:0; width:100%; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.bg-deep{ background:var(--parch-deep); }
.bg-ink{ background:var(--espresso-dk); color:var(--parch); }
.bg-ink h1,.bg-ink h2,.bg-ink h3{ color:var(--parch); }

/* ============================================================
   BUTTONS / LINKS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  padding:1.15em 2.1em; border-radius:0;
  background:var(--espresso-dk); color:var(--parch);
  transition:background .55s var(--ease), color .55s var(--ease), letter-spacing .55s var(--ease);
}
.btn:hover{ background:var(--clay); letter-spacing:.28em; }
.btn--ghost{ background:transparent; color:var(--espresso-dk); box-shadow:inset 0 0 0 1px var(--taupe); }
.btn--ghost:hover{ background:var(--espresso-dk); color:var(--parch); box-shadow:inset 0 0 0 1px var(--espresso-dk); }
.btn--light{ background:var(--parch); color:var(--espresso-dk); }
.btn--light:hover{ background:var(--clay); color:var(--parch); }
.btn .arrow{ transition:transform .5s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.tlink{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  position:relative; padding-bottom:.45em; color:var(--espresso-dk);
}
.tlink::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform-origin:right; transform:scaleX(1); transition:transform .55s var(--ease); }
.tlink:hover::after{ transform-origin:left; transform:scaleX(0); }
.tlink .arrow{ transition:transform .5s var(--ease); }
.tlink:hover .arrow{ transform:translateX(5px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.7rem var(--gutter);
  transition:background .6s var(--ease), padding .6s var(--ease), box-shadow .6s var(--ease);
}
.nav__brand{ display:inline-flex; align-items:center; gap:.72rem; color:var(--parch); line-height:1; transition:color .6s var(--ease); }
.nav__mark{ width:46px; height:auto; aspect-ratio:668/359; color:inherit; display:block; flex:none; transform-origin:60% 50%;
  transition:transform .6s cubic-bezier(0.22,1,0.36,1); }
.nav__brand:hover .nav__mark{ transform:translateY(-1px) rotate(-5deg) scale(1.07); }
.nav__lockup{ display:flex; flex-direction:column; gap:.42em; padding-left:.72rem;
  border-left:1px solid color-mix(in oklch, currentColor 30%, transparent); }
.nav__lockup b{ font-family:var(--serif); font-weight:500; font-size:1.2rem; letter-spacing:.04em; }
.nav__lockup span{ font-family:var(--sans); font-size:.46rem; letter-spacing:.4em; text-transform:uppercase; opacity:.72; white-space:nowrap; }
.nav__links{ display:flex; align-items:center; gap:clamp(.85rem,1.7vw,1.7rem); }
.nav__links a{
  font-size:.66rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--parch); opacity:.85; position:relative; padding:.3em 0;
  transition:color .6s var(--ease), opacity .3s var(--ease);
}
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--clay); transition:width .45s var(--ease); }
.nav__links a:hover{ opacity:1; }
.nav__links a.active{ opacity:1; color:var(--clay); }
.nav__links a:hover::after,.nav__links a.active::after{ width:100%; }
.nav__cta{
  font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:.95em 1.6em; background:var(--clay); color:var(--parch);
  transition:background .5s var(--ease), color .5s var(--ease), transform .45s var(--ease);
}
.nav__cta:hover{ background:var(--espresso-dk); color:var(--parch); transform:translateY(-1px); }
.nav__cta::after{ display:none !important; }
@media (max-width:430px){ .nav__lockup span{ display:none; } .nav__mark{ width:40px; } }

.nav.solid{ background:rgba(247,242,234,.9); backdrop-filter:blur(16px); padding-block:1.05rem; box-shadow:0 1px 0 var(--sand); }
.nav.solid .nav__brand,.nav.solid .nav__links a{ color:var(--espresso-dk); }
.nav.solid .nav__cta{ color:var(--parch); background:var(--clay); }
.nav.solid .nav__cta:hover{ background:var(--espresso-dk); color:var(--parch); }
.nav.on-light .nav__brand,.nav.on-light .nav__links a{ color:var(--espresso-dk); }
.nav.solid .nav__links a.active,.nav.on-light .nav__links a.active{ color:var(--clay); }
.nav.on-light .nav__cta{ color:var(--parch); background:var(--clay); }

.nav__burger{ display:none; }
@media (max-width:920px){
  .nav__links{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:1.7rem;
    background:var(--espresso-dk);
    clip-path:circle(0% at calc(100% - 3rem) 3rem); transition:clip-path .7s var(--ease); pointer-events:none;
  }
  .nav__links a{ color:var(--parch); font-size:1.9rem; font-family:var(--serif); letter-spacing:.02em; text-transform:none; opacity:1; }
  .nav__links .nav__cta{ font-family:var(--sans); font-size:.78rem; }
  body.menu-open .nav__links{ clip-path:circle(150% at calc(100% - 3rem) 3rem); pointer-events:auto; }
  .nav__burger{ display:flex; flex-direction:column; gap:5px; z-index:101; width:30px; }
  .nav__burger span{ height:1.5px; width:100%; background:var(--parch); transition:transform .5s var(--ease), opacity .3s; }
  .nav.solid .nav__burger span,.nav.on-light .nav__burger span{ background:var(--espresso-dk); }
  body.menu-open .nav__burger span{ background:var(--parch); }
  body.menu-open .nav__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
  body.menu-open .nav__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; height:670px; min-height:520px; overflow:hidden; background:var(--espresso-dk); }
.hero__media{ position:absolute; inset:0; }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover; }
/* keep hero video wide, not zoomed in */
.hero__media--zoom video,.hero__media--zoom img{ animation:none !important; transform:none !important; }
/* black letterbox bars removed */
.hero__bar{ display:none !important; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,15,.42) 0%, rgba(20,17,15,.14) 30%, rgba(20,17,15,.18) 60%, rgba(20,17,15,.6) 100%);
}
.hero__inner{ position:relative; z-index:3; height:100%; color:var(--parch); }

/* sub-page hero (no video) */
.phero{ padding-top:clamp(9.5rem,17vh,14rem); padding-bottom:clamp(3rem,6vh,5rem); }
.phero .display{ max-width:18ch; }

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease); will-change:opacity,transform; }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.1s; }
[data-reveal][data-d="2"]{ transition-delay:.2s; }
[data-reveal][data-d="3"]{ transition-delay:.3s; }
[data-reveal][data-d="4"]{ transition-delay:.4s; }

.imgreveal{ overflow:hidden; }
.imgreveal img,.imgreveal video{ transform:scale(1.14); transition:transform 1.7s var(--ease); }
.imgreveal.in img,.imgreveal.in video{ transform:scale(1); }

.linemask{ overflow:hidden; display:block; }
.linemask > span{ display:block; transform:translateY(108%); transition:transform 1.2s var(--ease); }
.in .linemask > span,.linemask.in > span{ transform:none; }

.filmgrain{ position:absolute; inset:-40%; pointer-events:none; opacity:.13; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001s !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .filmgrain{ display:none; }
}

/* ============================================================
   FIGURE / GALLERY
   ============================================================ */
.figure{ position:relative; overflow:hidden; background:var(--sand); }
.figure img,.figure video{ width:100%; height:100%; object-fit:cover; }
.ratio-3-4{ aspect-ratio:3/4; }
.ratio-4-5{ aspect-ratio:4/5; }
.ratio-2-3{ aspect-ratio:2/3; }
.ratio-1-1{ aspect-ratio:1/1; }
.ratio-16-9{ aspect-ratio:16/9; }
.ratio-3-2{ aspect-ratio:3/2; }
.ratio-21-9{ aspect-ratio:21/9; }
.ratio-5-7{ aspect-ratio:5/7; }

.caption{ font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); margin-top:1rem; display:flex; justify-content:space-between; gap:1rem; }

.placeholder{ position:relative; background:repeating-linear-gradient(135deg, var(--parch-deep) 0 12px, var(--sand) 12px 24px); display:flex; align-items:center; justify-content:center; }
.placeholder span{ font-family:var(--sans); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); background:var(--parch); padding:.5em 1em; }

/* ============================================================
   FOOTER  (editorial, numbered)
   ============================================================ */
.foot{ background:var(--espresso-dk); color:var(--parch); padding-block:clamp(4.5rem,9vw,8rem) 2.5rem; position:relative; overflow:hidden; }
.foot::after{ content:""; position:absolute; right:-3%; bottom:-14%; width:min(46vw,520px); aspect-ratio:668/416; z-index:0; pointer-events:none;
  background:url(../img-logo.svg) no-repeat center/contain; opacity:.05; transform:rotate(-6deg);
  -webkit-mask-image:linear-gradient(150deg,transparent,#000 55%); mask-image:linear-gradient(150deg,transparent,#000 55%); }
.foot .wrap{ position:relative; z-index:1; }
.foot a{ color:rgba(244,239,230,.72); transition:color .4s var(--ease); }
.foot a:hover{ color:var(--parch); }
.foot__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; align-items:start; }
.foot__brand{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:400; line-height:1; color:var(--parch); }
.foot__brand span{ display:block; font-family:var(--sans); font-size:.56rem; letter-spacing:.4em; text-transform:uppercase; margin-top:1.1em; opacity:.55; }
.foot__col h4{ font-family:var(--sans); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(244,239,230,.45); margin-bottom:1.4rem; font-weight:600; }
.foot__col ul{ list-style:none; display:flex; flex-direction:column; gap:.8rem; }
.foot__col a{ font-size:.95rem; }
.foot__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; margin-top:clamp(3.5rem,7vw,6rem); padding-top:2rem; border-top:1px solid rgba(244,239,230,.14); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,239,230,.5); }
.foot__social{ display:flex; gap:1.6rem; }
.foot__social a{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; }
@media (max-width:920px){ .foot__top{ grid-template-columns:1fr 1fr; gap:2.5rem 1.5rem; } .foot__brand{ grid-column:1 / -1; } }
@media (max-width:560px){ .foot__top{ grid-template-columns:1fr; } }

/* ============================================================
   UTILITIES
   ============================================================ */
.stack-sm > * + *{ margin-top:1rem; }
.stack-md > * + *{ margin-top:1.6rem; }
.stack-lg > * + *{ margin-top:2.4rem; }
.center{ text-align:center; }
.maxw-sm{ max-width:34rem; }
.maxw-md{ max-width:46rem; }
.maxw-lg{ max-width:62rem; }
.mx-auto{ margin-inline:auto; }
.grid{ display:grid; }
.flex{ display:flex; }
.between{ justify-content:space-between; }
.items-end{ align-items:flex-end; }
.items-center{ align-items:center; }
.gap-g{ gap:var(--gutter); }

/* ============================================================
   CINEMATIC HERO  (wide, letterbox, sound)
   ============================================================ */
.hero__bar{ position:absolute; left:0; right:0; height:clamp(26px,4.5vh,64px); background:#0b0a09; z-index:4; pointer-events:none;
  transform:scaleY(1); transform-origin:center; transition:transform 1.3s var(--ease) .2s; }
.hero__bar--top{ top:0; transform-origin:top; }
.hero__bar--btm{ bottom:0; transform-origin:bottom; }
body.cine-open .hero__bar{ transform:scaleY(0); }
.hero__grade{ position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:soft-light;
  background:radial-gradient(120% 80% at 50% 30%, rgba(214,150,90,.18), transparent 60%); }
.hero__sound{
  position:absolute; right:clamp(1.2rem,3vw,2.4rem); bottom:clamp(4.5rem,9vh,7rem); z-index:5;
  display:flex; align-items:center; gap:.7em; color:var(--parch);
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
}
.hero__sound .dot{ width:30px; height:30px; border:1px solid rgba(244,239,230,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .4s var(--ease), color .4s var(--ease); }
.hero__sound:hover .dot{ background:var(--parch); color:var(--espresso-dk); }
.hero__sound .bars{ display:flex; align-items:center; gap:2px; height:11px; }
.hero__sound .bars i{ width:2px; background:currentColor; height:40%; animation:eq 1s ease-in-out infinite; }
.hero__sound .bars i:nth-child(2){ animation-delay:.2s; } .hero__sound .bars i:nth-child(3){ animation-delay:.4s; } .hero__sound .bars i:nth-child(4){ animation-delay:.1s; }
@keyframes eq{ 0%,100%{ height:30% } 50%{ height:100% } }
body.muted .hero__sound .bars i{ animation-play-state:paused; height:30%; }

/* ============================================================
   MODERN MASONRY  (photography)
   ============================================================ */
.masonry{ columns:4; column-gap:clamp(.35rem,.7vw,.6rem); }
.masonry .tile{ break-inside:avoid; margin-bottom:clamp(.35rem,.7vw,.6rem); position:relative; overflow:hidden; display:block; background:var(--sand); cursor:zoom-in; }
.masonry .tile img{ width:100%; height:auto; display:block; transition:transform 1.1s var(--ease), filter .6s var(--ease); }
.masonry .tile::after{ content:""; position:absolute; inset:0; background:rgba(20,17,15,0); transition:background .5s var(--ease); }
.masonry .tile:hover img{ transform:scale(1.045); }
.masonry .tile:hover::after{ background:rgba(20,17,15,.12); }
.masonry .tile__no{ position:absolute; top:.8rem; left:.9rem; z-index:2; font-size:.58rem; letter-spacing:.2em; color:rgba(244,239,230,.85); opacity:0; transform:translateY(-4px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.masonry .tile:hover .tile__no{ opacity:1; transform:none; }
@media (max-width:1100px){ .masonry{ columns:3; } }
@media (max-width:760px){ .masonry{ columns:2; } }
@media (max-width:440px){ .masonry{ columns:1; } }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{ position:fixed; inset:0; z-index:300; background:rgba(11,10,9,.94); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; backdrop-filter:blur(4px); }
.lb.open{ opacity:1; visibility:visible; }
.lb__img{ max-width:88vw; max-height:84vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.96); transition:transform .5s var(--ease); }
.lb.open .lb__img{ transform:scale(1); }
.lb__close{ position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); color:var(--parch); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; display:flex; align-items:center; gap:.6em; }
.lb__count{ position:absolute; top:clamp(1.1rem,3vw,2.1rem); left:clamp(1rem,3vw,2rem); color:rgba(244,239,230,.7); font-size:.66rem; letter-spacing:.24em; }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); color:var(--parch); width:54px; height:54px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; opacity:.7; transition:opacity .4s var(--ease); }
.lb__nav:hover{ opacity:1; }
.lb__nav--prev{ left:clamp(.5rem,2vw,2rem); } .lb__nav--next{ right:clamp(.5rem,2vw,2rem); }

/* ============================================================
   FILM CARDS
   ============================================================ */
.film{ position:relative; display:block; overflow:hidden; background:var(--sand); }
.film .figure{ width:100%; height:100%; }
.film::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,17,15,.05) 40%,rgba(20,17,15,.72)); transition:background .5s var(--ease); }
.film:hover::after{ background:linear-gradient(180deg,rgba(20,17,15,.15) 30%,rgba(20,17,15,.8)); }
.film:hover img{ transform:scale(1.05); }
.film__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); z-index:3;
  width:72px; height:72px; border-radius:50%; border:1px solid rgba(244,239,230,.7); display:flex; align-items:center; justify-content:center;
  color:var(--parch); font-size:.8rem; padding-left:3px; opacity:.85; transition:all .5s var(--ease); }
.film:hover .film__play{ opacity:1; transform:translate(-50%,-50%) scale(1); background:var(--parch); color:var(--espresso-dk); border-color:var(--parch); }
.film__meta{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:clamp(1.1rem,2.4vw,2rem); display:flex; flex-direction:column; gap:.5rem; }
.film__style{ align-self:flex-start; font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; color:var(--espresso-dk); background:var(--parch); padding:.45em .9em; }
.film__title{ font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,2.1rem); color:var(--parch); line-height:1.05; }
.film__where{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,230,.78); }

/* ============================================================
   SCROLL-EXPAND VIDEO SHOWCASE
   ============================================================ */
.xstage{ position:relative; height:230vh; background:var(--espresso-dk); }
.xsticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--espresso-dk); }
.xclip{ position:relative; width:100%; height:100%; transform:scale(.56); border-radius:20px; overflow:hidden; will-change:transform,border-radius; }
.xclip video,.xclip img{ width:100%; height:100%; object-fit:cover; }
.xclip::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,17,15,.32),rgba(20,17,15,.12) 40%,rgba(20,17,15,.55)); }
.xtitle{ position:absolute; z-index:3; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; pointer-events:none; padding-inline:var(--gutter); will-change:transform,opacity; }
.xtitle .display{ color:var(--parch); }
.xtitle .display .italic{ color:var(--parch); }
.xcap{ position:absolute; z-index:3; left:0; right:0; bottom:clamp(1.5rem,4vw,3rem); display:flex; justify-content:space-between; padding-inline:clamp(1.5rem,4vw,3.5rem); will-change:opacity; }
.xcap .anno{ color:rgba(244,239,230,.85); }
@media (max-width:760px){ .xstage{ height:190vh; } }
@media (prefers-reduced-motion:reduce){ .xstage{ height:auto; } .xsticky{ position:relative; height:80vh; } .xclip{ transform:none; border-radius:0; } }

/* ============================================================
   CUSTOM CURSOR  (blend-mode ring + label)
   ============================================================ */
.cursor{ position:fixed; top:0; left:0; z-index:500; pointer-events:none; transform:translate(-50%,-50%);
  width:42px; height:42px; border:1px solid var(--parch); border-radius:50%; mix-blend-mode:difference;
  display:flex; align-items:center; justify-content:center;
  transition:width .4s var(--ease), height .4s var(--ease), background-color .4s var(--ease), opacity .3s; opacity:0; }
.cursor__dot{ position:fixed; top:0; left:0; z-index:500; pointer-events:none; width:5px; height:5px; border-radius:50%; background:var(--parch); mix-blend-mode:difference; transform:translate(-50%,-50%); opacity:0; transition:opacity .3s; }
body.has-cursor .cursor,body.has-cursor .cursor__dot{ opacity:1; }
body.cursor-grow .cursor{ width:84px; height:84px; }
body.cursor-media .cursor{ width:96px; height:96px; background:rgba(244,239,230,.92); border-color:transparent; mix-blend-mode:normal; }
body.cursor-media .cursor__dot{ opacity:0; }
.cursor__label{ font-family:var(--sans); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--espresso-dk); opacity:0; transform:scale(.6); transition:opacity .3s var(--ease), transform .3s var(--ease); }
body.cursor-media .cursor__label{ opacity:1; transform:scale(1); }
@media (pointer:coarse){ .cursor,.cursor__dot{ display:none; } }

/* magnetic targets keep their own transitions */
[data-magnetic]{ will-change:transform; transition:transform .35s var(--ease); }

/* ============================================================
   VIDEO MODAL
   ============================================================ */
.vmodal{ position:fixed; inset:0; z-index:320; background:rgba(11,10,9,.95); display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; backdrop-filter:blur(6px); }
.vmodal.open{ opacity:1; visibility:visible; }
.vmodal__frame{ width:min(1100px,92vw); aspect-ratio:16/9; background:#000; transform:scale(.96); transition:transform .5s var(--ease); box-shadow:0 30px 90px rgba(0,0,0,.55); }
.vmodal.open .vmodal__frame{ transform:scale(1); }
.vmodal__video{ width:100%; height:100%; object-fit:contain; background:#000; }
.vmodal__close{ position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); color:var(--parch); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; display:flex; align-items:center; gap:.6em; }

/* award ticker */
.awards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem); }
.award{ display:flex; flex-direction:column; gap:.6rem; padding-top:1.4rem; border-top:1px solid var(--sand); }
.award__yr{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--clay); }
.award h4{ font-family:var(--serif); font-size:1.4rem; font-weight:400; color:var(--espresso-dk); }
.award p{ font-size:.85rem; color:var(--taupe); }
@media (max-width:760px){ .awards{ grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .awards{ grid-template-columns:1fr; } }

/* ============================================================
   SCRAPBOOK KIT  (editorial collage personality)
   ============================================================ */
/* signature script + handwritten accents */
.script{ font-family:var(--script); font-weight:400; line-height:.9; color:var(--clay); }
.hand{ font-family:var(--hand); font-weight:500; line-height:1.05; }
.filmtag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); }

/* heading flourish: a script word sitting above/within a serif heading */
.flourish{ position:relative; display:inline-block; }
.flourish .script{ display:block; font-size:clamp(2.4rem,4.6vw,3.8rem); transform:rotate(-4deg); margin-bottom:-.35em; }

/* polaroid frame */
.polaroid{ background:#fbf8f1; padding:.72rem .72rem 2.7rem; box-shadow:0 20px 44px rgba(20,17,15,.20); position:relative; }
.polaroid img,.polaroid video{ display:block; width:100%; height:100%; object-fit:cover; }
.polaroid .pcap{ position:absolute; left:.72rem; right:.72rem; bottom:.55rem; text-align:center; font-family:var(--hand); font-size:1.25rem; color:var(--espresso); }
.rot-l{ transform:rotate(-2.4deg); } .rot-r{ transform:rotate(2.6deg); }
.rot-l:hover,.rot-r:hover{ transform:rotate(0); }
.polaroid,.rot-l,.rot-r{ transition:transform .6s var(--ease); }

/* washi tape strip */
.tape{ position:relative; }
.tape::before{ content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:96px; height:28px; background:rgba(202,184,150,.55); box-shadow:0 2px 8px rgba(20,17,15,.08);
  -webkit-backdrop-filter:saturate(.8); z-index:6; }
.tape--tl::before{ left:14%; transform:rotate(-24deg); }
.tape--tr::before{ left:auto; right:8%; transform:rotate(20deg); }

/* film-negative strip label */
.filmstrip{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.7rem .35rem; background:#16130f; color:rgba(244,239,230,.85); }
.filmstrip::before,.filmstrip::after{ content:""; position:absolute; top:6px; bottom:6px; width:7px;
  background-image:repeating-linear-gradient(180deg,#fbf8f1 0 7px, transparent 7px 15px); }
.filmstrip::before{ left:3px; } .filmstrip::after{ right:3px; }
.filmstrip span{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; }

/* subtle paper grain for light sections */
.paper{ position:relative; }
.paper::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.06'/%3E%3C/svg%3E"); }
.paper > *{ position:relative; z-index:1; }
/* JS-injected cursor followers are direct children of body.paper — keep them fixed */
.paper > .cursor, .paper > .cursor__dot{ position:fixed; z-index:500; }

/* ============================================================
   SCROLL PROGRESS + TILT
   ============================================================ */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--clay); z-index:600; pointer-events:none; }
[data-tilt]{ transition:transform .5s var(--ease); transform-style:preserve-3d; will-change:transform; }
@media (pointer:coarse){ [data-tilt]{ transform:none !important; } }

/* per-page handwritten hero signature */
.hero__sig{ position:absolute; right:clamp(1.2rem,4vw,3rem); bottom:clamp(4.5rem,10vh,7rem); z-index:5;
  font-size:clamp(1.7rem,3.2vw,2.6rem); color:var(--parch); transform:rotate(-5deg); pointer-events:none; }
@media (max-width:820px){ .hero__sig{ display:none; } }
.phero__sig{ display:block; font-family:var(--hand); font-weight:500; font-size:clamp(1.7rem,3vw,2.3rem);
  color:var(--clay); transform:rotate(-4deg); transform-origin:left; margin:.5rem 0 .2rem; }

/* ============================================================
   PER-PAGE PERSONALITY — each chapter gets its own accent hue
   (all kept within the warm earth family so it reads intentional)
   ============================================================ */
.page-films   { --clay: oklch(0.520 0.098 36); }  /* cinematic terracotta */
.page-photo   { --clay: oklch(0.545 0.072 26); }  /* editorial rose-clay  */
.page-about   { --clay: oklch(0.515 0.058 92); }  /* warm olive           */
.page-approach{ --clay: oklch(0.575 0.086 70); }  /* golden ochre         */
.page-journal { --clay: oklch(0.470 0.040 52); }  /* inky cocoa           */
/* home + contact keep the house clay */
.page-legal   { --clay: oklch(0.500 0.050 60); }  /* calm legal bronze    */
.page-404     { --clay: oklch(0.520 0.098 36); }  /* cinematic terracotta */

/* ============================================================
   LEGAL / PROSE  (privacy · terms)
   ============================================================ */
.lhero{ padding-top:clamp(8.5rem,16vh,12rem); padding-bottom:clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--sand); }
.lhero__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.lhero .display{ font-size:clamp(2.8rem,7vw,5.4rem); }
.lhero__meta{ text-align:right; display:flex; flex-direction:column; gap:.5rem; }

.legal{ display:grid; grid-template-columns:minmax(180px,250px) 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.legal__nav{ position:sticky; top:7rem; align-self:start; display:flex; flex-direction:column; gap:.95rem; padding-top:.4rem; }
.legal__nav .anno{ margin-bottom:.4rem; }
.legal__nav a{ font-size:.82rem; letter-spacing:.01em; color:var(--taupe); transition:color .4s var(--ease); line-height:1.4; }
.legal__nav a:hover{ color:var(--espresso-dk); }
.legal__nav a.active{ color:var(--clay); }

.prose{ max-width:64ch; }
.prose > section{ padding-block:clamp(1.8rem,3.4vw,2.8rem); border-top:1px solid var(--sand); }
.prose > section:first-child{ border-top:0; padding-top:0; }
.prose__no{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--clay); display:block; margin-bottom:.7rem; }
.prose h2{ font-size:clamp(1.5rem,2.4vw,2.1rem); margin-bottom:1.1rem; text-transform:lowercase; }
.prose h3{ font-family:var(--sans); font-weight:600; font-size:.96rem; letter-spacing:.01em; color:var(--espresso-dk); margin:1.7rem 0 .6rem; }
.prose p{ color:var(--espresso); margin-bottom:1rem; line-height:1.7; }
.prose p.muted{ color:var(--taupe); }
.prose a:not(.tlink){ color:var(--clay); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose ul{ list-style:none; display:grid; gap:.7rem; margin:.4rem 0 1.2rem; }
.prose ul li{ position:relative; padding-left:1.6em; color:var(--espresso); line-height:1.6; }
.prose ul li::before{ content:"—"; position:absolute; left:0; color:var(--clay); }
.prose .lede{ font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.45; color:var(--espresso-dk); margin-bottom:1.4rem; font-weight:400; }
.prose__contact{ margin-top:1rem; padding:clamp(1.4rem,2.6vw,2rem); background:var(--parch-deep); border:1px solid var(--sand); }
.prose__contact .anno{ display:block; margin-bottom:.8rem; }
.prose__contact a{ font-family:var(--serif); font-size:1.3rem; color:var(--espresso-dk); }
@media (max-width:820px){
  .legal{ grid-template-columns:1fr; gap:2.2rem; }
  .legal__nav{ position:static; flex-flow:row wrap; gap:.6rem 1.3rem; padding-bottom:1.4rem; border-bottom:1px solid var(--sand); }
  .legal__nav .anno{ width:100%; margin-bottom:0; }
}

/* ============================================================
   404
   ============================================================ */
.e404{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; isolation:isolate; background:var(--espresso-dk); }
.e404__media{ position:absolute; inset:0; z-index:0; }
.e404__media img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.e404::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(20,17,15,.6),rgba(20,17,15,.78)); }
.e404__inner{ position:relative; z-index:3; width:100%; padding-block:clamp(7rem,14vh,10rem); color:var(--parch); }
.e404__code{ font-family:var(--serif); font-style:italic; font-size:clamp(5rem,18vw,13rem); line-height:.9; color:var(--parch); }
.e404__code .clay{ color:var(--clay); font-style:normal; }
.e404 h1{ color:var(--parch); margin:1rem 0 1.4rem; }
.e404 .lead{ color:rgba(244,239,230,.82); max-width:48ch; }
.e404__links{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:2.8rem; }
.e404__links a{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--parch); display:inline-flex; align-items:center; gap:.6em; position:relative; padding-bottom:.4em; }
.e404__links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:rgba(244,239,230,.4); transform-origin:right; transition:transform .5s var(--ease); }
.e404__links a:hover::after{ transform-origin:left; transform:scaleX(0); }

/* ============================================================
   FILM STORY DETAIL  (single couple's film home)
   ============================================================ */
.dhero{ position:relative; height:clamp(620px,92vh,940px); overflow:hidden; isolation:isolate; background:var(--espresso-dk); }
.dhero__media{ position:absolute; inset:0; z-index:0; }
.dhero__media video,.dhero__media img{ width:100%; height:100%; object-fit:cover; }
.dhero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(20,17,15,.5) 0%,rgba(20,17,15,.12) 32%,rgba(20,17,15,.2) 58%,rgba(20,17,15,.82) 100%); }
.dhero__inner{ position:relative; z-index:3; height:100%; color:var(--parch);
  display:grid; grid-template-rows:auto 1fr auto; padding-top:clamp(6.5rem,12vh,8rem); padding-bottom:clamp(2.6rem,6vh,4rem); }
.dhero__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.dhero__btm{ align-self:end; }
.dhero__names{ font-family:var(--serif); font-weight:400; color:var(--parch); line-height:.92;
  font-size:clamp(2.8rem,8.5vw,7.4rem); letter-spacing:-.01em; }
.dhero__names .amp{ font-style:italic; color:var(--parch); font-weight:400; padding:0 .12em; }
.dhero__sub{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:1.4rem; }
.dhero__sub .anno{ color:rgba(244,239,230,.9); }
.dhero__metarow{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-top:1.6rem; }
.dcrumb{ display:flex; align-items:center; gap:.7em; }
.dcrumb a,.dcrumb span{ font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(244,239,230,.7); }
.dcrumb a:hover{ color:var(--parch); }

/* story intro */
.story{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.story__portrait{ position:relative; }
.story__tag{ position:absolute; bottom:-1.4rem; left:-1.4rem; }
@media (max-width:820px){ .story{ grid-template-columns:1fr; gap:2.6rem; } }

/* the film frame */
.dfilm{ position:relative; display:block; overflow:hidden; background:var(--sand); outline:1px solid var(--sand); outline-offset:10px; }
.dfilm .figure{ width:100%; height:100%; }
.dfilm::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,17,15,.05) 45%,rgba(20,17,15,.5)); transition:background .5s var(--ease); }
.dfilm:hover::after{ background:linear-gradient(180deg,rgba(20,17,15,.15) 35%,rgba(20,17,15,.62)); }
.dfilm:hover img{ transform:scale(1.04); }
.dfilm__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.92); z-index:3;
  width:84px; height:84px; border-radius:50%; border:1px solid rgba(244,239,230,.75); display:flex; align-items:center; justify-content:center;
  color:var(--parch); font-size:.9rem; padding-left:4px; transition:all .5s var(--ease); }
.dfilm:hover .dfilm__play{ background:var(--parch); color:var(--espresso-dk); border-color:var(--parch); transform:translate(-50%,-50%) scale(1); }
.dfilm__label{ position:absolute; left:0; bottom:0; z-index:3; padding:clamp(1.1rem,2.4vw,2rem); }
.dfilm__label .anno{ color:rgba(244,239,230,.9); }

/* details ledger */
.ledger{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--sand); border:1px solid var(--sand); }
.ledger__cell{ background:var(--bg); padding:clamp(1.4rem,2.6vw,2.1rem); display:flex; flex-direction:column; gap:.6rem; }
.ledger__cell .anno{ color:var(--taupe); }
.ledger__cell b{ font-family:var(--serif); font-weight:400; font-size:clamp(1.2rem,1.8vw,1.6rem); color:var(--espresso-dk); line-height:1.15; }
.ledger__cell span.sm{ font-size:.85rem; color:var(--taupe); }
@media (max-width:680px){ .ledger{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .ledger{ grid-template-columns:1fr; } }

/* story gallery — editorial asymmetric grid */
.sgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.5rem,1vw,.9rem); }
.sgrid .tile{ position:relative; overflow:hidden; background:var(--sand); cursor:zoom-in; display:block; }
.sgrid .tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.sgrid .tile::after{ content:""; position:absolute; inset:0; background:rgba(20,17,15,0); transition:background .5s var(--ease); }
.sgrid .tile:hover img{ transform:scale(1.05); }
.sgrid .tile:hover::after{ background:rgba(20,17,15,.1); }
.sgrid .t-wide{ grid-column:span 4; aspect-ratio:3/2; }
.sgrid .t-tall{ grid-column:span 2; grid-row:span 2; aspect-ratio:3/4; }
.sgrid .t-sq{ grid-column:span 2; aspect-ratio:1/1; }
.sgrid .t-half{ grid-column:span 3; aspect-ratio:4/3; }
@media (max-width:680px){
  .sgrid{ grid-template-columns:1fr 1fr; }
  .sgrid .t-wide,.sgrid .t-tall,.sgrid .t-sq,.sgrid .t-half{ grid-column:span 1; grid-row:auto; aspect-ratio:4/5; }
}

/* related films */
.rfilms{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,1.8vw,1.4rem); }
.rfilms .film{ aspect-ratio:4/5; }
@media (max-width:760px){ .rfilms{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .rfilms{ grid-template-columns:1fr; } }