/* mrlai.tw 全站共用：跟親子報報同一套（紙色、圓圓的標題字 Huninn、夜空開場、大圓角卡片） */
:root {
  --paper: #fffaf0; --ink: #1f2433; --muted: #6b7183; --faint: #8d9099; --line: #e6dfcd;
  --accent: #ff7a1a; --link: #c2560c; --night: #0d1b3d; --sun: #ffd23f;
  --head: "Huninn", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.8; }
a { color: var(--link); text-underline-offset: 3px; }

/* 全站導覽列：三區都一樣，在夜空上是白字，在紙上是深字 */
.sitenav { position: relative; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 12px 4vw; font: 600 15px/1 var(--body); }
.sitenav a { color: inherit; text-decoration: none; padding: 9px 13px; border-radius: 999px; opacity: .78; white-space: nowrap; }
.sitenav a:hover { opacity: 1; }
.sitenav a[aria-current] { opacity: 1; color: var(--link); background: rgba(255, 122, 26, .14); }
.sitenav .brand { font: 400 20px/1 var(--head); opacity: 1; margin-right: auto; padding-left: 4px; }
.sitenav.onhero { position: absolute; top: 0; left: 0; right: 0; }

/* 開場：紙色底，下方一點橘色光暈（2026-11-09 選定，取代原本的夜空星星） */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16vh 6vw 12vh; color: var(--ink); overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #ffd9b8 0%, #fff3e6 38%, var(--paper) 72%); }
.hero.small { padding: 13vh 6vw 10vh; }
.hero .stars { display: none; }
.hero h1 { position: relative; font: 400 clamp(42px, 6vw, 88px)/1.35 var(--head); margin: 0; }
.hero .sub { position: relative; font: 400 clamp(18px, 2vw, 25px)/1.8 var(--head); margin: 2vh auto 0; color: var(--muted); text-wrap: balance; max-width: 30em; }

/* 卡片 */
.shelf { max-width: 1100px; margin: -4vh auto 0; padding: 0 5vw 6vh; position: relative; display: grid; gap: 24px; }
.card { display: block; background: #fff; border-radius: 24px; box-shadow: 0 14px 40px rgba(10, 15, 40, .14); color: inherit; text-decoration: none; overflow: hidden; }
a.card { transition: transform .2s, box-shadow .2s; }
a.card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(10, 15, 40, .22); }
.tag { display: inline-block; font: 700 14px/1 var(--head); letter-spacing: .12em; color: #fff; background: var(--accent); border-radius: 6px; padding: .35em .6em; }
.btn { display: inline-block; font: 400 18px/1 var(--head); text-decoration: none; color: #fff; background: var(--accent); padding: .6em 1.2em; border-radius: 999px; }
.btn.alt { background: #fff; color: var(--ink); border: 2px solid var(--line); }

.foot { text-align: center; padding: 4vh 6vw 8vh; color: var(--muted); font-size: 14px; line-height: 1.8; }
.foot a { color: inherit; }