/* Premium Home LB — film.css
   One dark volume, one warm key light, two type registers.
   Replaces the Tailwind Play CDN entirely. */

/* ─── tokens ─────────────────────────────────────────────── */
:root{
  --ink:#0C0A09; --ink-2:#16110D; --ink-3:#211913;
  --oak:#A16207; --brass:#C88A3C; --ember:#E0A356; --haze:#D8A15E;
  --bone:#F1EAE0; --bone-dim:#A79A8B; --line:#33261C;

  --display:'Cormorant',Georgia,'Times New Roman',serif;
  --ui:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem;
  --s5:4rem; --s6:6rem; --s7:9rem; --s8:14rem;

  --ease-cine:cubic-bezier(.16,1,.3,1);
  --dur-fast:260ms; --dur-mid:600ms; --dur-slow:900ms;

  --gutter:clamp(1.25rem,5vw,5.5rem);
  --measure:64rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;overflow-x:clip; background:var(--ink); color:var(--bone);
  font-family:var(--ui); font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}

:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:var(--s2);top:-4rem;z-index:200;
  background:var(--ember);color:var(--ink);padding:.75rem 1.25rem;
  font-weight:600;transition:top var(--dur-fast) var(--ease-cine);
}
.skip:focus{top:var(--s2)}

/* ─── film stock: grain + vignette, always on, cheap ──────── */
.grain,.vig{position:fixed;inset:0;pointer-events:none;z-index:90}
.grain{
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vig{
  z-index:89;
  background:radial-gradient(120% 85% at 50% 42%,transparent 35%,rgba(12,10,9,.55) 100%);
}

/* ─── type registers: only two, nothing between ──────────── */
.t-mono{
  font-family:var(--ui);font-size:.6875rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);
}
.t-d1{font-family:var(--display);font-size:clamp(3rem,11vw,9.5rem);font-weight:300;line-height:.92;letter-spacing:-.015em;margin:0}
.t-d2{font-family:var(--display);font-size:clamp(2.2rem,6vw,4.5rem);font-weight:300;line-height:1.02;letter-spacing:-.01em;margin:0}
.t-d3{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:400;line-height:1.18;margin:0}
.lede{max-width:44ch;color:var(--bone-dim);font-weight:300}
em,.ital{font-style:italic;color:var(--haze)}

/* ─── layout scaffolding (invisible infrastructure) ──────── */
.wrap{width:100%;max-width:88rem;margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:clamp(var(--s6),12vh,var(--s8))}
/* one light origin per section, never an even fill */
.lit{position:relative}
.lit::before{
  content:'';position:absolute;inset:-20% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at var(--lx,28%) var(--ly,38%),
    rgba(216,161,94,.13),rgba(216,161,94,.04) 42%,transparent 72%);
}
.rule{height:1px;background:var(--line);transform-origin:left center;border:0;margin:0}
.rule--r{transform-origin:right center}

