/* ============================================================
   Georges & Josiane · 22.08.2026 — Noir, alive edition
   Type hierarchy:
     Display  — Pinyon Script (names, section titles)
     Serif    — Bodoni Moda  (quotes, dates, numbers)
     Sans     — Jost         (labels, buttons, info)
   Spacing scale: .5 / 1 / 1.5 / 2.5 / 4 rem
   Text block: centered column, lower third of viewport
   ============================================================ */

@font-face{
  font-family:'Pinyon Script';
  src:url('../fonts/PinyonScript-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --black:#0A0A0A;
  --paper:#EDEAE4;
  --silver:#C9C9C4;
  --fog:rgba(237,234,228,.62);
  --line:rgba(237,234,228,.4);
  --script:'Pinyon Script',cursive;
  --serif:'Bodoni Moda',serif;
  --sans:'Jost',sans-serif;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem;
  --col:34rem;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:300;
  background:var(--black);color:var(--paper);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Film grain ---------- */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Cover (page 1, static) ---------- */
.cover{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:flex-end;justify-content:center;text-align:center;
  transition:opacity 1.2s ease,visibility 1.2s;
}
.cover.is-open{opacity:0;visibility:hidden}
.cover-photo{
  position:absolute;inset:0;
  background-size:cover;background-position:center 20%;
}
.cover-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.4) 0%,rgba(10,10,10,.12) 38%,rgba(10,10,10,.9) 100%);
}
.cover-inner{
  position:relative;
  padding:0 var(--s3) calc(var(--s4) + env(safe-area-inset-bottom));
  max-width:var(--col);width:100%;
}
.logo-slot{margin-bottom:var(--s2)}
.logo-img{
  width:clamp(110px,30vw,170px);height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.6));
}
.cover-guest{
  font-family:var(--script);font-weight:400;
  font-size:clamp(1.7rem,7vw,2.4rem);line-height:1.2;
  margin-bottom:var(--s2);
}
.dbl-rule{width:120px;margin:0 auto var(--s2);display:grid;gap:3px}
.dbl-rule i{display:block;height:1px;background:var(--line)}
.dbl-rule i:last-child{width:60%;margin:0 auto}
.dbl-rule.light{margin:var(--s3) auto}
.cover-line{
  font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--fog);margin-bottom:var(--s3);
}
.open-btn{
  font-family:var(--sans);font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  font-size:.72rem;color:var(--paper);
  background:rgba(10,10,10,.35);border:1px solid var(--line);
  padding:1rem 2.2rem;cursor:pointer;border-radius:0;
  transition:background .3s,color .3s,border-color .3s;
  min-height:48px;
}
.open-btn:hover,.open-btn:focus-visible{background:var(--paper);color:var(--black);border-color:var(--paper);outline:none}

/* ---------- Fixed slideshow background (full color) ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--black)}
.bg-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center 22%;
  opacity:0;transition:opacity 1s ease;
  will-change:opacity;
}
.bg-slide.active{opacity:1}
.bg-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.08) 34%,rgba(10,10,10,.55) 68%,rgba(10,10,10,.86) 100%);
}

/* ---------- Music button ---------- */
.music-btn{
  position:fixed;right:var(--s2);bottom:calc(var(--s2) + env(safe-area-inset-bottom));z-index:60;
  font-family:var(--sans);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper);background:rgba(10,10,10,.55);
  border:1px solid var(--line);padding:.7rem 1.1rem;cursor:pointer;
  backdrop-filter:blur(4px);min-height:44px;
}
.music-btn .music-off{display:none}
.music-btn.muted .music-on{display:none}
.music-btn.muted .music-off{display:inline}

/* ---------- Story panels — text in lower third ---------- */
.story{position:relative;z-index:10}
.panel{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;
  text-align:center;
  padding:var(--s5) var(--s3) clamp(4.5rem,14svh,9rem);
  position:relative;
}
.panel>*{
  max-width:var(--col);
  opacity:0;transform:translateY(24px);
  transition:opacity .9s ease,transform .9s ease;
}
.panel.in>*{opacity:1;transform:none}
.panel.in>*:nth-child(2){transition-delay:.12s}
.panel.in>*:nth-child(3){transition-delay:.24s}
.panel.in>*:nth-child(4){transition-delay:.36s}
.panel.in>*:nth-child(5){transition-delay:.48s}

/* --- Level 3: sans labels --- */
.eyebrow{
  font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--fog);margin-bottom:var(--s2);
}

/* --- Level 1: script display --- */
.names{
  font-family:var(--script);font-weight:400;line-height:1.15;
  font-size:clamp(3rem,13vw,5.6rem);
}
.names .amp{
  display:block;font-family:var(--serif);font-style:italic;
  font-size:.32em;color:var(--fog);line-height:1.3;
}
.families{
  font-family:var(--script);font-weight:400;
  font-size:clamp(2.1rem,8vw,3.2rem);line-height:1.25;
}
.amp-sm{font-family:var(--serif);font-style:italic;color:var(--fog);font-size:.6em}
.church{
  font-family:var(--script);font-weight:400;
  font-size:clamp(2.4rem,9.5vw,3.8rem);line-height:1.2;
}
.thanks-guest{
  font-family:var(--script);font-size:clamp(1.9rem,7.5vw,2.7rem);
  line-height:1.25;margin-bottom:var(--s2);
}
.thanks-final{
  font-family:var(--script);font-size:clamp(1.8rem,7vw,2.5rem);
  line-height:1.3;color:var(--silver);margin-top:var(--s2);
}

/* --- Level 2: serif reading --- */
.date-line{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1rem,3.6vw,1.3rem);
  letter-spacing:.5em;padding-left:.5em;
  color:var(--silver);margin:var(--s3) 0 var(--s4);
}
.quote{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.1rem,4.2vw,1.5rem);
  line-height:1.85;white-space:pre-line;
}
.church-time{
  font-family:var(--serif);font-style:italic;
  font-size:1.1rem;letter-spacing:.06em;margin-bottom:var(--s3);
}
.countdown{display:flex;gap:clamp(.9rem,4.5vw,2.4rem)}
.countdown div{display:flex;flex-direction:column;align-items:center;min-width:3.2rem}
.countdown b{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,6.5vw,2.8rem)}
.countdown small{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--fog);margin-top:var(--s1)}

.scroll-hint{
  position:absolute;bottom:calc(var(--s2) + env(safe-area-inset-bottom));
  font-size:.64rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--fog);line-height:1.9;
  animation:float 2.6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* --- Venues --- */
.venues{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;width:100%;max-width:52rem}
.venue{
  border:1px solid var(--line);
  padding:var(--s4) var(--s4);flex:1 1 15rem;max-width:22rem;
  background:rgba(10,10,10,.5);backdrop-filter:blur(3px);
}
.venue h2{
  font-family:var(--script);font-weight:400;
  font-size:clamp(1.7rem,6vw,2rem);line-height:1.25;margin-bottom:var(--s1);
}
.venue p{color:var(--silver);letter-spacing:.14em;font-size:.82rem;text-transform:uppercase;margin-bottom:var(--s3)}
.loc-btn{
  display:inline-block;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;
  border:1px solid var(--line);padding:.85rem 1.7rem;
  transition:background .3s,color .3s;min-height:44px;
}
.loc-btn:hover,.loc-btn:focus-visible{background:var(--paper);color:var(--black);outline:none}

.church-loc{color:var(--silver);letter-spacing:.36em;text-transform:uppercase;font-size:.76rem;margin:var(--s1) 0 var(--s2)}
.signoff{font-family:var(--sans);letter-spacing:.34em;text-transform:uppercase;font-size:.76rem;margin-top:var(--s1)}

@media (prefers-reduced-motion:reduce){
  .panel>*{transition:none;opacity:1;transform:none}
  .scroll-hint{animation:none}
  .bg-slide{transition:none}
}