/* ============================================================
   SHIFT HAPPENS — EDITORIAL MIDNIGHT (2027 style guide, Oct 2026)
   ------------------------------------------------------------
   Direction B. Loads after poster.css and applies the visual
   identity guide: midnight ink ground, warm cream type, festival
   gold emphasis, one day accent per themed section, Noto Sans
   Display (ExtraCondensed Black headlines · Condensed Bold labels
   · Condensed Medium copy), Noto Serif Condensed for paper notes.
   Three modes alternate for rhythm:
     campaign  — hero, invite, close (dense, cinematic, the cosmos shows)
     editorial — everything between (≈75% dark field · 15% texture · 10% emphasis)
     close     — welcoming, open, readable contact
   ============================================================ */
:root{
  --ink:#080C12; --void:#080C12;
  --cream:#F4E5C7; --parch:#C9BBA4; --paper:#E9D3AC; --paper-2:#E1C79C; --paper-ink:#1A140C; --paper-dim:#4A3B26;
  --au:#EAAF1D; --au-2:#F2C654; --glow:234,175,29;
  --text:var(--cream); --dim:var(--parch);
  /* focused light sources, never a rainbow */
  --cyan:#46C3D7; --magenta:#E75AA4; --violet:#B476DE; --orange:#F08136; --green:#A9C957;
  --blue:var(--cyan); --red:var(--orange);
  /* one accent per day (guide §day accents) */
  --d-origin:#EBA916; --d-self:#E75AA4; --d-story:#B476DE; --d-system:#46C3D7;
  --d-conflict:#F08136; --d-storytelling:#D882D8; --d-life:#A9C957;
  --line:rgba(244,229,199,.12); --panel:rgba(244,229,199,.035);
  --hx:'Noto Sans Display','Arial Narrow',sans-serif;
  --serif:'Noto Serif',Georgia,serif;
}

/* ---------- type system ----------------------------------- */
body{font-family:var(--hx);font-stretch:75%;font-weight:500;color:var(--cream);font-size:clamp(17px,1.15vw,19px);line-height:1.55;background:var(--ink)}
.big,.huge,.big.deck,.huge.deck,.day h3.day-q,.tear h3,.tear h4,.impact-figure,.impact-head,.node-card b,
.campus-close,.action-next,.invite-shit,.invite-points li b,.eq-op,.pillar h3,.beat h3,.needle-quote h3,.cd-unit b,.converge li,.nav-mark{
  font-family:var(--hx);font-stretch:62.5%;font-weight:900;font-style:normal;letter-spacing:0;text-transform:uppercase}
