/*
Theme Name: Nefedov Staging
Description: Lightweight custom theme for nefedov.su redesign. Built from approved Day 5/6 copy, typography (Manrope) and color system. No page builder, minimal JS.
Author: Sergey Nefedov (site owner)
Version: 0.6.2
Requires PHP: 7.4
Text Domain: nefedov-staging
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  --color-bg: #f1ece2;
  --color-bg-soft: #e4e5dc;
  --color-surface: #f7f3eb;
  --color-text: #222522;
  --color-muted: #65685f;
  --color-accent: #2e5c55;
  --color-accent-dark: #163a34;
  --color-line: rgba(34, 38, 43, .14);

  --font: 'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;

  --content-max: 1240px;
  --text-width: 720px;

  --space-section: clamp(72px, 8vw, 132px);

  --h3-size: 20px;
  --body-size: 18px;
  --small-size: 15px;
  --nav-size: 15px;
  --button-size: 16px;

  /* Aliases kept for template rules that reference the older names. */
  --surface: var(--color-surface);
  --border: var(--color-line);
  --text-primary: var(--color-text);
  --accent: var(--color-accent);
  --dark: var(--color-accent-dark);
  --dark-text: #edf2ee;
}

/* ============================================================
   2. BASE
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: 1.62;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--color-accent); }

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

h1, h2, h3 { margin: 0 0 20px; color: var(--color-accent-dark); letter-spacing: -0.035em; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(52px, 5.2vw, 76px); line-height: 1.05; }
h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.1vw, 58px); line-height: 1.1; }
h3 { font-family: var(--font); font-size: var(--h3-size); font-weight: 700; letter-spacing: normal; }
p { margin: 0 0 16px; }

.section { padding: var(--space-section) 0; }
.section--surface { background: var(--color-surface); }
.section--bg { background: var(--color-bg); }
.section--editorial { background: var(--color-surface); }
.section--dark { background: var(--color-accent-dark); color: var(--dark-text); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark p { color: var(--dark-text); }

.text-secondary { color: var(--color-muted); }
.text-col { max-width: var(--text-width); }

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 700;
  font-size: var(--button-size);
  padding: 15px 28px;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.btn-primary { background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); box-shadow: none; }
.btn-primary:hover { opacity: 0.94; }
.btn-secondary { color: var(--color-accent); font-weight: 600; font-size: var(--nav-size); text-decoration: underline; }

/* ============================================================
   4. SITE HEADER (flow header — internal pages)
   ============================================================ */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  position: relative;
  z-index: 20;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--color-text);
  text-decoration: none;
}
.site-logo-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.02em;
}
.site-logo-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.site-logo-copy strong { font-size: 15px; font-weight: 700; }
.site-logo-copy small { font-size: 11px; font-weight: 400; color: var(--color-muted); }

.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.main-nav a { color: var(--color-text); text-decoration: none; font-weight: 600; font-size: var(--nav-size); }
.main-nav a:hover { color: var(--color-accent); }
.nav-toggle-label { display: none; cursor: pointer; }
#nav-toggle { display: none; }

/* ============================================================
   5. SHARED COMPONENTS (internal pages)
   ============================================================ */

/* Trust block — About page (homepage overrides below) */
.trust-block .container { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); max-width: 1080px; }
.trust-copy { flex: 1; }
.trust-education { font-size: var(--small-size); color: var(--color-muted); margin-top: 12px; }
.trust-photo { flex-shrink: 0; }
.trust-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px; }
.trust-photo--home { width: 42%; max-width: 430px; aspect-ratio: 857 / 1000; }
.trust-photo--about { width: 400px; aspect-ratio: 971 / 1200; }
.trust-copy--about { max-width: 620px; }

/* Article grid / cards — blog, price, executive-coaching (homepage overrides below) */
.article-section .container { max-width: 1160px; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.article-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 24px 22px 20px;
}
.article-meta {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.article-card h3 { margin-bottom: 10px; }
.article-card p { font-size: var(--small-size); color: var(--color-muted); margin-bottom: 12px; }
.article-card a { font-size: var(--small-size); font-weight: 600; text-decoration: none; }
.article-link-row { margin-top: 24px; }

/* Final CTA — several internal pages (not the homepage) */
.final-cta { text-align: center; }
.final-cta .container { max-width: 640px; }
.final-cta p { font-size: var(--h3-size); margin-bottom: 32px; }

/* Form status + honeypot (shared, neutral) */
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 20px 0 0; padding: 14px 16px; border-radius: 6px; font-weight: 600; }
.form-status--success { background: rgba(46, 92, 85, 0.08); border: 1px solid rgba(46, 92, 85, 0.2); color: var(--color-text); }
.form-status--error, .form-status--warning { background: rgba(163, 47, 47, 0.06); border: 1px solid rgba(163, 47, 47, 0.18); color: var(--color-text); }

/* Article body (single post content) */
.article-body p { margin-bottom: 16px; }
.article-body ul { margin: 0 0 16px; padding-left: 20px; }
.article-body li { margin-bottom: 8px; }
.article-body a { text-decoration: underline; }
.article-body strong { color: var(--color-text); }

/* ============================================================
   6. FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-accent-dark);
  color: var(--dark-text);
  padding: 56px 0 32px;
  font-size: var(--small-size);
}
.site-footer a { color: var(--dark-text); }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 32px; }
.footer-links { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-note { color: #9aa3a0; max-width: 480px; }
.footer-copyright { color: #9aa3a0; border-top: 1px solid rgba(247, 246, 243, 0.12); padding-top: 20px; }

/* ============================================================
   7. BASE RESPONSIVE (internal pages)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --content-max: 920px; }
}

@media (max-width: 768px) {
  :root {
    --space-section: 60px;
    --body-size: 16px;
  }
  h1 { font-size: clamp(40px, 10vw, 56px); }
  h2 { font-size: clamp(34px, 8.5vw, 48px); }
  .main-nav ul {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--color-surface);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
    border-bottom: 1px solid var(--color-line);
    display: none;
  }
  #nav-toggle:checked ~ ul { display: flex; }
  .main-nav ul li { padding: 12px 0; border-bottom: 1px solid var(--color-line); }
  .main-nav ul li:last-child { border-bottom: none; }
  .nav-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 24px;
    line-height: 1;
    background: none;
    border: none;
    flex-shrink: 0;
  }
  .trust-block .container { flex-direction: column; align-items: stretch; gap: 24px; max-width: 100%; }
  .trust-photo--home, .trust-photo--about { width: 100%; }
  .trust-copy--about { max-width: 100%; }
  .article-grid { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; }

  .site-header .container { flex-wrap: nowrap; gap: 8px; }
  .site-logo-copy strong { font-size: 14px; }
  .main-nav { gap: 4px; }
  .btn-primary { padding: 12px 16px; font-size: 14px; white-space: nowrap; }
}

@media (max-width: 400px) {
  .container { padding: 0 16px; }
  .site-header .container { padding: 0 12px; }
}

/* ============================================================
   8. HOMEPAGE — master-reference pass (single generation)
   Scoped to body.home so internal pages are untouched.
   Reference: master-reference.jpg treated as a visual blueprint.
   ============================================================ */
body.home {
  --home-max: 1320px;
  --home-gutter: clamp(22px, 3.6vw, 56px);
  --ivory: #ebe4d7;
  --paper: #f2efe6;
  --sage: #ced2c3;
  --forest: #26382f;
  --ink: #1e3a33;
  --muted: #5b615a;
  --line: rgba(30, 58, 52, .20);
  --line-light: rgba(240, 238, 230, .24);
  /* sampled from the actual hero-candidate-v2 wall tone (avg of a clean,
     shadow-free patch) — the generic --ivory token is visibly lighter/
     cooler than this photo's real wall, which is what made the photo-to-
     background seam readable no matter how the crop was tuned. Hero uses
     this instead of --ivory so the flat area and the photo are the same
     colour, not just a blended approximation of two different ones. */
  --hero-wall: #e4d7c9;
  background: var(--paper);
}

body.home .container {
  max-width: var(--home-max);
  padding-left: var(--home-gutter);
  padding-right: var(--home-gutter);
}

body.home h1 { font-size: clamp(42px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); }
body.home h2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); }

body.home .hero,
body.home .section--surface,
body.home .section--editorial { border-top: 0; }

body.home .eyebrow {
  margin: 0 0 20px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Header: integrated into the first screen ---- */
body.home .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
  z-index: 30;
}
body.home .site-header .container { min-height: 96px; gap: 30px; }
body.home .site-logo { gap: 12px; color: var(--ink); }
body.home .site-logo-mark { width: 46px; height: 46px; border-color: var(--ink); font-size: 16px; color: var(--ink); }
body.home .site-logo-copy strong { font-size: 14px; font-weight: 600; color: var(--ink); }
body.home .site-logo-copy small { font-size: 10.5px; color: var(--muted); }
body.home .main-nav { margin-left: auto; gap: 24px; }
body.home .main-nav ul { gap: clamp(15px, 1.7vw, 28px); }
body.home .main-nav a { font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
body.home .site-header > .container > .btn {
  padding: 13px 22px;
  font-size: 13px;
  border-radius: 3px;
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

/* ---- Hero: one editorial scene, ~38 / 62, portrait bleeds to the right edge.
   A prior ~32/68 pass gave the photo more room, but at every desktop width
   from 1024 to 1920 the copy column was then narrower than the longest H1
   line ("управленческое") actually renders at — the word overflowed its
   box and visually collided with the photo. 38/62 is the narrowest photo
   column that still clears that word with margin at every checked width;
   the crop below was re-tuned for this width. ---- */
body.home .hero {
  position: relative;
  background: var(--ivory);
  padding: 0;
  overflow: hidden;
}
/* hero-candidate-v2 only — see --hero-wall definition above */
body.home .hero--candidate-v2 { background: var(--hero-wall); }
body.home .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(32px, 2.4vw, 40px);
  align-items: stretch;
  min-height: 820px;
  padding-top: 104px;
}
body.home .hero-copy {
  display: flex;
  flex-direction: column;
  padding: 28px 0 56px;
}
body.home .hero-copy h1 { margin: 0 0 24px; max-width: 480px; }
body.home .hero-copy .text-secondary {
  max-width: 440px;
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
body.home .hero-cta-row { margin-top: 8px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
body.home .hero .btn-primary {
  padding: 15px 26px;
  border-radius: 3px;
  background: var(--forest);
  border-color: var(--forest);
}
body.home .hero-facts {
  margin-top: auto;
  padding-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  max-width: 560px;
}
body.home .hero-fact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 18px;
  border-left: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
}
body.home .hero-fact:first-child { padding-left: 0; border-left: 0; }
body.home .hero-fact-icon { display: block; color: var(--ink); opacity: .82; }
body.home .hero-fact-icon svg { display: block; }
body.home .hero-photo {
  align-self: stretch;
  overflow: hidden;
  /* bleed to the true viewport edge, not just the container's own padding
     edge: beyond --home-max (1320px) the container is centered with an
     extra gap on each side that the gutter alone doesn't cover, so the
     photo used to stop short of the real edge on any viewport wider than
     ~1320+gutters (i.e. every desktop width above ~1400px). */
  margin-right: calc(-1 * (var(--home-gutter) + max(0px, (100vw - var(--home-max)) / 2)));
}
body.home .hero-photo img,
body.home .hero-img {
  width: 100%;
  height: 100%;
  min-height: 660px;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 0;
}

/* ---- Hero portrait: sergey-nefedov-hero-interior.png — a clean, wide
   interior scene with no baked-in UI, generously spaced so Sergey's chair
   and both arms have real room either side. Cropped so his left (near) arm
   keeps clearance from the seam, then a short alpha fade — not a visible
   color gradient — lets the hero section's own ivory show through the last
   ~60px, dissolving the crop edge instead of reading as a separate photo
   rectangle. Real header + copy + CTA + facts stay HTML, never baked in. ---- */
body.home .hero--interior .hero-photo { position: relative; background: var(--ivory); }
body.home .hero--candidate-v2 .hero-photo { background: var(--hero-wall); }
body.home .hero--interior .hero-img {
  --hero-fade: 60px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 78% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hero-fade));
  mask-image: linear-gradient(to right, transparent 0, #000 var(--hero-fade));
}
/* hero-candidate-v2, base/wide tier only (>=1201px): the corrected
   right-bleed above gives this column real width at these sizes, so a
   hard-right crop (100%) already clears the near arm with comfortable
   margin while showing the source's own right edge (watch/hand fully in
   frame) — no extra zoom needed. The @1200/@1024/mobile tiers below stay
   on their own tuned values; that bleed fix doesn't widen those columns
   (container is already viewport-bound there), so 100% would clip. */
body.home .hero--candidate-v2 .hero-img { object-position: 100% 50%; }

/* ---- Situations: magazine spread, numbered 01-05 ---- */
body.home .section-situations { background: var(--paper); padding: clamp(72px, 7vw, 104px) 0; }
body.home .situations-shell {
  display: grid;
  grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  gap: clamp(48px, 6vw, 100px);
}
body.home .situations-intro { display: flex; flex-direction: column; }
body.home .situations-intro .eyebrow { margin: 0 0 18px; }
body.home .situations-intro h2 { margin: 0; max-width: 360px; }
/* still-life slot (situations-still-life.webp) — sits lower-left like the reference */
body.home .situations-still { margin-top: auto; padding-top: 44px; width: 100%; max-width: 400px; height: auto; }
body.home .situations-visual { width: 64px; height: 2px; margin-top: auto; background: var(--ink); }
body.home .situations-content { min-width: 0; }
body.home .situations-list { list-style: none; margin: 0; padding: 0; display: block; border-top: 1px solid var(--line); }
body.home .situation-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin: 0;
  padding: 24px 0;
  min-height: 92px;
  border-bottom: 1px solid var(--line);
}
body.home .situation-number {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
body.home .situation-text { max-width: 560px; font-size: 16px; line-height: 1.5; color: var(--muted); }
body.home .situations-support { margin: 28px 0 0; max-width: 620px; font-size: 14px; font-style: normal; color: var(--muted); }

/* ---- Approach: shallow sage band + typographic values panel ---- */
body.home .section--quiet { background: var(--sage); padding: clamp(56px, 6vw, 88px) 0; }
body.home .approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
}
body.home .approach-copy { max-width: 620px; }
body.home .approach-copy h2 { margin: 0 0 22px; font-size: clamp(28px, 2.6vw, 36px); max-width: 320px; }
body.home .approach-copy p { margin: 0 0 14px; max-width: 560px; font-size: 15px; line-height: 1.6; color: #37423b; }
body.home .approach-summary {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(30, 58, 52, .3);
  max-width: 520px;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
}
body.home .approach-copy > p:last-child { margin-top: 18px; }
body.home .approach-copy .btn-secondary { color: var(--ink); }
body.home .approach-visual { align-self: center; display: flex; align-items: center; justify-content: center; }
/* books slot (values-books.webp) */
body.home .values-books { width: 100%; max-width: 460px; height: auto; }
/* calm typographic placeholder — no frame, no dividers (per reference brief) */
body.home .values-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 360px;
}
body.home .values-list li {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: var(--ink);
}

/* ---- Dark green: compact horizontal statement band ---- */
body.home .editorial-pull { background: var(--forest); padding: 0; }
body.home .editorial-pull-inner {
  display: grid;
  grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);
  gap: clamp(36px, 4vw, 72px);
  align-items: center;
  min-height: 180px;
  padding-top: clamp(40px, 3.6vw, 52px);
  padding-bottom: clamp(40px, 3.6vw, 52px);
}
body.home .editorial-pull-copy { position: relative; }
body.home .editorial-pull-text {
  margin: 0;
  max-width: 700px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #f2eee4;
}
body.home .editorial-pull-text::before {
  content: "\201C";
  position: absolute;
  left: -6px;
  top: -34px;
  font-family: var(--font-display);
  font-size: 68px;
  line-height: 1;
  color: #f2eee4;
  opacity: 0.4;
}
body.home .editorial-principles { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
body.home .principle-item {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 16px 8px;
  border: 0;
  border-left: 1px solid var(--line-light);
  color: #dce4dd;
  font-size: 11px;
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-transform: uppercase;
}
body.home .principle-item:first-child { border-left: 0; }
body.home .principle-icon { display: block; color: #f2eee4; opacity: .5; }
body.home .principle-icon svg { display: block; }

/* ---- About: editorial photo + serif headline ---- */
body.home .trust-block { background: var(--ivory); padding: clamp(84px, 8vw, 120px) 0; }
body.home .trust-block .container {
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  gap: clamp(56px, 7vw, 116px);
  align-items: center;
  max-width: var(--home-max);
}
body.home .trust-photo { flex: none; position: relative; background: var(--ivory); }
/* sergey-nefedov-about-interior.png is a wide interior scene (Sergey left,
   open wall right) — a 6:5 box keeps most of that open space in frame
   instead of forcing the wide source into a narrow portrait crop. */
body.home .trust-photo--home { width: 100%; max-width: none; aspect-ratio: 6 / 5; overflow: hidden; }
body.home .trust-photo--home img {
  --trust-fade: 84px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
  border-radius: 0;
  /* the open wall on the right of the source is already close to --ivory, so
     a short alpha fade — not a visible gradient — dissolves the crop edge
     into the text column's background instead of a hard seam */
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--trust-fade));
  mask-image: linear-gradient(to left, transparent 0, #000 var(--trust-fade));
}
body.home .trust-copy { max-width: 560px; }
body.home .trust-copy h2 { margin: 0 0 26px; }
body.home .trust-copy p { margin: 0 0 14px; font-size: 15px; line-height: 1.62; color: var(--muted); }
body.home .trust-copy .btn-secondary { color: var(--ink); }

/* ---- Process: three typographic columns, thin rules, no cards ---- */
body.home .section-process { background: var(--paper); padding: clamp(76px, 7vw, 104px) 0; }
body.home .section-process > .container > h2 { margin: 0 0 40px; }
body.home .process-grid--editorial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  /* rows default to stretch, which forces every column to the height of the
     longest copy (column 1) and leaves dead air under the shorter columns'
     rules (most visible under column 3). Let each rule hug its own text instead. */
  align-items: start;
}
body.home .process-step {
  min-height: 280px;
  padding: 34px 36px 34px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 0;
}
body.home .process-step:first-child { border-left: 0; padding-left: 0; }
body.home .process-number {
  display: block;
  margin: 0 0 38px;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
body.home .process-step h3 {
  margin: 0 0 12px;
  max-width: 260px;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
body.home .process-step p { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.6; color: var(--muted); }
body.home .process-note { margin: 24px 0 0; font-size: 14px; font-weight: 400; color: var(--muted); }

/* ---- Price: shared editorial grid, not SaaS cards ---- */
body.home .section-pricing { background: var(--ivory); padding: clamp(76px, 7vw, 104px) 0; }
body.home .section-pricing > .container > h2 { margin: 0 0 36px; }
body.home .pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: min(100%, 1040px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body.home .pricing-card {
  padding: 38px 48px 40px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
body.home .pricing-card + .pricing-card { padding: 38px 0 40px 48px; border-left: 1px solid var(--line); }
body.home .pricing-card h3 {
  margin: 0 0 4px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
body.home .pricing-card .price {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}
body.home .pricing-card p { margin: 0 0 10px; max-width: 360px; font-size: 15px; line-height: 1.55; color: var(--muted); }
body.home .pricing-card .btn {
  margin-top: 14px;
  padding: 13px 24px;
  border-radius: 3px;
  background: var(--forest);
  border-color: var(--forest);
  font-size: 14px;
}

/* ---- Contact: two columns, underline form, compact ---- */
body.home #contact-form-section { background: var(--paper); padding: clamp(80px, 7vw, 110px) 0; }
body.home .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(48px, 6vw, 116px);
  align-items: start;
}
body.home .contact-intro { max-width: 460px; }
body.home .contact-intro h2 { margin: 0 0 24px; }
body.home .contact-intro p { margin: 0 0 14px; font-size: 15px; line-height: 1.62; color: var(--muted); }
body.home .contact-intro h3 { margin: 44px 0 10px; font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--ink); }
body.home .contact-links { display: flex; flex-wrap: wrap; gap: 22px; margin: 6px 0 0; }
body.home .contact-links a { font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
body.home .contact-form-column { width: 100%; max-width: 600px; }
body.home .contact-form { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
body.home .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 22px; }
body.home .form-row label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
body.home .form-row input,
body.home .form-row textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
body.home .form-row textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
body.home .form-row input:focus,
body.home .form-row textarea:focus { outline: none; border-bottom-color: var(--ink); }
body.home .contact-form .btn {
  margin-top: 8px;
  padding: 14px 28px;
  border-radius: 3px;
  background: var(--forest);
  border-color: var(--forest);
}
body.home .form-status { border-radius: 0; margin: 0 0 20px; }

/* ---- Articles: editorial grid, no card UI ---- */
body.home .article-section { background: var(--ivory); padding: clamp(76px, 7vw, 104px) 0 clamp(56px, 5vw, 76px); }
body.home .article-section .container { max-width: var(--home-max); }
body.home .article-section > .container > h2 { margin: 0 0 18px; }
body.home .article-section > .container > p:not(.article-link-row) { margin: 0 0 12px; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--muted); }
body.home .article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body.home .article-card {
  min-height: 240px;
  padding: 34px 34px 32px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
}
body.home .article-card:first-child { border-left: 0; padding-left: 0; }
body.home .article-meta { margin: 0 0 14px; font-size: 11px; letter-spacing: 0.14em; }
body.home .article-card h3 {
  margin: 0 0 10px;
  max-width: 280px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.home .article-card p { margin: 0; max-width: 280px; font-size: 14px; line-height: 1.55; color: var(--muted); }
body.home .article-card a { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); }
body.home .article-link-row { margin-top: 28px; }
body.home .article-link-row .btn-secondary { color: var(--ink); }

/* ---- Final CTA: calm closing statement between Articles and Footer,
   reusing the shared .final-cta component, the global h2/btn-primary
   treatment and the hero's price-subline style. ---- */
body.home .final-cta {
  background: var(--paper);
  padding: clamp(56px, 5vw, 80px) 0 clamp(64px, 6vw, 92px);
  text-align: center;
}
body.home .final-cta .container { max-width: 680px; }
body.home .final-cta h2 { margin: 0 0 18px; }
body.home .final-cta-lead {
  margin: 0 auto 30px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
body.home .final-cta .btn-primary {
  padding: 15px 30px;
  border-radius: 3px;
  background: var(--forest);
  border-color: var(--forest);
}

/* ---- Footer alignment ---- */
body.home .site-footer .container { max-width: var(--home-max); }

/* ============================================================
   9. HOMEPAGE RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  body.home .site-header .container { gap: 18px; }
  body.home .main-nav ul { gap: 14px; }
  body.home .main-nav a { font-size: 12px; }
  body.home .hero-inner { grid-template-columns: minmax(0, 39fr) minmax(0, 61fr); min-height: 720px; }
  body.home .hero-photo img { min-height: 600px; }
  body.home .hero--interior .hero-img { object-position: 72% 50%; }
  /* temporary visual candidate override — see front-page.php hero-candidate-v2 note */
  body.home .hero--candidate-v2 .hero-img { object-position: 68% 50%; }
  body.home .editorial-pull-inner { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); }
  body.home .editorial-principles { grid-template-columns: repeat(2, 1fr); }
  body.home .principle-item { min-height: 72px; padding: 16px 12px; }
  body.home .principle-item:nth-child(3) { border-left: 0; }
  body.home .principle-item:nth-child(3), body.home .principle-item:nth-child(4) { border-top: 1px solid var(--line-light); }
}

@media (max-width: 1024px) {
  body.home .hero-inner { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); min-height: 640px; padding-top: 96px; }
  body.home .hero-copy h1 { font-size: clamp(38px, 5vw, 48px); }
  body.home .hero-photo img { min-height: 520px; }
  body.home .hero--interior .hero-img { object-position: 64% 50%; }
  body.home .hero--candidate-v2 .hero-img { object-position: 54% 50%; }
  body.home .hero-facts { grid-template-columns: 1fr; max-width: none; }
  body.home .hero-fact { flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 10px 0; border-left: 0; border-top: 1px solid var(--line); }
  body.home .hero-fact:first-child { border-top: 0; }
  body.home .hero-fact-icon svg { width: 16px; height: 16px; }
  body.home .situations-shell { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 44px; }
  body.home .approach-grid { grid-template-columns: 1fr; gap: 40px; }
  body.home .approach-visual { align-self: start; justify-content: flex-start; }
  body.home .editorial-pull-inner { grid-template-columns: 1fr; gap: 32px; }
  body.home .editorial-principles { grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
  body.home .principle-item { min-height: 84px; border-top: 0; }
  body.home .principle-item:nth-child(3) { border-left: 1px solid var(--line-light); }
  body.home .trust-block .container { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); gap: 56px; }
  body.home .contact-grid { grid-template-columns: 1fr; gap: 52px; }
  body.home .contact-intro { max-width: none; }
}

@media (max-width: 768px) {
  body.home { --home-gutter: 22px; }
  body.home h2 { font-size: clamp(30px, 6.4vw, 40px); }
  body.home .site-header { position: relative; background: var(--ivory); }
  body.home .site-header .container { min-height: 72px; }
  body.home .site-logo-mark { width: 40px; height: 40px; }
  body.home .site-logo-copy small { display: none; }
  body.home .site-header > .container > .btn { display: none; }
  body.home .main-nav { margin-left: 0; }
  body.home .main-nav ul { top: 72px; background: var(--ivory); border-bottom-color: var(--line); }
  body.home .nav-toggle-label { display: flex; }

  body.home .hero-inner { display: block; min-height: 0; padding-top: 0; }
  body.home .hero-copy { padding: 56px 0 44px; }
  body.home .hero-copy h1 { max-width: none; font-size: clamp(34px, 9vw, 44px); }
  body.home .hero-copy .text-secondary { max-width: none; }
  body.home .hero-photo { position: relative; height: min(94vw, 480px); margin: 0; }
  body.home .hero-photo img,
  body.home .hero-photo > .hero-img { height: 100%; min-height: 0; }
  /* mobile gets its own independent crop — face + near arm, not the desktop
     wide-scene composition — no mask needed since there's no adjacent text
     column to blend into here (photo sits in its own stacked block). */
  body.home .hero--interior .hero-img {
    position: static;
    object-position: 63% 50%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.home .hero--candidate-v2 .hero-img { object-position: 65% 40%; }
  body.home .hero-facts { margin-top: 32px; }

  body.home .situations-shell { display: block; }
  body.home .situations-intro h2 { max-width: none; }
  body.home .situations-visual { margin: 28px 0 0; }
  body.home .situations-still { margin: 28px 0 0; padding-top: 0; max-width: 320px; }
  body.home .situations-content { margin-top: 40px; }
  body.home .situation-item { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; min-height: 0; padding: 20px 0; }
  body.home .situation-number { font-size: 30px; }

  body.home .approach-copy h2 { max-width: none; }
  body.home .values-list { max-width: none; }
  body.home .values-books { max-width: 420px; }

  body.home .editorial-pull-inner { min-height: 0; }
  body.home .editorial-pull-text::before { top: -26px; font-size: 52px; }
  body.home .editorial-principles { grid-template-columns: 1fr 1fr; margin-top: 8px; }
  body.home .principle-item { flex-direction: row; min-height: 0; gap: 10px; padding: 14px 0; justify-content: flex-start; text-align: left; border-left: 0; border-top: 1px solid var(--line-light); }
  body.home .principle-item:nth-child(-n+2) { border-top: 0; }

  body.home .trust-block .container { display: block; }
  body.home .trust-photo--home { margin-bottom: 32px; }
  /* stacked on mobile — the photo no longer sits beside the text column, so
     the one-sided fade would look like an asymmetric stray edge; show it as
     a plain rectangle instead, same scoping as the hero's mobile crop. */
  body.home .trust-photo--home img {
    -webkit-mask-image: none;
    mask-image: none;
  }

  body.home .process-grid--editorial,
  body.home .pricing-grid,
  body.home .article-grid { grid-template-columns: 1fr; width: 100%; }
  body.home .process-step,
  body.home .article-card { min-height: 0; padding: 28px 0; border-left: 0; }
  body.home .process-step:first-child,
  body.home .article-card:first-child { padding-top: 28px; }
  body.home .process-number { margin-bottom: 20px; }
  body.home .pricing-card { padding: 28px 0; }
  body.home .pricing-card + .pricing-card { padding: 28px 0; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 600px) {
  /* hero-candidate-v2 only: at <=768px the box shows the image's full
     height (no vertical crop at all — object-fit:cover is height-bound
     here), so the very top of the stacked photo block is pure hairline;
     on short/real mobile viewports that's often the only part visible
     without an extra scroll. Sizing the img taller than its box and
     pinning it to the top crops out the excess below the shoulders
     instead, so head + full face + shoulders read immediately. */
  body.home .hero--candidate-v2 .hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 176%;
    object-position: 80% 0%;
  }
}

@media (max-width: 480px) {
  body.home h1 { font-size: clamp(30px, 8.5vw, 36px); }
  body.home h2 { font-size: clamp(27px, 8vw, 32px); }
  body.home .hero-cta-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  body.home .hero .btn-primary { width: 100%; text-align: center; }
  body.home .editorial-pull-text { font-size: 24px; }
  body.home .editorial-principles { grid-template-columns: 1fr; }
  body.home .principle-item { border-left: 0; border-top: 1px solid var(--line-light); }
  body.home .principle-item:first-child { border-top: 0; }
}

/* ============================================================
   9. INTERNAL EDITORIAL PAGES
   Additive, scoped-only layer that brings existing internal page
   templates (About, Executive Coaching, Price, Blog — added via
   .page-editorial on <main>) visually in line with the homepage
   system: same container width, no boxed/rounded "SaaS" cards,
   thin-line editorial grid instead. Reuses the class names already
   present in those templates (.container/.article-grid/.article-
   card/.btn-primary) — nothing here touches body.home or any page
   that doesn't opt in via the wrapper class.
   ============================================================ */
.page-editorial {
  --edit-max: 1320px;
  --edit-gutter: clamp(22px, 3.6vw, 56px);
  --edit-line: rgba(34, 38, 43, .14);
}
.page-editorial .container { max-width: var(--edit-max); padding-left: var(--edit-gutter); padding-right: var(--edit-gutter); }
.page-editorial .btn-primary { border-radius: 3px; }

/* de-boxed editorial grid — no border/radius/shadow per card, thin
   dividers between columns instead (same language as the homepage
   article/pricing grids). auto-fit rather than a fixed column count:
   these templates reuse .article-grid for both 2-card price/format
   grids and 3-up article listings, so the column count needs to
   follow however many cards are actually there instead of leaving a
   dangling empty third column on the 2-card pages. Single row only
   at desktop widths (each card comfortably clears the 260px floor),
   so the plain border-left dividers stay correct left-to-right. */
.page-editorial .article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border-top: 1px solid var(--edit-line);
  border-bottom: 1px solid var(--edit-line);
}
.page-editorial .article-card {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--edit-line);
  border-radius: 0;
  padding: 32px 28px;
}
.page-editorial .article-card:first-child { border-left: 0; padding-left: 0; }
.page-editorial .article-card:last-child { padding-right: 0; }

@media (max-width: 768px) {
  .page-editorial .article-grid { grid-template-columns: 1fr; border-bottom: 0; }
  .page-editorial .article-card,
  .page-editorial .article-card:nth-child(2),
  .page-editorial .article-card:nth-child(3) {
    grid-column: auto;
    border-left: 0;
    border-top: 1px solid var(--edit-line);
    padding: 24px 0;
  }
  .page-editorial .article-card:first-child { border-top: 0; padding-top: 0; }
}

/* About (internal page): swap the old dark portrait crop for the wide,
   light interior photo already approved on the homepage About block
   (sergey-nefedov-about-interior.*) — same wide-box crop + edge fade into
   ivory, no boxed/rounded "card" corners. .trust-photo--about is only used
   on this template, so this can override the shared base rule directly. */
.page-editorial .trust-block .container {
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.page-editorial .trust-copy--about { max-width: 560px; }
.page-editorial .trust-photo--about {
  width: 100%;
  max-width: none;
  aspect-ratio: 6 / 5;
  overflow: hidden;
}
.page-editorial .trust-photo--about img {
  --trust-fade: 84px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--trust-fade));
  mask-image: linear-gradient(to left, transparent 0, #000 var(--trust-fade));
}
@media (max-width: 768px) {
  /* stacked on mobile — a one-sided fade would read as a stray cut edge,
     same reasoning as the homepage's own mobile trust-photo treatment. */
  .page-editorial .trust-block .container { display: block; }
  .page-editorial .trust-photo--about { margin-bottom: 24px; }
  .page-editorial .trust-photo--about img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Desktop vertical rhythm: About and Coaching only — the generic .section
   padding (clamp 72-132px) reads as separate presentation slides at desktop
   widths on these two copy-heavy pages. ~17% tighter, editorial rather than
   dense. Gated to desktop/tablet+ only; mobile density is left as-is. */
@media (min-width: 769px) {
  .page-editorial--about .section,
  .page-editorial--coaching .section {
    padding: calc(var(--space-section) * 0.83) 0;
  }
}

/* ============================================================
   COOKIE CONSENT  (Accept / Reject gate; see nefedov_staging_cookie_notice)
   Server renders it only while no choice is stored, so it is shown, not
   toggled by JS. Compact bottom bar — dismissible, never covers the CTA.
   ============================================================ */
.cookie-notice { display: none; }
.cookie-notice.is-open {
  display: flex;
  align-items: center;
  gap: 16px;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  margin: 0 auto;
  max-width: 680px;
  padding: 14px 16px;
  background: var(--color-accent-dark);
  color: var(--dark-text);
  border: 1px solid rgba(237, 242, 238, .18);
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(22, 58, 52, .30);
  font-size: var(--small-size);
  line-height: 1.5;
}
.cookie-notice.is-open.is-closing { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.cookie-notice__text { margin: 0; flex: 1 1 auto; }
.cookie-notice__text a { color: #fff; text-decoration: underline; }
.cookie-notice__actions { flex: 0 0 auto; display: flex; gap: 10px; }
.cookie-notice__btn {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: 1px solid rgba(237, 242, 238, .55);
  border-radius: 4px;
  background: transparent;
  color: var(--dark-text);
  font-family: var(--font);
  font-size: var(--button-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.cookie-notice__btn:hover { background: rgba(237, 242, 238, .14); }
.cookie-notice__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cookie-notice__btn--primary {
  background: var(--dark-text);
  border-color: var(--dark-text);
  color: var(--color-accent-dark);
}
.cookie-notice__btn--primary:hover { background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .cookie-notice.is-open { animation: cookie-notice-in .28s ease-out; }
  @keyframes cookie-notice-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (max-width: 560px) {
  .cookie-notice.is-open {
    left: 10px;
    right: 10px;
    bottom: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .cookie-notice__actions { width: 100%; }
  .cookie-notice__btn { flex: 1 1 0; padding: 12px; text-align: center; }
}

/* ============================================================
   /executive-coaching/ — audience list + FAQ spacing (Action 1, SEO pass)
   Uses the existing type tokens; scoped to this one page, no visual-system change.
   ============================================================ */
.page-editorial--coaching .text-col ul { margin: 0 0 16px; padding-left: 22px; }
.page-editorial--coaching .text-col li { margin-bottom: 8px; }
.page-editorial--coaching .faq h3 { margin-top: 34px; }
.page-editorial--coaching .faq h3:first-of-type { margin-top: 8px; }

/* ============================================================
   9. SINGLE POST \u2014 align blog articles with the site editorial grid
   Blog posts (single.php) were the only page type not opted into the
   .page-editorial system: raw .container (1240px / fixed 24px gutter)
   instead of the shared 1320px / clamp(22px,3.6vw,56px) grid used by
   /about/, /blog/, /executive-coaching/ and the homepage, plus the
   un-reduced global h1/h2 (52\u201376 / 40\u201358px) instead of the site's
   reduced heading scale. single.php now carries class="page-editorial"
   (same opt-in as page-blog.php) so the frame matches; this block only
   tunes the article-specific bits on top, scoped to body.single-post.
   Reuses --text-width, --body-size, --space-section, --color-*,
   --small-size \u2014 no new tokens, no separate blog theme.
   ============================================================ */

/* Header + body share the site's .text-col measure (720px). Nothing here
   sets a custom width \u2014 hero and prose line up exactly like /about/ and
   /executive-coaching/. */

/* Site reduced heading scale (same family as body.home h1/h2), a notch
   tighter for long-form: article sections recur far more often than a
   landing page's, so 46/32 rather than 60/46. */
body.single-post #content h1 {
  font-size: clamp(33px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
body.single-post .article-body h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
body.single-post .article-body h3 {
  font-size: clamp(19px, 1.4vw, 21px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* the theme's "Похожие материалы" title sits outside .article-body */
body.single-post #content > section:not(:first-of-type) > .container:not(.article-body) h2 {
  font-size: clamp(23px, 2.2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

/* Reading scale: keep --body-size (18px desktop / 16px mobile, the site's
   own responsive token) but open the rhythm so long prose stops reading
   as dense. */
body.single-post .article-body { font-size: var(--body-size); line-height: 1.74; }
body.single-post .article-body > :first-child { margin-top: 0; }
body.single-post .article-body p { margin: 0 0 22px; }
body.single-post .article-body ul,
body.single-post .article-body ol { margin: 0 0 22px; padding-left: 24px; }
body.single-post .article-body li { margin-bottom: 10px; }
body.single-post .article-body li > ul,
body.single-post .article-body li > ol { margin: 10px 0 0; }
body.single-post .article-body h2 { margin: 50px 0 18px; }
body.single-post .article-body h3 { margin: 34px 0 12px; }
body.single-post .article-body h2 + h3 { margin-top: 18px; }
body.single-post .article-body a { text-underline-offset: 2px; }

/* Article header: editorial density. The site already tightens copy-heavy
   pages to *0.83; the post header is only H1 + one meta line, so it can go
   a little further without reading as empty. */
body.single-post #content > section:first-of-type {
  padding-top: calc(var(--space-section) * 0.62);
  padding-bottom: calc(var(--space-section) * 0.34);
}
body.single-post #content > section:first-of-type h1 { margin-bottom: 16px; }
body.single-post #content > section:first-of-type .text-secondary { margin: 0; line-height: 1.5; }

/* Body + trailing sections: the site's editorial section density, and a
   short gap straight after the header so it reads as one unit. */
body.single-post #content > section:not(:first-of-type) {
  padding-top: calc(var(--space-section) * 0.66);
  padding-bottom: calc(var(--space-section) * 0.66);
}
body.single-post #content > section:first-of-type + section { padding-top: calc(var(--space-section) * 0.42); }

/* Tables / blockquotes / figures so future articles need only plain HTML.
   Bottom-border editorial style, same language as .coaching-compare on
   /executive-coaching/. Wide tables scroll inside their figure on narrow
   screens instead of forcing page-level horizontal scroll. */
body.single-post .article-body figure.wp-block-table {
  margin: 0 0 24px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.single-post .article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: var(--small-size);
}
body.single-post .article-body th,
body.single-post .article-body td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-line);
}
body.single-post .article-body thead th { border-bottom-width: 2px; font-weight: 700; }
body.single-post .article-body blockquote {
  margin: 28px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--color-accent);
  color: var(--color-muted);
}

@media (max-width: 768px) {
  body.single-post #content h1 { font-size: clamp(27px, 7vw, 34px); }
  body.single-post .article-body h2 { font-size: clamp(22px, 5.6vw, 27px); margin-top: 40px; }
  body.single-post .article-body h3 { font-size: 19px; margin-top: 28px; }
  body.single-post #content > section:not(:first-of-type) > .container:not(.article-body) h2 { font-size: clamp(21px, 5.4vw, 25px); }
  body.single-post .article-body { line-height: 1.68; }
  body.single-post .article-body p,
  body.single-post .article-body ul,
  body.single-post .article-body ol { margin-bottom: 18px; }
  body.single-post .article-body table { min-width: 460px; font-size: 14px; }
  body.single-post .article-body th,
  body.single-post .article-body td { padding: 8px 10px; }
}