@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/Roboto-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/Roboto-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --text: #fff;
  --text-hover: #878787;
  --text-on-light: #111;
  --bg: #111;
  /* 字級：全站文字只用這三種，改這裡就會全站一起變 */
  --fs-brand: 20px; /* WILLCHOUFILM */
  --fs-text: 16px;  /* 選單、About 內文、其他文字 */
  --fs-small: 14px; /* 手機版選單 */
  --fs-caption: 13px; /* Archive 作品標題（2026-10-07 從 11px 調大） */
  --bg-light: #eaeaea; /* 亮色頁面背景（Archive） */
  --line: rgba(0, 0, 0, 0.26); /* 設計稿 0.35pt 黑框線在螢幕上的樣子 */
  /* 設計稿以 900px 高為基準，1 單位 = 視窗高度 / 900 */
  --u: calc(100vh / 900);
  --fade: 0.6s; /* 換頁淡入淡出，要跟 site.js 的 FADE_MS 一致 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  overscroll-behavior: none;
}

body {
  font-family: "Roboto", system-ui, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* 亮色頁面：背景換淺灰、導覽列換黑字
   （背景只換 body，html 維持 #111，換頁時才會從黑色平順淡入） */
.page-light { --text: var(--text-on-light); }
.page-light body { background: var(--bg-light); }

/* ---------- 換頁淡入淡出（.js 由每頁 <head> 加上，沒有 JS 時直接顯示） ---------- */
.js body {
  opacity: 0;
  transition: opacity var(--fade) ease;
}
.js body.is-ready { opacity: 1; }

/* ---------- 導覽列 ---------- */
.nav {
  --nav-logo: var(--fs-brand);
  --nav-baseline: 57px; /* 文字基線離畫面頂端的距離（設計稿 y=57），字級改了也不會跑掉 */
  position: fixed;
  top: calc(var(--nav-baseline) - 0.842 * var(--nav-logo)); /* 0.842 = Roboto 基線在字高中的位置 */
  left: 60px;
  right: 60px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  line-height: 1;
}

.nav a,
.work-nav a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* 底下是亮色照片時換深色字，home.js 自動切換 */
.nav a.on-light,
.work-nav a.on-light { color: var(--text-on-light); }

/* 很淡的光暈：白字配暗影、黑字配亮影，中間灰的背景也讀得清楚，幾乎看不出有陰影 */
.nav a, .work-nav a, .work-nav__meta, .work figcaption { text-shadow: 0 0 6px var(--halo); }
.work-nav svg { filter: drop-shadow(0 0 3px var(--halo)); }
:root { --halo: rgba(0, 0, 0, 0.35); }
.page-light,
.on-light,
.work[data-tone="light"] figcaption { --halo: rgba(255, 255, 255, 0.35); }
.nav a:hover,
.nav a:focus-visible,
.work-nav a:hover,
.work-nav a:focus-visible { color: var(--text-hover); }

.nav__logo { font-size: var(--nav-logo); font-weight: 700; }

.nav__links { display: flex; gap: 26px; }
.nav__links a { font-size: var(--fs-text); font-weight: 400; }

/* ---------- 橫向輪播 ---------- */
.track {
  position: relative;
  display: flex;
  height: 100vh;
  width: max-content;
  will-change: transform;
}

.panel {
  flex: none;
  width: calc(var(--u) * var(--w));
  height: 100%;
  overflow: hidden;
}

.panel img,
.panel video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- 作品頁下方：← Back to Archive　Turn the page → ---------- */
/* 固定在左下、右下，跟上方導覽列一樣內縮 60px，基線離底 57px（上下對稱） */
.work-nav a {
  position: fixed;
  bottom: calc(57px - 0.158 * var(--fs-text)); /* 0.158 = Roboto 基線以下的部分 */
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-text);
  line-height: 1;
}
.work-nav__back { left: 60px; }
.work-nav__next { right: 60px; }
.work-nav svg { width: 16px; height: 10px; flex: none; }

