/* debby.health 05 — site.css: site-wide base (tokens, base, type, buttons & links, header + 目錄 menu, section shell,
   FAQ component, footer, floating LINE, toast, cursor, reduced motion, no-GSAP fallback, caption, heart).
   Split from directions/debby-v2/assets/a/a.css (04 A, chosen 2026-10-26) without changing any rule; inner-page base
   (page hero, breadcrumbs, article typography, reveal) is appended at the end ("05 inner base"). Order inside the file
   is the original a.css order. */

/* debby.health v2 — Direction A「封面人物：健康雜誌」
   Tokens on :root (ai- prefix, BEM). Brand colours are fixed by the brief; the paper tones, type scale and the
   highlighter treatment are this direction's 提案試作. JS hooks are data-ai-* only; html.ai-motion holds the
   pre-entrance states (set by the head script, dropped after 3 s if JS never boots). */

/* ===================== Tokens ===================== */
:root {
  /* brand (fixed) */
  --ai-teal-400: #5FC1C7;
  --ai-teal-700: #176266;
  --ai-ink: #183437;
  --ai-pink: #FC6494;            /* decoration only: strokes, dots, highlighter — never text */
  --ai-pink-50: #FFF0F4;
  --ai-pink-100: #FFE1EA;
  --ai-red-700: #90302E;  --ai-red-50: #FFEEEC;
  --ai-amber-700: #784900; --ai-amber-50: #FFF0DB;
  --ai-teal-50: #EDFAFB;
  /* direction A paper system (提案試作) */
  --ai-paper: #FBF8F3;
  --ai-paper-2: #F4EEE4;
  --ai-sheet: #FFFFFF;
  --ai-muted: #4E6366;           /* 6.0:1 on paper, 5.5:1 on paper-2 */
  --ai-rule: rgba(24, 52, 55, .16);
  --ai-rule-strong: rgba(24, 52, 55, .7);
  --ai-on-dark: #FBF8F3;
  --ai-on-dark-muted: #B8CBCD;   /* 7.9:1 on ink */
  --ai-hl: rgba(252, 100, 148, .36);
  --ai-hl-2: rgba(252, 100, 148, .2);
  --ai-hl-dark: rgba(252, 100, 148, .62);
  /* type — one display weight (Noto Serif TC 900) keeps the font download to one set of slices */
  --ai-font-display: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --ai-font-body: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --ai-fs-cover: clamp(2rem, 9.4vw, 2.75rem);
  --ai-fs-h2: clamp(1.75rem, 1rem + 3.1vw, 3.5rem);
  --ai-fs-h3: clamp(1.1875rem, 1rem + .6vw, 1.5rem);
  --ai-fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --ai-fs-body: 1rem;
  --ai-fs-small: .875rem;
  --ai-fs-eyebrow: .8125rem;
  --ai-fs-mega: clamp(4rem, 17.6vw, 15.5rem);
  --ai-lh-body: 1.8;
  --ai-track-eyebrow: .28em;
  /* space */
  --ai-s1: 4px; --ai-s2: 8px; --ai-s3: 12px; --ai-s4: 16px; --ai-s5: 24px;
  --ai-s6: 32px; --ai-s7: 48px; --ai-s8: 64px; --ai-s9: 96px; --ai-s10: 128px;
  --ai-sec-y: clamp(64px, 7vw, 112px);
  --ai-max: 1320px;
  --ai-gutter: clamp(20px, 4.4vw, 64px);
  --ai-header-h: 64px;
  /* shape */
  --ai-r-xs: 2px; --ai-r-sm: 6px; --ai-r-md: 12px; --ai-r-pill: 999px;
  --ai-shadow-sheet: 0 1px 0 rgba(24, 52, 55, .06), 0 18px 48px -18px rgba(24, 52, 55, .28);
  --ai-shadow-float: 0 10px 28px -8px rgba(24, 52, 55, .45);
  /* motion: one curve for every entrance (GSAP power3.out) */
  --ai-ease: cubic-bezier(.165, .84, .44, 1);
  --ai-dur: .8s;
  /* cover portrait column */
  --ai-pw: min(38vw, calc((100svh - var(--ai-header-h) - 40px) * .64));   /* seated portrait, 2884x4192 */
}
@media (min-width: 1025px) { :root { --ai-header-h: 76px; } }

/* ===================== Base ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ai-header-h) + 16px); overflow-anchor: none; }
@media (max-width: 1024px) { html { scroll-padding-bottom: 88px; } }   /* keeps focus clear of the floating LINE button */
body {
  margin: 0; background: var(--ai-paper); color: var(--ai-ink);
  font-family: var(--ai-font-body); font-size: var(--ai-fs-body); line-height: var(--ai-lh-body);
  overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* very faint paper grain over everything (decorative, no pointer events) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ai-teal-700); outline-offset: 3px; border-radius: 2px; }
