/*───────────────────────────────────────────────────────────────
  fandom.css — neon blue HUD + glitch (refactored)
  Target HTML: Sherlock page
  Background: /images/fandom_bg.webp
  Fonts: VT323 (headings), IBM Plex Mono (UI/body)
───────────────────────────────────────────────────────────────*/

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ========================== TOKENS ========================== */
:root{
  /* Neon blues (mushroom/ui) */
  --neo:     #7be7ff;   /* main cyan */
  --neo-2:   #61d2ff;   /* lighter accent */
  --neo-3:   #20b8ff;   /* saturated scan blue */

  /* Surfaces & text */
  --glass-1: rgba(15,26,36,.72);
  --glass-2: rgba(15,26,36,.86);
  --grid:    rgba(115,170,205,.22);
  --text:    #eef8ff;

  /* Glow */
  --glow:    rgba(123,231,255,.45);
  --glow-hi: rgba(32,184,255,.30);

  /* Type */
  --hud:  "VT323", ui-monospace, Menlo, Consolas, monospace;               /* headings */
  --body: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --r: 16px;
  --pad: 1.2rem;
  --gap: 16px;
  --maxw: 1000px;

  /* Effects */
  --scan-opacity: .85;  /* scanline brightness inside cards */

  /* Glitch timing */
  --glitch-a: 5.4s;         /* right/cyan channel */
  --glitch-b: 5.9s;         /* left/blue channel */
  --glitch-hover-a: 1.9s;   /* faster on hover */
  --glitch-hover-b: 1.6s;
}

/* ====================== PAGE BACKGROUND ====================== */
html,body{height:100%}
body.sherlock-page{
  margin:0;
  color:var(--text);
  font: 500 16px/1.6 var(--body);
  background: url("/images/fandom_bg.webp") center / cover fixed no-repeat;
  position:relative;
}

/* Cyan lift + vignette */
body.sherlock-page::before{
  content:"";
  position:fixed; inset:-2px; z-index:0; pointer-events:none;
  background:
    radial-gradient(1400px 900px at 55% 35%, rgba(123,231,255,.32), transparent 68%),
    radial-gradient(1200px 700px at 50% 80%, rgba(97,210,255,.18), transparent 70%);
  mix-blend-mode: screen;
}

/* Scanlines + subtle CRT twinkle */
body.sherlock-page::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  mix-blend-mode: soft-light;
  animation: crt-flicker 1.8s steps(2,end) infinite, scan-wash 12s linear infinite;
}
@keyframes crt-flicker{
  0%,96%,100%{ opacity:.9 }
  97%{ opacity:.98 } 98%{ opacity:.84 } 99%{ opacity:.96 }
}
@keyframes scan-wash{ from{ background-position:0 0 } to{ background-position:0 8px } }

/* ========================= LAYOUT =========================== */
main.page{
  width:min(var(--maxw), 92vw);
  margin: clamp(18px, 4vh, 42px) auto;
  position:relative;
  z-index:1;
}

/* ===================== TYPOGRAPHY / TITLES =================== */
.hero h1{
  font-family: var(--hud);
  font-size: clamp(36px, 8vw, 72px);
  line-height: 1;
  letter-spacing: .03em;
  color:#f2fbff;
  text-shadow: 0 0 2px #fff, 0 0 14px var(--glow), 0 0 36px rgba(32,184,255,.28);
  margin:0 0 .5rem 0;
}

.prose h2,
.hud-title{
  font-family: var(--hud);
  font-size: clamp(26px, 4.6vw, 40px);
  color:#eef8ff;
  letter-spacing:.02em;
  margin:1.4rem 0 .5rem;
  position:relative;
  text-shadow: 0 0 2px #fff, 0 0 10px rgba(123,231,255,.35);
}
.prose h2::after{
  content:"";
  display:block; height:3px; margin:.35rem 0 0;
  background: linear-gradient(90deg,#e9faff 0,var(--neo) 28%,transparent 70%);
  box-shadow: 0 0 16px var(--glow);
}
/* caret for .hud-title only */
.hud-title::after{
  content:"▌";
  position:absolute; right:-.6ch; top:0;
  color:#bff0ff;
  text-shadow:0 0 10px rgba(123,231,255,.65);
  animation: caret 1.1s steps(1,end) infinite;
}
@keyframes caret{ 50%{ opacity:0 } }

.prose h3{
  font-family: var(--hud);
  font-size: clamp(20px, 3.8vw, 28px);
  color:#c7f3ff;
  margin:1rem 0 .4rem;
}
.lede,.tagline{
  font-family: var(--hud);
  font-size: clamp(18px, 3.8vw, 26px);
  color:#d8f7ff;
  text-shadow: 0 0 10px rgba(123,231,255,.25);
}
.prose p{ margin:.35rem 0 .75rem; }
.prose ul{ margin:.35rem 0 .9rem .9rem; }
.prose li{ margin:.25rem 0; }
.prose em{ color:#c9f1ff; }

/* ====================== HUD CARD CHROME ====================== */
.card{
  position:relative;
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
  border-radius: var(--r);
  padding: calc(var(--pad) + 6px);
  border:1px solid rgba(123,231,255,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(6px) saturate(115%);
  overflow:hidden;
}
/* drifting grid */
.card::before{
  content:"";
  position:absolute; inset:10px; border-radius: calc(var(--r) - 6px);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/26px 26px;
  mix-blend-mode: soft-light; opacity:.42;
  animation: grid-drift 18s linear infinite;
  z-index:1;
}
@keyframes grid-drift{ from{background-position:0 0,0 0} to{background-position:52px 52px,52px 52px} }
/* breathing neon rim */
.card::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(123,231,255,.30), 0 0 42px var(--glow-hi);
  animation: rim 3.2s ease-in-out infinite;
  z-index:1;
}
@keyframes rim{
  0%,100%{ box-shadow: inset 0 0 0 1px rgba(123,231,255,.30), 0 0 24px rgba(32,184,255,.16); }
  50%    { box-shadow: inset 0 0 0 1px rgba(123,231,255,.44), 0 0 52px rgba(32,184,255,.30); }
}
/* rolling scanline (doesn't consume ::before/::after) */
.card > :first-child::before{
  content:"";
  position:absolute; left:-12px; right:-12px; top:-140px; height:140px;
  background: linear-gradient(180deg, rgba(123,231,255,var(--scan-opacity)) 0%, rgba(123,231,255,.30) 35%, rgba(123,231,255,0) 100%);
  filter: blur(8px);
  animation: scanline-strong 4.2s linear infinite;
  pointer-events:none;
}
@keyframes scanline-strong{
  0%{ transform: translateY(-20%); opacity: var(--scan-opacity) }
  25%{ opacity:.60 } 50%{ opacity:.45 }
  100%{ transform: translateY(140%); opacity:0 }
}
/* keep content above overlays */
.card > *{ position:relative; z-index:2; }

/* Always-on SVG corner brackets + side ticks */
.hud-corners{
  --c: #7be7ff;  /* corner stroke */
  --s: 28px;     /* corner size */
  --m: 10px;     /* margin from edges */
  border-radius: 14px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.7' stroke-linecap='round'><path d='M8 3H4v4'/></svg>") var(--m) var(--m)/var(--s) var(--s) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.7' stroke-linecap='round'><g transform='scale(-1,1) translate(-24,0)'><path d='M8 3H4v4'/></g></svg>") calc(100% - var(--m)) var(--m)/var(--s) var(--s) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.7' stroke-linecap='round'><g transform='scale(1,-1) translate(0,-24)'><path d='M8 3H4v4'/></g></svg>") var(--m) calc(100% - var(--m))/var(--s) var(--s) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.7' stroke-linecap='round'><g transform='scale(-1,-1) translate(-24,-24)'><path d='M8 3H4v4'/></g></svg>") calc(100% - var(--m)) calc(100% - var(--m))/var(--s) var(--s) no-repeat,
    /* vertical ruler ticks */
    linear-gradient(to bottom, rgba(123,231,255,.38) 0 1px, transparent 1px 28px) 12px 10px/1px 28px repeat-y,
    linear-gradient(to bottom, rgba(123,231,255,.38) 0 1px, transparent 1px 28px) calc(100% - 12px) 10px/1px 28px repeat-y;
  box-shadow: inset 0 0 0 1px rgba(123,231,255,.18);
  filter: drop-shadow(0 0 6px rgba(123,231,255,.25));
}
.hud-corners:hover, .hud-corners:focus-within{
  box-shadow: inset 0 0 0 1px rgba(123,231,255,.32), 0 0 26px rgba(32,184,255,.18);
}

/* ====================== HUD WIDGETS ========================= */
/* UI strip (thin progress-ish ornament) */
.ui-strip{
  position:relative; height:8px; margin:.6rem 0 1rem;
  background: linear-gradient(90deg, rgba(123,231,255,.28) 0 40%, rgba(123,231,255,.12) 60% 100%);
  border-radius:999px;
  box-shadow: inset 0 0 0 1px rgba(123,231,255,.35), 0 0 12px rgba(123,231,255,.25);
}
.ui-strip::after{
  content:""; position:absolute; top:-6px; left:14%;
  width:10px; height:20px; border-radius:2px;
  background:#7be7ff; box-shadow:0 0 10px rgba(123,231,255,.65);
  animation: strip-blip 1.8s ease-in-out infinite;
}
@keyframes strip-blip{ 0%,100%{transform:translateX(-8px)} 50%{transform:translateX(8px)} }

/* Chips (HUD tags) */
.chips{ list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.chips li{
  font-family: var(--hud);
  font-size: 20px;
  color: var(--text);
  padding:.25rem .55rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(97,210,255,.18), rgba(32,184,255,.10));
  border:1px solid rgba(123,231,255,.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.chips li:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 12px rgba(123,231,255,.25);
  filter: drop-shadow(0 0 10px rgba(123,231,255,.30));
}

/* Stat bar (your .statbar) */
.statbar{
  position:relative; height:14px; border-radius:8px; overflow:hidden;
  border:1px solid rgba(123,231,255,.45);
  background: linear-gradient(180deg, rgba(97,210,255,.12), rgba(32,184,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.statbar > span{
  display:block; height:100%;
  width: calc(var(--p, .5) * 100%);      /* set via style="--p:.78" etc. */
  background: linear-gradient(90deg, #7be7ff, #20b8ff);
  box-shadow: 0 0 14px rgba(97,210,255,.55) inset, 0 0 18px rgba(97,210,255,.25);
  transition: width .6s ease;
}
.statbar > span::after{
  content:""; position:absolute; top:-40%; height:180%; width:120px; left:-140px;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent 70%);
  filter: blur(4px);
  animation: bar-sweep 2.8s linear infinite;
}
@keyframes bar-sweep{ to{ transform: translateX(280%) } }

/* HUD key/value row (your .hud-row) */
.hud-row{
  --keyw: 140px;
  position: relative;
  display: grid;
  grid-template-columns: var(--keyw) 1fr;
  gap: 10px 16px;
  align-items: center;
  margin: .85rem 0 .4rem;
  padding: .25rem 0;
  font-family: var(--body);
  font-size: 18px;
}
.hud-row::after{
  content:""; position:absolute; left:calc(var(--keyw) + 8px); right:0; top:50%;
  height:1px; transform:translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(123,231,255,.35) 0 8px, transparent 8px 16px);
  opacity:.55; pointer-events:none;
}
.hud-key{
  color:#cfefff; text-transform:uppercase; letter-spacing:.12em; font-weight:500;
  position:relative; padding-left:16px;
}
.hud-key::before{
  content:""; position:absolute; left:0; top:50%; width:8px; height:8px; border-radius:2px;
  transform:translateY(-50%); background:#7be7ff;
  box-shadow:0 0 8px rgba(123,231,255,.8), 0 0 16px rgba(32,184,255,.45);
}
.hud-val{
  justify-self:start; position:relative; z-index:1;
  padding:.18rem .55rem .16rem; border-radius:6px;
  color:#eef8ff; letter-spacing:.03em; font-weight:500;
  background: linear-gradient(180deg, rgba(97,210,255,.18), rgba(32,184,255,.10));
  border:1px solid rgba(123,231,255,.45);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 6px 22px rgba(0,0,0,.35), 0 0 14px rgba(123,231,255,.25);
}
/* compact option */
.hud-row.kv-compact{ --keyw:120px; font-size:16px }
@media (max-width:680px){ .hud-row{ --keyw:110px; font-size:16px } }

/* Badge pill */
.badge{
  display:inline-block;
  font-family: var(--body);
  font-size:16px;
  color:#06131b;
  background:#bef0ff;
  padding:.14rem .46rem;
  border-radius:6px;
  border:1px solid rgba(123,231,255,.5);
  box-shadow: 0 0 10px rgba(123,231,255,.35), inset 0 0 0 1px #fff;
}

/* =============== COMPARISON GRID ================= */
.grid.trio{
  list-style:none; padding:0; margin:0;
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
}
.grid.trio > li{
  background: linear-gradient(180deg, rgba(97,210,255,.10), rgba(32,184,255,.06));
  border:1px solid rgba(123,231,255,.28);
  border-radius: 12px;
  padding: .9rem 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
.grid.trio h3{ margin:.1rem 0 .4rem }
@media (max-width:880px){ .grid.trio{ grid-template-columns:1fr } }

/* ========================= GLITCH =========================== */
/* Use: <h1 class="glitch" data-text="Sherlock">Sherlock</h1> */
.glitch{
  position: relative; display: inline-block;
  font-family: var(--hud); color: var(--text); letter-spacing:.02em;
  text-shadow: 0 0 1px #fff, 0 0 14px var(--glow), 0 0 36px rgba(32,184,255,.28);
}
/* cyan ghost (right) */
.glitch::after{
  content: attr(data-text);
  position: absolute; inset: 0;
  left: 2px; top: 0;
  color: var(--text);
  text-shadow: -1px 0 var(--neo);
  overflow: hidden; clip: rect(0, 900px, 0, 0);
  mix-blend-mode: screen;
  animation: noise-anim var(--glitch-a) infinite linear alternate-reverse;
}
/* blue ghost (left) */
.glitch::before{
  content: attr(data-text);
  position: absolute; inset: 0;
  left: -2px; top: 0;
  color: var(--text);
  text-shadow: 1px 0 var(--neo-3);
  overflow: hidden; clip: rect(0, 900px, 0, 0);
  mix-blend-mode: screen;
  animation: noise-anim-2 var(--glitch-b) infinite linear alternate-reverse;
}
/* stronger/faster on hover */
.glitch:hover::after{ left:3px;  text-shadow:-2px 0 var(--neo), 0 0 12px rgba(123,231,255,.65); animation-duration: var(--glitch-hover-a); }
.glitch:hover::before{ left:-3px; text-shadow: 2px 0 var(--neo-3), 0 0 12px rgba(32,184,255,.65);  animation-duration: var(--glitch-hover-b); }

/* fixed “random slice” timelines (20 steps) */
@keyframes noise-anim{
  0%{clip:rect(6px,9999px,62px,0)}5%{clip:rect(42px,9999px,90px,0)}
  10%{clip:rect(10px,9999px,54px,0)}15%{clip:rect(70px,9999px,96px,0)}
  20%{clip:rect(22px,9999px,68px,0)}25%{clip:rect(80px,9999px,110px,0)}
  30%{clip:rect(8px,9999px,38px,0)}35%{clip:rect(58px,9999px,94px,0)}
  40%{clip:rect(16px,9999px,48px,0)}45%{clip:rect(74px,9999px,120px,0)}
  50%{clip:rect(30px,9999px,82px,0)}55%{clip:rect(4px,9999px,36px,0)}
  60%{clip:rect(64px,9999px,106px,0)}65%{clip:rect(20px,9999px,50px,0)}
  70%{clip:rect(84px,9999px,116px,0)}75%{clip:rect(12px,9999px,44px,0)}
  80%{clip:rect(52px,9999px,92px,0)}85%{clip:rect(24px,9999px,66px,0)}
  90%{clip:rect(68px,9999px,100px,0)}100%{clip:rect(6px,9999px,62px,0)}
}
@keyframes noise-anim-2{
  0%{clip:rect(78px,9999px,112px,0)}5%{clip:rect(18px,9999px,46px,0)}
  10%{clip:rect(60px,9999px,92px,0)}15%{clip:rect(8px,9999px,36px,0)}
  20%{clip:rect(44px,9999px,76px,0)}25%{clip:rect(86px,9999px,120px,0)}
  30%{clip:rect(26px,9999px,58px,0)}35%{clip:rect(72px,9999px,108px,0)}
  40%{clip:rect(14px,9999px,40px,0)}45%{clip:rect(56px,9999px,88px,0)}
  50%{clip:rect(32px,9999px,70px,0)}55%{clip:rect(90px,9999px,122px,0)}
  60%{clip:rect(22px,9999px,50px,0)}65%{clip:rect(66px,9999px,100px,0)}
  70%{clip:rect(10px,9999px,34px,0)}75%{clip:rect(48px,9999px,84px,0)}
  80%{clip:rect(28px,9999px,62px,0)}85%{clip:rect(76px,9999px,112px,0)}
  90%{clip:rect(16px,9999px,44px,0)}100%{clip:rect(58px,9999px,92px,0)}
}

/* ====================== ACCESSIBILITY ======================= */
:where(a,button,[role="button"]):focus-visible{
  outline:2px solid var(--neo); outline-offset:2px;
  box-shadow:0 0 0 3px rgba(123,231,255,.25);
}

/* ======================== UTILITIES ========================= */
.wrap{ display:block }
.card + .card{ margin-top:1rem }
.mt-1{ margin-top:.5rem } .mt-2{ margin-top:1rem } .mt-3{ margin-top:1.5rem }

/* ========================== HERO ============================ */
.hero .card{ margin-top:.6rem }
.hero .card .lede{ margin:.15rem 0 .6rem }


/* === Panel color fix: darker teal glass like your 2nd screenshot === */
/* make the base glass darker/denser */
:root{
  --glass-1: rgba(9, 22, 32, .64);   /* top of panel */
  --glass-2: rgba(9, 25, 36, .74);   /* bottom of panel */
}

/* replace the panel background with deeper teal + a soft cyan “gloss” at the top */
.card{
  background:
    /* soft cyan gloss that fades down */
    radial-gradient(120% 140% at 50% -18%,
      rgba(123,231,255,.10) 0%,
      rgba(123,231,255,.06) 22%,
      rgba(123,231,255,0) 60%),
    /* dense glass */
    linear-gradient(180deg, var(--glass-1) 0%, var(--glass-2) 100%);
  backdrop-filter: blur(4px) saturate(115%);
  border-color: rgba(123,231,255,.26);
}

/* grid a touch subtler so the panel reads darker */
.card::before{ opacity:.28; }          /* was ~.42 in the earlier file */

/* neon rim slightly calmer so the fill looks darker, not “lit” */
.card::after{
  box-shadow:
    inset 0 0 0 1px rgba(123,231,255,.28),
    0 0 36px rgba(32,184,255,.14);
}

/* keep the corner brackets bright against the darker glass */
.hud-corners{
  filter: drop-shadow(0 0 6px rgba(123,231,255,.28)); /* subtle cyan glow */
}

/* ============================================
   HUD Add-On Pack (cyan → sci-lab UI)
   Append after fandom.css
   ============================================ */

/* optional green CRT variant (toggle on <body class="hud-green">) */
body.hud-green{
  --neo:#9aff74; --neo-2:#85ff5a; --neo-3:#35ff5a;
  --text:#eaffea;
  --grid:rgba(162,255,140,.22);
  --glow:rgba(154,255,124,.45);
  --glow-hi:rgba(53,255,90,.30);
}

/* ---------- Micro panel (floating data tile) ---------- */
.hud-panel{
  --pad: .6rem;
  display:grid; gap:.35rem;
  padding:var(--pad);
  background:linear-gradient(180deg, rgba(15,26,36,.74), rgba(15,26,36,.9));
  border:1px solid rgba(123,231,255,.35);
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.45);
  position:relative;
}
.hud-panel::before{
  content:""; position:absolute; inset:8px; border-radius:8px; pointer-events:none;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/18px 18px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/18px 18px;
  opacity:.35; mix-blend-mode:soft-light;
}
.hud-panel .label{
  font:500 14px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.14em; text-transform:uppercase; color:#cfefff; opacity:.9;
}
.hud-panel .value{
  font:500 16px/1.2 "IBM Plex Mono", ui-monospace, monospace;
  color:var(--text);
}

/* ---------- Analyzer thumbnail (image + brackets + caption) ---------- */
.hud-thumb{
  position:relative; border-radius:10px; overflow:hidden;
  border:1px solid rgba(123,231,255,.45);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 8px 24px #0006;
}
.hud-thumb img{ display:block; width:100%; height:auto; }
.hud-thumb::before,
.hud-thumb::after{
  content:""; position:absolute; inset:6px; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.6' stroke-linecap='round'><path d='M7 3H3v4'/></svg>") top left/22px 22px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.6' stroke-linecap='round'><g transform='scale(-1,1) translate(-24,0)'><path d='M7 3H3v4'/></g></svg>") top right/22px 22px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.6' stroke-linecap='round'><g transform='scale(1,-1) translate(0,-24)'><path d='M7 3H3v4'/></g></svg>") bottom left/22px 22px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.6' stroke-linecap='round'><g transform='scale(-1,-1) translate(-24,-24)'><path d='M7 3H3v4'/></g></svg>") bottom right/22px 22px no-repeat;
  mix-blend-mode:screen; opacity:.9;
}
.hud-thumb .cap{
  position:absolute; left:8px; right:8px; bottom:6px;
  display:flex; justify-content:space-between; gap:.6rem;
  font:500 13px/1.1 "IBM Plex Mono", ui-monospace, monospace;
  color:#07131c; background:rgba(191,240,255,.9);
  border:1px solid rgba(123,231,255,.55); border-radius:6px;
  padding:.22rem .45rem;
}

/* ---------- Reticle overlay (crosshair + ticks) ---------- */
.hud-reticle{
  position:relative; min-height:140px;
}
.hud-reticle::before,
.hud-reticle::after{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:linear-gradient(transparent, rgba(123,231,255,.5) 25% 75%, transparent);
  transform:translateX(-.5px);
  mix-blend-mode:screen;
}
.hud-reticle::after{
  top:50%; left:0; right:0; height:1px; width:auto; transform:none;
  background:linear-gradient(90deg, transparent, rgba(123,231,255,.5) 25% 75%, transparent);
}
.hud-reticle .tick{
  position:absolute; width:10px; height:10px; border-radius:2px;
  background:#7be7ff; box-shadow:0 0 10px rgba(123,231,255,.8);
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation:ret-blink 1.8s ease-in-out infinite;
}
@keyframes ret-blink{
  0%,100%{opacity:.9; transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.5; transform:translate(-50%,-50%) scale(.9)}
}


/* ---------- Micro table (spec sheet) ---------- */
.hud-table{
  width:100%; border-collapse:collapse; font:500 13px/1.3 "IBM Plex Mono", ui-monospace, monospace;
  color:var(--text);
  border:1px solid rgba(123,231,255,.35);
  background:linear-gradient(180deg, rgba(15,26,36,.7), rgba(15,26,36,.86));
}
.hud-table th, .hud-table td{
  padding:.35rem .5rem; text-align:left; border-bottom:1px dashed rgba(123,231,255,.28);
}
.hud-table th{
  color:#bfefff; text-transform:uppercase; letter-spacing:.12em; font-weight:500;
  background:linear-gradient(180deg, rgba(97,210,255,.12), rgba(32,184,255,.06));
}
.hud-table tr:last-child td{ border-bottom:0 }

/* ---------- Connectors: draw lines between modules ---------- */
.hud-line{
  position:absolute; pointer-events:none;
  --x1: 0; --y1: 0; --x2: 100%; --y2: 0; /* percentages relative to .hud-line box */
}
.hud-line::before{
  content:""; position:absolute;
  left:var(--x1); top:var(--y1);
  width:calc(var(--x2) - var(--x1)); height:1px;
  background:linear-gradient(90deg, rgba(123,231,255,.0), rgba(123,231,255,.6) 40% 60%, rgba(123,231,255,.0));
  transform-origin:left center;
}
.hud-node{
  position:absolute; width:8px; height:8px; border-radius:2px;
  background:#7be7ff; box-shadow:0 0 10px rgba(123,231,255,.8);
}

/* ---------- Sticky side rail (optional diagnostic column) ---------- */
.hud-rail{
  position:sticky; top:10px; display:grid; gap:.6rem;
}
@media (max-width: 980px){ .hud-rail{ position:static } }

/* —— HUD RADAR (container stays still; only .sweep rotates) —— */
.hud-radar{
  position:relative;
  width:160px; aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  /* static rings + crosshair */
  background:
    /* vertical + horizontal hairlines */
    linear-gradient(90deg, rgba(123,231,255,.25) 0 1px, transparent 1px) 50% 0/1px 100% no-repeat,
    linear-gradient(180deg, rgba(123,231,255,.25) 0 1px, transparent 1px) 0 50%/100% 1px no-repeat,
    /* concentric rings */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(123,231,255,.22) 0 1px, transparent 2px 22px),
    radial-gradient(circle at 50% 50%, rgba(123,231,255,.08), rgba(32,184,255,.03) 60%, transparent 70%);
  box-shadow:
    inset 0 0 0 1px rgba(123,231,255,.35),
    0 0 24px rgba(32,184,255,.25);
}

/* rotating beam */
.hud-radar .sweep{
  position:absolute; inset:-12%;
  border-radius:50%;
  /* narrow conic wedge; the rest is transparent */
  background:
    conic-gradient(from 0deg,
      rgba(123,231,255,0) 0deg,
      rgba(123,231,255,.65) 8deg,
      rgba(123,231,255,.0) 18deg,
      rgba(123,231,255,0) 360deg);
  filter: blur(8px) saturate(130%);
  transform-origin:50% 50%;
  animation: radar-spin 6s linear infinite;
  pointer-events:none;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }

/* optional little pings (if you add .blip elements or use the JS below) */
.hud-radar .blip{
  position:absolute; width:6px; height:6px; border-radius:50%;
  left:calc(var(--x,50) * 1%); top:calc(var(--y,50) * 1%);
  transform:translate(-50%,-50%);
  background:#bff0ff;
  box-shadow:0 0 10px rgba(123,231,255,.9), 0 0 20px rgba(32,184,255,.5);
  animation: blip-fade 1.8s ease-out forwards;
}
@keyframes blip-fade{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) }
  12%{ opacity:1 }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.7) }
}

