/* HopLove — a field sheet, not a dashboard.
   Structure comes from vertical wires, the way a hop yard does. */

:root {
  /* brooksgroves.com palette (see bdgroves.github.io, index.html :root).
     The old HopLove names are kept as aliases so the rest of this file
     didn't have to change. */
  --parchment: #f5f0e8;
  --cream: #ede8dc;
  --white: #fdfaf4;
  --stone: #7a7268;
  --mist: #d6d0c4;
  --gold: #c8922a;
  --rust: #8b3a2a;
  --sage: #4a5c45;
  --ink: #1c1a16;

  --paper: var(--parchment);
  --paper-deep: var(--cream);
  --paper-lift: var(--white);
  --ink-soft: #4e4940;
  --ink-faint: var(--stone);
  --wire: var(--mist);
  --wire-soft: #e4ded2;

  --lupulin: var(--gold);
  --bine: var(--sage);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Libre Baskerville", Georgia, serif;
  --font-mono: "DM Mono", ui-monospace, monospace;

  /* Brewing-role colors. Validated as a categorical set against the page
     surface (dataviz validate_palette.js). Rust/gold sits in the 6-8 dE
     band under protanopia, so every chart that uses these also varies
     marker shape. */
  --aroma: #00809a;
  --bittering: #b8433a;
  --dual: #a07e10;

  /* Categorical chart slots (states on the acreage charts, regions on the
     landscape). Validated light and dark separately with the dataviz
     validator; the dark column is the same hues stepped for the dark surface. */
  --cat-1: #2a78d6;
  --cat-2: #eb6834;
  --cat-3: #1baf7a;
  --cat-4: #4a3aa7;
  --cat-other: #7b857c;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 66ch;
}

/* The site's dark theme, same values, switched by the same bg_theme key. */
[data-theme="dark"] {
  --parchment: #17150f;
  --cream: #211e17;
  --white: #1d1a14;
  --stone: #a2988a;
  --mist: #3a352d;
  --gold: #d9a63f;
  --rust: #cf6b52;
  --sage: #83a077;
  --ink: #ece6da;
  --ink-soft: #c9c1b3;
  --wire-soft: #2b2720;
  --aroma: #1fa0b8;
  --bittering: #d55181;
  --dual: #c98500;
  --cat-1: #3987e5;
  --cat-2: #d95926;
  --cat-3: #199e70;
  --cat-4: #9085e9;
  --cat-other: #8a8578;
}
[data-theme="dark"] footer { background: #0f0d0a; }
[data-theme="dark"] img { filter: brightness(.92); }

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  font-optical-sizing: auto;
}

a { color: inherit; text-decoration-color: var(--wire); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--lupulin); }

:focus-visible {
  outline: 2px solid var(--lupulin);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "wdth" 88;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.wrap { max-width: 78rem; margin: 0 auto; padding: 0 var(--gutter); }
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: relative;
  border-bottom: 1px solid var(--ink);
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 0;
  overflow: hidden;
}

/* The trellis: vertical wires the content hangs from. */
.masthead::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--wire-soft) 0 1px,
    transparent 1px 4.5rem
  );
  opacity: 0.55;
  mask-image: linear-gradient(to bottom, transparent, #000 55%, #000);
  pointer-events: none;
}

.masthead > * { position: relative; }

.wordmark {
  font-size: clamp(3.25rem, 13vw, 8.5rem);
  font-variation-settings: "wdth" 76;
  font-weight: 700;
  letter-spacing: -0.045em;
  margin-bottom: 0.1em;
}
.wordmark span { color: var(--lupulin); }

.standfirst {
  max-width: 48ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  margin: 0 0 2rem;
  text-wrap: pretty;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.25rem;
  border-top: 1px solid var(--wire);
  padding: 0.85rem 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.stats div { display: flex; gap: 0.5ch; align-items: baseline; }
.stats b { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }

.nav {
  display: flex; flex-wrap: wrap; gap: 0 1.5rem;
  border-top: 1px solid var(--ink);
  padding: 0.7rem 0;
  font-size: 0.92rem;
}

/* ------------------------------------------------------------------ search */

.finder {
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: end;
  padding: 1.75rem 0 1.25rem;
}
@media (max-width: 46rem) { .finder { grid-template-columns: 1fr; } }

.finder label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.3rem; }

#q, #lq, #bq {
  width: 100%;
  font: inherit;
  font-size: 1.15rem;
  padding: 0.55rem 0.2rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  color: inherit;
}
#q::placeholder, #lq::placeholder, #bq::placeholder { color: var(--ink-faint); }

.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.7rem;
  background: transparent;
  border: 1px solid var(--wire);
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.chip:hover { border-color: var(--ink); }

/* ------------------------------------------------------------------ ledger */

.ledger { padding-bottom: 5rem; }

/* The UA stylesheet's `[hidden] { display: none }` is a bare attribute
   selector, so any class rule that sets `display` beats it — and .row and
   .country both set `display: grid`. Without this, index.js can set
   row.hidden all it likes and nothing disappears, which is exactly the bug
   that made search look broken. Keep this above those rules' specificity. */
[hidden] { display: none !important; }

.country {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0 1.5rem;
  border-top: 1px solid var(--ink);
  padding: 1.1rem 0 1.6rem;
}
@media (max-width: 52rem) { .country { grid-template-columns: 1fr; gap: 0.5rem; } }

.country > h2 {
  font-size: 1.05rem;
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  position: sticky;
  top: 1rem;
  align-self: start;
}
.country > h2 small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}

.rows { display: grid; gap: 1px; background: var(--wire-soft); }

.row {
  display: grid;
  grid-template-columns: minmax(9rem, 1.4fr) 5.5rem minmax(0, 2.2fr) 4.5rem;
  gap: 0 1rem;
  align-items: center;
  background: var(--paper);
  padding: 0.5rem 0.15rem;
  text-decoration: none;
}
.row:hover { background: var(--paper-lift); }
.row:hover .row-name { text-decoration: underline; text-decoration-color: var(--lupulin); }

.row-name { font-weight: 500; }
.row-name em { font-style: normal; color: var(--ink-faint); font-size: 0.85em; }