.big,.big.deck{font-size:clamp(2.4rem,6.6vw,5.6rem);line-height:1;color:var(--cream)}
.huge,.huge.deck{font-size:clamp(3.2rem,12vw,9.6rem);line-height:.95;color:var(--cream)}
.day h3.day-q{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:.98;color:var(--cream)}
.au{color:var(--au)}
.lede{font-stretch:75%;font-weight:500;font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.45;color:var(--cream);max-width:58ch}
.days .lede{color:var(--cream)}
.mono,.eyebrow,.eyebrow.deck,.hero-meta-top,.hero-when,.scroll-cue,.day-dow,.day-tags,.day-hood,.beat-t,.rhythm-note,.invite-roles,.invite-priv,.invite-by,.hero-pillars,.role-row,.sig-k{
  font-family:var(--hx);font-stretch:75%;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.eyebrow,.eyebrow.deck{color:var(--au);font-size:clamp(12px,1.2vw,15px);letter-spacing:.2em}
.eyebrow.deck::before{background:var(--au)}
.cd-unit b{font-variant-numeric:tabular-nums;color:var(--cream)}
.cd-unit i{font-family:var(--hx);font-stretch:75%;font-weight:700;color:var(--parch)}
p,.pillar p,.beat p,.day-strands li span,.node-card span,.day-thesis,.impact-blurb{color:var(--parch)}
.day-thesis,.beat p,.pillar p,.node-card span,.impact-blurb{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.5}
h3,h4,.pillar h3,.beat h3,.node-card b,.day-strands li b{color:var(--cream)}
.day-strands li b{font-family:var(--hx);font-stretch:75%;font-weight:700;letter-spacing:.08em;font-size:.95rem}
.day-dow,.day-tags,.day-hood{color:var(--parch)}
.day-n{font-family:var(--hx);font-stretch:62.5%;font-weight:900}
.day-theme{font-family:var(--hx);font-stretch:75%;font-weight:700;letter-spacing:.1em;border-radius:3px;color:#120D06}

/* paper notes: aged paper, dark ink, serif — never gradient text */
.tear,.quote-ink,.day-sig{background:var(--paper);color:var(--paper-ink)}
.tear p,.tear h3,.tear h4,.quote-ink,.day-sig p,.day-sig h4,.sig-k{color:var(--paper-ink)}
.quote-ink,.hero-ginsberg,.invite-q,.hero-tag,.day-sig p{font-family:var(--serif);font-stretch:62.5%;font-weight:500;font-style:normal}
.hero-ginsberg,.hero-tag{color:var(--cream)}
.hero-ginsberg cite{font-family:var(--hx);font-stretch:75%;font-weight:700;color:var(--au)}
.hero-tag em{color:var(--au);font-style:normal}
.invite-q{color:var(--cream)}
.sig-k{color:var(--paper-dim);font-size:11px}

/* ---------- modes: quiet the ground where the type lives --- */
main>section{isolation:isolate}
.manifesto,.needle,.lineage,.pillars,.billing,.campus,.action,.rhythm,.days,.impact,.slots,.choir{--field:.82}
.manifesto::after,.needle::after,.lineage::after,.pillars::after,.billing::after,.campus::after,.action::after,.rhythm::after,.days::after,.impact::after,.slots::after,.choir::after{
  content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;
  background:
    radial-gradient(rgba(244,229,199,.045) .6px,transparent 1px) 0 0/5px 5px,
    linear-gradient(180deg,rgba(8,12,18,calc(var(--field) - .12)),rgba(8,12,18,var(--field)) 18%,rgba(8,12,18,var(--field)) 82%,rgba(8,12,18,calc(var(--field) - .12)))}
.days{--field:.86}
/* campaign mode keeps the cosmos open: hero · invite · close */
.hero,.invite,.close{--field:0}

/* ---------- controls: gold solid primary · outline secondary */
.nav{font-family:var(--hx)}
.nav-mark{font-size:15px;letter-spacing:.04em;color:var(--cream)}
.nav-links a{font-stretch:75%;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--parch)}
.nav-links a:hover{color:var(--cream)}.nav-links a::after{background:var(--au)}
.nav.scrolled{background:rgba(8,12,18,.72);border-bottom:1px solid var(--line)}
.nav-cta,.close-cta,.signup button{
  font-family:var(--hx);font-stretch:75%;font-weight:700;font-style:normal;letter-spacing:.1em;text-transform:uppercase;
  background:var(--au);color:#120D06;border:1.5px solid var(--au);border-radius:6px;box-shadow:none}
.nav-cta{padding:10px 18px;font-size:12px}
.nav-cta::before{display:none}.nav-cta:hover{background:var(--au-2);color:#120D06}
.close-cta{padding:18px 34px;box-shadow:0 18px 44px -18px rgba(234,175,29,.55)}
.close-cta:hover{background:var(--au-2);box-shadow:0 22px 50px -16px rgba(234,175,29,.7)}
.signup button{padding:16px 28px;border-radius:6px}
.signup button:hover{background:var(--au-2);box-shadow:none}
.signup input{border-radius:6px;border-color:rgba(244,229,199,.22);background:rgba(244,229,199,.04);color:var(--cream);font-family:var(--hx);font-stretch:75%;font-weight:500}
.signup input:focus{border-color:var(--au)}
.role-row button{border-radius:6px;border:1.5px solid rgba(244,229,199,.3);color:var(--cream);font-size:12px;letter-spacing:.1em}
.role-row button:hover{border-color:var(--cream)}
.role-row button.on{background:var(--au);border-color:var(--au);color:#120D06}
.switcher button{border-radius:6px;font-family:var(--hx);font-stretch:75%}

/* ---------- five forces: thin-line icons in restrained rings */
.p-ico{width:92px;height:92px;background:transparent;color:var(--cream);box-shadow:none;border:2px solid var(--pb,var(--au));display:grid;place-items:center;border-radius:50%;position:relative}
.p-ico::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:1px solid color-mix(in srgb,var(--pb,var(--au)) 35%,transparent)}
.p-ico svg{width:40px;height:40px;fill:none;stroke:var(--cream);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pillar[data-glyph="story"]{--pb:var(--d-story)}
.pillar[data-glyph="heart"]{--pb:var(--d-self)}
.pillar[data-glyph="star"]{--pb:var(--au)}
.pillar[data-glyph="bolt"]{--pb:var(--d-system)}
.pillar[data-glyph="arrow"]{--pb:var(--d-life)}
.pillar:hover .p-ico{box-shadow:0 0 0 0 transparent;border-color:var(--cream)}
.pillar:hover .p-ico::after{border-color:var(--pb,var(--au))}
.pillar h3{font-size:1.35rem;margin-top:4px}

/* ---------- schedules: flat cards -------------------------- */
.beat{border:1px solid var(--line);border-radius:6px;background:rgba(244,229,199,.03)}
.beat .beat-badge{font-family:var(--hx);font-stretch:62.5%;font-weight:900;background:var(--au);color:#120D06}
.beat .beat-t{color:var(--au);font-size:12px}
.beat h3{font-size:1.5rem}
.rhythm-note{color:var(--parch);font-size:12px;letter-spacing:.16em}
.rhythm-how{color:var(--au)}
.node-card{border-radius:6px;border:1px solid var(--line);background:rgba(244,229,199,.03)}
.node-card.is-hq{border-color:var(--au)}

/* ---------- the city: map linework + one neon route --------- */
.campus{--field:.8}
.campus::after{background:
    linear-gradient(transparent 49.5%,rgba(244,229,199,.06) 50%,transparent 50.5%) 0 0/100% 64px,
    linear-gradient(90deg,transparent 49.5%,rgba(244,229,199,.06) 50%,transparent 50.5%) 0 0/64px 100%,
    linear-gradient(180deg,rgba(8,12,18,.68),rgba(8,12,18,var(--field)) 18%,rgba(8,12,18,var(--field)) 82%,rgba(8,12,18,.68))}
.route{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.9}
.route path{fill:none;stroke:url(#routeGrad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(70,195,215,.6))}
.campus-inner{position:relative;z-index:2}
.campus.is-in .route path{animation:route-draw 3.2s cubic-bezier(.5,0,.2,1) forwards}
@keyframes route-draw{to{stroke-dashoffset:0}}

/* ---------- days: one accent per day ------------------------ */
.day{border-top:1px solid var(--line);background:radial-gradient(55% 70% at 88% 50%,color-mix(in srgb,var(--day-accent) 14%,transparent),transparent 70%)}
.day-sig{clip-path:none;border-radius:4px;box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
.day-sig::after{opacity:.5}
.day-strands li{border-left:2px solid color-mix(in srgb,var(--day-accent) 70%,transparent);padding-left:14px}

/* ---------- impact + close ---------------------------------- */
.impact-figure{color:var(--au)}
.impact-head{color:var(--cream)}
.close-mail a{color:var(--cream);border-bottom:1px solid var(--au)}
.invite-shit{font-size:clamp(1.7rem,4.8vw,3.8rem);line-height:1.02}
.invite-shit .au{display:block}

/* ---------- motion: slow light sweep on hero type ----------- */
.hero .hero-tag{position:relative}
@media (prefers-reduced-motion:no-preference){
  .hero-tag::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(244,229,199,.14) 50%,transparent 70%);background-size:300% 100%;mix-blend-mode:screen;animation:sweep 9s linear infinite;pointer-events:none}
  @keyframes sweep{from{background-position:120% 0}to{background-position:-120% 0}}
}
@media (prefers-reduced-motion:reduce){.route path{animation:none;stroke-dashoffset:0}.hero-tag::after{display:none}}

/* ---------- mobile composition ------------------------------ */
@media(max-width:760px){
  body{font-size:17px}
  .big,.big.deck{font-size:clamp(2.1rem,10vw,2.9rem)}
  .huge,.huge.deck{font-size:clamp(2.8rem,15vw,4.2rem)}
  .day h3.day-q{font-size:clamp(1.9rem,9.5vw,2.8rem)}
  .lede{font-size:1.2rem}
  .p-ico{width:76px;height:76px}.p-ico svg{width:32px;height:32px}
}

/* ---------- the sky: a day in one scroll ---------------------
   app.js reads the visitor's clock, sets the hero to their time of
   day, then walks the rest of the page forward through one full
   day: dawn → day → golden hour → sunset → twilight → midnight.
   Dawn and sunset get the most scroll; midnight shows the cosmos. */
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;
  --sky-top:#080C12;--sky-mid:#0A1020;--sky-low:#080C12;--sky-a:0;--sun:#EAAF1D;--sun-a:0;--sun-y:110%;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 52%,var(--sky-low) 78%,#0B0F16 100%);opacity:var(--sky-a);
  transition:opacity .6s}
.sky-sun{position:absolute;left:50%;top:var(--sun-y);width:min(120vw,1400px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--sun) 85%,white) 0%,var(--sun) 6%,color-mix(in srgb,var(--sun) 55%,transparent) 14%,transparent 48%);
  opacity:var(--sun-a);filter:blur(2px);mix-blend-mode:screen}
.hero-tint{position:absolute;left:50%;bottom:0;width:100vw;height:min(62vh,640px);transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:var(--tint,transparent);mix-blend-mode:multiply;opacity:var(--tint-a,0)}
.hero-tint::after{content:'';position:absolute;inset:0;background:var(--tint-glow,transparent);mix-blend-mode:screen;opacity:var(--tint-glow-a,0)}
.sky-phase{color:var(--au)}
.hero-meta-top{flex-wrap:wrap;justify-content:center}
@media (prefers-reduced-motion:reduce){.sky{transition:none}}
@media(max-width:760px){.rhythm-how{justify-content:center}.rhythm-how::before{display:none}}
@media(max-width:760px){.hero-meta-top > .dot:nth-child(4){display:none}}