@import url("./tokens.css");
@import url("./base.css");


:root {
  --color-paper: oklch(84% 0.035 150); --color-paper-2: oklch(77% 0.042 150);
  --color-ink: oklch(22% 0.02 160); --color-ink-2: oklch(28% 0.024 160); --color-muted: oklch(42% 0.03 160);
  --color-rule: oklch(56% 0.04 155); --color-focus: oklch(22% 0.02 160); --color-accent-ink: oklch(22% 0.02 160);
  --color-board-ink: oklch(94% 0.012 90); --color-bar: oklch(56% 0.03 160);
  --nav-h: 72px;
  --text-section-up: clamp(2.5rem, 3.2vw + 1rem, 4.25rem);
}


.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-ink); color: var(--color-board-ink); }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); color: inherit; text-decoration: none; font: 400 var(--text-2xl)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); white-space: nowrap; }
.wordmark img { width: 44px; height: 44px; background: var(--color-paper-3); border-radius: var(--radius-pill); }
.nav ul { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav a:not(.wordmark):not(.btn) { color: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav a:not(.wordmark):not(.btn):hover { text-decoration: underline; }
.nav .btn { min-height: 44px; }
.wordmark:focus-visible, .nav a:focus-visible { outline: 2px solid var(--color-board-ink); outline-offset: 4px; }
html { scroll-padding-top: calc(var(--nav-h) + var(--space-lg)); }


.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-card); font: 500 1rem/1.2 var(--font-body); color: var(--color-ink); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 4px 4px 0 var(--color-ink); transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.btn:hover { translate: 1px 1px; box-shadow: 3px 3px 0 var(--color-ink); }
.btn:active { translate: 4px 4px; box-shadow: 0 0 0 var(--color-ink); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; translate: 0 0; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--secondary { background: var(--color-paper-3); color: var(--color-ink); }
.nav .btn--secondary { box-shadow: 4px 4px 0 var(--color-paper-2); }
@media (prefers-reduced-motion: reduce) { .btn, .seg button { transition: none; } .btn:hover, .btn:active { translate: 0 0; } }


h1, h2 { text-transform: uppercase; line-height: 1; }
h2 { font-size: var(--text-section-up); }
h3 { font: 500 var(--text-title)/1.2 var(--font-body); letter-spacing: normal; }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head .lead { color: var(--color-ink-2); }


figure { margin: 0; }
.sheet { background: var(--color-paper-3); color: var(--color-ink); box-shadow: var(--shadow-sheet); rotate: var(--r, 0deg); }
.moe { mix-blend-mode: darken; }


.section { padding-block: var(--section-gap) 0; }
.section--l { padding-block: var(--section-gap-l) 0; }


.hero { min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; padding-block: var(--space-2xl); }
.counter { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 34rem); justify-content: center; gap: var(--space-3xl); align-items: center; }
.hero h1 { font-size: clamp(3.5rem, 6vw + 1rem, 8.5rem); max-width: none; }
.hero .lead { margin-top: var(--space-lg); max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.record { --r: -1deg; padding: var(--space-2xl) var(--space-xl); }
.record__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-ink); }
.record__head h2 { font-size: var(--text-section); }
.record__head img { width: 120px; height: 120px; flex-shrink: 0; }
.record table { width: 100%; border-collapse: collapse; margin-top: var(--space-xs); }
.record th, .record td { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); text-align: left; vertical-align: middle; }
.record th { font-weight: 500; }
.record td { text-align: right; font: 400 var(--text-display-s)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.record tr:last-child th, .record tr:last-child td { border-bottom: 0; }
.record__roi td { background: var(--color-accent); padding-inline: var(--space-sm); }
.record figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }


.log__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.log__top .head { margin-bottom: 0; }
.seg { display: inline-flex; gap: 0; border: var(--rule-hair) solid var(--color-ink); background: var(--color-paper-3); }
.seg button { min-height: 44px; padding: 0 var(--space-md); border: 0; background: transparent; color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.seg button + button { border-left: var(--rule-hair) solid var(--color-ink); }
.seg button:hover { background: var(--color-paper-2); }
.seg button[aria-pressed="true"] { background: var(--color-paper-2); color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg button:active { background: var(--color-paper-2); }
.seg button:disabled { opacity: 0.55; cursor: not-allowed; }
.log table { width: 100%; border-collapse: collapse; }
.log caption { caption-side: bottom; padding-top: var(--space-md); text-align: left; font-size: var(--text-sm); color: var(--color-ink-2); }
.log th, .log td { padding: var(--space-md) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.log th:first-child, .log td:first-child { padding-left: 0; }
.log th:last-child, .log td:last-child { padding-right: 0; text-align: right; }
.log thead th { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); white-space: nowrap; border-bottom: 2px solid var(--color-ink); }
.log tbody th { font-weight: 500; white-space: nowrap; }
.log .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.log .lead-row th, .log .lead-row td { padding-block: var(--space-lg); }
.result { display: inline-block; padding: var(--space-2xs) var(--space-xs); font-weight: 500; white-space: nowrap; }
.result--cash { background: var(--color-accent); color: var(--color-accent-ink); }
.result--miss { box-shadow: inset 0 0 0 1px var(--color-ink-2); }
.log__more { margin-top: var(--space-xl); }


.band { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-board-ink); }
.fibre { position: relative; isolation: isolate; }
.fibre::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; mix-blend-mode: screen; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.03' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.statement { font: 400 clamp(2.75rem, 5vw + 1rem, 6rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); max-width: 30ch; text-wrap: balance; }
.band p.note { margin-top: var(--space-lg); max-width: 52ch; font-size: var(--text-lead); }


.method { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.method__art { --r: -1.5deg; padding: var(--space-xl); }
.method__art img { width: 100%; }
.rules { margin: 0; padding: 0; list-style: none; counter-reset: rule; }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.rules li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rules li::before { content: counter(rule); font: 400 var(--text-3xl)/1 var(--font-display); }
.rules p { margin-top: var(--space-xs); }


.study { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.chart { --r: 1deg; padding: var(--space-xl); }
.chart ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-lg); }
.chart li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 4rem; gap: var(--space-md); align-items: center; }
.chart .bar { height: 24px; background: var(--color-bar); width: var(--w); border-radius: 0 2px 2px 0; }
.chart .bar--top { background: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-ink); }
.chart .val { font: 400 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.chart figcaption { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-ink-2); }


.faq-band { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: start; }
.faq dl { margin: 0; }
.faq dl > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.faq dl > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq dt { font: 500 var(--text-title)/1.2 var(--font-body); }
.faq dd { margin: 0; }


.footer { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-ink); color: var(--color-board-ink); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); }
.footer .wordmark { font-size: var(--text-3xl); }
.footer__grid > div > p { margin-top: var(--space-md); max-width: 45ch; }
.footer h2 { font: 500 var(--text-md)/1.3 var(--font-body); text-transform: none; letter-spacing: normal; }
.footer ul { margin: var(--space-sm) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.footer a:not(.wordmark) { color: inherit; }
.footer a:focus-visible { outline: 2px solid var(--color-board-ink); outline-offset: 4px; }
.footer__legal { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-muted); font-size: var(--text-sm); }


