/* Toastline: wedding stationery. Blush paper, midnight ink, gold foil on ornaments only. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400;1,6..96,500&family=Pinyon+Script&family=Jost:wght@400;500&display=swap');

:root {
  --bg: #f6ebe6;
  --paper: #fffaf6;
  --ink: #1c2340;
  --muted: #625d72;
  --line: #e6d3cc;
  --accent: #1c2340;
  --accent-ink: #fbf4ee;
  --soft: #f0e0da;
  --blush: #e7c3b8;
  --foil: linear-gradient(115deg, #a77f45 0%, #e9cf94 28%, #b88d4f 46%, #f1dca6 62%, #a77f45 100%);
  --foil-solid: #b48a4c;
  --ok: #3f6b4f;
  --err: #a23a3a;
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --sans: 'Jost', 'Avenir Next', system-ui, sans-serif;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12172b;
    --paper: #1a2039;
    --ink: #f4ece6;
    --muted: #b4adbd;
    --line: #2d3454;
    --accent: #e3c487;
    --accent-ink: #141a2e;
    --soft: #222947;
    --blush: #b98d86;
    --foil-solid: #dcbb7e;
    --ok: #9cc9a9;
    --err: #f09a96;
  }
}

body { font: 400 17.5px/1.65 var(--sans); background: radial-gradient(1200px 600px at 85% -10%, #f2d9d1 0, transparent 60%), var(--bg); }
@media (prefers-color-scheme: dark) { body { background: radial-gradient(1200px 600px at 85% -10%, #26213f 0, transparent 60%), var(--bg); } }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.08; padding-bottom: 4px; }
h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.1; }
h1 em, h2 em { font-style: italic; }
.btn { border-radius: 999px; font: 500 15px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 0 26px; transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s; }
.btn:hover { box-shadow: 0 10px 24px -12px #1c234088; }
.btn:active { transform: translateY(1px); }
.caps { font: 500 13px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.foil-text { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) { .foil-text { background: none; color: var(--foil-solid); } }

/* ---------- landing ---------- */
.t-nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.t-nav .mark { font: italic 500 28px var(--serif); color: var(--ink); text-decoration: none; }
.t-nav nav { display: flex; align-items: center; gap: 30px; }
.t-nav nav a:not(.btn) { color: var(--ink); text-decoration: none; font-size: 15px; letter-spacing: .06em; }
@media (max-width: 760px) { .t-nav nav a:not(.btn) { display: none; } .t-nav .btn { padding: 0 16px; letter-spacing: .08em; } }

