/*
 * Articles + section index pages — warm-editorial recolor + typography.
 * Scoped under body.content-page so this file ONLY applies to pages that
 * still use templates/page.html or templates/section.html. Pages with
 * their own redesigned templates (.hp-page, .sv-page, .ab-page) are not
 * affected — their scoped CSS keeps full control.
 *
 * What this file changes:
 *   • page bg → warm off-white, fg → warm near-black
 *   • pico-primary → forest (recolors links, footer-CTA primary, TOC)
 *   • article headings → Lora display serif (Inter body unchanged)
 *   • article excerpt → italic serif lead
 *   • blockquote, hr → editorial
 *
 * What this file deliberately leaves alone (path-X scope):
 *   • <pre><code> blocks (Prism.js syntax highlighting stays)
 *   • Mermaid SVG diagrams (pre-rendered, own viewBox)
 *   • Skill / library / example banners (own amber/green/blue palette)
 *   • Tables (mostly — light editorial border only)
 *   • Sidebar TOC + related (links recolored via pico-primary cascade)
 *   • Breadcrumb structure (only color via pico-primary cascade)
 */

.content-page {
  --content-bg:      #FAF7F2;
  --content-fg:      #1C1A17;
  --content-accent:  #2F5B4F;
  --content-muted:   #8A817A;
  --content-border:  rgba(47, 91, 79, 0.12);

  --content-font-display: 'Lora', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;

  /* override pico-primary on this surface — cascades into all <a>, button,
     :focus rings, sidebar TOC etc. that pico styles via this var. */
  --pico-primary:           #2F5B4F;
  --pico-primary-hover:     #244640;
  --pico-primary-focus:     rgba(47, 91, 79, 0.25);
  --pico-primary-underline: rgba(47, 91, 79, 0.4);
}

/* page-level surface */
.content-page,
.content-page body { background: var(--content-bg); }
.content-page main.container { color: var(--content-fg); }

/* ── article headings — Lora display ──────────────────────────── */
.content-page article h1,
.content-page article h2,
.content-page article h3,
.content-page article h4,
.content-page article h5 {
  font-family: var(--content-font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--content-fg);
}
.content-page article h1 { font-size: 2.4rem; line-height: 1.1; letter-spacing: -0.02em; }
.content-page article h2 { font-size: 1.7rem; line-height: 1.2;  margin-top: 2.5rem; }
.content-page article h3 { font-size: 1.3rem; line-height: 1.3;  margin-top: 1.75rem; }
.content-page article h4 { font-size: 1.1rem; }

/* page-level title block from section.html (still uses .article-header).
   page.html has switched to .article-hero (editorial) — see below. */
.content-page .article-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.content-page .article-header .article-excerpt {
  font-family: var(--content-font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--content-muted);
  max-width: 64ch;
  margin: 0 0 2.5rem;
}

/* ── editorial article hero (page.html) ────────────────────────── */
.content-page .article-hero {
  margin: 2rem 0 3.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--content-border);
}
.content-page .article-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--content-accent);
  margin: 0 0 1.5rem;
}
.content-page .article-eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(47, 91, 79, 0.5);
}
.content-page .article-eyebrow a:hover {
  border-bottom-style: solid;
}
.content-page .article-eyebrow time {
  color: var(--content-muted);
}
.content-page .article-eyebrow-dot {
  margin: 0 0.5rem;
  color: var(--content-muted);
}
.content-page .article-h1 {
  font-family: var(--content-font-display);
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--content-fg);
  margin: 0 0 1.5rem;
  /* override pico's default heading rules for this slot */
  text-wrap: balance;
}
.content-page .article-lead {
  font-family: var(--content-font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--content-muted);
  max-width: 60ch;
  margin: 0 0 2rem;
}
.content-page .article-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--content-muted);
  margin: 0;
}
.content-page .article-meta a {
  color: var(--content-fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--content-border);
}
.content-page .article-meta a:hover { color: var(--content-accent); border-bottom-style: solid; }
.content-page .article-meta-dot {
  margin: 0 0.6rem;
  color: var(--content-border);
}

/* ── editorial article footer (page.html) ──────────────────────── */
.content-page .article-footer {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--content-border);
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

/* author byline */
.content-page .article-byline {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.content-page .article-byline-meta { flex: 1; }
.content-page .article-byline-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--content-accent);
  margin: 0 0 0.5rem;
}
.content-page .article-byline-name {
  font-family: var(--content-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
  color: var(--content-fg);
}
.content-page .article-byline-role {
  font-size: 0.95rem;
  color: var(--content-muted);
  margin: 0 0 0.75rem;
}
.content-page .article-byline-cta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0;
}
.content-page .article-byline-cta a {
  color: var(--content-fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--content-border);
}
.content-page .article-byline-cta a:hover { color: var(--content-accent); border-bottom-style: solid; }
.content-page .article-byline-sep {
  margin: 0 0.5rem;
  color: var(--content-border);
}

/* prev/next pair — editorial card pattern */
.content-page .article-nav-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.content-page .article-nav-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--content-bg);
  border: 1px solid var(--content-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--content-fg);
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.content-page .article-nav-card:hover {
  border-color: var(--content-accent);
  transform: translateY(-1px);
  color: var(--content-fg);
}
.content-page .article-nav-card.article-nav-empty {
  border: 1px dashed var(--content-border);
  background: transparent;
  pointer-events: none;
}
.content-page .article-nav-next { text-align: right; }
.content-page .article-nav-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--content-accent);
}
.content-page .article-nav-title {
  font-family: var(--content-font-display);
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-weight: 500;
}

/* related cards */
.content-page .article-related-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--content-accent);
  margin: 0 0 1.5rem;
}
.content-page .article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.content-page .article-related-card {
  display: block;
  padding: 1.25rem 1.5rem;
  background: var(--content-bg);
  border: 1px solid var(--content-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--content-fg);
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.content-page .article-related-card:hover {
  border-color: var(--content-accent);
  transform: translateY(-1px);
  color: var(--content-fg);
}
.content-page .article-related-title {
  font-family: var(--content-font-display);
  font-size: 1.1rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--content-fg);
}
.content-page .article-related-excerpt {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--content-muted);
  margin: 0;
  /* trim excerpt to ~3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── sidebar-toggle (the tab on the right edge) ────────────────── */
/* Outlined forest tab + gentle pulse halo — draws attention without
   shouting. Pulse stops on hover so interaction is undistracted. */
@keyframes content-sidebar-toggle-pulse {
  0%   { box-shadow: -2px 2px 12px rgba(47, 91, 79, 0.10), 0 0 0 0   rgba(47, 91, 79, 0.45); }
  70%  { box-shadow: -2px 2px 12px rgba(47, 91, 79, 0.10), 0 0 0 14px rgba(47, 91, 79, 0); }
  100% { box-shadow: -2px 2px 12px rgba(47, 91, 79, 0.10), 0 0 0 0   rgba(47, 91, 79, 0); }
}
.content-page .sidebar-toggle {
  width: 40px;
  height: 96px;
  border-radius: 12px 0 0 12px;
  border: 2px solid var(--content-accent);
  border-right: none;
  background: var(--content-bg);
  color: var(--content-accent);
  font-size: 1.4rem;
  box-shadow: -2px 2px 12px rgba(47, 91, 79, 0.10);
  animation: content-sidebar-toggle-pulse 2.4s ease-out infinite;
}
.content-page .sidebar-toggle:hover {
  background: rgba(47, 91, 79, 0.08);
  border-color: var(--content-accent);
  color: var(--content-accent);
  animation: none;
  box-shadow: -2px 2px 12px rgba(47, 91, 79, 0.18);
}
.content-page .sidebar-toggle-icon {
  font-weight: 600;
}

/* respect users with motion sensitivity */
@media (prefers-reduced-motion: reduce) {
  .content-page .sidebar-toggle { animation: none; }
}

/* ── reading-progress bar ──────────────────────────────────────── */
.content-page .article-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--content-accent);
  z-index: 100;
  transition: width 0.12s ease;
  pointer-events: none;
}

/* ── reading column — narrow line-length for prose ─────────────── */
/* Constrained to .article-body so it does NOT touch hero/footer/banner.
   Tables, mermaid, <pre>, <img> remain full-width via the width: 100% rule. */
.content-page .article-body {
  /* keep the body itself at full article width — children get the constraint */
}
.content-page .article-body > p,
.content-page .article-body > ul,
.content-page .article-body > ol,
.content-page .article-body > blockquote,
.content-page .article-body > h2,
.content-page .article-body > h3,
.content-page .article-body > h4 {
  max-width: 64ch;
}
/* Wide-out elements: tables, code blocks, images, mermaid diagrams,
   horizontal rules — let them use the full article width. */
.content-page .article-body > pre,
.content-page .article-body > table,
.content-page .article-body > .mermaid,
.content-page .article-body > p > img,
.content-page .article-body > figure,
.content-page .article-body > hr {
  max-width: none;
}

/* ── editorial sidebar polish ──────────────────────────────────── */
/* Override pico's sidebar TOC styling under content-page only */
.content-page .sidebar-group summary {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--content-accent);
  border-bottom: 1px solid var(--content-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}
.content-page .sidebar-group summary:hover {
  color: var(--content-accent);
}
.content-page .toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.75rem;
  border-left: 2px solid transparent;
  color: var(--content-fg);
  font-size: 0.85rem;
  line-height: 1.4;
  text-decoration: none;
  transition: border-left-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.content-page .toc a:hover {
  color: var(--content-accent);
  border-left-color: rgba(47, 91, 79, 0.4);
}
.content-page .toc a.active {
  color: var(--content-accent);
  border-left-color: var(--content-accent);
  background: rgba(47, 91, 79, 0.06);
  font-weight: 500;
}
.content-page .toc li.toc-level-3 a {
  padding-left: 1.5rem;
  font-size: 0.8rem;
  color: var(--content-muted);
}

/* ── pull-quote (markdown convention: <aside class="article-pullquote">) ─
   Editorial pattern. Use in any .md by writing:
     <aside class="article-pullquote">
       Текст цитаты.
       <cite>— Источник или автор</cite>
     </aside>
   The wrapping aside breaks out of the 64ch reading column. */
.content-page .article-body > aside.article-pullquote,
.content-page .article-body aside.article-pullquote {
  max-width: none;
  margin: 2.5rem 0 2.5rem -1.5rem;
  padding: 0 0 0 2rem;
  border-left: 3px solid var(--content-accent);
  font-family: var(--content-font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--content-fg);
  text-wrap: balance;
}
.content-page .article-body aside.article-pullquote cite {
  display: block;
  margin-top: 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--content-muted);
}

/* ── editorial skill / library / example banners ──────────────── */
/* Override the amber/green/blue palette under .content-page only —
   single visual language, differentiation via the eyebrow label. */
.content-page .skill-banner {
  background: var(--content-bg);
  border: 1px solid var(--content-border);
  border-left: 3px solid var(--content-accent);
  border-radius: 8px;
  margin: 2rem 0 2.5rem;
  max-width: none;
  /* tighter typography */
}
.content-page .skill-banner:hover {
  background: rgba(47, 91, 79, 0.04);
  box-shadow: none;
  transform: none;
  border-left-color: var(--content-accent);
}
.content-page .skill-banner-icon {
  /* drop the colored filter — show logo as warm near-black */
  filter: brightness(0) saturate(100%) invert(8%) sepia(8%) saturate(800%) hue-rotate(355deg) brightness(95%) contrast(90%);
}
.content-page .skill-banner-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--content-accent);
  font-weight: 500;
}
.content-page .skill-banner-name {
  font-family: var(--content-font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--content-fg);
}
.content-page .skill-banner-arrow {
  color: var(--content-accent);
  font-size: 1.3rem;
}

/* All three variants (skill / lib / example) share the same chrome under
   .content-page — the original amber/green/blue accent strips are
   neutralized; only the title text differs. */
.content-page .skill-banner-lib,
.content-page .skill-banner-example {
  background: var(--content-bg);
  border-color: var(--content-border);
  border-left: 3px solid var(--content-accent);
}
.content-page .skill-banner-lib:hover,
.content-page .skill-banner-example:hover {
  background: rgba(47, 91, 79, 0.04);
  box-shadow: none;
  border-left-color: var(--content-accent);
}
.content-page .skill-banner-lib .skill-banner-icon,
.content-page .skill-banner-example .skill-banner-icon {
  /* same neutral filter — drop green/blue tint */
  filter: brightness(0) saturate(100%) invert(8%) sepia(8%) saturate(800%) hue-rotate(355deg) brightness(95%) contrast(90%);
}
.content-page .skill-banner-lib .skill-banner-title,
.content-page .skill-banner-example .skill-banner-title {
  color: var(--content-accent);
}
.content-page .skill-banner-lib .skill-banner-name,
.content-page .skill-banner-example .skill-banner-name {
  color: var(--content-fg);
}
.content-page .skill-banner-lib .skill-banner-arrow,
.content-page .skill-banner-example .skill-banner-arrow {
  color: var(--content-accent);
}

/* ── editorial Prism-theme override ────────────────────────────── */
/* Prism's default theme paints magenta/purple/orange. Recolor to a
   restrained warm-editorial palette: forest for structure, deep coffee
   for strings, slate for numbers, muted for comments. Override at the
   .content-page level so other surfaces (если появятся) не задеваются. */
.content-page pre[class*="language-"],
.content-page :not(pre) > code[class*="language-"] {
  background: #F2EDE5;
  text-shadow: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
}
.content-page pre[class*="language-"] {
  border: 1px solid var(--content-border);
  border-radius: 8px;
  padding: 1.15em 1.25em;
  margin: 1.75rem 0;
  color: #1C1A17;
}
.content-page :not(pre) > code[class*="language-"] {
  padding: 0.05em 0.4em;
  border-radius: 4px;
  color: var(--content-accent);
}

.content-page .token.comment,
.content-page .token.prolog,
.content-page .token.doctype,
.content-page .token.cdata {
  color: #8A817A;
  font-style: italic;
}
.content-page .token.punctuation {
  color: #5A554F;
}
.content-page .token.namespace { opacity: 0.7; }

.content-page .token.keyword,
.content-page .token.atrule,
.content-page .token.attr-value {
  color: #2F5B4F;
  font-weight: 500;
}
.content-page .token.boolean,
.content-page .token.constant,
.content-page .token.number,
.content-page .token.symbol {
  color: #3D5A6E;
}
.content-page .token.string,
.content-page .token.attr-name,
.content-page .token.char,
.content-page .token.builtin,
.content-page .token.inserted {
  color: #5C4033;
}
.content-page .token.tag,
.content-page .token.property,
.content-page .token.deleted {
  color: #6E2F2F;
}
.content-page .token.selector,
.content-page .token.class-name,
.content-page .token.function {
  color: #1F4036;
  font-weight: 500;
}
.content-page .token.regex,
.content-page .token.variable,
.content-page .token.important {
  color: #6E4A1F;
}
.content-page .token.operator,
.content-page .token.url,
.content-page .language-css .token.string,
.content-page .style .token.string {
  color: #5A554F;
  background: transparent;
}
.content-page .token.bold { font-weight: 700; }
.content-page .token.italic { font-style: italic; }

/* line-numbers plugin in Prism — quieter forest tint */
.content-page .line-numbers .line-numbers-rows {
  border-right-color: var(--content-border);
}
.content-page .line-numbers-rows > span::before {
  color: var(--content-muted);
  opacity: 0.7;
}

/* prism-toolbar (copy button) — editorial chip */
.content-page div.code-toolbar > .toolbar > .toolbar-item > button,
.content-page div.code-toolbar > .toolbar > .toolbar-item > a {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--content-bg);
  color: var(--content-accent);
  border: 1px solid var(--content-border);
  border-radius: 4px;
  padding: 3px 8px;
  text-shadow: none;
  box-shadow: none;
}
.content-page div.code-toolbar > .toolbar > .toolbar-item > button:hover,
.content-page div.code-toolbar > .toolbar > .toolbar-item > a:hover {
  background: rgba(47, 91, 79, 0.08);
  border-color: var(--content-accent);
}

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .content-page .article-nav-pair,
  .content-page .article-related-grid {
    grid-template-columns: 1fr;
  }
  .content-page .article-nav-empty { display: none; }
  .content-page .article-nav-next { text-align: left; }
  /* on phone, give prose the full container width */
  .content-page .article-body > p,
  .content-page .article-body > ul,
  .content-page .article-body > ol,
  .content-page .article-body > blockquote,
  .content-page .article-body > h2,
  .content-page .article-body > h3,
  .content-page .article-body > h4 {
    max-width: none;
  }
}

/* ── breadcrumb — quieter ─────────────────────────────────────── */
.content-page .breadcrumb {
  color: var(--content-muted);
  font-size: 0.85rem;
}
.content-page .breadcrumb a {
  color: var(--content-fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--content-border);
}
.content-page .breadcrumb a:hover { border-bottom-style: solid; color: var(--content-accent); }
.content-page .breadcrumb .sep { color: var(--content-muted); }

/* ── body prose — keep readable size ──────────────────────────── */
.content-page article p,
.content-page article li {
  font-size: 1rem;
  line-height: 1.7;
}

/* inline code in prose — forest tint, never touches <pre> */
.content-page article :not(pre) > code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9em;
  background: rgba(47, 91, 79, 0.08);
  color: var(--content-accent);
  padding: 1px 6px;
  border-radius: 4px;
  border: none;
}

/* ── hr & blockquote — editorial ──────────────────────────────── */
.content-page article hr {
  border: none;
  border-top: 1px solid var(--content-border);
  margin: 2.5rem 0;
}
.content-page article blockquote {
  border-left: 2px solid var(--content-accent);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 1.5rem 0;
  font-family: var(--content-font-display);
  font-style: italic;
  color: var(--content-muted);
}

/* ── tables — restrained editorial ────────────────────────────── */
.content-page article table {
  border-collapse: collapse;
}
.content-page article th,
.content-page article td {
  border-bottom: 1px solid var(--content-border);
  padding: 0.6rem 0.75rem;
}
.content-page article th {
  font-family: var(--content-font-display);
  font-weight: 500;
  text-align: left;
  border-bottom-width: 2px;
  border-bottom-color: rgba(28, 26, 23, 0.5);
}

/* ── footer-cta on content surfaces — keep forest CTA ─────────── */
/* layout.html footer-cta uses pico-primary which we overrode → forest.
   Make sure text on it stays legible. */
.content-page .footer-cta-primary {
  color: var(--content-bg);
}