/* Direction C — "The Field"  ·  the constellation hero.
   The void is the field; each star a shared experience — ordinary people and the elders alike.
   A sky you stand under, not a feed you scroll. Threshold aesthetic + day/night. */
:root {
  --void:#11100C; --void-2:#19170F; --bone:#ECE5D6; --bone-dim:#B6AE9D; --ash:#79715E;
  --dawn:#D8A657; --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; background:var(--void); transition:background 500ms ease; }
body { margin:0; color:var(--bone); font-family:var(--grotesque); font-size:1.04rem; line-height:1.75; font-weight:300; background:var(--void); }
.wrap { max-width:920px; margin:0 auto; padding:0 var(--s4); }

.tick { font-size:0.68rem; font-weight:400; letter-spacing:0.3em; 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.14; letter-spacing:-0.015em; 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; position:relative; z-index:3; }
.nav .mark { font-size:0.78rem; letter-spacing:0.24em; 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.68rem; letter-spacing:0.18em; text-transform:uppercase; }
.nav a:hover { color:var(--dawn); }

/* ---- the field / constellation hero ---- */
.field-hero { position:relative; min-height:96vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; overflow:hidden; }
.sky { position:absolute; inset:0; z-index:0; pointer-events:none; }
.glow { position:absolute; bottom:-30%; left:50%; transform:translateX(-50%); width:min(90vw,820px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(216,166,87,0.32) 0%, rgba(216,166,87,0.08) 42%, transparent 66%); }
.star { position:absolute; transform:translate(-50%,-50%); }
.star .dot { display:block; width:4px; height:4px; border-radius:50%; background:var(--bone-dim); opacity:.5; animation:twinkle 6s ease-in-out infinite; }
.star.named { display:flex; align-items:center; gap:8px; }
.star.named .dot { width:6px; height:6px; opacity:1; background:var(--dawn); box-shadow:0 0 10px 1px rgba(216,166,87,.65); }
.star b { font-weight:400; font-size:0.66rem; letter-spacing:0.03em; color:var(--bone-dim); white-space:nowrap; }
.star.exp b { font-style:italic; color:var(--ash); font-size:0.7rem; }
.star:nth-child(2n) .dot { animation-duration:7.5s; animation-delay:1.2s; }
.star:nth-child(3n) .dot { animation-duration:5s; animation-delay:.6s; }
.star:nth-child(5n) .dot { animation-duration:8s; animation-delay:2s; }
@keyframes twinkle { 0%,100%{opacity:.22} 50%{opacity:.85} }

.field-intro { position:relative; z-index:2; padding:0 var(--s4);
  background:radial-gradient(60% 60% at 50% 50%, var(--void) 30%, transparent 100%); }
.field-intro .tick { margin-bottom:var(--s6); }
.field-intro h1 { font-size:clamp(2.3rem,6vw,4.4rem); max-width:16ch; margin:0 auto; }
.field-intro .sub { color:var(--bone-dim); max-width:44ch; margin:var(--s6) auto 0; }
.field-intro .cue { margin-top:var(--s8); }
.field-intro .cue a { color:var(--dawn); text-decoration:none; border-bottom:1px solid rgba(216,166,87,.4); padding-bottom:3px; font-size:0.92rem; }

/* statements + sections (Threshold language) */
.statement { padding:var(--s24) 0; text-align:center; }
.statement .tick { margin-bottom:var(--s6); }
.statement p { font-size:clamp(1.6rem,3.8vw,2.7rem); font-weight:300; line-height:1.3; max-width:22ch; 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 { 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; }

/* three pillars */
.pillars { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s8); }
@media (min-width:780px){ .pillars { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pillar { text-align:left; border-top:1px solid var(--line); padding-top:var(--s4); }
.pillar .tick { display:block; margin-bottom:var(--s3); }
.pillar h3 { font-size:1.4rem; margin-bottom:var(--s2); }
.pillar p { color:var(--bone-dim); margin:0; font-size:0.98rem; }

/* doors line */
.doors { text-align:center; }
.doors p { color:var(--bone-dim); max-width:50ch; margin:0 auto; font-size:1.12rem; }
.doors .ways { margin-top:var(--s4); color:var(--ash); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; }

/* a reading from the elders — the lineage, above the field */
.reading { text-align:center; }
.reading .quote { max-width:32ch; margin:0 auto var(--s12); }
.reading .quote:last-of-type { margin-bottom:0; }
.reading .quote p { font-size:clamp(1.3rem,2.8vw,1.9rem); font-weight:300; line-height:1.36; color:var(--bone); margin:0; }
.reading .quote cite { display:block; margin-top:var(--s3); font-style:normal; font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--dawn); }

/* the questions room — a council of elders who point, not answer */
.council { text-align:center; }
.council .intro { color:var(--bone-dim); max-width:54ch; margin:0 auto var(--s8); }
.council-ui { max-width:720px; margin:0 auto; text-align:left; }
.elders { display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center; margin-bottom:var(--s3); }
.elder-chip { display:flex; flex-direction:column; gap:3px; background:transparent; border:1px solid var(--line); border-radius:12px; padding:var(--s2) var(--s3); cursor:pointer; font:inherit; transition:border-color 200ms, background 200ms; }
.elder-chip .nm { display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--bone); }
.elder-chip .dot { width:6px; height:6px; border-radius:50%; background:var(--dawn); box-shadow:0 0 8px 1px rgba(216,166,87,.6); }
.elder-chip small { font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ash); }
.elder-chip[aria-selected="true"] { border-color:var(--dawn); background:var(--void-2); }
.qrow { display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center; margin-bottom:var(--s4); }
.q-chip { background:transparent; border:1px solid var(--line); border-radius:999px; padding:8px 14px; color:var(--bone-dim); font:inherit; font-size:0.82rem; cursor:pointer; transition:border-color 200ms, color 200ms; }
.q-chip:hover { border-color:var(--dawn); color:var(--dawn); }
.ask { display:flex; gap:var(--s2); margin-bottom:var(--s6); align-items:center; }
.ask input { flex:1; min-width:0; background:transparent; border:0; border-bottom:1px solid var(--bone-dim); padding:var(--s2) 0; font:inherit; color:var(--bone); }
.ask input::placeholder { color:var(--ash); }
.ask button { background:transparent; border:1px solid var(--dawn); color:var(--dawn); border-radius:999px; padding:9px 18px; font:inherit; font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; transition:background 200ms, color 200ms; }
.ask button:hover { background:var(--dawn); color:var(--void); }
.exchange { border-top:1px solid var(--line); padding-top:var(--s6); }
.exchange .you { color:var(--bone-dim); margin:0 0 var(--s4); }
.exchange .you span, .exchange .elder-reply .who { display:block; font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ash); margin-bottom:6px; }
.exchange .you em, .exchange .elder-reply em { font-style:normal; }
.exchange .elder-reply { font-size:1.15rem; line-height:1.5; color:var(--bone); margin:0 0 var(--s6); }
.exchange .elder-reply .who { color:var(--dawn); }
.taste { background:var(--void-2); border:1px solid var(--line); border-radius:14px; padding:var(--s4); }
.taste .tick { display:block; margin-bottom:var(--s2); }
.taste p { margin:0; color:var(--bone-dim); }
.council-note { color:var(--ash); font-size:0.78rem; max-width:54ch; margin:var(--s8) auto 0; text-align:center; }
[hidden] { display:none !important; }

/* join */
.join { text-align:center; }
.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 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:.08em; }
.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.22em; text-transform:uppercase; cursor:pointer; transition:background 240ms,color 240ms; }
.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); text-align:center; }
@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.93rem; }
footer a:hover { color:var(--dawn); }
footer .legal { text-align:center; color:var(--ash); font-size:0.75rem; margin-top:var(--s12); }

/* 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.64rem; letter-spacing:0.22em; 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: clean white, black copy, the field as ink points ---- */
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"] .star .dot { background:#9a9183; box-shadow:none; }
html[data-theme="day"] .star.named .dot { background:var(--dawn); box-shadow:none; }
html[data-theme="day"] .glow { background:radial-gradient(circle at 50% 45%, rgba(160,106,30,0.14), transparent 60%); }
html[data-theme="day"] .theme-toggle .orbmark { box-shadow:none; background:var(--dawn); }

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