/* article.css — the article page's own styling, for the static
   blog/<slug>.html pages (HQ site-spec A5, 2026-09-14).

   Extracted verbatim from article.html's two inline <style> blocks (the
   v3 shim and the .art-* magazine block) so the generated pages and the
   viewer share one contract. Until article.html is retired (A5 PR-C) it
   keeps its inline copy; after that this file is the only home. The
   html[lang] hide rules stay inline on every page, before this loads, so
   the other language never flashes. */

  :root {
    --gold: var(--v3-gold);
    --gold2: var(--v3-gold2);
    --washi: #F5EBD6;
    --ink: var(--v3-ink);
    --muted: #6B5346;
    --border: rgba(140, 101, 32, 0.18);
  }
  body.v3 main, body.v3 { background: var(--cream-50); }
  footer.footer-v4 { display: none !important; }

/* ───── Article-specific styles (shared with the legacy hardcoded
   /blog/*.html files so the look stays consistent) ───── */
:root{--art-ink:#1C1106;--art-mu:#7A6248;--art-go:#B5881A;--art-gold:#D9B96A;--art-clay:#9A6035;--art-wd:#8C5A28;--art-bg:#FAF7F2;--art-bg2:#F3EDE1;--art-bg3:#FEFCF8;--art-bdr:#D8C9AE;--art-bdrl:#EAE0CF;--art-line:#E2D6BC;}
/* Header: faithful port of xian's hansmed-academy-story-template-ver3.html
   article-hero (2026-08-26 late). Big Fraunces-500 title, dash eyebrow
   "Category / Practitioner article" (no chop — xian: "i dont need the
   汉box"), 17px dek, dotted story-meta under a plain hairline, cover
   plate below. Template's 10/11px micro-type raised to the 12px floor
   this project settled earlier; everything else per template. */
.art-topbar{max-width:1080px;margin:0 auto;padding:22px 28px 0;}
/* The desktop v3 nav is position:fixed (~80px tall, see the Phase-1
   note in courtyard-v3.css ~line 1088) and overlays the page, so the
   first content must clear it — same convention as .hero-v3's 120px.
   Mobile's .m-nav is sticky (occupies flow) and needs no offset;
   scoped >760px to match where the desktop nav actually shows. */
/* >=1001px only: below that courtyard-v3.css swaps the fixed desktop nav for
   .m-nav-only, which body{padding-top:64px} already offsets — 761px reserved
   ~102px of dead space across the whole tablet band. And 102px was SHORT: the
   nav is 129px just above the breakpoint and 107px from ~1100px, so the
   back-link sat under it. Tighter value goes on the wider, stable band. */
@media(min-width:1001px){.art-topbar{padding-top:150px;}}
@media(min-width:1101px){.art-topbar{padding-top:128px;}}
.art-back-top{display:inline-block;padding:10px 0;font-size:12.5px;font-weight:600;color:var(--art-mu);text-decoration:underline;text-underline-offset:3px;}
.art-back-top:hover{color:var(--art-ink);}
.art-back-top:focus-visible{outline:2px solid var(--art-clay);outline-offset:2px;}
.art-hero{background:transparent;padding:0 0 6px;position:relative;}
.art-hero.has-cover{padding-bottom:0;}
.art-hero-inner{max-width:900px;margin:0 auto;padding:0 28px;position:relative;}
.art-eyebrow{font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--art-clay);margin:40px 0 16px;}
.art-eyebrow::before{content:'';display:inline-block;width:28px;border-top:1px solid var(--art-clay);vertical-align:middle;margin:0 9px 3px 0;}
.art-title{font-family:'Fraunces',serif;font-size:clamp(46px,6.6vw,80px);font-weight:500;color:var(--art-ink);letter-spacing:-0.045em;line-height:1.02;margin:0 0 20px;max-width:920px;}
.art-title em{font-style:italic;color:var(--art-wd);}
/* ── Chinese title size. cjk-type.css applies font-size:1.1em !important to
   every [lang="zh"] element for the site-wide CJK bump. This template puts
   lang on the <h1> ITSELF, so that 1.1em resolved against the hero's 16px and
   rendered the Chinese title at 17.6px — the same size as the dek beneath it,
   against the 80px the English title gets. !important is required to win
   against that layer. xian picked ~0.68 of the English display size
   (2026-08-30): CJK glyphs read larger than Latin at equal px, and at full
   parity this title runs to three lines and pushes the cover below the fold. */
