@font-face{font-family:"Anton";src:url("/theme/fonts/23aab0b2692a0c89eb7997d3c7cf5bda41276d6cd4ab6cc0edc3edfcece32b09.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Rokkitt";src:url("/theme/fonts/10c7706567fb1dc32b051f592b7cb5eedecbf0a652574ce9705253ce230ecc55.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--muted-text:#555555;--border:#dddddd;--footer-bg:#111111;--spacing:1;--base-font:17px;--heading-scale:1;--display:Impact, Haettenschweiler, "Anton", "Arial Narrow Bold", sans-serif;--body:"Source Serif 4", "Times New Roman", Times, serif;}
/* Family Brief 2.0, Hallmark Wire adaptation. Source: app-fundraising-app@31a4920. */
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2")
format("woff2");
}
@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url("https://fonts.gstatic.com/s/sourceserif4/v14/vEFI2_tTDB4M7-auWDN0ahZJW1gb8tc.woff2")
format("woff2");
}
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3Kz-C8.woff2")
format("woff2");
}
:root {
--fb-red: #cc0000;
--fb-ink: #111111;
--fb-paper: #f5f5f2;
--fb-cloud: #ebebe6;
--fb-muted: #555555;
--fb-rule: #dddddd;
--fb-gold: #ffcc00;
--fb-link: #0000cc;
--fb-display:
Impact, Haettenschweiler, "Anton", "Arial Narrow Bold", sans-serif;
--fb-reading: "Source Serif 4", "Times New Roman", Times, serif;
--fb-ui: "IBM Plex Sans", Arial, Helvetica, sans-serif;
}
html {
font-size: 17px;
scroll-behavior: smooth;
}
body {
color: var(--fb-ink);
background:
linear-gradient(180deg, var(--fb-cloud), transparent 14rem),
repeating-linear-gradient(
0deg,
transparent,
transparent 27px,
rgba(17, 17, 17, 0.03) 28px
),
var(--fb-paper);
font-family: var(--fb-reading);
font-size: 17px;
line-height: 1.45;
}
a {
text-underline-offset: 0.16em;
}
a:hover {
color: var(--fb-red);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--fb-link);
outline-offset: 4px;
}
h1,
h2,
h3 {
font-family: var(--fb-display);
font-weight: 400;
letter-spacing: 0.01em;
}
button,
.button,
input,
textarea,
select {
border-radius: 0;
}
button,
.button {
font-family: var(--fb-ui);
font-weight: 700;
}
button,
.button {
background: var(--fb-gold);
color: var(--fb-ink);
border: 1px solid var(--fb-ink);
}
button:hover,
.button:hover {
background: var(--fb-ink);
color: #fff;
}
.preview-banner,
.announcement,
.demo-note {
font: 13px/1.45 var(--fb-ui);
}
.announcement {
background: var(--fb-ink);
border-bottom: 2px solid var(--fb-red);
}
.announcement a {
color: #fff;
}
/* The managed identity remains real text; the nameplate is not generated copy. */
.site-header {
background: transparent;
border: 0;
}
.header-inner {
max-width: 1156px;
flex-wrap: wrap;
align-items: center;
gap: 0;
padding: 24px 17px 0;
}
.header-inner > .brand {
min-width: 0;
flex: 1 1 auto;
order: 1;
padding: 0 0 17px;
}
.brand .brand-mark {
display: none;
}
.header-inner .brand > span,
.header-inner .brand-name {
display: block;
width: max-content;
max-width: 100%;
font: 400 clamp(40px, 6.4vw, 65px)/0.94 var(--fb-display);
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--fb-red);
background: linear-gradient(
90deg,
var(--fb-red) 0 56%,
var(--fb-ink) 56% 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header-inner .brand small {
display: block;
width: max-content;
max-width: 100%;
margin-top: 10px;
font: 700 12px/1.4 var(--fb-ui);
letter-spacing: 0.18em;
color: var(--fb-muted);
-webkit-text-fill-color: var(--fb-muted);
}
.brand-logo {
max-width: 64px;
height: 48px;
}
.desktop-nav {
order: 4;
flex: 0 0 100%;
justify-content: flex-start;
flex-wrap: wrap;
gap: 4px 23px;
margin: 0;
padding: 12px 0 13px;
border-top: 4px solid var(--fb-ink);
border-image: linear-gradient(
90deg,
var(--fb-red) 0 38%,
var(--fb-ink) 38% 100%
)
1;
font: 700 12px/1.3 var(--fb-ui);
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: normal;
}
.desktop-nav a,
.desktop-nav a:nth-child(n + 5) {
display: block;
padding: 5px 0;
color: var(--fb-ink);
}
.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] {
color: var(--fb-red);
}
.reader-account-link {
order: 2;
margin: 0 12px 17px 20px;
padding: 10px 13px;
background: var(--fb-gold);
font: 700 12px/1.4 var(--fb-ui);
color: var(--fb-ink);
}
.search-menu {
order: 3;
flex-shrink: 0;
margin-bottom: 17px;
}
.search-menu summary {
width: 44px;
height: 44px;
padding: 10px;
border: 1px solid var(--fb-ink);
}
.search-menu form {
right: 17px;
width: min(540px, calc(100% - 34px));
background: var(--fb-paper);
border: 1px solid var(--fb-ink);
border-radius: 0;
box-shadow: 5px 5px 0 #1112;
}
.search-menu input {
min-width: 0;
width: 100%;
font-family: var(--fb-ui);
}
.mobile-menu {
order: 5;
}
.mobile-menu nav {
background: var(--fb-paper);
}
.mobile-menu nav a {
font: 700 14px/1.5 var(--fb-ui);
}
.mobile-menu:has(nav:empty) {
display: none;
}
.site-main {
max-width: 1156px;
padding: 0 17px;
}
/* Two real story blocks form the hero. A published native TV channel replaces its lead. */
.view-home .frontpage-blocks {
display: grid;
grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
grid-template-rows: auto auto auto auto 1fr;
gap: 0 30px;
padding: 0 0 40px;
align-items: start;
}
.frontpage-block,
.frontpage-block.spacing-compact,
.frontpage-block.spacing-generous {
min-width: 0;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.frontpage-block > h2 {
margin: 0 0 17px;
font: 400 30px/1 var(--fb-display);
text-transform: uppercase;
}
.frontpage-block .prose {
max-width: none;
font: 16px/1.55 var(--fb-reading);
}
.frontpage-block .prose p {
margin: 0 0 13px;
}
.frontpage-block .prose a {
color: var(--fb-ink);
}
.frontpage-block .prose a:hover {
color: var(--fb-red);
}
#frontpage-lead,
#frontpage-tv {
grid-column: 1;
grid-row: 1;
align-self: stretch;
margin-right: -30px;
width: calc(100% + 30px);
padding: 26px;
background: var(--fb-ink);
color: #fff;
border-top: 5px solid var(--fb-red);
border-bottom: 5px solid var(--fb-gold);
}
#frontpage-tv:empty {
display: none;
}
.frontpage-blocks:has(#frontpage-tv [data-media-channel]) #frontpage-lead {
display: none;
}
#frontpage-lead .frontpage-stories {
display: block;
}
#frontpage-lead > h2,
#frontpage-tv > h2 {
margin: 0 0 18px;
color: var(--fb-gold);
font: 700 12px/1.4 var(--fb-ui);
letter-spacing: 0.12em;
}
#frontpage-lead .story-card {
padding: 0;
border: 0;
}
#frontpage-lead .story-card h3 {
margin: 10px 0 15px;
font: 400 clamp(31px, 3.6vw, 47px)/1.01 var(--fb-display);
text-transform: uppercase;
letter-spacing: 0.01em;
overflow-wrap: anywhere;
}
#frontpage-lead .story-card h3 a {
color: #fff;
}
#frontpage-lead .story-card h3 a:hover {
color: var(--fb-gold);
}
#frontpage-lead .category {
color: var(--fb-gold);
}
#frontpage-lead .excerpt {
max-width: 36rem;
color: #ddd;
font: 18px/1.45 var(--fb-reading);
}
#frontpage-lead .story-meta,
#frontpage-lead .story-meta a {
color: #bbb;
}
#frontpage-lead .card-image {
margin-bottom: 20px;
}
#frontpage-lead .card-image img {
height: auto;
max-height: 350px;
aspect-ratio: 16 / 9;
}
#frontpage-headlines {
grid-column: 2;
grid-row: 1;
align-self: stretch;
padding: 26px 24px;
background: #1a1a1a;
color: #fff;
border-top: 5px solid var(--fb-red);
border-bottom: 5px solid var(--fb-gold);
border-left: 1px solid #ffffff20;
}
#frontpage-headlines > h2 {
color: var(--fb-gold);
font: 700 12px/1.4 var(--fb-ui);
letter-spacing: 0.12em;
margin: 0 0 17px;
}
#frontpage-headlines .frontpage-stories {
display: block;
}
#frontpage-headlines .story-card {
display: block;
margin: 0;
padding: 16px 0;
border-bottom: 1px solid #ffffff24;
}
#frontpage-headlines .story-card:first-child {
padding-top: 0;
}
/* Both native blocks select the same latest feed. Suppress only the lead duplicate. */
.frontpage-blocks:has(#frontpage-lead):not(
:has(#frontpage-tv [data-media-channel])
)
#frontpage-headlines
.story-card:first-child {
display: none;
}
.frontpage-blocks:has(#frontpage-lead):not(
:has(#frontpage-tv [data-media-channel])
)
#frontpage-headlines
.story-card:nth-child(2) {
padding-top: 0;
}
#frontpage-headlines .story-card:last-child {
border: 0;
padding-bottom: 0;
}
#frontpage-headlines .story-card h3 {
margin: 6px 0 0;
font: 400 23px/1.05 var(--fb-display);
text-transform: uppercase;
letter-spacing: 0.01em;
}
#frontpage-headlines .story-card h3 a {
color: #fff;
}
#frontpage-headlines .story-card h3 a:hover {
color: var(--fb-gold);
}
#frontpage-headlines .category {
color: #bbb;
font-size: 10px;
}
#frontpage-headlines .story-meta,
#frontpage-headlines .story-meta a {
color: #bbb;
}
/* The native player owns playback, status, original-source links and schedule controls. */
#frontpage-tv [data-media-channel] {
padding: 0;
margin: 0;
border: 0;
}
#frontpage-tv [data-media-now] {
margin: 0 0 7px;
color: #fff;
font: 400 25px/1.15 var(--fb-display);
text-transform: uppercase;
}
#frontpage-tv [data-media-channel] > p + p {
margin-bottom: 15px;
color: #bbb;
font: 12px/1.4 var(--fb-ui);
}
[data-media-surface] {
background: #000;
}
[data-media-surface] video,
[data-media-surface] iframe {
display: block;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
border: 0;
}
[data-media-surface] [data-media-play] {
width: 100%;
min-height: 260px;
aspect-ratio: 16 / 9;
border: 1px solid #555;
background: #000;
color: var(--fb-gold);
font: 700 17px/1.4 var(--fb-ui);
}
[data-media-status] {
margin: 12px 0 6px;
font: 12px/1.5 var(--fb-ui);
}
[data-media-source] {
font: 12px/1.5 var(--fb-ui);
text-decoration: underline;
}
#frontpage-tv [data-media-status] {
color: #ccc;
}
#frontpage-tv [data-media-source] {
color: var(--fb-gold);
}
[data-media-resync] {
margin-top: 17px;
font: 700 12px/1.4 var(--fb-ui);
}
/* Latest reporting and discovery stay connected to managed public records. */
#frontpage-latest {
grid-column: 1;
grid-row: 2 / 6;
margin-top: 34px;
}
#frontpage-latest > h2 {
padding-bottom: 14px;
border-bottom: 4px solid var(--fb-ink);
font-size: 38px;
}
#frontpage-latest .frontpage-stories {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 26px;
}
#frontpage-latest .story-card {
display: block;
padding: 20px 0;
border-bottom: 1px solid var(--fb-rule);
min-width: 0;
}
#frontpage-latest .story-card h3 {
font: 400 27px/1.07 var(--fb-display);
text-transform: uppercase;
margin: 8px 0 10px;
overflow-wrap: anywhere;
}
#frontpage-latest .story-card h3 a {
color: var(--fb-ink);
}
#frontpage-latest .story-card h3 a:hover {
color: var(--fb-red);
}
.card-image {
border-radius: 0;
}
.card-image img {
height: auto;
aspect-ratio: 16 / 9;
border-radius: 0;
}
.card-image:has(.image-placeholder) {
display: none;
}
.category {
color: var(--fb-red);
font: 700 11px/1.4 var(--fb-ui);
letter-spacing: 0.09em;
text-transform: uppercase;
}
.story-meta {
font: 11px/1.45 var(--fb-ui);
color: var(--fb-muted);
flex-wrap: wrap;
gap: 8px 11px;
margin-top: 14px;
}
.story-meta span {
padding-left: 10px;
}
.excerpt {
font: 16px/1.5 var(--fb-reading);
color: var(--fb-muted);
margin-top: 9px;
}
#frontpage-editions,
#frontpage-community,
#frontpage-sections,
#frontpage-follow {
grid-column: 2;
align-self: start;
padding: 23px 0;
border-bottom: 1px solid var(--fb-rule);
}
#frontpage-editions {
grid-row: 2;
margin-top: 34px;
padding-top: 0;
}
#frontpage-community {
grid-row: 3;
}
#frontpage-sections {
grid-row: 4;
}
#frontpage-follow {
grid-row: 5;
}
#frontpage-editions > h2,
#frontpage-community > h2,
#frontpage-sections > h2,
#frontpage-follow > h2 {
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 2px solid var(--fb-ink);
font: 700 12px/1.4 var(--fb-ui);
letter-spacing: 0.1em;
color: var(--fb-red);
}
#frontpage-editions ul,
#frontpage-sections ul,
#frontpage-community ul {
list-style: none;
margin: 0;
padding: 0;
}
#frontpage-editions li {
margin: 0 0 18px;
}
#frontpage-editions li:last-child {
margin: 0;
}
#frontpage-editions li a {
font: 400 26px/1.1 var(--fb-display);
text-transform: uppercase;
}
#frontpage-editions small {
display: block;
margin-top: 8px;
font: 11px/1.45 var(--fb-ui);
color: var(--fb-muted);
}
#frontpage-sections .prose a,
#frontpage-community .prose a {
display: inline-block;
padding: 7px 0;
font: 700 14px/1.45 var(--fb-ui);
text-decoration: underline;
}
#frontpage-community .prose p,
#frontpage-follow .prose p {
font: 14px/1.5 var(--fb-ui);
}
#frontpage-all-stories {
grid-column: 1;
grid-row: 6;
margin-top: 24px;
}
#frontpage-all-stories .prose a {
display: inline-block;
padding: 12px 18px;
background: var(--fb-gold);
color: var(--fb-ink);
border: 1px solid var(--fb-ink);
font: 700 13px/1.4 var(--fb-ui);
text-decoration: none;
}
/* Reading pages retain a narrow serif measure and the publication's condensed headings. */
.article-header,
.layout-feature .article-header {
max-width: 760px;
margin: 34px auto 26px;
text-align: left;
}
.article-header h1,
.layout-feature .article-header h1 {
margin-top: 12px;
font: 400 clamp(35px, 5vw, 57px)/1.02 var(--fb-display);
text-transform: uppercase;
letter-spacing: 0.005em;
overflow-wrap: anywhere;
}
.article-deck {
margin-top: 18px;
font: 20px/1.5 var(--fb-reading);
color: var(--fb-muted);
}
.article-byline {
justify-content: flex-start;
gap: 12px 20px;
margin-top: 21px;
padding-top: 16px;
border-top: 1px solid var(--fb-rule);
font: 12px/1.5 var(--fb-ui);
}
.article-cover {
max-width: 900px;
margin-bottom: 30px;
}
.article-cover img {
border-radius: 0;
}
.article-cover figcaption {
font-family: var(--fb-ui);
}
.prose {
max-width: 714px;
font: 19px/1.7 var(--fb-reading);
}
.prose p,
.prose ul,
.prose ol {
margin-bottom: 1.15em;
}
.prose a {
color: var(--fb-link);
}
.prose a:visited {
color: #551a8b;
}
.prose a:hover {
color: var(--fb-red);
}
.prose h2 {
font: 400 33px/1.1 var(--fb-display);
text-transform: uppercase;
margin: 35px 0 17px;
}
.prose h3 {
font: 400 27px/1.12 var(--fb-display);
text-transform: uppercase;
margin: 28px 0 14px;
}
.prose > section > article {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid var(--fb-rule);
}
.prose > section[id^="section-"] > h2 {
padding-bottom: 10px;
border-bottom: 2px solid var(--fb-ink);
color: var(--fb-red);
font: 700 13px/1.4 var(--fb-ui);
letter-spacing: 0.1em;
}
.view-custom .article-layout {
max-width: 820px;
margin: 34px auto;
}
.view-custom .article-layout > h1,
.archive h1 {
font: 400 clamp(35px, 5vw, 53px)/1.05 var(--fb-display);
text-transform: uppercase;
margin-bottom: 22px;
}
.story-card h3,
.story-compact h3 {
font: 400 27px/1.1 var(--fb-display);
text-transform: uppercase;
}
.section-heading h2,
.author-box h2 {
font-family: var(--fb-display);
}
.author-box p,
.tags,
.comments,
.publication-form,
.account-page,
.membership-page {
font-family: var(--fb-ui);
}
.publication-form,
.community-composer,
.membership-plan,
.tags a {
border-radius: 0;
}
.publication-form {
border-top: 3px solid var(--fb-red);
}
.advertisement .ad-label {
color: var(--fb-muted);
font: 11px/1.4 var(--fb-ui);
}
.site-footer {
margin-top: 20px;
padding: 30px 17px 24px;
background: var(--fb-ink);
color: #fff;
border-top: 4px solid var(--fb-red);
}
.footer-inner,
.footer-bottom {
max-width: 1122px;
}
.footer-brand span {
color: #fff;
font: 400 32px/1 var(--fb-display);
letter-spacing: 0.015em;
text-transform: uppercase;
}
.footer-inner p,
.footer-bottom {
color: #bbb;
font: 12px/1.6 var(--fb-ui);
}
.footer-inner nav {
gap: 17px 22px;
font: 700 12px/1.45 var(--fb-ui);
}
.site-footer a:hover {
color: var(--fb-gold);
}
.footer-bottom {
border-color: #444;
margin-top: 25px;
}
@media (max-width: 1000px) {
.view-home .frontpage-blocks {
grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr);
gap: 0 24px;
}
#frontpage-lead,
#frontpage-tv {
width: calc(100% + 24px);
margin-right: -24px;
padding: 24px;
}
#frontpage-headlines {
padding: 24px 21px;
}
#frontpage-latest .frontpage-stories {
grid-template-columns: minmax(0, 1fr);
}
.desktop-nav {
gap: 4px 17px;
}
}
@media (max-width: 820px) {
.view-home .frontpage-blocks {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
#frontpage-lead,
#frontpage-tv,
#frontpage-headlines,
#frontpage-latest,
#frontpage-editions,
#frontpage-community,
#frontpage-sections,
#frontpage-follow,
#frontpage-all-stories {
grid-column: 1;
grid-row: auto;
width: 100%;
margin-right: 0;
}
#frontpage-lead,
#frontpage-tv {
border-bottom: 0;
}
#frontpage-headlines {
border-top: 1px solid #ffffff26;
border-left: 0;
padding-top: 23px;
}
#frontpage-headlines .frontpage-stories {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 17px 23px;
}
#frontpage-headlines .story-card {
padding: 0 0 16px;
}
#frontpage-latest .frontpage-stories {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#frontpage-editions {
margin-top: 32px;
}
#frontpage-all-stories {
margin-bottom: 20px;
}
}
@media (max-width: 760px) {
.header-inner {
padding: 18px 14px 0;
gap: 0;
}
.header-inner > .brand {
padding-bottom: 13px;
flex-basis: calc(100% - 54px);
}
.header-inner .brand > span,
.header-inner .brand-name {
font-size: clamp(35px, 8vw, 52px);
}
.header-inner .brand small {
font-size: 10px;
letter-spacing: 0.12em;
margin-top: 8px;
}
.search-menu {
margin-bottom: 13px;
}
.search-menu summary {
width: 42px;
height: 42px;
}
.reader-account-link,
.desktop-nav {
display: none;
}
.mobile-menu {
display: block;
flex: 0 0 100%;
margin: 0;
border-top: 4px solid var(--fb-ink);
border-image: linear-gradient(
90deg,
var(--fb-red) 0 38%,
var(--fb-ink) 38% 100%
)
1;
}
.mobile-menu summary {
width: max-content;
padding: 12px 0;
min-height: 44px;
font: 700 12px/1.4 var(--fb-ui);
text-transform: uppercase;
letter-spacing: 0.09em;
}
.mobile-menu nav {
padding: 14px;
gap: 0;
border-bottom: 3px solid var(--fb-ink);
}
.mobile-menu nav a {
padding: 11px 0;
border-bottom: 1px solid var(--fb-rule);
}
.search-menu form {
left: 14px;
right: 14px;
width: auto;
padding: 14px;
}
.site-main {
padding: 0 14px;
}
#frontpage-lead,
#frontpage-tv {
padding: 22px;
}
#frontpage-lead .story-card h3 {
font-size: 37px;
}
#frontpage-headlines {
padding: 22px;
}
#frontpage-latest {
margin-top: 28px;
}
#frontpage-latest > h2 {
font-size: 34px;
}
.article-header {
margin-top: 27px;
}
.article-deck {
font-size: 18px;
}
.prose {
font-size: 18px;
line-height: 1.7;
}
.article-cover img {
aspect-ratio: 16 / 10;
}
.site-footer {
padding-inline: 18px;
}
}
@media (max-width: 560px) {
.header-inner .brand small {
display: none;
}
.header-inner .brand > span,
.header-inner .brand-name {
font-size: clamp(33px, 8.7vw, 44px);
}
#frontpage-lead,
#frontpage-tv,
#frontpage-headlines {
padding: 20px 18px;
}
#frontpage-lead .story-card h3 {
font-size: clamp(29px, 8.7vw, 38px);
line-height: 1.03;
}
#frontpage-lead .excerpt {
font-size: 17px;
}
#frontpage-headlines .frontpage-stories,
#frontpage-latest .frontpage-stories {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
#frontpage-headlines .story-card {
padding: 15px 0;
}
#frontpage-headlines .story-card h3 {
font-size: 23px;
}
#frontpage-latest .story-card h3 {
font-size: 29px;
}
[data-media-surface] [data-media-play] {
min-height: 180px;
}
.article-header h1,
.layout-feature .article-header h1 {
font-size: clamp(31px, 8.5vw, 43px);
}
.footer-inner {
gap: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@media (forced-colors: active) {
.header-inner .brand > span,
.header-inner .brand-name {
background: none;
color: LinkText;
-webkit-text-fill-color: LinkText;
}
}
/* Preserve the live publication pullquote treatment. */
.prose blockquote {
margin: 2.2rem 0;
padding: 1.35rem 1.5rem 1.35rem 1.65rem;
border-left: 5px solid var(--fb-red);
background: var(--fb-cloud);
border-radius: 0 8px 8px 0;
}
.prose blockquote p {
font-family: var(--fb-reading);
font-size: clamp(24px, 3.2vw, 34px);
line-height: 1.28;
letter-spacing: -0.02em;
color: var(--fb-ink);
margin: 0 0 0.85rem;
}
.prose blockquote p:last-child {
margin-bottom: 0;
font-family: var(--fb-ui);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.4;
color: var(--fb-red);
}
.prose blockquote strong {
font-weight: 800;
color: var(--fb-red);
}
/* Preserve managed article inserts below author boxes, before related reading. */
article:has(> .article-insert):has(> .author-box) {
display: flex;
flex-direction: column;
}
article:has(> .article-insert):has(> .author-box) > .article-header,
article:has(> .article-insert):has(> .author-box) > .article-cover {
order: 0;
}
article:has(> .article-insert):has(> .author-box) > .prose {
order: 1;
}
article:has(> .article-insert):has(> .author-box) > .author-box {
order: 2;
}
article:has(> .article-insert):has(> .author-box) > .article-insert {
order: 3;
}
.article-insert {
max-width: 680px;
width: 100%;
margin: 2rem auto 2.5rem;
padding: 1.5rem 1.6rem 1.65rem;
background: var(--fb-cloud);
border-top: 3px solid var(--fb-red);
border-radius: 0 0 8px 8px;
font-family: var(--fb-ui);
box-sizing: border-box;
}
.article-insert h2 {
margin: 0 0 0.75rem;
font: 800 18px/1.3 var(--fb-ui);
letter-spacing: -0.01em;
color: var(--fb-ink);
}
.article-insert > div {
font: 16px/1.55 var(--fb-ui);
color: var(--fb-ink);
margin: 0 0 1.1rem;
}
.article-insert > div p {
margin: 0 0 0.75rem;
}
.article-insert > div p:last-child {
margin-bottom: 0;
}
.article-insert > a {
display: inline-block;
padding: 11px 22px;
background: var(--fb-red);
color: #fff !important;
border-radius: 4px;
font: 700 14px/1.4 var(--fb-ui);
text-decoration: none !important;
}
.article-insert > a:hover {
background: var(--fb-ink);
color: #fff !important;
}
/* Match the source paper geometry without changing existing insert order. */
.prose blockquote,
.article-insert,
.article-insert > a {
border-radius: 0;
}
/* TV controls: schedule and keep-watching buttons share one row and size. */
#frontpage-tv [data-media-resync],
#frontpage-tv [data-tv-dock-start] {
display: inline-block;
margin: 17px 10px 0 0;
font: 700 12px/1.4 var(--fb-ui);
}
#frontpage-tv [data-tv-dock-start]:disabled {
background: transparent;
color: #ccc;
padding-left: 0;
cursor: default;
}
/* The docked TV that follows readers between pages. */
aside[aria-label="TV"],
aside[aria-label="TV"] button {
font-family: var(--fb-ui) !important;
}
aside[aria-label="TV"] a {
color: var(--fb-gold);
font-size: 12px;
align-self: center;
}
/* Family Brief cinematic layer (proposed for theme 1.1.0).
Appends to the live Family Brief 2.0 theme CSS; uses its --fb-* tokens.
Styles the core's motion header templates (core 0.25+ with the Motion
Engine templates) and the cinematic homepage blocks: a motion-lead
stories block with a headline band, a reading-time wire, features, a
knockout briefing hero and section tiles. Block ids below are the
proposed homepage layout: cine-lead, wire, features, briefing,
section-tiles. They differ from the current layout's lead, headlines,
latest and sections, so the current homepage is untouched until the
new layout is published. */
/* The new layout: full-width lead, the wire beside the features, then
full-width bands. Replaces the two-column grid only when it's in use. */
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) {
grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr);
grid-template-rows: none;
gap: 0 32px;
}
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > .frontpage-block {
grid-column: 1 / -1;
grid-row: auto;
margin-bottom: 40px;
}
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-wire {
grid-column: 1;
}
.view-home
.frontpage-blocks:has(> #frontpage-cine-lead)
> #frontpage-features {
grid-column: 2;
}
@media (max-width: 900px) {
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) {
grid-template-columns: minmax(0, 1fr);
}
.view-home
.frontpage-blocks:has(> #frontpage-cine-lead)
> .frontpage-block {
grid-column: 1;
}
}
/* Motion headers: Anton headlines, gold lit words, red/ink rules. */
.motion-header {
--mh-lit: var(--fb-gold);
}
.motion-header__text .article-header h1,
.motion-header__text .article-header h2 {
font-family: var(--fb-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.01em;
line-height: 0.92;
}
.motion-header__text .article-header h1 {
font-size: clamp(44px, 7.6vw, 108px);
}
.motion-header__text .article-header .category {
display: inline-block;
padding: 6px 8px;
background: var(--fb-gold);
color: var(--fb-ink);
font: 700 11px/1 var(--fb-ui);
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
}
.motion-header__text .article-header .article-byline,
.motion-header__label {
font-family: var(--fb-ui);
}
.motion-header__knockout-text {
font-family: var(--fb-display);
font-weight: 400;
text-transform: uppercase;
}
.motion-header[data-template="lower-third"]
.motion-header__text
.article-header {
border-left-color: var(--fb-red);
}
.motion-header[data-template="lower-third"]
.motion-header__text
.article-header::after {
background: var(--fb-red);
}
.motion-header__rim circle {
stroke: var(--fb-ink);
}
.motion-header[data-template="window"] .motion-header__stage,
.motion-header[data-template="split-wire"] .motion-header__stage,
.motion-header[data-template="knockout"] .motion-header__knockout {
background: var(--fb-paper);
}
/* The homepage lead's headline band: Anton, red edge. */
.motion-header__band {
border-top-color: var(--fb-red);
background: rgba(17, 17, 17, 0.9);
}
.motion-header__band a {
font-family: var(--fb-display);
font-size: 18px;
text-transform: uppercase;
}
.motion-header__band a:hover,
.motion-header__band a:focus-visible {
color: var(--fb-gold);
}
/* The wire: dense short items, red section tags. */
#frontpage-wire .frontpage-stories {
display: block;
}
#frontpage-wire .story-card {
display: block;
padding: 12px 0 13px;
border-bottom: 1px solid var(--fb-rule);
}
#frontpage-wire .card-image,
#frontpage-wire .excerpt {
display: none;
}
#frontpage-wire .category {
color: var(--fb-red);
font: 700 11px/1 var(--fb-ui);
letter-spacing: 0.1em;
text-transform: uppercase;
}
#frontpage-wire h3 {
margin: 6px 0;
font: 400 21px/1.02 var(--fb-display);
text-transform: uppercase;
}
/* Features: framed poster cards. */
#frontpage-features .card-image {
border: 4px solid var(--fb-ink);
border-image: linear-gradient(
90deg,
var(--fb-red) 0 38%,
var(--fb-ink) 38% 100%
)
1;
background: #000;
}
#frontpage-features h3 {
font: 400 clamp(26px, 2.6vw, 32px) / 0.98 var(--fb-display);
text-transform: uppercase;
}
/* The Daily Briefing as a knockout band. */
.frontpage-knockout__letters {
background: var(--fb-paper);
}
.frontpage-knockout__letters span {
font-family: var(--fb-display);
font-weight: 400;
text-transform: uppercase;
line-height: 0.84;
}
#frontpage-briefing .frontpage-hero-copy h1,
#frontpage-briefing .frontpage-hero-copy h2 {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
#frontpage-briefing .frontpage-hero-copy {
display: flex;
justify-content: center;
gap: 12px;
}
#frontpage-briefing .text-link {
padding: 12px 16px;
background: var(--fb-gold);
color: var(--fb-ink);
border: 1px solid var(--fb-ink);
font: 700 13px/1.3 var(--fb-ui);
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
}
#frontpage-briefing .text-link:hover {
background: var(--fb-ink);
color: #fff;
}
/* Section tiles: Anton names over a red bar. */
#frontpage-section-tiles .frontpage-sections {
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.section-tile__name {
font-family: var(--fb-display);
font-size: 38px;
line-height: 0.9;
text-transform: uppercase;
}
.section-tile__name::after {
content: "";
display: block;
width: 42px;
height: 4px;
margin-top: 8px;
background: var(--fb-red);
}
.section-tile .image-placeholder {
background: var(--fb-ink);
}
/* Family Brief immersive homepage. Applies only while the cinematic
layout (#frontpage-cine-lead) is on the homepage: a dark stage, the
lead story full screen, then the wire, features and bands edge to edge. */
body.view-home:has(#frontpage-cine-lead) {
--fb-stage: #0b0b0d;
--fb-stage-2: #151518;
--fb-stage-rule: rgba(255, 255, 255, 0.14);
--fb-stage-text: #f4f2ec;
--fb-stage-mute: #a9a7a0;
--fb-gutter: max(16px, calc((100vw - 1240px) / 2));
background: var(--fb-stage);
color: var(--fb-stage-text);
}
body.view-home:has(#frontpage-cine-lead) .site-main {
max-width: none;
width: 100%;
margin: 0;
padding: 0;
}
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
grid-template-rows: none;
gap: 0 48px;
max-width: none;
margin: 0;
padding: 0 0 0;
}
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > .frontpage-block {
grid-column: 1 / -1;
grid-row: auto;
min-width: 0;
margin: 0;
padding: 72px var(--fb-gutter) 0;
border: 0;
background: transparent;
color: var(--fb-stage-text);
}
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-tv:empty {
display: none;
}
/* Block titles: small gold label over a red rule. */
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > .frontpage-block > h2 {
margin: 0 0 24px;
padding: 0 0 12px;
border: 0;
border-bottom: 3px solid var(--fb-red);
color: var(--fb-gold);
font: 700 13px/1 var(--fb-ui);
letter-spacing: 0.22em;
text-transform: uppercase;
}
/* The lead: the whole first screen. */
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-cine-lead {
padding: 0;
}
#frontpage-cine-lead .motion-header {
margin: 0 0 0;
--mh-scroll-length: 190svh;
}
#frontpage-cine-lead .motion-header__stage {
height: 100svh;
}
#frontpage-cine-lead .motion-header__text {
padding-left: var(--fb-gutter);
padding-right: var(--fb-gutter);
padding-bottom: calc(96px + var(--mh-top, 0px));
}
#frontpage-cine-lead .motion-header__text .article-header {
max-width: 1080px;
margin: 0;
}
#frontpage-cine-lead .motion-header__text h2 {
font-size: clamp(38px, min(8vw, 10svh), 128px);
line-height: 0.9;
text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
}
#frontpage-cine-lead .motion-header__text .article-deck,
#frontpage-cine-lead .motion-header__text p {
max-width: 44ch;
font-size: clamp(18px, 1.6vw, 22px);
}
#frontpage-cine-lead .motion-header__shade {
background:
linear-gradient(to top, rgba(11, 11, 13, 0.92), rgba(11, 11, 13, 0) 62%),
linear-gradient(to right, rgba(11, 11, 13, 0.55), rgba(11, 11, 13, 0) 55%);
}
#frontpage-cine-lead .motion-header__band {
padding-left: var(--fb-gutter);
padding-right: var(--fb-gutter);
background: rgba(11, 11, 13, 0.82);
backdrop-filter: blur(6px);
}
/* The wire beside the features. */
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-wire {
grid-column: 1;
padding-right: 0;
}
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-features {
grid-column: 2;
padding-left: 0;
}
#frontpage-wire .story-card {
border-bottom: 1px solid var(--fb-stage-rule);
}
#frontpage-wire h3 a,
#frontpage-features h3 a {
color: var(--fb-stage-text);
text-decoration: none;
}
#frontpage-wire h3 a:hover,
#frontpage-features h3 a:hover,
#frontpage-wire h3 a:focus-visible,
#frontpage-features h3 a:focus-visible {
color: var(--fb-gold);
}
#frontpage-wire .story-meta,
#frontpage-features .story-meta,
#frontpage-features .excerpt {
color: var(--fb-stage-mute);
}
#frontpage-wire .story-meta a,
#frontpage-features .story-meta a {
color: var(--fb-stage-mute);
}
#frontpage-features .stories-grid {
gap: 44px 28px;
}
#frontpage-features .story-card {
background: transparent;
border: 0;
}
#frontpage-features .card-image {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
border: 0;
border-bottom: 4px solid var(--fb-red);
border-image: none;
background: #000;
}
#frontpage-features .card-image .motion-card,
#frontpage-features .card-image img,
#frontpage-features .card-image video {
width: 100%;
height: 100%;
object-fit: cover;
}
#frontpage-features .card-image img,
#frontpage-features .card-image video {
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#frontpage-features .story-card:hover .card-image img,
#frontpage-features .story-card:hover .card-image video {
transform: scale(1.04);
}
#frontpage-features .story-card:first-child {
grid-column: 1 / -1;
}
#frontpage-features .story-card:first-child h3 {
font-size: clamp(34px, 3.8vw, 52px);
}
#frontpage-features .category,
#frontpage-wire .category {
color: var(--fb-gold);
}
/* The Daily Briefing: the title cut out of the dark, footage in the letters. */
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-briefing {
padding: 96px 0 0;
}
#frontpage-briefing .frontpage-knockout__stage {
height: 78svh;
}
#frontpage-briefing .frontpage-knockout__letters {
background: var(--fb-stage);
mix-blend-mode: multiply;
}
#frontpage-briefing .frontpage-knockout__letters span {
color: #fff;
font-size: min(16vw, 30svh);
}
#frontpage-briefing .frontpage-hero-copy {
padding: 28px var(--fb-gutter) 0;
}
/* Sections as poster tiles. */
#frontpage-section-tiles .section-tile {
position: relative;
display: block;
overflow: hidden;
background: var(--fb-stage-2);
color: var(--fb-stage-text);
text-decoration: none;
border-top: 3px solid var(--fb-red);
}
#frontpage-section-tiles .section-tile .image-placeholder {
background: var(--fb-stage-2);
color: #2a2a2f;
}
#frontpage-section-tiles .section-tile__name {
color: var(--fb-stage-text);
}
#frontpage-section-tiles .section-tile:hover .section-tile__name,
#frontpage-section-tiles .section-tile:focus-visible .section-tile__name {
color: var(--fb-gold);
}
/* Briefing list, get involved, follow, all stories: quiet dark bands. */
#frontpage-editions ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
#frontpage-editions li {
padding: 20px;
background: var(--fb-stage-2);
border-left: 4px solid var(--fb-gold);
}
#frontpage-editions a,
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) .prose a {
color: var(--fb-stage-text);
}
#frontpage-editions small {
display: block;
margin-top: 6px;
color: var(--fb-stage-mute);
}
#frontpage-community .prose,
#frontpage-follow .prose {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
#frontpage-community .prose p,
#frontpage-follow .prose p {
margin: 0;
}
#frontpage-community .prose a,
#frontpage-follow .prose a {
display: inline-block;
padding: 14px 18px;
border: 1px solid var(--fb-stage-rule);
font: 700 13px/1.2 var(--fb-ui);
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
}
#frontpage-community .prose a:hover,
#frontpage-follow .prose a:hover {
border-color: var(--fb-gold);
color: var(--fb-gold);
}
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-all-stories {
padding-bottom: 96px;
}
body.view-home:has(#frontpage-cine-lead) .site-footer {
border-top: 1px solid var(--fb-stage-rule);
}
@media (max-width: 900px) {
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) {
grid-template-columns: minmax(0, 1fr);
}
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-wire,
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-features {
grid-column: 1;
padding-left: 16px;
padding-right: 16px;
}
.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > .frontpage-block {
padding-top: 48px;
}
#frontpage-features .stories-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* The masthead stays on paper above the dark stage. */
body.view-home:has(#frontpage-cine-lead) .site-header {
position: relative;
z-index: 5;
background: var(--fb-paper);
color: var(--fb-ink);
}
/* Short screens: keep the whole headline in view under the masthead. */
@media (max-height: 760px) {
#frontpage-cine-lead .motion-header__text {
padding-bottom: calc(118px + var(--mh-top, 0px));
}
#frontpage-cine-lead .motion-header__text h2 {
font-size: clamp(34px, min(6.4vw, 8svh), 96px);
}
#frontpage-cine-lead .motion-header__text .article-deck,
#frontpage-cine-lead .motion-header__text p:not(.article-byline) {
display: none;
}
}
/* Family Brief story page. Styles the core story page parts (share,
guide, closing line, appeal, up next) in the house look: a drop cap,
red rules over subheads, a dark appeal and a dark up-next band. */
.view-article .article-layout > .prose > p:first-of-type::first-letter {
float: left;
margin: 8px 12px 0 0;
font: 400 92px/0.8 var(--fb-display, Impact, sans-serif);
color: var(--fb-red, #cc0000);
}
.view-article .article-layout > .prose > h2 {
margin-top: 56px;
}
.view-article .article-layout > .prose > h2::before {
content: "";
display: block;
width: 48px;
height: 5px;
margin-bottom: 14px;
background: var(--fb-red, #cc0000);
}
.story-share :is(a, button) {
border-color: var(--fb-ink, #111);
border-radius: 0;
color: var(--fb-ink, #111);
font-family: "IBM Plex Sans", Arial, sans-serif;
text-decoration: none;
}
.story-share :is(a, button):hover {
background: var(--fb-ink, #111);
color: #fff;
}
.story-guide a {
color: var(--fb-ink, #111);
font-family: "IBM Plex Sans", Arial, sans-serif;
text-decoration: none;
}
.story-guide a:hover {
color: var(--fb-red, #cc0000);
}
.story-closing {
border-top-color: var(--fb-ink, #111);
}
.story-closing strong {
font: 400 21px/1 var(--fb-display, Impact, sans-serif);
font-style: normal;
letter-spacing: 0.01em;
color: var(--fb-red, #cc0000);
}
.story-appeal {
padding: 34px;
border-top: 0;
background: var(--fb-ink, #111);
color: #f5f5f2;
}
.story-appeal .frontpage-appeal {
padding: 0;
border: 0;
background: none;
color: inherit;
}
.story-appeal h2 {
margin: 0 0 10px;
font: 400 clamp(30px, 3.4vw, 40px) / 1 var(--fb-display, Impact, sans-serif);
text-transform: uppercase;
color: #fff;
}
.story-appeal .frontpage-appeal__text {
color: #e4e1d8;
}
.story-appeal .frontpage-appeal__button {
display: inline-block;
width: auto;
padding: 15px 26px;
background: var(--fb-red, #cc0000);
color: #fff;
}
.story-next {
margin: 64px calc(50% - 50vw) 0;
padding: 60px max(16px, calc(50vw - 578px)) 68px;
border-top: 0;
background: #0b0b0d;
color: #f4f2ec;
}
.story-next__why {
color: var(--fb-gold, #ffcc00);
font-family: "IBM Plex Sans", Arial, sans-serif;
}
.story-next__card,
.story-next__card:hover {
color: #f4f2ec;
text-decoration: none;
}
.story-next__title {
font-family: var(--fb-display, Impact, sans-serif);
font-size: clamp(36px, 5.2vw, 68px);
line-height: 0.98;
text-transform: uppercase;
}
.story-next__deck {
color: #cfcac0;
}
.story-next__go {
justify-self: start;
padding: 14px 22px;
background: var(--fb-gold, #ffcc00);
color: #111;
font-family: "IBM Plex Sans", Arial, sans-serif;
}
@media (max-width: 760px) {
.view-article .article-layout > .prose > p:first-of-type::first-letter {
font-size: 76px;
}
.story-share {
padding: 0 16px;
}
.story-share :is(a, button) {
flex: 1;
}
.story-appeal {
margin-left: 16px;
margin-right: 16px;
padding: 26px 22px;
}
}
/* Wide screens: the closing line and the appeal line up with the text. */
@media (min-width: 1100px) {
.article-layout.has-story-guide
> :is(.story-share, .story-closing, .story-appeal) {
justify-self: stretch;
width: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
}
}
/* Homepage fixes, approved by Martin 2026-09-27: TV width overflow, split-wire and lower-third lead headlines, text-only lead fallback. */
body.view-home .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-tv { width: auto !important; margin-right: 0 !important; }
#frontpage-cine-lead .motion-header[data-template="split-wire"] .motion-header__text { container-type: inline-size; padding-left: max(24px, 4vw, calc((100vw - 1240px) / 2)) !important; padding-right: 40px !important; }
#frontpage-cine-lead .motion-header[data-template="split-wire"] .motion-header__text h2 { font-size: clamp(28px, min(11cqi, 8vh), 88px) !important; line-height: 0.98 !important; }
#frontpage-cine-lead .motion-header[data-template="lower-third"] .motion-header__text h2 { font-size: clamp(28px, min(4.6vw, 6.4vh), 64px) !important; }
@media (max-width: 899px) { #frontpage-cine-lead .motion-header[data-template="split-wire"] .motion-header__text { padding-left: 16px !important; padding-right: 16px !important; } }
#frontpage-cine-lead > .stories-lead { max-width: min(1240px, calc(100vw - 2 * max(16px, 4vw))); margin: 0 auto; padding: 56px 0 64px; }
#frontpage-cine-lead .stories-lead :is(.excerpt, .story-meta, .story-meta a, .story-meta span) { color: #cfcac0 !important; }
#frontpage-cine-lead .stories-lead h3 a { color: #f4f2ec !important; }
/* Family Brief briefings page: Anton dates, a dark latest-issue panel, red
rules over the months. Styles the core .briefings markup. */
.briefings__head h1 {
font-family: var(--fb-display, Impact, sans-serif);
text-transform: uppercase;
letter-spacing: 0.01em;
}
.briefings__head p {
font-family: var(--fb-ui, Arial, sans-serif);
}
.briefings__latest {
border-top: 0;
background: var(--fb-ink, #111);
color: #f5f5f2;
}
.briefings__kicker {
color: var(--fb-gold, #ffcc00);
font-family: var(--fb-ui, Arial, sans-serif);
}
.briefings__latest h2 {
font-family: var(--fb-display, Impact, sans-serif);
text-transform: uppercase;
}
.briefings__latest h2 a,
.briefings__headlines a {
color: #fff;
}
.briefings__headlines li {
border-top-color: rgba(255, 255, 255, 0.18);
}
.briefings__headlines span {
color: var(--fb-gold, #ffcc00);
font-family: var(--fb-ui, Arial, sans-serif);
}
.briefings__headlines a {
font-family: var(--fb-reading, Georgia, serif);
}
.briefings__read {
background: var(--fb-red, #cc0000);
font-family: var(--fb-ui, Arial, sans-serif);
}
.briefings__month h2 {
border-bottom: 5px solid var(--fb-red, #cc0000);
font-family: var(--fb-display, Impact, sans-serif);
text-transform: uppercase;
}
.briefings__date {
font-family: var(--fb-ui, Arial, sans-serif);
}
.briefings__date strong {
font-family: var(--fb-display, Impact, sans-serif);
color: var(--fb-red, #cc0000);
}
.briefings__lines span:first-child {
font-family: var(--fb-reading, Georgia, serif);
}
.briefings__lines small {
font-family: var(--fb-ui, Arial, sans-serif);
}
/* Family Brief districts and states: the district journey. A district's own outline in red with its name in Anton is the one bold mark;it leads the area page,the welcome step and the reader's Today page. Everything around it stays on paper with ink rules. Owner: district-community session (Oct 9 2026). */ :is(.area-page,.area-index,.welcome-step,.today-home,.today-nation) :is(h1,h2,h3){font-family: Impact,Haettenschweiler,"Anton","Arial Narrow Bold",sans-serif;font-weight: 400;letter-spacing: 0.01em;}:is(.area-page,.today-home) .area-badge{fill: #cc0000;filter: drop-shadow(0 0 0 #111);}.area-page{--area-ink: var(--mag-ink,#0d0d0e);--area-paper: var(--mag-paper,#f4f0e6);--area-paper-2: var(--mag-paper-2,#e9e3d4);--area-red: var(--mag-red,#c8102e);--area-slab: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif);--area-display: var(--mag-display,"Anton",Impact,sans-serif);--area-gold: #ffcc00;}.area-page .area-hero{position: relative;grid-template-columns: minmax(8rem,15rem) minmax(0,1fr);align-items: center;gap: clamp(1.25rem,4vw,3.5rem);margin: 0 0 3rem;padding: clamp(2rem,5vw,4rem) 0 clamp(2.25rem,5vw,3.75rem);color: var(--area-paper);background: var(--area-ink);box-shadow: 0 0 0 100vmax var(--area-ink);clip-path: inset(0 -100vmax);border: 0;}.area-page .area-badge{fill: var(--area-red);filter: none;}.area-page .area-hero__parent{display: inline-block;padding: 0.4rem 0.6rem 0.3rem;background: var(--area-gold);color: #111;font: 800 0.8rem/1 var(--area-slab);letter-spacing: 0.2em;text-transform: uppercase;text-decoration: none;}.area-page .area-hero__parent:hover{background: var(--area-paper);text-decoration: none;}.area-page h1.area-hero__name{margin: 0.6rem 0 0;font: 400 clamp(3.6rem,12vw,8.5rem) / 0.86 var(--area-display);letter-spacing: 0.005em;text-transform: uppercase;color: var(--area-paper);}.area-page .area-hero__title{margin-top: 0.75rem;font: italic 400 1.2rem/1.35 var(--fb-reading,Georgia,serif);color: rgba(244,240,230,0.72);}.area-page .area-hero__facts{gap: clamp(1.5rem,4vw,3rem);margin-top: 1.5rem;padding-top: 1.1rem;border-top: 1px solid rgba(244,240,230,0.18);}.area-page .area-hero__facts dd{font: 800 2.6rem/1 var(--area-slab);color: var(--area-paper);}.area-page .area-hero__facts dt{margin-top: 0.3rem;font: 700 0.75rem/1.2 var(--area-slab);letter-spacing: 0.18em;text-transform: uppercase;color: rgba(244,240,230,0.6);}.area-page .area-hero__actions :is(a.button,button){border-radius: 0;padding: 0.95rem 1.3rem 0.85rem;font: 800 0.85rem/1 var(--area-slab);letter-spacing: 0.16em;text-transform: uppercase;background: transparent;color: var(--area-paper);border: 1px solid rgba(244,240,230,0.45);}.area-page .area-hero__actions .area-action--primary{background: var(--area-red) !important;border-color: var(--area-red) !important;color: #fff !important;}.area-page .area-hero__actions :is(a.button,button):hover{background: var(--area-paper) !important;border-color: var(--area-paper) !important;color: var(--area-ink) !important;}body:has(.area-page){background: var(--mag-paper,#f4f0e6);}.area-page .area-body,.area-page .area-places{color: var(--area-ink);}.area-page :is(.area-news,.area-rail section,.area-places)>h2{margin: 0 0 1.1rem;padding: 0 0 0.75rem;border: 0;border-bottom: 1px solid rgba(13,13,14,0.25);font: 800 0.95rem/1 var(--area-slab);letter-spacing: 0.22em;text-transform: uppercase;color: var(--area-ink);}.area-page .area-news__list{counter-reset: area-contents;}.area-page .area-news__list li{border-color: rgba(13,13,14,0.14);}.area-page .area-news__list a{color: var(--area-ink);text-decoration: none;}.area-page .area-news__list>li>a:not(.area-news__picture){font: 400 1.45rem/1.08 var(--area-display);text-transform: uppercase;letter-spacing: 0.005em;}.area-page .area-news__list a:hover{color: var(--area-red);}.area-page .area-news__list p{font: 400 1.02rem/1.45 var(--fb-reading,Georgia,serif);color: #3b3a36;}.area-page .area-news__areas{color: var(--area-red) !important;font: 700 0.72rem/1.3 var(--area-slab) !important;letter-spacing: 0.16em;text-transform: uppercase;}.area-page .area-news__list>li:first-child.area-news__pictured{padding-top: 0;}.area-page .area-news__list>li:first-child .area-news__picture img{aspect-ratio: 16 / 9;}.area-page .area-news__list>li:first-child>a:not(.area-news__picture){display: block;margin-top: 0.35rem;font-size: clamp(2rem,4.2vw,3.1rem);line-height: 0.98;}.area-page .area-news__list>li:first-child p{font-size: 1.15rem;}.area-page .area-news__list>li.area-news__pictured:not(:first-child){display: grid;grid-template-columns: minmax(0,2fr) minmax(0,3fr);column-gap: 1.25rem;align-items: start;}.area-page .area-news__list>li.area-news__pictured:not(:first-child) .area-news__picture{grid-row: span 3;margin: 0;}.area-page .area-news__list>li.area-news__pictured:not(:first-child) .area-news__picture img{aspect-ratio: 4 / 3;}.area-page .area-news__list>li:not(.area-news__pictured){counter-increment: area-contents;display: grid;grid-template-columns: 2.6rem minmax(0,1fr);column-gap: 0.75rem;}.area-page .area-news__list>li:not(.area-news__pictured)::before{content: counter(area-contents,decimal-leading-zero);grid-row: span 3;font: 800 1.6rem/1 var(--area-slab);color: var(--area-red);}.area-page .area-news__list>li:not(.area-news__pictured)>a{font-size: 1.2rem !important;}.area-page .area-news__empty{padding: 1.4rem 1.5rem;background: var(--area-paper-2);border: 0;border-left: 4px solid var(--area-red);}.area-page .area-news__empty p{margin: 0.25rem 0;font: 400 1.1rem/1.45 var(--fb-reading,Georgia,serif);}.area-page .area-rail section{padding: 1.25rem 1.3rem 1.35rem;background: var(--area-paper-2);border: 0;border-top: 3px solid var(--area-red);}.area-page :is(.area-reps,.area-links) li{border-color: rgba(13,13,14,0.14);}.area-page :is(.area-reps,.area-links) a{color: var(--area-ink);font: 700 1.1rem/1.25 var(--area-slab);text-decoration: none;}.area-page .area-reps li span{font: italic 400 0.9rem/1.35 var(--fb-reading,Georgia,serif);color: #55524b;}.area-page .area-reps a.area-reps__record{margin-top: 0.35rem;color: var(--area-red);font: 800 0.72rem/1.2 var(--area-slab);letter-spacing: 0.16em;text-transform: uppercase;}.area-page :is(.area-reps,.area-links) a:hover{color: var(--area-red);}.area-page .area-links a::after{content: "\00a0\2192";color: var(--area-red);}.area-page .area-page__initials li{background: var(--area-ink);color: var(--area-paper);font-family: var(--area-slab);font-weight: 800;}.area-page .area-members a{color: var(--area-red);font-weight: 700;}.area-page .area-places{margin-top: 1rem;padding-top: 2rem;border-top: 0;}.area-page .area-map,.area-index .area-map{padding: clamp(0.5rem,2vw,1.25rem);background: var(--mag-paper-2,#e9e3d4);border: 0;}.area-map__shape{fill: #f4f0e6;stroke: #d8d0bd;stroke-width: 1.2;}.area-map__shape--level-1{fill: #efb8bf;}.area-map__shape--level-2{fill: #e07885;}.area-map__shape--level-3{fill: #d43a50;}.area-map__shape--level-4{fill: #c8102e;}.area-map__shape.is-current{stroke: #0d0d0e;stroke-width: 3.5;}.area-map__shape--level-0.is-current{fill: #b9b19e;}.area-map a:hover .area-map__shape,.area-map a:focus-visible .area-map__shape{fill: #0d0d0e;}.area-places__list a,.area-index__area li a{color: #0d0d0e;font: 700 0.95rem/1.6 var(--mag-slab,Georgia,serif);text-decoration: none;}.area-places__list a:hover,.area-index__area li a:hover{color: #c8102e;}.area-index .article-header h1{font: 400 clamp(3rem,8vw,5.5rem) / 0.9 var(--mag-display,"Anton",Impact,sans-serif);text-transform: uppercase;border-bottom: 1px solid rgba(13,13,14,0.25);padding-bottom: 0.75rem;}.area-index__area h2{border-bottom: 3px solid #c8102e;font: 400 1.5rem/1.05 var(--mag-display,"Anton",Impact,sans-serif);text-transform: uppercase;}.area-index__area h2 a{color: #0d0d0e;text-decoration: none;}@media (max-width: 640px){.area-page .area-hero{grid-template-columns: 1fr;}.area-page .area-hero .area-badge{max-width: 9rem;}.area-page .area-news__list>li.area-news__pictured:not(:first-child){grid-template-columns: minmax(0,2fr) minmax(0,3fr);}}.welcome-step__progress{font: 600 0.85rem/1 system-ui,sans-serif;}.welcome-step__progress [aria-current="step"]{color: #cc0000;}.welcome-step h1{font-size: clamp(3rem,9vw,5.5rem);line-height: 0.9;color: #111;}.welcome-step__lead{font: 1.2rem/1.45 "Source Serif 4",Georgia,serif;color: #333;}.welcome-step__address{padding: 1.5rem;background: #fff;border-top: 4px solid #cc0000;}.welcome-step__address input{border: 2px solid #111;border-radius: 0;font-size: 1.25rem;}.welcome-step .button{border-radius: 0;background: #cc0000;color: #fff;font: 800 1rem/1 system-ui,sans-serif;padding: 0.95rem 1.4rem;}.welcome-step__found{background: #fff;border: 0;border-top: 4px solid #cc0000;}.welcome-step__found .area-badge{fill: #cc0000;}.welcome-step__name{font-family: Impact,Haettenschweiler,"Anton",sans-serif;font-size: clamp(2.6rem,8vw,4rem);font-weight: 400;color: #111;}.welcome-step__list summary{cursor: pointer;font-weight: 700;}.welcome-step__list fieldset{background: #fff;border-color: #ddd;}.today-home{padding: clamp(1.25rem,3vw,2rem);background: #fff;border-top: 6px solid #cc0000;}.today-home__kicker{color: #b8860b;font: 700 0.9rem/1 system-ui,sans-serif;}.today-home h2.today-home__name{font-family: Impact,Haettenschweiler,"Anton",sans-serif;font-size: clamp(3rem,9vw,5.5rem);line-height: 0.9;}.today-home__body section{padding: 0 !important;border: 0 !important;}.today-home--empty{border-top-color: #111;}.today-home--empty h2{font-size: clamp(2.2rem,6vw,3.4rem);}.today-home--empty a.button{border-radius: 0;background: #cc0000;font-weight: 800;}.today-invite{margin: 2rem calc(-1 * clamp(1.25rem,3vw,2rem)) calc(-1 * clamp(1.25rem,3vw,2rem));padding: clamp(1.25rem,3vw,2rem);background: #111;color: #fff;}.today-invite h3{margin: 0 0 0.4rem;font-family: Impact,Haettenschweiler,"Anton",sans-serif;font-weight: 400;font-size: clamp(1.8rem,5vw,2.6rem);line-height: 1;color: #fff;}.today-invite p{color: #e4e1d8;}.today-invite textarea{margin-top: 0.5rem;padding: 0.85rem;border: 0;border-radius: 0;background: #fff;color: #111;font: 1rem/1.45 "Source Serif 4",Georgia,serif;}.today-invite__buttons :is(a.button,button){background: #cc0000 !important;border-color: #cc0000 !important;color: #fff !important;}.today-invite__buttons :is(a.button,button):hover{background: #fff !important;color: #111 !important;}.today-nation{margin-top: 2.5rem;border-top: 4px solid #111;}.today-nation h2{font-size: 2rem;}.today-nation__stories{list-style: none;padding: 0;}.today-nation__stories li{padding: 0.45rem 0;border-bottom: 1px solid #ddd;}.today-nation__stories a{text-decoration: none;color: #111;font: 600 1.05rem/1.35 "Source Serif 4",Georgia,serif;}.lp-mode-donate,.publication-form{max-width: 40rem;margin-inline: auto;}.lp-mode-donate .lp-hero h1,.lp-mode-donate h1{font-family: Impact,Haettenschweiler,"Anton",sans-serif;font-weight: 400;font-size: clamp(2.8rem,8vw,4.8rem);line-height: 0.92;text-transform: uppercase;color: #111;}.lp-mode-donate .lp-subhead,.lp-mode-donate .lp-body{font: 1.15rem/1.5 "Source Serif 4",Georgia,serif;color: #333;}.lp-mode-donate .lp-form{padding: 1.5rem;background: #fff;border-top: 6px solid #cc0000;}.lp-ladder{grid-template-columns: repeat(4,1fr) !important;gap: 0.5rem;}.lp-ask{padding: 1.1rem 0.5rem !important;border: 2px solid #111 !important;border-radius: 0 !important;background: #fff !important;color: #111 !important;font-family: Impact,Haettenschweiler,"Anton",sans-serif !important;font-size: 1.7rem !important;font-weight: 400 !important;}.lp-ask-on,.lp-ask[data-active]{background: #cc0000 !important;border-color: #cc0000 !important;color: #fff !important;}.lp-mode-donate .lp-field input,.publication-form :is(input,textarea,select){border: 2px solid #111 !important;border-radius: 0 !important;padding: 0.75rem !important;font-size: 1.05rem;}.lp-mode-donate .lp-cta,.publication-form button[type="submit"],.publication-form>form>button{width: 100%;padding: 1.1rem !important;border-radius: 0 !important;background: #cc0000 !important;color: #fff !important;font: 800 1.15rem/1 system-ui,sans-serif !important;}.publication-form h2{font-family: Impact,Haettenschweiler,"Anton",sans-serif;font-weight: 400;font-size: clamp(2.2rem,6vw,3.4rem);line-height: 0.95;}.publication-form>form{padding: 1.5rem;background: #fff;border-top: 6px solid #cc0000;}.submission-area select{font-weight: 700;}@media (max-width: 640px){.area-hero{grid-template-columns: 6rem minmax(0,1fr);}.lp-ladder{grid-template-columns: repeat(2,1fr) !important;}}.community-thread,.community-join,.community-portal{max-width: 1156px;margin-inline: auto;}.community-thread{display: grid;grid-template-columns: minmax(0,1fr);grid-auto-flow: dense;column-gap: 2.5rem;}.community-thread>*{grid-column: 1 / -1;}@media (min-width: 960px){.community-thread{grid-template-columns: minmax(0,1fr) 17rem;}.community-thread>.community-thread-layout{grid-column: 1;}.community-thread>.community-rail{grid-column: 2;align-self: start;position: sticky;top: 1rem;}}:is(.community-thread,.community-join,.community-portal) h1{margin: 1.5rem 0 0.25rem;font-family: Impact,Haettenschweiler,"Anton",sans-serif;font-weight: 400;font-size: clamp(2.8rem,8vw,5rem);line-height: 0.92;text-transform: uppercase;color: #111;}.community-thread [data-community-refresh="heading"] p,.community-portal__lead,.community-join>p{font: 1.15rem/1.45 "Source Serif 4",Georgia,serif;color: #333;}[data-community-presence],.community-portal__live{display: inline-flex;align-items: center;gap: 0.45rem;margin: 0.25rem 0;color: #cc0000;font: 800 0.95rem/1 system-ui,sans-serif;}[data-community-presence]::before,.community-portal__live::before{content: "";width: 0.6rem;height: 0.6rem;border-radius: 50%;background: #cc0000;box-shadow: 0 0 0 3px rgba(204,0,0,0.2);}.community-thread [data-community-refresh="activity"],.community-thread [data-community-refresh-status]{color: #555;font: 0.85rem/1.4 system-ui,sans-serif;}.community-thread .reader-navigation{display: none;}.community-thread-layout{display: grid;gap: 1rem;padding-top: 1rem;border-top: 4px solid #111;}.community-thread-layout article{margin: 0 0 0.6rem;padding: 0.9rem 1.1rem;background: #fff;border-left: 3px solid #ddd;}.community-thread-layout article h2{margin: 0;font: 800 0.95rem/1.2 system-ui,sans-serif;color: #111;}.community-thread-layout .community-message-body{margin: 0.3rem 0 0.5rem;font: 1.05rem/1.5 "Source Serif 4",Georgia,serif;white-space: pre-wrap;}.community-thread-layout article :is(a,button,summary){font: 600 0.8rem/1 system-ui,sans-serif;color: #555;}.community-thread-layout article form,.community-thread-layout article details{display: inline-block;margin-right: 0.75rem;}.community-thread-layout article button{padding: 0.3rem 0.55rem;border: 1px solid #ccc;border-radius: 0;background: #fff;cursor: pointer;}.community-composer{padding: 1.1rem 1.2rem;background: #fff;border-top: 6px solid #cc0000;}.community-composer textarea{width: 100%;padding: 0.8rem;border: 2px solid #111;border-radius: 0;font: 1.05rem/1.45 "Source Serif 4",Georgia,serif;}.community-composer button[type="submit"],:is(.community-join,.community-portal) .button{margin-top: 0.6rem;padding: 0.9rem 1.3rem;border: 0;border-radius: 0;background: #cc0000;color: #fff;font: 800 1rem/1 system-ui,sans-serif;cursor: pointer;}.community-portal__actions{display: flex;flex-wrap: wrap;gap: 0.6rem;}.community-portal__actions .button + .button{background: #fff !important;color: #111 !important;border: 2px solid #111;}.community-portal__note{color: #555;font: 0.9rem/1.4 system-ui,sans-serif;}.community-rail{display: grid;gap: 1.25rem;margin-top: 1.5rem;padding: 1rem 1.1rem 1.2rem;background: #fff;border-top: 4px solid #cc0000;}.community-rail h2{margin: 0 0 0.35rem;padding-bottom: 0.35rem;border-bottom: 2px solid #111;font-family: Impact,Haettenschweiler,"Anton",sans-serif;font-weight: 400;font-size: 1.3rem;}.community-rail ul{margin: 0;padding: 0;list-style: none;}.community-rail li{display: grid;padding: 0.4rem 0;border-bottom: 1px solid #eee;}.community-rail a{color: #111;font: 700 0.95rem/1.3 system-ui,sans-serif;text-decoration: none;}.community-rail li.is-current a{color: #cc0000;}.community-rail li span{color: #555;font-size: 0.78rem;}.member-capture__pitch h1{margin: 0.5rem 0 0.75rem;font-family: Impact,Haettenschweiler,"Anton",sans-serif;font-weight: 400;font-size: clamp(3rem,9vw,6rem);line-height: 0.88;text-transform: uppercase;color: #111;}.member-capture__text{font: 1.25rem/1.5 "Source Serif 4",Georgia,serif;color: #222;}.member-capture__price{margin: 1.25rem 0 0.5rem;font-family: Impact,Haettenschweiler,"Anton",sans-serif;font-weight: 400;font-size: 2.6rem;color: #cc0000;}.member-capture .button,.member-capture button.button{display: inline-block;padding: 1.1rem 1.8rem;border: 0;border-radius: 0;background: #cc0000;color: #fff;font: 800 1.15rem/1 system-ui,sans-serif;text-decoration: none;cursor: pointer;}.member-capture .button:hover{background: #111;}.member-capture__signin{color: #555;font: 0.95rem/1.4 system-ui,sans-serif;}:is(.member-capture,.report-desk) .report-map{padding: 1rem;background: #fff;border-top: 6px solid #cc0000;}.report-map__area{fill: #e6e4dc;stroke: #fff;stroke-width: 1.1;}.report-map__area.is-chosen{fill: #f2b8b8;}.report-map__dot,.report-map__beacon{fill: #cc0000;}.report-map__ring,.report-map__beacon-ring{stroke: #cc0000;}.report-map__beacon{stroke: #fff;}.report-map figcaption{color: #555;font: 600 0.85rem/1.3 system-ui,sans-serif;}.report-map__legend::before{background: #cc0000;}.report-desk__note{font: 0.95rem/1.4 system-ui,sans-serif;}.report-desk .publication-form{max-width: none;margin: 0;}.story-appeal--map{display: grid;gap: 1.5rem;align-items: center;}@media (min-width: 800px){.story-appeal--map{grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);}.story-appeal--map .report-map{order: 2;}}.story-appeal--map .report-map__area{fill: #2b2b2b;stroke: #111;}.story-appeal--map .report-map__area.is-chosen{fill: #5a1a1a;}.story-appeal--map .report-map__beacon{stroke: #111;}.story-appeal--map .report-map figcaption{color: #bdb9ae;}.community-place{background: #cc0000;color: #fff;border-radius: 0;font: 800 0.72rem/1 system-ui,sans-serif;padding: 0.2rem 0.4rem;}.community-pinned{background: #111;color: #fff;border-radius: 0;}.community-mention{background: #fde2e2;color: #a00000;}.community-new{border-radius: 0;background: #cc0000;font: 800 0.95rem/1 system-ui,sans-serif;}.story-discuss a{display: inline-block;padding: 0.8rem 1.1rem;border: 2px solid #111;color: #111;font: 800 0.95rem/1 system-ui,sans-serif;text-decoration: none;}.story-discuss a:hover{background: #111;color: #fff;}body:has(main .prose>.reader-navigation){background: var(--mag-paper,#f4f0e6);}main .prose:has(>.reader-navigation){--rd-ink: var(--mag-ink,#0d0d0e);--rd-paper: var(--mag-paper,#f4f0e6);--rd-paper-2: var(--mag-paper-2,#e9e3d4);--rd-red: var(--mag-red,#c8102e);--rd-slab: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif);--rd-display: var(--mag-display,"Anton",Impact,sans-serif);max-width: min(72rem,100%);color: var(--rd-ink);}main .prose:has(>.reader-navigation)>h1{margin: 0;padding: clamp(2rem,5vw,3.5rem) 0 1.25rem;font: 400 clamp(3rem,9vw,6.5rem) / 0.9 var(--rd-display);text-transform: uppercase;letter-spacing: 0.005em;color: var(--rd-paper);background: var(--rd-ink);box-shadow: 0 0 0 100vmax var(--rd-ink);clip-path: inset(0 -100vmax);}main .prose>.reader-navigation{display: flex;flex-wrap: nowrap;gap: 0 1.6rem;margin: 0 0 2.5rem;padding: 0.9rem 0 0;overflow-x: auto;scrollbar-width: none;background: var(--rd-ink);box-shadow: 0 0 0 100vmax var(--rd-ink);clip-path: inset(0 -100vmax);border-top: 1px solid rgba(244,240,230,0.18);}main .prose>.reader-navigation a{flex: none;padding: 0.35rem 0 0.9rem;color: rgba(244,240,230,0.78);font: 700 0.78rem/1 var(--rd-slab);letter-spacing: 0.16em;text-transform: uppercase;text-decoration: none;white-space: nowrap;border-bottom: 3px solid transparent;}main .prose>.reader-navigation a:hover{color: var(--rd-paper);}main .prose>.reader-navigation a[aria-current="page"]{color: var(--rd-paper);border-bottom-color: var(--rd-red);}main .prose:has(>.reader-navigation) :is(h2,h3){font-family: var(--rd-display);font-weight: 400;text-transform: uppercase;letter-spacing: 0.005em;}main .prose:has(>.reader-navigation) :is(button,a.button){border-radius: 0;padding: 0.85rem 1.2rem 0.75rem;background: var(--rd-red);border: 1px solid var(--rd-red);color: #fff;font: 800 0.8rem/1 var(--rd-slab);letter-spacing: 0.16em;text-transform: uppercase;text-decoration: none;cursor: pointer;}main .prose:has(>.reader-navigation) :is(button,a.button):hover{background: var(--rd-ink);border-color: var(--rd-ink);color: var(--rd-paper);}main .prose:has(>.reader-navigation) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]){border-radius: 0;border: 1px solid rgba(13,13,14,0.35);background: #fff;padding: 0.8rem 0.9rem;font: 400 1.05rem/1.3 var(--fb-reading,Georgia,serif);}main .prose:has(>.reader-navigation) [role="status"]:not(:empty),main .prose:has(>.reader-navigation) [role="alert"]{padding: 0.8rem 1rem;background: var(--rd-paper-2);border-left: 4px solid var(--rd-red);}.community-rooms .room-cards{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,20rem),1fr));gap: 1.25rem;margin: 0;padding: 0;list-style: none;}.community-rooms .room-card{display: flex;flex-direction: column;gap: 0.55rem;margin: 0;padding: 1.35rem 1.4rem 1.5rem;background: var(--rd-paper-2);border-top: 3px solid var(--rd-red);}.community-rooms .room-card>*{margin: 0;}.community-rooms .room-card__kicker{color: var(--rd-red);font: 800 0.72rem/1 var(--rd-slab);letter-spacing: 0.2em;text-transform: uppercase;}.community-rooms .room-card h2{font-size: clamp(1.6rem,3vw,2.1rem);line-height: 1;}.community-rooms .room-card h2 a{color: inherit;text-decoration: none;}.community-rooms .room-card p:not([class]){font: 400 1.02rem/1.45 var(--fb-reading,Georgia,serif);color: #3b3a36;}.community-rooms .room-card__meta{color: #55524b;font: 700 0.75rem/1.3 var(--rd-slab);letter-spacing: 0.12em;text-transform: uppercase;}.community-rooms .room-card :is(form,.room-card__open){margin-top: auto;padding-top: 0.5rem;align-self: flex-start;}.community-rooms .room-card--joined:not(.room-card--recommended) .room-card__open{background: transparent;color: var(--rd-ink);border-color: var(--rd-ink);}.community-rooms .room-card--recommended{grid-column: 1 / -1;padding: clamp(1.75rem,4vw,2.75rem);background: var(--rd-ink);color: var(--rd-paper);border-top: 0;border-left: 6px solid var(--rd-red);}.community-rooms .room-card--recommended .room-card__kicker{align-self: flex-start;padding: 0.4rem 0.6rem 0.3rem;background: #ffcc00;color: #111;}.community-rooms .room-card--recommended h2{font-size: clamp(2.4rem,6vw,4.2rem);}.community-rooms .room-card--recommended :is(p:not([class]),.room-card__meta){color: rgba(244,240,230,0.78);}.community-rooms__area{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 1rem 2rem;margin-top: 2rem;padding: 1.5rem 1.6rem;border: 2px solid var(--rd-ink);}.community-rooms__area p{margin: 0;max-width: 34rem;font: 400 1.3rem/1.3 var(--fb-reading,Georgia,serif);}.my-area .my-area__home{display: grid;grid-template-columns: minmax(7rem,13rem) minmax(0,1fr);align-items: center;gap: clamp(1.25rem,4vw,3rem);margin: -2.5rem 0 2.5rem;padding: 2rem 0 2.5rem;color: var(--rd-paper);background: var(--rd-ink);box-shadow: 0 0 0 100vmax var(--rd-ink);clip-path: inset(0 -100vmax);}.my-area .my-area__home .area-badge{fill: var(--rd-red);}.my-area__home p{margin: 0;}.my-area__kicker{display: inline-block;padding: 0.4rem 0.6rem 0.3rem;background: #ffcc00;color: #111;font: 800 0.75rem/1 var(--rd-slab);letter-spacing: 0.2em;text-transform: uppercase;}.my-area__name{margin-top: 0.5rem !important;font: 400 clamp(3.4rem,10vw,7rem) / 0.86 var(--rd-display);text-transform: uppercase;}.my-area__name a{color: var(--rd-paper);text-decoration: none;}.my-area__areas{display: flex;flex-wrap: wrap;gap: 0.4rem 1.6rem;margin: 1rem 0 0;padding: 0.9rem 0 0;list-style: none;border-top: 1px solid rgba(244,240,230,0.18);}.my-area__areas a{color: var(--rd-paper);font: 700 1.05rem/1.3 var(--rd-slab);text-decoration: none;}.my-area__areas span{display: block;color: rgba(244,240,230,0.6);font: 700 0.7rem/1.4 var(--rd-slab);letter-spacing: 0.16em;text-transform: uppercase;}.my-area__intro{max-width: 40rem;font: 400 1.25rem/1.45 var(--fb-reading,Georgia,serif);}.my-area__body{display: grid;grid-template-columns: minmax(0,1fr) minmax(16rem,22rem);gap: 2.5rem;margin-bottom: 3rem;}.my-area__body h2,.my-area__change h2{margin: 0 0 1rem;padding-bottom: 0.7rem;border-bottom: 1px solid rgba(13,13,14,0.25);font: 800 0.95rem/1 var(--rd-slab) !important;letter-spacing: 0.22em !important;text-transform: uppercase;}.my-area__stories ol{margin: 0;padding: 0;list-style: none;counter-reset: my-area;}.my-area__stories li{counter-increment: my-area;display: grid;grid-template-columns: 2.6rem minmax(0,1fr);padding: 0.85rem 0;border-bottom: 1px solid rgba(13,13,14,0.14);}.my-area__stories li::before{content: counter(my-area,decimal-leading-zero);color: var(--rd-red);font: 800 1.5rem/1 var(--rd-slab);}.my-area__stories a{color: var(--rd-ink);font: 400 1.25rem/1.08 var(--rd-display);text-transform: uppercase;text-decoration: none;}.my-area__stories a:hover,.my-area__rail a:hover{color: var(--rd-red);}.my-area__rail{display: grid;gap: 1.5rem;align-content: start;}.my-area__rail section{padding: 1.25rem 1.3rem;background: var(--rd-paper-2);border-top: 3px solid var(--rd-red);}.my-area__rail ul{margin: 0;padding: 0;list-style: none;}.my-area__rail li{display: grid;padding: 0.55rem 0;border-bottom: 1px solid rgba(13,13,14,0.14);}.my-area__rail li a:first-child{color: var(--rd-ink);font: 700 1.05rem/1.25 var(--rd-slab);text-decoration: none;}.my-area__rail li span{color: #55524b;font: italic 400 0.9rem/1.35 var(--fb-reading,Georgia,serif);}.my-area__change{max-width: 44rem;}.my-area__address label{display: grid;gap: 0.4rem;font: 800 0.75rem/1 var(--rd-slab);letter-spacing: 0.16em;text-transform: uppercase;}.my-area__address input{width: 100%;font-size: 1.25rem !important;}.my-area__address button{margin-top: 0.75rem;}.my-area__fine{color: #55524b;font: italic 400 0.9rem/1.4 var(--fb-reading,Georgia,serif);}.my-area__change details>summary{cursor: pointer;color: var(--rd-ink);font: 800 0.8rem/1.2 var(--rd-slab);letter-spacing: 0.16em;text-transform: uppercase;}.my-area__list{margin-top: 1.5rem;padding-top: 1.25rem;border-top: 1px solid rgba(13,13,14,0.25);}.my-area__list fieldset{margin: 1rem 0;padding: 0;border: 0;}.my-area__list .my-area__group{padding: 0.5rem 0;border-bottom: 1px solid rgba(13,13,14,0.12);}.my-area__list .my-area__group>summary{font: 700 1rem/1.3 var(--rd-slab);letter-spacing: 0;text-transform: none;}.my-area__list label{display: block;padding: 0.2rem 0 0.2rem 1rem;font: 400 1rem/1.4 var(--fb-reading,Georgia,serif);}@media (max-width: 760px){.my-area .my-area__home,.my-area__body{grid-template-columns: 1fr;}.my-area .my-area__home .area-badge{max-width: 8rem;}}.hud{--hud-bg: var(--mag-ink,#0d0d0e);--hud-fg: var(--mag-paper,#f4f0e6);--hud-accent: var(--mag-red,#c8102e);font-family: var(--fb-reading,"Source Serif 4",Georgia,serif);}.hud [hidden]{display: none !important;}.hud-btn{width: 68px !important;font-size: 0.6rem !important;letter-spacing: 0.04em !important;}.hud-you{font: 400 0.95rem/0.95 var(--mag-display,"Anton",Impact,sans-serif) !important;letter-spacing: 0.01em;}.hud-btn,.hud-badge,.hud-cta,.hud-label,.hud-join{font-family: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif) !important;font-weight: 800 !important;}.hud-sheet__title{font-family: var(--mag-display,"Anton",Impact,sans-serif);font-size: 1.9rem;}.hud-room__title,.hud-action__title,.hud-stories a,.hud-links a{font-family: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif);font-size: 1.05rem;font-weight: 700;}.hud-msg__who strong{font-family: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif);font-weight: 800;}.hud-join{padding: 0.9rem 1.2rem 0.8rem;letter-spacing: 0.16em;}.hud-here,.hud-kind,.hud-kinds,.hud-event strong{font-family: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif) !important;font-weight: 800 !important;}.hud-here{border-color: var(--mag-gold,#ffcc00) !important;color: var(--mag-gold,#ffcc00) !important;}.hud-event strong{font-size: 1rem;}.area-found{--primary: var(--mag-red,#c8102e);}.area-found .area-map{background: var(--mag-paper-2,#e9e3d4);padding: 1rem;}.area-found__kicker,.area-found__areas span,.area-found__send,.area-found__heading{font-family: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif) !important;font-weight: 800 !important;}.area-found__name{font-family: var(--mag-display,"Anton",Impact,sans-serif);font-weight: 400;}.area-found__officials li>a:first-child{font-family: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif);font-size: 1.1rem;color: var(--mag-ink,#0d0d0e);}.area-found__prompt{padding: 0.8rem 1rem;border-left: 4px solid var(--mag-red,#c8102e);background: var(--mag-paper-2,#e9e3d4);font-style: normal;font-weight: 600;}.hud-btn--share{color: var(--mag-gold,#ffcc00) !important;}.hud-share-link,.community-share{border-left: 3px solid var(--mag-red,#c8102e);padding-left: 0.6rem;}.hud-share-link strong,.community-share strong{font-family: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif);font-weight: 800;}.hud-compose--share select,.hud-compose--share input{font-family: var(--fb-reading,"Source Serif 4",Georgia,serif);}.hud-strip{border-top-color: var(--mag-red,#c8102e);background: var(--mag-paper-2,#e9e3d4);}.hud-strip__label,.hud-strip__chip,.hud-strip .hud-cta,.hud-strip__track{font-family: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif) !important;font-weight: 800 !important;}.hud-strip__label{letter-spacing: 0.2em;}.hud-strip__chip--place{background: var(--mag-red,#c8102e);border-color: var(--mag-red,#c8102e);}body:has(.network-app){background: var(--mag-ink,#0d0d0e);}.network-app{padding-top: 0;}.hud--app .hud-sheet__title{font-size: clamp(2.4rem,6vw,4rem);}.hud--app .hud-sheet__body{padding: 1.2rem clamp(1rem,3vw,2.2rem) 2rem;}.hud--app .hud-feed,.hud--app .hud-msgs,.hud--app .hud-rooms{max-width: 46rem;}.hud-follow,.hud-places__states span{font-family: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif) !important;font-weight: 800 !important;}.hud-places__map .area-map{background: var(--mag-paper-2,#e9e3d4);padding: 0.6rem;}.hud-places__states a,.hud-places__mine a,.hud-people strong{font-family: var(--mag-slab,"Rokkitt",Rockwell,Georgia,serif);font-weight: 700;}

/* Family Brief front page, wide redesign: a layer over the live
immersive homepage (immersive.css). Broadcast bands (dark) alternate with paper
bands (light reading). Selectors carry the live layer's :has() plus
html/body/main so they outrank it. */
html body.view-home {
--w: min(1520px, calc(100vw - 2 * var(--gx)));
--gx: clamp(16px, 4vw, 56px);
--paper: #f5f3ee;
--paper-2: #ebe8e0;
--ink: #141414;
--muted: #5b5a55;
--red: #c8102e;
--gold: #ffcc00;
--stage: #0b0b0d;
--stage-text: #f4f2ec;
--display-f: var(--fb-display, "Oswald", Impact, sans-serif);
--read-f: var(--fb-reading, Georgia, serif);
--ui-f: var(--fb-ui, Arial, sans-serif);
}
/* ---------- Masthead: paper, slogan, one Give button ---------- */
html body.view-home .site-header .header-inner {
max-width: var(--w);
}
html body.view-home .brand small {
font: 400 italic 17px/1.3 var(--read-f);
letter-spacing: 0;
text-transform: none;
color: var(--muted);
}
html body.view-home .desktop-nav a[href$="/membership"] {
order: 3;
margin-left: auto;
padding: 11px 22px;
background: var(--red);
color: #fff !important;
font: 700 15px/1 var(--ui-f);
border-radius: 2px;
}
/* ---------- The grid ---------- */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) {
display: grid;
grid-template-columns:
[full-start] minmax(var(--gx), 1fr)
[main-start] repeat(12, minmax(0, calc(var(--w) / 12)))
[main-end] minmax(var(--gx), 1fr) [full-end];
column-gap: 0;
row-gap: 0;
max-width: none;
padding: 0;
position: relative;
isolation: isolate;
}
html body.view-home main .frontpage-blocks > #frontpage-cine-lead .motion-header {
margin-inline: 0;
}
html
body.view-home
main
.frontpage-blocks:has(> #frontpage-cine-lead)
> .frontpage-block {
grid-column: main-start / main-end;
padding: 0;
margin: 0;
min-width: 0;
}
/* Section labels: sentence case, condensed, a short red bar. */
html
body.view-home
main
.frontpage-blocks:has(> #frontpage-cine-lead)
> .frontpage-block
> h2 {
margin: 0 0 22px;
padding: 0;
border: 0;
font: 400 34px/1 var(--display-f);
letter-spacing: 0;
text-transform: none;
color: inherit;
}
html
body.view-home
main
.frontpage-blocks:has(> #frontpage-cine-lead)
> .frontpage-block
> h2::after {
content: "";
display: block;
width: 56px;
height: 5px;
margin-top: 12px;
background: var(--red);
}
/* Band 1 (stage): the lead, full bleed, unchanged. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-cine-lead {
grid-column: full-start / full-end;
grid-row: 1;
}
/* Band 2 (stage): On now. TV beside the wire. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-tv {
grid-column: main-start / span 8;
grid-row: 2;
padding: 64px 40px 72px 0;
color: var(--stage-text);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-wire {
grid-column: span 4 / main-end;
grid-row: 2;
padding: 64px 0 72px 40px;
border-left: 1px solid rgba(255, 255, 255, 0.14);
color: var(--stage-text);
}
/* The stage band behind row 2. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead)::before {
content: "";
grid-column: full-start / full-end;
grid-row: 2;
background: var(--stage);
}
#frontpage-tv [data-media-player] {
aspect-ratio: 16 / 9;
max-height: none;
}
#frontpage-tv [data-media-player] button {
font-size: 22px !important;
padding: 18px 30px !important;
}
/* Short news stays short: six items, then a link. */
#frontpage-wire .stories-list {
display: block !important;
}
#frontpage-wire .story-card {
padding: 16px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#frontpage-wire .story-card:nth-child(n + 7) {
display: none !important;
}
#frontpage-wire .story-card h3 {
font-size: 21px !important;
line-height: 1.12 !important;
}
#frontpage-wire .story-card .category,
#frontpage-wire .story-card .story-meta a {
display: none;
}
/* Band 3 (paper): the reading river with a rail. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead)::after {
content: "";
grid-column: full-start / full-end;
grid-row: 3 / span 4;
background: var(--paper);
z-index: -1;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-features {
grid-column: main-start / span 8;
grid-row: 3 / span 4;
padding: 80px 56px 96px 0;
color: var(--ink);
/* Paints the whole paper band; the rail cards sit on top of it. */
background: var(--paper) !important;
box-shadow: 0 0 0 100vmax var(--paper);
clip-path: inset(0 -100vmax);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-signup, #frontpage-give, #frontpage-sponsored) {
grid-column: span 4 / main-end;
align-self: start;
color: var(--ink);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-signup {
grid-row: 3;
margin-top: 80px;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-give {
grid-row: 4;
margin-top: 28px;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-sponsored {
grid-row: 5;
margin-top: 28px;
position: sticky;
top: 24px;
}
/* Features on paper: one big, the rest in two columns. */
#frontpage-features .stories-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 48px 40px !important;
}
#frontpage-features .story-card:first-child {
grid-column: 1 / -1;
}
#frontpage-features .story-card:first-child h3 {
font-size: 56px !important;
line-height: 1 !important;
}
#frontpage-features .story-card h3 {
font-size: 30px !important;
line-height: 1.04 !important;
}
#frontpage-features .story-card h3 a,
#frontpage-features .story-card .excerpt {
color: var(--ink) !important;
}
#frontpage-features .story-card .excerpt {
font: 400 18px/1.55 var(--read-f) !important;
color: #33322e !important;
}
#frontpage-features .story-card .category {
color: var(--red) !important;
}
#frontpage-features .story-card .story-meta,
#frontpage-features .story-card .story-meta a {
color: var(--muted) !important;
font-size: 14px !important;
}
#frontpage-features .card-image {
border-bottom: 0 !important;
}
/* Rail cards. */
.frontpage-blocks > :is(#frontpage-signup, #frontpage-give) h2 {
font-size: 28px !important;
}
.frontpage-blocks > :is(#frontpage-signup, #frontpage-give) p {
font: 400 17px/1.5 var(--read-f);
margin: 0 0 16px;
}
#frontpage-signup {
padding: 28px !important;
background: var(--ink) !important;
color: var(--stage-text) !important;
}
#frontpage-signup form {
display: grid;
gap: 10px;
}
#frontpage-signup input {
height: 54px;
padding: 0 16px;
font: 400 18px var(--ui-f);
border: 0;
border-radius: 2px;
}
#frontpage-signup .frontpage-signup__button,
#frontpage-give .frontpage-appeal__button {
display: block;
height: 54px;
border: 0;
border-radius: 2px;
background: var(--gold);
color: var(--ink) !important;
font: 700 18px/54px var(--ui-f);
text-align: center;
cursor: pointer;
}
#frontpage-give {
padding: 28px !important;
background: #fff !important;
border-top: 6px solid var(--red);
}
.frontpage-appeal__meter {
height: 14px;
background: var(--paper-2);
border-radius: 7px;
overflow: hidden;
}
.frontpage-appeal__meter span {
display: block;
height: 100%;
background: var(--red);
}
.frontpage-appeal__figure {
margin: 10px 0 18px !important;
font: 400 15px/1.3 var(--ui-f) !important;
color: var(--muted);
}
.frontpage-appeal__amounts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.frontpage-appeal__amounts a {
display: block;
padding: 16px 0;
border: 2px solid var(--ink);
border-radius: 2px;
text-align: center;
font: 700 18px/1 var(--ui-f);
color: var(--ink) !important;
}
#frontpage-give .frontpage-appeal__button {
background: var(--red);
color: #fff !important;
}
#frontpage-sponsored {
padding: 20px 0 0 !important;
border-top: 1px solid #cfccc3;
}
/* Band 4 (stage, full bleed): a report launches here. */
/* Band 5 (stage): the briefing, as live. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-briefing {
grid-column: full-start / full-end;
grid-row: 8;
padding: 96px 0 64px;
background: var(--stage) !important;
}
/* Band 6 (paper): sections, then ways to keep up, in one row. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-section-tiles {
grid-row: 9;
padding: 88px 0 56px;
color: var(--ink);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-editions, #frontpage-community, #frontpage-follow) {
grid-row: 10;
padding: 0 0 96px;
color: var(--ink);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-editions {
grid-column: 2 / 6;
padding-right: 40px;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-community {
grid-column: 6 / 10;
padding-inline: 20px;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-follow {
grid-column: 10 / 14;
padding-left: 40px;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-section-tiles, #frontpage-editions, #frontpage-community, #frontpage-follow) {
background: var(--paper) !important;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-all-stories {
display: none;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-section-tiles, #frontpage-editions, #frontpage-community, #frontpage-follow) h2 {
font-size: 30px !important;
}
.frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-editions, #frontpage-community, #frontpage-follow) a {
color: var(--ink) !important;
}
#frontpage-section-tiles .frontpage-sections {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 16px !important;
}
#frontpage-section-tiles .section-tile {
min-height: 180px;
background: var(--ink) !important;
border: 0 !important;
}
#frontpage-section-tiles .section-tile__name {
color: #fff !important;
font-size: 38px !important;
}
#frontpage-editions ul {
margin: 0;
padding: 0;
list-style: none;
}
#frontpage-editions li {
padding: 14px 0 !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid #d8d4ca !important;
background: none !important;
font: 400 19px/1.3 var(--read-f);
}
:is(#frontpage-community, #frontpage-follow) .prose {
display: grid !important;
gap: 0 !important;
}
:is(#frontpage-community, #frontpage-follow) .prose p {
margin: 0 !important;
}
:is(#frontpage-community, #frontpage-follow) .prose a {
display: block !important;
padding: 14px 0 !important;
border: 0 !important;
border-bottom: 1px solid #d8d4ca !important;
background: none !important;
font: 400 19px/1.3 var(--read-f) !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
}
/* Paper behind the last rows. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-section-tiles {
box-shadow: 0 0 0 100vmax var(--paper);
clip-path: inset(0 -100vmax);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-editions, #frontpage-community, #frontpage-follow) {
box-shadow: 0 0 0 100vmax var(--paper);
clip-path: inset(0 -100vmax);
}
html body.view-home .site-main {
background: var(--stage);
}
html body.view-home main .frontpage-blocks > #frontpage-quick-bar {
display: none;
}
/* ---------- Phones and small tablets ---------- */
@media (max-width: 900px) {
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) {
grid-template-columns: [full-start] 16px [main-start] minmax(0, 1fr) [main-end] 16px [full-end];
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > .frontpage-block,
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > * {
grid-column: main-start / main-end !important;
grid-row: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-left: 0 !important;
margin-top: 0 !important;
position: static !important;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-cine-lead, #frontpage-briefing) {
grid-column: full-start / full-end !important;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead)::before,
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead)::after {
display: none;
}
/* Order for one thumb: lead, watch, headlines, stories, email,
report, give, briefing, sections, keep up. */
#frontpage-cine-lead { order: 1; }
#frontpage-tv { order: 2; padding: 40px 0 32px !important; }
#frontpage-wire { order: 3; padding: 8px 0 40px !important; }
#frontpage-features { order: 4; padding: 48px 0 !important; }
#frontpage-signup { order: 5; margin: 0 0 40px !important; }
#frontpage-give { order: 7; margin: 40px 0 !important; }
#frontpage-sponsored { order: 8; margin-bottom: 48px !important; }
#frontpage-briefing { order: 9; padding: 56px 0 40px !important; }
#frontpage-section-tiles { order: 10; padding: 48px 0 !important; }
#frontpage-editions { order: 11; }
#frontpage-community { order: 12; }
#frontpage-follow { order: 13; padding-bottom: 120px !important; }
/* Paper under everything after the TV. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-features, #frontpage-signup, #frontpage-give, #frontpage-sponsored, #frontpage-section-tiles, #frontpage-editions, #frontpage-community, #frontpage-follow) {
box-shadow: 0 0 0 100vmax var(--paper);
clip-path: inset(0 -100vmax);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-tv, #frontpage-wire) {
box-shadow: 0 0 0 100vmax var(--stage);
clip-path: inset(0 -100vmax);
}
#frontpage-features .stories-grid {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
#frontpage-features .story-card:first-child h3 {
font-size: 38px !important;
}
#frontpage-features .story-card h3 {
font-size: 28px !important;
}
#frontpage-section-tiles .frontpage-sections {
grid-template-columns: 1fr 1fr !important;
}
#frontpage-section-tiles .section-tile {
min-height: 120px;
}
html body.view-home .desktop-nav a[href$="/membership"] {
display: none;
}
/* Watch and Give, always one thumb away. */
html body.view-home main .frontpage-blocks > #frontpage-quick-bar {
display: block;
position: fixed;
inset: auto 0 0 0;
z-index: 50;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: var(--stage);
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
#frontpage-quick-bar .prose p {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
margin: 0 !important;
}
#frontpage-quick-bar .prose a {
display: flex;
align-items: center;
justify-content: center;
height: 54px;
padding: 0 22px;
background: var(--gold);
color: var(--ink) !important;
font: 700 18px/1 var(--ui-f);
border-radius: 2px;
}
#frontpage-quick-bar .prose a[href$="/membership"] {
background: var(--red);
color: #fff !important;
}
}
/* Paper bands paint with clip-path, which lifts them; keep the cards
and rows that sit on them above. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-features, #frontpage-section-tiles) {
position: relative;
z-index: 0;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-signup, #frontpage-give, #frontpage-sponsored, #frontpage-editions, #frontpage-community, #frontpage-follow) {
position: relative;
z-index: 1;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-sponsored {
position: sticky;
}
/* Only the first block of the last row paints the band; its neighbours
sit above it. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-community, #frontpage-follow) {
box-shadow: none;
clip-path: none;
z-index: 2;
}
html body.view-home .site-footer .footer-inner,
html body.view-home .desktop-nav {
max-width: var(--w);
}
@media (max-width: 900px) {
html body.view-home main .frontpage-blocks > #frontpage-quick-bar {
top: auto !important;
bottom: 0 !important;
grid-row: auto !important;
order: 99;
}
/* Paper is the page; dark bands are painted by their blocks. */
html body.view-home .site-main {
background: var(--paper);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-features, #frontpage-signup, #frontpage-give, #frontpage-sponsored, #frontpage-section-tiles, #frontpage-editions, #frontpage-community, #frontpage-follow) {
box-shadow: none;
clip-path: none;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-tv, #frontpage-wire) {
background: var(--stage) !important;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-cine-lead {
background: var(--stage);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-wire {
padding-bottom: 48px !important;
}
html body.view-home .site-footer {
padding-bottom: 90px;
}
}
@media (max-width: 900px) {
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > :is(#frontpage-signup, #frontpage-give) {
padding: 24px !important;
}
}
/* Headings inside the reader blocks match the block labels. */
html body.view-home main .frontpage-blocks > :is(#frontpage-signup, #frontpage-give) :is(.frontpage-signup, .frontpage-appeal) > h2 {
margin: 0 0 6px;
font: 400 28px/1 var(--display-f);
letter-spacing: 0;
text-transform: none;
color: inherit;
}
html body.view-home main .frontpage-blocks > :is(#frontpage-signup, #frontpage-give) :is(.frontpage-signup, .frontpage-appeal) > h2::after {
content: "";
display: block;
width: 40px;
height: 4px;
margin-top: 10px;
background: var(--red);
}
#frontpage-signup .frontpage-signup__button {
line-height: 1.3;
padding: 16px 20px;
height: auto;
}
#frontpage-give .frontpage-appeal__button {
line-height: 1.3;
padding: 16px 20px;
height: auto;
}
html body.view-home main .frontpage-blocks > #frontpage-sponsored:empty {
display: none;
}
@media (max-width: 900px) {
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-quick-bar {
position: fixed !important;
inset: auto 0 0 0 !important;
z-index: 50;
margin: 0 !important;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
background: var(--stage) !important;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
}
@media (max-width: 900px) {
#frontpage-quick-bar .prose {
max-width: none !important;
margin: 0 !important;
}
#frontpage-quick-bar .prose a {
text-decoration: none !important;
}
}
/* When no chosen story has a clip, the lead falls back to a plain lead
list: keep it inside the gutters and readable on the dark stage. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-cine-lead > .stories-lead {
width: var(--w);
margin: 0 auto;
padding: 64px 0 72px;
}
#frontpage-cine-lead .stories-lead :is(.excerpt, .story-meta, .story-meta a) {
color: #cfcac0 !important;
}
#frontpage-cine-lead .stories-lead h3 a {
color: var(--stage-text) !important;
}
/* The lead's text lines up with the wide grid (the live gutter follows
a 1,240px page, so at 1,280 it was 20px), and its byline and reading
time read light on the footage. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-cine-lead .motion-header__text {
padding-left: max(var(--gx), calc((100vw - var(--w)) / 2));
padding-right: max(var(--gx), calc((100vw - var(--w)) / 2));
}
#frontpage-cine-lead .motion-header__text :is(.story-meta, .story-meta a, .story-meta span) {
color: #e8e4dc !important;
}
/* A split-wire or lower-third lead keeps its template's headline size;
the live lead rule sizes to the screen. */
#frontpage-cine-lead .motion-header[data-template="split-wire"] .motion-header__text h2 {
font-size: clamp(26px, min(10.5cqi, 7vh), 84px);
}
#frontpage-cine-lead .motion-header[data-template="lower-third"] .motion-header__text h2 {
font-size: clamp(26px, min(4.6vw, 6.4vh), 64px);
}
/* The Family Brief 2.0 rule widened #frontpage-tv by 30px for its old
two-column homepage; under the immersive layout it scrolled the page
sideways. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-tv {
width: auto;
margin-right: 0;
}
/* A card with no picture reads as a text card, not an empty grey box. */
html body.view-home main .frontpage-blocks .card-image:has(.image-placeholder) {
display: none !important;
}
/* Reports: a paper band across the page after the features, tiles in ink. */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-reports {
grid-column: main-start / main-end;
padding: 72px 0 88px;
color: var(--ink);
background: var(--paper) !important;
box-shadow: 0 0 0 100vmax var(--paper);
clip-path: inset(0 -100vmax);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-reports h2 {
font-size: 30px !important;
color: var(--ink) !important;
}
#frontpage-reports :is(.feed-report__title, .feed-report p) {
color: var(--ink) !important;
text-decoration: none;
}
#frontpage-reports .feed-report__title {
font: 400 24px/1.05 var(--display-f);
text-transform: uppercase;
}
#frontpage-reports .feed-report__by {
color: var(--muted) !important;
font-family: var(--ui-f);
}
@media (max-width: 900px) {
#frontpage-reports {
order: 6;
padding: 48px 0 !important;
}
}
/* Family Brief magazine layer (Oct 2026): the Cover nameplate, an ink
masthead, and the motion clips set at magazine scale. Print cues from a
quarterly (slab numerals, contents page, covers); the clips carry the
photography. Sits after every earlier layer so it wins ties. */
:root {
--mag-ink: #0d0d0e;
--mag-paper: #f4f0e6;
--mag-paper-2: #e9e3d4;
--mag-red: #c8102e;
--mag-rule: rgba(244, 240, 230, 0.18);
--mag-slab: "Rokkitt", "Rockwell", "Roboto Slab", Georgia, serif;
--mag-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
--mag-logo-paper: url("/theme/assets/24c4c376a1abd7c09fdfbc9bf273a7e79f296ba8be6986a4d76465faacb6abad.svg");
--mag-logo-ink: url("/theme/assets/af52c6da29cbc06c5299d36fdf661c9600caefc009f86f8015626c85fe896f30.svg");
}
/* ---------- Masthead: ink, the Cover nameplate, a hairline nav ---------- */
html body .site-header {
background: var(--mag-ink) !important;
color: var(--mag-paper) !important;
border: 0 !important;
}
html body .site-header .header-inner {
align-items: end;
row-gap: 0;
padding-top: 26px;
}
/* The name stays real text for readers and search; the nameplate is
painted over it. */
html body .header-inner .brand > span {
width: clamp(230px, 33vw, 500px) !important;
max-width: 100%;
padding-top: calc(clamp(230px, 33vw, 500px) * 169 / 895);
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
background: var(--mag-logo-paper) 0 0 / 100% auto no-repeat !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
}
html body .header-inner .brand small {
display: block;
margin-top: 12px;
font: italic 400 16px/1.3 var(--fb-reading, Georgia, serif) !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: rgba(244, 240, 230, 0.72) !important;
-webkit-text-fill-color: rgba(244, 240, 230, 0.72) !important;
}
html body .site-header .desktop-nav {
border-top: 1px solid var(--mag-rule);
}
html body .site-header .desktop-nav a {
color: var(--mag-paper) !important;
font: 600 13px/1 var(--mag-slab) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
}
html body .site-header .desktop-nav a[aria-current="page"] {
box-shadow: inset 0 -3px 0 var(--mag-red);
}
html body .site-header .desktop-nav a[href$="/membership"] {
background: var(--mag-red);
color: #fff !important;
}
html body .site-header :is(.reader-account-link, .search-menu summary, .mobile-menu summary) {
color: var(--mag-paper) !important;
border-color: var(--mag-rule) !important;
}
html body .site-header .search-menu summary svg {
stroke: currentColor;
}
/* ---------- Section labels: slab small caps over a red bar ---------- */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > .frontpage-block > h2 {
font: 800 15px/1 var(--mag-slab) !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > .frontpage-block > h2::after {
width: 100%;
height: 1px;
margin-top: 14px;
background: currentColor;
opacity: 0.25;
}
/* ---------- The lead: the cover. Headline in Anton at poster scale ---------- */
#frontpage-cine-lead .motion-header {
min-height: min(92vh, 980px);
}
#frontpage-cine-lead .article-header h2 {
font-family: var(--mag-display) !important;
}
#frontpage-cine-lead .article-header .category {
font: 800 13px/1 var(--mag-slab) !important;
letter-spacing: 0.2em;
text-transform: uppercase;
}
/* ---------- The Wire as a contents page ---------- */
#frontpage-wire .stories-list {
counter-reset: mag-contents;
}
#frontpage-wire .story-card {
counter-increment: mag-contents;
display: grid !important;
grid-template-columns: 52px 1fr;
column-gap: 14px;
align-items: baseline;
}
#frontpage-wire .story-card::before {
content: counter(mag-contents, decimal-leading-zero);
font: 800 30px/1 var(--mag-slab);
color: var(--mag-red);
}
#frontpage-wire .story-card > div {
min-width: 0;
}
/* ---------- Features: the spread. The paper band runs the full width ---------- */
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-features {
grid-column: main-start / main-end !important;
padding: 96px 0 104px !important;
background: var(--mag-paper) !important;
box-shadow: 0 0 0 100vmax var(--mag-paper) !important;
/* Paint sideways only, never over the band above. */
clip-path: inset(0 -100vmax) !important;
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead)::after {
background: var(--mag-paper) !important;
}
#frontpage-features .stories-grid {
grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
gap: 64px 32px !important;
}
#frontpage-features .story-card {
grid-column: span 4;
min-width: 0;
}
#frontpage-features .story-card .card-image {
display: block;
overflow: hidden;
}
#frontpage-features .story-card :is(.card-image img, .card-image video, .motion-card) {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
#frontpage-features .story-card .category {
display: inline-block;
margin: 18px 0 10px;
font: 800 12px/1 var(--mag-slab) !important;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mag-red) !important;
}
#frontpage-features .story-card h3 {
font-family: var(--mag-display) !important;
font-weight: 400 !important;
text-transform: uppercase;
letter-spacing: 0.005em;
}
#frontpage-features .story-card .excerpt {
font: 400 18px/1.45 var(--fb-reading, Georgia, serif) !important;
color: #3b3a36 !important;
}
#frontpage-features .story-card .excerpt:empty {
display: none;
}
/* 1 — The cover story: the clip across the whole page, the headline set in
it, bottom left. */
#frontpage-features .story-card:first-child {
grid-column: 1 / -1 !important;
position: relative;
color: var(--mag-paper);
background: var(--mag-ink);
box-shadow: 0 0 0 100vmax var(--mag-ink);
clip-path: inset(0 -100vmax);
margin-top: -96px;
}
#frontpage-features .story-card:first-child :is(.card-image img, .card-image video, .motion-card) {
aspect-ratio: 21 / 9;
max-height: 82vh;
}
#frontpage-features .story-card:first-child .card-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 22%, rgba(13, 13, 14, 0.62) 52%, rgba(13, 13, 14, 0.94) 100%);
pointer-events: none;
}
/* A still in the cover slot (light pictures, seals, documents) is dimmed so
the headline always reads; clips keep their full light. */
#frontpage-features .story-card:first-child:not(:has(.motion-card)) .card-image img {
filter: brightness(0.5) contrast(1.05);
}
#frontpage-features .story-card:first-child h3 {
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
#frontpage-features .story-card:first-child > div {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0 0 48px;
max-width: 980px;
z-index: 1;
}
#frontpage-features .story-card:first-child h3 {
font-size: clamp(44px, 6.4vw, 104px) !important;
line-height: 0.92 !important;
margin: 0 0 16px;
}
#frontpage-features .story-card:first-child :is(h3 a, .excerpt, .story-meta, .story-meta a) {
color: var(--mag-paper) !important;
}
#frontpage-features .story-card:first-child .excerpt {
max-width: 640px;
font-size: 20px !important;
}
#frontpage-features .story-card:first-child .category {
color: #fff !important;
background: var(--mag-red);
padding: 7px 10px 6px;
}
/* 2 and 3 — a pair, big left, tall right. */
#frontpage-features .story-card:nth-child(2) {
grid-column: span 7;
}
#frontpage-features .story-card:nth-child(2) :is(.card-image img, .card-image video, .motion-card) {
aspect-ratio: 4 / 3;
}
#frontpage-features .story-card:nth-child(3) {
grid-column: span 5;
}
#frontpage-features .story-card:is(:nth-child(2), :nth-child(3)) h3 {
font-size: clamp(30px, 3vw, 46px) !important;
line-height: 0.98 !important;
}
/* 4 — across: picture left, words right. */
#frontpage-features .story-card:nth-child(4) {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 7fr 5fr;
gap: 40px;
align-items: center;
padding-top: 64px;
border-top: 1px solid rgba(13, 13, 14, 0.18);
}
#frontpage-features .story-card:nth-child(4) :is(.card-image img, .card-image video, .motion-card) {
aspect-ratio: 16 / 9;
}
#frontpage-features .story-card:nth-child(4) h3 {
font-size: clamp(34px, 3.4vw, 54px) !important;
line-height: 0.96 !important;
}
/* The rest, three across. */
#frontpage-features .story-card:nth-child(n + 5) h3 {
font-size: 28px !important;
line-height: 1 !important;
}
/* Variance: a story with a still photograph instead of a clip is set as a
print plate — paper mount, hairline, a little grain of age. */
#frontpage-features .story-card:not(:first-child):not(:has(.motion-card)) .card-image {
padding: 12px;
background: #fff;
box-shadow: 0 1px 0 rgba(13, 13, 14, 0.12), 0 18px 40px -24px rgba(13, 13, 14, 0.45);
outline: 1px solid rgba(13, 13, 14, 0.12);
outline-offset: -6px;
}
#frontpage-features .story-card:not(:first-child):not(:has(.motion-card)) .card-image img {
filter: saturate(0.82) contrast(1.04);
}
/* Clips grow slightly as they cross the screen (the scrub runtime sets
--scroll-progress); the page breathes with the reader's scroll. */
@media (prefers-reduced-motion: no-preference) {
#frontpage-features .motion-card :is(img, video) {
transform: scale(calc(1.06 - var(--scroll-progress, 0.5) * 0.06));
transition: transform 0.2s linear;
}
}
/* ---------- Sections as magazine covers ---------- */
#frontpage-section-tiles .frontpage-sections {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
gap: 24px !important;
}
#frontpage-section-tiles .section-tile {
aspect-ratio: 3 / 4;
min-height: 0 !important;
box-shadow: 0 22px 40px -26px rgba(0, 0, 0, 0.6);
}
#frontpage-section-tiles .section-tile__picture,
#frontpage-section-tiles .section-tile__picture :is(img, video, .motion-card, .image-placeholder) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#frontpage-section-tiles .section-tile::before {
/* The nameplate on every cover. */
content: "";
position: absolute;
z-index: 2;
top: 14px;
left: 14px;
right: 14px;
aspect-ratio: 895 / 169;
background: var(--mag-logo-paper) 0 0 / 100% auto no-repeat;
}
#frontpage-section-tiles .section-tile::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(13, 13, 14, 0.55) 0%, transparent 34%, transparent 55%, rgba(13, 13, 14, 0.85) 100%);
}
#frontpage-section-tiles .section-tile__name {
position: absolute;
z-index: 2;
left: 14px;
right: 14px;
bottom: 16px;
font: 400 clamp(34px, 3.4vw, 52px)/0.9 var(--mag-display) !important;
text-transform: uppercase;
color: var(--mag-paper) !important;
}
#frontpage-section-tiles .section-tile__name::before {
content: "The";
display: block;
margin-bottom: 6px;
font: italic 400 18px/1 var(--fb-reading, Georgia, serif);
text-transform: none;
color: rgba(244, 240, 230, 0.8);
}
#frontpage-section-tiles .section-tile__name::after {
content: "issue";
display: inline;
margin: 0 0 0 0.25em;
width: auto;
height: auto;
background: none;
font: italic 400 18px/1 var(--fb-reading, Georgia, serif);
text-transform: none;
color: rgba(244, 240, 230, 0.8);
}
/* ---------- Footer: the nameplate in ink on paper's opposite ---------- */
html body .site-footer .footer-brand > span {
display: block;
width: 260px;
padding-top: calc(260px * 169 / 895);
font-size: 0 !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
background: var(--mag-logo-paper) 0 0 / 100% auto no-repeat !important;
}
html body .site-footer .footer-brand .brand-mark {
display: none;
}
/* ---------- Phones ---------- */
@media (max-width: 760px) {
html body .site-header .header-inner {
padding-top: 16px;
}
html body .header-inner .brand > span {
width: min(64vw, 280px) !important;
padding-top: calc(min(64vw, 280px) * 169 / 895);
}
html body.view-home main .frontpage-blocks:has(> #frontpage-cine-lead) > #frontpage-features {
padding: 56px 0 64px !important;
}
#frontpage-features .stories-grid {
grid-template-columns: 1fr !important;
gap: 44px !important;
}
#frontpage-features .story-card,
#frontpage-features .story-card:is(:nth-child(2), :nth-child(3)) {
grid-column: 1 / -1 !important;
}
#frontpage-features .story-card:first-child {
margin-top: -56px;
}
#frontpage-features .story-card:first-child :is(.card-image img, .card-image video, .motion-card) {
aspect-ratio: 4 / 5;
max-height: none;
}
/* On a phone the words sit under the clip, still on ink. */
#frontpage-features .story-card:first-child > div {
position: static;
padding: 20px 0 36px;
}
#frontpage-features .story-card:first-child .card-image::after {
display: none;
}
#frontpage-features .story-card:first-child h3 {
font-size: 40px !important;
}
#frontpage-features .story-card:nth-child(4) {
display: block;
padding-top: 40px;
}
#frontpage-features .story-card:nth-child(n + 2) :is(.card-image img, .card-image video, .motion-card) {
aspect-ratio: 4 / 3;
}
#frontpage-section-tiles .frontpage-sections {
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
#frontpage-section-tiles .section-tile__name {
font-size: 28px !important;
}
}


