/* DB Women — Editorial Blog Styles */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; height: auto; }

:root {
  --gold: #C09463;
  --gold-deep: #9A6F3F;
  --accent: #5C1A1B;
  --accent-soft: #7A2A2B;
  --ink: #1F1714;
  --paper: #FAF6EE;
  --paper-warm: #F2EADB;
  --rule: rgba(192,148,99,0.35);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-size: 17px;
  --density: 1;

  --max-w: 1280px;
  --max-w-narrow: 720px;

  --pad-x: clamp(20px, 5vw, 80px);
}

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "calt";
}
h1, h2, h3, h4, p, blockquote, .card-title, .article-title, .hero-title,
.cat-hero-title, .ep-title, .modal-title, .letter-title, .letters-title {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Subtle paper-grain texture on body */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(192,148,99,0.07), transparent 60%),
    radial-gradient(900px 700px at 110% 30%, rgba(92,26,27,0.04), transparent 60%);
}

.site { position: relative; z-index: 1; min-height: 100vh; }
.site.is-playing { padding-bottom: 96px; }
@media (max-width: 900px) {
  .site.is-playing { padding-bottom: 168px; }
}

/* ───────── Typography helpers ───────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow .dot { color: var(--gold); font-size: 9px; line-height: 1; }
.eyebrow-sm { font-size: 10px; letter-spacing: 0.14em; }
.eyebrow.on-dark { color: var(--gold); }

/* ───────── Masthead ───────── */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 0.5px solid var(--rule);
  transition: box-shadow .25s ease, background .25s ease;
}
.masthead.scrolled {
  box-shadow: 0 1px 0 var(--rule), 0 8px 24px rgba(31,23,20,0.04);
}
.masthead-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px var(--pad-x) 10px;
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.masthead-center { display: flex; justify-content: center; }
.masthead-right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

/* Hamburger + mobile search button */
.m-icon {
  display: none;
  appearance: none; border: 0; background: transparent;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink);
  border-radius: 6px;
}
.m-icon:hover { background: rgba(192,148,99,0.12); }
.m-burger { justify-self: start; flex-direction: column; gap: 4px; padding: 10px 8px; }
.m-burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
}
.search-mobile { display: none; padding: 0 var(--pad-x) 12px; }
.search-mobile .search { width: 100%; min-width: 0; }

.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
}
.brand-topline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.brand-mark {
  width: clamp(34px, 4.4vw, 54px);
  height: clamp(34px, 4.4vw, 54px);
}
.brand-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.logo {
  display: inline-flex;
  text-decoration: none;
  color: var(--ink);
  align-items: center;
}

/* ── Stacked: mark on top, two-line wordmark below — fully centered */
.logo-stacked {
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.logo-stacked .logo-mark { width: 56px; height: 56px; }
.logo-stacked .logo-text {
  display: flex; flex-direction: column;
  align-items: center;
  line-height: 1; gap: 4px;
}
.logo-stacked .logo-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
}
.logo-stacked .logo-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;
}

/* ── Inline: mark left + stacked wordmark right */
.logo-inline {
  flex-direction: row;
  gap: 14px;
  align-items: center;
}
.logo-inline .logo-mark { width: 44px; height: 44px; }
.logo-inline .logo-text {
  display: flex; flex-direction: column;
  line-height: 1; gap: 4px;
  text-align: left;
}
.logo-inline .logo-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
}
.logo-inline .logo-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;
}

/* ── Wordmark only: pure typography, centered */
.logo-wordmark {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.logo-wordmark .logo-text {
  display: flex; flex-direction: column;
  align-items: center;
  line-height: 1; gap: 5px;
}
.logo-wordmark .logo-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--gold-deep);
  letter-spacing: 0.04em;
}
.logo-wordmark .logo-name {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;
  border-bottom: 0.5px solid var(--rule);
  padding-bottom: 6px;
  margin-top: 2px;
}

/* When the stacked logo is in the masthead, drop the search bar bottom-aligned
   so it doesn't visually fight the bigger logo */
.masthead--stacked .masthead-bar { align-items: center; padding-top: 12px; padding-bottom: 10px; }
.masthead--stacked .masthead-right { padding-bottom: 0; }

.search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,0.4);
  color: var(--gold-deep);
  min-width: 220px;
  transition: border-color .2s, background .2s;
}
.search:focus-within { border-color: var(--gold); background: rgba(255,255,255,0.7); }
.search input {
  border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--ink);
  font-size: 13px;
  width: 100%;
}
.search input::placeholder { color: color-mix(in oklab, var(--ink) 50%, transparent); }

.masthead-nav {
  display: flex; gap: 24px;
  padding: 10px var(--pad-x) 12px;
  max-width: var(--max-w); margin: 0 auto;
  align-items: center;
  border-top: 0.5px solid var(--rule);
  flex-wrap: wrap;
}
.masthead-nav-links {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.nav-spacer { flex: 1; }
.nav-link {
  appearance: none; background: none; border: 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 2px;
  position: relative;
  transition: color .15s;
}
.nav-link-home {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  color: var(--gold-deep);
}
.nav-link:hover { color: var(--accent); }
.nav-link.active { color: var(--accent); }
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--gold);
}
.nav-link--ghost {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-family: var(--font-display);
  color: var(--gold-deep);
}

.nav-search {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: clamp(220px, 28vw, 320px);
  padding: 7px 8px 7px 13px;
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
  color: var(--gold-deep);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.nav-search:focus-within {
  border-color: var(--gold);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 0 0 3px rgba(192,148,99,0.10);
}
.nav-search-icon { color: var(--gold-deep); opacity: 0.85; }
.nav-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.nav-search input::placeholder {
  color: color-mix(in oklab, var(--ink) 42%, transparent);
  font-style: italic;
}
.search-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gold-deep);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.search-clear:hover { background: rgba(192,148,99,0.16); color: var(--accent); }
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ───────── Section heads ───────── */
.sec-head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px var(--pad-x) 24px;
  text-align: center;
}
.sec-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.08;
  margin: 12px 0 8px;
  letter-spacing: -0.005em;
}
.sec-kicker {
  max-width: 560px; margin: 6px auto 0;
  font-family: var(--font-display);
  font-style: italic;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
  font-size: 19px;
  line-height: 1.45;
}

/* ───────── Brand mark + motifs ───────── */
.mark { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.motif { z-index: 0; }
.motif .mark { display: block; }
/* Sections that host motifs become positioning contexts and clip overflow */
.hero, .letter, .letters-slab, .site-foot { position: relative; overflow: hidden; }
.hero, .letter, .letters-slab, .site-foot > .foot-grid,
.hero > .hero-grid, .letter > .letter-inner, .letters-slab > .letters-inner { position: relative; z-index: 1; }
.site-foot { overflow: hidden; }
.foot-grid, .foot-base { position: relative; z-index: 1; }

/* ───────── Rule + asterism ornaments ───────── */
.rule {
  display: flex; align-items: center; gap: 12px;
  max-width: 360px; margin: 24px auto;
  opacity: var(--ornaments, 1);
}
.rule-wide { max-width: var(--max-w); padding: 0 var(--pad-x); }
.rule-line { flex: 1; height: 0; border-top: 0.5px solid var(--rule); }
.rule-mark {
  flex: 0 0 auto;
  opacity: 0.9;
}
.asterism {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin: 36px 0;
  opacity: var(--ornaments, 1);
}
.asterism .mark { opacity: 0.8; }

/* ───────── Hero ───────── */
.hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px var(--pad-x) 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.hero-text { display: flex; flex-direction: column; gap: 14px; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6.2vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 8px 0 2px;
  cursor: pointer;
  transition: color .2s;
  text-wrap: pretty;
}
.hero-title:hover { color: var(--accent); }
.hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: color-mix(in oklab, var(--ink) 75%, transparent);
  line-height: 1.35;
  margin: 0 0 6px;
}
.hero-dek {
  font-size: calc(var(--font-size) * 1.05);
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--ink) 60%, transparent);
  margin-top: 8px;
}
.byline em { color: var(--ink); font-style: italic; font-family: var(--font-display); font-size: 14px; letter-spacing: 0; }
.byline-dot { color: var(--gold); }
.byline-center { justify-content: center; }

.btn-read {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  margin-top: 14px;
  background: var(--accent);
  color: var(--paper);
  border: 0;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 0;
  position: relative;
  transition: background .2s, transform .2s;
}
.btn-read::before {
  content: ""; position: absolute; inset: -3px;
  border: 0.5px solid var(--gold);
  pointer-events: none;
  opacity: var(--ornaments, 1);
}
.btn-read:hover { background: var(--accent-soft); }
.btn-read:hover .arr { transform: translateX(4px); }
.btn-read .arr { transition: transform .2s; }

/* ───────── Plate (image placeholder) ───────── */
.plate { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.plate-art {
  position: relative;
  width: 100%;
  aspect-ratio: var(--plate-ratio, 4 / 3);
  border: 0.5px solid var(--rule);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.plate-art.has-image {
  background: var(--paper-warm);
}
.plate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  z-index: 0;
}
.plate-art.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(31,23,20,0.02), rgba(31,23,20,0.16)),
    repeating-linear-gradient(135deg, rgba(250,246,238,0.08) 0 1px, transparent 1px 18px);
  mix-blend-mode: multiply;
  z-index: 1;
}
.plate-glyph {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: 0.6;
  user-select: none;
}
.bracket {
  position: absolute; width: 18px; height: 18px;
  border-color: var(--gold);
  border-style: solid; border-width: 0;
  opacity: var(--ornaments, 1);
  z-index: 2;
}
.bracket.tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.bracket.tr { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; }
.bracket.bl { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; }
.bracket.br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }

.plate-cap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ───────── Editor's letter ───────── */
.letter {
  background: var(--paper-warm);
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  padding: 56px var(--pad-x);
}
.letter-inner {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  text-align: center;
}
.letter-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  margin: 14px 0 18px;
}
.letter-title em { color: var(--accent); font-style: italic; }
.letter p {
  max-width: 60ch; margin: 0 auto 12px;
  font-size: calc(var(--font-size) * 1.02);
  line-height: 1.7;
}
.letter-sign {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-deep);
  margin-top: 18px;
}

/* ───────── Submit story teaser ───────── */
.submit-story {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px var(--pad-x);
  text-align: center;
  border-bottom: 0.5px solid var(--rule);
}
.submit-story-copy {
  max-width: 58ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.submit-story-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  margin: 6px 0 4px;
  color: var(--accent);
  letter-spacing: 0;
  text-wrap: balance;
}
.submit-story-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--ink) 78%, transparent);
}
.submit-story-cta {
  appearance: none;
  border: 0;
  margin-top: 14px;
  background: var(--accent);
  color: var(--paper);
  padding: 14px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: background .15s, transform .15s;
}
.submit-story-cta::before {
  content: ""; position: absolute; inset: -3px;
  border: 0.5px solid var(--gold);
  pointer-events: none;
  opacity: var(--ornaments, 1);
}
.submit-story-cta:hover { background: var(--accent-soft); }

/* ───────── Submit story modal ───────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  animation: backdrop-in .2s ease-out;
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-card {
  position: relative;
  width: min(620px, 100%);
  max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  box-shadow: 0 30px 80px rgba(20,14,12,0.28);
  padding: 28px clamp(20px, 4vw, 40px) clamp(20px, 4vw, 36px);
  animation: modal-in .22s ease-out;
  box-sizing: border-box;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 0.5px solid var(--gold);
  opacity: calc(0.4 * var(--ornaments, 1));
  pointer-events: none;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.modal-head-text { flex: 1; min-width: 0; }
.modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 8px 0 0;
  color: var(--accent);
  text-wrap: balance;
}
.modal-close {
  appearance: none;
  border: 0.5px solid var(--rule);
  background: transparent;
  color: var(--gold-deep);
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.modal-close:hover { background: var(--paper-warm); color: var(--accent); border-color: var(--gold); }
.modal-lede {
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--ink) 75%, transparent);
  position: relative;
  z-index: 1;
}
.modal-thanks {
  text-align: center;
  padding: 12px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.modal-thanks h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  margin: 4px 0 0;
  color: var(--accent);
}
.modal-thanks p {
  margin: 0;
  font-size: 15px;
  color: color-mix(in oklab, var(--ink) 75%, transparent);
  max-width: 36ch;
}
.modal-thanks-btn {
  margin-top: 14px;
  appearance: none;
  border: 0.5px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 22px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.modal-thanks-btn:hover { border-color: var(--gold); color: var(--accent); background: var(--paper-warm); }

/* ───────── Story form (used inside modal) ───────── */
.story-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 16px;
  position: relative;
  z-index: 1;
  max-width: 100%;
  box-sizing: border-box;
}
.story-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.story-form label.full { grid-column: 1 / -1; }
.story-form label .opt {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: color-mix(in oklab, var(--ink) 50%, transparent);
  margin-left: 6px;
}
.story-form input,
.story-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 0.5px solid var(--rule);
  background: color-mix(in oklab, var(--paper) 86%, white);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  padding: 11px 12px;
  outline: 0;
  transition: border-color .15s, background .15s;
  font-family: var(--font-body);
}
.story-form textarea {
  resize: vertical;
  min-height: 78px;
  line-height: 1.55;
}
.story-form input:focus,
.story-form textarea:focus {
  border-color: var(--gold);
  background: var(--paper);
}
.file-field input[type="file"] {
  padding: 9px 8px;
  font-size: 13px;
  background: var(--paper);
}
.file-field input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 0.5px solid var(--rule);
  background: var(--paper-warm);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
}
.story-form-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.story-form-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.form-hint, .form-note {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: color-mix(in oklab, var(--ink) 60%, transparent);
}
.form-note { color: var(--accent); }
.btn-ghost {
  appearance: none;
  background: transparent;
  border: 0.5px solid var(--rule);
  color: var(--ink);
  padding: 11px 18px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--accent); background: var(--paper-warm); }
.submit-story-btn {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: var(--paper);
  padding: 11px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.submit-story-btn:hover { background: var(--accent-soft); }

/* ───────── Category hero ───────── */
.cat-hero {
  position: relative;
  overflow: hidden;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--pad-x) clamp(28px, 4vw, 56px);
  text-align: center;
}
.cat-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cat-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 1;
  letter-spacing: -0.018em;
  margin: 14px 0 18px;
  color: var(--ink);
  text-wrap: balance;
}
.cat-hero-desc {
  margin: 18px 0 14px;
  max-width: 56ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: color-mix(in oklab, var(--ink) 75%, transparent);
}
.cat-hero-meta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ───────── Active filter chips ───────── */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 var(--pad-x) 12px;
}
.filter-chip {
  appearance: none;
  background: var(--paper-warm);
  border: 0.5px solid var(--gold);
  color: var(--accent);
  padding: 7px 12px 7px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.filter-chip:hover { background: color-mix(in oklab, var(--gold) 18%, var(--paper-warm)); }
.filter-chip-lbl {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.filter-chip-val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
}
.filter-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(192,148,99,0.22);
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

/* ───────── Archive grid ───────── */
.archive { max-width: var(--max-w); margin: 0 auto; padding-bottom: 40px; }
.archive-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 3vw, 48px) clamp(24px, 2.6vw, 40px);
  padding: 16px var(--pad-x) 0;
}
.card {
  cursor: pointer;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .25s ease;
}
.card:hover { }
.card:hover .card-title { color: var(--accent); }
.card-title {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.005em;
  transition: color .2s;
  text-wrap: balance;
}
.card-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: color-mix(in oklab, var(--ink) 72%, transparent);
  margin: 0;
}
.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
  margin-top: auto;
}
.card-body { display: flex; flex-direction: column; gap: 10px; }

.card-large { grid-column: span 12; }
.card-large .card-title { font-size: clamp(36px, 4vw, 56px); }
.card-large .plate-art { aspect-ratio: 16 / 9; }
.card-large .card-body { max-width: 56ch; }

.card-medium { grid-column: span 6; }
.card-medium .card-title { font-size: clamp(26px, 2.4vw, 34px); }

.card-small { grid-column: span 4; padding-top: 6px; }
.card-small .card-title { font-size: 22px; }
.card-small .card-body {
  padding-top: 6px;
  border-top: 0.5px solid var(--rule);
}

/* listing-style small cards: no image, hairline rule */
.card-small {
  border-top: 0.5px solid transparent;
}

.empty {
  grid-column: span 12;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
  padding: 60px 0;
}

@media (max-width: 980px) {
  .archive-grid { grid-template-columns: repeat(6, 1fr); }
  .card-large, .card-medium { grid-column: span 6; }
  .card-small { grid-column: span 3; }
  .hero-grid { grid-template-columns: 1fr; }
}

/* ───────── Pull quote ───────── */
.interlude {
  max-width: var(--max-w-narrow);
  margin: 60px auto;
  padding: 0 var(--pad-x);
}
/* The tulip mark — reused as a CSS data URI for pullquotes and list bullets
   so the SVG lives entirely in the stylesheet, not in JSX. */
:root {
  --gl-tulip-bullet: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><ellipse fill="%23A8555E" cx="12" cy="8.2" rx="3" ry="5"/><ellipse fill="%23C9A0A6" cx="8.4" cy="9.6" rx="2.7" ry="4.3" transform="rotate(-14 8.4 9.6)"/><ellipse fill="%23C9A0A6" cx="15.6" cy="9.6" rx="2.7" ry="4.3" transform="rotate(14 15.6 9.6)"/><path fill="%23A8555E" d="M6 10.4h12v1.3c0 3.2-2.7 5.3-6 5.3s-6-2.1-6-5.3z"/><rect fill="%238FA382" x="11.35" y="16.6" width="1.3" height="5.2" rx="0.65"/><path fill="%238FA382" d="M11.6 21.2c-2.8-.5-4.7-2.2-5.1-4.5 2.7.2 4.6 1.8 5.1 4.5z"/><path fill="%238FA382" d="M12.4 21.2c2.8-.5 4.7-2.2 5.1-4.5-2.7.2-4.6 1.8-5.1 4.5z"/></svg>');
}

.pullquote {
  position: relative;
  padding: 24px 30px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* The decorative tulip that sits above the quote — pure CSS, no JSX. */
.pullquote::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background-image: var(--gl-tulip-bullet);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
  flex-shrink: 0;
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.pullquote blockquote p { margin: 0 0 14px; }
.pullquote footer {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Article body — unordered lists get a tulip in place of the default disc.
   Ordered lists keep their normal numbers untouched. */
.article-body ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 22px;
}
.article-body ul li {
  position: relative;
  padding-left: 34px;
  margin: 0 0 10px;
  line-height: 1.7;
}
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.20em;
  width: 22px;
  height: 22px;
  background-image: var(--gl-tulip-bullet);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.article-body ol {
  padding-left: 1.8em;
  margin: 0 0 22px;
}
.article-body ol li { margin: 0 0 10px; line-height: 1.7; }
.article-body ol li::marker {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
}

/* Block quote inside a rich-text article body — matches the standalone
   PullQuote treatment: centered flex column, watercolor tulip on top,
   italic Cormorant Garamond at a large size. */
.article-body blockquote {
  position: relative;
  padding: 24px 30px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
  border: 0;
  background: transparent;
}
.article-body blockquote::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background-image: var(--gl-tulip-bullet);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
  flex-shrink: 0;
}
.article-body blockquote,
.article-body blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.article-body blockquote p { margin: 0; }
.article-body blockquote cite,
.article-body blockquote footer {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0;
}

