/* ==========================================================================
   PAGES · CONTENT (Frontend Dev #4)
   Brew guides index, guide articles, About, Cafés, Contact + FAQ, 404.
   Spec: DESIGN.md §7.17–7.24, §8.5–8.10; DESIGN-DECISIONS 8–10.
   Tokens only. Page geometry (--map-h, --pin, --form-w …) lives in
   tokens.css' COMPONENT GEOMETRY block. Long-form text sits on paper; glass is only for controls
   (recipe card on desktop, city chips, map pins, the About hero slab).
   Index
     0  Page geometry + shared content layout (page head, content grid,
        ruled tables, paper cards, closing band)
     1  Guides index      2  Guide article (recipe card, timer, steps)
     3  About             4  Cafés          5  Contact + FAQ      6  404
   ========================================================================== */

/* ---- 0. Shared ------------------------------------------------------------- */
:is(body[data-page="guides"], body[data-page="guide"], body[data-page="about"], body[data-page="cafes"], body[data-page="contact"], body[data-page="notfound"]) main {
  --illo-accent: var(--clay);
}
.section--first { padding-block-start: var(--space-6); }
.section--flush { padding-block-start: 0; }

/* page header: marker → H1 → lead on paper */
.page-head { position: relative; isolation: isolate; padding-block: var(--space-6) var(--space-7); }
.page-head__inner { position: relative; display: grid; justify-items: start; }
.page-head__inner > h1 { margin-block-start: var(--space-3); }
.page-head__inner > .lead { margin-block-start: var(--space-4); }
/* desktop Pine glass-zone strip (guides index) */
.page-head__zone { display: none; }
@media (min-width: 1024px) {
  .page-head--zone .page-head__zone {
    display: block;
    z-index: -1;
    inset: 0 0 0 auto;
    inline-size: 34%;
    -webkit-mask: linear-gradient(90deg, transparent, #000 var(--zone-feather)), linear-gradient(transparent, #000 var(--zone-feather), #000 calc(100% - var(--zone-feather)), transparent);
    -webkit-mask-composite: source-in;
            mask: linear-gradient(90deg, transparent, #000 var(--zone-feather)) intersect, linear-gradient(transparent, #000 var(--zone-feather), #000 calc(100% - var(--zone-feather)), transparent);
  }
}
/* quiet contour band behind the H1 (contact): Pine at the quiet 6 % */
.page-head__field { z-index: -1; -webkit-mask: linear-gradient(transparent, #000 var(--zone-feather), #000 60%, transparent); mask: linear-gradient(transparent, #000 var(--zone-feather), #000 60%, transparent); }
.page-head__field use { --field-alpha: var(--zone-quiet-a); }

/* 12-col content grid: text cols 1–7, margin notes cols 10–12 */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
.content-grid__note { order: 1; }
@media (min-width: 1024px) {
  .content-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .content-grid__main { grid-column: 1 / span 7; }
  .content-grid__wide { grid-column: 1 / -1; }
  .content-grid__note { order: 0; grid-column: 10 / span 3; grid-row: 1; align-self: start; margin-block-start: calc(var(--space-6) + var(--space-5)); }
}
.content-grid__wide { min-inline-size: 0; }

/* ruled tables (grind chart, troubleshooting): hairlines, stack < 600 px */
.ruled-table { inline-size: 100%; font-size: var(--fs-ui); line-height: var(--lh-ui); }
.ruled-table caption { caption-side: top; text-align: start; padding-block-end: var(--space-3); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); }
.ruled-table :is(th, td) { padding: var(--space-3) var(--space-3) var(--space-3) 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--rule); }
.ruled-table thead th { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); border-block-end-color: var(--rule-strong); }
.ruled-table tbody th { font-weight: var(--fw-strong); }
@media (max-width: 599.98px) {
  .ruled-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .ruled-table tr { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-block-end: 1px solid var(--rule); }
  .ruled-table :is(th, td) { display: block; padding: 0; border: 0; }
  .ruled-table tbody th { font-size: var(--fs-body); }
  .ruled-table td::before { content: attr(data-label) ": "; font-weight: var(--fw-strong); color: var(--muted); font-size: var(--fs-label); }
}

/* paper cards (variations, next guide) */
.paper-cards { display: grid; gap: var(--space-4); margin-block-start: var(--space-5); }
@media (min-width: 600px) { .paper-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paper-card {
  display: grid; gap: var(--space-3); align-content: start;
  padding: var(--space-5);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.paper-card__title { font-size: var(--fs-h5); line-height: var(--lh-h4); font-weight: var(--fw-display-strong); }
.paper-card__title a { text-decoration: none; }
.paper-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.paper-card p { color: var(--muted); font-size: var(--fs-ui); line-height: var(--lh-body); }
.paper-card--link { position: relative; }

/* closing band (same rhythm as Home's) */
.content-cta { padding-block: var(--section-y); }
.content-cta h2 { max-inline-size: 18ch; }
.content-cta .cta-band__line { margin-block-start: var(--space-4); }
@media (min-width: 1024px) { .content-cta .cta-band__copy { max-inline-size: calc((100% - var(--gutter) * 11) / 12 * 7 + var(--gutter) * 6); } }

/* breadcrumb (§7.24): desktop full trail; mobile "‹ Brew guides" */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-label); font-weight: var(--fw-ui); color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-inline-end: var(--space-2); }
.crumbs a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--muted); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
@media (max-width: 1023.98px) {
  .crumbs li:last-child { display: none; }
  .crumbs a { font-size: var(--fs-ui); font-weight: var(--fw-strong); color: var(--ink); text-decoration: none; }
  .crumbs a::before { content: "‹"; margin-inline-end: var(--space-2); }
}


