:root {
  --ink: #203b2d;
  --forest: #395747;
  --green: #6f8876;
  --sage: #a8b9a2;
  --mist: #dce5d8;
  --cream: #f5f1e8;
  --paper: #fbf8f0;
  --rose: #c9827c;
  --line: rgba(32, 59, 45, .19);
  --serif: "Playfair Display", Georgia, serif;
  --script: "Marck Script", "Segoe Script", cursive;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.65; }
body::selection { background: var(--sage); color: var(--ink); }
.grain { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .055; background-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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; z-index: 50; top: 10px; left: 10px; transform: translateY(-150%); padding: 9px 14px; background: var(--paper); color: var(--ink); border-radius: 2px; font-size: 13px; transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.topbar { position: absolute; z-index: 3; top: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 22px 23px; color: var(--paper); }
.monogram, .topbar__date { color: inherit; text-decoration: none; }
.monogram { font-family: var(--serif); font-size: 22px; letter-spacing: -.06em; }
.monogram span { color: #d7e0d2; font-style: italic; padding: 0 2px; }
.topbar__date { font-size: 9px; letter-spacing: .14em; font-weight: 700; }
.section { position: relative; overflow: hidden; padding: 82px 24px; }
.section--paper { background: var(--paper); }
.eyebrow { margin: 0 0 15px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.title { position: relative; z-index: 1; margin: 0; font: 500 clamp(34px, 10vw, 53px)/1.08 var(--serif); letter-spacing: -.048em; }
.lead { position: relative; z-index: 1; max-width: 480px; margin: 25px 0 0; font-size: 14px; line-height: 1.8; }
.hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 24px 70px; color: var(--paper); text-align: center; background: radial-gradient(circle at 50% 44%, rgba(190, 209, 184, .2), transparent 42%), linear-gradient(145deg, #355642 0%, #557460 55%, #6e8874 100%); }
.hero::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(243, 247, 236, .29); pointer-events: none; }
.hero .eyebrow { color: #dbe7d6; }
.hero__names { position: relative; z-index: 1; margin: 5px 0 19px; font: 500 clamp(58px, 18.5vw, 91px)/.78 var(--serif); letter-spacing: -.09em; }
.hero__names i { font-size: .42em; color: #d5e2d0; font-style: italic; }
.hero__date { z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--serif); }
.hero__date span { font-size: 26px; letter-spacing: -.05em; }.hero__date b { font-size: 13px; font-style: italic; font-weight: 500; }
.hero__line { z-index: 1; margin: 12px 0 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #e2ebdd; }
.scroll-cue { position: absolute; z-index: 2; bottom: 29px; display: flex; align-items: center; gap: 10px; color: #e5eee0; font-size: 9px; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }.scroll-cue i { display: block; width: 29px; height: 1px; background: currentColor; transform-origin: left; animation: nudge 1.9s ease-in-out infinite; }
.hero__botanical { position: absolute; opacity: .24; width: 148px; height: 230px; }.hero__botanical span { position: absolute; display: block; width: 59px; height: 24px; border: 1px solid #e7eee2; border-radius: 100% 0 100% 0; }.hero__botanical--left { left: -40px; bottom: -3px; transform: rotate(22deg); }.hero__botanical--right { right: -53px; top: 99px; transform: rotate(192deg); }.hero__botanical--left::before, .hero__botanical--right::before { content:""; position: absolute; width: 1px; height: 240px; background: #e7eee2; transform: rotate(-35deg); transform-origin: bottom; }.hero__botanical span:nth-child(1) { top: 12px; left: 45px; transform: rotate(-32deg); }.hero__botanical span:nth-child(2) { top: 56px; left: 8px; transform: rotate(15deg); }.hero__botanical span:nth-child(3) { top: 96px; left: 57px; transform: rotate(-36deg); }.hero__botanical span:nth-child(4) { top: 139px; left: 25px; transform: rotate(18deg); }.hero__botanical span:nth-child(5) { top: 184px; left: 69px; transform: rotate(-35deg); }
.invitation { text-align: center; }.invitation .lead { margin-right: auto; margin-left: auto; }.calendar { max-width: 420px; margin: 43px auto 0; padding: 21px 15px 15px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.calendar__top { display: flex; justify-content: space-between; align-items: baseline; padding: 0 7px 18px; font-family: var(--serif); font-size: 21px; }.calendar__top b { font: 600 10px var(--sans); letter-spacing: .16em; color: var(--green); }.calendar__week, .calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }.calendar__week { margin-bottom: 7px; color: var(--green); font-size: 8px; font-weight: 700; letter-spacing: .03em; }.calendar__days span { position: relative; display: grid; place-items: center; height: 35px; font-size: 12px; }.calendar__selected::before { content: ""; position: absolute; z-index: 0; width: 30px; height: 30px; border: 1px solid var(--forest); border-radius: 50%; }.calendar__selected { font-weight: 700; }.calendar__selected em { position: absolute; top: -6px; right: 2px; color: var(--rose); font-size: 10px; font-style: normal; }
.location { min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--paper); text-align: center; background: linear-gradient(rgba(48,79,62,.91), rgba(48,79,62,.91)), url('https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&w=1200&q=80') center/cover; }.location .eyebrow { color: #d4dfce; }.location .title { font-size: clamp(42px, 13vw, 59px); }.location__address { position: relative; z-index: 1; margin: 18px 0 29px; color: #ecf1e9; font-size: 13px; font-style: normal; line-height: 1.75; }.location__arch { position: absolute; width: 420px; height: 420px; border: 1px solid rgba(234,243,229,.22); border-radius: 50% 50% 0 0; bottom: -204px; }.location__arch::after { content: ""; position: absolute; inset: 19px; border: 1px solid rgba(234,243,229,.15); border-radius: inherit; }.button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 19px; min-height: 51px; padding: 0 19px 0 21px; border: 1px solid rgba(255,255,255,.55); border-radius: 1px; color: inherit; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: .25s ease; }.button span { font-size: 16px; font-weight: 400; }.button:hover, .button:focus-visible { background: var(--paper); color: var(--forest); outline: none; }
.program { padding-bottom: 77px; }.timeline { position: relative; margin: 41px 0 0; padding: 0; list-style: none; }.timeline::before { content: ""; position: absolute; top: 11px; bottom: 12px; left: 62px; width: 1px; background: var(--line); }.timeline li { position: relative; display: grid; grid-template-columns: 63px 1fr; gap: 20px; padding-bottom: 29px; }.timeline li:last-child { padding-bottom: 0; }.timeline time { z-index: 1; display: block; color: var(--green); font: 600 16px var(--serif); }.timeline time::after { content: ""; position: absolute; top: 9px; left: 58px; width: 9px; height: 9px; border: 2px solid var(--paper); border-radius: 50%; background: var(--forest); }.timeline h3 { margin: 0; font: 600 15px var(--sans); }.timeline p { max-width: 300px; margin: 5px 0 0; color: #5d6d62; font-size: 12px; line-height: 1.6; }
.details { background: var(--mist); }.details::before { content: ""; position: absolute; right: -85px; bottom: -110px; width: 300px; height: 300px; border: 1px solid rgba(57,87,71,.16); border-radius: 50%; }.details__list { position: relative; z-index: 1; margin-top: 38px; }.detail { padding: 21px 0 23px; border-top: 1px solid var(--line); }.detail:last-child { border-bottom: 1px solid var(--line); }.detail__number { display: block; margin-bottom: 7px; color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: .14em; }.detail h3 { margin: 0; font: 500 24px var(--serif); letter-spacing: -.04em; }.detail p { max-width: 430px; margin: 8px 0 0; font-size: 12px; line-height: 1.72; }
.about { padding-bottom: 103px; }.about__text { margin-top: 22px; }.photo-collage { position: relative; width: min(100%, 420px); height: 376px; margin: 44px auto 0; }.photo { position: absolute; margin: 0; background: #d9dfd5; box-shadow: 0 13px 28px rgba(42,62,49,.14); }.photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(.93); }.photo--one { top: 0; left: 0; width: 68%; height: 312px; padding: 7px 7px 27px; transform: rotate(-4.5deg); }.photo--two { right: 1px; bottom: 0; width: 47%; height: 223px; padding: 6px; transform: rotate(6deg); }.photo figcaption { position: absolute; right: 8px; bottom: 5px; color: var(--forest); font: italic 13px var(--serif); }.photo-collage__scribble { position: absolute; z-index: 2; right: 40%; top: 62%; color: var(--rose); font: 33px var(--serif); transform: rotate(-15deg); }
.countdown { min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--paper); text-align: center; background: var(--forest); }.countdown .eyebrow { color: #d3dfce; }.countdown__ring { position: absolute; border: 1px solid rgba(235,243,232,.16); border-radius: 50%; }.countdown__ring--one { width: 446px; height: 446px; }.countdown__ring--two { width: 332px; height: 332px; }.counter { z-index: 1; display: grid; grid-template-columns: 1fr 4px 1fr 4px 1fr 4px 1fr; align-items: center; width: 100%; max-width: 520px; margin-top: 37px; }.counter div { display: flex; flex-direction: column; }.counter strong { font: 500 clamp(26px, 8vw, 40px)/1 var(--serif); letter-spacing: -.06em; }.counter span { margin-top: 6px; color: #d9e4d5; font-size: 7px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }.counter > i { display: block; width: 3px; height: 3px; margin-top: -16px; border-radius: 50%; background: #dbe7d7; box-shadow: 0 10px #dbe7d7; }.countdown__signoff { z-index: 1; margin: 52px 0 0; font: italic 16px var(--serif); color: #e4ece1; }footer { padding: 21px; background: #2f4c3d; color: #dce7d7; text-align: center; font: 13px var(--serif); letter-spacing: .01em; }footer span { color: #d89289; padding: 0 4px; }
.reveal { opacity: 0; transform: translateY(17px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }.reveal.is-visible { opacity: 1; transform: translateY(0); }.timeline li:nth-child(2), .detail:nth-child(2) { transition-delay: .08s; }.timeline li:nth-child(3), .detail:nth-child(3) { transition-delay: .16s; }.timeline li:nth-child(4) { transition-delay: .24s; }
/* Final sizing and photo refinements */
body { font-size: 16px; line-height: 1.7; }
.eyebrow { font-size: 11px; }
.title { font-size: clamp(38px, 10.8vw, 58px); }
.lead { font-size: 16px; }
.hero__date span { font-size: 29px; }
.hero__date b { font-size: 15px; }
.location { background: linear-gradient(rgba(39, 69, 52, .72), rgba(39, 69, 52, .78)), url('assets/zags.png') center/cover; }
.location .title { font-size: clamp(45px, 13.5vw, 62px); }
.location__address { font-size: 15px; }
.button { min-height: 54px; font-size: 11px; }
.button span { font-size: 17px; }
.timeline h3 { font-size: 17px; }
.timeline p, .detail p { font-size: 14px; line-height: 1.7; }
.photo img { filter: saturate(.8) contrast(.94); }
.photo--one img { object-position: 58% 45%; }
.photo--two img { object-position: 50% 42%; }
.photo figcaption { font-size: 14px; }

/* Delicate paper frames for longer messages */
.letter-card { position: relative; border: 1px solid rgba(57, 87, 71, .28); background: transparent; box-shadow: none; }
.letter-card::before, .letter-card::after { position: absolute; width: 7px; height: 7px; content: ""; border-color: var(--sage); border-style: solid; pointer-events: none; }
.letter-card::before { top: 5px; left: 5px; border-width: 1px 0 0 1px; }
.letter-card::after { right: 5px; bottom: 5px; border-width: 0 1px 1px 0; }
.invitation .lead.letter-card, .about__text.letter-card { padding: 23px 21px; }
.timeline__card { min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.timeline__card h3 { line-height: 1.3; }
.timeline__card p { margin-bottom: 0; }
.detail.letter-card { padding: 23px 19px 24px; border-color: rgba(57, 87, 71, .3); }
.detail.letter-card + .detail.letter-card { margin-top: 14px; }

/* Handwritten display style */
.hero__names { font-family: var(--script); font-weight: 400; line-height: .86; letter-spacing: -.06em; }
.hero__names i { font-family: var(--serif); font-size: .38em; }
.title { font-family: var(--script); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; }
.location .title { line-height: 1; }
@keyframes nudge { 50% { transform: scaleX(.55); } }
@media (min-width: 680px) { body { font-size: 16px; }.section { padding-right: max(7vw, 45px); padding-left: max(7vw, 45px); }.topbar { padding: 27px max(7vw, 45px); }.hero { min-height: 780px; }.hero__names { font-size: 100px; }.invitation, .program, .details, .about { padding-top: 110px; padding-bottom: 110px; }.title { font-size: 57px; }.location { min-height: 640px; }.timeline { max-width: 600px; margin-right: auto; margin-left: auto; }.details__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1000px; }.detail { border-top: 1px solid var(--line); }.detail:last-child { border-bottom: 0; }.photo-collage { height: 487px; max-width: 580px; }.photo--one { height: 401px; }.photo--two { height: 275px; }.countdown { min-height: 630px; } }
@media (min-width: 680px) { .detail.letter-card:last-child { border-bottom: 1px solid rgba(57, 87, 71, .3); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }