/* System fonts; no remote assets. Paper Party theme (draft/review/paper-party-2026-10-19): solid page colors, opaque
   reading surfaces, 2px outlines and short hard shadows. Its eight palettes (four flavors, light and dark) map onto
   the variables below; the kit's 56 token pairs pass their contrast checks, and the integrated states are checked
   again in the browser. Motion is short, selection-triggered, and disabled with reduced motion. */
:root {
  color-scheme: light dark;
  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --editorial: Georgia, "Times New Roman", serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --radius-control:16px; --hit:48px;
  --motion-press:120ms; --motion-color:240ms; --motion-arrival:360ms; --ease:cubic-bezier(.22,.8,.3,1);
  font-family: var(--font);
  font-synthesis: none;
  --bg:#FFF8E7; --surface:#FFFEF9; --text:#342820; --muted:#685748;
  --control-border:#A98763; --wash:#FFF0C4;
  --accent:#99420D; --cup:#FFD378; --button-text:#FFFFFF;
  --shadow:#DCC5A0; --focus:#2459A4; --card-shape:22px;
}
* { box-sizing: border-box; }
/* No wallpaper on any theme: the page is one solid color, so nothing sits behind text. */
body { margin: 0; color: var(--text); background-color: var(--bg); font-size: 1rem; line-height: 1.55;
  --line: color-mix(in srgb, var(--control-border) 50%, var(--surface)); }
body[data-flavor="2"] { --bg:#FFF2F5; --wash:#F9DCE7; --accent:#962A56; --control-border:#A67C8D; --shadow:#DDB8C9; --cup:#F6ADC9; }
body[data-flavor="3"] { --bg:#F6EFE5; --wash:#EBD8BF; --accent:#75462D; --control-border:#9C816A; --shadow:#D1B89B; --cup:#D9B18D; }
body[data-flavor="4"] { --bg:#F5F0FC; --wash:#E9DCF6; --accent:#693D91; --control-border:#9984AF; --shadow:#CDBBDD; --cup:#CDB5F4; }
a { color:inherit; text-underline-offset:4px; }
button, input, select { font:inherit; }
button, a, input, select, summary, label { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button, .buy { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:14px 22px; min-height:52px;
  border:2px solid var(--accent); border-radius:18px; background:var(--accent); color:var(--button-text); font-weight:700; cursor:pointer; text-decoration:none; }
button:disabled { opacity:.55; cursor:wait; }
button:active, .buy:active { transform:translateY(1px); }
input, select { color:var(--text); background:var(--surface); border:1px solid var(--control-border); border-radius:14px; padding:13px; max-width:100%; font-size:1rem; }
select { width:100%; min-height:48px; }
input[type=checkbox] { width:22px; height:22px; accent-color:var(--accent); flex-shrink:0; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2,h3 { line-height:1.08; letter-spacing:-.045em; }
h1 { font-size:clamp(2.625rem,5.4vw,4.375rem); font-weight:780; margin-bottom:20px; }
h2 { font-size:2rem; font-weight:750; }
h3 { font-size:1.5625rem; font-weight:750; overflow-wrap:anywhere; }
p { margin-bottom:16px; }
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
[hidden] { display:none !important; }
.masthead,main { max-width:1220px; padding-left:32px; padding-right:32px; margin:auto; }
.masthead { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; min-height:48px; text-decoration:none; }
/* Lockup stays yellow-on-cream in light and cream in dark for every flavor (kit: stable brand identity). */
.brand img { display:block; width:210px; height:auto; }
/* Site nav: each page links the other two. Phones put it on its own row under the logo, so nothing wraps mid-label. */
.site-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; column-gap:20px; }
.site-nav a { font-size:.8125rem; font-weight:650; min-height:48px; display:flex; align-items:center; gap:6px; }
/* Kit icons: 24px grid drawn at 20px, decorative, inherit currentColor. */
.icon { width:20px; height:20px; flex-shrink:0; vertical-align:-4px; }
summary .icon, .eyebrow .icon { margin-right:6px; }
.eyebrow .icon { width:16px; height:16px; vertical-align:-3px; }
.catalog-status { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 12px; border-bottom:1px dashed var(--line); }
.data-status { color:var(--muted); font-size:.75rem; margin:0; }
.text-button { display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:8px 10px; color:var(--text); background:none; border:0; border-radius:10px; text-decoration:underline; font-weight:600; font-size:.8125rem; }
.quiz { display:grid; grid-template-columns:minmax(0,1fr) 1.15fr; gap:64px; padding:48px 0 64px; align-items:start; }
.intro { position:sticky; top:32px; padding-top:12px; }
.eyebrow { font-size:.6875rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.intro .eyebrow { display:inline-block; border:1px solid var(--accent); border-radius:50%; padding:9px 16px; color:var(--accent); transform:rotate(-3deg); margin-bottom:26px; }
.intro em { font-family:var(--editorial); font-weight:500; color:var(--accent); }
.lede { font-size:1.0625rem; line-height:1.65; max-width:450px; }
.quiet,.helper,.blurb,.form-note,.dates,.question-hint { color:var(--muted); }
.helper,.form-note { font-size:.75rem; line-height:1.6; }
.form-note { margin:12px 0 0; text-align:center; }
.mood-caption { font-size:.8125rem; text-align:center; font-weight:600; margin:12px 0 0; }
/* Transparent flavor illustrations share the palette of each selection. */
.cup-scene { height:310px; max-width:360px; position:relative; margin:12px auto 0; }
.cup-scene::before { content:""; position:absolute; inset:28px 10px 22px; background:var(--wash); border-radius:47% 53% 60% 40%; transform:rotate(-8deg); }
.flavor-art { position:relative; display:block; width:100%; height:100%; object-fit:contain; z-index:1; transform-origin:50% 80%; }
.scene-orbit { position:absolute; width:22px; height:22px; background:var(--accent); z-index:2; border-radius:50% 50% 10% 50%; }
.orbit-one { left:24px; top:57px; transform:rotate(-25deg); }.orbit-two { right:20px; top:28px; transform:rotate(35deg); }.orbit-three { left:47px; bottom:32px; width:12px; height:12px; }
.scene-label { position:absolute; bottom:3px; right:8px; font-size:.6875rem; background:var(--surface); border:1px solid var(--text); border-radius:6px; padding:5px 10px; transform:rotate(-5deg); z-index:3; }
body[data-flavor="2"] .scene-orbit { border-radius:50%; box-shadow:7px 5px 0 var(--cup); }
body[data-flavor="3"] .scene-orbit { border-radius:4px; transform:rotate(18deg); }
body[data-flavor="4"] .scene-orbit { clip-path:polygon(50% 0,63% 34%,100% 50%,63% 63%,50% 100%,36% 64%,0 50%,36% 35%); border-radius:0; }
body[data-adventure="0"] .scene-label { transform:none; }
body[data-adventure="0"] .orbit-three { opacity:0; }
body[data-adventure="3"] .cup-scene::before { border-radius:28% 65% 35% 62%; transform:rotate(9deg); }
body[data-adventure="3"] .orbit-one { transform:rotate(-35deg) scale(1.35); }
body[data-adventure="3"] .scene-label { transform:rotate(7deg); }
.quiz-form { min-width:0; }
.question { border:0; padding:0; margin:0 0 30px; min-width:0; }
.question legend { display:block; font-size:1.3125rem; font-weight:750; letter-spacing:-.035em; padding:0; width:100%; }
.step-number { display:inline-flex; width:2.5em; height:2.5em; border:1px solid var(--accent); color:var(--accent); border-radius:50%; align-items:center; justify-content:center; font-size:.6875rem; letter-spacing:0; margin-right:8px; vertical-align:3px; }
.question-hint { font-size:.8125rem; margin:6px 0 16px; }
/* Static link to the flavor guide under the flavor choices (index.html). 44 px target. */
.guide-hint { margin:10px 0 0; }
.guide-hint a { display:inline-flex; align-items:center; min-height:44px; color:var(--text); }
.choice-grid { display:grid; gap:10px; }
.flavor-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice-card { position:relative; display:block; min-width:0; cursor:pointer; }
.choice-card input { position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; }
.choice-face { height:100%; display:flex; flex-direction:column; position:relative; min-height:148px; padding:17px 16px; border:1.5px solid var(--control-border); border-radius:var(--card-shape); background:var(--surface); }
.choice-face strong { font-size:.9375rem; line-height:1.2; letter-spacing:-.025em; margin:12px 0 6px; padding-right:4px; }
.choice-description { font-size:.75rem; line-height:1.5; color:var(--muted); }
.choice-card input:checked + .choice-face { background:var(--wash); border:2px solid var(--accent); padding:16.5px 15.5px; box-shadow:3px 4px 0 var(--shadow); }
.choice-card input:focus-visible + .choice-face { outline:3px solid var(--focus); outline-offset:4px; }
.choice-check { position:absolute; right:12px; top:12px; font-size:12px; width:20px; height:20px; border:1px solid var(--control-border); border-radius:50%; color:var(--button-text); display:flex; align-items:center; justify-content:center; }
/* Audit F01: an unselected check is hidden structurally, never by a transparent color, which forced colors repaints. */
.choice-check .icon { width:14px; height:14px; stroke-width:2.5; visibility:hidden; }
input:checked + .choice-face .choice-check .icon { visibility:visible; }
input:checked + .choice-face .choice-check { background:var(--accent); border-color:var(--accent); color:var(--button-text); }
.choice-art { display:block; width:100%; height:108px; object-fit:contain; }
.adventure-choices .choice-face { min-height:88px; padding:16px 42px 16px 53px; }
.adventure-choices .choice-face strong { margin:0 0 5px; }
.adventure-choices input:checked + .choice-face { padding:15.5px 41.5px 15.5px 52.5px; }
.adventure-choices .choice-check { top:calc(50% - 10px); }
/* Curiosity: home = familiar, path = a detour, spark = surprise. The Sheet label beside it carries the meaning. */
.adventure-choices .choice-icon { position:absolute; left:15px; top:calc(50% - 12px); width:24px; height:24px; color:var(--accent); transform-origin:50% 60%; }
.budget-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
.budget-choices .choice-face { min-height:95px; padding:13px 10px; }
.budget-choices .choice-face strong { font-size:.8125rem; margin:18px 0 5px; }
.budget-choices .choice-description { font-size:.6875rem; }
.budget-choices input:checked + .choice-face { padding:12.5px 9.5px; }
.budget-choices .choice-check { width:15px; height:15px; top:9px; right:9px; font-size:10px; }
.budget-choices .choice-check .icon { width:11px; height:11px; }
.budget-choices .choice-mark { display:none; }
.quiz-submit>button { width:100%; justify-content:space-between; box-shadow:4px 5px 0 var(--shadow); }
.results-header { padding:22px 0 16px; }
.results-header h1 { color:var(--accent); font-size:1.5625rem; line-height:1.3; max-width:900px; margin:0 0 8px; }
.match-line { margin:0; color:var(--text); font-weight:650; font-size:.875rem; line-height:1.4; }
/* Short feedback after a change. Sits inside the height the flavor art already reserves, so nothing shifts. */
.change-note { margin:2px 0 0; font-size:.8125rem; line-height:1.4; color:var(--accent); font-weight:600; }
.change-note:empty { display:none; }
/* Freshness stays visible, quietly, at the foot of the header. Wording unchanged. */
.freshness { max-width:64ch; font-size:.75rem; line-height:1.45; color:var(--muted); }
/* Review 2026-10-19: one short heading, the four flavors always in reach, curiosity and budget folded into
   "Fine-tune your picks" with a visible summary, and every active filter visible outside the panel. */
.quick-switch { clear:both; padding-top:var(--space-2); }
/* Freshness, Undo and Share share one quiet row under the filters. */
.results-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:0 var(--space-1); min-height:var(--hit); margin:var(--space-1) -10px 0 0; }
.results-actions .freshness { flex:1 1 180px; margin:0; }
.finetune { margin-top:var(--space-3); border-top:1px dashed var(--line); }
.finetune summary .icon { margin-right:6px; }
.finetune-title { font-weight:650; color:var(--text); }
.finetune-summary { color:var(--muted); }
.finetune-summary:not(:empty)::before { content:"· "; }
.finetune-body { display:grid; gap:var(--space-4); padding-bottom:var(--space-4); }
.switch-group { border:0; padding:0; margin:0; min-width:0; }
.switch-group legend { font-size:.875rem; font-weight:700; padding:0; margin-bottom:var(--space-2); }
.switch-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); }
.switch-option { position:relative; display:block; min-width:0; cursor:pointer; }
.switch-option input { position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; }
.switch-option-face { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; height:100%; min-height:var(--hit); padding:8px 40px 8px 12px; border:1.5px solid var(--control-border); border-radius:var(--radius-control); background:var(--surface); font-size:.875rem; line-height:1.25; overflow-wrap:anywhere; }
.switch-option-face .choice-icon { color:var(--accent); transform-origin:50% 60%; }
.option-title { font-weight:650; }
.option-sub { flex-basis:100%; font-size:.75rem; color:var(--muted); }
.switch-option input:checked + .switch-option-face { background:var(--wash); border:2px solid var(--accent); padding:7.5px 39.5px 7.5px 11.5px; }
.switch-option input:focus-visible + .switch-option-face { outline:3px solid var(--focus); outline-offset:3px; }
.curiosity-explain { margin:var(--space-2) 0 0 !important; max-width:64ch !important; font-size:.8125rem !important; }
#change { justify-self:start; margin-left:-10px; }
/* Selection is never color alone: a check sits in space reserved on every option, so labels never shift. */
.mini-check { position:absolute; right:10px; top:calc(50% - 10px); width:20px; height:20px; display:flex; align-items:center; justify-content:center; border:1px solid var(--control-border); border-radius:50%; color:var(--button-text); background:var(--surface); }
.mini-check .icon { width:13px; height:13px; visibility:hidden; }
input:checked + .switch-face .mini-check .icon, input:checked + .switch-option-face .mini-check .icon { visibility:visible; }
input:checked + .switch-face .mini-check, input:checked + .switch-option-face .mini-check { background:var(--accent); border-color:var(--accent); color:var(--button-text); }
/* Always-visible filter bar: what narrows the list, what widens it, and a reset that clears exactly that. */
.active-filters { display:grid; gap:var(--space-2); padding:var(--space-3) 0 0; }
.active-group { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.active-heading { font-size:.6875rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.active-list { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.active-filters button.active-chip { display:inline-flex; align-items:center; gap:6px; min-height:var(--hit); margin:0; padding:6px 10px 6px 14px; color:var(--text); background:var(--wash); border:1.5px solid var(--accent); border-radius:999px; font-size:.8125rem; font-weight:600; box-shadow:none; overflow-wrap:anywhere; text-align:left; }
.active-filters button.active-chip .icon { width:16px; height:16px; }
.active-chip.is-auto { display:inline-flex; align-items:center; min-height:var(--hit); padding:6px 14px; border:1.5px dashed var(--control-border); border-radius:999px; font-size:.8125rem; color:var(--muted); }
.active-filters > .text-button { justify-self:start; margin-left:-10px; }
.shown-count { text-align:center; margin:var(--space-6) 0 0 !important; max-width:none !important; }
#share-status { font-size:.8125rem; margin:0; } #share-status:empty { display:none; }
.results-art { float:right; width:84px; height:84px; object-fit:contain; margin:0 0 4px 16px; }
.filter-panel { clear:both; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
summary { cursor:pointer; font-size:.8125rem; min-height:48px; padding:13px 0; overflow-wrap:anywhere; }
.filters { display:grid; gap:var(--space-4); padding-bottom:var(--space-4); }
.filter-checks label,.check-label { display:flex; gap:10px; align-items:center; min-height:48px; font-size:.875rem; }
.filters .helper { max-width:400px; margin:4px 0 0; }
.filters .filters-note { max-width:64ch; margin:0; }
.sort-row { display:grid; gap:6px; max-width:420px; font-size:.875rem; font-weight:650; }
.sort-row select { font-weight:400; }
/* Facet chips: checkbox semantics in a fieldset. Selected = accent border, wash, weight and a check, not color alone. */
.facet { border:0; padding:0; margin:0; min-width:0; }
.facet legend { font-size:.875rem; font-weight:700; padding:0; margin-bottom:var(--space-2); }
.facet-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.facet-chip { position:relative; display:inline-flex; max-width:100%; cursor:pointer; }
.facet-chip input, .switch-chip input { position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; }
.facet-face { display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:var(--hit); padding:6px 14px; border:1.5px solid var(--control-border); border-radius:999px; background:var(--surface); font-size:.875rem; line-height:1.25; overflow-wrap:anywhere; }
.facet-count { font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.facet-chip.is-zero .facet-face { border-style:dashed; color:var(--muted); }
.stock-date { margin:6px 0 0; font-size:.8125rem; color:var(--muted); text-align:center; }
.affiliate-note { margin:6px 0 0; font-size:.8125rem; line-height:1.45; color:var(--muted); text-align:center; }
.facet-search-label { display:block; margin:0 0 4px; font-size:.875rem; }
.facet-search { width:100%; max-width:360px; margin:0 0 var(--space-2); }
.facet-roasters #roaster-search-status:empty { display:none; }
.facet-chip[hidden] { display:none; }
.facet-chip input:checked + .facet-face { background:var(--wash); border:2px solid var(--accent); padding:5.5px 13.5px; font-weight:650; }
.facet-chip input:checked + .facet-face::before { content:"✓" / ""; color:var(--accent); font-weight:800; }
.facet-chip input:focus-visible + .facet-face, .switch-chip input:focus-visible + .switch-face { outline:3px solid var(--focus); outline-offset:3px; }
#more-origins, #more-methods, #more-roasters, #clear-filters { justify-self:start; margin-left:-10px; }
/* Quick switch (owner story 2026-10-19): change flavor, curiosity or budget without going back through the quiz. */
.skip-quiz { margin:-6px 0 0 -10px; font-size:.875rem; }
.switch-flavors { border:0; padding:0; margin:0 0 var(--space-3); min-width:0; }
.switch-chips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-2); }
.switch-chip { position:relative; display:block; min-width:0; cursor:pointer; }
.switch-face { position:relative; display:flex; align-items:center; gap:8px; height:100%; min-height:var(--hit); padding:6px 36px 6px 6px; border:1.5px solid var(--control-border); border-radius:var(--radius-control); background:var(--surface); font-size:.8125rem; font-weight:650; line-height:1.2; overflow-wrap:anywhere; }
.switch-face img { width:32px; height:32px; object-fit:contain; flex-shrink:0; }
.switch-chip input:checked + .switch-face { background:var(--wash); border:2px solid var(--accent); padding:5.5px 35.5px 5.5px 5.5px; box-shadow:2px 3px 0 var(--shadow); }
.switch-face img { transform-origin:50% 80%; }

.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.coffee-card { min-width:0; align-self:start; padding:22px; border:1px solid var(--control-border); border-radius:var(--card-shape); background:var(--surface); box-shadow:4px 5px 0 var(--shadow); }
.coffee-card>.eyebrow { color:var(--accent); display:inline-block; background:var(--wash); padding:5px 10px; border-radius:30px; margin:0 0 14px; font-size:.625rem; letter-spacing:.06em; }
.coffee-card h3 { margin:0 0 10px; }
.price { font-size:.8125rem; font-weight:650; margin-bottom:16px; }
.reason-source { margin:0 0 12px; }
.disclosure { font-size:.75rem; color:var(--muted); margin:0 0 12px; line-height:1.55; }
.buy { display:flex; width:100%; font-size:.875rem; }
.sold-out { border:1px dashed var(--control-border); border-radius:16px; padding:13px; font-size:.8125rem; }
.card-details { border-top:1px dashed var(--line); margin-top:14px; }
.card-details summary { font-weight:600; }
.card-details p,.card-details blockquote { font-size:.8125rem; overflow-wrap:anywhere; }
.card-details h4 { font-size:.8125rem; margin:16px 0 8px; }
.card-details .dates { font-size:.6875rem; }
blockquote { margin:0 0 16px; }
#show-more { display:flex; margin:28px auto 0; }
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.empty { display:grid; grid-template-columns:132px minmax(0,1fr); gap:var(--space-6); align-items:center; padding:28px; border:1px dashed var(--accent); background:var(--surface); border-radius:24px; }
/* Discovery companion: decorative; the heading, counts and buttons carry the state. */
.empty-art { display:block; width:132px; height:132px; object-fit:contain; }
.empty p { font-size:.875rem; }
/* Coming up (drops). One column at every width: heading, a preview of at most three rows, then the full schedule
   in the bottom-sheet dialog. A solid surface, so the page pattern never sits behind the text. */
.drops { margin:48px 0 40px; padding:var(--space-6) var(--space-6) var(--space-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--card-shape); }
.drops h2 { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:1.875rem; margin:0; overflow-wrap:anywhere; }
.drops-badge { display:inline-grid; place-items:center; width:36px; height:36px; flex-shrink:0; color:var(--accent); background:var(--wash); border:1px solid var(--accent); border-radius:50%; transform:rotate(-8deg); }
.drops-badge .icon { vertical-align:0; }
.drops-sub { margin:4px 0 0; font-size:1.0625rem; font-weight:650; line-height:1.35; }
.drops-meta { display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--space-6); }
.drops-zone { margin:0; font-size:.9375rem; line-height:1.4; color:var(--muted); }
.drops .text-button { min-height:44px; font-size:.9375rem; }
.drops-about-toggle { margin-left:-10px; }
.drops-about-toggle[aria-expanded="true"] .icon { transform:rotate(180deg); }
.drops-about { max-width:62ch; margin:0 0 var(--space-3); padding:var(--space-3) var(--space-4); background:var(--wash); border-radius:16px; }
.drops-about p { margin:0 0 var(--space-2); font-size:.9375rem; line-height:1.55; }
.drops-about p:last-child { margin-bottom:0; }
.drop-rows { list-style:none; margin:0; padding:0; }
/* Flex, not grid, so the label drops under the name when the row is narrow (long names, 200% text). */
.drop-row { display:flex; flex-wrap:wrap; align-items:flex-start; column-gap:var(--space-3); padding:10px 0; }
.drop-row + .drop-row { border-top:1px solid var(--line); }
.drop-who { display:flex; align-items:center; gap:10px; flex:1 1 10rem; min-width:0; }
.drop-name { min-width:0; font-size:1.0625rem; line-height:1.3; overflow-wrap:anywhere; }
/* Event type is a label, not a control: square corners, no outline, no underline. Two tints tell the kinds apart. */
.drop-kind { flex:none; max-width:100%; padding:2px 8px; font-size:.8125rem; font-weight:750; line-height:1.45; color:var(--accent); background:var(--wash); border:0; border-radius:6px; }
.drop-kind[data-kind="ORDER_CUTOFF"], .drop-kind[data-kind="UNKNOWN"] { color:var(--text); background:color-mix(in srgb, var(--text) 9%, transparent); }
.drop-when { flex:1 0 100%; margin-top:2px; font-size:1rem; font-weight:600; line-height:1.35; }
.drop-note { flex:1 0 100%; margin-top:2px; font-size:.9375rem; line-height:1.45; color:var(--muted); overflow-wrap:anywhere; }
.drop-none { display:block; font-size:.9375rem; color:var(--muted); }
.drops-empty { margin:var(--space-2) 0 0; font-size:1rem; }
.drops-all { margin:2px 0 0 -10px; }
.drops-preview .drop-when { flex:1 1 auto; }
.drops-preview .drop-row { row-gap:2px; padding:8px 0; }
.drops-preview .drop-link { flex:0 1 auto; min-width:0; max-width:100%; margin-left:auto; min-height:44px; font-size:.9375rem; font-weight:650; }
@media(min-width:1001px) {
  .drops-preview { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:var(--space-2) 0; }
  .drops-preview .drop-row { flex-direction:column; align-items:flex-start; gap:6px; padding:var(--space-2) var(--space-6); }
  .drops-preview .drop-kind { order:-1; }
  .drops-preview .drop-who { flex:none; width:100%; }
  .drops-preview .drop-link { margin-left:0; }
  .drops-preview .drop-row:first-child { padding-left:0; }
  .drops-preview .drop-row + .drop-row { border-top:0; border-left:1px solid var(--line); }
}
.newsletter { display:grid; grid-template-columns:minmax(0,1fr) 1fr; gap:10%; padding:40px; margin:0 0 60px; background:var(--wash); border:1px solid var(--control-border); border-radius:var(--card-shape); }
/* The one group illustration: the parade opens the newsletter section. Transparent WebP, 2:1, space reserved. */
.parade-art { display:block; width:100%; max-width:480px; height:auto; aspect-ratio:2 / 1; margin:-12px 0 var(--space-3); }
.newsletter p { font-size:.875rem; }.newsletter label { display:block; font-size:.875rem; margin-bottom:8px; }
.newsletter input[type=email] { width:100%; }.newsletter .check-label { display:flex; margin:14px 0; }
.newsletter button { margin-top:18px; width:100%; }.newsletter .form-note { font-size:.75rem; text-align:left; }
.method { max-width:800px; padding-bottom:32px; }.method .data-status { margin:12px 0 30px; }
.method h1 { margin:22px 0; }.method section { border-top:1px dashed var(--line); padding-top:28px; margin-top:32px; }
.method h2 { font-size:1.6875rem; }.method p { line-height:1.75; }
.skip-link { position:absolute; top:-100px; left:16px; padding:12px; background:var(--surface); z-index:10; }.skip-link:focus { top:8px; }
@media(hover:hover) { .choice-card:hover .choice-face { transform:translateY(-2px); } button:hover,.buy:hover { filter:brightness(1.08); } }
@media(prefers-reduced-motion:no-preference) {
  .choice-face,button,.buy { transition:transform var(--motion-press) var(--ease),box-shadow var(--motion-press) var(--ease); }
  .cup-scene::before,.scene-orbit { transition:border-radius .3s var(--ease),transform .3s var(--ease); }
  /* Colors ease only while a flavor changes (app.js adds .flavor-shift for 400ms). A light/dark switch is instant,
     so there is never a half-light, half-dark low-contrast frame. */
  body.flavor-shift, body.flavor-shift .choice-face, body.flavor-shift button, body.flavor-shift .buy,
  body.flavor-shift .cup-scene::before, body.flavor-shift .scene-orbit, body.flavor-shift .step-number {
    transition:background-color var(--motion-color) var(--ease),border-color var(--motion-color) var(--ease),color var(--motion-color) var(--ease),
      box-shadow var(--motion-color) var(--ease),transform var(--motion-press) var(--ease),border-radius .3s var(--ease); }
  /* Cards arrive once, when results first appear; quick switches swap them without replaying the motion. */
  .cards.arrive .coffee-card { animation:cup-arrival var(--motion-arrival) var(--ease) both; animation-delay:var(--card-delay,0ms); }
  @keyframes cup-arrival { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
}
@media(prefers-reduced-motion:reduce) { :root { --motion-press:0ms; --motion-color:0ms; --motion-arrival:0ms; } *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media(prefers-color-scheme:dark) {
  :root { --bg:#221F1B; --surface:#302B25; --text:#FFF8E9; --muted:#D0C4B3; --control-border:#B89768; --wash:#44351F; --accent:#FFD378; --button-text:#261D15; --shadow:#100E0C; --focus:#9DC9FF; }
  body[data-flavor="2"] { --bg:#261F26; --surface:#342A34; --wash:#4B3043; --accent:#F5A3C4; --control-border:#BB91AA; --shadow:#100E0C; }
  body[data-flavor="3"] { --bg:#251F1A; --surface:#342B24; --wash:#4A382A; --accent:#E9BC8B; --control-border:#B99A7A; --shadow:#100E0C; }
  body[data-flavor="4"] { --bg:#24202C; --surface:#302A3B; --wash:#453551; --accent:#D1B4F1; --control-border:#AF98C5; --shadow:#100E0C; }
}
@media(max-width:1000px) { .quiz { gap:32px; grid-template-columns:.9fr 1.1fr; }.cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.intro h1 { font-size:3rem; } }
@media(max-width:650px) {
  .masthead,main { padding-left:16px; padding-right:16px; }.masthead { min-height:72px; flex-wrap:wrap; row-gap:0; padding-top:8px; }.brand img { width:180px; max-width:calc(100vw - 32px); }
  .site-nav { flex-basis:100%; justify-content:flex-start; column-gap:18px; margin-left:-2px; }.site-nav a { min-height:44px; font-size:.875rem; }
  .catalog-status { align-items:center; gap:8px; }.data-status { font-size:.6875rem; line-height:1.5; }.catalog-status .text-button { flex-shrink:0; padding:6px; }
  .quiz { display:block; padding:24px 0 32px; }.intro { position:relative; top:auto; padding:0; }
  .intro .eyebrow { font-size:.5625rem; margin-bottom:18px; padding:7px 12px; }.intro h1 { font-size:2.6875rem; margin-bottom:14px; }
  .intro .lede { font-size:.9375rem; line-height:1.6; padding-right:0; }.cup-scene { height:210px; max-width:280px; margin:10px auto 0; }
  .cup-scene::before { inset:18px 24px; }
  .orbit-one { left:26px; top:35px; }.orbit-two { right:20px; top:15px; }.orbit-three { bottom:28px; }.scene-label { bottom:4px; right:6px; font-size:.625rem; }
  .mood-caption { font-size:.6875rem; margin:6px 0 26px; }.question { margin-bottom:26px; }.question legend { font-size:1.25rem; }
  .choice-grid { gap:10px; }.choice-face { padding:15px 13px; min-height:161px; }.choice-card input:checked + .choice-face { padding:14.5px 12.5px; }
  .choice-face strong { font-size:.875rem; }.choice-description { font-size:.75rem; }
  .adventure-choices .choice-face { min-height:90px; padding:16px 38px 16px 49px; }.adventure-choices input:checked + .choice-face { padding:15.5px 37.5px 15.5px 48.5px; }
  /* Phones: budget becomes full-width rows so Sheet labels and USD/100 g values get room (kit review, priority 3). */
  .budget-choices { grid-template-columns:minmax(0,1fr); }.budget-choices .choice-face { min-height:64px; padding:12px 46px 12px 16px; }.budget-choices input:checked + .choice-face { padding:11.5px 45.5px 11.5px 15.5px; }
  .budget-choices .choice-face strong { font-size:.9375rem; margin:0 0 2px; }.budget-choices .choice-description { font-size:.75rem; }
  .budget-choices .choice-check { width:20px; height:20px; top:calc(50% - 10px); right:14px; }.budget-choices .choice-check .icon { width:14px; height:14px; }
  .quiz-submit { padding:12px 0 max(12px,env(safe-area-inset-bottom)); }.form-note { font-size:.6875rem; }
  .results-header { padding:12px 0 14px; }.results-header h1 { font-size:1.375rem; margin-bottom:4px; }.match-line { font-size:.8125rem; }
  .switch-chips { grid-template-columns:repeat(2,minmax(0,1fr)); }.switch-options { grid-template-columns:minmax(0,1fr); }.cards { grid-template-columns:minmax(0,1fr); gap:18px; }.coffee-card { padding:20px; }
  .coffee-card h3 { font-size:1.5625rem; }.drops { margin:36px 0 32px; padding:var(--space-4) var(--space-4) var(--space-1); }.drops h2 { font-size:1.75rem; }
  .newsletter { grid-template-columns:minmax(0,1fr); gap:22px; padding:24px; }.newsletter h2 { font-size:2.1875rem; }.empty { padding:22px; }.empty button { width:100%; font-size:.8125rem; }
}

@media(max-width:650px) { .choice-art { height:90px; }.results-art { width:72px; height:72px; margin:0 0 0 12px; }.empty { grid-template-columns:minmax(0,1fr); gap:var(--space-2); }.empty-art { width:112px; height:112px; margin:0 auto; }.parade-art { margin:-4px 0 var(--space-2); } }

.data-status:empty { display:none; }

/* Follow picker (audit J3 / D4). Combobox + chips, no library. */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.follow-picker { position:relative; }
.follow-picker input { width:100%; padding-left:44px; }
.follow-picker .field-icon { position:absolute; left:14px; top:14px; color:var(--muted); pointer-events:none; }
.follow-options { position:absolute; z-index:5; left:0; right:0; top:calc(100% + 6px); margin:0; padding:6px; list-style:none; background:var(--surface); border:1px solid var(--control-border); border-radius:14px; box-shadow:4px 5px 0 var(--shadow); max-height:min(60vh, 400px); overflow-y:auto; }
.follow-option, .follow-empty { display:flex; gap:10px; align-items:baseline; min-height:48px; padding:10px 12px; border-radius:10px; font-size:.9375rem; line-height:1.3; }
.follow-option { cursor:pointer; }
.follow-option[aria-selected="true"], .follow-option:hover { background:var(--wash); outline:2px solid var(--accent); outline-offset:-2px; }
.follow-empty { color:var(--muted); font-size:.875rem; }
.follow-kind { flex-shrink:0; font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.follow-chips { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 6px; padding:0; list-style:none; }
.follow-chip { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:2px 2px 2px 12px; background:var(--surface); border:1px solid var(--control-border); border-radius:999px; font-size:.875rem; overflow-wrap:anywhere; }
.newsletter .follow-chip button.chip-remove { margin:0; width:48px; min-height:48px; padding:0; gap:0; flex-shrink:0; color:var(--text); background:none; border:0; border-radius:999px; font-size:1.25rem; line-height:1; box-shadow:none; }
.newsletter .follow-chip button.chip-remove:hover { background:var(--wash); }

/* Compact picks bar: phones only, after the switcher scrolls away. Pinned to the top so it never covers Buy buttons;
   scroll-padding keeps keyboard focus clear of it. */
html.has-picks-bar { scroll-padding-top:84px; }
.picks-bar { position:fixed; z-index:20; top:0; left:0; right:0; display:flex; align-items:center; gap:var(--space-2);
  padding:calc(6px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
  background:var(--surface); border-bottom:1px solid var(--control-border); box-shadow:0 3px 0 var(--shadow); }
.picks-bar-art { width:32px; height:32px; object-fit:contain; flex-shrink:0; }
.picks-bar-text { flex:1 1 auto; min-width:0; margin:0; font-size:.8125rem; font-weight:650; line-height:1.3; overflow-wrap:anywhere; }
.picks-bar .picks-edit { flex-shrink:0; min-height:var(--hit); padding:8px 16px; gap:0; font-size:.875rem; box-shadow:none; }
/* Bottom sheet for the same controls (native dialog). */
.picks-sheet { width:100%; max-width:640px; max-height:85dvh; margin:auto auto 0; padding:var(--space-4) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom, 0px));
  color:var(--text); background:var(--bg); border:1px solid var(--control-border); border-bottom:0; border-radius:24px 24px 0 0; overflow:auto; overscroll-behavior:contain; }
.picks-sheet::backdrop { background:rgb(20 18 14 / .45); }
.sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-2); }
.sheet-head h2 { font-size:1.5rem; margin:4px 0 2px; }
.sheet-count { margin:0; font-size:.8125rem; font-weight:650; color:var(--muted); }
.picks-sheet .quick-switch { padding-top:0; }
@media(prefers-reduced-motion:no-preference) {
  .picks-sheet[open] { animation:sheet-rise var(--motion-arrival) var(--ease); }
  @keyframes sheet-rise { from { transform:translateY(24px); opacity:.6; } }
}

/* Site footer: Sip Parade's own nav and notes plus one corbet.app credit (owner call 2026-10-19, replaces the
   corbet-footer and its list of other projects). Sits on --surface, which no flavor theme changes, so muted text
   and the per-flavor accent are checked once per scheme. Every link is at least 44 px tall. */
.site-footer { margin-top:48px; border-top:1px solid var(--line); background:var(--surface); }
.footer-inner { max-width:1220px; margin:0 auto; padding:40px 32px 24px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.3fr); gap:32px; }
.footer-home { display:inline-flex; align-items:center; min-height:48px; }
.footer-home img { display:block; width:168px; max-width:100%; height:auto; }
.footer-tagline { margin:6px 0 0; color:var(--muted); font-size:.875rem; }
.footer-heading { margin:0 0 6px; font-size:.6875rem; font-weight:750; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.footer-links, .footer-notes { margin:0; padding:0; list-style:none; }
.footer-links a { display:flex; align-items:center; min-height:44px; font-size:.9375rem; font-weight:650; text-decoration:none; }
.footer-links a:hover { text-decoration:underline; }
.footer-links a[aria-current="page"] { color:var(--accent); text-decoration:underline; text-decoration-thickness:2px; }
.footer-notes li { padding:6px 0; font-size:.875rem; line-height:1.5; color:var(--muted); }
.footer-base { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 24px;
  margin:0 max(32px, calc((100% - 1156px) / 2)); padding:8px 0 max(16px, env(safe-area-inset-bottom, 0px)); border-top:1px dashed var(--line); font-size:.8125rem; color:var(--muted); }
.footer-base p { margin:0; min-height:44px; display:flex; align-items:center; }
.footer-credit a { display:inline-flex; align-items:center; min-height:44px; margin-left:.3em; color:var(--text); font-weight:650; }
@media (max-width:900px) { .footer-inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.footer-brand { grid-column:1 / -1; } }
@media (max-width:650px) {
  .footer-inner { grid-template-columns:minmax(0,1fr); gap:24px; padding:32px 16px 16px; }
  .footer-base { margin:0 16px; }
  /* Two link columns when they fit, one at large text sizes. */
  .footer-links { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); column-gap:16px; }
}

/* Flavor guide (site/flavor-guide.html). Static page: no app.js, no data. Every rule is scoped to .guide or the
   page's own .guide-footer, and colors come from the shared tokens, so light, dark and the flavor themes carry over.
   The four bag-label colors are tokens. They clear 4.3:1 on the dark surface, so dark mode reuses them. */
:root { --note-terroir:#e7a33e; --note-variety:#6aa35a; --note-process:#4f8fd6; --note-notes:#d5658f; }
:root { --cherry-skin:#b8392f; --cherry-pulp:#f2a79c; --cherry-muc:#f5d687; --cherry-parch:#efe1c2; --cherry-seed:#9dbb83; }
.guide { max-width:820px; padding-bottom:64px; }
.guide section { border-top:1px dashed var(--line); padding-top:28px; margin-top:32px; scroll-margin-top:16px; }
.guide h1 { margin:18px 0 18px; }
.guide h1 em { font-family:var(--editorial); font-weight:500; color:var(--accent); letter-spacing:-.02em; }
.guide h2 { font-size:1.875rem; margin-bottom:12px; }
.guide h3 { font-size:1.3125rem; overflow-wrap:normal; margin-bottom:8px; }
.guide h4 { font-size:1.125rem; margin:0 0 4px; letter-spacing:-.02em; }
.guide p, .guide li { line-height:1.65; }
.guide .lede { max-width:640px; font-size:1.0625rem; }
.guide .promise { max-width:640px; margin:0 0 20px; padding:12px 16px; background:var(--wash); border-radius:16px; }
.guide .eyebrow { display:inline-block; border:1px solid var(--accent); border-radius:50%; padding:9px 16px; color:var(--accent); transform:rotate(-3deg); margin-top:24px; }
.guide .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--card-shape); padding:20px; }
.guide .fine { font-size:.875rem; color:var(--muted); margin:12px 0 0; }
/* Jump links: ordinary anchors that wrap. Not sticky, not a carousel. */
.guide .jump ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; }
.guide .jump a { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid var(--control-border); border-radius:999px; background:var(--surface); font-size:.9375rem; font-weight:650; text-decoration:none; }
.guide .jump a:hover { background:var(--wash); }
/* Flavor families: the four cup illustrations, each with a way into matching coffees. */
.guide .families { list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
/* Art and name share the top row. Text and action use the full card width, so phones do not get a thin column. */
.guide .family { display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:14px; align-items:center; }
.guide .family > div { display:contents; }
.guide .family img { grid-row:1 / span 2; width:72px; height:72px; }
.guide .family h3 { grid-column:2; align-self:end; }
.guide .family .blurb { grid-column:2; align-self:start; }
.guide .family p:not(.blurb), .guide .family .family-action { grid-column:1 / -1; }
.guide .family p:not(.blurb) { margin-top:10px; }
.guide .family h3 { font-size:1.25rem; margin-bottom:2px; }
.guide .family .blurb { font-weight:650; margin-bottom:6px; }
.guide .family p { font-size:.9375rem; line-height:1.6; margin:0; }
.guide .family .family-action { justify-self:start; margin-top:4px; }
.guide .family-action { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:700; color:var(--accent); text-underline-offset:4px; }
.guide .family-action .icon { flex-shrink:0; }
/* Bag example: numbered fields (not color alone), source link, interpretation kept apart. */
.guide .bag { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:24px; margin-top:18px; align-items:start; }
.guide .label { margin:0; background:var(--surface); border:2px solid var(--text); border-radius:18px; padding:20px; box-shadow:6px 6px 0 var(--shadow); }
.guide .label .roaster { font-size:.8125rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0; }
.guide .label .name { font-size:1.625rem; font-weight:800; letter-spacing:-.04em; margin:4px 0 14px; line-height:1.1; }
.guide .label dl { margin:0; display:grid; gap:10px; }
.guide .label dl > div { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; align-items:baseline; }
.guide .label dt { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.875rem; }
.guide .label dd { margin:0; font-weight:650; font-size:.9375rem; overflow-wrap:anywhere; }
.guide .label figcaption { margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); font-size:.875rem; color:var(--muted); line-height:1.5; }
.guide .label figcaption a { color:var(--text); display:inline-flex; min-height:44px; align-items:center; }
.guide .num { display:inline-grid; place-items:center; flex-shrink:0; width:2em; height:2em; border-radius:50%; font-size:.8125rem; font-weight:800; color:var(--text); background:var(--surface); border:2px solid; }
.guide .num.k-t { border-color:var(--note-terroir); }
.guide .num.k-v { border-color:var(--note-variety); }
.guide .num.k-p { border-color:var(--note-process); }
.guide .num.k-n { border-color:var(--note-notes); }
.guide .key { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.guide .key > li { display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:start; }
.guide .key p { font-size:.9375rem; margin:0; }
.guide .read { margin:20px 0 0; padding:14px 16px; border-left:4px solid var(--accent); background:var(--surface); border-radius:0 12px 12px 0; font-size:.9375rem; }
.guide #bag > .family-action { margin-top:8px; }
/* Disclosures share one chevron, rotated when open. Native details carries the expanded state. */
.guide details > summary { list-style:none; display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; font-weight:650; }
.guide details > summary::-webkit-details-marker { display:none; }
.guide details > summary::after { content:""; flex-shrink:0; width:8px; height:8px; margin:0 4px 4px auto; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.guide details[open] > summary::after { transform:rotate(-135deg); margin-bottom:0; margin-top:4px; }
.guide .key details, .guide .deep details { margin-top:4px; }
.guide .key details > summary, .guide .deep details > summary { justify-content:flex-start; font-size:.9375rem; color:var(--accent); }
.guide .key details > summary::after, .guide .deep details > summary::after { margin-left:2px; }
.guide .key details p, .guide .deep details p { margin:4px 0 8px; }
/* Processing: cherry cross-section, then what dries around the seed, then the steps that combine with it. */
.guide .c-skin { fill:var(--cherry-skin); }
.guide .c-pulp { fill:var(--cherry-pulp); }
.guide .c-muc { fill:var(--cherry-muc); }
.guide .c-parch { fill:var(--cherry-parch); stroke:#b9a77f; stroke-width:1; }
.guide .c-seed { fill:var(--cherry-seed); stroke:#6f8c58; stroke-width:1; }
.guide .c-crease { fill:none; stroke:#5d7a47; stroke-width:1.5; }
.guide .c-marks line { stroke:var(--text); stroke-width:1.25; }
.guide .c-marks circle { fill:var(--surface); stroke:var(--text); stroke-width:1.5; }
.guide .c-marks text { fill:var(--text); font:800 .75rem var(--font); text-anchor:middle; }
.guide #process h3 { margin-top:28px; }
.guide .dry, .guide .extra { list-style:none; margin:14px 0 0; display:grid; gap:0; }
.guide .dry > li + li, .guide .extra > li + li { border-top:1px dashed var(--line); margin-top:14px; padding-top:14px; }
.guide .dry > li { display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:14px; align-items:center; }
.guide .dry > li > div { display:contents; }
.guide .dry .mini { grid-row:1 / span 2; width:52px; height:52px; }
.guide .dry h4 { grid-column:2; align-self:end; }
.guide .dry .dries { grid-column:2; align-self:start; }
.guide .dry p:not(.dries) { grid-column:1 / -1; }
.guide .dry .dries + p { margin-top:10px; }
.guide .dry p, .guide .extra p { font-size:.9375rem; line-height:1.6; margin:0 0 6px; max-width:62ch; }
.guide .dries { font-weight:650; color:var(--accent); }
.guide .possible { color:var(--muted); }
/* Deeper background: summary first, more inside a disclosure, comfortable widths. */
.guide .tips { padding-left:20px; margin:6px 0 0; }
.guide .tips li { font-size:.9375rem; }
.guide .faq details { border-bottom:1px dashed var(--line); padding:6px 0; }
.guide .faq summary { font-size:1.0625rem; font-weight:700; }
.guide .faq details p { margin:4px 0 10px; }
.guide .cta { text-align:center; padding:32px 22px; margin-top:40px; }
.guide .cta h2 { margin-bottom:8px; }
.guide .cta .buy { display:inline-flex; margin-top:10px; width:auto; min-width:min(240px, 100%); font-size:1rem; }
.guide .cta-alt { margin:12px 0 0; }
.guide .cta-alt a { display:inline-flex; align-items:center; min-height:44px; font-weight:650; }
.guide .sources { margin-top:28px; border-top:1px dashed var(--line); padding-top:8px; }
.guide .sources summary { font-size:.9375rem; color:var(--muted); }
.guide .sources ul { padding-left:20px; margin:4px 0 0; }
.guide .sources li { font-size:.875rem; line-height:1.5; margin-bottom:8px; color:var(--muted); }
.guide .sources a { color:var(--text); display:inline-flex; align-items:center; min-height:44px; }
@media (prefers-reduced-motion:no-preference) { :root:has(body[data-page="guide"]) { scroll-behavior:smooth; } }
.guide-footer { max-width:820px; margin:0 auto; padding:24px 32px 48px; font-size:.8125rem; color:var(--muted); }
/* Every link on the page is at least 44 px tall, including the inline one in the closing note. */
.guide-footer a { display:inline-flex; align-items:center; min-height:44px; }
@media (max-width:760px) {
  .guide .families, .guide .bag { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:650px) {
  .guide-footer { padding-left:16px; padding-right:16px; }
  .guide h2 { font-size:1.625rem; }
  .guide section { padding-top:24px; margin-top:24px; }
  .guide .jump a { font-size:.875rem; padding:8px 12px; }
  .guide .family { grid-template-columns:60px minmax(0,1fr); }
  .guide .family img { width:60px; height:60px; }
  .guide .card { padding:16px; }
}
/* Very narrow screens and 200% text: the diagram stacks above its numbered list. */
@media (max-width:340px) {
  .guide .family { grid-template-columns:minmax(0,1fr); }
  .guide .family img { grid-row:auto; margin-bottom:8px; }
  .guide .family h3, .guide .family .blurb { grid-column:1; }
}

/* Roaster identity (docs/roaster-identity). A reserved tile left of the title, a rank pill that never touches a logo,
   and a "Roasted by / Sold by" line. Tiles, chips and logo panels stay light in both themes; logos are never recolored. */
.card-media { display:grid; grid-template-columns:104px minmax(0,1fr); gap:16px; align-items:start; }
.card-head { min-width:0; }
.card-head h3 { font-size:1.375rem; margin:0 0 6px; }
.card-head .price { margin:0; }
.card-tile { width:104px; height:104px; border-radius:16px; overflow:hidden; display:grid; place-items:center; }
.card-tile img { width:100%; height:100%; object-fit:contain; }
.tile-bag { background:#faf6ee; }
.tile-logo { background:#fffef8; border:1px solid #e6dfcf; padding:14px; }
.tile-type { background:var(--wash); color:var(--accent); padding:8px; text-align:center; }
.tile-name { font-size:20px; font-weight:800; line-height:1.1; letter-spacing:-.03em; overflow-wrap:normal; word-break:normal; hyphens:none; }
.tile-type.is-mid .tile-name { font-size:15px; }
.tile-type.is-long .tile-name { font-size:12px; overflow-wrap:anywhere; }
.tile-caption { width:104px; margin:6px 0 0; font-size:.75rem; line-height:1.3; color:var(--muted); }
.identity-line { margin:14px 0 10px; font-size:.875rem; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.identity-line strong { color:var(--text); }
.logo-chip { display:inline-flex; align-items:center; height:28px; padding:0 10px; background:#fffef8; border:1px solid #e6dfcf; border-radius:999px; vertical-align:middle; }
.logo-chip img { height:18px; width:auto; max-width:120px; object-fit:contain; }
.detail-figure { margin:14px 0; }
.detail-figure img { display:block; width:100%; height:auto; border-radius:12px; }
.detail-figure figcaption { margin-top:6px; font-size:.8125rem; line-height:1.5; color:var(--muted); }
.detail-figure figcaption strong { color:var(--text); }
.detail-figure .credit { white-space:nowrap; }
/* Meet the roaster: one editorial aside after the sixth card in Best match. Not a result, so no number and no Buy. */
.feature { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); background:var(--surface); border:1px solid var(--control-border); border-radius:var(--card-shape); overflow:hidden; box-shadow:4px 5px 0 var(--shadow); }
.feature-media { position:relative; min-height:100%; background:var(--wash); }
.feature-media img { display:block; width:100%; height:100%; aspect-ratio:16 / 10; object-fit:cover; }
.feature-credit { position:absolute; left:10px; bottom:10px; margin:0; padding:2px 8px; font-size:.75rem; color:#292820; background:rgb(255 254 248 / .9); border-radius:999px; }
.feature-media.is-placeholder { display:grid; place-content:center; justify-items:center; gap:8px; min-height:240px; padding:24px; text-align:center;
  background:var(--wash); }
.feature-placeholder-name { overflow-wrap:anywhere; font-size:2.75rem; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--accent); transform:rotate(-3deg); }
.feature-placeholder-note { font-size:.8125rem; font-weight:650; color:var(--muted); }
.feature-body { padding:24px; }
.feature-label { margin:0 0 8px; font-size:.6875rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.feature-body h3 { font-size:1.75rem; margin:8px 0 2px; }
.feature-place { margin:0 0 12px; color:var(--muted); font-weight:650; }
.feature-facts { margin:0 0 16px; padding-left:20px; }
.feature-facts li { font-size:.9375rem; line-height:1.6; margin-bottom:6px; }
.feature-facts a { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; font-weight:650; }
.feature-action { min-height:48px; }
.feature-why { margin:12px 0 0; font-size:.8125rem; color:var(--muted); }
/* Monogram or logo tiles for drops and follow options. Decorative: the name beside them is the text. */
.name-tile { display:inline-grid; place-items:center; flex-shrink:0; border-radius:50%; background:var(--wash); color:var(--accent); font-weight:800; overflow:hidden; }
.name-tile.has-logo { background:#fffef8; border:1px solid #e6dfcf; border-radius:10px; }
.name-tile img { width:auto; height:auto; max-width:78%; max-height:70%; object-fit:contain; }
.drop-tile { width:32px; height:32px; font-size:15px; }
.follow-tile { width:28px; height:28px; font-size:14px; align-self:center; }
.demo-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; margin:12px 0 0; padding:8px 16px; background:var(--wash); border:1px dashed var(--accent); border-radius:14px; }
.demo-banner p { margin:0; font-size:.875rem; }
.demo-row { margin:16px 0 0; text-align:center; }
.demo-row:has(> [hidden]) { display:none; }
@media(max-width:650px) {
  .card-media { grid-template-columns:96px minmax(0,1fr); gap:14px; }
  .card-tile { width:96px; height:96px; }
  .tile-caption { width:96px; }
  .card-head h3 { font-size:1.3125rem; }
  .feature { grid-template-columns:minmax(0,1fr); }
  .feature-media img { aspect-ratio:3 / 2; }
  .feature-media.is-placeholder { min-height:180px; }
  .feature-body { padding:20px; }
}

/* Roaster requests from the follow picker: an optional inline panel, not a nested form. */
.follow-option.is-request { border-top:1px dashed var(--line); margin-top:4px; }
.roaster-request { margin:10px 0 14px; padding:16px; background:var(--surface); border:1px solid var(--control-border); border-radius:16px; }
.roaster-request .request-title { margin:0 0 2px; font-weight:750; font-size:1rem; }
.roaster-request .helper { margin:0 0 10px; font-size:.8125rem; }
.roaster-request input { width:100%; margin-bottom:12px; }
.roaster-request .actions { margin-top:4px; }
.request-error { min-height:0; margin:0 0 8px; font-size:.875rem; font-weight:650; color:#b3261e; }
.request-error:empty { display:none; }
@media(prefers-color-scheme:dark) { .request-error { color:#ffb4a9; } }

/* Browse every coffee: a second way in under "Skip to today's matches", and a note in the header while browsing. */
.browse-all { display:flex; width:max-content; margin:-4px 0 0 -10px; font-size:.875rem; }

/* Schedule rows open that roaster's newest coffees. The name is the link, stretched over the whole row so the
   target is the row (at least 44px), and the focus ring outlines the row. */
.drop-row { position:relative; }
.drop-link { display:inline-flex; align-items:center; gap:6px; color:var(--text); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.drop-link .icon { width:16px; height:16px; flex-shrink:0; vertical-align:0; color:var(--accent); }
.drop-link::after { content:""; position:absolute; inset:0; border-radius:10px; }
.drop-link:focus-visible { outline:none; }
.drop-row:has(.drop-link:focus-visible) { outline:3px solid var(--focus); outline-offset:2px; border-radius:10px; }
@media(hover:hover) { .drop-row:has(.drop-link):hover { background:var(--wash); border-radius:10px; } .drop-row:has(.drop-link):hover .drop-link { text-decoration-thickness:2px; } }
.first-seen { margin:2px 0 0; font-size:.8125rem; font-weight:650; color:var(--accent); }

/* Logos everywhere (owner policy 2026-10-19). A light logo sits on a dark chip in both themes; logos are never
   recolored. Wordmarks get a wider chip in drops and follow rows so the name inside stays legible. */
.logo-chip.is-dark, .tile-logo.is-dark, .name-tile.has-logo.is-dark { background:#292820; border-color:var(--line); }
.name-tile.has-logo.is-wordmark { width:auto; min-width:32px; max-width:96px; padding:0 8px; border-radius:8px; }
.name-tile.has-logo.is-wordmark img { max-width:80px; max-height:60%; }
.follow-tile.has-logo.is-wordmark { max-width:84px; }
.logo-with-name { display:inline-flex; flex-wrap:wrap; align-items:center; gap:0 .3em; max-width:100%; vertical-align:middle; }
.identity-line .logo-chip { margin:2px 0; }
/* Narrow cards (200% text, or a 195px-wide zoomed phone): a logo chip shrinks to the card instead of pushing the page
   wider, and a symbol with its name may wrap. Without this the wider page also widened the decoder sheet. */
.identity-line .logo-chip { max-width:100%; }
.identity-line .logo-chip img { min-width:0; max-width:100%; }

/* Full schedule (brief 2026-10-19). One fixed header with the close control, one scrolling body. A bottom sheet on
   phones, a centered dialog from 651 px. The page behind cannot scroll and the picks bar steps aside while any
   dialog is open. scrollbar-gutter keeps the page from shifting when its scrollbar goes away. */
html:has(dialog[open]) { overflow:hidden; scrollbar-gutter:stable; }
html:has(dialog[open]) .picks-bar { visibility:hidden; }
.schedule-sheet { box-sizing:border-box; width:100%; max-width:none; max-height:85dvh; margin:auto 0 0; padding:0; color:var(--text); background:var(--bg); border:1px solid var(--control-border); border-bottom:0; border-radius:24px 24px 0 0; overflow:hidden; }
.schedule-sheet[open] { display:flex; flex-direction:column; }
.schedule-sheet::backdrop { background:rgb(20 18 14 / .45); }
.schedule-head { flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); padding:var(--space-4) max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-3) max(var(--space-4), env(safe-area-inset-left, 0px)); background:var(--bg); border-bottom:1px solid var(--line); }
.schedule-head h2 { font-size:1.5rem; margin:2px 0; }
.schedule-close { flex-shrink:0; min-width:44px; min-height:44px; margin-right:-8px; font-size:.9375rem; }
.schedule-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:var(--space-3) max(var(--space-4), env(safe-area-inset-right, 0px)) max(var(--space-6), env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px)); }
.schedule-body:focus { outline:none; }
.schedule-scope { display:flex; flex-wrap:wrap; gap:var(--space-2); min-width:0; margin:0; padding:0; border:0; }
.schedule-note { margin:var(--space-2) 0 0; font-size:.875rem; line-height:1.45; color:var(--muted); }
.sched-day { margin-top:var(--space-3); }
.sched-day h3 { margin:0; padding:6px 0; font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.sched-rows { list-style:none; margin:0; padding:0; }
.sched-row { padding:10px 0 0; border-top:1px solid var(--line); }
.sched-top { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.sched-time { display:block; margin-top:4px; font-size:1rem; font-weight:650; }
.sched-note { margin:4px 0 0; font-size:.9375rem; line-height:1.45; color:var(--muted); overflow-wrap:anywhere; }
.sched-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; column-gap:var(--space-4); }
.sched-browse, .sched-visit { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:.9375rem; font-weight:650; color:var(--text); text-underline-offset:4px; }
.sched-browse .icon, .sched-visit .icon { width:16px; height:16px; flex-shrink:0; color:var(--accent); }
.sched-more { min-height:44px; margin-right:-10px; font-size:.9375rem; }
.sched-more[aria-expanded="true"] .icon { transform:rotate(180deg); }
.sched-none { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; color:var(--muted); }
.sched-details { margin:0 0 var(--space-3); padding:var(--space-1) var(--space-3); background:var(--wash); border-radius:12px; }
.sched-details p { margin:8px 0; font-size:.9375rem; line-height:1.45; }
.sched-visit-line { display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; }
.sched-host { font-size:.8125rem; color:var(--muted); overflow-wrap:anywhere; }
.schedule-other { margin-top:var(--space-6); border-top:1px dashed var(--line); }
.schedule-other summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-height:48px; padding:6px 0; font-size:1.0625rem; font-weight:700; }
.schedule-other summary::-webkit-details-marker { display:none; }
.schedule-other[open] summary .icon { transform:rotate(180deg); }
.back-to { margin:0 0 2px -10px; font-size:.9375rem; }
@media(min-width:651px) {
  .schedule-sheet { width:min(640px, calc(100vw - 48px)); max-height:calc(100dvh - 96px); margin:auto; border-bottom:1px solid var(--control-border); border-radius:24px; }
}
@media(prefers-reduced-motion:no-preference) {
  .schedule-sheet[open] { animation:schedule-in var(--motion-arrival) var(--ease); }
  @keyframes schedule-in { from { transform:translateY(24px); opacity:.6; } }
}

/* ===== Paper Party layer (2026-10-19). Recipes from the handoff's components.css, applied to the app's own
   selectors. Text, prices and controls stay HTML on opaque surfaces; decoration stays at the edges. Geometry is
   the same in every flavor: 2px outlines, 22px cards, 14px buttons, a hard 4px shadow. ===== */

/* Buttons: accent paper with an ink edge. Text buttons stay plain links in shape. */
button, .buy { min-height:48px; padding:12px 20px; gap:12px; border:2px solid var(--text); border-radius:14px; background:var(--accent); color:var(--button-text); box-shadow:0 3px 0 var(--text); font-weight:750; }
button:active, .buy:active { transform:translateY(2px); box-shadow:0 1px 0 var(--text); }
button:disabled { opacity:1; background:var(--wash); color:var(--muted); border-color:var(--control-border); box-shadow:none; cursor:not-allowed; transform:none; }
.text-button, .text-button:active { box-shadow:none; border:0; background:none; color:var(--text); transform:none; }
.quiz-submit>button { box-shadow:0 3px 0 var(--text); }
@media(hover:hover) { button:hover:not(:disabled),.buy:hover { filter:brightness(.96); } .text-button:hover { filter:none; text-decoration-thickness:2px; } }
@media(prefers-reduced-motion:reduce) { button:active, .buy:active { transform:none; } }
input, select { border:2px solid var(--control-border); border-radius:12px; min-height:48px; }
input[type=checkbox], input[type=radio] { min-height:0; }

/* Reading surfaces. Cards carry an ink edge; panels a softer paper edge. */
.coffee-card, .drops, .newsletter, .empty, .feature, .guide .card, .guide .label, .roaster-request, .method .stage { border:2px solid var(--text); border-radius:var(--card-shape); background:var(--surface); box-shadow:4px 5px 0 var(--shadow); }
.newsletter { background:var(--surface); }
.drops { border-color:var(--text); }
.follow-options { border:2px solid var(--control-border); box-shadow:4px 5px 0 var(--shadow); }
.filter-panel, .finetune { border-color:var(--control-border); }
.filter-panel[open] .filters { padding:var(--space-4); margin:0 0 var(--space-4); background:var(--surface); border:2px solid var(--control-border); border-radius:var(--card-shape); }

/* Choices, chips and switches: one 2px edge in both states, so selecting never moves a label. Selected adds the
   accent edge, a tinted fill and a check (never color alone). */
.choice-face, .switch-option-face, .switch-face, .facet-face, .follow-chip { border:2px solid var(--control-border); }
.choice-face { padding:16.5px 15.5px; }
.adventure-choices .choice-face { padding:15.5px 41.5px 15.5px 52.5px; }
.budget-choices .choice-face { padding:12.5px 9.5px; }
.switch-option-face { padding:7.5px 39.5px 7.5px 11.5px; }
.switch-face { padding:5.5px 35.5px 5.5px 5.5px; }
.facet-face { padding:5.5px 13.5px; }
.choice-card input:checked + .choice-face { box-shadow:3px 4px 0 var(--shadow); }
.choice-check, .mini-check { border-width:2px; }
@media(max-width:650px) {
  .choice-face { padding:14.5px 12.5px; }
  .adventure-choices .choice-face { padding:15.5px 37.5px 15.5px 48.5px; }
  .budget-choices .choice-face { padding:11.5px 45.5px 11.5px 15.5px; }
}
@media(hover:hover) { .facet-chip:hover .facet-face, .switch-chip:hover .switch-face, .switch-option:hover .switch-option-face { border-color:var(--accent); } }

/* Header and footer. */
.masthead { border-bottom:0; }
.intro .eyebrow, .guide .eyebrow { border-width:2px; }
.site-footer { margin-top:56px; border-top:2px solid var(--control-border); }
/* The confetti edge has its own strip above the footer content, never behind text. */
.site-footer::before { content:""; display:block; height:28px; margin-top:-14px; background:url("assets/patterns/footer-confetti.svg") center / auto 28px no-repeat; pointer-events:none; }
.footer-base { border-top:2px dashed var(--line); }

/* Dialogs: opaque paper with a strong edge. */
.schedule-sheet, .picks-sheet { background:var(--surface); border:2px solid var(--text); border-bottom:0; }
.schedule-head { background:var(--surface); border-bottom:2px solid var(--line); }
@media(min-width:651px) { .schedule-sheet { border-bottom:2px solid var(--text); box-shadow:6px 7px 0 var(--shadow); } }

/* Coming up: a small cup-calendar accent in the heading instead of the round badge. */
.drops-art { width:56px; height:42px; flex-shrink:0; }
.drop-kind { border:1.5px solid var(--control-border); border-radius:8px; }
.drop-kind[data-kind="ORDER_CUTOFF"], .drop-kind[data-kind="UNKNOWN"] { background:var(--surface); }

/* Quiz hero: the selected character only, no orbiting shapes. Up to 220px on wide screens. */
.scene-orbit { display:none; }
.cup-scene { height:240px; max-width:300px; }
.cup-scene::before { inset:24px 18px 18px; border-radius:44% 56% 52% 48%; transform:rotate(-6deg); }
.scene-label { border-width:2px; border-radius:8px; transform:rotate(-3deg); }
/* Selection celebration: one short move of the character after a deliberate pick (app.js adds .is-celebrating).
   Familiar stays quiet. Reduced motion turns all of it off. */
@media(prefers-reduced-motion:no-preference) {
  body[data-flavor="1"] .is-celebrating { animation:paper-hop 420ms ease-out 1; }
  body[data-flavor="2"] .is-celebrating { animation:paper-jelly 440ms ease-out 1; }
  body[data-flavor="3"] .is-celebrating { animation:paper-settle 420ms ease-out 1; }
  body[data-flavor="4"] .is-celebrating { animation:paper-wiggle 440ms ease-out 1; }
  @keyframes paper-hop { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-6px); } 70% { transform:translateY(1px); } }
  @keyframes paper-jelly { 0%,100% { transform:scale(1); } 30% { transform:scale(1.04,.96); } 65% { transform:scale(.98,1.02); } }
  @keyframes paper-settle { 0%,100% { transform:translateY(0) rotate(0); } 35% { transform:translateY(-2px) rotate(-2deg); } 70% { transform:translateY(1px) rotate(1deg); } }
  @keyframes paper-wiggle { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-4deg); } 55% { transform:rotate(4deg); } 80% { transform:rotate(-1deg); } }
}

/* Phones: the first question comes early. The character sits beside the heading at 104px; its caption stays in
   the page for screen readers (it is the live status of the pick) but is not shown. Desktop keeps the two columns. */
@media(max-width:650px) {
  .quiz { padding-top:16px; }
  .intro { display:grid; grid-template-columns:minmax(0,1fr) 104px; column-gap:12px; grid-template-areas:"eyebrow eyebrow" "title art" "lede lede" "skip skip" "browse browse"; align-items:center; }
  .intro .eyebrow { grid-area:eyebrow; justify-self:start; margin-bottom:12px; }
  .intro h1 { grid-area:title; font-size:clamp(2rem, 9.4vw, 2.5rem); margin:0 0 10px; }
  .intro .lede { grid-area:lede; margin-bottom:6px; }
  #skip-quiz { grid-area:skip; justify-self:start; }
  #browse-all { grid-area:browse; justify-self:start; margin-top:-8px; }
  .cup-scene { grid-area:art; width:104px; height:104px; max-width:none; margin:0; }
  .cup-scene::before { inset:10px 4px 4px; }
  .scene-label { display:none; }
  .mood-caption { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .choice-art { height:72px; }
  .question { margin-bottom:22px; }
}

/* Coffee cards (page audit 3). Rank joins the price line, the brand name sits under it, taste fit is one row. */
.coffee-card.is-sold { border-style:dashed; }
.card-media { align-items:center; }
.card-head h3 { margin:0 0 6px; }
.card-head .price { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; font-size:.875rem; }
.card-head .identity-line { margin:6px 0 0; font-size:.8125rem; line-height:1.45; }
.card-head .first-seen { margin-top:4px; }
.coffee-card .disclosure { margin:0 0 12px; }
.card-details { margin-top:8px; }
.stock-date { margin:6px 0 0; }
.sold-out { border:2px dashed var(--control-border); border-radius:14px; background:var(--surface); }
@media(max-width:650px) {
  .card-media { grid-template-columns:80px minmax(0,1fr); gap:14px; }
  .card-tile { width:80px; height:80px; border-radius:14px; }
  .tile-logo { padding:10px; }
  .tile-caption { width:80px; }
  .coffee-card { padding:18px; }
}

/* Quiz details. Step numbers are paper tickets; budget choices carry a coin, treat or gift (decorative). */
.step-number { width:2.5em; height:2.5em; border:2px solid var(--text); border-radius:9px; background:var(--wash); color:var(--text); box-shadow:2px 2px 0 var(--shadow); font-size:.75rem; font-weight:800; }
.budget-choices .choice-mark { display:block; width:56px; height:42px; object-fit:contain; }
.budget-choices .choice-face strong { margin-top:8px; }
@media(max-width:650px) {
  .budget-choices .choice-face, .budget-choices input:checked + .choice-face { padding-left:71.5px; }
  .budget-choices .choice-mark { position:absolute; left:12px; top:calc(50% - 21px); }
  .budget-choices .choice-face strong { margin-top:0; }
}
/* Loading: static placeholders the size of the choices, so nothing jumps when they arrive. No shimmer. */
.choice-skeleton { display:block; min-height:214px; border:2px dashed var(--control-border); border-radius:var(--card-shape); background:var(--surface); }
.loading-copy { grid-column:1 / -1; margin:0; font-size:.875rem; color:var(--muted); }
@media(max-width:650px) { .choice-skeleton { min-height:178px; } }

/* States: no matches, catalog error, nothing scheduled, saved. One illustration each, text and actions in HTML. */
.empty { border-style:solid; }
.empty-art { width:150px; height:112px; }
.state-panel { margin:24px 0; padding:22px; text-align:center; background:var(--surface); border:2px solid var(--text); border-radius:var(--card-shape); box-shadow:4px 5px 0 var(--shadow); }
.state-panel img { display:block; width:150px; height:112px; margin:0 auto 8px; object-fit:contain; }
.state-panel h2 { font-size:1.5rem; margin:0 0 6px; }
.state-panel p { max-width:40ch; margin:0 auto 16px; }
.sched-empty-art { display:block; width:120px; height:90px; margin:var(--space-4) auto 0; }
.sched-empty-art + .drop-none { text-align:center; }
.signup-art { display:block; width:96px; height:72px; margin:12px auto 0; }

/* Signup: paper panel with a strip of tape in reserved space above the text, and a parade capped at 260px on phones. */
.newsletter { position:relative; }
.newsletter::before { content:""; position:absolute; top:-13px; left:32px; width:84px; height:25px; background:url("assets/card-accents/tape.svg") center / contain no-repeat; pointer-events:none; }
.parade-art { aspect-ratio:3 / 1; max-width:440px; margin:0 0 var(--space-3); }
@media(max-width:650px) { .parade-art { max-width:260px; margin:0 0 var(--space-2); } }

/* Demo banner: one line, details on request (page audit 5). */
.demo-banner { align-items:center; padding:2px 12px; border:2px dashed var(--accent); }
.demo-about { flex:1 1 14rem; min-width:0; }
.demo-about summary { min-height:44px; padding:10px 0; font-size:.875rem; list-style:none; }
.demo-about summary::-webkit-details-marker { display:none; }
.demo-about-label { text-decoration:underline; text-underline-offset:4px; }
.demo-about p { margin:0 0 10px; font-size:.875rem; }

/* Flavor guide, Paper Party (page audit 4). Shorter opening, compact family cards with the details folded in, the
   bag example as one taped note whose lines open to what they mean, and paper drawings in place of the old inline
   diagrams. Source facts (the bag's lines) stay apart from Sip Parade's explanations (inside each line). */
.guide .jump a { border:2px solid var(--control-border); }
.guide .promise { border:2px solid var(--control-border); background:var(--wash); }
.guide .card { padding:18px; }
.guide .families { gap:14px; }
.guide .family { grid-template-columns:64px minmax(0,1fr); column-gap:14px; row-gap:0; }
.guide .family img { width:64px; height:64px; }
.guide .family .family-action, .guide .family .family-more { grid-column:1 / -1; }
.guide .family .family-action { margin-top:6px; }
.guide .family-more summary { min-height:44px; font-size:.9375rem; color:var(--muted); }
.guide .family-more p { margin:0 0 6px; }
/* The note: tape in reserved space at the top edge, never over text. */
.guide .label.note { position:relative; max-width:560px; margin:18px 0 0; padding:30px 20px 16px; border-radius:6px 20px 20px 20px; }
.guide .label.note::before { content:""; position:absolute; top:-13px; left:24px; width:84px; height:25px; background:url("assets/card-accents/tape.svg") center / contain no-repeat; pointer-events:none; }
.guide .bag-fields { list-style:none; margin:0; padding:0; display:grid; }
.guide .bag-fields > li + li { border-top:1px dashed var(--line); }
.guide .bag-fields summary { display:grid; grid-template-columns:26px minmax(4.5rem,auto) minmax(0,1fr) 12px; align-items:center; gap:4px 10px; min-height:48px; padding:6px 0; font-weight:400; }
.guide .bag-fields .field { color:var(--muted); font-size:.875rem; }
.guide .bag-fields .value { font-weight:700; font-size:.9375rem; overflow-wrap:anywhere; }
.guide .bag-fields summary::after { margin:0 2px 4px auto; }
.guide .bag-fields .explain { margin:0 0 10px 36px; padding:10px 12px; background:var(--wash); border-radius:12px; }
.guide .bag-fields .explain p { margin:0; font-size:.9375rem; }
.guide .label figcaption a { min-height:44px; }
/* Processing drawings. The cherry keeps its numbered legend in HTML beside it. */
.guide .dry > li { grid-template-columns:72px minmax(0,1fr); }
.guide .dry .mini { width:72px; height:54px; object-fit:contain; }
.guide .extra-art { float:right; width:96px; height:72px; margin:0 0 6px 12px; object-fit:contain; }
@media (max-width:760px) { .guide .cherry { grid-template-columns:132px minmax(0,1fr); } }
@media (max-width:650px) {
  .guide .family { grid-template-columns:56px minmax(0,1fr); }
  .guide .family img { width:56px; height:56px; }
  .guide .extra-art { width:72px; height:54px; }
  .guide .bag-fields summary { grid-template-columns:26px minmax(0,1fr) 12px; grid-template-areas:"num field mark" "num value mark"; row-gap:0; }
  .guide .bag-fields .num { grid-area:num; }
  .guide .bag-fields .field { grid-area:field; }
  .guide .bag-fields .value { grid-area:value; }
  .guide .bag-fields summary::after { grid-area:mark; }
  .guide .bag-fields .explain { margin-left:0; }
}
@media (max-width:340px) { .guide .family img { grid-row:auto; } }
/* Family cards: the action sits under the name, the details below, so each card is one short block. */
.guide .family { grid-template-columns:64px minmax(0,1fr); grid-template-rows:auto auto auto; align-items:start; }
.guide .family img { grid-row:1 / span 3; align-self:start; }
.guide .family h3 { grid-column:2; align-self:start; margin-top:2px; }
.guide .family .blurb { grid-column:2; margin:0; }
.guide .family .family-action { grid-column:2; margin-top:2px; justify-self:start; }
.guide .family .family-more { grid-column:1 / -1; }
@media (max-width:650px) {
  .guide h1 { font-size:clamp(1.875rem, 9vw, 2.25rem); }
  .guide .family { grid-template-columns:56px minmax(0,1fr); }
}
/* Very narrow screens and 200% text: everything stacks, long words break instead of overflowing. */
h1, h2, h3 { overflow-wrap:break-word; hyphens:auto; }
@media (max-width:420px) { h1 { font-size:clamp(1.875rem, 10vw, 2.625rem); } }
@media (max-width:340px) {
  .guide .family { grid-template-columns:minmax(0,1fr); }
  .guide .family img, .guide .family h3, .guide .family .blurb, .guide .family .family-action { grid-column:1; grid-row:auto; }
  .intro { grid-template-columns:minmax(0,1fr); grid-template-areas:"eyebrow" "title" "lede" "skip" "browse"; }
  .intro .cup-scene { display:none; }
}
#browse-all { max-width:100%; }
@media (max-width:650px) { #browse-all { width:auto; } }
@media (max-width:340px) {
  .guide .dry > li, .guide .deep-item { grid-template-columns:minmax(0,1fr); }
  .guide .dry .mini, .guide .lens-art { grid-row:auto; }
  .guide .dry h4, .guide .dry .dries, .guide .deep-item h3 { grid-column:1; }
  .guide .extra-art { float:none; display:block; margin:0 0 6px; }
}

/* How it works (owner brief 2026-10-19): three short illustrated steps, a few things worth knowing, one call to
   action. The method's internals are not explained on this page. */
.method .stages { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; padding:0; margin:8px 0 0; }
.method .stage { padding:16px; }
.method .stage img { display:block; width:96px; height:72px; object-fit:contain; margin:0 0 6px; }
.method .stage p { margin:0; font-size:.9375rem; line-height:1.5; }
.method .stage .stage-title { display:flex; align-items:center; gap:8px; margin:0 0 4px; font-weight:750; font-size:1.0625rem; line-height:1.25; letter-spacing:-.015em; }
.stage-num { display:inline-grid; place-items:center; flex:none; width:2.15em; height:2.15em; border:2px solid var(--text); border-radius:8px; background:var(--wash); box-shadow:2px 2px 0 var(--shadow); font-size:.8125rem; font-weight:800; }
.method h2 { overflow-wrap:anywhere; hyphens:auto; }
.method .lede { max-width:560px; margin-bottom:24px; }
.method .worth { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 32px; }
.method .worth li { font-size:.9375rem; line-height:1.6; }
.method .worth strong { display:block; font-size:1rem; margin-bottom:2px; }
.method .worth-now { display:block; margin-top:6px; font-size:.875rem; color:var(--muted); }
.method .worth-now:empty { display:none; }
.method-cta h2 { font-size:1.5rem; margin-bottom:16px; }
.cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; }
.method-cta .buy { display:inline-flex; width:auto; min-width:220px; font-size:1rem; }
.cta-link { display:inline-flex; align-items:center; min-height:48px; font-weight:700; color:var(--accent); text-underline-offset:4px; }
@media(max-width:650px) {
  .method .stages { grid-template-columns:minmax(0,1fr); gap:10px; }
  .method .stage { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; padding:12px 14px; }
  .method .stage img { width:64px; height:56px; margin:0; }
  .method .worth { grid-template-columns:minmax(0,1fr); gap:14px; }
  .method-cta .buy { display:flex; width:100%; min-width:0; }
}
@media(max-width:340px) { .method .stage { grid-template-columns:minmax(0,1fr); } }

/* Editorial paper illustrations (audit replacements, paper style). Cherries beside the processing intro from 651px,
   where there is room, and not on phones, where they would only add height. The brew scene sits beside the closing
   heading, decorative, since the card's text carries its meaning. Both are illustrations, never photos. */
.guide .process-intro { display:block; }
.guide .cherries-art { display:none; }
@media(min-width:651px) {
  .guide .process-intro { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:20px; align-items:center; }
  .guide .process-intro p { margin:0; }
  .guide .cherries-art { display:block; grid-column:2; grid-row:1; width:240px; height:auto; aspect-ratio:3 / 2; }
}
.guide .cta { display:grid; grid-template-columns:200px minmax(0,1fr); grid-template-areas:"art title" "art text" "art action" "art alt"; column-gap:20px; align-items:center; text-align:left; }
.guide .cta-art { grid-area:art; width:200px; height:auto; aspect-ratio:3 / 2; }
.guide .cta h2 { grid-area:title; }
.guide .cta > p:not(.cta-alt) { grid-area:text; margin:0 0 6px; }
.guide .cta .buy { grid-area:action; justify-self:start; }
.guide .cta .cta-alt { grid-area:alt; }
@media(max-width:650px) {
  .guide .cta { grid-template-columns:120px minmax(0,1fr); grid-template-areas:"art title" "text text" "action action" "alt alt"; column-gap:14px; padding:22px 18px; }
  .guide .cta-art { width:120px; }
  .guide .cta .buy { justify-self:stretch; }
}
@media(max-width:340px) { .guide .cta { grid-template-columns:minmax(0,1fr); grid-template-areas:"art" "title" "text" "action" "alt"; } }

/* Audit F01: forced colors. Selection must not depend on author colors, which the system replaces. The checked
   control gets the system highlight on its border and its check, and only the checked control shows a check. */
@media (forced-colors: active) {
  .choice-card input:checked + .choice-face, .switch-chip input:checked + .switch-face,
  .switch-option input:checked + .switch-option-face, .facet-chip input:checked + .facet-face { border-color:Highlight; }
  input:checked + .choice-face .choice-check, input:checked + .switch-face .mini-check,
  input:checked + .switch-option-face .mini-check { forced-color-adjust:none; background:Highlight; border-color:Highlight; color:HighlightText; }
  .facet-chip input:checked + .facet-face::before { color:Highlight; }
  .choice-card input:focus-visible + .choice-face, .switch-chip input:focus-visible + .switch-face,
  .switch-option input:focus-visible + .switch-option-face, .facet-chip input:focus-visible + .facet-face { outline-color:CanvasText; }
}

/* Audit F03: type follows the reader's text size. Sizes are in rem (identical at the default 16px), so a larger
   browser text setting enlarges the words, not just the zoom level. A word too long for its column wraps instead of
   widening the page. Breaking happens only when a word cannot fit, so the default layout is unchanged. */
body { overflow-wrap:break-word; }

/* Audit F04 (owner OK 2026-10-19): compact Filter and sort. Scope and order stay on top. Each filter group is its own
   disclosure, closed by default, and a closed group names its picks. A sticky bar returns to the list. */
.facet-group { border-top:2px solid var(--line); }
.facet-group + .facet-group { margin-top:calc(-1 * var(--space-4)); }
.facet-group > summary { list-style:none; display:flex; align-items:center; gap:4px 12px; min-height:var(--hit); padding:8px 0; font-size:.9375rem; font-weight:700; overflow-wrap:break-word; }
.facet-group > summary::-webkit-details-marker { display:none; }
.facet-group-name { flex:0 1 auto; }
.facet-group-picks { flex:1 1 0; min-width:0; text-align:right; font-size:.875rem; font-weight:500; color:var(--muted); }
.facet-group[open] .facet-group-picks { visibility:hidden; }
.facet-group-chevron { flex:none; margin:0 !important; }
.facet-group[open] .facet-group-chevron { transform:rotate(180deg); }
.facet-group > .facet { padding:4px 0 var(--space-4); }
.filter-checks { border-top:2px solid var(--line); margin-top:calc(-1 * var(--space-4)); padding-top:var(--space-2); }
.filter-actions { position:sticky; bottom:0; z-index:3; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4);
  margin:0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background:var(--surface); border-top:2px solid var(--control-border); border-radius:0 0 var(--card-shape) var(--card-shape); }
#filter-done { flex:1 1 9rem; min-height:var(--hit); }
.filter-actions #clear-filters { margin-left:0; }
html:has(#filter-panel[open]) .picks-bar { visibility:hidden; }
@media (prefers-reduced-motion: no-preference) { .facet-group-chevron { transition:transform var(--motion-press, .12s) ease; } }

/* Audit F06: How it works keeps one line for its catalog status, so a slow load's message does not push the page. */
.method .data-status, .method .data-status:empty { display:block; min-height:1.5em; }

/* Plain cards (owner brief 2026-10-19): the roaster's notes, one sentence on why a coffee is here, and Coffee details
   as facts. No meters, rank pills or points remain in the card styles. */
.card-head .price { margin:6px 0 0; font-size:.9375rem; font-weight:700; color:var(--text); }
.card-notes { margin:10px 0 0; font-size:.9375rem; line-height:1.4; overflow-wrap:break-word; }
.card-notes-label { font-size:.8125rem; color:var(--muted); }
.card-notes-list { font-weight:650; }
.why-here { margin:6px 0 0; font-size:.875rem; line-height:1.5; }
.coferment-note { margin:8px 0 0; padding-left:10px; border-left:3px solid var(--accent); font-size:.8125rem; line-height:1.45; }
.card-details .detail-label { margin:10px 0 2px; font-size:.75rem; font-weight:650; color:var(--muted); }
.card-details .process-line { margin:10px 0; font-size:.875rem; line-height:1.5; }
.coffee-facts { margin:10px 0; font-size:.8125rem; line-height:1.45; }
.coffee-facts > div { display:grid; grid-template-columns:minmax(6.5rem, auto) minmax(0,1fr); gap:0 12px; padding:3px 0; }
.coffee-facts dt { font-weight:650; color:var(--muted); }
.coffee-facts dd { margin:0; overflow-wrap:anywhere; }
.card-details .coverage { margin:0 0 10px; font-size:.8125rem; color:var(--muted); }
@media (max-width:340px) { .coffee-facts > div { grid-template-columns:minmax(0,1fr); } }

/* Paper field guide and coffee decoder (owner brief 2026-10-19). Adapted from the decoder package to the site tokens.
   Paper layers (tabs, shadows, stickers) sit at the edges of opaque cards and never take pointer events. Text stays
   horizontal on solid surfaces. Ink on the pastel tabs and diagram colors is the fixed cocoa in both modes. */
.field-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 22px; margin:34px 0 8px; }
.field-card { position:relative; display:flex; flex-direction:column; padding:18px 20px 8px; background:var(--surface); border:2px solid var(--text); border-radius:6px 22px 22px 22px; box-shadow:5px 6px 0 var(--shadow); }
.field-tab { position:absolute; left:-2px; top:-26px; margin:0; padding:3px 14px 2px; color:#35291F; background:var(--tab, #E7D8EF); border:2px solid var(--text); border-bottom:0; border-radius:10px 12px 0 0; font-size:.6875rem; font-weight:800; letter-spacing:.09em; line-height:1.6; text-transform:uppercase; pointer-events:none; }
.field-top { display:flex; align-items:center; gap:16px; margin-bottom:8px; }
.field-top img { flex:none; width:84px; height:auto; aspect-ratio:128 / 112; transform:rotate(-4deg); filter:drop-shadow(2px 3px 0 var(--shadow)); pointer-events:none; }
.guide .field-top h3 { font-size:1.5rem; margin:0; }
.field-sub { margin:2px 0 0; font-size:.9375rem; color:var(--muted); }
.guide .field-card > p { font-size:1rem; margin:0 0 4px; }
.guide .field-card details { margin-top:auto; border-top:1px dashed var(--line); }
.guide .field-card details > summary { min-height:48px; font-size:1rem; color:var(--accent); }
.guide .field-card details[open] > summary { margin-bottom:2px; }
.guide .field-card details p, .guide .field-card details li { font-size:1rem; }
.guide .field-card .tips { margin:4px 0 12px; padding-left:20px; }
@media (prefers-reduced-motion: no-preference) {
  .field-top img { transition:transform var(--motion-arrival) var(--ease); }
  .field-card:has(details[open]) .field-top img { transform:rotate(3deg) translateY(-2px); }
}
@media (max-width:650px) {
  .field-grid { grid-template-columns:minmax(0,1fr); gap:38px; }
  .field-card { padding:16px 16px 6px; }
  .field-top img { width:72px; }
  .guide .field-top h3 { font-size:1.375rem; }
}

/* The shared stamp: "Decode this coffee" on every card and in the guide's bag example. */
.decode-action { display:inline-flex; align-items:center; gap:10px; min-height:48px; margin:12px 0 0; padding:4px 16px 4px 6px; color:var(--text); background:var(--wash); border:2px solid var(--text); border-radius:14px; box-shadow:2px 3px 0 var(--shadow); font:inherit; font-size:.9375rem; font-weight:750; cursor:pointer; }
.decode-action img { width:40px; height:35px; flex:none; pointer-events:none; }
.decode-action:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
@media (prefers-reduced-motion: no-preference) {
  .decode-action img { transition:transform var(--motion-press) var(--ease); }
  .decode-action:hover img, .decode-action:focus-visible img { transform:rotate(-10deg) scale(1.06); }
  .decode-action:active { transform:translateY(2px); box-shadow:0 1px 0 var(--shadow); }
}
.coffee-card .decode-action { display:flex; width:100%; justify-content:flex-start; }
.decoder-intro { display:grid; grid-template-columns:72px minmax(0,1fr); gap:6px 16px; align-items:start; margin:22px 0 0; padding:18px; background:var(--surface); border:2px solid var(--text); border-radius:var(--card-shape); box-shadow:4px 5px 0 var(--shadow); }
.decoder-intro > img { width:72px; height:auto; pointer-events:none; }
.decoder-intro-kicker { margin:0 0 4px; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.guide .decoder-intro p { margin:0; font-size:1rem; }
.decoder-intro .decode-action { margin-top:12px; }
@media (max-width:420px) { .decoder-intro { grid-template-columns:minmax(0,1fr); } .decoder-intro > img { width:64px; } }

/* Cherry anatomy: the numbered drawing with a real HTML legend. Highlighting keeps every layer opaque. */
.anatomy { margin:20px 0 4px; padding:20px; background:var(--surface); border:2px solid var(--text); border-radius:var(--card-shape); box-shadow:4px 5px 0 var(--shadow); }
.guide .anatomy h3 { font-size:1.5rem; margin:0 0 6px; scroll-margin-top:16px; }
.guide .anatomy h3:focus { outline:none; }
.guide .anatomy h3:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.anatomy-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:18px; align-items:center; margin-top:12px; }
.diagram { padding:8px; background:#FFF8E7; border:1px solid var(--line); border-radius:18px; }
.diagram svg { display:block; width:100%; height:auto; }
.diagram [data-layer] { transition:filter var(--motion-color) ease; }
.diagram.has-active [data-layer]:not(.is-active) { filter:grayscale(1) brightness(1.1); }
.diagram.has-active [data-layer].is-active { stroke-width:8px; }
.diagram.has-active [data-callout]:not(.is-active) { opacity:.4; }
.anatomy-legend { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.anatomy-legend button { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:6px 10px; color:var(--text); background:transparent; border:2px solid transparent; border-radius:14px; font:inherit; text-align:left; cursor:pointer; }
.anatomy-legend button[aria-pressed="true"] { background:var(--wash); border-color:var(--text); }
.anatomy-legend button:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.anatomy-legend strong { display:block; font-size:1rem; }
.anatomy-legend small { display:block; font-size:.875rem; color:var(--muted); line-height:1.4; }
.swatch { display:grid; place-items:center; flex:none; width:34px; height:34px; color:#30231D; background:var(--swatch); border:2px solid #35291F; border-radius:10px; font-size:1.1875rem; font-weight:850; line-height:1; }
.swatch.is-dark-ink { color:#FFFEF9; }
.layer-note { margin:12px 0 0; padding:12px 14px; min-height:3.2em; background:var(--wash); border-radius:12px; font-size:1rem; }
.anatomy .text-button { margin-left:-10px; }
@media (max-width:650px) {
  .anatomy { padding:16px; }
  .anatomy-layout { grid-template-columns:minmax(0,1fr); gap:8px; }
  .diagram { width:min(320px, 100%); margin:0 auto; }
}
@media (forced-colors: active) {
  .anatomy-legend button[aria-pressed="true"] { outline:3px solid Highlight; outline-offset:-3px; }
  .swatch, .diagram { forced-color-adjust:none; }
  .decode-action { border-color:ButtonText; }
}

/* The decoder dialog (owner briefs 2026-10-19 and 2026-10-20): the coffee is the header. Wide screens: a compact
   identity column with the bag, then the header, tabs, one scrolling panel area and a footer for the listing. Phones:
   a bottom sheet with a thumbnail beside the name. The panel area is as tall as the Taste panel needs (set per coffee
   by decoder.js as --decoder-fit), never shorter than a compact minimum and never taller than the screen allows.
   Longer panels scroll inside it, and header, tabs and footer never move when the tab changes. */
.decoder { box-sizing:border-box; display:none; width:min(860px, calc(100vw - 48px)); max-width:none; max-height:min(760px, calc(100dvh - 48px)); padding:0; --decoder-base:13rem; color:var(--text); background:var(--surface); border:2px solid var(--text); border-radius:24px; box-shadow:6px 8px 0 rgb(37 25 15 / .26); overflow:hidden; }
.decoder[open] { display:flex; }
.decoder::backdrop { background:rgb(20 18 14 / .5); }
.decoder-id { display:flex; flex:0 0 220px; flex-direction:column; align-items:center; gap:10px; min-height:0; padding:22px 16px; background:var(--bg); border-right:1px solid var(--line); overflow-x:hidden; overflow-y:auto; }
.decoder-bagfig { width:100%; margin:0; text-align:center; }
.decoder-bag { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.decoder-bagfig .decoder-bag { max-width:184px; margin:0 auto; }
/* The wide-screen bag is a button with a visible "View bag" label that opens the same larger view as the phone
   thumbnail. */
.decoder-bag-button { display:grid; justify-items:center; gap:10px; width:100%; min-height:0; margin:0; padding:6px; color:var(--text); background:transparent; border:0; border-radius:16px; box-shadow:none; font-weight:inherit; cursor:zoom-in; }
.decoder-bag-button:active { transform:none; box-shadow:none; }
.decoder-bag-button:hover { filter:none; }
.decoder-viewbag { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 14px; font-size:.875rem; font-weight:750; background:var(--surface); border:2px solid var(--text); border-radius:999px; }
.decoder-viewbag .icon { width:16px; height:16px; }
@media (hover:hover) { .decoder-bag-button:hover .decoder-viewbag { background:var(--wash); } }
.decoder-bag-button:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.decoder-bagfig figcaption, .decoder-zoomfig figcaption { display:grid; justify-items:center; gap:6px; margin-top:10px; font-size:.75rem; line-height:1.45; color:var(--muted); }
.decoder-demo { display:inline-block; padding:2px 8px; font-size:.6875rem; font-weight:750; color:var(--text); background:var(--wash); border-radius:999px; }
.decoder-idpanel { display:grid; justify-items:center; gap:6px; width:100%; padding-top:8px; text-align:center; }
.decoder-logo { display:inline-flex; align-items:center; justify-content:center; max-width:100%; padding:8px 12px; background:#fffef8; border:1px solid #e6dfcf; border-radius:12px; }
.decoder-logo.is-dark, .decoder-thumb-logo.is-dark { background:#292820; border-color:var(--line); }
.decoder-logo img { display:block; width:auto; height:auto; max-width:150px; max-height:40px; }
.decoder-plant { display:block; width:88px; height:auto; }
.decoder-idname { margin:4px 0 0; font-weight:750; overflow-wrap:anywhere; }
.decoder-idplace { margin:0; font-size:.875rem; color:var(--muted); }
.decoder-main { display:flex; flex:1 1 auto; flex-direction:column; min-width:0; min-height:0; container:decoder / inline-size; }
.decoder-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; flex:none; padding:18px 18px 12px 22px; }
.decoder-thumb { display:none; }
.decoder-kicker { display:flex; align-items:center; gap:6px; margin:0 0 4px; font-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.decoder-stamp { flex:none; width:24px; height:auto; }
.decoder h2 { margin:0; font-size:1.625rem; line-height:1.15; overflow-wrap:anywhere; }
.decoder-context { margin:4px 0 0; font-size:.9375rem; line-height:1.45; color:var(--muted); overflow-wrap:anywhere; }
.decoder-close { display:inline-flex; align-items:center; gap:6px; flex:none; min-width:44px; min-height:44px; padding:6px 14px; color:var(--text); background:var(--surface); border:2px solid var(--text); border-radius:999px; box-shadow:none; font:inherit; font-weight:700; cursor:pointer; }
.decoder-x { font-size:1.25rem; line-height:1; }
.decoder-close:focus-visible, .decoder-tab:focus-visible, .decoder-panel:focus-visible, .decoder a:focus-visible, .decoder .text-button:focus-visible, .decoder-thumb-button:focus-visible, .decoder-more > summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.decoder-tabs { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; flex:none; margin:0 22px 2px; padding:4px; background:var(--wash); border:2px solid var(--line); border-radius:14px; }
.decoder-tab { min-height:44px; padding:8px 2px; color:var(--muted); background:transparent; border:0; border-radius:10px; font:inherit; font-size:.9375rem; font-weight:750; cursor:pointer; }
.decoder-tab[aria-selected="true"] { color:var(--text); background:var(--surface); outline:2px solid var(--text); outline-offset:-2px; }
.decoder-scroll { flex:1 1 max(var(--decoder-base), var(--decoder-fit, 0px)); min-height:0; padding:14px 22px 18px; overflow-y:auto; overscroll-behavior:contain; }
.decoder-scroll > .decoder-date { display:none; margin-top:16px; }
/* One panel at a time. decoder.js fades the old one out and then the new one in, so text never overlaps. */
.decoder-panel { min-width:0; }
.decoder-panel:focus-visible { outline-offset:4px; border-radius:6px; }
.decoder-panel h3 { margin:0 0 6px; font-size:.8125rem; font-weight:800; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.decoder-answer-label { margin:0; font-size:.8125rem; font-weight:650; color:var(--muted); }
.decoder-answer { margin:0; font-size:1.375rem; font-weight:800; line-height:1.3; letter-spacing:-.02em; overflow-wrap:break-word; }
.decoder-answer.is-unknown { font-weight:650; font-style:italic; color:var(--muted); }
.decoder-copy { margin:10px 0 0; font-size:1rem; line-height:1.6; }
.decoder-notice { margin:12px 0 0; padding:10px 12px; font-size:.9375rem; line-height:1.5; background:var(--wash); border-radius:12px; }
.decoder-facts { display:grid; margin:12px 0 0; }
.decoder-fact { display:grid; grid-template-columns:minmax(0,11em) minmax(0,1fr); gap:2px 12px; padding:8px 0; border-top:1px dashed var(--line); }
.decoder-fact dt { font-size:.875rem; color:var(--muted); }
.decoder-fact dd { margin:0; font-size:.9375rem; font-weight:650; overflow-wrap:anywhere; }
.decoder-fact dd.is-unknown { font-weight:400; font-style:italic; color:var(--muted); }
.decoder-category { margin:12px 0 0; padding:10px 12px; font-size:.9375rem; line-height:1.5; background:var(--bg); border:1px solid var(--line); border-radius:12px; }
.decoder-category p { margin:0; }
.decoder-category-label { font-size:.75rem; font-weight:750; color:var(--muted); }
.decoder-category .decoder-category-caveat { margin-top:4px; color:var(--muted); }
.decoder-missing { margin:10px 0 0; font-size:.875rem; line-height:1.5; color:var(--muted); }
.decoder-more { margin-top:10px; }
.decoder-more > summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:0; font-size:.9375rem; font-weight:700; list-style:none; cursor:pointer; }
.decoder-more > summary::-webkit-details-marker { display:none; }
.decoder-more > summary::after { content:""; flex-shrink:0; width:8px; height:8px; margin:0 4px 4px 2px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.decoder-more[open] > summary::after { transform:rotate(-135deg); margin-bottom:0; margin-top:4px; }
.decoder-more .decoder-facts { margin-top:4px; }
.decoder-more .decoder-category { margin-top:2px; }
.decoder .text-button { margin-left:-10px; color:var(--accent); font-weight:750; }
.decoder-foot { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 16px; flex:none; padding:4px 22px; padding-bottom:max(4px, env(safe-area-inset-bottom)); background:var(--surface); border-top:1px dashed var(--line); transition:box-shadow .15s ease; }
/* A soft edge on the footer while more of the panel is below it. */
.decoder-foot.has-more { box-shadow:0 -12px 14px -12px rgb(37 25 15 / .45); }
.decoder-checked { margin:0; padding:6px 0; font-size:.8125rem; color:var(--muted); }
.decoder-visit { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:750; color:var(--text); text-underline-offset:4px; overflow-wrap:anywhere; }
.decoder-affiliate { flex-basis:100%; margin:0 0 6px; font-size:.75rem; line-height:1.4; color:var(--muted); }
/* The larger view is sized to the dialog it sits in, so image, caption and Close fit without scrolling. */
.decoder-zoom { position:absolute; inset:0; z-index:2; container-type:size; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; background:var(--surface); overflow:auto; }
.decoder-zoom[hidden] { display:none; }
.decoder.is-zoomed { min-height:min(31rem, calc(100dvh - 48px)); }
.decoder-zoomfig { margin:0; text-align:center; }
.decoder-zoomframe { width:min(312px, 72vw, 52dvh); width:min(312px, 72vw, 52dvh, calc(100cqh - 9.5rem)); aspect-ratio:1; margin:0 auto; }
.decoder-zoomframe .decoder-bag { width:100%; }
.decoder-bag.is-pending { visibility:hidden; }
/* A larger image that fails leaves a short message, with the smaller image above it at no more than its own size. */
.decoder-zoomframe.is-failed { display:grid; place-items:center; aspect-ratio:auto; }
.decoder-zoomframe .decoder-bag.is-small { width:auto; max-width:100%; height:auto; }
.decoder-zoom-status { margin:12px 0 0; font-weight:750; text-align:center; }
.decoder-zoom-status:empty { margin:0; }
@media (prefers-reduced-motion: no-preference) {
  .decoder[open] { animation:decoder-unfold .22s cubic-bezier(.2,.8,.2,1); }
  .decoder[open]::backdrop { animation:decoder-fade .22s ease; }
  .decoder.is-closing { animation:decoder-fold .15s ease-in forwards; }
}
@media (prefers-reduced-motion: reduce) { .decoder-foot { transition:none; } }
@keyframes decoder-unfold { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes decoder-fold { to { opacity:0; transform:translateY(12px); } }
@keyframes decoder-fade { from { opacity:0; } to { opacity:1; } }
@media (max-width:650px) {
  .decoder { width:100%; max-height:92dvh; margin:auto 0 0; border-bottom:0; border-radius:22px 22px 0 0; }
  .decoder.is-zoomed { min-height:min(31rem, 92dvh); }
  .decoder-id { display:none; }
  .decoder-head { grid-template-columns:auto minmax(0,1fr) auto; gap:10px 12px; padding:14px 12px 10px 14px; }
  .decoder-thumb { display:block; width:72px; height:72px; }
  .decoder-thumb-button { display:block; width:72px; height:72px; min-height:0; padding:3px; background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:none; }
  .decoder-thumb-button:active { transform:none; box-shadow:none; }
  .decoder-thumb-button .decoder-bag { width:100%; height:100%; }
  .decoder-thumb-logo, .decoder-thumb-plant { display:flex; align-items:center; justify-content:center; width:72px; height:72px; padding:6px; border-radius:12px; }
  .decoder-thumb-logo { background:#fffef8; border:1px solid #e6dfcf; }
  .decoder-thumb-logo img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; }
  .decoder-thumb-plant { background:var(--bg); }
  .decoder-thumb-plant img { width:56px; height:auto; }
  .decoder h2 { font-size:1.25rem; }
  .decoder-context { font-size:.875rem; }
  .decoder-close { padding:6px 12px; }
  .decoder-tabs { margin:0 12px 2px; }
  .decoder-tab { font-size:.875rem; }
  .decoder-scroll { padding:12px 16px 16px; }
  .decoder-foot { padding-left:16px; padding-right:16px; }
  .decoder-answer { font-size:1.25rem; }
  .decoder-fact { grid-template-columns:minmax(0,7.5em) minmax(0,1fr); }
}
@media (max-width:340px) {
  .decoder-fact { grid-template-columns:minmax(0,1fr); }
  .decoder-head { grid-template-columns:minmax(0,1fr) auto; }
  .decoder-thumb { grid-column:1 / -1; }
}
/* Short screens (a landscape phone, or a phone at 200% zoom): the sheet takes the full available height and scrolls
   as one area so the content gets the room. The tabs stay pinned at the top, and the footer follows the content
   instead of covering it. */
@media (max-height:560px) {
  .decoder { height:calc(100dvh - 48px); }
  .decoder-main { overflow-y:auto; overscroll-behavior:contain; }
  .decoder-scroll { flex:1 0 auto; min-height:auto; overflow:visible; }
  .decoder-tabs { position:sticky; top:0; z-index:1; margin:0; border-width:0 0 2px; border-radius:0; }
  .decoder-foot.has-more { box-shadow:none; }
}
@media (max-height:560px) and (max-width:650px) { .decoder { height:92dvh; } }
/* Large text in a narrow sheet (200% text on a phone): the name gets its own full-width row under the thumbnail and
   Close, the tabs go two by two, and facts stack, so no word is broken mid-letter and no label overlaps. The decorative
   kicker goes, the thumbnail and tabs tighten, and the check date moves under the panel so the footer keeps only the
   merchant action. Text keeps the size the reader chose. */
@container decoder (max-width: 17em) {
  .decoder-kicker { display:none; }
  .decoder-thumb, .decoder-thumb-button, .decoder-thumb-logo, .decoder-thumb-plant { width:56px; height:56px; }
  .decoder-thumb-plant img { width:40px; }
  .decoder-tabs { gap:2px; padding:3px; }
  .decoder-tab { padding:2px; }
  .decoder-foot > .decoder-date { display:none; }
  .decoder-scroll > .decoder-date { display:block; }
  .decoder-cue { display:none; }
  .decoder-head { grid-template-columns:auto minmax(0,1fr) auto; }
  .decoder-thumb { grid-row:1; grid-column:1; }
  .decoder-close { grid-row:1; grid-column:3; justify-self:end; }
  .decoder-words { grid-row:2; grid-column:1 / -1; }
  .decoder h2 { overflow-wrap:break-word; }
  .decoder-tabs { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .decoder-fact { grid-template-columns:minmax(0,1fr); }
}
@media (forced-colors: active) {
  .decoder-tab[aria-selected="true"] { outline:3px solid Highlight; outline-offset:-3px; }
}
.decoder-tab { box-shadow:none; }
.decoder-tab:not([aria-selected="true"]):hover { color:var(--text); }
/* Decoder field notes (2026-10-20): the roaster's notes as buttons with one shared explanation, named questions that
   open in place, the origin trail, the cherry drawing and source lines. Reading surfaces stay plain. A paper edge and
   the offset shadow mark only what can be pressed or what is chosen. Every control is at least 44px tall. */
.decoder-notebox { margin:8px 0 0; }
.decoder-notes { display:flex; flex-wrap:wrap; gap:8px; }
.decoder-note { min-height:44px; padding:6px 14px; color:var(--text); background:var(--surface); border:2px solid var(--control-border); border-radius:12px 15px 12px 14px; box-shadow:none; font-size:1rem; font-weight:700; line-height:1.3; text-align:left; overflow-wrap:anywhere; }
.decoder-note[aria-pressed="true"] { background:var(--wash); border-color:var(--text); box-shadow:2px 3px 0 var(--shadow); }
.decoder-note:active { transform:none; }
.decoder-note:focus-visible, .decoder-q > summary:focus-visible, .decoder-source a:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media (hover:hover) { .decoder-note:hover:not([aria-pressed="true"]) { filter:none; border-color:var(--text); } }
.decoder-explain { margin:10px 0 0; }
.decoder-hint { margin:0; font-size:.875rem; line-height:1.5; color:var(--muted); }
.decoder-explain-card { padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:14px; }
.decoder-guide-label { margin:0; font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.decoder-explain-note { margin:2px 0 0; font-size:1.0625rem; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }
.decoder-explain-card .decoder-copy { margin-top:6px; font-size:.9375rem; line-height:1.55; }
.decoder-source { margin:8px 0 0; font-size:.8125rem; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.decoder-source a { color:var(--text); text-underline-offset:3px; }
.decoder-copy.is-quiet { font-size:.875rem; line-height:1.5; color:var(--muted); }
.decoder-questions { margin:14px 0 0; border-bottom:1px dashed var(--line); }
.decoder-q { border-top:1px dashed var(--line); }
.decoder-q > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:8px 0; font-size:1rem; font-weight:750; line-height:1.35; list-style:none; cursor:pointer; border-radius:6px; }
.decoder-q > summary::-webkit-details-marker { display:none; }
.decoder-q > summary::after { content:"+"; flex:none; width:1.5rem; font-size:1.25rem; font-weight:700; line-height:1; text-align:center; color:var(--accent); }
.decoder-q[open] > summary::after { content:"\2212"; }
.decoder-q-body { padding:0 0 14px; }
.decoder-q-body > :first-child { margin-top:0; }
.decoder-q-body .decoder-facts { margin-top:0; }
.decoder-list { margin:8px 0 0; padding-left:1.25em; font-size:.9375rem; line-height:1.55; }
.decoder-list li + li { margin-top:4px; }
.decoder-trail { display:flex; flex-wrap:wrap; align-items:baseline; margin:0; padding:0; list-style:none; }
.decoder-trail li { overflow-wrap:anywhere; }
.decoder-trail li + li::before { content:"\2192"; content:"\2192" / ""; margin:0 .35em; font-weight:600; color:var(--muted); }
.decoder-plant-entry + .decoder-plant-entry { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.decoder-plant-name { margin:0; font-weight:800; overflow-wrap:anywhere; }
.decoder-plant-entry .decoder-copy { margin-top:4px; }
.decoder-quote { margin:8px 0 0; padding:2px 0 2px 12px; font-size:.9375rem; line-height:1.55; border-left:3px solid var(--control-border); }
.decoder-cherry { display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:12px 16px; align-items:center; margin:0 0 4px; }
.decoder-cherry-art svg { display:block; width:100%; height:auto; }
.decoder-layers { display:grid; gap:6px; margin:0; padding:0; list-style:none; font-size:.875rem; line-height:1.45; }
.decoder-layers li { display:grid; grid-template-columns:1.5rem minmax(0,1fr); gap:8px; align-items:start; }
.decoder-layers li.is-off { color:var(--muted); }
.decoder-swatch { display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; color:#30231D; background:var(--swatch); border:2px solid #39291F; border-radius:50%; font-size:.75rem; font-weight:800; }
.decoder-layers li:first-child .decoder-swatch { color:#FFFEF9; }
.decoder-layers li.is-off .decoder-swatch { opacity:.5; border-style:dashed; }
.decoder-q-body .decoder-link { margin-top:4px; }
@container decoder (max-width: 26em) { .decoder-cherry { grid-template-columns:minmax(0,1fr); } .decoder-cherry-art { max-width:170px; } }
@media (forced-colors: active) {
  .decoder-note[aria-pressed="true"] { outline:3px solid Highlight; outline-offset:1px; }
  .decoder-swatch { forced-color-adjust:none; }
}
.anatomy-legend button { justify-content:flex-start; box-shadow:none; font-weight:400; }
.anatomy-legend button:not([aria-pressed="true"]):hover { border-color:var(--line); }
/* Folder tabs grow upward and wrap when text is enlarged, and the space between cards grows with them. */
.field-tab { top:auto; bottom:calc(100% - 2px); max-width:calc(100% - 16px); overflow-wrap:anywhere; }
.field-grid { gap:2.5rem 22px; margin-top:2.25rem; }
@media (max-width:650px) { .field-grid { gap:2.4rem; } }

/* Folder tabs sit in the flow above each card, so enlarged text pushes the card down instead of overlapping. */
.field-item { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.field-item .field-card { align-self:stretch; flex:1; }
.field-item .field-tab { position:relative; top:auto; bottom:auto; left:0; max-width:calc(100% - 24px); margin:0 0 -2px; z-index:1; }
.field-grid { gap:28px 22px; margin-top:1.5rem; }
@media (max-width:650px) { .field-grid { gap:26px; } }

/* Signup honesty (owner brief 2026-10-19): the signup says up front whether emails are running, in readable text. */
.newsletter #signup-note { margin:0 0 16px; padding:10px 12px; font-size:.875rem; line-height:1.5; text-align:left; color:var(--text); background:var(--wash); border-radius:12px; }

/* For roasters (owner brief 2026-10-19, adapted from the sip-parade-partners prototype). Same tokens, outlines and
   shadows as the rest of the site. The previews reuse the real card, feature and bag-label classes with a made-up
   roaster, so they look like the placements they describe. Recruitment stays on this page and in the footer only. */
.partners { padding-bottom:32px; }
.pt-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:48px; align-items:center; padding:24px 0 32px; }
.pt-hero h1 { margin:14px 0 18px; }
.pt-hero .lede { max-width:580px; }
.pt-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin:24px 0 16px; }
.pt-actions .buy { display:inline-flex; width:auto; min-width:220px; font-size:1rem; }
.pt-status, .pt-notice { max-width:580px; margin:0; padding:10px 14px; background:var(--wash); border-radius:12px; font-size:.9375rem; line-height:1.55; }
.pt-hero-art { margin:0; justify-self:center; text-align:center; }
.pt-hero-art { max-width:320px; }
.pt-hero-art img { display:block; width:min(100%, 300px); height:auto; margin:0 auto 8px; }
.pt-hero-art figcaption { font-size:.8125rem; color:var(--muted); }
.pt-principles { list-style:none; margin:0; padding:20px 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 32px; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
.pt-principles li { display:grid; gap:4px; font-size:.9375rem; line-height:1.55; }
.pt-principles strong { font-size:1rem; }
.pt-principles span { color:var(--muted); }
.pt-section { margin-top:40px; padding-top:36px; border-top:1px dashed var(--line); scroll-margin-top:16px; }
.pt-principles + .pt-section { border-top:0; padding-top:0; }
.pt-section h2 { font-size:clamp(1.75rem, 4vw, 2.5rem); margin:8px 0 12px; }
.pt-intro { max-width:620px; }
.pt-fine { max-width:720px; margin:12px 0 0; font-size:.8125rem; line-height:1.55; color:var(--muted); }

/* Previews: placement tabs, an asset switch, the placement, and what changes. */
.pt-preview { margin-top:20px; border:2px solid var(--text); border-radius:var(--card-shape); background:var(--surface); box-shadow:4px 5px 0 var(--shadow); overflow:hidden; }
.pt-controls { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:12px; background:var(--wash); border-bottom:2px solid var(--text); }
.pt-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.pt-tabs [role="tab"] { min-height:44px; padding:8px 14px; color:var(--text); background:transparent; border:2px solid transparent; border-radius:12px; box-shadow:none; font-size:.9375rem; font-weight:700; }
.pt-tabs [role="tab"][aria-selected="true"] { color:var(--bg); background:var(--text); border-color:var(--text); }
.pt-tabs [role="tab"]:active { transform:none; box-shadow:none; }
.pt-toggle { display:flex; margin:0; padding:3px; min-width:0; background:var(--surface); border:2px solid var(--text); border-radius:14px; }
.pt-toggle label { position:relative; display:flex; flex:1 1 auto; }
.pt-toggle input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.pt-toggle span { display:flex; flex:1; align-items:center; justify-content:center; min-height:44px; padding:6px 14px; border-radius:10px; font-size:.9375rem; font-weight:700; white-space:nowrap; }
.pt-toggle input:checked + span { color:var(--button-text); background:var(--accent); }
.pt-toggle input:focus-visible + span { outline:3px solid var(--focus); outline-offset:2px; }
.pt-panel { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:28px; padding:24px; align-items:start; }
.pt-stage { margin:0; min-width:0; padding:16px; background:var(--bg); border:1px dashed var(--control-border); border-radius:18px; }
.pt-stage-label { margin:0 0 12px; font-size:.6875rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pt-nojs { margin:0; color:var(--muted); }
.pt-explain h3 { font-size:1.5rem; margin:4px 0 8px; }
.pt-explain p { font-size:.9375rem; line-height:1.6; }
.pt-points { margin:0 0 14px; padding-left:20px; font-size:.9375rem; line-height:1.55; }
.pt-points li { margin-bottom:6px; }
.pt-live { margin:0; padding:10px 12px; background:var(--wash); border-radius:12px; font-size:.875rem; }
@keyframes pt-arrive { from { opacity:.35; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference) { .pt-stage.is-arriving > :last-child { animation:pt-arrive var(--motion-arrival) var(--ease); } }
.pt-mock-card { max-width:380px; margin:0 auto; }
.pt-mock-title { margin:0 0 6px; font-size:1.375rem; font-weight:750; line-height:1.08; letter-spacing:-.045em; overflow-wrap:anywhere; }
.pt-mock-big { margin:8px 0 2px; font-size:1.75rem; }
.pt-mock-button { display:flex; align-items:center; justify-content:center; min-height:48px; margin:14px 0 0; padding:12px 20px; color:var(--button-text); background:var(--accent); border:2px solid var(--text); border-radius:14px; box-shadow:0 3px 0 var(--text); font-size:.9375rem; font-weight:750; text-align:center; }
.pt-mock-feature .pt-mock-button { display:inline-flex; margin-top:4px; }
.pt-mock-link { font-size:.875rem; font-weight:650; text-decoration:underline; text-underline-offset:4px; }
.pt-mock-decode { cursor:default; }
.pt-mock-feature { grid-template-columns:minmax(0,1fr); }
.pt-mock-feature .feature-media img { aspect-ratio:16 / 10; }
.pt-mock-feature .feature-media.is-placeholder { min-height:170px; }
.pt-mock-feature .feature-placeholder-name { font-size:2.25rem; }
.pt-mock-guide { max-width:none; padding:0; }
.pt-mock-lesson { margin:0 0 10px; font-size:.8125rem; font-weight:700; color:var(--accent); }
.pt-mock-bagrow { display:grid; gap:16px; align-items:start; }
.pt-mock-bagrow.has-bag { grid-template-columns:116px minmax(0,1fr); }
.pt-mock-bagshot { margin:0; text-align:center; }
.pt-mock-bagshot img { display:block; width:100%; height:auto; }
.pt-tile-bag { background:transparent; }
.pt-tile-bag img { padding:2px; }
.pt-mock-bagshot figcaption { margin-top:4px; font-size:.75rem; color:var(--muted); }
.pt-mock-fields { list-style:none; display:grid; gap:8px; margin:0; padding:0; }
.pt-mock-fields li { display:grid; grid-template-columns:auto 62px minmax(0,1fr); gap:4px 8px; align-items:center; font-size:.9375rem; }
.pt-mock-field { font-size:.875rem; color:var(--muted); }
.pt-mock-value { font-weight:650; overflow-wrap:anywhere; }
.pt-mock-caption { margin:12px 0 0; padding-top:10px; border-top:1px dashed var(--line); font-size:.8125rem; color:var(--muted); }
.pt-policy { margin-top:20px; padding:16px 18px; background:var(--surface); border-left:4px solid var(--accent); border-radius:0 14px 14px 0; }
.pt-policy h3 { margin:0 0 4px; font-size:1.125rem; letter-spacing:-.02em; }
.pt-policy p { margin:0; font-size:.9375rem; line-height:1.6; }
.pt-policy a { font-weight:700; }

/* Routes, press kit, application and questions. */
.pt-routes { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:20px 0 0; padding:0; }
.pt-routes li { padding:18px; background:var(--surface); border:2px solid var(--text); border-radius:var(--card-shape); box-shadow:4px 5px 0 var(--shadow); }
.pt-kicker { margin:0 0 8px; font-size:.75rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.pt-routes h3 { margin:0 0 6px; font-size:1.25rem; letter-spacing:-.02em; }
.pt-routes li > p:last-child { margin:0; font-size:.9375rem; line-height:1.6; }
.pt-kit { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:32px; align-items:start; }
.pt-checklist { list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin:0; padding:0; }
.pt-checklist li { padding:16px; background:var(--surface); border:2px solid var(--text); border-radius:18px; box-shadow:3px 4px 0 var(--shadow); }
.pt-checklist h3 { margin:0 0 4px; font-size:1.0625rem; letter-spacing:-.02em; }
.pt-checklist p { margin:0; font-size:.875rem; line-height:1.55; }
.pt-apply { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:32px; align-items:start; }
.pt-apply-copy .pt-notice { margin-top:16px; }
.pt-form { min-width:0; padding:20px; background:var(--surface); border:2px solid var(--text); border-radius:var(--card-shape); box-shadow:4px 5px 0 var(--shadow); }
.pt-form #pt-js-note { margin:0 0 12px; }
.pt-form-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 16px; margin-bottom:8px; }
.pt-form-head h3 { margin:0; font-size:1.375rem; }
.pt-progress { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; counter-reset:pt; }
.pt-progress li { counter-increment:pt; padding:4px 10px; font-size:.8125rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; }
.pt-progress li::before { content:counter(pt) ". "; }
.pt-progress li[aria-current="step"] { font-weight:750; color:var(--text); background:var(--wash); border-color:var(--text); }
.pt-progress li.is-done { color:var(--text); }
.pt-step h4 { display:flex; flex-direction:column; gap:2px; margin:12px 0 14px; font-size:1.25rem; letter-spacing:-.02em; }
.pt-step-count { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pt-step-help { font-size:.9375rem; }
.pt-field { display:grid; gap:6px; margin-bottom:14px; }
.pt-field label, .pt-choices legend { font-size:.9375rem; font-weight:650; }
.pt-field input { width:100%; min-height:48px; }
.pt-form textarea { width:100%; padding:12px; font:inherit; font-size:1rem; color:var(--text); background:var(--surface); border:1px solid var(--control-border); border-radius:14px; resize:vertical; }
.pt-form [aria-invalid="true"] { border:2px solid #b3261e; }
.pt-error { margin:0; font-size:.875rem; font-weight:650; color:#a4161a; }
.pt-choices { display:grid; gap:6px; min-width:0; margin:0 0 14px; padding:0; border:0; }
.pt-choices legend { margin-bottom:6px; padding:0; }
.pt-choice { display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 12px; font-size:.9375rem; background:var(--bg); border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.pt-choice:has(input:checked) { background:var(--wash); border-color:var(--text); }
.pt-choice input { flex:none; width:22px; height:22px; margin:0; accent-color:var(--accent); }
.pt-review-group { margin-bottom:12px; padding-top:8px; border-top:1px dashed var(--line); }
.pt-review-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.pt-review-head h5 { margin:0; font-size:1rem; }
.pt-review dl { display:grid; gap:6px; margin:2px 0 0; }
.pt-review dl > div { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:2px 12px; }
.pt-review dt { font-size:.875rem; color:var(--muted); }
.pt-review dd { margin:0; font-size:.9375rem; font-weight:650; white-space:pre-line; overflow-wrap:anywhere; }
.pt-review dd.is-empty { font-weight:400; color:var(--muted); }
.pt-ack { align-items:flex-start; margin:12px 0 6px; font-size:.9375rem; line-height:1.5; }
.pt-ack input { margin-top:2px; }
.pt-plain { margin-top:8px; }
.pt-plain summary { display:flex; align-items:center; min-height:44px; font-size:.9375rem; font-weight:650; cursor:pointer; }
.pt-plain textarea { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8125rem; }
.pt-form-status { margin:12px 0 0; font-size:.9375rem; line-height:1.55; }
.pt-form-status:empty { margin:0; }
.pt-form-nav { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.pt-form-nav #pt-next, .pt-form-nav #pt-download { margin-left:auto; }
.pt-form:not(.is-stepped) .pt-form-nav, .pt-form:not(.is-stepped) .pt-progress { display:none; }
.pt-faq { max-width:760px; }
.pt-faq details { border-bottom:1px dashed var(--line); }
.pt-faq summary { display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 0; font-size:1rem; font-weight:700; cursor:pointer; }
.pt-faq details p { margin:0 0 14px; line-height:1.65; }
.pt-faq summary, .pt-plain summary { list-style:none; }
.pt-faq summary::-webkit-details-marker, .pt-plain summary::-webkit-details-marker { display:none; }
.pt-faq summary::after, .pt-plain summary::after { content:""; flex-shrink:0; width:8px; height:8px; margin:0 4px 4px auto; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.pt-plain summary::after { margin-left:12px; }
.pt-faq details[open] > summary::after, .pt-plain[open] > summary::after { transform:rotate(-135deg); margin-bottom:0; margin-top:4px; }
@media(prefers-color-scheme:dark) { .pt-error { color:#ffb4a9; } .pt-form [aria-invalid="true"] { border-color:#ffb4a9; } }
@media(max-width:900px) {
  .pt-hero, .pt-kit, .pt-apply, .pt-panel { grid-template-columns:minmax(0,1fr); }
  .pt-hero { gap:20px; }
  .pt-hero-art { justify-self:start; display:flex; align-items:center; gap:14px; text-align:left; }
  .pt-hero-art { max-width:none; }
  .pt-hero-art img { width:120px; margin:0; }
  .pt-mock-card { max-width:420px; }
}
@media(max-width:760px) { .pt-routes { grid-template-columns:minmax(0,1fr); } }
@media(max-width:650px) {
  .pt-principles, .pt-checklist { grid-template-columns:minmax(0,1fr); }
  .pt-actions .buy { display:flex; width:100%; min-width:0; }
  .pt-controls { padding:10px; }
  .pt-tabs, .pt-toggle { width:100%; }
  .pt-tabs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; }
  .pt-tabs [role="tab"] { padding:6px 6px; font-size:.875rem; line-height:1.2; text-align:center; white-space:normal; }
  .pt-panel { padding:14px; gap:18px; }
  .pt-stage { padding:12px; }
  .pt-form { padding:16px; }
  .pt-review dl > div { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:420px) {
  .pt-mock-bagrow.has-bag { grid-template-columns:minmax(0,1fr); }
  .pt-mock-bagshot { width:110px; }
  .pt-mock-fields li { grid-template-columns:auto minmax(0,1fr); }
  .pt-mock-value { grid-column:2; }
  .pt-toggle span { white-space:normal; padding:6px 8px; text-align:center; }
}

/* For roasters, sponsorship update (owner brief 2026-10-19, from the sponsorship cowork pack). Three proposed paid
   formats on opaque paper cards, each labeled as a sponsored example, with an interest toggle that mirrors the form. */
.pt-subline { max-width:580px; margin:-4px 0 0; color:var(--muted); font-size:.9375rem; line-height:1.6; }
.pt-jump { margin:18px 0 0; }
.pt-jump ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.pt-jump a { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; font-size:.9375rem; font-weight:650; text-decoration:none; background:var(--surface); border:1px solid var(--control-border); border-radius:999px; }
.pt-jump a:hover { background:var(--wash); }
.pt-sponsors { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin:20px 0 0; padding:0; }
.pt-sponsor { display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--surface); border:2px solid var(--text); border-radius:var(--card-shape); box-shadow:4px 5px 0 var(--shadow); }
.pt-sponsor-art { position:relative; display:grid; place-items:center; min-height:150px; padding:28px 16px 12px; border-bottom:2px solid var(--text); }
.pt-sponsor-art.is-peach { background:#ffe2ad; }
.pt-sponsor-art.is-lavender { background:#e8dcf3; }
.pt-sponsor-art.is-sage { background:#dbe6c2; }
.pt-sponsor-art img { display:block; width:112px; height:auto; }
.pt-ad-label { position:absolute; top:10px; left:10px; padding:3px 10px; font-size:.75rem; font-weight:750; color:#342820; background:#fffef9; border:1.5px solid #342820; border-radius:999px; }
.pt-sponsor-body { display:flex; flex:1; flex-direction:column; gap:10px; padding:18px; }
.pt-sponsor-body h3 { margin:0; font-size:1.375rem; letter-spacing:-.03em; }
.pt-sponsor-body > p { margin:0; font-size:.9375rem; line-height:1.6; }
.pt-sponsor .pt-kicker { margin:0; }
.pt-creative { display:grid; grid-template-columns:60px minmax(0,1fr); gap:12px; align-items:start; padding:12px 14px; background:var(--bg); border:1px dashed var(--control-border); border-radius:14px; }
.pt-creative-bag { display:block; width:60px; height:auto; }
.pt-creative-copy { min-width:0; }
.pt-creative p { margin:0 0 6px; font-size:.875rem; line-height:1.5; }
.pt-creative .pt-creative-label { font-size:.6875rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pt-creative .pt-creative-title { font-size:1rem; font-weight:750; color:var(--text); }
.pt-sponsor-meta { color:var(--muted); }
.pt-sponsor .pt-live { margin-top:auto; }
.pt-interest { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; color:var(--text); background:var(--surface); border:2px solid var(--text); border-radius:14px; box-shadow:0 3px 0 var(--text); font-size:.9375rem; font-weight:750; }
.pt-interest-box { position:relative; flex:none; width:20px; height:20px; background:var(--surface); border:2px solid currentColor; border-radius:5px; }
.pt-interest[aria-pressed="true"] { color:var(--button-text); background:var(--accent); }
.pt-interest[aria-pressed="true"] .pt-interest-box { background:var(--button-text); border-color:var(--button-text); }
.pt-interest[aria-pressed="true"] .pt-interest-box::after { content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border-right:3px solid var(--accent); border-bottom:3px solid var(--accent); transform:rotate(45deg); }
.pt-interest-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 20px; margin-top:18px; padding:10px 16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.pt-interest-bar p { margin:0; font-size:.9375rem; font-weight:650; }
.pt-choice span small { display:block; font-size:.8125rem; font-weight:400; color:var(--muted); }
.pt-choice > span { display:block; }
.pt-or { margin:2px 0; font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pt-campaign { margin-top:6px; padding-top:14px; border-top:1px dashed var(--line); }
.pt-campaign-note { font-size:.9375rem; }
.pt-field select { width:100%; }
.pt-field input[type="date"] { max-width:240px; }
@media(forced-colors:active) { .pt-interest[aria-pressed="true"] { border-width:4px; } .pt-interest[aria-pressed="true"] .pt-interest-box { background:Highlight; } }
@media(max-width:900px) { .pt-sponsors { grid-template-columns:minmax(0,1fr); } .pt-sponsor { flex-direction:row; } .pt-sponsor-art { flex:0 0 180px; border-bottom:0; border-right:2px solid var(--text); } }
@media(max-width:650px) {
  .pt-sponsor { flex-direction:column; }
  .pt-sponsor-art { flex:none; min-height:120px; padding-top:30px; border-right:0; border-bottom:2px solid var(--text); }
  .pt-sponsor-art img { width:88px; }
  .pt-sponsor-body { padding:16px; }
  .pt-interest-bar .cta-link { width:100%; }
}

/* Five-journey audit (owner brief 2026-10-20). */
/* F3, F6: ordinary cards. The generic reason lives in Coffee details, so the spacing that used to sit under it moves
   to the Buy button. Text sizes and the 48px targets are unchanged. The price stays on one line, and at large text
   sizes the tile sits above the name so the price and name get the full width. */
.coffee-card { container:card / inline-size; }
.coffee-card .buy { margin-top:14px; }
.coffee-card .decode-action { margin-top:10px; }
.card-head .price { white-space:nowrap; }
.card-details .why-detail { margin:10px 0 0; font-size:.875rem; line-height:1.5; }
@container card (max-width: 14em) {
  .card-media { grid-template-columns:minmax(0,1fr); }
}
@container card (max-width: 8em) {
  .card-head .price { white-space:normal; }
}
/* F7: the link disclosure sits once in the results header, under the catalog date, instead of inside the first card. */
.results-disclosure { margin:6px 0 0; font-size:.8125rem; line-height:1.5; }
.results-disclosure a { color:inherit; text-underline-offset:3px; }
/* F8: the saved-picks cue. */
.restored-note { display:flex; flex-wrap:wrap; align-items:center; gap:0 14px; margin:8px 0 0; font-size:.9375rem; line-height:1.4; }
.restored-note > span { flex:1 1 100%; }
.restored-note .text-button { min-height:44px; }
/* F2: a newsletter draft saved on this device, shown after a reload with Edit and Delete. */
.signup-saved { margin:14px 0 0; padding:14px 16px; text-align:left; background:var(--wash); border-radius:14px; }
.signup-saved-title { margin:0; font-weight:750; }
.signup-saved-title:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
.signup-saved-line { margin:4px 0 0; font-size:.9375rem; overflow-wrap:anywhere; }
.signup-saved-note { margin:6px 0 0; }
.signup-saved-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:12px; }
.newsletter .signup-saved-actions button { width:auto; margin-top:0; }
/* F4: the roaster page's jump links sit right under the hero action. */
.pt-hero .pt-jump { margin:0 0 16px; }
.pt-hero .pt-actions { margin-bottom:14px; }

/* For roasters art (owner briefs 2026-10-20). */
/* Paper sponsorship icons. Each SVG carries its own cream edge, grain and shadow, so nothing is added here. The square
   box is reserved, and the top padding grows with the text size so the art stays clear of the Sponsored label. */
.pt-sponsor-art { padding:calc(1.2rem + 26px) 16px 14px; }
.pt-sponsor-art img { width:168px; height:168px; object-fit:contain; }
@media(max-width:900px) { .pt-sponsor-art { padding:calc(1.2rem + 26px) 14px 14px; } .pt-sponsor-art img { width:152px; height:152px; } }
@media(max-width:650px) { .pt-sponsor-art img { width:150px; height:150px; } }
/* Meet the roaster preview: the illustrated scene at 16:10, a short story and two plain tags that say it is made up. */
.pt-mock-feature .feature-media img { object-position:50% 48%; }
.pt-mock-feature .feature-credit { max-width:calc(100% - 20px); }
.pt-mock-story { margin:8px 0 12px; font-size:.9375rem; line-height:1.6; }
.pt-mock-tags { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
.pt-mock-tags span { padding:3px 10px; font-size:.75rem; font-weight:650; color:var(--text); background:var(--wash); border:1px solid var(--control-border); border-radius:999px; }

/* Codex review R5 (2026-10-20): a small "More below" tag centered on the line between the panel and the footer while
   more of the panel is hidden, so it covers as little text as possible.
   The panel keeps its stable height. On short screens the whole sheet scrolls, so the tag is not used there. */
.decoder-cue { position:relative; flex:none; height:0; z-index:2; }
.decoder-cue-tag { position:absolute; left:50%; bottom:0; transform:translate(-50%, 50%); padding:2px 10px; font-size:.75rem; font-weight:750; line-height:1.4; white-space:nowrap; color:var(--text); background:var(--surface); border:1px solid var(--control-border); border-radius:999px; box-shadow:0 2px 6px rgb(37 25 15 / .14); opacity:0; transition:opacity .15s ease; pointer-events:none; }
.decoder.has-more .decoder-cue-tag { opacity:1; }
@media (prefers-reduced-motion: reduce) { .decoder-cue-tag { transition:none; } }
@media (max-height:560px) { .decoder-cue { display:none; } }
@media (forced-colors: active) { .decoder-cue-tag { border-color:CanvasText; } }

/* Flavor Explorer (owner brief 2026-10-20). Each family card opens in place: where the family shows up, three flavor
   words that change one explanation (never a filter), and one documented coffee that opens the decoder. Cards keep
   their own height, so opening one never stretches its neighbor. */
.guide .flavors-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 16px; align-items:start; }
.guide .flavors-head > div { display:contents; }
.guide .flavors-head h2 { grid-column:1; grid-row:1; align-self:end; }
.guide .flavors-head p { grid-column:1; grid-row:2; margin:0; max-width:560px; }
.guide .flavors-art { grid-column:2; grid-row:1 / span 2; width:136px; height:136px; margin-top:-6px; object-fit:contain; }
.guide .families { align-items:start; }
.guide .family .family-explore { grid-column:2; justify-self:start; display:inline-flex; align-items:center; gap:10px; min-height:44px; margin:0 0 0 -10px; padding:8px 10px;
  color:var(--text); background:none; border:0; border-radius:10px; font:inherit; font-size:.9375rem; font-weight:650; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
/* A plain text button in shape, like the other in-card actions, not a paper button. */
.guide .family .family-explore, .guide .family .family-explore:active { box-shadow:none; transform:none; justify-content:flex-start; text-align:left; }
.guide .family-explore-mark { flex-shrink:0; width:8px; height:8px; margin-bottom:4px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.guide .family-explore[aria-expanded="true"] .family-explore-mark { transform:rotate(-135deg); margin:4px 0 0; }
.guide .family-explore:focus-visible, .guide .topic-button:focus-visible, .guide .flavor-compare > summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.guide .family .family-more { grid-column:1 / -1; margin-top:6px; padding-top:12px; border-top:1px dashed var(--line); }
.guide .family .family-more p { margin:0; }
.guide .family .family-more p + p { margin-top:4px; }
.guide .family-topics { margin-top:14px; }
.guide .family .family-topics-hint { margin:0 0 8px; font-size:.8125rem; color:var(--muted); }
.guide .topic-buttons, .guide .compare-pairs { display:flex; flex-wrap:wrap; gap:8px; }
.guide .topic-button { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 14px; color:var(--text); background:var(--surface); border:1.5px solid var(--control-border);
  border-radius:999px; font:inherit; font-size:.875rem; font-weight:650; line-height:1.25; text-align:left; cursor:pointer; }
/* Pressed is more than a color: a filled dot appears and the border thickens. */
.guide .topic-button::before { content:""; flex-shrink:0; width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; }
.guide .topic-button { box-shadow:0 2px 0 var(--control-border); }
.guide .topic-button:active { box-shadow:0 1px 0 var(--control-border); }
.guide .topic-button[aria-pressed="true"] { color:var(--button-text); background:var(--accent); border-color:var(--text); box-shadow:0 2px 0 var(--text); }
.guide .topic-button[aria-pressed="true"]::before { background:currentColor; }
.guide .topic-explain { margin-top:10px; padding:12px 14px; background:var(--wash); border-radius:6px 14px 14px 14px; }
.guide .topic-title { font-weight:750; }
.guide .family .topic-text, .guide .family .topic-prompt, .guide .compare-col .topic-text { font-size:.9375rem; }
.guide .topic-source { font-size:.8125rem !important; color:var(--muted); }
.guide .topic-source a { display:inline-flex; align-items:center; min-height:44px; color:var(--text); }
.guide .family-example { margin:14px 0 0; padding:14px 14px 12px; background:var(--surface); border:1.5px solid var(--control-border); border-radius:6px 16px 16px 16px; box-shadow:3px 3px 0 var(--shadow); }
.guide .family .family-example-kicker { font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.guide .family .family-example-who { font-size:.8125rem; font-weight:700; color:var(--muted); margin-top:6px; }
.guide .family .family-example-name { font-size:1.0625rem; font-weight:800; letter-spacing:-.01em; line-height:1.3; overflow-wrap:anywhere; }
.guide .family .family-example-notes, .guide .family .family-example-why { font-size:.9375rem; margin-top:6px; }
.guide .family .family-example-date { font-size:.8125rem; color:var(--muted); margin-top:6px; }
.guide .family-example .decode-action { margin-top:10px; max-width:100%; }
.guide .family-examples-date:empty { display:none; }
.guide .flavor-compare { max-width:640px; margin-top:16px; padding:4px 16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.guide .compare-body { padding:0 0 14px; }
.guide .compare-panel { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px; }
.guide .compare-col { padding:12px 14px; background:var(--wash); border-radius:14px; }
.guide .compare-col p { margin:0; }
.guide .compare-col p + p { margin-top:4px; }
@media (prefers-reduced-motion:no-preference) {
  .guide .family-more:not([hidden]) { animation:explorer-open 180ms var(--ease) both; }
  @keyframes explorer-open { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
}
/* Phones: the sticker sits beside the heading only, so the intro keeps the full width, even with large text. */
@media (max-width:650px) {
  .guide .flavors-head p { grid-column:1 / -1; }
  .guide .flavors-art { grid-row:1; width:80px; height:80px; margin:-8px 0 4px; }
}
@media (max-width:520px) { .guide .compare-panel { grid-template-columns:minmax(0,1fr); } }
@media (max-width:340px) {
  .guide .flavors-art { display:none; }
  .guide .flavors-head h2 { grid-column:1 / -1; }
  .guide .family .family-explore { grid-column:1; }
}
@media (forced-colors: active) {
  .guide .topic-button[aria-pressed="true"] { forced-color-adjust:none; color:HighlightText; background:Highlight; border-color:Highlight; }
  .guide .family-example, .guide .topic-explain, .guide .compare-col { border:1px solid CanvasText; }
}

/* S01: country and plain process help shoppers choose from the card face. */
.card-basics { margin:6px 0 0; font-size:.875rem; line-height:1.45; overflow-wrap:anywhere; }

/* S06: inline method links are also touch targets. */
.results-disclosure a, .pt-policy a { display:inline-flex; align-items:center; min-height:44px; max-width:100%; }

.coffee-card > .decode-action { width:100%; margin:12px 0; }

/* S07: note colors describe the label, never ingredients or match strength. */
[data-note-tone] { --note-fill:#ece9e2; --note-ink:#30251f; }
[data-note-tone="cream"] { --note-fill:#fff3d8; }
[data-note-tone="cocoa"] { --note-fill:#d9b39a; }
[data-note-tone="purple"] { --note-fill:#d9c4ee; }
[data-note-tone="red"] { --note-fill:#f5bbb9; }
[data-note-tone="green"] { --note-fill:#cfe5ad; }
[data-note-tone="yellow"] { --note-fill:#f8e78a; }
[data-note-tone="peach"] { --note-fill:#ffcda8; }
[data-note-tone="orange"] { --note-fill:#ffc080; }
[data-note-tone="pink"] { --note-fill:#f5cde2; }
[data-note-tone="gold"] { --note-fill:#eac482; }
[data-note-tone="tan"] { --note-fill:#dfc8a5; }
.decoder-note[data-note-tone], .guide .topic-button[data-note-tone] {
  color:var(--note-ink); background:var(--note-fill);
}
.decoder-note[data-note-tone][aria-pressed="true"], .guide .topic-button[data-note-tone][aria-pressed="true"] {
  outline:2px solid var(--text); outline-offset:2px;
}
.decoder-note[data-note-tone]:focus-visible, .guide .topic-button[data-note-tone]:focus-visible {
  outline:3px solid var(--focus); outline-offset:4px;
}
@media (prefers-color-scheme:dark) {
  [data-note-tone] { --note-fill:#393633; --note-ink:#fff5e9; }
  [data-note-tone="cream"] { --note-fill:#514b39; }
  [data-note-tone="cocoa"] { --note-fill:#5d3e30; }
  [data-note-tone="purple"] { --note-fill:#503b65; }
  [data-note-tone="red"] { --note-fill:#693637; }
  [data-note-tone="green"] { --note-fill:#394e2c; }
  [data-note-tone="yellow"] { --note-fill:#595020; }
  [data-note-tone="peach"] { --note-fill:#694635; }
  [data-note-tone="orange"] { --note-fill:#6b431f; }
  [data-note-tone="pink"] { --note-fill:#633f54; }
  [data-note-tone="gold"] { --note-fill:#5e4928; }
  [data-note-tone="tan"] { --note-fill:#514635; }
}
@media (forced-colors:active) {
  .decoder-note[data-note-tone], .guide .topic-button[data-note-tone] {
    forced-color-adjust:auto; color:ButtonText; background:ButtonFace; border-color:ButtonText;
  }
  .decoder-note[data-note-tone][aria-pressed="true"], .guide .topic-button[data-note-tone][aria-pressed="true"] {
    color:HighlightText; background:Highlight; outline-color:Highlight;
  }
}

/* Card notes share the decoder colors, with a text highlight rather than a button shape. */
.card-note[data-note-tone] { color:var(--note-ink); background:var(--note-fill); padding:0 3px; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
@media (forced-colors:active) {
  .card-note[data-note-tone] { color:CanvasText; background:Canvas; }
}

/* Catalog scope stays visible without opening Filter and sort. */
.catalog-mode { margin:12px 0 16px; }
.catalog-toggle { display:inline-flex; position:relative; align-items:center; gap:10px; min-height:48px; cursor:pointer; font-weight:750; }
.catalog-toggle input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.catalog-toggle-track { display:block; flex:none; width:48px; height:28px; padding:3px; border:2px solid var(--control-border); border-radius:999px; background:var(--surface); }
.catalog-toggle-track::before { content:""; display:block; width:18px; height:18px; border-radius:50%; background:var(--text); }
.catalog-toggle input:checked + .catalog-toggle-track { background:var(--accent); border-color:var(--text); }
.catalog-toggle input:checked + .catalog-toggle-track::before { transform:translateX(20px); background:var(--button-text); }
.catalog-toggle input:focus-visible + .catalog-toggle-track { outline:3px solid var(--focus); outline-offset:3px; }
.catalog-mode .helper { margin:0; }
@media (forced-colors:active) {
  .catalog-toggle-track { forced-color-adjust:none; background:Canvas; border-color:ButtonText; }
  .catalog-toggle-track::before { background:ButtonText; }
  .catalog-toggle input:checked + .catalog-toggle-track { background:Highlight; border-color:Highlight; }
  .catalog-toggle input:checked + .catalog-toggle-track::before { background:HighlightText; }
}

/* Let expanded filter controls shrink at phone zoom instead of widening the page. */
.filters { grid-template-columns:minmax(0,1fr); }
.filters > * { min-width:0; }
.filter-actions button { min-width:0; max-width:100%; overflow-wrap:anywhere; }

/* Decoder tools share the primary and footer navigation. */
.site-nav { flex-wrap:wrap; justify-content:flex-end; gap:4px 16px; }
@media(max-width:680px) { .masthead { flex-wrap:wrap; } .site-nav { width:100%; justify-content:flex-start; } }

.decoder-tools { margin:40px 0; padding:28px 0; border-top:2px solid var(--text); }
.decoder-tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.decoder-tool-grid article { padding:24px; border:2px solid var(--text); border-radius:20px; background:var(--surface); }
.decoder-tool-grid h3 { font-size:1.6rem; margin:8px 0 12px; }
.decoder-tool-grid a { display:flex; align-items:center; min-height:48px; margin:10px 0; font-weight:700; }
.decoder-tool-grid .helper { display:block; }
@media(max-width:600px) { .decoder-tool-grid { grid-template-columns:1fr; } }
.journey-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.journey-path a{display:flex;flex-direction:column;gap:6px;min-height:48px;padding:16px;border:2px solid var(--control-border);border-radius:18px;background:var(--surface);text-decoration:none}.journey-path a:hover{border-color:var(--accent)}.journey-path a>span{font-size:.6875rem;font-weight:650;color:var(--muted)}.journey-path strong{font-size:.9375rem;line-height:1.3}.journey-path small{font-size:.75rem;line-height:1.5;color:var(--muted)}.journey-path strong>span{color:var(--accent)}.intro .journey-path{grid-template-columns:1fr;grid-column:1/-1}.intro .journey-path a{gap:3px;padding:12px 16px}.journey-help{margin-top:16px}.journey-help summary{font-weight:600;font-size:.8125rem}.tool-expectation{font-size:.875rem;line-height:1.7;color:var(--muted);max-width:65ch}.tool-expectation strong{color:var(--text)}.site-nav [aria-current=page]{text-decoration-thickness:3px;text-decoration-color:var(--accent)}
@media(max-width:650px){.journey-path{grid-template-columns:1fr;gap:8px}.journey-path a{padding:12px 14px}.journey-help .journey-path a{font-size:.875rem}}

.journey-other{grid-column:1/-1;margin:0 0 16px}.journey-other summary{min-height:48px;padding:12px 0;font-size:.8125rem;font-weight:600}.journey-other .skip-quiz{margin:0;display:flex}.intro .journey-path{grid-area:journey}
@media(min-width:651px){.intro .journey-path{grid-area:auto}}
@media(max-width:650px){.intro{grid-template-areas:"eyebrow eyebrow" "title art" "lede lede" "journey journey"}.journey-other{grid-area:auto}}
@media(max-width:280px){.intro{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "title" "lede" "journey"}}