:root{--cream:#F6F3E7;--paper:#FBF8ED;--olive:#6F7F3F;--ink:#3E3D2E;--red:#D2492E;--red-d:#B23A24;--mut:#6D6B57}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Source Serif 4',Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:var(--olive);text-decoration:underline;text-decoration-color:rgba(111,127,63,.45);text-underline-offset:3px}
a:hover{color:var(--red);text-decoration-color:rgba(210,73,46,.6)}
::selection{background:var(--olive);color:var(--cream)}
.noise{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23n)'/%3E%3C/svg%3E")}
.redbar{border-top:4px solid var(--red)}
.caps,.navlink,.brand,.lab,.btn,.slink,.time,.evt-name,.daytag,.sechead span,.card h3,.card .sub,.badge{font-family:Staatliches,sans-serif;font-weight:400}
.site-head{position:sticky;top:0;z-index:50;background:var(--cream);padding:26px 32px 0;display:flex;flex-direction:column;align-items:center;gap:16px}
.brand{font-size:36px;letter-spacing:3px;color:var(--olive);line-height:1;text-decoration:none}
.brand:hover{color:var(--olive)}
.site-head nav{display:flex;gap:34px;padding-bottom:14px;flex-wrap:wrap;justify-content:center}
.navlink{position:relative;text-decoration:none;font-size:16px;letter-spacing:3px;color:var(--ink)}
.navlink:hover{color:var(--red)}
.navlink.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;background:repeating-linear-gradient(90deg,var(--red) 0 8px,transparent 8px 13px)}
.nav-rsvp{font-family:Staatliches,sans-serif;font-weight:400;font-size:16px;letter-spacing:3px;text-decoration:none;background:var(--red);color:var(--cream);padding:7px 16px;margin:-7px 0}
.nav-rsvp:hover{background:var(--red-d);color:var(--cream)}
.faq-group{display:flex;align-items:center;gap:18px;margin:52px 0 8px}
.faq-group span{font-family:Staatliches,sans-serif;font-weight:400;font-size:20px;letter-spacing:4px;color:var(--olive);white-space:nowrap}
.faq-group .tick-h{flex:1}
.faq-item{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:26px 0;align-items:start}
.faq-num{font-family:Staatliches,sans-serif;font-weight:400;font-size:34px;letter-spacing:1px;color:rgba(111,127,63,.5);line-height:.9}
.faq-q{font-family:Staatliches,sans-serif;font-weight:400;font-size:23px;letter-spacing:1.5px;color:var(--ink);line-height:1.1}
.faq-a{margin:9px 0 0;font-size:16.5px;line-height:1.6;max-width:62ch}
.faq-a a{white-space:nowrap}
.tick-h{height:3px;background:repeating-linear-gradient(90deg,var(--olive) 0 11px,transparent 11px 17px)}
.tick-box{background-image:repeating-linear-gradient(90deg,var(--olive) 0 11px,transparent 11px 17px),repeating-linear-gradient(90deg,var(--olive) 0 11px,transparent 11px 17px),repeating-linear-gradient(0deg,var(--olive) 0 11px,transparent 11px 17px),repeating-linear-gradient(0deg,var(--olive) 0 11px,transparent 11px 17px);background-position:0 0,0 100%,0 0,100% 0;background-size:100% 3px,100% 3px,3px 100%,3px 100%;background-repeat:no-repeat}
.tick-red{background-image:repeating-linear-gradient(90deg,var(--red) 0 11px,transparent 11px 17px),repeating-linear-gradient(90deg,var(--red) 0 11px,transparent 11px 17px),repeating-linear-gradient(0deg,var(--red) 0 11px,transparent 11px 17px),repeating-linear-gradient(0deg,var(--red) 0 11px,transparent 11px 17px);background-position:0 0,0 100%,0 0,100% 0;background-size:100% 3px,100% 3px,3px 100%,3px 100%;background-repeat:no-repeat}
.wrap{max-width:1140px;margin:0 auto;padding:64px 32px 96px}
.display{margin:0;font-family:Staatliches,sans-serif;font-weight:400;font-size:clamp(44px,4.6vw,64px);letter-spacing:2px;line-height:.98;color:var(--ink)}
.lab{font-size:15px;letter-spacing:3px;color:var(--olive)}
.btn{display:inline-block;text-decoration:none;background:var(--red);color:var(--cream);font-size:17px;letter-spacing:3px;padding:13px 26px}
.btn:hover{background:var(--red-d);color:var(--cream)}
.btn.ghost{background:transparent;border:2px solid var(--olive);color:var(--olive);padding:11px 26px}
.btn.ghost:hover{border-color:var(--red);color:var(--red)}
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:64px;align-items:center}
.packet{background:var(--paper);box-shadow:0 22px 44px rgba(62,61,46,.14);transform:rotate(-1.2deg);padding:30px}
.row{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:baseline;padding:14px 0}
.rule-t{background-image:repeating-linear-gradient(90deg,rgba(111,127,63,.45) 0 8px,transparent 8px 13px);background-size:100% 2px;background-repeat:no-repeat;background-position:top}
.rule-tb{background-image:repeating-linear-gradient(90deg,rgba(111,127,63,.45) 0 8px,transparent 8px 13px),repeating-linear-gradient(90deg,rgba(111,127,63,.45) 0 8px,transparent 8px 13px);background-size:100% 2px,100% 2px;background-repeat:no-repeat,no-repeat;background-position:top,bottom}
.daytag{display:inline-block;font-size:20px;letter-spacing:4px;color:var(--olive);padding:9px 18px}
.event{display:grid;grid-template-columns:150px 1fr auto;gap:24px;padding:30px 0}
.time{font-size:30px;letter-spacing:1px;color:var(--olive);line-height:1}
.evt-name{font-size:27px;letter-spacing:2px;color:var(--ink);line-height:1.05}
.side{display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.slink{font-size:13px;letter-spacing:2px;color:var(--red);text-decoration:none}
.slink:hover{color:var(--red-d);text-decoration:underline}
.it{font-style:italic;color:var(--mut)}
.sechead{display:flex;align-items:center;gap:18px;margin:56px 0 24px}
.sechead span{font-size:22px;letter-spacing:4px;color:var(--olive);white-space:nowrap}
.sechead .tick-h{flex:1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px}
.card{padding:26px}
.card h3{margin:0;font-size:24px;letter-spacing:2px;color:var(--olive)}
.card .sub{font-size:12px;letter-spacing:3px;color:var(--mut);margin-top:4px}
.card p{margin:12px 0 0;font-size:15.5px;line-height:1.6}
.badge{display:inline-block;font-size:13px;letter-spacing:3px;color:var(--cream);background:var(--red);padding:5px 12px}
.hoodhead{display:flex;align-items:center;gap:14px;margin:38px 0 18px}
.hoodhead span{font-family:Staatliches,sans-serif;font-size:16px;letter-spacing:4px;color:var(--mut);white-space:nowrap}
.hoodhead .tick-h{flex:1;opacity:.55}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill{font-family:Staatliches,sans-serif;font-size:12px;letter-spacing:2.5px;color:var(--olive);border:2px solid rgba(111,127,63,.45);padding:4px 10px;line-height:1}
.pill.eat{color:var(--red);border-color:rgba(210,73,46,.45)}
.maplegend{display:flex;align-items:center;flex-wrap:wrap;gap:10px 26px;margin-top:14px}
.mchip{display:flex;align-items:center;gap:9px;background:none;border:0;padding:6px 0;cursor:pointer;font-family:Staatliches,sans-serif;font-size:13px;letter-spacing:2px;color:var(--ink)}
.mchip:hover{color:var(--red)}
.mchip.off{opacity:.35}
.msw{width:14px;height:14px;flex:none}
.msw.sq{background:var(--olive)}
.msw.ci{border-radius:50%;background:var(--paper);border:3px solid var(--olive);box-sizing:border-box}
.maplink{display:block;margin-top:16px;background:none;border:0;padding:0;cursor:pointer;font-family:Staatliches,sans-serif;font-size:13px;letter-spacing:2.5px;color:var(--red);text-align:left}
.maplink:hover{color:var(--red-d);text-decoration:underline}
.placeholder{display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(111,127,63,.08);color:var(--mut);font-style:italic;font-size:14px;padding:20px}
footer{padding:52px 32px 60px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
@media(max-width:760px){.hero{gap:44px}.hero svg{max-width:100%;height:auto}.event{grid-template-columns:1fr;gap:10px}.side{flex-direction:row;align-items:baseline;gap:18px}.site-head nav{gap:4px 20px}.row{grid-template-columns:110px 1fr}.wrap{padding:48px 20px 72px}.site-head{padding:20px 20px 0}.brand{font-size:30px}.packet{padding:20px;transform:rotate(-.8deg)}.hoodhead{flex-wrap:wrap;gap:8px 14px}.maplink{padding:14px 0}.mchip{padding:14px 0}.maplegend{gap:4px 20px}.navlink{padding:13px 0}.nav-rsvp{margin:0;padding:12px 18px}.slink{padding:14px 0}.faq-item{grid-template-columns:40px 1fr;gap:14px;padding:22px 0}.faq-num{font-size:27px}.faq-q{font-size:20px}}
/* Schedule page: dashed rules survive only on the day tags (option B) */
body[data-page="schedule"] .event.rule-t,
body[data-page="schedule"] .event.rule-tb{background-image:none}
body[data-page="schedule"] .event{padding:22px 0 30px}
body[data-page="schedule"] .daytag.tick-box{display:flex;align-items:baseline;justify-content:space-between;gap:18px;max-width:none;padding:0 0 10px;background-image:none;color:var(--olive);border-bottom:3px dashed rgba(111,127,63,.5)}
.dress{font-size:14px;letter-spacing:3px;color:var(--olive);background:rgba(111,127,63,.12);padding:6px 14px;white-space:nowrap}
body[data-page="schedule"] .site-head .tick-h,
body[data-page="schedule"] footer .tick-h{display:none}

/* Travel page: fewer dashed rules, more whitespace (cards carry a hairline instead of a tick border) */
body[data-page="travel"] .card.tick-box,
body[data-page="travel"] #map-box.tick-box,
body[data-page="travel"] .tick-box{background-image:none}
body[data-page="travel"] .card.tick-box{border:1px solid rgba(111,127,63,.22);background:var(--paper)}
body[data-page="travel"] #map-box{border:1px solid rgba(111,127,63,.22)}
body[data-page="travel"] .hoodhead .tick-h{display:none}
body[data-page="travel"] .hoodhead{margin:44px 0 16px}
body[data-page="travel"] .hoodhead span{font-size:18px;color:var(--olive)}
body[data-page="travel"] .sechead{margin:64px 0 26px}
body[data-page="travel"] .cards{gap:18px}

/* Things to do: one standardized card, detail collapsed until asked for */
.tcard{display:flex;flex-direction:column;border:1px solid rgba(111,127,63,.22);background:var(--paper);padding:22px}
.tcard .taddr{font-size:14px;margin-top:10px}
.tcard .tbody{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px}
.tcard .tbody.open{display:block;overflow:visible}
.tcard .tbody p{margin:10px 0 0}
.tcard .tactions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.tmore{-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;font-family:Staatliches,sans-serif;font-size:13px;letter-spacing:2.5px;color:var(--olive);padding:14px 0;min-height:44px}
.tmore:hover{color:var(--ink)}
.tcard .maplink{padding:14px 0;min-height:44px}
@media (max-width:760px){
  .tcard{padding:20px}
  .tcard .tactions{gap:8px}
  .tcard .maplink,.tmore{min-height:44px;padding:14px 0}
}

/* Home: boots tapping out a two-step */
.boots{color:var(--olive);overflow:visible;display:block;opacity:.9}
.bt-boot{transform-box:fill-box;transform-origin:22% 96%;animation:boot-step 2.2s ease-in-out infinite}
.bt-sp{transform-box:fill-box;transform-origin:50% 50%;animation:boot-twinkle 2.2s ease-in-out infinite}
.bt-sp.s2{animation-delay:.45s}
@keyframes boot-step{
  0%{transform:rotate(0deg)}
  8%{transform:rotate(-11deg)}
  16%{transform:rotate(0deg)}
  24%{transform:rotate(-11deg)}
  32%,100%{transform:rotate(0deg)}
}
@keyframes boot-twinkle{
  0%,40%,100%{opacity:.35;transform:scale(.85)}
  14%{opacity:1;transform:scale(1.15)}
  28%{opacity:.35;transform:scale(.85)}
}
@media (prefers-reduced-motion:reduce){
  .bt-boot,.bt-sp{animation:none}
}


/* "We're getting married" — letters wave one after another */
.arcl{font-family:Staatliches,sans-serif;font-size:19px;fill:var(--red);animation:arc-wave 2.8s linear infinite}
@keyframes arc-wave{
  0%{transform:translateY(0)}
  6%{transform:translateY(-16px)}
  13%{transform:translateY(0)}
  17%{transform:translateY(-4px)}
  22%,100%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){ .arcl{animation:none} }

@media (max-width:560px){
  /* the Zola widget needs the width more than the card needs the margin */
  .regcard{padding:38px 18px !important}
  .regcard h1{font-size:40px !important}
}

/* Collapsed mobile header: one row, brand + RSVP only */
@media (max-width:760px){
  /* Brand and RSVP hold the top row in both states, so collapsing changes
     nothing but the links row — which is what makes the motion smooth. */
  body.nav-fixed .site-head{position:fixed;top:0;left:0;right:0;border-top:4px solid var(--red);
    flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;
    gap:0;padding:0 18px;transition:box-shadow .24s ease}
  body.nav-fixed .redbar{display:none}
  body.nav-fixed .site-head .brand{font-size:22px;padding:15px 0}
  body.nav-fixed .site-head .nav-rsvp{font-size:13px;padding:14px 16px;margin:0}

  body.nav-fixed .site-head nav{flex:0 0 100%;order:3;justify-content:center;gap:0 16px;
    max-height:78px;opacity:1;overflow:hidden;padding:0 0 12px;
    transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .18s ease,padding .3s cubic-bezier(.4,0,.2,1)}
  body.nav-fixed .site-head .navlink{font-size:14px;letter-spacing:2px;padding:13px 0}
  body.nav-fixed .site-head .navlink.active::after{bottom:1px}
  body.nav-fixed .site-head .tick-h{flex:0 0 100%;order:4}

  body.nav-fixed .site-head.nav-min nav{max-height:0;opacity:0;padding-bottom:0}
  body.nav-fixed .site-head.nav-min .tick-h{opacity:0}
  body.nav-fixed .site-head.nav-min{box-shadow:0 3px 14px rgba(58,54,42,.13)}
}

/* --- Motion: page-load fade + scroll reveal (JS adds .js-motion; no JS = no change) --- */
.js-motion:not(.no-motion) body > main{opacity:0;transform:translateY(8px)}
.js-motion:not(.no-motion) body.loaded > main{opacity:1;transform:none;
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.3,1)}
.js-motion:not(.no-motion) .reveal{opacity:0;transform:translateY(14px)}
.js-motion:not(.no-motion) .reveal.shown{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js-motion body > main,.js-motion .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}
/* Card expand animates its height (JS measures; see travel.html) */
.tcard .tbody{transition:height .3s cubic-bezier(.4,0,.2,1)}