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

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.container {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 80%;
  /* 限制最大寬度，避免內容在大螢幕上過度拉長。 */
  max-width: 1200px;
  /* 設定左側外距。 */
  margin-left: auto;
  /* 設定右側外距。 */
  margin-right: auto;
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-header {
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: #30a9de;
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 100%;
  /* 搭配定位使用，設定上方位移。 */
  top: 0;
  /* 搭配定位使用，設定左側位移。 */
  left: 0;
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: fixed;
  /* 控制重疊順序，數值越高越靠上。 */
  z-index: 99;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-logo {
    /*設定樣式*/
  /* 設定文字顏色。 */
  color: #fff;
  /* 設定 CSS 屬性 text-transform，用來微調版面或視覺表現。 */
  text-transform: uppercase;
  /* 設定 CSS 屬性 font-weight，用來微調版面或視覺表現。 */
  font-weight: 800;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-footer {
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: #607d8b;
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;
  /* 控制重疊順序，數值越高越靠上。 */
  z-index: 1;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-footer-inner {
  /* 設定元素高度。 */
  height: 100px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-main {
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;
  /* 控制重疊順序，數值越高越靠上。 */
  z-index: 1;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-main-inner::after {
  /* 設定 CSS 屬性 content，用來微調版面或視覺表現。 */
  content: "";
  /* 設定元素顯示模式，例如 block、inline-block、flex。 */
  display: block;
  /* 清除浮動效果，避免後續區塊被浮動元素影響。 */
  clear: both;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.content {
  /* 設定元素高度。 */
  height: 1000px;
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 68%;
  /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
  float: left;
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: #ddd;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.sidebar {
  /* 設定元素高度。 */
  height: 1000px;
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 32%;
  /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
  float: left;
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: #f1f1f1;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.sidebar ~ .sidebar {
  /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
  float: right;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.sidebar + .content {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 36%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.content:last-child {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 68%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.content:only-child {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 100%;}

/* 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;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 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;}