/* ============================================================
   chetanmashru.com
   One stylesheet. No dependencies. No web fonts.
   ============================================================ */

:root{
  --bg:#05060a;
  --bg-soft:#0a0b12;
  --ink:#eceaf4;
  --ink-2:#a8a3ba;
  --ink-3:#6f6b82;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.055);

  --accent:#a394ea;          /* overridden per act */
  --accent-dim:rgba(163,148,234,.16);

  --dust:#a394ea;
  --life:#4fd1a5;
  --minds:#e0a458;
  --machines:#4dd0e1;

  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --space:clamp(4.5rem,11vw,9rem);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  counter-reset:stop;
  overflow-x:hidden;
}

.wrap{width:min(1120px,100% - 2.75rem);margin-inline:auto;position:relative;z-index:2}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
em{font-style:italic;color:#fff}
strong{color:#fff;font-weight:600}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--bg);
  padding:.75rem 1.25rem;border-radius:0 0 .5rem 0;
  font:600 .9rem/1 var(--sans);
}
.skip:focus{left:0}

/* ---------- scroll progress ---------- */
.progress{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:100;
  background:rgba(255,255,255,.06);
}
.progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--dust) 0%,var(--life) 33%,var(--minds) 63%,var(--machines) 100%);
  background-size:100vw 100%;
  background-repeat:no-repeat;
}

/* ---------- starfield ---------- */
.stars{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 12%,rgba(255,255,255,.55),transparent),
    radial-gradient(1px 1px at 63% 27%,rgba(255,255,255,.40),transparent),
    radial-gradient(1.2px 1.2px at 84% 8%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 31% 68%,rgba(255,255,255,.32),transparent),
    radial-gradient(1.6px 1.6px at 71% 82%,rgba(255,255,255,.38),transparent),
    radial-gradient(1px 1px at 9% 44%,rgba(255,255,255,.28),transparent),
    radial-gradient(1px 1px at 47% 91%,rgba(255,255,255,.34),transparent),
    radial-gradient(1.2px 1.2px at 92% 57%,rgba(255,255,255,.30),transparent);
  background-size:520px 520px;
  opacity:.85;
  animation:drift 240s linear infinite;
}
@keyframes drift{to{background-position:520px 520px}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:6rem 0 4rem;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:auto 50% -30% 50%;
  width:min(1300px,100%);aspect-ratio:2/1;translate:-50% 0;
  background:radial-gradient(ellipse at 50% 100%,rgba(163,148,234,.22),rgba(77,208,225,.07) 42%,transparent 70%);
  pointer-events:none;
}

.eyebrow{
  font:500 .74rem/1 var(--mono);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:2.25rem;
}

.hero h1{
  font-size:clamp(3.1rem,12.5vw,8.75rem);
  letter-spacing:-.035em;
  background:linear-gradient(175deg,#ffffff 8%,#cfc7ee 55%,#8f89ad 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  margin-bottom:1.75rem;
}

.hero-sub{
  font-family:var(--serif);
  font-size:clamp(1.1rem,1rem + .85vw,1.6rem);
  font-style:italic;
  color:var(--ink-2);
  max-width:34ch;margin-inline:auto;line-height:1.5;
}

.hero-scroll{
  margin-top:4.5rem;
  font:500 .72rem/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
}
.hero-scroll span{position:relative;padding-bottom:2.4rem;display:inline-block}
.hero-scroll span::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:1px;height:1.8rem;
  background:linear-gradient(180deg,var(--ink-3),transparent);
}

/* ============================================================
   INTRO / THESIS
   ============================================================ */
.intro{padding:var(--space) 0 calc(var(--space) * .7)}

