/* 慧盈官網新版型（2026-11 得獎級改版）基礎樣式：兩季 token、字體、版面格線、深淺段落、四角對位、右緣捲動進度、
   頁首頁尾、共用元件（主張／分頁／details／印記／圖版／內頁首屏／sticky 索引／段號軌／下一章帶）、浮現系統。
   設計正本＝tmp 設計總綱 v3.4 §2～§3；元件用法見 award_build/common.py 各函式說明。
   規則：
   - 文字顏色一律用 token（中間色由既有 token 以 color-mix 調出、不另立色值；對比由 DOM 掃描實測）；
     裝飾層（光暈、章號、四角、進度線、描框）一律 pointer-events:none。
   - 字重只准已載入的樣式：清單只住 award_build/common.py FONT_STYLES（Google Fonts 網址由它產生）；
     本檔寫 Noto Serif TC 一律 600、其餘字族一律 400。
   - 字級只用 --fs-* 級距（總綱 §2.2）、間距只用 --s1～--s7（§2.3）；例外（1px 線、圖示幾何、焦點框位移、裝飾章號）就地註明。
   - 收起內容（分頁非作用頁等）只以 site.js 初始化成功後加在 html 的 .aw-ok 為條件；手機選單另有 :target 後備。
   - 浮現：初始隱藏只寫在 (scripting: enabled) and (prefers-reduced-motion: no-preference) 內，並帶 3 秒保險動畫。 */

/* ── 1. token ─────────────────────────────────────────────────────────── */
:root {
  /* 兩季共用 */
  --paper: #F3EFE6; --paper-2: #EAE5DA; --text: #262A2F; --text-2: #5E636A;
  --cream: #E6E1D6; --cream-2: #A5A094; --gold: #C2A061; --gold-ink: #7A5D28; --error: #B3392B;
  /* 季別（預設＝t1 秋冬「墨藍・朱印」） */
  --ink: #10161D; --ink-2: #1A2430; --night: #0B1016;
  /* 印色＝logo 原色紅（單 1d：業主名片 PDF 原色；logo 自己的紅白正本在 shell.html aw-defs）。對 --paper 未達 4.5:1：
     只准用在非文字指示（≥3:1）與印記，不得當小字的底色或字色 */
  --seal: #ED1A3A; --seal-paper: #ED1A3A;
  /* 墨底「目前所在」指示線＝同一個 logo 紅（單 2）：只准當非文字指示（總綱色表條件：對 --ink、--ink-2 皆 ≥3:1；
     實測值見單 2 交件與單 1c 待決處置 1） */
  --seal-on-ink: #ED1A3A;
  --glow: rgba(60, 82, 110, .35);
  /* 首屏巨大章號：由既有 token 調出（var(--ink) 取當季值）；計算值 t1 對 --ink 4.03:1、--ink-2 3.48:1，
     t2 4.06:1／3.55:1（大字 ≥3:1；tmp_j1b_mix.py 算、DOM 掃描實測） */
  --numeral: color-mix(in srgb, var(--cream-2) 70%, var(--ink));
  /* 字體 */
  --f-serif: "Noto Serif TC", serif;
  --f-sans: "Noto Sans TC", sans-serif;
  --f-latin: "Newsreader", "Noto Serif TC", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* 字級：桌機 1440／手機 390 線性內插（總綱 §2.2） */
  --fs-h1: clamp(36px, 2.667vw + 25.6px, 64px);
  --fs-h2: clamp(28px, 1.143vw + 23.54px, 40px);
  --fs-h3: clamp(20px, .381vw + 18.51px, 24px);
  --fs-lead: clamp(18px, .381vw + 16.51px, 22px);
  --fs-body: clamp(16px, .0952vw + 15.63px, 17px);
  --fs-small: clamp(13px, .0952vw + 12.63px, 14px);
  --fs-label: 13px;
  --fs-it: 14px;                   /* 英文斜體副標（Newsreader 斜體字面小）：不低於此值 */
  /* 間距（只用這 7 個） */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px; --s7: 168px;
  /* 動態 */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-stamp: cubic-bezier(.3, 1.6, .5, 1);
  --t-micro: 220ms; --t-state: 320ms; --t-reveal: 800ms; --t-draw: 1500ms;
  /* 保險動畫延遲正本在此；site.js 不讀此值，改讀各動畫自己的 delay（ms 或 s 皆可） */
  --aw-safety-delay: 1200ms;
  /* 版面 */
  --aw-margin: clamp(20px, 5vw, 72px);
  --aw-head-h: 104px;              /* 頁首完整高 */
  --aw-bar-h: 64px;                /* 捲過首屏後的固定列高 */
}
html[data-season="t2"] {           /* t2 春夏「墨綠・金印」 */
  --ink: #0E1613; --ink-2: #17241E; --night: #0A0F0C;
  --seal: #C2A061; --seal-paper: #7A5D28; --seal-on-ink: #C2A061;
  --glow: rgba(36, 56, 45, .55);
  --paper: #F3F5F0; --paper-2: #E6EBE3;   /* 紙色分季（單 2 要做的 8，主管 11/06 挑 A 霧青白）：t1 照 :root 暖米白 */
}
@media (max-width: 1279.98px) { :root { --aw-head-h: 88px; } }

/* 深淺段落：同一組語意 token，換段落就換值（元件只用語意 token） */
body, .band--paper {
  --bg: var(--paper); --fg: var(--text); --fg-2: var(--text-2);
  --accent: var(--gold-ink); --on-accent: var(--paper);
  --line: rgba(38, 42, 47, .16); --line-claim: var(--text-2);
  --cur: var(--seal-paper); --focus: var(--gold-ink); --seal-c: var(--seal-paper);
}
.band--ink, .band--night, .aw-header {
  --bg: var(--ink); --fg: var(--cream); --fg-2: var(--cream-2);
  --accent: var(--gold); --on-accent: var(--ink);
  --line: rgba(230, 225, 214, .18); --line-claim: var(--cream-2);
  --cur: var(--seal-on-ink); --focus: var(--gold); --seal-c: var(--seal);
}
.band--night { --bg: var(--night); }
.band--paper, .band--ink, .band--night { background: var(--bg); color: var(--fg); }

/* ── 2. 基礎 ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--aw-bar-h) + var(--s2));   /* 錨點與焦點不被固定列遮 */
}
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 var(--fs-body)/1.95 var(--f-sans);
  font-variant-numeric: lining-nums tabular-nums;
  font-synthesis: none;            /* 不准假粗體／假斜體：字重只用已載入的樣式（清單見 common.py FONT_STYLES） */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--f-serif); font-weight: 600; line-height: 1.3; }
p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; }
b, strong { font-weight: inherit; }   /* 每個字族只載一種字重：後台 <b> 跟隨所在文字（不准假粗體） */
em, i, cite, address, dfn { font-style: normal; }
small { font-size: var(--fs-small); }
th { font-weight: 400; }
a { color: inherit; }
img, svg { max-width: 100%; height: auto; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--gold); color: var(--ink); }
[hidden] { display: none !important; }
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
.aw-main:focus, .aw-main:focus-visible { outline: none; }
.aw-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* 換行（總綱 §2.2 末，主管 03:4x；只寫這一處、不依特定字）：標題、標籤、短說明＝balance（多行時各行等長，末行不只剩 1～2 字）；
   內文段落與條列＝pretty（盡力避免末行孤字）。只寫 longhand text-wrap-style（簡寫 text-wrap 會把既有 nowrap 改回可換行）；
   會繼承，段內子元素跟著；:where＝零權重，頁面可覆寫。中文兩端對齊的內文在 WebKit 改為一般換行，見下方兩端對齊規則後的 @supports 區塊 */
