/* ============================================================
   HELIOS — Solar Observatory
   void black field · incandescent solar gradient · hairline HUD
   ============================================================ */

:root{
  --void:#050505;
  --sun-1:#ff6a00;
  --sun-2:#ffc45e;
  --sun-3:#fff3d6;
  --danger:#ff3400;
  --hair:rgba(255,196,94,.25);
  --hair-soft:rgba(255,196,94,.12);
  --text:#e9e1d2;
  --muted:#bca98a;
  --panel:rgba(12,9,4,.72);
  --flare-load:0;
  --ease:cubic-bezier(.22,.7,.25,1);
  --ease-hot:cubic-bezier(.16,1,.3,1);
  --mono:'Space Mono', ui-monospace, monospace;
  --disp:'Unbounded', sans-serif;
  --body:'Archivo', sans-serif;
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1360px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth; scroll-padding-top:76px;
  scrollbar-color:rgba(255,106,0,.65) #050505;
}
html, body{ background:var(--void); color-scheme:dark; }
body{
  color:var(--text);
  font-family:var(--body);
  font-size:1rem;
  font-weight:350;
  line-height:1.6;
  font-optical-sizing:auto;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,196,94,.18);
  background:
    radial-gradient(circle at 82% 12%, rgba(255,106,0,.11), transparent 28rem),
    radial-gradient(circle at 8% 46%, rgba(255,196,94,.055), transparent 24rem),
    var(--void);
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#050505; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(to bottom, rgba(255,106,0,.86), rgba(255,196,94,.42));
  border:2px solid #050505;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(to bottom, var(--sun-1), var(--sun-2)); }
::selection{ background:var(--sun-1); color:var(--void); text-shadow:none; }

h1,h2,h3{ font-family:var(--disp); font-weight:500; line-height:1.15; text-wrap:balance; }
p{ text-wrap:pretty; }
a{ color:var(--sun-2); text-decoration:none; transition:color .25s var(--ease), border-color .25s var(--ease), text-shadow .25s var(--ease); }
a:hover{ color:var(--sun-3); }
:focus-visible{ outline:2px solid var(--sun-2); outline-offset:3px; border-radius:2px; }

main{ position:relative; overflow:hidden; }
main::before{
  content:""; position:absolute; left:0; right:0; top:100svh; bottom:0; z-index:0;
  pointer-events:none; opacity:.48;
  background:
    linear-gradient(120deg, transparent 0 18%, rgba(255,196,94,.045) 18.08%, transparent 18.28% 58%, rgba(255,106,0,.04) 58.08%, transparent 58.28%),
    repeating-linear-gradient(90deg, rgba(255,196,94,.035) 0 1px, transparent 1px 9rem),
    repeating-linear-gradient(0deg, rgba(255,196,94,.022) 0 1px, transparent 1px 4.5rem);
  mask-image:linear-gradient(to bottom, transparent, black 10rem, black calc(100% - 12rem), transparent);
}
main > *{ position:relative; z-index:1; }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--sun-1); color:var(--void);
  font-family:var(--mono); font-size:.8rem; padding:12px 18px;
}
.skip:focus{ position:fixed; left:12px; top:12px; color:var(--void); }

/* film grain over everything */
.grain{
  position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) } 20%{ transform:translate(-6%,3%) }
  40%{ transform:translate(4%,-5%) } 60%{ transform:translate(-3%,-4%) } 80%{ transform:translate(5%,5%) }
}

/* ============ boot / reveal animation ============ */
@keyframes rise{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
.bt{ animation:rise .95s cubic-bezier(.22,.7,.25,1) both; animation-delay:var(--d,0s); }

.rv{ opacity:0; transform:translateY(26px); transition:opacity .85s cubic-bezier(.22,.7,.25,1), transform .85s cubic-bezier(.22,.7,.25,1); transition-delay:var(--d,0s); }
.rv.in{ opacity:1; transform:none; }
/* revealed by the scroll-past sweep: appear instantly, no half-faded states */
.rv.fast{ transition:none; }
.flare-fig.fast .d, .flare-fig.fast .d-photo, .flare-fig.fast .f, .flare-fig.fast .lbl{ transition:none; }
.rv.fast .sec-rule{ animation:none; }

/* ============ header ============ */
.site-head{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2px 12px;
  padding: clamp(10px,2vw,22px) var(--pad);
}
.site-head::after{
  content:""; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:linear-gradient(90deg, rgba(255,196,94,.32), transparent 42%, rgba(255,196,94,.18));
  opacity:.5;
}
.brand{
  display:inline-flex; align-items:center; gap:.55em; min-height:44px;
  font-family:var(--disp); font-weight:600; font-size:.95rem; letter-spacing:0;
  color:var(--sun-3);
}
.brand-dot{
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--sun-3), var(--sun-1) 70%);
  box-shadow:0 0 12px rgba(255,106,0,.9);
}
.brand-sub{ font-family:var(--mono); font-weight:400; font-size:.66rem; color:var(--muted); letter-spacing:0; }
.site-head nav{ display:flex; }
.site-head nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 clamp(8px,1.6vw,18px);
  font-family:var(--mono); font-size:.72rem; letter-spacing:0; text-transform:uppercase;
  color:var(--text); border-bottom:1px solid transparent;
}
.site-head nav a:hover,
.site-head nav a:focus-visible{ color:var(--sun-2); border-bottom-color:var(--hair); text-shadow:0 0 14px rgba(255,106,0,.45); }