.ai-dark :focus-visible { outline-color: var(--ai-teal-400); }
#main:focus { outline: none; }
.ai-sr { font-family: var(--ai-font-body); font-weight: 400; position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ai-skip { position: fixed; left: 16px; top: -80px; z-index: 10001; background: var(--ai-ink); color: var(--ai-on-dark); padding: 12px 18px; border-radius: var(--ai-r-xs); text-decoration: none; font-weight: 600; }
.ai-skip:focus { top: 12px; }
.ai-br-md, .ai-br-lg { display: none; }
@media (min-width: 768px) { .ai-br-md { display: inline; } }
@media (min-width: 1025px) { .ai-br-lg { display: inline; } }
.ai-wrap { width: 100%; max-width: calc(var(--ai-max) + 2 * var(--ai-gutter)); margin: 0 auto; padding: 0 var(--ai-gutter); }
.ai-ext { font-family: var(--ai-font-body); display: inline-block; margin-left: .2em; font-size: .85em; transform: translateY(-.05em); }

/* ===================== Type ===================== */
.ai-eyebrow {
  display: flex; align-items: center; gap: 12px; font-size: var(--ai-fs-eyebrow); font-weight: 400;
  letter-spacing: var(--ai-track-eyebrow); color: var(--ai-teal-700); line-height: 1.4;
}
.ai-eyebrow__p { font-family: var(--ai-font-display); font-weight: 900; letter-spacing: .06em; padding-right: 12px; border-right: 1px solid currentColor; }
.ai-dark .ai-eyebrow { color: var(--ai-teal-400); }
.ai-h2 {
  font-family: var(--ai-font-display); font-weight: 900; font-size: var(--ai-fs-h2); line-height: 1.22; word-break: keep-all; overflow-wrap: anywhere;
  letter-spacing: .01em; color: var(--ai-ink); margin-top: 18px;
}
.ai-dark .ai-h2 { color: var(--ai-on-dark); }
.ai-h3 { font-family: var(--ai-font-display); font-weight: 900; font-size: var(--ai-fs-h3); line-height: 1.4; }
.ai-lead { font-size: var(--ai-fs-lead); line-height: 1.75; color: var(--ai-muted); margin-top: 20px; max-width: 40em; }
.ai-dark .ai-lead { color: var(--ai-on-dark-muted); }
.ai-fine { font-size: var(--ai-fs-small); color: var(--ai-muted); line-height: 1.7; }
/* mask lines: overflow is clipped vertically only, so the highlighter can run past the line ends */
.ai-line { display: block; overflow-x: visible; overflow-y: clip; padding-bottom: .04em; }
.ai-line__in { display: inline-block; }

/* highlighter (brand graphic: 「她幫你把報告重點畫出來」) */
.ai-hl { position: relative; z-index: 0; isolation: isolate; white-space: nowrap; }
.ai-hl__svg { position: absolute; z-index: -1; left: -.1em; right: -.1em; bottom: .02em; height: .58em; width: calc(100% + .2em); overflow: visible; pointer-events: none; }
.ai-hl__svg path { fill: none; stroke-width: 15; stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ai-hl__p1 { stroke: var(--ai-hl); }
.ai-hl__p2 { stroke: var(--ai-hl-2); stroke-width: 9 !important; }
.ai-hl--dark .ai-hl__svg { bottom: -.06em; height: .3em; }
.ai-hl--dark .ai-hl__p1 { stroke: var(--ai-hl-dark); }
.ai-hl--dark .ai-hl__p2 { stroke: transparent; }

/* ===================== Buttons & links ===================== */
.ai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 0 22px;
  border-radius: var(--ai-r-xs); font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-decoration: none;
  white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; position: relative; isolation: isolate;
  transition: background-color .25s var(--ai-ease), color .25s var(--ai-ease), transform .25s var(--ai-ease);
}
.ai-btn::after { /* highlighter swipe under the label on hover */
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 5px; background: var(--ai-pink); opacity: .9;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ai-ease); z-index: -1; border-radius: 1px;
}
.ai-btn:hover::after { transform: scaleX(1); }
.ai-btn:active { transform: scale(.98); }
.ai-btn--primary { background: var(--ai-teal-700); color: #fff; }
.ai-btn--primary:hover { background: #12514F; }
.ai-btn--ghost { border-color: var(--ai-ink); color: var(--ai-ink); background: transparent; }
.ai-btn--ghost:hover { background: var(--ai-sheet); }
.ai-btn--paper { background: var(--ai-paper); color: var(--ai-ink); }
.ai-btn--sm { min-height: 40px; padding: 0 14px; font-size: .9375rem; }
.ai-btn--sm::after { bottom: 6px; height: 4px; left: 10px; right: 10px; }
.ai-btn--lg { min-height: 54px; padding: 0 26px; font-size: 1.0625rem; }
.ai-btn--block { width: 100%; }
.ai-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-weight: 600; color: var(--ai-teal-700);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  background: linear-gradient(var(--ai-hl), var(--ai-hl)) 0 88% / 0 .45em no-repeat; transition: background-size .45s var(--ai-ease);
}
.ai-link:hover { background-size: 100% .45em; }
.ai-link--dark { color: var(--ai-teal-400); }
.ai-link--dark:hover { background-image: none; color: var(--ai-on-dark); }
.ai-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--ai-r-pill); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; background: var(--ai-ink); color: var(--ai-on-dark); white-space: nowrap; line-height: 1.5;
}
.ai-badge--sm { padding: 1px 8px; font-size: .6875rem; text-decoration: none; }
.ai-dark .ai-badge { background: var(--ai-paper); color: var(--ai-ink); }
.ai-pill { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 4px 12px; border-radius: var(--ai-r-pill); background: rgba(24, 52, 55, .86); color: var(--ai-on-dark); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; }

/* ===================== Header ===================== */
.ai-header { position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--ai-header-h); background: rgba(251, 248, 243, .95); box-shadow: 0 1px 0 var(--ai-rule); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .3s var(--ai-ease), box-shadow .3s var(--ai-ease); }
.ai-header.is-top { background: rgba(251, 248, 243, 0); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ai-header__bar { height: 100%; max-width: calc(var(--ai-max) + 2 * var(--ai-gutter)); margin: 0 auto; padding: 0 var(--ai-gutter); display: flex; align-items: center; gap: 24px; }
.ai-wordmark { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; min-height: 44px; align-items: center; }
.ai-wordmark__name { font-family: var(--ai-font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: .04em; white-space: nowrap; }
.ai-wordmark__role { display: flex; flex-direction: column; line-height: 1.35; font-size: .6875rem; letter-spacing: .1em; color: var(--ai-muted); padding-left: 10px; border-left: 1px solid var(--ai-rule-strong); white-space: nowrap; }
.ai-nav { display: none; margin-left: auto; }
.ai-nav__list { display: flex; gap: clamp(16px, 2vw, 30px); }
.ai-nav__list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .9375rem; font-weight: 500; letter-spacing: .06em; background: linear-gradient(var(--ai-hl), var(--ai-hl)) 0 72% / 0 .5em no-repeat; transition: background-size .4s var(--ai-ease); white-space: nowrap; }
.ai-nav__list a:hover { background-size: 100% .5em; }
.ai-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ai-iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--ai-r-xs); cursor: pointer; }
/* menu trigger (v1.2 item 10): two thin teal-ink lines over a small 「目錄」 label in the eyebrow type. Open: the lines
   first close to the centre (translate .22s), then turn into a slender X (rotate ±32°, .28s); the label cross-fades
   to 「闔上」 (.25s). Close runs the two stages backwards and faster. Individual transform properties keep the stages apart. */
.ai-menu-btn { position: relative; flex-direction: column; gap: 5px; color: var(--ai-ink); text-decoration: none; }
.ai-menu-btn__lines { position: relative; display: block; width: 24px; height: 10px; }
.ai-menu-btn__lines i { position: absolute; left: 0; width: 24px; height: 1.5px; border-radius: 1px; background: currentColor; transform-origin: 50% 50%;
  transition: translate .2s var(--ai-ease) .2s, rotate .2s var(--ai-ease) 0s, scale .2s var(--ai-ease) .2s; }
.ai-menu-btn__lines i:first-child { top: 0; }
.ai-menu-btn__lines i:last-child { top: 8.5px; scale: .667 1; transform-origin: 0 50%; }
.ai-menu-btn__label { position: relative; display: block; height: 14px; width: 100%; font-size: .6875rem; line-height: 14px; letter-spacing: .14em; text-indent: .14em; text-align: center; }
.ai-menu-btn__t { position: absolute; inset: 0; transition: opacity .25s var(--ai-ease), visibility 0s linear .25s; }
.ai-menu-btn__t--close { opacity: 0; visibility: hidden; }
.ai-menu-btn[aria-expanded="true"] .ai-menu-btn__lines i { transition: translate .22s var(--ai-ease) 0s, scale .22s var(--ai-ease) 0s, rotate .28s cubic-bezier(.3, 1.3, .5, 1) .22s; }
.ai-menu-btn[aria-expanded="true"] .ai-menu-btn__lines i:first-child { translate: 0 4.25px; rotate: 32deg; }
.ai-menu-btn[aria-expanded="true"] .ai-menu-btn__lines i:last-child { translate: 0 -4.25px; rotate: -32deg; scale: 1 1; transform-origin: 50% 50%; }
.ai-menu-btn[aria-expanded="true"] .ai-menu-btn__t--open { opacity: 0; visibility: hidden; }
.ai-menu-btn[aria-expanded="true"] .ai-menu-btn__t--close { opacity: 1; visibility: visible; transition: opacity .25s var(--ai-ease), visibility 0s; }
.ai-menu-nojs { display: none; }
html:not(.ai-menu-ready) .ai-menu-btn[data-ai-menu-open] { display: none; }
html:not(.ai-menu-ready) .ai-menu-nojs { display: inline-flex; }
@media (min-width: 1025px) {
  .ai-wordmark__name { font-size: 1.4375rem; }
}
@media (max-width: 559px) { .ai-wordmark__role { display: none; } }
@media (min-width: 1280px) { .ai-nav { display: block; } .ai-header__actions { margin-left: 8px; } .ai-menu-btn { display: none; } }
@media (max-width: 359px) { .ai-header__line { display: none; } }

