/* =========================================================================
   DANCE CARD — debut / 18th birthday
   Signature idea: the programme is a ballroom dance card. A tasselled card
   holds the 18 Roses, 18 Candles and 18 Treasures, every court member on
   their own numbered line. Open the link with ?to=<name> and the guest's own
   line lights up. Midnight plum, blush and champagne foil.
   Type: Fraunces (display) · Pinyon Script (names) · Karla (details)
   ========================================================================= */
@font-face { font-family: "Fraunces"; src: url("../fonts/dancecard/fraunces-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/dancecard/fraunces-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/dancecard/fraunces-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("../fonts/dancecard/pinyon-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Karla"; src: url("../fonts/dancecard/karla-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Karla"; src: url("../fonts/dancecard/karla-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --card-ink: #2a1a30; --card-muted: #8a6f7e; --card-line: #c7aeb9; --card-bg2: #fffaf6; --title: #f7efe9;
  --bg: #24162b; --bg-2: #2f1d38; --paper: #f7efe9; --ink: #f4e9e4; --muted: #c7b2bd; --line: rgba(236, 201, 198, .2);
  --accent: #d9b98a; --accent-ink: #24162b; --blush: #ecc9c6; --rose: #b4566b; --plum: #5b3a64;
  --foil: linear-gradient(100deg, #b8935a 0%, #f3dcae 22%, #c9a46b 40%, #fff1cf 52%, #b8935a 70%, #e6c792 100%);
  --display: "Fraunces", Georgia, serif; --script: "Pinyon Script", cursive; --text: "Karla", system-ui, sans-serif;
  --maxw: 600px; --radius: 14px;
  --env: #45294f; --env-dark: #563563; --seal: #b4566b; --seal-ink: #fbe9e3;
}
body { background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--bg) 82%, #fff), var(--bg) 60%) fixed; background-color: var(--bg); color: var(--ink); }

/* ---------- Intro: plum envelope, rose seal "18" ---------- */
.t-dancecard .intro { background: radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--bg) 85%, #fff), color-mix(in srgb, var(--bg) 70%, #000)); }
.t-dancecard .env-card { background: var(--paper); color: var(--card-ink); }
.t-dancecard .env-names { font-family: var(--script); font-size: 2rem; }
.t-dancecard .env-date { color: var(--card-muted); }
.t-dancecard .env-seal { font-family: var(--display); font-style: italic; font-size: 1.5rem; }
.t-dancecard .intro-hint { color: var(--muted); letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; }

/* ---------- Headings ---------- */
.t-dancecard .sh-k { color: var(--blush); }
.t-dancecard .sh-t { font-style: italic; color: var(--title); }
.t-dancecard .sh-t::after { content: "✦"; display: block; font-style: normal; font-size: .9rem; color: var(--accent); margin-top: 10px; }

/* ---------- Hero: foil "18" ---------- */
.t-dancecard .s-hero { position: relative; overflow: hidden; padding: 72px 22px 60px; }
.dc-sky { position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 82% 12%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 66% 34%, #f3dcae 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 62%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 90% 70%, #f3dcae 50%, transparent 51%), radial-gradient(1px 1px at 8% 86%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 8%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 38% 88%, #fff 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .35; } }
.t-dancecard .hero-in { position: relative; }
.t-dancecard .hero-guest { font-family: var(--display); font-style: italic; color: var(--blush); }
.t-dancecard .hero-k { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 0; }
.dc-mark { position: relative; height: clamp(190px, 58vw, 300px); display: grid; place-items: center; margin: 0 auto; }
.dc-18 { font-family: var(--display); font-weight: 600; font-style: italic; font-size: clamp(11rem, 58vw, 18rem); line-height: 1; letter-spacing: -.04em;
  background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 6s ease-in-out infinite alternate; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .dc-18 { color: var(--accent); } }
@keyframes foil { to { background-position: 100% 0; } }
.dc-name { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%) rotate(-8deg); font-family: var(--script); font-size: clamp(3.6rem, 19vw, 6rem); color: var(--blush); text-shadow: 0 2px 14px var(--name-shadow, rgba(36,22,43,.85)); white-space: nowrap; }
.t-dancecard .hero-t { font-family: var(--display); font-size: clamp(1.5rem, 6.4vw, 2.2rem); letter-spacing: .02em; color: var(--title); margin-top: 6px; }
.t-dancecard .hero-line { font-family: var(--display); font-style: italic; color: var(--muted); margin: 10px auto 18px; max-width: 20em; }
.t-dancecard .hero-date { font-size: .86rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.t-dancecard .hero-place { font-size: .9rem; color: var(--muted); }
.t-dancecard .hero-place i { font-family: var(--display); color: var(--blush); }
.t-dancecard .hero-cta { background: var(--foil); background-size: 200% 100%; color: var(--card-ink); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; box-shadow: 0 10px 24px -12px rgba(217,185,138,.8); }

/* ---------- Countdown ---------- */
.t-dancecard .cd-u { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 14px 0 10px; }
.t-dancecard .cd-u b { font-style: italic; color: var(--title); }
.t-dancecard .btn-line { color: var(--blush); }
.t-dancecard .btn-line:hover { background: var(--blush); color: var(--bg); border-color: var(--blush); }

/* ---------- THE DANCE CARD ---------- */
.dk-intro { text-align: center; color: var(--muted); font-size: .95rem; }
.dk { position: relative; max-width: 420px !important; margin: 46px auto 0; }
.dk-tassel { position: absolute; z-index: 2; top: -40px; left: 40px; width: 2px; height: 58px; background: var(--rose); transform: translateX(-50%); }
.dk-tassel::before { content: ""; position: absolute; top: -10px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--rose); }
.dk-tassel span { position: absolute; top: 50px; left: 50%; width: 14px; height: 34px; margin-left: -7px; border-radius: 3px 3px 8px 8px;
  background: repeating-linear-gradient(90deg, var(--rose) 0 2px, color-mix(in srgb, var(--rose) 80%, #000) 2px 3px); transform-origin: top; animation: sway 3.4s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
.dk-card { position: relative; background: var(--paper); color: var(--card-ink); border-radius: 6px 6px 18px 18px; padding: 26px 20px 22px;
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--accent), 0 30px 50px -24px rgba(0,0,0,.6);
  background-image: radial-gradient(circle at 40px 14px, var(--bg) 5px, transparent 5.5px); }
.dk-head { text-align: center; margin: 4px 0 16px; display: grid; }
.dk-head span { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--card-muted); }
.dk-head b { font-family: var(--script); font-weight: 400; font-size: 2.2rem; line-height: 1.1; color: var(--rose); }
.dk-r { position: absolute; opacity: 0; pointer-events: none; }
.dk-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--accent); border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.dk-tab { text-align: center; padding: 9px 4px; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; color: var(--card-muted); transition: background-color .2s, color .2s; }
#dk-roses:checked ~ .dk-tabs label[for="dk-roses"], #dk-candles:checked ~ .dk-tabs label[for="dk-candles"], #dk-treasures:checked ~ .dk-tabs label[for="dk-treasures"] { background: var(--card-ink); color: var(--card-bg2); }
#dk-roses:focus-visible ~ .dk-tabs label[for="dk-roses"], #dk-candles:focus-visible ~ .dk-tabs label[for="dk-candles"], #dk-treasures:focus-visible ~ .dk-tabs label[for="dk-treasures"] { outline: 2px solid var(--rose); outline-offset: 2px; }
.dk-panel { display: none; }
#dk-roses:checked ~ .dk-p-roses, #dk-candles:checked ~ .dk-p-candles, #dk-treasures:checked ~ .dk-p-treasures { display: block; animation: fadein .4s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }
.dk-note { text-align: center; font-family: var(--display); font-style: italic; color: var(--card-muted); font-size: .92rem; margin-bottom: 8px; }
.dk-list li { display: grid; grid-template-columns: 26px 1fr; align-items: end; gap: 6px; padding: 5px 0; }
.dk-n { font-family: var(--display); font-style: italic; color: var(--rose); font-size: .95rem; text-align: right; }
.dk-line { border-bottom: 1px dotted var(--card-line); padding-bottom: 2px; min-width: 0; }
.dk-name { font-family: var(--display); font-size: 1.02rem; }
.dk-list li.is-you .dk-line { border-bottom: 2px solid var(--rose); }
.dk-list li.is-you .dk-name { color: var(--rose); font-weight: 600; }
.dk-list li.is-you .dk-name::after { content: " ← you"; font-family: var(--text); font-size: .74rem; font-weight: 600; letter-spacing: .06em; }
.dk-find { text-align: center; margin: 14px 0 0; font-weight: 600; color: var(--rose); }

/* ---------- Programme, venue ---------- */
.t-dancecard .tl-i { border-bottom-color: var(--line); }
.t-dancecard .tl-time { color: var(--accent); }
.t-dancecard .tl-title { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.t-dancecard .tl-text { color: var(--muted); }
.t-dancecard .vn-c { background: rgba(255,255,255,.04); border-color: var(--line); }
.t-dancecard .vn-l { color: var(--blush); }
.t-dancecard .vn-n { font-style: italic; }
.t-dancecard .vn-a, .t-dancecard .vn-note { color: var(--muted); }
.t-dancecard .dr-text { font-family: var(--display); font-style: italic; font-size: 1.1rem; }
.t-dancecard .sw-dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line); }
.t-dancecard .gf-p { text-align: center; color: var(--muted); }
.t-dancecard .faq summary { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }

/* ---------- RSVP ---------- */
.t-dancecard .rs, .t-dancecard .rs-done { background: var(--paper); color: var(--card-ink); border: 0; box-shadow: 0 30px 50px -28px rgba(0,0,0,.6); }
.t-dancecard .rs { --bg: var(--card-bg2); --muted: var(--card-muted); --line: var(--card-line); --accent: var(--rose); }
.t-dancecard .rs-done { --muted: var(--card-muted); }
.t-dancecard .rs-btn { background: var(--bg-2); color: var(--paper); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; font-size: .82rem; }
.t-dancecard .rs-done-t { font-style: italic; color: var(--rose); }
.t-dancecard .rs-done .btn-line { color: var(--card-ink); }
.t-dancecard .demo-note { color: var(--muted); }

/* ---------- Closing ---------- */
.t-dancecard .cl-line { font-style: italic; color: var(--title); }
.t-dancecard .cl-sign { font-family: var(--script); font-size: 3rem; color: var(--blush); line-height: 1; margin: 12px auto; }
.t-dancecard .cl-tag { color: var(--accent); }

/* ---------- cameo cover & programme pages ---------- */
.dk-cameo { position: relative; width: min(300px, 76vw); margin: 34px auto 0; }
.dk-cord { position: absolute; left: 50%; top: -34px; width: 2px; height: 40px; margin-left: -1px; background: var(--accent); }
.dk-cord::before { content: ""; position: absolute; left: -6px; top: -8px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); }
.dk-oval { aspect-ratio: 4 / 5; border-radius: 50%; padding: 0; box-shadow: 0 0 0 6px var(--accent), 0 0 0 9px var(--bg), 0 0 0 11px color-mix(in srgb, var(--accent) 60%, transparent), 0 24px 40px -20px rgba(0,0,0,.7); background: var(--bg-2, var(--bg)); }
.dk-pages .dk-page { width: min(70vw, 280px); margin: 0; padding: 14px 14px 12px; border-radius: var(--radius, 14px); background: var(--card-bg2, var(--paper)); color: var(--card-ink, var(--ink)); box-shadow: 0 0 0 1px var(--card-line, var(--line)) inset, 0 18px 30px -22px rgba(0,0,0,.7); transform: scale(.94); opacity: .75; transition: transform .3s, opacity .3s; }
.dk-pages .dk-page.is-current { transform: none; opacity: 1; }
.dk-no { display: block; font-family: var(--display, serif); font-style: italic; color: var(--rose, var(--accent)); margin-bottom: 8px; }
.dk-pimg { aspect-ratio: 4 / 5; border-radius: 10px; background: color-mix(in srgb, var(--card-ink, #000) 8%, transparent); }
.dk-page figcaption { margin-top: 10px; font-size: .86rem; color: var(--card-muted, var(--muted)); text-align: center; min-height: 1.2em; }
.dk-gal .swipe-dots { color: var(--accent); }
/* gift list cards sit on the dance-card paper: use the card's own ink (the page ink is light on dark palettes) */
.t-dancecard .gl-it, .t-dancecard .gl-c { --ink: var(--card-ink); --muted: var(--card-muted); --line: var(--card-line); --bg: var(--card-bg2); color: var(--card-ink); }
.t-dancecard .dk-page .dk-no { color: color-mix(in srgb, var(--rose, var(--accent)) 68%, var(--card-ink)); }   /* readable on the paper in gold palettes */