/* LifeInMoons — the app's design system, translated to the web.
   Night sky ground, moon-cream ink, serif voice, tracked-caps labels,
   hairlines. Single theme by choice: the page is the night sky. */

:root {
  --night: #0A0E19;
  --card: #111725;
  --moon: #F2E7CE;
  --ink: #E9E0CC;
  --dim: rgba(233, 224, 204, 0.42);
  --faint: rgba(233, 224, 204, 0.26);
  --hair: rgba(242, 231, 206, 0.14);
  --copper: #CD5C21;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}

/* fixed sky behind everything */
#sky {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
main { position: relative; z-index: 1; }

/* ---- type roles ---- */
.label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
}
.label--bright { color: var(--ink); }

h1, .display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 7.5vw, 44px);
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-wrap: balance;
  color: var(--moon);
}
h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 5.5vw, 30px);
  line-height: 1.3;
  text-wrap: balance;
  color: var(--moon);
}
.prose {
  font-size: 17px;
  color: var(--ink);
  opacity: 0.92;
  max-width: 34rem;
}
.quiet { color: var(--dim); }

.num { font-variant-numeric: tabular-nums; }

/* ---- structure ---- */
section { position: relative; padding: 18vh 7vw; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }

.hairline {
  width: 40%; max-width: 220px; height: 1px;
  background: var(--hair); border: 0; margin: 0 auto;
}

/* ---- reveals (IntersectionObserver adds .vis) ---- */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.1s cubic-bezier(.23,.7,.32,1), transform 1.1s cubic-bezier(.23,.7,.32,1);
}
.reveal.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- hero ---- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 28px;
  padding: 12vh 8vw 10vh;
}
.globe { width: min(68vw, 320px); height: min(68vw, 320px); }

.scrollcue {
  position: absolute; bottom: 26px; left: 50%;
  width: 1px; height: 44px;
  background: linear-gradient(var(--hair), transparent);
  animation: cue 3.2s ease-in-out infinite;
}
@keyframes cue { 0%,100% { opacity: .9 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .scrollcue { animation: none; } }

/* ---- calculator ---- */
.calc input[type="date"] {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 3px;
  color: var(--moon);
  font-family: var(--serif);
  font-size: 18px;
  padding: 12px 20px;
  text-align: center;
  outline: none;
  color-scheme: dark;
  min-width: 220px;
}
.calc input[type="date"]:focus-visible { border-color: var(--dim); }
.calc input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); opacity: .6; }

.bignum {
  font-family: var(--serif);
  font-size: clamp(64px, 18vw, 120px);
  font-weight: 400;
  line-height: 1;
  color: var(--moon);
  font-variant-numeric: tabular-nums;
}
.calcresult { display: none; flex-direction: column; align-items: center; gap: 12px; }
.calcresult.on { display: flex; }
.gridwrap { width: 100%; max-width: 520px; }
.gridwrap canvas { width: 100%; display: block; }

/* ---- tonight widget ---- */
.tonight { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.phasewrap { position: relative; width: 148px; height: 148px; }
.phasewrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tonight .rows { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ---- vignettes ---- */
.vignettes { display: flex; flex-direction: column; gap: 56px; max-width: 34rem; margin: 0 auto; }
.vignette { display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center; }
.vignette .prose { font-size: 16px; }
.copperdot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--copper); margin-right: 9px; vertical-align: 2px;
}

/* ---- buttons (CTA, paywall, poster) ---- */
.cta { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.button {
  font-family: var(--serif);
  font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--night);
  background: var(--moon);
  border: 0; border-radius: 3px;
  padding: 15px 34px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.button:focus-visible { outline: 2px solid var(--dim); outline-offset: 3px; }
.button:disabled { opacity: 0.6; cursor: default; }
.button--small { font-size: 12px; padding: 10px 18px; }

footer {
  position: relative; z-index: 1;
  padding: 40px 7vw 52px;
  display: flex; flex-direction: column; gap: 18px;
  align-items: center; text-align: center;
}
footer nav { display: flex; gap: 28px; }
footer a { color: var(--dim); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--ink); }

/* ---- production additions ---- */
.hero { min-height: 100vh; }
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }

.cta .button--soon { cursor: default; }

/* ---- paywall: the sky in the fog ---- */
/* The whole calendar blurs to a pattern (visible, never readable) and fades
   out toward the card; the ONE crisp thing is the visitor's current moon,
   breathing in its own small overlay canvas (.curmoon). filter:blur on the
   canvas itself renders reliably on iOS Safari — backdrop-filter under a
   mask does not (learned from her phone). */
.gridwrap.locked {
  position: relative;
  max-height: 38vh;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 46%, rgba(0,0,0,0.4) 72%, transparent 94%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 46%, rgba(0,0,0,0.4) 72%, transparent 94%);
}
.gridwrap.locked > canvas:first-child {
  filter: blur(7px) saturate(0.9);
  opacity: 0.85;
}
.curmoon {
  position: absolute;
  z-index: 1;
  filter: none;
}
.paycard {
  display: flex; flex-direction: column; align-items: center; gap: 15px;
  max-width: 24rem;
  margin-top: -110px;           /* floats up into the fog */
  position: relative; z-index: 1;
  padding: 30px 28px;
  background: rgba(17, 23, 37, 0.86);   /* --card, frosted */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hair);
  border-radius: 4px;
  box-shadow: 0 0 90px rgba(242, 231, 206, 0.07);
  text-align: center;
}
.button--ghost {
  background: transparent;
  color: var(--moon);
  border: 1px solid var(--hair);
  padding: 13px 26px;
}
.button--ghost:hover, .button--ghost:focus-visible { border-color: var(--dim); }
.paycard .button { width: 100%; max-width: 250px; }
.linklike {
  background: none; border: 0; padding: 0;
  font-family: var(--serif); font-size: 14px;
  color: var(--dim);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linklike:hover, .linklike:focus-visible { color: var(--ink); }
.restorerow { display: flex; gap: 10px; align-items: stretch; }
.restorerow[hidden] { display: none; }
.restorerow input {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--hair); border-radius: 3px;
  color: var(--moon);
  font-family: var(--serif); font-size: 14px;
  padding: 9px 14px;
  outline: none;
  min-width: 0; width: 200px;
}
.restorerow input:focus-visible { border-color: var(--dim); }
.restoremsg:empty { display: none; }

/* ---- post-unlock: chips + poster ---- */
.posterrow { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.chips { display: flex; gap: 10px; }
.chip {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--hair); border-radius: 3px;
  padding: 8px 14px;
  cursor: pointer;
}
.chip--on { color: var(--night); background: var(--moon); border-color: var(--moon); }
.chip:focus-visible { outline: 2px solid var(--dim); outline-offset: 2px; }

/* inner pages (privacy / support) */
.page {
  max-width: 34rem; margin: 0 auto;
  padding: 14vh 7vw 10vh;
  display: flex; flex-direction: column; gap: 26px;
}
.page h1 { font-size: clamp(24px, 6vw, 34px); }
.page a { color: var(--ink); }
.page .backlink { text-decoration: none; }
.page .backlink:hover { color: var(--moon); }