/* Declare | ديكلير. Theme stylesheet v1.0.0.
   Mobile-first, RTL-native (logical properties throughout). Yellow on black.
   Rules: no letter-spacing or uppercase on Arabic (Latin-only classes carry them);
   no red anywhere, errors use yellow; the waves motif has one yellow arc only. */

:root {
	--y: #FFD400;
	--k: #0B0B0C;
	--w: #FFFFFF;
	--g: #1E1E21;
	--s: #9A9AA0;
	--line: #2E2E33;
	--edge: #737379; /* control boundaries: 3.53:1 on graphite, 4.18:1 on black (WCAG 1.4.11) */
	--txt-2: rgba(255, 255, 255, .82);
	--ar: 'Cairo', 'Cairo FB Apple', 'Cairo FB Win', 'Noto Sans Arabic', Tahoma, sans-serif;
	--en: 'Anton', Impact, 'Arial Narrow', sans-serif;
	--num: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--gut: 20px;
	--max: 1200px;
	--r: 14px;
	--r-lg: 22px;
	--head-h: 64px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
	margin: 0;
	background: var(--k);
	color: var(--w);
	font-family: var(--ar);
	font-size: 17px;
	line-height: 1.8;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; line-height: 1.4; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--y); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--y); color: var(--k); }
.sr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.handle, .num { font-family: var(--num); font-weight: 600; font-feature-settings: 'tnum' 1; }
.handle { unicode-bidi: isolate; }
[lang="en"] { font-family: var(--en); }

.skip {
	position: absolute; inset-inline-start: 12px; top: -80px; z-index: 100;
	background: var(--y); color: var(--k); font-weight: 700; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap--text { max-width: calc(760px + 2 * var(--gut)); }
.wrap--media { max-width: calc(960px + 2 * var(--gut)); }
.wrap--form { max-width: calc(720px + 2 * var(--gut)); }
.site-main { display: block; }
.site-main:focus { outline: none; }

/* ---------- Buttons and links ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 10px 22px; border-radius: 12px; border: 2px solid transparent;
	font-family: var(--ar); font-weight: 800; font-size: 17px; line-height: 1.3; text-decoration: none; cursor: pointer;
	transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 20px; height: 20px; }
.btn--primary { background: var(--y); color: var(--k); }
.btn--primary:hover { background: #FFE04D; }
.btn--ghost { background: transparent; color: var(--w); border-color: var(--edge); }
.btn--ghost:hover { border-color: var(--y); }
.btn--dark { background: var(--k); color: var(--w); }
.btn--dark:hover { background: var(--g); }
.btn--lg { min-height: 56px; padding-inline: 28px; font-size: 18px; }
.btn--sm { min-height: 44px; padding: 6px 16px; font-size: 15px; border-radius: 10px; }
.btn--block { width: 100%; }

.link-arrow {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
	color: var(--y); font-weight: 700; text-decoration: none;
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform .18s var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(-3px); }
[dir="ltr"] .link-arrow .icon { transform: scaleX(-1); }

.kicker { margin: 0 0 8px; color: var(--y); font-weight: 800; font-size: 18px; line-height: 1.6; }

.badge {
	display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 6px;
	font-family: var(--ar); font-weight: 700; font-size: 13px; line-height: 1.7;
}
.badge--breaking { background: var(--y); color: var(--k); }
.badge--ad { border: 1px solid var(--s); color: var(--w); }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(11, 11, 12, .96); border-bottom: 1px solid var(--g); }
@supports (backdrop-filter: blur(8px)) { .site-head { background: rgba(11, 11, 12, .86); backdrop-filter: blur(10px); } }
.site-head__bar { display: flex; align-items: center; gap: 12px; min-height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--w); flex-shrink: 0; }
.brand__mark { width: 24px; height: 32px; color: var(--y); fill: var(--y); }
.brand__words { display: flex; flex-direction: column; line-height: 1; }
.brand__ar { font-weight: 900; font-size: 23px; line-height: 1.15; color: var(--y); }
.brand__en { font-family: var(--en); font-size: 11px; letter-spacing: .32em; color: var(--w); margin-top: 1px; padding-inline-start: .1em; }
.site-head__actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.menu-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	background: transparent; border: 1px solid var(--edge); border-radius: 10px; color: var(--w); cursor: pointer;
}
.menu-btn .icon { width: 22px; height: 22px; }
.menu-btn__close { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__close { display: block; }

.nav__list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 16px; text-decoration: none; color: var(--w); }
.nav__link:hover { color: var(--y); }
.nav__link[aria-current="page"] { color: var(--y); box-shadow: inset 0 -3px 0 var(--y); }

/* No JS: nav shows below the bar, menu button hidden. With JS (class on <html>): collapsible panel. */
.site-head__bar { flex-wrap: wrap; }
.nav { order: 3; width: 100%; padding-bottom: 8px; }
.nav__search { display: none; }
.menu-btn { display: none; }
.js .site-head__bar { flex-wrap: nowrap; }
.js .menu-btn { display: inline-flex; }
.js .nav {
	display: none; position: absolute; inset-inline: 0; top: 100%;
	background: var(--k); border-bottom: 1px solid var(--g); padding: 8px var(--gut) 20px;
	max-height: calc(100vh - var(--head-h)); overflow-y: auto;
}
.js .nav.is-open { display: block; }
.js .nav__list { flex-direction: column; gap: 0; }
.js .nav__list li { border-bottom: 1px solid var(--g); }
.js .nav__link { width: 100%; min-height: 52px; font-size: 19px; }
.js .nav__link[aria-current="page"] { box-shadow: inset -4px 0 0 var(--y); padding-inline-start: 12px; }
.js .nav__search { display: block; margin-top: 16px; }

@media (min-width: 1100px) {
	.js .site-head__bar, .site-head__bar { flex-wrap: nowrap; gap: 28px; }
	.js .menu-btn, .menu-btn { display: none; }
	.nav, .js .nav { display: block; position: static; order: 0; width: auto; padding: 0; border: 0; background: none; max-height: none; overflow: visible; }
	.nav__list, .js .nav__list { flex-direction: row; flex-wrap: nowrap; gap: 22px; }
	.js .nav__list li { border: 0; }
	.js .nav__link, .nav__link { width: auto; min-height: var(--head-h); font-size: 16px; }
	.js .nav__link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--y); padding-inline-start: 0; }
	.nav__search, .js .nav__search { display: none; }
}

