/*
 * Final handoff integration layer, 2026-07-24.
 * Loaded after route styles so the approved design system wins predictably.
 */



/*
 * Outer canvas — single unified warm-neutral surface.
 *
 * The page used to be letterboxed: a 1520px `.page-frame` painted #F7F5F0 on
 * top of a distinctly cooler #E4E1D8 canvas, separated by a 1px rule down
 * each side. Above 1520px that produced two grey bars, a hard vertical seam
 * on both edges, and — because the footer is a full-bleed black band that
 * stopped at the frame — an obvious "floating page" look that read as a
 * different surface rather than part of the site.
 *
 * The frame is now full-bleed and carries the same warm-ivory token as the
 * masthead and nav (--color-ivory), so html / body / frame / header / nav are
 * one continuous surface at any width. Editorial width is unaffected: it has
 * always been set by the inner containers (.site-container / .site-main--*,
 * max-width --container = 1360px, centred), never by the frame. At 1920px
 * <main> still resolves to 1360px starting at x=280 — identical to the
 * framed layout — while header, nav, ticker, newsletter and footer become
 * full-width bands with their content constrained as before.
 */
html,
body {
	background: var(--color-ivory);
}

body {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-ui);
}

.page-frame {
	width: 100%;
	background: var(--color-ivory);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/*
 * Shared <main> sizing. Every route template emits a `.site-main--*` modifier
 * *without* the `.site-main` base class, so base.css's shared rule never
 * applies outside index.php — these modifiers are the real owners.
 *
 * `width: 100%` is load-bearing. Each <main> is a flex item of .page-frame and
 * carries `margin-inline: auto`; an auto cross-axis margin suppresses flex
 * stretching, so with no explicit width the used width becomes fit-content —
 * which grows to the *min-content* of the whole subtree. A single
 * `white-space: nowrap` headline deep inside (the breaking-news ticker) was
 * therefore enough to pin <main> to the full 1280px container at 320–1100px
 * and push the entire document into horizontal overflow. Stating width: 100%
 * makes the available width the ceiling; max-width still caps the editorial
 * measure and the auto margins still centre it.
 */
.site-main--home,
.site-main--archive,
.site-main--single,
.site-main--sastra,
.site-main--kirim-tulisan,
.site-main--404 {
	width: 100%;
}



a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-burgundy);
	outline-offset: 3px;
	box-shadow: var(--aa-shadow-focus);
}

.utility-bar {
	background: var(--color-paper);
	border-color: var(--color-border);
}

.utility-bar__actions,
.primary-menu,
.primary-nav__actions,
.post-card__category,
.post-card__time {
	font-family: var(--font-ui);
}



.site-branding__title {
	font-family: var(--font-masthead);
	font-size: clamp(2.75rem, 5vw, 4.9rem);
	font-weight: 700;
	letter-spacing: -.055em;
	line-height: .95;
}

.site-branding__tagline {
	margin-top: 12px;
	color: var(--color-warm-gray);
	font-family: var(--font-ui);
	font-size: .76rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.primary-nav {
	background: var(--color-paper);
	border-color: var(--color-border);
}



.site-branding {
	color: inherit;
	text-decoration: none;
}



.primary-menu > li > a {
	padding-inline: 8px;
	font-size: .78rem;
	letter-spacing: .045em;
	text-transform: uppercase;
	color: var(--color-warm-gray);
	font-weight: 600;
}

.primary-menu > .current-menu-item > a,
.primary-menu > .current-menu-ancestor > a,
.primary-menu > li > a:hover {
	color: var(--color-burgundy);
}

.primary-nav__kirim,
.utility-bar__subscribe {
	background: var(--color-burgundy);
	border-color: var(--color-burgundy);
	border-radius: var(--radius-sm);
	color: var(--color-paper);
}

.primary-nav__kirim:hover,
.utility-bar__subscribe:hover {
	background: var(--color-burgundy-dark);
	color: var(--color-paper);
}

/*
 * Transparent, not paper. The ticker's coloured band is painted by
 * .breaking-news__inner, which is a .site-container and therefore inset from
 * the viewport edge. A --color-paper background on this outer wrapper spilled
 * a near-white strip down both outer edges on the home route at every viewport
 * <=1024 — visible in edge-pixel sampling as rgb(255,253,250) against the
 * rgb(247,244,238) canvas.
 */
.breaking-news {
	background: transparent;
	border-color: var(--color-border);
}

.breaking-news__label {
	background: var(--color-burgundy);
	color: var(--color-paper);
}

.post-thumb {
	overflow: hidden;
	border-radius: var(--radius-md);
	background:
		linear-gradient(145deg, rgb(116 17 35 / 94%), rgb(159 23 48 / 72%)),
		var(--color-burgundy);
}

.post-thumb img {
	transition: transform .35s ease;
}

a:hover .post-thumb img {
	transform: scale(1.025);
}

.post-card__category {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--color-soft-burgundy);
	color: var(--color-burgundy);
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .065em;
	text-transform: uppercase;
	justify-self: start;
	text-decoration: none;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.post-card__category:hover,
.post-card__category:focus-visible {
	filter: brightness(0.95);
	opacity: 0.9;
}

.post-card__category.category-uncategorized,
.post-card__category.category-tak-berkategori {
	display: none !important;
}

.post-card__category.category-nasional, .search-overlay__post-category.category-nasional, .search-topic:nth-child(12n+1) { background: var(--cat-nasional-bg); color: var(--cat-nasional-fg); }
.post-card__category.category-lokal, .search-overlay__post-category.category-lokal, .search-topic:nth-child(12n+2) { background: var(--cat-lokal-bg); color: var(--cat-lokal-fg); }
.post-card__category.category-politik, .search-overlay__post-category.category-politik, .search-topic:nth-child(12n+3) { background: var(--cat-politik-bg); color: var(--cat-politik-fg); }
.post-card__category.category-ekonomi, .search-overlay__post-category.category-ekonomi, .search-topic:nth-child(12n+4) { background: var(--cat-ekonomi-bg); color: var(--cat-ekonomi-fg); }
.post-card__category.category-pendidikan, .search-overlay__post-category.category-pendidikan, .search-topic:nth-child(12n+5) { background: var(--cat-pendidikan-bg); color: var(--cat-pendidikan-fg); }
.post-card__category.category-teknologi, .search-overlay__post-category.category-teknologi, .search-topic:nth-child(12n+6) { background: var(--cat-teknologi-bg); color: var(--cat-teknologi-fg); }
.post-card__category.category-dunia, .search-overlay__post-category.category-dunia, .search-topic:nth-child(12n+7) { background: var(--cat-dunia-bg); color: var(--cat-dunia-fg); }
.post-card__category.category-olahraga, .search-overlay__post-category.category-olahraga, .search-topic:nth-child(12n+8) { background: var(--cat-olahraga-bg); color: var(--cat-olahraga-fg); }
.post-card__category.category-gaya-hidup, .search-overlay__post-category.category-gaya-hidup, .search-topic:nth-child(12n+9) { background: var(--cat-gaya-hidup-bg); color: var(--cat-gaya-hidup-fg); }
.post-card__category.category-sastra, .post-card__category.category-puisi, .post-card__category.category-cerpen, .post-card__category.category-esai, .search-overlay__post-category.category-sastra, .search-topic:nth-child(12n+10) { background: var(--cat-sastra-bg); color: var(--cat-sastra-fg); }
.post-card__category.category-opini, .search-overlay__post-category.category-opini, .search-topic:nth-child(12n+11) { background: var(--cat-opini-bg); color: var(--cat-opini-fg); }
.post-card__category.category-video, .post-card__category.category-foto, .search-overlay__post-category.category-video, .search-topic:nth-child(12n+12) { background: var(--cat-video-bg); color: var(--cat-video-fg); }

.home-section {
	padding-block: 56px;
}

.home-section + .home-section {
	border-top: 1px solid var(--color-border);
}

.home-section__header {
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color-ink);
}

.home-section__header h2 {
	font-family: var(--font-masthead);
	font-size: clamp(1.6rem, 2.5vw, 2.15rem);
}

.home-section__more {
	color: var(--color-burgundy);
	font-family: var(--font-ui);
	font-weight: 700;
}

/* Final homepage lead. */
.headline-grid {
	padding-top: 40px;
}

.headline-grid__inner {
	display: block;
}

.sastra-featured {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--color-border) !important;
}

/* No !important: the max-width:767px override further down this file
   must be able to collapse this back to a single column on mobile. */
.sastra-featured__card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 44px;
	align-items: center;
	text-decoration: none;
}

.headline-grid__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.42fr) minmax(340px, .9fr);
	align-items: center;
	gap: 48px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--color-border);
}

.headline-hero__media {
	display: block;
}

.headline-grid__hero .post-thumb--hero {
	aspect-ratio: 16 / 9;
}

.headline-hero__body {
	padding-right: 24px;
}

.headline-hero__title {
	margin: 14px 0 16px;
	font-family: var(--font-masthead);
	font-size: clamp(1.8rem, 2.8vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -.025em;
}

.headline-hero__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color-warm-gray);
	font-size: 1.08rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.headline-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
	color: var(--color-warm-gray);
	font-family: var(--font-ui);
	font-size: .76rem;
}

.headline-grid__supporting {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	padding-top: 28px;
}

.supporting-card {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	column-gap: 16px;
	align-content: start;
}

.supporting-card > a:first-child {
	grid-row: 1 / 4;
}

.supporting-card .post-thumb {
	aspect-ratio: 1 / 1;
}

.supporting-card__title {
	margin: 8px 0;
	font-family: var(--font-masthead);
	font-size: 1.15rem;
	line-height: 1.3;
}

/* Homepage latest + editorial rail. */
.home-news-desk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 56px;
	align-items: start;
}

.latest-news-item {
	display: grid;
	grid-template-columns: 238px minmax(0, 1fr);
	gap: 24px;
	padding-block: 20px;
	border-bottom: 1px solid var(--color-border);
}

.latest-news-item:first-child {
	padding-top: 0;
}

.latest-news-item .post-thumb {
	aspect-ratio: 4 / 3;
}

.latest-news-item__title {
	margin: 8px 0;
	font-family: var(--font-masthead);
	font-size: 1.35rem;
	line-height: 1.3;
}

.latest-news-item__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color-warm-gray);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.home-news-desk__sidebar,
.archive-sidebar,
.article-sidebar {
	position: sticky;
	top: 86px;
	display: grid;
	gap: 32px;
}

.home-news-desk__sidebar h2,
.archive-sidebar > h2,
.article-sidebar h2 {
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--color-ink);
	font-family: var(--font-masthead);
	font-size: 1.5rem;
}

.editor-sidebar article {
	padding-block: 14px;
	border-bottom: 1px solid var(--color-border);
}

.editor-sidebar h3 {
	margin: 8px 0;
	font-family: var(--font-masthead);
	font-size: 1.08rem;
	line-height: 1.25;
}

.popular-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.popular-list__item {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 12px;
	padding-block: 13px;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-masthead);
	font-size: 1rem;
	line-height: 1.25;
}

.popular-list__number {
	color: var(--color-burgundy);
	font-family: var(--font-masthead);
	font-size: 1.5rem;
	font-weight: 700;
}

/* Final editorial sections. */
.literature-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(280px, .65fr);
	gap: 48px;
}

.home-section:has(.literature-feature) {
	background: var(--color-ink);
	color: var(--color-paper);
}

.home-section:has(.literature-feature) .home-section__header {
	border-color: var(--color-paper);
}

.literature-feature__lead {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(280px, 1.15fr);
	gap: 32px;
	align-items: center;
}

.literature-feature__lead .post-thumb {
	aspect-ratio: 4 / 3;
}

.literature-feature__title {
	margin: 16px 0;
	font-family: var(--font-masthead);
	font-size: clamp(2rem, 3.5vw, 3.8rem);
	line-height: 1.06;
}

.literature-feature__title a {
	color: var(--color-paper);
}

.literature-feature__list {
	border-left: 1px solid rgb(255 255 255 / 18%);
}

.literature-card {
	padding: 24px 0 24px 32px;
	border-bottom: 1px solid rgb(255 255 255 / 18%);
	background: var(--color-ink);
}

.literature-card__label a,
.literature-card__author {
	color: #e6a8b4;
	font-family: var(--font-ui);
}

.literature-card__title {
	margin: 18px 0 10px;
	font-family: var(--font-masthead);
	font-size: clamp(1.4rem, 2vw, 2rem);
}

.literature-card__title a {
	color: var(--color-paper);
}

.news-channels-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 48px;
}

.channel-card {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 14px 20px;
	padding-top: 14px;
	border-top: 3px solid var(--color-burgundy);
}

.channel-card__header {
	grid-column: 1 / -1;
}

.channel-card .post-thumb {
	grid-row: 2 / 4;
	aspect-ratio: 4 / 3;
}

.channel-card__title {
	margin: 0;
	font-family: var(--font-masthead);
	font-size: 1.35rem;
	line-height: 1.3;
}

.channel-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.channel-card__list li {
	padding-block: 9px;
	border-top: 1px solid var(--color-border);
	font-family: var(--font-masthead);
}

.home-section--dark:has(.opinions-grid) {
	background: var(--color-section-warm);
	color: var(--color-ink);
}

.home-section--dark:has(.opinions-grid) .home-section__header {
	border-color: var(--color-ink);
}

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

.opinion-card {
	padding: 28px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-paper);
}

.opinion-card__title {
	font-family: var(--font-masthead);
	font-size: 1.45rem;
}

.opinion-card__title a {
	color: var(--color-ink);
}

.media-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr);
	gap: 24px;
}

.media-card--large {
	grid-row: span 2;
}

.media-card--large .post-thumb {
	aspect-ratio: 16 / 9;
}

.media-card--small {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
}

.media-card__title {
	font-family: var(--font-masthead);
	line-height: 1.2;
}

.media-card--large .media-card__title {
	font-size: 1.7rem;
}

.newsletter__inner {
	max-width: 100%;
	padding: 56px 48px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-paper);
	text-align: center;
}

.newsletter__title {
	font-family: var(--font-masthead);
	font-size: clamp(1.8rem, 2.5vw, 2.2rem);
	margin-top: 12px;
}

.newsletter__form-wrap {
	max-width: 580px;
	margin: 32px auto 0;
}

.newsletter-form {
	display: flex;
	gap: 0;
	justify-content: center;
}

.newsletter-form__input {
	flex: 1;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	border: 1px solid var(--color-border);
	border-right: none;
	padding: 12px 16px;
}

.newsletter-form__submit {
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--color-burgundy);
	color: var(--color-paper);
	border: 1px solid var(--color-burgundy);
	padding: 12px 24px;
	font-weight: 700;
}

/* Archive, search, author and 404. */
.site-main--archive {
	padding-block: 48px 72px;
}

.archive-header {
	max-width: 100%;
	margin-bottom: 36px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--color-border);
}

.archive-header__title {
	max-width: 950px;
	font-family: var(--font-masthead);
	font-size: clamp(2.3rem, 5vw, 4.5rem);
	letter-spacing: -.035em;
}

.archive-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.8fr) minmax(340px, 1fr);
	gap: 64px;
	align-items: start;
}

.archive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.archive-card {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 32px;
	padding-block: 24px;
	border-bottom: 1px solid var(--color-border);
}

.archive-card:first-child {
	padding-top: 0;
}

.archive-card__thumb-link .post-thumb {
	aspect-ratio: 4 / 3;
}

.archive-card__title {
	margin: 8px 0;
	font-family: var(--font-masthead);
	font-size: 1.35rem;
	line-height: 1.3;
}

.archive-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color-warm-gray);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.archive-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	color: var(--color-warm-gray);
	font-family: var(--font-ui);
	font-size: .75rem;
}

.archive-sidebar {
	padding-left: 24px;
	border-left: 1px solid var(--color-border);
}

.archive-sidebar__cta,
.article-sidebar__newsletter {
	display: grid;
	gap: 12px;
	padding: 28px;
	border-radius: var(--radius-md);
	background: var(--color-burgundy);
	color: var(--color-paper);
	font-family: var(--font-ui);
}

.archive-sidebar__cta:hover,
.archive-sidebar__cta strong {
	color: var(--color-paper);
}

.search-form {
	max-width: none;
}

.search-form input[type="search"] {
	min-height: 58px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-paper);
}

.search-result-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.search-result-filters a {
	padding: 8px 13px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-paper);
	font-family: var(--font-ui);
	font-size: .78rem;
}

.search-result-filters a.is-active {
	border-color: var(--color-burgundy);
	background: var(--color-burgundy);
	color: var(--color-paper);
}


.search-chip,
.search-topic {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	color: var(--color-ink);
	border-radius: 999px;
}

/*
 * Same split as in search-overlay.css — this file duplicated the merged
 * hover/selected block and loads later, so leaving it alone would have undone
 * the fix. Hover is border-only emphasis; only `.is-active` fills. `.search-topic`
 * has no selected state, so it keeps the filled hover.
 */
.search-chip:hover {
	border-color: var(--color-burgundy);
}

.search-topic:hover {
	border-color: var(--color-burgundy);
	background: var(--color-soft-burgundy);
	color: var(--color-burgundy);
}

/*
 * Unified selected treatment — every filter chip, "Semua" and every taxonomy
 * category alike: dark fill, white label, white check. Restated here (this
 * file loads last) with a `button.` type qualifier so its (0,2,1) specificity
 * beats the per-category taxonomy tint further down this same file
 * (`.search-chip.category-nasional { background: cat-bg }`, (0,2,0)) instead
 * of losing a same-specificity tie to whichever rule happens to sit later in
 * the cascade — which is what let a selected "Nasional" chip keep showing its
 * pale unselected tint instead of the selected fill.
 */
button.search-chip.is-active,
button.search-chip.is-active:hover,
button.search-chip.is-active:focus,
button.search-chip.is-active:focus-visible,
button.search-chip.is-active:active {
	border-color: var(--color-ink);
	background: var(--color-ink);
	color: var(--color-paper);
}

.search-chip--all:not(.is-active),
.search-chip--all:not(.is-active):hover,
.search-chip--all:not(.is-active):active {
	background: var(--color-paper);
	color: var(--color-ink);
}

.search-chip--all:not(.is-active) {
	border-color: var(--color-border);
}

.search-chip--all:not(.is-active):hover {
	border-color: var(--color-ink);
}

/* Single article. */
.site-main--single {
	padding-block: 96px 0;
}

.single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
	gap: 64px;
	align-items: start;
}

.single-article {
	width: auto;
	max-width: none;
	margin: 0;
}

.article-header {
	max-width: none;
	/* was `0 0 48px` — that 48px stacked on top of the byline row's own 26px
	   margin and the header padding, producing a ~98px dead band between the
	   byline and the featured image. The byline row owns that gap now. */
	margin: 0;
	text-align: left;
}

.article-header__title {
	font-family: var(--font-masthead);
	font-size: clamp(2rem, 3.5vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -.03em;
}

.article-header__meta {
	justify-content: flex-start;
}

.share-buttons {
	justify-content: flex-start;
	max-width: none;
	margin-inline: 0;
}

.single-article__featured {
	max-width: none;
	margin-inline: 0;
}

.single-article__content,
.article-tags,
.author-box {
	width: min(100%, var(--reading-width));
	margin-right: auto;
	margin-left: 0;
}

.single-article__content {
	font-size: 1.16rem;
	line-height: 1.85;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.article-sidebar {
	padding-left: 24px;
	border-left: 1px solid var(--color-border);
}

.article-sidebar__newsletter p {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.article-sidebar__newsletter h2 {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--color-paper);
}

.article-sidebar__newsletter a {
	color: var(--color-paper);
	font-weight: 700;
}

/* Sastra. */
.sastra-hero {
	padding: 32px 0 0;
	background: transparent;
	color: inherit;
}

.sastra-hero__inner {
	padding: 32px 48px;
	border-radius: var(--radius-md);
	background: var(--color-ink);
	color: var(--color-paper);
	text-align: center;
}

.sastra-hero__inner .breadcrumbs {
	justify-content: center;
	color: #d6d1c9;
	margin-bottom: 8px;
}

.sastra-hero__title {
	font-family: var(--font-masthead);
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1.1;
	margin: 8px 0;
}

.sastra-hero {
	margin-bottom: 32px;
}

.sastra-tabs {
	margin-block: 0 48px;
	border-color: var(--color-border);
}

@media (min-width: 768px) {
	.sastra-featured {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

.sastra-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.sastra-card {
	border-radius: var(--radius-md);
}

.sastra-authors {
	margin-block: 56px;
	padding-block: 40px;
	border-block: 1px solid var(--color-border);
}

.sastra-authors__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.sastra-author {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-ui);
}

.sastra-author__avatar {
	display: grid;
	width: 58px;
	height: 58px;
	flex: 0 0 58px;
	place-items: center;
	border-radius: 50%;
	background: var(--color-soft-burgundy);
	color: var(--color-burgundy);
	font-family: var(--font-masthead);
	font-size: 1.5rem;
	font-weight: 700;
}

.sastra-author small {
	display: block;
	margin-top: 3px;
	color: var(--color-warm-gray);
}

.sastra-cta {
	border-radius: var(--radius-md);
	background: var(--color-burgundy);
}

/* Submission page and form. */
.submission-page {
	width: 100%;
}

.submission-hero__inner,
.submission-section,
.submission-form-section,
.submission-faq,
.submission-contact {
	width: min(calc(100% - 64px), var(--container));
	margin-inline: auto;
}

.submission-guidance {
	grid-template-columns: 1fr;
}

.submission-form-card {
	width: min(100%, 980px);
	margin: 32px auto 0;
	padding: 40px;
	border-color: var(--color-border);
	border-radius: var(--radius-md);
}

.aa-kirim-form {
	padding: 40px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-paper);
}

.submission-form-card .aa-kirim-form {
	padding: 32px 0 0;
	border-width: 1px 0 0;
	border-radius: 0;
}

.aa-kirim-form input,
.aa-kirim-form select,
.aa-kirim-form textarea {
	border-color: var(--color-border);
	border-radius: var(--radius-sm);
	background: #fff;
}

.aa-kirim-form [aria-invalid="true"] {
	border-color: var(--color-burgundy);
}

.aa-form-error {
	margin: 6px 0 0;
	color: var(--color-burgundy);
	font-family: var(--font-ui);
	font-size: .78rem;
}

.aa-form-alert {
	border-radius: var(--radius-sm);
}

/* Footer. */
.site-footer {
	background: var(--color-ink);
	color: var(--color-paper);
}

.site-footer__columns {
	grid-template-columns: 1.6fr repeat(3, minmax(140px, 1fr));
	gap: 48px;
	padding-block: 56px;
}

.footer-brand__name {
	font-family: var(--font-masthead);
	font-size: 2.1rem;
	letter-spacing: -.035em;
}

.footer-col__title {
	color: #e6a8b4;
	font-family: var(--font-ui);
	font-size: .75rem;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.site-footer a {
	color: var(--color-paper);
}

@media (max-width: 1100px) {
	.site-container,
	.submission-hero__inner,
	.submission-section,
	.submission-form-section,
	.submission-faq,
	.submission-contact {
		width: min(calc(100% - 48px), var(--container));
	}

	.headline-grid__hero {
		grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
		gap: 32px;
	}

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

	.home-news-desk,
	.archive-layout,
	.single-layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 32px;
	}

	.latest-news-item,
	.archive-card {
		grid-template-columns: 190px minmax(0, 1fr);
	}

	.site-footer__columns {
		grid-template-columns: 1.4fr repeat(3, 1fr);
		gap: 28px;
	}

	.primary-nav__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
	}

	.mobile-menu-toggle {
		grid-row: 1;
		grid-column: 1;
		justify-self: start;
	}

	.primary-nav__actions {
		grid-row: 1;
		grid-column: 2;
		margin-left: 0;
	}

	.primary-menu {
		grid-column: 1 / -1;
		width: 100%;
	}

	.primary-nav.is-stuck .primary-nav__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.primary-nav.is-stuck .mobile-menu-toggle {
		grid-column: 1;
	}

	.primary-nav.is-stuck .primary-nav__brand {
		grid-row: 1;
		grid-column: 2;
	}

	.primary-nav.is-stuck .primary-nav__actions {
		grid-column: 3;
	}
}

@media (max-width: 820px) {
	.site-container,
	.submission-hero__inner,
	.submission-section,
	.submission-form-section,
	.submission-faq,
	.submission-contact {
		width: min(calc(100% - 32px), var(--container));
	}

	.home-section {
		padding-block: 40px;
	}

	.headline-grid__hero {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.headline-hero__body {
		padding-right: 0;
	}

	.headline-grid__supporting,
	.news-channels-grid,
	.opinions-grid {
		grid-template-columns: 1fr 1fr;
	}

	.home-news-desk,
	.archive-layout,
	.single-layout {
		grid-template-columns: 1fr;
	}

	.home-news-desk__sidebar,
	.archive-sidebar,
	.article-sidebar {
		position: static;
		padding: 32px 0 0;
		border-top: 1px solid var(--color-border);
		border-left: 0;
	}

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

	.sastra-authors__grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__columns {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 540px) {
	.site-branding__title {
		font-size: 2.55rem;
	}

	.home-section {
		padding-block: 32px;
	}

	.headline-grid {
		padding-top: 24px;
	}

	.headline-hero__title {
		font-size: 2.1rem;
	}

	.headline-grid__supporting,
	.news-channels-grid,
	.opinions-grid,
	.sastra-grid,
	.media-grid {
		grid-template-columns: 1fr;
	}

	.literature-feature,
	.literature-feature__lead {
		grid-template-columns: 1fr;
	}

	.literature-feature__list {
		border-top: 1px solid rgb(255 255 255 / 18%);
		border-left: 0;
	}

	.literature-card {
		padding-inline: 0;
	}

	.supporting-card {
		grid-template-columns: 104px minmax(0, 1fr);
	}

	.latest-news-item,
	.archive-card {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 14px;
	}

	.latest-news-item__excerpt,
	.archive-card__excerpt,
	.archive-card__reading-time {
		display: none;
	}

	.latest-news-item__title,
	.archive-card__title {
		font-size: 1.08rem;
	}

	.channel-card {
		grid-template-columns: 112px minmax(0, 1fr);
	}

	.media-card--small {
		grid-template-columns: 112px minmax(0, 1fr);
	}

	.newsletter__inner,
	.aa-kirim-form,
	.sastra-hero__inner {
		padding: 28px 20px;
	}

	.article-header__title,
	.archive-header__title {
		font-size: 2.35rem;
	}

	.single-article__content {
		font-size: 1.06rem;
	}

	.site-footer__columns {
		grid-template-columns: 1fr;
		padding-block: 40px;
	}

	.sastra-authors__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}


.header-actions__kirim {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--color-burgundy);
    color: var(--color-paper);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.header-actions__search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
}

.site-branding {
	padding-block: 16px;
}

.site-branding__title {
    margin: 0;
    font-family: var(--font-masthead);
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.site-branding__title a {
    color: inherit;
    text-decoration: none;
}

/* Hide header actions on mobile so they don't break layout if space is small */
@media (max-width: 768px) {
    .header-actions {
        display: none;
    }
}

/* Primary Nav */
.primary-nav__inner {
    display: flex;
    align-items: center;
    justify-content: center; /* centered menu */
    gap: 16px;
    padding-block: 12px;
}

.primary-menu {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Sticky state logic */
.primary-nav__brand,
.primary-nav__actions {
    display: none;
}

.primary-nav.is-stuck .primary-nav__inner {
    justify-content: space-between;
}

.primary-nav.is-stuck .primary-nav__brand,
.primary-nav.is-stuck .primary-nav__actions {
    display: flex;
    align-items: center;
}

.primary-nav__actions {
    gap: 12px;
}
.primary-nav__brand a {
    font-family: var(--font-masthead);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-ink);
}

.primary-nav__actions .primary-nav__kirim,
.primary-nav__actions .primary-nav__search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
    text-decoration: none;
}

.primary-nav__actions .primary-nav__kirim {
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}
/* Search Page Form (mirrors overlay styles) */
.search-page-form__inner {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-paper);
	overflow: hidden;
}

.search-page-form__inner:focus-within {
	border-color: var(--color-burgundy);
}

.search-page-form__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 100%;
	color: var(--color-warm-gray);
}

