/* ══ Gigi Balang Vintage Poster — cream · ink · red ══
   Prefix: bt- · Fonts: Alfa Slab One · Source Sans 3 */

:root {
  --bt-cream: #F6EAD3;
  --bt-cream-2: #F0DDBE;
  --bt-ink: #33231A;
  --bt-red: #B3362B;
  --bt-gold: #D9A441;
  --bt-green: #2E5E4E;
  --bt-body: #54463B;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  background: var(--bt-ink);
  background-image: repeating-linear-gradient(-45deg, rgba(246,234,211,.05) 0 14px, transparent 14px 28px);
  color: var(--bt-body); -webkit-font-smoothing: antialiased;
}
body:not(.is-open) { overflow: hidden; }

.bt-page { max-width: 480px; margin: 0 auto; background: var(--bt-cream); box-shadow: 0 0 70px rgba(0,0,0,.55); position: relative; overflow-x: clip; }

/* ── tumpal strips ── */
.bt-tumpal { display: block; width: 100%; height: 12px; color: var(--bt-red); }
.bt-tumpal svg { display: block; width: 100%; height: 100%; }
.bt-tumpal-flip svg { transform: scaleY(-1); }
.bt-tumpal-gold { height: 9px; width: 120px; margin: 8px auto 0; color: var(--bt-gold); }

/* ── rosettes ── */
.bt-rosette { width: 34px; height: 34px; }
.bt-rosette-sm { width: 22px; height: 22px; }

/* ── cover: awning folds up like a rolling banner ── */
.bt-cover {
  position: fixed; inset: 0; z-index: 100; max-width: 480px; margin: 0 auto;
  perspective: 900px; overflow: hidden;
  transition: visibility 0s 1.25s;
}
.bt-awning {
  position: absolute; top: -2px; bottom: -2px; width: 51%;
  background:
    repeating-linear-gradient(90deg, var(--bt-red) 0 26px, var(--bt-cream) 26px 52px);
  transform-origin: top center;
  backface-visibility: hidden;
  transition: transform 1.05s cubic-bezier(.76,0,.24,1);
  will-change: transform;
}
.bt-awn-l { left: 0; border-right: 4px solid var(--bt-ink); }
.bt-awn-r { right: 0; border-left: 4px solid var(--bt-ink); }
.bt-valance { position: absolute; top: 0; left: 0; right: 0; z-index: 3; transition: transform .7s cubic-bezier(.76,0,.24,1) .12s; }
.bt-valance-edge {
  display: block; height: 20px; background-color: var(--bt-red);
  background-image: radial-gradient(circle at 50% 0, var(--bt-red) 10px, transparent 11px);
  background-size: 24px 20px; background-repeat: repeat-x;
}
.bt-cover-card {
  position: relative; z-index: 2; margin: 96px auto 0; width: min(320px, 82%);
  background: var(--bt-cream); border: 3px solid var(--bt-ink);
  box-shadow: 8px 8px 0 rgba(51,35,26,.85);
  padding: 30px 22px 24px; text-align: center; color: var(--bt-ink);
  transition: opacity .5s ease, transform .5s ease;
}
.bt-cover-salam { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--bt-green); }
.bt-cover-names { font-family: "Alfa Slab One", serif; font-weight: 400; font-size: 34px; line-height: 1.15; margin-top: 10px; text-transform: uppercase; }
.bt-cover-names span { display: block; color: var(--bt-red); font-size: 22px; margin: 2px 0; }
.bt-cover-date { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--bt-body); }
.bt-cover-guest { margin: 20px 0 18px; font-size: 13px; color: var(--bt-body); }
.bt-guest-name { font-family: "Alfa Slab One", serif; font-size: 19px; color: var(--bt-red); margin-top: 4px; }
.bt-open-btn {
  appearance: none; cursor: pointer; border: 2px solid var(--bt-ink);
  background: var(--bt-red); color: var(--bt-cream);
  font-family: "Source Sans 3", sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; padding: 12px 30px;
  box-shadow: 4px 4px 0 var(--bt-ink);
  transition: transform .15s ease, box-shadow .15s ease, background .25s ease;
}
.bt-open-btn:hover { background: var(--bt-green); }
.bt-open-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--bt-ink); }
.bt-cover-note { margin-top: 16px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--bt-body); }
.bt-rosette { flex: none; }

body.is-open [data-cover] { pointer-events: none; visibility: hidden; }
body.is-open .bt-valance { transform: translateY(-110%); }
body.is-open .bt-cover-card { opacity: 0; transform: translateY(14px) scale(.97); }
body.is-open .bt-awn-l { transform: rotateX(-104deg); transition-delay: .1s; }
body.is-open .bt-awn-r { transform: rotateX(-104deg); transition-delay: .22s; }

/* ── hero poster ── */
.bt-hero { background: var(--bt-cream); }
.bt-tumpal-red { background: transparent; }
.bt-hero-body { padding: 40px 26px 42px; text-align: center; }
.bt-hero-kicker { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--bt-green); }
.bt-hero-names { font-family: "Alfa Slab One", serif; font-weight: 400; font-size: 31px; line-height: 1.18; color: var(--bt-ink); text-transform: uppercase; margin-top: 12px; }
.bt-hero-amp { font-family: "Alfa Slab One", serif; font-size: 24px; color: var(--bt-red); margin-top: 6px; }
.bt-hero-date { margin-top: 12px; font-size: 13.5px; font-weight: 600; letter-spacing: .06em; color: var(--bt-body); }
.bt-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 330px; margin: 24px auto 0; }
.bt-cd-cell { background: var(--bt-ink); color: var(--bt-cream); border-bottom: 4px solid var(--bt-red); padding: 10px 4px 8px; text-align: center; }
.bt-cd-cell b { display: block; font-family: "Alfa Slab One", serif; font-weight: 400; font-size: 21px; font-variant-numeric: tabular-nums; }
.bt-cd-cell span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--bt-gold); }

/* ── sections ── */
.bt-sec { padding: 50px 24px; }
.bt-sec-head { text-align: center; margin-bottom: 28px; display: grid; justify-items: center; gap: 6px; }
.bt-sec-title { font-family: "Alfa Slab One", serif; font-weight: 400; font-size: 24px; color: var(--bt-ink); text-transform: uppercase; letter-spacing: .01em; }

/* ── couple: vintage poster cards ── */
.bt-person { max-width: 340px; margin: 0 auto; background: var(--bt-cream); border: 3px solid var(--bt-ink); box-shadow: 6px 6px 0 rgba(51,35,26,.85); padding: 22px 18px 20px; text-align: center; }
.bt-person-tag { display: inline-block; background: var(--bt-red); color: var(--bt-cream); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 5px 12px; }
.bt-person-tag-green { background: var(--bt-green); }
.bt-avatar { width: 64px; height: 64px; margin: 14px auto 12px; border-radius: 50%; background: var(--bt-red); color: var(--bt-cream); display: grid; place-items: center; font-family: "Alfa Slab One", serif; font-size: 21px; box-shadow: 0 0 0 3px var(--bt-cream), 0 0 0 5px var(--bt-gold); }
.bt-avatar-green { background: var(--bt-green); }
.bt-person-name { font-family: "Alfa Slab One", serif; font-weight: 400; font-size: 20px; color: var(--bt-ink); text-transform: uppercase; }
.bt-person-parents { margin-top: 8px; font-size: 13px; line-height: 1.6; }
.bt-person-ig { margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--bt-red); letter-spacing: .04em; }
.bt-sep { text-align: center; margin: 14px 0; }

/* ── events: ticket stubs ── */
.bt-events { background: var(--bt-cream-2); }
.bt-ticket { background: var(--bt-cream); border: 2.5px solid var(--bt-ink); border-left: 8px solid var(--bt-red); padding: 20px 18px; position: relative; }
.bt-ticket + .bt-ticket { margin-top: 16px; }
.bt-ticket-b { border-left-color: var(--bt-green); }
.bt-ticket-no { font-size: 10.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--bt-red); }
.bt-ticket-title { font-family: "Alfa Slab One", serif; font-weight: 400; font-size: 21px; color: var(--bt-ink); margin-top: 2px; text-transform: uppercase; }
.bt-ticket-time { font-size: 13.5px; font-weight: 700; color: var(--bt-green); margin-top: 4px; }
.bt-ticket-venue { font-size: 14.5px; font-weight: 700; color: var(--bt-ink); margin-top: 10px; }
.bt-ticket-addr { font-size: 12.5px; line-height: 1.55; margin-top: 2px; }
.bt-cal { margin-top: 12px; display: flex; gap: 14px; flex-wrap: wrap; }
.bt-cal a { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-decoration: none; color: var(--bt-ink); border-bottom: 2px solid var(--bt-gold); padding-bottom: 2px; }
.bt-maps { margin-top: 26px; }
.bt-map-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.bt-map-tab {
  appearance: none; border: 2px solid var(--bt-ink); background: var(--bt-cream); cursor: pointer;
  padding: 10px 0; font-family: "Source Sans 3", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bt-ink);
}
.bt-map-tab:first-child { border-right-width: 1px; }
.bt-map-tab.is-active { background: var(--bt-ink); color: var(--bt-cream); }
.bt-map { display: block; width: 100%; height: 220px; border: 2px solid var(--bt-ink); border-top: none; filter: sepia(.25) saturate(.9); }

/* ── story timeline ── */
.bt-story { list-style: none; display: grid; gap: 6px; counter-reset: bt-story; }
.bt-story-item { position: relative; padding: 13px 0 13px 68px; border-bottom: 2px dashed rgba(51,35,26,.22); }
.bt-story-item:last-child { border-bottom: none; }
.bt-story-year { position: absolute; left: 0; top: 13px; font-family: "Alfa Slab One", serif; font-size: 14px; color: var(--bt-cream); background: var(--bt-red); padding: 6px 8px; box-shadow: 3px 3px 0 var(--bt-ink); }
.bt-story-item:nth-child(even) .bt-story-year { background: var(--bt-green); }
.bt-story-title { font-family: "Alfa Slab One", serif; font-weight: 400; font-size: 16.5px; color: var(--bt-ink); }
.bt-story-text { font-size: 13.5px; line-height: 1.65; margin-top: 5px; }

/* ── gallery: tilted prints ── */
.bt-gal-sec { background: var(--bt-cream-2); }
.bt-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bt-g-item { cursor: zoom-in; background: var(--bt-cream); border: 2.5px solid var(--bt-ink); box-shadow: 5px 5px 0 rgba(51,35,26,.8); aspect-ratio: 4/3; overflow: hidden; transition: transform .25s ease; }
.bt-g-item:nth-child(odd) { transform: rotate(-1.4deg); }
.bt-g-item:nth-child(even) { transform: rotate(1.4deg); }
.bt-g-item:hover { transform: rotate(0) scale(1.03); }
.bt-g-item svg { display: block; width: 100%; height: 100%; }
.bt-g-item { color: #B3362B; }

/* ── forms ── */
.bt-form { display: grid; gap: 16px; }
.bt-field { display: grid; gap: 6px; border: none; }
.bt-field span, .bt-field legend { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bt-body); }
.bt-field input, .bt-field select, .bt-field textarea {
  font-family: "Source Sans 3", sans-serif; font-size: 14.5px; color: var(--bt-ink);
  background: #FBF4E4; border: 2px solid rgba(51,35,26,.35); padding: 11px 13px; outline: none; width: 100%;
  transition: border-color .2s ease;
}
.bt-field input:focus, .bt-field select:focus, .bt-field textarea:focus { border-color: var(--bt-red); }
.bt-radios label { display: flex; gap: 9px; align-items: center; font-size: 14px; padding: 5px 0; }
.bt-radios input { accent-color: var(--bt-red); width: 16px; height: 16px; }
.bt-submit {
  justify-self: center; appearance: none; cursor: pointer; border: 2px solid var(--bt-ink);
  background: var(--bt-ink); color: var(--bt-cream); font-family: "Source Sans 3", sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 12px 30px;
  box-shadow: 4px 4px 0 var(--bt-red); transition: box-shadow .15s ease, transform .15s ease, background .25s ease;
}
.bt-submit:hover { background: var(--bt-red); }
.bt-submit:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--bt-red); }
.bt-thanks { text-align: center; font-size: 16px; font-weight: 600; color: var(--bt-green); padding: 22px 8px; }

/* ── wishes ── */
.bt-wish-sec { background: var(--bt-cream-2); }
.bt-wish-form { margin-bottom: 26px; }
.bt-wishes { display: grid; gap: 10px; margin-bottom: 16px; }
[data-wishes-list] .wish { background: var(--bt-cream); border: 2px solid rgba(51,35,26,.25); border-top: 3px solid var(--bt-gold); padding: 13px 16px 11px; }
[data-wishes-list] .wish h4 { font-family: "Alfa Slab One", serif; font-weight: 400; font-size: 14px; color: var(--bt-ink); }
[data-wishes-list] .wish p { font-size: 13px; line-height: 1.6; margin-top: 3px; }
[data-wishes-list] .wish time { display: block; font-size: 10.5px; color: #8A7A66; margin-top: 6px; }
.bt-more {
  display: block; margin: 0 auto; appearance: none; background: none; cursor: pointer;
  border: 2px solid var(--bt-ink); color: var(--bt-ink); font-family: "Source Sans 3", sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 9px 20px;
}

/* ── amplop ── */
.bt-amplop-note { text-align: center; font-size: 13px; line-height: 1.65; max-width: 36ch; margin: 0 auto 20px; }
.bt-envs { display: grid; gap: 14px; }
.bt-env { background: var(--bt-ink); color: var(--bt-cream); padding: 20px 18px 17px; text-align: center; position: relative; box-shadow: 5px 5px 0 var(--bt-red); }
.bt-env::before { content: ""; position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; border: 1.5px dashed rgba(217,164,65,.55); pointer-events: none; }
.bt-env-name { font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--bt-gold); }
.bt-env-num { font-family: "Alfa Slab One", serif; font-size: 22px; letter-spacing: .05em; margin-top: 8px; }
.bt-env-holder { font-size: 12px; color: #CBBBA4; margin-top: 3px; }
.bt-copy {
  margin-top: 13px; appearance: none; cursor: pointer; background: var(--bt-gold); color: var(--bt-ink);
  border: none; font-family: "Source Sans 3", sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 8px 18px;
}

/* ── closing ── */
.bt-closing { background: var(--bt-ink); color: var(--bt-cream); text-align: center; padding: 54px 26px 26px; position: relative; }
.bt-tumpal-top { position: absolute; top: 0; left: 0; right: 0; color: var(--bt-red); }
.bt-closing .bt-rosette { margin: 0 auto 14px; }
.bt-closing-text { font-size: 13px; line-height: 1.7; color: #CBBBA4; max-width: 36ch; margin: 0 auto 18px; }
.bt-closing-thanks { font-size: 14px; font-weight: 600; color: var(--bt-cream); }
.bt-closing-names { font-family: "Alfa Slab One", serif; font-size: 32px; text-transform: uppercase; color: var(--bt-gold); margin-top: 12px; }
.bt-closing-family { margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #CBBBA4; }

/* ── music toggle (visible after open) ── */
.bt-music {
  position: fixed; right: 16px; bottom: 20px; z-index: 90; width: 46px; height: 46px;
  background: var(--bt-red); color: var(--bt-cream); border: 2px solid var(--bt-ink);
  box-shadow: 3px 3px 0 var(--bt-ink); cursor: pointer; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .5s ease .8s;
}
body.is-open .bt-music { opacity: 1; pointer-events: auto; }
.bt-music svg { width: 20px; height: 20px; }
.bt-music.is-playing { animation: bt-beat 2.4s ease infinite; }
@keyframes bt-beat {
  0%, 100% { box-shadow: 3px 3px 0 var(--bt-ink), 0 0 0 0 rgba(179,54,43,.5); }
  60% { box-shadow: 3px 3px 0 var(--bt-ink), 0 0 0 12px rgba(179,54,43,0); }
}

/* ── lightbox restyle ── */
.lb-overlay { font-family: "Source Sans 3", sans-serif; background: rgba(51,35,26,.92); }
.lb-cap { font-weight: 600; color: var(--bt-cream); }
.lb-stage { border: 3px solid var(--bt-gold); box-shadow: 8px 8px 0 rgba(179,54,43,.65); }

/* ── reveal (behavior-critical) ── */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }
.bt-g-item[data-reveal] { opacity: 0; transition: opacity .75s ease, transform .75s ease; }
.bt-g-item[data-reveal].revealed:nth-child(odd) { transform: rotate(-1.4deg); }
.bt-g-item[data-reveal].revealed:nth-child(even) { transform: rotate(1.4deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bt-awning, .bt-valance, .bt-cover-card { transition-duration: .01s !important; }
  .bt-music.is-playing { animation: none; }
  [data-reveal], .bt-g-item[data-reveal] { transition-duration: .01s !important; transform: none; }
}