/* =============================================================================
   site.css — 整站唯一樣式
   layers: tokens → reset → base → components → pages → motion
============================================================================= */

@layer tokens, reset, base, components, pages, motion;

/* ---------- tokens ------------------------------------------------------- */
@layer tokens {
  :root {
    /* color */
    --color-ink: #0f0f10;
    --color-ink-2: #2b2b2e;
    --color-ink-3: #5c5c62;
    --color-paper: #fbfaf7;
    --color-paper-2: #f2efe8;
    --color-paper-3: #e6e1d6;
    --color-brand: #5F0313;
    --color-brand-2: #8b0a1d;
    --color-brand-deep: #2A0109;
    --color-accent: #c29c1e;
    --color-line: rgba(15, 15, 16, 0.12);

    /* font */
    --font-serif: "Noto Serif TC", "Playfair Display", "Songti TC", "PMingLiU", serif;
    --font-sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", sans-serif;

    --fs-hero: clamp(3rem, 7vw, 6rem);
    --fs-display: clamp(2.25rem, 4.5vw, 4rem);
    --fs-h1: clamp(2rem, 3.4vw, 3rem);
    --fs-h2: clamp(1.6rem, 2.6vw, 2.25rem);
    --fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
    --fs-body: clamp(1rem, 1.1vw, 1.125rem);
    --fs-sm: 0.9rem;
    --fs-xs: 0.8rem;
    --lh-tight: 1.08;
    --lh-snug: 1.25;
    --lh-body: 1.7;

    /* space */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* layout */
    --container-max: 1240px;
    --container-pad: clamp(20px, 4vw, 64px);

    /* radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* shadow */
    --shadow-sm: 0 1px 2px rgba(15, 15, 16, 0.06), 0 2px 8px rgba(15, 15, 16, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 15, 16, 0.08), 0 12px 36px rgba(15, 15, 16, 0.08);
    --shadow-lg: 0 10px 30px rgba(15, 15, 16, 0.12), 0 30px 80px rgba(15, 15, 16, 0.14);

    /* motion */
    --dur-fast: 180ms;
    --dur-base: 320ms;
    --dur-slow: 600ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* ---------- reset -------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  html.js-loading, html.js-loading body { overflow: hidden; }
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-ink);
    background: var(--color-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
  }
  img, video, svg { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; }
  input, textarea, select { font: inherit; color: inherit; }
  h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; }
  :focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
    border-radius: 3px;
  }
  [hidden] { display: none !important; }
}

/* ---------- base --------------------------------------------------------- */
@layer base {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }
  .container-wide {
    width: 100%;
    max-width: min(1600px, 92vw);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .section {
    padding-block: clamp(var(--space-8), 12vw, var(--space-10));
    position: relative;
  }
  .section--tight { padding-block: clamp(var(--space-7), 8vw, var(--space-8)); }
  .section--dark { background: var(--color-ink); color: var(--color-paper); }
  .section--brand { background: var(--color-brand); color: var(--color-paper); }
  .section--paper { background: var(--color-paper-2); }
  .section--full { min-height: 100vh; display: grid; align-items: center; }

  .eyebrow {
    font-size: var(--fs-sm);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-brand);
    font-weight: 600;
  }
  .section--dark .eyebrow, .section--brand .eyebrow { color: var(--color-accent); }

  .title-serif { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.02em; }
  .title-sans  { font-family: var(--font-sans);  font-weight: 800; letter-spacing: -0.02em; }

  .lead { font-size: clamp(1.1rem, 1.4vw, 1.375rem); color: var(--color-ink-2); max-width: 62ch; }
  .muted { color: var(--color-ink-3); }

  /* utility-lite */
  .stack > * + * { margin-top: var(--stack, var(--space-5)); }
  .u-center { text-align: center; }
  .u-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}

