/* main.css — PlayGuitar v3 blog. Source of truth: the approved render
   design/od-blog-single/screens/desktop.html inline <style> (the canonical
   warm reading experience, Jonathan-approved 2026-06-04). Depends on pg-tokens.
   Loaded site-wide; carries chrome (nav/footer/modal) + the single-post layout. */

:root {
  --brand:            #EC7C2A;
  --brand-hover:      #D26B1F;
  --brand-strong:     #B85A14;
  --brand-soft:       #FBEEDE;
  --brand-wash:       #FDF5EC;
  --brand-ring:       rgba(236,124,42,0.28);
  --accent:           #1F7A47;
  --accent-hover:     #185E37;
  --accent-soft:      #E7F2EB;
  --accent-deep:      #123D24;
  --paper:            #FBF9F3;
  --paper-tint:       #F4F2EC;
  --paper-hero:       #F0EFE8;
  --paper-deep:       #E9E5DC;
  --ink-heading:      #1A1A1A;
  --ink-body:         #2D2D2D;
  --ink-muted:        #5C5C5C;
  --ink-light:        #8A8A8A;
  --hairline:         #E4E0D8;
  --dark:             #1B1916;
  --dark-elev:        #2A2723;
  --on-dark:          #FFFFFF;
  --on-dark-muted:    rgba(255,255,255,0.72);
  --on-dark-faint:    rgba(255,255,255,0.45);
  --success:          var(--accent);
  --error:            #C0392B;
  --warning:          var(--brand);
  --font-heading:     'Literata', Georgia, 'Times New Roman', serif;
  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'Courier New', Courier, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; --text-4xl: 2.75rem;
  --h1: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  --h2: clamp(var(--text-xl), 3vw, var(--text-3xl));
  --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.6; --leading-loose: 1.8;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --track-tight: -0.02em; --track-eyebrow: 0.12em;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --width-content: 700px; --width-wide: 960px; --width-max: 1200px; --width-narrow: 560px;
  --container-padding: var(--space-5);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px;
  --shadow-sm: 0 1px 3px rgba(27,25,22,0.06);
  --shadow-md: 0 4px 16px rgba(27,25,22,0.08);
  --shadow-lg: 0 12px 36px rgba(27,25,22,0.12);
  --shadow-focus: 0 0 0 3px var(--brand-ring);
  --transition-fast: 150ms ease;
  --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F1ECE0; color: var(--ink-body); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-loose); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--ink-heading); font-weight: 600; letter-spacing: var(--track-tight); line-height: var(--leading-tight); margin: 0; }
p { margin: 0; }
a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }
img { max-width: 100%; display: block; height: auto; }
button { font-family: inherit; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }
.ribbon { background: var(--paper-hero); border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); color: var(--ink-body); }
.ribbon[hidden] { display: none; }
.ribbon-inner { max-width: var(--width-max); margin: 0 auto; padding: var(--space-3) var(--container-padding); display: flex; align-items: center; gap: var(--space-6); }
.ribbon-text { flex: 1; line-height: var(--leading-snug); }
.ribbon-text strong { color: var(--ink-heading); font-weight: 600; }
.ribbon-form { display: flex; align-items: center; gap: var(--space-2); }
.ribbon-form label { font-size: var(--text-xs); color: var(--ink-muted); margin-right: var(--space-1); }
.ribbon-form input { border: 1px solid var(--hairline); background: var(--paper); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); color: var(--ink-body); width: 220px; }
.ribbon-form input:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); }
.ribbon-form button { background: var(--brand); color: #fff; border: 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background var(--transition-fast); white-space: nowrap; }
.ribbon-form button:hover { background: var(--brand-hover); }
.ribbon-dismiss { background: none; border: 0; color: var(--ink-muted); cursor: pointer; padding: var(--space-1) var(--space-2); font-size: 18px; line-height: 1; border-radius: var(--radius-md); }
.ribbon-dismiss:hover { color: var(--ink-heading); }
@media (max-width: 800px) {
  .ribbon-inner { flex-wrap: wrap; gap: var(--space-3); }
  .ribbon-form { width: 100%; }
  .ribbon-form input { flex: 1; min-width: 0; width: auto; }
}
.nav { background: var(--paper); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: var(--z-sticky); }
.nav-inner { max-width: 1080px; margin: 0 auto; padding: var(--space-4) var(--container-padding); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.nav-logo { display: block; }
.nav-logo img { width: 350px; max-width: none; height: auto; display: block; margin: 0 -88px; }
.nav-links { display: flex; gap: var(--space-8); align-items: center; }
.nav-links a { color: var(--ink-body); text-decoration: none; font-size: var(--text-base); font-weight: 500; transition: color var(--transition-fast); }
.nav-links a:hover { color: var(--brand); }
.nav-actions { display: flex; align-items: center; gap: var(--space-4); }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); color: var(--ink-heading); cursor: pointer; line-height: 0; }
.nav-toggle svg { display: block; }
@media (max-width: 900px) {
  .nav-logo img { width: 240px; }
  .nav-links { gap: var(--space-5); }
  .nav-links a { font-size: var(--text-sm); }
}
@media (max-width: 640px) {
  .nav-logo img { width: 200px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Hamburger reveals the primary links as a dropdown panel below the bar. */
  .nav.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--container-padding);
  }
  .nav.nav-open .nav-links a { width: 100%; padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); font-size: var(--text-base); }
  .nav.nav-open .nav-links a:last-child { border-bottom: none; }
}
.hero { background: transparent; padding: var(--space-6) 0 var(--space-5); }
.hero-inner { max-width: 820px; margin: 0 auto; padding: 0 var(--container-padding); text-align: center; }
.breadcrumb { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--space-6); line-height: var(--leading-normal); }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span.sep { margin: 0 var(--space-2); color: var(--ink-light); }
.kicker { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-size: var(--text-xs); color: var(--ink-muted); font-weight: 600; margin-bottom: var(--space-3); }
.kicker::before { content: ""; width: 7px; height: 7px; background: var(--brand); border-radius: 50%; display: inline-block; }
.hero h1 { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.2; margin-bottom: var(--space-3); text-wrap: balance; }
.hero-meta { font-size: var(--text-sm); color: var(--ink-muted); }
.hero-video-wrap { max-width: 820px; margin: 0 auto var(--space-4); padding: 0 var(--container-padding); }
.hero-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-body); cursor: pointer; box-shadow: var(--shadow-md); display: block; border: 0; padding: 0; width: 100%; }
.hero-video img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.hero-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%); pointer-events: none; }
.hero-video:hover img { transform: scale(1.02); }
.hero-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform var(--transition-fast); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.hero-video:hover .hero-video-play { transform: translate(-50%, -50%) scale(1.05); }
.hero-video-play svg { width: 36px; height: 36px; fill: var(--brand); margin-left: 4px; }
.nav-cta { background: var(--brand); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-weight: 500; text-decoration: none; transition: background var(--transition-fast); }
.nav-cta:hover { background: var(--brand-hover); }
.hero-caption { text-align: center; font-size: var(--text-sm); color: var(--ink-muted); max-width: 820px; margin: 0 auto; padding: 0 var(--container-padding) var(--space-8); }
.body-grid { max-width: 1080px; margin: 0 auto; padding: 0 var(--container-padding) var(--space-20); display: grid; grid-template-columns: minmax(0, 700px) 300px; gap: var(--space-16); }
@media (max-width: 1000px) { .body-grid { grid-template-columns: 1fr; max-width: 700px; gap: var(--space-12); } }
.page-body { max-width: 700px; margin: 0 auto; padding: 0 var(--container-padding) var(--space-20); }
.article { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-body); }
.article p { margin-bottom: 2rem; }
.article p:last-child { margin-bottom: 0; }
/* Prose breathing room — content headings reset to margin:0 otherwise (the "doesn't breathe" root). */
.article :is(h2, h3, h4) { font-family: var(--font-heading); line-height: var(--leading-snug); color: var(--ink-heading); }
.article h2 { font-size: var(--text-2xl); margin: var(--space-12) 0 var(--space-4); }
.article h3 { font-size: var(--text-xl); margin: var(--space-10) 0 var(--space-3); }
.article h4 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.article > :is(h2, h3, h4):first-child { margin-top: 0; }
.article ul, .article ol { margin: 0 0 2rem; padding-left: 1.5rem; }
.article li { margin-bottom: var(--space-2); line-height: var(--leading-normal); }
.article blockquote { margin: var(--space-10) 0; padding-left: var(--space-6); border-left: 3px solid var(--brand); color: var(--ink-muted); font-style: italic; }
.article img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.article a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.pull-quote { font-family: var(--font-heading); font-style: italic; font-size: var(--text-md); line-height: var(--leading-snug); color: var(--ink-heading); border-left: 3px solid var(--brand); padding: var(--space-2) 0 var(--space-2) var(--space-6); margin: var(--space-10) 0 var(--space-10); }
.diagram-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); margin: var(--space-10) 0; box-shadow: var(--shadow-sm); }
.diagram-title { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--ink-heading); text-align: center; margin-bottom: var(--space-8); font-weight: 600; }
.strum-grid { display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; margin: 0 auto; max-width: 540px; }
.strum-count { text-align: center; font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: var(--text-base); color: var(--ink-muted); font-weight: 600; padding-bottom: var(--space-3); border-bottom: 1.5px solid #B5AFA3; }
.strum-stroke { text-align: center; padding-top: var(--space-5); font-size: 1.9rem; color: var(--ink-heading); font-weight: 600; line-height: 1; }
.strum-stroke.slap { color: var(--brand); font-weight: 700; }
.strum-stroke.rest { color: var(--ink-light); }
.strum-legend { text-align: center; font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-6); line-height: var(--leading-normal); }
.mid-cta { background: transparent; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); border-radius: 0; padding: var(--space-8) var(--space-4); margin: var(--space-12) 0; text-align: center; }
.mid-cta h3 { font-size: var(--text-xl); color: var(--ink-heading); margin-bottom: var(--space-3); }
.mid-cta > p { color: var(--ink-body); font-size: var(--text-base); line-height: var(--leading-normal); margin: 0 auto var(--space-6); max-width: 480px; }
.mid-cta-form { display: flex; gap: var(--space-3); max-width: 480px; margin: 0 auto; flex-wrap: wrap; align-items: flex-end; justify-content: center; }
.mid-cta-form .field { flex: 1; min-width: 200px; text-align: left; }
.mid-cta-form label { display: block; font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: var(--space-2); font-weight: 500; }
.mid-cta-form input { width: 100%; border: 1px solid var(--hairline); background: var(--paper); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); color: var(--ink-body); }
.mid-cta-form input:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); }
.btn-primary { background: var(--brand); color: #fff; border: 0; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: background var(--transition-fast); white-space: nowrap; }
.btn-primary:hover { background: var(--brand-hover); }
.go-deeper { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-8); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6); margin: var(--space-12) 0; align-items: center; box-shadow: var(--shadow-sm); }
@media (max-width: 640px) { .go-deeper { grid-template-columns: 1fr; padding: var(--space-5); } }
.go-deeper-img { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); background: var(--paper-tint); }
.go-deeper-img img { width: 100%; height: auto; display: block; }
.go-deeper-eyebrow { text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-size: var(--text-xs); color: var(--brand); font-weight: 600; margin-bottom: var(--space-3); font-family: var(--font-body); }
.go-deeper h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); line-height: var(--leading-snug); }
.go-deeper > div > p { color: var(--ink-body); font-size: var(--text-base); line-height: var(--leading-normal); margin-bottom: var(--space-5); }
.btn-orange { display: inline-block; background: var(--brand); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; text-decoration: none; transition: background var(--transition-fast); }
.btn-outline { display: inline-block; background: transparent; color: var(--ink-heading); border: 1px solid var(--ink-heading); padding: calc(var(--space-3) - 1px) calc(var(--space-5) - 1px); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); }
.btn-outline:hover { background: var(--ink-heading); color: var(--paper); }
.btn-orange:hover { background: var(--brand-hover); color: #fff; }
.tags-block { margin: var(--space-12) 0 var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
.tags-block h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-muted); font-family: var(--font-body); font-weight: 600; margin-bottom: var(--space-4); }
.tag-chips { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.tag-chip { background: var(--paper-tint); color: var(--ink-body); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-size: var(--text-sm); text-decoration: none; border: 1px solid var(--hairline); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.tag-chip:hover { background: var(--brand-soft); color: var(--ink-heading); border-color: var(--brand-soft); }
.comments { margin-top: var(--space-12); }
.comments-title { font-size: var(--text-xl); margin-bottom: var(--space-8); }
.comment { padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }
.comment:last-of-type { border-bottom: 1px solid var(--hairline); }
.comment-meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.comment-author { font-weight: 600; color: var(--ink-heading); font-size: var(--text-base); font-family: var(--font-body); }
.comment-tag { font-size: var(--text-sm); color: var(--ink-muted); font-weight: 400; }
.author-badge { background: var(--brand); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-body); }
.comment-body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink-body); }
.comment-reply { margin-left: var(--space-10); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px dashed var(--hairline); }
@media (max-width: 640px) { .comment-reply { margin-left: var(--space-5); } }
/* "Leave a comment" block. WP renders the title as .comment-form-title OUTSIDE the
   <form> (inside #respond), so the old `.comment-form h4` never matched — the title
   was unstyled and the form's margin-top became a big gap under it. Style the real
   title and put the top separation on #respond instead. */
.comment-respond { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--hairline); }
.comment-form-title { font-family: var(--font-heading); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink-heading); margin: 0 0 var(--space-5); }
.comment-form-title small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; margin-left: var(--space-3); }
.comment-form { margin-top: 0; padding-top: 0; }
.comment-form .form-submit { margin: var(--space-5) 0 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field-label { display: block; font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--space-2); font-weight: 500; }
.field-input, .field-textarea { width: 100%; border: 1px solid var(--hairline); background: var(--paper); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); color: var(--ink-body); }
.field-textarea { min-height: 140px; resize: vertical; line-height: var(--leading-normal); margin-bottom: var(--space-5); }
.field-input:focus, .field-textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); }
.sidebar { position: sticky; top: 96px; align-self: start; }
@media (max-width: 1000px) { .sidebar { position: static; top: auto; } }
.sidebar-optin { background: #1B1916; color: var(--on-dark); padding: var(--space-6); border-radius: var(--radius-lg); margin-bottom: var(--space-10); }
.sidebar-optin-eyebrow { text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-size: var(--text-xs); color: var(--brand); font-weight: 600; margin-bottom: var(--space-3); font-family: var(--font-body); }
.sidebar-optin h3 { font-family: var(--font-heading); color: var(--on-dark); font-size: var(--text-xl); margin-bottom: var(--space-3); line-height: 1.25; }
.sidebar-optin p { font-size: var(--text-sm); line-height: var(--leading-normal); color: rgba(255,255,255,0.85); margin-bottom: var(--space-5); }
.sidebar-optin label { display: block; font-size: var(--text-xs); color: rgba(255,255,255,0.72); margin-bottom: var(--space-2); font-weight: 500; }
.sidebar-optin input { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.5); background: #FBF9F3; padding: var(--space-3); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); color: var(--ink-body); margin-bottom: var(--space-4); }
.sidebar-optin input::placeholder { color: rgba(255,255,255,0.5); }
.sidebar-optin input:focus { outline: none; border-color: var(--brand); background: rgba(255,255,255,0.15); box-shadow: var(--shadow-focus); }
.sidebar-optin button { width: 100%; background: var(--brand); color: #fff; border: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: background var(--transition-fast); }
.sidebar-optin button:hover { background: var(--brand-hover); }
.sidebar-optin small { display: block; text-align: center; margin-top: var(--space-3); font-size: var(--text-xs); color: rgba(255,255,255,0.55); }
.sidebar-block { margin-bottom: var(--space-10); }
.sidebar-block h4 { font-family: var(--font-heading); font-size: var(--text-md); text-transform: none; letter-spacing: 0; color: var(--ink-heading); font-weight: 600; margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 2px solid var(--accent); }
.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { margin: 0; border-bottom: 1px solid var(--hairline); }
.sidebar-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; color: var(--ink-body); text-decoration: none; font-size: var(--text-base); line-height: var(--leading-snug); transition: color var(--transition-fast); }
.sidebar-list a:hover { color: var(--brand); }
.popular-list a { font-family: var(--font-heading); }
.related { background: var(--paper-tint); padding: var(--space-20) 0; border-top: 1px solid var(--hairline); }
.related-inner { max-width: var(--width-max); margin: 0 auto; padding: 0 var(--container-padding); }
.related h2 { font-family: var(--font-heading); font-size: var(--h2); margin-bottom: var(--space-12); text-align: center; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; } }
.related-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition-fast), box-shadow var(--transition-fast); text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: inherit; }
.related-thumb { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-muted); font-weight: 600; font-family: var(--font-body); border-bottom: 1px solid var(--hairline); }
.related-card:nth-child(1) .related-thumb { background: var(--paper-hero); }
.related-card:nth-child(2) .related-thumb { background: var(--accent-soft); }
.related-card:nth-child(3) .related-thumb { background: var(--brand-wash); }
.related-thumb.has-img { padding: 0; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-content { padding: var(--space-6); }
.related-content h3 { font-family: var(--font-heading); font-size: var(--text-lg); margin-bottom: var(--space-3); line-height: var(--leading-snug); color: var(--ink-heading); }
.related-content p { color: var(--ink-body); font-size: var(--text-base); line-height: var(--leading-normal); margin: 0; }
/* Always leave breathing room above the footer — never ram content into it. */
.footer { background: var(--dark); color: var(--on-dark); padding: var(--space-20) 0 var(--space-8); margin-top: var(--space-12); }
/* When a full-bleed section (e.g. "More like this") already precedes the footer, drop
   the top gap so the section connects straight to the dark footer — no page-bg strip. */
.related + .footer { margin-top: 0; }
.footer-inner { max-width: var(--width-max); margin: 0 auto; padding: 0 var(--container-padding); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-10); } }
.footer-brand img { width: 220px; height: auto; margin-bottom: var(--space-5); }
.footer-brand p { color: rgba(255,255,255,0.72); font-size: var(--text-base); line-height: var(--leading-normal); margin-bottom: var(--space-5); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a { width: 38px; height: 38px; background: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--on-dark); text-decoration: none; transition: background var(--transition-fast); }
.footer-social a:hover { background: var(--brand); color: #fff; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-links h4 { font-family: var(--font-body); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: rgba(255,255,255,0.55); margin-bottom: var(--space-5); font-weight: 600; }
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: var(--space-3); }
.footer-links a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: var(--text-base); transition: color var(--transition-fast); }
.footer-links a:hover { color: var(--brand); }
.footer-cta h4 { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--on-dark); margin-bottom: var(--space-4); text-transform: none; letter-spacing: 0; }
.footer-cta label { display: block; font-size: var(--text-xs); color: rgba(255,255,255,0.55); margin-bottom: var(--space-2); }
.footer-cta input { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.4); background: #FBF9F3; color: var(--ink-body); padding: var(--space-3); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.footer-cta input::placeholder { color: rgba(255,255,255,0.4); }
.footer-cta input:focus { outline: none; border-color: var(--brand); background: rgba(255,255,255,0.10); box-shadow: var(--shadow-focus); }
.footer-cta button { width: 100%; background: var(--brand); color: #fff; border: 0; padding: var(--space-3); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: background var(--transition-fast); }
.footer-cta button:hover { background: var(--brand-hover); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-6); font-size: var(--text-sm); color: rgba(255,255,255,0.55); flex-wrap: wrap; gap: var(--space-3); }
.footer-tagline { font-family: var(--font-heading); font-style: italic; color: rgba(255,255,255,0.72); }

.sidebar-list li:last-child { border-bottom: 0; }
.sidebar-list a:hover { color: var(--brand); }
.sidebar-list .count { flex: none; font-size: var(--text-xs); color: var(--ink-muted); background: var(--paper-tint); padding: 2px 10px; border-radius: 999px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(27,25,22,0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--space-5); }
.modal-backdrop[hidden] { display: none; }
.modal-card { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 440px; width: 100%; padding: var(--space-10) var(--space-8); position: relative; }
.modal-close { position: absolute; top: var(--space-4); right: var(--space-4); background: transparent; border: 0; font-size: 26px; line-height: 1; color: var(--ink-muted); cursor: pointer; }
.modal-eyebrow { text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-size: var(--text-xs); color: var(--brand); font-weight: 600; margin-bottom: var(--space-3); }
.modal-title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--ink-heading); margin: 0 0 var(--space-3); line-height: 1.2; }
.modal-body { font-size: var(--text-base); color: var(--ink-body); line-height: var(--leading-normal); margin: 0 0 var(--space-5); }
.modal-card input { width: 100%; box-sizing: border-box; border: 1px solid var(--hairline); background: #fff; padding: var(--space-3); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); color: var(--ink-body); margin-bottom: var(--space-3); }
/* The opt-in form inside the modal (pg_blog_optin_form('modal')) — its headline,
   blurb, button and privacy line had no rules, so they rendered raw. Match the card. */
.modal-card h3 { font-family: var(--font-heading); color: var(--ink-heading); font-size: var(--text-xl); line-height: 1.25; margin: 0 0 var(--space-3); }
.modal-card p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-body); margin: 0 0 var(--space-5); }
.modal-card button { width: 100%; background: var(--brand); color: #fff; border: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: background var(--transition-fast); }
.modal-card button:hover { background: var(--brand-hover); }
.modal-card small { display: block; text-align: center; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--ink-muted); }
.modal-card .optin-form__message { margin-top: var(--space-3); font-size: var(--text-sm); }
.modal-submit { width: 100%; background: var(--brand); color: #fff; border: 0; padding: var(--space-3); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: background var(--transition-fast); }
.modal-submit:hover { background: var(--brand-hover); }
.modal-note { display: block; text-align: center; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--ink-light); }
.sidebar-optin input::placeholder, .footer-cta input::placeholder, .modal-card input::placeholder { color: #6E6A63; opacity: 1; }