/* =============================================================
   Coffee Monitor
   Design system: the grading form.
   Coffee's own document grammar, used to record data coverage.
   ============================================================= */

:root{
  --field:      #E7EAE1;
  --field-cell: #F2F4EE;
  --field-sunk: #DCE0D5;

  --ink:        #1A1F18;
  --ink-2:      #58604F;
  --ink-3:      #848B7C;

  --rule:       #C4CAB8;
  --rule-hard:  #A9B19C;

  --cherry:     #A81E14;
  --cherry-ink: #7B140D;

  --verd:       #2E6156;

  /* Absence and uncertainty have their own colours. Nothing else uses them. */
  --absent:     #8E9AA0;
  --review:     #9A7B2E;

  --w-page: 1140px;
  --w-text: 680px;

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body:    "Source Serif 4", Georgia, serif;
  --f-data:    "JetBrains Mono", ui-monospace, monospace;
  --f-eth:     "Noto Serif Ethiopic", "Source Serif 4", serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--field);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(to right, rgba(26,31,24,.035) 1px, transparent 1px);
  background-size:56px 100%;
}

.page{ position:relative; z-index:1; max-width:var(--w-page); margin:0 auto; padding:0 28px 96px; }

a{ color:var(--verd); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--cherry); }
:focus-visible{ outline:2px solid var(--cherry); outline-offset:3px; }

/* ---------- Utility type ---------- */

.stamp{
  font-family:var(--f-display);
  font-weight:600; font-stretch:118%;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:.66rem; color:var(--ink-2);
}
.data{ font-family:var(--f-data); }
.amharic{ font-family:var(--f-eth); }

/* ---------- Masthead ---------- */

.mast{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:26px 0 14px; border-bottom:2px solid var(--ink);
}
.mast__mark{ text-decoration:none; color:var(--ink); display:block; }
.mast__name{
  font-family:var(--f-display); font-weight:700; font-stretch:120%;
  text-transform:uppercase; letter-spacing:.11em;
  font-size:1.24rem; line-height:1; margin:0;
}
.mast__name em{ font-style:normal; color:var(--cherry); }
.mast__rule{
  margin-top:7px; font-family:var(--f-data);
  font-size:.68rem; letter-spacing:.02em; color:var(--ink-2);
}

.nav{ display:flex; gap:20px; align-items:center; padding-bottom:4px; flex-wrap:wrap; }
.nav a{
  font-family:var(--f-display); font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.12em; font-size:.66rem;
  color:var(--ink-2); text-decoration:none;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--rule-hard); }
.nav a[aria-current="page"]{ color:var(--cherry); border-bottom-color:var(--cherry); }

/* ---------- Lede ---------- */

.lede{ padding:56px 0 44px; max-width:820px; }
.lede h1{
  font-family:var(--f-display); font-weight:600; font-stretch:104%;
  font-size:clamp(1.8rem, 3.9vw, 2.75rem);
  line-height:1.15; letter-spacing:-.012em; margin:14px 0 20px;
}
.lede p{ font-size:1.16rem; line-height:1.58; margin:0 0 14px; max-width:660px; }
.lede p.sub{ color:var(--ink-2); font-size:1.02rem; }

.strapline{
  font-family:var(--f-display); font-weight:600; font-stretch:106%;
  font-size:clamp(1.15rem, 2.3vw, 1.5rem);
  line-height:1.3; margin:0 0 22px; max-width:640px;
}
.strapline span{ display:block; }
.strapline span:last-child{ color:var(--cherry); }

/* =============================================================
   THE COVERAGE INDEX. Signature element.
   Five ascending states of public evidence. Under review is a
   flag, not a rung, because it is not a level of coverage.
   ============================================================= */

.index{ border:1.5px solid var(--ink); background:var(--field-cell); margin:8px 0 16px; }

.index__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
  padding:13px 18px; background:var(--ink); color:var(--field);
}
.index__head .stamp{ color:var(--field); }
.index__head .data{ font-size:.7rem; color:#B9C1AF; letter-spacing:.03em; }
.index__head .data a{ color:#B9C1AF; }
.index__head .data a:hover{ color:#fff; }

.index__scale{
  display:grid; grid-template-columns:1.35fr 5fr;
  border-bottom:1px solid var(--rule-hard); background:var(--field-sunk);
}
.index__scale > div:first-child{ padding:9px 18px; align-self:center; }
.index__steps{ display:grid; grid-template-columns:repeat(5,1fr); }
.index__steps span{
  padding:9px 9px; border-left:1px solid var(--rule);
  font-family:var(--f-display); font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.08em;
  font-size:.55rem; line-height:1.4; color:var(--ink-2);
}

.row{ display:grid; grid-template-columns:1.35fr 5fr; border-bottom:1px solid var(--rule); }
.row:last-of-type{ border-bottom:0; }

.row__label{ padding:16px 18px; }
.row__label b{
  display:block;
  font-family:var(--f-display); font-weight:600; font-stretch:106%;
  font-size:.93rem; line-height:1.3;
}
.row__label small{
  display:block; margin-top:6px;
  font-family:var(--f-data); font-size:.65rem; line-height:1.55; color:var(--ink-3);
}
.row__label a{ font-size:.65rem; font-family:var(--f-data); }

.row__track{
  position:relative; display:grid; grid-template-columns:repeat(5,1fr);
  border-left:1px solid var(--rule);
}

.cell{ border-left:1px solid var(--rule); min-height:78px; }
.cell:first-child{ border-left:0; }
.cell--void{
  background-image:repeating-linear-gradient(-45deg, transparent 0 5px, rgba(142,154,160,.34) 5px 6px);
}
.cell--review{
  background-image:repeating-linear-gradient(-45deg, transparent 0 5px, rgba(154,123,46,.30) 5px 6px);
}

.fill{
  position:absolute; top:0; bottom:0; left:0;
  background:var(--cherry); width:0;
  transition:width .9s cubic-bezier(.16,.9,.3,1);
  transition-delay:var(--d, 0ms);
}
.fill[data-step="2"]{ width:40%; }
.fill[data-step="3"]{ width:60%; }
.fill[data-step="4"]{ width:80%; }
.fill[data-step="5"]{ width:100%; }
.index:not(.is-drawn) .fill{ width:0; }

.fill__tag{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-family:var(--f-display); font-weight:700; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.11em; font-size:.58rem;
  color:#F0DCDA; white-space:nowrap; opacity:0;
  transition:opacity .35s ease; transition-delay:calc(var(--d, 0ms) + 700ms);
}
.index.is-drawn .fill__tag{ opacity:1; }

.row__void{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  text-align:right; max-width:56%;
}
.row__void b{
  display:block;
  font-family:var(--f-display); font-weight:700; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.11em; font-size:.62rem;
  color:var(--absent);
}
.row__void small{
  display:block; margin-top:3px;
  font-family:var(--f-data); font-size:.62rem; line-height:1.45; color:var(--ink-3);
}
.row__void--review b{ color:var(--review); }

.index__total{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
  padding:16px 18px; border-top:2px solid var(--ink); background:var(--field-sunk);
}
.index__total p{ margin:0 0 6px; font-size:.95rem; color:var(--ink-2); max-width:640px; }
.index__total p:last-child{ margin-bottom:0; }
.index__total .score{
  font-family:var(--f-data); font-weight:700; font-size:1.55rem;
  letter-spacing:-.02em; color:var(--cherry); white-space:nowrap;
}
.index__total .score small{
  display:block; font-family:var(--f-display); font-weight:600; font-stretch:112%;
  font-size:.54rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2); margin-top:2px;
}

.index__foot{
  margin:0 0 8px;
  font-family:var(--f-data); font-size:.66rem; line-height:1.65; color:var(--ink-3);
}

/* =============================================================
   Sections
   ============================================================= */

.sec{ padding:64px 0 0; }
.sec__head{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:10px; border-bottom:1.5px solid var(--ink); margin-bottom:26px;
}
.sec__head h2{
  font-family:var(--f-display); font-weight:600; font-stretch:108%;
  font-size:1.3rem; letter-spacing:-.005em; margin:0;
}
.sec__head .stamp{ margin-left:auto; text-align:right; }

.prose{ max-width:var(--w-text); }
.prose p{ margin:0 0 18px; }
.prose h3{
  font-family:var(--f-display); font-weight:600; font-stretch:106%;
  font-size:1.02rem; margin:34px 0 10px;
}
.prose ul, .prose ol{ margin:0 0 18px; padding-left:20px; }
.prose li{ margin-bottom:9px; }

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule-hard); border:1px solid var(--rule-hard); }
.box{ background:var(--field-cell); padding:22px 20px 24px; }
.box .stamp{ color:var(--cherry); }
.box h3{ font-family:var(--f-display); font-weight:600; font-stretch:106%; font-size:1.05rem; margin:9px 0 8px; }
.box p{ margin:0; font-size:.94rem; line-height:1.55; color:var(--ink-2); }

