/* Paulini Studio — Ratgeber pages. Builds on style.css (tokens, top bar, footer). */
.guide { background: var(--paper); }
.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1.4em; }
.crumbs a { text-underline-offset: .2em; }

/* article: book-like reading column */
.post { max-width: 44rem; margin: 0 auto; padding: clamp(32px, 5vw, 64px) 16px clamp(40px, 6vw, 80px); }
.post .stand { font-size: .85rem; color: var(--ink-soft); font-style: italic; }
.post h1 { margin: .25em 0 .6em; font-size: clamp(2.2rem, 7vw, 3.6rem); }
.post h2 { margin: 1.8em 0 .5em; font-size: clamp(1.6rem, 4.2vw, 2.2rem); line-height: 1; }
.post h3 { margin: 1.5em 0 .4em; }
.post p, .post ul, .post ol, .post blockquote, .post pre, .post .table { margin: 0 0 1em; }
.post ul { list-style: disc; padding-left: 1.3em; }
.post ol { list-style: decimal; padding-left: 1.5em; }
.post li { margin: .25em 0; }
.post a { color: var(--accent); text-underline-offset: .2em; }
.post blockquote { margin-left: 0; padding: .4em 0 .4em 1.1em; border-left: 4px solid var(--accent); font-style: italic; }
.post blockquote p { margin: 0; }
.post pre { overflow-x: auto; padding: 1em; background: #f2f2f2; font-size: .85rem; line-height: 1.45; }
.post code { font-size: .9em; }
.post hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }

.table { overflow-x: auto; }
.post table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.4; }
.post th, .post td { padding: .55em .7em; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.post th { border-bottom: 2px solid var(--ink); font-weight: 700; }

.sources { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--rule); font-size: .85rem; }
.sources h2 { font-size: 1.2rem; margin-top: 0; }
.sources a { word-break: break-word; }

.related { padding: clamp(32px, 5vw, 56px) var(--pad); background: var(--grey); }
.related h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: .6em; }
.related ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.related a { display: block; height: 100%; padding: 16px; background: var(--paper); text-decoration: none; font-weight: 700; }
.related a:hover { outline: 2px solid var(--ink); }

/* hub + cluster pages */
.hub { max-width: 1180px; margin: 0 auto; padding: clamp(32px, 5vw, 72px) var(--pad); }
.hub .lead { max-width: 40em; margin: .8em 0 1.5em; font-size: 1.15rem; color: var(--ink-soft); }
.hub section { margin-top: clamp(32px, 5vw, 56px); }
.hub section h2 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
.hub section h2 a { text-decoration: none; }
.hub section > p { margin: .3em 0 1em; color: var(--ink-soft); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.cards a { display: block; height: 100%; padding: 20px; border-top: 3px solid var(--ink); background: #f4f4f4; text-decoration: none; }
.cards a:hover { background: var(--grey); }
.cards p { margin-top: .5em; font-size: .92rem; color: var(--ink-soft); }
.more { margin-top: 1em; }
footer a { color: inherit; }

@media (max-width: 900px) {
  .guide ~ footer, .top nav { font-size: .9rem; }
}

/* example images inside articles (e.g. genre covers): float beside the text on wide screens */
.post figure.example { float: right; clear: right; width: min(42%, 230px); margin: .35em 0 1.2em 1.6em; }
.post figure.example img { width: 100%; height: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.post figure.example figcaption { margin-top: .5em; font-size: .78rem; line-height: 1.35; color: var(--ink-soft); font-style: italic; }
.post h2, .post .table, .post .sources { clear: both; }
@media (max-width: 560px) {
  .post figure.example { float: none; width: 62%; margin: .6em auto 1.4em; }
}