:root{
  --bg:#E2DBCF;
  --ink:#5E1A22;
  --ink-hover:#45121A;
  --polaroid-shadow:0 12px 28px rgba(70,18,26,.22);
  --serif:'Instrument Serif',serif;
  --hand:'Caveat',cursive;
  --sans:'Jost',sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;}
a{color:var(--ink);}
a:hover{color:var(--ink-hover);}
button{font-family:inherit;}
img{display:block;}

.layout{min-height:100vh;display:flex;flex-direction:column;}
main{flex:1;}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--bg);}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px clamp(16px,4vw,40px);}
.nav-logo{font-family:var(--hand);font-weight:700;font-size:20px;line-height:.72;color:var(--bg);text-decoration:none;white-space:nowrap;transform:rotate(-10deg);display:block;}
.nav-logo:hover{color:#fff;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{color:var(--bg);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;white-space:nowrap;text-underline-offset:6px;text-decoration:none;}
.nav-links a:hover{color:#fff;}
.nav-links a.active,.menu a.active{text-decoration:underline;}
.nav-right{display:flex;align-items:center;gap:14px;}
.langs{display:flex;gap:4px;}
.lang{border:1px solid rgba(226,219,207,.5);background:transparent;color:var(--bg);border-radius:999px;padding:4px 8px;font-size:11px;letter-spacing:.1em;cursor:pointer;}
.lang.on{background:var(--bg);color:var(--ink);}
.nav-rsvp{background:var(--bg);color:var(--ink);border-radius:999px;padding:7px 16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;text-decoration:none;white-space:nowrap;}
.nav-rsvp:hover{color:var(--ink-hover);}
.menu-btn{display:none;background:transparent;border:1px solid rgba(226,219,207,.5);color:var(--bg);border-radius:999px;padding:8px 16px;min-height:40px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;}
.menu{display:none;flex-direction:column;gap:4px;padding:8px 24px 28px;border-top:1px solid rgba(226,219,207,.2);}
.menu a.menu-link{color:var(--bg);font-family:var(--serif);text-transform:uppercase;font-size:34px;line-height:1.25;text-underline-offset:6px;text-decoration:none;}
.menu-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;}
.menu-foot .langs{gap:6px;}
.menu-foot .lang{min-width:44px;min-height:40px;padding:0;font-size:12px;}
.menu-foot .nav-rsvp{padding:11px 18px;}

@media (max-width:1079px){
  .nav-links,.nav-right{display:none;}
  .menu-btn{display:block;}
  .nav.open .menu{display:flex;}
}

/* ---------- Common ---------- */
.section{padding:72px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.section.dark{background:var(--ink);color:var(--bg);}
.page-title{margin:0;font-family:var(--serif);font-weight:400;text-transform:uppercase;font-size:clamp(56px,11vw,110px);line-height:.88;}
.section-title{margin:0;font-family:var(--serif);font-weight:400;text-transform:uppercase;font-size:clamp(48px,9vw,80px);line-height:.88;}
.intro{margin:16px 0 0;font-size:16px;max-width:480px;line-height:1.55;text-wrap:pretty;}
.hand{font-family:var(--hand);font-weight:700;}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;}
.btn{background:var(--ink);color:var(--bg);border-radius:999px;font-weight:400;text-underline-offset:3px;}
.btn:hover{background:var(--ink-hover);color:var(--bg);}
.card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 20px;background:var(--ink);color:var(--bg);border-radius:4px;}
.card .hand{font-size:28px;}
.card-text{font-size:14px;line-height:1.55;text-wrap:pretty;}

