/* 英文版官網（2026-10-30）：版面、動畫都跟中文版共用 ../site.css、../site.js，這裡只蓋英文需要不一樣的地方。
   字型：粉圓的英文字（scripts/site_font.py 另外切一份只有英數標點的 huninn-en.woff2，不用載中文字）。
   注音那段換成「跟讀字幕」：英文片的字幕念到哪個字、哪個字變黃，底下紙卡放大同一句，一個字一個字亮。 */
@font-face { font-family: 'HuninnEN'; src: url('../fonts/huninn-en.woff2') format('woff2'); font-display: swap; }
/* 不能把中文的 'Huninn' 放在備援：英文字型還在下載時，瀏覽器會把清單裡的網路字型一起抓（多載 100 KB 中文字）。切換鈕的「中文」兩個字已經切進 huninn-en */
:root { --font: 'HuninnEN', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { line-height: 1.65; }
h1, h2, h3 { letter-spacing: 0; }
h2 { line-height: 1.25; }

/* 主標題「Follow the / yellow word」：一個單字一張字卡（site.js 看 <html lang="en"> 改成照單字拆）。
   Follow 天藍、the 莓果、yellow 黃色（<em>，對上影片字幕正在變黃的字；梗是綠野仙蹤的 Follow the yellow brick road）、word 綠色 */
.hero h1 { font-size: clamp(40px, 4.6vw, 62px); }
.hero h1 .h1-a { font-size: .46em; padding: .2em .7em .16em; }
.hero h1 .h1-b { line-height: 1.32; }
.hero h1 .h1-b .ch { padding: .02em .2em .06em; margin: 0 .08em .14em 0; border-radius: .22em .3em .2em .26em; }
.h1-b > .ch:nth-child(1) { --r: -3deg; }
.h1-b > .ch:nth-child(2) { --r: 3deg; }
.h1-b em .ch { --r: -2deg; font-size: 1.08em; }
.h1-b > .ch:nth-child(5) { --t: var(--leaf); --r: 3deg; }
.lead { font-size: 19px; }

/* 跟讀字幕：框住畫面裡的字幕條（量的：左右各 22.3%、上 86.3%、下 3.3%，往外留一點） */
.readalong .zy-mark { left: 21.2%; right: 21.2%; top: 84.8%; bottom: 2%; }
.readalong .zy-big { font-size: clamp(22px, 2.5vw, 34px); padding: 12px 14px 14px; }
.ra-w { display: inline-block; padding: 0 .14em; border-radius: .22em; animation: ra-lit 3.2s linear infinite; }
.ra-w:nth-child(2) { animation-delay: .5s; }
.ra-w:nth-child(3) { animation-delay: 1s; }
.ra-w:nth-child(4) { animation-delay: 1.5s; }
@keyframes ra-lit { 0%, 15% { background: var(--sun); } 15.5%, 100% { background: transparent; } }

/* 故事屋的封面：8 本，5 欄（最後的「More on the way」佔 2 格剛好兩排） */
.pass-covers { grid-template-columns: repeat(5, 1fr); }
.pass-more { white-space: normal; text-align: center; padding: 2px 4px; }

/* 書櫃 8 本：4 欄、2 欄剛好排滿，「More stories on the way」自己一排；3 欄（平板）時最後一排空一格，讓它補進去 */
@media (max-width: 960px) and (min-width: 761px) {
  .books .books-more { grid-column: auto; flex-direction: column; text-align: center; font-size: 18px; }
}

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(38px, 12.4vw, 54px); }
  .readalong .zy-big { font-size: min(6.2vw, 28px); }
  .lead { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-w:first-child { background: var(--sun); }
}