/* Target HUD images — adjust selector to match your markup */
.card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(123,231,255,.35);
  box-shadow: 0 0 22px rgba(32,184,255,.25);

  /* Colour correction stack */
  filter:
    hue-rotate(-45deg)   /* shifts purple toward blue */
    saturate(1.2)        /* bump cyan vibrancy */
    contrast(1.15)       /* punchiness */
    brightness(0.95);    /* keep shadows moody */
}

/* Optional: on hover, make the screen pop */
.card img:hover {
  filter:
    hue-rotate(-45deg)
    saturate(1.35)
    contrast(1.25)
    brightness(1.05);
  box-shadow: 0 0 30px rgba(123,231,255,.55);
}

/* ============================================================
   RESPONSIVE / MOBILE TUNING — append at the end of fandom.css
   Makes HUD rows stack, scales the radar, relaxes padding/glow,
   and keeps tables & chips readable on small screens.
   ============================================================ */

/* ---------- Wide → mid (≤ 1100px) ---------- */
@media (max-width: 1100px){
  main.page{ width: min(96vw, var(--maxw)); }
  .card{ padding: calc(var(--pad) + 2px); }
  .hud-corners{ --s: 24px; --m: 10px; }      /* smaller corner SVGs */
  .chips li{ font-size: 18px; }
}

