/* =====================================================================
   ABOUT — "The human behind the system"
   ---------------------------------------------------------------------
   Targets the LIVE markup in index.html:
     #about.about > .about-bg + .about-inner
       .about-intro  > .about-heading(.about-heading-word) + .about-lead + .about-intro-rule
       .about-composition
         .about-narrative-col > .about-spine(.spine-track/.spine-progress/.spine-node)
                              + .about-chapters > .about-chapter(.chapter-meta/.chapter-title/.chapter-body)
         .about-systems > .about-orbit-zone > .about-orbit-head + #aboutOrbit.orbit-box(.orbit > .orbit-item, .core)
       .about-close (optional — styled here, markup not present yet)

   Everything is scoped under #about. Load this file AFTER style.css.
   The ID selector is what lets it win over the older About blocks in
   style.css without touching them. The only !important declarations are
   the ones that must defeat an !important or an inline style set by
   older code (each is commented).

   Theme: colors come from the site tokens (--main*, --ink*), so the
   light theme follows automatically; only neutrals are redefined below.
   ===================================================================== */

#about {
  --ab-display: "Orbitron", "Cairo", sans-serif;
  --ab-text: "Inter", "Cairo", sans-serif;
  --ab-ease: cubic-bezier(.22, 1, .36, 1);
  --ab-dir: 1;                       /* flips to -1 in RTL (used for nudges) */
  --ab-fade: 90deg;                  /* gradient direction for hairlines     */
  --ab-dim: .64;                     /* opacity of chapters not yet reached  */
  --ab-body: var(--ink-dim, #c9c9c9);
  --ab-mute: var(--ink-faint, #9a9098);
  --ab-line: rgba(255, 255, 255, .09);
  --ab-line-strong: rgba(255, 255, 255, .17);
  --ab-grid: rgba(255, 255, 255, .045);
  --ab-node-bg: #12060b;
}
html[data-theme="light"] #about {
  --ab-dim: .8;
  --ab-mute: #7d4a58;
  --ab-line: rgba(58, 10, 24, .12);
  --ab-line-strong: rgba(58, 10, 24, .22);
  --ab-grid: rgba(225, 29, 72, .09);
  --ab-node-bg: #fff;
}
html[dir="rtl"] #about { --ab-dir: -1; --ab-fade: 270deg; }

/* ---------------------------------------------------------------------
   Section shell
   overflow:clip (not hidden) so position:sticky on the map keeps working.
   --------------------------------------------------------------------- */
#about.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: clamp(88px, 12vw, 168px) clamp(20px, 5vw, 72px) clamp(72px, 9vw, 128px);
  color: var(--ink);
}
#about .about-inner { max-width: 1280px; }

/* Background: structural grid that only really shows around the map */
#about .about-grid-texture {
  opacity: 1;
  background-size: 72px 72px;
  background-image:
    linear-gradient(var(--ab-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ab-grid) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 62% 56% at 74% 54%, #000 0, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 56% at 74% 54%, #000 0, transparent 72%);
}
html[dir="rtl"] #about .about-grid-texture {
  -webkit-mask-image: radial-gradient(ellipse 62% 56% at 26% 54%, #000 0, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 56% at 26% 54%, #000 0, transparent 72%);
}
#about .about-radial-glow {
  top: 22%;
  right: auto;
  inset-inline-end: -6%;
  width: min(780px, 92vw);
  height: min(640px, 70%);
  filter: none;
  background: radial-gradient(closest-side, rgba(var(--main-rgb), .1), transparent);
}

/* Introduction (heading, lead, rule): intentionally NOT restyled here —
   the original style.css design applies. */

/* ---------------------------------------------------------------------
   Composition — asymmetric two-column grid, hairline transition from intro
   --------------------------------------------------------------------- */
#about .about-composition {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .82fr);
  column-gap: clamp(40px, 7vw, 112px);
  align-items: start;
  margin: 0;
  padding-top: clamp(20px, 3vh, 36px);
  border-top: 1px solid transparent;
  border-image: linear-gradient(var(--ab-fade), var(--ab-line-strong), transparent 85%) 1;
}

/* ---------------------------------------------------------------------
   Narrative column + progress rail
   --------------------------------------------------------------------- */
