/* ══════════════════════════════════════════════════════════════
   limerea-pages.css — 內頁的 LIMEREA 外殼
   ------------------------------------------------------------
   接在 style.css 之後載入，只做三件事：
     1. 把舊的設計 token 換成 LIMEREA 的值 → 既有規則自動吃到新色新字
     2. 換掉舊的氛圍層（橘／青光暈）
     3. 導覽與頁尾對齊首頁
   各頁的版面與內容一律不動。要退回舊視覺，把這支 <link> 拿掉即可。
   ══════════════════════════════════════════════════════════════ */

/* ── 中文明體：跟首頁同一支，字集涵蓋全站 9 頁 ─────────────── */
@font-face{
  font-family:'LMSerifTC'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/notoseriftc-400.woff2') format('woff2');
}
@font-face{
  font-family:'LMSerifTC'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/notoseriftc-500.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/bodonimoda-400.woff2') format('woff2');
}
/* 標題用的顯示級明體：源流明體。橫細直粗、三角襯線明顯，
   跟內文的 Noto Serif TC 是「顯示體 vs 內文體」的分工，不是混用。 */
@font-face{
  font-family:'GenRyuTC'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/genryu-bold.woff2') format('woff2');
}
@font-face{
  font-family:'GenRyuTC'; font-style:normal; font-weight:900; font-display:swap;
  src:url('fonts/genryu-heavy.woff2') format('woff2');
}

/* ── token 覆寫 ────────────────────────────────────────────
   style.css 裡幾百條規則全部走這些變數，所以只要改這裡，
   不用去動任何一條版面規則。 */
:root{
  --bg:     #080807;                    /* 近黑，與首頁同 */
  --paper:  #E8E1D5;                    /* 暖象牙 */
  --ink-2:  rgba(232,225,213,.78);
  --ink-3:  rgba(232,225,213,.56);
  --hair:   rgba(232,225,213,.10);
  --stage:  #0C0B09;

  /* 三條內容線原本分橘／青／紫，LIMEREA 的金色只來自「光」，
     全部收斂成同一個金 —— 顏色不再承擔分類，交給文字與版位 */
  --rec:    #B69A70;
  --teach:  #B69A70;
  --info:   #B69A70;
  --accent: #B69A70;

  /* 字體對位首頁：
     顯示體＝源流明體（標題）　內文體＝Noto Serif TC
     Courier＝英數／場記　楷體保留為註記旁白 */
  --f-title: 'GenRyuTC','LMSerifTC','Noto Serif TC','PMingLiU',serif;
  --f-body:  'LMSerifTC','Noto Serif TC','Songti TC','PMingLiU',serif;
}

/* ── 氛圍層：舊版是左下橘＋右上青，換成首頁的中性暗角 ─────── */
body::before{
  background:
    radial-gradient(120% 92% at 50% 44%, transparent 46%, rgba(0,0,0,.62) 100%),
    radial-gradient(72% 56% at 12% 102%, rgba(182,154,112,.10), transparent 64%),
    radial-gradient(64% 50% at 92% -6%,  rgba(182,154,112,.07), transparent 62%);
}
body::after{ opacity:.028; }              /* 顆粒收斂一階，底色更暗了 */

/* ── 顯示級排版（type-compare.html 的 D 版）─────────────────
   舊站標題本來就是 GenRyu 900；外殼第一版把 --f-title 換成只有
   400/500 的 Noto，font-weight:900 退成扁平的 500，字就散了。
   這裡把字重要回來，再加上雜誌會做的四件事：
   收字距、壓行高、平衡斷行、限制行長。 */
h1, .sec-hero h1, h2.sec, .sec-head h2{
  letter-spacing:-.012em;
  text-wrap:balance;          /* 不留孤字 */
  font-synthesis-weight:none; /* 沒有對應字重時寧可退回，不要讓瀏覽器假造粗體 */
}
h1{ line-height:1.28; max-width:15ch; }
h2.sec{ line-height:1.32; max-width:18ch; }
.sec-head h2{ line-height:1.32; }
/* 標題裡的英數走 Bodoni Moda，跟首頁字標同一支 */
h1 .lat, h2 .lat{ font-family:'Bodoni Moda',Georgia,serif; font-weight:400;
                  letter-spacing:.02em; padding:0 .06em; }
h1 em{ font-style:normal; color:var(--accent); }

/* ── 主標題轉成路徑（_spec/build_headline_svg.py 產生）──────
   字體檔在不同裝置的 hinting 與 fallback 不一致，標題是品牌最前面
   那一行，不留給瀏覽器決定。轉路徑後渲染完全一致，也不等字型載入。
   代價：改文案要重跑那支腳本，不能直接在 HTML 改字。 */
.h1-art{ margin:0; max-width:none; }
/* 用「字要多大」定寬（--em × viewBox 寬 / 1000），不是用容器寬度定字大小。
   短標題若直接 width:100% 會被撐成兩倍大 —— tools 那頁踩過。 */
.h1-svg{ display:block; height:auto;
         --em:clamp(30px,4.6vw,72px);
         width:calc(var(--vbw) / 1000 * var(--em));
         max-width:100%; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px;
          padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (max-width:52rem){ .h1-svg{ max-width:100%; } }

/* ── 導覽：跟首頁同一套（等寬字、字標帶中文、右側語言） ───── */
.nav{ align-items:center; }
.nav .brand{
  font-family:var(--f-slate); font-weight:400;
  letter-spacing:.3em; color:var(--paper);
  font-size:clamp(12px,1.1vw,15px); white-space:nowrap;
}
.nav .brand i{ font-style:normal; margin-left:.7em; letter-spacing:.2em;
               font-family:var(--f-title); opacity:.92; }
.nav ul a{ color:var(--ink-3); letter-spacing:.2em; }
.nav ul a:hover{ color:var(--paper); }
.nav ul a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); }
.nav .lang{
  flex:0 0 auto; font-family:var(--f-slate);
  font-size:clamp(10px,.8vw,12px); letter-spacing:.18em;
  color:var(--ink-3); white-space:nowrap;
}
.nav .lang b{ font-weight:400; color:var(--paper); }
@media (max-width:52rem){ .nav .lang{ display:none; } }