:where(p, li, dd) { text-wrap-style: pretty; }
:where(h1, h2, h3, h4, h5, h6, figcaption, summary, .aw-lead, .aw-label, .aw-small, .aw-hero__kicker) { text-wrap-style: balance; }   /* 後寫＝同權重時蓋過 p */

/* 字級與字型工具 class */
.aw-h1 { font: 600 var(--fs-h1)/1.3 var(--f-serif); letter-spacing: .06em; }
.aw-h2 { font: 600 var(--fs-h2)/1.3 var(--f-serif); letter-spacing: .06em; }
.aw-h3 { font: 600 var(--fs-h3)/1.3 var(--f-serif); letter-spacing: .06em; }
.aw-lead { font: 600 var(--fs-lead)/1.8 var(--f-serif); letter-spacing: .04em; }
.aw-small { font-size: var(--fs-small); line-height: 1.8; }
.aw-label { font: 400 var(--fs-label)/1.5 var(--f-sans); letter-spacing: .18em; }
.aw-serif { font-family: var(--f-serif); font-weight: 600; }
.aw-latin { font-family: var(--f-latin); font-weight: 400; }
.aw-italic { font-family: var(--f-latin); font-weight: 400; font-style: italic; }
.aw-mono { font-family: var(--f-mono); font-weight: 400; }   /* 只用於拉丁字與數字 */
.aw-vert { writing-mode: vertical-rl; text-orientation: mixed; }
html[lang="en"] .aw-vert { writing-mode: horizontal-tb; }      /* 英文版所有直排改橫排 */

/* ── 3. 版面格線 ─────────────────────────────────────────────────────── */
.aw-wrap {
  width: 100%; max-width: calc(1320px + 2 * var(--aw-margin));
  margin-inline: auto; padding-inline: var(--aw-margin);
}
.aw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.aw-section { padding: var(--s6) 0; }

/* 說明書邊欄：1–2 欄段號軌、3–9 欄正文、10–12 欄邊欄；有章名（.aw-spec--labeled，spec() 自動加）＝
   第 1 欄直排章名、正文容器從第 2 欄起（第 2 欄段號）——章名、正文、邊欄三個方框任何寬度都不相交。
   段落（.aw-para）必須是 .aw-spec__body 的直屬子元素（英文版退回中文＝段落自己帶 lang，不包容器）。 */
.aw-spec { align-items: start; }
.aw-spec__label { grid-column: 1 / 2; grid-row: 1; position: sticky; top: calc(var(--aw-bar-h) + var(--s3));
  font: 600 var(--fs-h3)/1.3 var(--f-serif); letter-spacing: .3em; color: var(--fg); }
.aw-spec__body { grid-column: 1 / 10; grid-row: 1; display: grid; grid-template-columns: subgrid; align-content: start; }
.aw-spec__body > * { grid-column: 3 / 10; }
.aw-spec__aside { grid-column: 10 / 13; grid-row: 1; align-self: stretch; }
.aw-spec--labeled > .aw-spec__body { grid-column: 2 / 10; }       /* 子格線第 1 欄＝全域第 2 欄 */
.aw-spec--labeled > .aw-spec__body > * { grid-column: 2 / 9; }    /* ＝全域 3–9 欄 */
/* 英文版（直排改橫排）：章名不擠在第 1 欄，改佔一整列、放在正文上方（≤767 本來就堆疊，見 §10） */
@media (min-width: 768px) {
  html[lang="en"] .aw-spec--labeled > .aw-spec__label { grid-column: 1 / -1; grid-row: 1; position: static; margin-bottom: var(--s3); }
  html[lang="en"] .aw-spec--labeled > :is(.aw-spec__body, .aw-spec__aside) { grid-row: 2; }
}

/* 段號軌：段號放在「正文起始欄的前一欄」、靠左（1–2 欄段號軌時＝第 2 欄）——段號到正文的間隔＝一欄寬＋欄距−段號寬，
   與首頁（p-index.css：段號第 1 欄、正文第 2 欄起）同算法，全站段號與正文間隔一致（業主 11/09 14:26:21） */
.aw-para { margin: 0 0 var(--s3); }
/* 末行照常靠左。.aw-para：手機段落是一般區塊、在這層排行；桌機正文 .aw-para__text 是格線子項，繼承同一值。
   其餘＝各頁中文內文：首頁服務列說明、團隊短文段／敘述段／清單項、招募導言／段落／條列（一般中文換行，詞可拆到兩行：業主 11/08 20:26:24 選定）；
   估算器說明字：導言、欄位註記、輸入提示、錯誤字（欄位／匯率／伺服器／下載）、狀態行、免責說明、載入失敗訊息、noscript 說明（換行同上，見 fc-embed.css「說明字、錯誤字」） */
/* 業主 11/08 19:03:34、19:36:36、20:05:26：中文內文兩端對齊 */
:is(.aw-para, .p-idx__rdesc, .p-team__p, .p-team__li, .p-car__sub, .p-car__p, .p-car__li,
    .fce-lead, .fce-note, .fce-hint, .fce-err, .fce-status, .fce-disc, .fce-fail__msg, .fce-noscript):lang(zh) { text-align: justify; }
/* 中文兩端對齊的內文：WebKit 改一般換行（業主 11/10 15:37:12：「我可以接受說明最後一行只剩一、兩個字，這比字距不一致的影響小」）。
   原因：WebKit 的 pretty 會把整段重新排一遍（不是只讓末行提早折），前面幾行為了讓末幾行平均而提早斷行、留下大餘量，
   兩端對齊就把餘量撐進中文字之間，字距忽大忽小；改一般換行（auto）後行都排滿、只有末行可能剩 1～2 個字。
   量測出處：jobs/report_ws1.md（全站 WebKit 超標行 335→7）、jobs/report_ws2.md（真實候選 CSS 複驗）。
   判別用 hanging-punctuation：目前只有 WebKit 支援（Chromium 不支援、維持 pretty），屬暫行判別、不是保證——
   日後 Chromium 支援該屬性就會一併套用，屆時須重量；不是「只有 Safari」的永久事實。
   名單＝上方兩端對齊規則的中文內文（不含估算器 .fce-*，那邊歸 fc-embed.css）；內層自帶 pretty 的 li 要直接列出：
   .p-svc__li（服務頁條列，在 .aw-para 內）自帶上方 :where(li) 的 pretty，擋住外層繼承。
   不含 .p-team__nj（團隊頁英文、網址例外，靠左＋balance）、標題、標籤、表格、下載卡、費用帳冊 */
@supports (hanging-punctuation: first) {
  :is(.aw-para, .p-idx__rdesc, .p-team__p, .p-team__li, .p-car__sub, .p-car__p, .p-car__li, .p-svc__li):lang(zh) { text-wrap-style: auto; }
}
/* 雙星號變金色（業主 11/09 13:56:56）：後台文字的成對 **字** 由 award_build/emphasis.py 包成 .aw-accent（直接包住字、在最內層，
   蓋過外層既有字色）；紙底深金、墨底亮金＝跟著所在段落的 --accent */
.aw-accent { color: var(--accent); }
/* 例外：主張編號格（.aw-claim__no，費用頁類型格在內）主張時整格灌成 --accent 底、字改 --on-accent；格內金色字跟著改，免得金字疊金底看不見 */
.aw-claim:hover .aw-claim__no .aw-accent, .aw-claim:focus-visible .aw-claim__no .aw-accent,
.aw-claim:focus-within .aw-claim__no .aw-accent, .aw-claim.is-claimed .aw-claim__no .aw-accent { color: inherit; }
.aw-spec__body > .aw-para { grid-column: 1 / 10; display: grid; grid-template-columns: subgrid; align-items: baseline; }   /* 段號與正文首行基線對齊 */
.aw-spec--labeled > .aw-spec__body > .aw-para { grid-column: 1 / 9; }
.aw-para__no {
  grid-column: 2 / 3; font: 400 var(--fs-label)/1.4 var(--f-mono); letter-spacing: .06em; color: var(--fg-2);
  white-space: nowrap; user-select: none;
}
.aw-para__text { grid-column: 3 / 10; max-width: 40em; }
.aw-spec--labeled .aw-para__no { grid-column: 1 / 2; }
.aw-spec--labeled .aw-para__text { grid-column: 2 / 9; }
@supports not (grid-template-columns: subgrid) {
  .aw-spec__body { display: block; }
  .aw-spec__body > .aw-para { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); column-gap: 24px; align-items: baseline; }
  .aw-spec--labeled > .aw-spec__body > .aw-para { grid-template-columns: minmax(0, 1fr) minmax(0, 7fr); }
  .aw-para__no, .aw-para__text, .aw-spec--labeled .aw-para__no, .aw-spec--labeled .aw-para__text { grid-column: auto; }
}

/* ── 4. 全站裝飾層：skip link、四角對位、右緣捲動進度 ──────────────────────── */
.aw-skip {
  position: fixed; left: var(--s2); top: var(--s2); z-index: 200;
  padding: var(--s2); background: var(--paper); color: var(--ink);
  font: 400 var(--fs-small)/1.4 var(--f-sans); text-decoration: none; transform: translateY(-200%);
}
.aw-skip:focus, .aw-skip:focus-visible { transform: none; outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.aw-corners i {
  position: fixed; z-index: 70; width: var(--s2); height: var(--s2); pointer-events: none;
  border: 0 solid color-mix(in srgb, var(--gold) 70%, transparent);
}
.aw-corners i:nth-child(1) { top: var(--s2); left: var(--s2); border-top-width: 1px; border-left-width: 1px; }
.aw-corners i:nth-child(2) { top: var(--s2); right: var(--s2); border-top-width: 1px; border-right-width: 1px; }
.aw-corners i:nth-child(3) { bottom: var(--s2); left: var(--s2); border-bottom-width: 1px; border-left-width: 1px; }
.aw-corners i:nth-child(4) { bottom: var(--s2); right: var(--s2); border-bottom-width: 1px; border-right-width: 1px; }
.aw-progress {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: 1px; pointer-events: none;
  background: rgba(194, 160, 97, .18);
}
.aw-progress span {
  display: block; height: 100%; background: var(--gold);
  transform-origin: 50% 0; transform: scaleY(var(--aw-p, 0));   /* 後備：site.js 寫 --aw-p */
}
@supports (animation-timeline: scroll()) {
  .aw-progress span { animation: aw-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes aw-progress { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── 5. 頁首 ─────────────────────────────────────────────────────────── */
.aw-header { --aw-hh: var(--aw-head-h); position: relative; z-index: 80; background: var(--bg); color: var(--fg); }
.aw-header__bar { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s3); min-height: var(--aw-hh); }
/* 頁首高＝至少 --aw-hh、內容放不下可再長高（窄寬／字級放大時工具列換行）；site.js 把實高寫進 --aw-hdr-full／--aw-hdr */
html.aw-ok .aw-header { position: absolute; top: 0; left: 0; right: 0; min-height: var(--aw-hh); }
html.aw-ok .aw-header__bar { flex-wrap: nowrap; }
html.aw-ok .aw-main { padding-top: var(--aw-hdr-full, var(--aw-head-h)); }
html.aw-ok .aw-header.is-stuck {
  --aw-hh: var(--aw-bar-h); position: fixed; box-shadow: 0 1px 0 var(--line);
  transition: transform var(--t-state) var(--ease-io);
}
html.aw-ok .aw-header.is-hidden { transform: translateY(-100%); }
html.aw-ok .aw-header.aw-snap { transition: none; }
html.aw-ok.aw-menu-open .aw-header { position: fixed; transform: none; }
html.aw-menu-open { overflow: hidden; }

.aw-brand {
  display: flex; align-items: baseline; gap: var(--s2); min-height: 44px; margin-right: auto;
  color: var(--fg); text-decoration: none; padding-block: var(--s1);
}
.aw-brand__zh { font: 600 20px/1.2 var(--f-serif); letter-spacing: .12em; white-space: nowrap; }
.aw-brand__en { font: 400 var(--fs-label)/1.2 var(--f-mono); letter-spacing: .32em; color: var(--gold); white-space: nowrap; }
.aw-brand:hover .aw-brand__zh, .aw-brand:focus-visible .aw-brand__zh { color: var(--gold); }

.aw-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--s3); list-style: none; }
.aw-nav__a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font: 400 14px/1.3 var(--f-sans); letter-spacing: .12em; white-space: nowrap;
  color: color-mix(in srgb, var(--fg) 45%, var(--fg-2)); text-decoration: none; transition: color var(--t-micro);   /* 比次要字亮一階；hover、選中＝--fg 加短線 */
}
.aw-nav__contact { display: none; }   /* 只在窄版選單顯示（下方 media） */
.aw-nav__a::after {
  content: ""; position: absolute; left: 0; bottom: var(--s1); width: 0; height: 1px;
  background: var(--fg-2); transition: width var(--t-micro) var(--ease-out);
}
.aw-nav__a:hover, .aw-nav__a:focus-visible, .aw-nav__a[aria-current="page"] { color: var(--fg); }
.aw-nav__a:hover::after, .aw-nav__a:focus-visible::after { width: var(--s2); }
.aw-nav__a[aria-current="page"]::after { width: var(--s2); height: 2px; background: var(--cur); }

.aw-header__tools { display: flex; flex: 0 0 auto; align-items: center; gap: var(--s1); white-space: nowrap; }
.aw-lang { display: flex; align-items: center; font: 400 13px/1 var(--f-sans); letter-spacing: .08em; }
.aw-lang__a, .aw-lang__cur {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--s1);
}
.aw-lang__a { color: var(--fg-2); text-decoration: none; }
.aw-lang__a:hover, .aw-lang__a:focus-visible { color: var(--fg); text-decoration: underline; text-underline-offset: 6px; }
.aw-lang__cur { color: var(--fg); }
.aw-lang__cur::after { content: ""; position: absolute; left: 50%; bottom: var(--s1); width: var(--s2); height: 2px; margin-left: calc(var(--s2) / -2); background: var(--cur); }