#about .about-narrative-col {
  position: relative;
  width: 100%;
  min-width: 0;
  padding-inline-start: clamp(36px, 4.4vw, 56px);
}
#about .about-spine {
  position: absolute;
  inset: 0 auto 0 auto;
  inset-inline-start: 0;
  width: 11px;
  pointer-events: none;
}
#about .spine-track {
  left: auto; right: auto;
  inset-inline-start: 5px;
  width: 1px;
  transform: none;
  border-radius: 0;
  background: var(--ab-line-strong);
}
#about .spine-progress {
  left: auto; right: auto;
  inset-inline-start: 5px;
  top: 0;
  width: 1px;
  /* !important: older code sets an inline height; the rail is driven by --p instead */
  height: 100% !important;
  transform: scaleY(var(--p, 0));
  transform-origin: top;
  border-radius: 0;
  background: linear-gradient(180deg, var(--main), rgba(var(--main-rgb), .3));
  box-shadow: 0 0 10px rgba(var(--main-rgb), .45);
  transition: transform .9s var(--ab-ease);
}
/* Markers: --y is measured from each chapter by about-redesign.js.
   The percentages are only the no-JS fallback. */
#about .spine-node {
  position: absolute;
  left: auto; right: auto; bottom: auto;
  inset-inline-start: 0;
  top: var(--y, 0);
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  transform: none;
  border-radius: 50%;
  background: var(--ab-node-bg);
  border: 1.5px solid var(--ab-line-strong);
  box-shadow: none;
  transition: background .5s var(--ab-ease), border-color .5s var(--ab-ease), box-shadow .5s var(--ab-ease);
}
#about .spine-node[data-node="build"]     { top: var(--y, 33%); }
#about .spine-node[data-node="systems"]   { top: var(--y, 66%); }
#about .spine-node[data-node="direction"] { top: var(--y, 100%); }
#about .spine-node::after {                 /* the short tick toward the text */
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: calc(100% + 5px);
  width: 0;
  height: 1px;
  background: var(--main);
  transition: width .5s var(--ab-ease);
}
#about .spine-node.is-passed  { border-color: rgba(var(--main-rgb), .6); }
#about .spine-node.is-current {
  background: var(--main);
  border-color: var(--main);
  box-shadow: 0 0 0 4px rgba(var(--main-rgb), .14), 0 0 14px rgba(var(--main-rgb), .5);
}
#about .spine-node.is-current::after { width: 20px; }

/* ---------------------------------------------------------------------
   Chapters — index | label, title, body
   .chapter-meta becomes display:contents so index and label can sit in
   different grid cells without changing the markup.
   --------------------------------------------------------------------- */
#about .about-chapters {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3.4vh, 38px);   /* viewport-based so the column fits the screen */
  width: 100%;
  min-width: 0;
}
#about .about-chapter {
  --ab-o: 1;                         /* state opacity, set per state below */
  --ab-shift: 0px;
  position: relative;
  display: grid;
  grid-template-columns: clamp(34px, 3.6vw, 54px) minmax(0, 1fr);
  column-gap: clamp(12px, 1.5vw, 20px);
  align-items: start;
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  transition-delay: 0s;
}
#about .about-chapter .chapter-meta { display: contents; }

#about .chapter-index {
  grid-column: 1;
  grid-row: 1 / span 3;
  font: 500 clamp(22px, min(2.8vw, 5vh), 38px) / .85 var(--ab-display);
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--main-rgb), .34);
  opacity: var(--ab-o);
  transition: -webkit-text-stroke-color .5s var(--ab-ease), filter .5s var(--ab-ease), opacity .6s var(--ab-ease);
}
#about .chapter-label {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 clamp(5px, 1vh, 9px);
  font: 500 9.5px / 1.2 var(--ab-display);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--main-soft);
  opacity: var(--ab-o);
  transform: translateX(var(--ab-shift));
  transition: opacity .6s var(--ab-ease), transform .6s var(--ab-ease), color .4s;
}
/* !important: an older rule hides the chapter title with display:none !important */
#about .chapter-title {
  display: block !important;
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 clamp(6px, 1.2vh, 10px);
  font: 500 clamp(17px, min(1.7vw, 3vh), 24px) / 1.2 var(--ab-text);
  letter-spacing: -.02em;
  color: var(--ink);
  opacity: var(--ab-o);
  transform: translateX(var(--ab-shift));
  transition: opacity .6s var(--ab-ease), transform .6s var(--ab-ease);
}
#about .chapter-body {
  grid-column: 2;
  grid-row: 3;
  width: auto;
  max-width: 50ch;
  margin: 0;
  font: 400 clamp(13px, min(1.05vw, 1.9vh), 15px) / 1.55 var(--ab-text);
  color: var(--ab-body);
  opacity: var(--ab-o);
  transform: translateX(var(--ab-shift));
  transition: opacity .6s var(--ab-ease), transform .6s var(--ab-ease);
}