.purpose {
  font-size: 0.75rem;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 0.4ch;
}
.purpose::before {
  content: "";
  width: 0.55rem; height: 0.55rem;
  background: var(--mark, var(--wire));
  border-radius: 2px;
  flex: none;
}
[data-purpose="aroma"] { --mark: var(--aroma); }
[data-purpose="bittering"] { --mark: var(--bittering); }
[data-purpose="dual"] { --mark: var(--dual); }
[data-purpose="unconfirmed"] { --mark: transparent; }
.purpose[data-purpose="unconfirmed"] { color: var(--ink-faint); }
.purpose[data-purpose="unconfirmed"]::before { outline: 1px dashed var(--ink-faint); outline-offset: -1px; }

.row-tags {
  font-size: 0.8rem;
  color: var(--ink-faint);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.row-aa { text-align: right; font-size: 0.85rem; color: var(--ink-soft); }

@media (max-width: 40rem) {
  .row { grid-template-columns: minmax(0, 1fr) 4rem; row-gap: 0.15rem; }
  .purpose { grid-row: 2; }
  .row-tags { grid-row: 3; grid-column: 1 / -1; }
  .row-aa { grid-row: 1; text-align: right; }
}

.empty {
  border-top: 1px solid var(--ink);
  padding: 2.5rem 0;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --------------------------------------------------------------- hop sheet */

.sheet { padding-bottom: 5rem; }

.sheet-head {
  border-bottom: 1px solid var(--ink);
  padding: 2.25rem 0 1.25rem;
}
.sheet-head h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-variation-settings: "wdth" 80;
  letter-spacing: -0.04em;
}
.sheet-head .standfirst { margin: 0.9rem 0 1.4rem; max-width: 54ch; font-size: 1.05rem; }

.idents {
  display: flex; flex-wrap: wrap;
  gap: 0 2rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.idents div { display: flex; gap: 0.5ch; }
.idents b { font-weight: 500; color: var(--ink); }

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 4rem);
}
@media (max-width: 60rem) { .cols { grid-template-columns: minmax(0, 1fr); } }
.cols > * { min-width: 0; }

.block { border-top: 1px solid var(--wire); padding: 1.4rem 0 1.8rem; }
.block > h2 {
  font-size: 1rem;
  font-variation-settings: "wdth" 100;
  margin-bottom: 1rem;
}
.block p { max-width: var(--measure); text-wrap: pretty; }

/* Range bars — the signature element. Each source is plotted as a dot so a
   disagreement between breeder and merchant is visible, not averaged away. */

.metric { margin-bottom: 1.5rem; }
.metric:last-child { margin-bottom: 0; }

.metric-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: 0.35rem;
}
.metric-head h3 { font-size: 0.95rem; font-variation-settings: "wdth" 100; font-weight: 500; }
.metric-value { font-size: 0.95rem; }
.metric-value b { font-weight: 600; }
.metric-value span { color: var(--ink-faint); }

.bar {
  position: relative;
  height: 1.9rem;
  border-bottom: 1px solid var(--wire);
}
.bar-span {
  position: absolute; top: 0.55rem; height: 0.5rem;
  background: var(--paper-deep);
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}
.bar-typical {
  position: absolute; top: 0.2rem; width: 2px; height: 1.2rem;
  background: var(--lupulin);
}
.bar-dot {
  position: absolute; top: 0.62rem;
  width: 0.35rem; height: 0.35rem;
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
}
.bar-dot[data-tier="merchant"], .bar-dot[data-tier="aggregator"] { background: var(--paper); border: 1px solid var(--ink-soft); }
.bar-dot[data-tier="unsourced"] { background: var(--paper); border: 1px dashed var(--ink-faint); }

.bar-scale {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: var(--ink-faint);
  margin-top: 0.2rem;
}

.sourcelist { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--ink-soft); }
.sourcelist li { display: flex; gap: 0.75ch; padding: 0.12rem 0; }
.sourcelist .num { color: var(--ink); }

details.sources > summary {
  font-size: 0.8rem; color: var(--ink-soft);
  cursor: pointer; padding: 0.2rem 0;
}
details.sources > summary:hover { color: var(--ink); }

/* Oil composition as a vertical stack — a core sample of the cone. */

.oilstack { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0 1rem; }
.stack {
  display: flex; flex-direction: column;
  height: 17rem; width: 3.2rem;
  border: 1px solid var(--ink);
}
.stack-seg { position: relative; }
.stack-key { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; height: 17rem; }
.stack-key li {
  display: flex; align-items: center; gap: 0.6ch;
  font-size: 0.82rem;
  border-bottom: 1px dotted var(--wire-soft);
  min-height: 0;
}
.stack-key .num { margin-left: auto; color: var(--ink-soft); }
.swatch { width: 0.6rem; height: 0.6rem; flex: none; }

/* Oil list with no stacked bar beside it — used when too little of the oil is
   accounted for to draw a breakdown honestly. No fixed height, no flex-grow
   weighting, since there is no bar for it to line up with. */
.stack-key.bare { height: auto; margin-top: 0.8rem; }
.stack-key.bare li { flex: none; padding: 0.35rem 0; }

/* A stub row: real variety, no data pulled in yet. Marked rather than blank so
   an empty row reads as a known gap instead of a broken render. */
.row-tags .awaiting {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  opacity: 0.75;
}
.row[data-hasdata="false"] .row-name { color: var(--ink-soft); }

table.forms { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.forms th {
  text-align: left; font-weight: 500; font-size: 0.78rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--ink); padding: 0 0 0.3rem;
}
table.forms th:not(:first-child), table.forms td:not(:first-child) { text-align: right; }
table.forms td { padding: 0.45rem 0; border-bottom: 1px solid var(--wire-soft); }
table.forms tr.form-note td {
  font-size: 0.8rem; color: var(--ink-soft); text-align: left;
  padding: 0 0 0.6rem; border-bottom: 1px solid var(--wire-soft);
}

.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0; list-style: none; }
.tags li {
  font-size: 0.82rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--wire);
  border-radius: 999px;
  color: var(--ink-soft);
}
.tags li[data-family] { border-color: var(--lupulin); color: var(--ink); }

