/* =========================================================================
   About page — loaded after styles.css, which owns the reset, the nav
   chrome, the language toggle and the filing footer shared by every page.

   The page is a single viewport. A line of the manifesto condenses out of
   the field, holds, and breaks back up into it; when the last one clears,
   the engine and what it yields take the stage. With reduced motion the
   same copy is laid out as one plain, scrolling document (body.seq-static).
   ========================================================================= */

/* ----- Fonts -----------------------------------------------------------
   Self-hosted, so the page loads the same inside mainland China. About Song
   is Noto Serif SC cut down to the glyphs this page's copy uses, About Math
   is STIX Two Math cut to the margin formulas (tools/build.py); edit the
   copy, re-run it. The Latin faces are the same files the Link Cortex page
   uses, so a visitor going on fetches them once. */
@font-face {
  font-family: 'About Song';
  src: url('../fonts/about-song-500.woff2?v=15516f31') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'About Song';
  src: url('../fonts/about-song-900.woff2?v=298bbf57') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'About Math';
  src: url('../fonts/about-math.woff2?v=d6620472') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'LC Serif';
  src: url('../fonts/instrument-serif-400.woff2?v=5eb09b5a') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LC Serif';
  src: url('../fonts/instrument-serif-400-italic.woff2?v=5a51946d') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'LC Mono';
  src: url('../fonts/geist-mono-400.woff2?v=3f98383b') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* Latin only: Geist also carries narrow forms of ，and 。 that would win
   over the Chinese font's full-width ones. */
@font-face {
  font-family: 'LC Sans';
  src: url('../fonts/geist-sans-400.woff2?v=e6ef6abb') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
                 U+2010-2015, U+2018-201F, U+2026, U+20AC, U+2122, U+2190-2193;
}

/* ----- Tokens ---------------------------------------------------------- */
.page-about {
  --bg: #050403;
  --ink: #efe8db;
  --ink-2: rgba(239, 232, 219, 0.76);
  --ink-3: rgba(239, 232, 219, 0.52);
  --ink-4: rgba(239, 232, 219, 0.2);
  --line: rgba(239, 232, 219, 0.11);
  --gold: #cfa86a;
  --gold-hi: #f0d29c;
  --gold-lo: #8a6a36;
  --song: 'About Song', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --serif-en: 'LC Serif', 'Times New Roman', serif;
  --sans: 'LC Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mono: 'LC Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --math: 'About Math', 'STIX Two Math', 'Cambria Math', 'LC Serif', serif;
  --display: var(--song);
  --pad: clamp(1.25rem, 4.2vw, 4.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  /* Keep in sync with SCATTER in js/about.js. */
  --seq-scatter: 1100ms;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  /* A single fixed viewport, not a scrolling document. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
html[lang="en"] .page-about { --display: var(--serif-en); }
/* The root keeps the page's black, so fading the body never shows white. */
html { background: #050403; }
.page-about { transition: opacity 0.45s ease; }
.page-about.is-leaving { opacity: 0; }
.page-about ::selection { background: var(--gold); color: #140f08; }
.page-about a:focus-visible,
.page-about button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* ----- Field, grain ---------------------------------------------------- */
.ab-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* No WebGL (or a lost context): the light still sits behind the words. */
.ab-nogl .ab-field { display: none; }
.ab-nogl .page-about {
  background:
    radial-gradient(ellipse 46% 40% at 50% 48%, rgba(207, 168, 106, 0.13), transparent 70%),
    var(--bg);
}

.ab-grain {
  position: fixed;
  inset: -100%;
  z-index: 40;
  pointer-events: none;
  opacity: 0.07;
  background: url('../assets/cortex/grain.png') repeat;
  animation: ab-grain 0.9s steps(5) infinite;
}
@keyframes ab-grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -4%, 0); }
  60%  { transform: translate3d(-4%, -1%, 0); }
  80%  { transform: translate3d(3%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ----- Nav ------------------------------------------------------------- */
/* Frosted, fading out at the bottom edge, so the field dissolves beneath
   the nav instead of being cut by a bar. */
.page-about .nav {
  padding: 1.3rem var(--pad);
  z-index: 30;
}
.page-about .nav::before {
  content: '';
  position: absolute;
  inset: 0 0 -1.6rem;
  z-index: -1;
  background: linear-gradient(rgba(5, 4, 3, 0.8), rgba(5, 4, 3, 0.3) 70%, rgba(5, 4, 3, 0));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  pointer-events: none;
}
.page-about .brand {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
}
.page-about a.brand:hover { color: var(--gold); }
.page-about .lang-toggle {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-2);
}
.page-about .lang-toggle:hover { color: var(--gold); }
.ab-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ab-mark svg { color: var(--gold); }

/* The chrome arrives on its own, after the field has started to fade in;
   plain CSS, so it never depends on the script. */
.page-about .nav { animation: ab-drop 1.4s var(--ease-out) 0.2s both; }
.seq-hud { animation: ab-fade 1.6s ease 0.6s both; }
.page-about .foot { animation: ab-fade 1.6s ease 0.8s both; }
@keyframes ab-drop { from { opacity: 0; transform: translate3d(0, -10px, 0); } }
@keyframes ab-fade { from { opacity: 0; } }

/* ----- Stage ------------------------------------------------------------ */
.about {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-areas: "stage";
  place-items: center;
  padding: 6.5rem var(--pad) 8.5rem;
}
.seq,
.products {
  grid-area: stage;
  width: 100%;
}
.seq {
  display: grid;
  place-items: center;
}
/* The stage keeps one height so the optical centre never moves between a
   one-line step and a three-line one. */
.seq-stage {
  width: min(1180px, 100%);
  min-height: 52vh;
  display: grid;
  place-items: center;
}

/* ----- A line of the manifesto ------------------------------------------ */
.seq-step {
  max-width: 100%;
  text-align: center;
}
.seq-num {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 clamp(1.4rem, 3.6vh, 2.6rem);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.42em;
  color: var(--gold);
}
.seq-num b {
  font-weight: 400;
  /* The tracking trails the last digit; pull it back so the pair centres. */
  margin-right: -0.42em;
  opacity: 0;
  transition: opacity 0.8s ease 0.35s;
}
.seq-num i {
  display: block;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  transform: scaleX(0);
  transition: transform 1s var(--ease-out) 0.15s;
}
.seq-num i:first-child { transform-origin: right center; }
.seq-num i:last-child { transform-origin: left center; }
.seq-step.is-in .seq-num b { opacity: 1; }
.seq-step.is-in .seq-num i { transform: none; }
.seq-step.is-scatter .seq-num {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.seq-title {
  margin: 0 0 clamp(1.3rem, 3.4vh, 2.4rem);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 7.4rem);
  line-height: 1.06;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-wrap: balance;
}
html[lang="en"] .seq-title {
  font-weight: 400;
  font-size: clamp(2.6rem, 6.2vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
}
.seq-body {
  max-width: 31em;
  margin: 0 auto;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.08rem, 1.85vw, 1.78rem);
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-wrap: balance;
}
html[lang="en"] .seq-body {
  max-width: 25em;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.25vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: 0;
}
.seq-body strong {
  font-weight: inherit;
  color: var(--gold);
}
html[lang="en"] .seq-body strong { font-style: italic; }

/* A line without a heading carries itself: set larger, in full ink. */
.seq-step--solo .seq-body {
  max-width: 17em;
  font-size: clamp(1.55rem, 3.5vw, 3.5rem);
  line-height: 1.55;
  color: var(--ink);
}
html[lang="en"] .seq-step--solo .seq-body {
  max-width: 17em;
  font-size: clamp(1.8rem, 3.9vw, 3.9rem);
  line-height: 1.12;
}
/* The pivot is the question the whole page turns on. */
.seq-step--pivot .seq-body {
  max-width: 9.5em;
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 6.2rem);
  line-height: 1.24;
  letter-spacing: 0.03em;
  color: var(--ink);
}
html[lang="en"] .seq-step--pivot .seq-body {
  max-width: 12em;
  font-weight: 400;
  font-size: clamp(2.3rem, 6vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
}

/* ----- Characters --------------------------------------------------------
   about.js splits each line into one .seq-ch per character (a Latin word
   stays glued in a .seq-wd), so every character can condense out of the
   field on its own and later blow away with it. */
.seq-ch {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.34em, 0);
  transition:
    opacity 0.9s var(--ease-out) var(--d, 0ms),
    transform 1.2s var(--ease-out) var(--d, 0ms),
    filter 1s var(--ease-out) var(--d, 0ms);
}
.seq-wd {
  display: inline-block;
  white-space: nowrap;
}
/* Chinese: a clause is one box; it wraps inside only when it cannot fit a
   line, so lines break between clauses first. */
.seq-clause {
  display: inline-block;
  text-wrap: balance;
}
html[lang="zh-CN"] .seq-body strong {
  display: inline-block;
  white-space: nowrap;
}
.seq-step.is-in .seq-ch {
  opacity: 1;
  transform: none;
}
/* Headings and the pivot are cast in bone: a little light from above. */
.seq-title .seq-ch,
.seq-step--pivot .seq-body > .seq-ch,
.seq-step--pivot .seq-body > .seq-wd > .seq-ch {
  background-image: linear-gradient(180deg, #fbf6ec 18%, #d6cab4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Gold phrases keep one long gradient across their characters, so a phrase
   reads as one bar of metal even though its glyphs move independently. */
.seq-body strong .seq-ch {
  background-image: linear-gradient(100deg, #9c7438 0%, #e9c88c 30%, #f6e2b8 46%, #cfa86a 62%, #8f6b35 100%);
  background-size: calc(var(--n, 1) * 100%) 100%;
  background-position: calc(var(--i, 0) / max(var(--n, 1) - 1, 1) * 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Punctuation that follows a gold phrase rides on its last word, unlit. */
.seq-body strong .seq-ch--plain {
  font-style: normal;
  background-image: none;
  color: var(--ink-2);
}
.seq-step--solo .seq-body strong .seq-ch--plain { color: var(--ink); }
.seq-step--pivot .seq-body strong .seq-ch--plain {
  background-image: linear-gradient(180deg, #fbf6ec 18%, #d6cab4 100%);
  color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .seq-ch { filter: blur(10px); }
  .seq-step.is-in .seq-ch { filter: blur(0); }
}

/* Leaving: each character takes its own drift (--dx, --dy, --rot) after
   its own delay (--x), the gust sweeping through the line. */
.seq-step.is-scatter .seq-ch {
  animation: seq-leaf var(--seq-scatter) cubic-bezier(0.36, 0.03, 0.7, 0.96) forwards;
  animation-delay: var(--x, 0ms);
}
@keyframes seq-leaf {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: blur(0);
  }
  22% {
    /* the small lift a leaf catches before it lets go */
    opacity: 0.92;
    transform: translate3d(calc(var(--dx) * 0.16), calc(var(--dy) * -0.09), 0)
               rotate(calc(var(--rot) * 0.2)) scale(1.03);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)) scale(0.8);
    filter: blur(5px);
  }
}

/* ----- HUD: margin formula, progress, replay ----------------------------- */
.seq-hud {
  position: fixed;
  left: var(--pad);
  right: var(--pad);
  bottom: 3.6rem;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
}
.seq-formula {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin: 0;
  font: 400 1rem/1 var(--math);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1s ease, transform 1s var(--ease-out);
}
.seq-formula.is-on {
  opacity: 1;
  transform: none;
}
.seq-formula i { font-style: italic; }
.seq-dots {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 0.9rem;
  transition: opacity 0.6s ease;
}
.seq-seg {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink-4);
  transition: color 0.5s ease;
}
.seq-seg i {
  position: relative;
  display: block;
  width: clamp(26px, 3.4vw, 48px);
  height: 1px;
  overflow: hidden;
  background: var(--ink-4);
}
.seq-seg u {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.seq-seg.is-past { color: var(--ink-3); }
.seq-seg.is-past u { transform: none; background: var(--ink-3); }
.seq-seg.is-current { color: var(--gold); }
.seq-replay {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.24em;
  color: var(--ink-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  transition: opacity 0.8s ease 0.6s, visibility 0s linear 1.4s, color 0.25s ease;
}
.seq-replay__icon { transition: transform 0.6s var(--ease-out); }
.seq-replay:hover { color: var(--gold); }
.seq-replay:hover .seq-replay__icon { transform: rotate(-200deg); }
body.seq-done .seq-replay {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease 2.9s, visibility 0s, color 0.25s ease;
}
body.seq-done.seq-quick .seq-replay {
  transition: opacity 1s ease 0.9s, visibility 0s, color 0.25s ease;
}
body.seq-done .seq-dots {
  opacity: 0;
  visibility: hidden;
}

/* ----- Products ---------------------------------------------------------- */
.products {
  max-width: 1180px;
  max-height: 100%;
  margin: 0 auto;
  overflow-y: auto;
  scrollbar-width: none;
}
.products::-webkit-scrollbar { display: none; }
/* Arriving at /about#products focuses the panel; its links carry the focus
   ring, the panel does not need one around the whole stage. */
.products:focus { outline: none; }
.products[hidden] { display: none; }
/* When the products need scrolling (phones), the edge they scroll past fades
   instead of cutting through a line. */
.products.is-clip-bottom {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(#000 calc(100% - 4rem), transparent);
}
.products.is-clip-top {
  -webkit-mask-image: linear-gradient(transparent, #000 3rem);
  mask-image: linear-gradient(transparent, #000 3rem);
}
.products.is-clip-top.is-clip-bottom {
  -webkit-mask-image: linear-gradient(transparent, #000 3rem, #000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(transparent, #000 3rem, #000 calc(100% - 4rem), transparent);
}

.pr-head {
  display: flex;
  align-items: flex-end;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.25rem, 4vh, 3rem);
}
.pr-title {
  flex: none;
  max-width: 100%;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
html[lang="en"] .pr-title {
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3.3rem);
  letter-spacing: -0.01em;
}
.pr-rule {
  flex: 1;
  height: 1px;
  margin-bottom: 0.85rem;
  background: var(--line);
  transform-origin: left center;
}

.pr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 6vw, 6.5rem);
  align-items: center;
}
.pr-index {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.3em;
  color: var(--gold);
}

/* The engine: its name inside its own mark, a circle that closes — the
   loop of the third line, which could not, now does. The field draws the
   circle on the box's edge. */
.pr-origin {
  position: relative;
  width: min(100%, 31rem, 58vh);
  aspect-ratio: 1;
  justify-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 11%;
  text-align: center;
}
.pr-emblem {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Without the field, the mark is drawn in CSS. */
.ab-nogl .pr-emblem::before,
body.seq-static .pr-emblem::before {
  content: '';
  position: absolute;
  /* Inset far enough that its glow stays inside the scroller's clip. */
  inset: 6%;
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(207, 168, 106, 0.2), inset 0 0 50px rgba(207, 168, 106, 0.08);
}
.pr-origin__label {
  position: relative;
  margin: 0 0 1rem;
  line-height: 1.4;
}
.pr-origin__label .pr-index { margin-right: -0.3em; }
.pr-origin__title {
  position: relative;
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 2.5vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.pr-nb { white-space: nowrap; }
html[lang="en"] .pr-origin__title {
  font-weight: 400;
  font-size: clamp(1.8rem, 2.9vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.pr-origin__body {
  position: relative;
  max-width: 15em;
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(0.98rem, 1.2vw, 1.16rem);
  line-height: 1.9;
  color: var(--ink-2);
  text-wrap: balance;
}
html[lang="en"] .pr-origin__body {
  max-width: 17em;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.4vw, 1.36rem);
  line-height: 1.36;
}

/* The chain: a hairline spine, a node per product, and the current the
   field runs down it. */
.pr-chain {
  position: relative;
  margin-left: 6px;
  padding-left: clamp(1.75rem, 3vw, 2.75rem);
}
.pr-chain::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 1.5rem;
  width: 1px;
  background: linear-gradient(var(--line), var(--line) 80%, transparent);
  transform-origin: top center;
}
.pr-yield { position: relative; }
.pr-yield + .pr-yield { margin-top: clamp(1.6rem, 4.6vh, 3.2rem); }
.pr-yield__label {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
html[lang="en"] .pr-yield__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pr-link {
  position: relative;
  display: block;
  padding: 0.15rem 0 0.4rem;
}
.pr-node {
  position: absolute;
  left: calc(-1 * clamp(1.75rem, 3vw, 2.75rem) - 4.5px);
  top: 1.4rem;
  width: 10px;
  height: 10px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--bg);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.pr-link:hover .pr-node,
.pr-link:focus-visible .pr-node {
  background: var(--gold);
  box-shadow: 0 0 18px rgba(240, 210, 156, 0.7);
}
.pr-link__name {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--serif-en);
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.35s ease, transform 0.6s var(--ease-out);
}
/* "体感" sits in the same line as the Latin name. */
.pr-link__name > span:first-child { font-family: var(--serif-en), var(--song); }
.pr-link__name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 3.6rem;
  bottom: -0.1rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(207, 168, 106, 0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-out);
}
.pr-arrow {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--ink-4);
  border-radius: 50%;
  color: var(--ink-2);
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease, transform 0.6s var(--ease-out);
}
.pr-arrow svg { width: 46%; height: 46%; }
.pr-link:hover .pr-link__name,
.pr-link:focus-visible .pr-link__name {
  color: var(--gold-hi);
  transform: translateX(0.35rem);
}
.pr-link:hover .pr-link__name::after,
.pr-link:focus-visible .pr-link__name::after { transform: none; }
.pr-link:hover .pr-arrow,
.pr-link:focus-visible .pr-arrow {
  color: #140f08;
  border-color: var(--gold);
  background: var(--gold);
  transform: rotate(45deg);
}
.pr-link__desc {
  display: block;
  max-width: 34em;
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-size: clamp(0.88rem, 0.98vw, 0.98rem);
  line-height: 1.9;
  color: var(--ink-3);
  text-wrap: pretty;
  transition: color 0.35s ease;
}
.pr-link:hover .pr-link__desc,
.pr-link:focus-visible .pr-link__desc { color: var(--ink-2); }
html[lang="zh-CN"] [data-phrase] { word-break: keep-all; }
.pr-link__cta {
  display: inline-block;
  margin-top: 0.85rem;
  font: 400 0.72rem/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--gold);
}

/* Entrance: everything waits for .is-in, then arrives in reading order. */
.products [data-in] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 1.1s var(--ease-out) var(--d, 0ms), transform 1.3s var(--ease-out) var(--d, 0ms);
}
.products.is-in [data-in] {
  opacity: 1;
  transform: none;
}
.products .pr-rule {
  transform: scaleX(0);
  transition: transform 1.6s var(--ease-io) 0.6s;
}
.products.is-in .pr-rule { transform: none; }
.products .pr-chain::before {
  transform: scaleY(0);
  transition: transform 1.4s var(--ease-io) 1.9s;
}
.products.is-in .pr-chain::before { transform: none; }
.products.is-quick [data-in] { transition-delay: calc(var(--d, 0ms) * 0.3); }
.products.is-quick .pr-rule { transition-delay: 0.2s; }
.products.is-quick .pr-chain::before { transition-delay: 0.5s; }


/* ----- Footer ----------------------------------------------------------- */
.page-about .foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem 1.4rem;
  padding: 1.1rem 1.5rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  border-top: none;
  font: 400 0.7rem/1.5 var(--sans);
  letter-spacing: 0.06em;
  color: var(--ink-4);
}
/* The field dims towards the bottom edge, so the progress line and the
   filing numbers never sit on a bright figure. */
.page-about .foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9.5rem;
  z-index: -1;
  background: linear-gradient(rgba(5, 4, 3, 0), rgba(5, 4, 3, 0.72) 55%, rgba(5, 4, 3, 0.9));
  pointer-events: none;
}
/* Beats the shared `.foot .beian` rule on specificity, whatever the order. */
.page-about .foot .beian {
  margin-top: 0;
  font-size: inherit;
  color: inherit;
}
.page-about .foot .beian a:hover { color: var(--ink-2); }

/* ----- Phones ----------------------------------------------------------- */
@media (max-width: 760px) {
  .page-about .nav { padding: 1rem 1.25rem; }
  .ab-mark span { display: none; }
  .ab-mark svg { width: 18px; height: 18px; }
  .about { padding: 5.25rem 1.4rem 8.25rem; }
  .seq-stage { min-height: 56vh; }
  .seq-num { gap: 0.9rem; }
  .seq-num i { width: 24px; }
  .seq-body { line-height: 1.8; }
  .seq-step--solo .seq-body { line-height: 1.6; }
  .seq-hud {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 3.9rem;
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 0.9rem;
  }
  .seq-formula {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    font-size: 0.85rem;
  }
  .seq-dots,
  .seq-replay {
    grid-column: 1;
    grid-row: 2;
  }
  .seq-dots { gap: 0.6rem; }
  .seq-seg b { display: none; }
  body.seq-done .seq-formula { display: none; }
  .page-about .foot { gap: 0.15rem 1rem; padding-top: 0.8rem; font-size: 0.62rem; }
  body.seq-done .about { padding-bottom: 7rem; }

  .products { padding-bottom: 1.5rem; }
  .pr-head { margin-bottom: 1.25rem; }
  .pr-title { white-space: normal; }
  .pr-rule { display: none; }
  .pr-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .pr-origin { width: min(100%, 21rem); padding: 0 12%; }
  .pr-origin__label { margin-bottom: 0.7rem; }
  .pr-origin__title { margin-bottom: 0.7rem; font-size: 1.45rem; }
  html[lang="en"] .pr-origin__title { font-size: 1.7rem; }
  .pr-origin__body { font-size: 0.95rem; line-height: 1.8; }
  html[lang="en"] .pr-origin__body { font-size: 1.05rem; }
  .pr-chain { padding-left: 1.6rem; }
  .pr-node { left: calc(-1.6rem - 4.5px); }
  .pr-link__name { font-size: 2.1rem; }
  .pr-arrow { width: 2.2rem; height: 2.2rem; }
}

/* Short landscape screens (a phone on its side): everything tightens, the
   products sit at the top of their scroller and the engine's circle shrinks
   to fit the height. */
@media (max-height: 560px) and (orientation: landscape) {
  .about { padding-top: 4.25rem; padding-bottom: 5.25rem; }
  body.seq-done .about { padding-top: 3.75rem; }
  .seq-hud { bottom: 2.6rem; }
  .seq-title { font-size: clamp(2rem, 9vh, 3.5rem); }
  .seq-step--pivot .seq-body { font-size: clamp(1.8rem, 9vh, 3.4rem); }
  .seq-step--solo .seq-body { font-size: clamp(1.3rem, 6vh, 2.2rem); }
  body.seq-done .seq-formula { display: none; }
  .pr-head { margin-bottom: 0.6rem; }
  .pr-title { font-size: 1.35rem; }
  .pr-rule { margin-bottom: 0.45rem; }
  .pr-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: start;
    gap: 2rem;
  }
  /* No room for the name inside the circle: the mark sits beside it. */
  .pr-origin {
    width: 100%;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: center;
    padding: 0;
    text-align: left;
  }
  .pr-emblem {
    position: relative;
    inset: auto;
    width: 4.75rem;
    aspect-ratio: 1;
    grid-row: 1 / span 3;
  }
  .pr-origin__label { margin-bottom: 0.3rem; }
  .pr-origin__title { margin-bottom: 0.35rem; font-size: 1.15rem; }
  html[lang="en"] .pr-origin__title { font-size: 1.3rem; }
  .pr-origin__body { max-width: none; font-size: 0.8rem; line-height: 1.7; }
  html[lang="en"] .pr-origin__body { font-size: 0.88rem; }
  .pr-yield__label { margin-bottom: 0.3rem; }
  .pr-yield + .pr-yield { margin-top: 1.1rem; }
  .pr-link__name { font-size: 1.65rem; }
  .pr-arrow { width: 2rem; height: 2rem; }
  .pr-node { top: 1.05rem; }
  .pr-link__desc { margin-top: 0.4rem; font-size: 0.78rem; line-height: 1.7; }
  .pr-link__cta { margin-top: 0.45rem; }
}

/* ----- Reduced motion: the whole argument at once, scrollable ------------- */
@media (prefers-reduced-motion: reduce) {
  .ab-grain,
  .page-about .nav,
  .seq-hud,
  .page-about .foot { animation: none; }
  .seq-ch { transition: none; filter: none; }
  .seq-step.is-scatter .seq-ch { animation: none; opacity: 0; }
}
body.seq-static,
body.seq-static.page-about {
  height: auto;
  overflow: auto;
}
body.seq-static .ab-field { display: none; }
/* place-items is reset too: browsers now honour it in block layout, where
   it would shrink every line to its own width and centre it. */
body.seq-static .about,
body.seq-static .seq,
body.seq-static .seq-stage { place-items: normal; }
body.seq-static .about {
  position: static;
  display: block;
  max-width: 980px;
  margin: 0 auto;
  padding: 9rem var(--pad) 5rem;
}
body.seq-static .seq-stage {
  min-height: 0;
  display: block;
  width: 100%;
}
body.seq-static .seq-step {
  margin-bottom: 5.5rem;
  text-align: left;
}
body.seq-static .seq-num { margin-bottom: 1.25rem; }
body.seq-static .seq-num i:first-child { display: none; }
body.seq-static .seq-body { margin: 0; }
body.seq-static .seq-ch {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
body.seq-static .products {
  max-height: none;
  overflow: visible;
  margin-top: 2rem;
  padding-top: 4rem;
  border-top: 1px solid var(--line);
}
body.seq-static .products [data-in],
body.seq-static .products .pr-rule,
body.seq-static .products .pr-chain::before {
  opacity: 1;
  transform: none;
  transition: none;
}
body.seq-static .seq-hud { display: none; }
body.seq-static.page-about .foot { position: static; }
body.seq-static .foot::before { display: none; }