/* menu panel (v1.2 item 10) — a full-screen magazine 「目錄」 page under the header (the trigger stays on top and
   becomes the X). Brand field: paper with a faint paper-2 wash, the page's grain (body::after), a big pink highlighter
   stroke and two crop marks. Layers: field fades in with a 24px drop (.65s) → items soft-focus in (blur 3px→0,
   y 10px→0, .78s, 30ms apart, first at .1s, last readable at ~1.1s) → stroke drawn and crop marks (from .55s); then the
   stroke sways very slowly (16s). Close: everything fades out in .45s, no stagger, no replay. No backdrop-filter.
   States exist only under html.ai-menu-ready (a.js); without it the panel is a plain :target page. */
.ai-drawer { position: fixed; inset: 0; z-index: 880; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ai-paper) linear-gradient(165deg, var(--ai-paper) 0%, var(--ai-paper) 46%, var(--ai-paper-2) 100%); }
.ai-drawer[hidden] { display: none; }
html:not(.ai-menu-ready) .ai-drawer:target { display: block; }
.ai-drawer__panel { position: relative; min-height: 100%; width: 100%; max-width: calc(560px + 2 * var(--ai-gutter)); margin: 0 auto;
  padding: calc(var(--ai-header-h) + 20px) var(--ai-gutter) 40px; display: flex; flex-direction: column; gap: 24px; }
.ai-drawer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ai-drawer__vol { font-size: .75rem; letter-spacing: .2em; color: var(--ai-muted); }
.ai-drawer__list { position: relative; border-top: 1px solid var(--ai-rule-strong); }
.ai-drawer__list a { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ai-rule); text-decoration: none; font-family: var(--ai-font-display); font-weight: 900; font-size: 1.5rem;
  background: linear-gradient(var(--ai-hl), var(--ai-hl)) 56px 72% / 0 .45em no-repeat; transition: background-size .45s var(--ai-ease); }
.ai-drawer__list a:hover, .ai-drawer__list a:focus-visible { background-size: calc(100% - 56px) .45em; }
.ai-drawer__p { font-family: var(--ai-font-body); font-weight: 400; font-size: .75rem; letter-spacing: .14em; color: var(--ai-teal-700); width: 40px; flex: none; }
@media (min-width: 1280px) { .ai-drawer { display: none !important; } }
.ai-drawer__vol { display: flex; flex-direction: column; gap: 4px; }
.ai-drawer__sub { font-size: .8125rem; letter-spacing: .06em; color: var(--ai-ink); }
.ai-drawer__nojs-close { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: .8125rem; letter-spacing: .14em; color: var(--ai-ink); }
.ai-drawer:focus { outline: none; }                       /* the dialog itself takes focus after a pointer open (no ring) */
.ai-drawer__vol { padding-top: 6px; }
/* with JS the header X is the visible close; this in-dialog 「闔上」 stays for keyboard / screen-reader users and shows
   itself only when focused (like a skip link) */
.ai-menu-ready .ai-drawer__nojs-close:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ai-drawer__hl { position: absolute; z-index: 0; right: -8%; top: 12%; width: 78%; height: 70%; overflow: visible; pointer-events: none; transform-origin: 70% 30%; }
.ai-drawer__hl path { fill: none; stroke: rgba(252, 100, 148, .14); stroke-width: 110; stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ai-drawer__crop { position: absolute; width: 18px; height: 18px; pointer-events: none; }
.ai-drawer__crop::before, .ai-drawer__crop::after { content: ""; position: absolute; background: var(--ai-rule-strong); }
.ai-drawer__crop::before { width: 18px; height: 1px; } .ai-drawer__crop::after { width: 1px; height: 18px; }
.ai-drawer__crop--tl { left: 8px; top: calc(var(--ai-header-h) + 6px); } .ai-drawer__crop--tl::before, .ai-drawer__crop--tl::after { left: 0; top: 0; }
.ai-drawer__crop--br { right: 8px; bottom: 8px; } .ai-drawer__crop--br::before, .ai-drawer__crop--br::after { right: 0; bottom: 0; }
.ai-drawer__top, .ai-drawer nav, .ai-drawer .ai-btn--block { position: relative; z-index: 1; }
/* open / close choreography (a.js toggles .is-open / .is-closing) */
.ai-menu-ready .ai-drawer { opacity: 0; transform: translateY(-24px); transition: opacity .65s var(--ai-ease), transform .65s var(--ai-ease); }
.ai-menu-ready .ai-drawer.is-open { opacity: 1; transform: none; }
.ai-menu-ready .ai-drawer [data-ai-drawer-item] { opacity: 0; transform: translateY(10px); filter: blur(3px);
  transition: opacity .78s var(--ai-ease) calc(.1s + var(--i, 0) * 30ms), transform .78s var(--ai-ease) calc(.1s + var(--i, 0) * 30ms), filter .78s var(--ai-ease) calc(.1s + var(--i, 0) * 30ms); }
.ai-menu-ready .ai-drawer.is-open [data-ai-drawer-item] { opacity: 1; transform: none; filter: blur(0); }
.ai-menu-ready .ai-drawer .ai-drawer__hl path { stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .3, 1) .55s; }
.ai-menu-ready .ai-drawer.is-open .ai-drawer__hl path { stroke-dashoffset: 0; }
.ai-menu-ready .ai-drawer .ai-drawer__crop { opacity: 0; transition: opacity .5s var(--ai-ease) .7s; }
.ai-menu-ready .ai-drawer.is-open .ai-drawer__crop { opacity: 1; }
.ai-menu-ready .ai-drawer.is-open .ai-drawer__hl { animation: ai-drawer-sway 16s ease-in-out 1.6s infinite alternate; }
@keyframes ai-drawer-sway { 0% { rotate: 0deg; translate: 0 0; } 100% { rotate: -2deg; translate: -10px 6px; } }
.ai-menu-ready .ai-drawer.is-closing, .ai-menu-ready .ai-drawer.is-closing * { transition-duration: .3s !important; transition-delay: 0s !important; }
.ai-menu-ready .ai-drawer.is-closing { transition-duration: .45s !important; }
/* the header keeps only the wordmark and the trigger while the panel is open */
.ai-header__line { min-height: 44px; }   /* r0 P3-06: header target ≥44 px at every width */
.ai-header__line { transition: background-color .25s var(--ai-ease), color .25s var(--ai-ease), transform .25s var(--ai-ease), opacity .25s var(--ai-ease), visibility 0s linear .25s; }
.ai-menu-open .ai-header__line { opacity: 0; visibility: hidden; }
.ai-menu-open .ai-header { -webkit-backdrop-filter: none; backdrop-filter: none; }   /* nothing with backdrop-filter over the panel */
@media (prefers-reduced-motion: reduce) {
  .ai-menu-ready .ai-drawer, .ai-menu-ready .ai-drawer *, .ai-menu-btn__lines i, .ai-menu-btn__t { transition: none !important; animation: none !important; }
  .ai-menu-ready .ai-drawer, .ai-menu-ready .ai-drawer [data-ai-drawer-item] { transform: none !important; filter: none !important; }
}