/* ---------- components --------------------------------------------------- */
@layer components {
  /* ---- buttons ---- */
  .btn {
    --btn-bg: var(--color-ink);
    --btn-fg: var(--color-paper);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 16px 28px;
    min-height: 44px;
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 1;
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
    will-change: transform;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .btn:active { transform: translateY(0); }
  .btn--lg:hover, [data-magnetic]:hover { transform: none; box-shadow: var(--shadow-md); }
  .btn--lg:active, [data-magnetic]:active { transform: none; }
  .btn--brand { --btn-bg: var(--color-brand); }
  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--color-ink);
    border: 1.5px solid var(--color-line);
  }
  .btn--ghost:hover { --btn-bg: var(--color-paper-2); }
  /* 深色 / 品牌紅區塊內的 ghost 按鈕：hover 用半透明白光，避免米白底壓掉白字 */
  .hero .btn--ghost:hover,
  .section--dark .btn--ghost:hover,
  .section--brand .btn--ghost:hover,
  .feature--brand .btn--ghost:hover,
  .home-styles .btn--ghost:hover,
  .home-quotes .btn--ghost:hover,
  .home-cta .btn--ghost:hover,
  .k-length .btn--ghost:hover,
  .site-foot .btn--ghost:hover,
  .photo-divider .btn--ghost:hover { --btn-bg: rgba(251, 250, 247, 0.14); }
  .btn--lg { padding: 18px 36px; font-size: 1.1rem; }
  .btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
  .btn:hover .btn__arrow { transform: translateX(3px); }

  /* ---- icon ---- */
  .icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
  }

  /* ---- scroll progress（transform: scaleX 驅動，GPU path） ---- */
  .scroll-progress {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
    z-index: 1000;
    transform-origin: left center;
    transform: scaleX(0) translateZ(0);
    will-change: transform;
    pointer-events: none;
  }

  /* ---- feature section (pinned opening) ---- */
  .feature {
    position: relative;
    min-height: 220vh;
    background: var(--color-ink);
    color: var(--color-paper);
    overflow: hidden;
  }
  .feature--paper { background: var(--color-paper); color: var(--color-ink); }
  .feature--brand { background: var(--color-brand); color: var(--color-paper); }
  .feature__stage {
    position: sticky; top: 0;
    height: 100vh;
    display: grid; place-items: center;
    padding: 0 var(--container-pad);
    overflow: hidden;
  }
  .feature__inner {
    max-width: var(--container-max);
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    position: relative;
    z-index: 2;
  }
  @media (max-width: 900px) { .feature__inner { grid-template-columns: 1fr; } }
  .feature__bg {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .feature__bg img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.28;
    will-change: transform;
  }
  .feature__eyebrow { color: var(--color-accent); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; font-size: var(--fs-sm); }
  .feature--paper .feature__eyebrow { color: var(--color-brand); }
  .feature__title { font-family: var(--font-serif); font-size: var(--fs-hero); line-height: var(--lh-tight); margin-top: var(--space-4); font-weight: 700; }
  .feature__body { margin-top: var(--space-5); font-size: clamp(1.1rem, 1.4vw, 1.25rem); max-width: 52ch; opacity: 0.86; }
  .feature__art {
    aspect-ratio: 3/4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
  }
  .feature__art img {
    width: 100%; height: 100%; object-fit: cover;
    will-change: transform;
  }

  /* full-bleed photo divider */
  .photo-divider {
    min-height: 100vh;
    background: var(--color-ink);
    position: relative;
    overflow: hidden;
  }
  .photo-divider img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    will-change: transform;
  }
  .photo-divider::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,15,16,0.25), rgba(15,15,16,0.65));
  }
  .photo-divider__text {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    padding: 0 var(--container-pad);
    text-align: center;
    color: var(--color-paper);
    z-index: 2;
  }
  .photo-divider__text h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-hero);
    line-height: 1.1;
    max-width: 18ch;
    font-weight: 600;
  }

  /* ---- nav ---- */
  .site-nav {
    position: fixed; inset: 0 0 auto 0;
    z-index: 100;
    padding: var(--space-3) var(--container-pad);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-5);
    background: rgba(251, 250, 247, 0.72);
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    border-bottom: 1px solid transparent;
    transition: background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                padding var(--dur-base) var(--ease-out);
  }
  .site-nav.is-scrolled {
    background: rgba(251, 250, 247, 0.88);
    border-bottom-color: var(--color-line);
    padding-block: var(--space-2);
  }
  .site-nav__logo { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: 0.02em; color: var(--color-ink); }
  .site-nav__logo img {
    height: 32px; width: auto;
    /* logo 原始為淺色；nav 背景是米白，所以反色成深色才看得見 */
    filter: brightness(0) saturate(1);
    transition: filter var(--dur-base) var(--ease-out);
  }
  .site-nav__links {
    display: flex; align-items: center; gap: var(--space-5);
  }
  .site-nav__links a {
    font-size: 0.95rem; font-weight: 500; color: var(--color-ink-2);
    transition: color var(--dur-fast) var(--ease-out);
    position: relative;
  }
  .site-nav__links a:hover { color: var(--color-ink); }
  .site-nav__links a[aria-current="page"] { color: var(--color-brand); }
  .site-nav__actions { display: flex; align-items: center; gap: var(--space-3); }
  .site-nav__lang {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 600;
    padding: 6px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: transparent; color: inherit; cursor: pointer;
    font-family: inherit;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .site-nav__lang:hover { background: var(--color-paper-2); }

  /* 語言切換：下拉 */
  .lang-switch { position: relative; }
  .lang-switch__menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 140px; padding: 6px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    list-style: none; margin: 0; z-index: 300;
  }
  .lang-switch__menu li { margin: 0; }
  .lang-switch__menu button {
    display: block; width: 100%;
    padding: 8px 12px; border: 0; background: transparent;
    color: var(--color-ink); font-size: 0.9rem; font-family: inherit;
    text-align: left; cursor: pointer; border-radius: var(--radius-sm);
  }
  .lang-switch__menu button:hover,
  .lang-switch__menu button[aria-current="true"] {
    background: var(--color-paper-2);
    color: var(--color-brand);
  }
  .site-nav__burger {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-line);
  }
  .site-nav__burger span {
    display: block; width: 18px; height: 2px; background: currentColor;
    position: relative;
  }
  .site-nav__burger span::before, .site-nav__burger span::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  }
  .site-nav__burger span::before { top: -6px; }
  .site-nav__burger span::after  { top:  6px; }

  @media (max-width: 1023px) {
    .site-nav__links { display: none; }
    .site-nav .lang-switch { display: none; }
    .site-nav__burger { display: inline-flex; }
  }

  .site-main { padding-top: 72px; }

  /* ---- drawer ---- */
  .drawer {
    position: fixed; inset: 0;
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
  }
  .drawer[aria-hidden="false"] { visibility: visible; pointer-events: auto; }
  .drawer__scrim {
    position: absolute; inset: 0;
    background: rgba(15, 15, 16, 0.42);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .drawer[aria-hidden="false"] .drawer__scrim { opacity: 1; }
  .drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(92vw, 420px);
    background: var(--color-paper);
    padding: var(--space-5) var(--space-6) var(--space-7);
    display: flex; flex-direction: column; gap: var(--space-5);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    overflow-y: auto;
  }
  .drawer[aria-hidden="false"] .drawer__panel { transform: translateX(0); }
  .drawer__close { align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-line); display: inline-flex; align-items: center; justify-content: center; }
  .drawer__close:hover { background: var(--color-paper-2); }
  .drawer__nav a {
    display: block;
    padding: var(--space-3) 0;
    font-size: 1.25rem; font-weight: 600;
    border-bottom: 1px solid var(--color-line);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .drawer__nav a:hover { color: var(--color-brand); }

  /* ---- dialog / lightbox ---- */
  dialog.modal, .modal {
    border: 0;
    padding: 0;
    background: transparent;
    width: min(92vw, 1200px);
    max-width: min(92vw, 1200px);
    max-height: 90vh;
    overflow: visible;
    color: var(--color-paper);
    /* 置中修正：避免部分瀏覽器/情境停在 (0,0) */
    position: fixed;
    inset: 0;
    margin: auto;
  }
  dialog.modal::backdrop, .modal::backdrop { background: rgba(10, 10, 12, 0.85); }
  /* fallback：當非原生 <dialog> 走 display:block 時也置中 */
  .modal:not(dialog) {
    top: 50%;
    left: 50%;
    inset: auto;
    transform: translate(-50%, -50%);
    z-index: 9800;
  }
  .modal__close {
    position: absolute; top: -48px; right: 0;
    width: 40px; height: 40px; color: var(--color-paper);
    border-radius: 50%; background: rgba(255,255,255,0.12);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .modal__close:hover { background: rgba(255,255,255,0.22); }
  .modal__body { background: #000; border-radius: var(--radius-md); overflow: hidden; }
  .modal__body img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; display: block; }
  .modal__caption { padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); color: rgba(255,255,255,0.78); text-align: center; }

  /* ---- card ---- */
  .card {
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .card__eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); font-weight: 700; margin-bottom: var(--space-3); }
  .card__title { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
  .card__body { color: var(--color-ink-2); line-height: var(--lh-body); }
  .card__img { border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); aspect-ratio: 4/5; background: var(--color-paper-2); }
  .card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .card:hover .card__img img { transform: scale(1.04); }

  /* ---- field ---- */
  .field { display: flex; flex-direction: column; gap: var(--space-2); }
  .field__label { font-weight: 600; font-size: var(--fs-sm); color: var(--color-ink-2); }
  .field__input, .field__textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-line);
    background: var(--color-paper);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .field__input:focus, .field__textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 4px rgba(95, 3, 19, 0.12);
  }
  .field__textarea { min-height: 140px; resize: vertical; }
  .field__error { color: var(--color-brand); font-size: var(--fs-sm); }

  /* ---- footer ---- */
  .site-foot {
    padding: var(--space-8) var(--container-pad);
    background: var(--color-brand);
    color: var(--color-paper);
    display: grid;
    gap: var(--space-5);
    border-top: 1px solid rgba(251, 250, 247, 0.14);
  }
  .site-foot__row { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; align-items: center; max-width: var(--container-max); margin-inline: auto; width: 100%; }
  .site-foot a { color: rgba(251, 250, 247, 0.72); transition: color var(--dur-fast) var(--ease-out); }
  .site-foot a:hover { color: var(--color-paper); }

  /* ---- hero (shared) ---- */
  .hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding: var(--space-9) 0 var(--space-8);
    overflow: hidden;
  }
  .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
  .hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 15, 16, 0.12) 0%, rgba(15, 15, 16, 0.55) 60%, rgba(15, 15, 16, 0.85) 100%);
  }
  .hero__inner { position: relative; z-index: 2; max-width: var(--container-max); margin-inline: auto; padding: 0 var(--container-pad); color: var(--color-paper); }
  .hero__eyebrow { color: var(--color-accent); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; font-size: var(--fs-sm); margin-bottom: var(--space-4); }
  .hero__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-hero); line-height: var(--lh-tight); max-width: 18ch; }
  .hero__title .char { display: inline-block; will-change: transform, opacity; }
  .hero__lead { margin-top: var(--space-5); font-size: clamp(1.1rem, 1.4vw, 1.375rem); max-width: 56ch; color: rgba(251, 250, 247, 0.84); }
  .hero__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .hero__scroll-hint {
    position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
    color: rgba(251,250,247,0.7); font-size: var(--fs-xs); letter-spacing: 0.3em; text-transform: uppercase;
    display: flex; align-items: center; flex-direction: column; gap: var(--space-2);
  }
  .hero__scroll-hint::after {
    content: ""; width: 1px; height: 42px;
    background: linear-gradient(180deg, rgba(255,255,255,0.7), transparent);
    animation: hintSlide 2.2s var(--ease-in-out) infinite;
  }
  @keyframes hintSlide { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }
}

