/* ============================================================
   Cryptoccino — theme tokens.
   Default :root is Cappuccino. Three overrides via the
   html[data-roast="…"] attribute swap the same tokens for the
   other roasts. Every theme-able colour reads through a variable;
   nothing outside this block hardcodes a roast colour.
   ============================================================ */

:root {
  /* Cappuccino — sandstorm beige.
     Darker / sandier than the previous default cream so the four
     roasts (Latte / Cappuccino / Flat White / Espresso) read as a
     clear lightest → darkest gradient. */
  --bg:     #E8D9B6;   /* sand storm                  */
  --card:   #F2E5C2;   /* lighter sand surface        */
  --panel:  #D9C58F;   /* deeper sand band            */
  --ink:    #2E2117;   /* primary body text           */
  --soft:   #4F4031;   /* secondary body text         */
  --mut:    #6D5C40;   /* tags, meta, small labels    */
  --line:   #C2A86E;   /* hairline divider + borders  */
  --accent: #7B440E;   /* links, kickers, decoration  */

  /* Price up/down — fixed across all roasts so red/green stays
     legible on the dark Espresso too. 16% alpha pill background
     composes onto whichever chip surface is underneath. */
  --price-up:       #5C8A54;
  --price-down:     #C25A4F;
  --price-up-tint:  rgba(92, 138, 84, 0.16);
  --price-down-tint: rgba(194, 90, 79, 0.16);

  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
}

html[data-roast="latte"] {
  --bg:     #FCFAF5;   /* near-pure white with faint warm undertone */
  --card:   #FFFFFF;   /* pure white milk */
  --panel:  #F2E9D5;   /* very light cream band */
  --ink:    #3A2C1E;
  --soft:   #5A4A39;
  --mut:    #8A7860;
  --line:   #E6D9BD;
  --accent: #9A5A1C;
}

html[data-roast="flat-white"] {
  --bg:     #C8A370;   /* caramel */
  --card:   #D4B485;   /* light caramel */
  --panel:  #B58E55;   /* deeper caramel */
  --ink:    #2A1A0B;   /* near black-brown for max contrast */
  --soft:   #3F2818;
  --mut:    #5F4426;
  --line:   #8B6332;
  --accent: #4A2A0E;   /* deep wood brown for legible links on caramel */
}

html[data-roast="espresso"] {
  --bg:     #241910;
  --card:   #2F2217;
  --panel:  #352619;
  --ink:    #F3E9D8;
  --soft:   #D8C7AE;
  --mut:    #A38E72;
  --line:   #473628;
  --accent: #D9963C;
}

/* ============================================================
   Resets + transition (the "pour" between roasts).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

html, body, .container,
article.issue, article.issue *,
.prices, .chip, .chip *,
.roast-toggle, .roast-toggle button,
header.site, footer.site {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    fill 0.25s ease,
    stroke 0.25s ease;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  padding: 2.5rem 1.25rem 4rem;
}

/* === Site chrome === */
header.site {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.5rem;
}
header.site .brand {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
}
/* Inline lockup SVG: currentColor on dark parts picks up --ink via
   .brand's color; caramel parts read var(--accent) directly. */
header.site .brand .lockup {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* === Roast toggle (segmented control) === */
.roast-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--card);
}
.roast-toggle button {
  appearance: none;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  color: var(--mut);
  cursor: pointer;
  padding: 0.4rem 0.7rem;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: 1.2;
}
.roast-toggle button:last-child { border-right: none; }
.roast-toggle button:hover:not([aria-pressed="true"]) { color: var(--ink); }
.roast-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.roast-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--card);
}

article.issue header { margin-bottom: 2rem; }

/* === Market-mood gauge === */
.mood-gauge {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
}
.mood-gauge .mood-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0;
}
.mood-gauge .mood-beans {
  display: inline-flex;
  gap: 0.32rem;
  align-items: center;
}
.mood-gauge .mood-beans svg.bean { display: block; }
.mood-gauge .bean-filled .bean-body { fill: var(--accent); stroke: none; }
.mood-gauge .bean-filled .bean-seam { stroke: var(--panel); stroke-width: 0.9; }
.mood-gauge .bean-empty .bean-body { fill: none; stroke: var(--line); stroke-width: 1.2; }
.mood-gauge .bean-empty .bean-seam { stroke: var(--line); stroke-width: 0.6; }
.mood-gauge .mood-detail {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--soft);
  margin: 0;
  flex: 1 1 14rem;
  letter-spacing: 0.02em;
}
.mood-gauge .mood-detail strong {
  color: var(--ink);
  font-weight: 600;
}
article.issue .section-card {
  display: block;
  width: 100%;
  height: auto;
  margin: 3rem 0 0.5rem;
  border-radius: 3px;
}
article.issue p:has(> .section-card) { margin: 3rem 0 0.5rem; }
article.issue p:has(> .section-card) > .section-card { margin: 0; }
article.issue p:has(> .section-card) + h2 { margin-top: 1rem; }

article.issue h1 {
  font-family: var(--mono);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* === Beat headings === */
article.issue h2 {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--accent);
  margin: 3rem 0 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* === Pour + Last sip === */
article.issue blockquote.pour,
article.issue blockquote.last-sip {
  margin: 0 0 2rem;
  padding: 1.1rem 1.4rem;
  background: var(--panel);
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-style: italic;
  border-radius: 0 3px 3px 0;
}
article.issue blockquote.pour p,
article.issue blockquote.last-sip p { margin: 0 0 0.45rem; }
article.issue blockquote.pour p:last-child,
article.issue blockquote.last-sip p:last-child { margin-bottom: 0; }
article.issue blockquote.pour strong,
article.issue blockquote.last-sip strong {
  font-family: var(--mono);
  font-style: normal;
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 0.4rem;
}
article.issue blockquote.pour em,
article.issue blockquote.last-sip em {
  font-style: normal;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  margin-left: 0.25rem;
}

/* === Pour band: wraps Pour blockquote + price strip === */
article.issue .pour-band {
  margin: 0 0 2rem;
  padding: 1.1rem 1.4rem;
  background: var(--panel);
  border-left: 2px solid var(--accent);
  border-radius: 0 3px 3px 0;
}
article.issue .pour-band blockquote.pour {
  background: transparent;
  border-left: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

/* === Prices strip === */
.prices {
  margin: 1rem 0 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.95rem 1.05rem 1.05rem;
}
.prices-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin: 0 0 0.6rem;
}
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
article.issue .chips li { margin: 0; padding: 0; }
article.issue .chips li::before { display: none; }
.chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.2;
}
.chip .chip-left,
.chip .chip-right {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.chip .chip-right { align-items: flex-end; }
.chip .ticker {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}
.chip .price { color: var(--soft); font-size: 0.72rem; }
.chip .change {
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 5px;
  font-weight: 600;
}
.chip .change.up   { background: var(--price-up-tint);   color: var(--price-up); }
.chip .change.down { background: var(--price-down-tint); color: var(--price-down); }
.chip .spark { display: block; }
/* Restroke inline sparkline SVG to match the direction pill. Sibling
   selector overrides the inline stroke/fill attributes from prices.py. */
.chip .change.up   ~ .spark polyline { stroke: var(--price-up); }
.chip .change.up   ~ .spark circle   { fill:   var(--price-up); }
.chip .change.down ~ .spark polyline { stroke: var(--price-down); }
.chip .change.down ~ .spark circle   { fill:   var(--price-down); }

/* === Lead section === */
section.lead {
  margin: 0 0 3.25rem;
  padding: 2rem 0 2.25rem;
  border-bottom: 1px solid var(--line);
}
section.lead .kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}
section.lead .kicker strong { font-weight: inherit; color: inherit; }
section.lead h2 {
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--ink);
  margin: 0 0 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
}
section.lead .sources {
  margin: 0 0 1.4rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
section.lead .fng-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
  padding: 0.45rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
section.lead .fng-chip .fng-label {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: 0.65rem;
  white-space: nowrap;
}
section.lead .fng-chip .fng-value {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}
section.lead .fng-chip .fng-scale {
  color: var(--mut);
  font-size: 0.62rem;
  font-weight: 500;
  margin-left: 0.1rem;
}
section.lead .fng-chip .fng-class {
  color: var(--soft);
  font-style: italic;
}
section.lead .fng-chip .fng-delta { font-weight: 600; }
section.lead .fng-chip .fng-delta.down { color: var(--price-down); }
section.lead .fng-chip .fng-delta.up   { color: var(--price-up); }
section.lead .fng-chip .fng-delta.flat { color: var(--mut); }
section.lead p { margin: 0 0 1.75rem; color: var(--ink); }
section.lead p strong:first-child {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.5rem;
  font-weight: 600;
}

/* === Roundup items === */
article.issue blockquote:not(.pour):not(.last-sip) {
  margin: 0 0 1.5rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--accent);
  color: var(--soft);
  font-style: normal;
}
article.issue blockquote:not(.pour):not(.last-sip) p { margin: 0; }
article.issue blockquote:not(.pour):not(.last-sip) strong:first-child {
  color: var(--ink);
  font-weight: 600;
  margin-right: 0.25rem;
}

