:root {
  --olive: #29382d; --olive2: #3f4d3b; --ivory: #f5f0e5; --paper: #fbf8f1;
  --gold: #b89b60; --ink: #20251f; --muted: #777668;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--olive); color: var(--ink); font-family: "DM Sans", sans-serif; font-weight: 300; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .08; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.invitation { max-width: 920px; margin: 0 auto; background: var(--paper); min-height: 100vh; overflow: hidden; box-shadow: 0 0 80px #10171055; }
.topline { display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 22px clamp(18px, 5vw, 54px); color:var(--olive2); letter-spacing:.19em; font-size:9px; border-bottom:1px solid #b89b603d; }
.tiny-star { color:var(--gold); font-size:16px; }
.hero { position:relative; text-align:center; padding: clamp(60px, 10vw, 105px) 22px 72px; background: radial-gradient(ellipse at 50% 38%, #fffdf8 0%, var(--paper) 65%); }
.eyebrow,.section-kicker { font-size:10px; letter-spacing:.26em; color:var(--olive2); }
h1 { font-family:"Cormorant Garamond", serif; font-weight:400; font-size:clamp(56px, 11vw, 104px); line-height:.82; margin:30px 0 26px; color:var(--olive); }
h1 span { display:block; }
h1 em { display:block; font-size:.54em; color:var(--gold); font-weight:400; line-height:1.2; }
.gold-rule { display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold); margin:24px auto 27px; }
.gold-rule:before,.gold-rule:after { content:""; width:62px; height:1px; background:var(--gold); opacity:.8; }
.intro { font-family:"Cormorant Garamond",serif; font-size:clamp(21px, 4vw, 27px); line-height:1.35; margin:0; color:#505246; }
.date-block { margin:44px auto 0; }
.date-label { color:var(--gold); font-size:10px; letter-spacing:.3em; }
.date { display:flex; align-items:center; justify-content:center; gap:clamp(12px, 3vw, 25px); margin:15px 0 12px; color:var(--olive); font-family:"Cormorant Garamond",serif; font-size:clamp(38px, 8vw, 65px); }
.date i { width:1px; height:39px; background:var(--gold); }
.date-full { font-size:9px; letter-spacing:.14em; color:var(--muted); }
.closing { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:20px; color:var(--olive2); margin-top:39px; }
.botanical { position:absolute; color:#71816b; opacity:.34; font-family:serif; font-size:clamp(90px, 17vw, 175px); line-height:1; pointer-events:none; }
.botanical-left { left:-10px; top:28%; transform:rotate(-38deg); }
.botanical-right { right:-10px; bottom:12%; transform:rotate(145deg); }
.film-section { background:var(--olive); color:var(--ivory); padding:58px clamp(20px, 6vw, 72px) 48px; text-align:center; }
.film-section .section-kicker { color:#d0bd8d; }
.film-frame { position:relative; max-width:700px; aspect-ratio:16/9; margin:25px auto 0; border:1px solid #b89b6080; padding:7px; background:#1b281f; }
.teaser { display:block; width:100%; height:100%; object-fit:cover; background:linear-gradient(135deg,#344333,#101b14); }
.video-placeholder { position:absolute; inset:7px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:linear-gradient(135deg,#52634b,#1a281e); color:#f5f0e5; }
.video-placeholder p { font-family:"Cormorant Garamond",serif; font-size:clamp(22px,4vw,34px); margin:10px 0; }
.video-placeholder small { font-size:11px; padding:0 12px; opacity:.8; }
.play-mark { width:42px;height:42px;border:1px solid #d6c28d;border-radius:50%;display:grid;place-items:center;color:#d6c28d;padding-left:3px; }
.film-note { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:20px; color:#e4d9bc; margin:23px 0 0; }
.countdown-section { text-align:center; padding:54px 18px 58px; }
.countdown { display:flex; justify-content:center; gap:clamp(14px, 5vw, 55px); margin-top:28px; }
.countdown div { display:flex; flex-direction:column; gap:8px; min-width:45px; }
.countdown strong { font-family:"Cormorant Garamond",serif; font-size:clamp(34px, 7vw, 56px); font-weight:400; color:var(--olive); }
.countdown span { font-size:9px; letter-spacing:.17em; color:var(--muted); }
footer { text-align:center; padding:45px 20px 35px; background:#eee8da; color:var(--olive); }
.footer-flourish { color:var(--gold); font-size:22px; margin-bottom:15px; }
footer p { font-size:9px; letter-spacing:.22em; }
.footer-names { font-family:"Cormorant Garamond",serif; font-size:clamp(28px,5vw,42px); margin:9px 0; }
.footer-date { color:var(--muted); }
.music-button { margin-top:18px; border:1px solid var(--gold); border-radius:30px; background:transparent; color:var(--olive); padding:11px 18px; font:inherit; cursor:pointer; }
.music-button:hover { background:#e3dac6; }
.smallprint { margin-top:27px; letter-spacing:.04em; }
@media (max-width:520px) {
  .topline { font-size:7px; letter-spacing:.12em; }
  .hero { padding-top:66px; padding-bottom:55px; }
  .botanical-left { left:-34px; } .botanical-right { right:-34px; }
  .date-full { display:block; max-width:280px; margin:auto; line-height:1.8; }
  .countdown { gap:16px; }
}

/* Couple photo gallery */
.gallery-section { padding: 58px clamp(16px, 4vw, 42px) 64px; background: var(--paper); text-align:center; }
.gallery-heading { font-family:"Cormorant Garamond",serif; font-size:clamp(34px,6vw,52px); font-weight:400; color:var(--olive); margin:15px 0 6px; }
.gallery-intro { color:var(--muted); font-family:"Cormorant Garamond",serif; font-size:20px; margin:0 0 30px; }
.photo-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-width:780px; margin:0 auto; }
.gallery-item { margin:0; overflow:hidden; background:#e8e1d4; aspect-ratio:4/3; }
.gallery-item img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img { transform:scale(1.035); }
@media (max-width:520px) { .photo-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .gallery-section { padding-left:12px; padding-right:12px; } }

/* Cinematic dark-luxury revision inspired by the supplied reference */
:root {
  --olive: #11140f;
  --olive2: #293126;
  --ivory: #f4eddd;
  --paper: #11130f;
  --gold: #c7aa70;
  --ink: #f2eadb;
  --muted: #c0b8a7;
}
body {
  background: #080907;
  color: var(--ivory);
  background-image: radial-gradient(ellipse at 50% 0%, #343729 0%, #11130f 42%, #080907 100%);
}
.invitation {
  background: #11130f;
  color: var(--ivory);
  box-shadow: 0 0 90px #000b;
}
.topline {
  color: #e9d7b1;
  background: #0c0e0b;
  border-bottom-color: #c7aa704a;
}
.hero {
  color: var(--ivory);
  background:
    linear-gradient(180deg, rgba(5,7,5,.76), rgba(12,15,10,.78)),
    radial-gradient(ellipse at 70% 25%, #55503a 0%, #25281e 35%, #10120e 78%);
  border-bottom: 1px solid #c7aa704d;
}
.eyebrow, .section-kicker { color: #d3b982; }
h1 { color: #f4eddd; text-shadow: 0 3px 24px #0008; }
h1 em { color: #c7aa70; }
.intro { color: #e1d8c6; }
.date { color: #f4eddd; }
.date-full { color: #c6bda9; }
.closing { color: #d8c69e; }
.botanical { color: #a2a786; opacity: .22; }
.film-section {
  background: linear-gradient(145deg, #24291d 0%, #10120e 48%, #080907 100%);
  color: var(--ivory);
  border-top: 1px solid #c7aa7033;
  border-bottom: 1px solid #c7aa7033;
}
.film-frame { background: #080907; box-shadow: 0 14px 45px #0008; }
.video-placeholder { background: linear-gradient(135deg, #343a2b, #090b08); }
.gallery-section {
  background: linear-gradient(150deg, #171a13, #0b0d0a 70%);
  color: var(--ivory);
}
.gallery-heading { color: #f4eddd; }
.gallery-intro { color: #c6bdab; }
.gallery-item { background: #24271e; border: 1px solid #c7aa7040; }
.countdown-section {
  background: #e9dfca;
  color: #25271e;
  background-image: radial-gradient(ellipse at 20% 15%, #f8f0df 0%, #e9dfca 70%);
}
.countdown-section .section-kicker { color: #4b523d; }
.countdown strong { color: #252a1e; }
.countdown span { color: #696754; }
footer {
  background: linear-gradient(145deg, #090b08, #1c2117 60%, #090b08);
  color: #eee3cc;
  border-top: 1px solid #c7aa7060;
}
.footer-date { color: #c6b99d; }
.music-button { color: #e9d9b7; }
.music-button:hover { background: #353a2b; }
@media (max-width: 520px) {
  .topline { background: #0c0e0b; }
  .hero { background: linear-gradient(180deg, rgba(5,7,5,.8), rgba(12,15,10,.86)), radial-gradient(ellipse at 70% 25%, #55503a 0%, #10120e 78%); }
}