/* On Counting apex: a ledger. Paper, ink, one vermilion mark. No external requests, no script. */
:root{
  color-scheme:light;
  --paper:#f7f7f5;--ink:#131312;--muted:#6a6a64;--line:#d9d9d2;--accent:#e4572e;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{min-width:300px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:18px/1.55 var(--serif);-webkit-font-smoothing:antialiased}
main{flex:1}
.hero,main,.foot{width:100%}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;font:13px var(--mono);z-index:2}
.skip:focus{left:8px}

.hero,main,.foot{max-width:1120px;margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
.hero{padding-top:clamp(40px,9vw,112px);padding-bottom:clamp(36px,6vw,72px)}

.tally{display:block;width:clamp(120px,17vw,210px);height:auto;margin-bottom:clamp(14px,2.4vw,28px);overflow:visible}
.tally .t{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.tally .t5{stroke:var(--accent);stroke-width:6}

h1{margin:0;font-weight:400;font-size:clamp(58px,13.5vw,168px);line-height:.92;letter-spacing:-.035em}
.lede{margin:clamp(18px,2.6vw,30px) 0 0;max-width:20em;font-size:clamp(22px,3vw,34px);line-height:1.25;font-style:italic;color:var(--ink)}

.label{margin:0 0 14px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
main{padding-bottom:clamp(48px,8vw,104px)}
#ledger-title{text-transform:none;letter-spacing:.08em;font-size:13px}
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rows li{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:8px 28px;align-items:baseline;padding:clamp(22px,3vw,34px) 0;text-decoration:none}
.date{font:13px/1 var(--mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.body{display:block;min-width:0}
.name{display:block;font-size:clamp(30px,4.6vw,58px);line-height:1.05;letter-spacing:-.02em;transition:color .15s}
.what{display:block;margin-top:8px;max-width:36em;font-size:clamp(16px,1.6vw,19px);color:var(--muted)}
.status{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block}
.row:hover .name,.row:focus-visible .name{color:var(--accent)}
.row:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.row .name::after{content:"\2197";display:inline-block;margin-left:.3em;font-size:.5em;vertical-align:.45em;opacity:0;transform:translate(-6px,6px);transition:opacity .15s,transform .15s}
.row:hover .name::after,.row:focus-visible .name::after{opacity:1;transform:none}

.foot{position:relative;padding-top:20px;padding-bottom:36px;font:12px/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.foot::before{content:"";position:absolute;top:0;left:clamp(20px,5vw,64px);right:clamp(20px,5vw,64px);border-top:1px solid var(--line)}

@media(max-width:640px){
  .row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"date status" "body body"}
  .date{grid-area:date}.status{grid-area:status}.body{grid-area:body;margin-top:6px}
}

/* The tally draws itself once: four strokes, then the strike. */
@media(prefers-reduced-motion:no-preference){
  .tally .t{stroke-dashoffset:1;animation:draw .5s cubic-bezier(.3,.7,.2,1) forwards}
  .t1{animation-delay:.15s!important}.t2{animation-delay:.35s!important}.t3{animation-delay:.55s!important}.t4{animation-delay:.75s!important}.t5{animation-delay:1.05s!important;animation-duration:.45s!important}
  h1,.lede,.rows{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  h1{animation-delay:.1s}.lede{animation-delay:.9s}.rows{animation-delay:1.3s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}