/* ---------- Tablet-ish (≤ 900px) ---------- */
@media (max-width: 900px){
  /* Cards breathe a bit less; grid overlay calms down */
  .card{ padding: var(--pad); }
  .card::before{ inset:8px; opacity:.22; }

  /* HUD corner glyphs scale to fit tighter cards */
  .hud-corners{ --s: 22px; --m: 8px; }

  /* Title caret sits closer so it doesn't wrap weirdly */
  .hud-title::after{ right:-.3ch; }

  /* Trio compare already stacks at 880px; keep spacing pleasant */
  .grid.trio > li{ padding: .8rem .9rem; }
}

/* ---------- Phone: stack everything (≤ 720px) ---------- */
@media (max-width: 720px){
  /* Global rhythm */
  main.page{ margin: clamp(14px, 3vh, 28px) auto; }
  .card{ padding: calc(var(--pad) - .2rem); border-radius: 12px; }
  .card::before{ inset:6px; }
  .hud-corners{ --s: 20px; --m: 7px; }      /* tiny brackets, closer to edge */

  /* Make headings a touch smaller (your clamps already help) */
  .hero h1{ font-size: clamp(32px, 11vw, 56px); }
  .prose h2{ font-size: clamp(22px, 6vw, 32px); }
  .prose h3{ font-size: clamp(18px, 4.8vw, 24px); }

  /* Chips wrap cleanly and don’t balloon vertically */
  .chips{ gap:8px; }
  .chips li{ font-size: 17px; padding: .22rem .5rem; border-radius: 8px; }

  /* --- HUD ROWS (your key/value pairs) → single column --- */
  .hud-row{
    --keyw: auto;                   /* disable fixed left column */
    grid-template-columns: 1fr;     /* stack */
    gap: 6px;
    margin-top: .7rem;
  }
  .hud-row::after{ display:none; }  /* hide dotted leader line */

  .hud-key{
    padding-left: 12px;
    font-size: 16px;
    letter-spacing:.10em;
  }
  .hud-key::before{ width:7px; height:7px; }

  .hud-val{
    justify-self: stretch;          /* full width pill */
    display: inline-block;
    font-size: 16px;
  }

  /* Bars go full width and get a bit taller for touch */
  .statbar{
    height: 16px;
    border-radius: 9px;
  }

  /* Badge pills a smidge smaller */
  .badge{ font-size: 14px; padding:.12rem .4rem; }

  /* UI strip gets thinner to save vertical space */
  .ui-strip{ height:6px; margin:.45rem 0 .8rem; }

  /* --- RADAR: scale & center automatically --- */
  .hud-radar{
    width: clamp(120px, 48vw, 180px);
    margin: .4rem auto;             /* center in the column */
    box-shadow:
      inset 0 0 0 1px rgba(123,231,255,.30),
      0 0 18px rgba(32,184,255,.18);
  }

  /* Screen/figure captions stay readable */
  .hud-caption{
    font-size: .9rem;
    padding: .28rem .5rem;
  }

  /* Images already respond width:100%; give them softer glow on small screens */
  .card img{ box-shadow: 0 0 16px rgba(32,184,255,.22); }

  /* Comparison grid: a little extra gap when stacked */
  .grid.trio{ gap: 14px; }
}

