/* From The Stem, MPIArtist Publication Engine
   Roots-paper meets modern media desk
   Warm ink · clay · slate · cream · subtle string motifs
*/

:root {
  /* Surfaces */
  --paper: #f5efe2; /* warm cream */
  --paper-2: #ece4d2; /* deeper cream */
  --paper-3: #e2d8c0; /* aged page */
  --ink: #1a1612; /* warm ink */
  --ink-2: #2b2620; /* secondary ink */
  --slate: #4a5159; /* slate */
  --slate-2: #6d747c; /* slate muted */
  --clay: #b0573a; /* clay terracotta, primary accent */
  --clay-dark: #8a4129;
  --rust: #c97a3f; /* warm rust */
  --moss: #5d6a4a; /* muted moss for tags */
  --gold: #b08742; /* burnished gold */
  --rule: #cdbf9f; /* soft rule */
  --hairline: #d8cdb1;

  /* Type */
  --display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --body: "General Sans", "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.35rem;
  --t-2xl: 1.7rem;
  --t-3xl: 2.25rem;
  --t-4xl: 3rem;
  --t-5xl: 4rem;
  --t-hero: clamp(2.6rem, 6vw, 5.4rem);

  /* Layout */
  --max: 1240px;
  --gutter: clamp(1rem, 3vw, 2.25rem);
  --radius: 2px;
}

@import url("https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap");

/* Fraunces from Google Fonts (variable) */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=JetBrains+Mono:wght@400;500&display=swap");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  background-image:
    radial-gradient(rgba(110, 90, 50, 0.045) 1px, transparent 1px),
    radial-gradient(rgba(110, 90, 50, 0.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule); transition: color .15s ease, text-decoration-color .15s ease; }
a:hover { color: var(--clay); text-decoration-color: var(--clay); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 0.5em;
  font-variation-settings: "opsz" 120, "SOFT" 30;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 1em; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }

/* ===== Site header ===== */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(6px);
}
.site-header-inner {
  display: flex; align-items: center; gap: 2rem;
  padding: 0.85rem var(--gutter);
  max-width: var(--max); margin: 0 auto;
}
@media (max-width: 720px) {
  .site-header-inner { gap: 1rem; flex-wrap: wrap; }
  .site-header-inner .nav { gap: 0.9rem; font-size: 0.82rem; width: 100%; margin-left: 0; }
  .nav-verticals summary { font-size: 0.82rem; }
  .brand-sub { display: none; }
}

/* Verticals dropdown, desktop: anchored under the trigger.
   Mobile: viewport-aware panel that can't overflow horizontally. */
.nav-verticals { position: relative; display: inline-block; }
.nav-verticals-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.45rem 0.4rem;
  color: var(--ink-2);
  font-weight: 500;
  user-select: none;
}
.nav-verticals-summary::-webkit-details-marker { display: none; }
.nav-verticals-summary:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.nav-verticals[open] > .nav-verticals-summary { color: var(--clay); }
.nav-verticals-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(26, 22, 18, 0.12);
  z-index: 40;
}
.nav-verticals-panel a {
  display: block;
  padding: 10px 6px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.92rem;
  font-family: var(--body);
  border-bottom: 1px dashed var(--hairline);
}
.nav-verticals-panel a:last-child { border-bottom: none; }
.nav-verticals-panel a:hover,
.nav-verticals-panel a:focus-visible {
  color: var(--clay);
  outline: none;
  background: var(--paper-2);
}
@media (max-width: 720px) {
  /* On mobile, anchor the panel to the site header (the sticky containing
     block) so it spans the screen with safe margins instead of being
     positioned relative to whatever wrapped column the trigger lands in.
     This guarantees it stays on-screen no matter where the trigger sits. */
  .nav-verticals { position: static; }
  .nav-verticals-panel {
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    max-width: none;
    min-width: 0;
    max-height: 70vh;
    margin-top: 6px;
  }
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand svg { display: block; }
.brand picture { display: contents; }
.brand-logo {
  display: block;
  width: min(330px, 42vw);
  height: auto;
}
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-sub {
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 1px;
}
.nav {
  display: flex; gap: 1.4rem;
  margin-left: auto;
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.nav a {
  text-decoration: none;
  color: var(--ink-2);
  font-weight: 500;
}
.nav a.active, .nav a:hover { color: var(--clay); }
.nav .pill {
  background: var(--ink);
  color: var(--paper);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
}
.nav .pill:hover { background: var(--clay); color: var(--paper); }

/* Datestrip */
.datestrip {
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 0.5rem var(--gutter);
  display: flex; gap: 2rem;
  max-width: var(--max); margin: 0 auto;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .datestrip { gap: 0.6rem; font-size: 0.62rem; letter-spacing: 0.08em; }
}

/* ===== Hero / Home Page ===== */
.front {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 2.5rem;
  padding: 2.5rem var(--gutter) 2rem;
  max-width: var(--max);
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 900px) { .front { grid-template-columns: 1fr; } }

.lead-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.85rem;
}
.lead-eyebrow .dot { color: var(--ink); }

.lead h1 {
  font-size: var(--t-hero);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-bottom: 0.5rem;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.lead h1 a { text-decoration: none; color: var(--ink); }
.lead h1 a:hover { color: var(--clay); }
.lead a.hero-art-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.lead a.hero-art-link:hover .hero-art { border-color: var(--clay); }
.lead .dek {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--slate);
  font-size: 1.25rem;
  max-width: 56ch;
  line-height: 1.4;
}
.byline {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--slate);
  display: flex; gap: 1rem; align-items: center;
}
.byline strong { color: var(--ink); font-weight: 500; }

