/* =========================================================
   詠詮藝品｜全站樣式
   色彩、字體依 Nora 品牌規範；手機版斷點：960px、650px
   ========================================================= */

:root {
  --ink: #000000;          /* 文字、按鈕：純黑（2026-10-19 指定，首頁不用其他顏色） */
  --gold: #a67c52;         /* 匠心金：強調色 */
  --paper: #ffffff;        /* 頁面底色：純白（2026-10-19 指定） */
  --warm: #f1ece3;         /* 暖白 */
  --sand: #e2e2e2;         /* 分隔線、圖片底色：中性灰 */
  --sage: #8f948a;         /* 禪意綠：次要文字 */

  /* 全站字型：Noto Serif TC（思源宋體），標題用粗體 */
  --font-title: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-body: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-en: "Noto Serif TC", "Songti TC", serif;

  --header-pad: 30px;
  --logo-h: clamp(360px, 58vh, 580px);                      /* 直式 Logo 的高度：約畫面 58%（890 高的螢幕約 516×247px） */
  --section-gap: clamp(308px, 30.8vw, 504px);                /* 區塊之間的間距：全部統一用 Instagram 的距離 */
  --top-space: clamp(200px, 32vh, 320px);                    /* 網頁最上方的白色留白 */
  --logo-w: calc(var(--logo-h) * 412 / 860);                 /* 依 Logo 比例算出寬度（原本的排列，viewBox 412×860） */
  --side: calc(var(--header-pad) + var(--logo-w) + 64px);    /* 內容左側留白（平板）：讓出 Logo 的欄位 */
  --side-r: clamp(24px, 6vw, 96px);                          /* 內容右側留白 */
  --about-photo-w: min(clamp(480px, 40vw, 760px), calc((100vh - var(--top-space) - 56px) * 4 / 3));   /* 關於我們的照片寬度（橫式 4:3）：第一屏放得下；服務內容靠它對齊 */
  --rail-w: max(170px, 12.4vw);                              /* 桌機左側欄寬度 */
  --logo-h-rail: clamp(260px, 40vh, 340px);                  /* 左側欄主 Logo 高度（寬約 125～163px） */
  --side-full: var(--side);
  --ease: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 125%; }   /* 整頁文字放大（1rem = 20px） */
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: .04em;
  background-color: var(--paper);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-title); font-weight: 400; margin: 0; }   /* 首頁不用粗體 */
p { margin: 0; text-wrap: pretty; }   /* 最後一行盡量不要只剩一個字（JS 另外把句尾黏在一起） */
.nobr { white-space: nowrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--ink); color: #fff; padding: 8px 14px; text-decoration: none;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* =========================================================
   00 開場 Logo（特效庫 13-A）
   ========================================================= */
html { scrollbar-gutter: stable; }   /* 捲軸的位置一直保留，開場結束捲軸出現時畫面不會往左跳 */
body.is-intro { overflow: hidden; }
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: opacity 1.4s ease 1s, visibility 1.4s ease 1s;   /* Logo 先淡出，1 秒後白底再淡出 */
}
.intro__logo {
  width: clamp(220px, 26vw, 360px);
  opacity: 0;
  transition: opacity 1.8s ease .2s;                 /* 只淡入一次，停住不再循環 */
}
.intro.is-ready .intro__logo { opacity: 1; }
.intro.is-done { opacity: 0; visibility: hidden; }
.intro.is-done .intro__logo { opacity: 0; transition: opacity 1s ease; }   /* 結束時 Logo 先淡出 */
html:not(.js) .intro { display: none; }
html:not(.js) body.is-intro { overflow: visible; }

/* =========================================================
   01 頁首：直式 Logo 固定＋兩條線漢堡選單（特效庫 13-B、13-C）
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--header-pad);
  pointer-events: none;                   /* 空白處點穿 */
}
.site-logo,
.site-header__right,
.site-menu.is-open { pointer-events: auto; }

.site-logo { position: relative; z-index: 2; display: block; width: var(--logo-w); }
@media (min-width: 961px) {
  :root { --side: calc(var(--rail-w) + clamp(48px, 5vw, 96px)); }   /* 內容從左側欄右邊開始 */
}
.site-logo img { width: 100%; height: var(--logo-h); transition: filter .4s; }

.site-header__right {
  position: relative; z-index: 2;
  margin-left: auto;                      /* Logo 固定定位後，仍然靠右 */
  display: flex; align-items: center; gap: 28px;
  transition: color .4s;
}


/* 疊在照片上時改成白色（JS 依區塊切換 .is-light） */
.site-header.is-light:not(.is-menu-open) .site-logo img { filter: invert(1); }

/* 手機：橫式 Logo ＋ 漢堡固定在最上方的白色橫條，往下捲也一直都在 */
@media (max-width: 650px) {
  .site-header { align-items: center; padding: 12px 20px; background: var(--paper); }
  .site-logo { width: auto; }
  .site-logo picture { display: block; }
  .site-logo img { width: auto; height: 44px; }
  .site-header.is-light:not(.is-menu-open) .site-logo img { filter: none; }      /* 白底上維持黑色 */
  .site-header.is-light:not(.is-menu-open) .site-header__right { color: var(--ink); }
}
.site-header.is-light:not(.is-menu-open) .site-header__right { color: #fff; }

.menu-btn {
  position: relative;
  width: 61px; height: 20px;
  padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer;
}
.menu-btn::before,
.menu-btn::after {
  content: "";
  position: absolute; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform .4s ease, top .4s ease, bottom .4s ease;
}
.menu-btn::before { top: 5px; }
.menu-btn::after  { bottom: 5px; }
.menu-btn[aria-expanded="true"]::before { top: 4px; transform: rotate(10deg); }
.menu-btn[aria-expanded="true"]::after  { bottom: 4px; transform: rotate(-10deg); }

@media (min-width: 961px) {
  /* 桌機：左側欄（參考 loof-inn）—— Logo 在上、選單按鈕在中間、初評連結在下（不加分隔線） */
  .site-logo {
    position: fixed;
    top: 72px;
    left: calc(var(--rail-w) / 2);
    transform: translateX(-50%);
    width: auto;
  }
  .site-logo img { width: auto; height: var(--logo-h-rail); }
  .site-header__right {
    position: fixed;
    top: calc(72px + var(--logo-h-rail) + 56px);   /* 固定在 Logo 正下方 */
    left: calc(var(--rail-w) / 2);
    transform: translateX(-50%);
    margin: 0;
  }
  .menu-btn { width: 44px; height: 16px; }
  .menu-btn::before { top: 4px; }
  .menu-btn::after { bottom: 4px; }
  .menu-btn[aria-expanded="true"]::before { top: 3px; }
  .menu-btn[aria-expanded="true"]::after { bottom: 3px; }
}
.menu-btn:hover { opacity: .5; }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
  overflow-y: auto;
  padding: 100px 24px;
}
.site-menu.is-open { opacity: 1; visibility: visible; }
body.is-menu-open { overflow: hidden; }

.site-menu__inner {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 24px 120px;
}
.site-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.site-menu__list a { display: block; text-decoration: none; }
.site-menu__list a:hover { opacity: .6; }
.site-menu__list .jp { display: block; font-family: var(--font-title); font-size: 1.4rem; letter-spacing: .25em; }
.site-menu__list .en { display: block; margin-top: 2px; font-family: var(--font-en); font-size: .75rem; letter-spacing: .3em; color: var(--ink); }
.site-menu__list a[aria-current="page"] .jp { text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 1px; }
.site-menu__foot { grid-column: 1 / -1; margin-top: 48px; font-size: .85rem; color: var(--ink); }
.site-menu__cta { display: inline-block; margin-bottom: 10px; color: var(--ink); font-family: var(--font-title); font-size: 1.1rem; letter-spacing: .2em; }

/* =========================================================
   02 關於我們：窄長照片＋直書（標題疊在照片右上）
   ========================================================= */
.about { margin: var(--top-space) var(--side-r) 0 var(--side); }
.about__inner {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: clamp(48px, 6vw, 110px);
}
.about__words { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 2.4em; }   /* 文字底部切齊照片底部 */
.about__text {
  writing-mode: vertical-rl;
  font-size: clamp(.9rem, 1vw, 1rem);
  line-height: 2.5;
  letter-spacing: .16em;
}
.about__more {
  position: relative;
  padding: 26px 0 64px;                     /* 高度跟著字走，底部固定留空間給直線，直線不會碰到字 */
  writing-mode: vertical-rl;
  line-height: 46px;
  font-size: .86rem;
  letter-spacing: .2em;
  text-decoration: none;
  border: 1px solid var(--ink);
}
.about__more::after {                     /* 直線從框內一直延伸到框外 */
  content: "";
  position: absolute; left: 50%; top: calc(100% - 26px);
  width: 1px; height: 56px;
  background: var(--ink);
  transition: height .4s var(--ease);
}
.about__more:hover::after { height: 80px; }
.about__more { margin-bottom: 30px; }   /* 突出框外的直線剛好停在照片底部 */
.js .about__more.is-split::after { transform: scaleY(0); transform-origin: top center; transition: height .4s var(--ease), transform .7s var(--ease) 1.5s; }   /* 框畫完、字出現後，直線往下長出來 */
.js .about__more.is-split.is-in::after { transform: scaleY(1); }
.about__photo {
  position: relative;
  flex-shrink: 0;
  width: var(--about-photo-w);
  aspect-ratio: 4 / 3;                       /* 橫式照片，比文字高，標題才不會顯得太大 */
  margin: 0;
  overflow: hidden;
  background: var(--sand);
}
.about__photo > img { width: 100%; height: 100%; object-fit: cover; }
.js .about__photo { background: transparent; }   /* 標題先出現、照片晚一段才淡入，照片出現前不露出灰底 */
.about__title {
  position: absolute;
  top: 28px;
  right: 28px;
  writing-mode: vertical-rl;
  padding: 22px 14px;
  color: var(--ink);
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  letter-spacing: .3em;
  line-height: 1.2;
  /* 白色毛玻璃＋黑字（插畫是淺色底） */
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
          backdrop-filter: blur(10px) saturate(110%);
  border: 1px solid var(--ink);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .about__title { background: rgba(255, 255, 255, .8); }
}

/* =========================================================
   區塊標題：直排細框（服務內容、精選文章共用）
   ========================================================= */
.v-title { text-align: center; }
.v-title :is(h1, h2) > span {
  position: relative;
  display: inline-block;
  padding: 28px 0 70px;                     /* 底部留空間給短直線 */
  border: 1px solid var(--ink);
  writing-mode: vertical-rl;
  font-size: 1rem;
  line-height: 50px;                        /* 框的寬度：比照「我們的修復原則」 */
  letter-spacing: .3em;
}
.v-title :is(h1, h2) > span::after {                 /* 直線從框內一直延伸到框外（同「我們的修復原則」） */
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 28px);
  width: 1px;
  height: 64px;
  background: var(--ink);
  transform-origin: top center;
}
.js .v-title .is-split::after { transform: scaleY(0); transition: transform .7s var(--ease) 1.5s; }   /* 字出現後，直線再往下長出來 */   /* 標題出現後，直線往下長出來 */
.js .v-title .is-split.is-in::after { transform: scaleY(1); }

/* 區塊標題的進場特效：描框 —— 從右下角起筆，依序畫到左下 → 左上 → 右上 → 回到右下（下邊→左邊→上邊→右邊），框畫完後字一個一個浮現（JS 會把字拆開並加上 .is-split） */
.js .is-split {
  border-color: transparent !important;
  background-image:
    linear-gradient(var(--frame, var(--ink)), var(--frame, var(--ink))),
    linear-gradient(var(--frame, var(--ink)), var(--frame, var(--ink))),
    linear-gradient(var(--frame, var(--ink)), var(--frame, var(--ink))),
    linear-gradient(var(--frame, var(--ink)), var(--frame, var(--ink)));
  background-repeat: no-repeat;
  background-position: right bottom, left bottom, left top, right top;   /* 下邊往左長、左邊往上長、上邊往右長、右邊往下長 */
  background-size: 0 1px, 1px 0, 0 1px, 1px 0;
}
.js .is-split.is-in { animation: frame-draw .9s var(--ease) forwards; }
@keyframes frame-draw {
  0%   { background-size: 0 1px,    1px 0,    0 1px,    1px 0; }
  25%  { background-size: 100% 1px, 1px 0,    0 1px,    1px 0; }
  50%  { background-size: 100% 1px, 1px 100%, 0 1px,    1px 0; }
  75%  { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 0; }
  100% { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; }
}
.js .is-split .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .8s ease, transform .8s var(--ease);
  transition-delay: calc(var(--n) * .08s + .8s);   /* 框畫完才開始 */
}
.js .is-split.is-in .ch { opacity: 1; transform: none; }
.v-title { will-change: transform; }   /* 捲動時的視差位移由 JS 設定 */

/* =========================================================
   03 服務內容：橫長照片疊起來，標題寫在照片上（特效庫 04：由左往右）
   ========================================================= */
.services { padding: var(--section-gap) var(--side-r) 0 var(--side-full); }
.services__layout {
  display: grid;
  grid-template-columns: 114px minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}
.services__main { width: max(calc(100% - var(--about-photo-w)), 26rem); }    /* 至少和下方說明句一樣寬（橫條延伸到句尾） */
.services__lead { margin-top: 36px; font-size: .98rem; letter-spacing: .1em; }
@media (min-width: 961px) { .services__lead { white-space: nowrap; } }   /* 桌機維持一行，不換行 */
.services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.4vw, 24px);            /* 五條之間留白（純白），插畫底色相同時才分得出每一條；不加分隔線 */
}
.svc__link { display: block; color: var(--ink); text-decoration: none; }   /* 插畫是淺色底，項目名稱用黑字 */
.services__list { container-type: inline-size; }   /* 讓照片高度可以依清單寬度計算 */
.svc__pic { position: relative; width: 100%; height: max(150px, 25cqw); margin: 0; overflow: hidden; background: var(--sand); }   /* 約 4:1，最少 150px 高，直寫的項目名稱不會折成兩行 */
.svc__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--pos-y, 50%); transition: transform .8s ease; }   /* --pos-y：電腦版 4:1 時要露出的高度位置（每張圖在 HTML 設定） */
a.svc__link:hover .svc__pic img { transform: scale(1.04); }
.svc__title {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 36px;                              /* 讓出右端紙捲的位置 */
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;                      /* 垂直置中在橫條上，字不會被切掉 */
  gap: 6px;
  color: var(--ink);
}
.svc__title .jp { writing-mode: vertical-rl; font-size: clamp(1.05rem, 1.25vw, 1.35rem); letter-spacing: .2em; line-height: 1.2; }
.svc__title .en { writing-mode: vertical-rl; font-family: var(--font-en); font-size: .62rem; letter-spacing: .12em; }

/* 跟著捲動，遮罩由左往右擦開：第 1 條全開才開始第 2 條，往回捲會收回（JS 依捲動設定每條的 --wipe 與 --title） */
.js [data-reveal] .svc__pic { background: transparent; }
.js [data-reveal] .svc__pic img { clip-path: inset(0 var(--wipe, 100%) 0 0); }
.js [data-reveal] .svc__title { opacity: var(--title, 0); transform: translateY(calc((1 - var(--title, 0)) * 12px)); }
/* 紙捲：停在擦開的邊緣，跟著往右移，全開後留在右端（像放開的手卷） */
.services__list { --roll-w: 16px; }
.js [data-reveal] .svc__pic::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--roll-w);
  left: clamp(0px, calc(100% - var(--wipe, 100%) - var(--roll-w) / 2), calc(100% - var(--roll-w)));
  background: linear-gradient(90deg, #d8cfbe 0%, #efe9dd 20%, #fdfbf6 46%, #f2ece0 72%, #d2c8b6 100%);   /* 明暗做出圓柱感 */
  box-shadow: -3px 0 6px rgba(0, 0, 0, .1), 2px 0 4px rgba(0, 0, 0, .06);
  pointer-events: none;
}

/* =========================================================
   04 精選文章：直書目錄（標題框在右）
   ========================================================= */
.featured { padding: calc(var(--section-gap) * .8) var(--side-r) 0 var(--side-full); }   /* 比其他區稍近一點，但不會貼著上一區 */
.featured__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 114px;   /* 整組靠右 */
  grid-template-areas:
    ". pic list cat"
    ". pic all  cat";
  grid-template-rows: 1fr auto;
  column-gap: clamp(40px, 4vw, 72px);
  align-items: start;
}
.featured__cat { grid-area: cat; }
.featured__pic {
  grid-area: pic;
  position: relative;
  width: clamp(260px, 24vw, 380px);
  aspect-ratio: 2 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--sand);
}
.featured__pic img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  clip-path: inset(0 0 0 100%);              /* 預設藏起來 */
  transform: scale(1.12);
  transition: clip-path 1s var(--ease), transform 1.6s var(--ease);
}
.featured__pic img.is-prev   { z-index: 1; clip-path: inset(0); transform: scale(1); transition: none; }   /* 舊照片留在底下 */
.featured__pic img.is-active { z-index: 2; clip-path: inset(0); transform: scale(1); }                      /* 新照片由右往左展開 */
.featured__pic:hover img.is-active { transform: scale(1.03); }
.featured__index {
  grid-area: list;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row-reverse;              /* 由右往左，像書的目錄 */
  gap: clamp(16px, 1.8vw, 32px);
}
.featured__index a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9em;
  color: var(--ink);
  text-decoration: none;
  opacity: .4;
  transition: opacity .35s ease;
}
.featured__index a.is-active,
.featured__index a:focus-visible { opacity: 1; }
.featured__index .t { writing-mode: vertical-rl; font-size: clamp(.98rem, 1.1vw, 1.15rem); letter-spacing: .2em; line-height: 1.5; }
.featured__all { grid-area: all; justify-self: start; margin-top: 40px; }
.featured__all a { letter-spacing: .2em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.featured__all a:hover { opacity: .6; }

/* =========================================================
   05 常見問題：直書標題在左，右邊是可展開的問答
   ========================================================= */
.faq { padding: calc(var(--section-gap) * .75) var(--side-r) 0 var(--side-full); }   /* 比其他區近一點，接在精選文章後面 */
.faq__layout {
  display: grid;
  grid-template-columns: 114px minmax(0, 1fr);   /* 和服務內容一樣，標題欄在左 */
  column-gap: 40px;
  align-items: start;
}
.faq__main { max-width: 46rem; }
.faq__list { border-top: 1px solid var(--sand); }
.qa { border-bottom: 1px solid var(--sand); }
.qa__q {
  position: relative;
  display: block;
  padding: 30px 64px 30px 0;
  font-size: clamp(.95rem, 1.05vw, 1.08rem);
  letter-spacing: .12em;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
  transition: opacity .3s;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { opacity: .6; }
.qa__q::before,
.qa__q::after {                             /* 右側細線的「＋」，展開時直線收起變成「－」 */
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--ink);
  transition: transform .4s var(--ease);
}
.qa__q::after { transform: rotate(90deg); }
.qa[open] .qa__q::after { transform: rotate(0deg); }
.qa__a { padding: 0 64px 34px 0; }
.qa__a p { font-size: .9rem; line-height: 2.1; letter-spacing: .08em; }
/* 展開、收合時高度平滑變化（支援的瀏覽器才有，其他直接開合） */
@supports (interpolate-size: allow-keywords) {
  .faq__list { interpolate-size: allow-keywords; }
  .qa::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height .5s var(--ease), opacity .5s ease, content-visibility .5s allow-discrete;
  }
  .qa[open]::details-content { height: auto; opacity: 1; }
}
.faq__all { margin-top: 40px; }
.faq__all a { letter-spacing: .2em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.faq__all a:hover { opacity: .6; }

/* 常見問題頁（faq.html）：同樣直書標題在左，右邊依分類排列全部問答 */
.faq.faq--page { padding-top: var(--top-space); padding-bottom: clamp(96px, 10vw, 160px); }   /* 最後的初評／聯絡連結跟頁尾 Logo 拉開距離 */
.faq--page .faq__main { max-width: 48rem; }
.faq__intro { font-size: .92rem; line-height: 2.1; letter-spacing: .08em; }
.faq__toc ul { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 32px; }
.faq__toc a { font-size: .86rem; letter-spacing: .16em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.faq__toc a:hover { opacity: .6; }
.faq__group { margin-top: clamp(80px, 8vw, 128px); }
.faq__group, .qa { scroll-margin-top: 96px; }   /* 從分類連結跳過來時，上方留一點空間（手機不被頁首擋住） */
.faq__group-title { margin-bottom: 24px; font-size: 1.5rem; letter-spacing: .24em; line-height: 1.5; }   /* 比題目大一截，一看就是段落開頭 */
.faq__group-title .en { display: block; margin-bottom: 4px; font-family: var(--font-en); font-size: .6rem; letter-spacing: .3em; line-height: 1.6; }   /* 英文小字放在中文上方（同選單寫法） */
.faq__group .faq__list { border-top-color: var(--ink); }   /* 分類下方第一條線用黑色實線，題目之間維持淺灰 */
.qa__a p + p, .qa__a ol + p { margin-top: 1em; }
.qa__a ol { margin: 0; padding: 0; list-style: none; font-size: .9rem; line-height: 2.1; letter-spacing: .08em; }
.qa__flow { display: flex; flex-wrap: wrap; gap: .2em 0; }
.qa__flow li:not(:last-child)::after { content: "→"; margin: 0 .7em; }   /* 流程用箭頭串起來 */
.qa__steps { counter-reset: step; }
.qa__steps li { position: relative; padding-left: 2em; counter-increment: step; }
.qa__steps li::before { content: counter(step) "."; position: absolute; left: 0; }
.faq__cta { margin-top: clamp(96px, 9vw, 144px); }
.faq__cta p { font-size: .92rem; letter-spacing: .08em; }
.faq__cta-links { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 28px; }
.faq__cta-links a { letter-spacing: .2em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.faq__cta-links a:hover { opacity: .6; }

/* 聯絡我們頁（contact.html）：沿用常見問題頁的版面（直書標題、分類標題、說明句），內容區另外排 */
.ct__sec { margin-top: clamp(80px, 8vw, 128px); scroll-margin-top: 96px; }
.ct__body { padding-top: 8px; border-top: 1px solid var(--ink); }   /* 分類下方的黑色實線（同常見問題頁） */
.ct__sub { margin: 36px 0 14px; font-size: 1.05rem; letter-spacing: .16em; }
.ct__list, .ct__flow { margin: 0; padding: 0; list-style: none; font-size: .9rem; line-height: 2.1; letter-spacing: .08em; }
.ct__note { margin-top: 14px; font-size: .86rem; line-height: 2.1; letter-spacing: .06em; }
.ct__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; margin-top: 28px; }
.ct__text-btn, .ct__text-link {
  padding: 0 0 2px; border: 0; border-bottom: 1px solid currentColor; background: none;
  color: var(--ink); font: inherit; font-size: .86rem; letter-spacing: .12em; text-decoration: none; cursor: pointer;
}
.ct__text-btn:hover, .ct__text-link:hover { opacity: .6; }
.ct__hand { width: 1.4em; height: 1.4em; margin-left: .3em; vertical-align: -.35em; fill: #fff; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }   /* 白色手指（線條圖示，同頁尾聯絡圖示的畫法），提示可以按 */
.ct__label { font-size: .86rem; letter-spacing: .12em; }   /* 「用 Email 寄出初評資料」只是標題，不是連結 */
.ct__template { margin-top: 28px; padding: 24px 28px; border: 1px solid var(--sand); }
.ct__template pre { margin: 0 0 18px; font: inherit; font-size: .84rem; line-height: 2; letter-spacing: .06em; white-space: pre-wrap; }
.ct__info { margin: 0; }
.ct__info > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--sand); }
.ct__info dt { font-size: .86rem; letter-spacing: .12em; }
.ct__info dd { margin: 0; font-size: .9rem; line-height: 1.9; letter-spacing: .06em; }
.ct__info a { text-decoration: none; border-bottom: 1px solid currentColor; }
.ct__info a:hover { opacity: .6; }
.ct__map { margin-top: 28px; aspect-ratio: 16 / 10; background: var(--sand); }
.ct__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* 專欄文章頁（articles.html）：分類、搜尋、網格卡片、分頁（JS 在 articles.js） */
.ar .faq__main.ar__main { max-width: none; }
.ar__tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-top: 48px; }
.ar__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.ar__cats button {
  padding: 0 0 3px; border: 0; border-bottom: 1px solid transparent; background: none;
  color: var(--ink); font: inherit; font-size: .86rem; letter-spacing: .16em; cursor: pointer;
  opacity: .45; transition: opacity .3s;
}
.ar__cats button:hover { opacity: 1; }
.ar__cats button[aria-pressed="true"] { opacity: 1; border-bottom-color: currentColor; }   /* 目前的分類：黑字＋底線 */
.ar__search input {
  width: min(20rem, 100%); padding: 6px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none;
  color: var(--ink); font: inherit; font-size: .86rem; letter-spacing: .08em; -webkit-appearance: none; appearance: none;
}
.ar__search input::placeholder { color: #999; }
.ar__search input:focus { outline: none; }
.ar__search input:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.ar__count { margin-top: 56px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-size: .8rem; letter-spacing: .14em; scroll-margin-top: 96px; }
.ar__grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 4.5vw, 72px) clamp(24px, 2.6vw, 44px); }
.ar__card a { display: block; color: var(--ink); text-decoration: none; }
.ar__pic { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: #faf5ec; }   /* 底色同插畫的暖白 */
.ar__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.ar__card a:hover .ar__pic img { transform: scale(1.04); }
.ar__pic.is-blank { display: grid; place-items: center; }   /* 還沒有插畫的文章：暖白底＋淡淡的方形 Logo */
.ar__pic.is-blank .ar__mark { width: 34%; height: auto; opacity: .16; }
.ar__card a:hover .ar__pic.is-blank .ar__mark { transform: none; }
.ar__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 18px; font-size: .72rem; letter-spacing: .16em; color: #666; }   /* 中性灰，不用其他顏色 */
.ar__title { margin-top: 8px; font-size: 1rem; line-height: 1.7; letter-spacing: .08em; text-align: justify; text-justify: inter-character; transition: opacity .3s; }   /* 左右對齊，每行切齊卡片兩側（最後一行靠左） */
.ar__card a:hover .ar__title { opacity: .6; }
.ar__excerpt {
  margin-top: 10px; font-size: .8rem; line-height: 1.9; letter-spacing: .05em; color: #555;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;   /* 摘要最多 3 行 */
}
.ar__empty { margin-top: 48px; font-size: .9rem; letter-spacing: .08em; }
.ar__empty a { border-bottom: 1px solid currentColor; text-decoration: none; }
.ar__pager { display: flex; justify-content: center; gap: 8px; margin-top: 80px; }
.ar__pager:empty { display: none; }
.ar__pager button {
  min-width: 40px; height: 40px; padding: 0 6px; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: .86rem; letter-spacing: .08em; cursor: pointer; opacity: .45;
}
.ar__pager button:hover { opacity: 1; }
.ar__pager button[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 1px; }

/* =========================================================
   文章內頁（guide/*.html、articles/*.html，由工作檔的「文章頁.py」產生）
   一欄閱讀寬度約 40rem；寬螢幕時和頁尾一樣在整個畫面置中，窄一點時讓出左側 Logo 欄
   ========================================================= */
.post {
  --post-w: 40rem;
  width: min(var(--post-w), calc(100% - var(--side-full) - var(--side-r)));
  margin: var(--top-space) var(--side-r) 0 max(var(--side-full), calc((100% - var(--post-w)) / 2));
  padding-bottom: clamp(96px, 10vw, 160px);
}
.post a { color: var(--ink); }
.post__crumb { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .72rem; letter-spacing: .14em; color: #666; }
.post__crumb a { color: #666; text-decoration: none; }
.post__crumb a:hover { color: var(--ink); }
.post__head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 15vw, 240px); gap: 40px; align-items: end; margin-top: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--ink); }
.post__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .72rem; letter-spacing: .16em; color: #666; }
.post__title { margin-top: 14px; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.6; letter-spacing: .1em; }
.post__lead { margin-top: 20px; font-size: .86rem; line-height: 2; letter-spacing: .06em; color: #555; }
.post__pic { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: #faf5ec; }
.post__pic img { width: 100%; height: 100%; object-fit: cover; }
/* 本篇重點：文章的大標題清單，點了跳到那一段 */
.post__toc { margin-top: 48px; padding: 28px 32px; border: 1px solid var(--sand); }
.post__toc-title { font-size: .8rem; letter-spacing: .24em; }
.post__toc ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 6px; }
.post__toc li { position: relative; padding-left: 2.2em; counter-increment: toc; font-size: .86rem; line-height: 1.8; letter-spacing: .06em; }
.post__toc li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; font-size: .72rem; line-height: 2.1; color: #888; }
.post__toc a { text-decoration: none; }
.post__toc a:hover { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
/* 內文 */
.post__body { margin-top: 56px; font-size: .95rem; line-height: 2.15; letter-spacing: .06em; }
.post__body > * + * { margin-top: 1.4em; }
.post__body h2 { position: relative; margin-top: 3.4em; padding-top: 1.1em; font-size: 1.3rem; line-height: 1.6; letter-spacing: .12em; scroll-margin-top: 96px; }
.post__body h2::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 1px; background: var(--ink); }   /* 大標題上方的短線 */
.post__body h3 { margin-top: 2.4em; font-size: 1.06rem; line-height: 1.7; letter-spacing: .1em; }
.post__body h4 { margin-top: 2em; font-size: .98rem; letter-spacing: .08em; }
.post__body h2 + *, .post__body h3 + *, .post__body h4 + * { margin-top: .9em; }
.post__body strong { font-weight: 600; }   /* 文章裡的重點句用真正的粗體（首頁仍不用粗體） */
.post__body ul, .post__body ol { padding-left: 1.6em; }
.post__body li + li { margin-top: .35em; }
.post__body ul { list-style: none; }
.post__body ul > li { position: relative; }
.post__body ul > li::before { content: "・"; position: absolute; left: -1.3em; }
.post__body blockquote { margin-left: 0; margin-right: 0; padding: .2em 0 .2em 1.4em; border-left: 1px solid var(--ink); color: #444; }
.post__body hr { height: 0; margin: 3.4em 0 0; border: 0; border-top: 1px solid var(--sand); }
.post__body code { font-family: inherit; padding: 0 .3em; background: #f3f0ea; }
.post__pre { padding: 20px 24px; background: #faf8f4; border: 1px solid var(--sand); font-family: inherit; font-size: .86rem; line-height: 1.9; white-space: pre-wrap; }
.post__table { overflow-x: auto; }
.post__table table { width: 100%; border-collapse: collapse; font-size: .84rem; line-height: 1.8; }
.post__table th, .post__table td { padding: 10px 12px; border-bottom: 1px solid var(--sand); text-align: left; vertical-align: top; }
.post__table th { font-weight: 600; border-bottom-color: var(--ink); white-space: nowrap; }
.post__table td:first-child { white-space: nowrap; }   /* 第一欄（材質、步驟名稱）不換行 */
@media (max-width: 650px) { .post__table table { min-width: 32rem; } }   /* 手機上表格維持可讀寬度，左右滑動 */
.post__body .post__aside-title { font-size: 1.05rem; }   /* 延伸閱讀、預約評估這類收尾段落 */
.post__body .post__aside-title::before { width: 20px; }
.post__group { font-size: .82rem; letter-spacing: .14em; color: #666; }
.post__group + ul { margin-top: .5em; }
.post__sig { margin-top: 3em !important; text-align: right; letter-spacing: .14em; }
/* 文章結尾：初評一句話、上一篇／下一篇、回到列表 */
.post__foot { margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--ink); }
.post__cta { font-size: .9rem; line-height: 2; letter-spacing: .06em; }
.post__cta a { border-bottom: 1px solid currentColor; text-decoration: none; }
.post__pn { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }   /* 上一篇、下一篇上下排，標題才有一整行的寬度 */
.post__pn a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .86rem; line-height: 1.8; letter-spacing: .06em; text-decoration: none; }   /* 標題只排一行，太長時尾端用「…」 */
.post__pn a span { display: block; margin-bottom: 6px; font-size: .72rem; letter-spacing: .2em; color: #666; }
.post__pn a:hover { opacity: .6; }
.post__pn b { font-weight: 400; }
.post__pn-short { display: none; }
@media (max-width: 960px) { .post__pn-full { display: none; } .post__pn-short { display: inline; } }   /* 平板、手機只放冒號前的短標題 */
.post__next { text-align: right; }
.post__back { margin-top: 56px; text-align: center; }
.post__back a { letter-spacing: .2em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.post__back a:hover { opacity: .6; }

/* =========================================================
   06 Instagram（不放標題）
   ========================================================= */
.ig { padding: var(--section-gap) var(--side-r) calc(var(--section-gap) * .35) var(--side-full); }   /* Instagram 和頁尾靠近一點 */
.ig__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ig__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* =========================================================
   07 頁尾：全部置中
   ========================================================= */
.site-footer { background: var(--paper); padding: 120px var(--side-full) 40px; }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; text-align: center; }
.site-footer__logo { width: 140px; }   /* 頁尾 Logo 比主 Logo 小 */
.site-footer__nav { order: 1; }            /* 置中排列：Logo → 選單 → 圖示 */
.site-footer__contact { order: 2; margin-top: 24px; }   /* 選單和圖示之間比其他區塊多留一點，兩組不會黏在一起 */
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 44px; }
.site-footer__nav a { text-decoration: none; letter-spacing: .2em; font-size: .92rem; }
.site-footer__nav a:hover { opacity: .6; }
.site-footer__nav li:first-child a { position: relative; top: 1px; }   /* 「首頁」筆畫少、看起來浮高，往下 1px 做視覺對齊 */
.site-footer__cta-wrap { margin: 64px 0 0; text-align: center; }   /* 免費線上初評：放在版權列上方置中 */
.site-footer__cta { letter-spacing: .25em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.site-footer__cta:hover { opacity: .6; }
.site-footer__copy { margin: 40px 0 0; font-size: .8rem; text-align: center; letter-spacing: .1em; }
/* 專欄文章頁的頁尾：對齊文章卡片置中（左邊讓出直書標題欄 114px＋間距 40px）；其他頁和首頁維持整個畫面置中 */
@media (min-width: 961px) {
  .page-articles .site-footer { padding-left: calc(var(--side-full) + 154px); padding-right: var(--side-r); }
}

/* 聯絡圖示（頁尾、選單共用） */
.contact-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer .contact-icons { justify-content: center; }
.site-footer .contact-icon { width: 112px; }         /* 每個圖示同寬，間距才會一致；要放得下 Instagram 的字寬 */
.contact-icon {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink); text-decoration: none; font: inherit;
  transition: opacity .3s;
}
.contact-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.contact-icon svg .dot { fill: currentColor; stroke: none; }
.contact-icon span { font-size: .72rem; letter-spacing: .12em; }
.contact-icon:hover { opacity: .55; }
.contact-icons--menu { justify-content: flex-start; gap: 8px; margin-top: 14px; }
.contact-icons--menu .contact-icon { width: 100px; }   /* 每格同寬（同頁尾做法），四個圖示的間距才一致；放得下 Instagram 的字寬 */
.contact-icons--menu .contact-icon svg { width: 26px; height: 26px; }
.contact-toast { min-height: 1.6em; margin-top: 12px; font-size: .82rem; letter-spacing: .08em; }

/* =========================================================
   分段淡入：區塊進入畫面後，依 data-step 編號一段一段出現（JS 加 .is-show）
   ========================================================= */
.js .seq-fade { opacity: 0; transform: translateY(16px); transition: opacity 1.1s ease, transform 1.1s var(--ease); }
.js .seq-fade.is-show { opacity: 1; transform: none; }
.js [data-gap] .seq-fade { transition-duration: .7s; }   /* 間隔較短的區塊（精選文章、常見問題），淡入也快一點 */

/* =========================================================
   平板（960px 以下）
   ========================================================= */
@media (max-width: 960px) {
  :root { --logo-h: 240px; --side-full: var(--side); }

  :root { --about-photo-w: 44vw; }

  /* 標題維持直式：標題自己一欄，內容變窄讓出空間 */
  .services__layout { grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; }
  .services__main { width: 100%; }
  .faq__layout { grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; }
  .ar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .featured__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "pic list cat"
      "pic all  cat";
    column-gap: 32px;
  }
  .featured__pic { width: 32vw; }

  .ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   手機（650px 以下）
   ========================================================= */
@media (max-width: 650px) {
  :root { --header-pad: 16px; --logo-h: 150px; --side: 20px; --side-r: 20px; --side-full: 20px; --top-space: 220px; }
  html { font-size: 112.5%; }   /* 手機 1rem = 18px */

  .site-header__right { gap: 18px; }
  .menu-btn { width: 36px; height: 14px; }
  .menu-btn::before { top: 3px; }
  .menu-btn::after { bottom: 3px; }
  .menu-btn[aria-expanded="true"]::before { top: 2px; }
  .menu-btn[aria-expanded="true"]::after { bottom: 2px; }
  .site-menu__inner { grid-template-columns: 1fr; gap: 36px; }
  .site-menu__list { gap: 32px; }

  /* 關於我們：照片在上，直書文字在下 */
  .about { margin: var(--top-space) 20px 0; }
  .about__inner { flex-direction: column-reverse; align-items: center; gap: 48px; }
  .about__words { margin-bottom: 0; }
  .about__photo { width: 100%; aspect-ratio: 3 / 4; }
  .about__title { top: 20px; right: 20px; padding: 18px 12px; font-size: 1.5rem; }
  .about__text { font-size: .92rem; line-height: 2.3; }
  .about__more { line-height: 40px; font-size: .8rem; }

  .services { padding: 240px 20px 0; }
  .services__layout { column-gap: 16px; }
  .svc__pic { height: 50cqw; }   /* 手機約 2:1 */
  .services__list { gap: 14px; }
  .svc__title { right: 20px; }
  .services__list { --roll-w: 10px; }
  .services__lead { margin-top: 28px; font-size: .9rem; }

  /* 精選文章：照片在上，目錄改成橫排清單 */
  .featured { padding: 190px 20px 0; }
  /* 精選文章：標題直式留在右邊一欄，左邊照片在上、目錄在下 */
  .featured__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "pic cat" "list cat" "all cat";
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    row-gap: 28px;
  }
  .featured__pic { width: 100%; aspect-ratio: 3 / 4; }
  .featured__index { flex-direction: column; gap: 18px; }
  .featured__index a { flex-direction: row; align-items: center; gap: 1em; }   /* 和電腦版一樣：平常灰色，手指碰到的那篇變黑 */
  .featured__index .t { writing-mode: horizontal-tb; letter-spacing: .12em; }
  .featured__all { justify-self: start; margin-top: 8px; }

  /* 常見問題：標題直式留在左邊一欄 */
  .faq { padding: 180px 20px 0; }
  .faq__layout { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
  .qa__q { padding: 22px 36px 22px 0; letter-spacing: .08em; }
  .qa__q::before, .qa__q::after { right: 4px; width: 14px; }
  .qa__a { padding: 0 0 26px; }
  .qa__a p { font-size: .86rem; line-height: 2; }
  .faq__all { margin-top: 28px; }
  .faq.faq--page { padding-top: 140px; }   /* 手機頁首是固定橫條，標題接在下面 */
  .faq__intro { font-size: .86rem; line-height: 2; }
  .faq__toc ul { margin-top: 28px; gap: 12px 22px; }
  .faq__toc a { font-size: .8rem; letter-spacing: .1em; }
  .faq__group { margin-top: 72px; }
  .faq__group-title { margin-bottom: 16px; font-size: 1.25rem; letter-spacing: .18em; }
  .faq__group-title .en { font-size: .62rem; letter-spacing: .24em; }
  .qa__a ol { font-size: .86rem; line-height: 2; }
  .faq__cta { margin-top: 88px; }
  .faq__cta p { font-size: .86rem; }
  .ct__sec { margin-top: 72px; }
  .ct__sub { margin-top: 28px; font-size: .98rem; }
  .ct__list, .ct__flow { font-size: .86rem; line-height: 2; }
  .ct__actions { gap: 16px 24px; }
  .ct__template { padding: 18px 16px; }
  .ct__template pre { font-size: .8rem; }
  .ct__info > div { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }
  .ct__map { aspect-ratio: 4 / 5; }
  .ar__tools { margin-top: 32px; gap: 24px; }
  .ar__cats { gap: 10px 20px; }
  .ar__cats button { font-size: .8rem; letter-spacing: .1em; }
  .ar__search { width: 100%; }
  .ar__search input { width: 100%; }
  .ar__count { margin-top: 40px; }
  .ar__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 32px; }
  .ar__pager { margin-top: 56px; }

  /* 文章內頁：圖片放在標題下面，上一篇／下一篇改成上下排 */
  .post { width: auto; margin: 140px 20px 0; padding-bottom: 96px; }
  .post__head { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; padding-bottom: 32px; }
  .post__pic { width: 62%; order: 2; }
  .post__toc { margin-top: 36px; padding: 22px 20px; }
  .post__body { margin-top: 40px; font-size: .92rem; line-height: 2.05; }
  .post__body h2 { font-size: 1.14rem; }

  .ig { padding: 240px 20px 80px; }
  .ig__grid { gap: 4px; }

  .site-footer { padding: 72px 20px 28px; }
  .site-footer__inner { gap: 40px; }
  .site-footer__logo { width: 130px; }
  .site-footer__nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .site-footer .contact-icon { width: 76px; }
  .site-footer .contact-icon span { letter-spacing: .03em; }
  .contact-icons--menu .contact-icon { width: 74px; }   /* 手機選單只有一欄（約 327px 寬），四格要排在同一行 */
  .contact-icons--menu .contact-icon span { letter-spacing: .03em; }   /* 手機四格塞滿寬度，字距收小才不會 Facebook 和 Instagram 黏在一起 */
}

/* =========================================================
   減少動態效果
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .site-logo, .site-logo img { transition: none !important; }
  .intro__logo { transition: none; opacity: 1; }
  .intro, .site-menu, .menu-btn::before, .menu-btn::after { transition: none; }
  .js [data-reveal] .svc__pic img { clip-path: none; }
  .js [data-reveal] .svc__title, .js .seq-fade { opacity: 1; transform: none; transition: none; }
  .featured__pic img { transition: none !important; }
  .qa::details-content, .qa__q::after { transition: none !important; }
  .js .is-split, .js .is-split.is-in { animation: none; background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; }
  .js .v-title .is-split::after, .js .about__more.is-split::after { transform: none; transition: none; }
  .js .is-split .ch { opacity: 1; transform: none; transition: none; }
}