/* PLAYABLE ZERIND blog: shared styles for /blog/ and every article.
   Same tokens, header, buttons and footer as the homepage (index.src.html), plus an editorial reading layout. */
:root{
  --bg:#ffffff; --bg-2:#f3f6f8; --ink:#0e1a24; --ink-2:#3b4752; --muted:#6a7681; --line:#e3e8ec;
  --blue:#004c80; --blue-2:#003b64; --cyan:#29cbe7;
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f);overflow-x:clip;-webkit-font-smoothing:antialiased}
p{margin:0}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
a{color:inherit}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:30;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none;font-size:.9rem}
.skip:focus{left:16px}

/* header: identical to the homepage */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.wm{display:inline-flex;align-items:baseline;gap:.42em;font:500 .98rem/1 var(--f);letter-spacing:.18em;text-decoration:none;white-space:nowrap}
.wm b{font-weight:700;letter-spacing:.1em}
.wm i{display:inline-block;width:.42em;height:.42em;background:var(--cyan);margin-left:-.24em}
.top nav{display:flex;align-items:center;gap:34px}
.top nav a{font-size:.95rem;color:var(--ink-2);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
@media(max-width:860px){.top nav a:not(.btn){display:none}}
@media(max-width:400px){.top .wrap{gap:10px}.top .wm{font-size:.8rem;letter-spacing:.13em}.top .btn{font-size:.82rem;padding:.75em 1em}}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;padding:.9em 1.4em;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff!important;font:600 .95rem/1 var(--f);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{background:var(--blue);border-color:var(--blue)}
.btn.line{background:transparent;color:var(--ink)!important}
.btn.line:hover{background:var(--ink);color:#fff!important;border-color:var(--ink)}

/* breadcrumbs */
.crumbs{font-size:.88rem;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:.5em;color:#b9c3cb}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--muted)}

/* blog home */
.blog-head{padding-block:clamp(40px,6vw,88px) clamp(36px,5vw,64px)}
.blog-head h1{font-size:clamp(2.6rem,5.6vw,4.8rem);line-height:1;letter-spacing:-.04em;margin-top:22px;max-width:14em}
.blog-head p{font-size:clamp(1.05rem,1.3vw,1.18rem);color:var(--ink-2);max-width:34em;margin-top:24px}
.posts{list-style:none;margin:0;padding:0 0 clamp(72px,9vw,128px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 48px}
@media(max-width:820px){.posts{grid-template-columns:minmax(0,1fr);gap:44px}}
.post{border-top:1px solid var(--ink);padding-top:20px;display:grid;gap:12px;align-content:start}
.kicker{font-size:.85rem;color:var(--blue);font-weight:600;letter-spacing:.01em}
.post h2{font-size:clamp(1.45rem,2.3vw,1.9rem);line-height:1.14;letter-spacing:-.03em}
.post h2 a{text-decoration:none}
.post h2 a:hover{color:var(--blue)}
.post p{color:var(--ink-2)}
.more{font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:2px solid var(--cyan);justify-self:start;margin-top:4px}
.more:hover{color:var(--blue)}

/* article head */
.a-head{padding-block:clamp(40px,6vw,80px) clamp(32px,4vw,56px)}
.a-head h1{font-size:clamp(2.3rem,4.9vw,4rem);line-height:1.03;letter-spacing:-.04em;margin-top:22px;max-width:17em}
.dek{font-size:clamp(1.08rem,1.4vw,1.25rem);color:var(--ink-2);margin-top:24px;max-width:36em}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:26px;font-size:.88rem;color:var(--muted)}
.byline b{color:var(--ink-2);font-weight:600}

/* article layout: contents rail + reading column */
.a-body{display:grid;grid-template-columns:minmax(0,220px) minmax(0,720px);gap:clamp(40px,6vw,96px);align-items:start;padding-bottom:clamp(72px,9vw,128px)}
@media(max-width:1000px){.a-body{grid-template-columns:minmax(0,1fr);gap:36px}}
.toc{border-top:1px solid var(--ink);padding-top:16px;font-size:.92rem}
@media(min-width:1001px){.toc{position:sticky;top:100px}}
.toc p{font-weight:600;margin-bottom:10px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:t}
.toc li{display:grid;grid-template-columns:2.1em minmax(0,1fr);line-height:1.4}
.toc li::before{counter-increment:t;content:"0" counter(t);color:var(--blue);font-weight:600;font-size:.82rem;font-variant-numeric:tabular-nums;padding-top:.1em}
.toc li:nth-child(n+10)::before{content:counter(t)}
.toc a{text-decoration:none;color:var(--ink-2)}
.toc a:hover{color:var(--ink)}

/* reading column */
.prose{font-size:1.06rem;line-height:1.72;min-width:0}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(1.6rem,2.7vw,2.15rem);line-height:1.12;letter-spacing:-.03em;margin-top:2.3em}
.prose h3{font-size:1.24rem;line-height:1.3;letter-spacing:-.015em;margin-top:1.9em}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose>:first-child{margin-top:0}
.prose a{color:var(--blue);text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em;margin-bottom:0}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--blue)}
.prose strong{font-weight:600}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--bg-2);padding:.12em .38em;border-radius:6px;overflow-wrap:anywhere}
.prose pre{background:var(--ink);color:#e6edf2;padding:18px 20px;border-radius:12px;overflow-x:auto;font-size:.84rem;line-height:1.6}
.prose pre code{background:none;padding:0;color:inherit;font-size:inherit;overflow-wrap:normal}
.note{border-left:3px solid var(--cyan);padding:2px 0 2px 18px;color:var(--ink-2)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem;line-height:1.5}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.prose th{font-weight:600;font-size:.84rem;color:var(--ink-2);border-bottom-color:var(--ink)}
.prose td:first-child{font-weight:600}
.prose td code{white-space:nowrap;overflow-wrap:normal;font-size:.8em}

/* closing call to action */
.cta{background:var(--bg-2);border-radius:16px;padding:clamp(24px,4vw,40px);margin-top:2.6em}
.cta h2{margin-top:0;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.cta p{color:var(--ink-2)}
.cta .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.prose .cta a.btn{text-decoration:none;color:#fff}
.prose .cta a.btn.line{color:var(--ink)}

/* related posts and sources */
.related{border-top:1px solid var(--ink);padding-top:18px;margin-top:3em}
.related h2,.sources h2{font-size:1.15rem;margin-top:0;letter-spacing:-.01em}
.related ul{list-style:none;padding:0;display:grid;gap:12px;margin-top:12px}
.related li+li{margin-top:0}
.prose .related a{font-weight:600;text-decoration:none;color:var(--ink)}
.prose .related a:hover{color:var(--blue)}
.related span{display:block;color:var(--muted);font-size:.92rem}
.sources{border-top:1px solid var(--line);padding-top:18px;margin-top:2.4em;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.sources ol{margin-top:10px}
.sources li+li{margin-top:.4em}
.sources a{overflow-wrap:anywhere}

/* footer: identical to the homepage */
footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;padding-block:36px;font-size:.88rem;color:var(--muted)}
footer a{text-decoration:none;color:var(--ink-2)}
footer a:hover{color:var(--ink)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}