/* 親子報報・閱讀版：圖配文、分短中長三級、調整字的大小（注音開關在 scrolly.css，全站共用）。
   跟動畫版共用 scrolly.css（注音、照片、比高的圖、失敗了好多次…），這裡只放閱讀版自己的版面。 */
:root { --rfs: 24px; --col: 760px; }
html[data-fs="s"] { --rfs: 20px; }
html[data-fs="l"] { --rfs: 30px; }
html { scroll-padding-top: 76px; }

/* ---------- 級別：data-lv="s m l" 表示這一段在哪幾級出現 ---------- */
html[data-lv="s"] [data-lv]:not([data-lv~="s"]),
html[data-lv="m"] [data-lv]:not([data-lv~="m"]),
html[data-lv="l"] [data-lv]:not([data-lv~="l"]) { display: none !important; }

/* ---------- 上面的設定列 ---------- */
.rbar { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 10px 14px; background: rgba(255, 250, 240, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); font: 600 15px var(--body); }
.rbar .grp { display: flex; align-items: center; gap: 6px; }
.rbar .lab { color: var(--muted); font-weight: 400; margin-right: 2px; }
.rbar button { font: inherit; border: 2px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 14px; cursor: pointer; min-width: 44px; min-height: 38px; }
.rbar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.rbar .back { text-decoration: none; color: var(--ink); border: 2px solid var(--line); border-radius: 999px; padding: 7px 14px; background: #fff; }

/* ---------- 開場 ---------- */
.rhero { min-height: auto; padding: 9vh 6vw 8vh; }
.rhero h1 { font-size: clamp(48px, 8vw, 96px); }

/* ---------- 文章 ---------- */
.article { max-width: var(--col); margin: 0 auto; padding: 4vh 5vw 6vh; }
.r { margin: 0 0 3.2em; }
.r h2 { font: 400 calc(var(--rfs) * 1.35)/1.5 var(--head); margin: 0 0 .6em; text-wrap: balance; }
.r p { font: 400 var(--rfs)/1.95 var(--head); margin: 0 0 .8em; text-wrap: pretty; }
/* 閱讀版是一段一段的文章：小段不用整塊不拆（那是給字卡用的），一行排滿比較好讀；text-wrap: pretty 會避免最後一行只剩一個字 */
.r p .phr, .r li .phr, .r figcaption .phr { display: inline; }
.r p .phr b { white-space: normal; }
.r p b { color: var(--accent-dark, #c25205); }
.r .more { background: #eef6ff; border-left: 6px solid #5b9bd5; border-radius: 0 16px 16px 0; padding: .8em 1.1em; margin: 1em 0; }
.r .more .t { display: block; font: 700 .8em var(--head); color: #2c6aa8; margin-bottom: .2em; }
.r .more p { font-size: calc(var(--rfs) * .9); }
.r .more p:last-child { margin: 0; }
.r figure { margin: 0 0 1.1em; }
.r figure img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 26px rgba(0, 0, 0, .12); background: #ddd; }
.r figure figcaption { font: 400 calc(var(--rfs) * .78)/1.7 var(--head); color: var(--muted); margin-top: .5em; }
.r .two { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-bottom: 1.1em; }
.r .two figure { margin: 0; }
.r .two img { aspect-ratio: 4 / 3; object-fit: cover; }
.r .four { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); margin-bottom: 1.1em; }
.r .four img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
@media (max-width: 560px) { .r .four { grid-template-columns: repeat(2, 1fr); } }
.r .credit { display: block; font: 400 12px/1.5 var(--body); color: var(--muted); margin-top: .3em; }
.r .credit a { color: var(--muted); }
/* 照片上的標示（颱風那張）沿用動畫版的 .real 樣式 */
.r .real { margin-top: 0; }
.r .real figcaption { font-size: calc(var(--rfs) * .78); color: var(--muted); }
.r .fig { margin-top: .5em; }
.r .fails .tally { margin: .6em 0 1.6em; }
.r .fails .found li { font-size: calc(var(--rfs) * .85); }
.r .fails .what { font-size: var(--rfs); }
.r .fails .say { font-size: calc(var(--rfs) * .9); }
.rthink { border-radius: 24px; padding: 2em 1.4em; }
.rthink .q { font-size: calc(var(--rfs) * 1.3); }
.r ol.steps { font: 400 var(--rfs)/1.9 var(--head); padding-left: 1.4em; }
.r .mats li { font-size: calc(var(--rfs) * .85); }
.rsrc { font: 400 15px/1.8 var(--body); color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.2em; }
.rsrc a { color: var(--ink); }
.r .fails .row { grid-template-columns: 1fr; }
.r .fails .marks { justify-content: flex-start; }