/* Chapter states only apply once the script is tracking scroll, so the
   section stays fully readable without it. */
#about.ab-track .about-chapter                { --ab-o: var(--ab-dim); }
#about.ab-track .about-chapter.is-passed      { --ab-o: .84; }
#about.ab-track .about-chapter.is-current     { --ab-o: 1; --ab-shift: calc(var(--ab-dir) * 6px); }
#about .about-chapter.is-passed .chapter-index { -webkit-text-stroke-color: rgba(var(--main-rgb), .5); }
#about .about-chapter.is-current .chapter-index {
  -webkit-text-stroke-color: var(--main);
  filter: drop-shadow(0 0 12px rgba(var(--main-rgb), .3));
}

@media (min-width: 900px) {            /* gentle zigzag, desktop only */
  #about .about-chapter:nth-child(even) { margin-inline-start: clamp(0px, 3.5vw, 48px); }
}

/* ---------------------------------------------------------------------
   Systems map — a custom instrument, not a card
   --------------------------------------------------------------------- */
#about .about-systems {
  position: sticky;
  top: clamp(96px, 12vh, 132px);
  display: block;
  width: 100%;
  max-width: 420px;
  justify-self: end;
}
#about .about-systems .about-orbit-zone {
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  border-radius: 0;
  /* !important: older light-theme/mobile rules paint a solid card with !important */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#about .about-orbit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(10px, 2vw, 22px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ab-line);
  font: 500 10px / 1 var(--ab-display);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ab-mute);
}
#about .about-orbit-head .online { color: var(--main-soft); gap: 8px; }
#about .about-orbit-head .online::before {   /* keep the dot, drop the pulse */
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 3px rgba(var(--main-rgb), .14);
  animation: none;
}

#about .orbit-box {
  position: relative;
  width: min(100%, 400px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  /* !important: older code applies hover scale and an inline parallax transform here */
  transform: none !important;
}
/* The ring wrapper only positions the buttons now: no border, no spin */
#about .orbit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  border-radius: 0;
  animation: none;
}

/* Inline SVG (rings, frame, links) injected by about-redesign.js */
#about .ab-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
#about .ab-ring { fill: none; stroke: var(--ab-line-strong); stroke-width: .28; }
#about .ab-ring--dash { stroke-dasharray: .8 1.8; }
#about .ab-ring--tick { stroke-width: 1.5; stroke-dasharray: .28 4.2; opacity: .7; }
#about .ab-frame { fill: none; stroke: var(--ab-line); stroke-width: .25; stroke-linejoin: round; }
#about .ab-link {
  fill: none;
  stroke: rgba(var(--main-rgb), .34);
  stroke-width: .3;
  stroke-dasharray: .9 1.5;
  transition: opacity .4s var(--ab-ease), stroke .4s var(--ab-ease);
}
#about .ab-link-on {
  fill: none;
  stroke: var(--main);
  stroke-width: .55;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 40);
  stroke-dashoffset: var(--len, 40);
  transition: stroke-dashoffset .6s var(--ab-ease);
}
#about .ab-g.is-on .ab-link-on { stroke-dashoffset: 0; }
#about .ab-g.is-echo .ab-link  { stroke: rgba(var(--main-rgb), .62); }
#about .orbit-box.has-active .ab-g:not(.is-on) .ab-link { opacity: .4; }

/* Core: deep crimson with a lit upper edge and a hairline halo */
#about .core {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 31%;
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* tiny pointer-driven drift; --ab-px/--ab-py are set by about-redesign.js */
  transform: translate(calc(-50% + var(--ab-px, 0) * 1px), calc(-50% + var(--ab-py, 0) * 1px));
  transition: transform .6s var(--ab-ease);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .17), transparent 40%),
    radial-gradient(circle at 50% 50%, var(--main-core) 0%, var(--main-deep) 72%, #12040a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 -12px 26px rgba(0, 0, 0, .4),
    0 0 0 6px rgba(var(--main-rgb), .05),
    0 0 0 7px rgba(var(--main-rgb), .2);
}
#about .core::before {                       /* fine inner ring */
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .11);
}
#about .core::after {                        /* ambient halo (outside the core only) */
  content: "";
  position: absolute;
  inset: -26%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, transparent 64%, rgba(var(--main-alt-rgb), .26) 80%, transparent 100%);
  opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
  #about .core::after { animation: ab-breathe 7s ease-in-out infinite; }
}
@keyframes ab-breathe {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.05); }
}
#about .core span {
  max-width: 88%;
  font: 500 clamp(8.5px, 2.5vw, 10px) / 1.25 var(--ab-display);
  letter-spacing: .14em;
  text-align: center;
  color: #fff;
}

/* Nodes: the <i> icon is the dot; the button is a 48px target centred on it */
#about .orbit-item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  right: auto;
  bottom: auto;
  margin: 0;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: var(--main);
  box-shadow: none;
  color: var(--main);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ab-ease), opacity .35s var(--ab-ease);
}
#about .orbit-item.i1 { --x: 36.3%; --y: 12.4%; }
#about .orbit-item.i2 { --x: 85%;   --y: 31%; }
#about .orbit-item.i3 { --x: 70%;   --y: 82%; }
#about .orbit-item.i4 { --x: 18.5%; --y: 73%; }

#about .orbit-item i {
  position: static;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: var(--main);
  background: var(--ab-node-bg);
  border: 1px solid rgba(var(--main-rgb), .4);
  box-shadow: none;
  transition: background .35s var(--ab-ease), border-color .35s var(--ab-ease), box-shadow .35s var(--ab-ease);
}
#about .orbit-item .orbit-tag {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
  font: 500 9px / 1 var(--ab-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ab-mute);
  transition: color .35s var(--ab-ease);
}
/* i1 sits near the top edge, so its label goes beside it, away from its link */
#about .orbit-item.i1 .orbit-tag {
  top: 50%;
  left: auto;
  right: calc(100% + 6px);
  transform: translateY(-50%);
}
/* The hint text stays in the DOM (it is part of the button's accessible
   name and the source for the readout) but is not drawn on the map. */
#about .orbit-item .orbit-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* States — one model: .is-on (selected/previewed), .is-dim (others), .is-echo (chapter cue) */
#about .orbit-item.is-on { transform: translate(-50%, -50%) scale(1.06); }
#about .orbit-item.is-on i {
  background: rgba(var(--main-rgb), .16);
  border-color: var(--main);
  box-shadow: 0 0 0 4px rgba(var(--main-rgb), .12);
}
#about .orbit-item.is-on .orbit-tag {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--main);
  text-underline-offset: 4px;
}
#about .orbit-item.is-dim { opacity: .78; }
#about .orbit-item.is-echo:not(.is-on) i {
  border-color: rgba(var(--main-rgb), .85);
  box-shadow: 0 0 0 3px rgba(var(--main-rgb), .1);
}
#about .orbit-item:focus-visible {
  outline: 2px solid var(--main-soft);
  outline-offset: 3px;
}
/* No-JS fallback: show the hint as a small tooltip on hover/focus */
#about:not(.ab-js) .orbit-item:is(:hover, :focus-visible) .orbit-hint {
  width: max-content;
  height: auto;
  max-width: 180px;
  margin: 0;
  padding: 6px 10px;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  top: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font: 400 11px / 1.4 var(--ab-text);
  text-align: center;
  color: var(--ink);
  background: var(--ab-node-bg);
  border: 1px solid var(--ab-line-strong);
  border-radius: 8px;
}

/* Readout (injected): where the selected node's own description appears */
#about .ab-readout {
  position: relative;
  min-height: 96px;
  margin-top: clamp(14px, 2.4vw, 26px);
  padding-top: 16px;
  border-top: 1px solid var(--ab-line);
}
#about .ab-readout::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 28px;
  height: 1px;
  background: var(--main);
}
#about .ab-readout [hidden] { display: none; }
#about .ab-readout-idle {
  margin: 0;
  max-width: 36ch;
  font: 400 14px / 1.6 var(--ab-text);
  color: var(--ab-mute);
}
#about .ab-readout-tag {
  display: block;
  margin-bottom: 9px;
  font: 500 10px / 1 var(--ab-display);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--main-soft);
}
#about .ab-readout-text {
  margin: 0;
  max-width: 36ch;
  font: 400 15px / 1.6 var(--ab-text);
  color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  #about .ab-readout-live.is-swapping { animation: ab-swap .4s var(--ab-ease) both; }
}
@keyframes ab-swap {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   Closing statement — styled for the existing .about-close hooks.
   NOTE: index.html does not currently contain this element (see README).
   Expected markup:
     <div class="about-close about-reveal"><div class="about-close-inner">
       <span class="about-close-kicker">…</span>
       <p class="about-close-text">… <em>word</em> …</p></div></div>
   --------------------------------------------------------------------- */
#about .about-close {
  margin-top: clamp(72px, 10vw, 136px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid transparent;
  border-image: linear-gradient(var(--ab-fade), var(--ab-line-strong), transparent 85%) 1;
}
#about .about-close-inner {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  column-gap: clamp(24px, 5vw, 72px);
  align-items: baseline;
  max-width: none;
}
#about .about-close-kicker {
  padding-top: .9em;
  font: 500 10px / 1.2 var(--ab-display);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--main-soft);
}
#about .about-close-text {
  max-width: 24ch;
  margin: 0;
  font: 500 clamp(28px, 4.2vw, 56px) / 1.1 var(--ab-text);
  letter-spacing: -.028em;
  color: var(--ink);
}
#about .about-close-text em { font-style: normal; color: var(--main); }

/* ---------------------------------------------------------------------
   Reveal — visible by default; hidden only once the script has taken over.
   (The older rule hid .about-reveal unconditionally.)
   --------------------------------------------------------------------- */
#about .about-reveal { opacity: 1; transform: none; }
#about.ab-js .about-reveal:not(.is-visible) { opacity: 0; transform: translateY(24px); }

/* ---------------------------------------------------------------------
   Arabic / RTL: tracking and uppercase break Arabic shaping
   --------------------------------------------------------------------- */
html[lang="ar"] #about :is(.chapter-label, .orbit-tag, .core span, .about-orbit-head,
  .about-orbit-head span, .ab-readout-tag, .about-close-kicker) {
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ar"] #about :is(.chapter-title, .about-close-text) { letter-spacing: 0; line-height: 1.35; }
html[lang="ar"] #about .chapter-body { line-height: 1.9; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1099px) {
  #about .about-composition {
    grid-template-columns: 1fr;
    row-gap: clamp(64px, 10vw, 96px);
  }
  #about .about-systems {
    position: relative;
    top: auto;
    justify-self: center;
    max-width: 440px;
  }
}
@media (max-width: 899px) {
  #about .about-chapter:nth-child(even) { margin-inline-start: 0; }
}
@media (max-width: 767px) {
  #about .about-narrative-col { padding-inline-start: 30px; }
  #about .about-chapter {
    --ab-shift: 0px !important;       /* no sideways nudges on small screens */
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 12px;
  }
  #about .chapter-index { font-size: 24px; }
  #about .about-chapters { gap: 28px; }
  #about .orbit-box { width: min(100%, 340px); }
  #about .orbit-item i { width: 46px; height: 46px; }
}
@media (max-width: 560px) {
  #about .ab-ring--dash { display: none; }   /* simpler geometry on narrow screens */
  #about .core::after { inset: -18%; }
}
@media (max-height: 640px) {
  #about .about-systems { position: relative; top: auto; }
}


/* ---------------------------------------------------------------------
   Orbit zone — continuous, smooth loops (rings, nodes, links, ripples)
   Pure transform/opacity/stroke animation: no layout work, no JS.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  #about .ab-map .ab-ring {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
  }
  /* tick ring: slow clockwise rotation */
  #about .ab-ring--tick { animation: ab-spin 60s linear infinite; }
  /* dashed ring: counter-clockwise, a touch faster */
  #about .ab-ring--dash { animation: ab-spin 40s linear infinite reverse; }
  /* solid rings: gentle breathing, offset from each other */
  #about .ab-ring:not(.ab-ring--tick):not(.ab-ring--dash) {
    animation: ab-ring-breathe 7s ease-in-out infinite;
  }
  #about .ab-map circle.ab-ring:nth-of-type(4) { animation-delay: -3.5s; }   /* halo ring */

  /* dashed links drift toward the nodes */
  #about .ab-link { animation: ab-flow 6s linear infinite; }

  /* nodes float softly (uses the individual `translate` property so the
     existing hover / selected transforms keep working untouched) */
  #about .orbit-item i { animation: ab-float 6s ease-in-out infinite; }
  #about .orbit-item.i2 i { animation-delay: -1.5s; }
  #about .orbit-item.i3 i { animation-delay: -3s; }
  #about .orbit-item.i4 i { animation-delay: -4.5s; }

  /* two ripples radiate from the core */
  #about .orbit::before,
  #about .orbit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 31%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(var(--main-rgb), .45);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: ab-ripple 7s cubic-bezier(.22, .61, .36, 1) infinite;
  }
  #about .orbit::after { animation-delay: -3.5s; }
}
@keyframes ab-spin { to { transform: rotate(360deg); } }
@keyframes ab-ring-breathe {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.035); opacity: 1; }
}
@keyframes ab-flow { to { stroke-dashoffset: -2.4; } }
@keyframes ab-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}
@keyframes ab-ripple {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .55; }
  80%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.9); opacity: 0; }
}


/* ---------------------------------------------------------------------
   Orbit zone — alternating colours: one default (pink), one black.
   Black elements get a faint light edge so they stay visible on the
   dark theme; in the light theme they read as plain black.
   --------------------------------------------------------------------- */
/* rings: tick = black, outer = pink, dash = black, halo = pink */
#about .ab-ring--tick  { stroke: #c31a1a; opacity: 1; filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .55)); }
#about .ab-ring:not(.ab-ring--tick):not(.ab-ring--dash) { stroke: var(--main); }
#about .ab-ring--dash  { stroke: #000; stroke-width: .5; filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .55)); }
#about .ab-map circle.ab-ring:nth-of-type(4) { stroke: var(--main); }

/* nodes (.orbit-item) keep their original colours — see the base rules above */

/* ripples from the core: one pink, one black */
#about .orbit::before { border-color: rgba(var(--main-rgb), .6); }
#about .orbit::after  { border-color: rgba(188, 11, 11, 0.75); }


/* ---------------------------------------------------------------------
   Orbit zone — card background + shadow, same height as the narrative
   column (side-by-side layout only; stacked layouts keep natural height)
   --------------------------------------------------------------------- */
/* !important is needed to beat the earlier `background/border/box-shadow: none !important` reset */
#about .about-systems .about-orbit-zone {
  padding: clamp(18px, 2.2vw, 0px);
 
}
html[data-theme="light"] #about .about-systems .about-orbit-zone {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--main-rgb), .08), transparent 60%),
    rgba(255, 255, 255, .7) !important;
  box-shadow:
    0 24px 56px rgba(58, 10, 24, .16),
    0 0 40px rgba(var(--main-rgb), .08) !important;
}
@media (min-width: 1100px) {
  #about .about-composition { align-items: stretch; }
  #about .about-systems {
    position: relative;      /* sticky is pointless once the cell matches the column height */
    top: auto;
    align-self: stretch;
    height: 100%;
  }
  #about .about-systems .about-orbit-zone {
    height: 100%;
    justify-content: center;   /* map + readout stay centred in the taller card */
  }
}


/* =====================================================================
   ABOUT BACKGROUND — "living night sky"
   Layers (back → front, all behind .about-inner):
     1. .about-radial-glow   drifting aurora of pink / violet light
     2. .about-grid-texture  dot matrix that slowly climbs + a scan sweep
     3. #about::before       soft glowing orbs floating upward
     4. #about::after        twinkling star-field
   Decorative only; no markup changes. Animations sit in the
   no-preference block so reduced-motion users get the static layers.
   ===================================================================== */
#about {
  --ab-edge-fade: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  --ab-violet: 124, 77, 255;
}
#about .about-bg {
  -webkit-mask-image: var(--ab-edge-fade);
  mask-image: var(--ab-edge-fade);
}

/* 1 — aurora */
#about .about-radial-glow {
  inset: -25% -15%;
  inset-inline-end: -15%;
  width: auto;
  height: auto;
  top: -25%;
  right: auto;
  filter: none;
  background:
    radial-gradient(38% 34% at 22% 30%, rgba(var(--main-rgb), .26), transparent 70%),
    radial-gradient(34% 40% at 80% 52%, rgba(var(--ab-violet), .20), transparent 70%),
    radial-gradient(30% 28% at 52% 86%, rgba(var(--main-alt-rgb, var(--main-rgb)), .16), transparent 70%);
  transform-origin: 50% 50%;
}

/* 2 — dot matrix + scan sweep */
#about .about-grid-texture {
  opacity: .30;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .55) 0 1px, transparent 1.6px);
  background-size: 30px 30px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 10%, transparent 78%);
}
html[dir="rtl"] #about .about-grid-texture {
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 10%, transparent 78%);
}
#about .about-grid-texture::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -24%;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(var(--main-rgb), .22), transparent);
  pointer-events: none;
}

/* 3 — floating orbs, 4 — star-field */
#about.about::before,
#about.about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: var(--ab-edge-fade);
  mask-image: var(--ab-edge-fade);
}
#about.about::before {
  background:
    radial-gradient(closest-side, rgba(var(--main-rgb), .30), transparent) 9% 72% / 240px 240px no-repeat,
    radial-gradient(closest-side, rgba(var(--ab-violet), .24), transparent) 46% 16% / 300px 300px no-repeat,
    radial-gradient(closest-side, rgba(var(--main-rgb), .20), transparent) 88% 82% / 200px 200px no-repeat,
    radial-gradient(closest-side, rgba(var(--ab-violet), .16), transparent) 70% 8% / 160px 160px no-repeat;
}
#about.about::after {
  opacity: .8;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(var(--main-rgb), .95) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 255, 255, .6) 0 .8px, transparent 1.3px);
  background-size: 211px 197px, 313px 281px, 127px 149px;
  background-position: 17px 41px, 140px 90px, 60px 120px;
  -webkit-mask-image: var(--ab-edge-fade), radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 85%);
  -webkit-mask-composite: source-in;
  mask-image: var(--ab-edge-fade), radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 85%);
  mask-composite: intersect;
}

/* light theme: ink-coloured dots, gentler glow */
html[data-theme="light"] #about .about-grid-texture {
  opacity: .22;
  background-image: radial-gradient(circle, rgba(58, 10, 24, .55) 0 1px, transparent 1.6px);
}
html[data-theme="light"] #about .about-radial-glow { opacity: .7; }
html[data-theme="light"] #about.about::after { opacity: .45; }

@media (prefers-reduced-motion: no-preference) {
  #about .about-radial-glow { animation: ab-aurora 26s ease-in-out infinite alternate; will-change: transform; }
  #about .about-grid-texture { animation: ab-dots 14s linear infinite; }
  #about .about-grid-texture::after { animation: ab-scan 11s linear infinite; will-change: transform; }
  #about.about::before { animation: ab-orbs 18s ease-in-out infinite alternate; will-change: transform; }
  #about.about::after { animation: ab-twinkle 5s ease-in-out infinite alternate; }
}
@keyframes ab-aurora {
  0%   { transform: translate3d(-3%, 2%, 0) rotate(-5deg) scale(1.02); }
  100% { transform: translate3d(3%, -2%, 0) rotate(5deg) scale(1.12); }
}
@keyframes ab-dots   { to { background-position: 0 -30px; } }           /* one full tile → seamless loop */
@keyframes ab-scan   { from { transform: translateY(0); } to { transform: translateY(620%); } }
@keyframes ab-orbs {
  0%   { transform: translate3d(0, 18px, 0); }
  100% { transform: translate3d(0, -22px, 0); }
}
@keyframes ab-twinkle { from { opacity: .35; } to { opacity: .9; } }


/* ---------------------------------------------------------------------
   Darker About background (dark theme only)
   Dims every decorative layer and adds a translucent black veil +
   vignette. The veil is semi-transparent on purpose so the 3D model /
   page background behind the section is not hidden.
   --------------------------------------------------------------------- */
html:not([data-theme="light"]) #about .about-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 35%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(180deg, rgba(3, 0, 4, .62), rgba(3, 0, 4, .72));
}
html:not([data-theme="light"]) #about .about-radial-glow { opacity: .5; }
html:not([data-theme="light"]) #about .about-grid-texture { opacity: .14; }
html:not([data-theme="light"]) #about.about::before { opacity: .55; }
html:not([data-theme="light"]) #about.about::after { opacity: .4; }
@media (prefers-reduced-motion: no-preference) {
  /* keep the star twinkle inside the dimmer range */
  html:not([data-theme="light"]) #about.about::after { animation-name: ab-twinkle-dark; }
}
@keyframes ab-twinkle-dark { from { opacity: .18; } to { opacity: .5; } }


