/* ==========================================================================
   Shibil & Thaniya — Luxury Wedding Reception Invitation
   Coffee Brown & Warm Beige · Playfair Display / Great Vibes / Cormorant Garamond / Jost
   ========================================================================== */

:root{
  /* Official Coffee Brown design system — drawn from the invitation card */
  --coffee: #5A3E2B;       /* Primary */
  --coffee-2: #4A3325;     /* Dark Coffee */
  --mocha: #7A5B45;        /* Warm Mocha */
  --light-coffee: #8D705A; /* Light Coffee */
  --accent: #B08D67;       /* Accent */
  --taupe: #8B6A4E;        /* Borders */
  --paper: #F7F3ED;        /* Cream Paper */
  --paper-texture: #F2ECE5;/* Paper Texture */
  --paper-lift: #FBF8F2;
  --ink: #2C211A;          /* Text */

  --display: 'Playfair Display', serif;
  --script: 'Great Vibes', cursive;
  --body: 'Cormorant Garamond', serif;
  --utility: 'Jost', sans-serif;

  --container: 1180px;
  --card-radius: 6px;
  --shadow-soft: 0 18px 42px -22px rgba(74, 51, 37, 0.22);
  --shadow-card: 0 10px 26px -14px rgba(74, 51, 37, 0.18);

  --ease: cubic-bezier(.22,.61,.25,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
ul, ol{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
h1,h2,h3,h4,p{ margin:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Paper texture / grain ---------- */
body{
  background-color: var(--paper);
  background-image:
    radial-gradient(1100px 750px at 8% -8%, rgba(176,141,103,0.14), transparent 58%),
    radial-gradient(900px 680px at 108% 12%, rgba(122,91,69,0.12), transparent 55%),
    radial-gradient(700px 900px at 50% 105%, rgba(141,112,90,0.10), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-texture) 100%);
  background-attachment: fixed;
}
/* Handmade paper grain — fine fibrous noise, warmed by the coffee palette */
.grain{
  position: fixed; inset:0; z-index: 2; pointer-events:none;
  opacity: 0.06; mix-blend-mode: multiply;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Soft watercolor stain accents, echoing a hand-pressed paper edge */
.grain::after{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(420px 300px at 6% 4%, rgba(90,62,43,0.05), transparent 70%),
    radial-gradient(380px 320px at 96% 92%, rgba(90,62,43,0.045), transparent 70%);
}

/* ---------- Ambient floating petals ---------- */
.ambient-petals{ position: fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.petal{ position:absolute; width: 22px; height:22px; color: var(--taupe); opacity:.18; animation: drift 22s linear infinite; }
.petal--1{ top: -5%; left: 8%; animation-duration: 26s; }
.petal--2{ top: -8%; left: 42%; animation-duration: 32s; animation-delay: -6s; color: var(--accent);}
.petal--3{ top: -6%; left: 74%; animation-duration: 28s; animation-delay: -12s; }
.petal--4{ top: -10%; left: 90%; animation-duration: 36s; animation-delay: -18s; color: var(--accent);}
@keyframes drift{
  0%{ transform: translateY(-10vh) translateX(0) rotate(0deg); }
  50%{ transform: translateY(55vh) translateX(30px) rotate(180deg); }
  100%{ transform: translateY(120vh) translateX(-20px) rotate(360deg); }
}

/* ---------- Utility ---------- */
.icon{ width:18px; height:18px; }
.eyebrow{
  font-family: var(--utility); font-size: 0.78rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--taupe); font-weight:500;
}
.eyebrow.center{ text-align:center; }
.section-title{
  font-family: var(--display); font-weight:600; color: var(--coffee);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top:.5rem; line-height:1.25;
}
.section-title .amp{ font-family: var(--script); color: var(--accent); padding: 0 .2rem; font-size: 1.2em;}
.section-title.center{ text-align:center; }
.divider{ width: 220px; height: 34px; color: var(--accent); display:block; margin: 1.2rem 0; }
.divider.center{ margin: 1.2rem auto; }

/* Reveal animation base */
[data-reveal]{ opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="fade-right"]{ transform: translateX(-34px); }
[data-reveal="fade-left"]{ transform: translateX(34px); }
[data-reveal].in-view{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay: .12s; }
[data-reveal][data-delay="2"]{ transition-delay: .24s; }
[data-reveal][data-delay="3"]{ transition-delay: .36s; }
[data-reveal][data-delay="4"]{ transition-delay: .48s; }
[data-reveal][data-delay="5"]{ transition-delay: .6s; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family: var(--utility); font-size: .82rem; letter-spacing:.14em; text-transform:uppercase;
  padding: .95rem 1.7rem; border-radius: 999px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.btn--filled{ background: linear-gradient(135deg, var(--coffee), var(--coffee-2)); color: var(--paper-lift); box-shadow: var(--shadow-card); }
.btn--filled:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(58,38,20,0.4); }
.btn--outline{ border: 1px solid rgba(139,106,78,0.45); color: var(--coffee); background: var(--paper-lift); }
.btn--outline:hover{ background: var(--coffee); color: var(--paper-lift); transform: translateY(-3px); }
.btn--gate{
  font-family: var(--utility); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--paper-lift); background: transparent;
  border: 1px solid rgba(247,243,237,.35); border-radius: 999px;
  padding: .75rem 2.2rem; margin-top: .6rem;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.btn--gate:hover{ background: rgba(247,243,237,.12); border-color: rgba(247,243,237,.7); }

/* ==========================================================================
   ENTRANCE — Loader + Invitation Gate
   ========================================================================== */
.entrance{
  position: fixed; inset:0; z-index: 999;
  background: radial-gradient(1200px 900px at 50% 20%, var(--mocha), var(--coffee-2) 70%);
  display:flex; align-items:center; justify-content:center;
}
body.entered .entrance{ pointer-events:none; }
body.entered{ overflow: visible; }
body:not(.entered){ overflow:hidden; height:100vh; }

.entrance__loader{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  color: var(--paper-lift);
  animation: loaderOut .7s var(--ease) 1.9s forwards;
}
@keyframes loaderOut{ to{ opacity:0; visibility:hidden; } }
.entrance__ring{ width: 84px; height:84px; }
.entrance__ring circle{
  fill:none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: ringDraw 1.6s var(--ease) forwards, ringSpin 3s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes ringDraw{ to{ stroke-dashoffset: 40; } }
@keyframes ringSpin{ to{ transform: rotate(360deg); } }
.entrance__monogram{
  font-family: var(--script); font-size: 2.6rem; color: var(--accent);
  position:absolute; opacity:0; animation: fadeIn .8s var(--ease) .5s forwards;
}
.entrance__monogram span{ color: var(--paper-lift); margin: 0 .3rem; }
.entrance__loading-label{
  position:absolute; bottom: 14%; font-family: var(--utility); font-size:.72rem;
  letter-spacing:.3em; text-transform:uppercase; opacity:0; color: rgba(247,243,237,.7);
  animation: fadeIn .8s var(--ease) .9s forwards;
}
@keyframes fadeIn{ to{ opacity:1; } }

.entrance__gate{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  animation: gateIn .9s var(--ease) 2.1s forwards;
}
@keyframes gateIn{ to{ opacity:1; visibility:visible; } }

.gate__panel{
  position:absolute; top:0; bottom:0; width:50%; background:
    linear-gradient(160deg, var(--mocha) 0%, var(--coffee) 55%, var(--coffee-2) 100%);
  transition: transform 1.1s var(--ease);
}
.gate__panel--left{ left:0; border-right: 1px solid rgba(201,166,122,.3); }
.gate__panel--right{ right:0; border-left: 1px solid rgba(201,166,122,.3); }
body.gate-open .gate__panel--left{ transform: translateX(-105%); }
body.gate-open .gate__panel--right{ transform: translateX(105%); }

.gate__corner{ position:absolute; width:110px; height:110px; color: rgba(201,166,122,.55); }
.gate__corner--tl{ top:18px; left:18px; }
.gate__corner--bl{ bottom:18px; left:18px; transform: scaleY(-1); }
.gate__corner--tr{ top:18px; right:18px; transform: scaleX(-1); }
.gate__corner--br{ bottom:18px; right:18px; transform: scale(-1,-1); }

.gate__content{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color: var(--paper-lift); padding: 0 1.5rem; gap: .85rem;
  transition: opacity .5s ease, transform .5s ease;
}
body.gate-open .gate__content{ opacity:0; transform: scale(.94); pointer-events:none; }
.gate__arabic{ font-family: var(--body); font-size:1.15rem; color: var(--accent); letter-spacing:.03em; }
.gate__eyebrow{ font-family: var(--utility); font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; color: rgba(247,243,237,.75); }
.gate__names{ font-family: var(--script); font-size: clamp(2.4rem, 7vw, 3.6rem); display:flex; align-items:center; gap:.6rem; margin: .3rem 0 1rem; }
.gate__amp{ font-family: var(--display); font-size: .5em; color: var(--accent); }

/* ==========================================================================
   NAV
   ========================================================================== */
.site-nav{ position: fixed; top: 18px; right: 18px; z-index: 500; }
.site-nav__toggle{
  width: 46px; height:46px; border-radius:50%; background: var(--paper-lift); border: 1px solid rgba(139,106,78,.16);
  box-shadow: var(--shadow-card); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition: transform .3s var(--ease);
}
.site-nav__toggle span{ width:18px; height:1.5px; background: var(--coffee); transition: all .3s var(--ease); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.site-nav__list{
  position:absolute; top: 56px; right:0; background: var(--paper-lift);
  border: 1px solid rgba(90,62,43,.12); border-radius: 14px; padding: .6rem; min-width: 190px;
  box-shadow: var(--shadow-soft);
  opacity:0; visibility:hidden; transform: translateY(-10px);
  transition: all .35s var(--ease);
}
.site-nav__list.open{ opacity:1; visibility:visible; transform:none; }
.site-nav__link{
  display:block; padding: .55rem .8rem; font-family: var(--utility); font-size:.82rem;
  letter-spacing:.08em; color: var(--coffee); border-radius:8px; transition: background .25s ease, color .25s ease;
}
.site-nav__link:hover{ background: rgba(201,166,122,.18); color: var(--coffee-2); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height: 100svh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding: 6rem 1.25rem 4rem;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(176,141,103,.35), transparent 60%),
    radial-gradient(800px 700px at 85% 85%, rgba(139,106,78,.32), transparent 55%),
    linear-gradient(160deg, #efe6d8 0%, #e7dac6 45%, #d9c4a5 100%);
  background-size: 140% 140%;
  animation: bgPan 26s ease-in-out infinite alternate;
  transform: translateY(var(--parallax, 0px));
  will-change: transform;
}
@keyframes bgPan{ from{ background-position: 0% 0%; } to{ background-position: 100% 60%; } }
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(58,38,20,0.12) 0%, rgba(58,38,20,0.04) 30%, rgba(247,243,237,0.55) 85%, var(--paper) 100%);
}
.hero__content{ position:relative; z-index:2; text-align:center; max-width: 760px; }
.hero__arabic{ font-family: var(--body); font-size: 1.35rem; color: var(--coffee); margin-bottom:.4rem; }
.hero__bismillah{
  font-family: var(--body); font-style: italic; color: var(--taupe); font-size: 1.05rem;
  max-width: 480px; margin: 0 auto 2rem; line-height:1.6;
}
.hero__names{ display:flex; align-items:center; justify-content:center; gap: 1.1rem; flex-wrap:wrap; }
.hero__name{ font-family: var(--script); font-size: clamp(2.6rem, 8vw, 4.6rem); color: var(--coffee); line-height:1; }
.hero__amp{ font-family: var(--display); font-style:italic; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--accent); }
.hero__divider{ margin: 1.6rem auto 1rem; }
.hero__eyebrow{ font-family: var(--utility); font-size:.85rem; letter-spacing:.32em; text-transform:uppercase; color: var(--taupe); }
.hero__details{ margin-top: 1.1rem; }
.hero__date{ font-family: var(--display); font-size: 1.5rem; color: var(--coffee); font-weight:600; }
.hero__day{ font-family: var(--utility); font-size:.85rem; letter-spacing:.2em; text-transform:uppercase; color: var(--taupe); margin-top:.2rem; }
.hero__venue{ font-family: var(--body); font-size: 1.15rem; margin-top:.6rem; color: var(--ink); }
.hero__scroll{ display:inline-flex; flex-direction:column; align-items:center; gap:.5rem; margin-top: 2.6rem; color: var(--taupe); transition: color .3s ease; }
.hero__scroll:hover{ color: var(--coffee); }
.hero__scroll-arrow{ width: 44px; height: 44px; animation: scrollBounce 2s ease-in-out infinite; }
@keyframes scrollBounce{ 0%,100%{ transform: translateY(0); opacity:.6; } 50%{ transform: translateY(7px); opacity:1; } }
.hero__corner{ position:absolute; width: 130px; height:130px; color: var(--coffee); opacity:.5; z-index:2; }
.hero__corner--tl{ top: 22px; left: 22px; }
.hero__corner--br{ bottom: 22px; right: 22px; transform: scale(-1,-1); }

/* ==========================================================================
   SHARED CARD (invitation, venue)
   ========================================================================== */
.card, .venue__card{
  position:relative; max-width: 760px; margin: 0 auto; padding: 3.4rem 2.2rem;
  background: linear-gradient(180deg, var(--paper-lift), #f3ece0);
  border-radius: var(--card-radius); box-shadow: var(--shadow-card);
  border: 1px solid rgba(139,106,78,.3);
  text-align:center;
}
.card::before, .venue__card::before{
  content:''; position:absolute; inset: 10px; border: 1px solid rgba(139,106,78,.16);
  border-radius: calc(var(--card-radius) - 1px); pointer-events:none;
}
.card__corner, .venue__corner{ position:absolute; width:96px; height:96px; color: var(--accent); opacity:.7; }
.card__corner--tl, .venue__corner--tl{ top:12px; left:12px; }
.card__corner--br, .venue__corner--br{ bottom:12px; right:12px; transform: scale(-1,-1); }

.invitation{ padding: 5rem 1.25rem; }
.invitation__house{ font-family: var(--display); font-style: italic; font-size:1.4rem; color: var(--coffee); margin-top: 1.1rem; }
.invitation__address{ font-family: var(--body); color: var(--taupe); margin-top:.3rem; }
.invitation__phone{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.9rem; font-family: var(--utility); font-size:.9rem; letter-spacing:.05em; color: var(--coffee); border-bottom: 1px solid transparent; transition: border-color .3s ease, color .3s ease; }
.invitation__phone:hover{ border-color: var(--accent); color: var(--taupe); }
.invitation__message{ font-family: var(--body); font-size: 1.2rem; line-height:1.75; color: var(--ink); max-width: 560px; margin: 0 auto; }

/* ==========================================================================
   COUPLE
   ========================================================================== */
.couple{ padding: 5rem 1.25rem; max-width: var(--container); margin: 0 auto; }
.couple__grid{ display:grid; grid-template-columns: 1fr auto 1fr; gap: 1.6rem; align-items:center; margin-top: 2.6rem; }
.couple__side{
  position:relative; background: var(--paper-lift); border: 1px solid rgba(139,106,78,.16);
  border-radius: var(--card-radius); padding: 2.4rem 1.8rem; box-shadow: var(--shadow-card); text-align:center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.couple__side:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.couple__corner{ position:absolute; width:76px; height:76px; color: var(--accent); opacity:.6; }
.couple__corner--tl{ top:8px; left:8px; }
.couple__corner--tr{ top:8px; right:8px; transform: scaleX(-1); }
.couple__label{ font-family: var(--utility); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color: var(--taupe); }
.couple__name{ font-family: var(--script); font-size: 2.6rem; color: var(--coffee); margin: .4rem 0 1rem; }
.couple__relation{ font-family: var(--body); font-style: italic; color: var(--taupe); font-size:1.05rem; }
.couple__grandparents{ font-family: var(--body); color: var(--ink); font-size:1.05rem; margin-top:.15rem; }
.couple__amp{ font-family: var(--script); font-size: 3rem; color: var(--accent); text-align:center; }

.couple__address{ text-align:center; margin-top: 3rem; }
.couple__address .icon--home{ width:26px; height:26px; color: var(--accent); margin: 0 auto .6rem; }
.couple__address-house{ font-family: var(--display); font-style:italic; font-size:1.3rem; color: var(--coffee); }
.couple__address p:last-child{ font-family: var(--utility); font-size:.85rem; letter-spacing:.08em; color: var(--taupe); margin-top:.2rem; }

@media (max-width: 760px){
  .couple__grid{ grid-template-columns: 1fr; }
  .couple__amp{ transform: rotate(90deg); margin: -.6rem 0; }
}

/* ==========================================================================
   RECEPTION / CALENDAR / COUNTDOWN
   ========================================================================== */
.reception{ padding: 5rem 1.25rem; max-width: var(--container); margin:0 auto; }
.reception__grid{ display:grid; grid-template-columns: 260px 1fr; gap: 2.6rem; align-items:center; margin-top: 2.6rem; }

.calendar{
  position:relative; background: linear-gradient(160deg, var(--coffee), var(--coffee-2));
  color: var(--paper-lift); border-radius: 14px; padding: 2.2rem 1.5rem; text-align:center;
  box-shadow: var(--shadow-soft);
}
.calendar__corner{ position:absolute; top:10px; left:10px; width:56px; height:56px; color: rgba(201,166,122,.5); }
.calendar__month{ font-family: var(--utility); letter-spacing:.3em; text-transform:uppercase; font-size:.78rem; color: var(--accent); }
.calendar__day-num{ font-family: var(--display); font-size: 4.6rem; font-weight:700; line-height:1; margin: .3rem 0; }
.calendar__weekday{ font-family: var(--body); font-style: italic; font-size:1.2rem; color: rgba(247,243,237,.85); }
.calendar__pin{ position:absolute; bottom:-9px; left:50%; transform: translateX(-50%); width:16px; height:16px; background: var(--accent); border-radius:50%; box-shadow: var(--shadow-card); }

.reception__label{ font-family: var(--display); font-size: 1.6rem; color: var(--coffee); }
.reception__time{ font-family: var(--body); font-size:1.3rem; color: var(--taupe); margin-top:.3rem; }
.reception__venue-line{ font-family: var(--utility); font-size:.9rem; letter-spacing:.06em; color: var(--ink); margin-top:.5rem; }

.countdown{ display:flex; gap: .9rem; margin-top: 1.8rem; flex-wrap:wrap; }
.countdown__unit{
  background: var(--paper-lift); border: 1px solid rgba(139,106,78,.18); border-radius: 10px;
  padding: .9rem 1.1rem; min-width: 78px; text-align:center; box-shadow: var(--shadow-card);
}
.countdown__num{ display:block; font-family: var(--display); font-size: 1.7rem; color: var(--coffee); font-weight:700; }
.countdown__label{ display:block; font-family: var(--utility); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color: var(--taupe); margin-top:.2rem; }

@media (max-width: 700px){
  .reception__grid{ grid-template-columns: 1fr; justify-items:center; text-align:center; }
  .reception__info{ text-align:center; }
  .countdown{ justify-content:center; }
}

/* ==========================================================================
   VENUE
   ========================================================================== */
.venue{ padding: 5rem 1.25rem; }
.venue__place{ font-family: var(--body); font-style:italic; font-size:1.25rem; color: var(--taupe); margin-top:.3rem; }
.venue__actions{ display:flex; gap: .9rem; justify-content:center; flex-wrap:wrap; margin-top: 2rem; }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline{ padding: 5rem 1.25rem; max-width: 640px; margin: 0 auto; }
.timeline__list{ position:relative; margin-top: 2.6rem; padding-left: 2.2rem; }
.timeline__list::before{
  content:''; position:absolute; left: 7px; top: 6px; bottom: 6px; width:1px;
  background: linear-gradient(var(--accent), var(--taupe), var(--accent));
}
.timeline__item{ position:relative; padding-bottom: 2.6rem; }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__dot{
  position:absolute; left: -2.2rem; top: 4px; width: 15px; height:15px; border-radius:50%;
  background: var(--paper); border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--paper);
}
.timeline__body h3{ font-family: var(--display); font-size:1.35rem; color: var(--coffee); }
.timeline__body p{ font-family: var(--body); color: var(--taupe); font-size:1.05rem; margin-top:.2rem; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery{ padding: 5rem 1.25rem; max-width: var(--container); margin:0 auto; }
.masonry{ columns: 3 220px; column-gap: 1.1rem; margin-top: 2.6rem; }
.masonry__item{
  position:relative; width:100%; margin-bottom: 1.1rem; break-inside: avoid; border-radius: 10px; overflow:hidden;
  height: 240px; display:flex; align-items:flex-end; padding: 1rem;
  box-shadow: var(--shadow-card); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  background:
    linear-gradient(0deg, rgba(43,33,24,.55), rgba(43,33,24,0) 55%),
    linear-gradient(135deg, hsl(28 30% calc(78% - (var(--tile) * 3%))), hsl(28 35% calc(60% - (var(--tile) * 2%))));
}
.masonry__item--tall{ height: 320px; }
.masonry__item:hover{ transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow-soft); }
.masonry__item span{
  position:absolute; top: .8rem; right: 1rem; font-family: var(--display); font-style:italic; color: rgba(247,243,237,.6); font-size:1.1rem;
}
.masonry__item em{ font-family: var(--utility); font-style:normal; font-size:.82rem; letter-spacing:.08em; color: var(--paper-lift); }

.lightbox{
  position: fixed; inset:0; z-index: 800; background: rgba(43,33,24,.9);
  display:flex; align-items:center; justify-content:center; padding: 2rem;
  opacity:0; visibility:hidden; transition: opacity .4s ease, visibility .4s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox__frame{ max-width: 560px; width:100%; text-align:center; }
.lightbox__image{
  width:100%; height: 60vh; max-height: 480px; border-radius: 10px;
  background: linear-gradient(135deg, var(--taupe), var(--coffee));
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.55);
}
.lightbox__caption{ font-family: var(--display); font-style:italic; color: var(--paper-lift); font-size:1.3rem; margin-top: 1.2rem; }
.lightbox__close{
  position:absolute; top: 22px; right: 26px; font-size: 2.4rem; color: var(--paper-lift); line-height:1;
  transition: transform .3s ease;
}
.lightbox__close:hover{ transform: rotate(90deg); }

@media (max-width: 700px){ .masonry{ columns: 2 160px; } }
@media (max-width: 420px){ .masonry{ columns: 1; } }

/* ==========================================================================
   FAMILY
   ========================================================================== */
.family{ padding: 4.5rem 1.25rem; }
.family__card{
  position:relative; max-width: 600px; margin:0 auto; text-align:center; padding: 3rem 2rem;
  border: 1px solid rgba(139,106,78,.3); border-radius: var(--card-radius);
  background: var(--paper-lift); box-shadow: var(--shadow-card);
}
.family__card::before{
  content:''; position:absolute; inset: 8px; border: 1px solid rgba(139,106,78,.18); border-radius: calc(var(--card-radius) - 1px); pointer-events:none;
}
.family__ornament{ width: 60px; height:60px; color: var(--accent); margin: 0 auto 1rem; display:block; }
.family__eyebrow{ font-family: var(--utility); font-size:.78rem; letter-spacing:.26em; text-transform:uppercase; color: var(--taupe); }
.family__name{ font-family: var(--script); font-size: 2.2rem; color: var(--coffee); margin-top:.6rem; }
.family__and{ font-family: var(--body); font-style:italic; color: var(--accent); margin: .3rem 0; }

/* ==========================================================================
   RSVP
   ========================================================================== */
.rsvp{ padding: 5rem 1.25rem 6rem; max-width: 680px; margin: 0 auto; }
.rsvp__form{
  margin-top: 2.4rem; display:grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.1rem;
  background: var(--paper-lift); border: 1px solid rgba(139,106,78,.16); border-radius: var(--card-radius);
  padding: 2.4rem; box-shadow: var(--shadow-card); position:relative;
}
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ grid-column: 1 / -1; }
.field label{ font-family: var(--utility); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--taupe); }
.field input, .field textarea{
  font-family: var(--body); font-size: 1.05rem; color: var(--ink); background: transparent;
  border: none; border-bottom: 1px solid rgba(139,106,78,.35); padding: .5rem .1rem;
  transition: border-color .3s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--accent); }
.field textarea{ resize: vertical; min-height: 70px; }
.rsvp__submit{ grid-column: 1 / -1; justify-self:center; margin-top: .6rem; }
.rsvp__success{
  grid-column: 1/-1; text-align:center; font-family: var(--body); font-style:italic; color: var(--coffee);
  opacity:0; height:0; overflow:hidden; transition: opacity .5s ease, height .5s ease, margin .5s ease;
}
.rsvp__success.show{ opacity:1; height:auto; margin-top: .4rem; }

@media (max-width: 560px){ .rsvp__form{ grid-template-columns: 1fr; padding: 1.8rem; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  text-align:center; padding: 4.5rem 1.25rem 3rem; background: linear-gradient(180deg, var(--paper), #efe4d2);
  border-top: 1px solid rgba(139,106,78,.18);
}
.footer__seal{ width: 56px; height:56px; color: var(--accent); margin:0 auto 1.2rem; }
.footer__names{ font-family: var(--script); font-size: 2.4rem; color: var(--coffee); }
.footer__names span{ color: var(--accent); padding: 0 .3rem; }
.footer__message{ font-family: var(--body); font-style: italic; color: var(--taupe); font-size:1.15rem; margin-top: .8rem; max-width:420px; margin-inline:auto; }
.footer__fine{ font-family: var(--utility); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--taupe); margin-top:.6rem; opacity:.8; }

/* ---------- Back to top ---------- */
.to-top{
  position: fixed; right: 18px; bottom: 18px; width: 46px; height:46px; border-radius:50%;
  background: var(--coffee); color: var(--paper-lift); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-card); opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .35s var(--ease); z-index: 400;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top svg{ width:20px; height:20px; }
.to-top:hover{ transform: translateY(-4px); }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 3px;
}