/* =====================================================================
   SK WEDDING SITES - the Folio look (round 3 handoff, 2026-11-10)
   Paper and sage, Fraunces italic (300) over Inter, square buttons, a
   numbered tab bar, and on wide screens a photo that stays on the left
   while the page scrolls on the right. Markup: sk-paged.js. Scoped
   .ws-tpl-folio; phones are a container query on .fo-c (under 900 px).
   Tokens: ink #22201D · paper #FAF7F1 · linen #EFEAE0 · sage #56664B ·
   muted #5E5A53 · error #A3321F.
   ===================================================================== */
.ws-tpl-folio{
  --fo-ink:#22201D; --fo-paper:#FAF7F1; --fo-linen:#EFEAE0; --fo-sage:#56664B; --fo-muted:#5E5A53; --fo-err:#A3321F;
  --fo-dis:'Fraunces',Georgia,serif; --fo-ui:'Inter',system-ui,sans-serif; --fo-line:rgba(34,32,29,.16); --fo-bar:76px;
  position:relative;background:var(--fo-paper);color:var(--fo-ink);font-family:var(--fo-ui);font-size:16px;line-height:1.65;min-height:100vh}
.ws-tpl-folio *{box-sizing:border-box}
.ws-tpl-folio .fo-c{container-type:inline-size;container-name:fo;position:relative}
.ws-tpl-folio a{color:var(--fo-ink)}
.ws-tpl-folio h1,.ws-tpl-folio h2,.ws-tpl-folio h3{font-family:inherit;font-weight:400;font-style:normal;text-transform:none;letter-spacing:0;line-height:1.1;margin:0}
.ws-tpl-folio p{margin:0}
.ws-tpl-folio :focus-visible{outline:3px solid var(--fo-sage);outline-offset:3px}
.ws-tpl-folio .fo-dis{font-family:var(--fo-dis);font-style:italic;font-weight:300;letter-spacing:-.015em}
.ws-tpl-folio .fo-trk,.ws-tpl-folio .pf-trk{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;font-style:normal;font-family:var(--fo-ui);margin:0}
.ws-tpl-folio .fo-muted,.ws-tpl-folio .pf-muted{color:var(--fo-muted)}
.ws-tpl-folio .fo-sage{color:var(--fo-sage)}
.ws-tpl-folio .pf-ph{position:relative;overflow:hidden;background:var(--fo-ink);display:block}
.ws-tpl-folio .pf-ph image-slot{position:absolute;inset:0;width:100%;height:100%}