/* ---- 1. Guides index (§8.5) ------------------------------------------------ */
.picker { margin-block-start: var(--space-6); inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; }
.page-head--zone .page-head__inner { grid-template-columns: minmax(0, 1fr); }
.picker__label { margin-block-end: var(--space-3); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); }
/* D-20: one row of brewer chips at every width; scrolls sideways when it
   doesn't fit (the clipped last chip is the cue) */
.picker .chip-row {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--space-1);
  padding: var(--space-1); margin: calc(var(--space-1) * -1);
}
.picker .chip-row::-webkit-scrollbar { display: none; }
.picker .chip-row > li { flex: none; scroll-snap-align: start; }

.featured { margin-block-start: var(--space-5); }
.guide-card__kit { font-size: var(--fs-label); color: var(--muted); }

.qr-grid { display: grid; gap: var(--space-4); margin-block-start: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qr-grid > li { scroll-margin-top: var(--chrome-clear); }
/* D-20: title, line, spec table, method and link line up across a row */
@media (min-width: 600px) {
  .qr-grid > li { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .qr-grid .qr-card { grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--space-4); }
}
.qr-card {
  display: grid; gap: var(--space-4); align-content: start; block-size: 100%;
  padding: var(--space-5);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.qr-grid > li:target .qr-card { box-shadow: 0 0 0 2px var(--pine), var(--shadow-card); }
.qr-card__title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-h5); line-height: var(--lh-h4); font-weight: var(--fw-display-strong); }
.qr-card__line { color: var(--muted); font-size: var(--fs-ui); line-height: var(--lh-body); }
/* 6-cell mini spec in tabular figures */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid var(--rule); }
.spec > div { padding: var(--space-2) var(--space-2) var(--space-2) 0; border-block-end: 1px solid var(--rule); }
.spec__wide { grid-column: 1 / -1; }
.spec dt { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); }
.spec dd { font-size: var(--fs-ui); font-weight: var(--fw-strong); font-variant-numeric: lining-nums tabular-nums; }
.qr-card__method summary {
  display: flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--tap);
  font-size: var(--fs-ui); font-weight: var(--fw-strong);
  cursor: pointer; list-style: none;
}
.qr-card__method summary::-webkit-details-marker { display: none; }
.qr-card__method summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--muted); }
.qr-card__method[open] summary::after { content: "–"; }
.qr-card__method p { font-size: var(--fs-ui); line-height: var(--lh-body); }
.qr-card > .link { justify-self: start; }

.texture { margin-block-end: var(--space-5); color: var(--ink); max-inline-size: 40rem; }
.texture__art { inline-size: 100%; block-size: auto; }
.texture__labels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; padding: 0; margin-block-start: var(--space-2); font-size: var(--fs-micro); font-weight: var(--fw-strong); color: var(--muted); text-align: center; }
.grind-table tbody th { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 599.98px) { .grind-table tbody th { display: flex; } }

.basics { counter-reset: none; margin-block-start: var(--space-5); border-block-start: 1px solid var(--rule); }
.basics > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-5); border-block-end: 1px solid var(--rule); }
.basics__n { font-family: var(--font-display); font-size: var(--fs-step); line-height: 1; color: var(--clay); font-variant-numeric: lining-nums tabular-nums; min-inline-size: 1ch; }
.basics__title { font-size: var(--fs-h5); line-height: var(--lh-h4); font-weight: var(--fw-display-strong); margin-block-end: var(--space-2); }
.basics p { max-inline-size: var(--measure); }


/* ---- 2. Guide article (§7.22, §8.6) ---------------------------------------- */
.guide-head { display: grid; justify-items: start; padding-block: var(--space-4) var(--space-5); }
.guide-head h1 { margin-block-start: var(--space-3); max-inline-size: 16ch; }
.guide-head__promise { margin-block-start: var(--space-4); }
.guide-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-5); font-size: var(--fs-label); font-weight: var(--fw-strong); }
.guide-meta li { display: inline-flex; align-items: center; gap: var(--space-2); }

.guide-hero { aspect-ratio: 3 / 2; border-radius: var(--r-card); overflow: hidden; background: var(--oat); }
.guide-hero picture { display: block; block-size: 100%; background: var(--oat); }   /* D-15 */
.guide-hero img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 70%; }
@media (min-width: 768px) { .guide-hero { aspect-ratio: 21 / 9; } }

.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-block: var(--space-4) var(--section-y); }
/* < 1024 (D-09): H1 → recipe card → photo → body */
.guide-aside { order: 1; }
.guide-layout__hero { order: 2; }
.guide-body { order: 3; }
.guide-aside__marker { margin-block-end: var(--space-3); }
.guide-body { display: grid; gap: var(--section-y-tight); min-inline-size: 0; }
.guide-sec > h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.guide-sec > h2 + * { margin-block-start: var(--space-5); }
.guide-sec > p, .guide-sec__intro { max-inline-size: var(--measure); }
.guide-sec__intro { color: var(--muted); font-size: var(--fs-lead); }
.guide-sec__intro + * { margin-block-start: var(--space-5); }
.guide__after-table { margin-block-start: var(--space-4); font-weight: var(--fw-strong); }

@media (min-width: 1024px) {
  .guide-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; }
  .guide-layout__hero { grid-column: 1 / -1; grid-row: 1; margin-block-end: var(--space-7); }
  .guide-body { grid-column: 1 / span 8; grid-row: 2; }
  .guide-body > * { max-inline-size: 66ch; }
  .guide-body > .guide-sec--rail { max-inline-size: none; }
  .guide-aside { grid-column: 10 / span 3; grid-row: 2; position: relative; }
}

/* Pine glass-zone column behind the desktop recipe card */
.guide-aside__zone { display: none; }
@media (min-width: 1024px) {
  .guide-aside__zone {
    display: block;
    inset: calc(var(--space-6) * -1) calc(var(--space-5) * -1);
    -webkit-mask: linear-gradient(transparent, #000 var(--zone-feather), #000 calc(100% - var(--zone-feather)), transparent);
            mask: linear-gradient(transparent, #000 var(--zone-feather), #000 calc(100% - var(--zone-feather)), transparent);
  }
}

/* Recipe card. Mobile/tablet: SOLID Paper card (glass neutralised).
   Desktop ≥ 1024: sticky T1 .glass-chrome, every cell on a plate. */
.recipe {
  --r: var(--r-card);
  display: grid; gap: var(--plate-inset);
}
.recipe__head {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong); letter-spacing: var(--tr-label);
}
.recipe__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--plate-inset); }
.recipe__cell { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-3) var(--space-4); }
.recipe__cell dt { order: 2; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong); color: var(--muted); }
.recipe__cell dd { order: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-1); }
.recipe__num, .spec > div:not(.spec__wide) dd, .step__time { white-space: nowrap; }
.recipe__num { font-family: var(--font-display); font-size: var(--fs-numeral); line-height: 1.1; font-weight: var(--fw-display); font-variant-numeric: lining-nums tabular-nums; }
.recipe__unit { font-size: var(--fs-ui); font-weight: var(--fw-ui); }
.recipe__cell--grind dd { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-2); }
.recipe__cell--grind .icon { grid-row: 1 / span 2; }
.recipe__grind { font-size: var(--fs-ui); font-weight: var(--fw-strong); }
.recipe__feel { font-size: var(--fs-label); color: var(--ink); }
.recipe__cell--wide { grid-column: 1 / -1; }

.recipe__timer { display: grid; gap: var(--space-3); padding: var(--space-4); }
.recipe__readout { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); font-size: var(--fs-step); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.recipe__of { font-family: var(--font-body); font-size: var(--fs-ui); font-weight: var(--fw-strong); color: var(--muted); }
.recipe__start { min-block-size: var(--timer-btn-h); font-size: var(--fs-btn-lg); color: var(--on-pine); }
.recipe__controls { display: flex; gap: var(--space-2); }
.recipe__help { font-size: var(--fs-label); color: var(--muted); }
.recipe__timer[data-state="idle"] [data-timer-reset] { display: none; }

@media (max-width: 1023.98px) {
  /* solid Paper card on mobile (DESIGN-DECISIONS 9): no blur, no lens, no rim */
  .recipe.glass-chrome {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--paper);
    box-shadow: var(--shadow-card);
    border: 0;
    padding: 0;
    gap: 0;
  }
  .recipe.glass-chrome > .lens, .recipe.glass-chrome::before, .recipe.glass-chrome::after { display: none; }
  .recipe .plate { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  .recipe__head.plate { background: var(--oat); border-radius: var(--r-card) var(--r-card) 0 0; }
  .recipe__cells { gap: 0; padding: var(--space-2) var(--space-2) 0; }
  @media (min-width: 600px) { .recipe__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } .recipe__cell--wide { grid-column: auto; } }
  .recipe__cell { border-block-end: 1px solid var(--rule); }
}
@media (min-width: 1024px) {
  .recipe { position: sticky; top: var(--chrome-clear); --r: var(--r-sheet); }
  .recipe__head { border-radius: calc(var(--r) - var(--plate-inset)) calc(var(--r) - var(--plate-inset)) var(--r-tile) var(--r-tile); }
  .recipe__cell, .recipe__timer { border-radius: var(--r-tile); }
  .recipe__cells > :nth-last-child(-n + 2) { grid-column: 1 / -1; }
  .recipe__timer { border-radius: var(--r-tile) var(--r-tile) calc(var(--r) - var(--plate-inset)) calc(var(--r) - var(--plate-inset)); }
}

/* "You'll need" checklist */
.checklist { display: grid; gap: var(--space-3); }
.checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.checklist .icon { color: var(--pine); margin-block-start: 3px; }

/* Steps */
.steps { display: grid; gap: 0; border-block-start: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-4);
  padding: var(--space-6) 0 var(--space-6) var(--space-4);
  border-block-end: 1px solid var(--rule);
  box-shadow: inset 0 0 0 transparent;
  scroll-margin-top: var(--chrome-clear);
  transition: box-shadow var(--t-fast) var(--ease-std);
}
.step[aria-current="step"] { box-shadow: inset 3px 0 0 var(--clay); }
.step__n { font-family: var(--font-display); font-size: var(--fs-step); line-height: 1; font-weight: var(--fw-display); color: var(--clay); font-variant-numeric: lining-nums tabular-nums; min-inline-size: 1.2ch; }
.step__body { display: grid; gap: var(--space-2); align-content: start; }
.step__time { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); font-variant-numeric: tabular-nums; }
.step__title { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.25; font-weight: var(--fw-display-strong); font-variation-settings: "SOFT" var(--soft); letter-spacing: 0; }
.step__do { font-size: 1.0625rem; line-height: 1.6; }
.step__why { font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--muted); }
.step__why-label { font-weight: var(--fw-strong); }
.step__note { margin-block-start: var(--space-3); }
.step__illo { grid-column: 2; max-inline-size: var(--illo-max); color: var(--ink); }
.step__illo svg { inline-size: 100%; block-size: auto; }
/* ≥ 768: every step keeps the same fixed art gutter, so the text measure
   never jumps between steps with and without a drawing (D-09) */
@media (min-width: 768px) {
  .step { grid-template-columns: auto minmax(0, 1fr) 12rem; }
  .step__illo { grid-column: 3; grid-row: 1; align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .step { transition: none; } }

/* coffees rail: pocket cards */
.guide-coffees { min-block-size: 8rem; }


/* ---- 3. About (§8.7) ------------------------------------------------------- */
.about-hero { padding-block-start: var(--space-4); }
.about-hero__wrap { position: relative; }
.about-hero__media {
  aspect-ratio: 4 / 5; border-radius: var(--r-panel); overflow: hidden;
  /* D-07: a Pine glass-zone panel; contour hills drawn by about.js */
  background:
    radial-gradient(120% 90% at 18% 0%, color-mix(in oklab, var(--paper) 14%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in oklab, var(--pine) 88%, var(--paper)), color-mix(in oklab, var(--pine) 82%, var(--ink)));
}
.about-hero__art { inline-size: 100%; block-size: 100%; color: color-mix(in oklab, var(--paper) 26%, transparent); }
.about-hero__art svg { inline-size: 100%; block-size: 100%; display: block; }
@media (min-width: 768px) { .about-hero__media { aspect-ratio: 21 / 9; } }

/* mobile: the H1 sits on paper below the art (glass neutralised) */
.about-hero__slab { margin-block-start: var(--space-6); }
.about-hero__plate { display: grid; justify-items: start; gap: var(--space-4); }
.about-hero__plate h1 { max-inline-size: 14ch; }
@media (max-width: 1023.98px) {
  .about-hero__slab.glass-baked { padding: 0; border: 0; box-shadow: none; background: none; }
  .about-hero__slab > .lens, .about-hero__slab.glass-baked::before, .about-hero__slab.glass-baked::after { display: none; }
  .about-hero__slab .plate { background: none; border: 0; box-shadow: none; padding: 0; }
}
@media (min-width: 1024px) {
  .about-hero__media { aspect-ratio: 21 / 9; }
  .about-hero__slab {
    --r: var(--r-panel);
    position: absolute;
    inset: auto auto var(--space-6) calc(var(--page-x) + var(--space-6));
    margin: 0;
    inline-size: min(36rem, 52%);
  }
  .about-hero__plate { padding: var(--space-6); }
  .about-hero__plate h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); max-inline-size: 16ch; }
}

.prose-block > * + * { margin-block-start: var(--space-4); }
.prose-block > h2 { margin-block-start: var(--space-4); }
.prose-block p { max-inline-size: var(--measure); }
.pull { margin-block: var(--space-6); padding-inline-start: var(--space-5); border-inline-start: 2px solid var(--clay); }
.pull blockquote p { font-family: var(--font-display); font-style: italic; font-size: var(--pull-size); line-height: 1.25; font-variation-settings: "SOFT" var(--soft), "opsz" 36; text-wrap: balance; }
.pull figcaption { margin-block-start: var(--space-3); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); }

