/* ============================================
   D+S WEDDING · Hong Kong · 30–31 July 2027
   Bold zine-poster style adapted from Curry Cafe
   ============================================ */

:root {
  --yellow: #F2C230;      /* mustard frame */
  --red:    #D93A1F;      /* chilli red primary */
  --pink:   #E8156B;      /* hot pink accent */
  --green:  #1F5D3A;      /* forest green */
  --cream:  #F5EEDC;      /* warm ivory */
  --black:  #111111;
  --red-dark: #8B1A0E;

  --frame: 14px;
  --rail: 44px;
  --ticker: 40px;

  --font-display: "Space Mono", "IBM Plex Mono", monospace;
  --font-body:    "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script:  "Playfair Display", Georgia, serif;
  --font-deva:    "Noto Serif Devanagari", serif;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--yellow);
  color: var(--black);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;

  /* leave space for tickers + side rails */
  padding: calc(var(--ticker) + var(--frame)) calc(var(--rail) + var(--frame));
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

/* ============ FRAME CHROME ============ */

.ticker {
  position: fixed;
  left: 0; right: 0;
  height: var(--ticker);
  background: var(--yellow);
  color: var(--red);
  z-index: 100;
  overflow: hidden;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  display: flex;
  align-items: center;
}
.ticker--top    { top: 0; }
.ticker--bottom { bottom: 0; }

.ticker__track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 2px;
  animation: ticker-scroll 40s linear infinite;
  padding-right: 1.5rem;
}
.ticker__track--reverse {
  animation-direction: reverse;
  animation-duration: 50s;
}
.ticker__item { flex-shrink: 0; }
.ticker__item--accent { color: var(--pink); font-style: italic; }
.ticker__sparkle { flex-shrink: 0; color: var(--red); font-size: 1.1rem; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- top navigation bar (replaces top scrolling ticker) --- */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ticker);
  background: var(--yellow);
  color: var(--red);
  z-index: 100;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  display: flex;
  align-items: center;
}
.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 0 clamp(1rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.topnav__brand {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.35rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red);
  white-space: nowrap;
  flex-shrink: 0;
}
.topnav__brand .topnav__heart { color: var(--pink); font-size: 0.9em; margin: 0 0.15rem; }
.topnav__links {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav__links::-webkit-scrollbar { display: none; }
.topnav__link {
  color: var(--red);
  transition: color 0.2s ease;
  white-space: nowrap;
}
.topnav__link:hover { color: var(--pink); }
.topnav__link--rsvp {
  background: var(--red);
  color: var(--yellow);
  padding: 0.35rem 0.75rem;
  border-radius: 2px;
}
.topnav__link--rsvp:hover { background: var(--red-dark); color: var(--yellow); }
.topnav__dot { color: var(--pink); font-size: 0.7rem; opacity: 0.65; flex-shrink: 0; }

@media (max-width: 900px) {
  .topnav__brand { font-size: 1.15rem; }
  .topnav__inner { font-size: 0.68rem; letter-spacing: 1.5px; gap: 0.75rem; padding: 0 0.75rem; }
  .topnav__links { gap: 0.6rem; }
  .topnav__dot { display: none; }
}
@media (max-width: 640px) {
  .topnav__brand { display: none; }
  .topnav__inner { padding: 0 0.5rem; gap: 0; justify-content: center; }
}

/* --- side rails (decorative color stripes only) --- */
.rail {
  position: fixed;
  top: var(--ticker);
  bottom: var(--ticker);
  width: var(--rail);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 3px solid var(--yellow);
  border-right: 3px solid var(--yellow);
  pointer-events: none;
}
.rail--left  { left: 0;  background: var(--red);  color: var(--cream); }
.rail--right { right: 0; background: var(--green); color: var(--cream); }

.rail__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 1.5rem 0;
}

.rail__link {
  transition: color 0.2s ease;
  white-space: nowrap;
}
.rail__link:hover { color: var(--yellow); }

.rail__sparkle {
  color: var(--yellow);
  font-size: 1rem;
  writing-mode: horizontal-tb;
  transform: rotate(90deg);
}

/* ============ CONTENT WRAPPER ============ */
.frame-inner {
  background: var(--cream);
  min-height: calc(100vh - 2 * (var(--ticker) + var(--frame)));
  position: relative;
  z-index: 10;
}

/* ============ TICKET BUTTON ============ */
.ticket-btn {
  --btn-bg: var(--cream);
  --btn-fg: var(--red);

  display: inline-block;
  position: relative;
  padding: 0.9rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
  border: 3px solid var(--btn-fg);
  clip-path: polygon(
    0 0.5rem, 0.5rem 0, calc(100% - 0.5rem) 0, 100% 0.5rem,
    100% calc(50% - 0.4rem), calc(100% - 0.4rem) 50%, 100% calc(50% + 0.4rem),
    100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0.5rem 100%, 0 calc(100% - 0.5rem),
    0 calc(50% + 0.4rem), 0.4rem 50%, 0 calc(50% - 0.4rem)
  );
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.ticket-btn:hover {
  --btn-bg: var(--red);
  --btn-fg: var(--cream);
  transform: translateY(-2px) rotate(-1deg);
}
.ticket-btn--dark {
  --btn-bg: var(--green);
  --btn-fg: var(--cream);
  border-color: var(--cream);
}
.ticket-btn--dark:hover {
  --btn-bg: var(--yellow);
  --btn-fg: var(--red);
}
.ticket-btn--large { padding: 1.1rem 2.2rem; font-size: 1.05rem; }
.ticket-btn--small { padding: 0.55rem 1.1rem; font-size: 0.75rem; }

/* ============ STICKER TEXT (outlined display text) ============ */
.sticker-text {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cream);
  -webkit-text-stroke: 3px var(--green);
  text-shadow:
    4px 4px 0 var(--green);
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.sticker-text--yellow {
  color: var(--yellow);
  -webkit-text-stroke: 3px var(--red);
  text-shadow: 4px 4px 0 var(--red);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Fill the viewport (minus the top+bottom tickers ~64px total) so images cover a laptop screen */
  height: calc(100vh - 64px);
  min-height: 640px;
  max-height: 1100px;
  overflow: hidden;
}
.hero__photo { position: relative; overflow: hidden; }
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.55) saturate(1.15) contrast(1.05);
}
/* Darkening scrim so the gold wordmark reads confidently */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(17,17,17,0.35) 0%, rgba(17,17,17,0.65) 100%),
    linear-gradient(180deg, rgba(17,17,17,0.25) 0%, rgba(17,17,17,0.5) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero__photo--left  img { object-position: center; }
.hero__photo--right img { object-position: center; }

.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  z-index: 5;
}
.hero__script {
  font-family: var(--font-deva);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--cream);
  margin-bottom: 0.4rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(3.5rem, 12vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.4rem 0;
}
.hero__wordmark span { display: block; }
.hero__wordmark-sup {
  font-size: 0.32em;
  vertical-align: 0.9em;
  letter-spacing: 0;
  margin-left: 0.05em;
  font-weight: 700;
  top: 0;
  position: relative;
}