/* ============ hero ============ */
.hero{
  position:relative; min-height:100svh; min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--hair);
  background:#050505;
}
/* scrims: keep nav + lede legible over the star */
.hero::before{
  content:""; position:absolute; z-index:2; left:0; right:0; top:0; height:34%;
  background:
    linear-gradient(to bottom, rgba(5,5,5,.96), rgba(5,5,5,.62) 48%, transparent),
    repeating-linear-gradient(90deg, rgba(255,196,94,.08) 0 1px, transparent 1px 8.5rem);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:60%;
  background:
    linear-gradient(to top, rgba(5,5,5,.95) 10%, rgba(5,5,5,.52) 58%, transparent),
    radial-gradient(55rem 26rem at 8% 82%, rgba(255,106,0,.16), transparent 70%);
  pointer-events:none;
}
#sun{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero.no-webgl #sun{ display:none; }
.hero-scan{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.34;
  background:
    linear-gradient(112deg, transparent 0 31%, rgba(255,196,94,.08) 31.05%, transparent 31.35% 62%, rgba(255,196,94,.06) 62.05%, transparent 62.3%),
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.16) 3px 4px);
}
.hero-scan::before,
.hero-scan::after{
  content:""; position:absolute; border:1px solid var(--hair); opacity:.55;
}
.hero-scan::before{ inset:clamp(64px,9vh,92px) var(--pad) clamp(140px,19vh,190px); }
.hero-scan::after{
  width:12rem; height:12rem; right:calc(var(--pad) + 1rem); top:calc(50% - 6rem);
  border-radius:50%; border-color:rgba(255,243,214,.22); box-shadow:0 0 0 1.1rem rgba(255,196,94,.045);
}
.flare-wash{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:calc(var(--flare-load) * .55);
  background:
    radial-gradient(circle at 72% 42%, rgba(255,243,214,.45), transparent 18rem),
    radial-gradient(circle at 50% 50%, rgba(255,52,0,.26), transparent 42rem);
  mix-blend-mode:screen;
}
.sun-fallback{ display:none; position:absolute; inset:0; overflow:hidden; }
.hero.no-webgl .sun-fallback{
  display:block;
  --compact-size:min(96vw, 29rem);
  background:
    radial-gradient(circle at 24% 27%, rgba(255,243,214,.2), transparent 2.2rem),
    radial-gradient(circle at 50% 32%, rgba(255,196,94,.18), transparent 17rem),
    var(--void);
}
.hero.no-webgl .sun-fallback::before,
.hero.no-webgl .sun-fallback::after{
  content:""; position:absolute; left:50%; top:31%;
  width:var(--compact-size); aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.hero.no-webgl .sun-fallback::before{
  background:
    radial-gradient(circle at 56% 46%, rgba(255,243,214,.95) 0 8%, rgba(255,196,94,.82) 13%, transparent 24%),
    radial-gradient(circle at 38% 59%, rgba(85,20,0,.82) 0 7%, transparent 13%),
    radial-gradient(circle at 70% 34%, rgba(91,24,0,.72) 0 5%, transparent 11%),
    radial-gradient(circle at 45% 28%, rgba(255,243,214,.55) 0 8%, transparent 16%),
    radial-gradient(circle at 62% 70%, rgba(100,26,0,.72) 0 6%, transparent 12%),
    conic-gradient(from 18deg, rgba(122,35,0,.78), rgba(255,106,0,.92), rgba(255,196,94,.78), rgba(120,30,0,.82), rgba(255,106,0,.9), rgba(255,243,214,.7), rgba(122,35,0,.78)),
    radial-gradient(circle at 50% 50%, var(--sun-3) 0 10%, var(--sun-2) 22%, var(--sun-1) 54%, #7a2100 74%, #211000 100%);
  box-shadow:
    0 0 18px rgba(255,196,94,.55),
    0 0 70px rgba(255,106,0,.45),
    0 0 140px rgba(255,196,94,.32);
  filter:saturate(1.14) contrast(1.06);
  animation:compactSun 14s linear infinite;
}
.hero.no-webgl .sun-fallback::after{
  width:calc(var(--compact-size) * 1.34);
  top:31%;
  background:
    conic-gradient(from 8deg, transparent 0 8%, rgba(255,243,214,.2) 9% 11%, transparent 14% 23%, rgba(255,196,94,.18) 24% 26%, transparent 29% 44%, rgba(255,243,214,.16) 45% 47%, transparent 50% 66%, rgba(255,196,94,.18) 67% 69%, transparent 72% 100%),
    radial-gradient(circle, rgba(255,196,94,.38) 0 44%, rgba(255,106,0,.12) 55%, transparent 70%);
  filter:blur(3px);
  mix-blend-mode:screen;
  opacity:.86;
  animation:compactCorona 18s linear infinite reverse;
}
.hero.no-webgl.audit-feed:not(.compact-feed) .sun-fallback{
  --compact-size:min(78vmin, 58rem);
  background:
    radial-gradient(circle at 56% 42%, rgba(255,243,214,.18), transparent 7rem),
    radial-gradient(circle at 52% 45%, rgba(255,196,94,.16), transparent 33rem),
    radial-gradient(circle at 14% 86%, rgba(255,106,0,.1), transparent 26rem),
    var(--void);
}
.hero.no-webgl.audit-feed:not(.compact-feed) .sun-fallback::before,
.hero.no-webgl.audit-feed:not(.compact-feed) .sun-fallback::after{
  left:58%;
  top:43%;
}
.hero.no-webgl.audit-feed:not(.compact-feed) .sun-fallback::before{
  box-shadow:
    0 0 24px rgba(255,196,94,.7),
    0 0 112px rgba(255,106,0,.56),
    0 0 260px rgba(255,196,94,.34),
    0 0 420px rgba(255,52,0,.18);
}
@keyframes compactSun{
  from{ transform:translate(-50%,-50%) rotate(0deg) scale(1); }
  50%{ transform:translate(-50%,-50%) rotate(180deg) scale(1.025); }
  to{ transform:translate(-50%,-50%) rotate(360deg) scale(1); }
}
@keyframes compactCorona{
  from{ transform:translate(-50%,-50%) rotate(0deg) scale(1); }
  50%{ transform:translate(-50%,-50%) rotate(-180deg) scale(1.04); }
  to{ transform:translate(-50%,-50%) rotate(-360deg) scale(1); }
}

.hero-top{ position:absolute; top:clamp(64px,10vh,96px); left:var(--pad); right:var(--pad); z-index:5; }
.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:0; color:var(--sun-2);
  text-transform:uppercase; display:flex; align-items:center; flex-wrap:wrap; gap:.9em;
}
.eyebrow-sep{ color:var(--muted); }
.live-dot{
  width:8px; height:8px; border-radius:50%; background:var(--sun-1);
  box-shadow:0 0 10px var(--sun-1); animation:blink 2.2s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

.feed-tag{
  position:absolute; right:clamp(8px,1.3vw,22px); top:50%; z-index:5;
  transform:translateY(-50%); writing-mode:vertical-rl;
  font-family:var(--mono); font-size:.62rem; letter-spacing:0; color:var(--sun-2);
  white-space:nowrap; text-shadow:0 0 10px rgba(5,5,5,.95);
  opacity:0; animation:fadetag 1.2s ease 1.2s forwards;
}
@keyframes fadetag{ to{ opacity:.9 } }

.hero-body{
  position:relative; z-index:5; padding:0 var(--pad); margin-bottom:clamp(18px,3vh,34px);
  max-width:var(--maxw); width:100%;
}
.wordmark{
  font-size:clamp(4.2rem,10.65vw,9.6rem);
  font-weight:700; letter-spacing:0; line-height:1;
  background:linear-gradient(178deg, var(--sun-3) 12%, var(--sun-2) 46%, var(--sun-1) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 34px rgba(255,106,0,.34)) drop-shadow(0 8px 18px rgba(0,0,0,.35));
  max-width:min-content;
}
.hero-lede{ max-width:34em; margin-top:1.2rem; color:var(--text); font-size:clamp(1rem,1.2vw,1.15rem); font-weight:350; }
.hero-status{
  max-width:42em; margin-top:.8rem; font-family:var(--mono); font-size:.72rem; color:var(--sun-2);
  text-transform:uppercase;
}
.hero-coords{ margin-top:1.1rem; font-family:var(--mono); font-size:.66rem; letter-spacing:0; color:var(--muted); }

.spectral-rail{
  position:absolute; z-index:5; right:var(--pad); bottom:clamp(118px,16vh,156px);
  width:min(23rem,31vw); display:grid; gap:5px;
  font-family:var(--mono); font-size:.58rem; color:rgba(255,243,214,.72);
  text-transform:uppercase; pointer-events:none;
}
.spectral-rail span{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px;
  text-shadow:0 0 10px rgba(5,5,5,.95);
}
.spectral-rail span::after{
  content:""; height:1px;
  background:linear-gradient(90deg, rgba(255,196,94,.8), rgba(255,196,94,.08));
  box-shadow:0 0 12px rgba(255,106,0,.26);
}
.spectral-rail span:nth-child(2){ opacity:.72; width:82%; }
.spectral-rail span:nth-child(3){ opacity:.62; width:66%; }
.spectral-rail span:nth-child(4){ opacity:.52; width:88%; }
.spectral-rail span:nth-child(5){ color:var(--sun-2); width:74%; }

.hud{
  position:relative; z-index:5;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hair);
  background:
    linear-gradient(90deg, rgba(5,5,5,.94), rgba(14,9,2,.84), rgba(5,5,5,.94)),
    repeating-linear-gradient(90deg, rgba(255,196,94,.035) 0 1px, transparent 1px 6rem);
  backdrop-filter:blur(8px);
}
.hud-cell{ padding:clamp(12px,1.6vw,20px) var(--pad) clamp(14px,1.8vw,22px); border-left:1px solid var(--hair-soft); }
.hud-cell:first-child{ border-left:none; }
.hud dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:0; text-transform:uppercase;
  color:var(--muted); margin-bottom:.35em;
}
.hud dd{ font-family:var(--mono); font-size:1.3rem; color:var(--sun-3); font-variant-numeric:tabular-nums; }
.hud .unit{ font-size:.6em; color:var(--muted); letter-spacing:0; }

