/* Constant Reader — the jewel editorial desk.

   A private literary desk rather than a commerce catalogue: dark jewel grounds,
   brass rules, clipped Deco corners, and a typographic division that never
   breaks. Display sets in Bodoni, editorial prose in Source Serif, controls and
   labels in IBM Plex Sans, metadata in mono. Nothing is a pill, nothing floats
   on a shadow, and there is exactly one theme — the palette is the design, so a
   device in light mode gets the same lacquer as everyone else. */

:root {
  --paper: #182526;
  --lacquer: #132624;
  --porcelain: #eee9dd;
  --ink: #e9e4d8;
  --graphite: #c4bdae;
  --muted-ink: #9c978c;
  --brass: #b69a62;
  --oxblood: #c38994;
  --oxblood-rich: #744451;
  --oxblood-dark: #8a4f5d;
  --garnet: #744451;
  --malachite: #315149;
  --petrol-deep: #213a37;
  --petrol: #315149;
  --lapis: #3b4e67;
  /* Lapis raised until it reads as a line rather than a shadow. The ground
     version is a card fill and disappears at 2px on this paper; this is the one
     that carries the nonfiction rule on the taste chips. */
  --lapis-line: #7d97bd;
  --olive-jade: #505a43;
  --muted: #354944;
  --hairline: #c4bdae2e;
  --hairline-dark: #c4bdae57;
  --destructive: #d46868;

  --font-display: "Bodoni 72", "Bodoni MT", "Bodoni Moda", Didot, "Iowan Old Style", Georgia, serif;
  --font-text: "Source Serif 4", Charter, "Bitstream Charter", "Sitka Text", Georgia, serif;
  --font-ui: "IBM Plex Sans", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --sidebar-w: 258px;
  --pane-pad: 72px;
  --radius: 4px;

  --fast: 120ms;
  --ease: cubic-bezier(0, 0, .25, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Chrome hides a closed <details>' children with content-visibility rather than
   display:none, and an explicit display on a child escapes it — which hands the
   keyboard every control in a panel that is not on the screen. Stated once for
   every details in the app. */
details:not([open]) > *:not(summary) { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

svg.icon-defs { position: absolute; width: 0; height: 0; }

.ico {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

img { max-width: 100%; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--oxblood); text-decoration: none; }
a:hover { text-decoration: underline; }

/* One focus treatment, an oxblood ring, on every interactive element. */
:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--porcelain); color: var(--paper);
  padding: 10px 16px; font-family: var(--font-ui); font-size: 13px;
}
.skip:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------ the mark

   The identity is a beveled CR monogram, built from type rather than drawn: a
   garnet tile, a brass hairline, and the two letters set in the display face
   with the R dropped below the C the way a bookplate would cut it. */

.cr-mark { display: block; width: 34px; height: 34px; flex: none; }

/* ------------------------------------------------------------ shared type */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}

.label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

.display { font-family: var(--font-display); font-weight: 400; color: var(--porcelain); }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  padding: 9px 16px;
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  color: var(--ink);
  background: transparent;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover { border-color: var(--brass); }
.btn .ico { width: 15px; height: 15px; }

.btn-solid { background: var(--porcelain); color: #17211f; border-color: var(--porcelain); }
.btn-solid:hover { background: #fff; border-color: #fff; }

.btn-ghost { background: #ffffff08; }
.btn-block { width: 100%; justify-content: center; }

.btn-quiet { border-color: transparent; color: var(--graphite); padding: 9px 4px; }
.btn-quiet:hover { color: var(--porcelain); border-color: transparent; }

.btn[aria-pressed="true"] { border-color: var(--oxblood); color: var(--porcelain); }

/* ------------------------------------------------------------ sidebar */

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  width: var(--sidebar-w);
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 20px 20px;
  background: var(--lacquer);
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
}

.wordmark { display: flex; align-items: center; gap: 11px; color: inherit; }
.wordmark:hover { text-decoration: none; }
.wordmark-text { display: block; }
.wordmark-name {
  display: block;
  font-family: var(--font-display);
  font-size: 19px; line-height: 1.1; letter-spacing: -.01em;
  color: var(--porcelain);
}
.wordmark-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass); margin-top: 3px; max-width: 132px;
}

.sidenav { display: flex; flex-direction: column; gap: 1px; margin-top: 28px; }

.sidenav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  font-family: var(--font-ui); font-size: 13px;
  color: #93a8a0;
  border: 1px solid transparent;
  border-radius: 2px;
  text-align: left;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.sidenav-item .ico { width: 15px; height: 15px; color: #7f978e; }
.sidenav-item:hover { color: var(--porcelain); }
.sidenav-item:hover .ico { color: var(--brass); }
.sidenav-item[aria-current="page"] {
  background: var(--petrol-deep);
  color: var(--porcelain);
  font-weight: 500;
}
.sidenav-item[aria-current="page"] .ico { color: var(--porcelain); }

.nav-count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; font-style: normal;
  color: var(--muted-ink);
}
.nav-dot { margin-left: auto; color: var(--oxblood); font-style: normal; }

.sidebar-foot { display: flex; flex-direction: column; gap: 10px; }

.status-card {
  border: 1px solid var(--hairline);
  background: #1a302d;
  border-radius: var(--radius);
  padding: 12px 13px;
}
.status-card-top {
  display: flex; align-items: center; gap: 7px;
  margin: 0;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: var(--porcelain);
}
.status-card-top b { font-weight: inherit; }
.status-card-top em {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 8px; font-style: normal;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass);
}
.status-live {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--oxblood);
  box-shadow: 0 0 0 2px #c3899433;
}
.status-card-rule {
  margin: 9px 0 0;
  font-family: var(--font-text); font-size: 14px; color: var(--ink);
}
.status-card-when {
  margin: 4px 0 0;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--muted-ink);
}

.privacy {
  margin: 2px 0 0;
  font-family: var(--font-mono); font-size: 8.5px; line-height: 1.5;
  color: var(--muted-ink);
}

/* ------------------------------------------------------------ mobile chrome */

.topbar {
  position: sticky; top: 0; z-index: 40;
  max-width: 100vw;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 60px;
  padding: 0 16px;
  background: var(--lacquer);
  border-bottom: 1px solid var(--hairline);
}
.wordmark-mobile .wordmark-name { font-size: 20px; }
.wordmark-mobile .cr-mark { width: 32px; height: 32px; }

.menu-btn {
  display: grid; place-items: center;
  width: 44px; height: 40px;
  border: 1px solid var(--brass);
  border-radius: 2px;
  color: var(--porcelain);
}
.menu-btn .ico { width: 19px; height: 19px; }