.t-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding: 28px 0 48px; position: relative; }
.t-hero .lead { font-size: 19px; color: var(--muted); max-width: 28em; margin: 22px 0 34px; }
.t-hero .ctas { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.t-hero .link { color: var(--ink); letter-spacing: .06em; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.stage { position: relative; padding: 0 0 60px 40px; }
.arch {
  aspect-ratio: 4 / 4.6; border-radius: 999px 999px 10px 10px; background: #fffaf3; overflow: hidden; position: relative;
  display: grid; place-items: center; box-shadow: 0 40px 80px -50px #5a3d4a66;
}
.arch::after { content: ''; position: absolute; inset: 10px; border-radius: inherit; border: 1px solid #c9a46a99; pointer-events: none; }
.arch img { width: 112%; max-width: none; height: auto; mix-blend-mode: multiply; transform: translateY(6%); }
.sign {
  position: absolute; left: 0; bottom: 0; width: 230px; background: #fffaf3; color: #1c2340; text-align: center;
  padding: 22px 18px 18px; transform: rotate(-6deg); box-shadow: 0 26px 50px -24px #2a1d2c88;
}
.sign::before { content: ''; position: absolute; inset: 7px; border: 1.5px solid transparent; border-image: var(--foil) 1; pointer-events: none; }
.sign .names { font: 400 36px/1 var(--script); margin: 4px 0 6px; }
.sign .caps { font-size: 10px; letter-spacing: .26em; color: #5a5468; }
.sign .num { font: 500 19px var(--serif); margin: 8px 0 6px; letter-spacing: .02em; }
.sign .qr svg { width: 104px; height: 104px; display: block; margin: 0 auto; }
@media (max-width: 860px) {
  .t-hero { grid-template-columns: 1fr; padding: 12px 0 64px; gap: 36px; }
  .stage { padding: 0 0 70px 0; max-width: 420px; justify-self: center; width: 100%; }
  .sign { width: 190px; left: -6px; }
}

/* Petals drifting past the hero: it's a party. */
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.petals i { position: absolute; top: -20px; width: 14px; height: 10px; border-radius: 70% 10% 70% 10%; background: linear-gradient(135deg, #f2cfc6, #dda59a); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .petals i { animation: fall 11s linear infinite; }
  .petals i:nth-child(1) { left: 8%; animation-delay: 0s; }
  .petals i:nth-child(2) { left: 26%; animation-delay: 3.5s; animation-duration: 13s; }
  .petals i:nth-child(3) { left: 47%; animation-delay: 7s; }
  .petals i:nth-child(4) { left: 64%; animation-delay: 1.8s; animation-duration: 14s; }
  .petals i:nth-child(5) { left: 82%; animation-delay: 5.2s; }
  .petals i:nth-child(6) { left: 93%; animation-delay: 9s; animation-duration: 12s; }
  @keyframes fall {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    10% { opacity: .85; }
    50% { transform: translate(40px, 50vh) rotate(160deg); }
    90% { opacity: .7; }
    100% { opacity: 0; transform: translate(-20px, 95vh) rotate(320deg); }
  }
  .t-hero .sign { animation: drop 1.2s cubic-bezier(.16, 1, .3, 1) both .5s; }
  @keyframes drop { from { opacity: 0; transform: translate(-10px, -40px) rotate(-14deg); } to { opacity: 1; transform: rotate(-6deg); } }
  .t-hero .arch { animation: open 1.4s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes open { from { opacity: 0; clip-path: inset(100% 0 0 0 round 999px 999px 10px 10px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 999px 999px 10px 10px); } }
  .rise { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
  .rise.in { opacity: 1; transform: none; }
}

/* The order of the evening: a printed programme. */
.t-programme { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 64px 0 88px; }
.programme { background: var(--paper); padding: 52px 46px 44px; text-align: center; position: relative; box-shadow: 0 30px 60px -44px #5a3d4a77; }
.programme::before { content: ''; position: absolute; inset: 12px; border: 1px solid transparent; border-image: var(--foil) 1; pointer-events: none; }
.programme::after { content: ''; position: absolute; inset: 17px; border: 1px solid #c9a46a55; pointer-events: none; }
.programme h2 { font-size: 34px; font-style: italic; margin-bottom: 4px; }
.programme .rule { width: 56px; height: 1px; background: var(--foil); margin: 18px auto 26px; }
.programme dl { margin: 0; display: grid; gap: 26px; }
.programme dt { font: 500 12px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--foil-solid); }
.programme dd { margin: 6px auto 0; font: italic 400 20px/1.45 var(--serif); max-width: 22em; }
.t-programme .aside h2 { margin-bottom: 18px; }
.t-programme .aside p { color: var(--muted); max-width: 28em; }
.t-programme .sprig { width: 150px; mix-blend-mode: multiply; margin: 0 0 8px -14px; display: block; }
@media (prefers-color-scheme: dark) { .t-programme .sprig { mix-blend-mode: normal; border-radius: 999px; background: #fffaf3; padding: 8px; width: 120px; margin-left: 0; } }
@media (max-width: 860px) { .t-programme { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; } .programme { padding: 44px 24px 36px; } }

/* A page from the guestbook. */
.t-pages { padding: 72px 0 96px; }
.t-pages > h2 { text-align: center; }
.t-pages > p { text-align: center; color: var(--muted); margin: 0 auto 40px; max-width: 30em; }
.board { columns: 3 280px; column-gap: 22px; }
.msgcard { break-inside: avoid; background: var(--paper); padding: 22px 24px 20px; margin: 0 0 22px; box-shadow: 0 1px 0 var(--line), 0 18px 34px -28px #5a3d4a66; }
.msgcard:nth-child(3n + 2) { rotate: .6deg; }
.msgcard:nth-child(3n) { rotate: -.5deg; }
.msgcard .meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.msgcard .time { font: 500 12px var(--sans); letter-spacing: .2em; color: var(--muted); }
.wave { display: flex; align-items: center; gap: 2px; height: 28px; margin: 12px 0 14px; }
.wave span { flex: 1; background: var(--blush); border-radius: 2px; min-height: 3px; }
.msgcard blockquote { margin: 0; font: italic 400 19px/1.5 var(--serif); }
.msgcard .from { font: 400 30px/1.1 var(--script); margin-top: 10px; color: var(--ink); }
.msgcard .rel { font-size: 14px; color: var(--muted); }
.t-pages .caption { text-align: center; margin-top: 4px; }

/* RSVP: the order form is the reply card. */
.t-rsvp { padding: 40px 0 96px; }
.rsvp { position: relative; max-width: 760px; margin: 0 auto; background: var(--paper); padding: 64px 56px 48px; text-align: center; box-shadow: 0 40px 80px -50px #5a3d4a88; }
.rsvp::before { content: ''; position: absolute; inset: 14px; border: 1.5px solid transparent; border-image: var(--foil) 1; pointer-events: none; }
.rsvp .corner { position: absolute; top: -58px; right: -78px; width: 150px; mix-blend-mode: multiply; transform: rotate(12deg); pointer-events: none; }
@media (prefers-color-scheme: dark), (max-width: 900px) { .rsvp .corner { display: none; } }
.rsvp h2 { font: 400 clamp(52px, 7vw, 72px)/1 var(--script); margin: 0 0 6px; }
.rsvp .price { margin: 10px 0 30px; color: var(--muted); font: 400 17px var(--sans); }
.rsvp .price b { font: italic 500 30px var(--serif); color: var(--ink); margin-right: 4px; }
.rsvp .sentence { font: italic 400 22px/2.4 var(--serif); text-align: center; }
.rsvp label { display: inline; font: inherit; margin: 0; }
.rsvp input {
  display: inline-block; width: 10em; min-height: 44px; margin: 0 4px; padding: 4px 6px; text-align: center; vertical-align: baseline;
  border: 0; border-bottom: 1px solid var(--muted); border-radius: 0; background: transparent; color: var(--ink); font: 400 22px var(--sans);
}
.rsvp input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.rsvp input:focus, .rsvp textarea:focus { outline: none; border-bottom-color: var(--foil-solid); background: color-mix(in srgb, var(--blush) 18%, transparent); }
.rsvp .w-date { width: 9.5em; } .rsvp .w-area { width: 3.6em; } .rsvp .w-mail { width: 13em; }
.rsvp .greet { text-align: left; max-width: 520px; margin: 18px auto 0; }
.rsvp .greet label { display: block; font: 500 12px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; text-align: center; }
.rsvp textarea { background: transparent; border: 1px solid var(--line); border-radius: 0; font: italic 400 18px/1.5 var(--serif); }
.rsvp .go { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (max-width: 640px) { .rsvp { padding: 52px 22px 36px; } .rsvp input { width: 100% !important; margin: 0; } .rsvp .sentence { line-height: 2; } }

/* Questions */
.t-faq { max-width: 760px; margin: 0 auto; padding: 24px 0 72px; }
.t-faq h2 { text-align: center; margin-bottom: 26px; }
.t-faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.t-faq details:last-child { border-bottom: 1px solid var(--line); }
.t-faq summary { font: italic 400 22px var(--serif); list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; gap: 16px; }
.t-faq summary::-webkit-details-marker { display: none; }
.t-faq summary::after { content: '+'; font: 300 26px var(--sans); color: var(--foil-solid); transition: transform .25s; }
.t-faq details[open] summary::after { transform: rotate(45deg); }
.t-faq details p { color: var(--muted); margin: 6px 0 4px; }
.t-foot { border-top: 1px solid var(--line); padding: 28px 0 44px; color: var(--muted); font-size: 15px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

@media (max-width: 860px) {
  .t-programme .sprig { display: none; }
  .sign .names { font-size: 30px; white-space: nowrap; }
  .t-pages { padding: 48px 0 64px; }
}
.brand { font-style: italic; font-size: 26px; }

@media (prefers-color-scheme: light) {
  .t-programme .sprig, .rsvp .corner { -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
}