@charset "UTF-8";
/* ==========================================================================
BRIGHT START NEWS — "DAYBREAK" DESIGN SYSTEM
Bright, welcoming morning. Warm white + friendly sky blue + dawn amber.
Light is the default. Dark is a soft dusk, never harsh.
========================================================================== */
/* ---------- 1. TOKENS ---------- */
:root {
/* surfaces */
--bg: #FFFDF8;
--surface: #FBF4E9;
--card: #FFFFFF;
--border: #EFE6D6;
--border-strong: #E2D5BE;
/* ink */
--text: #1E2530;
--muted: #6A7482;
/* brand */
--sky: #1E9BE6;
--sky-hover: #1580C4;
--sky-tint: #E4F3FC;
--sky-ink: #0B5C8F;
/* accent — the sunrise */
--dawn: #FBB024;
--dawn-deep: #E09410;
--dawn-tint: #FFF3DC;
/* semantic price */
--up: #17A66B;
--up-tint: #E3F6EE;
--down: #E05656;
--down-tint: #FDEAEA;
--neutral: #6A7482;
/* category chips */
--c-start: #FBB024;
--c-news: #1E9BE6;
--c-explained: #17A66B;
--c-learn: #7C6CE0;
--c-markets: #0E7FBF;
/* type */
--f-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
--f-body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-mono: "Overpass Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* radii — rounded + approachable */
--r-xs: 6px;
--r-sm: 10px;
--r: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
/* elevation — soft and warm, never harsh */
--sh-sm: 0 1px 2px rgba(30,37,48,.05);
--sh: 0 2px 8px rgba(30,37,48,.06), 0 1px 2px rgba(30,37,48,.04);
--sh-md: 0 8px 24px rgba(30,37,48,.08), 0 2px 6px rgba(30,37,48,.05);
--sh-lg: 0 18px 48px rgba(30,37,48,.10), 0 4px 12px rgba(30,37,48,.06);
/* layout */
--wrap: 1240px;
--wrap-n: 1080px;
--read: 704px;
--gap: 24px;
--hdr-h: 68px;
--bar-h: 36px;
--ease: cubic-bezier(.22,.61,.36,1);
--dur: 220ms;
}
:root[data-theme="dark"],
html.bsn-dark {
--bg: #171A21;
--surface: #1F242D;
--card: #232936;
--border: #333B47;
--border-strong: #414B59;
--text: #EEF2F7;
--muted: #9AA6B4;
--sky: #4FB4F0;
--sky-hover: #7CC8F5;
--sky-tint: #14303F;
--sky-ink: #A9DCFA;
--dawn: #FBB024;
--dawn-deep: #FFC759;
--dawn-tint: #3A2E15;
--up: #35C98A;
--up-tint: #14301F;
--down: #F07575;
--down-tint: #351A1A;
--sh-sm: 0 1px 2px rgba(0,0,0,.30);
--sh: 0 2px 8px rgba(0,0,0,.34), 0 1px 2px rgba(0,0,0,.24);
--sh-md: 0 8px 24px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.28);
--sh-lg: 0 18px 48px rgba(0,0,0,.48), 0 4px 12px rgba(0,0,0,.32);
}
/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 20px); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--f-body);
font-size: 18px;
line-height: 1.78;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--f-display);
font-weight: 600;
color: var(--text);
margin: 0 0 .5em;
letter-spacing: -.01em;
line-height: 1.2;
text-wrap: balance;
}
h1 { font-size: 2rem; line-height: 1.3125; }
h2 { font-size: 1.5rem; line-height: 1.333; }
h3 { font-size: 1.25rem; line-height: 1.3; }
h4 { font-size: 1.125rem;line-height: 1.222; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: var(--sky); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--sky-hover); }
img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li { margin-bottom: .45em; }
li:last-child { margin-bottom: 0; }
blockquote {
margin: 28px 0;
padding: 18px 24px;
border-left: 4px solid var(--dawn);
background: var(--dawn-tint);
border-radius: 0 var(--r) var(--r) 0;
font-size: 1.0625rem;
}
blockquote p:last-child { margin-bottom: 0; }
code, kbd, samp, pre { font-family: var(--f-mono); font-size: .9375em; }
code { background: var(--surface); padding: .12em .38em; border-radius: var(--r-xs); border: 1px solid var(--border); }
pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
th { font-family: var(--f-display); font-weight: 600; font-size: .875rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--dawn-tint); color: var(--text); }
.bsn-sr {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.bsn-skip {
position: absolute; left: 12px; top: -60px; z-index: 999;
background: var(--sky); color: #fff; padding: 10px 18px;
border-radius: var(--r-pill); font-weight: 700; font-family: var(--f-display);
transition: top var(--dur) var(--ease);
}
.bsn-skip:focus { top: 12px; color: #fff; }
/* ---------- 3. LAYOUT ---------- */
.bsn-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.bsn-wrap--narrow { max-width: var(--wrap-n); }
.bsn-read { max-width: var(--read); }
.bsn-section { padding-block: 56px; }
.bsn-section--tight { padding-block: 40px; }
.bsn-section--surface { background: var(--surface); }
.bsn-grid { display: grid; gap: var(--gap); }
.bsn-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.bsn-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.bsn-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1024px) {
.bsn-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
.bsn-grid--2, .bsn-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.bsn-grid--4 { grid-template-columns: 1fr; }
}
/* content + sidebar rail */
.bsn-shell { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 48px; align-items: start; }
@media (max-width: 1080px) { .bsn-shell { grid-template-columns: 1fr; gap: 40px; } }
.bsn-rail { position: sticky; top: calc(var(--hdr-h) + 20px); display: grid; gap: 20px; }
@media (max-width: 1080px) { .bsn-rail { position: static; } }
/* ---------- 4. SECTION HEADERS ---------- */
.bsn-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.bsn-shead__t { margin: 0; font-size: 1.625rem; line-height: 1.25; }
.bsn-shead__sub { margin: 6px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.55; max-width: 62ch; }
.bsn-shead__more { font-family: var(--f-display); font-weight: 600; font-size: .9375rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.bsn-shead__more:hover { gap: 10px; }
.bsn-shead__more { transition: gap var(--dur) var(--ease); }
.bsn-eyebrow {
font-family: var(--f-display); font-weight: 600; font-size: .75rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--sky);
display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px;
}
.bsn-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--dawn); border-radius: 2px; }
/* ---------- 5. BUTTONS ---------- */
.bsn-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: var(--f-display); font-weight: 600; font-size: 1rem;
padding: 13px 24px; min-height: 48px; /* big tap targets */
border-radius: var(--r-pill); border: 1.5px solid transparent;
cursor: pointer; text-align: center; line-height: 1.2;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bsn-btn:active { transform: translateY(1px); }
.bsn-btn--sky { background: var(--sky); color: #fff; box-shadow: var(--sh-sm); }
.bsn-btn--sky:hover { background: var(--sky-hover); color: #fff; box-shadow: var(--sh-md); }
.bsn-btn--dawn { background: var(--dawn); color: #3A2A05; box-shadow: var(--sh-sm); }
.bsn-btn--dawn:hover { background: var(--dawn-deep); color: #3A2A05; box-shadow: var(--sh-md); }
.bsn-btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.bsn-btn--ghost:hover { background: var(--surface); color: var(--text); border-color: var(--sky); }
.bsn-btn--sm { padding: 9px 16px; min-height: 40px; font-size: .875rem; }
.bsn-btn--block { width: 100%; }
/* ---------- 6. CHIPS ---------- */
.bsn-chip {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--f-display); font-weight: 600; font-size: .75rem;
letter-spacing: .04em; text-transform: uppercase;
padding: 5px 11px; border-radius: var(--r-pill);
background: var(--sky-tint); color: var(--sky-ink);
border: 1px solid transparent; white-space: nowrap;
}
.bsn-chip--start { background: var(--dawn-tint); color: #7A5504; }
.bsn-chip--news { background: var(--sky-tint); color: var(--sky-ink); }
.bsn-chip--explained { background: var(--up-tint); color: #0B6644; }
.bsn-chip--learn { background: #EFEBFC; color: #4B3BA8; }
.bsn-chip--markets { background: #E1F0F9; color: #08506F; }
:root[data-theme="dark"] .bsn-chip--start { background: #3A2E15; color: #F7C765; }
:root[data-theme="dark"] .bsn-chip--explained { background: #14301F; color: #6EDCAB; }
:root[data-theme="dark"] .bsn-chip--learn { background: #241E3C; color: #B0A3F0; }
:root[data-theme="dark"] .bsn-chip--markets { background: #12303F; color: #78C4E8; }
.bsn-tag {
display: inline-flex; align-items: center;
font-size: .8125rem; font-weight: 600; color: var(--muted);
padding: 5px 12px; border-radius: var(--r-pill);
background: var(--surface); border: 1px solid var(--border);
transition: all var(--dur) var(--ease);
}
a.bsn-tag:hover { color: var(--sky); border-color: var(--sky); background: var(--sky-tint); }
/* ---------- 7. CARDS ---------- */
.bsn-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm);
overflow: hidden;
position: relative;
/* Column flex so the meta row can be pinned to the bottom: without it,
cards in one grid row end their dates at different heights whenever the
headline or plain-English line wraps to a different number of lines. */
display: flex; flex-direction: column;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bsn-card--hover:hover { transform: translateY(-1px); box-shadow: var(--sh-md); border-color: var(--sky); }
.bsn-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
/* Flex children stretch across the cross axis by default, which blows the
pill chip out to the full card width. */
.bsn-card__body > .bsn-chip { align-self: flex-start; }
/* display:block is load-bearing — this is an , and aspect-ratio does
nothing on an inline box, which let the image stretch to card height. */
.bsn-card__media { display: block; aspect-ratio: 16/9; background: var(--surface); overflow: hidden; }
.bsn-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.bsn-card--hover:hover .bsn-card__media img { transform: scale(1.03); }
/* Clamp the variable-length parts to a fixed number of lines.
The plain-English lines run 136–233 characters depending on the article, so
without this one card's box is nearly twice the height of its neighbour's and
a row reads as ragged even though the cards are equal height. */
.bsn-card__t {
font-size: 1.125rem; line-height: 1.35; margin: 10px 0 8px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.bsn-card__t a { color: var(--text); }
.bsn-card--hover:hover .bsn-card__t a { color: var(--sky); }
.bsn-card__ex {
color: var(--muted); font-size: .9375rem; line-height: 1.6; margin: 0;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bsn-card__meta {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: .8125rem; color: var(--muted); margin-top: auto; padding-top: 14px;
font-family: var(--f-mono);
}
.bsn-card__meta span + span::before { content: "·"; margin-right: 8px; opacity: .6; }
/* card-wide link without global a:hover underline bleed */
.bsn-card a:hover { text-decoration: none; }
/* ---------- 8. SIGNATURE — "IN PLAIN ENGLISH" ---------- */
.bsn-pe {
--pe-accent: var(--sky);
background: var(--sky-tint);
border: 1px solid color-mix(in srgb, var(--sky) 26%, transparent);
border-left: 5px solid var(--pe-accent);
border-radius: var(--r) var(--r-lg) var(--r-lg) var(--r);
padding: 22px 26px 24px;
margin: 32px 0;
position: relative;
}
.bsn-pe__head {
display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap;
}
.bsn-pe__icon {
width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
background: var(--dawn); color: #3A2A05;
display: grid; place-items: center;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--dawn) 24%, transparent);
}
.bsn-pe__icon svg { width: 17px; height: 17px; }
.bsn-pe__title {
font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem;
color: var(--sky-ink); margin: 0; letter-spacing: -.005em;
}
.bsn-pe__note {
font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .04em;
text-transform: uppercase; color: var(--muted);
background: var(--card); border: 1px solid var(--border);
padding: 3px 9px; border-radius: var(--r-pill); margin-left: auto; white-space: nowrap;
}
.bsn-pe__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.bsn-pe__item { margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: start; }
.bsn-pe__k {
font-family: var(--f-display); font-weight: 600; font-size: .75rem;
letter-spacing: .06em; text-transform: uppercase;
color: var(--sky-ink); background: var(--card);
border: 1px solid color-mix(in srgb, var(--sky) 30%, transparent);
padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap;
margin-top: 2px;
}
.bsn-pe__v { font-size: 1rem; line-height: 1.65; color: var(--text); }
.bsn-pe__v p:last-child { margin-bottom: 0; }
@media (max-width: 620px) {
.bsn-pe { padding: 18px 18px 20px; border-radius: var(--r); }
.bsn-pe__item { grid-template-columns: 1fr; gap: 5px; }
.bsn-pe__k { justify-self: start; }
.bsn-pe__note { margin-left: 0; width: 100%; text-align: center; }
}
/* Compact variant used on cards. A filled, bordered panel here outweighed the
headline it supports, and three of them across a grid row turned the section
into stacked blue slabs — so it is marked with a rule instead, matching the
lead story and the archive list. */
.bsn-pe-mini {
display: grid; gap: 3px;
padding: 2px 0 2px 13px; margin-top: 12px;
border-left: 3px solid var(--sky);
}
.bsn-pe-mini__k {
font-family: var(--f-display); font-weight: 700; font-size: .6875rem;
letter-spacing: .07em; text-transform: uppercase; color: var(--sky-ink);
}
.bsn-pe-mini__v { font-size: .9375rem; line-height: 1.58; color: var(--text); }
/* 5 lines, not 4: the trimmed line runs to ~126 characters, which is a shade
over four lines at card width — so a 4-line clamp fired first and cut
mid-word ("throug…") even though the text already ended cleanly. 5 lines
lets the server-side word-boundary trim be what the reader actually sees,
and the clamp stays purely as a backstop. */
.bsn-card .bsn-pe-mini__v {
display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
/* ---------- 9. SIGNATURE — THE BRIGHT START PATH ---------- */
.bsn-path { display: grid; gap: 0; position: relative; counter-reset: bsnstep; }
.bsn-path__step {
display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 20px;
padding: 22px 0; position: relative;
}
.bsn-path__step + .bsn-path__step { border-top: 1px dashed var(--border-strong); }
.bsn-path__num {
width: 48px; height: 48px; border-radius: 50%;
background: var(--dawn-tint); color: #7A5504;
border: 2px solid var(--dawn);
display: grid; place-items: center;
font-family: var(--f-display); font-weight: 700; font-size: 1.25rem;
position: relative; z-index: 1;
}
.bsn-path__step--done .bsn-path__num { background: var(--dawn); color: #3A2A05; }
.bsn-path__body { min-width: 0; }
.bsn-path__t { font-size: 1.1875rem; margin: 8px 0 6px; }
.bsn-path__t a { color: var(--text); }
.bsn-path__t a:hover { color: var(--sky); }
.bsn-path__d { color: var(--muted); font-size: .9375rem; line-height: 1.6; margin: 0 0 10px; }
.bsn-path__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8125rem; color: var(--muted); font-family: var(--f-mono); }
.bsn-path__check {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
font-family: var(--f-body); font-weight: 600; font-size: .8125rem; color: var(--muted);
background: none; border: 0; padding: 4px 0;
}
.bsn-path__check:hover { color: var(--sky); }
.bsn-path__check svg { width: 18px; height: 18px; }
.bsn-path__step--done .bsn-path__check { color: var(--up); }
/* connector line */
.bsn-path::before {
content: ""; position: absolute; left: 24px; top: 34px; bottom: 34px;
width: 2px; background: linear-gradient(180deg, var(--dawn), color-mix(in srgb, var(--dawn) 22%, transparent));
border-radius: 2px;
}
@media (max-width: 620px) {
.bsn-path__step { grid-template-columns: 40px minmax(0,1fr); gap: 14px; }
.bsn-path__num { width: 36px; height: 36px; font-size: 1rem; }
.bsn-path::before { left: 18px; }
}
/* progress bar */
.bsn-progress {
display: flex; align-items: center; gap: 14px;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r-pill); padding: 12px 20px; margin-bottom: 28px;
box-shadow: var(--sh-sm);
}
.bsn-progress__track { flex: 1; height: 9px; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; }
.bsn-progress__fill { height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--dawn), var(--sky)); transition: width 450ms var(--ease); }
.bsn-progress__label { font-family: var(--f-mono); font-size: .8125rem; color: var(--muted); white-space: nowrap; }
/* ---------- 10. SAFETY CALLOUT ---------- */
.bsn-safety {
display: grid; grid-template-columns: auto minmax(0,1fr); gap: 15px;
background: var(--dawn-tint);
border: 1px solid color-mix(in srgb, var(--dawn) 44%, transparent);
border-radius: var(--r-lg);
padding: 18px 22px; margin: 28px 0;
}
.bsn-safety__icon {
width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
background: var(--dawn); color: #3A2A05; display: grid; place-items: center;
}
.bsn-safety__icon svg { width: 19px; height: 19px; }
.bsn-safety__t { font-family: var(--f-display); font-weight: 700; font-size: 1rem; margin: 4px 0 6px; color: var(--text); }
.bsn-safety__b { font-size: .9375rem; line-height: 1.62; color: var(--text); }
.bsn-safety__b p:last-child { margin-bottom: 0; }
/* golden rules strip */
.bsn-rules { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) { .bsn-rules { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .bsn-rules { grid-template-columns: 1fr; } }
.bsn-rule {
background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
padding: 18px 18px 20px; display: grid; gap: 9px;
}
.bsn-rule__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--dawn-tint); color: var(--dawn-deep); display: grid; place-items: center; }
.bsn-rule__icon svg { width: 18px; height: 18px; }
.bsn-rule__t { font-family: var(--f-display); font-weight: 600; font-size: 1rem; margin: 0; }
.bsn-rule__d { font-size: .875rem; color: var(--muted); line-height: 1.55; margin: 0; }
/* ---------- 11. YMYL + DISCLOSURE ---------- */
.bsn-ymyl {
font-size: .875rem; line-height: 1.6; color: var(--muted);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 13px 17px; margin: 22px 0;
display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; align-items: start;
}
.bsn-ymyl svg { width: 17px; height: 17px; color: var(--dawn-deep); margin-top: 3px; }
.bsn-ymyl p:last-child { margin-bottom: 0; }
.bsn-ymyl strong { color: var(--text); }
.bsn-afd {
font-size: .8125rem; line-height: 1.55; color: var(--muted);
border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
padding: 11px 15px; margin: 20px 0; background: var(--bg);
}
.bsn-afd strong { color: var(--text); font-family: var(--f-display); }
/* ---------- 12. QUICK ANSWER / TAKEAWAYS ---------- */
.bsn-quick {
background: var(--up-tint);
border: 1px solid color-mix(in srgb, var(--up) 30%, transparent);
border-radius: var(--r-lg); padding: 20px 24px; margin: 26px 0;
}
.bsn-quick__t {
font-family: var(--f-display); font-weight: 700; font-size: .75rem;
letter-spacing: .1em; text-transform: uppercase; color: #0B6644; margin: 0 0 9px;
display: flex; align-items: center; gap: 8px;
}
:root[data-theme="dark"] .bsn-quick__t { color: #6EDCAB; }
.bsn-quick__b { font-size: 1.0625rem; line-height: 1.66; }
.bsn-quick__b p:last-child { margin-bottom: 0; }
.bsn-takeaways {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 22px 26px; margin: 30px 0;
}
.bsn-takeaways__t { font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; margin: 0 0 12px; }
.bsn-takeaways ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.bsn-takeaways li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; align-items: start; margin: 0; font-size: .9375rem; line-height: 1.6; }
.bsn-takeaways li::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--dawn); margin-top: 9px;
}
/* analogy callout */
.bsn-analogy {
border-left: 4px solid var(--c-learn); background: #F6F4FE;
border-radius: 0 var(--r) var(--r) 0; padding: 16px 20px; margin: 26px 0;
font-size: 1rem; line-height: 1.65;
}
:root[data-theme="dark"] .bsn-analogy { background: #221D36; }
.bsn-analogy__t { font-family: var(--f-display); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-learn); margin: 0 0 6px; }
.bsn-analogy p:last-child { margin-bottom: 0; }
/* ---------- 13. PRICE + DATA ---------- */
.bsn-num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.bsn-up { color: var(--up); }
.bsn-down { color: var(--down); }
.bsn-flat { color: var(--neutral); }
.bsn-delta {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--f-mono); font-variant-numeric: tabular-nums;
font-size: .8125rem; font-weight: 600;
padding: 3px 8px; border-radius: var(--r-pill);
}
.bsn-delta--up { background: var(--up-tint); color: var(--up); }
.bsn-delta--down { background: var(--down-tint); color: var(--down); }
.bsn-delta--flat { background: var(--surface); color: var(--neutral); }
@keyframes bsn-flash-up { 0% { background: var(--up-tint); } 100% { background: transparent; } }
@keyframes bsn-flash-down { 0% { background: var(--down-tint); } 100% { background: transparent; } }
.bsn-flash-up { animation: bsn-flash-up 900ms var(--ease); }
.bsn-flash-down { animation: bsn-flash-down 900ms var(--ease); }
/* skeleton loaders — NEVER em-dash placeholders */
@keyframes bsn-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.bsn-skel {
display: inline-block; min-width: 54px; height: 1em; vertical-align: middle;
border-radius: var(--r-xs);
background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
background-size: 840px 100%;
animation: bsn-shimmer 1.35s linear infinite;
}
.bsn-skel--wide { min-width: 96px; }
.bsn-skel--sm { min-width: 38px; height: .8em; }
/* ---------- 14. TICKER ---------- */
.bsn-topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
font-size: .8125rem;
height: var(--bar-h);
display: flex; align-items: center;
position: relative; z-index: 60;
}
.bsn-topbar__in { display: flex; align-items: center; gap: 16px; width: 100%; }
.bsn-topbar__date { font-family: var(--f-mono); color: var(--muted); white-space: nowrap; font-size: .75rem; }
.bsn-topbar__links { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bsn-topbar__links a { color: var(--muted); font-weight: 600; font-size: .75rem; white-space: nowrap; }
.bsn-topbar__links a:hover { color: var(--sky); }
.bsn-startchip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--dawn); color: #3A2A05;
font-family: var(--f-display); font-weight: 600; font-size: .75rem;
padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap;
transition: transform var(--dur) var(--ease);
}
.bsn-startchip:hover { color: #3A2A05; transform: translateY(-1px); }
@media (max-width: 900px) { .bsn-topbar__date, .bsn-topbar__links { display: none; } }
.bsn-ticker { display: flex; align-items: center; gap: 14px; overflow: hidden; flex: 1; min-width: 0; }
.bsn-ticker__i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--f-mono); font-size: .75rem; }
.bsn-ticker__s { font-weight: 600; color: var(--text); }
.bsn-ticker__p { color: var(--muted); }
/* Below this width there isn't room for even one full "BTC $63,000" without
clipping mid-number — hide the ticker rather than show a truncated price
that reads like a broken one. */
@media (max-width: 480px) { .bsn-ticker { display: none; } }
/* ---------- 15. HEADER ---------- */
.bsn-hdr {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--border);
}
.bsn-hdr__in { display: flex; align-items: center; gap: 22px; height: var(--hdr-h); }
.bsn-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bsn-logo__mark { width: 36px; height: 36px; flex: 0 0 36px; }
.bsn-logo__txt {
font-family: var(--f-display); font-weight: 700; font-size: 1.1875rem;
color: var(--text); letter-spacing: -.02em; line-height: 1.05; white-space: nowrap;
}
.bsn-logo__txt em { font-style: normal; color: var(--sky); }
.bsn-logo:hover .bsn-logo__txt { color: var(--text); }
@media (max-width: 400px) { .bsn-logo__txt { font-size: 1.0625rem; } }
.bsn-nav { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.bsn-nav__item { position: relative; }
.bsn-nav__link {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--f-display); font-weight: 600; font-size: .9375rem;
color: var(--text); padding: 9px 13px; border-radius: var(--r-pill);
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
white-space: nowrap;
}
.bsn-nav__link:hover, .bsn-nav__item:hover > .bsn-nav__link { background: var(--sky-tint); color: var(--sky-ink); }
.bsn-nav__link--current { color: var(--sky); }
.bsn-nav__link svg { width: 13px; height: 13px; opacity: .55; transition: transform var(--dur) var(--ease); }
.bsn-nav__item:hover .bsn-nav__link svg { transform: rotate(180deg); }
.bsn-nav__link--start { background: var(--dawn-tint); color: #7A5504; }
.bsn-nav__link--start:hover { background: var(--dawn); color: #3A2A05; }
.bsn-mega {
position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
box-shadow: var(--sh-lg); padding: 10px; z-index: 70;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.bsn-nav__item:hover .bsn-mega,
.bsn-nav__item:focus-within .bsn-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.bsn-mega a {
display: block; padding: 10px 14px; border-radius: var(--r-sm);
color: var(--text); font-size: .9375rem; font-weight: 500;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bsn-mega a:hover { background: var(--sky-tint); color: var(--sky-ink); }
.bsn-mega__sep { height: 1px; background: var(--border); margin: 7px 10px; }
.bsn-mega__all { font-family: var(--f-display); font-weight: 600; color: var(--sky) !important; }
.bsn-hdr__act { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.bsn-iconbtn {
width: 42px; height: 42px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: transparent; border: 1.5px solid var(--border);
color: var(--text); transition: all var(--dur) var(--ease); padding: 0;
}
.bsn-iconbtn:hover { background: var(--sky-tint); border-color: var(--sky); color: var(--sky-ink); }
.bsn-iconbtn svg { width: 19px; height: 19px; }
@media (max-width: 1120px) { .bsn-nav { display: none; } }
.bsn-burger { display: none; }
@media (max-width: 1120px) { .bsn-burger { display: grid; } }
@media (max-width: 620px) { .bsn-hdr__cta { display: none; } }
/* mobile drawer */
.bsn-drawer {
position: fixed; inset: 0; z-index: 200;
background: var(--bg);
transform: translateX(100%); transition: transform 300ms var(--ease);
overflow-y: auto; overscroll-behavior: contain;
visibility: hidden;
}
.bsn-drawer[data-open="1"] { transform: translateX(0); visibility: visible; }
.bsn-drawer__top { display: flex; align-items: center; justify-content: space-between; height: var(--hdr-h); padding-inline: 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 2; }
.bsn-drawer__body { padding: 20px 20px 60px; }
.bsn-drawer__start {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--dawn-tint); border: 1px solid var(--dawn);
border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 22px;
}
.bsn-drawer__start b { font-family: var(--f-display); font-size: 1.0625rem; display: block; }
.bsn-drawer__start span { font-size: .8125rem; color: var(--muted); }
.bsn-drawer__grp { border-bottom: 1px solid var(--border); padding: 6px 0; }
.bsn-drawer__grp > a, .bsn-drawer__sum {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem;
color: var(--text); padding: 14px 4px; cursor: pointer; list-style: none;
}
.bsn-drawer__sum::-webkit-details-marker { display: none; }
.bsn-drawer__sum svg { width: 16px; height: 16px; opacity: .5; transition: transform var(--dur) var(--ease); }
.bsn-drawer__grp details[open] .bsn-drawer__sum svg { transform: rotate(180deg); }
.bsn-drawer__sub { padding: 0 4px 12px; display: grid; gap: 2px; }
.bsn-drawer__sub a { padding: 10px 12px; border-radius: var(--r-sm); color: var(--muted); font-size: .9375rem; }
.bsn-drawer__sub a:hover { background: var(--surface); color: var(--sky); }
/* search overlay */
.bsn-searchov {
position: fixed; inset: 0; z-index: 210;
background: color-mix(in srgb, var(--bg) 96%, transparent);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
display: grid; place-items: start center; padding-top: 14vh;
opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.bsn-searchov[data-open="1"] { opacity: 1; visibility: visible; }
.bsn-searchov__box { width: min(680px, calc(100vw - 40px)); }
.bsn-searchov__form { display: flex; gap: 10px; }
.bsn-searchov input[type="search"] {
flex: 1; font-family: var(--f-body); font-size: 1.125rem;
padding: 17px 22px; border-radius: var(--r-pill);
border: 2px solid var(--border-strong); background: var(--card); color: var(--text);
}
.bsn-searchov input[type="search"]:focus { border-color: var(--sky); outline: none; }
.bsn-searchov__hint { margin-top: 14px; color: var(--muted); font-size: .875rem; text-align: center; }
/* ---------- 16. HERO ---------- */
.bsn-hero {
position: relative; overflow: hidden;
padding-block: 60px 64px;
background:
radial-gradient(1100px 460px at 12% -8%, var(--dawn-tint) 0%, transparent 62%),
radial-gradient(900px 420px at 88% 4%, var(--sky-tint) 0%, transparent 60%),
var(--bg);
}
.bsn-hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border);
}
@media (max-width: 980px) { .bsn-hero { padding-block: 44px 48px; } }
.bsn-hero__t { font-size: 2.75rem; line-height: 1.14; margin: 0 0 16px; letter-spacing: -.022em; }
@media (max-width: 780px) { .bsn-hero__t { font-size: 2.125rem; } }
@media (max-width: 420px) { .bsn-hero__t { font-size: 1.875rem; } }
.bsn-hero__t em { font-style: normal; color: var(--sky); }
.bsn-hero__lede { font-size: 1.1875rem; line-height: 1.62; color: var(--muted); margin: 0 0 26px; max-width: 54ch; }
.bsn-hero__rea { display: flex; align-items: center; gap: 9px; font-size: .875rem; color: var(--muted); }
.bsn-hero__rea svg { width: 17px; height: 17px; color: var(--up); flex: 0 0 17px; }
/* ---------- HERO LEAD STORY ----------
Editorial front-page lead: copy left, art right, no card chrome. The whole
block is a click target via a stretched pseudo-element on the single real
link in the headline — one link, correctly labelled for screen readers,
rather than an anchor wrapped around a heading. */
.bsn-lead {
position: relative;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
align-items: center; gap: 56px;
}
@media (max-width: 900px) {
.bsn-lead { grid-template-columns: 1fr; gap: 26px; }
/* Art first on narrow screens — fastest signal of what the story is. */
.bsn-lead__media { order: -1; }
}
.bsn-lead__media {
position: relative; overflow: hidden;
border-radius: var(--r-lg); background: var(--surface);
box-shadow: var(--sh-md);
aspect-ratio: 4/3;
}
@media (max-width: 900px) { .bsn-lead__media { aspect-ratio: 16/9; } }
.bsn-lead__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.bsn-lead:hover .bsn-lead__media img { transform: scale(1.02); }
.bsn-lead__flag {
position: absolute; top: 16px; left: 16px;
background: var(--dawn); color: #3A2A05;
font-family: var(--f-display); font-weight: 700; font-size: .6875rem;
letter-spacing: .07em; text-transform: uppercase;
padding: 6px 12px; border-radius: var(--r-pill);
box-shadow: var(--sh-sm);
}
.bsn-lead__body { display: flex; flex-direction: column; align-items: flex-start; }
.bsn-lead__eyebrow {
font-family: var(--f-mono); font-size: .75rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: var(--dawn-deep);
margin-bottom: 18px;
}
.bsn-lead__t {
font-size: 3rem; line-height: 1.08; margin: 0 0 20px; letter-spacing: -.03em;
}
.bsn-lead__t a { color: var(--text); }
.bsn-lead__t a::after { content: ""; position: absolute; inset: 0; }
.bsn-lead:hover .bsn-lead__t a { color: var(--sky); }
.bsn-lead__t a:hover { text-decoration: none; }
@media (max-width: 1180px) { .bsn-lead__t { font-size: 2.5rem; } }
@media (max-width: 900px) { .bsn-lead__t { font-size: 2.125rem; } }
@media (max-width: 620px) { .bsn-lead__t { font-size: 1.75rem; } }
.bsn-lead__dek {
margin: 0 0 26px; font-size: 1.0625rem; line-height: 1.66;
color: var(--muted); max-width: 54ch;
}
/* ---------- BYLINE ROW ----------
The desk is the DEFAULT byline and its avatar is the desk mark, not a face:
an editorial desk is an entity, so there is no individual to picture. A post
with a named writer swaps in an initials chip — see NAMED BYLINES below. */
.bsn-byline { display: flex; align-items: center; gap: 13px; }
.bsn-byline__av {
flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
display: grid; place-items: center;
background: var(--surface); border: 1px solid var(--border);
}
.bsn-byline__av svg { width: 26px; height: 26px; }
.bsn-byline__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bsn-byline__name {
font-family: var(--f-display); font-weight: 700; font-size: .9375rem;
color: var(--text); line-height: 1.2;
}
.bsn-byline__meta {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
font-family: var(--f-mono); font-size: .6875rem;
letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
/* ---------- THE BRIGHT START PATH band ---------- */
.bsn-pathband { background: var(--surface); border-block: 1px solid var(--border); padding-block: 38px 42px; }
.bsn-pathband__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.bsn-pathband__t { font-size: 1.75rem; margin: 8px 0 6px; letter-spacing: -.015em; }
.bsn-pathband__sub { color: var(--muted); font-size: 1rem; margin: 0; }
.bsn-pathband__steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px;
counter-reset: none;
}
@media (max-width: 1020px) { .bsn-pathband__steps { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 660px) { .bsn-pathband__steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 400px) { .bsn-pathband__steps { grid-template-columns: 1fr; } }
.bsn-pathband__steps li { margin: 0; }
.bsn-pathband__steps a {
display: flex; align-items: flex-start; gap: 11px; height: 100%;
background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
padding: 15px 15px 16px; color: var(--text);
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bsn-pathband__steps a:hover { border-color: var(--sky); background: var(--sky-tint); transform: translateY(-2px); text-decoration: none; }
.bsn-pathband__steps b {
flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
background: var(--dawn-tint); color: var(--dawn-deep);
display: grid; place-items: center;
font-family: var(--f-display); font-size: .8125rem; font-weight: 700;
}
.bsn-pathband__steps span {
font-family: var(--f-display); font-weight: 600; font-size: .9375rem; line-height: 1.32;
}
/* ---------- 17. NEWSLETTER ---------- */
.bsn-nl {
background:
radial-gradient(700px 300px at 15% 0%, var(--sky-tint) 0%, transparent 65%),
var(--surface);
border: 1px solid var(--border); border-radius: var(--r-xl);
padding: 40px 44px; position: relative; overflow: hidden;
}
@media (max-width: 620px) { .bsn-nl { padding: 28px 22px; border-radius: var(--r-lg); } }
.bsn-nl__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .bsn-nl__grid { grid-template-columns: 1fr; gap: 24px; } }
.bsn-nl__t { font-size: 1.75rem; margin: 0 0 10px; }
.bsn-nl__d { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0; }
.bsn-nl__form { display: flex; gap: 10px; flex-wrap: wrap; }
.bsn-nl__form input[type="email"] {
flex: 1; min-width: 220px; font-family: var(--f-body); font-size: 1rem;
padding: 14px 20px; border-radius: var(--r-pill);
border: 1.5px solid var(--border-strong); background: var(--card); color: var(--text);
}
.bsn-nl__form input[type="email"]:focus { border-color: var(--sky); outline: none; }
.bsn-nl__fine { font-size: .8125rem; color: var(--muted); margin: 12px 0 0; }
.bsn-nl__msg { margin-top: 12px; font-size: .875rem; font-weight: 600; }
.bsn-nl__msg[data-state="ok"] { color: var(--up); }
.bsn-nl__msg[data-state="err"] { color: var(--down); }
/* ---------- 18. FOOTER ---------- */
.bsn-ftr { background: var(--surface); border-top: 1px solid var(--border); margin-top: 72px; }
.bsn-ftr__main { display: grid; grid-template-columns: 1.45fr repeat(5, 1fr); gap: 34px 28px; padding-block: 52px 40px; align-items: start; }
@media (max-width: 1180px) { .bsn-ftr__main { grid-template-columns: repeat(4, 1fr); gap: 32px 28px; } }
@media (max-width: 860px) { .bsn-ftr__main { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .bsn-ftr__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .bsn-ftr__main { grid-template-columns: 1fr; } }
.bsn-ftr__brand { max-width: 340px; }
@media (max-width: 1180px) { .bsn-ftr__brand { grid-column: 1 / -1; max-width: none; } }
.bsn-ftr__tag { color: var(--muted); font-size: .9375rem; line-height: 1.62; margin: 14px 0 18px; }
.bsn-ftr__soc { display: flex; gap: 9px; margin-bottom: 20px; }
.bsn-ftr__soc a {
width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
background: var(--card); border: 1px solid var(--border); color: var(--muted);
transition: all var(--dur) var(--ease);
}
.bsn-ftr__soc a:hover { color: var(--sky); border-color: var(--sky); background: var(--sky-tint); }
.bsn-ftr__soc svg { width: 17px; height: 17px; }
.bsn-ftr h3 { font-family: var(--f-display); font-weight: 700; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.bsn-ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bsn-ftr li { margin: 0; }
.bsn-ftr__main a { color: var(--text); font-size: .9375rem; }
.bsn-ftr__main a:hover { color: var(--sky); }
/* ---------- 18a. COIN PAGE — converter, categories, related, guides ----------
Ported from the foxperiodical coin template, restyled in Daybreak. The
trader-dashboard panels (technical gauge, derivatives, on-chain, sentiment)
were deliberately not ported: this site has no data source for them, and
they read as investment signals on a beginner "not financial advice" page. */
.bsn-conv { margin-top: 44px; }
.bsn-conv__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 620px) { .bsn-conv__grid { grid-template-columns: 1fr; } }
.bsn-conv__box {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r); padding: 18px 20px 20px;
}
.bsn-conv__h {
font-family: var(--f-mono); font-size: .75rem; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
margin: 0 0 12px;
}
.bsn-conv__in {
width: 100%; font-family: var(--f-mono); font-size: 1.0625rem;
padding: 11px 13px; border: 1px solid var(--border-strong);
border-radius: var(--r-sm); background: var(--bg); color: var(--text);
}
.bsn-conv__in:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--sky); }
.bsn-conv__out {
display: block; margin-top: 12px;
font-family: var(--f-display); font-weight: 700; font-size: 1.375rem;
color: var(--sky-ink); overflow-wrap: anywhere;
}
.bsn-conv__note { font-size: .8125rem; color: var(--muted); margin: 14px 0 0; }
.bsn-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bsn-cats__i {
display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr); gap: 14px;
align-items: baseline; padding: 13px 16px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
}
@media (max-width: 560px) { .bsn-cats__i { grid-template-columns: 1fr; gap: 4px; } }
.bsn-cats__n { font-family: var(--f-display); font-weight: 700; font-size: .9375rem; color: var(--text); }
.bsn-cats__d { font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.bsn-related { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 820px) { .bsn-related { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .bsn-related { grid-template-columns: 1fr; } }
.bsn-related__i {
display: flex; align-items: center; gap: 12px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
padding: 13px 15px; color: var(--text);
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bsn-related__i:hover { border-color: var(--sky); background: var(--sky-tint); transform: translateY(-2px); text-decoration: none; }
.bsn-related__logo { flex: 0 0 30px; display: grid; place-items: center; }
.bsn-related__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bsn-related__n { font-family: var(--f-display); font-weight: 700; font-size: .9375rem; }
.bsn-related__s { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); }
.bsn-guides { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 620px) { .bsn-guides { grid-template-columns: 1fr; } }
.bsn-guides__i {
display: block; padding: 16px 18px; color: var(--text);
background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
border-left: 3px solid var(--c-learn);
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bsn-guides__i:hover { transform: translateY(-2px); border-color: var(--border-strong); border-left-color: var(--c-learn); text-decoration: none; }
.bsn-guides__t { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1rem; line-height: 1.35; margin-bottom: 5px; }
.bsn-guides__x { display: block; font-size: .875rem; line-height: 1.55; color: var(--muted); }
/* ---------- 18b. SITEMAP ---------- */
.bsn-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 34px 30px; align-items: start; }
.bsn-sm__b--wide { grid-column: 1 / -1; }
/* display:block matters — a grid container ignores `columns` entirely. */
.bsn-sm__b--wide .bsn-sm__l { display: block; columns: 5 158px; column-gap: 26px; }
.bsn-sm__b--wide .bsn-sm__l li { break-inside: avoid; margin-bottom: 8px; }
.bsn-sm__h {
font-family: var(--f-display); font-weight: 700; font-size: .8125rem;
letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
.bsn-sm__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bsn-sm__l li { margin: 0; }
.bsn-sm__l a { color: var(--text); font-size: .9375rem; line-height: 1.45; }
.bsn-sm__l a:hover { color: var(--sky); }
.bsn-ftr__ymyl {
border-top: 1px solid var(--border);
padding: 20px 0;
display: grid; grid-template-columns: auto minmax(0,1fr); gap: 13px; align-items: start;
}
.bsn-ftr__ymyl svg { width: 19px; height: 19px; color: var(--dawn-deep); margin-top: 2px; }
.bsn-ftr__ymyl p { margin: 0; font-size: .875rem; line-height: 1.62; color: var(--muted); }
.bsn-ftr__ymyl strong { color: var(--text); }
.bsn-ftr__bot {
border-top: 1px solid var(--border); padding: 18px 0 30px;
display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
font-size: .8125rem; color: var(--muted);
}
.bsn-ftr__bot a { color: var(--muted); }
.bsn-ftr__bot a:hover { color: var(--sky); }
/* ---------- 19. ARTICLE ---------- */
.bsn-crumbs { font-size: .8125rem; color: var(--muted); margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bsn-crumbs a { color: var(--muted); }
.bsn-crumbs a:hover { color: var(--sky); }
.bsn-crumbs__sep { opacity: .5; }
.bsn-art__head { margin-bottom: 30px; }
.bsn-art__h1 { font-size: 2.125rem; line-height: 1.22; margin: 12px 0 16px; letter-spacing: -.018em; }
@media (max-width: 620px) { .bsn-art__h1 { font-size: 1.75rem; } }
.bsn-art__stand { font-size: 1.1875rem; line-height: 1.62; color: var(--muted); margin: 0 0 22px; }
.bsn-art__byline { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding-block: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bsn-art__deskmark {
width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
background: var(--dawn-tint); border: 1.5px solid var(--dawn);
display: grid; place-items: center;
}
.bsn-art__deskmark svg { width: 22px; height: 22px; }
.bsn-art__who { font-family: var(--f-display); font-weight: 600; font-size: .9375rem; color: var(--text); }
.bsn-art__who a { color: var(--text); }
.bsn-art__when { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.bsn-art__when span + span::before { content: "·"; margin-right: 10px; opacity: .6; }
.bsn-art__cover { border-radius: var(--r-lg); overflow: hidden; margin: 26px 0; border: 1px solid var(--border); }
.bsn-art__cap { font-size: .8125rem; color: var(--muted); margin-top: 9px; line-height: 1.5; }
.bsn-art__body { font-size: 1.125rem; line-height: 1.78; }
.bsn-art__body > h2 { font-size: 1.5rem; margin-top: 2.1em; margin-bottom: .55em; scroll-margin-top: calc(var(--hdr-h) + 20px); }
.bsn-art__body > h3 { font-size: 1.1875rem; margin-top: 1.7em; margin-bottom: .5em; scroll-margin-top: calc(var(--hdr-h) + 20px); }
.bsn-art__body > h4 { font-size: 1.0625rem; margin-top: 1.5em; margin-bottom: .45em; }
.bsn-art__body img { border-radius: var(--r); margin-block: 26px; border: 1px solid var(--border); }
.bsn-art__body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--sky) 40%, transparent); }
.bsn-art__body a:hover { text-decoration-color: var(--sky); }
.bsn-art__body ul, .bsn-art__body ol { padding-left: 1.4em; }
.bsn-art__body li { margin-bottom: .6em; }
/* TOC */
.bsn-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 24px; margin: 28px 0; }
.bsn-toc__t { font-family: var(--f-display); font-weight: 700; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.bsn-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: grid; gap: 8px; }
.bsn-toc li { counter-increment: toc; margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; font-size: .9375rem; }
.bsn-toc li::before { content: counter(toc,decimal-leading-zero); font-family: var(--f-mono); font-size: .75rem; color: var(--dawn-deep); margin-top: 4px; }
.bsn-toc a { color: var(--text); }
.bsn-toc a:hover { color: var(--sky); }
.bsn-toc--l3 { padding-left: 18px; }
/* reading progress */
.bsn-rp { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--dawn), var(--sky)); z-index: 100; width: 0; transition: width 90ms linear; }
/* share rail */
.bsn-share { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 30px 0; padding-block: 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bsn-share__l { font-family: var(--f-display); font-weight: 600; font-size: .8125rem; color: var(--muted); margin-right: 4px; }
/* sources */
.bsn-sources { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 24px; margin: 30px 0; }
.bsn-sources__t { font-family: var(--f-display); font-weight: 700; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.bsn-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bsn-sources li { margin: 0; font-size: .9375rem; line-height: 1.55; }
/* author / desk card */
.bsn-deskcard { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 26px; margin: 34px 0; }
@media (max-width: 560px) { .bsn-deskcard { grid-template-columns: 1fr; } }
.bsn-deskcard__mark { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; background: var(--dawn-tint); border: 2px solid var(--dawn); display: grid; place-items: center; }
.bsn-deskcard__mark svg { width: 32px; height: 32px; }
.bsn-deskcard__t { font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; margin: 0 0 7px; }
.bsn-deskcard__b { font-size: .9375rem; line-height: 1.62; color: var(--muted); margin: 0 0 12px; }
/* FAQ accordion */
.bsn-faq { display: grid; gap: 10px; }
.bsn-faq__i { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: border-color var(--dur) var(--ease); }
.bsn-faq__i[open] { border-color: var(--sky); }
.bsn-faq__q {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 17px 22px; cursor: pointer; list-style: none;
font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; color: var(--text); line-height: 1.4;
}
.bsn-faq__q::-webkit-details-marker { display: none; }
.bsn-faq__q:hover { color: var(--sky); }
.bsn-faq__q svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--muted); transition: transform var(--dur) var(--ease); }
.bsn-faq__i[open] .bsn-faq__q svg { transform: rotate(45deg); color: var(--sky); }
.bsn-faq__a { padding: 0 22px 20px; font-size: 1rem; line-height: 1.68; color: var(--muted); }
.bsn-faq__a p:last-child { margin-bottom: 0; }
.bsn-faq__a a { color: var(--sky); }
/* ---------- 20. LISTS / ARCHIVES ---------- */
.bsn-hub {
background:
radial-gradient(800px 320px at 8% 0%, var(--sky-tint) 0%, transparent 62%),
var(--surface);
border-bottom: 1px solid var(--border); padding-block: 46px 42px;
}
.bsn-hub__t { font-size: 2.25rem; margin: 10px 0 12px; letter-spacing: -.02em; }
@media (max-width: 620px) { .bsn-hub__t { font-size: 1.75rem; } }
.bsn-hub__d { color: var(--muted); font-size: 1.0625rem; line-height: 1.62; max-width: 68ch; margin: 0; }
.bsn-hub__stats { display: flex; gap: 22px; margin-top: 20px; flex-wrap: wrap; }
.bsn-hub__stat { font-family: var(--f-mono); font-size: .8125rem; color: var(--muted); }
.bsn-hub__stat b { display: block; font-size: 1.375rem; color: var(--text); font-weight: 600; }
.bsn-list { display: grid; gap: 0; }
.bsn-list__i {
display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 22px;
align-items: start;
padding-block: 22px; border-bottom: 1px solid var(--border);
}
.bsn-list__i:first-child { padding-top: 0; }
.bsn-list__i:last-child { border-bottom: 0; }
@media (max-width: 720px) { .bsn-list__i { grid-template-columns: 132px minmax(0, 1fr); gap: 15px; } }
@media (max-width: 460px) { .bsn-list__i { grid-template-columns: 1fr; gap: 12px; } }
/* display:block is load-bearing — this is an , and aspect-ratio is ignored
on an inline box, which previously let the image stretch to row height. */
.bsn-list__media {
display: block; aspect-ratio: 16/10; overflow: hidden;
border-radius: var(--r); background: var(--surface); border: 1px solid var(--border);
}
.bsn-list__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.bsn-list__i:hover .bsn-list__media img { transform: scale(1.03); }
.bsn-list__c { min-width: 0; }
/* Chip left, meta pinned right: the body text sits at a readable measure, so
without something on the right edge each row looked cut off rather than
deliberately set. */
.bsn-list__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.bsn-list__meta {
display: flex; align-items: center; gap: 7px;
font-family: var(--f-mono); font-size: .75rem; color: var(--muted);
}
.bsn-list__t { font-size: 1.375rem; line-height: 1.3; margin: 0 0 7px; letter-spacing: -.005em; }
.bsn-list__t a { color: var(--text); }
.bsn-list__t a:hover { color: var(--sky); }
.bsn-list__ex { color: var(--muted); font-size: .9375rem; line-height: 1.62; margin: 0; max-width: 78ch; }
/* The plain-English line carries the row. Marked with a rule rather than a
filled panel — as a block of solid tint it outweighed the headline it is
meant to support, and a column of them turned the page into stripes. */
.bsn-list__pe {
margin: 0; max-width: 82ch;
padding-left: 13px; border-left: 3px solid var(--sky);
font-size: .9375rem; line-height: 1.62; color: var(--text);
}
.bsn-list__pe-k {
display: block;
font-family: var(--f-display); font-weight: 700; font-size: .6875rem;
letter-spacing: .07em; text-transform: uppercase; color: var(--sky-ink);
margin-bottom: 2px;
}
@media (max-width: 620px) { .bsn-list__t { font-size: 1.1875rem; } }
.bsn-pag { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 44px; flex-wrap: wrap; }
.bsn-pag a, .bsn-pag span {
min-width: 44px; height: 44px; padding-inline: 14px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill); border: 1.5px solid var(--border);
font-family: var(--f-display); font-weight: 600; font-size: .9375rem; color: var(--text);
transition: all var(--dur) var(--ease);
}
.bsn-pag a:hover { border-color: var(--sky); background: var(--sky-tint); color: var(--sky-ink); }
.bsn-pag .current { background: var(--sky); border-color: var(--sky); color: #fff; }
/* ---------- 21. RAIL WIDGETS ---------- */
.bsn-w { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; }
.bsn-w__t { font-family: var(--f-display); font-weight: 700; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.bsn-w__t svg { width: 15px; height: 15px; color: var(--dawn-deep); }
.bsn-w ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bsn-w li { margin: 0; font-size: .9375rem; line-height: 1.45; }
.bsn-w li a { color: var(--text); }
.bsn-w li a:hover { color: var(--sky); }
.bsn-w--dawn { background: var(--dawn-tint); border-color: color-mix(in srgb, var(--dawn) 40%, transparent); }
.bsn-w--sky { background: var(--sky-tint); border-color: color-mix(in srgb, var(--sky) 26%, transparent); }
.bsn-w__coin { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 9px; border-bottom: 1px solid var(--border); }
.bsn-w__coin:last-child { border-bottom: 0; }
.bsn-w__coinL { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bsn-w__coinS { font-family: var(--f-mono); font-weight: 600; font-size: .8125rem; }
.bsn-w__coinN { font-size: .8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- 22. COIN PAGE ---------- */
.bsn-coinhero { background: radial-gradient(700px 300px at 10% 0%, var(--sky-tint) 0%, transparent 60%), var(--surface); border-bottom: 1px solid var(--border); padding-block: 40px; }
.bsn-coinhero__grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 40px; align-items: start; }
@media (max-width: 980px) { .bsn-coinhero__grid { grid-template-columns: 1fr; gap: 26px; } }
.bsn-coinhero__id { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; }
.bsn-coinhero__logo { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); padding: 7px; }
.bsn-coinhero__t { font-size: 2rem; margin: 0; letter-spacing: -.02em; }
.bsn-coinhero__sym { font-family: var(--f-mono); font-size: .875rem; color: var(--muted); text-transform: uppercase; }
.bsn-coinhero__price { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 2.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
@media (max-width: 620px) { .bsn-coinhero__price { font-size: 2rem; } }
.bsn-coinhero__row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.bsn-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.bsn-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; }
.bsn-stat__k { font-family: var(--f-display); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.bsn-stat__v { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 1.0625rem; font-weight: 600; }
.bsn-chart { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; }
.bsn-chart__cv { width: 100%; height: 300px; display: block; }
.bsn-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.bsn-chips button {
font-family: var(--f-mono); font-size: .75rem; font-weight: 600;
padding: 7px 14px; border-radius: var(--r-pill); cursor: pointer;
background: var(--bg); border: 1.5px solid var(--border); color: var(--muted);
transition: all var(--dur) var(--ease); min-height: 36px;
}
.bsn-chips button:hover { border-color: var(--sky); color: var(--sky); }
.bsn-chips button[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: #fff; }
/* markets table */
.bsn-mkt { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.bsn-mkt table { margin: 0; }
.bsn-mkt th { background: var(--surface); font-size: .6875rem; }
.bsn-mkt td { font-size: .9375rem; }
.bsn-mkt tbody tr { transition: background var(--dur) var(--ease); }
.bsn-mkt tbody tr:hover { background: var(--sky-tint); }
.bsn-mkt tbody tr:last-child td { border-bottom: 0; }
.bsn-mkt__c { display: flex; align-items: center; gap: 10px; }
.bsn-mkt__c img { width: 26px; height: 26px; border-radius: 50%; }
.bsn-mkt__n { font-weight: 600; color: var(--text); }
.bsn-mkt__s { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); text-transform: uppercase; }
.bsn-mkt__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* fear & greed */
.bsn-fg { text-align: center; }
.bsn-fg__gauge { width: 100%; max-width: 240px; margin-inline: auto; }
.bsn-fg__v { font-family: var(--f-mono); font-size: 2.25rem; font-weight: 600; line-height: 1; }
.bsn-fg__l { font-family: var(--f-display); font-weight: 600; font-size: 1rem; margin-top: 5px; }
.bsn-fg__d { font-size: .875rem; color: var(--muted); line-height: 1.55; margin-top: 10px; }
/* ---------- 23. TOOLS ---------- */
.bsn-tool { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px 32px; box-shadow: var(--sh); }
@media (max-width: 620px) { .bsn-tool { padding: 22px 20px; border-radius: var(--r-lg); } }
.bsn-field { display: grid; gap: 7px; margin-bottom: 18px; }
.bsn-field label { font-family: var(--f-display); font-weight: 600; font-size: .875rem; color: var(--text); }
.bsn-field__hint { font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.bsn-input, .bsn-select {
font-family: var(--f-body); font-size: 1rem; width: 100%;
padding: 13px 16px; min-height: 48px;
border-radius: var(--r); border: 1.5px solid var(--border-strong);
background: var(--bg); color: var(--text);
transition: border-color var(--dur) var(--ease);
}
.bsn-input:focus, .bsn-select:focus { border-color: var(--sky); outline: none; }
.bsn-input.bsn-num { font-family: var(--f-mono); }
.bsn-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 620px) { .bsn-row { grid-template-columns: 1fr; } }
.bsn-out { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; margin-top: 22px; }
.bsn-out__big { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 600; line-height: 1.15; margin-bottom: 6px; }
.bsn-out__lbl { font-family: var(--f-display); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bsn-out__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
@media (max-width: 620px) { .bsn-out__grid { grid-template-columns: 1fr; gap: 12px; } }
.bsn-out__plain { margin-top: 16px; font-size: .9375rem; line-height: 1.62; color: var(--text); background: var(--sky-tint); border-radius: var(--r); padding: 13px 16px; }
/* checklist */
.bsn-check { display: grid; gap: 12px; }
.bsn-check__i {
display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: start;
background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-lg);
padding: 16px 20px; cursor: pointer; transition: all var(--dur) var(--ease);
}
.bsn-check__i:hover { border-color: var(--sky); }
.bsn-check__i[data-on="1"] { border-color: var(--up); background: var(--up-tint); }
.bsn-check__box {
width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; margin-top: 2px;
border: 2px solid var(--border-strong); background: var(--bg);
display: grid; place-items: center; transition: all var(--dur) var(--ease);
}
.bsn-check__i[data-on="1"] .bsn-check__box { background: var(--up); border-color: var(--up); }
.bsn-check__box svg { width: 15px; height: 15px; color: #fff; opacity: 0; transition: opacity var(--dur) var(--ease); }
.bsn-check__i[data-on="1"] .bsn-check__box svg { opacity: 1; }
.bsn-check__t { font-family: var(--f-display); font-weight: 600; font-size: 1rem; margin: 0 0 4px; }
.bsn-check__d { font-size: .875rem; color: var(--muted); line-height: 1.55; margin: 0; }
/* ---------- 24. GLOSSARY ---------- */
.bsn-alpha { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.bsn-alpha a, .bsn-alpha span {
width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
font-family: var(--f-mono); font-weight: 600; font-size: .875rem;
border: 1.5px solid var(--border); color: var(--text); transition: all var(--dur) var(--ease);
}
.bsn-alpha a:hover { background: var(--sky); border-color: var(--sky); color: #fff; }
.bsn-alpha span { color: var(--border-strong); }
.bsn-terms { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 860px) { .bsn-terms { grid-template-columns: 1fr; } }
.bsn-term { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 17px 20px; transition: all var(--dur) var(--ease); }
.bsn-term:hover { border-color: var(--sky); transform: translateY(-1px); box-shadow: var(--sh); }
.bsn-term__t { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; margin: 0 0 5px; }
.bsn-term__t a { color: var(--text); }
.bsn-term:hover .bsn-term__t a { color: var(--sky); }
.bsn-term__d { font-size: .875rem; color: var(--muted); line-height: 1.55; margin: 0; }
/* ---------- 25. CTA GRID / MISC ---------- */
.bsn-ctagrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 860px) { .bsn-ctagrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .bsn-ctagrid { grid-template-columns: 1fr; } }
.bsn-ctagrid .bsn-btn { width: 100%; }
.bsn-empty { text-align: center; padding: 60px 20px; }
.bsn-empty__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--dawn-tint); display: grid; place-items: center; color: var(--dawn-deep); }
.bsn-empty__icon svg { width: 30px; height: 30px; }
.bsn-empty h2 { font-size: 1.5rem; margin-bottom: 10px; }
.bsn-empty p { color: var(--muted); max-width: 46ch; margin-inline: auto; }
.bsn-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.bsn-filters a {
font-family: var(--f-display); font-weight: 600; font-size: .875rem;
padding: 9px 17px; border-radius: var(--r-pill); min-height: 40px;
display: inline-flex; align-items: center;
border: 1.5px solid var(--border); color: var(--text); transition: all var(--dur) var(--ease);
}
.bsn-filters a:hover { border-color: var(--sky); color: var(--sky); }
.bsn-filters a[aria-current="true"] { background: var(--sky); border-color: var(--sky); color: #fff; }
/* long-form homepage SEO block */
.bsn-lf { border-top: 1px solid var(--border); padding-top: 52px; }
.bsn-lf__toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px 30px; margin-bottom: 44px; }
.bsn-lf__toc h2 { font-size: 1.125rem; margin: 0 0 16px; }
.bsn-lf__toc ol { columns: 2; column-gap: 34px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 760px) { .bsn-lf__toc ol { columns: 1; } }
.bsn-lf__toc li { break-inside: avoid; margin-bottom: 9px; font-size: .9375rem; }
.bsn-lf__toc a { color: var(--text); }
.bsn-lf__toc a:hover { color: var(--sky); }
.bsn-lf section { margin-bottom: 44px; scroll-margin-top: calc(var(--hdr-h) + 24px); }
.bsn-lf h2 { font-size: 1.75rem; margin-bottom: .6em; }
.bsn-lf h3 { font-size: 1.1875rem; margin-top: 1.6em; }
.bsn-lf p, .bsn-lf li { font-size: 1.0625rem; line-height: 1.75; }
.bsn-lf a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--sky) 40%, transparent); }
/* print */
@media print {
.bsn-hdr, .bsn-topbar, .bsn-ftr, .bsn-rail, .bsn-share, .bsn-nl, .bsn-rp { display: none !important; }
body { background: #fff; color: #000; font-size: 12pt; }
.bsn-shell { grid-template-columns: 1fr; }
}
/* ---------- 21. LANGUAGE SWITCHER ----------
A rather than a JS dropdown: it opens, closes on Escape and is
keyboard-operable before any script has loaded. */
.bsn-lang { position: relative; }
.bsn-lang__btn {
display: inline-flex; align-items: center; gap: 6px;
height: 38px; padding: 0 11px;
border: 1px solid var(--border); border-radius: var(--r-pill);
background: var(--card); color: var(--text);
font-family: var(--f-mono); font-size: .75rem; font-weight: 600; letter-spacing: .04em;
cursor: pointer; list-style: none;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bsn-lang__btn::-webkit-details-marker { display: none; }
.bsn-lang__btn:hover { border-color: var(--sky); background: var(--sky-tint); }
.bsn-lang[open] > .bsn-lang__btn { border-color: var(--sky); background: var(--sky-tint); }
.bsn-lang__btn svg { width: 16px; height: 16px; color: var(--muted); }
.bsn-lang__btn svg:last-child { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
.bsn-lang[open] > .bsn-lang__btn svg:last-child { transform: rotate(180deg); }
.bsn-lang__menu {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
min-width: 186px; padding: 6px;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r); box-shadow: var(--sh-lg);
}
.bsn-lang__i {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 11px; border-radius: var(--r-sm);
font-size: .9375rem; color: var(--text);
}
.bsn-lang__i:hover { background: var(--surface); text-decoration: none; }
.bsn-lang__i.is-current { color: var(--sky-ink); font-weight: 600; }
.bsn-lang__i svg { width: 15px; height: 15px; color: var(--up); flex: 0 0 15px; }
/* In the drawer the menu opens inline rather than floating over the panel. */
.bsn-lang--drawer .bsn-lang__menu { position: static; box-shadow: none; margin-top: 8px; min-width: 0; }
/* The header switcher is redundant on mobile — the drawer carries one. */
@media (max-width: 980px) { .bsn-lang--header { display: none; } }
/* ---- Language flags -------------------------------------------------- */
/* border-radius on the