/* about/css/about.css — the ABOUT page.
   The only page on the site you SCROLL. Stations and the Realm are rooms you
   stand in; this one is a document you read, so it drops the one-screen law and
   keeps everything else: the same warp backdrop, the same drawer, the same
   colour law (gold = what is yours · blue = structure), the same three faces
   (pixel for labels, mono for asides, Inter for the reading line). */

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-pixel: 'Press Start 2P', monospace;
  --rlm-gold: #f5c542;
  --rlm-blue: #18B0F5;
  --rlm-blue-soft: #7fc3ff;
  --rlm-text: #e9eff8;
  --rlm-dim: #8fa3c0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* the hidden attribute must actually hide. The drawer skin below sets
   display:flex on the toggle and the aside, and a bare [hidden] loses to any
   display rule — which left the hamburger sitting on top of the close button
   whether or not this reader was supposed to have it. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

/* ── the page ── */
.ab-wrap { position: relative; z-index: 1; width: min(760px, 90vw); margin: 0 auto; padding: 0 0 120px; }

/* 标识:与首页完全一致 —— 左上角 26/26,高 30px */
.ab-top { position: fixed; top: 26px; left: 26px; z-index: 419; }
.ab-mark img { height: 30px; width: auto; display: block; opacity: .95; }

/* ── the opening ── */
.ab-hero { padding: 104px 0 70px; }
.ab-eyebrow {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: .28em;
  color: rgba(127,195,255,0.7); margin-bottom: 26px;
}
.ab-h1 {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.25; letter-spacing: -0.015em; color: #f3f7fd;
}
.ab-h1 em { font-style: normal; color: var(--rlm-gold); }
.ab-lede { margin-top: 32px; display: flex; flex-direction: column; gap: 18px;
  font-size: 17px; line-height: 1.85; color: rgba(214,226,244,0.86); }
/* three short lines that belong together — set as a stack, not a paragraph */
.ab-stack { display: flex; flex-direction: column; gap: 4px; color: var(--rlm-dim); }

/* ── the buttons — the HOMEPAGE's pixel button, verbatim: Press Start 2P at
   10px on a chunky 3px drop, no border. Gold = the door that is yours; blue =
   the public, structural one (the docs), same block, same weight. ── */