.hero__meta {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 4px;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  line-height: 1.2;
}
.hero__meta-line { display: block; }
.hero__meta-line + .hero__meta-line { font-size: 0.78em; opacity: 0.9; letter-spacing: 6px; }

.hero__cta {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 6;
  /* Override base ticket-btn sizing for the hero — this is the primary CTA */
  padding: 1.5rem 3rem;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: 3px;
  border-width: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.hero__cta:hover {
  transform: translateY(-3px) rotate(-1deg) scale(1.03);
}

/* ============ MANIFESTO ============ */
.manifesto {
  background: var(--cream);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
}
.manifesto__eyebrow {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--red);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}
.manifesto__body {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.5;
  max-width: 900px;
  margin: 0 auto 2rem;
}
.manifesto__note {
  display: inline-block;
  font-family: var(--font-script);
  font-style: italic;
  text-transform: none;
  color: var(--pink);
  font-size: 1.1em;
  letter-spacing: 0;
  margin-left: 0.5rem;
}
.manifesto__credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
}
.manifesto__credit-text {
  flex: 1 1 0;
  min-width: 12ch;
  max-width: 22ch;
}
.manifesto__credit-text:first-of-type { text-align: right; }
.manifesto__credit-text:last-of-type  { text-align: left; }
.manifesto__credit .sunburst-emblem { flex: 0 0 auto; }
.sunburst-emblem {
  width: 80px;
  height: 80px;
  color: var(--red);
}

/* ============ PHOTO BREAK ============ */
.photo-break {
  height: clamp(300px, 55vh, 620px);
  overflow: hidden;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
}
.photo-break img { width: 100%; height: 100%; object-fit: cover; }

/* ============ TRAVEL ============ */
.travel {
  background: var(--red);
  color: var(--cream);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}
.travel__eyebrow {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--yellow);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.travel__title {
  font-size: clamp(3rem, 8vw, 6rem);
  margin-bottom: 3rem;
}
.travel__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
  text-align: left;
}
@media (max-width: 640px) {
  .travel__grid { gap: 0.75rem; }
  .travel__card { padding: 1.1rem; }
  .travel__card h3 { font-size: 1rem; }
  .travel__card p { font-size: 0.82rem; line-height: 1.45; }
}
.travel__card {
  background: var(--cream);
  color: var(--green);
  padding: 1.75rem;
  border: 3px solid var(--yellow);
  position: relative;
}
.travel__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.travel__card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.75rem;
  color: var(--red);
}
.travel__card p { font-size: 0.95rem; line-height: 1.55; }
.travel__card p em { color: var(--pink); font-style: italic; font-weight: 500; }

.travel__photo {
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 4/2;
  overflow: hidden;
  border: 3px solid var(--yellow);
}
.travel__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============ EVENT PAGE ============ */
.event-page {
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
}
.event-page--yellow { background: var(--yellow); color: var(--red); }
.event-page--cream  { background: var(--cream);  color: var(--pink); }
.event-page--red    { background: var(--red);    color: var(--cream); }
.event-page--red .event-page__eyebrow,
.event-page--red .detail-block__label em,
.event-page--red .event-page__script { color: var(--yellow); }
.event-page--red .event-page__wordmark { color: var(--cream); }
.event-page--red .detail-block__value span { color: rgba(245,238,220,0.75); }

