@font-face {
  font-family: 'EB Garamond Custom';
  src: url('assets/EBGaramond-VariableFont_wght.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --cream: #f3efe4;
  --ivory: #faf7ef;
  --sage: #87957c;
  --sage-dark: #6f7458;
  --sage-pale: #d2d5c5;
  --olive: #7f8668;
  --olive-light: #a9ad91;
  --ink: #536052;
  --line: rgba(83, 96, 82, .22);
  --serif: 'EB Garamond Custom', Garamond, Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  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='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
a { color: inherit; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; background: var(--ink); color: white; padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }

html[data-access="locked"], html[data-access="locked"] body { overflow: hidden; }
html[data-access="locked"] body > main,
html[data-access="locked"] body > .palette-switcher,
html[data-access="locked"] body > .skip-link { visibility: hidden; }
.access-gate {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(1.25rem, 4vw, 3.5rem);
  color: var(--ink);
  background-color: var(--olive);
  background-image: linear-gradient(rgba(127,134,104,.2), rgba(127,134,104,.2)), repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, transparent 1px 8px);
  transition: opacity .65s ease, visibility .65s ease;
}
.access-gate::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.18), transparent 29%), radial-gradient(circle at 82% 84%, rgba(42,49,34,.12), transparent 31%); }
html[data-access="granted"] .access-gate { opacity: 0; visibility: hidden; pointer-events: none; }
.access-card {
  position: relative;
  width: min(680px, 100%);
  min-height: min(760px, calc(100svh - 2.5rem));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 7vw, 5.5rem);
  text-align: center;
  background: var(--cream) url('assets/hero-embossed-floral-v2.png') center / cover no-repeat;
  border: 1px solid rgba(255,255,255,.68);
  box-shadow: 0 30px 80px rgba(42,48,34,.23), inset 1px 1px 0 rgba(255,255,255,.92), inset -1px -1px 0 rgba(74,80,61,.14);
}
.access-card::before { content: ''; position: absolute; inset: 1rem; border: 1px solid rgba(83,96,82,.17); pointer-events: none; }
.access-card > * { position: relative; z-index: 1; }
.access-monogram { width: clamp(78px, 12vw, 108px); height: auto; margin-bottom: 1.4rem; object-fit: contain; }
.access-overline { margin: 0; font: 400 .58rem var(--sans); text-transform: uppercase; letter-spacing: .31em; }
.access-card h1 { margin: .8rem 0 1rem; font-size: clamp(3.45rem, 8vw, 5.8rem); line-height: .88; font-weight: 400; text-transform: uppercase; color: #eee8dd; text-shadow: -1px -1px 1px rgba(255,255,255,.98), 1px 1px 1px rgba(92,82,68,.36), 0 2px 4px rgba(92,82,68,.08); }
.access-copy { max-width: 450px; margin: 0 auto 2rem; font-size: 1.02rem; line-height: 1.55; }
.access-form { width: min(480px, 100%); }
.access-form label { display: block; margin: 0 0 .55rem; text-align: left; font: 400 .52rem var(--sans); text-transform: uppercase; letter-spacing: .2em; }
.access-input-row { display: grid; grid-template-columns: 1fr auto; border: 1px solid rgba(83,96,82,.3); background: rgba(250,247,239,.84); box-shadow: inset 1px 1px 0 rgba(255,255,255,.88), 0 12px 32px rgba(59,68,50,.08); }
.access-input-row input { min-width: 0; padding: 1rem 1.05rem; border: 0; outline: 0; color: var(--ink); background: transparent; font: 400 1rem var(--serif); }
.access-input-row input::placeholder { color: rgba(83,96,82,.58); }
.access-input-row:focus-within { outline: 2px solid rgba(83,96,82,.62); outline-offset: 3px; }
.access-input-row button { padding: .95rem 1.2rem; border: 0; color: var(--ivory); background: var(--ink); cursor: pointer; font: 400 .5rem var(--sans); text-transform: uppercase; letter-spacing: .14em; transition: background .25s ease, transform .25s ease; }
.access-input-row button:hover { background: var(--sage-dark); }
.access-input-row button:active { transform: translateY(1px); }
.access-input-row button:disabled { cursor: wait; opacity: .72; }
.access-error { min-height: 1.4em; margin: .65rem 0 0; color: #7a5045; font-size: .9rem; }
.access-rule { display: flex; align-items: center; gap: .7rem; width: 160px; margin: 1.45rem auto 1rem; color: var(--olive); }
.access-rule span { flex: 1; height: 1px; background: rgba(83,96,82,.3); }
.access-rule b { font-size: .55rem; }
.access-date { margin: 0; font: 400 .52rem var(--sans); text-transform: uppercase; letter-spacing: .2em; }
.access-palette { display: flex; align-items: center; gap: .7rem; margin-top: 1.7rem; }
.access-palette > span { font: 400 .48rem var(--sans); text-transform: uppercase; letter-spacing: .18em; }
.access-palette .palette-options { border: 1px solid rgba(83,96,82,.13); }
html[data-palette="ivory"] .access-gate { background-color: var(--cream); background-image: url('assets/hero-embossed-floral-v2.png'); background-position: center; background-size: cover; }
html[data-palette="ivory"] .access-card { background-color: rgba(250,247,239,.82); background-image: none; box-shadow: 0 28px 70px rgba(55,65,48,.12), inset 1px 1px 0 rgba(255,255,255,.96), inset -1px -1px 0 rgba(72,79,59,.09); backdrop-filter: blur(2px); }
html[data-palette="ivory"] .access-card h1 { color: #f1ece2; }
.palette-switcher { position: fixed; z-index: 80; left: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem .55rem .85rem; color: var(--ink); background: rgba(250,247,239,.9); border: 1px solid rgba(83,96,82,.2); box-shadow: 0 10px 32px rgba(47,55,42,.14); backdrop-filter: blur(12px); }
.palette-switcher-label { font: 400 .48rem var(--sans); text-transform: uppercase; letter-spacing: .2em; }
.palette-options { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; background: rgba(83,96,82,.08); }
.palette-options button { min-width: 62px; padding: .55rem .65rem; border: 0; background: transparent; color: var(--ink); font: 400 .48rem var(--sans); text-transform: uppercase; letter-spacing: .13em; cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.palette-options button[aria-pressed="true"] { background: var(--ink); color: var(--ivory); box-shadow: 0 2px 8px rgba(47,55,42,.18); }
.palette-options button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.overline { margin: 0; font: 400 .58rem var(--sans); text-transform: uppercase; letter-spacing: .31em; }
.hero .overline { color: #97978a; text-shadow: 0 1px 0 rgba(255,255,255,.82); }
.hero { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; padding: 7rem 1.5rem 5rem; background: var(--cream) url('assets/hero-embossed-floral-v2.png') center / cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: clamp(1.2rem, 3vw, 3rem); border: 1px solid rgba(255,255,255,.72); box-shadow: 1px 1px 0 rgba(92,82,68,.12), inset 1px 1px 0 rgba(255,255,255,.9); }
.embossed-field { display: none; }
.hero-flower { position: absolute; width: min(30vw, 360px); fill: none; stroke: rgba(82,97,79,.16); stroke-width: 1; filter: drop-shadow(1px 1px 0 rgba(255,255,255,.85)) drop-shadow(-1px -1px 0 rgba(82,97,79,.07)); }
.hero-flower-a { left: -1.5rem; bottom: -3rem; transform: rotate(-8deg); }
.hero-flower-b { right: -1.5rem; top: -3rem; transform: rotate(172deg); }
.hero-inner { position: relative; z-index: 2; text-align: center; width: min(1100px, 92vw); }
.hero h1 { margin: 1.4rem 0 2.5rem; text-transform: uppercase; font-size: clamp(4rem, 9.2vw, 9.4rem); font-weight: 400; line-height: .72; letter-spacing: -.025em; color: #eee8dd; text-shadow: -1px -1px 1px rgba(255,255,255,.98), 1px 1px 1px rgba(92,82,68,.38), 0 2px 4px rgba(92,82,68,.08); }
.hero h1 span { display: block; }
.hero h1 em { display: block; font-size: .32em; line-height: 1.7; font-weight: 400; color: #ece6da; text-transform: none; }
.hero-date { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 560px; margin: auto; color: #97978a; border-top: 1px solid rgba(121,119,107,.24); border-bottom: 1px solid rgba(121,119,107,.24); text-shadow: 0 1px 0 rgba(255,255,255,.82); }
.hero-date > * { padding: 1rem 1.25rem; }
.hero-date span { font: 400 .52rem var(--sans); text-transform: uppercase; letter-spacing: .24em; }
.hero-date b { font-weight: 400; font-size: 1.25rem; border-left: 1px solid rgba(121,119,107,.22); border-right: 1px solid rgba(121,119,107,.22); letter-spacing: .12em; }
.material-transition { position: relative; z-index: 5; height: clamp(100px, 13vw, 180px); margin-block: -1px; overflow: hidden; isolation: isolate; }
.deckled-transition {
  height: clamp(76px, 8vw, 116px);
  background-color: var(--olive);
  background-image: repeating-linear-gradient(90deg, rgba(55,65,48,.025) 0 1px, transparent 1px 7px);
}
.deckled-transition::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0 0 28%;
  background-color: var(--cream);
  background-image: repeating-linear-gradient(7deg, rgba(105,97,80,.035) 0 1px, transparent 1px 9px);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 94% 72%, 88% 67%, 81% 74%, 74% 69%, 67% 76%, 59% 70%, 52% 75%, 44% 68%, 36% 74%, 29% 69%, 21% 76%, 14% 70%, 7% 74%, 0 69%);
  filter: drop-shadow(0 8px 5px rgba(54,64,47,.2));
}
.deckled-transition::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 50% 0 0;
  background: linear-gradient(180deg, rgba(64,74,55,.12), transparent 48%);
}
.deckled-seam {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 48%;
  height: 1px;
  background: rgba(83,96,82,.2);
  opacity: .65;
  transform: rotate(-.35deg);
}
.deckled-transition-dark { background-color: var(--sage-dark); }
.deckled-transition-dark::before { inset: 0 0 24%; }
.deckled-transition-dark::after { background: linear-gradient(180deg, rgba(42,50,38,.17), transparent 52%); }

.corrugated-transition { height: clamp(110px, 14vw, 190px); background-color: var(--olive); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.48) 0 2px, rgba(255,255,255,.06) 2px 6px, rgba(66,74,53,.2) 6px 8px, rgba(255,255,255,.1) 8px 13px), linear-gradient(180deg, var(--olive), var(--cream)); box-shadow: inset 0 18px 32px rgba(255,255,255,.35), inset 0 -20px 38px rgba(70,84,66,.14); }
.corrugated-transition::before { content: ''; position: absolute; inset: 0; background: linear-gradient(108deg, transparent 16%, rgba(255,255,255,.55) 38%, transparent 55%); transform: translateX(-110%); }
.corrugated-transition::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.52), transparent 30%, rgba(58,72,56,.12)); mix-blend-mode: soft-light; }
.corrugated-fold { position: absolute; z-index: 2; inset: 18% -8%; border-radius: 50%; border-top: 1px solid rgba(255,255,255,.78); box-shadow: 0 -8px 22px rgba(255,255,255,.22), 0 16px 38px rgba(62,75,59,.12); transform: rotate(-1deg); }
.corrugated-transition-pale { background-color: var(--ivory); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.48) 0 2px, rgba(229,224,211,.28) 2px 6px, rgba(59,69,56,.18) 6px 8px, rgba(255,255,255,.16) 8px 13px), linear-gradient(180deg, var(--sage-dark), var(--ivory)); }
.motion-surface.visible.corrugated-transition::before { animation: corrugated-shine 1.8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes corrugated-shine { to { transform: translateX(110%); } }

.invitation-section { min-height: 100svh; background-color: var(--olive); background-image: radial-gradient(circle at 15% 10%, rgba(255,255,255,.13), transparent 28%), radial-gradient(circle at 85% 85%, rgba(39,47,31,.13), transparent 30%), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px); color: var(--ivory); padding: clamp(6rem, 11vw, 11rem) 1.5rem; display: grid; place-items: center; position: relative; }
.invitation-section::before { content: ''; position: absolute; inset: clamp(1.5rem, 4vw, 4rem); border: 1px solid rgba(250,247,239,.28); box-shadow: inset 1px 1px rgba(255,255,255,.12); }
.invitation-card { position: relative; z-index: 1; width: min(820px, 94vw); padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 7vw, 6rem); text-align: center; background: transparent; box-shadow: none; }
.invitation-card::before { display: none; }
.invite-small, .invite-footer { font: 400 .54rem var(--sans); text-transform: uppercase; letter-spacing: .25em; }
.invitation-card h2 { margin: 2.3rem 0 1.5rem; text-transform: uppercase; font-weight: 400; font-size: clamp(3.4rem, 6.2vw, 5rem); line-height: .78; }
.invitation-card h2 span { display: block; }
.invitation-card h2 i { display: block; color: var(--cream); font-size: .44em; font-weight: 400; line-height: 1.5; text-transform: none; }
.invite-request { font-size: .88rem; line-height: 1.85; font-style: italic; letter-spacing: .08em; text-transform: uppercase; }
.invite-rule { display: flex; align-items: center; gap: .7rem; max-width: 180px; margin: 1.8rem auto; color: var(--cream); }
.invite-rule span { flex: 1; height: 1px; background: rgba(250,247,239,.58); }
.invite-rule b { font-size: .55rem; }
.invite-date { font-size: 1.08rem; line-height: 1.65; margin: 0; letter-spacing: .055em; text-transform: uppercase; }
.invite-date b { font-weight: 400; }
.invite-time { font-style: italic; margin: .7rem 0 2rem; font-size: .9rem; letter-spacing: .07em; text-transform: uppercase; }
.invite-place strong { display: block; font-size: 1.65rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 400; }
.invite-place span { display: block; margin-top: .35rem; font: 400 .55rem var(--sans); text-transform: uppercase; letter-spacing: .2em; }
.invite-footer { margin: 2.8rem 0 0; }

.family-event-section { position: relative; overflow: hidden; padding: clamp(6rem, 11vw, 10rem) 1.5rem; background-color: var(--cream); background-image: repeating-linear-gradient(90deg, rgba(83,96,82,.025) 0 1px, transparent 1px 8px); }
.family-event-section::before, .family-event-section::after { content: ''; position: absolute; width: min(42vw, 460px); aspect-ratio: 2 / 3; background: url('assets/hydrangea-botanical-engraving-v1.png') center / contain no-repeat; opacity: .06; filter: grayscale(1) sepia(.18) hue-rotate(22deg); pointer-events: none; }
.family-event-section::before { left: -10rem; bottom: -17rem; transform: rotate(-10deg); }
.family-event-section::after { right: -11rem; top: -18rem; transform: rotate(168deg); }
.family-event-card { position: relative; z-index: 1; width: min(900px, 100%); margin: auto; padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 8vw, 7rem); text-align: center; background-color: rgba(250,247,239,.78); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.36) 0 2px, rgba(229,224,211,.12) 2px 7px, transparent 7px 14px); border: 1px solid rgba(83,96,82,.2); box-shadow: 0 30px 75px rgba(55,65,48,.12), inset 1px 1px 0 rgba(255,255,255,.94), inset -1px -1px 0 rgba(72,79,59,.08); }
.family-event-date { margin: 1.7rem 0 2.2rem; font: 400 .64rem var(--sans); text-transform: uppercase; letter-spacing: .24em; }
.family-event-card h2 { margin: 0; font-size: clamp(2.65rem, 5.2vw, 4.65rem); font-weight: 400; line-height: .88; }
.family-event-card h2 span { display: block; }
.family-event-card h2 i { display: block; margin: .2rem 0; color: var(--olive); font-size: .42em; font-weight: 400; line-height: 1.3; }
.family-event-rule { display: flex; align-items: center; gap: .8rem; width: min(210px, 70%); margin: 2.5rem auto; color: var(--olive); }
.family-event-rule span { flex: 1; height: 1px; background: rgba(83,96,82,.3); }
.family-event-rule b { font-size: .55rem; }
.family-event-copy { max-width: 560px; margin: 0 auto; font-size: 1.06rem; line-height: 1.75; }
.family-event-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 590px; margin: 2.8rem auto 0; border-top: 1px solid rgba(83,96,82,.22); border-bottom: 1px solid rgba(83,96,82,.22); }
.family-event-details > div { padding: 1.6rem 1rem; }
.family-event-details > div + div { border-left: 1px solid rgba(83,96,82,.22); }
.family-event-details dt { margin-bottom: .55rem; font: 400 .5rem var(--sans); text-transform: uppercase; letter-spacing: .22em; }
.family-event-details dd { margin: 0; font-size: 1.08rem; }

.location-section { padding: clamp(6rem, 11vw, 10rem) clamp(1.5rem, 7vw, 8rem); background: var(--cream); overflow: hidden; }
.location-heading { text-align: center; max-width: 780px; margin: 0 auto 3rem; }
.location-heading h2, .countdown-copy h2, .action-panel h2 { font-weight: 400; font-size: clamp(4rem, 8.5vw, 8.3rem); line-height: .85; margin: 1.2rem 0 1.7rem; }
.location-heading h2 { font-size: clamp(3.2rem, 5.6vw, 5.4rem); }
.location-heading > p:last-child { max-width: 570px; margin: auto; font-size: 1.08rem; line-height: 1.75; }
.venue-illustration { max-width: 590px; margin: 0 auto; position: relative; }
.venue-illustration::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 4%; height: 12%; background: rgba(82,97,79,.14); filter: blur(20px); border-radius: 50%; z-index: 0; }
.venue-illustration img { position: relative; z-index: 1; display: block; width: 100%; height: auto; mix-blend-mode: multiply; opacity: .9; }
.location-meta { max-width: 920px; margin: 1rem auto 0; padding-top: 2rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr auto; gap: 3rem; align-items: start; }
.location-meta small { font: 400 .52rem var(--sans); text-transform: uppercase; letter-spacing: .22em; }
.location-meta p { font-size: 1rem; line-height: 1.5; margin: .6rem 0 0; }
.location-meta a { align-self: center; font: 400 .56rem var(--sans); text-transform: uppercase; letter-spacing: .18em; text-decoration: none; border-bottom: 1px solid; padding-bottom: .4rem; }
.location-meta a span { margin-left: .6rem; }

