@font-face {font-family:'Caveat';src:url('assets/caveat.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block;}
    @font-face { font-family:'Courier Prime'; src:url('assets/courier-prime-regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
    @font-face { font-family:'Courier Prime'; src:url('assets/courier-prime-bold.ttf') format('truetype'); font-style:normal; font-weight:700; font-display:swap; }
    :root { --teja:#713027; --teja-claro:#8c493b; --papel:#f4efe6; --blanco:#fffaf3; --tinta:#503b32; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--papel); color:var(--blanco); font-family:'Courier Prime','Courier New',monospace; }
    button, a { font:inherit; }
    a { color:inherit; }
    .hero { min-height:100svh; background:var(--teja); overflow:hidden; position:relative; }
    .topbar { height:86px; max-width:1500px; padding:0 5.5vw; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:4; }
    .mark { text-decoration:none; font-size:17px; letter-spacing:.08em; white-space:nowrap; }
    .nav { display:flex; align-items:center; gap:clamp(16px,2vw,34px); }
    .nav a { text-decoration:none; font-size:11px; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid transparent; padding:9px 0; }
    .nav a:hover, .nav a:focus-visible { border-color:currentColor; }
    .nav .rsvp-nav { border:1px solid rgba(255,250,243,.7); padding:12px 14px; }
    .menu-btn { display:none; background:none; color:var(--blanco); border:0; font-size:13px; padding:12px; cursor:pointer; }
    .hero-grid { max-width:1500px; margin:auto; padding:24px 5.5vw 0; display:grid; grid-template-columns:55% 45%; min-height:min(790px,calc(100svh - 86px)); position:relative; }
    .copy { position:relative; z-index:2; padding-top:clamp(55px,11vh,135px); padding-bottom:135px; }
    .eyebrow { margin:0 0 20px; font-size:12px; text-transform:uppercase; letter-spacing:.18em; opacity:.83; }
    h1 { font-family:'Caveat','Segoe Print',cursive; font-size:clamp(66px,8vw,122px); line-height:.83; font-weight:400; letter-spacing:-.04em; margin:0; transform:rotate(-2deg); max-width:740px; }
    .names { font-family:'Caveat','Segoe Print',cursive; font-size:clamp(52px,6vw,94px); line-height:1; margin:15px 0 0 70px; transform:rotate(-1deg); }
    .details { margin-top:clamp(52px,8vh,90px); display:flex; align-items:start; gap:32px; }
    .date { font-size:clamp(25px,2.4vw,35px); white-space:nowrap; letter-spacing:.06em; margin:0 0 15px; }
    .place { margin:0; font-size:15px; line-height:1.8; }
    .action { margin-top:37px; display:flex; align-items:center; gap:25px; flex-wrap:wrap; }
    .primary { background:var(--blanco); color:var(--teja); padding:17px 24px; text-decoration:none; border:1px solid var(--blanco); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
    .primary:hover { background:transparent; color:var(--blanco); }
    .secondary { text-decoration:none; font-size:12px; border-bottom:1px solid currentColor; padding:8px 0; }
    .photos { position:relative; min-height:720px; padding-top:28px; z-index:1; }
    .photo { position:absolute; width:clamp(225px,21vw,310px); aspect-ratio:1 / .89; object-fit:cover; filter:grayscale(1) contrast(.9) brightness(1.05); box-shadow:0 8px 30px rgba(36,9,4,.08); }
    .photo.one { top:25px; left:19%; object-position:50% 66%; }
    .photo.two { top:230px; left:42%; object-position:50% 48%; }
    .photo.three { top:438px; left:9%; object-position:60% 69%; }
    .photo-label { position:absolute; top:535px; left:13%; z-index:3; white-space:nowrap; font-size:11px; letter-spacing:.1em; transform:rotate(-90deg) translateX(-50%); transform-origin:left center; opacity:.75; }
    .pepper { position:absolute; right:1.7vw; top:-22px; width:110px; height:175px; opacity:.86; pointer-events:none; }
    .table-drawing { position:absolute; width:min(480px,45vw); bottom:-54px; right:-13px; opacity:.88; pointer-events:none; z-index:2; }
    .guide { color:var(--tinta); background:var(--papel); padding:65px 5.5vw 75px; }
    .guide-inner { max-width:1240px; margin:auto; display:grid; grid-template-columns:1.3fr 1fr 1fr auto; align-items:start; gap:35px; }
    .guide h2 { font-family:'Caveat','Segoe Print',cursive; font-size:44px; font-weight:400; margin:0; line-height:.85; color:var(--teja); }
    .guide small { text-transform:uppercase; letter-spacing:.15em; color:#8e7266; font-size:10px; display:block; margin-bottom:12px; }
    .guide p { font-size:14px; margin:0; line-height:1.55; }
    .guide a { white-space:nowrap; font-size:12px; text-underline-offset:5px; }
    .note { font-size:10px; line-height:1.4; opacity:.7; max-width:1500px; padding:0 5.5vw 20px; margin:auto; background:var(--teja); }
    .preview-note { position:fixed; z-index:10; left:50%; bottom:20px; transform:translateX(-50%); background:var(--blanco); color:var(--teja); border:1px solid var(--teja); padding:13px 18px; box-shadow:0 8px 26px #2b120944; font-size:12px; max-width:calc(100vw - 30px); width:max-content; display:none; text-align:center; }
    .preview-note.show { display:block; }
    @media(max-width:1050px){
      .nav { gap:14px; } .nav a { font-size:10px; }
      .hero-grid { grid-template-columns:54% 46%; }
      .photo { width:clamp(195px,25vw,260px); }
      .photo.two { top:220px; left:30%; } .photo.three { top:410px; }
      .guide-inner { grid-template-columns:1.2fr 1fr 1fr; }
      .guide-inner a { grid-column:2 / 4; }
    }
    @media(max-width:760px){
      .hero { min-height:0; }
      .topbar { height:65px; padding:0 22px; }
      .mark { font-size:13px; }
      .menu-btn { display:block; }
      .nav { display:none; position:absolute; top:65px; left:0; right:0; padding:18px 24px 24px; background:var(--teja); border-top:1px solid rgba(255,255,255,.25); box-shadow:0 15px 20px rgba(0,0,0,.12); }
      .nav.open { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
      .nav a { font-size:12px; padding:10px; }
      .hero-grid { display:flex; flex-direction:column; padding:11px 24px 0; min-height:0; }
      .copy { padding:18px 0 0; display:contents; }
      .eyebrow { order:1; font-size:10px; margin:0 0 20px; letter-spacing:.15em; }
      h1 { order:2; font-size:clamp(68px,17vw,100px); max-width:530px; }
      .names { order:3; font-size:clamp(54px,12vw,77px); margin:3px 0 9px 20px; }
      .photos { order:4; min-height:0; padding:0; margin:0 0 0 11%; width:75%; aspect-ratio: .99; }
      .photo { display:none; box-shadow:none; }
      .photo.three { display:block; top:0; left:0; width:100%; height:100%; aspect-ratio:auto; object-position:59% 74%; }
      .photo-label { display:none; }
      .details { order:5; margin:21px 0 0; display:block; }
      .date { font-size:clamp(24px,6vw,32px); margin-bottom:9px; }
      .place { font-size:13px; line-height:1.55; }
      .action { order:6; margin:25px 0 86px; gap:19px; }
      .primary { padding:15px 16px; font-size:10px; }
      .secondary { font-size:10px; }
      .pepper { right:0; top:-13px; width:77px; height:125px; }
      .table-drawing { width:260px; right:-50px; bottom:-52px; }
      .guide { padding:65px 24px; }
      .guide-inner { display:block; }
      .guide h2 { font-size:42px; margin-bottom:31px; }
      .guide-inner > div { margin-bottom:21px; }
      .guide a { display:inline-block; margin-right:20px; margin-top:8px; }
      .note { padding:0 24px 18px; }
    }
    @media(max-width:380px){ .action { align-items:flex-start; flex-direction:column; gap:10px; } .photos { margin-left:5%; width:90%; } }
      /* Explicit font rules also apply when the preview wraps the page body. */
    .hero, .hero p, .hero a, .hero button, .hero span,
    .guide p, .guide small, .guide a, .preview-note {font-family:'Courier Prime',monospace !important;}
    .hero h1, .hero p.names, .guide h2 {font-family:'Caveat',cursive !important;}
  
    .sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
    .original-heading {width:570px;max-width:94%;margin:0;transform:none;line-height:0;}
    .original-names {width:440px;max-width:84%;margin:-26px 0 0 58px;transform:none;line-height:0;}
    .lettering {display:block;width:100%;height:auto;overflow:hidden;}
    .original-garland {position:absolute;left:9%;top:-3px;width:520px;max-width:45%;height:auto;pointer-events:none;}
    .copy {padding-top:110px;}
    .original-pepper {width:70px;height:auto;right:2%;top:7px;opacity:1;}
    .original-table {width:345px;height:auto;right:-14px;bottom:-30px;opacity:1;}
    @media(max-width:760px){
      .hero-grid {padding-top:26px;}
      .original-garland {left:7%;top:0;width:260px;max-width:70%;}
      .original-heading {font-size:0;width:100%;max-width:100%;}
      .original-names {font-size:0;width:80%;max-width:80%;margin:-14px 0 19px 13px;}
      .original-pepper {width:32px;right:4%;top:-4px;}
      .original-table {width:205px;right:-32px;bottom:-32px;}
      .action {margin-bottom:116px;}
    }
  

    .wedding-section {background:var(--teja);color:var(--blanco);padding:76px 5.5vw 84px;scroll-margin-top:0;overflow:hidden;}
    .wedding-section, .wedding-section * {font-family:'Courier Prime',monospace;}
    .wedding-inner {max-width:930px;margin:auto;}
    .wedding-header {text-align:center;}
    .section-label {font-size:11px;text-transform:uppercase;letter-spacing:.2em;margin:0 0 23px;opacity:.8;}
    .wedding-header h2 {font-size:35px;font-weight:400;line-height:1.2;margin:0 0 16px;letter-spacing:.04em;}
    .wedding-header .wedding-date {font-size:14px;letter-spacing:.07em;margin:0 0 10px;}
    .wedding-header .wedding-time {font-size:13px;margin:0;opacity:.85;}
    .wedding-journey {position:relative;margin:30px auto 12px;max-width:850px;}
    .journey-track {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--blanco);opacity:.78;}
    .track-mobile {display:none;}
    .journey-row {position:relative;min-height:240px;display:flex;align-items:center;justify-content:flex-start;}
    .journey-row:nth-of-type(odd) {justify-content:flex-end;}
    .journey-stop {width:480px;display:flex;align-items:center;gap:26px;position:relative;padding:15px 5px;}
    .journey-art {width:155px;flex:0 0 155px;height:155px;overflow:visible;}
    .journey-table {width:190px;flex-basis:190px;height:160px;overflow:hidden;}
    .journey-copy {flex:1;}
    .journey-copy h3 {font-size:19px;font-weight:400;letter-spacing:.02em;line-height:1.3;margin:0 0 13px;text-transform:uppercase;}
    .journey-copy p {font-size:14px;line-height:1.65;margin:0;}
    .journey-row.celebration .journey-stop {width:505px;}
    .transport-note {text-align:center;font-size:12px;line-height:1.7;max-width:580px;margin:5px auto 65px;opacity:.85;}
    .dress-note {max-width:640px;margin:auto;text-align:center;border-top:1px solid #fffaf366;padding-top:40px;}
    .dress-note h3 {font-size:20px;font-weight:400;margin:0 0 19px;}
    .dress-note p {font-size:14px;line-height:1.8;margin:0;}
    .wedding-sketch {stroke:currentColor;stroke-width:2.25;fill:none;stroke-linecap:round;stroke-linejoin:round;}
    @media(max-width:760px){
      .wedding-section {padding:53px 22px 60px;}
      .wedding-header h2 {font-size:28px;margin-bottom:17px;}
      .wedding-header .wedding-date {font-size:12px;letter-spacing:0;}
      .wedding-header .wedding-time {font-size:12px;}
      .wedding-journey {margin-top:25px;}
      .journey-row {min-height:225px;}
      .journey-stop,.journey-row.celebration .journey-stop {width:94%;gap:14px;padding:12px 0;}
      .journey-art {width:100px;flex-basis:100px;height:120px;}
      .journey-table {width:120px;flex-basis:120px;height:120px;}
      .journey-copy h3 {font-size:15px;margin-bottom:10px;letter-spacing:0;}
      .journey-copy p {font-size:12px;line-height:1.7;}
      .track-desktop {display:none;}
      .track-mobile {display:block;}
      .transport-note {font-size:11px;margin:0 auto 42px;}
      .dress-note {padding-top:31px;}
      .dress-note h3 {font-size:19px;}
      .dress-note p {font-size:13px;line-height:1.8;}
    }
  
    /* Original icons supplied by Ángela, embedded without changing their strokes. */
    .supplied-icon {overflow:hidden;padding:12px;}
    .supplied-icon.journey-table {padding:4px;}
    .guide {position:relative;}
    .guide-heading {display:block;}
    .guide-heading, .guide-links {padding-left:28px;}
    .guide-heading h2 {flex:0 1 auto;}
    .guide-peppers {position:absolute;left:24px;top:14px;display:block;width:39px;height:72px;overflow:hidden;pointer-events:none;}
    @media(max-width:760px){
      .supplied-icon {padding:9px;}
      .supplied-icon.journey-table {padding:2px;}
      .guide-inner > .guide-heading {margin-bottom:31px;gap:19px;}
      .guide-heading h2 {margin-bottom:0;}
      .guide-peppers {left:18px;top:8px;width:28px;height:48px;}
    }