/* HtPi — the page kit for the redesigned pages, on both doors (Sep 2026).

   Shared by the redesigned pages: the header that surfaces from a dark hero
   onto the mist, and a small set of primitives (wrap, eyebrow, headings,
   prose, buttons). Then one section per page for its own device — the pages
   share the palette and the type, never the same trick (owner: "don't make
   everything look exactly the same"). Colours are the palette tokens
   (css/tokens/palette.css), so nothing here is beige. pages.js adds the
   behaviour; every page reads fully without it. class.htpi.me's Home uses the
   same kit (its section is last), so the two doors read as one house. */

/* ── The header surfaces ────────────────────────────────────────────────────
   Over a dark hero the header is the translucent deep bar (hdr-over); once
   the hero has scrolled under it, pages.js / confluence.js add .is-surfaced
   and it becomes the mist bar with ink text. */
.brand-lockup .glyph-mist { display: none; }
.site-header { transition: background-color .35s ease, border-color .35s ease; }
.site-header.is-surfaced { background: rgba(var(--paper-rgb), .86); border-color: rgba(var(--ink-rgb), .08); }
.site-header.is-surfaced .glyph-deep { display: none; }
.site-header.is-surfaced .glyph-mist { display: block; }
.site-header.is-surfaced .brand-word,
.site-header.is-surfaced .nav .navlink { color: var(--ink-soft); }
.site-header.is-surfaced .nav .navlink:hover { color: var(--accent); }
.site-header.is-surfaced .navlink.is-active { color: var(--accent); }
.site-header.is-surfaced .nav-sep { background: rgba(var(--ink-rgb), .14); }
.site-header.is-surfaced .lang-btn { color: var(--ink-soft); border-color: rgba(var(--ink-rgb), .22); }
.site-header.is-surfaced .cta { background: var(--accent) !important; color: var(--paper) !important; }
.site-header.is-surfaced .burger { color: var(--ink); }
@media (max-width: 640px) {
  .site-header.is-surfaced { background: var(--paper); }
  .hdr-over { background: rgba(var(--deep-rgb), .9); }
}

/* ── Primitives ─────────────────────────────────────────────────────────── */
.pg { background: var(--paper); color: var(--ink); }
.pg p { margin: 0; }
.pg-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.pg-sec { padding: clamp(80px, 9vw, 128px) 0; }
.pg-band { background: var(--sand); }
.pg-deep { background: var(--deep-ground); color: var(--on-dark); }
.pg-eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.pg-eyebrow .lang-zh { letter-spacing: .3em; }
.pg-deep .pg-eyebrow { color: var(--bronze); }
.pg-h1 { margin: 22px 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.pg-h2 { margin: 20px 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 4vw, 50px);
  line-height: 1.1; letter-spacing: -.016em; text-wrap: balance; }
.pg-h1 .lang-zh, .pg-h2 .lang-zh { font-weight: 300; letter-spacing: .02em; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
/* The ch-based measures above are set for Latin; Chinese breaks at its own
   punctuation (keep-all), so give it room to reach the comma. */
html[data-lang="zh"] .pg-h1 { max-width: 20em !important; }
.pg-lede { margin-top: 24px !important; font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(18px, 2.2vw, 24px); line-height: 1.5; color: var(--ink-mid); }
.pg-lede .lang-zh { font-style: normal; font-size: .88em; line-height: 1.8; }
.pg-deep .pg-lede { color: rgba(var(--on-dark-rgb), .78); }
.pg-prose p { margin: 0 0 22px; font-family: var(--font-display); font-size: 19px; line-height: 1.75; color: var(--prose-ink); }
.pg-prose p:last-child { margin-bottom: 0; }
.pg-prose .lang-zh { font-size: 17px; line-height: 1.95; }

.pg-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease; }
.pg-btn:active { transform: translateY(1px); }
.pg-btn-garnet { background: var(--accent); color: var(--paper); }
.pg-btn-garnet:hover { background: var(--accent-deep); }
.pg-btn-bronze { background: var(--bronze); color: var(--deep-ground); }
.pg-btn-bronze:hover { background: #D9B574; }
.pg-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.pg-btn-ghost:hover { border-color: var(--ink); }
.pg-deep .pg-btn-ghost { color: var(--on-dark); border-color: rgba(var(--on-dark-rgb), .4); }
.pg-deep .pg-btn-ghost:hover { border-color: var(--on-dark); }
.pg-link { display: inline-flex; gap: 6px; padding-bottom: 3px; font-size: 14px; font-weight: 600; color: var(--accent);
  border-bottom: 1px solid rgba(123, 44, 36, .28); transition: border-color .2s ease; }
.pg-link:hover { border-bottom-color: var(--accent); }
.pg-btn:focus-visible, .pg-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 860px) {
  .pg-wrap { padding: 0 20px; }
  .pg-sec { padding: 76px 0; }
  .pg-prose p { font-size: 17.5px; }
}

/* ══ About ══════════════════════════════════════════════════════════════════
   Two devices, both about the name: one living mark, named where it stands
   (the opening scene); and the idea — Σ against ∏ — drawn as three fields
   laid end to end (a longer line) or multiplied into a solid (a space). */

/* The opening scene. ONE mark, not two: the stage (the <htpi-mark-field>, its
   fade and the captions) is sticky, and the text scrolls over it — first the
   hero line, then the paragraphs that name the mark, with the mark still
   beside them. The sticky stage and the text share one height, --stage. */
.ab-scene { --stage: 100vh; position: relative; background: var(--deep-ground); color: var(--on-dark); }
/* no overflow clip: on a phone the captions hang just below the stage */
.ab-stage { position: sticky; top: 0; height: var(--stage); }
.ab-stage htpi-mark-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-still { display: none; }
/* No JavaScript: a still mark, placed about where the field would form it. */
htpi-mark-field:not(:defined) .ab-still { display: block; position: absolute; left: 60%; top: 50%; width: 34%; height: auto; transform: translateY(-50%); }
.ab-still path { fill: var(--on-dark); opacity: .88; }
.ab-still .ab-still-pi { fill: var(--bronze); }
.ab-stage-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--deep-rgb), .45) 0%, rgba(var(--deep-rgb), 0) 26%, rgba(var(--deep-rgb), 0) 76%, rgba(var(--deep-rgb), .55) 100%); }
/* Once the name is being read, the water behind the text settles a little. */
.ab-stage-fade::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease;
  background: linear-gradient(90deg, rgba(var(--deep-rgb), .74) 0%, rgba(var(--deep-rgb), .56) 38%, rgba(var(--deep-rgb), 0) 60%); }
.ab-scene.is-named .ab-stage-fade::after { opacity: 1; }

/* pointer-events: none so the cursor reaches the field behind the text;
   the words themselves stay selectable. */
.ab-scene-text { position: relative; margin-top: calc(-1 * var(--stage)); pointer-events: none; }
.ab-scene-text p, .ab-scene-text h1, .ab-scene-text h2 { pointer-events: auto; }
.ab-intro { min-height: var(--stage); display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 150px; padding-bottom: clamp(72px, 10vw, 120px); }
.ab-intro .pg-h1 { max-width: 16ch; }
.ab-intro .pg-lede { max-width: 34ch; }
/* 繁 breaks only at its punctuation (see .pg-h1): let it reach the comma, but
   never into the mark — two lines, 一個名字， / 源於一道數學運算。 (Wide
   layout only; on a phone the mark sits below the text, not beside it.) */
@media (min-width: 760px) {
  html[data-lang="zh"] .ab-intro .pg-h1 { max-width: calc(60vw - max(32px, 50vw - 558px) - 24px) !important; }
}
/* The field forms the mark in the right ~40% (x ≥ 60% of the width): the
   text keeps to the left of it — the wrap's left edge is max(32px, 50vw − 558px). */
.ab-named { padding-top: 6vh; padding-bottom: 24vh; }
.ab-named > * { max-width: min(620px, calc(60vw - max(32px, 50vw - 558px) - 56px)); }
.ab-named .pg-prose { margin-top: 26px; }
.ab-named .pg-prose p { color: rgba(var(--on-dark-rgb), .84); }
.ab-series { margin-top: 30px !important; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: rgba(var(--on-dark-rgb), .5); }

/* Captions hang under the parts of the living mark — pages.js places them from
   the field's own layout (el.sim.parts) — and show only while it holds its
   form for the reader. The part being read (or hovered) is lit. */
.ab-caps { position: absolute; inset: 0; pointer-events: none; }
.ab-cap { position: absolute; left: 0; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 150px; padding: 0; border: 0; background: none; color: inherit; text-align: center; cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.ab-cap::before { content: ""; width: 1px; height: 16px; background: rgba(var(--on-dark-rgb), .3); transition: background .3s ease; }
.ab-cap b { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1; color: var(--on-dark); }
.ab-cap[data-part="pi"] b { color: var(--bronze); }
.ab-cap span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--on-dark-rgb), .6); line-height: 1.5; }
.ab-cap span .lang-zh { letter-spacing: .16em; }
.ab-scene.is-named.is-placed htpi-mark-field[formed] ~ .ab-caps .ab-cap { opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .6s ease .15s, visibility 0s; }
.ab-scene.is-named.is-placed htpi-mark-field[formed] ~ .ab-caps .ab-cap.is-off { opacity: .34; }
.ab-cap.is-on::before { background: var(--bronze); }
.ab-cap:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

/* The idea: Σ against ∏ */
.ab-idea-head { max-width: 900px; }
.ab-idea-head .pg-h2 { max-width: 26em; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.18; }
.ab-idea-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px clamp(48px, 7vw, 96px); margin-top: clamp(48px, 6vw, 72px); align-items: start; }
.ab-fig { position: sticky; top: 108px; margin: 0; padding: 26px 26px 22px; background: var(--paper); border: 1px solid var(--hairline); }
.ab-fig-toggle { display: none; gap: 6px; }
.js-pages .ab-fig-toggle { display: inline-flex; }
.ab-fig-toggle button { min-width: 44px; padding: 6px 12px; border: 1px solid var(--hairline); background: transparent; cursor: pointer;
  font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--ink-mid); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.ab-fig-toggle button:hover { border-color: var(--ink-mid); }
