/* LUMEN PLANETARIUM — centennial · palette: void #050609 · starlight #E9EAF2 · blue giant #8FB6FF · amber #F2C894 · comet teal #6ED0C8 */

:root{
  --void:#050609;
  --star:#E9EAF2;
  --blue:#8FB6FF;
  --amber:#F2C894;
  --teal:#6ED0C8;
  --dim:rgba(233,234,242,.72);
  --faint:rgba(233,234,242,.44);
  --hairline:rgba(233,234,242,.14);
  --panel:rgba(9,11,17,.72);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --disp:"Unbounded",sans-serif;
  --body:"Onest",sans-serif;
  --mono:"Victor Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--void);
  color:var(--star);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--blue);color:var(--void)}

.vm{font-family:var(--mono)}

/* ——— canvas & atmosphere ——— */
#sky{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;display:block;
  background:radial-gradient(120% 90% at 50% 10%, #0A0E18 0%, var(--void) 62%);
}
/* the cursor is the gravity well — give it a celestial body */
body{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M11 2 12.4 9.6 20 11 12.4 12.4 11 20 9.6 12.4 2 11 9.6 9.6Z' fill='%23E9EAF2' fill-opacity='.92'/%3E%3C/svg%3E") 11 11, auto;
}
a,button,summary,[role="button"]{cursor:pointer}

/* ——— skip link & focus ——— */
.skip{
  position:fixed;top:-4rem;left:1rem;z-index:100;
  background:var(--star);color:var(--void);
  padding:.6rem 1.1rem;border-radius:3px;font-weight:600;
  transition:top .2s var(--ease-out);
}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

/* ——— header ——— */
.top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:baseline;gap:2.4rem;
  padding:1.4rem 2.4rem;
  background:linear-gradient(rgba(5,6,9,.85), rgba(5,6,9,0));
}
.wordmark{
  font-family:var(--disp);font-weight:900;font-size:1.05rem;letter-spacing:.22em;
  color:var(--star);text-decoration:none;
}
.top nav{display:flex;gap:1.6rem}
.top nav a{
  color:var(--dim);text-decoration:none;font-size:.86rem;letter-spacing:.06em;
  transition:color .25s;
}
.top nav a:hover{color:var(--star)}
.epoch{margin-left:auto;font-family:var(--mono);font-size:.82rem;color:var(--faint);font-style:italic}

/* ——— shared layout ——— */
main{position:relative;z-index:2}
section{position:relative}

.eyebrow{
  font-size:.78rem;letter-spacing:.18em;color:var(--teal);
  font-style:italic;margin-bottom:1.2rem;
}

/* soft dark scrim behind copy blocks so text survives the particle field */
.hero-inner,.intro-copy,.century-copy,.season-head,.mem-head,.visit-copy,.orbit-fig{position:relative}
.hero-inner::before,.intro-copy::before,.century-copy::before,.season-head::before,
.mem-head::before,.visit-copy::before,.orbit-fig::before{
  content:"";position:absolute;inset:-3.5rem -4rem;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 50% 50%, rgba(4,5,8,.8) 0%, rgba(4,5,8,.44) 55%, rgba(4,5,8,0) 100%);
}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.12}
h2{font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:500;letter-spacing:.01em;margin-bottom:1.4rem;text-wrap:balance}
.lede{color:var(--dim);max-width:34em}
p+p{margin-top:1em}

.intro-copy p, .century-copy li, .show p, .tier-note, .visit-copy p{color:var(--dim)}
.intro-copy p strong{color:var(--star)}

/* ——— hero ——— */
.hero{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(1.4rem,5vw,4.5rem) 11vh;
}
.hero-inner{max-width:60rem}
.hero .eyebrow{color:var(--faint)}
h1{
  font-size:clamp(2.6rem,7.4vw,6.4rem);
  font-weight:900;letter-spacing:.045em;
  text-shadow:0 0 60px rgba(143,182,255,.25);
}
.h1-line{display:block}
.h1-sub{
  font-weight:300;letter-spacing:.34em;
  font-size:clamp(1rem,2.55vw,2.2rem);
  color:var(--dim);margin-top:.35em;
}
.hero-tag{margin-top:1.6rem;color:var(--dim);font-size:1.06rem;max-width:32em}
.hero-cta{display:flex;gap:1rem;margin-top:2.2rem;flex-wrap:wrap}

