@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/SourceSerif4-Variable.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/SourceSerif4-VariableItalic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
/* block, not swap: a stand-in script is worse than a note that shows late */
@font-face {
  font-family: "Homemade Apple";
  src: url("/static/fonts/HomemadeApple-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
:root {
  --serif: "Source Serif 4", Georgia, serif;
  --hand: "Homemade Apple", cursive;
  --gutter: 1.5rem;
}
:root, :root[data-theme="cobalt"] {
  color-scheme: light;
  --page-background: #fffdf8;
  --page-color: #200f1a;
  --link-color: #2046e8;
  --muted-color: #71676c;
  --accent-color: #ff381d;
  /* the accent darkened for small type, to 5:1 on the paper */
  --flag-color: #d42b14;
  --hairline: color-mix(in srgb, var(--muted-color) 42%, transparent);
  --fill: color-mix(in srgb, currentColor 8%, transparent);
}
:root[data-theme="cobalt"] ::selection { background: var(--accent-color); color: var(--page-color); }
:root[data-theme="cobalt"] :focus-visible { outline: 2px solid var(--link-color); outline-offset: 2px; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-background: #000;
  --page-color: #ededed;
  --link-color: #4d8eff;
  --muted-color: #8a8a8a;
  --accent-color: #ff6a4d;
  --flag-color: var(--accent-color);
  --hairline: color-mix(in srgb, var(--muted-color) 55%, transparent);
  --fill: color-mix(in srgb, currentColor 10%, transparent);
}
* { box-sizing: border-box; }
html { background: var(--page-background); scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--page-background);
  color: var(--page-color);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.45;
}
a, a:visited { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.page { padding: 0 var(--gutter) 3rem; }

/* ---- running head: the site nav set like the head of a printed page, in
   spaced capitals, ink not link blue ---- */
.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 0 2rem;
  padding: 1rem 0 0.8rem; line-height: 1;
}
.topbar h1 { font: inherit; letter-spacing: inherit; margin: 0; white-space: nowrap; }
.topbar h1 a { color: inherit; }
.topbar h1 .crumb { color: var(--muted-color); font-weight: 400; }
nav.tabs { display: flex; gap: 1.9rem; }
nav.tabs > a, nav.tabs > a:visited { color: var(--page-color); font-weight: 600; white-space: nowrap; padding-bottom: 0.3em; border-bottom: 1px solid transparent; }
nav.tabs > a:hover { text-decoration: none; border-bottom-color: var(--hairline); }
nav.tabs > a[aria-current="page"] { border-bottom-color: var(--page-color); }
.topbar .acts { justify-self: end; display: flex; gap: 1.4rem; font-weight: 400; white-space: nowrap; }
.topbar .acts button { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; color: var(--muted-color); cursor: pointer; }
.topbar .acts button:hover { color: var(--page-color); }

.layout { display: inline-flex; gap: 0.6ch; }
.layout[hidden] { display: none; }
.layout button + button::before { content: "/"; color: var(--muted-color); margin-right: 0.6ch; }
.topbar .acts .layout button[aria-pressed="true"] { color: var(--page-color); cursor: default; }

/* ---- masthead: after the Owner's Manual cover ----
   Three sizes and two weights: the house in bold at under half the title's
   size (nearer half on a phone, where it would otherwise get too small), the
   title between two rules that run its width, the season in roman below. The
   back pages and the suppliers print the title alone. */
.masthead { text-align: center; margin: 0 auto 2.5rem; font-family: var(--serif); font-optical-sizing: auto; letter-spacing: 0; }
.masthead .house { font-size: clamp(21px, 2vw, 27px); font-weight: 650; line-height: 1; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.masthead h2 {
  width: fit-content; max-width: 100%; margin: 0 auto;
  font-weight: 650; font-size: clamp(40px, 4.6vw, 62px); line-height: 1; letter-spacing: -0.022em;
  padding: 0.13em 0.12em 0.19em; border-block: 1.5px solid var(--page-color);
}
.masthead .season { font-size: clamp(16px, 1.35vw, 18px); font-weight: 400; line-height: 1; margin: 0.95rem 0 0; font-variant-numeric: oldstyle-nums proportional-nums; }

/* ---- spaced small capitals: the running head, the flags over a headline,
   the kickers, the heads of the ledger's columns, and the small buttons under
   the order form. One size and one tracking wherever they appear, in the
   font's own small capitals, which keep their weight where capitals scaled
   down would go thin ---- */
.topbar, .deck button.linklike,
.entry .flags, .verdict-entry .flags, .part .kicker, .roasters h4, .prose thead th,
.ledger > thead th, .ledger .group > th, .ledger .flags, .detail h3, .mini thead th {
  font-family: var(--serif); font-size: 14px; font-style: normal; font-weight: 600;
  font-variant-caps: all-small-caps; letter-spacing: 0.08em; text-transform: none;
}

/* ---- the order form: the filters read as one sentence, printed like the
   order form at the back of a mail-order catalog. A blank shows its printed
   default in grey on a dotted line; a choice is written in by hand, in ink,
   and writes itself in. The count is set in the sentence. ---- */
.deck { padding: 3rem 0 0; }
.deck form { max-width: 58rem; margin: 0 auto; text-align: center; font-family: var(--serif); font-size: 17px; letter-spacing: 0; }
.deck .ask { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.4rem 1.1rem; margin: 0 0 1rem; }
.deck .sentence { margin: 0; }
.deck .options { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.3rem 1.6rem; margin: 0.9rem 0 0; }
.deck .field { position: relative; display: inline-block; max-width: 100%; }
/* the field is as wide as its placeholder (coffee.js measures it), so the
   rule under it ends where the words do */
.deck #q {
  width: var(--q-w, 30rem); max-width: 100%;
  font: inherit; font-size: 18px; text-align: center; text-overflow: ellipsis; color: var(--page-color); background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 0.2rem 0;
}
.deck #q::placeholder { font-style: italic; color: var(--muted-color); }
.deck #q:focus { outline: 0; border-bottom-color: var(--page-color); }
.deck select {
  appearance: none; field-sizing: content;
  font: italic 1em var(--serif); color: var(--muted-color); background: none;
  border: 0; border-bottom: 1px dotted var(--muted-color); border-radius: 0;
  padding: 0 0.05em; margin: 0; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.deck select:is(:hover, :focus-visible) { outline: 0; color: var(--page-color); border-bottom: 1px solid var(--page-color); }
/* one pen: the handwriting is 14px wherever it appears */
.deck select.inked {
  font: 14px/1 var(--hand); color: var(--page-color); padding: 0 0.1em;
  border-bottom-style: solid; border-bottom-color: var(--hairline);
}
.deck select.inked:is(:hover, :focus-visible) { border-bottom-color: var(--page-color); }
.deck option { font: italic 16px var(--serif); }
#count { font-variant-numeric: oldstyle-nums tabular-nums; font-weight: 600; }
#filters:not(.more) .narrow:not(.set) { display: none; }
.deck button.linklike { background: none; border: 0; padding: 0; line-height: 1; color: var(--muted-color); cursor: pointer; white-space: nowrap; }
.deck button.linklike:hover { color: var(--page-color); }
.deck button.linklike[hidden] { display: none; }
.writing { animation: write 0.75s cubic-bezier(0.4, 0.1, 0.3, 1) both; }
@keyframes write {
  from { clip-path: inset(-1em 100% -1em calc(-1 * var(--bleed, 0.5em))); }
  to { clip-path: inset(-1em -1em -1em calc(-1 * var(--bleed, 0.5em))); }
}
/* reset rubs the handwriting out */
#filters.erasing :is(select.inked, #note, #q:not(:placeholder-shown)) { opacity: 0; filter: blur(3px); translate: 0.3em 0; transition: opacity 0.25s, filter 0.25s, translate 0.25s; }

/* the note: a pen note in the margin beside the search, an arrow to the field.
   It grows upward from the field, into the blank margin beside the season. */
#note:empty { display: none; }
#note {
  --bleed: 3rem;
  position: absolute; bottom: 0.3rem; left: calc(100% + 2.8rem); width: 13.5rem;
  font: 14px/1.6 var(--hand); color: var(--page-color); text-align: left; text-wrap: balance; rotate: -4deg;
}
#note::before {
  content: ""; position: absolute; left: -2.6rem; bottom: 0.2rem; width: 2.2rem; height: 1.1rem; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 5C24 1 12 3 3 11'/%3E%3Cpath d='M9 11.5 3 11l1.6-5.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
#note.busy { animation: write 0.75s cubic-bezier(0.4, 0.1, 0.3, 1) both, breathe 1.6s 0.75s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: 0.35; } }
@media (max-width: 68rem) {
  #note { position: static; display: block; width: auto; margin-top: 0.6rem; text-align: center; rotate: -1.5deg; }
  #note::before { display: none; }
}

/* the picker: where the browser lets it, a slip of paper under the blank,
   the current choice ticked by hand */
@supports (appearance: base-select) {
  .deck select, .deck ::picker(select) { appearance: base-select; }
  .deck select { display: inline; min-block-size: 0; border-top: 0; border-inline: 0; border-radius: 0; background: none; }
  .deck select::picker-icon { display: none; }
  .deck ::picker(select) {
    margin-block: 0.45rem; padding: 0.5rem 0; border: 1px solid var(--page-color); border-radius: 0;
    background: var(--page-background); color: var(--page-color);
    box-shadow: 5px 6px 0 color-mix(in srgb, var(--page-color) 10%, transparent);
    opacity: 0; translate: 0 -0.35rem; rotate: -0.8deg;
    transition: opacity 0.16s, translate 0.16s, overlay 0.16s allow-discrete, display 0.16s allow-discrete;
  }
  .deck select:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style { .deck select:open::picker(select) { opacity: 0; translate: 0 -0.35rem; } }
  .deck option {
    gap: 0.5rem; padding: 0.15rem 1.4rem 0.15rem 0.7rem; line-height: 1.45; color: var(--page-color); background: none; text-align: left; white-space: nowrap;
  }
  .deck option::checkmark {
    content: ""; width: 0.8rem; height: 0.8rem; background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 8.5c1.2.6 2.6 2.2 3.6 4.6C7 8.4 10.2 4 14.8 1.2'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .deck option:not(:checked)::checkmark { visibility: hidden; }
  .deck select hr { margin: 0.35rem 0.7rem; border: 0; border-top: 1px solid var(--hairline); }
  /* a marker stroke across the option under the pointer */
  .deck option:is(:hover, :focus-visible) {
    outline: 0;
    background: linear-gradient(transparent 38%, color-mix(in srgb, var(--accent-color) 22%, transparent) 38% 88%, transparent 88%) no-repeat 0.4rem 0 / calc(100% - 0.8rem) 100%;
  }
}

:root[data-layout="catalog"] .ledger-only,
:root[data-layout="ledger"] .catalog-only,
:root[data-layout="catalog"] #ledger,
:root[data-layout="ledger"] #catalog { display: none; }

/* ---- the ledger: the catalog as a price list, and the roasters as a
   directory, in the catalog's type. The heads in small capitals over a rule,
   hairlines between the rows, the figures lining up in their columns, and a
   name in ink with its particulars under it in grey. ---- */
.sheet { max-width: 64rem; margin: 0 auto; }
#ledger { margin-top: 2.5rem; }
#ledger .table-scroll { margin-bottom: 1rem; }
.meta { margin: 0; text-align: center; font-size: 15px; font-style: italic; color: var(--muted-color); }
.meta:empty { display: none; }
.table-scroll { overflow-x: clip; margin-block: 0 1.5rem; }
table.ledger { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }
.ledger > * > tr > * { padding: 0.65rem 1.25rem 0.65rem 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--hairline); }
.ledger > * > tr > :last-child { padding-right: 0; }
.ledger .num { text-align: right; }
.ledger > thead th {
  position: sticky; top: 0; z-index: 1; padding-block: 1rem 0.45rem;
  background: var(--page-background); border-bottom-color: var(--page-color); color: var(--muted-color); white-space: nowrap;
}
.ledger > thead button { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; }
.ledger > thead button:hover, .ledger > thead th[aria-sort] { color: var(--page-color); }
/* the column the list is sorted by has its head in ink and an arrow, on the
   side away from the figures so the head stays over them */
.ledger > thead th[aria-sort] button::after { content: "\2009\2191"; }
.ledger > thead th[aria-sort="descending"] button::after { content: "\2009\2193"; }
.ledger > thead th.num[aria-sort] button::after { content: none; }
.ledger > thead th.num[aria-sort] button::before { content: "\2191\2009"; }
.ledger > thead th.num[aria-sort="descending"] button::before { content: "\2193\2009"; }
.ledger .name, .ledger .name:visited { color: var(--page-color); font-weight: 600; }
.ledger .flags { margin-left: 0.7em; color: var(--flag-color); white-space: nowrap; }
.ledger .flags.tier { color: var(--muted-color); }
.ledger .sub { display: block; margin-top: 0.1rem; font-size: 13.5px; color: var(--muted-color); text-wrap-style: pretty; }
.ledger .aside { font-style: italic; font-weight: 400; color: var(--muted-color); }
.ledger .unit { display: none; }
#offer-table td.no { color: var(--muted-color); }
#offer-table td.coffee { min-width: 15rem; }
#offer-table td:is(.supplier, .pack) { white-space: nowrap; }
#offer-table td.kilo { font-weight: 600; }
#offer-table > tbody > tr[data-coffee] { cursor: pointer; }
#offer-table > tbody > tr[data-coffee]:hover .name { text-decoration: underline; }
#offer-table > tbody > tr[data-coffee]:focus-visible { outline-offset: -2px; }
#offer-table > tbody > tr.open > td { border-bottom-color: transparent; }

/* a row opened: the painting, the particulars, and every pack */
#offer-table > tbody > tr.detail > td { padding: 0.35rem 0 2.25rem; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: start; }
.detail-grid.has-art { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1fr); }
.detail .art { margin: -0.4rem 0 0; }
.detail .art img { display: block; width: 100%; height: auto; }
.detail h3 { margin: 0 0 0.4rem; }
.detail section + section { margin-top: 1.3rem; }
.detail p { margin: 0; text-wrap: pretty; }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.15rem 1.25rem; margin: 0; }
dl.facts dt { color: var(--muted-color); }
dl.facts dd { margin: 0; }
table.mini { border-collapse: collapse; }
.mini th, .mini td { padding: 0.25rem 1.25rem 0.25rem 0; border-bottom: 1px solid var(--hairline); text-align: left; }
.mini :is(th, td):last-child { padding-right: 0; }
.mini thead th { border-bottom-color: var(--page-color); color: var(--muted-color); }
.mini tr.current td { font-weight: 600; }
.detail .links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; margin-top: 1.3rem; }

