@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  --bg: #fcf7ed;
  --bg-logistics: #f6edd7;
  --page: var(--bg);
  --surface: #fffaf1;
  --text: #2f241b;
  --muted: #76614d;
  --accent: #8a5a2b;
  --accent-soft: #e7c88a;
  --on-accent: #fff9f1;
  --border: rgba(47, 36, 27, .12);
  --polaroid: #f8f3e8;
  --footer-shade: rgba(17, 12, 9, .52);
  --intro: #29231f;
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans: 'Instrument Sans', 'Avenir Next', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --ease-reveal: cubic-bezier(.22, .72, .36, 1);
  --gutter: 24px;
  --space: 80px;
  --immersive: 16px;
}
@media (min-width: 768px) {
  :root { --gutter: 40px; --space: 112px; --immersive: 24px; }
}

*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; }
html, body { overflow-x: clip; }
body {
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--text);
  background-color: var(--page);
  transition: background-color .5s;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ul { list-style: none; }
img, svg { display: block; }
img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; cursor: pointer; letter-spacing: inherit; }
button:disabled { cursor: wait; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
[data-lenis-prevent] { overscroll-behavior: contain; }

/* Intro */
.intro-active, .intro-active body { overflow: hidden; scrollbar-gutter: stable; }
.intro { position: fixed; inset: 0; z-index: 80; overflow: hidden; touch-action: none; }
.intro-btn {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding-inline: 1.5rem; overflow: hidden; text-align: center;
  background: var(--intro); color: #fff;
  transition: transform 700ms cubic-bezier(.76, 0, .24, 1);
}
.intro-btn:focus { outline: none; }
.intro-btn:focus-visible { outline: 4px solid currentColor; outline-offset: -4px; }
.intro.entering .intro-btn { transform: translateY(-100%); }
.intro-title {
  max-width: 64rem; white-space: pre-wrap;
  font-family: var(--serif); font-style: italic; line-height: 1;
  font-size: clamp(2.75rem, 9vw, 4rem); letter-spacing: -.05em;
}
.intro-word { display: inline-block; white-space: nowrap; }
.intro-letter {
  display: inline-block; opacity: 0; filter: blur(16px); transform: translateX(40px);
  animation: letter-in 240ms cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(var(--i) * 55ms);
}
@keyframes letter-in { to { opacity: 1; filter: blur(0); transform: none; } }
.intro-enter {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center;
  padding: .5rem .25rem; white-space: nowrap;
  font-size: .75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .16em;
  transition: opacity 200ms;
}
.intro-btn:hover .intro-enter { opacity: .8; }
@media (min-width: 768px) { .intro-enter { bottom: 3.5rem; } }

/* Site wrapper and chrome that waits for the intro */
.site { position: relative; isolation: isolate; min-height: 100vh; transform: none; transition: transform 420ms ease; }
.intro-active .site { transform: scale(1.006); transition: transform 120ms ease-out; pointer-events: none; }
.intro-active.entering .site { transform: scale(1); transition: transform 1700ms cubic-bezier(.74, 0, .16, 1); }
.chrome { transition: opacity 180ms; }
.intro-active:not(.entering) .chrome { opacity: 0; pointer-events: none; }
#navChrome { position: relative; z-index: 40; }

/* Nav */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: 50; transition: all 300ms; }
.nav-box { position: relative; margin-inline: auto; width: 100%; overflow: visible; }
.nav-row { display: flex; height: 100%; align-items: center; justify-content: space-between; }
.nav-logo {
  display: flex; height: 100%; max-height: 3rem; align-items: center; white-space: nowrap;
  letter-spacing: -.025em; transition: all 300ms;
}
.nav-logo:hover, .nav-links a:not(.nav-rsvp):hover { opacity: .7; }
.nav-links { display: none; align-items: center; }
.nav-link { white-space: nowrap; transition: all 300ms; }
.nav-rsvp {
  border-radius: 9999px; padding: .5rem 1.5rem;
  background: var(--accent); color: var(--on-accent);
}
.nav-mobile { display: flex; align-items: center; gap: 1rem; }
.nav-rsvp-small {
  border-radius: 9999px; padding: .375rem 1rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500;
  background: var(--accent); color: var(--on-accent); transition: all 300ms;
}
.nav-toggle { border-radius: .375rem; padding: .5rem; transition: transform 300ms; }
.nav-toggle:active { transform: scale(.9); }
.nav-bars { position: relative; display: flex; height: .625rem; width: 1.5rem; flex-direction: column; justify-content: space-between; }
.nav-bars span { height: .125rem; width: 100%; transform-origin: center; background: currentColor; transition: all 300ms; }
.nav-toggle[aria-expanded=true] .nav-bars span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded=true] .nav-bars span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-menu {
  position: absolute; right: 0; top: 100%; margin-top: .5rem; min-width: 160px;
  transform-origin: top right; border-radius: 1rem; border-width: 1px; padding: 1rem; text-align: right;
  background: rgba(255, 250, 241, .92); border-color: rgba(47, 36, 27, .1); color: var(--text);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); backdrop-filter: blur(12px);
  transition: all 300ms;
  transform: scale(.95); opacity: 0; visibility: hidden; pointer-events: none;
}
.nav-menu.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
.nav-menu ul { display: flex; flex-direction: column; gap: 1rem; }
.nav-menu a { display: block; padding: .5rem .5rem .5rem 0; font-size: 1.125rem; line-height: 1.75rem; opacity: .85; transition: opacity 200ms; }
.nav-menu a:hover { opacity: 1; }
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-mobile, .nav-menu { display: none; }
}

