/* ampixa.com/blog — themed onto the Ampixa Field design system (/sys/tokens.css, /sys/bundle.css), which every
   blog page also loads. This file holds ONLY what tokens.css/bundle.css do not already provide: page-shell width,
   the blog index list, the post header/prose/listen/toc, and the draft-review chrome. No colors or fonts are
   hardcoded here — everything is var(--token) from tokens.css, so a palette change there is a palette change here. */

.wrap{max-width:1200px;margin:0 auto;padding-inline:16px}
.ax-nav,.wrap{padding-left:16px;padding-right:16px}
@media (min-width:1232px){.ax-nav,.wrap{padding-left:0;padding-right:0;max-width:1200px;margin:0 auto}}
.foot{border-top:1px solid var(--rule);padding:18px 16px 30px;font:12px var(--font-mono);color:var(--ink-2);text-align:center}
.draft-banner{font:12px var(--font-mono);background:var(--crimson);color:var(--on-crimson);padding:8px 12px;margin:16px 0 0}

/* scrawl helpers — bundle.css doesn't ship these; every page that uses data-scrawl defines them locally */
.scrawl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.scrawl-c{display:inline-block;max-width:100%;height:auto!important;vertical-align:middle}

/* index: a plain dated list, newest first — no filter/map UI, there is one project's worth of posts so far */
.bhead{padding:28px 0 8px}
.bhead h1{margin:10px 0 10px}
.lede{max-width:62ch;color:var(--ink-2);font-size:17px;margin:0 0 28px}
.empty{font:14px var(--font-mono);color:var(--ink-2)}
.posts{list-style:none;padding:0;margin:0 0 50px;border-top:2px solid var(--ink)}
.post a{display:grid;grid-template-columns:96px 1fr auto;column-gap:18px;align-items:start;padding:18px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.post time{font:13px var(--font-mono);color:var(--ink-2);padding-top:3px}
.post .k{display:block;font:11px var(--font-mono);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2);margin:3px 0 4px}
.post h3{font:700 21px/1.3 var(--font-text);margin:0 0 6px;text-wrap:balance}
.post p{margin:0;color:var(--ink-2);font-size:15px;max-width:68ch}
.post .go{align-self:center;font:13px var(--font-label);color:var(--crimson)}
.post a:hover h3{color:var(--crimson)}
@media (max-width:560px){.post a{grid-template-columns:1fr auto;row-gap:2px}.post time{padding-top:0}}

/* preview/drafts dashboard (gated, noindex) */
.ih1{font:700 clamp(28px,4.5vw,40px)/1.15 var(--font-text);margin:30px 0 14px}

/* post */
.back{display:inline-block;margin:18px 0 0;font:12px var(--font-mono);color:var(--ink-2);text-decoration:none}
.back:hover{color:var(--crimson)}
.phead{margin:14px 0 20px;padding:0 0 26px;border-bottom:2px solid var(--ink)}
.ptitle{font:700 clamp(28px,4.2vw,44px)/1.18 var(--font-text);margin:10px 0 12px;max-width:22ch;text-wrap:balance}
.pmeta{font:13px var(--font-mono);color:var(--ink-2)}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.links a{font:12px var(--font-mono);color:var(--ink);text-decoration:none;border:1px dashed var(--crimson);padding:6px 12px;background:var(--card)}
.links a:hover{background:var(--crimson);color:var(--on-crimson);border-style:solid}

.listen{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 28px;background:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--crimson)}
.listen button{font:9px var(--font-label);text-transform:uppercase;padding:9px 12px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;white-space:nowrap}
.listen button[aria-pressed="true"]{background:var(--crimson);border-color:var(--crimson);color:var(--on-crimson)}
.l-info{font:12px var(--font-mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;max-width:40%}
.l-bar{flex:1;height:8px;border:1px solid var(--ink);background:var(--paper);min-width:40px}
.l-bar span{display:block;height:100%;width:0;background:var(--crimson)}

.pgrid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px}
.pgrid.notoc{grid-template-columns:minmax(0,1fr)}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);align-self:start;font-size:14px}
.toc ol{list-style:none;padding:0;margin:8px 0 0;border-left:1px solid var(--rule)}
.toc a{display:block;padding:4px 0 4px 12px;color:var(--ink-2);text-decoration:none;margin-left:-1px;border-left:2px solid transparent;line-height:1.35}
.toc a:hover{color:var(--crimson)}
.toc a.on{color:var(--ink);border-left-color:var(--crimson)}