.aw-menu { display: none; }
@media (max-width: 1279.98px) {
  .aw-header__bar { column-gap: var(--s2); }
  .aw-header__tools { gap: 0; }
  /* 品牌不縮（字是 nowrap，縮了方框字面會溢出、壓到工具列）；放不下時由下方窄寬規則先藏選單字、再縮品牌 */
  .aw-brand { flex-direction: column; align-items: flex-start; gap: 0; flex: 0 0 auto; }
  .aw-brand__zh { font-size: 17px; letter-spacing: .08em; }
  .aw-nav { display: none; flex: 0 0 100%; order: 9; }
  html:not(.aw-ok) .aw-menu--link { display: inline-flex; }
  html.aw-ok .aw-menu--btn { display: inline-flex; }
  .aw-menu {
    align-items: center; gap: var(--s1); min-width: 44px; min-height: 44px; padding: 0 0 0 var(--s1); white-space: nowrap;
    border: 0; background: none; color: var(--fg); cursor: pointer; text-decoration: none;
    font: 400 13px/1 var(--f-sans); letter-spacing: .12em;
  }
  .aw-menu__icon { display: inline-grid; gap: 6px; width: 22px; }   /* 圖示幾何（例外：非版面間距） */
  .aw-menu__icon i { display: block; height: 1px; background: currentColor; transition: transform var(--t-micro) var(--ease-out); }
  .aw-menu[aria-expanded="true"] .aw-menu__icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .aw-menu[aria-expanded="true"] .aw-menu__icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  /* 無 JS／site.js 失敗後備：「選單」錨點 → #aw-nav:target 在頁首下方展開（頁首此時在文件流中） */
  html:not(.aw-ok) .aw-nav:target { display: block; padding-bottom: var(--s3); }
  /* site.js 正常：按鈕開關全幅選單面板（背景 inert、Esc 關） */
  html.aw-ok .aw-header__bar { flex-wrap: wrap; }   /* 放不下＝工具列換第二行（最後退路；正常字級 ≥320 寬不會發生） */
  html.aw-ok.aw-menu-open .aw-nav {
    display: block; position: fixed; left: 0; right: 0; top: var(--aw-hdr, var(--aw-hh)); bottom: 0; z-index: 79;
    overflow-y: auto; overscroll-behavior: contain; background: var(--bg);
    padding: var(--s3) var(--aw-margin) var(--s6);
  }
  .aw-nav__list { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .aw-nav__a {
    display: flex; min-height: 56px; border-bottom: 1px solid var(--line); color: var(--fg);
    font: 600 20px/1.3 var(--f-serif); letter-spacing: .16em;
  }
  html[lang="en"] .aw-nav__a { font-family: var(--f-latin); font-weight: 400; letter-spacing: .04em; }
  /* 選單裡的電話與信箱：純文字（footer_data）。面板夠高時貼在面板底部（margin-top:auto），矮螢幕接在清單後、面板可捲到底 */
  html.aw-ok.aw-menu-open .aw-nav { display: flex; flex-direction: column; padding-bottom: var(--s5); }
  .aw-nav__list { flex: 0 0 auto; }
  /* 字色（單 3m2 A4）：資訊性小字目標 ≥7:1——次要色往本文色調 45%（深底＝調亮、淺底＝調暗；色票不改，量值見單 3m2 交件） */
  .aw-nav__contact {
    display: block; flex: 0 0 auto; margin-top: auto; padding-top: var(--s4);
    font: 400 var(--fs-body)/1.9 var(--f-sans); letter-spacing: .04em; color: color-mix(in srgb, var(--fg-2) 55%, var(--fg)); overflow-wrap: anywhere;
  }
}

/* 有語言切換（.aw-header--lang，lang_open=true）的窄寬頁首：語言切換一律直接可見；放不下時依序犧牲
   ① <390px 選單鈕只留圖示（可見字改僅報讀，按鈕仍 ≥44×44）② <360px 品牌字距 0、字級 15px（不折行）。
   門檻＝量測值（品牌 17px 約 165px＋語言 88px＋選單 67～78px＋間距，tmp_j1b_hdr.js 量 320～390） */
@media (max-width: 389.98px) {
  .aw-header--lang .aw-menu__txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .aw-header--lang .aw-menu { justify-content: center; padding: 0; gap: 0; }
}
@media (max-width: 359.98px) {
  .aw-header--lang .aw-header__bar { column-gap: var(--s1); }
  .aw-header--lang .aw-brand__zh { font-size: 15px; letter-spacing: 0; }
}

/* ── 6. 內頁首屏插槽 ───────────────────────────────────────────────────── */
/* 首屏構圖規則（單 2 定，單 3／4 照用）：三區各佔各的欄、互不相疊——
   ① 巨大章號＝第 1–3 欄（字級＝3 欄寬），左緣對齊版心第 1 欄，色系內細描邊、完整呈現在首屏底緣之上（單 2c 第二段；原 28% 出血作廢）；
   ② 頁名區（kicker＋h1）＝第 4–6 欄；英文版 h1 橫排較長，改佔第 4–12 欄一整列、圖版排到下一列；
   ③ 圖版＝第 7–12 欄；④ extra＝第 4–12 欄（不得進第 1–3 欄＝章號區）。
   ≤767px 單欄：頁名 → 圖版 → extra 依序堆疊，章號移到最下方獨佔一列（首屏下留白＝章號高＋兩段間距），同樣完整呈現。
   首屏底緣一條金色細線（裁切線）：首屏的收束線。
   直式平板（≥768px 直向）首屏高度依內容（見下方 media），不留上方大片空白。
   驗收判準（主管 02:5x）：章號字形墨跡與圖版兩兩不相交、間距 ≥12px（量法見單 2 tmp_j2_hero.js）。 */
.aw-hero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: min(78svh, 760px); padding: var(--s5) 0 var(--s6);
  container-type: inline-size;     /* 章號字級與左緣用 cqi（＝首屏實寬，不含捲軸） */
}
.aw-hero::after {                  /* 裁切線（裝飾 1px） */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 1px; pointer-events: none;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
}
.aw-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 85% 12%, var(--glow), transparent 70%);
  /* 上緣淡到全透明＝與頁首底色接平（兩者同為 --ink），頁首下緣右側不留水平接縫；頁首固定列、無 JS 都適用。黑色只是遮罩值、不上色 */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--s6)); mask-image: linear-gradient(to bottom, transparent, #000 var(--s6));
}
.aw-hero__no {
  /* 例外：裝飾章號（展示字級＝版心 3 欄寬：3 欄＋2 欄距＝(版心−11×24px)/4＋48px＝版心/4−18px；
     版心＝min(1320px, 首屏寬−2×外邊距)），不在 §2.2 級距內。第一組宣告＝不支援 cqi 時的 vw 後備 */
  position: absolute; bottom: var(--s3); margin: 0; z-index: 0;
  left: max(var(--aw-margin), (100vw - 1320px) / 2);
  left: max(var(--aw-margin), (100cqi - 1320px) / 2);
  font: 600 calc(min(1320px, 100vw - 2 * var(--aw-margin)) / 4 - 18px)/1 var(--f-serif);
  font-size: calc(min(1320px, 100cqi - 2 * var(--aw-margin)) / 4 - 18px);
  /* 色系內細描邊（單 2c 第二段；兩季同 token）：描邊在下、底色填字在上（paint-order），字形筆畫重疊處不露內線；描邊 2px＝露出外側 1px */
  color: var(--numeral); -webkit-text-fill-color: var(--bg); -webkit-text-stroke: 2px currentColor; paint-order: stroke fill;
  pointer-events: none; user-select: none; view-transition-name: chapter;
}
/* 直式平板（≥768px 且直向，例 768×1024、1024×1366）：首屏高度依內容、不撐到 78svh（撐滿＝上方大片空白、內容擠在下半） */
@media (min-width: 768px) and (orientation: portrait) { .aw-hero { min-height: 0; } }
.aw-hero__grid { position: relative; z-index: 1; align-items: end; row-gap: var(--s4); }
.aw-hero__title { grid-column: 4 / 7; display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
html[lang="en"] .aw-hero__title { grid-column: 4 / -1; }
.aw-hero__kicker { font: italic 400 var(--fs-lead)/1.3 var(--f-latin); letter-spacing: .02em; color: var(--gold); }
.aw-hero__h1 {
  font: 600 var(--fs-h1)/1.3 var(--f-serif); letter-spacing: .2em; color: var(--fg);
}
/* 直排時限制直排高度（垂直方向＝直排的 inline 軸，故用 max-inline-size；放不下＝換到下一行，不溢出首屏）；
   橫排（手機、英文版）不限 */
.aw-hero__h1.aw-vert { max-inline-size: 60svh; }
html[lang="en"] .aw-hero__h1 { font-size: clamp(32px, 8vw, 64px); letter-spacing: .02em; max-inline-size: none; }
.aw-hero__plate { grid-column: 7 / 13; }
.aw-hero__extra { grid-column: 4 / -1; }
.aw-hero__extra:empty, .aw-hero__plate:empty { display: none; }

/* 矮版開場（六個內頁都用：inner_hero 的 cls 帶 aw-hero--low；業主 11/08 16:03:25 要各內頁首屏高度一致，以費用頁為準）：第一屏看得到內容。
   語言不變（空心章號、圖版、kicker；首屏圖版不標圖號），構圖換成一條橫幅：章號第 1–2 欄、橫排頁名第 3–7 欄、寬幅圖版第 8–12 欄，三者下緣對齊。
   章號字級＝版心 2 欄寬（2 欄＋1 欄距＝版心/6−20px；例外：裝飾章號）；高度由圖版決定，不寫 min-height。
   各頁圖版畫在 640×178 寬幅畫布（slice；主要圖形畫在中段），各寬度比例只住這裡（含下方矮視窗與手機段），頁面 CSS 不另改開場尺寸。 */
.aw-hero--low { min-height: 0; padding: var(--s4) 0; }
.aw-hero--low .aw-hero__glow { background: radial-gradient(45% 150% at 85% 45%, var(--glow), transparent 70%); }   /* 開場矮：百分比橢圓會壓成橫條，放高成圓形光暈 */
.aw-hero--low .aw-hero__no {
  bottom: var(--s4);
  font-size: calc(min(1320px, 100vw - 2 * var(--aw-margin)) / 6 - 20px);
  font-size: calc(min(1320px, 100cqi - 2 * var(--aw-margin)) / 6 - 20px);
}
.aw-hero--low .aw-hero__title, html[lang="en"] .aw-hero--low .aw-hero__title { grid-column: 3 / 8; gap: var(--s1); }
.aw-hero--low .aw-hero__h1.aw-vert { writing-mode: horizontal-tb; letter-spacing: .1em; max-inline-size: none; }
html[lang="en"] .aw-hero--low .aw-hero__h1 { font-size: clamp(28px, 3.4vw, 48px); letter-spacing: .02em; }
.aw-hero--low .aw-hero__plate { grid-column: 8 / 13; }
.aw-hero--low .aw-plate__art { aspect-ratio: 18 / 5; }
/* 平板：圖版欄太窄，改第 7–12 欄；比例放回一些 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .aw-hero--low .aw-hero__plate { grid-column: 7 / 13; }
  .aw-hero--low .aw-hero__title, html[lang="en"] .aw-hero--low .aw-hero__title { grid-column: 3 / 7; }
  .aw-hero--low .aw-plate__art { aspect-ratio: 5 / 2; }
}

/* 矮視窗（寬 ≥1024、高 ≤760，例 1280×720）：開場不再撐到 78svh、上下留白收成 --s4，整個開場（含章號）留在視窗內；
   圖版寬度上限依視窗高算（4:3 圖＋上下內距 48px＋圖號列 33px），更寬的螢幕也不會把高度撐出視窗 */
@media (min-width: 1024px) and (max-height: 760px) {
  .aw-hero { min-height: 0; padding: var(--s4) 0; }
  .aw-hero__no { bottom: var(--s4); }
  .aw-hero__plate { justify-self: end; width: 100%; max-width: calc((100svh - var(--aw-hdr-full, var(--aw-head-h)) - 2 * var(--s4) - 81px - var(--s3)) * 4 / 3 + 48px); }
}
/* 矮版開場的矮視窗（寬 ≥1024、高 ≤800；原費用頁專用、單 3ui 推廣到全部矮版開場）：開場收內距、圖版限寬（比例不變、圖不裁），
   章號設上限（開場變矮後不被裁）。寫在上方 ≤760 那段之後＝同權重時蓋過它（矮版圖版寬上限以這裡的 412px 為準）。
   章號上限＝章號字框（行高 1＝字級）不高出首屏上緣：開場高＝上下內距 2×24＋圖版 139（412 寬圖版）＝187，章號底距 24 → 上限 163
   （單 hn1：原 180 時字框高出首屏上緣 17px，貳～柒的字墨頂端被首屏 overflow:hidden 削掉 1～4px）。
   例外：412 圖版外寬、163 章號上限為幾何值 */
@media (min-width: 1024px) and (max-height: 800px) {
  .aw-hero--low { padding: var(--s3) 0; }
  .aw-hero--low .aw-hero__no { bottom: var(--s3); font-size: min(calc(min(1320px, 100cqi - 2 * var(--aw-margin)) / 6 - 20px), 163px); }
  .aw-hero--low .aw-hero__plate { justify-self: end; width: 100%; max-width: 412px; }
  .aw-hero--low .aw-plate { padding: var(--s2); }
  .aw-hero--low .aw-plate__foot { margin-top: var(--s1); }
}

/* 團隊、服務、招募三頁的內容段上緣（單 3ui 前接在較高的品牌頁開場後、收一級；開場改矮版後間距照舊）：
   --pad＝團隊頁脊線用的同一個值；招募頁另在 p-careers.css 收到 --s4 */
@media (min-width: 1024px) and (orientation: landscape) {
  :is(.p-team__hero, .p-svc__hero, .p-car__hero) + .aw-section { --pad: var(--s5); padding-top: var(--s5); }
}

/* ── 7. 共用元件 ─────────────────────────────────────────────────────── */
/* 7.1 主張：虛線框描成實線（300ms）＋編號空心灌實（600ms）；hover／focus／觸控 60% 可見（.is-claimed）
   虛線框與實線描框畫在同一個 SVG、同一個幾何（common.claim_frame）：虛線套遮罩，遮罩裡的擦除線與實線同長、同轉場（共用下面
   .aw-claim__frame rect 的 dashoffset 規則，含團隊頁選中、服務頁預設項、列印），實線描到哪、那段虛線就擦掉（擦除線前端多 2px），
   描完只剩實線、退回時虛線跟著實線尾端回來（業主 11/09 14:59:49）。框線位置仍佔 1px（透明邊框），版面不變 */
.aw-claim {
  position: relative; display: block; padding: var(--s3); color: inherit; text-decoration: none;
  border: 1px solid transparent;
}
.aw-claim__frame {
  position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
  max-width: none; overflow: visible; pointer-events: none;
}
.aw-claim__frame rect {
  x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px);
  fill: none; stroke: var(--accent); stroke-width: 1px;
  stroke-dasharray: 100 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 300ms var(--ease-out);
}
/* 虛線（不主張）：段長 3、間隔 2（原 1px dashed 邊框在 Chromium 的段長）；週期 5 整除 100，dashoffset 釘住不跟主張狀態走 */
.aw-claim .aw-claim__frame .aw-claim__dl { stroke: var(--line-claim); stroke-dasharray: 3 2; stroke-dashoffset: 0 !important; transition: none; }
/* 遮罩：白底＝虛線照常顯示；黑色擦除線（100 110：靜止時一段都沒有、主張完＝整圈，方頭多蓋 2px）。例外：#fff／#000 是遮罩明度值、不是畫面色 */
.aw-claim__frame .aw-claim__mk { x: -2px; y: -2px; width: calc(100% + 4px); height: calc(100% + 4px); fill: #fff; stroke: none; }
.aw-claim__frame .aw-claim__er { stroke: #000; stroke-width: 4px; stroke-linecap: square; stroke-dasharray: 100 110; }
/* 底線式主張（費用頁帳冊分頁 p-fee.css、服務頁章節索引 p-service.css）：實線描到的長度。註冊後才能轉場；
   不支援 @property＝直接切換（不描線，也不會兩種線同時出現） */
@property --aw-u { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
.aw-claim__no {
  position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--s1); margin-bottom: var(--s2);
  border: 1px solid var(--accent); color: var(--accent);
  font: 400 13px/1 var(--f-mono); letter-spacing: .04em;
  transition: color 600ms var(--ease-out);
}
.aw-claim__no::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: -1;
  background: var(--accent); transition: height 600ms var(--ease-out);
}
.aw-claim__body { display: block; }
.aw-claim:hover .aw-claim__frame rect, .aw-claim:focus-visible .aw-claim__frame rect,
.aw-claim:focus-within .aw-claim__frame rect, .aw-claim.is-claimed .aw-claim__frame rect { stroke-dashoffset: 0; }
.aw-claim:hover .aw-claim__no, .aw-claim:focus-visible .aw-claim__no,
.aw-claim:focus-within .aw-claim__no, .aw-claim.is-claimed .aw-claim__no { color: var(--on-accent); }
.aw-claim:hover .aw-claim__no::before, .aw-claim:focus-visible .aw-claim__no::before,
.aw-claim:focus-within .aw-claim__no::before, .aw-claim.is-claimed .aw-claim__no::before { height: 100%; }

/* 7.2 分頁：site.js 初始化成功（html.aw-ok＋[data-ready]）才收起非作用頁、才出分頁列；否則全部展開、分頁列不出
   （分頁列 HTML 帶 hidden，site.js 在整個初始化完成、加 aw-ok 之後才拿掉；CSS 再以 aw-ok 把關一次） */
html:not(.aw-ok) .aw-tabs__list, .aw-tabs:not([data-ready]) > .aw-tabs__list { display: none !important; }
.aw-tabs__list { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: 0 0 var(--s4); border-bottom: 1px solid var(--line); }
.aw-tabs__tab {
  position: relative; min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--fg-2); font: 400 var(--fs-body)/1.3 var(--f-sans); letter-spacing: .08em; transition: color var(--t-micro);
}
.aw-tabs__tab::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px; background: var(--cur);
  transition: left var(--t-state) var(--ease-out), right var(--t-state) var(--ease-out);
}
.aw-tabs__tab:hover, .aw-tabs__tab:focus-visible, .aw-tabs__tab[aria-selected="true"] { color: var(--fg); }
.aw-tabs__tab[aria-selected="true"]::after { left: 0; right: 0; }
.aw-tabs__heading { margin: 0 0 var(--s3); font: 600 var(--fs-h3)/1.3 var(--f-serif); }
.aw-tabs__panel + .aw-tabs__panel { margin-top: var(--s5); }
/* 只管直屬子元素：巢狀分頁的內層沒初始化時不受外層規則影響 */
html.aw-ok .aw-tabs[data-ready] > .aw-tabs__panel:not(.is-active) { display: none; }
html.aw-ok .aw-tabs[data-ready] > .aw-tabs__panel { margin-top: 0; }
html.aw-ok .aw-tabs[data-ready] > .aw-tabs__panel > .aw-tabs__heading {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 7.3 <details> */
.aw-details { border-top: 1px solid var(--line); }
.aw-details:last-child, .aw-details:last-of-type { border-bottom: 1px solid var(--line); }
.aw-details__sum {
  display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) 0;
  cursor: pointer; list-style: none; transition: color var(--t-micro);
}
.aw-details__sum::-webkit-details-marker { display: none; }
.aw-details__sum:hover, .aw-details__sum:focus-visible { color: var(--accent); }
.aw-details__title { flex: 1 1 auto; min-width: 0; }
.aw-details__mark { position: relative; flex: 0 0 auto; width: 24px; height: 24px; }
.aw-details__mark::before, .aw-details__mark::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: currentColor;
  transition: transform var(--t-state) var(--ease-out);
}
.aw-details__mark::after { transform: rotate(90deg); }
.aw-details[open] > .aw-details__sum .aw-details__mark::after { transform: rotate(0deg); }
.aw-details__body { padding: 0 0 var(--s4); }