/* Sidebar of front */
.side h3 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
.side ul { list-style: none; padding: 0; margin: 0; }
.side li {
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--hairline);
}
.side li:last-child { border-bottom: none; }
.desk-item {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 0.85rem;
  align-items: center;
}
.desk-item picture {
  display: block;
  width: 104px;
}
.desk-item img {
  display: block;
  width: 104px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
}
.desk-title {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--ink);
}
.side .kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.25rem;
  display: block;
}
.side a { text-decoration: none; color: var(--ink); display: block; }
.side a:hover { color: var(--clay); }
.side a:hover .desk-title { color: var(--clay); }

/* ===== Section bands ===== */
.band {
  border-top: 1px solid var(--rule);
  padding: 2.5rem var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.band-head {
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.6rem;
}
.band-head h2 {
  font-size: var(--t-2xl);
  margin: 0;
  letter-spacing: -0.02em;
}
.band-head .meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-left: auto;
}
.band-head a.viewall {
  text-decoration: none;
  font-size: 0.85rem;
  color: var(--clay);
  font-weight: 500;
}

/* Card grid */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 100%;
}
@media (max-width: 800px) { .cards { grid-template-columns: minmax(0, 1fr); } }

.card { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; overflow-wrap: anywhere; }
.card .kicker { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }
.card h3 { font-size: 1.25rem; line-height: 1.2; margin: 0 0 0.35rem; overflow-wrap: anywhere; }
.card h3 a { text-decoration: none; color: var(--ink); }
.card h3 a:hover { color: var(--clay); }
.card p { color: var(--slate); font-size: 0.95rem; margin: 0; overflow-wrap: anywhere; }
.card .byline { margin-top: 0.5rem; font-size: 0.78rem; }

/* Make the card image itself a tap target on mobile + desktop */
.card a.card-img-link {
  display: block;
  width: 100%;
  margin-bottom: 0.6rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.card a.card-img-link picture { margin-bottom: 0; }
.card a.card-img-link:hover .card-img,
.card a.card-img-link:focus-visible .card-img { border-color: var(--clay); }
.card a.card-img-link:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.card h3 a:focus-visible,
.card .read-more:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
/* Subtle hover on the whole card title so the affordance is unmistakable. */
.card:hover h3 a { color: var(--clay); }

/* "Read the full article" inline CTA, used at the bottom of cards and leads */
.read-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
  text-decoration: none;
  border-bottom: 1px solid var(--clay);
  padding-bottom: 2px;
}
.read-more:hover { color: var(--clay-dark); border-color: var(--clay-dark); }

.card picture {
  display: block;
  width: 100%;
  margin-bottom: 0.6rem;
}
.card-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  background-image: var(--bg, none);
  background-size: cover;
  background-position: center;
  object-fit: cover;
  border: 1px solid var(--hairline);
  margin-bottom: 0.6rem;
}
.card picture .card-img { margin-bottom: 0; }

/* ===== Article ===== */
.article-head {
  padding: 3rem var(--gutter) 1.5rem;
  max-width: 820px;
  margin: 0 auto;
}
.article-head .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 1rem;
}
.article-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 0.6rem;
}
.article-head .dek {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--slate);
  line-height: 1.4;
  max-width: 60ch;
}
.article-body {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--gutter) 3rem;
  font-size: 1.08rem;
  line-height: 1.78;
  color: var(--ink-2);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.article-body h2 {
  font-size: 1.7rem;
  margin-top: 2.8rem;
  margin-bottom: 0.7rem;
  letter-spacing: -0.02em;
  position: relative;
}
.article-body h2::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 1px;
  background: var(--clay);
  margin-bottom: 1.2rem;
  opacity: 0.7;
}
.article-body h3 {
  font-size: 1.25rem;
  margin-top: 1.8rem;
  margin-bottom: 0.5rem;
}
.article-body p { margin-bottom: 1.15em; }
.article-body p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 3.6rem;
  font-weight: 700;
  float: left;
  line-height: 0.85;
  padding: 0.3rem 0.6rem 0 0;
  color: var(--clay);
}
.article-body blockquote {
  border-left: 3px solid var(--clay);
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.3rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.5;
}
/* Pull quote — opt-in via class on a blockquote or paragraph. Larger,
   centered, no left rule. Use for short standalone editorial quotes. */
.article-body blockquote.pullquote,
.article-body p.pullquote,
.article-body .pullquote {
  border-left: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 2.4rem 0;
  padding: 1.4rem 0.4rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.005em;
  max-width: 620px;
}
.article-body .pullquote cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 0.9rem;
}
/* End-of-article ornament — small centered glyph that gives the piece
   a clear visual close before the CTA. */
.article-body .journal-end {
  text-align: center;
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--clay);
  margin: 2.4rem 0 1.6rem;
  letter-spacing: 0.4em;
  padding-left: 0.4rem;
  opacity: 0.85;
}
/* Slight content rhythm inside the journal-prose wrapper — subtle
   horizontal rule every few paragraphs would be too noisy; instead we
   tighten paragraph-to-h2 transitions. */
.article-body .journal-prose > h2 + p { margin-top: 0.3rem; }
.article-body .journal-prose > p + h2 { margin-top: 2.6rem; }
.article-body ul, .article-body ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.article-body li { margin-bottom: 0.4rem; }
.article-body figure {
  margin: 2rem 0;
  padding: 0;
}
.article-body figure picture {
  display: block;
  width: 100%;
}
.article-body figure .img,
.article-body figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  background-size: cover;
  background-position: center;
  object-fit: cover;
}
.article-body figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin-top: 0.5rem;
  text-align: left;
}

/* CTA box */
.cta-box {
  margin: 2.5rem 0;
  padding: 1.6rem 1.6rem 1.6rem;
  background: var(--paper-2);
  border-left: 4px solid var(--clay);
}
.cta-box .kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.4rem;
}
.cta-box h4 {
  font-family: var(--display);
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
}
.cta-box p { margin: 0 0 0.8rem; color: var(--ink-2); }
.cta-button {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  padding: 0.7rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.cta-button:hover { background: var(--clay); color: var(--paper); }

/* FAQ */
.faq {
  margin: 2.5rem 0;
  border-top: 1px solid var(--rule);
}
.faq h2 { font-size: 1.5rem; margin: 1.5rem 0 1rem; }
.faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 1rem 0;
}
.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::after { content: "+"; color: var(--clay); font-size: 1.4rem; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-top: 0.6rem; color: var(--ink-2); }

/* Admin / editorial card (SEO meta etc) */
.admin-panel {
  margin: 3rem 0 2rem;
  border: 1px dashed var(--slate-2);
  padding: 1.4rem 1.4rem 0.6rem;
  background: rgba(255, 252, 245, 0.6);
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.admin-panel h4 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 0.8rem;
  font-weight: 500;
}
.admin-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--hairline);
}
.admin-row:last-child { border-bottom: none; }
.admin-row .label {
  color: var(--slate);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding-top: 2px;
}
.admin-row .val { color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.admin-row code { font-family: var(--mono); background: var(--paper-2); padding: 1px 4px; }
@media (max-width: 700px) { .admin-row { grid-template-columns: 1fr; gap: 0.2rem; } }

/* Tags */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--rule);
  padding: 3px 8px;
  margin-right: 0.4rem;
  text-decoration: none;
}
.tag:hover { color: var(--clay); border-color: var(--clay); }

/* ===== Footer ===== */
footer.foot {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 3rem var(--gutter);
  margin-top: 4rem;
}
.foot-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
}
@media (max-width: 800px) { .foot-inner { grid-template-columns: 1fr 1fr; } }
.foot h5 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 0.8rem;
  font-weight: 500;
}
.foot a { display: block; padding: 3px 0; color: var(--ink-2); text-decoration: none; font-size: 0.92rem; }
.foot a:hover { color: var(--clay); }
.foot .colophon { font-size: 0.82rem; color: var(--slate); margin-top: 0.4rem; max-width: 36ch; }
.foot-bottom {
  max-width: var(--max); margin: 2rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--slate);
  letter-spacing: 0.06em;
}

/* ===== Vertical page header ===== */
.vert-head {
  padding: 3rem var(--gutter) 1.2rem;
  max-width: var(--max);
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
.vert-head .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.8rem;
}
.vert-head h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing: -0.035em;
  margin-bottom: 0.4rem;
  line-height: 0.98;
}
.vert-head .dek {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--slate);
  max-width: 60ch;
  margin-bottom: 1rem;
}
/* Feature row inside vertical */
.vert-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  padding: 2.5rem var(--gutter);
  max-width: var(--max); margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 900px) { .vert-feature { grid-template-columns: 1fr; } }
.vert-feature a.hero-art-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.vert-feature a.hero-art-link:hover .hero-art,
.vert-feature a.hero-art-link:focus-visible .hero-art { border-color: var(--clay); }
.vert-feature a.hero-art-link:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.vert-feature h2 a:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* Responsive helpers for inline grids */
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .three-col { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}

/* Small utility */
.divider {
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}
.subtle { color: var(--slate); }
.uppercase-mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); }

/* Hero illustration container */
.hero-art {
  margin: 1.5rem 0;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}
.hero-art svg { width: 100%; height: 100%; display: block; }
.hero-art picture { width: 100%; height: 100%; display: block; }
.hero-art img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* small subheading bar */
.section-bar {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate);
  margin: 0 0 0.8rem;
}
.section-bar::before {
  content: "";
  display: inline-block; width: 24px; height: 1px; background: var(--clay);
}

/* Number markers */
.numeric {
  font-family: var(--display); font-weight: 600; color: var(--clay);
  font-size: 0.85rem; margin-right: 0.3rem;
}

/* ====== Subscribe form ====== */
.subscribe-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.9rem;
  align-items: start;
  width: 100%;
}
.subscribe-form .subscribe-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.subscribe-form label.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
  font-family: var(--mono);
}
.subscribe-form input[type="email"],
.subscribe-form input[type="text"] {
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  border-radius: var(--radius);
  width: 100%;
}
.subscribe-form input:focus {
  outline: 2px solid var(--clay);
  outline-offset: 1px;
}
.subscribe-form .subscribe-consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.subscribe-form .subscribe-consent input { margin-top: 0.2rem; }
.subscribe-form .subscribe-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}
.subscribe-form button {
  border: none;
  cursor: pointer;
}
.subscribe-form button[disabled] { opacity: 0.7; cursor: progress; }
.subscribe-form .honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.subscribe-status {
  font-size: 0.9rem;
  font-family: var(--body);
  min-height: 1.2em;
  color: var(--slate);
}
.subscribe-status[data-state="error"] { color: var(--clay-dark); }
.subscribe-status[data-state="success"] { color: var(--moss); }
.subscribe-status[data-state="loading"] { color: var(--slate-2); }
@media (max-width: 720px) {
  .subscribe-form { grid-template-columns: 1fr; }
}

/* ====== Legal pages (privacy / terms) ====== */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
}
.legal h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.4rem;
}
.legal .updated {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 2rem;
}
.legal h2 {
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}
.legal p, .legal li {
  font-size: 1.02rem;
  color: var(--ink-2);
  line-height: 1.7;
}
.legal ul {
  padding-left: 1.2rem;
}

/* ===== Publish dates & freshness badges ===== */
.publish-date {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 0.4rem;
}
.publish-date.subtle { color: var(--slate); opacity: 0.85; }
.fresh-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--clay);
  color: var(--paper);
  padding: 0.16rem 0.5rem;
  border-radius: 3px;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.archive-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--slate);
  border: 1px dashed var(--rule);
  padding: 0.14rem 0.5rem;
  border-radius: 3px;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.section-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.3rem;
}
.card .publish-date { margin-top: 0.3rem; display: block; }

/* ===== Byline polish (music-journal feel) ===== */
.article-head .byline {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}
.byline-category {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
  border: 1px solid var(--rule);
  padding: 0.18rem 0.55rem;
  border-radius: 2px;
  background: rgba(255, 252, 245, 0.6);
}
.byline-read-time {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--slate);
}
.byline-sep { color: var(--rule); }

/* ===== Category list (read-only labels, used on cards/listings) ===== */
.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0;
}
.category-list .category-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--hairline);
  padding: 0.12rem 0.45rem;
  border-radius: 2px;
}

/* ===== Mobile readability on articles ===== */
@media (max-width: 640px) {
  .article-head { padding: 2rem var(--gutter) 1rem; }
  .article-head h1 { line-height: 1.05; }
  .article-head .dek { font-size: 1.1rem; }
  .article-body {
    font-size: 1.04rem;
    line-height: 1.72;
  }
  .article-body h2 { font-size: 1.4rem; margin-top: 2.2rem; }
  .article-body h3 { font-size: 1.12rem; }
  .article-body p:first-of-type::first-letter {
    font-size: 3rem;
    padding: 0.25rem 0.5rem 0 0;
  }
  .article-body blockquote { font-size: 1.08rem; padding-left: 1rem; }
  .article-body .pullquote { font-size: 1.25rem; padding: 1.1rem 0.2rem; }
  .article-head .byline { font-size: 0.8rem; gap: 0.6rem; }
  .byline-category { font-size: 0.62rem; }
}


/* ===== Authority hub / pillar system ===== */

.pillar-head { border-bottom: 1px solid var(--rule); }
.pillar-summary {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
}
.cluster-section .band-head .meta {
  font-family: var(--display);
  font-style: italic;
  color: var(--slate);
  max-width: 60ch;
}
.cluster-empty {
  padding: 0.6rem 0;
  font-size: 1.05rem;
}
.pillar-card .kicker { color: var(--clay); }
.related-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  padding: 0 var(--gutter);
}
.related-pillar-link {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--rule);
  background: var(--paper-2);
  text-decoration: none;
  color: var(--ink);
}
.related-pillar-link:hover {
  border-color: var(--clay);
  color: var(--clay);
}
.related-pillar-link span {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 0.3rem;
}

/* Pillar rail on article pages */
.pillar-rail {
  margin: 2.4rem 0 1.6rem;
  padding: 1.2rem 1.4rem;
  background: var(--paper-2);
  border-left: 3px solid var(--clay);
}
.pillar-rail-kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.4rem;
}
.pillar-rail-link {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.pillar-rail-link:hover { color: var(--clay); }
.pillar-rail-cluster {
  display: inline-block;
  margin-left: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.pillar-rail-dek {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-style: italic;
  color: var(--slate);
}

/* AI-answer block on article pages */
.ai-answer {
  margin: 1.6rem 0 2rem;
  padding: 1.2rem 1.4rem;
  background: var(--paper-2);
  border: 1px dashed var(--rule);
}
.ai-answer-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.4rem;
}
.ai-answer-summary p {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  margin: 0;
}
.ai-answer-takeaways { margin-top: 1.1rem; }
.ai-answer-takeaways ul {
  margin: 0;
  padding-left: 1.2rem;
}
.ai-answer-takeaways li {
  margin-bottom: 0.35rem;
  line-height: 1.55;
}
.ai-answer-definitions { margin-top: 1.1rem; }
.ai-answer-definitions dl { margin: 0; }
.ai-answer-definitions dt {
  font-weight: 600;
  margin-top: 0.4rem;
}
.ai-answer-definitions dd {
  margin: 0.15rem 0 0;
  color: var(--slate);
}