.event-page--white  { background: #FFFFFF; color: var(--black); }
.event-page--white .event-page__eyebrow,
.event-page--white .detail-block__label em { color: var(--pink); }
.event-page--white .event-page__script    { color: var(--red); }
.event-page--white .event-page__wordmark  { color: var(--red); }
.event-page--white .event-page__body      { color: #333333; }
.event-page--white .detail-block__label   { color: var(--red); }
.event-page--white .detail-block__value   { color: var(--black); }
.event-page--white .detail-block__value span { color: rgba(17,17,17,0.6); }

.event-page--blue   { background: #1E3A6B; color: var(--cream); }
.event-page--blue .event-page__eyebrow,
.event-page--blue .detail-block__label em { color: #F7B5CB; }
.event-page--blue .event-page__script     { color: #F7B5CB; }
.event-page--blue .event-page__wordmark   { color: var(--cream); }
.event-page--blue .event-page__body       { color: rgba(245,238,220,0.9); }
.event-page--blue .detail-block__label    { color: var(--pink); }
.event-page--blue .detail-block__value    { color: var(--cream); }
.event-page--blue .detail-block__value span { color: rgba(245,238,220,0.7); }
.event-page--green  { background: var(--green);  color: var(--cream); }
.event-page--green .event-page__eyebrow,
.event-page--green .event-page__script { color: #FFE082; }
.event-page--green .event-page__wordmark { color: var(--cream); }
.event-page--green .event-page__body { color: rgba(245,238,220,0.9); }
.event-page--green .detail-block__label    { color: #FFE082; }
.event-page--green .detail-block__label em { color: #FFE082; }
.event-page--green .detail-block__value    { color: var(--cream); }
.event-page--green .detail-block__value span { color: rgba(245,238,220,0.7); }
.event-page--green .detail-block { border-color: rgba(255,224,130,0.35); }

/* Two-column row wrapping paired event pages */
.event-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
  z-index: 1;
  align-items: stretch;
}
.event-row--split .event-page + .event-page {
  border-left: 3px solid var(--yellow);
}
.event-row--split .event-page {
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Fixed vertical rhythm so red dividers on both panels align exactly */
.event-row--split .event-page--compact .chapter-badge   { min-height: 4rem; margin-bottom: 0.5rem; }
.event-row--split .event-page--compact .event-page__meta    { min-height: 3.5rem; display: flex; align-items: center; }
.event-row--split .event-page--compact .event-page__eyebrow {
  min-height: 1.4em;
  margin-bottom: 0;
  text-align: center;
}
.event-row--split .event-page--compact .event-page__script {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  min-height: 2.6rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-row--split .event-page--compact .event-page__wordmark {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 1.75rem;
  min-height: 5.5rem;
  justify-content: center;
  line-height: 1.05;
  text-align: center;
}
.event-row--split .event-page--compact .event-page__details {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: 100%;
  max-width: 340px;
}
.event-row--split .event-page--compact .detail-block {
  min-height: 5rem;
}
.event-row--split .event-page--compact .detail-block__value {
  min-height: 2.6rem;
}
.event-row--split .event-page--compact .event-page__body {
  font-size: 1rem;
  margin-top: auto;
}
.event-row--split .event-page--compact .event-page__icons {
  margin-top: auto;
}
@media (max-width: 900px) {
  .event-row--split {
    grid-template-columns: 1fr;
  }
  .event-row--split .event-page--compact .event-page__wordmark {
    font-size: clamp(2.75rem, 7vw, 5.5rem);
  }
  .event-row--split .event-page--compact .event-page__details {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .event-row--split .event-page--compact .event-page__details {
    grid-template-columns: 1fr;
  }
}

.event-page__eyebrow {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--red);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}
.event-page__eyebrow--pink { color: var(--pink); }

.event-page__script {
  font-family: var(--font-deva);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--red);
  margin-bottom: 0.5rem;
}
.event-page__script--pink { color: var(--pink); }

.event-page__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--red);
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.5rem;
}
.event-page__wordmark--pink { color: var(--pink); }
.event-page__wordmark span { display: block; }

.event-page__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto 2rem;
  text-align: left;
}
.detail-block {
  border-top: 2px solid var(--red);
  padding-top: 0.75rem;
}
.detail-block--pink { border-color: var(--pink); }
.detail-block__label {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--green);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.detail-block__value {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1.35;
}
.detail-block--pink .detail-block__value { color: var(--pink); }
.detail-block__value span {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--green);
  letter-spacing: 1.5px;
  margin-top: 0.3rem;
}

.event-page__icons { margin: 1.5rem 0 2rem; }
.event-page__body {
  max-width: 900px;
  margin: 0 auto 2rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--green);
}
.event-page__body p + p { margin-top: 0.9rem; }
.event-page__body p { text-wrap: balance; }
.event-page__seal {
  width: clamp(150px, 22vw, 220px);
  margin: 1.5rem auto 0;
}

/* ============ ICON ROW ============ */
.icon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--red);
  font-size: 1.4rem;
}
.icon-row--pink { color: var(--pink); }
.icon-row__icon { font-size: 1.5rem; }
.icon-row__sparkle { font-size: 1.1rem; }

/* ============ WAX SEAL ============ */
.wax-seal svg { display: block; }
.wax-seal--green svg { color: var(--green); }
.wax-seal--yellow svg { color: var(--yellow); }

.wax-seal__scallop {
  /* Generate 24 scallops via CSS mask; but easier: use polygon in JS.
     For inline SVG we set a filled circle with a scalloped stroke via CSS: */
}
/* Use a filter-based scallop via CSS pseudo (simpler): overlay ring of dots */
.wax-seal { position: relative; }

/* We'll draw the outer scalloped shape in JS-injected SVG or use a filled circle instead */
.wax-seal svg circle,
.wax-seal svg > g:first-of-type {
  /* placeholder */
}

/* Draw a scalloped background circle behind the text: */
.wax-seal::before {
  content: "";
  position: absolute;
  inset: 8%;
  background: currentColor;
  border-radius: 50%;
  z-index: -1;
  /* scallop via SVG mask */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='black'%3E%3Ccircle cx='100' cy='100' r='78'/%3E%3Cg%3E%3Ccircle cx='100' cy='16' r='12'/%3E%3Ccircle cx='121.7' cy='18.6' r='12'/%3E%3Ccircle cx='142.4' cy='26.2' r='12'/%3E%3Ccircle cx='161' cy='38.6' r='12'/%3E%3Ccircle cx='176.5' cy='55' r='12'/%3E%3Ccircle cx='187.6' cy='74.6' r='12'/%3E%3Ccircle cx='193.5' cy='96.2' r='12'/%3E%3Ccircle cx='193.5' cy='118.6' r='12'/%3E%3Ccircle cx='187.6' cy='140.4' r='12'/%3E%3Ccircle cx='176.5' cy='160' r='12'/%3E%3Ccircle cx='161' cy='176.5' r='12'/%3E%3Ccircle cx='142.4' cy='188.6' r='12'/%3E%3Ccircle cx='121.7' cy='196.2' r='12'/%3E%3Ccircle cx='100' cy='198.4' r='12'/%3E%3Ccircle cx='78.3' cy='196.2' r='12'/%3E%3Ccircle cx='57.6' cy='188.6' r='12'/%3E%3Ccircle cx='39' cy='176.5' r='12'/%3E%3Ccircle cx='23.5' cy='160' r='12'/%3E%3Ccircle cx='12.4' cy='140.4' r='12'/%3E%3Ccircle cx='6.5' cy='118.6' r='12'/%3E%3Ccircle cx='6.5' cy='96.2' r='12'/%3E%3Ccircle cx='12.4' cy='74.6' r='12'/%3E%3Ccircle cx='23.5' cy='55' r='12'/%3E%3Ccircle cx='39' cy='38.6' r='12'/%3E%3Ccircle cx='57.6' cy='26.2' r='12'/%3E%3Ccircle cx='78.3' cy='18.6' r='12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='black'%3E%3Ccircle cx='100' cy='100' r='78'/%3E%3Cg%3E%3Ccircle cx='100' cy='16' r='12'/%3E%3Ccircle cx='121.7' cy='18.6' r='12'/%3E%3Ccircle cx='142.4' cy='26.2' r='12'/%3E%3Ccircle cx='161' cy='38.6' r='12'/%3E%3Ccircle cx='176.5' cy='55' r='12'/%3E%3Ccircle cx='187.6' cy='74.6' r='12'/%3E%3Ccircle cx='193.5' cy='96.2' r='12'/%3E%3Ccircle cx='193.5' cy='118.6' r='12'/%3E%3Ccircle cx='187.6' cy='140.4' r='12'/%3E%3Ccircle cx='176.5' cy='160' r='12'/%3E%3Ccircle cx='161' cy='176.5' r='12'/%3E%3Ccircle cx='142.4' cy='188.6' r='12'/%3E%3Ccircle cx='121.7' cy='196.2' r='12'/%3E%3Ccircle cx='100' cy='198.4' r='12'/%3E%3Ccircle cx='78.3' cy='196.2' r='12'/%3E%3Ccircle cx='57.6' cy='188.6' r='12'/%3E%3Ccircle cx='39' cy='176.5' r='12'/%3E%3Ccircle cx='23.5' cy='160' r='12'/%3E%3Ccircle cx='12.4' cy='140.4' r='12'/%3E%3Ccircle cx='6.5' cy='118.6' r='12'/%3E%3Ccircle cx='6.5' cy='96.2' r='12'/%3E%3Ccircle cx='12.4' cy='74.6' r='12'/%3E%3Ccircle cx='23.5' cy='55' r='12'/%3E%3Ccircle cx='39' cy='38.6' r='12'/%3E%3Ccircle cx='57.6' cy='26.2' r='12'/%3E%3Ccircle cx='78.3' cy='18.6' r='12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.wax-seal--green::before  { color: var(--green); }
.wax-seal--yellow::before { color: var(--yellow); }

/* ============ PERSONALITY PHOTOS ============ */
.personality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cream);
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
}
.personality__photo {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.personality__photo:first-child { border-right: 3px solid var(--red); }
.personality__photo img { width: 100%; height: 100%; object-fit: cover; }
.personality__photo figcaption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--cream);
  background: var(--red);
  padding: 0.4rem 0.8rem;
  display: inline-block;
  width: fit-content;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ============ RSVP ============ */
.rsvp {
  background: var(--red);
  color: var(--cream);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
}
.rsvp::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--yellow);
  max-width: 300px;
  margin: 0 auto 1rem;
}
.rsvp__eyebrow {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--cream);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
}
.rsvp__headline {
  font-size: clamp(4rem, 12vw, 9rem);
  margin: 0 auto 3rem;
  display: inline-block;
}

.rsvp__intro {
  font-family: var(--font-body);
  font-size: 1.1rem;
  max-width: 500px;
  margin: 0 auto 2rem;
}
.rsvp__intro strong { color: var(--yellow); font-weight: 700; }

/* --- Code entry --- */
.rsvp__code-form {
  max-width: 500px;
  margin: 0 auto;
}
.rsvp__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  text-align: left;
}
.rsvp__code-row {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}
.rsvp__code-input {
  flex: 1;
  padding: 1rem 1.2rem;
  background: var(--cream);
  color: var(--red);
  border: 3px solid var(--yellow);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s ease;
}
.rsvp__code-input::placeholder { color: rgba(217, 58, 31, 0.4); }
.rsvp__code-input:focus { border-color: var(--pink); }

.rsvp__code-error {
  margin-top: 1rem;
  color: var(--yellow);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75rem;
  background: rgba(0,0,0,0.15);
  border-left: 3px solid var(--yellow);
  text-align: left;
}
.rsvp__code-error a { color: var(--cream); text-decoration: underline; }

.rsvp__code-hint {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(245, 238, 220, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rsvp__code-chip {
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--yellow);
  color: var(--red);
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  border: 2px solid var(--cream);
  transition: transform 0.15s ease;
}
.rsvp__code-chip:hover { transform: translateY(-2px); }

/* --- Form step --- */
.rsvp__welcome {
  margin-bottom: 2.5rem;
}
.rsvp__hello {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 4px;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.rsvp__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.rsvp__invited {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--yellow);
  font-size: 1.1rem;
}

.rsvp__form {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

/* Event blocks (yes/no per event) */
.rsvp-event {
  background: var(--cream);
  color: var(--green);
  padding: 1.5rem;
  border: 3px solid var(--yellow);
  margin-bottom: 1rem;
}
.rsvp-event__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.4rem;
}
.rsvp-event__meta {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--green);
  margin-bottom: 1rem;
}
.rsvp-event__meta span { color: var(--pink); font-weight: 700; }
.rsvp-event__choices {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.rsvp-event__choice {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--cream);
  color: var(--green);
  border: 2px solid var(--green);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rsvp-event__choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rsvp-event__choice:has(input:checked),
.rsvp-event__choice.is-checked {
  background: var(--green);
  color: var(--cream);
}
.rsvp-event__choice--no:has(input:checked),
.rsvp-event__choice--no.is-checked {
  background: var(--red);
  color: var(--cream);
  border-color: var(--red);
}

/* Plus one block, shown if allowed */
.rsvp-plus {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--yellow);
}
.rsvp-plus label { display: block; margin-bottom: 0.5rem; font-weight: 700; }
.rsvp-plus input[type=text] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--green);
  background: var(--cream);
  color: var(--green);
}

