:root {
  --cream: #fbf3e8;
  --paper: #fffbf2;
  --wine: #64343e;
  --wine-dark: #43272d;
  --forest: #243b32;
  --ink: #332a26;
  --muted: #6b5148;
  --gold: #805329;
  --line: #d3ae85;
  --curtain-duration: 1.42s;
  --seal-size: clamp(147px, 33vmin, 198px);
}
.site-header { background: #263d33; border-color: #967956; }
.header-inner { min-height: 64px; }
.site-header .monogram { font-style: italic; }
.section { padding-block: clamp(52px, 7.5vw, 112px); }
.section-heading { margin-bottom: clamp(25px, 5vw, 52px); }
.chapter-kicker { display: flex; align-items: center; justify-content: center; gap: .65rem; }
.chapter-kicker span { display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; width: 29px; height: 29px; font-size: .62rem; letter-spacing: 0; }

.storybook-hero {
  position: relative;
  isolation: isolate;
  min-height: max(645px, calc(100svh - 64px));
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(ellipse at 50% 38%, #fffdf4, #fbf0dc 76%, #edd7bf);
  border-bottom: 1px solid #d9b68f;
}
.storybook-scene, .hero-canopy, .hero-landscape, .petals, .storybook-curtains { position: absolute; inset: 0; }
.storybook-scene, .storybook-curtains, .petals { pointer-events: none; }
.hero-canopy, .hero-landscape {
  background-repeat: no-repeat;
  width: min(100%, 1100px);
  margin-inline: auto;
}
.hero-canopy {
  bottom: auto;
  height: clamp(105px, 17vw, 215px);
  background-image: url("assets/storybook-canopy.webp");
  background-position: center top;
  background-size: 100% auto;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(#000 72%, transparent 100%);
}
.hero-landscape {
  top: auto;
  width: min(100%, 570px);
  height: auto;
  aspect-ratio: 1024 / 616;
  background-image: url("assets/storybook-landscape.webp");
  background-position: center bottom;
  background-size: cover;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(transparent, #000 22%), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
  opacity: .91;
}
.storybook-title {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, 870px);
  padding-block: 124px 199px;
}
.title-kicker { color: #765238; letter-spacing: .21em; }
.storybook-title .ornament { margin: 13px 0 11px; }
.storybook-title h1 {
  margin: 0 auto;
  color: var(--forest);
  font-size: clamp(3.4rem, 9vw, 7rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.066em;
  line-height: .99;
}
.storybook-title h1:focus { outline: none; }
.storybook-title h1 > span, .storybook-title h1 > small, .storybook-title h1 > i { display: block; }
.storybook-title h1 > small {
  margin: 8px 0 0;
  color: #565c49;
  font-size: clamp(.85rem, 1.7vw, 1.05rem);
  font-style: normal;
  letter-spacing: .035em;
}
.storybook-title h1 > i {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .37em;
  margin-block: .06em .02em;
  color: #936044;
  font-size: .45em;
  font-style: italic;
  font-weight: 400;
}
.storybook-title h1 > i::before, .storybook-title h1 > i::after { content: ""; height: 1px; width: 31px; background: #caa381; }
.title-date { margin-top: clamp(18px, 3vw, 26px); color: #6a3a43; font: 1.35rem/1.34 var(--serif); }
.title-time { margin-top: 5px; color: #5f4940; font-size: .88rem; }
.title-actions { display: flex; flex-direction: column; align-items: center; margin-top: 20px; }
.title-actions .button { background: var(--forest); }
.title-actions .button:hover { background: #385447; }
.stage-close {
  min-height: 44px;
  background: none;
  border: 0;
  padding-inline: .7rem;
  color: #664637;
  font-size: .76rem;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
/* The native form dismisses the cover even before JavaScript loads. */
.invitation-gate {
  position: fixed;
  z-index: 9;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}
.invitation-gate[open] ~ .invitation-content { display: none; }
.storybook-cover {
  position: fixed;
  inset: 0;
  z-index: 8;
  isolation: isolate;
  overflow: hidden;
  touch-action: none;
  color: #fff3df;
  text-align: center;
}
.invitation-gate:not([open]) ~ .storybook-cover {
  visibility: hidden;
  transition: visibility 0s linear var(--curtain-duration);
}
.curtain {
  position: absolute;
  inset-block: -1px;
  width: 50.6%;
  background:
    linear-gradient(180deg, #a5a47e4d 0%, #141d1540 47%, #14251bc7 100%),
    repeating-linear-gradient(90deg,#202b24 0%,#3a4b3d 4%,#61735c 6%,#4d624e 8%,#28392e 11%,#28392e 13%);

}
.curtain::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 4px;
  background: linear-gradient(90deg,#5d4d38,#c1a07a,#6f563d);
  opacity: .8;
}
.curtain-left { left: 0; box-shadow: 14px 0 30px #1c231a55; }
.curtain-right { right: 0; transform: scaleX(-1); box-shadow: 14px 0 30px #1c231a55; }
.curtain-left::after, .curtain-right::after { right: 0; }
.curtain-swag {
  position: absolute;
  inset: -2px 0 auto;
  height: clamp(77px, 17vw, 155px);
  background:
    radial-gradient(ellipse at 50% -12%, #86937a, #4d6352 47%, #273a2c 72%),
    #36493a;
  border-radius: 0 0 50% 50% / 0 0 78% 78%;
  border-bottom: 2px solid #be9b6d;
  box-shadow: 0 7px 24px #0e201a7a, inset 0 -7px 0 #344737, inset 0 -9px 0 #8c7457;

}
.curtain-swag::before, .curtain-swag::after {
  content: "";
  position: absolute;
  inset: 2% 6% 17%;
  border: 1px solid #dec4a04f;
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 92% 92%;
}
.curtain-swag::after { inset: 0 11% 33%; }
.invitation-gate:not([open]) ~ .storybook-cover .curtain { transition: transform var(--curtain-duration) cubic-bezier(.49,.03,.19,1); }
.invitation-gate:not([open]) ~ .storybook-cover .curtain-left { transform: translateX(-104%); }
.invitation-gate:not([open]) ~ .storybook-cover .curtain-right { transform: translateX(104%) scaleX(-1); }
.invitation-gate:not([open]) ~ .storybook-cover .curtain-swag {
  transform: translateY(-114%);
  transition: transform 1.06s cubic-bezier(.46,.05,.24,1) .18s;
}
.cover-copy { position: absolute; inset: 0; }
.invitation-gate:not([open]) ~ .storybook-cover .cover-copy { opacity: 0; transition: opacity .24s ease; }
.cover-kicker, .cover-details { position: absolute; inset-inline: 12px; }
.cover-kicker {
  bottom: calc(50% + var(--seal-size) / 2 + 28px);
  color: #f4d5a8;
  letter-spacing: .24em;
}
.cover-details { top: calc(50% + var(--seal-size) / 2 + 24px); }
.cover-instruction { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cover-date { margin-top: 8px; color: #f0d9b9; font: 1.04rem/1.4 var(--serif); letter-spacing: .035em; }
.stage-open {
  display: grid;
  justify-items: center;
  align-content: center;
  color: #57343c;
  width: var(--seal-size);
  aspect-ratio: 1;
  background: radial-gradient(#fff9e9 7%, #f1d7b4 100%);
  border: 1px solid #ad8053;
  outline: 1px solid #e3bf88;
  outline-offset: 6px;
  border-radius: 49% 51% 51% 49% / 48% 48% 52% 52%;
  box-shadow: 0 0 0 11px #f4d4a439, 0 18px 32px #18221bbd, inset 0 0 0 5px #f4e3cd, inset 0 0 0 6px #b99068a8;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: scale .22s ease, box-shadow .22s ease;
}
@media (hover: hover) {
  .stage-open:hover { scale: 1.045; box-shadow: 0 0 0 13px #f4d4a44c, 0 19px 34px #18221bc8, inset 0 0 0 5px #f4e3cd, inset 0 0 0 6px #b99068a8; }
}
.stage-open:active { scale: .975; }
.stage-open:focus-visible { outline: 3px solid #fff1c9; outline-offset: 7px; }
.stage-open svg { color: #895634; width: 37px; height: 24px; }
.cover-monogram { font: 2.65rem/.98 var(--serif); letter-spacing: .025em; margin-top: 9px; }
.cover-monogram i { color: #91684b; font-size: .68em; }
.is-opening .storybook-title { animation: enter-title 1.32s cubic-bezier(.17,.59,.32,1) .26s both; }
.is-opening .hero-canopy { animation: settle-canopy 2.05s cubic-bezier(.21,.56,.27,1) both; }
.is-opening .hero-landscape { animation: settle-landscape 2.35s cubic-bezier(.2,.56,.25,1) both; }
.petals { container-type: size; z-index: 2; }
.petal {
  position: absolute;
  top: -10%;
  left: var(--left);
  width: var(--size);
  height: calc(var(--size) * .61);
  opacity: 0;
  border-radius: 78% 26% 73% 24%;
  background: linear-gradient(125deg,#f9d1b7,var(--petal-color) 69%,#803c4c);
}
.is-opening .petal { animation: scatter-petal var(--flight) linear var(--delay) both; }
@keyframes enter-title { from { opacity: .18; transform: translateY(19px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes settle-canopy { from { transform: translateY(-17%) scale(1.035); } to { transform: none; } }
@keyframes settle-landscape { from { transform: translateY(14%) scale(1.06); } to { transform: none; } }
@keyframes scatter-petal {
  0% { opacity: 0; transform: translate(0,0) rotate(var(--turn)); }
  14% { opacity: .91; }
  50% { transform: translate(var(--drift),45cqh) rotate(calc(var(--turn) + 125deg)); }
  80% { opacity: .73; }
  100% { opacity: 0; transform: translate(calc(var(--drift) * -.5),112cqh) rotate(calc(var(--turn) + 280deg)); }
}

.family-section {
  background: radial-gradient(ellipse at 50% 35%, #f9eadf, #f8e9db 56%, #f3dfcf);
}
.family-paper {
  position: relative;
  padding: clamp(38px,6vw,68px) clamp(22px,5vw,72px) clamp(29px,4vw,46px);
  border: 1px solid #b68b70;
  outline: 1px solid #ba967771;
  outline-offset: -7px;
  border-radius: 40% 40% 7px 7px / 11% 11% 7px 7px;
  background: #fff9ee;
}
.paper-sprig { position: absolute; color: #a27c5b; width: clamp(64px,13vw,145px); height: auto; opacity: .76; }
.paper-sprig-left { top: 22px; left: 4%; transform: rotate(-15deg); }
.paper-sprig-right { top: 22px; right: 4%; transform: scaleX(-1) rotate(-15deg); }
.family-paper .section-heading { position: relative; margin-bottom: clamp(15px,3vw,32px); }
.family-paper .section-heading h2 { margin-block: .22em .22em; }
.family-grid { display: grid; grid-template-columns: 1fr minmax(200px,1.35fr) 1fr; align-items: center; }
.family-name { text-align: center; }
.family-name h3 { font-size: clamp(2rem,4vw,3.45rem); font-style: italic; color: var(--forest); line-height: 1.13; }
.family-alias { color: #66705a; font: .94rem/1.4 var(--serif); }
.parent-caption { color: #7b5b4c; font-size: .74rem; margin: 14px 0 5px; }
.parent-names { color: #63463c; font: 1.15rem/1.55 var(--serif); }
.family-art { position: relative; isolation: isolate; width: min(100%,400px); justify-self: center; }
.family-art .couple-portrait { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 11px 13px #4e302b21); }
.portrait-halo { position: absolute; z-index: -1; inset: 12% 9% 11%; background: radial-gradient(ellipse,#ebc6a47a,#f2d5be42 55%,transparent 72%); border-radius: 50%; }
.portrait-spark { position: absolute; color: #a16d45; font: 1.8rem/1 var(--serif); opacity: .76; }
.spark-one { top: 19%; left: 8%; }
.spark-two { top: 39%; right: 9%; font-size: 1.4rem; }
.family-paper > .ornament { margin-top: 11px; }
.arrived .portrait-spark { animation: flower-spark 2.5s ease .2s 2; }
@keyframes flower-spark { 50% { transform: translateY(-6px) rotate(18deg); opacity: .25; } }

.countdown-section {
  position: relative;
  isolation: isolate;
  padding-block: clamp(56px,7vw,90px);
  text-align: center;
  overflow: hidden;
  color: #fff0df;
  background: radial-gradient(ellipse at 50% 9%,#3c5748,#243a31 68%);
}
.countdown-section::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: -1;
  border: 1px solid #c0a88478;
}
.countdown-inner .ornament, .countdown-inner .eyebrow { color: #edc8a1; }
.countdown-inner .ornament { margin-bottom: 10px; }
.countdown-inner h2 { font-size: clamp(2.3rem,5.4vw,3.95rem); line-height: 1.15; margin-top: 10px; }
.countdown-inner > p:not(.eyebrow) { color: #f5d9c1; font-size: .84rem; margin-top: 9px; }
.countdown-dials { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(8px,2vw,20px); margin-top: 29px; }
.countdown-dials > div {
  display: grid;
  align-content: center;
  width: clamp(60px,16vw,112px);
  aspect-ratio: 1;
  border-radius: 48% 48% 48% 48% / 55% 55% 45% 45%;
  border: 1px solid #d3ad80c4;
  outline: 1px solid #b597704b;
  outline-offset: -5px;
  background: #efdbc80d;
}
.countdown-dials strong { color: #fff3e4; font: clamp(1.55rem,5vw,2.95rem)/1.04 var(--serif); font-variant-numeric: tabular-nums; }
.countdown-dials span { color: #f1cca7; font-size: clamp(.54rem,1.55vw,.64rem); letter-spacing: .085em; text-transform: uppercase; margin-top: 4px; }

.schedule { background: #fffbf3; }
.event-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  max-width: 970px;
  margin-inline: auto;
  padding-left: 27px;
}
.event-grid::before { content: ""; position: absolute; top: 25px; bottom: 29px; left: 8px; width: 1px; background: #c39370; }
.event-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(195px, 1.08fr);
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  padding: 14px;
  border-radius: 17px;
}
.event-card::before {
  content: "";
  position: absolute;
  top: 30px;
  left: -25px;
  width: 12px;
  height: 12px;
  background: #a5704c;
  border: 2px solid #fff6e6;
  outline: 1px solid #a87755;
  border-radius: 50%;
}
.event-haldi { background: linear-gradient(135deg, #fff4d0, #fff9ed 75%); border-color: #e7bd60; }
.event-wedding { background: linear-gradient(135deg, #f4d8ce, #fff2eb 77%); border-color: #d9a89b; }
.event-card .date-column {
  position: absolute;
  z-index: 1;
  top: 25px;
  left: 25px;
  width: 59px;
  padding: 7px 2px;
  border-radius: 10px;
  border-color: #fff8eb;
  background: #fff9ed;
  box-shadow: 0 3px 11px #5940212c;
}
.date-column strong { font-size: 2.2rem; }
.date-column span { font-size: .52rem; }
.event-art {
  position: relative;
  align-self: stretch;
  min-height: 215px;
  overflow: hidden;
  border-radius: 11px;
  background: radial-gradient(ellipse at 74% 40%, #ffdf75, #f1be48 57%, #eab344);
}
.event-art .event-portrait { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.event-haldi .event-portrait {
  left: 8%;
  width: 64%;
  object-position: center top;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.event-wedding .event-portrait { object-position: center 43%; }
.event-props { position: absolute; width: 44%; height: auto; right: -2%; bottom: -2%; }
.event-details { padding: 12px 12px 12px 0; }
.event-details h3 { font-size: clamp(1.75rem,4vw,2.75rem); }
.event-details .event-note { min-height: 21px; }
.event-actions { margin-top: 13px; }
.venue-section { background: radial-gradient(ellipse at 90% 116%, #7b4a50, transparent 67%), var(--wine-dark); }
.venue-intro .chapter-kicker { justify-content: start; color: #f2c8a5; margin-bottom: 14px; }
.keepsakes { background: #f8ebdf; }
.site-footer { background: #ead7bf; }

@media (min-width: 701px) {
  .hero-canopy {
    width: min(100%, 1000px);
    height: clamp(120px, 13.6vw, 180px);
    mask-image: linear-gradient(#000 47%, transparent 100%), linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
    mask-composite: intersect;
  }
  .hero-landscape { bottom: -20px; }
}

.venue-panel[role="tabpanel"]:not([hidden]) { animation: venue-arrival .38s ease both; }
@keyframes venue-arrival { from { opacity: .55; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* One reveal per chapter, with readable content even before it runs. */
.arrived { animation: page-arrival .8s cubic-bezier(.18,.66,.29,1) both; }
.groom-family.arrived, .event-card:nth-child(2).arrived, .keepsake-card:nth-child(2).arrived { animation-delay: .09s; }
.family-art.arrived .couple-portrait { animation: portrait-arrival 1.25s cubic-bezier(.16,.59,.3,1) both; }
@keyframes page-arrival { from { opacity: .4; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes portrait-arrival { from { transform: translateY(12px) rotate(-2deg) scale(.93); } to { transform: none; } }
@supports (animation-timeline: view()) {
  .event-grid::after {
    content: "";
    position: absolute;
    inset: 25px auto 29px 8px;
    width: 1px;
    background: #753c42;
    transform-origin: top;
    animation: draw-timeline linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
  .storybook-scene {
    animation: scene-parallax linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 650px;
  }
}
@keyframes draw-timeline { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes scene-parallax { from { translate: 0 0; } to { translate: 0 48px; } }

@media (max-width: 780px) {
  .family-paper { padding-inline: 25px; }
}
@media (max-width: 700px) {
  .header-inner { min-height: 56px; }
  .storybook-hero { min-height: max(605px, calc(100svh - 56px)); }
  .storybook-title { padding-block: 116px 158px; }
  .storybook-title h1 { font-size: clamp(3.5rem,13vw,5.8rem); }
  .title-kicker { font-size: .6rem; }
  .title-date { font-size: 1.14rem; }
  .title-time { font-size: .78rem; }
  .title-actions { margin-top: 15px; }
  .hero-canopy {
    height: clamp(116px,33vw,185px);
    background-image: url("assets/storybook-canopy-mobile.webp");
  }
  .hero-landscape {
    width: min(100%,565px);
    background-image: url("assets/storybook-landscape-mobile.webp");
    mask-image: linear-gradient(transparent, #000 25%);
    mask-composite: add;
  }
  .family-paper { padding-inline: 12px; border-radius: 38% 38% 7px 7px / 6% 6% 7px 7px; }
  .family-grid { grid-template-columns: 1fr 1fr; gap: 0 .4rem; }
  .family-art { grid-column: 1 / -1; grid-row: 1; width: min(86%,310px); margin-top: -9px; }
  .bride-family { grid-column: 1; grid-row: 2; }
  .groom-family { grid-column: 2; grid-row: 2; }
  .family-name { align-self: start; }
  .family-name h3 { font-size: clamp(1.72rem,6vw,2.45rem); }
  .family-alias { min-height: 1.1em; }
  .groom-family .parent-caption { margin-top: calc(9px + 1.316rem); }
  .parent-names { font-size: .91rem; }
  .parent-caption { margin-top: 9px; }
  .family-paper > .ornament { margin-top: 19px; }
  .paper-sprig-left, .paper-sprig-right { top: 16px; }
  .event-grid { padding-left: 0; gap: 16px; }
  .event-grid::before, .event-grid::after, .event-card::before { display: none; }
  .event-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px; }
  .event-art { width: 100%; min-height: 0; aspect-ratio: 1.55; }
  .event-card .date-column { top: 18px; left: 18px; }
  .event-details { padding: 15px 8px 9px; }
  .event-details p:not(.eyebrow) { font-size: .91rem; }
  .event-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-actions .button { min-height: 46px; padding-inline: .45rem; }
}
@media (max-width: 380px) {
  .storybook-title h1 { font-size: 3.25rem; }
  .title-date { font-size: 1.02rem; }
  .family-name h3 { font-size: 1.62rem; }
  .countdown-dials { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .storybook-hero *, .storybook-hero *::before, .storybook-hero *::after, .arrived,
  .arrived img, .arrived .portrait-spark, .event-grid::after, .venue-panel[role="tabpanel"]:not([hidden]) { animation: none !important; transition: none !important; }

}

.family-section { background: radial-gradient(ellipse at 52% 25%, #fbead9, #f5d9cd 75%, #efcbbd); }
.family-paper { background: radial-gradient(ellipse at 50% 45%, #fff7e7, #fffaf2 64%); }
.family-grid { gap: clamp(12px, 2.5vw, 35px); }
.family-name {
  padding: clamp(12px, 2.5vw, 24px) 9px;
  border: 1px solid #c8a68873;
  border-radius: 12px;
  background: #fcf3e5;
}
.groom-family { background: #edf0e1; border-color: #a5a88585; }
.family-props {
  position: absolute;
  width: 43%;
  height: auto;
  right: -5%;
  bottom: 0;
  pointer-events: none;
}
.portrait-halo {
  inset: 8% 3% 9%;
  background: radial-gradient(ellipse, #f7c77f8a, #f2b69e60 52%, transparent 74%);
}
.countdown-section {
  background:
    radial-gradient(ellipse at 50% 0%, #4a6b50 0%, transparent 73%),
    linear-gradient(143deg, #203a32, #192d27);
}
.countdown-dials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 474px);
  margin-inline: auto;
}
.countdown-dials > div {
  width: 100%;
  border-radius: 14px;
  background: linear-gradient(160deg, #f7dcaa22, #d7b3780b);
}
.countdown-dials > div:nth-child(even) { border-color: #dfbc9187; }

.venue-section { background: radial-gradient(ellipse at 8% 100%, #793e4e, transparent 65%), #512632; }
.venue-layout { gap: clamp(25px, 5vw, 76px); }
.venue-props { width: min(210px, 90%); height: auto; margin-top: 13px; }
.venue-tabs[role="tablist"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid #e8ae9b69;
  border-radius: 12px;
  background: #3e202b;
}
.venue-tabs a {
  justify-content: center;
  min-height: 46px;
  padding-inline: 5px;
  border-color: transparent;
  border-radius: 8px;
}
.venue-tabs a[aria-selected="true"] { background: #ffe0ad; border-color: #ffe0ad; }
.venue-panel {
  color: #562e39;
  border-color: #ffecd0;
  border-radius: 13px;
  background: #fff4e3;
}
.venue-panel .eyebrow { color: #925c32; }
.venue-panel h3 { color: #56313d; }
.venue-panel address, .venue-panel .venue-hint { color: #67483c; }
.venue-panel :focus-visible { outline-color: #6e3745; }
.venue-actions .button-gold { color: #fff9ef; background: #643748; }
.venue-actions .button-gold:hover { background: #783c51; }
.venue-actions .button-light { color: #613849; border-color: #a67a77; }
.venue-actions .button-light:hover { background: #ffe4cc; }
.copy-status { color: #633940; }
.keepsakes { background: radial-gradient(ellipse at 53% 20%, #fff2df, #f4d9cb); }
.keepsake-card { border-radius: 14px; }
.card-preview { position: relative; height: clamp(188px, 30vw, 308px); }
.card-preview img { height: calc(clamp(188px, 30vw, 308px) - 29px); transform: rotate(-4deg); }
.preview-wedding img { transform: rotate(4deg); }
.keepsake-card:hover img { transform: rotate(0) scale(1.035); }
.preview-haldi { background: radial-gradient(ellipse at 40% 36%, #ffe7a6, #eeb94d); }
.preview-wedding { background: radial-gradient(ellipse at 55% 30%, #f8ddce, #dfa197); }
.card-caption { min-height: 64px; }
.site-footer { background: #f4dbc2; }

@media (max-width: 700px) {
  .site-header nav { gap: clamp(3px, 2.2vw, 15px); }
  .site-header nav a { padding-inline: 4px; }
  .family-grid { gap: 0 8px; }
  .family-art { width: min(100%, 312px); margin-block: -9px 9px; }
  .family-props { width: 41%; right: -1%; }
  .venue-intro { position: relative; min-height: 103px; padding-right: clamp(81px, 23vw, 137px); }
  .venue-props { position: absolute; right: -4px; bottom: 0; width: clamp(79px, 23vw, 132px); margin: 0; }
  .venue-intro .chapter-kicker { margin-bottom: 8px; }
  .venue-intro > p:not(.eyebrow) { margin-top: 7px; }
  .venue-actions .button { flex: 1 1 0; min-height: 46px; padding-inline: .35rem; }
  .card-caption { min-height: 65px; }
}
@media (max-width: 380px) {
  .family-name { padding-inline: 4px; }
  .family-name h3 { font-size: clamp(1.35rem, 6.7vw, 1.63rem); }
  .parent-names { font-size: .85rem; }
  .card-preview { height: 151px; }
  .card-preview img { height: 124px; }
  .card-caption { gap: 3px; }
  .card-caption small { font-size: .67rem; }
  .card-caption .icon { width: .85rem; }
}