@font-face { font-family: "Josefin Sans"; src: url("../fonts/celestial/josefin-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/celestial/josefin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("../fonts/celestial/greatvibes-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* CELESTIAL — night weddings, "starry night" debuts, New Year's Eve, anniversaries.
   Signature idea: written in the stars. A night sky; tap the moon and a constellation draws itself, then
   the page opens under a band of moon phases. Inspired by the navy-and-gold "Milky Way" templates.
   Type: Josefin Sans · Great Vibes */
:root { --bg: #0f1838; --paper: #17224a; --ink: #f2ecdc; --muted: #b8bdd6; --line: rgba(242, 236, 220, .16);
  --accent: #d8b76a; --accent-ink: #0f1838; --star: #fff6d6;
  --display: "Josefin Sans", system-ui, sans-serif; --script: "Great Vibes", cursive; --text: "Josefin Sans", system-ui, sans-serif; --radius: 18px; }
body { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--bg) 70%, #3a4a8a), var(--bg) 60%) fixed; background-color: var(--bg); color: var(--ink); font-weight: 300; }
.cl-stars { position: absolute; inset: 0; pointer-events: none; max-width: none !important;
  background-image: radial-gradient(1.2px 1.2px at 10% 20%, var(--star) 50%, transparent 51%), radial-gradient(1px 1px at 30% 70%, var(--star) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 55% 15%, var(--accent) 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 45%, var(--star) 50%, transparent 51%), radial-gradient(1.3px 1.3px at 90% 80%, var(--star) 50%, transparent 51%), radial-gradient(1px 1px at 45% 90%, var(--accent) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 85% 10%, var(--star) 50%, transparent 51%), radial-gradient(1px 1px at 20% 45%, var(--star) 50%, transparent 51%), radial-gradient(1px 1px at 65% 60%, var(--star) 50%, transparent 51%);
  background-size: 260px 260px; animation: twinkle 4s ease-in-out infinite alternate; }
.cl-intro { --intro-ms: 1800; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--bg); transition: opacity .7s ease 1.1s, visibility 0s linear 1.8s; }
.cl-const { width: min(300px, 80vw); }
.cl-const polyline { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.3s ease; }
.cl-const circle { fill: var(--star); }
.is-opening .cl-const polyline { stroke-dashoffset: 0; }
.cl-moon { width: 84px; height: 84px; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 38% 36%, #fffbe8, #f2e2b0 60%, #d8c07a); box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 60%, transparent), inset -16px -6px 0 rgba(0,0,0,.08); animation: seal-breathe 3s ease-in-out infinite; }
.cl-names { font: 2.6rem/1.1 var(--script); color: var(--ink); text-align: center; margin: 6px 0 0; display: flex; flex-direction: column; padding: 0 20px; }
.cl-names .env-for { font-family: var(--text); }
.cl-intro .intro-hint { color: var(--muted); letter-spacing: .2em; text-transform: uppercase; font-size: .7rem; }
.t-celestial .sh-k { color: var(--accent); letter-spacing: .3em; font-weight: 600; }
.t-celestial .sh-t { font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-size: clamp(1.6rem, 7vw, 2.4rem); }
.t-celestial .sh-t::after { content: "✦ ✧ ✦"; display: block; font-size: .8rem; letter-spacing: .4em; color: var(--accent); margin-top: 12px; }
.t-celestial .s-hero { position: relative; overflow: hidden; }
.t-celestial .hero-in { position: relative; }
.cl-phases { display: flex; justify-content: center; gap: 14px; margin-bottom: 24px; }
.cl-phases i { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cl-phases i:nth-child(1) { box-shadow: inset 14px 0 0 0 var(--bg); } .cl-phases i:nth-child(2) { box-shadow: inset 8px 0 0 0 var(--bg); }
.cl-phases i:nth-child(4) { box-shadow: inset -8px 0 0 0 var(--bg); } .cl-phases i:nth-child(5) { box-shadow: inset -14px 0 0 0 var(--bg); }
.t-celestial .hero-guest { color: var(--muted); }
.t-celestial .hero-k { font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: .72rem; color: var(--accent); }
.t-celestial .hero-t { display: flex; flex-direction: column; align-items: center; font: 4rem/1 var(--script); font-size: clamp(3.4rem, 17vw, 5.6rem); color: var(--ink); }
.t-celestial .hero-t .amp { font-family: var(--text); font-style: normal; font-weight: 300; font-size: .35em; letter-spacing: .3em; color: var(--accent); margin: 8px 0; }
.t-celestial .hero-line { color: var(--muted); max-width: 22em; margin: 18px auto; }
.t-celestial .hero-date { font-weight: 600; letter-spacing: .24em; text-transform: uppercase; font-size: .9rem; margin-bottom: 2px; }
.t-celestial .hero-place { color: var(--muted); letter-spacing: .1em; }
.t-celestial .hero-cta { background: var(--accent); color: var(--bg); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; }
.t-celestial .cd-u { border: 1px solid var(--line); border-radius: 50%; aspect-ratio: 1; display: grid; place-content: center; }
.t-celestial .cd-u b { font-weight: 300; color: var(--ink); font-size: clamp(1.4rem, 7vw, 2.2rem); }
.t-celestial .cd-u span { color: var(--muted); font-size: .66rem; }
.t-celestial .btn-line { border-color: var(--accent); color: var(--accent); }
.t-celestial .btn-line:hover { background: var(--accent); color: var(--bg); }
.t-celestial .tl-i { border-color: var(--line); }
.t-celestial .tl-time { color: var(--accent); font-weight: 600; }
.t-celestial .tl-title { font-weight: 600; letter-spacing: .04em; }
.t-celestial .tl-text, .t-celestial .vn-a, .t-celestial .vn-note { color: var(--muted); }
.t-celestial .vn-c { background: var(--paper); border-color: var(--line); }
.t-celestial .vn-l { color: var(--accent); font-weight: 600; }
.t-celestial .vn-n { font: 2rem var(--script); }
.t-celestial .sw-dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line); }
.t-celestial .faq summary { font-weight: 600; }
.t-celestial .rs, .t-celestial .rs-done { background: var(--paper); border-color: var(--line); }
.t-celestial .rs { --bg: color-mix(in srgb, var(--paper) 80%, #000); }
.t-celestial .rs-btn { background: var(--accent); color: #0f1838; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.t-celestial .rs-done-t { font: 2.6rem var(--script); color: var(--ink); }
.t-celestial .rs-done .btn-line { color: var(--ink); border-color: var(--ink); }
.t-celestial .cl-line { font: 2.2rem/1.2 var(--script); color: var(--ink); }
.t-celestial .cl-sign { letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }

/* ---------- moon cover & constellation gallery ---------- */
.cl-luna { position: relative; margin: 10px auto; width: min(78vw, 340px); aspect-ratio: 1; }
.cl-mimg { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6d6, #b8bdd6); box-shadow: 0 0 60px 6px color-mix(in srgb, var(--star) 35%, transparent), 0 0 0 1px rgba(255,246,214,.4); }
.cl-shade { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2; background: radial-gradient(circle at 18% 50%, transparent 58%, rgba(15,24,56,.62) 72%); animation: cl-wane 14s ease-in-out infinite alternate; }
@keyframes cl-wane { to { background-position: 30% 0; transform: rotate(18deg); } }
.cl-orbit { position: absolute; inset: -12%; border-radius: 50%; border: 1px dashed rgba(216,183,106,.35); pointer-events: none; animation: cl-spin 60s linear infinite; }
.cl-orbit i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--star); box-shadow: 0 0 10px var(--star); }
.cl-orbit i:nth-child(1) { top: 6%; left: 22%; } .cl-orbit i:nth-child(2) { bottom: 12%; right: 8%; } .cl-orbit i:nth-child(3) { top: 46%; left: -1%; width: 4px; height: 4px; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
.cl-sky { position: relative; margin-block: 0; margin-inline: max(-6px, calc((100% - var(--maxw)) / 2)); }
.cl-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-lines polyline { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: .6; }
.cl-st { position: absolute; margin: 0; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; }
.cl-simg { width: 128px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2b3a70, var(--paper)); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent), 0 0 28px -2px color-mix(in srgb, var(--star) 45%, transparent); }
.cl-simg img { border-radius: 50%; }
.cl-st.z1 .cl-simg { width: 108px; } .cl-st.z2 .cl-simg { width: 146px; }
.cl-st figcaption { font: 1.15rem var(--script); color: var(--accent); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cl-shade, .cl-orbit { animation: none; } }