/* Shared type */
.main { position: relative; z-index: 20; padding-bottom: 1.5rem; }
@media (min-width: 768px) { .main { padding-bottom: 2.5rem; } }
.sec { padding-block: var(--space); position: relative; width: 100%; }
.gutter { padding-inline: var(--gutter); }
.immersive { padding-block: var(--immersive); }
.content { width: 100%; max-width: 72rem; margin-inline: auto; }
.heading-3 {
  display: block; width: 100%;
  font-family: var(--serif); font-size: 3rem; line-height: .92; color: var(--text);
}
.meta-line {
  display: block; width: 100%; font-size: .75rem; line-height: 1rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em; color: var(--text); opacity: .8;
}
@media (min-width: 768px) {
  .heading-3 { font-size: 3.75rem; }
  .meta-line { font-size: .875rem; line-height: 1.25rem; }
}

/* Reveal on scroll */
.reveal {
  opacity: 0; translate: 0 1.25rem;
  transition: opacity var(--dur, 760ms) var(--ease-reveal) var(--d, 0ms),
    translate var(--dur, 760ms) var(--ease-reveal) var(--d, 0ms),
    scale var(--dur, 760ms) var(--ease-reveal) var(--d, 0ms);
}
.reveal-scale { scale: .98; }
.reveal.in { opacity: 1; translate: 0 0; scale: 1; }

