/* ============================================================
   /about 關於我們｜分頁 v3（2026-10-04）
   疊在 base.css → site.css → shared/pages.css 之上；所有 class 前綴 ab-。
   取代舊版 legal.css＋inline <style> 的純文字排版：這頁是品牌宣言，不是條款。
   ============================================================ */

/* ---- 頁首圖版：首屏同一張靜物照，裁成雜誌圖版＋圖說 ---- */
.ab-plate { margin: 0; }
/* 照片裡那支手機的螢幕是空的（首頁靠 HTML 活畫面補上），這裡同樣蓋一層活畫面。
   座標來源＝landing/landing.css 首屏的比例常數（桌機底圖 hero-v3.webp：
   --ar .55833／--sx .70676／--sy .13081／--sw .15007／--sh .32231／--sr .01563，皆為「底圖寬」的比例）。
   圖框是 container：--Wi＝cover 之後的底圖寬（以圖框寬 cqw 計），--px＝object-position 的水平比例。
   ⚠ 換底圖要回 tools/hero-composite/make-poster-v3.mjs 拿新常數，兩處一起改。 */
.ab-plate-img {
  --Wi: 223.88cqw;   /* 4:5 圖框：Hi＝Hp ⇒ Wi＝(5/4)/.55833 ＝ 2.2388 × 框寬 */
  --px: .8;
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: var(--shadow-soft);
  container-type: inline-size;
}
.ab-plate-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(var(--px) * 100%) 50%;
  display: block;
}
.ab-screen {
  position: absolute;
  left: calc((100cqw - var(--Wi)) * var(--px) + var(--Wi) * .70676);
  top: calc(var(--Wi) * .13081);
  width: calc(var(--Wi) * .15007);
  height: calc(var(--Wi) * .32231);
  border-radius: calc(var(--Wi) * .01563);
  overflow: hidden;
  container-type: inline-size;
  background: var(--paper-raise);
  box-shadow: inset 0 0 0 1px rgba(18, 16, 14, .3);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 2.6cqw;
  padding: 14cqw 6cqw 8cqw;
  color: var(--ink);
}
.ab-screen::before {   /* 瀏海（照片裡是瀏海機型，同首頁 .hs-screen::before） */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 54.24%;
  height: 7.99cqw;
  transform: translateX(-50%);
  border-radius: 0 0 4.2cqw 4.2cqw;
  background: #050505;
}
.ab-screen::after {    /* 窗光反光：跟照片同一道斜光 */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.35) 46%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.ab-screen i { font-family: var(--font-serif-latin); font-style: italic; font-size: 7.4cqw; letter-spacing: .16em; color: var(--ink-soft); }
.ab-screen b { font-size: 10cqw; letter-spacing: .2em; font-weight: 600; }
.ab-screen hr { width: 18cqw; border: 0; border-top: 1px solid var(--hairline); margin: 1.5cqw 0; }
.ab-screen small { font-size: 7.4cqw; letter-spacing: .3em; color: var(--ink-soft); }
.ab-screen strong { font-size: 17cqw; letter-spacing: .08em; line-height: 1.15; color: var(--accent); font-weight: 700; }
.ab-screen em { font-style: normal; font-size: 6.8cqw; color: var(--ink-soft); letter-spacing: .12em; line-height: 1.7; }
.ab-screen u {
  text-decoration: none;
  margin-top: 3cqw;
  padding: 2.4cqw 9cqw;
  border-radius: 99px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 6.8cqw;
  letter-spacing: .14em;
}
/* 圖版內緣一圈極細的紙白框：像裱在卡紙上，不是貼一張圖 */
.ab-plate-img::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .55);
  pointer-events: none;
}
.ab-plate figcaption {
  text-wrap: pretty;
  margin-top: .9rem;
  display: flex;
  gap: .8rem;
  align-items: baseline;
  font-size: var(--text-small);
  color: var(--ink-soft);
  letter-spacing: .06em;
}
.ab-plate figcaption { text-wrap: balance; }
.ab-tap-hint { display: block; margin-top: .25rem; font-weight: 600; color: var(--accent); letter-spacing: .1em; }
/* 點手機換名字：透明按鈕蓋在螢幕位置上（座標同 .ab-screen），有效區遠大於 44px */
.ab-tap {
  position: absolute;
  z-index: 3;
  left: calc((100cqw - var(--Wi)) * var(--px) + var(--Wi) * .70676);
  top: calc(var(--Wi) * .13081);
  width: calc(var(--Wi) * .15007);
  height: calc(var(--Wi) * .32231);
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: calc(var(--Wi) * .01563);
  background: transparent;
  cursor: pointer;
}
/* ⚠ 要寫到 .pg-page 這一層：site.css 的 .pg-page button:focus-visible 特異度較高，會把環蓋回深綠（落在手機黑框上看不見） */
.pg-page .ab-plate .ab-tap:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(18, 16, 14, .55); }
.ab-plate figcaption i {
  font-family: var(--font-serif-latin);
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: .04em;
  flex: none;
}
@media (min-width: 900px) {
  /* 短螢幕（1366×768）也要讓「點手機，換一位賓客」那行提示進首屏 */
  .ab-plate { justify-self: end; width: min(100%, 30rem, calc((100svh - 14rem) * .8)); }
}
@media (max-width: 899px) {
  /* 5:4 圖框：Wi＝(4/5)/.55833 ＝ 1.4328 × 框寬；貼右裁左，信封＋手機都在框裡 */
  .ab-plate-img { --px: .86; }   /* 4:5 圖框沿用桌機常數；手機寬約佔圖框 1/3，看得到螢幕裡的字 */
}