.subs { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--wire-soft); }
.subs li { background: var(--paper); padding: 0.55rem 0.15rem; }
.sub-head { display: flex; align-items: baseline; gap: 0.75ch; }
.sub-head a { font-weight: 500; }
.sub-score { margin-left: auto; font-size: 0.85rem; }
.sub-meta { font-size: 0.78rem; color: var(--ink-faint); }
.sub-partial {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--wire-soft);
  padding: 0.05rem 0.35rem;
  margin-left: 0.4ch;
  white-space: nowrap;
  cursor: help;
}
.sub-note { font-size: 0.82rem; color: var(--ink-soft); max-width: var(--measure); margin: 0.15rem 0 0; }

.badge {
  font-size: 0.7rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--bine);
  color: var(--bine);
  border-radius: 3px;
}

.callout {
  border-left: 3px solid var(--lupulin);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 1.2rem 0 0;
  color: var(--ink-soft);
  max-width: var(--measure);
  font-size: 0.92rem;
}

.provenance {
  display: inline-flex; align-items: center; gap: 0.5ch;
  font-size: 0.78rem;
  color: var(--ink-soft);
  border: 1px solid var(--wire);
  padding: 0.15rem 0.6rem;
  border-radius: 3px;
}
.provenance::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dot, var(--wire)); }
[data-verification="corroborated"] { --dot: var(--bine); }
[data-verification="single-source"] { --dot: var(--lupulin); }
[data-verification="unverified"] { --dot: var(--rust); }

/* ------------------------------------------------------------------ footer */

.foot {
  border-top: 1px solid var(--ink);
  padding: 1.75rem 0 3rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.foot p { max-width: var(--measure); text-wrap: pretty; }
.foot code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--paper-lift);
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--wire-soft);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .masthead::before, .finder, .nav { display: none; }
  body { background: #fff; }
}

/* --------------------------------------------------------------- landscape */

.page-title {
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-variation-settings: "wdth" 78;
  letter-spacing: -0.035em;
  margin: 0.4rem 0 0.6rem;
}

.role-chip { display: inline-flex; align-items: center; gap: 0.45ch; }
.role-chip svg .mk { fill: var(--mark); }
.role-chip .num { color: var(--ink-faint); font-size: 0.8em; }
.role-chip[aria-pressed="true"] { background: transparent; color: var(--ink); border-color: var(--ink); }
.role-chip[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }

.chart { position: relative; margin: 0 0 1.5rem; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart figcaption { font-size: 0.85rem; color: var(--ink-soft); max-width: var(--measure); margin-top: 0.6rem; }

.chart .grid { stroke: var(--wire-soft); stroke-width: 1; }
.chart .axis { stroke: var(--ink); stroke-width: 1; }
.chart .tick { font: 12px var(--font-mono); fill: var(--ink-faint); }
.chart .axis-title { font: italic 13px var(--font-body); fill: var(--ink-soft); }

.pt { cursor: pointer; outline: none; }
.pt .mk { fill: var(--mark); stroke: var(--paper); stroke-width: 2; }
.pt .wh { stroke: var(--mark); stroke-width: 1.5; stroke-linecap: round; opacity: 0.22; }
.pt .hit { fill: transparent; }
.pt:hover .wh, .pt:focus-visible .wh, .pt.on .wh, .pt.hit .wh { opacity: 0.9; stroke-width: 2; }
.pt:focus-visible .mk, .pt.on .mk { stroke: var(--ink); }
.pt.dim { opacity: 0.15; }
.pt.off { display: none; }
.searching .pt:not(.hit) { opacity: 0.15; }
.pt.hit .mk { stroke: var(--ink); stroke-width: 2.5; }

.chart .lbl {
  font: 12.5px var(--font-body);
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}
.chart .lbl.off { display: none; }

.tip {
  position: absolute;
  z-index: 3;
  min-width: 12rem;
  padding: 0.6rem 0.8rem;
  background: var(--paper-lift);
  border: 1px solid var(--ink);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.14);
  font-size: 0.85rem;
  pointer-events: none;
}
.tip b { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.tip .role-note { display: block; color: var(--ink-faint); font-size: 0.8rem; }
.tip .role { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 0.4ch; }
.tip .role::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--mark); }
.tip dl { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.9rem; margin: 0.45rem 0 0; }
.tip dt { color: var(--ink-soft); }
.tip dd { margin: 0; text-align: right; }

.as-table { border-top: 1px solid var(--wire); padding: 1rem 0 4rem; }
.as-table summary { cursor: pointer; color: var(--ink-soft); }
.as-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 1rem; }
.as-table th { text-align: left; font-weight: 500; font-size: 0.78rem; color: var(--ink-soft); border-bottom: 1px solid var(--ink); padding: 0.4rem 0.6rem 0.4rem 0; }
.as-table td { border-bottom: 1px solid var(--wire-soft); padding: 0.35rem 0.6rem 0.35rem 0; }

/* On a phone the full chart would shrink to a stamp. Keep it legible at a
   minimum width and let it scroll sideways instead. */
@media (max-width: 46rem) {
  .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart svg { min-width: 720px; }
  .chart figcaption { position: sticky; left: 0; }
  .chart figcaption::before { content: "Scroll sideways to see the whole chart. "; font-weight: 500; }
}

/* ------------------------------------------------------------------ grown */

