:root{
  /* one spacing scale, used everywhere -- no ad-hoc margins */
  --s0:.25rem; --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem;
  --s5:2rem; --s6:3rem; --s7:4.5rem;
  --ink:#16181d;        /* near-black, not black */
  --ink-soft:#4a4f57;
  --meta:#6b7280;       /* provenance grey -- quiet, never alarming */
  --paper:#fbfaf8;      /* off-white */
  --rule:#e5e2dc;
  --accent:#1e5b8a;     /* one accent, links only */
  --pending:#f4f2ee;    /* a field awaiting data, not an error */
  --measure:66ch;
  --measure-lead:48ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1.0625rem/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1;
}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 var(--s3)}
header{padding:var(--s4) 0 0}
header a{font-weight:600; letter-spacing:-.01em; color:var(--ink); text-decoration:none}
main{padding:var(--s3) 0 var(--s6)}
h1{font-size:1.6rem; line-height:1.25; letter-spacing:-.02em; margin:var(--s4) 0 var(--s3); font-weight:650}
h2{font-size:1.15rem; line-height:1.3; margin:var(--s5) 0 var(--s2); font-weight:650}
h3{font-size:.9375rem; margin:0 0 var(--s1); font-weight:650; letter-spacing:.005em}
p{margin:0 0 var(--s2); max-width:var(--measure)}
a{color:var(--accent)}
ul{margin:var(--s1) 0 var(--s2); padding-left:var(--s4)}
li{margin:0 0 var(--s0)}

/* THE ANSWER -- what the reader came for, large and plain */
.answer{font-size:1.35rem; line-height:1.35; font-weight:600; letter-spacing:-.015em;
  margin:0 0 var(--s2); max-width:var(--measure-lead)}
.answer-sub{color:var(--ink-soft); font-size:1rem; margin:0 0 var(--s5)}

/* cells -- subordinate to the answer, separated by space not boxes */
.cell{padding:var(--s3) 0; border-top:1px solid var(--rule)}
.cell p{font-size:1rem}
.cell.pending{color:var(--ink-soft)}
.cell.pending .val{background:var(--pending); padding:var(--s0) var(--s1);
  border-radius:2px; color:var(--meta); font-style:normal}

/* PROVENANCE -- quiet, consistently placed, never a warning */
.method{font-size:.8125rem; line-height:1.45; color:var(--meta); margin:var(--s1) 0 0}
.method b{font-weight:600; color:var(--ink-soft)}
.evidence,.src{font-size:.8125rem; line-height:1.5; color:var(--meta); margin:var(--s1) 0 0}
.caveat{font-size:.8125rem; line-height:1.5; color:var(--ink-soft);
  border-left:2px solid var(--rule); padding-left:var(--s2); margin:var(--s2) 0 0}

/* THE INDEX -- STACKED BY DEFAULT. Three columns cannot fit 360px, so on a phone each
   row is a block: jurisdiction on its own line (what you scan by), regime and tier
   beneath as one quiet line. The header row is hidden when stacked, because column
   headings describing columns that no longer exist are worse than none. */
table{width:100%; margin:var(--s3) 0 var(--s5); font-size:.9375rem}
table,tbody,tr,td{display:block}
thead{display:none}
tr{padding:var(--s2) 0; border-bottom:1px solid var(--rule)}
td{padding:0; border:0}
td:first-child{font-weight:600; margin:0 0 var(--s0)}
td:nth-child(2),td:nth-child(3){display:inline; font-size:.8125rem; color:var(--meta)}
td:nth-child(3)::before{content:" · "}
th{text-align:left; font-size:.8125rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--meta); font-weight:600; padding:0 var(--s2) var(--s1) 0;
  border-bottom:1px solid var(--rule)}
td{padding:var(--s1) var(--s2) var(--s1) 0; border-bottom:1px solid var(--rule);
  vertical-align:top}
td.tier{color:var(--meta); font-size:.8125rem; white-space:nowrap}
tr:hover td{background:#f5f3ef}

footer{border-top:1px solid var(--rule); padding:var(--s3) 0 var(--s6);
  font-size:.875rem; color:var(--meta)}
footer nav{margin:0 0 var(--s2)}
footer a{color:var(--accent)}

@media (min-width:40rem){
  body{font-size:1.125rem}
  h1{font-size:2.1rem}
  .answer{font-size:1.6rem}
  .wrap{padding:0 var(--s4)}
  /* enough width for real columns: restore the table */
  table{border-collapse:collapse; display:table}
  thead{display:table-header-group}
  tbody{display:table-row-group}
  tr{display:table-row; padding:0; border-bottom:0}
  td{display:table-cell; padding:var(--s1) var(--s2) var(--s1) 0;
     border-bottom:1px solid var(--rule); vertical-align:top}
  td:first-child{margin:0}
  td:nth-child(2),td:nth-child(3){font-size:.9375rem; color:inherit}
  td.tier{color:var(--meta); font-size:.8125rem; white-space:nowrap}
  td:nth-child(3)::before{content:none}
}