/* Lab: long-form article components for /insights/ in the C skin. Loaded after c.css.
   --art-fs mirrors the body paragraph size in long.css so tables, lists and sub-heads scale with it. */
body.x-inner.page-insights .article{--art-fs:clamp(17px,1.2vw,19px)}
@media (min-width:1800px){body.x-inner.page-insights .article{--art-fs:21px}}

body.x-inner.page-insights .article h4{font-family:cp-huiwen,"Noto Serif TC",serif;font-weight:400;font-size:calc(var(--art-fs) * 1.09);line-height:1.6;letter-spacing:.04em;color:#241B18;
  margin:2.6em 0 0;padding-left:.75em;border-left:3px solid #C25B3F}
body.x-inner.page-insights .article h4 + p{margin-top:1em}
/* a paragraph that is only bold text = run-in subhead under an h4 */
body.x-inner.page-insights .article p:has(> strong:only-child){margin-top:2.1em}
body.x-inner.page-insights .article p > strong:only-child{font-weight:600;color:#241B18}
body.x-inner.page-insights .article p:has(> strong:only-child) + p{margin-top:.7em}
/* tables and lists read at body size and body colour */
body.x-inner.page-insights .article table.data td,body.x-inner.page-insights .article table.data th{font-size:var(--art-fs);line-height:1.75;letter-spacing:.03em;color:#2B211C;vertical-align:top}
body.x-inner.page-insights .article table.data th{font-weight:600;color:#241B18;letter-spacing:.06em}
body.x-inner.page-insights .article table.data td:first-child{font-weight:600;white-space:nowrap}
body.x-inner.page-insights .article ul.highlights li,body.x-inner.page-insights .article ol.steps li{font-size:var(--art-fs);line-height:2.1;letter-spacing:.03em}
/* English pull quotes: italic, a little above body size, quieter than the body */
body.x-inner.page-insights .article blockquote{margin-top:1.9em;padding-left:20px}
body.x-inner.page-insights .article blockquote p{font-family:Georgia,"Times New Roman","Noto Serif TC",serif;font-style:italic;font-size:calc(var(--art-fs) * 1.06);line-height:1.7;letter-spacing:0;color:#4A3D36}
body.x-inner.page-insights .article blockquote + p{margin-top:1.1em}

/* ── wide screens: chapter list in the left rail, comparison blocks break out to the right ── */
.art-toc{display:none}
@media (min-width:1100px){
  .art-kicker-label{display:block}
  .article-kicker .art-toc{display:flex;flex-direction:column;margin-top:28px;max-height:calc(100svh - var(--nav-h) - 170px);overflow:auto;padding-right:12px;
    text-transform:none;font-weight:400}
  .art-toc a{font-family:cp-genwan,"Noto Serif TC",serif;font-size:clamp(14.5px,.86vw,17px);line-height:1.6;letter-spacing:.04em;color:#71655C;text-decoration:none;
    padding:.42em 0 .42em 14px;border-left:1px solid rgba(36,27,24,.16);transition:color .2s,border-color .2s}
  .art-toc a.lv-h2{color:#5A4D45;margin-top:.5em}
  .art-toc a.lv-h2:first-child{margin-top:0}
  .art-toc a.lv-h3{font-size:clamp(13.5px,.8vw,16px);padding-left:28px}
  .art-toc a:hover{color:#241B18}
  .art-toc a.is-current{color:#241B18;border-left:2px solid #C25B3F;padding-left:13px}
  .art-toc a.lv-h3.is-current{padding-left:27px}

  /* the text keeps its reading measure; tables and the closing questions use the room on the right */
  body.x-inner.page-insights .article{max-width:none}
  /* one width for everything: text, tables and blocks share the same column, and the type grows with it so a line stays readable */
  body.x-inner.page-insights .article{--art-fs:clamp(18px,1.3vw,22px);--art-w:min(100%,60rem)}
  body.x-inner.page-insights .article p{font-size:var(--art-fs)}
  body.x-inner.page-insights .article > *{max-width:var(--art-w)}
  body.x-inner.page-insights .article > .table-wrap{max-width:var(--art-w)}
  body.x-inner.page-insights .article > ol.steps{max-width:var(--art-w);margin-top:1.6em;padding:1.4em 0 1.4em 1.6em;border-top:1px solid #241B18;border-bottom:1px solid #241B18}
  body.x-inner.page-insights .article table.data td:first-child{width:9em}
}

/* ── one measure for the whole column (2026-10-06) ──
   Title, dek (the hairline above it is the dek's own border), byline, the ink rule that opens the text, and the text itself
   all end on the same right edge. Before this the dek stopped at 40em while the title and the ink rule ran to the edge of the
   grid column: on a wide screen that made three right edges, and below 1100px the dek was wider than the text.
   Title lines stay balanced (text-wrap:balance in long.css), so a short title does not reach the edge. That is deliberate:
   a last line of two characters looks worse than a ragged right. */
body.x-inner.page-insights .reading{--col:38rem}
@media (min-width:1100px){body.x-inner.page-insights .reading{--col:min(100%,60rem)}}
body.x-inner.page-insights .reading > .article-title,
body.x-inner.page-insights .reading > .article-dek,
body.x-inner.page-insights .reading > .art-by,
body.x-inner.page-insights .reading > .art-toc-m,
body.x-inner.page-insights .reading > .status-note,
body.x-inner.page-insights .reading > .article{max-width:var(--col)}
/* ── chapter openers ── */
body.x-inner.page-insights .article .art-chap{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:clamp(14px,1.6vw,28px);
  margin-top:clamp(88px,9vw,150px);padding-top:clamp(22px,2.2vw,34px);border-top:2px solid #241B18}
body.x-inner.page-insights .article .art-chap-n{font-family:cp-huiwen,"Noto Serif TC",serif;font-weight:400;font-size:clamp(34px,3.5vw,62px);line-height:1.1;color:#C25B3F}
body.x-inner.page-insights .article .art-chap h2{margin:0;font-size:clamp(28px,2.9vw,50px);line-height:1.3}
body.x-inner.page-insights .article .art-chap + *{margin-top:clamp(36px,3.6vw,56px)}

/* ── the four paths at a glance ── */
.art-paths{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(36px,3.6vw,56px);border-top:1px solid #241B18;border-bottom:1px solid #241B18}
.art-paths a{display:flex;flex-direction:column;padding:clamp(20px,2vw,32px) clamp(14px,1.6vw,26px) clamp(22px,2.2vw,34px);border-left:1px solid rgba(36,27,24,.22);text-decoration:none;color:#241B18;transition:background .25s}
.art-paths a:first-child{border-left:0;padding-left:0}
.art-paths a:hover{background:rgba(194,91,63,.07)}
.art-paths .n{font-family:cp-huiwen,"Noto Serif TC",serif;font-size:clamp(28px,2.3vw,42px);line-height:1;color:#C25B3F}
.art-paths b{margin-top:clamp(18px,2vw,30px);font-family:cp-huiwen,"Noto Serif TC",serif;font-weight:400;font-size:clamp(17px,1.35vw,23px);line-height:1.5;letter-spacing:.04em;min-height:3em}
.art-paths .to{margin-top:14px;padding-top:12px;border-top:1px solid rgba(36,27,24,.22);font-family:cp-genwan,"Noto Serif TC",serif;font-size:clamp(15px,.95vw,19px);letter-spacing:.1em;color:#5A4D45}
@media (max-width:860px){.art-paths{grid-template-columns:1fr 1fr}.art-paths a{border-left:0;padding-left:0;border-top:1px solid rgba(36,27,24,.22)}.art-paths a:nth-child(-n+2){border-top:0}.art-paths a:nth-child(even){padding-left:16px;border-left:1px solid rgba(36,27,24,.22)}.art-paths b{min-height:0}}

/* ── closing questions: one dark block (the lead-in stays on paper) ── */
body.x-inner.page-insights .article .art-ask{margin-top:clamp(36px,3.6vw,56px);padding:clamp(32px,3.8vw,68px) clamp(24px,4vw,72px) clamp(36px,4.2vw,76px);background:#17110F;color:#F6F1E8}
body.x-inner.page-insights .article .art-ask ol.steps{max-width:none;margin:0;padding:0 0 0 1.5em;border:0}
body.x-inner.page-insights .article .art-ask ol.steps li{color:#F6F1E8;font-size:calc(var(--art-fs) * 1.06);line-height:2}
body.x-inner.page-insights .article .art-ask ol.steps li + li{margin-top:.8em}
body.x-inner.page-insights .article .art-ask + h2{margin-top:clamp(72px,7vw,110px)}

@media (min-width:1100px){
  body.x-inner.page-insights .article > .art-chap,body.x-inner.page-insights .article > .art-paths,body.x-inner.page-insights .article > .art-ask{max-width:var(--art-w)}
}

/* ── quieter source links in the running text ── */
body.x-inner.page-insights .article p a[target="_blank"]{text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:rgba(36,27,24,.32);transition:text-decoration-color .2s}
body.x-inner.page-insights .article p a[target="_blank"]:hover{text-decoration-color:#C25B3F}

/* ── byline under the dek ── */
body.x-inner.page-insights .reading > .art-by{grid-column:2;margin:clamp(20px,2vw,30px) 0 0;font-family:cp-genwan,"Noto Serif TC",serif;font-size:clamp(14.5px,.9vw,17px);letter-spacing:.1em;color:#5A4D45}
.art-by span{margin-left:1.4em;color:#8A7C72;letter-spacing:.06em}
@media (max-width:1099px){body.x-inner.page-insights .reading > .art-by{grid-column:auto}}

/* ── author block at the end ── */
body.x-inner.page-insights .article .art-author{display:grid;grid-template-columns:clamp(84px,6.4vw,124px) 1fr;column-gap:clamp(20px,2vw,36px);align-items:center;
  margin-top:clamp(72px,7vw,110px);padding-top:clamp(28px,2.8vw,44px);border-top:2px solid #241B18}
.art-author img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;filter:saturate(.9)}
body.x-inner.page-insights .article .art-author p{margin:0}
body.x-inner.page-insights .article .art-author-name{font-family:cp-huiwen,"Noto Serif TC",serif;font-size:clamp(22px,1.7vw,30px);line-height:1.3;letter-spacing:.06em;color:#241B18}
.art-author-name span{margin-left:.7em;font-family:Georgia,"Times New Roman",serif;font-size:.72em;letter-spacing:.02em;color:#5A4D45}
body.x-inner.page-insights .article .art-author-site{margin-top:.25em;font-family:var(--mono,ui-monospace,monospace);font-size:clamp(12.5px,.75vw,14.5px);letter-spacing:.06em}
.art-author-site a{color:#A3492B;text-decoration:none}
.art-author-site a:hover{text-decoration:underline}
body.x-inner.page-insights .article .art-author-bio{margin-top:.7em;font-size:calc(var(--art-fs) * .92);line-height:1.9;color:#5A4D45}
body.x-inner.page-insights .article .art-author-co{margin-top:clamp(24px,2.4vw,36px);padding-top:clamp(18px,1.8vw,26px);border-top:1px solid rgba(36,27,24,.18);font-size:calc(var(--art-fs) * .92);line-height:1.9;color:#5A4D45}
body.x-inner.page-insights .article .art-author-co + p{margin-top:.5em;font-size:calc(var(--art-fs) * .92);line-height:1.9;color:#5A4D45}
@media (max-width:560px){body.x-inner.page-insights .article .art-author{grid-template-columns:72px 1fr}}

/* ── figures: ink-line diagrams that draw themselves when they scroll into view ── */
body.x-inner.page-insights .article .art-fig{margin:clamp(40px,4vw,64px) 0 0;padding:clamp(20px,2.2vw,34px) 0 clamp(18px,2vw,28px);border-top:1px solid rgba(36,27,24,.22);border-bottom:1px solid rgba(36,27,24,.22)}
.art-fig svg{display:block;width:100%;height:auto;overflow:visible}
.art-fig figcaption{margin-top:14px;font-family:cp-genwan,"Noto Serif TC",serif;font-size:clamp(13px,.8vw,15px);letter-spacing:.06em;color:#8A7C72}
.art-fig text{font-family:cp-genwan,"Noto Serif TC",serif;fill:#241B18}
.art-fig .fg-l{font-size:21px;letter-spacing:.06em}
.art-fig .fg-s{font-size:17px;letter-spacing:.05em;fill:#71655C}
.art-fig .fg-em{fill:#A3492B}
.art-fig .fg-t-now{fill:#8A7C72;font-size:18px}
.art-fig .fg-t-yes{fill:#A3492B}
.art-fig .fg-dot{fill:#241B18}
.art-fig .fg-now{fill:none;stroke:#8A7C72;stroke-width:1.5;stroke-dasharray:5 7}
.art-fig .fg-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.art-fig .fg-no{stroke:#241B18}
.art-fig .fg-yes{stroke:#C25B3F}
.art-fig .fg-b path{fill:none;stroke:#71655C;stroke-width:1.2}
.art-fig .fg-b2 path{stroke:#C25B3F}
@media (prefers-reduced-motion:no-preference){
  .js .art-fig[data-fig] .fg-now,.js .art-fig[data-fig] .fg-l:not(.fg-start),.js .art-fig[data-fig] .fg-b{opacity:0;transition:opacity .7s ease}
  .js .art-fig[data-fig] .fg-line{stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.4,.1,.2,1)}
  .js .art-fig.is-in .fg-now{opacity:1}
  .js .art-fig[data-fig].is-in .fg-l.fg-t-now{opacity:1;transition-delay:.5s}
  .js .art-fig.is-in .fg-no{stroke-dashoffset:0;transition-delay:.9s}
  .js .art-fig[data-fig].is-in .fg-l.fg-t-no{opacity:1;transition-delay:2.2s}
  .js .art-fig.is-in .fg-yes{stroke-dashoffset:0;transition-delay:2.5s}
  .js .art-fig[data-fig].is-in .fg-l.fg-t-yes{opacity:1;transition-delay:3.8s}
  .js .art-fig.is-in .fg-b1{opacity:1;transition-delay:4.4s}
  .js .art-fig.is-in .fg-b2{opacity:1;transition-delay:5.4s}
}

/* shared pieces for later figures: per-element delay comes from --d */
.art-fig .fg-base{fill:none;stroke:#241B18;stroke-width:1.2}
.art-fig .fg-dot-em{fill:#C25B3F}
@media (prefers-reduced-motion:no-preference){
  .js .art-fig[data-fig] .fg-fade{opacity:0;transition:opacity .7s ease var(--d,0s)}
  .js .art-fig[data-fig].is-in .fg-fade{opacity:1}
  .js .art-fig[data-fig] g.fg-fade text.fg-l{opacity:1;transition:none}   /* labels inside a fading group follow the group, not figure 1's per-label timing */
  .js .art-fig[data-fig] .fg-line[style]{transition:stroke-dashoffset 1.5s cubic-bezier(.4,.1,.2,1) var(--d,0s)}
  .js .art-fig[data-fig].is-in .fg-line[style]{stroke-dashoffset:0}
}

/* figure: two bars */
.art-bars .bar-row{display:grid;grid-template-columns:minmax(9em,15em) 1fr 4.2em;align-items:center;column-gap:clamp(14px,1.6vw,26px);padding:clamp(8px,.9vw,14px) 0}
.art-bars .bar-lab{font-family:cp-genwan,"Noto Serif TC",serif;font-size:clamp(15px,1vw,19px);letter-spacing:.05em;color:#241B18}
.art-bars .bar-track{display:block;height:clamp(10px,.8vw,14px);background:rgba(36,27,24,.08)}
.art-bars .bar-track i{display:block;height:100%;width:calc(var(--v) * 1%);background:#241B18;transform-origin:left center}
.art-bars .is-em .bar-track i{background:#C25B3F}
.art-bars b{font-family:cp-genwan,"Noto Serif TC",serif;font-weight:500;font-size:clamp(26px,2.1vw,40px);line-height:1;letter-spacing:0;text-align:right;color:#241B18;font-variant-numeric:tabular-nums}
.art-bars .is-em b{color:#A3492B}
@media (max-width:560px){.art-bars .bar-row{grid-template-columns:1fr 3.6em}.art-bars .bar-lab{grid-column:1 / -1}}
@media (prefers-reduced-motion:no-preference){
  .js .art-bars[data-fig] .bar-track i{transform:scaleX(0);transition:transform 1.3s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  .js .art-bars[data-fig].is-in .bar-track i{transform:scaleX(1)}
}

/* ── phones ── */
.art-fig .fig-narrow,.art-fig .fig-legend{display:none}
@media (max-width:700px){
  /* the line diagram gets its own narrow drawing so the labels stay readable */
  .art-fig .fig-wide{display:none}
  .art-fig .fig-narrow{display:block}
  .art-fig .fig-narrow .fg-l{font-size:15px}
  .art-fig .fig-narrow .fg-t-now{font-size:13px}
  .art-fig .fig-narrow .fg-s{font-size:14px}
  body.x-inner.page-insights .article .art-fig .fig-legend{display:flex;flex-direction:column;gap:2px;margin:10px 0 0;font-size:14.5px;line-height:1.7;letter-spacing:.04em;color:#5A4D45}
  .art-fig .fig-legend .em{color:#A3492B}
  /* tables keep readable columns and scroll sideways inside their own box */
  body.x-inner.page-insights .article .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.x-inner.page-insights .article table.data{min-width:31rem}
  body.x-inner.page-insights .article table.data td,body.x-inner.page-insights .article table.data th{font-size:15.5px;line-height:1.7}
  /* author: photo sits at the top of the text, smaller */
  body.x-inner.page-insights .article .art-author{grid-template-columns:64px 1fr;column-gap:16px;align-items:start}
  .art-author img{margin-top:4px}
  body.x-inner.page-insights .article .art-ask{padding:26px 20px 30px}
}

/* ── phones: swipe hint on wide tables ── */
.tbl-hint{display:none}
@media (max-width:700px){
  /* edge shading: appears on the side that still has content, disappears when you reach that end */
  body.x-inner.page-insights .article .table-wrap{
    background:
      linear-gradient(to right,#F6F1E8 35%,rgba(246,241,232,0)) left center / 36px 100% no-repeat local,
      linear-gradient(to left,#F6F1E8 35%,rgba(246,241,232,0)) right center / 36px 100% no-repeat local,
      linear-gradient(to right,rgba(36,27,24,.2),rgba(36,27,24,0)) left center / 16px 100% no-repeat scroll,
      linear-gradient(to left,rgba(36,27,24,.2),rgba(36,27,24,0)) right center / 16px 100% no-repeat scroll}
  body.x-inner.page-insights .article .tbl-hint{display:flex;justify-content:flex-end;align-items:center;gap:.5em;margin:8px 0 0;max-width:none;
    font-size:13px;line-height:1.4;letter-spacing:.1em;color:#8A7C72;transition:opacity .4s}
  .tbl-hint::after{content:"→";font-family:var(--mono,ui-monospace,monospace);color:#C25B3F}
  .tbl-hint.is-done{opacity:0}
}

/* ── phones and narrow screens: fold-out chapter list under the byline ── */
.art-toc-m{display:none}
@media (max-width:1099px){
  body.x-inner.page-insights .reading > .art-toc-m{display:block;margin-top:clamp(22px,4vw,32px);border-top:1px solid rgba(36,27,24,.22);border-bottom:1px solid rgba(36,27,24,.22)}
  .art-toc-m summary{display:flex;justify-content:space-between;align-items:center;padding:14px 2px;cursor:pointer;list-style:none;
    font-family:cp-genwan,"Noto Serif TC",serif;font-size:15.5px;letter-spacing:.12em;color:#241B18}
  .art-toc-m summary::-webkit-details-marker{display:none}
  .art-toc-m summary::after{content:"＋";font-size:15px;color:#C25B3F}
  .art-toc-m[open] summary::after{content:"－"}
  .art-toc-m nav{display:flex;flex-direction:column;padding:2px 2px 16px}
  .art-toc-m a{padding:.5em 0;font-family:cp-genwan,"Noto Serif TC",serif;font-size:16px;line-height:1.55;letter-spacing:.04em;color:#241B18;text-decoration:none}
  .art-toc-m a.lv-h3{padding-left:1.2em;font-size:15px;color:#5A4D45}
}
body.x-inner.page-insights .article h3[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ── /insights/ list: a few fixed categories, each with compact article rows ── */
.post-group{display:grid;grid-template-columns:4fr 7fr;column-gap:clamp(24px,4vw,96px);align-items:start;padding:clamp(28px,3vw,52px) 0 clamp(36px,4vw,72px);border-top:2px solid #241B18}
.post-group + .post-group{margin-top:0}
.post-cat{margin:0;font-family:cp-huiwen,"Noto Serif TC",serif;font-weight:400;font-size:clamp(28px,3vw,56px);line-height:1.25;letter-spacing:.06em;color:#241B18;position:sticky;top:calc(var(--nav-h) + 24px)}
.post-list{display:flex;flex-direction:column}
.post-row{display:grid;grid-template-columns:1fr auto;column-gap:clamp(16px,2vw,40px);row-gap:.55em;align-items:baseline;padding:clamp(18px,1.8vw,30px) 0;border-top:1px solid rgba(36,27,24,.2);text-decoration:none;color:#241B18;transition:background .25s}
.post-row:first-child{border-top:0;padding-top:.2em}
.post-row h2{grid-column:1;margin:0;font-family:cp-huiwen,"Noto Serif TC",serif;font-weight:400;font-size:clamp(20px,1.65vw,31px);line-height:1.45;letter-spacing:.03em;transition:color .2s}
.post-row p{grid-column:1;margin:0;font-family:cp-genwan,"Noto Serif TC",serif;font-size:clamp(15px,1vw,19px);line-height:1.8;letter-spacing:.03em;color:#5A4D45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-row .post-meta{grid-column:2;grid-row:1;font-family:cp-genwan,"Noto Serif TC",serif;font-size:clamp(13.5px,.85vw,16px);letter-spacing:.08em;color:#8A7C72;white-space:nowrap;font-variant-numeric:tabular-nums}
.post-row .post-meta i{font-style:normal;margin-left:1.2em}
.post-row:hover h2{color:#A3492B}
@media (max-width:860px){
  .post-group{grid-template-columns:1fr;row-gap:18px}
  .post-cat{position:static;font-size:26px}
  .post-row{grid-template-columns:1fr}
  .post-row .post-meta{grid-column:1;grid-row:auto}
}

/* ── list page inside the first screen (the .p2 page head lives in c.css) ── */
.post-latest .post-cat{color:#A3492B}     /* "latest": one row above the categories, so a returning reader sees what is new without scrolling through them */
@media(min-width:861px){
  .x-phead.p2 .post-group{grid-template-columns:3fr 8fr}
}
@media(max-width:860px){
  .x-phead.p2 .post-latest{padding:14px 0 0;row-gap:8px;border-top-width:1px}
  .x-phead.p2 .post-latest .post-cat{font-size:15px;letter-spacing:.3em}
  .x-phead.p2 .post-latest .post-row{padding:0}
  .x-phead.p2 .post-latest .post-row h2{font-size:19px;line-height:1.5}
  .x-phead.p2 .post-latest .post-row p{display:none}                /* the summary shows again in the article's own category below */
}

/* ── case figures (2026-10-05): two different pictures, not one chart twice ── */
/* 1. a block of time that empties: 36 squares, 3 stay */
.art-units{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(28px,4vw,72px);align-items:center}
.art-units figcaption{grid-column:1 / -1}
.art-units .unit-nums p{margin:0 0 clamp(10px,1.2vw,18px);display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;column-gap:.4em;font-family:cp-genwan,"Noto Serif TC",serif;color:#241B18}
.art-units .unit-nums p:last-child{margin-bottom:0}
.art-units .unit-nums b{font-weight:500;font-size:clamp(34px,3vw,58px);line-height:1;font-variant-numeric:tabular-nums}
.art-units .unit-nums small{font-size:clamp(14px,.95vw,17px);letter-spacing:.06em;color:#71655C}
.art-units .unit-nums em{grid-column:1 / -1;font-style:normal;font-size:clamp(13px,.85vw,15px);letter-spacing:.08em;color:#8A7C72;margin-top:.3em}
.art-units .unit-nums .is-em b{color:#A3492B}
.art-units .unit-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(4px,.45vw,8px);max-width:560px}
.art-units .unit-grid i{display:block;aspect-ratio:1;background:#241B18;box-shadow:inset 0 0 0 1px #241B18}
.art-units .unit-grid i.keep{background:#C25B3F;box-shadow:inset 0 0 0 1px #C25B3F}
@media (max-width:640px){.art-units{grid-template-columns:1fr;row-gap:20px}.art-units .unit-nums{display:flex;gap:28px}.art-units .unit-nums p{margin:0}}
@media (prefers-reduced-motion:no-preference){
  .js .art-units[data-fig] .unit-grid i{opacity:0;transform:scale(.4);transition:opacity .25s ease calc(var(--i) * 22ms),transform .25s ease calc(var(--i) * 22ms),background-color .5s ease calc(1.5s + var(--i) * 14ms),box-shadow .5s ease calc(1.5s + var(--i) * 14ms)}
  .js .art-units[data-fig].is-in .unit-grid i{opacity:1;transform:none}
  .js .art-units[data-fig] .unit-grid i.keep{background:#241B18;box-shadow:inset 0 0 0 1px #241B18}
  .js .art-units[data-fig].is-in .unit-grid i.keep{background:#C25B3F;box-shadow:inset 0 0 0 1px #C25B3F}
  .js .art-units[data-fig].is-in .unit-grid i.gone{background:transparent;box-shadow:inset 0 0 0 1px rgba(36,27,24,.22)}
}
@media (prefers-reduced-motion:reduce){.art-units .unit-grid i.gone{background:transparent;box-shadow:inset 0 0 0 1px rgba(36,27,24,.22)}}
html:not(.js) .art-units .unit-grid i.gone{background:transparent;box-shadow:inset 0 0 0 1px rgba(36,27,24,.22)}
/* 2. one line built as two halves, then joined */
.art-fig .fg-join{stroke:#C25B3F}
.art-fig .fg-end{fill:#F6F1E8;stroke:#241B18;stroke-width:2}
body.x-inner.page-insights .article .art-fig .fig-steps{margin:clamp(8px,1vw,14px) 0 0;font-family:cp-genwan,"Noto Serif TC",serif;font-size:clamp(14.5px,1vw,18px);line-height:1.8;letter-spacing:.04em;color:#5A4D45;text-align:center}
.art-fig .fig-steps span{color:#A3492B}
.art-halves .fig-legend{display:none!important}
@media (max-width:640px){body.x-inner.page-insights .article .art-fig .fig-steps{text-align:left}.art-fig .fig-steps span{display:block}}
@media (prefers-reduced-motion:no-preference){
  .js .art-halves[data-fig] .fig-steps{opacity:0;transition:opacity .8s ease 3.8s}
  .js .art-halves[data-fig].is-in .fig-steps{opacity:1}
}

/* case pages: the facts table and the closing block are as wide as the text column above them (they were a narrower 38em block from the old layout) */
@media (min-width:861px){
  body.x-inner.page-case .spec,body.x-inner.page-case .x-next{max-width:min(100%,60rem)}
  body.x-inner.page-case .spec th,body.x-inner.page-case .spec td{font-size:clamp(15px,1.05vw,18px)}
  body.x-inner.page-case .spec th{width:9em}
  body.x-inner.page-case .spec-note{max-width:none}
}