/* Vendored verbatim from the "Brands over time" design system (components/bundle.css). Re-vendor, do not edit. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Geist+Mono:wght@400;500;600&display=swap');

/* Brands over time — Strata components. Every class reads tokens; a year comes in as --year. */

body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.bot-band { background: var(--ground); --ring: var(--ground); }
.bot-band--alt { background: var(--ground-alt); --ring: var(--ground-alt); }
.bot-pad { padding: var(--space-6); }

/* Eyebrow */
.bot-eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }

/* Button */
.bot-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 18px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 15px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; }
.bot-btn:hover { background: var(--surface-raised); }
.bot-btn--primary { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.bot-btn--primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.bot-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-soft); font-weight: 500; padding: 0 12px; }
.bot-btn--ghost:hover { background: transparent; color: var(--ink); text-decoration: underline; }
.bot-btn:focus-visible, .bot-tab:focus-visible, .bot-scrubber__play:focus-visible, .bot-scrubber__year:focus-visible, .bot-peer:focus-visible, .bot-link:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.bot-link { color: var(--ink-soft); text-underline-offset: 3px; }
.bot-link:hover { color: var(--ink); }

/* YearChip */
.bot-year { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--radius-sm); background: var(--year); color: var(--on-year); font: 600 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bot-year--lg { padding: 2px 8px; font-size: 13px; }

/* YearKey */
.bot-yearkey { position: relative; }
.bot-yearkey__bands { display: flex; gap: var(--gap-strata); height: 16px; }
.bot-yearkey__band { flex: 1 1 0; border-radius: var(--radius-xs); background: var(--year); }
.bot-yearkey__labels { display: flex; gap: var(--gap-strata); margin-top: var(--space-2); font: 400 11px/14px var(--font-mono); color: var(--ink-muted); }
.bot-yearkey__labels span { flex: 1 1 0; text-align: center; }
.bot-yearkey__event { position: absolute; top: -10px; height: 36px; width: 0; border-left: 2px solid var(--event); transform: translateX(-2px); }
.bot-yearkey__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: 10px; font-size: 14px; color: var(--ink-muted); }
.bot-yearkey__note b { font: 400 12px/16px var(--font-mono); color: var(--ink); }

/* YearScrubber */
.bot-scrubber { display: flex; gap: var(--space-2); align-items: stretch; }
.bot-scrubber__play { flex: 0 0 48px; min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.bot-scrubber__years { flex: 1 1 auto; display: flex; gap: 3px; min-width: 0; overflow-x: auto; padding: 3px; }
.bot-scrubber__year { flex: 1 0 40px; min-height: 48px; border: 0; border-radius: var(--radius-md); padding: 0; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.bot-scrubber__year span { display: block; padding: 6px 0 5px; font: 400 11px/14px var(--font-mono); color: var(--ink-soft); }
.bot-scrubber__year::after { content: ""; display: block; height: 6px; background: var(--year); }
.bot-scrubber__year:hover { background: var(--surface-raised); }
.bot-scrubber__year[aria-selected="true"] { box-shadow: 0 0 0 2px var(--ink); }
.bot-scrubber__year[aria-selected="true"] span { color: var(--ink); font-weight: 600; }
.bot-scrubber__year[aria-selected="true"]::after { height: 16px; }

/* CaptureFrame */
.bot-capture { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-capture); }
.bot-capture__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-raised); font: 400 12px/16px var(--font-mono); }
.bot-capture__url { flex: 1 1 auto; min-width: 0; padding: 5px 10px; border-radius: 5px; background: var(--ground); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-capture__date { color: var(--ink-muted); white-space: nowrap; text-transform: uppercase; }
.bot-capture__shot { display: block; width: 100%; height: auto; }
.bot-capture--tile { border-radius: var(--radius-md); }
.bot-capture--tile .bot-capture__bar { padding: 7px 10px; gap: var(--space-2); }

/* HeroWall */
.bot-hero { position: relative; overflow: hidden; }
.bot-hero__wall { position: relative; height: 520px; overflow: hidden; }
.bot-hero__grid { position: absolute; left: 50%; top: 10px; width: 1500px; margin-left: -640px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; transform: perspective(1600px) rotateX(16deg) rotateY(-18deg) rotateZ(4deg); transform-origin: 30% 50%; opacity: var(--opacity-wall); }
.bot-hero__veil { position: relative; z-index: 1; margin-top: -210px; background: var(--veil); border-top: 1px solid var(--line); }
.bot-hero__inner { max-width: 1280px; margin: 0 auto; padding: 44px clamp(16px, 4vw, 56px) 64px; }
.bot-hero__title { margin: 14px 0 0; font-size: clamp(64px, 9.5vw, 148px); line-height: .88; font-weight: 800; letter-spacing: -.045em; font-variation-settings: 'opsz' 96; }
.bot-hero__title span { font-weight: 300; color: var(--ink-muted); }

/* MeasureTabs */
.bot-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bot-tab { min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 500 14px/1.2 var(--font-sans); cursor: pointer; }
.bot-tab:hover { background: var(--surface-raised); }
.bot-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.bot-tab--more { border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--ink-muted); }