/* Breaking ticker */
.ticker { background: var(--g); border-top: 1px solid #2A2A2E; }
.ticker__inner { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 auto; }
.ticker__label { flex-shrink: 0; color: var(--y); font-weight: 800; font-size: 15px; }
.ticker__link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 15px; text-decoration: none; }
.ticker__link:hover { text-decoration: underline; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--g); display: flex; flex-direction: column; }
.hero__inner { position: relative; z-index: 1; padding-top: 40px; }
.hero__h { font-size: clamp(46px, 14vw, 112px); line-height: 1.25; font-weight: 900; margin-bottom: 14px; }
.hero__sub { font-size: 18px; line-height: 1.85; color: var(--txt-2); max-width: 34em; margin-bottom: 26px; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: 20px; }
.hero__ctas .btn { flex: 1 1 100%; }
.hero__handle { color: var(--s); font-size: 15px; margin: 0; }
.hero__handle .handle { color: var(--w); }
/* Mobile: the waves are a band below the copy, so text never sits on the arcs. */
.hero__waves { order: 2; position: relative; width: 100%; height: 150px; margin-top: 8px; }

@media (min-width: 640px) {
	.hero__ctas .btn { flex: 0 0 auto; }
}
@media (min-width: 900px) {
	.hero { min-height: 560px; flex-direction: row; align-items: center; }
	.hero__inner { padding-block: 72px; }
	.hero__copy { max-width: 54%; }
	.hero__waves { position: absolute; inset-block: 0; left: 0; width: 46%; height: 100%; margin: 0; }
}

