/* Portfolio type scale — one source for every page. Desktop values are fixed from 1024px up;
 * below that each role scales smoothly down to its phone value at 390px.
 * Use the classes (.t-h1 …) or the variables (var(--t-h1-size) …). See type/ for the specimen. */
:root {
  --font-sans: "Inter", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  /* 超大標題 1: desktop 100/96, phone 40/38 (two stacked display lines read as one block) */
  --t-display-xl-size: clamp(40px, 3.09px + 9.464vw, 100px);
  --t-display-xl-line: clamp(38px, 2.32px + 9.148vw, 96px);
  --t-display-xl-weight: 700;
  --t-display-xl-tracking: -0.02em;
  /* 超大標題 2: desktop 75/80, phone 36/42 */
  --t-display-l-size: clamp(36px, 12.01px + 6.151vw, 75px);
  --t-display-l-line: clamp(42px, 18.62px + 5.994vw, 80px);
  --t-display-l-weight: 700;
  --t-display-l-tracking: -0.02em;
  /* 大標題: desktop 58/70, phone 32/42 */
  --t-h1-size: clamp(32px, 16.01px + 4.101vw, 58px);
  --t-h1-line: clamp(42px, 24.78px + 4.416vw, 70px);
  --t-h1-weight: 700;
  --t-h1-tracking: -0.01em;
  /* 中標題: desktop 50/66, phone 28/38 */
  --t-h2-size: clamp(28px, 14.47px + 3.470vw, 50px);
  --t-h2-line: clamp(38px, 20.78px + 4.416vw, 66px);
  --t-h2-weight: 700;
  --t-h2-tracking: -0.01em;
  /* 小標題: desktop 40/52, phone 24/34 */
  --t-h3-size: clamp(24px, 14.16px + 2.524vw, 40px);
  --t-h3-line: clamp(34px, 22.93px + 2.839vw, 52px);
  --t-h3-weight: 700;
  --t-h3-tracking: 0;
  /* 超小標題 1: desktop 28/40, phone 22/32 */
  --t-h4-size: clamp(22px, 18.31px + 0.946vw, 28px);
  --t-h4-line: clamp(32px, 27.08px + 1.262vw, 40px);
  --t-h4-weight: 700;
  --t-h4-tracking: 0;
  /* 超小標題 2: desktop 24/28, phone 20/26 */
  --t-h5-size: clamp(20px, 17.54px + 0.631vw, 24px);
  --t-h5-line: clamp(26px, 24.77px + 0.315vw, 28px);
  --t-h5-weight: 600;
  --t-h5-tracking: 0;
  /* 超小標題 3: desktop 18/28, phone 18/28 */
  --t-h6-size: 18px;
  --t-h6-line: 28px;
  --t-h6-weight: 600;
  --t-h6-tracking: 0;
  /* 一般描述: desktop 16/28, phone 16/28 */
  --t-body-size: 16px;
  --t-body-line: 28px;
  --t-body-weight: 400;
  --t-body-tracking: 0;
  /* 小描述 / tab: desktop 14/24, phone 14/24 */
  --t-small-size: 14px;
  --t-small-line: 24px;
  --t-small-weight: 400;
  --t-small-tracking: 0;
  /* 裝飾字 / tag: desktop 12/14, phone 12/14 */
  --t-tag-size: 12px;
  --t-tag-line: 14px;
  --t-tag-weight: 500;
  --t-tag-tracking: 0.18em;
  /* 中按鈕字: desktop 14/20, phone 14/20 */
  --t-btn-m-size: 14px;
  --t-btn-m-line: 20px;
  --t-btn-m-weight: 600;
  --t-btn-m-tracking: 0.02em;
  /* 小按鈕: desktop 12/18, phone 12/18 */
  --t-btn-s-size: 12px;
  --t-btn-s-line: 18px;
  --t-btn-s-weight: 600;
  --t-btn-s-tracking: 0.02em;
}
.t-display-xl { font-family: var(--font-sans); font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-line); font-weight: var(--t-display-xl-weight); letter-spacing: var(--t-display-xl-tracking); }
.t-display-l { font-family: var(--font-sans); font-size: var(--t-display-l-size); line-height: var(--t-display-l-line); font-weight: var(--t-display-l-weight); letter-spacing: var(--t-display-l-tracking); }
.t-h1 { font-family: var(--font-sans); font-size: var(--t-h1-size); line-height: var(--t-h1-line); font-weight: var(--t-h1-weight); letter-spacing: var(--t-h1-tracking); }
.t-h2 { font-family: var(--font-sans); font-size: var(--t-h2-size); line-height: var(--t-h2-line); font-weight: var(--t-h2-weight); letter-spacing: var(--t-h2-tracking); }
.t-h3 { font-family: var(--font-sans); font-size: var(--t-h3-size); line-height: var(--t-h3-line); font-weight: var(--t-h3-weight); letter-spacing: var(--t-h3-tracking); }
.t-h4 { font-family: var(--font-sans); font-size: var(--t-h4-size); line-height: var(--t-h4-line); font-weight: var(--t-h4-weight); letter-spacing: var(--t-h4-tracking); }
.t-h5 { font-family: var(--font-sans); font-size: var(--t-h5-size); line-height: var(--t-h5-line); font-weight: var(--t-h5-weight); letter-spacing: var(--t-h5-tracking); }
.t-h6 { font-family: var(--font-sans); font-size: var(--t-h6-size); line-height: var(--t-h6-line); font-weight: var(--t-h6-weight); letter-spacing: var(--t-h6-tracking); }
.t-body { font-family: var(--font-sans); font-size: var(--t-body-size); line-height: var(--t-body-line); font-weight: var(--t-body-weight); letter-spacing: var(--t-body-tracking); }
.t-small { font-family: var(--font-sans); font-size: var(--t-small-size); line-height: var(--t-small-line); font-weight: var(--t-small-weight); letter-spacing: var(--t-small-tracking); }
.t-tag { font-family: var(--font-sans); font-size: var(--t-tag-size); line-height: var(--t-tag-line); font-weight: var(--t-tag-weight); letter-spacing: var(--t-tag-tracking); }
.t-btn-m { font-family: var(--font-sans); font-size: var(--t-btn-m-size); line-height: var(--t-btn-m-line); font-weight: var(--t-btn-m-weight); letter-spacing: var(--t-btn-m-tracking); }
.t-btn-s { font-family: var(--font-sans); font-size: var(--t-btn-s-size); line-height: var(--t-btn-s-line); font-weight: var(--t-btn-s-weight); letter-spacing: var(--t-btn-s-tracking); }
.t-tag { text-transform: uppercase; }