@charset "UTF-8";
:root {
  --paper: #f7f5ed;
  --green: #e8eddf;
  --ink: #596f55;
  --wine: #9e4f5e;
  --serif: "Cormorant Infant", Georgia, serif;
  --hand: "Caveat", "Cormorant Infant", cursive;
  --sans: "Manrope", sans-serif;
  --ink-filter: url("#palette-ink");
  --wine-filter: url("#palette-wine");
  --paper-filter: url("#palette-paper");
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; color: var(--ink); background: var(--green); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .035; background-color: var(--ink); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E"); }
.palette-filters { position: absolute; width: 0; height: 0; pointer-events: none; }
main { width: min(960px, calc(100% - 64px)); margin-inline: auto; background: var(--paper); overflow: clip; }
::selection { background: var(--wine); color: var(--paper); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
h2, h3 { font-family: var(--serif); letter-spacing: -.045em; }
h2 { font-size: 76px; line-height: .98; }
h2 i { font-style: normal; }
p { line-height: 1.7; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; }
.eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; }
.handwritten { font-family: var(--hand); font-weight: 500; font-size: 32px; line-height: 1.2; }
.illustration { object-fit: contain; filter: var(--ink-filter); }
.section-shell { width: min(800px, calc(100% - 96px)); margin-inline: auto; }
.section-index { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.section-index > span:first-child { color: var(--wine); font-family: var(--hand); font-size: 24px; letter-spacing: 0; }
.index-line { display: none; }

/* The opening reads from top to bottom at every screen size. */
.intro { padding: 53px 40px 75px; text-align: center; }
.intro__eyebrow { color: var(--wine); }
.intro__title { margin: 35px auto 0; }
h1 { color: var(--wine); font-family: var(--hand); font-size: 120px; font-weight: 500; line-height: .86; letter-spacing: -.035em; }
h1 > span { display: block; }
.intro__name-line { margin-top: 7px; }
.intro__photos { width: min(610px, 100%); margin: 55px auto 0; padding-block: 12px 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: start; }
/* Keep the existing photo stock, crop, border, shadow and handwriting. */
.photograph { background: var(--paper); padding: 10px 10px 15px; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); box-shadow: 0 5px 13px color-mix(in srgb, var(--ink) 8%, transparent); position: relative; }
.photograph--left { width: 230px; justify-self: center; transform: rotate(-7deg); }
.photograph--right { width: 255px; justify-self: center; transform: rotate(7deg); margin-top: 24px; }
.photograph img { width: 100%; height: auto; }
.photograph--left img { aspect-ratio: 4/4.7; object-fit: cover; object-position: 50% 40%; }
.photograph--right img { aspect-ratio: 4/3.4; object-fit: cover; object-position: 50% 50%; }
.photograph figcaption { color: var(--wine); font-family: var(--hand); font-size: 25px; font-weight: 500; padding-top: 8px; }
.intro__copy { max-width: 530px; margin: 24px auto 0; }
.intro__note { font-size: 32px; line-height: 1.28; }

/* Uneven pen strokes are drawn at their actual size, without stretched waves. */
[data-scallop] { position: relative; isolation: isolate; }
[data-scallop]:not(.has-scallop) { outline: 1px solid currentColor; outline-offset: -10px; }
.scallop-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: visible; }
.scallop-frame path { fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linejoin: round; stroke-linecap: round; }
.scallop-frame .hand-second { stroke-width: 1.1; opacity: .8; }
.scallop-frame .hand-retrace { stroke-width: .8; opacity: .6; }
.scallop-frame .hand-fill { fill: var(--frame-fill, var(--wine)); stroke: var(--frame-fill, var(--wine)); stroke-width: 1.5; }
.scallop-frame .hand-inset { stroke: var(--paper); stroke-width: 1.15; opacity: .65; }

.venue { padding-bottom: 86px; text-align: center; }
.venue__invitation { max-width: 760px; margin: 29px auto 0; padding: 50px 46px 47px; }
.venue__heading h2 { font-size: 74px; }
.venue__date { color: var(--wine); font-family: var(--hand); font-weight: 500; font-size: 45px; line-height: 1.15; margin-top: 22px; }
.venue__time { font-family: var(--hand); font-size: 31px; margin-top: 3px; line-height: 1.4; }
.venue__time > span[aria-hidden] { margin-inline: 10px; }
.venue__glasses { width: 180px; height: 139px; margin: 23px auto 16px; }
.venue__card h3 { color: var(--wine); font-family: var(--hand); font-size: 51px; font-weight: 500; letter-spacing: -.025em; line-height: 1.05; }
.venue__address { max-width: 410px; margin: 17px auto 0; font-size: 16px; }
.map-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 24px; padding: 10px 32px 12px; border: 1px solid var(--wine); border-radius: 30px 27px 31px 24px / 24px 25px 23px 26px; background: var(--wine); color: var(--paper); font-family: var(--serif); font-size: 25px; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.map-link:hover { background: var(--paper); color: var(--wine); }

.timing { position: relative; background: var(--green); }
.timing::before, .timing::after { content: ""; position: absolute; left: 0; width: 100%; height: 14px; background-size: 28px 14px; }
.timing::before { top: -13px; background-image: radial-gradient(circle at 50% 100%, var(--green) 13.5px, transparent 14px); }
.timing::after { bottom: -13px; background-image: radial-gradient(circle at 50% 0%, var(--green) 13.5px, transparent 14px); }
.timing.has-drawn-edges::before, .timing.has-drawn-edges::after { display: none; }
.timing-edge { position: absolute; left: 0; width: 100%; height: 22px; pointer-events: none; fill: var(--green); }
.timing-edge--top { top: -21px; }
.timing-edge--bottom { bottom: -21px; transform: rotate(180deg); }
.timing__inner { padding-block: 53px 64px; }
.timing__intro { text-align: center; margin-top: 27px; }
.timing__intro h2 { color: var(--wine); }
.timing__intro > p { max-width: 420px; margin: 21px auto 0; font-size: 16px; }
.timing__couple { width: 169px; height: 125px; margin: 16px auto 0; filter: var(--wine-filter); }
.timeline { max-width: 680px; margin: 25px auto 0; padding: 0; list-style: none; }
.timeline__item { --time-width: 99px; --dot-width: 9px; --row-gap: 23px; display: grid; grid-template-columns: var(--time-width) var(--dot-width) 1fr; column-gap: var(--row-gap); position: relative; min-height: 119px; padding-bottom: 27px; }
.timeline__item::before { content: ""; position: absolute; width: 1px; background: color-mix(in srgb, var(--wine) 34%, transparent); top: 21px; bottom: -21px; left: calc(var(--time-width) + var(--row-gap) + (var(--dot-width) - 1px) / 2); }
.timeline__item:last-child { min-height: 0; padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }
.timeline__item time { color: var(--wine); font-family: var(--hand); font-size: 42px; font-weight: 500; line-height: 1.1; white-space: nowrap; }
.timeline__dot { width: var(--dot-width); height: var(--dot-width); border: 1.5px solid var(--wine); border-radius: 50%; background: var(--green); margin-top: 19px; }
.timeline__item h3 { font-size: 36px; line-height: 1.08; letter-spacing: -.025em; }
.timeline__item p { font-size: 16px; line-height: 1.65; margin-top: 8px; max-width: 430px; }
.timeline__item:has(.timeline__cake) > div { padding-right: 95px; }
.timeline__cake { position: absolute; width: 75px; height: 105px; right: 0; top: -6px; filter: var(--wine-filter); }

.details { padding-block: 76px 0; }
.details__title { color: var(--wine); text-align: center; margin-top: 25px; }
.details__layout { max-width: 760px; margin: 36px auto 0; }
.wishes > h3 { color: var(--ink); font-size: 53px; text-align: center; line-height: 1; margin-bottom: 25px; }
.wish-card { position: relative; text-align: center; padding: 44px 74px 46px; }
.wish-card + .wish-card { margin-top: 26px; }
.wish-card p { max-width: 530px; margin-inline: auto; font-size: 16px; line-height: 1.75; }
.wish-card--wine { --frame-fill: var(--ink); color: var(--paper); background: var(--ink); border-radius: 30px; }
.wish-card--wine.has-scallop { background: transparent; }
.wish-card__glasses { width: 155px; height: 112px; margin: 0 auto 22px; filter: var(--paper-filter); }
.wish-card--gift { --scallop-inset: 12; color: var(--wine); background: var(--green); }
.wish-card--gift p { color: var(--ink); }
.wish-card__envelope { width: 112px; height: 85px; margin: 0 auto 24px; filter: var(--wine-filter); }
.dresscode { --frame-fill: var(--wine); color: var(--paper); background: var(--wine); border-radius: 32px; text-align: center; margin-top: 38px; padding: 45px 65px 48px; }
.dresscode.has-scallop { background: transparent; }
.dresscode h3 { font-size: 72px; line-height: 1; }
.dresscode__main { max-width: 470px; margin: 23px auto 0; font-size: 16px; line-height: 1.7; }
.dresscode__note { font-size: 35px; margin-top: 27px; }

.countdown { padding: 65px 40px 78px; text-align: center; }
.countdown__content { max-width: 780px; margin-inline: auto; }
.countdown__rings { width: 156px; height: 105px; margin: 0 auto 24px; filter: var(--wine-filter); }
.countdown h2 { color: var(--wine); max-width: 680px; margin-inline: auto; font-size: 65px; line-height: 1; }
.countdown__digits { display: flex; justify-content: center; align-items: flex-start; gap: 20px; margin-top: 34px; }
.countdown__unit { min-width: 89px; }
.countdown__unit:first-child { min-width: 115px; }
.countdown__unit > span:first-child { display: block; color: var(--wine); font-family: var(--hand); font-size: 86px; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.countdown__unit > span:last-child { display: block; font-size: 10px; margin-top: 12px; text-transform: uppercase; letter-spacing: .13em; }
.countdown__separator { color: var(--wine); font-family: var(--hand); font-size: 40px; line-height: 1.9; opacity: .7; }
.countdown__goodbye { color: var(--wine); margin-top: 45px; font-size: 39px; }
.countdown__goodbye p { line-height: 1.2; }
.countdown__names { margin-top: .15em; }

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease; }
  .motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
  .intro__title { animation: arrive .85s ease both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .photograph--left { width: 200px; }
  .photograph--right { width: 215px; }
}
@media (min-width: 701px) and (max-width: 850px) {
  .photograph--left { width: 155px; }
  .photograph--right { width: 170px; }
  .photograph figcaption { font-size: 21px; }
  .intro__photos { max-width: 460px; }
  h1 { font-size: 106px; }
  .section-shell { width: calc(100% - 72px); }
  h2 { font-size: 66px; }
  .venue__invitation { padding-inline: 34px; }
  .wish-card { padding-inline: 51px; }
  .dresscode { padding-inline: 48px; }
  .timeline__item { --time-width: 86px; --row-gap: 19px; }
  .timeline__item h3 { font-size: 33px; }
  .countdown__digits { gap: 12px; }
  .countdown h2 { font-size: 60px; }
}
@media (max-width: 700px) {
  body { font-size: 14px; }
  main { width: 100%; }
  .section-shell { width: calc(100% - 40px); }
  h2 { font-size: 51px; }
  .eyebrow { font-size: 8px; }
  .section-index { gap: 10px; font-size: 8px; letter-spacing: .09em; }
  .section-index > span:first-child { font-size: 21px; }
  .intro { min-height: 100svh; padding: 31px 24px 48px; }
  .intro__eyebrow { font-size: 7px; letter-spacing: .1em; }
  .intro__title { margin-top: 28px; }
  h1 { font-size: clamp(65px, 19.3vw, 91px); line-height: .95; }
  .intro__name-line { margin-top: 2px; }
  .intro__photos { margin-top: 28px; padding-block: 12px 22px; gap: 16px; }
  .photograph { padding: 6px 6px 9px; }
  .photograph--left { width: 100%; max-width: 180px; margin-left: 4px; }
  .photograph--right { width: 100%; max-width: 184px; margin-top: 20px; margin-right: 4px; }
  .photograph--left img { aspect-ratio: 4/4.4; }
  .photograph--right img { aspect-ratio: 4/4.2; object-position: 48% 50%; }
  .photograph figcaption { font-size: 22px; padding-top: 6px; }
  .intro__copy { margin-top: 16px; max-width: 350px; }
  .intro__note { font-size: 26px; line-height: 1.25; }
  .venue { padding-bottom: 49px; }
  .venue__invitation { margin-top: 22px; padding: 33px 23px 32px; }
  .venue__heading h2 { font-size: 49px; }
  .venue__date { font-size: 35px; margin-top: 16px; }
  .venue__time { font-size: 25px; margin-top: 2px; }
  .venue__glasses { width: 140px; height: 102px; margin: 17px auto 15px; }
  .venue__card h3 { font-size: 39px; }
  .venue__address { font-size: 14px; line-height: 1.65; max-width: 250px; margin-top: 13px; }
  .map-link { font-size: 23px; min-height: 46px; padding: 8px 23px 10px; margin-top: 20px; }
  .timing__inner { padding-block: 36px 42px; }
  .timing__intro { margin-top: 22px; }
  .timing__intro > p { font-size: 14px; max-width: 295px; margin-top: 16px; line-height: 1.65; }
  .timing__couple { width: 123px; height: 90px; margin-top: 13px; }
  .timeline { margin-top: 24px; }
  .timeline__item { --time-width: 63px; --dot-width: 7px; --row-gap: 13px; min-height: 110px; padding-bottom: 24px; }
  .timeline__item::before { top: 16px; bottom: -16px; }
  .timeline__item time { font-size: 32px; }
  .timeline__dot { margin-top: 13px; }
  .timeline__item h3 { font-size: 28px; line-height: 1.08; }
  .timeline__item p { font-size: 14px; line-height: 1.55; margin-top: 7px; }
  .timeline__item:has(.timeline__cake) > div { padding-right: 58px; }
  .timeline__cake { width: 51px; height: 75px; right: -2px; top: 13px; }
  .details { padding-top: 50px; }
  .details__title { font-size: 52px; margin-top: 21px; }
  .details__layout { margin-top: 26px; }
  .wish-card { padding: 33px 34px 35px; }
  .wish-card + .wish-card { margin-top: 22px; }
  .wish-card p { font-size: 14px; line-height: 1.65; }
  .wish-card__glasses { width: 130px; height: 93px; margin-bottom: 18px; }
  .wish-card__envelope { width: 96px; height: 73px; margin-bottom: 20px; }
  .dresscode { margin-top: 28px; padding: 33px 34px 35px; }
  .dresscode h3 { font-size: 54px; }
  .dresscode__main { font-size: 14px; line-height: 1.65; margin-top: 18px; }
  .dresscode__note { font-size: 29px; margin-top: 23px; }
  .countdown { padding: 44px 24px 47px; }
  .countdown__rings { width: 118px; height: 80px; margin-bottom: 21px; }
  .countdown h2 { max-width: 320px; font-size: 46px; line-height: .98; }
  .countdown__digits { gap: 5px; margin-top: 29px; }
  .countdown__unit { min-width: 54px; }
  .countdown__unit:first-child { min-width: 77px; }
  .countdown__unit > span:first-child { font-size: 56px; }
  .countdown__unit > span:last-child { font-size: 8px; margin-top: 10px; letter-spacing: .06em; }
  .countdown__separator { font-size: 27px; line-height: 1.8; }
  .countdown__goodbye { max-width: 315px; margin: 32px auto 0; font-size: 31px; line-height: 1.2; }
}
@media (max-width: 374px) {
  .intro { padding-inline: 20px; }
  .photograph figcaption { font-size: 20px; }
  .intro__photos { gap: 13px; }
  .intro__note { font-size: 25px; }
  .venue__invitation { padding-inline: 20px; }
  .venue__heading h2 { font-size: 45px; }
  .venue__card h3 { font-size: 36px; }
  .timeline__item { --time-width: 59px; --row-gap: 11px; }
  .timeline__item time { font-size: 30px; }
  .timeline__item h3 { font-size: 26px; }
  .timeline__item:has(.timeline__cake) > div { padding-right: 49px; }
  .timeline__cake { width: 44px; }
  .details__title { font-size: 48px; }
  .wish-card { padding-inline: 32px; }
  .dresscode { padding-inline: 32px; }
  .countdown { padding-inline: 20px; }
  .countdown h2 { font-size: 42px; }
  .countdown__digits { gap: 4px; }
  .countdown__unit { min-width: 50px; }
  .countdown__unit:first-child { min-width: 72px; }
  .countdown__unit > span:first-child { font-size: 52px; }
  .countdown__goodbye { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}