/* basisforensics.com — shared stylesheet
   Target path on the server: public_html/style.css
   One stylesheet for every page. Change a colour or a measure here and it
   changes everywhere, which is the whole reason it is not inline. */

:root{
  --ink:#16181c;
  --ink-soft:#4a4f57;
  --rule:#dcdcd6;
  --paper:#fbfaf7;
  --accent:#6b2436;
  --measure:36rem;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.65 var(--serif);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.25rem}

/* ---- masthead and nav ---- */
.masthead{padding:2.25rem 0 0}
.mark{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:600;
  margin:0 0 1.25rem;display:block;border:0;
}
a.mark:hover{color:var(--accent)}

nav{
  font-family:var(--sans);font-size:.83rem;letter-spacing:.02em;
  padding:0 0 1.75rem;border-bottom:1px solid var(--rule);margin-bottom:2.5rem;
}
nav a{
  color:var(--ink-soft);border:0;margin-right:1.4rem;display:inline-block;
  padding:.15rem 0;
}
nav a:hover{color:var(--accent)}
nav a[aria-current="page"]{color:var(--ink);font-weight:600}

/* ---- type ---- */
h1{font-size:clamp(1.8rem,5vw,2.35rem);line-height:1.18;letter-spacing:-.012em;margin:0 0 .4rem;font-weight:600}
.byline{font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);margin:0 0 2.25rem}
.lede{font-size:1.14rem;line-height:1.55}
.lede strong{font-weight:600}
h2{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin:2.75rem 0 .9rem;
}
p{margin:0 0 1.15rem}
ul{margin:0 0 1.15rem;padding-left:1.1rem}
li{margin:0 0 .5rem}
hr{border:0;border-top:1px solid var(--rule);margin:2.75rem 0}

.states{
  font-family:var(--sans);font-size:.9rem;letter-spacing:.02em;color:var(--ink-soft);
  border-left:2px solid var(--accent);padding-left:.85rem;margin:0 0 1.5rem;
}
.pull{
  border-left:2px solid var(--rule);padding-left:1rem;margin:1.75rem 0;
  color:var(--ink-soft);font-style:italic;
}

a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(107,36,54,.32)}
a:hover{border-bottom-color:var(--accent)}

.contact{font-family:var(--sans);font-size:1.0625rem;line-height:1.9}

footer{
  margin-top:3.5rem;padding:1.5rem 0 4rem;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);
}
footer a{color:var(--ink-soft);border-bottom-color:var(--rule)}

@media (prefers-color-scheme:dark){
  :root{--ink:#e9e7e2;--ink-soft:#a4a8af;--rule:#33363c;--paper:#14161a;--accent:#d08a9c}
  a{border-bottom-color:rgba(208,138,156,.35)}
}

/* ---- state cards: training/states.php ----
   The only wide layout on the site. Everything else holds the 36rem measure
   because it is prose; a fifty-item grid is not prose and reads badly at that
   width. Nothing above this line uses .wide, .cards or .card, so adding them
   changes no existing page. */

.wrap.wide{max-width:60rem}

.cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));
  gap:.7rem;margin:0 0 1.5rem;padding:0;list-style:none;
}
.card{
  border:1px solid var(--rule);padding:.7rem .8rem;margin:0;
  display:block;color:inherit;
}
.card .name{
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  display:block;margin:0 0 .3rem;
}
.card .lic{
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--accent);margin-left:.4rem;
}
.card .badge{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin:0 0 .4rem;
}
.card .rev{
  font-family:var(--sans);font-size:.72rem;line-height:1.4;
  color:var(--ink-soft);margin:0;
}
.card.pending{opacity:.68}
.card.next{border-color:var(--accent)}
.card.next .badge{color:var(--accent);font-weight:600}

/* A card becomes a link only once its state page exists. */
a.card{border-bottom:0;text-decoration:none}
a.card:hover{border-color:var(--accent)}

.rev-note{font-size:.92rem;color:var(--ink-soft)}

/* A card that has become a link sits inside its <li> as <li><a class="card">.
   The <li> needs its bottom margin removed so the grid gap governs spacing,
   and nothing else. Resetting border and padding here was wrong: `.cards > li`
   outranks `.card`, so it stripped the box off every <li class="card"> and
   left forty-eight states rendering as bare text. */
.cards > li{margin:0}