/* ══════════════════════════════════════════════════════════
   base.css — 三頁共用的變數與基礎排版。
   Jay：視覺請寫在 cinematic.css（首頁/晚餐）與 business.css（便當）。
   這個檔只放「兩邊都要一致」的東西：字體、色票、間距節奏。
   ══════════════════════════════════════════════════════════ */

:root {
  /* 深色系（首頁・晚餐線）—— 參考 minehoooo 的黑底金點 */
  --ink:        #0d0d0d;
  --ink-soft:   #1a1a1a;
  --paper:      #f2ede4;   /* 米白，深色頁的文字 */
  --gold:       #c4a882;   /* 點綴色，與集點卡的暖沙棕一致 */

  /* 明亮系（便當線）—— 要能快速掃讀 */
  --bg-light:   #ffffff;
  --text-light: #1a1a1a;
  --line:       #d8d3ca;
  --accent:     #8a5a2b;
  --cream:      #f5f0e8;   /* 集點卡的奶油白，便當頁區隔用 */

  /* 間距節奏 */
  --gap-s: .75rem;
  --gap-m: 1.5rem;
  --gap-l: 4rem;
  --gap-xl: 8rem;

  --measure: 34rem;        /* 內文最大寬度，超過就不好讀 */
  --page-max: 1180px;

  /* 框中框：內容從視窗邊緣退縮的距離。小津的門框構圖靠這個 */
  --frame: var(--gap-m);

  /* 金線的三個階層。只用這三階，不要再自己調透明度 */
  --rule:        color-mix(in srgb, var(--gold) 14%, transparent);
  --rule-strong: color-mix(in srgb, var(--gold) 28%, transparent);

  /* 慢起慢收，末端不回彈。任何 bounce 都會破壞靜態感 */
  --ease-ozu: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 768px) {
  :root { --frame: var(--gap-l); }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

body {
  /* Microsoft JhengHei 是給 Windows 的，少了它中文會 fallback 到不受控的字型 */
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
               -apple-system, sans-serif;
  line-height: 1.75;
}

/* 標題用襯線。刻意全部是系統內建字型——載 web font 會拖垮行動版效能分數 */
h1, h2, h3 {
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  line-height: 1.3; font-weight: 700; margin: 0 0 var(--gap-m);
}
p { margin: 0 0 var(--gap-s); max-width: var(--measure); }
img {
  max-width: 100%; height: auto; display: block;
  background: var(--ink-soft);   /* 圖還沒載入時不要是一塊空白 */
}
a { color: inherit; }

/* 手機優先。所有版面都必須在 375px 寬可用——
   企業採購常常是在手機上先看一眼再決定要不要問。 */
.section, .scene { padding: var(--gap-l) var(--frame); }
@media (min-width: 768px) {
  .section, .scene { padding: var(--gap-xl) var(--frame); }
}

/* 導覽列：兩種主題共用結構，配色各自覆寫 */
.site-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--gap-s) var(--frame); gap: var(--gap-m);
  backdrop-filter: blur(10px);
}
.site-nav nav { display: flex; gap: var(--gap-m); }
.site-nav a { text-decoration: none; }
.site-nav .brand {
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  font-size: 1.25rem; letter-spacing: .15em;
}

/* 鍵盤操作時要看得見焦點在哪 */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 待辦標記：Jay 完成後把 data-todo 屬性移除。
   ::after 會把屬性值印出來，這樣不用翻原始碼也知道缺什麼 */
[data-todo] { outline: 1px dashed var(--gold); min-height: 3rem; }
[data-todo]::after {
  content: "⚠ " attr(data-todo);
  display: block; font-size: .7rem; letter-spacing: .1em;
  opacity: .55; padding: .25rem .5rem;
}

/* 全站關掉動效。這條要放在最後，才蓋得過各主題檔的設定 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}