.panel {
background: var(--panel);
border: var(--border);
border-radius: var(--radius);
padding: var(--space-5);
}
.panel--flush {
padding: 0;
overflow: hidden;
}
.cards {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
list-style: none;
padding: 0;
}
.cards li {
margin: 0;
}
.card {
display: flex;
flex-direction: column;
gap: var(--space-3);
height: 100%;
padding: var(--space-5);
background: var(--panel);
border: var(--border);
border-radius: var(--radius);
transition: border-color var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.card:hover,
.card:focus-within {
border-color: var(--line-strong);
background: var(--panel-2);
}
.card__title {
font-family: var(--font-display);
font-size: var(--step-1);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
overflow-wrap: break-word;
}
.card__title a {
color: var(--text);
text-decoration: none;
}
.card__title a:hover {
color: var(--accent-ink);
}
.card__dek {
color: var(--text-2);
font-size: var(--step-00);
line-height: 1.6;
margin: 0;
}
.card__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
margin-block-start: auto;
padding-block-start: var(--space-3);
font-size: var(--step-000);
color: var(--text-2);
border-block-start: var(--border);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.15em 0.55em;
border-radius: 2px;
font-family: var(--font-mono);
font-size: var(--step-000);
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
background: var(--panel-2);
color: var(--text-2);
border: 1px solid var(--line);
}
.badge--money {
background: var(--accent-soft);
color: var(--accent-ink);
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.badge--danger {
background: var(--danger-soft);
color: var(--danger-ink);
border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.badge--flow {
background: var(--cool-soft);
color: var(--cool-ink);
border-color: color-mix(in srgb, var(--cool) 45%, transparent);
}
.keyfacts {
max-width: var(--measure-wide);
padding: var(--space-5);
background: var(--panel);
border: var(--border);
border-inline-start: 3px solid var(--accent);
border-radius: var(--radius);
}
.keyfacts__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
margin-block-end: var(--space-4);
}
.keyfacts__title {
font-family: var(--font-display);
font-size: var(--step-000);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--eyebrow);
}
.keyfacts__list {
display: grid;
gap: var(--space-5);
margin: 0;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.kf {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.kf__value {
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--accent-ink);
overflow-wrap: break-word;
}
.kf--lg .kf__value {
font-size: var(--step-2);
line-height: 1.15;
letter-spacing: -0.01em;
}
.kf--sm .kf__value {
font-family: var(--font-body);
font-size: var(--step-1);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0;
}
.kf--flow .kf__value {
color: var(--cool-ink);
}
.kf--danger .kf__value {
color: var(--danger-ink);
}
.kf--plain .kf__value {
color: var(--text);
}
.kf__label {
font-size: var(--step-00);
line-height: 1.5;
color: var(--text-2);
margin: 0;
}
.kf__source {
font-size: var(--step-000);
color: var(--text-2);
margin: 0;
}
.kf__source a {
color: var(--text-2);
}
.kf__source a:hover {
color: var(--accent-ink);
}
.stats {
display: grid;
gap: 1px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
background: var(--line);
border: var(--border);
border-radius: var(--radius);
overflow: hidden;
list-style: none;
padding: 0;
}
.stats li {
margin: 0;
padding: var(--space-4) var(--space-5);
background: var(--panel);
}
.stat__value {
display: block;
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--accent-ink);
}
.stat__label {
display: block;
margin-block-start: var(--space-1);
font-size: var(--step-000);
letter-spacing: 0.02em;
color: var(--text-2);
}
.identifier {
display: block;
max-width: 100%;
overflow-x: auto;
padding: var(--space-4) var(--space-5);
background: var(--panel-2);
border: var(--border);
border-inline-start: 3px solid var(--danger);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: var(--step-1);
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
color: var(--text);
-webkit-overflow-scrolling: touch;
}
.identifier__label {
display: block;
margin-block-end: var(--space-2);
font-family: var(--font-body);
font-size: var(--step-000);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--danger-ink);
}
.spokes {
max-width: var(--measure-wide);
padding: var(--space-5);
background: var(--panel);
border: var(--border);
border-radius: var(--radius);
}
.spokes__title {
font-family: var(--font-display);
font-size: var(--step-000);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--eyebrow);
margin-block-end: var(--space-4);
}
.spokes ul {
display: grid;
gap: var(--space-2);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
padding: 0;
list-style: none;
}
.spokes li {
margin: 0;
min-width: 0;
}
.spokes li a {
display: flex;
align-items: baseline;
gap: var(--space-3);
padding: var(--space-2) 0;
color: var(--text);
text-decoration: none;
border-block-end: 1px solid transparent;
}
.spokes li a:hover {
color: var(--accent-ink);
border-block-end-color: var(--line);
}
.spokes li code {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.spokes li .badge {
flex: 0 0 auto;
}
.pillar-link {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2) var(--space-3);
padding: var(--space-4) var(--space-5);
background: var(--accent-soft);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: var(--radius);
font-size: var(--step-00);
}
.pillar-link strong {
font-weight: 600;
}
.embed {
position: relative;
max-width: var(--measure-wide);
aspect-ratio: 16 / 9;
background: var(--panel-2);
border: var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.embed img,
.embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.embed__btn {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
width: 100%;
padding: var(--space-6);
background: color-mix(in srgb, var(--brand-bg) 45%, transparent);
border: 0;
color: #eaecef;
cursor: pointer;
text-align: center;
}
.embed__btn:hover {
background: color-mix(in srgb, var(--brand-bg) 28%, transparent);
}
.embed__btn:hover .embed__play {
background: color-mix(in srgb, var(--accent) 85%, #fff);
}
.embed__play {
display: grid;
place-items: center;
width: 4.5rem;
height: 3.1rem;
background: var(--accent);
color: var(--knockout);
border-radius: 0;
}
.embed__play svg {
width: 1.5rem;
height: 1.5rem;
fill: currentColor;
}
.embed__label {
font-family: var(--font-display);
font-size: var(--step-00);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-shadow: 0 1px 3px rgb(11 14 20 / 0.9);
}
.embed__poster--blank {
position: absolute;
inset: 0;
display: block;
background: var(--brand-panel);
}
.embed__poster--blank .wordmark {
position: absolute;
inset-block-end: clamp(var(--space-4), 4%, var(--space-6));
inset-inline-start: clamp(var(--space-4), 4%, var(--space-6));
color: var(--brand-ink);
opacity: 0.8;
}
.embed:has(.embed__poster--blank) .embed__btn {
background: transparent;
}
.embed:has(.embed__poster--blank) .embed__btn:hover {
background: color-mix(in srgb, var(--brand-ink) 6%, transparent);
}
.table-wrap {
max-width: 100%;
overflow-x: auto;
border: var(--border);
border-radius: var(--radius);
-webkit-overflow-scrolling: touch;
}
table {
width: 100%;
border-collapse: collapse;
font-size: var(--step-00);
}
caption {
padding: var(--space-3) var(--space-4);
text-align: start;
font-size: var(--step-000);
color: var(--text-2);
border-block-end: var(--border);
}
th,
td {
padding: var(--space-3) var(--space-4);
text-align: start;
vertical-align: top;
border-block-start: var(--border);
}
thead th {
border-block-start: 0;
background: var(--panel-2);
font-family: var(--font-display);
font-size: var(--step-000);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
white-space: nowrap;
}
td.num,
th.num {
text-align: end;
}
tbody tr:hover {
background: var(--panel);
}
pre {
max-width: 100%;
overflow-x: auto;
padding: var(--space-4);
background: var(--panel);
border: var(--border);
border-radius: var(--radius);
line-height: 1.55;
-webkit-overflow-scrolling: touch;
}
pre code {
font-size: var(--step-00);
}
:not(pre) > code {
padding: 0.12em 0.35em;
background: var(--panel-2);
border: 1px solid var(--line);
border-radius: 2px;
}
blockquote {
padding-inline-start: var(--space-5);
border-inline-start: 3px solid var(--line-strong);
color: var(--text-2);
font-style: italic;
}
.note {
padding: var(--space-4) var(--space-5);
background: var(--panel);
border: var(--border);
border-inline-start: 3px solid var(--cool);
border-radius: var(--radius);
font-size: var(--step-00);
}
.note--danger {
border-inline-start-color: var(--danger);
}
.note--money {
border-inline-start-color: var(--accent);
}
.note__title {
display: block;
margin-block-end: var(--space-2);
font-weight: 600;
color: var(--text);
}
figure {
max-width: var(--measure-wide);
}
figure img {
width: 100%;
border: var(--border);
border-radius: var(--radius);
background: var(--panel-2);
}
figcaption {
margin-block-start: var(--space-3);
font-size: var(--step-00);
color: var(--text-2);
}
.faq {
max-width: var(--measure);
}
.faq details {
border-block-end: var(--border);
}
.faq summary {
display: flex;
align-items: baseline;
gap: var(--space-3);
padding-block: var(--space-4);
font-family: var(--font-display);
font-size: var(--step-1);
font-weight: 600;
line-height: 1.3;
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::before {
content: "+";
flex: 0 0 auto;
color: var(--accent);
font-weight: 700;
}
.faq details[open] summary::before {
content: "\2212";
}
.faq details > *:not(summary) {
padding-block-end: var(--space-4);
color: var(--text-2);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border: 1px solid transparent;
border-radius: 0;
background: var(--accent);
color: var(--knockout);
font-family: var(--font-display);
font-size: var(--step-0);
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
cursor: pointer;
transition: background-color var(--dur) var(--ease);
}
.btn:hover {
background: color-mix(in srgb, var(--accent) 85%, #fff);
}
.btn--ghost {
background: transparent;
border-color: var(--line-strong);
color: var(--text);
}
.btn--ghost:hover {
background: var(--panel-2);
border-color: var(--text-2);
}
.form {
max-width: var(--measure);
}
.field + .field {
margin-block-start: var(--space-5);
}
.field label {
display: block;
margin-block-end: var(--space-2);
font-weight: 600;
font-size: var(--step-00);
}
.field .hint {
display: block;
margin-block-end: var(--space-2);
font-size: var(--step-00);
color: var(--text-2);
}
.field input,
.field select,
.field textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--panel);
border: var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: var(--step-0);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--accent);
}
.field textarea {
min-height: 9rem;
resize: vertical;
line-height: 1.6;
}
.field--required label::after {
content: " *";
color: var(--danger-ink);
}
.hp {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.footer {
border-block-start: var(--border);
padding-block: var(--space-7);
font-size: var(--step-00);
color: var(--text-2);
}
.footer__grid {
display: grid;
gap: var(--space-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.footer h2 {
font-family: var(--font-display);
font-size: var(--step-000);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--eyebrow);
margin-block-end: var(--space-3);
}
.footer ul {
list-style: none;
padding: 0;
}
.footer li + li {
margin-block-start: var(--space-2);
}
.footer a {
color: var(--text-2);
text-decoration: none;
}
.footer a:hover {
color: var(--text);
text-decoration: underline;
}
.footer__legal {
margin-block-start: var(--space-7);
padding-block-start: var(--space-5);
border-block-start: var(--border);
max-width: var(--measure);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.stack-6 > * + * {
margin-block-start: var(--space-6);
}
.stack-7 > * + * {
margin-block-start: var(--space-7);
}
.text-2 {
color: var(--text-2);
}
.mute-lg {
font-size: max(2rem, var(--step-3));
font-weight: 500;
color: var(--text-3);
}
@media print {
.masthead,
.footer,
.embed,
.themetoggle,
.skip {
display: none !important;
}
body {
background: #fff;
color: #000;
}
a::after {
content: " (" attr(href) ")";
font-size: 0.85em;
}
}
.card__media {
margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--panel-2);
border-start-start-radius: var(--radius);
border-start-end-radius: var(--radius);
}
.card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.subscribe {
margin-block-start: var(--space-8);
padding: var(--space-6);
background: var(--panel);
border: var(--border);
border-radius: var(--radius);
border-inline-start: 3px solid var(--accent);
}
.subscribe h2 {
font-family: var(--font-display);
font-size: var(--step-2);
margin: 0 0 var(--space-3);
}
.subscribe p { max-width: var(--measure); }