/* ZeroZ4J static site — chrome, components, responsive. Tokens come from the design-system stylesheets. */
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{background:var(--color-vault);color:var(--color-bone);font-family:var(--font-sans)}
a{color:var(--color-brass)}a:hover{color:var(--color-bone)}
::selection{background:var(--color-brass);color:var(--color-vault)}
pre,img,table{max-width:100%}
.serif{font-family:var(--font-serif);font-style:italic;color:var(--color-brass);font-weight:inherit}
.mono{font-family:var(--font-mono)}
.bone{color:var(--color-bone)}.ash{color:var(--color-ash)}.brass{color:var(--color-brass)}.cyan{color:var(--color-cyan)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-10);color:var(--color-ash);text-transform:uppercase;letter-spacing:var(--tracking-wide);margin:0 0 20px}
.eyebrow.is-brass{color:var(--color-brass)}
section{padding:128px 64px;border-bottom:1px solid var(--color-steel);position:relative}
section.vault{background:var(--color-vault)}
.wrap{max-width:1440px;margin:0 auto;position:relative}
h1{font-family:var(--font-sans);font-weight:300;letter-spacing:var(--tracking-tight);line-height:1.0;color:var(--color-bone);margin:0;text-wrap:balance}
h2{font-family:var(--font-sans);font-weight:300;font-size:var(--text-42);color:var(--color-bone);letter-spacing:var(--tracking-tight);line-height:1.08;margin:0;text-wrap:pretty}
h2.xl{font-size:clamp(40px,4.8vw,68px);line-height:1.04}
.lead{font-family:var(--font-sans);font-size:var(--text-20);color:var(--color-ash);line-height:1.5;margin:32px 0 0;max-width:720px;text-wrap:pretty}
.body{font-family:var(--font-sans);font-size:var(--text-16);color:var(--color-ash);line-height:1.6;margin:24px 0 0;max-width:660px}
.body14{font-family:var(--font-sans);font-size:var(--text-14);color:var(--color-ash);line-height:1.6;margin:16px 0 0}
.center{text-align:center}.center>*{margin-left:auto;margin-right:auto}
/* Buttons — DS Button, instant fill hover */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-12);text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:14px 24px;border:var(--border-w) solid transparent;border-radius:0;background:transparent;cursor:pointer;text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}
.btn.primary{border-color:var(--color-brass);color:var(--color-brass)}
.btn.primary:hover{background:var(--color-brass);color:var(--color-vault)}
.btn.secondary{border-color:var(--color-steel);color:var(--color-bone)}
.btn.secondary:hover{background:var(--color-steel);color:var(--color-bone)}
.btn.ghost{border-color:transparent;color:var(--color-ash)}
.btn.ghost:hover{color:var(--color-bone)}
.btns{display:flex;gap:12px;margin-top:40px}
/* Nav */
.nav{position:sticky;top:0;z-index:50;background:var(--color-vault);display:flex;justify-content:space-between;align-items:center;gap:32px;padding:20px 48px;border-bottom:1px solid var(--color-steel);font-family:var(--font-mono);font-size:var(--text-12);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.nav a{text-decoration:none}
.nav .brand{color:var(--color-bone);font-weight:500}
.nav .links{display:flex;align-items:center;gap:28px}
.nav .links a{color:var(--color-ash)}
.nav .links a:hover,.nav .links a.active{color:var(--color-brass)}
.nav .right{display:flex;align-items:center;gap:20px}
.nav .gh{color:var(--color-bone)}
.pulse{display:inline-flex;align-items:center;gap:8px;color:var(--color-ash)}
.pulse i{width:4px;height:4px;background:var(--color-cyan);animation:z4pulse 2s infinite}
@keyframes z4pulse{0%,100%{opacity:1}50%{opacity:.2}}
/* Docs dropdown — native details, no JS */
details.docs{position:relative}
details.docs summary{list-style:none;cursor:pointer;color:var(--color-ash)}
details.docs summary::-webkit-details-marker{display:none}
details.docs summary:hover,details.docs[open] summary{color:var(--color-brass)}
details.docs .menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;z-index:60}
details.docs .menu div{background:var(--color-graphite);border:1px solid var(--color-steel);min-width:220px}
details.docs .menu a{display:block;padding:14px 20px;color:var(--color-bone)}
details.docs .menu a+a{border-top:1px solid var(--color-steel)}
details.docs .menu a:hover{color:var(--color-brass)}
/* Code blocks */
.cb{background:var(--color-graphite);border:1px solid var(--color-steel)}
.cb-h{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--color-steel);font-family:var(--font-mono);font-size:var(--text-12);color:var(--color-ash)}
.cb pre{margin:0;padding:24px;font-family:var(--font-mono);font-size:13px;line-height:1.75;color:var(--color-bone);overflow-x:auto}
.k{color:var(--color-brass)}.c{color:var(--color-cyan)}.m{color:var(--color-ash)}
.badge{display:inline-block;border:var(--border-w) solid var(--color-cyan);color:var(--color-cyan);font-family:var(--font-mono);font-size:var(--text-10);text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:4px 8px}
/* Cards */
.card{background:var(--color-graphite);border-left:1px solid var(--color-steel);padding:44px 48px}
.card h3{margin:0;font-weight:400;font-size:var(--text-20);letter-spacing:-0.01em;color:var(--color-bone);line-height:1.25}
.card p{color:var(--color-ash);font-size:var(--text-14);line-height:1.65;margin:16px 0 0}
.cardgrid{display:grid;border:1px solid var(--color-steel);border-left:none}
.cardgrid.topless{border-top:none}
.cardgrid.topless>.card{border-top:1px solid var(--color-steel)}
/* Grid tables */
.tbl{border:1px solid var(--color-steel)}
.trow,.thead{display:grid}
.thead{background:var(--color-graphite);border-bottom:1px solid var(--color-steel)}
.trow+.trow{border-top:1px solid var(--color-steel)}
.th{padding:16px 28px;font-family:var(--font-mono);font-size:var(--text-10);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-ash)}
.td{padding:22px 28px;font-family:var(--font-sans);font-size:var(--text-14);color:var(--color-ash);line-height:1.6}
.th+.th,.td+.td{border-left:1px solid var(--color-steel)}
.td.first{font-size:var(--text-16);color:var(--color-bone)}
.td.mono{font-family:var(--font-mono)}
.td.hl{background:var(--color-graphite);color:var(--color-brass)}
.tfoot{border-top:1px solid var(--color-steel);padding:18px 28px;font-family:var(--font-mono);font-size:var(--text-12);color:var(--color-ash);background:var(--color-vault)}
/* Callout */
.callout{border:1px solid var(--color-steel);background:var(--color-graphite);padding:32px 40px;margin-top:56px}
.callout.cyan{border-left:3px solid var(--color-cyan)}
.callout.brass{border-left:3px solid var(--color-brass)}
.callout h3{font-weight:400;font-size:var(--text-20);color:var(--color-bone);margin:0}
.callout p{font-family:var(--font-sans);font-size:var(--text-16);color:var(--color-ash);margin:18px 0 0;line-height:1.65;max-width:860px}
.callout p.big{font-size:var(--text-20);color:var(--color-bone);margin:0;line-height:1.5;text-wrap:pretty}
/* Meta bar under heroes */
.metabar{border-top:1px solid var(--color-steel)}
.metabar .wrap{display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--font-mono);font-size:var(--text-12)}
.metabar .cell{padding:24px 28px}
.metabar .cell+.cell{border-left:1px solid var(--color-steel)}
.metabar .cell b{display:block;color:var(--color-ash);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-size:var(--text-10);font-weight:400;margin-bottom:10px}
.metabar .cell span{color:var(--color-bone);line-height:1.4}
.metabar a{text-decoration:none}
.hero{display:flex;flex-direction:column;border-bottom:1px solid var(--color-steel);position:relative}
.hero .inner{flex:1;display:flex;align-items:center;padding:112px 64px 88px}
/* Footer */
.footer{padding:96px 64px 56px}
.footer .top{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.footer h2{font-size:var(--text-64);line-height:.98}
.footer .cells{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--color-steel);padding-top:24px;font-family:var(--font-mono);font-size:var(--text-12);color:var(--color-ash)}
.footer .cells a{text-decoration:none}
.footer .legal{margin-top:40px;font-family:var(--font-mono);font-size:var(--text-10);color:var(--color-ash);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
/* Responsive */
@media (max-width:1024px){
section{padding-left:40px;padding-right:40px}
.hero .inner{padding-left:40px;padding-right:40px}
div[style*="grid-template-columns: repeat(3"],div[style*="grid-template-columns:repeat(3"]{grid-template-columns:repeat(2,1fr)!important}
div[style*="380px 1fr"],div[style*="1fr 380px"],div[style*="440px 1fr"]{grid-template-columns:1fr!important}
}
@media (max-width:768px){
section{padding:72px 24px}
.hero .inner{padding:72px 24px}
div[style*="grid-template-columns"],.thead,.trow,.metabar .wrap,.footer .top,.footer .cells,.cardgrid{grid-template-columns:1fr!important}
.metabar .cell+.cell,.th+.th,.td+.td{border-left:none;border-top:1px solid var(--color-steel)}
.cardgrid>.card{border-left:none;border-top:1px solid var(--color-steel)}
.nav{flex-wrap:wrap;justify-content:center;gap:10px 18px;padding:14px 20px}
.nav .links{flex-wrap:wrap;justify-content:center;gap:10px 16px}
.cb pre{font-size:12px;padding:18px}
h1{line-height:1.05}
section>.wrap>div{max-width:100%}
}
@media (max-width:480px){
section{padding-left:18px;padding-right:18px}
.cb pre{font-size:11px}
}