/* CHORA shared shell: type scale, layout primitives, doc components.
   One scale for every page so nothing renders oversized on a phone. */

:root{
  --bg:#080808;
  --panel:#0e0d0c;
  --ink:#d8d2c4;
  --dim:#6b675e;
  --faint:#2a2825;
  --accent:#c9a227;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* fluid scale, min values legible on a 320px phone, max capped so a
     desktop never gets billboard text */
  --fs-wordmark:clamp(30px,7.4vw,58px);
  --fs-h1:clamp(23px,3.1vw,34px);
  --fs-h2:clamp(16.5px,1.7vw,20px);
  --fs-h3:clamp(14px,1.25vw,16px);
  --fs-body:clamp(13.5px,1.05vw,15px);
  --fs-code:clamp(12px,.95vw,13.5px);
  --fs-meta:clamp(10.5px,.82vw,11.5px);
  --fs-micro:clamp(10px,.76vw,10.5px);

  --gut:clamp(18px,4.6vw,32px);
  --rule:1px solid var(--faint);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--mono);font-size:var(--fs-body);line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--ink)}
img,svg{max-width:100%}

/* --- site header ------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:0 var(--gut);
  min-height:56px;
  background:rgba(8,8,8,.9);
  backdrop-filter:blur(8px);
  border-bottom:var(--rule);
}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand img{width:22px;height:22px;display:block}
.brand span{
  font-size:var(--fs-meta);letter-spacing:.26em;text-transform:uppercase;color:var(--ink);
}
.topnav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.topnav a{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 clamp(10px,2.2vw,14px);
  color:var(--dim);text-decoration:none;
  font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;
  border:1px solid transparent;border-radius:2px;
  transition:color .25s ease,border-color .25s ease;
}
.topnav a::before{
  content:"";width:13px;height:13px;flex:none;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
}
.topnav a:hover,.topnav a:focus-visible{color:var(--ink);border-color:var(--faint);outline:none}
.topnav a:focus-visible{border-color:var(--accent)}
.topnav a[aria-current="page"]{color:var(--ink);border-color:var(--faint)}

/* icon tokens */
.i-home{--icon:url("/web/assets/icon-home.svg")}
.i-tech{--icon:url("/web/assets/icon-tech.svg")}
.i-manifesto{--icon:url("/web/assets/icon-manifesto.svg")}
.i-discord{--icon:url("/web/assets/icon-discord.svg")}
.i-x{--icon:url("/web/assets/icon-x.svg")}
.i-api{--icon:url("/web/assets/icon-api.svg")}
.i-shield{--icon:url("/web/assets/icon-shield.svg")}
.i-flow{--icon:url("/web/assets/icon-flow.svg")}
.i-layers{--icon:url("/web/assets/icon-layers.svg")}
.i-book{--icon:url("/web/assets/icon-book.svg")}

/* --- doc layout -------------------------------------------------------- */
.doc{max-width:860px;margin:0 auto;padding:clamp(30px,6vh,60px) var(--gut) clamp(56px,9vh,96px)}
.doc-head{border-bottom:var(--rule);padding-bottom:clamp(20px,3.4vh,28px);margin-bottom:clamp(26px,4.6vh,44px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-meta);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";width:13px;height:13px;flex:none;background:var(--accent);
  -webkit-mask:var(--icon,url("/web/assets/icon-tech.svg")) center/contain no-repeat;
  mask:var(--icon,url("/web/assets/icon-tech.svg")) center/contain no-repeat;
}
h1{font-size:var(--fs-h1);line-height:1.24;font-weight:400;letter-spacing:.04em}
.lede{color:var(--dim);margin-top:14px;max-width:64ch;line-height:1.85;text-wrap:pretty}