.countdown-section { background: var(--sage-dark); color: var(--ivory); padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 8vw, 9rem); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 8rem); align-items: end; }
.countdown-copy h2 { font-size: clamp(3.8rem, 7vw, 7rem); margin-bottom: 0; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(250,247,239,.45); }
.countdown > div { padding: 2.2rem .7rem; text-align: center; border-right: 1px solid rgba(250,247,239,.25); }
.countdown > div:last-child { border-right: 0; }
.countdown strong { display: block; font-size: clamp(2.3rem, 4.3vw, 4.8rem); font-weight: 400; font-variant-numeric: tabular-nums; }
.countdown span { display: block; margin-top: .7rem; font: 400 .48rem var(--sans); text-transform: uppercase; letter-spacing: .2em; }

.action-panel { min-height: 720px; padding: clamp(4rem, 8vw, 7rem) clamp(2rem, 6vw, 6rem); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }
.action-rsvp { min-height: auto; background: var(--ivory); padding-block: clamp(6rem, 10vw, 10rem); }
.action-registry { background-color: var(--olive); background-image: linear-gradient(rgba(250,247,239,.22), rgba(250,247,239,.22)), repeating-linear-gradient(90deg, rgba(250,247,239,.88) 0 8px, rgba(127,134,104,.92) 8px 20px, rgba(96,104,76,.96) 20px 29px, rgba(250,247,239,.78) 29px 35px); }
.hydrangea-emboss { position: absolute; z-index: 0; left: max(-6rem, -4vw); top: 5rem; width: min(42vw, 470px); max-height: 720px; object-fit: contain; opacity: .16; mix-blend-mode: multiply; filter: grayscale(1) sepia(.24) hue-rotate(24deg) drop-shadow(-1px -1px 0 rgba(255,255,255,.95)) drop-shadow(1.5px 1.5px 0 rgba(65,76,58,.28)); transform: rotate(-7deg); }
.action-panel > *:not(.hydrangea-emboss) { position: relative; z-index: 1; }
.rsvp-intro { max-width: 620px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.rsvp-intro h2 { margin-bottom: 1.25rem; }
.rsvp-intro > p:last-child { margin: 0 auto; max-width: 520px; font-size: 1.04rem; line-height: 1.7; }
.rsvp-form { width: min(900px, 100%); padding: clamp(2rem, 5vw, 4.5rem); text-align: left; background: rgba(250,247,239,.82); border: 1px solid rgba(83,96,82,.2); box-shadow: 0 28px 70px rgba(55,65,48,.12), inset 1px 1px 0 rgba(255,255,255,.92), inset -1px -1px 0 rgba(66,76,58,.08); backdrop-filter: blur(2px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.5rem); }
.form-field { display: block; margin-bottom: 1.7rem; }
.form-field > span, .attendance-fieldset legend { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; font: 400 .55rem var(--sans); text-transform: uppercase; letter-spacing: .18em; }
.form-field em { font-family: var(--serif); font-size: .76rem; letter-spacing: .04em; text-transform: none; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(83,96,82,.38); border-radius: 0; background: transparent; color: var(--ink); padding: .75rem .05rem; font: 400 1.02rem var(--serif); outline: none; }
.form-field textarea { resize: vertical; min-height: 95px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(83,96,82,.48); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.attendance-fieldset { margin: .7rem 0 2.2rem; padding: 0; border: 0; }
.attendance-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.attendance-options label { cursor: pointer; }
.attendance-options input { position: absolute; opacity: 0; pointer-events: none; }
.attendance-options span { display: grid; place-items: center; min-height: 68px; padding: 1rem; border: 1px solid rgba(83,96,82,.28); font-size: 1rem; text-align: center; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.attendance-options input:checked + span { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.attendance-options input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.attending-details { padding-top: 1.8rem; border-top: 1px solid rgba(83,96,82,.2); }
.rsvp-submit { display: block; min-width: 190px; margin: 1rem auto 0; }
.form-disclaimer { margin: 1rem 0 0; color: rgba(83,96,82,.7); font-size: .82rem; font-style: italic; text-align: center; }
.rsvp-confirmation { width: min(650px, 100%); padding: clamp(3rem, 7vw, 6rem); background: rgba(250,247,239,.86); border: 1px solid rgba(83,96,82,.2); box-shadow: 0 28px 70px rgba(55,65,48,.12); }
.confirmation-mark { display: block; margin-bottom: 1.2rem; font-size: 1rem; }
.rsvp-confirmation h3 { margin: 1.2rem 0; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; line-height: 1; }
.rsvp-confirmation > p:not(.overline) { font-size: 1.04rem; line-height: 1.7; }
.registry-paper { width: min(500px, 92%); padding: clamp(4rem, 7vw, 6.5rem) clamp(2rem, 5vw, 4rem); background-color: var(--ivory); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.54) 0 2px, rgba(227,223,210,.28) 2px 6px, rgba(91,101,78,.11) 6px 8px, transparent 8px 13px); box-shadow: 0 30px 65px rgba(44,50,36,.27), inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(72,79,59,.14); }
.registry-paper > p:not(.overline):not(.button-note) { max-width: 390px; margin-inline: auto; font-size: 1.04rem; line-height: 1.7; }
.action-panel .registry-paper h2 { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.action-panel h2 { font-size: clamp(4.5rem, 8vw, 7.5rem); margin: 1rem 0; }
.action-panel > p:not(.overline):not(.button-note) { max-width: 440px; font-size: 1.04rem; line-height: 1.7; }
.outline-button { margin-top: 1.6rem; padding: 1rem 1.6rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 400 .55rem var(--sans); text-transform: uppercase; letter-spacing: .18em; cursor: pointer; transition: .25s; }
.outline-button:hover, .outline-button:focus { background: var(--ink); color: var(--ivory); }
.button-note { min-height: 1.4em; font-style: italic; font-size: .88rem; }

.video-story { position: relative; isolation: isolate; contain: layout paint; min-height: clamp(720px, 92vh, 980px); display: grid; place-items: center; overflow: hidden; padding: clamp(5rem, 9vw, 8rem) 1.25rem; background: var(--cream); }
.monogram-field { position: absolute; z-index: -3; inset: -8rem -5rem; background: url('assets/jt-monogram-tile-v2.png') repeat; background-size: 104px 104px; transform: rotate(-3deg) scale(1.04); }
.video-story-wash { position: absolute; z-index: -2; inset: 0; background: rgba(247,242,232,.58); }
.video-story::after { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at center, rgba(250,247,239,.08) 0 28%, rgba(250,247,239,.38) 76%, rgba(250,247,239,.7) 100%); pointer-events: none; }
.video-story-frame { position: relative; display: grid; place-items: center; max-width: 90vw; background: transparent; box-shadow: 0 28px 34px rgba(47,54,39,.2); }
.video-story-frame video { display: block; width: auto; height: auto; max-width: 88vw; max-height: 78vh; background: transparent; object-fit: contain; transform: translateZ(0); backface-visibility: hidden; contain: paint; }

footer { min-height: 270px; background: #74795b; color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; }
footer > p { font: 400 .52rem var(--sans); text-transform: uppercase; letter-spacing: .2em; margin: 0 0 2.2rem; }
footer a { font: 400 .5rem var(--sans); text-transform: uppercase; letter-spacing: .18em; }

.invitation-section, .countdown-section, .action-registry, footer, .material-transition, .registry-paper { transition: background-color .5s ease, color .5s ease, box-shadow .5s ease; }

html[data-palette="ivory"] body { background-color: var(--ivory); }
html[data-palette="ivory"] .palette-options button[aria-pressed="true"] { background: var(--olive); }

html[data-palette="ivory"] .invitation-section {
  color: var(--ink);
  background-color: var(--ivory);
  background-image: repeating-linear-gradient(90deg, rgba(111,116,88,.025) 0 1px, transparent 1px 8px);
  overflow: hidden;
}
html[data-palette="ivory"] .invitation-section::before { border-color: rgba(83,96,82,.2); box-shadow: inset 1px 1px 0 rgba(255,255,255,.92), inset -1px -1px 0 rgba(62,71,53,.07); }
html[data-palette="ivory"] .invitation-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url('assets/hydrangea-botanical-engraving-v1.png'), url('assets/hydrangea-botanical-engraving-v1.png');
  background-repeat: no-repeat;
  background-position: left -8rem bottom -12rem, right -9rem top -13rem;
  background-size: min(45vw, 520px) auto, min(42vw, 480px) auto;
  opacity: .075;
  filter: grayscale(1) sepia(.15) hue-rotate(22deg);
  pointer-events: none;
}
html[data-palette="ivory"] .invitation-card { z-index: 1; }
html[data-palette="ivory"] .invitation-card h2 i,
html[data-palette="ivory"] .invite-rule { color: var(--olive); }
html[data-palette="ivory"] .invite-rule span { background: rgba(83,96,82,.38); }

html[data-palette="ivory"] .deckled-transition,
html[data-palette="ivory"] .deckled-transition-dark { background-color: var(--ivory); background-image: repeating-linear-gradient(90deg, rgba(83,96,82,.025) 0 1px, transparent 1px 8px); }
html[data-palette="ivory"] .deckled-transition::after,
html[data-palette="ivory"] .deckled-transition-dark::after { background: linear-gradient(180deg, rgba(83,96,82,.08), transparent 52%); }
html[data-palette="ivory"] .deckled-seam { background: rgba(83,96,82,.16); }

html[data-palette="ivory"] .corrugated-transition,
html[data-palette="ivory"] .corrugated-transition-pale {
  background-color: var(--cream);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.68) 0 2px, rgba(229,224,211,.2) 2px 6px, rgba(111,116,88,.09) 6px 8px, transparent 8px 13px), linear-gradient(180deg, var(--ivory), var(--cream));
  box-shadow: inset 0 14px 28px rgba(255,255,255,.42), inset 0 -18px 34px rgba(83,96,82,.08);
}
html[data-palette="ivory"] .corrugated-fold { border-top-color: rgba(83,96,82,.18); box-shadow: 0 -7px 18px rgba(255,255,255,.42), 0 12px 28px rgba(83,96,82,.07); }