.prose{max-width:68ch;font-size:18px;line-height:1.65;min-width:0}
.prose h2{font:700 26px/1.25 var(--font-text);margin:48px 0 14px;scroll-margin-top:20px}
.prose h3{font:700 21px/1.3 var(--font-text);margin:32px 0 10px}
.prose a{color:var(--crimson)}
.prose blockquote{margin:20px 0;padding:12px 18px;border-left:3px solid var(--crimson);background:var(--card)}
.prose blockquote p{margin:0}
.prose code{font:.82em var(--font-mono);background:var(--paper-2);padding:1px 4px}
.prose pre{background:var(--paper-2);padding:14px 16px;overflow-x:auto;border:1px solid var(--rule)}
.prose pre code{background:none;padding:0;font-size:13px;line-height:1.55}
.prose em{color:var(--ink-2)}
.prose p.cap{font-size:14.5px;margin-top:-6px;color:var(--ink-2);font-style:italic}
.prose p.cap em{color:inherit}
.prose img{display:block;width:100%;height:auto;border:2px solid var(--ink);box-shadow:var(--lift);background:var(--card);margin:26px 0 6px}
.prose p:has(>img:only-child){margin:0}
.prose table{display:block;overflow-x:auto;border-collapse:collapse;font-size:15px;margin:22px 0;max-width:100%}
.prose th{font:8px var(--font-label);text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:10px 12px;border-bottom:2px solid var(--ink);vertical-align:bottom;line-height:1.6}
.prose td{padding:8px 12px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.prose td:not(:first-child){font-family:var(--font-mono);font-size:13.5px}
.prose tr:has(>td:first-child>strong) td{background:var(--crimson-pale);color:var(--crimson)}
.prose [lang="ne"],.prose td,.prose blockquote{font-family:var(--font-text)}
.prose [data-a]{position:relative}
.prose .reading{background:var(--crimson-pale);box-shadow:-10px 0 0 var(--crimson-pale),10px 0 0 var(--crimson-pale)}
.pp{position:absolute;left:-34px;top:.15em;width:24px;height:24px;padding:0;font:9px var(--font-label);line-height:22px;text-align:center;border:1px solid var(--rule);background:var(--card);color:var(--crimson);cursor:pointer;opacity:0;transition:opacity .1s}
.prose [data-a]:hover>.pp,.pp:focus-visible,.reading>.pp{opacity:1}

figure{margin:26px 0}
figcaption{font-size:14.5px;color:var(--ink-2);margin-top:8px;font-style:italic}
.demo{border:2px solid var(--ink);box-shadow:var(--lift);background:var(--card);padding:16px;max-width:100%;overflow-x:auto}
.demo .src{font:400 22px "Noto Sans Devanagari",sans-serif;margin-bottom:10px}
.demo .row{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--rule)}
.demo .rl{font:12px var(--font-mono);color:var(--ink-2)}
.demo .rl b{display:block;font:16px var(--font-label);color:var(--ink);margin-top:6px}
.demo .row.yak .rl b{color:var(--crimson)}
.demo .toks{display:flex;flex-wrap:wrap;gap:6px}
.tok{font:19px "Noto Sans Devanagari",sans-serif;padding:4px 9px;border:1px solid var(--ink);background:var(--paper)}
.tok.vs{border-color:var(--crimson);color:var(--crimson);background:var(--crimson-pale)}
.row.yak .tok{border-color:var(--crimson);background:var(--crimson);color:var(--on-crimson)}

