/* The couple's Kazakh ornament reference, in black, white and gold. */
:root {
  --paper: #fff;
  --cream: #fff;
  --ink: #111;
  --muted: #555;
  --gold: #b29554;
  --gold-ink: #7a5a1f;
  --sage: #fff;
  --rose: #b29554;
}
body { background: #fff; background-image: none; }
::selection { background: #b29554; color: #000; }
input, textarea { caret-color: #111; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline-color: var(--gold-ink);
}
::-webkit-scrollbar-thumb { background: var(--gold); }
.languages { background: #fffffffa; border-color: var(--gold); }
.languages > div > span { border-color: var(--gold); }
.languages button { color: #555; }
.languages button[aria-pressed=true] { color: #111; text-decoration-color: var(--gold-ink); }

/* Neutral embossed paper, with the original dimensional seal in gold. */
.envelope { background: #fff; }
.envelope-bed, .envelope-flap, .envelope-pocket { filter: grayscale(1) brightness(1.12); }
.envelope-bed { filter: grayscale(1) brightness(.96); }
.seal { filter: grayscale(1) sepia(1) saturate(1.5) brightness(1.08); }
.envelope-caption {
  color: #111;
  top: 8%; left: 50%; right: auto;
  width: min(360px, calc(100% - 48px));
  transform: translateX(-50%);
  padding: 22px 16px 16px;
  background: #fff;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.envelope-caption p { font-size: clamp(40px, 10vw, 52px); line-height: 1.2; }
.envelope-caption span { font-size: 18px; line-height: 1.35; font-weight: 600; margin-top: 12px; }
.envelope-caption .envelope-event { font-size: 26px; margin-top: 10px; }
.envelope-caption:after {
  background: url('/assets/kazakh-crest.svg') center / contain no-repeat;
  width: 110px; height: 40px; opacity: 1; margin-top: 16px;
}
.skip-intro { background: #ffffffe6; color: #111; border-color: var(--gold); }
html:lang(kk) .envelope-caption p, html:lang(ru) .envelope-caption p,
html:lang(kk) .signature, html:lang(ru) .signature,
html:lang(kk) .invitation-slip > span, html:lang(ru) .invitation-slip > span {
  font-family: var(--serif); font-style: italic; font-weight: 500;
}
html:lang(kk) .envelope-caption p, html:lang(ru) .envelope-caption p { font-size: clamp(36px, 9vw, 48px); }
html:lang(kk) .invitation-plaque .signature, html:lang(ru) .invitation-plaque .signature { font-size: clamp(28px, 7vw, 40px); }
html:lang(kk) .invitation-slip > span, html:lang(ru) .invitation-slip > span { font-size: 32px; }
.opening-glow { background: #fff; }
.invitation-slip > span { background: #0009; color: #fff; text-shadow: 0 2px 5px #0008; }
.invitation-slip > p { background: #0009; }
@keyframes flap-open { 100% { transform: rotateX(175deg); filter: grayscale(1) brightness(1.3); } }

/* The portrait stays in its natural sunset colors. */
.hero { background: #111; }
.hero-shade { background: linear-gradient(180deg, #0000 35%, #0005 60%, #000d 100%); }
.hero h1, .hero-invite, .hero-date, .ceremony-name, .scroll-cue { color: #fff; }
.hero h1, .ceremony-name, .hero-date { text-shadow: 0 2px 8px #0008; }
html:lang(kk) .hero h1, html:lang(ru) .hero h1 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(44px, 11vw, 84px); gap: 8px;
}
.hero-content:before {
  height: 58px; top: 22px; opacity: 1;
  background: url('/assets/kazakh-crest.svg') center / 132px auto no-repeat;
}
.hero-content:after {
  content: ''; position: absolute; top: 25px; left: 20px; right: 20px;
  height: 72px; pointer-events: none;
  background: url('/assets/kazakh-corner.svg') left top / 68px auto no-repeat,
              url('/assets/kazakh-horns.svg') right top / 66px auto no-repeat;
}

/* Gold silhouettes frame the live invitation, with generous white interiors. */
.striped-card {
  background-color: #fff;
  background-image: url('/assets/kazakh-heart.svg'), url('/assets/kazakh-heart.svg');
  background-position: left center, right center;
  background-size: 35px 50px;
  background-repeat: repeat-y;
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
}
.invitation-plaque { background-image: url('/assets/invitation-cartouche.svg?v=3'); }
.invitation-plaque h2 { color: #111; }
.small-flower { color: var(--gold-ink); }
.section-ornament.kazakh {
  width: 88px; height: 80px;
  background: url('/assets/kazakh-heart.svg') center / contain no-repeat;
}
.kazakh-ornament {
  width: 210px; height: 75px;
  background: url('/assets/kazakh-crest.svg') center / contain no-repeat;
}
.countdown-section:before, footer:after {
  height: 52px; max-width: 150px; opacity: 1;
  background: url('/assets/kazakh-infinity.svg') center / contain no-repeat;
}
.countdown-frame { background: none; position: relative; }
.countdown-frame:before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('/assets/countdown-border.webp') center / 100% 100% no-repeat;
  filter: grayscale(1) sepia(1) saturate(.9);
}
.countdown-inner { position: relative; }
.countdown b { border-color: var(--gold); }
.countdown span { color: #111; }
.garland {
  filter: saturate(.65); width: 100%; max-width: none;
  height: clamp(260px, 70vw, 340px); margin: 0;
  background-size: auto 100%; background-repeat: repeat-x;
}
.ornament-band {
  width: 100%; height: 56px; margin: 20px 0;
  background: url('/assets/kazakh-crest.svg') center / 180px 56px repeat-x;
}
#venue .venue-name { font-family: var(--serif); font-size: 34px; font-weight: 600; font-style: normal; margin: 0 0 12px; }
.venue .venue-address { font-size: 19px; line-height: 1.5; margin-bottom: 24px; }
.venue .venue-time { margin-top: 18px; font-size: 16px; }
.venue-map { height: 350px; width: 100%; position: relative; isolation: isolate; z-index: 0; background: #f3f3f3; border: 1px solid var(--gold); }
.venue-map .leaflet-tile-pane { filter: grayscale(1); }
.venue-map .leaflet-control-attribution { font: 11px/1.5 Georgia, serif; background: #fff; color: #111; }
.venue-map a { color: #111; }
.venue-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
.venue-map .leaflet-tooltip.venue-map-label { border: 1px solid var(--gold); background: #fff; box-shadow: none; color: #111; font: 600 16px/1.3 var(--serif); }
.venue-map .leaflet-tooltip-top:before { border-top-color: var(--gold); }
.venue-gold-marker svg { width: 38px; height: 50px; }
.map-loading { position: absolute; inset: auto 8px 35%; z-index: 1000; padding: 12px; background: #fff; color: #111; font-size: 16px; }
.rsvp-flowers { filter: grayscale(1); }
.pin { stroke: var(--gold-ink); }
.outline-button { background: #fff; border-color: var(--gold); color: #111; }
.outline-button:hover { background: #f4f4f4; }
.timeline:before { border-color: var(--gold); }
.timeline-stop > span { background: #fff; border: 1px solid var(--gold); }
.gift-icon svg { stroke: var(--gold-ink); }
.gifts .gift-note { background: #111; color: #fff; border-color: var(--gold); }
.gift-note button { color: #d8c18b; }
.faq details { background: #fff; border-color: #ccc; }
.faq summary:after { color: var(--gold-ink); }
form { background: #fff; border-color: var(--gold); }
input:not([type=radio]):not([type=checkbox]), textarea, select {
  background: #fff; border-color: #aaa; color: #111;
}
.radio-row input, .checkbox-grid input { accent-color: #111; }
.submit { background: #111; color: #fff; border-color: var(--gold); }
.submit:hover { background: #292929; }
.form-status { color: #111; }
.music-button { background: #111; color: #fff; border: 1px solid var(--gold); }
.rsvp-cue { background: #fffffff0; color: #111; border: 1px solid var(--gold); }
footer { border-color: var(--gold); }
footer .ornament { color: var(--gold-ink); }
@media (max-width:360px) {
  .hero-content:before { background-size: 110px auto; }
  .hero-content:after { left: 12px; right: 12px; background-size: 52px auto, 52px auto; }
}
@media (min-width:800px) {
  .hero-content:before { background-size: 160px auto; height: 70px; }
  .hero-content:after { left: 36px; right: 36px; background-size: 80px auto, 80px auto; height: 85px; }
}