/* KBroad v12 —— 開場（ink-story 引擎）＋ 服務 ＋ 公司資訊。
   本檔在 ink-opening/ink-story.css 之後載入，負責覆寫它的全域樣式。

   引擎的層次約定（來自 ink-story.css，不要改那支檔案）：
     #gl            fixed  z-index 0    全屏 WebGL 畫布
     body::before   fixed  z-index 2    紙紋
     body::after    fixed  z-index 2    暈影
     #scroll-wrap   relative z-index 3  開場的捲動段落
   所以開場之後的內容必須自成 z-index 3，且要有不透明底色。 */

@font-face {
  font-family: "Syne";
  src: url("../fonts/syne-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  /* 與引擎的 clearColor 對齊：差一階就會在畫布邊界看到接縫。 */
  --paper: #f4f0e6;
  --paper-deep: #e7e3d8;
  --ink: #15140e;
  --ink-soft: #5c5a4e;
  --hair: rgb(21 20 14 / 0.14);
  --gold: #9e844c;
  --gold-on-dark: #dbc89c;
  --zhu: #b23a26;

  --shell: min(1240px, calc(100% - 2 * var(--gutter)));
  --gutter: clamp(22px, 5vw, 96px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --section: clamp(28px, 3.6vw, 52px);
  --item: clamp(21px, 2.1vw, 30px);
  --body: clamp(15px, 1.05vw, 17px);
  --meta: 13px;

  --serif: "Songti TC", "Noto Serif TC", "Source Han Serif TC", "Hiragino Mincho ProN", serif;
  --sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --latin: "Syne", "Optima", "Palatino", sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

/* ink-story.css 把 body 設成襯線；站台正文走黑體，標題才用襯線。 */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, dt, figure, ol { margin: 0; }
ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--zhu);
  outline-offset: 4px;
  border-radius: 2px;
}

::selection { background: #e3d3ae; color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

.eyebrow {
  font-family: var(--latin);
  font-size: var(--meta);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--light { color: var(--gold-on-dark); }

/* ---------- masthead ---------- */

/* 開場有二十幾個螢幕高，header 必須固定，不然一捲就不見。
   z-index 要壓過引擎的 #scroll-wrap（3）與紙紋（2）。 */
.masthead {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 2.4vw, 30px) var(--gutter);
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }

.wordmark {
  font-family: var(--latin);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wordmark__b { color: var(--ink-soft); }

.masthead__mail {
  font-family: var(--latin);
  font-size: var(--meta);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.masthead__mail:hover {
  color: var(--ink);
  border-bottom-color: var(--hair);
}

/* ---------- 開場 ---------- */

/* 掛載點本身不設樣式：canvas 與捲動段落都由引擎生成，
   這裡加任何 position / z-index 都會破壞它的層次約定。 */

/* 沒有 JavaScript 時的靜態替代。 */
.opening-fallback {
  min-height: 70svh;
  display: grid;
  place-content: center;
  gap: 28px;
  padding: 22vh var(--gutter) 10vh;
  text-align: center;
}
.opening-fallback p {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 40px);
  letter-spacing: 0.04em;
}

/* ---------- 開場之後 ---------- */

/* 不透明紙色底＋自成堆疊脈絡：把固定在背後的畫布與紙紋一起蓋掉。 */
.after {
  position: relative;
  z-index: 3;
  background: var(--paper);
}

/* ---------- 服務 ---------- */

.services {
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(96px, 15vh, 190px);
}

.services__head { margin-bottom: clamp(48px, 8vh, 96px); }
.services__head .eyebrow { margin-bottom: 18px; }
.services__head h2 {
  font-family: var(--serif);
  font-size: var(--section);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.service {
  display: grid;
  grid-template-columns: minmax(72px, 8vw) 1fr;
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(30px, 4.4vh, 52px);
  border-top: 1px solid var(--hair);
}
.service:last-child { border-bottom: 1px solid var(--hair); }

.service__index {
  font-family: var(--latin);
  font-size: var(--meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
  padding-top: 0.55em;
}

.service__body { max-width: 52ch; }

.service h3 {
  font-family: var(--serif);
  font-size: var(--item);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.03em;
}
.service p {
  margin-top: clamp(10px, 1.4vh, 16px);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  /* 中文可以斷在任何字之間，不平衡就會留下「重／建」這種孤字。 */
  text-wrap: pretty;
}

/* 資訊安全與 AI 導入工程：朱紅髮絲線標記重點項目。 */
.service--accent .service__index { color: var(--zhu); }
.service--accent h3 {
  display: inline-block;
  background-image: linear-gradient(var(--zhu), var(--zhu));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.9s var(--ease) 0.15s;
}
.service--accent.is-in h3 { background-size: 100% 1px; }

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 公司資訊與聯絡：深色章回 ---------- */

.contact {
  position: relative;
  background: var(--ink);
  color: #efece1;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.97 0 0 0 0 0.88 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.contact__inner {
  position: relative;
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(96px, 16vh, 200px);
}
.contact__inner .eyebrow { margin-bottom: 18px; }

.contact h2 {
  font-family: var(--serif);
  font-size: var(--section);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.contact__mail {
  margin-top: clamp(40px, 6vh, 72px);
  padding-bottom: clamp(20px, 3vh, 30px);
  border-bottom: 1px solid rgb(219 200 156 / 0.34);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 28px;
}

.contact__mail > a {
  font-family: var(--latin);
  font-size: clamp(28px, 4.6vw, 62px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--gold-on-dark);
  text-decoration: none;
  transition: opacity 0.35s var(--ease);
}
.contact__mail > a:hover { opacity: 0.72; }

.copy {
  appearance: none;
  background: none;
  border: 1px solid rgb(219 200 156 / 0.4);
  border-radius: 999px;
  color: #efece1;
  font: inherit;
  font-size: var(--meta);
  letter-spacing: 0.14em;
  min-height: 44px;
  padding: 0 22px;
  cursor: pointer;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.copy:hover {
  background: rgb(219 200 156 / 0.12);
  border-color: rgb(219 200 156 / 0.7);
}
.copy[data-copied="true"] { color: var(--gold-on-dark); }

.company {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.company dt {
  font-family: var(--latin);
  font-size: var(--meta);
  letter-spacing: 0.18em;
  color: rgb(239 236 225 / 0.52);
}
.company dd {
  margin-top: 10px;
  font-size: clamp(16px, 1.3vw, 19px);
  letter-spacing: 0.04em;
}

/* ---------- colophon ---------- */

.colophon {
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(26px, 4vh, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: var(--meta);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.colophon a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease);
}
.colophon a:hover { border-bottom-color: var(--hair); }

/* ---------- 行動版 ---------- */

@media (max-width: 860px) {
  .service {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .service__index { padding-top: 0; }

  .contact__mail {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact__mail > a { word-break: break-all; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .service--accent h3 {
    background-size: 100% 1px;
    transition: none;
  }
}