/*
 * Philly Mag reskin — scoped overrides layered on top of parent philly.css.
 *
 * Font format: all families now ship as WOFF2 (after the foundry's
 * "Collected for Production" drop). No OTF fallbacks needed.
 */

/* ---------- Queens (logo/display) ---------- */

@font-face {
	font-family: "Queens Compressed";
	src: url("../fonts/queens/QueensCompressed_W-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Queens Compressed";
	src: url("../fonts/queens/QueensCompressed_W-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Queens Compressed";
	src: url("../fonts/queens/QueensCompressed_W-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- MD Lórien (italic editorial accents) ---------- */

@font-face {
	font-family: "MD Lorien";
	src: url("../fonts/md-lorien/MDLorien-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "MD Lorien";
	src: url("../fonts/md-lorien/MDLorien-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "MD Lorien";
	src: url("../fonts/md-lorien/MDLorien-Book.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "MD Lorien";
	src: url("../fonts/md-lorien/MDLorien-BookItalic.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* ---------- OTT Buzz Black (primary nav) ---------- */

@font-face {
	font-family: "OTT Buzz";
	src: url("../fonts/ott-buzz/OTT_Buzz-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- FAIRE Octave (body/dek) ---------- */

@font-face {
	font-family: "FAIRE Octave";
	src: url("../fonts/faire-octave/FAIRE-Octave-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "FAIRE Octave";
	src: url("../fonts/faire-octave/FAIRE-Octave-RegularItalic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "FAIRE Octave";
	src: url("../fonts/faire-octave/FAIRE-Octave-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "FAIRE Octave";
	src: url("../fonts/faire-octave/FAIRE-Octave-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* ============================================================
   Header
   ============================================================ */

/* Center logo image, sized to the SVG's native height. Reset inherited margins. */
.site-header .header-logo,
.site-header .header-logo h1,
.site-header .header-logo div {
	margin: 0;
	padding: 0;
}
.site-header .header-logo .header-logo-img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
}

/* Align all three header columns (Become-a-Member / logo / Newsletters) to the
   logo baseline. Parent uses align-items: center; switch to flex-end so the
   CTA text sits on the same baseline as the logo. */
.site-header .site-header-inner {
	align-items: flex-end;
}

/* Home page only: parent CSS forces .site-header to height: 135px;
   padding: 4px 0 at the stuck-menu breakpoint (≥60.625em), which
   cramps the larger Philadelphia logo. Unset the fixed height and
   use 33px vertical padding so the header sizes to its contents.
   Verticals keep the parent sizing because their 60px-capped wordmark
   already fits the 135px slot. */
body.home .site-header,
body.front-page .site-header {
	height: auto;
	padding: 33px 0;
}

/* "Become a Member" / "Newsletters" — live text replacing the old SVG icons.
   Center each link inside its flex/grid header column.
   padding-bottom shifts the text up off the logo's descender (the "p" tail
   in "Philadelphia") so it visually sits on the logo's typographic baseline. */
.site-header .header-cta-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-bottom: 12px;
}
.site-header .header-cta {
	display: inline-block;
	font-family: "MD Lorien", Georgia, serif;
	font-style: italic;
	font-weight: 500; /* Book */
	font-size: 21px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #D2232A;
	font-feature-settings: "swsh";
}
.site-header .header-cta:hover,
.site-header .header-cta:focus {
	color: #000;
	text-decoration: none;
}

/* Hide the old thin-line/SVG icon wrappers if any remain. */
.site-header .header-social .thin-line,
.site-header .header-subscribe .thin-line {
	display: none;
}

/* "Become a Member" / "Newsletters" inside the mobile menu drawer
   (.header-tablet-elements, shown when .js-header-menu-compact.js-expanded).
   The desktop site-header is hidden on mobile, so these are the only place
   mobile users see the CTAs. Same MD Lorien Italic treatment as desktop. */
.header-tablet-elements .header-mobile-cta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}
.header-tablet-elements .header-mobile-cta .header-cta {
	display: inline-block;
	font-family: "MD Lorien", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 21px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #D2232A;
	font-feature-settings: "swsh";
}
.header-tablet-elements .header-mobile-cta .header-cta:hover,
.header-tablet-elements .header-mobile-cta .header-cta:focus {
	color: #000;
	text-decoration: none;
}

/* On desktop the same two CTAs already live in the site-header. Hide the
   drawer copy so templates whose body class isn't in the parent's
   .home/.page/.single/.search/.archive whitelist (e.g. body.error404)
   don't show duplicate Become a Member / Newsletters links when the
   hamburger is opened at desktop width. */
@media (min-width: 1025px) {
	.header-tablet-elements .header-mobile-cta {
		display: none;
	}
}

/* Patch the parent's 404 gap: it only switches .header-menu-wrapper to
   display:flex on .home / .page / .single / .search / .archive, and only
   hides .mobile-menu-toggle on those same body classes. body.error404
   misses both, so desktop ends up with no horizontal nav and a stranded
   hamburger. Mirror the .page/.single/.search/.archive rules at the
   hamburger breakpoint set at the end of this file. */
@media (min-width: 1025px) {
	body.error404 .header-menu-wrapper {
		display: flex;
		justify-content: space-between;
		flex: 1;
	}
	body.error404 .mobile-menu-toggle {
		display: none;
	}
}

/* Drop the hairline above the nav strip — parent sets
   .header-navigation { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd }
   and on non-home templates the top border becomes the line between the
   page-top banner ad and the rest of the header. Per spec, remove it.
   The bottom border stays — it still separates the nav strip from the
   logo header / page content. */
.header-navigation {
	border-top: 0;
}

/* Primary nav — FAIRE Octave Bold, no dashes, no current-site arrow.
   Per client spec, top-level items opt OUT of the capitalize +
   letter-spacing set by the broader `.menu-header-main a` rule below
   (this selector is more specific, so `none`/`normal` win). Padding still
   comes from that rule. */
.header-navigation .menu-header-main > li > a {
	font-family: "FAIRE Octave", "Helvetica Neue", Arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
	text-transform: none;
	letter-spacing: normal;
}

/* Templates where the Philadelphia logo sits inline with the menu items get
   a smaller nav type, because the logo eats the horizontal room the links
   would otherwise have. The selector list mirrors the parent's own rule for
   showing that logo (_header-sticky.scss):
     .single, .page:not(.home), .archive, and any template once .is_stuck
   — so the homepage picks this up too the moment the nav sticks on scroll.

   Scoped to the full-menu width: below the hamburger breakpoint the menu is a
   stacked drawer with no inline logo, so every template keeps the 20px there. */
@media (min-width: 1025px) {

	body.single .header-navigation .menu-header-main > li > a,
	body.page:not(.home) .header-navigation .menu-header-main > li > a,
	body.archive .header-navigation .menu-header-main > li > a,
	.header-navigation.is_stuck .menu-header-main > li > a {
		font-size: 17px;
	}
}

/* Shared menu link properties — applied to ALL menu links (top-level and
   sub-menu). text-transform is now overridden to `none` by both the
   top-level and sub-menu rules per client spec; it stays here as the
   fallback for any menu link neither selector reaches. Don't add other
   declarations here. */
.menu-header-main a {
	text-transform: capitalize;
	padding: 5px 0;
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* Sub-menu items — FAIRE Octave, smaller, no capitalize. */
.js-header-menu-full .menu-header-main .sub-menu > li a {
	font-family: "FAIRE Octave", Helvetica, sans-serif;
	font-size: 14px;
	text-transform: none;
}

/* Mobile drawer: dropdown (sub-menu) links match the top-level header
   menu typeface (FAIRE Octave) for visual consistency inside the drawer.
   Size kept below the 21px top-level items so the hierarchy reads.
   Breakpoint matches the hamburger breakpoint set at the end of this file. */
@media (max-width: 1024px) {
	.js-header-menu-full .menu-header-main .sub-menu > li a {
		font-size: 16px;
	}
}

/* Parent theme has a media-queried rule:
     @media (min-width: 52.1875em) {
       .js-header-menu-full .menu-header-main .menu-item-has-children:not(.no-children) > a {
         padding-right: 13px;
       }
     }
   ...that reintroduces 13px right padding on dropdown items at ≥835px,
   leftover from the removed chevron. Force it back to 0 so dropdown items
   match non-dropdown spacing. */
.header-navigation .menu-header-main .menu-item-has-children:not(.no-children) > a,
.header-navigation .menu-header-main .menu-item-has-children > a {
	padding-right: 0 !important;
}

/* Remove the dash separators between top-level nav items. */
.header-navigation .menu-header-main > li::before,
.header-navigation .menu-header-main > li::after,
.header-navigation .menu-header-main > li + li::before {
	content: none !important;
	display: none !important;
	border: 0 !important;
}

/* Remove the arrow/indicator on the currently active item. */
.header-navigation .menu-header-main > li.current-menu-item > a::before,
.header-navigation .menu-header-main > li.current-menu-item > a::after,
.header-navigation .menu-header-main > li.current-menu-ancestor > a::before,
.header-navigation .menu-header-main > li.current-menu-ancestor > a::after {
	content: none !important;
	display: none !important;
}

/* Dropdown-indicator arrows on menu items with children.
   Desktop (>= 768px): hide entirely.
   Mobile  (< 768px) : keep, but recolor red → black. */
@media (min-width: 768px) {
	.header-navigation .menu-header-main .menu-item-has-children:not(.no-children) > a::after {
		content: none !important;
		display: none !important;
		border: 0 !important;
	}
}
@media (max-width: 767px) {
	.header-navigation .menu-header-main .menu-item-has-children:not(.no-children) > a::after {
		border-top-color: #000 !important;
	}
}

/* ============================================================
   Front-page river
   ============================================================ */

/* "LATEST STORIES" / "Trending" / "Page not found" / "2026 Issues" / etc.
   — Queens Compressed Bold 28px, hairline rules on the SIDES of the text.
   Applies to every .title-line section header regardless of tag (h1/h2/h3),
   so 404, issues, newsletters, page-events, etc. all match the front-page
   river style. .presented-by is an inline "Sponsor Content" label using
   the same class and is intentionally excluded.
   Parent styles use !important on this selector, so we match it. */
h1.title-line,
h2.title-line,
h3.title-line,
.list-content > .container h2.title-line,
.list-content h2.title-line {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	font-family: "Queens Compressed", Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 28px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	background: none !important;
	border: 0 !important;
	padding: 16px 0 !important;
}
h1.title-line::before,
h1.title-line::after,
h2.title-line::before,
h2.title-line::after,
h3.title-line::before,
h3.title-line::after {
	content: "" !important;
	flex: 1 !important;
	height: 1px !important;
	background: #000 !important;
	/* Override the parent's PNG-pattern "dots" background. */
	background-image: none !important;
	border-top: 0 !important;
	width: auto !important;
	top: auto !important;
}

/* Section dividers between river chunks — was dots, now hairline. */
hr.double {
	border: 0;
	border-top: 1px solid #000;
	margin: 32px 0;
	background: none;
	height: 0;
}

/* Single-post + page templates drop a standalone <div class="container">
   <hr class="double"></div> right under the topic-bar/vertical title.
   Per reskin spec the line should go. Scoped to :only-child so river
   dividers (which sit alongside .content-with-sidebar inside .container)
   are unaffected. */
.container > hr.double:only-child {
	display: none;
}

/* River entry typography */
.list-post .post-slug,
.list-post a.post-slug,
.list-post a.post-slug:link,
.list-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";
}
.list-post a.post-slug:hover,
.list-post a.post-slug:focus {
	color: #d2232a;
}
.list-post .post-title,
.list-post .post-title a {
	font-family: "Queens Compressed", Georgia, serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.15;
}
.list-post .post-excerpt,
.list-post .post-excerpt p {
	font-family: "FAIRE Octave", Georgia, serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
}
.list-post .post-excerpt {
	margin-top: 5px;
}
/* Author byline — MD Lórien Book Italic, black.
   Parent helper outputs literal "By "; we want that lowercase, but the author
   name (inside the <a>) 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 <span class="post-title"><p>...</p></span> 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 <p> 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 <p> 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 / ...) — homepage typeface at 17px. */
.site-footer .menu-footer-main > li > a,
.site-footer .footer-navigation a {
	font-family: "FAIRE Octave", "Helvetica Neue", Arial, sans-serif;
	font-weight: bold;
	font-size: 17px;
	text-transform: none;
	letter-spacing: normal;
}

/* 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 <svg> sprite — our <img>
   needs explicit centering/sizing, and the tagline needs the reskin font
   since it's outside .site-header .header-logo. */
.mobile-section-front .mobile-section-front-logo-img {
	display: block;
	width: 220px;
	max-width: 90%;
	height: auto;
	margin: 0 auto;
}
.mobile-section-front .section-front-tagline {
	display: block;
	margin: 6px auto 0;
	text-align: center;
	font-family: "MD Lorien", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	color: #000;
	font-feature-settings: "swsh";
}

/* ============================================================
   Vertical pages — tagline beneath the wordmark logo
   ============================================================ */

/* The .section-front-tagline span is the per-vertical line ("All That's
   Fresh in Food & Drink", etc.) rendered beneath the THE SPECIAL /
   BE WELL PHILLY / etc. wordmarks.
   MD Lorien italic, Book, 21px per client spec. */
.site-header .header-logo .section-front-tagline {
	display: block;
	margin-top: 8px;
	font-family: "MD Lorien", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 21px;
	line-height: 1.2;
	color: #000;
	text-align: center;
	font-feature-settings: "swsh";
}

/* When a tagline is present, push the logo column's bottom up by the same
   12px the CTA columns use, so the tagline's baseline lines up with the
   CTA baselines (Become a Member / Newsletters). */
.site-header .header-logo:has(.section-front-tagline) {
	padding-bottom: 12px;
}
/* Vertical wordmark sizing — cap height at 60px, scale down on narrower
   screens. Homepage Philadelphia logo (no .section-front-tagline) is
   intentionally untouched. */
.site-header .header-logo:has(.section-front-tagline) .header-logo-img {
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 60px;
}

/* ============================================================
   Trending sidebar widget — match LATEST STORIES hairline styling
   ============================================================ */

/* The popular-content widget renders its title as
   <h2 class="widget-title title-line"><span>Trending</span></h2>.
   The h2.title-line global rule already provides the hairline-flanked layout
   via flex + ::before/::after pseudos. The inner <span> needs to stop
   eating all the room so the hairlines actually appear. */
.widget-title.title-line > span {
	flex: 0 0 auto;
	padding: 0 8px;
	white-space: nowrap;
}

/* Trending list-item titles — FAIRE Octave Bold (per screenshot 2b). */
.trending-post-title,
.trending-post-title.post-title,
.trending-post-title a,
.trending-post-title.post-title a {
	font-family: "FAIRE Octave", Georgia, serif;
	font-weight: 700;
}

/* Trending widget title bottom margin → 0. */
.trending-widget .widget-title.title-line,
.trending-widget h2.title-line,
.widget.trending-widget h2.title-line {
	margin-bottom: 0;
}

/* Nudge trending list-item numbers down 2px to align with the new title typography. */
.trending-widget > ol li:before {
	top: 2px;
}

/* ============================================================
   Single post / page typography
   ============================================================ */

/* Single-post rubric ("Opinion", "News", etc.) — the post-slug variant that
   sits above the article title with id="post-rubric". Same MD Lorien italic
   treatment as the river/marquee categories. */
.post-article .post-slug,
.post-article a.post-slug,
.post-article #post-rubric,
.post-article a.post-slug:link,
.post-article a.post-slug:visited {
	font-family: "MD Lorien", Georgia, serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: 18px !important;
	text-transform: capitalize !important;
	letter-spacing: 0 !important;
	color: #000 !important;
	font-feature-settings: "swsh";
}
.post-article a.post-slug:hover,
.post-article a.post-slug:focus,
.post-article a#post-rubric:hover,
.post-article a#post-rubric:focus {
	color: #d2232a !important;
}

/* Title — Queens Compressed Medium (same size as parent's $font-size-post-title). */
.post-article .post-title,
.single .post-article .post-title {
	font-family: "Queens Compressed", Georgia, serif;
	font-weight: 500;
}

/* Single post / page headline line-height. Scoped to h1.post-title so
   the trending widget (h3.trending-post-title.post-title) keeps its
   1.2 line-height. */
h1.post-title {
	line-height: 1.1;
}

/* Author archive (/author/<slug>/) — the author's name is rendered as
   <h1 class="post-title"> inside #author-page-info. It lives outside
   .post-article, so the single-post Queens Compressed override doesn't
   reach it. Apply the same family/weight here. */
#author-page-info h1.post-title {
	font-family: "Queens Compressed", Georgia, serif;
	font-weight: 500;
}

/* Dek / subhead — FAIRE Octave Regular 16px / 22px line-height. */
.post-article .post-excerpt,
.post-article .post-excerpt p,
.single .post-article .post-excerpt,
.single .post-article .post-excerpt p {
	font-family: "FAIRE Octave", Georgia, serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
}

/* Byline ("By LEASON SHERMAN") — MD Lorien Italic, drop the parent's
   uppercase transformation. Parent applies text-transform: uppercase to
   .byline-wrapper a inside .post-article. */
.post-article .byline-wrapper,
.post-article .byline-wrapper a,
.post-article .byline,
.post-article .byline a,
.post-article .author-name,
.post-article .author-name a {
	font-family: "MD Lorien", Georgia, serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: 18px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #000 !important;
	font-feature-settings: "swsh";
}
/* Same "By" lowercase trick as on the river. */
.post-article .byline-wrapper {
	text-transform: lowercase !important;
	padding-top: 10px;
	padding-bottom: 5px;
}
.post-article .byline-wrapper .byline,
.post-article .byline-wrapper a {
	text-transform: none !important;
}

/* Middle-dot separator (·) between author name and date sits on the
   baseline by default — recenter it vertically with the surrounding text
   and nudge 2px upward per design.
   Parent compiled CSS lands its own rule on .post-article .byline-wrapper
   #byline-dot, so we bump specificity (author-date-wrapper + span#) and
   add !important to win. */
.post-article .byline-wrapper .author-date-wrapper span#byline-dot {
	vertical-align: middle !important;
	display: inline-block !important;
	line-height: 1 !important;
	position: relative !important;
	top: -2px !important;
}

/* Mobile (<48em): parent leaves a 9px margin-bottom on .author-date-wrapper
   which, stacked on top of our 5px byline-wrapper padding-bottom, makes
   the gap to the bottom hairline feel too airy. Desktop already zeroes
   this in parent CSS — mirror the same behavior on mobile. */
@media (max-width: 47.99em) {
	.post-article .byline-wrapper .author-date-wrapper {
		margin-bottom: 0;
	}
}

/* Publication date / timestamp inside the byline — Gotham 13px italic
   #909090 (matches photo caption styling per spec). Defeats the MD Lorien
   override applied to the byline-wrapper parent. */
.post-article .byline-wrapper [itemprop="datePublished"],
.post-article .byline-wrapper [itemprop="datePublished"] time,
.post-article .byline-wrapper time {
	font-family: "Gotham", "Helvetica Neue", Arial, sans-serif !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	color: #909090 !important;
	font-feature-settings: normal;
}

/* "Read More About:" tag-list label at the bottom of singles/pages —
   Queens Compressed Medium per client spec. */
.post-article .post-tags .post-subtitle,
.post-tags .post-subtitle,
body.page .wysiwyg .post-subtitle {
	font-family: "Queens Compressed", Georgia, serif !important;
	font-weight: 500 !important;
}

/* Wisepops in-article newsletter widget — 20px bottom padding so the
   sign-up box doesn't bump against whatever follows it in the post body.
   .wisepops-root is the wrapper injected by the Wisepops loader at runtime. */
.wisepops-root {
	padding-bottom: 20px;
}

/* Body copy — FAIRE Octave. Targets the wysiwyg article body wrapper,
   excluding captions/figcaptions (which stay in Gotham per spec). */
.post-article .post-article-content,
.post-article .post-article-content p,
.post-article-wrapper > article p,
.post-article-wrapper > article li,
.post-article-wrapper > article blockquote {
	font-family: "FAIRE Octave", Georgia, serif;
	font-weight: 400;
}

/* Captions stay Gotham — restore the parent default just in case our
   body-copy selector above caught them. */
.post-article figcaption,
.post-article .wp-caption-text,
.post-article-wrapper figcaption,
.post-article-wrapper .wp-caption-text,
body.page .wysiwyg figcaption,
body.page .wysiwyg .wp-caption-text {
	font-family: "Gotham", "Helvetica Neue", Arial, sans-serif !important;
}

/* ============================================================
   Page templates — mirror single-post typography
   (per /restaurants/50-best-restaurants/, /contact/, /about/)
   ============================================================ */

/* Page headings — Queens Compressed Medium (like single .post-title). */
body.page .wysiwyg h1,
body.page .wysiwyg h2,
body.page .wysiwyg h3 {
	font-family: "Queens Compressed", Georgia, serif;
	font-weight: 500;
}

/* Page body copy — FAIRE Octave (like single .post-article body). */
body.page .wysiwyg p,
body.page .wysiwyg li,
body.page .wysiwyg blockquote {
	font-family: "FAIRE Octave", Georgia, serif;
	font-weight: 400;
}

/* If a page renders the post excerpt (subhead/dek), match the single spec. */
body.page .wysiwyg .post-excerpt,
body.page .wysiwyg .post-excerpt p {
	font-family: "FAIRE Octave", Georgia, serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
}

/* Page byline if present — same MD Lorien italic treatment. */
body.page .wysiwyg .byline-wrapper,
body.page .wysiwyg .byline-wrapper a,
body.page .wysiwyg .byline,
body.page .wysiwyg .byline a {
	font-family: "MD Lorien", Georgia, serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #000 !important;
	font-feature-settings: "swsh";
}
body.page .wysiwyg .byline-wrapper {
	text-transform: lowercase !important;
}
body.page .wysiwyg .byline-wrapper .byline,
body.page .wysiwyg .byline-wrapper a {
	text-transform: none !important;
}

/* ============================================================
   Nativo-injected sponsored content
   ============================================================
   The parent's river partials drop empty placeholder divs at fixed
   positions (`.nativo-home-page-1/2/3` on the homepage,
   `.nativo-section-page-1/2/3` on vertical landing pages). Nativo's
   JS then injects sponsored cards into those divs.

   The injected markup doesn't pick up our .list-post.is-sponsored
   class because PHP never sees it. Apply the gray sponsored-card
   background to the containers themselves, and target the Nativo
   classes (.ntv-*) we can reach when the injection is HTML (vs
   sandboxed iframe — those we can't style). */

/* Once Nativo's load.js fires, it REPLACES the placeholder div
   (.nativo-home-page-N / .nativo-section-page-N / .nativo1/2/3)
   with its own markup: <div class="list-post ntv-hp ntvClickOut ...">
   — the original nativo-home-page-* class is gone. The injected element
   uses our regular .list-post structure (post-image-link + list-post-card
   + post-slug "Sponsor Content" + post-title + post-excerpt + byline-wrapper)
   so river typography applies automatically — but without .is-sponsored,
   the gray sponsored-card background is missed. Target Nativo's own
   markers (.ntv-hp on homepage placements, .ntvClickOut on any nativo ad)
   to apply the same gray treatment as .list-post.is-sponsored.

   The previous gray-box rule targeting the empty placeholder divs was
   removed — those divs sit unfilled before/without an ad and would
   otherwise show a stray gray box. */
.list-post.ntv-hp,
.list-post.ntvClickOut {
	background: #F3F3F3;
	padding: 16px !important;
	/* Nativo's inline style="margin-top: -20px; padding-top: 20px" is
	   left intact — it pulls the gray flush with the previous row's
	   border-bottom (matching the .gpt-ad.native-river behavior). */
}

/* Freestar/GAM native river slot — same gray sponsored-card treatment.
   The wrapper <div class="gpt-ad native-river"> is our DOM (Freestar
   leaves it for us to style); the <iframe> inside is cross-origin
   safeframe.googlesyndication.com and unreachable. The wrapper takes
   the gray background AND the .list-post box-model (border-bottom +
   padding-bottom + margin-bottom) so it slots into the river rhythm
   between regular .list-post rows — otherwise the hairline above
   appears 20px above the gray and the hairline below sits 20px+ below. */
.list-content .gpt-ad.native-river,
.gpt-ad.native-river {
	background: #F3F3F3;
	padding: 16px;
	padding-bottom: 0;
	margin-top: -20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ddd;
}

/* Nativo headline / title — match river .post-title spec. */
.list-content [class*="nativo-home-page"] .ntv-headline,
.list-content [class*="nativo-home-page"] .ntv-title,
.list-content [class*="nativo-section-page"] .ntv-headline,
.list-content [class*="nativo-section-page"] .ntv-title,
.list-content [class*="nativo-home-page"] h2,
.list-content [class*="nativo-home-page"] h3,
.list-content [class*="nativo-section-page"] h2,
.list-content [class*="nativo-section-page"] h3 {
	font-family: "Queens Compressed", Georgia, serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.15;
}

/* Nativo rubric / sponsor label — match river .post-slug. */
.list-content [class*="nativo-home-page"] .ntv-rubric,
.list-content [class*="nativo-home-page"] .ntv-sponsor,
.list-content [class*="nativo-home-page"] .ntv-sponsor-name,
.list-content [class*="nativo-section-page"] .ntv-rubric,
.list-content [class*="nativo-section-page"] .ntv-sponsor,
.list-content [class*="nativo-section-page"] .ntv-sponsor-name {
	font-family: "MD Lorien", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 15px;
	text-transform: capitalize;
	letter-spacing: 0;
	color: #000;
	font-feature-settings: "swsh";
}

/* Nativo body/dek — match river .post-excerpt. */
.list-content [class*="nativo-home-page"] .ntv-description,
.list-content [class*="nativo-home-page"] .ntv-summary,
.list-content [class*="nativo-section-page"] .ntv-description,
.list-content [class*="nativo-section-page"] .ntv-summary,
.list-content [class*="nativo-home-page"] p,
.list-content [class*="nativo-section-page"] p {
	font-family: "FAIRE Octave", Georgia, serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
}

/* ============================================================
   Find-a-pro container — 20px bottom padding
   ============================================================ */

.find-a-pro-container {
	padding-bottom: 20px;
}

/* ============================================================
   404 template body copy → FAIRE Octave (per spec). Targets the body
   text that follows the "Page not found" hairline title.
   ============================================================ */

body.error404 .wysiwyg,
body.error404 .wysiwyg p,
body.error404 .post-article,
body.error404 .post-article p,
body.error404 main p {
	font-family: "FAIRE Octave", Georgia, serif;
	font-weight: 400;
}

/* ============================================================
   Q&A post-slug exception — disable swsh swashes for "Q&A" rubric.
   reskin.js adds .is-qa to any .post-slug whose textContent is "Q&A"
   (case-insensitive, ampersand-tolerant); strip swsh swashes there so
   the "&" doesn't render as a curly variant.
   ============================================================ */

.post-slug.is-qa,
.post-slug.is-qa a,
a.post-slug.is-qa,
#post-rubric.is-qa {
	font-feature-settings: normal !important;
}

/* ============================================================
   Microsite top bar (#mp_bar) reskin.
   The bar (parent theme partials/microsite/universal_nav.php, styled in
   metrocorp/.../templates/_microsite.scss) shows the Philly wordmark plus a
   hover dropdown. We override here rather than in the parent SASS so no
   philly.css recompile / METROCORP_VERSION bump is needed — reskin.css loads
   after philly.css, so these win.
   ============================================================ */

/* Swap the old sprite Philadelphia mark for the reskin wordmark. The bar is
   black, so we use a white-filled copy of phillymag-PHILADELPHIA.svg.
   Left-aligned, 20px tall, bottom-aligned so the "p" descender sits ~3px above
   the bar's bottom edge. */
.microsite #mp_bar nav .dropdown a.dropdown_logo.philly {
	position: relative;
	background: url("../images/microsite/phillymag-PHILADELPHIA-white.svg") no-repeat left bottom 3px;
	background-size: auto 20px;
}

/* The old sprite baked a dropdown caret in next to the wordmark; the clean SVG
   doesn't, so redraw it as a small white down-triangle. Vertically centered in
   the bar; `left` sits it just past the wordmark (nudge if the size changes). */
.microsite #mp_bar nav .dropdown a.dropdown_logo.philly::after {
	content: "";
	position: absolute;
	left: 110px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #fff;
}

/* Dropdown items: OTT Buzz (Black is the only bundled face, so weight 500
   currently renders as 900 until an OTT Buzz Medium is added), 18px,
   capitalized. Matches the specificity of the parent's Heroic rule and wins
   by load order. */
.microsite #mp_bar nav .dropdown .mp-submenu-wrap ul li a {
	font-family: "OTT Buzz", "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
}

/* ============================================================
   Best of Philly microsite — category & winner typography.
   Swaps the parent theme's Gotham/Chronicle/Noe faces for the reskin
   fonts (OTT Buzz headings, FAIRE Octave body) on the BOP microsites.
   Scoped with the [class*="microsite-best-of-philly"] attribute selector
   so it matches every yearly BOP microsite (best-of-philly-2024,
   best-of-philly-2025, ...) plus their category sub-pages — the
   parent-slug body class from single-mp-microsite.php:115 is
   year-specific, so a plain .microsite-best-of-philly class may not
   exist. The attribute selector keeps class-level (0,1,0) specificity and
   is carried through the #mp_main ID to match the parent rules in
   metrocorp/assets/css/sass/templates/_microsite.scss. reskin.css loads
   after philly.css, so equal specificity wins — no philly.css recompile
   / METROCORP_VERSION bump needed.
   ============================================================ */

/* Category landing cards (partials/microsite/bestof-categories.php).
   Heading -> OTT Buzz, size unchanged (parent: 45px). Dek -> FAIRE
   Octave 24px / 1.2em. */
[class*="microsite-best-of-philly"] #mp_main .bop-category div.bop-cat-txt h2 {
	font-family: "OTT Buzz", "Helvetica Neue", Arial, sans-serif;
	letter-spacing: 0.5px;
}
[class*="microsite-best-of-philly"] #mp_main .bop-category div.bop-cat-txt p {
	font-family: "FAIRE Octave", Georgia, serif;
	font-size: 24px;
	line-height: 1.2em;
}

/* Winner entries (partials/microsite/bestof-winners.php +
   bestof-search-results.php). Title -> OTT Buzz, size unchanged (parent:
   38px, 40px on .top-winner). Body copy -> FAIRE Octave, other settings
   (18px / 1.5em) unchanged. The parent forces Noe Text on the paragraph
   and its inline links with !important, so we override in kind. */
[class*="microsite-best-of-philly"] #mp_main .bop-winner h2.post-title {
	font-family: "OTT Buzz", "Helvetica Neue", Arial, sans-serif;
	letter-spacing: 0.5px;
}
[class*="microsite-best-of-philly"] #mp_main .bop-winner > p,
[class*="microsite-best-of-philly"] #mp_main .bop-winner > p a {
	font-family: "FAIRE Octave", Georgia, serif !important;
}

/* ============================================================
   Best of Philly microsite — 2026 nav arrow palette + party CTA.
   ============================================================ */

/* Category nav arrows (background images), 2026 palette. Applied globally
   across all years — year-based overrides were intentionally dropped, so this
   also restyles the 2025 site. #nav-philadelphians is new this year (the old
   category was City Life -> #nav-city-life, left untouched for 2025). The nav
   id is #nav-<category cta_link> (bestof-nav.php:55), so it depends on the
   Philadelphians category's cta_link being `philadelphians/`. Selector mirrors
   the parent's 2-ID specificity (#bestof-nav-wrapper nav a#nav-*,
   metrocorp/.../_microsite.scss:1273) so it wins by load order. cdn10 host to
   match the existing arrow URLs. */
#bestof-nav-wrapper nav a#nav-food-drink     { background-image: url("https://cdn10.phillymag.com/wp-content/uploads/sites/3/2026/07/DownArrows300x155-food.png"); }
#bestof-nav-wrapper nav a#nav-fun-games      { background-image: url("https://cdn10.phillymag.com/wp-content/uploads/sites/3/2026/07/DownArrows300x155-fun.png"); }
#bestof-nav-wrapper nav a#nav-philadelphians { background-image: url("https://cdn10.phillymag.com/wp-content/uploads/sites/3/2026/07/DownArrows300x155-philadelphians.png"); }
#bestof-nav-wrapper nav a#nav-helpers-fixers { background-image: url("https://cdn10.phillymag.com/wp-content/uploads/sites/3/2026/07/DownArrows300x155-helpers.png"); }
#bestof-nav-wrapper nav a#nav-shopping-style { background-image: url("https://cdn10.phillymag.com/wp-content/uploads/sites/3/2026/07/DownArrows300x155-shopping.png"); }
#bestof-nav-wrapper nav a#nav-health-self    { background-image: url("https://cdn10.phillymag.com/wp-content/uploads/sites/3/2026/07/DownArrows300x155-health.png"); }

/* Temporary Best of Philly 2026 party CTA image — centered between the search
   fields and the first category card. Markup + auto-expiry live in
   metrocorp/partials/microsite/bestof-categories.php. */
.bop-party-cta { display: block; width: 100%; margin: 30px auto; text-align: center; }
.bop-party-cta img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   The Citizen nav item: vertical spacers + lightning bolt
   Mockup: … Best Of Philly │ ⚡ THE CITIZEN │ 🔍

   The spacers match the hairline the parent theme draws under the nav strip —
   .header-navigation { border-bottom: 1px solid #ddd } — so 1px solid #ddd.

   Both are pseudo-elements rather than a border-left/border-right on the link
   itself. A border would be simpler and is flush by definition, but it is tied
   to the link's own box: it would run the full height of the hover fill rather
   than the 26px the design calls for, and being painted over the fill it would
   show as a grey hairline across the black on hover. Pseudo-elements keep the
   rule height independent of the link box, and one variable keeps the two
   sides identical.
   --------------------------------------------------------------------------- */
.header-navigation {
	--pm-nav-rule-color: #ddd;
	--pm-nav-rule-height: 26px;

	/* The fill's inset padding (see the .menu-item-citizen > a rule), reused as
	   the item's outer separation from the preceding nav link. NOT the spacing
	   between a spacer and the fill — that is zero, see the flex `gap` below. */
	--pm-nav-rule-gap: 10px;
}

.header-navigation .menu-header-main > li.menu-item-citizen {
	display: flex;
	align-items: center;

	/* Zero, deliberately: each spacer has to butt straight up against the hover
	   fill, which ends at the link's border box. The link's own padding supplies
	   the breathing room between the fill's edge and the label, so any gap here
	   would just push the spacers off the black. */
	gap: 0;

	margin-left: 0;
}

/* Both spacers hang off the Citizen item itself, so they stay symmetrical
   around it and around its hover fill. The trailing one cannot live on
   .header-search: that sits in a different flex context, so it can be neither
   height-matched to the leading spacer nor positioned against the hover fill.

   !important is required here: an earlier rule in this file kills every
   `.menu-header-main > li` ::before and ::after with !important to remove the
   old dash separators. This selector carries an extra class, so it wins. */
.header-navigation .menu-header-main > li.menu-item-citizen::before,
.header-navigation .menu-header-main > li.menu-item-citizen::after {
	content: "" !important;
	display: block !important;
	border: 0 !important;
	flex: 0 0 auto;
	width: 1px !important;
	height: var(--pm-nav-rule-height) !important;
	background-color: var(--pm-nav-rule-color) !important;
}

.header-navigation .menu-header-main > li.menu-item-citizen > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-transform: none;

	/* Parent theme sets `width: 100%` on every nav link; harmless for the
	   inline-block items but this one is a flex item, so pin it to its
	   content and keep the hover fill tight around the label. */
	width: auto;

	/* Breathing room INSIDE the fill. Replaces the parent's ±10px box-shadow
	   spill (killed below) — see the note on the spacer gap for why. */
	padding-left: var(--pm-nav-rule-gap);
	padding-right: var(--pm-nav-rule-gap);
}

/* The parent paints the hover/focus fill as a 10px spill either side of the
   link box:
     a:hover { box-shadow: -10px 0 0 0 $black, 10px 0 0 0 $black }
   That puts the fill edge at exactly the same x as each spacer, so subpixel
   rounding decided per-side whether a spacer landed inside or outside the
   black — the leading one read as clear of it, the trailing one as swallowed
   by it. The padding above supplies the same visual spill, so drop the
   shadow: the fill now ends at the link's own border box and both spacers sit
   a real `--pm-nav-rule-gap` clear of it. */
.header-navigation .menu-header-main > li.menu-item-citizen > a:hover,
.header-navigation .menu-header-main > li.menu-item-citizen > a:focus,
.header-navigation .menu-header-main > li.menu-item-citizen > a:active,
.header-navigation .menu-header-main > li.menu-item-citizen.js-expanded > a {
	box-shadow: none;
}

/* 100% process magenta, matching the supplied artwork (Bolt_Pink.svg uses
   #ec008c; Bolt_Pink.eps declares %%DocumentProcessColors: Magenta → CMYK
   0/100/0/0). The SVG itself is inlined with fill="currentColor" by
   citizen_bolt_svg() in core.php, so this rule owns the color.

   Size: the artwork's viewBox is 81.73 × 147, a ratio of ~0.556, so 17px tall
   gives 9.45px wide. Both are declared because an inline SVG with `width:auto`
   sizes inconsistently as a flex item. Keep them in step with the viewBox —
   changing one alone squashes the bolt. */
.menu-item-citizen-bolt {
	flex: 0 0 auto;
	width: 9.45px;
	height: 17px;
	color: #ec008c;
}

/* Spacers are a desktop-nav treatment; in the stacked mobile drawer the menu
   items are full-width rows, where a vertical hairline reads as an artefact. */
@media (max-width: 1024px) {

	.header-navigation .menu-header-main > li.menu-item-citizen {
		display: block;
		margin-left: 0;
	}

	.header-navigation .menu-header-main > li.menu-item-citizen::before,
	.header-navigation .menu-header-main > li.menu-item-citizen::after {
		display: none !important;
	}

	/* The desktop inset padding is there to shape the hover fill, which the
	   drawer doesn't paint. Left as-is it would indent this row 10px while
	   every sibling row sits at the parent's 17px. */
	.header-navigation .menu-header-main > li.menu-item-citizen > a {
		padding-left: 17px;
		padding-right: 0;
	}
}

/* ============================================================
   Hamburger breakpoint — 1025px
   ============================================================

   The parent theme switches to the hamburger at two different widths:
     .home                                 -> $bp-show-header (768px)
     .page / .single / .search / .archive  -> $bp-stuck-menu  (970px)
   (see _header-layout.scss and _header-mobile.scss). Per spec both move to a
   single 1025px threshold: full horizontal nav at >=1025px, hamburger below.

   Done here rather than by editing the parent's $mq-breakpoints because
   themes/metrocorp is shared with the other Metrocorp titles — changing those
   variables would move the breakpoint for every site and needs a dist rebuild.
   ------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1024px) {

	/* Hide the horizontal nav. The drawer is the same element, so the expanded
	   state has to keep winning — hence :not(.js-expanded) rather than a plain
	   `display: none`, which would make the hamburger open nothing. */
	.header-navigation:not(.js-expanded) .header-menu-wrapper {
		display: none;
	}

	/* Show the toggle. The ID is needed for specificity: the parent hides it
	   with `.home .mobile-menu-toggle` / `.page .mobile-menu-toggle` (0,2,0).
	   Deliberately not extended below 768px, where `.js-header-search-expanded`
	   hides this button on purpose.

	   margin-left: auto pins it to the right, beside the search icon. Without it
	   `.header-navigation-inner`'s `justify-content: space-between` strands the
	   button in whatever gap is left, and the gap differs per template because
	   the row's other children come and go:
	     interior pages, >=970px  [logo (flex-basis 115px, no grow)] [toggle] [search]
	                              -> three items spread -> toggle marooned mid-row
	     homepage,       >=768px  [toggle] [search]
	                              -> logo hidden (the big .site-header logo is
	                                 showing instead) -> toggle pinned hard left
	   Below 768px the logo grows (flex: 1) and already pushes the toggle right,
	   so this is a no-op there. */
	#js-header-navigation .mobile-menu-toggle {
		display: inline-block;
		margin-left: auto;
	}

	/* Homepage: adopt the same condensed header this band already gets below
	   768px — small wordmark flush left in the nav strip, hamburger flush right,
	   no oversized .site-header block above it. Interior templates are untouched
	   (they keep .site-header per the parent) and already look right here.

	   Two parent rules are in the way, both from _header-logo.scss /
	   _header-layout.scss:
	     .site-header               display: block  from 48em
	     .navigation-logo           display: none   from 48em, and again from
	                                60.625em where it also loses its flex grow
	                                (flex: 0; flex-basis: 115px)
	   The body-class prefix carries enough specificity (0,3,1) to beat both
	   (0,2,0) without !important. Restoring `flex: 1` is what pins the wordmark
	   flush left and lets it push the toggle and search over to the right.

	   The Become a Member / Newsletters CTAs live inside .site-header, so hiding
	   it here would strand them — but .header-tablet-elements already carries
	   them in the drawer, and that block is shown below 1025px. */
	body.home .site-header,
	body.front-page .site-header {
		display: none;
	}

	body.home .header-navigation .navigation-logo,
	body.front-page .header-navigation .navigation-logo {
		display: block;
		flex: 1;
	}
}

