/* =============================================================================
   BREW LAB
   Built from the site's own parts and nothing else: the essay header (title,
   uppercase byline, the time in the margin hand), the index rows, dotted
   rules, the footer. Spacing runs on the site's 22px rhythm. The only picture
   is the pattern, and it only appears the way it does everywhere else: between
   one page and the next, which here means between one recipe and the next.
   ============================================================================= */

:root {
  --g: var(--dot-gap);            /* 22px, the site's rhythm */
  --good: #6E8B5B;
  --wash: rgba(184, 92, 56, 0.06);
  --scrim: rgba(0, 0, 0, 0.18);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
html.dark {
  --good: #9DB58A;
  --wash: rgba(184, 92, 56, 0.1);
  --scrim: rgba(0, 0, 0, 0.55);
}

body.locked { overflow: hidden; }
body.bl-wave-over .pattern-layer { z-index: 1000; }
:where(.page--brew, .sheet, .brew) button { font-family: inherit; color: inherit; }
.sheet[hidden], .sheet-scrim[hidden], .brew[hidden] { display: none; }
.page--brew :focus-visible, .sheet :focus-visible, .brew :focus-visible { outline: 1px dotted var(--accent); outline-offset: 4px; }
.page--brew .post-meta, .sheet .post-meta { display: block; }
html.dark .page--brew .post-meta, html.dark .sheet .post-meta { color: var(--ink-light); }

/* ── bits ───────────────────────────────────────────────────────────────── */

.lbl { font-size: 11px; font-weight: 400; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light); }
.lbl .fine { text-transform: none; letter-spacing: .2px; margin-left: 6px; }
.note { font-family: 'Caveat', cursive; font-size: 17px; line-height: 1.2; color: var(--accent); opacity: .7; }
.note-good { color: var(--good); opacity: 1; }
.fine { font-size: 12px; line-height: 1.6; color: var(--ink-light); font-weight: 300; }

.bl-link {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; letter-spacing: .3px;
  border-bottom: 1px dotted currentColor; transition: color .2s ease;
}
.bl-link:hover { color: var(--accent); }
.bl-link-c { display: block; margin: var(--g) auto 0; font-size: 12px; font-weight: 300; color: var(--ink-light); border-bottom-color: var(--ink-faint); }

/* ── header: the title, the gear beside it ─────────────────────────────── */

.bl-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: var(--g);
}
.bl-head h1 { font-size: 28px; font-weight: 300; line-height: 1.4; }
.bl-gear {
  background: none; border: 0; padding: 2px 0; cursor: pointer; white-space: nowrap;
  font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light);
  border-bottom: 1px dotted var(--ink-faint); transition: color .2s ease, border-color .2s ease;
}
.bl-gear:hover { color: var(--accent); border-bottom-color: var(--accent); }
.bl-gear[hidden] { display: none; }

/* ── the bag ────────────────────────────────────────────────────────────── */

.bag {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: var(--g); margin-bottom: calc(var(--g) * 2);
  border-bottom: 1px dotted var(--ink-faint);
}
.bag-main { flex: 1; min-width: 0; display: grid; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.bag-name { font-size: 16px; font-weight: 400; line-height: var(--g); color: var(--ink); transition: color .2s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .bag-main:hover .bag-name { color: var(--accent); } }
.bag-meta { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light); line-height: var(--g); }
.bag-meta .nw { white-space: nowrap; }
.bag-phase { display: block; font-family: 'Caveat', cursive; font-size: 16px; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--accent); opacity: .65; }
.bag-phase.is-good { color: var(--good); opacity: .9; }
.bag-new {
  flex: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: 300; letter-spacing: .3px; color: var(--ink-light);
  border-bottom: 1px dotted var(--ink-faint); transition: color .2s ease;
}
.bag-new::before { content: '+ '; color: var(--accent); }
.bag-new:hover { color: var(--accent); }

/* ── recipes: the tabs, then the recipe as a page ─────────────────────── */

.rtabs { display: flex; gap: 26px; margin-bottom: calc(var(--g) * 1.5); }
.rtab {
  background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  padding: 4px 0 3px; font-size: 14px; font-weight: 300; letter-spacing: .3px; color: var(--ink-light);
  transition: color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.rtab:hover { color: var(--ink); }
.rtab.on { color: var(--accent); border-bottom-color: var(--accent); }

.r-head { margin-bottom: calc(var(--g) * 1.5); }
.r-title { font-size: 22px; font-weight: 400; line-height: 1.4; }
.r-by { margin-top: 2px; }
.r-desc { font-size: 14px; font-weight: 300; line-height: var(--g); color: var(--ink-light); margin-top: calc(var(--g) * .5); }

/* the grind, in the grinder's own notation, each part named */
.grind { padding: var(--g) 0; border-top: 1px dotted var(--ink-faint); border-bottom: 1px dotted var(--ink-faint); }
.grind-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: calc(var(--g) * .5); }
.grind-set { display: flex; align-items: flex-start; }
.gp { display: grid; justify-items: center; gap: 2px; }
.gp-n { font-size: 52px; font-weight: 200; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.gp-l { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light); }
.gp-dot { font-size: 52px; font-weight: 200; line-height: 1; color: var(--ink-faint); padding: 0 5px; }
.grind-side { display: grid; justify-items: end; text-align: right; gap: 2px; padding-bottom: 1px; }
.grind-tag { font-family: 'Caveat', cursive; font-size: 17px; line-height: 1.1; color: var(--accent); opacity: .7; }
.grind-from { font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--ink-light); font-variant-numeric: tabular-nums; }

/* what goes in */
.qty { display: grid; grid-template-columns: repeat(3, 1fr); padding: var(--g) 0; }
.q { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.q dd { font-size: 22px; font-weight: 300; line-height: 1.2; font-variant-numeric: tabular-nums; }
.q dd small { font-size: 12px; color: var(--ink-light); margin-left: 2px; }
.q dt { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light); }

/* the steps, as index rows */
.steps { list-style: none; border-top: 1px dotted var(--ink-faint); }
.st {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline;
  padding: calc(var(--g) * .5) 0; border-bottom: 1px dotted var(--ink-faint);
  line-height: var(--g); font-size: 14px;
}
.st-t { font-size: 11px; color: var(--ink-light); font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.st-a { font-weight: 400; }
.st-move .st-a { font-weight: 300; color: var(--ink-light); }
.st-g { font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
.st-g small { font-size: 11px; color: var(--ink-light); margin-right: 2px; }
.st-end .st-a { font-weight: 300; }
.st-band { font-size: 11px; font-weight: 300; color: var(--ink-light); letter-spacing: .3px; }
.r-fix { font-size: 13px; font-weight: 300; line-height: var(--g); color: var(--accent); margin-top: calc(var(--g) * .5); }

.recipe .btn-xl { margin-top: calc(var(--g) * 1.5); }

/* whatever the last change touched catches the light once */
.grind.is-changed .gp-n, .q.is-changed dd { animation: glow 2.4s var(--ease); }
@keyframes glow { 0% { color: var(--accent); } 100% { color: var(--ink); } }
.steps.is-changed { animation: wash 2.4s var(--ease); }
@keyframes wash { 0% { background: var(--wash); } 100% { background: transparent; } }

/* ── this bag: an index ─────────────────────────────────────────────────── */

.log { margin-top: calc(var(--g) * 3); }
.log-h { font-weight: 400; margin-bottom: calc(var(--g) * .5); }
.log-list { list-style: none; }
.log-row {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: baseline; gap: 0 12px;
  padding: calc(var(--g) * .6) 0; border-bottom: 1px dotted var(--ink-faint); line-height: var(--g);
}
.log-row:last-child { border-bottom: 0; }
.log-n { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
html.dark .log-n { color: var(--ink-light); }
.log-main { display: grid; min-width: 0; }
.log-what { font-size: 14px; font-weight: 400; }
.log-dim { font-size: 12px; font-weight: 300; color: var(--ink-light); font-variant-numeric: tabular-nums; line-height: 1.7; }
.log-taste.t-great { color: var(--good); }
.log-taste.t-off { color: var(--accent); }
.log-read { font-size: 13px; font-weight: 300; line-height: 1.6; margin-top: 6px; }
.log-fix { font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--accent); }
.log-t { font-size: 11px; color: var(--ink-light); font-variant-numeric: tabular-nums; font-weight: 300; }

.bl-foot .bl-link { border-bottom-color: var(--ink-faint); }

/* ── first visit ────────────────────────────────────────────────────────── */

.setup { display: grid; gap: var(--g); }
.sec-h { font-size: 16px; font-weight: 400; line-height: var(--g); color: var(--ink); padding-top: calc(var(--g) * 1.5); border-top: 1px dotted var(--ink-faint); }
.sec-h:first-child { padding-top: 0; border-top: 0; }
.setup .btn-xl { margin-top: var(--g); }

/* ── forms: words, underlined when chosen ─────────────────────────────── */

.field { display: grid; gap: 6px; align-content: start; }
.field.is-dim { opacity: .3; pointer-events: none; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
@media (max-width: 520px) { .field-pair { grid-template-columns: 1fr; } }

.chips, .seg { display: flex; flex-wrap: wrap; gap: 0 20px; }
.chip, .seg-b {
  background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; cursor: pointer;
  min-height: 40px; padding: 8px 0 4px; font-size: 14px; font-weight: 300; color: var(--ink-light); letter-spacing: .3px;
  transition: color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover, .seg-b:hover { color: var(--ink); }
.chip.on, .seg-b.on { color: var(--accent); border-bottom-color: var(--accent); }

.select, .date {
  font: inherit; font-size: 15px; font-weight: 300; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px dotted var(--ink-faint);
  padding: 8px 2px; min-height: 42px; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.select { padding-right: 22px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-light) 50%), linear-gradient(135deg, var(--ink-light) 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.select option { color: #2C2C2C; }
.date::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
html.dark .date::-webkit-calendar-picker-indicator { filter: invert(1); }

.btn, .bt-main {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: 0; cursor: pointer;
  font-size: 13px; font-weight: 400; letter-spacing: 1px;
  border: 1px solid var(--ink-faint); background: transparent; color: var(--ink);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary, .bt-main { border-color: var(--ink); }
@media (hover: hover) {
  .btn-primary:hover, .bt-main:hover { color: var(--accent); border-color: var(--accent); }
}
.btn:active, .bt-main:active { background: var(--wash); }
.btn-primary[disabled] { opacity: .3; pointer-events: none; }
.btn-quiet { border-color: transparent; color: var(--ink-light); font-weight: 300; }
.btn-quiet:hover { color: var(--accent); }
.btn-xl { width: 100%; min-height: 54px; }

.x { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 20px; font-weight: 300; line-height: 1; color: var(--ink-light); }
.x:hover { color: var(--ink); }

.stepper { display: flex; align-items: center; gap: 6px; }
.step-b { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink-faint); background: none; cursor: pointer; font-size: 18px; font-weight: 300; color: var(--ink-light); }
.step-b:hover { color: var(--accent); border-color: var(--accent); }
.step-b:active { background: var(--wash); }
.step-v { min-width: 84px; text-align: center; font-size: 32px; font-weight: 200; font-variant-numeric: tabular-nums; }

/* the bag form */
.bagform { display: grid; gap: var(--g); }
.bag-name-in {
  font: inherit; font-size: 20px; font-weight: 300; line-height: 1.4; color: var(--ink);
  background: none; border: 0; border-bottom: 1px dotted var(--ink-faint); padding: 0 0 6px; width: 100%; outline: none; border-radius: 0;
}
.bag-name-in::placeholder { color: var(--ink-faint); }
html.dark .bag-name-in::placeholder { color: var(--ink-light); opacity: .6; }
.bag-name-in:focus { border-bottom-color: var(--accent); }

/* roast: a strip of flat colour, light to dark */
.roast { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.roast-b { display: grid; gap: 8px; padding: 0 0 4px; cursor: pointer; background: none; border: 0; text-align: left; -webkit-tap-highlight-color: transparent; }
.roast-c { height: 8px; background: var(--c); transition: height .25s var(--ease), margin .25s var(--ease); margin-top: 6px; }
.roast-l { font-size: 11px; color: var(--ink-light); letter-spacing: .2px; white-space: nowrap; font-weight: 300; border-bottom: 1px solid transparent; justify-self: start; padding-bottom: 2px; }
.roast-b:hover .roast-l { color: var(--ink); }
.roast-b.on .roast-c { height: 14px; margin-top: 0; }
.roast-b.on .roast-l { color: var(--accent); border-bottom-color: var(--accent); }
html.dark .roast-c { box-shadow: 0 0 0 1px rgba(232, 224, 208, .12); }

.date-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-height: 42px; }
.date-pre { font-size: 13px; color: var(--ink-light); font-weight: 300; }
.rest-read { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 300; }
.rest-read b { font-weight: 400; }
.rest { width: 100%; height: auto; display: block; overflow: visible; }
.rest-peak { fill: var(--good); opacity: .1; }
.rest-peak-label { font-family: 'Caveat', cursive; font-size: 13px; fill: var(--good); text-anchor: middle; }
.rest-area { fill: var(--ink); opacity: .04; }
.rest-line { fill: none; stroke: var(--ink-light); stroke-width: 1; }
.rest-range { fill: var(--accent); opacity: .14; }
.rest-today { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; }
.rest-dot { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.rest-axis { font-size: 9px; fill: var(--ink-light); letter-spacing: .4px; }
.rest-axis-r { text-anchor: end; }

/* ── sheets: the colophon card, up from the bottom ─────────────────────── */

.sheet-scrim { position: fixed; inset: 0; z-index: 800; background: var(--scrim); opacity: 0; transition: opacity .3s ease; }
.sheet-scrim.open { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 810;
  max-width: 640px; margin: 0 auto; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border: 1px solid var(--ink-faint); border-bottom: 0;
  padding: calc(var(--g) * 1.5) 24px calc(var(--g) * 1.5 + env(safe-area-inset-bottom));
  display: grid; gap: var(--g); align-content: start;
  transform: translateY(100%); transition: transform .34s var(--ease);
}
.sheet.open { transform: none; }
.sheet-grip { display: none; }
.sheet-x { position: absolute; top: 12px; right: 12px; }
.sheet-title { font-size: 22px; font-weight: 400; line-height: 1.4; padding-right: 40px; }
.sheet-note { margin-top: calc(var(--g) * -.5); font-size: 13px; font-weight: 300; line-height: var(--g); color: var(--ink-light); }
.sheet-h { font-size: 11px; font-weight: 400; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light); margin-top: calc(var(--g) * .5); padding-top: var(--g); border-top: 1px dotted var(--ink-faint); }
.sheet-p { font-size: 14px; line-height: var(--g); font-weight: 300; margin-top: calc(var(--g) * -.5); }

/* taste */
.drain { display: grid; gap: 8px; padding-bottom: var(--g); border-bottom: 1px dotted var(--ink-faint); }
.drain-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.drain-read { font-size: 20px; text-align: right; display: grid; opacity: 1; }
.drain-read small { font-family: 'Outfit', sans-serif; font-size: 11px; color: var(--ink-light); letter-spacing: .2px; font-weight: 300; }

.tastes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.taste {
  display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 64px; cursor: pointer;
  background: none; border: 1px dotted var(--ink-faint);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.taste:hover { border-color: var(--ink-light); }
.taste-l { font-size: 15px; font-weight: 400; }
.taste-h { font-size: 12px; color: var(--ink-light); line-height: 1.4; font-weight: 300; }
.taste.on { border: 1px solid var(--accent); background: var(--wash); color: var(--accent); }
.taste-great { grid-column: 1 / -1; min-height: 54px; }
.taste-great.on { border-color: var(--good); color: var(--good); background: rgba(110, 139, 91, .08); }

/* verdict */
.v-meta { padding-right: 40px; line-height: var(--g); }
.v-head { font-size: 26px; font-weight: 400; line-height: 1.3; margin-top: calc(var(--g) * -.5); animation: rise .5s var(--ease); }
.v-head.is-great { color: var(--good); }
.v-why { font-size: 14.5px; line-height: var(--g); font-weight: 300; margin-top: calc(var(--g) * -.5); }
.v-fix { display: grid; gap: 4px; padding: var(--g) 0; border-top: 1px dotted var(--ink-faint); border-bottom: 1px dotted var(--ink-faint); animation: rise .5s .08s var(--ease) both; }
.v-fix-big { font-size: 22px; font-weight: 300; line-height: 1.3; margin-top: 4px; color: var(--accent); }
.v-fix-small { font-size: 12.5px; color: var(--ink-light); font-variant-numeric: tabular-nums; font-weight: 300; }
.v-expect { margin-top: 8px; font-size: 13px; font-weight: 300; line-height: var(--g); }
.v-ev { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-light); margin-top: calc(var(--g) * -.5); font-weight: 300; }
.v-model summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.v-model summary::-webkit-details-marker { display: none; }
.v-model summary::after { content: '+'; font-size: 16px; color: var(--ink-light); font-weight: 300; }
.v-model[open] summary::after { content: '−'; }
.v-model-body { display: grid; gap: 10px; animation: rise .35s var(--ease); }
.v-act { display: grid; gap: 4px; }

.verdict-notes { list-style: none; display: grid; gap: 8px; }
.verdict-notes li { font-size: 12.5px; line-height: 1.6; color: var(--ink-light); padding-left: 16px; position: relative; font-weight: 300; }
.verdict-notes li::before { content: '—'; position: absolute; left: 0; color: var(--ink-faint); font-size: 11px; }

/* chart */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.ch-grid { stroke: var(--ink-faint); stroke-width: .6; opacity: .45; stroke-dasharray: 1 3; }
.ch-grid-5 { opacity: .8; }
.ch-tick { font-size: 9px; fill: var(--ink-light); text-anchor: middle; font-variant-numeric: tabular-nums; }
.ch-tick-y { text-anchor: end; }
.ch-zone { fill: var(--good); fill-opacity: .08; stroke: var(--good); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-zone-label { font-family: 'Caveat', cursive; font-size: 13px; fill: var(--good); text-anchor: middle; }
.ch-dot { fill: var(--ink); }
.ch-here { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.ch-next { fill: var(--accent); stroke: var(--paper); stroke-width: 2; animation: pop .6s .5s var(--ease) both; }
.ch-arrow { stroke: var(--accent); stroke-width: 1.4; fill: none; stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw .8s .15s var(--ease) forwards; }
.ch-arrowhead { stroke: var(--accent); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; animation: pop .4s .8s var(--ease) both; }
.ch-axis { font-family: 'Caveat', cursive; font-size: 13px; fill: var(--ink-light); }
.ch-axis-r { text-anchor: end; }
.ch-axis-mid { text-anchor: middle; font-family: 'Outfit', sans-serif; font-size: 9px; letter-spacing: .6px; }
.ch-axis-v { text-anchor: middle; font-family: 'Outfit', sans-serif; font-size: 9px; letter-spacing: .6px; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; } to { opacity: 1; transform: scale(1); transform-box: fill-box; transform-origin: center; } }

/* why */
.rules { width: 100%; border-collapse: collapse; font-size: 13px; }
.rules th { text-align: left; font-size: 10px; font-weight: 400; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light); padding: 0 8px 8px 0; }
.rules td { padding: 10px 10px 10px 0; border-top: 1px dotted var(--ink-faint); vertical-align: top; font-weight: 300; line-height: 1.5; }
.rules td:nth-child(2) { color: var(--ink-light); white-space: nowrap; }
.rules td:nth-child(3) { font-weight: 400; }
.rules td:last-child { padding-right: 0; text-align: right; }
.rules td .grade { margin: 0; }

.chain { list-style: none; display: grid; }
.chain li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--ink-faint); }
.chain-k { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light); line-height: 1.8; }
.chain-v { font-size: 13px; line-height: 1.6; font-weight: 300; }

.learned { list-style: none; display: grid; }
/* a list that runs into the next section's rule doesn't draw its own */
.chain li:last-child, .learned li:last-child, .evidence li:last-child { border-bottom: 0; }
.learned li { font-size: 13px; font-weight: 300; padding: 8px 0 8px 18px; border-bottom: 1px dotted var(--ink-faint); position: relative; }
.learned li::before { content: '—'; position: absolute; left: 0; color: var(--ink-faint); font-size: 11px; }

.grades { list-style: none; display: grid; gap: calc(var(--g) * .5); }
.grades li { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 300; line-height: var(--g); }
.grades .grade { margin: 0; }
.grade { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; font-size: 9.5px; font-weight: 500; flex: none; margin: 0 6px 0 0; vertical-align: middle; }
.g-a { border: 1px solid var(--good); color: var(--good); }
.g-b { border: 1px solid var(--ink-light); color: var(--ink-light); }
.g-c { border: 1px dotted var(--accent); color: var(--accent); }
.evidence { list-style: none; display: grid; }
.evidence li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dotted var(--ink-faint); font-size: 13px; line-height: 1.45; font-weight: 300; }
.evidence small { display: block; font-size: 11px; color: var(--ink-light); margin-top: 3px; line-height: 1.45; }

/* ── brew timer: numbers you can read from across the counter ─────────── */

.brew { position: fixed; inset: 0; z-index: 900; background: var(--paper); opacity: 0; transition: opacity .3s ease; overflow-y: auto; }
.brew.open { opacity: 1; }
.brew-inner {
  min-height: 100%; max-width: 640px; margin: 0 auto;
  padding: env(safe-area-inset-top) 24px calc(var(--g) + env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto auto 1fr auto;
}
.bt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px dotted var(--ink-faint); }
.bt-icon { width: 40px; height: 40px; margin: 0 -10px; border: 0; background: none; cursor: pointer; color: var(--ink-light); display: grid; place-items: center; transition: color .2s ease; }
.bt-icon:hover { color: var(--ink); }
.bt-icon[aria-pressed="false"] .bt-waves { display: none; }
.bt-icon[aria-pressed="true"] .bt-mute { display: none; }
.bt-recipe { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light); font-variant-numeric: tabular-nums; text-align: center; }
.bt-recipe b { font-weight: 400; color: var(--accent); }

.bt-time { padding-top: calc(var(--g) * 1.5); }
.bt-clock { font-size: 64px; font-weight: 200; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.bt-line { position: relative; height: 12px; margin-top: var(--g); }
.bt-line::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; border-top: 1px dotted var(--ink-faint); }
.bt-fill { position: absolute; left: 0; top: 5.5px; height: 1.5px; width: 0; background: var(--accent); }
.bt-tick { position: absolute; top: 2px; width: 1px; height: 9px; background: var(--ink-light); }
.bt-tick.is-move { height: 5px; top: 4px; opacity: .6; }
.bt-fin { position: absolute; top: 3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; border: 1px solid var(--good); background: var(--paper); }

.bt-now { align-self: center; padding: calc(var(--g) * 2) 0; }
.bt-now.swap { animation: stepIn .5s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bt-count { display: block; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light); margin-bottom: calc(var(--g) * .5); }
.bt-do { display: grid; }
.bt-verb { font-size: 18px; font-weight: 300; color: var(--ink-light); line-height: 1.3; }
.bt-g { font-size: 92px; font-weight: 200; letter-spacing: -3px; line-height: .95; font-variant-numeric: tabular-nums; }
.bt-g small { font-size: 22px; letter-spacing: 0; color: var(--ink-light); margin-left: 6px; font-weight: 300; }
.bt-word { font-size: 52px; font-weight: 200; letter-spacing: -1px; line-height: 1.05; }
.bt-pace { font-size: 14px; font-weight: 300; color: var(--ink-light); line-height: var(--g); margin-top: calc(var(--g) * .5); font-variant-numeric: tabular-nums; }
.bt-pace:empty { display: none; }
.bt-pace b { font-weight: 400; color: var(--accent); }
.bt-hint { font-size: 15px; font-weight: 300; line-height: 1.55; margin-top: calc(var(--g) * .5); max-width: 420px; min-height: calc(var(--g) * 2); }

.bt-foot { display: grid; gap: calc(var(--g) * .75); }
.bt-next { font-size: 13px; font-weight: 300; color: var(--ink-light); font-variant-numeric: tabular-nums; padding-top: calc(var(--g) * .75); border-top: 1px dotted var(--ink-faint); }
.bt-next b { font-weight: 400; color: var(--ink); }
.bt-main { width: 100%; min-height: 56px; }
.bt-main.is-ready { color: var(--accent); border-color: var(--accent); }

@media (max-height: 700px) {
  .bt-clock { font-size: 52px; }
  .bt-g { font-size: 76px; }
  .bt-now { padding: var(--g) 0; }
}

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}