.ab-btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 22px; border-radius: 12px; border: none; cursor: pointer; text-decoration: none;
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.06em; line-height: 1.6;
  transition: transform .12s ease, box-shadow .12s ease;
}
/* the arrow keeps a mono face — Press Start 2P has no → / ↗ of its own */
.ab-btn span { font-family: var(--font-mono); font-size: 12px; opacity: .78; }
.ab-btn-gold {
  background: linear-gradient(180deg,#f7d873,#e9b83f); color: #241a04;
  box-shadow: 0 3px 0 #8f6416, 0 0 22px rgba(245,197,66,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
}
.ab-btn-gold:hover {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #8f6416, 0 0 30px rgba(245,197,66,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
.ab-btn-blue {
  background: linear-gradient(180deg,#63cdff,#1fb2f2); color: #06263d;
  box-shadow: 0 3px 0 #0d5b8a, 0 0 22px rgba(24,176,245,0.24), inset 0 1px 0 rgba(255,255,255,0.35);
}
.ab-btn-blue:hover {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #0d5b8a, 0 0 30px rgba(24,176,245,0.42), inset 0 1px 0 rgba(255,255,255,0.35);
}

/* ── a section ── */
.ab-sec { padding: 54px 0; border-top: 1px solid rgba(120,170,230,0.14); }
.ab-sec > * + * { margin-top: 18px; }
.ab-sec .ab-btn { margin-top: 30px; }
.ab-h2 {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.01em; color: #f3f7fd; margin-top: 14px;
}
.ab-sec p { font-size: 16.5px; line-height: 1.85; color: rgba(206,219,238,0.82); }
.ab-sec b { color: #eef4fc; font-weight: 700; }
/* the one line a section turns on */
.ab-say { font-size: 18px !important; color: #e9f1fb !important; }
/* short declaratives, one per line — the source's rhythm, kept */
.ab-verbs { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ab-verbs li {
  position: relative; padding-left: 20px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: rgba(180,199,226,0.8);
}
.ab-verbs li::before { content: '·'; position: absolute; left: 6px; color: rgba(127,195,255,0.6); }
.ab-pull {
  padding: 18px 22px; border-left: 2px solid rgba(127,195,255,0.5); border-radius: 0 10px 10px 0;
  background: rgba(14,24,44,0.45);
  font-size: 17px !important; line-height: 1.7; color: #e9f1fb !important;
}
.ab-pull-gold { border-left-color: var(--rlm-gold); background: rgba(30,23,6,0.35); color: #f7e6b4 !important; }
.ab-quiet { font-size: 14px !important; color: rgba(160,180,208,0.72) !important; line-height: 1.9; }

/* ── the protocol table ── */
.ab-defs { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.ab-defs > div {
  display: flex; align-items: baseline; gap: 18px; padding: 13px 16px;
  background: rgba(12,20,38,0.4); border: 1px solid rgba(120,170,230,0.14); border-radius: 10px;
}
.ab-defs dt {
  flex: 0 0 108px; font-family: var(--font-mono); font-weight: 700; font-size: 12.5px;
  letter-spacing: .06em; color: var(--rlm-gold);
}
.ab-defs dd { font-size: 14.5px; line-height: 1.6; color: rgba(196,212,234,0.8); }


/* ── the close ── */
.ab-close { padding: 76px 0 60px; border-top: 1px solid rgba(120,170,230,0.14); text-align: center; }
.ab-h1-close { font-size: clamp(26px, 4vw, 40px); }
.ab-close .ab-lede { align-items: center; color: rgba(196,212,234,0.8); }
.ab-turn {
  margin: 28px 0 26px; font-family: var(--font-pixel); font-size: 13px; letter-spacing: .12em;
  color: var(--rlm-gold); text-shadow: 0 0 16px rgba(245,197,66,0.35);
}
.ab-close .ab-btn { margin: 0 auto; }


@media (max-width: 640px) {
  .ab-top { top: 18px; left: 16px; }
  .ab-mark img { height: 22px; }
  .ab-hero { padding: 84px 0 56px; }
  .ab-sec { padding: 42px 0; }
  .ab-ctas .ab-btn, .ab-close .ab-btn { width: 100%; justify-content: center; }
  .ab-defs > div { flex-direction: column; gap: 5px; }
  .ab-defs dt { flex: none; }
  }

/* big-screen zoom law (§7.5) — no 100vh boxes on this page, so no compensation
   is needed; the column is width-capped and simply scales with the rest */
@media (min-width: 1560px) { :root { zoom: 1.15; } }
@media (min-width: 1920px) { :root { zoom: 1.30; } }
@media (min-width: 2400px) { :root { zoom: 1.50; } }

/* ── the close — for a reader who opened About on top of somewhere else ── */
.ab-close-btn {
  position: fixed; top: 16px; right: 18px; z-index: 460;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: rgba(12,20,38,0.62); border: 1px solid rgba(120,170,230,0.30);
  border-radius: 12px; cursor: pointer; color: #bcd6f5; font-size: 15px;
  -webkit-backdrop-filter: blur(14px) saturate(1.12); backdrop-filter: blur(14px) saturate(1.12);
  box-shadow: 0 6px 22px rgba(0,0,0,0.42), inset 0 1px 0 rgba(195,222,255,0.13);
  transition: border-color .2s, background .2s, color .2s, transform .12s;
}
.ab-close-btn:hover { border-color: rgba(130,185,255,0.6); background: rgba(16,28,52,0.8); color: #fff; }
.ab-close-btn:active { transform: translateY(1px); }


/* ── the two stewards — a pair of plates, not a run-on line ── */

/* ── the legal row — three quiet links, spaced, no dot soup ── */
.ab-legal { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 18px; padding-left: 2px; }
.ab-legal a {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  color: rgba(160,182,212,0.72); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.ab-legal a:hover { color: #eaf1fb; border-bottom-color: rgba(127,195,255,0.55); }

@media (max-width: 640px) {
        .ab-legal { gap: 18px; }
}





/* ══ REFINEMENTS ═══════════════════════════════════════════════════════════ */

/* ── the thesis, as the product's own control ──────────────────────────────
   Five notches on a band. It is the dial from the airwaves, borrowed: the same
   hairline, the same lit notch. The two ends are dim on purpose — a thought
   going in and a thought coming out are the same kind of thing; the three lit
   ones are what Earth LinC actually builds. */
.ab-dial { position: relative; margin-top: 44px; padding: 26px 0 2px; }
.ab-dial::before {          /* the band — fading out at both ends: it continues */
  content: ''; position: absolute; left: 0; right: 0; top: 29px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(130,175,235,0.32) 14%,
              rgba(130,175,235,0.32) 86%, transparent);
}
.ab-dial-row { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.ab-dial-n { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.ab-dial-n i {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.ab-dial-n span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: inherit;
}
/* the two ends: hollow, unlit — they are the world outside the protocol */
.ab-dial-soft { color: rgba(150,172,204,0.55); }
.ab-dial-soft i { background: none; border: 1px solid rgba(150,172,204,0.5); box-shadow: none; width: 6px; height: 6px; }
.ab-dial-soft span { font-style: italic; }
.ab-dial-blue { color: var(--rlm-blue-soft); }
.ab-dial-gold { color: var(--rlm-gold); }

/* ── a section opens with its number, and nothing else ── */
.ab-num span {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: .2em;
  color: rgba(127,195,255,0.55);
}
.ab-h2 { margin-top: 12px !important; }
.ab-sec .ab-say { margin-top: 20px !important; }

/* ── the reading measure. The column is 760 wide because PLATES want that
   width; running text at that measure is ~95 characters, which is too far for
   an eye to track back. Prose gets its own, shorter line; anything structural
   (dial, plates, table, buttons) keeps the full column. ── */
.ab-sec p, .ab-lede { max-width: 62ch; }
.ab-sec .ab-quiet { max-width: 66ch; }
.ab-close p, .ab-close .ab-lede { max-width: none; }
/* display type takes a wider measure than prose — 19ch broke it into five
   short steps; ~26 keeps it to three or four full lines */
.ab-h1 { max-width: 26ch; text-wrap: balance; }
.ab-h1-close { max-width: none; }

/* ── the short declaratives — set as a stanza ──────────────────────────────
   These lines are not a table of facts; they are the source's rhythm, one
   thought per line. Hairlines made them look like data. Centred, italic and
   given air, they read the way they were written — and the shift in alignment
   marks them off from everything else on the page without any ornament. */
.ab-verbs {
  list-style: none;
  display: flex; flex-direction: column; gap: 11px;
  max-width: 46ch; margin: 38px auto !important; text-align: center;
  font-family: var(--font-sans); font-style: italic; font-size: 17px; line-height: 1.7;
  color: rgba(200,216,240,0.76);
}
.ab-verbs li { padding: 0; border: 0; font-family: inherit; font-size: inherit; color: inherit; }
.ab-verbs li::before { content: none; }

/* ── the stewards: one label, two plates ── */
.ab-stewards { margin-top: 28px; }
.ab-stewards-k {
  font-family: var(--font-pixel); font-size: 6.5px !important; letter-spacing: .2em;
  color: rgba(140,170,215,0.5) !important; margin-bottom: 11px;
}
.ab-stewards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ab-steward {
  padding: 15px 17px; border-radius: 11px;
  background: rgba(12,20,38,0.4); border: 1px solid rgba(120,170,230,0.14);
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: #eef4fc;
}

@media (max-width: 640px) {
  /* the dial turns on its side — five columns cannot hold a phone's width, and
     a squeezed row reads as broken rather than as a band */
  .ab-dial { padding: 4px 0 0 0; }
  .ab-dial::before { left: 4px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, rgba(130,175,235,0.32) 12%,
                rgba(130,175,235,0.32) 88%, transparent); }
  .ab-dial-row { grid-template-columns: 1fr; gap: 14px; }
  .ab-dial-n { flex-direction: row; align-items: center; gap: 14px; text-align: left; }
  .ab-stewards-row { grid-template-columns: 1fr; }
  .ab-sec p, .ab-lede, .ab-sec .ab-quiet, .ab-h1 { max-width: none; }
  .ab-verbs { max-width: none; font-size: 16px; margin: 30px auto !important; }
}

/* ── emphasis, rationed ────────────────────────────────────────────────────
   Weight carries almost all of it. Colour is spent on exactly four words in
   the whole page — the first, defining use of each term — and they take the
   same colours they wear on the dial above, so the reader meets them twice in
   the same clothes. Everything else that matters is bold and uncoloured. */
.ab-sec b, .ab-lede b { color: #f2f7fd; font-weight: 700; }
.ab-term { font-weight: 700; }
.ab-term-blue { color: var(--rlm-blue-soft); }
.ab-term-gold { color: var(--rlm-gold); }

/* ══════════════════════════════════════════════════════════════════════════
   Below this line: the page-level layer the handoff document could not carry.
   Inside that document the page was one block on a longer page, so its own
   background and the site's large-screen scaling had been stripped out. Both
   are restored here — from the figures the handoff names, and from the rules
   the rest of the site already runs.
   ══════════════════════════════════════════════════════════════════════════ */

/* The ground. Two radial washes over a near-black, with the warp drifting
   through at half strength — the handoff's numbers, unchanged. */
body {
  min-height: 100vh;
  background:
    radial-gradient(70% 50% at 18% 6%, rgba(30,74,132,0.34), transparent 70%),
    radial-gradient(60% 46% at 86% 30%, rgba(48,40,110,0.26), transparent 72%),
    #070b14;
  background-attachment: fixed;
  font-family: var(--font-sans);
  color: var(--rlm-text);
  -webkit-font-smoothing: antialiased;
}

/* Fixed, not sticky. The document scrolls past a backdrop that never moves;
   the handoff reached for sticky and a negative margin only because there it
   had to sit inside a longer page. */
#warp-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; opacity: .5; pointer-events: none; z-index: 0;
}

/* Fixed-px UI looks tiny on wide monitors. Same ladder and same anchor points
   as the homepage and the Realm (css/home.css, realm/css/realm.css): a MacBook
   (~1470) and every phone stay at 1. `zoom`, not `transform`, because the
   column is centred by auto margins and there is no forced-height box to
   fight; min-width fires on the REAL viewport, never the zoomed one, so this
   cannot feed back on itself. */
@media (min-width: 1560px) { :root { zoom: 1.15; } }
@media (min-width: 1920px) { :root { zoom: 1.30; } }
@media (min-width: 2400px) { :root { zoom: 1.50; } }