.search-page-form__input {
	flex: 1;
	min-height: 56px;
	padding: 0 16px 0 0;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--font-ui);
	font-size: 1.1rem;
	color: var(--color-ink);
	outline: none;
}

.search-page-form__clear,
.search-page-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--color-warm-gray);
	cursor: pointer;
}

.search-page-form__clear:hover {
	color: var(--color-burgundy);
}

.search-page-form__submit {
	background: var(--color-burgundy);
	color: var(--color-paper);
}

.search-page-form__submit:hover {
	background: var(--color-burgundy-dark);
}

/* Category Filter Overrides */
.search-result-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}
.search-result-filters .search-chip {
    text-decoration: none;
}

/* STAGE B: GLOBAL SHELL OVERRIDES */
/* Utility Bar */
/*
 * The utility bar was the last surface still painted --color-canvas-edge
 * (#E4E1D8). Once the page frame went full-bleed on --color-ivory, that left
 * a single cooler grey band running the full width of the viewport across the
 * top — the "disconnected strip" that survived the first canvas fix. It now
 * shares the one canvas token; the hairline below it is the only separation,
 * and it uses the same border token as the nav so the two rules read as one
 * system rather than two different edges.
 */
.site-utility-bar {
	/* No bottom hairline. Once the bar shares the masthead's canvas tone, that
	   rule was the only thing left dividing them and it ran edge to edge —
	   pixel sampling at the outer columns picked it up as a full-width
	   horizontal seam at every viewport <=1024. The nav's own top/bottom rules
	   still carry the shell's editorial structure. */
	border-bottom: 0;
	background: var(--color-ivory);
}
.site-utility-bar__inner {
	display: flex;
	justify-content: flex-end;
	padding: 6px 0;
}
.site-utility-bar__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.site-utility-bar__actions a {
	font-size: 12px;
	font-weight: 500;
	color: var(--color-ink);
}
/*
 * Real <button>, so it inherits base.css's generic control skin —
 * `button:hover { background-color: accent-dark }` at (0,1,1) outranks the
 * bare `.site-utility-bar__subscribe` (0,1,0), so hovering or pressing it
 * painted a solid burgundy rectangle over the outlined pill (same cascade
 * trap as `.search-overlay__backdrop`, `.mobile-menu-toggle`, `.primary-menu
 * .submenu-toggle` elsewhere in this shell — this is the one control that
 * had never been given the fix). Stating every interactive state on the
 * class raises specificity to (0,2,0), which wins without `!important`; the
 * button never gains a fill in any state, only the border/text colour may
 * shift, and geometry (padding, border-width) is unchanged in every one.
 */
.site-utility-bar__subscribe,
.site-utility-bar__subscribe:hover,
.site-utility-bar__subscribe:focus,
.site-utility-bar__subscribe:focus-visible,
.site-utility-bar__subscribe:active {
	background: none;
	color: var(--color-ink);
	border: 1px solid #c9c5bb;
	padding: 6px 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.site-utility-bar__subscribe:hover,
.site-utility-bar__subscribe:active {
	border-color: var(--color-burgundy);
	color: var(--color-burgundy);
}

/* Masthead */
.site-header {
	background: var(--color-ivory);
}

.site-branding__title {
	font-family: var(--font-masthead);
	font-size: 56px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-ink);
	line-height: 1;
	margin: 0;
}
.site-branding {
	display: inline-block;
}
.site-branding:hover {
	color: var(--color-ink);
}
.site-branding__tagline {
	margin-top: 11px;
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-warm-gray);
}

/* Primary Navigation */
.primary-nav {
	position: sticky;
	top: 0;
	z-index: 120;
	background: var(--color-ivory);
	border-top: 1px solid var(--color-ink);
	border-bottom: 1px solid var(--color-border);
}
.primary-nav__inner {
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.primary-nav__menu-wrapper {
	display: flex;
}
.primary-menu {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-menu .menu-item > a {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 13px 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--color-ink);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
.primary-menu .current-menu-item > a {
	color: var(--color-burgundy);
	border-bottom-color: var(--color-burgundy);
}
.primary-menu .menu-item:hover > a {
	color: var(--color-burgundy);
}
.primary-menu .menu-item-has-children {
	position: relative;
}
.primary-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--color-ivory);
	border: 1px solid var(--color-border);
	box-shadow: 0 8px 24px rgba(23,23,23,0.08);
	padding: 8px 0;
	list-style: none;
	margin: 0;
	min-width: 180px;
	border-radius: var(--radius-sm);
}
/*
 * BUG-21 — dropdown hover HANYA untuk penunjuk yang benar-benar bisa hover.
 *
 * Aturan ini sebelumnya berlaku di SEMUA lebar dan semua jenis input. Pada
 * layar sentuh, Chrome/Safari menerapkan status :hover ke elemen yang disentuh
 * SETELAH `touchend` tetapi SEBELUM `click`. Akibatnya, satu ketukan pada induk
 * "Ekonomi"/"Lainnya" membuat .sub-menu berubah menjadi display:block di sela
 * kedua event itu, anak pertama ("Semua Ekonomi"/"Dunia") langsung menempati
 * titik yang sedang disentuh, dan browser mengirim click ke ANAK tersebut —
 * bukan ke induknya. Pengguna berpindah halaman hanya dengan sekali sentuh,
 * dan handler preventDefault() di navigation.js tidak pernah terpanggil karena
 * <a> induk memang tidak pernah menerima click.
 *
 * Terbukti lewat trace event: pada `touchstart`/`touchend` target masih
 * "A|Ekonomi" dengan submenu display:none, lalu pada `click` target sudah
 * "A|Semua Ekonomi" dengan submenu display:block — sementara aria-expanded
 * tetap "false", membuktikan pembukaan itu datang dari CSS, bukan dari
 * setSubmenuExpanded() di JavaScript.
 *
 * Membungkusnya dengan (hover: hover) and (pointer: fine) mempertahankan
 * dropdown hover di desktop bermouse persis seperti sebelumnya, sekaligus
 * menonaktifkannya di perangkat sentuh — di sana aksordion sudah sepenuhnya
 * dikendalikan .is-open dari navigation.js. Ini bukan penundaan buatan,
 * penekanan click global, touch-action: none, atau melumpuhkan tautan anak.
 *
 * `min-width: 1101px` disamakan dengan DESKTOP_QUERY di navigation.js. Tanpa
 * itu, jendela desktop bermouse selebar 1024px — yang secara tata letak sudah
 * memakai drawer hamburger — tetap membuka submenu lewat hover dan mengalami
 * pembajakan klik yang sama (terverifikasi gagal di viewport 1024x768).
 * Di bawah breakpoint ini, satu-satunya yang boleh membuka submenu adalah
 * .is-open dari JavaScript, apa pun jenis penunjuknya.
 */
@media (hover: hover) and (pointer: fine) and (min-width: 1101px) {
	.primary-menu .menu-item-has-children:hover .sub-menu {
		display: block;
	}
}
.primary-menu .sub-menu a {
	display: block;
	padding: 8px 16px;
	font-size: 13px;
	color: var(--color-ink);
}
.primary-menu .sub-menu a:hover {
	background: var(--color-section-warm);
}

.primary-nav__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}
.primary-nav__kirim {
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--color-burgundy);
	color: var(--color-paper);
	padding: 7px 15px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	border-radius: 7px;
}
.primary-nav__kirim:hover {
	color: var(--color-paper);
	background: var(--color-burgundy-dark);
}
.primary-nav__search-toggle {
	background: none;
	border: 1px solid var(--color-border);
	border-radius: 7px;
	cursor: pointer;
	width: 36px;
	height: 34px;
	color: var(--color-ink);
	display: flex;
	align-items: center;
	justify-content: center;
}


/* STAGE C: HOME HERO */
.site-main--home {
	max-width: 1360px;
	margin: 0 auto;
}
.headline-grid {
	padding: 30px 40px 0;
	background: transparent;
}
.headline-grid__inner {
	max-width: 100%;
	padding: 0;
}
.headline-grid__hero {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 44px;
	align-items: center;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--color-border);
}
.headline-hero__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}
.headline-hero__media img,
.headline-hero__media .fallback-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.headline-hero__body {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.headline-hero__title {
	font-family: var(--font-serif);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.01em;
	margin: 0;
}
.headline-hero__title a {
	color: var(--color-ink);
}
.headline-hero__excerpt {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-warm-gray);
}
.headline-hero__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--color-warm-gray);
}
.headline-hero__meta span:first-child {
	font-weight: 600;
	color: var(--color-ink);
}
.headline-hero__meta time {
	position: relative;
}
.headline-hero__meta time::before {
	content: "|";
	color: var(--color-border);
	margin-right: 10px;
}
/* Supporting grid */
.headline-grid__supporting {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	padding: 28px 0 8px;
}
.supporting-card {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding-right: 32px;
	border-right: 1px solid var(--color-border);
}
.supporting-card:last-child {
	border-right-color: transparent;
	padding-right: 0;
}
/*
 * `:first-child` is required, not cosmetic. The thumbnail link is the first
 * <a> in .supporting-card (see template-parts/home/headline-grid.php), but the
 * category badge rendered right after it is *also* a direct <a> child. The
 * unscoped `.supporting-card > a` therefore gave the badge `display: block` +
 * `aspect-ratio: 3 / 2`, which inflated its coloured pill to width÷1.5 — 73×48,
 * 90×60, 83×55 instead of a flat 24px chip. Same anchor the grid-row rule
 * above already scopes this way.
 */
.supporting-card > a:first-child {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.supporting-card > a:first-child img,
.supporting-card > a:first-child .fallback-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.supporting-card__title {
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.supporting-card__title a {
	color: var(--color-ink);
}
.supporting-card time {
	font-size: 11px;
	color: var(--color-warm-gray);
}


/* STAGE C: CATEGORY BADGE */
.post-card__category {
	display: inline-flex;
	align-self: flex-start;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 6px;
	text-decoration: none;
}
.headline-hero__body .post-card__category {
	font-size: 11px;
	padding: 3px 10px;
}
/*
 * Category Specific Colors — these must stay scoped to `.post-card__category`.
 * WordPress's body_class() also emits a bare `category-{slug}` class on
 * category archive `<body>` tags, so an unscoped `.category-X { background }`
 * rule here would repaint the whole page background on every archive page.
 * The base badge palette for nasional/lokal/politik/ekonomi/pendidikan/
 * teknologi/olahraga/dunia/gaya-hidup/sastra/puisi/cerpen/esai/opini/video
 * already lives above (scoped `.post-card__category.category-X` rules).
 */
.post-card__category.category-liputan-khusus { background: var(--color-burgundy); color: var(--color-paper); }


/* STAGE B: TICKER */
.breaking-news {
	padding: 0 !important;
	margin: 0 auto;
}
.breaking-news__inner.site-container {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #f8e7ea;
	border-top: 1px solid #e7c9ce;
	border-bottom: 1px solid #e7c9ce;
	padding: 0 16px;
	height: 58px;
}

/*
 * Each ticker item is display:contents so the category badge, headline, time
 * and forward button stay direct participants of the single flex row — the
 * wrapper exists only so the pager can show/hide one item at a time.
 */
.breaking-news__item {
	display: contents;
}
.breaking-news__item[hidden] {
	display: none;
}

/* The shared badge carries `align-self: flex-start`, which is correct in a
   card's column stack but pins it to the top of the ticker's 58px row. */
.breaking-news .post-card__category {
	align-self: center;
}

/*
 * The brand block used to be one full-height burgundy bar bleeding to the left
 * edge, with the lightning and the TERKINI text baked into it. The reference
 * composition is two separate compact controls: a 34px rounded lightning tile
 * and a small TERKINI pill. The wrapper is now just a gap.
 */
.breaking-news__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	background: transparent;
	color: inherit;
	height: auto;
	padding: 0;
	flex-shrink: 0;
}
.breaking-news__icon {
	width: 34px;
	height: 34px;
	border-radius: 7px;
	background: var(--color-burgundy);
	color: var(--color-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.breaking-news__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--color-burgundy);
	color: var(--color-paper);
	padding: 5px 10px;
	border-radius: 5px;
	flex-shrink: 0;
}
.breaking-news__pulse {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-paper);
	animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
	0% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(1.1); }
	100% { opacity: 1; transform: scale(1); }
}
.breaking-news__link {
	display: flex;
	align-items: center;
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}
.breaking-news__link > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.breaking-news__time {
	font-size: 12px;
	color: #8a4a56;
	white-space: nowrap;
	flex-shrink: 0;
}
.breaking-news__pagination {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	padding-left: 4px;
	border-left: 1px solid #e7c9ce;
}
.breaking-news__prev,
.breaking-news__next {
	width: 28px;
	height: 28px;
	border: 1px solid #e2c4ca;
	background: var(--color-paper);
	border-radius: 6px;
	cursor: pointer;
	color: var(--color-burgundy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.breaking-news__prev svg,
.breaking-news__next svg {
	min-width: 14px;
	min-height: 14px;
	flex-shrink: 0;
}
.breaking-news__count {
	font-size: 11px;
	color: #8a4a56;
	min-width: 26px;
	text-align: center;
}
/*
 * The forward button is markup-nested inside .breaking-news__item (so the
 * pager swaps its href along with the headline), which places it before the
 * pagination group in DOM order. `order` restores the reference's visual
 * sequence: … headline · time · pager · forward. The <=1100px layer hides both
 * and gives the headline/time their own order values, so these never collide.
 */
.breaking-news__pagination {
	order: 1;
}
.breaking-news__open {
	order: 2;
	width: 34px;
	height: 34px;
	border: none;
	background: var(--color-burgundy);
	color: var(--color-paper);
	border-radius: 7px;
	cursor: pointer;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/* STAGE D: LATEST NEWS SECTION */
.home-section--latest {
	padding: 18px 40px 46px;
	margin-top: 20px;
	border-top: 1px solid var(--color-ink);
	background: transparent;
}
.home-news-desk {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 52px;
	max-width: 100%;
	padding: 0;
}
.section-title {
	margin: 0 0 4px;
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 700;
	padding: 16px 0 12px;
}
.section-title--dark {
	border-bottom: 2px solid var(--color-ink);
}
.section-title--burgundy {
	font-size: 22px;
	border-bottom: 2px solid var(--color-burgundy);
	margin-bottom: 20px;
}
.latest-news-item {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--color-border);
}
.latest-news-item__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}
.latest-news-item__media img,
.latest-news-item__media .fallback-thumbnail,
.latest-news-item__media .post-thumb,
.latest-news-item__media .post-thumb__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.latest-news-item__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.latest-news-item__title {
	font-family: var(--font-serif);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.latest-news-item__title a {
	color: var(--color-ink);
}
.latest-news-item__excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-warm-gray);
}
.latest-news-item__meta {
	display: flex;
	gap: 10px;
	font-size: 12px;
	color: var(--color-warm-gray);
	margin-top: 2px;
}
.latest-news-item__meta span:first-child {
	font-weight: 600;
	color: var(--color-ink);
}
.latest-news-item__meta time {
	position: relative;
}
.latest-news-item__meta time::before {
	content: "|";
	color: var(--color-border);
	margin-right: 10px;
}
.latest-news-load-more {
	display: flex;
	justify-content: center;
	padding-top: 28px;
}
.btn-load-more {
	background: none;
	border: 1px solid var(--color-ink);
	color: var(--color-ink);
	padding: 13px 40px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
}
.btn-load-more:hover {
	background: var(--color-ink);
	color: var(--color-paper);
}

/* Sidebar */
.home-news-desk__sidebar {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.editor-pick--featured {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-border);
}
.editor-pick--featured .editor-pick__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.editor-pick--featured .editor-pick__badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-burgundy);
}
.editor-pick--featured .editor-pick__title {
	font-family: var(--font-serif);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.editor-pick--featured .editor-pick__title a {
	color: var(--color-ink);
}
.editor-pick--small {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border);
}
.editor-pick--small .editor-pick__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.editor-pick--small .editor-pick__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.editor-pick--small .editor-pick__title {
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.editor-pick--small .editor-pick__title a {
	color: var(--color-ink);
}
.editor-pick--small .editor-pick__time {
	font-size: 11px;
	color: var(--color-warm-gray);
}
.editor-pick__media img,
.editor-pick__media .fallback-thumbnail,
.editor-pick__media .post-thumb,
.editor-pick__media .post-thumb__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Terpopuler */
.popular-list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: popular-counter;
}
.popular-list__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border);
}
.popular-list__number {
	font-family: var(--font-masthead);
	font-size: 32px;
	font-weight: 700;
	color: var(--color-border);
	line-height: 1;
}
.popular-list__item a {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-ink);
	margin-top: 2px;
}


/* STAGE E: SASTRA PAGE */
.site-main--sastra {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 40px;
}
.sastra-masthead {
	background: #171717;
	color: var(--color-paper);
	padding: 52px 56px;
	text-align: center;
	margin-top: 20px;
}
.sastra-masthead__eyebrow {
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #C99AA2;
	margin: 0 0 14px;
}
.sastra-masthead__title {
	margin: 0;
	font-family: var(--font-masthead);
	font-size: 72px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}
.sastra-masthead__description {
	margin: 18px auto 0;
	max-width: 560px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1.6;
	color: #C7C3B9;
}
.sastra-subnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-border);
	margin-top: 4px;
}
.sastra-subnav__tabs {
	display: flex;
	gap: 4px;
}
.sastra-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 16px 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-bottom: -1px;
	text-decoration: none;
	color: #171717;
	cursor: pointer;
	text-decoration: none;
}
.sastra-tab:hover {
	color: var(--color-burgundy);
}
.sastra-tab.is-active {
	border-bottom-color: var(--color-burgundy);
	color: var(--color-burgundy);
}
.sastra-subnav__kirim {
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--color-burgundy);
	color: #FFFFFF;
	border: none;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.sastra-subnav__kirim:hover {
	background: #751624;
}


.sastra-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--color-warm-gray);
}
.sastra-meta__author {
	font-weight: 600;
	color: var(--color-ink);
}
.sastra-meta__sep {
	color: var(--color-border);
}

/* Grid */
.sastra-grid-section {
	padding: 34px 0 20px;
}
.sastra-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.sastra-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
}
.sastra-card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.sastra-card__media img,
.sastra-card__media .fallback-thumbnail,
.sastra-card__media .post-thumb,
.sastra-card__media .post-thumb__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sastra-card__title {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-ink);
	margin: 0;
}
.sastra-card__excerpt {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-warm-gray);
}

/* Authors */
.sastra-authors-section {
	padding: 20px 0 40px;
}
.sastra-authors__title {
	margin: 0 0 22px;
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 700;
	border-top: 1px solid var(--color-ink);
	padding-top: 16px;
	color: var(--color-ink);
}
.sastra-authors-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
.sastra-author-card {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--color-border);
	background: var(--color-paper);
	padding: 16px;
}
.sastra-author-card__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-ink);
	color: #F7F5F0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-serif);
	font-size: 18px;
	flex-shrink: 0;
}
.sastra-author-card__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.sastra-author-card__name {
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-ink);
}
.sastra-author-card__role {
	font-size: 12px;
	color: var(--color-warm-gray);
}

/* CTA */
.sastra-cta-section {
	padding: 0 0 48px;
}
.sastra-cta {
	background: #EFEBE2;
	border: 1px solid var(--color-border);
	padding: 40px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.sastra-cta__title {
	font-family: var(--font-serif);
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--color-ink);
}
.sastra-cta__description {
	margin: 0;
	font-size: 14px;
	color: var(--color-warm-gray);
}
.sastra-cta__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--color-burgundy);
	color: #FFFFFF;
	border: none;
	padding: 14px 26px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}
.sastra-cta__btn:hover {
	background: #751624;
}

@media (max-width: 767px) {
	.sastra-featured__card {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.sastra-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.sastra-authors-grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
	.sastra-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
	}
}

/* STAGE F: NEWSLETTER */
.home-section--newsletter {
	border-top: 1px solid var(--color-ink);
	border-bottom: 1px solid var(--color-border);
	background: #FFFFFF;
}
.newsletter__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 50px 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.newsletter__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-ink);
}
.newsletter__description {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-warm-gray);
	max-width: 460px;
}
.newsletter__form-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.newsletter-form {
	display: flex;
	margin-top: 8px;
	width: 100%;
	max-width: 440px;
}
.newsletter-form__input {
	flex: 1;
	border: 1px solid var(--color-ink);
	border-right: none;
	background: #FFFFFF;
	padding: 13px 16px;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--color-ink);
}
.newsletter-form__input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.newsletter-form__submit {
	background: var(--color-ink);
	color: var(--color-paper);
	border: 1px solid var(--color-ink);
	padding: 13px 24px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
}
.newsletter-form__submit:hover:not(:disabled) {
	background: var(--color-burgundy);
	border-color: var(--color-burgundy);
}
.newsletter-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.newsletter-form__note {
	margin: 14px 0 0;
	font-size: 11px;
	color: #9A968C;
}


/* HOMEPAGE SASTRA STRIP */
.home-section--sastra-strip {
	padding: 6px 40px 40px;
	max-width: 1360px;
	margin: 0 auto;
}
.sastra-strip__inner {
	background: #171717;
	color: #F7F5F0;
	padding: 40px 44px;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 44px;
}
.sastra-strip__header {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 22px;
}
.sastra-strip__title {
	margin: 0;
	font-family: var(--font-masthead);
	font-size: 34px;
	font-weight: 700;
	color: #F7F5F0;
}
.sastra-strip__view-all {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #C99AA2;
	text-decoration: none;
}
.sastra-strip__view-all:hover {
	color: #F7F5F0;
}
.sastra-strip__lead-card {
	display: block;
	text-decoration: none;
}
.sastra-strip__lead-card:hover {
	color: #F7F5F0;
}
.sastra-strip__cat {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #C99AA2;
}
.sastra-strip__lead-title {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	color: #F7F5F0;
	margin: 10px 0 12px;
}
.sastra-strip__excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #B7B3A9;
}
.sastra-strip__list-col {
	display: flex;
	flex-direction: column;
}
.sastra-strip__list-card {
	padding: 15px 0;
	border-bottom: 1px solid #3A3A3A;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
}
.sastra-strip__list-card:last-child {
	border-bottom: none;
}
.sastra-strip__list-card:hover {
	color: #F7F5F0;
}
.sastra-strip__list-title {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: #F7F5F0;
	margin: 0;
}
.sastra-strip__author {
	font-size: 11px;
	color: #9A968C;
}


