/* ==========================================================================
   Ruble Weddings — styles.css
   Light & editorial. Cormorant Garamond + Jost. Gentle motion, reduced-motion aware.
   ========================================================================== */

:root{
  --paper:#FAF7F2;
  --cream:#F1EADF;
  --blush:#EADDD2;
  --ink:#221F1A;
  --ink-soft:#5A524A;
  --line:rgba(34,31,26,0.14);
  --accent:#9C8567;
  --film-bg:#17140F;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:"Jost",sans-serif;
  color:var(--ink);
  background:var(--paper);
  transition:background-color 1.1s ease;
  overflow-x:clip;
  line-height:1.75;
  font-weight:300;
  letter-spacing:.01em;
}
h1,h2,h3,.serif{font-family:"Cormorant Garamond",serif;font-weight:400;letter-spacing:.005em}

/* ---------- accessibility helpers ---------- */
.skip-link{
  position:absolute;left:.6rem;top:.6rem;z-index:200;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  transform:translateY(-250%);transition:transform .25s var(--ease);
}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- shared label / type ---------- */
.label{
  font-family:"Jost",sans-serif;
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:.66rem;
  color:var(--accent);
  font-weight:400;
}
.rule{width:54px;height:1px;background:var(--accent);opacity:.6;margin:1.4rem 0}
.center .rule{margin-left:auto;margin-right:auto}

/* ---------- top progress + nav ---------- */
#progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:var(--accent);z-index:120;transition:width .1s linear;
}
nav{
  position:fixed;top:0;left:0;width:100%;z-index:110;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem clamp(1.2rem,5vw,3.5rem);
  transition:background-color .6s ease,padding .6s ease,box-shadow .6s ease,transform .6s var(--ease);
  transform:translateY(-110%);
}
nav.show{transform:translateY(0)}
nav.solid{background:rgba(250,247,242,.9);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding-top:1rem;padding-bottom:1rem}
.brand{font-family:"Cormorant Garamond",serif;font-size:1.35rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{color:var(--ink);text-decoration:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;position:relative;padding-bottom:3px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .4s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{border:1px solid var(--ink);padding:.6rem 1.15rem !important}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--ink);color:var(--paper)}
@media(max-width:820px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- hero (full-screen film reel) ---------- */
.hero{position:relative;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;will-change:opacity,transform;animation:heroCycle 40s infinite;
}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:10s}
.hero-slide:nth-child(3){animation-delay:20s}
.hero-slide:nth-child(4){animation-delay:30s}
@keyframes heroCycle{
  0%{opacity:0;transform:scale(1.04)}
  4%{opacity:1}
  22%{opacity:1}
  27%{opacity:0;transform:scale(1.13)}
  100%{opacity:0;transform:scale(1.04)}
}
.hero::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(20,17,13,.42) 0%,rgba(20,17,13,.15) 35%,rgba(20,17,13,.5) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 220px 40px rgba(20,17,13,.55)}
.hero-inner{position:relative;z-index:3;text-align:center;color:#fff;padding:0 1.5rem;max-width:900px}
.hero-inner .label{color:rgba(255,255,255,.85)}
.hero h1{font-size:clamp(2.9rem,8vw,6.4rem);line-height:1.02;font-weight:300;margin:.7rem 0 .2rem;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero p{font-size:clamp(1rem,1.5vw,1.18rem);max-width:620px;margin:1.4rem auto 2.4rem;color:rgba(255,255,255,.92);font-weight:300}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.24em;padding:1rem 1.9rem;border:1px solid currentColor;background:transparent;color:#fff;cursor:pointer;text-decoration:none;transition:all .45s var(--ease);font-family:"Jost",sans-serif;font-weight:400}
.btn:hover{background:#fff;color:var(--ink)}
.btn-solid{background:#fff;color:var(--ink)}
.btn-solid:hover{background:transparent;color:#fff}
.btn-ink{color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.55;cursor:default;pointer-events:none}
.scroll-cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;color:#fff;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.6rem;opacity:.85}
.scroll-cue .line{width:1px;height:46px;background:rgba(255,255,255,.7);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top;opacity:.3}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);transform-origin:bottom;opacity:.3}}

/* ---------- generic section ---------- */
section{position:relative}
.wrap{max-width:1200px;margin:0 auto;padding:clamp(5rem,12vh,9rem) clamp(1.4rem,5vw,3.5rem)}
.narrow{max-width:760px}
.center{text-align:center}

/* ---------- reveal animations ---------- */
.reveal{opacity:0;transform:translateY(42px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}
.reveal.d4{transition-delay:.48s}
/* image "morph" reveal: clip open + settle */
.morph{clip-path:inset(12% 12% 12% 12%);transform:scale(1.12);opacity:0;transition:clip-path 1.5s var(--ease),transform 1.7s var(--ease),opacity 1s ease}
.morph.in{clip-path:inset(0 0 0 0);transform:scale(1);opacity:1}
img{display:block;max-width:100%}

/* ---------- intro ---------- */
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.intro-grid .frame{aspect-ratio:4/5;overflow:hidden}
.intro-grid .frame img{width:100%;height:100%;object-fit:cover}
.intro-copy h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;margin-bottom:.4rem}
.intro-copy p{color:var(--ink-soft);max-width:46ch}
@media(max-width:800px){.intro-grid{grid-template-columns:1fr}.intro-grid .frame{aspect-ratio:3/2}}

/* ---------- the vow ---------- */
.vow{text-align:center}
.vow h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:.3rem}
.vow blockquote{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.5;color:var(--ink);max-width:820px;margin:1.6rem auto 2.4rem}

/* ---------- parallax gallery band ---------- */
.gallery-band{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.35rem,.8vw,.65rem);padding:2rem clamp(1.4rem,5vw,3.5rem) 0}
.gallery-band figure{overflow:hidden}
.gallery-band figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.gallery-band figure:hover img{transform:scale(1.05)}
/* Compact tile types: rows always sum to 12 columns and align flush.
   t3 = quarter-width portrait · t4 = third-width square · tL = half-width landscape
   tp = quarter-width tall portrait (pairs with tL for equal row height) · tw = full-width band */