/* ===================== Sections (magazine inner pages) ===================== */
.ai-sec { position: relative; padding: var(--ai-sec-y) 0; }
.ai-runhead { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; margin-bottom: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--ai-rule-strong); font-size: .75rem; letter-spacing: .2em; color: var(--ai-muted); }
.ai-runhead span:first-child { font-family: var(--ai-font-display); font-weight: 900; color: var(--ai-teal-700); letter-spacing: .06em; }
.ai-dark .ai-runhead { border-color: rgba(251, 248, 243, .5); color: var(--ai-on-dark-muted); }
.ai-dark .ai-runhead span:first-child { color: var(--ai-teal-400); }
.ai-dark { background: var(--ai-ink); color: var(--ai-on-dark); }

/* 09 faq */
.ai-faq { background: var(--ai-paper-2); }
.ai-faq__grid { display: grid; gap: 36px; }
.ai-faq__more { margin-top: 22px; color: var(--ai-muted); max-width: 24em; }
.ai-faq__more .ai-link { display: inline; }
.ai-faq__list { border-top: 2px solid var(--ai-ink); }
.ai-qa { border-bottom: 1px solid var(--ai-rule-strong); }
.ai-qa summary { display: flex; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; min-height: 64px; }
.ai-qa summary::-webkit-details-marker { display: none; }
.ai-qa__q { font-family: var(--ai-font-display); font-weight: 900; font-size: 1.125rem; color: var(--ai-teal-700); flex: none; }
.ai-qa__t { font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem); flex: 1; }
.ai-qa__icon { width: 18px; height: 18px; position: relative; flex: none; }
.ai-qa__icon::before, .ai-qa__icon::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--ai-ink); transition: transform .35s var(--ai-ease); }
.ai-qa__icon::after { transform: rotate(90deg); }
.ai-qa[open] .ai-qa__icon::after { transform: rotate(0); }
.ai-qa p { padding: 0 34px 24px 46px; line-height: 1.85; }
@media (min-width: 1025px) { .ai-faq__grid { grid-template-columns: 5fr 7fr; gap: 64px; } .ai-faq__head { position: sticky; top: calc(var(--ai-header-h) + 32px); align-self: start; } }
@media (max-width: 480px) { .ai-qa p { padding-left: 0; padding-right: 0; } }
/* 11 footer — the back cover: paper, thick rule, and the wordmark marked with the highlighter (S-2: not a dark slab) */
.ai-footer { position: relative; padding: clamp(40px, 5vw, 64px) 0 0; overflow: clip; background: var(--ai-paper-2); color: var(--ai-ink); border-top: 6px solid var(--ai-ink); }
.ai-footer__run { margin-bottom: 28px; }
.ai-footer__top { display: grid; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--ai-rule-strong); }
.ai-footer__mark { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; white-space: nowrap; }
.ai-footer__mark span:first-child { font-family: var(--ai-font-display); font-weight: 900; font-size: 1.75rem; }
.ai-footer__role { font-size: .8125rem; letter-spacing: .24em; color: var(--ai-muted); }
.ai-footer__slogan { margin-top: 12px; font-family: var(--ai-font-display); font-weight: 900; font-size: 1.125rem; }
.ai-footer__h { font-family: var(--ai-font-body); font-size: .75rem; font-weight: 700; letter-spacing: .24em; color: var(--ai-teal-700); margin-bottom: 10px; }
.ai-footer__col ul { display: grid; gap: 2px; }
.ai-footer__col a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; background: linear-gradient(var(--ai-hl), var(--ai-hl)) 0 72% / 0 .5em no-repeat; transition: background-size .4s var(--ai-ease); }
.ai-footer__col a:hover { background-size: 100% .5em; }
.ai-footer__rel p { color: var(--ai-muted); font-size: .9375rem; line-height: 1.8; margin-bottom: 12px; }
.ai-footer__rel .ai-link { display: inline; }
.ai-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 24px 0; border-bottom: 1px solid var(--ai-rule-strong); }
.ai-footer__social .ai-footer__h { margin: 0; }
.ai-footer__social:focus { outline: none; }
.ai-social { display: flex; flex-wrap: wrap; gap: 8px; }
/* brand marks: Font Awesome Free 6.5.2 (Icons CC BY 4.0), one colour, in A's thin square frames; 44px targets */
.ai-social__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 11px; border: 1px solid var(--ai-rule-strong); border-radius: var(--ai-r-xs); background: var(--ai-paper); color: var(--ai-teal-700); text-decoration: none; transition: background-color .25s var(--ai-ease), color .25s var(--ai-ease), border-color .25s var(--ai-ease); }
.ai-social__ico { width: 20px; height: 20px; flex: none; fill: currentColor; }
.ai-social__btn { position: relative; }
.ai-social__ext { position: absolute; top: 1px; right: 3px; font-size: .625rem; line-height: 1; font-family: var(--ai-font-body); }   /* r0 P3-05: visible external mark */
.ai-social__id { font-size: .875rem; font-weight: 600; letter-spacing: .02em; color: var(--ai-ink); font-variant-numeric: tabular-nums; }
.ai-social__btn:hover, .ai-social__btn:focus-visible { background: var(--ai-teal-700); border-color: var(--ai-teal-700); color: #fff; }
.ai-social__btn:hover .ai-social__id, .ai-social__btn:focus-visible .ai-social__id { color: #fff; }
.ai-footer__disc { margin-top: 28px; font-size: .875rem; color: var(--ai-muted); }
.ai-footer__copy { margin-top: 8px; font-size: .8125rem; color: var(--ai-muted); padding-bottom: 24px; }
/* back-cover signature (replaces the giant wordmark, 2026-10-27): the slogan + Debby's handwritten sign-off */
.ai-footer__sig { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; padding-top: 28px; padding-bottom: 36px; }
.ai-footer__sig .ai-footer__slogan { margin: 0; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.5; }
.ai-footer__sign { position: relative; isolation: isolate; margin: 0; font-family: "LXGW WenKai TC", "Kaiti TC", "STKaiti", "BiauKai", var(--ai-font-display); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.3; color: var(--ai-teal-700); white-space: nowrap; }
.ai-footer__ink { display: inline-block; }
.ai-footer__sign .ai-heart { width: .6em; height: .6em; transform: translateY(-.35em) rotate(10deg); }
.ai-footer__hl { position: absolute; z-index: -1; left: -4%; width: 108%; bottom: .02em; height: .42em; overflow: visible; pointer-events: none; }
.ai-footer__hl path { fill: none; stroke: var(--ai-hl); stroke-width: 15; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ai-footer__sig .ai-crop--bl { left: 8px; bottom: 8px; } .ai-footer__sig .ai-crop--br { right: 8px; bottom: 8px; }
@media (max-width: 767px) { .ai-footer__sig { flex-direction: column; align-items: flex-start; } }
@media (min-width: 768px) { .ai-footer__top { grid-template-columns: 1fr 1fr; gap: 36px 32px; } }
@media (min-width: 1025px) { .ai-footer__top { grid-template-columns: 1.3fr .8fr .8fr 1.6fr; gap: 32px; } }
@media (max-width: 1024px) { .ai-footer { padding-bottom: 72px; } }

/* floating LINE (mobile / tablet) */
.ai-float { display: none; }
@media (max-width: 1024px) {
  .js .ai-float {
    display: inline-flex; align-items: center; gap: 4px; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 800;
    min-height: 48px; padding: 0 20px; border-radius: var(--ai-r-pill); background: var(--ai-teal-700); color: #fff; font-weight: 700; text-decoration: none;
    box-shadow: var(--ai-shadow-float); transform: translateY(160%); white-space: nowrap;
    visibility: hidden; transition: transform .45s var(--ai-ease), visibility 0s .45s;   /* hidden = not focusable (A-1) */
  }
  .js .ai-float.is-on { transform: none; visibility: visible; transition-delay: 0s; }
}

/* toast */
.ai-toast { position: fixed; left: 50%; bottom: 24px; z-index: 9500; max-width: min(92vw, 520px); padding: 12px 20px; border-radius: var(--ai-r-xs); background: var(--ai-ink); color: var(--ai-on-dark); font-size: .9375rem; box-shadow: var(--ai-shadow-float); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .3s var(--ai-ease), transform .4s var(--ai-ease), visibility 0s .3s; }
.ai-toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.ai-toast::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--ai-pink); vertical-align: .1em; }

/* ===================== Cursor (pen tip + lagging highlighter halo) ===================== */
.ai-cursor-on, .ai-cursor-on * { cursor: none !important; }
.ai-cursor-on input, .ai-cursor-on textarea, .ai-cursor-on select { cursor: text !important; }
.ai-cursor { position: fixed; left: 0; top: 0; z-index: 9800; pointer-events: none; }
.ai-cursor__halo, .ai-cursor__tip { position: fixed; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.ai-cursor-ready .ai-cursor__halo, .ai-cursor-ready .ai-cursor__tip { opacity: 1; }
.ai-cursor-out .ai-cursor__halo, .ai-cursor-out .ai-cursor__tip, .ai-cursor-text .ai-cursor__halo, .ai-cursor-text .ai-cursor__tip { opacity: 0; }
.ai-cursor__ring {
  position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(252, 100, 148, .16); border: 1px solid rgba(252, 100, 148, .7);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ai-ease), background-color .3s, border-color .3s;
}
.ai-cursor__label { font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: var(--ai-on-dark); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--ai-ease); white-space: nowrap; }
.ai-cursor__tip i { position: absolute; left: -3px; top: -6px; width: 6px; height: 12px; border-radius: 1.5px; background: var(--ai-ink); transform: rotate(-35deg); transition: transform .25s var(--ai-ease), background-color .25s; }
.ai-cursor-hover .ai-cursor__ring { transform: scale(1.7); background: rgba(252, 100, 148, .22); }
.ai-cursor-label .ai-cursor__ring { transform: scale(2.1); background: rgba(24, 52, 55, .92); border-color: var(--ai-pink); }
.ai-cursor-label .ai-cursor__label { opacity: 1; transform: scale(.48); }
.ai-cursor-label .ai-cursor__tip i { transform: rotate(-35deg) scale(0); }
.ai-cursor-down .ai-cursor__ring { transform: scale(.7); }
.ai-cursor-down.ai-cursor-hover .ai-cursor__ring { transform: scale(1.35); }
.ai-cursor-dark .ai-cursor__tip i { background: var(--ai-paper); }
.ai-cursor-dark .ai-cursor__ring { border-color: rgba(252, 100, 148, .95); background: rgba(252, 100, 148, .22); }
.ai-cursor-dark.ai-cursor-label .ai-cursor__ring { background: rgba(251, 248, 243, .95); }
.ai-cursor-dark.ai-cursor-label .ai-cursor__label { color: var(--ai-ink); }

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .ai-intro { display: none !important; }
}