/* STAGE H: SINGLE ARTICLE */
.site-main--single {
	max-width: 1360px;
	margin: 0 auto;
	padding: 32px 40px 0;
}
.single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	align-items: start;
	max-width: 100%;
	padding: 0;
}
.single-article {
	min-width: 0;
}
/*
 * The header shares the article column's full width so the title, the lead,
 * the two byline rules and the featured image all resolve to one left edge
 * and one right edge. The old 800px cap sat 24px inside the 824px media
 * column, which made the rules stop short of the image on every article.
 */
.article-header {
	max-width: none;
}

/* Lead runs the header measure rather than the 720px body measure — it is a
   dek, not body copy, and the shared width formula would otherwise centre it
   inside the header and break the left edge. */
.article-header .article-header__lead {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}
.article-header__category {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-burgundy);
}
.article-header__title {
	margin: 14px 0 16px;
	font-family: var(--font-serif);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.13;
	letter-spacing: -0.01em;
}
.article-header__excerpt {
	margin: 0 0 20px;
	font-family: var(--font-serif);
	font-size: 20px;
	line-height: 1.5;
	color: var(--color-warm-gray);
}
.article-meta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding: 13px 0;
	margin-bottom: 26px;
}
.article-meta__author {
	display: flex;
	align-items: center;
	gap: 12px;
}
.article-meta__author-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-ink);
	color: var(--color-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-serif);
	font-size: 15px;
}
.article-meta__author-details {
	display: flex;
	flex-direction: column;
}
.article-meta__author-name {
	font-size: 13px;
	font-weight: 600;
}
.article-meta__time {
	font-size: 12px;
	color: var(--color-warm-gray);
}
.article-share {
	display: flex;
	gap: 8px;
}
.article-share__btn {
	border: 1px solid var(--color-border);
	background: #FFFFFF;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-ink);
}
.article-share__btn:hover {
	border-color: var(--color-burgundy);
	color: var(--color-burgundy);
}

/* Featured Media */
.article-featured {
	margin: 26px 0 0;
	padding: 0;
}
.article-featured__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.article-featured__media img,
.article-featured__media .fallback-thumbnail,
.article-featured__media .post-thumb,
.article-featured__media .post-thumb__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-featured__caption {
	font-size: 12px;
	color: var(--color-warm-gray);
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border);
}

/* Content */
.single-article__content {
	max-width: 720px;
	margin: 30px 0 0;
	font-family: var(--font-serif);
	font-size: 19px;
	line-height: 1.75;
	color: var(--color-ink);
}
.single-article__content p {
	margin: 0 0 24px;
}
.single-article__content h2 {
	margin: 34px 0 16px;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.3;
}
.single-article__content ul {
	margin: 0 0 24px;
	padding-left: 22px;
}
.single-article__content li {
	margin-bottom: 8px;
}
.single-article__content blockquote {
	margin: 34px 0;
	padding: 4px 0 4px 28px;
	border-left: 3px solid var(--color-burgundy);
}
.single-article__content blockquote p {
	margin: 0;
	font-style: italic;
	font-size: 26px;
	line-height: 1.45;
	font-weight: 600;
}
.single-article__content blockquote cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-warm-gray);
}
.single-article__content p:first-of-type::first-letter {
	float: left;
	font-family: var(--font-serif);
	font-size: 74px;
	line-height: 0.82;
	font-weight: 700;
	padding: 8px 12px 0 0;
	color: var(--color-burgundy);
}

/* Author Box */
.author-box {
	max-width: 720px;
}
.article-tags {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 24px 0 26px;
	border-bottom: 1px solid var(--color-border);
}
.article-tags a {
	border: 1px solid var(--color-border);
	background: #FFFFFF;
	padding: 6px 14px;
	font-size: 12px;
	color: var(--color-ink);
	text-decoration: none;
}
.article-tags a:hover {
	border-color: var(--color-burgundy);
	color: var(--color-burgundy);
}
.author-profile {
	display: flex;
	gap: 20px;
	padding: 26px 0;
	border-bottom: 1px solid var(--color-border);
}
.author-profile__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-ink);
	color: var(--color-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-serif);
	font-size: 22px;
	flex-shrink: 0;
}
.author-profile__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.author-profile__eyebrow {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-warm-gray);
}
.author-profile__name {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 700;
}
.author-profile__bio {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-warm-gray);
}

/* Sidebar */
.single-sidebar {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.single-sidebar__popular h2 {
	margin: 0 0 4px;
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 700;
	border-bottom: 2px solid var(--color-ink);
	padding-bottom: 11px;
}
.single-sidebar__popular ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.single-sidebar__popular li {
	display: flex;
	gap: 13px;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-border);
}
.single-sidebar__popular span {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 600;
	color: #C9C2B4;
	line-height: 1;
}
.single-sidebar__popular a {
	font-family: var(--font-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-ink);
}
/*
 * The article sidebar newsletter card was originally a burgundy surface, so
 * `.article-sidebar__newsletter h2 / p / a` above paint their text in
 * --color-paper. This block later repainted the card white but left those
 * on-dark text colours in place, so the card's heading rendered near-white on
 * white — measured 1.02:1, i.e. invisible. The card owns its background here,
 * so it must own its foreground here too.
 */
.single-sidebar__newsletter {
	border: 1px solid var(--color-border);
	background: #FFFFFF;
	padding: 22px;
	color: var(--color-ink);
}

.single-sidebar__newsletter .single-sidebar__newsletter-title,
.single-sidebar__newsletter h2 {
	color: var(--color-ink);
}

.single-sidebar__newsletter .single-sidebar__newsletter-eyebrow {
	color: var(--color-burgundy);
}

.single-sidebar__newsletter a {
	color: var(--color-burgundy);
}
.single-sidebar__newsletter h3 {
	margin: 0 0 8px;
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 700;
}
.single-sidebar__newsletter p {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--color-warm-gray);
}
.single-sidebar__newsletter input {
	width: 100%;
	border: 1px solid var(--color-ink);
	background: #FFFFFF;
	padding: 10px 12px;
	font-family: var(--font-sans);
	font-size: 13px;
	margin-bottom: 8px;
	box-sizing: border-box;
}
.single-sidebar__newsletter button {
	width: 100%;
	background: var(--color-ink);
	color: var(--color-paper);
	border: none;
	padding: 11px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.single-sidebar__newsletter button:hover {
	background: var(--color-burgundy);
}

/* NOTE: an accidental duplicate of the R-10 featured-image / quote-attribution
   rules used to sit here, mis-indented as though it were inside a media query.
   The canonical copy lives in the Batch 6 section near the end of this file. */

/* Related Posts */
.related-posts {
	padding: 44px 0 52px;
}
.related-posts__header {
	border-top: 2px solid var(--color-ink);
	padding-top: 16px;
	margin-bottom: 24px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.related-posts__header h2 {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 700;
}
.related-posts__back {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-burgundy);
	text-decoration: none;
}
.related-posts__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.related-post-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	min-width: 0;
}
.related-post-card .post-thumb {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.related-post-card .post-thumb img,
.related-post-card .post-thumb .fallback-thumbnail,
.related-post-card .post-thumb__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: 100%;
}
.related-post-card__title {
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	color: var(--color-ink);
}
.related-post-card__title a {
	color: inherit;
	text-decoration: none;
}
.related-post-card__time {
	font-size: 11px;
	color: var(--color-warm-gray);
}

/* =====================================================================
   RESPONSIVE LAYER — appended 2026-07-25 (mobile/tablet QA stage 2026-07-25-B)
   ---------------------------------------------------------------------
   The redesigned "clean" component styles earlier in this file (approx.
   from line ~1285 onward) were authored desktop-only and, because this
   stylesheet loads last, their base rules override the earlier
   responsive media queries in this same file at every viewport. That
   left the site with effectively no mobile layer: 56px masthead wordmark
   breaking mid-word, 2-column hero/single-article grids squeezing text
   into slivers, etc. (see docs/BUG_TRACKER.md BUG-7..BUG-11).

   This block re-establishes the tablet/mobile layout for those ACTIVE
   selectors, mirroring the prototype "Home / Sastra / Artikel · Tablet
   & Mobile" reference states. It only collapses multi-column grids to a
   single column, scales oversized display type, and tightens section
   padding. Desktop (>= 1025px) is intentionally untouched; archive,
   search, author and submission bodies already collapse correctly via
   their own stylesheets, so only the shared masthead is adjusted there.
   ===================================================================== */

