/* The shared-sky landing page (web/share.html, lane share-sky): phone-first (390 wide), the Story card's typography,
   fonts from the app's own folder (no CDN). */
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Natal Symbols"; src: url("../assets/fonts/noto-sans-symbols-symbols-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

:root {
  --ground: #07060f;
  --pearl: #ece8f6;
  --muted: #bcb6d6;
  --hair: #2a2640;
  --moon: #bba5ff;
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(120% 80% at 50% 30%, #1a1630 0%, var(--ground) 70%) fixed, var(--ground);
  color: var(--pearl); font: 400 13px/1.6 var(--mono); -webkit-font-smoothing: antialiased;
}
p, h1 { margin: 0; }
.land {
  max-width: 560px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 20px) 16px max(32px, env(safe-area-inset-bottom)); /* clear the Dynamic Island with a gap, not flush against it */
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.land-label { color: var(--muted); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; }
.land-mark { font: 400 26px/1 var(--display); letter-spacing: 0.42em; text-transform: uppercase; margin-right: -0.42em; }
.land-wheel { width: min(100%, 420px); aspect-ratio: 1; margin: 8px 0 4px; }
.land-wheel canvas { width: 100%; height: 100%; display: block; }
/* A shared duet: two wheels overlapping by a third (landing.js sizes the canvas to match). */
.land-wheel.is-duet { width: min(100%, 640px); aspect-ratio: 1181 / 720; }
.land-name { font: italic 400 clamp(40px, 12vw, 56px)/1.05 var(--display); }
.land-signs { font-size: 12.5px; letter-spacing: 0.12em; }
.land-detail, .land-mood { color: var(--muted); font-size: 11.5px; letter-spacing: 0.06em; }
.land-error { color: #ff9d6b; max-width: 36ch; }
.land-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(100%, 340px); margin-top: 18px; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pearl) 70%, transparent);
  background: transparent; color: var(--pearl); font: 400 11.5px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.pill-on { background: var(--pearl); color: var(--ground); border-color: var(--pearl); }
.pill:focus-visible, .land-open:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; }
.land-open { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-underline-offset: 4px; }
.land-status { min-height: 1.6em; color: var(--muted); font-size: 11px; }
.land-private { margin-top: 18px; color: var(--muted); font-size: 11px; max-width: 34ch; }
.land-foot a { color: var(--muted); font-size: 11px; }
[hidden] { display: none !important; }
@media (min-width: 720px) {
  .land { padding-top: 48px; }
  .land-wheel { width: 460px; }
  .land-wheel.is-duet { width: 720px; }
}