/* === Source tags === */
article.issue code {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  white-space: nowrap;
  vertical-align: 0.1em;
}
article.issue a code { color: var(--accent); }
article.issue a:has(code) { text-decoration: none; }

/* === Grinding / Mempool band === */
article.issue h2.brewing-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 3rem 0 0;
  background: var(--panel);
  padding: 1rem 1.4rem 0.6rem;
  border-radius: 3px 3px 0 0;
}
article.issue h2.brewing-label + ul {
  background: var(--panel);
  padding: 0.4rem 1.4rem 1.1rem;
  margin: 0 0 2rem;
  border-radius: 0 0 3px 3px;
  list-style: none;
}
article.issue ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
article.issue ul li {
  margin: 0 0 0.65rem;
  padding-left: 1rem;
  position: relative;
  color: var(--soft);
  line-height: 1.55;
}
article.issue ul li::before {
  content: "›";
  color: var(--accent);
  position: absolute;
  left: 0;
}

/* === Links === */
article.issue a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
article.issue a:hover { text-decoration-thickness: 2px; }

/* === Horizontal rule === */
article.issue hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 3rem 0 2rem;
}

/* === Archive — dedicated /archive/ page + a homepage link out to it === */
@keyframes cc-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Homepage: just a redirect link at the bottom (no inline list). */
.archive-link {
  margin-top: 4.5rem;
  padding-top: 2.25rem;
  border-top: 3px double var(--line);
  text-align: center;
}
.archive-link a {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.archive-link a .arr { display: inline-block; transition: transform 0.18s ease; }
.archive-link a:hover .arr { transform: translateX(4px); }

/* The /archive/ page header — mirrors the issue masthead idiom. */
.archive-page { margin-top: 0.5rem; }
.archive-head {
  margin-bottom: 2.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 3px double var(--line);
}
.archive-eyebrow {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.65rem;
}
.archive-head h1 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  font-weight: 600;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.archive-sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--soft);
  margin: 0.55rem 0 0;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.archive-grid li { margin: 0; padding: 0; }
.archive-grid li::before { display: none; }

.archive-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.85rem;
  padding: 1.15rem 1.25rem 1.05rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease, background-color 0.25s ease;
}
.archive-card a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

/* Date stamp: big display-serif day + stacked weekday / month-year */
.archive-date {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.archive-date .ad-day {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.archive-date .ad-rest {
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  line-height: 1.25;
}
.archive-date .ad-dow {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.archive-date .ad-my {
  font-size: 0.72rem;
  color: var(--mut);
  letter-spacing: 0.04em;
}

.archive-pour {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive-cta {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.archive-cta .arr { display: inline-block; transition: transform 0.18s ease; }
.archive-card a:hover .archive-cta .arr { transform: translateX(4px); }

/* Cards rise in as they scroll into view (progressive enhancement: only
   where scroll-driven timelines exist; otherwise they render normally). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .archive-card {
      opacity: 0;
      animation: cc-reveal 0.7s linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}

.empty {
  color: var(--soft);
  font-style: italic;
  text-align: center;
  padding: 3rem 0;
}

/* === Site footer === */
footer.site {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--mut);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
footer.site a { color: var(--mut); text-decoration: none; }
footer.site a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--card); }

/* === Mobile === */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .container { padding: 1.75rem 1rem 3rem; }
  header.site { gap: 0.75rem; }
  header.site .brand img { max-width: 260px; }
  .roast-toggle { font-size: 0.55rem; }
  .roast-toggle button { padding: 0.35rem 0.55rem; }
  article.issue h1 { font-size: 1.1rem; }
  section.lead h2 { font-size: 1.3rem; }
  section.lead p { margin: 0 0 1.4rem; }
  article.issue h2 { font-size: 0.88rem; margin-top: 2.25rem; }
  .prices { padding: 0.85rem 0.95rem 0.95rem; }
  .chips { gap: 0.45rem 0.9rem; }
  .chip { font-size: 0.76rem; padding: 0.75rem 0.9rem; }
  article.issue blockquote.pour,
  article.issue blockquote.last-sip { padding: 1rem 1.1rem; }
  article.issue h2.brewing-label { padding: 0.85rem 1.1rem 0.5rem; }
  article.issue h2.brewing-label + ul { padding: 0.4rem 1.1rem 0.9rem; }
}

/* ============================================================
   EXPRESSION LAYER — "kraft-paper coffee dispatch".
   Punch-up over the base theme: self-hosted display serif, paper
   grain, masthead dateline, a louder lead, sectioned beats, tactile
   panels, and one orchestrated page-load pour. Layered at the end so
   it rides the cascade over the base rules without rewriting them.
   Every colour still reads through the roast tokens above, so all
   four roasts (Latte / Cappuccino / Flat White / Espresso) hold.
   ============================================================ */

/* Fraunces — self-hosted variable display serif (latin subset).
   Display only: the dateline and the lead headline. Body keeps the
   native serif; data and labels keep the mono. opsz 9–144, wght 300–700. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/fraunces-latin-var.woff2") format("woff2");
}

:root {
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  /* Warm coffee-black shadows — barely there on Espresso, soft on the
     lighter roasts. */
  --shadow:    0 18px 40px -28px rgba(34, 20, 8, 0.55);
  --shadow-sm: 0 9px 22px -16px rgba(34, 20, 8, 0.50);
  --grain-opacity: 0.05;
}
html[data-roast="espresso"] { --grain-opacity: 0.035; }

/* === Atmosphere: a warm glow off the top + a paper-grain tooth === */
body {
  background-image:
    radial-gradient(120% 75% at 50% -12%,
      color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Lift the paper card off the page so the glow + grain read behind it. */
.container { box-shadow: 0 40px 120px -60px rgba(34, 20, 8, 0.55); }

/* === Masthead dateline === */
article.issue header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 3px double var(--line);
}
article.issue header::before {
  content: "● Brewed Daily";
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.65rem;
}
article.issue h1 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  font-weight: 600;
  font-size: clamp(1.55rem, 5vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
/* Reading-time meta — sits between the H1 and the header's double rule.
   Lives in layout chrome (not in {{ content }}), so it never reaches the
   feed/email. */
article.issue .reading-time {
  margin: 0.7rem 0 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--mut);
}

/* === Lead: big display-serif headline. The kicker keeps its base
       text treatment (accent uppercase, no fill). === */
section.lead h2 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

/* === Beat headings: label trailed by a hairline rule (fallback h2 only;
       the lead headline and the brewing band keep their own treatment) === */
article.issue > h2:not(.brewing-label) {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
article.issue > h2:not(.brewing-label)::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* === Depth on the panels and banner cards === */
article.issue .pour-band,
.prices,
.mood-gauge,
article.issue h2.brewing-label { box-shadow: var(--shadow); }
article.issue .section-card {
  border-radius: 6px;
  box-shadow: var(--shadow);
}
section.lead .fng-chip { box-shadow: var(--shadow-sm); }

/* === Price chips: a small tactile lift on hover === */
.chip {
  transition:
    transform 0.16s ease, box-shadow 0.16s ease,
    background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}

/* === One orchestrated page-load pour: masthead, then the issue blocks
       rise in sequence. Motion-safe only. === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cc-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  header.site               { animation: cc-rise 0.6s 0.02s both; }
  article.issue > *         { animation: cc-rise 0.6s both; }
  article.issue > *:nth-child(1) { animation-delay: 0.06s; }
  article.issue > *:nth-child(2) { animation-delay: 0.12s; }
  article.issue > *:nth-child(3) { animation-delay: 0.18s; }
  article.issue > *:nth-child(4) { animation-delay: 0.24s; }
  article.issue > *:nth-child(5) { animation-delay: 0.30s; }
  article.issue > *:nth-child(n+6) { animation-delay: 0.36s; }
}