/*
Theme Name: Terpapar! Musik
Theme URI: https://terpaparmusik.com/
Author: Terpapar! Musik
Author URI: https://terpaparmusik.com/
Description: Tema editorial yang ringan dan responsif untuk Terpapar! Musik.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: terpapar-musik
Tags: blog, news, one-column, three-columns, custom-logo, custom-menu, featured-images, sticky-post, threaded-comments, translation-ready, wide-blocks
*/

:root {
	--ink: #00355e;
	--ink-deep: #082f46;
	--pink: #e60d54;
	--paper: #faf9f6;
	--white: #ffffff;
	--aqua: #cbe9eb;
	--blush: #f2dce7;
	--yellow: #fff1c7;
	--blue-wash: #dce9f6;
	--line: rgba( 0, 53, 94, 0.2 );
	--muted: #557084;
	--heading: "Montserrat", Arial, sans-serif;
	--body: "Inter", Arial, sans-serif;
	--site-width: 1240px;
	--content-width: 780px;
	--gutter: clamp( 20px, 4vw, 56px );
	--radius: 2px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var( --paper );
	color: var( --ink-deep );
	font-family: var( --body );
	font-size: 16px;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
}

body::selection,
body *::selection {
	background: var( --pink );
	color: var( --white );
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

button,
input,
textarea,
select {
	font: inherit;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
	color: var( --pink );
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var( --pink );
	outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var( --ink );
	font-family: var( --heading );
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.site-width {
	width: min( calc( 100% - ( var( --gutter ) * 2 ) ), var( --site-width ) );
	margin-inline: auto;
}

.site-width-narrow {
	width: min( calc( 100% - ( var( --gutter ) * 2 ) ), var( --content-width ) );
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 14px;
	background: var( --white );
	color: var( --ink );
	font-weight: 700;
}

.site-header {
	position: relative;
	background:
		radial-gradient( ellipse at 9% 100%, var( --blush ) 0, transparent 45% ),
		radial-gradient( ellipse at 83% -5%, var( --yellow ) 0, transparent 48% ),
		radial-gradient( ellipse at 90% 105%, var( --aqua ) 0, transparent 49% ),
		var( --paper );
}

.masthead-inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 176px;
	gap: 28px;
}

.site-branding,
.footer-logo {
	position: relative;
	z-index: 1;
}

.site-logo-link,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-logo,
.custom-logo {
	width: min( 390px, 50vw );
	max-height: 110px;
	object-fit: contain;
	object-position: left center;
}

.main-navigation {
	position: relative;
	z-index: 20;
	background: var( --paper );
	border-top: 1px solid var( --line );
	border-bottom: 1px solid var( --line );
	color: var( --ink-deep );
}

.navigation-inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	min-height: 65px;
}

.primary-menu-wrap,
.primary-menu {
	display: flex;
	align-items: stretch;
}

.primary-menu,
.primary-menu ul,
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu > li {
	position: relative;
	display: flex;
	align-items: stretch;
}