.t3{grid-column:span 3;aspect-ratio:4/5}
.t4{grid-column:span 4;aspect-ratio:1/1}
.tL{grid-column:span 6;aspect-ratio:4/3}
.tp{grid-column:span 3;aspect-ratio:2/3}
.tw{grid-column:span 12;aspect-ratio:21/9}
@media(max-width:800px){.gallery-band{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-band figure{grid-column:span 1}.tw,.tL{grid-column:span 2;aspect-ratio:16/9}}

/* ---------- full-bleed "day worth remembering" ---------- */
.feature{height:100vh;min-height:620px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.feature .bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center;will-change:transform}
.feature::after{content:"";position:absolute;inset:0;background:rgba(20,17,13,.34)}
.feature .fcopy{position:relative;z-index:2;text-align:center;color:#fff;padding:0 1.5rem}
.feature .fcopy h2{font-size:clamp(2.6rem,7vw,5.5rem);font-weight:300;line-height:1.02;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.feature .fcopy .label{color:rgba(255,255,255,.85)}

/* ---------- services ---------- */
.services-head{text-align:center;margin-bottom:3.5rem}
.services-head h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.svc{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(2rem,5vh,4rem) 0;border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr)}
.svc.flip .svc-img{order:2}
.svc-img{aspect-ratio:5/4;overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.06)}
.svc-copy .num{font-size:.7rem;letter-spacing:.3em;color:var(--accent)}
.svc-copy h3{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:.5rem 0 .3rem}
.svc-copy .tag{font-style:italic;font-family:"Cormorant Garamond",serif;font-size:1.15rem;color:var(--ink);margin-bottom:.7rem}
.svc-copy p{color:var(--ink-soft);max-width:52ch}
@media(max-width:800px){.svc,.svc.flip{grid-template-columns:1fr}.svc.flip .svc-img{order:0}}

/* ---------- film theater (the dark, cinematic moment) ---------- */
.theater{background:var(--film-bg);color:#F4EEE4}
.theater .label{color:#caa87f}
.theater h2{color:#F7F1E7;font-size:clamp(2.4rem,5vw,4rem)}
.theater .lede{color:rgba(247,241,231,.72);font-style:italic;font-family:"Cormorant Garamond",serif;font-size:clamp(1.2rem,2.4vw,1.7rem);max-width:720px;margin:1.2rem auto 3rem}
.film-main{display:block;width:100%;border:none;padding:0;text-align:left;position:relative;aspect-ratio:16/9;overflow:hidden;margin-bottom:1.2rem;cursor:pointer;background:#000}
.film-main img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:transform 2s var(--ease),opacity .6s ease}
.film-main:hover img{transform:scale(1.04);opacity:1}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.play>span{width:82px;height:82px;border:1px solid rgba(255,255,255,.85);border-radius:50%;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);background:rgba(0,0,0,.15);transition:all .5s var(--ease)}
.film-main:hover .play>span{background:rgba(255,255,255,.95);border-color:#fff}
.play svg{fill:#fff;margin-left:4px;transition:fill .5s var(--ease)}
.film-main:hover .play svg{fill:var(--ink)}
.film-cap{position:absolute;left:0;bottom:0;z-index:2;padding:1.4rem 1.6rem;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
.film-cap .place{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:#e9d9c3}
.film-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.2rem}
.film-strip figure{aspect-ratio:16/9;overflow:hidden;position:relative}
.film-strip img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .5s ease,transform 1.4s var(--ease)}
.film-strip figure:hover img{opacity:1;transform:scale(1.05)}
.theater .two-films{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;margin-top:2.6rem;text-align:left}
.theater .two-films p{color:rgba(247,241,231,.66);font-size:.95rem}
.theater .two-films h4{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:1.4rem;color:#F7F1E7;margin-bottom:.4rem}
@media(max-width:800px){.theater .two-films{grid-template-columns:minmax(0,1fr)}.film-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- testimonial ---------- */
.testi{text-align:center}
.testi .qmark{font-family:"Cormorant Garamond",serif;font-size:5rem;line-height:.4;color:var(--accent);opacity:.5}
.testi blockquote{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.55;max-width:820px;margin:1.5rem auto 1.5rem}
.testi .who{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.testi .avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:2rem auto 0}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:none;text-align:left;cursor:pointer;font-family:"Cormorant Garamond",serif;font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--ink);padding:1.4rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-q .pm{font-family:"Jost",sans-serif;font-size:1.4rem;color:var(--accent);transition:transform .4s var(--ease)}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease);color:var(--ink-soft)}
.faq-a p{padding:0 0 1.4rem}

/* ---------- contact ---------- */
.contact{background:var(--cream)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start;min-width:0}
.contact h2{font-size:clamp(2.4rem,5vw,4rem);line-height:1.05}
.contact .sub{color:var(--ink-soft);max-width:44ch;margin-top:1.2rem}
.contact .meta{margin-top:2.2rem;display:flex;flex-direction:column;gap:.5rem}
.contact .meta a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;width:fit-content}
form{display:grid;gap:1.2rem;min-width:0}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;min-width:0}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field label{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.field label .req{color:#9C8567;font-size:.8rem;line-height:1;margin-left:2px}
.field label .opt{text-transform:none;letter-spacing:.06em;font-style:italic;color:#a89d8e;margin-left:4px}
.form-key{font-size:.68rem;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 1.1rem}
.form-key .req{color:#9C8567}
.field input,.field select,.field textarea{
  width:100%;max-width:100%;
  background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:.7rem 0;font-family:"Jost",sans-serif;font-size:1rem;color:var(--ink);font-weight:300;transition:border-color .4s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:90px}
.field.invalid input,.field.invalid textarea{border-color:#B04A3F}
form .btn{justify-content:center;margin-top:.6rem}
.form-note{font-size:.82rem;color:var(--ink-soft);text-align:center;min-height:1.2rem;transition:color .3s ease}
.form-note.is-success{color:#4B7A52}
.form-note.is-error{color:#B04A3F}
.form-note a{color:inherit}

/* Cloudflare Turnstile mount (spacing only; widget injected by JS when configured) */
.cf-turnstile-mount:not(:empty){margin:.2rem 0}

/* Honeypot: kept in the DOM for bots, hidden from people & assistive tech.
   Uses the overflow-safe "visually hidden" pattern — NOT left:-9999px, which
   on iOS Safari / in-app browsers widens the layout viewport and causes the
   sideways-scroll + cramped 2-column form some visitors were seeing. */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* contact: single column by DEFAULT (mobile-first) so it can never fall back to a
   cramped 2-column layout if iOS mis-measures the viewport width. Two columns only
   on genuine desktop widths (>=1000px), safely above any inflated mobile viewport. */
@media(min-width:1000px){.contact-grid{grid-template-columns:1fr 1fr}.row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#EDE6DA;text-align:center;padding:4rem 1.5rem 2.5rem}
footer .fbrand{font-family:"Cormorant Garamond",serif;font-size:1.6rem;letter-spacing:.24em;text-transform:uppercase}
footer .fsoc{margin:1.6rem 0;display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap}
footer a{color:#EDE6DA;text-decoration:none;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
footer a:hover{opacity:1;color:#fff}
footer .fmail{display:inline-block;border-bottom:1px solid rgba(237,230,218,.3);padding-bottom:2px}
footer .fine{font-size:.68rem;color:rgba(237,230,218,.5);margin-top:1.6rem;letter-spacing:.1em}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
  .reveal,.morph{opacity:1 !important;transform:none !important;clip-path:none !important}
  html{scroll-behavior:auto}
}