/* ---- TABLET / small screens (<= 820px) ---- */
@media (max-width: 820px) {
	/* Shared masthead (every route) — keep the wordmark on one line */
	.site-header__inner { padding: 24px 28px 18px; }
	.site-branding__title { font-size: 44px; }
	.primary-nav__inner { padding-left: 28px; padding-right: 28px; }

	/* Section horizontal padding */
	.headline-grid { padding-left: 28px; padding-right: 28px; }
	.home-section--latest { padding-left: 28px; padding-right: 28px; }
	.home-section--sastra-strip { padding-left: 28px; padding-right: 28px; }
	.site-main--sastra { padding-left: 28px; padding-right: 28px; }
	.site-main--single { padding-left: 28px; padding-right: 28px; }

	/* Homepage hero -> stacked (image over body) */
	.headline-grid__hero { grid-template-columns: 1fr; gap: 22px; }
	.headline-hero__body { padding-right: 0; }
	.headline-hero__title { font-size: 34px; }

	/* Supporting cards -> two columns, drop the vertical dividers */
	.headline-grid__supporting { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.supporting-card { padding-right: 0; border-right: 0; }
	.supporting-card:last-child { padding-right: 0; }

	/* Latest-news desk -> stacked, sidebar below the list */
	.home-news-desk { grid-template-columns: 1fr; gap: 36px; }
	.home-news-desk__sidebar { position: static; }

	/* Sastra channel */
	.sastra-masthead { padding: 40px 32px; }
	.sastra-masthead__title { font-size: 48px; }
	.sastra-featured { grid-template-columns: 1fr; }
	.sastra-grid { grid-template-columns: repeat(2, 1fr); }
	.sastra-authors-grid { grid-template-columns: repeat(2, 1fr); }
	.sastra-subnav { flex-wrap: wrap; gap: 8px; }
	.sastra-subnav__tabs { flex-wrap: wrap; }
	.sastra-strip__inner { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; }

	/* Single article -> stacked, sidebar below, release the sticky rail */
	.single-layout { grid-template-columns: 1fr; gap: 40px; }
	.single-sidebar { position: static; top: auto; }
	.article-header__title { font-size: 36px; }

	/* Related posts -> two columns */
	.related-posts__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- MOBILE (<= 540px): everything single column ---- */
@media (max-width: 540px) {
	.site-header__inner { padding: 20px 18px 16px; }
	.primary-nav__inner { padding-left: 18px; padding-right: 18px; }
	.headline-grid { padding-left: 18px; padding-right: 18px; }
	.home-section--latest { padding-left: 18px; padding-right: 18px; }
	.home-section--sastra-strip { padding-left: 18px; padding-right: 18px; }
	.site-main--sastra { padding-left: 18px; padding-right: 18px; }
	.site-main--single { padding-left: 18px; padding-right: 18px; }

	/* Masthead */
	.site-branding__title { font-size: 30px; letter-spacing: 0.03em; }
	.site-branding__tagline { font-size: 10px; letter-spacing: 0.22em; }

	/* Hero */
	.headline-hero__title { font-size: 26px; }
	.headline-hero__excerpt { font-size: 15px; }

	/* Supporting -> single column, dividers become bottom borders */
	.headline-grid__supporting { grid-template-columns: 1fr; gap: 0; }
	.supporting-card { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--color-border); }
	.supporting-card:last-child { border-bottom: 0; padding-bottom: 0; }

	/* Latest news -> compact thumbnail row */
	.latest-news-item { grid-template-columns: 104px 1fr; gap: 14px; }
	.latest-news-item__title { font-size: 17px; }

	/* Sastra */
	.sastra-masthead { padding: 32px 20px; }
	.sastra-masthead__title { font-size: 34px; }
	.sastra-masthead__description { font-size: 15px; }
	.sastra-grid { grid-template-columns: 1fr; }
	.sastra-authors-grid { grid-template-columns: 1fr; }
	.sastra-strip__title { font-size: 26px; }

	/* Newsletter -> stacked form (input over button) */
	.newsletter__inner { padding-left: 18px; padding-right: 18px; }
	.newsletter__title { font-size: 24px; }
	.newsletter-form { flex-direction: column; gap: 10px; max-width: 360px; }
	.newsletter-form__input { border-right: 1px solid var(--color-ink); }

	/* Single article */
	.article-header__title { font-size: 28px; }
	.article-header__excerpt { font-size: 17px; }
	.article-meta-bar { flex-wrap: wrap; gap: 12px; }

	/* Related -> single column */
	.related-posts__grid { grid-template-columns: 1fr; }

	/* Kirim Tulisan — the form card keeps desktop-scale 40px padding,
	   which is too cramped inside the narrow mobile card; give fields room. */
	.submission-form-card { padding: 24px 20px; }

}

/* ---- BREAKING-NEWS TICKER, below the desktop shell breakpoint (<= 1100px) ----
   The desktop row (icon + label + category + headline + time + prev/next/count
   + open button, all on one line) has ~510px of fixed-width chrome alone, so
   the flex-shrinking headline gets squeezed to a couple of visible characters
   before its ellipsis. Drop the lowest-priority controls (icon, pager, open
   button) and let the headline wrap instead of single-line-ellipsis.

   This used to live inside the <= 540px block, which left 541-1100px with the
   desktop single-row layout in a container far too narrow for it: at 768px the
   category chip was rendered one letter per line and the headline truncated to
   three words. Widened to the same 1100px breakpoint the rest of the shell
   already switches at. */
@media (max-width: 1100px) {
	.breaking-news__inner {
		height: auto;
		flex-wrap: wrap;
		padding: 10px 16px !important;
		row-gap: 6px;
	}
	.breaking-news__brand {
		background: transparent;
		color: var(--color-ink);
		height: auto;
		padding: 0;
	}
	.breaking-news__label {
		background: var(--color-burgundy);
		color: var(--color-paper);
		padding: 4px 8px;
		border-radius: 4px;
	}
	.breaking-news__icon,
	.breaking-news__pagination,
	.breaking-news__open {
		display: none;
	}
	/* the category chip must stay on one line — it is the element that broke
	   into a vertical letter stack at 768px */
	.breaking-news .post-card__category,
	.breaking-news .cat-chip {
		white-space: nowrap;
		flex: 0 0 auto;
	}
	.breaking-news__link {
		display: block;
		-webkit-line-clamp: unset;
		-webkit-box-orient: unset;
		flex-basis: 100%;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		font-size: 15px;
		order: 3;
	}
	.breaking-news__time {
		order: 4;
	}
}

/* ---- NARROW (<= 380px): guard the smallest screens (320px) ---- */
@media (max-width: 380px) {
	.site-branding__title { font-size: 26px; }
	.headline-hero__title { font-size: 24px; }
	.sastra-masthead__title { font-size: 30px; }
	.latest-news-item { grid-template-columns: 88px 1fr; }
}


/* ---- MOBILE NAV SUBMENU ACCORDION (<= 1100px) — BUG-12 ----
   The "clean" Part 2 nav rules (~line 1600) style .sub-menu as an ABSOLUTE
   desktop dropdown that opens on :hover, at EVERY viewport. Inside the stacked
   mobile menu (hamburger appears at <=1100px, see shell.css) that leaves the
   submenu floating out of flow with no touch way to open it. Here the submenu
   becomes an in-flow accordion panel governed by the .submenu-toggle button
   (header.php) + .is-open state (navigation.js). max-width scoped, so the
   desktop hover dropdown (>=1101px) is untouched. */
@media (max-width: 1100px) {
	.primary-menu .menu-item-has-children {
		flex-wrap: wrap;
		align-items: center;
	}

	/* Parent stays a real, navigable category link sharing the row with its
	   toggle; the caret button is a compact fixed-width control on the right. */
	.primary-menu .menu-item-has-children > a {
		flex: 1 1 auto;
		width: auto;
	}

	.primary-menu .submenu-toggle {
		flex: 0 0 auto;
		width: auto;
		min-width: 52px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 12px;
		background: none;
		border: none;
		cursor: pointer;
		color: var(--color-burgundy);
	}

	.primary-menu .submenu-toggle svg {
		transition: transform 160ms ease;
	}

	.primary-menu .submenu-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* In-flow accordion panel (drop the absolute dropdown chrome from Part 2). */
	.primary-menu .sub-menu {
		position: static;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 4px 0 10px;
		border: none;
		border-left: 3px solid var(--color-burgundy);
		border-radius: 0;
		box-shadow: none;
		background: var(--color-section-warm);
	}

	.primary-menu .sub-menu a {
		padding: 10px 16px 10px 20px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/* ---- SEARCH OVERLAY SUBMIT — MOBILE (<= 767px): REMOVED ----
   This block used to collapse the submit button to a 48px square, written for
   a flex-row `.search-overlay__form` that no longer exists — the form is
   `position: relative` with the submit absolutely positioned inside the field
   (search-overlay.css). Its own comment already flagged the mismatch. Kept as
   a flex override it did two harmful things: `padding: 18px 16px` on the form
   shifted the absolutely-positioned submit and clear out of the field, so the
   burgundy square sat outside the input's rounded right edge; and because this
   file loads last it silently beat the owning stylesheet's mobile rules.
   The mobile field is now owned entirely by search-overlay.css. */

/* ---- MOBILE MASTHEAD RESTRUCTURE (<= 1100px) ----
   The reference's "Home · Mobile" state uses one compact row (hamburger +
   wordmark + search) plus a horizontal-scrolling category strip — not the
   desktop utility-bar + big centered masthead + separate nav row, scaled
   down. This file already has a "sticky compact bar" version of exactly
   that row (`.primary-nav__brand` / `.primary-nav__actions`, gated behind
   `.primary-nav.is-stuck`, ~line 1058 and shell.css ~line 943) built for
   desktop's scroll-triggered compact nav — but per the Stage 19G note in
   shell.css (~line 906), that single-row composition only has enough
   width starting at 1440px, so it was never meant to also cover mobile.
   Rather than fight ~6 earlier `.primary-nav__inner` rules across two
   files for specificity, this block — appended last — is the single
   source of truth for the mobile row: it doesn't touch `.is-stuck` (still
   drives the desktop sticky-scroll compact bar unchanged above 1100px),
   it just makes an equivalent compact row the unconditional mobile
   default and adds the new `.primary-nav__brand` link + category strip
   from header.php. `.primary-menu`'s own show/hide-on-`.is-open` rule
   (shell.css `.js-nav .primary-menu[.is-open]`) and the submenu-accordion
   block directly above are untouched — both keep working as-is. */
@media (max-width: 1100px) {
	.site-utility-bar,
	.site-header {
		display: none;
	}

	/* .primary-nav's unconditional `top: 42px` (~line 1534) assumes the
	   40px-tall .site-utility-bar sits above it — with that bar hidden on
	   mobile, the stale 42px offset made the sticky nav clamp 42px below
	   its own reserved flow position at scrollY 0, visually covering the
	   category strip that follows it. */
	.primary-nav {
		top: 0;
	}

	.primary-nav__inner {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 12px;
		padding-block: 10px;
	}

	.mobile-menu-toggle {
		order: 1;
		flex: 0 0 auto;
		margin-block: 0;
	}

	.primary-nav__brand {
		display: block;
		order: 2;
		/* flex-basis 0 (not `auto`) — with `auto` the line-wrapping
		   algorithm was packing lines using the wordmark's max-content
		   width (~190px at 19px serif bold), which didn't fit next to the
		   toggle+search buttons at 320px and wrapped it into two lines
		   instead of letting it shrink/ellipsis on one. */
		flex: 1 1 0%;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		font-family: var(--font-masthead);
		font-size: 19px;
		font-weight: 700;
		letter-spacing: 0.02em;
		color: var(--color-ink);
		text-decoration: none;
	}

	.primary-nav__actions {
		order: 3;
		flex: 0 0 auto;
	}

	/* Not shown in the reference's compact row; still reachable via the
	   Sastra submenu's "Kirim Tulisan" link and the footer. `.primary-nav__actions
	   .primary-nav__kirim` (~line 1374) is a 2-class selector — out-specificity it
	   here rather than relying on source order alone. */
	.primary-nav__actions .primary-nav__kirim {
		display: none;
	}

	.primary-nav__menu-wrapper {
		order: 4;
		flex-basis: 100%;
		width: 100%;
	}

	/* Category strip */
	.mobile-category-strip {
		border-top: 1px solid var(--color-border);
		background: var(--color-ivory);
	}

	.mobile-category-strip__list {
		display: flex;
		gap: 20px;
		list-style: none;
		margin: 0;
		padding: 10px 16px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.mobile-category-strip__list a {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.01em;
		color: var(--color-ink);
		text-decoration: none;
	}

	.mobile-category-strip__list a.is-active {
		color: var(--color-burgundy);
	}
}

/* Desktop: the category strip is a mobile-only convenience — the full
   primary-menu row already covers this. */
@media (min-width: 1101px) {
	.mobile-category-strip {
		display: none;
	}
}

/*
 * ---- MOBILE MENU: FIXED DRAWER (<= 1100px) ----
 * shell.css's mobile block predates this and still says "no overlay/
 * scroll-lock" in its own comment — that was accurate but wrong: `#primary-
 * menu.is-open` was `display: flex` INSIDE the sticky `.primary-nav`, i.e.
 * still fully in-flow. Opening it just grew the document, so "scrolling the
 * menu" and "scrolling the page" were the same scroll container — scrolling
 * past the open list ran straight into whatever homepage content sits below
 * the nav in normal flow, with no backdrop separating them (reproduced live:
 * scrolling while open revealed "Populer di Kalangan Urban" bleeding in under
 * the last menu item).
 *
 * Fixed by giving the open state its own fixed, full-height, self-scrolling
 * drawer — the same `position: fixed` + backdrop + body-scroll-lock shape
 * `search-overlay.css` already uses successfully, so this reuses a proven
 * pattern rather than inventing a new one. Scoped entirely to
 * `body.mobile-menu-open` (set by navigation.js only below 1101px) so the
 * closed mobile state and the whole desktop hover nav are byte-for-byte
 * unchanged — this block only describes what happens during the open state.
 */

/* Unconditional, not inside the media query below: a real <button> with no
   width/height of its own otherwise inherits base.css's generic filled-button
   skin and renders as a small solid rectangle sitting in normal document flow
   right after </nav> on every viewport, including desktop, where the drawer
   this backdrop belongs to can never open. Only the `body.mobile-menu-open`
   rule inside the media query below (mobile-only, open-state-only) ever shows
   it. */
.mobile-menu-backdrop {
	display: none;
}

@media (max-width: 1100px) {
	/* Freezes the page underneath at whatever scrollY it was already at —
	   nothing here moves it, so closing "restores" the position for free,
	   the same mechanism `body.search-overlay-open` already relies on. */
	body.mobile-menu-open {
		overflow: hidden;
	}

	/*
	 * The whole header bar (toggle/brand/actions row + the menu list below
	 * it) becomes one fixed, viewport-height box instead of a sticky element
	 * that keeps growing the document. `100dvh` accounts for mobile browser
	 * chrome (address bar) so the drawer never overshoots the real visible
	 * area the way a bare `100vh` can; the `100vh` line first is the
	 * fallback for browsers without `dvh` support (evaluated in source
	 * order, `dvh` wins where supported).
	 */
	body.mobile-menu-open .primary-nav {
		position: fixed;
		inset: 0;
		height: 100vh;
		height: 100dvh;
	}

	/*
	 * Grid, not flex, is what makes "header row stays its natural height,
	 * menu list gets 100% of what's left" possible in one declaration
	 * (`1fr`). The equivalent flex-wrap version was tried first: with
	 * `align-content: stretch` (the default), leftover cross-axis space is
	 * split EQUALLY across both wrapped lines, inflating the header row's
	 * height along with the menu instead of leaving it alone.
	 */
	body.mobile-menu-open .primary-nav__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto 1fr;
		height: 100%;
	}

	body.mobile-menu-open .mobile-menu-toggle {
		grid-column: 1;
		grid-row: 1;
	}

	body.mobile-menu-open .primary-nav__brand {
		grid-column: 2;
		grid-row: 1;
	}

	body.mobile-menu-open .primary-nav__actions {
		grid-column: 3;
		grid-row: 1;
	}

	body.mobile-menu-open .primary-nav__menu-wrapper {
		grid-column: 1 / -1;
		grid-row: 2;
		/* Grid items default to `min-height: auto`, which lets their content's
		   intrinsic size overflow the 1fr track instead of clipping to it —
		   the same min-size trap flexbox has. Without this the menu list
		   pushed the drawer taller than the viewport rather than scrolling. */
		min-height: 0;
		overflow: hidden;
		/*
		 * BUG-22 — `.primary-nav__inner` inherits `align-items: center` from the
		 * desktop nav row, and that applies to the drawer grid too. A centred
		 * grid item is sized to its CONTENT and then centred in its track, so
		 * this wrapper measured 753px tall inside a 494px `1fr` row (rect top
		 * -66px, i.e. overflowing off the top of the viewport). With the item
		 * never actually confined to the track, the `overflow: hidden` above and
		 * the `height: 100%` on the list below had nothing finite to resolve
		 * against, so `#primary-menu` reported scrollHeight === clientHeight
		 * (753/753) and could not scroll at all.
		 *
		 * The visible symptom: at 320x568 the last menu item ("Lainnya") sat at
		 * y=627 — below the fold, with no way to scroll to it. Taller phones
		 * (390x844) hid the bug because 753px happened to fit.
		 *
		 * `align-self` is set on this item alone rather than flipping
		 * `align-items` on the grid, so the header row (hamburger, wordmark,
		 * actions) keeps its existing vertical centring untouched.
		 */
		align-self: stretch;
	}

	body.mobile-menu-open #primary-menu.is-open {
		height: 100%;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/*
		 * BUG-22 (bagian kedua) — `.primary-menu` mewarisi `flex-wrap: wrap`
		 * dari baris nav desktop yang memang horizontal dan boleh membungkus.
		 * Di drawer, arahnya `column`, sehingga `wrap` membuat item yang tidak
		 * muat MEMBUNGKUS KE KOLOM KEDUA di samping — bukan memperpanjang
		 * daftar ke bawah. Terukur di 320x568: clientWidth 240 tetapi
		 * scrollWidth 498, dan scrollHeight tetap sama dengan clientHeight
		 * (494/494) sehingga `overflow-y: auto` tidak punya apa pun untuk
		 * digulir — lima item terakhir (Olahraga…Lainnya) berada di kolom
		 * kedua yang terpotong di luar layar dan tidak bisa dicapai sama
		 * sekali oleh pengguna.
		 *
		 * `nowrap` mengembalikannya menjadi satu kolom yang lebih tinggi dari
		 * wadahnya, yang justru itulah kondisi yang membuat scroll vertikal
		 * internal bekerja. `flex-shrink: 0` pada itemnya menjaga tinggi baris
		 * tetap 44px alih-alih dipadatkan agar "muat".
		 */
		flex-wrap: nowrap;
		/* Stops an overscroll at the top/bottom of the menu's own list from
		   chaining into the (locked) page underneath. */
		overscroll-behavior: contain;
		padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
	}

	/* Lihat BUG-22 di atas: tanpa ini item flex dipadatkan agar muat dalam
	   tinggi drawer, bukan meluap dan memicu scroll. */
	body.mobile-menu-open #primary-menu.is-open > li {
		flex-shrink: 0;
	}

	/*
	 * Wired for backdrop-click-to-close (navigation.js) and always present in
	 * the DOM/stacking order, but — same as `.search-overlay__backdrop`'s
	 * documented mobile behaviour ("below 767px the panel is a full-viewport
	 * sheet ... no backdrop is exposed ... inapplicable there by design") —
	 * `.primary-nav` is a full 100dvh box here too, so there is no visually
	 * exposed scrim to click in practice. Escape and the toggle button both
	 * close it reliably at every width; this is not a regression, it is the
	 * same accepted shape the search overlay already uses on mobile.
	 */
	body.mobile-menu-open .mobile-menu-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		/* Below --z-nav (120, the value .primary-nav itself uses): the header
		   row and open drawer — same element, same stacking context — paint
		   on top of the scrim rather than being dimmed by their own backdrop.
		   Below --z-overlay-backdrop (400) so the search overlay always wins
		   in the (UI-impossible, but cheap to guard) case both are open. */
		z-index: 119;
		border: 0;
		margin: 0;
		padding: 0;
		background: rgba( 23, 23, 23, 0.42 );
		cursor: pointer;
	}
}