/* ---------- Hero ---------- */
.hero{padding:64px 20px 40px;}
.hero-stack{position:relative;display:flex;flex-direction:column;align-items:center;}
.hero-title{position:relative;z-index:2;margin:0;font-family:var(--serif);font-weight:400;text-transform:uppercase;font-size:clamp(64px,14vw,150px);line-height:.85;letter-spacing:-.02em;}
.polaroids{position:relative;z-index:1;margin:-18px 0;display:flex;justify-content:center;align-items:flex-start;}
.polaroid{position:relative;width:clamp(104px,19vw,210px);aspect-ratio:2/2.92;overflow:hidden;box-shadow:var(--polaroid-shadow);}
.polaroid img{position:absolute;width:158.7%;max-width:none;}
.polaroid.p1{z-index:1;transform:rotate(-7deg);margin-top:10px;}
.polaroid.p1 img{left:-11.1%;top:-12.5%;}
.polaroid.p2{z-index:2;transform:rotate(2deg);margin-top:-6px;margin-left:-14px;}
.polaroid.p2 img{left:-11.3%;top:-16.6%;width:161%;}
.polaroid.p3{z-index:1;transform:rotate(8deg);margin-top:14px;margin-left:-14px;}
.polaroid.p3 img{left:-22.2%;top:-19.6%;}
.note-right{position:absolute;z-index:3;left:calc(100% + 18px);top:52%;white-space:nowrap;text-align:left;font-size:clamp(22px,2.8vw,30px);line-height:.72;transform:rotate(10deg);}
.note-left{position:absolute;z-index:3;right:calc(100% + 18px);top:40%;font-size:clamp(18px,2.6vw,24px);line-height:.95;transform:rotate(-10deg);width:clamp(130px,15vw,170px);text-align:right;}
.notes-narrow{display:none;flex-direction:column;align-items:center;}
.notes-narrow .n1{margin-top:34px;font-size:26px;line-height:.8;transform:rotate(-4deg);}
.notes-narrow .n2{margin-top:18px;font-size:20px;line-height:1;transform:rotate(-2deg);max-width:260px;}
@media (max-width:899px){
  .note-right,.note-left{display:none;}
  .notes-narrow{display:flex;}
}
.hero-cta{margin-top:52px;padding:11px 30px;font-size:15px;}
.hero-meta{margin-top:44px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 120px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;}
.countdown{margin-top:36px;display:flex;gap:clamp(18px,5vw,40px);justify-content:center;}
.countdown div{display:flex;flex-direction:column;align-items:center;gap:2px;}
.countdown .n{font-family:var(--serif);font-size:44px;line-height:1;}
.countdown .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
.cal{margin-top:22px;font-size:13px;text-underline-offset:3px;}

/* ---------- Història ---------- */
.story{gap:18px;}
.story-big{margin:0;max-width:620px;font-family:var(--serif);font-size:clamp(30px,4.6vw,46px);line-height:1.12;text-wrap:balance;}
.story-small{margin:0 0 22px;max-width:420px;font-size:16px;line-height:1.55;text-wrap:pretty;}
.story-item{display:flex;flex-direction:column;gap:4px;}
.story-item .hand{font-size:28px;}
.story-item span:last-child{font-size:15px;}

/* ---------- Timeline ---------- */
.timeline{width:100%;max-width:560px;display:flex;flex-direction:column;}
.tl-row{display:grid;grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);min-height:130px;}
.tl-line{background:var(--ink);}
.tl-cell{padding:22px 0;display:flex;flex-direction:column;gap:6px;}
.tl-cell.l{padding-right:18px;text-align:right;align-items:flex-end;}
.tl-cell.r{padding-left:18px;text-align:left;align-items:flex-start;}
.tl-cell .hand{font-size:28px;line-height:1;}
.tl-cell .txt{font-size:14px;line-height:1.45;max-width:180px;text-wrap:pretty;}