/* ---------------------------------------------------------------------
   Orbit nodes — colour system built on the filled --main button
   The button (.orbit-item) is now the pink disc, so the inner <i> becomes
   a transparent icon holder with a light hairline:
     rest      main disc, soft pink glow, white icon
     hover     lighter main (--main-soft), stronger glow, slight lift
     selected  main disc + ring (.is-on); hover still lightens it
     echo      chapter cue: brighter hairline + glow
   Placed after the base and .is-on rules; same specificity, so it wins.
   --------------------------------------------------------------------- */
#about .orbit-item {
  background: var(--main);
  box-shadow: 0 0 16px rgba(var(--main-rgb), .38);
  transition-property: transform, opacity, background, box-shadow;
}
#about .orbit-item i {
  background: transparent;
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  box-shadow: none;
  transition-property: border-color, background, color;
}

/* hover / keyboard focus: lighter version of main */
#about .orbit-item:is(:hover, :focus-visible) {
  background: var(--main-soft);
  box-shadow: 0 0 26px rgba(var(--main-rgb), .6);
  transform: translate(-50%, -50%) scale(1.08);
}
#about .orbit-item:is(:hover, :focus-visible) i {
  background: transparent;
  border-color: rgba(255, 255, 255, .75);
  color: #fff;
  box-shadow: none;
}

/* selected / previewed */
#about .orbit-item.is-on {
  background: var(--main);
  box-shadow: 0 0 0 4px rgba(var(--main-rgb), .24), 0 0 26px rgba(var(--main-rgb), .55);
}
#about .orbit-item.is-on i {
  background: transparent;
  border-color: #fff;
  box-shadow: none;
}
#about .orbit-item.is-on:is(:hover, :focus-visible) { background: var(--main-soft); }

/* chapter echo cue */
#about .orbit-item.is-echo:not(.is-on) {
  box-shadow: 0 0 0 3px rgba(var(--main-rgb), .18), 0 0 22px rgba(var(--main-rgb), .5);
}
#about .orbit-item.is-echo:not(.is-on) i {
  border-color: rgba(255, 255, 255, .7);
  box-shadow: none;
}
#about .orbit-item:focus-visible { outline-color: var(--ink); }

/* ---------------------------------------------------------------------
   Light mode fixes + orbit zone without border
   style.css forces `.orbit-item i { color: #e11d48 !important }` in light
   mode — the same pink as the new filled node, so the icons vanished.
   The ID-prefixed selector below out-ranks it. White icons stay readable
   on --main and on the lighter --main-soft hover colour.
   --------------------------------------------------------------------- */
html[data-theme="light"] #about .orbit-item,
html[data-theme="light"] #about .orbit-item:is(:hover, :focus-visible) {
  color: #fff;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="light"] #about .orbit-item i,
html[data-theme="light"] #about .orbit-item:is(:hover, :focus-visible) i,
html[data-theme="light"] #about .orbit-item.is-on i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html[data-theme="light"] #about .orbit-item { box-shadow: 0 6px 18px rgba(var(--main-rgb), .35); }
html[data-theme="light"] #about .orbit-item:is(:hover, :focus-visible) { box-shadow: 0 8px 26px rgba(var(--main-rgb), .5); }
html[data-theme="light"] #about .orbit-item.is-on {
  box-shadow: 0 0 0 4px rgba(var(--main-rgb), .2), 0 8px 24px rgba(var(--main-rgb), .45);
}

/* orbit zone: no border in either theme (also beats the light-theme
   `border: 1px solid` in style.css) */
#about .about-systems .about-orbit-zone,
html[data-theme="light"] #about .about-systems .about-orbit-zone {
  border: 0 !important;
  outline: 0;
}

/* ---------------------------------------------------------------------
   Reduced motion: no transitions or animation; every state still applies
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #about *, #about *::before, #about *::after {
    transition: none !important;
    animation: none !important;
  }
  #about .about-reveal,
  #about.ab-js .about-reveal:not(.is-visible) { opacity: 1; transform: none; }
  #about .about-chapter { --ab-shift: 0px !important; }
}