/* no-GSAP fallback: IntersectionObserver toggles .is-in both ways */
.ai-motion [data-ai-io] { opacity: 0; transform: translateY(24px); transition: opacity var(--ai-dur) var(--ai-ease), transform var(--ai-dur) var(--ai-ease); }
.ai-motion [data-ai-io].is-in { opacity: 1; transform: none; }
/* ===================== r3: scene photos (「健康管理師的一天」) ===================== */
.ai-cap { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; font-size: .75rem; line-height: 1.6; letter-spacing: .06em; color: var(--ai-muted); }
.ai-cap__no { flex: none; font-family: var(--ai-font-display); font-weight: 900; color: var(--ai-teal-700); letter-spacing: .04em; }
.ai-dark .ai-cap { color: var(--ai-on-dark-muted); }
.ai-dark .ai-cap__no { color: var(--ai-teal-400); }
/* 09 / 11 CTAs */
.ai-faq__ctas, .ai-footer__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
/* small heart after 「黛比」 in every wordmark (live debby.health: .ai-wordmark__name svg 16px, -6px, 10deg; scaled in em) */
.ai-heart { display: inline-block; width: .7em; height: .7em; margin-left: .06em; color: var(--ai-pink); vertical-align: baseline; transform: translateY(-.3em) rotate(10deg); overflow: visible; }
.ai-drawer__mark { font-family: var(--ai-font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: .04em; color: var(--ai-ink); }

/* cursor = the small solid heart from debby.health (replaces the pen tip); the lagging halo stays */
.ai-cursor__tip svg { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; max-width: none; color: var(--ai-pink); overflow: visible; filter: drop-shadow(0 1px 1px rgba(24, 52, 55, .25)); transition: transform .25s var(--ai-ease), color .25s; }
.ai-cursor__tip svg path { stroke: transparent; stroke-width: 2.4; paint-order: stroke; }
.ai-cursor-hover .ai-cursor__tip svg { transform: scale(1.25); }
.ai-cursor-down .ai-cursor__tip svg { transform: scale(.75); }
.ai-cursor-label .ai-cursor__tip svg { transform: scale(0); }
/* on the pink page: white heart with a pink outline; on dark areas: same */
.ai-cursor-dark .ai-cursor__tip svg { color: #fff; }
.ai-cursor-dark .ai-cursor__tip svg path { stroke: var(--ai-pink); }
.ai-cursor-pink .ai-cursor__tip svg path { stroke: #fff; }   /* thin white edge keeps the pink heart crisp on pale pink */
.ai-cursor-pink .ai-cursor__ring { border-color: rgba(23, 98, 102, .55); background: rgba(255, 255, 255, .28); }
.ai-cursor-pink.ai-cursor-label .ai-cursor__ring { background: rgba(24, 52, 55, .92); border-color: #fff; }

/* =====================================================================================================
   05 inner base (Builder A, 2026-10-28) — shared by every inner page. Same tokens and type as the home; the page
   hero enters with pure CSS (no JS wait), everything below uses the generic reveal hooks (data-ai-reveal,
   data-ai-stagger, .ai-sec .ai-head, data-ai-hl …) driven by site.js, which reverse on the way up.
   ===================================================================================================== */
.ai-page-inner main { display: block; }
/* page hero: runhead · breadcrumbs · eyebrow · h1 · lead; [data-ai-phero-in] items rise in on load (--i = order) */
.ai-phero { position: relative; padding: calc(var(--ai-header-h) + clamp(28px, 4vw, 56px)) 0 clamp(40px, 5vw, 72px); background: var(--ai-paper); overflow: clip; }
.ai-phero .ai-runhead { margin-bottom: clamp(22px, 3vw, 36px); }
.ai-phero__title { margin-top: 14px; font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(2.125rem, 1rem + 4.4vw, 4.5rem); line-height: 1.18; letter-spacing: .01em; word-break: keep-all; overflow-wrap: anywhere; max-width: 15em; }
.ai-phero__lead { margin-top: 20px; font-size: var(--ai-fs-lead); line-height: 1.8; color: var(--ai-muted); max-width: 36em; }
.ai-phero__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin-top: 28px; }
.ai-phero__brush { position: absolute; z-index: 0; right: -6%; top: 10%; width: min(46vw, 560px); height: 80%; pointer-events: none; overflow: visible; }
.ai-phero__brush path { fill: none; stroke: rgba(252, 100, 148, .12); stroke-width: 110; stroke-linecap: butt; }
.ai-phero .ai-wrap { position: relative; z-index: 1; }
@keyframes ai-phero-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
[data-ai-phero-in] { animation: ai-phero-in .9s var(--ai-ease) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
/* breadcrumbs */
.ai-crumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .8125rem; letter-spacing: .06em; color: var(--ai-muted); }
.ai-crumb li + li::before { content: "／"; margin: 0 .5em; color: var(--ai-rule-strong); }
.ai-crumb a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ai-teal-700); text-decoration: underline; text-underline-offset: .25em; }
.ai-crumb [aria-current="page"] { color: var(--ai-ink); }
/* category chips (健康筆記) — links, so they work with no JS */
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ai-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--ai-rule-strong); border-radius: var(--ai-r-pill); background: var(--ai-sheet); color: var(--ai-ink); font-size: .9375rem; text-decoration: none; transition: background-color .25s var(--ai-ease), color .25s var(--ai-ease); }
.ai-chip:hover { background: var(--ai-pink-50); }
.ai-chip[aria-current="page"] { background: var(--ai-ink); border-color: var(--ai-ink); color: var(--ai-on-dark); }
/* article cards */
.ai-cards { display: grid; gap: clamp(16px, 2vw, 28px); }
@media (min-width: 768px) { .ai-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .ai-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ai-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 22px; background: var(--ai-sheet); border-radius: var(--ai-r-xs); box-shadow: var(--ai-shadow-sheet); }
.ai-card__cat { font-size: .8125rem; letter-spacing: .16em; color: var(--ai-teal-700); padding-bottom: 10px; border-bottom: 1px solid var(--ai-rule-strong); }
.ai-card__title { font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(1.1875rem, 1rem + .6vw, 1.4375rem); line-height: 1.45; }
.ai-card__title a { text-decoration: none; background: linear-gradient(var(--ai-hl), var(--ai-hl)) 0 86% / 0 .42em no-repeat; transition: background-size .6s var(--ai-ease); }
.ai-card__title a::after { content: ""; position: absolute; inset: 0; }
.ai-card:hover .ai-card__title a, .ai-card__title a:focus-visible { background-size: 100% .42em; }
.ai-card__sum { font-size: .9375rem; line-height: 1.75; color: var(--ai-muted); }
.ai-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ai-card__date { font-size: .8125rem; color: var(--ai-muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ai-card__more { font-size: .875rem; font-weight: 600; color: var(--ai-teal-700); white-space: nowrap; }
/* article (prose) */
.ai-article { padding: 0 0 var(--ai-sec-y); }
.ai-article__wrap { max-width: calc(720px + 2 * var(--ai-gutter)); }
.ai-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 20px; font-size: .875rem; color: var(--ai-muted); }
.ai-art-meta__by { display: inline-flex; align-items: center; gap: 8px; color: var(--ai-ink); font-weight: 600; }
.ai-art-meta__by img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ai-paper), 0 0 0 3.5px var(--ai-pink); }
.ai-art-meta time { font-variant-numeric: tabular-nums; }
.ai-art-cat { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--ai-r-pill); background: var(--ai-pink-50); color: var(--ai-ink); font-size: .8125rem; letter-spacing: .08em; text-decoration: none; margin-top: 18px; }
.ai-prose { font-size: 1.0625rem; line-height: 1.95; color: var(--ai-ink); }
.ai-prose > * + * { margin-top: 1.1em; }
.ai-prose h2 { margin-top: 2.2em; font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); line-height: 1.4; }
.ai-prose h3 { margin-top: 1.8em; font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); line-height: 1.45; }
.ai-prose ul, .ai-prose ol { padding-left: 1.4em; }
.ai-prose ul { list-style: disc; } .ai-prose ol { list-style: decimal; }
.ai-prose li + li { margin-top: .45em; }
.ai-prose li::marker { color: var(--ai-teal-700); }
.ai-prose strong { font-weight: 700; background: linear-gradient(var(--ai-hl-2), var(--ai-hl-2)) 0 88% / 100% .45em no-repeat; }
.ai-prose a { color: var(--ai-teal-700); text-underline-offset: .25em; overflow-wrap: anywhere; }
.ai-prose figure { margin: 1.6em 0; overflow-x: auto; }
.ai-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.7; }
.ai-prose th, .ai-prose td { padding: 10px 12px; border-bottom: 1px solid var(--ai-rule); text-align: left; vertical-align: top; }
.ai-prose th { font-weight: 700; background: var(--ai-paper-2); }
.ai-prose blockquote { padding-left: 18px; border-left: 3px solid var(--ai-pink); }
/* 「黛比先說結論」 summary box (live .dh-summary) and the sources list (live .dh-sources) */
.ai-prose .dh-summary { margin: 0 0 2em; padding: 22px 24px 20px; background: var(--ai-sheet); box-shadow: var(--ai-shadow-sheet); border-radius: var(--ai-r-xs); border-top: 3px solid var(--ai-pink); }
.ai-prose .dh-summary__label { font-family: var(--ai-font-hand, var(--ai-font-display)); font-weight: 700; color: var(--ai-teal-700); letter-spacing: .08em; }
.ai-prose .dh-summary ul { margin-top: .6em; }
.ai-prose .dh-sources { font-size: .875rem; line-height: 1.75; color: var(--ai-muted); }
.ai-prose .dh-sources a { color: var(--ai-muted); }
/* note / author / CTA boxes after an article (and on the list) */
.ai-note-line { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--ai-rule-strong); font-size: .875rem; line-height: 1.8; color: var(--ai-muted); }
.ai-note-line a { color: var(--ai-teal-700); }
.ai-author { display: flex; gap: 16px; align-items: flex-start; margin-top: 28px; padding: 20px; background: var(--ai-sheet); border-radius: var(--ai-r-xs); box-shadow: var(--ai-shadow-sheet); }
.ai-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ai-pink); }
.ai-author__name { font-weight: 700; margin-bottom: 4px; }
.ai-author p { font-size: .9375rem; line-height: 1.8; }
.ai-author a { color: var(--ai-teal-700); }
.ai-ctabox { margin-top: 32px; padding: clamp(24px, 3vw, 36px); background: var(--ai-paper-2); border-top: 6px solid var(--ai-ink); }
.ai-ctabox__h { font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); line-height: 1.4; }
.ai-ctabox p { margin-top: 10px; color: var(--ai-muted); }
.ai-ctabox__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.ai-ctabox__quiz { font-size: .9375rem; }
.ai-ctabox__quiz a { color: var(--ai-teal-700); font-weight: 600; }
.ai-related { margin-top: 40px; }
.ai-related__h { font-family: var(--ai-font-display); font-weight: 900; font-size: 1.375rem; margin-bottom: 16px; }
/* secondary button (live .ai-btn--secondary) */
.ai-btn--secondary { border-color: var(--ai-teal-700); color: var(--ai-teal-700); background: var(--ai-sheet); }
.ai-btn--secondary:hover { background: var(--ai-teal-50); }
/* 404 */
.ai-404 .ai-phero { min-height: calc(100svh - 120px); display: flex; align-items: center; }
.ai-404__no { font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(4rem, 14vw, 9rem); line-height: 1; color: var(--ai-teal-700); letter-spacing: .02em; }
/* components.html only (internal) */
.ai-cmp__grid { display: grid; gap: 24px 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-items: start; }
.ai-cmp__label { margin: 22px 0 10px; font-size: .75rem; letter-spacing: .12em; color: var(--ai-muted); }
.ai-cmp--tint { background: var(--ai-paper-2); }
.ai-cmp__static { display: inline-flex !important; }
.ai-cmp__static--open .ai-menu-btn__lines i:first-child { translate: 0 4.25px; rotate: 32deg; }
.ai-cmp__static--open .ai-menu-btn__lines i:last-child { translate: 0 -4.25px; rotate: -32deg; scale: 1 1; transform-origin: 50% 50%; }
.ai-cmp__static--open .ai-menu-btn__t--close { opacity: 1; visibility: visible; }

