/* PearlSat website · shared styles
   Layout: one deep-night column of "mission bands"; each band reads like a ground-station panel.
   Dark-only by design (night sky). Brand: ASU navy + amber gold, Michroma / IBM Plex. */
:root{
  --night:#0D0E2B;      /* page ground, deeper than ASU navy */
  --navy:#1A1B4B;       /* ASU navy: panels */
  --panel:#202259;
  --deep:#080920;       /* consoles and screens */
  --line:rgba(185,184,214,.18);
  --gold:#FFB606;       /* ASU amber */
  --gold-soft:rgba(255,182,6,.14);
  --pearl:#F4F2F7;      /* primary text */
  --mist:#B9B8D6;       /* secondary text */
  --dim:#8C8BB3;
  --ok:#7FD6B5; --warn:#FF8A65; --sea:#4FA3D9;
  --f-display:'Michroma','Eurostile','Arial Narrow',sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--pearl);font-family:var(--f-body);font-size:16px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--night)}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--gold);color:var(--navy);padding:8px 14px;border-radius:6px;z-index:40;font-weight:600}
.skip:focus{left:max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0;letter-spacing:.04em}
h2{font-size:clamp(22px,3.2vw,32px);line-height:1.25}
h3{font-size:15px;letter-spacing:.06em;line-height:1.4}
p{margin:0}
.lede{color:var(--mist);max-width:64ch}
.small{font-size:13px;color:var(--dim)}
.num{font-variant-numeric:tabular-nums}
sup.ref{font-family:var(--f-mono);font-size:10px;color:var(--gold);margin-left:2px}
sup.ref a{text-decoration:none}
button{font:inherit;cursor:pointer}