/* ---------- Bus ---------- */
.bus{margin-top:44px;width:100%;max-width:600px;border:1px solid var(--ink);border-radius:4px;padding:28px clamp(18px,4vw,32px);display:flex;flex-direction:column;gap:18px;text-align:left;}
.bus-title{align-self:center;font-size:30px;line-height:1;}
.bus-group{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid rgba(94,26,34,.2);}
.stops{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.stop{display:flex;align-items:center;gap:8px;font-size:15px;}
.stop .chip{border:1px solid var(--ink);border-radius:999px;padding:3px 12px;}
.stop:last-child .arrow{opacity:0;}
.coach{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:baseline;}
.coach .hand{font-size:26px;line-height:1;}
.coach span:last-child{font-size:15px;line-height:1.45;}
.bus-note{align-self:center;font-size:13px;font-weight:400;text-align:center;}

/* ---------- FAQ ---------- */
.faq{max-width:440px;display:flex;flex-direction:column;align-items:center;}
.faq-item{display:flex;flex-direction:column;align-items:center;gap:8px;}
.vline{width:1px;height:36px;background:rgba(226,219,207,.6);margin:14px 0 6px;}
.faq-q{font-family:'Caveat Brush',cursive;font-weight:400;font-size:28px;line-height:1.05;}
.faq-a{font-size:15px;line-height:1.55;text-wrap:pretty;}
.contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin-top:8px;}
.contacts a{color:var(--bg);font-size:15px;text-underline-offset:3px;}
.contacts a:hover{color:#fff;}
.signature{margin-top:56px;font-size:clamp(28px,3.4vw,36px);line-height:.72;transform:rotate(-12deg);}

/* ---------- RSVP ---------- */
.rsvp{padding:80px 20px 90px;scroll-margin-top:70px;}
.rsvp-title{font-size:clamp(56px,11vw,110px);}
.rsvp-sub{margin:14px 0 0;font-size:17px;}
.rsvp-btn{margin-top:40px;padding:14px 42px;font-size:17px;text-decoration:underline;text-underline-offset:4px;}
.gallery{margin-top:56px;width:100%;max-width:1100px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:12px;overflow-x:auto;padding:6px 4px 14px;}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%;border-radius:3px;box-shadow:0 8px 20px rgba(70,18,26,.18);}

/* ---------- Allotjament ---------- */
.stay-grid{margin-top:40px;width:100%;max-width:860px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px;align-items:center;text-align:left;}
.stay-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 70%;border-radius:4px;}
.stay-info{display:flex;flex-direction:column;gap:12px;}
.stay-name{font-family:var(--serif);font-size:clamp(34px,5vw,48px);line-height:1;}
.stay-place{font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.stay-info p{margin:0;font-size:15px;line-height:1.6;text-wrap:pretty;}
.stay-cta{align-self:flex-start;margin-top:6px;padding:10px 22px;font-size:14px;}
.stay-other{margin-top:48px;width:100%;max-width:600px;}
.stay-other .card-text{font-size:15px;}

/* ---------- Guia d'estil ---------- */
.code{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.code .hand{font-size:44px;line-height:1;}
.pal{display:flex;flex-direction:column;align-items:center;gap:18px;}
.swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 10px;max-width:560px;}
.swatch{display:flex;flex-direction:column;align-items:center;gap:8px;width:84px;font-size:12px;line-height:1.3;}
.dot{position:relative;width:60px;height:60px;border-radius:50%;overflow:hidden;}
.dot.no{border:1px solid rgba(94,26,34,.25);}
.dot.no::after{content:"";position:absolute;left:-10%;top:50%;width:120%;height:2px;background:var(--ink);transform:rotate(-45deg);}
.tips{margin-top:56px;width:100%;max-width:960px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}

/* ---------- Regal ---------- */
.iban-card{width:100%;max-width:480px;background:var(--ink);color:var(--bg);border-radius:4px;padding:36px 28px;display:flex;flex-direction:column;align-items:center;gap:18px;}
.iban{font-family:var(--serif);font-size:clamp(22px,4.4vw,30px);letter-spacing:.04em;}
.copy{background:var(--bg);color:var(--ink);border:none;border-radius:999px;padding:10px 22px;font-size:13px;letter-spacing:.08em;cursor:pointer;}
.iban-meta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:18px;border-top:1px solid rgba(226,219,207,.25);font-size:14px;text-align:left;}
.iban-meta div{display:flex;flex-direction:column;gap:2px;}
.iban-meta .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--bg);padding:36px 20px;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;}