/* Fieldsets */
.rsvp__field {
  background: var(--cream);
  color: var(--green);
  padding: 1.5rem;
  border: 3px solid var(--yellow);
  margin-bottom: 1rem;
}
.rsvp__field legend {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.95rem;
  padding: 0.25rem 0.75rem;
  background: var(--yellow);
  border: 2px solid var(--red);
}

.rsvp__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem 1rem;
  margin: 1rem 0;
}
.rsvp__checks label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
}
.rsvp__checks input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--green);
  background: var(--cream);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.rsvp__checks input[type=checkbox]:checked { background: var(--green); }
.rsvp__checks input[type=checkbox]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  color: var(--cream);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.rsvp__stack {
  display: block;
  margin-top: 0.75rem;
}
.rsvp__stack > span {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--green);
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}
.rsvp__stack input,
.rsvp__stack select,
.rsvp__field textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--green);
  background: var(--cream);
  color: var(--green);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
}
.rsvp__stack input:focus,
.rsvp__stack select:focus,
.rsvp__field textarea:focus,
.rsvp__field input[type=text]:focus { border-color: var(--pink); }

.rsvp__field textarea,
.rsvp__field input[type=text] {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--green);
  background: var(--cream);
  color: var(--green);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  margin-top: 0.5rem;
  resize: vertical;
}

.rsvp__submit-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.rsvp__back {
  font-family: var(--font-body);
  color: var(--yellow);
  font-size: 0.9rem;
  text-decoration: underline;
  padding: 0.5rem 0;
}
.rsvp__back:hover { color: var(--cream); }

/* Thank you */
.rsvp__thanks { max-width: 600px; margin: 0 auto; }
.rsvp__thanks-badge {
  width: 200px;
  margin: 0 auto 1.5rem;
}
.rsvp__thanks-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--yellow);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.rsvp__thanks-body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto 1.5rem;
}
.rsvp__thanks-signoff {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--yellow);
  font-size: 1.3rem;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--yellow);
  color: var(--red);
  padding-top: 0;
}
.footer__marquee {
  overflow: hidden;
  padding: 1rem 0;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  background: var(--yellow);
}
.footer__marquee-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  animation: ticker-scroll 30s linear infinite;
  padding-right: 3rem;
}
.footer__marquee-item { flex-shrink: 0; }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 3rem clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.footer__half { text-align: center; }

.footer__headline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.footer__hot-badge svg { width: 50px; height: 50px; transform: rotate(-8deg); }
.footer__hot-badge:last-child svg { transform: rotate(8deg); }

.footer__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  color: var(--green);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__sunburst-svg { width: 100%; max-width: 400px; height: auto; overflow: visible; }
.phone-handset { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
.phone-handset ellipse { transition: filter .2s ease, stroke-width .2s ease; }
.phone-handset:hover { transform: translateY(-3px) rotate(-2deg); }
.phone-handset--right:hover { transform: translateY(-3px) rotate(2deg); }
.phone-handset:hover ellipse { filter: brightness(1.1) drop-shadow(0 4px 0 rgba(0,0,0,.25)); stroke-width: 3; }
.phone-handset:focus { outline: none; }
.phone-handset:focus-visible ellipse { stroke: #F2C230; stroke-width: 4; }

.poster {
  background: var(--yellow);
  padding: 1rem;
  position: relative;
}
.poster__ribbon { width: 100%; height: auto; max-width: 400px; margin: 0 auto; display: block; }
.poster__devanagari {
  font-family: var(--font-deva);
  font-weight: 600;
  color: var(--green);
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  margin: -0.5rem 0 -0.5rem;
  letter-spacing: 4px;
  text-shadow: 3px 3px 0 var(--red);
}
.poster__center { width: 100%; height: auto; max-width: 400px; margin: 0 auto; display: block; }

.footer__thankyou {
  background: var(--red);
  color: var(--cream);
  padding: 1.25rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 3px;
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  border-top: 3px solid var(--yellow);
  border-bottom: 3px solid var(--yellow);
}
.footer__credits {
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.5rem, 5vw, 4rem);
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--red);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  :root {
    --rail: 32px;
    --ticker: 32px;
  }
  body {
    padding: calc(var(--ticker) + 8px) calc(var(--rail) + 8px);
  }
  .rail__inner {
    font-size: 0.7rem;
    letter-spacing: 2px;
    gap: 1rem;
  }
  .ticker__track { font-size: 0.75rem; gap: 1rem; animation-duration: 30s; }
  .hero { grid-template-columns: 1fr; height: 70vh; }
  .hero__photo--right { display: none; }
  .hero__cta { right: 1rem; bottom: 1rem; padding: 1.1rem 2rem; font-size: 1rem; letter-spacing: 2px; }
  .personality { grid-template-columns: 1fr; }
  .personality__photo:first-child { border-right: none; border-bottom: 3px solid var(--red); }
  .footer__grid { grid-template-columns: 1fr; }
  .rsvp__code-row { flex-direction: column; }
  .rsvp__submit-row { flex-direction: column-reverse; align-items: stretch; }
  .rsvp__submit-row .ticket-btn { width: 100%; }
  .rsvp-event__choices { flex-direction: column; }
}

@media (max-width: 480px) {
  .manifesto__credit { flex-direction: column; gap: 1rem; }
  .manifesto__credit-text { text-align: center !important; max-width: none; }
  .footer__credits { flex-direction: column; text-align: center; }
  .event-page__details { grid-template-columns: 1fr; }
}

/* Small polish */
::selection { background: var(--pink); color: var(--cream); }

/* ============ KITSCH ENHANCEMENTS ============ */