html[data-palette="ivory"] .family-event-section { background-color: var(--ivory); background-image: repeating-linear-gradient(0deg, rgba(83,96,82,.018) 0 1px, transparent 1px 9px); }
html[data-palette="ivory"] .family-event-section::before, html[data-palette="ivory"] .family-event-section::after { opacity: .085; }
html[data-palette="ivory"] .family-event-card { background: rgba(250,247,239,.64); box-shadow: inset 1px 1px 0 rgba(255,255,255,.96), inset -1px -1px 0 rgba(72,79,59,.08), 0 24px 60px rgba(55,65,48,.07); }

html[data-palette="ivory"] .countdown-section {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background-color: var(--cream);
  background-image: repeating-linear-gradient(0deg, rgba(83,96,82,.022) 0 1px, transparent 1px 8px);
}
html[data-palette="ivory"] .countdown-section::before {
  content: '';
  position: absolute;
  right: -8rem;
  bottom: -18rem;
  width: min(42vw, 500px);
  aspect-ratio: 2 / 3;
  background: url('assets/hydrangea-botanical-engraving-v1.png') center / contain no-repeat;
  opacity: .075;
  filter: grayscale(1) sepia(.15) hue-rotate(22deg);
  transform: rotate(8deg);
  pointer-events: none;
}
html[data-palette="ivory"] .countdown-section > * { position: relative; z-index: 1; }
html[data-palette="ivory"] .countdown { border-top-color: rgba(83,96,82,.32); }
html[data-palette="ivory"] .countdown > div { border-right-color: rgba(83,96,82,.2); }

