/* =========================================================
   ایران ILO — صفحه مقاله (article.html)
   بر پایه توکن‌ها و کامپوننت‌های index.css
   ========================================================= */

.article-page {
  --measure: 760px;
  --warn: #b45309;
  --warn-soft: #fdf1e6;
  --danger: #b42318;
  --danger-soft: #fdecec;
}
.article-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.article-page [id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); }
.nav__link[aria-current="page"] { color: var(--accent); }

/* ---------- Reading progress ---------- */
.readbar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.readbar span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .1s linear; }

/* ---------- Shared bits ---------- */
.crumbs { margin-bottom: 1.5rem; font-size: .82rem; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; gap: .4rem; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; border-left: 1.5px solid #b8bec9; border-bottom: 1.5px solid #b8bec9; transform: rotate(45deg); margin-inline: .15rem; }
.crumbs a { transition: color var(--t); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

.acat { display: inline-block; font-size: .8rem; font-weight: 500; padding: .15rem .75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); transition: background var(--t); }
a.acat:hover { background: #d3e9e5; }
.acat--sm { font-size: .72rem; padding: .05rem .6rem; }

.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); transition: border-color var(--t), background var(--t), color var(--t); }
.icon-btn:hover { border-color: var(--ink); }
.icon-btn .ic { grid-area: 1 / 1; width: 18px; height: 18px; }
.icon-btn .ic--done { display: none; }
.icon-btn.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }
.icon-btn.is-done .ic { display: none; }
.icon-btn.is-done .ic--done { display: block; }
.ic--flip { transform: scaleY(-1); }

/* ---------- Header ---------- */
.ahero { padding-top: 2rem; }

.ahero__title { margin-top: 1rem; max-width: 22ch; font-size: 2.6rem; font-weight: 900; line-height: 1.5; letter-spacing: -.015em; }
.ahero__lead { margin-top: 1rem; max-width: 68ch; font-size: 1.12rem; line-height: 2; color: var(--muted); }

.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; padding-block: 1.1rem; border-block: 1px solid var(--line); }
.byline__author { display: flex; align-items: center; gap: .7rem; }
.byline__author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.byline__author span { display: flex; flex-direction: column; line-height: 1.5; }
.byline__author strong { color: var(--ink); font-size: .95rem; transition: color var(--t); }
.byline__author:hover strong { color: var(--accent); }
.byline__author small { font-size: .76rem; color: var(--muted); }
.byline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; font-size: .82rem; color: var(--muted); }
.byline__meta li, .byline__meta a { display: inline-flex; align-items: center; gap: .35rem; }
.byline__meta a:hover { color: var(--accent); }
.byline__meta .ic { width: 16px; height: 16px; }
.byline__tools { display: flex; gap: .4rem; margin-right: auto; }

.acover { margin-top: 2rem; }
.acover img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--soft); }
.acover figcaption { margin-top: .6rem; font-size: .8rem; color: var(--muted); }

/* ---------- Layout ---------- */
.alayout { display: grid; grid-template-columns: minmax(0, var(--measure)) 300px; justify-content: space-between; gap: 4rem; padding-block: 3rem 5rem; }
.alayout__main { min-width: 0; }
.alayout__side { align-self: stretch; }

