.header-inner{display:flex;align-items:center;padding:14px 20px}
.story-nav{display:flex;gap:18px;margin-left:24px}.story-nav a{color:inherit;text-decoration:none;font-weight:500}
.story{max-width:1040px;margin:0 auto;padding:24px 16px 72px;display:grid;gap:28px}
.story h1,.story h2,.story h3{font-family:'Playfair Display',serif}
.story-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.eyebrow{font-size:13px;letter-spacing:.14em;color:#7656f6;font-weight:600}
.story-hero h1{font-size:clamp(36px,6vw,58px);line-height:1.05;margin:8px 0 14px}
.story-hero h1 em{background:linear-gradient(90deg,#7656f6,#d04a9b);-webkit-background-clip:text;background-clip:text;color:transparent}
.story-lede{font-size:18px;line-height:1.55;margin:0 0 12px}
.story-meta{opacity:.7;font-size:14px;margin:0 0 12px}
.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{background:#7656f61a;color:#5b3fd0;border-radius:999px;padding:6px 14px;font-size:13px}
.hero-art{position:relative;min-height:260px;border-radius:28px;background:linear-gradient(135deg,#e9defd,#fde3ee 60%,#fdf0d5);overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(2px)}.o1{width:170px;height:170px;background:#b59cfa88;left:12%;top:16%}.o2{width:120px;height:120px;background:#f5a6c888;right:14%;top:40%}.o3{width:90px;height:90px;background:#f3cf7e99;left:40%;bottom:10%}
.art-spark{position:absolute;color:#fff;font-size:30px;right:22%;top:14%}.art-spark.s2{font-size:18px;left:20%;bottom:18%;right:auto;top:auto}
.story-top{display:grid;grid-template-columns:1fr 260px;gap:20px}
.takeaways,.toc{background:#fff;border:1px solid #7656f61f;border-radius:20px;padding:20px}
.takeaways h2,.toc h2{font-size:22px;margin:0 0 14px}
.take-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.take{border:1px solid #7656f61a;border-radius:14px;padding:14px}.take h3{font-size:16px;margin:0 0 6px}.take p{font-size:14px;margin:0;opacity:.8;line-height:1.5}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}.toc a{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;font-size:14px}
.toc a span{width:22px;height:22px;border-radius:50%;background:#7656f61f;color:#5b3fd0;display:grid;place-items:center;font-size:12px;flex:none}
.sec h2{font-size:28px;display:flex;align-items:center;gap:12px;margin:0 0 10px}
.num{width:36px;height:36px;border-radius:50%;background:#7656f61f;color:#5b3fd0;display:grid;place-items:center;font-size:18px;flex:none}
.sec p{line-height:1.6}.muted{opacity:.7;font-size:14px}
.callout{background:#7656f61a;border-radius:12px;padding:12px 16px}
.chart-row{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.chart{background:#fff;border:1px solid #7656f61f;border-radius:18px;padding:18px}.chart h3{font-size:18px;margin:0 0 8px}
.chart svg{width:100%;height:auto;display:block}.grid{stroke:#7656f61a}.tick{font-size:11px;fill:#6b6580}.lbl{font-size:13px;font-weight:700}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin-top:8px}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.card-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.name-card{background:#fff;border:1px solid #7656f61f;border-radius:16px;padding:16px;text-decoration:none;color:inherit;display:block}
a.name-card:hover{box-shadow:0 8px 24px #7656f61f}
.name-card h3{font-size:22px;margin:6px 0}.name-card p{margin:4px 0}.gain{color:#1f6a40;font-weight:700}
.badge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:700;font-size:14px}
.spark{width:100%;height:54px;margin-top:8px}
.more{margin-top:14px}.more summary{cursor:pointer;color:#6a46e5;font-weight:600}
.story .panel{background:#fff;border:1px solid #7656f61f;border-radius:20px;padding:22px 24px}
.story-table{width:100%;border-collapse:collapse;font-size:15px}
.story-table th,.story-table td{padding:9px 10px;text-align:left;border-bottom:1px solid #7656f61f;white-space:nowrap}
.story-table th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.story-table a,.story a{color:#6a46e5}.story-table b{color:inherit}
.story-table .up{color:#1f6a40}.story-table .down{color:#a5401f}
@media(max-width:820px){.story-hero,.story-top,.chart-row{grid-template-columns:1fr}.hero-art{min-height:160px}}
@media(max-width:600px){.story-nav{margin-left:14px;gap:12px}.story-table th:nth-child(3),.story-table td:nth-child(3),.story-table th:nth-child(4),.story-table td:nth-child(4),.story-table th:nth-child(7),.story-table td:nth-child(7){display:none}.story-table{font-size:14px}.story-table th,.story-table td{padding:9px 5px}.sec h2{font-size:23px}}
.story{grid-template-columns:minmax(0,1fr)}
@media(max-width:820px){.story-hero,.story-top,.chart-row{grid-template-columns:minmax(0,1fr)}}
.hero-art{background:none;min-height:0;overflow:visible}.hero-art img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.hero-art img{-webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 66% at 50% 52%,#000 62%,transparent 100%)}
/* ---- Hero v2: full-bleed art (Tahap 1) ---- */
body{overflow-x:clip}
.story{padding-top:0}
.story-hero{position:relative;display:block;width:100vw;margin-left:calc(50% - 50vw);min-height:440px;overflow:hidden}
.story-hero .hero-inner{position:relative;z-index:2;max-width:1040px;margin:0 auto;padding:56px 16px 48px;min-height:440px;display:flex;align-items:center}
.story-hero .hero-text{max-width:520px}
.story-hero .hero-bg{position:absolute;z-index:1;top:0;right:0;height:100%;width:62vw;object-fit:cover;object-position:center right;filter:saturate(1.35) contrast(1.06);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%);mask-image:linear-gradient(to right,transparent 0,#000 34%)}
@media(max-width:820px){.story-hero{min-height:0}.story-hero .hero-inner{min-height:0;padding:28px 16px 12px}.story-hero .hero-bg{position:relative;display:block;width:100%;height:auto;aspect-ratio:1420/820;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}}
@media(min-width:821px){.story-hero .hero-bg{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%),linear-gradient(to bottom,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 34%),linear-gradient(to bottom,#000 78%,transparent 100%);mask-composite:intersect}}

/* ---- Align with Wren page: same container width, same type tokens ---- */
.header-inner{max-width:1420px;margin:0 auto;padding:0 34px;height:64px;display:flex;align-items:center}
.story-nav a{font-size:14px;font-weight:500;color:#26304f;padding:8px 10px}
.story{max-width:1420px;padding:0 34px 28px}
.story-hero .hero-inner{max-width:1420px;padding-left:34px;padding-right:34px}
@media(min-width:1400px){.header-inner,.story,.story-hero .hero-inner{max-width:1480px}}
@media(max-width:1100px){.header-inner,.story{padding-left:22px;padding-right:22px}.story-hero .hero-inner{padding-left:22px;padding-right:22px}}
.story-hero h1{font-size:clamp(44px,5vw,72px);line-height:1.05;color:#26304f}
.story-hero h1 em{background:linear-gradient(90deg,#7656f6,#d04a9b);-webkit-background-clip:text;background-clip:text;color:transparent}
.story h2,.story h3{color:#0d176b}
.sec h2{font-size:24px;line-height:1.2}
.takeaways h2,.toc h2,.chart h3,.name-card h3,.take h3{font-size:19px;line-height:1.25;letter-spacing:-.25px}
.sec p{font-size:17px;max-width:min(100%,1000px)}
.callout{max-width:min(100%,1000px)}
.story-table th{font-size:13px;font-weight:500;color:#454f70;text-transform:none;letter-spacing:0;opacity:1}
.story-table td{font-size:15px}
/* hero art: sized by aspect so nothing is cropped, grows with the viewport */
.story-hero{min-height:clamp(440px,34vw,640px)}
.story-hero .hero-inner{min-height:clamp(440px,34vw,640px)}
.story-hero .hero-bg{height:100%;width:auto;aspect-ratio:1420/820;max-width:70vw;object-fit:cover}
@media(max-width:820px){.story-hero{min-height:0}.story-hero .hero-bg{width:100%;max-width:none;height:auto}}
/* #app (styles.css) already provides the Wren container; do not double the width/padding */
.story{max-width:none;padding:0 0 28px}
@media(max-width:1100px){.story{padding-left:0;padding-right:0}}
@media(min-width:1400px){.story{max-width:none}}

/* ---- Hero v3: art sits INSIDE the Wren container (right edges align), shorter hero ---- */
.story-hero{width:auto;margin-left:0;min-height:0;overflow:visible}
.story-hero .hero-inner{position:relative;max-width:none;margin:0;padding:24px 0;min-height:clamp(400px,30vw,540px)}
.story-hero .hero-bg{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;aspect-ratio:1420/820;object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 92%,transparent 100%),linear-gradient(to bottom,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 92%,transparent 100%),linear-gradient(to bottom,#000 80%,transparent 100%);mask-composite:intersect}
@media(max-width:820px){.story-hero .hero-inner{display:block;min-height:0;padding:20px 0 0}.story-hero .hero-bg{position:relative;display:block;width:100%;height:auto;margin-top:12px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%);-webkit-mask-composite:source-over;mask-composite:add}}
/* meta row: icons + thin separators, one line, wraps at separators */
ul.story-meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;padding:0;margin:0 0 12px;font-size:14px;color:#5a6384;opacity:1}
ul.story-meta li{display:inline-flex;align-items:center;gap:7px;padding:0 14px}
ul.story-meta li:first-child{padding-left:0}
ul.story-meta li+li{border-left:1px solid #7656f633}
ul.story-meta svg{color:#7656f6;flex:none}
@media(max-width:600px){ul.story-meta{gap:6px 18px}ul.story-meta li,ul.story-meta li+li{padding:0;border:0}}
@media(min-width:821px){.story-hero .hero-text{max-width:560px}}
/* mid widths: text keeps its column, art shrinks to the remaining space so they never overlap */
@media(min-width:821px) and (max-width:1300px){.story-hero .hero-text{max-width:500px}.story-hero .hero-bg{top:50%;height:auto;width:min(64%,calc(100% - 500px));transform:translateY(-50%)}}
@media(max-width:1300px){ul.story-meta{gap:6px 18px}ul.story-meta li,ul.story-meta li+li{padding:0;border:0}}
/* Breathing room (draft A): narrower text column, calmer paragraph, more space between groups */
@media(min-width:1301px){.story-hero .hero-text{max-width:480px}}
.story-hero h1{margin:8px 0 20px}
.story-hero .story-lede{font-size:17px;line-height:1.65;margin:0 0 22px}
.story-hero ul.story-meta{margin:0 0 18px}
@media(min-width:1301px){.story-hero ul.story-meta{width:max-content;max-width:none}}
/* Key takeaways: 4 columns with coloured icon badges (Kai-style) */
.take-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.take{padding:16px 16px 18px}
.take .ti{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--c) 14%,white);color:var(--c);margin-bottom:12px}
.take h3{font-size:19px;line-height:1.2;margin:0 0 6px}
.take p{font-size:14px;line-height:1.5;margin:0}
@media(max-width:1100px){.take-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.take-grid{grid-template-columns:minmax(0,1fr)}}
.story-top{align-items:start}
/* gender split bars (brand: girls = sakura pink, boys = matcha green) */
.split-panel h3{font-size:19px;margin:0 0 12px}
.sp-rows{display:grid;gap:8px}
.sp-row{display:grid;grid-template-columns:110px minmax(0,1fr) 90px;gap:12px;align-items:center;font-size:15px}
.sp-name{font-weight:600}.sp-name a{color:#6a46e5}
.sp-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#eee}
.sp-bar i{display:block;height:100%}.sp-bar .g{background:#d04a9b}.sp-bar .b{background:#4f8f5b}
.sp-lbl{font-size:13px;color:#454f70;text-align:right}
@media(max-width:600px){.sp-row{grid-template-columns:84px minmax(0,1fr) 70px;gap:8px;font-size:14px}}

/* Sticky "In this article" on the right (Kai layout, but it follows the reader) */
.story-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:start}
.story-main{display:grid;gap:28px;min-width:0}
.story-layout .toc{position:sticky;top:84px;background:#fff;border:1px solid #7656f61f;border-radius:20px;padding:18px 18px 14px}
.toc summary{list-style:none;cursor:default}.toc summary::-webkit-details-marker{display:none}
.toc summary h2{margin:0 0 12px;font-size:19px}
.toc a{border-radius:10px;padding:6px 8px;margin:0 -8px;transition:background .15s}
.toc a:hover{background:#7656f60f}
.toc a.active{background:#7656f61a;font-weight:600;color:#4a2fc4}
.toc a.active span{background:#6a46e5;color:#fff}
.story-layout .takeaways{width:100%}
@media(max-width:1000px){.story-layout{grid-template-columns:minmax(0,1fr)}.story-layout .toc{position:static;order:-1}.toc summary{cursor:pointer}.toc summary h2{margin:0}.toc[open] summary h2{margin-bottom:12px}.toc summary h2::after{content:' ▾';font-size:14px;color:#6a46e5}}
.story-main{grid-template-columns:minmax(0,1fr)}
.tips{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:min(100%,1000px)}
.tips li{font-size:17px;line-height:1.6;padding-left:18px;border-left:3px solid #7656f633}
.tips b{color:#0d176b}
.qa-list{display:grid;gap:10px;max-width:min(100%,1000px)}
.qa{background:#fff;border:1px solid #7656f61f;border-radius:14px;padding:0 18px}
.qa summary{cursor:pointer;list-style:none;font-weight:600;color:#0d176b;font-size:17px;padding:14px 26px 14px 0;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);color:#6a46e5;font-size:22px;font-weight:400}
.qa[open] summary::after{content:'−'}
.qa p{margin:0 0 16px;font-size:16.5px;line-height:1.6}
/* closing links */
.closing{border-top:1px solid #7656f61f;padding-top:26px}
.close-h{font-size:24px;margin:0 0 4px}.close-sub{margin:0 0 14px;opacity:.8}
.nm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.nm-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #7656f61f;border-radius:16px;overflow:hidden;padding-bottom:14px}
a.nm-card:hover{box-shadow:0 8px 24px #7656f61f}
.nm-card img{width:100%;aspect-ratio:3/1;object-fit:cover;display:block;mix-blend-mode:multiply;background:#fffaf5}
.nm-card h3{font-size:19px;margin:10px 14px 2px;color:#0d176b}
.nm-meaning{margin:0 14px 6px;font-size:14px;line-height:1.45;opacity:.85}
.nm-rank{margin:0 14px;font-size:13px;color:#454f70}
.close-back{margin:0}.close-back a{color:#6a46e5;text-decoration:none;font-weight:600}
@media(max-width:600px){.nm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.nm-card img{aspect-ratio:2/1}.nm-card h3{font-size:17px;margin:8px 10px 2px}.nm-meaning{margin:0 10px 4px;font-size:12.5px}.nm-rank{margin:0 10px;font-size:12px}}
.nm-card img{height:auto!important}
a.name-card,a.name-card p,a.name-card h3{color:inherit}
a.name-card .gain{color:#1f6a40}
a.name-card h3{color:#0d176b}
.name-card .go{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:#6a46e5}
/* chart + table polish */
.chart-row{align-items:stretch}
.chart-row .chart{display:flex;flex-direction:column}
.chart-row .chart svg{flex:1;min-height:0}
.chart .tick{font-size:12.5px}
.chart .lbl{font-size:15px}
.chart h3{line-height:1.25}
.chart .muted{margin:0 0 6px}
.legend{font-size:14px;margin-top:10px}
.story-table td b{font-weight:700}
.story-table tbody tr:hover{background:#7656f60a}
.story-table td:first-child,.story-table th:first-child{color:#6b6580;width:36px}
.more summary{padding:6px 0}
.chart-row .chart svg{flex:0 0 auto}
.chart-row .chart .legend{margin-top:auto;padding-top:12px}
@media(max-width:600px){.chart-row .chart:first-child .tick{font-size:21px}.chart-row .chart:first-child .lbl{font-size:24px}.chart-row .chart:last-child .tick{font-size:14px}}
@media(max-width:600px){.chart-row .chart:last-child .tick{font-size:12px}.chart-row .chart:first-child .tick{font-size:19px}}
.sub-h{font-size:19px;margin:22px 0 8px}
.name-card .go.soon{color:#8a82a8;font-weight:500}
.sub-h{font-size:19px;margin:22px 0 8px}
.name-card .go.soon{color:#8a82a8;font-weight:500}
/* A: show-all buttons */
.show-all{display:block;margin:12px 0 0;background:#fff;color:#5b3fd0;border:1px solid #7656f655;border-radius:999px;padding:9px 20px;font:inherit;font-weight:600;cursor:pointer}
.show-all:hover{background:#7656f60f}
.more-rows[hidden]{display:none}
/* D: hero button */
.hero-cta{display:inline-flex;align-items:center;gap:8px;background:#6a46e5;color:#fff;border-radius:999px;padding:11px 22px;font-weight:600;font-size:15px;text-decoration:none;margin:0 0 20px;box-shadow:0 6px 18px #6a46e540}
.hero-cta:hover{background:#5b3fd0}
/* C: section icon badges (replace the number circle) */
.sec h2 .num.ico{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--c) 14%,white);color:var(--c)}
.sec h2{gap:14px}
.story a.hero-cta,.story a.hero-cta:hover{color:#fff}

/* ---- phone polish (2026-10-06 visitor read) ---- */
.story-table{min-width:0;width:100%}
@media(max-width:600px){
  .story-table th,.story-table td{padding:10px 6px}
  .story-table td:first-child,.story-table th:first-child{width:28px}
  .take-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .take{padding:12px}
  .take .ti{width:34px;height:34px;margin-bottom:8px}
  .take h3{font-size:16px}
  .take p{font-size:13px;line-height:1.45}
  .sec h2{font-size:21px;gap:10px;align-items:flex-start}
  .sec h2 .num.ico{width:34px;height:34px;flex:none}
  .card-row{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;margin:0 -2px;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
  .card-row .name-card{flex:0 0 74%;scroll-snap-align:start}
  .card-row::after{content:'';flex:0 0 2px}
}
.table-scroll table.story-table{min-width:0!important}
/* TOC title spacing: the [open] attribute lives on the <details>, not on .toc */
@media(max-width:1000px){.toc-d[open] summary h2{margin-bottom:14px}.toc-d summary h2{display:flex;align-items:center;justify-content:space-between}.toc-d summary h2::after{content:'▾';margin-left:8px;transition:transform .2s}.toc-d[open] summary h2::after{transform:rotate(180deg)}}
@media(max-width:1000px){.toc-d summary h2::after{font-size:18px;color:#6a46e5}}
@media(min-width:1280px){.story-layout .toc{max-height:calc(100vh - 170px);overflow-y:auto}}
@media(min-width:1280px) and (max-height:780px){.story-layout .toc{padding:14px 16px 10px}.toc summary h2{margin-bottom:8px;font-size:17px}.toc ol{gap:2px}.toc a{padding:4px 8px;font-size:13px;line-height:1.25}}

/* TOC placement (2026-10-06): sidebar from 1280px, inside the article below that */
@media(max-width:1279px){
  .story-layout{grid-template-columns:minmax(0,1fr)}
  .story-layout .toc{position:static;order:-1;max-height:none;overflow:visible}
  .toc summary{cursor:pointer}
  .toc summary h2{margin:0}
  .toc-d[open] summary h2{margin-bottom:14px}
  .toc-d summary h2{display:flex;align-items:center;justify-content:space-between}
  .toc-d summary h2::after{content:'▾';font-size:18px;color:#6a46e5;margin-left:8px;transition:transform .2s}
  .toc-d[open] summary h2::after{transform:rotate(180deg)}
  .toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px}
}
@media(max-width:599px){.toc ol{grid-template-columns:minmax(0,1fr)}}
/* two TOC columns only when each column is wide enough; otherwise one tidy column */
@media(max-width:899px){.toc ol{grid-template-columns:minmax(0,1fr);gap:8px}}

/* ---- Kai review adoptions (2026-10-06): byline, source captions, methodology facts ---- */
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.byline{font-size:13px;color:#5a6384}
.byline::before{content:'·';margin-right:10px}
.src{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:#6b6580}
.chart .src{margin-top:8px}
.facts{margin:0;display:grid;gap:0}
.facts>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:4px 18px;padding:12px 0;border-top:1px solid #7656f61f}
.facts>div:first-child{border-top:0}
.facts dt{font-weight:700;color:#0d176b}
.facts dd{margin:0;line-height:1.55}
.facts a{color:#6a46e5}
@media(max-width:599px){.facts>div{grid-template-columns:minmax(0,1fr)}}
.story .sec p.src,.story p.src{font-size:12.5px;line-height:1.45;color:#6b6580;opacity:1}

/* Chart hierarchy (option B, approved 2026-10-06): main chart wider and taller, supporting chart slimmer with larger ticks */
@media(min-width:900px){.chart-row{grid-template-columns:1.8fr 1fr}.chart-row .chart.small .tick{font-size:15px}.chart-row .chart.small h3{font-size:17px}}
@media(min-width:900px){.chart-row .chart.small .tick{font-size:12.5px}.chart-row .chart.small p.muted{font-size:14px;line-height:1.45}}
@media(max-width:600px){.story-nav{gap:10px;margin-left:12px}.story-nav a{white-space:nowrap;font-size:13px;padding:6px 4px}}
@media(max-width:600px){.story-nav{margin-left:8px;gap:6px}.story-nav a{font-size:13px;padding:6px 3px}}

/* accessibility: text colors deepened to reach 4.5:1 contrast; links inside text are underlined so they can be told apart */
.name-card .gain{color:#1f6a40}
.name-card .soon.go{color:#6d6590}
.nm-card .nm-meaning{color:#5b3fd0}
.src a,.story p a,.story li a,.story dd a{text-decoration:underline;text-underline-offset:2px}

/* tap targets: links inside running text get a 24px tall hit area without changing the line spacing */
.story p a,.story li a,.story dd a,.story td a,.src a{padding:3px 0}
.story p a,.story li a,.story dd a,.story td a,.src a{padding:4px 0}
.sp-name a{display:inline-block;padding:3px 0}