html[data-palette="ivory"] .action-registry {
  background-color: var(--cream);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.54) 0 5px, rgba(229,224,211,.2) 5px 10px, rgba(111,116,88,.07) 10px 12px, transparent 12px 20px);
}
html[data-palette="ivory"] .registry-paper { background-image: none; border: 1px solid rgba(83,96,82,.16); box-shadow: 0 24px 60px rgba(55,65,48,.1), inset 1px 1px 0 rgba(255,255,255,.94), inset -1px -1px 0 rgba(72,79,59,.09); }

html[data-palette="ivory"] footer { color: var(--ink); background: var(--cream); border-top: 1px solid rgba(83,96,82,.16); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .access-gate { padding: 0; }
  .access-card { min-height: 100svh; width: 100%; padding: 4.25rem 1.35rem 3rem; border: 0; }
  .access-card::before { inset: .7rem; }
  .access-monogram { width: 76px; margin-bottom: 1rem; }
  .access-card h1 { font-size: clamp(3rem, 16vw, 4.5rem); }
  .access-copy { max-width: 330px; font-size: .96rem; }
  .access-input-row { grid-template-columns: 1fr; }
  .access-input-row input { text-align: center; }
  .access-input-row button { min-height: 50px; }
  .access-palette { margin-top: 1.25rem; }
  .hero { background-position: 18% center; }
  .hero::before { inset: 4.5rem 1rem 1rem; }
  .hero-flower { width: 53vw; }
  .hero h1 { font-size: clamp(3.35rem, 15.2vw, 4.7rem); line-height: .76; letter-spacing: -.045em; }
  .hero-date { max-width: 360px; }
  .hero-date > * { padding: .8rem .55rem; }
  .hero-date span { font-size: .44rem; letter-spacing: .14em; }
  .hero-date b { font-size: .9rem; }
  .material-transition { height: 90px; }
  .corrugated-transition { height: 105px; }
  .invitation-section { padding-inline: .8rem; }
  .invitation-card { padding: 4rem 1.5rem; }
  .invitation-card h2 { font-size: clamp(3.1rem, 14vw, 4rem); }
  .family-event-section { padding-inline: 1rem; }
  .family-event-section::before, .family-event-section::after { width: 90vw; opacity: .045; }
  .family-event-card { padding: 3.5rem 1.25rem; }
  .family-event-card h2 { font-size: clamp(2.3rem, 10.8vw, 3.4rem); }
  .family-event-details { grid-template-columns: 1fr; }
  .family-event-details > div + div { border-left: 0; border-top: 1px solid rgba(83,96,82,.22); }
  .location-section { padding-inline: 1.25rem; }
  .venue-illustration { width: 92%; margin-inline: auto; }
  .location-meta { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .location-meta a { grid-column: 1 / -1; width: max-content; }
  .countdown-section { grid-template-columns: 1fr; }
  .countdown > div { padding: 1.5rem .25rem; }
  .countdown strong { font-size: clamp(1.9rem, 10vw, 3rem); }
  .countdown span { font-size: .42rem; letter-spacing: .12em; }
  .action-panel { min-height: 580px; }
  .action-rsvp { padding-inline: 1rem; }
  .rsvp-form { padding: 2rem 1.25rem; }
  .form-grid, .attendance-options { grid-template-columns: 1fr; gap: 0; }
  .attendance-options { gap: .75rem; }
  .hydrangea-emboss { left: -8rem; width: 85vw; opacity: .11; }
  .registry-paper { width: min(92%, 470px); }
  .video-story { min-height: 680px; padding-inline: .75rem; }
  .monogram-field { inset: -6rem -3rem; background-size: 78px 78px; }
  .video-story-frame { max-width: 92vw; }
  .video-story-frame video { max-width: 92vw; max-height: 74vh; }
  .palette-switcher { left: 50%; bottom: .75rem; transform: translateX(-50%); }
  .palette-switcher-label { display: none; }
  html[data-palette="ivory"] .invitation-section::after { background-position: left -10rem bottom -7rem, right -11rem top -9rem; background-size: 88vw auto, 82vw auto; opacity: .055; }
  html[data-palette="ivory"] .countdown-section::before { right: -12rem; width: 92vw; opacity: .055; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal, .motion-surface { opacity: 1; transform: none; }
  .deckled-seam { transform: none; }
}