/* ============ ticker ============ */
.ticker{
  overflow:hidden; border-bottom:1px solid var(--hair);
  background:linear-gradient(to right, rgba(255,106,0,.07), transparent 30%, transparent 70%, rgba(255,106,0,.07));
}
.ticker-track{
  display:flex; width:max-content; white-space:nowrap;
  animation:tick 52s linear infinite;
  font-family:var(--mono); font-size:.68rem; letter-spacing:0;
  color:var(--sun-2); padding:14px 0;
  text-shadow:0 0 12px rgba(255,106,0,.35);
}
@keyframes tick{ to{ transform:translateX(-50%) } }

/* ============ sections ============ */
.sec{
  max-width:var(--maxw); margin:0 auto; padding:clamp(72px,11vh,130px) var(--pad) 0;
  position:relative; isolation:isolate;
}
.sec::before{
  content:""; position:absolute; left:var(--pad); top:clamp(72px,11vh,130px);
  width:46px; height:1px; transform:translateY(-18px);
  background:linear-gradient(90deg,var(--sun-1),transparent);
  opacity:.8;
}
.sec::after{
  content:""; position:absolute; left:var(--pad); right:var(--pad); top:clamp(72px,11vh,130px); bottom:-2rem;
  z-index:-1; pointer-events:none; opacity:.34;
  background:
    linear-gradient(90deg, transparent, rgba(255,196,94,.055), transparent),
    repeating-linear-gradient(90deg, rgba(255,196,94,.028) 0 1px, transparent 1px 10rem),
    repeating-linear-gradient(0deg, rgba(255,196,94,.018) 0 1px, transparent 1px 3.5rem);
  mask-image:linear-gradient(to bottom, black 0 18%, transparent 86%);
}
.sec:last-of-type{ padding-bottom:clamp(72px,11vh,130px); }
#array{ padding-bottom:clamp(72px,11vh,130px); }
#log{ padding-top:clamp(52px,8vh,96px); }
#log::before{ top:clamp(52px,8vh,96px); }
#log::after{ top:clamp(52px,8vh,96px); }

