*, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; }
  body { background: #05070c; color: #e9e7e1; }
  ::selection { background: color-mix(in oklab, var(--accent) 40%, transparent); color: #fff; }

  .page {
    --bg: #05070c;
    --bg2: #0c0f14;
    --ink: #e9e7e1;
    --ink-dim: #9aa0a8;
    --ink-faint: #5b626c;
    --line: rgba(233,231,225,0.085);
    --line-strong: rgba(233,231,225,0.16);
    --accent: oklch(0.80 0.13 72);
    --px: 0px; --py: 0px;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }

  /* ---- deep-space backdrop ---- */
  /* starfield canvases are injected by starfield.js into .starscape (z-index 0) */
  .starscape { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .nebula { position: fixed; inset: -40px; z-index: 0; pointer-events: none; opacity: 0;
    transition: opacity .8s ease;
    background:
      radial-gradient(40% 36% at 82% 15%, rgba(86,132,220,0.28), transparent 66%),
      radial-gradient(42% 40% at 11% 84%, rgba(64,168,168,0.22), transparent 68%),
      radial-gradient(30% 30% at 60% 70%, rgba(120,104,200,0.16), transparent 70%),
      radial-gradient(34% 32% at 18% 26%, rgba(224,118,180,0.20), transparent 68%),
      radial-gradient(36% 34% at 90% 62%, rgba(96,184,128,0.16), transparent 68%),
      radial-gradient(32% 30% at 48% 96%, rgba(214,96,84,0.17), transparent 70%); }
  .neb-on .nebula { opacity: 1; }
  .vignette { position: fixed; inset: -20px; pointer-events: none; z-index: 0;
    background: radial-gradient(130% 95% at 50% 32%, transparent 48%, rgba(0,0,0,0.66) 100%); }

  /* ---- type utilities ---- */
  .mono { font-family: "IBM Plex Mono", monospace; }
  .micro { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--ink-faint); }
  .cursor { display: inline-block; width: 8px; height: 1.05em; transform: translateY(2px);
    background: var(--accent); margin-left: 6px; animation: blink 1.15s steps(1) infinite; }
  @keyframes blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
  a.lnk { color: var(--accent); text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--accent) 38%, transparent); }
  a.lnk:hover { border-bottom-color: var(--accent); }
  /* small brand mark shown before LurraPay / Ara links */
  .brand-ico { height: 0.95em; width: auto; vertical-align: -0.16em; margin-right: 0.34em;
    display: inline-block; }

  /* ---- top bar ---- */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px clamp(20px, 4vw, 44px);
    background: color-mix(in oklab, var(--bg) 78%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .readout { display: flex; gap: clamp(12px, 2vw, 26px); font-size: 11.5px; letter-spacing: 0.06em;
    color: var(--ink-faint); }
  .readout span { white-space: nowrap; }
  .readout .ok { color: var(--accent); }
  .readout .sep, .readout .ver { color: var(--ink-faint); }
  @media (max-width: 620px) { .readout .sep { display: none; } }
  .nav { display: flex; gap: 22px; font-size: 13px; letter-spacing: 0.04em; }
  .nav a { color: var(--ink-dim); text-decoration: none; transition: color .15s; white-space: nowrap; }
  .nav a:hover { color: var(--ink); }
  .nav a.on { color: var(--accent); }
  .nav a.on::before { content: "› "; }

  /* ---- main wrap / panel ---- */
  .wrap { position: relative; z-index: 10; flex: 1;
    width: 100%; max-width: 1200px; margin: 0 auto;
    padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 44px); }

  .panel { position: relative; padding: 0; }
  /* content now floats directly on the starfield; a soft, edgeless darkening
     sits behind text blocks so copy stays legible over stars */
  .soft-dark { position: relative; }
  .soft-dark::before { content: ""; position: absolute; inset: -30px -52px; z-index: -1;
    background: radial-gradient(ellipse 72% 78% at 50% 50%, rgba(4,6,11,0.74), rgba(4,6,11,0) 72%);
    filter: blur(11px); pointer-events: none; }

  /* corner brackets */
  .frame > .c { position: absolute; width: 17px; height: 17px; border: 1.5px solid var(--accent); }
  .frame > .c.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .frame > .c.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
  .frame > .c.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
  .frame > .c.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

  /* ---- home ---- */
  /* single column while the headshot is hidden — restore "minmax(0,1fr) 360px" when adding it back */
  .home-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(32px, 5vw, 64px);
    align-items: center; }
  .mlabel { margin-bottom: 18px; }
  .name { font-family: "Archivo", system-ui, sans-serif; font-weight: 800;
    font-size: clamp(46px, 7vw, 78px); line-height: 0.95; letter-spacing: 0.005em;
    margin: 0 0 20px; }
  .statusline { font-size: 13.5px; color: var(--accent); letter-spacing: 0.04em; margin-bottom: 30px; }
  .body { max-width: 560px; font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.62; }
  .body p { margin: 0 0 18px; text-wrap: pretty; }
  .body p.dim { color: var(--ink-dim); }
  .body p.lead { margin-bottom: 0; font-size: 1.06em; color: var(--ink); }

  /* photo */
  .photo-col { width: 360px; max-width: 100%; }
  /* diagonal hatch shows through as a placeholder until a headshot is added */
  .photo-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
    background:
      repeating-linear-gradient(135deg, color-mix(in oklab, var(--accent) 13%, transparent) 0 2px, transparent 2px 12px),
      var(--bg2); }
  .photo-wrap .headshot { position: relative; z-index: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; }
  .photo-wrap > .c { z-index: 3; }
  .cap { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-faint);
    margin-top: 13px; letter-spacing: 0.04em; }
  .cap .live { color: var(--accent); }

  /* NOTE: the responsive (max-width: 820px) overrides live at the END of this
     file — they must come AFTER the base layout rules below or the desktop
     defaults (equal specificity, later in source) would override them. */

  /* ---- observation viewport (image bleeds edgelessly into the starfield) ---- */
  .viewport { position: relative; margin-top: clamp(34px, 5vw, 60px); padding: 0; }
  /* keep only two diagonal registration marks, floating over the edgeless image */
  .viewport > .c { z-index: 3; }
  .viewport > .c.tr, .viewport > .c.bl { display: none; }
  .viewport > .c.tl { top: 10px; left: 10px; }
  .viewport > .c.br { bottom: 10px; right: 10px; }
  .vp-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    padding: 16px clamp(16px, 2vw, 28px); font-size: 11px; letter-spacing: 0.16em;
    color: var(--ink-faint);
    background: linear-gradient(to bottom, rgba(5,7,12,0.5), rgba(5,7,12,0)); }
  .vp-head span { white-space: nowrap; }
  .vp-head .vp-id { color: var(--accent); }
  /* no box and no CSS edge-fade: the keyed image is already transparent in the
     dark areas, and the moon is fully opaque, so it floats on the starfield as-is */
  .vp-frame { position: relative; width: 100%; aspect-ratio: 1920 / 1280; overflow: hidden; }
  .vp-frame img { width: 100%; height: 100%; object-fit: cover; display: block;
    /* lift the near-black plate just enough to read on the page, and tie it to the accent */
    filter: brightness(1.06) contrast(1.04); }
  /* scanline overlay removed: the keyed image is transparent in the dark areas,
     so a full-rectangle overlay would re-draw the box we just dissolved */
  .vp-scan { display: none; }
  .vp-cap { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap;
    gap: 8px; padding: 14px clamp(16px, 2vw, 28px); font-size: 11px; letter-spacing: 0.12em;
    background: linear-gradient(to top, rgba(5,7,12,0.55), rgba(5,7,12,0)); }
  .vp-cap .vp-title { color: var(--ink); letter-spacing: 0.06em; }
  .vp-cap .vp-credit { color: var(--ink-faint); }

  /* ---- about ---- */
  .about-h { font-family: "Archivo", system-ui, sans-serif; font-weight: 700;
    font-size: clamp(38px, 5.5vw, 60px); line-height: 0.98; letter-spacing: -0.01em; margin: 6px 0 0; }
  .about .rule { height: 1px; background: var(--line-strong); margin: 26px 0 8px; }
  .about-layout { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: clamp(30px, 4vw, 56px);
    align-items: start; margin-top: 30px; }
  .spec-rail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 26px; }
  .spec-grp { display: flex; flex-direction: column; }
  .spec-item { border-top: 1px solid var(--line); padding: 11px 0 10px; }
  .spec-item:last-child { border-bottom: 1px solid var(--line); }
  .spec-k { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
  .spec-v { font-size: 13px; color: var(--ink); margin-top: 5px; letter-spacing: 0.01em; }
  .spec-num { color: var(--accent); }
  .off-k { margin-bottom: 13px; }
  .tags { display: flex; flex-wrap: wrap; gap: 7px; }
  .tag { font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-dim); white-space: nowrap;
    border: 1px solid var(--line-strong); padding: 5px 9px; border-radius: 2px;
    background: rgba(255,255,255,0.012); }
  .traj { display: flex; align-items: center; gap: 9px; font-size: 11.5px; letter-spacing: 0.04em; }
  .traj-step { color: var(--ink-dim); }
  .traj-step.done { color: var(--accent); }
  .traj-step.done::before { content: "● "; font-size: 9px; }
  .traj-arrow { color: var(--ink-faint); }
  .read { max-width: 680px; font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.68; }
  .read p { margin: 0 0 26px; text-wrap: pretty; color: var(--ink); }
  .read .seg { font-size: 11px; letter-spacing: 0.22em; color: var(--ink-faint);
    margin: 38px 0 16px; }
  .read .seg:first-child { margin-top: 4px; }
  .pull { position: relative; margin: 40px 0; padding: 30px 34px;
    font-family: "Archivo", system-ui, sans-serif; font-weight: 500;
    font-size: clamp(20px, 2.4vw, 27px); line-height: 1.32; letter-spacing: -0.005em;
    color: var(--ink); border-left: 2px solid var(--accent); background: rgba(255,255,255,0.015); }

  /* ---- footer ---- */
  .foot { position: relative; z-index: 10; display: flex; justify-content: space-between;
    align-items: center; gap: 16px; flex-wrap: wrap;
    max-width: 1200px; width: 100%; margin: 0 auto;
    padding: 22px clamp(20px, 4vw, 44px) 30px;
    border-top: 1px solid var(--line);
    font-size: 11px; letter-spacing: 0.08em; color: var(--ink-faint); }
  .foot-links { display: flex; gap: 22px; }
  .foot-links a { color: var(--ink-dim); text-decoration: none; }
  .foot-links a:hover { color: var(--accent); }

  /* ---- supernova (fires on About at ~half scroll) ---- */
  /* persistent seed: the star sits there, faintly, before it erupts */
  .sn-seed { position: fixed; left: 8.5vw; top: 45vh; width: 0; height: 0;
    z-index: 1; pointer-events: none; }
  .sn-seed > i { position: absolute; left: 0; top: 0; width: 2.5px; height: 2.5px;
    transform: translate(-50%,-50%); border-radius: 50%; background: #eef2ff;
    box-shadow: 0 0 4px 1px rgba(206,222,255,0.6);
    animation: snSeed 5.5s ease-in-out infinite; }
  @keyframes snSeed { 0%,100% { opacity: 0.45; } 50% { opacity: 0.7; } }
  /* anticipation: the seed flares bright and contracts, then is consumed by the blast */
  .sn-seed.spent > i { animation: snInhale 0.5s ease-in forwards; }
  @keyframes snInhale {
    0%   { opacity: 0.7; transform: translate(-50%,-50%) scale(1);
           box-shadow: 0 0 4px 1px rgba(206,222,255,0.6); }
    60%  { opacity: 1;   transform: translate(-50%,-50%) scale(0.45);
           box-shadow: 0 0 8px 2px rgba(230,240,255,0.95); }
    100% { opacity: 0;   transform: translate(-50%,-50%) scale(0.25); } }

  .supernova { position: fixed; left: 8.5vw; top: 45vh; width: 0; height: 0;
    z-index: 1; pointer-events: none; }
  .supernova > i { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%);
    border-radius: 50%; opacity: 0; will-change: transform, opacity; }
  /* cold blue-white flash */
  .sn-glow { width: 300px; height: 300px;
    background: radial-gradient(circle,
      rgba(255,252,245,0.55) 0%, rgba(214,224,255,0.30) 24%,
      rgba(150,180,255,0.12) 46%, transparent 66%);
    animation: snGlow 8.8s cubic-bezier(.16,.84,.3,1) 0.4s forwards; }
  /* the blast cools to a warm accent-toned afterglow */
  .sn-glow-warm { width: 330px; height: 330px;
    background: radial-gradient(circle,
      color-mix(in oklab, var(--accent) 42%, transparent) 0%,
      color-mix(in oklab, var(--accent) 18%, transparent) 36%, transparent 68%);
    animation: snGlowWarm 9.4s cubic-bezier(.16,.84,.3,1) 0.4s forwards; }
  /* faint expanding remnant that lingers after the flash is gone */
  .sn-remnant { width: 110px; height: 110px;
    background: radial-gradient(circle,
      color-mix(in oklab, var(--accent) 24%, transparent) 0%,
      color-mix(in oklab, var(--accent) 9%, transparent) 52%, transparent 76%);
    animation: snRemnant 11s ease-out 0.7s forwards; }
  .sn-core { width: 4px; height: 4px; background: #fff;
    box-shadow: 0 0 10px 3px rgba(255,255,255,0.95), 0 0 22px 8px rgba(200,216,255,0.55);
    animation: snCore 8.8s cubic-bezier(.16,.84,.3,1) 0.4s forwards; }
  /* crisp expanding ring: animate width/height with a constant thin border
     (translate(-50%,-50%) keeps it centred as it grows) — no scale, no pixelation */
  .sn-ring { width: 8px; height: 8px; border: 1.5px solid rgba(206,222,255,0.7);
    box-shadow: 0 0 7px rgba(206,222,255,0.28);
    animation: snRing 7.4s cubic-bezier(.12,.7,.25,1) 0.4s forwards; }
  /* a staggered train of shockwave rings; the outermost runs slightly warm */
  .sn-ring.r2 { border-color: rgba(206,222,255,0.42);
    animation-duration: 6.6s; animation-delay: 0.58s; }
  .sn-ring.r3 { border-color: rgba(232,210,178,0.40);
    transform: translate(-50%,-50%) scale(1.12);
    animation-duration: 7.0s; animation-delay: 0.74s; }
  /* ejecta flung radially outward — per-spark angle (--a) and distance (--d) set inline */
  .sn-spark { width: 2px; height: 2px; background: #fff8ec;
    box-shadow: 0 0 4px 1px rgba(255,238,214,0.7);
    animation: snSpark 2.6s cubic-bezier(.1,.6,.3,1) forwards; }
  @keyframes snCore {
    0% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
    7% { opacity: 1; transform: translate(-50%,-50%) scale(2.6); }
    26% { opacity: 1; transform: translate(-50%,-50%) scale(1.7); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(0.9); } }
  @keyframes snGlow {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(0.18); }
    14% { opacity: 0.95; transform: translate(-50%,-50%) scale(0.62); }
    44% { opacity: 0.5; transform: translate(-50%,-50%) scale(1.02); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.32); } }
  @keyframes snRing {
    0% { width: 8px; height: 8px; opacity: 0; }
    14% { opacity: 0.65; }
    100% { width: 320px; height: 320px; opacity: 0; } }
  @keyframes snGlowWarm {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(0.30); }
    22% { opacity: 0; transform: translate(-50%,-50%) scale(0.50); }
    48% { opacity: 0.6; transform: translate(-50%,-50%) scale(0.96); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.50); } }
  @keyframes snRemnant {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(0.40); }
    30% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(2.50); } }
  @keyframes snSpark {
    0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(2px) scale(1.3); }
    12% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(0.2); } }

  @media (prefers-reduced-motion: reduce) {
    .sn-ring, .sn-spark { display: none; }
    .sn-core, .sn-glow, .sn-glow-warm { animation-duration: 7s; }
  }
  .fade { opacity: 1; }
  .anim-in .fade { opacity: 0; transform: translateY(12px);
    animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    .fade { animation: none; opacity: 1; transform: none; }
    .cursor { animation: none; opacity: 1; }
    .vp-scan { background:
      radial-gradient(120% 90% at 50% 64%, transparent 60%, rgba(0,0,0,0.45) 100%); }
  }

  /* ── responsive layout — placed LAST so it overrides the base rules above ── */
  @media (max-width: 820px) {
    .home-grid { grid-template-columns: 1fr; }
    .photo-col { width: 240px; margin: 0 auto; }
    .about-layout { grid-template-columns: 1fr; gap: 30px; }
    .spec-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 22px 40px;
      padding-bottom: 26px; border-bottom: 1px solid var(--line); }
    .spec-grp { flex: 1 1 200px; }
    /* keep the camera label + coordinates from colliding on narrow screens */
    .vp-head { flex-wrap: wrap; row-gap: 2px; }
    /* make the observation panel a full-bleed showcase on mobile: span the full
       screen width (edge to edge, breaking out of the wrap padding) and use a tall
       portrait crop, so the moon fills the screen and reads large. A wide 3:2 would
       otherwise collapse into a short strip. */
    .viewport { width: 100vw; margin-left: calc(50% - 50vw); }
    .vp-frame { aspect-ratio: 2 / 3; }
  }