/* StatTile */
.bot-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-4); margin: 0; }
.bot-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px var(--space-4); }
.bot-stat dd { margin: 0; font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bot-stat dd small { font-size: 26px; font-weight: 400; color: var(--ink-muted); }
.bot-stat dt { margin-top: var(--space-2); font: 400 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* YearBars */
.bot-chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 28px clamp(14px, 2.4vw, 32px) var(--space-6); margin: 0; }
.bot-chart__title { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.bot-chart__title b { font-size: 17px; font-weight: 700; }
.bot-chart__title span { font-size: 15px; color: var(--ink-muted); }
.bot-bars__scroll { overflow-x: auto; margin-top: 36px; }
.bot-bars__inner { min-width: 640px; }
.bot-bars__plot { position: relative; height: 280px; margin-left: 32px; }
.bot-bars__grid { position: absolute; left: -32px; right: 0; border-top: 1px solid var(--line-faint); }
.bot-bars__grid--base { border-top-color: var(--line-strong); }
.bot-bars__grid span { position: absolute; left: 0; top: -9px; font: 400 11px/14px var(--font-mono); color: var(--ink-muted); }
.bot-bars__ref { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--line-strong); }
.bot-bars__ref span { position: absolute; left: 4px; top: -22px; padding: 0 4px; background: var(--surface); font: 400 11px/14px var(--font-mono); color: var(--ink-muted); }
.bot-bars__cols { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.bot-bars__col { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 7px; box-sizing: border-box; }
.bot-bars__val { margin-bottom: 6px; font: 600 12px/16px var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.bot-bar { width: 100%; max-width: 58px; box-sizing: border-box; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--year); }
.bot-bars__col--thin .bot-bar { background: repeating-linear-gradient(135deg, var(--year) 0 1.5px, transparent 1.5px 6px); border: 1px solid var(--year); border-bottom: 0; }
.bot-bars__col--thin .bot-bars__val { color: var(--ink-muted); font-weight: 400; }
.bot-bars__event { position: absolute; top: -30px; bottom: -6px; width: 0; border-left: 1.5px dashed var(--event); }
.bot-bars__event span { position: absolute; left: 10px; top: -2px; white-space: nowrap; font: 400 11px/14px var(--font-mono); color: var(--ink); }
.bot-bars__axis { display: flex; margin-left: 32px; margin-top: 12px; }
.bot-bars__axis > div { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bot-bars__pp { font: 400 11px/14px var(--font-mono); color: var(--ink-muted); }

/* Legend */
.bot-legend { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; font-size: 14px; color: var(--ink-soft); }
.bot-legend > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.bot-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--year, var(--ink-muted)); box-sizing: border-box; }
.bot-swatch--thin { background: repeating-linear-gradient(135deg, var(--year, var(--ink-muted)) 0 1.5px, transparent 1.5px 5px); border: 1px solid var(--year, var(--ink-muted)); }
.bot-swatch--event { width: 0; height: 16px; border-radius: 0; background: none; border-left: 1.5px dashed var(--event); }
.bot-swatch--ring { width: 13px; height: 13px; border-radius: 50%; background: none; border: 2.5px solid var(--year); }
.bot-swatch--dot { width: 13px; height: 13px; border-radius: 50%; }

/* BeforeAfter */
.bot-ba__head { display: flex; flex-wrap: wrap; gap: 6px var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-strong); font: 400 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.bot-ba__head > span:first-child { flex: 0 0 220px; }
.bot-ba__head > span:last-child { flex: 1 1 420px; display: flex; gap: 20px; align-items: center; }
.bot-ba__head .bot-swatch { margin-right: 6px; vertical-align: -2px; }
.bot-ba__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-6); padding: 15px 0; border-bottom: 1px solid var(--line-faint); }
.bot-ba__name { flex: 0 0 220px; font-size: 17px; font-weight: 600; }
.bot-ba__body { flex: 1 1 420px; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.bot-ba__num { flex: 0 0 48px; font: 500 13px/18px var(--font-mono); color: var(--ink-soft); }
.bot-ba__num--before { text-align: right; }
.bot-ba__num--after { color: var(--ink); font-weight: 600; }
.bot-ba__chg { flex: 0 0 72px; text-align: right; font: 500 13px/18px var(--font-mono); color: var(--ink-soft); }
.bot-ba__track { position: relative; flex: 1 1 auto; height: 20px; }
.bot-ba__track::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--surface-raised); }
.bot-ba__seg { position: absolute; top: 9px; height: 2px; background: var(--line-strong); }
.bot-ba__before { position: absolute; top: 2.5px; width: 10px; height: 10px; border: 2.5px solid var(--period-before); border-radius: 50%; background: var(--ring, var(--ground)); transform: translateX(-50%); }
.bot-ba__after { position: absolute; top: 2.5px; width: 15px; height: 15px; border-radius: 50%; background: var(--period-after); box-shadow: 0 0 0 2px var(--ring, var(--ground)); transform: translateX(-50%); }

