/* ===========================================================
   mydeets — Mahar & Mas Kahwin Framing
   Malay wedding · pastel floral · blush + cream + sage + gold
   =========================================================== */

:root{
  --cream:     #faf2ec;   /* page background            */
  --blush:     #f3ddd9;   /* section background (deeper) */
  --blush-2:   #eccfca;
  --rose:      #c06b80;   /* dusty rose — primary accent */
  --rose-deep: #9c4d62;
  --sage:      #8ea389;   /* soft sage green            */
  --gold:      #bd9450;   /* champagne gold             */
  --gold-soft: #d4b582;
  --plum:      #523a45;   /* headings / dark text       */
  --text:      #614955;   /* body text                  */
  --muted:     #927e87;   /* muted captions             */
  --line:      rgba(156,77,98,.30);
  --line-soft: rgba(156,77,98,.16);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1180px;
  --pad:  clamp(1.25rem, 5vw, 4rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--text);
  line-height:1.65;
  font-weight:300;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; color:var(--rose-deep); }

/* ---------- shared ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--rose); font-weight:400; margin-bottom:1rem;
}
.eyebrow--center{ text-align:center; }

.section-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.1rem, 5.5vw, 3.6rem); line-height:1.05;
  letter-spacing:.01em; color:var(--plum);
}

.dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--sage); margin-right:.55rem; vertical-align:middle;
  box-shadow:0 0 0 3px rgba(156,174,150,.28);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--sans);
  font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  padding:1rem 1.7rem; border-radius:30px;
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.btn--gold{   /* primary = dusty rose */
  background:linear-gradient(135deg,var(--rose) 0%,var(--rose-deep) 100%);
  color:#fff; font-weight:500;
  box-shadow:0 12px 28px -12px rgba(168,93,110,.6);
}
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -12px rgba(168,93,110,.7); }
.btn--ghost{ border-color:var(--rose); color:var(--rose-deep); background:transparent; }
.btn--ghost:hover{ background:var(--rose); color:#fff; transform:translateY(-3px); }
.btn--dark{ background:var(--plum); color:var(--cream); }
.btn--dark:hover{ background:#4a3540; transform:translateY(-3px); }

/* ---------- floral divider ---------- */
.topbar__songket,
.book__songket{
  height:12px; width:100%;
  background-image:
    repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 14px);
  background-position:center;
  opacity:.4;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
}

/* ---------- top announcement bar ---------- */
.topbar{
  background:var(--blush);
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:1.25rem; padding:.55rem var(--pad);
}
.topbar p{
  flex:0 0 auto; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); text-align:center; margin:0 auto;
}
.topbar p em{ color:var(--rose); font-style:normal; }
.topbar__songket{ flex:1; max-width:140px; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  background:rgba(251,245,240,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.is-scrolled{ border-bottom-color:var(--line); background:rgba(251,245,240,.96); }
.nav__brand{
  font-family:var(--serif); font-size:1.6rem; font-weight:600;
  letter-spacing:.02em; color:var(--plum);
}
.nav__brand::first-letter{ color:var(--rose); }
.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links a{
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); transition:color .2s ease;
}
.nav__links a:hover{ color:var(--rose); }
.nav__cta{
  border:1px solid var(--rose); padding:.6rem 1.1rem; border-radius:30px;
  color:var(--rose-deep)!important;
}
.nav__cta:hover{ background:var(--rose); color:#fff!important; }
.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav__toggle span{ width:26px; height:2px; background:var(--plum); transition:.3s; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:clamp(3rem,7vw,6rem) var(--pad) clamp(4rem,8vw,7rem);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(201,125,140,.16) 0%, transparent 55%),
    radial-gradient(90% 80% at 10% 100%, rgba(156,174,150,.16) 0%, transparent 50%),
    linear-gradient(180deg, var(--cream) 0%, var(--blush) 100%);
  overflow:hidden;
}
.hero__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.hero__title{
  font-family:var(--serif); font-size:clamp(3.6rem, 11vw, 7rem);
  font-weight:600; line-height:.95; letter-spacing:.01em;
  margin:.2rem 0 .6rem; color:var(--plum);
}
.hero__title::first-letter{ color:var(--rose); }
.hero__tagline{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.4rem,3.4vw,2rem); color:var(--rose-deep); margin-bottom:1.4rem;
}
.hero__sub{ color:var(--text); font-size:1.02rem; max-width:34ch; margin-bottom:2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; }
.hero__loc{ font-size:.82rem; letter-spacing:.08em; color:var(--muted); }

.hero__media{ position:relative; }
.hero__frame{
  position:relative; z-index:2; border-radius:6px; overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(168,93,110,.55), 0 0 0 1px var(--line-soft);
  transform:rotate(-1.2deg); transition:transform .5s ease;
  background:#fff;
}
.hero__frame:hover{ transform:rotate(0deg) scale(1.01); }
.hero__frame img{ width:100%; }
.hero__glow{
  position:absolute; inset:-12%;
  background:radial-gradient(circle at 50% 40%, rgba(220,193,145,.35), transparent 65%);
  z-index:1; filter:blur(10px);
}

/* ---------- about ---------- */
.about{ padding:clamp(4rem,8vw,7rem) var(--pad); background:var(--blush); border-block:1px solid var(--line-soft); }
.about__inner{ max-width:760px; margin:0 auto; text-align:center; }
.about__head{ margin-bottom:2.2rem; }
.about__body{ font-size:clamp(1.1rem,2.4vw,1.4rem); font-family:var(--serif); line-height:1.7; color:var(--plum); margin-bottom:1.3rem; }
.about__body--en{ color:var(--text); }

/* ---------- gallery ---------- */
.gallery{ padding:clamp(4rem,8vw,7rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.gallery__head{ text-align:center; margin-bottom:3rem; }
.gallery__note{ color:var(--muted); margin-top:.8rem; font-size:.95rem; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.card{
  position:relative; overflow:hidden; border-radius:8px; background:#fff;
  box-shadow:0 14px 30px -20px rgba(168,93,110,.45), 0 0 0 1px var(--line-soft);
  cursor:pointer; transition:transform .35s ease, box-shadow .35s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 26px 46px -22px rgba(168,93,110,.55); }
.card img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover img{ transform:scale(1.04); }
.gallery__cta{ text-align:center; margin-top:3rem; }

/* ---------- why ---------- */
.why{ padding:clamp(4rem,8vw,7rem) var(--pad); background:var(--blush); border-block:1px solid var(--line-soft); }
.why__inner{ max-width:var(--maxw); margin:0 auto; }
.why__head{ text-align:center; margin-bottom:3rem; }
.why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.feature{
  text-align:center; padding:2.2rem 1.4rem;
  border:1px solid var(--line-soft); border-radius:10px;
  background:linear-gradient(180deg, #fff, var(--cream));
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.feature:hover{ transform:translateY(-6px); border-color:var(--rose); box-shadow:0 18px 34px -22px rgba(168,93,110,.5); }
.feature__icon{ display:block; font-size:1.7rem; color:var(--rose); margin-bottom:1rem; }
.feature h3{ font-family:var(--serif); font-weight:600; font-size:1.4rem; margin-bottom:.5rem; color:var(--plum); }
.feature p{ font-size:.9rem; color:var(--text); }

/* ---------- booking ---------- */
.book{ position:relative; background:linear-gradient(180deg, var(--blush) 0%, var(--blush-2) 100%); }
.book__inner{ max-width:680px; margin:0 auto; text-align:center; padding:clamp(4rem,9vw,7rem) var(--pad); }
.book__title{ margin:.4rem 0 1.2rem; }
.book__sub{ color:var(--text); margin-bottom:2.2rem; }
.book__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:1.8rem; }
.book__loc{ font-size:.82rem; letter-spacing:.08em; color:var(--muted); }

/* ---------- footer ---------- */
.footer{ background:var(--blush-2); border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) var(--pad) 2rem; }
.footer__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid var(--line);
}
.footer__logo{ font-family:var(--serif); font-size:1.8rem; font-weight:600; color:var(--plum); }
.footer__logo::first-letter{ color:var(--rose); }
.footer__brand p{ color:var(--rose-deep); font-style:italic; font-family:var(--serif); margin-top:.4rem; }
.footer__col h4{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose); margin-bottom:1rem; font-weight:500; }
.footer__col a, .footer__col p{ display:block; color:var(--text); font-size:.92rem; margin-bottom:.5rem; transition:color .2s; }
.footer__col a:hover{ color:var(--rose); }
.footer__copy{ text-align:center; color:var(--muted); font-size:.78rem; letter-spacing:.08em; margin-top:1.8rem; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(94,70,80,.92);
  display:flex; align-items:center; justify-content:center;
  padding:2rem; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:min(92vw,560px); max-height:88vh; border-radius:6px; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
.lightbox__close{
  position:absolute; top:1.4rem; right:1.6rem;
  font-size:2rem; color:#fff; background:none; border:0; cursor:pointer; line-height:1;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 900px){
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__text{ order:2; }
  .hero__media{ order:1; max-width:440px; margin:0 auto; }
  .hero__sub{ margin-inline:auto; }
  .hero__actions{ justify-content:center; }
  .why__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width: 640px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .nav__links.is-open{ max-height:360px; }
  .nav__links a{ width:100%; padding:1rem var(--pad); border-top:1px solid var(--line-soft); }
  .nav__cta{ border:0!important; }
  .grid{ grid-template-columns:1fr 1fr; }
  .topbar p{ font-size:.6rem; letter-spacing:.14em; }
  .topbar__songket{ display:none; }

  /* Hero — remove rotation (causes overflow on phone) & reduce title size */
  .hero__frame{ transform:none; }
  .hero__frame:hover{ transform:scale(1.015); }
  .hero__title{ font-size:clamp(2.6rem, 14vw, 3.6rem); }
  .hero__tagline{ font-size:clamp(1.15rem, 4.5vw, 1.6rem); }
  .hero__sub{ font-size:.96rem; }

  /* Lightbox */
  .lightbox{ padding:.75rem; }
  .lightbox img{ max-width:96vw; max-height:84vh; }
  .lightbox__close{ top:.8rem; right:1rem; }
}
@media (max-width: 480px){
  .why__grid{ grid-template-columns:1fr; }
  .feature{ padding:1.5rem 1.2rem; }
}
@media (max-width: 420px){
  .grid{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; gap:2rem; }
  .btn{ width:100%; text-align:center; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .book__actions{ flex-direction:column; align-items:stretch; }
  .topbar{ gap:.4rem; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}