.ab-fig-toggle button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ab-fig-toggle button[data-state="prod"][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.ab-fig-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ab-fig svg { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.ab-face { fill: var(--confluence); stroke: none; }
.ab-face-top { fill-opacity: .10; }
.ab-face-left { fill-opacity: .20; }
.ab-face-right { fill-opacity: .14; }
.ab-back { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.ab-edge { stroke-width: 3.2; stroke-linecap: round; }
.ab-edge-f { stroke: var(--ink); }
.ab-edge-d { stroke: var(--confluence); }
.ab-edge-g { stroke: var(--bronze); }
.ab-joint { fill: var(--paper); stroke: var(--ink-mid); stroke-width: 1.2; }
.ab-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px !important; font-size: 13px; color: var(--ink-soft); }
.ab-key i { display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: middle; border-radius: 2px; }
.ab-key .k-f { background: var(--ink); }
.ab-key .k-d { background: var(--confluence); }
.ab-key .k-g { background: var(--bronze); }
.ab-fig figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); font-family: var(--font-display);
  font-size: 19px; color: var(--ink); }
.ab-fig figcaption .ab-op { display: inline-block; width: 1.4em; text-align: center; color: var(--muted); }
.ab-fig[data-state="prod"] figcaption .ab-op { color: var(--accent); }
.ab-fig[data-state="sum"] .ab-op-x, .ab-fig[data-state="prod"] .ab-op-plus { display: none; }
/* Far enough apart that the figure is read as Σ first, then turns as the ∏
   note reaches the middle of the screen; the figure stays pinned alongside. */
.ab-steps { display: flex; flex-direction: column; gap: 46vh; padding: 4vh 0 26vh; }
.ab-step { position: relative; padding-left: 70px; }
.ab-step > .ab-step-op { position: absolute; left: 0; top: -.06em; font-family: var(--font-display); font-weight: 300; font-size: 54px; line-height: 1; color: var(--ink-mid); }
.ab-step[data-step="prod"] > .ab-step-op { color: var(--accent); }
.ab-step h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--ink); }
.ab-step p { margin-top: 12px !important; font-family: var(--font-display); font-size: 19px; line-height: 1.7; color: var(--ink-soft); }
.ab-step p .lang-zh { font-size: 17px; line-height: 1.95; }
.js-pages .ab-step { opacity: .38; transition: opacity .4s ease; }
.js-pages .ab-step.is-current { opacity: 1; }

/* The person: ∏Hₜ, lived — rings round the portrait, one per factor */
.ab-life-head { max-width: 820px; }
.ab-role { margin-top: 12px !important; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.ab-life-intro { margin-top: 26px !important; font-family: var(--font-display); font-weight: 300; font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.55; color: var(--ink); }
.ab-life-intro .lang-zh { font-size: .8em; line-height: 1.9; }
.ab-life-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(48px, 7vw, 104px); margin-top: clamp(48px, 6vw, 80px); align-items: start; }
.ab-rings { position: sticky; top: 96px; margin: 0; }
.ab-rings svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; }
.ab-ring { fill: none; stroke: var(--line-strong); stroke-width: 1; transform: rotate(-90deg); transform-origin: 200px 200px; transform-box: view-box;
  transition: stroke .4s ease, stroke-width .4s ease; }
.ab-ring.is-current { stroke: var(--accent); stroke-width: 2; }
.ab-face-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ab-ring-label { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; transition: fill .4s ease, opacity .5s ease; }
.ab-ring-label.is-current { fill: var(--accent); }
/* live (JavaScript, not reduced motion): rings draw as their factor is read */
.js-pages .ab-life.is-live .ab-ring { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.3, .6, .2, 1), stroke .4s ease, stroke-width .4s ease; }
.js-pages .ab-life.is-live .ab-ring.is-drawn { stroke-dashoffset: 0; }
.js-pages .ab-life.is-live .ab-ring-label { opacity: 0; }
.js-pages .ab-life.is-live .ab-ring-label.is-drawn { opacity: 1; }
.ab-product { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 7px; margin-top: 18px;
  font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.ab-product-pi { color: var(--accent); font-size: 26px; }
.ab-product-eq, .ab-product-dot { color: var(--muted); }
.ab-product-f { transition: opacity .4s ease, color .4s ease; }
.js-pages .ab-life.is-live .ab-product-f { opacity: .22; }
.js-pages .ab-life.is-live .ab-product-f.is-drawn { opacity: 1; }
.ab-product-f.is-current { color: var(--accent); }

.ab-factors { display: flex; flex-direction: column; gap: 26vh; margin: 0; padding: 12vh 0 24vh; list-style: none; }
.ab-factor { transition: opacity .45s ease; }
.js-pages .ab-life.is-live .ab-factor { opacity: .3; }
.js-pages .ab-life.is-live .ab-factor.is-past { opacity: .55; }
.js-pages .ab-life.is-live .ab-factor.is-current { opacity: 1; }
.ab-factor-k { display: flex; align-items: baseline; gap: 14px; }
.ab-factor-k b { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--accent); }
.ab-factor-k span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ab-factor-k span .lang-zh { letter-spacing: .24em; }
.ab-factor-v { max-width: 34em; margin-top: 14px !important; font-family: var(--font-display); font-size: 21px; line-height: 1.62; color: var(--prose-ink); }
.ab-factor-v .lang-zh { font-size: 18px; line-height: 1.95; }

.ab-glance { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 24px 0 0; border-top: 1px solid var(--hairline); }
.ab-glance > div { padding: 18px 22px 0 0; }
.ab-glance dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.ab-glance dd { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--prose-ink); }
.ab-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px !important; }
.ab-fields span { padding: 7px 13px; border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-soft); }

/* Public record (deep), on its real time axis */
.ab-rec { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px 64px; align-items: end; }
.ab-rec-photo { margin: 0; position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #061212; }
.ab-rec-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.ab-rec-photo figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 52px 22px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; }
.ab-rec-photo figcaption span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.ab-rec-photo figcaption b { font-family: var(--font-display); font-weight: 300; font-size: 21px; line-height: 1.1; text-align: right; }
.ab-rec-copy { margin-top: 24px !important; max-width: 46ch; font-size: 16px; line-height: 1.85; color: rgba(var(--on-dark-rgb), .66); }
.ab-rec-strip { position: relative; height: 420px; margin: 80px 0 0; padding: 0; list-style: none; }
.ab-rec-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(var(--on-dark-rgb), .28); }
.ab-rec-item { position: absolute; left: calc(var(--x) * 100%); width: 270px; }
.ab-rec-item.is-late { transform: translateX(-100%); }
.ab-rec-item.is-up { bottom: 50%; padding-bottom: 34px; }
.ab-rec-item.is-down { top: 50%; padding-top: 34px; }
.ab-rec-item::before { content: ""; position: absolute; left: 0; width: 1px; height: 34px; background: rgba(201, 160, 92, .55); }
.ab-rec-item.is-late::before { left: auto; right: 0; }
.ab-rec-item.is-up::before { bottom: 0; }
.ab-rec-item.is-down::before { top: 0; }
.ab-rec-item::after { content: ""; position: absolute; left: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--bronze);
  box-shadow: 0 0 0 4px var(--deep-ground); }
.ab-rec-item.is-late::after { left: auto; right: -5px; }
.ab-rec-item.is-up::after { bottom: -5.5px; }
.ab-rec-item.is-down::after { top: -5.5px; }
.ab-rec-item a { display: block; padding: 16px 18px 18px; background: var(--deep-2); border: 1px solid rgba(var(--on-dark-rgb), .12); color: inherit;
  transition: border-color .2s ease, transform .2s ease; }
.ab-rec-item a:hover, .ab-rec-item a:focus-visible { border-color: rgba(201, 160, 92, .7); }
.ab-rec-item a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.ab-rec-item time { font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--bronze); }
.ab-rec-outlet { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: rgba(var(--on-dark-rgb), .5); }
.ab-rec-item h3 { margin: 8px 0 0; font-family: var(--font-display); font-weight: 300; font-size: 19px; line-height: 1.25; color: var(--on-dark); }
.ab-rec-item p { margin-top: 8px !important; font-size: 12.5px; line-height: 1.55; color: rgba(var(--on-dark-rgb), .55); }