/* ───────── Gallery ───────── */
.gallery { max-width: var(--max-w); margin: 0 auto; padding-bottom: 60px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 var(--pad-x);
  align-items: start;
}
.gal-item.gal-0,
.gal-item.gal-1,
.gal-item.gal-2,
.gal-item.gal-3,
.gal-item.gal-4,
.gal-item.gal-5 {
  grid-column: auto;
  grid-row: auto;
}

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gal-item { grid-column: auto !important; }
}

/* ───────── Letters slab (newsletter) ───────── */
.letters-slab {
  background: var(--accent);
  color: var(--paper);
  margin-top: 40px;
  position: relative;
}
.letters-slab::before, .letters-slab::after {
  content: ""; position: absolute; left: 0; right: 0; height: 0.5px;
  background: var(--gold);
  opacity: 0.5;
}
.letters-slab::before { top: 8px; }
.letters-slab::after { bottom: 8px; }
.letters-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 80px var(--pad-x);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.letters-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.12;
  margin: 14px 0 18px;
  color: var(--paper);
}
.letters-text p { color: color-mix(in oklab, var(--paper) 85%, transparent); max-width: 50ch; }
.letters-aside .plate-glyph { color: var(--gold); }
.letters-aside .plate-cap { color: color-mix(in oklab, var(--paper) 70%, transparent); }

.subscribe {
  display: flex; gap: 10px; margin-top: 20px;
  border-bottom: 0.5px solid var(--gold);
  padding-bottom: 6px;
  max-width: 420px;
}
.subscribe input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0; outline: 0;
  padding: 10px 4px;
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  font-family: var(--font-display);
  font-style: italic;
}
.subscribe input::placeholder { color: color-mix(in oklab, var(--paper) 50%, transparent); }
.subscribe button {
  appearance: none;
  background: var(--gold);
  color: var(--accent);
  border: 0;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
}
.subscribe button:hover { background: color-mix(in oklab, var(--gold) 80%, white); }

.subscribe-lg input { font-size: 18px; }

@media (max-width: 900px) {
  .letters-inner { grid-template-columns: 1fr; }
}

/* ───────── Footer ───────── */
.site-foot {
  background: var(--paper-warm);
  margin-top: 64px;
  padding: 0;
  border-top: 0.5px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.foot-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--pad-x) clamp(20px, 3vw, 32px);
}
.foot-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(8px, 2vw, 16px);
}
.foot-mark { display: inline-block; line-height: 0; }
.foot-brand-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  color: var(--ink);
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.15;
  text-wrap: balance;
}
.foot-brand-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
  margin: 0;
  max-width: 44ch;
}
.site-foot .rule {
  margin: clamp(24px, 4vw, 36px) auto;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.foot-col {
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.foot-col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 18px;
  padding: 0 0 10px;
  border: 0;
  position: relative;
  display: inline-block;
}
.foot-col h4::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 28px;
  height: 0.5px;
  background: var(--gold);
}
.foot-col p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--ink) 72%, transparent);
  margin: 0 0 14px;
  max-width: 32ch;
}
.foot-nav {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
}
.foot-nav a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s;
  padding: 2px 0;
}
.foot-nav a:hover { color: var(--accent); }
.foot-col-letters .subscribe {
  margin: 6px auto 0;
  max-width: 320px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.foot-col-letters .subscribe input {
  flex: 1 1 160px;
  min-width: 0;
}
.foot-col-letters .subscribe button { flex: 0 0 auto; }
.foot-base {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 0 0;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
  border-top: 0.5px solid var(--rule);
  text-align: center;
}
.foot-base-dot { color: var(--gold); }

/* ───────── Show more (archive) ───────── */
.archive-more {
  display: flex;
  justify-content: center;
  padding: clamp(24px, 4vw, 40px) var(--pad-x) 8px;
}
.show-more {
  appearance: none;
  background: transparent;
  border: 0.5px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, color .15s, background .15s, transform .1s;
}
.show-more::before {
  content: ""; position: absolute; inset: -3px;
  border: 0.5px solid var(--gold);
  pointer-events: none;
  opacity: calc(0.5 * var(--ornaments, 1));
}
.show-more:hover {
  border-color: var(--gold);
  color: var(--accent);
  background: color-mix(in oklab, var(--gold) 8%, var(--paper-warm));
}
.show-more:hover .arr { transform: translateY(2px); }
.show-more:active { transform: translateY(1px); }
.show-more .arr {
  font-size: 14px;
  color: var(--gold-deep);
  transition: transform .15s;
}
.link-gold { color: var(--gold-deep); text-decoration: none; border-bottom: 0.5px solid var(--rule); padding-bottom: 2px; font-family: var(--font-display); font-style: italic; font-size: 16px; }
.link-gold:hover { color: var(--accent); border-color: var(--gold); }

.subscribe.subscribe-lg { /* used inside dark slab */ }
.foot-col .subscribe {
  border-bottom-color: var(--rule);
}
.foot-col .subscribe input { color: var(--ink); font-style: italic; }
.foot-col .subscribe input::placeholder { color: color-mix(in oklab, var(--ink) 45%, transparent); }
.foot-col .subscribe button { background: var(--accent); color: var(--paper); }
.foot-col .subscribe button:hover { background: var(--accent-soft); }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-base { font-size: 10px; }
}

/* ───────── Article page (full route) ───────── */
.article-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px var(--pad-x) 80px;
  animation: art-in .25s ease-out;
}
@keyframes art-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.article-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 24px;
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 40px;
  flex-wrap: wrap; gap: 12px;
}
.back-link {
  appearance: none;
  background: transparent;
  border: 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--gold-deep);
  cursor: pointer;
  padding: 6px 0;
}
.back-link:hover { color: var(--accent); }
.back-link:hover .arr-left { transform: translateX(-4px); }
.arr-left { transition: transform .2s; }
.article-crumbs {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex; gap: 8px; align-items: center;
}
.crumb-dot { color: var(--gold); }

.article {
  max-width: 720px;
  margin: 0 auto;
}
.article-head {
  text-align: center;
  padding: 24px 0;
}
.article-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 14px 0 12px;
  text-wrap: balance;
}
.article-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.4;
  color: color-mix(in oklab, var(--ink) 75%, transparent);
  margin: 0 0 22px;
  max-width: 56ch;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.article-plate { margin: 32px 0 28px; }
.article-body {
  font-size: calc(var(--font-size) * 1.06);
  line-height: 1.78;
}
.article-body p { margin: 0 0 22px; }
/* Drop-cap only on the first paragraph directly under .article-body — nested
   <p> inside a <blockquote> or other wrapper must NOT get the drop-cap. */
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 5.4em;
  float: left;
  line-height: 0.85;
  padding: 6px 14px 0 0;
  color: var(--accent);
  font-weight: 500;
}
/* Belt-and-suspenders: reset any first-letter treatment inside a blockquote,
   so an <p> nested in a quote never inherits the drop-cap. */
