/* opening-night-sky.css — the opening 「夜空成盘」 (key night-sky).
 * Author: [ASTRO-MOD-A] (Claude Opus 5.5), 2026-11-14, from the sketch [ASTRO-SK-A]. New file.
 * Every selector is scoped under .astro-opening--night-sky (CONTRACT.md).
 * Static rules first (the page without JavaScript or with reduced motion), then the rules
 * that apply once the module has marked parts .is-live / .is-enhanced.
 * Ink black and lamp gold; paper and ink at the end; one cinnabar accent (focus, annotations).
 *
 * Co-written by [ASTRO-F6] helper of the 命理学 iMac window — a17 supervisor (Claude Opus 5.5), 2026-11-15:
 * the isolation block below, so that the opening looks the same inside the WordPress page with the Bricks
 * parent theme's stylesheet as it does on its own (decision N185; build/fixes/bricks-css/README.md).
 * It restates what the opening already looked like; it changes no text, layout, colour, size or motion.
 *
 * Co-written by [ASTRO-H1] helper of the 命理学 iMac window — a17 supervisor (Claude Opus 5.5), 2026-11-15 (owner
 * decisions N189, N190): the plates' lead set as the school's own sentence; room for the site header
 * (--astro-header-h, 0 without it); the end of the opening rebuilt as the culmination (a burst of light over ink, then
 * the school's quotation). Rules below the isolation block only.
 */

/* ---------- isolation from the page's other stylesheets (Bricks, WordPress) ----------
 * 1. The root starts from initial values: nothing is inherited from <body> (Bricks gives it 15px / 1.7,
 *    its own colour and font), and no outside rule on <section> (box-sizing, border-color) survives.
 *    The root rule that follows restates what the opening sets; everything else is the initial value,
 *    which is what the root had on a page with no other stylesheet (16px, line-height normal).
 *    min-width / min-height 0: the root is a flex item of Bricks' <body> (.brx-body is a column flex box), and
 *    a flex item's automatic minimum is the only way it differs from a block in normal flow.
 *    -webkit-locale: `all` also resets the locale that lang="zh-Hans" on the root gives (Chromium, WebKit), so it
 *    is restated; browsers without the property ignore it and keep the lang attribute's locale.
 * 2. Every descendant, and its ::before / ::after / ::marker / ::backdrop, is rolled back to the browser's
 *    own defaults before the opening's own rules apply (::marker and ::backdrop keep the browser's
 *    box-sizing, as they did). Specificity (0,1,1): above every element rule of
 *    Bricks and WordPress (and unlayered, so above everything in @layer bricks), below or equal-and-earlier
 *    than every rule of the opening. SVG, img and canvas are left out: their HTML attributes (width,
 *    height, fill, …) are presentational hints, which `revert` would drop; the few outside rules that reach
 *    them are rolled back one property at a time.
 * 3. :focus — Bricks' `body.bricks-is-frontend :focus / :focus-visible {outline:auto}` (0,2,1) is rolled back
 *    at (0,3,0); the opening's own focus rules come later at (0,3,0) or more. */
.astro-opening--night-sky { all: initial; min-width: 0; min-height: 0; -webkit-locale: "zh-Hans"; }
.astro-opening--night-sky *:not(svg, svg *, img, canvas),
.astro-opening--night-sky :where(*:not(svg, svg *, img, canvas))::before,
.astro-opening--night-sky :where(*:not(svg, svg *, img, canvas))::after { all: revert; box-sizing: border-box; }
.astro-opening--night-sky :where(*:not(svg, svg *, img, canvas))::marker,
.astro-opening--night-sky :where(*:not(svg, svg *, img, canvas))::backdrop { all: revert; }
.astro-opening--night-sky svg, .astro-opening--night-sky svg * { border-color: revert; min-width: revert; min-height: revert; }
.astro-opening--night-sky img { border-color: revert; border-style: revert; max-width: revert; vertical-align: revert; outline: revert; contain-intrinsic-size: revert; }
.astro-opening--night-sky canvas { border-color: revert; display: revert; }
.astro-opening--night-sky.astro-opening--night-sky :focus { outline: revert; outline-offset: revert; }

