/* ============================================================
   COMP B — The Dish, layered on top of comp A's rules
   ------------------------------------------------------------
   This block sits AFTER the base styles on purpose. The first
   attempt put these overrides above the rules they override, so
   the base won on source order and the index rows collapsed to
   two columns with the titles wrapping one word per line. Same
   specificity means later wins, so later is where they go.

   IDENTICAL to comp A in content, hero order, and copy. The only
   variable is density, which is the point: Keith is choosing
   between two levels of busy-ness on one site, not between two
   sites.

   The case for it: Clear has three books and a course. Keith has
   a twenty-year archive across five subjects and a bare list
   undersells it. The case against is that Keith named Clear.
   ============================================================ */
/* The strip says what is actually new. At launch there is no title, no cover
   and nothing to preorder, so announcing the book would spend the site's one
   announcement on an empty promise. It says the archive survived instead, which
   is the true and useful thing on day one. Swap it when there is a title. */
.topstrip{background:var(--accent);color:var(--on-accent)}
.topstrip .wrap{max-width:none;padding-block:.6rem;text-align:center}
.topstrip p{margin:0;font-family:var(--mono);font-size:.6875rem;font-weight:var(--strip-weight);
  letter-spacing:.08em;text-transform:uppercase}
/* nowrap: this is a button in all but name, and "go to / the archive"
   split across two lines reads as two separate links. */
.topstrip a{border-bottom:1.5px solid currentColor;padding-bottom:1px;white-space:nowrap}
.top{border-bottom:1px solid var(--line-ink)}

/* the ledger, behind the hero only */
.hero{position:relative;overflow:hidden;
  background-image:
    repeating-linear-gradient(to right,var(--accent-wash) 0 1px,transparent 1px 100%),
    repeating-linear-gradient(to bottom,var(--accent-wash) 0 1px,transparent 1px 100%),
    repeating-linear-gradient(to bottom,var(--accent-rule) 0 1px,transparent 1px 100%);
  background-size:var(--ledger-cell) var(--ledger-cell),
                  var(--ledger-cell) var(--ledger-cell),100% var(--ledger-heavy)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--paper) 0%,transparent 22%,transparent 70%,var(--paper) 100%)}
.hero .wrap{position:relative;z-index:2}
.signup{background:var(--paper);border-color:var(--line-ink)}

/* the currently band */
.currently{border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);
  background:var(--paper-2)}
.currently ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));max-width:var(--wrap);margin-inline:auto}
.currently li{padding:1rem clamp(.7rem,2vw,1.1rem);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:.35rem;min-height:5.5rem}
.currently li:last-child{border-right:0}
.currently .l{font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.currently .v{font-family:var(--display);font-weight:650;font-size:.9375rem;line-height:1.25}
.currently .s{font-family:var(--mono);font-size:.5rem;color:var(--ink-3);margin-top:auto}
@media (max-width:44rem){
  .currently ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .currently li{border-bottom:1px solid var(--line)}
  .currently li:nth-child(2n){border-right:0}
}

/* books get covers */
.book{grid-template-columns:5.5rem minmax(0,1fr);gap:0 1.2rem;align-items:start}
.book>*:not(.cov){grid-column:2}
.book .cov{grid-column:1;grid-row:1 / span 4;aspect-ratio:3/4;width:5.5rem;
  border:1px solid var(--line-2);border-left:4px solid var(--accent);background:var(--paper);
  display:flex;align-items:flex-end;padding:.55rem;font-family:var(--display);
  font-weight:800;font-size:.75rem;line-height:1.15}
.book--next .cov{border-style:dashed;border-left-color:var(--line-2);color:var(--ink-3)}
/* A real jacket, not the drawn stand-in. The rule above sets 3:4 with a crimson
   spine, which was right for a box we drew ourselves. Real jackets are 2:3
   (Keith's are 350x527, so 0.664), and at 3:4 object-fit would have cropped the
   top and bottom off both of them. No spine either: the jacket has its own. */
.book .cov--real{aspect-ratio:2/3;border:1px solid var(--line-2);border-left-width:1px;
  background:none;padding:0;display:block}
.book .cov--real img{width:100%;height:auto;display:block}
@media (max-width:30rem){
  .book{grid-template-columns:1fr}
  .book>*:not(.cov),.book .cov{grid-column:1}
  .book .cov{grid-row:auto;margin-bottom:.5rem}
}

/* index rows carry the category and the grade */
.rows li{grid-template-columns:5.5rem 8rem minmax(0,1fr);align-items:baseline}
.rows .k{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.grade{display:inline-block;font-family:var(--mono);font-size:.5625rem;font-weight:600;
  color:var(--on-accent);background:var(--accent);padding:.05rem .35rem;
  margin-left:.45rem;vertical-align:2px}
@media (max-width:40rem){
  .rows li{grid-template-columns:1fr;gap:.15rem}
  .rows .k{order:-1}
}

/* Stats band. The em dash count was always meant to sit beside the post count
   and the book count, not stand alone: three numbers, one of which is a joke,
   and the joke only works because the other two are dry.
   It goes AFTER the signup so it cannot push the form down the page.
   BOTH NUMBERS ARE PLACEHOLDERS. build/count-em-dashes.mjs returns the real
   em dash total and the real post count in the same pass: the WordPress REST
   API sends the post count back in the x-wp-total header. One run, two numbers. */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper-2)}
.stats .wrap{display:flex;gap:clamp(1.75rem,6vw,4rem);flex-wrap:wrap;
  padding-block:clamp(1rem,3vw,1.5rem)}
.stat .n{display:block;font-family:var(--display);font-weight:800;
  font-size:var(--step-2);line-height:1;letter-spacing:-0.02em;color:var(--accent)}
.stat .l{display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.45rem}
.stat--joke .n{color:var(--ink)}
.stat--joke .f{display:block;font-family:var(--quote);font-style:italic;
  font-size:.875rem;color:var(--ink-3);margin-top:.2rem}

/* Jacket slot. Fixed at 2:3, which is a 6x9 trade hardcover, so the real
   image drops in with no reflow. The label is a slot marker, not a design
   element: a box styled to look like a cover reads as a decision rather than
   as something still missing. */
.cov{aspect-ratio:2/3;background:var(--paper-3);border:1px dashed var(--line-2);
  display:grid;place-items:center;text-align:center;padding:.5rem;overflow:hidden}
.cov img{width:100%;height:100%;object-fit:cover;display:block}
.cov span{font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;
  /* explicit weight. In comp B this span sat inside a rule that set 800 for the
     old fake cover, and IBM Plex Mono has no 800, so it was being faked. */
  font-weight:500;
  text-transform:uppercase;color:var(--ink-3);line-height:1.8}