.stats-band { padding-block: var(--section-y-tight); border-block: 1px solid var(--rule); }
.stats__label { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); margin-block-start: var(--space-3); }
.stats-band .stats__label { margin: 0 0 var(--space-5); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-4) 0; }
.stats > div:nth-child(odd) { border-inline-end: 1px solid var(--rule); }
.stats > div:nth-child(even) { padding-inline-start: var(--space-4); }
.stats > div:nth-child(-n + 2) { border-block-end: 1px solid var(--rule); }
.stats dd { font-family: var(--font-display); font-size: var(--stat-size); line-height: 1; font-weight: var(--fw-display); font-variant-numeric: lining-nums tabular-nums; }
.stats dt { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); }
@media (min-width: 1024px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats > div { border: 0 !important; padding-inline: var(--space-5) !important; }
  .stats > div + div { border-inline-start: 1px solid var(--rule) !important; }
  .stats > div:first-child { padding-inline-start: 0 !important; }
}

.timeline { position: relative; display: grid; gap: var(--space-6); margin-block-start: var(--space-7); }
/* the dashed line joining the steps runs icon centre to icon centre and
   stops on step 3's icon (D-21); vertical on mobile */
.timeline__step:not(:last-child)::before {
  content: ""; position: absolute;
  inset-block: 32px calc((var(--space-6) + 32px) * -1); inset-inline-start: 31px;
  inline-size: 2px;
  background: repeating-linear-gradient(var(--zone-line) 0 6px, transparent 6px 10px);
  opacity: .5;
}
.timeline__step { position: relative; display: grid; align-content: start; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-2); }
.timeline__icon { position: relative; z-index: 1; grid-row: 1 / span 2; inline-size: 64px; block-size: 64px; padding: var(--space-2); border-radius: 50%; background: var(--oat); color: var(--ink); }
.timeline__title { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--fs-h5); line-height: var(--lh-h4); font-weight: var(--fw-display-strong); }
.timeline__n { font-size: var(--fs-label); font-family: var(--font-body); color: var(--clay); }
.timeline__step p { color: var(--ink); max-inline-size: 40ch; }
@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
  .timeline__step:not(:last-child)::before { inset: 31px auto auto 32px; inline-size: calc(100% + var(--gutter)); block-size: 2px; background: repeating-linear-gradient(90deg, var(--zone-line) 0 6px, transparent 6px 10px); }
  .timeline__step { grid-template-columns: minmax(0, 1fr); }
  .timeline__icon { grid-row: auto; margin-block-end: var(--space-3); }
}

.about-roast { display: grid; gap: var(--space-6); align-items: center; }
.about-roast__media { aspect-ratio: 3 / 2; border-radius: var(--r-card); background: var(--oat); padding: var(--space-5); display: grid; place-items: center; color: var(--ink); }
.about-roast__media svg { inline-size: 100%; block-size: auto; max-block-size: 100%; }
.about-roast__text { display: grid; gap: var(--space-4); justify-items: start; }
.about-roast__text p { max-inline-size: var(--measure); }
@media (min-width: 1024px) { .about-roast { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } .about-roast__media { grid-column: 1 / span 6; } .about-roast__text { grid-column: 8 / span 5; } }

.team { display: grid; gap: var(--space-7) var(--gutter); margin-block-start: var(--space-6); }
@media (min-width: 600px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.person { display: grid; gap: var(--space-2); align-content: start; }
/* D-07: 1:1, 160 px monogram plates: Fraunces initials on a --bag-light contour well */
.person__mono {
  position: relative; display: grid; place-items: center;
  inline-size: 160px; aspect-ratio: 1; overflow: hidden;
  margin-block-end: var(--space-3);
  border-radius: var(--r-card);
  background: var(--bag-light);
  color: color-mix(in oklab, var(--bag-dark) 40%, transparent);
}
.person__topo { position: absolute; inset: 0; }
.person__topo svg { inline-size: 100%; block-size: 100%; display: block; }
.person__initials {
  position: relative;
  display: grid; place-items: center;
  inline-size: 88px; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  box-shadow: var(--shadow-1);
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-display); line-height: 1;
  font-variation-settings: "SOFT" var(--soft); letter-spacing: .02em;
  color: var(--ink);
}
.person__name { font-size: 1.375rem; line-height: 1.2; font-weight: var(--fw-display-strong); }
.person__role { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); }
.person__bio { max-inline-size: 36ch; }

.credits { padding-block-end: var(--section-y); scroll-margin-top: var(--chrome-clear); }
.credits__details { border-block: 1px solid var(--rule); }
.credits__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: var(--qa-min); cursor: pointer; list-style: none; }
.credits__summary::-webkit-details-marker { display: none; }
.credits__summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--muted); }
.credits__details[open] .credits__summary::after { content: "–"; }
.credits__title { font-family: var(--font-body); font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-strong); letter-spacing: 0; }
.credits__details > :last-child { margin-block-end: var(--space-5); }
.credits__intro { margin-block-start: var(--space-4); font-size: var(--fs-ui); max-inline-size: var(--measure); }
.credits__list { margin-block-start: var(--space-4); border-block-start: 1px solid var(--rule); font-size: var(--fs-ui); }
.credits__list li { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-block-end: 1px solid var(--rule); }
.credits__id { font-size: var(--fs-micro); color: var(--muted); overflow-wrap: anywhere; }


