/* Articles (2026-10-12): /what-we-think/ as a two-pane reader. A sticky index on the left picks the
   one article shown in the reading pane (articles.js, driven by the URL hash). Without JavaScript
   every article is listed in order and the index is plain anchor links. Phones get a sticky,
   collapsible index bar above the article. Decoration is filled shapes only: square markers,
   filled number discs and tinted panels, no rules or strokes. */

/* ---------- Compact page header ---------- */
.ahero{min-height:0}
.ahero .phero__in{padding-top:clamp(128px,11vw,168px);padding-bottom:clamp(44px,4.6vw,76px)}
.ahero .crumb{margin-bottom:26px}
.ahero h1{max-width:1000px;font-size:clamp(38px,4.6vw,78px)}
html[lang^=zh] .ahero h1{font-size:clamp(32px,3.8vw,62px)}
.ahero .lead{max-width:660px;margin-top:22px}

/* ---------- Reader layout ---------- */
.rd-sec{padding-block:clamp(36px,4.4vw,72px) clamp(72px,7vw,120px)}
.rd{display:grid;grid-template-columns:minmax(232px,300px) minmax(0,1fr);gap:clamp(28px,3.6vw,64px);align-items:start}
.rd-main{min-width:0;max-width:860px;overflow-anchor:none}
html[lang^=zh] .rd{word-break:keep-all;overflow-wrap:anywhere}

/* ---------- Index ---------- */
.rd-toc{position:sticky;top:104px;max-height:calc(100vh - 124px);max-height:calc(100dvh - 124px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(13,24,32,.22) transparent}
.rd-toc__sum{display:none}
.rd-toc__head{margin:4px 12px 20px}
.rd-toc__grp+.rd-toc__grp{margin-top:22px}
.rd-toc__label{display:flex;align-items:center;gap:9px;margin:0 12px 6px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-muted)}
html[lang^=zh] .rd-toc__label{letter-spacing:.06em;font-size:13px}
.rd-toc__label .ic{font-size:15px;color:var(--cyan-deep)}
.rd-toc__nav ol{display:grid;gap:2px}
.rd-toc__nav a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:baseline;padding:9px 12px;border-radius:12px;font-size:15px;line-height:1.42;color:var(--paper-ink);transition:background .2s,box-shadow .3s}
.rd-toc__nav a b{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--paper-muted)}
.rd-toc__nav a:hover{background:rgba(13,24,32,.05)}
.rd-toc__nav a[aria-current]{background:#fff;font-weight:600;box-shadow:0 14px 30px -22px rgba(13,24,32,.55)}
.rd-toc__nav a[aria-current] b{color:var(--cyan-deep)}
.rd-toc__nav a:focus-visible{outline-offset:-2px}

/* ---------- Article ---------- */
.rd-set,.rd-art{scroll-margin-top:12px}
.rd-set+.rd-set,.rd-art+.rd-art{margin-top:clamp(18px,2vw,28px)}
.rd.is-live .rd-set,.rd.is-live .rd-art{margin-top:0}
.rd-art{padding:clamp(28px,4.2vw,68px) clamp(22px,4.6vw,76px) clamp(24px,3.4vw,52px);border-radius:24px;background:#fff;color:var(--paper-ink);box-shadow:0 1px 0 var(--paper-line),0 40px 80px -60px rgba(13,24,32,.55)}
.rd-art__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-muted)}
html[lang^=zh] .rd-art__meta{letter-spacing:.06em;font-size:13.5px}
.rd-art__meta>span{display:inline-flex;align-items:center;gap:8px}
.rd-art__meta .ic{font-size:16px}
.rd-art__cat{color:var(--cyan-deep)}
.rd-art__title{margin-top:18px;max-width:24ch;font-size:clamp(30px,2.9vw,48px);font-weight:450;line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
html[lang^=zh] .rd-art__title{max-width:18em;font-size:clamp(26px,2.4vw,40px);font-weight:560;line-height:1.3;letter-spacing:-.01em}
.rd-art__title:focus{outline:none}
.rd-art__dek{max-width:34em;margin-top:20px;font-size:clamp(18px,1.3vw,20.5px);line-height:1.65;color:var(--paper-muted);text-wrap:pretty}
.rd-art__body{max-width:36em;margin-top:clamp(28px,2.8vw,42px);font-size:17.5px;line-height:1.8;color:#24333c}
.rd-art__body>*+*{margin-top:1.1em}
.rd-art__body p{text-wrap:pretty}
.rd-art__body h3{margin-top:1.9em;font-size:clamp(20px,1.5vw,23px);font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--paper-ink)}
.rd-art__body h3+*{margin-top:.6em}
/* Long Chinese text reads better with normal line breaking; headings and labels keep whole phrases. */
html[lang^=zh] .rd-art__body,html[lang^=zh] .rd-art__dek{word-break:normal;line-break:strict}
html[lang^=zh] .rd-art__body :is(p,li){word-break:normal}
html[lang^=zh] .rd-art__body{font-size:17px;line-height:1.9}

/* Bulleted list: small filled squares, as in the eyebrow labels. */
.rd-list{display:grid;gap:.55em}
.rd-list li{position:relative;padding-left:24px}
.rd-list li::before{content:'';position:absolute;left:2px;top:.74em;width:7px;height:7px;background:var(--cyan-deep)}

/* Checklists and numbered steps: tinted panels. */
.rd-check,.rd-steps,.rd-trend{display:grid;gap:10px}
.rd-check li,.rd-steps li,.rd-trend li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:16px 20px 17px;border-radius:14px;background:var(--paper);font-size:16.5px;line-height:1.65;color:#33424b}
.rd-check li>.ic{font-size:20px;color:var(--cyan-deep);margin-top:3px}
.rd-check b,.rd-steps b{display:block;margin-bottom:2px;font-weight:600;line-height:1.45;color:var(--paper-ink)}
.rd-steps{counter-reset:rd}
.rd-steps li{counter-increment:rd}
.rd-steps li::before{content:counter(rd);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper-ink);color:var(--cyan);font-size:13.5px;font-weight:650;font-variant-numeric:tabular-nums}
.rd-trend__ico{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--paper-ink);color:var(--cyan)}
.rd-trend__ico .ic{font-size:21px}
.rd-trend h4{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--paper-ink)}
.rd-trend p{margin-top:4px;color:var(--paper-muted)}