section{margin-top:clamp(34px,5.6vh,58px);scroll-margin-top:70px}
h2{
  display:flex;align-items:center;gap:10px;
  font-size:var(--fs-h2);font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:11px;border-bottom:var(--rule);margin-bottom:20px;
}
h2::before{
  content:"";width:15px;height:15px;flex:none;background:var(--accent);
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
}
h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:.06em;color:var(--ink);margin:26px 0 9px}
p{max-width:70ch;text-wrap:pretty}
p + p{margin-top:13px}
section p{color:#b8b2a6}
strong{color:var(--ink);font-weight:600}
em{color:var(--accent);font-style:normal}

/* --- figures ----------------------------------------------------------- */
figure{margin:24px 0;border:var(--rule);border-radius:3px;background:var(--panel);overflow:hidden}
figure img{display:block;width:100%;height:auto;padding:clamp(10px,2vw,18px)}
figcaption{
  font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:#4e4b45;
  padding:9px clamp(12px,2vw,16px);border-top:var(--rule);
}

/* --- cards ------------------------------------------------------------- */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:18px}
.card{border:var(--rule);border-radius:3px;background:var(--panel);padding:clamp(14px,2.4vw,20px)}
.card h4{
  font-size:var(--fs-meta);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:400;margin-bottom:9px;
}
.card p{font-size:var(--fs-code);color:var(--dim);line-height:1.75;max-width:none}

/* --- code -------------------------------------------------------------- */
pre{
  border:var(--rule);border-radius:3px;background:var(--panel);
  padding:clamp(12px,2.2vw,17px);
  margin:16px 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  font-size:var(--fs-code);line-height:1.72;
}
pre code{color:#b8b2a6;white-space:pre}
code{font-family:var(--mono);font-size:.94em}
p code,li code,td code{color:var(--accent);background:rgba(201,162,39,.07);padding:1px 5px;border-radius:2px}
.tok-c{color:#4e4b45}
.tok-m{color:var(--accent)}
.tok-s{color:#8f9b7e}

/* --- tables ------------------------------------------------------------ */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0;border:var(--rule);border-radius:3px}
table{border-collapse:collapse;width:100%;min-width:440px;font-size:var(--fs-code)}
th,td{text-align:left;padding:10px clamp(10px,1.8vw,15px);border-bottom:1px solid #1b1a18;vertical-align:top}
th{
  font-size:var(--fs-micro);letter-spacing:.17em;text-transform:uppercase;
  color:var(--dim);font-weight:400;background:#0b0a0a;white-space:nowrap;
}
td{color:#b8b2a6}
tbody tr:last-child td{border-bottom:none}
td .m{color:var(--accent)}

/* --- lists ------------------------------------------------------------- */
ul.plain{list-style:none;margin:14px 0}
ul.plain li{position:relative;padding-left:24px;margin:9px 0;color:#b8b2a6;max-width:70ch}
ul.plain li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:12px;height:12px;background:var(--accent);
  -webkit-mask:url("/web/assets/icon-check.svg") center/contain no-repeat;
  mask:url("/web/assets/icon-check.svg") center/contain no-repeat;
}

/* --- live stat strip --------------------------------------------------- */
.stats{
  display:grid;gap:1px;background:var(--faint);
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  border:var(--rule);border-radius:3px;overflow:hidden;margin-top:20px;
}
.stat{background:var(--panel);padding:13px clamp(11px,1.8vw,16px)}
.stat dt{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:#4e4b45}
.stat dd{font-size:var(--fs-h3);color:var(--ink);margin-top:5px;font-variant-numeric:tabular-nums}

/* --- footer ------------------------------------------------------------ */
.foot{
  border-top:var(--rule);padding:clamp(20px,3.4vh,28px) var(--gut);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:var(--fs-micro);letter-spacing:.15em;color:#3a3833;
}
.foot a{color:#4e4b45;text-decoration:none}
.foot a:hover{color:var(--dim)}

/* --- responsive ------------------------------------------------------- */
@media (max-width:720px){
  .topbar{flex-wrap:wrap;padding-top:6px;padding-bottom:6px;min-height:0}
  .topnav{width:100%;justify-content:flex-start;gap:0;border-top:var(--rule);padding-top:2px}
  .topnav a{flex:1 1 auto;justify-content:center;letter-spacing:.1em;padding:0 8px}
  table{min-width:380px}
}
@media (max-width:420px){
  .topnav a span{display:none}
  .topnav a{padding:0 6px}
  .brand span{letter-spacing:.18em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
@media (prefers-contrast:more){
  :root{--ink:#f2ede1;--dim:#9a958a;--faint:#4a4740}
  section p,td,.card p{color:#ded8cc}
}