/* The shared shell: tokens, header, masthead, segmented control and the
 * document blocks, used by /rules/ (five pages) and /creekipedia/.
 *
 * A stylesheet rather than a copy of an inline <style> per page. The landing
 * page and /licensing/ are still self-contained and that is right for a page
 * with no sibling; these are the same page with different contents, and a
 * shell copied seven times disagrees with itself the first time one is
 * touched. See the repo's own note about two copies of a view.
 *
 * ⛔ Was site/rules/rules.css until CreekiPedia needed it too. The nginx vhost
 * gives it `expires -1` by exact match; without that it has no Expires at all
 * and outlives a deploy.
 *
 * The design TOKENS are still copied from the landing page, because those are
 * shared with documents that have no reason to load this file.
 */
*,*::before,*::after{box-sizing:border-box}
:root{
  --fog-0:#070A0B; --fog-1:#0C1112; --fog-2:#141E1D;
  --bone:#EFE7D9; --bone-2:#CBC7BC; --bone-3:#8D9490;
  --rust:#B85B3C; --gold:#D8B34A;
  --disp:"Anton","Haettenschweiler","Arial Narrow",sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"Roboto Mono",ui-monospace,monospace;
  --max:1240px;
  --hair:rgba(239,231,217,.16);
  --hair-2:rgba(239,231,217,.34);
  --nav-h:82px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--fog-0);color:var(--bone);font:300 17px/1.7 var(--serif)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:32px}
.kicker{font:500 11px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;
  color:var(--bone-3)}

header.site{border-bottom:1px solid var(--hair);position:relative;z-index:5;
  background:var(--fog-0)}
header.site .wrap{display:flex;align-items:center;gap:32px;height:var(--nav-h)}
.brand{margin-right:auto;display:flex;align-items:baseline;gap:12px;min-width:0}
.brand .n{font:400 22px/1 var(--disp);letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap}
.brand .o{font:500 10px/1 var(--mono);letter-spacing:.3em;color:var(--bone-3);
  text-transform:uppercase;white-space:nowrap}
.back{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-2);opacity:.78;transition:opacity .18s;white-space:nowrap}
.back:hover{opacity:1}
.back .short{display:none}

/* ── masthead ──
   padding-block, NOT the padding shorthand. `padding:64px 0 0` on a .wrap
   resets padding-inline to zero, and the masthead then sits 32px left of
   everything below it. Caught by measuring, not by eye. */
.mast{padding-block:64px 0}
.mast .row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  flex-wrap:wrap}
h1{margin:14px 0 0;font:400 clamp(40px,6.4vw,78px)/.96 var(--disp);letter-spacing:.02em;
  text-transform:uppercase}
.mast .lede{max-width:66ch;margin:24px 0 0;font-size:18px;color:var(--bone-2)}
.rev{margin:0 0 8px;font:500 10.5px/1.8 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3)}

/* ── the segmented control ──
   One object with three positions, not three links that happen to sit in a row.
   It sticks once the masthead is past, so switching document is a glance away
   however far down a long one you are.

   These are real anchors to real pages. Nothing here needs script: the active
   position is marked in the markup with aria-current, which is also what a
   screen reader reads, so the state is never carried by colour alone. */
.segwrap{position:sticky;top:0;z-index:4;margin-top:40px;padding:18px 0;
  background:rgba(7,10,11,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair)}
.seg{display:flex;justify-content:center}
.seg .inner{display:inline-flex;border:1px solid var(--hair-2);padding:4px;gap:4px}
.seg a{padding:13px 26px;display:flex;align-items:center;gap:11px;
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-3);transition:background .18s,color .18s}
.seg a:hover{color:var(--bone)}
.seg a .c{font-size:9.5px;color:var(--bone-3);opacity:.8}
.seg a[aria-current]{background:var(--bone);color:#0B1211}
.seg a[aria-current] .c{color:#0B1211;opacity:.55}

/* ── section head ── */
.secintro{padding-block:52px 0}
.secintro h2{margin:0;font:400 clamp(26px,3.2vw,38px)/1.06 var(--disp);
  letter-spacing:.03em;text-transform:uppercase}
.secintro .blurb{max-width:68ch;margin:16px 0 0;font-size:18px;color:var(--bone-2)}
.secintro p.more{max-width:72ch;margin:18px 0 0;color:var(--bone-2)}

/* ── the rulebook's group filter ──
   Chips, because they narrow what is already on the page rather than
   navigating somewhere. ⛔ The row ships `hidden` and script removes the
   attribute: a filter that cannot filter is worse than no filter, so a reader
   without script sees the whole book and no dead control. */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 0;padding-bottom:30px;
  border-bottom:1px solid var(--hair)}
.chips button{appearance:none;cursor:pointer;background:transparent;
  border:1px solid var(--hair);padding:10px 17px;
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-3);transition:border-color .18s,color .18s}
.chips button:hover{color:var(--bone-2);border-color:var(--hair-2)}
.chips button[aria-pressed="true"]{color:var(--bone);border-color:var(--rust)}