/* ==========================================================================
   2026-07-26 Desktop UI Remediation — Batch 1
   ========================================================================== */

/* G-01: Enforce the UI sans-serif as the global body default */
body {
	font-family: var(--font-ui) !important;
}

/* G-07: Complete the global link-underline reset */
a {
	text-decoration: none !important;
}

/* Re-apply underline for explicit editorial links that might have been reset */
.single-article__content a {
	text-decoration: underline !important;
}

/* ==========================================================================
   2026-07-26 Desktop UI Remediation — Batch 2
   ========================================================================== */

@media (min-width: 1101px) {
	/* G-03: Page frame / canvas.
	   The 1520px letterbox this used to re-assert is gone — see the unified
	   outer-canvas note at the top of this file. The frame keeps only its
	   structural role (full-height flex column) so the footer still sits at
	   the bottom on short routes such as an empty archive or 404. */
	.page-frame {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* G-04: Masthead wordmark */
	.site-header__inner {
		padding: 30px 40px 22px !important;
		height: 133px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.site-branding-group {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	.site-branding {
		display: block !important;
		padding: 0 !important;
		background-color: transparent !important;
		line-height: 1 !important;
	}
	.site-branding__title {
		font-size: 56px !important;
		line-height: 1 !important;
		margin: 0 !important;
	}
	.site-branding__tagline {
		margin: 0 !important;
	}

	/* G-05: Page gutter */
	.site-container,
	.breaking-news {
		max-width: var(--container) !important; /* 1360px */
		padding-left: 40px !important;
		padding-right: 40px !important;
		width: 100% !important;
	}

	/* G-08: Primary nav */
	.primary-menu a {
		text-transform: none !important;
	}

	/* G-09: "Kirim Tulisan" nav button */
	.primary-nav__kirim {
		height: 28px !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		text-transform: none !important;
		color: #FFFDFA !important;
	}

	/* G-10: Utility bar "Masuk" */
	.utility-bar__actions a {
		font-family: var(--font-ui) !important;
		text-decoration: none !important;
		font-size: 12px !important;
		font-weight: 500 !important;
	}

	/* G-11: Breaking-news ticker */
	.breaking-news {
		background-color: transparent !important;
		border: none !important;
	}
}

/* Batch 3: Search chip category colors (G-06) */
.search-chip.category-nasional { background: var(--cat-nasional-bg); color: var(--cat-nasional-fg); border-color: var(--cat-nasional-bg); }
.search-chip.category-nasional:hover { border-color: var(--cat-nasional-fg); }
.search-chip.category-lokal { background: var(--cat-lokal-bg); color: var(--cat-lokal-fg); border-color: var(--cat-lokal-bg); }
.search-chip.category-lokal:hover { border-color: var(--cat-lokal-fg); }
.search-chip.category-politik { background: var(--cat-politik-bg); color: var(--cat-politik-fg); border-color: var(--cat-politik-bg); }
.search-chip.category-politik:hover { border-color: var(--cat-politik-fg); }
.search-chip.category-ekonomi { background: var(--cat-ekonomi-bg); color: var(--cat-ekonomi-fg); border-color: var(--cat-ekonomi-bg); }
.search-chip.category-ekonomi:hover { border-color: var(--cat-ekonomi-fg); }
.search-chip.category-pendidikan { background: var(--cat-pendidikan-bg); color: var(--cat-pendidikan-fg); border-color: var(--cat-pendidikan-bg); }
.search-chip.category-pendidikan:hover { border-color: var(--cat-pendidikan-fg); }
.search-chip.category-teknologi { background: var(--cat-teknologi-bg); color: var(--cat-teknologi-fg); border-color: var(--cat-teknologi-bg); }
.search-chip.category-teknologi:hover { border-color: var(--cat-teknologi-fg); }
.search-chip.category-dunia { background: var(--cat-dunia-bg); color: var(--cat-dunia-fg); border-color: var(--cat-dunia-bg); }
.search-chip.category-dunia:hover { border-color: var(--cat-dunia-fg); }
.search-chip.category-olahraga { background: var(--cat-olahraga-bg); color: var(--cat-olahraga-fg); border-color: var(--cat-olahraga-bg); }
.search-chip.category-olahraga:hover { border-color: var(--cat-olahraga-fg); }
.search-chip.category-gaya-hidup { background: var(--cat-gaya-hidup-bg); color: var(--cat-gaya-hidup-fg); border-color: var(--cat-gaya-hidup-bg); }
.search-chip.category-gaya-hidup:hover { border-color: var(--cat-gaya-hidup-fg); }
.search-chip.category-sastra { background: var(--cat-sastra-bg); color: var(--cat-sastra-fg); border-color: var(--cat-sastra-bg); }
.search-chip.category-sastra:hover { border-color: var(--cat-sastra-fg); }
.search-chip.category-opini { background: var(--cat-opini-bg); color: var(--cat-opini-fg); border-color: var(--cat-opini-bg); }
.search-chip.category-opini:hover { border-color: var(--cat-opini-fg); }
.search-chip.category-video { background: var(--cat-video-bg); color: var(--cat-video-fg); border-color: var(--cat-video-bg); }
.search-chip.category-video:hover { border-color: var(--cat-video-fg); }

/* Batch 3: Pagination DS 38x38 spec (R-14) */
.pagination .page-numbers { min-width: 38px; min-height: 38px; height: 38px; width: 38px; }

/* Batch 3: Fix min-width for grid items (R-01 & R-02) */
.related-post-card,
.sastra-featured,
.sastra-card,
.post-thumb,
.post-thumb__placeholder {
    min-width: 0;
}

/* Ensure fallback media doesn't dictate sizing */
.post-thumb__placeholder,
.fallback-thumbnail,
.post-thumb img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}




/* ==========================================================================
   2026-07-26 Desktop UI Remediation — Batch 4
   ========================================================================== */

@media (min-width: 1101px) {
	/* R-03: Kanal grid */
	.news-channels-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 52px !important;
	}
	.channel-card {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		padding-top: 16px !important;
		border-top: 1px solid #171717 !important;
	}
	.channel-card__header {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
	}
	.channel-card__header h3 {
		font-family: var(--font-ui) !important;
		font-size: 22px !important;
		font-weight: 700 !important;
	}
	.channel-card__header a {
		color: #171717 !important;
	}
	.channel-card__more {
		font-family: var(--font-ui) !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		letter-spacing: 0.1em !important;
		color: #171717 !important;
		text-transform: none !important;
	}
	.channel-card .post-thumb {
		aspect-ratio: 16 / 9 !important;
		margin-bottom: 0 !important;
	}
	.channel-card__title {
		font-family: var(--font-masthead) !important;
		font-size: 20px !important;
		font-weight: 700 !important;
	}
	.channel-card__title a {
		color: #171717 !important;
	}
	.channel-card__list {
		display: flex !important;
		flex-direction: column !important;
	}
	.channel-card__list li {
		padding-block: 10px !important;
		border-top: 1px solid #EDEAE3 !important;
	}
	.channel-card__list a {
		font-family: var(--font-masthead) !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		color: #171717 !important;
	}

	/* R-04: Opini section */
	.home-section--opini {
		background-color: #EFEBE2 !important;
		padding-block: 60px !important;
	}
	.home-section--opini .home-section__header {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		margin-bottom: 40px !important;
	}
	.home-section__kicker {
		font-family: var(--font-ui) !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		letter-spacing: 0.1em !important;
		color: #9F1730 !important;
		text-transform: uppercase !important;
		margin-bottom: 8px !important;
	}
	.home-section--opini h2 {
		font-family: var(--font-serif) !important;
		font-size: 32px !important;
		font-weight: 700 !important;
		margin: 0 !important;
	}
	.opinions-grid {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 0 !important;
	}
	.opinion-card {
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 0 40px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
	}
	.opinion-card:not(:last-child) {
		border-right: 1px solid #DAD5CC !important;
	}
	.opinion-card__author-wrap {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
	}
	.opinion-card__avatar {
		width: 44px !important;
		height: 44px !important;
		border-radius: 50% !important;
		background-color: #171717 !important;
		color: #FFFDFA !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-family: var(--font-ui) !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		margin: 0 !important;
	}
	.opinion-card__author-info {
		display: flex !important;
		flex-direction: column !important;
	}
	.opinion-card__author {
		margin: 0 !important;
		font-family: var(--font-ui) !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		color: #171717 !important;
	}
	.opinion-card__role {
		margin: 0 !important;
		font-family: var(--font-ui) !important;
		font-size: 12px !important;
		color: #6F6B65 !important;
	}
	.opinion-card__title {
		margin: 0 !important;
		font-family: var(--font-serif) !important;
		font-size: 22px !important;
		font-weight: 600 !important;
		font-style: italic !important;
	}
	.opinion-card__title a {
		color: #171717 !important;
		text-decoration: none !important;
	}
	.opinion-card__excerpt {
		margin: 0 !important;
		font-family: var(--font-ui) !important;
		font-size: 13px !important;
		line-height: 1.6 !important;
		color: #171717 !important;
	}

	/* R-05: Foto & Video section */
	.media-grid {
		grid-template-columns: 1.6fr 1fr !important;
	}
	.media-card--large {
		grid-row: span 2 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
	}
	.media-card--large .post-thumb__placeholder,
	.media-card--small .post-thumb__placeholder {
		background-color: #232320 !important;
		color: #5F5F5F !important;
	}
	.media-card__cat {
		font-family: var(--font-ui) !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		letter-spacing: 0.1em !important;
		color: #9F1730 !important;
		text-transform: uppercase !important;
		margin-bottom: 8px !important;
		display: block !important;
	}
	.media-card--large .media-card__title {
		font-family: var(--font-masthead) !important;
		font-size: 28px !important;
		font-weight: 700 !important;
		margin: 0 !important;
	}
	.media-card--small {
		display: grid !important;
		grid-template-columns: 130px 1fr !important;
		gap: 20px !important;
		padding-block: 20px !important;
		border-bottom: 1px solid #DAD5CC !important;
	}
	.media-card--small:first-child {
		padding-top: 0 !important;
	}
	.media-card--small .media-card__title {
		font-family: var(--font-masthead) !important;
		font-size: 18px !important;
		font-weight: 700 !important;
		margin: 0 !important;
	}
	.media-card__duration {
		position: absolute !important;
		bottom: 12px !important;
		right: 12px !important;
		background: rgba(23, 23, 23, 0.8) !important;
		color: #FFFDFA !important;
		font-family: var(--font-ui) !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		padding: 4px 8px !important;
		border-radius: 4px !important;
	}

	/* R-06: Newsletter */
	.home-section--newsletter {
		background: #FFFFFF !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		max-width: 100% !important;
		border-top: 1px solid #171717 !important;
		border-bottom: none !important;
		margin-bottom: 0 !important;
		
	}
	.newsletter__inner {
		max-width: 1280px !important;
		margin: 0 auto !important;
		padding: 50px 40px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}
	.newsletter-form {
		display: flex !important;
		flex-direction: row !important;
		max-width: 500px !important;
		width: 100% !important;
		gap: 0 !important;
	}
	.newsletter-form__input {
		border: 1px solid #171717 !important;
		border-right: none !important;
		background: #FFFFFF !important;
		color: #171717 !important;
		padding: 13px 16px !important;
		font-family: var(--font-ui) !important;
		flex: 1 !important;
	}
	.newsletter-form__submit {
		background: #171717 !important;
		color: #FFFDFA !important;
		border: 1px solid #171717 !important;
		font-family: var(--font-ui) !important;
		padding: 13px 24px !important;
		font-weight: 600 !important;
	}
	.newsletter__description {
		font-family: var(--font-ui) !important;
		margin-bottom: 24px !important;
	}

	/* R-11: Hero section */
	.headline-hero__excerpt {
		font-family: var(--font-ui) !important;
		color: #5F5F5F !important;
	}
	.headline-hero__meta {
		text-transform: none !important;
	}
	.supporting-card {
		display: flex !important;
		flex-direction: column !important;
	}
	.supporting-card .post-thumb {
		aspect-ratio: 3 / 2 !important;
		margin-bottom: 12px !important;
	}
	.supporting-card .cat-label, 
	.supporting-card .cat-chip {
		align-self: flex-start !important;
	}

	/* R-12: Terkini & Rail */
	.latest-news-item__excerpt {
		font-family: var(--font-ui) !important;
	}
	.editor-pick--small .editor-pick__media {
		aspect-ratio: 1 / 1 !important;
	}
	.popular-list__number {
		font-family: var(--font-serif) !important;
		font-size: 24px !important;
		color: #C9C2B4 !important;
	}
	.home-news-desk__sidebar .section-title {
		border-bottom: 2px solid #171717 !important;
	}
	.home-news-desk__sidebar .section-title--burgundy {
		border-bottom: 2px solid var(--color-burgundy) !important;
	}
	.home-news-desk__sidebar a {
		text-decoration: none !important;
	}

	/* R-13: Sastra Strip */
	.sastra-strip__lead-card,
	.sastra-strip__list-card {
		display: flex !important;
		flex-direction: column !important;
		padding: 0 !important;
		padding-top: 0 !important;
		background: transparent !important;
		color: var(--color-ink) !important;
		height: auto !important;
		justify-content: flex-start !important;
		gap: 12px !important;
	}
	.sastra-strip__list-card {
		border-bottom: 1px solid var(--color-border) !important;
		padding-bottom: 16px !important;
	}
	.sastra-strip__list-card:last-child {
		border-bottom: none !important;
	}
	.sastra-strip__cat {
		color: var(--color-burgundy) !important;
		margin-bottom: 0 !important;
	}
	.sastra-strip__media {
		width: 100% !important;
		margin-bottom: 8px !important;
	}
	.sastra-strip__author,
	.sastra-strip__excerpt {
		color: var(--color-warm-gray) !important;
	}
}
/* ^ end of the desktop-only (>=1101px) Batch 4/5 homepage block.
   Everything below is deliberately viewport-agnostic. Rules that are
   desktop-only carry their own @media — never rely on indentation. */

/* Batch 3: R-01 and R-02 (Grid sizing bugs) — must apply at every viewport,
   this is what stops grid tracks blowing out past their container. */
/* 1. min-width: 0 to all grid items to prevent grid blowout */
.related-posts__grid > *,
.sastra-strip__list-col > *,
.media-grid > *,
.headline-grid__supporting > *,
.editor-picks-grid > *,
.latest-news-list > * {
	min-width: 0 !important;
}

/* 2. Constrain the fallback media so it can never dictate track sizing.
   `height: auto` belongs to .post-thumb only — it lets the aspect-ratio
   resolve the box height. Applying it to the placeholder as well collapsed
   the placeholder to the height of its "AA" wordmark (53px instead of the
   248px thumb), which uncovered the burgundy .post-thumb backdrop underneath
   and made every fallback card render as a solid red block. */
.post-thumb {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
}

.post-thumb__placeholder {
	display: flex !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
}

/* R-14: Pagination */
.pagination .nav-links {
	gap: 6px !important;
}
.pagination .page-numbers {
	min-width: 38px !important;
	min-height: 38px !important;
	width: auto !important;
	height: 38px !important;
	padding: 0 12px !important;
	border-radius: 8px !important;
	border: 1px solid var(--color-border) !important;
	background: var(--color-paper) !important;
	color: var(--color-ink) !important;
	font-family: var(--font-ui) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}
.pagination .page-numbers:not(.prev):not(.next) {
	width: 38px !important;
	padding: 0 !important;
}
.pagination .page-numbers.current {
	background: var(--color-burgundy) !important;
	border-color: var(--color-burgundy) !important;
	color: var(--color-paper) !important;
}
.pagination .page-numbers.dots {
	border: none !important;
	background: transparent !important;
	min-width: auto !important;
	width: auto !important;
}

.single-sidebar__newsletter-submit:hover {
	background: var(--color-ink-light) !important;
}

/* R-10: Featured image width */
.article-featured-media,
.article-featured-media figure,
.article-featured-media img {
	width: 100% !important;
	max-width: none !important;
}

/* R-10: Quote attribution */
.single-article__content blockquote cite,
.single-article__content .wp-block-pullquote cite,
.single-article__content .wp-block-quote cite {
	display: block !important;
	font-style: italic !important;
	font-size: 14px !important;
	margin-top: 12px !important;
	color: var(--color-warm-gray) !important;
	font-family: var(--font-ui) !important;
}
.single-article__content blockquote cite::before,
.single-article__content .wp-block-pullquote cite::before,
.single-article__content .wp-block-quote cite::before {
	content: "— " !important;
}

/* Batch 7: Search & Submission Layout (R-09, R-16).
   The 3-up results grid is a desktop composition; below 1101px the shared
   archive responsive layer already collapses it. */
@media (min-width: 1101px) {
	body.search .archive-layout {
		display: block !important;
	}
	body.search .archive-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 32px !important;
	}
	body.search .archive-card {
		display: flex !important;
		flex-direction: column !important;
		border-bottom: none !important;
		padding: 0 !important;
		gap: 16px !important;
	}
	body.search .archive-card__thumb-link,
	body.search .archive-card__thumb-link .post-thumb,
	body.search .archive-card__thumb-link .post-thumb__placeholder {
		width: 100% !important;
		aspect-ratio: 16 / 9 !important;
	}
}

