/* site-header.css — the site header of astro.nyc: mark, name and line at the left, the menu at the right.
 * Author: [ASTRO-H1] helper of the 命理学 iMac window — a17 supervisor (Claude Opus 5.5), 2026-11-15. New file.
 * Owner decisions N189, N190 ("without a menu that also shows other pages, such as 申请, 观星台, etc. 学院, etc."),
 * N188 (a visitor must see at once that this is an astrology school), N184 (the mark 方盘含天).
 *
 * Every selector is under .astro-site-header, except the one custom property on :root, --astro-header-h: the header's
 * height, which the openings read to keep their own top pieces clear of it (they fall back to 0 without this file).
 *
 * Behaviour: always visible, fixed at the top. It does not step away on scroll: the opening is pinned for several
 * screens, and a header that hides on the way down would take the school's name off the screen exactly while the
 * opening plays, and every change of its height would move the pinned stage under the reader's eyes.
 *
 * The same isolation as the openings (build/fixes/bricks-css/README.md): the root starts from initial values (nothing
 * inherited from Bricks' body: 15px / 1.7 / #363636; nothing from html {font-size: 62.5%}), every descendant except the
 * SVG mark is rolled back to the browser's defaults at specificity (0,1,1), and every rule below has at least two
 * classes, so it wins. No rem anywhere.
 */

:root { --astro-header-h: 64px; }
@media (max-width: 819.98px) { :root { --astro-header-h: 56px; } }

/* ---------- isolation from the page's other stylesheets (Bricks, WordPress) ---------- */
.astro-site-header { all: initial; -webkit-locale: "zh-Hans"; }
.astro-site-header *:not(svg, svg *),
.astro-site-header :where(*:not(svg, svg *))::before,
.astro-site-header :where(*:not(svg, svg *))::after { all: revert; box-sizing: border-box; }
.astro-site-header :where(*:not(svg, svg *))::marker { all: revert; }
/* the SVG mark: content-box stated, so that Bricks' layered `*, ::before, ::after {box-sizing: border-box}` changes nothing */
.astro-site-header svg, .astro-site-header svg * { border-color: revert; min-width: revert; min-height: revert; box-sizing: content-box; }
.astro-site-header.astro-site-header :focus { outline: revert; outline-offset: revert; }

/* ---------- the root ---------- */
.astro-site-header {
  --ash-ink: #0A0907; --ash-text: #ECE3D0; --ash-dim: rgba(236, 227, 208, .84);
  --ash-lamp: #E2A847; --ash-lamp-hi: #F1C77A; --ash-line: rgba(226, 168, 71, .2);
  --ash-song: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "Source Han Serif", "Noto Serif SC", serif;
  --ash-ease: cubic-bezier(.2, 0, 0, 1);
  display: block;
  position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
  height: var(--astro-header-h, 64px);
  box-sizing: border-box;
  color: var(--ash-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-size: 15px; line-height: 1.2;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.astro-site-header .ash-bar {
  position: relative; isolation: isolate;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(16px, 3.4vw, 48px);
}
/* the band: ink, nearly opaque, so the words read over the white pictures too; blur on a pseudo-element only, so
   the phone's sheet (position: fixed) keeps the window as its containing block */
.astro-site-header .ash-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 9, 7, .93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ash-line);
}

