/* =========================================================
   Layan & Karam — white & wine, tatreez theme
   KK Moments demo 2
   ========================================================= */

/* ===== tokens ===== */
:root{
  --paper:#FFFFFF;
  --paper-2:#FBF6F3;      /* faintest warm tint for panels */
  --ink:#3B1218;          /* body text — deep maroon-black */
  --ink-64:rgba(59,18,24,.66);
  --ink-40:rgba(59,18,24,.44);
  --wine:#7B1E2B;         /* primary maroon */
  --wine-deep:#5A1420;
  --thread:#B4262E;       /* the embroidery red */
  --line:rgba(123,30,43,.16);
  --line-2:rgba(123,30,43,.28);

  --display:'Marcellus', Georgia, serif;
  --body:'Karla', system-ui, -apple-system, sans-serif;
  --ar-display:'Aref Ruqaa', 'Times New Roman', serif;
  --ar-ui:'Reem Kufi', system-ui, sans-serif;

  --section-pad:clamp(76px, 11vw, 148px);
  --container:1120px;
  --measure:720px;        /* comfortable reading width, independent of container */
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;   /* stricter than hidden — stops touch drift inside an iframe */
  max-width:100%;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; margin:0; color:var(--wine-deep); }
button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }
::selection{ background:var(--wine); color:#fff; }
:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; border-radius:2px; }

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

