@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=Noto+Serif+SC:wght@400;500;600&display=swap');

:root { --ink: #263239; --muted: #69777d; --paper: #f3f1ed; --mist: #e5ecee; --line: rgba(38,50,57,.16); --accent: #b97263; --serif: 'Playfair Display','Noto Serif SC',Georgia,serif; --mono: 'DM Mono',ui-monospace,monospace; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--serif); } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; } button { cursor: pointer; } .site-header { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 5vw, 72px); color: white; mix-blend-mode: difference; } .brand { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; } .brand span { opacity: .55; } .brand small { display: block; margin-top: 5px; font-size: 8px; opacity: .75; letter-spacing: .14em; } .site-nav { display: flex; gap: 24px; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; } .site-nav a { opacity: .76; transition: opacity .2s; } .site-nav a:hover { opacity: 1; } .menu-toggle { display: none; background: none; border: 0; padding: 8px; } .menu-toggle span { display: block; width: 22px; height: 1px; margin: 5px 0; background: currentColor; }
.hero { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; color: white; background: #58666c var(--hero-image) center/cover no-repeat; } .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,31,35,.34), rgba(23,31,35,.1) 48%, rgba(23,31,35,.6)); } .hero-scrim { position: absolute; inset: 0; background: rgba(25,35,40,.12); z-index: 1; } .hero-content { position: relative; z-index: 2; width: min(920px, 88vw); padding-top: 8vh; } .eyebrow, .section-label, .card-kicker { margin: 0; color: currentColor; font: 10px var(--mono); letter-spacing: .15em; text-transform: uppercase; } .hero h1 { margin: 20px 0 24px; font-size: clamp(64px, 12vw, 164px); line-height: .84; font-weight: 500; letter-spacing: -.055em; } em { font-style: italic; font-weight: 500; } .hero-names { display: flex; align-items: center; gap: 12px; font-size: clamp(20px, 3vw, 32px); letter-spacing: .02em; } .hero-names i { opacity: .6; font-style: normal; } .hero-date { margin-top: 13px; font: 13px var(--mono); letter-spacing: .14em; } .hero-date b { padding: 0 6px; opacity: .45; } .scroll-cue { display: inline-flex; align-items: center; gap: 10px; margin-top: 15vh; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.5); font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; } .scroll-cue span { font-size: 16px; } .hero-credit { position: absolute; z-index: 2; right: 5vw; bottom: 35px; font: 9px var(--mono); letter-spacing: .18em; writing-mode: vertical-rl; opacity: .7; }
.section { width: min(1180px, 88vw); margin: 0 auto; padding: clamp(86px, 12vw, 180px) 0; } .section-label { margin-bottom: 60px; color: var(--muted); } .section-heading { margin-bottom: 55px; } .section-heading h2, .story-title h2, .tips-layout h2, .rsvp-card h2 { margin: 16px 0 0; font-size: clamp(42px, 6vw, 82px); line-height: 1.04; font-weight: 500; letter-spacing: -.045em; } .story-section { padding-bottom: 120px; } .story-layout, .tips-layout, .rsvp-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 10vw, 150px); align-items: end; } .story-copy { max-width: 420px; color: var(--muted); font-size: 18px; line-height: 1.95; } .signature { display: block; margin-top: 34px; color: var(--ink); font: 32px var(--serif); font-style: italic; }
.details-section { width: 100%; padding-left: 6vw; padding-right: 6vw; background: var(--mist); } .date-panel { display: grid; grid-template-columns: .9fr 1.1fr; align-items: end; gap: 10vw; padding: 40px 0 90px; border-top: 1px solid var(--line); } .big-date { margin: 12px 0 0; font-size: clamp(100px, 18vw, 240px); line-height: .76; letter-spacing: -.1em; } .big-date i { padding: 0 10px; color: var(--accent); font-size: .55em; font-style: normal; letter-spacing: 0; } .weekday { margin-top: 25px; color: var(--muted); font: 12px var(--mono); letter-spacing: .12em; } .venue-copy { max-width: 500px; } .venue-copy h2 { margin: 13px 0 15px; font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -.04em; } .venue-copy > p:not(.card-kicker) { color: var(--muted); line-height: 1.7; } .button-row { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; } .button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 12px 18px; border: 1px solid var(--ink); font: 10px var(--mono); letter-spacing: .06em; transition: .2s; } .button-dark { color: var(--paper); background: var(--ink); } .button-dark:hover { background: var(--accent); border-color: var(--accent); } .button-outline { border-color: var(--line); } .button-outline:hover { border-color: var(--ink); } .countdown-wrap { display: flex; justify-content: space-between; gap: 40px; padding-top: 30px; border-top: 1px solid var(--line); } .countdown-wrap h3 { margin: 14px 0 0; font-size: clamp(28px, 4vw, 52px); font-weight: 500; } .timeline { display: flex; gap: clamp(25px, 5vw, 70px); } .timeline-item { display: grid; gap: 10px; align-content: start; } .timeline-item strong { font: 25px var(--mono); } .timeline-item span { color: var(--muted); font-size: 14px; }
.transport-section { padding-bottom: 80px; } .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .info-card { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding: 28px; border-top: 1px solid var(--line); background: rgba(255,255,255,.28); } .card-index { color: var(--accent); font: 11px var(--mono); } .info-card h3, .place-card h3, .food-row h3, .empty-state h3 { margin: 9px 0; font-size: 24px; font-weight: 500; } .info-card p:not(.card-kicker), .place-card p:not(.card-kicker), .food-row p:not(.card-kicker), .empty-state p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.7; } .text-link { display: inline-block; margin-top: 9px; font: 10px var(--mono); border-bottom: 1px solid var(--line); } .guide-section { padding-top: 100px; } .travel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .place-card { background: var(--mist); } .place-card:nth-child(4), .place-card:nth-child(5) { grid-column: span 1; } .place-card img { display: block; width: 100%; aspect-ratio: 1.1; object-fit: cover; filter: saturate(.75); } .place-body { padding: 20px; } .subhead { margin: 100px 0 38px; } .subhead h3 { margin: 12px 0 0; font-size: clamp(30px, 4vw, 52px); font-weight: 500; } .food-list { border-top: 1px solid var(--line); } .food-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 25px 0; border-bottom: 1px solid var(--line); } .food-meta { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 9px; color: var(--muted); font: 11px var(--mono); } .food-meta small { grid-column: 1 / -1; font: 12px var(--serif); } .empty-state { max-width: 650px; padding: 42px; background: var(--mist); } .empty-state h3 { font-size: 34px; }
.gallery-section { padding-bottom: 130px; } .gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; } .gallery-heading p:last-child { max-width: 180px; margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.6; } .gallery-grid { columns: 3 220px; column-gap: 14px; } .gallery-item { display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: none; break-inside: avoid; overflow: hidden; } .gallery-item img { display: block; width: 100%; transition: transform .6s ease, filter .4s; filter: saturate(.78); } .gallery-item:hover img { transform: scale(1.035); filter: saturate(1); } .tips-section { padding-top: 100px; padding-bottom: 150px; background: #eee8e1; max-width: none; width: 100%; padding-left: 6vw; padding-right: 6vw; } .tips-layout { max-width: 1180px; margin: 0 auto; } .tips-list { border-top: 1px solid var(--line); } .tip { display: grid; grid-template-columns: 45px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); } .tip span { color: var(--accent); font: 11px var(--mono); } .tip p { margin: 0; font-size: 16px; line-height: 1.7; }
.rsvp-section { padding-bottom: 160px; } .rsvp-card { align-items: start; padding-top: 40px; border-top: 1px solid var(--line); } .rsvp-card > div:first-child > p:not(.eyebrow) { max-width: 310px; margin-top: 22px; color: var(--muted); line-height: 1.7; } .rsvp-form { display: grid; gap: 15px; max-width: 390px; } .rsvp-form label { display: grid; gap: 8px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; } .rsvp-form input, .rsvp-form select { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); outline: 0; color: var(--ink); background: transparent; } .rsvp-form input:focus, .rsvp-form select:focus { border-color: var(--ink); } .form-note { margin: 0; color: var(--muted); font-size: 12px; } .form-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .ending { position: relative; min-height: 86svh; display: grid; place-items: center; overflow: hidden; color: white; background: #546169 var(--ending-image) center/cover no-repeat; } .ending::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,31,35,.2), rgba(23,31,35,.6)); } .ending-scrim { position: absolute; inset: 0; background: rgba(25,35,40,.13); z-index: 1; } .ending-content { position: relative; z-index: 2; width: min(1180px, 88vw); } .ending-content h2 { margin: 25px 0 45px; font-size: clamp(46px, 7vw, 100px); line-height: 1.02; font-weight: 500; letter-spacing: -.05em; } .ending-names { font-size: 20px; } .music-button { position: fixed; z-index: 30; right: 22px; bottom: 22px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: white; background: rgba(30,40,44,.42); font-size: 18px; } .music-button.playing { animation: pulse 1.8s infinite; } @keyframes pulse { 50% { transform: scale(1.08); } } .lightbox { width: min(92vw, 1100px); height: min(90vh, 850px); padding: 50px 70px; border: 0; color: white; background: rgba(19,25,28,.96); } .lightbox::backdrop { background: rgba(10,15,18,.78); } .lightbox img { display: block; width: 100%; height: 100%; object-fit: contain; } .lightbox button { position: absolute; border: 0; color: white; background: none; } .lightbox-close { top: 12px; right: 20px; font-size: 34px; } .lightbox-prev, .lightbox-next { top: 50%; font-size: 48px; transform: translateY(-50%); } .lightbox-prev { left: 18px; } .lightbox-next { right: 18px; } .lightbox p { position: absolute; bottom: 14px; left: 50%; margin: 0; transform: translateX(-50%); font: 10px var(--mono); letter-spacing: .15em; }
.site-footer { padding: 18px 20px 26px; color: rgba(255,255,255,.76); background: #263239; text-align: center; font: 11px var(--mono); letter-spacing: .04em; } .site-footer a { text-decoration: underline; text-underline-offset: 3px; }
.landing { min-height: 100svh; display: grid; place-items: center; background: linear-gradient(135deg, #e3ebed, #f2eee7); } .landing-shell { width: min(900px, 86vw); text-align: center; } .landing-shell h1 { margin: 22px 0 10px; font-size: clamp(46px, 9vw, 98px); font-weight: 500; letter-spacing: -.07em; } .landing-shell h1 span { color: var(--accent); font-style: italic; } .landing-copy { color: var(--muted); font-size: 16px; } .edition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 55px 0 24px; text-align: left; } .edition-card { position: relative; display: grid; gap: 12px; min-height: 220px; padding: 28px; border: 1px solid var(--line); background: rgba(255,255,255,.3); transition: transform .3s, background .3s; } .edition-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.7); } .edition-card--female { background: #ecedf0; } .edition-card--male { background: #e8e6e0; } .edition-label { font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; } .edition-card strong { align-self: end; font-size: 34px; font-weight: 500; } .edition-card small { color: var(--muted); font-size: 13px; } .arrow { position: absolute; top: 23px; right: 24px; font: 23px var(--mono); } .landing-note { color: var(--muted); font-size: 12px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 720px) { .site-header { padding: 18px 20px; } .menu-toggle { display: block; color: white; } .site-nav { position: absolute; top: 65px; left: 20px; right: 20px; display: none; flex-direction: column; gap: 0; padding: 8px 18px; color: var(--ink); background: rgba(243,241,237,.95); mix-blend-mode: normal; } .site-nav.is-open { display: flex; } .site-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); } .hero-content { padding-top: 12vh; } .hero h1 { font-size: clamp(57px, 17vw, 100px); } .hero-credit { display: none; } .section { width: 86vw; padding: 88px 0; } .section-label { margin-bottom: 42px; } .story-layout, .tips-layout, .rsvp-card, .date-panel { grid-template-columns: 1fr; gap: 45px; } .story-copy { font-size: 16px; } .details-section, .tips-section { padding-left: 7vw; padding-right: 7vw; } .big-date { font-size: 35vw; } .countdown-wrap { display: grid; gap: 32px; } .timeline { justify-content: space-between; } .card-grid, .travel-grid { grid-template-columns: 1fr; } .place-card:nth-child(4), .place-card:nth-child(5) { grid-column: auto; } .gallery-heading { display: block; } .gallery-heading p:last-child { margin-top: 25px; } .gallery-grid { columns: 2 130px; column-gap: 9px; } .gallery-item { margin-bottom: 9px; } .food-row { grid-template-columns: 1fr; gap: 12px; } .food-meta { grid-template-columns: 1fr 1fr; } .rsvp-form { max-width: none; } .ending-content h2 { font-size: 52px; } .edition-grid { grid-template-columns: 1fr; margin-top: 35px; } .edition-card { min-height: 175px; } }
.form-status { margin: 0; color: var(--accent); font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.hero h1 { font-size: clamp(64px, 10vw, 136px); }
body[data-variant="male"] .hero { background-position: center top; }
body { font-size: 17px; } .story-copy { font-size: 19px; } .info-card p:not(.card-kicker), .place-card p:not(.card-kicker), .food-row p:not(.card-kicker), .gallery-heading p:last-child { font-size: 15px; }
.gallery-grid { display: grid; gap: clamp(54px, 9vw, 118px); columns: auto; } .gallery-scene { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 84px); align-items: center; } .gallery-scene:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(150px, .45fr); } .gallery-scene:nth-child(even) .gallery-scene-copy { grid-column: 2; grid-row: 1; } .gallery-scene:nth-child(even) .gallery-pair { grid-column: 1; grid-row: 1; } .gallery-scene-copy { max-width: 220px; } .gallery-scene-copy h3 { margin: 12px 0 10px; font-size: clamp(34px, 4vw, 58px); font-weight: 500; line-height: 1; } .gallery-scene-copy p:last-child { margin: 0; color: var(--muted); line-height: 1.7; } .gallery-pair { display: grid; grid-template-columns: 1.18fr .82fr; gap: 14px; align-items: start; } .gallery-pair .gallery-item { margin: 0; break-inside: auto; } .gallery-pair .gallery-item:nth-child(2) { margin-top: clamp(32px, 7vw, 96px); } .gallery-pair img { min-height: 260px; height: min(48vw, 520px); object-fit: cover; } .gallery-pair .gallery-item:nth-child(2) img { height: min(38vw, 410px); } .edition-card { border-radius: 3px; box-shadow: 0 18px 34px rgba(38,50,57,.06); } .edition-card strong { font-size: clamp(36px, 4vw, 48px); }
@media (max-width: 720px) { body { font-size: 16px; } .story-copy { font-size: 17px; } .gallery-grid { gap: 58px; } .gallery-scene, .gallery-scene:nth-child(even) { grid-template-columns: 1fr; gap: 20px; } .gallery-scene:nth-child(even) .gallery-scene-copy, .gallery-scene:nth-child(even) .gallery-pair { grid-column: auto; grid-row: auto; } .gallery-scene-copy { max-width: none; } .gallery-scene-copy h3 { font-size: 38px; } .gallery-pair { grid-template-columns: 1.08fr .92fr; gap: 9px; } .gallery-pair img { min-height: 220px; height: 60vw; } .gallery-pair .gallery-item:nth-child(2) { margin-top: 38px; } .gallery-pair .gallery-item:nth-child(2) img { height: 48vw; } .edition-card strong { font-size: 38px; } }