.primary-menu > li > a,
.search-trigger,
.menu-toggle {
	display: flex;
	align-items: center;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.primary-menu > li > a {
	position: relative;
	padding: 0 18px;
}

.primary-menu > li:first-child > a {
	padding-left: 0;
}

.primary-menu > .current-menu-item > a::after,
.primary-menu > .current-menu-ancestor > a::after,
.primary-menu > li > a:hover::after {
	position: absolute;
	right: 18px;
	bottom: 0;
	left: 18px;
	height: 2px;
	background: var( --pink );
	content: "";
}

.primary-menu > li:first-child > a::after {
	left: 0;
}

.primary-menu > li.menu-item-partnership {
	align-items: center;
}

.primary-menu > li.menu-item-partnership > a {
	align-self: center;
	min-height: 44px;
	margin: 8px 0 8px 12px;
	padding: 10px 16px;
	border-radius: 4px;
	background: var( --pink );
	color: var( --white );
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.primary-menu > li.menu-item-partnership > a:hover {
	background: #bf1049;
}

.primary-menu > li.menu-item-partnership > a:focus-visible {
	outline: 2px solid var( --ink );
	outline-offset: 3px;
}

.primary-menu > li.menu-item-partnership > a::after {
	content: none;
}

@media ( max-width: 900px ) {
	.primary-menu > li.menu-item-partnership > a {
		margin-left: 0;
		justify-content: center;
	}
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	visibility: hidden;
	min-width: 220px;
	padding: 8px;
	background: var( --white );
	color: var( --ink-deep );
	box-shadow: 0 14px 30px rgba( 0, 20, 40, 0.18 );
	opacity: 0;
	transform: translateY( 5px );
	transition: 160ms ease;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY( 0 );
}

.primary-menu .sub-menu a {
	display: block;
	padding: 10px 12px;
	font-size: 14px;
	text-decoration: none;
}

.primary-menu .sub-menu a:hover {
	background: var( --aqua );
}

.search-trigger {
	gap: 10px;
	padding: 0;
}

.icon-search {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-radius: 50%;
	flex: 0 0 auto;
}

.icon-search::after {
	position: absolute;
	right: -5px;
	bottom: -3px;
	width: 6px;
	height: 2px;
	background: currentColor;
	content: "";
	transform: rotate( 45deg );
	transform-origin: left center;
}

.menu-toggle {
	display: none;
	cursor: pointer;
	padding: 0;
}

.site-main {
	padding-top: 0;
	padding-bottom: 64px;
}

.section-top,
.latest-heading,
.aside-heading,
.lead-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.section-top {
	padding: 35px 0 24px;
}

.eyebrow,
.post-category,
.post-meta,
.editor-pick time,
.single-hero figcaption {
	font-family: var( --body );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.eyebrow,
.post-meta,
.editor-pick time,
.single-hero figcaption {
	color: var( --muted );
}

.pink-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 10px;
	background: var( --pink );
	border-radius: 50%;
}

.text-link {
	color: var( --ink );
	font-family: var( --body );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.lead-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.9fr ) minmax( 280px, 0.9fr );
	gap: 46px;
}

.image-link {
	display: block;
	overflow: hidden;
	background: var( --blue-wash );
	border-radius: 3px;
	text-decoration: none;
}

.lead-image-link {
	aspect-ratio: 1.7 / 1;
}

.lead-image,
.card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 350ms ease;
}

.image-link:hover .lead-image,
.image-link:hover .card-image {
	transform: scale( 1.025 );
}

.image-placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	min-height: 210px;
	place-items: center;
	background:
		linear-gradient( 135deg, rgba( 255, 255, 255, 0.52 ), transparent 60% ),
		var( --aqua );
}

.image-placeholder-lead {
	min-height: 100%;
	background:
		linear-gradient( 135deg, rgba( 255, 255, 255, 0.62 ), transparent 60% ),
		var( --blush );
}

.image-placeholder img {
	width: min( 58%, 260px );
	opacity: 0.9;
}

.post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 20px 0 11px;
}

.post-category {
	color: var( --pink );
	text-decoration: none;
}

.lead-title {
	max-width: 920px;
	margin: 0;
	font-size: clamp( 30px, 3.1vw, 46px );
	font-weight: 800;
	line-height: 1.12;
}

.lead-title a,
.card-title a,
.editor-pick h3 a {
	text-decoration: none;
}

.lead-excerpt,
.card-excerpt,
.single-deck,
.archive-description {
	color: var( --muted );
}

.lead-excerpt {
	max-width: 650px;
	margin-top: 19px;
	font-size: 16px;
}

.lead-excerpt p,
.card-excerpt p {
	margin: 0;
}

.lead-bottom {
	margin-top: 24px;
	color: var( --ink-deep );
	font-size: 14px;
}

.editor-picks {
	padding-left: 32px;
	border-left: 1px solid var( --line );
}

.aside-heading {
	padding: 1px 0 18px;
	border-bottom: 1px solid var( --ink );
}