/* ===== shared ===== */
.section-inner{ max-width:var(--container); margin:0 auto; padding:0 24px; text-align:center; }
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--thread);
}
.section-title{ font-size:clamp(30px,4.6vw,50px); line-height:1.14; margin:14px 0 0; }
.lede{ font-size:clamp(15px,1.5vw,17px); color:var(--ink-64); max-width:58ch; margin:18px auto 0; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
.btn-row--center{ justify-content:center; margin-top:34px; }

[data-reveal],[data-step],[data-card],[data-note],[data-hero]{ opacity:0; }

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  padding:15px 28px; border-radius:2px; cursor:pointer;
  border:1px solid var(--wine); color:var(--wine);
  transition:background .35s ease, color .35s ease, border-color .35s ease, transform .5s var(--ease);
}
.btn:hover{ background:var(--wine); color:#fff; transform:translateY(-3px); }
.btn--solid{ background:var(--wine); color:#fff; }
.btn--solid:hover{ background:var(--wine-deep); border-color:var(--wine-deep); }
.btn--quiet{ border-color:var(--line-2); color:var(--ink-64); }
.btn--quiet:hover{ background:transparent; border-color:var(--wine); color:var(--wine); }
/* on wine backgrounds */
.btn--light{ background:#fff; border-color:#fff; color:var(--wine); }
.btn--light:hover{ background:var(--paper-2); border-color:var(--paper-2); color:var(--wine-deep); }
.btn--ghost{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--wine); border-color:#fff; }

/* ===== paper grain ===== */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9990;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== loader ===== */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
}
.loader.is-hidden{ opacity:0; visibility:hidden; }
.loader__text{ font-family:var(--ar-display); font-size:22px; color:var(--wine); opacity:0; }

/* ===== the flower (stitch-loop signature) ===== */
.flower{ width:clamp(120px,17vw,150px); margin:0 auto 30px; }
.flower--sm{ width:96px; margin-bottom:0; }
.flower svg{ width:100%; height:auto; }
.flower rect{ transform-box:fill-box; transform-origin:center; }

/* ===== nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500; padding:20px 0;
  border-bottom:1px solid transparent;
  transition:background .5s ease, padding .5s ease, border-color .5s ease;
}
.nav.is-scrolled{
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  padding:12px 0; border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav__logo{ font-family:var(--ar-display); font-size:20px; color:var(--wine); }
.nav__links{ list-style:none; display:flex; align-items:center; gap:26px; margin:0; padding:0; }
.nav__links a{
  position:relative; padding-bottom:4px;
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-64);
  transition:color .3s ease;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--thread); transition:width .45s var(--ease);
}
.nav__links a:hover{ color:var(--wine); }
.nav__links a:hover::after{ width:100%; }
.nav__links .nav__cta{ color:#fff; background:var(--wine); padding:10px 18px; border-radius:2px; }
.nav__links .nav__cta::after{ display:none; }
.nav__links .nav__cta:hover{ background:var(--wine-deep); color:#fff; }
.nav__toggle{ display:none; flex-direction:column; gap:5px; width:26px; z-index:60; }
.nav__toggle span{
  display:block; width:100%; height:1px; background:var(--wine);
  transition:transform .4s var(--ease), opacity .3s ease;
}
.nav__toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:860px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px;
    background:var(--paper); padding:40px; border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .6s var(--ease);
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{ font-size:14px; }
}

/* ===== embroidery band (horizontal divider) ===== */
.band{
  width:100%; height:44px;
  background-repeat:repeat-x; background-position:center;
}

/* ===== hero ===== */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  padding:120px 24px 80px; text-align:center; overflow:hidden;
}
/* the two embroidered panels — an endless vertical loop */
.hero__rail{
  --rail-w:88px; --rail-h:144px;
  position:absolute; top:0; bottom:0; width:var(--rail-w); z-index:0;
  background-repeat:repeat-y;
  background-size:var(--rail-w) var(--rail-h);
  animation:railRun 14s linear infinite;
  opacity:.9;
}
.hero__rail--l{ left:clamp(8px,4vw,72px); }
.hero__rail--r{ right:clamp(8px,4vw,72px); animation-direction:reverse; }
@keyframes railRun{ from{ background-position-y:0; } to{ background-position-y:var(--rail-h); } }

.hero__glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 44%, #fff 0%, rgba(255,255,255,.94) 58%, rgba(255,255,255,0) 78%),
    radial-gradient(90% 60% at 50% 108%, rgba(123,30,43,.10) 0%, rgba(123,30,43,0) 70%);
}
.hero__content{ position:relative; z-index:2; max-width:680px; width:100%; }
.hero__names{ margin:0; }
.hero__ar{
  display:block; color:var(--wine-deep);
  font-family:var(--ar-display); font-size:clamp(50px,11.5vw,110px); line-height:1.28;
}
.hero__and{ display:flex; align-items:center; justify-content:center; gap:16px; max-width:260px; margin:6px auto; }
.hero__and span{ font-family:var(--ar-display); font-size:26px; color:var(--thread); }
.hero__and i{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); }
.hero__latin{
  margin:22px 0 0; font-family:var(--display);
  font-size:clamp(13px,1.7vw,17px); letter-spacing:.42em; text-transform:uppercase; color:var(--ink-64);
}
.hero__latin .ch{ display:inline-block; }
.hero__meta{
  margin:32px 0 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 14px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-64);
}
.hero__meta b{ color:var(--wine); font-weight:600; }
.dot{ width:4px; height:4px; background:var(--thread); }
.hero__content .btn{ margin-top:36px; }
.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.hero__scroll span{ position:relative; width:1px; height:38px; background:var(--line); overflow:hidden; }
.hero__scroll span::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--thread); animation:scrollLine 2.3s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{top:-100%} 60%{top:100%} 100%{top:100%} }
.hero__scroll p{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-40); }

@media (max-width:900px){
  .hero__rail{ --rail-w:56px; --rail-h:92px; opacity:.55; }
  .hero__rail--l{ left:0; }
  .hero__rail--r{ right:0; }
}
@media (max-width:560px){
  .hero__rail{ --rail-w:38px; --rail-h:62px; opacity:.45; }
}

/* ===== pinned invitation ===== */
.pin{ position:relative; }
.pin__stage{ padding:var(--section-pad) 0; }
.pin__track{ position:relative; margin-top:38px; }
.pin__para{ max-width:720px; margin:0 auto; }
.pin__para + .pin__para{ margin-top:40px; }
/* Pinned state.
   Flex column, not `place-items:center` — that shrink-wraps
   .section-inner to its widest in-flow child, and while pinned the
   paragraphs are absolute, so the only in-flow text is the eyebrow.
   The column collapses to ~230px and the copy breaks one word per line. */