/* orchestrated page-load: the hero rises out of the dark, one line at a time */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .hero-inner>*{opacity:0;animation:rise .95s var(--ease-out) forwards}
.js .hero-inner>.eyebrow{animation-delay:.2s}
.js .hero-inner>h1{animation-delay:.42s}
.js .hero-inner>.hero-tag{animation-delay:.72s}
.js .hero-inner>.hero-cta{animation-delay:.95s}
.js .scroll-hint{opacity:0;animation:rise 1.2s var(--ease-out) 1.6s forwards}
@media (prefers-reduced-motion:reduce){
  .js .hero-inner>*,.js .scroll-hint{animation:none;opacity:1;transform:none}
}

.btn{
  display:inline-block;padding:.85rem 1.7rem;border-radius:2px;
  font-family:var(--disp);font-weight:500;font-size:.82rem;letter-spacing:.1em;
  text-decoration:none;transition:transform .35s var(--ease-out), background .25s, color .25s, border-color .25s;
}
.btn-solid{background:var(--star);color:var(--void)}
.btn-solid:hover{background:var(--blue);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--hairline);color:var(--star)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}

.scroll-hint{
  position:absolute;bottom:2rem;right:clamp(1.4rem,5vw,4.5rem);
  font-size:.75rem;font-style:italic;color:var(--faint);
  display:flex;align-items:center;gap:.9rem;
}
.hint-line{width:56px;height:1px;background:linear-gradient(90deg,var(--faint),transparent);display:inline-block;position:relative;overflow:hidden}
.hint-line::after{
  content:"";position:absolute;inset:0;background:var(--teal);
  transform:translateX(-100%);animation:hintsweep 2.6s var(--ease-out) infinite;
}
@keyframes hintsweep{0%{transform:translateX(-100%)}55%{transform:translateX(100%)}100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.hint-line::after{animation:none}}

/* ——— stage sections ——— */
.stage-sec{padding:0 clamp(1.4rem,5vw,4.5rem)}
.stage-intro{
  min-height:100vh;display:flex;align-items:center;
}
.intro-left .intro-copy{max-width:30rem}
.intro-right{justify-content:flex-end}
.intro-right .intro-copy{max-width:31rem}
.stage-hold{height:34vh}
.stage-body{padding:6vh 0 18vh}

/* reveal choreography */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ——— stats ——— */
.statrow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);
  max-width:62rem;
}
.statrow>div{background:var(--panel);padding:1.6rem 1.4rem;display:flex;flex-direction:column}
.statrow dt{font-family:var(--mono);font-style:italic;font-size:.74rem;color:var(--faint);letter-spacing:.06em}
.statrow dd{font-family:var(--disp);font-weight:500;font-size:clamp(1.4rem,2.4vw,2.1rem);margin-top:auto;padding-top:.5rem;color:var(--star)}

/* ——— century / orbit rings ——— */
.century-grid{
  display:grid;grid-template-columns:minmax(20rem,30rem) 1fr;gap:4rem;
  align-items:center;padding:16vh 0 14vh;max-width:90rem;margin:0 auto;
}
.orbit-events{list-style:none;margin-top:2rem;display:flex;flex-direction:column}
.orbit-events li{
  padding:.72rem 0 .72rem 1rem;font-size:.92rem;line-height:1.5;
  border-left:1px solid var(--hairline);
  transition:border-color .3s,background .3s;cursor:default;
}
.orbit-events li:hover,.orbit-events li.hot{border-left-color:var(--amber);background:linear-gradient(90deg,rgba(242,200,148,.07),transparent 70%)}
.oy{display:block;font-size:.74rem;font-style:italic;color:var(--amber);letter-spacing:.1em}
.orbit-fig{margin:0}
#orbit-svg{width:100%;height:auto;display:block}
figcaption{font-size:.74rem;font-style:italic;color:var(--faint);margin-top:1rem;letter-spacing:.05em}

.oring{
  fill:none;stroke:rgba(233,234,242,.12);stroke-width:1;stroke-dasharray:1 6;stroke-linecap:round;
  transform-box:fill-box;transform-origin:center;animation:orbitdrift 140s linear infinite;
}
.oring.oring-major{stroke:rgba(233,234,242,.2);stroke-dasharray:none;animation:none}
@keyframes orbitdrift{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.oring{animation:none}}
.odot{fill:var(--amber);transition:r .2s}
.odot-halo{fill:none;stroke:rgba(242,200,148,.0);stroke-width:1;transition:stroke .3s}
.og.hot .odot-halo{stroke:rgba(242,200,148,.55)}
.og.hot .odot{fill:var(--star)}
.oyear{font-family:var(--mono);font-size:13px;fill:rgba(233,234,242,.6);font-style:italic}
.og.hot .oyear{fill:var(--amber)}
.ocore{fill:var(--star)}