/* ── 頁尾字標與首頁一致 ───────────────────────────────────── */
.foot .brand-line{
  font-family:var(--f-slate); letter-spacing:.3em;
  font-size:var(--f1); color:var(--paper);
}
.foot .brand-line i{ font-style:normal; font-family:var(--f-title);
                     letter-spacing:.2em; margin-left:.6em; }

/* ── 細節對齊首頁 ─────────────────────────────────────────── */
::selection{ background:rgba(182,154,112,.35); color:var(--paper); }
a:focus-visible,button:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }
.btn.primary{ background:transparent; color:var(--paper);
              border:1px solid rgba(182,154,112,.5); }
.btn.primary:hover{ background:rgba(182,154,112,.10); border-color:var(--accent); }

/* 舊版把作品／卡片的圓角開得比較大，首頁幾乎沒有圓角 */
:root{ --radius-sm:2px; --radius:3px; }

/* ══ /works 作品展示頁 ════════════════════════════════════
   首頁的封面流只是精選；這頁是每支片的製作內容。
   影像在一側、拆解在另一側，逐支交錯。 */
.wk-list{ display:grid; gap:clamp(5rem,11vw,10rem); padding:var(--s5) var(--gap) var(--s6); }
.wk{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.6rem,4vw,4rem);
     align-items:center; max-width:78rem; margin-inline:auto; width:100%; }
.wk:nth-child(even) .wk-media{ order:2; }

.wk-media .work{ display:block; text-decoration:none; }
.wk-media .work-media{ position:relative; display:block; overflow:hidden;
     border:1px solid var(--hair); background:var(--stage); }
.wk-media img,.wk-media video{ display:block; width:100%; height:auto;
     aspect-ratio:16/9; object-fit:cover;
     transition:transform 1.2s cubic-bezier(.16,1,.3,1), filter 1.2s ease, opacity .5s ease; }
.wk.w--stage img,.wk.w--stage video{ aspect-ratio:3/4; }
.wk-media video{ position:absolute; inset:0; height:100%; opacity:0; }
.wk-media .work.is-playing video{ opacity:1; }
.wk-play{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
     padding:8px 18px; border:1px solid rgba(182,154,112,.55);
     background:rgba(8,8,7,.6); backdrop-filter:blur(2px);
     font-family:var(--f-slate); font-size:11px; letter-spacing:.22em;
     color:var(--paper); opacity:0; transition:opacity .3s ease; }
@media (hover:hover){
  .wk-media .work:hover img{ transform:scale(1.03); filter:brightness(1.12); }
  .wk-media .work:hover .wk-play{ opacity:1; }
}

.wk-no{ font-family:var(--f-slate); font-size:var(--f1); letter-spacing:.2em;
        color:var(--accent); margin-bottom:var(--s1); }
.wk-body h2{ margin:0; font-family:var(--f-title); font-weight:900;
             font-size:var(--f5); line-height:1.36; letter-spacing:-.008em;
             text-wrap:balance; font-synthesis-weight:none; }
.wk-meta{ margin:var(--s1) 0 0; font-family:var(--f-slate);
          font-size:var(--f0); letter-spacing:.16em; color:var(--ink-3); }
.wk-lead{ margin:var(--s3) 0 0; color:var(--ink-2); max-width:38ch; }

.wk-craft{ margin:var(--s4) 0 0; display:grid; gap:var(--s2); max-width:42ch; }
.craft-row{ display:grid; grid-template-columns:5.6rem 1fr; gap:var(--s2);
            padding-top:var(--s2); border-top:1px solid var(--hair); }
.craft-row dt{ font-family:var(--f-slate); font-size:var(--f0);
               letter-spacing:.14em; color:var(--accent); padding-top:.2em; }
.craft-row dd{ margin:0; font-size:var(--f2); line-height:1.9; color:var(--ink-2); }

.work-more{ display:inline-block; margin-top:var(--s4);
            border-bottom:1px solid rgba(182,154,112,.45); padding-bottom:.3rem;
            font-size:var(--f1); letter-spacing:.1em; color:var(--paper); }
.work-more:hover{ color:var(--accent); border-color:var(--accent); }

@media (max-width:60rem){
  .wk{ grid-template-columns:1fr; gap:var(--s3); }
  .wk:nth-child(even) .wk-media{ order:0; }
  .wk-lead,.wk-craft{ max-width:none; }
  .craft-row{ grid-template-columns:1fr; gap:.3rem; }
}

/* ── about 頭像：圓形形象照，用 1:1 呈現才不會切到金環 ────── */
.portrait-intro img{ aspect-ratio:1/1; }
.portrait-intro figure{ max-width:26rem; }

/* ── 順手修掉的既有缺陷 ───────────────────────────────────
   oneshot.html 的 .timeline 表格在 375 寬會把整頁撐出橫向捲動
   （量到 scrollWidth 568 / clientWidth 360）。這在換外殼之前就存在，
   違反手冊 §6「320–1920 全部無橫向溢出」。表格自己捲，頁面不捲。 */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll::-webkit-scrollbar{ height:3px; }
.table-scroll::-webkit-scrollbar-thumb{ background:var(--hair); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}