/* Speech Away - research blog. Mirrors the app's monochrome editorial system
   (design.md / tailwind.config.js). Self-contained; adds prefers-color-scheme
   dark (chart colors are CSS vars, so SVG inverts for free). */
:root{
  --ink:#000;--ink-soft:#2b2b2b;--paper:#fff;--paper-alt:#f7f7f7;
  --n100:#e5e5e5;--n200:#bababa;--n300:#808080;--n400:#767676;--n500:#545454;
  --good:#1b6b3a;--warn:#b3261e;--surface:#1c1c1c;
  --serif:"Crimson Text","Adobe Garamond Pro",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --reading:760px;--text:660px;--container:1100px;
  --hair:var(--n100);
  --ease-out:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#f4f4f4;--ink-soft:#d6d6d6;--paper:#121212;--paper-alt:#1c1c1c;
    --n100:#333;--n200:#4a4a4a;--n300:#8a8a8a;--n400:#a0a0a0;--n500:#bcbcbc;
    --good:#56c281;--warn:#ff6b61;--surface:#1c1c1c;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
:where(section[id],.cat,.faq){scroll-margin-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;letter-spacing:-.2px}
p{text-wrap:pretty}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.reading{max-width:var(--reading);margin:0 auto;padding:0 24px}

/* header / footer */
.site{border-bottom:1px solid var(--hair)}
.bar-row{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:16px}
.brand{font-family:var(--serif);font-size:17px;text-decoration:none;letter-spacing:-.2px;white-space:nowrap}
.topnav{display:flex;align-items:center;gap:22px}
.topnav a{font-size:12px;text-transform:uppercase;letter-spacing:1.6px;color:var(--n400);text-decoration:none;min-height:40px;display:inline-flex;align-items:center;transition:color .2s;white-space:nowrap}
.topnav a:hover,.topnav a[aria-current]{color:var(--ink)}
.topnav .cta-link{color:var(--ink)}
.site-foot{border-top:1px solid var(--hair);margin-top:96px;padding:40px 0}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:20px}
.foot-links a{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--n400);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--ink)}
.fine{font-size:11px;letter-spacing:.4px;color:var(--n300);line-height:1.6}
.fine a{color:var(--n300);text-decoration:none}
.fine a:hover{color:var(--ink)}

/* shared bits */
.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;color:var(--n400);margin:0;display:block}
.crumbs{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--n400);margin:40px 0 28px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--n400);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--n200)}
.crumbs [aria-current]{color:var(--ink)}
.lede{font-size:20px;line-height:1.45;color:var(--n500);max-width:var(--text)}

/* article */
article{padding-bottom:8px}
article h1{font-size:clamp(32px,5vw,46px);line-height:1.08;margin:12px 0 10px}
article h2{font-size:26px;line-height:1.14;margin:46px 0 14px}
article .cite{font-size:13px;color:var(--n400);font-style:italic;max-width:var(--text);margin:0 0 20px;line-height:1.5}
article p{margin:0 0 16px;max-width:var(--text)}
article section p,article section li{color:var(--ink-soft)}
article a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--n200)}
article a:hover{text-decoration-color:var(--ink)}
em{font-style:italic}

/* key stat */
.keystat{display:flex;flex-direction:column;gap:4px;border-left:3px solid var(--ink);padding:6px 0 6px 20px;margin:28px 0 8px;max-width:var(--text)}
.keystat-num{font-family:var(--serif);font-size:clamp(40px,7vw,56px);line-height:1;font-variant-numeric:tabular-nums}
.keystat-label{font-size:14px;color:var(--n500);text-transform:uppercase;letter-spacing:1px;line-height:1.4}

/* callout */
.callout{border:1px solid var(--hair);border-left:2px solid var(--ink);padding:16px 20px;margin:20px 0;max-width:var(--text);background:var(--paper-alt)}
.callout p{margin:0;color:var(--ink)}

/* ---- visualization figure ---- */
.viz{margin:32px 0;max-width:var(--text);border:1px solid var(--hair);padding:20px 22px 18px;background:var(--paper)}
.viz-head{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.viz-kicker{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:var(--n400)}
.viz-title{font-family:var(--serif);font-size:20px;line-height:1.15;color:var(--ink)}
.viz-plot{margin:4px 0 2px}
.viz-cap{font-size:13.5px;line-height:1.5;color:var(--n500);margin:12px 0 0;max-width:none}
.viz-data{margin-top:12px;font-size:13px}
.viz-data summary{cursor:pointer;color:var(--n400);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;font-weight:600}
.viz-data table{width:100%;border-collapse:collapse;margin-top:10px}
.viz-data th,.viz-data td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums}
.viz-data th{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--n400);font-weight:600}
.viz-data td{color:var(--ink-soft)}
.viz-data .muted{color:var(--n400)}

/* CTA band */
.cta-band{background:var(--surface);color:#fff;padding:40px;margin:56px 0 8px;max-width:var(--text)}
.cta-band .eyebrow{color:#9a9a9a}
.cta-band h2{color:#fff;font-size:30px;margin:10px 0 12px}
.cta-sub{color:#d6d6d6;margin:0 0 22px}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 24px;background:#fff;color:#000;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;text-decoration:none;transition:transform .1s}
.btn:active{transform:scale(.96)}

/* related */
.related{margin-top:48px}
.rel-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair)}
.rel-card{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:padding-left .2s}
.rel-card:hover{padding-left:8px}
.rel-title{font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1.18}

/* hub */
.hub-hero{padding-top:40px;padding-bottom:8px}
.hub-hero h1{font-size:clamp(34px,6vw,60px);line-height:1.05;letter-spacing:-.5px;margin:12px 0 18px;max-width:980px}
.hub-hero .lede{max-width:720px}
.wave{display:flex;align-items:center;gap:3px;height:44px;margin:32px 0 8px}
.wave .bar{display:block;width:3px;height:100%;background:var(--ink);transform:scaleY(var(--hi));transform-origin:center;animation-name:lf-wave;animation-timing-function:cubic-bezier(.37,0,.63,1);animation-iteration-count:infinite;will-change:transform}
@keyframes lf-wave{0%,100%{transform:scaleY(calc(var(--hi)*.35))}50%{transform:scaleY(var(--hi))}}
.cat-nav{display:flex;flex-wrap:wrap;gap:10px 18px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:16px 24px;margin-top:40px;position:sticky;top:0;background:var(--paper);z-index:5}
.cat-nav a{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--n400);text-decoration:none;transition:color .2s}
.cat-nav a:hover,.cat-nav a.active{color:var(--ink)}
.cat-nav a.active{box-shadow:inset 0 -2px 0 var(--ink)}
.cat{padding-top:48px}
.cat-head{margin-bottom:8px}
.cat-blurb{font-size:16px;color:var(--n500);max-width:var(--text);margin:8px 0 0}
.hub-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);margin-top:18px}
.hub-card{display:flex;flex-direction:column;gap:8px;padding:26px 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:padding-left .2s}
.hub-card:hover{padding-left:10px}
.hub-stat{font-family:var(--serif);font-size:30px;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.hub-title{font-family:var(--serif);font-size:23px;line-height:1.15;color:var(--ink)}
.hub-cite{font-size:12.5px;color:var(--n400);font-style:italic}
.hub-more{font-size:12px;text-transform:uppercase;letter-spacing:1.6px;color:var(--n400)}

@media (min-width:768px){
  .rel-grid{grid-template-columns:1fr 1fr;gap:0 32px}
  .hub-grid{grid-template-columns:1fr 1fr;gap:0 48px}
  .cat .hub-grid{grid-template-columns:1fr 1fr 1fr;gap:0 40px}
}

/* ---- navigation: progress bar, back-to-top, on-this-page TOC, prev/next ---- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none;transition:transform .08s linear}
.totop{position:fixed;right:20px;bottom:20px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);border:1px solid var(--n200);z-index:55;cursor:pointer;opacity:0;transform:translateY(8px) scale(.95);pointer-events:none;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),border-color .2s ease}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--ink)}
.totop:active{transform:scale(.97)}
.totop svg{width:16px;height:16px}

/* heading anchor - a quiet # that appears on hover */
.post h2{position:relative}
.hash{margin-left:8px;color:var(--n200);text-decoration:none;font-weight:400;opacity:0;transition:opacity .15s ease,color .15s ease}
.hash:hover{color:var(--ink)}
@media (hover:hover){.post h2:hover .hash{opacity:1}}

/* mobile / tablet: collapsible "On this page" */
.toc-m{margin:22px 0 6px;border:1px solid var(--hair);max-width:var(--text)}
.toc-m summary{cursor:pointer;list-style:none;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:var(--n400);padding:13px 16px;display:flex;justify-content:space-between;align-items:center}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"\203A";transition:transform .2s var(--ease-out);font-size:16px}
.toc-m[open] summary::after{transform:rotate(90deg)}
.toc-m ol{margin:0;padding:2px 16px 14px;list-style:none;counter-reset:t}
.toc-m li{counter-increment:t}
.toc-m a{display:block;padding:6px 0 6px 26px;position:relative;color:var(--ink-soft);font-size:14.5px;text-decoration:none;line-height:1.35}
.toc-m a::before{content:counter(t);position:absolute;left:0;color:var(--n300);font-variant-numeric:tabular-nums;font-size:12px}
.toc-m a:hover{color:var(--ink)}

/* wide screens: sticky gutter rail (sits in the empty margin beside the column) */
.toc{display:none}
@media (min-width:1280px){
  .toc{display:block;position:fixed;top:120px;left:calc(50% + 396px);width:200px;max-height:74vh;overflow-y:auto;z-index:20}
  .toc-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:var(--n400);margin:0 0 12px}
  .toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--n100)}
  .toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:13px;line-height:1.35;color:var(--n400);text-decoration:none;transition:color .2s ease,border-color .2s ease}
  .toc a:hover{color:var(--ink-soft)}
  .toc a.active{color:var(--ink);border-left-color:var(--ink)}
}

/* prev / next */
.seq{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);margin-top:48px}
.seq a{display:flex;flex-direction:column;gap:5px;padding:22px 0;text-decoration:none;transition:transform .2s var(--ease-out)}
.seq .dir{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:var(--n400)}
.seq .ttl{font-family:var(--serif);font-size:18px;line-height:1.2;color:var(--ink)}
.seq-next{text-align:right;align-items:flex-end}
@media (min-width:560px){
  .seq{grid-template-columns:1fr 1fr}
  .seq-prev{padding-right:28px}
  .seq-next{padding-left:28px;border-left:1px solid var(--hair)}
}
@media (hover:hover){.seq-prev:hover{transform:translateX(-4px)}.seq-next:hover{transform:translateX(4px)}}

/* reveal-on-scroll (only when .js present; reduced-motion strips .js) */
.js .reveal{opacity:0;transform:translateY(12px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.33,1,.68,1),transform .55s cubic-bezier(.33,1,.68,1)}
@media (prefers-reduced-motion:reduce){
  .wave .bar{animation:none;transform:scaleY(var(--hi))}
  *{transition:none!important}
}