/* ============================================================
   Dream Keeper — SEO Blog & Sonnik public pages
   Дизайн-канон «Шесть оптик»: docs/design/assets/tokens.css
   Mobile-first, минимум JS (FAQ на <details>).
   Тема: дефолт = prefers-color-scheme; ручной выбор = localStorage('blog-theme').
   ============================================================ */

/* --- Неизменяемые токены (не зависят от темы) ---- */
:root {
  --amber:        #ff8f00;
  --amber-bright: #ffab40;
  --amber-deep:   #e05c00;

  --symbol:  #ffb866;
  --emotion: #ff7aa2;
  --body:    #6fd1c4;

  --ok:     #58d38a;
  --danger: #ff6b6b;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 26px;

  --maxw: 680px;

  --ff-serif: "Spectral", Georgia, "Times New Roman", serif;
  --ff-sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Тёмная тема (текущая ночь + янтарь, смягчён контраст) ---- */
:root,
html[data-theme="dark"] {
  --ink-900: #07080d;
  --ink-850: #0a0c12;
  --ink-800: #0f1119;
  --ink-750: #141823;
  --ink-700: #1b2030;

  --line:        rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);

  --text:   #edeef3;
  --dim:    #969cab;
  --faint:  #646a79;

  /* brandbar dark */
  --brandbar-bg:     linear-gradient(180deg, rgba(7,8,13,0.92), rgba(7,8,13,0.6));
  --brandbar-border: rgba(255,255,255,0.07);

  /* atmosphere dark */
  --atmo-top: rgba(255,143,0,0.09);
  --atmo-from: #0a0c12;
  --atmo-to: #07080d;

  /* floating CTA dark */
  --cta-float-bg:     rgba(10,12,18,0.92);
  --cta-float-border: rgba(255,255,255,0.14);
}

/* --- Светлая тема: тёплая, мягкая, комфортная для чтения ---- */
html[data-theme="light"] {
  --ink-900: #FBF8F3;   /* кремово-белый фон страницы */
  --ink-850: #F5F0E8;   /* чуть темнее — для subtle-блоков */
  --ink-800: #EDE8DE;   /* карточки / details / blockquote */
  --ink-750: #E4DDD2;   /* чуть темнее карточки */
  --ink-700: #D9D1C4;   /* code background, опт. вложения */

  --line:        rgba(42,38,34,0.10);
  --line-strong: rgba(42,38,34,0.20);

  --text:   #2A2622;   /* тёмно-графитовый, мягкий */
  --dim:    #5C544A;   /* средний — для dim-текста */
  --faint:  #8C8278;   /* слабый — даты, мета */

  /* На светлом фоне янтарный акцент #ff8f00 может плохо читаться как ссылка.
     Притемняем чуть для WCAG AA (4.5:1 на #FBF8F3): #e05c00 = ~6.3:1 ✓ */
  --amber:        #e05c00;
  --amber-bright: #e05c00;
  --amber-deep:   #c04e00;

  /* brandbar light */
  --brandbar-bg:     linear-gradient(180deg, rgba(251,248,243,0.95), rgba(251,248,243,0.80));
  --brandbar-border: rgba(42,38,34,0.12);

  /* atmosphere light — тёплый туман, не резкий */
  --atmo-top: rgba(255,143,0,0.05);
  --atmo-from: #F5F0E8;
  --atmo-to: #FBF8F3;

  /* floating CTA light */
  --cta-float-bg:     rgba(251,248,243,0.95);
  --cta-float-border: rgba(42,38,34,0.15);
}

/* --- Системная светлая тема (если пользователь не выбрал явно) ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink-900: #FBF8F3;
    --ink-850: #F5F0E8;
    --ink-800: #EDE8DE;
    --ink-750: #E4DDD2;
    --ink-700: #D9D1C4;

    --line:        rgba(42,38,34,0.10);
    --line-strong: rgba(42,38,34,0.20);

    --text:   #2A2622;
    --dim:    #5C544A;
    --faint:  #8C8278;

    --amber:        #e05c00;
    --amber-bright: #e05c00;
    --amber-deep:   #c04e00;

    --brandbar-bg:     linear-gradient(180deg, rgba(251,248,243,0.95), rgba(251,248,243,0.80));
    --brandbar-border: rgba(42,38,34,0.12);

    --atmo-top: rgba(255,143,0,0.05);
    --atmo-from: #F5F0E8;
    --atmo-to: #FBF8F3;

    --cta-float-bg:     rgba(251,248,243,0.95);
    --cta-float-border: rgba(42,38,34,0.15);
  }
}

/* --- Переключатель темы ---- */
.btn-theme {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 5px 8px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
}
.btn-theme:hover {
  color: var(--text);
  border-color: var(--amber);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--amber-bright); }
img { max-width: 100%; border-radius: var(--radius-sm); }

/* ---- Atmospheric backdrop ---- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 70% at 50% -8%, var(--atmo-top, rgba(255,143,0,0.09)), transparent 55%),
    linear-gradient(180deg, var(--atmo-from, var(--ink-850)) 0%, var(--atmo-to, var(--ink-900)) 38%, var(--atmo-to, var(--ink-900)) 100%);
  pointer-events: none;
}

/* ---- Layout ---- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- Brand bar / nav ---- */
.brandbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brandbar-bg, linear-gradient(180deg, rgba(7,8,13,0.92), rgba(7,8,13,0.6)));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--brandbar-border, var(--line));
  padding: 0 20px;
}
.brandbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 52px;
  gap: 20px;
}
.wordmark {
  font-family: var(--ff-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.brandbar-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.brandbar-nav::-webkit-scrollbar { display: none; }
.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover, .nav-link.active {
  color: var(--text);
  background: var(--line);
}
/* Языковой переключатель: тонкая обводка-пилюля, отделена от основных пунктов. */
.nav-lang {
  border: 1px solid var(--line);
  margin-left: 4px;
}
.nav-lang:hover {
  border-color: var(--amber-bright, var(--text));
}
.btn-open {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  background: var(--amber);
  padding: 7px 16px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.btn-open:hover { background: var(--amber-bright); color: var(--ink-900); }

/* ---- Main content ---- */
main {
  padding-top: 48px;
  padding-bottom: 80px;
}

/* ---- Page hero ---- */
.page-hero {
  padding: 52px 0 36px;
  text-align: center;
}
.page-hero h1 {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--text);
}
.page-hero .sub {
  font-size: 16px;
  color: var(--dim);
  max-width: 480px;
  margin: 0 auto;
}

/* ---- Article card (blog_index) ---- */
.articles-grid {
  display: grid;
  gap: 20px;
}
.art-card {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.2s, transform 0.2s;
  display: block;
  color: var(--text);
}
.art-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  color: var(--text);
}
.art-card-date {
  font-size: 12px;
  color: var(--faint);
  margin-bottom: 8px;
}
.art-card h2 {
  font-family: var(--ff-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 10px;
}
.art-card p {
  font-size: 14px;
  color: var(--dim);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--dim);
}
.empty-state p { font-size: 15px; }

/* ---- Pagination ---- */
.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}
.pag-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--dim);
  transition: border-color 0.15s, color 0.15s;
}
.pag-btn:hover, .pag-btn.active {
  border-color: var(--amber);
  color: var(--amber-bright);
}
.pag-btn:disabled, .pag-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ---- Blog post article ---- */
.post-header { padding: 52px 0 32px; }
.post-header h1 {
  font-family: var(--ff-serif);
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 16px;
}
.post-meta {
  font-size: 13px;
  color: var(--faint);
  margin-bottom: 12px;
}
.post-cover {
  width: 100%;
  border-radius: var(--radius);
  margin-top: 24px;
  display: block;
}

/* ---- Body HTML from md ---- */
.post-body {
  font-size: 17px;
  line-height: 1.8;
}
.post-body h2 {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 600;
  margin: 2em 0 0.6em;
  color: var(--text);
}
.post-body h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 1.6em 0 0.5em;
}
.post-body p { margin: 0 0 1em; }
.post-body ul, .post-body ol {
  padding-left: 1.4em;
  margin: 0 0 1em;
}
.post-body li { margin-bottom: 0.3em; }
.post-body strong { font-weight: 600; color: var(--text); }
.post-body em { font-style: italic; color: var(--dim); }
.post-body code {
  font-family: monospace;
  font-size: 0.88em;
  background: var(--ink-700);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--amber-bright);
}
.post-body blockquote {
  border-left: 3px solid var(--amber);
  margin: 1.5em 0;
  padding: 12px 20px;
  background: var(--ink-800);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--dim);
  font-style: italic;
}

/* ---- Accent spans (из Gemini) ---- */
.accent-symbol { color: var(--symbol); }
.accent-emotion { color: var(--emotion); }
.accent-body    { color: var(--body); }

/* ---- FAQ (details/summary) ---- */
.faq-section { margin-top: 40px; }
.faq-section h2 {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}
details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  background: var(--ink-800);
  overflow: hidden;
}
details[open] { border-color: var(--line-strong); }
summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  font-size: 20px;
  color: var(--amber);
  flex-shrink: 0;
  transition: transform 0.2s;
}
details[open] summary::after {
  content: "−";
}
details p {
  margin: 0;
  padding: 0 20px 16px;
  font-size: 14px;
  color: var(--dim);
  line-height: 1.6;
}

/* ---- Author block ---- */
.author-block {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin: 36px 0;
}
.author-block h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--amber-bright);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.author-block p {
  font-size: 14px;
  color: var(--dim);
  margin: 0;
  line-height: 1.6;
}
.author-block a { color: var(--amber-bright); text-decoration: underline; }
.author-block strong { color: var(--text); font-weight: 600; }

/* ---- Medical / YMYL disclaimer ---- */
.med-disclaimer {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--faint);
  border-left: 2px solid var(--line-strong);
  padding: 2px 0 2px 14px;
  margin: 0 0 36px;
}

/* ---- Breadcrumbs (видимые, синхронны с BreadcrumbList JSON-LD) ---- */
.breadcrumbs {
  font-size: 13px;
  color: var(--faint);
  margin: 18px 0 6px;
  line-height: 1.5;
}
.breadcrumbs a { color: var(--dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--amber-bright); }
.breadcrumbs .bc-sep { color: var(--faint); margin: 0 7px; }
.breadcrumbs .bc-leaf { color: var(--faint); }

/* ---- CTA block ---- */
.cta-block {
  text-align: center;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.cta-block p {
  font-size: 16px;
  color: var(--dim);
  margin-bottom: 20px;
}
.btn-primary {
  display: inline-block;
  padding: 14px 28px;
  background: var(--amber);
  color: var(--ink-900);
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  text-decoration: none;
}
.btn-primary:hover { background: var(--amber-bright); color: var(--ink-900); }

/* ---- Related articles ---- */
.related-section { margin-top: 48px; }
.related-section h2 {
  font-family: var(--ff-serif);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}
.related-grid {
  display: grid;
  gap: 16px;
}
.related-card {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  display: block;
  transition: border-color 0.15s;
}
.related-card:hover { border-color: var(--line-strong); }
.related-card-date { font-size: 11px; color: var(--faint); margin-bottom: 6px; }
.related-card h3 {
  font-family: var(--ff-serif);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
}

/* ─── Sonnik index ─── */
.sonnik-intro {
  padding: 52px 0 32px;
  text-align: center;
}
.sonnik-intro h1 {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
}
.sonnik-intro .sub {
  font-size: 15px;
  color: var(--dim);
  max-width: 460px;
  margin: 0 auto 16px;
}
.sonnik-intro .blog-link {
  font-size: 14px;
  color: var(--amber-bright);
  text-decoration: underline;
}

.az-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 40px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.az-link {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dim);
  background: var(--ink-800);
  border: 1px solid var(--line);
  transition: color 0.15s, border-color 0.15s;
}
.az-link:hover {
  color: var(--amber-bright);
  border-color: var(--amber);
}

.letter-group { margin-bottom: 36px; }
.letter-anchor {
  font-family: var(--ff-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--amber);
  margin: 0 0 14px;
  padding-top: 12px;
}
.symbol-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.symbol-link {
  display: block;
  padding: 12px 16px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s, color 0.15s;
}
.symbol-link:hover {
  border-color: var(--amber);
  color: var(--amber-bright);
}

/* ─── Sonnik page ─── */
.symbol-hero { padding: 52px 0 32px; }
.symbol-hero h1 {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 20px;
}

.direct-answer {
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 32px;
}
.direct-answer .da-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber);
  font-weight: 700;
  margin-bottom: 8px;
}
.direct-answer p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  color: var(--text);
}

/* ─── Optics table ─── */
.optics-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 36px;
  font-size: 14px;
}
.optics-table caption {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 10px;
  padding-bottom: 6px;
}
.optics-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--amber-bright);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  width: 120px;
}
.optics-table td {
  padding: 10px 14px;
  color: var(--dim);
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.optics-table tr:last-child th,
.optics-table tr:last-child td { border-bottom: none; }
.optics-table tr { background: var(--ink-800); }
.optics-table tr:hover td { color: var(--text); }

/* ─── Optics table — mobile (<480px) ─── */
@media (max-width: 479px) {
  .optics-table,
  .optics-table tbody,
  .optics-table tr,
  .optics-table th,
  .optics-table td {
    display: block;
    width: 100%;
  }
  .optics-table caption {
    display: block;
  }
  .optics-table tr {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--ink-800);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .optics-table tr:last-child { margin-bottom: 0; }
  .optics-table th {
    border-bottom: 1px solid var(--line);
    padding: 10px 14px 8px;
    white-space: normal;
    width: auto;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .optics-table td {
    border-bottom: none;
    padding: 8px 14px 12px;
    font-size: 14px;
    line-height: 1.55;
  }
}

/* ─── Optics sections ─── */
.optic-section {
  margin-bottom: 40px;
  padding-top: 8px;
}
.optic-section h2 {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.optic-section .optic-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--dim);
}
.optic-section .optic-body p { margin: 0 0 0.8em; }

/* ─── Others (другие символы) ─── */
.others-section { margin-top: 48px; }
.others-section h2 {
  font-family: var(--ff-serif);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}
.others-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.other-link {
  display: inline-block;
  padding: 10px 18px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s, color 0.15s;
}
.other-link:hover {
  border-color: var(--amber);
  color: var(--amber-bright);
}

/* ─── Footer ─── */
.footer {
  margin-top: 80px;
  padding: 32px 20px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--faint);
}
.footer .fmark {
  font-family: var(--ff-serif);
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--dim);
}
.footer .links {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.footer .links a {
  color: var(--faint);
  transition: color 0.15s;
}
.footer .links a:hover { color: var(--amber-bright); }

/* ─── Optics table anchor links ─── */
.optics-anchor {
  color: var(--amber-bright);
  text-decoration: none;
  font-weight: 600;
}
.optics-anchor:hover {
  text-decoration: underline;
  color: var(--amber-bright);
}

/* Offset для sticky-шапки при якорном переходе */
.optic-section {
  scroll-margin-top: 64px;
}

/* ─── Floating CTA bar ─── */
#cta-float {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  /* Скрыт по умолчанию — за экраном */
  transform: translateY(100%);
  transition: transform 0.3s ease;
  background: var(--cta-float-bg, rgba(10,12,18,0.92));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--cta-float-border, var(--line-strong));
  padding: 12px 20px;
}
#cta-float.cta-float--visible {
  transform: translateY(0);
}
.cta-float-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-float-text {
  flex: 1;
  font-size: 14px;
  color: var(--dim);
  margin: 0;
  min-width: 160px;
}
.cta-float-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--amber);
  color: var(--ink-900);
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
  text-decoration: none;
}
.cta-float-btn:hover { background: var(--amber-bright); color: var(--ink-900); }
.cta-float-close {
  background: none;
  border: none;
  color: var(--faint);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.cta-float-close:hover { color: var(--text); }

/* ─── Responsive ─── */
@media (min-width: 520px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
  main { padding-top: 64px; }
}