.article-body blockquote ::first-letter,
.article-body blockquote p::first-letter {
  font-family: inherit;
  font-size: inherit;
  float: none;
  line-height: inherit;
  padding: 0;
  color: inherit;
  font-weight: inherit;
}
.article-body-footer {
  padding-top: 0.5rem;
}
.article-end {
  font-family: var(--font-display);
  color: color-mix(in oklab, var(--ink) 60%, transparent);
  text-align: center;
  padding: 16px 0;
}
.article-foot {
  padding-top: 28px;
  margin-top: 36px;
  border-top: 0.5px solid var(--rule);
}
.article-tags-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.article-tags-lbl {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.article-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tag {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border: 0.5px solid var(--rule);
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
}
.tag-btn {
  appearance: none;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .1s;
}
.tag-btn::before {
  content: "#";
  margin-right: 4px;
  color: var(--gold);
  opacity: 0.7;
}
.tag-btn:hover {
  border-color: var(--gold);
  color: var(--accent);
  background: var(--paper-warm);
}
.tag-btn:active { transform: translateY(1px); }

/* ───────── Article engagement ───────── */
.article-engagement {
  margin: 0;
}
.engage-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 4px;
  padding: 14px 0;
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  position: relative;
}
.engage-action {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
  cursor: pointer;
  border-radius: 999px;
  transition: color .15s, background .15s;
}
.engage-action .icon { color: var(--gold-deep); transition: color .15s, fill .15s; }
.engage-action:hover { color: var(--accent); background: rgba(192,148,99,0.08); }
.engage-action:hover .icon { color: var(--accent); }
.engage-action.active { color: var(--accent); }
.engage-action.active .icon { color: var(--accent); fill: color-mix(in oklab, var(--accent) 18%, transparent); }
.engage-count-n {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.engage-action.active .engage-count-n { color: var(--accent); }
.engage-label {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
}
.engage-action:hover .engage-label,
.engage-action.active .engage-label { color: var(--accent); }
.engage-share { position: relative; margin-left: auto; }
.share-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  box-shadow: 0 12px 32px rgba(31,23,20,0.10);
  min-width: 180px;
  padding: 6px;
  display: flex; flex-direction: column;
  animation: pop-in .15s ease-out;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.share-pop-item {
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.share-pop-item:hover { background: var(--paper-warm); color: var(--accent); }
.share-pop-item .icon { color: var(--gold-deep); }
.share-pop-item:hover .icon { color: var(--accent); }
.engage-status {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-size: 13px;
  margin-left: 8px;
}

/* ───────── Comments (redesigned) ───────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.comments {
  margin-top: 32px;
  scroll-margin-top: 80px;
}
.comments-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--rule);
}
.comments-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.comments-sub {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: color-mix(in oklab, var(--ink) 60%, transparent);
}
.comments-sort {
  display: inline-flex; align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.comments-sort select {
  appearance: none;
  background: transparent;
  border: 0.5px solid var(--rule);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 7px 26px 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.04em;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%), linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.comments-sort select:focus {
  outline: 0;
  border-color: var(--gold);
}

.comment-more {
  display: flex;
  justify-content: center;
  padding: 8px 0 20px;
}
.comment-more-btn {
  appearance: none;
  border: 0.5px solid var(--rule);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color .15s, background .15s, color .15s;
}
.comment-more-btn:hover {
  border-color: var(--gold);
  background: var(--paper-warm);
}
.comment-more-count {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
  font-size: 12px;
}

.comment-form {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.comment-form-title {
  font-family: 'Cormorant Garamond', var(--font-display), serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 14px;
}
.comment-form-grid {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
}
.comment-form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.comment-avatar-form {
  width: 40px; height: 40px;
  align-self: start;
  font-size: 17px;
}
.comment-name,
.comment-text {
  width: 100%;
  border: 0.5px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  padding: 11px 14px;
  outline: 0;
  transition: border-color .15s, background .15s, box-shadow .15s;
  border-radius: 8px;
}
.comment-name { font-size: 14px; }
.comment-text {
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  min-height: 84px;
  font-family: var(--font-body);
}
.comment-name:focus,
.comment-text:focus {
  border-color: var(--gold);
  background: color-mix(in oklab, var(--paper) 96%, white);
  box-shadow: 0 0 0 3px rgba(192,148,99,0.10);
}
.comment-name::placeholder,
.comment-text::placeholder {
  color: color-mix(in oklab, var(--ink) 42%, transparent);
  font-style: italic;
}
.comment-text.over-limit {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent);
}
.comment-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
}
.comment-form-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
  flex: 1 1 240px;
  min-width: 0;
}
.comment-form-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.comment-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  color: color-mix(in oklab, var(--ink) 50%, transparent);
  font-variant-numeric: tabular-nums;
}
.comment-counter.warn { color: var(--gold-deep); }
.comment-counter.over { color: var(--accent); font-weight: 600; }
.comment-submit {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: var(--paper);
  padding: 10px 22px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: background .15s, transform .1s;
}
.comment-submit:hover:not(:disabled) { background: var(--accent-soft); }
.comment-submit:active:not(:disabled) { transform: translateY(1px); }
.comment-submit:disabled {
  background: color-mix(in oklab, var(--ink) 12%, var(--paper-warm));
  color: color-mix(in oklab, var(--ink) 35%, transparent);
  cursor: not-allowed;
}
.comment-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.comment-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 0.5px solid var(--rule);
}
.comment-item:first-child { border-top: 0; padding-top: 8px; }
.comment-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, color-mix(in oklab, var(--gold) 24%, var(--paper-warm)), color-mix(in oklab, var(--accent) 8%, var(--paper-warm)));
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--rule);
  flex-shrink: 0;
}
.comment-body { min-width: 0; }
.comment-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.comment-author {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
}
.comment-dot { color: var(--gold); }
.comment-time {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 50%, transparent);
}
.comment-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: color-mix(in oklab, var(--ink) 84%, transparent);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.related {
  max-width: var(--max-w);
  margin: 60px auto 0;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: 16px var(--pad-x) 0;
}
.related-grid .card { grid-column: span 1; }
.related-grid .card-title { font-size: 26px; }
@media (max-width: 900px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* ───────── Tweaks panel swatches ───────── */
.swatchset { display: flex; flex-direction: column; gap: 6px; }
.swatch-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0.5px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .2s, background .2s;
}
.swatch-row:hover { border-color: rgba(0,0,0,0.25); }
.swatch-row.active { border-color: rgba(0,0,0,0.45); background: rgba(255,255,255,0.85); }
.swatch-chips { display: inline-flex; gap: 0; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.1); }
.swatch-chips .chip { width: 18px; height: 18px; display: block; }
.swatch-name { flex: 1; font-size: 12px; font-weight: 500; }
.swatch-check { color: rgba(0,0,0,0.6); font-size: 11px; }

/* ───────── Density adjustments ───────── */
[data-density="compact"] .archive-grid { gap: clamp(20px, 2.4vw, 36px) clamp(20px, 2.2vw, 32px); }
[data-density="comfy"]   .archive-grid { gap: clamp(36px, 4vw, 64px)   clamp(32px, 3vw, 48px); }
[data-density="compact"] .hero { padding-top: 36px; padding-bottom: 28px; }
[data-density="comfy"]   .hero { padding-top: 76px; padding-bottom: 56px; }

/* hide the masthead nav on the smallest screens? keep visible — it wraps */

/* ─────────────────────────────────────────────────────────────
   PODCAST
   ───────────────────────────────────────────────────────────── */

/* Play button */
.play-btn {
  appearance: none;
  border: 0.5px solid var(--rule);
  background: var(--paper);
  color: var(--accent);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 4px 14px rgba(31,23,20,0.06);
}
.play-btn:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); transform: scale(1.04); }
.play-btn svg { margin-left: 2px; } /* optical centering */

/* Podcast strip on home */
.pod-strip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  margin-top: 24px;
}
.pod-strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px var(--pad-x);
  position: relative;
  z-index: 1;
}
.pod-strip-head { text-align: center; margin-bottom: 36px; }
.pod-strip-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
  margin: 12px 0 6px;
  letter-spacing: -0.005em;
}
.pod-strip-title em { font-style: italic; color: var(--accent); }
.pod-strip-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
  max-width: 56ch;
  margin: 0 auto;
}

.pod-strip-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.pod-strip-feature {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
}
.pod-strip-feature .pod-cover { width: 220px; }
.pod-strip-meta { display: flex; flex-direction: column; gap: 8px; }
.pod-strip-feat-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.08;
  margin: 8px 0 4px;
  letter-spacing: -0.005em;
}
.pod-strip-feat-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: color-mix(in oklab, var(--ink) 72%, transparent);
  margin: 0 0 8px;
  line-height: 1.4;
}
.pod-strip-feat-actions {
  display: flex; align-items: center; gap: 14px; margin-top: 6px;
  flex-wrap: wrap;
}
.pod-strip-feat-actions .btn-read { margin-top: 0; padding: 10px 18px; font-size: 14px; }

.pod-strip-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  border-top: 0.5px solid var(--rule);
}
.pod-strip-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 0.5px solid var(--rule);
  cursor: pointer;
  transition: background .15s;
}
.pod-strip-item:hover { background: rgba(192,148,99,0.06); }
.pod-mini-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
}
.pod-mini-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pod-mini-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pod-mini-sub {
  font-size: 12px;
  color: color-mix(in oklab, var(--ink) 60%, transparent);
}

@media (max-width: 900px) {
  .pod-strip-grid { grid-template-columns: 1fr; }
  .pod-strip-feature { grid-template-columns: 160px 1fr; }
  .pod-strip-feature .pod-cover { width: 160px; }
}
@media (max-width: 560px) {
  .pod-strip-feature { grid-template-columns: 1fr; text-align: center; }
  .pod-strip-feature .pod-cover { width: 100%; max-width: 240px; margin: 0 auto; }
  .pod-strip-feat-actions { justify-content: center; }
}

/* Podcast page (full route) */
.pod-page { max-width: var(--max-w); margin: 0 auto; padding: 0 0 80px; }
.pod-page-head {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 64px var(--pad-x) 56px;
  background: linear-gradient(180deg, var(--paper-warm), var(--paper));
}
.pod-page-head-inner { position: relative; z-index: 1; max-width: var(--max-w-narrow); margin: 0 auto; }
.pod-page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1;
  margin: 14px 0 12px;
  letter-spacing: -0.012em;
}
.pod-page-title em { font-style: italic; color: var(--accent); }
.pod-page-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: color-mix(in oklab, var(--ink) 72%, transparent);
  margin: 0 0 16px;
  line-height: 1.35;
}
.pod-page-intro {
  max-width: 56ch; margin: 0 auto 18px;
  font-size: 16px;
  line-height: 1.65;
  color: color-mix(in oklab, var(--ink) 80%, transparent);
}
.pod-page-meta {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--ink) 60%, transparent);
  margin-bottom: 14px;
}
.pod-page-meta em { color: var(--ink); font-style: italic; font-family: var(--font-display); font-size: 14px; letter-spacing: 0; }
.pod-page-platforms {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--gold-deep);
}

.pod-list { padding: 0 var(--pad-x); }
.pod-list-inner { display: flex; flex-direction: column; gap: 36px; max-width: 920px; margin: 0 auto; }

.ep-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  padding: 20px 0;
  border-bottom: 0.5px solid var(--rule);
}
.ep-row:last-child { border-bottom: 0; }
.ep-row-large {
  grid-template-columns: 300px 1fr;
}
.ep-row-medium .pod-cover { width: 220px; }
.ep-row-large .pod-cover { width: 300px; }
.ep-cover .pod-cover { width: 100%; }