/* Two-by-two positioning map. */
.rd-quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rd-quad>div{padding:20px 22px 22px;border-radius:16px;background:var(--paper)}
.rd-quad>div.hi{background:var(--paper-ink);color:var(--white)}
.rd-quad b{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-deep)}
html[lang^=zh] .rd-quad b{letter-spacing:.06em;font-size:13px}
.rd-quad .hi b{color:var(--cyan)}
.rd-quad h4{margin-top:8px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.rd-quad p{margin-top:6px;font-size:15.5px;line-height:1.65;color:var(--paper-muted)}
.rd-quad .hi p{color:#b9c7ce}

/* Previous / next. */
.rd-pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(36px,3.6vw,56px)}
.rd-pn a{display:grid;align-content:start;gap:6px;padding:18px 22px 20px;border-radius:16px;background:var(--paper);transition:background .25s}
.rd-pn a:hover{background:var(--paper-2)}
.rd-pn small{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-deep)}
html[lang^=zh] .rd-pn small{letter-spacing:.06em;font-size:13px}
.rd-pn small .ic{font-size:16px;transition:transform .35s var(--ease)}
.rd-pn a>span{font-size:16.5px;font-weight:600;line-height:1.4;color:var(--paper-ink)}
.rd-pn__prev small .ic{transform:scaleX(-1)}
.rd-pn__next{grid-column:2;justify-items:end;text-align:right}
.rd-pn__prev:hover small .ic{transform:scaleX(-1) translateX(4px)}
.rd-pn__next:hover small .ic{transform:translateX(4px)}

/* A soft entrance when the reader switches articles (skipped for reduced motion by pro.css).
   The card's contents move, not the card, so scrolling to it measures its resting position. */
@keyframes rd-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.rd.is-live .rd-art.is-enter>*{animation:rd-in .55s var(--ease) both}
.rd.is-live .rd-art.is-enter>*+*{animation-delay:.06s}

