/* Shared refinement layer for blog posts.
   Loaded after each post's inline <style>, so these rules win on equal specificity.
   Keeps the brand (dark ground, crimson, Inter) and fixes reading comfort,
   contrast, and the browser surfaces the inline styles never touched. */

:root {
  --bg: #0D0D0D;
  --surface: #161514;
  --surface-2: #1C1A19;
  --line: #2A2725;
  --line-soft: #1F1D1C;
  --ink: #F3F0EB;
  --body: #D6D2CB;
  --muted: #A19B93;
  --crimson: #C41E3A;
  --crimson-deep: #9E1730;
  --crimson-text: #F0566B;
  --crimson-wash: rgba(196, 30, 58, 0.09);
  --crimson-line: rgba(196, 30, 58, 0.32);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color-scheme: dark;
}

/* ── Browser surfaces ─────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
::selection { background: var(--crimson); color: #fff; }
html { scrollbar-color: #3A3533 var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3A3533; border-radius: 10px; border: 2px solid var(--bg); }
:focus-visible { outline: 2px solid var(--crimson-text); outline-offset: 3px; border-radius: 4px; }

body {
  background: var(--bg);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

/* ── Column ───────────────────────────────────────── */
.wrap { max-width: 720px; padding: 56px 24px 96px; }

.back { color: var(--crimson-text); font-size: 14px; margin-bottom: 28px; transition: color .15s, gap .2s cubic-bezier(.16,1,.3,1); }
.back:hover { opacity: 1; color: var(--ink); gap: 9px; }
.logo { margin-bottom: 48px; }

/* ── Title block ──────────────────────────────────── */
h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(32px, 5.2vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 18px;
}
.post-tag { color: var(--crimson-text); letter-spacing: 0.1em; margin-bottom: 16px; }
.meta { font-size: 14px; color: var(--muted); margin-bottom: 32px; font-variant-numeric: tabular-nums; }

/* ── Prose ────────────────────────────────────────── */
p, li { font-size: 17px; line-height: 1.75; color: var(--body); }
p { margin-bottom: 20px; }
li { margin-bottom: 8px; }
ul, ol { padding-left: 22px; margin-bottom: 22px; }
li::marker { color: var(--crimson-text); }
strong { color: var(--ink); font-weight: 650; }
em { color: inherit; font-style: italic; }

h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 29px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  margin: 60px 0 16px;
}
h3 { font-size: 18px; line-height: 1.4; color: var(--ink); margin: 36px 0 10px; text-wrap: balance; }
/* Utility headings that set their own type inline stay in Inter */
h2[style], .cta-box h2 { font-family: inherit; letter-spacing: normal; }
.cta-box h2 { font-family: var(--serif); font-size: 26px; }

a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wrap p a, .wrap li a { color: var(--crimson-text); }
.wrap p a:hover, .wrap li a:hover { color: var(--ink); }

/* ── Cards and panels: calmer surfaces, readable small copy ── */
.festival-card, .science-card, .bean-card, .spice-card, .ingredient-card,
.recipe-card, .nutrition-card, .trouble-table, .fact-tile, .step-card {
  background: var(--surface);
  border-color: var(--line);
}
.festival-grid, .science-grid { gap: 12px; margin: 28px 0; }
.festival-card, .science-card { padding: 18px 20px; border-radius: 12px; }
.festival-name, .science-name, .bean-name, .snack-name, .topping-name, .step-title { font-size: 15px; line-height: 1.4; color: var(--ink); margin-bottom: 6px; }
.festival-detail, .science-detail, .bean-detail, .snack-desc, .topping-desc,
.timeline-text, .spice-detail-val {
  font-size: 14.5px; line-height: 1.6; color: var(--body);
}
.festival-timing { color: var(--crimson-text); font-size: 11px; letter-spacing: 0.06em; margin-top: 10px; }
.science-effect { font-size: 11px; letter-spacing: 0.05em; margin-top: 8px; color: #6EE7A0; }

/* Tip: tinted panel instead of a thick side stripe */
.tip {
  background: var(--crimson-wash);
  border: 1px solid var(--crimson-line);
  border-left: 1px solid var(--crimson-line);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 28px 0;
  font-size: 15.5px;
  line-height: 1.65;
}

/* Recipe card: the most-used block on the page, so it gets the most room */
.recipe-card, .nutrition-card { border-radius: 16px; padding: 28px 28px; margin: 32px 0; }
.recipe-card h3, .nutrition-card h3, .ingredient-card h3 { color: var(--crimson-text); font-size: 12px; letter-spacing: 0.1em; margin-bottom: 20px; }
.recipe-step { gap: 16px; margin-bottom: 20px; }
.step-dot, .step-num {
  width: 28px; height: 28px; font-size: 13px; margin-top: 0;
  background: var(--crimson); font-variant-numeric: tabular-nums;
}
.step-text, .step-body { font-size: 16px; line-height: 1.7; color: var(--body); }

/* Ingredient rows */
.ingredient-row { font-size: 15.5px; }
.ing-qty { font-variant-numeric: tabular-nums; }

/* Nutrition rows: align numbers */
.micro-row { font-size: 15px; padding: 10px 0; border-bottom-color: var(--line-soft); gap: 16px; }
.micro-val { color: var(--ink); font-variant-numeric: tabular-nums; }
.micro-note { font-size: 12.5px; color: #6EE7A0; text-align: right; }

/* Troubleshooting grid */
.trouble-table { border-radius: 14px; }
.trouble-row.header { background: var(--surface-2); }
.trouble-cell { padding: 14px 16px; font-size: 14.5px; line-height: 1.55; border-color: var(--line); }
.trouble-row { border-bottom-color: var(--line); }
.trouble-row.header .trouble-cell { font-size: 11px; color: var(--muted); }
.trouble-problem { color: #FCA5A5; font-weight: 600; }
.trouble-cause { color: #FDE68A; }
.trouble-fix { color: #86EFAC; }

/* Tables used in other posts */
.sub-table td, .quick-table td { font-size: 15px; line-height: 1.6; }

/* Callouts and CTA: flat tinted surfaces, solid brand button */
.callout {
  background: var(--crimson-wash);
  border: 1px solid var(--crimson-line);
  border-radius: 14px;
  padding: 22px 24px;
}
.callout p { font-size: 15.5px; line-height: 1.65; }
.callout-title { color: var(--crimson-text); font-size: 15px; margin-bottom: 8px; }

.cta-box {
  background: var(--surface);
  border: 1px solid var(--crimson-line);
  border-radius: 18px;
  padding: 40px 28px;
  margin-top: 56px;
}
.cta-box p { font-size: 16px; color: var(--muted); max-width: 46ch; margin: 0 auto 24px; }
.cta-btn {
  background: var(--crimson);
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 15px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  transition: background .15s, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
.cta-btn:hover { opacity: 1; background: var(--crimson-deep); transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.7); }
.cta-btn:active { transform: translateY(0); }

/* Share bar */
.share-bar { gap: 8px; margin: 20px 0 28px; }
.share-label { color: var(--muted); }
.share-btn { padding: 8px 13px; border-radius: 999px; font-size: 12.5px; min-height: 34px; transition: opacity .15s, transform .2s cubic-bezier(.16,1,.3,1); }
.share-btn:hover { transform: translateY(-1px); }
.share-btn-cp { background: var(--surface); border-color: var(--line); color: var(--body); }
.share-btn-cp:hover { background: var(--surface-2); }

/* Images inside posts */
.wrap img:not([src$=".svg"]) { border-radius: 14px; }

.divider { border-top-color: var(--line-soft); margin: 48px 0 32px; }
.footer { font-size: 13px; line-height: 1.9; color: var(--muted); }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 600px) {
  .wrap { padding: 32px 20px 72px; }
  .logo { margin-bottom: 36px; }
  h1 { font-size: 31px; }
  h2 { font-size: 24px; margin-top: 48px; }
  p, li { font-size: 16.5px; }
  .recipe-card, .nutrition-card { padding: 22px 18px; }
  .recipe-step { gap: 12px; }
  .step-text, .step-body { font-size: 15.5px; }
  .micro-row { flex-wrap: wrap; row-gap: 2px; }
  .micro-note { flex-basis: 100%; text-align: left; }
  .cta-box { padding: 32px 20px; }
}

/* Brand share colours, adjusted to pass AA with their labels */
.share-btn-fb { background: #1464D8; }
.share-btn-wa { background: #25D366; color: #06311A; }
.share-btn-wa svg { fill: #06311A; }
.share-btn-vb { background: #6550E6; }