.menu-panel {
  position: sticky; top: 60px; z-index: 39;
  background: var(--lacquer);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 16px 18px;
}
.menu-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
}
.menu-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 6px;
  font-family: var(--font-ui); font-size: 15px;
  color: var(--graphite);
  text-align: left;
}
.menu-item .ico { width: 17px; height: 17px; color: #7f978e; }
.menu-item[aria-current="page"] { color: var(--porcelain); }
.menu-item[aria-current="page"] .ico { color: var(--brass); }
.menu-signin { margin-top: 12px; min-height: 48px; justify-content: flex-start; padding-left: 14px; }

/* The bar is 66px of controls PLUS whatever the device reserves at the bottom,
   never 66px with the reservation taken out of it.
   `* { box-sizing: border-box }` means a padding-bottom of env(safe-area-inset-
   bottom) comes out of the declared height, so on a phone with a 34px home
   indicator the icons and labels had 32px to live in and sat right on top of the
   indicator. The height has to grow by the inset instead. */
.bottombar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  width: 100%; max-width: 100vw;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(68px + env(safe-area-inset-bottom));
  background: var(--lacquer);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  position: relative; min-width: 0;
  padding-bottom: 2px;
  font-family: var(--font-ui); font-size: 10px;
  color: #7f978e;
}
.bottom-item .ico { width: 19px; height: 19px; }
.bottom-item[aria-current="page"] { color: var(--porcelain); }
.bottom-item[aria-current="page"] .ico { color: var(--brass); }
.bottom-item[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 26%; right: 26%; height: 2px;
  background: var(--brass);
}
/* The count rides the icon in the bar rather than taking a line of its own; a
   second line under a 66px bar pushes the label off it. It appears only when
   there is something to count. */
.bottom-item .nav-count {
  position: absolute; top: 10px; left: 50%; margin: 0 0 0 6px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--oxblood-rich);
  color: var(--porcelain); font-size: 9px; line-height: 1;
}
.bottom-item .nav-count:empty, .bottom-item .nav-count[data-zero="true"] { display: none; }

/* ------------------------------------------------------------ the pane */

.pane {
  padding: 26px 16px calc(96px + env(safe-area-inset-bottom));
  min-width: 0;
}

.view { display: flex; flex-direction: column; gap: 34px; }

/* ------------------------------------------------------------ view header */

.view-head {
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
}
.view-head-main { min-width: 0; }
.view-head h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 8vw, 68px);
  line-height: .96; letter-spacing: -.025em;
  color: var(--porcelain);
  margin: 10px 0 0;
}
.view-lede {
  margin: 14px 0 0;
  font-size: 17px; line-height: 1.55;
  color: var(--graphite);
  max-width: 60ch;
}
/* Emphasis is a colour here, not a weight: the editorial serif has one weight
   worth setting and bolding it thickens the page rather than pointing at a word. */
.view-lede strong { font-weight: 400; color: var(--porcelain); }
.view-head-aside {
  display: flex; align-items: flex-end; gap: 14px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-ink);
}

/* ------------------------------------------------------------ spotlight

   The feature panel. A brass outer rule, an inset stepped border drawn as a
   pseudo-element, a clipped corner, and a diamond ornament — the four Deco
   devices the system allows, used once each and never repeated below. */

.spotlight {
  position: relative;
  display: grid;
  background: var(--garnet);
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  overflow: hidden;
}
.spotlight::after {
  content: "";
  position: absolute; inset: 9px;
  border: 1px solid #eee9dd2b;
  pointer-events: none;
}
.spotlight-body {
  position: relative; z-index: 1;
  padding: 34px 30px 30px;
  display: flex; flex-direction: column; gap: 18px;
  align-items: flex-start;
}
.spotlight-kicker { display: flex; align-items: baseline; gap: 9px; }
.spotlight-kicker .diamond { color: var(--brass); font-size: 11px; line-height: 1; }
.spotlight-kicker b {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 25px; color: var(--brass);
}
.spotlight-kicker .label { display: block; color: #d8c7a2; margin-top: 4px; }

.spotlight h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 10vw, 72px); line-height: .95; letter-spacing: -.03em;
  color: var(--porcelain);
  margin: -6px 0 0;
}
.spotlight-author {
  margin: 0;
  font-family: var(--font-text); font-style: italic; font-size: 21px;
  color: #f0e6e2;
}
.spotlight-blurb {
  margin: 0; font-size: 17px; line-height: 1.55; color: #f3ebe6;
  max-width: 46ch;
}
.spotlight-fit {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0; padding-top: 16px;
  border-top: 1px solid #eee9dd2b;
  width: 100%;
  font-size: 14.5px; line-height: 1.5; color: #e4d3d5;
}
.spotlight-fit .ico { width: 15px; height: 15px; color: var(--brass); margin-top: 3px; }
.spotlight-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.spotlight-cover {
  position: relative;
  background: var(--lapis);
  border-top: 1px solid #eee9dd1f;
  display: grid; place-items: center;
  padding: 30px;
}
.jacket-btn { display: block; width: 168px; }
.spotlight-cover .jacket-btn { width: 168px; }
.spotlight-score {
  position: absolute; right: 22px; top: 50%; transform: translateY(-46px);
  background: #1c302dee;
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  padding: 7px 11px;
  text-align: center;
}
.spotlight-score b {
  display: block;
  font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1;
  color: var(--porcelain);
}
.spotlight-score span {
  display: block; margin-top: 3px;
  font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass);
}
.folio {
  position: absolute; right: 16px; bottom: 12px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em;
  color: #eee9dd66;
}

/* Covers. Fixed portrait ratio, cover-fit, one restrained shadow. */
.jacket {
  aspect-ratio: 2 / 3;
  width: 100%;
  overflow: hidden;
  background: #101b1c;
  box-shadow: 0 6px 18px #0000005c;
  /* The drawn jacket is set in units of its own width: the same component has to
     read at 78px in a feed row and at 215px on a card. */
  container-type: inline-size;
}
.jacket img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The designed typographic fallback. Not an apology for a missing image — most
   books reviewed the week they publish have no jacket anywhere yet. */
.jacket-drawn {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 11% 10%;
  background: #ece5d5; color: #1d2b2c;
  font-family: var(--font-display);
  text-align: center;
}
.jacket-drawn[data-tone="dark"] { background: #22383a; color: #ede6d6; }
.jacket-drawn[data-tone="garnet"] { background: #6a3f4b; color: #f0e5e3; }
.jacket-drawn[data-tone="lapis"] { background: #37485f; color: #e8ecf3; }
.jacket-drawn[data-tone="olive"] { background: #4a533f; color: #edeade; }
.j-rule { border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; height: 2.5cqw; opacity: .8; }
.j-title { font-size: 12cqw; line-height: 1.15; letter-spacing: -.01em; padding: 7% 0; overflow-wrap: anywhere; }
.jacket-drawn[data-size="lg"] .j-title { font-size: 9.5cqw; }
.jacket-drawn[data-size="md"] .j-title { font-size: 7.5cqw; }
.jacket-drawn[data-size="sm"] .j-title { font-size: 5.5cqw; }
.j-author {
  font-family: var(--font-mono); font-size: 4cqw; letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase; margin-top: 5%; opacity: .85;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ taste strip */

.lean {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 18px; justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
}
.lean-copy { max-width: 44ch; }
.lean-copy p { margin: 7px 0 0; font-size: 15px; color: var(--graphite); }
.lean-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.lean-count {
  display: flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--graphite);
}
.lean-count b { color: var(--brass); font-size: 11px; }

/* ------------------------------------------------------------ section head */

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 5vw, 38px); line-height: 1.05; letter-spacing: -.02em;
  color: var(--porcelain);
  margin: 6px 0 0;
}
.section-head-link {
  font-family: var(--font-ui); font-size: 12px; color: var(--graphite);
  display: inline-flex; align-items: center; gap: 7px;
}
.section-head-link:hover { color: var(--porcelain); }
.section-head-link .ico { width: 14px; height: 14px; }

/* ------------------------------------------------------------ card shelf

   Alternating malachite, lapis, garnet and olive grounds establish the shelf
   rhythm; a shelf of one colour reads as a table. */

.shelf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--malachite);
  transition: border-color var(--fast) var(--ease);
}
.card[data-family="1"] { background: var(--lapis); }
.card[data-family="2"] { background: var(--garnet); }
.card[data-family="3"] { background: var(--olive-jade); }
.card:hover, .card:focus-within { border-color: var(--brass); }

