/* ───────────────────────────────────────────────────────────── Martina & Jolan — wedding site Theme variables are set per-direction on ───────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* ── shared layout primitives ── */ .wrap{max-width:1200px;margin:0 auto;padding:0 32px} .wrap-narrow{max-width:780px;margin:0 auto;padding:0 32px} .section{padding:120px 0;position:relative} .section-eyebrow{ font-family:var(--font-eyebrow); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-soft); } .rule{ display:block;height:1px;background:var(--ink-faint); border:0;margin:0;width:100%; } .hairline{height:1px;background:var(--ink-faint);width:60px;display:inline-block;vertical-align:middle} /* ── nav ── */ .nav{ position:sticky;top:0;z-index:50; background:color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); border-bottom:.5px solid var(--ink-faint); } .nav-inner{ max-width:1200px;margin:0 auto;padding:18px 32px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .nav-mark{ font-family:var(--font-display); font-size:20px;letter-spacing:.02em; } .nav-mark em{font-style:italic;font-family:var(--font-script);font-size:1.3em;letter-spacing:0;font-weight:400} .nav-links{ display:flex;gap:28px;flex-wrap:wrap; font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-soft); } .nav-links a{transition:color .2s} .nav-links a:hover{color:var(--accent)} .nav-rsvp{ font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.22em;text-transform:uppercase; padding:10px 18px;border:.5px solid var(--ink); color:var(--ink); transition:background .2s,color .2s; border-radius:var(--btn-radius); } .nav-rsvp:hover{background:var(--ink);color:var(--bg)} /* ── language switcher ── */ .nav-right{ display:flex;align-items:center;gap:18px; } .lang-switch{ display:flex;align-items:center;gap:6px; font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.2em; color:var(--ink-soft); } .lang-btn{ appearance:none;background:transparent;border:0;padding:4px 2px; font:inherit;letter-spacing:inherit;color:inherit; cursor:pointer;transition:color .15s; position:relative; } .lang-btn:hover{color:var(--ink)} .lang-btn.is-on{color:var(--ink)} .lang-btn.is-on::after{ content:"";position:absolute;left:2px;right:2px;bottom:-2px; height:1px;background:var(--accent); } .lang-sep{color:var(--ink-faint);user-select:none} /* ── hero ── */ .hero{ min-height:100vh; display:flex;align-items:center;justify-content:center; text-align:center; position:relative; padding:80px 32px; isolation:isolate; overflow:hidden; } .hero-bg{ position:absolute;inset:0;z-index:-2; overflow:hidden; } .hero-bg::before{ /* Show only the middle 70% of the source image (10% off top, 20% off bottom). The pseudo extends 10/70 = 14.286% above and 20/70 = 28.571% below the bg, so after overflow-hidden the visible 0–100% slice maps to image 10%–80%. */ content:""; position:absolute; top:-14.286%; bottom:-28.571%; left:0;right:0; background-image:var(--hero-bg-image); background-size:cover; background-position:center; background-repeat:no-repeat; filter:saturate(.92); } .hero-bg.ph::after{ /* keep the "what goes here" label in the corner, not centered */ position:absolute;left:50%;bottom:32px;transform:translateX(-50%); } .hero-veil{ position:absolute;inset:0;z-index:-1; background: /* soft cream halo behind the names */ radial-gradient(60% 45% at 50% 50%, color-mix(in oklab, var(--bg) 78%, transparent) 0%, color-mix(in oklab, var(--bg) 55%, transparent) 60%, color-mix(in oklab, var(--bg) 30%, transparent) 100%), /* light wash to bring everything into tonal harmony */ linear-gradient(180deg, color-mix(in oklab, var(--bg) 35%, transparent) 0%, color-mix(in oklab, var(--bg) 20%, transparent) 35%, color-mix(in oklab, var(--bg) 45%, transparent) 100%); } .hero > div{position:relative;z-index:1} .hero > .hero-bg, .hero > .hero-veil{position:absolute;z-index:-1} .hero > .hero-bg{z-index:-2} .hero-stamp{ font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.32em;text-transform:uppercase; color:var(--ink-soft); margin-bottom:36px; } .hero-names{ font-family:var(--font-display); font-weight:400; line-height:1; letter-spacing:var(--display-tracking, -.01em); font-size:clamp(40px,9.5vw,150px); margin:0; } @media (min-width: 480px){ .hero-names{white-space:nowrap} } .hero-names .amp{ display:inline-block; font-family:var(--font-script); font-style:italic; font-size:1.05em; vertical-align:-0.05em; color:var(--accent); font-weight:400; padding:0 .12em; letter-spacing:0; } .hero-meta{ margin-top:48px; display:flex;align-items:center;justify-content:center;gap:24px; font-family:var(--font-eyebrow); font-size:13px;letter-spacing:.28em;text-transform:uppercase; color:var(--ink-soft); flex-wrap:wrap; } .hero-meta .dot{ display:inline-block;width:5px;height:5px;border-radius:50%; background:var(--accent); } /* ── countdown ── */ .countdown{ margin:0 auto; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; max-width:560px; border-top:.5px solid var(--ink-faint); border-bottom:.5px solid var(--ink-faint); padding:20px 0; } .venue-content .countdown{ margin-top:40px; } .cd-cell{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; position:relative; } .cd-cell + .cd-cell::before{ content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%); width:1px;height:32px;background:var(--ink-faint); } .cd-num{ font-family:var(--font-display); font-size:clamp(28px,3.8vw,42px); line-height:1; font-variant-numeric:tabular-nums; font-weight:400; } .cd-lbl{ font-family:var(--font-eyebrow); font-size:10px;letter-spacing:.28em;text-transform:uppercase; color:var(--ink-soft); } /* ── story ── */ .story-grid{ display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center; } .story-image{ width:100%; display:block; } .ph.story-image{ aspect-ratio:4/5; } img.story-image{ aspect-ratio:4/5; height:auto; object-fit:cover; /* Couple is slightly right-of-centre; shift the crop window to keep their faces in the frame while the trees on the left bear the crop. */ object-position:62% 38%; filter:saturate(.96); } .story-h{ font-family:var(--font-display); font-size:clamp(40px,5vw,64px); line-height:1.02; font-weight:400; margin:24px 0 28px; letter-spacing:var(--display-tracking,-.01em); } .story-h em{ font-family:var(--font-script); font-style:italic; color:var(--accent); letter-spacing:0; font-weight:400; } .story-body p{ margin:0 0 18px; font-family:var(--font-body); font-size:18px;line-height:1.7; color:var(--ink); } .story-body p:last-child{margin-bottom:0} .story-pull{ margin:28px 0 0; font-family:var(--font-display); font-style:italic; font-size:24px;line-height:1.35; color:var(--accent); } /* ── venue ── */ .venue-section{ position:relative; min-height:100vh; display:flex;align-items:center;justify-content:center; overflow:hidden; isolation:isolate; padding:120px 32px; text-align:center; background:var(--bg-alt); } .venue-bg{ position:absolute;inset:0;z-index:-2; } .venue-bg img{ width:100%;height:100%; object-fit:cover; object-position:center; display:block; filter:saturate(.92); } .venue-veil{ position:absolute;inset:0;z-index:-1; background: /* soft cream halo behind the centred text */ radial-gradient(55% 45% at 50% 50%, color-mix(in oklab, var(--bg) 72%, transparent) 0%, color-mix(in oklab, var(--bg) 48%, transparent) 55%, color-mix(in oklab, var(--bg) 22%, transparent) 100%), /* gentle overall wash so text stays readable on the busy aerial */ linear-gradient(180deg, color-mix(in oklab, var(--bg) 18%, transparent) 0%, color-mix(in oklab, var(--bg) 28%, transparent) 100%); } .venue-content{ position:relative;z-index:1; max-width:720px; padding:0 16px; } .venue-h{ font-family:var(--font-display); font-size:clamp(44px,6vw,84px); line-height:.98; font-weight:400; margin:18px 0 8px; letter-spacing:var(--display-tracking,-.01em); } .venue-sub{ font-family:var(--font-body); font-style:italic; color:var(--ink-soft); font-size:20px; margin:0; } .venue-when{ font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.32em;text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; } .venue-time{ font-family:var(--font-display); font-size:clamp(52px,6.5vw,84px); line-height:1; letter-spacing:var(--display-tracking,-.01em); margin:0 0 18px; font-variant-numeric:tabular-nums; } .venue-where{ font-family:var(--font-body); font-style:italic;font-size:19px; color:var(--ink-soft); } /* ── accommodations ── */ .stay-section{ background:var(--bg-alt); padding-top:160px; padding-bottom:140px; } .section-opener{ display:flex;align-items:center;justify-content:center; gap:32px;margin-bottom:72px; } .section-opener-rule{ flex:0 0 140px;height:1px;background:var(--ink-faint); } .section-opener-glyph{ font-size:30px;line-height:1;color:var(--accent); letter-spacing:.2em; } .stay-section .venue-h{ font-size:clamp(50px,7vw,108px); } .stay-intro{ text-align:center;max-width:680px;margin:0 auto 72px; } .stay-intro p{ font-family:var(--font-body); font-size:18px;line-height:1.7; color:var(--ink); } .stay-list{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px; } .stay-card{ display:flex;flex-direction:column;gap:18px; padding:28px 0; border-top:.5px solid var(--ink); } .stay-img{aspect-ratio:5/4} img.stay-img{ width:100%;height:100%; object-fit:cover;display:block; filter:saturate(.94); } .stay-tag{ font-family:var(--font-eyebrow); font-size:10px;letter-spacing:.3em;text-transform:uppercase; color:var(--accent); } .stay-name{ font-family:var(--font-display); font-size:30px;line-height:1.1;font-weight:400; margin:0; letter-spacing:var(--display-tracking,-.01em); } .stay-meta{ font-family:var(--font-body); font-style:italic;font-size:15px; color:var(--ink-soft); } .stay-desc{ font-family:var(--font-body); font-size:16px;line-height:1.6; margin:0; } .stay-cta{ display:inline-block; font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--accent); margin-top:4px; } .stay-card-link{ transition:transform .15s ease; } .stay-card-link:hover{ transform:translateY(-2px); } .stay-card-link:hover .stay-name{ color:var(--accent); transition:color .15s ease; } /* ── dress code ── */ .dress-section{ position:relative; overflow:hidden; isolation:isolate; /* Sit on the deeper ink — the cream story-card floats above the photo. */ background:#1a1814; padding:160px 0 140px; } .dress-bg{ position:absolute;inset:0;z-index:-2; } .dress-bg img{ width:100%;height:100%; object-fit:cover; /* Pull the photo crop to the LEFT so the couple sits in the right side of the frame, leaving the empty path/garden on the left for the text card. */ object-position:18% center; display:block; filter:saturate(.92) contrast(.96); } .dress-veil{ position:absolute;inset:0;z-index:-1; background: /* darker wash on the LEFT where the text panel now sits */ linear-gradient(90deg, rgba(20,18,14,.50) 0%, rgba(20,18,14,.32) 35%, rgba(20,18,14,.10) 65%, rgba(20,18,14,.00) 100%), linear-gradient(180deg, rgba(20,18,14,.28) 0%, rgba(20,18,14,0) 18%, rgba(20,18,14,0) 80%, rgba(20,18,14,.30) 100%); } .dress-wrap{ position:relative;z-index:1; /* Pin the card to the LEFT now that the couple is to the right */ } .dress-content{ max-width:540px; background:color-mix(in oklab, var(--bg) 92%, transparent); padding:56px 52px; border:.5px solid var(--ink-faint); box-shadow:0 30px 80px -30px rgba(0,0,0,.45); margin-right:auto; margin-left:0; } .dress-section .section-opener-rule{background:rgba(255,255,255,.32)} .dress-section .section-opener-glyph{ color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.4); } .dress-h{ font-family:var(--font-display); font-size:clamp(44px,5.5vw,80px); line-height:.96;font-weight:400; margin:18px 0 28px; letter-spacing:var(--display-tracking,-.01em); } .dress-h em{ font-family:var(--font-script); font-style:italic;color:var(--accent); letter-spacing:0;font-weight:400; } .dress-line{ font-family:var(--font-body); font-size:18px;line-height:1.65;margin:0 0 18px; } .dress-line-soft{ font-style:italic; color:var(--ink-soft); } .dress-palette{ margin-top:8px; display:flex;gap:12px;align-items:center;flex-wrap:wrap; } .dress-swatch{ width:38px;height:38px;border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12); } .dress-palette-lbl{ font-family:var(--font-eyebrow); font-size:10px;letter-spacing:.28em;text-transform:uppercase; color:var(--ink-soft); margin-left:8px; } @media (max-width: 700px){ .dress-content{padding:36px 28px} .dress-section{padding:100px 0 100px} } /* ── travel (how to get there) ── */ .travel-tabs{ display:flex;justify-content:center;gap:0; margin:48px auto 56px; border-top:.5px solid var(--ink-faint); border-bottom:.5px solid var(--ink-faint); max-width:540px; } .travel-tab{ appearance:none;background:transparent;border:0; flex:1;padding:18px 8px; font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.28em;text-transform:uppercase; color:var(--ink-soft);cursor:pointer; transition:color .15s; position:relative; } .travel-tab + .travel-tab{border-left:.5px solid var(--ink-faint)} .travel-tab:hover{color:var(--ink)} .travel-tab.is-on{color:var(--ink)} .travel-tab.is-on::after{ content:"";position:absolute;left:50%;bottom:-1px; width:48px;height:2px;background:var(--accent); transform:translateX(-50%); } /* ── car panel ── */ .travel-car{ display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start; } .travel-map{ height:560px;width:100%; border:.5px solid var(--ink-faint); background:var(--bg-alt); /* Tile colour-shift to harmonise with the warm cream palette */ filter:saturate(.85) sepia(.05); } .travel-overview{ font-family:var(--font-body); font-size:17px;line-height:1.65;margin:0 0 22px; } .travel-overview-plane{margin-bottom:32px} .travel-meta{ display:flex;align-items:center;gap:16px; font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-soft); padding:14px 0; border-top:.5px solid var(--ink-faint); border-bottom:.5px solid var(--ink-faint); margin-bottom:32px; } .travel-meta strong{color:var(--ink);font-weight:500} .travel-meta .dot{ width:4px;height:4px;border-radius:50%;background:var(--accent); } .travel-legend-title{ font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.28em;text-transform:uppercase; color:var(--ink-soft);margin-bottom:16px; } .travel-stops-list{display:flex;flex-direction:column;gap:18px} .stop-card{ display:grid;grid-template-columns:44px 1fr;gap:18px; padding:20px; border:.5px solid var(--ink-faint); background:color-mix(in oklab, var(--bg) 70%, var(--bg-alt)); transition:border-color .2s, transform .2s; color:inherit; align-items:start; } .stop-card:hover{border-color:var(--ink);transform:translateY(-1px)} .stop-num{ width:34px;height:34px;border-radius:50%; background:var(--pin-color, var(--accent));color:#fff; display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-size:17px; font-variant-numeric:tabular-nums; margin-top:2px; } .stop-city{ font-family:var(--font-eyebrow); font-size:10px;letter-spacing:.28em;text-transform:uppercase; color:var(--ink-soft); } .stop-name{ font-family:var(--font-display); font-size:22px;line-height:1.2;margin:4px 0 6px; letter-spacing:var(--display-tracking,-.01em); } .stop-desc{ font-family:var(--font-body); font-size:15px;line-height:1.55;margin:0 0 12px; } .stop-cta{ font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--accent); } /* ── Leaflet pin markers (DivIcon HTML) ── */ .tv-pin{ position:relative; } .tv-pin-circle{ display:flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:50%; color:#fff;font-family:var(--font-display);font-size:14px;font-weight:500; box-shadow:0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.18); font-variant-numeric:tabular-nums; } .tv-pin-lbl{ position:absolute;top:32px;left:50%;transform:translateX(-50%); font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:#1c1a16; background:#fff; padding:3px 8px;border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.15); white-space:nowrap; } .tv-endpoint{position:relative} .tv-endpoint-dot{ display:block;width:10px;height:10px;border-radius:50%; box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.2); } .tv-endpoint-lbl{ position:absolute;top:14px;left:50%;transform:translateX(-50%); font-family:var(--font-eyebrow); font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:rgba(28,26,22,.7); background:rgba(255,255,255,.9); padding:2px 7px;border-radius:3px; white-space:nowrap; } /* ── plane panel ── */ .travel-plane{ max-width:680px;margin:0 auto; } .flight-card{ border:.5px solid var(--ink-faint); background:color-mix(in oklab, var(--bg) 70%, var(--bg-alt)); padding:40px 36px; margin-bottom:32px; } .flight-eyebrow{ font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.28em;text-transform:uppercase; color:var(--ink-soft);text-align:center;margin-bottom:24px; } .flight-route{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px; margin-bottom:28px; } .flight-end{text-align:center} .flight-code{ font-family:var(--font-display); font-size:56px;line-height:1; letter-spacing:var(--display-tracking,-.01em); font-variant-numeric:tabular-nums; } .flight-city{ font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.28em;text-transform:uppercase; color:var(--ink-soft);margin-top:8px; } .flight-line{ display:flex;align-items:center;gap:10px;min-width:120px; } .flight-dash{ flex:1;height:1px; } .flight-plane{font-size:22px;line-height:1} .flight-meta{ display:flex;align-items:center;justify-content:center;gap:14px; font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-soft); padding-top:20px;border-top:.5px solid var(--ink-faint); } .flight-meta .dot{ width:4px;height:4px;border-radius:50%;background:var(--accent); } .flight-then{ text-align:center;margin-top:16px; font-family:var(--font-body);font-style:italic; color:var(--ink-soft);font-size:15px; } .travel-ctas{ display:flex;gap:14px;justify-content:center;flex-wrap:wrap; } .travel-btn{ display:inline-block; font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.28em;text-transform:uppercase; padding:14px 22px; border-radius:var(--btn-radius); transition:transform .15s, background .15s, color .15s; } .travel-btn-ghost{ border:.5px solid var(--ink);color:var(--ink); } .travel-btn-ghost:hover{background:var(--ink);color:var(--bg)} .travel-btn-solid{ background:var(--accent);color:#fff;border:.5px solid var(--accent); } .travel-btn-solid:hover{filter:brightness(.92);transform:translateY(-1px)} @media (max-width: 880px){ .travel-car{grid-template-columns:1fr;gap:32px} .travel-map{height:360px} .travel-tabs{margin:32px auto 32px} .flight-card{padding:28px 22px} .flight-code{font-size:44px} } /* ── footer ── */ .foot{ padding:120px 32px 64px; text-align:center; } .foot-monogram{ font-family:var(--font-script); font-size:96px;line-height:1; color:var(--accent); margin:0 0 24px; } .foot-line{ font-family:var(--font-display); font-style:italic; font-size:24px; margin:0 0 16px; } .foot-meta{ font-family:var(--font-eyebrow); font-size:11px;letter-spacing:.3em;text-transform:uppercase; color:var(--ink-soft); } /* ── placeholders (image slots — striped, with mono caption) ── */ .ph{ position:relative; background-image:repeating-linear-gradient( 45deg, color-mix(in oklab, var(--ink) 8%, transparent) 0 1px, transparent 1px 12px ); background-color:color-mix(in oklab, var(--ink) 4%, var(--bg)); display:flex;align-items:center;justify-content:center; border:.5px solid var(--ink-faint); overflow:hidden; } .ph::after{ content:attr(data-label); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-soft); background:var(--bg); padding:8px 14px; border:.5px solid var(--ink-faint); } /* ── motif: olive sprig and others ── */ .motif{ display:inline-block; color:var(--accent); opacity:.85; } .motif-divider{ display:flex;align-items:center;justify-content:center;gap:16px; margin:48px auto;color:var(--ink-soft); } .motif-divider .hairline{flex:0 0 60px} /* ── DIRECTION 1 — Lettera (Editorial love-letter) ── */ body[data-dir="lettera"]{ --bg:#f5efe4; --bg-alt:#ede4d2; --ink:#2a2620; --ink-soft:rgba(42,38,32,.6); --ink-faint:rgba(42,38,32,.18); --accent:#b85b3a; /* terracotta */ --accent-2:#5e6b3a; /* olive */ --font-display:'Italiana', serif; --font-body:'EB Garamond', serif; --font-eyebrow:'EB Garamond', serif; --font-script:'Tangerine', cursive; --display-tracking:.01em; --btn-radius:0px; } body[data-dir="lettera"] .hero-names{letter-spacing:.04em} body[data-dir="lettera"] .nav-mark{letter-spacing:.18em;text-transform:uppercase;font-size:14px} /* ── DIRECTION 2 — Manifesto (Bold typographic poster) ── */ body[data-dir="manifesto"]{ --bg:#f0eadc; --bg-alt:#e3d9bf; --ink:#1c1a16; --ink-soft:rgba(28,26,22,.62); --ink-faint:rgba(28,26,22,.22); --accent:#c87a2c; /* ochre */ --accent-2:#6b3a1f; /* sienna */ --font-display:'DM Serif Display', serif; --font-body:'DM Serif Text', serif; --font-eyebrow:'IBM Plex Mono', ui-monospace, monospace; --font-script:'Pinyon Script', cursive; --display-tracking:-.02em; --btn-radius:0px; } body[data-dir="manifesto"] .hero-names{ font-style:italic; letter-spacing:-.03em; } body[data-dir="manifesto"] .nav-mark{letter-spacing:-.01em} /* ── DIRECTION 3 — Vigneto (Soft sage on cream) ── */ body[data-dir="vigneto"]{ --bg:#eee9dc; --bg-alt:#e2ddc8; --ink:#2a2e22; --ink-soft:rgba(42,46,34,.6); --ink-faint:rgba(42,46,34,.2); --accent:#6a7a48; /* sage/olive */ --accent-2:#a36b3f; /* clay */ --font-display:'Cormorant Garamond', serif; --font-body:'Cormorant Infant', serif; --font-eyebrow:'Cormorant Garamond', serif; --font-script:'Tangerine', cursive; --display-tracking:0; --btn-radius:999px; } body[data-dir="vigneto"] .hero-names{font-weight:300;letter-spacing:.005em} body[data-dir="vigneto"] .section-eyebrow, body[data-dir="vigneto"] .nav-links, body[data-dir="vigneto"] .nav-rsvp, body[data-dir="vigneto"] .cd-lbl, body[data-dir="vigneto"] .stay-tag, body[data-dir="vigneto"] .dress-palette-lbl, body[data-dir="vigneto"] .foot-meta, body[data-dir="vigneto"] .venue-when{ font-style:italic;letter-spacing:.18em;font-weight:500; } body[data-dir="vigneto"] .nav-mark{font-style:italic} /* ── responsive ── */ @media (max-width: 880px){ .section{padding:80px 0} .stay-section{padding:100px 0} .section-opener-rule{flex:0 0 60px} .section-opener{gap:20px;margin-bottom:48px} .story-grid{grid-template-columns:1fr;gap:48px} .stay-list{grid-template-columns:repeat(2,minmax(0,1fr))} .nav-links{display:none} .nav-inner{gap:14px} .nav-right{gap:12px} .countdown{grid-template-columns:repeat(4,1fr);gap:4px;padding:20px 0} .wrap,.wrap-narrow{padding:0 22px} } @media (max-width: 600px){ .stay-list{grid-template-columns:1fr} }