/* ---------- The cover, v2: the picture across the whole screen, an
editorial frame on the words (Oct 10 2026). ---------- */
@media (min-width: 900px) {
#frontpage-features .story-card:first-child .card-image {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
aspect-ratio: auto !important;
}
#frontpage-features .story-card:first-child :is(.card-image img, .card-image video, .motion-card) {
aspect-ratio: auto !important;
width: 100%;
height: min(88vh, 940px);
max-height: none !important;
}
/* Dark from the left where the words sit, open on the right. */
#frontpage-features .story-card:first-child .card-image::after {
background:
linear-gradient(90deg, rgba(13, 13, 14, 0.9) 0%, rgba(13, 13, 14, 0.66) 30%, rgba(13, 13, 14, 0.12) 60%, transparent 78%),
linear-gradient(180deg, rgba(13, 13, 14, 0.35) 0%, transparent 18%, transparent 56%, rgba(13, 13, 14, 0.88) 100%) !important;
}
#frontpage-features .story-card:first-child > div {
padding: 0 0 72px 32px !important;
max-width: 920px;
border-left: 6px solid var(--mag-red);
}
#frontpage-features .story-card:first-child > div::before {
content: "Cover story";
display: block;
margin-bottom: 20px;
font: 800 12px/1 var(--mag-slab);
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(246, 241, 230, 0.78);
}
#frontpage-features .story-card:first-child h3 {
text-wrap: balance;
}
#frontpage-features .story-card:first-child .excerpt {
max-width: 600px;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid rgba(246, 241, 230, 0.28);
font-size: 21px !important;
line-height: 1.45 !important;
}
#frontpage-features .story-card:first-child .story-meta {
margin-top: 18px;
font: 700 12px/1 var(--mag-slab) !important;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* A still drifts in slowly as it scrolls past; clips already move. */
@media (prefers-reduced-motion: no-preference) {
#frontpage-features .story-card:first-child:not(:has(.motion-card)) .card-image img {
animation: fb-cover-drift 18s ease-out both;
}
}
}
@keyframes fb-cover-drift {
from { transform: scale(1.08); }
to { transform: scale(1); }
}
/* The full-bleed picture must never widen the page. */
html body.view-home { overflow-x: clip; }

/* Phone order for the later story grids (Oct 10 2026): after reports, after the
   briefing, then the all-stories link last. Without an order they sat above the cover. */
@media (max-width: 900px) {
#frontpage-reports { order: 6; }
#frontpage-more-stories { order: 6; padding: 40px 0 !important; }
#frontpage-more-to-read { order: 9; padding: 40px 0 !important; }
#frontpage-all-stories { order: 14; }
}

/* Later story grids: on phones they sit on paper, so ink headlines (the stage
   rule made them paper-on-paper); on desktop they keep the stage's light type. */
@media (max-width: 900px) {
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card h3 a { color: var(--mag-ink, #0d0d0e) !important; }
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card h3 { font-family: var(--mag-display) !important; font-weight: 400 !important; text-transform: uppercase; line-height: 1 !important; }
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card .category { color: var(--mag-red, #c8102e) !important; }
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card :is(.excerpt) { color: #3b3a36 !important; }
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card :is(.story-meta, .story-meta a) { color: var(--muted, #6b6a64) !important; }
:is(#frontpage-more-stories, #frontpage-more-to-read) > h2 { color: var(--mag-ink, #0d0d0e) !important; }
}

/* ---------- Phones: the later story grids as compact rows, rising into
   place as they scroll in (Oct 10 2026). Thumbnails keep their stills. ---------- */
@media (max-width: 900px) {
:is(#frontpage-more-stories, #frontpage-more-to-read) .stories-grid {
display: flex !important;
flex-direction: column;
gap: 0 !important;
}
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card {
display: grid !important;
grid-template-columns: 108px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 16px 0 !important;
margin: 0 !important;
border-top: 1px solid rgba(13, 13, 14, 0.14);
}
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card:last-child {
border-bottom: 1px solid rgba(13, 13, 14, 0.14);
}
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card .card-image {
display: block;
width: 108px;
aspect-ratio: 1 / 1 !important;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
background: var(--mag-ink, #0d0d0e);
}
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card :is(.card-image img, .card-image video, .motion-card) {
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover;
transform: none !important;
}
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card .card-image video { display: none; }
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card > div { min-width: 0; }
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card .category {
display: block;
margin: 2px 0 6px !important;
font: 800 11px/1 var(--mag-slab, Georgia, serif) !important;
letter-spacing: 0.18em;
text-transform: uppercase;
}
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card h3 {
margin: 0 0 8px !important;
font-size: 21px !important;
line-height: 1.02 !important;
}
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card .excerpt { display: none !important; }
:is(#frontpage-more-stories, #frontpage-more-to-read) .story-card .story-meta {
margin: 0 !important;
font-size: 12px !important;
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:is(#frontpage-more-stories, #frontpage-more-to-read, #frontpage-features) .story-card {
animation: fb-row-rise linear both;
animation-timeline: view();
animation-range: entry 0% entry 70%;
}
}
}
}
@keyframes fb-row-rise {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}

/* ---------- Phones: motion headers reach the story sooner; reports swipe
   (Oct 10 2026). ---------- */
@media (max-width: 700px) {
.motion-header { --mh-scroll-length: 150svh; }
}
@media (max-width: 900px) {
#frontpage-reports ul {
display: flex !important;
gap: 14px;
margin: 0 -16px !important;
padding: 4px 16px 18px !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
overscroll-behavior-x: contain;
scrollbar-width: none;
list-style: none;
}
#frontpage-reports ul::-webkit-scrollbar { display: none; }
#frontpage-reports li.feed-report {
flex: 0 0 76%;
max-width: 300px;
margin: 0 !important;
scroll-snap-align: start;
}
#frontpage-reports .feed-report__cover { display: block; }
#frontpage-reports .feed-report__cover img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
}
#frontpage-reports li.feed-report > p:last-child { display: none; }
#frontpage-reports .feed-report__title {
display: block;
margin: 6px 0 4px;
font: 400 22px / 1.02 var(--mag-display) !important;
text-transform: uppercase;
color: var(--mag-ink, #0d0d0e) !important;
text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
#frontpage-reports li.feed-report {
animation: fb-rail-in linear both;
animation-timeline: view(inline);
animation-range: entry 0% entry 60%;
}
}
}
}
@keyframes fb-rail-in {
from { opacity: 0.35; transform: scale(0.92); }
to { opacity: 1; transform: none; }
}

/* Drop cap only on the story's first paragraph (Oct 10 2026): a body split by
   an embed, chart or ask has several .prose blocks, and each one opened with
   its own cap. */
.view-article .article-layout > .prose ~ .prose > p:first-of-type::first-letter {
float: none !important;
font: inherit !important;
color: inherit !important;
margin: 0 !important;
padding: 0 !important;
line-height: inherit !important;
}


/* Lead carousel (Oct 11): the strip of stories keeps one height, and every lead's heading sits clear of it and of the masthead. */
#frontpage-cine-lead .motion-header__text .article-deck { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 701px) {
  #frontpage-cine-lead .lead-carousel__tabs { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  #frontpage-cine-lead .lead-carousel__tabs a { height: 128px; overflow: hidden; box-sizing: border-box; }
  #frontpage-cine-lead .lead-carousel__pause { position: absolute; right: var(--fb-gutter, 16px); top: -44px; margin: 0; background: rgba(11, 11, 13, 0.72); color: #fff; }
  #frontpage-cine-lead .motion-header__text { padding-bottom: calc(160px + var(--mh-top, 0px)); }
}
@media (min-width: 701px) and (max-height: 900px) {
  #frontpage-cine-lead .byline-featured--lead .byline-featured__photo { width: 96px; height: 96px; }
  #frontpage-cine-lead .byline-featured--lead .byline-featured__name { font-size: clamp(36px, 5vw, 64px); }
  #frontpage-cine-lead .motion-header__text .article-deck { -webkit-line-clamp: 2; }
}
@media (min-width: 701px) and (max-height: 700px) {
  #frontpage-cine-lead .byline-featured--lead { display: none; }
}
@media (max-width: 700px) {
  #frontpage-cine-lead .motion-header[data-template="split-wire"] .motion-header__text { padding-bottom: calc(200px + var(--mh-top, 0px)); }
}

@media (min-width: 701px) and (max-height: 900px) {
  #frontpage-cine-lead .byline-featured--lead .byline-featured__photo { width: 80px; height: 80px; }
  #frontpage-cine-lead .byline-featured--lead .byline-featured__name { font-size: clamp(32px, 4.4vw, 52px); }
}