/* key takeaways */
.tldr { padding: 1.25rem 1.5rem; border-radius: var(--r-lg); background: var(--accent-soft); border-right: 4px solid var(--accent); margin-bottom: 2.5rem; }
.tldr h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; color: var(--accent-ink); margin-bottom: .6rem; }
.tldr h2 .ic { width: 20px; height: 20px; }
.tldr ul { display: grid; gap: .45rem; }
.tldr li { position: relative; padding-right: 1.1rem; font-size: .95rem; color: var(--ink); line-height: 1.9; }
.tldr li::before { content: ""; position: absolute; right: 0; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* mobile toc */
.toc-m { display: none; }

/* ---------- Prose ---------- */
.prose { font-size: 1.06rem; line-height: 2.1; color: var(--text); }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { position: relative; font-size: 1.55rem; font-weight: 800; line-height: 1.6; margin-top: 3.25rem; }
.prose h3 { position: relative; font-size: 1.2rem; font-weight: 700; line-height: 1.6; }
.prose h2 + p, .prose h3 + p { margin-top: .75rem; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a:not(.btn) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.prose > ul:not(.checklist) { display: grid; gap: .55rem; padding-right: 1.25rem; list-style: disc; }
.prose > ul:not(.checklist) li::marker { color: var(--accent); }

/* heading anchor (JS adds it) */
.h-anchor {
  position: absolute; right: -2rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px;
  color: var(--muted); opacity: 0; transition: opacity var(--t), color var(--t), background var(--t);
}
.h-anchor .ic { width: 16px; height: 16px; }
:is(h2, h3):hover > .h-anchor, .h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover { color: var(--accent); background: var(--accent-soft); }
.h-anchor.is-done { opacity: 1; color: #fff; background: var(--accent); }

.afig { margin-block: 2rem; }
.afig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--soft); }
.afig figcaption { margin-top: .6rem; font-size: .82rem; color: var(--muted); line-height: 1.8; text-align: center; }

/* signs */
.sign { position: relative; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; transition: border-color var(--t), box-shadow var(--t); }
.sign:hover { border-color: #d3d8e1; box-shadow: 0 16px 36px -28px rgba(11,18,32,.35); }
.sign + .sign { margin-top: 1rem; }
.sign h3 { display: flex; align-items: center; gap: .75rem; padding-left: 7rem; }
.sign__n { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: #fff; font-size: .95rem; font-weight: 800; }
.sign p { margin-top: .6rem; font-size: 1rem; }
.sign .sign__do { margin-top: .9rem; padding: .7rem .9rem; border-radius: var(--r); background: var(--soft); font-size: .92rem; line-height: 1.9; }
.sign__do strong { color: var(--accent-ink); }
.sev { position: absolute; top: 1.55rem; left: 1.5rem; font-size: .72rem; font-weight: 500; padding: .1rem .6rem; border-radius: 999px; line-height: 1.7; }
.sev::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-left: .35rem; vertical-align: middle; }
.sev--high { background: var(--danger-soft); color: var(--danger); }
.sev--mid { background: var(--warn-soft); color: var(--warn); }
.sev--low { background: var(--soft); color: var(--muted); }

/* in-article course promo */
.prose .promo { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-block: 2.5rem; padding: 1.5rem 1.75rem; border-radius: var(--r-lg); background: var(--ink); color: rgba(255,255,255,.75); position: relative; overflow: hidden; isolation: isolate; }
.promo::before { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; left: -80px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(15,110,99,.6), transparent 70%); }
.promo__kicker { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: #8fd3c8; }
.promo__kicker .ic { width: 16px; height: 16px; }
.promo strong { display: block; color: #fff; font-size: 1.15rem; margin-top: .2rem; }
.promo p { margin-top: .3rem; font-size: .9rem; line-height: 1.9; }
.promo .btn { flex: 0 0 auto; }
.promo .btn .ic { width: 18px; height: 18px; }

/* callouts */
.callout { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.25rem; border-radius: var(--r); border: 1px solid; }
.callout > .ic { width: 22px; height: 22px; margin-top: .3rem; }
.callout strong { display: block; font-size: .95rem; }
.callout p { margin-top: .2rem; font-size: .95rem; line-height: 1.95; }
.callout--warn { background: var(--warn-soft); border-color: #f6dcc2; color: #7c3d0a; }
.callout--warn strong { color: var(--warn); }
.callout--tip { background: var(--accent-soft); border-color: #cfe5e1; color: var(--accent-ink); }
.callout--tip strong { color: var(--accent-ink); }

/* numbered steps */
.steps-list { list-style: none; counter-reset: st; display: grid; gap: .25rem; }
.steps-list li { position: relative; counter-increment: st; padding: .35rem 3rem .9rem 0; }
.steps-list li::before { content: counter(st, persian); position: absolute; right: 0; top: .45rem; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .9rem; line-height: 1; }
.steps-list li:not(:last-child)::after { content: ""; position: absolute; right: 15px; top: 2.6rem; bottom: -.2rem; width: 2px; background: var(--line); }

/* table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem; line-height: 1.7; }
.table-wrap th, .table-wrap td { padding: .85rem 1rem; text-align: right; border-bottom: 1px solid var(--line); }
.table-wrap thead th { background: var(--soft); font-size: .8rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.table-wrap tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.table-wrap tbody tr:last-child > * { border-bottom: 0; }
.table-wrap tr.is-best { background: #f3f9f8; }
.best { display: inline-block; margin-right: .35rem; font-size: .68rem; font-weight: 500; padding: 0 .45rem; border-radius: 6px; background: var(--accent); color: #fff; vertical-align: middle; }

/* pull quote */
.pull { margin-block: 2.5rem; padding: 1.5rem 0; border-block: 1px solid var(--line); text-align: center; }
.pull p { font-size: 1.3rem; font-weight: 700; line-height: 1.9; color: var(--ink); }
.pull p::before { content: "«"; color: var(--accent); }
.pull p::after { content: "»"; color: var(--accent); }
.pull cite { display: block; margin-top: .6rem; font-style: normal; font-size: .85rem; color: var(--muted); }

/* checklist */
.checklist { display: grid; gap: .6rem; }
.checklist li { position: relative; padding-right: 2rem; }
.checklist li::before {
  content: ""; position: absolute; right: 0; top: .5em; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft);
}
.checklist li::after {
  content: ""; position: absolute; right: 7px; top: calc(.5em + 4px); width: 6px; height: 10px;
  border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* faq */
.afaq { display: grid; gap: .6rem; }
.afaq details { border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color var(--t); }
.afaq details[open] { border-color: #cfd5de; }
.afaq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.8; }
.afaq summary::-webkit-details-marker { display: none; }
.afaq summary .ic { width: 18px; height: 18px; color: var(--muted); transition: transform var(--t); }
.afaq details[open] summary .ic { transform: rotate(180deg); }
.afaq details p { padding: 0 1.1rem 1rem; font-size: .97rem; line-height: 2; }

/* ---------- After the article ---------- */
.atags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 3rem; font-size: .85rem; color: var(--muted); }
.atags a { padding: .25rem .8rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); transition: border-color var(--t), color var(--t); }
.atags a::before { content: "#"; color: var(--muted); margin-left: .15rem; }
.atags a:hover { border-color: var(--accent); color: var(--accent); }

.feedback { margin-top: 2rem; padding: 1.1rem 1.25rem; border-radius: var(--r-lg); background: var(--soft); }
.feedback__ask { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.feedback__ask strong { color: var(--ink); }
.feedback__btns { display: flex; gap: .5rem; }
.feedback__btns .ic { width: 17px; height: 17px; }
.feedback__btns .btn:hover { border-color: var(--accent); color: var(--accent); }
.feedback__thanks { color: var(--accent-ink); font-weight: 500; }
.feedback.is-done .feedback__ask { display: none; }

.author { display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); }
.author__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.author__body small { font-size: .76rem; color: var(--muted); }
.author h2 { font-size: 1.15rem; }
.author p { margin-top: .4rem; font-size: .93rem; line-height: 1.95; color: var(--text); }
.author__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .75rem; font-size: .9rem; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.pager__item { display: grid; gap: .3rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t), box-shadow var(--t); }
.pager__item:hover { border-color: var(--accent); box-shadow: 0 12px 30px -24px rgba(15,110,99,.6); }
.pager__item small { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); }
.pager__item small .ic { width: 16px; height: 16px; }
.pager__item strong { color: var(--ink); font-size: .95rem; line-height: 1.8; }
.pager__item--next { text-align: left; }
.pager__item--next small { justify-content: flex-end; }

/* comments */
.acomments { margin-top: 3.5rem; }
.acomments__title { display: flex; align-items: center; gap: .6rem; font-size: 1.4rem; font-weight: 800; padding-bottom: .75rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.acomments__title .count { font-size: .8rem; font-weight: 500; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 .55rem; }
.comments > .comment { padding-block: 1.25rem; }
.comments > .comment:first-child { padding-top: 0; }
.comments > .comment + .comment { border-top: 1px solid var(--line); }
.comment { display: grid; grid-template-columns: 44px 1fr; gap: .9rem; }
.comment__avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.comment__avatar--admin { background: var(--ink); color: #fff; font-size: .7rem; }
.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .65rem; margin-bottom: .2rem; }
.comment__head strong { color: var(--ink); }
.comment__head time { font-size: .78rem; color: var(--muted); margin-right: auto; }
.comment p { font-size: .95rem; line-height: 1.95; }
.comment__reply { margin-top: .35rem; font-size: .8rem; color: var(--accent); font-weight: 500; }
.comment__reply:hover { text-decoration: underline; text-underline-offset: 4px; }
.comment--reply { margin-top: 1rem; padding: 1rem; background: var(--soft); border-radius: var(--r); }
.badge-author { font-size: .7rem; font-weight: 500; padding: 0 .45rem; border-radius: 6px; background: var(--ink); color: #fff; }

.cform { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: 1rem; }
.cform__head h3 { font-size: 1.05rem; }
.cform__head p { font-size: .8rem; color: var(--muted); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cform label { display: grid; gap: .35rem; font-size: .85rem; color: var(--muted); }
.cform input:not([type="checkbox"]), .cform textarea { padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font: inherit; font-size: .95rem; color: var(--ink); transition: border-color var(--t), box-shadow var(--t); resize: vertical; }
.cform textarea::placeholder { color: #a3a9b4; }
.cform input:focus, .cform textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cform__count { justify-self: end; font-size: .72rem; color: var(--muted); }
.cform label.cform__check { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.cform__check input { width: 18px; height: 18px; accent-color: var(--accent); }
.cform .btn { justify-self: start; }
.cform.is-replying { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); transition: box-shadow var(--t); }

/* ---------- Sidebar ---------- */
.aside-sticky { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1rem; }
.atoc { padding: 1.1rem 1.1rem .75rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.atoc__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.atoc__head strong { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); font-size: .92rem; }
.atoc__head .ic { width: 18px; height: 18px; color: var(--accent); }
.atoc__head small { font-size: .72rem; color: var(--muted); }
.atoc__bar { height: 3px; margin-block: .75rem .5rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.atoc__bar span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .1s linear; }
.atoc [data-toc] { max-height: calc(100vh - var(--header-h) - 20rem); min-height: 160px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.toc-list { list-style: none; display: grid; gap: .1rem; font-size: .86rem; line-height: 1.7; }
.toc-list ol { list-style: none; display: grid; gap: .05rem; margin: .1rem 0 .3rem; padding-right: .9rem; border-right: 1px solid var(--line); margin-right: .7rem; }
.toc-list a { display: block; padding: .35rem .6rem; border-radius: 8px; color: var(--muted); transition: color var(--t), background var(--t); }
.toc-list ol a { padding-block: .25rem; font-size: .82rem; }
.toc-list a:hover { color: var(--ink); background: var(--soft); }
.toc-list a.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 500; }

.side-course { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--soft); border-top: 3px solid var(--accent); }
.side-course > div { padding: 1rem 1.1rem 1.1rem; }
.side-course small { font-size: .72rem; color: var(--accent); font-weight: 500; }
.side-course strong { display: block; color: var(--ink); font-size: .98rem; }
.side-course ul { display: grid; gap: .25rem; margin-block: .5rem .9rem; font-size: .82rem; color: var(--muted); }
.side-course li { display: flex; align-items: center; gap: .4rem; }
.side-course .ic { width: 16px; height: 16px; color: var(--accent); }

/* ---------- Related ---------- */
.rcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.rcard a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; transition: transform var(--t), box-shadow var(--t); }
.rcard a:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(11,18,32,.3); }
.rcard figure { overflow: hidden; }
.rcard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.rcard a:hover img { transform: scale(1.04); }
.rcard__body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.15rem 1.15rem; flex: 1; }
.rcard__body .acat { align-self: flex-start; }
.rcard h3 { font-size: 1rem; line-height: 1.8; transition: color var(--t); }
.rcard a:hover h3 { color: var(--accent); }
.rcard__meta { display: flex; gap: 1rem; margin-top: auto; font-size: .78rem; color: var(--muted); }
.rcard__meta span::before { content: "·"; margin-left: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .alayout { grid-template-columns: minmax(0, 1fr) 270px; gap: 2.5rem; }
  .h-anchor { display: none; }
}
@media (max-width: 960px) {
  .ahero__title { font-size: 2rem; }
  .alayout { grid-template-columns: minmax(0, 1fr); padding-top: 2rem; }
  .alayout__side { display: none; }
  .toc-m { display: block; margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
  .toc-m summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .85rem 1.1rem; font-weight: 700; color: var(--ink); }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary .ic { width: 18px; height: 18px; color: var(--accent); }
  .toc-m__caret { margin-right: auto; color: var(--muted) !important; transition: transform var(--t); }
  .toc-m[open] .toc-m__caret { transform: rotate(180deg); }
  .toc-m nav { padding: 0 .6rem .8rem; }
  .rcards { grid-template-columns: 1fr 1fr; }
  .rcard:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .ahero { padding-top: 1.25rem; }
  .ahero__title { font-size: 1.6rem; }
  .ahero__lead { font-size: 1rem; }
  .byline { gap: .9rem; }
  .byline__meta li:nth-child(2) { display: none; }
  .byline__tools { margin-right: 0; }
  .acover { margin-top: 1.25rem; padding-inline: 0; }
  .acover img { aspect-ratio: 16 / 9; border-radius: 0; }
  .acover figcaption { padding-inline: 1.25rem; }
  .prose { font-size: 1rem; line-height: 2; }
  .prose h2 { font-size: 1.3rem; margin-top: 2.5rem; }
  .prose h3 { font-size: 1.08rem; }
  .sign { padding: 1.1rem; }
  .sign h3 { padding-left: 0; align-items: flex-start; }
  .sev { position: static; display: inline-block; margin-top: .6rem; }
  .prose .promo { flex-direction: column; align-items: stretch; padding: 1.25rem; }
  .pull p { font-size: 1.12rem; }
  .author { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .author__links { justify-content: center; }
  .pager { grid-template-columns: 1fr; }
  .cform__row { grid-template-columns: 1fr; }
  .rcards { grid-template-columns: 1fr; }
  .rcard:nth-child(3) { display: block; }
}

/* ---------- Print ---------- */
@media print {
  .header, .footer, .readbar, .alayout__side, .toc-m, .byline__tools, .feedback, .pager,
  .acomments, .arelated, .contact, .to-top, .promo, .h-anchor, .crumbs { display: none !important; }
  .alayout { display: block; padding: 0; }
  .prose { font-size: 11pt; line-height: 1.9; }
  .sign, .callout, .table-wrap { break-inside: avoid; }
  .afaq details > p { display: block; }
  .acover img { aspect-ratio: auto; max-height: 8cm; }
}

/* ---------- Mobile reading dock ---------- */
.rdock, .table-hint { display: none; }
@media (max-width: 960px) {
  .rdock {
    position: fixed; z-index: 45; inset: auto .75rem calc(.75rem + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: .5rem; padding: .4rem;
    background: rgba(255,255,255,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 18px 40px -18px rgba(11,18,32,.45);
    transform: translateY(calc(100% + 2rem)); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .rdock.is-visible { transform: none; }
  .rdock__toc { flex: 1; min-width: 0; display: flex; align-items: center; gap: .65rem; padding: .15rem .35rem; text-align: right; }
  .rdock__ring { position: relative; width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); }
  .rdock__ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .rdock__ring circle { fill: none; stroke-width: 3; }
  .rdock__track { stroke: var(--line); }
  .rdock__bar { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transition: stroke-dashoffset .15s linear; }
  .rdock__ring .ic { width: 18px; height: 18px; }
  .rdock__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
  .rdock__text small { font-size: .7rem; color: var(--muted); }
  .rdock__text strong { font-size: .86rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rdock__btn { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: var(--ink); color: #fff; transition: background var(--t); }
  .rdock__btn .ic { grid-area: 1 / 1; width: 20px; height: 20px; }
  .rdock__btn .ic--done { display: none; }
  .rdock__btn.is-done { background: var(--accent); }
  .rdock__btn.is-done .ic { display: none; }
  .rdock__btn.is-done .ic--done { display: block; }
  body:has(.rdock.is-visible) .contact, body:has(.rdock.is-visible) .to-top { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .contact, .to-top { transition: bottom .3s ease; }

  #toc-sheet .toc-list { font-size: .95rem; }
  #toc-sheet .toc-list a { padding: .6rem .7rem; }
  #toc-sheet .toc-list ol a { font-size: .88rem; padding-block: .45rem; }
}
@media (max-width: 640px) {
  .table-hint { display: flex; align-items: center; gap: .35rem; margin-bottom: -.6rem; font-size: .78rem; color: var(--muted); }
  .table-hint .ic { width: 15px; height: 15px; }
  .arelated .rail > .rcard { flex-basis: 80%; }
  .arelated .rail .rcard a:hover { transform: none; }
  .sign:hover { box-shadow: none; }
}