/* ——— season chart ——— */
#season{padding-top:12vh}
.season-head{max-width:46rem}
.chart-panel{
  margin:3.5rem 0 0;max-width:76rem;
  background:var(--panel);
  border:1px solid var(--hairline);border-radius:4px;
  padding:clamp(1rem,3vw,2.4rem);
}
#chart{width:100%;height:auto;display:block}
.chart-grid line{stroke:rgba(233,234,242,.09);stroke-width:1}
.chart-grid .vline{stroke:rgba(233,234,242,.05)}
.chart-ax text{fill:var(--faint);font-size:12.5px;font-style:italic;text-anchor:end}
.chart-ax .ax-x{text-anchor:middle}
.cdot .dot{transition:r .25s var(--ease-out)}
.cdot .halo{
  fill:none;stroke:rgba(233,234,242,0);stroke-width:1;transition:stroke .3s;
  animation:dotbreathe 3.4s ease-in-out infinite;
}
.cdot:nth-of-type(2) .halo{animation-delay:.6s}
.cdot:nth-of-type(3) .halo{animation-delay:1.2s}
.cdot:nth-of-type(4) .halo{animation-delay:1.8s}
.cdot:nth-of-type(5) .halo{animation-delay:2.4s}
.cdot:nth-of-type(6) .halo{animation-delay:3s}
@keyframes dotbreathe{0%,100%{stroke:rgba(233,234,242,0)}50%{stroke:rgba(233,234,242,.22)}}
@media (prefers-reduced-motion:reduce){.cdot .halo{animation:none}}
.cdot text{fill:var(--faint);font-size:12.5px;font-style:italic;transition:fill .3s}
.cdot.hot .dot{r:8}
.cdot.hot .halo{animation:none;stroke:rgba(233,234,242,.5)}
.cdot.hot text{fill:var(--star)}
.c-star{fill:var(--star)}.c-blue{fill:var(--blue)}.c-amber{fill:var(--amber)}.c-teal{fill:var(--teal)}

.shows{
  list-style:none;max-width:76rem;
  margin:4rem 0 16vh;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);
}
.show{
  background:var(--panel);padding:1.8rem 1.6rem;display:flex;gap:1.1rem;
  transition:background .3s;
}
.show.hot,.show:hover{background:rgba(20,26,40,.82)}
.show-no{color:var(--teal);font-size:.8rem;font-style:italic;padding-top:.3rem}
.show h3{font-size:1.02rem;font-weight:500;letter-spacing:.02em}
.show-when{font-size:.74rem;color:var(--amber);font-style:italic;margin:.45rem 0 .7rem;letter-spacing:.04em}
.show p{font-size:.92rem}

/* ——— star-stuff ——— */
blockquote{margin:1.8rem 0;padding-left:1.2rem;border-left:2px solid var(--teal)}
blockquote p{font-size:1.12rem;line-height:1.6;color:var(--star);font-weight:500}
blockquote cite{display:block;margin-top:.8rem;font-style:italic;font-size:.8rem;color:var(--faint)}
.tie{margin-top:1.6rem;font-size:.8rem;font-style:italic;color:var(--faint)}
.tie a{color:var(--teal)}

/* ——— membership ——— */
#membership{padding-top:14vh}
.mem-head{max-width:46rem}
.tiers{
  list-style:none;margin-top:3.4rem;max-width:82rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;
}
.tier{
  border:1px solid var(--hairline);border-radius:4px;
  background:var(--panel);
  padding:1.8rem 1.5rem;
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease-out),border-color .35s;
}
.tier:hover{transform:translateY(-6px);border-color:rgba(233,234,242,.32)}
.tier-o{border-color:rgba(242,200,148,.4);background:linear-gradient(180deg,rgba(242,200,148,.06),rgba(9,11,17,.72) 45%)}
.tier-o:hover{border-color:var(--amber)}
.tier-class{font-size:.68rem;letter-spacing:.16em;color:var(--faint);font-style:italic}
.tier h3{font-size:1.3rem;font-weight:500;margin:.7rem 0 .2rem}
.tier-price{font-size:.92rem;color:var(--dim);margin-bottom:1rem}
.tier-price strong{font-family:var(--disp);font-weight:700;font-size:1.5rem;color:var(--star)}
.tier-note{font-size:.88rem;flex-grow:1}
.tier-perks{list-style:none;margin-top:1.3rem;border-top:1px solid var(--hairline);padding-top:1.1rem}
.tier-perks li{
  font-size:.86rem;color:var(--dim);padding:.28rem 0 .28rem 1.2rem;position:relative;
}
.tier-perks li::before{content:"·";position:absolute;left:.2rem;color:var(--teal);font-weight:700}
.tier-foot{margin:2.2rem 0 0;font-size:.9rem;color:var(--faint);font-style:italic}

