/* Pistachio sampled from the supplied WhatsApp reference; dark text for contrast. */
.button-solid{background:var(--pistachio);border-color:var(--pistachio);color:var(--ink)}
.button-solid:hover{background:#b8c788;border-color:#b8c788;color:var(--ink)}
.hero-copy:before{content:'';position:absolute;inset:0 0 auto;height:14px;background:repeating-linear-gradient(90deg,var(--pistachio) 0 18px,var(--ivory) 18px 36px)}
.places:before{content:'';position:absolute;inset:0 0 auto;height:14px;background:repeating-linear-gradient(90deg,var(--pistachio) 0 18px,var(--ivory) 18px 36px)}
.itinerary{background:var(--pistachio);color:var(--ink)}
.itinerary .eyebrow,.itinerary .section-heading>p:last-child,.timeline p{color:var(--olive-dark)}
.timeline li:before{background:#78894b}
.timeline-number{background:var(--pistachio);border-color:var(--olive);color:var(--olive-dark)}
.footer{background:var(--paper);color:var(--ink);position:relative}
.footer:before{content:'';position:absolute;inset:0 0 auto;height:18px;background:repeating-linear-gradient(90deg,var(--pistachio) 0 22px,var(--ivory) 22px 44px)}
.footer-branch,.footer .eyebrow,.footer-names em,.footer-bottom{color:var(--olive-dark)}
.footer-bottom{border-color:var(--line)}
.music-toggle{background:var(--pistachio);border-color:#8d9f5e;color:var(--ink)}
.music-toggle:focus-visible{outline-color:var(--ink);box-shadow:0 0 0 5px var(--ivory)}
.site-header nav a{min-height:44px;display:flex;align-items:center}
@media(max-width:760px){.site-header nav a:last-child{display:flex}.site-header nav a:nth-child(2){display:none}.header-date{display:none}.site-header nav{gap:18px}.footer-bottom{padding-bottom:12px}}
/* Typography from the idea PDF: a script for names and accents (Allison: free Brittany Signature lacks Spanish accents), Montserrat for everything else. */
@font-face{font-family:Allison;src:url('assets/fonts/Allison.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;size-adjust:125%}
@font-face{font-family:Montserrat;src:url('assets/fonts/Montserrat.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{--sans:Montserrat,Arial,sans-serif;--serif:Montserrat,Arial,sans-serif;--script:Allison,cursive}
body{font-weight:300}
h1,h2,h3{font-weight:300;letter-spacing:0}
.hero-quote,.date-long,.timeline-number,.timeline h3,#welcome-description{font-style:normal}
.hero h1,.monogram,.welcome-names,.footer-names,h2 em,.photo-caption,.moment-caption,.moment-copy>p:last-child{font-family:var(--script);font-weight:400;font-style:normal;letter-spacing:0}
.hero h1 .ampersand,.monogram span,.welcome-names span,.footer-names em{font-family:var(--script);font-style:normal}
.hero h1{line-height:1.25}
.hero h1 .ampersand{line-height:1.1}
h2 em{display:inline-block;font-size:1.25em;line-height:1.6}
.monogram{font-size:30px}
.monogram span{font-size:22px}
.welcome-names,.footer-names{line-height:1.3}
.moment-copy>p:last-child{font-size:30px}
.moment-caption{font-size:24px}
.photo-caption{font-size:22px}
@media(max-width:760px){.hero h1{letter-spacing:0;line-height:1.2}h2 em{font-size:1.1em}.footer-names{letter-spacing:0}.moment-copy>p:last-child{font-size:27px}}
/* Text colour from the idea PDF (burgundy); backgrounds keep the pistachio palette. */
:root{--ink:#6b3a4a;--muted:#7f5462;--olive:#774353;--olive-dark:#5e2f3e}
.eyebrow,.hero-date span,.place .eyebrow{font-weight:300}
.header-date,.hero-date strong,.date-long,.countdown>div>span,.place-time,.place-time span,.timeline time,.footer-date,.welcome-date{font-family:var(--sans);font-weight:500;font-style:normal}
.footer-bottom,.footer .eyebrow,.footer-branch,.footer-names em,.itinerary .eyebrow,.itinerary .section-heading>p:last-child,.timeline p{color:var(--olive-dark)}
.timeline li:before{background:var(--olive)}
/* Line icons taken from the PDF (already burgundy, transparent background). */
.pdf-icon{object-fit:contain}
.place-icon{width:78px;height:70px}
.share-icon{width:62px;height:60px}
.rsvp-icon{width:52px;height:48px}
.timeline-number{width:58px;height:58px;background:var(--ivory);border-color:var(--olive)}
.timeline-icon{width:34px;height:34px}
.timeline li:before{top:29px}
@media(max-width:760px){.timeline p br{display:inline}.place-icon{width:66px;height:60px}.timeline li{grid-template-columns:58px 1fr}.timeline li:before,.timeline li:first-child:before,.timeline li:nth-child(3):before,.timeline li:nth-child(4):before{left:29px;top:0}.timeline time{padding-top:10px}}
/* Itinerary like the PDF: cream ground, script title, pistachio only on the line and circles. */
.itinerary{background:var(--ivory);color:var(--ink)}
.itinerary .eyebrow{color:var(--olive)}
.itinerary .section-heading h2{font-family:var(--script);font-size:clamp(52px,6vw,78px);line-height:1.4;letter-spacing:0;margin-top:22px}
.timeline li:before{background:var(--pistachio);height:2px}
.timeline-number{background:var(--ivory);border:2px solid var(--pistachio)}
.timeline h3{font-family:var(--sans);font-style:normal;font-weight:400;font-size:18px}
.timeline p{font-size:13px;color:var(--muted)}
@media(max-width:760px){.timeline li:before,.timeline li:first-child:before,.timeline li:nth-child(3):before,.timeline li:nth-child(4):before{width:2px;height:100%}.itinerary .section-heading h2{font-size:56px}}
/* Legibility pass: minimum text sizes, AA contrast on buttons, 44px tap targets. */
.eyebrow,.place .eyebrow,.footer .eyebrow,.bank-details .eyebrow,.welcome .eyebrow{font-size:11px;font-weight:400;letter-spacing:2.4px}
.site-header nav a,.header-date{font-size:12px}
.hero-date span,.place-time span{font-size:11px;font-weight:500}
.hero-date strong{font-size:14px}
.discover{font-size:11px;font-weight:400;min-height:44px}
.countdown small{font-size:10px;font-weight:400;letter-spacing:1px}
.countdown-dot{color:var(--pistachio)}
.body-copy,.location,.arrival,.details-intro>p:not(.eyebrow),.faq-answer,.share-item p{font-size:14px}
.bank-details dt,.bank-details dd,.bank-details #copy-status,.adults-note{font-size:13px}
.footer-date{font-size:12px}
.footer-bottom,.song-credit{font-size:12px}
.button{font-size:13px}
.button-solid{background:var(--olive);border-color:var(--olive);color:var(--ivory)}
.button-solid:hover{background:var(--olive-dark);border-color:var(--olive-dark);color:var(--ivory)}
.inline-link,.footer-bottom a,.bank-details dd a{display:inline-flex;align-items:center;min-height:44px}
.inline-link{margin-top:8px}
.music-toggle{background:var(--olive);border-color:var(--olive-dark);color:var(--ivory);font-size:12px}
.music-toggle:focus-visible{outline:2px solid var(--olive-dark);box-shadow:0 0 0 5px var(--ivory)}
@media(max-width:760px){
  .site-header nav a{font-size:11px}
  .eyebrow,.place .eyebrow,.footer .eyebrow,.bank-details .eyebrow,.welcome .eyebrow{font-size:11px;letter-spacing:1.8px}
  .countdown small{font-size:10.5px;letter-spacing:.3px}
  .site-header nav a{font-weight:400}
  .body-copy,.faq-answer{font-size:14px}
  .bank-details dd{font-size:13px}
  /* Icon-only music button on phones so it covers less content; the aria-label keeps its name. */
  .music-toggle{width:52px;height:52px;padding:0;justify-content:center;border-radius:50%}
  .music-toggle #music-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media(max-width:360px){.eyebrow,.place .eyebrow,.footer .eyebrow{letter-spacing:1.2px}.countdown small{font-size:10px;letter-spacing:0}}
@media(max-width:420px){.body-copy br{display:none}}
/* Script names and call to action, as in the PDF ("Los Jesuitas", "Confírmanos tu asistencia"). */
.place h3,.rsvp h2{font-family:var(--script);font-weight:400;letter-spacing:0;color:var(--olive)}
.place h3{font-size:46px;line-height:1.3;max-width:420px;margin:18px auto 8px}
.rsvp h2{font-size:clamp(52px,6vw,78px);line-height:1.35;margin-top:22px}
@media(max-width:760px){.place h3{font-size:40px;max-width:320px}.rsvp h2{font-size:52px}}
@media(max-width:360px){.place h3{font-size:36px}.rsvp h2{font-size:46px}}
/* ---- PDF look: warm cream, watercolour stripes, lace edges, framed photos, cupids ---- */
:root{--ivory:#f7f2e8;--stripe-a:#e4e2c8;--stripe-b:#f5f1e3;--lace:#d6d8ad;--lace-bg:#e8e8cf;--heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90' preserveAspectRatio='none'%3E%3Cpath d='M50 88C20 66 0 48 0 26 0 11 11 0 26 0 37 0 46 7 50 16 54 7 63 0 74 0 89 0 100 11 100 26 100 48 80 66 50 88Z'/%3E%3C/svg%3E")}
/* Soft floral damask on cream sections, like the PDF background. */
.invitation,.our-moment,.itinerary,.dress-code,.details,.rsvp,.closing{background-color:var(--ivory);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='320' viewBox='0 0 300 320'%3E%3Cg fill='%23efe3dc' fill-opacity='.55'%3E%3Cpath d='M30 300C80 240 110 160 130 70 120 160 90 240 40 305Z'/%3E%3Cellipse cx='70' cy='225' rx='26' ry='10' transform='rotate(-35 70 225)'/%3E%3Cellipse cx='104' cy='168' rx='26' ry='10' transform='rotate(-60 104 168)'/%3E%3Cellipse cx='92' cy='120' rx='24' ry='9' transform='rotate(20 92 120)'/%3E%3Cellipse cx='136' cy='98' rx='24' ry='9' transform='rotate(-70 136 98)'/%3E%3Cellipse cx='126' cy='52' rx='20' ry='8' transform='rotate(40 126 52)'/%3E%3Cpath d='M270 20C230 70 205 130 190 210 205 130 235 75 278 26Z'/%3E%3Cellipse cx='240' cy='80' rx='22' ry='8' transform='rotate(-30 240 80)'/%3E%3Cellipse cx='214' cy='130' rx='22' ry='8' transform='rotate(55 214 130)'/%3E%3Cellipse cx='200' cy='178' rx='20' ry='8' transform='rotate(-50 200 178)'/%3E%3C/g%3E%3C/svg%3E");background-size:300px 320px}
/* Watercolour stripes on alternating sections. */
.places,.gift,.share,.footer{background-color:var(--stripe-b);background-image:linear-gradient(180deg,#ffffff30,#00000005),repeating-linear-gradient(90deg,var(--stripe-a) 0 30px,var(--stripe-b) 30px 64px)}
/* Lace edge (scallops + dotted line) replacing the square stripe bars. */
.places:before,.gift:before,.share:before,.footer:before,.closing:before{content:'';position:absolute;inset:0 0 auto;height:22px;background:radial-gradient(circle at 50% 0,var(--lace) 10px,transparent 10.5px) 0 0/24px 22px repeat-x,radial-gradient(circle,var(--lace) 1.8px,transparent 2.2px) 0 15px/8px 8px repeat-x}
.places,.gift,.share,.footer,.closing,.dress-code{position:relative}
/* Heart and oval frames with a lace-like border. */
.heart-frame,.oval-frame{position:relative;margin:28px auto 0}
.heart-frame{width:min(560px,88vw);height:auto;aspect-ratio:10/9;overflow:visible}
.heart-frame:before,.heart-frame:after,.heart-frame img{-webkit-mask:var(--heart) center/100% 100% no-repeat;mask:var(--heart) center/100% 100% no-repeat}
.heart-frame:before,.oval-frame:before{content:'';position:absolute;inset:0;background:radial-gradient(circle,transparent 2.6px,var(--lace) 3px,var(--lace) 4.6px,transparent 5px) 0 0/13px 13px,radial-gradient(circle,var(--lace) 1.6px,transparent 2px) 6.5px 6.5px/13px 13px,var(--lace-bg)}
.heart-frame:after,.oval-frame:after{content:'';position:absolute;inset:6.2%;background:#c9cc9a}
.heart-frame img{position:absolute;inset:7.4%;width:85.2%;height:85.2%;object-fit:cover;object-position:52% 42%;z-index:1}
.oval-frame:before,.oval-frame:after,.oval-frame img{border-radius:50%}
.moment-photo.oval-frame{width:100%;max-width:400px;aspect-ratio:3/4;padding:0;border:0;background:none;transform:none}
.js-motion .moment-photo.oval-frame:not(.is-visible){transform:translateY(20px)}
.moment-photo.oval-frame.is-visible{transform:none}
.moment-photo.oval-frame img{position:absolute;inset:7.4%;width:85.2%;height:85.2%;object-fit:cover;object-position:50% 42%;z-index:1}
.moment-photo.oval-frame .moment-caption{top:100%;bottom:auto;margin-top:10px}
/* Cupids from the PDF. */
.cupid{position:absolute;width:clamp(150px,17vw,230px);height:auto;pointer-events:none;z-index:1}
.cupid-places{top:56px;right:5vw}
.cupid-dress{top:60px;left:6vw}
/* Dress code, gift and closing sections. */
.dress-code,.gift,.closing{text-align:center}
.feature-icon{width:88px;height:88px;object-fit:contain;margin:0 auto 22px;display:block}
.dress-code h2,.gift h2,.closing h2{font-family:var(--script);font-weight:400;letter-spacing:0;font-size:clamp(60px,7vw,88px);line-height:1.3;margin-top:8px;color:var(--olive)}
.feature-copy{max-width:560px;margin:16px auto 0;font-size:15px;line-height:1.9;color:var(--muted)}
.feature-copy strong{font-weight:500;color:var(--ink)}
.gift .button{margin-top:30px}
.gift .bank-details{max-width:480px;margin:40px auto 0;text-align:left;border-top-color:#cfd0ad}
.gift .bank-details .eyebrow{text-align:center}
.playlist-note,.share-item p.playlist-note{margin:-14px 0 24px;font-size:11px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--olive)}
.closing-icon{width:46px;height:55px;object-fit:contain;margin:0 auto 6px;display:block}
.closing-photo{margin-top:20px}
@media(max-width:760px){
  .heart-frame{width:min(420px,92vw)}
  .cupid{position:static;display:block;width:150px;margin:0 auto 18px}
  .dress-code h2,.gift h2,.closing h2{font-size:64px}
  .feature-copy{font-size:14px}
  .moment-photo.oval-frame{max-width:300px}
  .places,.gift,.share,.footer{background-image:linear-gradient(180deg,#ffffff30,#00000005),repeating-linear-gradient(90deg,var(--stripe-a) 0 22px,var(--stripe-b) 22px 46px)}
}
.bank-details dl>div{align-items:center}
/* ---- Illustrated cover, after portada.jpeg: checkered frame, cream card, line doodles, cupids and candelabras ---- */
:root{--wine:#842c3c;--sage:#7d8b4c;--check:#9eab68}
.hero{display:block;height:auto;max-height:none;min-height:0;padding:22px;background:repeating-conic-gradient(var(--check) 0 25%,var(--ivory) 0 50%) 0 0/44px 44px}
.cover{position:relative;min-height:max(720px,calc(100svh - 132px));display:flex;align-items:center;justify-content:center;background:var(--ivory);box-shadow:inset 0 0 0 10px var(--ivory),inset 0 0 0 11.5px var(--sage);overflow:hidden}
.cover-art{position:absolute;inset:0;pointer-events:none}
.d{position:absolute;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.d use{vector-effect:non-scaling-stroke}
.d-wine{color:var(--wine)}
.d-green{color:var(--sage)}
.d-lights{top:12px;width:41%;height:auto;aspect-ratio:300/80}
.d-lights-left{left:12px}
.d-lights-right{right:12px;transform:scaleX(-1)}
.d-disco{top:12px;left:50%;width:150px;height:160px;transform:translateX(-50%)}
.cover-cupid{position:absolute;top:44%;width:clamp(140px,15vw,220px);height:auto;opacity:.95}
.cover-cupid-left{left:5%}
.cover-cupid-right{right:5%}
.d-coupe{width:52px;height:85px;top:24%}
.d-coupe-left{left:12%;transform:rotate(-14deg)}
.d-coupe-right{right:12%;transform:rotate(12deg)}
.d-candelabra{bottom:5%;width:96px;height:158px}
.d-candelabra-left{left:9%}
.d-candelabra-right{right:9%}
.d-sparkle{left:var(--x);top:var(--y);width:22px;height:22px}
.d-heart{left:var(--x);top:var(--y);width:18px;height:16px}
.cover .hero-copy{position:relative;z-index:1;overflow:visible;padding:190px 24px 70px;max-width:620px;min-height:0;color:var(--wine)}
.cover .hero-copy:before{content:none}
.cover .eyebrow{color:var(--wine);font-size:13px;letter-spacing:4px;margin-bottom:10px}
.cover h1{color:var(--wine);font-size:clamp(84px,9vw,128px);line-height:1.05}
.cover h1 .ampersand{color:var(--wine);font-size:.55em;line-height:1}
.cover .hero-quote{font-family:var(--script);color:var(--sage);font-size:clamp(34px,3.4vw,44px);line-height:1.15;margin-top:22px}
.cover .hero-date{color:var(--wine);margin-top:26px}
.cover .hero-date span{font-size:12px;letter-spacing:3px}
.cover .hero-date strong{font-size:clamp(20px,2vw,26px);letter-spacing:5px;font-weight:400}
.cover-rule{display:flex;align-items:center;gap:12px;margin-top:20px;color:var(--sage)}
.cover-rule:before,.cover-rule:after{content:'';width:56px;height:1px;background:currentColor}
.cover-rule svg{width:16px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.cover .discover{color:var(--wine);margin-top:22px}
.hero .hero-photo{height:auto;aspect-ratio:4/3;max-width:min(1100px,calc((100svh - 44px)*4/3));margin:22px auto 0}
.hero .hero-photo img{object-position:50% 50%}
@media(max-width:760px){
  .hero{padding:14px;background-size:28px 28px}
  .cover{min-height:0;box-shadow:inset 0 0 0 7px var(--ivory),inset 0 0 0 8px var(--sage)}
  .d-lights{top:8px;width:46%}
  .d-lights-left{left:8px}
  .d-lights-right{right:8px}
  .d-disco{top:8px;width:96px;height:102px}
  .cover-cupid{top:118px;width:clamp(78px,24vw,110px)}
  .cover-cupid-left{left:3%}
  .cover-cupid-right{right:3%}
  .d-coupe{display:none}
  .d-candelabra{bottom:16px;width:52px;height:86px}
  .d-candelabra-left{left:6%}
  .d-candelabra-right{right:6%}
  .d-sparkle{width:14px;height:14px}
  .d-heart{width:12px;height:11px}
  .cover .hero-copy{padding:200px 16px 120px}
  .cover .eyebrow{font-size:11px;letter-spacing:3px}
  .cover h1{font-size:clamp(64px,19vw,84px);letter-spacing:0}
  .cover .hero-quote{font-size:30px}
  .cover .hero-date strong{font-size:18px;letter-spacing:3px}
  .cover .discover{font-size:10px;gap:10px}
  .hero .hero-photo{height:auto;max-width:none;margin-top:14px}
}