.fa-linked-block {
margin: 2.5em 0;
padding: 22px 26px;
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #f8fafc;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.fa-linked-block__header {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 14px;
margin-bottom: 16px;
border-bottom: 2px solid #e2e8f0;
}
.fa-linked-block__icon { font-size: 22px; }
.fa-linked-block__title {
margin: 0;
font-size: 15px;
font-weight: 800;
color: #1a2332;
letter-spacing: -.2px;
} .fa-linked-group {
margin-bottom: 16px;
}
.fa-linked-group:last-child {
margin-bottom: 0;
}
.fa-linked-group__title {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 5px;
} .fa-linked-cards {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.fa-fe-card {
display: flex;
align-items: center;
gap: 10px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 8px 14px 8px 8px;
text-decoration: none;
color: inherit;
transition: all .2s ease;
min-width: 160px;
max-width: 260px;
}
.fa-fe-card:hover {
border-color: #1b6ca8;
box-shadow: 0 3px 12px rgba(27, 108, 168, .12);
transform: translateY(-1px);
text-decoration: none;
color: inherit;
}
.fa-fe-card__img {
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: #f1f5f9;
border: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
}
.fa-fe-card__img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.fa-fe-card__img span {
font-size: 20px;
}
.fa-fe-card__info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.fa-fe-card__name {
font-size: 13px;
font-weight: 700;
color: #1a2332;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.fa-fe-card:hover .fa-fe-card__name {
color: #1b6ca8;
}
.fa-fe-card__meta {
font-size: 11px;
color: #64748b;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .fa-match-scoreboard {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #0f4c75, #1b6ca8);
border-radius: 14px;
padding: 24px 20px;
margin: 1.5em 0;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.fa-match-team {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
flex: 1;
}
.fa-match-team img {
width: 56px;
height: 56px;
object-fit: contain;
}
.fa-match-team__name {
font-weight: 700;
font-size: 14px;
text-align: center;
}
.fa-match-center {
text-align: center;
padding: 0 20px;
}
.fa-match-score {
font-size: 42px;
font-weight: 900;
letter-spacing: -2px;
line-height: 1;
}
.fa-match-ht {
font-size: 12px;
opacity: .75;
margin-top: 4px;
}
.fa-match-status {
display: inline-block;
background: rgba(255,255,255,.2);
border-radius: 20px;
padding: 4px 12px;
font-size: 11px;
margin-top: 8px;
font-weight: 600;
} .fa-entity-articles {
margin: 2em 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.fa-entity-articles__title {
font-size: 15px;
font-weight: 800;
color: #1a2332;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 2px solid #e2e8f0;
}
.fa-article-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.fa-article-item {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
transition: border-color .2s;
}
.fa-article-item:hover {
border-color: #1b6ca8;
}
.fa-article-thumb {
flex-shrink: 0;
width: 72px;
height: 54px;
overflow: hidden;
border-radius: 6px;
display: block;
}
.fa-article-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fa-article-info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.fa-article-title {
font-size: 13px;
font-weight: 700;
color: #1a2332;
text-decoration: none;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fa-article-title:hover {
color: #1b6ca8;
}
.fa-article-date {
font-size: 11px;
color: #94a3b8;
margin-top: 4px;
} @media (max-width: 600px) {
.fa-linked-block { padding: 16px; }
.fa-linked-cards { gap: 6px; }
.fa-fe-card { min-width: 140px; }
.fa-match-scoreboard { flex-direction: column; gap: 16px; padding: 20px 14px; }
.fa-match-center { order: -1; }
.fa-match-score { font-size: 34px; }
}@import url("https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
:root {
--bg:        #f5f5f7;
--surface:   #ffffff;
--surface2:  #f0f0f4;
--border:    #e4e4ea;
--text:      #111118;
--text2:     #44444c;
--muted:     #8a8a96;
--accent:    #0066ff;
--accent-dk: #0044cc;
--accent-lt: #e8f0ff;
--r-sm: 8px;
--r:    12px;
--r-lg: 18px;
--sh-sm: 0 1px 3px rgba(0,0,0,.05);
--sh:    0 4px 16px rgba(0,0,0,.08);
--sh-lg: 0 12px 40px rgba(0,0,0,.10);
--nav-h:  56px;
--tab-h:  62px;
--max-w:  680px;
--side-w: 300px;
--font:         'DM Sans', system-ui, sans-serif;
--font-display: 'Syne', system-ui, sans-serif;
--ease:   cubic-bezier(.25,.1,.25,1);
--spring: cubic-bezier(.34,1.56,.64,1);
} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.55;
min-height: 100vh;
padding-bottom: var(--tab-h);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
@media (min-width: 1024px) {
body { padding-bottom: 0; }
.fa-bottom-nav { display: none !important; }
} .fa-container {
max-width: calc(var(--max-w) + var(--side-w) + 48px);
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 768px)  { .fa-container { padding: 0 28px; } }
@media (min-width: 1280px) { .fa-container { padding: 0 40px; } }
.fa-layout {
display: grid;
grid-template-columns: 1fr;
padding-top: calc(var(--nav-h) + 16px);
padding-bottom: 32px;
gap: 0;
}
@media (min-width: 1024px) {
.fa-layout { grid-template-columns: var(--max-w) var(--side-w); gap: 28px; align-items: start; }
} .fa-top-nav {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--nav-h);
background: rgba(255,255,255,.88);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border);
z-index: 100;
display: flex;
align-items: center;
transition: box-shadow .2s var(--ease);
}
.fa-top-nav.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.fa-top-nav-inner {
width: 100%;
max-width: calc(var(--max-w) + var(--side-w) + 48px);
margin: 0 auto;
padding: 0 16px;
display: flex;
align-items: center;
gap: 12px;
}
@media (min-width: 768px)  { .fa-top-nav-inner { padding: 0 28px; } }
@media (min-width: 1280px) { .fa-top-nav-inner { padding: 0 40px; } }
.fa-logo {
font-family: var(--font-display);
font-size: 17px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--text);
display: flex;
align-items: center;
gap: 7px;
}
.fa-logo-dot {
width: 8px; height: 8px;
background: var(--accent);
border-radius: 50%;
}
.fa-nav-links {
display: none;
align-items: center;
gap: 2px;
margin-left: auto;
}
@media (min-width: 1024px) { .fa-nav-links { display: flex; } }
.fa-nav-link {
padding: 5px 12px;
border-radius: 20px;
font-size: 13.5px;
font-weight: 500;
color: var(--text2);
transition: background .14s, color .14s;
}
.fa-nav-link:hover { background: var(--surface2); color: var(--text); }
.fa-nav-link.active { color: var(--text); font-weight: 600; } .fa-bottom-nav {
position: fixed;
bottom: 0; left: 0; right: 0;
height: var(--tab-h);
background: rgba(255,255,255,.94);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid var(--border);
z-index: 100;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.fa-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
font-size: 10px;
font-weight: 600;
color: var(--muted);
transition: color .18s;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
position: relative;
}
.fa-tab.active { color: var(--accent); }
.fa-tab.active::after {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 20px; height: 2px;
background: var(--accent);
border-radius: 0 0 2px 2px;
}
.fa-tab-icon { font-size: 20px; line-height: 1; transition: transform .2s var(--spring); }
.fa-tab.active .fa-tab-icon { transform: scale(1.08); } .fa-reading-bar {
position: fixed;
top: 0; left: 0;
height: 2px;
background: var(--accent);
z-index: 200;
width: 0%;
transition: width .08s linear;
pointer-events: none;
} .fa-card {
background: var(--surface);
border-radius: var(--r);
border: 1px solid var(--border);
overflow: hidden;
}
.fa-card + .fa-card { margin-top: 12px; }
.fa-card-head {
padding: 13px 16px;
border-bottom: 1px solid var(--border);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
display: flex;
align-items: center;
justify-content: space-between;
}
.fa-card-head-link { font-size: 12px; color: var(--accent); font-weight: 600; text-transform: none; letter-spacing: 0; } .fa-section-title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 800;
letter-spacing: -.02em;
margin-bottom: 12px;
color: var(--text);
display: flex;
align-items: center;
gap: 10px;
}
.fa-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } .fa-hero-article {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--surface2);
margin-bottom: 16px;
box-shadow: var(--sh-lg);
display: block;
}
.fa-hero-article img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
transition: transform .4s var(--ease);
}
.fa-hero-article:hover img { transform: scale(1.02); }
.fa-hero-article-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.76) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
}
.fa-hero-article-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 18px; }
.fa-hero-article-cat {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: white;
background: var(--accent);
padding: 2px 8px;
border-radius: 3px;
margin-bottom: 7px;
}
.fa-hero-article-title {
font-family: var(--font-display);
font-size: clamp(17px, 4vw, 22px);
font-weight: 800;
line-height: 1.22;
color: white;
margin-bottom: 6px;
letter-spacing: -.01em;
}
.fa-hero-article-meta { font-size: 12px; color: rgba(255,255,255,.6); font-weight: 500; } .fa-article-row {
display: flex;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
transition: background .14s;
text-decoration: none;
}
.fa-article-row:last-child { border-bottom: none; }
.fa-article-row:hover { background: var(--surface2); }
.fa-article-row:active { background: var(--border); }
.fa-article-row-thumb {
width: 78px; height: 58px;
border-radius: var(--r-sm);
object-fit: cover;
flex-shrink: 0;
background: var(--surface2);
}
.fa-article-row-thumb-ph {
width: 78px; height: 58px;
border-radius: var(--r-sm);
flex-shrink: 0;
background: var(--surface2);
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase;
}
.fa-article-row-title {
font-size: 13.5px;
font-weight: 600;
line-height: 1.38;
color: var(--text);
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fa-article-row-meta { font-size: 11px; color: var(--muted); font-weight: 500; } .fa-entities-scroll {
display: flex;
gap: 12px;
overflow-x: auto;
padding: 2px 0 10px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.fa-entities-scroll::-webkit-scrollbar { display: none; }
.fa-entity-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
flex-shrink: 0;
text-decoration: none;
transition: transform .2s var(--spring);
-webkit-tap-highlight-color: transparent;
}
.fa-entity-chip:hover { transform: scale(1.06); }
.fa-entity-chip-img {
width: 58px; height: 58px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border);
background: var(--surface2);
transition: border-color .18s;
}
.fa-entity-chip:hover .fa-entity-chip-img { border-color: var(--accent); }
.fa-entity-chip-img-square {
width: 58px; height: 58px;
border-radius: var(--r-sm);
object-fit: contain;
border: 1px solid var(--border);
background: var(--surface);
padding: 6px;
}
.fa-entity-chip-ph {
width: 58px; height: 58px;
border-radius: 50%;
background: var(--surface2);
border: 2px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase;
}
.fa-entity-chip-label {
font-size: 11px;
font-weight: 600;
color: var(--text2);
max-width: 68px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .fa-entity-hero {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding-top: calc(var(--nav-h) + 20px);
padding-bottom: 22px;
}
.fa-entity-hero-inner {
max-width: calc(var(--max-w) + var(--side-w) + 48px);
margin: 0 auto;
padding: 0 16px;
display: flex;
gap: 18px;
align-items: flex-start;
}
@media (min-width: 768px)  { .fa-entity-hero-inner { padding: 0 28px; } }
@media (min-width: 1280px) { .fa-entity-hero-inner { padding: 0 40px; } }
.fa-entity-hero-photo {
width: 88px; height: 88px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--surface);
box-shadow: var(--sh);
flex-shrink: 0;
}
.fa-entity-hero-logo {
width: 76px; height: 76px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 4px 10px rgba(0,0,0,.1));
}
.fa-entity-hero-ph {
width: 88px; height: 88px;
border-radius: 50%;
background: var(--surface2);
border: 2px solid var(--border);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
}
.fa-entity-hero-ph-square {
width: 76px; height: 76px;
border-radius: var(--r);
background: var(--surface2);
border: 1px solid var(--border);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
}
.fa-entity-hero-supra {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-bottom: 3px;
}
.fa-entity-hero-supra a { color: var(--accent); }
.fa-entity-hero-name {
font-family: var(--font-display);
font-size: clamp(24px, 5vw, 34px);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.06;
color: var(--text);
margin-bottom: 9px;
word-break: break-word;
}
.fa-entity-hero-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fa-entity-hero-tag {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 20px;
padding: 3px 10px;
font-size: 12px;
font-weight: 500;
color: var(--text2);
white-space: nowrap;
} .fa-poste-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.fa-poste-Goalkeeper { background: #fff8e1; color: #b8860b; }
.fa-poste-Defender   { background: var(--accent-lt); color: var(--accent); }
.fa-poste-Midfielder { background: #e8f5ee; color: #1a8c3e; }
.fa-poste-Attacker   { background: #fef0f0; color: #d32f2f; } .fa-stats-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-bottom: 1px solid var(--border);
}
@media (max-width: 380px) {
.fa-stats-row { grid-template-columns: repeat(3, 1fr); }
.fa-stats-row .fa-stat:nth-child(4),
.fa-stats-row .fa-stat:nth-child(5) { border-top: 1px solid var(--border); }
}
.fa-stat {
padding: 18px 8px;
text-align: center;
border-right: 1px solid var(--border);
}
.fa-stat:last-child { border-right: none; }
.fa-stat-val {
font-family: var(--font-display);
font-size: 30px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1;
color: var(--text);
margin-bottom: 3px;
}
.fa-stat-val.accent { color: var(--accent); }
.fa-stat-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .fa-bio-row { display: flex; padding: 11px 16px; border-bottom: 1px solid var(--border); gap: 14px; align-items: center; }
.fa-bio-row:last-child { border-bottom: none; }
.fa-bio-key { flex: 0 0 110px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fa-bio-val { font-size: 13.5px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 7px; }
.fa-bio-val a { color: var(--accent); } .fa-squad-pos {
padding: 7px 16px;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .09em;
color: var(--muted);
background: var(--surface2);
border-bottom: 1px solid var(--border);
}
.fa-player-row {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 16px;
border-bottom: 1px solid var(--border);
text-decoration: none;
transition: background .14s;
}
.fa-player-row:last-child { border-bottom: none; }
.fa-player-row:hover { background: var(--surface2); }
.fa-player-photo {
width: 37px; height: 37px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: var(--surface2);
border: 1.5px solid var(--border);
}
.fa-player-ph {
width: 37px; height: 37px;
border-radius: 50%;
background: var(--surface2);
border: 1.5px solid var(--border);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase;
}
.fa-player-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.fa-player-nat  { font-size: 11px; color: var(--muted); margin-top: 1px; }
.fa-player-status { margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.fa-player-status.pub   { background: #e8f5ee; color: #1a8c3e; }
.fa-player-status.draft { background: var(--surface2); color: var(--muted); } .fa-clubs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 0;
background: var(--border);
}
.fa-club-item {
background: var(--surface);
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
padding: 16px 8px;
text-decoration: none;
transition: background .14s;
}
.fa-club-item:hover { background: var(--surface2); }
.fa-club-logo { width: 42px; height: 42px; object-fit: contain; }
.fa-club-name { font-size: 11px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.3; } .fa-sidebar { display: none; }
@media (min-width: 1024px) {
.fa-sidebar { display: block; position: sticky; top: calc(var(--nav-h) + 16px); }
}
.fa-sidebar-widget {
background: var(--surface);
border-radius: var(--r);
border: 1px solid var(--border);
overflow: hidden;
margin-bottom: 16px;
}
.fa-entity-link {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 16px;
border-bottom: 1px solid var(--border);
text-decoration: none;
color: var(--text);
transition: background .14s;
}
.fa-entity-link:last-child { border-bottom: none; }
.fa-entity-link:hover { background: var(--surface2); }
.fa-entity-link-img {
width: 34px; height: 34px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--border);
background: var(--surface2);
}
.fa-entity-link-img-sq {
width: 34px; height: 34px;
border-radius: var(--r-sm);
object-fit: contain;
flex-shrink: 0;
background: var(--surface2);
padding: 3px;
border: 1px solid var(--border);
}
.fa-entity-link-ph {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--surface2);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: var(--muted);
}
.fa-entity-link-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.fa-entity-link-arrow { color: var(--muted); font-size: 15px; line-height: 1; } .fa-article-body {
padding-top: var(--nav-h);
max-width: var(--max-w);
margin: 0 auto;
}
.fa-article-hero {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
background: var(--surface2);
}
@media (min-width: 600px) {
.fa-article-hero {
border-radius: 0 0 var(--r-lg) var(--r-lg);
}
}
@media (min-width: 768px) {
.fa-article-body { padding-top: calc(var(--nav-h) + 20px); }
.fa-article-hero { border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
}
.fa-article-meta-bar {
padding: 10px 16px;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.fa-article-title {
font-family: var(--font-display);
font-size: clamp(20px, 4vw, 26px);
font-weight: 800;
line-height: 1.22;
letter-spacing: -.025em;
padding: 14px 16px 16px;
color: var(--text);
}
.fa-article-content {
padding: 0 16px 8px;
font-size: 15.5px;
line-height: 1.75;
color: var(--text2);
}
.fa-article-content p             { margin-bottom: 1.25em; }
.fa-article-content p:first-child { font-size: 16.5px; color: var(--text); font-weight: 400; }
.fa-article-content h2            { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin: 1.8em 0 .5em; color: var(--text); letter-spacing: -.02em; }
.fa-article-content h3            { font-size: 17px; font-weight: 700; margin: 1.4em 0 .4em; color: var(--text); }
.fa-article-content a             { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.fa-article-content strong        { color: var(--text); font-weight: 700; }
.fa-article-content blockquote    { border-left: 3px solid var(--accent); padding: 10px 16px; margin: 1.2em 0; background: var(--accent-lt); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text2); }
.fa-article-content img           { width: 100%; border-radius: var(--r); margin: 1em 0; } .fa-linked-entities {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 14px 16px;
border-top: 1px solid var(--border);
}
.fa-linked-entity {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: var(--text2);
text-decoration: none;
transition: border-color .14s, background .14s;
}
.fa-linked-entity:hover { background: var(--accent-lt); border-color: rgba(0,102,255,.25); color: var(--accent); }
.fa-linked-entity img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } .fa-source-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 16px 16px 20px;
padding: 9px 14px;
background: var(--surface2);
border-radius: var(--r-sm);
font-size: 13px;
font-weight: 500;
color: var(--text2);
border: 1px solid var(--border);
text-decoration: none;
transition: background .14s;
}
.fa-source-link:hover { background: var(--border); } .fa-share-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.fa-share-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted);
margin-right: 2px;
}
.fa-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
font-size: 13px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
transition: transform .15s var(--spring), opacity .15s;
border: none;
}
.fa-share-btn:hover  { transform: scale(1.1); }
.fa-share-btn:active { transform: scale(.92); opacity: .8; }
.fa-share-btn.twitter  { background: #000; color: white; }
.fa-share-btn.facebook { background: #1877f2; color: white; }
.fa-share-btn.copy     { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.fa-share-btn.copied   { background: #1a8c3e; color: white; border-color: #1a8c3e; } .fa-related-wrap {
max-width: var(--max-w);
margin: 16px auto 0;
padding: 0 16px 32px;
}
@media (min-width: 768px) { .fa-related-wrap { padding: 0 0 32px; } } .fa-footer {
background: var(--text);
color: rgba(255,255,255,.65);
padding: 44px 0 0;
}
.fa-footer-inner {
max-width: calc(var(--max-w) + var(--side-w) + 48px);
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 768px)  { .fa-footer-inner { padding: 0 28px; } }
@media (min-width: 1280px) { .fa-footer-inner { padding: 0 40px; } }
.fa-footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
@media (min-width: 640px) { .fa-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .fa-footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.fa-footer-brand-name {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
color: white;
letter-spacing: -.02em;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 7px;
text-decoration: none;
}
.fa-footer-brand-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.fa-footer-tagline { font-size: 13px; color: rgba(255,255,255,.38); line-height: 1.55; margin-bottom: 16px; }
.fa-footer-col-title {
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.3);
margin-bottom: 12px;
}
.fa-footer-art {
display: flex;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,.05);
text-decoration: none;
transition: opacity .15s;
}
.fa-footer-art:last-child { border-bottom: none; }
.fa-footer-art:hover { opacity: .8; }
.fa-footer-art-thumb {
width: 46px; height: 34px;
border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
background: rgba(255,255,255,.06);
}
.fa-footer-art-ph {
width: 46px; height: 34px;
border-radius: 4px;
flex-shrink: 0;
background: rgba(255,255,255,.06);
}
.fa-footer-art-title {
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,.7);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fa-footer-art-date { font-size: 10px; color: rgba(255,255,255,.25); margin-top: 3px; }
.fa-footer-ent {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 0;
border-bottom: 1px solid rgba(255,255,255,.05);
text-decoration: none;
transition: opacity .15s;
}
.fa-footer-ent:last-child { border-bottom: none; }
.fa-footer-ent:hover { opacity: .8; }
.fa-footer-ent-img {
width: 26px; height: 26px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: rgba(255,255,255,.06);
}
.fa-footer-ent-img-sq {
width: 26px; height: 26px;
border-radius: 3px;
object-fit: contain;
flex-shrink: 0;
background: rgba(255,255,255,.06);
padding: 3px;
}
.fa-footer-ent-name { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.65); }
.fa-footer-bottom {
padding: 16px 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.fa-footer-copy { font-size: 11px; color: rgba(255,255,255,.22); }
.fa-footer-links { display: flex; gap: 16px; }
.fa-footer-links a { font-size: 11px; color: rgba(255,255,255,.28); text-decoration: none; transition: color .14s; }
.fa-footer-links a:hover { color: rgba(255,255,255,.65); } .fa-404 { padding: calc(var(--nav-h) + 70px) 16px 60px; text-align: center; max-width: 400px; margin: 0 auto; }
.fa-404-title { font-family: var(--font-display); font-size: 80px; font-weight: 800; color: var(--border); line-height: 1; margin-bottom: 16px; }
.fa-404-heading { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.fa-404-sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.fa-btn-primary { display: inline-block; background: var(--accent); color: white; padding: 11px 24px; border-radius: 22px; font-size: 14px; font-weight: 600; } .fa-reveal { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.fa-reveal.visible { opacity: 1; transform: none; } @keyframes sk { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.fa-skeleton {
background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
background-size: 400px 100%;
animation: sk 1.5s ease-in-out infinite;
border-radius: var(--r-sm);
} .fa-reading-time { font-size: 12px; color: var(--muted); font-weight: 500; } .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }