.lp-hero{padding:clamp(2rem,4vw,3.5rem) clamp(1.625rem,4vw,3.25rem);border:1px solid var(--line);border-radius:var(--radius);
  background:radial-gradient(circle at 8% 10%,rgba(69,198,191,.10),transparent 340px),
             radial-gradient(circle at 94% 6%,rgba(246,124,137,.08),transparent 320px),var(--surface);
  box-shadow:var(--shadow)}
.lp-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:clamp(1.5rem,3vw,3.25rem);align-items:center}
.lp-hero-art{margin:0;align-self:center}
/* 方形原圖上緣本來就是留白,直接放會把 hero 撐高、把工具卡推到摺線下。
   裁成 4:3 並偏下取景,留住書本與浮起的卡片。 */
.lp-hero-art img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;object-position:center 62%;border-radius:18px}
/* 窄螢幕收起插畫:這是工具站,首屏該讓使用者先看到三張工具卡,
   裝飾圖擠在中間只會把選擇往下推。
   這裡用 px 不用 rem:media query 的 rem 依規範以 root 初始值 16px 計算,
   不吃本站 html{font-size:clamp(16px,1.25vw,25px)},寫 rem 會讓人誤判斷點。 */
@media (max-width:900px){
  .lp-hero-grid{grid-template-columns:1fr}
  .lp-hero-art{display:none}
}
.lp-hero .eyebrow{display:inline-block;padding:0.25rem 0.75rem;border-radius:999px;background:var(--teal-soft);
  color:var(--teal-strong);font-size:0.75rem;font-weight:900;letter-spacing:.04em}
.lp-hero h1{margin:1.125rem 0 0.75rem;font-family:"Noto Serif TC","Songti TC",serif;
  font-size:clamp(1.875rem,3.4vw,2.875rem);font-weight:900;line-height:1.3;letter-spacing:.01em;text-wrap:balance}
.lp-hero h1 em{font-style:normal;color:var(--teal-strong)}
.lp-hero p{margin:0;max-width:56ch;color:var(--muted);font-size:1.0625rem;line-height:1.95}
.lp-stats{display:flex;gap:1.625rem;flex-wrap:wrap;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.lp-stats div{display:flex;flex-direction:column;gap:0.125rem}
.lp-stats b{font-family:"Noto Serif TC","Songti TC",serif;font-size:1.5rem;font-variant-numeric:tabular-nums}
.lp-stats span{color:#9aa3ad;font-size:0.75rem}
.lp-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.125rem;margin-top:1.625rem}
.lp-tool{display:flex;flex-direction:column;gap:0.625rem;padding:1.625rem 1.625rem 1.5rem;border:1px solid var(--line);
  border-radius:20px;background:var(--surface);text-decoration:none;color:inherit;
  box-shadow:var(--shadow);transition:transform .18s,border-color .18s}
.lp-tool:hover{transform:translateY(-2px);border-color:var(--teal)}
.lp-tool .bar{height:0.1875rem;border-radius:2px;width:2.75rem}
.lp-tool h2{margin:0;font-family:"Noto Serif TC","Songti TC",serif;font-size:1.3125rem;font-weight:900}
.lp-tool p{margin:0;color:var(--muted);font-size:0.90625rem;line-height:1.9}
.lp-tool h2{font-size:1.15625rem;line-height:1.5}
.lp-tool .who{color:#9aa3ad;font-size:0.75rem}
.lp-tool .who b{color:var(--ink);font-size:0.875rem}
.lp-tool .who i{font-style:normal;margin-left:0.5rem;padding:0.125rem 0.5625rem;border-radius:999px;
  background:var(--teal-soft);color:var(--teal-strong);font-size:0.71875rem;font-weight:900}
.lp-tool .tip{color:#9aa3ad;font-size:0.78125rem;padding-top:0.5rem;border-top:1px dashed #eef2f3}
.lp-tool .go{margin-top:auto;padding-top:0.625rem;color:var(--teal-strong);font-size:0.8125rem;font-weight:900}
.lp-try{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0.75rem}
.lp-try a{padding:1.125rem 1.25rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  color:inherit;text-decoration:none;font-size:0.90625rem;line-height:1.75}
.lp-try a:hover{border-color:var(--teal);color:var(--teal-strong)}
.lp-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1rem;margin-top:1.375rem;align-items:start}
.lp-why div{padding:1.375rem 1.5rem;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.lp-why b{display:block;margin-bottom:0.5rem;font-size:1rem;line-height:1.6}
.lp-why p{margin:0;color:var(--muted);font-size:0.90625rem;line-height:1.95}

/* 學測核心古文 15 篇:高中生從 Threads／搜尋進來多半是為了這 15 篇,
   首頁必須有入口。每篇連到「查詩」全文頁(原文＋逐段白話＋注釋),
   已有五步拆解專頁的另給一顆「拆解」。冊別標示只是各版本常見配置,
   文案已註明以學校課本為準,不寫死某一年的模考範圍。 */
.lp-fifteen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:0.75rem;margin-top:1rem}
.lp-era{padding:1rem 1.125rem 0.875rem;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.lp-era b{display:block;margin-bottom:0.5rem;font-family:"Noto Serif TC","Songti TC",serif;font-size:0.9375rem}
.lp-era b small{margin-left:0.375rem;color:#9aa3ad;font-weight:400;font-size:0.71875rem}
.lp-era ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.375rem}
.lp-era li{display:flex;align-items:baseline;gap:0.5rem;font-size:0.90625rem;line-height:1.7}
.lp-era li a{color:inherit;text-decoration:none;font-weight:700;white-space:nowrap}
.lp-era li a:hover{color:var(--teal-strong)}
.lp-era li .au{color:#9aa3ad;font-size:0.75rem;white-space:nowrap}
.lp-era li .x{margin-left:auto;padding:0.0625rem 0.5rem;border-radius:999px;background:var(--teal-soft);
  color:var(--teal-strong);font-size:0.6875rem;font-weight:900;text-decoration:none;white-space:nowrap}
.lp-fifteen-note{margin:0.75rem 0 0;color:#9aa3ad;font-size:0.78125rem;line-height:1.8}

@media(max-width:768px){
  .lp-tools,.lp-why,.lp-try{grid-template-columns:1fr}
  .lp-stats{gap:1.125rem}
}