@media (max-width: 60rem) {
  .nav .links { display: none; }
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .counter, .method, .study, .faq { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .record, .method__art, .chart { padding: var(--space-lg); }
  .method__art { max-width: 28rem; }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .log thead { display: none; }
  .log caption { display: block; width: 100%; padding-top: var(--space-md); }
  .log table, .log tbody, .log tr, .log th, .log td { display: block; }
  .log tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .log th, .log td { padding: 0; border: 0; text-align: left; }
  .log .lead-row th, .log .lead-row td { padding-block: 0; }
  .log td[data-label]::before { content: attr(data-label) " "; color: var(--color-ink-2); font-size: var(--text-sm); }
  .log tbody th { grid-column: 1; }
  .log td.res { grid-column: 2; grid-row: 1; text-align: right; }
  .log td.res::before { content: none; }
  .log td:not(.res) { grid-column: 1 / -1; }
  .log td:last-child, .log th:last-child { text-align: left; }
  .log td.res { text-align: right; }
}
@media (max-width: 40rem) {
  .wordmark { font-size: var(--text-xl); }
  .wordmark img { width: 36px; height: 36px; }
  .nav .btn { padding: 0 var(--space-md); }
  .record__head img { width: 64px; height: 64px; }
  .record td { font-size: var(--text-2xl); }
  .chart li { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .chart li > span:first-child { grid-column: 1 / -1; }
  .faq dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .seg { width: 100%; }
  .seg button { flex: 1; }
}


.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.banner { padding-block: var(--space-3xl) var(--space-2xl); }
.banner h1 { font-size: clamp(3.25rem, 5vw + 1rem, 7rem); max-width: none; }
.banner .lead { margin-top: var(--space-md); }
.totals { --r: -0.5deg; margin-top: var(--space-2xl); padding: var(--space-xl); }
.totals dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.totals dl > div { padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule-2); }
.totals dl > div:first-child { padding-left: 0; border-left: 0; }
.totals dt { font-weight: 500; }
.totals dd { margin: var(--space-xs) 0 0; font: 400 var(--text-display-s)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.totals__roi dd { display: inline-block; padding: var(--space-sm) var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); }
.totals figcaption { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.log--full { padding-block: var(--space-2xl) var(--section-gap); }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md) var(--space-lg); margin-bottom: var(--space-xl); }
.pick { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; }
.pick select { min-height: 44px; padding: 0 var(--space-xl) 0 var(--space-sm); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-paper-3); color: var(--color-ink); font: 400 var(--text-md)/1 var(--font-body); cursor: pointer; }
.pick select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pick select:hover { background: var(--color-paper-2); }
.pick select:disabled { opacity: 0.55; cursor: not-allowed; }
.log--full td.note { min-width: 18rem; color: var(--color-ink-2); font-size: var(--text-sm); }
.log--full th:last-child, .log--full td:last-child { text-align: left; }
.log--full td.res { text-align: left; }
.result--void { box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-ink-2); }
.log__empty, .log__data { margin-top: var(--space-lg); }
.log__data { font-size: var(--text-sm); }
@media (max-width: 60rem) {
  .banner { padding-block: var(--space-2xl) var(--space-md); }
  .totals dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .totals dl > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .log--full td.note { min-width: 0; }
  .log--full td.res { text-align: right; }
}
@media (max-width: 40rem) {
  .filters .seg { flex-wrap: wrap; }
  .pick { width: 100%; }
  .pick select { width: 100%; }
}
.log--full td.note details summary { cursor: pointer; }
.log--full td.note details summary::marker { color: var(--color-ink-2); }
.log--full td.note details summary:hover { color: var(--color-ink); }
.log--full td.note details summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.log--full td.note details[open] summary { margin-bottom: var(--space-2xs); color: var(--color-ink); }
.log__hint { margin-bottom: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.nights { border-top: 2px solid var(--color-ink); }
.night { border-bottom: var(--rule-hair) solid var(--color-rule); }
.night > summary { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr); align-items: baseline; gap: var(--space-lg); min-height: 72px; padding-block: var(--space-md); cursor: pointer; list-style: none; }
.night > summary::-webkit-details-marker { display: none; }
.night > summary time { font: 400 var(--text-3xl)/1 var(--font-display); text-transform: uppercase; }
.night > summary .night__res { justify-self: end; font-weight: 500; }
.night > summary::after { content: "+"; justify-self: end; font: 400 var(--text-2xl)/1 var(--font-display); }
.night > summary { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr) 2rem; }
.night[open] > summary::after { content: "\2212"; }
.night > summary:hover time { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.night > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.night table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); background: var(--color-paper-3); box-shadow: var(--shadow-card); }
.night th, .night td { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); text-align: left; vertical-align: baseline; }
.night thead th { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); white-space: nowrap; }
.night tbody th { font-weight: 500; white-space: nowrap; }
.night .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.night td.note { color: var(--color-ink-2); font-size: var(--text-sm); min-width: 16rem; }
.night tbody tr:last-child th, .night tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 60rem) {
  .night > summary { grid-template-columns: minmax(0, 1fr) auto 1.5rem; gap: var(--space-xs) var(--space-md); }
  .night > summary .night__slate { grid-column: 1; grid-row: 2; font-size: var(--text-sm); color: var(--color-ink-2); }
  .night > summary .night__res { grid-column: 2; grid-row: 1; }
  .night > summary::after { grid-column: 3; grid-row: 1; }
  .night thead { display: none; }
  .night table, .night tbody, .night tr, .night th, .night td { display: block; }
  .night tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
  .night th, .night td { padding: 0; border: 0; }
  .night td[data-label]::before { content: attr(data-label) " "; color: var(--color-ink-2); font-size: var(--text-sm); }
  .night td.res { grid-column: 2; grid-row: 1; text-align: right; }
  .night td:not(.res) { grid-column: 1 / -1; }
  .night td.note { min-width: 0; }
}