/* ==========================================================================
   05 feature pages (Builder B; merged into site.css by the integrator, 2026-10-28) — shared by /about/,
   /report-triage/, /report-review/, /speaking/: feature hero, section folios, category tags, hand notes, FAQ aside,
   closing back page. Profile list and bridge box moved here from home.css so home and inner pages share one copy;
   the wider profile label column applies to inner pages only (home stays pixel-identical to the 04 version).
   ========================================================================== */
/* profile list + bridge box (moved from home.css) */
.ai-profile { background: var(--ai-sheet); padding: 26px clamp(18px, 3vw, 36px); box-shadow: var(--ai-shadow-sheet); border-radius: var(--ai-r-xs); }
.ai-profile__title { display: flex; align-items: baseline; gap: 14px; font-family: var(--ai-font-display); font-weight: 900; font-size: 1.375rem; padding-bottom: 12px; border-bottom: 2px solid var(--ai-ink); }
.ai-profile__en { font-family: var(--ai-font-body); font-weight: 400; font-size: .75rem; letter-spacing: .3em; color: var(--ai-teal-700); }
.ai-profile__dl > div { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ai-rule); }
.ai-profile__dl > div:last-child { border-bottom: 0; }
.ai-profile__dl dt { font-size: .8125rem; letter-spacing: .14em; color: var(--ai-muted); padding-top: 2px; }
.ai-profile__dl dd { font-weight: 600; line-height: 1.6; }
.ai-bridge { padding: 26px clamp(18px, 3vw, 36px); background: var(--ai-teal-50); border-radius: var(--ai-r-xs); border: 1.5px solid var(--ai-teal-700); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ai-bridge__k { display: flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 700; letter-spacing: .2em; color: var(--ai-teal-700); }
.ai-bridge__icon { width: 26px; height: 12px; position: relative; }
.ai-bridge__icon::before, .ai-bridge__icon::after { content: ""; position: absolute; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ai-teal-700); }
.ai-bridge__icon::before { left: 0; } .ai-bridge__icon::after { right: 0; background: var(--ai-pink); }
.ai-bridge__icon { background: linear-gradient(var(--ai-teal-700), var(--ai-teal-700)) 50% 50% / 14px 2px no-repeat; }
.ai-bridge__t { font-weight: 600; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.75; }