/* In short */
.ab-short { text-align: center; }
.ab-short .pg-statement { max-width: 24em; margin: 26px auto 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ab-short .pg-statement .lang-zh { font-size: .86em; line-height: 1.7; letter-spacing: .02em; }
.ab-motto { margin-top: 30px !important; font-family: var(--font-zh); font-weight: 500; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: .14em; color: var(--accent); }
.ab-motto-en { margin-top: 8px !important; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 17px; color: var(--muted); }
.ab-short-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

@media (max-width: 900px) {
  .ab-idea-grid, .ab-life-grid, .ab-rec { grid-template-columns: minmax(0, 1fr); }
  .ab-fig { position: relative; top: auto; }
  .ab-rings { position: relative; top: auto; max-width: 360px; margin: 0 auto; }
  .ab-factors { gap: 36px; padding: 8px 0 0; }
  .js-pages .ab-life.is-live .ab-factor, .js-pages .ab-life.is-live .ab-factor.is-past { opacity: 1; }
  .ab-glance { grid-template-columns: 1fr 1fr; }
  .ab-rec-strip { height: auto; margin-top: 48px; padding-left: 26px; }
  .ab-rec-strip::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .ab-rec-item, .ab-rec-item.is-up, .ab-rec-item.is-down { position: relative; left: auto; top: auto; bottom: auto; width: auto; padding: 0 0 18px; transform: none; }
  .ab-rec-item::before { display: none; }
  .ab-rec-item::after, .ab-rec-item.is-late::after { left: -26px; right: auto; top: 22px; bottom: auto; }
  .ab-steps { gap: 48px; padding-bottom: 0; }
  .js-pages .ab-step { opacity: 1; }
}
/* Phone (the field's own breakpoint, NARROW in logo-mark-field.js): it forms
   the mark along the bottom of the stage, so the stage stops pinning — the
   hero line sits above the mark, the captions under it, and the name follows
   straight on in the same water. */
@media (max-width: 759.98px) {
  .ab-scene { --stage: max(660px, 92vh); }
  .ab-stage { position: relative; }
  /* room under the mark for its captions; the field then fades into the
     ground the name is written on, with no edge between them */
  .ab-stage htpi-mark-field { --mark-foot: 96px; }
  htpi-mark-field:not(:defined) .ab-still { left: 7%; top: auto; bottom: 96px; width: 86%; transform: none; }
  .ab-stage-fade { background: linear-gradient(180deg, rgba(var(--deep-rgb), .5) 0%, rgba(var(--deep-rgb), 0) 30%, rgba(var(--deep-rgb), 0) calc(100% - 110px), var(--deep-ground) 100%); }
  .ab-stage-fade::after { display: none; }
  .ab-intro { justify-content: flex-start; padding-top: 118px; padding-bottom: 0; }
  .ab-intro .pg-lede { max-width: none; }
  /* the long phrase — 源於一道數學運算。, nine characters — on one line,
     never with its 。 left alone on the next */
  html[data-lang="zh"] .ab-intro .pg-h1 { font-size: min(38px, calc((100vw - 40px) / 9.4)); }
  .ab-named { padding-top: 40px; padding-bottom: 88px; }
  .ab-named > * { max-width: none; }
  .ab-cap { width: 112px; }
  .ab-cap b { font-size: 19px; }
}
@media (max-width: 560px) {
  .ab-glance { grid-template-columns: 1fr; }
  .ab-step { padding-left: 54px; }
  .ab-step > .ab-step-op { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-cap, .js-pages .ab-step { transition: none !important; }
}

/* ══ Writing — the weave ════════════════════════════════════════════════════
   Fields are the warp (vertical threads, one column each); essays are rows
   knotted to the fields they draw on; a compound essay ties its two knots
   with a thread of its own. The same columns head the list as filters. */

.wr-head { padding-top: clamp(64px, 8vw, 104px); padding-bottom: 36px; }
.wr-head .pg-lede { max-width: 30ch; }

.wr-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 34px 0 38px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.wr-lead-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.wr-lead-flag { color: var(--accent); }
.wr-lead-title { max-width: 22em; font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.12; letter-spacing: -.015em; color: var(--ink); transition: color .2s ease; text-wrap: balance; }
.wr-lead-title .lang-zh { font-weight: 400; line-height: 1.35; letter-spacing: .01em; }
.wr-lead-excerpt { max-width: 60ch; font-size: 16px; line-height: 1.7; color: var(--ink-mid); }
.wr-lead-read { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); }
.wr-lead:hover .wr-lead-title { color: var(--accent); }

.wr-weave { --col: 50px; --gut: 32px; margin-top: 64px; padding-bottom: 24px; }
.wr-loom-head, .wr-row-link { display: grid; grid-template-columns: 96px minmax(0, 1fr) calc(var(--n) * var(--col)) 84px;
  column-gap: var(--gut); }
.wr-loom-head { align-items: end; padding-bottom: 14px; }
.wr-loom-note { grid-column: 1 / 3; max-width: 36ch; padding-bottom: 6px; font-family: var(--font-display); font-style: italic;
  font-size: 16px; line-height: 1.5; color: var(--ink-mid); }
.wr-threads { grid-column: 3 / 5; display: grid; grid-template-columns: calc(var(--n) * var(--col)) 84px; column-gap: var(--gut); align-items: end; }
.wr-thread-cols { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(var(--n), var(--col)); }
.wr-thread-all { grid-column: 2; grid-row: 1; }
.wr-thread { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 10px; border: 0; background: none;
  color: var(--ink-soft); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  cursor: default; transition: color .2s ease; }
.js-pages .wr-thread { cursor: pointer; }
.wr-thread-name { writing-mode: vertical-rl; white-space: nowrap; }
.wr-thread-name .lang-zh { font-size: 13px; letter-spacing: .3em; text-orientation: upright; }
.wr-thread-n { font-size: 10px; letter-spacing: 0; color: var(--faint); }
.wr-thread::after { content: ""; width: 1px; height: 14px; background: var(--line-strong); transition: background .2s ease, width .2s ease; }
.wr-thread-all .wr-thread-name { writing-mode: horizontal-tb; }
.wr-thread-all::after { display: none; }
.wr-thread:hover, .wr-thread.is-lit { color: var(--ink); }
.wr-thread[aria-pressed="true"] { color: var(--accent); }
.wr-thread[aria-pressed="true"]::after { width: 2px; background: var(--accent); }
.wr-thread-all[aria-pressed="true"] { color: var(--ink); }
.wr-thread-all[aria-pressed="true"] .wr-thread-name { border-bottom: 1px solid var(--ink); }
.wr-thread:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wr-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hairline); }
.wr-row { border-top: 1px solid var(--hairline); }
.wr-row.is-out { display: none; }
.wr-row-link { align-items: start; padding: 28px 0 30px; }
.wr-date { padding-top: 7px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--muted); }
.wr-text { display: flex; flex-direction: column; gap: 8px; }
.wr-title { font-family: var(--font-display); font-size: clamp(21px, 2.1vw, 26px); line-height: 1.25; color: var(--ink); transition: color .2s ease; }
.wr-title .lang-zh { font-size: .92em; line-height: 1.5; }
.wr-excerpt { max-width: 62ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-mid); }
.wr-cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.wr-row-link:hover .wr-title { color: var(--accent); }
.wr-access { justify-self: end; margin-top: 4px; padding: 5px 10px; border: 1px solid var(--hairline); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); white-space: nowrap; }
.wr-access.is-members { border-color: rgba(123, 44, 36, .4); color: var(--accent); }

/* The warp runs through every row, padding included, so the threads read as
   continuous down the whole list. */
.wr-knots { position: relative; display: grid; grid-template-columns: repeat(var(--n), var(--col)); align-self: stretch; margin: -28px 0 -30px; }
.wr-knot { position: relative; }
.wr-knot::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; background: var(--hairline); }
.wr-knot.is-on::after { content: ""; position: absolute; top: 36px; left: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); transition: background .2s ease; }
.wr-weft { position: absolute; top: 35px; height: 2px; left: calc(var(--from) * var(--col) + var(--col) / 2);
  width: calc((var(--to) - var(--from)) * var(--col)); background: var(--ink); transition: background .2s ease; }
.wr-row-link:hover .wr-knot.is-on::after, .wr-row-link:hover .wr-weft { background: var(--accent); }
.wr-knot.is-chosen::before { width: 2px; margin-left: -1px; background: var(--accent); }
.wr-knot.is-chosen.is-on::after { background: var(--accent); }

.wr-depth { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin: 72px 0 112px;
  padding: 44px 40px; background: var(--sand); border-left: 3px solid var(--confluence); }
.wr-depth h2 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 28px; line-height: 1.2; color: var(--ink); }
.wr-depth p { max-width: 46ch; margin-top: 10px !important; font-size: 15px; line-height: 1.7; color: var(--ink-mid); }