.sec-head{ display:flex; align-items:baseline; gap:clamp(12px,2vw,26px); flex-wrap:wrap; }
.sec-no{ font-family:var(--mono); font-size:.78rem; color:var(--sun-1); letter-spacing:0; }
.sec-head h2{
  font-size:clamp(1.65rem,3vw,2.7rem); font-weight:560; color:var(--sun-3); letter-spacing:0;
}
.sec-rule{ flex:1 1 60px; height:1px; background:var(--hair); align-self:center; transform-origin:left; }
.rv.in .sec-rule{ animation:drawx 1.2s cubic-bezier(.22,.7,.25,1) both .2s; }
@keyframes drawx{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.sec-tag{ font-family:var(--mono); font-size:.62rem; letter-spacing:0; color:var(--muted); }
.sec-sub{ max-width:48em; margin-top:1.1rem; color:var(--muted); font-weight:300; font-size:1.04rem; }

/* ============ conditions grid ============ */
.cond-grid{
  margin-top:clamp(30px,4vw,52px);
  display:grid; gap:1px;
  grid-template-columns:1.15fr .92fr .92fr;
  grid-auto-rows:minmax(220px, auto);
  background:var(--hair-soft);
  border:1px solid var(--hair);
  box-shadow:0 0 0 1px rgba(255,106,0,.05), 0 26px 80px rgba(0,0,0,.45);
}
.card{
  background:
    linear-gradient(145deg, rgba(255,106,0,.045), transparent 38%),
    var(--void);
  padding:clamp(18px,2.2vw,28px);
  position:relative;
  min-width:0;
  overflow:hidden;
  isolation:isolate;
  transition:background-color .35s var(--ease), transform .35s var(--ease-hot), box-shadow .35s var(--ease);
}
.card:hover{ background:#0b0803; transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(255,196,94,.16); }
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 40px rgba(255,106,0,.12); transition:opacity .35s;
}
.card::before{
  content:""; position:absolute; right:-18%; top:-45%; width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,196,94,.15), transparent 65%);
  pointer-events:none;
}
.card:hover::after,
.card:focus-within::after{ opacity:1; }
.card-major{
  grid-row:span 2;
  background:
    radial-gradient(circle at 72% 26%, rgba(255,243,214,.2), transparent 28%),
    radial-gradient(circle at 34% 84%, rgba(255,106,0,.18), transparent 38%),
    var(--void);
}
.card-major .val{ font-size:5rem; margin-top:.32em; }
.card-major .spark{ height:88px; margin-top:1rem; }
.card-major .note{ max-width:28em; font-size:.92rem; }
.cond-grid .card:nth-child(6){ grid-column:1 / -1; min-height:170px; }
.cond-grid .card:nth-child(6)::before{
  right:-8%; top:-130%; width:46%;
  background:radial-gradient(circle, rgba(255,196,94,.2), transparent 68%);
}
.card-head{ display:flex; align-items:center; justify-content:space-between; }
.card h3{
  font-family:var(--mono); font-weight:400; font-size:.68rem; letter-spacing:0;
  text-transform:uppercase; color:var(--muted);
}
.pulse{ width:6px; height:6px; border-radius:50%; background:var(--sun-2); animation:blink 2.2s infinite; }
.val{
  font-family:var(--mono); font-size:2.8rem; line-height:1.1;
  color:var(--sun-3); margin:.45em 0 .3em; letter-spacing:0;
  font-variant-numeric:tabular-nums slashed-zero;
}
.val .unit{ font-size:.4em; color:var(--muted); margin-left:.5em; letter-spacing:0; }
.spark{ width:100%; height:48px; display:block; margin:.2rem 0 .7rem; }
.spark polyline{ fill:none; stroke:var(--sun-1); stroke-width:1.6; filter:drop-shadow(0 0 5px rgba(255,106,0,.55)); }
[data-tele]{
  transition:color .28s var(--ease), text-shadow .28s var(--ease), filter .28s var(--ease);
}
[data-tele].tele-hot{
  color:#fff7e7;
  text-shadow:0 0 16px rgba(255,196,94,.58), 0 0 34px rgba(255,106,0,.42);
  filter:saturate(1.16);
}
.card .note{ font-size:.82rem; color:var(--muted); font-weight:300; line-height:1.55; }
.card .note sub{ font-size:.7em; }
.hazard-scale{
  display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:1.4rem;
}
.hazard-scale i{
  display:block; height:8px; border:1px solid var(--hair-soft);
  background:linear-gradient(to right, rgba(255,106,0,.22), rgba(255,196,94,.4));
}
.hazard-scale i:nth-child(-n+4){ box-shadow:0 0 12px rgba(255,106,0,.34); }

