/* ==========================================================================
   PREMIUM READER LAYER: styling for the Coding reader pages.
   Load AFTER reader.css. Fonts come from assets/fonts/ (same folder as this file).
   ========================================================================== */
@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:400;font-style:italic;font-display:swap;src:url(fonts/newsreader-latin-400-italic.woff2) format("woff2")}
:root{--serif:Newsreader,Georgia,"Times New Roman",serif;--ink:#15150f;--muted:#55544b;--line:#d8d2bf;--accent:#14453d;--gold:#8b6425;--paper:#fffdf8;--code:#f1eee4}
html,body{background:var(--paper);color:var(--ink)}
body{font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
.article{max-width:780px;margin:0 auto;padding:48px 32px 72px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(34px,4vw,48px);line-height:1.1}h2{font-size:28px}h3{font-size:21px}
p,li{color:#2b2a25}.lead{color:var(--muted);font-size:18px}
.eyebrow{color:var(--gold)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.2em!important;text-transform:uppercase}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{color:#0c2a25;border-color:var(--accent)}
.code-block,.highlight,.highlight pre,pre,.output,.console{background:var(--code)!important;border:0!important;border-left:3px solid var(--accent)!important;border-radius:0!important;box-shadow:none!important;font-size:13.5px;line-height:1.65}
.output-label,.entry-heading{font:600 11.5px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.k,.kn,.kd,.kc{color:#6b3f86}.s,.s1,.s2,.sa,.se,.si{color:#a34b2f}.c,.c1,.cm{color:#7d7d70;font-style:italic}.mi,.mf,.mh{color:#14453d}.nf,.nc{color:#2d5a85}
.feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.feature-card,.feature-copy{min-width:0}
.article img,.feature-card img{max-width:100%;height:auto}
.feature-card{background:none!important;border:0!important;border-top:3px solid var(--accent)!important;border-radius:0!important;box-shadow:none!important;padding-top:16px}
.feature-card img{border:1px solid var(--line);border-radius:0}
table{border-collapse:collapse}th,td{border-bottom:1px solid var(--line);padding:8px 12px;text-align:left}
th{font-weight:600;color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.page-nav{border-top:1px solid var(--line);padding-top:18px;font-size:14px}
.external-link{border-bottom:1px solid var(--line)}
@media(max-width:700px){.feature-grid{grid-template-columns:minmax(0,1fr)}.article{padding:32px 20px 56px}}