/* ---- 4. Cafés (§7.23, §8.8) ------------------------------------------------ */
.cafes__count { margin-block-start: var(--space-3); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); }
.cafes__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.cafes__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-content: start; min-inline-size: 0; }
@media (min-width: 1024px) {
  .cafes__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .cafes__list { grid-column: 1 / span 7; }
  .cafes__mapcol { grid-column: 8 / span 5; }
  /* D-05: the map stays in view beside the whole list */
  .cafes__mapcol > * {
    position: sticky;
    top: calc(var(--capsule-h) + var(--space-5));
    block-size: calc(100vh - 140px);
  }
  .cafe-map { grid-template-rows: auto minmax(0, 1fr) auto; }
  .cafe-map .cafe-map__frame { block-size: auto; min-block-size: var(--map-h-lg); }
}

/* city chips: T3 baked chips inside a small glass-zone strip */
.city-strip { position: relative; isolation: isolate; padding-block: var(--space-3); }
.city-strip__zone { z-index: -1; inset: 0 calc(var(--space-4) * -1); -webkit-mask: linear-gradient(90deg, transparent, #000 var(--zone-feather), #000 calc(100% - var(--zone-feather)), transparent); mask: linear-gradient(90deg, transparent, #000 var(--zone-feather), #000 calc(100% - var(--zone-feather)), transparent); }
.city-tray { --r: var(--r-pill); display: inline-block; max-inline-size: 100%; }
.city-tray__row { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; border-radius: calc(var(--r) - var(--plate-inset)); list-style: none; margin: 0; padding: 0; }
/* D-22: the first chip never sits flush on the edge while the row scrolls */
@media (max-width: 1023.98px) {
  .city-tray__row { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
.city-tray__row::-webkit-scrollbar { display: none; }
.city-tray__row > li { flex: none; }
.city-chip {
  display: inline-flex; align-items: center;
  min-block-size: var(--chip-h);
  padding-inline: var(--space-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-ui); font-weight: var(--fw-strong);
  color: var(--ink);
  white-space: nowrap;
}
.city-chip.plate { border: var(--edge-soft); }
@media (hover: hover) { .city-chip:not([aria-pressed="true"]):hover { background-color: var(--oat); } }
.city-chip[aria-pressed="true"] { background: var(--pine); color: var(--on-pine); border-color: var(--pine); }

.cafes__note { margin-block-start: calc(var(--space-2) * -1); }
.cafe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cafe-min)), 1fr)); gap: var(--space-4); }
.cafe-empty { padding: var(--space-5); border-radius: var(--r-card); background: var(--oat); display: grid; gap: var(--space-4); justify-items: start; }

.cafe-card {
  --r: var(--r-card);
  display: block;
  block-size: 100%;
  border-radius: var(--r);
  border: var(--edge-soft);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  scroll-margin-top: var(--chrome-clear);
  outline: none;
}
.cafe-card > .lens { display: none; }
.cafe-card__plate { display: flex; flex-direction: column; gap: var(--space-3); block-size: 100%; padding: 20px; }
/* selected / pin-linked card becomes T3 glass with its content on a plate */
.cafe-card.glass-baked { background-color: color-mix(in oklab, var(--glass-base) var(--shell-a), transparent); box-shadow: var(--shadow-float), 0 0 0 2px var(--pine); }
.cafe-card.glass-baked > .lens { display: block; }
.cafe-card.glass-baked .cafe-card__plate { padding: calc(20px - var(--plate-inset)); }
.cafe-card:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); }

.cafe-card__name { font-size: 1.375rem; line-height: 1.18; font-weight: var(--fw-display-strong); }
.cafe-card__addr { font-size: var(--fs-ui); line-height: var(--lh-ui); font-style: normal; }
.cafe-card__blurb { font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--muted); }
.cafe-status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-ui); font-weight: var(--fw-strong); }
.cafe-status__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--pine); flex: none; }
.cafe-status--closed .cafe-status__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }

.hours-bar { position: relative; block-size: var(--hours-h); border-radius: var(--r-pill); background: var(--oat); margin-block-start: var(--space-1); }
.hours-bar__open { position: absolute; inset-block: 0; border-radius: var(--r-pill); background: var(--pine); }
.hours-bar__now { position: absolute; inset-block-start: -3px; inline-size: 2px; block-size: 12px; margin-inline-start: -1px; background: var(--saffron); box-shadow: 0 0 0 1px var(--ink); border-radius: 1px; }
.hours-scale { position: relative; block-size: 1rem; font-size: var(--fs-micro); line-height: 1rem; font-weight: var(--fw-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.hours-scale span { position: absolute; inset-block-start: 0; transform: translateX(-50%); }
.hours-scale span:first-child { inset-inline-start: 0; transform: none; }
.hours-scale span:nth-child(2) { inset-inline-start: 31.25%; }   /* 12:00 on a 07–23 bar */
.hours-scale span:nth-child(3) { inset-inline-start: 68.75%; }   /* 18:00 */
.hours-scale span:last-child { inset-inline-start: auto; inset-inline-end: 0; transform: none; }
.hours-list { border-block-start: 1px solid var(--rule); }
.hours-list > div { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--rule); font-size: var(--fs-label); }
.hours-list dt { font-weight: var(--fw-strong); }
.hours-list dd { font-variant-numeric: tabular-nums; text-align: end; }
.cafe-card__amen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* D-05: one quiet outline button + a text link, side by side, pinned to the card foot */
.cafe-card__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2) var(--space-5); margin-block-start: auto; padding-block-start: var(--space-2); }
.cafe-card__actions .btn { flex: 0 1 auto; gap: var(--space-2); }
.cafe-card__call { flex: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cafe-card__call:hover { text-decoration-thickness: 2px; }

/* map: SVG contour terrain on Oat, a glass zone; pins are baked droplets */
.cafe-map { display: grid; gap: var(--space-2); }
.cafe-map__label { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); }
.cafe-map__frame { position: relative; block-size: var(--map-h); border-radius: var(--r-card); background: var(--oat); }
@media (min-width: 1024px) { .cafe-map__frame { block-size: var(--map-h-lg); } }
.cafe-map__terrain { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; color: color-mix(in oklab, var(--zone-line) 18%, transparent); }
.cafe-map__terrain svg { inline-size: 100%; block-size: 100%; }
.cafe-map__note { font-size: var(--fs-label); color: var(--muted); }
.cafe-pin {
  position: absolute;
  inline-size: var(--pin-hit); block-size: var(--pin-hit);
  margin: calc(var(--pin-hit) / -2) 0 0 calc(var(--pin-hit) / -2);
  display: grid; place-items: center;
  border-radius: 50%;
}
.cafe-pin__drop {
  --r: 50%;
  inline-size: var(--pin); block-size: var(--pin);
  padding: 0;
  display: grid; place-items: center;
  transition: transform var(--t-spring) var(--ease-spring);
}
.cafe-pin__core { inline-size: var(--pin-core); block-size: var(--pin-core); border-radius: 50%; background: var(--pine); box-shadow: inset 2px 2px 0 -1px color-mix(in oklab, var(--paper) 70%, transparent); }
.cafe-pin.is-active .cafe-pin__drop { transform: scale(1.15); box-shadow: var(--shadow-float), 0 0 0 2px var(--pine); }
.cafe-pin.is-dim { opacity: .35; }
/* pin labels (D-04): Paper plates placed by placeLabels(). < 1024 only the
   hovered / selected pin shows its label; ≥ 1024 every pin is labelled and
   the one linked to the hovered or focused card turns Pine. */
.cafe-pin__tag, .cafe-lead { display: none; z-index: 1; }
.cafe-pin__tag.is-on, .cafe-lead.is-on:not([hidden]) { display: block; }
@media (min-width: 1024px) {
  .cafe-pin__tag, .cafe-lead:not([hidden]) { display: block; }
  .cafe-pin__tag.is-on { background: var(--pine); color: var(--on-pine); box-shadow: 0 0 0 2px var(--paper), var(--shadow-float); z-index: 2; }
  .cafe-lead.is-on { background: var(--pine); block-size: 2px; }
  .cafe-pin__tag.is-dim { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) { .cafe-pin__drop { transition: none; } }

.wholesale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); border-block: 1px solid var(--rule); }
.wholesale__line { font-family: var(--font-display); font-size: var(--fs-h5); line-height: var(--lh-h4); max-inline-size: 36ch; }


/* ---- 5. Contact + FAQ (§7.17, §8.9) ---------------------------------------- */
.qc-grid { display: grid; gap: var(--space-3); inline-size: 100%; margin-block-start: var(--space-6); }
@media (min-width: 768px) { .qc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qc {
  display: grid; grid-template-columns: var(--qc-icon) minmax(0, 1fr); gap: var(--space-3); align-items: start;
  block-size: 100%;
  padding: var(--space-4);
  border-radius: var(--r-tile);
  background: var(--paper);
  border: var(--edge-soft);
  box-shadow: var(--shadow-1);
  color: var(--ink); text-decoration: none;
}
a.qc:hover { background-color: var(--oat); }
.qc__icon { inline-size: var(--qc-icon); block-size: var(--qc-icon); border-radius: 50%; background: var(--oat); display: grid; place-items: center; }
a.qc:hover .qc__icon { background: var(--paper); }
.qc__text { display: grid; gap: 2px; min-inline-size: 0; }
.qc__label { font-size: var(--fs-ui); font-weight: var(--fw-strong); }
.qc__value { font-size: var(--fs-ui); overflow-wrap: anywhere; }
a.qc .qc__value { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.qc__note { font-size: var(--fs-label); color: var(--muted); }

.faq__jump { margin-block-start: var(--space-5); }
.faq__jump-list { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.faq__jump-list a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.faq__group { margin-block-start: var(--space-7); scroll-margin-top: var(--chrome-clear); }
.faq__h { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-block-end: var(--space-4); }
.qa { border-block-end: 1px solid var(--rule); }
.faq__h + .qa { border-block-start: 1px solid var(--rule); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-block-size: var(--qa-min);
  padding-block: var(--space-3);
  font-size: 1.0625rem; line-height: 1.4; font-weight: var(--fw-strong);
  cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none;
  inline-size: 14px; block-size: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform var(--t-fast) var(--ease-out);
}
.qa[open] summary::after { transform: rotate(90deg); background: linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; }
@media (prefers-reduced-motion: reduce) { .qa summary::after { transition: none; } }
.qa__a { padding-block-end: var(--space-5); }
.qa__a p { max-inline-size: 60ch; font-size: 1rem; line-height: 1.625; }
.faq__a11y { margin-block-start: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--r-tile); background: var(--oat); max-inline-size: 60ch; font-size: var(--fs-ui); line-height: var(--lh-body); }

/* D-12: one help layout. < 1024: cards → FAQ → form, one column.
   ≥ 1024: FAQ in cols 1–7; contact cards + form in cols 9–12, sticky. */
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--section-y-tight); padding-block-end: var(--section-y); }
.help-layout__side { display: contents; }
.help-layout__cards { order: 0; }
.help-layout__faq { order: 1; min-inline-size: 0; scroll-margin-top: var(--chrome-clear); }
.help-layout .contact { order: 2; }
.help-layout__qc { margin-block-start: 0; }
@media (min-width: 1024px) {
  .help-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .help-layout__faq { grid-column: 1 / span 7; grid-row: 1; }
  .help-layout__side { display: grid; gap: var(--space-7); align-content: start; align-self: stretch; grid-column: 9 / -1; grid-row: 1; }
  .help-layout__qc { grid-template-columns: minmax(0, 1fr); }
  .help-layout .contact__col { max-inline-size: none; }
}
/* sticky only where the whole column fits on screen */
@media (min-width: 1024px) and (min-height: 1100px) {
  .help-layout__side { position: sticky; top: calc(var(--capsule-h) + var(--space-5)); align-self: start; }
}
@media (min-width: 1024px) and (min-height: 760px) and (max-height: 1099.98px) {
  .help-layout .contact { position: sticky; top: calc(var(--capsule-h) + var(--space-5)); }
}
.contact { scroll-margin-top: var(--chrome-clear); }
.contact__col { max-inline-size: var(--form-w); }
.contact__col > h2 { margin-block-start: var(--space-4); }
.contact__intro { margin-block-start: var(--space-4); }
.contact-form { margin-block-start: var(--space-6); }
.contact-form__send { margin-block-start: var(--space-6); }
.contact-form__send[aria-busy="true"] { cursor: progress; }
.contact-form__demo { margin-block-start: var(--space-3); font-size: var(--fs-label); color: var(--muted); }
.field__error[hidden] { display: none; }
.field--error .input, .field--error .select, .field--error .textarea { border: 2px solid var(--clay); }
.error-summary { margin-block-start: var(--space-6); }
.error-summary__title { font-size: 1.25rem; line-height: 1.3; font-weight: var(--fw-display-strong); }
.error-summary__list { margin-block-start: var(--space-3); padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); }
.error-summary__list a { color: var(--clay); text-underline-offset: 3px; font-weight: var(--fw-strong); display: inline-flex; min-block-size: var(--tap); align-items: center; }
.confirm { margin-block-start: var(--space-6); padding: var(--space-6); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-card); display: grid; gap: var(--space-3); justify-items: start; }
.confirm__icon { inline-size: var(--icon-xxl); block-size: var(--icon-xxl); color: var(--pine); }
.confirm__title { font-size: var(--fs-h4); line-height: var(--lh-h4); }


/* ---- 6. 404 (§8.10): the one centred layout --------------------------------- */
.err { padding-block: var(--space-7) var(--section-y-tight); text-align: center; }
.err__inner { display: grid; justify-items: center; gap: var(--space-4); }
.err-illo { color: var(--ink); --illo-accent: var(--clay); }
.err-illo svg { inline-size: min(100%, var(--err-illo)); block-size: auto; }
.err__slip { margin-block-start: calc(var(--space-2) * -1); }
.err h1 { max-inline-size: 14ch; margin-block-start: var(--space-3); }
.err__line { margin-inline: auto; max-inline-size: 40ch; }
.err__routes-title { margin-block-start: var(--space-6); font-family: var(--font-body); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong); letter-spacing: var(--tr-label); color: var(--muted); }
.err .chip-row { justify-content: center; max-inline-size: 48rem; }
.err__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-5); }
.err__links a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.err__best { margin-block-start: var(--space-5); }