.pin.is-pinned .pin__stage{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(96px,12vh,140px) 0 clamp(56px,8vh,96px);
}
.pin.is-pinned .section-inner{ width:100%; }
.pin.is-pinned .pin__track{ min-height:clamp(300px,36vh,440px); }
.pin.is-pinned .pin__para{
  position:absolute; top:0; bottom:0; left:0; right:0;
  display:grid; align-content:center;
  max-width:720px; margin-inline:auto;   /* auto margins centre it inside left:0/right:0 */
}
.pin.is-pinned .pin__para + .pin__para{ margin-top:0; }
.fam{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:8px 20px; margin-bottom:26px;
}
.fam span{ font-family:var(--ar-display); font-size:clamp(22px,3vw,32px); direction:rtl; color:var(--wine); }
.fam em{ font-family:var(--ar-display); font-style:normal; color:var(--thread); font-size:20px; }
.pull{ font-family:var(--display); font-size:clamp(20px,2.4vw,34px); line-height:1.45; color:var(--wine-deep); text-wrap:balance; }
.pin__bar{ width:min(300px,60%); height:1px; background:var(--line); margin:44px auto 0; }
.pin__bar i{ display:block; width:0; height:100%; background:var(--thread); }

/* ===== countdown (inverted) ===== */
.count{
  position:relative; padding:var(--section-pad) 0; overflow:hidden;
  background:var(--wine); color:#fff;
}
.count__weave{
  position:absolute; inset:0; z-index:0; opacity:.14;
  background-repeat:repeat; background-position:center;
  filter:brightness(0) invert(1);
}
.count .section-inner{ position:relative; z-index:1; }
.count .eyebrow{ color:rgba(255,255,255,.72); }
.count .section-title{ color:#fff; }
.count__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:rgba(255,255,255,.24); margin-top:46px;
}
.count__unit{ background:var(--wine); padding:clamp(20px,3.4vw,34px) 10px; }
.count__unit b{
  display:block; font-family:var(--display); color:#fff;
  font-size:clamp(34px,7vw,64px); line-height:1; font-variant-numeric:tabular-nums;
}
.count__unit span{
  display:block; margin-top:12px; font-size:10px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}
.count__unit em{
  display:block; margin-top:3px; font-family:var(--ar-ui); font-style:normal;
  font-size:13px; color:rgba(255,255,255,.85);
}

/* ===== programme / timeline ===== */
.prog{ padding:var(--section-pad) 0; }
.timeline{ position:relative; max-width:920px; margin:64px auto 0; padding:0 24px; }
.timeline__line{
  position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); transform:translateX(-50%);
}
.timeline__line i{ display:block; width:100%; height:0; background:var(--thread); }
.timeline__item{ position:relative; width:50%; padding:0 46px 60px 0; text-align:right; }
.timeline__item--right{ width:50%; margin-left:50%; padding:0 0 60px 46px; text-align:left; }
.timeline__dot{
  position:absolute; top:6px; right:-5px; width:10px; height:10px;
  background:var(--thread); box-shadow:0 0 0 5px var(--paper);
}
.timeline__item--right .timeline__dot{ left:-5px; right:auto; }
.timeline__time{
  display:inline-block; margin-bottom:8px; font-family:var(--display);
  font-size:16px; letter-spacing:.1em; color:var(--thread);
}
.timeline__card h3{ font-size:clamp(19px,2.3vw,25px); }
.timeline__card h3 em{
  font-family:var(--ar-ui); font-style:normal; font-size:15px; color:var(--ink-40); margin-inline-start:10px;
}
.timeline__card p{ margin-top:8px; font-size:15px; color:var(--ink-64); }

@media (max-width:760px){
  .timeline__line{ left:9px; transform:none; }
  .timeline__item,.timeline__item--right{ width:100%; margin-left:0; text-align:left; padding:0 0 44px 40px; }
  .timeline__dot,.timeline__item--right .timeline__dot{ left:4px; right:auto; }
}

/* ===== venue ===== */
.venue{ padding:var(--section-pad) 0; background:var(--paper-2); }
.venue__grid{
  max-width:var(--container); margin:52px auto 0; padding:0 24px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:clamp(20px,3vw,32px);
}
.card{
  position:relative; background:var(--paper); border:1px solid var(--line);
  padding:clamp(24px,3.2vw,38px); text-align:left;
  transition:border-color .4s ease, box-shadow .4s ease, transform .5s var(--ease);
}
.card:hover{ border-color:var(--line-2); box-shadow:0 18px 40px -28px rgba(90,20,32,.5); transform:translateY(-3px); }
.card__corner{ position:absolute; top:14px; right:14px; }
.card h3{ margin-top:14px; font-size:clamp(21px,2.6vw,27px); }
.card__ar{ margin-top:6px; font-family:var(--ar-ui); font-size:15px; color:var(--thread); direction:rtl; }
.card address{ margin-top:16px; font-style:normal; font-size:15px; color:var(--ink-64); }
.card__when{
  margin:18px 0 22px; padding-top:18px; border-top:1px solid var(--line);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--wine);
}
.mapbox{
  max-width:var(--container); margin:clamp(24px,3vw,36px) auto 0;
  border:1px solid var(--line); background:var(--paper); overflow:hidden;
}
.mapbox__art{ width:100%; height:clamp(180px,26vw,264px); }
.mapbox__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  padding:20px clamp(18px,3vw,28px); border-top:1px solid var(--line); text-align:left;
}
.mapbox__foot p{ font-size:14px; color:var(--ink-64); max-width:46ch; }
@media (max-width:1180px){ .mapbox{ margin-left:24px; margin-right:24px; } }

/* ===== moments ===== */
.moments{ padding:var(--section-pad) 0; }
.moments__grid{
  max-width:var(--container); margin:52px auto 0; padding:0 24px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:clamp(14px,2vw,22px);
}
.moment{
  margin:0; padding:20px; background:var(--paper); border:1px solid var(--line);
  transition:border-color .4s ease, background .4s ease;
}
.moment:hover{ border-color:var(--line-2); background:var(--paper-2); }
.moment__art{ height:150px; display:grid; place-items:center; }
.moment h4{ margin-top:16px; font-size:18px; }
.moment p{ margin-top:5px; font-size:13px; color:var(--ink-40); }

/* ===== notes ===== */
.notes{ padding:0 0 var(--section-pad); }
.notes__grid{
  max-width:var(--container); margin:52px auto 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:1px;
  background:var(--line); border-block:1px solid var(--line);
}
.note{ background:var(--paper); padding:clamp(22px,3vw,32px); text-align:left; }
.note h4{ margin-top:12px; font-size:19px; }
.note p{ margin-top:8px; font-size:14px; color:var(--ink-64); }

/* ===== rsvp ===== */
.rsvp{ padding:var(--section-pad) 0; background:var(--paper-2); border-top:1px solid var(--line); }
.form{ max-width:680px; margin:46px auto 0; padding:0 24px; text-align:left; }
.field{ margin-bottom:24px; }
.field label{
  display:block; margin-bottom:9px; font-size:11px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-64);
}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:2px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--wine); box-shadow:0 0 0 3px rgba(123,30,43,.10); outline:none;
}
.field textarea{ min-height:104px; resize:vertical; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--wine) 50%),
                   linear-gradient(135deg,var(--wine) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px; background-repeat:no-repeat;
}
.field-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:0 20px; }
.choice{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice label{
  margin:0; padding:16px 12px; text-align:center; cursor:pointer; background:var(--paper);
  border:1px solid var(--line-2); border-radius:2px; letter-spacing:.16em; color:var(--ink-64);
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.choice input:checked + label{ border-color:var(--wine); color:var(--wine); background:rgba(123,30,43,.06); }
.choice input:focus-visible + label{ outline:2px solid var(--wine); outline-offset:3px; }
.form__err{ min-height:18px; margin:-14px 0 18px; font-size:13px; color:var(--thread); }
.form__note{ margin:0 0 26px; font-size:13px; color:var(--ink-40); }

.thanks{ display:none; max-width:560px; margin:0 auto; padding:0 24px; text-align:center; }
.thanks.is-on{ display:block; }
.thanks h3{ margin-top:22px; font-size:clamp(24px,3.4vw,34px); }
.thanks p{ margin:12px auto 0; color:var(--ink-64); }

/* ===== footer ===== */
.footer{ padding:58px 24px 44px; text-align:center; }
.footer__names{ font-family:var(--ar-display); font-size:26px; color:var(--wine); }
.footer__date,.footer__by{
  margin-top:12px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-40);
}
.footer__by a{ color:var(--wine); }
.footer__by a:hover{ text-decoration:underline; }

@media (max-width:640px){
  .count__grid{ grid-template-columns:repeat(2,1fr); }
}