.card-cover { position: relative; display: block; width: 100%; padding: 12px 12px 0; }
.card-cover .jacket { box-shadow: 0 4px 14px #0000004d; }
.card-score {
  position: absolute; top: 20px; right: 20px;
  background: #16232498;
  backdrop-filter: blur(2px);
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  padding: 3px 7px;
  font-family: var(--font-display); font-size: 14px; line-height: 1.2;
  color: var(--porcelain);
}
.card-score[data-state="none"] {
  font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--graphite);
}
.card-peek {
  position: absolute; left: 12px; right: 12px; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #101b1cdb;
  padding: 7px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
  color: var(--porcelain);
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
  pointer-events: none;
}
.card:hover .card-peek, .card:focus-within .card-peek { opacity: 1; }
.card-peek .ico { width: 13px; height: 13px; }

.card-body { display: flex; flex-direction: column; gap: 0; padding: 14px 14px 12px; flex: 1; }
/* The card's vertical rhythm, and nothing else may set a margin inside it.
   6 under the eyebrow, 3 between title and author because they are one unit,
   then an even 12 between the blocks that are separate thoughts. */
.card-body > * { margin: 0; }
.card-source { margin-bottom: 6px; }
.card-author { margin-top: 3px; }
.card-blurb { margin-top: 12px; }
.card-tags { margin-top: 12px; }
.card-why { margin-top: 12px; }
.card-source {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em;
  text-transform: uppercase; color: #ffffff8f;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-title {
  width: 100%;
  font-family: var(--font-display); font-weight: 400; font-size: 20px;
  line-height: 1.08; letter-spacing: -.015em;
  color: var(--porcelain);
  text-align: left;
}
.card-author { font-family: var(--font-text); font-style: italic; font-size: 14px; color: #ffffffc4; }
.card-tags { gap: 5px; }
.card-why {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.45; color: #ffffffcc;
}
.card-why .ico { width: 12px; height: 12px; margin-top: 3px; color: var(--brass); }
.card-foot {
  display: flex; justify-content: flex-end;
  padding: 0 10px 10px;
}
.card-bookmark {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #ffffffa8;
}
.card-bookmark:hover { color: var(--porcelain); border-color: var(--hairline-dark); }
.card-bookmark[aria-pressed="true"] { color: var(--brass); }
.card-bookmark[aria-pressed="true"] .ico { fill: currentColor; }

/* ------------------------------------------------------------ feed rows */

.rows { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }

.feed-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--malachite);
  transition: border-color var(--fast) var(--ease);
}
.feed-row[data-family="1"] { background: var(--lapis); }
.feed-row[data-family="2"] { background: var(--garnet); }
.feed-row[data-family="3"] { background: var(--olive-jade); }
.feed-row:hover, .feed-row:focus-within { border-color: var(--brass); }

/* Two-column compact anatomy below 1024px: the cover runs down the left, the
   score sits on one line beside the title block, and the two actions become
   full-width controls under everything. */
.row-cover { grid-column: 1; grid-row: 1; display: block; width: 100%; }
.row-score { grid-column: 1; grid-row: 2; min-width: 0; align-content: start; padding-top: 10px; }
.row-main { grid-column: 2; grid-row: 1 / span 2; min-width: 0; overflow-wrap: anywhere; }
.row-actions { grid-column: 1 / -1; grid-row: 3; }
.row-cover .jacket { box-shadow: 0 3px 10px #00000047; }

.row-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.row-num {
  font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1;
  color: var(--oxblood);
  white-space: nowrap;
}
.row-num small {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em;
  color: var(--muted-ink); margin-left: 3px;
}
.row-num[data-state="none"] { font-size: 18px; color: var(--graphite); }
.row-rec {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass);
}
.row-rec[data-state="thin"] { color: var(--muted-ink); }

.row-title {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--font-display); font-weight: 400;
  font-size: 27px; line-height: 1.06; letter-spacing: -.02em;
  color: var(--porcelain);
  text-align: left;
}
.row-title button { width: 100%; text-align: left; font: inherit; color: inherit; }
.row-title .row-author {
  font-family: var(--font-text); font-style: normal; font-size: 17px;
  color: #ffffffb8; margin-left: 9px;
}
.row-meta {
  margin: 7px 0 0; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .09em;
  text-transform: uppercase; color: #ffffff8a;
}
.row-blurb { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #ffffffd6; max-width: 62ch; }
.row-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: #ffffffb0; max-width: 62ch; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.tag {
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 3px 7px;
  font-family: var(--font-mono); font-size: 9px; color: #ffffffb0;
}
/* What the book is, as against what a critic said about it. Same chip, brass
   rule, so the classification reads as the standing fact it is. */
.tag[data-kind="form"] { border-color: #b69a6273; color: var(--brass); }
button.tag:hover { border-color: var(--brass); color: var(--porcelain); }

.row-why {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--oxblood);
}
.row-why:hover { color: var(--porcelain); }
.row-why .ico { width: 13px; height: 13px; }

.row-actions { display: flex; flex-direction: column; gap: 8px; }
.row-actions .btn { justify-content: center; min-height: 44px; }

/* ------------------------------------------------------------ toolbar */

.toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  position: relative;
}
.toolbar > * { min-width: 0; }

.search {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: #1d302e;
  padding: 0 13px;
  min-height: 44px;
}
.search .ico { color: var(--muted-ink); }
.search input {
  flex: 1 1 0; min-width: 0; width: 100%;
  background: none; border: 0; outline: none;
  font-family: var(--font-text); font-size: 14.5px; color: var(--ink);
  padding: 10px 0;
}
.search input::placeholder { color: var(--muted-ink); }

.tool-pair { display: contents; }
.tool-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 0 13px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: #1d302e;
  font-family: var(--font-ui); font-size: 13px;
  color: var(--ink);
}
.tool-btn:hover { border-color: var(--brass); }
.tool-btn .ico { width: 15px; height: 15px; color: var(--muted-ink); }