/* nav */
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(13,14,43,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--pearl);font-family:var(--f-display);font-size:15px;letter-spacing:.12em;min-height:44px}
.brand b{color:var(--gold);font-weight:400}
nav.top ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap}
nav.top ul a{display:flex;align-items:center;min-height:40px;padding:6px 11px;border-radius:6px;color:var(--mist);text-decoration:none;font-size:14px}
nav.top ul a:hover{color:var(--pearl);background:var(--panel)}
nav.top ul a[aria-current="page"]{color:var(--gold)}
nav.top ul a.cta{color:var(--navy);background:var(--gold);font-weight:600}
.menu-btn{display:none;background:transparent;border:1px solid var(--line);color:var(--pearl);border-radius:8px;min-height:44px;padding:0 14px;font-family:var(--f-mono);font-size:13px;letter-spacing:.1em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:var(--navy);border:0;border-radius:8px;padding:10px 18px;font-weight:600;min-height:44px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--pearl);border:1px solid var(--line)}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.5;cursor:default}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding-block:72px 64px}
.hero h1{font-size:clamp(34px,6vw,64px);line-height:1.08;letter-spacing:.06em;margin-top:14px}
.hero h1 b{color:var(--gold);font-weight:400}
.hero .sub{margin-top:20px;font-size:18px;color:var(--mist);max-width:48ch}
.mark{width:100%;max-width:400px;justify-self:center;aspect-ratio:1;height:auto}
.mark .sat{transform-origin:100px 100px;animation:orbit 14s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.count{margin-top:32px;display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.count .cell{background:var(--navy);border:1px solid var(--line);border-radius:8px;padding:10px 14px;min-width:78px}
.count .n{font-family:var(--f-mono);font-size:28px;font-variant-numeric:tabular-nums;line-height:1.1}
.count .u{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.count .label{align-self:center;color:var(--mist);font-size:14px;max-width:22ch}
.alert{margin-top:24px;display:inline-flex;gap:10px;align-items:center;background:var(--gold-soft);border:1px solid rgba(255,182,6,.4);color:var(--pearl);border-radius:999px;padding:8px 16px;font-size:14px}
.alert i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(255,182,6,.2);flex:none}

section.band{padding-block:80px;border-bottom:1px solid var(--line)}
.head{display:grid;gap:12px;margin-bottom:36px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;gap:10px;align-content:start;min-width:0}
.card .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.card p{color:var(--mist);font-size:15px}
.note{margin-top:20px;border-left:0;background:var(--gold-soft);border:1px solid rgba(255,182,6,.3);border-radius:10px;padding:14px 16px;color:var(--pearl);font-size:15px;max-width:80ch}

/* craft list */
.craft{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.part{border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:8px;align-content:start;min-width:0}
.part .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.part p{color:var(--mist);font-size:15px}

/* specs */
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:28px}
.spec{background:var(--night);padding:22px 20px;display:grid;gap:6px;align-content:start;min-width:0}
.spec .v{font-family:var(--f-display);font-size:21px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.spec .v small{font-family:var(--f-mono);font-size:13px;color:var(--gold);margin-left:4px}
.spec .k{color:var(--mist);font-size:14px;line-height:1.45}
details.sources{margin-top:18px;color:var(--mist);font-size:14px}
details.sources summary{cursor:pointer;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);min-height:36px;display:flex;align-items:center}
details.sources ol{margin:8px 0 0;padding-left:22px;display:grid;gap:6px}
details.sources a{word-break:break-word}

/* sim teaser */
.teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.teaser .screen{background:var(--deep);border:1px solid var(--line);border-radius:12px;padding:16px;font-family:var(--f-mono);font-size:12px;color:#CFCDE6;overflow:hidden}
.teaser .screen svg{width:100%;height:auto;display:block}

/* timeline */
.tl{list-style:none;margin:0;padding:0;display:grid}
.tl li{display:grid;grid-template-columns:150px 22px minmax(0,1fr) auto;gap:16px;align-items:start;padding-block:14px;border-top:1px solid var(--line)}
.tl li:first-child{border-top:0}
.tl .d{font-family:var(--f-mono);font-size:13px;color:var(--mist);font-variant-numeric:tabular-nums;padding-top:2px}
.tl .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--dim);margin-top:6px}
.tl li.done .dot{background:var(--ok);border-color:var(--ok)}
.tl li.next .dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(255,182,6,.2)}
.tl .w b{display:block;font-weight:600}
.tl .w span{color:var(--mist);font-size:14px}
.tl li.done .w{opacity:.65}
.pill{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.done .pill{color:var(--ok);border-color:rgba(127,214,181,.4)}
.next .pill{color:var(--navy);background:var(--gold);border-color:var(--gold)}

/* mission log */
.log{display:grid;gap:14px}
.entry{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:20px}
.entry .d{font-family:var(--f-mono);font-size:13px;color:var(--gold)}
.entry h3{margin-bottom:6px}
.entry p{color:var(--mist);font-size:15px}
.entry a{font-size:14px}
.entry.upcoming{background:transparent;border-style:dashed}
.entry.upcoming .d{color:var(--dim)}

/* team */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;margin-bottom:56px}
.story blockquote{margin:0;font-family:var(--f-display);font-size:clamp(20px,2.6vw,26px);line-height:1.45;letter-spacing:.02em}
.story blockquote b{color:var(--gold);font-weight:400}
.crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.member{border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start}
.avatar{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#E6E2EF 50%,#A9A3C4);display:grid;place-items:center;font-family:var(--f-display);font-size:16px;color:var(--navy)}
.member b{font-weight:600;display:block}
.member .role{font-family:var(--f-mono);font-size:12px;color:var(--gold);letter-spacing:.06em;display:block;margin:2px 0 6px}
.member p{color:var(--mist);font-size:14px}
.organisers{margin-top:40px;color:var(--dim);font-size:14px;max-width:80ch}

/* contact */
.links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.link{background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:8px;align-content:start;min-width:0}
.link .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.link .v{font-family:var(--f-display);font-size:15px;letter-spacing:.03em;word-break:break-word;color:var(--pearl);text-decoration:none}
.link a.v:hover{color:var(--gold)}
.link button{justify-self:start;background:transparent;border:1px solid var(--line);color:var(--mist);border-radius:6px;padding:6px 12px;font-size:13px;min-height:36px}
footer{padding-block:32px;color:var(--dim);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--mist)}