.line-chart .ln { fill: none; stroke: var(--mark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-chart .dot, .line-chart .end { fill: var(--mark); stroke: var(--paper); stroke-width: 2; }
.line-chart .cross { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.line-chart .hover-zone { fill: transparent; cursor: crosshair; }
.line-chart .lbl { font-size: 12.5px; }
.line-chart svg:focus-visible { outline: 2px solid var(--lupulin); outline-offset: 4px; }
.line-chart .tip { min-width: 10rem; }
.tip .key { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--mark); margin-right: 0.4ch; }
@media (max-width: 46rem) { .line-chart svg { min-width: 560px; } }

.fine { font-size: 0.85rem; color: var(--ink-soft); }
.grown .as-table { padding-bottom: 0.5rem; }
.grown .as-table table { max-width: 28rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; border-bottom: 1px solid var(--ink); margin: 0 0 1rem; }
.stat { display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 1.2rem 1.2rem 0; border-top: 4px solid var(--mark); }
.stat + .stat { padding-left: 1.2rem; border-left: 1px solid var(--wire); }
.stat-k { font-weight: 600; }
.stat > b { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 500; line-height: 1.05; }
.stat-sub { color: var(--ink-faint); font-size: 0.85rem; }
@media (max-width: 46rem) { .stat + .stat { padding-left: 0; border-left: 0; } }

.bars { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.bars li { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 4.2rem 3.4rem; gap: 0.6rem; align-items: center; padding: 0.22rem 0; font-size: 0.92rem; }
.bar-track { height: 0.7rem; }
.bar-fill { display: block; height: 100%; background: var(--mark); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-val { text-align: right; }
.bar-delta { text-align: right; color: var(--ink-faint); font-size: 0.8rem; }
.grown-page .cols { margin-top: 1rem; }
.sourcing { max-width: var(--measure); padding: 1rem 0 4rem; }
.stack-key li { min-height: 1.45em; }  /* trace oils (0.1%) would otherwise collapse onto each other */
@media (max-width: 46rem) {
  /* Name and numbers on one line, the bar full-width beneath, so the bar
     isn't squeezed to a stub between them. */
  .bars li { grid-template-columns: 1fr auto 3.2rem; row-gap: 0.2rem; padding: 0.35rem 0; }
  .bars .bar-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ------------------------------------------------------------------ beers */

.kicker { font-weight: 600; color: var(--ink-soft); margin: 0.8rem 0 0; }
.hopcards { list-style: none; padding: 0; margin: 0.4rem 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.9rem; }
.hopcard { background: var(--paper-lift); border: 1px solid var(--wire); padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.hopcard.missing { background: var(--paper-deep); }
.hc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.hc-head h3 { font-size: 1.45rem; }
.hc-head h3 a { text-decoration: none; }
.hc-head h3 a:hover { text-decoration: underline; text-decoration-color: var(--lupulin); }
.hc-meta { font-size: 0.82rem; color: var(--ink-soft); }
.hc-how { display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 0; }
.hc-how:empty { display: none; }
.how { font-size: 0.75rem; border: 1px solid var(--wire); padding: 0.05rem 0.45rem; border-radius: 99px; color: var(--ink-soft); }
.how.fresh, .fresh { color: var(--bine); border-color: var(--bine); font-weight: 600; }
.hc-aroma { margin: 0; font-size: 0.92rem; }
.hc-none { margin: 0; font-size: 0.85rem; color: var(--ink-faint); }
.hc-metric { display: grid; grid-template-columns: 6rem 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.82rem; color: var(--ink-soft); }
.hc-metric b { color: var(--ink); font-weight: 500; }
.hc-track { position: relative; height: 0.45rem; background: var(--paper-deep); border-radius: 99px; }
.hc-span { position: absolute; top: 0; bottom: 0; background: var(--ink); border-radius: 99px; }
.hc-span.oil { background: var(--lupulin); }
.hc-oils { display: grid; gap: 0.25rem; }
.hc-strip { display: flex; height: 0.55rem; gap: 1px; border-radius: 2px; overflow: hidden; }
.hc-oil-note { font-size: 0.78rem; color: var(--ink-faint); }
.hc-grown { margin: 0; font-size: 0.8rem; color: var(--ink-soft); border-top: 1px dotted var(--wire); padding-top: 0.45rem; }
.fresh-note { border-left-color: var(--bine); margin-top: 1.2rem; }
.together li.shared { border-color: var(--lupulin); color: var(--ink); }
.together .num { font-size: 0.75em; color: var(--ink-faint); }

.beerlist { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.beerlist li { display: grid; grid-template-columns: minmax(10rem, 16rem) 3.5rem 1fr; gap: 0.8rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--wire-soft); }
.beerlist.compact li { grid-template-columns: 1fr; gap: 0; }
.beer-hops { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 46rem) { .beerlist li { grid-template-columns: 1fr auto; } .beer-hops { grid-column: 1 / -1; } }


/* ------------------------------------------------------ brooksgroves.com blend

   Everything below makes HopLove read as a page of brooksgroves.com: the
   site's topline and masthead bar, its serif headings, and the small-caps
   mono labels it uses for tags, kickers and pills. HopLove keeps its own
   layout and charts; it just dresses like the rest of the house. */

.topline { height: 4px; background: linear-gradient(90deg, var(--rust) 0%, var(--gold) 50%, var(--sage) 100%); }
.sitebar {
  border-bottom: 2px solid var(--ink);
  padding: 0 var(--gutter);
  position: sticky; top: 0; z-index: 100;
  background: var(--parchment);
}
.sitebar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 78rem; margin: 0 auto; padding: 0.75rem 0; }
.site-name { font-family: var(--font-display); font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 900; text-decoration: none; color: var(--ink); }
.sitebar-nav { display: flex; align-items: center; gap: 1.5rem; }
.sitebar-nav a { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--stone); }
.sitebar-nav a:hover { color: var(--rust); }
.theme-toggle { background: none; border: 0; cursor: pointer; padding: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--stone); line-height: 1; }
.theme-toggle:hover { color: var(--gold); }
@media (max-width: 30rem) { .sitebar-nav { gap: 0.9rem; } .sitebar-nav a:nth-child(2) { display: none; } }

body { font-size: 15px; line-height: 1.7; }
h1, h2, h3 { font-family: var(--font-display); font-variation-settings: normal; letter-spacing: -0.01em; }
.wordmark { font-weight: 900; letter-spacing: -0.03em; }
.page-title { font-weight: 900; letter-spacing: -0.02em; }
.wordmark span, .page-title em { color: var(--rust); font-style: italic; }
.block > h2 { font-size: 1.15rem; font-weight: 700; }
.standfirst { font-size: clamp(0.95rem, 1.4vw, 1.08rem); line-height: 1.8; color: var(--stone); }
[data-theme="dark"] .standfirst { color: var(--ink-soft); }

/* Page-level navs read like the site's section nav. */
.nav a { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--stone); }
.nav a:hover { color: var(--rust); }
.kicker { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

/* Tags, chips, pills and badges: the site's tag-btn / stack-pill look. */
.tags li, .chip, .how, .badge, .sub-partial, .row-tags .awaiting {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--cream);
  border: 1px solid var(--mist);
  border-radius: 4px;
  color: var(--stone);
  padding: 0.25rem 0.65rem;
}
.tags li[data-family], .together li.shared { border-color: var(--gold); color: var(--ink); }
.chip:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--parchment); }
.role-chip[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--ink); }
.how.fresh { background: transparent; color: var(--sage); border-color: var(--sage); }
.purpose { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.row-tags .awaiting { background: none; border: 0; padding: 0; }
.finder label, .hc-meta, .stat-k { font-family: var(--font-mono); letter-spacing: 0.06em; }
.fine { font-size: 0.8rem; }
/* Mono numerals run wider than Plex did; give the alpha column room so a
   range like 15.7–19.1% stays on one line. */
.row { grid-template-columns: minmax(9rem, 1.4fr) 5.5rem minmax(0, 2.2fr) 6.6rem; }
@media (max-width: 40rem) {
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row-name { grid-row: 1; grid-column: 1; }
  .row-aa { grid-column: 2; }
}
.finder label { font-size: 0.68rem; text-transform: uppercase; color: var(--stone); }
.callout { font-style: italic; }
a:hover { text-decoration-color: var(--rust); }
:focus-visible { outline-color: var(--gold); }

/* The dataset colophon sits above the shared site footer. */
.colophon { border-top: 1px solid var(--ink); padding: 1.6rem 0 0.5rem; font-size: 0.85rem; color: var(--stone); }
.colophon p { max-width: var(--measure); }
.colophon code { font-family: var(--font-mono); font-size: 0.85em; }
.wordmark .heart { font-size: 0.32em; vertical-align: 0.9em; letter-spacing: 0; font-style: normal; }
.jump { display: grid; gap: 0.45rem; }
.jump-city { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.jump-city > span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); min-width: 8.5rem; }
.jump .chip { text-decoration: none; }
.jump .chip .num { color: var(--ink-faint); margin-left: 0.3ch; }
.fresh-season { border-top: 3px solid var(--sage); }
.fresh-season h2 { color: var(--sage); }
.fresh-season .beerlist li { grid-template-columns: minmax(10rem, 16rem) 11rem 1fr; }
@media (max-width: 46rem) { .fresh-season .beerlist li { grid-template-columns: 1fr auto; } }

/* ------------------------------------------------------------------- scan */

.scan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 46rem) { .scan-grid { grid-template-columns: 1fr; } }
.scan h2 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.dropzone { display: grid; place-items: center; min-height: 14rem; border: 2px dashed var(--mist); background: var(--cream); cursor: pointer; padding: 1rem; text-align: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--stone); }
.dropzone.over, .dropzone:hover { border-color: var(--gold); }
.dropzone img { max-width: 100%; max-height: 22rem; }
.scan textarea, .scan input[type="text"] { width: 100%; font: inherit; font-size: 0.95rem; background: var(--white); color: var(--ink); border: 1px solid var(--mist); padding: 0.6rem; }
.scan-label { display: block; margin: 0.8rem 0 0.3rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.scan-go { font-size: 0.72rem; padding: 0.55rem 1.1rem; background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.scan-go:hover { background: var(--rust); border-color: var(--rust); color: var(--white); }
.scan-go:disabled { opacity: 0.5; cursor: wait; }
.scan h2.scan-beer { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 900; margin: 0.2rem 0 0.4rem; }
.scan-keep { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.scan-keep .fine { max-width: 52ch; }

/* ------------------------------------------------------------ your glass */
/* Untappd-style caps: a dim row with a gold row clipped over it. */
.caps { position: relative; display: inline-block; line-height: 1; font-size: 1.05rem; letter-spacing: 0.12em; color: var(--wire); vertical-align: -0.08em; white-space: nowrap; }
.caps .caps-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--gold); }
.caps.small { font-size: 0.78rem; }
.caps.big { font-size: 2rem; cursor: pointer; }
.caps-num { font-family: var(--font-mono); font-size: 0.8rem; }
.had-it { margin-top: 0.8rem; }
.had-it a { text-decoration: none; display: inline-flex; gap: 0.5rem; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rust); }
.had { font-family: var(--font-mono); font-size: 0.68rem; color: var(--rust); white-space: nowrap; }
.my-glass, .my-recent, .in-my-glass { border-top: 3px solid var(--rust); }
.my-glass h2, .my-recent h2, .in-my-glass h2 { color: var(--rust); }
.my-rating { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.my-rating .caps { font-size: 1.6rem; }
.checkins { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.checkins li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--wire-soft); }
.checkins li:not(:has(img)) { grid-template-columns: 1fr; }
.checkins img, .ci-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--cream); }
.ci-when { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--stone); margin: 0; }
.ci-note { font-style: italic; margin: 0.3rem 0; max-width: 60ch; }
.rate-it { margin-top: 1rem; }
.rate-it summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust); }
.rate-it textarea, .scan-rate textarea { display: block; width: 100%; max-width: 36rem; font: inherit; font-size: 0.95rem; background: var(--white); color: var(--ink); border: 1px solid var(--mist); padding: 0.6rem; margin: 0.3rem 0 0.8rem; }
.rater { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0.6rem 0; }
.rater input[type="range"] { width: min(16rem, 100%); accent-color: var(--gold); }
.rater-val { font-family: var(--font-mono); font-size: 1.2rem; min-width: 3ch; }
.scan-rate { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--wire-soft); }
.scan-rate h3 { font-size: 1.05rem; margin: 0; }
.ci-cards { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.ci-card { display: grid; grid-template-columns: 5rem 1fr; gap: 0.8rem; align-items: start; padding: 0.7rem; background: var(--paper-lift); border: 1px solid var(--wire-soft); }
.ci-card h3 { font-size: 1rem; margin: 0.15rem 0; line-height: 1.2; }
.ci-card h3 a { text-decoration: none; }
.ci-card .fine { margin: 0.1rem 0; }
.ci-card .beer-hops { margin: 0.35rem 0 0; }
.ci-card.unknown { background: transparent; border-style: dashed; }
.ci-noimg { display: grid; place-items: center; aspect-ratio: 1; background: var(--cream); font-size: 1.6rem; }
.drop-big { display: block; font-size: 2.4rem; margin-bottom: 0.4rem; }
body.reading .dropzone { border-color: var(--gold); animation: reading 1.2s ease-in-out infinite alternate; }
@keyframes reading { from { background: var(--cream); } to { background: var(--paper-lift); } }
@media (prefers-reduced-motion: reduce) { body.reading .dropzone { animation: none; } }
.scan-names { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
@media (max-width: 46rem) { .scan-names { grid-template-columns: 1fr; } }
.scan-names input { width: 100%; font: inherit; background: var(--white); color: var(--ink); border: 1px solid var(--mist); padding: 0.4rem 0.6rem; }
.scan-names input.scan-beer { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; }
.scan-names input:placeholder-shown { border-color: var(--rust); }

.wordmark-emoji { font-style: normal; font-size: 0.45em; vertical-align: 0.35em; letter-spacing: 0; }
.cta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.2rem 0 0.4rem; }
.cta .chip { text-decoration: none; font-size: 0.72rem; padding: 0.55rem 1.1rem; }

/* ------------------------------------------------ beers: search first */
.beerlist li[hidden] { display: none !important; }
section:not(.open) > .beerlist li[data-more] { display: none; }
body.searching section > .beerlist li[data-more]:not([hidden]) { display: grid; }
body.searching .show-all, body.searching .browse { display: none; }
.show-all { margin-top: 0.8rem; font-size: 0.7rem; }
.try { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.7rem 0 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.try .chip { font-size: 0.66rem; cursor: pointer; }
.bq-count { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--rust); margin: 0.6rem 0 0; }
.browse { margin: 1rem 0 0.5rem; }
.browse summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding: 0.4rem 0; }
.browse .jump { margin-top: 0.6rem; }
.beers #bq { font-size: 1.1rem; }

