/* Makkaani — main stylesheet. Mobile-first; desktop via min-width queries. */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--sand);
	color: var(--ink-soft);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold); }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--ink);
	line-height: var(--lh-tight);
	font-weight: 600;
	margin: 0 0 var(--sp-2);
}
button { font-family: inherit; cursor: pointer; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}
.m-skip {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--chrome-bg); color: #fff; padding: var(--sp-1) var(--sp-2);
}
.m-skip:focus { left: var(--sp-2); }

/* ---------- Shared layout ---------- */
.m-main { overflow-x: clip; }
.m-section {
	max-width: var(--wrap);
	margin: var(--sp-7) auto;
	padding: 0 var(--sp-3);
}
.m-section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--sp-2); margin-bottom: var(--sp-4);
	border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2);
}
.m-section__title { font-size: var(--fs-h2); margin: 0; }
.m-section__more {
	font-family: var(--font-body); font-size: var(--fs-small);
	font-weight: 600; color: var(--gold); white-space: nowrap;
}
.m-label {
	display: inline-block; font-family: var(--font-body);
	font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-1);
}
.m-label--light { color: var(--gold-soft); }

.m-grid { display: grid; gap: var(--sp-3); }
.m-grid--3 { grid-template-columns: 1fr; }
.m-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.m-grid--3, .m-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.m-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.m-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.m-btn {
	display: inline-block; background: var(--chrome-bg); color: #fff;
	padding: 0.85em 1.6em; font-size: var(--fs-small); font-weight: 600;
	border: 1px solid var(--chrome-bg); border-radius: var(--radius);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.m-btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.m-btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.m-btn--ghost:hover { background: #fff; color: var(--ink); }

/* ---------- Navigation ---------- */
.m-nav {
	position: sticky; top: 0; z-index: 100;
	background: var(--nav-bg);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--line);
}
.m-nav__inner {
	max-width: var(--wrap); margin: 0 auto;
	height: var(--nav-h); padding: 0 var(--sp-3);
	display: flex; align-items: center; gap: var(--sp-3);
}
.m-nav__brand { flex: 0 0 auto; }
.m-nav__brand img { max-height: 40px; width: auto; }
.m-nav__title {
	font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
	color: var(--ink); letter-spacing: 0.02em;
}
.m-nav__menu { margin-left: auto; }
.m-menu {
	display: none; list-style: none; margin: 0; padding: 0;
	gap: var(--sp-3);
}
.m-menu li { position: relative; }
.m-menu a {
	font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em;
	color: var(--ink); padding: var(--sp-1) 0;
}
.m-menu a:hover { color: var(--gold); }
.m-nav__actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.m-nav__menu + .m-nav__actions { margin-left: 0; }
.m-nav__search-btn, .m-nav__burger {
	background: none; border: 0; color: var(--ink); padding: var(--sp-1);
	display: inline-flex; align-items: center;
}
.m-nav__burger span {
	display: block; width: 22px; height: 2px; background: var(--ink);
	margin: 4px 0; transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.m-nav[data-open] .m-nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.m-nav[data-open] .m-nav__burger span:nth-child(2) { opacity: 0; }
.m-nav[data-open] .m-nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Dark-mode toggle */
.m-nav__theme {
	background: none; border: 0; color: var(--ink); padding: var(--sp-1);
	display: inline-flex; align-items: center;
}
.m-nav__theme svg { width: 20px; height: 20px; }
.m-nav__theme .m-icon-sun { display: none; }
.m-nav__theme .m-icon-moon { display: inline-flex; }
[data-theme="dark"] .m-nav__theme .m-icon-sun,
:root.is-dark .m-nav__theme .m-icon-sun { display: inline-flex; }
[data-theme="dark"] .m-nav__theme .m-icon-moon,
:root.is-dark .m-nav__theme .m-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .m-nav__theme .m-icon-sun { display: inline-flex; }
	:root:not([data-theme="light"]) .m-nav__theme .m-icon-moon { display: none; }
}

.m-searchbar { border-top: 1px solid var(--line); background: var(--surface); }
.m-searchbar__inner { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-2) var(--sp-3); }

@media (min-width: 960px) {
	.m-nav__menu { margin-left: auto; }
	.m-menu { display: flex; }
	.m-nav__burger { display: none; }
	.m-nav__actions { margin-left: 0; }
}

/* Mobile menu overlay */
@media (max-width: 959px) {
	.m-nav[data-open] .m-menu {
		display: flex; flex-direction: column; gap: var(--sp-3);
		position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
		background: var(--sand); padding: var(--sp-4) var(--sp-3);
		overflow-y: auto;
	}
	.m-nav[data-open] .m-menu a { font-size: 1.5rem; font-family: var(--font-display); }
}

/* ---------- Search form ---------- */
.m-search { display: flex; gap: var(--sp-1); }
.m-search__input {
	flex: 1; padding: 0.8em 1em; font-size: var(--fs-body);
	border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--surface); color: var(--ink);
}
.m-search__input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.m-search__submit {
	background: var(--chrome-bg); color: #fff; border: 0; padding: 0 1.4em;
	border-radius: var(--radius); font-weight: 600;
}
.m-chip {
	display: inline-block; padding: 0.4em 0.9em; margin: 0 0.4em 0.4em 0;
	background: var(--gold-soft); border-radius: 999px;
	font-size: var(--fs-small); color: var(--ink);
}
.m-search-terms { margin-bottom: var(--sp-4); }

/* ---------- Hero ---------- */
.m-hero {
	position: relative; height: min(86vh, 760px);
	color: #fff; overflow: hidden;
}
.m-hero__slide {
	position: absolute; inset: 0;
	display: flex; align-items: flex-end;
	opacity: 0; visibility: hidden;
	transition: opacity 1s var(--ease);
}
.m-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.m-hero__media { position: absolute; inset: 0; }
.m-hero__img { width: 100%; height: 100%; object-fit: cover; }
.m-hero__scrim {
	position: absolute; inset: 0;
	/* Dark from the left so the title reads over the image; bottom fade keeps the meta line legible too. */
	background:
		linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.8) 32%, rgba(0,0,0,0.4) 58%, transparent 85%),
		linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 45%);
}
.m-hero__content {
	position: relative; max-width: 640px; width: 100%;
	padding: var(--sp-6) var(--sp-3);
}
.m-hero__title {
	font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight);
	font-size: var(--fs-h1); color: #fff; max-width: 14ch; margin: 0 0 var(--sp-2);
}
.m-hero__title a { color: #fff; }
.m-hero__title a:hover { color: var(--gold-soft); }
.m-hero__meta { font-size: var(--fs-small); color: rgba(255,255,255,0.75); letter-spacing: 0.04em; }

/* ---------- Cards ---------- */
.m-card { background: transparent; }
.m-card__media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.m-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.m-card__img--empty { background: var(--gold-soft); display: block; }
.m-card:hover .m-card__img { transform: scale(1.04); }
.m-card__body { padding: var(--sp-2) 0; }
.m-card__title {
	font-size: var(--fs-h3); margin: 0.2em 0 0.3em;
	transition: color var(--dur);
}
.m-card:hover .m-card__title { color: var(--gold); }
.m-card__excerpt { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 0.6em; }
.m-card__meta { font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.m-card--large .m-card__media { aspect-ratio: 16 / 10; }
.m-card--large .m-card__title { font-size: var(--fs-h1); }
.m-card--compact .m-card__media { aspect-ratio: 3 / 2; }

/* Featured grid: 1 large + supporting */
.m-featured-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 960px) {
	.m-featured-grid { grid-template-columns: 1.4fr 1fr; grid-auto-rows: min-content; }
	.m-featured-grid .m-card--large { grid-row: span 2; }
}

/* Category section: lead column (story + ad) | support column (stories) */
.m-section--category .m-section__grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.m-section--category .m-section__lead,
.m-section--category .m-section__support { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 960px) {
	.m-section--category .m-section__grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
}

/* ---------- Feature banner ---------- */
.m-feature {
	position: relative; color: #fff; margin: var(--sp-7) 0;
	background: var(--chrome-bg) var(--feature-bg, none) center/cover no-repeat;
	background-blend-mode: multiply;
}
.m-feature__inner {
	max-width: 760px; margin: 0 auto;
	padding: var(--sp-7) var(--sp-3); text-align: center;
}
.m-feature__title { font-size: var(--fs-display); color: #fff; }
.m-feature__title a { color: #fff; }
.m-feature__excerpt { color: rgba(255,255,255,0.88); margin-bottom: var(--sp-3); }

/* ---------- Destinations ---------- */
.m-tiles { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 700px) { .m-tiles { grid-template-columns: repeat(3, 1fr); } }
.m-tile { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 4; }
.m-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.m-tile:hover .m-tile__img { transform: scale(1.06); }
.m-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--overlay-strong), transparent 60%); }
.m-tile__label {
	position: absolute; left: var(--sp-2); bottom: var(--sp-2); z-index: 1;
	color: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
}

/* ---------- Video ---------- */
.m-video { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 960px) { .m-video { grid-template-columns: 2fr 1fr; } }
.m-video__embed { position: relative; aspect-ratio: 16 / 9; }
.m-video__embed :is(iframe, video) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.m-video__title { font-size: var(--fs-h3); margin-top: var(--sp-2); }
.m-video__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.m-video__item a { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-2); align-items: center; }
.m-video__thumb { border-radius: var(--radius); aspect-ratio: 16/10; object-fit: cover; }

/* ---------- Newsletter ---------- */
.m-newsletter { background: var(--chrome-bg); color: #fff; }
.m-newsletter__inner { max-width: 640px; margin: 0 auto; padding: var(--sp-7) var(--sp-3); text-align: center; }
.m-newsletter__title { color: #fff; font-size: var(--fs-h1); }
.m-newsletter__sub { color: rgba(255,255,255,0.8); margin-bottom: var(--sp-3); }
.m-newsletter__form { display: flex; gap: var(--sp-1); max-width: 460px; margin: 0 auto; }
.m-newsletter__form input {
	flex: 1; padding: 0.9em 1em; border: 1px solid rgba(255,255,255,0.3);
	background: rgba(255,255,255,0.06); color: #fff; border-radius: var(--radius);
}
.m-newsletter__form input::placeholder { color: rgba(255,255,255,0.5); }
.m-newsletter__note { color: rgba(255,255,255,0.5); font-size: var(--fs-small); }

/* ---------- Article ---------- */
.m-progress { position: sticky; top: var(--nav-h); height: 3px; background: transparent; z-index: 90; }
.m-progress__bar { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.1s linear; }

.m-article__hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; color: var(--ink); }
.m-article__hero.has-image { color: #fff; min-height: min(80vh, 720px); }
.m-article__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-article__hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--overlay-strong), transparent 65%); }
.m-article__hero-content { position: relative; max-width: var(--wrap); width: 100%; margin: 0 auto; padding: var(--sp-6) var(--sp-3); }
.m-article__title { font-size: var(--fs-display); max-width: 20ch; color: inherit; }
.m-article__deck { font-size: 1.3rem; max-width: 56ch; opacity: 0.92; }
.m-article__byline { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); }
.m-article__avatar { border-radius: 50%; }

.m-article__layout { max-width: var(--wrap); margin: var(--sp-5) auto; padding: 0 var(--sp-3); display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 960px) { .m-article__layout { grid-template-columns: 64px minmax(0, var(--measure)); justify-content: center; gap: var(--sp-5); } }

.m-share { display: flex; gap: var(--sp-1); }
@media (min-width: 960px) { .m-share { position: sticky; top: calc(var(--nav-h) + var(--sp-3)); flex-direction: column; height: max-content; } }
.m-share__btn {
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
	color: var(--ink); font-weight: 700; font-size: var(--fs-small);
	transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.m-share__btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

.m-article__body { font-size: 1.2rem; line-height: 1.75; color: var(--ink-soft); max-width: var(--measure); }
.m-article__body > * { margin-bottom: var(--sp-3); }
.m-article__body p { margin: 0 0 var(--sp-3); }
.m-article__body h2 { font-size: var(--fs-h2); margin-top: var(--sp-5); }
.m-article__body h3 { font-size: var(--fs-h3); margin-top: var(--sp-4); }
.m-article__body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.m-article__body img, .m-article__body figure { border-radius: var(--radius); }
.m-article__body .alignfull, .m-fullbleed.alignfull {
	width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0;
}
.m-article__body blockquote, .m-pullquote {
	border-left: 3px solid var(--gold); padding-left: var(--sp-3); margin: var(--sp-5) 0;
	font-family: var(--font-display); font-size: 1.6rem; line-height: 1.35; color: var(--ink);
}
.m-pullquote cite { display: block; font-family: var(--font-body); font-size: var(--fs-small); font-style: normal; color: var(--gold); margin-top: var(--sp-1); }
.m-article__body figcaption { font-size: var(--fs-small); color: var(--ink-soft); text-align: center; margin-top: var(--sp-1); }
.m-article__tags a { display: inline-block; font-size: var(--fs-small); color: var(--gold); margin-right: var(--sp-1); }

/* Author */
.m-author {
	max-width: var(--wrap); margin: var(--sp-6) auto; padding: var(--sp-4) var(--sp-3);
	display: flex; gap: var(--sp-3); align-items: flex-start;
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.m-author__avatar { border-radius: 50%; flex: 0 0 auto; }
.m-author__name { font-size: var(--fs-h3); margin: 0.2em 0; }
.m-author__bio { font-size: var(--fs-small); margin: 0 0 0.6em; }
.m-author__more { font-weight: 600; color: var(--gold); }

/* Archive / pagination / misc */
.m-pagination { margin-top: var(--sp-5); text-align: center; }
.m-pagination .page-numbers { display: inline-block; padding: 0.5em 0.9em; margin: 0 0.2em; border: 1px solid var(--line); border-radius: var(--radius); }
.m-pagination .current { background: var(--chrome-bg); color: #fff; border-color: var(--chrome-bg); }
.m-empty { text-align: center; padding: var(--sp-6) 0; color: var(--ink-soft); }

/* ---------- Magazine issue grid ---------- */
.m-magazine__item { display: block; }
.m-magazine__cover {
	display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden;
	border-radius: var(--radius); background: var(--gold-soft);
}
.m-magazine__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.m-magazine__img--empty { display: block; width: 100%; height: 100%; }
.m-magazine__item:hover .m-magazine__img { transform: scale(1.04); }
.m-magazine__title {
	display: block; margin-top: var(--sp-1); font-size: var(--fs-small); font-weight: 600; color: var(--ink);
}
.m-section__desc { font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- Ads (direct sponsor banners) ---------- */
.m-ad { max-width: var(--wrap); margin: var(--sp-6) auto; padding: 0 var(--sp-3); text-align: center; }
.m-ad__label {
	display: block; font-size: var(--fs-label); letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--ink-soft); opacity: 0.55; margin-bottom: var(--sp-1);
}
.m-ad__inner {
	min-height: 120px; /* reserve space to avoid layout shift before the image loads */
	display: flex; align-items: center; justify-content: center;
	background: var(--gold-soft); border-radius: var(--radius); overflow: hidden;
}
[data-theme="dark"] .m-ad__inner,
:root.is-dark .m-ad__inner { background: var(--surface); }
.m-ad img { display: block; max-width: 100%; height: auto; }
.m-ad a { display: inline-flex; }
.m-article__body .m-ad { padding: 0; margin: var(--sp-5) auto; } /* in-article slot sits in the text column */

/* Square ad inside a category section — sits in the left column, below the lead story */
.m-section__grid .m-ad { margin: 0; padding: 0; max-width: none; }
.m-section__grid .m-ad--square { max-width: 600px; }
.m-ad--square .m-ad__inner { aspect-ratio: 1 / 1; min-height: 0; }
.m-ad--square img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Footer ---------- */
/* White surface + dark ink in light mode, black surface + light ink in dark mode. */
.m-footer { background: var(--surface); color: var(--ink-soft); margin-top: var(--sp-7); border-top: 1px solid var(--line); }
.m-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-6) var(--sp-3); display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .m-footer__inner { grid-template-columns: 1fr 1fr; align-items: start; } }
.m-footer__brand img { max-height: 40px; width: auto; }
.m-footer__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.m-footer__tagline { font-size: var(--fs-small); max-width: 40ch; }
.m-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
@media (min-width: 700px) { .m-footer__nav { justify-self: end; } }
.m-footer__menu a { color: var(--ink); font-size: var(--fs-small); }
.m-footer__menu a:hover { color: var(--gold); }
.m-footer__bar { border-top: 1px solid var(--line); }
.m-footer__bar p { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); color: var(--ink-soft); }

/* Logo turns white in dark mode (header + footer), whatever its native colors are. */
[data-theme="dark"] .m-nav__brand img,
[data-theme="dark"] .m-footer__brand img,
:root.is-dark .m-nav__brand img,
:root.is-dark .m-footer__brand img {
	filter: brightness(0) invert(1);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .m-nav__brand img,
	:root:not([data-theme="light"]) .m-footer__brand img {
		filter: brightness(0) invert(1);
	}
}