/* Gold-foil gradient on the hero wordmark */
.hero__wordmark--foil span {
  background: linear-gradient(180deg,
    #F7D65E 0%,
    #F2C230 30%,
    #B8871B 55%,
    #F7D65E 75%,
    #E8B640 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 2px 2px 0 rgba(17,17,17,0.35);
  filter: drop-shadow(0 2px 0 #8B1A0E);
}

/* Rubber-stamp flourish (hero) */
.rubber-stamp {
  position: absolute;
  width: 130px;
  height: 130px;
  color: var(--red);
  transform: rotate(-14deg);
  opacity: 0.88;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: contrast(1.05);
}
.rubber-stamp--hero {
  top: 22px;
  right: 24px;
  z-index: 4;
}
.rubber-stamp svg { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .rubber-stamp--hero {
    width: 92px;
    height: 92px;
    top: 12px;
    right: 12px;
  }
}

/* Chapter badges — laminated menu-card style */
.chapter-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  margin: 0 auto 18px;
  background: var(--cream);
  color: var(--red);
  border: 2.5px solid var(--red);
  border-radius: 999px;
  box-shadow:
    3px 3px 0 var(--black),
    inset 0 0 0 3px var(--cream),
    inset 0 0 0 4px var(--red);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 0.75rem;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
  position: relative;
  z-index: 3;
}
.chapter-badge__num {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0;
  padding-right: 10px;
  border-right: 1.5px solid currentColor;
  line-height: 1;
}
.chapter-badge__label { line-height: 1; }

/* Colour variants */
.chapter-badge--green {
  color: var(--green);
  border-color: var(--green);
  box-shadow:
    3px 3px 0 var(--black),
    inset 0 0 0 3px var(--cream),
    inset 0 0 0 4px var(--green);
}
.chapter-badge--pink {
  color: var(--pink);
  border-color: var(--pink);
  box-shadow:
    3px 3px 0 var(--black),
    inset 0 0 0 3px var(--cream),
    inset 0 0 0 4px var(--pink);
}
.chapter-badge--red {
  color: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow:
    3px 3px 0 var(--black),
    inset 0 0 0 3px var(--cream),
    inset 0 0 0 4px var(--red-dark);
}

/* Section headers with chapter badges want centered display */
.travel,
.event-page,
.rsvp {
  text-align: center;
}
.travel > *:not(.chapter-badge),
.event-page > *:not(.chapter-badge),
.rsvp > *:not(.chapter-badge) {
  /* preserve inner alignment from original rules */
}

/* Slight pop-in when scrolled into view */
.chapter-badge {
  transition: transform 0.4s ease;
}
.chapter-badge:hover {
  transform: rotate(-1.2deg) scale(1.05);
}

/* ============================================================ */
/* ================== KITSCH STICKER PACK V2 ================== */
/* Curry-house + shaadi vernacular stickers                     */
/* ============================================================ */

/* Shared base */
.sticker {
  position: absolute;
  z-index: 8;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sticker:hover {
  transform: var(--sticker-rotate, rotate(0deg)) scale(1.05) translateY(-3px);
  z-index: 20;
}
.sticker--relative { position: relative; }

/* ============ STICKER 3: MITHAI BOX (painted image) ============ */
.sticker-mithai {
  width: clamp(140px, 16vw, 200px);
  filter: drop-shadow(4px 6px 10px rgba(0,0,0,0.3));
  --sticker-rotate: rotate(6deg);
  transform: var(--sticker-rotate);
}
.sticker-mithai img { width: 100%; height: auto; display: block; }

/* ============ STICKER 4: MENU CARD ============ */
.sticker-menu {
  background: var(--cream);
  border: 3px solid var(--red);
  padding: 1rem 1.2rem 1.2rem 2.2rem;
  font-family: var(--font-display);
  color: var(--red);
  width: 240px;
  --sticker-rotate: rotate(-4deg);
  transform: var(--sticker-rotate);
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.18));
  line-height: 1.4;
  text-align: left;
}
.sticker-menu::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0;
  border-left: 2px dashed var(--red);
}
.sticker-menu::after {
  content: ""; position: absolute; left: 4px; top: 18%;
  width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.3);
  box-shadow: 0 32px 0 rgba(0,0,0,0.3), 0 64px 0 rgba(0,0,0,0.3);
}
.sticker-menu__header {
  text-align: center;
  border-bottom: 2px solid var(--red);
  padding-bottom: 0.4rem;
  margin-bottom: 0.6rem;
}
.sticker-menu__title { font-size: 0.9rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
.sticker-menu__date { font-family: var(--font-script); font-style: italic; font-size: 0.7rem; color: var(--green); margin-top: 0.15rem; letter-spacing: 1px; }
.sticker-menu__section { margin-bottom: 0.5rem; }
.sticker-menu__eyebrow { font-family: var(--font-script); font-style: italic; color: var(--pink); font-size: 0.75rem; letter-spacing: 1px; }
.sticker-menu__dish { font-weight: 700; font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 0.1rem; }
.sticker-menu__dish-sub { display: block; font-weight: 400; font-size: 0.6rem; color: var(--green); letter-spacing: 1.5px; margin-top: 0.1rem; text-transform: none; font-family: var(--font-script); font-style: italic; }
.sticker-menu__pair { border-top: 2px dashed var(--pink); padding-top: 0.4rem; margin-top: 0.4rem; font-size: 0.55rem; letter-spacing: 2px; color: var(--green); text-align: center; text-transform: uppercase; font-weight: 700; }
.sticker-menu__stamp { display: block; text-align: right; font-family: var(--font-script); font-style: italic; color: var(--pink); font-size: 0.75rem; margin-top: 0.3rem; }

/* ============ STICKER 5: RESERVATION STAMP ============ */
.sticker-stamp {
  width: 200px; height: 200px;
  border: 4px double var(--red);
  border-radius: 50%;
  color: var(--red);
  font-family: var(--font-display); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  --sticker-rotate: rotate(-8deg);
  transform: var(--sticker-rotate);
  opacity: 0.94;
  filter: blur(0.3px) drop-shadow(1px 1px 0 rgba(217,58,31,0.3));
  background: transparent;
  padding: 22px;
  box-sizing: border-box;
}
.sticker-stamp::before {
  content: ""; position: absolute; inset: 8px;
  border: 2px solid var(--red); border-radius: 50%;
  pointer-events: none;
}
.sticker-stamp::after { content: none; }
.sticker-stamp__inner { text-align: center; width: 100%; }
.sticker-stamp__top {
  font-size: 0.5rem; letter-spacing: 1.5px;
  border-bottom: 1.5px solid var(--red); padding-bottom: 0.2rem; margin-bottom: 0.35rem;
}
.sticker-stamp__mid { font-size: 1.1rem; letter-spacing: 1.5px; line-height: 1.05; }
.sticker-stamp__sub { font-size: 0.42rem; letter-spacing: 1px; margin-top: 0.3rem; color: var(--red-dark); }
.sticker-stamp__bot {
  font-size: 0.5rem; letter-spacing: 1.5px;
  border-top: 1.5px solid var(--red); padding-top: 0.2rem; margin-top: 0.35rem;
}

/* ============ STICKER 6: BOTTLE CAP ============ */
.sticker-bcap {
  width: 150px; height: 150px;
  --sticker-rotate: rotate(-6deg);
  transform: var(--sticker-rotate);
  filter: drop-shadow(3px 5px 0 rgba(0,0,0,0.3));
}
.sticker-bcap__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--green) 0deg 15deg, var(--yellow) 15deg 30deg,
    var(--green) 30deg 45deg, var(--yellow) 45deg 60deg,
    var(--green) 60deg 75deg, var(--yellow) 75deg 90deg,
    var(--green) 90deg 105deg, var(--yellow) 105deg 120deg,
    var(--green) 120deg 135deg, var(--yellow) 135deg 150deg,
    var(--green) 150deg 165deg, var(--yellow) 165deg 180deg,
    var(--green) 180deg 195deg, var(--yellow) 195deg 210deg,
    var(--green) 210deg 225deg, var(--yellow) 225deg 240deg,
    var(--green) 240deg 255deg, var(--yellow) 255deg 270deg,
    var(--green) 270deg 285deg, var(--yellow) 285deg 300deg,
    var(--green) 300deg 315deg, var(--yellow) 315deg 330deg,
    var(--green) 330deg 345deg, var(--yellow) 345deg 360deg
  );
}
.sticker-bcap__inner {
  position: absolute; inset: 11px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--yellow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--cream);
  font-family: var(--font-display); font-weight: 700;
  text-align: center; padding: 0 0.4rem;
}
.sticker-bcap__brand { font-size: 0.5rem; letter-spacing: 2px; color: var(--yellow); margin-bottom: 0.1rem; }
.sticker-bcap__mid { font-size: 0.85rem; letter-spacing: 1.5px; line-height: 1.1; }
.sticker-bcap__bot { font-size: 0.45rem; letter-spacing: 2px; margin-top: 0.25rem; color: var(--yellow); }

