/* The kingdom, live (kingdom.html). Only what the site's own stylesheet does not
   already give: the three figures, two plain tables and the list of what just
   happened. Colours and fonts are the site's own variables — nothing new. */

.kvisually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.kfeed-asof{
  font:500 .82rem/1.5 var(--caps);letter-spacing:.1em;text-transform:lowercase;
  color:var(--lantern);margin:.4rem 0 0;
}
.kfeed-asof.kstale{color:var(--err);letter-spacing:.02em;text-transform:none;font-family:var(--sans);font-size:.95rem}

/* the kingdom in three numbers */
.kfacts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px);
  margin:clamp(20px,3vw,40px) 0 0;padding:0;
}
.kfacts div{
  border-left:1px solid var(--line);padding-left:clamp(12px,2vw,26px);
  display:grid;gap:.45rem;align-content:start;
}
.kfacts dt{
  font:500 .8rem/1 var(--caps);letter-spacing:.12em;text-transform:lowercase;color:var(--fog);
  order:-1;
}
.kfacts .knum{
  font:500 clamp(2rem,4.4vw,3.2rem)/1 var(--serif);color:var(--mist);
  font-variant-numeric:lining-nums;margin:0;
}
.kfacts .kwhy{margin:0;color:var(--fog);font-size:.98rem;max-width:34rem}

/* the two tables */
.kscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ktable{
  width:100%;border-collapse:collapse;margin-top:clamp(14px,2vw,24px);
  font-family:var(--sans);font-size:1rem;color:var(--mist);
}
.ktable caption{caption-side:top}
.ktable th,.ktable td{
  text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--line-soft);
  vertical-align:baseline;
}
.ktable thead th{
  font:500 .78rem/1 var(--caps);letter-spacing:.12em;text-transform:lowercase;
  color:var(--fog);border-bottom-color:var(--line);
}
.ktable tbody th{font-weight:500}
.ktable .kn{font-variant-numeric:lining-nums tabular-nums;color:var(--mist);white-space:nowrap}
.kmark{
  display:inline-block;margin-left:.5rem;padding:.1rem .4rem;border:1px solid var(--lantern);
  border-radius:2px;color:var(--lantern);font:500 .68rem/1.4 var(--caps);
  letter-spacing:.08em;text-transform:lowercase;
}
.kmark.kdear{border-color:var(--em);color:var(--em)}

/* what just happened */
.kevents{list-style:none;margin:clamp(14px,2vw,24px) 0 0;padding:0;display:grid;gap:.55rem}
.kevents li{
  display:flex;gap:.8rem;align-items:baseline;
  border-bottom:1px solid var(--line-soft);padding-bottom:.55rem;
}
.kevents .kday{
  flex:0 0 auto;min-width:4.6rem;color:var(--lantern);
  font:500 .76rem/1.4 var(--caps);letter-spacing:.1em;text-transform:lowercase;
  font-variant-numeric:tabular-nums;
}
.kevents .kword{color:var(--mist);font-family:var(--sans)}
.kevents .kmuted{color:var(--fog);border:0}
.kmuted{color:var(--fog);font-size:.95rem}

@media (max-width:720px){
  .kfacts{grid-template-columns:minmax(0,1fr)}
  .kfacts div{border-left:0;padding-left:0;border-top:1px solid var(--line-soft);padding-top:.8rem}
  .kevents li{display:block}
  .kevents .kday{display:block;min-width:0}
}