/* Self-hosted. Regenerate with scripts/fetch_handbook_fonts.py */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/anton-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Courier Prime';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/courier-prime-400-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Courier Prime';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/courier-prime-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Courier Prime';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/courier-prime-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Courier Prime';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/courier-prime-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Courier Prime';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/courier-prime-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Courier Prime';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/courier-prime-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/lora-400-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/lora-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/lora-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/lora-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/static/fonts/lora-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/static/fonts/lora-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --ground:#08080a; --panel:#121215; --panel-2:#17171b; --line:#2b2b31;
  --ink:#f4f3f0; --ink-2:#b4b3ae; --ink-3:#7d7c78;

  --brand:#900000;          /* masthead only - the one ZedOnline colour */
  --red:#d1493c;            /* borders and large headings */
  /* Small text needs its own red. #d1493c measures 4.21:1 on the block
     background, under the 4.5 minimum, and the labels were also 10.5px,
     all-caps, widely tracked and monospace - four things fighting legibility at
     once. #e8695a measures 5.88:1. */
  --red-text:#e8695a;
  --red-dim:#5e1f19;
  --green:#6fa84f;
  --green-text:#84bd63;
  --green-dim:#2c4222;

  --measure:66ch;
  --typed:"Courier Prime",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --read:"Lora",Georgia,"Times New Roman",serif;
  --paint:"Anton","Arial Narrow",Impact,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:17px/1.72 var(--read); -webkit-font-smoothing:antialiased;
  /* a whisper of noise so large black areas do not band on cheap panels */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.022'/></svg>");
  background-attachment:fixed;
}

/* ── shell: masthead full width, contents left, body right ──────────────── */
.shell{
  max-width:1180px;margin:0 auto;padding:0 24px 120px;
  display:grid;grid-template-columns:222px 1fr;gap:52px;align-items:start}
@media (max-width:900px){.shell{grid-template-columns:1fr;gap:0}}

/* ── masthead ───────────────────────────────────────────────────────────── */
/* Two columns so the server mark fills the space to the right of the title,
   which was empty at desktop width. Collapses to one column on narrow screens,
   mark first, so it never squeezes the wordmark. */
.notice{grid-column:1/-1;padding:58px 0 30px;margin-bottom:44px;
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.notice .mark{width:132px;height:auto;display:block;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
@media (max-width:760px){
  .notice{grid-template-columns:1fr;gap:22px}
  .notice .notice-text{order:2}
  .notice .mark{order:1;width:92px}}
.notice .order{
  font:400 11.5px/1.6 var(--typed);letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-3);display:block}
.notice h1{
  font:400 clamp(52px,11vw,104px)/.84 var(--paint);
  letter-spacing:.005em;text-transform:uppercase;margin:14px 0 0;
  color:var(--brand)}
.notice .terms{
  font:400 clamp(15px,3vw,21px)/1.4 var(--typed);letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink);margin:14px 0 0}
.notice .strap{
  font:400 16.5px/1.62 var(--read);color:var(--ink-2);
  max-width:56ch;margin:24px 0 0}
.notice .strap-2{
  font:italic 400 15.5px/1.6 var(--read);color:var(--ink-3);
  max-width:56ch;margin:10px 0 0}
.rule-heavy{display:none}

/* ── contents, sticky left ──────────────────────────────────────────────── */
.index{position:sticky;top:26px;font-size:13.5px}
@media (max-width:900px){
  .index{position:static;margin-bottom:48px;border:1px solid var(--line);
    padding:20px 18px}}
.index .lab{
  font:700 10px/1 var(--typed);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:16px}
.index ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:1px}
.index li{margin:0}
.index a{
  display:flex;align-items:baseline;gap:10px;text-decoration:none;
  color:var(--ink-2);font:400 13.5px/1.45 var(--typed);
  padding:6px 9px;margin-left:-9px;transition:color .12s,background .12s}
.index a:hover{color:var(--ink);background:var(--panel)}
.index a:focus-visible{outline:1px solid var(--red);outline-offset:1px}
.index .n{color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.index .dots{display:none}

/* ── sections ───────────────────────────────────────────────────────────── */
main{min-width:0}
section{padding-top:0;margin-bottom:64px;scroll-margin-top:22px}
.head{margin:0 0 24px}
.head .marker{
  font:700 12px/1.3 var(--typed);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);display:block;margin-bottom:11px}
.head h2{
  font:400 clamp(28px,5vw,42px)/1.04 var(--paint);text-transform:uppercase;
  letter-spacing:.012em;margin:0;color:var(--red)}