@media (max-width: 860px) {
  .wr-weave { --col: 22px; margin-top: 48px; }
  .wr-loom-head { display: block; }
  .wr-loom-note { padding-bottom: 14px; }
  .wr-threads { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .wr-thread-cols { display: contents; }
  .wr-thread { flex-direction: row; gap: 7px; padding: 8px 12px; border: 1px solid var(--hairline); white-space: nowrap; font-size: 10.5px; letter-spacing: .1em; }
  .wr-thread-name { writing-mode: horizontal-tb; }
  .wr-thread-name .lang-zh { text-orientation: mixed; letter-spacing: .12em; }
  .wr-thread::after { display: none; }
  .wr-thread-all { order: -1; }
  .wr-thread[aria-pressed="true"] { border-color: var(--accent); }
  .wr-thread-all[aria-pressed="true"] { border-color: var(--ink); }
  .wr-thread-all[aria-pressed="true"] .wr-thread-name { border-bottom: 0; }
  .wr-row-link { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding: 22px 0 24px; }
  .wr-date { grid-column: 1; grid-row: 1; padding-top: 0; }
  .wr-access { grid-column: 2; grid-row: 1; margin-top: -3px; }
  .wr-text { grid-column: 1 / -1; grid-row: 2; }
  .wr-knots { grid-column: 1 / -1; grid-row: 3; margin: 2px 0 0; height: 16px; justify-self: start; }
  .wr-knot::before { top: 3px; bottom: 3px; }
  .wr-knot.is-on::after { top: 8px; width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 0 0 2px var(--paper); }
  .wr-weft { top: 7px; }
  .wr-depth { padding: 30px 24px; margin-bottom: 80px; }
}

/* ══ Subscribe — choose your depth ══════════════════════════════════════════
   The argument on the surface; the four plans as layers of water, each
   deeper and darker than the one above; checkout in the deep. */

.sb { --d1: #E3E9E7; --d2: #BCCBC9; --d3: #3A5E65; --d4: var(--deep-ground); }
.sb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-keep { display: inline-block; }
.sb-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: end;
  padding-top: clamp(96px, 10vw, 140px); padding-bottom: clamp(48px, 6vw, 80px); }
.sb-hero .pg-eyebrow { grid-column: 1 / -1; }
.sb-hero .pg-h1 { grid-column: 1; margin-top: 0; }
.sb-hero .pg-h1 { max-width: 14ch; font-size: clamp(46px, 7vw, 92px); line-height: .98; letter-spacing: -.035em; }
.sb-hero .pg-h1 .lang-zh { line-height: 1.2; }
.sb-hero-lead { grid-column: 2; max-width: 40ch; padding-bottom: 10px; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.55; color: var(--ink-soft); }
.sb-hero-lead .lang-zh { font-size: .82em; line-height: 1.9; }

.sb-why { padding-top: 24px; padding-bottom: clamp(72px, 9vw, 120px); }
.sb-move { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px 56px; padding: 40px 0; border-top: 1px solid var(--hairline); }
.sb-move > div { max-width: 58ch; }
.sb-move .pg-eyebrow { padding-top: 8px; color: var(--accent); }
.sb-move-lead { font-family: var(--font-display); font-weight: 300; font-size: 23px; line-height: 1.7; color: var(--ink); }
.sb-move-lead .lang-zh { font-size: 19px; line-height: 1.95; }
.sb-move-body { margin-top: 18px !important; font-size: 16.5px; line-height: 1.9; color: var(--ink-soft); }
.sb-move > div > .sb-move-body:first-child { margin-top: 0 !important; }
.sb-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.sb-tags li { padding: 10px 14px; border: 1px solid var(--hairline); background: var(--card); font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.sb-tags li::before { content: "↳ "; color: var(--accent); }
.sb-turn { margin-top: 40px !important; padding-top: 30px; max-width: 46ch; border-top: 2px solid var(--confluence);
  font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.4vw, 29px); line-height: 1.6; color: var(--ink); }
.sb-turn .lang-zh { font-size: .8em; line-height: 1.9; }

.sb-plans { padding-top: clamp(40px, 5vw, 64px); background: linear-gradient(180deg, var(--paper), var(--d1)); }
.sb-plans-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding-bottom: 72px; }
.sb-plans-head .pg-h2 { font-size: clamp(36px, 5vw, 58px); line-height: 1; }
.sb-plans-lede { margin-top: 18px !important; font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--ink-mid); }
.sb-plans-lede .lang-zh { font-style: normal; font-size: 16px; }
.sb-flash { width: 100%; margin-bottom: 8px; }
.sb-flash-inline { display: inline-block; margin-top: 14px !important; }
.sb-plan-chip { display: inline-flex; align-items: center; gap: 11px; margin-top: 22px; padding: 8px 8px 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; }
.sb-plan-chip .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sb-plan-chip .cn { font-family: var(--font-zh); font-size: 18px; line-height: 1; color: var(--accent); }
.sb-plan-chip .v { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.sb-plan-chip a { padding: 6px 13px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.sb-billing { text-align: right; }
.sb-billing > p { margin-top: 10px !important; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--accent); }
.sb-toggle { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); background: var(--card); }
.sb-toggle-btn { padding: 9px 20px; border: 0; background: transparent; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-mid); transition: background .2s ease, color .2s ease; }
.sb-toggle-btn.is-on { background: var(--ink); color: var(--paper); }
.sb-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The strata. Each layer is one plan and sits a shade deeper than the last;
   its top edge is a slow wave so the layers read as water, not boxes. */
.sb-strata { margin: 0; padding: 0; list-style: none; }
.sb-stratum { position: relative; }
.sb-d1 { background: var(--d1); color: var(--ink); }
.sb-d2 { background: var(--d2); color: var(--ink); }
.sb-d3 { background: var(--d3); color: var(--on-dark); }
.sb-d4 { background: var(--d4); color: var(--on-dark); }
.sb-wave { position: absolute; left: 0; right: 0; bottom: 100%; display: block; width: 100%; height: 44px; margin-bottom: -1px; }
.sb-d1 .sb-wave { fill: var(--d1); }
.sb-d2 .sb-wave { fill: var(--d2); }
.sb-d3 .sb-wave { fill: var(--d3); }
.sb-d4 .sb-wave { fill: var(--d4); }
.sb-stratum-in { display: grid; grid-template-columns: 170px 200px minmax(0, 1fr) 190px; gap: 24px 40px; align-items: start;
  padding-top: 44px; padding-bottom: 64px; }
.sb-st-id { display: flex; flex-direction: column; gap: 8px; }
.sb-st-cn { font-family: var(--font-zh); font-size: 48px; font-weight: 400; line-height: 1; }
.sb-st-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.sb-st-badge { align-self: flex-start; margin-top: 6px; padding: 5px 10px; background: var(--bronze); color: var(--deep-ground);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; }
.is-mark .sb-st-cn { color: var(--bronze); }
.sb-st-price .amt { display: inline-block; font-family: var(--font-display); font-weight: 300; font-size: 36px; line-height: 1; }
.sb-st-price small { margin-left: 4px; font-family: var(--font-mono); font-size: 11px; opacity: .6; }
.sb-st-tagline { margin-top: 14px !important; font-size: 14px; line-height: 1.55; opacity: .78; }
.sb-st-perks { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.sb-st-perks li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 14px; line-height: 1.5; }
.sb-st-perks li.is-off { opacity: .42; }
.sb-st-perks li span { font-family: var(--font-display); }
.sb-d1 .sb-st-perks li.is-on span, .sb-d2 .sb-st-perks li.is-on span { color: var(--accent); }
.sb-d3 .sb-st-perks li.is-on span, .sb-d4 .sb-st-perks li.is-on span { color: var(--bronze); }
.sb-st-cta { display: flex; justify-content: flex-end; }
.sb-cta { display: inline-flex; justify-content: center; min-width: 170px; padding: 13px 20px; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; text-align: center; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.sb-cta-ghost { background: transparent; color: inherit; border-color: currentColor; }
.sb-d1 .sb-cta-ghost:hover, .sb-d2 .sb-cta-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sb-d3 .sb-cta-ghost:hover, .sb-d4 .sb-cta-ghost:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--deep-ground); }
.sb-cta-bronze { background: var(--bronze); color: var(--deep-ground); }
.sb-cta-bronze:hover { background: #D9B574; }
.sb-cta-current { cursor: default; border-color: var(--bronze); color: var(--bronze); background: rgba(201, 160, 92, .12); }
.sb-d1 .sb-cta-current, .sb-d2 .sb-cta-current { border-color: var(--accent); color: var(--accent); background: rgba(123, 44, 36, .06); }
.sb-cta-quiet { cursor: default; font-weight: 500; border-color: currentColor; opacity: .5; }
.sb-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The deep: details, then checkout */
.sb-deep { position: relative; background: var(--deep-ground); color: var(--on-dark); padding-top: 24px; }
.sb-details { padding-bottom: 40px; }
.sb-details-head { padding: 40px 0 34px; border-top: 1px solid rgba(var(--on-dark-rgb), .12); }
.sb-details-head .pg-eyebrow { color: var(--bronze); }
.sb-details-head .pg-h2 { max-width: 24ch; color: var(--on-dark); }
.sb .detail-list { border-top: 1px solid rgba(var(--on-dark-rgb), .14); }
.sb .detail-row { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); gap: 48px; padding: 28px 0; border-bottom: 1px solid rgba(var(--on-dark-rgb), .14); }
.sb .detail-term { display: flex; align-items: baseline; gap: 12px; }
.sb .detail-term > span { font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: var(--bronze); }
.sb .detail-term h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.35; color: var(--on-dark); }
.sb .detail-row p { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.85; color: rgba(var(--on-dark-rgb), .72); }
.sb .detail-row .detail-lead { font-family: var(--font-display); font-size: 19px; line-height: 1.6; color: var(--on-dark); }
.sb .sb-detail-more { margin-top: 12px !important; }
.sb .sb-open { margin-top: 12px !important; }
.sb .sb-open a, .sb .detail-row > div > a { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid rgba(201, 160, 92, .5);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--bronze); }
.sb .detail-row > div > a { margin-top: 18px; }
.sb .discount-list { max-width: 420px; margin-top: 20px; border-top: 1px solid rgba(var(--on-dark-rgb), .14); }
.sb .discount-list > div { display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(var(--on-dark-rgb), .14); }
.sb .discount-glyph { font-family: var(--font-zh); font-size: 19px; color: var(--on-dark); }
.sb .discount-glyph.is-top { color: var(--bronze); }
.sb .discount-name { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--on-dark-rgb), .5); }
.sb .discount-list strong { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--bronze); }
.sb .discount-list strong.is-dim { color: rgba(var(--on-dark-rgb), .4); }
.sb-checkout { max-width: 1180px; margin: 0 auto; padding: 48px 32px 110px; scroll-margin-top: 88px; }

@media (max-width: 980px) {
  .sb-stratum-in { grid-template-columns: 120px minmax(0, 1fr); }
  .sb-st-id { grid-column: 1; grid-row: 1 / 3; }
  .sb-st-price { grid-column: 2; }
  .sb-st-perks { grid-column: 2; }
  .sb-st-cta { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 860px) {
  .sb-hero { grid-template-columns: minmax(0, 1fr); }
  .sb-hero-lead { grid-column: 1; }
}
@media (max-width: 680px) {
  .sb-move { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
  .sb-move .pg-eyebrow { padding-top: 0; }
  .sb-move-lead { font-size: 20px; }
  .sb-plans-head { flex-direction: column; align-items: flex-start; padding-bottom: 56px; }
  .sb-billing { text-align: left; }
  .sb-stratum-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 30px; padding-bottom: 48px; }
  .sb-st-id { grid-row: auto; flex-direction: row; align-items: baseline; gap: 12px; }
  .sb-st-cn { font-size: 38px; }
  .sb-st-price, .sb-st-perks, .sb-st-cta { grid-column: 1; }
  .sb-cta { width: 100%; }
  .sb .detail-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .sb .discount-list { max-width: none; }
  .sb-checkout { padding: 36px 20px 80px; }
}

/* ══ Classes — timetable, logbook, three steps ═════════════════════════════ */
.cl-head { padding-top: clamp(64px, 8vw, 104px); padding-bottom: 20px; }
.cl-head .pg-h1 { max-width: 16ch; }
.cl-head .pg-lede { max-width: 42ch; }
.cl-eyebrow { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.cl-eyebrow .pg-eyebrow { color: var(--accent); }
.cl-eyebrow a { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cl-eyebrow a:hover { color: var(--accent); }
.cl-members { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-top: 40px !important; padding: 16px 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-size: 14px; color: var(--ink-soft); }
.cl-members b { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--ink); }
.cl-members-cn { font-family: var(--font-zh); font-size: 26px; line-height: 1; color: var(--confluence); }
.cl-members-ladder { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--muted); }
.cl-members .pg-link { margin-left: auto; }

.cl-board { padding-top: 36px; padding-bottom: clamp(72px, 9vw, 112px); }
.cl-rows { margin: 0; padding: 0; list-style: none; }
.cl-row { display: grid; grid-template-columns: 76px minmax(0, 1.6fr) minmax(0, 1fr) 190px; gap: 20px 36px; align-items: start;
  padding: 34px 0 36px; border-bottom: 1px solid var(--hairline); }
.cl-row:first-child { border-top: 2px solid var(--ink); }
.cl-glyph { font-family: var(--font-zh); font-size: 54px; line-height: 1; color: var(--confluence); }
.cl-track { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cl-state { padding: 4px 9px; border: 1px solid var(--line-strong); color: var(--ink-soft); letter-spacing: .14em; }
.cl-state.is-open { border-color: #1F6F4A; color: #1F6F4A; }
.cl-state.is-soon { border-color: var(--bronze); color: var(--bronze-ink); }
.cl-title { margin: 12px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18; color: var(--ink); }
.cl-title .lang-zh { font-weight: 500; line-height: 1.4; }
.cl-desc { margin-top: 12px !important; max-width: 52ch; font-size: 15px; line-height: 1.7; color: var(--ink-mid); }
.cl-when { display: flex; flex-direction: column; gap: 6px; padding-top: 30px; font-family: var(--font-mono); font-size: 12.5px;
  line-height: 1.6; color: var(--ink-soft); }
.cl-place { color: var(--muted); }
.cl-fee { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 26px; text-align: right; }
.cl-price { font-family: var(--font-display); font-size: 28px; line-height: 1.1; color: var(--ink); }
.cl-member { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.cl-go { margin-top: 14px; padding: 11px 22px; font-size: 14px; }
.cl-empty { padding: 48px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.cl-empty p { max-width: 46ch; margin-top: 10px !important; font-size: 15px; line-height: 1.65; color: var(--ink-mid); }
.cl-empty .cl-empty-title { margin-top: 0 !important; font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.cl-empty .pg-btn { margin-top: 20px; }

.cl-log .cl-eyebrow .pg-eyebrow { color: var(--bronze); }
.cl-log-note { font-family: var(--font-mono); font-size: 12px; color: rgba(var(--on-dark-rgb), .5); }
.cl-log .pg-h2 { color: var(--on-dark); }
.cl-log-copy { max-width: 62ch; margin-top: 18px !important; font-size: 16px; line-height: 1.75; color: rgba(var(--on-dark-rgb), .66); }
.cl-log-rows { margin: 44px 0 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(var(--on-dark-rgb), .14); }
.cl-log-row { display: grid; grid-template-columns: 180px 120px minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid rgba(var(--on-dark-rgb), .14); }
.cl-log-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: rgba(var(--on-dark-rgb), .7); }
.cl-log-place { font-family: var(--font-mono); font-size: 12px; color: rgba(var(--on-dark-rgb), .45); }
.cl-log-what { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cl-log-track { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
.cl-log-title { font-family: var(--font-display); font-size: 19px; line-height: 1.3; color: var(--on-dark); }
.cl-log-replay { padding: 7px 13px; border: 1px solid rgba(201, 160, 92, .55); font-size: 12.5px; font-weight: 600; color: var(--bronze); white-space: nowrap; }
.cl-log-replay:hover { background: rgba(201, 160, 92, .12); }
.cl-log-none { font-family: var(--font-mono); font-size: 11px; color: rgba(var(--on-dark-rgb), .38); white-space: nowrap; }

/* three steps on one line: a thread through numbered nodes */
.cl-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; }
.cl-steps::before { content: ""; position: absolute; top: 19px; left: 20px; right: calc(33.333% - 20px); height: 1px; background: var(--line-strong); }
.cl-step { position: relative; }
.cl-step-dot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 50%;
  background: var(--paper); font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.cl-step:last-child .cl-step-dot { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.cl-step h3 { margin: 22px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--ink); }
.cl-step p { max-width: 34ch; margin-top: 10px !important; font-size: 14.5px; line-height: 1.65; color: var(--ink-mid); }
.cl-fine { max-width: 64ch; margin-top: 40px !important; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 14px; line-height: 1.7; color: var(--ink-mid); }

@media (max-width: 980px) {
  .cl-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .cl-glyph { font-size: 40px; }
  .cl-what { grid-column: 2 / 4; }
  .cl-when { grid-column: 2; padding-top: 0; }
  .cl-fee { grid-column: 3; padding-top: 0; }
  .cl-log-row { grid-template-columns: 150px minmax(0, 1fr) auto; }
  .cl-log-place { display: none; }
}
@media (max-width: 680px) {
  .cl-members .pg-link { margin-left: 0; }
  .cl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cl-glyph { display: none; }
  .cl-what { grid-column: 1 / -1; }
  .cl-when { grid-column: 1; }
  .cl-fee { grid-column: 2; }
  .cl-log-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cl-steps { grid-template-columns: 1fr; gap: 28px; }
  .cl-steps::before { top: 20px; bottom: 20px; left: 19.5px; right: auto; width: 1px; height: auto; }
  .cl-step { padding-left: 60px; }
  .cl-step-dot { position: absolute; left: 0; top: -8px; }
  .cl-step h3 { margin-top: 0; }
}

/* ══ Class door: the Home ═══════════════════════════════════════════════════
   class.htpi.me's front page. Owner, Sep 2026: people saw a class name and a
   register button, "but they don't know what institute / person is teaching.
   Why am I gonna pay for this?" — and the testimonials sat too low. So the
   first screen carries the line, the next class AND the person who teaches
   it; then the proof (where he has taught, the public record, his education);
   then the students' own words; then the person in full. Classes, method and
   rules follow. The same kit as htpi.me (pg-*), its own page. */

.ch { background: var(--paper); color: var(--ink); }
.ch p { margin: 0; }
.ch-sec { padding: clamp(72px, 8vw, 108px) 0; }
.ch-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; }
.ch-sec-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
a.ch-sec-note { color: var(--accent); }
a.ch-sec-note:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Hero: the line + the next class on the left, the teacher on the right. */
.ch-hero { padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 6vw, 84px); overflow: hidden; }
.ch-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas: "main portrait" "act portrait"; column-gap: clamp(40px, 6vw, 96px); row-gap: 30px; align-items: start; }
.ch-hero-main { grid-area: main; }
.ch-hero-act { grid-area: act; }
.ch-hero .pg-h1 { max-width: 13ch; font-size: clamp(38px, 5vw, 64px); }
.ch-tags { margin-top: 18px !important; font-size: 15px; letter-spacing: .16em; color: var(--accent); }
.ch-tags .lang-en { letter-spacing: .06em; }
.ch-hero .pg-lede { max-width: 38ch; }

/* The next class: the whole card is the link. */
.ch-next { display: block; max-width: 560px; padding: 20px 24px 22px; color: inherit; background: var(--card);
  border: 1px solid var(--hairline); border-top: 3px solid var(--accent); box-shadow: 0 18px 40px rgba(var(--ink-rgb), .06);
  transition: box-shadow .25s ease, transform .25s ease; }
.ch-next:hover { box-shadow: 0 22px 50px rgba(var(--ink-rgb), .11); transform: translateY(-2px); }
/* Two classes open: the second card stacks under the first. */
.ch-next + .ch-next { margin-top: 18px; }
.ch-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ch-next-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ch-next-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.ch-next-eb { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.ch-next-eb i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ch-next-kind { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ch-next-title { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.15; }
.ch-next-tag { display: block; margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-mid); }
.ch-next-sessions { display: block; margin-top: 16px; border-top: 1px solid var(--hairline); }
.ch-sess { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when left" "seats seats"; gap: 9px 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.ch-sess-when { grid-area: when; font-size: 13.5px; font-weight: 500; }
.ch-sess-left { grid-area: left; font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
/* The room, drawn: one mark per seat, filled where a seat is taken. */
.ch-seats { grid-area: seats; display: flex; flex-wrap: wrap; gap: 5px; }
.ch-seats i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line-strong); }
.ch-seats i.is-taken { background: var(--accent); border-color: var(--accent); }
.ch-next-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-top: 18px; }
.ch-next-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ch-next-price b { font-family: var(--font-display); font-weight: 400; font-size: 28px; white-space: nowrap; }
.ch-next-price small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.ch-next-go { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: var(--accent); color: var(--paper); font-weight: 600; font-size: 14px; transition: background .2s ease; }
.ch-next:hover .ch-next-go { background: var(--accent-deep); }
.ch-hero-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px !important; font-size: 14px; }
.ch-hero-links a { color: var(--ink-soft); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; }
.ch-hero-links a:hover { color: var(--accent); border-color: var(--accent); }

/* The teacher: the illustrated portrait (its paper recoloured to the mist, so
   it is drawn on the page rather than pasted on it) and a name tag. */
.ch-portrait { grid-area: portrait; position: relative; margin: 0; }
.ch-portrait img { display: block; width: 100%; max-width: 520px; height: auto; margin-left: auto;
  -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 74%, transparent 100%);
  mask-composite: intersect; }
.ch-tag { position: absolute; right: 0; bottom: 5%; width: min(320px, 74%); padding: 18px 20px 16px; background: var(--card);
  border: 1px solid var(--hairline); border-left: 3px solid var(--accent); box-shadow: 0 20px 44px rgba(var(--ink-rgb), .1); }
.ch-tag-k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.ch-tag b { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: 27px; line-height: 1.1; }
.ch-tag-l { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: .03em; color: var(--ink-mid); }
.ch-tag a { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent); border-bottom: 1px solid rgba(123, 44, 36, .3); }
.ch-tag a:hover { border-bottom-color: var(--accent); }

