*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-body);
}
h1, h2, h3, h4 {
hyphens: auto;
overflow-wrap: break-word;
}
::placeholder { color: var(--c-text-muted); opacity: 1; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
:focus-visible {
outline: 2px solid var(--c-focus);
outline-offset: 2px;
}
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: var(--gutter);
top: -10rem;
z-index: 100;
padding: var(--space-2) var(--space-4);
background: var(--c-text);
color: var(--c-bg);
font-family: var(--font-ui);
font-weight: 700;
text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }
.list-reset { list-style: none; margin: 0; padding: 0; }
.container {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.page-main { padding-block: var(--space-5) var(--space-8); }
.page-main:focus { outline: none; }
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-7);
}
.layout + .layout { margin-top: var(--space-7); }
@media (min-width: 64em) {
.layout {
grid-template-columns: minmax(0, 1fr) var(--aside-width);
column-gap: var(--column-gap);
}
.layout__aside {
border-left: var(--rule);
padding-left: var(--column-gap);
}
}
.stack > * + * { margin-top: var(--space-7); }
.site-header__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
padding-block: var(--space-3);
}
.wordmark {
font-family: var(--font-head);
font-size: var(--fs-wordmark);
font-weight: 900;
font-stretch: 78%;
letter-spacing: -0.01em;
line-height: 1;
text-decoration: none;
}
.site-header__date {
display: none;
padding-left: var(--space-4);
border-left: var(--rule);
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.site-header__tools {
display: flex;
align-items: center;
gap: var(--space-1);
margin-left: auto;
}
.icon-btn {
display: inline-grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius);
background: none;
color: inherit;
cursor: pointer;
}
.icon-btn:hover { background: var(--c-bg-subtle); }
.icon-btn svg, .account svg { width: 1.25rem; height: 1.25rem; }
.theme-toggle[aria-pressed="true"] .icon-moon,
.theme-toggle:not([aria-pressed="true"]) .icon-sun { display: none; }
.account {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 2.5rem;
padding: 0 var(--space-2);
border-radius: var(--radius);
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 600;
text-decoration: none;
}
.account:hover { background: var(--c-bg-subtle); }
.account__text {
position: absolute;
width: 1px; height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.search {
display: flex;
order: 3;
flex: 1 0 100%;
}
.js .search { display: none; }
.js .search.is-open { display: flex; }
.search__input {
flex: 1;
min-width: 0;
height: 2.5rem;
padding: 0 var(--space-3);
border: 1px solid var(--c-border-input);
border-right: 0;
border-radius: var(--radius) 0 0 var(--radius);
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-ui);
font-size: 1rem;
}
.search__input::placeholder { color: var(--c-text-muted); opacity: 1; }
.search__input:focus-visible { outline-offset: -2px; }
.search__submit {
border: 1px solid var(--c-border-input);
border-radius: 0 var(--radius) var(--radius) 0;
}
@media (min-width: 48em) {
.account__text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
.search-toggle { display: none; }
.search,
.js .search {
display: flex;
order: 0;
flex: 0 1 18rem;
margin-left: auto;
}
.site-header__tools { margin-left: 0; }
}
@media (min-width: 64em) {
.site-header__date { display: block; }
}
.ressort-nav {
border-top: var(--rule-strong);
border-bottom: var(--rule);
}
.ressort-nav__list {
display: flex;
overflow-x: auto;
scrollbar-width: none;
}
.ressort-nav__list::-webkit-scrollbar { display: none; }
.ressort-nav__list li:first-child a { padding-left: 0; }
.ressort-nav a {
display: block;
padding: var(--space-3);
border-bottom: 3px solid transparent;
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 650;
white-space: nowrap;
text-decoration: none;
}
.ressort-nav a:hover { border-bottom-color: var(--c-text); }
.ressort-nav a[aria-current="page"] { border-bottom-color: var(--c-accent); }
.ressort-nav a:focus-visible { outline-offset: -3px; }
.breaking {
background: var(--c-breaking-bg);
color: var(--c-breaking-fg);
}
.breaking__inner {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-1) var(--space-3);
padding-block: var(--space-3);
}
.breaking__label {
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.breaking__link {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-h-xs);
font-weight: 700;
line-height: var(--lh-snug);
text-decoration: none;
}
.breaking__link:hover { text-decoration: underline; }
.breaking__time {
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-variant-numeric: tabular-nums;
}
.breaking :focus-visible { outline-color: currentColor; }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
padding-top: var(--space-2);
border-top: var(--rule-strong);
}
.section-head__title {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-section);
font-weight: 800;
line-height: var(--lh-snug);
}
.section-head__link,
.more-link {
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 650;
color: var(--c-accent);
text-decoration: none;
white-space: nowrap;
}
.section-head__link:hover,
.more-link:hover { text-decoration: underline; }
.more-link { display: inline-block; margin-top: var(--space-3); }
.kicker {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-2);
margin-bottom: var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1.2;
color: var(--c-accent);
}
.label {
display: inline-block;
padding: 0.0625rem 0.375rem;
border: 1px solid var(--c-text);
border-radius: var(--radius);
color: var(--c-text);
font-family: var(--font-ui);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.4;
text-transform: uppercase;
}
.label--rumor { border-style: dashed; }
.label--leak { border-color: var(--c-label-fill); background: var(--c-label-fill); }
.label--opinion { border-color: var(--c-text); background: var(--c-text); color: var(--c-bg); }
.meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-xs);
line-height: 1.4;
color: var(--c-text-muted);
font-variant-numeric: tabular-nums;
}
.meta > * + *::before {
content: "·";
content: "·" / "";
margin-right: var(--space-2);
}
.meta__ressort { font-weight: 650; color: var(--c-text); }
.platforms {
display: inline-flex;
flex-wrap: wrap;
gap: var(--space-1);
list-style: none;
margin: 0;
padding: 0;
}
.platforms li {
padding: 0 0.3125rem;
border: 1px solid var(--c-border);
border-radius: var(--radius);
font-size: var(--fs-2xs);
font-weight: 600;
color: var(--c-text-soft);
white-space: nowrap;
}
.meta .platforms::before { align-self: center; }
.media {
position: relative;
margin: 0;
}
.media img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--c-placeholder);
}
.score {
display: inline-grid;
place-items: center;
min-width: 2.75rem;
height: 2.75rem;
padding: 0 var(--space-1);
border-radius: var(--radius);
background: var(--c-score-bg);
color: var(--c-score-fg);
font-family: var(--font-head);
font-size: 1.25rem;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.score--sm { min-width: 2.25rem; height: 2.25rem; font-size: 1.0625rem; }
.media .score {
position: absolute;
left: 0;
bottom: 0;
border-radius: 0;
}
.teaser { position: relative; }
.teaser > .media { margin-bottom: var(--space-3); }
.teaser__title {
margin-bottom: var(--space-2);
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-h-sm);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: -0.005em;
text-wrap: balance;
}
.teaser__link { text-decoration: none; }
.teaser__link::after {
content: "";
position: absolute;
inset: 0;
}
.teaser:hover .teaser__link {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.14em;
}
.teaser__text {
margin-bottom: var(--space-2);
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--c-text-soft);
}
.teaser--lead .teaser__title {
font-size: var(--fs-h-lg);
font-weight: 800;
line-height: var(--lh-tight);
letter-spacing: -0.012em;
}
.teaser--lead .teaser__text {
max-width: 62ch;
font-size: var(--fs-md);
}
.teaser__related {
position: relative;
z-index: 1;
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: var(--rule);
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 600;
}
.teaser__related li {
position: relative;
padding-left: var(--space-4);
}
.teaser__related li + li { margin-top: var(--space-1); }
.teaser__related li::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 0.375rem;
height: 0.375rem;
background: var(--c-accent);
}
.teaser__related a { text-decoration: none; }
.teaser__related a:hover { text-decoration: underline; }
.teaser--medium .teaser__title { font-size: var(--fs-h-md); }
.teaser--medium .teaser__text { font-size: 1rem; }
@media (min-width: 48em) {
.teaser--horizontal {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-5);
align-items: start;
}
.teaser--horizontal > .media { margin-bottom: 0; }
}
.teaser--small {
display: grid;
grid-template-columns: minmax(0, 1fr) 6.5rem;
gap: var(--space-4);
align-items: start;
}
.teaser--small > .media { order: 2; margin: 0; }
.teaser--small .teaser__title { font-size: var(--fs-h-xs); }
@media (min-width: 48em) {
.teaser--small { grid-template-columns: minmax(0, 1fr) 9rem; }
}
.teaser--compact .teaser__title { font-size: var(--fs-h-sm); }
.teaser--score {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-4);
align-items: start;
}
.teaser--score .teaser__title { font-size: var(--fs-h-xs); }
.teaser--opinion .teaser__title {
font-family: var(--font-body);
font-stretch: normal;
font-style: italic;
font-weight: 650;
letter-spacing: 0;
}
.teaser__byline {
margin-bottom: var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-soft);
}
.teaser__byline strong { font-weight: 700; color: var(--c-text); }
.rule-list > * + * {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: var(--rule);
}
.cols {
display: grid;
gap: var(--space-5);
}
.cols > * + * {
padding-top: var(--space-5);
border-top: var(--rule);
}
@media (min-width: 48em) {
.cols { column-gap: var(--space-5); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.cols > * + * {
padding-top: 0;
border-top: 0;
padding-left: var(--space-5);
border-left: var(--rule);
}
}
.top-group > :not(.visually-hidden) + * {
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: var(--rule);
}
.latest__item {
display: grid;
grid-template-columns: 3.25rem minmax(0, 1fr);
gap: var(--space-3);
padding-block: var(--space-3);
border-bottom: var(--rule);
}
.latest__item:first-child { padding-top: 0; }
.latest__time {
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1.5;
font-variant-numeric: tabular-nums;
}
.latest__day {
display: block;
font-weight: 500;
color: var(--c-text-muted);
}
.latest__ressort {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-bottom: 0.125rem;
font-family: var(--font-ui);
font-size: var(--fs-2xs);
font-weight: 650;
color: var(--c-text-muted);
}
.latest__ressort--breaking { color: var(--c-accent); text-transform: uppercase; letter-spacing: 0.06em; }
.latest__link {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: 1rem;
font-weight: 650;
line-height: var(--lh-snug);
text-decoration: none;
}
.latest__link:hover { text-decoration: underline; }
.ranklist { counter-reset: rank; }
.ranklist__item {
display: grid;
grid-template-columns: 1.75rem minmax(0, 1fr);
gap: var(--space-3);
padding-block: var(--space-3);
border-bottom: var(--rule);
counter-increment: rank;
}
.ranklist__item:first-child { padding-top: 0; }
.ranklist__item::before {
content: counter(rank);
font-family: var(--font-head);
font-size: 1.75rem;
font-weight: 800;
line-height: 1;
color: var(--c-accent);
font-variant-numeric: tabular-nums;
}
.ranklist__ressort {
display: block;
font-family: var(--font-ui);
font-size: var(--fs-2xs);
font-weight: 650;
color: var(--c-text-muted);
}
.ranklist__link {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: 1rem;
font-weight: 700;
line-height: var(--lh-snug);
text-decoration: none;
}
.ranklist__link:hover { text-decoration: underline; }
.calendar__day {
display: grid;
grid-template-columns: 4.25rem minmax(0, 1fr);
gap: var(--space-3);
padding-block: var(--space-3);
border-bottom: var(--rule);
}
.calendar__day:first-child { padding-top: 0; }
.calendar__date {
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.calendar__rel {
display: block;
font-weight: 500;
color: var(--c-accent);
}
.calendar__game + .calendar__game { margin-top: var(--space-2); }
.calendar__title {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: 1rem;
font-weight: 700;
line-height: var(--lh-snug);
text-decoration: none;
}
.calendar__title:hover { text-decoration: underline; }
.calendar__info {
display: block;
font-family: var(--font-ui);
font-size: var(--fs-2xs);
color: var(--c-text-muted);
}
.calendar__empty {
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.opinion-block {
padding: var(--space-5) var(--space-4);
background: var(--c-bg-subtle);
border-top: var(--rule-strong);
}
.opinion-block .section-head { border-top: 0; padding-top: 0; }
@media (min-width: 48em) {
.opinion-block { padding: var(--space-5); }
}
.results {
width: 100%;
border-collapse: collapse;
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
}
.results caption {
margin-bottom: var(--space-2);
font-size: var(--fs-xs);
font-weight: 700;
text-align: left;
}
.results td {
padding: var(--space-2) 0;
border-bottom: var(--rule);
}
.results__team:last-child { text-align: right; }
.results__score {
width: 3.5rem;
font-weight: 800;
text-align: center;
}
.results__win { font-weight: 700; }
.site-footer {
padding-block: var(--space-6);
border-top: var(--rule-strong);
background: var(--c-bg-subtle);
font-family: var(--font-ui);
font-size: var(--fs-sm);
}
.site-footer__grid {
display: grid;
gap: var(--space-6);
}
@media (min-width: 48em) {
.site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
.site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
.site-footer__grid > :first-child { grid-column: auto; }
}
.site-footer .wordmark { font-size: 1.75rem; }
.site-footer__about {
max-width: 40ch;
margin-top: var(--space-2);
color: var(--c-text-soft);
}
.site-footer__heading {
margin-bottom: var(--space-2);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.site-footer__links li + li { margin-top: var(--space-1); }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__legal {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: var(--rule);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.breadcrumb {
margin-bottom: var(--space-4);
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
}
.breadcrumb li + li::before {
content: "›";
content: "›" / "";
margin-right: var(--space-2);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.article-header { margin-bottom: var(--space-5); }
.article-header .kicker { font-size: var(--fs-sm); }
.article__title {
margin-bottom: var(--space-4);
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-h-xl);
font-weight: 800;
line-height: var(--lh-tight);
letter-spacing: -0.015em;
text-wrap: balance;
}
.article__lede {
max-width: var(--measure);
margin-bottom: var(--space-4);
font-size: var(--fs-lede);
font-weight: 600;
line-height: 1.5;
}
.byline {
padding-block: var(--space-3);
border-top: var(--rule);
border-bottom: var(--rule);
}
.byline__author { color: var(--c-text-soft); }
.byline__author a { font-weight: 700; color: var(--c-text); text-decoration: none; }
.byline__author a:hover { text-decoration: underline; }
.article-figure { margin: 0 0 var(--space-6); }
.figure__caption {
max-width: var(--measure);
margin-top: var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-xs);
line-height: 1.45;
color: var(--c-text-soft);
}
.figure__credit { color: var(--c-text-muted); white-space: nowrap; }
.prose {
max-width: var(--measure);
font-size: var(--fs-md);
line-height: 1.65;
}
.prose > * + * { margin-top: 1.1em; }
.prose > h2 {
margin-top: 2em;
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-h-md);
font-weight: 750;
line-height: var(--lh-snug);
}
.prose > h2 + p { margin-top: 0.6em; }
.prose > figure,
.prose > aside { margin-block: 2em; }
.prose a {
text-decoration-color: var(--c-accent);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose blockquote {
margin-inline: 0;
padding-left: var(--space-4);
border-left: 3px solid var(--c-text);
font-size: 1.25rem;
font-style: italic;
line-height: 1.45;
}
.prose blockquote footer {
margin-top: var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-style: normal;
color: var(--c-text-soft);
}
.update-note {
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--c-accent);
background: var(--c-bg-subtle);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.5;
}
.infobox {
padding: var(--space-4);
border-top: var(--rule-strong);
background: var(--c-bg-subtle);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.45;
}
.infobox__label {
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.infobox__title {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: 1.25rem;
font-weight: 800;
line-height: var(--lh-snug);
}
.infobox__list {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr);
margin: var(--space-3) 0 0;
}
.infobox__list dt,
.infobox__list dd {
margin: 0;
padding-block: var(--space-2);
border-top: var(--rule);
}
.infobox__list dt {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--c-text-muted);
}
.infobox__list del { color: var(--c-text-muted); }
.infobox .more-link { margin-top: var(--space-2); }
.video__frame { position: relative; }
.video__play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
width: 4.5rem;
height: 4.5rem;
margin: auto;
padding: 0;
border: 0;
border-radius: var(--radius);
background: var(--c-score-bg);
color: var(--c-score-fg);
cursor: pointer;
}
.video__play:hover { background: var(--c-accent); }
.video__play svg { width: 1.75rem; height: 1.75rem; margin-left: 0.2rem; }
.video__duration {
position: absolute;
right: 0;
bottom: 0;
padding: var(--space-1) var(--space-2);
background: var(--c-score-bg);
color: var(--c-score-fg);
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.video__title { font-weight: 700; color: var(--c-text); }
.topics {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-6);
}
.topics a {
display: inline-block;
padding: var(--space-1) var(--space-2);
border: 1px solid var(--c-border-input);
border-radius: var(--radius);
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 600;
text-decoration: none;
}
.topics a:hover { border-color: var(--c-text); }
.topics--flush { margin-top: 0; }
.article-note {
max-width: var(--measure);
margin-top: var(--space-4);
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.article-section { margin-top: var(--space-7); }
.comments-placeholder {
max-width: var(--measure);
padding: var(--space-5);
border: 1px dashed var(--c-border-input);
border-radius: var(--radius);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.5;
}
.comments-placeholder > * + * { margin-top: var(--space-3); }
.btn {
display: inline-flex;
align-items: center;
min-height: 2.5rem;
padding: 0 var(--space-4);
border: 1px solid var(--c-text);
border-radius: var(--radius);
background: var(--c-text);
color: var(--c-bg);
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 700;
cursor: pointer;
}
.btn:disabled {
border-color: var(--c-border-input);
background: transparent;
color: var(--c-text-muted);
cursor: not-allowed;
}
.ressort-header {
margin-bottom: var(--space-6);
padding-bottom: var(--space-5);
border-bottom: var(--rule);
}
.ressort-header__title {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-h-xl);
font-weight: 800;
line-height: var(--lh-tight);
letter-spacing: -0.015em;
}
.ressort-header__intro {
max-width: var(--measure);
margin-top: var(--space-2);
font-size: var(--fs-md);
color: var(--c-text-soft);
}
.ressort-header__intro a {
text-decoration-color: var(--c-accent);
text-underline-offset: 0.18em;
}
.verdict {
margin-top: var(--space-5);
padding: var(--space-4);
border-top: var(--rule-strong);
background: var(--c-bg-subtle);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.5;
}
.verdict__head {
display: grid;
gap: var(--space-4);
align-items: start;
}
.verdict__score {
display: flex;
align-items: center;
gap: var(--space-3);
}
@media (min-width: 48em) {
.verdict__head { grid-template-columns: auto minmax(0, 1fr); }
.verdict__score { display: block; text-align: center; }
}
.verdict__score .score {
min-width: 4.5rem;
height: 4.5rem;
font-size: 2.25rem;
}
.verdict__rating {
display: block;
margin-top: var(--space-1);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.verdict__label {
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.verdict__summary {
margin-top: var(--space-1);
font-family: var(--font-body);
font-size: 1rem;
color: var(--c-text);
}
.verdict__lists {
display: grid;
gap: var(--space-4);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: var(--rule);
}
@media (min-width: 48em) {
.verdict__lists { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
.verdict__list-title {
margin-bottom: var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.verdict__list li {
position: relative;
padding-left: var(--space-5);
}
.verdict__list li + li { margin-top: var(--space-1); }
.verdict__list li::before {
position: absolute;
left: 0;
width: 1rem;
font-weight: 800;
text-align: center;
}
.verdict__list--pro li::before { content: "+"; content: "+" / ""; }
.verdict__list--contra li::before { content: "–"; content: "–" / ""; }
.verdict__footnote {
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: var(--rule);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.filter {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-4) var(--space-5);
margin-bottom: var(--space-4);
font-family: var(--font-ui);
}
.filter__group {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.filter__legend,
.filter__sort label {
display: block;
margin-bottom: var(--space-2);
padding: 0;
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.filter__options {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.filter__option input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.filter__option label {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
padding: 0 var(--space-3);
border: 1px solid var(--c-border-input);
border-radius: var(--radius);
font-size: var(--fs-sm);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.filter__option label:hover { border-color: var(--c-text); }
.filter__option input:checked + label {
border-color: var(--c-text);
background: var(--c-text);
color: var(--c-bg);
}
.filter__option input:focus-visible + label {
outline: 2px solid var(--c-focus);
outline-offset: 2px;
}
.filter__sort select {
min-height: 2.25rem;
padding: 0 var(--space-6) 0 var(--space-3);
border: 1px solid var(--c-border-input);
border-radius: var(--radius);
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-ui);
font-size: var(--fs-sm);
}
.js .filter__submit { display: none; }
.filter__count {
margin-bottom: 0;
padding-bottom: var(--space-3);
border-bottom: var(--rule);
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 650;
color: var(--c-text-muted);
}
.filter__empty {
padding: var(--space-5) 0;
font-family: var(--font-ui);
font-size: var(--fs-sm);
color: var(--c-text-soft);
}
.teaser--row {
display: grid;
grid-template-columns: 7rem minmax(0, 1fr);
gap: var(--space-4);
align-items: start;
}
.teaser--row > .media { margin: 0; }
.teaser--row .score {
min-width: 2.25rem;
height: 2.25rem;
font-size: 1.0625rem;
}
.teaser--row .teaser__text { display: none; }
@media (min-width: 48em) {
.teaser--row { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-5); }
.teaser--row .teaser__title { font-size: var(--fs-h-md); }
.teaser--row .teaser__text { display: block; }
.teaser--row .score { min-width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
}
.test-list > li {
padding-block: var(--space-4);
border-bottom: var(--rule);
}
.test-list > li[hidden] { display: none; }
.pagination {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: var(--rule);
font-family: var(--font-ui);
font-size: var(--fs-sm);
}
.pagination ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
}
.pagination a,
.pagination span {
display: inline-grid;
place-items: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 var(--space-2);
border-radius: var(--radius);
font-weight: 600;
text-decoration: none;
}
.pagination a:hover { background: var(--c-bg-subtle); }
.pagination a[aria-current="page"] { background: var(--c-text); color: var(--c-bg); }
.pagination__next { margin-left: auto; }
.scale {
font-family: var(--font-ui);
font-size: var(--fs-sm);
}
.scale__row {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: var(--space-3);
padding-block: var(--space-2);
border-bottom: var(--rule);
}
.scale__range { font-weight: 800; font-variant-numeric: tabular-nums; }
.scale__note {
margin-top: var(--space-3);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.score-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
margin-top: var(--space-4);
font-family: var(--font-ui);
font-size: var(--fs-sm);
}
.score-summary__rating { font-weight: 700; }
.score-summary a {
font-weight: 650;
color: var(--c-accent);
text-decoration: none;
}
.score-summary a:hover { text-decoration: underline; }
.verdict { scroll-margin-top: var(--space-5); }
.verdict--full {
max-width: var(--measure);
margin-top: var(--space-6);
padding: var(--space-5) var(--space-4);
}
@media (min-width: 48em) {
.verdict--full { padding: var(--space-5); }
.verdict--full .verdict__score .score {
min-width: 5.5rem;
height: 5.5rem;
font-size: 2.75rem;
}
}
.verdict--full .verdict__summary { font-size: var(--fs-base); }
.verdict__audience {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: var(--rule);
}
.verdict__audience p + p { margin-top: var(--space-1); }
.teaser--lead.teaser--opinion .teaser__title { font-weight: 650; }
.teaser--lead .teaser__byline { font-size: var(--fs-sm); }
.debate__question {
margin-bottom: var(--space-4);
font-family: var(--font-body);
font-size: var(--fs-h-md);
font-style: italic;
font-weight: 650;
line-height: var(--lh-snug);
text-wrap: balance;
}
.debate__side-label {
display: block;
margin-bottom: var(--space-2);
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: 1.5rem;
font-weight: 800;
line-height: 1;
}
.debate__meta { margin-top: var(--space-4); }
.column-list__item {
display: grid;
gap: var(--space-1) var(--space-5);
padding-block: var(--space-4);
border-bottom: var(--rule);
}
.column-list__item:first-child { padding-top: 0; }
@media (min-width: 48em) {
.column-list__item { grid-template-columns: 13rem minmax(0, 1fr); }
}
.column-list__name {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-h-sm);
font-weight: 800;
line-height: var(--lh-snug);
}
.column-list__info {
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.column-list__latest { position: relative; }
.column-list__latest .teaser__title { margin-bottom: var(--space-1); }
.glossary {
margin: 0;
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.45;
}
.glossary dt {
padding-top: var(--space-3);
border-top: var(--rule);
font-weight: 700;
}
.glossary dt:first-child { padding-top: 0; border-top: 0; }
.glossary dd {
margin: var(--space-1) 0 var(--space-3);
color: var(--c-text-soft);
}
.people__item {
padding-block: var(--space-2);
border-bottom: var(--rule);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.4;
}
.people__item:first-child { padding-top: 0; }
.people__name { font-weight: 700; text-decoration: none; }
.people__name:hover { text-decoration: underline; }
.people__role {
display: block;
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.article__title--opinion {
font-family: var(--font-body);
font-stretch: normal;
font-style: italic;
font-weight: 650;
letter-spacing: -0.005em;
}
.opinion-note {
max-width: var(--measure);
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--c-text);
background: var(--c-bg-subtle);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.5;
}
.infobox__text { margin-top: var(--space-2); }
.author-box {
max-width: var(--measure);
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: var(--rule-strong);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.5;
}
.author-box__label {
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.author-box__name {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: 1.25rem;
font-weight: 800;
}
.author-box__role { color: var(--c-text-muted); }
.author-box__bio { margin-top: var(--space-2); color: var(--c-text-soft); }
.author-box__links { margin-top: var(--space-3); }
.author-box__links li + li { margin-top: var(--space-1); }
.author-box__links a {
font-weight: 600;
text-decoration-color: var(--c-accent);
text-underline-offset: 0.18em;
}
.week-nav {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
padding-block: var(--space-3);
border-block: var(--rule);
font-family: var(--font-ui);
font-size: var(--fs-sm);
}
.week-nav__current {
text-align: center;
line-height: 1.35;
}
.week-nav__current strong { display: block; }
.week-nav__current span { font-size: var(--fs-xs); color: var(--c-text-muted); }
.week-nav a {
font-weight: 650;
color: var(--c-accent);
text-decoration: none;
white-space: nowrap;
}
.week-nav a:hover { text-decoration: underline; }
.week-nav__long {
position: absolute;
width: 1px; height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@media (min-width: 48em) {
.week-nav__long { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
.release-group {
display: grid;
gap: var(--space-2) var(--space-5);
padding-block: var(--space-4);
border-bottom: var(--rule);
}
@media (min-width: 48em) {
.release-group { grid-template-columns: 10rem minmax(0, 1fr); }
}
.release-group__date {
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 700;
line-height: 1.35;
}
.release-group__empty {
font-family: var(--font-ui);
font-size: var(--fs-sm);
color: var(--c-text-muted);
}
.release {
display: grid;
gap: var(--space-2) var(--space-4);
}
.release:not([hidden]) ~ .release {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: var(--rule);
}
@media (min-width: 48em) {
.release { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.release__title {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-h-sm);
font-weight: 750;
line-height: var(--lh-snug);
text-decoration: none;
}
a.release__title:hover { text-decoration: underline; }
.release__info {
display: block;
margin-top: 0.125rem;
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.release__info del { color: var(--c-text-muted); }
.release__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-2);
}
.release__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
font-family: var(--font-ui);
font-size: var(--fs-xs);
}
@media (min-width: 48em) {
.release__meta { justify-content: flex-end; }
}
.release__price { font-weight: 650; font-variant-numeric: tabular-nums; }
.release__test {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 650;
text-decoration: none;
}
.release__test:hover { text-decoration: underline; }
.release-section + .release-section { margin-top: var(--space-7); }
.release-note {
margin-top: var(--space-4);
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.delays__item {
padding-block: var(--space-3);
border-bottom: var(--rule);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.4;
}
.delays__item:first-child { padding-top: 0; }
.delays__title {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: 1rem;
font-weight: 700;
text-decoration: none;
}
.delays__title:hover { text-decoration: underline; }
.delays__dates {
display: block;
font-variant-numeric: tabular-nums;
color: var(--c-text-soft);
}
.delays__dates del { color: var(--c-text-muted); }
.feed-day + .feed-day { margin-top: var(--space-6); }
.feed-day__title {
padding-bottom: var(--space-2);
border-bottom: var(--rule-strong);
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 800;
}
.feed-day__empty {
padding-block: var(--space-3);
font-family: var(--font-ui);
font-size: var(--fs-sm);
color: var(--c-text-muted);
}
.feed-item {
display: grid;
grid-template-columns: 3.25rem minmax(0, 1fr);
gap: var(--space-3);
padding-block: var(--space-4);
border-bottom: var(--rule);
}
.feed-item__time {
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1.6;
font-variant-numeric: tabular-nums;
}
.feed-item .teaser__title { font-size: var(--fs-h-sm); }
@media (min-width: 48em) {
.feed-item { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); }
.feed-item .teaser__title { font-size: var(--fs-h-md); }
}
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline-offset: 2px; }
.data-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.4;
font-variant-numeric: tabular-nums;
}
.data-table caption {
margin-bottom: var(--space-2);
font-size: var(--fs-xs);
font-weight: 700;
text-align: left;
}
.data-table th,
.data-table td {
padding: var(--space-2) var(--space-2) var(--space-2) 0;
border-bottom: var(--rule);
text-align: left;
vertical-align: top;
}
.data-table th:last-child,
.data-table td:last-child { padding-right: 0; }
.data-table thead th {
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--c-text-muted);
white-space: nowrap;
}
.data-table tbody th { font-weight: 600; }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table .strong { font-weight: 800; }
.data-table .is-cutoff > * { border-bottom: var(--rule-strong); }
.data-table__note {
margin-top: var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.data-table--specs tbody th {
width: 9rem;
font-size: var(--fs-xs);
font-weight: 700;
color: var(--c-text-muted);
}
.schedule__item {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: var(--space-3);
padding-block: var(--space-3);
border-bottom: var(--rule);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.4;
}
.schedule__item:first-child { padding-top: 0; }
.schedule__when {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.schedule__when span {
display: block;
font-weight: 500;
color: var(--c-text-muted);
}
.schedule__match { font-weight: 700; }
.schedule__info {
display: block;
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.link-list__item {
padding-block: var(--space-3);
border-bottom: var(--rule);
}
.link-list__item:first-child { padding-top: 0; }
.link-list__item a {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: 1rem;
font-weight: 700;
line-height: var(--lh-snug);
text-decoration: none;
}
.link-list__item a:hover { text-decoration: underline; }
.link-list__info {
display: block;
font-family: var(--font-ui);
font-size: var(--fs-2xs);
font-weight: 650;
color: var(--c-text-muted);
}
.toc {
max-width: var(--measure);
margin-bottom: var(--space-6);
padding: var(--space-4);
border-top: var(--rule-strong);
background: var(--c-bg-subtle);
font-family: var(--font-ui);
font-size: var(--fs-sm);
}
.toc__title {
margin-bottom: var(--space-2);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.toc ol {
margin: 0;
padding-left: var(--space-5);
}
.toc li + li { margin-top: var(--space-1); }
.toc a {
font-weight: 600;
text-decoration-color: var(--c-accent);
text-underline-offset: 0.18em;
}
.prose > h2[id],
.prose > section[id] { scroll-margin-top: var(--space-5); }
.prose ul,
.prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose .data-table { font-size: var(--fs-sm); }
.prose address { font-style: normal; }
.todo {
padding: 0 0.2em;
border-bottom: 1px dashed var(--c-text);
background: var(--c-label-fill);
font-family: var(--font-ui);
font-size: 0.9em;
}
.template-note {
max-width: var(--measure);
margin-bottom: var(--space-5);
padding: var(--space-3) var(--space-4);
border: 1px dashed var(--c-border-input);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.5;
}
.page-updated {
margin-top: var(--space-6);
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.contact-list__item {
padding-block: var(--space-4);
border-bottom: var(--rule);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.5;
}
.contact-list__item:first-child { padding-top: 0; }
.contact-list__item h3 {
margin-bottom: var(--space-1);
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-h-xs);
font-weight: 800;
}
.contact-list__item p { color: var(--c-text-soft); }
.contact-list__item p + p { margin-top: var(--space-1); }
.form {
max-width: var(--measure);
font-family: var(--font-ui);
font-size: var(--fs-sm);
}
.form-field + .form-field { margin-top: var(--space-4); }
.form-field label {
display: block;
margin-bottom: var(--space-1);
font-weight: 700;
}
.form-field__optional { font-weight: 400; color: var(--c-text-muted); }
.form-field__hint {
margin-bottom: var(--space-2);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
min-height: 2.75rem;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--c-border-input);
border-radius: var(--radius);
background: var(--c-bg);
color: var(--c-text);
font: inherit;
font-size: 1rem;
}
.form-field textarea { min-height: 10rem; resize: vertical; line-height: 1.5; }
.form-field [aria-invalid="true"] { border: 2px solid var(--c-accent); }
.form-field__error {
margin-top: var(--space-1);
font-weight: 700;
color: var(--c-accent);
}
.form__privacy {
margin-top: var(--space-4);
font-size: var(--fs-xs);
color: var(--c-text-soft);
}
.form__actions { margin-top: var(--space-4); }
.form__status {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--c-text);
background: var(--c-bg-subtle);
}
.form__status:empty { display: none; }
.error-page { max-width: var(--measure); }
.error-page__links {
display: grid;
gap: var(--space-2) var(--space-5);
margin-top: var(--space-4);
font-family: var(--font-ui);
font-size: var(--fs-sm);
}
@media (min-width: 48em) {
.error-page__links { grid-template-columns: repeat(3, auto); justify-content: start; }
}
.error-page__links a {
font-weight: 650;
text-decoration-color: var(--c-accent);
text-underline-offset: 0.18em;
}
.search--inline,
.js .search--inline {
display: flex;
order: 0;
flex: none;
max-width: 28rem;
margin: var(--space-5) 0 0;
}
.account-page { max-width: 28rem; }
.account-page .article__title { font-size: var(--fs-h-lg); }
.password-field { display: flex; }
.password-field input {
flex: 1;
min-width: 0;
border-right: 0;
border-radius: var(--radius) 0 0 var(--radius);
}
.password-field__toggle {
flex: none;
min-height: 2.75rem;
padding: 0 var(--space-3);
border: 1px solid var(--c-border-input);
border-radius: 0 var(--radius) var(--radius) 0;
background: var(--c-bg-subtle);
color: var(--c-text);
font: inherit;
font-size: var(--fs-xs);
font-weight: 700;
cursor: pointer;
}
.password-field__toggle:hover { border-color: var(--c-text); }
.password-field__toggle[aria-pressed="true"] {
border-color: var(--c-text);
background: var(--c-text);
color: var(--c-bg);
}
.form-field [aria-invalid="true"] + .password-field__toggle { border-color: var(--c-accent); }
.form-check {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin-top: var(--space-4);
}
.form-check input {
flex: none;
width: 1.25rem;
height: 1.25rem;
margin: 0.1rem 0 0;
accent-color: var(--c-text);
}
.form-check label { font-weight: 400; }
.form__links {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: var(--rule);
}
.form__links p + p { margin-top: var(--space-2); }
.form__links a,
.form-field__link {
font-weight: 650;
text-decoration-color: var(--c-accent);
text-underline-offset: 0.18em;
}
.form-field__label-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-1) var(--space-3);
margin-bottom: var(--space-1);
}
.form-field__label-row label { margin-bottom: 0; }
.form-field__link { font-size: var(--fs-xs); }
.form .btn { min-height: 2.75rem; }
.form .btn--wide { width: 100%; justify-content: center; }
.account-info {
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--c-text-soft);
}
.account-info p + p { margin-top: var(--space-3); }
.section-nav {
margin-top: var(--space-4);
border-bottom: var(--rule);
}
.section-nav__list {
display: flex;
overflow-x: auto;
scrollbar-width: none;
}
.section-nav__list::-webkit-scrollbar { display: none; }
.section-nav__list li:first-child a { padding-left: 0; }
.section-nav a {
display: block;
padding: var(--space-2) var(--space-3);
border-bottom: 3px solid transparent;
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 650;
white-space: nowrap;
text-decoration: none;
}
.section-nav a:hover { border-bottom-color: var(--c-text); }
.section-nav a[aria-current="page"] { border-bottom-color: var(--c-accent); }
.section-nav a:focus-visible { outline-offset: -3px; }
.ressort-header:has(.section-nav) { padding-bottom: 0; border-bottom: 0; }
.department {
position: relative;
padding-block: var(--space-4);
border-bottom: var(--rule);
}
.department:first-child { padding-top: 0; }
.department__title {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-h-sm);
font-weight: 800;
line-height: var(--lh-snug);
}
.department__title a { text-decoration: none; }
.department__title a::after { content: ""; position: absolute; inset: 0; }
.department:hover .department__title a { text-decoration: underline; }
.department__text {
margin-top: var(--space-1);
font-size: var(--fs-sm);
color: var(--c-text-soft);
}
.department__for {
margin-top: var(--space-1);
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.team__group + .team__group { margin-top: var(--space-6); }
.team__group-title {
margin-bottom: var(--space-3);
font-family: var(--font-ui);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.person {
padding-block: var(--space-3);
border-top: var(--rule);
font-family: var(--font-ui);
font-size: var(--fs-sm);
line-height: 1.5;
scroll-margin-top: var(--space-5);
}
.person:target {
padding-inline: var(--space-3);
background: var(--c-bg-subtle);
outline: 2px solid var(--c-text);
outline-offset: 0;
}
.person__name {
font-family: var(--font-head);
font-stretch: var(--stretch-head);
font-size: var(--fs-h-xs);
font-weight: 800;
}
.person__role { font-weight: 650; }
.person__focus { color: var(--c-text-soft); }
@media (min-width: 48em) {
.team__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
}
.preview-bar {
padding: var(--space-2) var(--gutter);
background: var(--c-text);
color: var(--c-bg);
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 650;
text-align: center;
}
.preview-bar a { color: inherit; }
.prose figure { margin-block: 1.5em; }
.prose img { width: 100%; height: auto; }
.social {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin-top: var(--space-4);
}
.social__link {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
min-height: 1.5rem;
font-weight: 700;
text-decoration: none;
}
.social__link:hover { text-decoration: underline; }
.social__handle { font-weight: 400; color: var(--c-text-muted); }
span.delays__title { display: inline; }
span.release__title, span.calendar__title { text-decoration: none; }
.wordmark { display: inline-flex; align-items: center; gap: 0.3em; }
.wordmark__mark { flex: none; width: auto; height: 1.15em; }
@media (max-width: 22.5em) {
.site-header .wordmark { font-size: 1.5rem; }
}