/* ---------- Small phones (≤ 520px) ---------- */
@media (max-width: 520px){
  /* Tighten card internals further */
  .card{ padding: calc(var(--pad) - .35rem); border-radius: 10px; }
  .card::before{ inset:5px; }
  .hud-corners{ --s: 18px; --m: 6px; }

  /* Keep headline from crowding the corners */
  .hero h1{ font-size: clamp(28px, 12vw, 48px); }

  .chips li{ font-size: 16px; padding:.2rem .45rem; }
  .hud-key, .hud-val{ font-size: 15px; }

  /* Make scanline a little softer so small screens aren’t overbright */
  :root{ --scan-opacity: .70; }
}

/* ---------- Ultra small (≤ 380px) ---------- */
@media (max-width: 380px){
  .badge{ display:inline-block; transform: scale(.92); transform-origin:left center; }
  .hud-caption{ font-size: .82rem; }
  .hud-radar{ width: clamp(110px, 60vw, 160px); }
}

/* ---------- Tables / specs: enable horizontal scroll safely ---------- */
.hud-table{ width: 100%; }
.hud-table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius: 10px; border:1px solid rgba(123,231,255,.28);
}
.hud-table-wrap .hud-table{ border:0; } /* no double borders */

/* ---------- Optional: responsive module grid ----------
   If you ever want to place several HUD modules side-by-side in a card,
   wrap them in <div class="hud-grid">…</div>. It auto-stacks on mobile. */
.hud-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) );
}
@media (max-width: 720px){
  .hud-grid{ grid-template-columns: 1fr; }
}

