/* Coming soon page: the launch countdown, standing alone (no site menu or footer). */
.cs main{min-height:calc(100vh - 64px);display:flex;flex-direction:column}
.cs-top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}

.cs-hero{text-align:center;padding:72px 0 64px;border-top:0}
.cs-logo{display:block;width:min(560px,80vw);height:auto;margin:0 auto 40px}
.cs-logo svg{display:block;width:100%;height:auto}
.cs-kicker{font-size:12px;max-width:none;margin:0 auto}
.cs-hero h1{margin:14px auto 0;max-width:860px}
.cs-hero h1 em{font-style:italic;color:var(--strong)}
.cs-hero .lede{max-width:640px;margin:20px auto 0}
.cs-hero .cta{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* the countdown: four display numbers on one rule, labels under them */
.cs-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:720px;margin:44px auto 0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cs-count>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 8px 18px;background:var(--paper)}
.cs-count b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(40px,7vw,72px);line-height:1;color:var(--strong);font-variant-numeric:tabular-nums}
.cs-count span{display:block;margin-top:10px;color:var(--mute)}
.cs-count.is-live b{font-size:clamp(28px,4vw,40px)}
.cs-when{margin:14px auto 0;max-width:none;text-align:center;font-size:12px}

/* the countdown in moons: new moons to come, tithis after the last, and tonight's moon in the mark */
.cs-moons{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-tonight svg{display:block;width:76px;height:76px;margin:0 auto}
.cs-tonight span{margin-top:8px;text-transform:none;letter-spacing:.04em}
.cs-moons-note{margin:14px auto 0;max-width:560px;text-align:center;font-size:11px}
@media (max-width:620px){.cs-moons{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-tonight svg{width:54px;height:54px}}

/* what it will do: the home page's cards, three across */
.cs-what{padding:56px 0;border-top:1px solid var(--line);background:var(--soft)}
.cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cs-cards .card h3{margin-top:8px}
.cs-cards .card p+h3{margin-top:10px}
.cs-cards .card h3+p{margin-top:10px}

/* notify */
.cs-notify{padding:64px 0 72px;text-align:center}
.cs-notify .lede{max-width:560px;margin:14px auto 0}
.cs-notify .form{margin:28px auto 0;text-align:left}
.cs-notify .note-box{margin:28px auto 0;text-align:left}

.cs-foot{border-top:1px solid var(--line);padding:28px 0 32px;margin-top:auto}
.cs-foot p{font-size:16px}
.cs-foot a{text-decoration:underline;text-underline-offset:4px}
.cs-foot .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:900px){.cs-cards{grid-template-columns:1fr}}
@media (max-width:620px){
 .cs-hero{padding:48px 0 48px}
 .cs-logo{margin-bottom:28px}
 .cs-count{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cs-count b{font-size:44px}
}
@media (prefers-reduced-motion:reduce){.cs-count b{transition:none}}

/* the three cycles of the sky (ComingSoonCycles): the day's graha, the half, the Moon's quarter */
.cs-cycles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:960px;margin:28px auto 8px;border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2);text-align:left}
.cs-cycles li{padding:14px 16px}
.cs-cycles li+li{border-left:1px solid var(--rule2)}
.cs-cycles span{font-size:11px}
.cs-cycles p{margin-top:6px;font-size:16px;line-height:1.4}
.cs-swatch{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px;background:var(--hl);box-shadow:inset 0 0 0 1px var(--strong)}
.cs-cycles small{display:block;margin-top:6px;font-size:13px;line-height:1.35}
.cs-sunpath{display:block;width:84px;height:18px;margin-bottom:6px}
.cs-sunpath line{stroke:var(--mute);stroke-width:1}
.cs-sunpath circle{fill:var(--strong)}
html[data-half=day] .cs-sunpath circle{fill:#D9A441}
.cs-phases{display:block;width:76px;height:16px;margin-bottom:6px}
.cs-phases circle{fill:none;stroke:var(--mute);stroke-width:1}
.cs-phases path{fill:var(--mute)}
.cs-phases .on circle{stroke:var(--strong);stroke-width:1.5}
.cs-phases .on path{fill:var(--strong)}
.cs-phases .on:first-child circle{fill:var(--hl)}
@media (max-width:760px){.cs-cycles{grid-template-columns:1fr}.cs-cycles li+li{border-left:0;border-top:1px solid var(--rule2)}}

/* the night half: the day's deep colour becomes the page, ink turns to moonlight */
html[data-half=night]{--paper:var(--deep);--ink:#f2f0ea;--mute:#bcb8ae;--line:rgba(242,240,234,.5);--rule2:rgba(242,240,234,.22);--soft:color-mix(in srgb,var(--deep) 86%,#fff);--strong:var(--hl);--hover:var(--hl);--hover-ink:#0a0a0a;--hover-mute:#3a3a3a;--sky:#08080b}
html[data-half=night] svg [fill="#111111"]{fill:#f2f0ea}
html[data-half=night] .cs-tonight svg{width:96px;height:96px}
html[data-half=night] .cs-hero .cs-logo{filter:drop-shadow(0 0 28px color-mix(in srgb,var(--hl) 35%,transparent))}
html[data-half=night] input,html[data-half=night] select{background:var(--soft);color:var(--ink);border-color:var(--line)}
@media (prefers-reduced-motion:no-preference){html{transition:background-color .6s}}

/* the Sun's twelve houses: the paper moves with the light, about every two
   hours. By day it leans to the graha's colour at sunrise and sunset and to
   white near noon; by night it leans to the colour at dusk and before dawn
   and to black near midnight. --base-paper holds the day's own paper on
   html, so body can mix it into a new --paper without a loop. */
html{--base-paper:var(--paper)}
.cs{--paper:color-mix(in srgb,var(--toward,#fff) var(--amount,0%),var(--base-paper));background:var(--paper)}
html[data-part="1"]{--toward:var(--hl);--amount:55%}
html[data-part="2"]{--toward:var(--hl);--amount:22%}
html[data-part="3"]{--toward:#fff;--amount:70%}
html[data-part="4"]{--toward:#fff;--amount:40%}
html[data-part="5"]{--toward:var(--hl);--amount:30%}
html[data-part="6"]{--toward:var(--hl);--amount:65%}
html[data-part="7"]{--toward:var(--hl);--amount:16%}
html[data-part="8"]{--toward:var(--hl);--amount:6%}
html[data-part="9"]{--toward:#000;--amount:40%}
html[data-part="10"]{--toward:#000;--amount:40%}
html[data-part="11"]{--toward:#000;--amount:15%}
html[data-part="12"]{--toward:var(--hl);--amount:10%}

/* the Moon's quarter tints the hero a little more as the moon fills, and less as it empties */
html[data-quarter="1"] .cs-hero{--fill:10%}
html[data-quarter="2"] .cs-hero{--fill:22%}
html[data-quarter="3"] .cs-hero{--fill:34%}
html[data-quarter="4"] .cs-hero{--fill:16%}
html[data-quarter] .cs-hero{background:radial-gradient(ellipse 70% 60% at 50% 18%,color-mix(in srgb,var(--hl) var(--fill),transparent),transparent)}
html[data-half=night][data-quarter] .cs-hero{background:radial-gradient(ellipse 60% 45% at 50% 16%,color-mix(in srgb,var(--hl) calc(var(--fill) / 2),transparent),transparent)}

/* mock only: the bar that previews every mix */
.cs-preview{position:fixed;left:16px;right:16px;bottom:16px;z-index:999;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 14px;background:#fff;color:#000;border:1px solid #000;border-radius:14px;font-size:11px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.cs-preview span{margin:0 2px 0 8px;font-weight:600}
.cs-preview span:first-child{margin-left:0}
.cs-preview a{padding:5px 9px;border:1px solid #000;border-radius:12px;text-decoration:none;color:#000}
.cs-preview a[aria-current]{background:#000;color:#fff}
.cs-privacy{margin:18px auto 0;max-width:560px;text-align:center;font-size:11px;text-transform:none;letter-spacing:.02em}
html[lang=hi] .cs-privacy{font-size:13px;letter-spacing:0}