/* ---------- Free resources ---------- */
.rd-more{margin-top:clamp(64px,7vw,112px);scroll-margin-top:12px}
.rd-more__head{margin-bottom:clamp(24px,2.6vw,36px)}
.rd-more__title{margin-top:16px;font-size:clamp(28px,2.6vw,42px);font-weight:450;line-height:1.12;letter-spacing:-.03em}
html[lang^=zh] .rd-more__title{font-size:clamp(24px,2.2vw,34px);font-weight:560;letter-spacing:-.01em}

/* ---------- Tablets and phones: the index becomes a bar above the article ---------- */
/* Keep the index closed until the script takes over, so the article does not jump up on load. */
@media(max-width:900px) and (scripting:enabled){.rd:not(.is-live) .rd-toc__nav{display:none}}
@media(max-width:900px){
  .rd{grid-template-columns:minmax(0,1fr);gap:16px}
  .rd-main{max-width:none}
  .rd-toc{position:static;max-height:none;overflow:visible}
  .rd-toc__head{display:none}
  .rd-toc__sum{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 18px;border-radius:14px;background:#fff;color:var(--paper-ink);box-shadow:0 14px 30px -24px rgba(13,24,32,.55);list-style:none;cursor:pointer;user-select:none}
  .rd-toc__sum::-webkit-details-marker{display:none}
  .rd-toc__k{flex:none;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-deep)}
  html[lang^=zh] .rd-toc__k{letter-spacing:.04em;font-size:14px}
  .rd-toc__n{flex:none;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--paper-muted)}
  .rd-toc__n b{font-weight:650;color:var(--paper-ink)}
  .rd-toc__cur{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px;font-weight:600}
  .rd-toc__caret{flex:none;width:12px;height:8px;margin-left:auto;background:var(--paper-ink);clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .3s var(--ease)}
  .rd-toc[open] .rd-toc__caret{transform:rotate(180deg)}
  .rd:not(.is-live) .rd-toc__cur,.rd:not(.is-live) .rd-toc__n{display:none}
  .rd-toc__nav{margin-top:8px;padding:14px 8px 12px;border-radius:16px;background:#fff}
  .rd-toc__nav a{font-size:16px;padding:10px 12px}
  .rd-toc__nav a[aria-current]{background:var(--paper);box-shadow:none}
  .rd-toc__label{font-size:12.5px}
  /* With JavaScript the bar sticks under the header and the list opens over the article. */
  .rd.is-live .rd-toc{position:sticky;top:70px;z-index:6;margin-inline:calc(var(--gutter) * -1);padding:10px var(--gutter);background:var(--paper)}
  .rd.is-live .rd-toc__nav{position:absolute;top:calc(100% - 4px);left:var(--gutter);right:var(--gutter);margin-top:0;max-height:min(66vh,560px);max-height:min(66svh,560px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 30px 70px -20px rgba(13,24,32,.45)}
  .rd-set,.rd-art,.rd-more{scroll-margin-top:64px}
}
@media(max-width:720px){
  .ahero .phero__in{padding-top:118px;padding-bottom:84px}
  .ahero h1{font-size:clamp(34px,9.4vw,46px)}
  html[lang^=zh] .ahero h1{font-size:clamp(28px,7.8vw,38px)}
  .rd-sec{padding-top:20px}
  .rd-art{border-radius:20px}
  .rd-art__title{font-size:clamp(28px,7.6vw,36px)}
  html[lang^=zh] .rd-art__title{font-size:clamp(24px,6.6vw,30px)}
  .rd-art__dek{font-size:17.5px}
  .rd-art__body{font-size:17px;line-height:1.75}
  html[lang^=zh] .rd-art__body{font-size:16.5px;line-height:1.85}
  .rd-check li,.rd-steps li,.rd-trend li{padding:14px 16px 15px;gap:12px 14px;font-size:16px}
  .rd-quad{grid-template-columns:minmax(0,1fr)}
  .rd-quad p{font-size:16px}
  .rd-pn{grid-template-columns:minmax(0,1fr)}
  .rd-pn__next{grid-column:auto}
  .rd-art__meta{font-size:13.5px}
}

@media print{
  .rd-toc,.rd-pn,.rd-more{display:none!important}
  .rd{display:block}
  .rd .rd-art[hidden]{display:block!important}
  .rd-art{box-shadow:none;padding:0;margin-top:32px!important}
}