.aside-heading h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.aside-heading > span {
	color: var( --pink );
	font-size: 20px;
}

.editor-pick {
	display: grid;
	grid-template-columns: 25px 1fr;
	gap: 17px;
	padding: 24px 0;
	border-bottom: 1px solid var( --line );
}

.editor-pick:last-child {
	border-bottom: 0;
}

.pick-number {
	color: #8b9ca3;
	font-family: var( --heading );
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.04em;
}

.editor-pick h3 {
	margin: 7px 0 13px;
	font-size: 18px;
	line-height: 1.45;
	letter-spacing: -0.035em;
}

.latest-section,
.related-posts {
	margin-top: 58px;
	padding-top: 30px;
	border-top: 1px solid var( --ink );
}

.latest-heading {
	align-items: flex-end;
	margin-bottom: 30px;
}

.latest-heading h2,
.listing-header h1,
.not-found-page h1,
.empty-state h1 {
	margin: 0;
	font-size: clamp( 28px, 3vw, 36px );
	font-weight: 800;
}

.latest-heading h2 span,
.listing-header h1 span,
.not-found-page h1 span,
.empty-state h1 span,
.search-modal h2 span {
	color: var( --pink );
}

.story-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 38px 26px;
}

.card-image-link {
	aspect-ratio: 1.5 / 1;
}

.story-card .post-meta {
	margin: 17px 0 11px;
}

.card-title {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
}

.card-excerpt {
	font-size: 16px;
	line-height: 1.7;
}

.archive-link {
	display: flex;
	justify-content: center;
	margin-top: 38px;
}

.button-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 20px;
	border: 1px solid var( --ink );
	border-radius: 3px;
	background: transparent;
	color: var( --ink );
	font-family: var( --body );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: 160ms ease;
}

.button-outline:hover {
	border-color: var( --pink );
	background: var( --pink );
	color: var( --white );
}

.listing-page {
	min-height: 55vh;
	padding-top: clamp( 55px, 7vw, 92px );
	padding-bottom: clamp( 80px, 10vw, 130px );
}

.listing-header {
	max-width: 900px;
	margin-bottom: clamp( 42px, 6vw, 74px );
}

.listing-header .eyebrow {
	display: block;
	margin-bottom: 22px;
}

.listing-header h1 {
	font-size: clamp( 42px, 7vw, 82px );
}

.archive-description {
	max-width: 680px;
	margin-top: 20px;
	font-size: 17px;
}

.archive-description p {
	margin: 0;
}

.archive-grid {
	row-gap: 70px;
}

.navigation.pagination,
.comments-area .nav-links {
	margin-top: 70px;
}

.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.page-numbers {
	display: grid;
	min-width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid var( --line );
	font-family: var( --heading );
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.page-numbers.current,
.page-numbers:hover {
	border-color: var( --ink );
	background: var( --ink );
	color: var( --white );
}

.single-main {
	padding-bottom: clamp( 80px, 10vw, 140px );
}

.single-header {
	padding-top: clamp( 62px, 8vw, 110px );
	padding-bottom: clamp( 42px, 6vw, 72px );
}

.single-header h1 {
	margin: 18px 0 0;
	font-size: clamp( 40px, 7vw, 84px );
	font-weight: 800;
}

.single-post .single-header h1 {
	font-size: clamp( 30px, 4.2vw, 52px );
	line-height: 1.15;
}

.single-deck {
	margin-top: 24px;
	font-size: clamp( 18px, 2.2vw, 23px );
	line-height: 1.5;
}

.single-hero {
	margin-bottom: clamp( 44px, 7vw, 84px );
}

.single-hero img {
	width: 100%;
	max-height: 760px;
	object-fit: cover;
}

.single-hero figcaption {
	margin-top: 12px;
	line-height: 1.5;
	text-transform: none;
}

.entry-content {
	font-size: clamp( 17px, 1.5vw, 19px );
	line-height: 1.82;
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content pre,
.entry-content table,
.entry-content figure {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 2.2em;
	margin-bottom: 0.75em;
}

.entry-content h2 {
	font-size: clamp( 29px, 4vw, 43px );
}

.entry-content h3 {
	font-size: clamp( 23px, 3vw, 31px );
}

.entry-content a {
	color: var( --pink );
}

.entry-content blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 8px 0 8px clamp( 24px, 5vw, 52px );
	border-left: 6px solid var( --pink );
	color: var( --ink );
	font-family: var( --heading );
	font-size: clamp( 22px, 3.2vw, 34px );
	font-weight: 700;
	line-height: 1.35;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 16px;
	color: var( --muted );
	font-family: var( --body );
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
}

.entry-content pre,
.entry-content code {
	font-family: Consolas, Monaco, monospace;
}

.entry-content pre {
	overflow-x: auto;
	padding: 22px;
	background: var( --ink-deep );
	color: var( --white );
	font-size: 14px;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.entry-content th,
.entry-content td {
	padding: 12px;
	border: 1px solid var( --line );
	text-align: left;
}

.entry-content hr {
	margin: 3em 0;
	border: 0;
	border-top: 1px solid var( --line );
}

.entry-content .alignwide {
	width: min( var( --site-width ), calc( 100vw - ( var( --gutter ) * 2 ) ) );
	max-width: none;
	margin-left: 50%;
	transform: translateX( -50% );
}

.entry-content .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX( -50% );
}

.wp-caption,
.gallery-caption {
	max-width: 100%;
}

.wp-caption-text,
.entry-content figcaption {
	margin-top: 10px;
	color: var( --muted );
	font-size: 12px;
	line-height: 1.55;
}

.alignleft {
	float: left;
	margin-right: 28px;
}

.alignright {
	float: right;
	margin-left: 28px;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.article-footer {
	margin-top: 64px;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding-bottom: 34px;
	border-bottom: 1px solid var( --line );
}

.tag-list span,
.tag-list a {
	padding: 7px 10px;
	border: 1px solid var( --line );
	font-family: var( --heading );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

.tag-list span {
	border-color: var( --ink );
	background: var( --ink );
	color: var( --white );
}

.author-box {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 22px;
	margin-top: 34px;
	padding: 28px;
	background: var( --aqua );
}

.author-box .avatar {
	width: 76px;
	height: 76px;
	border-radius: 50%;
}

.author-box h2 {
	margin: 5px 0 7px;
	font-size: 23px;
}

.author-box p {
	margin: 0;
	font-size: 14px;
}

.post-navigation {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1px;
	margin-top: clamp( 70px, 9vw, 110px );
	background: var( --line );
	border: 1px solid var( --line );
}

.post-navigation > div {
	display: flex;
	flex-direction: column;
	padding: clamp( 25px, 4vw, 42px );
	background: var( --paper );
}

.post-navigation > div:last-child {
	align-items: flex-end;
	text-align: right;
}

.post-navigation span {
	display: block;
	margin-bottom: 12px;
	color: var( --muted );
	font-family: var( --heading );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.post-navigation a {
	font-family: var( --heading );
	font-size: clamp( 17px, 2vw, 23px );
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

.page-article .single-header {
	padding-bottom: 42px;
}

.comments-area {
	margin-top: 80px;
	padding-top: 40px;
	border-top: 3px solid var( --ink );
}

.comments-area h2,
.comment-reply-title {
	font-size: 28px;
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list .comment {
	margin: 28px 0;
	padding-bottom: 28px;
	border-bottom: 1px solid var( --line );
}

.comment-list .children {
	list-style: none;
	margin-left: 28px;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
}

.comment-author .avatar {
	border-radius: 50%;
}

.comment-metadata,
.reply {
	font-size: 12px;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
}

.comment-form input:not( [type="submit"] ),
.comment-form textarea {
	width: 100%;
	padding: 13px;
	border: 1px solid var( --line );
	background: var( --white );
}

.comment-form .submit {
	padding: 12px 20px;
	border: 1px solid var( --ink );
	background: var( --ink );
	color: var( --white );
	cursor: pointer;
	font-family: var( --heading );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.search-modal {
	width: min( 640px, calc( 100% - 32px ) );
	padding: 0;
	border: 0;
	background: var( --paper );
	color: var( --ink-deep );
	box-shadow: 0 28px 80px rgba( 0, 20, 40, 0.28 );
}

.search-modal::backdrop {
	background: rgba( 0, 32, 55, 0.75 );
}

.search-modal-inner {
	position: relative;
	padding: clamp( 32px, 7vw, 62px );
}

.search-modal h2 {
	margin: 0;
	font-size: clamp( 34px, 6vw, 58px );
}

.search-modal p {
	margin: 14px 0 28px;
	color: var( --muted );
}

.search-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 38px;
	height: 38px;
	border: 1px solid var( --line );
	background: transparent;
	color: var( --ink );
	cursor: pointer;
	font-size: 25px;
	line-height: 1;
}

.search-form {
	display: grid;
	grid-template-columns: auto 1fr 48px;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding-left: 16px;
	border: 1px solid var( --ink );
	background: var( --white );
}

.search-field {
	min-width: 0;
	height: 52px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --ink );
	outline: 0;
}

.search-field::placeholder {
	color: #78909e;
}

.search-submit {
	align-self: stretch;
	border: 0;
	background: var( --ink );
	color: var( --white );
	cursor: pointer;
	font-size: 22px;
}

.search-submit:hover {
	background: var( --pink );
}

.search-results-header .search-form {
	max-width: 620px;
	margin-top: 30px;
}

.not-found-page,
.empty-state {
	min-height: 58vh;
	padding-top: clamp( 70px, 11vw, 150px );
	padding-bottom: clamp( 80px, 12vw, 160px );
}

.not-found-page {
	max-width: 850px;
}

.not-found-page p,
.empty-state p {
	max-width: 560px;
	margin: 18px 0 28px;
	color: var( --muted );
	font-size: 18px;
}

.not-found-page .search-form,
.empty-state .search-form {
	max-width: 620px;
	margin-bottom: 24px;
}

.error-number {
	display: block;
	margin-bottom: 14px;
	color: var( --pink );
	font-family: var( --heading );
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.site-footer {
	background:
		radial-gradient( ellipse at 12% 120%, var( --blush ) 0, transparent 50% ),
		radial-gradient( ellipse at 90% 10%, var( --aqua ) 0, transparent 60% ),
		#f3f3ed;
	border-top: 1px solid var( --line );
	color: var( --ink-deep );
}

.footer-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-top: 48px;
	padding-bottom: 48px;
}

.footer-logo .site-logo,
.footer-logo .custom-logo {
	width: 250px;
	max-height: 70px;
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
}

.footer-menu a {
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.footer-menu.footer-social {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var( --ink );
}

.footer-social a:hover {
	color: var( --pink );
}

.footer-social a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.footer-social svg {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-top: 1px solid #bfcfce;
	color: var( --muted );
	font-size: 12px;
	letter-spacing: 0.035em;
}

.footer-bottom a {
	text-decoration: none;
}

.legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.sticky,
.bypostauthor {
	display: block;
}

@media ( max-width: 980px ) {
	.primary-menu > li > a {
		padding-inline: 11px;
	}

	.lead-grid {
		grid-template-columns: minmax( 0, 1.55fr ) minmax( 260px, 0.85fr );
		gap: 38px;
	}

	.story-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 760px ) {
	:root {
		--gutter: 20px;
	}

	.masthead-inner {
		min-height: 150px;
	}

	.site-logo,
	.custom-logo {
		width: min( 330px, 66vw );
		max-height: 90px;
	}

	.navigation-inner {
		position: relative;
		align-items: center;
		min-height: 60px;
	}

	.menu-toggle {
		display: flex;
		gap: 9px;
	}

	.primary-menu-wrap {
		position: absolute;
		top: 100%;
		right: calc( var( --gutter ) * -1 );
		left: calc( var( --gutter ) * -1 );
		display: none;
		padding: 9px var( --gutter ) 18px;
		background: var( --paper );
		border-top: 1px solid var( --line );
		color: var( --ink-deep );
		box-shadow: 0 15px 25px rgba( 0, 20, 40, 0.18 );
	}

	.primary-menu-wrap.is-open {
		display: block;
	}

	.no-js .primary-menu-wrap {
		position: static;
		display: block;
	}

	.primary-menu,
	.primary-menu-wrap {
		align-items: stretch;
		flex-direction: column;
	}

	.primary-menu > li {
		display: block;
	}

	.primary-menu > li > a,
	.primary-menu > li:first-child > a {
		padding: 11px 0;
	}

	.primary-menu > .current-menu-item > a::after,
	.primary-menu > .current-menu-ancestor > a::after,
	.primary-menu > li > a:hover::after {
		display: none;
	}

	.primary-menu .sub-menu {
		position: static;
		visibility: visible;
		padding: 0 0 4px 15px;
		box-shadow: none;
		opacity: 1;
		transform: none;
	}

	.search-trigger {
		align-self: stretch;
	}

	.section-top {
		align-items: flex-start;
	}

	.lead-grid {
		grid-template-columns: 1fr;
	}

	.editor-picks {
		margin-top: 28px;
		padding: 25px 0 0;
		border-top: 1px solid var( --line );
		border-left: 0;
	}

	.story-grid {
		grid-template-columns: 1fr;
	}

	.latest-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.post-navigation {
		grid-template-columns: 1fr;
	}

	.post-navigation > div:last-child {
		align-items: flex-start;
		text-align: left;
	}

	.footer-main {
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.footer-bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}
}

@media ( max-width: 480px ) {
	.masthead-inner {
		min-height: 132px;
	}

	.site-logo,
	.custom-logo {
		width: min( 280px, 76vw );
	}

	.lead-bottom,
	.section-top {
		align-items: flex-start;
		flex-direction: column;
	}

	.lead-title,
	.single-header h1 {
		font-size: 36px;
	}

	.author-box {
		grid-template-columns: 1fr;
	}

	.footer-menu,
	.legal-links {
		flex-direction: column;
	}
}

.mobile-page-links {
	display: none;
}

@media ( max-width: 760px ) {
	/* Keep page links visible beside the menu toggle. */
	.main-navigation .navigation-inner {
		position: static;
		width: calc( 100% - 24px );
		justify-content: flex-start;
		gap: 8px;
		flex-wrap: nowrap;
	}

	.main-navigation .menu-toggle {
		flex-shrink: 0;
		gap: 3px;
		padding: 0;
		font-size: 14px;
		min-height: 44px;
	}

	.main-navigation .search-trigger {
		flex-shrink: 0;
		margin-left: auto;
		justify-content: center;
		width: 24px;
		min-height: 44px;
	}

	.search-trigger-label {
		display: none;
	}

	.main-navigation .primary-menu-wrap {
		right: 0;
		left: 0;
	}

	.primary-menu > .menu-item-info,
	.primary-menu > .menu-item-partnership {
		display: none;
	}

	.mobile-page-links {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		flex: 0 0 auto;
		min-width: 0;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mobile-page-links > li {
		flex: 0 0 auto;
	}

	.mobile-page-links::before {
		content: "";
		width: 1px;
		height: 18px;
		flex: 0 0 1px;
		background: var( --line );
	}

	.mobile-page-links a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		color: var( --ink );
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
	}

	.mobile-page-links a:hover,
	.mobile-page-links a[aria-current="page"] {
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.mobile-page-links .mobile-partnership {
		padding: 0 10px;
		border-radius: 4px;
		background: var( --pink );
		color: var( --white );
		font-weight: 800;
		font-size: 12px;
	}

	.mobile-page-links .mobile-partnership:hover {
		background: #bf1049;
	}

	.mobile-page-links a:focus-visible {
		outline: 2px solid var( --ink );
		outline-offset: 2px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}