/* ════════════════════════════════════════════════
   styles.css — Jeff Hogan | The Next Greatest Generation
════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Jost:wght@300;400;500;600;700&display=swap');

/* ── Tokens ──────────────────────────────────── */
:root {
  --black:   #0A0A0A;
  --white:   #FAFAFA;
  --red:     #D32F2F;
  --red-d:   #B71C1C;
  --muted:   #52525B;
  --border:  #E4E4E7;
  --gray:    #F0F0F0;
  --off:     #F5F5F5;
  --serif:   'Playfair Display', Georgia, serif;
  --sans:    'Jost', system-ui, sans-serif;
  --nav-h:   72px;
  --max-w:   1200px;
  /* --text flips in dark mode via applyTheme — use for readable body text */
  --text:    #0A0A0A;
  --text-m:  #52525B;   /* muted text */
  --surface: #FAFAFA;   /* page background */
}

/* ── Reset ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--black);
  line-height: 1.65;
  font-size: 16px;
}
img  { display: block; width: 100%; object-fit: cover; }
a    { text-decoration: none; color: inherit; }
button { font-family: var(--sans); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--sans); }
ul   { list-style: none; }

/* ── Typography ──────────────────────────────── */
.t-overline {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 14px;
}
.t-overline-w { color: rgba(255,255,255,0.55); }
.t-h1 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(44px, 7vw, 80px);
  line-height: 0.93; letter-spacing: -0.03em;
}
.t-h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 3.5vw, 44px);
  line-height: 1.1; letter-spacing: -0.02em;
}
.t-h3 { font-family: var(--serif); font-size: 24px; font-weight: 700; }
.t-h4 { font-family: var(--serif); font-size: 20px; font-weight: 700; }
.t-body    { font-size: 16px; line-height: 1.8; color: var(--muted); }
.t-body-lg { font-size: 18px; line-height: 1.8; color: var(--muted); }
.t-small   { font-size: 13px; color: var(--muted); }
.t-xs      { font-size: 11px; }
.t-w   { color: #fff; }
.t-w70 { color: rgba(255,255,255,0.7); }
.t-red { color: var(--red); }
.t-muted { color: var(--muted); }
.t-center { text-align: center; }
.t-serif  { font-family: var(--serif); }

/* ── Layout ──────────────────────────────────── */
.wrap    { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.sec     { padding: 80px 24px; max-width: var(--max-w); margin: 0 auto; }
.sec-sm  { padding: 48px 24px; max-width: var(--max-w); margin: 0 auto; }
.sec-lg  { padding: 120px 24px; max-width: var(--max-w); margin: 0 auto; }
.sec-full { padding: 80px 0; }
.sec-full-lg { padding: 120px 0; }

/* Section backgrounds (applied to the outer element) */
.bg-black  { background: var(--black); }
.bg-white  { background: #fff; }
.bg-off    { background: var(--white); }
.bg-gray   { background: var(--gray); }
.bg-red    { background: var(--red); }

.bdr-t { border-top: 1px solid var(--border); }
.bdr-b { border-bottom: 1px solid var(--border); }

/* ── Grid ────────────────────────────────────── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.g2-book { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.bordered { border: 1px solid var(--border); }
.bordered-w { border: 1px solid rgba(255,255,255,0.2); }

/* ── Flex helpers ────────────────────────────── */
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-12 { gap: 48px; }

/* ── Spacing ─────────────────────────────────── */
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10{ margin-bottom: 40px; }
.mb-12{ margin-bottom: 48px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

/* ── Nav ─────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--white); border-bottom: 1px solid var(--border);
  height: var(--nav-h);
}
#nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}
.nav-logo {
  font-family: var(--serif); font-size: 22px; font-weight: 900;
  letter-spacing: -0.02em; color: var(--black); transition: color 0.2s;
}
.nav-logo:hover { color: var(--red); }

#nav-links { display: flex; align-items: center; gap: 32px; }

.nav-link {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  transition: color 0.2s; position: relative; padding-bottom: 2px;
}
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-link:hover { color: var(--black); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--red); }
.nav-link.active::after { transform: scaleX(1); }

#nav-hamburger {
  display: none; padding: 8px; color: var(--black); line-height: 0;
}

/* ── Mobile menu ─────────────────────────────── */
#mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 99;
  background: var(--black); flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
}
#mobile-menu.open { display: flex; }

.mobile-nav-link {
  font-family: var(--serif); font-size: 38px; font-weight: 700;
  color: rgba(255,255,255,0.8); transition: color 0.2s;
  letter-spacing: -0.02em;
}
.mobile-nav-link:hover { color: #fff; }
.mobile-nav-link.active { color: var(--red); }

#mobile-close {
  position: absolute; top: 24px; right: 24px;
  color: rgba(255,255,255,0.6); font-size: 28px; transition: color 0.2s;
}
#mobile-close:hover { color: #fff; }

/* ── Page ────────────────────────────────────── */
#page { margin-top: var(--nav-h); }

/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer; border: none; white-space: nowrap;
}
.btn-primary   { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-d); }
.btn-outline   { background: transparent; border: 2px solid var(--black); color: var(--black); }
.btn-outline:hover { background: var(--black); color: #fff; }
.btn-outline-w { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-outline-w:hover { background: #fff; color: var(--black); }
.btn-outline-r { background: transparent; border: 2px solid var(--red); color: var(--red); }
.btn-outline-r:hover { background: var(--red); color: #fff; }
.btn-white-r   { background: #fff; color: var(--red); }
.btn-white-r:hover { background: rgba(255,255,255,0.9); }
.btn-full  { width: 100%; }
.btn-sm    { padding: 10px 20px; font-size: 11px; }
.btn-lg    { padding: 18px 36px; font-size: 13px; }

/* ── Hero ────────────────────────────────────── */
#hero {
  position: relative; min-height: calc(90vh - var(--nav-h));
  display: flex; align-items: center;
  background-size: cover; background-position: center;
}
#hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#hero-grid {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--max-w); margin: 0 auto; padding: 80px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}

/* ── Newsletter box ──────────────────────────── */
.nl-box { background: var(--black); padding: 40px; }
.nl-box-w { background: #fff; border: 1px solid var(--border); padding: 28px; }

/* ── Forms ───────────────────────────────────── */
.field {
  width: 100%; padding: 11px 14px; font-size: 14px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08); color: #fff;
  outline: none; transition: border-color 0.2s;
}
.field::placeholder { color: rgba(255,255,255,0.35); }
.field:focus { border-color: rgba(255,255,255,0.5); }

.field-light {
  background: transparent; border: 1px solid var(--border); color: var(--black);
}
.field-light::placeholder { color: var(--muted); }
.field-light:focus { border-color: var(--black); outline: none; }

.field-focus { border-color: rgba(255,255,255,0.5) !important; }
.field-light-focus { border-color: var(--black) !important; }

.form-note { font-size: 12px; color: rgba(255,255,255,0.35); margin-top: 10px; }
.label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; }
.label-req { color: var(--red); }

/* ── Success message ─────────────────────────── */
.success-msg {
  display: none; padding: 16px;
  background: #f0fff4; border: 1px solid #bbf7d0;
  color: #166534; font-size: 14px; font-weight: 500;
}
.success-msg.show { display: block; }

/* ── Feature cells (Purpose/Resilience/Responsibility) ── */
.feat-cell {
  padding: 40px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.feat-cell:last-child { border-right: none; }
.feat-icon { color: var(--red); margin-bottom: 20px; display: block; }

.feat-cell-dark {
  padding: 32px; display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  border-right: 1px solid rgba(255,255,255,0.15);
}
.feat-cell-dark:nth-child(even) { border-right: none; }
.feat-cell-dark:last-child { border-bottom: none; }

/* ── Chapter num badge ───────────────────────── */
.ch-num {
  width: 32px; height: 32px; background: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}

/* ── Review cards ────────────────────────────── */
.review-card { background: #fff; border: 1px solid var(--border); padding: 32px; }
.review-card:nth-child(2) { border-left: none; border-right: none; }
.review-q { font-size: 17px; line-height: 1.7; margin-bottom: 24px; }
.review-attr { border-top: 1px solid var(--border); padding-top: 16px; }
.review-name { font-weight: 600; font-size: 15px; }
.review-role { font-size: 13px; color: var(--muted); }

/* ── Stars ───────────────────────────────────── */
.stars { display: flex; gap: 2px; }
.star  { color: #F59E0B; font-size: 20px; }

/* ── Book cover area ─────────────────────────── */
.book-cover-wrap { position: relative; }
.book-badge {
  position: absolute; top: -12px; right: -12px;
  background: var(--red); color: #fff;
  padding: 6px 16px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; z-index: 2;
}

/* ── Check list ──────────────────────────────── */
.check-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.check-icon { color: var(--red); flex-shrink: 0; margin-top: 3px; }

/* ── FAQ ─────────────────────────────────────── */
.faq-item { padding: 24px; border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-weight: 600; margin-bottom: 8px; }
.faq-a { font-size: 14px; color: var(--muted); line-height: 1.75; }

/* ── Filter bar ──────────────────────────────── */
#filter-bar {
  background: #fff; border-bottom: 1px solid var(--border);
  position: sticky; top: var(--nav-h); z-index: 50;
}
#filter-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto; height: 56px;
}
.filter-icon { color: var(--muted); display: flex; align-items: center; gap: 6px; font-size: 13px; margin-right: 8px; }
.filter-btn {
  padding: 6px 18px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  border-bottom: 2px solid transparent; transition: all 0.2s;
}
.filter-btn:hover { color: var(--black); }
.filter-btn.active { color: var(--black); border-bottom-color: var(--red); }

/* ── Empty state ─────────────────────────────── */
.empty-state {
  text-align: center; padding: 80px 24px;
  border: 1px solid var(--border); background: #fff;
}
.empty-icon { color: var(--muted); margin: 0 auto 16px; }

/* ── Contact ─────────────────────────────────── */
.contact-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.contact-icon-box {
  width: 40px; height: 40px; background: var(--red); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.contact-quick-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--muted);
  transition: all 0.2s; cursor: pointer; width: 100%; text-align: left;
}
.contact-quick-link:hover { border-color: var(--red); color: var(--black); }
.contact-quick-icon { color: var(--red); }

/* ── Modal ───────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.7); align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #fff; padding: 48px; max-width: 480px; width: 90%;
  position: relative;
}
.modal-close-btn {
  position: absolute; top: 16px; right: 16px;
  font-size: 24px; color: var(--muted); transition: color 0.2s;
}
.modal-close-btn:hover { color: var(--black); }

/* ── Podcast CTA section ─────────────────────── */
#podcast-sec {
  position: relative;
  background-size: cover; background-position: center;
}
#podcast-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.72); }
#podcast-content { position: relative; z-index: 1; }

/* ── About mission grid ──────────────────────── */
.mission-cell {
  padding: 32px; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.mission-cell:last-child { border-right: none; }
.mission-icon { color: var(--red); margin: 0 auto 16px; }

/* ── Speaking topics ─────────────────────────── */
.speak-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.speak-dot { width: 6px; height: 6px; background: var(--red); flex-shrink: 0; margin-top: 8px; }

/* ── Footer ──────────────────────────────────── */
#footer { background: var(--black); padding: 80px 0 40px; }
#footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-logo { font-family: var(--serif); font-size: 28px; font-weight: 900; margin-bottom: 14px; color: #fff; }
.footer-desc { color: rgba(255,255,255,0.45); font-size: 14px; line-height: 1.75; max-width: 360px; margin-bottom: 24px; }
.footer-socials { display: flex; gap: 10px; }
.footer-social {
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45); transition: all 0.2s;
}
.footer-social:hover { border-color: var(--red); color: var(--red); }
.footer-col-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 18px;
}
.footer-link { display: block; color: rgba(255,255,255,0.45); font-size: 14px; margin-bottom: 10px; transition: color 0.2s; }
.footer-link:hover { color: #fff; }
.footer-link-r { color: var(--red); font-weight: 500; }
.footer-link-r:hover { color: var(--red-d); }
.footer-bar {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.25); }
.footer-legal { display: flex; gap: 24px; }

/* ── Animations ──────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-1 { animation: fadeUp 0.6s ease both; }
.anim-2 { animation: fadeUp 0.6s 0.12s ease both; }
.anim-3 { animation: fadeUp 0.6s 0.24s ease both; }
.anim-4 { animation: fadeUp 0.6s 0.36s ease both; }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 960px) {
  #nav-links, #nav-buy { display: none !important; }
  #nav-hamburger { display: flex !important; }
  .g2       { grid-template-columns: 1fr; gap: 32px; }
  .g2-book  { grid-template-columns: 1fr; }
  .g3       { grid-template-columns: 1fr; }
  .g4       { grid-template-columns: 1fr 1fr; }
  #hero-grid { grid-template-columns: 1fr; padding: 48px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .review-card:nth-child(2) { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}
@media (max-width: 600px) {
  .g4 { grid-template-columns: 1fr; }
  .sec { padding: 56px 16px; }
  .sec-lg { padding: 72px 16px; }
  .nl-box { padding: 24px; }
  .feat-cell { padding: 24px; }
  .feat-cell:last-child { border-right: none; }
  .footer-bar { flex-direction: column; gap: 16px; text-align: center; }
  .btn-outline-w { width: 100%; }
}

/* ── Article cards ───────────────────────────── */
.art-card {
  background: var(--white);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.art-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.10); transform: translateY(-2px); }
.art-card-body  { flex: 1; }

@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════
   Article reading experience
═══════════════════════════════════════════════ */

/* Progress bar */
#read-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px;
  background: var(--red); width: 0%;
  z-index: 9999; transition: width 0.1s linear;
  pointer-events: none;
}

/* Article header */
.art-detail-header {
  padding: 64px 24px 48px;
  border-bottom: 1px solid var(--border);
  background: var(--off);
}
.art-detail-header-inner {
  max-width: var(--art-max-w, 720px);
  margin: 0 auto;
}
.art-meta-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.art-category-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; background: var(--red); color: #fff;
  padding: 4px 12px;
}
.art-reading-time {
  font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px;
}
.art-detail-title {
  font-family: var(--serif); font-size: clamp(28px, 5vw, 52px);
  font-weight: 900; line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 20px; color: var(--text, var(--black));
}
.art-detail-excerpt {
  font-size: 19px; line-height: 1.65; color: var(--muted);
  max-width: 620px; border-left: 3px solid var(--red); padding-left: 20px;
}

/* Article body prose */
.art-prose {
  font-size: var(--art-font-size, 18px);
  line-height: 1.85;
  color: var(--text, var(--black));
  font-family: var(--art-font, var(--serif));
  max-width: var(--art-max-w, 720px);
  margin: 0 auto;
}
.art-prose > * { margin-bottom: 1.5em; }
.art-prose > *:last-child { margin-bottom: 0; }

/* Headings inside prose */
.art-prose h2 {
  font-family: var(--serif); font-size: 1.65em; font-weight: 800;
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text, var(--black));
  margin-top: 2.5em; margin-bottom: 0.6em;
  padding-bottom: 0.3em; border-bottom: 2px solid var(--red);
  display: inline-block; width: 100%;
}
.art-prose h3 {
  font-family: var(--serif); font-size: 1.3em; font-weight: 700;
  color: var(--text, var(--black));
  margin-top: 2em; margin-bottom: 0.5em;
}
.art-prose h4 {
  font-size: 1em; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  margin-top: 1.8em; margin-bottom: 0.4em;
}

/* Paragraphs */
.art-prose p { color: var(--text, var(--black)); }

/* Drop cap */
.art-prose p.drop-cap::first-letter {
  font-family: var(--serif); font-size: 4.5em; font-weight: 900;
  float: left; line-height: 0.75; margin: 0.08em 0.1em 0 0;
  color: var(--red);
}

/* Pull quotes */
.art-prose blockquote {
  margin: 2.5em 0; padding: 0;
  border: none; background: none;
}
/* Accent style (default) */
.art-prose blockquote.pq-accent {
  border-left: 4px solid var(--red);
  padding: 8px 28px; background: var(--off);
  font-size: 1.25em; font-style: italic;
  line-height: 1.5; color: var(--text, var(--black));
}
/* Minimal style */
.art-prose blockquote.pq-minimal {
  text-align: center; font-size: 1.4em; font-style: italic;
  font-family: var(--serif); color: var(--text, var(--black));
  padding: 24px 0; line-height: 1.4;
}
.art-prose blockquote.pq-minimal::before { content: '\201C'; font-size: 3em; line-height: 0; vertical-align: -0.4em; color: var(--red); margin-right: 4px; }
.art-prose blockquote.pq-minimal::after  { content: '\201D'; font-size: 3em; line-height: 0; vertical-align: -0.4em; color: var(--red); margin-left: 4px; }
/* Bordered style */
.art-prose blockquote.pq-bordered {
  border: 2px solid var(--border); padding: 28px 32px;
  font-size: 1.2em; font-style: italic;
  color: var(--text, var(--black));
}

/* Callout / aside boxes */
.art-prose aside, .art-prose .callout {
  background: var(--off); border: 1px solid var(--border);
  border-left: 4px solid var(--red); padding: 20px 24px;
  font-size: 0.92em; border-radius: 0;
}
.art-prose aside strong, .art-prose .callout strong { display: block; margin-bottom: 6px; color: var(--red); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Inline code */
.art-prose code {
  font-family: 'Courier New', monospace; font-size: 0.88em;
  background: var(--gray); padding: 2px 6px; color: var(--red);
}
/* Code blocks */
.art-prose pre {
  background: var(--black); color: #f8f8f2; padding: 24px;
  overflow-x: auto; font-family: 'Courier New', monospace;
  font-size: 0.85em; line-height: 1.7;
}
.art-prose pre code { background: none; color: inherit; padding: 0; }

/* Figures */
.art-prose figure { margin: 2em 0; }
.art-prose figure img { width: 100%; display: block; }
.art-prose figcaption { font-size: 13px; color: var(--muted); text-align: center; padding-top: 10px; font-style: italic; }

/* Links */
.art-prose a { color: var(--red); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.art-prose a:hover { text-decoration-color: var(--red); }

/* Lists */
.art-prose ul, .art-prose ol { padding-left: 1.6em; }
.art-prose li { margin-bottom: 0.4em; }
.art-prose ul li::marker { color: var(--red); }

/* Section divider shorthand */
.art-prose hr {
  display: block;
  border: none;
  height: 0;
  margin: 3.5em auto !important;  /* !important overrides the > * 1.5em rule */
  max-width: 100%;
  overflow: visible;
  text-align: center;
  position: static;
  background: none;
}
/* Replace the line+pseudoelement approach with a pure text ornament —
   no background-color needed, works on any section background */
.art-prose hr::before {
  content: '· · ·';
  display: inline-block;
  font-size: 20px;
  letter-spacing: 0.5em;
  color: var(--muted);
  line-height: 1;
}
.art-prose hr::after {
  content: none;  /* remove the old line-masking approach */
}

/* Author box */
.art-author-box {
  border: 1px solid var(--border); background: var(--off);
  padding: 32px; display: flex; gap: 20px; align-items: flex-start;
  margin-top: 56px;
}
.art-author-byline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.art-author-name { font-family: var(--serif); font-size: 22px; font-weight: 700; margin-bottom: 8px; }

/* Share row */
.art-share-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 28px 0; border-top: 1px solid var(--border); margin-top: 48px;
}
.art-share-btn {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); background: none; border: 1px solid var(--border);
  padding: 7px 14px; cursor: pointer; transition: all 0.15s; text-decoration: none; display: inline-block;
}
.art-share-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }