/* ============================================================
   NOIR — bespoke atelier. Shared design system.
   Private club at night: ink-black, walnut warmth, one gold line.
   ============================================================ */

:root{
  --ink:#0E0D0B;        /* near-black primary            */
  --char:#161411;       /* charcoal panel                */
  --char-2:#211E19;     /* raised charcoal               */
  --line:#2A2621;       /* hairline on dark              */
  --bone:#EDE7DC;       /* primary text                  */
  --bone-2:#B7AE9F;     /* secondary text                */
  --bone-dim:#8A8377;   /* tertiary / meta               */
  --gold:#C9A96A;       /* champagne accent              */
  --gold-2:#E4CB99;     /* gold highlight                */
  --gold-dim:rgba(201,169,106,.28);

  --ff-display:"Cormorant Garamond", Georgia, serif;
  --ff-sans:"Jost", "Helvetica Neue", Arial, sans-serif;

  --ease:cubic-bezier(.19,1,.22,1);      /* long ease-out */
  --slow:1.1s;
  --wrap:1280px;
  --pad:clamp(1.25rem,5vw,5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ff-sans);
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* subtle film grain over everything */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:400;margin:0;line-height:1.04;letter-spacing:-.005em}
.display{font-size:clamp(2.8rem,8vw,7rem);font-weight:300}
.h-xl{font-size:clamp(2.2rem,5.2vw,4.4rem);font-weight:300}
.h-lg{font-size:clamp(1.8rem,3.6vw,3rem)}
.h-md{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.italic{font-style:italic;color:var(--gold-2)}

.eyebrow{
  font-family:var(--ff-sans);font-weight:400;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.42em;color:var(--gold);
  display:inline-flex;align-items:center;gap:.9rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}
.eyebrow.center::after{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}
.eyebrow.center{justify-content:center}

.lead{font-family:var(--ff-display);font-weight:300;font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.45;color:var(--bone)}
.muted{color:var(--bone-2)}
.meta{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-dim)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(5rem,12vh,10rem)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Buttons ---------- */
.btn{
  --bg:transparent;--fg:var(--bone);--bd:var(--gold);
  position:relative;display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--ff-sans);font-weight:400;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.26em;color:var(--fg);
  padding:1.05rem 2.1rem;border:1px solid var(--bd);background:var(--bg);
  cursor:pointer;overflow:hidden;transition:color .6s var(--ease),border-color .6s var(--ease)
}
.btn>*{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)
}
.btn:hover{color:var(--ink);border-color:var(--gold)}
.btn:hover::before{transform:scaleX(1)}
.btn--solid{--bg:var(--gold);--fg:var(--ink)}
.btn--solid::before{background:var(--ink)}
.btn--solid:hover{color:var(--bone)}
.btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

.txtlink{position:relative;color:var(--bone);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;padding-bottom:.35rem}
.txtlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.txtlink:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem var(--pad);
  transition:background .6s var(--ease),padding .6s var(--ease),border-color .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(14,13,11,.82);backdrop-filter:blur(14px);padding-block:1rem;border-bottom-color:var(--line)}
.nav__brand{font-family:var(--ff-display);font-size:1.5rem;letter-spacing:.32em;color:var(--bone);padding-left:.32em}
.nav__brand b{font-weight:500}
.nav__links{display:flex;gap:2.4rem;align-items:center}
.nav__links a{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-2);transition:color .4s var(--ease)}
.nav__links a:hover,.nav__links a.active{color:var(--bone)}
.nav__cta{margin-left:.6rem}
.nav__toggle{display:none;background:none;border:0;color:var(--bone);cursor:pointer;flex-direction:column;gap:6px;padding:.5rem;margin:-.5rem -.4rem -.5rem 0;position:relative;z-index:1001}
.nav__toggle span{width:28px;height:2px;background:var(--bone);border-radius:2px;transition:.4s var(--ease)}

/* ---------- Custom cursor ---------- */
.cursor{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--gold);
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s}
.cursor--ring{width:34px;height:34px;background:transparent;border:1px solid var(--gold);transition:.45s var(--ease)}
.cursor--hover{width:54px;height:54px;background:rgba(201,169,106,.10);border:1px solid var(--gold)}
@media (hover:none){.cursor{display:none}}

/* ---------- Preloader ---------- */
.preload{position:fixed;inset:0;z-index:10000;background:var(--ink);display:grid;place-items:center;
  transition:opacity 1s var(--ease),visibility 1s var(--ease)}
.preload.done{opacity:0;visibility:hidden}
.preload svg{width:120px;height:auto;overflow:visible}
.preload path,.preload line{stroke:var(--gold);stroke-width:1;fill:none;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  animation:draw 1.4s var(--ease) forwards}
.preload .mono-fill{opacity:0;animation:fadein .6s ease .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}

/* ---------- Page-transition curtain ---------- */
.curtain{
  position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:grid;place-items:center;
  transition:opacity .85s var(--ease),visibility .85s var(--ease);
}
.curtain--hidden{opacity:0;visibility:hidden}
.curtain__in{
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease) .08s,transform .9s var(--ease) .08s;
}
.curtain:not(.curtain--hidden) .curtain__in{opacity:1;transform:none}
.curtain__fig{
  width:auto;height:min(42vh,300px);
  filter:drop-shadow(0 0 50px rgba(201,169,106,.20));
}
.curtain__mark{
  font-family:var(--ff-display);font-size:1.05rem;letter-spacing:.5em;
  color:var(--gold);padding-left:.5em;position:relative;
}
.curtain__mark::after{
  content:"";position:absolute;left:50%;bottom:-14px;width:0;height:1px;background:var(--gold-dim);
  transform:translateX(-50%);
  transition:width .9s var(--ease) .3s;
}
.curtain:not(.curtain--hidden) .curtain__mark::after{width:64px}
@media (prefers-reduced-motion:reduce){
  .curtain,.curtain__in,.curtain__mark::after{transition:none}
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.12s}
.reveal[data-d="2"]{transition-delay:.24s}
.reveal[data-d="3"]{transition-delay:.36s}

/* (1) cinematic focus-pull — major headlines resolve from a soft blur, like a lens finding focus */
.reveal.display,.reveal.h-xl,.reveal.h-lg{filter:blur(4px)}
.reveal.display.in,.reveal.h-xl.in,.reveal.h-lg.in{filter:blur(0)}

/* (2) depth-settle — feature imagery eases down from a slight scale as it reveals */
.split__media--tall.reveal img,.act.reveal .act__media img,.pact.reveal .pact__media img{transform:scale(1.07)}
.split__media--tall.reveal.in img,.act.reveal.in .act__media img,.pact.reveal.in .pact__media img{transform:scale(1)}

/* (3) eyebrow rule draws itself in when its line reveals */
.eyebrow.reveal::before,.eyebrow.reveal.center::after{transform:scaleX(0);transition:transform 1s var(--ease) .15s}
.eyebrow.reveal.in::before,.eyebrow.reveal.in.center::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .reveal.display,.reveal.h-xl,.reveal.h-lg{filter:none}
  .split__media--tall.reveal img,.act.reveal .act__media img,.pact.reveal .pact__media img{transform:none}
  .eyebrow.reveal::before,.eyebrow.reveal.center::after{transform:scaleX(1)}
}

/* (4) scroll-progress — a single fine gold thread across the very top */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:1001;
  background:linear-gradient(90deg,rgba(201,169,106,0),var(--gold));
  pointer-events:none;transition:width .12s linear}
@media (prefers-reduced-motion:reduce){.progress{display:none}}

/* (5) parallax — decorative background imagery drifts a touch slower than the page */
.parallax{will-change:transform}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center;
  animation:kenburns 22s var(--ease) infinite alternate}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.14) translateX(-1.5%)}}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,13,11,.94) 0%,rgba(14,13,11,.6) 42%,rgba(14,13,11,.2) 100%),
             linear-gradient(0deg,rgba(14,13,11,.9) 0%,rgba(14,13,11,0) 55%)}
.hero__inner{position:relative;z-index:1;width:100%;padding-bottom:clamp(3.5rem,9vh,7rem)}
.hero__title{margin:1.6rem 0 1.8rem;max-width:16ch}
.hero__sub{max-width:34ch;color:var(--bone-2);margin-bottom:2.6rem}
.hero__cta{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.scrollcue{position:absolute;right:var(--pad);bottom:clamp(3.5rem,9vh,7rem);z-index:1;
  writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--bone-dim);
  display:flex;align-items:center;gap:1rem}
.scrollcue::after{content:"";width:1px;height:60px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:720px){.scrollcue{display:none}}

/* ============================================================
   Shared content blocks
   ============================================================ */
/* two-column feature (image + text) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.split--wideL{grid-template-columns:1.15fr .85fr}
.split__media{position:relative;overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.split__media:hover img{transform:scale(1.05)}
.split__media--tall{aspect-ratio:4/5}
.figtag{position:absolute;left:1rem;bottom:1rem;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-2);background:rgba(14,13,11,.55);padding:.5rem .8rem;backdrop-filter:blur(4px)}
@media (max-width:860px){.split,.split--wideL{grid-template-columns:1fr;gap:2.2rem}}

/* ritual — three acts */
.ritual{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.act{position:relative;text-decoration:none;color:inherit;display:block}
.act__media{position:relative;aspect-ratio:3/4;overflow:hidden;margin-bottom:1.4rem}
.act__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) brightness(.92);transition:transform 1.4s var(--ease),filter 1s var(--ease)}
.act:hover .act__media img{transform:scale(1.06);filter:none}
.act__no{font-family:var(--ff-display);font-size:.9rem;color:var(--gold);letter-spacing:.2em}
.act__t{font-family:var(--ff-display);font-size:1.5rem;margin:.4rem 0 .6rem}
.act__d{color:var(--bone-2);font-size:.92rem}
@media (max-width:760px){.ritual{grid-template-columns:1fr;gap:2.5rem}}

/* atelier band */
.band{position:relative;background:var(--char);overflow:hidden}
.seal{width:118px;height:118px;border:1px solid var(--gold-dim);border-radius:50%;display:grid;place-items:center;text-align:center;
  font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);line-height:1.7;position:relative}
.seal::before{content:"";position:absolute;inset:8px;border:1px solid var(--gold-dim);border-radius:50%}

/* commissions horizontal scroll */
.commissions{overflow:hidden}
.hscroll{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--pad);padding-bottom:1.5rem;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{height:2px}
.hscroll::-webkit-scrollbar-thumb{background:var(--line)}
.card{position:relative;flex:0 0 clamp(260px,32vw,420px);scroll-snap-align:start}
.card__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,13,11,.85),transparent 60%)}
.card__body{position:absolute;left:1.3rem;right:1.3rem;bottom:1.3rem;z-index:1}
.card__occ{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.card__t{font-family:var(--ff-display);font-size:1.35rem;line-height:1.15}
.card__cloth{font-size:.78rem;color:var(--bone-2);margin-top:.35rem}

/* testimonial */
.quote{max-width:52rem;margin-inline:auto;text-align:center}
.quote__mark{font-family:var(--ff-display);font-size:5rem;color:var(--gold);line-height:.4;height:1.4rem;display:block}
.quote__t{font-family:var(--ff-display);font-weight:300;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.32;font-style:italic}
.quote__by{margin-top:2rem;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.quote__dots{display:flex;gap:.6rem;justify-content:center;margin-top:2.4rem}
.quote__dots button{width:7px;height:7px;border-radius:50%;border:1px solid var(--bone-dim);background:transparent;padding:0;cursor:pointer;transition:.4s}
.quote__dots button[aria-selected="true"]{background:var(--gold);border-color:var(--gold)}

/* CTA band */
.cta-band{position:relative;text-align:center;overflow:hidden}
.cta-band__bg{position:absolute;inset:0;z-index:0}
.cta-band__bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.cta-band__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(14,13,11,.5),var(--ink) 78%)}
.cta-band .wrap{position:relative;z-index:1}

/* ---------- Footer ---------- */
.footer{background:var(--ink);border-top:1px solid var(--line);padding-block:clamp(3.5rem,7vh,6rem) 2.5rem}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.footer__brand{font-family:var(--ff-display);font-size:1.8rem;letter-spacing:.3em;color:var(--bone);margin-bottom:1.2rem}
.footer h5{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 1.2rem;font-family:var(--ff-sans);font-weight:400}
.footer a,.footer p{color:var(--bone-2);font-size:.86rem;line-height:2}
.footer a:hover{color:var(--bone)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:.68rem;letter-spacing:.14em;color:var(--bone-dim)}
.footer__bottom a{font-size:.68rem;color:var(--bone-dim)}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr;gap:2rem}}

/* ============================================================
   Responsive nav
   ============================================================ */
@media (max-width:1024px){
  /* solid sticky header bar so it never overlaps content */
  .nav{background:rgba(14,13,11,.92);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);padding-block:1.05rem}
  .nav__toggle{display:flex}
  /* full-screen drawer: hidden via opacity+visibility (fails HIDDEN, never peeks) */
  .nav__links{
    position:fixed;inset:0;width:100%;height:100dvh;
    background:var(--ink);flex-direction:column;justify-content:center;align-items:center;
    gap:2.4rem;padding:2rem;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s var(--ease),visibility .4s var(--ease);
    z-index:998;
  }
  .nav__links.open{opacity:1;visibility:visible;pointer-events:auto}
  .nav__links{padding:2rem 1.25rem}
  .nav__links a{font-size:1.25rem}
  .nav__links .nav__cta{margin:.6rem 0 0;font-size:.72rem;letter-spacing:.16em;padding:1rem 1.5rem;max-width:90vw}
  .nav.menu-open .nav__toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav.menu-open .nav__toggle span:nth-child(2){opacity:0}
  .nav.menu-open .nav__toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ============================================================
   PAGE HEADERS (interior pages)
   ============================================================ */
.phead{position:relative;padding-top:clamp(8rem,18vh,12rem);padding-bottom:clamp(3rem,7vh,5rem)}
.phead__title{max-width:20ch;margin-top:1.4rem}
.phead__sub{max-width:46ch;margin-top:1.6rem;color:var(--bone-2)}

/* house codes grid (atelier) */
.codes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.code{background:var(--ink);padding:clamp(1.6rem,3vw,2.6rem)}
.code__no{font-family:var(--ff-display);color:var(--gold);font-size:1rem;letter-spacing:.2em}
.code__t{font-family:var(--ff-display);font-size:1.4rem;margin:.7rem 0 .6rem}
.code__d{color:var(--bone-2);font-size:.9rem}
@media (max-width:820px){.codes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.codes{grid-template-columns:1fr}}

/* process — five acts alternating */
.acts{display:flex;flex-direction:column;gap:clamp(4rem,9vh,7rem)}
.pact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.pact:nth-child(even) .pact__media{order:2}
.pact__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.pact__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.pact:hover .pact__media img{transform:scale(1.05)}
.pact__no{font-family:var(--ff-display);font-size:clamp(3rem,7vw,5.5rem);color:var(--line);line-height:1;font-weight:300}
.pact__t{margin:.4rem 0 1.2rem}
.pact__d{color:var(--bone-2);max-width:42ch}
@media (max-width:820px){.pact{grid-template-columns:1fr;gap:1.8rem}.pact:nth-child(even) .pact__media{order:0}}