.ep-body { display: flex; flex-direction: column; gap: 8px; }
.ep-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.1;
  margin: 6px 0 2px;
  letter-spacing: -0.005em;
}
.ep-row-large .ep-title { font-size: clamp(34px, 3.6vw, 46px); }
.ep-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: color-mix(in oklab, var(--ink) 72%, transparent);
  margin: 0 0 8px;
  line-height: 1.35;
}
.ep-desc { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: color-mix(in oklab, var(--ink) 82%, transparent); max-width: 60ch; }
.ep-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--ink) 60%, transparent);
  margin-bottom: 8px;
}
.ep-meta em { color: var(--ink); font-style: italic; font-family: var(--font-display); font-size: 14px; letter-spacing: 0; }
.ep-actions {
  display: flex; align-items: center; gap: 16px;
  margin-top: 6px; flex-wrap: wrap;
}
.ep-listen-on {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.ep-listen-on .link-gold {
  font-family: inherit; font-style: normal; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; border-bottom: 0.5px solid var(--rule);
}

@media (max-width: 720px) {
  .ep-row { grid-template-columns: 1fr; }
  .ep-row-large, .ep-row-medium { grid-template-columns: 1fr; }
  .ep-row-medium .pod-cover, .ep-row-large .pod-cover { width: 100%; max-width: 240px; }
  .pod-page-title { font-size: clamp(44px, 12vw, 68px); }
}

/* Now-playing bar */
.now-playing {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--accent);
  color: var(--paper);
  border-top: 0.5px solid var(--gold);
  box-shadow: 0 -8px 30px rgba(20,14,12,0.18);
  animation: np-in .25s ease-out;
}
@keyframes np-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.np-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 12px var(--pad-x);
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1.5fr) auto auto;
  align-items: center;
  gap: 16px;
}
.np-cover { width: 56px; }
.np-cover .pod-cover { width: 56px; }
.np-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-text .eyebrow-sm { color: color-mix(in oklab, var(--gold) 80%, white); }
.np-title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.15;
  color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-sub {
  font-size: 12px;
  color: color-mix(in oklab, var(--paper) 75%, transparent);
}
.np-progress {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: color-mix(in oklab, var(--gold) 80%, white);
}
.np-bar {
  flex: 1; min-width: 80px;
  height: 2px;
  background: rgba(255,255,255,0.18);
  border-radius: 1px;
  overflow: hidden;
}
.np-fill {
  display: block;
  width: 18%;
  height: 100%;
  background: var(--gold);
}
.np-controls { display: inline-flex; gap: 6px; }
.np-btn {
  appearance: none;
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.18);
  color: var(--paper);
  border-radius: 999px;
  width: 36px; height: 36px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: background .2s, border-color .2s;
}
.np-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--gold); }
.np-btn-main {
  width: 44px; height: 44px;
  background: var(--gold);
  color: var(--accent);
  border-color: var(--gold);
  font-size: 14px;
}
.np-btn-main:hover { background: color-mix(in oklab, var(--gold) 80%, white); }
.np-close {
  appearance: none;
  background: transparent; border: 0;
  color: color-mix(in oklab, var(--paper) 70%, transparent);
  cursor: pointer; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.np-close:hover { color: var(--paper); background: rgba(255,255,255,0.06); }

@media (max-width: 900px) {
  .np-inner {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "cover text close"
      "progress progress progress"
      "controls controls controls";
    gap: 10px;
    padding: 10px var(--pad-x);
  }
  .np-cover { grid-area: cover; }
  .np-text { grid-area: text; }
  .np-close { grid-area: close; }
  .np-progress { grid-area: progress; }
  .np-controls { grid-area: controls; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE
   ───────────────────────────────────────────────────────────── */

/* Tablet ≤ 900px */
@media (max-width: 900px) {
  :root { --pad-x: clamp(18px, 5vw, 36px); }

  .m-icon, .search-mobile { display: none; }
  .masthead-bar { padding: 10px var(--pad-x) 8px; }
  .masthead-center { width: 100%; }

  .masthead-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px var(--pad-x) 12px;
    border-top: 0.5px solid var(--rule);
  }
  .masthead-nav-links {
    width: 100%;
    gap: 6px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .masthead-nav .nav-link {
    flex: 0 0 auto;
    width: auto;
    text-align: center;
    padding: 8px 4px;
    font-size: 11px;
    border-bottom: 0;
    white-space: nowrap;
  }
  .masthead-nav .nav-link.active::after { bottom: 0; }
  .nav-link-home { width: 32px; height: 32px; padding: 0 !important; }
  .nav-search {
    width: 100%;
    margin-left: 0;
  }
  .nav-spacer { display: none; }
}

/* Phone ≤ 640px */
@media (max-width: 640px) {
  :root { --pad-x: 18px; --font-size: 16px; }

  body { line-height: 1.6; }

  /* Logo — keep mark + name but tighten */
  .brand-topline {
    gap: 9px;
    font-size: clamp(20px, 6vw, 27px);
  }
  .brand-mark { width: 32px; height: 32px; }
  .brand-eyebrow { font-size: 9px; letter-spacing: 0.16em; }
  .logo-stacked .logo-mark { width: 40px; height: 40px; }
  .logo-stacked .logo-name { font-size: 19px; }
  .logo-stacked .logo-eyebrow { font-size: 12px; }
  .logo-inline .logo-mark { width: 36px; height: 36px; }
  .logo-inline .logo-name { font-size: 17px; }
  .logo-inline .logo-eyebrow { font-size: 11px; }
  .logo-wordmark .logo-name { font-size: 19px; }
  .logo-wordmark .logo-eyebrow { font-size: 12px; }

  /* Hero */
  .hero { padding: 32px var(--pad-x) 28px; }
  .hero-grid { gap: 28px; }
  .hero-title { font-size: clamp(40px, 9vw, 56px); line-height: 1.02; }
  .hero-sub { font-size: 18px; }
  .hero-dek { font-size: 16px; }
  .btn-read { padding: 12px 18px; font-size: 15px; }

  /* Section heads */
  .sec-head { padding: 44px var(--pad-x) 18px; }
  .sec-title { font-size: clamp(30px, 8vw, 42px); }
  .sec-kicker { font-size: 16px; }

  /* Editor's letter */
  .letter { padding: 40px var(--pad-x); }
  .letter-title { font-size: clamp(24px, 6.8vw, 32px); }

  /* Archive */
  .archive-grid { grid-template-columns: 1fr; gap: 36px; }
  .card-large, .card-medium, .card-small { grid-column: span 1; }
  .card-large .card-title { font-size: 32px; }
  .card-medium .card-title { font-size: 26px; }
  .card-small .card-title { font-size: 20px; }
  .card-sub { font-size: 16px; }

  /* Pull quote */
  .interlude { margin: 40px auto; }
  .pullquote { padding: 24px 16px; }
  .pullquote blockquote { font-size: 22px; }
  .pq-mark { font-size: 80px; }
  .pq-mark.right { bottom: -40px; }

  /* Gallery — two columns, no spanning hero */
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 var(--pad-x); }

  .submit-story {
    padding: 40px var(--pad-x);
  }
  .submit-story-title { font-size: clamp(26px, 7vw, 34px); }
  .story-form {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .nav-search { width: 100%; }
  .nav-search input { min-width: 0; }

  /* Letters slab */
  .letters-inner { padding: 56px var(--pad-x); }
  .letters-title { font-size: clamp(26px, 6.8vw, 36px); }
  .subscribe-lg input { font-size: 16px; }
  .subscribe { flex-wrap: wrap; }
  .subscribe button { width: 100%; }

  /* Article page */
  .article-page { padding: 12px var(--pad-x) 60px; }
  .article-topbar { padding: 8px 0 16px; margin-bottom: 24px; }
  .back-link { font-size: 14px; }
  .article-crumbs { font-size: 10px; letter-spacing: 0.12em; }
  .article-title { font-size: clamp(34px, 9vw, 48px); }
  .article-sub { font-size: 17px; }
  .article-body { font-size: 16.5px; line-height: 1.72; }
  .article-body .lede::first-letter,
  .article-body > p:first-of-type::first-letter { font-size: 4.6em; padding-right: 10px; }
  .engage-row { flex-wrap: wrap; padding: 12px 0; }
  .engage-share { margin-left: 0; }
  .share-pop { right: auto; left: 0; }
  .article-engagement { margin-top: 18px; }
  .comments { margin-top: 22px; }

  /* Footer */
  .foot-inner { padding: 44px var(--pad-x) 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 28px; }
  .foot-col p { max-width: 30ch; }
  .foot-base { font-size: 10px; gap: 6px; padding-top: 18px; flex-direction: column; }
  .foot-base-dot { display: none; }

  /* Category hero */
  .cat-hero { padding: 48px var(--pad-x) 28px; }
  .cat-hero-title { font-size: clamp(44px, 14vw, 72px); margin: 10px 0 14px; }
  .cat-hero-desc { font-size: 16px; margin: 14px 0 10px; }

  /* Modal */
  .modal-backdrop { padding: 12px; }
  .modal-card { padding: 22px 18px; max-height: calc(100vh - 24px); }
  .modal-card::before { inset: 4px; }
  .modal-title { font-size: clamp(22px, 6.5vw, 28px); }
  .story-form { grid-template-columns: 1fr; gap: 12px; }
  .story-form-foot { flex-direction: column; align-items: stretch; }
  .story-form-actions { width: 100%; }
  .story-form-actions .btn-ghost,
  .story-form-actions .submit-story-btn { flex: 1; justify-content: center; }

  /* Comments mobile */
  .comments-head { flex-direction: column; align-items: flex-start; }
  .comment-form-grid { grid-template-columns: 32px 1fr; gap: 10px; }
  .comment-avatar-form { width: 32px; height: 32px; font-size: 14px; }
  .comment-item { grid-template-columns: 32px 1fr; gap: 10px; padding: 16px 0; }
  .comment-avatar { width: 32px; height: 32px; font-size: 14px; }
  .comment-form-foot { flex-direction: column; align-items: stretch; }
  .comment-form-actions { justify-content: space-between; }

  /* Tags */
  .article-tags-row { gap: 10px; }

  /* Active filter chips */
  .active-filters { justify-content: flex-start; padding-left: var(--pad-x); padding-right: var(--pad-x); }

  /* Byline — tighten spacing */
  .byline { font-size: 11px; }

  /* Tweaks panel: keep but smaller margin on mobile */
  .twk-panel { right: 12px !important; bottom: 12px !important; width: min(260px, calc(100vw - 24px)) !important; }
}

/* Very small phones */
@media (max-width: 380px) {
  .logo .logo-text { display: none; }
  .logo-stacked .logo-mark, .logo-inline .logo-mark { width: 38px; height: 38px; }
}

/* =============================================================================
   GUL-LALA — Women's blog tulip redesign
   Rose · Blush · Cream palette with bilingual Urdu accents
   ============================================================================= */

.gl-site {
  --rose: #A8555E;
  --rose-deep: #8C4049;
  --blush: #C9A0A6;
  --blush-soft: #F7E8E4;
  --card: #FFFDF9;
  --cream: #FAF7F0;
  --line: #EFE6DA;
  --line-soft: #EBDDD3;
  --ink: #4A4440;
  --ink-soft: #6B625C;
  --muted: #A8988F;
  --gradient-band: linear-gradient(120deg, #F6E0D6 0%, #F7EDD9 30%, #F3DBD8 62%, #E4E9F0 100%);

  background: var(--cream);
  color: var(--ink);
  font-family: 'Karla', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.gl-site::selection { background: var(--blush-soft); }

.gl-site h1, .gl-site h2, .gl-site h3, .gl-site h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: #3E3733;
  letter-spacing: -0.005em;
}

/* =========== NAV =========== */
/* =========== NAV — mobile-first =========== */
.gl-nav {
  position: sticky; top: 0; z-index: 200;    /* well above the hero + everything */
  background: var(--cream);                    /* solid — nothing bleeds through */
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
  isolation: isolate;                          /* own stacking context */
}
.gl-nav.scrolled { box-shadow: 0 6px 20px rgba(74,68,64,0.06); }
.gl-nav-inner {
  position: relative;                          /* anchor for the search overlay */
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 58px;                            /* stable row height while animating */
}
/* Extra safety: force-hide desktop CTA on mobile even if a higher-specificity
   rule tries to show it — the mobile header must only have brand + icons. */
@media (max-width: 799px) {
  .gl-cta-desktop,
  .gl-nav-links,
  .gl-search-desktop {
    display: none !important;
  }
}
/* Kill the browser's native search-input clear button so the only X is ours */
.gl-search input::-webkit-search-cancel-button,
.gl-search input::-webkit-search-decoration,
.gl-search input::-webkit-search-results-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.gl-search input::-ms-clear,
.gl-search input::-ms-reveal { display: none; }
.gl-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  min-height: 42px;
  padding: 0;
  align-self: center;
}
.gl-brand-urdu {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: 19px;
  line-height: 1;
  color: var(--rose);
}
.gl-brand-latin {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Icon buttons — search toggle + hamburger (mobile only) */
.gl-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 0;
  background: transparent;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  border-radius: 50%;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.gl-nav-icon:hover { background: var(--blush-soft); color: var(--rose); }
.gl-nav-icon.active { color: var(--rose); background: var(--blush-soft); }
.gl-nav-toggle {
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.gl-nav-toggle span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  width: 20px;
  transition: transform .2s, opacity .2s;
}
.gl-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gl-nav-toggle.open span:nth-child(2) { opacity: 0; }
.gl-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Desktop links + search + CTA — hidden on mobile */
.gl-nav-links,
.gl-search-desktop,
.gl-cta-desktop { display: none; }

/* Shared search field styles */
.gl-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 10px 14px 10px 16px;
  background: var(--card);
  transition: border-color .2s;
  box-sizing: border-box;
}
.gl-search:focus-within { border-color: var(--blush); }
.gl-search-icon { color: var(--blush); flex-shrink: 0; }
.gl-search input {
  border: 0; outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  padding: 0;
}
.gl-search input::placeholder {
  color: var(--muted);
  font-style: italic;
}
.gl-search-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--blush);
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 999px;
}
.gl-search-clear:hover { background: var(--blush-soft); color: var(--rose-deep); }

/* Mobile: the search input is an ABSOLUTE overlay that lives in the same
   nav-inner row. When closed it is collapsed to the right edge (where the
   search icon lives) and hidden; when open it expands leftward, sliding
   from a 40px pill to fill the row. */
.gl-search-mobile {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  height: 40px;
  min-height: 40px;
  width: 40px;
  max-width: calc(100% - 28px);
  padding: 0 6px 0 14px;
  gap: 8px;
  overflow: hidden;
  border-color: transparent;
  background: var(--card);
  opacity: 0;
  visibility: hidden;             /* fully out of a11y tree when closed */
  pointer-events: none;
  transition:
    width .28s cubic-bezier(.2,.7,.2,1),
    opacity .18s ease-out,
    border-color .2s ease-out,
    visibility 0s linear .18s;
  box-sizing: border-box;
}
.gl-nav-inner[data-search="open"] .gl-search-mobile {
  width: calc(100% - 28px);
  border-color: var(--blush);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    width .28s cubic-bezier(.2,.7,.2,1),
    opacity .18s ease-out,
    border-color .2s ease-out,
    visibility 0s linear 0s;
}
.gl-search-mobile input {
  font-size: 16px; /* 16px prevents iOS zoom on focus */
  padding: 8px 0;
  min-width: 0;
  width: 100%;
}
.gl-search-cancel {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--rose);
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 500;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease-out;
}
.gl-search-cancel:hover { background: var(--blush-soft); color: var(--rose-deep); }

