@charset "utf-8";
/* =========================================================================
   版型「弧線」（arc）— 2026 新版外觀
   設計規格見 docs/DESIGN.md〈弧線版型〉。

   這個檔**只加不減**：全部規則都以 :root[data-theme="arc"] 開頭，
   蓋在 css/site.css 上面。切回 data-theme="grid" 時整份等於不存在，
   初版的方格外觀原封不動。

   骨架（HTML、格線、無障礙）在 site.css，這裡只處理「長相」：
   顏色、圓角、弧線分隔、卡片化、首頁 §03 深墨帶與 §05 窯青帶。
   ========================================================================= */

/* ---------- 1. 設計變數 ------------------------------------------------ */
:root[data-theme="arc"] {
  --paper:      #F6F4EE;   /* 象牙：主底 */
  --sand:       #EDE8DC;   /* 砂：§01 服務帶 */
  --panel:      #FCFBF7;   /* 紙：卡片 */
  --ink:        #1A1A17;
  --ink-2:      #56564E;
  --muted:      #8C8A7C;
  --rule:       #E2DAC6;
  --rule-soft:  #EFE9DC;
  --rule-2:     #DED6C2;   /* 膠囊標籤的描邊 */
  --accent:     #1F5F5B;   /* 窯青：全站唯一的彩色 */
  --accent-ink: #1F5F5B;   /* 窯青本身對比就夠，當文字色不用再壓深 */

  --deep:       #15201E;   /* §03 案例帶 */
  --deep-panel: #1C2A28;   /* 深墨帶上的卡片 */
  --on-deep:    #F6F4EE;
  --on-deep-2:  #BDBAAF;
  --on-deep-3:  #E4E1D8;
  --mint:       #8FC2B9;   /* 深底上的青：標號 */
  --mint-link:  #A9D3CA;   /* 深底上的青：連結 */

  --on-accent:   #F6F4EE;  /* 窯青底上的主要文字 */
  --on-accent-2: #DCE7E4;  /* 窯青底上的內文 */
  --accent-pale: #BEDCD6;  /* 窯青底上的標號 */

  --focus-glow:  rgba(31, 95, 91, .30);
  --ink-wash:    rgba(31, 95, 91, .07);
  --accent-wash: rgba(31, 95, 91, .12);
  --grid:        transparent;      /* 方格底紋是初版的東西，這裡關掉 */

  /* 半徑尺度：16 小元件、24 圖片、28 小卡、36 主卡片、999 按鈕與標籤。
     硬直角一律不用。 */
  --r-sm:   16px;
  --r-img:  24px;
  --r-md:   28px;
  --r-card: 36px;
  --r-pill: 999px;

  /* 弧線分隔的高度；窄螢幕自動縮，不然手機上一道 80px 的弧太搶戲 */
  --arc-h: clamp(34px, 5.6vw, 80px);

  /* 四個遮罩形狀。弧線是用「下一段的底色」畫在這一段的下緣，
     形狀交給 mask，顏色交給 background，這樣同一個形狀可以套任何顏色。 */
  --arc-convex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V40C400-8 1040-8 1440 40v40Z' fill='%23000'/%3E%3C/svg%3E");
  --arc-concave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V40C400 88 1040 88 1440 40v40Z' fill='%23000'/%3E%3C/svg%3E");
  /* 頁尾上緣的封口：形狀是上面兩者的補集，用來讓頁尾的上緣也是一道弧 */
  --arc-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v40C1040-8 400-8 0 40Z' fill='%23000'/%3E%3C/svg%3E");
  /* 小弧記號：標號前面那一撇 */
  --arc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 11C1 5.5 8.2 1 17 1s16 4.5 16 10' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --arc-glyph-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 16'%3E%3Cpath d='M1 15C1 7.3 10.8 1 23 1s22 6.3 22 14' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- 2. 基礎 ----------------------------------------------------- */
:root[data-theme="arc"] body { background: var(--paper); }

:root[data-theme="arc"] :focus-visible {
  outline-color: var(--accent);
  border-radius: 6px;
}

:root[data-theme="arc"] ::selection { background: var(--accent); color: var(--paper); }

:root[data-theme="arc"] img { background: var(--rule-soft); border-radius: var(--r-sm); }

/* ---------- 3. 通用元件 ------------------------------------------------- */
:root[data-theme="arc"] .tag {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--accent);
  font-weight: 400;
}

/* 小節標號前面的那一撇弧線。用 mask 上色，所以在深墨帶／窯青帶上會自己跟著變。 */
:root[data-theme="arc"] .sec__label > .tag::before,
:root[data-theme="arc"] .case-head > .tag::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 12px;
  margin-right: 12px;
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: var(--arc-glyph) no-repeat center / contain;
  mask: var(--arc-glyph) no-repeat center / contain;
}