.bz-gauge{ position:relative; height:14px; margin:1rem 0 1.2rem; background:rgba(255,196,94,.07); border:1px solid var(--hair-soft); }
.bz-zero{ position:absolute; left:50%; top:-4px; bottom:-4px; width:1px; background:var(--hair); }
.bz-bar{ position:absolute; top:2px; bottom:2px; left:50%; width:0; background:linear-gradient(to right,var(--sun-1),var(--sun-2)); transition:width .8s cubic-bezier(.22,.7,.25,1), transform .8s cubic-bezier(.22,.7,.25,1); }
.bz-bar.neg{ transform:translateX(-100%); background:linear-gradient(to left,var(--sun-1),#ff3400); }

.kp-gauge{ display:flex; gap:4px; margin:1rem 0 1.2rem; }
.kp-gauge i{ flex:1; height:14px; background:rgba(255,196,94,.08); border:1px solid var(--hair-soft); transition:background .5s, box-shadow .5s; }
.kp-gauge i.lit{ background:linear-gradient(to top,var(--sun-1),var(--sun-2)); box-shadow:0 0 10px rgba(255,106,0,.45); }

.status-line{
  margin-top:clamp(22px,3vw,34px);
  font-family:var(--mono); font-size:.68rem; letter-spacing:0; color:var(--sun-2);
  display:flex; align-items:center; gap:.8em; flex-wrap:wrap;
}
.cursor{ width:.6em; height:1.1em; background:var(--sun-2); animation:blink 1.1s steps(2) infinite; }

/* ============ flare anatomy ============ */
.flare-wrap{
  margin-top:clamp(30px,4vw,56px);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(260px,4.5fr); gap:clamp(28px,4vw,64px);
  align-items:start;
}
.flare-fig{
  --flare-x:50%;
  --flare-y:35%;
  grid-row:span 2;
  border:1px solid var(--hair); padding:clamp(10px,1.6vw,24px);
  position:relative; overflow:hidden; isolation:isolate;
  background:
    linear-gradient(rgba(255,196,94,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,196,94,.035) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 110%, rgba(255,106,0,.09), transparent 60%);
  background-size:32px 32px, 32px 32px, auto;
  box-shadow:0 30px 90px rgba(0,0,0,.42);
}
.flare-fig::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at var(--flare-x) var(--flare-y), rgba(255,243,214,.24), rgba(255,106,0,.22) 8%, transparent 23%),
    radial-gradient(ellipse at 50% 72%, rgba(255,243,214,.16), rgba(255,106,0,.11) 32%, transparent 66%);
  filter:blur(8px); pointer-events:none; mix-blend-mode:screen; opacity:.82;
  transition:opacity .35s var(--ease), filter .35s var(--ease);
}
.flare-fig::after{
  content:""; position:absolute; left:6%; right:6%; bottom:8%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,106,0,.85), rgba(255,243,214,.65), rgba(255,106,0,.85), transparent);
  box-shadow:0 0 20px rgba(255,106,0,.55); pointer-events:none;
}
.flare-fig svg{ width:100%; height:auto; display:block; }
.flare-fig[data-stage="1"]{ --flare-x:34%; --flare-y:84%; }
.flare-fig[data-stage="2"]{ --flare-x:50%; --flare-y:61%; }
.flare-fig[data-stage="3"]{ --flare-x:50%; --flare-y:35%; }
.flare-fig[data-stage="4"]{ --flare-x:50%; --flare-y:15%; }

/* stroke draw choreography */
.flare-fig .d{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s cubic-bezier(.4,.1,.2,1); }
.flare-fig .d-photo{ opacity:0; transition:opacity 1.6s ease .1s; }
.flare-fig .f{ opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .9s ease; }
.flare-fig .lbl{ opacity:0; transition:opacity .9s ease; }
.flare-fig .lbl text{ font-family:var(--mono); font-size:12.5px; fill:var(--sun-2); letter-spacing:0; }
.flare-fig .lbl.axis{ fill:var(--muted); font-family:var(--mono); font-size:12.5px; letter-spacing:0; }