.intro h2{
  font-size:clamp(2.5rem,8vw,5.25rem);
  letter-spacing:-.03em;
  margin-bottom:1.5rem;
  color:#fff;
}
.deck{
  font:500 .78rem/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--dust);
  margin-bottom:3.25rem;
}
.thesis{
  max-width:60ch;
  font-size:clamp(1.075rem,1rem + .35vw,1.28rem);
  line-height:1.68;
  color:var(--ink-2);
  border-left:2px solid var(--dust);
  padding-left:clamp(1.25rem,3vw,2.25rem);
}
.thesis p:last-child{color:#fff;font-family:var(--serif);font-style:italic;font-size:1.12em}

/* ============================================================
   ACTS
   ============================================================ */
.act{position:relative;padding:calc(var(--space) * .75) 0}
.act--dust{--accent:var(--dust)}
.act--life{--accent:var(--life)}
.act--minds{--accent:var(--minds)}
.act--machines{--accent:var(--machines)}

.act::before{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:min(1400px,100%);height:min(700px,80vh);
  background:radial-gradient(ellipse at 50% 0%,var(--accent),transparent 68%);
  opacity:.10;pointer-events:none;
}

.act-head{
  max-width:56ch;
  padding-bottom:clamp(3rem,7vw,5rem);
  border-bottom:1px solid var(--line-soft);
  margin-bottom:clamp(3rem,7vw,5rem);
}
.act-num{
  font:600 .74rem/1 var(--mono);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;
}
.act-title{
  font-size:clamp(2.75rem,9vw,6rem);
  letter-spacing:-.035em;
  color:#fff;margin-bottom:.85rem;
}
.act-range{
  font:500 .8rem/1.4 var(--mono);
  color:var(--ink-3);margin-bottom:1.75rem;
}
.act-desc{
  font-size:clamp(1.05rem,1rem + .3vw,1.2rem);
  color:var(--ink-2);line-height:1.65;
}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{
  content:"";position:absolute;top:.5rem;bottom:.5rem;left:11px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
}

.stop{position:relative;counter-increment:stop;padding-left:3.25rem;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
.stop:last-child{margin-bottom:0}

.stop::before{
  content:counter(stop,decimal-leading-zero);
  position:absolute;left:11px;top:1.6rem;translate:-50% 0;
  width:23px;height:23px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg);
  border:1px solid var(--accent);
  color:var(--accent);
  font:600 .58rem/1 var(--mono);
  letter-spacing:.02em;
  box-shadow:0 0 0 5px var(--bg),0 0 18px -2px var(--accent);
  z-index:2;
}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line-soft);
  border-radius:.9rem;
  padding:clamp(1.5rem,3.5vw,2.25rem);
  transition:border-color .35s ease,transform .35s ease;
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 38%,transparent);transform:translateY(-2px)}

.stop-time{
  font:500 .76rem/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.9rem;
}
.card h4{
  font-size:clamp(1.4rem,1.15rem + 1.15vw,2.05rem);
  letter-spacing:-.02em;color:#fff;margin-bottom:1rem;
}
.card p{color:var(--ink-2)}

.copied{
  margin-top:1.5rem;padding-top:1.1rem;
  border-top:1px solid var(--line-soft);
  font:500 .78rem/1.5 var(--mono)!important;
  color:var(--ink) !important;
  display:flex;flex-wrap:wrap;gap:.65rem;align-items:baseline;
}
.copied span{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);
}

/* desktop: centred spine, alternating cards */
@media (min-width:900px){
  .timeline::before{left:50%}
  .stop{
    width:calc(50% - 2.75rem);
    padding-left:0;
    margin-bottom:clamp(2rem,3.5vw,3rem);
  }
  .stop:nth-child(even){margin-left:auto}
  .stop::before{
    left:auto;right:-2.75rem;top:2rem;
    translate:50% 0;
  }
  .stop:nth-child(even)::before{right:auto;left:-2.75rem;translate:-50% 0}
}

/* ============================================================
   CODA
   ============================================================ */
.coda{
  --accent:var(--machines);
  position:relative;
  padding:var(--space) 0;
  text-align:center;
}
.coda::before{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:min(1200px,100%);height:100%;
  background:radial-gradient(ellipse at 50% 50%,rgba(77,208,225,.13),transparent 62%);
  pointer-events:none;
}
.coda h3{
  font-size:clamp(2.25rem,7vw,4.25rem);
  letter-spacing:-.03em;color:#fff;margin-bottom:2.25rem;
}
.coda p{
  max-width:62ch;margin-inline:auto;
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  color:var(--ink-2);line-height:1.72;
}
.coda-sign{
  margin-top:2.75rem !important;
  font-family:var(--serif)!important;font-style:italic;
  color:var(--ink)!important;font-size:1.15rem!important;
}

/* ============================================================
   QUESTIONS  (AEO block)
   ============================================================ */