.head .after{border:0;border-top:1px solid var(--line);margin:16px 0 0}

p{margin:0 0 17px;max-width:var(--measure)}
.lede{font-size:19px;color:var(--ink-2);max-width:60ch}
/* Subsection headers are red. They sit outside the blocks and are set in
   letterspaced mono caps, so they read as structure rather than as a warning -
   the danger blocks stay distinct by their border and tint, not by colour
   alone. */
h3{
  font:700 13.5px/1.5 var(--typed);letter-spacing:.14em;text-transform:uppercase;
  margin:36px 0 13px;color:var(--red-text)}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}
a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--ink)}
code{font:14px/1.5 var(--typed);background:var(--panel-2);padding:1px 6px;
  color:var(--ink);white-space:nowrap;border:1px solid var(--line)}
ul{margin:0 0 17px;padding-left:0;list-style:none;max-width:var(--measure)}
ul li{position:relative;padding-left:22px;margin:0 0 8px}
ul li:before{content:"\2014";position:absolute;left:0;color:var(--ink-3)}

/* ── blocks: hard edges, label inside, never a floating tag on a border ─── */
.stamped{
  border:1px solid var(--line);border-left:3px solid var(--ink-3);
  background:var(--panel);padding:17px 20px;margin:26px 0;
  max-width:var(--measure)}
.stamped .st{
  font:700 13px/1.35 var(--typed);letter-spacing:.13em;text-transform:uppercase;
  color:var(--red-text);display:block;margin-bottom:12px}
.stamped p:last-child,.stamped ul:last-child{margin-bottom:0}

/* red means one thing: this gets you removed, or there is no protection here */
.stamped.danger{border-color:var(--red-dim);border-left-color:var(--red);
  background:linear-gradient(0deg,rgba(209,73,60,.05),rgba(209,73,60,.05)),var(--panel)}
.stamped.danger .st{color:var(--red-text)}
/* green means allowed */
.stamped.accord{border-color:var(--green-dim);border-left-color:var(--green);
  background:linear-gradient(0deg,rgba(111,168,79,.05),rgba(111,168,79,.05)),var(--panel)}
.stamped.accord .st{color:var(--green-text)}

/* ── numbered procedure ─────────────────────────────────────────────────── */
.proc{counter-reset:p;list-style:none;margin:0 0 22px;padding:0;
  max-width:var(--measure)}
.proc li{counter-increment:p;position:relative;padding-left:46px;margin:0 0 15px}
.proc li:before{
  content:counter(p,decimal-leading-zero);position:absolute;left:0;top:2px;
  font:700 13px/1.6 var(--typed);color:var(--ink-3);letter-spacing:.06em}

/* ── ledger ─────────────────────────────────────────────────────────────── */
.ledger{width:100%;border-collapse:collapse;margin:0 0 22px;
  max-width:var(--measure);font:400 16px/1.6 var(--read)}
.ledger th{
  font:700 12px/1.5 var(--typed);letter-spacing:.13em;text-transform:uppercase;
  text-align:left;color:var(--ink-2);padding:0 14px 9px 0;
  border-bottom:1px solid var(--ink-3)}
.ledger td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink-2)}
.ledger td:first-child{font:700 12.5px/1.6 var(--typed);letter-spacing:.1em;
  white-space:nowrap;color:var(--ink)}
.ledger tr:last-child td{border-bottom:0}
.ledger tr:last-child td:first-child{color:var(--red)}

/* an in-character nickname, set quietly so it never carries the meaning */
.aside{
  font:italic 400 15px/1.6 var(--read);color:var(--ink-3);
  border-left:1px solid var(--line);padding-left:16px;margin:22px 0;
  max-width:var(--measure)}

/* ── the rules, set tighter like fine print ─────────────────────────────── */
.terms-block{font-size:15.5px;line-height:1.68;color:var(--ink-2)}
.terms-block h3{
  font:400 23px/1.2 var(--paint);text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);margin:34px 0 13px;padding-bottom:7px;
  border-bottom:1px solid var(--line)}
.terms-block p{margin:0 0 11px}
.terms-block strong{color:var(--ink)}
.terms-block .fine{font:400 13px/1.6 var(--typed);color:var(--ink-3)}

.colophon{
  grid-column:1/-1;margin-top:40px;padding-top:20px;
  border-top:1px solid var(--line);
  font:400 12px/1.8 var(--typed);color:var(--ink-3);letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}