/* ---------- pages -------------------------------------------------------- */
@layer pages {
  /* ===== home ===== */
  .home-culture {
    position: relative;
    min-height: 220vh;
  }
  .home-culture__pin {
    height: 100vh; display: grid; place-items: center;
    padding: var(--space-8) 0;
  }
  .home-culture__inner {
    max-width: var(--container-max);
    width: 100%;
    margin-inline: auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
  }
  @media (max-width: 900px) { .home-culture__inner { grid-template-columns: 1fr; } }
  .home-culture__text h2 { font-family: var(--font-serif); font-size: var(--fs-display); line-height: var(--lh-tight); margin-bottom: var(--space-5); }
  .home-culture__figure {
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .home-culture__figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); will-change: transform; }

  /* styles horizontal scroll */
  .home-styles {
    position: relative;
    padding: var(--space-9) 0;
    background: var(--color-brand);
    color: var(--color-paper);
    overflow: hidden;
  }
  .home-styles__intro {
    max-width: var(--container-max);
    margin: 0 auto var(--space-7);
    padding: 0 var(--container-pad);
  }
  .home-styles__intro h2 { font-family: var(--font-serif); font-size: var(--fs-display); max-width: 18ch; }
  .home-styles__track {
    display: flex; gap: var(--space-6);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    will-change: transform;
  }
  .home-styles__card {
    flex: 0 0 clamp(260px, 24vw, 400px);
    background: var(--color-brand-deep);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }
  .home-styles__card .card__img {
    aspect-ratio: 1/1;
    background: var(--color-brand-deep);
    border-radius: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
  }
  .home-styles__card .card__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;
    padding: 0;
    background: transparent;
    display: block;
    transition: transform var(--dur-slow) var(--ease-out);
    filter: saturate(1.02) contrast(1.02);
  }
  .home-styles__card:hover .card__img img { transform: scale(1.04); }
  /* 上下兩端壓暗，讓白底商品圖與深色卡片平滑融合 */
  .home-styles__card .card__img::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg,
        rgba(42, 1, 9, 0.38) 0%,
        rgba(42, 1, 9, 0) 22%,
        rgba(42, 1, 9, 0) 62%,
        rgba(42, 1, 9, 0.70) 100%);
    pointer-events: none;
  }
  .home-styles__card .card__body {
    padding: var(--space-5);
    color: rgba(251, 250, 247, 0.78);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .home-styles__card h3 { color: var(--color-paper); margin-bottom: 0; font-size: 1.25rem; }
  .home-styles__card .card__body p { font-size: 0.95rem; line-height: 1.65; }
  @media (max-width: 1023px) {
    .home-styles__track { flex-direction: column; padding-inline: var(--container-pad); }
    .home-styles__card { flex: 1 1 auto; width: 100%; min-height: auto; }
    .home-styles__card .card__img { aspect-ratio: 4/3; }
  }

  /* interview */
  .home-interview { padding-block: var(--space-10); }
  .home-interview__inner { max-width: 980px; margin: 0 auto; padding: 0 var(--container-pad); }
  .home-interview__quote {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.45;
    font-weight: 500;
  }
  .home-interview__quote .word { display: inline-block; }
  .home-interview__attr { margin-top: var(--space-6); color: var(--color-ink-3); }

  /* sdgs counters */
  .home-stats { background: var(--color-paper-2); }
  .home-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
  @media (max-width: 900px) { .home-stats__grid { grid-template-columns: repeat(2, 1fr); } }
  .home-stats__item { text-align: center; }
  .home-stats__num { font-family: var(--font-serif); font-size: clamp(3rem, 6vw, 5rem); font-weight: 700; color: var(--color-brand); line-height: 1; display: inline-flex; align-items: baseline; gap: 4px; }
  .home-stats__label { margin-top: var(--space-3); color: var(--color-ink-3); font-size: var(--fs-sm); letter-spacing: 0.16em; text-transform: uppercase; }

  /* quote stack */
  .home-quotes { background: var(--color-brand); color: var(--color-paper); padding-block: clamp(var(--space-7), 7vw, var(--space-8)); }
  .home-quotes__grid {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
  }
  .home-quotes blockquote {
    font-family: var(--font-serif);
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.55;
    padding: var(--space-3) var(--space-4);
    border-left: 2px solid var(--color-accent);
  }
  .home-quotes cite { display: block; margin-top: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-xs); color: rgba(251, 250, 247, 0.58); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; }

  /* final cta */
  .home-cta { background: var(--color-ink); color: var(--color-paper); text-align: center; padding-block: clamp(var(--space-8), 12vw, 180px); }
  .home-cta__logo { width: 120px; margin: 0 auto var(--space-5); opacity: 0.92; }
  .home-cta h2 { font-family: var(--font-serif); font-size: var(--fs-hero); line-height: 1.05; margin-bottom: var(--space-5); }
  .home-cta p { color: rgba(251, 250, 247, 0.8); max-width: 48ch; margin: 0 auto var(--space-6); }
  .home-cta .btn--brand { --btn-bg: var(--color-paper); --btn-fg: var(--color-brand); }

  /* ===== knowledge ===== */
  .k-collars-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
  @media (max-width: 1024px) { .k-collars-main { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
  @media (max-width: 768px) { .k-collars-main { grid-template-columns: 1fr; gap: var(--space-4); } }
  .k-collars-main .card { padding: 0; overflow: hidden; background: var(--color-paper); }
  .k-collars-main .card > :not(.card__img) { padding-inline: var(--space-6); }
  .k-collars-main .card > .card__eyebrow { padding-top: var(--space-6); }
  .k-collars-main .card > :last-child { padding-bottom: var(--space-6); }
  .k-collars-main .card__img {
    aspect-ratio: 4/3;
    background: var(--color-paper-2);
    margin: 0 0 var(--space-5);
    border-radius: 0;
    padding: 0;
  }
  .k-collars-main .card__img img { width: 100%; height: 100%; object-fit: cover; }

  .k-collars-sub {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: var(--space-5);
    max-width: var(--container-max);
    margin: var(--space-8) auto 0;
    padding: 0 var(--container-pad);
    align-items: center;
  }
  @media (max-width: 1024px) { .k-collars-sub { grid-template-columns: 1fr; gap: var(--space-6); } }
  .k-collars-sub__col { display: grid; gap: var(--space-4); }
  .k-collars-sub__figure {
    aspect-ratio: 6/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: zoom-in;
    background: #eaeee0;
    display: grid; place-items: center;
  }
  .k-collars-sub__figure img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease-out); }
  .k-collars-sub__figure:hover img { transform: scale(1.02); }
  .k-mini-card {
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .k-mini-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .k-mini-card h4 { color: var(--color-brand); margin-bottom: var(--space-2); font-size: 1.1rem; }

  .k-length {
    position: relative;
    min-height: 300vh;
    background: var(--color-brand);
    color: var(--color-paper);
  }
  .k-length__pin {
    height: 100vh;
    display: grid;
    align-items: center;
    padding: 0 var(--container-pad);
  }
  .k-length__stage {
    max-width: var(--container-max);
    margin-inline: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
  }
  @media (max-width: 1024px) { .k-length__stage { grid-template-columns: 1fr; gap: var(--space-5); } }
  .k-length__step {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .k-length__step.is-active { opacity: 1; pointer-events: auto; }
  .k-length__num { font-family: var(--font-serif); font-size: clamp(4rem, 10vw, 9rem); color: var(--color-accent); opacity: 0.32; line-height: 1; }
  .k-length__label { font-family: var(--font-serif); font-size: var(--fs-display); margin-top: var(--space-3); }
  .k-length__body { color: rgba(251, 250, 247, 0.76); margin-top: var(--space-4); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 54ch; }
  .k-length__progress { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
  .k-length__dot { width: 28px; height: 3px; background: rgba(251,250,247,0.2); transition: background var(--dur-base) var(--ease-out); }
  .k-length__dot.is-active { background: var(--color-accent); }

  .k-members { background: var(--color-paper-2); }
  .k-members__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
  .k-member {
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .k-member:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .k-member__mono { font-family: var(--font-serif); font-weight: 700; color: #152e44; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; display: inline-flex; align-items: baseline; gap: 4px; }
  .k-member__heart { font-size: 0.5em; color: var(--color-brand); transform: translateY(-0.1em); }
  .k-member__role { margin-top: var(--space-4); font-size: 1.1rem; font-weight: 600; color: var(--color-brand); }
  .k-member__desc { margin-top: var(--space-3); color: var(--color-ink-3); font-size: var(--fs-sm); line-height: var(--lh-body); }

  /* ===== gallery · 採訪花絮（圖文交錯）===== */
  .scenes__list {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    gap: clamp(var(--space-7), 6vw, var(--space-9));
  }
  .scene-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-5), 4vw, var(--space-8));
    align-items: center;
    margin: 0;
  }
  .scene-row--reverse { direction: rtl; }
  .scene-row--reverse > * { direction: ltr; }
  .scene-row__img {
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: zoom-in;
    background: var(--color-paper-2);
  }
  .scene-row__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .scene-row__img:hover img { transform: scale(1.03); }
  .scene-row__text p {
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1.25vw, 1.25rem);
    line-height: 1.8;
    color: var(--color-ink-2);
    max-width: 42ch;
  }
  @media (max-width: 768px) {
    .scene-row, .scene-row--reverse { grid-template-columns: 1fr; direction: ltr; }
    .scene-row__text p { max-width: none; }
  }

  /* ===== gallery · 採訪花絮（橫向敘事）===== */
  .scenes-horizontal {
    position: relative;
    overflow: hidden;
    height: 100vh;
    min-height: 640px;
    display: flex;
    align-items: center;
  }
  .scenes-horizontal__track {
    display: flex;
    align-items: stretch;
    gap: clamp(var(--space-8), 10vw, var(--space-10));
    padding: 0 clamp(var(--space-7), 12vw, var(--space-10));
    height: 100%;
    will-change: transform;
  }
  .scene-panel {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 44ch);
    gap: clamp(var(--space-6), 6vw, var(--space-9));
    align-items: center;
    margin: 0;
    height: 100%;
  }
  .scene-panel__img {
    position: relative;
    height: min(78vh, 760px);
    max-width: min(70vw, 900px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    cursor: zoom-in;
    background: var(--color-paper-2);
    will-change: transform;
    flex-shrink: 0;
    align-self: center;
  }
  .scene-panel__img img {
    display: block;
    width: auto;
    height: 100%;
    max-width: min(70vw, 900px);
    object-fit: cover;
    will-change: transform;
  }
  .scene-panel__text p {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.45vw, 1.5rem);
    line-height: 1.95;
    color: var(--color-ink-2);
    max-width: 44ch;
    margin: 0;
  }
  @media (max-width: 1024px) {
    .scene-panel__img { height: min(72vh, 620px); max-width: 64vw; }
    .scene-panel__img img { max-width: 64vw; }
    .scene-panel__text p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
  }
  @media (max-width: 768px) {
    .scenes-horizontal {
      height: auto;
      min-height: 0;
      overflow: visible;
      display: block;
      padding: var(--space-6) 0;
    }
    .scenes-horizontal__track {
      flex-direction: column;
      align-items: stretch;
      gap: clamp(var(--space-6), 8vw, var(--space-9));
      padding: 0 var(--container-pad);
      height: auto;
      transform: none !important;
    }
    .scene-panel {
      grid-template-columns: 1fr;
      gap: var(--space-4);
      height: auto;
    }
    .scene-panel__img {
      width: 100%;
      height: auto;
      max-height: 72vh;
      max-width: 100%;
    }
    .scene-panel__img img {
      width: 100%;
      height: auto;
      max-width: 100%;
    }
  }

  /* ===== gallery · 師傅製作過程影片 ===== */
  .process__grid {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
  }
  .video-card {
    margin: 0;
    display: grid;
    gap: var(--space-3);
    background: rgba(251, 250, 247, 0.04);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(251, 250, 247, 0.08);
  }
  .video-card video {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: var(--radius-md);
    background: #000;
    box-shadow: var(--shadow-lg);
    object-fit: cover;
  }
  .video-card figcaption {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--space-2) var(--space-3) var(--space-3);
    color: var(--color-paper);
  }
  .video-card figcaption strong {
    font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600;
  }
  .video-card figcaption span {
    font-size: var(--fs-xs); letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--color-accent);
  }

  /* ===== gallery ===== */
  .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
  .gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4/5;
    background: var(--color-paper-2);
  }
  .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .gallery-item:hover img { transform: scale(1.05); }

  /* --- pieces: 實景 vs 商品 分組 --- */
  .pieces-live {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .pieces-live__cell {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: zoom-in;
    background: var(--color-ink);
  }
  .pieces-live__cell img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: filter var(--dur-slow) var(--ease-out);
  }
  .pieces-live__cell:hover img { filter: brightness(1.08) saturate(1.08); }
  .pieces-live__cell figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--space-5);
    color: var(--color-paper);
    background: linear-gradient(180deg, transparent, rgba(15,15,16,0.78));
  }
  .pieces-live__cell figcaption strong { display: block; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; }
  .pieces-live__cell figcaption span { display: block; font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-top: 4px; }
  @media (max-width: 768px) { .pieces-live { grid-template-columns: 1fr; gap: var(--space-3); } }

  .pieces-studio {
    max-width: var(--container-max);
    margin: var(--space-6) auto 0;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .pieces-studio__cell {
    aspect-ratio: 4/5;
    display: grid; place-items: center;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(194,156,30,0.10), transparent 60%),
      linear-gradient(180deg, var(--color-paper), var(--color-paper-2));
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: inset 0 0 0 1px var(--color-line);
  }
  .pieces-studio__cell img {
    max-width: 86%; max-height: 86%;
    width: auto; height: auto;
    object-fit: contain;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .pieces-studio__cell:hover img { transform: scale(1.03); }
  @media (max-width: 768px) { .pieces-studio { grid-template-columns: 1fr; gap: var(--space-3); } }

  .pieces-thread {
    max-width: var(--container-max);
    margin: var(--space-6) auto 0;
    padding: 0 var(--container-pad);
  }
  .pieces-thread__cell {
    position: relative;
    aspect-ratio: 3 / 1.6;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: zoom-in;
    background: var(--color-ink);
  }
  .pieces-thread__cell img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: filter var(--dur-slow) var(--ease-out);
  }
  .pieces-thread__cell:hover img { filter: brightness(1.08) saturate(1.08); }
  .pieces-thread__cell figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--space-5);
    color: var(--color-paper);
    background: linear-gradient(180deg, transparent, rgba(15,15,16,0.78));
  }
  .pieces-thread__cell figcaption strong { display: block; font-family: var(--font-serif); font-size: 1.15rem; }
  .pieces-thread__cell figcaption span { display: block; font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-top: 4px; }

  .pieces-divider {
    text-align: center;
    max-width: var(--container-max);
    margin: var(--space-7) auto var(--space-5);
    padding: 0 var(--container-pad);
    font-family: var(--font-serif);
    font-size: var(--fs-sm);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-ink-3);
    display: flex; align-items: center; gap: var(--space-4);
  }
  .pieces-divider::before, .pieces-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--color-line);
  }

  /* --- studio mosaic: 工作室現場 --- */
  .gallery-mosaic {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-auto-rows: 220px;
    gap: var(--space-4);
  }
  .gallery-mosaic__cell {
    position: relative; overflow: hidden;
    border-radius: var(--radius-md);
    cursor: zoom-in;
    background: var(--color-paper-2);
  }
  .gallery-mosaic__cell img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--dur-slow) var(--ease-out); }
  .gallery-mosaic__cell:hover img { filter: brightness(1.08) saturate(1.08); }
  .gallery-mosaic__cell--hero { grid-row: span 2; grid-column: span 1; }
  .gallery-mosaic__cell--wide { grid-column: span 2; }
  @media (max-width: 900px) {
    .gallery-mosaic { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .gallery-mosaic__cell--hero,
    .gallery-mosaic__cell--wide { grid-column: auto; grid-row: auto; }
  }

  /* --- game chapter: 海報（16:9）在上 + 文字置中 --- */
  .game-chapter {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    gap: var(--space-7);
  }
  .game-chapter__poster {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    cursor: zoom-in;
  }
  .game-chapter__poster img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .game-chapter__poster:hover img { transform: scale(1.02); }
  .game-chapter__text {
    max-width: 64ch;
    margin: 0 auto;
    text-align: center;
  }
  .game-chapter__text h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    margin-block: var(--space-4);
  }
  .game-chapter__text .lead { margin: 0 auto; }

  /* ===== turn / game / contact simple styles ===== */
  /* ===== turn: 翻頁故事 ===== */
  .turn-timeline {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
  }
  .turn-timeline__list {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: var(--space-5);
    position: relative;
  }
  .turn-timeline__list::before {
    content: "";
    position: absolute;
    left: 23px;
    top: var(--space-7);
    bottom: var(--space-7);
    width: 2px;
    background: linear-gradient(180deg, var(--color-accent), var(--color-brand));
  }
  .turn-timeline__dot {
    grid-column: 1;
    display: flex;
    justify-content: center;
    padding-top: calc(var(--space-5) + 6px);
  }
  .turn-timeline__dot::before {
    content: "";
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--color-paper);
    border: 2px solid var(--color-brand);
    box-shadow: 0 0 0 4px var(--color-paper), 0 0 0 5px rgba(194,156,30,0.35);
    position: relative;
    z-index: 1;
  }
  .turn-timeline__content {
    grid-column: 2;
    padding: var(--space-5) 0 var(--space-6);
  }
  .turn-timeline__eyebrow {
    font-size: var(--fs-xs);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 700;
  }
  .turn-timeline__title {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 600;
    margin: var(--space-2) 0 var(--space-3);
    color: var(--color-ink);
  }
  .turn-timeline__body { color: var(--color-ink-2); line-height: var(--lh-body); max-width: 56ch; }
  .turn-timeline__link {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: var(--space-4);
    color: var(--color-brand); font-weight: 600;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .turn-timeline__link:hover { color: var(--color-accent); }

  /* 工作室 full-bleed map */
  .turn-studio {
    position: relative;
    min-height: 560px;
    overflow: hidden;
  }
  .turn-studio__map {
    position: absolute; inset: 0;
    filter: grayscale(0.2) saturate(0.9);
  }
  .turn-studio__map iframe { width: 100%; height: 100%; border: 0; display: block; }
  .turn-studio__overlay {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: start;
    padding: var(--space-8) var(--container-pad);
    pointer-events: none;
  }
  .turn-studio__card {
    background: rgba(251,250,247,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 380px;
    pointer-events: auto;
  }
  .turn-studio__card .eyebrow { color: var(--color-brand); }
  .turn-studio__card h2 { font-family: var(--font-serif); font-size: var(--fs-h2); margin: var(--space-3) 0; }
  .turn-studio__card p { color: var(--color-ink-2); }

  .game-stage { padding: var(--space-8) 0 var(--space-10); text-align: center; }
  .game-stage .game-embed, .game-stage iframe, .game-stage object {
    width: min(100%, 1000px); aspect-ratio: 16/10;
    margin: var(--space-6) auto 0; border: 0;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--color-ink);
  }
  .game-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }

  .contact-form { max-width: 620px; margin: 0 auto; padding: 0 var(--container-pad); display: grid; gap: var(--space-5); }
  .contact-success {
    text-align: center; max-width: 620px; margin: 0 auto;
    padding: var(--space-8);
    background: var(--color-paper-2);
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .contact-success.is-visible { opacity: 1; }

  /* products: digital entries (immersive brand) */
  .digital-section {
    position: relative;
    overflow: hidden;
  }
  .section--brand .silk-decor { color: var(--color-accent); }
  .digital-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    position: relative;
    z-index: 1;
  }
  @media (min-width: 860px) {
    .digital-grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  }
  .digital-entry {
    --accent: var(--color-paper);
    display: flex; flex-direction: column;
    gap: var(--space-3);
    padding-left: var(--space-5);
    border-left: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  }
  .digital-entry--line { --accent: #06C755; }
  .digital-entry--ar { --accent: var(--color-accent); }
  .digital-entry__head {
    display: flex; align-items: center; gap: var(--space-3);
  }
  .digital-entry__icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    flex-shrink: 0;
  }
  .digital-entry__icon svg { width: 22px; height: 22px; }
  .digital-entry__eyebrow {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.24em;
    color: var(--accent); font-weight: 700;
  }
  .digital-entry__title {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    margin-top: 2px;
    line-height: var(--lh-snug);
    color: var(--color-paper);
  }
  .digital-entry__desc {
    color: rgba(251, 250, 247, 0.74);
    line-height: var(--lh-body);
    max-width: 42ch;
  }
  .digital-entry__qr-row {
    display: flex; align-items: center; gap: var(--space-5);
    margin-top: var(--space-3);
    flex-wrap: wrap;
  }
  .digital-entry__qr {
    display: block;
    padding: var(--space-3);
    background: var(--color-paper);
    border-radius: var(--radius-md);
    line-height: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    flex-shrink: 0;
  }
  .digital-entry__qr:hover, .digital-entry__qr:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 40%, transparent);
    outline: none;
  }
  .digital-entry__qr img { width: 144px; height: 144px; display: block; }
  .digital-entry__qr-meta {
    display: flex; flex-direction: column; gap: var(--space-3);
    align-items: flex-start;
  }
  .digital-entry__hint {
    font-size: var(--fs-sm); color: rgba(251, 250, 247, 0.55);
    line-height: var(--lh-snug);
  }
  .digital-entry__cta {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--accent);
    color: var(--color-ink);
    border-radius: var(--radius-pill);
    font-weight: 600; text-decoration: none; font-size: var(--fs-sm);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .digital-entry--line .digital-entry__cta { color: #fff; }
  .digital-entry__cta:hover { opacity: 0.9; transform: translateY(-1px); }
  .digital-entry__marker {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(251, 250, 247, 0.14);
  }
  .digital-entry__marker__eyebrow {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--color-accent); font-weight: 700;
  }
  .digital-entry__marker__help {
    font-size: var(--fs-sm); color: rgba(251, 250, 247, 0.7);
    margin-top: var(--space-2); line-height: var(--lh-body);
  }
  .digital-entry__marker__img {
    display: block; width: 100%; max-width: 240px;
    margin-top: var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
  }
  .digital-entry__note {
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    color: rgba(251, 250, 247, 0.5);
    line-height: var(--lh-snug);
    font-style: italic;
  }

  /* merch grid */
  .merch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
  }
  @media (min-width: 640px) {
    .merch-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px) {
    .merch-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  }
  .merch-card {
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .merch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .merch-card__img {
    aspect-ratio: 4/3;
    background: var(--color-paper-2);
    overflow: hidden;
    cursor: zoom-in;
  }
  .merch-card__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .merch-card:hover .merch-card__img img { transform: scale(1.05); }
  .merch-card__body {
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2);
    flex: 1;
  }
  .merch-card__eyebrow {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--color-brand); font-weight: 700;
  }
  .merch-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
  }
  .merch-card__desc {
    color: var(--color-ink-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    flex: 1;
  }
  .merch-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
  }
  .merch-card__price {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-brand);
    letter-spacing: 0.02em;
  }
  .merch-card__cta {
    display: inline-flex; align-items: center;
    padding: 8px 14px;
    background: var(--color-brand);
    color: var(--color-paper);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    white-space: nowrap;
  }
  .merch-card__cta:hover {
    background: var(--color-brand-2);
    transform: translateY(-1px);
  }
  .merch-card__cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* merch bundle highlight */
  .merch-bundle {
    max-width: var(--container-max);
    margin: var(--space-7) auto 0;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
  }
  .merch-bundle__media,
  .merch-bundle__body {
    background: linear-gradient(135deg, var(--color-brand-deep) 0%, var(--color-brand) 100%);
    color: var(--color-paper);
  }
  .merch-bundle__media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    cursor: zoom-in;
  }
  .merch-bundle__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .merch-bundle:hover .merch-bundle__media img { transform: scale(1.04); }
  .merch-bundle__savings {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    background: var(--color-accent);
    color: var(--color-brand-deep);
    font-weight: 700;
    font-size: var(--fs-sm);
    padding: 6px 14px;
    border-radius: var(--radius-pill, 999px);
    box-shadow: var(--shadow-md);
    letter-spacing: 0.04em;
  }
  .merch-bundle__body {
    padding: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-3);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .merch-bundle__eyebrow {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.24em;
    color: var(--color-accent); font-weight: 700;
  }
  .merch-bundle__title {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
  }
  .merch-bundle__desc {
    color: rgba(251, 250, 247, 0.82);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    flex: 1;
  }
  .merch-bundle__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(251, 250, 247, 0.18);
    flex-wrap: wrap;
  }
  .merch-bundle__price {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 700;
    color: var(--color-paper);
    letter-spacing: 0.02em;
  }
  .merch-bundle__cta {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 12px 22px;
    background: var(--color-accent);
    color: var(--color-brand-deep);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--fs-body);
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .merch-bundle__cta .icon {
    width: 1em; height: 1em;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .merch-bundle__cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  .merch-bundle__cta:hover .icon { transform: translateX(3px); }
  .merch-bundle__cta:focus-visible {
    outline: 2px solid var(--color-paper);
    outline-offset: 3px;
  }
  @media (min-width: 768px) {
    .merch-bundle {
      grid-template-columns: 5fr 6fr;
    }
    .merch-bundle__media {
      aspect-ratio: auto;
      border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    }
    .merch-bundle__body {
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }
  }
}