/* ——— visit ——— */
#visit{padding-top:16vh;padding-bottom:10vh}
.visit-grid{min-height:88vh;display:flex;align-items:flex-start;padding-top:8vh}
.visit-copy{max-width:36rem}
.visit-facts{margin-top:2.4rem;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2.4rem}
.visit-facts dt{font-size:.7rem;letter-spacing:.16em;color:var(--teal);font-style:italic}
.visit-facts dd{margin-top:.35rem;font-size:.95rem;color:var(--dim)}

.tonight{
  max-width:76rem;margin-top:4vh;
  border:1px solid var(--hairline);border-radius:4px;background:var(--panel);
  padding:1.5rem 1.8rem;
}
.tonight h3{font-size:.76rem;font-weight:500;letter-spacing:.14em;color:var(--amber);font-style:italic;margin-bottom:1.1rem}
.tonight-strip{list-style:none;display:grid;grid-template-columns:repeat(5,auto);gap:1rem 2.6rem;justify-content:start}
.tonight-strip li{display:flex;flex-direction:column;gap:.2rem;font-size:.95rem}
.t-k{font-size:.68rem;letter-spacing:.16em;color:var(--faint);font-style:italic}
.tonight-note{margin-top:1.3rem;font-size:.72rem;font-style:italic;color:var(--faint)}

/* ——— footer ——— */
.site-foot{
  min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;padding:20vh 1.5rem 3rem;gap:1.6rem;
}
.foot-line{
  font-family:var(--disp);font-weight:300;letter-spacing:.1em;
  font-size:clamp(1.2rem,2.6vw,1.9rem);color:var(--star);
}
.foot-nav{display:flex;gap:1.8rem;flex-wrap:wrap;justify-content:center}
.foot-nav a{color:var(--dim);text-decoration:none;font-size:.86rem;letter-spacing:.06em}
.foot-nav a:hover{color:var(--star)}
.foot-addr{font-size:.72rem;letter-spacing:.12em;color:var(--faint);font-style:italic}
.credit{font-size:.74rem;color:var(--dim);margin-top:1.2rem}
.credit a{color:var(--dim)}
.credit a:hover{color:var(--star)}

/* ——— telemetry tag ——— */
.telemetry{
  position:fixed;bottom:.9rem;left:1.1rem;z-index:40;
  font-size:.66rem;font-style:italic;color:rgba(233,234,242,.3);
  letter-spacing:.08em;pointer-events:none;
}

/* ——— responsive ——— */
@media (max-width:1080px){
  .century-grid{grid-template-columns:1fr;gap:3rem}
  .orbit-fig{max-width:34rem}
  .shows{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  /* header scrolls away on small screens instead of floating over content */
  .top{position:absolute;padding:1.1rem 1.2rem;gap:1rem;align-items:center}
  .wordmark{font-size:.88rem;letter-spacing:.16em}
  .top nav{gap:.85rem}
  .top nav a{font-size:.76rem;letter-spacing:.02em}
  .epoch{display:none}
  .hero .eyebrow{font-size:.66rem;letter-spacing:.12em}
  .hero{padding-bottom:16vh}
  .scroll-hint{left:1.4rem;right:auto}
  .statrow{grid-template-columns:1fr 1fr}
  .shows{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .visit-facts{grid-template-columns:1fr}
  .tonight-strip{grid-template-columns:1fr 1fr}
  .stage-intro{align-items:flex-end;padding-bottom:10vh}
  .intro-right{justify-content:flex-start}
  .telemetry{display:none}
  /* SVG figures: scale label type up so it stays legible at phone width */
  .oyear{font-size:22px}
  .odot{r:7}
  .chart-ax text,.cdot text{font-size:19px}
}