/*
Theme Name: Portal Berita
Theme URI: https://example.com/portal-berita
Author: Portal Berita
Description: Theme portal berita dengan tampilan persis desain Figma "New York Times News Portal". Seluruh isi beranda (berita utama, audio, live, resep, sidebar opini, Wellness, Cooking) terisi otomatis dari artikel WordPress.
Version: 2.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portal-berita
Tags: news, blog, two-columns, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   1. Reset & dasar
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, hr { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #4a90e2; outline-offset: 2px; }

:root {
  --ink: #000;
  --text: #5a5a5a;
  --meta: #727272;
  --soft: #363636;
  --line: #dfdfdf;
  --line-2: #d9d9d9;
  --ad: #f8f8f8;
  --live: #ce0b24;
  --btn: #587c94;
  --ph: #d9d9d9;

  /* Georgia & Helvetica Neue = font sistem (sama seperti desain). */
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --blackletter: "UnifrakturMaguntia", "Old English Text MT", serif;
  --slab: "Alfa Slab One", Georgia, serif;

  --gutter: 40px;
}

body {
  font-family: var(--serif);
  color: var(--ink);
  background: #fff;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

.container { width: min(1360px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { width: min(760px, 100% - 2 * var(--gutter)); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; color: #000; padding: 8px 16px; font: 700 14px var(--sans); }
.skip-link:focus { left: 8px; top: 8px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.empty { padding: 48px 0; font: 400 16px var(--sans); color: var(--text); }

/* =========================================================
   2. Komponen kecil
   ========================================================= */
.tag { font: 700 10px var(--sans); color: var(--ink); white-space: nowrap; }
.tag-meta { font: 400 10px var(--sans); color: var(--text); white-space: nowrap; }
.tag-meta--soft { color: var(--meta); }
.tags { display: flex; align-items: flex-start; gap: 6px; }
.rule { display: block; height: 1px; background: var(--ink); }
.credit { font: 400 10px var(--sans); color: var(--meta); text-align: right; white-space: nowrap; }
.hr { height: 1px; border: 0; background: var(--line); margin: 24px 0; }
.hr--dark { background: var(--ink); margin-bottom: 36px; }

/* Gambar unggulan; kotak abu-abu (#d9d9d9) kalau belum ada gambar */
a[aria-hidden="true"][tabindex="-1"] { display: block; }
.thumb { display: block; position: relative; overflow: hidden; background: var(--ph); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb--wide { aspect-ratio: 592 / 356; }
.thumb--square { width: 96px; height: 96px; flex: none; }
.thumb--recipe { width: 152px; height: 100px; margin-bottom: 16px; }
.thumb--card { width: 304px; height: 160px; max-width: 100%; }
.thumb--side { width: 335px; height: 225px; max-width: 100%; margin-bottom: 16px; }
.thumb--opinion { width: 144px; height: 160px; }
.thumb--story { width: 144px; height: 186px; }

/* =========================================================
   3. Header (posisi persis seperti di Figma, lebar 1360)
   ========================================================= */
.site-header { margin-top: 16px; }
.masthead { position: relative; height: 199px; }
.masthead > * { position: absolute; }
.icon-btn { background: none; border: 0; padding: 0; line-height: 0; }
.menu-btn { left: 0; top: 9px; }
.search-btn { left: 32px; top: 8px; }

.edition { left: 50%; top: 8px; transform: translateX(-50%); }
.edition ul { display: flex; gap: 40px; font: 400 10px var(--sans); text-transform: capitalize; white-space: nowrap; }
.edition li:first-child a { font-weight: 700; }

.header-actions { left: 1126px; top: 0; display: flex; gap: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: 2px; background: var(--btn); color: #fff;
  font: 700 10px var(--sans); text-transform: capitalize; white-space: nowrap;
}

.dateline { left: 0; top: 58px; display: flex; flex-direction: column; gap: 4px; font: 400 12px var(--sans); text-transform: capitalize; white-space: nowrap; }
.dateline strong { font-weight: 700; }

.logo { left: 50%; top: 36px; width: 520px; height: 76px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; }
.logo img, .logo .custom-logo { width: auto; max-width: 100%; height: auto; max-height: 76px; }
.logo__text { font: 400 56px/1 var(--blackletter); white-space: nowrap; }

.hl--1 { left: 0; top: 128px; width: 100%; height: 1px; background: var(--line-2); }
.hl--2 { left: 0; top: 193px; width: 100%; height: 6px; }
.hl--2 i { position: absolute; left: 0; width: 100%; height: 1px; background: #000; }
.hl--2 i:first-child { top: 0; }
.hl--2 i:last-child { top: 5px; }

.nav-links { top: 155px; transform: translateX(-50%); }
.nav-links--a { left: calc(50% - 234px); }
.nav-links--b { left: calc(50% + 252px); }
.nav-links ul { display: flex; gap: 32px; }
.nav-links li { position: relative; }
.nav-links a { display: inline-flex; align-items: flex-start; gap: 4px; font: 400 10px var(--sans); text-transform: capitalize; white-space: nowrap; }
.nav-links a::after { content: ""; width: 12px; height: 12px; background: url(assets/img/chevron-down.svg) center / 100% 100% no-repeat; }
.nav-links .sub-menu { display: none; position: absolute; top: 100%; left: -12px; z-index: 30; min-width: 180px; padding: 8px 0; background: #fff; border: 1px solid var(--line); }
.nav-links .sub-menu a { display: block; padding: 8px 16px; }
.nav-links .sub-menu a::after { display: none; }
.nav-links li:hover > .sub-menu, .nav-links li:focus-within > .sub-menu { display: block; }

.ticker { left: 1256px; top: 68px; display: flex; gap: 19px; font: 500 10px var(--sans); color: #404040; text-transform: capitalize; white-space: nowrap; }
.ticker .up { display: inline-flex; align-items: center; gap: 4px; color: #679f65; }
.ticker .up::after { content: ""; width: 5px; height: 8.89px; background: url(assets/img/arrow-up.svg) center / 100% 100% no-repeat; }

.drawer { padding: 16px 0 8px; }
.drawer[hidden] { display: none; }
.drawer__list { columns: 4; column-gap: 32px; font: 400 14px var(--sans); }
.drawer__list li { padding: 4px 0; break-inside: avoid; }

/* =========================================================
   4. Layout utama: 976 | 1px garis | 335 (jarak 24)
   ========================================================= */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 1px 335px; column-gap: 24px; margin-top: 24px; }
.layout__divider { background: var(--line-2); }
.content { min-width: 0; }
.content > * + * { margin-top: 24px; }
.layout-rule { height: 1px; background: var(--ink); margin: 74px 0 0 -4px; width: calc(100% + 4px); }

/* =========================================================
   5. Berita utama (teks kiri 348px, foto kanan 592px)
   ========================================================= */
.feature { display: grid; grid-template-columns: 348px minmax(0, 1fr); column-gap: 36px; align-items: start; }
.feature__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.feature__title { width: 348px; max-width: 100%; font: 700 20px var(--serif); color: var(--ink); }
.feature--lead .feature__title { font-size: 32px; text-transform: capitalize; }
.feature__summary { width: 278px; max-width: 100%; font: 400 16px var(--serif); color: var(--text); }
.feature__media { margin-top: 1px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.feature__media > a { width: 100%; }
.feature--ruled { padding-bottom: 64px; border-bottom: 1px solid var(--ink); }

.feature--lead + * { margin-top: 37px; }
.audio-headline + * { margin-top: 64px; }

/* =========================================================
   6. Audio headline
   ========================================================= */
.audio-headline { display: flex; flex-direction: column; gap: 32px; }
.audio-headline__row { display: flex; align-items: flex-start; gap: 14px; }
.audio-headline__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.audio-headline__title { font: 700 16px var(--serif); white-space: nowrap; }
.listen-row { display: flex; align-items: center; gap: 8px; }

/* =========================================================
   7. Live
   ========================================================= */
.live { position: relative; padding-bottom: 24px; border-bottom: 1px solid var(--ink); }
.live--last { border-bottom: 0; }
.feature--ruled + .live { margin-top: 21px; }
.live.live--last { margin-top: 77px; }

.live__topics { display: flex; align-items: flex-start; height: 20px; }
.live__topics strong { margin-right: 32px; font: 700 16px var(--sans); white-space: nowrap; }
.live__topics ul { display: flex; gap: 24px; margin-top: 2px; font: 400 14px var(--sans); white-space: nowrap; }

.live__body { display: grid; grid-template-columns: 348px minmax(0, 1fr); column-gap: 36px; margin-top: 37px; align-items: start; }
.live__slide[hidden] { display: none; }
.live__text { display: flex; flex-direction: column; align-items: flex-start; }
.live__tag { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 19px; color: var(--live); }
.live__tag strong { font: 700 16px var(--sans); }
.live__tag span { font: 400 14px var(--sans); }
.live__title { width: 348px; max-width: 100%; margin-bottom: 16px; font: 700 20px var(--serif); }
.live__summary { width: 278px; max-width: 100%; margin-bottom: 16px; font: 400 16px var(--serif); color: var(--text); }
.live__more { display: flex; align-items: center; gap: 8px; font: 500 16px var(--sans); color: var(--soft); }
.badge { padding: 2px 6px; border-radius: 8px; background: var(--soft); color: #fff; font: 500 12px var(--sans); }

.live__controls { position: relative; display: flex; justify-content: flex-end; gap: 8px; margin: 24px 0 0 384px; }
.arrow { width: 32px; height: 32px; padding: 0; border: 0; background: center / 100% 100% no-repeat; }
.arrow--prev { background-image: url(assets/img/back.svg); }
.arrow--next { background-image: url(assets/img/forward.svg); }
.dots { position: absolute; left: 51.2%; top: -8px; display: flex; align-items: center; gap: 8px; height: 12px; }
.dots i { display: block; flex: none; border-radius: 50%; background: #c7c7c7; }
.dots i:nth-child(1) { width: 12px; height: 12px; }
.dots i:nth-child(2) { width: 12px; height: 12px; }
.dots i:nth-child(3) { width: 8px; height: 8px; }
.dots i:nth-child(4) { width: 6px; height: 6px; }
.dots i:nth-child(n+5) { display: none; }
.dots i.is-active { background: #000; }

/* =========================================================
   8. Food
   ========================================================= */
.food { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.live + .food { margin-top: 24px; }
.food + .feature--ruled { margin-top: 79px; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.tab { padding: 13px 16px; border-radius: 6px; font: 400 16px/20px var(--sans); color: var(--meta); white-space: nowrap; }
.tab.is-active { background: #ebebeb; color: var(--ink); font-weight: 700; }
.recipes { display: flex; justify-content: center; gap: 54px; width: 100%; }
.recipe { position: relative; flex: none; width: 152px; }
.recipe + .recipe::before { content: ""; position: absolute; left: -27px; top: 0; width: 1px; height: 160px; background: var(--line); }
.recipe h3 { width: 152px; font: 700 16px var(--serif); }
.food .rule { width: 100%; }

/* =========================================================
   9. Sidebar kanan (335px)
   ========================================================= */
.sidebar { min-width: 0; display: flex; flex-direction: column; }
.side-main__body { width: 348px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.side-main h2 { font: 400 32px var(--serif); text-transform: capitalize; }
.side-main p { width: 278px; font: 400 16px var(--serif); color: var(--text); }

.side-pair { position: relative; display: grid; grid-template-columns: 152px 152px; column-gap: 31px; }
.side-pair::before { content: ""; position: absolute; left: 167px; top: 0; width: 1px; height: 240px; background: var(--line); }
.side-pair h3 { width: 152px; margin-bottom: 8px; font: 700 16px var(--serif); }

.opinions { display: flex; flex-direction: column; gap: 36px; }
.opinion-label { font: 700 16px var(--sans); white-space: nowrap; }
.opinion-item { display: grid; }
.opinion-item__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.author-title { display: flex; flex-direction: column; gap: 16px; }
.byline { font: 400 14px/4px var(--serif); color: var(--meta); white-space: nowrap; }
.opinion-title { font: 700 20px/24px var(--serif); }

.opinion-item--head { padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.opinion-item--head .opinion-title { width: 334px; }
.opinion-item--big { grid-template-columns: 159px 144px; column-gap: 32px; }
.opinion-item--big .opinion-title { width: 159px; }
.opinion-item--small-img,
.opinion-item--small { box-sizing: content-box; min-height: 116px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.opinion-item--small-img { grid-template-columns: 255px 48px; justify-content: space-between; }
.opinion-item--small { grid-template-columns: 285px; }
.opinion-item--small-img .opinion-title { width: 255px; }
.opinion-item .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

.audio-episode { margin-top: 56px; display: flex; flex-direction: column; gap: 24px; }
.audio-card { position: relative; width: 335px; height: 160px; border: 2px solid var(--line); }
.audio-card > * { position: absolute; }
.audio-card__wave { left: 86px; top: 116px; }
.audio-card__mute { left: 14px; top: 112px; }
.audio-card__tags { left: 14px; top: 14px; }
.audio-card__title { left: 14px; top: 42px; width: 310px; font: 700 16px var(--serif); }
.audio-card__time { left: 291px; top: 118px; }
.listen-link { display: flex; align-items: center; gap: 16px; height: 18px; font: 700 16px var(--serif); white-space: nowrap; }

.missed { margin-top: 56px; display: flex; flex-direction: column; gap: 36px; }
.missed__head { display: flex; flex-direction: column; gap: 8px; }
.missed__title { font: 700 16px var(--sans); white-space: nowrap; }
.missed__sub { font: italic 400 14px/4px var(--serif); color: #c4a7a7; white-space: nowrap; }
.story { display: grid; grid-template-columns: 159px 144px; column-gap: 32px; height: 186px; }
.story__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.story .opinion-title { width: 159px; }

/* =========================================================
   10. Wellness & Cooking
   ========================================================= */
.band { margin-top: 72px; }
.layout-rule + .band { margin-top: 16px; }
.band__title { margin-bottom: 19px; font: 700 16px var(--sans); }
.cards4 { display: flex; gap: 48px; }
.card { position: relative; flex: none; width: 304px; }
.card + .card::before { content: ""; position: absolute; left: -24px; top: 0; width: 1px; height: 160px; background: var(--line); }
.card .credit { margin: 8px 0 16px; }
.card h3 { width: 303px; font: 700 16px var(--serif); }

/* =========================================================
   11. Iklan & banner langganan
   ========================================================= */
.ad-strip { margin-top: 72px; padding: 22px 0 23px; display: flex; flex-direction: column; align-items: center; background: var(--ad); }
.ad-strip__label, .ad-banner__label { font: 700 16px var(--sans); color: var(--meta); text-align: center; white-space: nowrap; }
.ad-banner { margin-top: 72px; padding: 76px 0 75px; background: var(--ad); }
.ad-banner__label { margin-bottom: 9px; }
.promo { width: min(970px, 100% - 2 * var(--gutter)); min-height: 250px; margin-inline: auto; padding-top: 25px; display: flex; flex-direction: column; align-items: center; background: #222; color: #fff; text-align: center; }
.promo__brand { font: 400 24px/24px var(--blackletter); white-space: nowrap; }
.promo__headline { margin-top: 35px; font: 400 24px/33px var(--slab); }
.promo__price { margin-top: 4px; font: 700 16px/20px var(--sans); color: #fee07e; }
.promo__cta { margin-top: 36px; display: inline-flex; align-items: center; height: 28px; padding: 8px 16px; border-radius: 2px; background: #fff; color: #000; font: 700 10px/12px var(--sans); }
.promo__note { margin-top: 8px; font: 300 10px/12px var(--sans); white-space: nowrap; }

/* =========================================================
   12. Footer
   ========================================================= */
.site-footer { margin-top: 60px; }
.footer__logo { display: block; height: 48px; }
.footer__logo img { width: 329px; height: 48px; object-fit: contain; object-position: left center; }
.footer__logo .logo__text { font-size: 40px; line-height: 48px; }
.footer__grid { display: grid; grid-template-columns: 979px 344px; margin-top: 36px; }
.footer__sections { display: flex; align-items: flex-start; gap: 96px; }
.footer__col h3 { margin-bottom: 24px; font: 700 24px var(--sans); }
.footer__col ul { display: flex; flex-direction: column; gap: 24px; font: 500 14px var(--sans); white-space: nowrap; }
.footer__sub { position: relative; padding-left: 24px; }
.footer__sub::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 640px; background: var(--line); }
.footer__sub h3 { margin-bottom: 20px; font: 700 24px var(--sans); }
.big-links { display: flex; flex-direction: column; gap: 32px; font: 700 20px var(--sans); white-space: nowrap; }
.big-links a { display: flex; align-items: center; gap: 13px; }
.big-links a::before { content: ""; flex: none; width: 24px; height: 24px; background: center / 100% 100% no-repeat; }
.big-links li:nth-child(1) a::before { background-image: url(assets/img/home.svg); }
.big-links li:nth-child(2) a::before { background-image: url(assets/img/play-24.svg); }
.big-links li:nth-child(3) a::before { background-image: url(assets/img/games.svg); }
.big-links li:nth-child(4) a::before { background-image: url(assets/img/cooking.svg); }
.small-links { margin-top: 48px; padding-top: 47px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 36px; font: 500 14px var(--sans); white-space: nowrap; }
.legal { margin-top: 86px; padding-bottom: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; font: 400 11px var(--sans); color: #666; white-space: nowrap; }
.legal__menu { display: flex; flex-wrap: wrap; gap: 8px 32px; }

/* =========================================================
   13. Halaman lain (artikel, arsip, pencarian) — memakai bahasa
       visual yang sama dengan beranda
   ========================================================= */
.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1; }
.search-field { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 2px; font: 400 14px var(--sans); }
.search-submit { padding: 10px 16px; border: 0; border-radius: 2px; background: var(--btn); color: #fff; font: 700 12px var(--sans); }

.archive-head { margin-bottom: 24px; }
.archive-title { font: 700 32px var(--serif); }
.archive-title span { font-style: italic; }
.archive-desc { margin-top: 12px; font: 400 16px var(--serif); color: var(--text); }
.pagination { margin-top: 40px; }
.nav-links-pg, .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; font: 500 14px var(--sans); }
.page-numbers { padding: 8px 12px; border: 1px solid var(--line); border-radius: 2px; }
.page-numbers.current { background: #ebebeb; font-weight: 700; }

.entry { padding-block: 8px 24px; }
.entry__cat { font: 700 12px var(--sans); color: var(--live); }
.entry__title { margin-top: 8px; font: 700 clamp(28px, 4vw, 40px) / 1.2 var(--serif); }
.entry__lead { margin-top: 16px; font: 400 18px/1.5 var(--serif); color: var(--text); }
.entry__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; font: 400 12px var(--sans); color: var(--meta); }
.entry__media { margin-block: 24px; }
.entry__content { max-width: 720px; font: 400 18px/1.7 var(--serif); }
.entry__content > * + * { margin-top: 1.2em; }
.entry__content h2, .entry__content h3, .entry__content h4 { margin-top: 1.8em; font-family: var(--serif); line-height: 1.3; }
.entry__content h2 { font-size: 26px; }
.entry__content h3 { font-size: 22px; }
.entry__content a { text-decoration: underline; text-underline-offset: 2px; }
.entry__content ul { list-style: disc; padding-left: 1.4em; }
.entry__content ol { list-style: decimal; padding-left: 1.4em; }
.entry__content blockquote { padding-left: 20px; border-left: 3px solid var(--ink); font-style: italic; color: var(--text); }
.entry__content img, .entry__content video, .entry__content iframe { max-width: 100%; }
.entry__content figcaption, .wp-caption-text { margin-top: 8px; font: 400 12px var(--sans); color: var(--meta); }
.entry__foot { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; font: 400 12px var(--sans); }
.entry__foot a { padding: 4px 10px; background: #ebebeb; border-radius: 2px; }
.post-navigation { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ink); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 16px; font: 700 14px var(--serif); }

.widget { margin-bottom: 32px; }
.widget__title, .widgettitle { margin-bottom: 16px; font: 700 16px var(--sans); }
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 14px var(--sans); }

.comments { max-width: 720px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ink); }
.comments__title, .comment-reply-title { margin-bottom: 20px; font: 700 20px var(--serif); }
.comments__list li { padding: 16px 0; border-bottom: 1px solid var(--line); font: 400 15px/1.5 var(--sans); }
.comments__list .children { margin-left: 24px; }
.comment-form label { display: block; margin-bottom: 4px; font: 700 12px var(--sans); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 2px; font: 400 14px var(--sans); }
.comment-form .submit { padding: 10px 20px; border: 0; border-radius: 2px; background: var(--btn); color: #fff; font: 700 12px var(--sans); }

/* =========================================================
   RESPONSIF (desain asli untuk layar 1440px; di bawahnya
   susunan mengalir tanpa mengubah gaya tiap komponen)
   ========================================================= */
@media (max-width: 1439px) {
  .header-actions { left: auto; right: 0; }
  .ticker { left: auto; right: 0; }
}

@media (max-width: 1100px) {
  /* Header jadi susunan mengalir */
  .masthead { height: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-bottom: 12px; }
  .masthead > * { position: static; transform: none; }
  .menu-btn { order: 1; }
  .search-btn { order: 2; margin-right: auto; }
  .edition { order: 3; }
  .header-actions { order: 4; }
  .logo { order: 5; width: 100%; height: auto; }
  .dateline { order: 6; }
  .ticker { order: 7; }
  .hl--1 { order: 8; width: 100%; }
  .nav-links { order: 9; width: 100%; overflow-x: auto; }
  .nav-links ul { gap: 24px; padding-bottom: 4px; }
  .nav-links li { flex: none; }
  .nav-links .sub-menu { display: none !important; }
  .hl--2 { order: 10; position: relative; width: 100%; }
  .drawer__list { columns: 2; }

  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout__divider { display: none; }
  .sidebar { width: 335px; max-width: 100%; margin: 48px auto 0; }
  .layout-rule { margin-top: 48px; }

  .recipes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .recipe { width: auto; }
  .recipe + .recipe::before { display: none; }
  .recipe h3 { width: auto; }
  .thumb--recipe { width: 100%; }

  .cards4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
  .card { width: auto; }
  .card:nth-child(odd)::before, .card + .card::before { display: none; }
  .card:nth-child(even)::before { display: block; }
  .card h3 { width: auto; }
  .thumb--card { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .footer__sections { flex-wrap: wrap; gap: 40px 56px; }
  .footer__sub { padding-left: 0; }
  .footer__sub::before { display: none; }
  .legal { margin-top: 48px; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .edition, .ticker, .dateline { display: none; }
  .header-actions .btn:first-child { display: none; }
  .logo__text { font-size: 40px; }
  .drawer__list { columns: 1; }

  .feature, .live__body { grid-template-columns: 1fr; row-gap: 16px; }
  .feature__title, .live__title, .feature__summary, .live__summary { width: auto; }
  .feature--lead .feature__title { font-size: 26px; }
  .feature__media { margin-top: 0; }
  .feature--ruled { padding-bottom: 32px; }
  .audio-headline__title { white-space: normal; }
  .live__topics { height: auto; flex-wrap: wrap; row-gap: 8px; }
  .live__topics ul { flex-wrap: wrap; margin-top: 0; }
  .live__body { margin-top: 24px; }
  .live__controls { margin-left: 0; }
  .dots { left: 0; top: 10px; }
  .live.live--last, .feature--ruled + .live, .food + .feature--ruled { margin-top: 32px; }
  .recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards4 { grid-template-columns: 1fr; }
  .card:nth-child(even)::before { display: none; }

  .ad-banner { padding: 40px 0; }
  .promo__headline { font-size: 20px; line-height: 28px; }
  .promo__price { padding-inline: 16px; }
  .footer__logo img { width: 240px; }
  .big-links { white-space: normal; }
}

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