.body{padding-bottom:20px}

/* ── rules ──
   A rule is a number, a name and a sentence. The number keeps its own column
   because rules are quoted by number in a ticket, and somebody looking for
   rule 14 should not have to read the other twenty-five to find it. */
.grp{margin-top:44px}
.grp:first-of-type{margin-top:26px}
.grp h3{margin:0 0 6px;font:500 11px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--rust)}
.grp .gl{margin:0 0 4px;font-size:16px;color:var(--bone-3);max-width:68ch}
ol.rules{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--hair)}
ol.rules li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 22px;
  padding:22px 0;border-bottom:1px solid var(--hair)}
ol.rules .n{font:500 11px/1.7 var(--mono);letter-spacing:.14em;color:var(--bone-3);
  font-variant-numeric:tabular-nums}
/* The gravest rules are marked once, in the margin, rather than by making the
   rule itself louder. A rulebook where four entries shout reads as four rules
   and twenty-two suggestions. */
ol.rules li.hard .n{color:var(--rust)}
ol.rules li.hard .n::after{content:"Zero tolerance";display:block;margin-top:7px;
  font-size:9px;letter-spacing:.12em;line-height:1.4}
ol.rules h4{margin:0;font:400 21px/1.25 var(--disp);letter-spacing:.035em;
  text-transform:uppercase;color:var(--bone)}
ol.rules p{margin:9px 0 0;font-size:16.5px;color:var(--bone-2);max-width:74ch}

/* ── articles ──
   Deliberately not the rulebook's treatment. The two bind different people and
   a reader meets them minutes apart; set identically they read as one list of
   thirty-eight things you can be removed for. */
.preamble{margin:28px 0 0;padding-left:22px;border-left:2px solid var(--hair-2);
  max-width:66ch;font-size:18px;line-height:1.75;color:var(--bone-2);font-style:italic}
/* The section intro can end in a .note box, and 28px was not enough air between
   a filled box and a ruled one: the two read as a single confused block rather
   than an administrative statement followed by the preamble proper. */
.body > .preamble:first-child{margin-top:46px}
.arts{margin-top:34px}
.art{padding:26px 0;border-bottom:1px solid var(--hair)}
.art:first-child{border-top:1px solid var(--hair)}
.art .num{font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--rust)}
.art h4{margin:12px 0 0;font:400 24px/1.2 var(--disp);letter-spacing:.03em;
  text-transform:uppercase}
.art p{margin:10px 0 0;font-size:16.5px;color:var(--bone-2);max-width:70ch}

/* ── the book of laws ──
   #lawbook is a bare host: lawbook.js writes the tabs, the search and the
   tables into it and injects their own styles. Nothing here restyles them.
   Three copies of one table drift faster than two, and this page has the least
   reason of the three to hold an opinion about how a penal code is set. */
.legend{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px 30px;
  font:500 10.5px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-3)}
.legend b{color:var(--bone-2);font-weight:500}
.lawbook{margin-top:26px;min-height:120px;overflow-x:auto}
.lb-fail{margin:26px 0 0;padding:22px 24px;background:var(--fog-2);
  border-left:2px solid var(--rust);max-width:72ch;font-size:16px;color:var(--bone-2)}

/* ── CreekiPedia's category strip ──
   A wiki has more sections than a segmented control can hold, so this jumps
   rather than switching: the whole page stays loaded and the strip scrolls
   sideways. It sticks for the same reason the control does, because the reason
   to look at it arrives halfway down. */
.jump{position:sticky;top:0;z-index:4;display:flex;gap:0;overflow-x:auto;
  scrollbar-width:none;background:rgba(7,10,11,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin-top:40px}
.jump::-webkit-scrollbar{display:none}
.jump .wrap{display:flex;gap:0}
.jump a{padding:17px 22px;white-space:nowrap;font:500 10px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);
  border-right:1px solid var(--hair);transition:color .18s}
.jump a:first-child{padding-left:0}
.jump a:last-child{border-right:0}
.jump a:hover{color:var(--bone)}
.jump a[aria-current]{color:var(--bone)}
.jump a b{color:var(--rust);font-weight:500;margin-left:9px}
/* The strip is sticky, so an anchor landing flush under it would put the
   heading behind it. */
.termsec{scroll-margin-top:78px}

/* ── the glossary ──
   A term and what it means, set as a pair, because that is what a reader is
   doing here: they heard a word in a scene and want the sentence that explains
   it. The term column is fixed so the definitions share one left edge and the
   list can be scanned down rather than read. */
.termsec{margin-top:52px}
.termsec:first-of-type{margin-top:26px}
.termsec > h3{margin:0 0 4px;font:500 11px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--rust)}
.termsec > .gl{margin:0;font-size:16px;color:var(--bone-3);max-width:68ch}
.terms{margin:20px 0 0;border-top:1px solid var(--hair)}
.term{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:0 36px;
  padding:20px 0;border-bottom:1px solid var(--hair)}
.term dt{margin:0;font:500 13px/1.5 var(--mono);letter-spacing:.06em;color:var(--bone)}
.term dd{margin:0;font-size:16.5px;color:var(--bone-2);max-width:70ch}
/* The severity sits under the term, not beside the definition: it belongs to
   the word, and a reader scanning the left column should see which of these
   end a session and which end an account. */
.term .sev{display:inline-block;margin-top:9px;padding:3px 7px;
  font:500 9px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor}
.term .sev.ban{color:var(--rust)}
.term .sev.strike{color:var(--bone-3)}

/* ── enforcement ──
   The restriction ladder. Levels, not rules: they are what happens to you, so
   they are numbered separately and never share the rulebook's numbering. */
.levels{margin-top:26px;display:grid;gap:0;border-top:1px solid var(--hair)}
.level{padding:26px 0;border-bottom:1px solid var(--hair)}
.level .lv{font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--rust)}
.level h4{margin:12px 0 0;font:400 22px/1.2 var(--disp);letter-spacing:.03em;
  text-transform:uppercase}
.level ul{margin:12px 0 0;padding-left:20px;max-width:72ch}
.level li{margin:7px 0;font-size:16.5px;color:var(--bone-2)}

/* The punishment schedule. A real table: three offences is three columns, and
   flattening it to prose would lose the escalation, which is the only thing
   the schedule is actually saying. */
.ptable{width:100%;border-collapse:collapse;margin-top:26px;
  font-variant-numeric:tabular-nums}
.ptable th{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-3);text-align:left;padding:14px 14px 10px 0;white-space:nowrap;
  border-bottom:1px solid var(--hair-2)}
.ptable td{padding:14px 14px 14px 0;vertical-align:top;
  border-bottom:1px solid var(--hair);
  font:400 13.5px/1.5 var(--mono);color:var(--bone-2)}
.ptable td.rule{font:300 16.5px/1.45 var(--serif);color:var(--bone);
  padding-right:28px}
/* A permanent ban has no escalation to show, so the row says it once across
   the three columns rather than repeating it three times. */
.ptable td.perm{color:var(--rust);text-align:center;font-weight:500}
.ptable tr:last-child td{border-bottom:0}
.pwrap{overflow-x:auto;margin-top:26px}
.pwrap .ptable{margin-top:0;min-width:640px}

.note{margin-top:30px;padding:22px 24px;background:var(--fog-2);
  border-left:2px solid var(--rust);max-width:72ch;font-size:16px;color:var(--bone-2)}
.note b{color:var(--bone);font-weight:500}
.cta{display:inline-block;margin-top:28px;padding:14px 24px;border:1px solid var(--hair);
  font:500 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);transition:background .2s,color .2s}
.cta:hover{background:var(--bone);color:#0B1211}
/* A disclaimer is not a rule and must not read as one. Smaller, dimmer, and
   set apart from the call to action above it. */
.disclaimer{margin:44px 0 0;max-width:72ch;font-size:15px;color:var(--bone-3)}

footer{margin-top:80px;padding:44px 0;border-top:1px solid var(--hair)}
footer .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;
  font:500 10.5px/1.8 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-3)}
footer a:hover{color:var(--bone)}

@media (max-width:760px){
  /* The control goes full width and stacks. Three positions scrolled sideways
     stop reading as one control, and at this width there is room for a column. */
  .seg .inner{width:100%;flex-direction:column}
  .seg a{justify-content:space-between}
  .segwrap{margin-top:32px;padding:14px 0}
}
@media (max-width:640px){
  /* The rule number moves above its rule. At 64px the column took a quarter of
     the measure and the sentences broke every four words. */
  ol.rules li{grid-template-columns:1fr;gap:10px}
  ol.rules li.hard .n::after{display:inline;margin-left:10px}
}
@media (max-width:560px){
  .brand .o{display:none}
  .back .long{display:none}
  .back .short{display:inline}
}