/* 7.4 印記：t1 朱印（實底）／t2 金框陰刻印；size s／m／l */
.aw-seal {
  --seal-fs: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  writing-mode: vertical-rl; text-orientation: upright;
  padding: .45em .32em; font: 600 var(--seal-fs)/1 var(--f-serif); letter-spacing: .1em;
  background: var(--seal-paper); color: var(--paper);
  box-shadow: inset 0 0 0 3px var(--seal-paper), inset 0 0 0 4px rgba(243, 239, 230, .62);
}
.aw-seal--s { --seal-fs: 12px; }
.aw-seal--l { --seal-fs: 28px; }
html[data-season="t2"] .aw-seal {
  background: transparent; color: var(--seal-c); border: 1px solid var(--seal-c);
  box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--seal-c);
}
/* 7.4b 事務所 logo（seal('慧盈') 輸出；註冊商標：只縮放，不加會改變外形的效果）。正方框、symbol 以 meet 置中；
   原色版紅白寫在 shell.html symbol；金色版＝currentColor＝--seal-c。tone auto＝t1 原色、t2 金色（common.py seal） */
.aw-logo { --logo-sz: 56px; display: inline-block; flex: 0 0 auto; width: var(--logo-sz); height: var(--logo-sz); vertical-align: middle; color: var(--seal-c); }
.aw-logo--s { --logo-sz: 32px; }
.aw-logo--l { --logo-sz: 88px; }
.aw-logo svg { display: block; width: 100%; height: 100%; }
.aw-logo--auto .aw-logo__g, html[data-season="t2"] .aw-logo--auto .aw-logo__o { display: none; }
html[data-season="t2"] .aw-logo--auto .aw-logo__g { display: inline; }
.aw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }   /* 只放 symbol，不佔版面 */

/* 7.5 圖版外框：四角對位＋FIG. 編號（Plex Mono；首屏圖版不標號＝不出 figcaption，common.plate） */
.aw-plate { position: relative; padding: var(--s3); border: 1px solid var(--line); }
.aw-plate::before, .aw-plate::after { content: ""; position: absolute; width: var(--s2); height: var(--s2); border: 0 solid var(--accent); }
.aw-plate::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.aw-plate::after { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }
.aw-plate__art { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.aw-plate__art > svg { width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 1px; }
.aw-plate__foot { display: flex; justify-content: center; align-items: baseline; gap: var(--s2); margin-top: var(--s2); }
.aw-plate__no { font: 400 var(--fs-label)/1.4 var(--f-mono); letter-spacing: .14em; color: var(--fg-2); white-space: nowrap; }
.aw-plate__cap { font: 400 var(--fs-small)/1.6 var(--f-sans); color: var(--fg-2); }

/* 7.6 sticky 索引（site.js 依捲動位置在目前章的連結上加 aria-current） */
.aw-index { position: sticky; top: calc(var(--aw-bar-h) + var(--s3)); }
.aw-index ol { list-style: none; border-left: 1px solid var(--line); }
.aw-index a {
  position: relative; display: flex; gap: var(--s2); align-items: baseline; min-height: 44px;
  padding: var(--s1) 0 var(--s1) var(--s3); color: var(--fg-2); text-decoration: none;
  font-size: var(--fs-small); line-height: 1.5; transition: color var(--t-micro);
}
.aw-index a::before { content: ""; position: absolute; left: -1px; top: var(--s1); bottom: var(--s1); width: 1px; background: transparent; }
.aw-index a:hover, .aw-index a:focus-visible, .aw-index a[aria-current] { color: var(--fg); }
.aw-index a[aria-current]::before { width: 2px; left: -1px; background: var(--cur); }
.aw-index__no { font-family: var(--f-serif); font-weight: 600; white-space: nowrap; }

/* 7.7 下一章翻頁帶 */
.aw-next { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.aw-next__link { padding: var(--s4); }
.aw-next__link .aw-claim__body {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
}
.aw-next__label { font: 400 var(--fs-label)/1.5 var(--f-sans); letter-spacing: .2em; color: var(--fg-2); }
.aw-next__no { font: 600 var(--fs-h2)/1 var(--f-serif); color: var(--accent); }
.aw-next__name { font: 600 var(--fs-h2)/1.3 var(--f-serif); letter-spacing: .1em; color: var(--fg); }
html[lang="en"] .aw-next__name { font-family: var(--f-latin); font-weight: 400; letter-spacing: 0; }
.aw-next__arrow { font: 400 24px/1 var(--f-sans); color: var(--accent); transition: transform var(--t-state) var(--ease-out); }
.aw-next__link:hover .aw-next__arrow, .aw-next__link:focus-visible .aw-next__arrow { transform: translateX(var(--s1)); }

/* ── 8. 頁尾（年報式） ─────────────────────────────────────────────────── */
.aw-footer { padding: var(--s6) 0 var(--s4); }
.aw-footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--s5); }
.aw-footer__brand { grid-column: 1 / 5; }
/* 頁尾七頁連結（common.footer_nav）：像年報索引，兩欄、先左後右、每列一條細線；指到＝線轉實、字轉亮；目前所在頁＝線用目前所在色。列高 44px（觸控目標） */
.aw-footer__nav { grid-column: 5 / 9; margin-top: calc(-1 * var(--s1)); }   /* 第一列字與右欄地址同高 */
.aw-footer__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: var(--s3); }
.aw-footer__a {
  display: flex; align-items: center; min-height: 44px; border-bottom: 1px dashed color-mix(in srgb, var(--line-claim) 50%, transparent);
  font-size: var(--fs-small); line-height: 1.4; letter-spacing: .08em; color: var(--fg-2); text-decoration: none;
  transition: color var(--t-micro), border-color var(--t-micro);
}
.aw-footer__a:hover, .aw-footer__a:focus-visible { color: var(--fg); border-bottom: 1px solid var(--accent); }
.aw-footer__a[aria-current="page"] { color: var(--fg); border-bottom: 1px solid var(--cur); }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .aw-footer__brand { grid-column: 1 / 7; grid-row: 1; }
  .aw-footer__info { grid-row: 1; }
  .aw-footer__nav { grid-column: 1 / -1; grid-row: 2; }
  .aw-footer__list { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; }
}
.aw-footer__zh { font: 600 var(--fs-h3)/1.3 var(--f-serif); letter-spacing: .16em; white-space: nowrap; }
/* 毛筆字所名（common.py brush_name；只准等比縮放與換色）：行內 SVG 以 <use> 引用建置衍生檔 /img/award/brush-name.use.svg
   （正本 img/award/brush-name.svg 一位元組不改；衍生檔只在 dist、獨立檔、瀏覽器快取），字色＝currentColor＝color（換季照換）；
   只設高度，寬度＝高 × 寬÷高、明寫在元素上（common.py 依正本 viewBox 算成 style="width:calc(…)"，不靠 aspect-ratio 自動推寬）；方框若被 max-width 壓窄，SVG 預設等比置中、不變形。
   例外：字高 32px／手機 28px（業主條件 ≥24px），不在 §2.2 級距 */