/* ============ STICKER 7: TAILOR TAG ============ */
.sticker-ttag {
  width: 160px;
  --sticker-rotate: rotate(4deg);
  transform: var(--sticker-rotate);
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.2));
  padding-top: 32px;
}
.sticker-ttag__cord {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 48px; height: 32px;
  border: 2px solid var(--red);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
}
.sticker-ttag__body {
  position: relative;
  border: 3px solid var(--red);
  background: var(--cream);
}
.sticker-ttag__body::before {
  content: ""; position: absolute; left: 50%; top: -11px; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 2px solid var(--red);
}
.sticker-ttag__top {
  background: var(--red); color: var(--yellow);
  padding: 0.6rem 0.5rem 0.55rem;
  text-align: center;
  font-family: var(--font-display); font-weight: 700;
}
.sticker-ttag__deva { font-family: var(--font-deva); font-size: 0.85rem; color: var(--yellow); letter-spacing: 1.5px; margin-bottom: 0.1rem; }
.sticker-ttag__label { font-size: 0.6rem; letter-spacing: 2.5px; text-transform: uppercase; }
.sticker-ttag__bot { padding: 0.7rem 0.5rem; text-align: center; font-family: var(--font-display); color: var(--red); }
.sticker-ttag__dates { font-weight: 700; font-size: 0.75rem; letter-spacing: 1.5px; line-height: 1.1; text-transform: uppercase; }
.sticker-ttag__year { font-family: var(--font-script); font-style: italic; color: var(--green); font-size: 0.65rem; margin-top: 0.25rem; letter-spacing: 1px; }
.sticker-ttag__season { font-size: 0.45rem; letter-spacing: 2px; color: var(--pink); margin-top: 0.35rem; padding-top: 0.25rem; border-top: 1px dashed var(--pink); text-transform: uppercase; font-weight: 700; }

/* ============ STICKER 8: TRUCK-ART PLAQUE ============ */
.sticker-truck {
  width: 230px;
  background: var(--yellow);
  padding: 0.3rem;
  --sticker-rotate: rotate(-3deg);
  transform: var(--sticker-rotate);
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.25));
  border: 3px solid var(--green);
}
.sticker-truck__inner {
  border: 2px solid var(--green);
  padding: 0.6rem 0.6rem;
  color: var(--green);
  font-family: var(--font-display); font-weight: 700;
  text-align: center;
  position: relative;
  background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(31,93,58,0.06) 12px 14px);
}
.sticker-truck__horn {
  font-size: 0.9rem; letter-spacing: 2px;
  color: var(--red);
  border-bottom: 2px dashed var(--green);
  padding-bottom: 0.3rem; margin-bottom: 0.4rem;
}
.sticker-truck__ok {
  display: inline-block;
  background: var(--red); color: var(--yellow);
  padding: 0.1rem 0.4rem;
  letter-spacing: 2px; font-size: 0.75rem;
  margin: 0 0.2rem;
  border: 2px solid var(--green);
}
.sticker-truck__mid {
  font-family: var(--font-script); font-style: italic; font-weight: 700;
  color: var(--red); font-size: 0.9rem;
  margin: 0.3rem 0 0.25rem; letter-spacing: 0;
}
.sticker-truck__bot {
  font-size: 0.55rem; letter-spacing: 2.5px;
  color: var(--green);
  padding-top: 0.3rem;
  border-top: 2px dashed var(--green);
}
.sticker-truck__chev {
  position: absolute; top: 2px; bottom: 2px; width: 6px;
  background: repeating-linear-gradient(to bottom, var(--red) 0 6px, var(--yellow) 6px 12px);
}
.sticker-truck__chev--l { left: 0; }
.sticker-truck__chev--r { right: 0; }

/* ============ STICKER 9: WAX SEAL ============ */
.sticker-wax {
  width: 140px; height: 140px;
  --sticker-rotate: rotate(6deg);
  transform: var(--sticker-rotate);
  filter: drop-shadow(4px 6px 4px rgba(0,0,0,0.4));
}
.sticker-wax__blob {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 35% 30%, #F7E28A 0%, #F2C230 40%, #8B6B14 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='black' d='M100 6 C130 12 138 26 158 22 C175 26 178 44 190 60 C202 76 196 98 194 114 C198 132 186 148 172 160 C158 174 138 188 118 190 C100 196 80 194 62 188 C46 182 30 168 22 152 C10 140 6 118 10 100 C4 80 18 62 30 46 C42 30 60 20 78 14 C86 8 92 4 100 6 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='black' d='M100 6 C130 12 138 26 158 22 C175 26 178 44 190 60 C202 76 196 98 194 114 C198 132 186 148 172 160 C158 174 138 188 118 190 C100 196 80 194 62 188 C46 182 30 168 22 152 C10 140 6 118 10 100 C4 80 18 62 30 46 C42 30 60 20 78 14 C86 8 92 4 100 6 Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sticker-wax__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #4A2E0A;
  font-family: var(--font-display); font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,240,200,0.4);
}
.sticker-wax__mono {
  font-family: var(--font-script); font-style: italic;
  font-size: 2rem; line-height: 1; letter-spacing: -0.02em;
  color: #3D2408;
}
.sticker-wax__heart { color: #7A3B0F; font-size: 1.2rem; margin: 0 0.1rem; vertical-align: -0.15em; }
.sticker-wax__ring { font-size: 0.45rem; letter-spacing: 2.5px; margin-top: 0.25rem; text-transform: uppercase; opacity: 0.9; }

/* ============ STICKER PLACEMENTS (per-section anchor rules) ============ */

/* Positioning containers must be relative */
.manifesto, .travel, .personality, .footer, .rsvp, .event-page { position: relative; }

/* Stamp: replaces the hero rubber-stamp position (top-right of hero) */
.hero .sticker-stamp {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 7;
}
/* Hide the original .hero__stamp when the new stamp sits over it */
.hero__stamp.hero__stamp--replaced { display: none; }

/* Menu card: peeking from left edge of manifesto, not overlapping copy */
.manifesto .sticker-menu {
  position: absolute;
  left: -140px;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  --sticker-rotate: translateY(-50%) rotate(-6deg);
  z-index: 8;
  width: 220px;
}
/* Hide when the viewport is too narrow to fit it in the outer margin */
@media (max-width: 1180px) {
  .manifesto .sticker-menu { display: none; }
}

/* Bottle cap: bottom-right of travel section, in the safe padding zone */
.travel .sticker-bcap--travel {
  position: absolute;
  right: 3vw;
  bottom: 2rem;
  z-index: 10;
}

/* Tailor tag: hanging into the photo-break section from the top */
.photo-break { position: relative; }
.sticker-ttag--photobreak {
  position: absolute;
  right: 4vw;
  top: -30px;
  z-index: 12;
}

/* Truck-art plaque: bottom-right of personality photo pair */
.personality .sticker-truck {
  position: absolute;
  bottom: -30px;
  right: -20px;
  z-index: 10;
}

/* Mithai box: above RSVP, tucked into top-right */
.rsvp .sticker-mithai {
  position: absolute;
  top: -70px;
  right: 4vw;
  z-index: 10;
}

/* Wax seal: bottom-left of footer poster area */
.footer .sticker-wax {
  position: absolute;
  bottom: 100px;
  left: 3vw;
  z-index: 10;
}

/* ============ STICKER MOBILE RESPONSIVE ============ */
@media (max-width: 900px) {
  .hero .sticker-stamp { width: 150px; height: 150px; top: 0.75rem; right: 0.75rem; padding: 16px; }
  .hero .sticker-stamp .sticker-stamp__mid { font-size: 0.85rem; }
  .hero .sticker-stamp .sticker-stamp__top,
  .hero .sticker-stamp .sticker-stamp__bot { font-size: 0.4rem; letter-spacing: 1px; }
  .hero .sticker-stamp .sticker-stamp__sub { font-size: 0.35rem; letter-spacing: 0.5px; }
  .travel .sticker-bcap--travel { right: 1rem; bottom: 1rem; width: 110px; height: 110px; }
  .sticker-ttag--photobreak { right: 1rem; top: -20px; width: 130px; }
  .personality .sticker-truck { bottom: -20px; right: 50%; transform: translateX(50%) rotate(-3deg); --sticker-rotate: translateX(50%) rotate(-3deg); width: 200px; }
  .rsvp .sticker-mithai { top: -50px; right: 1rem; width: 130px; }
  .footer .sticker-wax { display: none; }
}

@media (max-width: 560px) {
  /* On phones, keep only the most essential ones */
  .manifesto .sticker-menu,
  .travel .sticker-bcap--travel,
  .personality .sticker-truck,
  .footer .sticker-wax { display: none; }
  .sticker-ttag--photobreak { display: none; }
  .hero .sticker-stamp { width: 120px; height: 120px; padding: 12px; }
  .hero .sticker-stamp .sticker-stamp__mid { font-size: 0.72rem; letter-spacing: 1px; }
  .hero .sticker-stamp .sticker-stamp__top,
  .hero .sticker-stamp .sticker-stamp__bot { font-size: 0.35rem; }
  .rsvp .sticker-mithai { width: 110px; }
  .sticker-ttag--float { width: 110px; }
}