.astro-opening--night-sky {
  --ns-ink: #0A0907; --ns-ink-2: #12100C;
  --ns-lamp: #E2A847; --ns-lamp-hi: #F1C77A;
  --ns-line: rgba(226, 168, 71, .30); --ns-line-2: rgba(226, 168, 71, .55);
  --ns-text: #ECE3D0; --ns-dim: rgba(236, 227, 208, .64); --ns-faint: rgba(236, 227, 208, .40);
  --ns-paper: #EEE6D5; --ns-paper-ink: #1D1A15; --ns-paper-dim: rgba(29, 26, 21, .62);
  --ns-cinnabar: #C2462F;
  --ns-song: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "Source Han Serif", "Noto Serif SC", serif;
  --ns-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --ns-mono: "SF Mono", ui-monospace, Menlo, "IBM Plex Mono", Consolas, monospace;
  --ns-ease: cubic-bezier(.2, 0, 0, 1);
  position: relative;
  display: block;
  background: var(--ns-ink);
  color: var(--ns-text);
  font-family: var(--ns-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.astro-opening--night-sky *, .astro-opening--night-sky *::before, .astro-opening--night-sky *::after { box-sizing: border-box; }
.astro-opening--night-sky [hidden] { display: none !important; }
.astro-opening--night-sky p, .astro-opening--night-sky h1, .astro-opening--night-sky h2, .astro-opening--night-sky h3,
.astro-opening--night-sky figure, .astro-opening--night-sky blockquote { margin: 0; }
.astro-opening--night-sky a { color: inherit; }
.astro-opening--night-sky .ns-k { font-family: var(--ns-sans); color: var(--ns-faint); margin-right: .6em; }
.astro-opening--night-sky .ns-live-only { display: none; }

/* ---------- the hero, static: name, line, the still of the sixteen charts ---------- */
.astro-opening--night-sky .ns-hero { padding: calc(clamp(56px, 12vh, 120px) + var(--astro-header-h, 0px)) clamp(16px, 4vw, 48px) clamp(40px, 8vh, 96px); }
.astro-opening--night-sky .ns-stage { max-width: 1320px; margin: 0 auto; text-align: center; }
.astro-opening--night-sky .ns-readout, .astro-opening--night-sky .ns-hint { display: none; }
.astro-opening--night-sky .ns-title h1 { font-family: var(--ns-song); font-weight: 600; font-size: clamp(36px, 5.2vw, 76px); line-height: 1.15; letter-spacing: .14em; color: var(--ns-text); }
.astro-opening--night-sky .ns-line { margin-top: .9em; font-family: var(--ns-song); font-size: clamp(16px, 1.6vw, 23px); letter-spacing: .22em; color: var(--ns-lamp); }
.astro-opening--night-sky .ns-rule { display: block; height: 1px; background: var(--ns-line-2); margin: 1.4em auto 1.1em; width: min(320px, 70%); transform-origin: left; }
.astro-opening--night-sky .ns-meta { font-family: var(--ns-mono); font-size: 12px; color: var(--ns-dim); line-height: 1.9; }
.astro-opening--night-sky .ns-still { margin-top: clamp(32px, 6vh, 64px); }
.astro-opening--night-sky .ns-still img { display: block; width: 100%; height: auto; border: 1px solid var(--ns-line); }
.astro-opening--night-sky .ns-still figcaption { margin-top: 18px; font-size: 13px; color: var(--ns-dim); letter-spacing: .06em; }
.astro-opening--night-sky .ns-still figcaption b { font-family: var(--ns-song); font-weight: 600; color: var(--ns-text); font-size: 15px; letter-spacing: .2em; margin-right: 1em; }
.astro-opening--night-sky .ns-dlist { font-family: var(--ns-mono); }

/* ---------- the hero, live: one pinned screen over a long scroll ---------- */
.astro-opening--night-sky .ns-hero.is-live { padding: 0; height: 440vh; }
/* the pinned screen starts below the site header (--astro-header-h, 0 without it): the readout at the top left and the
   compass point 北 at the top of the sky keep their room; the canvas measures itself, so the sky fits the smaller screen */
.astro-opening--night-sky .ns-hero.is-live .ns-stage { position: sticky; top: var(--astro-header-h, 0px); height: calc(100vh - var(--astro-header-h, 0px)); height: calc(100svh - var(--astro-header-h, 0px)); max-width: none; overflow: hidden; text-align: left; }
.astro-opening--night-sky .ns-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.astro-opening--night-sky .ns-hero.is-live .ns-readout { display: block; position: absolute; left: clamp(16px, 3.4vw, 48px); top: clamp(16px, 3vh, 36px); font-family: var(--ns-mono); font-size: 12px; line-height: 1.7; color: var(--ns-dim); letter-spacing: .02em; pointer-events: none; }
.astro-opening--night-sky .ns-t { color: var(--ns-lamp); }
.astro-opening--night-sky .ns-day { font-family: var(--ns-sans); color: var(--ns-faint); font-size: 11.5px; margin-top: 2px; }
.astro-opening--night-sky .ns-hero.is-live .ns-hint { display: block; position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 12px; letter-spacing: .3em; color: var(--ns-faint); pointer-events: none; }
.astro-opening--night-sky .ns-hero.is-live .ns-hint::after { content: ""; display: block; width: 1px; height: 28px; margin: 8px auto 0; background: var(--ns-line-2); }
.astro-opening--night-sky .ns-hero.is-live .ns-title { position: absolute; left: max(40px, 7vw); top: 50%; opacity: 0; pointer-events: none; text-align: left; }
.astro-opening--night-sky .ns-hero.is-live .ns-title .ns-rule { margin-left: 0; }
.astro-opening--night-sky .ns-hero.is-live .ns-title.is-top { left: 0; right: 0; width: auto; text-align: center; }
.astro-opening--night-sky .ns-hero.is-live .ns-title.is-top h1 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: .2em; }
.astro-opening--night-sky .ns-hero.is-live .ns-title.is-top .ns-line { margin-top: .5em; font-size: clamp(13px, 1.15vw, 17px); letter-spacing: .24em; }
.astro-opening--night-sky .ns-hero.is-live .ns-title.is-top .ns-rule,
.astro-opening--night-sky .ns-hero.is-live .ns-title.is-top .ns-meta { display: none; }
.astro-opening--night-sky .ns-hero.is-live .ns-still { margin: 0; }
.astro-opening--night-sky .ns-hero.is-live .ns-still img { display: none; }
.astro-opening--night-sky .ns-hero.is-live .ns-still figcaption { position: absolute; left: 0; right: 0; margin: 0; text-align: center; opacity: 0; pointer-events: none; }

/* ---------- the plates ---------- */
.astro-opening--night-sky .ns-plates { padding: 14vh 0 10vh; }
.astro-opening--night-sky .ns-plates__head { max-width: 1180px; margin: 0 auto 10vh; padding: 0 clamp(16px, 4vw, 48px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.astro-opening--night-sky .ns-plates__label { grid-column: 1 / 4; font-family: var(--ns-song); font-size: 14px; letter-spacing: .3em; color: var(--ns-lamp); padding-top: .8em; border-top: 1px solid var(--ns-line); }
.astro-opening--night-sky .ns-plates__head h2 { grid-column: 4 / 13; font-family: var(--ns-song); font-weight: 600; font-size: clamp(28px, 3vw, 44px); letter-spacing: .16em; line-height: 1.3; border-top: 1px solid var(--ns-line); padding-top: .35em; }
.astro-opening--night-sky .ns-plates__lead { grid-column: 4 / 13; margin-top: 1.1em; max-width: 38em; color: var(--ns-dim); font-family: var(--ns-song); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.95; letter-spacing: .06em; }
.astro-opening--night-sky.is-enhanced .ns-plates__lead .ns-live-only { display: inline; }
.astro-opening--night-sky .ns-plate { max-width: 1320px; margin: 0 auto 18vh; padding: 0 clamp(16px, 4vw, 48px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.astro-opening--night-sky .ns-plate__text { grid-column: 1 / 5; position: sticky; top: calc(14vh + var(--astro-header-h, 0px)); padding-top: .2em; }
.astro-opening--night-sky .ns-plate__no { font-family: var(--ns-mono); font-size: 12px; color: var(--ns-lamp); letter-spacing: .06em; }
.astro-opening--night-sky .ns-plate__no span { color: var(--ns-faint); margin-left: .8em; }
.astro-opening--night-sky .ns-plate h3 { margin: .5em 0 .6em; font-family: var(--ns-song); font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: .14em; line-height: 1.3; }
.astro-opening--night-sky .ns-plate blockquote p { font-size: 15px; line-height: 1.95; color: var(--ns-dim); text-align: justify; }
.astro-opening--night-sky .ns-plate__note { margin-top: 1em; font-size: 12.5px; color: var(--ns-faint); line-height: 1.8; }
.astro-opening--night-sky .ns-plate.is-live .ns-live-only { display: block; }
.astro-opening--night-sky .ns-plate__fig { grid-column: 5 / 13; }
.astro-opening--night-sky .ns-frame { position: relative; width: 100%; border: 1px solid var(--ns-line); background: #fff; overflow: hidden; }
.astro-opening--night-sky .ns-orig img { display: block; width: 100%; height: 100%; object-fit: contain; }
.astro-opening--night-sky .ns-plate.is-live .ns-frame { background: var(--ns-ink-2); }
.astro-opening--night-sky .ns-live { position: absolute; inset: 0; }
.astro-opening--night-sky .ns-live svg, .astro-opening--night-sky .ns-live canvas { display: block; width: 100%; height: 100%; }
.astro-opening--night-sky .ns-plate.is-live .ns-orig { position: absolute; inset: 0; background: #fff; clip-path: inset(0 0 0 100%); transition: clip-path .36s var(--ns-ease); }
.astro-opening--night-sky .ns-plate.is-live .ns-frame.show-orig .ns-orig { clip-path: inset(0 0 0 0); }
.astro-opening--night-sky .ns-switch { display: inline-flex; border: 1px solid var(--ns-line-2); margin-top: 14px; }
.astro-opening--night-sky .ns-switch button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; color: var(--ns-dim); font: inherit; font-family: var(--ns-song); font-size: 14px; letter-spacing: .24em; padding: .45em 1.1em .45em 1.34em; cursor: pointer; transition: color .18s var(--ns-ease), background-color .18s var(--ns-ease); }
.astro-opening--night-sky .ns-switch button + button { border-left: 1px solid var(--ns-line-2); }
.astro-opening--night-sky .ns-switch button[aria-pressed="true"] { background: var(--ns-lamp); color: var(--ns-ink); }
.astro-opening--night-sky .ns-switch button:focus-visible,
.astro-opening--night-sky .ns-range:focus-visible ~ .ns-grip,
.astro-opening--night-sky .ns-close__link:focus-visible,
.astro-opening--night-sky .ns-open:focus-visible { outline: 2px solid var(--ns-cinnabar); outline-offset: 2px; }
.astro-opening--night-sky .ns-plate__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.astro-opening--night-sky .ns-open { font-size: 12px; color: var(--ns-faint); letter-spacing: .08em; text-decoration: none; border-bottom: 1px solid var(--ns-line); }
.astro-opening--night-sky .ns-open:hover { color: var(--ns-lamp); }
/* #034: a slider instead of a switch */
.astro-opening--night-sky .ns-plate.is-live .ns-frame--wipe .ns-orig { clip-path: none; transition: none; }
.astro-opening--night-sky .ns-frame--wipe .ns-live { z-index: 1; clip-path: inset(0 calc(100% - var(--cut, 100%)) 0 0); }
.astro-opening--night-sky .ns-bar, .astro-opening--night-sky .ns-grip, .astro-opening--night-sky .ns-tag { z-index: 2; }
.astro-opening--night-sky .ns-range { z-index: 3; }
.astro-opening--night-sky .ns-bar { position: absolute; top: 0; bottom: 0; left: var(--cut, 100%); width: 1px; background: var(--ns-lamp); pointer-events: none; }
.astro-opening--night-sky .ns-grip { position: absolute; top: 50%; left: var(--cut, 100%); transform: translate(-50%, -50%); width: 30px; height: 30px; border: 1px solid var(--ns-lamp); background: var(--ns-ink); pointer-events: none; display: flex; align-items: center; justify-content: center; font-family: var(--ns-mono); font-size: 11px; color: var(--ns-lamp); }
.astro-opening--night-sky .ns-tag { position: absolute; top: 10px; font-family: var(--ns-song); font-size: 13px; letter-spacing: .24em; padding: 2px 8px; pointer-events: none; }
.astro-opening--night-sky .ns-tag--l { left: 10px; color: var(--ns-lamp); background: rgba(10, 9, 7, .8); }
.astro-opening--night-sky .ns-tag--r { right: 10px; color: #3a2a10; background: rgba(255, 255, 153, .85); }
.astro-opening--night-sky .ns-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* ---------- the end: the school's mark, its quotation, the ways on ([ASTRO-H1], N189, N190) ----------
 * Static (JavaScript off, reduced motion): ink, a lamp glow behind the mark, the quotation large and bright, the two
 * links, the nonprofit line — a complete end. Live (.is-live, set by close.js): a tall section whose screen is pinned
 * below the header; the canvas gathers the sky into the chart's centre, the light bursts, settles into the mark,
 * and the words arrive (their opacity is set by close.js). Ink below and above: no seam with the plates or the text. */
.astro-opening--night-sky .ns-close { position: relative; background: var(--ns-ink); }
.astro-opening--night-sky .ns-finale {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(12vh + var(--astro-header-h, 0px)) clamp(20px, 5vw, 64px) 14vh;
  text-align: center;
  background: radial-gradient(ellipse 60% 46% at 50% 34%, rgba(226, 168, 71, .16), rgba(226, 168, 71, 0) 70%);
}
.astro-opening--night-sky .ns-finale__mark { display: block; position: relative; width: clamp(88px, 9vw, 128px); height: auto; color: var(--ns-lamp); margin: 0 auto clamp(40px, 7vh, 72px); flex: none; }
.astro-opening--night-sky .ns-finale__quote { position: relative; margin: 0; max-width: 23em; font-size: clamp(22px, 2.5vw, 38px); }
.astro-opening--night-sky .ns-finale__quote p { margin: 0; font-family: var(--ns-song); font-weight: 600; font-size: 1em; line-height: 1.72; letter-spacing: .05em; color: #F6EEDC; text-wrap: balance; }
.astro-opening--night-sky .ns-finale__ways { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 40px; margin-top: clamp(40px, 7vh, 64px); }
.astro-opening--night-sky .ns-close__link { display: inline-block; font-family: var(--ns-song); font-size: 17px; letter-spacing: .4em; padding: .3em 0 .3em .4em; text-decoration: none; color: var(--ns-text); border-bottom: 1px solid var(--ns-line-2); transition: color .18s var(--ns-ease), border-color .18s var(--ns-ease); }
.astro-opening--night-sky .ns-close__link:hover { color: var(--ns-lamp-hi); border-color: var(--ns-lamp-hi); }
.astro-opening--night-sky .ns-close__apply { display: inline-block; font-family: var(--ns-song); font-weight: 600; font-size: 17px; letter-spacing: .4em; padding: .7em 1.6em .7em calc(1.6em + .4em); text-decoration: none; color: var(--ns-ink); background: var(--ns-lamp); transition: background-color .18s var(--ns-ease); }
.astro-opening--night-sky .ns-close__apply:hover { background: var(--ns-lamp-hi); }
.astro-opening--night-sky .ns-close__link:focus-visible,
.astro-opening--night-sky .ns-close__apply:focus-visible { outline: 2px solid var(--ns-lamp-hi); outline-offset: 4px; }
.astro-opening--night-sky .ns-close__foot { position: relative; margin-top: clamp(48px, 9vh, 88px); font-size: 12px; color: var(--ns-faint); letter-spacing: .14em; text-align: center; }
/* live */
.astro-opening--night-sky .ns-close.is-live { height: 320vh; }
.astro-opening--night-sky .ns-close.is-live .ns-finale {
  position: sticky; top: var(--astro-header-h, 0px);
  height: calc(100vh - var(--astro-header-h, 0px)); height: calc(100svh - var(--astro-header-h, 0px)); min-height: 0;
  overflow: hidden; padding: 0 clamp(20px, 5vw, 64px); background: none;
}
.astro-opening--night-sky .ns-finale__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.astro-opening--night-sky .ns-close.is-live .ns-finale__mark { visibility: hidden; }
.astro-opening--night-sky .ns-close.is-live .ns-finale__quote,
.astro-opening--night-sky .ns-close.is-live .ns-finale__ways,
.astro-opening--night-sky .ns-close.is-live .ns-close__foot { opacity: 0; will-change: opacity, transform; }
.astro-opening--night-sky .ns-close.is-live .ns-close__foot { position: absolute; left: 0; right: 0; bottom: 24px; margin: 0; }

@media (max-width: 820px) {
  .astro-opening--night-sky .ns-dlist { display: block; margin-top: 6px; font-size: 11px; }
  .astro-opening--night-sky .ns-hero.is-live .ns-dlist { display: none; }
  .astro-opening--night-sky .ns-hero.is-live .ns-title { left: 24px; right: 24px; }
  .astro-opening--night-sky .ns-plates__label { grid-column: 1 / 13; border-top: 0; padding-top: 0; }
  .astro-opening--night-sky .ns-plates__head h2, .astro-opening--night-sky .ns-plates__lead { grid-column: 1 / 13; }
  .astro-opening--night-sky .ns-plate { margin-bottom: 14vh; }
  .astro-opening--night-sky .ns-plate__text { grid-column: 1 / 13; position: static; margin-bottom: 18px; }
  .astro-opening--night-sky .ns-plate__fig { grid-column: 1 / 13; }
  .astro-opening--night-sky .ns-plate blockquote p { font-size: 14.5px; }
  .astro-opening--night-sky .ns-finale__quote p { line-height: 1.8; letter-spacing: .03em; }
  .astro-opening--night-sky .ns-finale__ways { gap: 16px 28px; }
}