.chart svg{display:block;max-width:none}
.chart .bl{font:13px var(--font-text);fill:var(--ink)}
.chart .bv{font:11px var(--font-mono);fill:var(--ink)}
.chart .bt{font:10px var(--font-mono);fill:var(--ink-2)}
.chart .gl{stroke:var(--rule)}
.chart .band{fill:var(--crimson-pale)}
.chart .stem{stroke:var(--ink-2);stroke-width:1.5}
.chart .dot{fill:var(--ink-2)}
.chart .dot.core{fill:var(--crimson)}
.scroll{overflow-x:auto}

.vbar{display:flex;min-height:60px;border:2px solid var(--ink);box-shadow:var(--lift);background:var(--card);flex-wrap:wrap}
.vbar span{display:flex;flex-direction:column;justify-content:center;padding:8px 12px;font:11px var(--font-mono);white-space:nowrap;flex:0 0 auto;border-right:2px solid var(--ink)}
.vbar span:last-child{border-right:0}
.vbar b{font:600 13px var(--font-mono)}
.vbar .v0{background:var(--crimson);color:var(--on-crimson)}.vbar .v1{background:var(--crimson-pale)}.vbar .v2{flex:1 1 auto;background:var(--card)}.vbar .v3{background:var(--paper-2)}

.repro{margin-top:56px;border:2px solid var(--ink);padding:16px;background:var(--card);box-shadow:4px 4px 0 var(--crimson)}
.repro pre{margin:10px 0 0}

@media (max-width:860px){.pgrid{grid-template-columns:1fr}.toc{display:none}.ptitle{font-size:28px}.pp{display:none}}
@media (max-width:560px){.demo .row{grid-template-columns:1fr;gap:8px}.vbar{flex-wrap:wrap}.vbar span{flex:1 1 40%;border-bottom:2px solid var(--ink)}}

/* page anatomy (spec §6): key art full bleed, title plate collides, links are the lifted object */
.hero{position:relative;margin:0 calc(50% - 50vw);border-block:3px solid var(--ink);background:var(--ink)}
.hero-art{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;object-position:center 40%;image-rendering:pixelated}
.hero-inner{position:absolute;inset:0;max-width:1180px;margin:0 auto;padding:0 16px;pointer-events:none}
.hero-inner>*{pointer-events:auto}
.hero-plate{position:absolute;bottom:0;left:16px;background:var(--paper);border:3px solid var(--ink);border-bottom:none;border-left:none;max-width:560px;padding:16px 24px 18px}
.hero-plate .back{margin:0 0 8px}
.hero-plate .ptitle{margin:8px 0 10px}
.hero-demo{position:absolute;right:16px;bottom:24px;margin:0;background:var(--paper);border:3px solid var(--ink);padding:12px;box-shadow:6px 6px 0 var(--crimson)}
@media (max-width:900px){
  .hero{margin:0 calc(50% - 50vw)}
  .hero-art{max-height:none;object-fit:contain}
  .hero-inner{position:static;max-width:none;padding:0}
  .hero-plate{position:static;max-width:none;border:none;border-bottom:2px solid var(--ink);padding:16px}
  .hero-demo{position:static;margin:0;border:none;border-bottom:2px solid var(--ink);box-shadow:none;background:var(--paper);padding:14px 16px}
}

/* index: every post the same weight — a grid of equal cards, art on top; nothing is featured */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;border-top:none}
.post a{display:flex;flex-direction:column;gap:6px;padding:0;border:3px solid var(--ink);background:var(--card);height:100%;box-shadow:5px 5px 0 var(--ink)}
.post:nth-child(odd) a{transform:rotate(-.5deg)} .post:nth-child(even) a{transform:rotate(.4deg)}
.post .art{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;image-rendering:pixelated;border-bottom:3px solid var(--ink);background:var(--paper-2)}
.post .k,.post h3,.post p{padding:0 16px}
.post .k{margin:8px 0 0} .post p{padding-bottom:16px}
.post a:hover{transform:rotate(0);box-shadow:5px 5px 0 var(--crimson)}