/* 初版標題左邊那條黃色短橫，在這一套改由標號的弧線負責 */
:root[data-theme="arc"] .mark::before { display: none; }

:root[data-theme="arc"] code,
:root[data-theme="arc"] kbd,
:root[data-theme="arc"] samp {
  border-radius: 6px;
  border-color: var(--rule);
}

:root[data-theme="arc"] .lnk {
  color: var(--accent);
  border-bottom-color: rgba(31, 95, 91, .35);
}
:root[data-theme="arc"] .lnk:hover { border-bottom-color: var(--accent); }

:root[data-theme="arc"] .btn {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: none;
  border-radius: var(--r-pill);
  padding: 16px 30px;
}
:root[data-theme="arc"] .btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
:root[data-theme="arc"] .btn--ghost { border-color: #C9C2AE; }
:root[data-theme="arc"] .btn--ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

:root[data-theme="arc"] .skip { border-radius: 0 0 var(--r-sm) 0; }

:root[data-theme="arc"] .theme-switch {
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: none;
  padding: 8px 15px;
  background: transparent;
}
:root[data-theme="arc"] .theme-switch:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- 4. 頁首／導覽 ----------------------------------------------- */
:root[data-theme="arc"] .site-head {
  border-bottom: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

:root[data-theme="arc"] .site-head__in { min-height: 88px; }

:root[data-theme="arc"] .brand__glyph { width: 44px; height: 44px; }
:root[data-theme="arc"] .brand { gap: 14px; }
:root[data-theme="arc"] .brand__name { font-size: 18px; letter-spacing: .04em; }
:root[data-theme="arc"] .brand__en {
  font-size: 9px;
  letter-spacing: .22em;
  margin-top: 3px;
}

:root[data-theme="arc"] .nav { gap: clamp(14px, 2.2vw, 30px); }
:root[data-theme="arc"] .nav a {
  font-size: 14.5px;
  letter-spacing: .04em;
  border-bottom: 0;
  padding: 12px 0;
  transition: color .18s;
}
:root[data-theme="arc"] .nav a:hover { color: var(--accent); }
:root[data-theme="arc"] .nav a[aria-current="page"] { color: var(--accent); font-weight: 500; }

/* 導覽列最右邊的行動呼籲（只有弧線版型有，HTML 上標了 data-theme-only="arc"） */
:root[data-theme="arc"] .nav__cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: 14px;
  letter-spacing: .06em;
}
:root[data-theme="arc"] .nav__cta a:hover { background: var(--accent); color: var(--on-accent); }
:root[data-theme="arc"] .nav__cta svg { flex: none; }

/* ---------- 5. 弧線分隔 -------------------------------------------------
   色帶順序（只有首頁有這些 id）：
     hero 象牙 ─上凸→ §01 砂 ─下凹→ §02 象牙 ─上凸→ §03 深墨
          ─下凹→ §04 象牙 ─上凸→ §05 窯青 ─→ 頁尾 窯青
   每一段的下緣畫一道「下一段底色」的弧，所以顏色寫在 --arc-fill。
   其他頁沒有這些 id，只有最後一個小節會長出通往頁尾的那道弧。
   ----------------------------------------------------------------------- */
:root[data-theme="arc"] .hero,
:root[data-theme="arc"] #services,
:root[data-theme="arc"] #industries,
:root[data-theme="arc"] #work,
:root[data-theme="arc"] #process {
  position: relative;
  padding-bottom: calc(var(--gap-sec) + var(--arc-h));
}

:root[data-theme="arc"] .hero::after,
:root[data-theme="arc"] #services::after,
:root[data-theme="arc"] #industries::after,
:root[data-theme="arc"] #work::after,
:root[data-theme="arc"] #process::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: calc(var(--arc-h) + 1px);
  background: var(--arc-fill, var(--paper));
  -webkit-mask: var(--arc-shape, var(--arc-convex)) no-repeat center / 100% 100%;
  mask: var(--arc-shape, var(--arc-convex)) no-repeat center / 100% 100%;
  pointer-events: none;
}

:root[data-theme="arc"] .hero        { --arc-fill: var(--sand);   --arc-shape: var(--arc-convex); }
:root[data-theme="arc"] #services    { --arc-fill: var(--paper);  --arc-shape: var(--arc-concave); }
:root[data-theme="arc"] #industries  { --arc-fill: var(--deep);   --arc-shape: var(--arc-convex); }
:root[data-theme="arc"] #work        { --arc-fill: var(--paper);  --arc-shape: var(--arc-concave); }
:root[data-theme="arc"] #process     { --arc-fill: var(--accent); --arc-shape: var(--arc-convex); }

/* ---------- 6. 首頁主視覺 ----------------------------------------------- */
:root[data-theme="arc"] .hero {
  border-bottom: 0;
  background: var(--paper);
  overflow: clip;
}

:root[data-theme="arc"] .hero__in {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(28px, 4.2vw, 60px);
  padding-block: clamp(40px, 5.4vw, 78px) clamp(20px, 3vw, 40px);
  position: relative;
  z-index: 1;
}

/* 背景同心圓，最外圈慢慢轉（reduced-motion 時停住） */
:root[data-theme="arc"] .hero__rings {
  position: absolute;
  right: -240px;
  top: -190px;
  width: 880px;
  height: 880px;
  pointer-events: none;
  z-index: 0;
}

:root[data-theme="arc"] .hero h1 {
  font-size: clamp(30px, 3.9vw, 54px);
  line-height: 1.46;
  letter-spacing: .01em;
  margin: 30px 0 0;
  max-width: 15em;
  text-wrap: pretty;
}
/* 初版的黃色螢光筆換成窯青的字色 */
:root[data-theme="arc"] .hero h1 em { background: none; color: var(--accent); }

:root[data-theme="arc"] .hero__lead {
  margin-top: 30px;
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 2.05;
  max-width: 33em;
}

:root[data-theme="arc"] .hero__cta { margin-top: clamp(28px, 3.4vw, 44px); gap: 14px; }

:root[data-theme="arc"] .hero__fig {
  background: var(--panel);
  border: 1px solid #E4DDCB;
  border-radius: 40px;
  padding: 30px 32px;
  box-shadow: 0 30px 60px -44px rgba(26, 26, 23, .35);
}

/* 弧線版的流程圖，標號在圖的上面（初版是在下面），所以把線改掉 */
:root[data-theme="arc"] .hero__fig--arc figcaption {
  border-top: 0;
  margin: 0 0 14px;
  padding: 0;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--muted);
}
:root[data-theme="arc"] .hero__fig--arc figcaption span:first-child { color: var(--accent); }

/* ---------- 7. 小節骨架 -------------------------------------------------
   初版是「左窄欄標註 + 右寬欄內文」，這一套改成上面一排通欄的標題列：
   左邊標號與大標，右邊一句說明靠右對齊。
   ----------------------------------------------------------------------- */
:root[data-theme="arc"] .sec { border-bottom: 0; }

:root[data-theme="arc"] .sec__in { grid-template-columns: minmax(0, 1fr); }

:root[data-theme="arc"] .sec__label {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  grid-template-areas:
    "tag  ."
    "ttl  desc";
  align-items: end;
  gap: 16px 40px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
:root[data-theme="arc"] .sec__label > .tag { grid-area: tag; margin: 0; }
:root[data-theme="arc"] .sec__label > h2   { grid-area: ttl; }
:root[data-theme="arc"] .sec__label > p:not(.tag) {
  grid-area: desc;
  text-align: right;
  max-width: 28em;
  margin: 0;
  font-size: 15.5px;
  line-height: 2;
  color: var(--ink-2);
}

:root[data-theme="arc"] .sec__label h2 {
  font-size: clamp(27px, 3.1vw, 42px);
  font-weight: 900;
  letter-spacing: .02em;
  margin-top: 0;
}

:root[data-theme="arc"] .lead-lg {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.9;
  max-width: 28em;
}

/* ---------- 8. §01 服務：兩欄圓角卡 ------------------------------------- */
:root[data-theme="arc"] #services { background: var(--sand); }

:root[data-theme="arc"] .svc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 設計稿是 2×2，窄螢幕才收成一欄 */
  gap: 28px;
  border-top: 0;
}

:root[data-theme="arc"] .svc > li {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--panel);
  padding: 38px 40px 34px;
}

:root[data-theme="arc"] .svc__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  border: 1.4px solid var(--accent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 400;
  padding: 0;
}

:root[data-theme="arc"] .svc h3 {
  font-size: clamp(21px, 1.9vw, 26px);
  letter-spacing: .02em;
  margin: 22px 0 0;
}

:root[data-theme="arc"] .svc p {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.95;
  max-width: none;
}

:root[data-theme="arc"] .svc__does { gap: 8px; margin-top: 26px; }
:root[data-theme="arc"] .svc__does li {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  border-radius: var(--r-pill);
  border-color: var(--rule-2);
  background: transparent;
  padding: 7px 15px;
}

/* ---------- 9. §02 適用產業：三欄、無框 --------------------------------- */
:root[data-theme="arc"] #industries { background: var(--paper); }

:root[data-theme="arc"] .ind {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border: 0;
  gap: clamp(34px, 4vw, 56px) 40px;
}