.flare-fig.drawn .d{ stroke-dashoffset:0; }
.flare-fig.drawn .d-photo{ opacity:1; }
.flare-fig.drawn .f{ opacity:1; }
.flare-fig.drawn .lbl{ opacity:1; }
.flare-fig.drawn .d1{ transition-delay:.1s } .flare-fig.drawn .d1b{ transition-delay:.2s }
.flare-fig.drawn .d2{ transition-delay:.5s } .flare-fig.drawn .d3{ transition-delay:.7s } .flare-fig.drawn .d4{ transition-delay:.9s }
.flare-fig.drawn .d5{ transition-delay:1.3s } .flare-fig.drawn .d6{ transition-delay:1.5s }
.flare-fig.drawn .d7,.flare-fig.drawn .d8{ transition-delay:1.8s }
.flare-fig.drawn .d9{ transition-delay:2.1s } .flare-fig.drawn .d10{ transition-delay:2.3s }
.flare-fig.drawn .d11{ transition-delay:1.05s } .flare-fig.drawn .d12{ transition-delay:.45s }
.flare-fig.drawn .d-shock{ transition-delay:2.35s } .flare-fig.drawn .d-shock2{ transition-delay:2.55s }
.flare-fig.drawn .d-shear{ transition-delay:.35s }
.flare-fig.drawn .f1{ transition-delay:1.6s } .flare-fig.drawn .f2,.flare-fig.drawn .f3{ transition-delay:.4s }
.flare-fig.drawn .f4{ transition-delay:2.1s }
.flare-fig.drawn .particle-train .f{ animation:particlePulse 1.85s ease-in-out infinite; }
.flare-fig.drawn .p2,.flare-fig.drawn .p5{ animation-delay:.18s; }
.flare-fig.drawn .p3,.flare-fig.drawn .p6{ animation-delay:.36s; }
.flare-fig.drawn .l1{ transition-delay:.7s } .flare-fig.drawn .l2{ transition-delay:1.1s }
.flare-fig.drawn .l3{ transition-delay:1.7s } .flare-fig.drawn .l4{ transition-delay:2.4s }
.flare-fig.drawn .l5{ transition-delay:.5s }
.flare-fig.drawn[data-stage="1"] .d1,
.flare-fig.drawn[data-stage="1"] .d1b,
.flare-fig.drawn[data-stage="1"] .d-shear,
.flare-fig.drawn[data-stage="1"] .f2,
.flare-fig.drawn[data-stage="1"] .f3,
.flare-fig.drawn[data-stage="1"] .l1,
.flare-fig.drawn[data-stage="2"] .d2,
.flare-fig.drawn[data-stage="2"] .d3,
.flare-fig.drawn[data-stage="2"] .d4,
.flare-fig.drawn[data-stage="2"] .d11,
.flare-fig.drawn[data-stage="2"] .d12,
.flare-fig.drawn[data-stage="2"] .l2,
.flare-fig.drawn[data-stage="3"] .d5,
.flare-fig.drawn[data-stage="3"] .d6,
.flare-fig.drawn[data-stage="3"] .d7,
.flare-fig.drawn[data-stage="3"] .d8,
.flare-fig.drawn[data-stage="3"] .f1,
.flare-fig.drawn[data-stage="3"] .particle-train .f,
.flare-fig.drawn[data-stage="3"] .l3,
.flare-fig.drawn[data-stage="4"] .d9,
.flare-fig.drawn[data-stage="4"] .d10,
.flare-fig.drawn[data-stage="4"] .d-shock,
.flare-fig.drawn[data-stage="4"] .d-shock2,
.flare-fig.drawn[data-stage="4"] .f4,
.flare-fig.drawn[data-stage="4"] .l4{
  filter:url(#glow) drop-shadow(0 0 8px rgba(255,106,0,.75));
}
.flare-fig.drawn[data-stage="1"] .d-shear,
.flare-fig.drawn[data-stage="2"] .d12,
.flare-fig.drawn[data-stage="3"] .d6,
.flare-fig.drawn[data-stage="4"] .d10{
  stroke-width:3;
}
@keyframes particlePulse{
  0%,100%{ opacity:.35; transform:scale(.82); }
  45%{ opacity:1; transform:scale(1.35); }
}

.flare-readout,
.log-console{
  border:1px solid var(--hair);
  background:
    linear-gradient(135deg, rgba(255,106,0,.12), transparent 44%),
    rgba(5,5,5,.78);
  padding:clamp(16px,2vw,24px);
  box-shadow:inset 0 0 44px rgba(255,106,0,.07);
}
.readout-k{
  font-family:var(--mono); font-size:.66rem; color:var(--sun-1);
  text-transform:uppercase; margin-bottom:1rem;
}
.readout-stage{
  font-family:var(--mono); font-size:.72rem; color:var(--sun-3);
  text-transform:uppercase; margin:-.35rem 0 1rem;
  font-variant-numeric:tabular-nums slashed-zero;
  text-shadow:0 0 18px rgba(255,106,0,.28);
}
.flare-readout dl,
.log-console dl{ display:grid; gap:1px; background:var(--hair-soft); border:1px solid var(--hair-soft); }
.flare-readout div,
.log-console dl div{ display:flex; justify-content:space-between; gap:1rem; background:rgba(5,5,5,.86); padding:.74rem .8rem; }
.flare-readout dt,
.log-console dt{ font-family:var(--mono); font-size:.64rem; color:var(--muted); text-transform:uppercase; }
.flare-readout dd,
.log-console dd{ font-family:var(--mono); font-size:.78rem; color:var(--sun-3); white-space:nowrap; font-variant-numeric:tabular-nums slashed-zero; }
.readout-note{
  margin-top:1rem; color:var(--muted); font-weight:300; font-size:.86rem; line-height:1.58;
  transition:color .35s var(--ease), text-shadow .35s var(--ease);
}

.flare-steps{ list-style:none; display:flex; flex-direction:column; }
.flare-steps li{ padding:clamp(16px,2vw,24px) 0; border-top:1px solid var(--hair-soft); display:grid; grid-template-columns:auto 1fr; gap:4px 20px; }
.flare-steps li:first-child{ border-top:none; }
.flare-step{
  min-height:44px; cursor:pointer; user-select:none; touch-action:manipulation;
  transition:background .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease-hot), border-color .28s var(--ease);
}
.flare-step:hover,
.flare-step:focus-visible,
.flare-step[aria-pressed="true"]{
  background:linear-gradient(90deg, rgba(255,106,0,.115), transparent 76%);
  box-shadow:inset 3px 0 0 var(--sun-1);
}
.flare-step:hover{ transform:translateX(4px); }
.flare-step:focus-visible{ outline:2px solid var(--sun-2); outline-offset:4px; }
.flare-step[aria-pressed="true"] .step-no,
.flare-step[aria-pressed="true"] h3{ color:var(--sun-2); text-shadow:0 0 16px rgba(255,106,0,.38); }
.step-no{ font-family:var(--mono); color:var(--sun-1); font-size:.8rem; letter-spacing:0; padding-top:.35em; grid-row:span 2; }
.flare-steps h3{ font-size:1.1rem; font-weight:500; color:var(--sun-3); }
.flare-steps p{ color:var(--muted); font-weight:300; font-size:.92rem; }

/* ============ observation log ============ */
.log-shell{
  margin-top:clamp(30px,4vw,52px);
  display:grid; grid-template-columns:minmax(250px,.32fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:start;
}
.log-console{ position:relative; top:auto; }
.log-console::before{
  content:""; position:absolute; left:-1px; top:18px; bottom:18px; width:3px;
  background:linear-gradient(to bottom,var(--sun-1),var(--sun-2),transparent);
  box-shadow:0 0 18px rgba(255,106,0,.6);
}
.log-console strong{
  display:block; font-family:var(--disp); font-size:2.15rem; line-height:1; color:var(--sun-3); margin-bottom:.35rem;
}
.log-console > span{ display:block; color:var(--muted); font-size:.88rem; margin-bottom:1.2rem; }
.console-note{
  margin-top:1rem; font-family:var(--mono); color:var(--muted); font-size:.66rem; line-height:1.65;
}
.log-list{ list-style:none; position:relative; }
.log-list::before{
  content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(to bottom, var(--sun-1), var(--hair), rgba(255,196,94,.04));
}
.log-entry{
  position:relative; padding:0 0 clamp(28px,3.6vw,44px) clamp(28px,4vw,48px);
  transition:transform .28s var(--ease-hot), filter .28s var(--ease);
}
.log-entry:hover{ transform:translateX(4px); filter:drop-shadow(0 0 16px rgba(255,106,0,.12)); }
.log-entry:last-child{ padding-bottom:0; }
.log-entry::before{
  content:""; position:absolute; left:0; top:6px; width:11px; height:11px; border-radius:50%;
  background:var(--void); border:1px solid var(--sun-2);
  box-shadow:0 0 10px rgba(255,196,94,.4);
}
.log-entry:first-child::before{ background:var(--sun-1); border-color:var(--sun-1); box-shadow:0 0 14px rgba(255,106,0,.8); }
.log-meta{ display:flex; align-items:center; gap:1em; flex-wrap:wrap; margin-bottom:.5em; }
.log-meta time{ font-family:var(--mono); font-size:.72rem; letter-spacing:0; color:var(--muted); }
.chip{
  font-family:var(--mono); font-size:.62rem; letter-spacing:0; padding:3px 9px;
  border:1px solid; border-radius:2px;
}
.chip-x{ color:#ff7a3d; border-color:rgba(255,90,38,.5); background:rgba(255,90,38,.08); }
.chip-m{ color:var(--sun-2); border-color:var(--hair); background:rgba(255,196,94,.07); }
.chip-c{ color:#ffe9bd; border-color:rgba(255,233,189,.3); }
.chip-ops{ color:var(--muted); border-color:rgba(171,156,130,.35); }
.log-entry h3{ font-size:1.25rem; color:var(--sun-3); margin-bottom:.35em; }
.log-entry p{ max-width:52em; color:var(--text); font-weight:300; font-size:.95rem; }
.log-sig{ margin-top:.5em; font-family:var(--mono); font-size:.7rem; letter-spacing:0; color:var(--muted) !important; }

/* ============ instrument array ============ */
.inst-list{
  list-style:none; margin-top:clamp(30px,4vw,52px); border:1px solid var(--hair); border-bottom:none;
  background:
    linear-gradient(90deg, rgba(255,196,94,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,106,0,.035), transparent 18rem);
  background-size:10rem 100%, auto;
  box-shadow:0 24px 80px rgba(0,0,0,.38);
}
.inst{
  display:grid; grid-template-columns:110px minmax(0,1fr) 220px 130px;
  gap:10px clamp(16px,2.5vw,40px); align-items:center;
  padding:clamp(18px,2.4vw,28px) clamp(16px,2vw,24px); border-bottom:1px solid var(--hair-soft);
  transition:background-color .35s, transform .35s;
  position:relative;
}
.inst::before{
  content:""; position:absolute; left:0; top:50%; width:8px; height:8px; border-radius:50%;
  background:var(--sun-1); transform:translate(10px,-50%); opacity:.72; box-shadow:0 0 14px rgba(255,106,0,.7);
}
.inst:hover{ background:linear-gradient(to right, rgba(255,106,0,.06), transparent 60%); transform:translateX(4px); }
.inst-id{ font-family:var(--mono); color:var(--sun-1); font-size:.85rem; letter-spacing:0; }
.inst-name h3{ font-size:1.16rem; color:var(--sun-3); font-weight:500; }
.inst-name p{ color:var(--muted); font-weight:300; font-size:.88rem; margin-top:.25em; max-width:42em; }
.inst-spec{ font-family:var(--mono); font-size:.7rem; letter-spacing:0; color:var(--muted); }
.inst-status{
  font-family:var(--mono); font-size:.62rem; letter-spacing:0; text-align:center;
  padding:6px 0; border:1px solid;
}
.inst-status.ok{ color:var(--sun-2); border-color:var(--hair); }
.inst-status.cal{ color:#ff7a3d; border-color:rgba(255,90,38,.45); animation:calib 2.6s ease-in-out infinite; }
@keyframes calib{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

/* ============ footer ============ */
.site-foot{
  border-top:1px solid var(--hair);
  background:
    linear-gradient(to bottom, rgba(255,106,0,.055), transparent 46%),
    repeating-linear-gradient(90deg, rgba(255,196,94,.025) 0 1px, transparent 1px 9rem);
}
.foot-grid{
  max-width:var(--maxw); margin:0 auto; padding:clamp(36px,5vw,64px) var(--pad);
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px);
}
.foot-brand{ font-family:var(--disp); font-weight:600; letter-spacing:0; color:var(--sun-3); }
.foot-brand span{ font-family:var(--mono); font-weight:400; font-size:.66rem; color:var(--muted); letter-spacing:0; }
.foot-note{ margin-top:.8em; color:var(--muted); font-weight:300; font-size:.85rem; max-width:36em; }
.foot-links{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.foot-links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--mono); font-size:.75rem; letter-spacing:0; text-transform:uppercase;
  color:var(--text); border-bottom:1px solid transparent;
  white-space:nowrap;
}
.foot-links a:hover,
.foot-links a:focus-visible{ color:var(--sun-2); border-bottom-color:var(--hair); text-shadow:0 0 14px rgba(255,106,0,.45); }
.foot-credit p{ font-family:var(--mono); font-size:.75rem; letter-spacing:0; color:var(--text); }
.foot-fine{ margin-top:.9em; color:var(--muted) !important; font-size:.66rem !important; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1024px){
  .wordmark{ font-size:6.6rem; }
  .sec-head h2{ font-size:2rem; }
  .cond-grid{ grid-template-columns:repeat(2,1fr); }
  .card-major{ grid-column:1 / -1; grid-row:auto; }
  .card-major .val{ font-size:3.6rem; }
  .cond-grid .card:nth-child(6){ grid-column:1 / -1; }
  .flare-wrap{ grid-template-columns:1fr; }
  .flare-fig{ grid-row:auto; }
  .inst{ grid-template-columns:90px minmax(0,1fr) 140px; }
  .inst-status{ grid-column:3; grid-row:2; }
  .inst-spec{ grid-column:3; grid-row:1; text-align:right; }
  .log-shell{ grid-template-columns:1fr; }
  .log-console{ position:relative; top:auto; }
}

@media (max-width: 640px){
  body{ font-size:.98rem; }
  .site-head{ padding-top:8px; padding-bottom:4px; }
  .brand{ font-size:.85rem; }
  .site-head nav a{ font-size:.66rem; padding:0 9px; }
  .hero-top{ top:104px; }
  .hero-scan::before{ inset:96px var(--pad) 150px; }
  .hero-scan::after{ display:none; }
  .eb-x{ display:none; }
  .feed-tag{ display:none; }
  .spectral-rail{ display:none; }
  .wordmark{ font-size:3.3rem; }
  .hero-lede{ font-size:1rem; max-width:22em; }
  .hero-status{ font-size:.66rem; }
  .hero-coords{ font-size:.6rem; }
  .sec-head h2{ font-size:1.45rem; }
  .sec-sub{ font-size:.96rem; }
  .hud{ grid-template-columns:repeat(2,1fr); }
  .hud-cell{ border-top:1px solid var(--hair-soft); padding-left:var(--pad); padding-right:12px; }
  .hud-cell:nth-child(-n+2){ border-top:none; }
  .hud-cell:nth-child(odd){ border-left:none; }
  .hud dd{ font-size:1.05rem; }
  .cond-grid{ grid-template-columns:1fr; }
  .cond-grid .card:nth-child(6){ grid-column:auto; }
  .card-major .val{ font-size:3rem; }
  .val{ font-size:2.1rem; }
  .flare-readout div,
  .log-console dl div{ flex-direction:column; gap:.2rem; }
  .log-entry h3{ font-size:1.08rem; }
  .inst{ grid-template-columns:minmax(0,1fr) 110px; }
  .inst::before{ display:none; }
  .inst-id{ grid-column:1 / -1; }
  .inst-name{ grid-column:1 / -1; }
  .inst-name h3{ font-size:1.04rem; }
  .inst-spec{ grid-column:1; grid-row:3; text-align:left; }
  .inst-status{ grid-column:2; grid-row:3; }
  .inst:hover{ transform:none; }
  .flare-step:hover{ transform:none; }
  .foot-grid{ grid-template-columns:1fr; gap:20px; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .bt{ animation:none; }
  .rv{ opacity:1; transform:none; transition:none; }
  .rv.in .sec-rule{ animation:none; }
  .grain{ animation:none; }
  .ticker-track{ animation:none; padding-left:var(--pad); }
  .live-dot,.pulse,.cursor,.inst-status.cal{ animation:none; }
  .feed-tag{ animation:none; opacity:.9; }
  .card,.flare-step,.log-entry,.inst,[data-tele],.readout-note{ transition:none; }
  .hero.no-webgl .sun-fallback::before,
  .hero.no-webgl .sun-fallback::after{ animation:none; }
  .flare-fig .d{ stroke-dashoffset:0; transition:none; }
  .flare-fig .d-photo,.flare-fig .f,.flare-fig .lbl{ opacity:1; transition:none; }
  *{ scroll-behavior:auto; }
}