/* ─── navigation ─────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background var(--dur-fast) linear,border-color var(--dur-fast) linear;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(12,10,9,.72);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;
  height:4.5rem;padding-inline:var(--gutter);max-width:88rem;margin-inline:auto}
.nav__brand{display:flex;align-items:center;gap:.7rem;min-height:44px;padding-block:.35rem}
.nav__brand img{height:2rem;width:auto}
.nav__brand span{font-family:var(--display);font-size:1.15rem;letter-spacing:.04em}
.nav__links{display:flex;gap:.35rem;align-items:center}
.nav__links a{
  position:relative;padding:.85rem .95rem;min-height:44px;display:inline-flex;align-items:center;
  font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-dim);transition:color var(--dur-fast) var(--ease-cine);
}
.nav__links a:hover{color:var(--bone)}
.nav__links a::after{
  content:'';position:absolute;left:.95rem;right:.95rem;bottom:.6rem;height:1px;
  background:var(--ember);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-cine);
}
.nav__links a:hover::after,.nav__links a[aria-current=page]::after{transform:scaleX(1)}
.nav__links a[aria-current=page]{color:var(--bone)}
.nav__burger{
  display:none;background:none;border:0;padding:.75rem;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
.nav__panel{display:none}

@media (max-width:820px){
  .nav__burger{display:inline-flex}
  .nav__links{
    display:none;position:fixed;inset:4.5rem 0 auto;flex-direction:column;gap:0;
    background:rgba(12,10,9,.97);backdrop-filter:blur(18px);
    border-block:1px solid var(--line);padding:var(--s2) var(--gutter) var(--s4);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{width:100%;padding:1.1rem 0;font-size:.85rem;border-bottom:1px solid var(--line)}
  .nav__links a::after{left:0;right:0;bottom:1rem}
}

/* ─── buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.6rem;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line);background:transparent;color:var(--bone);
  transition:border-color var(--dur-fast) var(--ease-cine),
             color var(--dur-fast) var(--ease-cine),
             background var(--dur-fast) var(--ease-cine);
}
.btn:hover{border-color:var(--ember);color:var(--ember)}
.btn--solid{background:var(--ember);border-color:var(--ember);color:var(--ink)}
.btn--solid:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.btn svg{width:1rem;height:1rem;flex:none}

/* ─── §1 arrival: full-bleed plate, headline off-axis ────── */
.arrival{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.arrival__plate{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 0)}
.arrival__plate img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.arrival__plate::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(75deg,rgba(12,10,9,.94) 8%,rgba(12,10,9,.55) 44%,rgba(12,10,9,.14) 70%),
             linear-gradient(to top,rgba(12,10,9,.95),transparent 42%);
}
.arrival__copy{position:relative;z-index:2;padding-block:0 clamp(var(--s5),11vh,var(--s7));width:100%}
.arrival__copy .t-d1{max-width:14ch}
.arrival__meta{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:baseline;margin-top:var(--s4)}
.scrollcue{position:absolute;left:var(--gutter);bottom:var(--s3);z-index:3;display:flex;align-items:center;gap:.7rem}
.scrollcue__line{width:2.5rem;height:1px;background:var(--line);position:relative;overflow:hidden}
.scrollcue__line::after{content:'';position:absolute;inset:0;background:var(--ember);
  animation:cue 2.4s var(--ease-cine) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ─── §3 THE OPENING: pinned scrubbed stage ──────────────── */
.opening{position:relative;background:var(--ink);overflow:hidden}
.opening__in{
  min-height:100svh;display:grid;place-items:center;
  /* top padding clears the fixed nav — the pinned section starts at viewport top */
  padding-block:calc(4.5rem + var(--s3)) var(--s4);
}
.stage{
  position:relative;
  /* sized from height so the box always matches the plate's aspect exactly */
  width:min(30rem,78vw,calc(62svh * 0.668));
  aspect-ratio:731/1094;
  margin-inline:auto;
}
/* the light this object stands in */
.stage::before{
  content:'';position:absolute;inset:-30% -45%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 44% at 50% 44%,
    rgba(216,161,94,calc(.22 * var(--pool,1))),
    rgba(216,161,94,calc(.06 * var(--pool,1))) 46%,transparent 74%);
}
/* contact shadow — the cut-out would otherwise float */
.stage__shadow{
  position:absolute;left:2%;right:2%;bottom:-3%;height:8%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent 78%);
  opacity:calc(.5 + .5 * var(--pool,1));
}
.stage__plate{position:absolute;inset:0;z-index:1;filter:brightness(1)}
.stage__plate img{width:100%;height:100%;object-fit:contain;object-position:center}
/* interior spill, centred on the cabinet cavity */
.stage__glow{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  mix-blend-mode:screen;
  background:radial-gradient(24% 28% at 32% 50%,rgba(224,163,86,.9),transparent 72%);
}
.opening__caption{margin-top:var(--s4);text-align:center;max-width:34rem;margin-inline:auto}
.opening__caption .word{display:inline-block}
.opening__spec{
  display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap;
  margin-top:var(--s3);
}
.opening__eyebrow{text-align:center;margin-bottom:var(--s3)}

@media (max-width:820px){
  /* the whole beat — object, caption and spec — has to fit inside one pinned screen */
  .stage{width:min(78vw,calc(50svh * 0.668))}
  .opening__in{padding-block:calc(4.5rem + var(--s2)) var(--s3);min-height:100svh}
  .opening__eyebrow{margin-bottom:var(--s2)}
  .opening__caption{margin-top:var(--s3);font-size:1.35rem}
  .opening__spec{gap:.4rem 1.1rem;margin-top:var(--s2)}
  .opening__spec span{font-size:.6rem;letter-spacing:.16em}
}

/* ─── §4 off-grid gallery ────────────────────────────────── */
.offgrid{display:grid;gap:var(--s4) var(--s3);grid-template-columns:repeat(12,1fr);align-items:end}
.offgrid figure{margin:0;position:relative}
.offgrid img{width:100%;height:100%;object-fit:cover;background:var(--ink-2)}
.offgrid figcaption{margin-top:var(--s2);display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline}
.offgrid .name{font-family:var(--display);font-size:1.35rem;line-height:1.2}
.g-a{grid-column:1/6;aspect-ratio:3/4}
.g-b{grid-column:7/13;aspect-ratio:4/5;margin-bottom:var(--s6)}
.g-c{grid-column:2/7;aspect-ratio:1/1;margin-top:var(--s4)}
.g-d{grid-column:8/13;aspect-ratio:3/4}
@media (max-width:820px){
  .offgrid{grid-template-columns:repeat(6,1fr)}
  .g-a,.g-b,.g-c,.g-d{grid-column:1/7;margin:0;aspect-ratio:4/3}
}