.qa{padding:var(--space) 0;border-top:1px solid var(--line-soft)}
.qa h2{
  font-size:clamp(2rem,6vw,3.5rem);letter-spacing:-.03em;
  color:#fff;margin-bottom:clamp(2.5rem,6vw,4rem);
}
.qa-item{
  max-width:64ch;
  padding:1.9rem 0;
  border-top:1px solid var(--line-soft);
}
.qa-item:last-child{border-bottom:1px solid var(--line-soft)}
.qa-item h3{
  font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  color:#fff;margin-bottom:.85rem;letter-spacing:-.015em;
}
.qa-item p{color:var(--ink-2);margin:0}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  --accent:var(--dust);
  position:relative;padding:var(--space) 0;
  border-top:1px solid var(--line-soft);
}
.contact::before{
  content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:min(1200px,100%);height:70%;
  background:radial-gradient(ellipse at 50% 100%,rgba(163,148,234,.15),transparent 65%);
  pointer-events:none;
}
.contact h2{
  font-size:clamp(2rem,6vw,3.5rem);letter-spacing:-.03em;
  color:#fff;margin-bottom:1.1rem;
}
.contact-intro{max-width:48ch;color:var(--ink-2);margin-bottom:3rem}

.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){
  .contact-grid{grid-template-columns:1fr 1fr;align-items:start}
  .contact-lead{position:sticky;top:6rem}
}
.contact-lead .contact-intro{margin-bottom:0}
form{max-width:36rem}
.field{margin-bottom:1.6rem}
label{
  display:block;
  font:500 .72rem/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.7rem;
}
input,textarea{
  width:100%;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:.6rem;
  color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.6;
  padding:.9rem 1.05rem;
  transition:border-color .25s ease,background .25s ease;
}
textarea{resize:vertical;min-height:8rem}
input:hover,textarea:hover{border-color:rgba(255,255,255,.2)}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px var(--accent-dim);
}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#e8697d}

.error{
  margin:.6rem 0 0;
  font:500 .82rem/1.5 var(--sans);
  color:#f08a9a;
}

/* honeypot: off-screen, never display:none (bots skip those) */
.hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;opacity:0}

button{
  margin-top:.5rem;
  background:var(--ink);color:var(--bg);
  border:none;border-radius:.6rem;
  font:600 .95rem/1 var(--sans);letter-spacing:.01em;
  padding:1.05rem 2.4rem;cursor:pointer;
  transition:transform .2s ease,opacity .2s ease,box-shadow .25s ease;
}
button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(255,255,255,.5)}
button:disabled{opacity:.5;cursor:progress}

.form-status{
  margin-top:1.35rem;min-height:1.5rem;
  font:500 .92rem/1.6 var(--sans);color:var(--ink-2);
}
.form-status.ok{color:var(--life)}
.form-status.bad{color:#f08a9a}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  padding:clamp(3.5rem,8vw,5.5rem) 0 clamp(3rem,6vw,4rem);
  border-top:1px solid var(--line-soft);
  text-align:center;
}
.foot-name{
  font-family:var(--serif);font-size:1.5rem;
  color:#fff;letter-spacing:-.02em;margin-bottom:.65rem;
}
.foot-line{
  font-family:var(--serif);font-style:italic;
  color:var(--ink-2);margin-bottom:2rem;
}
.foot-meta{
  font:500 .72rem/1.6 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ============================================================
   REVEAL — progressive enhancement only.
   No .js class (JS disabled) => everything visible. Always.
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:.25rem}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stars{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .card:hover{transform:none}
  button:hover:not(:disabled){transform:none}
}