/* ───────────────── HUD NAV (cyan lab style) ───────────────── */
.hud-nav{
  /* placement like your home page */
  width:min(1000px, 92vw);
  margin: clamp(12px, 3vh, 28px) auto 12px;
  display:flex; justify-content:center; gap: 20px; flex-wrap:wrap;
  position:relative; z-index: 2;
  padding: 10px 16px;

  /* glassy rail */
  background:
    radial-gradient(120% 200% at 50% -40%,
      rgba(123,231,255,.12) 0%, rgba(123,231,255,0) 60%),
    linear-gradient(180deg, rgba(15,26,36,.70), rgba(15,26,36,.86));
  border:1px solid rgba(123,231,255,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 12px 32px rgba(0,0,0,.38);
  backdrop-filter: blur(6px) saturate(115%);
  border-radius: 999px;
}

/* corner brackets (small) */
.hud-nav::before,
.hud-nav::after{
  content:"";
  position:absolute; inset:6px; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.5' stroke-linecap='round'><path d='M7 3H3v4'/></svg>") left 10px top 10px/18px 18px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.5' stroke-linecap='round'><g transform='scale(-1,1) translate(-24,0)'><path d='M7 3H3v4'/></g></svg>") right 10px top 10px/18px 18px no-repeat;
  opacity:.9; mix-blend-mode:screen;
}
.hud-nav::after{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.5' stroke-linecap='round'><g transform='scale(1,-1) translate(0,-24)'><path d='M7 3H3v4'/></g></svg>") left 10px bottom 10px/18px 18px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237be7ff' stroke-width='1.5' stroke-linecap='round'><g transform='scale(-1,-1) translate(-24,-24)'><path d='M7 3H3v4'/></g></svg>") right 10px bottom 10px/18px 18px no-repeat;
}

/* tiny scan grid */
.hud-nav > .grid { display:none } /* (reserved if you ever add a child) */
.hud-nav::marker { /* noop */ }

/* links */
.hud-nav a{
  position:relative;
  display:inline-block;
  padding:.35rem .7rem;
  border-radius:8px;

  font-family: var(--body, "IBM Plex Mono", ui-monospace, monospace);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:lowercase;
  color: var(--text, #eef8ff);
  text-decoration:none;

  
}

/* separators like your homepage (no pipes in markup) */
.hud-nav a + a { margin-left: 6px }
.hud-nav a + a::before{
  content:"";
  position:absolute; left:-14px; top:50%; width:6px; height:6px; border-radius:50%;
  transform:translateY(-50%);
  background: radial-gradient(circle, rgba(123,231,255,.85), rgba(123,231,255,.0) 70%);
  filter: drop-shadow(0 0 6px rgba(123,231,255,.35));
  opacity:.8;
}

/* hover/active accents: neon underbar + slight parallax “glitch” */
.hud-nav a::after{
  content:""; position:absolute; left:8px; right:8px; bottom:6px; height:2px;
  background: linear-gradient(90deg, #e9faff, var(--neo, #7be7ff) 30%, transparent 80%);
  box-shadow: 0 0 10px rgba(123,231,255,.38);
  transform: scaleX(0); transform-origin:left center;
  transition: transform .18s ease;
}
.hud-nav a:hover::after,
.hud-nav a:focus-visible::after{ transform: scaleX(1) }
.hud-nav a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.35), 0 0 18px rgba(123,231,255,.22);
  filter: brightness(1.06) saturate(1.05);
}

/* “current page” state */
.hud-nav a[aria-current="page"],
.hud-nav a.active{
  background: linear-gradient(180deg, rgba(97,210,255,.22), rgba(32,184,255,.12));
  border-color: rgba(123,231,255,.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 16px rgba(32,184,255,.22);
}
.hud-nav a[aria-current="page"]::after,
.hud-nav a.active::after{ transform: scaleX(1) }

/* focus ring */
.hud-nav a:focus-visible{
  outline:2px solid var(--neo, #7be7ff);
  outline-offset:2px;
  box-shadow: 0 0 0 3px rgba(123,231,255,.25);
}

/* night mode tuning (matches your Sherlock night palette) */
body.sherlock-page.night .hud-nav{
  background:
    radial-gradient(140% 220% at 50% -50%, rgba(123,231,255,.08), rgba(123,231,255,0) 60%),
    linear-gradient(180deg, rgba(6,14,20,.78), rgba(6,12,18,.90));
  border-color: rgba(123,231,255,.22);
}
body.sherlock-page.night .hud-nav a{
  background: linear-gradient(180deg, rgba(97,210,255,.12), rgba(32,184,255,.06));
  border-color: rgba(123,231,255,.28);
}

/* responsive: tighten gaps and make the rail wrap nicely on phones */
@media (max-width: 720px){
  .hud-nav{ gap:10px; padding:8px 10px }
  .hud-nav a{ padding:.32rem .58rem; font-size: .95rem }
  .hud-nav a + a::before{ left:-10px }
}
@media (max-width: 420px){
  .hud-nav{ border-radius: 14px }
  .hud-nav a{ padding:.28rem .5rem; font-size:.9rem }
}

/* -----------------------------------------
   MOBILE-ONLY fix: stack #moriarty content
   (does NOTHING on laptops/desktops)
------------------------------------------*/
@media (max-width: 820px){

  /* kill any grid/flex row behavior on the card itself */
  #moriarty{
    display:block !important;
  }

  /* make every direct child flow as a single column row */
  #moriarty > *{
    width:100% !important;
    max-width:none !important;
    grid-column: 1 / -1 !important;  /* if it was grid */
    flex: 0 0 auto !important;       /* if it was flex */
    float:none !important;            /* if anything was floated */
    margin-left:0 !important;         /* clear desktop offsets */
  }

  /* the media/image block goes first, centered, then text below */
  #moriarty img,
  #moriarty .hud-thumb,
  #moriarty .media,
  #moriarty figure{
    display:block !important;
    width:100% !important;
    max-width: 360px;                 /* keeps it pleasantly sized */
    margin: 0 auto 12px auto;         /* center above the text */
  }

  /* keep your key/value rows readable on narrow screens */
  #moriarty .hud-row{
    --keyw: 120px;                    /* slightly narrower label col */
    grid-template-columns: var(--keyw) 1fr !important;
    margin-top:.5rem;
  }

  /* lists/paragraphs breathe edge-to-edge */
  #moriarty p,
  #moriarty ul,
  #moriarty .tagline,
  #moriarty h3,
  #moriarty .hud-val,
  #moriarty .statbar{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Sherlock: night-mode switch anchored to the nav without moving it */
.sherlock-page .hud-nav{ position: relative; }                 /* anchor for abspos */
.sherlock-page .night-switch{
  --offset: -52px;                                             /* nudge from nav edge */
  position: absolute; top: 50%; right: var(--offset);
  transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px;
  background: linear-gradient(180deg, #0e1823, #0a121a);
  border: 1px solid rgba(123,231,255,.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 8px 18px rgba(0,0,0,.45);
  cursor: pointer;
  outline: none;
}
.sherlock-page .night-switch:hover{
  border-color: rgba(123,231,255,.6);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 10px 22px rgba(0,0,0,.5),
    0 0 14px rgba(123,231,255,.2);
}
.sherlock-page .night-switch:focus-visible{
  box-shadow:
    0 0 0 2px rgba(123,231,255,.8),
    0 0 0 5px rgba(123,231,255,.15),
    0 10px 22px rgba(0,0,0,.55);
}

/* simple icon: sun in day, crescent in night (driven by aria-checked) */
.sherlock-page .night-switch::after{
  content: "☀";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1;
  color: #cfe4ff;
  text-shadow: 0 0 6px rgba(242,209,126,.45), 0 0 12px rgba(242,209,126,.25);
}
.sherlock-page .night-switch[aria-checked="true"]{
  background: linear-gradient(180deg, #0a0f17, #091018);
  border-color: rgba(123,231,255,.55);
}
.sherlock-page .night-switch[aria-checked="true"]::after{
  content: "☾";
  color: #cfe4ff;
  text-shadow: 0 0 8px rgba(123,231,255,.45), 0 0 18px rgba(32,184,255,.28);
}

/* keep it sane on very small screens: tuck closer to the nav edge */
@media (max-width: 700px){
  .sherlock-page .night-switch{ --offset: -40px; width: 34px; height: 34px; }
}
@media (max-width: 480px){
  .sherlock-page .night-switch{ --offset: -32px; width: 32px; height: 32px; }
}

/* ===== EVA Autopsy (scoped & tidy) ===== */

/* Keep columns equal to the stage so copy never exceeds the image */
.sherlock-page #eva-autopsy .astro-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* equal halves on desktop */
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px){
  .sherlock-page #eva-autopsy .astro-layout{ grid-template-columns: 1fr; }
}

/* Stage (astronaut) — inherits the global .card img filter */
#eva-autopsy .astro-stage{
  position: relative;
  margin: 0;
  background: #060a12;
  border: 1px solid rgba(123,231,255,.35);
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: inset 0 10px 24px rgba(0,0,0,.45);
}
#eva-autopsy .astro-stage > img{
  display: block; width: 100%; height: auto;
  aspect-ratio: 1/1; object-fit: cover;
  /* no filter here on purpose — it uses .card img { filter: … } */
}

/* Inspector (zoom pane + prose) */
#eva-autopsy .astro-inspect{
  display: grid;
  grid-template-rows: 220px auto;   /* zoom on top, copy under */
  gap: .7rem;
  align-items: start;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18)), #0e1823;
  border: 1px solid rgba(123,231,255,.35);
  border-radius: .6rem;
  padding: .75rem .85rem;
}
@media (max-width:560px){
  #eva-autopsy .astro-inspect{ grid-template-rows: 180px auto; }
}
#eva-autopsy .astro-inspect .zoom{
  position: relative;
  border: 1px solid rgba(123,231,255,.35);
  border-radius: .4rem;
  overflow: hidden;
  background-color: #000;
  background-image: var(--zoom-src, none);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 200% auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.45);
}

/* Typography: inherit your page styles (h3, tagline, body) */
#eva-autopsy .tagline,
#eva-autopsy p,
#eva-autopsy .facts dd{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
#eva-autopsy h3{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-shadow: inherit;
  margin: .1rem 0 .4rem;
}

/* Crosshair hotspots */
#eva-autopsy .hotspot{
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  transform: translate(-50%,-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  cursor: pointer; outline: none;
  background:
    radial-gradient(closest-side, rgba(123,231,255,.18) 36%, transparent 37%); /* inner ring */
}
#eva-autopsy .hotspot::before,
#eva-autopsy .hotspot::after{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background: rgba(123,231,255,.85);
  box-shadow: 0 0 6px rgba(32,184,255,.5);
}
#eva-autopsy .hotspot::before{ width:18px; height:2px; } /* horizontal tick */
#eva-autopsy .hotspot::after { width:2px;  height:18px; } /* vertical tick   */

#eva-autopsy .hotspot:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.7) inset,
    0 0 16px rgba(32,184,255,.55);
}
#eva-autopsy .hotspot:focus-visible{
  box-shadow:
    0 0 0 2px #fff inset,
    0 0 0 4px rgba(123,231,255,.6),
    0 0 20px rgba(32,184,255,.6);
}
#eva-autopsy .hotspot[aria-current="true"]{
  box-shadow:
    0 0 0 2px #fff inset,
    0 0 22px rgba(123,231,255,.75);
}

/* Night: keep the same contrast as the rest of the page */
body.night #eva-autopsy .astro-stage{ background:#020409; }
body.night #eva-autopsy .astro-inspect{
  background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(0,0,0,.22)), #0a1118;
}

/* ===== EVA: fix layout + tone + typography ===== */

/* Two equal columns; let items stretch to the row height */
#eva-autopsy .astro-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
  align-items: stretch;
}

/* The stage defines the “truth height” via aspect-ratio */
#eva-autopsy .astro-stage{ aspect-ratio: 1 / 1; }

/* Inspector matches the stage height (JS sets the exact px), and scrolls if copy is long */
#eva-autopsy .astro-inspect{
  min-height: 0;
  overflow: hidden;          /* container itself won't grow taller than the row */
  display: grid;
  grid-template-rows: auto 1fr; /* zoom then scrollable copy */
}

/* Zoom pane gets a sensible default height; JS will override with an exact value */
#eva-autopsy #astro-zoom{
  max-height: 180px;
  border: 2px solid rgba(123,231,255,.35);
  border-radius: .4rem;
  overflow: hidden;
  background-color:#000;
  background-image: var(--zoom-src, none);
  background-repeat:no-repeat;
  background-position: 50% 50%;
  background-size: 200% auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.45);
  width: 60%;
  margin: auto;
}

/* Make only the text block scroll when content is taller than the image */
#eva-autopsy .astro-inspect .copy{ min-height:0; overflow:auto; }

/* On stacked/mobile, let the inspector flow naturally again */
@media (max-width: 900px){
  #eva-autopsy .astro-layout{ grid-template-columns: 1fr; }
  #eva-autopsy .astro-inspect{ height:auto !important; }
}

/* Tone: push the astronaut from green → your neon-cyan */
#eva-autopsy .astro-stage > img{
  /* start from your global filter and bias bluer, a hair less green */
  filter:
    hue-rotate(0deg)
    saturate(1)
    contrast(1.16)
    brightness(.96);
}

/* Prose: ensure EVA uses the same h3/tagline/body styling as the rest of the page */
#eva-autopsy h3{
  font-family: var(--hud);
  font-size: clamp(20px, 3.8vw, 28px);
  color:#c7f3ff;
  margin:.1rem 0 .4rem;
  text-shadow: 0 0 10px rgba(123,231,255,.25);
}
#eva-autopsy .tagline{
  font-family: var(--hud);
  font-size: clamp(18px, 3.8vw, 26px);
  color:#d8f7ff;
  text-shadow: 0 0 10px rgba(123,231,255,.25);
}

/* Crosshair hotspots (unchanged behaviour, just restated for clarity) */
#eva-autopsy .hotspot{
  position:absolute; left:calc(var(--x)*1%); top:calc(var(--y)*1%);
  transform:translate(-50%,-50%);
  width:30px; height:30px; border:0; border-radius:50%;
  cursor:pointer; outline:none;
  background: radial-gradient(closest-side, rgba(123,231,255,.18) 36%, transparent 37%);
}
#eva-autopsy .hotspot::before,
#eva-autopsy .hotspot::after{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background: rgba(123,231,255,.9);
  box-shadow: 0 0 6px rgba(32,184,255,.5);
}
#eva-autopsy .hotspot::before{ width:18px; height:2px; }
#eva-autopsy .hotspot::after { width:2px;  height:18px; }

/* EVA — give copy more room + crop the astronaut sides */
#eva-autopsy .astro-layout{
  /* image column ~44%, text column ~56% */
  grid-template-columns: minmax(280px, 44%) 1fr;
}

/* make the JS height match visually (include padding/border in the set height) */
#eva-autopsy .astro-stage,
#eva-autopsy .astro-inspect{ box-sizing: border-box; }

/* crop: trim left/right without skew; keeps the square stage */
#eva-autopsy .astro-stage{
  --crop-x: 10%;            /* ← amount trimmed from each side; tweak 6–10% to taste */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

#eva-autopsy .astro-stage > img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fill the square */
  object-position: 50% 50%;
  /* crop evenly from both sides */
  clip-path: inset(0 var(--crop-x) 0 var(--crop-x));
}

/* when stacked on mobile, don’t crop (use the full image width) */
@media (max-width: 900px){
  #eva-autopsy .astro-layout{ grid-template-columns: 1fr; }
  #eva-autopsy .astro-stage{ --crop-x: 0%; }
}

/* === EVA: make the image column thinner (crop the sides), keep height === */
#eva-autopsy{ --eva-img-w: 380px; }           /* tweak 340–420px to taste */

#eva-autopsy .astro-layout{
  /* force a fixed-width left column + flexible right column */
  grid-template-columns: var(--eva-img-w) minmax(0,1fr) !important;
}

#eva-autopsy .astro-stage{
  width: var(--eva-img-w) !important;         /* match the column */
  justify-self: start;
  overflow: hidden;                           /* hide cropped edges */
  box-sizing: border-box;                     /* keep your height sync exact */
}

#eva-autopsy .astro-inspect{ 
  min-width: 0;                                /* allow text column to shrink/wrap */
  box-sizing: border-box;
}

/* “crop” the image by zooming a touch, but keep the same height */
#eva-autopsy .astro-stage > img{
  width: 100%;
  height: 100%;
  object-fit: fill;                           /* fill the stage */                      /* trims the empty sides */
  transform-origin: 50% 50%;
  clip-path: none !important;                  /* in case an older rule was still on */
}

/* When stacked on mobile, go back to full-width image (no forced crop) */
@media (max-width: 900px){
  #eva-autopsy .astro-layout{ grid-template-columns: 1fr !important; }
  #eva-autopsy .astro-stage{ width: 100% !important; }
  #eva-autopsy .astro-stage > img{ transform: none; }
}

/* === EVA: crop the astronaut's left/right edges (no height change) === */
#eva-autopsy{
  --eva-side-crop: 14%;   /* how much to trim from LEFT & RIGHT (try 10–18%) */    /* slight zoom so the subject stays large after trim */
}

/* keep the stage hiding overflow */
#eva-autopsy .astro-stage{
  overflow: hidden;
}

/* hard crop the image sides */
#eva-autopsy .astro-stage > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* crop left/right equally */
  clip-path: inset(0 var(--eva-side-crop) 0 var(--eva-side-crop) round 0);
  /* small zoom to compensate for the trim */
  transform-origin: 50% 50%;
}

/* on small screens, show the full image again (optional) */
@media (max-width: 900px){
  #eva-autopsy .astro-stage > img{
    clip-path: inset(0);
    transform: none;
  }
}
/* === EVA: crop the skeleton by narrowing the column (no zoom) === */
/* Content column sizes itself to the stage width */
#eva-autopsy .astro-layout{
  grid-template-columns: auto 1fr;   /* let col-1 match its content width */
}

/* Tweak these two numbers to match your red-line crop */
#eva-autopsy{
  --eva-h: clamp(520px, 58vh, 640px);   /* keep full image height */
  --eva-w: clamp(340px, 36vw, 420px);   /* visible/cropped width */
}

#eva-autopsy .astro-stage{
  position: relative;
  height: var(--eva-h);
  width:  var(--eva-w);                /* <— column width = cropped width */
  overflow: hidden;                    /* hide the side gutters */
  margin: 0;
  background:#060a12;
  border:1px solid rgba(123,231,255,.26);
  border-radius: .6rem;
  box-shadow: inset 0 10px 24px rgba(0,0,0,.45);
}

/* Show the full-height image centered; sides are cropped by the narrower stage */
#eva-autopsy .astro-stage > img{
  position: absolute;
  top: 50%; left: 50%;
  height: 100%;        /* full height preserved */
  width: auto;         /* natural aspect; no zoom */
  transform: translate(-50%, -50%);   /* center; overflow crops the sides */

}

/* Inspector stays synced by your JS; this just keeps mobile nice */
@media (max-width: 900px){
  #eva-autopsy .astro-layout{ grid-template-columns: 1fr; }
  #eva-autopsy .astro-stage{ width: 100%; height: auto; }
  #eva-autopsy .astro-stage > img{
    position: static; transform: none; width: 100%; height: auto;
  }
}


/* ===== EVA Autopsy — “retro scan” UI skin (isolated) ===== */
#eva-autopsy .astro-stage{
  /* subtle vignette + scan grid + CRT lines */
  isolation:isolate;
}
#eva-autopsy .astro-stage::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    /* light grid */
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/26px 26px;
  mix-blend-mode:soft-light; opacity:.25;
  z-index:1;
}
#eva-autopsy .astro-stage::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    /* CRT scanlines */
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px);
  mix-blend-mode:soft-light;
  animation: eva-crt 12s linear infinite;
}
@keyframes eva-crt { from{ background-position:0 0 } to{ background-position:0 8px } }

/* animated scan beam sweeping L→R */
#eva-autopsy .scan-beam{
  position:absolute; top:-6%; bottom:-6%; left:-5%;
  width:2px; z-index:3; opacity:.85;
  background:
    linear-gradient(180deg, rgba(123,231,255,.00), rgba(123,231,255,.55) 40%, rgba(123,231,255,.00)),
    radial-gradient(closest-side, rgba(123,231,255,.35), transparent 70%);
  filter: blur(.6px) saturate(120%);
  transform: translateX(-8%);
  animation: eva-beam 6.2s linear infinite;
}
@keyframes eva-beam { from{ transform:translateX(-8%) } to{ transform:translateX(108%) } }

/* tiny blinking “status LEDs” */
#eva-autopsy .scan-lights{
  position:absolute; left:10px; top:10px; display:flex; gap:8px; z-index:4;
}
#eva-autopsy .scan-lights i{
  width:7px; height:7px; border-radius:2px;
  background:#bff0ff;
  box-shadow:0 0 8px rgba(123,231,255,.85), 0 0 16px rgba(32,184,255,.35);
  opacity:.8;
  animation: led 1.8s ease-in-out infinite;
}
#eva-autopsy .scan-lights i:nth-child(2){ animation-delay:.35s }
#eva-autopsy .scan-lights i:nth-child(3){ animation-delay:.8s }
@keyframes led{ 0%,100%{opacity:.85} 50%{opacity:.35} }

/* zoom pane: crosshair + moving scan line */
#eva-autopsy #astro-zoom{
  position:relative;
  background-blend-mode:screen;
}
#eva-autopsy #astro-zoom::before{
  /* horizontal scan sweep */
  content:""; position:absolute; left:-8%; right:-8%; top:-20%; height:18%;
  background: linear-gradient(180deg, rgba(123,231,255,.25), rgba(123,231,255,0));
  filter: blur(6px);
  animation: eva-zoom-scan 3.4s linear infinite;
}
@keyframes eva-zoom-scan { from{ transform: translateY(-10%) } to{ transform: translateY(520%) } }
#eva-autopsy #astro-zoom::after{
  /* faint crosshair */
  content:"";
  position:absolute; inset:10px; pointer-events:none; border-radius:6px;
  background:
    linear-gradient(90deg, rgba(123,231,255,.35), rgba(123,231,255,.0)) 50% 0/1px 100% no-repeat,
    linear-gradient(180deg, rgba(123,231,255,.35), rgba(123,231,255,.0)) 0 50%/100% 1px no-repeat;
  mix-blend-mode:screen; opacity:.65;
}

@keyframes eva-tape { to { background-position: 120px 0, 0 0 } }

/* make the stage look more like a display surface */
#eva-autopsy .astro-stage{
  background:
    radial-gradient(160% 120% at 50% -10%, rgba(123,231,255,.12), transparent 40%),
    #060a12;
  border-color: rgba(123,231,255,.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 10px 24px rgba(0,0,0,.45) inset;
}