/*
  檔案功能：style.css
  被引用目的：承接 HTML 頁面的主視覺與版型設計，讓藝術家網站呈現明確的版面節奏、色彩氣質與響應式結構。
  編寫安排：先載入全域設定或模組 CSS，再針對頁首、導覽、內容區、作品卡片、側欄、頁尾與動畫狀態進行細部設定。
  與 HTML 的關係：HTML 透過 class 名稱標記語意與區塊，本檔再用相同 class 選擇器把視覺樣式套用到對應區塊。
*/

/* 匯入 _global.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_global.css);

/* 匯入 _layout.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_layout.css);

/* 匯入 _typography.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_typography.css);

/* 匯入 _nav.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_nav.css);

/* 匯入 _button.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_button.css);

/* 匯入 _form.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_form.css);

/* 匯入 _media.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_media.css);

/* 匯入 _table.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_table.css);

/* 匯入 _grid.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_grid.css);

/* 匯入 _card.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_card.css);

/* 匯入 _helper.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_helper.css);

/* 匯入 _theme.css：把相關樣式拆成模組，方便依功能維護與教學閱讀。 */
@import url(_theme.css);

/* NMA teaching additions */
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
body {
  /* 設定字體家族，影響網站的氣質。 */
  font-family:
    -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
    sans-serif;
  /* 設定文字顏色。 */
  color: #182022;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-logo {
  /* 設定字距，常用於 Logo 或標題的空氣感。 */
  letter-spacing: 0.08em;}

/*
  ═══════════════════════════════════════════════════
  【現代技術②】Flexbox 導覽列容器（取代 float 左右分配）
  ───────────────────────────────────────────────────
  舊做法：
    .site-logo  { float: left  }   ← Logo 靠左浮動
    .pull-right { float: right }   ← 選單靠右浮動（透過 HTML class="pull-right"）
    .clearfix::after { clear: both }  ← 幽靈元素強制父層包住浮動子元素
  新做法：
    .site-header-inner { display: flex; justify-content: space-between }
    → Logo 自動靠左，選單自動靠右，父層自然包住子元素，不需任何 clearfix
    → align-items: center 一行搞定垂直置中，無需手動設定 line-height = height
  ═══════════════════════════════════════════════════
*/
/* Flexbox 導覽列容器：Logo 貼左，選單貼右，高度自動置中。 */
.site-header-inner {
  /* display: flex 開啟彈性盒模型，取代 float 的左右分配排版。 */
  display: flex;
  /* align-items: center 讓 Logo 與選單垂直置中，取代 line-height 手動設定。 */
  align-items: center;
  /* justify-content: space-between → Logo 推最左、選單推最右，取代 float: right。 */
  justify-content: space-between;
  /* height: 60px 定義導覽列高度。 */
  height: 60px;}


/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-header-toggle {
  /* 設定滑鼠游標樣式，提示可互動性。 */
  cursor: pointer;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-menu.is-open {
  /* 設定元素顯示模式，例如 block、inline-block、flex。 */
  display: block;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.js-reveal {
  /* 設定透明度，可用於淡入動畫。 */
  opacity: 0;
  /* 設定位移、縮放或旋轉，可用於動畫與動態感。 */
  transform: translateY(18px);
  /* 設定屬性變化的時間與速度曲線。 */
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.js-reveal.is-visible {
  /* 設定透明度，可用於淡入動畫。 */
  opacity: 1;
  /* 設定位移、縮放或旋轉，可用於動畫與動態感。 */
  transform: translateY(0);}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.artist-note {
  /* 設定行高，影響段落閱讀節奏。 */
  line-height: 1.8;
  /* 設定字距，常用於 Logo 或標題的空氣感。 */
  letter-spacing: 0.03em;}