/* buttons */
.ws-tpl-folio .fo-btn,.ws-tpl-folio .pf-rsvp .ws-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:0;border:0;background:var(--fo-ink);color:var(--fo-paper);font:600 12px/1 var(--fo-ui);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;cursor:pointer;padding:0 30px;box-shadow:none}
.ws-tpl-folio .fo-btn:hover,.ws-tpl-folio .pf-rsvp .ws-btn:hover{background:var(--fo-sage);color:#fff}
.ws-tpl-folio .fo-btn.line,.ws-tpl-folio .pf-rsvp .ws-btn.ghost{background:transparent;color:var(--fo-ink);border:1px solid var(--fo-ink);backdrop-filter:none}
.ws-tpl-folio .fo-btn.line:hover,.ws-tpl-folio .pf-rsvp .ws-btn.ghost:hover{background:var(--fo-ink);color:var(--fo-paper)}
.ws-tpl-folio .pf-tlink{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:10px}
.ws-tpl-folio .pf-tlink:hover{color:var(--fo-sage)}

/* the tab bar */
.ws-tpl-folio .fo-bar{position:sticky;top:0;z-index:30;background:rgba(250,247,241,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(34,32,29,.14);display:flex;align-items:center;gap:20px;padding:0 44px;min-height:var(--fo-bar)}
.ws-tpl-folio .fo-mono{background:none;border:0;padding:0;cursor:pointer;color:inherit;font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:30px;line-height:1;min-height:48px;display:inline-flex;align-items:center;flex:none}
.ws-tpl-folio .fo-mono small{font-size:.7em;margin:0 .06em}
.ws-tpl-folio .fo-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;justify-content:flex-end}
.ws-tpl-folio .fo-tabs::-webkit-scrollbar{display:none}
.ws-tpl-folio .fo-tab{background:none;border:0;padding:0 12px;min-height:48px;cursor:pointer;color:var(--fo-muted);font:500 13px/1 var(--fo-ui);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid transparent}
.ws-tpl-folio .fo-tab b{font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:14px;color:var(--fo-sage)}
.ws-tpl-folio .fo-tab:hover{color:var(--fo-ink)}
.ws-tpl-folio .fo-tab.on{color:var(--fo-ink);border-bottom-color:var(--fo-ink)}
.ws-tpl-folio .fo-barbtn{min-height:44px;padding:0 20px;flex:none}

/* the split: a photo that stays on the left */
.ws-tpl-folio .fo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - var(--fo-bar))}
.ws-tpl-folio .fo-stage{position:sticky;top:var(--fo-bar);height:min(calc(100vh - var(--fo-bar)),1200px)}
.ws-tpl-folio .fo-cap{position:absolute;left:28px;bottom:26px;right:28px;color:var(--fo-paper);display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;text-shadow:0 1px 12px rgba(0,0,0,.45);pointer-events:none}
.ws-tpl-folio .fo-col{min-width:0;display:flex;flex-direction:column}
.ws-tpl-folio .fo-in{padding:72px 64px 110px;max-width:720px}
.ws-tpl-folio .fo-names{margin:26px 0 0;font-size:clamp(76px,8.6cqi,132px);line-height:.92}
.ws-tpl-folio .fo-names>span{display:block}
.ws-tpl-folio .fo-names em{display:block;font-size:.4em;color:var(--fo-sage);margin:.14em 0 .06em}
.ws-tpl-folio .fo-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px;border-top:1px solid rgba(34,32,29,.2);border-bottom:1px solid rgba(34,32,29,.2)}
.ws-tpl-folio .fo-meta>div{padding:20px 0;display:flex;flex-direction:column;gap:4px;min-width:0}
.ws-tpl-folio .fo-meta>div+div{padding-left:22px;border-left:1px solid rgba(34,32,29,.2)}
.ws-tpl-folio .fo-v{font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:30px;line-height:1.1}
.ws-tpl-folio .fo-lede{font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:24px;line-height:1.45;margin:22px 0 0}
.ws-tpl-folio .fo-by{margin-top:10px}
.ws-tpl-folio .fo-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.ws-tpl-folio .fo-idx{list-style:none;margin:56px 0 0;padding:0}
.ws-tpl-folio .fo-idx button{width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;background:none;border:0;border-bottom:1px solid var(--fo-line);padding:22px 0;cursor:pointer;color:var(--fo-ink);text-align:left}
.ws-tpl-folio .fo-n{font-family:var(--fo-dis);font-style:italic;font-weight:300;color:var(--fo-sage);font-size:20px}
.ws-tpl-folio .fo-t{font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:40px;line-height:1.1}
.ws-tpl-folio .fo-idx button:hover .fo-t{color:var(--fo-sage)}

/* the film strip under Home */
.ws-tpl-folio .fo-stripwrap{padding:110px 0;background:var(--fo-linen)}
.ws-tpl-folio .fo-striphead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 44px 34px;flex-wrap:wrap}
.ws-tpl-folio .fo-sh{font-size:clamp(40px,4cqi,56px);line-height:1.05;margin:10px 0 0}
.ws-tpl-folio .fo-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 44px 8px;scrollbar-width:thin}
.ws-tpl-folio .fo-strip .lg-thumb{flex:0 0 auto;height:min(78vh,720px);scroll-snap-align:start}
.ws-tpl-folio .fo-strip .lg-thumb img{height:100%;width:auto}
.ws-tpl-folio .lg-thumb{padding:0;border:0;background:var(--fo-ink);cursor:pointer;display:block;overflow:hidden}
.ws-tpl-folio .lg-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.ws-tpl-folio .lg-thumb:hover img{opacity:.88}

