:root {
color-scheme: light; --af-page:        #FCFCF7;
--af-surface:     #F4F3EC;
--af-surface-alt: #EAE8DE;
--af-line:        #DFDCD0;
--af-ink:         #1C2340; --af-ink-soft:    #3E4763; --af-ink-faint:   #5C6684; --af-on-ink:      #FCFCF7;  --af-gold:        #F7C948; --af-gold-text:   #8A6D0B; --af-gold-soft:   #FDF3DA;
--af-on-gold:     #1C2340;  --af-topic:       var(--af-ink);
--af-on-topic:    #FFFFFF; --af-wrap:    1180px;
--af-content: 700px;
--af-r:       14px;
--af-r-sm:    8px;
--af-head-h:  64px;
--af-shadow-sm: 0 1px 2px rgb(28 35 64 / .06), 0 2px 8px rgb(28 35 64 / .05);
--af-shadow-md: 0 4px 14px rgb(28 35 64 / .09), 0 14px 40px rgb(28 35 64 / .07);
--af-shadow-lg: 0 10px 30px rgb(28 35 64 / .12), 0 30px 70px rgb(28 35 64 / .10);
--af-ease: cubic-bezier(.22,.61,.36,1);
} [data-theme="dark"] {
color-scheme: dark; --af-page:        #141A31;
--af-surface:     #1C2340; --af-surface-alt: #252E4E;
--af-line:        #313B5E;
--af-ink:         #ECEEF6; --af-ink-soft:    #C3CAE0; --af-ink-faint:   #9AA3C0; --af-on-ink:      #141A31;
--af-gold:        #F7C948; --af-gold-text:   #F7C948; --af-gold-soft:   #2E2A18; --af-on-gold:     #1C2340;
--af-shadow-sm: 0 1px 2px rgb(0 0 0 / .40);
--af-shadow-md: 0 4px 14px rgb(0 0 0 / .45), 0 14px 40px rgb(0 0 0 / .35);
--af-shadow-lg: 0 10px 30px rgb(0 0 0 / .50), 0 30px 70px rgb(0 0 0 / .45);
} [data-topic="animals"]    { --af-topic: #1B7F5A; } [data-topic="space"]      { --af-topic: #4C3BCF; } [data-topic="human-body"] { --af-topic: #B02D5C; } [data-topic="food"]       { --af-topic: #B45309; } [data-topic="science"]    { --af-topic: #0E6E8C; } [data-topic="people"]     { --af-topic: #7A3E9D; } [data-topic="country"]    { --af-topic: #0F766E; } [data-topic="history"]    { --af-topic: #8A5A2B; } [data-topic="nature"]     { --af-topic: #2F7A1F; } [data-topic="health"]     { --af-topic: #B31D3B; } [data-topic="technology"] { --af-topic: #3B4B9E; } [data-topic="weird"]      { --af-topic: #8E3B8E; } [data-theme="dark"] [data-topic="animals"]    { --af-topic: #4ECFA0; } [data-theme="dark"] [data-topic="space"]      { --af-topic: #9B90F5; } [data-theme="dark"] [data-topic="human-body"] { --af-topic: #F286AC; } [data-theme="dark"] [data-topic="food"]       { --af-topic: #F0A55A; } [data-theme="dark"] [data-topic="science"]    { --af-topic: #5EC0DE; } [data-theme="dark"] [data-topic="people"]     { --af-topic: #C79BE6; } [data-theme="dark"] [data-topic="country"]    { --af-topic: #4FC7BC; } [data-theme="dark"] [data-topic="history"]    { --af-topic: #D6A874; } [data-theme="dark"] [data-topic="nature"]     { --af-topic: #7CC96A; } [data-theme="dark"] [data-topic="health"]     { --af-topic: #F58098; } [data-theme="dark"] [data-topic="technology"] { --af-topic: #93A3EE; } [data-theme="dark"] [data-topic="weird"]      { --af-topic: #DB94DB; }  [data-theme="dark"] { --af-on-topic: #141A31; } *, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } :target { scroll-margin-top: calc(var(--af-head-h) + 1.5rem); }
body {
margin: 0;
background: var(--af-page);
color: var(--af-ink);
font-synthesis-weight: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--af-gold);
outline-offset: 2px;
border-radius: 3px;
}
::selection { background: var(--af-gold); color: var(--af-on-gold); }
.af-sr {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
} .af-skip {
position: fixed; top: 0; left: 50%; translate: -50% -120%;
z-index: 100; padding: .75rem 1.25rem;
background: var(--af-ink); color: var(--af-on-ink);
border-radius: 0 0 var(--af-r-sm) var(--af-r-sm);
text-decoration: none; font-weight: 600;
transition: translate .2s var(--af-ease);
}
.af-skip:focus { translate: -50% 0; }
.af-wrap {
max-width: var(--af-wrap);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2rem);
} .af-header {
position: sticky; top: 0; z-index: 50;
height: var(--af-head-h);
background: color-mix(in srgb, var(--af-page) 88%, transparent);
backdrop-filter: saturate(1.6) blur(12px);
border-bottom: 1px solid var(--af-line);
}
.af-header__in { height: 100%; display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2rem); }
.af-logo {
display: inline-flex; align-items: center; gap: .55rem;
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em;
color: var(--af-ink); text-decoration: none; white-space: nowrap;
}
.af-logo__mark { width: 34px; height: 34px; border-radius: 50%; flex: none; } .af-logo__4u {
background: var(--af-gold); color: var(--af-on-gold);
padding: .05em .32em; border-radius: 5px; font-size: .82em;
}
.af-nav { display: flex; gap: .25rem; margin-inline-start: auto; align-items: center; }
.af-nav a {
color: var(--af-ink-soft); text-decoration: none;
font-size: .9375rem; font-weight: 500;
padding: .5rem .75rem; border-radius: 999px;
transition: background .18s var(--af-ease), color .18s var(--af-ease);
}
.af-nav a:hover { background: var(--af-surface); color: var(--af-ink); }
.af-nav a[aria-current="page"] { color: var(--af-ink); font-weight: 600; }
@media (max-width: 860px) { .af-nav__wide { display: none; } }
.af-iconbtn {
display: inline-grid; place-items: center;
width: 40px; height: 40px; padding: 0;
border: 1px solid var(--af-line); border-radius: 999px;
background: transparent; color: var(--af-ink);
cursor: pointer;
transition: background .18s var(--af-ease), border-color .18s var(--af-ease), scale .18s var(--af-ease);
}
.af-iconbtn:hover { background: var(--af-surface); border-color: var(--af-ink-faint); }
.af-iconbtn:active { scale: .94; }
.af-iconbtn svg { width: 18px; height: 18px; } .af-iconbtn--shuffle {
background: var(--af-gold); border-color: var(--af-gold); color: var(--af-on-gold);
width: auto; padding-inline: 1rem; gap: .5rem;
grid-auto-flow: column; font-weight: 650; font-size: .9375rem;
}
.af-iconbtn--shuffle:hover { background: var(--af-gold); border-color: var(--af-gold); filter: brightness(1.06); }
.af-iconbtn--shuffle.is-spinning svg { animation: af-spin .6s var(--af-ease); }
@keyframes af-spin { to { rotate: 360deg; } }
.af-savecount {
position: absolute; translate: 12px -12px;
min-width: 17px; height: 17px; padding-inline: 4px;
display: grid; place-items: center;
background: var(--af-gold); color: var(--af-on-gold);
border-radius: 999px; font-size: .625rem; font-weight: 700;
}
.af-savecount:empty { display: none; }
.af-progress {
position: absolute; left: 0; bottom: -1px; height: 3px;
width: var(--af-progress, 0%);
background: var(--af-gold);
transition: width .1s linear;
} .af-hero {
position: relative; overflow: hidden;
padding-block: clamp(3rem, 9vw, 6.5rem);
border-bottom: 1px solid var(--af-line);
} .af-hero::after {
content: "";
position: absolute; right: -4vw; top: 50%; translate: 0 -50%;
width: clamp(18rem, 42vw, 34rem); aspect-ratio: 1;
background: var(--af-gold);
opacity: .10;
pointer-events: none;
-webkit-mask: var(--af-bulb) center / contain no-repeat;
mask: var(--af-bulb) center / contain no-repeat;
}
[data-theme="dark"] .af-hero::after { opacity: .14; }
:root {
--af-bulb: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.1" stroke-linecap="round"><path d="M9 18h6M10 21h4M12 2v1.5M4.9 4.9l1.1 1.1M2 12h1.5M19.1 4.9l-1.1 1.1M22 12h-1.5"/><path d="M12 6a5.5 5.5 0 0 0-3.2 9.97V18h6.4v-2.03A5.5 5.5 0 0 0 12 6Z"/></svg>');
}
.af-hero__eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--af-gold-text);
margin: 0 0 1.25rem;
}
.af-hero__eyebrow::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--af-gold);
animation: af-pulse 2.4s var(--af-ease) infinite;
}
@keyframes af-pulse { 0%,100% { opacity: 1; scale: 1; } 50% { opacity: .45; scale: .8; } }
.af-hero__fact {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: clamp(1.85rem, 5.2vw, 3.9rem);
line-height: 1.12; letter-spacing: -.025em; font-weight: 700;
margin: 0; max-width: 20ch; text-wrap: balance;
}
.af-hero__fact a { color: inherit; text-decoration: none; }
.af-hero__fact a:hover {
text-decoration: underline; text-decoration-thickness: 3px;
text-underline-offset: 6px; text-decoration-color: var(--af-gold);
}
.af-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; } .af-topic {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .75rem; font-weight: 650; letter-spacing: .04em;
padding: .3rem .7rem; border-radius: 999px; text-decoration: none;
background: var(--af-topic); color: var(--af-on-topic);
transition: filter .18s var(--af-ease);
}
.af-topic:hover { filter: brightness(1.12); }
.af-topic--ghost {
background: transparent; color: var(--af-topic);
border: 1px solid color-mix(in srgb, var(--af-topic) 40%, transparent);
} .af-facts { list-style: none; margin: 3rem 0 0; padding: 0; counter-reset: af-fact; }
.af-fact {
position: relative; counter-increment: af-fact;
padding: 1.75rem 0 1.75rem 4.25rem;
border-top: 1px solid var(--af-line);
scroll-margin-top: calc(var(--af-head-h) + 1.5rem);
}
.af-fact:first-child { border-top: 0; } .af-fact::before {
content: counter(af-fact);
position: absolute; left: 0; top: 1.4rem;
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 2.5rem; line-height: 1; font-weight: 700;
font-variant-numeric: tabular-nums;
color: transparent;
-webkit-text-stroke: 1.5px var(--af-topic);
transition: color .25s var(--af-ease);
} .af-fact.is-read::before { color: var(--af-topic); -webkit-text-stroke-width: 0; }
.af-fact__body { font-size: 1.0625rem; line-height: 1.72; margin: 0; }
.af-fact__body > :first-child { margin-top: 0; }
.af-fact__body > :last-child  { margin-bottom: 0; }
.af-fact:target {
background: var(--af-gold-soft);
border-radius: var(--af-r);
padding-inline: 4.25rem 1.25rem;
border-top-color: transparent;
animation: af-flash 1.6s var(--af-ease);
}
.af-fact:target::before { left: 1.25rem; }
@keyframes af-flash { from { background: var(--af-gold); } to { background: var(--af-gold-soft); } }
.af-fact__actions {
display: flex; gap: .35rem; margin-top: .85rem;
opacity: 0; translate: 0 4px;
transition: opacity .2s var(--af-ease), translate .2s var(--af-ease);
}
.af-fact:hover .af-fact__actions,
.af-fact:focus-within .af-fact__actions { opacity: 1; translate: 0; } @media (hover: none) { .af-fact__actions { opacity: 1; translate: 0; } }
.af-act {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .75rem; font-weight: 600;
padding: .35rem .7rem; border-radius: 999px;
border: 1px solid var(--af-line); background: transparent;
color: var(--af-ink-soft); cursor: pointer; text-decoration: none;
transition: background .16s var(--af-ease), color .16s var(--af-ease), border-color .16s var(--af-ease);
}
.af-act:hover { background: var(--af-ink); color: var(--af-on-ink); border-color: var(--af-ink); }
.af-act svg { width: 14px; height: 14px; }
.af-act.is-active { background: var(--af-gold); color: var(--af-on-gold); border-color: var(--af-gold); } .af-factcard {
position: relative;
display: grid; gap: 1.25rem;
grid-template-columns: 3.5rem 1fr;
align-items: start;
padding: 1.75rem 0;
border-top: 1px solid var(--af-line);
scroll-margin-top: calc(var(--af-head-h) + 1.5rem);
}
.af-factcard__n {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 2.5rem; line-height: 1; font-weight: 700;
font-variant-numeric: tabular-nums;
color: transparent;
-webkit-text-stroke: 1.5px var(--af-topic);
margin: 0;
}
.af-factcard__body > :first-child { margin-top: 0; }
.af-factcard__body > :last-child  { margin-bottom: 0; }
.af-factcard figure { margin: 1rem 0 0; }
.af-factcard figure img { width: 100%; border-radius: var(--af-r-sm); } .af-cite {
display: block; margin-top: .6rem;
font-size: .8125rem; color: var(--af-ink-faint);
border-left: 2px solid var(--af-line); padding-left: .7rem;
}
.af-cite a { color: var(--af-gold-text); }
@media (max-width: 599px) {
.af-factcard { grid-template-columns: 1fr; gap: .5rem; }
.af-factcard__n { font-size: 2rem; }
} .af-post-intro { margin-block: 2rem; display: grid; gap: 1.25rem; } .af-toc {
background: var(--af-surface);
border: 1px solid var(--af-line);
border-radius: var(--af-r);
padding: 1.25rem 1.5rem;
margin-block: 2.5rem;
}
.af-toc > summary {
cursor: pointer; font-weight: 650; font-size: .9375rem;
list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.af-toc > summary::-webkit-details-marker { display: none; }
.af-toc > summary::after {
content: ""; width: 9px; height: 9px; flex: none;
border-right: 2px solid var(--af-ink-soft); border-bottom: 2px solid var(--af-ink-soft);
rotate: 45deg; transition: rotate .2s var(--af-ease);
}
.af-toc[open] > summary::after { rotate: -135deg; }
.af-toc__list {
list-style: none; margin: 1rem 0 0; padding: 0;
display: grid; gap: .1rem;
max-height: 19rem; overflow-y: auto;
counter-reset: af-toc;
}
.af-toc__list a {
counter-increment: af-toc;
display: grid; grid-template-columns: 2rem 1fr; gap: .5rem;
padding: .45rem .35rem; border-radius: var(--af-r-sm);
color: var(--af-ink-soft); text-decoration: none; font-size: .9375rem;
transition: background .15s var(--af-ease), color .15s var(--af-ease);
}
.af-toc__list a::before {
content: counter(af-toc);
color: var(--af-topic); font-weight: 700; font-variant-numeric: tabular-nums;
}
.af-toc__list a:hover { background: var(--af-page); color: var(--af-ink); } .af-article { padding-block: clamp(2rem, 6vw, 3.5rem); }
.af-article__head { max-width: var(--af-content); margin-inline: auto; }
.af-article__title {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: clamp(2rem, 5.5vw, 3.25rem);
line-height: 1.1; letter-spacing: -.025em; font-weight: 700;
margin: 1rem 0 0; text-wrap: balance;
} .af-count {
display: inline-flex; align-items: baseline; gap: .35rem;
font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--af-topic);
}
.af-count b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.af-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
font-size: .875rem; color: var(--af-ink-faint); margin-top: 1.25rem;
}
.af-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.af-figure { margin: 2.5rem 0 0; }
.af-figure img { width: 100%; border-radius: var(--af-r); aspect-ratio: 16/9; object-fit: cover; }
.af-figure figcaption { font-size: .8125rem; color: var(--af-ink-faint); margin-top: .6rem; }
.af-body { max-width: var(--af-content); margin-inline: auto; } .af-sources {
margin-block: 3rem; padding: 1.5rem 1.75rem;
border: 1px solid var(--af-line);
border-left: 4px solid var(--af-topic);
border-radius: var(--af-r-sm);
background: var(--af-surface);
}
.af-sources h2 {
font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--af-ink-faint); margin: 0 0 .85rem;
font-family: inherit; font-weight: 700;
}
.af-sources ol { margin: 0; padding-inline-start: 1.1rem; font-size: .9375rem; line-height: 1.6; }
.af-sources li + li { margin-top: .5rem; }
.af-sources a { color: var(--af-gold-text); overflow-wrap: anywhere; }
.af-verified { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; color: var(--af-ink-soft); }
.af-verified svg { width: 15px; height: 15px; color: var(--af-topic); } .af-share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.af-share__label {
font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--af-ink-faint); margin-inline-end: .25rem;
}
.af-share a, .af-share button {
display: inline-grid; place-items: center;
width: 40px; height: 40px; border-radius: 999px;
border: 1px solid var(--af-line); background: transparent;
color: var(--af-ink-soft); cursor: pointer; text-decoration: none;
transition: background .16s var(--af-ease), color .16s var(--af-ease),
border-color .16s var(--af-ease), scale .16s var(--af-ease);
}
.af-share a:hover, .af-share button:hover { background: var(--af-ink); border-color: var(--af-ink); color: var(--af-on-ink); }
.af-share a:active, .af-share button:active { scale: .92; }
.af-share svg { width: 18px; height: 18px; }  .af-share .af-share__native { display: none; }
.af-has-native-share .af-share .af-share__native {
display: inline-grid; grid-auto-flow: column;
width: auto; padding-inline: 1rem; gap: .5rem;
background: var(--af-gold); border-color: var(--af-gold); color: var(--af-on-gold);
font-weight: 650; font-size: .9375rem;
}
.af-has-native-share .af-share .af-share__native:hover {
background: var(--af-gold); border-color: var(--af-gold); color: var(--af-on-gold);
filter: brightness(1.06);
} .af-has-native-share .af-share .af-share__net { display: none; }
@media (min-width: 720px) { .af-has-native-share .af-share .af-share__net { display: inline-grid; } }
.af-sharebar {
position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
display: flex; gap: .5rem; justify-content: center; align-items: center;
padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--af-page) 92%, transparent);
backdrop-filter: blur(12px);
border-top: 1px solid var(--af-line);
translate: 0 110%;
transition: translate .28s var(--af-ease);
}
.af-sharebar.is-visible { translate: 0; }
@media (min-width: 900px) { .af-sharebar { display: none; } }
.af-toast {
position: fixed; left: 50%; bottom: 5.5rem; translate: -50% 12px; z-index: 60;
padding: .65rem 1.1rem; border-radius: 999px;
background: var(--af-ink); color: var(--af-on-ink);
font-size: .875rem; font-weight: 600;
opacity: 0; pointer-events: none;
transition: opacity .2s var(--af-ease), translate .2s var(--af-ease);
}
.af-toast.is-visible { opacity: 1; translate: -50% 0; } .af-grid {
display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.af-card {
position: relative; display: flex; flex-direction: column;
background: var(--af-page);
border: 1px solid var(--af-line);
border-radius: var(--af-r);
overflow: hidden;
transition: translate .22s var(--af-ease), box-shadow .22s var(--af-ease), border-color .22s var(--af-ease);
}
.af-card:hover { translate: 0 -3px; box-shadow: var(--af-shadow-md); border-color: transparent; }
.af-card__media { position: relative; aspect-ratio: 16/10; background: var(--af-surface); }
.af-card__media img { width: 100%; height: 100%; object-fit: cover; } .af-card__topic { position: absolute; left: .75rem; top: .75rem; z-index: 2; }
.af-card__body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.af-card__title {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 1.1875rem; line-height: 1.28; letter-spacing: -.015em; font-weight: 700;
margin: 0;
} .af-card__title a { color: inherit; text-decoration: none; }
.af-card__title a::after { content: ""; position: absolute; inset: 0; }
.af-card__excerpt { font-size: .9375rem; color: var(--af-ink-soft); margin: 0; line-height: 1.6; }
.af-card__foot {
margin-top: auto; padding-top: .6rem;
display: flex; align-items: center; gap: .6rem;
font-size: .75rem; color: var(--af-ink-faint);
}
.af-card__count { margin-inline-start: auto; font-weight: 700; color: var(--af-topic); }
@media (min-width: 900px) {
.af-card--feature { grid-column: span 2; flex-direction: row; }
.af-card--feature .af-card__media { aspect-ratio: auto; flex: 0 0 45%; }
.af-card--feature .af-card__title { font-size: 1.6rem; }
.af-card--feature .af-card__body { justify-content: center; padding: 2rem; }
} .af-topics {
display: grid; gap: .5rem;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
list-style: none; margin: 0; padding: 0;
}
.af-topics a {
display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
padding: .7rem .9rem; border-radius: var(--af-r-sm);
border: 1px solid var(--af-line);
border-left: 3px solid var(--af-topic);
background: var(--af-page); color: var(--af-ink);
text-decoration: none; font-size: .9375rem; font-weight: 550;
transition: background .16s var(--af-ease), translate .16s var(--af-ease);
}
.af-topics a:hover { background: var(--af-surface); translate: 2px 0; }
.af-topics span { font-size: .75rem; color: var(--af-ink-faint); font-variant-numeric: tabular-nums; } .af-ad {
position: relative;
display: grid; place-items: center;
margin-block: 2.5rem;
background: var(--af-surface);
border-radius: var(--af-r-sm);
}
.af-ad::before {
content: "Advertisement";
position: absolute; top: .5rem;
font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--af-ink-faint);
}
.af-ad--inline      { min-height: 280px; }
.af-ad--leaderboard { min-height: 100px; }
@media (min-width: 900px) { .af-ad--leaderboard { min-height: 90px; } } .af-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.af-section--tint { background: var(--af-surface); }
.af-section__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap;
}
.af-section__title {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; font-weight: 700; margin: 0;
}
.af-section__more { font-size: .9375rem; font-weight: 600; color: var(--af-gold-text); text-decoration: none; }
.af-section__more:hover { text-decoration: underline; } @media (max-width: 719px) {
.af-rail {
display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
padding-bottom: .5rem;
margin-inline: calc(clamp(1rem, 4vw, 2rem) * -1);
padding-inline: clamp(1rem, 4vw, 2rem);
scrollbar-width: none;
}
.af-rail::-webkit-scrollbar { display: none; }
.af-rail > * { scroll-snap-align: start; }
} .af-signup {
border: 1px solid var(--af-line); border-radius: var(--af-r);
padding: clamp(1.5rem, 4vw, 2.5rem);
background: var(--af-page); text-align: center;
}
.af-signup h2 { margin: 0 0 .5rem; font-size: clamp(1.3rem, 3vw, 1.75rem); }
.af-signup p { margin: 0 auto 1.5rem; color: var(--af-ink-soft); max-width: 46ch; }
.af-signup form { display: flex; gap: .5rem; max-width: 26rem; margin-inline: auto; flex-wrap: wrap; }
.af-signup input[type="email"] {
flex: 1 1 12rem; min-width: 0;
padding: .8rem 1rem; font: inherit; font-size: .9375rem;
border: 1px solid var(--af-line); border-radius: 999px;
background: var(--af-surface); color: var(--af-ink);
}
.af-signup button {
padding: .8rem 1.5rem; font: inherit; font-size: .9375rem; font-weight: 650;
border: 0; border-radius: 999px; cursor: pointer;
background: var(--af-gold); color: var(--af-on-gold);
}
.af-signup button:hover { filter: brightness(1.06); } .af-footer {
background: var(--af-ink); color: var(--af-on-ink);
padding-block: clamp(2.5rem, 6vw, 4rem);
margin-top: clamp(3rem, 8vw, 5rem);
}
[data-theme="dark"] .af-footer {
background: var(--af-surface); color: var(--af-ink);
border-top: 1px solid var(--af-line);
}
.af-footer a { color: inherit; text-decoration: none; opacity: .82; }
.af-footer a:hover { opacity: 1; text-decoration: underline; }
.af-footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.af-footer h3 {
font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
opacity: .6; margin: 0 0 .9rem; font-family: inherit; font-weight: 700; color: inherit;
}
.af-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .9375rem; }
.af-footer__bar {
margin-top: 2.5rem; padding-top: 1.5rem;
border-top: 1px solid rgb(255 255 255 / .14);
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
font-size: .8125rem; opacity: .75;
}
[data-theme="dark"] .af-footer__bar { border-top-color: var(--af-line); } .af-pager { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem; }
.af-pager a, .af-pager span {
min-width: 42px; height: 42px; padding-inline: .75rem;
display: inline-grid; place-items: center; border-radius: var(--af-r-sm);
border: 1px solid var(--af-line); text-decoration: none; color: var(--af-ink);
font-size: .9375rem; font-weight: 600;
}
.af-pager a:hover { background: var(--af-surface); }
.af-pager .current { background: var(--af-ink); color: var(--af-on-ink); border-color: var(--af-ink); }
.af-empty { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); }
.af-empty__mark {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: clamp(5rem, 18vw, 10rem); line-height: 1; font-weight: 700;
color: transparent; -webkit-text-stroke: 2px var(--af-line);
margin-bottom: 1rem;
} @media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
@media print {
.af-header, .af-sharebar, .af-share, .af-ad, .af-toc,
.af-signup, .af-footer, .af-fact__actions { display: none !important; }
.af-fact { break-inside: avoid; padding-left: 3rem; }
.af-fact::before { color: #000; -webkit-text-stroke: 0; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; }
}