/* ---- 01 我們是誰：左章頭、右正文＋引言 ---- */
.ab-grid { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 900px) {
  .ab-grid { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 4rem; align-items: start; }
}
.ab-body { max-width: 36em; }
.ab-body p + p { margin-top: 1rem; }
.ab-body p { color: var(--ink-soft); }
.ab-body strong { color: var(--ink); }
.ab-pull .nw { white-space: nowrap; }
.ab-pull {
  text-wrap: balance;
  font-size: clamp(1.4rem, 3.8vw, 2.2rem);
  line-height: 1.55;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--ink) !important;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--hairline);
  text-wrap: balance;
}
/* 01 左欄的局部圖版：同一張靜物照只取蠟封與信封（物件，不讓頁首之後變文字牆） */
.ab-detail { margin: clamp(1.4rem, 4vw, 2.4rem) 0 0; }
.ab-detail span { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; box-shadow: var(--shadow-soft); }
.ab-detail img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; transform: scale(2.8); transform-origin: 55% 50%;   /* 只取信封與蠟封，手機（原圖 x≥.70）不入框 */ display: block; }
.ab-detail figcaption { margin-top: .7rem; display: flex; gap: .7rem; align-items: baseline; font-size: var(--text-small); color: var(--ink-soft); letter-spacing: .04em; text-wrap: pretty; }
.ab-detail figcaption i { font-family: var(--font-serif-latin); color: var(--accent); flex: none; }
.ab-herb span { aspect-ratio: 4 / 5; background: var(--paper-raise); box-shadow: var(--shadow-soft); display: grid; place-items: center; position: relative; overflow: hidden; }
.ab-herb span::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--hairline); pointer-events: none; }
.ab-herb img { width: 58%; height: auto; transform: rotate(-4deg);   /* 圖框沒有固定高度，% 高度會失效，改用寬度定尺寸 */ mix-blend-mode: multiply; filter: saturate(.85); }
@media (min-width: 900px) { .ab-detail { max-width: 15rem; } .ab-who .ab-body { padding-top: 1.7rem; } }
@media (max-width: 899px) {
  .ab-detail { max-width: none; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
  .ab-detail figcaption { margin-top: 0; flex-direction: column; gap: .3rem; }
}
.ab-bot-a { right: 3%; bottom: 6%; width: clamp(7rem, 10vw, 10.5rem); --bot-o: .72; }

/* ---- 02 順序：字級本身就是優先序（第一名最大、好看最小） ---- */
.ab-why-in { margin-top: clamp(1.6rem, 4vw, 2.4rem); display: grid; gap: clamp(1.6rem, 4vw, 2.4rem); }
.ab-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  container-type: inline-size;   /* 字級綁這一欄的寬，不綁視窗（評審：900–1100 寬第一名衝出欄外） */
}
.ab-rank li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(.9rem, 2.4vw, 1.4rem);
  border-bottom: 1px solid var(--hairline);
}
.ab-rank i {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--accent);
}
.ab-rank b { font-weight: 700; letter-spacing: .06em; line-height: 1.2; white-space: nowrap; }
/* 7 個字＋.06em 字距 ≈ 7.5em；欄內扣掉編號欄 3.2rem＋間距 1rem */
.ab-rank li:nth-child(1) b { font-size: clamp(1.5rem, calc((100cqw - 4.6rem) / 7.7), 4.1rem); color: var(--ink); }
.ab-rank li:nth-child(2) b { font-size: clamp(1.3rem, calc((100cqw - 4.6rem) / 11.5), 2.7rem); color: color-mix(in srgb, var(--ink) 82%, var(--paper)); }
.ab-rank li:nth-child(3) b { font-size: clamp(1.1rem, calc((100cqw - 4.6rem) / 16), 1.9rem); color: var(--ink-soft); font-weight: 600; }
/* 第一名後面拉一條會長出來的線：視線停在它身上 */
.ab-rank li:nth-child(1) { position: relative; }
.ab-rank li:nth-child(1)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
}
html.pv-motion .ab-rank li:nth-child(1)::after { transform: scaleX(0); transition: transform 1.4s var(--ease-out) .35s; }
html.pv-motion .ab-rank li:nth-child(1).is-in::after { transform: scaleX(1); }
html.pv-motion .ab-rank li.reveal b { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out) .15s; }
html.pv-motion .ab-rank li.reveal.is-in b { clip-path: inset(0 0 0 0); }
/* 頁首手機螢幕裡的名字輪替（about.js 只在 pv-motion 換；換的那一下淡入） */
html.pv-motion .ab-screen strong.is-swap { animation: ab-swap .7s var(--ease-out); }
@keyframes ab-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ab-rank-note { color: var(--ink-soft); max-width: 36em; }
@media (max-width: 899px) { .ab-why { padding-bottom: calc(var(--section-y) * .6); } }
/* 優先序三行：指到哪一行，另兩行退一步（滑鼠增強；觸控與 RM 不影響閱讀） */
@media (hover: hover) {
  .ab-rank li i { transition: color .35s var(--ease-out), transform .45s var(--ease-out); }
  .ab-rank li:hover i { color: var(--ink); font-weight: 600; transform: translateX(.3rem); }
  .ab-rank li:not(:nth-child(1)) { position: relative; }
  .ab-rank li:not(:nth-child(1))::after {
    content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
    background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
  }
  .ab-rank li:not(:nth-child(1)):hover::after { transform: scaleX(1); }
}
@media (min-width: 900px) {
  .ab-why-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 4rem; align-items: start; }
  .ab-why-in .ab-body { grid-column: 1; grid-row: 1; }
  .ab-rank { grid-column: 2; grid-row: 1 / span 2; }
  .ab-rank-note { grid-column: 1; grid-row: 2; }
}

/* ---- 03 堅持：每條一個大數字當物件 ---- */
.ab-vows { list-style: none; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; padding: 0; display: grid; gap: 0; }
.ab-vow {
  display: grid;
  gap: .6rem 2rem;
  padding-block: clamp(1.6rem, 4vw, 2.4rem);
  border-top: 1px solid var(--hairline);
}
.ab-vow:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 900px) {
  .ab-vow { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; }
}
.ab-vow-fig {
  font-family: var(--font-serif-latin);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(3.6rem, 11vw, 6.2rem);
  line-height: .9;
  color: var(--accent);
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: .35rem;
}
.ab-vow-fig small {
  font-family: var(--font-serif-tc);
  font-style: normal;
  font-size: var(--text-small);
  letter-spacing: .2em;
  color: var(--ink-soft);
  font-weight: 400;
}
.ab-vow h3 { font-size: var(--text-h3); font-weight: 700; letter-spacing: .08em; line-height: 1.5; }
.ab-vow p:not(.ab-vow-fig) { margin-top: .6rem; color: var(--ink-soft); max-width: 36em; }
.ab-vow strong { color: var(--ink); }
.ab-bot-b { right: 3%; top: 8%; width: clamp(7rem, 10vw, 10.5rem); --bot-o: .7; }
@media (max-width: 1199px) { .ab-bot-a { display: none; } .ab-bot-b { width: 5.5rem; top: 2.2rem; right: 3%; --bot-o: .6; } }

/* ---- 04 聯絡：深綠收尾帶裡的四個管道 ---- */
.ab-links {
  list-style: none;
  margin: 2.2rem auto 0;
  padding: 0;
  max-width: 52rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
  text-align: left;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
}
@media (max-width: 640px) { .ab-links { grid-template-columns: 1fr; } .ab-links a small { white-space: nowrap; } }
.ab-seal {
  --sz: 5rem;
  display: block;
  width: var(--sz);
  aspect-ratio: 1;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  /* 首屏同一張照片裡的蠟封（跟頁首呼應），放大到 --sz：原圖蠟封中心 (1233, 520)、直徑 ≈113px，取 118px 留一圈蠟邊 */
  background: url(/landing/assets/hero-v3.webp) no-repeat;
  background-size: calc(var(--sz) / 118 * 1920) auto;
  background-position: calc(var(--sz) / 2 - var(--sz) / 118 * 1233) calc(var(--sz) / 2 - var(--sz) / 118 * 520);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 63%);
  mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 63%);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)) brightness(1.18) saturate(1.05);
  transform: rotate(-8deg) scale(1.25);
}
.ab-links li { border-bottom: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent); }
.ab-links a {
  position: relative;
  display: grid;
  gap: .2rem;
  min-height: 44px;
  padding: 1rem 2.4rem 1rem .9rem;
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .1em;
  transition: background .35s var(--ease-out);
}
.ab-links a::after {
  content: "↗";
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 400;
  opacity: .8;
  transition: transform .4s var(--ease-out);
}
.ab-links a:hover::after { transform: translate(.2rem, calc(-50% - .2rem)); }
.ab-links a small { white-space: nowrap; font-weight: 400; font-size: var(--text-tiny); letter-spacing: .08em; opacity: .78; }
.ab-links a:hover { background: color-mix(in srgb, var(--accent-ink) 8%, transparent); }
.ab-end a:focus-visible { outline-color: var(--accent-ink); }