/* pages */
.ws-tpl-folio .fo-ph{font-size:clamp(54px,6cqi,92px);line-height:.98;margin:16px 0 0}
.ws-tpl-folio .fo-step{margin:30px 0 0;color:var(--fo-muted)}
.ws-tpl-folio .fo-tl{list-style:none;margin:44px 0 0;padding:0}
.ws-tpl-folio .fo-tli{display:grid;grid-template-columns:110px minmax(0,1fr);gap:22px;padding:26px 0;border-top:1px solid var(--fo-line)}
.ws-tpl-folio .fo-tm{font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:24px;line-height:1.2;color:var(--fo-sage)}
.ws-tpl-folio .fo-tli h2{font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:34px;line-height:1.1}
.ws-tpl-folio .fo-tli p{margin:8px 0 0}
.ws-tpl-folio .fo-pl{margin-top:8px}
.ws-tpl-folio .fo-dr{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ws-tpl-folio .fo-moments{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:15px}
.ws-tpl-folio .fo-moments b{font-weight:600}
.ws-tpl-folio .pf-seg{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border:1px solid var(--fo-ink);padding:4px;gap:4px;margin-top:32px}
.ws-tpl-folio .pf-segb{min-height:50px;border:0;background:transparent;color:var(--fo-ink);font:600 12px/1.2 var(--fo-ui);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:0 10px}
.ws-tpl-folio .pf-segb.on{background:var(--fo-ink);color:var(--fo-paper)}
.ws-tpl-folio .lg-pane{display:none}
.ws-tpl-folio .lg-pane.on{display:block}
.ws-tpl-folio .pf-sw{display:inline-flex;gap:10px;flex-wrap:wrap}
.ws-tpl-folio .pf-sw i{display:block;width:30px;height:30px;border-radius:999px;border:1px solid rgba(34,32,29,.2)}
.ws-tpl-folio .pf-links{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:6px}
.ws-tpl-folio .pf-maplink{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--fo-muted)}
.ws-tpl-folio .pf-maplink span{text-decoration:underline;text-underline-offset:5px}
.ws-tpl-folio .pf-notice{margin-top:24px;padding:16px 0;border-top:1px solid var(--fo-line);border-bottom:1px solid var(--fo-line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ws-tpl-folio .fo-travel{margin-top:72px}
.ws-tpl-folio .pf-rows{list-style:none;margin:36px 0 0;padding:0}
.ws-tpl-folio .pf-rows li{padding:26px 0;border-top:1px solid var(--fo-line);display:flex;flex-direction:column;gap:6px}
.ws-tpl-folio .pf-blk{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ws-tpl-folio .pf-reglinks{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.ws-tpl-folio .lg-fqh{font-size:inherit;margin:0}
.ws-tpl-folio .fo-faq{margin-top:34px}
.ws-tpl-folio .pf-faqq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:0;border-top:1px solid var(--fo-line);padding:24px 0;cursor:pointer;color:var(--fo-ink);text-align:left;font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:27px;line-height:1.25}
.ws-tpl-folio .lg-sg{font-family:var(--fo-ui);font-style:normal;font-size:24px;flex:none}
.ws-tpl-folio .pf-faqa{margin:0;padding:0 0 26px;max-width:560px}

/* gallery: full width */
.ws-tpl-folio .fo-galpg{padding:56px 0 110px}
.ws-tpl-folio .fo-galhead{padding:0 44px;max-width:900px}
.ws-tpl-folio .pf-chips{display:flex;gap:10px;flex-wrap:wrap;margin:30px 44px 0}
.ws-tpl-folio .pf-chip{min-height:44px;padding:0 20px;border:1px solid var(--fo-ink);background:transparent;color:var(--fo-ink);font:600 12px/1 var(--fo-ui);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.ws-tpl-folio .pf-chip.on{background:var(--fo-ink);color:var(--fo-paper)}
.ws-tpl-folio .ws-gpane{display:none;margin-top:36px}
.ws-tpl-folio .ws-gpane.on{display:block}
.ws-tpl-folio .fo-gal{columns:3;column-gap:12px;padding:0 44px}
.ws-tpl-folio .fo-gal .lg-thumb{width:100%;margin:0 0 12px;break-inside:avoid}
.ws-tpl-folio .fo-gal .lg-thumb img{height:auto}
.ws-tpl-folio .fo-gal .lg-thumb.pf-ph{aspect-ratio:4/5}
.ws-tpl-folio .pf-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 44px}
.ws-tpl-folio .pf-films video{width:100%;display:block;background:#000}

/* footer */
.ws-tpl-folio .fo-foot{background:var(--fo-ink);color:#D9D3C7;padding:72px 44px 56px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ws-tpl-folio .fo-footn{font-size:42px;line-height:1;color:var(--fo-paper);margin-bottom:12px}
.ws-tpl-folio .fo-footr{text-align:right;display:flex;flex-direction:column;gap:8px}
.ws-tpl-folio .fo-credit{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#C2BBAE}
.ws-tpl-folio .lg-lb{background:rgba(26,24,22,.96)}

/* the RSVP box */
.ws-tpl-folio .pf-rsvp,.ws-tpl-folio .pf-rsvp .code-guest,.ws-tpl-folio .pf-rsvp .cg-ev,.ws-tpl-folio .pf-rsvp .cg-ev.going{background:none!important;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;max-width:none}
.ws-tpl-folio .pf-rsvp{margin-top:36px}
.ws-tpl-folio .pf-rsvp .rs-deco{display:none}
.ws-tpl-folio .pf-rsvp .ws-code{max-width:none;margin:0}
.ws-tpl-folio .pf-rsvp .code-lbl,.ws-tpl-folio .pf-rsvp label{font:600 12px/1.4 var(--fo-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--fo-ink)}
.ws-tpl-folio .pf-rsvp .code-in,.ws-tpl-folio .pf-rsvp input[type=text],.ws-tpl-folio .pf-rsvp input[type=email],.ws-tpl-folio .pf-rsvp input[type=tel],.ws-tpl-folio .pf-rsvp input[type=number],.ws-tpl-folio .pf-rsvp textarea,.ws-tpl-folio .pf-rsvp select,.ws-tpl-folio .pf-rsvp .cg-ev-count{
  width:100%;min-height:54px;border:0;border-bottom:1px solid var(--fo-ink);border-radius:0;background:transparent!important;padding:0 2px;font:italic 300 22px var(--fo-dis);letter-spacing:0;text-transform:none;color:var(--fo-ink);box-shadow:none}
.ws-tpl-folio .pf-rsvp .code-in:focus,.ws-tpl-folio .pf-rsvp input:focus,.ws-tpl-folio .pf-rsvp textarea:focus{outline:none;border-bottom:2px solid var(--fo-sage);box-shadow:none}
.ws-tpl-folio .pf-rsvp .code-row{display:flex;flex-direction:column;gap:24px;margin-top:6px}
.ws-tpl-folio .pf-rsvp .code-hint{margin-top:14px;font:400 15px var(--fo-ui);color:var(--fo-muted)}
.ws-tpl-folio .pf-rsvp .code-err{border:2px solid var(--fo-err);background:#FBEFEA;color:var(--fo-ink);padding:18px 20px;margin-top:18px;border-radius:0}
.ws-tpl-folio .pf-rsvp .code-guest{display:flex;flex-direction:column;gap:22px}
.ws-tpl-folio .pf-rsvp .cg-hi{font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:34px;line-height:1.15}
.ws-tpl-folio .pf-rsvp .cg-hi b{font-weight:300}
.ws-tpl-folio .pf-rsvp .cg-notyou{font:400 15px var(--fo-ui);background:none;border:0;color:var(--fo-ink);text-decoration:underline;cursor:pointer;min-height:44px}
.ws-tpl-folio .pf-rsvp .cg-ev{padding:24px 0;border-top:1px solid var(--fo-line);display:flex;flex-direction:column;align-items:stretch;gap:14px}
.ws-tpl-folio .pf-rsvp .cg-ev-n{font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:32px;line-height:1.1}
.ws-tpl-folio .pf-rsvp .cg-ev-d{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--fo-muted)}
.ws-tpl-folio .pf-rsvp .cg-go{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--fo-ink);border-radius:0;padding:4px;gap:4px;min-width:min(320px,100%);background:none;overflow:visible}
.ws-tpl-folio .pf-rsvp .cg-go button{min-height:48px;border-radius:0;border:0;background:transparent;color:var(--fo-ink);font:600 12px/1 var(--fo-ui);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:0 10px}
.ws-tpl-folio .pf-rsvp .cg-go button.on{background:var(--fo-ink);color:var(--fo-paper)}
.ws-tpl-folio .pf-rsvp .cg-ev-ctrl{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ws-tpl-folio .pf-rsvp .cg-ev-count{width:auto;min-width:96px}
.ws-tpl-folio .pf-rsvp .rf{display:flex;flex-direction:column;gap:6px;margin:0 0 26px}
.ws-tpl-folio .pf-rsvp .code-done,.ws-tpl-folio .pf-rsvp .thanks,.ws-tpl-folio .pf-rsvp .ws-rsvp-soon{text-align:center;padding:36px 0;border-top:1px solid var(--fo-line);border-bottom:1px solid var(--fo-line)}
.ws-tpl-folio .pf-rsvp .cd-t,.ws-tpl-folio .pf-rsvp .thanks h3{font-family:var(--fo-dis);font-style:italic;font-weight:300;font-size:44px;line-height:1.1;margin:10px 0}
.ws-tpl-folio .pf-rsvp .ws-rsvp-soon p{font:400 16px/1.6 var(--fo-ui);color:var(--fo-muted);max-width:none}
.ws-tpl-folio .pf-rsvp .su-consent{display:flex;gap:14px;align-items:flex-start;font:400 15px/1.5 var(--fo-ui);letter-spacing:0;text-transform:none;margin:0 0 26px}

/* phones: the photo stacks above the page */
@container fo (max-width: 900px){
  .ws-tpl-folio .fo-split{grid-template-columns:minmax(0,1fr);min-height:0}
  .ws-tpl-folio .fo-stage{position:relative;top:0;height:66vh;min-height:440px;max-height:620px}
  .ws-tpl-folio .fo-bar{padding:0 16px;gap:10px;min-height:64px}
  .ws-tpl-folio .fo-mono{font-size:26px}
  .ws-tpl-folio .fo-tabs{justify-content:flex-start}
  .ws-tpl-folio .fo-tab{padding:0 9px;font-size:12px}
  .ws-tpl-folio .fo-tab b{display:none}
  .ws-tpl-folio .fo-barbtn{padding:0 14px;letter-spacing:.16em}
  .ws-tpl-folio .fo-in{padding:44px 22px 84px}
  .ws-tpl-folio .fo-names{font-size:66px}
  .ws-tpl-folio .fo-meta{grid-template-columns:minmax(0,1fr)}
  .ws-tpl-folio .fo-meta>div+div{padding-left:0;border-left:0;border-top:1px solid rgba(34,32,29,.2)}
  .ws-tpl-folio .fo-t{font-size:32px}
  .ws-tpl-folio .fo-strip{padding:0 22px 8px}
  .ws-tpl-folio .fo-strip .lg-thumb{height:440px}
  .ws-tpl-folio .fo-stripwrap{padding:72px 0}
  .ws-tpl-folio .fo-striphead,.ws-tpl-folio .fo-galhead{padding:0 22px 26px}
  .ws-tpl-folio .pf-chips{margin:24px 16px 0}
  .ws-tpl-folio .fo-gal{columns:2;column-gap:8px;padding:0 16px}
  .ws-tpl-folio .fo-gal .lg-thumb{margin-bottom:8px}
  .ws-tpl-folio .pf-films{grid-template-columns:minmax(0,1fr);padding:0 16px}
  .ws-tpl-folio .fo-tli{grid-template-columns:minmax(0,1fr);gap:6px}
  .ws-tpl-folio .pf-faqq{font-size:23px}
  .ws-tpl-folio .fo-foot{padding:56px 22px 44px}
  .ws-tpl-folio .fo-footr{text-align:left}
}
@media (prefers-reduced-motion: reduce){ .ws-tpl-folio *{transition:none!important;animation:none!important} }