/* Mobile only: when search is open, fade the brand + hamburger + search icon
   out of the row so the input owns the whole space. Kept in the DOM so the
   layout doesn't collapse — just visually absent. */
@media (max-width: 799px) {
  .gl-nav-inner > .gl-brand,
  .gl-nav-inner > .gl-nav-icon-search,
  .gl-nav-inner > .gl-nav-toggle {
    transition: opacity .16s ease-out, transform .2s ease-out;
  }
  .gl-nav-inner[data-search="open"] > .gl-brand,
  .gl-nav-inner[data-search="open"] > .gl-nav-icon-search,
  .gl-nav-inner[data-search="open"] > .gl-nav-toggle {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px);
  }
}

/* Mobile drawer */
.gl-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(74,68,64,0.44);
  z-index: 55;
  animation: gl-fade-in .2s ease-out;
}
@keyframes gl-fade-in { from { opacity: 0; } to { opacity: 1; } }
.gl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: -14px 0 40px rgba(74,68,64,0.14);
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 58;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: gl-drawer-in .24s cubic-bezier(.22,.61,.36,1);
  box-sizing: border-box;
}
@keyframes gl-drawer-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.gl-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.gl-drawer-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.gl-drawer-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.gl-drawer-close:hover { background: var(--blush-soft); color: var(--rose); }
.gl-drawer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gl-drawer-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  text-decoration: none;
  min-height: 48px;
  transition: background .15s, color .15s;
}
.gl-drawer-list a:hover { background: var(--blush-soft); color: var(--rose-deep); }
.gl-drawer-list a.active { color: var(--rose); background: var(--blush-soft); }
.gl-drawer-dot {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gl-drawer-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}
.gl-drawer-cta {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  padding: 14px 22px;
  font-size: 12px;
  background: var(--rose);
  color: var(--cream);
  border: 0;
}
.gl-drawer-cta:hover { background: var(--rose-deep); color: var(--cream); }

/* Shared components: link, section dropdown, CTA */
.gl-link {
  appearance: none;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color .15s;
}
.gl-link:hover { color: var(--rose); }
.gl-link.active { color: var(--rose); }
.gl-caret { font-size: 10px; color: var(--muted); }

.gl-sections { position: relative; }
.gl-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(74,68,64,0.14);
  padding: 10px;
  display: flex;
  flex-direction: column;
  z-index: 50;
  animation: gl-pop .15s ease-out;
}
@keyframes gl-pop {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.gl-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 9px;
  color: var(--ink);
  font-size: 15px;
  font-family: 'Cormorant Garamond', serif;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.gl-menu a:hover { background: var(--blush-soft); color: var(--rose-deep); }

.gl-cta {
  appearance: none;
  border: 1px solid var(--blush);
  background: transparent;
  color: var(--rose);
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.gl-cta:hover { background: var(--blush-soft); color: var(--rose-deep); }

/* Desktop breakpoint — full nav layout */
@media (min-width: 800px) {
  .gl-nav-inner {
    padding: 18px 24px;
    gap: 22px;
    flex-wrap: nowrap;
  }
  .gl-brand-urdu { font-size: 24px; }
  .gl-brand-latin { font-size: 21px; }
  .gl-nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .gl-search-desktop {
    display: inline-flex;
    flex: 0 1 300px;
    max-width: 320px;
    min-width: 200px;
  }
  .gl-cta-desktop { display: inline-flex; }
  .gl-nav-icon-search, .gl-nav-toggle { display: none; }
  .gl-search-mobile { display: none !important; }
}

/* =========== HERO =========== */
/* Anchor the whole hero to a stable height so slides don't jump when
   the copy changes. Title + body have explicit reserved heights + line
   clamps so any slide fits the same envelope. */
.gl-hero {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 56px) 24px clamp(48px, 8vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 6vw, 64px);
  align-items: stretch;
  min-height: clamp(560px, 68vh, 720px);
  overflow: hidden;
}
/* Full-width watercolor tulip strip along the bottom of the hero.
   Very soft, fades to transparent near the top so the copy above still
   reads cleanly. Lives underneath both the left-edge flower and the
   copy/art layer. */
.gl-hero-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 78%;
  object-fit: cover;
  object-position: bottom center;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  filter: saturate(0.85);
  -webkit-mask-image: linear-gradient(to top, black 55%, transparent 100%);
  mask-image: linear-gradient(to top, black 55%, transparent 100%);
  display: block;
}
/* Subtle brand tulip — a watermark that peeks in from the left. Kept
   soft enough that copy reads over it, but strong enough to actually
   be seen. Sits above the wide strip. */
.gl-hero-flower {
  position: absolute;
  left: -3%;
  top: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 34%;
  object-fit: contain;
  object-position: center left;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
  filter: saturate(0.9);
  display: block;
}
.gl-hero-copy, .gl-hero-art {
  position: relative;
  z-index: 2;
}
.gl-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
}
.gl-hero-kicker {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.gl-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(40px, 6.5vw, 68px);
  line-height: 1.04;
  margin: 0;
  color: #3E3733;
  text-wrap: balance;
  min-height: calc(1.04em * 3);   /* reserve 3 title lines */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.gl-hero-body {
  font-size: 17px;
  line-height: 1.75;
  max-width: 520px;
  margin: 0;
  color: var(--ink-soft);
  text-wrap: pretty;
  min-height: calc(1.75em * 5);   /* reserve 5 body lines */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.gl-hero-actions { margin-top: auto; }
.gl-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 22px;
  margin-top: 6px;
}
.gl-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rose);
  color: var(--cream);
  padding: 14px 32px;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  min-height: 44px;
}
.gl-btn-primary:hover { background: var(--rose-deep); color: var(--cream); }
.gl-btn-link {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--rose);
  font: inherit;
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 0 0 2px 0;
  border-bottom: 1px solid var(--blush);
  cursor: pointer;
  text-decoration: none;
}
.gl-btn-link:hover { color: var(--rose-deep); border-color: var(--rose); }
.gl-btn-ghost {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--blush);
  color: var(--rose);
  padding: 13px 28px;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  min-height: 44px;
}
.gl-btn-ghost:hover { background: var(--card); color: var(--rose-deep); }

.gl-hero-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.gl-dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #E5D5CB;
  cursor: pointer;
  transition: all .3s ease;
}
.gl-dot.active {
  width: 26px;
  background: var(--rose);
}

.gl-hero-art {
  position: relative;
  display: flex;
  justify-content: center;
}
.gl-hero-halo {
  position: absolute;
  inset: 24px -12px -12px 24px;
  background: radial-gradient(ellipse at 60% 40%, #F6E3D2 0%, #F7EDD9 40%, rgba(247,237,217,0) 72%);
  border-radius: 50%;
  pointer-events: none;
}
.gl-hero-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  height: clamp(300px, 40vw, 440px);
  border-radius: 200px 200px 16px 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #FDF7F0 0%, #F8ECEA 55%, #F7EDE0 100%);
  box-shadow: 0 24px 60px rgba(168,85,94,0.14);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.gl-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease;
}

/* =========== ABOUT =========== */
.gl-about {
  background: var(--gradient-band);
}
.gl-about-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 88px) 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.gl-about-urdu {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: 44px;
  line-height: 1.6;
  color: var(--rose);
}
.gl-about-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 38px;
  margin: 0;
  color: #3E3733;
}
.gl-about-body {
  font-size: 16.5px;
  line-height: 1.85;
  margin: 0;
  color: var(--ink-soft);
  max-width: 620px;
  text-wrap: pretty;
}

/* =========== STORIES =========== */
.gl-stories {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 80px) 24px clamp(56px, 9vw, 96px);
}
/* When search / tag / category filter is active, the stories section is the
   only thing rendered — no big top padding, no chip row, no in-section
   search. The header search already exists; just show the results. */
.gl-stories.filter-only {
  padding-top: clamp(20px, 4vw, 40px);
  min-height: 60vh;
}
.gl-stories.filter-only .gl-stories-head { margin-bottom: 16px; }
.gl-stories.filter-only .gl-stories-count { padding-top: 6px; }

/* Show more (home view only) */
.gl-stories-more {
  display: flex;
  justify-content: center;
  padding: 28px 0 0;
}
.gl-stories-more-btn {
  min-height: 44px;
}
.gl-stories-more-count {
  font-family: 'Karla', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 12px;
  color: var(--muted);
  margin-left: 6px;
}
.gl-stories-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 12px;
}
.gl-stories-head-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  /* flex-basis: auto so this doesn't reserve 400px of vertical space when
     the parent flexes to column on mobile. Use min-width for the horizontal
     wrap threshold instead. */
  flex: 1 1 auto;
  min-width: min(320px, 100%);
}
.gl-stories-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(32px, 5.5vw, 42px);
  margin: 0;
  color: #3E3733;
  text-wrap: balance;
}
.gl-stories-subline {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}
.gl-stories-count {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 12px;
  flex-shrink: 0;
}
.gl-stories-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.gl-stories-search {
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 13px 20px;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  outline: none;
  transition: border-color .2s;
}
.gl-stories-search:focus { border-color: var(--blush); }
.gl-stories-search::placeholder { color: var(--muted); font-style: italic; }
.gl-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gl-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-soft);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: 'Karla', sans-serif;
  font-size: 13.5px;
  cursor: pointer;
  min-height: 38px;
  transition: all .2s ease;
}
.gl-chip:hover { border-color: var(--blush); }
.gl-chip.active {
  background: var(--rose);
  color: var(--cream);
  border-color: var(--rose);
}

.gl-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}
.gl-story-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(74,68,64,0.04);
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.gl-story-card:hover {
  box-shadow: 0 16px 36px rgba(168,85,94,0.13);
  transform: translateY(-4px);
}
.gl-story-media {
  height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gl-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Tulip-fallback images: contain instead of cover so the whole flower shows */
.gl-story-media img[src*="tulip-"] {
  object-fit: contain;
  padding: 12px;
  mix-blend-mode: multiply;
}
.gl-story-body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.gl-story-eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
}
.gl-story-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 25px;
  line-height: 1.2;
  margin: 0;
  color: #3E3733;
}
.gl-story-body p {
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gl-story-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.gl-story-more {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--rose);
}
.gl-story-stats {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}
.gl-stories-empty {
  font-size: 15px;
  color: var(--muted);
  margin: 24px 0 0;
}

/* =========== PODCAST =========== */
.gl-podcast {
  background: var(--gradient-band);
}
.gl-podcast-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(48px, 9vw, 88px) 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 6vw, 64px);
  align-items: start;
}
.gl-podcast-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gl-podcast-eyebrow {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose);
}
.gl-podcast-copy h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1.08;
  margin: 0;
  color: #3E3733;
  text-wrap: balance;
}
.gl-podcast-copy p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  color: var(--ink-soft);
  max-width: 460px;
  text-wrap: pretty;
}
.gl-podcast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}
.gl-podcast-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gl-ep {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 2px 10px rgba(74,68,64,0.04);
}
.gl-ep-head {
  display: flex;
  align-items: center;
  gap: 14px 18px;
  flex-wrap: wrap;
}
.gl-ep-play {
  appearance: none;
  border: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  cursor: pointer;
}
.gl-ep-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.gl-ep-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: #3E3733;
}
.gl-ep-meta { font-size: 13px; color: var(--muted); }
.gl-ep-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.gl-ep-like, .gl-ep-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-soft);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  cursor: pointer;
  min-height: 36px;
  transition: border-color .15s, color .15s, background .15s;
}
.gl-ep-share:hover, .gl-ep-like:hover { border-color: var(--blush); color: var(--rose); }
.gl-ep-like.on { background: var(--blush-soft); color: var(--rose-deep); }
.gl-ep-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gl-ep-skip {
  border: 1px solid var(--line-soft);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 5px 10px;
  font-family: 'Karla', sans-serif;
  font-size: 11.5px;
  cursor: pointer;
  flex-shrink: 0;
}
.gl-ep-skip:hover { border-color: var(--blush); color: var(--rose); }
.gl-ep-time {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.gl-ep-bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #F0E7DC;
  overflow: hidden;
}
.gl-ep-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 1s linear;
}

/* =========== SUBMIT =========== */
.gl-submit {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 88px) 24px;
}
.gl-submit-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  align-items: center;
  margin-bottom: 32px;
}
.gl-submit-eyebrow {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose);
}
.gl-submit-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(32px, 5.5vw, 42px);
  margin: 0;
  color: #3E3733;
  text-wrap: balance;
}
.gl-submit-head p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  color: var(--ink-soft);
  max-width: 520px;
  text-wrap: pretty;
}
.gl-submit-thanks {
  background: var(--gradient-band);
  border-radius: 18px;
  padding: 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.gl-submit-thanks-urdu {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: 32px;
  line-height: 1.6;
  color: var(--rose);
}
.gl-submit-thanks p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  margin: 0;
  color: #3E3733;
}
.gl-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 2px 10px rgba(74,68,64,0.04);
}
.gl-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.gl-form input, .gl-form textarea {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: 'Karla', sans-serif;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--cream);
  outline: none;
  min-height: 44px;
  box-sizing: border-box;
  transition: border-color .15s;
  width: 100%;
}
.gl-form input:focus, .gl-form textarea:focus { border-color: var(--blush); }
.gl-form input::placeholder, .gl-form textarea::placeholder { color: var(--muted); }
.gl-form textarea { resize: vertical; }
.gl-form-file {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed #D8C6BA;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 14px;
  min-height: 44px;
  box-sizing: border-box;
  transition: border-color .15s;
}
.gl-form-file:hover { border-color: var(--blush); }
.gl-form-file-plus { color: var(--rose); font-size: 16px; }
.gl-form-file input[type="file"] { display: none; }
.gl-form-err {
  margin: 0;
  font-size: 13.5px;
  color: var(--rose-deep);
}
.gl-form button[type="submit"] {
  align-self: flex-start;
}

/* =========== FOOTER =========== */
.gl-footer {
  border-top: 1px solid var(--line);
  background: var(--gradient-band);
}
.gl-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 28px;
}
.gl-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.gl-footer-urdu {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: 22px;
  color: var(--rose);
  line-height: 1;
}
.gl-footer-domain {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Copyright — sits in the exact centre column of the grid. */
.gl-footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  padding-top: 4px;
  white-space: nowrap;
}
.gl-footer-center > span:nth-child(2),
.gl-footer-center > span:nth-child(3) {
  font-family: 'Karla', sans-serif;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.gl-footer-dot {
  display: none;                              /* rows stack instead */
}

/* Sitemap block — right column. */
.gl-footer-sitemap {
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
}
.gl-footer-eyebrow {
  font-family: 'Karla', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.gl-footer-eyebrow-sub {
  font-family: 'Karla', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 6px;
  margin-bottom: 6px;
}
.gl-footer-sitemap > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-family: 'Karla', sans-serif;
}
.gl-footer-sitemap > ul > li > a,
.gl-footer-sitemap > ul > li > button {
  appearance: none;
  border: 0;
  background: none;
  padding: 3px 0;
  cursor: pointer;
  color: var(--ink-soft);
  font: inherit;
  text-decoration: none;
  transition: color .15s;
}
.gl-footer-sitemap a:hover,
.gl-footer-sitemap button:hover { color: var(--rose); }

.gl-footer-sitemap-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 3px 18px;
  justify-content: end;
}
.gl-footer-sitemap-group li { font-size: 13px; }
.gl-footer-sitemap-group a {
  color: var(--muted);
}

/* =========== MOBILE =========== */
/* Mobile refinements — the base styles above are already mobile-first,
   this block just tightens things for narrow phones. */
@media (max-width: 640px) {
  .gl-hero {
    grid-template-columns: 1fr;
    padding: clamp(24px, 6vw, 40px) 20px clamp(28px, 6vw, 48px);
    min-height: unset;
    gap: 28px;
    text-align: center;
  }
  .gl-hero-copy { align-items: center; }
  .gl-hero-copy > * { margin-left: auto; margin-right: auto; }
  .gl-hero-body { max-width: 100%; -webkit-line-clamp: unset; min-height: unset; }
  .gl-hero-title { min-height: unset; -webkit-line-clamp: unset; }
  .gl-hero-actions { justify-content: center; }
  .gl-hero-dots { justify-content: center; }
  .gl-hero-art { justify-content: center; order: -1; }
  .gl-hero-frame { max-width: 320px; height: 300px; border-radius: 160px 160px 14px 14px; }
  .gl-btn-primary { padding: 12px 24px; font-size: 12.5px; }
  .gl-btn-ghost { padding: 12px 22px; font-size: 12.5px; }

  /* Mobile brand flower — anchored to the top-right of the copy area,
     visible watermark behind the type. */
  .gl-hero-flower {
    left: auto;
    right: -8%;
    top: 4%;
    bottom: auto;
    height: 60%;
    max-width: 45%;
    opacity: 0.24;
    object-position: top right;
  }

  /* Mobile strip — anchored to the bottom, taller mask fade so it doesn't
     compete with the stacked copy above. */
  .gl-hero-strip {
    height: 55%;
    opacity: 0.22;
    -webkit-mask-image: linear-gradient(to top, black 40%, transparent 100%);
    mask-image: linear-gradient(to top, black 40%, transparent 100%);
  }

  .gl-about-inner { padding: 44px 20px; gap: 16px; }
  .gl-about-urdu { font-size: 36px; }
  .gl-about-title { font-size: 26px !important; }
  .gl-about-body { font-size: 15.5px; line-height: 1.75; }

  .gl-stories { padding: 40px 20px 60px; }
  .gl-stories-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gl-stories-head h2 { font-size: clamp(28px, 8vw, 36px); }
  .gl-stories-count { padding-top: 0; }
  .gl-stories-search { max-width: 100%; font-size: 15px; padding: 12px 18px; }
  .gl-chip-row { gap: 8px; overflow-x: auto; flex-wrap: nowrap; padding: 2px 0 6px; margin: 0 -4px; scrollbar-width: none; -ms-overflow-style: none; }
  .gl-chip-row::-webkit-scrollbar { display: none; }
  .gl-chip { flex-shrink: 0; }
  .gl-story-grid { gap: 20px; grid-template-columns: 1fr; }
  .gl-story-body { padding: 20px 22px 24px; }
  .gl-story-body h3 { font-size: 22px; }

  .gl-podcast-inner { padding: 44px 20px; gap: 28px; }
  .gl-podcast-copy h2 { font-size: clamp(26px, 7vw, 34px); }
  .gl-ep { padding: 14px 16px; }
  .gl-ep-head { gap: 10px 12px; }
  .gl-ep-actions { flex-basis: 100%; justify-content: flex-start; }

  .gl-submit { padding: 44px 20px; }
  .gl-submit-head h2 { font-size: clamp(26px, 7vw, 34px); }
  .gl-form { padding: 22px 18px; }

  .gl-footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    padding: 28px 20px;
    justify-items: center;
  }
  .gl-footer-brand { align-items: center; }
  .gl-footer-center { align-items: center; }
  .gl-footer-sitemap { justify-self: center; align-items: center; text-align: center; }
  .gl-footer-sitemap > ul { align-items: center; }
  .gl-footer-sitemap-group ul { justify-content: center; }

  .gl-about-page .gl-about-title { padding: 44px 20px 0; gap: 14px; }
  .gl-about-essay { padding: 32px 20px 0; font-size: 16px; line-height: 1.85; }
  .gl-about-dropcap { font-size: 46px; }
  .gl-about-cta { padding: 32px 20px 56px; gap: 22px; }

  .gl-pod-header-inner { padding: 44px 20px; }
  .gl-pod-player-wrap { padding: 24px 20px 0; }
  .gl-pod-player { padding: 20px; gap: 14px; }
  .gl-pod-list { padding: 28px 20px 56px; }
  .gl-pod-row { padding: 12px 14px; }
  .gl-pod-row-text { min-width: 0; }
  .gl-pod-row-title { font-size: 17px; }

  .gl-drawer { padding-top: 76px; }
}

@media (max-width: 400px) {
  .gl-brand-latin { font-size: 16px; }
  .gl-brand-urdu { font-size: 19px; }
  .gl-hero-frame { max-width: 260px; height: 260px; }
  .gl-hero-title { font-size: clamp(32px, 8vw, 40px); }
  .gl-chip { padding: 8px 14px; font-size: 13px; }
}

/* =========== ABOUT PAGE =========== */
.gl-about-page {
  background: var(--cream);
  min-height: 60vh;
}
.gl-about-page .gl-about-title {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 72px) 24px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.gl-about-title-urdu {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: clamp(38px, 8vw, 52px);
  line-height: 1.6;
  color: var(--rose);
}
.gl-about-title-gloss {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 4vw, 26px);
  color: #3E3733;
}
.gl-about-title-gloss em { color: var(--rose); font-style: italic; }
.gl-about-title-sep { color: var(--blush); }
.gl-about-page h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(38px, 7vw, 58px);
  line-height: 1.08;
  margin: 0;
  color: #3E3733;
  text-wrap: balance;
}
.gl-about-essay {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 56px) 24px 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-size: 17px;
  line-height: 1.9;
  color: #5A524C;
}
.gl-about-essay p { margin: 0; text-wrap: pretty; }
.gl-about-dropcap {
  font-family: 'Cormorant Garamond', serif;
  font-size: 58px;
  line-height: 0.8;
  float: left;
  padding: 8px 12px 0 0;
  color: var(--rose);
}
.gl-about-figure {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gl-about-figure img {
  width: 100%;
  border-radius: 18px;
  display: block;
  box-shadow: 0 20px 50px rgba(168,85,94,0.12);
}
.gl-about-figure figcaption {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}
.gl-about-quote {
  margin: 8px 0;
  padding: 26px 32px;
  background: var(--gradient-band);
  border-radius: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 4vw, 24px);
  line-height: 1.5;
  color: var(--rose-deep);
  text-wrap: pretty;
}
.gl-about-close {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.5;
  color: #3E3733;
}
.gl-about-cta {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 56px) 24px clamp(56px, 8vw, 88px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.gl-about-cta-tulip {
  width: min(220px, 55vw);
  border-radius: 140px 140px 14px 14px;
  display: block;
  box-shadow: 0 20px 50px rgba(168,85,94,0.14);
}

/* =========== PODCAST PAGE =========== */
.gl-podcast-page {
  background: var(--cream);
}
.gl-pod-header {
  background: var(--gradient-band);
}
.gl-pod-header-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 64px) 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gl-pod-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(38px, 7vw, 56px);
  margin: 0;
  color: #3E3733;
  text-wrap: balance;
}
.gl-pod-header-meta {
  font-size: 14px;
  color: var(--ink-soft);
}
.gl-pod-empty {
  max-width: 920px;
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
  color: var(--muted);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
}

.gl-pod-player-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 24px 0;
}
.gl-pod-player {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(22px, 4vw, 32px);
  box-shadow: 0 10px 32px rgba(168,85,94,0.10);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gl-pod-np {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gl-pod-np-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
}
.gl-pod-np-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 4vw, 28px);
  color: #3E3733;
}
.gl-pod-np-meta { font-size: 13.5px; color: var(--muted); }
.gl-pod-seek {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gl-pod-time {
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.gl-pod-range {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: #F0E7DC;
  outline: none;
  flex: 1;
  cursor: pointer;
}
.gl-pod-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rose);
  cursor: pointer;
  border: 2px solid var(--cream);
  box-shadow: 0 1px 4px rgba(74,68,64,0.3);
}
.gl-pod-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rose);
  cursor: pointer;
  border: 2px solid var(--cream);
}
.gl-pod-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.gl-pod-skip {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: var(--card);
  color: var(--ink-soft);
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.gl-pod-skip:hover { border-color: var(--blush); color: var(--rose); }
.gl-pod-play {
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 0;
  background: var(--rose);
  color: var(--cream);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(168,85,94,0.35);
  transition: background .15s, transform .1s;
}
.gl-pod-play:hover { background: var(--rose-deep); }
.gl-pod-play:active { transform: scale(0.96); }
.gl-pod-side-actions {
  display: flex;
  gap: 10px;
  margin-left: 8px;
}

.gl-pod-list {
  max-width: 920px;
  margin: 0 auto;
  padding: 36px 24px clamp(56px, 9vw, 88px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gl-pod-list h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(28px, 5vw, 34px);
  margin: 0 0 10px;
  color: #3E3733;
}
.gl-pod-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  transition: background .15s, border-color .15s;
}
.gl-pod-row.current {
  background: #F7EDE6;
  border-color: #E8CFC4;
}
.gl-pod-row-play {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  cursor: pointer;
}
.gl-pod-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  flex: 1;
}
.gl-pod-row-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  color: #3E3733;
}
.gl-pod-row-meta { font-size: 13px; color: var(--muted); }
.gl-pod-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .gl-pod-controls { gap: 10px; }
  .gl-pod-side-actions { margin-left: 0; flex-basis: 100%; justify-content: center; }
  .gl-pod-row-actions { flex-basis: 100%; }
}