/*
* World Guide Post – article & page typography.
* Styles every standard HTML element a pasted article can contain, so no
* per-article CSS is ever needed.
*/
/* ---------- Layout ---------- */
.art {
display: grid;
grid-template-columns: 220px minmax(0, 680px);
gap: 56px;
justify-content: center;
padding: 16px 0 48px;
}
.art--solo { grid-template-columns: minmax(0, 680px); }
.toc { position: sticky; top: 90px; align-self: start; font-size: 14px; max-height: calc(100vh - 120px); overflow-y: auto; }
.toc__title { display: block; margin: 0 0 8px; font-weight: 700; }
.toc__link {
display: block;
padding: 6px 0 6px 12px;
color: #4a4a4a;
border-left: 2px solid var(--ln);
}
.toc__link--h3 { padding-left: 26px; font-size: 13px; }
.toc__link:hover, .toc__link.is-active { color: var(--tx); border-color: var(--ink); }
.toc__link.is-active { font-weight: 600; border-left-color: var(--accent); }
.page-entry { max-width: 720px; margin: 0 auto; padding-bottom: 24px; }
.page-entry .ph1 { padding-top: 8px; }
/* ---------- Article header ---------- */
.entry-header .tag { margin-bottom: 8px; }
.entry-title { font-size: clamp(32px, 5vw, 46px); margin: .15em 0 .35em; }
.lede { font: 20px/1.6 var(--sans); color: var(--mu); }
.entry-meta { margin: 0 0 24px; }
.entry-meta a:hover { text-decoration: underline; }
.entry-figure { margin: 0 0 28px; }
.entry-figure__img { width: 100%; height: auto; border-radius: 10px; display: block; }
.cap, .entry-content figcaption, .wp-caption-text { font-size: 14px; color: var(--mu); margin-top: 6px; }
/* ---------- Content typography ---------- */
.entry-content { font-family: var(--read); color: #1a1a1a; overflow-wrap: break-word; }
.entry-content > :first-child { margin-top: 0; }
.entry-content p, .entry-content li, .entry-content dd { font-size: 18px; line-height: 1.8; }
.entry-content p { margin: 0 0 1.2em; }
.entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--serif); color: var(--black); }
.entry-content h2 { font-size: 28px; margin: 1.8em 0 .6em; }
.entry-content h3 { font-size: 22px; margin: 1.6em 0 .5em; }
.entry-content h4 { font-size: 18px; margin: 1.4em 0 .4em; }
.entry-content a {
text-decoration: underline;
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.entry-content a:hover { background: rgba(255, 214, 10, .25); }
.entry-content ul, .entry-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin: .4em 0; }
.entry-content li > ul, .entry-content li > ol { margin: .4em 0 0; }
.entry-content dt { font-weight: 700; margin-top: 1em; }
.entry-content dd { margin: 0 0 .6em 1.2em; }
.entry-content img { max-width: 100%; height: auto; border-radius: 8px; }
.entry-content figure { margin: 28px 0; }
.entry-content figure img { display: block; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignleft { float: left; margin: 4px 24px 12px 0; }
.entry-content .alignright { float: right; margin: 4px 0 12px 24px; }
.entry-content::after { content: ""; display: table; clear: both; }
.entry-content blockquote {
margin: 28px 0; padding: 0 0 0 20px;
border-left: 3px solid var(--ink);
font: italic 22px/1.5 var(--serif);
}
.entry-content blockquote p { font: inherit; margin: 0 0 .6em; }
.entry-content blockquote cite, .entry-content blockquote footer { display: block; font: normal 14px var(--sans); color: var(--mu); }
.entry-content hr { border: 0; border-top: 1px solid var(--ln); margin: 2.4em 0; }
.entry-content code { font: .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--soft); padding: .15em .4em; border-radius: 4px; }
.entry-content pre { background: var(--soft); padding: 16px 18px; border-radius: 10px; overflow-x: auto; margin: 0 0 1.4em; }
.entry-content pre code { background: none; padding: 0; font-size: 14px; }
.entry-content mark { background: var(--accent); color: var(--black); }
.entry-content small { font-size: .85em; color: var(--mu); }
/* Callout box (optional class: …
) */
.entry-content .call, .entry-content .callout, .entry-content .note {
background: var(--soft); border-radius: 10px;
padding: 16px 20px; margin: 24px 0;
font-family: var(--sans); font-size: 15px;
}
.entry-content .call p, .entry-content .callout p, .entry-content .note p { font-size: 15px; line-height: 1.6; margin: 0 0 .6em; }
.entry-content .call > :last-child, .entry-content .callout > :last-child, .entry-content .note > :last-child { margin-bottom: 0; }
/* Tables (scroll wrapper added at render time) */
.wgp-table-wrap { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }
.wgp-table-wrap:focus-visible { outline: 2px solid var(--ink); }
.entry-content table { width: 100%; border-collapse: collapse; font: 15px/1.5 var(--sans); margin: 0; }
.entry-content th, .entry-content td { padding: 12px; text-align: left; border-bottom: 1px solid var(--ln); vertical-align: top; }
.entry-content th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mu); white-space: nowrap; }
.entry-content td p, .entry-content td li, .entry-content th p { font-size: inherit; line-height: inherit; margin: 0; }
.entry-content caption { font-size: 14px; color: var(--mu); text-align: left; padding-bottom: 8px; caption-side: top; }
/* FAQ sections: …
…