/* ---------- motion ------------------------------------------------------- */
@layer motion {
  html.js-loading [data-reveal] { opacity: 0; }
  [data-reveal] { will-change: transform, opacity; }
  html:not(.js-ready) .hero__title .char { opacity: 0; transform: translateY(28px); }

  /* ===== silk cursor ===== */
  .silk-cursor {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 260ms var(--ease-out);
    will-change: transform;
    contain: layout style;
  }
  .silk-cursor.is-ready { opacity: 1; }
  .silk-cursor--dot {
    width: 6px; height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .silk-cursor--ring {
    width: 32px; height: 32px;
    border: 1.5px solid rgba(194, 156, 30, 0.55);
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition: transform 220ms var(--ease-spring),
                border-color 220ms var(--ease-out),
                background 220ms var(--ease-out);
  }
  .silk-cursor--ring.is-active {
    transform: translate3d(-50%, -50%, 0) scale(1.8);
    border-color: rgba(194, 156, 30, 0.95);
    background: rgba(194, 156, 30, 0.12);
  }
  /* 有絲綢游標時，隱藏原生游標（避免對所有子元素用 universal 選擇器） */
  html.silk-cursor-on body { cursor: none; }
  html.silk-cursor-on a,
  html.silk-cursor-on button,
  html.silk-cursor-on [role="button"] { cursor: none; }

  /* ===== hero silk intro curtain ===== */
  .hero__silk {
    position: absolute; inset: 0;
    z-index: 3;
    pointer-events: none;
    display: flex;
    overflow: hidden;
  }
  .hero__silk-panel {
    flex: 1;
    background:
      linear-gradient(180deg, rgba(95, 3, 19, 0.98), rgba(31, 3, 10, 1)),
      linear-gradient(90deg, rgba(194,156,30,0.05), transparent 50%);
    background-blend-mode: overlay;
    position: relative;
  }
  .hero__silk-panel::after {
    content: "";
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(90deg,
        rgba(255,255,255,0.02) 0 2px,
        transparent 2px 4px);
    pointer-events: none;
  }

  /* ===== floating petals ===== */
  .petals {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    contain: strict;
  }
  .petal {
    position: absolute;
    background: radial-gradient(ellipse at 30% 30%,
      hsla(var(--hue, 10), 70%, 85%, var(--alpha, 0.6)) 0%,
      hsla(var(--hue, 10), 60%, 60%, calc(var(--alpha, 0.6) * 0.5)) 55%,
      transparent 75%);
    border-radius: 60% 40% 55% 45% / 55% 45% 55% 45%;
    will-change: transform;
    transform: translateZ(0);
  }

  /* ===== tilt gloss ===== */
  .tilt-gloss {
    position: absolute; inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, 0.14), transparent 50%);
    opacity: 0;
    transition: opacity 260ms var(--ease-out);
    z-index: 3;
  }
  .home-styles__card {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    contain: layout paint;
  }

  /* ===== mask reveal（用 transform 動遮罩層，GPU path） ===== */
  [data-mask-reveal] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  [data-mask-reveal] img {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .mask-veil {
    position: absolute;
    inset: 0;
    background: var(--color-paper);
    z-index: 2;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .section--dark .mask-veil,
  .home-cta .mask-veil { background: var(--color-ink); }
  .home-styles .mask-veil,
  .k-length .mask-veil,
  .home-quotes .mask-veil,
  .site-foot .mask-veil { background: var(--color-brand); }

  /* ===== silk decor SVG ===== */
  .silk-decor {
    display: block;
    width: 180px;
    max-width: 40%;
    height: 40px;
    margin: var(--space-5) 0 0;
    color: var(--color-accent);
    opacity: 0.85;
    pointer-events: none;
  }
  .section--dark .silk-decor, .home-interview .silk-decor { color: var(--color-brand); }
  .home-culture__text .silk-decor { margin-top: var(--space-6); }
  /* 置中版本：用於 SDGs 標題下與 CTA 末端的線條勾勒 */
  .home-stats > .container .silk-decor,
  .home-cta .silk-decor,
  [data-silk-center] .silk-decor { margin-left: auto; margin-right: auto; }

  /* ===== quotes marquee ===== */
  .home-quotes__marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .home-quotes__track {
    display: inline-flex;
    gap: var(--space-6);
    padding: 0 var(--container-pad);
    will-change: transform;
    white-space: normal;
  }
  .home-quotes__track > blockquote {
    flex: 0 0 min(420px, 80vw);
    margin: 0;
  }

  /* ===== rolling counter ===== */
  .roll-counter {
    display: inline-flex;
    align-items: baseline;
    overflow: hidden;
    height: 1em;
    line-height: 1;
  }
  .roll-counter__col {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(0);
    will-change: transform;
  }
  .roll-counter__digit {
    display: block;
    line-height: 1;
  }

  /* cross-document view transitions（Chrome/Edge 已支援；Safari/Firefox 無此效果但不影響導覽） */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) {
    animation: siteFadeOut 260ms cubic-bezier(0.65, 0, 0.35, 1) both;
  }
  ::view-transition-new(root) {
    animation: siteFadeIn 460ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes siteFadeOut {
    to { opacity: 0; transform: scale(0.985) translateZ(0); }
  }
  @keyframes siteFadeIn {
    from { opacity: 0; transform: scale(1.015) translateZ(0); }
  }

  /* pieces-live caption slide-up on scroll */
  .pieces-live__cell figcaption {
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out),
                opacity var(--dur-base) var(--ease-out);
    opacity: 0.9;
    background: linear-gradient(180deg, transparent, rgba(15,15,16,0.82));
  }
  .pieces-live__cell.is-in figcaption { transform: translateY(0); opacity: 1; }
  .pieces-thread__cell figcaption {
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out),
                opacity var(--dur-base) var(--ease-out);
    opacity: 0.9;
  }
  .pieces-thread__cell.is-in figcaption { transform: translateY(0); opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    [data-reveal], .hero__title .char { opacity: 1 !important; transform: none !important; }
    .hero__bg img { transform: none !important; }
    .hero__scroll-hint::after { display: none; }
    .silk-cursor, .petals, .hero__silk, .silk-decor { display: none !important; }
    [data-mask-reveal] { clip-path: none !important; -webkit-clip-path: none !important; }
  }
}