.art-title[lang="zh"]{font-size:clamp(32px,4.4vw,54px) !important;line-height:1.22 !important;letter-spacing:-0.01em !important;}
.art-zh-title{font-family:'Noto Serif SC',serif;font-size:17px;color:#5F4A33;font-weight:400;margin:0;letter-spacing:0.02em;max-width:650px;line-height:1.75;}
/* story-meta: dotted byline row under a plain hairline, per template. */
.art-meta{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--art-bdr);font-size:12px;color:#5F4A33;}
.art-meta .art-dot{color:var(--art-bdr);}
.art-name{font-size:12px;font-weight:400;color:#5F4A33;}
.art-name strong{color:var(--art-clay);font-weight:600;}
.art-date{font-size:12px;color:#5F4A33;}
.art-tags{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto;}
.art-tag{font-size:12.5px;padding:4px 12px;border-radius:12px;background:var(--art-bg2);color:#665039;border:1px solid var(--art-bdr);}
/* Cover plate below the header. 3:2, the whole cover (xian, 2026-09-13):
   every cover is 1536x1024 and was composed at full frame, and the old
   2.2:1 box capped at 430px kept only the middle band at the wide tiers
   (~3.3:1). aspect-ratio reserves the box before the image loads, so it
   stays CLS-safe without a fixed height; object-fit:cover is a no-op at
   the matching ratio. Radius 18, washi ground, soft period-photo grade.
   Coverless legacy articles just have no plate. */
.art-cover{max-width:1080px;margin:30px auto 0;padding:0 28px;position:relative;}
.art-cover img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:18px;border:1px solid var(--art-line);background:#EDE7D8;filter:saturate(0.8) sepia(0.08);display:block;}
.art-body{max-width:720px;margin:0 auto;padding:56px 28px;}
.art-body h2{font-family:'Fraunces',serif;font-size:clamp(22px,3.5vw,30px);font-weight:400;color:var(--art-ink);letter-spacing:-0.02em;margin:48px 0 14px;line-height:1.2;}
.art-body h2 em{font-style:normal;color:var(--art-wd);}
.art-body h3{font-family:'Fraunces',serif;font-size:clamp(18px,2.5vw,22px);font-weight:500;color:var(--art-ink);margin:28px 0 10px;}
.art-body p{font-size:18px;color:#3D2610;line-height:1.82;margin-bottom:18px;font-weight:300;}
.art-body p strong{font-weight:500;color:var(--art-ink);}
.art-body img{max-width:100%;height:auto;border-radius:12px;margin:24px 0;}
.art-body ul,.art-body ol{margin:14px 0 22px;padding-left:24px;color:#3D2610;font-weight:300;line-height:1.78;}
.art-body li{margin-bottom:8px;}
.art-body blockquote{margin:30px 0;padding:18px 24px;background:var(--art-bg2);border-left:3px solid var(--art-go);border-radius:0 12px 12px 0;font-family:'Fraunces',serif;font-size:19px;font-style:normal;color:var(--art-ink);line-height:1.55;}
/* Comparison tables (BlockRenderer `table`). THE WRAPPER SCROLLS, NOT THE PAGE:
   an English three-column table renders about twice as wide as its Chinese
   counterpart and will not fit 375px, and a body that scrolls sideways is
   broken for every other block on it. The wrapper is focusable so those
   scrolled-off columns are reachable from a keyboard — :focus-visible keeps the
   ring for Tab and hides it for a click, and a browser that lacks
   :focus-visible simply keeps the ring. */
.art-body .art-table-wrap{margin:28px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--art-bdrl);border-radius:12px;background:var(--art-bg3);}
.art-body .art-table-wrap:focus{outline:2px solid var(--art-go);outline-offset:2px;}
.art-body .art-table-wrap:focus:not(:focus-visible){outline:none;}
.art-body table{width:100%;border-collapse:collapse;table-layout:auto;font-size:15px;color:#3D2610;font-weight:300;line-height:1.62;}
.art-body caption{caption-side:top;padding:12px 18px;background:var(--art-bg2);border-bottom:1px solid var(--art-bdrl);font-size:13px;color:var(--art-mu);text-align:center;}
.art-body th,.art-body td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--art-bdrl);border-right:1px solid var(--art-bdrl);overflow-wrap:break-word;min-width:88px;}
.art-body th{font-weight:500;color:var(--art-ink);background:var(--art-bg2);}
.art-body th:last-child,.art-body td:last-child{border-right:none;}
.art-body tbody tr:last-child td{border-bottom:none;}
.art-backlink-wrap{max-width:none;}
.back-link{display:inline-flex;align-items:center;gap:8px;padding:36px 28px 56px;font-size:14px;color:var(--art-wd);font-weight:500;text-decoration:none;max-width:760px;margin:0 auto;}
.back-link:hover{text-decoration:underline;}
/* ── Embedded article content (pullquotes, infographics, etc.) ──
   The hardcoded blog articles use these classes; we keep them styled
   here so DB-stored body_html with the same markup renders identically. */
.art-body .zh{font-family:'Noto Serif SC',serif;font-size:13px;color:var(--art-mu);margin-bottom:24px;font-weight:300;letter-spacing:0.03em;border-left:2px solid var(--art-bdr);padding-left:12px;}
.art-body .infographic{margin:36px 0;border-radius:16px;overflow:hidden;border:1px solid var(--art-bdrl);background:var(--art-bg3);}
.art-body .infographic svg{display:block;width:100%;height:auto;}
.art-body .infographic-caption{padding:12px 18px;background:var(--art-bg2);border-top:1px solid var(--art-bdrl);font-size:13px;color:var(--art-mu);font-style:normal;text-align:center;}
.art-body .pullquote{margin:36px 0;padding:24px 28px;background:var(--art-bg2);border-left:3px solid var(--art-go);border-radius:0 12px 12px 0;}
.art-body .pullquote p{font-family:'Fraunces',serif;font-size:clamp(17px,2.5vw,22px);font-style:normal;color:var(--art-ink);line-height:1.52;margin:0;font-weight:400;}
.art-body .pullquote .attr{font-size:13px;color:var(--art-mu);margin-top:8px;font-style:normal;font-family:'Manrope',sans-serif;font-weight:400;}
.art-body .tip-box{margin:28px 0;padding:18px 20px;background:var(--art-bg2);border:1px solid var(--art-bdrl);border-radius:10px;}
.art-body .tip-label{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--art-wd);font-weight:700;margin-bottom:8px;}
.art-body .tip-box p{margin:0;font-size:14px;color:#3D2610;font-weight:300;}
.art-body .checklist{list-style:none;margin:16px 0 24px;padding-left:0;}
.art-body .checklist li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--art-bdrl);font-size:15px;color:#3D2610;font-weight:300;line-height:1.6;}
.art-body .checklist li:last-child{border-bottom:none;}
.art-body .check-dot{width:20px;height:20px;border-radius:50%;background:var(--art-go);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.art-body .check-dot svg{width:10px;height:10px;}
.art-body .disclaimer{margin:48px 0 0;padding:16px 18px;background:#FCF6EF;border:1px solid #DEB887;border-radius:10px;}
.art-body .disclaimer p{font-size:13px;color:#6E4020;line-height:1.72;margin:0;font-weight:400;}
.art-body .disclaimer strong{font-weight:600;}
.art-body .related{background:var(--art-bg2);border-top:1px solid var(--art-bdrl);padding:48px 28px;margin:48px -28px -56px;}
.art-body .related h3{font-family:'Fraunces',serif;font-size:22px;color:var(--art-ink);font-weight:400;margin-bottom:20px;}
.art-body .related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.art-body .related-card{background:var(--art-bg3);border:1px solid var(--art-bdrl);border-radius:12px;padding:18px;text-decoration:none;display:block;transition:all 0.2s;}
.art-body .related-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(36,22,8,0.09);}
.art-body .related-zh{font-family:'Noto Serif SC',serif;font-size:28px;color:var(--art-wd);font-weight:300;margin-bottom:6px;}
.art-body .related-title{font-size:13px;font-weight:500;color:var(--art-ink);line-height:1.4;margin-bottom:4px;}
.art-body .related-sub{font-size:12px;color:var(--art-mu);font-weight:300;}
.art-body .article-cta,.art-body .cta-box{margin:40px 0;padding:32px 28px;background:var(--art-bg2);border:1px solid var(--art-bdrl);border-radius:14px;text-align:center;}
.art-body .article-cta h3,.art-body .cta-box h3{font-family:'Fraunces',serif;font-size:24px;font-weight:500;color:var(--art-ink);margin-bottom:8px;}
.art-body .article-cta p,.art-body .cta-box p{color:var(--art-mu);margin-bottom:18px;}
.art-loading,.art-error{max-width:600px;margin:80px auto;padding:0 28px;text-align:center;color:var(--art-mu);font-family:'Manrope',sans-serif;}
.art-error h2{font-family:'Fraunces',serif;color:var(--art-ink);margin-bottom:12px;font-weight:500;}
/* .art-topbar 96px not 16px: the fixed .m-nav is 71px and the body offset
   meant to account for it is not reaching this page, so the back-link was
   sitting entirely underneath it. */
/* .art-title 9vw not 12vw: at 375px the old setting rendered 45px, and
   measured across all 39 published titles that put 26 of them at six lines
   or more before the reader saw anything else — the worst ran to nine. At
   34px, 24 of the 39 fit in four lines or fewer and the worst is seven.
   The Chinese title is a separate rule pinned to its own 32px floor here
   and is untouched; it already read fine at that size, which is the best
   evidence English could come down too. Phone widths only — the display
   type above 600px is the treatment the story template was designed for. */
@media(max-width:600px){.art-body{padding:36px 20px;}.art-topbar{padding:96px 20px 0;}.art-hero{padding:0 0 4px;}.art-hero-inner{padding:0 20px;}.art-eyebrow{margin:28px 0 14px;}.art-title{font-size:clamp(34px,9vw,62px);}.art-zh-title{font-size:15px;}.art-meta{margin-top:20px;}.art-cover{margin-top:22px;padding:0 20px;}.art-cover img{border-radius:14px;}.art-tags{margin-left:0;margin-top:10px;}}

/* ───── Print: the dark hero would waste a page of brown ink ───── */
@media print{
  .art-hero{background:none !important;color:#000;}
  .art-title,.art-name{color:#000;}
  .art-zh-title,.art-date,.art-eyebrow{color:#444;}
  #art-progress,#art-totop,.art-share,.wa-fab{display:none !important;}
}

/* ───── Reading progress bar (top of viewport) ───── */
#art-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:9999;pointer-events:none;}
#art-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--art-gold),var(--art-go));transition:width 80ms linear;}

/* ───── Article main grid (body + TOC sidebar) ───── */
/* Sidebar 220 → 252px alongside the TOC type bump below: at 14.5px a Chinese
   row wrapped to two lines in a 220px column (xian, 2026-08-30). */
.art-main{max-width:1080px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:48px;align-items:start;}
.art-main > .art-body{padding:56px 0 32px;max-width:none;}
/* ───── Read-next rail ─────
   Same-category articles + most read. Rendered by buildRail(). */
.art-rail{display:grid;gap:26px;}
.art-rail[hidden]{display:none;}
.art-rail-block{display:grid;gap:12px;}
.art-rail-block + .art-rail-block{padding-top:22px;border-top:1px solid var(--art-bdrl);}
.art-rail-h{font-family:'Manrope',sans-serif;font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--art-mu);font-weight:700;margin:0;}
.art-rail ul,.art-rail ol{list-style:none;margin:0;padding:0;}
.art-rail-rel{display:grid;gap:13px;}
.art-rail-rel a{display:grid;gap:4px;text-decoration:none;color:inherit;}
.art-rail-t{font-family:'Fraunces',serif;font-size:14.5px;font-weight:400;line-height:1.3;color:var(--art-ink);}
.art-rail a:hover .art-rail-t{color:var(--art-wd);}
.art-rail a:focus-visible{outline:2px solid var(--art-clay);outline-offset:3px;border-radius:6px;}
.art-rail-ranked{counter-reset:artrank;display:block;}
.art-rail-ranked li{counter-increment:artrank;}
.art-rail-ranked li + li{margin-top:5px;padding-top:11px;border-top:1px solid var(--art-bdrl);}
.art-rail-ranked a{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:baseline;padding:4px 0;}
.art-rail-ranked a::before{content:counter(artrank);font-family:'Fraunces',serif;font-size:14px;color:var(--art-gold);}
.art-rail-ranked .art-rail-t{font-size:14px;}
/* Three columns once there is genuinely room. The reading column stays
   724px — it is already ~80 characters and must not grow. */
@media(min-width:1400px){
  /* ─── ONE page margin ───
     This page grew in layers: the hero and cover were sized before the
     rails existed (900 / 1080), the grid arrived later at 1380, and the
     share row kept its own 760. At 1920 that produced SIX different left
     edges — 291, 413, 503, 573, 591, 1363 — so nothing lined up and the
     whole page read as narrow no matter how wide the shell was.
     Everything below shares one outer edge now. The reading column is
     still indented, but by exactly the rail, which makes the indent look
     chosen instead of accidental.

     Widths: 28 padding + 300 rail + 48 gap + 724 body + 48 + 300 + 28
     = 1476. The BODY STAYS 724 — it is already ~80 characters a line and
     widening the text would make the page worse, not more generous. The
     extra width goes to the rails. */
  /* 1400-1519: the three columns at their original widths. The shell can
     hold 252+724+252 here and not a pixel more — going wider in this band
     squeezes the BODY below 724, which is the one measurement that must
     not move. The roomier version starts at 1520 (see below).
     Wrapper padding = rail + gap; the link adds its own 28. */
  .art-main{max-width:1380px;grid-template-columns:252px minmax(0,724px) 252px;}
  .art-hero-inner{max-width:1380px;}
  /* The topbar holds the "Back to all articles" link. It kept its own
     1080 when the shell widened, which put that link ~200px right of the
     headline — the last element still on its own margin. */
  .art-topbar{max-width:1380px;}
  /* The hero grew with the shell; the headline's own 920 cap and the dek's
     650 did not, so both stopped short and left a void beside them while
     the eyebrow, meta and cover ran the full width (xian, 2026-09-02).
     The title fills the hero. The dek is capped at 1000: unbounded it ran
     ~149 characters a line, and 1000 brings that to ~105 — still generous
     but readable. Cap the DEK if it needs narrowing again, never the
     title; the title carries the alignment. */
  .art-title{max-width:none;}
  .art-zh-title{max-width:1000px;}
  .art-cover{max-width:1380px;}
  .art-backlink-wrap{max-width:1380px;margin:0 auto;}
  .art-main > .art-body{grid-column:2;grid-row:1;}
  .art-main > .art-toc{grid-column:3;grid-row:1;}
  /* padding-top matches .art-toc's 36px, and it is load-bearing, not
     decoration: the fixed nav is 107px tall and a sticky top of 80px
     alone puts this block's heading UNDERNEATH it once the page
     scrolls. 80 + 36 = 116 clears it, same as the contents list. */
  .art-main > .art-rail{grid-column:1;grid-row:1;position:sticky;top:80px;padding-top:36px;align-self:start;}
}
/* 900-1399: no room for a third column, so the rail sits under the
   article rather than squeezing the text. */
@media(min-width:900px) and (max-width:1399px){
  /* Placed explicitly because the ToC now precedes the body in the DOM;
     auto-placement would drop the article into the 252px column. */
  .art-main > .art-body{grid-column:1;grid-row:1;}
  .art-main > .art-toc{grid-column:2;grid-row:1;}
  .art-main > .art-rail{grid-column:1;grid-row:2;padding-top:26px;border-top:1px solid var(--art-bdrl);}
}
@media(max-width:899px){
  .art-rail{margin:0 20px 8px;padding-top:24px;border-top:1px solid var(--art-bdrl);}
}
.art-toc{position:sticky;top:80px;align-self:start;padding:36px 0 0 0;border-left:1px solid var(--art-bdrl);}
/* A <button>, because below 900px this opens the contents list and a div
   cannot be reached or fired from a keyboard. The UA chrome is stripped so
   it still reads as the heading it looks like; padding and margin restate
   the old div's values exactly rather than inheriting the button defaults. */
.art-toc-label{display:block;width:100%;text-align:left;background:none;border:0;font-family:inherit;font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--art-mu);font-weight:700;padding:0 0 0 18px;margin:0 0 14px;}
.art-toc-label:focus-visible{outline:2px solid var(--art-clay);outline-offset:2px;border-radius:6px;}
.art-toc ul{list-style:none;margin:0;padding:0;}
/* Row type 13 → 14.5px, sub-rows 12 → 13.5px (xian, 2026-08-30: the contents
   list read too small in both languages). */
.art-toc li a{display:block;padding:7px 18px;font-size:14.5px;color:var(--art-mu);text-decoration:none;border-left:2px solid transparent;margin-left:-1px;line-height:1.45;transition:all 0.15s;}
.art-toc li a:hover{color:var(--art-ink);}
.art-toc li.is-h3 a{padding-left:34px;font-size:13.5px;}
.art-toc li.is-active a{color:var(--art-ink);border-left-color:var(--art-go);font-weight:500;}
/* Set by buildToc() when only one language half carries headings — the other
   language would otherwise show an empty "In this article" box. */
html[lang="en"] .art-toc.toc-no-en,html[lang="zh"] .art-toc.toc-no-zh{display:none;}
@media(max-width:899px){
  .art-main{display:block;padding:0;}
  .art-main > .art-body{padding:36px 20px;}
  /* Above the article now, not after it: a contents list below its own
     article cannot do its job. Still collapsed by default so it costs
     no vertical space until it is asked for. */
  .art-toc{position:static;border-left:none;border-top:1px solid var(--art-bdrl);border-bottom:1px solid var(--art-bdrl);padding:0;margin:0 20px;}
  .art-toc-label{padding:18px 0 0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
  .art-toc-label::after{content:'+';font-size:16px;font-weight:300;}
  .art-toc.is-open .art-toc-label::after{content:'−';}
  .art-toc ul{display:none;padding-bottom:14px;}
  .art-toc.is-open ul{display:block;}
  .art-toc li a{padding-left:0;}
  .art-toc li.is-h3 a{padding-left:18px;}
}

/* ───── Share row + reading-time pill ───── */
.art-share{max-width:760px;margin:0 auto;padding:14px 28px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--art-bdrl);padding-top:24px;}
.art-share-label{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--art-mu);font-weight:700;}
.art-share-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:var(--art-bg3);border:1px solid var(--art-line);color:var(--art-ink);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit;transition:all 0.15s;}
.art-share-btn:hover{background:var(--art-bg);border-color:var(--art-bdr);}
.art-share-btn[data-copied="1"]{background:#dff5e3;border-color:#86c993;color:#1e6a36;}

/* ───── Related articles strip ───── */
.art-related{max-width:1080px;margin:64px auto 0;padding:48px 28px 64px;background:var(--art-bg2);border-top:1px solid var(--art-bdrl);border-bottom:1px solid var(--art-bdrl);}
.art-related-label{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--art-clay);font-weight:700;text-align:center;margin-bottom:8px;}
.art-related-h{font-family:'Fraunces',serif;font-size:26px;color:var(--art-ink);font-weight:400;text-align:center;margin-bottom:28px;}
.art-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:920px;margin:0 auto;}

/* Second half of the one-margin rules. These three selectors are declared
   after the 1400px block near the top of this stylesheet, so at equal
   specificity they would win and silently undo it — the override has to sit
   here, below them, to take effect. */
@media(min-width:900px) and (max-width:1399px){
  /* Same shell as the cover and the strip; the body starts here too. */
  .art-share{max-width:1080px;}
}

@media(min-width:1400px){
  /* Starts where the body text starts, not at the page edge:
     28 shell padding + 252 rail + 48 gap. */
  .art-share{max-width:1380px;padding-left:328px;padding-right:28px;}
  .art-related{max-width:1380px;}
  .art-related-grid{max-width:none;}
}

/* ─── 900-1399: two columns, and still one margin ───
   No left rail in this band, so "one edge" is simpler: the body is the
   first column, and hero, cover, share, back link and the strip all line
   up with it at the shell's padding edge. Same 1080 shell the cover and
   strip already used — the hero (900) and share (760) were the strays. */
@media(min-width:900px) and (max-width:1399px){
  .art-hero-inner{max-width:1080px;}
  .art-topbar{max-width:1080px;}
  .art-backlink-wrap{max-width:1080px;margin:0 auto;}
}

/* ─── 1520+: the roomier shell ───
   1476 = 28 + 300 + 48 + 724 + 48 + 300 + 28, and it needs ~1520 of
   viewport to sit in once a scrollbar is present. Below that the 1400
   band above applies. The extra width goes to the RAILS; the body is
   724 in both bands. */
@media(min-width:1520px){
  .art-main{max-width:1476px;grid-template-columns:300px minmax(0,724px) 300px;}
  .art-hero-inner{max-width:1476px;}
  .art-topbar{max-width:1476px;}
  .art-title{max-width:none;}
  .art-zh-title{max-width:1000px;}
  .art-cover{max-width:1476px;}
  .art-backlink-wrap{max-width:1476px;}
  .art-share{max-width:1476px;padding-left:376px;}
  .art-related{max-width:1476px;}
}
.art-related-card{background:var(--art-bg3);border:1px solid var(--art-line);border-radius:12px;padding:0;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:all 0.2s;}
.art-related-img{display:block;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;background:#EDE7D8;border-bottom:1px solid var(--art-line);filter:saturate(0.85) sepia(0.06);}
.art-related-body{padding:15px 18px 18px;display:flex;flex-direction:column;flex:1;}
.art-related-card:hover{transform:translateY(-3px);border-color:var(--art-gold);box-shadow:0 12px 34px rgba(74,49,23,0.13);}
.art-related-card:focus-visible{outline:2px solid var(--art-clay);outline-offset:3px;}
/* Fallback band for an article with no cover — keeps the card the same
   height as its neighbours instead of collapsing next to them. */
.art-related-mini{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:var(--art-bg2);border-bottom:1px solid var(--art-line);font-family:'Noto Serif SC',serif;font-size:30px;color:var(--art-clay);font-weight:400;line-height:1;}
.art-related-title{font-family:'Fraunces',serif;font-size:16px;font-weight:500;color:var(--art-ink);line-height:1.3;margin-bottom:8px;flex:1;}
.art-related-meta{font-size:12.5px;color:var(--art-mu);font-weight:400;}

/* ───── Back-to-top floating button ───── */
#art-totop{position:fixed;right:20px;bottom:84px;width:42px;height:42px;border-radius:50%;background:var(--art-ink);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 6px 20px rgba(36,22,8,0.18);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 0.2s,transform 0.2s,visibility 0.2s;z-index:200;}
#art-totop.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
#art-totop:hover{background:var(--art-wd);}
@media(max-width:600px){#art-totop{right:14px;bottom:74px;width:38px;height:38px;}}

/* ───── Touch targets ───── */
/* On a phone every control on this page sat under the 44px minimum: the
   topbar back link at 37, the contents toggle at 40, single-line contents
   entries at 35, the share buttons at 36, rail links at 26-38, back-to-top
   at 38. Comfortable for a cursor, too small for a thumb.

   These are min-heights, not heights, so anything already big enough is
   untouched — a contents entry that wraps to two lines keeps its 56px.
   Everything here is border-box, so min-height IS the finished size and the
   existing padding still shapes the element horizontally.

   This block must stay LAST. It overrides declarations of equal specificity
   above it (notably #art-totop's own 600px rule); moved earlier it would
   half-work, which is the failure mode that looks like a browser cache. */
@media (max-width:899px), (pointer:coarse) {
  .art-back-top{display:inline-flex;align-items:center;min-height:44px;}
  .art-toc-label{min-height:44px;}
  .art-toc li a{min-height:44px;display:flex;align-items:center;}
  .art-share-btn{min-height:44px;}
  .art-rail-rel a,.art-rail-ranked a{min-height:44px;align-content:center;}
  #art-totop{width:44px;height:44px;}
}

/* ───── One left edge ───── */
/* Below 900px the page had two, and which group was wrong flipped with the
   width. On a phone the topbar, hero, cover and body sat at 20px while the
   share row, the foot back link and the related strip kept the desktop 28.
   Between 601 and 899 it inverted: everything sat at 28 except the body,
   contents and rail, which are set to 20 inside the 899px block and so
   carried the phone margin up into tablet widths.

   Both are the same defect — a margin changed for some elements and not the
   others — and patching the six offenders individually would leave the next
   element added to this page free to pick either value. So the edge is one
   token now: 20px on phones, 28px above that, and every element below 900px
   reads it. Nothing at 900px and up is touched.

   Placed last, like the block above it: these override declarations of equal
   specificity earlier in the file. */
:root{--art-edge:28px;}
@media (max-width:600px){ :root{--art-edge:20px;} }
@media (max-width:899px) {
  .art-topbar,.art-hero-inner,.art-cover,.art-body,.art-main > .art-body,
  .art-share,.back-link,.art-related{padding-left:var(--art-edge);padding-right:var(--art-edge);}
  .art-toc,.art-rail{margin-left:var(--art-edge);margin-right:var(--art-edge);}
}