.menu-pop {
  position: absolute; z-index: 25; top: calc(100% + 6px); right: 0;
  min-width: 264px; max-width: min(340px, calc(100vw - 32px));
  background: #1a2d2b;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 14px 40px #00000073;
}
.menu-pop-group + .menu-pop-group { border-top: 1px solid var(--hairline); margin-top: 7px; padding-top: 7px; }
.menu-pop .label { display: block; padding: 6px 9px 4px; }
.menu-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 38px; padding: 6px 9px;
  font-family: var(--font-ui); font-size: 13px;
  color: var(--graphite);
  text-align: left;
  border-radius: 2px;
}
.menu-opt:hover { background: #ffffff0d; color: var(--porcelain); }
.menu-opt[aria-checked="true"] { color: var(--porcelain); }
.menu-opt .ico { width: 14px; height: 14px; color: var(--brass); opacity: 0; }
.menu-opt[aria-checked="true"] .ico { opacity: 1; }
.menu-pop-note {
  margin: 7px 9px 3px;
  font-size: 12px; line-height: 1.45; color: var(--muted-ink);
}

@media (max-width: 1023px) {
  /* Label above, the four strengths below it: at 320px a row of four plus a
     sentence does not fit, and shrinking the targets is not the trade to make. */
  .averse-row { flex-direction: column; align-items: stretch; gap: 9px; }
  .averse-picks { justify-content: flex-start; }
  .averse-pick { flex: 1 1 auto; min-height: 40px; text-align: center; justify-content: center; }

  .remind-actions .btn { flex: 1 1 auto; justify-content: center; }
  .band-row { grid-template-columns: 1fr 64px; }
  .band-was { grid-column: 2; text-align: right; }

  /* Every control a finger reaches for clears 44px on a touch screen. */
  .card-bookmark { width: 44px; height: 44px; }
  .dossier-close { width: 44px; height: 44px; }
  .card-foot { padding: 0 6px 6px; }
}

@media (max-width: 767px) {
  /* The coverage line has to stay one line under the label; at 390px that means
     a smaller numeral rather than a second row per figure. */

  .tool-btn { padding: 0 12px; }
  .tool-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tool-btn[data-menu="sort"]::before {
    content: ""; width: 15px; height: 15px; flex: none;
    background: currentColor; opacity: .75;
    -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v18M4 6l3-3 3 3M17 21V3M14 18l3 3 3-3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v18M4 6l3-3 3 3M17 21V3M14 18l3 3 3-3'/%3E%3C/svg%3E");
  }
}


/* ------------------------------------------------------------ panels */

.panel {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #263f3b;
  padding: 30px 22px;
}
.panel-empty { text-align: center; }
.panel-empty .ico { width: 22px; height: 22px; color: var(--brass); }
.panel-empty h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 27px;
  color: var(--porcelain);
  margin: 16px 0 0;
}
.panel-empty p { margin: 9px auto 0; font-size: 14.5px; color: var(--graphite); max-width: 42ch; }
.panel-empty .btn { margin-top: 20px; }

/* ------------------------------------------------------------ taste view */

.dash {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--brass);
  border-radius: var(--radius);
  background: var(--petrol-deep);
  overflow: hidden;
}
.dash-side { padding: 26px 24px; }
.dash-side + .dash-side { border-top: 1px solid var(--hairline); }
.dash-calibrate { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.calibrate-dial {
  display: grid; place-items: center;
  width: 78px; height: 78px; flex: none;
  border: 1px solid var(--hairline-dark);
  border-radius: 50%;
  font-family: var(--font-display); font-size: 24px;
  color: var(--porcelain);
}
.calibrate-dial small { font-family: var(--font-mono); font-size: 9px; color: var(--muted-ink); }
.dash-side h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 25px; line-height: 1.14; letter-spacing: -.015em;
  color: var(--porcelain);
  margin: 10px 0 0;
  max-width: 22ch;
}
.dash-side p { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--graphite); max-width: 42ch; }
.dash-side .btn { margin-top: 18px; }
.dash-signal-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(96px, 1fr) 2fr auto; gap: 12px; align-items: center; }
.bar-name { font-size: 13px; color: var(--graphite); }
.bar-track { height: 2px; background: var(--hairline); }
.bar-fill { display: block; height: 100%; background: var(--oxblood); }
.bar-val { font-family: var(--font-mono); font-size: 10px; color: var(--muted-ink); }

.steps { display: grid; grid-template-columns: 1fr; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.step { padding: 20px 18px; background: var(--petrol-deep); border-top: 1px solid var(--hairline); }
.step:first-child { border-top: 0; }
.step-n { font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; color: var(--brass); }
.step h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 19px;
  color: var(--porcelain); margin: 22px 0 0;
}
.step p { margin: 9px 0 0; font-size: 13px; line-height: 1.5; color: var(--graphite); }

/* ------------------------------------------------------------ profile view */

.profile-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }

.weights {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--petrol-deep);
  padding: 24px 22px;
}
.weights-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.weights-head h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 27px; letter-spacing: -.02em;
  color: var(--porcelain); margin: 10px 0 0;
}
.weights-total { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-ink); }
.weights-total[data-over="true"] { color: var(--destructive); }

.weight-row {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}
.weight-row:last-child { border-bottom: 0; }
.weight-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--graphite); }
.weight-label b { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--porcelain); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--oxblood); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--oxblood); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; margin-top: -5px;
  border-radius: 50%; background: var(--paper);
  border: 1px solid var(--oxblood);
}
input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--oxblood);
}

.summary-rail {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--garnet);
  padding: 22px 20px;
}
.summary-threshold { display: flex; align-items: baseline; gap: 10px; }
.summary-threshold b {
  font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1;
  color: var(--brass);
}
.summary-rail hr { border: 0; border-top: 1px solid #eee9dd2b; margin: 16px 0; }
.summary-rail h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.2;
  color: var(--porcelain); margin: 0;
}
.summary-rail p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #f0e2e2; }

.guardrails {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--petrol-deep);
  padding: 24px 22px;
}
.guardrail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.guardrail-row:last-child { border-bottom: 0; }
.guardrail-row span { font-size: 14px; line-height: 1.45; color: var(--graphite); }

.switch {
  position: relative; flex: none;
  width: 34px; height: 18px;
  border-radius: 9px;
  background: #ffffff1f;
  border: 1px solid var(--hairline-dark);
  transition: background var(--fast) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--graphite);
  transition: transform var(--fast) var(--ease);
}
.switch[aria-checked="true"] { background: var(--oxblood); border-color: var(--oxblood); }
.switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--paper); }

.profile-extras {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.profile-extras p {
  margin: 0; flex: 1; min-width: 220px;
  font-family: var(--font-mono); font-size: 9px; line-height: 1.6;
  color: var(--muted-ink);
}

/* ------------------------------------------------------------ onboarding

   Three surfaces for one fact: every score here is ranked against a taste
   profile, and until a reader builds one it is somebody else's. Asked once in a
   dialog, said again quietly in a band on a later visit, and after that carried
   as a mark on the control that fixes it. */

.at-risk { margin-left: 6px; font-style: normal; color: var(--oxblood); }

.remind {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
  padding: 15px 18px;
  border: 1px solid var(--hairline-dark);
  border-left: 2px solid var(--brass);
  border-radius: var(--radius);
  background: var(--petrol-deep);
}
.remind-text { margin: 0; flex: 1 1 22rem; min-width: 0; font-size: 14.5px; line-height: 1.5; color: var(--graphite); }
.remind-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.firstrun {
  width: min(440px, calc(100vw - 32px));
  margin: auto;
  padding: 30px 28px 26px;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  background: var(--lacquer);
  color: var(--ink);
  box-shadow: 0 24px 60px #00000085;
}
.firstrun::backdrop { background: #0b1314d9; }
.firstrun h2 {
  margin: 12px 0 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 31px; line-height: 1.08; letter-spacing: -.025em;
  color: var(--porcelain);
}
.firstrun-body { margin: 14px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--graphite); }
.firstrun-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.firstrun-actions .btn { justify-content: center; min-height: 44px; text-align: center; }

/* ------------------------------------------------------------ the builder */

.start { display: flex; flex-direction: column; gap: 26px; }
.start-block {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--petrol-deep);
  padding: 24px 22px;
}
.start-block h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 27px; line-height: 1.1; letter-spacing: -.02em;
  color: var(--porcelain);
  margin: 10px 0 0;
}
.start-block > p { margin: 11px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--graphite); max-width: 62ch; }
.start-steps { margin: 14px 0 0; padding-left: 1.1em; color: var(--graphite); font-size: 14.5px; line-height: 1.6; }
.start-steps li { margin-top: 5px; }
.start-steps strong { color: var(--porcelain); font-weight: 400; }

.start-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Eight short lists rather than one long one. The heading is a rule and a label,
   quiet enough that the chips stay the thing being read. */
.chip-group { margin-top: 20px; }
.chip-group:first-of-type { margin-top: 16px; }
.chip-group-head {
  display: block;
  margin: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--hairline);
  color: var(--brass);
}
.start-chip {
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  padding: 9px 13px;
  min-height: 44px;
  font-family: var(--font-ui); font-size: 13px;
  color: var(--graphite);
  text-align: left;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.start-chip:hover { border-color: var(--brass); color: var(--porcelain); }
.start-chip[aria-pressed="true"] { background: var(--oxblood-rich); border-color: var(--oxblood); color: var(--porcelain); }
.start-chip[data-which="disliked"][aria-pressed="true"] { background: var(--muted); border-color: var(--graphite); }
.start-reads { display: flex; flex-direction: column; gap: 3px; flex: 1 1 12rem; }
.start-reads .reads-note { font-family: var(--font-text); font-size: 12.5px; color: var(--muted-ink); }
.start-reads[aria-pressed="true"] .reads-note { color: #e6d3d6; }

.start-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.start-foot p {
  display: flex; align-items: center; gap: 7px;
  margin: 0; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-ink);
}
.start-foot p .ico { width: 13px; height: 13px; }

/* The moment it is enough. A rule turns brass and the count becomes a sentence,
   so a reader knows they can stop without having to count for themselves. */
.start-foot[data-ready="true"] { border-top-color: var(--brass); }
.start-foot[data-ready="true"] p { color: var(--brass); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--hairline-dark); }
.btn-solid[disabled]:hover { background: var(--porcelain); border-color: var(--porcelain); }

/* ------------------------------------------------------------ band scores

   What a band earns, under the dimension whose weight it is scored against.
   Closed on arrival: seven dimensions carry forty-six bands between them, and a
   screen that opens as forty-six number fields is a spreadsheet. */

.bands { margin-top: 10px; }
.bands > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-ink);
  cursor: pointer;
}
.bands > summary::-webkit-details-marker { display: none; }
.bands > summary::before { content: "+"; color: var(--brass); }
.bands[open] > summary::before { content: "–"; }
.bands > summary:hover { color: var(--porcelain); }

.band-row {
  display: grid; grid-template-columns: 1fr 60px 62px; gap: 10px; align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
}
.band-row:last-child { border-bottom: 0; }
.band-row label { font-size: 13px; line-height: 1.4; color: var(--graphite); }
.band-note { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--muted-ink); margin-top: 2px; }
.band-was { font-family: var(--font-mono); font-size: 9px; color: var(--oxblood); }
input[type="number"] {
  width: 100%; min-height: 34px; padding: 4px 8px;
  border: 1px solid var(--hairline-dark); border-radius: 2px;
  background: #1d302e; color: var(--ink);
  font-family: var(--font-mono); font-size: 13px;
}

.penalty-row .band-note { display: inline; margin-left: 6px; }

/* An aversion has a strength, not a switch: mild and strong take points off, and
   never takes the book out. Four states in a row, so the difference between "I
   would rather not" and "I will not" is one tap apart and visibly distinct. */
.averse-row { align-items: center; gap: 12px; }
.averse-picks { display: flex; flex-wrap: wrap; gap: 4px; flex: none; }
.averse-pick {
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 5px 9px;
  min-height: 34px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-ink);
}
.averse-pick:hover { border-color: var(--brass); color: var(--porcelain); }
.averse-pick[aria-pressed="true"] { color: var(--porcelain); border-color: var(--graphite); background: #ffffff12; }
.averse-pick[data-strength="strong"][aria-pressed="true"] { background: var(--oxblood-rich); border-color: var(--oxblood); }
.averse-pick[data-strength="never"][aria-pressed="true"] { background: var(--destructive); border-color: var(--destructive); color: #1b1112; }

/* ------------------------------------------------------------ dossier */

.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: #0b1314cc;
  backdrop-filter: blur(2px);
}

.dossier {
  position: fixed; z-index: 51;
  inset: 0;
  background: var(--petrol-deep);
  border: 1px solid var(--hairline-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Full-screen, so the last thing in it — Save and Pass — would otherwise end
     underneath the home indicator. */
  padding: 22px 18px calc(40px + env(safe-area-inset-bottom));
}
body.is-locked { overflow: hidden; }

.dossier-close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  color: var(--graphite);
  background: #17272599;
}
.dossier-close:hover { color: var(--porcelain); border-color: var(--brass); }

.dossier-head { display: grid; grid-template-columns: 108px 1fr; gap: 18px; align-items: start; padding-right: 44px; }
.dossier-head .jacket { box-shadow: 0 8px 22px #00000059; }
.dossier-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.dossier-score b {
  font-family: var(--font-display); font-weight: 400; font-size: 27px; line-height: 1;
  color: var(--oxblood);
}
.dossier-score b small { font-family: var(--font-mono); font-size: 8px; color: var(--muted-ink); margin-left: 3px; }
.dossier-state {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass);
}
.dossier-state[data-state="none"] { color: var(--muted-ink); }
.dossier h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 6vw, 46px); line-height: 1.02; letter-spacing: -.025em;
  color: var(--porcelain);
  margin: 8px 0 0;
}
.dossier-author { margin: 6px 0 0; font-family: var(--font-text); font-style: italic; font-size: 19px; color: #ffffffcc; }
.dossier-facts {
  margin: 12px 0 0;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted-ink);
}
.dossier-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.dossier-actions .btn { justify-content: center; min-height: 44px; }

