/* Ringback — one stylesheet. Two accent inks: backlight marks the period
   record, signal marks a quantity. Nothing else is coloured. */

@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:400;
  src:url(/fonts/source-serif-4-400.woff2) format("woff2");font-display:swap}
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:600;
  src:url(/fonts/source-serif-4-600.woff2) format("woff2");font-display:swap}
@font-face{
  font-family:"Source Serif 4";font-style:italic;font-weight:400;
  src:url(/fonts/source-serif-4-italic.woff2) format("woff2");font-display:swap}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;
  src:url(/fonts/ibm-plex-mono-400.woff2) format("woff2");font-display:swap}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:600;
  src:url(/fonts/ibm-plex-mono-600.woff2) format("woff2");font-display:swap}

:root{
  color-scheme:light dark;
  --paper:#F4F5F2; --paper-2:#E9EBE5; --ink:#191B1F; --ink-2:#525862;
  --rule:#D7DAD2; --backlight:#2FA8CC; --blue-ink:#0F586F; --signal:#96351F;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:66ch; --wide:90ch; --lh:1.65rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#14161A; --paper-2:#1C1F24; --ink:#E8E6DF; --ink-2:#9BA1A8;
    --rule:#2A2E34; --backlight:#3FB4D8; --blue-ink:#6FC3DD; --signal:#DE8A6C;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:19px}
@media (max-width:640px){html{font-size:17px}}
body{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  background:var(--paper);line-height:var(--lh);
  padding:0 calc(var(--lh)/2);
}
main{max-width:var(--measure);margin:0 auto calc(var(--lh)*2)}

/* ---- links: ink with a backlight underline, never default blue ---- */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--backlight);
  text-decoration-thickness:1px;text-underline-offset:.12em}
a:hover{text-decoration-thickness:2px}
a:visited{color:var(--ink-2)}
nav a,.masthead a,.tracklist a,.prevnext a,footer a{color:var(--ink)}
nav a:visited,.masthead a:visited,.tracklist a:visited,.prevnext a:visited,
footer a:visited{color:var(--ink)}

/* ---- masthead & nav ---- */
header.site{max-width:var(--measure);margin:0 auto;padding:var(--lh) 0}
.wordmark{font-family:var(--mono);font-weight:600;font-size:1.35rem;
  letter-spacing:.28em;text-transform:uppercase;margin:0}
.wordmark a{text-decoration:none}
.sitehost{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);margin-top:calc(var(--lh)/4)}
.tagline{color:var(--ink-2);font-size:.95rem;max-width:var(--measure);
  margin-top:calc(var(--lh)/2)}
nav.site{font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;margin-top:calc(var(--lh)/2);
  display:flex;flex-wrap:wrap;gap:calc(var(--lh)/2)}
nav.site a{text-decoration:none}
nav.site a:hover{text-decoration:underline;text-decoration-color:var(--backlight)}
header.site{border-bottom:1px solid var(--rule);margin-bottom:var(--lh)}

/* ---- headings ---- */
h1{font-weight:600;font-size:1.9rem;line-height:1.15;margin:var(--lh) 0 calc(var(--lh)/2)}
h2{font-weight:600;font-size:1.3rem;line-height:1.15;margin:calc(var(--lh)*1.5) 0 calc(var(--lh)/2)}
h3{font-weight:600;font-size:1.05rem;line-height:1.15;margin:var(--lh) 0 calc(var(--lh)/2)}
p{margin:0 0 var(--lh)}
ul,ol{margin:0 0 var(--lh) calc(var(--lh)*1.2)}
li{margin-bottom:calc(var(--lh)/4)}
em,cite{font-style:italic}
.deck{font-size:1.05rem;color:var(--ink-2);margin-bottom:var(--lh)}
.byline{font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--lh)}
.byline time{color:var(--blue-ink)}

/* ---- hero plate ---- */
figure.hero{margin:0 0 var(--lh)}
figure.hero img{width:100%;height:auto;display:block}
figure.hero figcaption,figcaption{font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;color:var(--ink-2);margin-top:calc(var(--lh)/4)}

/* ---- the call log ---- */
.calllog{font-family:var(--mono);font-size:13px;line-height:var(--lh);
  border:1px solid var(--rule);padding:calc(var(--lh)/2) calc(var(--lh)*.6);
  margin:0 0 var(--lh)}
.calllog .label{font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  display:block;margin-bottom:calc(var(--lh)/4)}
.calllog ol{list-style:none;margin:0}
.calllog li{margin:0;display:flex;gap:1.5ch}
.calllog time{color:var(--blue-ink);white-space:nowrap}

/* ---- The Number ---- */
.thenumber{margin:var(--lh) 0;text-align:left}
.thenumber .figure{font-family:var(--mono);font-weight:600;color:var(--signal);
  font-size:clamp(1.6rem,6vw,3rem);line-height:1.1;letter-spacing:.02em;
  overflow-wrap:anywhere}
.thenumber .caption{font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink-2);margin-top:calc(var(--lh)/4)}

/* ---- record blocks: archive facts, visibly citation ---- */
.record{font-family:var(--mono);font-size:13px;line-height:var(--lh);
  background:var(--paper-2);border-left:2px solid var(--backlight);
  padding:calc(var(--lh)/2) calc(var(--lh)*.6);margin:0 0 var(--lh);
  overflow-wrap:anywhere}

/* ---- ledger chips ---- */
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue-ink);white-space:nowrap;
  text-decoration:none;border:1px solid var(--rule);
  padding:1px 6px;vertical-align:baseline}
.chip::before{content:"";display:inline-block;width:6px;height:6px;
  background:var(--backlight);margin-right:6px}
a.chip:visited{color:var(--blue-ink)}

/* ---- balance block ---- */
.balance{font-family:var(--mono);font-size:13px;line-height:var(--lh);
  border-top:2px solid var(--signal);padding-top:calc(var(--lh)/2);
  margin:calc(var(--lh)*1.5) 0 var(--lh)}
.balance .label{font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  display:block;margin-bottom:calc(var(--lh)/4)}
.balance dl{display:grid;grid-template-columns:18ch 1fr;gap:0 2ch}
.balance dt{color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.balance dd{margin:0 0 calc(var(--lh)/4)}
@media (max-width:640px){.balance dl{grid-template-columns:1fr}
  .balance dd{margin-bottom:calc(var(--lh)/2)}}

/* ---- sources ---- */
.sources{border-top:1px solid var(--rule);padding-top:calc(var(--lh)/2);
  margin-top:calc(var(--lh)*1.5);font-size:.85rem}
.sources h2{font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 calc(var(--lh)/2)}
.sources ol{margin-left:calc(var(--lh)*1.2)}
.sources li{overflow-wrap:anywhere}
.sources .method{color:var(--ink-2);font-style:italic}

/* ---- prev / next ---- */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:var(--lh);
  border-top:1px solid var(--rule);padding-top:var(--lh);margin-top:var(--lh)}
.prevnext .slot{font-size:.85rem}
.prevnext .dir{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);display:block}
.prevnext .promise{color:var(--ink-2);display:block}
@media (max-width:640px){.prevnext{grid-template-columns:1fr}}

/* ---- the tracklist front page ---- */
.starthere{margin-bottom:var(--lh)}
.starthere h2,.tracklist-wrap h2{font-family:var(--mono);font-size:12px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  margin:var(--lh) 0 calc(var(--lh)/2)}
.starthere ul{list-style:none;margin-left:0}
.starthere .promise{color:var(--ink-2);font-size:.9rem}
.tracklist{list-style:none;margin:0}
.tracklist li{display:flex;align-items:baseline;gap:1ch;margin:0 0 calc(var(--lh)/4)}
.tracklist .tno{font-family:var(--mono);font-size:13px;color:var(--blue-ink);
  flex:none;width:2ch;text-align:right}
.tracklist .ttitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tracklist .leader{flex:1;border-bottom:1px dotted var(--rule);
  transform:translateY(-.35em);min-width:3ch}
.tracklist .tdur{font-family:var(--mono);font-size:13px;color:var(--ink-2);flex:none}
@media (max-width:640px){.tracklist .ttitle{white-space:normal}}

/* ---- ledger lines (timeline, stores shutdown summary) ---- */
.ledgerline{display:flex;align-items:baseline;gap:1ch;margin:0 0 calc(var(--lh)/4)}
.ledgerline time,.ledgerline .lfig{font-family:var(--mono);font-size:13px;
  color:var(--blue-ink);flex:none}
.ledgerline .lfig{color:var(--signal)}
.ledgerline .leader{flex:1;border-bottom:1px dotted var(--rule);
  transform:translateY(-.35em);min-width:3ch}

/* ---- reference tables ---- */
.tablewrap{max-width:var(--wide);margin:0 auto var(--lh);overflow-x:auto}
table.ledger{border-collapse:collapse;font-size:.8rem;width:100%;min-width:60ch}
table.ledger caption{text-align:left;font-family:var(--mono);font-size:11px;
  color:var(--ink-2);letter-spacing:.04em;margin-bottom:calc(var(--lh)/4)}
table.ledger th{font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;text-align:left;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding:4px 10px 4px 0;vertical-align:bottom}
table.ledger td{border-bottom:1px solid var(--rule);padding:6px 10px 6px 0;
  vertical-align:top}
table.ledger tbody tr:nth-child(even) td{background:var(--paper-2)}
table.ledger .closed{color:var(--signal)}
table.ledger .ne{color:var(--ink-2);font-style:italic}

/* ---- forms ---- */
form.contact{max-width:52ch}
form.contact label{display:block;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  margin:var(--lh) 0 calc(var(--lh)/4)}
form.contact input,form.contact textarea{width:100%;font:inherit;
  color:var(--ink);background:var(--paper-2);border:1px solid var(--rule);
  padding:calc(var(--lh)/4) calc(var(--lh)/3)}
form.contact textarea{min-height:calc(var(--lh)*6)}
form.contact input:focus,form.contact textarea:focus{outline:2px solid var(--backlight)}
form.contact button{font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--ink-2);
  padding:calc(var(--lh)/3) var(--lh);margin-top:var(--lh);cursor:pointer}
form.contact button:hover{outline:2px solid var(--backlight)}
.hp{position:absolute;left:-9999px;top:auto;height:1px;width:1px;overflow:hidden}

/* ---- footer ---- */
footer.site{max-width:var(--measure);margin:calc(var(--lh)*2) auto var(--lh);
  border-top:1px solid var(--rule);padding-top:var(--lh);
  font-size:.85rem;color:var(--ink-2)}
footer.site nav{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;display:flex;flex-wrap:wrap;gap:calc(var(--lh)/2);
  margin-top:calc(var(--lh)/4)}
footer.site a{color:var(--ink-2)}

/* ---- skip link, misc ---- */
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:4px}
hr{border:0;border-top:1px solid var(--rule);margin:var(--lh) 0}
img{max-width:100%}