) must keep its natural casing. */
.list-post .byline-wrapper,
.list-post .author-byline,
.list-post .byline,
.list-post .author-name,
.list-post .byline-wrapper a,
.list-post .author-byline a,
.list-post .byline a,
.list-post .author-name a,
.list-post .presented-by,
.list-post .presented-by a {
font-family: "MD Lorien", Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 18px;
letter-spacing: 0;
color: #000;
font-feature-settings: "swsh";
}
/* Lowercase only the wrapper's own text ("By "), not the link inside it. */
.list-post .byline-wrapper {
text-transform: lowercase;
}
.list-post .byline-wrapper .byline,
.list-post .byline-wrapper a {
text-transform: none;
}
/* Sponsored content entries — #F3F3F3 background between rules. */
.list-post.is-sponsored {
background: #F3F3F3;
padding: 16px;
}
/* ============================================================
Lead editorial / marquee (section-lead-editorial.php)
============================================================ */
/* Place card directly below the image instead of overlapping it.
Parent sets margin-top: -78px which collides with the larger reskin title. */
.featured-post .featured-post-card {
margin-top: 0;
max-width: 100%;
padding: 16px 0 0;
background: none;
}
/* Full-width marquee only (homepage + anywhere the .container wrapper is
used, NOT vertical landings which wrap in .content-with-sidebar):
100px gutters L/R on the card. Desktop only — mobile keeps full width. */
@media (min-width: 768px) {
.container > .featured-post .featured-post-card {
margin-left: 100px;
margin-right: 100px;
max-width: calc(100% - 200px);
}
}
/* Hero marquee — single big featured story. */
.featured-post .featured-post-card .post-slug,
.featured-post .featured-post-card a.post-slug:link,
.featured-post .featured-post-card a.post-slug:visited {
font-family: "MD Lorien", Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 21px;
text-transform: capitalize;
letter-spacing: 0;
color: #000;
font-feature-settings: "swsh";
}
.featured-post .featured-post-card a.post-slug:hover,
.featured-post .featured-post-card a.post-slug:focus {
color: #d2232a;
}
.featured-post .featured-post-card .post-title,
.featured-post .featured-post-card .post-title a {
font-family: "Queens Compressed", Georgia, serif;
font-weight: 500;
font-size: 39px;
line-height: 42px;
}
.featured-post .featured-post-card .post-excerpt,
.featured-post .featured-post-card .post-excerpt p {
font-family: "FAIRE Octave", Georgia, serif;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
/* Marquee excerpt sits 5px below the title (was inherited 10px from parent). */
.featured-post .featured-post-card .post-excerpt {
margin-top: 5px;
}
/* 3-column story ribbon under the marquee. */
.grid-content .grid-post .post-slug,
.grid-content .grid-post a.post-slug:link,
.grid-content .grid-post a.post-slug:visited {
font-family: "MD Lorien", Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 18px;
text-transform: capitalize;
letter-spacing: 0;
color: #000;
font-feature-settings: "swsh";
}
.grid-content .grid-post a.post-slug:hover,
.grid-content .grid-post a.post-slug:focus {
color: #d2232a;
}
.grid-content .grid-post .post-title,
.grid-content .grid-post .post-title a {
font-family: "Queens Compressed", Georgia, serif;
font-weight: 500;
font-size: 24px;
line-height: 25px;
}
/* "You Might Also Like" related-posts module under single posts.
Titles are ...
inside
.related-module .grid-post. Override the story-ribbon Queens
Compressed treatment above (which has 3-class specificity) with a
4-class selector, and also target the inner so the font reaches
the actual text node. */
.related-module .grid-content .grid-post .post-title,
.related-module .grid-content .grid-post .post-title p {
font-family: "FAIRE Octave", Georgia, serif;
font-weight: 600;
font-size: 14px;
line-height: 1.2;
}
/* Parent CSS lands .related-module .post-slug { text-transform: uppercase },
which would re-uppercase the "Sponsor Content" PHP string back to
"SPONSOR CONTENT". Beat that 2-class selector with a 3-class one. */
.related-module .grid-post .post-slug {
text-transform: capitalize;
}
/* Story-ribbon excerpt (the .guide-list block below each .post-title in
.grid-content cards) — same FAIRE Octave Regular 16px / 22px line-height
used by river and marquee excerpts. Parent renders this block as a plain
.guide-list div; some entries also wrap text in Word-paste spans
(.TextRun / .NormalTextRun / .EOP) so we force the font down through
any nested wrappers. */
.grid-content .grid-post .guide-list,
.grid-content .grid-post .guide-list p,
.grid-content .grid-post .guide-list span {
font-family: "FAIRE Octave", Georgia, serif;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.grid-content .grid-post .guide-list {
margin-top: 5px;
}
/* Match .post-excerpt p — strip the browser's default
margin so the
.guide-list block hugs its container instead of stacking extra space. */
.grid-content .grid-post .guide-list p {
margin: 0;
}
/* ============================================================
Footer
============================================================ */
/* Footer nav (About / Contact / Magazine / ...) — OTT Buzz Black 21px. */
.site-footer .menu-footer-main > li > a,
.site-footer .footer-navigation a {
font-family: "OTT Buzz", "Helvetica Neue", Arial, sans-serif;
font-weight: 900;
font-size: 21px;
text-transform: none;
letter-spacing: 0.02em;
}
/* Footer logo — sized via img, parent wrapper margin/padding zeroed.
The SVG ships with only a viewBox (no width/height attrs), so an explicit
width is required — otherwise the browser renders it 0x0. */
.site-footer .footer-logo,
.site-footer .footer-logo span {
display: inline-block;
margin: 0;
padding: 0;
}
.site-footer .footer-logo .footer-logo-img {
display: block;
width: 220px;
height: auto;
}
@media (max-width: 767px) {
.site-footer .footer-logo .footer-logo-img {
width: 130px;
}
}
/* Mobile nav-bar logo — same new SVG. Sized for the compact nav strip. */
.header-navigation .navigation-logo .navigation-logo-img {
display: block;
width: 130px;
height: auto;
}
/* Mobile section-front (the secondary logo block shown on archive/single below
the nav strip). Parent CSS only styled the old