/* 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;
  --sans:"Inter",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(--sans)}
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 {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100;
  padding: 8px 12px 8px 32px; border-radius: 100px;
  background: rgba(7, 10, 11, 0.8); backdrop-filter: blur(24px); border: 1px solid var(--hair-2);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
  width: max-content; max-width: calc(100% - 48px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
header.site.hidden {
  transform: translate(-50%, -150%) scale(0.95); opacity: 0;
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.brand{margin-right:auto;display:flex;align-items:baseline;gap:12px;min-width:0}
.brand .n{font:400 18px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap}
.brand .o{font:400 18px/1 var(--disp);letter-spacing:.06em;color:var(--rust);
  text-transform:uppercase;white-space:nowrap;margin-left:8px}

.desknav { display: flex; gap: 40px; align-items: center; }
.desknav a {
  font: 500 12px/1 var(--mono); display: inline-block; position: relative;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-2);
  transition: all 0.3s ease;
}
.desknav a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: var(--rust); transition: width 0.3s ease;
}
.desknav a:hover { color: var(--bone); transform: translateY(-3px); }
.desknav a:hover::after { width: 100%; }
.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}

.mast{
  padding: 100px 40px 80px; 
  margin-top: 32px;
  position: relative; 
  border-radius: 32px;
  overflow: hidden;
  background: url('../orange_moon.jpg') center/cover no-repeat;
  border-bottom: 4px solid var(--rust);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.mast::before{
  content: ""; position: absolute; inset: 0; 
  background: linear-gradient(135deg, rgba(7,10,11,0.9) 0%, rgba(184,91,60,0.4) 100%);
}
.mast .row{
  position: relative; z-index: 2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  flex-wrap:wrap
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--bone); color: var(--fog-0);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  border-radius: 100px;
}
.btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.btn.primary { background: var(--rust); color: var(--bone); }
.btn.primary:hover { background: #cf6744; }
.btn.outline { background: transparent; border: 1px solid var(--rust); color: var(--rust); }
.btn.outline:hover { background: var(--rust); color: var(--bone); }
.btn.discord-btn { border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 10px 24px; font-size: 10px; border-radius: 100px; margin-top: 0; display: inline-flex; align-items: center; }
.btn.discord-btn:hover { border-color: rgba(255, 255, 255, 0.5); }
h1{margin:14px 0 0;font:400 clamp(40px,6.4vw,78px)/.96 var(--disp);letter-spacing:.02em;
  text-transform:uppercase; color: var(--bone);}
.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(--rust)}

/* ── 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:76px;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);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 16px);
  mask-image: linear-gradient(to bottom, transparent 0, black 16px);
  transition: top 0.6s cubic-bezier(0.22, 1, 0.36, 1);}
header.site.hidden ~ .segwrap { 
  top: 0; 
  -webkit-mask-image: none;
  mask-image: none;
}
.seg{display:flex;justify-content:center}
.seg .inner{display:inline-flex;border:1px solid var(--hair-2);padding:6px;gap:6px; border-radius: 100px; background: rgba(255,255,255,0.02);}
.seg a{padding:13px 22px;display:flex;align-items:center;gap:11px;white-space:nowrap;
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-3);transition:background .3s,color .3s, transform .2s ease, box-shadow .3s ease; border-radius: 100px;}
.seg a:hover{color:var(--bone); transform: translateY(-2px);}
.seg a .c{font-size:9.5px;color:var(--bone-3);opacity:.8}
.seg a[aria-current]{background:var(--bone);color:#0B1211; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3);}
.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)}
/* Emphasis in an intro paragraph, same treatment as .note b: the body weight
   is 300, so weight alone barely reads. The colour lift is what carries it. */
.secintro p.more b{color:var(--bone);font-weight:500}
/* Same link treatment as a Creekipedia entry. */
.secintro p a{color:var(--bone);border-bottom:1px solid var(--rust);padding-bottom:1px}
.secintro p a:hover{border-bottom-color:var(--bone)}

/* ── 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:rgba(255,255,255,0.03);
  border:1px solid var(--hair);padding:12px 24px; border-radius: 100px;
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-3);transition:all .3s ease;}
.chips button:hover{color:var(--bone-2);border-color:var(--hair-2); background: rgba(255,255,255,0.06); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2);}
.chips button[aria-pressed="true"]{color:var(--bone);border-color:var(--rust); background: rgba(184,91,60,0.1); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(184,91,60,0.2);}

.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:32px 24px;border-bottom:1px solid var(--hair); transition: background .3s ease, border-radius .3s ease, box-shadow .3s ease, transform .3s ease;}
ol.rules li:hover{background: rgba(255,255,255,0.02); border-radius: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); transform: translateY(-4px); border-bottom-color: transparent;}
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; display: flex; flex-direction: column; gap: 16px;}
.art{padding:32px 24px;border:1px solid var(--hair); border-radius: 24px; transition: background .3s ease, box-shadow .3s ease, transform .3s ease;}
.art:hover{background: rgba(255,255,255,0.02); box-shadow: 0 8px 32px rgba(0,0,0,0.2); transform: translateY(-4px); border-color: var(--rust);}
.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}
/* Inline links inside article prose. The page-wide reset (a{color:inherit;
   text-decoration:none}) is right for nav and wrong inside a paragraph, where
   it leaves a link indistinguishable from the sentence around it.
   ⛔ Bone with a RUST RULE under it, not rust text: rust on the page background
   measures 4.35:1, under AA for 16.5px body. Bone measures 11.76:1. */
.art p a{color:var(--bone);border-bottom:1px solid var(--rust);padding-bottom:1px}
.art p a:hover{border-bottom-color:var(--bone)}

/* ── 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:0;min-height:120px;overflow-x:auto}
/* The one exception: the host owns its top edge, so the search line sits
   under the intro at the intro's own paragraph rhythm. */
.lawbook > .lb-lede:first-child{padding-top:0;margin-top:18px}
.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)}

/* ── the regulations ──
   Cards, one per regulation, grouped in chapters. Each card's "Enforced under"
   line ships empty and hidden; rules.js fills it from lawbook.js's REFS and
   the live catalogue, so the offence-to-regulation link is written once. */
.rg-toc{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.rg-toc a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid var(--hair-2);border-radius:999px;font:500 10.5px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.rg-toc a b{color:var(--rust);font-weight:500}
.rg-toc a:hover{border-color:var(--rust);color:var(--bone)}
.rg-ch{margin:46px 0 0;scroll-margin-top:120px}
.rg-ch > h3{display:flex;align-items:baseline;gap:14px;margin:0 0 4px;
  font:400 26px/1.1 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--bone)}
.rg-ch > h3 span{font:500 11px/1 var(--mono);letter-spacing:.18em;color:var(--rust)}
.rg-ch > p{margin:6px 0 0;max-width:72ch;color:var(--bone-3);font-size:15px}
.rg{margin:22px 0 0;padding:22px 24px 20px;border:1px solid var(--hair);border-radius:14px;
  background:rgba(239,231,217,.015);scroll-margin-top:120px}
.rg:target{border-color:var(--rust);box-shadow:0 0 0 1px var(--rust) inset}
.rg h4{display:flex;align-items:baseline;gap:12px;margin:0;font:600 15px/1.3 var(--sans,Inter,sans-serif);
  color:var(--bone)}
.rg h4 code{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--rust);background:none}
.rg > p{margin:8px 0 0;max-width:76ch;font:300 15px/1.6 var(--serif,Georgia,serif);color:var(--bone-2)}
.rg > p b{color:var(--bone);font-weight:500}
.rg > p.rg-list{margin-top:12px}
.rg table{width:100%;border-collapse:collapse;margin:16px 0 0}
.rg th{text-align:left;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-3);opacity:.75;padding:10px 14px 9px 0;border-bottom:1px solid var(--hair-2)}
.rg td{padding:12px 14px 12px 0;border-bottom:1px solid var(--hair);
  font:300 15px/1.45 var(--serif,Georgia,serif);color:var(--bone-2);vertical-align:top}
.rg td:first-child{color:var(--bone)}
.rg tbody tr:last-child td{border-bottom:0}
.rg td.m{font:400 12.5px/1.5 var(--mono);color:var(--bone-2);white-space:nowrap}
.rg .tag{display:inline-block;margin:0 6px 6px 0;padding:4px 9px;border:1px solid var(--hair-2);
  border-radius:6px;font:500 11.5px/1.4 var(--mono);color:var(--bone)}
.rg .tag.no{color:var(--bone-3);border-style:dashed;text-decoration:line-through}
.rg .enf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;padding:14px 0 0;
  border-top:1px solid var(--hair)}
.rg .enf[hidden]{display:none}
.rg .enf > span{font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--rust);margin-right:6px}
.rg .enf a{display:inline-flex;gap:8px;align-items:center;padding:6px 11px;border-radius:999px;
  background:var(--fog-2,#141a1b);font:400 13px/1 var(--sans,Inter,sans-serif);color:var(--bone)}
.rg .enf a:hover{box-shadow:0 0 0 1px var(--rust) inset}
.rg .enf a i{font:500 10.5px/1 var(--mono);font-style:normal;color:var(--gold,#D8B34A)}

/* ── 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:76px;z-index:4;display:flex;overflow-x:auto;
  scrollbar-width:none;background:rgba(7,10,11,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair); padding: 16px 0;
  margin-top:20px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 16px);
  mask-image: linear-gradient(to bottom, transparent 0, black 16px);
  transition: top 0.6s cubic-bezier(0.22, 1, 0.36, 1);}
header.site.hidden ~ .jump { 
  top: 0; 
  -webkit-mask-image: none;
  mask-image: none;
}
.jump::-webkit-scrollbar{display:none}
.jump .wrap{display:flex;gap:8px; align-items: center; justify-content: center;
  justify-content: safe center;}
.jump a{padding:12px 24px;white-space:nowrap;font:500 10.5px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);
  transition:all .3s ease; border-radius: 100px; background: rgba(255,255,255,0.03); border: 1px solid var(--hair);}
.jump a:hover{color:var(--bone); transform: translateY(-2px); background: rgba(255,255,255,0.06); box-shadow: 0 4px 12px rgba(0,0,0,0.2);}
.jump a[aria-current]{color:var(--bone); background: var(--rust); border-color: var(--rust); box-shadow: 0 8px 24px rgba(184,91,60,0.3); transform: translateY(-2px);}
.jump a[aria-current] b{color:#fff;}
.jump a b{color:var(--rust);font-weight:600;margin-left:9px}
/* The strip is sticky, so an anchor landing flush under it would put the
   heading behind it. */
.termsec{scroll-margin-top:90px}

/* ── 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; display: flex; flex-direction: column; gap: 16px; border-top: none;}
.term{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:0 36px;
  padding:32px 24px;border:1px solid var(--hair); border-radius: 24px; transition: background .3s ease, transform .3s ease, box-shadow .3s ease;}
.term:hover{background: rgba(255,255,255,0.02); box-shadow: 0 8px 32px rgba(0,0,0,0.2); transform: translateY(-4px); border-color: var(--rust);}
.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:32px 32px;background:var(--fog-2);
  border-left:4px solid var(--rust);max-width:72ch;font-size:16px;color:var(--bone-2); border-radius: 0 24px 24px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.15);}
.note b{color:var(--bone);font-weight:500}
.cta{display:inline-block;margin-top:28px;padding:16px 32px;border:1px solid var(--hair);
  font:500 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);transition:all .3s ease; border-radius: 100px; cursor: pointer;}
.cta:hover{background:var(--bone);color:#0B1211; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,255,255,0.2);}
/* 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)}

/* Six positions: between the phone stack and a wide screen, tighten rather
   than wrap a label onto two lines. */
@media (max-width:1180px){
  .seg a{padding:12px 13px;letter-spacing:.1em;gap:8px}
}

@media (max-width:760px){
  /* Regulation cards: less padding, cells wrap, and a table that still
     cannot fit scrolls inside its card instead of widening the page. */
  .rg{padding:18px 16px 16px}
  .rg td.m{white-space:normal}
  .rg table{display:block;overflow-x:auto}
  /* 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}
}