:root[data-theme="arc"] .ind > li {
  border: 0;
  background: transparent;
  padding: 30px 0 0;
  position: relative;
}
:root[data-theme="arc"] .ind > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 16px;
  opacity: .45;
  background-color: var(--accent);
  -webkit-mask: var(--arc-glyph-lg) no-repeat center / contain;
  mask: var(--arc-glyph-lg) no-repeat center / contain;
}

:root[data-theme="arc"] .ind h3 {
  display: block;
  font-size: 22px;
  letter-spacing: .02em;
  margin-bottom: 12px;
}
:root[data-theme="arc"] .ind h3 .num {
  display: block;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: 12px;
}
:root[data-theme="arc"] .ind p { line-height: 1.95; }

/* ---------- 10. 案例卡 --------------------------------------------------- */
:root[data-theme="arc"] .cards {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}
/* 首頁 §03 是固定的 2×2：三張案例卡 ＋ 第四格出口 */
:root[data-theme="arc"] #work .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

:root[data-theme="arc"] .card {
  border-top: 0;
  padding: 32px 34px 28px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

:root[data-theme="arc"] .card__media {
  border: 0;
  border-radius: var(--r-img);
  aspect-ratio: 16 / 9;
}
:root[data-theme="arc"] .card__media img { border-radius: var(--r-img); }
:root[data-theme="arc"] .card__media.is-empty::after { border-top: 0; font-family: var(--sans); }

/* 分類膠囊：初版是圖左上角的方形色塊，這一套改成疊在圖片左下角的膠囊 */
:root[data-theme="arc"] .card__kind {
  top: auto;
  left: 14px;
  bottom: 14px;
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .1em;
  background: rgba(31, 95, 91, .92);
  color: var(--paper);
}

:root[data-theme="arc"] .card h3 {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: .02em;
  margin: 20px 0 0;
}
:root[data-theme="arc"] .card a:hover h3 { color: var(--accent); }

:root[data-theme="arc"] .card__sum {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.95;
}

:root[data-theme="arc"] .spec { border-top: 0; margin-top: 22px; }
:root[data-theme="arc"] .spec > div {
  border-bottom: 0;
  grid-template-columns: 4.6em minmax(0, 1fr);
  gap: 18px;
  padding: 5px 0;
}
:root[data-theme="arc"] .spec dt {
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--accent);
}
:root[data-theme="arc"] .spec dd { font-size: 13.5px; line-height: 1.8; }

/* 效益區塊（cases.json 有 impact 欄位時才會出現） */
:root[data-theme="arc"] .card__impact {
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: var(--r-img);
  border: 1px solid var(--accent-wash);
  border-left-width: 1px;
  background: var(--ink-wash);
}
:root[data-theme="arc"] .card__impact .tag { letter-spacing: .2em; }
:root[data-theme="arc"] .card__impact b {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
}

:root[data-theme="arc"] .card__more {
  font-family: var(--sans);
  font-size: 14.5px;
  letter-spacing: .05em;
  text-transform: none;
  color: var(--accent);
  margin-top: 26px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(31, 95, 91, .4);
}

/* ---------- 11. §03 精選案例：深墨帶 ------------------------------------ */
:root[data-theme="arc"] #work {
  background: var(--deep);
  overflow: clip;
  /* 左下角的同心圓，用重複的放射漸層畫，不另外放 SVG */
  background-image:
    repeating-radial-gradient(circle at -6% 112%,
      transparent 0 104px, rgba(246, 244, 238, .035) 104px 105px);
}

:root[data-theme="arc"] #work .tag { color: var(--mint); }
:root[data-theme="arc"] #work .sec__label h2 { color: var(--on-deep); }
:root[data-theme="arc"] #work .sec__label > p:not(.tag) { color: var(--on-deep-2); }

:root[data-theme="arc"] #work .card {
  background: var(--deep-panel);
  border-color: rgba(246, 244, 238, .13);
}
:root[data-theme="arc"] #work .card h3 { color: var(--on-deep); }
:root[data-theme="arc"] #work .card a:hover h3 { color: var(--mint-link); }
:root[data-theme="arc"] #work .card__sum { color: var(--on-deep-2); }
:root[data-theme="arc"] #work .card__kind { background: rgba(143, 194, 185, .18); color: var(--mint-link); }
:root[data-theme="arc"] #work .spec dt { color: var(--mint); }
:root[data-theme="arc"] #work .spec dd { color: var(--on-deep-3); }
:root[data-theme="arc"] #work .card__impact {
  background: rgba(143, 194, 185, .1);
  border-color: rgba(143, 194, 185, .22);
}
:root[data-theme="arc"] #work .card__impact .tag { color: var(--mint); }
:root[data-theme="arc"] #work .card__impact b { color: var(--on-deep); }
:root[data-theme="arc"] #work .card__impact span { color: var(--on-deep-3); }
:root[data-theme="arc"] #work .card__impact p:last-child { color: var(--on-deep-2); }
:root[data-theme="arc"] #work .card__more {
  color: var(--mint-link);
  border-bottom-color: rgba(169, 211, 202, .4);
}
:root[data-theme="arc"] #work .btn--ghost {
  color: var(--on-deep);
  border-color: rgba(246, 244, 238, .3);
}
:root[data-theme="arc"] #work .btn--ghost:hover {
  background: var(--on-deep);
  color: var(--deep);
  border-color: var(--on-deep);
}
:root[data-theme="arc"] #work .empty { color: var(--on-deep-2); border-color: rgba(246, 244, 238, .2); }

/* 第四格「還有其他做過的東西」：只有弧線版型會出現（HTML 上標了 data-theme-only） */
:root[data-theme="arc"] .card--more {
  background: transparent;
  border-color: rgba(246, 244, 238, .16);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}
:root[data-theme="arc"] .card--more::before {
  content: "";
  width: 72px;
  height: 26px;
  opacity: .5;
  background-color: var(--mint);
  -webkit-mask: var(--arc-glyph-lg) no-repeat center / contain;
  mask: var(--arc-glyph-lg) no-repeat center / contain;
}
:root[data-theme="arc"] .card--more h3 {
  font-size: 26px;
  color: var(--on-deep);
  margin: 0;
}
:root[data-theme="arc"] .card--more p { color: var(--on-deep-2); font-size: 14.5px; line-height: 1.95; }

/* ---------- 12. §04 合作流程：正弦軌道 ----------------------------------
   六個步驟沿一條 sin 曲線排、節點上下交錯。軌道是 index.html 裡那段
   data-theme-only="arc" 的 <svg>，節點位置在這裡用百分比對上去
   （設計稿 1280×560，--ny 就是節點上緣佔 560 的比例）。
   窄螢幕（<1024px）軌道會塌，改成垂直軸線，見最下面的響應式段落。
   ----------------------------------------------------------------------- */
:root[data-theme="arc"] #process { background: var(--paper); }
:root[data-theme="arc"] #process .sec__body { position: relative; }

:root[data-theme="arc"] .rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 560px;
  pointer-events: none;
}
:root[data-theme="arc"] .rail svg { width: 100%; height: 100%; }

@media (min-width: 1024px) {
  :root[data-theme="arc"] #process .flowsteps {
    position: relative;
    height: 560px;
    border-top: 0;
  }

  :root[data-theme="arc"] #process .flowsteps > li {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 16.6667%;
    padding: 0 8px;
    border-bottom: 0;
  }

  :root[data-theme="arc"] #process .flowsteps > li::before {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -26px;
    width: 52px;
    height: 52px;
    border-radius: var(--r-pill);
    background: var(--paper);
    border: 1.4px solid var(--accent);
    color: var(--accent);
    font-size: 14px;
  }

  /* 單數步驟：文字在軌道上方，節點掛在文字下面 */
  :root[data-theme="arc"] #process .flowsteps > li:nth-child(odd) {
    bottom: calc(100% - var(--ny) + 20px);
  }
  :root[data-theme="arc"] #process .flowsteps > li:nth-child(odd)::before {
    top: calc(100% + 20px);
  }
  /* 雙數步驟：節點在上、文字在下 */
  :root[data-theme="arc"] #process .flowsteps > li:nth-child(even) {
    top: calc(var(--ny) + 72px);
  }
  :root[data-theme="arc"] #process .flowsteps > li:nth-child(even)::before {
    bottom: calc(100% + 20px);
  }

  :root[data-theme="arc"] #process .flowsteps > li:nth-child(1) { left: 0;         --ny: 37.32%; }
  :root[data-theme="arc"] #process .flowsteps > li:nth-child(2) { left: 16.6667%;  --ny: 32.86%; }
  :root[data-theme="arc"] #process .flowsteps > li:nth-child(3) { left: 33.3333%;  --ny: 37.32%; }
  :root[data-theme="arc"] #process .flowsteps > li:nth-child(4) { left: 50%;       --ny: 48.04%; }
  :root[data-theme="arc"] #process .flowsteps > li:nth-child(5) { left: 66.6667%;  --ny: 52.50%; }
  :root[data-theme="arc"] #process .flowsteps > li:nth-child(6) { left: 83.3333%;  --ny: 48.04%; }

  /* 最後一步是終點，填實 */
  :root[data-theme="arc"] #process .flowsteps > li:last-child::before {
    background: var(--accent);
    color: var(--paper);
  }
}

