/* ════════════════════════════════════════════════════════
   Sample · Starry Night (Leo & Maya)
   A hilltop garden wedding in Antipolo, at nightfall.
   Midnight navy, indigo and soft gold over a live sky:
   the page starts at dusk and turns to night as you scroll.
   Italiana + Great Vibes + Jost.
════════════════════════════════════════════════════════ */

.t-starry {
  --night: #0A1033;
  --night-2: #121A4A;
  --night-3: #050920;
  --indigo: #232B6B;
  --violet: #4B3F8C;
  --rose: #C9768F;
  --peach: #F2B48C;
  --gold: #E8C77E;
  --gold-2: #F6DFA6;
  --gold-deep: #B8913F;
  --star: #F5F2E9;
  --mist: #B9BEDF;
  --mist-2: #8E94C2;
  --line: rgba(232, 199, 126, .38);
  --card: rgba(14, 20, 58, .84);
  --card-solid: #10173F;

  --display: 'Italiana', 'Didot', Georgia, serif;
  --script: 'Great Vibes', 'Snell Roundhand', cursive;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --out: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --focus: #F6DFA6;
  --glow: 0 0 22px rgba(246, 223, 166, .45);
  --frame: 0 0 0 1px rgba(232, 199, 126, .55), 0 24px 60px rgba(3, 6, 22, .55);
  --stars-a: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27340%27 height=%27340%27%3E%3Ccircle cx=%27154%27 cy=%27190%27 r=%271.0%27 fill=%27%23fff%27 fill-opacity=%270.61%27/%3E%3Ccircle cx=%27173%27 cy=%27200%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.63%27/%3E%3Ccircle cx=%27214%27 cy=%27270%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.52%27/%3E%3Ccircle cx=%2731%27 cy=%27275%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.37%27/%3E%3Ccircle cx=%27334%27 cy=%27328%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.69%27/%3E%3Ccircle cx=%2754%27 cy=%275%27 r=%270.7%27 fill=%27%23fff%27 fill-opacity=%270.38%27/%3E%3Ccircle cx=%2765%27 cy=%2782%27 r=%270.4%27 fill=%27%23fff%27 fill-opacity=%270.61%27/%3E%3Ccircle cx=%27150%27 cy=%27286%27 r=%270.7%27 fill=%27%23fff%27 fill-opacity=%270.70%27/%3E%3Ccircle cx=%27170%27 cy=%27225%27 r=%270.7%27 fill=%27%23fff%27 fill-opacity=%270.50%27/%3E%3Ccircle cx=%27339%27 cy=%27339%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.74%27/%3E%3Ccircle cx=%27107%27 cy=%2778%27 r=%270.6%27 fill=%27%23fff%27 fill-opacity=%270.39%27/%3E%3Ccircle cx=%27261%27 cy=%27136%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.56%27/%3E%3Ccircle cx=%27326%27 cy=%27288%27 r=%270.4%27 fill=%27%23fff%27 fill-opacity=%270.47%27/%3E%3Ccircle cx=%27309%27 cy=%27160%27 r=%271.0%27 fill=%27%23fff%27 fill-opacity=%270.57%27/%3E%3Ccircle cx=%2725%27 cy=%27214%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.50%27/%3E%3Ccircle cx=%2730%27 cy=%27113%27 r=%271.0%27 fill=%27%23fff%27 fill-opacity=%270.77%27/%3E%3Ccircle cx=%2740%27 cy=%2784%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.38%27/%3E%3Ccircle cx=%27271%27 cy=%2760%27 r=%270.7%27 fill=%27%23fff%27 fill-opacity=%270.60%27/%3E%3Ccircle cx=%2765%27 cy=%27249%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.70%27/%3E%3Ccircle cx=%2740%27 cy=%27143%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.50%27/%3E%3Ccircle cx=%27330%27 cy=%27273%27 r=%270.6%27 fill=%27%23fff%27 fill-opacity=%270.84%27/%3E%3Ccircle cx=%2772%27 cy=%27134%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.70%27/%3E%3Ccircle cx=%2734%27 cy=%27336%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.49%27/%3E%3Ccircle cx=%27263%27 cy=%27112%27 r=%270.6%27 fill=%27%23fff%27 fill-opacity=%270.39%27/%3E%3Ccircle cx=%2731%27 cy=%27198%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.68%27/%3E%3Ccircle cx=%27126%27 cy=%27154%27 r=%271.0%27 fill=%27%23fff%27 fill-opacity=%270.62%27/%3E%3Ccircle cx=%27195%27 cy=%27295%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.43%27/%3E%3Ccircle cx=%27309%27 cy=%27278%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.45%27/%3E%3Ccircle cx=%27251%27 cy=%27320%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.87%27/%3E%3Ccircle cx=%27300%27 cy=%27205%27 r=%270.7%27 fill=%27%23fff%27 fill-opacity=%270.41%27/%3E%3Ccircle cx=%2713%27 cy=%27327%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.74%27/%3E%3Ccircle cx=%2787%27 cy=%27280%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.51%27/%3E%3Ccircle cx=%2760%27 cy=%27245%27 r=%270.4%27 fill=%27%23fff%27 fill-opacity=%270.48%27/%3E%3Ccircle cx=%27190%27 cy=%27290%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.50%27/%3E%3Ccircle cx=%27312%27 cy=%2769%27 r=%270.4%27 fill=%27%23fff%27 fill-opacity=%270.50%27/%3E%3Ccircle cx=%27152%27 cy=%2721%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.55%27/%3E%3Ccircle cx=%27195%27 cy=%2745%27 r=%270.6%27 fill=%27%23fff%27 fill-opacity=%270.84%27/%3E%3Ccircle cx=%27333%27 cy=%27223%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.67%27/%3E%3Ccircle cx=%2748%27 cy=%2712%27 r=%270.4%27 fill=%27%23fff%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%27238%27 cy=%27327%27 r=%270.4%27 fill=%27%23fff%27 fill-opacity=%270.70%27/%3E%3Ccircle cx=%27164%27 cy=%27248%27 r=%270.6%27 fill=%27%23fff%27 fill-opacity=%270.90%27/%3E%3Ccircle cx=%2726%27 cy=%27186%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%27251%27 cy=%27239%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%27120%27 cy=%27233%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.83%27/%3E%3Ccircle cx=%27142%27 cy=%27269%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.67%27/%3E%3Ccircle cx=%27212%27 cy=%27130%27 r=%270.7%27 fill=%27%23fff%27 fill-opacity=%270.68%27/%3E%3Ccircle cx=%2727%27 cy=%27217%27 r=%271.0%27 fill=%27%23fff%27 fill-opacity=%270.83%27/%3E%3Ccircle cx=%27248%27 cy=%27132%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.67%27/%3E%3Ccircle cx=%27150%27 cy=%27285%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.76%27/%3E%3Ccircle cx=%2710%27 cy=%27204%27 r=%270.7%27 fill=%27%23fff%27 fill-opacity=%270.48%27/%3E%3Ccircle cx=%27237%27 cy=%27169%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.86%27/%3E%3Ccircle cx=%2787%27 cy=%274%27 r=%270.6%27 fill=%27%23fff%27 fill-opacity=%270.72%27/%3E%3Ccircle cx=%2769%27 cy=%2758%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.71%27/%3E%3Ccircle cx=%27150%27 cy=%27303%27 r=%270.6%27 fill=%27%23fff%27 fill-opacity=%270.72%27/%3E%3Ccircle cx=%2767%27 cy=%27147%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%27299%27 cy=%27131%27 r=%270.7%27 fill=%27%23fff%27 fill-opacity=%270.52%27/%3E%3Ccircle cx=%2746%27 cy=%27169%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.82%27/%3E%3Ccircle cx=%27242%27 cy=%27323%27 r=%270.6%27 fill=%27%23fff%27 fill-opacity=%270.44%27/%3E%3Ccircle cx=%27153%27 cy=%2794%27 r=%270.5%27 fill=%27%23fff%27 fill-opacity=%270.58%27/%3E%3Ccircle cx=%27213%27 cy=%27168%27 r=%270.6%27 fill=%27%23fff%27 fill-opacity=%270.81%27/%3E%3Ccircle cx=%27334%27 cy=%27154%27 r=%270.4%27 fill=%27%23fff%27 fill-opacity=%270.37%27/%3E%3Ccircle cx=%27297%27 cy=%2714%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.66%27/%3E%3Ccircle cx=%27105%27 cy=%27269%27 r=%270.4%27 fill=%27%23fff%27 fill-opacity=%270.42%27/%3E%3Ccircle cx=%27155%27 cy=%278%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.48%27/%3E%3Ccircle cx=%2748%27 cy=%2716%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.60%27/%3E%3Ccircle cx=%27214%27 cy=%27223%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.88%27/%3E%3Ccircle cx=%27233%27 cy=%2768%27 r=%270.7%27 fill=%27%23fff%27 fill-opacity=%270.45%27/%3E%3Ccircle cx=%274%27 cy=%27161%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.45%27/%3E%3Ccircle cx=%2793%27 cy=%27118%27 r=%270.8%27 fill=%27%23fff%27 fill-opacity=%270.64%27/%3E%3Ccircle cx=%27209%27 cy=%27257%27 r=%270.6%27 fill=%27%23fff%27 fill-opacity=%270.79%27/%3E%3C/svg%3E");
  --stars-b: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27520%27 height=%27520%27%3E%3Ccircle cx=%27471%27 cy=%2745%27 r=%271.7%27 fill=%27%23fff%27 fill-opacity=%270.92%27/%3E%3Ccircle cx=%27234%27 cy=%27102%27 r=%271.7%27 fill=%27%23FFF1CF%27 fill-opacity=%270.70%27/%3E%3Ccircle cx=%27241%27 cy=%27339%27 r=%271.2%27 fill=%27%23fff%27 fill-opacity=%270.92%27/%3E%3Ccircle cx=%27111%27 cy=%27468%27 r=%271.8%27 fill=%27%23FFF1CF%27 fill-opacity=%270.99%27/%3E%3Ccircle cx=%27136%27 cy=%27373%27 r=%271.0%27 fill=%27%23fff%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%27229%27 cy=%27286%27 r=%271.6%27 fill=%27%23fff%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%27114%27 cy=%27451%27 r=%271.3%27 fill=%27%23FFF1CF%27 fill-opacity=%270.71%27/%3E%3Ccircle cx=%27357%27 cy=%27476%27 r=%271.4%27 fill=%27%23DCE4FF%27 fill-opacity=%271.00%27/%3E%3Ccircle cx=%27492%27 cy=%27256%27 r=%271.8%27 fill=%27%23fff%27 fill-opacity=%270.73%27/%3E%3Ccircle cx=%27228%27 cy=%27291%27 r=%271.7%27 fill=%27%23fff%27 fill-opacity=%270.87%27/%3E%3Ccircle cx=%27272%27 cy=%27439%27 r=%271.4%27 fill=%27%23DCE4FF%27 fill-opacity=%270.79%27/%3E%3Ccircle cx=%27496%27 cy=%27452%27 r=%271.5%27 fill=%27%23fff%27 fill-opacity=%270.79%27/%3E%3Ccircle cx=%27504%27 cy=%27273%27 r=%271.5%27 fill=%27%23fff%27 fill-opacity=%270.76%27/%3E%3Ccircle cx=%27262%27 cy=%27315%27 r=%271.0%27 fill=%27%23DCE4FF%27 fill-opacity=%270.99%27/%3E%3Ccircle cx=%27283%27 cy=%27514%27 r=%271.1%27 fill=%27%23fff%27 fill-opacity=%270.73%27/%3E%3Ccircle cx=%2734%27 cy=%27280%27 r=%271.3%27 fill=%27%23DCE4FF%27 fill-opacity=%270.99%27/%3E%3Ccircle cx=%27140%27 cy=%27246%27 r=%271.1%27 fill=%27%23DCE4FF%27 fill-opacity=%270.83%27/%3E%3Ccircle cx=%27273%27 cy=%2756%27 r=%271.3%27 fill=%27%23FFF1CF%27 fill-opacity=%270.71%27/%3E%3Ccircle cx=%2767%27 cy=%27405%27 r=%271.0%27 fill=%27%23fff%27 fill-opacity=%270.76%27/%3E%3Ccircle cx=%276%27 cy=%27148%27 r=%271.6%27 fill=%27%23DCE4FF%27 fill-opacity=%270.77%27/%3E%3Ccircle cx=%2755%27 cy=%27380%27 r=%271.1%27 fill=%27%23FFF1CF%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%27373%27 cy=%27365%27 r=%271.7%27 fill=%27%23DCE4FF%27 fill-opacity=%270.71%27/%3E%3C/svg%3E");

  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--star);
  background: var(--night);
}
.t-starry ::selection { background: var(--gold); color: var(--night); }
.t-starry .demo-bar { background: var(--night-3); color: #C9CCE6; border-bottom: 1px solid rgba(232, 199, 126, .25); }
.t-starry .demo-bar a { color: var(--gold-2); }
.t-starry main, .t-starry .foot { position: relative; z-index: 1; }

/* ═════════════════ THE SKY (signature: dusk to night) ═════════════════
   One fixed sky sits behind the whole page. starry.js sets --night from
   0 (top of the page, dusk) to 1 (night). The warm dusk fades out, the
   stars come out, the sun glow sinks, the moon rises and the city lights
   on the hills switch on.                                             */
.t-starry .sky { --night: .35; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, #050920 0%, #0A1033 55%, #18205A 100%); }
.t-starry .sky > * { position: absolute; }
.t-starry .sky-dusk { inset: 0; background: linear-gradient(180deg, #1B1F55 0%, #3C3580 32%, #8E5C93 58%, #D9839A 78%, #F2B48C 100%); opacity: calc(1 - var(--night)); }
.t-starry .sky-stars, .t-starry .sky-stars-2 { inset: -10px; }
.t-starry .sky-stars { background: var(--stars-a); opacity: calc(.12 + var(--night) * .88); }
.t-starry .sky-stars-2 { background: var(--stars-b); opacity: calc(var(--night) * 1); }
.t-starry .sky-stars-2::after { content: ""; position: absolute; inset: 0; background: var(--stars-b); background-position: 260px 130px; animation: starry-twinkle 3.4s ease-in-out infinite alternate; }
@keyframes starry-twinkle { from { opacity: .15; } to { opacity: 1; } }
.t-starry .sun { left: 50%; bottom: -36vh; width: 120vmax; height: 70vh; margin-left: -60vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 140, .75), rgba(242, 140, 120, .35) 45%, transparent 75%); opacity: calc(1 - var(--night) * 1.15); transform: translateY(calc(var(--night) * 30vh)); }
.t-starry .moon { right: 7vw; top: 13vh; width: clamp(54px, 6vw, 84px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #FFFBEF 0%, #F6EBCD 45%, #E2D3AE 100%); box-shadow: 0 0 40px 10px rgba(246, 235, 205, .35), 0 0 120px 40px rgba(246, 223, 166, .15); opacity: calc(var(--night) * 1.2 - .1); transform: translateY(calc((1 - var(--night)) * 50vh)); }
.t-starry .moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 64% 60%, rgba(200, 186, 150, .45) 0 8%, transparent 9%), radial-gradient(circle at 40% 70%, rgba(200, 186, 150, .35) 0 6%, transparent 7%), radial-gradient(circle at 55% 30%, rgba(200, 186, 150, .3) 0 5%, transparent 6%); }
.t-starry .hills { left: 0; right: 0; bottom: 0; width: 100%; height: 16vh; min-height: 90px; }
.t-starry .hills .h-back { fill: #0D1440; }
.t-starry .hills .h-front { fill: #060A24; }
.t-starry .hills .city circle { fill: #FFD58A; }
.t-starry .hills .city { opacity: calc(var(--night) * 1.4 - .4); }
@media (max-width: 760px) { .t-starry .moon { right: 5vw; top: 9vh; width: 42px; opacity: calc(var(--night) * .85 - .1); } .t-starry .hills { height: 11vh; } }

/* ── Sections (transparent, so the sky shows through) ── */
.t-starry section { position: relative; padding: clamp(100px, 12vw, 150px) 20px; text-align: center; }

/* ── Type ── */
.t-starry .kicker { display: inline-flex; align-items: center; gap: 12px; font: 600 12.5px/1.3 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.t-starry .kicker::before, .t-starry .kicker::after { content: "✦"; font-size: 10px; letter-spacing: 0; color: var(--gold-2); text-shadow: var(--glow); }
.t-starry .script-title { font: 400 clamp(52px, 8.6vw, 104px)/1.05 var(--display); letter-spacing: .01em; margin: .22em 0 .12em; color: var(--star); text-shadow: 0 0 34px rgba(246, 223, 166, .3), 0 2px 14px rgba(5, 9, 32, .55); }
.t-starry .sub { font-size: 19px; font-weight: 300; font-style: italic; color: var(--mist); }

/* ── Buttons ── */
.t-starry .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  padding: 17px 26px; border-radius: 999px;
  color: var(--gold-2); background: rgba(10, 16, 51, .4);
  border: 1px solid var(--gold);
  text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, box-shadow .3s, transform .3s var(--out);
}
.t-starry .btn:hover { background: rgba(232, 199, 126, .12); box-shadow: 0 0 26px rgba(246, 223, 166, .35); transform: translateY(-2px); }
.t-starry .btn--solid { color: var(--night); background: linear-gradient(180deg, #FBEBC3, var(--gold)); border-color: transparent; box-shadow: 0 0 22px rgba(246, 223, 166, .35); }
.t-starry .btn--solid:hover { background: linear-gradient(180deg, #FFF3D6, var(--gold-2)); box-shadow: 0 0 36px rgba(246, 223, 166, .6); }
.t-starry .btn--sm { padding: 13px 18px; font-size: 12px; }
.t-starry .btn--big { padding: 21px 32px; font-size: 14px; }
.t-starry .btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ── Progress + nav ── */
.t-starry .progress { height: 3px; background: linear-gradient(90deg, var(--rose), var(--gold-2)); box-shadow: 0 0 10px rgba(246, 223, 166, .7); }
.t-starry .nav { gap: 2px; padding: 6px 6px 6px 20px; background: rgba(10, 16, 51, .62); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(232, 199, 126, .4); border-radius: 999px; box-shadow: 0 12px 30px rgba(3, 6, 22, .35); }
.t-starry .nav-logo { font: 400 25px/1 var(--display); text-decoration: none; margin-right: 10px; color: var(--star); }
.t-starry .nav-logo span { font-family: var(--script); color: var(--gold); padding: 0 1px; }
.t-starry .nav-links a { font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding: 13px 12px; border-radius: 999px; color: var(--mist); transition: color .2s, background-color .2s; }
.t-starry .nav-links a:hover { color: var(--gold-2); background: rgba(232, 199, 126, .1); }
.t-starry .nav .btn { margin-left: 6px; }
.t-starry .nav-menu { width: 44px; height: 44px; margin-left: 8px; border: 1px solid rgba(232, 199, 126, .5); border-radius: 50%; background: rgba(10, 16, 51, .5); }
.t-starry .nav-menu span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--gold-2); transition: transform .3s var(--out); }
.t-starry .nav-menu span:first-child { top: 17px; }
.t-starry .nav-menu span:last-child  { top: 24px; }
.t-starry .nav-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.t-starry .nav-menu[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 1080px) { .t-starry .nav .btn { margin-left: auto; } }
.t-starry .menu { background: var(--stars-a), var(--stars-b), linear-gradient(180deg, #0A1033, #1B1F55); }
.t-starry .menu a { font: 400 clamp(40px, 11vw, 56px)/1.25 var(--display); text-decoration: none; color: var(--star); }
.t-starry .menu a:hover { color: var(--gold-2); text-shadow: var(--glow); }

/* ═════════════════ OPENING: stars connect into "L & M" ═════════════════ */
.t-starry .intro { background: radial-gradient(ellipse at 50% 115%, #2E2770 0%, #0A1033 55%, #050920 100%); }
.t-starry .intro::before, .t-starry .intro::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.t-starry .intro::before { background: var(--stars-a); }
.t-starry .intro::after { background: var(--stars-b); background-position: 120px 60px; animation: starry-twinkle 2.8s ease-in-out infinite alternate; }
.t-starry .intro-skip { font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); background: rgba(10, 16, 51, .55); border: 1px solid rgba(232, 199, 126, .5); border-radius: 999px; padding: 12px 16px; }
.t-starry .intro :focus-visible { outline-color: var(--gold-2); }
.t-starry .ii-col { position: relative; display: grid; grid-template-rows: auto 0fr; justify-items: center; width: min(400px, 100%); transition: grid-template-rows 1s var(--out), transform .8s var(--out); }
.t-starry .intro.s-card .ii-col { grid-template-rows: auto 1fr; }
.t-starry .const-wrap { position: relative; }
.t-starry .const { display: block; width: min(330px, 82vw); height: auto; overflow: visible; transition: width 1s var(--out); }
.t-starry .intro.s-card .const { width: min(170px, 46vw); }
.t-starry .cs { fill: #FFF8E4; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); }
.t-starry .intro.is-ready .cs { opacity: 1; transform: none; transition: opacity .6s calc(var(--k) * 110ms), transform .9s var(--spring) calc(var(--k) * 110ms); }
html.motion .t-starry .intro.is-ready .cs { animation: starry-pulse 2.4s ease-in-out calc(1.2s + var(--k) * 180ms) infinite alternate; }
@keyframes starry-pulse { to { opacity: .55; } }
.t-starry .cl { fill: none; stroke: #F6DFA6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.t-starry .intro.s-open .cl-l { stroke-dashoffset: 0; transition: stroke-dashoffset .95s cubic-bezier(.6, .1, .3, 1) .1s; }
.t-starry .intro.s-open .cl-m { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.6, .1, .3, 1) .55s; }
.t-starry .intro.s-open .cs { animation: none; opacity: 1; }
.t-starry .c-amp { font: 400 66px/1 var(--script); fill: var(--gold); opacity: 0; }
.t-starry .intro.s-open .c-amp { opacity: 1; transition: opacity .8s 1.15s; }
.t-starry .intro-open { position: absolute; inset: -20px; z-index: 5; appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; border-radius: 30px; }
.t-starry .intro.s-open .intro-open { visibility: hidden; }
.t-starry .ii-hint { margin: 26px 0 0; font: 500 12.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-2); text-align: center; transition: opacity .3s; }
.t-starry .ii-hint > span { display: inline-block; animation: wd-pulse 1.6s ease-in-out infinite; }
.t-starry .intro.s-open .ii-hint { opacity: 0; }
.t-starry .ii-shoot { position: absolute; left: 8%; top: 18%; width: 140px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #FFF8E4); opacity: 0; transform: rotate(-24deg); }
.t-starry .intro.s-open .ii-shoot { animation: starry-shoot 1.1s ease-out .3s; }
@keyframes starry-shoot { 0% { opacity: 0; transform: rotate(-24deg) translateX(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(-24deg) translateX(min(70vw, 600px)); } }
.t-starry .ii-card-wrap { min-height: 0; width: 100%; }
.t-starry .ii-card-pad { padding: 16px 4px 18px; }
.t-starry .intro-card {
  appearance: none; margin: 0; display: block; width: 100%;
  font: inherit; color: var(--star); text-align: center; cursor: default;
  background: var(--stars-b) rgba(16, 22, 64, .82); border: 1px solid rgba(232, 199, 126, .6); border-radius: 26px;
  box-shadow: 0 0 0 6px rgba(16, 22, 64, .4), 0 0 0 7px rgba(232, 199, 126, .22), 0 0 50px rgba(246, 223, 166, .18);
  padding: 0; opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity .7s var(--out) .25s, transform .9s var(--out) .25s, box-shadow .6s;
}
.t-starry .intro.s-card .intro-card { opacity: 1; transform: none; cursor: pointer; pointer-events: auto; }
.t-starry .intro-card:hover { box-shadow: 0 0 0 6px rgba(16, 22, 64, .4), 0 0 0 7px rgba(232, 199, 126, .35), 0 0 70px rgba(246, 223, 166, .3); }
.t-starry .inv-inner { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 28px 22px 24px; }
.t-starry .inv-kicker { font: 600 11.5px/1.2 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.t-starry .inv-names { font: 400 clamp(48px, min(14vw, 8vh), 62px)/1 var(--display); text-shadow: 0 0 26px rgba(246, 223, 166, .35); }
.t-starry .inv-names i { font: normal 400 .78em/1 var(--script); color: var(--gold); padding: 0 .08em; }
.t-starry .inv-date { font-size: 17px; font-weight: 500; letter-spacing: .04em; }
.t-starry .inv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.t-starry .inv-chips span { border: 1px solid rgba(232, 199, 126, .55); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; color: var(--gold-2); }
.t-starry .inv-place { font-size: 15.5px; color: var(--mist); }
.t-starry .inv-line { font: 400 27px/1.15 var(--script); color: var(--gold-2); }
.t-starry .inv-tap { margin-top: 6px; font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--night); background: linear-gradient(180deg, #FBEBC3, var(--gold)); border-radius: 999px; padding: 14px 18px; white-space: nowrap; box-shadow: 0 0 20px rgba(246, 223, 166, .4); }
html.motion .t-starry .intro.s-card .inv-tap { animation: wd-pulse 1.5s ease-in-out 1s infinite; }
.t-starry .intro.s-leave { opacity: 0; pointer-events: none; transition: opacity .75s ease .1s; }
.t-starry .intro.s-leave .ii-col { transform: translateY(-46px) scale(1.04); }
@media (max-height: 740px) {
  .t-starry .intro.s-card .const { width: min(130px, 36vw); }
  .t-starry .inv-inner { gap: 5px; padding: 22px 18px 20px; }
  .t-starry .inv-line { font-size: 23px; }
  .t-starry .ii-card-pad { padding-top: 10px; }
}

/* ═════════════════ HERO ═════════════════ */
.t-starry .hero { padding: 124px 20px 96px; display: flex; flex-direction: column; justify-content: center; overflow: clip; }
.t-starry .hero-grid { position: relative; z-index: 2; width: min(1200px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 56px; text-align: left; }
.t-starry .hero-names { font: 400 clamp(84px, min(11vw, 18vh), 168px)/.95 var(--display); margin: 18px 0 28px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .16em; text-shadow: 0 0 44px rgba(246, 223, 166, .32); }
.t-starry .hero-names .w { display: inline-block; padding: 0 .06em .1em .02em; }
.t-starry .hero-names .amp { font-family: var(--script); color: var(--gold); font-size: .66em; }
.t-starry .hero-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.t-starry .hero-facts li { display: flex; flex-direction: column; line-height: 1.15; padding: 11px 18px 10px; border-radius: 16px; background: rgba(10, 16, 51, .45); border: 1px solid rgba(232, 199, 126, .4); }
.t-starry .hero-facts b { font: 300 24px/1.2 var(--sans); letter-spacing: .02em; color: var(--gold-2); }
.t-starry .hero-facts li > span { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.t-starry .hero-place { margin-top: 22px; font-size: 18px; display: flex; align-items: center; gap: 9px; color: var(--star); }
.t-starry .hero-place svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.t-starry .hero-tag { margin-top: 6px; font: 400 34px/1.2 var(--script); color: var(--gold-2); }
.t-starry .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.t-starry .hero-art { position: relative; justify-self: center; width: min(420px, 100%); }
.t-starry .moon-wrap { position: relative; transform: translateY(calc(var(--p, 0) * 70px)) scale(calc(1 - var(--p, 0) * .06)); will-change: transform; }
.t-starry .moon-photo { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(246, 223, 166, .8), 0 0 0 10px rgba(10, 16, 51, .55), 0 0 0 11px rgba(232, 199, 126, .35), 0 0 70px 14px rgba(246, 223, 166, .22), 0 0 160px rgba(201, 118, 143, .35); }
.t-starry .moon-photo img { width: 100%; height: 100%; object-fit: cover; }
.t-starry .orbit { position: absolute; inset: -11%; border-radius: 50%; border: 1px dashed rgba(232, 199, 126, .45); animation: wd-spin 46s linear infinite; }
.t-starry .orbit::after { content: "✦"; position: absolute; top: 12%; left: 12%; font-size: 18px; line-height: 1; color: var(--gold-2); text-shadow: var(--glow); transform: translate(-50%, -50%); }
.t-starry .f-sticker { top: -9%; left: -15%; width: 132px; }
.t-starry .f-sticker svg { width: 100%; display: block; animation: wd-spin 26s linear infinite; }
.t-starry .f-tag { bottom: 6%; right: -12%; }
.t-starry .tag { display: inline-block; font: 400 30px/1 var(--script); color: var(--night); background: linear-gradient(180deg, #FBEBC3, var(--gold)); border-radius: 999px; padding: 9px 20px 12px; transform: rotate(-8deg); box-shadow: 0 0 26px rgba(246, 223, 166, .45); }
.t-starry .f-moon { top: 4%; right: -6%; width: 64px; }
.t-starry .f-star { bottom: 24%; left: -14%; width: 42px; }
.t-starry .f-comet { top: 46%; right: -20%; width: 96px; }
.t-starry .f-moon svg, .t-starry .f-star svg, .t-starry .f-comet svg { display: block; width: 100%; height: auto; overflow: visible; }
.t-starry .f-dot { bottom: -4%; left: 16%; width: 14px; height: 14px; }
.t-starry .f-dot::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: #FFF8E4; box-shadow: 0 0 14px 4px rgba(246, 223, 166, .6); animation: starry-twinkle 2s ease-in-out infinite alternate; }
.t-starry .scroll-cue { position: absolute; left: 50%; bottom: 24px; z-index: 3; width: 26px; height: 42px; margin-left: -13px; border: 1px solid var(--gold); border-radius: 20px; }
.t-starry .scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--gold-2); box-shadow: var(--glow); animation: starry-cue 1.6s var(--out) infinite; }
@keyframes starry-cue { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } }
@media (max-width: 860px) {
  .t-starry .hero { padding-top: 106px; }
  .t-starry .hero-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .t-starry .hero-names { justify-content: center; margin: 12px 0 22px; font-size: clamp(70px, 21vw, 130px); }
  .t-starry .hero-facts, .t-starry .hero-ctas, .t-starry .hero-place { justify-content: center; }
  .t-starry .hero-facts { gap: 8px; flex-wrap: nowrap; }
  .t-starry .hero-facts li { padding: 10px 8px 9px; flex: 1 1 0; align-items: center; }
  .t-starry .hero-facts b { font-size: 21px; }
  .t-starry .hero-facts li > span { font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
  .t-starry .hero-place { font-size: 16.5px; }
  .t-starry .hero-tag { font-size: 30px; }
  .t-starry .hero-art { width: min(260px, 64vw); margin: 40px auto 28px; }
  .t-starry .f-sticker { width: 96px; left: -22%; }
  .t-starry .f-tag { right: -20%; }
  .t-starry .tag { font-size: 24px; padding: 7px 15px 10px; }
  .t-starry .f-comet { width: 66px; right: -24%; }
  .t-starry .f-moon { width: 46px; right: -12%; }
  .t-starry .f-star { width: 32px; left: -18%; }
  .t-starry .scroll-cue { display: none; }
}

/* ═════════════════ RIBBONS ═════════════════ */
.t-starry .ribbons { height: 140px; margin: -30px 0 -50px; }
.t-starry .ribbon { padding: 13px 0 12px; }
.t-starry .ribbon--a { top: 28px; z-index: 2; background: linear-gradient(90deg, #B8913F, #F6DFA6 50%, #B8913F); color: var(--night); transform: rotate(-2.5deg); box-shadow: 0 0 30px rgba(246, 223, 166, .35); }
.t-starry .ribbon--b { top: 66px; background: rgba(18, 26, 74, .9); color: var(--gold-2); border-block: 1px solid rgba(232, 199, 126, .55); transform: rotate(2deg); }
.t-starry .ribbon--a span { font: 600 15px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.t-starry .ribbon--b span { font: 400 30px/1 var(--script); }

/* ═════════════════ COUNTDOWN ═════════════════ */
.t-starry .count-grid { gap: 18px; width: min(920px, 100%); margin: 40px auto 0; }
.t-starry .count-card { padding: 28px 8px 24px; display: flex; flex-direction: column; align-items: center; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: inset 0 0 40px rgba(246, 223, 166, .05), 0 20px 50px rgba(3, 6, 22, .35); }
.t-starry .count-card .num { font: 200 clamp(54px, 8.6vw, 100px)/1 var(--sans); letter-spacing: -.01em; color: var(--gold-2); text-shadow: 0 0 28px rgba(246, 223, 166, .5); font-variant-numeric: lining-nums tabular-nums; }
.t-starry .count-card .lbl { margin-top: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--mist); }
.t-starry .count-done { grid-column: 1 / -1; font: 400 clamp(56px, 9vw, 100px)/1.1 var(--script); color: var(--gold-2); text-shadow: var(--glow); }
@media (max-width: 640px) { .t-starry .count-grid { gap: 14px; } }

/* ═════════════════ PINNED STORY (night colors) ═════════════════ */
.t-starry .story { padding-block: clamp(90px, 10vw, 130px); }
html.motion .t-starry .story { padding: 0; }
html.motion .t-starry .story::before { content: ""; position: absolute; inset: 0; background: var(--bg, #0B1236); opacity: .8; }
html.motion .t-starry .story-sticky { z-index: 1; }
.t-starry .panel-intro-inner { max-width: 660px; margin: 0 auto; }
.t-starry .panel-intro-inner > p:not(.kicker) { font-size: 19px; line-height: 1.75; margin-top: 16px; color: var(--mist); font-weight: 300; }
.t-starry .panel-photo { width: min(360px, 76vw); box-shadow: 0 0 0 1px rgba(246, 223, 166, .7), 0 0 0 9px rgba(10, 16, 51, .6), 0 0 0 10px rgba(232, 199, 126, .3), 0 0 60px rgba(246, 223, 166, .22); }
.t-starry .shape-moon   { aspect-ratio: 1; border-radius: 50%; }
.t-starry .shape-arch   { aspect-ratio: 3 / 4; border-radius: 999px 999px 18px 18px; }
.t-starry .shape-window { aspect-ratio: 4 / 5; border-radius: 28px; }
.t-starry .step { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.t-starry .script-word { font: 400 clamp(84px, 12vw, 160px)/1.15 var(--script); margin: 6px 0 0; color: var(--gold-2); text-shadow: 0 0 34px rgba(246, 223, 166, .45); }
.t-starry .cap { font-size: 19px; font-weight: 300; font-style: italic; color: var(--mist); }
html.motion .t-starry .panel--intro .script-title { font-size: clamp(52px, min(8vw, 11vh), 104px); }
html.motion .t-starry .panel-intro-inner > p:not(.kicker) { font-size: clamp(16px, 2.3vh, 19px); max-width: 600px; margin-inline: auto; }
html.motion .t-starry .panel-photo { width: clamp(240px, 28vw, 380px); }
.t-starry .keep-going { margin-top: 28px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.t-starry .keep-going svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
html.motion .t-starry .story-progress { height: 2px; background: rgba(185, 190, 223, .2); }
html.motion .t-starry .sp-bar { background: var(--gold-2); box-shadow: 0 0 10px rgba(246, 223, 166, .8); }
html.motion .t-starry .sp-heart { font-size: 20px; color: var(--gold-2); text-shadow: var(--glow); }
@media (max-width: 760px) {
  html.motion .t-starry .panel-photo { width: min(230px, 58vw); }
  html.motion .t-starry .panel--intro .script-title { font-size: clamp(50px, 14vw, 80px); }
  html.motion .t-starry .panel-intro-inner > p:not(.kicker) { font-size: 16.5px; line-height: 1.7; }
  .t-starry .script-word { font-size: clamp(76px, 21vw, 110px); }
}

/* ═════════════════ VENUE: one ticket + a night map ═════════════════ */
.t-starry .ticket {
  width: min(1040px, 100%); margin: 46px auto 0;
  display: grid; grid-template-columns: 1fr 1.35fr .8fr;
  background: var(--stars-a) rgba(12, 18, 52, .9); border: 1px solid rgba(232, 199, 126, .55); border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 6px rgba(12, 18, 52, .35), 0 30px 70px rgba(3, 6, 22, .5), 0 0 60px rgba(246, 223, 166, .08);
  text-align: left;
}
.t-starry .ticket-photo { position: relative; min-height: 340px; }
.t-starry .ticket-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-starry .ticket-badge { position: absolute; left: 16px; top: 16px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--night); background: linear-gradient(180deg, #FBEBC3, var(--gold)); border-radius: 999px; padding: 10px 14px; box-shadow: 0 0 18px rgba(246, 223, 166, .5); }
.t-starry .ticket-body { padding: 30px 30px 28px; display: flex; flex-direction: column; gap: 20px; }
.t-starry .ticket small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.t-starry .ticket b { font-size: 19px; font-weight: 500; line-height: 1.3; }
.t-starry .t-route { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.t-starry .t-route .t-to b { font: 400 30px/1.1 var(--display); color: var(--gold-2); }
.t-starry .t-path { width: 60px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 3 4; overflow: visible; }
.t-starry .t-path circle { fill: #FFF8E4; stroke: none; }
.t-starry .t-to { text-align: right; }
.t-starry .t-grid { display: grid; grid-template-columns: repeat(4, auto); gap: 12px 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.t-starry .t-grid b { font-size: 17px; }
.t-starry .t-note { font-size: 15.5px; font-weight: 300; font-style: italic; color: var(--mist); }
.t-starry .ticket-stub { position: relative; padding: 28px 22px; border-left: 2px dotted rgba(232, 199, 126, .6); display: flex; flex-direction: column; justify-content: center; gap: 10px; background: linear-gradient(180deg, rgba(232, 199, 126, .08), rgba(232, 199, 126, .02)); }
.t-starry .ticket-stub b { font: 400 34px/1.05 var(--script); color: var(--gold-2); }
.t-starry .starcode { height: 30px; margin: 6px 0; background: radial-gradient(circle, #FFF8E4 0 1.6px, transparent 2.2px) 0 4px / 12px 11px, radial-gradient(circle, rgba(246, 223, 166, .7) 0 1px, transparent 1.6px) 6px 0 / 12px 11px; filter: drop-shadow(0 0 3px rgba(246, 223, 166, .8)); }
.t-starry .map-block { width: min(1040px, 100%); margin: 50px auto 0; }
.t-starry .map-reveal { border-radius: 22px; border: 1px solid rgba(232, 199, 126, .5); background: var(--card-solid); padding: 8px; box-shadow: 0 24px 60px rgba(3, 6, 22, .45); }
.t-starry .map-reveal iframe { border-radius: 15px; filter: invert(.92) hue-rotate(185deg) saturate(.55) brightness(.92) contrast(.95); }
.t-starry .map-note { margin-top: 12px; font-size: 14.5px; font-style: italic; font-weight: 300; color: var(--mist); }
@media (max-width: 860px) {
  .t-starry .ticket { grid-template-columns: 1fr; }
  .t-starry .ticket-photo { min-height: 280px; }
  .t-starry .t-grid { grid-template-columns: 1fr 1fr; }
  .t-starry .ticket-stub { border-left: 0; border-top: 2px dotted rgba(232, 199, 126, .6); text-align: center; align-items: center; }
  .t-starry .starcode { width: 100%; }
  .t-starry .ticket-body { padding: 24px 20px; }
  .t-starry .t-route .t-to b { font-size: 26px; }
}
@media (max-width: 520px) {
  .t-starry .t-route { flex-direction: column; align-items: flex-start; gap: 10px; }
  .t-starry .t-path { display: none; }
  .t-starry .t-to { text-align: left; }
}

/* ═════════════════ SCHEDULE (a glowing line) ═════════════════ */
.t-starry .tl { width: min(920px, 100%); margin: 50px auto 0; gap: 40px; padding: 10px 0; }
.t-starry .tl-line { filter: drop-shadow(0 0 5px rgba(246, 223, 166, .75)); }
.t-starry .tl-track { stroke: rgba(232, 199, 126, .22); stroke-width: 1.5; stroke-dasharray: 2 8; }
.t-starry .tl-draw { stroke: var(--gold-2); stroke-width: 2.4; }
.t-starry .tl-item { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; box-shadow: 0 18px 44px rgba(3, 6, 22, .35); }
.t-starry .tl-time { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.t-starry .tl-item h3 { font: 400 30px/1.15 var(--display); color: var(--star); }
.t-starry .tl-item p { margin-top: 4px; color: var(--mist); font-size: 16.5px; font-weight: 300; }

/* ═════════════════ NOTES (flip cards) ═════════════════ */
.t-starry .flip-grid { width: min(1100px, 100%); margin: 42px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.t-starry .flip { color: var(--star); transform: rotate(var(--r, 0deg)); transition: transform .45s var(--spring); }
.t-starry .flip:hover, html.motion .t-starry .flip[data-rv].in:hover { transform: rotate(0deg) translateY(-6px); }
.t-starry .face { border-radius: 22px; padding: 30px 24px; min-height: 300px; gap: 12px; }
.t-starry .front { background: var(--stars-b) var(--c); border: 1px solid rgba(232, 199, 126, .55); align-items: center; justify-content: center; text-align: center; box-shadow: inset 0 0 50px rgba(246, 223, 166, .07), 0 22px 50px rgba(3, 6, 22, .45); }
.t-starry .back { background: linear-gradient(180deg, #FBF6EA, #F1E7D0); color: #2A2F5C; font-size: 17px; line-height: 1.6; justify-content: center; box-shadow: 0 0 0 1px var(--gold), 0 22px 50px rgba(3, 6, 22, .45); }
.t-starry .f-icon { width: 64px; height: 64px; fill: none; stroke: var(--gold-2); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(246, 223, 166, .6)); }
.t-starry .f-title { font: 400 36px/1.1 var(--display); }
.t-starry .f-hint { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); border: 1px solid rgba(232, 199, 126, .6); border-radius: 999px; padding: 8px 13px; }
.t-starry .b-title { font: 400 38px/1.1 var(--script); color: var(--night); margin-bottom: 4px; }
@media (max-width: 900px) { .t-starry .flip-grid { grid-template-columns: 1fr; max-width: 500px; } .t-starry .face { min-height: 240px; } }

/* ═════════════════ EXTRA: find your table ═════════════════ */
.t-starry .tables-box { width: min(980px, 100%); margin: 42px auto 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; border-radius: 26px; overflow: hidden; border: 1px solid rgba(232, 199, 126, .5); background: var(--card); box-shadow: 0 30px 70px rgba(3, 6, 22, .45); text-align: left; }
.t-starry .tmap { position: relative; padding: 22px; background: radial-gradient(ellipse at 50% 120%, rgba(75, 63, 140, .55), transparent 70%), var(--stars-a) rgba(5, 9, 32, .55); border-right: 1px solid var(--line); }
.t-starry .tmap svg { display: block; width: 100%; height: auto; overflow: visible; }
.t-starry .tmap .t-lines { fill: none; stroke: rgba(232, 199, 126, .28); stroke-width: 1; stroke-dasharray: 3 5; }
.t-starry .ts-dot { fill: #FFF8E4; transform-box: fill-box; transform-origin: center; transition: transform .6s var(--spring), fill .3s; }
.t-starry .ts-glow { fill: url(#ts-glow); opacity: .35; transition: opacity .5s; }
.t-starry .ts text { font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; fill: var(--mist); text-anchor: middle; transition: fill .3s; }
.t-starry .ts.is-lit .ts-dot { transform: scale(2); fill: var(--gold-2); }
.t-starry .ts.is-lit .ts-glow { opacity: 1; }
.t-starry .ts.is-lit text { fill: var(--gold-2); }
.t-starry .tfind { padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.t-starry .tfind label { font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.t-starry .tfind input { width: 100%; border: 1px solid rgba(232, 199, 126, .55); background: rgba(5, 9, 32, .5); color: var(--star); border-radius: 14px; padding: 14px 16px; font-size: 18px; }
.t-starry .tfind input::placeholder { color: var(--mist-2); }
.t-starry .tfind input:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(246, 223, 166, .2), 0 0 24px rgba(246, 223, 166, .2); }
.t-starry .tf-result { min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: 16px; font-weight: 300; font-style: italic; color: var(--mist); }
.t-starry .tf-result.is-found { font-style: normal; }
.t-starry .tf-result.is-found span::after { content: ", your table is"; }
.t-starry .tf-result.is-found b { font: 400 54px/1.05 var(--display); color: var(--gold-2); text-shadow: 0 0 26px rgba(246, 223, 166, .55); }
html.motion .t-starry .tf-result.is-found b { animation: wd-bump .55s var(--spring); }
.t-starry .tf-note { font-size: 14px; font-weight: 300; color: var(--mist-2); }
@media (max-width: 760px) { .t-starry .tables-box { grid-template-columns: 1fr; } .t-starry .tmap { border-right: 0; border-bottom: 1px solid var(--line); } .t-starry .tfind { padding: 24px 20px 26px; } }

/* ═════════════════ EXTRA: photo gallery ═════════════════ */
.t-starry .gallery { width: min(1100px, 100%); margin: 42px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 16px; }
.t-starry .g-item { position: relative; display: block; overflow: hidden; border-radius: 18px; border: 1px solid rgba(232, 199, 126, .45); box-shadow: 0 18px 40px rgba(3, 6, 22, .4); cursor: zoom-in; }
.t-starry .g-item.tall { grid-row: span 2; }
.t-starry .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--out), filter .4s; }
.t-starry .g-item:hover img { transform: scale(1.06); filter: brightness(1.08); }
.t-starry .g-item::after { content: "✦"; position: absolute; right: 12px; bottom: 10px; font-size: 14px; color: var(--gold-2); text-shadow: var(--glow); opacity: 0; transition: opacity .3s; }
.t-starry .g-item:hover::after, .t-starry .g-item:focus-visible::after { opacity: 1; }
.t-starry .g-hint { margin-top: 18px; font-size: 14.5px; font-style: italic; font-weight: 300; color: var(--mist); }
@media (max-width: 760px) { .t-starry .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; } .t-starry .g-item { border-radius: 14px; } }

/* ═════════════════ RSVP ═════════════════ */
.t-starry .rsvp { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 60px; padding-inline: max(20px, calc((100% - 1140px) / 2)); text-align: left; }
.t-starry .rsvp-art { position: relative; justify-self: center; width: min(400px, 100%); }
.t-starry .rsvp-moon { aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(246, 223, 166, .8), 0 0 0 10px rgba(10, 16, 51, .55), 0 0 0 11px rgba(232, 199, 126, .35), 0 0 80px 10px rgba(246, 223, 166, .2); transform: rotate(calc(var(--p, 0) * 10deg - 5deg)); }
.t-starry .rsvp-moon img { width: 100%; height: 100%; object-fit: cover; }
.t-starry .rsvp-chip { position: absolute; font: 400 28px/1 var(--script); color: var(--gold-2); background: rgba(10, 16, 51, .8); border: 1px solid rgba(232, 199, 126, .55); border-radius: 999px; padding: 9px 18px 12px; box-shadow: 0 0 24px rgba(246, 223, 166, .2); }
.t-starry .chip-1 { top: 4%; right: -6%; transform: rotate(8deg); animation: wd-bob 3.6s ease-in-out infinite alternate; }
.t-starry .chip-2 { bottom: 6%; left: -8%; color: var(--night); background: linear-gradient(180deg, #FBEBC3, var(--gold)); border-color: transparent; transform: rotate(-7deg); animation: wd-bob 4.4s ease-in-out infinite alternate-reverse; }
.t-starry .rsvp-copy .kicker { justify-content: flex-start; }
.t-starry .rsvp-copy > p:not(.kicker) { font-size: 18.5px; font-weight: 300; max-width: 520px; color: var(--mist); }
.t-starry .deadline { margin-top: 12px; color: var(--star) !important; font-weight: 500 !important; }
.t-starry .rsvp-copy .btn--big { margin-top: 26px; }
.t-starry .variant-note { margin-top: 24px; max-width: 520px; font-size: 15px; line-height: 1.55; font-weight: 300; color: var(--mist); border: 1px dashed rgba(232, 199, 126, .5); border-radius: 14px; padding: 12px 16px; }
.t-starry .variant-note a { color: var(--gold-2); font-weight: 500; }
.t-starry .variant-note .solo-only { display: none; }
html.is-solo .t-starry .variant-note .solo-only { display: inline; }
html.is-solo .t-starry .variant-note .plus-only { display: none; }
@media (max-width: 860px) { .t-starry .rsvp { grid-template-columns: 1fr; text-align: center; gap: 34px; } .t-starry .rsvp-copy .kicker { justify-content: center; } .t-starry .rsvp-art { width: min(280px, 72vw); } .t-starry .rsvp-copy > p, .t-starry .variant-note { margin-inline: auto; } }

/* ═════════════════ CONTACT ═════════════════ */
.t-starry .contact-grid { width: min(840px, 100%); margin: 36px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; perspective: 900px; }
.t-starry .person-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 22px 50px rgba(3, 6, 22, .4); padding: 26px 22px 28px; display: flex; flex-direction: column; align-items: center; gap: 13px; transform-style: preserve-3d; }
.t-starry .pc-name { font: 400 58px/1.1 var(--script); color: var(--gold-2); text-shadow: var(--glow); }
.t-starry .person-card .btn { width: 100%; max-width: 290px; }
@media (max-width: 640px) { .t-starry .contact-grid { grid-template-columns: 1fr; } }

/* ═════════════════ FOOTER ═════════════════ */
.t-starry .foot { text-align: center; padding: 120px 20px calc(110px + 12vh); background: linear-gradient(180deg, transparent, rgba(5, 9, 32, .7) 30%); }
.t-starry .foot-photo { width: min(210px, 52vw); aspect-ratio: 1; margin: 0 auto 32px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(246, 223, 166, .8), 0 0 0 8px rgba(10, 16, 51, .6), 0 0 0 9px rgba(232, 199, 126, .35), 0 0 60px rgba(246, 223, 166, .25); }
.t-starry .foot-photo img { width: 100%; height: 100%; object-fit: cover; }
.t-starry .foot-line { font-size: 19px; font-weight: 300; font-style: italic; color: var(--mist); }
.t-starry .foot-love { margin-top: 22px; font: 400 40px/1 var(--script); color: var(--gold-2); }
.t-starry .foot-names { font: 400 clamp(68px, 12vw, 160px)/1.1 var(--display); padding: 0 .1em .08em; background: linear-gradient(90deg, #F6DFA6, #FFF8E4, #E8C77E); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(246, 223, 166, .35)); }
.t-starry .foot-meta { margin-top: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--mist); }
.t-starry .try-box { width: min(760px, 100%); margin: 60px auto 0; padding: 24px 22px 26px; border: 1px dashed rgba(232, 199, 126, .45); border-radius: 22px; background: rgba(5, 9, 32, .45); }
.t-starry .try-box h2 { font-size: 12.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.t-starry .try-box p { margin-top: 8px; font-size: 16px; font-weight: 300; color: var(--mist); }
.t-starry .try-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.t-starry .try-links a { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--gold-2); border: 1px solid rgba(232, 199, 126, .55); border-radius: 999px; padding: 12px 16px; transition: background-color .25s, color .25s; }
.t-starry .try-links a:hover { background: var(--gold-2); color: var(--night); }
.t-starry .disclaimer { max-width: 640px; margin: 30px auto 0; font-size: 14px; line-height: 1.65; font-weight: 300; color: rgba(185, 190, 223, .8); }
.t-starry .disclaimer a { color: var(--gold-2); }

/* ═════════════════ MUSIC ═════════════════ */
.t-starry .music-btn { background: var(--card-solid); border: 1px solid var(--gold); box-shadow: 0 0 22px rgba(246, 223, 166, .3), 0 10px 24px rgba(3, 6, 22, .4); transition: transform .3s var(--spring), box-shadow .3s; }
.t-starry .music-btn:hover { transform: scale(1.06); box-shadow: 0 0 32px rgba(246, 223, 166, .5), 0 10px 24px rgba(3, 6, 22, .4); }
.t-starry .md-vinyl  { fill: #070B24; }
.t-starry .md-groove { fill: none; stroke: rgba(246, 223, 166, .2); stroke-width: 1; }
.t-starry .md-shine  { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; stroke-linecap: round; }
.t-starry .md-label  { fill: var(--gold-2); }
.t-starry .md-heart  { fill: var(--night); }
.t-starry .music-badge { background: var(--gold-2); border: 1px solid var(--night); }
.t-starry .music-badge svg { fill: var(--night); }
.t-starry .music-pill { padding: 10px 16px 11px; background: rgba(10, 16, 51, .9); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 24px rgba(3, 6, 22, .4); }
.t-starry .music-pill small { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.t-starry .music-pill span { font-size: 15px; font-style: italic; color: var(--star); }

/* ═════════════════ DIALOGS + TOAST ═════════════════ */
.t-starry .wd-dialog::backdrop { background: rgba(3, 6, 22, .7); }
.t-starry .dlg-card { background: var(--stars-b) var(--card-solid); border: 1px solid rgba(232, 199, 126, .6); border-radius: 26px; box-shadow: 0 0 60px rgba(246, 223, 166, .12), 0 40px 80px rgba(0, 0, 0, .5); padding: 46px 28px 28px; text-align: center; color: var(--star); }
.t-starry .dlg-close { border: 1px solid rgba(232, 199, 126, .6); background: rgba(10, 16, 51, .8); }
.t-starry .dlg-close svg { fill: none; stroke: var(--gold-2); stroke-width: 2; }
.t-starry .dlg-title { font: 400 50px/1.1 var(--script); color: var(--gold-2); text-shadow: var(--glow); }
.t-starry .dlg-sub { font-size: 15px; font-weight: 300; font-style: italic; color: var(--mist); margin: 4px 0 20px; }
.t-starry .rsvp-form { display: flex; flex-direction: column; gap: 16px; }
.t-starry .field > span, .t-starry .field > legend { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); padding: 0; }
.t-starry fieldset.field { border: 0; margin: 0; padding: 0; }
.t-starry .rsvp-form input[type="text"], .t-starry .rsvp-form textarea { border: 1px solid rgba(232, 199, 126, .45); background: rgba(5, 9, 32, .55); border-radius: 12px; padding: 11px 14px; font-size: 17px; color: var(--star); }
.t-starry .rsvp-form input::placeholder, .t-starry .rsvp-form textarea::placeholder { color: var(--mist-2); }
.t-starry .rsvp-form textarea { min-height: 70px; resize: vertical; }
.t-starry .rsvp-form input[type="text"]:focus, .t-starry .rsvp-form textarea:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(246, 223, 166, .18); }
.t-starry .choice label > span { display: inline-block; border: 1px solid rgba(232, 199, 126, .6); border-radius: 999px; padding: 10px 16px; font-size: 15px; color: var(--star); transition: background-color .2s, color .2s; }
.t-starry .choice input:checked + span { background: linear-gradient(180deg, #FBEBC3, var(--gold)); color: var(--night); border-color: transparent; }
.t-starry .choice input:focus-visible + span { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.t-starry .form-note { font-size: 13.5px; font-weight: 300; font-style: italic; color: var(--mist); }
.t-starry .rsvp-done:focus { outline: none; }
.t-starry .rsvp-done p { color: var(--mist); margin-top: 8px; }
.t-starry .rsvp-done .sample-line { margin: 20px 0 22px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(232, 199, 126, .55); font-size: 15px; color: var(--star); }
.t-starry .lightbox .dlg-card { padding: 10px; }
.t-starry .lightbox img { border-radius: 18px; }
.t-starry .toast { background: var(--card-solid); color: var(--star); border: 1px solid var(--gold); border-radius: 16px; box-shadow: 0 0 30px rgba(246, 223, 166, .2); font-family: var(--sans); }