/* ─── §5 iris pair (real installed work) ─────────────────── */
.iris{display:grid;grid-template-columns:6fr 4fr;gap:var(--s3);align-items:stretch}
.iris__shot{position:relative;overflow:hidden;clip-path:inset(0 0 0 0);min-height:60svh}
.iris__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.iris__aside{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s3);padding-bottom:var(--s2)}
.iris--flip{margin-top:var(--s3);grid-template-columns:4fr 6fr}
.iris__shot--short{min-height:44svh}
@media (max-width:820px){
  .iris,.iris--flip{grid-template-columns:1fr}
  .iris__shot,.iris__shot--short{min-height:42svh}
  /* the copy column reads first on a phone, whatever the desktop order */
  .iris--flip .iris__aside{order:2}
  .iris--flip .iris__shot{order:1}
}

/* ─── products: the archive wall ─────────────────────────── */
.ledger{border-top:1px solid var(--line)}
.rec{
  display:grid;grid-template-columns:5.5rem 1fr 8rem;gap:var(--s3);align-items:center;
  padding-block:var(--s3);border-bottom:1px solid var(--line);
  transition:background var(--dur-fast) linear;position:relative;
}
.rec[hidden]{display:none}
.rec:hover,.rec:focus-within{background:linear-gradient(90deg,rgba(161,98,7,.09),transparent 65%)}
.rec__n{font-family:var(--display);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;
  color:var(--ink-3);transition:color var(--dur-fast) var(--ease-cine)}
.rec:hover .rec__n,.rec:focus-within .rec__n{color:var(--oak)}
.rec__body{display:block;min-width:0}
.rec__name{display:block;font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.85rem);line-height:1.15}
.rec__note{display:block;color:var(--bone-dim);font-size:.8125rem;margin-top:.2rem}
.rec__thumb{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ink-2)}
.rec__go{justify-self:end;color:var(--bone-dim);transition:color var(--dur-fast) var(--ease-cine)}
.rec:hover .rec__go,.rec:focus-within .rec__go{color:var(--ember)}
/* pinned preview, desktop only */
.preview{
  position:sticky;top:22vh;height:56vh;display:none;
  border:1px solid var(--line);background:var(--ink-2);overflow:hidden;
}
.preview img{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity var(--dur-mid) var(--ease-cine)}
.preview img.is-live{opacity:1}
.ledger-layout{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width:1024px){
  .ledger-layout{grid-template-columns:1fr 22rem;align-items:start}
  .preview{display:block}
  .rec{grid-template-columns:6rem 1fr 7rem}
}
@media (max-width:600px){
  .rec{grid-template-columns:3.25rem 1fr;grid-template-areas:'n name' 'thumb thumb';gap:var(--s2) var(--s2)}
  .rec__n{grid-area:n}
  .rec__body{grid-area:name}
  .rec__thumb{grid-area:thumb;aspect-ratio:16/9;margin-top:var(--s1)}
  .rec__go{display:none}
}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  min-height:44px;padding:.7rem 1.15rem;background:transparent;border:1px solid var(--line);
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);
  transition:all var(--dur-fast) var(--ease-cine);
}
.chip:hover{color:var(--bone);border-color:var(--bone-dim)}
.chip[aria-pressed=true]{background:var(--ember);border-color:var(--ember);color:var(--ink)}

/* photograph band — real workshop shots, deliberately uneven widths */
.band{
  display:grid;gap:var(--s2);
  grid-template-columns:1.3fr 1fr 1.15fr .85fr;align-items:end;
}
.band figure{margin:0}
.band img{width:100%;object-fit:cover;background:var(--ink-2)}
.band figure:nth-child(1) img{aspect-ratio:3/4}
.band figure:nth-child(2) img{aspect-ratio:4/5;margin-bottom:var(--s4)}
.band figure:nth-child(3) img{aspect-ratio:1/1}
.band figure:nth-child(4) img{aspect-ratio:3/4;margin-bottom:var(--s3)}
.band figcaption{margin-top:.6rem}
@media (max-width:820px){
  .band{grid-template-columns:1fr 1fr}
  .band img,.band figure:nth-child(2) img,.band figure:nth-child(4) img{aspect-ratio:4/5;margin-bottom:0}
}