/* responsive */
@media (max-width:980px){
  .hero .wrap,.story,.teaser{grid-template-columns:minmax(0,1fr)}
  .mark{max-width:240px;grid-row:1}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards,.craft,.crew{grid-template-columns:repeat(2,minmax(0,1fr))}
  .links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .menu-btn{display:inline-flex;align-items:center}
  nav.top .wrap{flex-wrap:wrap}
  nav.top ul{display:none;width:100%;flex-direction:column;padding-bottom:8px}
  nav.top.open ul{display:flex}
  nav.top ul a{min-height:44px}
}
@media (max-width:560px){
  section.band{padding-block:56px}
  .tl li{grid-template-columns:22px minmax(0,1fr);row-gap:4px}
  .tl .d{grid-column:2;order:-1}
  .tl .dot{grid-row:1 / span 2}
  .tl .pill{grid-column:2;justify-self:start}
  .specs,.cards,.craft,.crew,.links{grid-template-columns:minmax(0,1fr)}
  .entry{grid-template-columns:minmax(0,1fr);gap:6px}
  .hero .wrap{padding-block:40px}
}
@media (prefers-reduced-motion:reduce){
  .mark .sat{animation:none}
  html{scroll-behavior:auto}
}

/* ───────────────── simulator page ───────────────── */
.simhead{padding:48px 0 24px;border-bottom:1px solid var(--line)}
.simhead h1{font-family:var(--f-display);font-size:clamp(24px,4vw,40px);margin:8px 0 10px;letter-spacing:.02em}
.simhead p{color:var(--mist);max-width:75ch;margin:0}
.sim{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;padding-block:20px 60px}
.pane{background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}
.pane h3{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;font-weight:500}
.pane canvas{display:block;width:100%;border-radius:8px;background:var(--deep)}
.ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.ctrl .btn{min-width:96px}
.ctrl select,.params select{background:var(--deep);color:var(--pearl);border:1px solid var(--line);border-radius:8px;min-height:44px;padding:0 10px;font:inherit}
.clock{font-family:var(--f-mono);color:var(--mist);margin-left:auto;font-size:14px}
input[type=range]{width:100%;accent-color:var(--gold);min-height:32px}
.jumps{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.jumps button{background:transparent;color:var(--mist);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font:12px var(--f-mono);cursor:pointer;min-height:36px}
.jumps button:hover{color:var(--pearl);border-color:var(--gold)}
.states{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.st{border:1px solid var(--line);border-radius:8px;padding:8px 4px;text-align:center;font:12px var(--f-mono);color:var(--dim)}
.st.past{color:var(--mist);border-color:rgba(127,214,181,.35)}
.st.on{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:600}
.phase h4{margin:0 0 4px;font-size:16px}.phase p{margin:0;color:var(--mist);font-size:14px}
.bar{height:6px;background:var(--deep);border-radius:4px;overflow:hidden;margin:12px 0 4px}.bar i{display:block;height:100%;background:var(--ok);width:0}
.small{font:12px var(--f-mono);color:var(--dim)}
.votes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 6px}
.v{border:1px solid var(--line);border-radius:8px;padding:8px;font-size:13px}
.v b{display:block;font-weight:500}.v em{font:12px var(--f-mono);color:var(--dim);font-style:normal}
.v::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim);margin-right:6px;vertical-align:middle}
.v.on{border-color:var(--ok)}.v.on::before{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.reads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-radius:8px;overflow:hidden}
.reads div{background:var(--deep);padding:8px 10px}
.reads span{display:block;font:11px var(--f-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.reads b{font:500 15px var(--f-mono)}
.views{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.views .cap{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font:12px var(--f-mono);color:var(--dim)}
.wide{grid-column:1/-1}
.feed{background:var(--deep);border-radius:8px;height:220px;overflow:auto;margin:0;padding:10px 12px;font:12px/1.6 var(--f-mono);color:var(--ok);white-space:pre}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font:12px var(--f-mono);color:var(--dim)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.params{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.params label{display:block;font-size:14px}.params output{font-family:var(--f-mono);color:var(--gold);float:right}
.params small{display:block;color:var(--dim);font-size:12px}
.result{border:1px solid var(--gold);background:var(--gold-soft);border-radius:12px;padding:14px 16px}
.result p{margin:0}.result .warn{display:block;margin-top:6px;color:var(--pearl)}
.fw{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.fw li{background:var(--deep);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--mist)}.fw li b{display:block;color:var(--pearl);font:500 14px var(--f-mono)}
@media (max-width:980px){.sim{grid-template-columns:1fr}.params{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.views{grid-template-columns:1fr 1fr}.views>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.views{grid-template-columns:1fr}.params{grid-template-columns:1fr}.votes{grid-template-columns:1fr}.states{grid-template-columns:repeat(2,1fr)}.clock{margin-left:0;width:100%}}