@font-face {
  font-family: 'Syne';
  src: url('vendor/fonts/syne-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('vendor/fonts/syne-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('vendor/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('vendor/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('vendor/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('vendor/fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('vendor/fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

  /* ============================================================
     SECTION A — amromr-neon-hero.html
     Everything in this block, down to the closing marker, is
     copied verbatim from the file supplied. Nothing edited.
     ============================================================ */
  :root {
    /* Brightened from the original muted amber (#F2D02B / #FFF19B) to
       a more vivid, saturated gold — affects the hero neon AMROMR
       text, the nav wordmark, and everything else that shares these
       vars (edu-school, badges, tagline "x" highlight, etc). */
    --amber-glow: #FFC700;
    --amber-static: #FFE066;
    --cyan-glow: #00C2FF;
    --cyan-static: #D6F7FF;
    --bg-warm-dark: rgb(28, 24, 14);
  }

  * { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
  }

  body,
  html {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* Plain black fallback only — the real background is painted by
       #atmosphere-canvas (fixed, behind everything). This shows only
       if JS/WebGL never initializes. */
    background: #000;
    font-family: 'Inter', sans-serif;
  }

  /* ============================================================
     ATMOSPHERE CANVAS — fixed full-viewport WebGL background sitting
     behind the whole page (z-index:0, below .hero's z-index:10 and
     main's sections at z-index:1). Paints a soft noise-based cloud
     hugging the bottom of the screen on a black field. Color drifts
     from black/cyan to purple as the user scrolls from #about
     (// Core_Capabilities) through the end of #career
     (// Career_Log) — see the module script near the end of body.
     ============================================================ */
  #atmosphere-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
  }

  /* .hero: pinned via GSAP (position:fixed while pinned — see script)
     with pinSpacing:false. Important correction from an earlier pass:
     pinSpacing:false does NOT remove the element's own box from
     document flow — the element's natural height (min-height:100vh
     here) still fully occupies real document space; pinSpacing:false
     only stops GSAP from RESERVING EXTRA space on top of that for the
     scroll distance. Since the scroll distance used below
     (window.innerHeight) already equals this box's own natural
     height, hero's own box IS the scroll room — nothing else needs to
     be added. (An earlier version of this file added a redundant
     manual spacer on the assumption that pinSpacing:false meant "zero
     height" — it doesn't, and that spacer just doubled the gap it was
     meant to fix.) <main> sits directly after .hero in the DOM with
     nothing in between. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 6vh 5vw;
    text-align: center;
    position: relative;
    z-index: 10;
    /* Was an opaque gradient matching body's bg, to stop pinned main
       content peeking through gaps around the neon graphic. Now that
       #atmosphere-canvas (z-index:0, fixed) is the thing behind .hero
       instead of raw body, transparent is correct — the canvas IS
       hero's background, and it's dark enough that any peek-through
       during the pin reads as intentional, not a bug. */
    background: transparent;
  }

  .neon {
    width: 100%;
    max-width: 760px;
    animation: flicker 6s linear infinite;
  }

  .neon svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
  }

  .tagline {
    margin-top: 2.25rem;
    color: #FFFFFF;
    font-size: 0.95rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.85;
  }

  /* placeholder — swap for your own role / focus line */
  .tagline span {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    color: #D9D4C5;
    white-space: nowrap;
  }

  /* Keeps "Analyze x Resolve x Maintain" on a single line on phones —
     without this it was wrapping to two lines on narrow viewports.
     Scales size/letter-spacing down with viewport width instead of
     letting it wrap. */
  @media (max-width: 480px) {
    .tagline span {
      font-size: clamp(0.5rem, 3vw, 0.75rem);
      letter-spacing: 0.12em;
    }
  }

  .tagline span em {
    font-style: normal;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--amber-glow);
    margin: 0 0.5em;
    opacity: 0.9;
    text-shadow: 0 0 6px var(--amber-hair);
  }

  .scroll-cue {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #B8B2A0;
    text-decoration: none;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }

  .scroll-cue:hover,
  .scroll-cue:focus-visible {
    opacity: 1;
  }

  .scroll-cue:focus-visible {
    outline: 2px solid var(--cyan-static);
    outline-offset: 4px;
    border-radius: 4px;
  }

  .scroll-cue svg {
    width: 18px;
    height: 18px;
    animation: bob 2s ease-in-out infinite;
  }

  .cursor-blink {
    animation: cursor-blink 1s steps(1, end) infinite;
  }

  @keyframes cursor-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
  }

  @keyframes flicker {
    from   { opacity: 1; }
    4%     { opacity: .9; }
    6%     { opacity: .85; }
    8%     { opacity: .95; }
    10%    { opacity: .90; }
    11%    { opacity: .922; }
    12%    { opacity: .9; }
    14%    { opacity: .95; }
    16%    { opacity: .98; }
    17%    { opacity: .9; }
    19%    { opacity: .93; }
    20%    { opacity: .99; }
    24%    { opacity: 1; }
    26%    { opacity: .94; }
    28%    { opacity: .98; }
    37%    { opacity: .93; }
    38%    { opacity: .5; }
    39%    { opacity: .96; }
    42%    { opacity: 1; }
    44%    { opacity: .97; }
    46%    { opacity: .94; }
    56%    { opacity: .9; }
    58%    { opacity: .9; }
    60%    { opacity: .99; }
    68%    { opacity: 1; }
    70%    { opacity: .9; }
    72%    { opacity: .95; }
    93%    { opacity: .93; }
    95%    { opacity: .95; }
    97%    { opacity: .93; }
    to     { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .neon,
    .scroll-cue svg,
    .cursor-blink,
    .terminal-cursor::after {
      animation: none !important;
      opacity: 1 !important;
    }
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* ============================================================
     END SECTION A
     ============================================================ */


  /* ============================================================
     SECTION B — rest of the site (new)
     Reuses the exact custom properties + globals defined above
     (--amber-glow, --amber-static, --cyan-glow, --cyan-static,
     --bg-warm-dark, the radial-gradient body background, the
     Inter body font, box-sizing, scroll-behavior). No colors are
     introduced here beyond two neutrals already used inline in
     Section A for body copy: #B8B2A0 and #6f6a5c.
     ============================================================ */
  :root {
    /* Brightened from the original dim tan/grey pairing — against the
       purple atmosphere canvas these were reading as too low-contrast
       to comfortably read. --paper now a clear white; --paper-dim a
       bright warm-grey (still visually "secondary" next to --paper,
       but far more legible than the old #6f6a5c). */
    --paper: #FFFFFF;
    --paper-dim: #D9D4C5;
    --hair: rgba(184, 178, 160, 0.14);
    --amber-hair: rgba(255, 199, 0, 0.4);
    --cyan-hair: rgba(0, 194, 255, 0.4);
    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --display: 'Syne', sans-serif;
  }

  main.site-shell { position: relative; }

  main.site-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 3px
    );
    opacity: 0.6;
  }

  main.site-shell section,
  main.site-shell footer {
    position: relative;
    z-index: 1;
  }

  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--cyan-static);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .section-eyebrow {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber-static);
    margin: 0 0 0.9rem;
  }

  .section-title {
    font-family: var(--display);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--paper);
    margin: 0 0 2.5rem;
    font-size: clamp(1.8rem, 4vw, 2.75rem);
  }

  /* ---------------- NAV ---------------- */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem 5vw;
    background: linear-gradient(to bottom, rgba(28, 24, 14, 0.94), rgba(28, 24, 14, 0.7) 75%, transparent);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
  }

  .nav-logo-slot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    flex-shrink: 0;
  }

  .nav-logo-mini {
    width: 32px;
    height: auto;
    flex-shrink: 0;
    overflow: visible;
  }

  .nav-wordmark {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    color: var(--amber-static);
    text-shadow: 0 0 6px rgba(242, 208, 43, 0.55), 0 0 16px rgba(242, 208, 43, 0.22);
    white-space: nowrap;
  }

  .nav-links {
    display: flex;
    gap: 2.1rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
  }

  .nav-links a {
    color: var(--paper);
    text-decoration: none;
    position: relative;
    padding-bottom: 3px;
  }

  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--cyan-glow);
    transition: width 0.25s ease;
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
    color: var(--cyan-static);
  }

  .nav-links a:hover::after,
  .nav-links a:focus-visible::after {
    width: 100%;
  }

  .nav-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--paper-dim);
    flex-shrink: 0;
  }

  .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber-glow);
    box-shadow: 0 0 6px var(--amber-glow);
    animation: dot-pulse 2s ease-in-out infinite;
  }

  @keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }

  @media (max-width: 767px) {
    .nav-links { display: none; }
  }

  /* ---------------- ABOUT / ID STRIP ---------------- */
  .id-strip {
    padding: 14vh 6vw 8vh;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid var(--hair);
  }

  @media (min-width: 700px) {
    .id-strip { grid-template-columns: 1fr 1fr; }
  }

  .id-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber-static);
    margin: 0 0 0.75rem;
  }

  .id-line {
    margin: 0.25rem 0;
    font-size: 1rem;
    color: var(--paper);
  }

  .id-dim { color: var(--paper-dim); }

  /* ---------------- STATEMENT ---------------- */
  .statement {
    padding: 4vh 6vw 12vh;
    max-width: 980px;
    margin: 0 auto;
  }

  .statement p {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.5rem, 3.6vw, 2.6rem);
    line-height: 1.35;
    color: var(--paper);
    margin: 0;
  }

  .hl-amber {
    color: var(--amber-static);
    text-shadow: 0 0 10px rgba(242, 208, 43, 0.35);
  }

  /* ---------------- CAREER LOG ----------------
     Adapted from a horizontal-scroll-track reference: cards stack in
     a plain vertical list on mobile. From 700px up, the whole section
     pins in place and the track of cards translates horizontally as
     the page scrolls down, so each job glides in from the right
     instead of sitting in a static vertical list. Falls back to the
     plain vertical stack (no pin) if GSAP/ScrollTrigger don't load or
     the user prefers reduced motion — see script below.

     The section is given a full-viewport min-height on desktop and
     the track is vertically centred inside it — without this, the
     pinned box was only as tall as one card, leaving a large dead
     gap below the content for the whole horizontal-scroll duration.
     The eyebrow/title moves to a small fixed corner label on desktop
     (rather than a full-height heading) so it doesn't fight the
     cards for vertical space or visually collide with them mid-pin. */
  .career-log {
    position: relative;
    padding: 6vh 0 12vh;
    border-top: 1px solid var(--hair);
    overflow: hidden;
  }

  .career-log-label { padding: 0 6vw; }

  @media (min-width: 700px) {
    .career-log {
      min-height: 100vh;
      padding: 0;
      display: flex;
      align-items: center;
    }

    .career-log-label {
      position: absolute;
      top: 6vh;
      left: 6vw;
      z-index: 2;
      padding: 0;
    }

    .career-log-label .section-title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
  }

  .log-horizontal { width: 100%; }

  @media (max-width: 699px) {
    .log-horizontal { margin-top: 4vh; }
  }

  .log-track {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 0 6vw;
  }

  @media (min-width: 700px) {
    .log-track {
      flex-direction: row;
      align-items: center;
      gap: 0;
      width: max-content;
      padding: 0 8vw;
    }
  }

  .log-card {
    position: relative;
    padding-left: 1.4rem;
    border-left: 1px solid var(--amber-hair);
  }

  .log-card.current { border-left-color: var(--cyan-hair); }

  @media (min-width: 700px) {
    .log-card {
      width: 60vw;
      max-width: 620px;
      flex-shrink: 0;
      margin-right: 6rem;
    }
  }

  .log-time {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--paper-dim);
    margin: 0 0 0.6rem;
  }

  .log-card.current .log-time { color: var(--cyan-static); }

  .log-card h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2.3rem);
    line-height: 1.1;
    margin: 0 0 0.4rem;
    color: var(--paper);
  }

  .log-role {
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: var(--amber-static);
    margin: 0 0 0.9rem;
  }

  .log-card.current .log-role { color: var(--cyan-static); }

  .log-bullets {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    max-width: 46ch;
    display: grid;
    gap: 0.55rem;
  }

  .log-bullets li {
    position: relative;
    padding-left: 1.1rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--paper);
  }

  .log-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--amber-static);
  }

  .log-card.current .log-bullets li::before { background: var(--cyan-static); }

  .log-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .log-tags span {
    font-family: var(--mono);
    font-size: 0.63rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--amber-static);
    border: 1px solid var(--amber-hair);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
  }

  .log-card.current .log-tags span {
    color: var(--cyan-static);
    border-color: var(--cyan-hair);
  }

  /* ---------------- SYSTEMS ---------------- */
  .systems {
    padding: 6vh 6vw 12vh;
    border-top: 1px solid var(--hair);
  }

  .systems-head { max-width: 900px; margin: 0 auto 2.5rem; }

  .systems-sub { color: var(--paper-dim); margin: 0.5rem 0 0; }

  .systems-list { max-width: 900px; margin: 0 auto; }

  .systems-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.8rem 0;
    border-top: 1px solid var(--hair);
  }

  .systems-row:last-child { border-bottom: 1px solid var(--hair); }

  .systems-row h3 {
    font-family: var(--display);
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--paper);
  }

  .systems-row p {
    margin: 0;
    color: var(--paper-dim);
    max-width: 46ch;
  }

  .tag-current {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bg-warm-dark);
    background: var(--amber-glow);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
  }

  @media (min-width: 700px) {
    .systems-row {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .systems-row p { text-align: right; }
  }

  /* ---------------- PROJECTS ---------------- */
  .projects {
    padding: 6vh 6vw 12vh;
    border-top: 1px solid var(--hair);
    max-width: 1100px;
    margin: 0 auto;
  }

  .project-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--hair);
    border: 1px solid var(--hair);
  }

  @media (min-width: 700px) {
    .project-grid { grid-template-columns: repeat(3, 1fr); }
  }

  .project-card {
    background: rgba(0, 0, 0, 0.18);
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-decoration: none;
    position: relative;
    transition: background 0.25s ease;
  }

  .project-card:hover,
  .project-card:focus-visible {
    background: rgba(0, 194, 255, 0.05);
  }

  .project-tag {
    font-family: var(--mono);
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-dim);
  }

  .project-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--paper);
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }

  .project-card:hover .project-name,
  .project-card:focus-visible .project-name {
    color: var(--cyan-static);
    text-shadow: 0 0 10px rgba(0, 194, 255, 0.4);
  }

  .project-arrow {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    color: var(--paper-dim);
    font-size: 0.9rem;
  }

  /* ---------------- EDUCATION ---------------- */
  .education {
    padding: 8vh 6vw 12vh;
    border-top: 1px solid var(--hair);
  }

  .edu-plaque {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 3.5rem;
    border: 1px solid var(--amber-hair);
    position: relative;
  }

  .edu-plaque::before,
  .edu-plaque::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid var(--cyan-static);
  }

  .edu-plaque::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .edu-plaque::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

  .edu-plaque h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    margin: 0.6rem 0;
    color: var(--paper);
  }

  .edu-school { color: var(--amber-static); margin: 0 0 0.4rem; font-size: 1.05rem; }
  .edu-meta { color: var(--paper-dim); font-size: 0.9rem; margin: 0 0 2.5rem; }

  .edu-cert-label { margin: 0 0 1.2rem; }

  .edu-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
  }

  .edu-badges span {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--hair);
    padding: 0.65rem 1.1rem;
    color: var(--paper);
  }

  /* ---------------- CONTACT ---------------- */
  .contact {
    position: relative;
    overflow: hidden;
    padding: 10vh 6vw 4vh;
    border-top: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 90vh;
  }

  /* particle field canvas — sits behind all contact content */
  #contact-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* Fades the particle field in from the top of the section,
       matching the scrim's own fade-in below — without this, the
       starfield sat at full strength immediately at the section's
       top edge while the cloud above was still visible, which read
       as two different layers stacked rather than one continuous
       scene. Same gradient stops as .contact-scrim so both effects
       arrive together. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 55%, #000 88%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 55%, #000 88%);
  }

  /* dark scrim between the particle canvas and the text, so copy
     stays readable over the brighter particle clusters */
  .contact-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Was a radial gradient that went ~78% opaque black almost
       immediately from center outward — that's what caused the hard
       seam at the Education/Contact border in the first screenshot.
       Switched to a top-to-bottom linear fade, then widened it
       further after a second look showed the fade was still too
       tight — the particle starfield below was popping in before the
       cloud had finished dissolving, reading as two stacked layers
       rather than one continuous transition. Stops now match
       #contact-particles' mask exactly so the cloud fade-out and the
       starfield fade-in happen in lockstep over a longer stretch. */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(10, 3, 18, 0.5) 55%, rgba(0, 0, 0, 0.9) 88%, #000000 100%);
  }

  .contact-signoff,
  .contact-inner,
  .signoff-meta {
    position: relative;
    z-index: 1;
  }

  .contact-inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
  }

  .contact-line {
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 300;
    line-height: 1.5;
    color: var(--paper);
    margin: 0.8rem 0 2rem;
  }

  .contact-link {
    display: inline-block;
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--cyan-static);
    border-bottom: 1px solid var(--cyan-hair);
    padding-bottom: 0.3rem;
    margin: 0 1.1rem 0.8rem;
    text-decoration: none;
    transition: text-shadow 0.25s ease;
  }

  .contact-link:hover,
  .contact-link:focus-visible {
    text-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
  }

  .contact-signoff { margin-top: 0; }

  /* terminal-style blinking cursor after an eyebrow line, mirroring
     the "$ whoami_" prompt treatment used on the hero */
  .terminal-cursor::after {
    content: '_';
    display: inline-block;
    margin-left: 0.15em;
    animation: cursor-blink 1s steps(1, end) infinite;
  }

  .signoff-title {
    font-family: var(--display);
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    font-size: clamp(2.6rem, 11vw, 7rem);
    color: var(--amber-static);
    text-shadow: 0 0 14px rgba(255, 199, 0, 0.65), 0 0 40px rgba(255, 199, 0, 0.35);
    margin: 0;
    animation: signoff-flicker 7s linear infinite;
  }

  @keyframes signoff-flicker {
    0%, 92%, 100% { opacity: 1; }
    93%           { opacity: 0.85; }
    94%           { opacity: 1; }
    95%           { opacity: 0.5; }
    96%           { opacity: 1; }
  }

  .signoff-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 2.5rem;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-dim);
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Scroll-in fade for content sections. Safety model: content is
     VISIBLE AND SELECTABLE BY DEFAULT (opacity:1, no transform) with
     no JS required at all. The .reveal-pending class below is what
     hides an element — and it's only ever ADDED by JS, never present
     by default — so if JS fails to run, has a bug, or a browser quirk
     trips it up, the worst case is "no fade-in animation," never
     "content stuck invisible or unselectable." This inverts an
     earlier version of this rule, which hid content by default and
     relied on JS to reveal it — safe when everything works, but any
     failure there left text permanently faded and hard to click. */
  .reveal-pending {
    opacity: 0;
    transform: translateY(14px);
  }

  .reveal {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal-pending { opacity: 1 !important; transform: none !important; }
    .reveal { transition: none !important; }
    .status-dot,
    .signoff-title { animation: none !important; opacity: 1 !important; }
  }
  /* ============================================================
     END SECTION B
     ============================================================ */