/* about: the corridor ─────────────────────────────────── */
.corridor{position:fixed;inset:0;z-index:-2;overflow:hidden}
.corridor img{width:100%;height:100%;object-fit:cover;opacity:.3;transform-origin:52% 46%}
.corridor::after{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 60% at 52% 44%,transparent,rgba(12,10,9,.9) 78%),
             linear-gradient(to bottom,rgba(12,10,9,.7),rgba(12,10,9,.2) 40%,rgba(12,10,9,.92))}
.spine{position:fixed;left:50%;top:0;bottom:0;width:1px;background:var(--line);opacity:.5;z-index:-1}
@media (max-width:820px){.spine{display:none}}
.beat{
  position:relative;min-height:78svh;padding-block:var(--s6);
  display:grid;grid-template-areas:'stack';align-content:center;justify-items:start;
}
.beat__year{
  grid-area:stack;align-self:center;justify-self:start;
  font-family:var(--display);font-size:clamp(6rem,18vw,15rem);line-height:.8;font-weight:300;
  color:var(--ink-3);z-index:0;letter-spacing:-.02em;margin:0;
}
.beat__body{grid-area:stack;align-self:center;z-index:1;max-width:38ch;margin:0}
.beat:nth-child(even){justify-items:end;text-align:right}
.beat:nth-child(even) .beat__year{justify-self:end}
.beat:nth-child(even) .beat__body{text-align:right}
@media (max-width:820px){
  .beat,.beat:nth-child(even){justify-items:start;text-align:left}
  .beat:nth-child(even) .beat__year{justify-self:start}
  .beat:nth-child(even) .beat__body{text-align:left}
}

.bench{display:grid;gap:0;border-top:1px solid var(--line)}
.bench__step{display:grid;grid-template-columns:4rem 1fr;gap:var(--s3);
  padding-block:var(--s3);border-bottom:1px solid var(--line)}
.bench__step h3{font-family:var(--display);font-weight:400;font-size:1.3rem;margin:0 0 .35rem}
.bench__step p{margin:0;color:var(--bone-dim);font-size:.9375rem;max-width:52ch}

/* ─── contact: the threshold ─────────────────────────────── */
.threshold{position:relative;min-height:100svh;display:grid;align-content:center}
.threshold::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(
    calc(46% * var(--pool,1)) calc(52% * var(--pool,1)) at 38% 52%,
    rgba(216,161,94,.17),rgba(216,161,94,.05) 45%,transparent 72%);
}
.form{position:relative;z-index:1;max-width:34rem;display:grid;gap:var(--s3)}
.field{display:grid;gap:.4rem}
.field label{font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--bone);font:inherit;padding:.7rem 0;min-height:44px;
  transition:border-color var(--dur-fast) var(--ease-cine);
}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-bottom-color:var(--ember)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
.field select option{background:var(--ink-2);color:var(--bone)}
.field .err{font-size:.8125rem;color:var(--ember);min-height:1.2em}
.field.is-bad input,.field.is-bad textarea{border-bottom-color:var(--ember)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:600px){.row2{grid-template-columns:1fr}}
.reach{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media (max-width:820px){.reach{grid-template-columns:1fr}}
.reach h3{font-family:var(--display);font-weight:400;font-size:1.4rem;margin:0 0 .4rem}
.reach a{display:inline-flex;align-items:center;min-height:44px;color:var(--bone);border-bottom:1px solid var(--line);transition:border-color var(--dur-fast) var(--ease-cine)}
.reach a:hover{border-bottom-color:var(--ember);color:var(--ember)}

.mapblock{position:relative;overflow:hidden;min-height:52svh;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--ink-2);clip-path:inset(0 0 0 0);text-align:center}
.mapblock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:grayscale(.4)}
.mapblock > div{position:relative;z-index:1;padding:var(--s4)}

/* ─── footer ─────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:var(--s5) var(--s4);position:relative;z-index:1;background:var(--ink)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s4)}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr;gap:var(--s4)}}
.foot h4{font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);margin:0 0 var(--s2)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.foot li a{display:inline-flex;align-items:center;min-height:44px;color:var(--bone-dim);
  transition:color var(--dur-fast) var(--ease-cine);font-size:.9375rem}
.foot li a:hover{color:var(--ember)}
.foot__base{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line)}

/* ─── animation start-states, applied by JS only ─────────── */
/* Nothing is hidden by CSS. If JS or the CDN fails, the page is complete. */
.js-ready [data-anim]{will-change:transform,opacity}

/* ─── reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .scrollcue__line::after{display:none}
}