/* Homepage — editorial "index" treatment. Scoped under .hp so none of this
   leaks into the rest of the design system. */

/* ── Staggered load reveal ───────────────────────────────────────────────
   One orchestrated entrance beats scattered micro-interactions. Elements
   carry --d for their delay. */
@keyframes hp-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.hp .rise {
  opacity: 0;
  animation: hp-rise .7s cubic-bezier(.22,.68,.36,1) forwards;
  animation-delay: var(--d, 0ms);
}

/* ── The ledger: mono spec rows, like the masthead of a technical journal ── */
.hp .ledger { border-top: 1px dashed var(--color-border) }
.hp .ledger div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--color-border);
}
.hp .ledger dt {
  font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink-soft);
}
.hp .ledger dd {
  font: 700 clamp(20px, 2.2vw, 28px)/1 "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums; color: var(--color-ink); margin: 0;
}

/* ── Grind spectrum band ─────────────────────────────────────────────────
   The site's signature: every brew method placed on one micron scale. */
.hp .spectrum { position: relative; height: 15px; border-radius: 99px; overflow: hidden;
  background: linear-gradient(90deg, #3b2419 0%, #6b4630 18%, #a2724b 45%, #c99a6a 72%, #e6c9a4 100%); }
.hp .spectrum::after { /* grain, so it reads as ground coffee not a gradient swatch */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.28) .6px, transparent .7px);
  background-size: 5px 5px; mix-blend-mode: overlay;
}
.hp .scale { position: relative; height: 132px; margin-top: 10px }
.hp .tick { position: absolute; top: 0; transform: translateX(-50%); text-align: center }
.hp .tick::before { content: ""; display: block; width: 1px; height: 9px; margin: 0 auto 5px;
  background: color-mix(in oklab, var(--color-ink) 32%, transparent) }
.hp .tick span { font: 500 10px/1 "JetBrains Mono", monospace; color: var(--color-ink-soft) }

.hp .pin { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap }
.hp .pin i { display: block; width: 1px; margin: 0 auto; background: color-mix(in oklab, var(--color-ink) 22%, transparent) }
.hp .pin a {
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  border: 1px dashed var(--color-border); background: var(--color-surface);
  font: 500 12px/1.2 Inter, sans-serif; color: var(--color-ink); text-decoration: none;
  transition: border-color .15s, color .15s, transform .15s;
}
.hp .pin a:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-1px) }
.hp .pin em { display: block; margin-top: 3px; font-style: normal;
  font: 500 10px/1 "JetBrains Mono", monospace; color: var(--color-ink-soft) }

/* ── Makers, by coverage ─────────────────────────────────────────────────
   The bar length IS how many grinders we chart for that maker, so the block
   reads as a small chart rather than a menu — and it rhymes with the micron
   plot above it. */
@keyframes hp-grow { from { transform: scaleX(0) } }
.hp .bars a {
  display: grid; grid-template-columns: 8.5rem 1fr 2.2rem;
  align-items: center; gap: .85rem; padding: .5rem 0; text-decoration: none;
}
.hp .bars .who {
  font: 500 14.5px/1.2 Inter, sans-serif; color: var(--color-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .16s;
}
.hp .bars .track {
  height: 12px; border-radius: 99px;
  background: color-mix(in oklab, var(--color-ink) 6%, transparent);
  overflow: hidden;
}
.hp .bars .fill {
  display: block; height: 100%; width: var(--w); border-radius: 99px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--color-accent) 72%, var(--color-ink)) 0%,
    var(--color-accent) 100%);
  transform-origin: left center;
  animation: hp-grow .8s cubic-bezier(.22,.68,.36,1) backwards;
  animation-delay: var(--d, 0ms);
  transition: filter .16s;
}
.hp .bars .n {
  font: 600 12px/1 "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft); text-align: right; transition: color .16s;
}
.hp .bars a:hover .who, .hp .bars a:hover .n { color: var(--color-accent) }
.hp .bars a:hover .fill { filter: saturate(1.25) }

/* ── The contents index ──────────────────────────────────────────────────
   A book's table of contents: big serif names, a dotted leader, the micron
   window in mono. Airy on purpose — the opposite texture to the wall. */
.hp .toc a {
  display: flex; align-items: baseline; gap: .1rem; padding: .55rem 0;
  text-decoration: none; border-bottom: 1px dashed transparent;
  transition: border-color .18s;
}
.hp .toc .name {
  font-family: "Source Serif 4", serif; font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -.015em;
  color: var(--color-ink); transition: color .18s;
}
.hp .toc .dots {
  flex: 1; min-width: 1.5rem; margin: 0 .6rem .38rem;
  border-bottom: 1.5px dotted color-mix(in oklab, var(--color-ink) 28%, transparent);
}
.hp .toc .um {
  font: 500 12px/1 "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft); white-space: nowrap; transition: color .18s;
}
.hp .toc a:hover { border-bottom-color: var(--color-accent) }
.hp .toc a:hover .name, .hp .toc a:hover .um { color: var(--color-accent) }

@media (max-width: 520px) {
  .hp .bars a { grid-template-columns: 6.5rem 1fr 2rem; gap: .6rem }
  .hp .toc .name { font-size: 1.25rem }
}

/* ── Numbered editorial entries (replaces boxed pillar cards) ───────────── */
.hp .entry { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.4rem 0;
  border-top: 1px dashed var(--color-border); text-decoration: none; transition: background .18s }
.hp .entry:last-child { border-bottom: 1px dashed var(--color-border) }
.hp .entry:hover { background: color-mix(in oklab, var(--color-accent) 4%, transparent) }
.hp .entry .num { font: 700 12px/1.6 "JetBrains Mono", monospace; color: var(--color-accent);
  letter-spacing: .1em; padding-top: .35rem }
.hp .entry h3 { margin: 0; font-family: "Source Serif 4", serif; font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.01em; color: var(--color-ink);
  display: flex; align-items: center; gap: .5rem }
.hp .entry:hover h3 { color: var(--color-accent) }
.hp .entry h3 svg { width: 15px; height: 15px; opacity: 0; transform: translateX(-4px);
  transition: opacity .18s, transform .18s }
.hp .entry:hover h3 svg { opacity: 1; transform: none }
.hp .entry p { margin: .3rem 0 0; color: var(--color-ink-soft); max-width: 62ch; line-height: 1.6 }

@media (max-width: 720px) {
  .hp .scale { height: 168px }
  .hp .pin a { font-size: 11px; padding: 2px 7px }
}
@media (prefers-reduced-motion: reduce) {
  .hp .rise, .hp .bars .fill { animation: none; opacity: 1 }
  .hp .entry, .hp .pin a, .hp .entry h3 svg { transition: none }
}