/* ============================================================
ak-parental.css — Guide parental cluster
Calm/advisory voice. One cluster-wide accent. No author flair.
Tokens read from system.css + ak.css. Only adds new components.
============================================================ */
/* Rating scale — 6 bands, 0..5 = calm green → oxblood.
Promoted to :root so all pages get the color tokens; the old cluster
scoping was left over from the French-era theme and broke after the
German refactor dropped data-cluster from . */
:root {
--rate-0: #8a9a8a; /* nichts zu melden */
--rate-1: #8a9a8a; /* same — 0 & 1 are the "calm" bucket */
--rate-2: #c9a24a; /* honig-gelb */
--rate-3: #c88a3a; /* ocker */
--rate-4: #b85a3a; /* terrakotta */
--rate-5: #8a2e2a; /* oxblood — nur für 5 */
--rate-track: #e4dfd0;
}
.system-root[data-preset="animeakie"] {
/* Cluster accent — teal, subtle trust tone. Kept defined even though
the data-cluster attribute was dropped; the theme still uses this
variable in a few places (catalogue, pillar). */
--cluster-accent: #3a7a7a;
--cluster-accent-soft: #e6efee;
--cluster-accent-ink: #ffffff;
}
/* ============================================================
1. TL;DR callout — the verdict box.
Sits between the meta-row and the hero poster. Bigger than dek,
smaller than H1. Left rail in cluster accent, label in mono.
============================================================ */
.ak-tldr {
display: grid;
grid-template-columns: 6px minmax(0, 1fr);
gap: 24px;
background: var(--cluster-accent-soft);
padding: 28px 32px 30px 26px;
margin: 8px 0 48px;
border: 1px solid var(--color-rule);
border-left: none;
position: relative;
max-width: 100%;
box-sizing: border-box;
}
.ak-tldr::before {
content: "";
background: var(--cluster-accent);
}
.ak-tldr > .body { grid-column: 2; }
.ak-tldr .label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cluster-accent);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.ak-tldr .label::after {
content: "";
flex: 1;
height: 1px;
background: var(--cluster-accent);
opacity: 0.3;
max-width: 80px;
}
.ak-tldr .verdict {
font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 24px);
line-height: 1.28;
font-weight: 500;
color: var(--color-text-primary);
margin: 0 0 14px;
font-variation-settings: "opsz" 72;
letter-spacing: -0.005em;
max-width: 54ch;
}
.ak-tldr .verdict b {
font-weight: 600;
color: var(--cluster-accent);
}
.ak-tldr .pictos {
display: flex;
gap: 18px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-secondary);
padding-top: 14px;
border-top: 1px solid rgba(58, 122, 122, 0.2);
flex-wrap: wrap;
}
.ak-tldr .pictos .chip {
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.ak-tldr .pictos .chip b {
font-family: var(--font-display);
font-variation-settings: "opsz" 96;
font-size: 18px;
color: var(--color-text-primary);
font-weight: 500;
letter-spacing: 0;
}
.ak-tldr .pictos .sep {
color: var(--color-text-muted);
opacity: 0.5;
}
@media (max-width: 820px) {
.ak-tldr {
grid-template-columns: 4px 1fr;
gap: 16px;
padding: 22px 20px 24px 18px;
}
.ak-tldr .verdict { font-size: 18px; }
.ak-tldr .pictos { font-size: 10.5px; gap: 12px; }
}
/* ============================================================
2. Rating bars — four stacked categories, each 0–5.
Visual scale: 5 segments, low scores filled green, high red.
Label row + scale + notes. No dramatics.
============================================================ */
.ak-pratings {
margin: 48px 0;
padding: 0;
border-top: 1px solid var(--color-rule);
border-bottom: 1px solid var(--color-rule);
}
.ak-pratings > header {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 16px 0 14px;
border-bottom: 1px solid var(--color-rule-soft);
gap: 20px;
}
.ak-pratings > header .hed {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 96;
letter-spacing: -0.005em;
}
.ak-pratings > header .key {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
display: flex;
gap: 18px;
}
.ak-pratings > header .key .swatch {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ak-pratings > header .key .dot {
width: 8px;
height: 8px;
display: inline-block;
}
/* Two-row layout per axis:
Row 1: axis label | intensity bar (5 segments, empty slots have a
visible inset border) | score NN/5
Row 2: tagline + notes (aligned under the bar column) */
.ak-prating {
display: grid;
grid-template-columns: 160px minmax(0, 1fr) 60px;
grid-template-rows: auto auto;
grid-template-areas:
"label bar score"
"prose prose prose";
column-gap: 24px;
row-gap: 14px;
align-items: center;
padding: 22px 0;
border-bottom: 1px solid var(--color-rule-soft);
}
.ak-prating:last-child { border-bottom: none; }
.ak-prating .label {
grid-area: label;
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 72;
letter-spacing: -0.005em;
}
.ak-prating .scale {
grid-area: bar;
display: flex;
align-items: center;
min-width: 0;
}
.ak-prating .scale .track {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 3px;
width: 100%;
border-radius: 2px;
overflow: hidden;
}
/* Empty segment: neutral rate-track with a hairline inset so it's
visible against the paper background. Filled segments (rule below)
override the background and drop the border so the fill reads solid. */
.ak-prating .scale .seg {
height: 14px;
background: var(--rate-track);
box-shadow: inset 0 0 0 1px var(--color-rule);
transition: background 200ms ease, box-shadow 200ms ease;
border-radius: 1px;
}
/* Fill levels — each filled seg colored by SCORE (not position) */
.ak-prating[data-score="0"] .seg { background: var(--rate-track); }
.ak-prating[data-score="1"] .seg:nth-child(-n+1) { background: var(--rate-1); box-shadow: none; }
.ak-prating[data-score="2"] .seg:nth-child(-n+2) { background: var(--rate-2); box-shadow: none; }
.ak-prating[data-score="3"] .seg:nth-child(-n+3) { background: var(--rate-3); box-shadow: none; }
.ak-prating[data-score="4"] .seg:nth-child(-n+4) { background: var(--rate-4); box-shadow: none; }
.ak-prating[data-score="5"] .seg:nth-child(-n+5) { background: var(--rate-5); box-shadow: none; }
/* Score number (right column, row 1) */
.ak-prating .score-pill {
grid-area: score;
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
color: var(--color-text-primary);
text-align: right;
justify-self: end;
}
.ak-prating .score-pill small {
font-size: 13px;
font-weight: 500;
color: var(--color-text-muted);
margin-left: 2px;
}
.ak-prating[data-score="0"] .score-pill,
.ak-prating[data-score="1"] .score-pill { color: var(--rate-1); }
.ak-prating[data-score="2"] .score-pill { color: var(--rate-2); }
.ak-prating[data-score="3"] .score-pill { color: var(--rate-3); }
.ak-prating[data-score="4"] .score-pill { color: var(--rate-4); }
.ak-prating[data-score="5"] .score-pill { color: var(--rate-5); }
/* Prose row (tagline + notes) — aligned under the bar for readability */
.ak-prating .prose {
grid-area: prose;
margin-left: 184px; /* 160 (label) + 24 (gap) */
max-width: 68ch;
}
.ak-prating .prose .tagline {
font-family: var(--font-display);
font-size: 15px;
line-height: 1.35;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 72;
letter-spacing: -0.005em;
margin-bottom: 6px;
}
.ak-prating .prose .notes {
margin: 0;
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.55;
color: var(--color-text-secondary);
}
.ak-prating .prose .notes p { margin: 0 0 6px; }
.ak-prating .prose .notes p:last-child { margin: 0; }
@media (max-width: 820px) {
/* Mobile: each axis is its own stacked block.
Row 1: axis name (left) + score number (right) — eyeline alignment.
Row 2: full-width bar, taller for visibility on phones.
Row 3: tagline + prose, no left indent. */
.ak-prating {
display: block; /* drop the grid; sequential blocks read better */
padding: 18px 0;
}
.ak-prating::before { content: none; } /* defensive: kill any stray pseudo */
.ak-prating .label-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
/* Fallback when template hasn't been updated to wrap label+score in
.label-row — pull the score-pill out of .scale and float it next
to the label. We use grid for the explicit row arrangement. */
.ak-prating > .label {
display: block;
font-size: 17px;
margin-bottom: 8px;
}
.ak-prating > .scale {
display: flex; align-items: center; gap: 12px;
margin-bottom: 12px;
width: 100%;
}
.ak-prating > .scale .track {
flex: 1 1 auto;
min-width: 0;
}
.ak-prating > .scale .seg { height: 18px; border-radius: 2px; }
.ak-prating > .scale .score-pill {
flex: 0 0 auto;
font-size: 22px;
line-height: 1;
margin-left: 0;
}
.ak-prating > .prose { margin-left: 0; }
.ak-pratings > header { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* ============================================================
3. Comparables — 3-card row. Thumbnail + age badge + title + label.
Link cards, curated feel. Sits in body, not in footer.
============================================================ */
.ak-comparables {
margin: 56px 0;
}
.ak-comparables > header {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-rule);
margin-bottom: 24px;
gap: 20px;
}
.ak-comparables > header .hed {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 96;
letter-spacing: -0.005em;
}
.ak-comparables > header .sub {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.ak-comparables .grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.ak-comparable {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 12px;
padding: 0;
transition: transform 200ms ease;
}
.ak-comparable:hover { transform: translateY(-2px); }
.ak-comparable:hover .title { color: var(--cluster-accent); }
.ak-comparable .thumb {
aspect-ratio: 4/3;
position: relative;
overflow: hidden;
border: 1px solid var(--color-rule);
width: 100%;
min-width: 0;
}
/* Bug #3 fix (2026-04-22): when the pipeline enricher found an AniList
cover for a comparable, ![]()
is rendered inside the .thumb figure.
object-fit: cover crops the portrait cover to the 4/3 thumbnail frame
without distortion. When no image exists the typography fallback
elsewhere in this stylesheet kicks in via the empty figure's pseudo. */
.ak-comparable .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ak-comparable .role {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cluster-accent);
display: flex;
align-items: center;
gap: 10px;
}
.ak-comparable .role::before {
content: "";
width: 18px;
height: 1px;
background: var(--cluster-accent);
}
.ak-comparable .title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.22;
color: var(--color-text-primary);
font-variation-settings: "opsz" 72;
letter-spacing: -0.005em;
margin: 0;
transition: color 200ms ease;
}
.ak-comparable .age {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-secondary);
padding: 6px 10px;
border: 1px solid var(--color-rule);
align-self: flex-start;
background: var(--color-surface);
}
.ak-comparable .age b {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 15px;
color: var(--color-text-primary);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.ak-comparable .why {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.5;
color: var(--color-text-secondary);
margin: 0;
}
@media (max-width: 820px) {
.ak-comparables .grid { grid-template-columns: 1fr; gap: 28px; }
.ak-comparables > header { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ============================================================
4. Où regarder — streaming row + manga publisher card.
Compact, scannable, platform chips with availability state.
============================================================ */
.ak-watch {
margin: 56px 0;
background: var(--color-surface);
border: 1px solid var(--color-rule);
padding: 28px 32px 30px;
}
.ak-watch > header {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-rule-soft);
margin-bottom: 20px;
gap: 20px;
}
.ak-watch > header .hed {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 96;
letter-spacing: -0.005em;
}
.ak-watch > header .sub {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.ak-watch .section {
padding: 10px 0 18px;
}
.ak-watch .section + .section {
border-top: 1px solid var(--color-rule-soft);
margin-top: 8px;
padding-top: 20px;
}
.ak-watch .section-label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 14px;
}
.ak-watch .platforms {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
max-width: 100%;
}
.ak-watch .platform {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border: 1px solid var(--color-rule);
gap: 12px;
background: var(--color-bg);
}
.ak-watch .platform .name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 72;
}
.ak-watch .platform .state {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ak-watch .platform.available .state {
color: var(--cluster-accent);
}
.ak-watch .platform.available .state::before {
content: "";
width: 6px; height: 6px; border-radius: 999px;
background: var(--cluster-accent);
display: inline-block;
}
.ak-watch .platform.unavailable { opacity: 0.55; }
.ak-watch .platform.unavailable .state { color: var(--color-text-muted); }
.ak-watch .platform.unavailable .state::before {
content: "";
width: 6px; height: 6px;
background: transparent;
border: 1px solid var(--color-text-muted);
display: inline-block;
}
.ak-watch .manga {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
padding: 16px 18px;
border: 1px solid var(--color-rule);
background: var(--color-bg);
}
.ak-watch .manga .who {
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 72;
letter-spacing: -0.005em;
margin: 0 0 4px;
}
.ak-watch .manga .detail {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.ak-watch .manga .picto {
width: 64px; height: 64px;
border: 2px solid var(--cluster-accent);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--cluster-accent);
font-variation-settings: "opsz" 72;
letter-spacing: -0.02em;
background: var(--cluster-accent-soft);
}
.ak-watch .vf {
display: inline-flex;
align-items: baseline;
gap: 10px;
padding: 6px 10px;
background: var(--cluster-accent-soft);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cluster-accent);
margin-top: 12px;
}
.ak-watch .vf b { font-family: var(--font-mono); color: var(--color-text-primary); font-weight: 600; }
@media (max-width: 820px) {
.ak-watch { padding: 22px 20px 24px; }
.ak-watch .platforms { grid-template-columns: 1fr; }
.ak-watch .manga { grid-template-columns: 1fr; text-align: left; }
.ak-watch .manga .picto { width: 52px; height: 52px; font-size: 17px; }
}
/* ============================================================
5. FAQ accordion — closed by default, plus/minus toggle.
Slim, clean, Wirecutter-style.
============================================================ */
.ak-faq {
margin: 56px 0;
}
.ak-faq > header {
padding-bottom: 14px;
border-bottom: 1px solid var(--color-rule);
margin-bottom: 0;
}
.ak-faq > header .hed {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 96;
letter-spacing: -0.005em;
}
.ak-faq details {
border-bottom: 1px solid var(--color-rule-soft);
padding: 0;
}
.ak-faq details:last-of-type { border-bottom: 1px solid var(--color-rule); }
.ak-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 20px 0;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 72;
letter-spacing: -0.005em;
line-height: 1.3;
}
.ak-faq summary::-webkit-details-marker { display: none; }
.ak-faq summary .toggle {
flex: 0 0 auto;
width: 24px; height: 24px;
border: 1px solid var(--color-rule);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition: border-color 180ms ease, background 180ms ease;
}
.ak-faq summary .toggle::before,
.ak-faq summary .toggle::after {
content: "";
position: absolute;
background: var(--color-text-primary);
transition: transform 200ms ease;
}
.ak-faq summary .toggle::before { width: 10px; height: 1px; }
.ak-faq summary .toggle::after { width: 1px; height: 10px; }
.ak-faq details[open] summary .toggle {
background: var(--cluster-accent);
border-color: var(--cluster-accent);
}
.ak-faq details[open] summary .toggle::before,
.ak-faq details[open] summary .toggle::after {
background: var(--cluster-accent-ink);
}
.ak-faq details[open] summary .toggle::after { transform: scaleY(0); }
.ak-faq summary:hover .toggle { border-color: var(--cluster-accent); }
.ak-faq .answer {
padding: 0 40px 20px 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--color-text-secondary);
max-width: 68ch;
}
.ak-faq .answer p { margin: 0 0 8px; }
.ak-faq .answer p:last-child { margin: 0; }
@media (max-width: 820px) {
.ak-faq summary { font-size: 16px; padding: 16px 0; gap: 14px; }
.ak-faq .answer { padding-right: 0; font-size: 14.5px; }
}
/* ============================================================
Pillar-page bits — age-tier sections, spoke cards
============================================================ */
.ak-pillar-lead {
padding: 56px 0 40px;
max-width: 880px;
}
.ak-pillar-lead .kicker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cluster-accent);
margin-bottom: 18px;
}
.ak-pillar-lead h1 {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 56px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144;
color: var(--color-text-primary);
margin: 0 0 22px;
max-width: 18ch;
}
.ak-pillar-lead .dek {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: clamp(18px, 1.8vw, 22px);
line-height: 1.45;
color: var(--color-text-secondary);
font-weight: 400;
max-width: 58ch;
margin: 0 0 28px;
}
.ak-pillar-lead .meta {
display: flex;
gap: 24px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
padding-top: 20px;
border-top: 1px solid var(--color-rule);
}
.ak-pillar-lead .meta b {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 14px;
color: var(--color-text-primary);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.ak-tiers {
margin: 48px 0 96px;
display: flex;
flex-direction: column;
gap: 72px;
}
.ak-tier {
border-top: 1px solid var(--color-rule);
padding-top: 28px;
}
.ak-tier > header {
display: grid;
grid-template-columns: 160px 1fr;
gap: 40px;
align-items: baseline;
margin-bottom: 28px;
}
.ak-tier > header .age {
font-family: var(--font-display);
font-size: 56px;
line-height: 0.95;
font-weight: 500;
color: var(--cluster-accent);
font-variation-settings: "opsz" 144;
letter-spacing: -0.02em;
}
.ak-tier > header .age small {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: 8px;
font-variation-settings: normal;
letter-spacing: 0.1em;
}
.ak-tier > header .frame .hed {
font-family: var(--font-display);
font-size: 26px;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 96;
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.ak-tier > header .frame .desc {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
color: var(--color-text-secondary);
max-width: 62ch;
margin: 0;
}
.ak-tier .spokes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.ak-spoke {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 20px 22px;
border: 1px solid var(--color-rule);
background: var(--color-surface);
transition: border-color 200ms ease, transform 200ms ease;
}
.ak-spoke:hover {
border-color: var(--cluster-accent);
transform: translateY(-2px);
}
.ak-spoke .top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.ak-spoke .series {
font-family: var(--font-display);
font-size: 19px;
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: "opsz" 72;
letter-spacing: -0.005em;
margin: 0;
line-height: 1.2;
}
.ak-spoke .age-chip {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cluster-accent);
padding: 3px 8px;
background: var(--cluster-accent-soft);
flex: 0 0 auto;
}
.ak-spoke .why {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.5;
color: var(--color-text-secondary);
margin: 0;
}
.ak-spoke .mini-scale {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding-top: 10px;
border-top: 1px solid var(--color-rule-soft);
}
.ak-spoke .mini-scale .m {
display: flex;
flex-direction: column;
gap: 3px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.ak-spoke .mini-scale .m .dots {
display: flex;
gap: 2px;
}
.ak-spoke .mini-scale .m .dots i {
width: 100%;
height: 3px;
background: var(--rate-track);
}
.ak-spoke .mini-scale .m[data-score="0"] .dots i,
.ak-spoke .mini-scale .m[data-score="1"] .dots i:nth-child(-n+1) { background: var(--rate-1); }
.ak-spoke .mini-scale .m[data-score="2"] .dots i:nth-child(-n+2) { background: var(--rate-2); }
.ak-spoke .mini-scale .m[data-score="3"] .dots i:nth-child(-n+3) { background: var(--rate-3); }
.ak-spoke .mini-scale .m[data-score="4"] .dots i:nth-child(-n+4) { background: var(--rate-4); }
.ak-spoke .mini-scale .m[data-score="5"] .dots i:nth-child(-n+5) { background: var(--rate-5); }
@media (max-width: 820px) {
.ak-tier > header { grid-template-columns: 1fr; gap: 14px; }
.ak-tier > header .age { font-size: 44px; }
.ak-tier .spokes { grid-template-columns: 1fr; gap: 16px; }
}
/* ============================================================
v2 overrides — severity-driven hierarchy
Each tier owns a signal color. Cards inherit from their tier.
Dominant warning badge replaces 4-mini-bars as primary read.
============================================================ */
/* 1. Tier severity tokens — set via data-sev on .ak-tier */
.ak-tier[data-sev="7"] { --sev: #4a7a5a; --sev-soft: #e4ede5; --sev-ink: #ffffff; --sev-lbl: "Tout public"; }
.ak-tier[data-sev="10"] { --sev: #8a7a2a; --sev-soft: #efe9d4; --sev-ink: #ffffff; --sev-lbl: "Enfants plus grands"; }
.ak-tier[data-sev="12"] { --sev: #c07030; --sev-soft: #f5e3d0; --sev-ink: #ffffff; --sev-lbl: "Préados · ados"; }
.ak-tier[data-sev="15"] { --sev: #8a2e2a; --sev-soft: #ecd9d3; --sev-ink: #ffffff; --sev-lbl: "Avertis"; }
/* 2. Tier ownership — left color band + tinted wash, bigger header */
.ak-tier {
border-top: none;
padding: 32px 0 8px 36px;
position: relative;
}
.ak-tier::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--sev, var(--cluster-accent));
}
.ak-tier > header {
grid-template-columns: 180px 1fr;
}
.ak-tier > header .age {
font-size: 68px;
color: var(--sev, var(--color-text-primary));
}
.ak-tier > header .age small {
color: var(--sev, var(--color-text-muted));
opacity: 0.85;
}
/* 3. Spoke cards — tier wash, severity accent, stronger presence */
.ak-spoke {
gap: 14px;
padding: 22px 22px 0;
border: 1px solid var(--color-rule);
background: var(--color-surface);
position: relative;
overflow: hidden;
}
.ak-tier .ak-spoke {
border-top: 3px solid var(--sev, var(--cluster-accent));
}
.ak-spoke:hover {
border-color: var(--sev, var(--cluster-accent));
transform: translateY(-2px);
}
/* 4. Age chip — big, severity-colored, pops */
.ak-spoke .age-chip {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
text-transform: none;
padding: 4px 10px 5px;
background: var(--sev, var(--cluster-accent));
color: var(--sev-ink, #fff);
line-height: 1;
min-width: auto;
}
/* 5. Dominant warning badge — highest-scoring category as big tag */
.ak-spoke .headline-warn {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-primary);
padding: 10px 14px;
background: var(--sev-soft, var(--cluster-accent-soft));
border-left: 3px solid var(--sev, var(--cluster-accent));
margin: 4px -22px 0;
}
.ak-spoke .headline-warn .icon {
width: 10px; height: 10px;
background: var(--sev, var(--cluster-accent));
flex: 0 0 auto;
border-radius: 0;
}
.ak-spoke .headline-warn b {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--sev, var(--cluster-accent));
}
/* 6. Mini-scale — larger bars, readable labels, strong contrast */
.ak-spoke .mini-scale {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 14px 22px 18px;
border-top: 1px solid var(--color-rule-soft);
margin: 6px -22px 0;
}
.ak-spoke .mini-scale .m {
gap: 6px;
font-size: 10px;
color: var(--color-text-secondary);
}
.ak-spoke .mini-scale .m .lb {
color: var(--color-text-primary);
font-weight: 500;
}
.ak-spoke .mini-scale .m .dots {
gap: 3px;
}
.ak-spoke .mini-scale .m .dots i {
height: 6px;
background: var(--rate-track);
}
/* High-contrast fills per score */
.ak-spoke .mini-scale .m[data-score="0"] .dots i { background: #d8d2c4; }
.ak-spoke .mini-scale .m[data-score="1"] .dots i:nth-child(-n+1) { background: #4a7a5a; }
.ak-spoke .mini-scale .m[data-score="2"] .dots i:nth-child(-n+2) { background: #8a9a40; }
.ak-spoke .mini-scale .m[data-score="3"] .dots i:nth-child(-n+3) { background: #c88a3a; }
.ak-spoke .mini-scale .m[data-score="4"] .dots i:nth-child(-n+4) { background: #b85a3a; }
.ak-spoke .mini-scale .m[data-score="5"] .dots i:nth-child(-n+5) { background: #8a2e2a; }
/* Score number bubble beside each label */
.ak-spoke .mini-scale .m .num {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
color: var(--color-text-primary);
line-height: 1;
margin-left: 4px;
}
/* Tier legend — echoes severity colors */
.ak-tier-legend a[data-sev="7"]:hover { border-top-color: #4a7a5a; }
.ak-tier-legend a[data-sev="10"]:hover { border-top-color: #8a7a2a; }
.ak-tier-legend a[data-sev="12"]:hover { border-top-color: #c07030; }
.ak-tier-legend a[data-sev="15"]:hover { border-top-color: #8a2e2a; }
.ak-tier-legend a[data-sev] .age { color: inherit; }
.ak-tier-legend a[data-sev="7"] .age { color: #4a7a5a; }
.ak-tier-legend a[data-sev="10"] .age { color: #8a7a2a; }
.ak-tier-legend a[data-sev="12"] .age { color: #c07030; }
.ak-tier-legend a[data-sev="15"] .age { color: #8a2e2a; }
@media (max-width: 820px) {
.ak-tier { padding-left: 20px; }
.ak-tier > header { grid-template-columns: 1fr; }
.ak-tier > header .age { font-size: 48px; }
.ak-spoke .mini-scale { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ak-spoke .mini-scale .m { font-size: 9px; }
}
/* ============================================================
v3 — CRITICAL: never abbreviate "violence" to "Viol." in French.
Stack mini-scale as 4 horizontal rows so full-word labels fit.
============================================================ */
.ak-spoke .mini-scale {
display: flex !important;
flex-direction: column;
gap: 6px !important;
padding: 14px 22px 18px !important;
border-top: 1px solid var(--color-rule-soft) !important;
margin: 6px -22px 0 !important;
}
.ak-spoke .mini-scale .m {
display: grid !important;
grid-template-columns: 78px 1fr auto;
align-items: center;
gap: 10px !important;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-secondary);
flex-direction: initial !important;
}
.ak-spoke .mini-scale .m .lb {
color: var(--color-text-primary);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ak-spoke .mini-scale .m .num {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
color: var(--color-text-primary);
line-height: 1;
margin-left: 0;
min-width: 14px;
text-align: right;
text-transform: none;
/* Extract num out of the lb span by making it float */
}
/* The num span is INSIDE .lb — move it visually to the right column.
We restructure via positioning: the .lb gets the label text only (num hidden
via CSS), and we add num back via ::after for layout. Simplest path: just
hide the inline num, let grid column 3 be empty, and rely on bars width only. */
.ak-spoke .mini-scale .m .lb .num {
float: right;
}
.ak-spoke .mini-scale .m .dots {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 3px;
}
.ak-spoke .mini-scale .m .dots i {
width: 100%;
height: 8px;
background: var(--rate-track);
}
/* ============================================================
v4 — Library model
- Poster-tile card: typographic poster top, meta bottom
- Quick-nav hub: 3 routing panels on pillar
- À la une trending rail
- Catalogue page grid + filters
============================================================ */
/* Per-severity tokens also available outside .ak-tier (for catalogue) */
.has-sev[data-sev="6"], .has-sev[data-sev="7"] { --sev: #4a7a5a; --sev-soft: #e4ede5; --sev-ink:#fff; }
.has-sev[data-sev="8"], .has-sev[data-sev="9"], .has-sev[data-sev="10"] { --sev: #8a7a2a; --sev-soft: #efe9d4; --sev-ink:#fff; }
.has-sev[data-sev="11"], .has-sev[data-sev="12"], .has-sev[data-sev="13"] { --sev: #c07030; --sev-soft: #f5e3d0; --sev-ink:#fff; }
.has-sev[data-sev="14"], .has-sev[data-sev="15"], .has-sev[data-sev="16"], .has-sev[data-sev="17"], .has-sev[data-sev="18"] { --sev: #8a2e2a; --sev-soft: #ecd9d3; --sev-ink:#fff; }
/* ----- Poster-tile card (replaces old spoke card entirely) ----- */
.ak-pcard {
text-decoration: none;
color: inherit;
display: block;
border: 1px solid var(--color-rule);
background: var(--color-surface);
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
position: relative;
overflow: hidden;
}
.ak-pcard:hover {
transform: translateY(-3px);
border-color: var(--sev, var(--cluster-accent));
box-shadow: 0 6px 18px -8px rgba(0,0,0,0.18);
}
/* Poster area — colored field with severity tint, age badge, studio stamp.
No title in the poster — title belongs in .meta below. This keeps every
card visually identical whatever the title length. */
.ak-pcard .poster {
aspect-ratio: 3 / 4;
position: relative;
overflow: hidden;
background: var(--sev, var(--cluster-accent));
box-sizing: border-box;
}
/* Layered texture so the tile has visual weight without being flat */
.ak-pcard .poster::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 22% 18%, rgba(255,255,255,0.20), transparent 55%),
radial-gradient(ellipse at 78% 82%, rgba(0,0,0,0.28), transparent 60%),
repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 3px, transparent 3px 8px);
pointer-events: none;
z-index: 0;
}
/* A big faint serif monogram to give each tile identity (real element — html2image renders pseudos unreliably) */
.ak-pcard .poster .mono {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-display);
font-variation-settings: "opsz" 144;
font-size: clamp(80px, 11vw, 140px);
line-height: 1;
font-weight: 600;
letter-spacing: -0.04em;
color: rgba(255,255,255,0.34);
pointer-events: none;
white-space: nowrap;
font-style: italic;
z-index: 1;
user-select: none;
}
.ak-pcard .poster .stamp,
.ak-pcard .poster .age-badge { z-index: 2; }
/* Studio + year stamp — full-width strip at the bottom of the poster,
with a subtle dark gradient so the text is legible over any image.
No conflict with the age-badge (top-left) because they're on
different horizontal bands. */
.ak-pcard .poster .stamp {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: auto;
padding: 22px 14px 10px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.95);
background: linear-gradient(
to top,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.35) 60%,
rgba(0,0,0,0) 100%
);
border: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
/* Age badge — top-left corner of the poster, color-coded chip */
.ak-pcard .age-badge {
position: absolute;
top: 14px;
left: 14px;
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
padding: 8px 12px 9px;
background: #fff;
color: var(--sev, var(--cluster-accent));
box-shadow: 0 2px 6px -2px rgba(0,0,0,0.25);
z-index: 3; /* above stamp in case of narrow cards */
}
/* Meta block below poster */
.ak-pcard .meta {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ak-pcard .meta .title {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 17px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--color-text-primary);
margin: 0;
/* 2-line clamp */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.5em;
}
/* Card excerpt — the review's dek in normal case, clamped to 2-3 lines.
The colored severity dot sits inline at the start (not a separate flex
child) so the line-clamp works cleanly. */
.ak-pcard .meta .warn {
font-family: var(--font-body, inherit);
font-size: 13px;
letter-spacing: 0;
text-transform: none;
color: var(--color-text-secondary);
font-weight: 400;
line-height: 1.4;
margin: 0;
/* 3-line clamp */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
position: relative;
padding-left: 14px;
}
.ak-pcard .meta .warn::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 6px; height: 6px;
background: var(--sev, var(--cluster-accent));
border-radius: 1px;
}
/* ----- Quick-nav hub: 3 panels ----- */
.ak-hub {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin: 64px 0 24px;
border-top: 1px solid var(--color-rule);
border-bottom: 1px solid var(--color-rule);
}
.ak-hub > .panel {
padding: 32px 28px 30px;
display: flex;
flex-direction: column;
gap: 16px;
border-right: 1px solid var(--color-rule);
background: var(--color-surface);
}
.ak-hub > .panel:last-child { border-right: none; }
.ak-hub .panel-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.ak-hub .panel-head .kicker {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cluster-accent);
}
.ak-hub .panel-head .num {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--color-text-muted);
}
.ak-hub .panel-title {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 22px;
font-weight: 500;
line-height: 1.22;
letter-spacing: -0.005em;
margin: 0 0 4px;
color: var(--color-text-primary);
}
.ak-hub .panel-desc {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
color: var(--color-text-secondary);
margin: 0 0 6px;
}
/* Age buttons inside panel 1 */
.ak-hub .age-btns {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin-top: auto;
}
.ak-hub .age-btns a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 14px 6px 12px;
text-decoration: none;
color: inherit;
background: var(--sev-soft, var(--cluster-accent-soft));
border: 1px solid transparent;
transition: border-color 150ms ease, transform 150ms ease;
}
.ak-hub .age-btns a:hover { border-color: var(--sev, var(--cluster-accent)); transform: translateY(-2px); }
.ak-hub .age-btns a .n {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 24px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
color: var(--sev, var(--cluster-accent));
}
.ak-hub .age-btns a .c {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
/* Popular titles list inside panel 2 */
.ak-hub .pop-list {
display: flex;
flex-direction: column;
gap: 0;
margin-top: auto;
}
.ak-hub .pop-list a {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 12px;
align-items: baseline;
padding: 9px 0;
text-decoration: none;
color: var(--color-text-primary);
border-top: 1px solid var(--color-rule-soft);
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
transition: color 150ms ease;
}
.ak-hub .pop-list a:first-child { border-top: none; }
.ak-hub .pop-list a:hover { color: var(--cluster-accent); }
.ak-hub .pop-list a .rk {
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-text-muted);
letter-spacing: 0.04em;
font-weight: 400;
}
.ak-hub .pop-list a .ag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sev, var(--color-text-secondary));
font-weight: 500;
}
/* Two-column variant — used by panel 2 once the library outgrows a
single rail. Cuts vertical height roughly in half. The grid-flow:row
ensures rank order reads left-to-right, top-to-bottom (01 02 / 03 04).
On narrow viewports the columns collapse back to one. */
.ak-hub .pop-list.two-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
row-gap: 0;
grid-auto-flow: row;
}
.ak-hub .pop-list.two-col a {
/* The col gap separates the two rails; suppress the cross-column
border-top on every other item so each column reads as its own list. */
border-top: 1px solid var(--color-rule-soft);
}
/* First row in each column drops the top border. Items at index 1 and 2
(0-indexed) are the first row across the two columns. */
.ak-hub .pop-list.two-col a:nth-child(1),
.ak-hub .pop-list.two-col a:nth-child(2) { border-top: none; }
@media (max-width: 720px) {
.ak-hub .pop-list.two-col {
grid-template-columns: 1fr;
}
.ak-hub .pop-list.two-col a:nth-child(2) { border-top: 1px solid var(--color-rule-soft); }
}
/* Footer "voir tout" link inside the panel 2 column.
Same primitive as `.pick-foot a` (mono uppercase, same padding) but
FILLED rather than GHOST. This deliberate visual difference signals
the hierarchy: tier CTAs are narrow per-bucket calls (ghost), the
catalogue CTA is the broader cross-bucket call (filled).
Fallback color (#2a4d8f, parental cluster blue) ensures the button
stays visible if --cluster-accent doesn't propagate. */
.ak-hub .pop-foot {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
.ak-hub .pop-foot a {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
padding: 10px 16px;
background: var(--cluster-accent, #2a4d8f);
border: 1px solid var(--cluster-accent, #2a4d8f);
transition: filter 150ms, transform 150ms;
}
.ak-hub .pop-foot a:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
/* Theme tags in panel 3 */
.ak-hub .tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
}
.ak-hub .tag-cloud a {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 8px 12px;
border: 1px solid var(--color-rule);
text-decoration: none;
color: var(--color-text-primary);
background: var(--color-surface);
transition: border-color 150ms, color 150ms, background 150ms;
}
.ak-hub .tag-cloud a:hover {
border-color: var(--cluster-accent);
color: var(--cluster-accent);
background: var(--cluster-accent-soft);
}
.ak-hub .tag-cloud a .ct {
font-size: 10px;
opacity: 0.55;
margin-left: 4px;
}
/* ----- Tier picks: 4-6 cards per tier + "Voir tous" link ----- */
.ak-tier-picks {
margin-top: 24px;
}
.ak-tier-picks .pick-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.ak-tier-picks .pick-foot {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
.ak-tier-picks .pick-foot a {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sev, var(--cluster-accent));
text-decoration: none;
padding: 10px 14px;
border: 1px solid var(--sev, var(--cluster-accent));
transition: background 150ms, color 150ms;
}
.ak-tier-picks .pick-foot a:hover {
background: var(--sev, var(--cluster-accent));
color: #fff;
}
/* ----- À la une strip ----- */
.ak-trending {
margin: 80px 0 24px;
}
.ak-trending > header {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
margin-bottom: 24px;
border-top: 1px solid var(--color-text-primary);
padding-top: 16px;
}
.ak-trending > header h2 {
font-family: var(--font-display);
font-variation-settings: "opsz" 144;
font-size: clamp(28px, 3vw, 36px);
font-weight: 500;
margin: 0;
letter-spacing: -0.01em;
line-height: 1.1;
}
.ak-trending > header .lbl {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cluster-accent);
}
.ak-trending .trend-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.ak-trending .trend-grid .ak-pcard .poster {
aspect-ratio: 2 / 3;
padding: 14px;
}
.ak-trending .trend-grid .ak-pcard .poster .plaque {
font-size: 22px;
}
.ak-trending .trend-grid .ak-pcard .age-badge {
font-size: 17px;
padding: 6px 9px 7px;
}
/* ----- Catalogue layout ----- */
.ak-cat {
display: grid;
grid-template-columns: 240px 1fr;
gap: 40px;
margin-top: 32px;
}
.ak-cat .filters {
position: sticky;
top: 20px;
align-self: start;
display: flex;
flex-direction: column;
gap: 28px;
font-family: var(--font-body);
}
.ak-cat .filters h4 {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0 0 10px;
padding-top: 10px;
border-top: 1px solid var(--color-rule);
}
.ak-cat .filters .group { display: flex; flex-direction: column; gap: 6px; }
.ak-cat .filters .opt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 0;
font-size: 13.5px;
color: var(--color-text-primary);
cursor: pointer;
}
.ak-cat .filters .opt input { accent-color: var(--cluster-accent); }
.ak-cat .filters .opt .lbl {
display: flex; align-items: center; gap: 8px; flex: 1;
}
.ak-cat .filters .opt .age-pill {
display: inline-block;
min-width: 28px;
padding: 2px 6px 3px;
text-align: center;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--sev, var(--cluster-accent));
background: var(--sev-soft, var(--cluster-accent-soft));
line-height: 1;
}
.ak-cat .filters .opt .cnt {
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-text-muted);
}
.ak-cat .results-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--color-rule);
padding-bottom: 14px;
}
.ak-cat .results-head .count {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 22px;
font-weight: 500;
}
.ak-cat .results-head .count b { color: var(--cluster-accent); }
.ak-cat .results-head .sort {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-secondary);
}
.ak-cat .results-head .sort select {
border: 1px solid var(--color-rule);
background: var(--color-surface);
padding: 6px 10px;
font: inherit;
color: var(--color-text-primary);
}
.ak-cat .grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* ---------- Mobile filter UX (base) ---------- */
.ec-mobile-filters { display: none; }
.ec-sheet-close { display: none; }
.ec-sheet-backdrop { display: none; }
/* Responsive */
@media (max-width: 1100px) {
.ak-hub { grid-template-columns: 1fr; }
.ak-hub > .panel { border-right: none; border-bottom: 1px solid var(--color-rule); }
.ak-hub > .panel:last-child { border-bottom: none; }
.ak-tier-picks .pick-grid { grid-template-columns: repeat(3, 1fr); }
.ak-trending .trend-grid { grid-template-columns: repeat(3, 1fr); }
.ak-cat { grid-template-columns: 1fr; }
.ak-cat .filters { position: static; }
.ak-cat .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.ak-tier-picks .pick-grid,
.ak-trending .trend-grid,
.ak-cat .grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Mobile filter UX: chip strip + bottom sheet (<820px) ----------
Hidden above 820px where the sidebar layout works. Below 820px the
sidebar is hidden and replaced by:
1. Horizontal FSK pill row (the primary parent filter, always visible)
2. A "Filter" button that slides up a bottom sheet for plattform/sync/genre
The sheet wraps the existing checkboxes so the existing filter JS is reused. */
@media (max-width: 820px) {
.ak-cat { grid-template-columns: 1fr; gap: 16px; }
.ec-mobile-filters {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0 14px;
padding: 4px 0;
}
.ec-fsk-strip {
display: flex;
gap: 6px;
flex: 1 1 auto;
overflow-x: auto;
scrollbar-width: none;
padding: 2px 0;
-webkit-overflow-scrolling: touch;
}
.ec-fsk-strip::-webkit-scrollbar { display: none; }
.ec-fsk-pill {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border: 1px solid var(--color-rule);
background: var(--color-surface);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--color-text-primary);
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.ec-fsk-pill em {
font-style: normal;
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-size: 15px;
font-weight: 600;
color: var(--sev, var(--cluster-accent));
line-height: 1;
}
.ec-fsk-pill .fsk-cnt { font-size: 10px; color: var(--color-text-muted); }
.ec-fsk-pill[aria-pressed="true"] {
background: var(--sev-soft, var(--cluster-accent-soft));
border-color: var(--sev, var(--cluster-accent));
color: var(--sev, var(--cluster-accent));
}
.ec-fsk-pill[aria-pressed="true"] .fsk-cnt { color: var(--sev, var(--cluster-accent)); }
.ec-fsk-pill:disabled { opacity: 0.4; cursor: not-allowed; }
.ec-filter-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
border: 1px solid var(--color-text-primary);
background: var(--color-surface);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-primary);
cursor: pointer;
}
.ec-filter-btn:hover { background: var(--color-rule-soft); }
/* Badge: hidden by default; JS adds .is-on when there are active filters. */
.ec-filter-badge { display: none; }
.ec-filter-badge.is-on {
display: inline-block;
min-width: 18px;
padding: 1px 5px;
background: var(--cluster-accent);
color: #fff;
border-radius: 9px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-align: center;
}
/* Filter sidebar morphs into a FULL-SCREEN modal on mobile.
This is the standard pattern used by Netflix, Airbnb, Disney+, etc.
— covers the whole viewport, has its own header and apply bar,
no ambiguous half-popup feel. Slides up on open. */
.ak-cat .filters {
position: fixed;
inset: 0;
z-index: 1001;
overflow-y: auto;
background: var(--color-surface, #faf7ee);
padding: 0 0 96px; /* footer space for the sticky Apply bar */
transform: translateY(100%);
transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
gap: 0;
}
.ak-cat .filters.is-open { transform: translateY(0); }
/* Sticky modal header with title + close. Replaces the floating × */
.ak-cat .filters::before {
content: "Filter";
position: sticky;
top: 0;
z-index: 2;
display: block;
padding: 18px 20px 14px;
background: var(--color-surface, #faf7ee);
border-bottom: 1px solid var(--color-rule);
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--color-text-primary);
}
/* Filter group blocks: padded body + visible h4 separators. */
.ak-cat .filters > div { padding: 18px 20px; margin: 0; }
.ak-cat .filters > div + div { border-top: 1px solid var(--color-rule-soft); }
.ak-cat .filters h4 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--color-text-muted);
margin: 0 0 12px;
padding: 0;
border-top: none;
}
/* Hide FSK section inside the modal — the chip strip owns it. */
.ak-cat .filters > div:first-of-type { display: none; }
/* Close button: top-right, large tap target, sits on the sticky header. */
.ec-sheet-close {
display: block;
position: fixed;
top: 10px;
right: 10px;
z-index: 1003;
width: 44px; height: 44px;
border: none;
background: transparent;
color: var(--color-text-primary);
font-size: 30px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
}
.ec-sheet-close:hover { background: var(--color-rule-soft); }
/* Only render the close button while the modal is open (CSS-only). */
.ak-cat .filters:not(.is-open) ~ .ec-sheet-backdrop ~ * .ec-sheet-close,
body:not(.ec-sheet-open) .ec-sheet-close { display: none; }
body.ec-sheet-open .ec-sheet-close { display: block; }
/* Big tap targets for filter rows in the modal. */
.ak-cat .filters .opt {
padding: 14px 0;
font-size: 15.5px;
border-bottom: 1px solid var(--color-rule-soft);
}
.ak-cat .filters .opt:last-child { border-bottom: none; }
.ak-cat .filters .opt input { width: 22px; height: 22px; }
/* No backdrop needed — modal is full-screen. */
.ec-sheet-backdrop, .ec-sheet-backdrop.is-open { display: none; }
body.ec-sheet-open { overflow: hidden; }
/* Sticky "Apply" footer pinned to the bottom of the modal. */
.ak-cat .filters::after {
content: "";
position: fixed;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--color-rule);
z-index: 1002;
opacity: 0;
pointer-events: none;
}
.ec-apply-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 1003;
padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
background: var(--color-surface, #faf7ee);
border-top: 1px solid var(--color-rule);
display: none;
}
body.ec-sheet-open .ec-apply-bar {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.ec-apply-bar .reset {
background: transparent;
border: 1px solid var(--color-rule);
color: var(--color-text-primary);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 12px 18px;
cursor: pointer;
}
.ec-apply-bar .apply {
background: var(--cluster-accent);
color: var(--cluster-accent-ink, #fff);
border: 1px solid var(--cluster-accent);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 12px 18px;
cursor: pointer;
font-weight: 600;
}
}
/* ---------- Left-rail tier picker (Phase 6) ----------
Matches the existing .rail-l a rhythm (top-rule separator, mono,
muted → accent on hover). The age marker is rendered as styled
with the theme's --rate-* tokens so the color language stays coherent
with the content-severity scale used elsewhere. */
.ak-shell .rail-l .rail-head {
/* Section label above each group of rail links. Replaces the inline
style previously on the "Partager" div. */
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 8px;
padding-bottom: 4px;
}
.ak-shell .rail-l a.rail-tier {
/* Inherits .rail-l a (display:block, padding, top border, muted). We
only extend it with an inline age marker and a current-state hook. */
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--font-mono);
text-transform: none; /* labels are mixed-case prose */
letter-spacing: 0.02em;
font-size: 11px;
}
.ak-shell .rail-l a.rail-tier em {
font-style: normal;
font-weight: 600;
font-size: 12px;
min-width: 28px;
letter-spacing: 0.04em;
}
/* FSK-tier marker color — the PHP template sets a `style="color:…"` inline
using ak_fsk_color(). These attribute selectors cover older posts that
still use the French bucket keys (7-plus etc.) if any remain. */
.ak-shell .rail-l a.rail-tier[data-tier="fsk-0"] em { color: #d9d3c4; }
.ak-shell .rail-l a.rail-tier[data-tier="fsk-6"] em { color: #e3b44d; }
.ak-shell .rail-l a.rail-tier[data-tier="fsk-12"] em { color: #6aab5d; }
.ak-shell .rail-l a.rail-tier[data-tier="fsk-16"] em { color: #3a6ea5; }
.ak-shell .rail-l a.rail-tier[data-tier="fsk-18"] em { color: #b04242; }
.ak-shell .rail-l a.rail-tier.is-current {
color: var(--cluster-accent);
background: var(--cluster-accent-soft);
padding-left: 10px;
padding-right: 10px;
}
.ak-shell .rail-l a.rail-tier.is-current em {
color: var(--cluster-accent);
}
/* ---------- Right-rail Schnell-Info (Eltern-Check) ---------- */
.ak-shell .rail-r .rail-head {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 12px;
}
.ak-shell .rail-r .rail-dl {
margin: 0;
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.01em;
}
.ak-shell .rail-r .rail-dl dt {
color: var(--color-text-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 10px;
margin-top: 16px;
}
.ak-shell .rail-r .rail-dl dt:first-of-type { margin-top: 0; }
.ak-shell .rail-r .rail-dl dd {
margin: 3px 0 0;
padding: 0;
color: var(--color-text-primary);
}
/* Visual footer byline (Lena Weiss) — override generic .ak-endbyline that was
tuned for the old two-column author card layout. */
.ak-body .ak-endbyline {
margin-top: 64px;
padding-top: 24px;
border-top: 1px solid var(--color-rule);
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-text-muted);
letter-spacing: 0.02em;
line-height: 1.5;
}
.ak-body .ak-endbyline strong {
color: var(--color-text-primary);
font-weight: 600;
}
/* Fix the Headings we added inside .ak-body — the old .ak-body h2 rule
might be bumping into these. Tighten the rhythm around German H2s. */
.ak-body h2 {
margin-top: 48px;
margin-bottom: 16px;
}
.ak-body h2:first-of-type { margin-top: 32px; }
/* FSK badge used in home/archive card grid */
.ak-card .poster .fsk-badge {
position: absolute;
top: 12px; right: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px; height: 24px;
padding: 0 8px;
border-radius: 3px;
color: #fff;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
}
/* ============================================================
Mobile polish (Phase 7) — fills the <480px gap the existing
breakpoints (1100, 820, 720, 560) leave open for EC surfaces.
============================================================ */
/* Phone (1-column card grids) */
@media (max-width: 520px) {
.ak-tier-picks .pick-grid,
.ak-trending .trend-grid,
.ak-cat .grid {
grid-template-columns: 1fr;
gap: 16px;
}
.ak-tier-picks .pick-grid .ak-pcard .poster,
.ak-trending .trend-grid .ak-pcard .poster,
.ak-cat .grid .ak-pcard .poster {
aspect-ratio: 16 / 9;
}
}
/* TL;DR verdict block — tighten on mobile, wrap the pictos chips */
@media (max-width: 560px) {
.ak-tldr .verdict {
font-size: 17px;
line-height: 1.35;
}
.ak-tldr .pictos {
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.ak-tldr .pictos .sep { display: none; }
}
/* Catalogue header — stack lead + search vertically on phone */
@media (max-width: 560px) {
.cat-lead {
grid-template-columns: 1fr;
gap: 18px;
align-items: start;
margin: 28px 0 18px;
padding-bottom: 18px;
}
.cat-lead h1 { font-size: clamp(32px, 9vw, 44px); line-height: 1.05; }
.cat-lead .search { min-width: 0; width: 100%; }
}
/* Pillar tier-header — the 72px "12" sits on its own line on mobile */
@media (max-width: 560px) {
.ak-tier-header {
grid-template-columns: 1fr;
gap: 10px;
margin: 40px 0 14px;
}
.ak-tier-header .age { font-size: 48px; }
.ak-tier-header .text h2 { font-size: 22px; }
.ak-tier-header::before { width: 60px; }
}
/* Philosophy grid collapses from 3-col to 1-col already via ak-pillar.css,
but the outer grid (label column + principles column) also needs to stack. */
@media (max-width: 720px) {
.ak-philosophy .principles { gap: 24px; }
.ak-philosophy { margin-top: 32px; gap: 20px; }
}
/* Cluster banner — wraps nav under label on phone */
@media (max-width: 560px) {
.ak-cluster-banner .inner {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 0 20px;
}
.ak-cluster-banner .inner .nav {
gap: 16px;
flex-wrap: wrap;
}
}
/* Cat-methodology strip stacks */
@media (max-width: 560px) {
.cat-methodology {
grid-template-columns: 1fr;
padding: 22px 20px;
gap: 16px;
}
.cat-methodology a.btn { align-self: flex-start; }
}
/* (Removed duplicate @1100 .ak-cat .filters { position: static } — it
was overriding the @820 mobile rule that turns .filters into a
slide-up modal, causing the cards area to render off-screen.) */
/* FAQ list becomes single column below tablet already, tighten padding */
@media (max-width: 560px) {
.ak-faq { margin: 48px 0 24px; }
.ak-faq > header h2 { font-size: 24px; }
.ak-faq summary { font-size: 15px; }
.ak-faq details { padding: 14px 0; }
}
/* Endbyline — center on mobile */
@media (max-width: 560px) {
.ak-body .ak-endbyline { padding-top: 18px; margin-top: 40px; }
}
/* The article breadcrumb wraps cleanly on mobile */
@media (max-width: 560px) {
.ak-article-lead .eyebrow-bar span {
font-size: 10px;
line-height: 1.5;
word-break: break-word;
}
}
/* Active-filter chips row — tighter on phone */
@media (max-width: 560px) {
.active-filters { gap: 6px; margin-bottom: 14px; }
.active-filters .chip { font-size: 10px; padding: 4px 8px; }
}
/* Prevent horizontal scroll anywhere on mobile (catch-all) */
/* overflow-x: clip (not hidden) — clip behaves identically for runaway
content but DOESN'T create a containing block that breaks
`position: sticky` on descendants. The .rail-l / .rail-r rails need
sticky to work and used to scroll along in the previous build. */
html, body { overflow-x: clip; }
/* ============================================================
Single article · mobile-first polish
Rails vanish <820px — this block adds inline nav + tightens
typography so the article reads well on a phone.
============================================================ */
/* Mobile tier strip: hidden on desktop (rail handles it), shown on mobile */
.ec-mobile-tiers { display: none; }
@media (max-width: 820px) {
.ec-mobile-tiers {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin: 0 0 24px;
padding: 12px;
background: var(--cluster-accent-soft);
border: 1px solid var(--color-rule);
}
.ec-mobile-tiers .ec-mtier {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 4px;
text-decoration: none;
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: 2px;
transition: transform 120ms, border-color 120ms;
}
.ec-mobile-tiers .ec-mtier em {
font-style: normal;
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
line-height: 1;
color: var(--sev, var(--color-text-primary));
}
.ec-mobile-tiers .ec-mtier .lbl {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
line-height: 1;
}
.ec-mobile-tiers .ec-mtier.is-current {
background: var(--sev);
border-color: var(--sev);
}
.ec-mobile-tiers .ec-mtier.is-current em,
.ec-mobile-tiers .ec-mtier.is-current .lbl {
color: #fff;
}
}
/* Single article — phone tightening */
@media (max-width: 560px) {
/* Lead block */
.ak-article-lead { margin-top: 24px; }
.ak-article-lead h1 {
font-size: clamp(28px, 8vw, 36px) !important;
line-height: 1.1;
letter-spacing: -0.015em;
margin: 8px 0 12px;
}
.ak-article-lead h1 small {
font-size: 0.5em !important;
margin-top: 4px !important;
}
.ak-article-lead .dek {
font-size: 17px;
line-height: 1.4;
}
/* Meta row: stack author + pubmeta */
.ak-article-lead .meta-row {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.ak-article-lead .pubmeta {
font-size: 11px;
color: var(--color-text-muted);
}
.ak-article-lead .author .name { font-size: 15px; }
.ak-article-lead .author .role { font-size: 11px; }
/* TL;DR interior padding shrink */
.ak-tldr {
padding: 20px 18px 22px 14px;
margin: 8px 0 32px;
}
/* H2 rhythm */
.ak-body h2 {
margin-top: 36px;
margin-bottom: 12px;
font-size: 22px;
line-height: 1.2;
}
.ak-body h2:first-of-type { margin-top: 24px; }
.ak-body p { font-size: 15.5px; line-height: 1.55; }
}
/* Axis ratings mobile — label above scale on narrow */
@media (max-width: 640px) {
.ak-pratings { margin: 32px 0; }
.ak-prating {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 0;
}
.ak-prating .label {
font-size: 13px;
}
.ak-prating .scale .meta {
font-size: 12px;
}
.ak-prating .notes {
margin-left: 0 !important;
padding-left: 0 !important;
}
.ak-prating .notes p { font-size: 14px; line-height: 1.5; }
}
/* Wo-streamen plattform list — stack on phone */
@media (max-width: 560px) {
.ak-body ul[style*="grid-template-columns"] {
display: flex !important;
flex-direction: column;
gap: 8px !important;
}
}
/* End byline tightening */
@media (max-width: 560px) {
.ak-body .ak-endbyline {
margin-top: 32px;
padding-top: 16px;
font-size: 11px;
}
}
/* Breadcrumb: ensure it wraps instead of overflowing */
.ak-article-lead .eyebrow-bar {
line-height: 1.5;
}
.ak-article-lead .eyebrow-bar span {
display: inline;
word-break: break-word;
}
/* ============================================================
Single article · portrait cover next to title
Mobile-first: 96px cover + text column. Progressive enhance up.
============================================================ */
/* Mobile-first: stack cover ABOVE text, full-width-ish, with breathing
room. The old side-by-side layout left the cover stamp-sized and
forced the H1 to wrap awkwardly mid-word. Editorial sites (NYT,
Atlantic) all stack hero on phone — match that pattern. */
.ak-article-lead .ec-lead-row {
display: flex;
flex-direction: column;
gap: 22px;
align-items: stretch;
}
.ak-article-lead .ec-cover {
flex: 0 0 auto;
width: min(72%, 280px);
margin: 0 auto;
padding: 0;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 12px 32px -12px rgba(0,0,0,0.35), 0 3px 8px -2px rgba(0,0,0,0.15);
background: var(--color-rule, #e4dfd0);
}
.ak-article-lead .ec-cover img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2 / 3;
object-fit: cover;
}
.ak-article-lead .ec-lead-text { min-width: 0; }
.ak-article-lead .ec-lead-text h1 small {
display: block;
font-size: 0.48em;
color: var(--color-text-muted);
font-weight: 400;
margin-top: 6px;
letter-spacing: 0;
}
/* Tablet up: side-by-side kicks back in. */
@media (min-width: 720px) {
.ak-article-lead .ec-lead-row {
flex-direction: row;
gap: 28px;
align-items: flex-start;
}
.ak-article-lead .ec-cover {
width: 160px;
margin: 0;
}
}
@media (min-width: 1100px) {
.ak-article-lead .ec-lead-row { gap: 36px; }
.ak-article-lead .ec-cover { width: 200px; }
}
/* ---------- Article H1 framing (Eltern-Check question) ---------- */
.ak-article-lead .ec-lead-text .kicker {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cluster-accent, var(--color-accent));
margin-bottom: 8px;
}
.ak-article-lead .ec-lead-text h1 {
font-weight: 500;
line-height: 1.04;
/* Mobile 32px, tablet 40px, desktop 56px — fluid via clamp. */
font-size: clamp(32px, 5.4vw + 8px, 56px);
letter-spacing: -0.018em;
margin: 0;
}
.ak-article-lead .ec-lead-text h1 em {
font-style: italic;
color: var(--cluster-accent, var(--color-accent));
font-variation-settings: "opsz" 144;
}
.ak-article-lead .ec-subtitle {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--color-text-muted);
margin: 10px 0 18px;
line-height: 1.5;
}
.ak-article-lead .ec-subtitle .og {
font-style: italic;
color: var(--color-text-secondary);
}
.ak-article-lead .ec-subtitle .sep {
margin: 0 8px;
opacity: 0.4;
}
@media (max-width: 560px) {
.ak-article-lead .ec-lead-text .kicker { font-size: 9.5px; margin-bottom: 6px; }
.ak-article-lead .ec-subtitle { font-size: 11px; margin: 8px 0 14px; }
}
/* ---------- End-byline (bottom of article) · Phase 7 redesign ---------- */
.ak-body .ak-endbyline {
margin-top: 72px;
padding-top: 32px;
border-top: 1px solid var(--color-rule);
font-family: inherit;
font-size: 14px;
color: var(--color-text-primary);
letter-spacing: 0;
line-height: 1.55;
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
.ak-body .ak-endbyline .byline-who {
display: grid;
grid-template-columns: 64px 1fr;
gap: 16px;
align-items: start;
}
.ak-body .ak-endbyline .byline-avatar {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--cluster-accent-soft, color-mix(in srgb, var(--cluster-accent) 16%, transparent));
color: var(--cluster-accent, var(--color-accent));
font-family: var(--font-display);
font-weight: 600;
font-size: 22px;
letter-spacing: 0.02em;
display: flex;
align-items: center;
justify-content: center;
}
.ak-body .ak-endbyline .byline-name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.005em;
}
.ak-body .ak-endbyline .byline-role {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: 3px;
}
.ak-body .ak-endbyline .byline-bio {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.55;
color: var(--color-text-secondary);
max-width: 64ch;
}
.ak-body .ak-endbyline .byline-updated {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--color-surface-2, #f6f3ec);
border: 1px solid var(--color-rule);
border-radius: 3px;
width: max-content;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
}
.ak-body .ak-endbyline .byline-updated .label {
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-muted);
}
.ak-body .ak-endbyline .byline-updated time {
color: var(--color-text-primary);
font-weight: 500;
}
.ak-body .ak-endbyline .byline-credit {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-muted);
letter-spacing: 0.02em;
padding-top: 10px;
border-top: 1px dashed var(--color-rule);
}
.ak-body .ak-endbyline .byline-credit a {
color: var(--cluster-accent, var(--color-accent));
text-decoration: none;
}
.ak-body .ak-endbyline .byline-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.ak-body .ak-endbyline .byline-actions a {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cluster-accent, var(--color-accent));
text-decoration: none;
padding: 9px 14px;
border: 1px solid var(--cluster-accent, var(--color-accent));
border-radius: 2px;
transition: background 150ms, color 150ms;
}
.ak-body .ak-endbyline .byline-actions a:hover {
background: var(--cluster-accent, var(--color-accent));
color: #fff;
}
@media (max-width: 560px) {
.ak-body .ak-endbyline { margin-top: 48px; padding-top: 24px; gap: 16px; }
.ak-body .ak-endbyline .byline-who { grid-template-columns: 48px 1fr; gap: 12px; }
.ak-body .ak-endbyline .byline-avatar { width: 48px; height: 48px; font-size: 18px; }
.ak-body .ak-endbyline .byline-name { font-size: 16px; }
}