/* ============================================================
   Hua．Ye × 學院 — 基礎樣式(reset + 排版 + 版面骨架)
   只放「全站都適用」的東西;元件樣式請寫在 components.css
   ============================================================ */

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font-zh);
  font-size:var(--fs-base);
  line-height:1.75;
  color:var(--ink);
  background:var(--page-bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* 頁面主體:奶油底 + 右上角柔光暈,做出「奶油感」 */
#page{
  flex:1 0 auto;
  background:
    radial-gradient(ellipse 700px 500px at 88% -5%, var(--cream-deep) 0%, transparent 62%),
    radial-gradient(ellipse 600px 400px at 5% 100%, rgba(217,231,230,.5) 0%, transparent 60%),
    linear-gradient(170deg, var(--cream) 0%, var(--cream-warm) 50%, var(--cream) 100%);
}

img,svg,video{ max-width:100%; height:auto; display:block; }

/* hidden 屬性必須勝過任何 display 設定。
   少了這行,像 .form{display:flex} 這種樣式會蓋掉 hidden,
   導致該藏起來的區塊照樣顯示出來。 */
[hidden]{ display:none !important; }

a{ color:var(--coral-deep); text-decoration:none; transition:color var(--dur) var(--ease); }
a:hover{ color:var(--ink); }

/* 鍵盤操作時的聚焦框(無障礙,不可移除) */
:focus-visible{ outline:2px solid var(--coral-deep); outline-offset:3px; border-radius:var(--r-sm); }

h1,h2,h3,h4{ font-family:var(--font-en); font-weight:600; line-height:1.3; color:var(--ink); }
h1{ font-size:var(--fs-3xl); letter-spacing:-.01em; }
h2{ font-size:var(--fs-2xl); }
h3{ font-size:var(--fs-xl); }

p{ margin:0 0 var(--sp-4); }
p:last-child{ margin-bottom:0; }

ul,ol{ padding-left:1.3em; }
li{ margin-bottom:var(--sp-2); }

hr{ border:0; border-top:1px solid var(--line); margin:var(--sp-6) 0; }

/* ---- 版面容器 ---- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--sp-5);
}
.container--narrow{ max-width:720px; }

.section{ padding-block:var(--sp-8); }
.section--tight{ padding-block:var(--sp-6); }

/* ---- 常用小工具 class ---- */
.muted{ color:var(--ink-soft); }
.small{ font-size:var(--fs-sm); }
.center{ text-align:center; }
.stack > * + *{ margin-top:var(--sp-4); }

/* 只給螢幕報讀軟體看的文字(無障礙) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 跳過導覽列(鍵盤使用者按 Tab 第一個會看到) */
.skip-link{
  position:absolute; left:var(--sp-4); top:-100px; z-index:100;
  background:var(--ink); color:var(--cream);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-sm);
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{ top:var(--sp-4); color:var(--cream); }

/* 手機 */
@media (max-width:640px){
  h1{ font-size:var(--fs-2xl); }
  h2{ font-size:var(--fs-xl); }
  .section{ padding-block:var(--sp-6); }
  .container{ padding-inline:var(--sp-4); }
}