/* commissions gallery */
.filters{
  position:sticky;top:calc(var(--nav-h,64px) - 1px);z-index:60;
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  background:var(--ink);padding:.85rem 0;margin-bottom:2.2rem;
}
@media (max-width:1024px){
  .filters{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin:0 calc(-1 * var(--pad)) 2rem;padding:.8rem var(--pad);
    border-bottom:1px solid var(--line);scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:0 0 auto;white-space:nowrap}
}
.filters button{background:transparent;border:1px solid var(--line);color:var(--bone-2);
  font-family:var(--ff-sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.7rem 1.3rem;cursor:pointer;transition:.4s var(--ease)}
.filters button[aria-pressed="true"],.filters button:hover{border-color:var(--gold);color:var(--bone)}
.gallery{columns:3;column-gap:1.2rem}
.gallery figure{margin:0 0 1.2rem;break-inside:avoid;position:relative;overflow:hidden}
.gallery img{
  width:100%;
  height:auto;
  transition:transform 1.4s var(--ease),filter 1s var(--ease);
  filter:brightness(.92)
}
.gallery figure:hover img{transform:scale(1.05);filter:none}
.gallery figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.gallery figure:hover figcaption{opacity:1;transform:none}
.gallery .g-occ{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.gallery .g-t{font-family:var(--ff-display);font-size:1.2rem}
@media (max-width:900px){.gallery{columns:2}}
@media (max-width:560px){.gallery{columns:1}}

/* ============================================================
   APPOINTMENT
   ============================================================ */
.apply{min-height:100svh;display:grid;grid-template-columns:0.9fr 1.1fr}
.apply__aside{position:relative;overflow:hidden}
.apply__aside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.apply__aside::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,13,11,.8),rgba(14,13,11,.35))}
.apply__aside-in{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:clamp(2.5rem,6vh,4rem)}
.apply__form{padding:clamp(6.5rem,12vh,9rem) var(--pad) clamp(3rem,6vh,5rem)}
.form{max-width:34rem}
.field{margin-bottom:1.8rem}
.field label{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:.7rem}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--bone);font-family:var(--ff-sans);font-weight:300;font-size:1rem;
  padding:.7rem 0;transition:border-color .5s var(--ease)}
.field textarea{resize:vertical;min-height:5.5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field select option{background:var(--char)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 14px) 1.35rem,calc(100% - 8px) 1.35rem;background-size:6px 6px;background-repeat:no-repeat}
.field2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media (max-width:520px){.field2{grid-template-columns:1fr}}
.reassure{font-size:.82rem;color:var(--bone-2);border-left:1px solid var(--gold);padding-left:1.1rem;margin:2.2rem 0}

/* Honeypot: visually hidden but present in the DOM, so simple bots that auto-fill still trip it. */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