/* Proof: where he has taught, the record, the education — three columns. */
.ch-proof { background: var(--card); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ch-proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr); }
.ch-proof-col { padding: 26px 28px 26px 0; }
.ch-proof-col + .ch-proof-col { padding-left: 28px; border-left: 1px solid var(--hairline); }
.ch-proof-k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ch-proof-list { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 14px 0 0; padding: 0; list-style: none; }
.ch-proof-list b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--ink); }
.ch-proof-list small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.ch-proof-more { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.ch-proof-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The students' words, on deep water: one review set large, the rest beside it. */
.ch-voices { padding: clamp(80px, 9vw, 120px) 0; }
.ch-voices-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 44px clamp(48px, 6vw, 96px); margin-top: 34px; align-items: start; }
.ch-voice { margin: 0; }
.ch-voice blockquote { margin: 0; font-family: var(--font-display); font-weight: 300; font-style: italic; color: var(--on-dark); }
.ch-voice blockquote .lang-zh { font-style: normal; }
.ch-voice.is-lead blockquote { font-size: clamp(23px, 2.5vw, 31px); line-height: 1.5; }
.ch-voice.is-lead blockquote::before { content: "\201C"; display: block; margin-bottom: 14px; font-size: 84px; line-height: .55; font-style: normal; color: var(--bronze); }
.ch-voice.is-lead blockquote .lang-zh { font-size: .8em; line-height: 1.85; }
.ch-voices-side .ch-voice { padding: 26px 0; border-top: 1px solid rgba(var(--on-dark-rgb), .16); }
.ch-voices-side .ch-voice:first-child { padding-top: 0; border-top: 0; }
.ch-voices-side blockquote { font-size: 17px; line-height: 1.65; color: rgba(var(--on-dark-rgb), .9); }
.ch-voices-side blockquote .lang-zh { font-size: 15.5px; line-height: 1.9; }
.ch-voice figcaption { margin-top: 18px; }
.ch-voice figcaption b { display: block; font-size: 14px; font-weight: 600; color: var(--on-dark); }
.ch-voice figcaption > span { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--bronze); }
.ch-more { margin-top: 20px; }
.ch-more summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
.ch-more summary::-webkit-details-marker { display: none; }
.ch-more summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 1px solid rgba(201, 160, 92, .55); font-size: 13px; letter-spacing: 0; }
.ch-more[open] summary::before { content: "\2212"; }
.ch-more summary:hover { color: var(--on-dark); }
.ch-more summary:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.ch-more-body { margin-top: 16px !important; max-width: 62ch; white-space: pre-line; font-size: 15px; line-height: 1.85; color: rgba(var(--on-dark-rgb), .74); }

/* The person, in full. */
.ch-who-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px clamp(48px, 6vw, 96px); align-items: start; }
.ch-photos { display: grid; gap: 14px; }
.ch-photos-k { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: .06em; color: var(--muted); }
.ch-photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--deep-ground); }
.ch-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }
.ch-photo.is-hku img { object-position: center 42%; }
.ch-photo figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 48px 20px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .74)); color: #fff; }
.ch-photo figcaption span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.ch-photo figcaption b { font-family: var(--font-display); font-weight: 300; font-size: 20px; line-height: 1.1; text-align: right; }
.ch-who-lines { margin-top: 12px !important; font-family: var(--font-mono); font-size: 12px; line-height: 1.75; letter-spacing: .03em; color: var(--muted); }
.ch-who .pg-prose { margin-top: 24px; }
.ch-creds { margin: 30px 0 0; border-top: 1px solid var(--hairline); }
.ch-creds > div { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.ch-creds dt { padding-top: 3px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ch-creds dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--prose-ink); }
.ch-who-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px !important; }

/* Open classes, as a timetable rather than a wall of cards. */
.ch-rows { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ch-row { display: grid; grid-template-columns: 10.5em minmax(0, 1fr) 14em 9em 20px; grid-template-areas: "kind main when price go";
  gap: 22px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--hairline); color: inherit; }
.ch-row-kind { grid-area: kind; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ch-row-main { grid-area: main; }
.ch-row-title { font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.2; transition: color .2s ease; }
.ch-row-pitch { display: block; margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--ink-mid); }
.ch-row-when { grid-area: when; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.ch-row-price { grid-area: price; font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-align: right; }
.ch-row-go { grid-area: go; color: var(--accent); text-align: right; transition: transform .2s ease; }
a.ch-row:hover .ch-row-title { color: var(--accent); }
a.ch-row:hover .ch-row-go { transform: translateX(3px); }
a.ch-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ch-open { display: inline-block; margin-left: 12px; padding: 3px 8px; vertical-align: 4px; background: #1F6F4A; color: var(--paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ch-row.is-soon .ch-row-kind { font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: 0; color: var(--bronze); }
.ch-row.is-soon .ch-row-title { color: var(--ink-soft); }
.ch-row .ch-ran { display: inline-block; margin-left: 12px; padding: 3px 8px; vertical-align: 4px; border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* How the classes work: the owner's line, the four principles, and the dial. */
.ch-way-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(48px, 6vw, 96px); align-items: center; }
.ch-way-lead { margin-top: 22px !important; font-family: var(--font-display); font-weight: 300; font-size: clamp(23px, 2.5vw, 30px); line-height: 1.45; }
.ch-way-lead .lang-zh { font-size: .84em; line-height: 1.8; }
.ch-way .pg-link { margin-top: 26px; }
.ch-principles { display: grid; grid-template-columns: 1fr 1fr; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.ch-principles li { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line-strong); }
.ch-principles li:nth-child(odd) { border-right: 1px solid var(--line-strong); }
.ch-principles li:nth-child(even) { padding-left: 20px; padding-right: 0; }
.ch-principles b { display: block; font-family: var(--font-zh); font-weight: 500; font-size: 18px; letter-spacing: .14em; color: var(--accent); }
.ch-principles li > span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--ink-mid); }

/* 小班, made countable: a class's minutes of one teacher, split between the room.
   The ring is two conic gradients — your share in garnet, everyone else's in
   grey, cut into n slices — so it draws itself from --n alone; @property lets
   --n glide between sizes. */
@property --n { syntax: "<number>"; inherits: true; initial-value: 8; }
.ch-room { margin: 0; padding: 28px 28px 24px; background: var(--card); border: 1px solid var(--hairline); box-shadow: 0 18px 40px rgba(var(--ink-rgb), .06);
  transition: --n .55s cubic-bezier(.3, .7, .2, 1); }
.ch-room-viz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.ch-room-dial { position: relative; width: 190px; aspect-ratio: 1; }
.ch-room-ring { position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, var(--card) 0deg .9deg, transparent .9deg calc(360deg / var(--n))),
    conic-gradient(var(--accent) 0deg calc(360deg / var(--n)), var(--line-strong) 0deg);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%); mask: radial-gradient(circle, transparent 57%, #000 58%); }
.ch-room-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ch-room-core b { font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-room-core span { margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ch-room-people { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; max-width: 164px; }  /* ten a row: 100 is a square */
.ch-room-people i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.ch-room-people i:first-child { background: var(--accent); }
.ch-room-cap { margin-top: 20px; }
.ch-room-read { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.ch-room-read b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-room-math { margin-top: 6px !important; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.ch-room-ctl { display: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.js-pages .ch-room-ctl { display: block; }
.ch-room-lab { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ch-room-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 10px 0 0; background: transparent; cursor: pointer; }
.ch-room-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ch-room-range::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); }
.ch-room-range::-moz-range-track { height: 2px; background: var(--line-strong); }
.ch-room-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--accent); }
.ch-room-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--accent); }
.ch-room-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ch-room-chip { padding: 7px 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); cursor: pointer;
  font-family: var(--font-mono); font-size: 11.5px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.ch-room-chip:hover { border-color: var(--ink-mid); color: var(--ink); }
.ch-room-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ch-room-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* How to register. */
.ch-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ch-steps li { padding: 26px 28px 0 0; }
.ch-steps li + li { padding-left: 28px; border-left: 1px solid var(--hairline); }
.ch-step-n { display: block; font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1; color: var(--accent); }
.ch-steps h3 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; }
.ch-steps p { margin-top: 10px !important; font-size: 14.5px; line-height: 1.7; color: var(--ink-mid); }
.ch-note { max-width: 72ch; margin-top: 30px !important; font-size: 13.5px; line-height: 1.75; color: var(--ink-mid); }
.ch-note + .ch-note { margin-top: 8px !important; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

/* Questions. */
.ch-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 24px; }
.ch-faq > div { padding: 20px 0 22px; border-top: 1px solid var(--hairline); }
.ch-faq h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; }
.ch-faq p { margin-top: 10px !important; font-size: 14px; line-height: 1.7; color: var(--ink-mid); }

/* Between classes: the notify card takes the next class's place. */
.ch-quiet { max-width: 560px; padding: 22px 24px 20px; background: var(--card); border: 1px solid var(--hairline); border-top: 3px solid var(--bronze);
  box-shadow: 0 18px 40px rgba(var(--ink-rgb), .06); }
.ch-quiet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ch-quiet-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-ink); }
.ch-quiet-state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.ch-quiet-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--bronze); }
.ch-quiet h2 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 300; font-size: 28px; line-height: 1.25; }
.ch-quiet-copy { margin-top: 10px !important; font-size: 14px; line-height: 1.7; color: var(--ink-mid); }
.ch-notify { display: flex; gap: 10px; margin-top: 18px; }
.ch-notify-field { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--paper);
  color: var(--ink); font-family: var(--font-body); font-size: 14px; }
