/* Styles for the static /articles pages. Mirrors the tokens in the main site. */
:root{--ink:#111;--paper:#fff;--line:#e1e1e1;--flag:#d2b356;--field:#f5f5f5;--muted:#666;--sans:"Open Sans",sans-serif,Arial,Helvetica;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.7}
a{color:inherit;text-decoration-color:var(--flag);text-decoration-thickness:2px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--flag);outline-offset:3px}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem clamp(1rem,4vw,3rem);background:#fff;border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;text-decoration:none}
.mark .logo{height:34px;width:auto;display:block}
.loc{margin-left:.7rem;font-weight:300;font-size:.95rem;color:var(--muted)}
.top nav{display:flex;gap:1.5rem;align-items:center;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.top nav a{text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.top nav a:hover{border-bottom-color:var(--flag)}
.top nav .nav-cta{border:1px solid var(--ink);padding:.4rem .9rem}
.top nav .nav-cta:hover{background:var(--flag);border-color:var(--flag)}
@media (max-width:760px){.loc{display:none}.top{flex-wrap:wrap}.top nav{flex-wrap:wrap;gap:.4rem 1rem}}
.wrap{max-width:76rem;margin:0 auto;padding:3.5rem clamp(1rem,4vw,3rem) 2rem}
h1{font-size:clamp(2rem,4.8vw,3rem);font-weight:900;line-height:1.15;letter-spacing:-.01em;margin:0 0 .75rem}
h2{font-size:1.4rem;font-weight:700;line-height:1.25;margin:2.2rem 0 .8rem}
h3{font-size:1.15rem;font-weight:700;margin:1.8rem 0 .6rem}
h1:after{content:"";display:block;width:30px;height:4px;background:var(--flag);margin-top:1.1rem}
p{margin:0 0 1rem;max-width:none}
.article-meta{color:var(--muted);font-size:.9rem;margin:1.2rem 0 2rem}
.article-body{font-size:1.05rem}
.article-body img{max-width:100%;height:auto}
.article-body blockquote{margin:1.5rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:4px solid var(--flag);color:#333}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
pre{background:#1e1e1e;color:#eee;padding:1rem;overflow:auto;font-size:.88rem;line-height:1.5}
code{font-family:Menlo,Consolas,monospace;font-size:.92em}
:not(pre)>code{background:var(--field);padding:2px 5px}
table{border-collapse:collapse;width:100%;margin:1.5rem 0}
th,td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}
.article-list{list-style:none;padding:0;margin:2rem 0 0}
.article-list li{margin:0 0 2rem;padding-top:1rem;border-top:1px solid var(--line)}
.article-list h2{margin:0 0 .3rem;font-size:1.3rem}
.article-list a{text-decoration:none}
.article-list a:hover{text-decoration:underline;text-decoration-color:var(--flag)}
.tag-chip{display:inline-block;background:var(--field);padding:2px 10px;margin:4px 4px 0 0;font-size:.8rem;color:#555}
.foot{max-width:76rem;margin:4rem auto 0;padding:1.5rem clamp(1rem,4vw,3rem) 2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font-size:.85rem;color:var(--muted)}

/* Align header with the page column on wide screens */
.top{padding-left:calc(max(0px,(100vw - 76rem)/2) + clamp(1rem,4vw,3rem));padding-right:calc(max(0px,(100vw - 76rem)/2) + clamp(1rem,4vw,3rem))}

/* Articles: sit on the same 76rem column as the header and footer */
.article-list{max-width:none}

/* Readable measure for article text; list and header stay full column width */
.article-body,.wrap>h1,.wrap>.article-meta{max-width:60rem}