/* Hero */
.hero { position: relative; height: calc(100svh + 1200px); scroll-margin-top: 88px; }
.hero-sticky { position: sticky; top: 0; height: 100svh; }
.hero-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero-box { position: relative; overflow: hidden; will-change: transform; }
.hero-img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translate(-50%, -50%); will-change: transform; }
.hero-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .2); will-change: opacity; }
.hero-fg {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 2rem; color: #fff; will-change: transform; transition: opacity 180ms;
}
.intro-active:not(.entering) .hero-fg { opacity: 0 !important; }
.hero-title {
  position: absolute; bottom: 8rem; left: 0; right: 0; display: flex; justify-content: center;
  padding-inline: 1.5rem; pointer-events: none; transform-origin: bottom center; will-change: transform;
}
.hero-title svg { width: 100%; height: auto; overflow: visible; }
.hero-title text { font-family: var(--serif); font-style: italic; fill: #fff; }
.hero-cue { position: relative; z-index: 10; display: flex; width: 100%; flex-direction: column; gap: 1.5rem; padding: 0 1.5rem 1rem; pointer-events: none; }
.hero-rule { height: 1px; width: 100%; background: #fff; opacity: .5; }
.hero-prompt {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .4em; opacity: .9;
}
.bounce { opacity: .8; animation: bounce 1s infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}
@media (min-width: 768px) {
  .hero-title, .hero-cue { padding-inline: 3rem; }
}
.gallery { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.gal-group { position: absolute; display: flex; }
.gal-card { position: relative; flex-shrink: 0; overflow: hidden; will-change: transform, opacity; }

/* Word-by-word statements */
.word-sec { z-index: 30; display: flex; min-height: 60svh; align-items: center; justify-content: center; text-align: center; }
.words { width: 100%; max-width: 90vw; font-family: var(--serif); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; color: var(--text); }
.words span { opacity: .4; transition: opacity .3s ease-out; }
.words-sm { font-size: 3rem; }
.words-lg { font-size: 3.5rem; }
@media (min-width: 768px) {
  .words-sm { font-size: 3.75rem; }
  .words-lg { font-size: 6rem; }
}

/* Story */
.story { position: relative; z-index: 30; width: 100%; }
.story-sticky { position: sticky; top: 0; height: 100svh; width: 100%; }
.story-head { position: absolute; inset-inline: 0; top: 96px; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.story-head-in { position: relative; margin-inline: auto; display: flex; width: 100%; max-width: 375px; align-items: center; justify-content: center; padding-inline: 1rem; }
.story-title {
  display: block; width: 100%; max-width: 100%; white-space: nowrap; text-align: center;
  font-family: var(--serif); font-size: min(14vw, 3.28125rem); line-height: 1; letter-spacing: -.025em; color: var(--text);
}
.story-cap { position: absolute; inset-inline: 0; z-index: 35; pointer-events: none; padding-inline: 1rem; text-align: center; }
.cap-gap, .cap-empty { display: none; }
.cap-text h3 { margin-bottom: .5rem; font-family: var(--serif); font-size: clamp(1.25rem, 5vw, 1.5rem); font-weight: 700; line-height: 1.25; color: var(--text); }
.cap-text p { margin-inline: auto; max-width: 42rem; font-size: 1.125rem; line-height: 1.55; color: var(--muted); }
.cap-text p[data-len=reduced] { font-size: clamp(.9rem, 3.6vw, 1rem); line-height: 1.38; }
.cap-text p[data-len=compact] { font-size: clamp(.78rem, 3.15vw, .92rem); line-height: 1.32; }
.story-card {
  position: absolute; inset-inline: 0; margin-inline: auto; display: flex; width: 100%; max-width: 1400px;
  flex-direction: column; align-items: center; justify-content: center; padding-inline: 1rem; backface-visibility: hidden;
}
.pol-box { position: relative; margin-inline: 1rem; flex-shrink: 0; }
.pol-hover { height: 100%; width: 100%; transition: transform 300ms ease-out; }
.pol {
  position: relative; height: 100%; width: 100%; border-radius: .45rem; border: 1px solid rgba(0, 0, 0, .1);
  background: var(--polaroid); padding: 4.5% 4.5% 18%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2); transition: box-shadow 300ms;
}
.pol-photo { display: block; height: 100%; width: 100%; overflow: hidden; border-radius: .2rem; background: rgba(0, 0, 0, .05); position: relative; }
.pol-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pol figcaption {
  position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); display: block; max-width: 90%;
  white-space: nowrap; text-align: center; font-size: clamp(.7rem, 1.8vw, 1rem); color: rgba(0, 0, 0, .7);
}
@media (min-width: 768px) {
  .story-head { top: 80px; }
  .story-head-in { max-width: 1280px; }
  .story-title { font-size: min(14vw, 11.2rem); }
  .story-cap { display: block; padding-inline: 0; text-align: inherit; }
  .cap-row { margin-inline: auto; display: flex; width: 100%; max-width: 1400px; align-items: center; justify-content: center; padding-inline: 2rem; }
  .cap-gap { display: block; margin-inline: 1rem; flex-shrink: 0; }
  .cap-empty { display: block; width: 25%; }
  .cap-text { width: 25%; padding-inline: 1rem; }
  [data-side=left] .cap-text { text-align: right; }
  [data-side=right] .cap-text { text-align: left; }
  .cap-text h3 { font-size: 1.5rem; line-height: 2rem; }
  .cap-text p, .cap-text p[data-len] { margin: 0; max-width: none; font-size: 1.125rem; line-height: 1.75rem; }
  .story-card { flex-direction: row; padding-inline: 2rem; }
  .pol { box-shadow: 0 14px 42px rgba(0, 0, 0, .32); }
  .pol:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
  .pol-hover:hover { transform: translateY(-1rem) scale(1.03); }
}

/* Date and countdown */
.logistics { position: relative; z-index: 20; width: 100%; }
.logistics-in { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding-inline: 1rem; text-align: center; }
.kicker-wrap { display: flex; width: 100%; justify-content: center; margin-bottom: 4rem; }
.kicker-wrap .heading-3 { max-width: 64rem; }
.date-wrap { display: flex; width: 100%; justify-content: center; padding-inline: .5rem; }
.date { margin-bottom: 4rem; width: 100%; max-width: 1120px; text-align: center; font-family: var(--serif); line-height: 1; letter-spacing: -.025em; }
.date svg { width: 100%; height: auto; overflow: visible; }
.date text { font-family: var(--serif); fill: var(--text); }
.countdown { margin-inline: auto; display: flex; width: 100%; min-height: 100px; max-width: 48rem; align-items: flex-start; justify-content: center; gap: .5rem; }
.cd-unit { display: flex; width: 4rem; flex-direction: column; align-items: center; }
.cd-value { margin-bottom: .25rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 400; }
.cd-label { font-size: .55rem; text-transform: uppercase; letter-spacing: .15em; opacity: .8; color: var(--text); }
.cd-colon { margin-top: .25rem; font-size: 1.5rem; line-height: 2rem; font-weight: 400; opacity: .3; color: var(--text); }
@media (min-width: 640px) {
  .cd-unit { width: 5rem; }
  .cd-value { font-size: 2.25rem; line-height: 2.5rem; }
  .cd-label { font-size: .65rem; letter-spacing: .2em; }
  .cd-colon { font-size: 1.875rem; line-height: 2.25rem; }
}
@media (min-width: 768px) {
  .countdown { gap: 1rem; }
  .cd-unit { width: 6rem; }
  .cd-value { margin-bottom: .5rem; font-size: 3.75rem; line-height: 1; }
  .cd-label { font-size: .875rem; line-height: 1.25rem; }
  .cd-colon { margin-top: .5rem; font-size: 3rem; line-height: 1; }
}
.flowers { position: fixed; left: 0; top: 0; z-index: 100; display: block; height: 100dvh; width: 100%; pointer-events: none; }

/* Venue */
.venue { z-index: 20; text-align: center; }
.venue-image { position: relative; margin: 0 auto 4rem; aspect-ratio: 21 / 9; width: 100%; overflow: hidden; border-radius: 1rem; }
.venue-clip {
  height: 100%; width: 100%; clip-path: inset(0 0 100% 0); opacity: 0; translate: 0 1.25rem;
  transition: opacity 1200ms var(--ease-reveal), translate 1200ms var(--ease-reveal), clip-path 1200ms var(--ease-reveal);
}
.venue-zoom { position: relative; height: 100%; width: 100%; scale: 1.03; transition: scale 1400ms var(--ease-reveal); }
.venue-image.in .venue-clip { clip-path: inset(0 0 0 0); opacity: 1; translate: 0 0; }
.venue-image.in .venue-zoom { scale: 1; }
.venue-text { margin-inline: auto; width: 100%; max-width: 56rem; min-width: 0; }
.venue-name { margin-bottom: 1rem; }
.venue-address { transition: opacity 150ms; }
.venue-address:hover { opacity: 1; }
@media (min-width: 768px) { .venue-image { margin-bottom: 6rem; } }

/* RSVP callout */
.rsvp-callout { z-index: 30; }
.rsvp-in { margin-inline: auto; display: flex; width: 100%; max-width: 72rem; min-width: 0; flex-direction: column; align-items: center; text-align: center; }
.rsvp-by { margin-top: 1.25rem; width: 100%; }
.rsvp-by .meta-line { margin-inline: auto; max-width: 42rem; }
.rsvp-note { margin-top: .75rem; font-size: 1rem; line-height: 1.5rem; color: var(--muted); }
.rsvp-cta { margin-top: 2rem; display: flex; width: 100%; justify-content: center; }
.pill-cta {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; padding: 1rem 3rem;
  font-size: .75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .2em;
  background: var(--accent); color: var(--on-accent); transition: transform 500ms var(--ease-reveal);
}
.pill-cta:hover { transform: scale(1.02); }
@media (min-width: 768px) { .pill-cta { font-size: .875rem; line-height: 1.25rem; } }

/* Details */
.details { z-index: 20; }
.content-wide { max-width: 100rem; container-type: inline-size; }
.details-head { margin-bottom: 1.5rem; display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; padding-inline: .5rem; text-align: center; }
.details-sub-wrap { display: flex; width: 100%; justify-content: center; }
.details-sub { margin-top: 1rem; width: 100%; max-width: 48rem; font-size: 1rem; line-height: 1.5rem; color: var(--muted); }
.details-grid { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@container (min-width: 640px) { .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1100px) { .details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.detail-card { position: relative; display: inline-block; aspect-ratio: 4 / 3; width: 100%; text-align: left; color: #fff; }
.detail-media { position: absolute; inset: 0; overflow: hidden; border-radius: 2rem; border: 1px solid rgba(0, 0, 0, .05); background: rgba(0, 0, 0, .05); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); }
.detail-media img { transition: transform 700ms cubic-bezier(.4, 0, .2, 1); }
.detail-card:hover img { transform: scale(1.05); }
.detail-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2), transparent); }
.detail-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem 5rem 1.5rem 1.5rem; }
.detail-title { display: block; margin-bottom: .5rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; }
.detail-sub { display: block; font-size: 1.125rem; line-height: 1.75rem; opacity: .9; }
.detail-plus {
  position: absolute; bottom: 1.5rem; right: 1.5rem; display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center;
  border-radius: 9999px; background: color-mix(in srgb, currentColor 30%, transparent); transition: transform 300ms;
}
.detail-card:hover .detail-plus { transform: scale(1.1); }
@media (min-width: 768px) {
  .details-sub { font-size: 1.125rem; line-height: 1.75rem; }
  .details-grid { gap: 2rem; }
  .detail-text { padding: 2rem 6rem 2rem 2rem; }
  .detail-title { font-size: 2.25rem; line-height: 2.5rem; }
  .detail-sub { font-size: 1.25rem; }
  .detail-plus { bottom: 2rem; right: 2rem; backdrop-filter: blur(12px); }
}

/* FAQ */
.faq { z-index: 20; }
.faq-grid { display: flex; flex-direction: column; gap: 4rem; }
.faq-left { position: relative; display: flex; flex-direction: column; }
.faq-title { margin-bottom: 1.5rem; font-family: var(--serif); font-size: 3rem; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: var(--text); }
.faq-more { margin-bottom: .25rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--muted); }
.faq-contact { font-size: 1.125rem; line-height: 1.75rem; color: var(--text); text-decoration: underline; text-underline-offset: 4px; transition: opacity 150ms; }
.faq-contact:hover { opacity: .8; }
.faq-list { border-top: 1px solid color-mix(in srgb, var(--text) 20%, transparent); }
.faq-item { border-bottom: 1px solid color-mix(in srgb, var(--text) 20%, transparent); }
.faq-q { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; padding-block: 1.5rem; text-align: left; }
.faq-q:focus { outline: none; }
.faq-q:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.faq-q > span:first-child { padding-right: 2rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; color: var(--text); transition: opacity 150ms; }
.faq-q:hover > span:first-child { opacity: .8; }
.faq-chev { margin-top: .25rem; display: flex; height: 1.5rem; width: 1.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: .25rem; color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.faq-chev svg { transition: transform 300ms; }
.faq-q[aria-expanded=true] .faq-chev svg { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 300ms ease-in-out, opacity 300ms ease-in-out; }
.faq-q[aria-expanded=true] + .faq-a { grid-template-rows: 1fr; opacity: 1; }
.faq-a-in { min-height: 0; overflow: hidden; }
.faq-a-in a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.faq-a-in p { padding: 0 1rem 1.5rem 0; font-size: 1rem; line-height: 1.625; color: var(--muted); }
@media (min-width: 768px) {
  .faq-title { font-size: 3.75rem; }
  .faq-more, .faq-contact { font-size: 1.25rem; }
  .faq-q > span:first-child { font-size: 1.25rem; }
  .faq-a-in p { padding-right: 3rem; font-size: 1.125rem; }
}
@media (min-width: 1024px) {
  .faq-grid { flex-direction: row; gap: 6rem; }
  .faq-left { width: 33.3333%; }
  .faq-left-in { position: sticky; top: 8rem; }
  .faq-right { width: 66.6667%; }
  .faq-title { font-size: 4.5rem; }
}

/* Footer */
.footer-wrap { position: relative; z-index: 20; scroll-margin-top: 88px; }
.footer { position: relative; height: 100svh; width: 100%; padding: .75rem .75rem 1rem; }
.footer-frame { position: relative; display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; overflow: hidden; border-radius: 24px; }
.footer-media { position: absolute; inset: 0; }
.footer-media img { opacity: .9; }
.footer-shade { position: absolute; inset: 0; background: var(--footer-shade); }
.footer-quote { position: relative; z-index: 10; margin-inline: auto; display: flex; width: 100%; max-width: 64rem; flex-direction: column; align-items: center; justify-content: center; padding-inline: 1.5rem; text-align: center; color: #fff; transform: translateY(-5vh); }
.footer-quote h2 {
  max-height: 58vh; width: 100%; max-width: 100%; overflow: hidden; padding-block: .05em .15em;
  font-family: var(--serif); font-size: 3rem; line-height: .92; color: #fff;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .04)) drop-shadow(0 4px 3px rgba(0, 0, 0, .1));
}
@media (min-width: 768px) {
  .footer { padding: 1rem 1rem 1.5rem; }
  .footer-quote h2 { font-size: 5rem; }
}
@media (min-width: 1024px) { .footer { padding: 1.25rem 1.25rem 1.5rem; } }

/* Click hearts */
.hearts { position: fixed; inset: 0; z-index: 99999; display: block; width: 100vw; height: 100vh; pointer-events: none; user-select: none; }

/* Dialogs: full-screen transparent shells, so scrim and card animate like the reference */
dialog { color: inherit; }
dialog::backdrop { background: transparent; }
.lightbox, .sheet {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: transparent; overflow: hidden;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox { opacity: 0; transition: all 500ms cubic-bezier(.23, 1, .32, 1); }
.lightbox.open { opacity: 1; }
.lb-scrim { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.lb-card {
  position: relative; z-index: 10; display: flex; width: fit-content; min-width: 60vw; max-width: 95vw; min-height: 40vh;
  flex-direction: column; align-items: center; border-radius: .6rem; background: var(--polaroid); padding: .75rem;
  transform: scale(.5) translateY(20vh) rotate(var(--r, -2.5deg));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .05);
  transition: transform 500ms cubic-bezier(.23, 1, .32, 1), box-shadow 500ms cubic-bezier(.23, 1, .32, 1);
}
.lightbox.open .lb-card { transform: none; box-shadow: 0 45px 100px -20px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .05); }
.lb-close {
  position: absolute; right: 1rem; top: 1rem; z-index: 20; border-radius: 9999px; padding: .375rem;
  background: rgba(248, 243, 232, .7); color: rgba(0, 0, 0, .4); backdrop-filter: blur(4px); transition: color 150ms, background-color 150ms;
}
.lb-close:hover { background: var(--polaroid); color: rgba(0, 0, 0, .7); }
.lb-close svg { height: 1.5rem; width: 1.5rem; }
.lb-card img { display: block; height: auto; width: auto; max-height: 70vh; max-width: 85vw; object-fit: contain; }
.lb-cap { margin-top: .75rem; display: flex; min-width: 100%; align-items: center; justify-content: center; padding-inline: .5rem; }
.lb-cap p { max-width: 100%; overflow-wrap: break-word; text-align: center; font-size: clamp(1rem, 2.5vw, 1.5rem); font-weight: 500; color: rgba(0, 0, 0, .7); }
@media (min-width: 768px) {
  .lb-card { min-width: 30vw; max-width: 90vw; min-height: 50vh; padding: 1.25rem; }
  .lb-close { right: 1.5rem; top: 1.5rem; }
  .lb-close svg { height: 2rem; width: 2rem; }
  .lb-card img { max-height: 80vh; max-width: 80vw; }
  .lb-cap { margin-top: 1.25rem; }
}

.sheet[open] { display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; background: rgba(0, 0, 0, .4); backdrop-filter: blur(4px); opacity: 0; transition: opacity 500ms; }
.sheet.open .sheet-scrim { opacity: 1; }
.sheet-panel {
  position: relative; display: flex; height: calc(100dvh - env(safe-area-inset-top) - 1.5rem); width: 100%; flex-direction: column; overflow: hidden;
  border-radius: 2rem 2rem 0 0; background: var(--bg); box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
  transform: translateY(100%); transition: transform 500ms cubic-bezier(.32, .72, 0, 1);
}
.sheet.open .sheet-panel { transform: none; }
.sheet-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; background: var(--bg); }
.sheet-bar h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--text); }
.sheet-x { display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-radius: 9999px; color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); transition: background-color 150ms; }
.sheet-x:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.sheet-scroll { width: 100%; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.sheet-scroll:focus { outline: none; }
.sheet-body { margin-inline: auto; width: 100%; max-width: 56rem; padding: 1rem 1.5rem 6rem; }
.sheet.open .sheet-body { animation: sheet-in 700ms both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(2rem); } }
.sheet-hero { position: relative; margin-bottom: 2rem; aspect-ratio: 21 / 9; width: 100%; overflow: hidden; border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.sheet-copy { max-width: 42rem; color: var(--text); }
.sheet-copy > h2 { margin-bottom: 1.5rem; font-family: var(--serif); font-size: 3rem; line-height: 1; }
.sheet-lead { margin-bottom: 3rem; font-size: 1.125rem; line-height: 1.625; opacity: .8; }
.sheet-blocks { display: flex; flex-direction: column; gap: 3rem; font-size: 1.125rem; line-height: 1.625; opacity: .9; }
.sheet-blocks a { text-decoration: underline; text-underline-offset: 4px; }
.sheet-blocks h4 { margin-bottom: 1rem; font-size: .875rem; line-height: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .5; }
.sheet-blocks h3 { margin-bottom: 1rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.party-h { margin-bottom: 1.5rem !important; font-size: 1.875rem !important; line-height: 2.25rem !important; }
.party-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding-bottom: 2rem; }
.tilt { position: relative; display: flex; height: 300px; width: 100%; align-items: center; justify-content: center; perspective: 800px; }
.tilt-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 300ms ease-out; }
.portrait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 15px; padding: 1rem; text-align: center; font-size: .875rem; line-height: 1.25rem; color: var(--muted); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.badge { position: absolute; left: .75rem; top: .75rem; z-index: 2; display: flex; width: fit-content; max-width: calc(100% - 24px); flex-direction: column; border-radius: .5rem; padding: .375rem .75rem; text-align: left; color: #fff; background: rgba(0, 0, 0, .4); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); backdrop-filter: blur(12px); transform: translateZ(30px); }
.badge b { font-size: .875rem; line-height: 1.25rem; }
.badge small { font-size: .75rem; line-height: 1rem; opacity: .85; }
@media (min-width: 768px) {
  .sheet-panel { height: 95vh; border-radius: 3rem 3rem 0 0; }
  .sheet-bar { padding: 2rem; }
  .sheet-bar h3 { font-size: 1.5rem; line-height: 2rem; }
  .sheet-body { padding-inline: 3rem; }
  .sheet-copy > h2 { font-size: 3.75rem; }
  .sheet-lead { font-size: 1.25rem; }
  .party-h { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  .party-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .badge { left: 1.5rem; top: 1.5rem; max-width: calc(100% - 48px); border-radius: .75rem; padding: .5rem 1.25rem; }
  .badge b { font-size: 1.125rem; line-height: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-letter { animation: none; opacity: 1; filter: none; transform: none; }
  .intro-btn { transition: opacity 150ms cubic-bezier(.22, 1, .36, 1); }
  .intro.entering .intro-btn { transform: none; opacity: 0; }
  .reveal, .reveal-scale { opacity: 1; translate: 0 0; scale: 1; transition: none; }
  .venue-clip { clip-path: inset(0 0 0 0); opacity: 1; translate: 0 0; transition: none; }
  .venue-zoom { scale: 1; transition: none; }
  .bounce { animation: none; }
  .sheet.open .sheet-body { animation: none; }
  .lightbox, .lb-card, .sheet-scrim, .sheet-panel { transition-duration: 1ms; }
}

/* RSVP wizard */
.r-page { position: relative; min-height: 100vh; overflow: hidden; padding: 3rem 1.5rem; color: var(--text); }
.r-close { position: absolute; right: 1.5rem; top: 1.5rem; z-index: 10; padding: .5rem; color: var(--muted); transition: color 150ms; }
.r-close:hover { color: var(--text); }
.r-close svg { height: 1.5rem; width: 1.5rem; }
.r-col { margin-inline: auto; display: flex; min-height: calc(100vh - 6rem); width: 100%; max-width: 42rem; flex-direction: column; justify-content: center; }
.r-title, .r-h1 { font-family: var(--serif); font-size: 2.25rem; line-height: 2.5rem; font-weight: 400; letter-spacing: .025em; }
.r-title:focus, .r-h1:focus { outline: none; }
.r-title { margin-bottom: 1rem; text-align: center; }
.r-sub { margin-bottom: 4rem; text-align: center; font-size: .875rem; line-height: 1.25rem; text-transform: uppercase; letter-spacing: .28em; color: var(--muted); }
.r-form { display: flex; flex-direction: column; gap: 2rem; }
.r-fields { display: flex; flex-direction: column; gap: 1.5rem; }
.r-big, .r-input, .r-note { width: 100%; background: transparent; font-family: inherit; font-weight: 400; color: var(--text); }
.r-big, .r-input { border-bottom: 1px solid var(--border); padding-block: .75rem; transition: border-color 150ms; }
.r-big { font-size: 1.875rem; line-height: 2.25rem; }
.r-big:focus, .r-input:focus { outline: none; border-color: var(--text); }
.r-big::placeholder, .r-note::placeholder { color: color-mix(in srgb, var(--muted) 45%, white); }
.r-go { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; }
.r-msg { flex: 1; font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.r-arrow, .r-arrow-back { height: 1.25rem; width: 1.25rem; flex-shrink: 0; transition: transform 150ms; }
.r-round { display: flex; height: 3.5rem; width: 3.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--text); transition: all 300ms; }
.r-round:hover { background: var(--accent); color: var(--on-accent); }
.r-round:disabled { opacity: .5; }
.r-round:hover .r-arrow, .r-party:hover .r-arrow, .r-next:hover .r-arrow { transform: translateX(.25rem); }
.r-matches { margin-top: 3.5rem; }
.r-stack { display: flex; flex-direction: column; gap: 1rem; }
.r-eyebrow { font-size: .75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); }
.r-stack > .r-eyebrow { text-align: center; }
.r-eyebrow-gap { margin-bottom: 1rem; }
.r-party { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 1px solid var(--border); background: #fff; padding: 1.25rem; text-align: left; transition: border-color 150ms; }
.r-party:hover { border-color: var(--text); }
.r-party-text { min-width: 0; padding-right: 1rem; }
.r-party-name, .r-party-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-party-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; color: var(--text); }
.r-party-label { margin-top: .25rem; font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.r-py { padding-block: 2.5rem; }
.r-head { margin-bottom: 3.5rem; text-align: center; }
.r-select-head { margin-bottom: 2.5rem; display: flex; align-items: baseline; justify-content: space-between; }
.r-select-head p { font-size: .75rem; line-height: 1rem; color: var(--muted); }
.r-list { display: flex; flex-direction: column; gap: .75rem; }
.r-guest-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 1px solid var(--border); padding: 1.25rem; text-align: left; transition: border-color 150ms, background-color 150ms; }
.r-guest-btn:hover { border-color: var(--text); }
.r-guest-btn[aria-pressed=true] { border-color: var(--text); background: #fff; }
.r-guest-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; }
.r-check { display: flex; height: 1.5rem; width: 1.5rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--border); }
.r-check svg { height: .875rem; width: .875rem; }
[aria-pressed=true] > .r-check { background: var(--accent); color: var(--on-accent); border-color: var(--text); }
.r-foot { margin-top: 3.5rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 2rem; }
.r-foot-tight { margin-top: 3rem; }
.r-back, .r-next { display: flex; align-items: center; font-size: .875rem; line-height: 1.25rem; text-transform: uppercase; letter-spacing: .22em; }
.r-back { gap: .75rem; color: var(--muted); transition: color 150ms; }
.r-back:hover { color: var(--text); }
.r-back:hover .r-arrow-back { transform: translateX(-.25rem); }
.r-next { gap: 1rem; color: var(--text); }
.r-next:disabled { cursor: not-allowed; opacity: .5; }
.r-next-circle { display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--text); transition: color 150ms, background-color 150ms; }
.r-next:hover .r-next-circle { background: var(--accent); color: var(--on-accent); }
.r-next-solid { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.r-spinner { height: 1.25rem; width: 1.25rem; border-radius: 9999px; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.r-banner { margin-bottom: 2rem; border: 1px solid var(--border); background: #fff; padding: .75rem 1rem; text-align: center; font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.r-progress { margin-bottom: 3rem; }
.r-progress-row { margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; font-size: .75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); }
.r-bar { height: 1px; width: 100%; background: var(--border); }
.r-bar-fill { height: 1px; background: var(--text); transition: width 150ms; }
.r-step-head { margin-bottom: 3rem; text-align: center; }
.r-step-head .r-h1 { margin-bottom: 1rem; }
.r-step-head p { font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.r-hint { margin-bottom: 2.5rem; text-align: center; font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.r-guests { display: flex; flex-direction: column; gap: 3rem; }
.r-guest { border-bottom: 1px solid var(--border); padding-bottom: 2.5rem; }
.r-guest:last-child { border-bottom: 0; }
.r-name, .r-name-flat { font-size: 1.5rem; line-height: 2rem; font-weight: 400; }
.r-name { margin-bottom: 2rem; }
.r-events { display: flex; flex-direction: column; gap: 1.5rem; }
.r-event { display: flex; flex-direction: column; gap: 1rem; }
.r-event-text { min-width: 0; flex: 1; }
.r-event-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; overflow-wrap: break-word; }
.r-when { margin-top: .25rem; font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.r-yn { display: grid; width: 100%; flex-shrink: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 9999px; border: 1px solid var(--border); padding: .25rem; font-size: .875rem; line-height: 1.25rem; }
.r-yn button { border-radius: 9999px; padding: .5rem 1rem; color: var(--muted); transition: color 150ms, background-color 150ms; }
.r-yn button:hover { color: var(--text); }
.r-yn button[aria-pressed=true] { background: var(--accent); color: var(--on-accent); }
.r-plus { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.5rem; border-top: 1px solid var(--border); padding-top: 3rem; }
.r-plus-prompt { margin-top: .5rem; font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.r-plus-list { display: flex; flex-direction: column; gap: 2.25rem; }
.r-plus-guest { display: flex; flex-direction: column; gap: 2rem; }
.r-guest-n { font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; }
.r-opts { display: grid; gap: .75rem; }
.r-opt { border: 1px solid var(--border); padding: 1rem; text-align: left; font-size: .875rem; line-height: 1.25rem; color: var(--muted); transition: border-color 150ms, color 150ms; }
.r-opt:hover { border-color: var(--text); }
.r-opt[aria-pressed=true] { border-color: var(--text); background: #fff; color: var(--text); }
.r-counter { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; border-block: 1px solid var(--border); padding-block: 1rem; }
.r-counter-label { font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.r-counter-controls { display: grid; grid-template-columns: 2.5rem 3rem 2.5rem; align-items: center; gap: .5rem; }
.r-counter-controls button { display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--border); font-size: 1.125rem; color: var(--text); transition: border-color 150ms; }
.r-counter-controls button:hover { border-color: var(--text); }
.r-counter-controls button:disabled { cursor: not-allowed; opacity: .35; }
.r-counter-controls output { display: block; width: 3rem; text-align: center; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.r-names { display: grid; gap: 1.25rem; }
.r-label { display: block; font-size: .75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); }
.r-input { font-size: 1.125rem; line-height: 1.75rem; }
.r-remove { align-self: flex-start; font-size: .75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); transition: color 150ms; }
.r-remove:hover { color: var(--text); }
.r-details { display: flex; flex-direction: column; gap: 3.5rem; }
.r-person { display: flex; flex-direction: column; gap: 2.5rem; border-bottom: 1px solid var(--border); padding-bottom: 3rem; }
.r-person:last-child { border-bottom: 0; }
.r-note { display: block; resize: none; padding-block: .75rem; font-size: 1.125rem; line-height: 1.75rem; }
.r-note:focus { outline: none; }
.r-cards { display: flex; flex-direction: column; gap: 2rem; }
.r-card { border: 1px solid var(--border); background: #fff; padding: 1.25rem; }
.r-card-sec { margin-top: 1.5rem; font-size: .875rem; line-height: 1.25rem; }
.r-card-head { margin-bottom: .75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.r-card-head h3 { font-size: .75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.r-edit { font-size: .75rem; line-height: 1rem; color: var(--muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; transition: color 150ms; }
.r-edit:hover { color: var(--text); }
.r-rows { border-block: 1px solid var(--border); }
.r-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; padding-block: .75rem; }
.r-row + .r-row { border-top: 1px dashed var(--border); }
.r-row > span:first-child { color: var(--muted); overflow-wrap: break-word; }
.r-kv { display: flex; flex-direction: column; gap: .75rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.r-kv > div { display: grid; gap: .25rem; }
.r-kv p:first-child { color: var(--muted); }
.r-kv p:last-child { white-space: pre-line; overflow-wrap: break-word; }
.r-error { margin-top: 1.5rem; text-align: center; font-size: .875rem; line-height: 1.25rem; color: #dc2626; }
.r-done { margin-inline: auto; width: 100%; max-width: 42rem; padding-block: 3rem; }
.r-done-head { text-align: center; }
.r-h1-gap { margin-bottom: 1.5rem; }
.r-done-body { font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.r-done-summary { margin-top: 3rem; }
.r-done-actions { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.r-done-actions button { font-size: .875rem; line-height: 1.25rem; text-transform: uppercase; letter-spacing: .22em; color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 640px) {
  .r-event { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  .r-yn { width: 10rem; }
  .r-opts, .r-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-card { padding: 1.5rem; }
  .r-kv > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.25rem; }
  .r-kv p:last-child { text-align: right; }
  .r-done-actions { flex-direction: row; gap: 2rem; }
}
@media (min-width: 768px) {
  .r-page { padding-inline: 2.5rem; }
  .r-close { right: 2rem; top: 2rem; }
  .r-title, .r-h1 { font-size: 3rem; line-height: 1; }
}