:root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; }
.viz-sec { padding-block: var(--section-gap-s) 0; }
.viz-sec + .log--full { padding-top: var(--section-gap-s); }
.viz-sec > .container > h2 { font-size: var(--text-section); line-height: 1; text-transform: uppercase; margin-bottom: var(--space-xl); }
.viz { margin: 0; padding: var(--space-xl); }
.viz h3 { font: 400 var(--text-2xl)/1.05 var(--font-display); text-transform: uppercase; }
.viz__sub { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.viz figcaption { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.viz__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); align-items: start; }
.viz__plot { position: relative; margin-top: var(--space-lg); }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz__grid { fill: none; stroke: var(--color-rule-2); stroke-width: 1; }
.viz__zero { stroke: var(--color-ink); stroke-width: 1; }
.viz__line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz__dot { fill: var(--series-1); stroke: var(--color-paper-3); stroke-width: 2; }
.viz__hit { fill: transparent; cursor: crosshair; }
.viz__lab { position: absolute; font-size: var(--text-sm); line-height: 1.1; color: var(--color-ink-2); white-space: nowrap; pointer-events: none; }
.viz__lab--y { translate: -100% -50%; }
.viz__lab--x { translate: -50% 0; }
.viz__lab--c { translate: -50% -50%; font-weight: 500; color: var(--color-ink); text-align: center; }
.viz__lab--ring { translate: 0 -110%; font-size: 0.8125rem; }
.viz__end { position: absolute; translate: -100% -100%; padding: 2px var(--space-xs); background: var(--color-accent); color: var(--color-accent-ink); font: 400 var(--text-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; pointer-events: none; }
.viz__slice { stroke: var(--color-paper-3); stroke-width: 2; stroke-linejoin: round; cursor: crosshair; }
.viz__slice.is-hot { stroke: var(--color-ink); }
.viz--s1 { --c: var(--series-1); }
.viz--s2 { --c: var(--series-2); }
.viz--s3 { --c: var(--series-3); }
.viz__slice, .viz__pt { fill: var(--c); }
.viz__pt { stroke: var(--color-paper-3); stroke-width: 2; }
.viz__area { fill: var(--c); fill-opacity: 0.16; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
.viz__key { display: inline-block; width: 12px; height: 12px; margin-right: var(--space-xs); border-radius: 2px; background: var(--c); vertical-align: -1px; }
.viz__donut { position: relative; width: min(100%, 15rem); margin: var(--space-lg) auto 0; }
.viz__centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: var(--text-sm); pointer-events: none; }
.viz__centre span { display: block; font: 400 var(--text-3xl)/1 var(--font-display); }
.viz__legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: var(--space-md) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.viz__plot--web { width: min(100%, 27rem); margin-inline: auto; }
.viz__table { width: 100%; margin-top: var(--space-lg); border-collapse: collapse; font-size: var(--text-sm); }
.viz__table th, .viz__table td { padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); text-align: left; font-weight: 400; }
.viz__table thead th { font-weight: 500; color: var(--color-ink-2); border-bottom: 1px solid var(--color-ink); }
.viz__table .num, .viz__table thead th + th { text-align: right; font-variant-numeric: tabular-nums; }
.viz__tip { position: fixed; left: 0; top: 0; z-index: 50; padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-board-ink); font-size: var(--text-sm); white-space: nowrap; pointer-events: none; }
.study__more { margin-top: var(--space-lg); font-weight: 500; }
.study__more a { color: var(--color-ink); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.study__more a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@media (max-width: 60rem) {
  .viz__pair { grid-template-columns: minmax(0, 1fr); }
  .viz { padding: var(--space-lg); }
}
@media (max-width: 40rem) {
  .viz__lab--ring { display: none; }
}


.byline { margin-bottom: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); }
.article .banner h1 { max-width: 14ch; }
.article .banner .lead { max-width: 40ch; }
.article__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; padding-bottom: var(--section-gap); }
.article__chart { order: 2; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.prose { max-width: 40rem; }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--text-3xl); line-height: 1; text-transform: uppercase; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ol, .prose ul { margin-top: var(--space-md); }
.prose ol, .prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-xs); }
.prose a { color: var(--color-ink); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.prose a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.prose__table { margin-top: var(--space-xl); font-size: var(--text-md); }
@media (max-width: 60rem) {
  .article__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .article__chart { order: 0; position: static; }
}
@media (max-width: 40rem) {
  .prose__table { font-size: var(--text-sm); }
  .prose__table th:nth-child(2), .prose__table td:nth-child(2) { display: none; }
}