.hc-metric .bw { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust); font-weight: 500; }
.glossary summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust); }
.glossary dl { margin: 0.8rem 0 0; display: grid; gap: 0.2rem 1.2rem; grid-template-columns: minmax(10rem, 14rem) 1fr; }
.glossary dt { font-weight: 700; }
.glossary dd { margin: 0 0 0.6rem; color: var(--ink-soft); }
@media (max-width: 46rem) { .glossary dl { grid-template-columns: 1fr; } .glossary dd { margin-bottom: 0.8rem; } }

/* Hop page: the quick take, and on phones the drinker's half first. */
.quick-take { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem 1.5rem; margin: 1.2rem 0 0; padding: 1rem 1.1rem; background: var(--paper-lift); border: 1px solid var(--wire-soft); border-left: 3px solid var(--gold); }
.quick-take dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
.quick-take dd { margin: 0.2rem 0 0; font-size: 0.98rem; }
@media (max-width: 60rem) { .cols > div:nth-child(2) { order: -1; } }
body.searching .brewery > p.fine { display: none; }
.nerd-links { margin-top: 2rem; }

/* ---------------------------------------------------------- hop vs hop */
.cmp-pick { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.8rem; align-items: end; padding-top: 1.5rem; }
.cmp-pick input { width: 100%; font: inherit; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; background: var(--white); color: var(--ink); border: 1px solid var(--mist); padding: 0.4rem 0.6rem; }
.cmp-swap { font-size: 1.1rem; padding: 0.4rem 0.7rem; cursor: pointer; margin-bottom: 0.2rem; }
.cmp-verdict { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.5; margin: 1.5rem 0 1rem; max-width: 60ch; }
.cmp-scroll { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 34rem; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 0.8rem 0.8rem 0.8rem 0; border-bottom: 1px solid var(--wire-soft); }
.cmp thead th { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; }
.cmp thead th a { text-decoration: none; }
.cmp thead th:nth-child(2) { color: var(--rust); } .cmp thead th:nth-child(2) a { color: inherit; }
.cmp tbody th { width: 9rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); font-weight: 500; }
.cmp tbody th .fine { display: block; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.cmp td { width: 40%; }
.cmp .tags { margin: 0; }
.cmp-range { display: grid; grid-template-columns: 1fr 8rem; gap: 0.8rem; align-items: center; margin: 0.25rem 0; }
.cmp-range b { font-weight: 500; }
.cmp-track { position: relative; height: 0.55rem; background: var(--paper-deep); border-radius: 99px; }
.cmp-span { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.cmp-range.a .cmp-span { background: var(--rust); }
.cmp-range.b .cmp-span { background: var(--ink); }
.cmp .hc-strip { display: flex; height: 0.6rem; margin-bottom: 0.3rem; }
@media (max-width: 46rem) { .cmp-pick { grid-template-columns: 1fr; } .cmp-swap { justify-self: start; } .cmp-verdict { font-size: 1.05rem; } }
.cmp .tags li.shared { border-color: var(--gold); background: var(--gold); color: #1c1a16; }

/* On a phone the comparison stacks: each row, then this hop, then that hop. */
@media (max-width: 46rem) {
  .cmp { min-width: 0; }
  .cmp thead { display: none; }
  .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { padding: 0.8rem 0; border-bottom: 1px solid var(--wire-soft); }
  .cmp th, .cmp td { border: 0; padding: 0.2rem 0; }
  .cmp td[data-h]::before, .cmp-range[data-h]::before { content: attr(data-h); display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--ink); margin-top: 0.4rem; }
  .cmp td[data-h]:nth-of-type(1)::before, .cmp-range.a::before { color: var(--rust); }
  .cmp-range { grid-template-columns: 1fr 7rem; }
  .cmp-range[data-h]::before { grid-column: 1 / -1; }
}
@media (max-width: 46rem) {
  .cmp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .cmp tr > th, .cmp td[colspan] { grid-column: 1 / -1; }
  .cmp td { min-width: 0; }
}

/* --------------------------------------------------------------- about */
.ways { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 1.2rem; }
.ways li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; }
.ways-n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ink); color: var(--parchment); font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; }
.ways h3 { font-size: 1.2rem; margin: 0.2rem 0 0.3rem; }
.ways h3 a { text-decoration: none; }
.ways p { margin: 0; max-width: 62ch; }
.about-dl { display: grid; grid-template-columns: minmax(11rem, 15rem) 1fr; gap: 0.3rem 1.5rem; margin: 0.8rem 0 0; }
.about-dl dt { font-weight: 700; }
.about-dl dd { margin: 0 0 0.9rem; color: var(--ink-soft); max-width: 64ch; }
@media (max-width: 46rem) { .about-dl { grid-template-columns: 1fr; } }
.about-me p { max-width: 64ch; }
.new-here { margin-top: 0.2rem; }
.colophon-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ------------------------------------------------------------ tip jar */
.tip-line { margin: 1.5rem 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: center; color: var(--ink-soft); font-size: 0.95rem; }
.tip-btn { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 0.55rem 1rem; background: var(--gold); color: #1c1a16; border: 1px solid var(--gold); border-radius: 2px; }
.tip-btn:hover { background: var(--rust); border-color: var(--rust); color: #fdfaf4; }
.tip-btn.big { font-size: 0.85rem; padding: 0.8rem 1.4rem; }
.tip-jar { border-top: 3px solid var(--gold); }
.tip-jar p { max-width: 62ch; }

/* ------------------------------------------------------ fresh hop guide */
.fh-lede { max-width: 64ch; }
.fh-list, .fh-farms { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.fh-list li, .fh-farms li { padding: 0.5rem 0; border-bottom: 1px solid var(--wire-soft); }
.fh-list li > a { text-decoration: none; }
.fh-hops { display: block; font-size: 0.92rem; margin-top: 0.15rem; }
.fh-hops .fresh { color: var(--sage); font-weight: 700; }
.fresh-guide .brewery h2 { font-size: 1.25rem; }

/* ------------------------------------------- app bar: the features as tabs */
.appbar { background: var(--paper-lift); border-bottom: 1px solid var(--wire); }
.appbar-inner { max-width: 78rem; margin: 0 auto; padding: 0.5rem var(--gutter); display: flex; align-items: center; gap: 1rem; }
.appbar-home { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; flex: none; }
.appbar-home img { width: auto; height: 40px; }
.appbar-tabs { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0.2rem 0; }
.appbar-tabs::-webkit-scrollbar { display: none; }
.appbar-tabs a { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; border: 1px solid var(--wire); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.appbar-tabs a:hover { border-color: var(--gold); }
.appbar-tabs a[aria-current="page"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
@media (max-width: 46rem) {
  .appbar-inner { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .appbar-home { font-size: 1rem; }
  .appbar-home img { width: auto; height: 32px; }
  .appbar-tabs { margin: 0 calc(-1 * var(--gutter)); padding: 0.2rem var(--gutter); }
}

/* ---------------------------------------------- home: badge + feature tiles */
.hero-brand { display: flex; align-items: center; gap: 1.2rem; }
.hero-badge { width: auto; height: 160px; flex: none; }
@media (max-width: 46rem) { .hero-badge { width: auto; height: 96px; } .hero-brand { gap: 0.8rem; } }
.tiles { list-style: none; padding: 0; margin: 1.4rem 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; }
.tiles a { display: grid; grid-template-columns: 2.6rem 1fr; grid-template-rows: auto auto; column-gap: 0.8rem; padding: 1rem 1.1rem; height: 100%; box-sizing: border-box; background: var(--paper-lift); border: 1px solid var(--wire); border-radius: 10px; text-decoration: none; color: var(--ink); transition: border-color 0.15s, transform 0.15s; }
.tiles a:hover { border-color: var(--gold); transform: translateY(-2px); }
.tile-icon { grid-row: 1 / 3; font-size: 1.9rem; line-height: 1; align-self: center; }
.tiles b { font-family: var(--font-display); font-size: 1.15rem; }
.tiles span:not(.tile-icon) { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .tiles a { transition: none; } .tiles a:hover { transform: none; } }

/* ------------------------------------------------------------- science */
.sci-toc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.sci-toc a { padding: 0.35rem 0.75rem; border: 1px solid var(--wire); border-radius: 999px; text-decoration: none; font-size: 0.85rem; font-weight: 700; color: var(--ink); background: var(--paper-lift); }
.sci-toc a:hover { border-color: var(--gold); }
.science p, .science li { max-width: 68ch; }
.sci-split { display: grid; grid-template-columns: 1fr 240px; gap: 2rem; align-items: center; }
.sci-cone img { width: auto; height: 220px; }
@media (max-width: 46rem) { .sci-split { grid-template-columns: 1fr; } .sci-cone { display: none; } }
.sci-list { padding-left: 1.2rem; }
.sci-list li { margin: 0.4rem 0; }
.mols { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.mol { margin: 0; padding: 0.6rem 0.8rem 0.8rem; background: var(--paper-lift); border: 1px solid var(--wire-soft); border-radius: 10px; color: var(--ink); }
.mol svg { display: block; height: auto; max-height: 220px; }
.mol figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; font-size: 0.9rem; }
.mol figcaption .num { color: var(--ink-soft); }
.mol-3d { margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0.6rem; border: 1px solid var(--gold); background: transparent; color: var(--ink); border-radius: 999px; cursor: pointer; }
.mol-3d:hover { background: var(--gold); color: #1c1a16; }
.sci-oil { display: grid; grid-template-columns: minmax(14rem, 20rem) 1fr; gap: 1.5rem; align-items: start; padding: 1.2rem 0; border-top: 1px solid var(--wire-soft); }
.sci-oil h3 { font-size: 1.3rem; margin: 0.2rem 0 0.4rem; display: flex; align-items: center; gap: 0.5rem; }
.swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; background: var(--c); }
@media (max-width: 46rem) { .sci-oil { grid-template-columns: 1fr; gap: 0.6rem; } }
.leaders { font-size: 0.92rem; }
.leaders > span:first-child { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); margin-right: 0.3rem; }
.kettle { list-style: none; counter-reset: k; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 0.6rem; }
.kettle li { counter-increment: k; display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 0.8rem; padding: 0.8rem 1rem; background: var(--paper-lift); border: 1px solid var(--wire-soft); border-left: 4px solid var(--gold); border-radius: 8px; }
.kettle li::before { content: counter(k); grid-row: 1 / 3; font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: var(--rust); }
.kettle li:last-child { border-left-color: var(--sage); }
.kettle b { font-family: var(--font-display); font-size: 1.05rem; }
.kettle span { color: var(--ink-soft); font-size: 0.93rem; }
.mol-dialog { width: min(40rem, 92vw); border: 1px solid var(--wire); border-radius: 12px; padding: 1rem; background: var(--paper-lift); color: var(--ink); }
.mol-dialog::backdrop { background: rgba(28, 26, 22, 0.55); }
.mol-dialog-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: 1.2rem; }
.mol-dialog-head button { border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--ink); }
.mol-view { position: relative; width: 100%; height: min(60vh, 26rem); margin-top: 0.6rem; border-radius: 8px; overflow: hidden; }

/* a fade at the right edge says "there's more, swipe" */
@media (max-width: 46rem) { .appbar-tabs { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); } }

/* --- app bar, take two: every tab always visible, nothing to scroll ---- */
.appbar-inner { flex-wrap: wrap; }
.appbar-tabs { flex: 1; flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; margin: 0; padding: 0; justify-content: flex-end; }
.appbar-tabs a { flex: none; }
.appbar-tabs .tab-short { display: none; }
/* Narrower desktops and tablets: logo on its own line, tabs in an even grid. */
@media (max-width: 78rem) {
  .appbar-inner { flex-direction: column; align-items: stretch; gap: 0.5rem; padding-top: 0.6rem; padding-bottom: 0.7rem; }
  .appbar-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.4rem; }
  .appbar-tabs a { justify-content: center; }
}
/* Phones: app-style buttons, icon over a short label, four to a row. */
@media (max-width: 46rem) {
  .appbar-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
  .appbar-tabs a { flex-direction: column; gap: 0.15rem; padding: 0.45rem 0.2rem; border-radius: 12px; font-size: 0.74rem; line-height: 1.15; text-align: center; white-space: normal; }
  .appbar-tabs .tab-icon { font-size: 1.25rem; line-height: 1; }
  .appbar-tabs .tab-long { display: none; }
  .appbar-tabs .tab-short { display: inline; }
}
@media (max-width: 78rem) {
  .appbar-tabs { flex: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------- range bars, take two: one clear
   band for the range, one rust line for typical, same-size source dots
   (filled = breeder or lab, hollow = merchant), the range ends labelled. */
.bar { position: relative; height: 2.6rem; border-bottom: 0; }
.bar-axis { position: absolute; left: 0; right: 0; top: 0.95rem; height: 2px; background: var(--wire-soft); border-radius: 2px; }
.bar-span { position: absolute; top: 0.62rem; height: 0.7rem; background: color-mix(in srgb, var(--gold) 38%, transparent); border: 0; border-radius: 999px; }
.bar-typical { position: absolute; top: 0.35rem; width: 3px; height: 1.25rem; margin-left: -1.5px; background: var(--rust); border-radius: 2px; }
.bar-dot { position: absolute; top: 0.72rem; width: 0.55rem; height: 0.55rem; margin: 0; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); box-sizing: content-box; transform: translateX(-50%); }
.bar-dot[data-tier="merchant"], .bar-dot[data-tier="aggregator"] { background: var(--paper); border: 2px solid var(--ink); width: 0.45rem; height: 0.45rem; }
.bar-dot[data-tier="unsourced"] { background: var(--paper); border: 2px dashed var(--ink-faint); width: 0.45rem; height: 0.45rem; }
.bar-end { position: absolute; top: 1.55rem; transform: translateX(-50%); font-size: 0.68rem; color: var(--ink-faint); white-space: nowrap; }
.bar-scale { display: none; }
.bar-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: -0.2rem 0 1rem; }
.bar-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.bar-legend i { display: inline-block; }
.lg-span { width: 1.4rem; height: 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--gold) 38%, transparent); }
.lg-typ { width: 3px; height: 0.9rem; background: var(--rust); border-radius: 2px; }
.lg-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ink); }
.lg-dot.hollow { background: var(--paper); border: 2px solid var(--ink); width: 0.4rem; height: 0.4rem; }

/* ------------------------------------------------------- edit this beer */
.edit-beer summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust); }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem 1rem; margin: 0.8rem 0; }
.ed-field { display: block; }
.ed-field input, .ed-field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; background: var(--white); color: var(--ink); border: 1px solid var(--mist); padding: 0.45rem 0.6rem; border-radius: 4px; }
.ed-field textarea { font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.5; }

.scan-more { display: grid; grid-template-columns: 2fr 0.7fr 2fr 1fr; gap: 0.8rem; margin: 0.8rem 0 0.4rem; }
.scan-more input { width: 100%; box-sizing: border-box; font: inherit; background: var(--white); color: var(--ink); border: 1px solid var(--mist); padding: 0.4rem 0.6rem; }
@media (max-width: 46rem) { .scan-more { grid-template-columns: 1fr 1fr; } }

/* Brooks's login button in the footer nav, dressed as one of the links. */
.owner-link { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--stone); cursor: pointer; }
.owner-link:hover { color: var(--ink); text-decoration: underline; }

/* 404 search */
.nf-search { display: flex; gap: 0.5rem; max-width: 34rem; margin: 0.5rem 0 1rem; }
.nf-search input { flex: 1; min-width: 0; font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 2px; }

/* "Something off? Email Brooks" on beer pages */
.say-hi { margin: 1.25rem 0 0; }

/* "About HopLove ->" at the end of the home intro */
.hero-about { display: inline-block; margin-left: 0.3ch; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }