/* MythPost — style.css (locked design: navy #122642, crimson #B21C28, ink #181A1E, gray #646C76, footer #0D1D32) */
/* Font paths are relative to this file (assets/css/) so the whole site tree also works when served from a subpath preview. */
@font-face { font-family: "Great Vibes"; src: url("../fonts/GreatVibes.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay-800.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --navy: #122642; --crimson: #B21C28; --ink: #181A1E; --gray: #646C76;
  --line: #E2E5E9; --footer: #0D1D32; --verdict-bg: #FDF3F1;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: var(--ink); background: #fff; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--crimson); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.site-header { background: #fff; text-align: center; padding: 18px 16px 12px; position: relative; }
.wordmark { font-family: "Great Vibes", cursive; font-size: 58px; line-height: 1.15; font-weight: 400; display: inline-block; }
.wordmark .wm-a { color: var(--navy); }
.wordmark .wm-b { color: var(--crimson); }
.tagline { font-size: 11px; letter-spacing: 3.5px; color: var(--gray); text-transform: uppercase; margin-top: 2px; font-weight: 500; }
.header-rule { height: 3px; background: var(--crimson); }
.main-nav { background: var(--navy); }
.main-nav .wrap { display: flex; align-items: center; justify-content: center; }
.main-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
.main-nav a { display: block; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; padding: 13px 18px; }
.main-nav a:hover { color: #F2A0A6; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; padding: 13px 18px; cursor: pointer; font-family: inherit; }
.nav-toggle .nt-icon { font-size: 15px; line-height: 1; letter-spacing: 0; }

/* ---------- Sections & cards ---------- */
main { padding: 28px 0 48px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 36px 0 18px; border-bottom: 2px solid var(--line); padding-bottom: 10px; }
.section-head h2 { font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--crimson); font-weight: 700; }
.section-head a { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
/* Homepage category bands: each category is one unmistakable block —
   full-bleed navy header bar (name + story count + view-all) over its grid,
   alternating white / tinted body so sections never blend while scrolling. */
.cat-band { margin: 46px -16px 0; padding: 0 16px 30px; background: #fff; }
.cat-band:nth-of-type(even) { background: #F4F6FA; }
.cat-band-head { display: flex; align-items: center; gap: 14px; background: var(--navy); margin: 0 -16px 22px; padding: 15px 20px; border-top: 4px solid var(--crimson); }
.cat-band-head h2 { font-family: "Playfair Display", Georgia, serif; font-size: 27px; font-weight: 800; letter-spacing: .4px; text-transform: none; line-height: 1.1; }
.cat-band-head h2 a { color: #fff; }
.cat-band-head .cb-count { color: #B9C6D8; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; }
.cat-band-head .cb-view { margin-left: auto; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; background: var(--crimson); padding: 8px 14px; border-radius: 4px; }
@media (max-width: 720px) {
  .cat-band-head h2 { font-size: 23px; }
  .cat-band-head .cb-count { display: none; }
}
.hero-card { margin-top: 6px; }
.hero-media { position: relative; }
.hero-media img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.badge { position: absolute; top: 14px; left: 14px; background: var(--crimson); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; padding: 6px 12px; }
.badge.navy { background: var(--navy); }
.hero-card h2, .hero-card .hero-title { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 40px; line-height: 1.2; margin-top: 18px; }
.hero-card h2 a, .hero-card .hero-title a { color: var(--ink); }
.hero-card h2 a:hover, .hero-card .hero-title a:hover { color: var(--crimson); }
.excerpt { color: #3C424B; font-size: 17px; margin-top: 10px; max-width: 820px; }
.meta { color: var(--gray); font-size: 13.5px; margin-top: 10px; }
.meta a { color: var(--gray); font-weight: 500; }
.meta a:hover { color: var(--crimson); }
.cat-label { color: var(--crimson); font-size: 12.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
.cat-label a { color: var(--crimson); }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; }
.card img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.card .cat-label { display: block; margin-top: 12px; }
.card h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 20px; line-height: 1.3; margin-top: 6px; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--crimson); }
.card .meta { margin-top: 7px; font-size: 13px; }

.trending-list { list-style: none; counter-reset: trend; }
.trending-list li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.trending-list li:last-child { border-bottom: 0; }
.trending-list .num { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 30px; line-height: 1.1; color: var(--crimson); min-width: 38px; padding-top: 2px; }
.trending-list .ttext { min-width: 0; padding-top: 2px; }
.trending-list a { font-weight: 700; font-size: 17.5px; color: var(--ink); line-height: 1.4; }
.trending-list a:hover { color: var(--crimson); }
.tthumb { flex: none; display: block; }
.tthumb img { display: block; object-fit: cover; }
.trending-list .tthumb img { width: 84px; aspect-ratio: 1 / 1; height: auto; border-radius: 8px; }
.trending-list .tcat { display: block; font-size: 11.5px; color: var(--gray); letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }

/* ---------- Article ---------- */
.breadcrumb { font-size: 13px; color: var(--gray); margin-bottom: 16px; }
.breadcrumb a { color: var(--gray); }
.breadcrumb a:hover { color: var(--crimson); }
.breadcrumb .sep { margin: 0 7px; }
.article-head h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 42px; line-height: 1.18; margin-top: 10px; }
.article-head .dek { font-size: 18.5px; color: #3C424B; margin-top: 14px; line-height: 1.55; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--gray); font-size: 14px; margin: 16px 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.byline .by-name { color: var(--ink); font-weight: 700; }
.article-hero img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.article-body { max-width: 720px; font-size: 18px; line-height: 1.78; color: #23262B; }
.article-body p { margin: 0 0 22px; }
.article-body h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 29px; line-height: 1.3; color: var(--ink); margin: 36px 0 14px; }
.article-body blockquote { border-left: 4px solid var(--crimson); padding: 6px 0 6px 22px; margin: 30px 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 23px; line-height: 1.45; color: var(--navy); }
.verdict { background: var(--verdict-bg); border: 2px solid var(--crimson); border-radius: 12px; padding: 24px 26px; margin: 34px 0; max-width: 720px; }
.verdict .v-label { color: var(--crimson); font-size: 13px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
.verdict .v-text { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 34px; margin: 6px 0 8px; color: var(--ink); }
.verdict p { font-size: 16.5px; color: #3C424B; line-height: 1.6; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 6px; max-width: 720px; }
.tags span { background: #F1F3F6; color: var(--navy); font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 999px; }
.share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 8px; }
.share .share-label { font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gray); margin-right: 2px; }
.share a { border: 1.5px solid var(--navy); color: var(--navy); font-size: 13.5px; font-weight: 700; padding: 7px 16px; border-radius: 999px; }
.share a:hover { background: var(--navy); color: #fff; }

/* ---------- Article two-column layout + sidebar (desktop >=1024px) ---------- */
.article-layout { display: block; }
.sidebar { margin-top: 44px; }
.side-box { border: 1px solid var(--line); padding: 20px 22px; margin-bottom: 26px; }
.side-box h3 { font-size: 14px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--crimson); margin-bottom: 10px; }
.side-trending { list-style: none; }
.side-trending li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.side-trending li:last-child { border-bottom: 0; padding-bottom: 2px; }
.side-trending .num { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 21px; line-height: 1.1; color: var(--crimson); min-width: 24px; padding-top: 2px; }
.side-trending .tthumb img { width: 72px; aspect-ratio: 1 / 1; height: auto; border-radius: 6px; }
.side-trending li > a:last-child { min-width: 0; padding-top: 2px; }
.side-trending a { font-weight: 700; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.side-trending a:hover { color: var(--crimson); }
.news-box { background: var(--navy); border: 0; color: #DCE5F0; }
.news-box h3 { color: #fff; }
.news-box p { font-size: 14.5px; line-height: 1.6; margin-bottom: 14px; }
.news-box .nl-form { flex-direction: column; max-width: none; margin: 0; }
.news-box .nl-form button { width: 100%; }
.news-box .soon { font-size: 12.5px; color: #93A3B8; margin: 10px 0 0; }

/* ---------- Newsletter (The MythPost Letter) ---------- */
.newsletter { background: var(--navy); color: #DCE5F0; border-radius: 12px; padding: 36px 38px; margin: 44px 0 12px; text-align: center; }
.newsletter .nl-eyebrow { color: #F07882; font-size: 12.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
.newsletter h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 32px; line-height: 1.25; color: #fff; margin-top: 10px; }
.newsletter .nl-copy { font-size: 16px; line-height: 1.6; max-width: 560px; margin: 12px auto 0; }
.nl-form { display: flex; gap: 10px; max-width: 520px; margin: 22px auto 0; }
.nl-form input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 6px; padding: 13px 16px; font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; }
.nl-form button { flex: none; background: var(--crimson); color: #fff; border: 0; border-radius: 6px; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; padding: 13px 22px; cursor: pointer; }
.nl-form button:hover { background: #CE2733; }
.newsletter .nl-note { font-size: 12.5px; color: #93A3B8; margin-top: 14px; }
@media (min-width: 1024px) {
  .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
  .sidebar { margin-top: 0; position: sticky; top: 20px; }
}

/* ---------- Lite YouTube embed (click-to-load, keeps pages fast) ---------- */
.watch { max-width: 720px; margin: 34px 0; }
.watch h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 26px; margin-bottom: 14px; }
.lite-video { position: relative; aspect-ratio: 16 / 9; height: auto; background: #000; cursor: pointer; overflow: hidden; border-radius: 8px; }
.lite-video img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.lite-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lite-video .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 52px; background: var(--crimson); border-radius: 12px; pointer-events: none; }
.lite-video .play-btn::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; }
.lite-video:hover .play-btn { background: var(--navy); }
.lite-video .v-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; color: #fff; font-size: 14.5px; font-weight: 500; background: linear-gradient(transparent, rgba(0,0,0,.72)); pointer-events: none; }

/* ---------- Static / policy pages ---------- */
.page-head h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 38px; margin-top: 8px; }
.hub-head h1 { font-size: 48px; }
.hub-count { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); }
.hub-feature { margin: 28px 0 4px; }
.prose { max-width: 780px; font-size: 16.5px; line-height: 1.75; color: #2A2E34; }
.prose p { margin: 0 0 18px; }
.prose h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 25px; color: var(--ink); margin: 32px 0 12px; }
.prose ul { margin: 0 0 18px 22px; }
.prose li { margin-bottom: 8px; }
.founder-box { display: flex; gap: 22px; align-items: flex-start; background: #F6F8FB; border: 1px solid var(--line); border-left: 4px solid var(--crimson); padding: 24px 26px; margin: 30px 0; max-width: 780px; }
.founder-box .f-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.founder-box h2 { font-family: "Playfair Display", Georgia, serif; font-size: 24px; margin-bottom: 4px; }
.founder-box .f-title { color: var(--crimson); font-weight: 700; font-size: 14px; letter-spacing: .4px; margin-bottom: 10px; }
.founder-box p { font-size: 15.5px; line-height: 1.65; color: #3C424B; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: #C6CFDB; margin-top: 20px; }
.site-footer .wrap { padding-top: 38px; padding-bottom: 30px; text-align: center; }
.site-footer .wordmark { font-size: 46px; }
.site-footer .wordmark .wm-a { color: #fff; }
.site-footer .wordmark .wm-b { color: #F07882; }
.site-footer .tagline { color: #93A3B8; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; }
.footer-links a { color: #C6CFDB; font-size: 13.5px; font-weight: 500; }
.footer-links a:hover { color: #fff; }
.footer-cats { margin-top: 14px; }
.footer-cats a { font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; font-size: 12.5px; }
.founder-line { margin-top: 24px; padding-top: 20px; border-top: 1px solid #22344E; font-size: 14.5px; color: #E7EDF5; }
.founder-line a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.built-by { margin-top: 14px; font-size: 13px; color: #7E8FA6; }
.built-by a { color: #C6CFDB; font-weight: 600; }
.built-by a:hover { color: #fff; }
.copyright { margin-top: 8px; font-size: 13px; color: #7E8FA6; }

.notfound { text-align: center; padding: 60px 0 30px; }
.notfound .big { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 84px; color: var(--navy); }
.notfound h1 { font-family: "Playfair Display", Georgia, serif; font-size: 30px; margin: 6px 0 12px; }
.notfound p { color: var(--gray); max-width: 520px; margin: 0 auto 22px; }
.btn { display: inline-block; background: var(--crimson); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; padding: 12px 26px; border-radius: 999px; }
.btn:hover { background: var(--navy); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .hero-card h2, .hero-card .hero-title { font-size: 31px; }
  .article-head h1 { font-size: 33px; }
  .hub-head h1 { font-size: 36px; }
}
@media (max-width: 720px) {
  /* Mobile nav: the navy bar (toggle) stays pinned at the top of the nav;
     opening it drops a full-width panel BELOW the bar — links stacked,
     left-aligned, even padding, hairline separators. */
  .main-nav .wrap { flex-direction: column; align-items: stretch; padding: 0; }
  .nav-toggle { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; margin: 0; padding: 13px 16px; }
  .main-nav ul { display: none; flex-direction: column; flex-wrap: nowrap; width: 100%; border-top: 1px solid rgba(255, 255, 255, .16); }
  .main-nav ul.open { display: flex; }
  .main-nav li { border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .main-nav li:last-child { border-bottom: 0; }
  .main-nav a { padding: 13px 20px; text-align: left; }
  .wordmark { font-size: 46px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .newsletter { padding: 28px 20px; }
  .newsletter h2 { font-size: 26px; }
  .nl-form { flex-direction: column; }
  .nl-form button { width: 100%; }
  .card h3 { font-size: 21px; }
  .founder-box { flex-direction: column; }
  .verdict .v-text { font-size: 28px; }
}