:root {
  color-scheme: light dark;
  --bg: #fcfcfa;
  --fg: #1c1c1a;
  --muted: #5d5d58;
  --rule: #e0ded6;
  --edge: #86847c;
  --panel: #ffffff;
  --accent: #7a4b1e;
  --mark: #f1ede3;
  --ins: #e3efe4;
  --del: #f6e2e2;
  --warn: #8a3d10;
  --display: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --step-xs: .72rem;
  --step-sm: .85rem;
  --step-0: 1rem;
  --step-1: 1.1rem;
  --step-2: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --step-3: clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem);
  --measure: 68ch;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --fg: #e6e5e1;
    --muted: #a0a09a;
    --rule: #33353a;
    --edge: #7c7e84;
    --panel: #1e2024;
    --accent: #d9a066;
    --mark: #2a2c31;
    --ins: #26402c;
    --del: #4a2626;
    --warn: #e0a35a;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 0 var(--space-5);
  background: var(--bg);
  color: var(--fg);
  font: var(--step-0)/1.6 var(--sans);
}
main { max-width: 62rem; margin: 0 auto; padding: var(--space-4) 1.25rem 0; }
main > p { max-width: var(--measure); }
h1, h2, h3, .display { font-family: var(--display); font-weight: 600; }
h1 { font-size: var(--step-3); line-height: 1.15; margin: 0 0 var(--space-1);
     letter-spacing: -.01em; }
h2 { font-size: var(--step-2); margin: var(--space-5) 0 var(--space-2); padding-bottom: .3rem;
     border-bottom: 1px solid var(--rule); }
h3 { font-size: var(--step-1); margin: 0 0 var(--space-1); }
p { margin: .6rem 0; }
a { color: var(--accent); text-underline-offset: .16em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code { font-family: var(--mono); font-size: .88em; }
/* An identifier a reader checks rather than reads: present on every page, one step down. */
code.id { color: var(--muted); }
.lede { max-width: var(--measure); font-size: 1.05rem; }
.muted { color: var(--muted); }
.small { font-size: var(--step-sm); }
/* A proper noun carrying a hyphen, kept off the line break that would read as two words. */
.nowrap { white-space: nowrap; }
.scroll { overflow-x: auto; }
.facts { margin: var(--space-1) 0 var(--space-3); font-size: var(--step-sm); color: var(--muted); }
.ident { font-size: var(--step-sm); color: var(--muted); }
.lbl { margin: var(--space-3) 0 var(--space-1); font-size: .75rem; letter-spacing: .06em;
       text-transform: uppercase; color: var(--muted); }
.quoted { font-style: italic; color: var(--muted); }
.none { font-style: italic; color: var(--muted); }
/* The pill and the tag are the two components whose whole content is a boundary and a word,
   so their border is `--edge` and not the hairline the rest of the sheet draws with. */
.pill {
  display: inline-block;
  padding: .05rem .45rem;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: var(--mark);
  font-size: var(--step-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pill.ins { background: var(--ins); }
.pill.disp { background: transparent; border-color: var(--warn); color: var(--warn); }
.tag { display: inline-block; padding: .05rem .45rem; border: 1px solid var(--edge);
       border-radius: 3px; background: var(--mark); font-size: var(--step-xs);
       letter-spacing: .06em; }
/* Off-screen until it takes focus, then placed over the header rather than moving it, so
   arriving at the page shifts nothing. It is the first focusable element on every page. */
.skip {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 2;
  padding: var(--space-2) var(--space-3);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: var(--step-sm);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
/* Read aloud and never drawn: the search control's result count lives here. Clipped rather
   than hidden, because `display: none` and `visibility: hidden` take it out of the
   accessibility tree, which is the one place it exists to be. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
header.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  max-width: 62rem;
  margin: 0 auto;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.wordmark { font-family: var(--display); font-size: 1.2rem; letter-spacing: -.01em;
            color: var(--fg); text-decoration: none; }
.wordmark:hover { color: var(--accent); }
header.bar nav { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: .9rem; }
header.bar nav a { text-decoration: none; }
header.bar nav a:hover { text-decoration: underline; }
/* It does not grow: a search box that takes half of a wide header reads as the page's main
   business, and it is a shortcut past navigation that already works. */
#search { position: relative; flex: 0 1 20rem; min-width: 12rem; margin-left: auto; }
#search input {
  width: 100%;
  padding: .35rem .6rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-size: .9rem;
}
#search .results {
  position: absolute;
  z-index: 10;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
#search .results li { display: flex; align-items: baseline; gap: var(--space-2); }
#search .results li + li { border-top: 1px solid var(--rule); }
#search .results a { flex: 1 1 auto; padding: .35rem .6rem; font-size: .9rem;
                     text-decoration: none; }
/* One declaration for three states, so the row the arrow keys highlight and the row the
   pointer is over cannot come to look different from each other. */
#search .results a:hover, #search .results a:focus,
#search .results li.active a { background: var(--mark); }
/* What kind of thing a result is, said once at the end of the row rather than under it. */
.kind { padding-right: .6rem; font-size: var(--step-xs); letter-spacing: .06em;
        text-transform: uppercase; color: var(--muted); }
/* Narrow enough that the header wraps: the box takes its own row rather than the sliver
   left beside the navigation. */
@media (max-width: 40rem) {
  #search { flex-basis: 100%; margin-left: 0; }
}
.disclaimer {
  margin: var(--space-3) 0 0;
  padding: .8rem 1rem;
  max-width: var(--measure);
  border-left: 3px solid var(--accent);
  background: var(--mark);
  font-size: .92rem;
}
footer {
  max-width: 62rem;
  margin: var(--space-5) auto 0;
  padding: var(--space-3) 1.25rem 0;
  border-top: 1px solid var(--rule);
  font-size: var(--step-sm);
  color: var(--muted);
}
footer p { max-width: var(--measure); }
.hero { padding: var(--space-5) 0 var(--space-3); text-align: center; }
.hero h1 { margin-bottom: var(--space-3); }
.hero p { max-width: 42rem; margin: .7rem auto; }
.strip {
  margin: 0 auto var(--space-5);
  padding: .7rem 1rem;
  max-width: var(--measure);
  border-left: 3px solid var(--accent);
  background: var(--mark);
  font-size: .92rem;
}
.cardrow { padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.cardrow:last-of-type { border-bottom: 1px solid var(--rule); }
.cardrow h3 { margin: 0; }
.cardrow h3 a { text-decoration: none; }
.cardrow h3 a:hover { text-decoration: underline; }
.cardrow .facts { margin: var(--space-1) 0 0; }
.cardrow .ident { display: block; margin: var(--space-1) 0 0; }
.cardrow .disp { padding: 0 .35rem; border: 1px solid var(--warn); border-radius: 3px;
                 color: var(--warn); }
.roster { list-style: none; margin: 0; padding: 0; }
.roster li { padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
.roster li:last-child { border-bottom: 1px solid var(--rule); }
.roster > li > a { font-family: var(--display); font-size: var(--step-1);
                   text-decoration: none; }
.roster > li > a:hover { text-decoration: underline; }
.roster .ident { margin-left: var(--space-1); }
.roster .sub { display: block; max-width: var(--measure); margin-top: var(--space-1);
               font-size: var(--step-sm); color: var(--muted); }
td.result { white-space: nowrap; }
td.meaning { color: var(--muted); }
.caveats { margin: .75rem 0 0; padding-left: 1.1rem; font-size: .92rem; color: var(--muted); }
.caveats li { margin: .3rem 0; }
.loop { list-style: none; display: grid; gap: .75rem; padding: 0; margin: var(--space-3) 0;
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.loop li { background: var(--panel); border: 1px solid var(--rule); border-radius: 6px;
           padding: .7rem .8rem; font-size: var(--step-sm); }
.loop b { display: block; font-size: .78rem; letter-spacing: .06em; color: var(--accent); }
.official {
  margin: var(--space-2) 0;
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--muted);
}
.links { margin: var(--space-1) 0 var(--space-4); font-size: var(--step-sm); }
/* The neighbours line closes the header, so its gap above is the links line's own. */
.related { margin: 0 0 var(--space-4); font-size: var(--step-sm); color: var(--muted); }
.layout { display: block; }
/* The index is bounded at every width. An act with hundreds of provisions renders hundreds
   of links, and `<details open>` opens them all: unbounded, the CRR index stands 20510px tall
   on a 390px screen and the timeline it sits above starts below all of it. */
.sidebar {
  margin: var(--space-4) 0;
  padding: .2rem 1rem .8rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: var(--step-sm);
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar summary { padding: var(--space-2) 0; font-family: var(--display);
                   font-size: var(--step-0); }
.sidebar h2 {
  margin: var(--space-3) 0 .3rem;
  padding: 0;
  border: 0;
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1);
              padding: .15rem 0; }
@media (min-width: 60rem) {
  .layout {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
  .sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
  /* The dates list follows the timeline down the page, so it belongs in the timeline's column
     rather than under the index: auto-placement would otherwise start it a row lower in the
     16rem one, where a row of two links and a date does not fit. */
  .layout > .dates-named { grid-column: 2; }
}
/* The rail and its nodes: an act's history is a sequence, and the heading of each entry on
   it is a date. Drawn in the sheet so the markup stays one article per event. */
.timeline { min-width: 0; }
.layout > .timeline, .amended > .timeline { padding-left: var(--space-4);
                                            border-left: 1px solid var(--rule); }
.timeline .event { position: relative; padding-bottom: var(--space-5); }
.timeline .event::before {
  content: "";
  position: absolute;
  top: .8em;
  left: calc(-1 * var(--space-4) - 3px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.timeline .event:last-child { padding-bottom: 0; }
.event { min-width: 0; }
.event > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--step-2);
}
.event > p { max-width: var(--measure); }
.event > .ident { margin: var(--space-1) 0 0; }
.chg {
  margin: 0 calc(-1 * var(--space-3));
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--space-3);
}
.chg:target { background: var(--mark); }
.chg h3 { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
          gap: var(--space-1) var(--space-2); }
.chg .loc { font-weight: 600; }
/* The coordinate in a change heading leads to that provision's own history. It keeps the
   weight and the colour it had as a span: it is still the heading of the block, not an
   invitation to leave it. */
a.loc { color: inherit; font-weight: 600; }
.chg .ttl { font-family: var(--sans); font-weight: 400; font-size: var(--step-sm); }
.chg > p { max-width: var(--measure); }
.chg .applies { margin: var(--space-1) 0 var(--space-2); }
/* One step of a provision's history. It is a change block, so it inherits the hairline, the
   heading baseline and the target tint; what it does not want is the block's bleed into the
   gutters, the steps here being a list down the page rather than rows under one event. */
.step { margin: var(--space-4) 0; }
.step h2 { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline;
           margin: 0; padding: 0; border: 0; font-size: var(--step-1); }
/* How much of the provision moved, in characters, beside the kind of change it was. The mono
   face because it is a figure standing next to a label, and never wrapped: `+1,204` alone at
   the end of a row would read as the whole count. */
.mag { font-family: var(--mono); font-size: var(--step-xs); color: var(--muted);
       white-space: nowrap; }
/* A map of the page, not a second copy of it: one wrapping row, so forty-five provisions
   cost a few lines of height and a reader can see the whole event at once. */
.touched { margin: var(--space-3) 0 var(--space-4); padding: var(--space-2) 0;
           border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.touched p { margin: 0 0 var(--space-1); }
.touched ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
              list-style: none; margin: 0; padding: 0; font-size: var(--step-sm); }
.touched li { display: flex; align-items: baseline; gap: var(--space-1); }
/* The decade of characters a change moved, as weight on its link, so the index reads as a map
   of where the text is rather than only of where a change is. Weight and nothing else: colour
   is spent on diffs, disputes and links, and a heavier link is still a link. The classes are
   decades and claim nothing about importance; the count beside each one is the fact. */
.touched .mag-1 a { font-weight: 400; }
.touched .mag-2 a { font-weight: 500; }
.touched .mag-3 a { font-weight: 600; }
.touched .mag-4 a { font-weight: 700; }
/* The same grid the act page draws, with the event's index as the left column, at the one
   width the act page becomes two columns. The `.sidebar` cap above is deliberately not reused:
   that one bounds a `<details>` of hundreds of links at every width, where this is a row of
   forty coordinates that costs a few lines while it is a row and needs the cap only once it
   stands as a column. Below the query nothing here applies and the row is untouched. */
@media (min-width: 60rem) {
  .event-layout .touched {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    margin: 0;
    padding: 0;
    border: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .event-layout .touched ol { display: block; }
  .event-layout .touched li { padding: .15rem 0; }
  .changes { min-width: 0; }
}
/* One change's own address, at the end of the heading that names it. Set in the muted colour
   because it is furniture beside a coordinate that is not, and pushed to the end of the row by
   the heading's own flex. */
.permalink { margin-left: auto; color: var(--muted); text-decoration: none; }
.permalink:hover, .permalink:focus { color: var(--accent); }
/* The citations of one change, once, under its sentences. The lead word is muted and the
   anchors keep the sheet's link colour, so the row reads as links with a label rather than as
   a sentence. */
.cites { font-size: var(--step-sm); color: var(--muted); }
/* Clock 2's answer for one change, on every block. A date is lifted out of the muted colour
   and set in tabular figures, so it scans as the figure it is; the two stated non-answers keep
   the muted colour, and recede without the line ever going silent about them. No hue is spent
   on the distinction: colour here goes to diffs, disputes and links. */
.applies { font-size: var(--step-sm); color: var(--muted); }
.applies .date { color: var(--fg); font-variant-numeric: tabular-nums; }
/* The dates a change moved, directly under the line that says whether one of them governs the
   provision. Set like the applies line, because the two are facts of the same rank about one
   change, and in tabular figures so a column of ISO dates reads as a column. */
.dates { margin: var(--space-1) 0 var(--space-2); font-size: var(--step-sm);
         color: var(--muted); font-variant-numeric: tabular-nums; }
/* Every date one act's text names, under its timeline. A list rather than a table: a row is a
   date and the two places it can be checked, and columns would promise a structure the corpus
   never wrote. The date leads each row in the mono face, so the dates scan as a column while
   the words around them stay prose. */
.dates-named { margin: var(--space-5) 0 0; }
.dates-named ul { list-style: none; margin: 0; padding: 0; font-size: var(--step-sm); }
.dates-named li { padding: .15rem 0; }
.dates-named .on { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* One watched act on an amending instrument's page: its own heading, then the rail of events
   that instrument produced there. The heading carries the act, so it is set as a page heading
   rather than as a card's. */
.amended { margin: var(--space-5) 0 0; }
.amended > h2 a { text-decoration: none; }
.amended > h2 a:hover { text-decoration: underline; }
/* The events either side of this one, at the foot of an event page. Each link carries the date
   it goes to, so the row is read rather than decoded; they sit at the two ends of the line so
   the direction is visible before the words are. */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
         margin: var(--space-5) 0 0; padding-top: var(--space-3);
         border-top: 1px solid var(--rule); font-size: var(--step-sm); }
/* The instrument that made the event, under the version pair it produced. Set small, like the
   other fact lines, and the declared short name italic beside the number so the label and the
   identifier read as two different kinds of name. */
.amending { font-size: var(--step-sm); }
.amending .ttl { font-style: italic; }
.disputed { font-size: var(--step-sm); color: var(--warn); }
details { margin: var(--space-3) 0 0; }
summary { cursor: pointer; font-size: var(--step-sm); color: var(--accent); }
summary:hover { text-decoration: underline; }
.diff {
  margin: 0;
  padding: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--display);
  line-height: 1.7;
  /* The stored text breaks at every block boundary the source document opened, and the
     unified view emits those breaks. Without this they would collapse and a provision would
     read as one wall of prose. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Both tints carry foreground text, so what is readable never depends on a coloured
   foreground surviving a theme swap, and both marks also say which they are without their
   tint: an insertion is underlined and a deletion struck through, on screen as on paper. A
   diff block holds no links, so an underline inside one can mean only the one thing. */
.diff ins, .diff del { padding: .05rem .2rem; border-radius: 2px; color: var(--fg); }
.diff ins { background: var(--ins); text-decoration: underline;
            text-decoration-thickness: from-font; }
.diff del { background: var(--del); text-decoration: line-through; }
.elided {
  display: inline-block;
  padding: 0 .4rem;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: var(--step-sm);
  font-style: italic;
  color: var(--muted);
}
.verbatim {
  margin: 0;
  padding: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--display);
  font-size: .95rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.verbatim.ins { background: var(--ins); }
.verbatim.del { background: var(--del); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 40rem; }
th, td { text-align: left; vertical-align: top; padding: .5rem .6rem;
         border-bottom: 1px solid var(--rule); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
@media print {
  #search, header.bar nav, .skip { display: none; }
  body { padding: 0; }
  main, header.bar, footer { max-width: none; }
  /* A scroll box cannot be scrolled on paper, so both indexes print whole. */
  .sidebar { max-height: none; overflow: visible; }
  .event-layout .touched { position: static; max-height: none; overflow: visible; }
  /* Navigation, like the header's: a permalink and a way back to the top of a sheet of paper
     are both instructions a printed page cannot carry out. */
  .permalink, .backtop { display: none; }
  .strip, .disclaimer, .sidebar, .diff, .verbatim, .loop li, .pill, .tag
    { background: transparent; }
  /* Named again because a two-class or pseudo-class selector outranks a one-class one
     whatever the order: what these three tints say is already written beside them, in the
     label above a whole inserted or deleted provision, in the word inside the pill, and in
     the fragment that brought a reader to one block. */
  .verbatim.ins, .verbatim.del, .pill.ins, .chg:target { background: transparent; }
  /* The tints inside a diff are the only ones that say something no word beside them does,
     so they stay, and nothing is redeclared for them: the screen rules already underline an
     insertion and strike a deletion, which is what a printer with no colour reads. */
  a { color: inherit; }
}