/* begum-hardy.com — memory portal
   Island-wedding elegance: warm sand, deep ocean, soft gold. Self-contained, no external fonts. */

:root{
  --sand:#f7f1e8;
  --sand-2:#efe6d8;
  --ink:#2c2a27;
  --ink-soft:#6b655c;
  --ocean:#155e63;
  --ocean-deep:#0e474b;
  --gold:#c19a5b;
  --blush:#e7d3c4;
  --line:rgba(44,42,39,.14);
  --card:#fffdf9;
  --shadow:0 18px 40px -22px rgba(20,40,42,.45);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,ui-serif,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 80% at 50% -10%,#fbf7ef 0%,var(--sand) 46%,var(--sand-2) 100%);
  background-attachment:fixed;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:.01em;margin:0}
a{color:var(--ocean);text-decoration:none}
a:hover{color:var(--ocean-deep)}
img{max-width:100%;display:block}

.eyebrow{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.28em;
  font-size:.72rem;font-weight:600;color:var(--gold);margin:0 0 .5rem
}
.lede{font-family:var(--serif);font-size:1.4rem;line-height:1.5;color:var(--ink-soft);font-style:italic}

/* ---- Header ---- */
.site-head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem clamp(1rem,4vw,2.4rem);
  background:rgba(247,241,232,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand-mono,.foot-mono{font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.brand-mono .amp,.foot-mono .amp{color:var(--gold);margin:0 .06em;font-style:italic}
.site-nav{display:flex;gap:clamp(1rem,3vw,2.2rem)}
.site-nav a{
  font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600;
  color:var(--ink-soft);padding-bottom:3px;border-bottom:1.5px solid transparent
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ocean);border-bottom-color:var(--gold)}

main{max-width:var(--wrap);margin:0 auto;padding:clamp(1.6rem,5vw,3.6rem) clamp(1rem,4vw,2.4rem)}

/* ---- Hero ---- */
.hero{margin-bottom:clamp(1.5rem,5vw,3rem)}
.hero-frame{
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);background:#000
}
.video{
  position:relative;aspect-ratio:16/9;cursor:pointer;
  background:var(--poster) center/cover no-repeat #0b1f21;
}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35))}
.video-play{
  position:absolute;inset:0;margin:auto;width:88px;height:62px;z-index:2;
  border:0;background:none;cursor:pointer;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));
  transition:transform .2s ease
}
.video-play .pl-bg{fill:#e23b3b;opacity:.92;transition:opacity .2s}
.video:hover .video-play{transform:scale(1.06)}
.video:hover .pl-bg{opacity:1}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hero-caption{text-align:center;margin-top:1.5rem}
.hero-caption h1{font-size:clamp(2.2rem,6vw,3.6rem)}

/* ---- Album intro + filter ---- */
.album-intro{text-align:center;max-width:640px;margin:0 auto clamp(1.4rem,4vw,2.4rem)}
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}
.chip{
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.02em;
  padding:.42rem 1rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  transition:all .18s ease
}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.chip.is-on{background:var(--ocean);border-color:var(--ocean);color:#fff}

/* ---- Album (masonry via columns) ---- */
.album{column-count:3;column-gap:1.1rem}
@media(max-width:820px){.album{column-count:2}}
@media(max-width:520px){.album{column-count:1}}
.card{
  break-inside:avoid;margin:0 0 1.1rem;background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 10px 26px -20px rgba(20,40,42,.5);
  transition:transform .22s ease,box-shadow .22s ease
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card.hidden{display:none}
.card-media{display:block;position:relative;background:#e9e0d2 center/cover no-repeat}
.card.image .card-media img{width:100%;height:auto}
.card.span-tall .card-media img{aspect-ratio:3/4;object-fit:cover}
.card.span-wide .card-media img{aspect-ratio:16/9;object-fit:cover}
.placeholder{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;color:var(--blush);
  background:repeating-linear-gradient(135deg,#f3ebde,#f3ebde 14px,#efe5d5 14px,#efe5d5 28px)
}
.card.span-wide .placeholder{aspect-ratio:16/9}
figcaption{padding:.85rem 1rem 1rem}
.card-title{display:block;font-family:var(--serif);font-size:1.12rem;color:var(--ink)}
.card-caption{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:.1rem}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.tag{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  color:var(--ocean);background:rgba(21,94,99,.09);
  padding:.2rem .55rem;border-radius:999px
}

/* ---- Invitation ---- */
.page-intro{text-align:center;max-width:680px;margin:0 auto clamp(1.5rem,4vw,2.5rem)}
.page-intro h1{font-size:clamp(2.2rem,6vw,3.4rem);margin:.2rem 0 .6rem}
.chapter-nav{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.6rem
}
.chapter-nav a{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;background:var(--card)
}
.chapter-nav a:hover{border-color:var(--gold);color:var(--ink)}
.invitation-section{
  max-width:720px;margin:0 auto clamp(2rem,5vw,3.4rem);
  padding-top:clamp(1.2rem,4vw,2rem);border-top:1px solid var(--line);scroll-margin-top:84px
}
.invitation-section:first-of-type{border-top:0}
.invitation-section h2{font-size:clamp(1.7rem,4.4vw,2.3rem);color:var(--ocean-deep);margin-bottom:1rem}
.prose{font-size:1.06rem}
.prose :is(h2,h3){font-family:var(--serif);color:var(--ink);margin:1.6rem 0 .6rem}
.prose p{margin:0 0 1rem}
.prose a{border-bottom:1px solid rgba(21,94,99,.35)}
.prose img{border-radius:12px;margin:1rem 0;box-shadow:var(--shadow)}
.prose iframe{max-width:100%;border-radius:12px;margin:1rem 0}
.prose figure{margin:1.2rem 0}

/* ---- Footer ---- */
.site-foot{
  text-align:center;padding:3rem 1rem 3.4rem;margin-top:2rem;
  border-top:1px solid var(--line);color:var(--ink-soft)
}
.foot-mono{display:block;font-size:1.4rem;margin-bottom:.4rem}
.site-foot p{margin:0;font-family:var(--serif);font-style:italic}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(14,25,26,.9);padding:4vw
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-close{
  position:absolute;top:1.2rem;right:1.6rem;background:none;border:0;color:#fff;
  font-size:2.6rem;line-height:1;cursor:pointer;opacity:.8
}
.lb-close:hover{opacity:1}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}