/* ==========================================================================
   PARSEC — "CASSETTE FUTURISM" prototype skin
   1970s-80s hard sci-fi terminals (Alien / Blade Runner): true black,
   phosphor-white terminal text, Caltech-orange amber glow. Understated
   technical type — the details carry the weight, not the headline size.
   Loaded after parsec.css — homepage + top strip only for now.
   ========================================================================== */

/* ---------- Tokens --------------------------------------------------------- */

:root {
  --black: #030409;
  --bg: #05070f;
  --surface: #05070d;
  --surface-2: #090b13;
  --line: rgba(240, 245, 243, 0.14);
  --line-soft: rgba(240, 245, 243, 0.07);
  --ivory: #e9eeeb;
  --muted: #b9c0bb;
  --faint: #7f8681;

  --font-display: "Orbitron", "Arial", sans-serif;
  --font-body: "Share Tech Mono", "SFMono-Regular", Consolas, monospace;
  --font-mono: "Share Tech Mono", "SFMono-Regular", Consolas, monospace;

  /* layered phosphor glows, per CRT reference */
  --phos-w: 0 0 1px rgba(242, 245, 244, 0.26), 0 0 4px rgba(242, 245, 244, 0.10);
  --phos-o: 0 0 1px rgba(255, 108, 12, 0.42), 0 0 5px rgba(255, 108, 12, 0.18);
  --glow-o: rgba(255, 108, 12, 0.38);
  --glow-o-soft: rgba(255, 108, 12, 0.14);
  --glow-w: rgba(242, 245, 244, 0.20);
  --glow-w-soft: rgba(242, 245, 244, 0.09);
}

body {
  background: var(--bg);
  font-size: 1rem;
  line-height: 1.7;
}

/* ---------- Typography: precision over hype -------------------------------- */

.hero h1,
.display,
.objective h3,
.cta-slab h2 {
  font-weight: 600;
  font-stretch: normal;
}

.hero h1 {
  font-size: clamp(1.5rem, 3.2vw, 2.9rem);
  line-height: 1.24;
  letter-spacing: 0.06em;
  max-width: 28ch;
  color: #fff;
  text-shadow: var(--phos-w);
  animation: retro-crt-in 0.9s var(--ease-out) both;
}

.hero-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  max-width: 56ch;
  color: #d6dcd8;
}

.display {
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  line-height: 1.32;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: var(--phos-w);
}

.lede { color: #cdd3cf; }

.objective h3 {
  font-size: 0.92rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.objective p {
  font-size: 0.98rem;
  color: var(--muted);
}

.cta-slab h2 {
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: 0.05em;
}

.person .p-name { font-weight: 500; font-stretch: normal; }

@keyframes retro-crt-in {
  0% { opacity: 0; }
  9% { opacity: 0.85; }
  16% { opacity: 0.25; }
  24% { opacity: 1; }
  33% { opacity: 0.55; }
  42%, 100% { opacity: 1; }
}

/* ---------- Atmosphere: sweep, vignette ------------------------------------- */

.retro-scan {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse 130% 110% at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.42) 100%);
}

/* the scanline wash is gone, so grain would just be extra noise */
.grain { display: none; }

/* ---------- Top strip: telemetry ------------------------------------------ */

.telemetry {
  background: var(--bg);
  border-bottom: 1px solid rgba(240, 245, 243, 0.1);
  text-shadow: 0 0 6px var(--glow-w-soft);
}

.telemetry b { color: var(--ivory); }

.telemetry .tick {
  color: var(--orange);
  text-shadow: var(--phos-o);
}

/* ---------- Top strip: header / nav ---------------------------------------- */

.header {
  background: rgba(6, 9, 18, 0.82);
  box-shadow: 0 1px 0 rgba(240, 245, 243, 0.08);
}

.brand img {
  filter: drop-shadow(0 0 9px rgba(255, 108, 12, 0.4));
  transition: filter 0.35s var(--ease-out);
}

.brand:hover img {
  filter: drop-shadow(0 0 15px rgba(255, 108, 12, 0.75));
}

.nav-desktop a,
.nav-desktop .nav-drop-btn {
  transition: color 0.25s, text-shadow 0.25s;
}

.nav-desktop a:hover,
.nav-desktop .nav-drop-btn:hover {
  color: #fff;
  text-shadow: 0 0 10px var(--glow-w);
}

.nav-desktop a sup,
.nav-desktop .nav-drop-btn sup { color: rgba(255, 108, 12, 0.75); }

.nav-desktop a:hover sup,
.nav-desktop .nav-drop-btn:hover sup {
  color: var(--orange);
  text-shadow: 0 0 8px var(--glow-o);
}

.nav-desktop a[aria-current="page"] {
  color: #fff;
  text-shadow: 0 0 10px var(--glow-w-soft);
}

.nav-desktop a[aria-current="page"]::after,
.nav-desktop .nav-drop-btn.is-current::after {
  box-shadow: 0 0 10px var(--glow-o), 0 0 3px var(--glow-o);
}

/* Teams dropdown — black glass, neon edge, glowing sprites */
.nav-drop-menu {
  background: rgba(6, 9, 18, 0.92);
  border-color: rgba(240, 245, 243, 0.16);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.85),
    0 0 22px rgba(255, 108, 12, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.nav-desktop .nav-drop-menu a:hover {
  background: rgba(255, 108, 12, 0.09);
  color: #fff;
  text-shadow: 0 0 8px var(--glow-w);
}

.nav-drop-menu a img {
  filter: drop-shadow(0 0 3px rgba(242, 245, 244, 0.35));
  transition: filter 0.25s;
}

.nav-drop-menu a:hover img {
  filter: drop-shadow(0 0 6px var(--glow-o));
}

/* ---------- Hero ------------------------------------------------------------ */

.hero-media::after {
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.62) 100%),
    radial-gradient(120% 60% at 50% 100%, rgba(255, 108, 12, 0.14), transparent 60%);
}

.hero-media video,
.hero-media img { will-change: transform; }

.hero h1 .accent { text-shadow: var(--phos-o); }

.hero-eyebrow {
  color: var(--orange-bright);
  text-shadow: 0 0 10px var(--glow-o-soft);
}

.hero-eyebrow::before { box-shadow: 0 0 8px var(--glow-o); }

/* ---------- Shared type accents --------------------------------------------- */

.kicker .idx {
  color: var(--orange);
  text-shadow: 0 0 8px var(--glow-o-soft);
}

::selection { background: var(--orange); color: #000; }

:focus-visible {
  outline-color: var(--orange);
  box-shadow: 0 0 12px var(--glow-o-soft);
}

/* ---------- Objectives grid — targeting brackets on hover ------------------- */

/* four-corner registration marks — symmetric, drawn with corner gradients */
.objective::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.03);
  filter: drop-shadow(0 0 4px var(--glow-o));
  background:
    linear-gradient(var(--orange), var(--orange)) top left / 14px 1px,
    linear-gradient(var(--orange), var(--orange)) top left / 1px 14px,
    linear-gradient(var(--orange), var(--orange)) top right / 14px 1px,
    linear-gradient(var(--orange), var(--orange)) top right / 1px 14px,
    linear-gradient(var(--orange), var(--orange)) bottom left / 14px 1px,
    linear-gradient(var(--orange), var(--orange)) bottom left / 1px 14px,
    linear-gradient(var(--orange), var(--orange)) bottom right / 14px 1px,
    linear-gradient(var(--orange), var(--orange)) bottom right / 1px 14px;
  background-repeat: no-repeat;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.objective:hover::before {
  opacity: 1;
  transform: none;
}

.objective:hover {
  background: #0a0c0c;
  box-shadow: inset 0 0 26px rgba(255, 108, 12, 0.05);
}

.objective:hover .obj-idx {
  color: var(--orange);
  text-shadow: 0 0 8px var(--glow-o-soft);
}

.objective:hover .obj-idx::after { box-shadow: 0 0 8px var(--glow-o); }

/* ---------- People cards ----------------------------------------------------- */

.person:hover .p-role { text-shadow: 0 0 8px var(--glow-o-soft); }

/* the RE roles are white, so an orange bloom on hover would read as a colour
   mismatch rather than as the label lighting up */
.people--text .person:hover .p-role { text-shadow: 0 0 8px var(--glow-w-soft); }

/* Portraits — monochrome CRT feed that saturates on focus */
.person .p-photo img {
  filter: grayscale(80%) contrast(1.06) brightness(0.92);
  transition: filter 0.35s var(--ease-out);
}

/* Portrait → LinkedIn link */
a.p-photo {
  display: block;
  cursor: pointer;
  text-decoration: none;
}

/* photo saturates to color when hovering anywhere on the card */
.person:hover .p-photo img { filter: grayscale(0%) contrast(1.05) brightness(1); }

/* four-corner registration marks, matching the objectives-grid hover */
a.p-photo::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 1;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  filter: drop-shadow(0 0 4px var(--glow-o));
  background:
    linear-gradient(var(--orange), var(--orange)) top left / 12px 1px,
    linear-gradient(var(--orange), var(--orange)) top left / 1px 12px,
    linear-gradient(var(--orange), var(--orange)) top right / 12px 1px,
    linear-gradient(var(--orange), var(--orange)) top right / 1px 12px,
    linear-gradient(var(--orange), var(--orange)) bottom left / 12px 1px,
    linear-gradient(var(--orange), var(--orange)) bottom left / 1px 12px,
    linear-gradient(var(--orange), var(--orange)) bottom right / 12px 1px,
    linear-gradient(var(--orange), var(--orange)) bottom right / 1px 12px;
  background-repeat: no-repeat;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

/* affordance label, revealed on hover */
a.p-photo::after {
  content: var(--photo-cta, "VIEW LINKEDIN \2197"); /* override per-card for non-LinkedIn links */
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 1.2rem);
  padding: 0.3rem 0.55rem;
  background: rgba(4, 5, 9, 0.78);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--orange);
  text-shadow: 0 0 8px var(--glow-o-soft);
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.person:hover .p-photo::before,
a.p-photo:focus-visible::before { opacity: 1; transform: none; }
a.p-photo:hover::after,
a.p-photo:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Photo band -------------------------------------------------------- */

.marquee figure img {
  filter: saturate(0.85) contrast(1.03);
  transition: filter 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.marquee figure:hover img {
  filter: saturate(1.05) contrast(1.05) brightness(1.06);
}

/* ---------- Buttons — neon on approach ------------------------------------------ */

.btn {
  border-color: rgba(240, 245, 243, 0.24);
  transition: color 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  box-shadow: 0 0 18px var(--glow-o-soft), 0 0 5px var(--glow-o-soft);
}

.btn--solid {
  box-shadow: 0 0 20px rgba(255, 108, 12, 0.3);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  box-shadow: 0 0 30px rgba(255, 108, 12, 0.5), 0 0 8px rgba(255, 108, 12, 0.4);
}

/* ---------- CTA slab -------------------------------------------------------------- */

.cta-slab {
  background: #050606;
  box-shadow: inset 0 0 46px rgba(255, 108, 12, 0.05);
}

/* ---------- Footer ------------------------------------------------------------------ */

.footer a {
  transition: color 0.25s, text-shadow 0.25s;
}

.footer a:hover {
  color: #fff;
  text-shadow: 0 0 8px var(--glow-w);
}

/* ==========================================================================
   SUBPAGES — extend the skin site-wide
   Mission · Projects · Sponsors · Contact · the eight team pages.
   Only classes that don't appear on the homepage are touched here, so the
   approved home layout is unchanged; shared parts (.cta-slab, .ticks) simply
   gain the same cursor/hover details.
   ========================================================================== */

/* ---------- Display type: restrained, phosphor-lit ------------------------- */

.page-head .display,
.prose h3,
.log-row h3,
.proj-body h3,
.contact-card h3,
.pull,
.pager .pg-name {
  font-weight: 600;
  font-stretch: normal;
  color: #fff;
  text-shadow: var(--phos-w);
}

.page-head .display {
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  letter-spacing: 0.04em;
  line-height: 1.12;
}

.prose h3 .accent { text-shadow: var(--phos-o); }

/* The page head carries no rule of its own. The 3.4rem gradient stub under the
   title and the kicker's trailing hairline both read as leftovers rather than
   decisions, and on the project pages the schema plate immediately below is the
   real divider — so the head ends on type and the plate does the dividing. */
.page-head .kicker::after { content: none; }

/* ---------- Prose ---------------------------------------------------------- */

.prose h3 {
  position: relative;
  letter-spacing: 0.03em;
}

/* small orange registration diamond flush left of each heading */
.prose h3::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--orange);
  transform: rotate(45deg);
  box-shadow: 0 0 7px var(--glow-o);
  opacity: 0.85;
}

.prose p strong { color: #fff; text-shadow: 0 0 8px var(--glow-w-soft); }

.prose a {
  color: var(--orange-bright);
  text-shadow: 0 0 8px var(--glow-o-soft);
  text-decoration-color: rgba(255, 108, 12, 0.5);
  transition: text-shadow 0.3s;
}

.prose a:hover { text-shadow: 0 0 12px var(--glow-o); }

/* ---------- Pull quote ----------------------------------------------------- */

.pull {
  border-left-color: var(--orange);
  letter-spacing: 0.01em;
}

.pull cite { color: var(--muted); }

/* ---------- Team intro quote — "incoming transmission" ----------------- */
/* A tight, deliberate readout: open HUD brackets frame a faint CRT panel that
   unrolls open, then the quote prints out letter by letter (retro.js splits it
   into .pc-char spans) before the attribution signs on all at once. */

.pull--comms {
  position: relative;
  isolation: isolate;
  max-width: min(48ch, 100%);
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding: 2.3rem 2rem 1.7rem 2.5rem;
  border-left: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 108, 12, 0.055), rgba(255, 108, 12, 0.012));
}

/* glowing open HUD brackets — top-left + bottom-right, so it frames without
   enclosing into a wide box */
.pull--comms::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 5px var(--glow-o));
  background:
    linear-gradient(var(--orange), var(--orange)) left 0 top 0 / 24px 2px no-repeat,
    linear-gradient(var(--orange), var(--orange)) left 0 top 0 / 2px 24px no-repeat,
    linear-gradient(var(--orange), var(--orange)) right 0 bottom 0 / 24px 2px no-repeat,
    linear-gradient(var(--orange), var(--orange)) right 0 bottom 0 / 2px 24px no-repeat;
}

/* A quote promoted to sit directly under a page head is a banner, not a prose
   aside: it fills the whole content column, so its left edge lines up with the
   title above and its right edge with the column. The 48ch cap is what left it
   stranded short of the right edge, and centring the short block only made the
   left edge disagree with everything else on the page. */
.page-head + section .wrap > .pull--comms { max-width: none; }

