style.scss

---
---
@import "reset";
@import "highlights";

:root {
  --ink: #172033;
  --ink-soft: #24324a;
  --paper: #f7f1e7;
  --white: #fffdf8;
  --blue: #315fba;
  --teal: #62cbb7;
  --coral: #d96c54;
  --gold: #d7a73e;
  --muted: #6f706f;
  --line: #ddd5c8;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background-color: var(--paper); background-image: radial-gradient(rgba(65,77,92,.07) .7px, transparent .7px); background-size: 18px 18px; color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-150%); background: var(--white); padding: 10px 16px; border-radius: 4px; }
.skip-link:focus { transform: none; }

.site-header { position: relative; z-index: 20; background: var(--ink); color: var(--white); border-bottom: 1px solid rgba(255,255,255,.14); }
.header-inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: #05070a; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; transform: translateX(1px) scale(.78); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 15px; letter-spacing: .02em; }
.brand-copy small { margin-top: 3px; color: #b9b19f; font: 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.primary-nav { display: flex; align-items: center; gap: 38px; }
.primary-nav a { color: #bbc4d0; font-size: 13px; font-weight: 600; transition: color .2s; }
.primary-nav a:hover, .primary-nav a:focus { color: var(--white); }
.header-cta { padding: 11px 17px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; color: var(--white); font-size: 12px; font-weight: 700; }
.header-cta span { margin-left: 9px; color: var(--teal); }

.hero { overflow: hidden; background: var(--ink); color: var(--white); }
.hero-grid { min-height: 650px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 70px; padding-block: 72px 88px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--blue); font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.hero .eyebrow, .about-band .eyebrow { color: var(--teal); }
.eyebrow > span { width: 25px; height: 1px; background: currentColor; }
.hero h1 { margin: 0; max-width: 590px; font: 500 clamp(54px, 5.3vw, 78px)/.98 var(--serif); letter-spacing: -.035em; }
.hero h1 em { color: var(--teal); font-weight: inherit; }
.hero-lede { max-width: 570px; margin: 30px 0 0; color: #b8c2d0; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 50px; padding: 0 20px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.button-primary { background: var(--blue); color: var(--white); transition: transform .2s, background .2s; }
.button-primary:hover { background: #3472ed; transform: translateY(-2px); }
.button-primary span { color: #b9d0ff; }
.text-link { display: inline-flex; gap: 10px; align-items: center; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 700; }
.text-link span { color: var(--blue); }
.text-link.light span { color: var(--teal); }
.hero-stats { display: flex; gap: 42px; margin: 46px 0 0; }
.hero-stats div { min-width: 82px; }
.hero-stats dt { font: 500 25px/1 var(--serif); }
.hero-stats dd { margin: 7px 0 0; color: #8794a7; font: 9px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.featured-visual { position: relative; min-height: 500px; overflow: hidden; border: 1px solid rgba(255,255,255,.17); background: #14233a; box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.featured-visual > img { width: 100%; height: 500px; object-fit: cover; filter: saturate(.86) contrast(1.04); transition: transform .6s ease; }
.featured-visual:hover > img { transform: scale(1.025); }
.featured-visual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(8,18,34,.92) 100%); }
.featured-label { position: absolute; z-index: 2; top: 22px; left: 22px; padding: 8px 11px; background: rgba(11,22,40,.88); color: #dce2ea; font: 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.featured-overlay { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 27px; display: grid; gap: 9px; }
.featured-overlay .topic-chip { width: max-content; padding: 5px 8px; background: var(--teal); color: var(--ink); font: 500 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.featured-overlay strong { max-width: 480px; font: 500 30px/1.08 var(--serif); }
.featured-overlay > span:last-child { color: #c1cad6; font-size: 11px; font-weight: 700; }
.featured-overlay b { margin-left: 8px; color: var(--teal); }
.data-decoration { position: absolute; z-index: 3; top: 26px; right: 25px; height: 38px; display: flex; align-items: end; gap: 4px; }
.data-decoration i { display: block; width: 4px; background: var(--teal); opacity: .75; }
.data-decoration i:nth-child(1) { height: 24%; }.data-decoration i:nth-child(2) { height: 46%; }.data-decoration i:nth-child(3) { height: 70%; }.data-decoration i:nth-child(4) { height: 52%; }.data-decoration i:nth-child(5) { height: 100%; }

.topic-strip { border-bottom: 1px solid var(--line); background: #eee5d7; }
.topic-strip .shell { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 28px; color: #556070; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.topic-strip .strip-label { color: var(--blue); font-weight: 500; }
.topic-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 6px; overflow-x: auto; }
.topic-filter { white-space: nowrap; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }

.archive { padding-block: 105px 120px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 48px; }
.notebook-kicker { width: max-content; margin: 0 0 17px !important; padding: 8px 13px 7px; transform: rotate(-1deg); background: #f4d783; color: #5d4720 !important; font: 500 12px/1.2 var(--mono) !important; letter-spacing: .035em; }
.section-heading .eyebrow { margin-bottom: 18px; }
.section-heading h2 { margin: 0; font: 500 clamp(42px, 5vw, 60px)/1 var(--serif); letter-spacing: -.03em; }
.section-heading p:not(.eyebrow) { max-width: 570px; margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.archive-tally { display: grid; justify-items: end; gap: 8px; }
.archive-count { display: flex; align-items: baseline; gap: 8px; }
.archive-count strong { font: 500 36px/1 var(--serif); }
.archive-count span { color: var(--muted); font: 10px/1 var(--mono); text-transform: uppercase; }
.archive-tools { display: flex; align-items: center; gap: 16px; padding: 18px; margin-bottom: 34px; border: 1px solid var(--line); background: rgba(255,255,255,.45); }
.search-field { width: min(480px, 100%); min-height: 43px; display: flex; align-items: center; gap: 11px; padding: 0 12px; background: var(--white); border: 1px solid #d3d7d6; }
.search-field > span:first-child { font-size: 20px; transform: rotate(-15deg); }
.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-field kbd { color: #8b949f; border: 0; font: 9px/1 var(--mono); }
.method-select { min-width: 290px; min-height: 43px; display: flex; align-items: center; gap: 11px; padding: 0 11px; margin-left: auto; border: 1px solid #d3d7d6; background: var(--white); }
.method-select > span { color: var(--blue); font: 500 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.method-select select { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 700; }
.method-select:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(40,100,220,.1); }
.filters { display: flex; align-items: center; gap: 4px; overflow-x: auto; }
.filter { padding: 10px 13px; border: 0; border-radius: 3px; color: #5d6774; background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }
.filter:hover, .filter.active { color: var(--white); background: var(--ink); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-card { position: relative; display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--line); background: rgba(255,253,248,.82); transition: transform .25s, box-shadow .25s; }
.post-card:before { content: ""; position: absolute; z-index: 2; top: -1px; left: -1px; width: 42px; height: 3px; background: var(--blue); }
.post-card[data-category="health"]:before { background: #4f9f87; }
.post-card[data-category="relationships"]:before { background: var(--coral); }
.post-card[data-category="education"]:before { background: var(--gold); }
.post-card[data-category="culture"]:before { background: #8c68a4; }
.post-card[data-category="mathematics"]:before { background: #315fba; }
.post-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(26,37,50,.11); }
.post-card[hidden] { display: none; }
.card-image { position: relative; height: 210px; overflow: hidden; background: #dfe3e4; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.post-card:hover .card-image img { transform: scale(1.035); }
.card-image > span { position: absolute; bottom: 12px; left: 12px; padding: 6px 8px; background: rgba(23,32,51,.9); color: var(--white); font: 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.card-body { flex: 1; display: flex; flex-direction: column; padding: 23px 23px 21px; }
.card-meta { display: flex; justify-content: space-between; color: #87909b; font: 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.card-body h3 { margin: 17px 0 10px; font: 500 24px/1.12 var(--serif); letter-spacing: -.015em; }
.card-body h3 a:hover { color: var(--blue); }
.card-body p { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.card-link { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; margin-top: auto; border-top: 1px solid var(--line); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.card-link span { color: var(--blue); font-size: 15px; }
.no-results { padding: 60px 20px; text-align: center; border: 1px dashed #bbc1c2; color: var(--muted); }

.about-band { background-color: var(--ink); background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; color: var(--white); }
.about-band-grid { display: grid; grid-template-columns: .6fr 1.6fr 1fr; gap: 65px; align-items: start; padding-block: 85px; }
.about-band blockquote { margin: 0; font: 500 clamp(30px, 3.2vw, 44px)/1.14 var(--serif); letter-spacing: -.02em; }
.about-band-grid > div p { margin: 0 0 25px; color: #aeb8c6; font-size: 13px; }
.about-band-grid .margin-equation { width: max-content; max-width: 100%; margin: -5px 0 28px; color: #e4c777; font: 500 17px/1.4 var(--mono); transform: rotate(-2deg); }

.site-footer { background: #101827; color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 2fr .6fr .6fr; gap: 80px; padding-block: 65px 55px; }
.brand-footer .brand-mark { width: 38px; height: 38px; }
.footer-grid > div:first-child > p { max-width: 420px; margin: 19px 0 0; color: #8995a6; font-size: 12px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.footer-links span { margin-bottom: 7px; color: #69778b; font: 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.footer-links a { color: #adb7c5; }
.footer-links a:hover { color: var(--teal); }
.footer-bottom { display: flex; justify-content: space-between; padding-block: 20px; border-top: 1px solid rgba(255,255,255,.09); color: #606d80; font: 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }

.reading-progress { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 3px; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--teal); }
.article-shell, .page-shell { width: min(850px, calc(100% - 48px)); margin: 0 auto; padding: 85px 0 110px; }
.article-header { margin-bottom: 55px; text-align: center; }
.back-link { display: block; width: max-content; margin: 0 auto 45px; color: var(--muted); font-size: 11px; font-weight: 700; }
.article-header .eyebrow, .page-header .eyebrow { justify-content: center; }
.article-header h1, .page-header h1 { margin: 0; font: 500 clamp(44px, 6vw, 70px)/1.02 var(--serif); letter-spacing: -.035em; }
.article-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px; color: #77818d; font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.article-content { color: #303a4b; font: 17px/1.82 var(--sans); }
.article-content > figure:first-child { margin-top: 0; }
.article-content figure { margin: 45px 0; }
.article-content figure img { margin-inline: auto; border-radius: 2px; }
.article-content img { height: auto; }
.article-content h1, .article-content h2, .article-content h3, .article-content h4 { color: var(--ink); font-family: var(--serif); font-weight: 600; line-height: 1.16; letter-spacing: -.02em; }
.article-content h1 { margin: 70px 0 20px; font-size: 42px; }
.article-content h2 { margin: 60px 0 18px; font-size: 34px; }
.article-content h3 { margin: 48px 0 16px; font-size: 27px; }
.article-content p { margin: 22px 0; }
.article-content a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-content blockquote { margin: 38px 0; padding: 4px 0 4px 27px; border-left: 3px solid var(--teal); color: #415069; font: 500 24px/1.5 var(--serif); }
.article-content ul, .article-content ol { margin: 24px 0; padding-left: 26px; }
.article-content li { margin: 9px 0; }
.article-content pre { overflow-x: auto; padding: 22px; border-radius: 4px; background: #101d30; color: #e8edf3; font-size: 13px; }
.article-content code { font-family: var(--mono); }
.article-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 13px; }
.article-content td, .article-content th { padding: 10px 12px; border: 1px solid var(--line); }
.article-content iframe { max-width: 100%; }
.article-content > div { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.article-content center { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.article-content .MathJax_Display,
.article-content .MJXc-display,
.article-content mjx-container[display="true"] { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.article-related { padding-top: 48px; margin-top: 75px; border-top: 1px solid var(--line); }
.article-related .eyebrow { margin-bottom: 12px; }
.article-related h2 { margin: 0 0 22px; font: 500 32px/1 var(--serif); letter-spacing: -.02em; }
.related-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.related-pill { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; min-height: 43px; padding: 10px 14px; border: 1px solid #cbd1d2; border-radius: 999px; background: rgba(255,255,255,.6); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.35; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.random-related-candidate[hidden] { display: none; }
.related-pill b { color: var(--blue); font-size: 14px; }
.related-pill:hover { border-color: var(--ink); background: var(--ink); color: var(--white); transform: translateY(-2px); }
.related-pill:hover b { color: var(--teal); }
.article-return { display: flex; justify-content: center; margin-top: 58px; }
.article-return a { display: inline-flex; align-items: center; gap: 11px; padding-bottom: 5px; border-bottom: 1px solid #aeb5b8; color: #556171; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; transition: color .2s, border-color .2s; }
.article-return a span { color: var(--blue); font-size: 15px; transition: transform .2s; }
.article-return a:hover { color: var(--ink); border-color: var(--ink); }
.article-return a:hover span { transform: translateX(-3px); }
.page-shell { min-height: 60vh; }
.page-header { margin-bottom: 50px; text-align: center; }

/* Daily market attribution */
.attribution-card-visual { background-color: #eef1e9; background-image: linear-gradient(rgba(63,139,104,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(49,95,186,.08) 1px, transparent 1px); }
.attribution-card-sketch { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); overflow: visible; }
.attribution-card-sketch .attribution-zero { fill: none; stroke: rgba(25,37,59,.35); stroke-width: 1.5; stroke-dasharray: 5 5; }
.attribution-card-sketch rect { rx: 2px; }.attribution-card-sketch .attribution-up rect { fill: #3f8b68; }.attribution-card-sketch .attribution-down rect { fill: #d96c54; }
.attribution-card-sketch .attribution-brace, .attribution-card-sketch .attribution-arrow { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; }
.attribution-card-sketch text { fill: #59616d; font: 9px var(--mono); letter-spacing: .04em; }
.attribution-question { display: grid; grid-template-columns: .82fr 1.18fr; gap: 46px; align-items: center; padding: 34px 36px; border: 1px solid #cfc8ba; background: rgba(255,253,248,.9); box-shadow: 5px 7px 0 rgba(49,70,100,.07); }
.attribution-question h2, .attribution-ledger h2 { margin: 0; font: 500 clamp(34px,5vw,48px)/1.04 var(--serif); letter-spacing: -.03em; }
.attribution-question > div:first-child > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.attribution-two-whys { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; padding: 1px; background: var(--line); }
.attribution-two-whys article { min-height: 175px; padding: 22px 20px; background: rgba(247,247,242,.95); }
.attribution-two-whys article:first-child { border-top: 4px solid var(--coral); }.attribution-two-whys article:last-child { border-top: 4px solid #3f8b68; }
.attribution-two-whys span { color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; }.attribution-two-whys strong { display: block; margin-top: 13px; font: 500 21px/1.15 var(--serif); }.attribution-two-whys p { margin: 12px 0 0; color: var(--muted); font-size: 10px; }
.attribution-results { margin-top: 78px; }.attribution-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 28px; padding: 1px; background: var(--line); }
.attribution-summary article { position: relative; padding: 18px 16px; background: rgba(255,253,248,.96); }.attribution-summary article.featured:before { content: ""; position: absolute; inset: 12px auto 12px 7px; width: 3px; background: var(--blue); }
.attribution-summary span { color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; }.attribution-summary strong { display: block; margin-top: 10px; font: 500 27px/1 var(--serif); }
.attribution-chart-wrap { position: relative; min-height: 470px; margin-top: 24px; border: 1px solid var(--line); background: rgba(255,253,248,.72); touch-action: pan-y; }.attribution-chart-wrap canvas { display: block; cursor: crosshair; }
.attribution-tooltip { width: 235px; }.attribution-tooltip > strong { display: block; font: 500 15px/1.2 var(--serif); }.attribution-tooltip > div { display: grid; gap: 7px; margin-top: 10px; }.attribution-tooltip span { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font: 8px/1.2 var(--mono); }.attribution-tooltip b { color: var(--ink); font-weight: 500; }
.attribution-verdict { margin: 16px 0 0; padding: 15px 17px; border-left: 3px solid #3f8b68; background: rgba(63,139,104,.055); color: var(--muted); font-size: 12px; line-height: 1.7; }.attribution-verdict strong { color: var(--ink); }
.attribution-ledger { max-width: 940px; margin: 0 auto; padding-top: 88px; }.attribution-tables { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 29px; }.attribution-tables > div { border: 1px solid var(--line); background: rgba(255,253,248,.92); }.attribution-tables h3 { margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--line); font: 500 23px/1 var(--serif); }.attribution-tables article { display: grid; grid-template-columns: 1.35fr .75fr .45fr; gap: 10px; align-items: center; padding: 13px 17px; border-bottom: 1px dashed var(--line); }.attribution-tables article:last-child { border-bottom: 0; }.attribution-tables article div { min-width: 0; }.attribution-tables article strong { font: 600 10px/1 var(--mono); }.attribution-tables article div span { display: block; overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.attribution-tables article > span, .attribution-tables b { font: 8px/1 var(--mono); text-align: right; }.attribution-tables article > span { color: var(--muted); }.attribution-tables .positive { color: #2f8063; }.attribution-tables .negative { color: var(--coral); }
.attribution-math .equation { justify-content: center; white-space: normal; }.attribution-math math { flex: 0 0 auto; width: max-content; font-size: 20px; }.attribution-sources { padding-bottom: 12px; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 55px; }
  .hero-copy { max-width: 680px; }
  .featured-visual, .featured-visual > img { min-height: 440px; height: 440px; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .archive-tools { align-items: stretch; flex-direction: column; }
  .search-field { width: 100%; }
  .method-select { width: 100%; margin-left: 0; }
  .about-band-grid { grid-template-columns: 1fr 2fr; }
  .about-band-grid > div { grid-column: 2; }
}

@media (max-width: 700px) {
  .shell { width: min(100% - 30px, 1180px); }
  .header-inner { min-height: 72px; gap: 14px; }
  .brand { gap: 9px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-copy small, .header-cta { display: none; }
  .primary-nav { display: flex; gap: 5px; }
  .primary-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; font-size: 12px; }
  .hero-grid { min-height: auto; padding-block: 62px; }
  .hero h1 { font-size: clamp(48px, 14vw, 68px); }
  .hero-lede { font-size: 15px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-stats { gap: 18px; justify-content: space-between; }
  .featured-visual, .featured-visual > img { min-height: 370px; height: 370px; }
  .featured-overlay { left: 22px; right: 22px; }
  .featured-overlay strong { font-size: 25px; }
  .topic-strip .shell { align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; padding-block: 14px; }
  .topic-buttons { width: 100%; justify-content: flex-start; }
  .topic-filter, .filter { min-height: 44px; }
  .archive { padding-block: 75px; }
  .section-heading { align-items: start; flex-direction: column; }
  .archive-tally { justify-items: start; }
  .filters { padding-bottom: 5px; }
  .archive-tools { padding: 12px; gap: 12px; }
  .search-field { min-height: 48px; }
  .search-field input { min-width: 0; font-size: 16px; }
  .search-field kbd { display: none; }
  .post-grid { grid-template-columns: 1fr; }
  .card-image { height: 235px; }
  .about-band-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-band-grid > div { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 45px 30px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .article-shell, .page-shell { width: min(100% - 30px, 850px); padding-block: 60px 80px; }
  .article-header { margin-bottom: 42px; }
  .back-link { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: 28px; }
  .article-header h1, .page-header h1 { overflow-wrap: anywhere; font-size: clamp(34px, 10vw, 42px); line-height: 1.05; }
  .article-meta { gap: 10px 18px; font-size: 12px; line-height: 1.35; }
  .article-content { font-size: 15px; line-height: 1.78; }
  .article-content { overflow-wrap: break-word; }
  .article-content iframe { width: 100% !important; }
  .article-content h1 { font-size: 34px; }
  .article-content h2 { font-size: 29px; }
  .article-content pre { padding: 16px; font-size: 12px; }
  .article-related { margin-top: 58px; padding-top: 38px; }
  .related-pills { display: grid; grid-template-columns: 1fr; }
  .related-pill { width: 100%; min-height: 48px; justify-content: space-between; border-radius: 14px; padding: 12px 14px; }
}

/* Subtle math-notebook accents */
:root { --hand: "Patrick Hand", "Comic Sans MS", cursive; }

body {
  --margin-rule: max(42px, calc((100vw - 1180px) / 2 + 15px));
  background-image:
    linear-gradient(90deg, transparent calc(var(--margin-rule) - .5px), rgba(205,89,82,.14) var(--margin-rule), transparent calc(var(--margin-rule) + .5px)),
    linear-gradient(rgba(64,113,170,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64,113,170,.055) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
}

.notebook-kicker { box-shadow: 2px 3px 0 rgba(102,79,29,.1); font-family: var(--hand) !important; font-size: 13.8px !important; font-weight: 400 !important; letter-spacing: .01em; }
.section-heading h2:after { content: ""; display: block; width: 68px; height: 2px; margin-top: 10px; background: rgba(49,95,186,.45); transform: rotate(-1deg); }
.archive-tools { border-style: dashed; box-shadow: 2px 3px 0 rgba(54,74,104,.045); }
.card-link { border-top-style: dashed; }
.post-card:before { top: -8px; left: 50%; width: 62px; height: 17px; transform: translateX(-50%) rotate(-1.5deg); background: rgba(82,132,190,.4) !important; }
.post-card:nth-child(3n+2):before { transform: translateX(-50%) rotate(1.5deg); background: rgba(220,175,68,.43) !important; }
.post-card:nth-child(3n):before { transform: translateX(-50%) rotate(-.5deg); background: rgba(207,101,83,.36) !important; }
.about-band-grid .margin-equation { font-family: var(--hand); font-size: 20px; font-weight: 400; }
.article-content blockquote { background: rgba(247,219,117,.12); }
.archive { position: relative; }
.graph-canvas { position: absolute; z-index: 2; top: 0; left: calc((100vw - 100%) / -2); pointer-events: none; }
.site-header, .site-footer, .topic-strip, .section-heading, .archive-tools, .post-card, .about-band, .article-shell { position: relative; z-index: 3; }

@media (max-width: 700px) {
  body { background-image: linear-gradient(rgba(64,113,170,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(64,113,170,.045) 1px, transparent 1px); background-size: 22px 22px; }
  .notebook-kicker { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .graph-canvas { display: none; }
}

/* Self-derivative analysis */
.self-derivative-hero { margin: 0 0 44px; }
.self-derivative-hero img { display: block; width: 100%; border: 1px solid var(--line); }
.derivative-lab { display: grid; grid-template-columns: minmax(230px,.78fr) minmax(0,1.22fr); gap: 26px; margin: 48px 0 54px; padding: 28px; border: 1px solid var(--line); background: rgba(255,253,248,.88); box-shadow: 5px 6px 0 rgba(49,70,100,.06); }
.derivative-lab-copy { align-self: center; }
.derivative-lab .lab-kicker { margin: 0 0 10px; color: var(--blue); font: 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.derivative-lab h3 { margin: 0 0 12px; font: 500 34px/1.05 var(--serif); }
.derivative-lab-copy > p:not(.lab-kicker) { color: var(--muted); font-size: 12px; line-height: 1.65; }
.derivative-lab label { display: flex; justify-content: space-between; margin-top: 24px; color: var(--ink); font: 10px/1 var(--mono); text-transform: uppercase; }
.derivative-lab input { width: 100%; margin: 14px 0 10px; accent-color: var(--blue); }
.derivative-lab output { display: block; min-height: 32px; color: var(--coral); font: 10px/1.5 var(--mono); }
.derivative-chart-wrap { min-width: 0; border-left: 1px dashed var(--line); }
#derivative-chart { display: block; }
.math-notebook-table { margin: 38px 0 48px; border: 1px solid var(--line); background: rgba(255,253,248,.78); font-size: 12px; }
.math-notebook-table > div { display: grid; grid-template-columns: .7fr 1.35fr 1fr; gap: 18px; padding: 13px 16px; border-top: 1px dashed var(--line); }
.math-notebook-table > div:first-child { border-top: 0; background: rgba(49,95,186,.055); color: var(--blue); font: 9px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.units-note { margin: 42px 0; padding: 24px 26px; border-left: 4px solid var(--gold); background: rgba(247,219,117,.12); }
.units-note > strong { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.units-note p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

@media (max-width: 700px) {
  .self-derivative-hero { margin-bottom: 32px; }
  .derivative-lab { grid-template-columns: 1fr; margin-inline: -8px; padding: 20px; }
  .derivative-chart-wrap { border-top: 1px dashed var(--line); border-left: 0; }
  .math-notebook-table { overflow-x: auto; }
  .math-notebook-table > div { min-width: 570px; }
}

/* Experiments */
.experiment-archive { min-height: 72vh; padding-block: 95px 125px; }
.experiment-archive-header { max-width: 720px; margin-bottom: 52px; }
.experiment-archive-header h1 { margin: 0; font: 500 clamp(52px, 6vw, 72px)/1 var(--serif); letter-spacing: -.035em; }
.experiment-archive-header > p:last-child { max-width: 610px; margin: 18px 0 0; color: var(--muted); font-size: 15px; }
.experiment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.experiment-card-visual { position: relative; height: 230px; overflow: hidden; padding: 24px; background-color: #e9eef2; background-image: linear-gradient(rgba(49,95,186,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(49,95,186,.1) 1px, transparent 1px); background-size: 22px 22px; }
.comparison-sketch { position: absolute; inset: 25px 18px; width: calc(100% - 36px); height: calc(100% - 50px); overflow: visible; }
.comparison-baseline { stroke: rgba(39,47,59,.25); stroke-width: 1; stroke-dasharray: 4 5; }
.comparison-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.comparison-line-adaptive { stroke: var(--ink); stroke-width: 3.5px; }
.comparison-line-google { stroke: var(--blue); }
.comparison-line-jpm { stroke: var(--coral); }
.comparison-line-xom { stroke: #3f8b68; }
.comparison-dot { stroke: #e9eef2; stroke-width: 2; }
.comparison-dot-start { fill: var(--ink); }
.comparison-dot-adaptive { fill: var(--ink); }
.comparison-dot-google { fill: var(--blue); }
.comparison-dot-jpm { fill: var(--coral); }
.comparison-dot-xom { fill: #3f8b68; }
.experiment-card .card-body h2 { margin: 17px 0 10px; font: 500 27px/1.1 var(--serif); letter-spacing: -.015em; }
.experiment-card .card-body h2 a:hover { color: var(--blue); }
.prediction-card-visual { background-color: #edf0e8; background-image: linear-gradient(rgba(63,139,104,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(63,139,104,.09) 1px, transparent 1px); }
.tree-sketch { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
.tree-sketch > path:first-child { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: .72; }
.tree-sketch circle { fill: #fffdf8; stroke: var(--ink); stroke-width: 2; }
.tree-sketch .leaf-one { fill: #d68980; stroke: #b95b52; }
.tree-sketch .leaf-two { fill: #ecc09d; stroke: #d69a69; }
.tree-sketch .leaf-three { fill: #a9d2c2; stroke: #62a58b; }
.tree-sketch .leaf-four { fill: #69a98e; stroke: #2e7c61; }
.tree-sketch .probability-strokes { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; opacity: .6; }

/* Prediction experiment */
.prediction-scorecard { padding: 34px 36px 27px; border: 1px solid #cfc8ba; background: rgba(255,253,248,.9); box-shadow: 5px 7px 0 rgba(49,70,100,.07); }
.prediction-scorecard > header, .section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 36px; }
.prediction-scorecard > header > div, .section-heading-row > div { max-width: 650px; }
.prediction-scorecard h2, .current-forecast h2, .prediction-diagnostics h2, .feature-section h2, .xgb-nutshell h2, .experiment-sources h2 { margin: 0; font: 500 clamp(34px, 5vw, 48px)/1.04 var(--serif); letter-spacing: -.03em; }
.prediction-scorecard > header > p, .section-heading-row > p { max-width: 310px; margin: 0 0 3px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.prediction-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 28px; padding: 1px; background: var(--line); }
.prediction-metric { position: relative; display: grid; min-width: 0; padding: 19px 17px; background: rgba(255,253,248,.96); }
.prediction-metric > span { color: var(--muted); font: 8px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.prediction-metric > strong { margin-top: 10px; font: 500 32px/1 var(--serif); }
.prediction-metric > small { margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.prediction-metric-featured:before { content: ""; position: absolute; inset: 10px auto 10px 7px; width: 3px; border-radius: 3px; background: var(--blue); }
.prediction-verdict { margin: 17px 0 0; padding: 14px 16px; border-left: 3px solid var(--coral); background: rgba(217,108,84,.045); color: var(--muted); font-size: 11px; line-height: 1.65; }
.prediction-verdict strong { color: var(--ink); font-weight: 600; }
.prediction-chart-wrap { position: relative; min-height: 330px; margin-top: 19px; touch-action: pan-y; }
#prediction-accuracy-chart { display: block; cursor: crosshair; }
.prediction-tooltip { position: absolute; z-index: 3; width: 180px; padding: 11px 12px; border: 1px solid #c8cdd2; background: rgba(255,253,248,.97); box-shadow: 0 8px 22px rgba(20,35,58,.1); pointer-events: none; }
.prediction-tooltip time { display: block; margin-bottom: 9px; color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; }
.prediction-tooltip span { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--muted); font: 8px/1 var(--mono); }
.prediction-tooltip strong { color: var(--ink); }
.prediction-chart-key { display: flex; flex-wrap: wrap; gap: 9px 22px; padding: 14px 17px 0; border-top: 1px dashed var(--line); color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; }
.prediction-chart-key span:before { content: ""; display: inline-block; width: 19px; height: 3px; margin-right: 7px; vertical-align: middle; background: var(--blue); }
.prediction-chart-key .key-direction:before { background: #3f8b68; }
.prediction-chart-key .key-chance:before { height: 1px; background: var(--coral); }
.current-forecast, .prediction-explainer, .prediction-diagnostics, .feature-section, .xgb-nutshell, .experiment-sources { max-width: 940px; margin: 0 auto; padding-top: 88px; }
.forecast-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 31px; padding: 1px; background: var(--line); }
.forecast-card { position: relative; min-width: 0; padding: 23px 22px 21px; background: rgba(255,253,248,.94); }
.forecast-card:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--class-color, var(--blue)); }
.forecast-class-0 { --class-color: #b95b52; }.forecast-class-1 { --class-color: #d69a69; }.forecast-class-2 { --class-color: #62a58b; }.forecast-class-3 { --class-color: #2e7c61; }
.forecast-card header { display: flex; align-items: baseline; gap: 10px; }
.forecast-card header > span { font: 600 12px/1 var(--mono); }.forecast-card header > small { color: var(--muted); font-size: 10px; }
.forecast-card > strong { display: block; margin-top: 17px; font: 500 27px/1 var(--serif); }.forecast-card > p { margin: 7px 0 16px; color: var(--muted); font-size: 10px; }
.forecast-probabilities { display: grid; gap: 7px; }.forecast-probabilities > span { display: grid; grid-template-columns: 1fr 64px 39px; align-items: center; gap: 8px; }
.forecast-probabilities i { display: block; width: var(--probability); max-width: 100%; height: 5px; border-radius: 5px; background: var(--class-color); }
.forecast-probabilities b, .forecast-probabilities em { color: var(--muted); font: 7px/1 var(--mono); font-style: normal; }.forecast-probabilities em { text-align: right; }
.prediction-explainer { display: grid; grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); gap: 56px; align-items: center; }
.explainer-copy h2 { margin: 0; font: 500 clamp(38px, 5vw, 51px)/1.02 var(--serif); letter-spacing: -.035em; }.explainer-copy > p:last-child { color: var(--muted); font-size: 13px; line-height: 1.8; }
.return-class-scale { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 205px; align-items: end; border-bottom: 1px solid var(--ink); }
.return-class-scale div { display: flex; flex-direction: column; justify-content: end; min-width: 0; padding: 14px 9px; border-right: 1px solid rgba(255,253,248,.6); color: #fff; }
.return-class-scale div:nth-child(1) { height: 95%; background: #b95b52; }.return-class-scale div:nth-child(2) { height: 61%; background: #d69a69; }.return-class-scale div:nth-child(3) { height: 61%; background: #62a58b; }.return-class-scale div:nth-child(4) { height: 95%; background: #2e7c61; }
.return-class-scale strong { font: 500 15px/1.05 var(--serif); }.return-class-scale span { margin-top: 7px; font: 7px/1.2 var(--mono); }
.diagnostic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 31px; }
.confusion-panel, .stock-accuracy-panel { min-width: 0; padding: 24px; border: 1px solid var(--line); background: rgba(255,253,248,.9); }
.diagnostic-grid h3, .feature-importance h3 { margin: 0; font: 500 26px/1.05 var(--serif); }.diagnostic-grid h3 + p, .feature-importance h3 + p { margin: 9px 0 20px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.confusion-matrix { display: grid; grid-template-columns: 68px repeat(4, 1fr); gap: 3px; align-items: stretch; }
.confusion-matrix > b { display: grid; place-items: center; min-width: 0; color: var(--muted); font: 6px/1.15 var(--mono); text-align: center; text-transform: uppercase; }
.matrix-cell { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; background: rgba(217,108,84,calc(.05 + var(--strength) * .22)); }.matrix-cell.matrix-correct { background: rgba(49,95,186,calc(.08 + var(--strength) * .42)); }
.matrix-cell strong { font: 500 11px/1 var(--serif); }.matrix-cell small { color: var(--muted); font: 6px/1 var(--mono); }
.stock-accuracy-bars { display: grid; gap: 12px; }.stock-accuracy-row { display: grid; grid-template-columns: 40px 1fr 72px; gap: 9px; align-items: center; }
.stock-accuracy-row > strong, .stock-accuracy-row > small { font: 8px/1 var(--mono); }.stock-accuracy-row > small { color: var(--muted); text-align: right; }
.stock-accuracy-row > div { position: relative; height: 8px; border-radius: 7px; background: rgba(49,95,186,.08); }.stock-accuracy-row span, .stock-accuracy-row i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: inherit; }
.stock-accuracy-row span { height: 3px; top: 5px; background: var(--blue); }.stock-accuracy-row i { height: 3px; background: #3f8b68; }
.feature-layout { display: grid; grid-template-columns: minmax(430px, 1.1fr) minmax(0, .9fr); gap: 25px; margin-top: 31px; }
.feature-importance { padding: 25px; border: 1px solid var(--line); background: rgba(255,253,248,.9); }.importance-row { display: grid; grid-template-columns: 22px 150px 1fr 48px; gap: 9px; align-items: center; margin-top: 12px; }
.importance-row > span, .importance-row > small { color: var(--muted); font: 7px/1 var(--mono); }.importance-row > strong { font-size: 9px; font-weight: 500; }.importance-row > small { text-align: right; }
.importance-row > div { height: 6px; border-radius: 6px; background: rgba(49,95,186,.08); }.importance-row i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.feature-families { display: grid; gap: 1px; padding: 1px; background: var(--line); }.feature-families article { display: grid; grid-template-columns: 25px 1fr; padding: 20px; background: rgba(255,253,248,.94); }.feature-families article > span { grid-row: 1 / 3; color: var(--blue); font: 8px/1 var(--mono); }
.feature-families h3 { margin: 0; font: 500 20px/1 var(--serif); }.feature-families p { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.xgb-nutshell { padding-bottom: 4px; }.xgb-nutshell > p:not(.notebook-kicker) { max-width: 760px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.boosting-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 28px 0 22px; }.boosting-strip span, .boosting-strip strong { padding: 11px 13px; border: 1px solid var(--line); background: rgba(255,253,248,.9); font: 9px/1 var(--mono); text-transform: uppercase; }.boosting-strip b { color: var(--blue); font: 500 18px/1 var(--serif); }
.xgb-math { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px 22px; align-items: start; margin-top: 27px; padding: 22px; border-left: 3px solid var(--blue); background: rgba(49,95,186,.05); }.xgb-math > span { padding-top: 9px; color: var(--blue); font: 8px/1 var(--mono); text-transform: uppercase; }.xgb-equations { display: grid; gap: 18px; min-width: 0; }.xgb-equations math { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 9px 0; color: var(--ink); font-size: 24px; white-space: nowrap; }.xgb-math > p { grid-column: 2; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.prediction-caveat { display: grid; grid-template-columns: 220px 1fr; gap: 28px; margin-top: 22px; padding: 22px 24px; border: 1px solid rgba(217,108,84,.2); border-left: 3px solid var(--coral); background: rgba(217,108,84,.045); }.prediction-caveat strong { font: 500 20px/1.1 var(--serif); }.prediction-caveat p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.leakage-check { margin-top: 24px; padding: 25px 26px; border: 1px solid rgba(49,95,186,.2); background: rgba(49,95,186,.045); }
.leakage-check h3 { margin: 0; font: 500 28px/1.05 var(--serif); }
.leakage-check ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 22px 0 0; padding: 1px; background: rgba(49,95,186,.16); list-style: none; }
.leakage-check li { padding: 18px; background: rgba(255,253,248,.9); color: var(--muted); font-size: 10px; line-height: 1.7; }
.leakage-check li strong { color: var(--ink); }
.leakage-check > p { margin: 17px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.leakage-check > p strong { color: var(--coral); }
.experiment-sources { padding-bottom: 10px; }.experiment-sources h2 { font-size: 34px; }.experiment-sources p { max-width: 800px; color: var(--muted); font-size: 11px; line-height: 1.8; }.experiment-sources a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.experiment-shell { width: min(1060px, calc(100% - 48px)); margin: 0 auto; padding: 82px 0 120px; }
.experiment-header { max-width: 820px; margin: 0 auto 58px; text-align: center; }
.experiment-header .eyebrow { justify-content: center; }
.experiment-header h1 { margin: 0; font: 500 clamp(50px, 7vw, 76px)/1 var(--serif); letter-spacing: -.04em; }
.experiment-header > p:not(.eyebrow) { max-width: 680px; margin: 23px auto 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.experiment-status { width: fit-content; max-width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 25px auto 0; padding: 8px 11px; border: 1px solid var(--line); background: rgba(255,253,248,.72); color: var(--muted); font: 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.experiment-status > span { width: 7px; height: 7px; border-radius: 50%; background: #49a77e; box-shadow: 0 0 0 3px rgba(73,167,126,.12); }
.experiment-status strong { color: var(--ink); font-weight: 500; }
.experiment-status time { color: var(--ink); font-weight: 500; }
.market-panel { position: relative; padding: 34px 36px 27px; border: 1px solid #cfc8ba; background: rgba(255,253,248,.9); box-shadow: 5px 7px 0 rgba(49,70,100,.07); }
.market-panel:before { content: ""; position: absolute; top: -8px; left: 50%; width: 72px; height: 17px; transform: translateX(-50%) rotate(-1deg); background: rgba(220,175,68,.42); }
.market-panel-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 25px; border-bottom: 1px dashed var(--line); }
.market-panel-header .eyebrow { margin-bottom: 13px; }
.market-panel-header h2 { margin: 0; font: 500 clamp(28px, 4vw, 39px)/1.05 var(--serif); letter-spacing: -.025em; }
.market-panel-header-stacked { display: block; }
.market-panel-header-stacked > div { max-width: 740px; }
.market-panel-header-stacked > div > p:last-child { max-width: 680px; margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.portfolio-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 25px 0 4px; border: 1px solid var(--line); background: var(--line); }
.portfolio-result { position: relative; display: grid; padding: 17px 16px 15px 20px; background: rgba(255,253,248,.96); }
.portfolio-result:before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 9px; width: 3px; border-radius: 3px; background: var(--series-color); }
.portfolio-result > span, .market-range span { color: var(--muted); font: 8px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.portfolio-result > strong { margin-top: 8px; font: 500 24px/1 var(--serif); }
.portfolio-result > small { margin-top: 7px; color: #31805f; font: 9px/1 var(--mono); }
.portfolio-result > small.negative { color: var(--coral); }
.portfolio-result-featured { background: rgba(255,253,248,1); }
.market-comparison-note { margin: 18px 0 0; padding: 14px 17px; border-left: 3px solid var(--coral); background: rgba(217,108,84,.055); color: var(--muted); font-size: 11px; line-height: 1.65; }
.market-comparison-note strong { color: var(--ink); }
.market-chart-wrap { position: relative; min-height: 300px; margin-top: 22px; touch-action: pan-y; }
#market-chart { display: block; cursor: crosshair; }
.market-tooltip, .allocation-tooltip { position: absolute; z-index: 3; min-width: 250px; padding: 10px 12px; border: 1px solid #c8cdd2; background: rgba(255,253,248,.97); box-shadow: 0 8px 22px rgba(20,35,58,.1); pointer-events: none; text-align: left; }
.market-tooltip time, .allocation-tooltip time { display: block; color: var(--muted); font: 9px/1 var(--mono); text-transform: uppercase; }
.tooltip-series, #allocation-tooltip-series { display: grid; grid-template-columns: repeat(2, minmax(95px, 1fr)); gap: 7px 14px; margin-top: 9px; }
.tooltip-row, #allocation-tooltip-series > span { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; }
.tooltip-row:before, #allocation-tooltip-series > span:before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--series-color); }
.tooltip-row b, #allocation-tooltip-series b { font-weight: 400; }
.market-tooltip strong, .allocation-tooltip strong { margin-left: auto; color: var(--ink); font: 500 11px/1 var(--serif); }
.market-chart-error:after { content: attr(data-error); position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.market-range { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 5px; border: 1px solid var(--line); background: var(--line); }
.market-range > div { padding: 17px 19px; background: rgba(255,253,248,.95); }
.market-range strong { display: block; margin-top: 7px; font: 500 21px/1 var(--serif); }
.allocation-history-panel { margin-top: 30px; padding: 25px 25px 19px; border: 1px solid var(--line); background: rgba(255,253,248,.72); }
.allocation-history-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.allocation-history-panel h3 { margin: 0; font: 500 29px/1.06 var(--serif); }
.allocation-history-panel > header > p { max-width: 280px; margin: 0 0 3px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.allocation-legend { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 19px; padding-top: 16px; border-top: 1px dashed var(--line); }
.allocation-legend span { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 8px/1 var(--mono); }
.allocation-legend span:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--series-color); }
.allocation-chart-wrap { position: relative; min-height: 320px; margin-top: 10px; touch-action: pan-y; }
#allocation-chart { display: block; cursor: crosshair; }
.allocation-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(330px, 1.1fr); gap: 45px; align-items: center; margin-top: 28px; padding: 24px 25px; border: 1px dashed #c9c2b6; background: rgba(233,238,242,.45); }
.allocation-copy .eyebrow { margin-bottom: 10px; }
.allocation-copy h3 { margin: 0; font: 500 27px/1.08 var(--serif); }
.allocation-copy > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.allocation-bars { display: grid; gap: 12px; }
.allocation-row { display: grid; grid-template-columns: 48px 1fr 48px; gap: 11px; align-items: center; }
.allocation-row > span, .allocation-row > strong { font: 9px/1 var(--mono); letter-spacing: .05em; }
.allocation-row > strong { text-align: right; font-weight: 500; }
.allocation-row > div { height: 7px; overflow: hidden; border-radius: 8px; background: rgba(49,95,186,.09); }
.allocation-row i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--series-color); transition: width .65s cubic-bezier(.2,.75,.2,1); }
.market-source { margin: 17px 0 0; color: #8a8c8d; font-size: 10px; line-height: 1.6; }
.experiment-method { max-width: 940px; padding-top: 82px; margin: 0 auto; }
.experiment-findings { max-width: 940px; margin: 88px auto 0; padding: 34px; border: 1px solid rgba(25, 39, 64, .18); background: rgba(255, 253, 247, .92); box-shadow: 9px 10px 0 rgba(31, 50, 76, .055); }
.experiment-findings > h2 { margin: 0; font: 500 clamp(36px, 5vw, 50px)/1.04 var(--serif); letter-spacing: -.035em; }
.findings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; border: 1px solid rgba(25, 39, 64, .13); }
.findings-grid article { padding: 24px; }
.findings-grid article + article { border-left: 1px solid rgba(25, 39, 64, .13); }
.findings-grid span { color: var(--blue); font: 600 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.findings-grid h3 { margin: 12px 0 10px; font: 500 25px/1.08 var(--serif); letter-spacing: -.02em; }
.findings-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.findings-next { margin-top: 20px; padding: 22px 24px; background: rgba(48, 101, 190, .065); border-left: 3px solid var(--blue); }
.findings-next h3 { margin: 0 0 12px; font: 600 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.findings-next ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 30px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.experiment-method > h2, .rebalance-history h2 { margin: 0; font: 500 clamp(36px, 5vw, 47px)/1.04 var(--serif); letter-spacing: -.03em; }
.method-intro { max-width: 720px; margin: 19px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.method-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 1px; margin: 35px 0 0; background: var(--line); list-style: none; }
.method-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; min-height: 175px; padding: 26px 24px; background: rgba(255,253,248,.94); }
.method-steps li > span { color: var(--blue); font: 10px/1 var(--mono); }
.method-steps h3 { margin: 0; font: 500 24px/1.05 var(--serif); }
.method-steps p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.method-note { display: grid; grid-template-columns: 150px 1fr; gap: 28px; margin-top: 22px; padding: 22px 24px; border-left: 3px solid var(--blue); background: rgba(49,95,186,.055); }
.method-note strong { font: 500 20px/1.1 var(--serif); }
.method-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.rebalance-history { max-width: 940px; padding-top: 85px; margin: 0 auto; }
.history-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.history-heading-row > p { max-width: 290px; margin: 0 0 4px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.history-table-wrap { margin-top: 28px; overflow-x: auto; border: 1px solid var(--line); background: rgba(255,253,248,.92); }
.history-table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; }
.history-table-wrap th { padding: 13px 15px; border-bottom: 1px solid var(--line); color: var(--muted); font: 8px/1 var(--mono); text-align: right; text-transform: uppercase; letter-spacing: .07em; }
.history-table-wrap th:first-child, .history-table-wrap td:first-child { text-align: left; }
.history-table-wrap td { padding: 14px 15px; border-bottom: 1px dashed rgba(207,200,186,.8); font: 10px/1 var(--mono); text-align: right; }
.history-table-wrap tr:last-child td { border-bottom: 0; }
.math-zone { max-width: 940px; padding-top: 90px; margin: 0 auto; }
.math-zone-header { max-width: 760px; }
.math-zone-header h2 { margin: 0; font: 500 clamp(42px, 6vw, 58px)/1 var(--serif); letter-spacing: -.035em; }
.math-zone-header > p:last-child { margin: 19px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.math-zone-header > p:last-child em { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.08em; font-style: italic; }
.equation-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 1px; margin-top: 34px; background: var(--line); }
.equation-list article { min-width: 0; padding: 27px 25px 25px; background-color: rgba(255,253,248,.95); background-image: linear-gradient(rgba(64,113,170,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(64,113,170,.045) 1px, transparent 1px); background-size: 20px 20px; }
.equation-list article > span { color: var(--blue); font: 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.equation-list h3 { margin: 12px 0 0; font: 500 25px/1.05 var(--serif); }
.equation { display: flex; align-items: center; min-height: 74px; overflow-x: auto; margin-top: 20px; padding: 13px 18px; border: 1px dashed rgba(49,95,186,.24); background: rgba(255,253,248,.86); color: var(--ink); font: 21px/1.25 Georgia, "Times New Roman", serif; letter-spacing: .01em; white-space: nowrap; }
.equation i { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.equation sub, .equation sup { position: relative; font-size: .58em; line-height: 0; }
.equation sub { bottom: -.28em; margin-left: .04em; }
.equation sup { top: -.52em; }
.fraction { display: inline-grid; grid-template-rows: auto auto; align-items: center; margin-inline: .22em; text-align: center; vertical-align: middle; }
.fraction > span { display: block; padding: .03em .28em; }
.fraction > span:first-child { border-bottom: 1.25px solid currentColor; }
.fraction-wide { font-size: .88em; }
.fraction-compact { font-size: .9em; }
.sigma { position: relative; display: inline-block; margin: 0 .38em 0 .2em; font-size: 1.35em; line-height: 1; vertical-align: middle; }
.sigma sup, .sigma sub { position: absolute; left: 50%; margin: 0; transform: translateX(-50%); font-size: .38em; }
.sigma sup { top: -.78em; }
.sigma sub { bottom: -.84em; }
.sup-fraction { font-size: .92em; }
.math-function { font-size: .82em; font-style: normal; letter-spacing: 0; }
.equation-secondary { margin-top: 8px; }
.equation-list article > p { margin: 17px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.math-caveat { display: grid; grid-template-columns: 190px 1fr; gap: 28px; margin-top: 22px; padding: 22px 24px; border: 1px solid rgba(217,108,84,.2); border-left: 3px solid var(--coral); background: rgba(217,108,84,.045); }
.math-caveat strong { font: 500 20px/1.1 var(--serif); }
.math-caveat p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }

/* Stock + bond contextual bandit */
.stock-bond-card-visual { background-color: #f1eee5; background-image: linear-gradient(rgba(177,137,45,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(49,95,186,.08) 1px, transparent 1px); }
.stock-bond-sketch { width: min(90%, 390px); overflow: visible; }
.stock-bond-sketch path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stock-bond-sketch .sb-card-axis { stroke: rgba(25,37,59,.23); stroke-width: 1; }
.stock-bond-sketch .sb-card-stock { stroke: #315fba; stroke-width: 4; }
.stock-bond-sketch .sb-card-bond { stroke: #b1892d; stroke-width: 4; }
.stock-bond-sketch .sb-card-choice { fill: #fffdf8; stroke-width: 3; }.sb-card-choice-one, .sb-card-choice-three { stroke: #315fba; }.sb-card-choice-two { stroke: #b1892d; }
.stock-bond-sketch text { fill: #5d6470; font: 9px var(--mono); letter-spacing: .08em; }
.sb-intuition { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: center; padding: 34px 36px; border: 1px solid #cfc8ba; background: rgba(255,253,248,.9); box-shadow: 5px 7px 0 rgba(49,70,100,.07); }
.sb-intuition h2, .sb-choice-section h2, .sb-method h2, .sb-features h2, .sb-sources h2 { margin: 0; font: 500 clamp(34px, 5vw, 48px)/1.04 var(--serif); letter-spacing: -.03em; }
.sb-intuition > div:first-child > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.sb-asset-pair { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 10px; align-items: stretch; }
.sb-asset-pair article { padding: 24px 20px; border: 1px solid var(--line); background: rgba(247,247,242,.86); }
.sb-asset-pair article:first-child { border-top: 4px solid #315fba; }.sb-asset-pair article:last-child { border-top: 4px solid #b1892d; }
.sb-asset-pair span:not(.sb-versus) { color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.sb-asset-pair strong { display: block; margin-top: 11px; font: 500 36px/1 var(--serif); }
.sb-asset-pair p { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.sb-versus { display: grid; place-items: center; color: var(--muted); font: italic 17px var(--serif); }
.sb-results { margin-top: 78px; }
.sb-life-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 24px 0 0; padding: 1px; background: var(--line); }
.sb-life-summary span { padding: 16px 17px; background: rgba(255,253,248,.9); color: var(--muted); font: 8px/1.4 var(--mono); text-transform: uppercase; }.sb-life-summary strong { display: block; margin-bottom: 7px; color: var(--ink); font: 500 20px/1 var(--serif); text-transform: none; }
.sb-scorecards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 28px; padding: 1px; background: var(--line); }
.sb-scorecards article { position: relative; min-width: 0; padding: 18px 15px 17px 20px; background: rgba(255,253,248,.96); }
.sb-scorecards article:before { content: ""; position: absolute; inset: 15px auto 15px 8px; width: 3px; border-radius: 3px; background: var(--strategy-color); }
.sb-scorecards span { color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.sb-scorecards strong { display: block; margin-top: 9px; font: 500 27px/1 var(--serif); }
.sb-scorecards small { display: block; margin-top: 8px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.sb-chart-key { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 21px; padding-top: 16px; border-top: 1px dashed var(--line); }
.sb-chart-key span { color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; }.sb-chart-key span:before { content: ""; display: inline-block; width: 19px; height: 3px; margin-right: 7px; vertical-align: middle; background: var(--strategy-color); }
.sb-chart-key .key-contributed:before { height: 1px; background: repeating-linear-gradient(90deg, var(--strategy-color) 0 4px, transparent 4px 7px); }
.sb-chart-wrap, .sb-regime-wrap { position: relative; touch-action: pan-y; }
.sb-chart-wrap { min-height: 350px; margin-top: 8px; }.sb-chart-wrap canvas, .sb-regime-wrap canvas { display: block; cursor: crosshair; }
.sb-tooltip { width: 205px; min-width: 0; }.sb-tooltip > div { display: grid; gap: 7px; margin-top: 9px; }.sb-tooltip > div > span { display: flex; gap: 12px; color: var(--muted); font: 8px/1.2 var(--mono); }.sb-tooltip > div > span:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--series-color); }.sb-tooltip b { font-weight: 400; }.sb-tooltip .sb-tooltip-choice { display: block; margin: 1px 0 4px; font: 500 18px/1 var(--serif); }
.sb-result-note { margin: 12px 0 0; padding: 15px 17px; border-left: 3px solid var(--blue); background: rgba(49,95,186,.045); color: var(--muted); font-size: 11px; line-height: 1.7; }.sb-result-note strong { color: var(--ink); }
.sb-choice-section, .sb-features, .sb-sources { max-width: 940px; margin: 0 auto; padding-top: 88px; }
.sb-choice-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 27px; padding: 1px; background: var(--line); }
.sb-choice-summary span { padding: 15px; background: rgba(255,253,248,.94); color: var(--muted); font: 8px/1.35 var(--mono); text-transform: uppercase; }.sb-choice-summary strong { display: block; margin-bottom: 7px; color: var(--ink); font: 500 22px/1 var(--serif); }
.sb-regime-wrap { min-height: 175px; margin-top: 17px; border: 1px solid var(--line); background: rgba(255,253,248,.72); }
.sb-regime-tooltip > div > span:before { display: none; }
.sb-method { padding-top: 88px; }.sb-method .leakage-check { margin-top: 23px; }
.sb-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 28px; padding: 1px; background: var(--line); }
.sb-feature-grid article { min-height: 180px; padding: 23px 21px; background: rgba(255,253,248,.94); }
.sb-feature-grid span { color: var(--blue); font: 9px/1 var(--mono); }.sb-feature-grid h3 { margin: 14px 0 0; font: 500 22px/1.08 var(--serif); }.sb-feature-grid p { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.sb-math .equation { justify-content: center; white-space: normal; }.sb-math math { flex: 0 0 auto; width: max-content; min-width: 0; font-size: 22px; }.sb-math .equation math + math { margin-top: 9px; }
.sb-sources { padding-bottom: 12px; }.sb-sources p { margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }.sb-sources a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Two-sector allocation bandit */
.two-stock-card-visual { background-color: #edf1f4; background-image: linear-gradient(rgba(49,95,186,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(217,108,84,.08) 1px, transparent 1px); }
.two-stock-card-sketch { width: min(88%, 390px); }.two-stock-card-sketch rect { fill: rgba(255,253,248,.72); stroke: rgba(25,37,59,.18); }.two-stock-card-sketch path { stroke: #19253b; stroke-width: 3; stroke-linecap: round; }.two-stock-card-sketch circle { fill: #fffdf8; stroke: #19253b; stroke-width: 3; }.two-stock-card-sketch .two-stock-slider { fill: #d96c54; stroke: #fffdf8; stroke-width: 4; }.two-stock-card-sketch text { fill: #59616d; font: 10px var(--mono); letter-spacing: .08em; }.two-stock-card-sketch .two-stock-percent { fill: #19253b; font-size: 13px; }
.two-stock-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 42px; align-items: center; padding: 34px 36px; border: 1px solid #cfc8ba; background: rgba(255,253,248,.9); box-shadow: 5px 7px 0 rgba(49,70,100,.07); }
.two-stock-intro h2, .two-stock-allocation h2 { margin: 0; font: 500 clamp(34px, 5vw, 48px)/1.04 var(--serif); letter-spacing: -.03em; }.two-stock-intro > div:first-child > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.two-stock-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }.two-stock-pair article { padding: 24px 15px; border: 1px solid var(--line); background: rgba(247,247,242,.9); text-align: center; }.two-stock-pair article:first-child { border-top: 4px solid #315fba; }.two-stock-pair article:last-child { border-top: 4px solid #d96c54; }.two-stock-pair span { color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; }.two-stock-pair strong { display: block; margin-top: 10px; font: 500 31px/1 var(--serif); }.two-stock-pair > div { color: var(--muted); font: 9px/1.3 var(--mono); text-align: center; }
.sector-roster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }.sector-roster article { grid-column: span 2; padding: 18px 8px; border: 1px solid var(--line); border-top: 4px solid var(--sector-color); background: rgba(247,247,242,.9); text-align: center; }.sector-roster article:nth-child(4) { grid-column: 2 / span 2; }.sector-roster span { color: var(--muted); font: 7px/1.2 var(--mono); text-transform: uppercase; }.sector-roster strong { display: block; margin-top: 9px; font: 500 25px/1 var(--serif); }
.two-stock-results { margin-top: 78px; }.two-stock-scorecards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 28px; padding: 1px; background: var(--line); }.two-stock-scorecards article { position: relative; padding: 18px 15px 17px 20px; background: rgba(255,253,248,.96); }.two-stock-scorecards article:before { content: ""; position: absolute; inset: 15px auto 15px 8px; width: 3px; background: var(--series-color); }.two-stock-scorecards span { color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; }.two-stock-scorecards strong { display: block; margin-top: 9px; font: 500 27px/1 var(--serif); }.two-stock-scorecards small { display: block; margin-top: 7px; color: var(--muted); font: 9px/1 var(--mono); }
.two-stock-key { display: flex; flex-wrap: wrap; gap: 10px 23px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }.two-stock-key span { color: var(--muted); font: 8px/1 var(--mono); text-transform: uppercase; }.two-stock-key span:before { content: ""; display: inline-block; width: 20px; height: 3px; margin-right: 7px; background: var(--series-color); vertical-align: middle; }.two-stock-chart-wrap { min-height: 340px; touch-action: pan-y; }.two-stock-chart-wrap canvas { display: block; cursor: crosshair; }.two-stock-chart-wrap .market-tooltip > div { display: grid; gap: 7px; margin-top: 9px; }.two-stock-chart-wrap .market-tooltip span { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 8px/1 var(--mono); }.two-stock-chart-wrap .market-tooltip i { width: 7px; height: 7px; border-radius: 50%; }
.two-stock-allocation { max-width: 940px; margin: 0 auto; padding-top: 88px; }.two-stock-allocation-wrap { position: relative; min-height: 220px; margin-top: 26px; border: 1px solid var(--line); background: rgba(255,253,248,.76); touch-action: pan-y; }.two-stock-allocation-wrap canvas { display: block; cursor: crosshair; }.two-stock-allocation-wrap .allocation-tooltip > div { display: grid; gap: 7px; margin-top: 9px; }.two-stock-allocation-wrap .allocation-tooltip span { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 8px/1 var(--mono); }.two-stock-allocation-wrap .allocation-tooltip i { width: 7px; height: 7px; border-radius: 50%; }.two-stock-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 1px; background: var(--line); }.two-stock-facts span { padding: 16px; background: rgba(255,253,248,.94); color: var(--muted); font: 8px/1.3 var(--mono); text-transform: uppercase; }.two-stock-facts strong { display: block; margin-bottom: 7px; color: var(--ink); font: 500 22px/1 var(--serif); text-transform: none; }.overline { text-decoration: overline; }.sqrt { margin-left: .15em; font-size: 1.2em; }
.allocation-key { margin-top: 14px; padding: 14px 2px 0; }.behavior-profiles { margin-top: 28px; }.behavior-profiles > h3 { margin: 0 0 16px; font: 500 27px/1.1 var(--serif); }.behavior-profiles > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 1px; background: var(--line); }.behavior-profiles article { min-height: 190px; padding: 22px 20px; background: rgba(255,253,248,.95); }.behavior-profiles article > span { color: var(--blue); font: 9px/1 var(--mono); }.behavior-profiles h4 { margin: 14px 0 0; font: 500 22px/1.08 var(--serif); }.behavior-profiles article p, .behavior-profiles > p { color: var(--muted); font-size: 11px; line-height: 1.7; }.behavior-profiles article p { margin: 12px 0 0; }.behavior-profiles > p { margin: 0; padding: 16px 18px; border-left: 3px solid var(--blue); background: rgba(49,95,186,.05); }

@media (max-width: 960px) {
  .experiment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .primary-nav { gap: 0; }
  .primary-nav a { padding-inline: 6px; font-size: 11px; }
  .experiment-archive { padding-block: 70px 85px; }
  .experiment-grid { grid-template-columns: 1fr; max-width: none; }
  .experiment-card-visual { height: 215px; }
  .experiment-shell { width: min(100% - 30px, 1060px); padding-block: 58px 85px; }
  .experiment-header { margin-bottom: 42px; }
  .experiment-header h1 { font-size: clamp(43px, 14vw, 58px); }
  .experiment-header > p:not(.eyebrow) { font-size: 14px; }
  .market-panel { padding: 25px 14px 18px; }
  .market-panel-header { align-items: start; flex-direction: column; gap: 21px; }
  .portfolio-results { grid-template-columns: repeat(2, 1fr); }
  .portfolio-result { padding: 15px 10px 14px 19px; }
  .portfolio-result > strong { font-size: 21px; }
  .market-chart-wrap { margin-top: 13px; }
  .market-range > div { padding: 14px 10px; }
  .market-range strong { font-size: 17px; }
  .allocation-panel { grid-template-columns: 1fr; gap: 24px; padding: 21px 16px; }
  .allocation-history-panel { padding: 21px 10px 14px; }
  .allocation-history-panel > header { display: block; padding-inline: 6px; }
  .allocation-history-panel > header > p { margin-top: 10px; }
  .allocation-legend { padding-inline: 6px; }
  .market-tooltip, .allocation-tooltip { min-width: 230px; }
  .experiment-method, .rebalance-history, .math-zone { padding-top: 62px; }
  .experiment-findings { margin-top: 62px; padding: 24px 18px; }
  .findings-grid, .findings-next ul { grid-template-columns: 1fr; }
  .findings-grid article + article { border-left: 0; border-top: 1px solid rgba(25, 39, 64, .13); }
  .method-steps { grid-template-columns: 1fr; }
  .method-steps li { min-height: 0; padding: 23px 18px; }
  .method-note { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
  .history-heading-row { display: block; }
  .history-heading-row > p { margin-top: 13px; }
  .equation-list { grid-template-columns: 1fr; }
  .equation-list article { padding: 23px 18px; }
  .equation { font-size: 14px; }
  .math-caveat { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
  .prediction-scorecard { padding: 25px 14px 18px; }
  .prediction-scorecard > header, .section-heading-row { display: block; }
  .prediction-scorecard > header > p, .section-heading-row > p { margin-top: 13px; }
  .prediction-metrics { grid-template-columns: repeat(2, 1fr); }
  .prediction-metric { padding: 16px 13px; }
  .prediction-metric > strong { font-size: 27px; }
  .forecast-grid { grid-template-columns: 1fr; }
  .current-forecast, .prediction-explainer, .prediction-diagnostics, .feature-section, .xgb-nutshell, .experiment-sources { padding-top: 62px; }
  .prediction-explainer { grid-template-columns: 1fr; gap: 27px; }
  .return-class-scale { min-height: 170px; }
  .return-class-scale div { padding: 11px 6px; }
  .return-class-scale strong { font-size: 12px; }
  .diagnostic-grid, .feature-layout { grid-template-columns: 1fr; }
  .confusion-panel, .stock-accuracy-panel, .feature-importance { padding: 19px 14px; }
  .confusion-matrix { grid-template-columns: 56px repeat(4, 1fr); }
  .matrix-cell strong { font-size: 9px; }
  .importance-row { grid-template-columns: 18px 118px 1fr 43px; }
  .xgb-math { grid-template-columns: 1fr; gap: 13px; padding: 19px 17px; }
  .xgb-math > p { grid-column: 1; }
  .prediction-caveat { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
  .leakage-check { padding: 20px 16px; }
  .leakage-check ul { grid-template-columns: 1fr; }
  .sb-intuition { grid-template-columns: 1fr; gap: 28px; padding: 25px 16px; }
  .sb-asset-pair { grid-template-columns: 1fr; }.sb-versus { min-height: 20px; }
  .sb-results { margin-top: 57px; }
  .sb-life-summary { grid-template-columns: repeat(2, 1fr); }.sb-life-summary span { padding: 14px 12px; }
  .sb-scorecards { grid-template-columns: repeat(2, 1fr); }.sb-scorecards article { padding: 16px 10px 15px 18px; }.sb-scorecards article:last-child { grid-column: 1 / -1; }.sb-scorecards strong { font-size: 23px; }
  .sb-choice-section, .sb-features, .sb-sources, .sb-method { padding-top: 62px; }
  .sb-choice-summary { grid-template-columns: repeat(2, 1fr); }
  .sb-feature-grid { grid-template-columns: 1fr; }.sb-feature-grid article { min-height: 0; padding: 21px 18px; }
  .sb-math .equation { justify-content: flex-start; overflow-x: auto; padding-inline: 11px; -webkit-overflow-scrolling: touch; }
  .sb-math math { font-size: 13px; }
  .sb-math .equation-wide math { font-size: 12px; }
  .two-stock-intro { grid-template-columns: 1fr; gap: 28px; padding: 25px 16px; }
  .sector-roster { grid-template-columns: repeat(2, 1fr); }.sector-roster article, .sector-roster article:nth-child(4) { grid-column: auto; }.sector-roster article:last-child { grid-column: 1 / -1; }
  .two-stock-pair { grid-template-columns: 1fr; }.two-stock-pair > div { padding: 3px; }
  .two-stock-results { margin-top: 57px; }
  .two-stock-scorecards { grid-template-columns: repeat(2, 1fr); }.two-stock-scorecards article { padding: 16px 10px 15px 18px; }.two-stock-scorecards strong { font-size: 23px; }
  .behavior-profiles > div { grid-template-columns: 1fr; }.behavior-profiles article { min-height: 0; }
  .two-stock-allocation { padding-top: 62px; }.two-stock-facts { grid-template-columns: 1fr; }
  .attribution-question { grid-template-columns: 1fr; gap: 28px; padding: 25px 16px; }.attribution-two-whys { grid-template-columns: 1fr; }.attribution-two-whys article { min-height: 0; }
  .attribution-results { margin-top: 57px; }.attribution-summary { grid-template-columns: repeat(2,1fr); }.attribution-summary article { padding: 16px 11px; }.attribution-summary strong { font-size: 22px; }
  .attribution-chart-wrap { min-height: 540px; }.attribution-ledger { padding-top: 62px; }.attribution-tables { grid-template-columns: 1fr; }.attribution-tables article { grid-template-columns: 1.25fr .75fr .45fr; padding-inline: 12px; }
  .attribution-math .equation { justify-content: flex-start; overflow-x: auto; padding-inline: 11px; -webkit-overflow-scrolling: touch; }.attribution-math math { font-size: 13px; }
}