/* PeerStrip */
.bot-peers__row { display: flex; flex-wrap: wrap; gap: var(--space-2) 32px; padding: 22px 0 18px; border-top: 1px solid var(--line-faint); }
.bot-peers__name { flex: 0 0 200px; }
.bot-peers__name b { display: block; font-size: 17px; font-weight: 600; }
.bot-peers__name span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-muted); }
.bot-peers__body { flex: 1 1 420px; min-width: 0; }
.bot-peers__track { position: relative; height: 56px; margin: 0 var(--space-2); }
.bot-peers__track::before { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 2px; background: var(--line-faint); }
.bot-peer { position: absolute; top: 31px; width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: var(--peer); box-shadow: 0 0 0 2px var(--ring, var(--ground)); transform: translateX(-50%); cursor: pointer; }
.bot-peer::after { content: ""; position: absolute; inset: -8px; }
.bot-peer:hover { background: var(--ink-soft); }
.bot-peers__avg { position: absolute; top: 26px; width: 2px; height: 22px; background: var(--ink-muted); transform: translateX(-50%); }
.bot-peers__subject { position: absolute; top: 29px; width: 16px; height: 16px; border-radius: 50%; background: var(--subject); box-shadow: 0 0 0 3px var(--ring, var(--ground)); transform: translateX(-50%); }
.bot-peers__label { position: absolute; top: 0; white-space: nowrap; font-size: 14px; font-weight: 700; }
.bot-peers__label span { font-family: var(--font-mono); font-weight: 500; }
.bot-peers__range { display: flex; justify-content: space-between; margin: 4px var(--space-2) 0; font: 400 11px/14px var(--font-mono); color: var(--ink-muted); }

/* WordBars */
.bot-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 56px; }
.bot-word { display: flex; align-items: center; gap: var(--space-4); padding: 14px 0; border-top: 1px solid var(--line-faint); }
.bot-word__term { flex: 0 0 130px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.bot-word__bars { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.bot-word__subject { height: 9px; border-radius: 0 4px 4px 0; background: var(--subject); }
.bot-word__peer { height: 5px; min-width: 3px; border-radius: 0 3px 3px 0; background: var(--peer); }
.bot-word__num { flex: 0 0 96px; text-align: right; font: 500 13px/18px var(--font-mono); }
.bot-word__num span { color: var(--ink-muted); }

/* QuoteCard */
.bot-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.bot-quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
.bot-quote::before { content: ""; display: block; height: 6px; background: var(--year); }
.bot-quote__body { padding: 22px 26px var(--space-6); }
.bot-quote__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.bot-quote__meta > span { display: inline-flex; align-items: center; gap: 10px; }
.bot-quote__tag { padding: 3px var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-full); font-size: 11px; }
.bot-quote blockquote { margin: var(--space-4) 0 0; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.012em; }
.bot-quote .bot-link { display: inline-block; margin-top: 18px; padding: 6px 0; font-size: 15px; }