/* Variation E — "Eclipse"  ·  Threshold, pushed toward Co-Star.
   Pure-centered, maximal void, an eclipse-ring as the motif. Day/night. */
:root {
  --void:     #0E0B06;   /* near-black, warm */
  --void-2:   #16120A;
  --bone:     #ECE4D3;
  --bone-dim: #ADA493;
  --ash:      #6E6757;
  --dawn:     #DBA659;   /* corona gold */
  --line:     rgba(236,228,211,0.10);
  --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; --s16:128px; --s24:192px; --s32:256px;
  --grotesque: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; background: var(--void); transition: background 500ms ease; }
body { margin: 0; color: var(--bone); font-family: var(--grotesque);
  font-size: 1.02rem; line-height: 1.8; font-weight: 300; background: var(--void); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--s4); text-align: center; }

.tick { font-size: 0.66rem; font-weight: 400; letter-spacing: 0.4em; 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; }
.cta { margin-top: var(--s8); display: flex; gap: var(--s4); align-items: center; justify-content: center; flex-wrap: wrap; }
.cta a { color: var(--dawn); text-decoration: none; border: 1px solid var(--dawn); border-radius: 999px; padding: var(--s3) var(--s6); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; transition: background 200ms, color 200ms; }
.cta a:hover { background: var(--dawn); color: var(--void); }
.cta a.sec { border: 0; padding: var(--s3) 0; letter-spacing: 0.04em; text-transform: none; color: var(--bone-dim); }
.cta a.sec:hover { background: transparent; color: var(--dawn); }
h1, h2, h3 { font-weight: 200; line-height: 1.18; letter-spacing: -0.01em; margin: 0; }

/* nav */
.nav { display: flex; justify-content: space-between; align-items: center; padding: var(--s6) var(--s4) 0; max-width: 1100px; margin: 0 auto; }
.nav .mark { font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase; }
.nav .controls { display: flex; align-items: center; gap: var(--s4); }
.nav a { color: var(--bone-dim); text-decoration: none; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; }
.nav a:hover { color: var(--dawn); }

/* hero — eclipse above a single line */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s12); }
.eclipse { position: relative; width: clamp(160px, 30vw, 280px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--void) 0 56%, var(--dawn) 57% 60%, transparent 61%);
  filter: drop-shadow(0 0 34px rgba(219,166,89,0.55)); }
.eclipse::after { content: ""; position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(219,166,89,0.18), transparent 70%); }
.hero .tick { margin-bottom: var(--s6); }
.hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); max-width: 15ch; }
.hero .sub { color: var(--bone-dim); max-width: 42ch; margin: var(--s6) auto 0; }

/* near-full-screen statements — one breath each */
.statement { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.statement .tick { margin-bottom: var(--s6); }
.statement p { font-size: clamp(1.7rem, 4.4vw, 3rem); font-weight: 200; line-height: 1.28; max-width: 20ch; margin: 0 auto; }
.statement p .dim { color: var(--ash); }

section { padding: var(--s16) 0; }
.rule { width: 40px; height: 1px; background: var(--dawn); opacity: .6; border: 0; margin: 0 auto; }
.kicker h2 { font-size: clamp(1.5rem, 3vw, 2rem); max-width: 22ch; margin: var(--s4) auto var(--s12); }

/* what it is — centered, divided by hairlines */
.list .row { padding: var(--s8) 0; border-top: 1px solid var(--line); }
.list .row:last-child { border-bottom: 1px solid var(--line); }
.list .n { font-size: 0.7rem; letter-spacing: 0.4em; color: var(--dawn); text-transform: uppercase; }
.list h3 { font-size: 1.5rem; margin: var(--s3) 0 var(--s2); }
.list p { color: var(--bone-dim); max-width: 48ch; margin: 0 auto; }

/* research readout — centered figures */
.readout { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s8); max-width: 620px; margin: 0 auto; }
@media (min-width: 700px){ .readout { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat .fig { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 200; color: var(--dawn); }
.stat .lbl { display: block; margin-top: var(--s2); color: var(--bone-dim); font-size: 0.78rem; line-height: 1.4; }
.readout-note { color: var(--ash); font-size: 0.76rem; margin-top: var(--s8); }

/* method + join */
.method p { color: var(--bone-dim); max-width: 48ch; margin: 0 auto; font-size: 1.15rem; }
.method a, .footlink { color: var(--dawn); text-decoration: none; border-bottom: 1px solid rgba(219,166,89,.4); }
.join form { display: flex; gap: var(--s3); max-width: 420px; margin: var(--s8) auto 0; flex-wrap: wrap; justify-content: center; align-items: center; }
.join input { flex: 1 1 200px; 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: .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.72rem; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; transition: background 240ms ease, color 240ms ease; }
.join button:hover { background: var(--dawn); color: var(--void); }

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); }
@media (min-width: 640px){ footer .routes { grid-template-columns: repeat(3, minmax(0,1fr)); } }
footer .tick { display: block; margin-bottom: var(--s2); }
footer a, footer .routes span { color: var(--bone); text-decoration: none; font-size: 0.92rem; }
footer a:hover { color: var(--dawn); }
footer .legal { color: var(--ash); font-size: 0.74rem; margin-top: var(--s12); }

/* the day/night selector */
.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.62rem; letter-spacing: 0.24em; text-transform: uppercase; transition: border-color 200ms, color 200ms; }
.theme-toggle:hover { border-color: var(--dawn); color: var(--dawn); }
.theme-toggle .orbmark { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset -4px -2px 0 0 var(--dawn); transition: box-shadow 300ms, background 300ms; }

/* ---- DAY ---- */
html[data-theme="day"] {
  --void: #FFFFFF; --void-2: #F3F3F1; --bone: #121212; --bone-dim: #555555; --ash: #8C8C8C; --dawn: #A06A1E; --line: rgba(18,18,18,0.13);
}
html[data-theme="day"] .eclipse { filter: drop-shadow(0 0 30px rgba(178,122,44,0.45)); }
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; } }