/* the directory: the roasters under where they are */
.roster .group > th { padding-top: 2.25rem; color: var(--page-color); }
.roster > tbody:first-of-type .group > th { padding-top: 1.1rem; }
.roster td:is(.roaster, .ship, .roasting, .rest) { white-space: nowrap; }
.roster td.count { padding-right: 2.25rem; }
.roster td.notes { font-size: 14.5px; text-wrap: pretty; }
#panel-suppliers { padding-top: 3rem; }
#panel-suppliers .sheet { max-width: 72rem; }

/* ---- catalog: one entry per coffee, after the Peterman catalog ----
   A drawing beside the copy, the sides alternating down the page. No rules:
   whitespace separates the entries. */
.catalog { max-width: 62rem; margin: 3.5rem auto 2rem; }
.entry {
  display: grid; grid-template-columns: 21rem minmax(0, 34rem); gap: 0 4.5rem;
  justify-content: center; align-items: center; margin: 0 0 6rem; scroll-margin-top: 3rem;
}
.entry:nth-child(even) { grid-template-columns: minmax(0, 34rem) 21rem; }
.entry:nth-child(even) .art { order: 2; }
.entry:not(.has-art) { grid-template-columns: minmax(0, 34rem); }
.entry .art { margin: 0; position: relative; }
.entry .art img { display: block; width: 100%; height: auto; }
.entry .note {
  position: absolute; top: -1.2rem; width: 12rem; margin: 0;
  font: 14px/1.55 var(--hand); letter-spacing: 0; color: var(--page-color); transform: rotate(-7deg); text-wrap: balance;
}
.entry .note.left { left: -8.5rem; text-align: right; }
.entry .note.right { right: -8.5rem; transform: rotate(6deg); }
/* a prop low on the package gets its note under the drawing, not over it;
   on the side facing the copy, the note keeps out of the gutter */
.entry .note.low { top: auto; bottom: -2.6rem; }
.entry .note.left.inner { left: -1rem; }
.entry .note.right.inner { right: -1rem; }
.entry .arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.entry .arrow path { fill: none; stroke: var(--page-color); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* figures: oldstyle in the copy, where they sit among lowercase; lining in the
   title-case headlines and in the price columns. The copy is spaced in half
   lines of its story: every gap below is a whole or half number of --half. */
.entry .copy {
  --story: 18px; --half: calc(var(--story) * 1.55 / 2);
  font-family: var(--serif); letter-spacing: 0; font-variant-numeric: oldstyle-nums proportional-nums;
}
.entry .flags { margin: 0 0 calc(var(--half) / 2); line-height: normal; color: var(--flag-color); }
.entry .headline {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 700; font-variant-numeric: lining-nums;
  font-size: 34px; line-height: 1.06; letter-spacing: -0.016em; margin: 0 0 var(--half); text-wrap: balance;
}
.entry .story { font-size: var(--story); line-height: 1.55; margin: 0 0 var(--half); text-wrap: pretty; }
.entry .spec { font-size: 15px; line-height: 1.5; margin: calc(var(--half) * 2) 0 0; text-wrap: pretty; }
.entry .spec .name, .entry .spec .name:visited { color: var(--page-color); font-weight: 700; }
.entry .spec .name:hover { text-decoration-color: var(--link-color); }
/* the price list: pack, a dotted leader, then the currency and the figure in
   columns of their own, so the figures line up on the right */
.entry .prices {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline;
  width: min(100%, 19rem); margin: var(--half) 0 0; font-size: 15px; line-height: 1.6; font-variant-numeric: lining-nums tabular-nums;
}
.entry .prices div, .entry .prices dd { display: contents; }
.entry .prices dt { display: flex; align-items: baseline; margin: 0; white-space: nowrap; }
.entry .prices dt::after {
  content: ""; flex: 1; min-width: 1.5rem; height: 1px; margin: 0 0.55em;
  background: radial-gradient(circle, var(--muted-color) 0.75px, transparent 1.1px) 0 0 / 5px 1.5px repeat-x;
}
.entry .prices .cur { color: var(--muted-color); font-variant-caps: all-small-caps; letter-spacing: 0.05em; }
.entry .prices .fig { font-weight: 600; text-align: right; padding-left: 0.3em; }
/* the two lines under the list keep its line, 1.6 */
.entry .kilo { margin: calc(var(--half) / 2) 0 0; font-size: 15px; line-height: 1.6; font-style: italic; color: var(--muted-color); }
.entry .order { margin: 0; font-size: 15px; line-height: 1.6; }
/* the cover: the drawings in this view, each numbered on one line beneath */
.cover {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 3rem;
  max-width: 44rem; margin: 2.75rem auto 3rem;
}
.cover:empty { display: none; }
.cover a { display: block; text-align: center; color: var(--page-color); text-decoration: none; }
.cover img { width: 100%; height: auto; display: block; }
.cover span { display: block; margin-top: -0.1rem; font: 14px var(--serif); letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: oldstyle-nums proportional-nums; }
.cover a:hover span { text-decoration: underline; }
/* the cover ends and the entries begin: a running head between hairlines,
   as wide as the cover */
.divider {
  display: flex; align-items: center; gap: 1.2rem; width: 44rem; max-width: 100%; margin: 4rem auto 4.5rem;
  font: 600 11.5px/1 var(--serif); letter-spacing: 0.13em; text-transform: uppercase;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--page-color); }
.divider span { margin-right: -0.13em; }
.cover:empty + .divider { display: none; }
@media (max-width: 48rem) {
  .cover { gap: 1.5rem 1.25rem; margin-inline: 0.25rem; }
  .cover span { font-size: 13px; }
}
@media (max-width: 80rem) {
  .entry .note.left { left: -3rem; top: -2.8rem; }
  .entry .note.right { right: -3rem; top: -2.8rem; }
  .entry .note.low { top: auto; bottom: -3.2rem; }
}
@media (max-width: 72rem) {
  .entry .note.left { left: -1rem; }
  .entry .note.right { right: -1rem; }
}
@media (max-width: 60rem) {
  .entry .note { position: static; transform: none; width: auto; text-align: left; margin-top: 0.4rem; }
  .entry .note.right { transform: none; }
  .entry .arrow { display: none; }
  .entry, .entry:nth-child(even), .entry:not(.has-art) { grid-template-columns: minmax(0, 34rem); gap: 0; margin-bottom: 4.5rem; }
  .entry:nth-child(even) .art { order: 0; justify-self: end; }
  .entry .art { width: min(19rem, 78%); margin-bottom: 1.25rem; }
  .entry .headline { font-size: 29px; }
  .entry .copy { --story: 17px; }
}

footer.site { margin-top: 3rem; display: flex; justify-content: center; gap: 1.5rem; font-size: 14px; }

@media (max-width: 60rem) {
  .table-scroll { overflow-x: auto; }
  .ledger > thead th { position: static; }
  #offer-table td.coffee { min-width: 12rem; }
}
@media (max-width: 48rem) {
  :root { --gutter: 1rem; }
  /* two lines on a phone: the house and the switches, then the sections */
  .topbar { grid-template-columns: auto 1fr; gap: 0.9rem 1rem; padding-top: 0.9rem; font-size: 12.5px; }
  nav.tabs { order: 1; grid-column: 1 / -1; justify-content: space-between; gap: 0.5rem 0.75rem; }
  .topbar .acts { gap: 1rem; }
  .deck .field { width: 100%; }
  .deck { padding-top: 2rem; }
  .deck form { font-size: 16px; }
  .deck #q { font-size: 17px; }
  #panel-suppliers { padding-top: 2rem; }
  /* on a phone a row of the ledger is an entry: the name and its figure on
     the first line, the particulars under it, then the roaster and the pack.
     The heads stay above the list as a row of ways to sort it. */
  .ledger, .ledger > tbody, .ledger > thead { display: block; }
  .ledger > thead > tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--page-color); }
  .ledger > thead th { padding: 0; border: 0; }
  .ledger > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--hairline); }
  .ledger > tbody > tr > * { padding: 0; border: 0; }
  #offer-table td:is(.no, .beans, .ship), #offer-table td.supplier .sub, #offer-table th:is([data-sort="price_dkk"], [data-sort="shipping_dkk"]) { display: none; }
  /* the name runs under its figure's column, so the pack below does not narrow it */
  #offer-table td.coffee { grid-row: 1; grid-column: 1 / -1; min-width: 0; padding-right: 3.75rem; }
  #offer-table td.kilo { grid-row: 1; grid-column: 2; justify-self: end; }
  #offer-table td.pack .sub { display: inline; margin-left: 0.4em; }
  #offer-table > tbody > tr.open { border-bottom-color: transparent; }
  #offer-table > tbody > tr.detail { display: block; padding-top: 0; }
  #offer-table > tbody > tr.detail > td:first-child { display: none; }
  #offer-table > tbody > tr.detail > td { display: block; padding-top: 0.25rem; }
  .detail-grid, .detail-grid.has-art { grid-template-columns: minmax(0, 1fr); }
  .detail .art { width: 8rem; margin: 0; }
  /* a roaster: the name and its count, then each particular on a line of
     its own, named */
  .roster > thead { display: none; }
  .roster > tbody > tr.group { display: block; padding: 0; border: 0; }
  .roster .group > th { display: block; padding: 2rem 0 0.45rem; border-bottom: 1px solid var(--page-color); }
  .roster td:is(.ship, .roasting, .rest, .notes) { grid-column: 1 / -1; white-space: normal; }
  .roster td:empty { display: none; }
  .roster td[data-label]::before { content: attr(data-label) "\2002"; font-style: italic; color: var(--muted-color); }
  .roster td.ship .sub { display: inline; }
  .roster td.ship .sub::before { content: ", "; }
  .roster td.count { padding-right: 0; color: var(--muted-color); }
  .ledger .unit { display: inline; }
}
@media (max-width: 23rem) {
  .topbar h1 .crumb { display: none; }
  .masthead h2 { font-size: 34px; }
  .masthead .house { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .writing, #note.busy { animation: none; } }

/* ---- back pages: the log, the verdicts and the notes, after the small
   print at the back of the Owner's Manual. One column of text, with a margin
   on each side for the dates and the paintings. ---- */
.back { --col: 34rem; --margin: 10rem; --gap: 2.5rem; font-family: var(--serif); letter-spacing: 0; font-variant-numeric: oldstyle-nums proportional-nums; padding-top: 3rem; }
.back .masthead { margin-bottom: 1.5rem; }
.back a:hover { text-decoration: none; }
.part {
  display: grid; grid-template-columns: var(--margin) minmax(0, var(--col)) var(--margin); column-gap: var(--gap);
  justify-content: center; margin: 7rem 0 0; scroll-margin-top: 1.5rem;
}
.part > * { grid-column: 2; }
.part .kicker { margin: 0 0 0.55rem; }
.part .headline {
  font-optical-sizing: auto; font-weight: 700; font-variant-numeric: lining-nums; font-size: 34px; line-height: 1.06; letter-spacing: -0.016em;
  margin: 0 0 1.1rem; text-wrap: balance;
}
.prose { font-size: 18px; line-height: 1.55; }
.prose > * { margin: 0 0 0.75em; }
.prose p, .prose li { text-wrap: pretty; }
.prose h2, .part .sub {
  font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 2.4rem 0 0.7rem;
}
.prose a, .prose a:visited {
  color: inherit; text-decoration: underline 1px var(--hairline); text-underline-offset: 0.18em;
}
.prose a:hover { text-decoration-color: var(--page-color); }
.prose ol { padding-left: 1.4em; }
.prose ol li::marker { font-variant-numeric: oldstyle-nums tabular-nums; }
.prose li + li { margin-top: 0.25em; }
/* a list of sources is small print: one paragraph each, the source first */
.prose ul { list-style: none; padding: 0; font-size: 15px; line-height: 1.5; }
.prose ul li + li { margin-top: 0.7em; }
.prose ul li > a:first-child { font-weight: 600; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; margin: 1rem 0 1.5rem; }
.prose th, .prose td { padding: 0.4rem 1.25rem 0.4rem 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--hairline); }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose thead th { border-bottom-color: var(--page-color); }
.prose td:first-child { font-weight: 600; }
/* a glossary is small print too: the term run in, in bold, before its meaning */
.prose dl { font-size: 15px; line-height: 1.5; }
.prose dt { display: inline; font-weight: 600; }
.prose dt::after { content: ". "; }
.prose dd { display: inline; margin: 0; }
.prose dd p { display: inline; margin: 0; }
.prose dd::after { content: ""; display: block; margin-bottom: 0.45em; }
.back .tally { font-size: 16px; font-style: italic; color: var(--muted-color); }

/* the log: one entry an order, the date in the margin beside its first line */
.order {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline;
  margin: 3.5rem 0 0; scroll-margin-top: 1.5rem;
}
.order .when { grid-column: 1; margin: 0; text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: oldstyle-nums tabular-nums; }
.order .when .year { display: block; font-weight: 400; color: var(--muted-color); }
.order-body { grid-column: 2; }
.order .line { margin: 0; font-size: 18px; line-height: 1.55; }
.order .bags { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1.5rem; margin: 0.9rem 0 0.2rem; }
.order .bag { display: block; width: 9.5rem; text-align: center; color: var(--page-color); }
.order .bag img { display: block; width: 100%; height: auto; margin-top: calc(var(--bare, 0) * -125%); }
.order .bag span { display: block; margin-top: -0.2rem; font-size: 14px; letter-spacing: 0.01em; }
.order a.bag:hover span { text-decoration: underline; }
.back .prices {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: last baseline;
  width: min(100%, 27rem); margin: 1rem 0 0; font-size: 15px; line-height: 1.5; font-variant-numeric: lining-nums tabular-nums;
}
.back .prices div, .back .prices dd { display: contents; }
.back .prices dt { display: flex; align-items: last baseline; margin: 0; }
.back .prices dt::after {
  content: ""; flex: 1; min-width: 1.5rem; height: 1px; margin: 0 0.55em;
  background: radial-gradient(circle, var(--muted-color) 0.75px, transparent 1.1px) 0 0 / 5px 1.5px repeat-x;
}
.back .prices dt a { color: var(--page-color); }
.back .prices dt a:hover { text-decoration: underline; }
.back .prices .cur { color: var(--muted-color); font-variant-caps: all-small-caps; letter-spacing: 0.05em; }
.back .prices .fig { font-weight: 600; text-align: right; padding-left: 0.3em; }
.back .prices .aside { grid-column: 1 / -1; margin: 0 0 0.2rem; font-style: italic; color: var(--muted-color); }
.order .kilo, .order .status { margin: 0.45rem 0 0; font-size: 15px; font-style: italic; color: var(--muted-color); }
.order .status { margin-top: 0.1rem; }
.order .names, .order .tastings { list-style: none; padding: 0; margin: 0.8rem 0 0; font-size: 15px; line-height: 1.5; }
.order .names a { color: var(--page-color); }
.order .tastings li + li { margin-top: 0.45em; }
.order .tastings b { font-weight: 600; }

/* the verdicts: a coffee's painting in the margin, its note under it */
.verdict-entry { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; margin: 1.5rem 0 0; }
/* --top and --foot are the bare paper above and below the drawing, as parts
   of the sheet's height (coffee-back.js measures them); the layout closes
   over them and the note hangs under the drawing */
.back figure.art {
  --w: 100%; --sheet: calc(var(--w) * 1.25);
  grid-column: 1; width: var(--w); position: relative;
  margin: calc(var(--sheet) * var(--top, 0) * -1) 0 calc(3.2rem - var(--sheet) * var(--foot, 0));
}
.back figure.art img { display: block; width: 100%; height: auto; }
.verdict-entry .copy { grid-column: 2; }
/* the painting's own margin note, under it on the side of the prop it names */
.back .note {
  position: absolute; top: calc(100% * (1 - var(--foot, 0)) + 0.5rem); width: 11rem; margin: 0;
  font: 14px/1.55 var(--hand); color: var(--page-color); text-wrap: balance;
}
.back .note.left { left: -3rem; text-align: left; transform: rotate(-5deg); }
.back .note.right { right: -1rem; text-align: right; transform: rotate(4deg); }
.back .arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.back .arrow path { fill: none; stroke: var(--page-color); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.back .arrow path.halo { stroke: var(--page-background); stroke-width: 4.5; }
.verdict-entry .flags { margin: 0 0 0.45rem; color: var(--flag-color); }
.verdict-entry .said { margin: 0; font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.back .spec { margin: 0.8rem 0 0; font-size: 15px; line-height: 1.5; }
.back .spec .name, .back .spec .name:visited { color: var(--page-color); font-weight: 700; }
.back .spec .name:hover { text-decoration: underline; }
.roasters .worth { margin: 1.4rem 0 0; }
.roasters h4 { margin: 0 0 0.5rem; }
.roasters .worth p { margin: 0 0 0.5em; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.roasters .worth b { font-weight: 700; }

/* the rest chart, drawn from the table it stands for */
.back .chart { display: block; width: 100%; height: auto; margin: 0.4rem 0 1.5rem; overflow: visible; font-family: var(--serif); }
.back .chart text { fill: var(--page-color); font-size: 15px; font-variant-numeric: tabular-nums; }
.back .chart .axis text { fill: var(--muted-color); font-size: 13px; }
.back .chart .caption { fill: var(--muted-color); font-style: italic; font-size: 13px; }
.back .chart .rule { stroke: var(--hairline); stroke-width: 1; }
.back .chart .tick { stroke: var(--muted-color); stroke-width: 1; }
.back .chart .wash { fill: color-mix(in srgb, var(--page-color) 22%, transparent); }
.back .chart .pen { fill: none; stroke: var(--page-color); stroke-width: 1.4; stroke-linecap: round; }
.back .chart .span { fill: var(--muted-color); font-size: 14px; font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the equipment: each piece a name, a line, and its part numbers */
.kit { margin: 0.9rem 0 0; scroll-margin-top: 1.5rem; font-size: 18px; line-height: 1.55; }
/* with its painting, a piece of equipment is laid out as a verdict is */
.kit.has-art { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; margin-top: 1.5rem; }
/* the machines are the last thing in the back and get more room than a bag:
   the painting grows out of its margin into the page's, as far as that goes */
.kit.has-art .art { justify-self: end; --w: clamp(100%, 50vw - 21rem, 15rem); }
/* the painting already reaches into the page's margin, so its note stays under it */
.kit .note.left { left: 0; }
.kit.has-art .copy { grid-column: 2; }
.kit h3 { display: inline; margin: 0; font-size: inherit; font-weight: 700; }
.kit h3::after { content: ". "; }
.kit h3 + p { display: inline; }
.kit p { margin: 0; }
.kit p + p { margin-top: 0.55em; }
.kit table { border-collapse: collapse; width: min(100%, 26rem); margin: 0.8rem 0 0; font-size: 15px; line-height: 1.6; font-variant-numeric: lining-nums tabular-nums; }
.kit thead { display: none; }
.kit table, .kit tbody { display: block; }
.kit tr { display: flex; align-items: last baseline; }
.kit td { padding: 0; }
.kit td:first-child { display: flex; flex: 1; align-items: last baseline; }
.kit td:first-child::after {
  content: ""; flex: 1; min-width: 1.5rem; height: 1px; margin: 0 0.55em;
  background: radial-gradient(circle, var(--muted-color) 0.75px, transparent 1.1px) 0 0 / 5px 1.5px repeat-x;
}
.kit td:last-child { text-align: right; white-space: nowrap; }
/* part numbers: one click takes the whole number, ready to paste */
.kit code { font: 600 1em var(--serif); letter-spacing: 0.04em; user-select: all; }

@media (max-width: 60rem) {
  .back { --margin: 7.5rem; --gap: 1.75rem; }
  .part { grid-template-columns: var(--margin) minmax(0, var(--col)); }
  .order .bag { width: 7.5rem; }
}
@media (max-width: 48rem) {
  .back { padding-top: 2rem; }
  .part { grid-template-columns: minmax(0, 1fr); margin-top: 5rem; }
  .part > *, .order .when, .order .order-body, .verdict-entry .art, .verdict-entry .copy, .kit.has-art .art, .kit.has-art .copy { grid-column: 1; }
  .order, .verdict-entry, .kit.has-art { grid-template-columns: minmax(0, 1fr); }
  .order { margin-top: 3rem; }
  .order .when { text-align: left; font-size: 14px; font-variant-caps: all-small-caps; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
  .order .when .year { display: inline; color: inherit; font-weight: 600; }
  .order .bags { gap: 0.5rem 1rem; }
  .order .bag { width: calc((100% - 2rem) / 3); max-width: 8.5rem; }
  .back figure.art { --w: 9rem; }
  .verdict-entry .art, .kit.has-art .art { justify-self: center; }
  .kit.has-art .art { --w: 12rem; }
  .part .headline { font-size: 29px; }
  .prose, .order .line, .verdict-entry .said, .kit p { font-size: 17px; }
}