/* =============================================================================
   responsive overrides — 手機/平板/觸控裝置適配
   刻意放在所有 @layer 之後,取得最高優先權,統一覆寫。
============================================================================= */

/* ---- 觸控裝置：停用 hover-only 的 transform/filter 動畫（避免 sticky hover）---- */
@media (hover: none) {
  .btn:hover,
  .btn--lg:hover,
  [data-magnetic]:hover,
  .card:hover,
  .k-member:hover,
  .k-mini-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .card:hover .card__img img,
  .home-styles__card:hover .card__img img,
  .k-collars-sub__figure:hover img,
  .scene-row__img:hover img,
  .pieces-studio__cell:hover img,
  .gallery-item:hover img,
  .game-chapter__poster:hover img { transform: none; }
  .pieces-live__cell:hover img,
  .pieces-thread__cell:hover img,
  .gallery-mosaic__cell:hover img { filter: none; }
  .btn:hover .btn__arrow { transform: none; }
}

/* ---- ≤1024px 平板：hero 縮放收斂；pin section 在平板也停用 pin,避免大片空白 ---- */
@media (max-width: 1024px) {
  .hero__bg img { transform: scale(1.06); }

  /* JS 在 isTablet() 下會停用 pin,CSS 這裡把 pin 區塊收回正常流 */
  .home-culture { min-height: auto; }
  .home-culture__pin { height: auto; padding: var(--space-8) 0; display: block; }
  .k-length { min-height: auto; }
  .k-length__pin { height: auto; padding-block: var(--space-7); }
  .k-length__step { position: relative; opacity: 1; pointer-events: auto; inset: auto; padding-block: var(--space-5); }
  .k-length__progress { display: none; }
  .feature { min-height: auto; }
  .feature__stage { position: relative; height: auto; min-height: auto; padding: var(--space-8) var(--container-pad); }
}

/* ---- ≤768px 手機：全域尺寸、間距、字體收斂 ---- */
@media (max-width: 768px) {
  :root {
    --container-pad: 18px;
  }

  /* nav / main */
  .site-nav { padding: var(--space-2) var(--space-4); gap: var(--space-3); }
  .site-nav.is-scrolled { padding-block: 6px; }
  .site-nav__logo img { height: 28px; }
  .site-nav__burger { width: 40px; height: 40px; min-width: 44px; min-height: 44px; }
  .site-main { padding-top: 60px; }

  /* 語言選單改全寬,避免溢出 */
  .lang-switch__menu {
    position: fixed;
    top: 60px;
    right: var(--space-3);
    left: auto;
    min-width: 160px;
    max-width: calc(100vw - var(--space-6));
  }

  /* drawer 面板 */
  .drawer__panel {
    width: min(100vw, 340px);
    padding: var(--space-4) var(--space-5) var(--space-6);
  }
  .drawer__nav a { font-size: 1.1rem; padding: var(--space-2) 0; }

  /* hero */
  .hero { padding: var(--space-8) 0 var(--space-7); }
  .hero__bg img { transform: scale(1.02); }
  .hero__title { max-width: 14ch; }
  .hero__scroll-hint { display: none; }

  /* sections 縮小垂直 padding */
  .section { padding-block: clamp(var(--space-7), 10vw, var(--space-8)); }

  /* feature stage 在手機不強制 100vh,避免 pin + 小高度產生大量空白 */
  .feature { min-height: 180vh; }
  .feature__stage { height: auto; min-height: 100vh; }

  /* home-culture pin 在手機改為一般 flow(JS 已禁用 pin,CSS 補回流體) */
  .home-culture { min-height: auto; }
  .home-culture__pin { height: auto; padding: var(--space-7) 0; }

  /* k-length 在手機展成直排,JS 也已禁 pin */
  .k-length { min-height: auto; padding-block: var(--space-7); }
  .k-length__pin { height: auto; }
  .k-length__step { position: relative; opacity: 1; pointer-events: auto; inset: auto; padding-block: var(--space-5); }
  .k-length__progress { display: none; }

  /* figcaption 不覆蓋在圖片上,改貼於圖片下方 */
  .pieces-live__cell,
  .pieces-thread__cell {
    aspect-ratio: auto;
  }
  .pieces-live__cell img,
  .pieces-thread__cell img {
    aspect-ratio: 4/3;
  }
  .pieces-live__cell figcaption,
  .pieces-thread__cell figcaption {
    position: static;
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--color-ink);
    color: var(--color-paper);
    transform: none !important;
    opacity: 1 !important;
  }

  /* gallery-mosaic 列高壓縮 */
  .gallery-mosaic { grid-auto-rows: 200px; }

  /* process / quotes track 寬度收斂 */
  .home-quotes__track > blockquote { flex-basis: min(340px, 84vw); }

  /* turn-studio 地圖高度 */
  .turn-studio { min-height: 420px; }
  .turn-studio__overlay { padding: var(--space-5) var(--container-pad); }
  .turn-studio__card { max-width: 100%; padding: var(--space-4) var(--space-5); }

  /* game rules 卡片改單欄,避免 220px 最小寬在 320 視窗破版 */
  .game-rules { grid-template-columns: 1fr; }

  /* modal lightbox：關閉鈕在手機移到卡片右上角內 */
  .modal__close { top: var(--space-3); right: var(--space-3); background: rgba(0,0,0,0.5); z-index: 2; }
  .modal__body img { max-height: 80vh; }
}

/* ---- ≤480px 小手機：字體、timeline、按鈕二次收斂 ---- */
@media (max-width: 480px) {
  :root {
    --container-pad: 16px;
    --fs-hero: clamp(2.2rem, 9vw, 3rem);
    --fs-display: clamp(1.75rem, 7vw, 2.5rem);
    --fs-h1: clamp(1.6rem, 6vw, 2.25rem);
    --fs-h2: clamp(1.35rem, 5vw, 1.75rem);
    --fs-h3: 1.15rem;
  }

  /* 按鈕字體 / padding 微縮,保持 ≥44px 觸控高度 */
  .btn { padding: 14px 22px; font-size: 0.95rem; }
  .btn--lg { padding: 16px 26px; font-size: 1rem; }
  .hero__actions { gap: var(--space-2); }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }

  /* timeline：左軌縮為 28px,字級回到可讀 */
  .turn-timeline__list { grid-template-columns: 28px 1fr; column-gap: var(--space-3); }
  .turn-timeline__list::before { left: 13px; }
  .turn-timeline__dot { padding-top: calc(var(--space-4) + 6px); }
  .turn-timeline__dot::before {
    width: 14px; height: 14px;
    box-shadow: 0 0 0 3px var(--color-paper), 0 0 0 4px rgba(194,156,30,0.35);
  }
  .turn-timeline__title { font-size: 1.15rem; }
  .turn-timeline__content { padding: var(--space-4) 0 var(--space-5); }

  /* k-member mono 字體縮小,避免心形比例失衡 */
  .k-member { padding: var(--space-5) var(--space-4); }
  .k-member__mono { font-size: 2rem; }

  /* home-stats 四欄 → 二欄已有,這裡只調字級間距 */
  .home-stats__num { font-size: clamp(2.4rem, 10vw, 3.5rem); }

  /* footer */
  .site-foot { padding: var(--space-6) var(--container-pad); }
  .site-foot__row { gap: var(--space-4); }

  /* hero silk 幕布在極小手機上已成本過高,視覺差異不大,隱藏 */
  .hero__silk { display: none; }
}

/* ---- 橫向手機/短屏:減少 nav 與 hero 垂直佔比 ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .site-nav { padding: var(--space-1) var(--space-4); }
  .site-main { padding-top: 52px; }
  .hero { min-height: 100vh; padding: var(--space-7) 0 var(--space-5); }
  .hero__scroll-hint { display: none; }
}

/* =============================================================================
   手機版專屬動畫 — 輕量、GPU-friendly、取代桌面 hover/pin/cursor
   原則：
   - 只用 transform / opacity(走 GPU,不觸發 layout)
   - 不用 scrub;用 IntersectionObserver 或 CSS animation 觸發
   - 優先觸控回饋與持續微動,不強行模擬桌面
============================================================================= */

/* ---- 觸控 tap 回饋(全螢幕尺寸都適用,透過 @media (hover: none) 啟用)---- */
@media (hover: none) {
  .btn,
  .card,
  .home-styles__card,
  .k-mini-card,
  .k-member,
  .drawer__nav a,
  .gallery-item,
  .pieces-live__cell,
  .pieces-thread__cell,
  .pieces-studio__cell,
  .scene-row__img,
  .k-collars-sub__figure,
  .game-chapter__poster,
  .turn-timeline__link {
    transition: transform 140ms ease-out, box-shadow 140ms ease-out, background 140ms ease-out;
  }
  .btn:active,
  .drawer__nav a:active,
  .k-mini-card:active { transform: scale(0.96); }
  .card:active,
  .home-styles__card:active,
  .k-member:active,
  .gallery-item:active,
  .pieces-live__cell:active,
  .pieces-thread__cell:active,
  .pieces-studio__cell:active,
  .scene-row__img:active,
  .k-collars-sub__figure:active,
  .game-chapter__poster:active { transform: scale(0.985); }

  /* 圖片類 tap 時短暫提亮 */
  .gallery-item:active img,
  .pieces-live__cell:active img,
  .pieces-thread__cell:active img,
  .gallery-mosaic__cell:active img { filter: brightness(1.08) saturate(1.1); }

  /* Timeline 連結 tap 強調 */
  .turn-timeline__link:active { color: var(--color-accent); }
}

/* ---- 手機版 (≤768px) 專屬進場/持續動畫 ---- */
@media (max-width: 768px) {
  /* Hero 背景 Ken Burns:緩慢的縮放 + 漂移,取代桌面滑鼠視差 */
  .hero__bg img {
    animation: mobileKenBurns 22s ease-in-out infinite alternate;
  }
  @keyframes mobileKenBurns {
    0%   { transform: scale(1.02) translate3d(-1.5%, -0.5%, 0); }
    50%  { transform: scale(1.08) translate3d(0.5%, 0.8%, 0); }
    100% { transform: scale(1.04) translate3d(1.5%, -0.5%, 0); }
  }

  /* Hero lead 與 actions 的輕量呼吸,讓畫面不死板 */
  .hero__lead { animation: mobileBreathe 5s ease-in-out infinite alternate; }
  @keyframes mobileBreathe {
    from { transform: translateY(0); opacity: 0.88; }
    to   { transform: translateY(-2px); opacity: 1; }
  }

  /* turn-timeline 圓點首次進入視窗時脈動一次 */
  .turn-timeline__dot::before {
    transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-out);
  }
  .turn-timeline__dot.is-in::before {
    animation: timelineDotPulse 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
  }
  @keyframes timelineDotPulse {
    0%   { transform: scale(0.5); box-shadow: 0 0 0 3px var(--color-paper), 0 0 0 3px var(--color-brand); }
    55%  { transform: scale(1.25); box-shadow: 0 0 0 3px var(--color-paper), 0 0 0 12px rgba(194,156,30,0.35); }
    100% { transform: scale(1); box-shadow: 0 0 0 3px var(--color-paper), 0 0 0 4px rgba(194,156,30,0.35); }
  }
  /* 連線色漸層隨 scroll 點亮(由 JS 設 --timeline-progress) */
  .turn-timeline__list::before {
    background: linear-gradient(180deg,
      var(--color-accent) 0%,
      var(--color-accent) calc(var(--timeline-progress, 0) * 100%),
      rgba(95, 3, 19, 0.25) calc(var(--timeline-progress, 0) * 100%),
      rgba(95, 3, 19, 0.25) 100%);
    transition: background 260ms ease-out;
  }

  /* k-length 每個 step 在手機堆疊後的進場:序號大數字浮現、標題滑入 */
  html.js-ready .k-length__step:not(.mobile-in) { opacity: 0; transform: translateY(24px); transition: none; }
  .k-length__step.mobile-in { opacity: 1; transform: translateY(0); transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1); }
  html.js-ready .k-length__step:not(.mobile-in) .k-length__num {
    transform: translateY(16px) scale(0.92);
    opacity: 0;
  }
  .k-length__step .k-length__num {
    transition: opacity 800ms ease-out, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* home-styles 卡片堆疊後的 stagger:左右交錯滑入 */
  html.js-ready .home-styles__card:not(.mobile-in) {
    opacity: 0;
    transition: none;
  }
  html.js-ready .home-styles__card:not(.mobile-in):nth-child(odd)  { transform: translateX(-24px) translateY(28px); }
  html.js-ready .home-styles__card:not(.mobile-in):nth-child(even) { transform: translateX( 24px) translateY(28px); }
  .home-styles__card.mobile-in {
    opacity: 1;
    transform: translateX(0) translateY(0);
    transition: opacity 700ms ease-out, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* 圖片卡片輕量視差:JS 設 --mp(0~1),translate 5-10px */
  .pieces-live__cell img,
  .pieces-thread__cell img,
  .gallery-mosaic__cell img,
  .card__img img {
    transform: translate3d(0, calc((var(--mp, 0.5) - 0.5) * -14px), 0);
    transition: transform 180ms linear;
  }

  /* Scroll progress bar 在手機略加高,更易感知 */
  .scroll-progress { height: 3px; }

  /* 滾到視窗內的圖像卡片 subtle border glow */
  .pieces-live__cell,
  .pieces-thread__cell { transition: box-shadow 500ms ease-out; }
  .pieces-live__cell.is-in,
  .pieces-thread__cell.is-in { box-shadow: 0 14px 32px rgba(15,15,16,0.22); }
}

/* ---- ≤480px 更保守:Ken Burns 幅度再收 ---- */
@media (max-width: 480px) {
  @keyframes mobileKenBurns {
    0%   { transform: scale(1.00) translate3d(-1%, 0%, 0); }
    50%  { transform: scale(1.05) translate3d(0.5%, 0.5%, 0); }
    100% { transform: scale(1.02) translate3d(1%, 0%, 0); }
  }
}

/* ---- reduced-motion 完全停用以上手機動畫 ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__bg img,
  .hero__lead,
  .turn-timeline__dot.is-in::before { animation: none !important; }
  .k-length__step,
  .k-length__step .k-length__num,
  .home-styles__card { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pieces-live__cell img,
  .pieces-thread__cell img,
  .gallery-mosaic__cell img,
  .card__img img { transform: none !important; }
  .turn-timeline__list::before { background: linear-gradient(180deg, var(--color-accent), var(--color-brand)) !important; }
}