.ch-notify-field:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ch-notify-btn { padding: 12px 18px; border: 0; background: var(--accent); color: var(--paper); font-family: var(--font-body); font-weight: 600;
  font-size: 13.5px; white-space: nowrap; cursor: pointer; transition: background .2s ease; }
.ch-notify-btn:hover { background: var(--accent-deep); }
.ch-notify-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ch-quiet-done { margin-top: 18px !important; font-family: var(--font-mono); font-size: 13px; color: #1F6F4A; }
.ch-quiet-fine { margin-top: 12px !important; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6; color: var(--muted); }

/* The member line. */
.ch-member { background: var(--sand); border-top: 1px solid var(--hairline); }
.ch-member-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; font-size: 13.5px; color: var(--ink-soft); }
.ch-member a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--accent); }

@media (max-width: 900px) {
  .ch-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "portrait" "act"; row-gap: 30px; }
  .ch-portrait img { max-width: none; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 14%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 72%, transparent 100%); }
  .ch-tag { position: relative; left: auto; bottom: auto; width: auto; margin: -64px 14px 0; }
  .ch-proof-grid { grid-template-columns: minmax(0, 1fr); }
  .ch-proof-col, .ch-proof-col + .ch-proof-col { padding: 20px 0; border-left: 0; }
  .ch-proof-col + .ch-proof-col { border-top: 1px solid var(--hairline); }
  .ch-voices-grid, .ch-who-grid, .ch-way-grid { grid-template-columns: minmax(0, 1fr); }
  .ch-voices-side .ch-voice:first-child { padding-top: 26px; border-top: 1px solid rgba(var(--on-dark-rgb), .16); }
  .ch-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind kind" "main main" "when price"; gap: 10px 16px; }
  .ch-row-go { display: none; }
  .ch-row.is-soon { grid-template-areas: "kind kind" "main main"; }
  .ch-steps { grid-template-columns: minmax(0, 1fr); }
  .ch-steps li + li { margin-top: 26px; padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .ch-faq { grid-template-columns: minmax(0, 1fr); }
  .ch-creds > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 560px) {
  .ch-principles { grid-template-columns: minmax(0, 1fr); }
  .ch-principles li, .ch-principles li:nth-child(even) { padding: 14px 0; border-right: 0; }
  .ch-room { padding: 22px 18px 20px; }
  .ch-room-viz { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ch-room-people { max-width: 100%; justify-content: center; }
  .ch-notify { flex-direction: column; }
  .ch-next { padding: 18px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-next, .ch-row-go, .ch-room { transition: none; }
  .ch-next:hover { transform: none; }
}

/* ══ Class door: About ══════════════════════════════════════════════════════
   The manifesto with one device that argues its point (a cleaning routine on
   a small table: the playbook's steps are right on the data they were written
   for and wrong on other data; the method asks each step why — pages.js
   [data-clean]), then the record, who teaches, the four principles and the
   room, on the same kit as htpi.me. */
.cla { background: var(--paper); color: var(--ink); }
.cla p { margin: 0; }
.cla-open { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 7vw, 96px); }
.cla-open-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(48px, 6vw, 96px); align-items: start; }
/* the heading scrolls away; the device alone stays pinned beside the manifesto */
.cla-open-lead { align-self: stretch; }
.cln { position: sticky; top: 88px; }
.cla-h1 { margin: 22px 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 4vw, 48px); line-height: 1.34; letter-spacing: -.02em; }
.cla-h1 > span { padding: 5px 12px; background: var(--accent); color: var(--paper); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cla-h1 .lang-zh { word-break: keep-all; overflow-wrap: anywhere; }  /* 把問題帶進來， / 把理解帶走。 */
.cla-open-prose p { margin: 0 0 22px; font-size: 16.5px; line-height: 1.8; color: var(--ink-soft); }
.cla-open-prose p:last-child { margin-bottom: 0; }
.cla-open-prose a { color: var(--accent); border-bottom: 1px solid rgba(123, 44, 36, .4); }
/* Wide screens: the manifesto is short enough to fit one screen, so its
   first three paragraphs are spaced out and the pinned device tells their
   story as they pass the reading line — the answer, the context changing, the
   method (pages.js [data-clean]). The paragraph it is showing reads in full
   ink. Without JavaScript the spacing stays normal. */
@media (min-width: 901px) {
  .js-pages .cla-open-prose p[data-clean-at] { margin-bottom: 34vh; transition: color .4s ease; }
  .js-pages .cla-open-prose p[data-clean-at="method"] { margin-bottom: 24vh; }
  .js-pages .cla-open-prose p[data-clean-at]:not(.is-reading) { color: var(--muted); }
}
.cla-open-prose a:hover { border-bottom-color: var(--accent); }

/* The manifesto's device: a cleaning routine on a small table. The playbook's
   step names alone; on autopilot each one visibly acts on the rows (the pair
   lights, the copy is struck out and folds away, blanks turn into a garnet 0,
   the extreme row goes). The method opens each step to its premise and to what
   THIS data says, then redoes it: kept, left out (未答) or flagged (可疑). The
   grid under it records, per dataset, whether the step held. What shows is set
   by the figure: data-set picks the table and texts, data-state the phase. */
.cln { display: none; margin: 34px 0 0; padding: 18px 20px 16px; background: var(--card); border: 1px solid var(--hairline);
  box-shadow: 0 18px 40px rgba(var(--ink-rgb), .06); }
.js-pages .cln { display: block; }
/* the active set wins over every phase rule below */
.cln[data-set="0"] [data-for]:not([data-for="0"]),
.cln[data-set="1"] [data-for]:not([data-for="1"]),
.cln[data-set="2"] [data-for]:not([data-for="2"]) { display: none !important; }
.cln-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.cln-k { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; padding-top: 3px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.cln-name { letter-spacing: .04em; text-transform: none; color: var(--ink-mid); }
.cln-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; background: var(--accent); color: var(--paper);
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background .2s ease; }
.cln-btn:hover { background: var(--accent-deep); }
.cln-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cln-q { margin: 14px 0 0 !important; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.cln-q-k { margin-right: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* the table */
.cln-table { margin-top: 10px; border: 1px solid var(--hairline); background: var(--paper); }
.cln-row { position: relative; display: grid; align-items: center; gap: 10px; height: 27px; padding: 0 12px; overflow: hidden;
  border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
  transition: height .35s ease, opacity .35s ease, background .3s ease, box-shadow .3s ease; }
.cln-table.is-2 .cln-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cln-table.is-3 .cln-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.cln-row > .cln-cell:last-of-type { text-align: right; }
.cln-row.is-head { height: 25px; border-top: 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cln-cell { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cln-row.is-pair { background: rgba(123, 44, 36, .07); box-shadow: inset 3px 0 0 var(--accent); }
.cln-row.is-hit .cln-cell { color: var(--accent); text-decoration: line-through; }
.cln-row.is-gone { height: 0; opacity: 0; border-top-color: transparent; }
.cln-row.is-flag { background: rgba(123, 44, 36, .08); box-shadow: inset 3px 0 0 var(--accent); }
.cln-flag { display: none; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); padding: 2px 7px; background: var(--accent); color: var(--paper);
  font-style: normal; font-size: 10px; letter-spacing: .1em; }
.cln-row.is-flag .cln-flag { display: block; }
.cln-row.is-flag > .cln-cell:last-of-type { padding-right: 48px; }
.cln-cell.is-blank i { font-style: normal; }
.cln-dash { color: var(--faint); }
.cln-zero, .cln-na { display: none; }
.cln-cell.is-zero .cln-dash, .cln-cell.is-na .cln-dash { display: none; }
.cln-cell.is-zero .cln-zero { display: inline-block; color: var(--accent); font-weight: 700; animation: clnPop .4s cubic-bezier(.3, 1.6, .5, 1); }
.cln-cell.is-na .cln-na { display: inline; color: var(--muted); font-style: italic; }
@keyframes clnPop { from { transform: scale(2); } }

/* the steps, and the grid of where each one held */
.cln-grid { margin-top: 14px; }
.cln-ghead, .cln-step { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 46px); align-items: center; }
.cln-ghead { padding: 0 0 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cln-gcol { text-align: center; letter-spacing: .04em; }
.cln-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.cln-step { column-gap: 0; padding: 7px 0; border-bottom: 1px solid var(--hairline); transition: background .25s ease; }
.cln-sname { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; font-family: var(--font-body);
  font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; cursor: default; }
/* once a table has been worked through, each step opens to its reason on a tap */
.cln[data-state="home"] .cln-sname, .cln[data-state="found"] .cln-sname { cursor: pointer; }
.cln[data-state="home"] .cln-sname::after, .cln[data-state="found"] .cln-sname::after { content: "＋"; margin-left: 2px; font-weight: 400; color: var(--muted); }
.cln[data-state="home"] .cln-step.is-open .cln-sname::after, .cln[data-state="found"] .cln-step.is-open .cln-sname::after { content: "−"; }
.cln-sname:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cln-sname b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--line-strong);
  border-radius: 50%; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.cln-step.is-now .cln-sname b { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cln-step.is-now { background: rgba(var(--ink-rgb), .035); }
.cln-v { justify-self: center; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-style: normal; font-size: 13px; font-weight: 700; }
.cln-v::before { content: "·"; color: var(--faint); }
.cln-v.is-ok::before { content: "✓"; color: var(--confluence); }
.cln-v.is-bad::before { content: "✕"; color: var(--accent); }
.cln-v.is-na::before { content: "—"; color: var(--faint); }
.cln[data-set="0"] [data-col="0"], .cln[data-set="1"] [data-col="1"], .cln[data-set="2"] [data-col="2"] { background: rgba(var(--ink-rgb), .05); }
.cln-why { display: none; grid-column: 1 / -1; padding: 4px 0 2px 29px; font-size: 12.5px; line-height: 1.6; }
.cln-step.is-open .cln-why { display: block; animation: clnIn .35s ease; }
.cln-why-p { display: block; color: var(--muted); }
.cln-why-h { display: block; color: var(--ink-soft); }
@keyframes clnIn { from { opacity: 0; transform: translateY(-3px); } }

/* the two answers */
.cln-ans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cln-a { padding: 9px 12px; border: 1px solid var(--hairline); opacity: .35; transition: opacity .35s ease, border-color .35s ease; }
.cln-a > span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cln-a > b { display: block; margin-top: 3px; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.15; }
.cln-a b { visibility: hidden; }
.cln.has-lazy .cln-a.is-lazy, .cln.has-true .cln-a.is-true { opacity: 1; }
.cln.has-lazy .cln-a.is-lazy b, .cln.has-true .cln-a.is-true b { visibility: visible; }
.cln.has-lazy .cln-a.is-lazy { border-color: rgba(123, 44, 36, .45); }
.cln.has-lazy .cln-a.is-lazy b { color: var(--accent); }
.cln.has-true .cln-a.is-true { border-color: var(--confluence); }
.cln.has-true .cln-a.is-true b { color: var(--confluence); }
.cln-a-k2 { display: none !important; }
.cln[data-state="found"] .cln-a-k1 { display: none; }
.cln[data-state="found"] .cln-a-k2 { display: block !important; }

/* one caption per phase */
.cln-cap { margin-top: 12px; min-height: 3.4em; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.cln-c { display: none; }
.cln[data-state="a0"] .cln-c[data-c="a0"], .cln[data-state="home"] .cln-c[data-c="home"], .cln[data-state="run"] .cln-c[data-c="run"],
.cln[data-state="broken"] .cln-c[data-c="broken"], .cln[data-state="method"] .cln-c[data-c="method"],
.cln[data-state="found"] .cln-c[data-c="found"] { display: block; }

/* Who teaches: the statement, and the About-Horris card beside it. */
.cla-who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(48px, 6vw, 96px); margin-top: 34px; align-items: start; }
.cla-who-text p { font-family: var(--font-display); font-size: 21px; line-height: 1.65; color: var(--prose-ink); }
.cla-who-text p .lang-zh { font-size: 18px; line-height: 1.9; }
.cla-who-text p + p { margin-top: 18px !important; font-size: 17px; color: var(--ink-soft); }
.cla-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); background: var(--card); border: 1px solid var(--hairline); border-top: 3px solid var(--bronze); overflow: hidden; }
.cla-card-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 8%; }
.cla-card-body { padding: 22px 24px; }
.cla-card-k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.cla-card-name { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; }
.cla-card-l { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--ink-mid); }
.cla-card-body p { margin-top: 12px !important; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.cla-card .pg-link { margin-top: 16px; }

/* Four principles, as a row of four. */
.cla-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.cla-four li { padding: 26px 24px 6px 0; }
.cla-four li + li { padding-left: 24px; border-left: 1px solid var(--line-strong); }
.cla-four b { display: block; font-family: var(--font-zh); font-weight: 500; font-size: 30px; line-height: 1.2; letter-spacing: .12em; color: var(--accent); }
.cla-four h3 { margin: 12px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.cla-four p { margin-top: 10px !important; font-size: 14px; line-height: 1.7; color: var(--ink-mid); }

/* The room, on deep water. */
.cla-room-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px 56px; align-items: center; }
.cla-room-lead { margin-top: 22px !important; font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.45; }
.cla-room-lead .lang-zh { font-size: .86em; line-height: 1.8; }
.cla-room-copy { max-width: 56ch; margin-top: 18px !important; font-size: 14.5px; line-height: 1.7; color: rgba(var(--on-dark-rgb), .62); }
.cla-room-rows { margin: 0; }
.cla-room-rows > div { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(var(--on-dark-rgb), .14); font-size: 14px; }
.cla-room-rows > div:last-child { border-bottom: 1px solid rgba(var(--on-dark-rgb), .14); }
.cla-room-rows dt { color: rgba(var(--on-dark-rgb), .6); }
.cla-room-rows dd { margin: 0; font-family: var(--font-mono); }

.cla-cta { text-align: center; }
.cla-cta .pg-h2 { margin: 0; font-size: clamp(26px, 3.2vw, 38px); }
.cla-cta .pg-btn { margin-top: 26px; }

@media (max-width: 900px) {
  .cla-open-grid, .cla-who-grid, .cla-room-grid { grid-template-columns: minmax(0, 1fr); }
  .cln { position: static; }
  .cla-four { grid-template-columns: 1fr 1fr; }
  .cla-four li:nth-child(3) { padding-left: 0; border-left: 0; }
  .cla-four li:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
}
@media (max-width: 560px) {
  .cln { padding: 16px 14px 14px; }
  .cla-four { grid-template-columns: minmax(0, 1fr); }
  .cla-four li, .cla-four li + li { padding: 22px 0 6px; border-left: 0; }
  .cla-four li + li { border-top: 1px solid var(--line-strong); }
  .cla-card { grid-template-columns: minmax(0, 1fr); }
  .cla-card-img { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .cln-row, .cln-step, .cln-a, .cln-sname b { transition: none; }
  .cln-cell.is-zero .cln-zero, .cln-why { animation: none !important; }
}

/* ══ Class door: class page — who teaches, in the hero ═══════════════════════
   The Home's name tag on the page most visitors land on: face, name, the
   owner's two lines, and the bio across on the main site. */
.cp-teacher { display: flex; align-items: center; gap: 16px; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline); color: var(--ink); }
.cp-teacher-img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--hairline), 0 8px 18px rgba(var(--ink-rgb), .10); }
.cp-teacher-img.is-sm { width: 42px; height: 42px; box-shadow: 0 0 0 1px var(--hairline); }
.cp-teacher-k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.cp-teacher b { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.2; transition: color .2s ease; }
.cp-teacher-go { margin-left: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--accent); vertical-align: 2px; }
.cp-teacher-l { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: .03em; color: var(--ink-mid); }
.cp-teacher:hover b { color: var(--accent); }

/* ══ Class door: class page — the afternoon, to scale ═══════════════════════
   Over 三個半小時的流程: one segment per block, sized by its real minutes, pinned
   under the header while the list scrolls; a garnet clock marker follows the
   block at the reading line (pages.js [data-rail]). Without JavaScript the
   bar still shows the proportions; the marker and clock appear with it. */
.cp-rail { position: sticky; top: 61px; z-index: 5; margin-top: 24px; padding: 14px 0 12px; background: var(--sand); }
.cp-rail-bar { position: relative; display: flex; height: 46px; background: var(--card); border: 1px solid var(--line-strong); }
.cp-rail-seg { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 10px; overflow: hidden;
  border-right: 1px solid var(--line-strong); transition: background .3s ease; }
.cp-rail-seg:last-of-type { border-right: 0; }
.cp-rail-seg em { overflow: hidden; font-style: normal; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-soft); transition: color .3s ease; }
.cp-rail-seg small { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.cp-rail-seg.is-on { background: rgba(123, 44, 36, .08); }
.cp-rail-seg.is-on em { color: var(--accent); }
.cp-rail-now { position: absolute; top: -7px; bottom: -7px; left: 0; width: 2px; margin-left: -1px; background: var(--accent); transition: left .12s linear; }
.cp-rail-now::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.cp-rail-ends { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cp-rail-ends b { font-weight: 500; font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }
.cp-rail:not(.is-live) .cp-rail-now, .cp-rail:not(.is-live) .cp-rail-ends b { display: none; }
.cp-block > div:first-child { transition: color .3s ease; }
.cp-block.is-on > div:first-child { color: var(--accent); }
@media (max-width: 640px) {
  .cp-rail-bar { height: 36px; }
  .cp-rail-seg { align-items: center; padding: 0 4px; }
  .cp-rail-seg em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-rail-now, .cp-rail-seg, .cp-rail-seg em, .cp-block > div:first-child { transition: none; }
}

/* ══ Class door: class page — what you can build (Sep 2026) ═════════════════
   Each build shows what's inside it on a blueprint (dark ground, a faint
   grid) beside its description; the owner's note on one-prompt showpieces
   follows, then the earlier runs' examples in a drawer (the old animated
   mock-ups, unchanged). */
.cm-lead { max-width: 62ch; margin: 14px 0 0 !important; font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); }
.cm-box { margin-top: 26px; background: var(--paper-raised); border: 1px solid var(--hairline); }
.cm-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px 48px; align-items: start; padding: 36px 40px; }
.cm-bp { padding: 24px 26px 18px; color: var(--on-dark); background-color: var(--deep-ground);
  background-image: linear-gradient(rgba(var(--on-dark-rgb), .05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--on-dark-rgb), .05) 1px, transparent 1px);
  background-size: 22px 22px; }
.cm-bp-k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze); }
.cm-bp-name { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1.2; color: var(--on-dark); }
.cm-parts { margin: 18px 0 0; }
.cm-parts > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid rgba(var(--on-dark-rgb), .14); }
.cm-parts dt { padding-top: 2px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--on-dark-rgb), .55); }
.cm-parts dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--on-dark); }
.cm-note { max-width: 62ch; margin: 22px 0 0 !important; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.cm-oneshot { max-width: 70ch; margin: 16px 0 0 !important; padding: 16px 20px; border-left: 3px solid var(--accent); background: var(--card);
  font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.cm-earlier { margin-top: 28px; border-top: 1px solid var(--line-strong); }
.cm-earlier > summary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 0 6px; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); }
.cm-earlier > summary::-webkit-details-marker { display: none; }
.cm-earlier > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--accent); }
.cm-earlier[open] > summary::before { content: "\2212"; }
.cm-earlier > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cm-earlier-lead { max-width: 62ch; margin: 8px 0 0 !important; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.cm-earlier-link { display: inline-block; margin-top: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--accent);
  border-bottom: 1px solid rgba(123, 44, 36, .3); }
.cm-earlier-link:hover { border-bottom-color: var(--accent); }
#vr-earlier { scroll-margin-top: 140px; }
@media (max-width: 860px) {
  .cm-panel { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
}