/* ---------- print ---------- */
@media print{
  .stars,.progress,.hero::before,.act::before,.coda::before,.contact::before{display:none}
  body{background:#fff;color:#000}
  .card,.thesis{border-color:#ccc}
  h1,h2,h3,h4,.hero h1{color:#000!important;background:none!important;-webkit-text-fill-color:#000}
}

/* ============================================================
   ORRERY — live solar system behind the hero
   ============================================================ */
#orrery{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
  opacity:.92;
  /* Strongest at the bottom where the Sun sits, fading toward the top so
     the orbit arcs pass behind the name without competing with it. */
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 26%,rgba(0,0,0,.42) 58%,rgba(0,0,0,.12) 82%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 26%,rgba(0,0,0,.42) 58%,rgba(0,0,0,.12) 82%,transparent 100%);
  pointer-events:none;
}
.hero .wrap{z-index:3}

/* ============================================================
   THE BILL
   ============================================================ */
.bill{
  --accent:#e8846b;
  position:relative;
  padding:var(--space) 0;
  border-top:1px solid var(--line-soft);
}
.bill::before{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:min(1200px,100%);height:60%;
  background:radial-gradient(ellipse at 50% 0%,rgba(232,132,107,.13),transparent 66%);
  pointer-events:none;
}
.bill-eyebrow{
  font:600 .72rem/1.5 var(--mono);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;
}
.bill h3{
  font-size:clamp(2.5rem,8vw,4.75rem);
  letter-spacing:-.035em;color:#fff;margin-bottom:2.5rem;
}
.bill p{
  max-width:60ch;
  font-size:clamp(1.05rem,1rem + .35vw,1.22rem);
  color:var(--ink-2);line-height:1.75;
}
.bill-close{
  margin-top:2.5rem !important;
  padding-left:clamp(1.25rem,3vw,2rem);
  border-left:2px solid var(--accent);
  color:var(--ink)!important;
  font-family:var(--serif)!important;
  font-style:italic;
  font-size:clamp(1.12rem,1rem + .5vw,1.35rem)!important;
}

/* ============================================================
   TIME INTERLUDE
   ============================================================ */
.interlude{
  --accent:var(--machines);
  position:relative;
  padding:var(--space) 0;
  border-top:1px solid var(--line-soft);
}
.interlude-eyebrow{
  font:600 .72rem/1 var(--mono);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:1.25rem;
}
.interlude h3{
  font-size:clamp(2.1rem,6.5vw,3.75rem);
  letter-spacing:-.03em;color:#fff;margin-bottom:2.25rem;
}
.interlude p{
  max-width:58ch;
  font-size:clamp(1.05rem,1rem + .35vw,1.22rem);
  color:var(--ink-2);line-height:1.78;
}
.interlude em{color:#fff}

/* ============================================================
   LIVE SKY
   ============================================================ */
.sky{
  --accent:var(--machines);
  position:relative;
  padding:var(--space) 0;
  border-top:1px solid var(--line-soft);
}
.sky::before{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:min(1200px,100%);height:70%;
  background:radial-gradient(ellipse at 50% 0%,rgba(77,208,225,.11),transparent 66%);
  pointer-events:none;
}
.sky-eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font:600 .72rem/1 var(--mono);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;
}
.sky-eyebrow svg{flex:none;opacity:.9}
.sky h3{
  font-size:clamp(2.25rem,7vw,4rem);
  letter-spacing:-.035em;color:#fff;margin-bottom:1.5rem;
}
.sky-lead{max-width:56ch;color:var(--ink-2);margin-bottom:clamp(2.5rem,5vw,3.5rem)}

.sky-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (min-width:860px){
  .sky-grid{grid-template-columns:minmax(280px,1fr) 1.15fr}
}

.sky-figure{margin:0}
#sky-dome{
  display:block;width:100%;aspect-ratio:1;
  max-width:420px;margin-inline:auto;
  background:
    radial-gradient(circle at 50% 50%,rgba(77,208,225,.07),transparent 70%),
    rgba(255,255,255,.02);
  border:1px solid var(--line-soft);
  border-radius:50%;
}
.sky-caption{
  margin-top:1rem;text-align:center;
  font:500 .74rem/1.6 var(--mono);
  color:var(--ink-3);letter-spacing:.04em;
}

.sky-meta{
  font:500 .8rem/1.6 var(--mono);
  color:var(--ink-3);margin-bottom:.5rem;letter-spacing:.02em;
}
.sky-meta:first-child{color:var(--ink-2)}

.sky-rows{list-style:none;margin:1.75rem 0 0;padding:0}
.sky-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:baseline;
  gap:.5rem .9rem;
  padding:.75rem 0;
  border-top:1px solid var(--line-soft);
  font:500 .88rem/1.5 var(--sans);
}
.sky-row:last-child{border-bottom:1px solid var(--line-soft)}
.sky-dot{
  width:9px;height:9px;border-radius:50%;
  align-self:center;
  box-shadow:0 0 10px -1px currentColor;
}
.sky-name{color:#fff;font-weight:600}
.sky-alt,.sky-dir{
  font-family:var(--mono);font-size:.78rem;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.sky-dir{color:var(--accent);min-width:2.6rem;text-align:right}
.sky-extra{
  grid-column:2 / -1;
  font:500 .78rem/1.5 var(--sans);
  color:var(--ink-3);
}
.sky-none{color:var(--ink-3);font-style:italic}
.sky-downlist{
  margin-top:1.25rem;
  font:500 .8rem/1.6 var(--sans);
  color:var(--ink-3);
}
.sky-note{
  margin-top:1.5rem;padding-top:1.25rem;
  border-top:1px solid var(--line-soft);
  font-size:.85rem;line-height:1.65;color:var(--ink-3);
}

/* If the astronomy fails for any reason, hide only the live parts —
   the explanatory prose above them still stands on its own. */
.sky-failed .sky-grid{display:none}

@media (prefers-reduced-motion:reduce){
  #orrery{opacity:.4}
}