.dossier-block { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--hairline); }
.dossier-block h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 23px; line-height: 1.2; letter-spacing: -.015em;
  color: var(--porcelain);
  margin: 12px 0 0;
  max-width: 34ch;
}
.dossier-block p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--graphite); }
.dossier-block .bars { margin-top: 18px; }
.dossier-head-note {
  float: right;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-ink);
}

.quote {
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 1px solid var(--brass);
  font-family: var(--font-text); font-style: italic; font-size: 15.5px; line-height: 1.55;
  color: var(--ink);
}
.quote-source {
  display: block; margin-top: 8px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; font-style: normal; color: var(--muted-ink);
}

.buylinks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.buylink {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--ink);
}
.buylink:hover { border-color: var(--brass); text-decoration: none; }
.buylink b { font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; }
.buylink span { font-family: var(--font-mono); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-ink); }

/* ------------------------------------------------------------ colophon */

.colophon {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: 46px; padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.colophon-mark { display: flex; align-items: center; gap: 11px; }
.colophon-mark .cr-mark { width: 28px; height: 28px; }
.colophon-mark strong {
  display: block;
  font-family: var(--font-display); font-weight: 400; font-size: 15px;
  color: var(--porcelain);
}
.colophon-mark em { display: block; font-size: 12.5px; font-style: normal; color: var(--muted-ink); }
.colophon-note { margin: 0; font-size: 12.5px; color: var(--muted-ink); max-width: 46ch; }

/* ------------------------------------------------------------ toast */

.toast {
  position: fixed; z-index: 55;
  left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom));
  margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--lacquer);
  border: 1px solid var(--brass);
  border-radius: 2px;
  padding: 12px 15px;
  font-family: var(--font-ui); font-size: 13px;
  color: var(--porcelain);
  box-shadow: 0 14px 34px #00000080;
}
.toast .btn { padding: 4px 10px; font-size: 12px; }

/* ------------------------------------------------------------ loading */