/* ---------- Sections ---------- */
.section { padding-block: 44px; }
.section--tight { padding-block: 8px 40px; }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.section__h { position: relative; font-size: clamp(26px, 6.4vw, 38px); line-height: 1.4; padding-inline-start: 18px; margin-bottom: 18px; }
.section__head .section__h { margin-bottom: 0; }
.section__h a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.section__h a .icon { width: 24px; height: 24px; color: var(--y); transition: transform .18s var(--ease); }
.section__h a:hover { color: var(--y); }
.section__h a:hover .icon { transform: translateX(-3px); }
.section__h::before { content: ''; position: absolute; inset-inline-start: 0; top: .32em; bottom: .32em; width: 6px; background: var(--y); border-radius: 2px; }
.section__sub { color: var(--txt-2); font-size: 18px; max-width: 40em; }
.section__note { color: var(--s); font-size: 15px; margin-top: 20px; }
.sections .section + .section { padding-top: 0; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 18px; }
.card { position: relative; display: grid; gap: 10px; align-content: start; }
.card__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--g); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }
.card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
.card__mark { width: 15%; max-width: 46px; aspect-ratio: 3 / 4; height: auto; color: #34343A; fill: #34343A; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--s); font-size: 13px; line-height: 1.6; }
.card__cat { color: var(--w); font-weight: 700; }
.card__title { font-size: 18px; line-height: 1.6; font-weight: 700; }
.card__link { text-decoration: none; }
.card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r); }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 3px solid var(--y); outline-offset: 4px; }
.card:hover .card__title { color: var(--y); }
.card--lead .card__title { font-size: clamp(22px, 5.6vw, 34px); font-weight: 900; line-height: 1.45; }
.card--lead .card__media { border-radius: var(--r-lg); }

/* Rows: thumbnail + title side by side (the thumbnail sits at the reading start, on the right). */
.card--row,
.grid--latest .card--card,
.grid--cat .card,
.grid--list .card:not(:first-child) { grid-template-columns: 128px 1fr; gap: 14px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--g); }
.card--row .card__media,
.grid--latest .card--card .card__media,
.grid--cat .card .card__media,
.grid--list .card:not(:first-child) .card__media { border-radius: 10px; }
.card--row .card__title,
.grid--latest .card--card .card__title,
.grid--cat .card .card__title,
.grid--list .card:not(:first-child) .card__title { font-size: 16px; line-height: 1.65; }
.card--row .card__mark,
.grid--latest .card--card .card__mark,
.grid--cat .card .card__mark,
.grid--list .card:not(:first-child) .card__mark { width: 26%; }
.card--row .card__body,
.grid--latest .card--card .card__body,
.grid--cat .card .card__body,
.grid--list .card:not(:first-child) .card__body { display: grid; gap: 4px; }
.card--row .card__meta,
.grid--latest .card--card .card__meta,
.grid--cat .card .card__meta,
.grid--list .card:not(:first-child) .card__meta { order: 2; font-size: 12px; }