.aw-brush {
  display: inline-block; vertical-align: top; max-width: 100%; height: var(--aw-brush-h, 32px);
}
.aw-footer__zh--brush { line-height: 0; color: var(--fg); }
@media (max-width: 767.98px) { .aw-footer__zh--brush { --aw-brush-h: 28px; } }
.aw-footer__en { margin-top: var(--s1); font: 400 var(--fs-body)/1.6 var(--f-latin); color: var(--gold); }
.aw-footer__info { grid-column: 9 / 13; font-style: normal; font-size: var(--fs-small); line-height: 2; }
.aw-footer__line { overflow-wrap: anywhere; }
.aw-footer__bottom {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.aw-footer__copy { font-size: var(--fs-small); line-height: 1.7; color: var(--fg-2); }
.aw-footer__slogan { font-size: var(--fs-it); }

/* ── 9. 浮現系統（總綱 §2.4） ──────────────────────────────────────────── */
/* JS 失敗或被擋：保險動畫延遲 --aw-safety-delay（值見 §1 token）後，經保險動畫長度（值見本段 [data-reveal] 的 animation）顯示（自樣式套用起算；樣式表晚到＝跟著晚起跑，
   延遲越短、容許樣式晚到的餘裕越大，目標 3 秒內全可見）；site.js 初始化：已顯示者直接標成已浮現，
   其餘加 html.motion-ready 取消保險、改由 IntersectionObserver 加 .is-in（變體 up／line／clip／words／stamp）。
   隱藏／取消保險只對 site.js 已納管的元素（.aw-rv）：初始化後才插入、未經 window.awReveal(root) 註冊的 [data-reveal]
   照保險動畫（插入後經延遲＋動畫長度顯示，兩值出處同上），永不隱形。 */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] { animation: aw-safety 400ms var(--ease-out) var(--aw-safety-delay) both; }
  /* <details>、分頁面板本身或其內：不套保險動畫、site.js 也不納管（closest() 含自身）＝直接可見（JS 被擋時展開 details 不會空白） */
  :is(details, .aw-tabs__panel)[data-reveal], :is(details, .aw-tabs__panel) [data-reveal] { animation: none; }
  html.motion-ready [data-reveal].aw-rv { animation: none; }
  html.motion-ready [data-reveal].aw-rv:not(.is-in) { opacity: 0; transform: translateY(24px); }
  html.motion-ready [data-reveal="line"].aw-rv:not(.is-in) { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; }
  /* 例外：clip 留頂端 2px（落在行高留白內，看不到字）：Chrome 的 IntersectionObserver 會套用目標自己的 clip-path，全裁掉就永遠不觸發 */
  html.motion-ready [data-reveal="clip"].aw-rv:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 0 calc(100% - 2px) 0); }
  html.motion-ready [data-reveal="words"].aw-rv:not(.is-in) { opacity: 1; transform: none; }
  html.motion-ready [data-reveal="words"].aw-rv:not(.is-in) .aw-w { opacity: 0; transform: translateY(.5em); }
  html.motion-ready [data-reveal="stamp"].aw-rv:not(.is-in) { opacity: 0; transform: scale(1.6) rotate(-6deg); }
  html.motion-ready [data-reveal].is-in {
    transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out),
      clip-path var(--t-reveal) var(--ease-out);
  }
  html.motion-ready [data-reveal="line"].is-in { transition-duration: 1200ms; }
  html.motion-ready [data-reveal="stamp"].is-in { transition: opacity 420ms var(--ease-stamp), transform 420ms var(--ease-stamp); }
  html.motion-ready [data-reveal="words"] .aw-w {
    display: inline-block;
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  html.motion-ready [data-reveal].aw-now, html.motion-ready [data-reveal].aw-now .aw-w { transition: none; }
  @view-transition { navigation: auto; }
  ::view-transition-group(chapter) { animation-duration: var(--t-reveal); animation-timing-function: var(--ease-io); }
}
@keyframes aw-safety { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes aw-stamp {
  from { opacity: 0; transform: scale(1.6) rotate(-6deg); }
  to { opacity: 1; transform: none; }
}

/* ── 10. 窄螢幕 ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .aw-grid, .aw-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .aw-grid > *, .aw-footer__grid > * { grid-column: 1 / -1 !important; }
  .aw-section { padding: var(--s5) 0; }
  /* 首屏構圖（見 §6）：章號縮成 96px（例外：裝飾章號；≤120px）放在頁名同一列的左端（與矮版一致；右上是光暈，章號的底色填字會露出色差），頁名區留出章號寬與高，圖版接在下一列 */
  .aw-hero, .aw-hero--low { min-height: 0; padding: var(--s3) 0 var(--s4); }
  /* 矮版（六個內頁）手機：上下留白與列距各收一級，內容（估算欄位、聯絡資料等）早一點進第一屏（單 3m2 A5） */
  .aw-hero--low { padding: var(--s2) 0 var(--s3); }
  .aw-hero__no, .aw-hero--low .aw-hero__no { left: var(--aw-margin); top: var(--s3); bottom: auto; font-size: 96px; }
  .aw-hero__grid { row-gap: var(--s3); }
  .aw-hero--low .aw-hero__grid { row-gap: var(--s2); }
  .aw-hero--low .aw-hero__no { top: var(--s2); }   /* 章號跟著上留白收（與頁名區同頂） */
  .aw-hero__title, .aw-hero--low .aw-hero__title { justify-content: flex-end; gap: var(--s1); min-height: 96px; padding-left: calc(96px + var(--s2)); }
  .aw-hero__h1, .aw-hero__h1.aw-vert { writing-mode: horizontal-tb; letter-spacing: .12em; max-inline-size: none; }
  html[lang="en"] .aw-hero--low .aw-hero__h1 { font-size: clamp(28px, 8vw, 36px); }
  /* 矮版手機：圖版壓成細長一條（內距收小；4:1＝原費用頁手機比例，單 3ui 推廣到全部矮版；圖是 slice 裁切，只露中段、圖形不變形），內容緊接在後 */
  .aw-hero--low .aw-plate { padding: var(--s2); }
  .aw-hero--low .aw-plate__art { aspect-ratio: 4 / 1; }
  .aw-hero--low .aw-plate__foot { margin-top: var(--s1); }
  /* 單欄堆疊：章名 → 正文 → 邊欄（取消桌機的同列 grid-row:1，否則三者疊在同一格） */
  .aw-spec__label, .aw-spec__body, .aw-spec__aside { grid-row: auto; }
  .aw-spec__label { position: static; writing-mode: horizontal-tb; margin-bottom: var(--s3); }
  .aw-spec__body { display: block; }
  .aw-spec__body > .aw-para { display: block; }
  .aw-para__no { display: inline; margin-right: var(--s1); line-height: inherit; }
  .aw-para__text { max-width: none; }
  .aw-spec__aside { margin-top: var(--s4); }
  .aw-index { position: static; }
  .aw-next__link { padding: var(--s3); }
  .aw-next__link .aw-claim__body { grid-template-columns: auto minmax(0, 1fr) auto; }
  .aw-next__label { grid-column: 1 / -1; }
  .aw-footer__zh { white-space: normal; }
  .aw-lang__a, .aw-lang__cur { padding: 0; }
  .aw-footer__bottom { flex-direction: column; align-items: flex-start; }
  /* 頁尾收尾（單 3m2 A7）：只收區塊間距（上留白、四區之間各收一級）；毛筆字、印章、標語、連結列高 44px 不動，底部留白不在這裡改 */
  .aw-footer { padding-top: var(--s5); }
  .aw-footer__grid { row-gap: var(--s4); }
  /* 四角框（單 2b 第 4 項）：手機移到安全區＝外邊距（≥20px）之內——邊長 10px、離邊 4px＝佔 4～14px，不壓任何文字。
     例外：10px／4px 不在 §2.3 間距級距（裝飾幾何） */
  .aw-corners i { width: 10px; height: 10px; }
  .aw-corners i:nth-child(1) { top: 4px; left: 4px; }
  .aw-corners i:nth-child(2) { top: 4px; right: 4px; }
  .aw-corners i:nth-child(3) { bottom: 4px; left: 4px; }
  .aw-corners i:nth-child(4) { bottom: 4px; right: 4px; }
}

/* ── 11. 減動態：最終狀態直接顯示、不跑轉場（捲動進度線是位置指示，保留） ───────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  :not(.aw-progress) > *, *::before, *::after { animation: none !important; }
}

/* ── 12. 列印：一律顯示所有內容、不跑動畫 ───────────────────────────────── */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-reveal] .aw-w { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .aw-skip, .aw-progress, .aw-corners, .aw-menu, .aw-tabs__list, .aw-hero__glow { display: none !important; }
  .aw-header { position: static !important; height: auto !important; }
  .aw-main { padding-top: 0 !important; }
  .aw-nav { display: block !important; position: static !important; }
  .aw-nav__contact, .aw-footer__nav { display: none !important; }
  .aw-tabs__panel { display: block !important; }
  .aw-tabs__heading { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; overflow: visible !important; }
  details::details-content { content-visibility: visible; display: block; }
}