/* R-16: Kirim tulisan */
.submission-hero > p:last-child {
	font-size: 16px !important;
}
.submission-form-card {
	padding: 32px !important;
	background: #ffffff !important;
	border: 1px solid var(--color-border) !important;
}
.submission-form-card form {
	margin-top: 24px !important;
}

/* Batch 8: Global Footer (R-17) */
.site-footer {
	background-color: #000000 !important;
}

/* Two-column footer (wordmark rail + link columns) is a desktop composition.
   Scoped so the tablet/mobile stack below is not overridden by source order. */
@media (min-width: 1101px) {
	.site-footer__inner {
		display: grid !important;
		grid-template-columns: 320px 1fr !important;
		gap: 64px !important;
	}
	.footer-nav {
		display: flex !important;
		gap: 64px !important;
		justify-content: flex-end !important;
	}
	.footer-nav__menu {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
	}
}

@media (max-width: 1100px) {
	.site-footer__inner {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.footer-nav {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px !important;
		justify-content: start !important;
	}
	.footer-nav__menu {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
	}
}

/* B-04: Ticker overflow & overlapping.
   Two halves with different scopes.

   (a) Height must be content-driven at every viewport. `.breaking-news__inner
   .site-container` pins height: 58px at (0,2,0), which outranks the <=540px
   mobile layer's single-class `height: auto`; when the headline wraps to a
   second line it then spills out of the pink band and paints over the hero.
   Matched here at the same two-class specificity so the intent survives.

   (b) Single-line ellipsis is desktop-only. `white-space: nowrap` makes the
   headline's min-content contribution the full headline width, which
   propagates up through .site-main's fit-content sizing and pinned the whole
   page to the 1280px container at every narrow viewport. Below 1101px the
   mobile ticker layer wraps the headline instead. */
.breaking-news__inner.site-container {
	height: auto;
	min-height: 58px;
}

@media (min-width: 1101px) {
	.breaking-news__inner.site-container {
		flex-wrap: nowrap;
		overflow: hidden;
	}
	.breaking-news__link {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		flex: 1 !important;
		min-width: 0 !important;
	}
}

/* B-05: Sticky header anchor scroll offset */
html {
	scroll-padding-top: 100px !important;
}

/* B-06: Homepage double gutter fix */
.home-section {
	padding-inline: 0 !important;
}
.site-container {
	padding-inline: 40px !important;
}
@media (max-width: 767px) {
	.site-container {
		padding-inline: 24px !important;
	}
}

/*
 * ---- STRIP KATEGORI MOBILE: ITEM AKTIF DARI MENU WORDPRESS ----
 *
 * Strip kini dirender wp_nav_menu() (lihat inc/menus.php), yang menandai item
 * aktif dengan kelas WordPress standar `current-menu-item` /
 * `current-menu-ancestor` pada <li> — bukan `is-active` pada <a> seperti
 * markup hardcoded sebelumnya. Aturan `a.is-active` di atas dipertahankan agar
 * fallback dan markup lama tetap tersorot; blok ini menambahkan padanan
 * WordPress-nya.
 *
 * Ditulis di akhir berkas dengan media query yang sama seperti blok strip di
 * atas: berkas ini dimuat paling akhir dan blok desktop-only di tengahnya
 * menimpa media query yang lebih awal, jadi penambahan responsif harus
 * di-append di sini agar benar-benar berlaku.
 */
@media (max-width: 1100px) {
	.mobile-category-strip__list .current-menu-item > a,
	.mobile-category-strip__list .current-menu-ancestor > a,
	.mobile-category-strip__list .current_page_item > a {
		color: var(--color-burgundy);
	}
}