@media (min-width: 640px) {
	.grid--cat, .grid--list { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
	.grid--cat .card,
	.grid--list .card:not(:first-child) { grid-template-columns: 1fr; padding: 0; border: 0; gap: 10px; }
	.grid--cat .card .card__media,
	.grid--list .card:not(:first-child) .card__media { border-radius: var(--r); }
	.grid--cat .card .card__title,
	.grid--list .card:not(:first-child) .card__title { font-size: 18px; }
	.grid--cat .card .card__meta,
	.grid--list .card:not(:first-child) .card__meta { order: 0; font-size: 13px; }
	.grid--cat .card .card__body,
	.grid--list .card:not(:first-child) .card__body { display: block; }
	.grid--cat .card .card__meta,
	.grid--list .card:not(:first-child) .card__meta { margin-bottom: 6px; }
	.grid--cat .card .card__mark, .grid--list .card:not(:first-child) .card__mark { width: 18%; }
	.grid--list .card:first-child { grid-column: 1 / -1; }
	.grid--list .card:first-child .card__title { font-size: clamp(22px, 3.4vw, 30px); font-weight: 900; }
	.grid--latest { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.grid--latest .card--lead { grid-column: 1 / -1; }
	.grid--latest .card--row { grid-column: span 1; }
}
@media (min-width: 1024px) {
	.grid--cat { grid-template-columns: repeat(4, 1fr); }
	.grid--list { grid-template-columns: repeat(3, 1fr); }
	.grid--list .card:first-child { grid-column: span 2; grid-row: span 2; }
	.grid--latest { grid-template-columns: repeat(3, 1fr); gap: 26px 28px; }
	.grid--latest .card--lead { grid-column: 1 / span 2; grid-row: 1 / span 3; }
	.grid--latest .card--card { grid-column: 3; }
	.grid--latest .card--card .card__title { font-size: 16px; }
}

/* ---------- What we cover ---------- */
.cover-grid { list-style: none; display: grid; gap: 12px; }
.cover-card {
	position: relative; display: grid; gap: 4px; padding: 20px 20px 22px; padding-inline-end: 56px;
	background: var(--g); border-radius: var(--r-lg); transition: background-color .18s var(--ease);
}
.cover-card:hover { background: #26262A; }
.cover-card__h { font-size: 26px; line-height: 1.4; }
.cover-card__link { text-decoration: none; }
.cover-card__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); }
.cover-card__link:focus-visible { outline: none; }
.cover-card__link:focus-visible::after { outline: 3px solid var(--y); outline-offset: 3px; }
.cover-card__line { margin: 0; color: var(--txt-2); font-size: 16px; line-height: 1.75; }
.cover-card__arrow { position: absolute; inset-inline-end: 20px; top: 24px; width: 22px; height: 22px; color: var(--s); }
.cover-card:hover .cover-card__arrow { color: var(--y); }
.cover-card--breaking .cover-card__h { color: var(--y); }
@media (min-width: 640px) { .cover-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .cover-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Follow ---------- */
.section--follow { background: linear-gradient(180deg, var(--k), #111113); border-block: 1px solid var(--g); }
.section--follow:focus { outline: none; }
.follow-grid { list-style: none; display: grid; gap: 12px; margin-top: 8px; }
.follow-card { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 2px; align-items: start; padding: 18px; background: var(--g); border-radius: var(--r-lg); }
.follow-card__icon { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--k); color: var(--w); }
.follow-card__icon .icon { width: 24px; height: 24px; }
.follow-card__name { font-size: 20px; line-height: 1.5; }
.follow-card__line { margin: 0; color: var(--txt-2); font-size: 15px; line-height: 1.7; }
.follow-card__btn { grid-column: 1 / -1; margin-top: 14px; width: 100%; }
.follow-card__btn:hover { background: var(--y); color: var(--k); border-color: var(--y); }
.notify { margin: 22px 0 0; color: var(--txt-2); font-size: 16px; }
@media (min-width: 640px) { .follow-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1024px) {
	.follow-grid { grid-template-columns: repeat(4, 1fr); }
	.follow-card { grid-template-columns: 1fr; }
	.follow-card__icon { grid-row: auto; margin-bottom: 10px; }
	.follow-card__btn { margin-top: auto; }
	.follow-card { grid-template-rows: auto auto 1fr auto; }
}

/* ---------- Promise ---------- */
.promise__list { list-style: none; display: grid; gap: 18px; margin-bottom: 18px; }
.promise__item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.promise__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--y); color: var(--y); font-size: 18px; line-height: 1; }
.promise__item p { margin: 0; color: var(--txt-2); font-size: 17px; }
.promise__item strong { color: var(--w); font-weight: 800; }
@media (min-width: 1024px) { .promise__list { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* ---------- Ads teaser (yellow panel, black text) ---------- */
.ads-teaser { position: relative; background: var(--y); color: var(--k); border-radius: var(--r-lg); padding: 28px 22px; display: grid; gap: 10px; justify-items: start; }
.ads-teaser__h { font-size: clamp(26px, 6.6vw, 40px); line-height: 1.4; }
.ads-teaser__body { margin: 0 0 8px; font-size: 17px; line-height: 1.8; max-width: 44em; }
.ads-teaser :focus-visible { outline-color: var(--k); }
@media (min-width: 900px) { .ads-teaser { padding: 44px 48px; } }

/* ---------- Page heads ---------- */
.page-head { position: relative; padding-block: 28px 8px; }
.page-head--hero, .page-head--section { overflow: hidden; padding-block: 28px 36px; border-bottom: 1px solid var(--g); }
.page-head--hero .wrap, .page-head--section .wrap { position: relative; z-index: 1; }
.page-head__h { font-size: clamp(34px, 9vw, 64px); line-height: 1.3; margin-bottom: 10px; }
.page-head__h--sm { font-size: clamp(26px, 6vw, 40px); }
.page-head__lead { color: var(--txt-2); font-size: 18px; line-height: 1.85; max-width: 38em; }
.page-head--hero .btn { margin-top: 8px; }
.page-head__waves { display: none; }
.page-head--breaking .page-head__h { color: var(--y); }
.page-head__search { max-width: 560px; margin-top: 12px; }
@media (min-width: 900px) {
	.page-head--hero, .page-head--section { padding-block: 56px 64px; }
	.page-head__waves { display: block; position: absolute; inset-block: 0; left: 0; width: 34%; height: 100%; }
	.page-head--hero .wrap > *, .page-head--section .wrap > * { max-width: 60%; }
}

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 14px; font-size: 14px; color: var(--s); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs li + li::before { content: '‹'; color: #55555B; }
.crumbs a { text-decoration: none; color: var(--s); }
.crumbs a:hover { color: var(--y); }
.crumbs [aria-current] { color: var(--w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* ---------- Article ---------- */
.article__head { padding-top: 24px; }
.article__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.article__badges:empty { display: none; }
.article__cat { color: var(--y); font-weight: 700; font-size: 15px; text-decoration: none; }
.article__h { font-size: clamp(28px, 7.4vw, 46px); line-height: 1.45; margin-bottom: 14px; }
.article__sponsored { display: inline-block; border: 1px solid var(--s); border-radius: 8px; padding: 4px 12px; font-size: 15px; color: var(--txt-2); }
.article__meta { display: grid; gap: 2px; padding-block: 12px; margin-bottom: 8px; border-block: 1px solid var(--g); color: var(--s); font-size: 14px; }
.article__meta p { margin: 0; }
.article__by { color: var(--w); font-weight: 700; }
.article__by a { color: var(--y); text-decoration: none; }
.article__dates { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.article__media { margin-block: 18px 6px; }
.article__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); }
.article__media figcaption { color: var(--s); font-size: 14px; margin-top: 8px; }
.article__body { margin-top: 18px; }
.article__follow { margin-top: 28px; padding: 20px; border-radius: var(--r-lg); background: var(--g); }
.article__follow > p:first-child { font-weight: 800; margin-bottom: 12px; }
.article__follow .notify { margin-top: 14px; font-size: 15px; }
.article__report { margin: 22px 0 44px; font-size: 15px; }
.article__report a { color: var(--s); }
.article__report a:hover { color: var(--y); }

.prose { font-size: 18px; line-height: 1.95; }
.prose > * + * { margin-top: 1em; }
.prose p { margin: 0; }
.prose h2 { font-size: clamp(22px, 5vw, 28px); line-height: 1.5; margin-top: 1.6em; }
.prose h3 { font-size: 20px; line-height: 1.55; margin-top: 1.4em; font-weight: 800; }
.prose a { color: var(--y); }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin: 0; padding: 4px 18px; border-inline-start: 4px solid var(--y); color: var(--txt-2); }
.prose img { border-radius: var(--r); }
.prose figure { margin-inline: 0; }
.prose figcaption { color: var(--s); font-size: 14px; }
.prose .lead { font-size: 19px; color: var(--txt-2); }
.ticks { list-style: none; padding: 0 !important; }
.ticks li { position: relative; padding-inline-start: 26px; }
.ticks li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .75em; width: 10px; height: 10px; border-radius: 2px; background: var(--y); }

.credits { display: grid; gap: 8px; margin: 26px 0 0; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line); font-size: 16px; }
.credits div { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.credits dt { font-weight: 800; color: var(--y); }
.credits dd { margin: 0; }
.credits a { color: var(--w); }

.correction { margin-top: 18px; padding: 14px 18px; border: 2px solid var(--y); border-radius: var(--r); }
.correction__h { font-size: 17px; font-weight: 800; color: var(--y); margin-bottom: 4px; }
.correction p { margin: 0; font-size: 16px; }

.share { margin-top: 26px; }
.share__h { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.share__row { display: flex; flex-wrap: wrap; gap: 10px; }
.share__row .btn[hidden] { display: none; }

.social { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.social__link { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--g); color: var(--w); transition: background-color .18s var(--ease), color .18s var(--ease); }
.social__link .icon { width: 21px; height: 21px; }
.social__link:hover { background: var(--y); color: var(--k); }
.social--inline .social__link { background: var(--k); }

.embed-facade { display: grid; gap: 12px; justify-items: start; margin-block: 1em; }
.embed-facade blockquote { margin: 0; width: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); font-size: 16px; }

/* ---------- Advertise ---------- */
.points { list-style: none; display: grid; gap: 14px; }
.point { padding: 20px; background: var(--g); border-radius: var(--r-lg); }
.point__h { font-size: 20px; line-height: 1.5; margin-bottom: 6px; }
.point p { margin: 0; color: var(--txt-2); font-size: 16px; line-height: 1.8; }
.point .link-arrow { margin-top: 6px; }
@media (min-width: 640px) { .points { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

.formats { list-style: none; display: grid; gap: 14px; }
.format { position: relative; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.format__n { display: block; color: var(--y); font-size: 15px; margin-bottom: 6px; }
.format__h { font-size: 21px; line-height: 1.5; margin-bottom: 6px; }
.format p { margin: 0; color: var(--txt-2); font-size: 16px; line-height: 1.8; }
@media (min-width: 640px) { .formats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .formats { grid-template-columns: repeat(4, 1fr); } }

.kit { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kit__tile { display: grid; gap: 4px; padding: 18px; background: var(--g); border-radius: var(--r-lg); }
.kit__label { color: var(--s); font-size: 14px; }
.kit__value { font-family: var(--num); font-weight: 600; font-size: 26px; line-height: 1.3; color: var(--w); }
.kit__unit { font-family: var(--ar); font-weight: 700; font-size: 15px; color: var(--txt-2); }
@media (min-width: 1024px) { .kit { grid-template-columns: repeat(4, 1fr); } }

.contact-email { margin-top: 20px; font-weight: 700; }
.contact-email a { color: var(--y); }

/* ---------- Forms ---------- */
.section--form:focus { outline: none; }
.panel { background: var(--g); border-radius: var(--r-lg); padding: 24px 18px 28px; }
@media (min-width: 640px) { .panel { padding: 36px 36px 40px; } }
.form { display: grid; gap: 20px; margin-top: 8px; }
.form__note { margin: 0; color: var(--s); font-size: 14px; }
.form__summary { background: var(--y); color: var(--k); font-weight: 800; padding: 14px 16px; border-radius: 12px; }
.form__summary a { color: var(--k); }
.form__summary[hidden] { display: none; }
.form__hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__direct { margin: 20px 0 0; color: var(--txt-2); font-size: 15px; }
.form__direct a { color: var(--y); }
.field { display: grid; gap: 6px; }
.field__label { font-weight: 700; font-size: 16px; line-height: 1.6; }
.field__set { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.field__set legend { padding: 0; margin-bottom: 2px; }
.req { color: var(--y); }
.field__help { margin: -2px 0 0; color: var(--s); font-size: 14px; line-height: 1.6; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
	width: 100%; min-height: 52px; padding: 12px 14px; background: var(--k); color: var(--w);
	border: 1.5px solid var(--edge); border-radius: 12px; font-size: 16px; line-height: 1.6;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder, .search__input::placeholder { color: var(--s); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--y); box-shadow: 0 0 0 3px rgba(255, 212, 0, .28); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer; }
/* Physical borders on purpose: a down chevron must not flip with direction. */
.select::after { content: ''; position: absolute; inset-inline-end: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--s); border-bottom: 2px solid var(--s); transform: rotate(45deg); pointer-events: none; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1.5px solid var(--edge); border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 15px; text-decoration: none; background: var(--k); }
.chip input { width: 18px; height: 18px; margin: 0; accent-color: var(--y); }
.chip:has(input:checked) { border-color: var(--y); }
.chip:hover { border-color: var(--s); }
.consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.75; }
.consent input { flex-shrink: 0; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--y); }
.consent a { color: var(--y); }
.field__err { margin: 0; padding-inline-start: 10px; border-inline-start: 3px solid var(--y); color: var(--w); font-weight: 700; font-size: 14px; line-height: 1.6; }
.field__err[hidden] { display: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--y); border-width: 2px; }
.form__submit[aria-disabled="true"] { opacity: .7; cursor: progress; }
.form-ok { display: grid; justify-items: start; gap: 8px; padding: 6px 0 0; }
.form-ok:focus { outline: none; }
.form-ok__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--y); color: var(--k); }
.form-ok__h { font-size: 26px; line-height: 1.4; }
.form-ok p { color: var(--txt-2); }

/* ---------- Search ---------- */
.search { display: flex; gap: 8px; }
.search__input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px; background: var(--k); border: 1.5px solid var(--edge); border-radius: 12px; font-size: 16px; }
.search__input:focus-visible { outline: none; border-color: var(--y); }
.search__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--g); color: var(--w); font-weight: 700; cursor: pointer; }
.search__btn .icon { width: 18px; height: 18px; }
.search__btn:hover { background: var(--y); color: var(--k); }
.search-none { color: var(--txt-2); font-size: 18px; }
.chips--links { margin-top: 10px; }
.chips--links .chip:hover { border-color: var(--y); color: var(--y); }

/* ---------- Empty state ---------- */
.empty { display: grid; justify-items: start; gap: 10px; padding: 28px 22px; border: 1px dashed #3A3A40; /* decorative */ border-radius: var(--r-lg); }
.empty__mark { width: 30px; height: 40px; color: var(--y); fill: var(--y); margin-bottom: 4px; }
.empty__h { font-size: clamp(24px, 6vw, 32px); line-height: 1.45; }
.empty__body { margin: 0 0 6px; color: var(--txt-2); max-width: 36em; }

/* ---------- Pager ---------- */
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }
.pager a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 20px; border: 1.5px solid var(--edge); border-radius: 12px; font-weight: 700; text-decoration: none; }
.pager a:hover { border-color: var(--y); color: var(--y); }
.pager__older { margin-inline-start: auto; }

/* ---------- 404 ---------- */
.notfound { position: relative; overflow: hidden; }
.notfound__inner { position: relative; z-index: 1; padding-block: 40px 56px; }
.notfound__code { font-family: var(--en); font-weight: 400; font-size: clamp(96px, 30vw, 200px); line-height: 1; color: var(--y); letter-spacing: .02em; margin-bottom: 12px; }
.notfound__h { font-size: clamp(30px, 8vw, 54px); line-height: 1.35; margin-bottom: 10px; }
.notfound__body { color: var(--txt-2); font-size: 18px; max-width: 32em; margin-bottom: 24px; }
.notfound__search { max-width: 520px; margin-top: 18px; }
.notfound__waves { display: none; }
@media (min-width: 900px) {
	.notfound__waves { display: block; position: absolute; inset-block: 0; left: 0; width: 38%; height: 100%; }
	.notfound__inner > * { max-width: 56%; }
}

/* ---------- Policy pages ---------- */
.page { padding-block: 28px 56px; }
.page__h { font-size: clamp(32px, 8vw, 54px); line-height: 1.35; margin-bottom: 10px; }
.policy__updated { color: var(--s); font-size: 14px; }
.policy .prose h2 { scroll-margin-top: calc(var(--head-h) + 20px); }

/* ---------- Author ---------- */
.author__img { border-radius: 50%; margin-bottom: 12px; }
.author__role { color: var(--y); font-weight: 700; margin-bottom: 6px; }

/* ---------- Footer ---------- */
.site-foot { margin-top: 40px; border-top: 1px solid var(--g); background: #08080A; padding-block: 40px 28px; font-size: 15px; }
.site-foot__top { display: grid; gap: 32px; }
.brand--foot .brand__mark { width: 30px; height: 40px; }
.brand--foot .brand__ar { font-size: 28px; }
.site-foot__tagline { margin: 14px 0 4px; font-weight: 800; font-size: 18px; color: var(--y); }
.site-foot__about { color: var(--txt-2); max-width: 30em; margin: 0; }
.site-foot__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.site-foot__h { font-size: 15px; font-weight: 800; color: var(--s); margin-bottom: 10px; }
.site-foot__col ul:not(.social) { list-style: none; display: grid; gap: 2px; }
.site-foot__col ul:not(.social) a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.site-foot__col ul:not(.social) a:hover { color: var(--y); }
#footer-follow { grid-column: 1 / -1; scroll-margin-top: calc(var(--head-h) + 20px); }
.site-foot__handle { margin: 12px 0 0; color: var(--s); }
.site-foot__handle .handle { color: var(--w); }
.site-foot__search { max-width: 520px; margin-top: 32px; }
.site-foot__base { display: grid; gap: 2px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--g); color: var(--s); font-size: 14px; }
.site-foot__base p { margin: 0; }
@media (min-width: 1024px) {
	.site-foot__top { grid-template-columns: 1.1fr 2fr; gap: 48px; }
	.site-foot__cols { grid-template-columns: 1fr 1fr 1fr 1.5fr; }
	#footer-follow { grid-column: auto; }
	.site-foot__base { grid-template-columns: 1fr auto; }
}

/* ---------- Narrow phones ---------- */
@media (max-width: 359px) {
	:root { --gut: 16px; }
	.brand__ar { font-size: 20px; }
	.site-head__actions .btn--sm { padding-inline: 12px; }
	.card--row, .grid--latest .card--card, .grid--cat .card, .grid--list .card:not(:first-child) { grid-template-columns: 104px 1fr; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }