/* ============================================================
   SK WEDDING SITES - Section layouts (v3)
   Extra layouts per section + per-section background/spacing.
   Loaded by the builder AND the published guest page, after
   builder.css / sk-cinematic.css. Everything is scoped to .ws.
   ============================================================ */

/* ---------- per-section background + spacing ---------- */
.ws .ws-sp-snug .ws-sec,.ws .ws-sec.ws-sp-snug{padding:clamp(34px,5vh,64px) 0}
.ws .ws-sp-roomy .ws-sec,.ws .ws-sec.ws-sp-roomy{padding:clamp(96px,14vh,180px) 0}
.ws .ws-bg-tint .ws-sec,.ws .ws-sec.ws-bg-tint{background:color-mix(in srgb,var(--ws-ink) 5%,var(--ws-bg))}
.ws .ws-bg-accent,.ws .ws-sec.ws-bg-accent{--ws-acc-bg:var(--ws-accent);--ws-acc-ink:var(--ws-accent-ink)}
.ws .ws-bg-accent .ws-sec,.ws .ws-sec.ws-bg-accent{background:var(--ws-acc-bg)}
.ws .ws-bg-accent .ws-sec>.ws-wrap,.ws .ws-sec.ws-bg-accent>.ws-wrap{
  --ws-ink:var(--ws-acc-ink);--ws-dim:color-mix(in srgb,var(--ws-acc-ink) 78%,transparent);
  --ws-faint:color-mix(in srgb,var(--ws-acc-ink) 55%,transparent);--ws-line:color-mix(in srgb,var(--ws-acc-ink) 22%,transparent);
  --ws-bg:var(--ws-acc-bg);--ws-surface:color-mix(in srgb,var(--ws-acc-ink) 8%,var(--ws-acc-bg));
  --ws-accent:var(--ws-acc-ink);--ws-accent-ink:var(--ws-acc-bg);color:var(--ws-acc-ink)}

/* ---------- COVER: photo carousel (continuous marquee) ---------- */
.ws-hero.hs-marquee{min-height:auto;display:block;padding:clamp(70px,11vh,130px) 0 clamp(50px,8vh,90px);background:var(--ws-bg)}
.ws-hero.hs-marquee .ws-hero-in{padding:0 40px}
.ws-hero.hs-marquee .h-names{font-size:clamp(50px,8vw,112px)}
.hs-mq{overflow:hidden;margin:clamp(34px,5vh,56px) 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hs-mq-track{display:flex;width:max-content;animation:wsmq var(--mq-speed,40s) linear infinite}
.hs-mq-dup{display:flex}
.hs-mq-cell{flex:none;width:clamp(170px,19vw,280px);aspect-ratio:4/5;margin-right:14px;border-radius:var(--ws-radius);overflow:hidden;background:var(--ws-surface)}
.hs-mq:hover .hs-mq-track{animation-play-state:paused}
.hs-still .hs-mq-track{animation:none}
.hs-still .hs-mq-dup{display:none}
.hs-still .hs-mq{overflow-x:auto;scrollbar-width:none}
.ws-motion-off .hs-mq-track{animation:none}
@keyframes wsmq{to{transform:translateX(-50%)}}
.ws-mobile .hs-mq-cell{width:150px;margin-right:10px}
.ws-hero.hs-marquee .h-cta{padding:0 20px}

/* ---------- COVER: invitation card over a photo ---------- */
.ws-hero.hs-invite{min-height:var(--ws-hero-h,92vh);padding:60px 20px}
.hs-inv-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.hs-inv{width:min(460px,100%);background:#F7F1E6;color:#3A2C22;border-radius:6px;padding:14px;box-shadow:0 34px 70px rgba(0,0,0,.45)}
.hs-inv-in{border:1px solid rgba(160,127,30,.55);outline:1px solid rgba(160,127,30,.3);outline-offset:-7px;padding:clamp(28px,5vw,46px) clamp(18px,4vw,34px);text-align:center;
  --ws-ink:#2A2018;--ws-dim:#5a4a3c;--ws-faint:#7a6650;--ws-accent:#A07F1E;color:#2A2018}
.ws .hs-inv .eyebrow{color:#7a6650;font-size:12px}
.ws-hero.hs-invite .h-names{font-size:clamp(44px,6vw,72px);color:#2A2018;margin-top:12px}
.hs-rule{width:44px;height:1px;background:var(--ws-accent);margin:18px auto;opacity:.8}
.hs-inv-line{font-size:18px;line-height:1.55;color:#5a4a3c;margin:0}
.hs-inv-date{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#7a6650}
.hs-inv-city{font-size:18px;margin-top:4px;color:#3A2C22}
.ws-hero.hs-invite .h-cta{margin-top:26px}

/* ---------- COVER: arch portrait ---------- */
.ws-hero.hs-arch{min-height:auto;padding:clamp(60px,9vh,110px) 0;background:var(--ws-bg)}
.hs-arch-photo{width:min(320px,70%);aspect-ratio:3/4;margin:0 auto 30px;border-radius:999px 999px 14px 14px;overflow:hidden;background:var(--ws-surface);border:1px solid var(--ws-line)}
.ws-hero.hs-arch .h-names{font-size:clamp(46px,7vw,96px)}

/* ---------- WELCOME ---------- */
.wl-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center;max-width:920px;margin:0 auto}
.wl-photo{aspect-ratio:4/5;border-radius:var(--ws-radius);overflow:hidden;background:var(--ws-surface)}
.ws-welcome.wl-side .s-head{text-align:left;margin:0}
.ws-welcome.wl-quote .wl-q{margin:0}
.ws-welcome.wl-quote .wl-q h2{font-size:clamp(36px,5.4vw,64px);line-height:1.08}
.ws-welcome.wl-quote .wl-q h2::before{content:"\201C"}.ws-welcome.wl-quote .wl-q h2::after{content:"\201D"}
.wl-sig{margin-top:22px;font-family:var(--ws-display);font-style:var(--ws-h-style);font-size:26px;color:var(--ws-accent)}
.ws-mobile .wl-grid{grid-template-columns:1fr}.ws-mobile .ws-welcome.wl-side .s-head{text-align:center}

/* ---------- STORY ---------- */
.ws-tl2{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:30px;position:relative}
.tl2-ch{display:grid;grid-template-columns:140px 1fr;gap:26px;align-items:center}
.tl2-img{aspect-ratio:1;border-radius:var(--ws-radius);overflow:hidden;background:var(--ws-surface)}
.ws-tl2 .st-yr,.ws-polas .pola-cap{font-family:var(--ws-display);font-style:var(--ws-h-style);color:var(--ws-accent);font-size:24px}
.ws-tl2 .st-t{font-family:var(--ws-display);font-style:var(--ws-h-style);font-size:28px;line-height:1.1}
.ws-tl2 .st-b{color:var(--ws-dim);margin-top:6px}
.ws-letter{max-width:620px;margin:0 auto;padding:clamp(28px,5vw,52px);border:1px solid var(--ws-line);border-radius:var(--ws-radius);background:color-mix(in srgb,var(--ws-ink) 4%,transparent);color:var(--ws-dim);font-size:21px;line-height:1.7}
.ws-letter p{margin:0 0 18px}.ws-letter b{color:var(--ws-ink);font-weight:500}
.lt-sig{font-family:var(--ws-display);font-style:var(--ws-h-style);font-size:36px;color:var(--ws-ink);margin-top:8px}
.ws-polas{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.pola{width:250px;background:#F7F1E6;color:#3A2C22;padding:12px 12px 18px;box-shadow:0 18px 40px rgba(0,0,0,.3)}
.pola:nth-child(3n+1){transform:rotate(-2.5deg)}.pola:nth-child(3n+2){transform:rotate(2deg) translateY(10px)}.pola:nth-child(3n){transform:rotate(-1deg)}
.pola-img{aspect-ratio:1;overflow:hidden;background:#e9e0d0}
.ws .pola .pola-cap{color:#A07F1E;text-align:center;margin-top:10px}
.pola-txt{font-size:16.5px;line-height:1.5;color:#5a4a3c;margin-top:4px;text-align:center}
.pola-txt b{display:block;color:#2A2018;font-weight:500}
.ws-mobile .tl2-ch{grid-template-columns:96px 1fr;gap:16px}.ws-mobile .pola{width:min(250px,80%)}

/* ---------- EVENTS ---------- */
.ws-evline{border-left:1px solid var(--ws-line);padding-left:30px;gap:26px}
.ws-evline .ws-event{position:relative;border:0;padding:0;background:none;grid-template-columns:130px 1fr}
.ws-evline .ws-event::before{content:"";position:absolute;left:-37px;top:8px;width:13px;height:13px;border-radius:50%;background:var(--ws-bg);border:2px solid var(--ws-accent)}
.ws-daytabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 26px}
.ws-daytab{font-family:var(--ws-body);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--ws-dim);border:1px solid var(--ws-line);border-radius:999px;padding:10px 18px;background:none;cursor:pointer}
.ws-daytab.on{background:var(--ws-accent);border-color:var(--ws-accent);color:var(--ws-accent-ink)}
.ws-daypane{display:none}.ws-daypane.on{display:block}
.ws-mobile .ws-evline .ws-event{grid-template-columns:1fr}

/* ---------- GALLERY ---------- */
.ws-gal.gs-grid .g-cell.tall{grid-row:auto;aspect-ratio:1}
.ws-gal.gs-slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;scrollbar-width:none;padding-bottom:4px}
.ws-gal.gs-slider::-webkit-scrollbar{display:none}
.ws-gal.gs-slider .g-cell{flex:none;width:min(560px,80%);aspect-ratio:4/5;scroll-snap-align:center}
.ws-gal.gs-slider .g-cell.tall{grid-row:auto;aspect-ratio:4/5}
.gs-hint{text-align:center;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--ws-faint);margin-top:14px}
.ws-gstrip{overflow:hidden;margin:0 -40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ws-gal.gs-strip{display:flex;gap:0;width:max-content;animation:wsmq 60s linear infinite}
.ws-gal.gs-strip .gs-dup{display:flex}
.ws-gal.gs-strip .g-cell{flex:none;width:240px;aspect-ratio:3/4;margin-right:12px}
.ws-gal.gs-strip .g-cell.tall{grid-row:auto;aspect-ratio:3/4}
.ws-gstrip:hover .gs-strip{animation-play-state:paused}
.ws-motion-off .ws-gal.gs-strip{animation:none}
.ws-mobile .ws-gal.gs-strip .g-cell{width:170px}

/* ---------- REGISTRY / FAQ ---------- */
.ws-reg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:760px;margin:8px auto 0}
.reg-card{display:flex;flex-direction:column;gap:8px;padding:26px;border:1px solid var(--ws-line);border-radius:var(--ws-radius);background:color-mix(in srgb,var(--ws-ink) 4%,transparent);text-align:left;color:var(--ws-ink);text-decoration:none}
.reg-card .rc-n{font-family:var(--ws-display);font-style:var(--ws-h-style);font-size:28px;line-height:1.1}
.reg-card .rc-go{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ws-accent)}
.ws-faq.fs-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:880px}
.ws-faq.fs-cards .fq{border:1px solid var(--ws-line);border-radius:var(--ws-radius);padding:22px 24px}
.ws-faq.fs-accordion summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.ws-faq.fs-accordion summary::-webkit-details-marker{display:none}
.ws-faq.fs-accordion summary::after{content:"+";color:var(--ws-accent);transition:transform .2s}
.ws-faq.fs-accordion details[open] summary::after{transform:rotate(45deg)}
.ws-mobile .ws-faq.fs-cards{grid-template-columns:1fr}

/* ---------- RSVP: printed reply card ---------- */
.ws-reply{max-width:620px;margin:0 auto;background:#F7F1E6;border-radius:6px;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.ws-reply-in{border:1px solid rgba(160,127,30,.55);outline:1px solid rgba(160,127,30,.3);outline-offset:-7px;padding:clamp(26px,5vw,44px) clamp(18px,4vw,36px);text-align:center;
  --ws-bg:#F7F1E6;--ws-surface:#FFFDF8;--ws-ink:#2A2018;--ws-dim:#5a4a3c;--ws-faint:#7a6650;--ws-line:rgba(90,70,50,.22);--ws-accent:#A07F1E;--ws-accent-ink:#fff;color:#2A2018}
.rp-k{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#7a6650}
.rp-n{font-family:var(--ws-display);font-style:var(--ws-h-style);font-size:40px;line-height:1.05;margin-top:8px}
.ws-reply .ws-rsvp{text-align:left}

/* ---------- real phones (guest site) ---------- */
@media (max-width:640px){
  .hs-mq-cell{width:150px;margin-right:10px}
  .ws-hero.hs-marquee .ws-hero-in{padding:0 22px}
  .wl-grid{grid-template-columns:1fr}.ws-welcome.wl-side .s-head{text-align:center}
  .tl2-ch{grid-template-columns:96px 1fr;gap:16px}
  .ws-evline .ws-event{grid-template-columns:1fr}
  .ws-gstrip{margin:0 -22px}.ws-gal.gs-strip .g-cell{width:170px}
  .ws-faq.fs-cards{grid-template-columns:1fr}
  .pola{width:min(250px,80%)}
}
@media (prefers-reduced-motion:reduce){.hs-mq-track,.ws-gal.gs-strip{animation:none}}

/* guest gallery tab: paged, so a big collection doesn't land all at once */
.ws-gmore{display:flex;justify-content:center;margin-top:22px}
.ws-gmore:empty{display:none}
.ws-gal .g-cell>a{display:block;width:100%;height:100%}

/* ---------- HEADER: masthead (Riviera) ----------
   Date, place and hashtag on a thin top line, the names set large, the pages
   centered under them. It stays in the page flow (not sticky): it's tall. */
.ws-nav.ws-nav-mast{position:sticky;top:var(--mast-top,0px);display:grid;grid-template-columns:1fr;justify-items:center;gap:0;padding:0 0 14px;border-bottom:none}
.ws-nav-mast .mast-top{justify-self:stretch;display:flex;justify-content:space-between;gap:18px;padding:14px clamp(18px,2.4vw,34px) 0;font-family:var(--ws-body);font-size:15px;color:var(--ws-ink)}
.ws-nav-mast .mast-l span+span{margin-left:clamp(20px,3vw,48px)}
.ws-nav-mast .ws-mono{font-size:clamp(40px,4.4vw,64px);font-style:normal;text-transform:uppercase;letter-spacing:.005em;line-height:1;margin:clamp(18px,2.6vh,28px) 0 clamp(20px,3vh,32px);text-align:center}
.ws-nav-mast .ws-links{justify-content:center;gap:clamp(16px,1.8vw,26px)}
.ws-nav-mast .ws-links a{font-size:17px;letter-spacing:0;text-transform:none;color:var(--ws-ink);padding-bottom:9px;border-bottom:3px solid transparent}
.ws-nav-mast .ws-links a:hover{color:var(--ws-ink);border-bottom-color:var(--ws-line)}
.ws-nav-mast .ws-links a.on{color:var(--ws-ink);border-bottom-color:var(--ws-ink)}
.ws-lay-reel .ws-nav.ws-nav-mast{position:relative}
.ws-mobile .ws-nav.ws-nav-mast,.ws-mobile .ws-nav-mast{grid-template-columns:1fr auto;justify-items:start;align-items:center;padding:0 18px 12px}
.ws-mobile .ws-nav-mast .mast-top{grid-column:1/-1;padding:10px 0 0;font-size:12px}
.ws-mobile .ws-nav-mast .mast-l span+span{margin-left:14px}
.ws-mobile .ws-nav-mast .ws-mono{font-size:28px;margin:12px 0 0;text-align:left}
.ws-mobile .ws-nav-mast .ws-links a{padding:14px 22px;border-bottom:none}
@media (max-width:640px){
  .ws-nav.ws-nav-mast{grid-template-columns:1fr auto;justify-items:start;align-items:center;padding:0 18px 12px}
  .ws-nav-mast .mast-top{grid-column:1/-1;padding:10px 0 0;font-size:12px}
  .ws-nav-mast .mast-l span+span{margin-left:14px}
  .ws-nav-mast .ws-mono{font-size:28px;margin:12px 0 0;text-align:left}
  .ws-nav-mast .ws-links a{padding:14px 22px;border-bottom:none}
}

/* ---------- COVER: big photo slides (Riviera) ----------
   Large photos, each its own width, sliding one at a time with the next and
   previous peeking in. Moved by the slides controller in site.js. */
.ws-hero.hs-slides{min-height:auto;display:block;padding:0;background:var(--ws-bg)}
.ws-hero.hs-slides>.ws-hero-in{padding:clamp(56px,9vh,110px) 40px clamp(30px,5vh,52px)}
.ws-hero.hs-slides .h-names{font-size:clamp(50px,8vw,112px)}
.hsl{position:relative;overflow:hidden;outline:none}
.hsl:focus-visible{box-shadow:inset 0 0 0 3px var(--ws-accent)}
.hsl-track{display:flex;gap:6px;width:max-content;transition:transform .95s cubic-bezier(.65,0,.35,1);will-change:transform}
.hsl-slide{flex:none;height:clamp(420px,74vh,880px);overflow:hidden;background:var(--ws-surface)}
.hsl-l{width:min(80vw,1480px)}
.hsl-m{width:min(54vw,1000px)}
.hsl-s{width:min(36vw,660px)}
.hsl-slide image-slot{width:100%;height:100%}
.hsl-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:color-mix(in srgb,var(--ws-bg) 86%,transparent);color:var(--ws-ink);font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.35);opacity:0;transition:opacity .25s}
.hsl-btn.prev{left:18px}.hsl-btn.next{right:18px}
.hsl:hover .hsl-btn,.hsl:focus-within .hsl-btn,.hsl-btn:focus-visible{opacity:1}
@media (hover:none){.hsl-btn{opacity:1;width:40px;height:40px;font-size:26px}}
.ws-hero.hs-slides .h-cta{padding:clamp(24px,4vh,40px) 20px 0;justify-content:center}
/* the builder's phone frame is ~390px inside a wide window, so px, not vw */
.ws-mobile .hsl-slide,.ws-mobile .hsl-l,.ws-mobile .hsl-m,.ws-mobile .hsl-s{width:310px;height:420px}
.ws-mobile .hsl-btn{opacity:1;width:40px;height:40px;font-size:26px}
@media (max-width:640px){
  .hsl-slide,.hsl-l,.hsl-m,.hsl-s{width:84vw;height:62vh;max-height:560px}
  .ws-hero.hs-slides>.ws-hero-in{padding:44px 22px 26px}
}
@media (prefers-reduced-motion:reduce){.hsl-track{transition:none}}
.ws-motion-off .hsl-track{transition:none}

/* ---------- private events: the schedule before a guest opens their invitation,
   and the household's RSVP form (sk-rsvp.js) ---------- */
.ws-locked{max-width:560px;margin:0 auto;text-align:center;padding:34px 26px;border:1px solid var(--ws-line);border-radius:var(--ws-radius,12px);background:var(--ws-surface)}
.ws-locked p{font-family:var(--ws-display);font-style:var(--ws-h-style);font-size:clamp(22px,2.6vw,28px);margin:0 0 8px;color:var(--ws-ink)}
.ws-locked .ws-locked-s{font-family:var(--ws-body);font-style:normal;font-size:17px;line-height:1.55;color:var(--ws-ink);margin:0 0 20px}
.cg-notyou{background:none;border:none;padding:0 0 0 8px;font:inherit;font-size:14px;color:var(--ws-accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cg-ev-mealrow{flex-basis:100%;margin-top:10px}
.cg-ev-mealrow select,.cg-ev-meal{width:100%;max-width:280px;background:var(--ws-bg);border:1px solid var(--ws-line);border-radius:8px;padding:9px 12px;color:var(--ws-ink);font-family:var(--ws-body);font-size:16px}
.cg-ev{flex-wrap:wrap}
.cg-ppl{flex-basis:100%;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cg-pp{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cg-pp-n{font-family:var(--ws-body);font-size:17px;color:var(--ws-ink)}
.ws-preview-bar{position:sticky;top:0;z-index:50;background:#1A1410;color:#F3ECDD;font:14px/1.4 system-ui,sans-serif;padding:10px 16px;text-align:center}
.ws-preview-bar b{color:#E6C766}

/* ===== The Reel: controls, phones, reduced motion (Gate 4, 2026-10-28) ===== */
.ws-lay-reel{position:relative}
.ws-lay-reel .reel-track:focus-visible{outline:2px solid var(--ws-accent);outline-offset:-4px}
.ws-lay-reel .reel-ctl{position:absolute;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,24px);z-index:25;display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--ws-bg) 88%,transparent);border:1px solid var(--ws-line);border-radius:999px;padding:5px 6px;box-shadow:0 6px 20px rgba(0,0,0,.12);backdrop-filter:blur(6px)}
.ws-lay-reel .reel-btn{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:24px;line-height:1;color:var(--ws-ink)}
.ws-lay-reel .reel-btn:hover{background:var(--ws-soft,color-mix(in srgb,var(--ws-accent) 14%,transparent))}
.ws-lay-reel .reel-btn:focus-visible{outline:2px solid var(--ws-accent);outline-offset:2px}
.ws-lay-reel .reel-btn:disabled{opacity:.35;cursor:default;background:none}
.ws-lay-reel .reel-pos{font-family:var(--ws-body);font-size:14px;letter-spacing:.16em;min-width:52px;text-align:center;color:var(--ws-ink)}
/* Under 720px the Reel reads as The Scroll: pages stacked, the page scrolls. */
@media (max-width:719px){
  .ws-lay-reel{height:auto;display:block;overflow:visible}
  .ws-lay-reel .reel-track{display:block;overflow:visible;scroll-snap-type:none}
  .ws-lay-reel .reel-track .ws-page{width:auto;height:auto;overflow:visible;border-right:none}
  .ws-lay-reel .ws-hero{min-height:88vh}
  .ws-lay-reel .reel-ctl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ws-lay-reel .reel-track{scroll-behavior:auto}
}