:root[data-theme="arc"] .flowsteps h3 { font-size: 19px; letter-spacing: .02em; }
:root[data-theme="arc"] .flowsteps p { font-size: 13px; line-height: 1.85; max-width: none; }

:root[data-theme="arc"] .flowsteps__when {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: .1em;
  white-space: normal;
}

/* ---------- 13. §05 聯絡：窯青帶 ---------------------------------------- */
:root[data-theme="arc"] #contact {
  background: var(--accent);
  overflow: clip;
  background-image:
    repeating-radial-gradient(circle at 106% 124%,
      transparent 0 104px, rgba(246, 244, 238, .075) 104px 105px);
}

:root[data-theme="arc"] #contact .tag { color: var(--accent-pale); }
:root[data-theme="arc"] #contact .sec__label h2 { color: var(--on-accent); }
:root[data-theme="arc"] #contact .sec__label > p:not(.tag) { color: var(--on-accent-2); }
:root[data-theme="arc"] #contact .sec__body > p,
:root[data-theme="arc"] #contact .lead-lg { color: var(--on-accent-2); }

/* ---------- 14. 聯絡表單 ------------------------------------------------ */
:root[data-theme="arc"] .form {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  max-width: 46em;
}
:root[data-theme="arc"] #contact .form {
  border-color: rgba(246, 244, 238, .3);
  box-shadow: 0 30px 60px -44px rgba(21, 32, 30, .5);
}

:root[data-theme="arc"] .form__row { border-bottom-color: var(--rule-soft); padding: 20px 24px; }
:root[data-theme="arc"] .form__row--send { background: var(--ink-wash); }

:root[data-theme="arc"] .form__label { font-family: var(--sans); letter-spacing: 0; }
:root[data-theme="arc"] .form__req { color: var(--accent); letter-spacing: .1em; }

:root[data-theme="arc"] .form__in {
  border-radius: var(--r-sm);
  border-color: var(--rule);
  padding: 11px 14px;
}
:root[data-theme="arc"] .form__in:focus,
:root[data-theme="arc"] .form__in:focus-visible {
  outline-color: var(--accent);
  border-color: var(--accent);
}
:root[data-theme="arc"] .form__ta { border-radius: var(--r-sm); }

:root[data-theme="arc"] .form__legend { font-family: var(--sans); letter-spacing: .04em; }
:root[data-theme="arc"] .form__radio { border-radius: var(--r-pill); border-color: var(--rule); }
:root[data-theme="arc"] .form__radio:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
}
:root[data-theme="arc"] .form__radio input { accent-color: var(--accent); }

:root[data-theme="arc"] .btn--send {
  font-family: var(--sans);
  letter-spacing: .2em;
  border-radius: var(--r-pill);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  padding: 15px 40px;
}
:root[data-theme="arc"] .btn--send:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

:root[data-theme="arc"] .form__err {
  border-left-color: var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--ink-wash);
  padding: 8px 12px;
}
:root[data-theme="arc"] .form__in[aria-invalid="true"] { border-color: var(--accent); }
:root[data-theme="arc"] .form__status {
  border-radius: var(--r-sm);
  border-left-color: var(--accent);
  background: var(--panel);
}
:root[data-theme="arc"] .form__count.is-over { color: var(--accent); }

/* ---------- 15. 作品集：篩選 -------------------------------------------- */
:root[data-theme="arc"] .filters { border: 0; padding: 0 0 6px; }
:root[data-theme="arc"] .chip {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  border-radius: var(--r-pill);
  border-color: var(--rule);
  background: transparent;
  padding: 8px 16px;
}
:root[data-theme="arc"] .chip:hover { border-color: var(--accent); color: var(--accent); }
:root[data-theme="arc"] .chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
:root[data-theme="arc"] .empty { border-radius: var(--r-md); border-color: var(--rule); }

/* ---------- 16. 案例內頁／關於頁 ---------------------------------------- */
:root[data-theme="arc"] .crumb a { border-bottom-color: rgba(31, 95, 91, .3); }

:root[data-theme="arc"] .case-head h1 {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.42;
  letter-spacing: .01em;
}
:root[data-theme="arc"] .case-head__sub { line-height: 2; }

:root[data-theme="arc"] .case-cover {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--panel);
  padding: 14px;
}
:root[data-theme="arc"] .case-cover img { border-radius: var(--r-md); }
:root[data-theme="arc"] .case-cover figcaption { padding: 12px 6px 2px; }

:root[data-theme="arc"] .specbar {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--panel);
}
:root[data-theme="arc"] .specbar > div {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 24px;
}
:root[data-theme="arc"] .specbar dt { color: var(--accent); letter-spacing: .16em; }

:root[data-theme="arc"] .prose h3 { font-size: 21px; border-top-color: var(--rule); }

:root[data-theme="arc"] .split {
  border: 0;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
:root[data-theme="arc"] .split > div {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 30px 32px;
}
:root[data-theme="arc"] .split h3 { font-size: 19px; }
:root[data-theme="arc"] .split li { border-bottom-color: var(--rule-soft); }
:root[data-theme="arc"] .split li::before { background: var(--accent); top: 16px; width: 10px; }

:root[data-theme="arc"] .people {
  border: 0;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
:root[data-theme="arc"] .people > li {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 30px 32px 32px;
}
:root[data-theme="arc"] .people__slot { border-radius: var(--r-pill); border-color: var(--rule); }
:root[data-theme="arc"] .people__role { font-family: var(--sans); color: var(--accent); }

/* 對照表：弧線版型收在一張圓角卡片裡（overflow:hidden 會把方角切掉，
   所以圓角給外層的 .cmp-wrap，表格本身只留框線） */
:root[data-theme="arc"] .cmp-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--panel);
}
:root[data-theme="arc"] .cmp { border-top: 0; border-left: 0; min-width: 540px; }
:root[data-theme="arc"] .cmp--wide { min-width: 780px; }
:root[data-theme="arc"] .cmp th,
:root[data-theme="arc"] .cmp td { padding: 16px 20px; border-color: var(--rule); }
:root[data-theme="arc"] .cmp tr:last-child th,
:root[data-theme="arc"] .cmp tr:last-child td { border-bottom: 0; }
:root[data-theme="arc"] .cmp th:last-child,
:root[data-theme="arc"] .cmp td:last-child { border-right: 0; }
:root[data-theme="arc"] .cmp thead th { color: var(--accent); letter-spacing: .16em; }
:root[data-theme="arc"] .cmp tfoot th,
:root[data-theme="arc"] .cmp tfoot td { background: var(--accent-wash); }

:root[data-theme="arc"] .gallery figure {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 12px;
}
:root[data-theme="arc"] .gallery img { border-radius: var(--r-sm); }
:root[data-theme="arc"] .gallery figcaption { border-top-color: var(--rule-soft); }
:root[data-theme="arc"] .gallery figcaption b { color: var(--accent); }

:root[data-theme="arc"] .notice {
  border: 1px solid var(--accent-wash);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--ink-wash);
}
:root[data-theme="arc"] .todo {
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  padding: 2px 10px;
}

:root[data-theme="arc"] .contact { border-top-color: var(--rule); }
:root[data-theme="arc"] .contact__big { border-bottom-color: var(--accent); color: var(--accent); }
:root[data-theme="arc"] .contact__big:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* ---------- 17. 404 ------------------------------------------------------ */
:root[data-theme="arc"] .nf .num { color: var(--accent); font-weight: 400; }

/* ---------- 18. 頁尾：窯青帶 -------------------------------------------- */
:root[data-theme="arc"] .site-foot {
  background: var(--accent);
  color: var(--on-accent-2);
  border-top: 0;
  margin-top: 0;
  padding-block: 44px 52px;
}
/* 首頁最後一段本來就是窯青（§05 聯絡），頁尾直接接上去不用弧；
   其他頁最後一段是象牙底，就讓頁尾自己長出一道上凸的弧接住。
   :has() 讀不到的舊瀏覽器只會少一道弧，版面不會壞。 */
:root[data-theme="arc"] body:not(:has(#contact)) .site-foot {
  position: relative;
  padding-top: calc(44px + var(--arc-h));
}
:root[data-theme="arc"] body:not(:has(#contact)) .site-foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: calc(var(--arc-h) + 1px);
  background: var(--paper);
  -webkit-mask: var(--arc-cap) no-repeat center / 100% 100%;
  mask: var(--arc-cap) no-repeat center / 100% 100%;
  pointer-events: none;
}

:root[data-theme="arc"] .site-foot strong { color: var(--on-accent); }
:root[data-theme="arc"] .site-foot .tag { color: var(--accent-pale); }
:root[data-theme="arc"] .site-foot a {
  color: var(--on-accent-2);
  border-bottom-color: rgba(246, 244, 238, .35);
}
:root[data-theme="arc"] .site-foot a:hover { color: var(--on-accent); border-bottom-color: var(--on-accent); }

/* ---------- 19. 響應式 -------------------------------------------------- */
@media (max-width: 1023px) {
  /* 正弦軌道在窄螢幕會塌，改成一條垂直軸線串起六個節點 */
  :root[data-theme="arc"] .rail { display: none; }

  :root[data-theme="arc"] #process .flowsteps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-top: 0;
    padding-left: 0;
  }
  :root[data-theme="arc"] #process .flowsteps::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 26px;
    bottom: 26px;
    width: 1.5px;
    background: rgba(31, 95, 91, .34);
  }
  :root[data-theme="arc"] #process .flowsteps > li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 0 76px;
    border-bottom: 0;
  }
  :root[data-theme="arc"] #process .flowsteps > li::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--r-pill);
    background: var(--paper);
    border: 1.4px solid var(--accent);
    color: var(--accent);
    font-size: 14px;
    margin: 0;
  }
  :root[data-theme="arc"] #process .flowsteps > li:last-child::before {
    background: var(--accent);
    color: var(--paper);
  }
  :root[data-theme="arc"] .flowsteps p { font-size: 14.5px; }
}

@media (max-width: 960px) {
  :root[data-theme="arc"] .sec__label {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tag" "ttl" "desc";
    gap: 14px;
  }
  :root[data-theme="arc"] .sec__label > p:not(.tag) { text-align: left; max-width: 34em; }
  :root[data-theme="arc"] .hero__rings { display: none; }
  :root[data-theme="arc"] .hero__in { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  :root[data-theme="arc"] .svc,
  :root[data-theme="arc"] #work .cards { grid-template-columns: minmax(0, 1fr); }
}

/* 對照表在窄螢幕由 site.css 改成「一列一張小卡」，
   這裡只把弧線版型多加的左右內距與圓角跟著調回來（不然會被上面的 padding 蓋掉） */
@media (max-width: 760px) {
  :root[data-theme="arc"] .cmp-wrap { border-radius: var(--r-md); }
  /* 這兩條要跟著解掉，不然上面的 min-width 會讓整頁長出橫向捲軸 */
  :root[data-theme="arc"] .cmp,
  :root[data-theme="arc"] .cmp--wide { min-width: 0; border-top: 0; }
  :root[data-theme="arc"] .cmp th,
  :root[data-theme="arc"] .cmp td { padding: 5px 22px; }
  :root[data-theme="arc"] .cmp caption { padding: 16px 22px 4px; }
  :root[data-theme="arc"] .cmp tbody th,
  :root[data-theme="arc"] .cmp tfoot th { padding-top: 18px; padding-bottom: 4px; }
  :root[data-theme="arc"] .cmp tr { padding-bottom: 16px; }
  :root[data-theme="arc"] .cmp tfoot tr { border-bottom: 0; }
}

@media (max-width: 640px) {
  :root[data-theme="arc"] .svc > li { padding: 28px 24px 26px; border-radius: var(--r-md); }
  :root[data-theme="arc"] .card { padding: 22px 22px 24px; border-radius: var(--r-md); }
  :root[data-theme="arc"] .hero__fig { padding: 20px 18px; border-radius: var(--r-md); }
  :root[data-theme="arc"] .form__row { padding: 16px 18px; }
  :root[data-theme="arc"] .form { border-radius: var(--r-md); }
  :root[data-theme="arc"] .split > div,
  :root[data-theme="arc"] .people > li { padding: 24px 22px; border-radius: var(--r-md); }
  :root[data-theme="arc"] .nav__cta { display: none; }   /* 手機上導覽已經兩行，CTA 收起來 */
}

/* ---------- 20. 弧線版型自己的動畫 -------------------------------------
   只有 hero 的流程圖與 §04 的軌道會動，其餘全靜態。
   site.css 的 prefers-reduced-motion 區塊會一起關掉。
   ----------------------------------------------------------------------- */
@keyframes dcFlowDash { to { stroke-dashoffset: -96; } }
@keyframes dcRailDash { to { stroke-dashoffset: -240; } }
@keyframes dcPulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.62); opacity: 0; }
  100% { transform: scale(1.62); opacity: 0; }
}
@keyframes dcBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@keyframes dcDrift { to { transform: rotate(360deg); } }

/* SVG 元素要指定 transform-box，不然縮放會以整張圖的原點為準 */
:root[data-theme="arc"] .dc-pulse,
:root[data-theme="arc"] .dc-breathe,
:root[data-theme="arc"] .dc-drift {
  transform-box: fill-box;
  transform-origin: center;
}
:root[data-theme="arc"] .dc-flow   { animation: dcFlowDash 2.8s linear infinite; }
:root[data-theme="arc"] .dc-rail   { animation: dcRailDash 9s linear infinite; }
:root[data-theme="arc"] .dc-pulse  { animation: dcPulse 3.6s ease-out infinite; }
:root[data-theme="arc"] .dc-breathe{ animation: dcBreathe 4.4s ease-in-out infinite; }
:root[data-theme="arc"] .dc-drift  { animation: dcDrift 90s linear infinite; }

/* 第四格裡的按鈕：site.css 的 .card a { display:block } 會把它拉成整條，拉回來 */
:root[data-theme="arc"] .card--more .btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  border-radius: var(--r-pill);
}