/* pixa.org — shared stylesheet.
   Corporate type rule: Industry for titles and navigation, Normative Pro for text.
   Greyscale chrome only; colour is reserved for media. */

/* ===== Fonts =================================================================== */
@font-face {
  font-family: "Normative Pro";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url(fonts/NormativePro.woff2) format("woff2");
}
/* Industry — drop IndustryBold.ttf and IndustryBook.ttf into assets/fonts/ and the
   headings switch over without any other change. Until then the fallback stack applies. */
@font-face { font-family: "Industry"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/IndustryBold.ttf) format("truetype"); }
@font-face { font-family: "Industry"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/IndustryBook.ttf) format("truetype"); }

/* ===== Tokens ================================================================== */
:root{
  --ink:#000; --paper:#fff;
  --g1:#f3f3f3;  /* surface */
  --g2:#d6d6d6;  /* rules */
  --g3:#8a8a8a;  /* muted text */
  --g4:#3c3c3c;  /* secondary text */
  --display:"Industry","Industry Book","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --text:"Normative Pro","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --max:1220px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;font-weight:400}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img,svg{display:block}
p,ul,ol,dl,table,pre{margin:0 0 16px}
ul,ol{padding-left:22px}
li{margin:4px 0}
strong,b{font-weight:700}
small{font-size:14px;color:var(--g4)}
hr{border:0;border-top:1px solid var(--g2);margin:28px 0}
.muted{color:var(--g3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Header ================================================================== */
.top{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:2px solid var(--ink)}
.top-in{max-width:var(--max);margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:14px}
.top .mark{width:34px;height:34px;flex:none}
.top .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.top .word{font-family:var(--display);font-weight:700;font-size:22px;line-height:1}
.top .word small{display:block;font-family:var(--text);font-size:12px;color:var(--g3);margin-top:3px;font-weight:400}
.top nav{margin-left:auto;display:flex;gap:22px;font-family:var(--display);font-size:16px}
.top nav a{text-decoration:none;white-space:nowrap;padding:6px 0;border-bottom:3px solid transparent}
.top nav a:hover{border-bottom-color:var(--g2)}
.top nav a[aria-current=page]{font-weight:700;border-bottom-color:var(--ink)}
@media (max-width:820px){
  .top-in{flex-wrap:wrap;padding:10px 16px 0}
  .top .word small{display:none}
  .top nav{margin-left:0;width:100%;gap:0;overflow-x:auto;justify-content:space-between;font-size:15px;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{padding:8px 2px}
  section{scroll-margin-top:112px}
}

/* ===== Hero ==================================================================== */
.hero{max-width:var(--max);margin:0 auto;padding:60px 24px 34px;display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:40px;align-items:end}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(42px,7.2vw,92px);line-height:.94;margin:0 0 22px;letter-spacing:-.012em}
.hero .lead{font-size:20px;line-height:1.5;max-width:58ch;margin:0}
.hero .mark{width:200px;height:200px}
@media (max-width:760px){.hero{grid-template-columns:1fr;gap:24px;padding-top:36px}.hero .mark{width:96px;height:96px;order:-1}}
.pulse{max-width:var(--max);margin:0 auto;padding:0 24px 40px}
.pulse-in{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:16px 0;font-family:var(--display);font-size:clamp(19px,2.5vw,28px);line-height:1.35}
.pulse b{font-weight:700}
.pulse .stamp{display:block;font-family:var(--text);font-size:14px;color:var(--g3);margin-top:8px}

/* ===== Layout ================================================================== */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px 96px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px}
.wrap.full{grid-template-columns:1fr}
aside.toc{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 100px);overflow:auto;font-family:var(--display);font-size:15px;padding-bottom:20px}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{display:block;padding:5px 0 5px 14px;border-left:2px solid var(--g2);color:var(--g4);text-decoration:none;line-height:1.3}
.toc a:hover{color:var(--ink)}
.toc a.on{border-left-color:var(--ink);color:var(--ink);font-weight:700}
.toc .grp{margin:18px 0 6px;color:var(--g3);font-size:13px;font-family:var(--text)}
.toc .grp:first-child{margin-top:0}
details.toc-m{display:none}
main{max-width:760px;min-width:0}
.wrap.full main{max-width:none}
@media (max-width:900px){
  .wrap{grid-template-columns:1fr;gap:0}
  aside.toc{display:none}
  details.toc-m{display:block;border:2px solid var(--ink);margin:0 0 28px}
  details.toc-m summary{font-family:var(--display);font-weight:700;font-size:18px;padding:12px 16px;cursor:pointer;list-style:none}
  details.toc-m summary::-webkit-details-marker{display:none}
  details.toc-m summary::before{content:"";display:inline-block;width:10px;height:10px;background:var(--ink);margin-right:12px;vertical-align:2px}
  details.toc-m[open] summary::before{background:var(--paper);outline:2px solid var(--ink);outline-offset:-2px}
  details.toc-m .toc{padding:0 16px 14px;font-family:var(--display);font-size:15px}
  details.toc-m .toc a{border-left-color:var(--g2)}
}