.sk { background: #ffffff0d; border-radius: 2px; height: 12px; }
.skeleton { display: grid; grid-template-columns: 58px 1fr; gap: 14px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius); margin-bottom: 10px; }
.skeleton .sk-cover { aspect-ratio: 2/3; background: #ffffff0d; }
.skeleton .sk + .sk { margin-top: 9px; }
.w40 { width: 40%; } .w70 { width: 70%; } .w90 { width: 90%; }

/* ============================================================ 768px and up */

@media (min-width: 768px) {
  .pane { padding: 30px 32px 96px; }
  .shelf { grid-template-columns: 1fr 1fr; }
  .toolbar { grid-template-columns: 1fr 190px 150px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { border-top: 0; border-left: 1px solid var(--hairline); }
  .step:first-child { border-left: 0; }
  .view-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .view-head-aside { flex: none; padding-bottom: 4px; }
  .dossier {
    inset: 24px 24px 24px auto;
    width: min(620px, calc(100vw - 48px));
    border-radius: var(--radius);
    padding: 30px 32px 44px;
  }
  .buylinks { grid-template-columns: repeat(4, 1fr); }
  .dossier-actions { grid-template-columns: 1fr 1fr; }
  .toast { left: auto; right: 24px; width: min(420px, calc(100vw - 48px)); bottom: 86px; }
}

/* ============================================================ 1024px and up */

@media (min-width: 1024px) {
  .sidebar { display: flex; }
  .topbar, .menu-panel, .bottombar { display: none !important; }

  .pane {
    padding: 40px var(--pane-pad) 80px;
    margin-left: var(--sidebar-w);
    max-width: calc(1038px + var(--pane-pad) * 2);
  }
  .toast { bottom: 24px; }

  .view { gap: 44px; }
  .view-head h1 { font-size: 68px; }

  .spotlight { grid-template-columns: minmax(0, 715px) 321px; min-height: 620px; }
  .spotlight-body { padding: 52px 48px 44px; justify-content: center; gap: 20px; }
  .spotlight-cover { border-top: 0; border-left: 1px solid #eee9dd1f; }
  /* The clipped corner. One corner, on the feature surface only. */
  .spotlight { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }

  .shelf { grid-template-columns: repeat(4, 1fr); }

  .feed-row {
    grid-template-columns: 78px 92px 1fr 104px;
    gap: 24px;
    padding: 22px 20px;
    align-items: start;
  }
  .row-cover { grid-column: 1; grid-row: 1; }
  .row-score { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 4px; }
  .row-main { grid-column: 3; grid-row: 1; }
  .row-actions { grid-column: 4; grid-row: 1; align-items: stretch; }

  .dash { grid-template-columns: 55fr 45fr; }
  .dash-side + .dash-side { border-top: 0; border-left: 1px solid var(--hairline); }
  .dash-side { padding: 34px 30px; }

  .profile-grid { grid-template-columns: 728px 290px; }
  .profile-guardrails { grid-column: 1 / -1; }

  .dossier {
    inset: 40px auto 40px 50%;
    transform: translateX(-50%);
    width: min(660px, calc(100vw - 120px));
  }
}

@media (min-width: 1440px) {
  .pane { margin-left: var(--sidebar-w); }
}


/* The weekly roundup card in the profile rail. It is mostly prose, because most
   of what it has to say is why it cannot run here yet. */
.roundup h3 { margin: 0 0 .4rem; }
.roundup .btn { margin-top: .7rem; width: 100%; }
.roundup[data-state="on"] h3::after {
  content: "";
  display: inline-block;
  width: .42rem; height: .42rem;
  margin-left: .45rem;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--brass);
}


/* ------------------------------------------- following a tag, and the answers */

.tag-banner {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px;
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  background: #b69a621a;
}
.tag-banner h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1;
  color: var(--porcelain); margin: 4px 0 0;
}
.tag-banner-count { margin: 6px 0 0; font-size: 13.5px; color: var(--graphite); }
.tag-banner-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* A tag now goes somewhere, so it has to look like it does. The cursor and the
   hover were already right for a button; what was missing is that the resting
   state read as a label. */
button.tag { cursor: pointer; }
.answers-note { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--graphite); max-width: 62ch; }
.answers-tags { margin-top: 14px; gap: 8px; }
.answers-tags .tag { padding-right: 8px; }
.answers-tags .tag[data-state="disliked"] { border-color: #c3899466; color: var(--oxblood); }
.tag-x { margin-left: 7px; opacity: .55; font-size: 15px; line-height: 1; }
.answers-tags .tag:hover .tag-x { opacity: 1; }

/* --------------------------------------------------------- density on a phone */

/* The row carried a desktop rhythm onto a 390px screen: full-bleed padding, a
   blurb at full length, four tags wrapping onto two lines and two stacked
   full-width buttons. Nine or ten vertical centimetres for one book means a
   thumb scrolls past three books a screen and none of them look distinct. */
@media (max-width: 767px) {
  .feed-row { padding: 13px; gap: 12px; grid-template-columns: 52px 1fr; }
  .rows { gap: 12px; }
  .row-title { font-size: 24px; line-height: 1.12; }
  .row-author { font-size: 15px; }
  .row-meta { font-size: 11.5px; letter-spacing: .04em; }
  .row-blurb {
    margin-top: 8px; font-size: 14px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .row-num { font-size: 26px; }
  .row-score { padding-top: 8px; gap: 3px 8px; }

  /* One row of tags, not two. The rest are still on the book's own page, and a
     tag strip that wraps is a strip nobody reads to the end of. */
  .tags { margin-top: 9px; gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tags::-webkit-scrollbar { display: none; }
  .tags .tag { flex: none; }
  .answers-tags { flex-wrap: wrap; overflow: visible; }

  /* Save and Pass side by side. Two stacked full-width buttons is 100px of
     furniture under every single book. */
  .row-actions { flex-direction: row; gap: 8px; margin-top: 12px; }
  .row-actions .btn { flex: 1; min-height: 42px; }
  .row-why { margin-top: 10px; }

  .tag-banner { padding: 12px 13px; }
  .tag-banner h2 { font-size: 22px; }
}

/* The masthead of a view, on a phone. A five-line lede above a methodology strip
   above a toolbar is a full screen of preamble before the first book, every time
   the feed is opened. The heading stays whole — it is the one thing that says
   where you are — and the sentence under it is trimmed to its first two lines,
   which is where it stops saying anything a returning reader needs. */
@media (max-width: 767px) {
  .view-head h1 { font-size: 38px; line-height: 1.04; }
  .view-head .view-lede {
    font-size: 15px; line-height: 1.45; margin-top: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .view-head { padding-bottom: 12px; }
  .view-head-aside, .view-head .aside { font-size: 11px; }
}

/* The score column, on a phone, and why it moved.
   Below 1024 the layout puts the number under the cover — in a column 52px wide.
   The number fits. "RECOMMENDED" does not, and neither does "FROM THE AUTHOR'S
   ACCOUNT", so the badges spilled sideways across the title and stacked into
   four ragged lines underneath. The column is the wrong container for a label
   whose length is set by an English sentence.
   So on a phone the score and its badges become one full-width strip under the
   cover and the title, where they have the whole row to sit on. */
@media (max-width: 767px) {
  /* The cover runs down the left across both text rows; the score leads the text
     column and the title follows it. Putting the strip last instead pushed the
     number below the tags, which buried the one thing the row exists to say. */
  .row-cover { grid-column: 1; grid-row: 1 / span 2; }
  .row-score {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: row; flex-wrap: wrap;
    align-items: baseline; gap: 3px 9px;
    padding-top: 0; min-width: 0;
  }
  .row-main { grid-column: 2; grid-row: 2; }
  .row-actions { grid-column: 1 / -1; grid-row: 3; }
  /* The badges were sized to a narrow column and wrapped mid-phrase. On one
     line they can say what they are without breaking. */
  .row-rec { white-space: nowrap; font-size: 10.5px; }
  .row-num { font-size: 27px; }
}

/* "/ 10" sat against the numeral's tail at the display face's tightest size. */
@media (max-width: 767px) { .row-num small { margin-left: 3px; } }

/* ------------------------------------------------- the app before anyone owns it */

.blank-slate { margin-top: 18px; }
.blank-slate h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1.15;
  color: var(--porcelain); margin: 8px 0 0;
}
.blank-list {
  margin: 16px 0 0; padding: 0; list-style: none;
  display: grid; gap: 11px; max-width: 62ch;
}
.blank-list li {
  position: relative; padding-left: 20px;
  font-size: 15px; line-height: 1.55; color: #ffffffd6;
}
.blank-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 1px; background: var(--brass);
}
.blank-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.blank-note { margin-top: 14px; max-width: 62ch; }

/* The note above the two lists that stops a chronological order being read as a
   recommendation. */
.unranked {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: #ffffff08;
}
.unranked-text { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--graphite); max-width: 68ch; }
.unranked .btn { flex: none; }

@media (max-width: 767px) {
  .blank-slate h2 { font-size: 21px; }
  .blank-acts .btn { flex: 1 1 100%; justify-content: center; }
  .unranked { padding: 12px 13px; }
  .unranked .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------ Search */

/* The field is the page, so it is set at display size rather than as a control
   in a toolbar. Everything under it explains what was understood; nothing under
   it decorates. */
.asksearch { margin-top: 20px; }
.asksearch-field {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  background: #1d302e;
  padding: 0 16px;
  min-height: 60px;
  transition: border-color var(--fast) var(--ease);
}
.asksearch-field:focus-within { border-color: var(--brass); }
.asksearch-field .ico { flex: none; width: 19px; height: 19px; color: var(--brass); }
.asksearch-field input {
  flex: 1 1 0; min-width: 0; width: 100%;
  background: none; border: 0; outline: none;
  font-family: var(--font-text); font-size: 19px; line-height: 1.3; color: var(--ink);
  padding: 14px 0;
}
.asksearch-field input::placeholder { color: var(--muted-ink); }
.asksearch-field input::-webkit-search-cancel-button { display: none; }
.asksearch-clear {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 2px;
  color: var(--muted-ink);
}
.asksearch-clear:hover { color: var(--porcelain); }
.asksearch-note {
  margin: 9px 0 0;
  font-family: var(--font-ui); font-size: 12.5px; color: var(--muted-ink);
}
.asksearch-note em { font-style: italic; color: var(--graphite); }

.asksearch-eg { margin-top: 26px; }
.asksearch-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.asksearch-chips .chip {
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  padding: 10px 14px;
  min-height: 44px;
  font-family: var(--font-text); font-size: 14px;
  color: var(--graphite);
  text-align: left;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.asksearch-chips .chip:hover { border-color: var(--brass); color: var(--porcelain); }
.asksearch-limit {
  margin: 20px 0 0; max-width: 68ch;
  font-size: 13.5px; line-height: 1.55; color: var(--muted-ink);
}

/* What the query was read as. Three kinds of thing, told apart by the rule down
   their left edge rather than by three background colours: a band the scorer
   assigned, a requirement, and a word taken literally. */
.readback {
  margin-top: 22px; padding: 15px 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: #ffffff08;
}
.rb-items { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.rb-item {
  display: inline-flex; align-items: center;
  padding: 5px 10px 5px 9px;
  border: 1px solid var(--hairline-dark);
  border-left: 2px solid var(--graphite);
  border-radius: 0 2px 2px 0;
  font-family: var(--font-ui); font-size: 12px; color: var(--ink);
}
.rb-item[data-kind="tag"] { border-left-color: var(--brass); }
.rb-item[data-kind="facet"] { border-left-color: var(--oxblood); }
.rb-item[data-kind="ref"] { border-left-color: var(--oxblood); }
.rb-item[data-kind="word"] { border-left-color: var(--graphite); font-family: var(--font-mono); font-size: 11px; }
.rb-item b { font-weight: 400; color: var(--porcelain); }
.readback-note { margin: 11px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted-ink); max-width: 68ch; }
.readback[data-state="empty"] p:last-child { margin: 8px 0 0; font-size: 13.5px; color: var(--graphite); max-width: 68ch; }

/* Why this row is in this answer. Sits under the blurb because it is a fact
   about the search, not about the book. */
.row-match {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 9px 0 0;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.45; color: var(--graphite);
}
.row-match .ico { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--brass); }

@media (max-width: 767px) {
  .asksearch-field { min-height: 54px; padding: 0 13px; }
  .asksearch-field input { font-size: 17px; padding: 12px 0; }
  .asksearch-chips .chip { width: 100%; }
  .readback { padding: 13px; }
}

/* A card says what the book is. Before this it carried a title, an author and
   "Fiction, probably", which is the one fact the cover already gives. */
.card-blurb {
  font-family: var(--font-text); font-size: 13.5px; line-height: 1.5;
  color: var(--graphite);
}

/* For you offers no sort, so its toolbar is a field and one button rather than
   a field and two. */
.toolbar[data-nosort="true"] { grid-template-columns: 1fr auto; }
.tool-count {
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 2px;
  display: inline-grid; place-items: center;
  border-radius: 9px;
  background: var(--oxblood-rich);
  color: var(--porcelain);
  font-family: var(--font-mono); font-size: 9.5px; font-style: normal; line-height: 1;
}

/* Fiction and nonfiction chips, told apart on the taste screen. The rule is on
   the left edge rather than in the fill: a chip is a control with a pressed
   state, and colouring the whole thing would put the two meanings in the same
   channel. The word is in every chip's accessible name as well, because state
   is never colour alone. */
.start-chip[data-reads] { border-left-width: 2px; }
.start-chip[data-reads="fiction"] { border-left-color: var(--oxblood); }
.start-chip[data-reads="nonfiction"] { border-left-color: var(--lapis-line); }
.start-chip[data-reads="both"] { border-left-color: var(--hairline-dark); }

.chip-key {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 12px 0 0;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-ink);
}
.chip-key-item { display: inline-flex; align-items: center; gap: 6px; }
.chip-key-item::before {
  content: ""; width: 2px; height: 12px; background: var(--hairline-dark);
}
.chip-key-item[data-reads="fiction"]::before { background: var(--oxblood); }
.chip-key-item[data-reads="nonfiction"]::before { background: var(--lapis-line); }

/* The search field while it is working. The spinner replaces the magnifier
   rather than sitting beside it, so nothing moves when it appears. */
.asksearch-spin {
  flex: none; width: 19px; height: 19px;
  border: 2px solid var(--hairline-dark);
  border-top-color: var(--brass);
  border-radius: 50%;
  animation: ask-spin 620ms linear infinite;
}
@keyframes ask-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .asksearch-spin { animation: none; border-top-color: var(--brass); opacity: .7; }
}
.asksearch-field[data-busy="true"] { border-color: var(--brass); }

/* A tag the search asked for. Brass, the same mark the readback panel uses for a
   band, and it carries the fact in its accessible name as well. */
.tag[data-hit="true"] {
  border-color: var(--brass);
  color: var(--porcelain);
}

/* Pass, on a card. Same shape as the bookmark so the pair reads as one control
   with two answers, and quieter, because refusing a book should not be the
   loudest thing on it. Pressed, it is the way back: the archive keeps passed
   books, so the button has to say which of its two jobs it is doing. */
.card-pass { margin-right: 6px; }
.card-pass:hover { color: var(--destructive); border-color: var(--destructive); }
.card-pass .ico { width: 15px; height: 15px; }
.card-pass[aria-pressed="true"] { color: var(--destructive); border-color: var(--hairline-dark); }
.card-pass[aria-pressed="true"]:hover { color: var(--porcelain); }

/* The reserve slot. Set apart with a brass rule rather than a colour, because
   it is not a fifth recommendation and should not read as one. */
.reserve {
  margin-top: 28px;
  border-top: 1px solid var(--brass);
  padding-top: 18px;
}
.reserve-note {
  margin: 4px 0 14px;
  max-width: 68ch;
  font-size: 13.5px; line-height: 1.55; color: var(--graphite);
}

/* The more-button when an observer is pressing it for us. It stays in the
   document for the keyboard and the screen reader, which an infinite list
   otherwise strands, and stops taking space on screen. */
.js-more[data-auto="true"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.js-more[data-auto="true"]:focus-visible {
  position: static;
  width: auto; height: auto; margin: 14px 0 0; padding: 0 18px;
  clip: auto; white-space: normal;
}

/* The shelf stays one column on a phone.
   Two columns were tried and reverted. They fit more books on a screen and they
   made the shelf look untidy, because a card is as tall as its own title, blurb
   and tags and no two are the same length — so a two-up grid is a row of ragged
   bottoms, and the eye reads the raggedness before it reads the books. A single
   column has nothing to be ragged against. */

/* A tag inside a sentence. The same control as the chips below it — following
   one filters to it — set to read as part of the line rather than as a chip
   dropped into the middle of it. */
.tag-inline {
  font: inherit; color: var(--porcelain);
  padding: 0; border: 0; background: none;
  border-bottom: 1px solid var(--brass);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tag-inline:hover { color: var(--brass); }
.card-why .tag-inline, .spotlight-fit .tag-inline { line-height: inherit; }

/* ------------------------------------------------- the week's pick */

/* Stuck under the header rather than filling the top of every visit. It is the
   one thing on the page that should read the same on Friday as it did on
   Tuesday, so it is also the one thing that does not need the room. */
/* The wrapper is what sticks, not the strip inside it. A sticky element can
   only travel within its own parent's box, and a parent that is exactly as tall
   as its one child has nowhere to travel — so the strip scrolled away with the
   page it was supposed to sit above. */
#weekpick-slot {
  position: sticky; top: 60px; z-index: 38;
  margin-bottom: 18px;
}
.weekpick {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: var(--garnet);
  border-bottom: 1px solid var(--brass);
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.weekpick:hover { background: var(--oxblood-dark); }
.weekpick-cover { flex: none; width: 34px; }
.weekpick-cover .jacket { box-shadow: 0 2px 6px #0000004d; }
.weekpick-body { min-width: 0; flex: 1 1 auto; display: block; }
.weekpick-eyebrow {
  display: block;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #f0dfe1b8;
}
.weekpick-title {
  display: block; margin-top: 2px;
  font-family: var(--font-display); font-size: 15px; line-height: 1.15;
  color: var(--porcelain);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.weekpick-title em { font-family: var(--font-text); font-style: italic; font-size: 13px; color: #f0dfe1c4; }
.weekpick-score {
  flex: none;
  font-family: var(--font-display); font-size: 17px; color: var(--porcelain);
}
.weekpick-go { flex: none; display: grid; place-items: center; color: #f0dfe1a8; }
.weekpick-go .ico { width: 15px; height: 15px; }

/* On desktop there is no sticky header above it, so it starts at the top. */
@media (min-width: 1024px) {
  #weekpick-slot { top: 0; }
  .weekpick { padding: 10px 72px; }
}

/* The one line under a section heading that says how the list beneath it is
   ordered, where the order is an argument rather than an obvious default. */
.section-note {
  margin: 6px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--muted-ink);
  max-width: 62ch;
}