/* Modelwright Ratgeber/Guides + SEO landing pages (27.10.2026). Loaded only on content pages (blog.py), after site.css + mw-site.css.
   Uses the site tokens (--ink, --bg, --accent, --line, --font, --mono). Mobile-first, article text max ~70ch. */

/* ---------- shared */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 6px; line-height: 1.5; }
.crumbs span[aria-current] { color: var(--ink-3); }
.crumbs a { text-underline-offset: 3px; }

/* ---------- article */
.post { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 112px); }
.post-wrap { max-width: calc(72ch + 2 * var(--gutter)); }
.post-head { margin: 6px 0 clamp(28px, 4vw, 44px); padding-bottom: clamp(22px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.post-cat { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.post-cat a { color: var(--accent); text-decoration: none; }
.post-cat a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-head h1 { font-size: clamp(32px, 5.2vw, 52px); line-height: 1.06; letter-spacing: -0.03em; }
.post-lede { margin-top: 18px; font-size: clamp(18px, 2vw, 20px); line-height: 1.5; color: var(--ink-2); }
.post-meta { margin-top: 18px; font: 500 12.5px/1.6 var(--mono); color: var(--ink-3); letter-spacing: .02em; }

.toc { margin: 0 0 clamp(28px, 4vw, 40px); padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.toc-h { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: 15.5px; }
.toc a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.toc a:hover { text-decoration-color: var(--ink); }

/* ---------- body typography */
.post-body { max-width: 70ch; font-size: 17.5px; line-height: 1.68; }
.post-body > * + * { margin-top: 1.05em; }
.post-body h2 { font-size: clamp(25px, 3vw, 32px); line-height: 1.18; letter-spacing: -0.025em; margin-top: 2.1em; scroll-margin-top: calc(var(--header-h) + 16px); }
.post-body h3 { font-size: clamp(19px, 2.1vw, 22px); line-height: 1.3; letter-spacing: -0.015em; margin-top: 1.7em; font-weight: 600; scroll-margin-top: calc(var(--header-h) + 16px); }
.post-body h4 { font-size: 17.5px; font-weight: 600; margin-top: 1.4em; }
.post-body h2 + *, .post-body h3 + *, .post-body h4 + * { margin-top: .6em; }
.post-body a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body a:hover { color: #8f3d17; text-decoration-thickness: 2px; }
.post-body strong { font-weight: 600; }
.post-body ul, .post-body ol { padding-left: 1.35em; }
.post-body li + li { margin-top: .4em; }
.post-body li::marker { color: var(--ink-3); }
.post-body blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--ink-2); }
.post-body blockquote p + p { margin-top: .6em; }
.post-body code { font: 500 .88em/1 var(--mono); background: var(--bg-alt); padding: 2px 5px; border-radius: 3px; }
.post-body sup.cite { font-size: .72em; line-height: 0; }
.post-body sup.cite a { text-decoration: none; }
.post-body .sources { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.post-body .sources li { overflow-wrap: anywhere; }
.post-body .sources li:target { background: var(--accent-soft); }
.post-body .faq-q { margin-top: 1.5em; }

.post-fig { margin: 1.8em 0; }
.post-fig img { width: 100%; height: auto; border: 1px solid var(--line); background: var(--stage); }
.post-fig figcaption { margin-top: 10px; font: 500 12px/1.5 var(--mono); color: var(--ink-3); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); background: var(--paper); }
.table-wrap:focus-visible { outline-offset: 2px; }
.post-body table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; line-height: 1.45; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.post-body th { font: 600 13px/1.3 var(--font); background: var(--bg-alt); }
.post-body tr:last-child td { border-bottom: 0; }

/* inline demo card (shortcode {{demo:id}}) */
.post-body .b-demo-inline { grid-template-columns: minmax(0, 220px) 1fr; grid-template-rows: none; margin: 1.6em 0; }
.post-body .b-demo-inline .g-media { aspect-ratio: 16 / 10; height: 100%; }
.post-body .b-demo-inline .g-body > * + * { margin-top: 0; }
.post-body .b-demo-inline a { color: inherit; }
.post-body .b-demo-inline .g-title { font-size: 18px; margin-top: 0; }
.post-body .b-demo-inline .g-sum { font-size: 15px; line-height: 1.5; }
@media (max-width: 560px) { .post-body .b-demo-inline { grid-template-columns: 1fr; } }

/* ---------- CTA box */
.cta-box { margin: clamp(36px, 5vw, 56px) 0; padding: clamp(22px, 3.4vw, 34px); background: var(--dark); color: var(--dark-ink); max-width: 70ch; }
.post-body .cta-box { margin: 2em 0; }
.cta-k { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #e08a5f; }
.cta-t { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--dark-ink); }
.cta-box .cta-t a { color: #fff; text-underline-offset: 3px; }
.cta-box .cta-row { margin-top: 20px; }
.cta-box .btn-ghost { color: var(--dark-ink); border-color: var(--dark-line); }
.cta-box .btn-ghost:hover { border-color: var(--dark-ink); }
.cta-box :focus-visible { outline-color: #e08a5f; }
.post-body .cta-box a.btn { color: #fff; text-decoration: none; }

/* ---------- demos + related at the end of an article */
.post-demos, .post-related { margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid var(--ink); }
.post-demos h2, .post-related h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 22px; }
.b-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-body + .section .b-grid, .section-alt .b-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.post .b-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.post .g-title { font-size: 17px; }
.post .g-sum { font-size: 14px; }

/* ---------- index + category lists */
.b-head { border-bottom: 0; padding-bottom: 8px; }
.b-head .crumbs { margin-bottom: 22px; }
.b-head .pill-nav a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.b-index { padding-top: clamp(24px, 4vw, 40px); }
.b-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px 24px; }
.b-card { display: grid; grid-template-rows: auto 1fr; background: var(--paper); border: 1px solid var(--line); min-width: 0; transition: border-color .2s; }
.b-card:hover { border-color: var(--line-2); }
.b-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--stage); }
.b-media img { width: 100%; height: 100%; object-fit: cover; }
.b-body { display: grid; gap: 10px; padding: 18px 20px 22px; align-content: start; }
.b-meta { font: 500 11.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.b-title { font-size: 21px; line-height: 1.22; letter-spacing: -0.02em; font-weight: 500; }
.b-title a { text-decoration: none; }
.b-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.b-sum { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.post-related .b-title { font-size: 18px; }
.b-feed { margin-top: 36px; font: 500 12px/1 var(--mono); }
.b-feed a { color: var(--ink-3); }

/* ---------- landing (service) pages */
.lp-hero .crumbs { margin-bottom: 22px; }
.lp-hero h1 { max-width: 20ch; }
.lp-body { padding-top: clamp(24px, 4vw, 48px); }

@media (max-width: 640px) {
  .post-body { font-size: 17px; line-height: 1.62; }
  .b-grid, .post .b-grid { grid-template-columns: 1fr; }
}