/* ---------- mark, name, line ---------- */
.astro-site-header .ash-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; min-width: 0; color: inherit; text-decoration: none; }
.astro-site-header .ash-mark { display: block; flex: none; width: 30px; height: 30px; color: var(--ash-lamp); overflow: visible; }
.astro-site-header .ash-words { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.astro-site-header .ash-name { display: block; font-family: var(--ash-song); font-weight: 600; font-size: 18px; line-height: 1.05; letter-spacing: .2em; color: var(--ash-text); white-space: nowrap; }
.astro-site-header .ash-line { display: block; font-family: var(--ash-song); font-size: 11.5px; line-height: 1.1; letter-spacing: .17em; color: var(--ash-lamp); white-space: nowrap; }

/* ---------- the menu (wide screens) ---------- */
/* no stacking context of its own: the phone's sheet (z 1) must pass under the mark and name (z 2) of the bar */
.astro-site-header .ash-nav { display: block; }
.astro-site-header .ash-list { position: relative; z-index: 2; }
.astro-site-header .ash-list { display: flex; align-items: center; gap: clamp(14px, 2.1vw, 34px); margin: 0; padding: 0; list-style: none; }
.astro-site-header .ash-list li { display: block; margin: 0; padding: 0; }
.astro-site-header .ash-list a {
  position: relative; display: block; padding: 10px 0 10px .18em;
  font-family: var(--ash-song); font-size: 15px; line-height: 1.2; letter-spacing: .18em;
  color: var(--ash-dim); text-decoration: none;
  transition: color .18s var(--ash-ease);
}
.astro-site-header .ash-list a::after {
  content: ""; position: absolute; left: .18em; right: .18em; bottom: 4px; height: 1px; background: var(--ash-lamp);
  transform: scaleX(0); transform-origin: left; transition: transform .24s var(--ash-ease);
}
.astro-site-header .ash-list a:hover { color: var(--ash-lamp-hi); }
.astro-site-header .ash-list a:hover::after { transform: scaleX(1); }
/* 申请 — the one accented action, set apart */
.astro-site-header .ash-list .ash-apply { margin-left: clamp(4px, 1vw, 14px); padding-left: clamp(14px, 2.1vw, 34px); border-left: 1px solid var(--ash-line); }
.astro-site-header .ash-list .ash-apply a { padding: 9px 16px 9px calc(16px + .18em); background: var(--ash-lamp); color: var(--ash-ink); font-weight: 600; transition: background-color .18s var(--ash-ease); }
.astro-site-header .ash-list .ash-apply a::after { display: none; }
.astro-site-header .ash-list .ash-apply a:hover { background: var(--ash-lamp-hi); color: var(--ash-ink); }

.astro-site-header.astro-site-header a:focus-visible,
.astro-site-header.astro-site-header .ash-toggle:focus-visible { outline: 2px solid var(--ash-lamp-hi); outline-offset: 4px; }

/* ---------- the phone: one button, a full-screen list ---------- */
.astro-site-header .ash-fold { display: none; }
@media (max-width: 1023.98px) {
  .astro-site-header .ash-line { font-size: 11px; letter-spacing: .14em; }
  .astro-site-header .ash-list { gap: 16px; }
  .astro-site-header .ash-list a { font-size: 14px; letter-spacing: .12em; }
}
@media (max-width: 819.98px) {
  .astro-site-header .ash-bar { gap: 12px; }
  .astro-site-header .ash-brand { gap: 11px; }
  .astro-site-header .ash-mark { width: 26px; height: 26px; }
  .astro-site-header .ash-name { font-size: 16px; letter-spacing: .18em; }
  .astro-site-header .ash-line { font-size: 10.5px; letter-spacing: .12em; }
  .astro-site-header .ash-list { display: none; }
  .astro-site-header .ash-fold { display: block; }
}
.astro-site-header .ash-toggle {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  list-style: none; cursor: pointer; color: var(--ash-text);
  -webkit-tap-highlight-color: transparent;
}
.astro-site-header .ash-toggle::-webkit-details-marker { display: none; }
.astro-site-header .ash-toggle::marker { content: ""; }
.astro-site-header .ash-bars { position: relative; display: block; width: 22px; height: 10px; }
.astro-site-header .ash-bars span { position: absolute; left: 0; right: 0; display: block; height: 1.5px; background: currentColor; transition: transform .24s var(--ash-ease), top .24s var(--ash-ease); }
.astro-site-header .ash-bars span:first-child { top: 0; }
.astro-site-header .ash-bars span:last-child { top: 8.5px; }
.astro-site-header .ash-fold[open] .ash-bars span:first-child { top: 4.25px; transform: rotate(45deg); }
.astro-site-header .ash-fold[open] .ash-bars span:last-child { top: 4.25px; transform: rotate(-45deg); }

.astro-site-header .ash-sheet {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 100vh; height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--astro-header-h, 56px) + 5vh) clamp(24px, 8vw, 56px) 48px;
  background: var(--ash-ink);
}
.astro-site-header .ash-sheet__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ash-line); }
.astro-site-header .ash-sheet__list li { display: block; margin: 0; padding: 0; border-bottom: 1px solid var(--ash-line); }
.astro-site-header .ash-sheet__list a {
  display: block; padding: 18px 0 18px .3em;
  font-family: var(--ash-song); font-size: 24px; line-height: 1.2; letter-spacing: .3em;
  color: var(--ash-text); text-decoration: none;
}
.astro-site-header .ash-sheet__list a:hover { color: var(--ash-lamp-hi); }
.astro-site-header .ash-sheet__list .ash-apply { border-bottom: 0; padding-top: 28px; }
.astro-site-header .ash-sheet__list .ash-apply a { display: inline-block; padding: 14px 30px 14px calc(30px + .3em); background: var(--ash-lamp); color: var(--ash-ink); font-weight: 600; font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
  .astro-site-header .ash-list a, .astro-site-header .ash-list a::after, .astro-site-header .ash-list .ash-apply a,
  .astro-site-header .ash-bars span { transition: none; }
}

/* [ASTRO-S1] 2026-11-15 (co-written note): the page one is on — a quiet mark (N196, N197): the item in lamp gold with
   its hairline drawn; on the button 申请 a ring; in the phone's sheet the item in lamp gold. */
.astro-site-header .ash-list a[aria-current="page"] { color: var(--ash-lamp); }
.astro-site-header .ash-list a[aria-current="page"]::after { transform: scaleX(1); }
.astro-site-header .ash-list .ash-apply a[aria-current="page"] { color: var(--ash-ink); box-shadow: 0 0 0 1px var(--ash-ink), 0 0 0 2px var(--ash-lamp); }
.astro-site-header .ash-sheet__list a[aria-current="page"] { color: var(--ash-lamp); }