/* 左下「年份 — 作品名稱」：在 Back to Archive 上方 24px，對齊 Back 的 B（箭頭 16 + 間距 8） */
.work-nav__meta {
  position: fixed;
  left: calc(60px + 24px);
  bottom: calc(57px + 24px - 0.158 * var(--fs-caption));
  z-index: 10;
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1;
  color: var(--text);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.work-nav__meta.on-light { color: var(--text-on-light); }

/* ---------- 首頁點擊插圖（home.js 產生） ---------- */
.doodle {
  position: absolute;
  width: calc(var(--dw) * var(--u)); /* 插圖原始寬度，跟著畫面高度縮放 */
  transform: translate(-50%, -50%);   /* 插圖中心對準點擊位置 */
  pointer-events: none;
  user-select: none;
  animation: doodle 2.7s ease forwards;
}
/* 總長 2.7 秒：0.2 秒淡入 → 停 1 秒 → 1.5 秒淡出（改秒數要一起換算百分比） */
@keyframes doodle {
  0%    { opacity: 0; }
  7.4%  { opacity: 1; }
  44.4% { opacity: 1; }
  100%  { opacity: 0; }
}

/* ---------- About ---------- */
.about {
  position: relative;
  height: 100vh;
}

.about__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 自我介紹：左下，在「← Archive」上方 24px，左邊對齊 Archive 的 A（跟作品頁左下的資訊同一種排法） */
.about__text {
  position: absolute;
  left: calc(60px + 24px);
  right: 60px;
  bottom: calc(57px + 24px - 6px); /* 最後一行基線離底 81px；6px = 行高 21px 時基線以下的空間 */
  font-size: var(--fs-caption);
  line-height: 21px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35); /* 很淡的陰影，壓在亮的煙火上也讀得清楚 */
}
.about__text span { display: block; }

/* ---------- Archive ---------- */
/* 設計稿 1440×900：格子從 (90,135) 開始，4 欄 × 2 列，每格 315×323
   --a = 1 設計稿 px，跟著畫面等比例縮放（高或寬，取比較擠的那邊） */
.archive {
  --a: min(calc(100vh / 900), calc(100vw / 1440));
  height: 100vh;
  padding-top: calc(135 * var(--a));
}

.archive__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, calc(315 * var(--a)));
  grid-auto-rows: calc(323 * var(--a));
  width: max-content;
  margin: 0 auto;
}
/* 框線：每格畫左、上，整塊再補右、下，線壓在照片邊緣上 */
.archive__grid::after,
.work::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.archive__grid::after { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.work::after { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }

.work { position: relative; overflow: hidden; }
/* 已經有作品頁的格子：整格可以點 */
.work__link { position: absolute; inset: 0; z-index: 1; }
.work img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* 作品標題：左下角（跟作品頁左下的「年份 — 作品名稱」呼應），滑鼠移上去才浮出 */
.work figcaption {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: var(--fs-caption);
  line-height: 1;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.work[data-tone="light"] figcaption { color: var(--text-on-light); }
.work:hover figcaption { opacity: 1; }

/* ---------- 手機版（寬度 ≤ 760px，要跟 home.js 的斷點一致） ---------- */
@media (max-width: 760px) {
  .nav { --nav-logo: var(--fs-text); --nav-baseline: 34px; left: 20px; right: 20px; }
  .nav__links { gap: 16px; }
  .nav__links a { font-size: var(--fs-small); }

  /* 橫向輪播頁（首頁、作品頁）：橫排改直排，用瀏覽器原本的捲動 */
  html.track-page,
  html.track-page body { height: auto; overflow: visible; }
  .track { flex-direction: column; width: 100%; height: auto; }
  .panel { width: 100%; height: auto; aspect-ratio: var(--w) / 900; }
  .doodle { --u: calc(100vw / 760); } /* 手機上插圖改以畫面寬度縮放，才不會太大 */
  /* 作品頁下方連結：一樣固定在左下、右下，距邊 20px、基線離底 34px（跟上方導覽列對稱） */
  .work-nav a { bottom: calc(34px - 0.158 * var(--fs-small)); font-size: var(--fs-small); }
  .work-nav__back { left: 20px; }
  .work-nav__next { right: 20px; }
  .work-nav__meta { left: calc(20px + 24px); bottom: calc(34px + 22px - 0.158 * var(--fs-caption)); }

  /* 手機：自我介紹移到左上（放下面會被 iPhone 工具列擠到），
     對齊 WILLCHOUFILM 左邊；WILLCHOUFILM 底部往下 60px = 第一行字頂（88 = 34 + 60 - 6，6 = 行高 21 裡字頂以上的空間） */
  .about__text {
    top: 88px;
    bottom: auto;
    left: 20px;
    right: 20px;
    text-align: justify;      /* 左右對齊 */
    text-align-last: left;    /* 最後一行靠左 */
  }
  .about__text span { display: inline; } /* 手機上自動換行 */

  /* Archive：改成兩欄，往下捲動 */
  html.archive-page,
  html.archive-page body { height: auto; overflow: visible; }
  html.archive-page body { min-height: 100vh; } /* 內容比螢幕短時，底下不要露出黑色 */
  .archive { height: auto; padding: 70px 20px 72px; } /* 底部留空間給固定的 Home / About */
  .archive__grid { width: auto; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .work { aspect-ratio: 315 / 323; }
  .work figcaption { display: none; } /* 手機版不顯示作品標題 */
}