/* ---------- Status tags ---------- */

.tag{
  display:inline-block; padding:4px 8px 3px;
  font-family:var(--f-display); font-weight:700; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.1em; font-size:.56rem;
  white-space:nowrap; border:1px solid currentColor;
}
.tag--series{ color:var(--verd); }
.tag--figure{ color:var(--verd); }
.tag--stated{ color:var(--cherry); }
.tag--held{ color:var(--cherry-ink); }
.tag--none{ color:var(--absent); }
.tag--review{ color:var(--review); }

/* ---------- Record entries ---------- */

.entry{
  border:1px solid var(--rule-hard); background:var(--field-cell);
  margin-bottom:18px;
}
.entry__top{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap;
  padding:11px 18px; border-bottom:1px solid var(--rule); background:var(--field-sunk);
}
.entry__top .data{ font-size:.7rem; color:var(--ink-2); letter-spacing:.03em; }
.entry__claim{ padding:18px 18px 6px; font-size:1.06rem; line-height:1.5; margin:0; }
.entry__fields{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 1px; background:var(--rule); border-top:1px solid var(--rule); margin-top:14px;
}
.entry__f{ background:var(--field-cell); padding:12px 18px; border-bottom:1px solid var(--rule); }
.entry__f dt{
  font-family:var(--f-display); font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.1em; font-size:.55rem; color:var(--ink-3);
  margin:0 0 4px;
}
.entry__f dd{ margin:0; font-size:.9rem; line-height:1.5; color:var(--ink); }
.entry__f--wide{ grid-column:1 / -1; }
.entry__f--note dd{ color:var(--ink-2); }

/* ---------- Lists ---------- */

.list{ border-top:1.5px solid var(--ink); }
.item{
  display:grid; grid-template-columns:160px 1fr auto; gap:22px; align-items:baseline;
  padding:20px 4px; border-bottom:1px solid var(--rule);
  text-decoration:none; color:var(--ink);
}
.item:hover{ background:var(--field-cell); }
.item:hover h3{ color:var(--cherry); }
.item__meta{ font-family:var(--f-data); font-size:.67rem; color:var(--ink-3); line-height:1.55; }
.item h3{ font-family:var(--f-display); font-weight:600; font-stretch:106%; font-size:1.05rem; margin:0 0 5px; }
.item p{ margin:0; font-size:.93rem; color:var(--ink-2); max-width:62ch; }
.item__go{ font-family:var(--f-data); font-size:.72rem; color:var(--verd); white-space:nowrap; }

/* ---------- Callout ---------- */

.callout{
  border:1.5px solid var(--ink); border-left:6px solid var(--cherry);
  background:var(--field-cell); padding:22px 24px; margin:34px 0; max-width:var(--w-text);
}
.callout p{ margin:8px 0 0; font-size:1rem; }
.callout p:first-of-type{ margin-top:8px; }

/* ---------- Footer ---------- */

.foot{
  margin-top:88px; padding-top:22px; border-top:2px solid var(--ink);
  display:flex; gap:32px; justify-content:space-between; flex-wrap:wrap;
}
.foot p{ margin:0 0 8px; font-family:var(--f-data); font-size:.7rem; line-height:1.75; color:var(--ink-2); max-width:44ch; }
.foot a{ color:var(--ink-2); }
.foot a:hover{ color:var(--cherry); }
.foot__col{ min-width:200px; }

/* ---------- Holding page ---------- */

.holding{ min-height:70vh; display:flex; align-items:center; }
.holding .lede{ padding-top:0; }

/* ---------- Responsive ---------- */

@media (max-width: 980px){
  .grid3{ grid-template-columns:1fr; }
  .item{ grid-template-columns:1fr; gap:8px; }
  .item__go{ display:none; }
  .entry__fields{ grid-template-columns:1fr; }
}

@media (max-width: 780px){
  body::before{ display:none; }
  .page{ padding:0 18px 72px; }
  .index__scale{ display:none; }
  .row{ grid-template-columns:1fr; }
  .row__label{ padding:15px 15px 10px; }
  .row__track{ border-left:0; border-top:1px solid var(--rule); }
  .cell{ min-height:58px; }
  .row__void{ max-width:72%; }
  .fill__tag{ font-size:.55rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .fill{ transition:none; }
  .fill__tag{ transition:none; opacity:1; }
}

@media print{
  body::before{ display:none; }
  .nav{ display:none; }
}