/* ---------- hand writing (Debby's notes) ---------- */
.ai-hand { font-family: "LXGW WenKai TC", "Kaiti TC", "STKaiti", "BiauKai", var(--ai-font-display); font-weight: 400; letter-spacing: .02em; }

/* ---------- feature hero ---------- */
.ai-fhero { padding-bottom: clamp(44px, 6vw, 96px); }
.ai-fhero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.ai-fhero__grid > .ai-runhead { grid-column: 1 / -1; }
.ai-fhero__text { display: contents; }
.ai-fhero__fig { order: 2; position: relative; margin: 28px 0 4px; }
.ai-fhero__more { order: 3; }
.ai-fhero .ai-phero__title { max-width: 12em; }
.ai-fhero .ai-phero__lead { color: var(--ai-ink); }
.ai-fhero__note { margin-top: 16px; font-size: var(--ai-fs-small); line-height: 1.7; color: var(--ai-muted); max-width: 32em; }
.ai-fhero__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ai-fhero__sub { font-size: .8125rem; letter-spacing: .06em; color: var(--ai-muted); padding-left: 2px; }
.ai-fhero .ai-eyebrow__p { font-size: 1rem; }
/* framed photo: white mat, sheet shadow, crop marks, folio tag (decorative) */
.ai-frame { position: relative; overflow: hidden; border-radius: var(--ai-r-xs); background: #E9E4DA; box-shadow: 0 0 0 8px var(--ai-sheet), var(--ai-shadow-sheet); }
.ai-frame img { width: 100%; height: 100%; object-fit: cover; }
.ai-fhero__fig .ai-frame { aspect-ratio: var(--ai-fig-ar-m, 4 / 3); }
.ai-fhero__fig .ai-frame img { object-position: var(--ai-fig-pos, 50% 40%); }
.ai-fhero__tag { position: absolute; z-index: 2; right: 14px; bottom: -14px; padding: 4px 12px; background: var(--ai-ink); color: var(--ai-on-dark); font-size: .75rem; letter-spacing: .18em; border-radius: var(--ai-r-xs); white-space: nowrap; }
.ai-fhero__tag b { font-family: var(--ai-font-display); font-weight: 900; letter-spacing: .04em; margin-right: 8px; }
.ai-fcrop { position: absolute; width: 18px; height: 18px; pointer-events: none; }
.ai-fcrop::before, .ai-fcrop::after { content: ""; position: absolute; background: var(--ai-rule-strong); }
.ai-fcrop::before { width: 18px; height: 1px; } .ai-fcrop::after { width: 1px; height: 18px; }
.ai-fcrop--tl { left: -20px; top: -20px; } .ai-fcrop--tl::before, .ai-fcrop--tl::after { left: 0; top: 0; }
.ai-fcrop--br { right: -20px; bottom: -20px; } .ai-fcrop--br::before, .ai-fcrop--br::after { right: 0; bottom: 0; }
@media (max-width: 767px) {
  .ai-fhero__fig { margin: 24px calc(-1 * var(--ai-gutter)) 0; }
  .ai-fhero__fig .ai-frame { border-radius: 0; box-shadow: none; }
  .ai-fhero__fig .ai-fcrop { display: none; }
  .ai-fhero__tag { right: var(--ai-gutter); }
  .ai-fhero__more .ai-phero__lead { margin-top: 28px; }
}
@media (min-width: 768px) {
  .ai-fhero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(36px, 5vw, 88px); }
  .ai-fhero__text { display: block; grid-column: 1; align-self: center; }
  .ai-fhero__fig { grid-column: 2; margin: 8px 20px 20px 0; align-self: center; }
  .ai-fhero__fig .ai-frame { aspect-ratio: var(--ai-fig-ar, 4 / 5); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .ai-fhero .ai-phero__title { font-size: clamp(2.25rem, 1rem + 3.2vw, 2.875rem); }
}
@media (min-width: 1025px) {
  .ai-fhero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ai-fhero__fig { max-height: calc(100svh - var(--ai-header-h) - 120px); }
}

/* ---------- section shell additions ---------- */
.ai-fsec--tint { background: var(--ai-paper-2); }
.ai-fsec--teal { background: var(--ai-teal-50); }
.ai-fsec--pink { background-color: #FFE1EA; background-image: linear-gradient(160deg, #FFF0F4 0%, #FFF0F4 22%, #FFE1EA 86%); }   /* worst case #FFE1EA: ink 10.86, teal-700 5.78, muted 5.21 */
.ai-fsec--pink .ai-runhead { border-color: rgba(24, 52, 55, .55); }
.ai-fsec--pink .ai-hl__p1 { stroke: rgba(252, 100, 148, .42); }
.ai-fsec--pink .ai-hl__p2 { stroke: rgba(255, 255, 255, .45); }
.ai-head--wide { max-width: none; }
.ai-head .ai-h2 { max-width: 16em; }

/* ---------- category tags (the three triage buckets; same colours as the c-triage stamps) ---------- */
.ai-cat { --tilt: -2deg; --fg: var(--ai-red-700); --bg: var(--ai-red-50); display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 8px; border: 1.5px solid currentColor; border-radius: 6px; background: var(--bg); color: var(--fg); font-weight: 700; font-size: .9375rem; line-height: 1.45; letter-spacing: .04em; white-space: nowrap; transform: rotate(var(--tilt)); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px color-mix(in srgb, currentColor 45%, transparent); }
.ai-cat svg { width: 18px; height: 18px; flex: none; color: #D24C49; }
.ai-cat--wait { --fg: var(--ai-amber-700); --bg: var(--ai-amber-50); --tilt: 1.5deg; }
.ai-cat--wait svg { color: #B17000; }
.ai-cat--gap { --fg: var(--ai-teal-700); --bg: var(--ai-teal-50); --tilt: -1deg; border-style: dashed; border-color: #247B80; box-shadow: none; }
.ai-cat--gap svg { color: #247B80; }


/* ---------- FAQ aside (還有問題？ with Debby's face) ---------- */
.ai-ask { display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; align-items: center; margin-top: 28px; padding: 20px; background: var(--ai-sheet); border-radius: var(--ai-r-xs); box-shadow: var(--ai-shadow-sheet); max-width: 30em; }
.ai-ask img { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ai-pink); }
.ai-ask__k { font-family: var(--ai-font-display); font-weight: 900; font-size: 1.125rem; }
.ai-ask__t { color: var(--ai-muted); font-size: .9375rem; line-height: 1.7; }
.ai-ask__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 12px; }

/* ---------- closing back page (modelled on the home P.10: cut-out half portrait on a pink disc + quote) ---------- */
.ai-pend { padding: clamp(72px, 9vw, 136px) 0; overflow: clip; border-top: 1px solid var(--ai-rule-strong); }
.ai-pend__grid { display: grid; gap: 28px; align-items: center; }
.ai-pend__portrait { position: relative; width: min(64vw, 300px); margin: 0 auto; }
.ai-pend__disc { position: absolute; left: 9%; right: 9%; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--ai-pink-50), var(--ai-pink-100) 70%); box-shadow: inset 0 0 0 1.5px rgba(252, 100, 148, .35); }
.ai-pend__clip { position: relative; aspect-ratio: 1 / .9; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 40% 40%; }
.ai-pend__clip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ai-pend__k { font-size: var(--ai-fs-eyebrow); letter-spacing: var(--ai-track-eyebrow); color: var(--ai-teal-700); margin-bottom: 14px; }
.ai-pend__q { font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem); line-height: 1.42; letter-spacing: .01em; word-break: keep-all; overflow-wrap: anywhere; }
.ai-pend__cta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 16px; margin-top: 32px; }
.ai-pend__sign { margin-top: 18px; font-size: 1.375rem; color: var(--ai-teal-700); }
.ai-pend__sign svg { display: inline-block; width: .7em; height: .7em; color: var(--ai-pink); transform: translateY(-.25em) rotate(10deg); }
@media (min-width: 768px) {
  .ai-pend__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); }
  .ai-pend__portrait { width: 100%; max-width: 400px; }
}

/* ---------- small shared bits ---------- */
.ai-ticklist { display: grid; gap: 12px; }
.ai-ticklist li { position: relative; padding-left: 30px; line-height: 1.75; }
.ai-ticklist li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--ai-teal-700); border-bottom: 2px solid var(--ai-teal-700); transform: rotate(-45deg); }
.ai-xlist { display: grid; gap: 12px; }
.ai-xlist li { position: relative; padding-left: 30px; line-height: 1.75; }
.ai-xlist li::before, .ai-xlist li::after { content: ""; position: absolute; left: 3px; top: .82em; width: 15px; height: 2px; background: var(--ai-red-700); transform: rotate(45deg); }
.ai-xlist li::after { transform: rotate(-45deg); }
.ai-sheet { background: var(--ai-sheet); border-radius: var(--ai-r-xs); box-shadow: var(--ai-shadow-sheet); }
.ai-cap--hide-sr { margin-top: 12px; }

/* ---------- hero highlighter (pure CSS: drawn once on load, after the title has risen; no JS needed) ---------- */
.ai-hl--hero .ai-hl__svg path { stroke-dashoffset: 1; animation: ai-fhl-draw 1s cubic-bezier(.6, 0, .3, 1) .75s forwards; }
.ai-hl--hero .ai-hl__p2 { animation-delay: .9s; }
@keyframes ai-fhl-draw { to { stroke-dashoffset: 0; } }
/* profile labels up to 6 characters (健康管理總監) stay on one line */
.ai-page-inner .ai-profile__dl > div { grid-template-columns: 6.6em 1fr; }
@media (max-width: 359px) { .ai-page-inner .ai-profile__dl > div { grid-template-columns: 1fr; gap: 2px; } }