/* attribution as a transmission signature */
.pull--comms cite {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 1.15rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Typewriter sequence. retro.js adds .pc-anim (armed: hidden) then .is-live a
   couple of frames later to run it. With no JS the classes are never added, so
   the quote just shows normally — it can never get stuck hidden. */
@media (prefers-reduced-motion: no-preference) {
  /* Armed with opacity alone — deliberately NOT clip-path. A clipped element
     reports a zero-height intersection rect, so the observer in retro.js that
     waits for the panel to scroll into view could never see it and the quote
     never printed. pc-open still starts fully clipped: its 0% keyframe applies
     the instant .is-live lands (animation-fill-mode: both), so there is no
     flash of the un-unrolled panel. */
  .pull--comms.pc-anim { opacity: 0; }
  .pull--comms.pc-anim.is-live { animation: pc-open 0.5s var(--ease-out) both; }

  /* retro.js adds .on to each glyph in turn, then to the signature */
  .pull--comms.pc-anim .pc-char { opacity: 0; }
  .pull--comms.pc-anim .pc-char.on { animation: pc-print 0.42s var(--ease-out) both; }

  .pull--comms.pc-anim cite { opacity: 0; }
  .pull--comms.pc-anim cite.on { animation: pc-sign 0.5s var(--ease-out) both; }
}

/* panel unrolls open from the top */
@keyframes pc-open {
  0% { clip-path: inset(0 0 100% 0); opacity: 0; }
  50% { opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* each glyph snaps on hot (orange) and cools to phosphor white, leaving a
   glowing trail behind the print head */
@keyframes pc-print {
  0% { opacity: 0; }
  1% { opacity: 1; color: var(--orange); text-shadow: 0 0 10px var(--glow-o); }
  100% { opacity: 1; color: #fff; text-shadow: var(--phos-w); }
}

/* signature fades in as one block after the quote finishes */
@keyframes pc-sign {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Team-lead cards link to their team page ----------------- */
/* The whole card links to the team page via a stretched link; the portrait
   keeps its own LinkedIn link layered above it. */

.person--link { cursor: pointer; }

.p-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
}

/* portrait (LinkedIn) sits above the card link so it stays clickable */
.person--link a.p-photo { position: relative; z-index: 2; }

.person--link .p-role { transition: text-shadow 0.3s; }
.person--link:hover .p-role { text-shadow: 0 0 8px var(--glow-o-soft); }

/* nav-hint arrow slides in on hover, aligned to the role baseline */
.person--link .p-role::after {
  content: "\2192";
  display: inline-block;
  /* reserved even while hidden so the label does not reflow on hover, so it is
     kept tight — it is part of the width budget the longest role fits into */
  margin-left: 0.22em;
  font-size: 0.82em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.person--link:hover .p-role::after { opacity: 1; transform: none; }

/* Same treatment for the responsible-engineer names, which are links for the
   same reason: no portrait to hang the profile link on. */
.p-name a { transition: color 0.3s var(--ease-out), text-shadow 0.3s; }

.p-name a:hover,
.p-name a:focus-visible { text-shadow: 0 0 10px var(--glow-o-soft); }

/* ---------- Alumni roster ---------------------------------------------------- */

/* re-declares the base colour transition, since this shorthand replaces it */
.roster-name { transition: color 0.3s var(--ease-out), text-shadow 0.3s; }

/* Keyed to the link itself, not the row: only the name is clickable, so only
   the name should light up. Rows without a profile stay inert. */
a.roster-name:hover,
a.roster-name:focus-visible { text-shadow: 0 0 10px var(--glow-o-soft); }

/* The RE rosters sit inside .prose, where links carry a resting orange glow.
   Same rule as the home page: only the hovered name lights up. */
.prose a.roster-name { text-shadow: none; }
.prose a.roster-name:hover,
.prose a.roster-name:focus-visible { text-shadow: 0 0 10px var(--glow-o-soft); }

/* ---------- Figures — HUD framing ------------------------------------------ */

.ticks::before,
.ticks::after,
.ticks > .tick-b::before,
.ticks > .tick-b::after {
  box-shadow: 0 0 7px var(--glow-o-soft);
}

.figure { transition: box-shadow 0.4s var(--ease-out); }

.figure img {
  filter: grayscale(0.42) contrast(1.05) brightness(0.94);
  transition: filter 0.6s var(--ease-out), transform 0.5s var(--ease-out);
}

/* Photos stay flat on hover; only the caption text brightens (below). */
.figure:hover { box-shadow: none; }

.figure figcaption { color: var(--faint); transition: color 0.4s; }
.figure:hover figcaption { color: var(--muted); }

/* CAD schematics are dark line-art on transparent; invert so the strokes read
   as light drafting lines on the panel (overrides the grayscale skin filter
   above, which would otherwise leave them near-invisible on the dark theme). */
.figure--schematic img { filter: invert(0.9); }
/* Schematics keep the zoom-on-hover (photos no longer do). */
.figure--schematic:hover img { filter: invert(1); transform: scale(1.05); }

/* ---------- Mission log / timeline rows ------------------------------------ */

.log-row { position: relative; }

/* ---------- Cards with corner registration marks (non-ticks) --------------- */

.sponsor-cell,
.contact-card {
  position: relative;
  transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.sponsor-cell::before,
.contact-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.03);
  filter: drop-shadow(0 0 4px var(--glow-o));
  background:
    linear-gradient(var(--orange), var(--orange)) top left / 13px 1px,
    linear-gradient(var(--orange), var(--orange)) top left / 1px 13px,
    linear-gradient(var(--orange), var(--orange)) top right / 13px 1px,
    linear-gradient(var(--orange), var(--orange)) top right / 1px 13px,
    linear-gradient(var(--orange), var(--orange)) bottom left / 13px 1px,
    linear-gradient(var(--orange), var(--orange)) bottom left / 1px 13px,
    linear-gradient(var(--orange), var(--orange)) bottom right / 13px 1px,
    linear-gradient(var(--orange), var(--orange)) bottom right / 1px 13px;
  background-repeat: no-repeat;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.sponsor-cell:hover::before,
.contact-card:hover::before { opacity: 1; transform: none; }

.sponsor-cell:hover {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255, 108, 12, 0.35), 0 0 24px rgba(255, 108, 12, 0.1);
}

.contact-card:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 108, 12, 0.3), 0 0 22px rgba(255, 108, 12, 0.08);
}

.sponsor-cell .s-meta { transition: color 0.3s, text-shadow 0.3s; }
.sponsor-cell:hover .s-meta { color: var(--ivory); }
.sponsor-cell:hover .s-meta .arrow { text-shadow: 0 0 8px var(--glow-o); }

/* ---------- Contact channels ----------------------------------------------- */

.contact-card h3 { letter-spacing: 0.02em; }

.contact-card a.mail {
  color: var(--orange-bright);
  text-shadow: 0 0 8px var(--glow-o-soft);
  border-bottom-color: rgba(255, 108, 12, 0.45);
}

.contact-card a.mail:hover { text-shadow: 0 0 12px var(--glow-o); border-bottom-color: var(--orange); }

/* ---------- Team pager -------------------------------------------------- */

.pager a { transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.pager a:hover {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255, 108, 12, 0.28), inset 0 0 26px rgba(255, 108, 12, 0.05);
}

.pager a img { filter: drop-shadow(0 0 3px rgba(242, 245, 244, 0.3)); transition: filter 0.3s var(--ease-out); }
.pager a:hover img { filter: drop-shadow(0 0 7px var(--glow-o)); }

.pager .pg-lbl { transition: color 0.3s; }
.pager .pg-name { transition: color 0.3s, text-shadow 0.3s; }
.pager a:hover .pg-lbl { color: var(--orange); }
.pager a:hover .pg-name { color: #fff; text-shadow: var(--phos-w); }

/* ---------- CTA slab: static corner light source --------------------------- */

.cta-slab {
  background:
    radial-gradient(20rem 16rem at 85% 12%, rgba(255, 108, 12, 0.14), transparent 60%),
    var(--surface);
  background-repeat: no-repeat;
}

/* ---------- Mobile menu overlay -------------------------------------------- */

.menu-overlay { background: rgba(6, 9, 18, 0.97); }
.menu-overlay a,
.menu-overlay .m-drop summary { font-weight: 600; font-stretch: normal; }
.menu-overlay a:hover { color: #fff; text-shadow: 0 0 10px var(--glow-w); }
.menu-overlay a sup,
.menu-overlay .m-drop summary sup { color: var(--orange); text-shadow: 0 0 8px var(--glow-o-soft); }
.menu-overlay a[aria-current="page"] { color: var(--orange); text-shadow: 0 0 10px var(--glow-o-soft); }

/* ---------- Cursor & click feedback ---------------------------------------- */

/* brief command-registered pulse ring at the pointer (see retro.js) */
.retro-pulse {
  position: fixed;
  z-index: 9999;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 0 10px var(--glow-o);
  animation: retro-pulse-out 0.5s var(--ease-out) forwards;
}

@keyframes retro-pulse-out {
  to { transform: scale(4.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .retro-pulse { display: none; }
}