.captcha-row{display:flex;align-items:center;gap:1rem;margin-bottom:.6rem}
.captcha-row img{border:1px solid var(--line);filter:brightness(.94)}
.form-error{display:none;color:#e2938a;font-size:.82rem;margin:-.8rem 0 1.4rem}
.form-error.show{display:block}
.confirm{display:none}
.form.sent .form__body{display:none}
.form.sent .confirm{display:block;animation:fadein .8s ease}
@media (max-width:860px){.apply{grid-template-columns:1fr}.apply__aside{min-height:40vh}}

/* journal */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.jcard{background:var(--char);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .5s var(--ease)}
.jcard:hover{border-color:var(--gold-dim)}
.jcard__media{aspect-ratio:3/2;overflow:hidden}
.jcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.jcard:hover .jcard__media img{transform:scale(1.05)}
.jcard__body{padding:1.6rem 1.6rem 1.9rem}
.jcard__cat{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.jcard__t{font-family:var(--ff-display);font-size:1.4rem;line-height:1.2;margin:.7rem 0 .8rem}
.jcard__x{color:var(--bone-2);font-size:.88rem}
@media (max-width:900px){.jgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.jgrid{grid-template-columns:1fr}}

/* harmonise a bright real photo into the dark palette */
.tone-noir{filter:brightness(.72) contrast(1.06) saturate(.82) sepia(.14)}
.card:hover .tone-noir,.gallery figure:hover .tone-noir{filter:brightness(.86) contrast(1.04) saturate(.9) sepia(.06)}

@media (max-width:600px){
  .eyebrow{letter-spacing:.26em;flex-wrap:wrap}
  .figtag{letter-spacing:.16em}
  .hero__title{font-size:clamp(2.6rem,13vw,3.4rem)}
}
/* ============================================================
   LIGHT THEME — the Weddings page. Bright, warm, magazine.
   ============================================================ */
body.theme-light{
  --ink:#F5EFE5;        /* page background (warm ivory) */
  --char:#ECE3D4;       /* warm panel                   */
  --char-2:#E4DAC8;
  --line:#E0D6C4;       /* hairline on light            */
  --bone:#2A241C;       /* primary text (espresso)      */
  --bone-2:#6E6656;     /* secondary text               */
  --bone-dim:#98907F;   /* tertiary / meta              */
  --gold:#A9812F;       /* deeper antique gold (AA on ivory) */
  --gold-2:#87671F;
  --gold-dim:rgba(169,129,47,.32);
  background:var(--ink);color:var(--bone);
}
body.theme-light::after{opacity:.028;mix-blend-mode:multiply}

/* nav on light */
.theme-light .nav__brand{color:var(--bone)}
.theme-light .nav__links a{color:var(--bone-2)}
.theme-light .nav__links a:hover,.theme-light .nav__links a.active{color:var(--bone)}
.theme-light .nav.solid{background:rgba(245,239,229,.86);border-bottom-color:var(--line)}
.theme-light .nav:not(.solid) .nav__links a{color:var(--bone)}
.theme-light .nav:not(.solid) .nav__cta{background:rgba(245,239,229,.42);backdrop-filter:blur(5px)}
.theme-light .nav__toggle span{background:var(--bone)}
@media (max-width:1024px){
  .theme-light .nav{background:rgba(245,239,229,.92);border-bottom-color:var(--line)}
  .theme-light .nav__links{background:var(--ink)}
  .theme-light .nav__links a,.theme-light .nav:not(.solid) .nav__links a{color:var(--bone-2)}
  .theme-light .nav__links a.active{color:var(--bone)}
  .theme-light .nav:not(.solid) .nav__cta{background:transparent}
}

/* buttons on light */
.theme-light .btn{color:var(--bone);border-color:var(--gold)}
.theme-light .btn::before{background:var(--gold)}
.theme-light .btn:hover{color:#20180A}
.theme-light .btn--solid{--bg:var(--gold);--fg:#20180A}
.theme-light .btn--solid::before{background:#20180A}
.theme-light .btn--solid:hover{color:var(--ink)}

/* hero scrim: soft light wash instead of dark */
.theme-light .hero__bg::after{
  background:linear-gradient(90deg,rgba(245,239,229,.92) 0%,rgba(245,239,229,.5) 42%,rgba(245,239,229,.05) 100%),
             linear-gradient(0deg,rgba(245,239,229,.85) 0%,rgba(245,239,229,0) 50%);
}
.theme-light .figtag{background:rgba(245,239,229,.66);color:var(--bone-2)}
.theme-light .split__media--tall img,.theme-light .gallery img,.theme-light .act__media img{filter:none}
.theme-light .card__media::after{background:linear-gradient(0deg,rgba(30,24,16,.7),transparent 55%)}

/* offerings (wedding) reuse .ritual/.act but on light photos keep captions dark */
.offer__t{font-family:var(--ff-display);font-size:1.55rem;margin:.5rem 0 .6rem}

/* wedding process — bright numbered list */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--ink);padding:clamp(1.6rem,3vw,2.4rem);display:flex;gap:1.3rem;align-items:flex-start}
.step__no{font-family:var(--ff-display);font-size:2.1rem;line-height:1;color:var(--gold);min-width:2ch}
.step__t{font-family:var(--ff-display);font-size:1.35rem;margin:.1rem 0 .5rem}
.step__d{color:var(--bone-2);font-size:.92rem}
@media (max-width:640px){.steps{grid-template-columns:1fr}}

.center{text-align:center}
.mt-s{margin-top:1.2rem}.mt-m{margin-top:2rem}.mt-l{margin-top:3rem}
.maxw{max-width:60ch}