/* Direction D — "Threshold"  ·  On Being × Co-Star
   Warm, literary, contemplative (On Being) fused with stark cosmic minimalism (Co-Star).
   Dark, spacious, type-and-void, one thought at a time. No serif, no bold-SaaS. */
:root {
  --void:     #131009;   /* deep warm ink (Co-Star black, warmed) */
  --void-2:   #1B160D;   /* faint lift for panels */
  --bone:     #ECE5D6;   /* warm off-white text (On Being warmth) */
  --bone-dim: #B6AE9D;   /* secondary */
  --ash:      #756F60;   /* faint labels, rules */
  --dawn:     #D8A657;   /* dawn gold — the single accent, used sparingly */
  --moon:     #AEB7BC;   /* rare cool flicker */
  --line:     rgba(236,229,214,0.12);
  --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; --s16:128px; --s24:192px;
  --grotesque: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--bone); font-family: var(--grotesque);
  font-size: 1.05rem; line-height: 1.75; font-weight: 300; letter-spacing: 0.01em;
  background: var(--void);
}
.wrap { max-width: 980px; margin: 0 auto; padding: 0 var(--s4); }

/* tracked micro-labels — the Co-Star signature */
.tick { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ash); }
.tick.gold { color: var(--dawn); }
.tick.lede { text-transform: none; letter-spacing: 0.02em; font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; }

h1, h2, h3 { font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
.measure { max-width: 30ch; }
em { font-style: normal; color: var(--dawn); }

/* nav — quiet, wide */
.nav { display: flex; justify-content: space-between; align-items: center; padding: var(--s6) 0 0; }
.nav .mark { font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone); }
.nav a { color: var(--bone-dim); text-decoration: none; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; margin-left: var(--s4); }
.nav a:hover { color: var(--dawn); }

/* hero — full, with a rising dawn orb */
.hero { position: relative; min-height: 92vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; overflow: hidden; }
.orb { position: absolute; bottom: -34%; left: 50%; transform: translateX(-50%);
  width: min(86vw, 760px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%,
    rgba(216,166,87,0.55) 0%, rgba(216,166,87,0.18) 38%, rgba(216,166,87,0.04) 56%, transparent 70%);
  filter: blur(2px); }
.hero > * { position: relative; z-index: 1; }
.hero .tick { margin-bottom: var(--s6); }
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); max-width: 16ch; }
.hero .sub { color: var(--bone-dim); max-width: 44ch; margin: var(--s6) auto 0; font-size: 1.1rem; }
.scrollcue { margin-top: var(--s12); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ash); }

/* contemplative statement blocks — generous void around one idea */
.statement { padding: var(--s24) 0; text-align: center; }
.statement p { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 300; line-height: 1.3;
  max-width: 22ch; margin: 0 auto; color: var(--bone); }
.statement p .dim { color: var(--ash); }
.statement .tick { margin-bottom: var(--s6); }

/* section frame */
section { padding: var(--s16) 0; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.kicker { text-align: center; margin-bottom: var(--s12); }
.kicker h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 24ch; margin: var(--s4) auto 0; color: var(--bone); }

/* what it is — big numbered constellation list */
.list .row { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s2);
  padding: var(--s8) 0; border-top: 1px solid var(--line); text-align: left; }
@media (min-width: 760px){ .list .row { grid-template-columns: 120px minmax(0,1fr); gap: var(--s8); align-items: baseline; } }
.list .n { font-size: 2.4rem; font-weight: 200; color: var(--dawn); line-height: 1; letter-spacing: 0; }
.list h3 { font-size: 1.5rem; margin-bottom: var(--s2); }
.list p { color: var(--bone-dim); max-width: 54ch; margin: 0; }

/* method — quiet centered */
.method { text-align: center; }
.method p { color: var(--bone-dim); max-width: 50ch; margin: 0 auto; font-size: 1.15rem; }
.method a { color: var(--dawn); text-decoration: none; border-bottom: 1px solid rgba(216,166,87,.4); padding-bottom: 2px; }
.method a:hover { border-color: var(--dawn); }

/* research — stark celestial readout, numbers as text not bars */
.readout { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s8) var(--s6);
  max-width: 760px; margin: 0 auto; }
@media (min-width: 760px){ .readout { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat { text-align: center; }
.stat .fig { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 200; color: var(--dawn); letter-spacing: -0.02em; }
.stat .lbl { display: block; margin-top: var(--s2); color: var(--bone-dim); font-size: 0.82rem; line-height: 1.4; }
.readout-note { text-align: center; color: var(--ash); font-size: 0.78rem; margin-top: var(--s8); letter-spacing: 0.04em; }

/* join — minimal underline */
.join { text-align: center; }
.join form { display: flex; gap: var(--s3); max-width: 440px; margin: var(--s8) auto 0; align-items: center; flex-wrap: wrap; justify-content: center; }
.join input { flex: 1 1 220px; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid var(--bone-dim);
  padding: var(--s3) 0; font: inherit; color: var(--bone); text-align: center; }
.join input::placeholder { color: var(--ash); letter-spacing: 0.1em; }
.join button { background: transparent; border: 1px solid var(--dawn); color: var(--dawn);
  border-radius: 999px; padding: var(--s3) var(--s6); font: inherit; font-size: 0.78rem; letter-spacing: 0.2em;
  text-transform: uppercase; cursor: pointer; transition: background 240ms ease, color 240ms ease; }
.join button:hover { background: var(--dawn); color: var(--void); }

/* footer */
footer { padding: var(--s16) 0 var(--s12); border-top: 1px solid var(--line); }
footer .routes { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s6); text-align: center; }
@media (min-width: 700px){ footer .routes { grid-template-columns: repeat(3, minmax(0,1fr)); } }
footer .routes .tick { display: block; margin-bottom: var(--s2); }
footer .routes a, footer .routes span { color: var(--bone); text-decoration: none; font-size: 0.95rem; letter-spacing: 0.04em; }
footer .routes a:hover { color: var(--dawn); }
footer .legal { text-align: center; color: var(--ash); font-size: 0.76rem; letter-spacing: 0.06em; margin-top: var(--s12); }

/* ---- DAY / NIGHT THEMING ---- night is default (:root above) ---- */
html { background: var(--void); transition: background 400ms ease; }
html[data-theme="day"] {
  --void:     #FFFFFF;   /* clean white — day */
  --void-2:   #F3F3F1;   /* light grey panels */
  --bone:     #121212;   /* black copy */
  --bone-dim: #555555;
  --ash:      #8C8C8C;
  --dawn:     #A06A1E;   /* deepened gold for contrast on white */
  --moon:     #5B6B73;
  --line:     rgba(18,18,18,0.13);
}
html[data-theme="day"] .orb {
  background: radial-gradient(circle at 50% 45%,
    rgba(214,150,70,0.50) 0%, rgba(214,150,70,0.16) 40%, rgba(214,150,70,0.04) 56%, transparent 70%);
}

/* the selector — a dusk/dawn switch */
.theme-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--bone-dim);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 0.66rem;
  letter-spacing: 0.22em; text-transform: uppercase; transition: border-color 200ms ease, color 200ms ease; }
.theme-toggle:hover { border-color: var(--dawn); color: var(--dawn); }
.theme-toggle .orbmark { width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  box-shadow: inset -4px -2px 0 0 var(--dawn); transition: box-shadow 300ms ease, background 300ms ease; }
html[data-theme="day"] .theme-toggle .orbmark { box-shadow: none; background: var(--dawn); }

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition-duration:.01ms!important; scroll-behavior:auto!important; } }