/*
 * CriTo 角色網站樣式
 * 來源：proto/CriTo/assets/crito.js 開頭以字串注入 <style> 的 CSS（原為壓縮成一行，這裡以 esbuild 展開排版，規則內容未改）。
 * 唯一改寫：@font-face 與 .contact-intro 背景圖的網址，原型由 new URL(..., document.currentScript) 算出，這裡改寫成 /crito/ 下的絕對路徑。
 *
 * 只由 layouts/crito.vue 以 useHead 掛 <link> 載入（不經 Vite），不放 nuxt.config.ts 的全域 css。
 */

/*
 * 主站全域 CSS 還原（contracts/acceptance/crito.md 裁定第 6 項）
 * nuxt.config.ts 全域載入的 main.css（Meyer reset、body 字型/行高/touch-action）與 critical-base.css（Tailwind preflight）
 * 也會套到 CriTo 頁面；原型沒有這兩套，吃的是瀏覽器預設。這裡用 all: revert 把它們還原成瀏覽器預設，
 * 再接下方原型 CSS。
 *
 * 不能靠載入順序：production 會把本檔內嵌在 <head> 最前面、主站 CSS 在後（dev 則相反），
 * 同權重時主站會贏。故一律用權重壓過主站的元素選擇器（主站多為 (0,0,1)）：
 *   - <html> 本身只能用 :root (0,1,0)；原型沒有任何 class 規則打在 <html> 上，不受影響
 *   - <body> 與其下元素用 html body 前綴 (0,0,2)，仍低於原型的 class 規則 (0,1,0)
 * 原型 CSS 內權重只有 (0,0,1) 以下的幾條基礎規則（* / html / body / button / a / img / h1~p / footer），
 * 相應改寫成 :root 或加上 html body 前綴，才壓得過這裡的還原；規則內容未改，改寫處都標了「權重改寫」。
 * all 不含 CSS 變數，原型的 --paper 等變數不受影響。
 * 排除 SVG 內部元素：path 的 d、fill、stroke 等屬性在瀏覽器視為作者層級樣式，revert 會把它們一併清掉（path 失去形狀）。
 */
:root,
html body,
html body :where(*:not(svg *)),
html body :where(*:not(svg *))::before,
html body :where(*:not(svg *))::after {
  all: revert;
}
/*
 * 同理，HTML 屬性轉成的樣式也會被 revert 清掉，逐一補回（2026-09-23 逐元素比對 computed style 發現）：
 *   - lang → -webkit-locale：影響中日文字形與斷行
 *   - draggable="false" → -webkit-user-drag: none：角色帶與聯絡按鈕圖片不可拖曳
 */
:root[lang="zh-Hant"] {
  -webkit-locale: "zh-Hant";
}
:root[lang="en"] {
  -webkit-locale: "en";
}
:root[lang="ja"] {
  -webkit-locale: "ja";
}
html body [draggable="false"] {
  -webkit-user-drag: none;
}
/* 主站 main.css 的 html[lang="en"] :where(h1~h6) { hyphens: none } 權重 (0,1,1) 高於上方還原，英文頁補回瀏覽器預設 */
:root[lang="en"] body :where(h1, h2, h3, h4, h5, h6) {
  -webkit-hyphens: manual;
  hyphens: manual;
}
/* 雙指縮放維持主站的禁止設定（裁定第 2 項），上面 revert 會把主站 main.css 的 touch-action 一起還原掉，這裡補回同值 */
:root,
html body,
html body * {
  touch-action: pan-x pan-y;
}

/*
 * 開場遮罩：看過開場（或偏好減少動態）時，components/crito/CritoBrandIntro.vue 的 head script 會在繪製前
 * 替 <html> 加上 crito-intro-skip，先把 SSR 輸出的遮罩藏起來，hydration 後元件再把它移除（裁定第 3 項）。
 * 原型沒有 SSR，不需要這條。
 */
html.crito-intro-skip .brand-intro {
  display: none;
}

/* ===== 以下為原型 CSS ===== */
@font-face {
  font-family: Inter;
  src: url(/crito/assets/crito.woff2) format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  font-family:
    Avenir Next,
    Avenir,
    Noto Sans TC,
    PingFang TC,
    Hiragino Sans,
    sans-serif;
  color: #262629;
  background: #f7f6f2;
  font-synthesis: none;
  --paper:#f7f6f2;
  --ink:#262629;
  --muted:#77757a;
  --line:#d9d6d0;
  --soft:#eceae4;
  --serif:Georgia,"Noto Serif TC","Songti TC",serif;
}
/* 權重改寫 */ :root,
html body,
html body * {
  box-sizing: border-box;
}
/* 權重改寫 */ :root {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
/* 權重改寫 */ html body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body.dialog-open {
  overflow: hidden;
}
/* 權重改寫 */ html body button,
html body input {
  font: inherit;
}
/* 權重改寫 */ html body button,
html body a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* 權重改寫 */ html body a {
  text-decoration: none;
}
/* 權重改寫 */ html body button {
  border: 0;
  background: none;
  cursor: pointer;
}
/* 權重改寫 */ html body img {
  display: block;
  max-width: 100%;
}
/* 權重改寫 */ html body h1,
html body h2,
html body h3,
html body p {
  margin: 0;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}
::selection {
  background: #d8d5cf;
}
.skip-link {
  position: fixed;
  top: -70px;
  left: 12px;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  padding: 12px 16px;
}
.skip-link:focus {
  top: 12px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: .2em;
  font-weight: 600;
}
.icon-button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
}
.glyph {
  display: inline-block;
  line-height: 1;
  font-family: Arial, sans-serif;
  font-weight: 300;
}
body.brand-intro-open {
  overflow: hidden;
}
.brand-intro {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: #e8e6e3;
  opacity: 1;
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1);
}
.brand-intro.is-exiting {
  opacity: 0;
  pointer-events: none;
}
.brand-intro canvas {
  position: relative;
  z-index: 2;
  display: block;
}
.brand-intro-aurora {
  position: absolute;
  z-index: 1;
  top: -30%;
  right: 0;
  bottom: -30%;
  left: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}
.brand-intro-aurora.is-visible {
  opacity: 1;
}
.brand-intro-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(56px);
  transform: translateZ(0);
}
.brand-intro-aurora i:nth-child(1) {
  width: 62vw;
  height: 62vw;
  left: -13vw;
  top: 8%;
  background: radial-gradient(ellipse, rgba(244, 114, 182, .25), rgba(244, 114, 182, .07) 48%, transparent 72%);
}
.brand-intro-aurora i:nth-child(2) {
  width: 58vw;
  height: 58vw;
  right: -8vw;
  top: 2%;
  background: radial-gradient(ellipse, rgba(167, 139, 250, .22), rgba(139, 92, 246, .06) 50%, transparent 72%);
}
.brand-intro-aurora i:nth-child(3) {
  width: 55vw;
  height: 55vw;
  left: 22%;
  bottom: -16%;
  background: radial-gradient(ellipse, rgba(253, 186, 116, .23), rgba(251, 146, 60, .06) 48%, transparent 72%);
}
.brand-intro-aurora i:nth-child(4) {
  width: 48vw;
  height: 48vw;
  right: 18%;
  bottom: 8%;
  background: radial-gradient(ellipse, rgba(125, 211, 252, .21), rgba(56, 189, 248, .05) 50%, transparent 72%);
}
.brand-intro-aurora i:nth-child(5) {
  width: 44vw;
  height: 44vw;
  left: 34%;
  top: 12%;
  background: radial-gradient(ellipse, rgba(253, 230, 138, .16), rgba(250, 204, 21, .04) 50%, transparent 72%);
}
@media (max-width:768px) {
  .brand-intro {
    transition-duration: .32s;
  }
  .brand-intro-aurora {
    transition-duration: .5s;
  }
  .brand-intro-aurora i {
    filter: blur(34px);
  }
  .brand-intro-aurora i:nth-child(1),
  .brand-intro-aurora i:nth-child(2) {
    width: 100vw;
    height: 100vw;
  }
  .brand-intro-aurora i:nth-child(3) {
    width: 92vw;
    height: 92vw;
  }
  .brand-intro-aurora i:nth-child(4),
  .brand-intro-aurora i:nth-child(5) {
    width: 78vw;
    height: 78vw;
  }
}
.site-header {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 4.2%;
  background: #f7f6f2f2;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(38, 38, 41, .08);
}
.brand-lockup {
  display: inline-block;
  line-height: 1;
}
.brand-lockup strong {
  font-family:
    Inter,
    Avenir Next,
    Arial,
    sans-serif;
  font-size: 22px;
  letter-spacing: .07em;
  font-weight: 700;
}
.brand-lockup i {
  font-family:
    Georgia,
    Times New Roman,
    serif;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 0;
}
.brand-lockup small {
  display: block;
  margin-top: 8px;
  font-family:
    Inter,
    Avenir Next,
    Arial,
    sans-serif;
  font-size: 7px;
  letter-spacing: .23em;
  font-weight: 600;
}
.site-header nav {
  display: flex;
  gap: 36px;
}
.site-header nav a {
  font-size: 10px;
  letter-spacing: .14em;
  padding: 16px 0;
  position: relative;
}
.site-header nav a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 9px;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width .25s;
}
.site-header nav a:hover:after {
  width: 100%;
}
.site-header nav span {
  display: none;
}
.header-note {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 9px;
  letter-spacing: .13em;
}
.menu-button {
  display: none;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 59%) minmax(360px, 41%);
  min-height: 735px;
}
.hero-visual {
  position: relative;
  min-height: 735px;
  overflow: hidden;
  background: #e9e8e3;
}
.hero-visual > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .55s, transform 1s;
}
.hero-visual > img.active {
  opacity: 1;
  transform: scale(1);
}
.hero-visual > img:first-child {
  object-fit: contain;
  padding: 6%;
  background: #f1efea;
}
.visual-side {
  position: absolute;
  top: 31px;
  left: 28px;
  z-index: 2;
  writing-mode: vertical-rl;
  color: #262629ab;
  font-size: 8px;
  letter-spacing: .18em;
}
.visual-caption {
  position: absolute;
  left: 30px;
  bottom: 28px;
  z-index: 2;
  color: #fff;
  background: #1f1f22c2;
  padding: 13px 18px 14px;
  min-width: 275px;
}
.visual-caption > span {
  font-size: 8px;
  letter-spacing: .2em;
}
.visual-caption p {
  font-family: var(--serif);
  font-size: 27px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.visual-caption p span {
  font-size: 10px;
  letter-spacing: .08em;
}
.hero-controls {
  position: absolute;
  right: 24px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  background: #1f1f22c2;
}
.hero-controls button {
  min-width: 44px;
  min-height: 44px;
  color: #fff;
  font-size: 10px;
  border-bottom: 1px solid transparent;
}
.hero-controls button[aria-pressed=true] {
  background: #ffffff29;
  border-color: #fff;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px 12% 28px 11%;
}
.hero-copy > .eyebrow {
  margin-bottom: 25px;
  font-size: 8px;
  white-space: nowrap;
}
.hero h1 {
  font-size: clamp(58px, 5vw, 86px);
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.035em;
}
.hero h1 span {
  display: block;
}
.hero h1 i {
  display: block;
  font-family: var(--serif);
  font-size: clamp(76px, 7vw, 116px);
  line-height: 1.02;
  font-weight: 400;
  margin-left: 34px;
}
.hero-name {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .12em;
  margin: 24px 0 28px;
}
.hero-name span {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .16em;
}
.hero-intro h2 {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.75;
  letter-spacing: .08em;
  font-weight: 400;
  margin-bottom: 15px;
}
.hero-intro p {
  font-size: 12px;
  line-height: 2;
  color: #55545a;
}
.round-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 30px;
  padding-top: 21px;
  border-top: 1px solid #cbc8c1;
}
.round-link > span:first-child {
  font-size: 10px;
  letter-spacing: .11em;
}
.round-link small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .07em;
}
.round-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid #aaa6a0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .25s, color .25s;
}
.round-link:hover .round-icon {
  background: var(--ink);
  color: #fff;
}
.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 31px;
  color: var(--muted);
  font-size: 7px;
  letter-spacing: .11em;
}
.hero-foot span:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-wrap {
  width: min(100%, 1500px);
  margin: auto;
  padding: 112px 7.5%;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 45px;
  margin-bottom: 44px;
}
.section-heading h2 {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(46px, 5vw, 68px);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -.035em;
}
.section-heading h2 span {
  display: inline-block;
  margin-left: 24px;
  vertical-align: middle;
  font-size: 12px;
  letter-spacing: .12em;
}
.section-intro {
  padding-bottom: 7px;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 2.05;
  letter-spacing: .07em;
  color: #6c696f;
}
.archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
  border-bottom: 1px solid var(--line);
}
.filters {
  display: flex;
  gap: 30px;
}
.filters button {
  position: relative;
  padding: 12px 2px 18px;
  color: var(--muted);
  font-size: 12px;
}
.filters button small {
  margin-left: 8px;
  font-size: 8px;
}
.filters button[aria-pressed=true] {
  color: var(--ink);
}
.filters button[aria-pressed=true]:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
}
.archive-count {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .14em;
  white-space: nowrap;
}
.character-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 68px 34px;
}
.character-card {
  min-width: 0;
}
.character-image {
  position: relative;
  aspect-ratio: 1/1.08;
  overflow: hidden;
  outline: 1px solid transparent;
  outline-offset: 5px;
  background: color-mix(in srgb, var(--tint) 26%, #eeece6);
  transition: outline-color .24s ease;
}
.character-card:hover .character-image,
.character-card:focus-visible .character-image {
  outline-color: #a6a29a;
}
.character-image:after {
  content: "";
  position: absolute;
  inset: auto 8% 7% 8%;
  height: 12%;
  background: radial-gradient(ellipse, rgba(35, 34, 37, .13), transparent 70%);
  filter: blur(8px);
}
.character-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7%;
  transition: transform .5s;
}
.character-card:hover img {
  transform: translateY(-5px) scale(1.025);
}
.character-index {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 20px;
  font-size: 8px;
  letter-spacing: .15em;
}
.character-trait {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 16px;
  min-width: 126px;
  max-width: calc(100% - 82px);
  padding: 10px 14px 11px;
  color: #fff;
  background: #1f1f22a3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.character-trait strong {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: .08em;
}
.character-trait small {
  display: block;
  margin-top: 6px;
  font-size: 7px;
  line-height: 1;
  letter-spacing: .15em;
  white-space: nowrap;
}
.character-open {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  background: #f7f6f2e6;
  transition: background .25s, color .25s;
}
.character-card:hover .character-open {
  background: var(--ink);
  color: #fff;
}
.character-meta {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 11px;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .12em;
}
.character-card h3 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: .02em;
}
.character-card > p {
  max-width: 36em;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: .035em;
}
.archive-end {
  margin-top: 74px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .08em;
}
.archive-end span {
  display: block;
  margin-top: 9px;
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0;
}
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 1500px);
  margin: auto;
  padding: 94px 9%;
  gap: 10%;
  align-items: center;
  background: #eae8e2;
}
.story-portrait {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #dddad3;
}
.story-portrait img {
  width: 87%;
  position: relative;
  z-index: 2;
}
.orbit {
  position: absolute;
  border: 1px solid rgba(38, 38, 41, .12);
  border-radius: 50%;
}
.orbit-one {
  width: 78%;
  height: 78%;
}
.orbit-two {
  width: 118%;
  height: 118%;
}
.portrait-label {
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: 18px;
  font-size: 7px;
  letter-spacing: .2em;
}
.story-copy h2 {
  margin: 21px 0;
  font-family: var(--serif);
  font-size: 31px;
  line-height: 1.75;
  letter-spacing: .06em;
  font-weight: 400;
}
.story-copy > p:not(.eyebrow) {
  margin-top: 18px;
  color: #58565b;
  font-size: 12px;
  line-height: 2.15;
}
.story-facts {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  margin: 28px 0 14px;
  padding-top: 23px;
  border-top: 1px solid #cecbc4;
}
.story-facts dt {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 7px;
  letter-spacing: .13em;
}
.story-facts dd {
  margin: 0;
  font-size: 10px;
}
.signature {
  display: block;
  text-align: right;
  color: #6f6b70;
  font-family: var(--serif);
  font-size: 31px;
  font-style: italic;
}
.life {
  padding-bottom: 95px;
}
.scene-grid {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 52px;
  align-items: start;
}
.scene-card:nth-child(2) {
  padding-top: 104px;
}
.scene-image {
  position: relative;
  overflow: hidden;
  background: var(--soft);
}
.scene-image img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform .7s;
}
.scene-card:nth-child(2) .scene-image img {
  aspect-ratio: 4/5.4;
}
.scene-card:hover img {
  transform: scale(1.025);
}
.scene-image > span {
  position: absolute;
  top: 19px;
  left: 20px;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
  font-size: 8px;
  letter-spacing: .15em;
}
.scene-meta {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 12px;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .11em;
}
.scene-card h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .04em;
}
.notes {
  padding-top: 75px;
}
.notes .section-heading {
  margin-bottom: 35px;
}
.note-row {
  display: grid;
  grid-template-columns: 42px 170px 1fr;
  align-items: center;
  gap: 24px;
  min-height: 95px;
  border-top: 1px solid var(--line);
}
.note-row:last-child {
  border-bottom: 1px solid var(--line);
}
.note-row > span {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
}
.note-row strong {
  font-size: 12px;
  letter-spacing: .07em;
}
.note-row p {
  color: #66636a;
  font-size: 11px;
  line-height: 1.9;
}
/* 權重改寫 */ html body footer {
  padding: 67px 7.5% 25px;
  background: #dedcd6;
}
.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding-bottom: 50px;
}
.footer-main > p {
  font-family: var(--serif);
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.footer-main > p i {
  font-weight: 400;
}
.top-link {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 8px;
  letter-spacing: .12em;
}
.footer-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(38, 38, 41, .5) 18%, rgba(38, 38, 41, .5) 82%, transparent);
}
.family-wordmark {
  padding: 22px 0 27px;
  text-align: center;
  font-family: var(--serif);
  font-size: 31px;
  letter-spacing: .08em;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(38, 38, 41, .15);
  color: var(--muted);
  font-size: 7px;
  letter-spacing: .11em;
}
.menu-dialog {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 80px 10%;
  background: #e7e5df;
  color: var(--ink);
}
.menu-dialog::backdrop {
  background: #e7e5df;
}
.menu-close {
  position: absolute;
  right: 22px;
  top: 20px;
}
.menu-dialog nav {
  display: flex;
  flex-direction: column;
  margin-top: 45px;
}
.menu-dialog nav a {
  padding: 24px 0;
  border-bottom: 1px solid #c8c5be;
  font-size: 24px;
  letter-spacing: .05em;
}
.menu-dialog nav span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
}
.menu-sign {
  margin-top: 50px;
  font-family: var(--serif);
  font-size: 25px;
  font-style: italic;
}
.character-dialog {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #ece9e2;
  color: #28272a;
}
.character-dialog::backdrop {
  background: #1f1f22c7;
}
.dialog-shell {
  min-height: 100%;
  color: var(--detail-ink);
  background:
    radial-gradient(circle at 79% 14%, color-mix(in srgb, var(--detail-accent) 34%, transparent), transparent 35%),
    radial-gradient(circle at 10% 82%, color-mix(in srgb, var(--detail-panel) 42%, transparent), transparent 40%),
    var(--detail-bg);
  transition: background-color .35s, color .35s;
}
.dialog-top {
  height: 82px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 34px;
  border-bottom: 1px solid color-mix(in srgb, var(--detail-ink) 14%, transparent);
}
.dialog-top .brand-lockup img {
  filter: var(--detail-logo-filter,none);
  transition: filter .35s ease;
}
.dialog-content {
  min-height: calc(100dvh - 82px);
  display: grid;
  grid-template-columns: 55px minmax(380px, 1.2fr) minmax(330px, .85fr) 55px;
  align-items: center;
  gap: 34px;
  padding: 36px 4%;
}
.dialog-prev,
.dialog-next {
  color: var(--detail-ink);
}
.dialog-art {
  position: relative;
  min-height: min(70vh, 720px);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--detail-accent) 36%, transparent), transparent 58%), var(--detail-panel);
  border: 1px solid color-mix(in srgb, var(--detail-ink) 10%, transparent);
  overflow: hidden;
  transition: background-color .35s;
}
.dialog-art img {
  width: min(90%, 680px);
}
.dialog-trait {
  z-index: 3;
}
.dialog-copy {
  max-width: 520px;
}
.dialog-copy h2 {
  margin: 20px 0 18px;
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 400;
  line-height: 1;
}
.dialog-copy h2 span {
  display: block;
  margin-top: 14px;
  color: var(--detail-muted);
  font-size: 15px;
  letter-spacing: .1em;
}
.dialog-copy > p:not(.eyebrow) {
  max-width: 460px;
  color: var(--detail-muted);
  font-size: 13px;
  line-height: 2;
}
.swatches {
  display: flex;
  gap: 10px;
  margin: 25px 0;
}
.swatches span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--detail-ink) 24%, transparent);
}
.dialog-copy dl {
  margin: 0 0 28px;
}
.dialog-copy dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--detail-ink) 14%, transparent);
}
.dialog-copy dt {
  color: var(--detail-muted);
  font-size: 8px;
  letter-spacing: .12em;
}
.dialog-copy dd {
  margin: 0;
  font-size: 10px;
  letter-spacing: .05em;
}
.dialog-copy > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--detail-ink);
  font-size: 9px;
  letter-spacing: .12em;
}
.hero-visual > img:first-child {
  object-fit: cover;
  padding: 0;
  background: #e9e8e3;
}
.hero-visual > img.family {
  object-fit: contain;
  padding: 6%;
  background: #f1efea;
}
.hero-controls {
  top: 24px;
  bottom: auto;
  align-items: center;
  color: #fff;
}
.hero-controls button {
  display: grid;
  place-items: center;
  border: 0;
}
.hero-controls > span {
  min-width: 62px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .08em;
}
.hero-controls > span i {
  font-style: normal;
  color: #ffffff94;
}
.hero-controls button:hover {
  background: #ffffff26;
}
.hero-autoplay {
  position: relative;
  isolation: isolate;
}
.hero-autoplay-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}
.hero-progress {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hero-progress path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.hero-progress-track {
  stroke: #ffffff47;
  stroke-width: 1;
}
.hero-progress-value {
  stroke: #fff;
  stroke-width: 1.6;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: hero-countdown 6s linear forwards;
}
.hero-autoplay.is-paused .hero-progress-value {
  animation-play-state: paused;
}
@keyframes hero-countdown {
  to {
    stroke-dashoffset: 0;
  }
}
.hero-name {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  line-height: 1;
}
.hero-name strong {
  font-size: 22px;
  letter-spacing: .07em;
  font-weight: 650;
}
.hero-name strong i {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0;
}
.hero-name span {
  line-height: 1.4;
}
.hero-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-main > .eyebrow {
  margin-bottom: 25px;
  font-size: 8px;
  white-space: nowrap;
}
.hero-main .hero-intro h2 {
  margin-bottom: 0;
}
.hero h1 {
  margin: 10px 0 34px;
  font-size: clamp(75px, 6.5vw, 112px);
}
.hero h1 i {
  font-family: inherit;
  font-size: 1.12em;
  line-height: .92;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -.035em;
}
.hero-bottom {
  margin-top: 0;
}
@media (max-width:760px) {
  .hero-main > .eyebrow {
    margin-bottom: 20px;
  }
  .hero h1 {
    margin: 6px 0 26px;
  }
}
@media (max-width:1100px) {
  .site-header {
    height: 82px;
    padding: 0 5%;
  }
  .site-header nav {
    gap: 25px;
  }
  .header-note {
    display: none;
  }
  .hero {
    grid-template-columns: 55% 45%;
    min-height: 680px;
  }
  .hero-visual {
    min-height: 680px;
  }
  .hero-copy {
    padding-left: 9%;
    padding-right: 9%;
  }
  .hero h1 {
    font-size: 56px;
  }
  .hero h1 i {
    font-size: 82px;
  }
  .hero-intro h2 {
    font-size: 22px;
  }
  .hero-intro p {
    font-size: 11px;
  }
  .character-grid {
    gap: 55px 25px;
  }
  .story {
    padding: 72px 6%;
    gap: 7%;
  }
  .dialog-content {
    grid-template-columns: 48px 1fr 1fr 48px;
    gap: 20px;
  }
}
@media (max-width:760px) {
  /* 權重改寫 */ :root {
    scroll-padding-top: 76px;
  }
  .site-header {
    height: 76px;
    padding: 0 22px;
  }
  .site-header nav {
    display: none;
  }
  .site-header .brand-lockup strong {
    font-size: 18px;
  }
  .site-header .brand-lockup i {
    font-size: 21px;
  }
  .site-header .brand-lockup small {
    font-size: 6px;
  }
  .menu-button {
    display: grid;
  }
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .hero-visual {
    min-height: 520px;
    height: 72svh;
    max-height: 660px;
  }
  .hero-visual > img:first-child {
    padding: 3%;
  }
  .visual-side {
    left: 15px;
    top: 18px;
    font-size: 7px;
  }
  .visual-caption {
    left: 20px;
    bottom: 22px;
    min-width: 0;
    padding: 11px 14px;
  }
  .visual-caption p {
    font-size: 24px;
  }
  .visual-caption p span {
    display: none;
  }
  .hero-controls {
    top: 17px;
    right: 15px;
    bottom: auto;
  }
  .hero-copy {
    padding: 44px 8% 28px;
  }
  .hero-copy > .eyebrow {
    margin-bottom: 20px;
  }
  .hero h1 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 58px;
  }
  .hero h1 i {
    margin-left: 0;
    font-size: 70px;
  }
  .hero-name {
    margin: 18px 0 24px;
  }
  .hero-intro h2 {
    font-size: 25px;
  }
  .hero-intro p {
    font-size: 12px;
  }
  .section-wrap {
    padding: 72px 6%;
  }
  .section-heading {
    display: block;
    margin-bottom: 28px;
  }
  .section-heading h2 {
    font-size: 44px;
  }
  .section-heading h2 span {
    margin-left: 15px;
    font-size: 10px;
  }
  .section-intro {
    margin-top: 22px;
    font-size: 11px;
  }
  .archive-toolbar {
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 30px;
  }
  .filters {
    gap: 17px;
    overflow-x: auto;
  }
  .filters button {
    min-height: 50px;
    font-size: 11px;
    white-space: nowrap;
  }
  .filters button small {
    display: block;
    margin: 4px 0 0;
    font-size: 7px;
  }
  .archive-count {
    font-size: 7px;
  }
  .character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 14px;
  }
  .character-image img {
    padding: 3%;
  }
  .character-index {
    top: 12px;
    left: 12px;
    font-size: 7px;
  }
  .character-trait {
    left: 10px;
    bottom: 10px;
    min-width: 0;
    max-width: calc(100% - 58px);
    padding: 8px 10px 9px;
  }
  .character-trait strong {
    font-size: 19px;
  }
  .character-trait small {
    margin-top: 5px;
    font-size: 6px;
    letter-spacing: .1em;
  }
  .character-open {
    width: 38px;
    height: 38px;
    right: 10px;
    bottom: 10px;
  }
  .character-meta {
    margin-top: 14px;
    font-size: 7px;
  }
  .character-card h3 {
    font-size: 21px;
  }
  .character-card > p {
    font-size: 10px;
    line-height: 1.7;
  }
  .archive-end {
    margin-top: 48px;
  }
  .story {
    grid-template-columns: 1fr;
    padding: 56px 8%;
    gap: 34px;
  }
  .story-copy h2 {
    font-size: 29px;
  }
  .story-copy > p:not(.eyebrow) {
    font-size: 12px;
  }
  .scene-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .scene-card:nth-child(2) {
    width: 86%;
    margin-left: auto;
    padding-top: 0;
  }
  .scene-card h3 {
    font-size: 21px;
  }
  .notes {
    padding-top: 45px;
  }
  .note-row {
    grid-template-columns: 32px 1fr;
    gap: 13px;
    padding: 22px 0;
  }
  .note-row strong {
    font-size: 11px;
  }
  .note-row p {
    grid-column: 2;
    font-size: 10px;
  }
  /* 權重改寫 */ html body footer {
    padding: 50px 7% 24px;
  }
  .footer-main {
    flex-wrap: wrap;
    padding-bottom: 34px;
  }
  .footer-main > p {
    width: 100%;
    font-size: 44px;
  }
  .footer-brand .brand-lockup strong {
    font-size: 17px;
  }
  .footer-brand .brand-lockup i {
    font-size: 20px;
  }
  .top-link {
    margin-left: auto;
  }
  .footer-bottom {
    flex-wrap: wrap;
    line-height: 1.7;
  }
  .footer-bottom span:last-child {
    display: none;
  }
  .character-dialog {
    overflow-y: auto;
  }
  .dialog-top {
    height: 70px;
    padding: 10px 14px;
  }
  .dialog-top .brand-lockup small {
    display: none;
  }
  .dialog-content {
    min-height: calc(100dvh - 70px);
    grid-template-columns: 44px 1fr 44px;
    gap: 4px;
    padding: 20px 6px 36px;
    align-items: start;
  }
  .dialog-art {
    grid-column: 1/4;
    grid-row: 1;
    min-height: 43vh;
  }
  .dialog-prev {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }
  .dialog-copy {
    grid-column: 2;
    grid-row: 2;
    padding: 29px 8px 0;
  }
  .dialog-next {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
  }
  .dialog-copy h2 {
    font-size: 45px;
  }
  .dialog-copy > p:not(.eyebrow) {
    font-size: 12px;
  }
  .dialog-copy dl > div {
    grid-template-columns: 95px 1fr;
    gap: 10px;
  }
}
@media (max-width:390px) {
  .archive-toolbar {
    flex-wrap: wrap;
    padding-bottom: 10px;
  }
  .archive-count {
    margin-left: auto;
  }
  .character-card h3 {
    font-size: 19px;
  }
}
@media (max-width:760px) {
  .hero-visual > img:first-child {
    padding: 0;
  }
  .hero-visual > img.family {
    padding: 3%;
  }
}
.character-trait {
  left: auto;
  right: 16px;
  top: 16px;
  bottom: auto;
  text-align: center;
  transform: scale(.85);
  transform-origin: top right;
}
@media (max-width:760px) {
  .character-trait {
    left: auto;
    right: 10px;
    top: 10px;
    bottom: auto;
  }
}
.story {
  margin-top: 72px;
}
@media (max-width:760px) {
  .story {
    margin-top: 40px;
  }
}
.transformation-belt {
  position: relative;
  isolation: isolate;
  contain: layout paint;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(230px, 330px) minmax(280px, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  min-height: 250px;
  padding: 34px 4.5%;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #eeece6;
}
.belt-backdrop {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background-position: center;
  background-size: cover;
  pointer-events: none;
  opacity: var(--belt-opacity,.42);
}
.belt-backdrop:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f6f4ef2e;
}
.belt-changing .belt-backdrop-current {
  animation: belt-background-in 1.3s linear both;
}
.belt-changing .belt-backdrop-previous {
  animation: belt-background-out 1.3s linear both;
}
.belt-group {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  align-items: end;
  justify-items: center;
  gap: clamp(6px, 1.2vw, 20px);
  height: 165px;
}
.belt-character {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(66px, 7.2vw, 112px);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
.belt-sprite {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  transform: translateY(-10px);
}
.belt-copy {
  position: relative;
  z-index: 2;
  padding: 29px 20px 27px;
  text-align: center;
  background: #f5f3ee;
}
.belt-copy .eyebrow {
  display: block;
  color: #807d81;
  font-size: 7px;
  white-space: nowrap;
}
.belt-copy p {
  margin: 13px 0 10px;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.62;
  letter-spacing: .09em;
}
.belt-copy small {
  color: var(--muted);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  letter-spacing: .02em;
}
.belt-leaving .belt-character,
.belt-entering .belt-character {
  will-change: transform, opacity;
}
.belt-leaving .belt-character {
  animation: belt-exit-left 1.35s linear both;
  animation-delay: calc(var(--exit-order)*.22s);
}
.belt-changing .belt-character {
  opacity: 0;
}
.belt-entering .belt-character {
  animation: belt-enter-right 1.35s linear both;
  animation-delay: calc(var(--enter-order)*.22s);
}
@keyframes belt-background-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: var(--belt-opacity,.42);
  }
}
@keyframes belt-background-out {
  0% {
    opacity: var(--belt-opacity,.42);
  }
  to {
    opacity: 0;
  }
}
@keyframes belt-exit-left {
  0% {
    opacity: 1;
    transform: translateZ(0) rotate(0) scale(1);
  }
  12.5% {
    transform: translate3d(-11vw, -31px, 0) rotate(-5deg) scale(1.02);
  }
  25% {
    transform: translate3d(-23vw, 1px, 0) rotate(1deg) scaleY(.95);
  }
  37.5% {
    transform: translate3d(-35vw, -29px, 0) rotate(-4deg) scale(1.02);
  }
  50% {
    transform: translate3d(-48vw, 1px, 0) rotate(1deg) scaleY(.96);
  }
  62.5% {
    transform: translate3d(-61vw, -26px, 0) rotate(-4deg) scale(1.01);
  }
  75% {
    transform: translate3d(-75vw, 1px, 0) rotate(1deg) scaleY(.97);
  }
  87.5% {
    opacity: 1;
    transform: translate3d(-91vw, -21px, 0) rotate(-3deg) scale(1.01);
  }
  to {
    opacity: 0;
    transform: translate3d(-108vw, 1px, 0) rotate(-2deg) scale(1);
  }
}
@keyframes belt-enter-right {
  0% {
    opacity: 0;
    transform: translate3d(108vw, 1px, 0) rotate(3deg) scale(1);
  }
  12.5% {
    opacity: 1;
    transform: translate3d(92vw, -21px, 0) rotate(-3deg) scale(1.01);
  }
  25% {
    transform: translate3d(76vw, 1px, 0) rotate(1deg) scaleY(.97);
  }
  37.5% {
    transform: translate3d(62vw, -26px, 0) rotate(4deg) scale(1.01);
  }
  50% {
    transform: translate3d(48vw, 1px, 0) rotate(-1deg) scaleY(.96);
  }
  62.5% {
    transform: translate3d(35vw, -29px, 0) rotate(4deg) scale(1.02);
  }
  75% {
    transform: translate3d(23vw, 1px, 0) rotate(-1deg) scaleY(.95);
  }
  87.5% {
    transform: translate3d(11vw, -31px, 0) rotate(5deg) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translateZ(0) rotate(0) scale(1);
  }
}
@media (max-width:1000px) {
  .transformation-belt {
    grid-template-columns: minmax(230px, 1fr) minmax(205px, 260px) minmax(230px, 1fr);
    gap: 20px;
    padding-inline: 3%;
  }
  .belt-group {
    height: 140px;
  }
  .belt-character {
    width: clamp(58px, 7.5vw, 82px);
  }
  .belt-copy {
    padding-inline: 12px;
  }
  .belt-copy p {
    font-size: 23px;
  }
}
@media (max-width:760px) {
  .transformation-belt {
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: 0;
    padding: 24px 6% 27px;
  }
  .belt-group {
    grid-template-columns: repeat(4, 1fr);
    height: 80px;
    gap: 8px;
  }
  .belt-character {
    width: min(18vw, 72px);
  }
  .belt-sprite {
    transform: translateY(-6px);
  }
  .belt-copy {
    grid-row: 2;
    padding: 18px 12px;
  }
  .belt-copy p {
    margin: 0 0 7px;
    font-size: 21px;
    line-height: 1.48;
  }
  .belt-copy small {
    font-size: 13px;
  }
}
.services {
  width: min(100%, 1500px);
  margin: 72px auto 0;
  padding: 72px 7.5% 82px;
  background: #eae8e2;
}
.services-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 44px;
  padding-bottom: 28px;
  border-bottom: 1px solid #cecbc4;
}
.services-heading h2 {
  margin-top: 13px;
  font-family: var(--serif);
  font-size: clamp(46px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.services-heading h2 span {
  display: inline-block;
  margin-left: 24px;
  vertical-align: middle;
  font-family:
    Avenir Next,
    Avenir,
    Noto Sans TC,
    sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
}
.services-heading > p {
  padding-bottom: 4px;
  color: #656269;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 2;
  letter-spacing: .07em;
}
.service-stage {
  position: relative;
  display: grid;
  height: 620px;
  grid-template-columns: minmax(0, 1.16fr) minmax(340px, .84fr);
  align-items: center;
  gap: clamp(44px, 6.5vw, 98px);
  opacity: 1;
  transition: opacity .28s linear;
}
.service-stage.is-fading {
  opacity: 0;
}
.service-visual {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #ddd9d1;
}
.service-visual:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 0 1px #26262914;
  pointer-events: none;
}
.service-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-image-label {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 16px;
  padding: 9px 11px;
  color: #fff;
  background: #1f1f22ad;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 7px;
  letter-spacing: .17em;
}
.service-copy {
  min-width: 0;
}
.service-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #cecbc4;
  color: #706e73;
  font-size: 8px;
  letter-spacing: .15em;
}
.service-copy h3 {
  margin: 25px 0 14px;
  font-family: var(--serif);
  font-size: clamp(36px, 2.8vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .02em;
}
.service-lead {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: .05em;
}
.service-description {
  margin-top: 20px;
  color: #535157;
  font-size: 14px;
  line-height: 2;
}
.service-fit {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}
.service-fit span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid #9f9b94;
  color: #555258;
  background: #f7f6f252;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .03em;
}
.service-copy ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid #cecbc4;
  list-style: none;
}
.service-copy li {
  position: relative;
  padding: 13px 0 12px 15px;
  border-bottom: 1px solid #d5d2cb;
  font-size: 14px;
  letter-spacing: .03em;
}
.service-copy li:before {
  content: "";
  position: absolute;
  left: 1px;
  top: 20px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4d4b50;
}
.service-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  margin-top: 30px;
}
.service-pagination {
  display: flex;
  gap: 5px;
}
.service-pagination button {
  position: relative;
  width: 33px;
  height: 34px;
  color: #8b888e;
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
}
.service-pagination button:after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 2px;
  height: 1px;
  background: transparent;
}
.service-pagination button[aria-pressed=true] {
  color: var(--ink);
}
.service-pagination button[aria-pressed=true]:after {
  background: var(--ink);
}
.service-side-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid #aaa69f;
  background: #f7f6f2eb;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
  transition:
    background .22s,
    color .22s,
    transform .22s;
}
.service-side-arrow:hover {
  color: #fff;
  background: var(--ink);
  transform: translateY(-50%) scale(1.04);
}
.service-side-prev {
  left: -76px;
}
.service-side-next {
  right: -76px;
}
.service-fit > span {
  display: grid;
  place-items: center;
  width: auto;
  min-width: 76px;
  height: 34px;
  min-height: 0;
  padding: 0 12px;
  line-height: 1;
  text-align: center;
}
.service-fit > span > i {
  display: block;
  font-style: normal;
  line-height: 1;
  transform: translateY(1px);
}
@media (max-width:1100px) {
  .services {
    padding-inline: 6%;
  }
  .service-stage {
    height: 590px;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 42px;
  }
  .service-side-arrow {
    width: 46px;
    height: 46px;
  }
  .service-side-prev {
    left: -46px;
  }
  .service-side-next {
    right: -46px;
  }
}
@media (max-width:760px) {
  .services {
    margin-top: 40px;
    padding: 54px 6% 60px;
  }
  .services-heading {
    display: block;
    margin-bottom: 28px;
    padding-bottom: 23px;
  }
  .services-heading h2 {
    font-size: 44px;
  }
  .services-heading h2 span {
    margin-left: 15px;
    font-size: 10px;
  }
  .services-heading > p {
    margin-top: 19px;
    font-size: 12px;
  }
  .service-stage {
    display: flex;
    height: calc(66vw + 650px);
    flex-direction: column;
    gap: 30px;
  }
  .service-visual {
    width: 100%;
  }
  .service-image-label {
    left: 12px;
    bottom: 12px;
  }
  .service-copy {
    width: 100%;
  }
  .service-copy h3 {
    margin-top: 22px;
    font-size: 36px;
  }
  .service-lead {
    font-size: 20px;
  }
  .service-description {
    line-height: 1.9;
  }
  .service-copy ul {
    margin-top: 22px;
  }
  .service-controls {
    margin-top: 24px;
  }
  .service-pagination {
    display: grid;
    grid-template-columns: repeat(6, 30px);
    gap: 2px;
  }
  .service-pagination button {
    width: 30px;
    height: 30px;
  }
  .service-side-arrow {
    top: 33vw;
    width: 46px;
    height: 46px;
    color: #fff;
    border-color: #ffffff8c;
    background: #1f1f2294;
  }
  .service-side-prev {
    left: 10px;
  }
  .service-side-next {
    right: 10px;
  }
}
@media (max-width:390px) {
  .service-stage {
    height: calc(66vw + 690px);
  }
  .service-copy ul {
    grid-template-columns: 1fr;
  }
  .service-controls {
    gap: 12px;
  }
  .service-pagination {
    grid-template-columns: repeat(6, 27px);
  }
  .service-pagination button {
    width: 27px;
  }
}
@media (prefers-reduced-motion:reduce) {
  /* 權重改寫 */ :root {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
@media (max-width:1100px) {
  .hero h1 {
    font-size: 73px;
  }
  .hero h1 i {
    font-size: 1.12em;
    line-height: .92;
  }
}
@media (max-width:760px) {
  .hero h1 {
    font-size: 75px;
  }
}
.hero .hero-wordmark {
  --trait-offset:clamp(56px,5.35vw,84px);
  display: block;
  margin: 10px 0 34px;
  font-size: clamp(75px, 6.5vw, 112px);
  line-height: .9;
  font-weight: 500;
  letter-spacing: -.035em;
}
.hero-wordmark .hero-brand-line {
  display: flex;
  align-items: flex-end;
  width: max-content;
  gap: .16em;
}
.hero-wordmark .hero-crito {
  display: inline-block;
  font-size: 1.24em;
}
.hero-wordmark .hero-family {
  display: inline-block;
  margin: 0;
  font-size: .16em;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .08em;
  transform: translateY(-13px);
}
.hero-wordmark .hero-trait-word {
  display: flex;
  width: max-content;
  max-width: calc(100% - var(--trait-offset));
  margin-top: .16em;
  margin-left: var(--trait-offset);
  font-family: inherit;
  font-size: .62em;
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.045em;
  white-space: nowrap;
}
@media (max-width:1100px) {
  .hero .hero-wordmark {
    font-size: 73px;
  }
}
@media (max-width:760px) {
  .hero .hero-wordmark {
    display: block;
    margin: 6px 0 26px;
    font-size: 75px;
  }
  .hero-wordmark .hero-brand-line {
    display: flex;
    gap: .14em;
  }
  .hero-wordmark .hero-family {
    font-size: .15em;
  }
  .hero-wordmark .hero-trait-word {
    font-size: .56em;
  }
}
.scene-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.scene-card:nth-child(4n+1),
.scene-card:nth-child(4n) {
  grid-column: span 7;
  padding-top: 0;
}
.scene-card:nth-child(4n+2),
.scene-card:nth-child(4n+3) {
  grid-column: span 5;
  padding-top: 104px;
}
.scene-card:nth-child(4n+1) .scene-image img,
.scene-card:nth-child(4n) .scene-image img {
  aspect-ratio: 4/5;
}
.scene-card:nth-child(4n+2) .scene-image img,
.scene-card:nth-child(4n+3) .scene-image img {
  aspect-ratio: 4/5.4;
}
@media (max-width:760px) {
  .scene-grid {
    grid-template-columns: 1fr;
  }
  .scene-card:nth-child(n) {
    grid-column: 1/-1;
    width: 100%;
    margin: 0;
    padding-top: 0;
  }
  .scene-card:nth-child(n) .scene-image img {
    aspect-ratio: 4/5;
  }
}
.note-row p {
  font-size: 13px;
  line-height: 1.85;
}
@media (max-width:760px) {
  .note-row p {
    font-size: 12px;
  }
}
.footer-family-shelf {
  position: relative;
  height: 132px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
}
.footer-family-shelf:after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(38, 38, 41, .42) 7%, rgba(38, 38, 41, .42) 93%, transparent);
}
.footer-family-cast {
  position: relative;
  z-index: 1;
  width: min(100%, 1260px);
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  gap: clamp(1px, .5vw, 8px);
  padding-inline: 1%;
}
.footer-family-member {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-width: 0;
  transform: translateY(3px);
  transform-origin: 50% 100%;
}
.footer-family-member img {
  display: block;
  width: 100%;
  max-width: 78px;
  height: 96px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 5px 5px rgba(38, 38, 41, .1));
  -webkit-user-select: none;
  user-select: none;
}
.footer-family-member:nth-child(5n+1) {
  transform: translateY(5px) rotate(-2deg);
}
.footer-family-member:nth-child(5n+2) {
  transform: translateY(1px) rotate(1.5deg);
}
.footer-family-member:nth-child(5n+3) {
  transform: translateY(4px) rotate(-.5deg);
}
.footer-family-member:nth-child(5n+4) {
  transform: translateY(0) rotate(-1.5deg);
}
.footer-family-member:nth-child(5n) {
  transform: translateY(3px) rotate(2deg);
}
.footer-bottom {
  border-top: 0;
}
@media (max-width:760px) {
  .footer-family-shelf {
    width: 100%;
    height: 96px;
    margin-inline: 0;
  }
  .footer-family-shelf:after {
    bottom: 0;
  }
  .footer-family-cast {
    width: 100%;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0;
    padding: 0;
  }
  .footer-family-member:nth-child(2n) {
    display: none;
  }
  .footer-family-member img {
    width: 38px;
    max-width: none;
    height: 64px;
  }
  .footer-family-member:nth-child(5n+1) {
    transform: translateY(2px) rotate(-2deg);
  }
  .footer-family-member:nth-child(5n+2) {
    transform: translateY(0) rotate(1.5deg);
  }
  .footer-family-member:nth-child(5n+3) {
    transform: translateY(3px) rotate(-.5deg);
  }
  .footer-family-member:nth-child(5n+4) {
    transform: translateY(0) rotate(-1.5deg);
  }
  .footer-family-member:nth-child(5n) {
    transform: translateY(1px) rotate(2deg);
  }
}
/* 權重改寫 */ html body footer {
  position: relative;
}
.footer-main {
  align-items: flex-end;
}
.footer-brand {
  margin-left: auto;
  align-self: flex-end;
}
.mascot-top-link {
  position: fixed;
  z-index: 40;
  right: clamp(18px, 2.1vw, 34px);
  bottom: clamp(18px, 2.1vw, 34px);
  display: block;
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 9px 9px rgba(38, 38, 41, .17));
  transform-origin: 50% 100%;
  transition: transform .24s ease, filter .24s ease;
}
.mascot-top-link > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
}
.mascot-top-arrow {
  position: absolute;
  top: -1px;
  right: -1px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(38, 38, 41, .38);
  border-radius: 50%;
  color: var(--ink);
  background: #f7f6f2f0;
  box-shadow: 0 4px 10px #26262914;
}
.mascot-top-link:hover {
  filter: drop-shadow(0 13px 12px rgba(38, 38, 41, .2));
  transform: translateY(-7px) rotate(-2deg);
}
.mascot-top-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
  border-radius: 50%;
}
@media (max-width:760px) {
  .footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 22px;
  }
  .footer-main > p {
    width: auto;
  }
  .footer-brand {
    grid-column: 2;
    align-self: end;
  }
  .mascot-top-link {
    right: 14px;
    bottom: 14px;
    width: 62px;
    height: 62px;
  }
  .mascot-top-arrow {
    width: 23px;
    height: 23px;
  }
  .mascot-top-arrow svg {
    width: 13px;
    height: 13px;
  }
}
body.contact-dialog-open {
  overflow: hidden;
}
.contact-trigger {
  position: fixed;
  z-index: 40;
  right: clamp(18px, 2.1vw, 34px);
  bottom: clamp(18px, 2.1vw, 34px);
  display: block;
  width: 202px;
  height: 90px;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 9px 9px rgba(38, 38, 41, .16));
  transform: translateY(34px) scale(.94);
  transform-origin: 100% 100%;
  transition:
    opacity .3s ease,
    visibility 0s linear .36s,
    transform .45s cubic-bezier(.2, .8, .2, 1),
    filter .24s ease;
}
.contact-trigger.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.contact-trigger img {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
}
.contact-trigger-label {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  display: grid;
  width: 178px;
  height: 54px;
  overflow: hidden;
  align-content: center;
  padding: 0 59px 0 32px;
  border: 1px solid rgba(38, 38, 41, .25);
  border-radius: 999px;
  background: #f7f6f2f0;
  text-align: left;
  box-shadow: 0 4px 10px #26262912;
  transform: translateY(-50%);
}
.contact-trigger-label b {
  position: relative;
  z-index: 2;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .065em;
  white-space: nowrap;
}
.contact-trigger-label small {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  color: var(--muted);
  font-size: 7.5px;
  letter-spacing: .18em;
}
.contact-trigger-particles {
  position: absolute;
  z-index: 1;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.contact-trigger-particles i {
  --mx:10px;
  --my:-5px;
  --ex:-5px;
  --ey:4px;
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #cfeff1;
  filter: blur(4px);
  opacity: .72;
  mix-blend-mode: multiply;
  animation: contact-particle-drift 2.4s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
.contact-trigger-particles i:nth-child(1) {
  top: 2px;
  left: 6px;
  width: 18px;
  height: 18px;
  background: #cdeff4;
  --mx:18px;
  --my:8px;
  --ex:7px;
  --ey:-4px;
  animation-delay: -.4s;
}
.contact-trigger-particles i:nth-child(2) {
  top: 25px;
  left: 31px;
  width: 13px;
  height: 13px;
  background: #e4d3ef;
  --mx:13px;
  --my:-17px;
  --ex:27px;
  --ey:-6px;
  animation-delay: -1.2s;
}
.contact-trigger-particles i:nth-child(3) {
  top: -3px;
  left: 58px;
  width: 17px;
  height: 17px;
  background: #f4d1df;
  --mx:-12px;
  --my:15px;
  --ex:14px;
  --ey:9px;
  animation-delay: -.8s;
}
.contact-trigger-particles i:nth-child(4) {
  top: 29px;
  left: 78px;
  width: 15px;
  height: 15px;
  background: #d7e8c8;
  --mx:16px;
  --my:-13px;
  --ex:-9px;
  --ey:-8px;
  animation-delay: -1.7s;
}
.contact-trigger-particles i:nth-child(5) {
  top: 4px;
  left: 103px;
  width: 20px;
  height: 20px;
  background: #d2def3;
  --mx:-17px;
  --my:10px;
  --ex:9px;
  --ey:13px;
  animation-delay: -2.1s;
}
.contact-trigger-particles i:nth-child(6) {
  top: 30px;
  left: 130px;
  width: 12px;
  height: 12px;
  background: #f4e4bd;
  --mx:-13px;
  --my:-18px;
  --ex:-27px;
  --ey:-6px;
  animation-delay: -.3s;
}
.contact-trigger-particles i:nth-child(7) {
  top: -5px;
  left: 149px;
  width: 16px;
  height: 16px;
  background: #caeeee;
  --mx:-25px;
  --my:15px;
  --ex:-8px;
  --ey:5px;
  animation-delay: -1.4s;
}
.contact-trigger-particles i:nth-child(8) {
  top: 19px;
  left: 12px;
  width: 11px;
  height: 11px;
  background: #f0cbd8;
  --mx:31px;
  --my:-12px;
  --ex:47px;
  --ey:3px;
  animation-delay: -2.3s;
}
.contact-trigger-particles i:nth-child(9) {
  top: 15px;
  left: 91px;
  width: 12px;
  height: 12px;
  background: #d9cfee;
  --mx:25px;
  --my:14px;
  --ex:42px;
  --ey:-5px;
  animation-delay: -1s;
}
.contact-trigger:hover .contact-trigger-particles,
.contact-trigger:focus-visible .contact-trigger-particles {
  opacity: .92;
}
.contact-trigger:hover .contact-trigger-particles i,
.contact-trigger:focus-visible .contact-trigger-particles i {
  animation-play-state: running;
}
@keyframes contact-particle-drift {
  0% {
    transform: translateZ(0) scale(.72);
  }
  52% {
    transform: translate3d(var(--mx), var(--my), 0) scale(1.16);
  }
  to {
    transform: translate3d(var(--ex), var(--ey), 0) scale(.86);
  }
}
.contact-trigger:hover {
  filter: drop-shadow(0 13px 12px rgba(38, 38, 41, .2));
  transform: translateY(-7px) rotate(-1deg);
}
.contact-trigger:focus-visible {
  outline: 0;
}
.contact-trigger:focus-visible .contact-trigger-label {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
@media (prefers-reduced-motion:reduce) {
  .contact-trigger-particles i {
    animation: none;
  }
  .contact-trigger:hover .contact-trigger-particles,
  .contact-trigger:focus-visible .contact-trigger-particles {
    opacity: .72;
  }
}
.contact-dialog {
  width: min(1060px, calc(100vw - 40px));
  max-width: none;
  height: min(720px, calc(100dvh - 40px));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(38, 38, 41, .18);
  border-radius: 3px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 80px #16151733;
}
.contact-dialog::backdrop {
  background: #2423247a;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.contact-dialog.is-qa {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 0 100vmax #2423247a, 0 30px 80px #16151733;
}
.contact-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, .37fr) minmax(0, .63fr);
  height: 100%;
}
.contact-close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 16px;
  color: #777277;
}
.contact-close:hover {
  color: var(--ink);
}
.contact-intro {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 48px 46px 36px;
  overflow: hidden;
  border-right: 1px solid #dedad3;
  background-color: #f0ede7;
  background-image: url(/crito/contact/contact-concierge-pearl-v1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.contact-intro:after {
  display: none;
}
.contact-intro > * {
  position: relative;
  z-index: 1;
}
.contact-intro .brand-lockup strong {
  font-size: 17px;
}
.contact-intro .brand-lockup i {
  font-size: 20px;
}
.contact-intro .brand-lockup small {
  font-size: 6px;
}
.contact-kicker {
  display: none;
}
.contact-intro h2 {
  margin-top: 58px;
  font-family: var(--serif);
  font-size: clamp(45px, 4.1vw, 61px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.035em;
}
.contact-intro h2 span {
  font-size: .76em;
  letter-spacing: .04em;
}
.contact-intro h2 .contact-en {
  font-size: .9em;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.contact-promise {
  margin-top: 34px;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.72;
  letter-spacing: .055em;
}
.contact-host {
  position: absolute;
  z-index: 2;
  right: 84px;
  bottom: 102px;
  width: 104px;
  height: auto;
}
.contact-host span {
  position: static;
  display: block;
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: .06em;
  white-space: nowrap;
  transform: rotate(-8deg);
}
.contact-form-panel {
  display: flex;
  min-width: 0;
  height: 100%;
  padding: 48px 48px 32px;
  overflow-y: auto;
  background: #faf8f4;
}
.contact-form {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
}
.contact-form-lead {
  margin: 0 42px 20px 0;
  color: #666269;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .04em;
}
.contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.contact-field {
  display: block;
  margin-bottom: 15px;
}
.contact-field > span,
.contact-services legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .06em;
}
.contact-field i,
.contact-services legend i {
  color: #99949a;
  font-family:
    Avenir Next,
    Avenir,
    Noto Sans TC,
    sans-serif;
  font-size: 6px;
  font-style: normal;
  letter-spacing: .18em;
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1px solid #c9c5be;
  border-radius: 0;
  color: var(--ink);
  background: #ffffff61;
  outline: 0;
  transition: border-color .2s ease, background .2s ease;
}
.contact-field input {
  height: 49px;
  padding: 0 15px;
}
.contact-field textarea {
  display: block;
  min-height: 105px;
  padding: 13px 15px;
  resize: vertical;
  line-height: 1.7;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #aaa6a1;
}
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--ink);
  background: #fff;
}
.contact-services {
  min-width: 0;
  margin: 0 0 15px;
  padding: 0;
  border: 0;
}
.contact-services > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.contact-service {
  position: relative;
  cursor: pointer;
}
.contact-service input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.contact-service span {
  display: grid;
  place-items: center;
  height: 45px;
  border: 1px solid #c9c5be;
  background: #ffffff47;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .03em;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}
.contact-service:hover span {
  border-color: #7d7973;
}
.contact-service input:checked + span {
  border-color: var(--ink);
  color: #fff;
  background: var(--ink);
}
.contact-service input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.contact-message {
  margin-bottom: 15px;
}
.contact-submit {
  display: flex;
  width: 100%;
  height: 53px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: auto;
  color: #fff;
  background: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .12em;
  transition: background .2s ease, transform .2s ease;
}
.contact-submit:hover {
  background: #4b484c;
  transform: translateY(-2px);
}
/*
 * 原型沒有：接上送出端點後新增的錯誤訊息（contracts/api/crito-inquiry.md §10 偏離第 5 項）。
 * 送出鍵原本靠 margin-top: auto 貼齊面板底部；錯誤訊息出現時改由訊息吃掉 auto，
 * 訊息與按鈕一起貼底，未出錯時版面與原型相同。字體沿用表單的 serif 與 13px 級距。
 */
.contact-error {
  margin: auto 0 12px;
  color: #a33a2f;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .04em;
}
.contact-error + .contact-submit {
  margin-top: 0;
}
.contact-submit:disabled {
  cursor: progress;
}
.contact-success {
  display: flex;
  width: min(100%, 520px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: auto;
}
.contact-success .eyebrow {
  color: #7b777b;
}
.contact-success h3 {
  margin: 24px 0 26px;
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .035em;
}
.contact-success > p:not(.eyebrow) {
  color: #666269;
  font-size: 13px;
  line-height: 2;
}
.contact-success > div {
  display: flex;
  gap: 10px;
  margin-top: 34px;
}
.contact-success button {
  min-width: 132px;
  padding: 14px 18px;
  border: 1px solid var(--ink);
  font-size: 11px;
  letter-spacing: .1em;
}
.contact-success button:last-child {
  color: #fff;
  background: var(--ink);
}
@media (max-width:820px) {
  .contact-dialog {
    width: calc(100vw - 22px);
    height: calc(100dvh - 22px);
  }
  .contact-shell {
    display: block;
    overflow-y: auto;
  }
  .contact-intro {
    min-height: 330px;
    padding: 34px 28px 30px;
    border-right: 0;
    border-bottom: 1px solid #dedad3;
    background-position: right 82%;
    background-size: auto 620px;
  }
  .contact-intro .brand-lockup {
    display: none;
  }
  .contact-kicker {
    display: block;
    font-size: 7px;
    letter-spacing: .2em;
  }
  .contact-intro h2 {
    margin-top: 25px;
    font-size: 47px;
  }
  .contact-promise {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.55;
  }
  .contact-host {
    right: 140px;
    bottom: 80px;
    width: 90px;
  }
  .contact-host span {
    font-size: 11px;
  }
  .contact-form-panel {
    height: auto;
    min-height: calc(100dvh - 353px);
    padding: 34px 26px 30px;
  }
  .contact-close {
    position: fixed;
    top: 20px;
    right: 21px;
  }
  .contact-form-lead {
    margin-right: 38px;
  }
  .contact-success {
    min-height: 440px;
  }
}
@media (max-width:520px) {
  .contact-trigger {
    right: 11px;
    bottom: 12px;
    width: 172px;
    height: 72px;
  }
  .contact-trigger img {
    width: 74px;
    height: 74px;
  }
  .contact-trigger-label {
    width: 156px;
    height: 48px;
    padding: 0 53px 0 25px;
  }
  .contact-trigger-label b {
    font-size: 11px;
  }
  .contact-trigger-label small {
    font-size: 6.5px;
  }
  .contact-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-services > div {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-intro {
    min-height: 330px;
    background-position: right 82%;
    background-size: auto 560px;
  }
  .contact-intro h2 {
    font-size: 42px;
  }
  .contact-promise {
    font-size: 16px;
  }
  .contact-host {
    right: 108px;
    bottom: 70px;
    width: 60px;
  }
  .contact-host span {
    display: none;
  }
  .contact-form-panel {
    padding: 30px 20px 25px;
  }
  .contact-form-lead {
    font-size: 12px;
  }
  .contact-field input {
    height: 47px;
  }
  .contact-service span {
    height: 43px;
    font-size: 12px;
  }
  .contact-success h3 {
    font-size: 35px;
  }
  .contact-success > div {
    width: 100%;
    flex-direction: column;
  }
  .contact-success button {
    width: 100%;
  }
}
.footer-family-shelf:after {
  display: none;
}
.footer-bottom {
  position: relative;
  z-index: 2;
  align-items: flex-end;
  margin-top: -7px;
  padding-top: 0;
}
@media (max-width:760px) {
  .footer-bottom {
    margin-top: -5px;
    padding-top: 0;
  }
}
.belt-copy {
  isolation: isolate;
  overflow: visible;
  background: transparent;
}
.belt-copy:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -36%;
  bottom: 0;
  left: -36%;
  pointer-events: none;
  background: linear-gradient(90deg, #f5f3ee00, #f5f3eec2 22%, #f5f3eef7 42%, #f5f3eef7 58%, #f5f3eec2 78%, #f5f3ee00);
}
@media (max-width:760px) {
  .belt-copy:before {
    top: 0;
    right: -7%;
    bottom: 0;
    left: -7%;
  }
}
.brand-lockup {
  display: block;
  width: 127px;
  line-height: 0;
}
.brand-lockup img {
  display: block;
  width: 100%;
  height: auto;
}
.footer-brand .brand-lockup {
  width: 150px;
}
.contact-intro .brand-lockup {
  width: 132px;
}
@media (max-width:760px) {
  .site-header .brand-lockup {
    width: 112px;
  }
  .footer-brand .brand-lockup {
    width: 128px;
  }
  .contact-intro .brand-lockup {
    display: block;
    width: 112px;
  }
}
.footer-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.footer-identity .footer-brand {
  margin-left: 0;
}
.footer-copyright {
  margin: 0;
  padding-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .12em;
  text-align: center;
  white-space: nowrap;
}
@media (max-width:760px) {
  .footer-identity {
    grid-column: 2;
    align-self: end;
    gap: 11px;
  }
  .footer-identity .footer-brand {
    grid-column: auto;
  }
  .footer-copyright {
    padding-top: 8px;
    font-size: 10px;
  }
}
.footer-family-cast {
  transform: translateY(-14px);
}
@media (max-width:760px) {
  .footer-family-cast {
    transform: translateY(-8px);
  }
}
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.site-header > .brand {
  justify-self: start;
}
.site-header > nav {
  justify-self: center;
}
.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 24px;
}
.language-switcher {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #77757a;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.language-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
}
.language-switcher button {
  position: relative;
  padding: 12px 0;
  color: inherit;
  font-weight: 500;
  transition: color .2s ease;
}
.language-switcher button:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1px;
  background: transparent;
  transition: background .2s ease;
}
.language-switcher button:hover,
.language-switcher button.is-active {
  color: var(--ink);
}
.language-switcher button.is-active {
  font-weight: 650;
}
.language-switcher button.is-active:after {
  background: var(--ink);
}
.language-option > span {
  color: #aaa6a0;
}
.header-contact {
  display: inline-flex;
  min-width: 132px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid #9f9b94;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    transform .22s ease;
}
.header-contact:hover {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
  transform: translateY(-2px);
}
.menu-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 38px;
}
.menu-actions .header-contact {
  min-width: 150px;
}
@media (max-width:1100px) {
  .header-actions {
    gap: 15px;
  }
  .language-switcher {
    font-size: 9px;
    gap: 7px;
  }
  .language-option {
    gap: 7px;
  }
  .header-contact {
    min-width: 118px;
    padding-inline: 14px;
  }
}
@media (max-width:900px) {
  .header-actions .language-switcher {
    display: none;
  }
}
@media (max-width:760px) {
  .site-header {
    display: flex;
  }
  .header-actions {
    display: none;
  }
  .menu-actions .language-switcher {
    display: flex;
  }
  .menu-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .menu-actions .header-contact {
    min-width: 180px;
  }
}
.section-heading h2,
.services-heading h2,
.contact-intro h2 .contact-en {
  letter-spacing: -.015em;
}
.fog-title {
  display: inline-flex;
  flex-wrap: wrap;
}
.section-heading h2 > .fog-title,
.services-heading h2 > .fog-title {
  margin-left: 0;
  vertical-align: baseline;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}
.fog-title .fog-title-character {
  display: inline-block;
  margin: 0;
  vertical-align: baseline;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  filter: blur(80px);
  opacity: 0;
  transform: translateY(60px);
  transition:
    filter 1.2s cubic-bezier(.07, 1, .19, 1) var(--fog-delay),
    transform 1.2s cubic-bezier(0, 1, .1, 1) var(--fog-delay),
    opacity .72s ease var(--fog-delay);
  will-change:
    filter,
    transform,
    opacity;
}
.fog-title.is-visible .fog-title-character {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion:reduce) {
  .fog-title-character {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}
.hero-index-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 25px;
  padding: 0 3px 1px;
}
.hero-index-current {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .17em;
}
.hero-trait-zh {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .16em;
  white-space: nowrap;
}
.hero-index-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
}
.hero-index-rail:before {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  height: 1px;
  background: #cecac3;
}
.hero-index-segment {
  position: relative;
  height: 18px;
  padding: 0;
  cursor: pointer;
}
.hero-index-segment:after {
  content: "";
  position: absolute;
  top: 8px;
  right: 2px;
  left: 2px;
  height: 1px;
  background: transparent;
  transition:
    height .25s ease,
    background .25s ease,
    transform .25s ease;
}
.hero-index-segment:hover:after {
  height: 2px;
  background: #77736e;
  transform: translateY(-1px);
}
.hero-index-segment.is-active:after {
  height: 3px;
  background: var(--ink);
  transform: translateY(-1px);
}
.hero-index-segment span {
  position: absolute;
  top: 14px;
  left: 50%;
  opacity: 0;
  color: var(--muted);
  font-size: 6px;
  letter-spacing: .08em;
  transform: translate(-50%);
  transition: opacity .2s ease;
}
.hero-index-segment:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}
.hero-index-segment.is-active span,
.hero-index-segment:hover span,
.hero-index-segment:focus-visible span {
  opacity: 1;
}
.hero-bottom .hero-archive-link {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}
.hero-archive-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-archive-copy strong {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .055em;
}
.hero-archive-copy small {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: .09em;
}
.hero-archive-visual {
  display: flex;
  min-width: 64px;
  align-items: center;
  justify-content: flex-end;
}
.hero-mini-mascot {
  position: relative;
  z-index: 2;
  display: block;
  width: 64px;
  height: 64px;
  margin-top: -12px;
}
.hero-mini-mascot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: hero-mini-arrive .55s cubic-bezier(.18, .8, .26, 1) both;
}
.hero-archive-link:hover .hero-mini-mascot {
  animation: hero-mini-bob .55s ease-in-out infinite alternate;
}
@keyframes hero-mini-arrive {
  0% {
    opacity: 0;
    transform: translate(8px) scale(.92);
  }
  to {
    opacity: 1;
    transform: translate(0) scale(1);
  }
}
@keyframes hero-mini-bob {
  to {
    transform: translateY(-4px) rotate(-2deg);
  }
}
@media (max-width:760px) {
  .hero-index-meta {
    min-height: 22px;
    padding-right: 2px;
  }
  .hero-trait-zh {
    font-size: 15px;
  }
  .hero-index-rail {
    margin-top: 7px;
  }
  .hero-bottom .hero-archive-link {
    margin-top: 14px;
  }
  .hero-archive-copy strong {
    font-size: 18px;
  }
  .hero-archive-copy small {
    font-size: 9px;
  }
  .hero-archive-visual {
    min-width: 58px;
  }
  .hero-mini-mascot {
    width: 58px;
    height: 58px;
    margin-top: -2px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero-mini-mascot img,
  .hero-archive-link:hover .hero-mini-mascot {
    animation: none;
  }
}
.character-card > p {
  font-size: 12px;
}
@media (max-width:760px) {
  .character-card > p {
    font-size: 11px;
  }
}
:root {
  --type-caption:9px;
  --type-meta:10px;
  --type-small:12px;
}
.site-header nav a {
  font-size: 11px;
}
.language-switcher {
  font-size: 11px;
}
.header-contact {
  font-size: 10px;
}
.hero-main > .eyebrow {
  font-size: 10px;
}
.visual-side,
.visual-caption > span {
  font-size: var(--type-caption);
}
.hero-controls > span {
  font-size: 11px;
}
.hero-index-current {
  font-size: var(--type-caption);
}
.hero-index-segment span {
  font-size: 8px;
}
.hero-archive-copy small {
  font-size: 11px;
}
.hero-foot {
  font-size: var(--type-caption);
}
.filters button {
  font-size: 14px;
}
.filters button small {
  font-size: 11px;
}
.archive-count,
.character-index,
.character-meta,
.character-trait small,
.portrait-label,
.story-facts dt,
.belt-copy .eyebrow {
  font-size: var(--type-caption);
}
.story-facts dd {
  font-size: var(--type-small);
}
.service-image-label {
  font-size: var(--type-caption);
}
.service-topline {
  font-size: var(--type-meta);
}
.service-pagination button {
  font-size: var(--type-small);
}
.scene-image > span {
  font-size: var(--type-caption);
}
.scene-meta {
  font-size: var(--type-meta);
}
.note-row strong,
.note-row p {
  font-size: 13px;
}
.top-link {
  font-size: var(--type-meta);
}
.footer-bottom {
  font-size: var(--type-caption);
}
.dialog-copy dt {
  font-size: var(--type-meta);
}
.dialog-copy dd {
  font-size: var(--type-small);
}
.dialog-copy > a {
  font-size: 11px;
}
.contact-trigger-label small {
  font-size: var(--type-caption);
}
.contact-field i,
.contact-services legend i {
  font-size: 8px;
}
@media (max-width:1100px) {
  .language-switcher {
    font-size: 10px;
  }
}
@media (max-width:760px) {
  :root {
    --type-caption:8px;
    --type-meta:9px;
    --type-small:11px;
  }
  .hero-main > .eyebrow {
    font-size: 9px;
  }
  .visual-side,
  .hero-index-segment span {
    font-size: 8px;
  }
  .hero-archive-copy small {
    font-size: 10px;
  }
  .section-heading h2 span,
  .services-heading h2 span {
    font-size: 14px;
  }
  .section-intro {
    font-size: 12px;
  }
  .filters button {
    font-size: 13px;
  }
  .filters button small {
    font-size: 10px;
  }
  .archive-count,
  .character-index,
  .character-meta,
  .character-trait small {
    font-size: 8px;
  }
  .service-image-label,
  .service-topline,
  .scene-meta {
    font-size: 9px;
  }
  .note-row strong,
  .note-row p {
    font-size: 12px;
  }
  .footer-bottom,
  .contact-trigger-label small {
    font-size: 8px;
  }
  .contact-kicker {
    font-size: 9px;
  }
}
.section-heading h2,
.services-heading h2 {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.section-heading h2 span,
.services-heading h2 span {
  margin-left: 0;
  padding-bottom: 0;
  font-size: 16px;
  line-height: 1.2;
}
@media (max-width:760px) {
  .section-heading h2,
  .services-heading h2 {
    flex-wrap: wrap;
    gap: 15px;
  }
  .section-heading h2 > .fog-title,
  .services-heading h2 > .fog-title {
    flex-wrap: nowrap;
  }
  .section-heading h2 span,
  .services-heading h2 span {
    margin-left: 0;
    padding-bottom: 0;
    font-size: 14px;
  }
}