@media (min-width: 970px) and (max-width: 1024px) {

	/* How the parent's JS reads the breakpoint: window.getScreenSize() in
	   helpers.js compares this string, and header/mobile.js treats "medium" as
	   hamburger territory. Reporting "medium" up to 1024px is what keeps the
	   JS class toggling (js-header-menu-compact / -full) in step with the CSS
	   above. "medium" is consumed only by header/mobile.js — the other two
	   callers read "small"/"small-medium", which are untouched. */
	body::before {
		content: "medium";
	}

	/* Everything below re-homes parent rules that stop at $bp-large-menu
	   (970px) and so no longer reach the band we just moved into hamburger
	   territory. Without these the drawer opens unstyled between 970-1024px. */

	/* Fixed full-height overlay (_header-layout.scss). */
	.js-expanded .header-menu-wrapper {
		position: fixed;
		left: 0;
		top: 41px;
		width: 100%;
		z-index: 1000;
		background: #fff;
		height: calc(100vh - 41px);
		overflow: auto;
		border-top: 0;
		border-bottom: 0;
		-webkit-overflow-scrolling: touch;
	}
	.admin-bar .js-expanded .header-menu-wrapper {
		top: 73px;
		height: calc(100vh - 73px);
	}

	/* The menu list is display:flex from 970px up; a stacked drawer needs it
	   back to block, or the rows sit side by side. */
	.js-expanded .menu-header-main {
		display: block;
	}
	.js-expanded .menu-header-main > li {
		display: block;
		margin-right: 0;
	}

	/* Drawer row indent (_header-menu.scss, below $bp-stuck-menu). */
	#js-header-navigation.js-expanded .menu-header-main a {
		padding-left: 17px;
	}
}