/* ===== Sections ================================================================ */
section{padding:44px 0 10px;border-top:1px solid var(--g2);scroll-margin-top:84px}
section:first-of-type{border-top:0;padding-top:0}
h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,40px);line-height:1.02;margin:0 0 20px;letter-spacing:-.005em}
h3{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.15;margin:30px 0 10px}
h4{font-family:var(--display);font-weight:700;font-size:18px;margin:22px 0 8px}
.step h2{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 14px;align-items:baseline}
.step h2 .n{font-size:clamp(44px,6vw,60px);line-height:1;color:var(--ink)}
@media (max-width:560px){.step h2{grid-template-columns:52px 1fr}.step h2 .n{font-size:40px}}
.lede{font-size:19px;line-height:1.5;max-width:64ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
@media (max-width:720px){.two{grid-template-columns:1fr}}

/* ===== Code ==================================================================== */
pre{position:relative;background:var(--ink);color:var(--paper);padding:40px 20px 18px;margin:18px 0;overflow:auto;font-family:var(--mono);font-size:14px;line-height:1.55;tab-size:2}
pre code{background:none;padding:0;font-size:inherit;color:inherit}
pre .c{color:#9c9c9c}
pre .v{background:#fff;color:#000;padding:0 3px}
pre::before{content:"";position:absolute;left:0;right:0;top:34px;border-top:1px solid #3a3a3a}
pre button.copy{position:absolute;top:9px;right:10px;background:var(--paper);color:var(--ink);border:0;font-family:var(--display);font-size:13px;padding:4px 10px;cursor:pointer;line-height:1.3}
pre button.copy:hover{background:var(--g2)}
code{font-family:var(--mono);font-size:.9em;background:var(--g1);padding:1px 5px;word-break:break-word}
kbd{font-family:var(--mono);font-size:.85em;border:1px solid var(--g2);padding:0 5px;background:var(--paper)}

/* ===== Notes =================================================================== */
.note{border-left:6px solid var(--ink);padding:12px 18px;margin:22px 0;background:var(--g1)}
.note p:last-child{margin:0}
.note.key{background:var(--ink);color:var(--paper);border-left-color:var(--ink)}
.note.key code{background:#3a3a3a;color:#fff}
.note.key a{color:#fff}
.note strong.h{display:block;font-family:var(--display);font-size:17px;margin-bottom:4px}

/* ===== Tables ================================================================== */
.tbl{overflow-x:auto;margin:18px 0}
table{border-collapse:collapse;width:100%;font-size:15.5px;line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--g2)}
th{font-family:var(--display);font-weight:700;border-bottom:2px solid var(--ink);font-size:16px}
td code{white-space:nowrap}
tr:last-child td{border-bottom:0}
table.plain td:first-child{color:var(--g4);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ===== Glossary ================================================================ */
dl.gloss{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:10px 24px}
dl.gloss dt{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.35;padding-top:1px}
dl.gloss dd{margin:0}
@media (max-width:560px){dl.gloss{grid-template-columns:1fr;gap:2px}dl.gloss dd{margin-bottom:12px}th,td{padding:8px 8px}table{font-size:14.5px}}

/* ===== Boxes and buttons ======================================================= */
.box{border:2px solid var(--ink);padding:24px 24px 20px;margin:24px 0}
.box h3{margin-top:0}
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;padding:12px 18px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.small{font-size:14px;padding:7px 12px}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.tag{display:inline-block;font-family:var(--display);font-size:13px;line-height:1;padding:4px 7px;border:1px solid var(--ink);vertical-align:2px;white-space:nowrap}
.tag.fill{background:var(--ink);color:var(--paper)}
.tag.dim{border-color:var(--g2);color:var(--g4)}

/* ===== Link lists ============================================================== */
.links{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.links li{margin:0;border-bottom:1px solid var(--g2);padding:12px 0;display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:6px 24px}
.links li a{font-family:var(--display);font-weight:700;text-decoration:none;font-size:18px}
.links li a:hover{text-decoration:underline}
.links li span{color:var(--g4);font-size:15.5px}
@media (max-width:560px){.links li{grid-template-columns:1fr}}

/* ===== Footer ================================================================== */
footer{border-top:2px solid var(--ink)}
.foot-in{max-width:var(--max);margin:0 auto;padding:24px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;font-size:14px;color:var(--g4)}
.foot-in .mark{width:26px;height:26px}
.foot-in a{color:inherit}
.foot-in .live{margin-left:auto;font-family:var(--display);color:var(--ink)}
.foot-in .live::before{content:"";display:inline-block;width:8px;height:8px;background:var(--g2);margin-right:8px;vertical-align:1px}
.foot-in .live.ok::before{background:var(--ink)}
@media (max-width:560px){.foot-in .live{margin-left:0}}

@media print{.top nav,aside.toc,details.toc-m,pre button.copy{display:none}pre{white-space:pre-wrap}section{break-inside:avoid-page}}