/* ==========================================================================
   Almanac — Design System Overrides
   ==========================================================================
   Load AFTER assets/css/almanac.css. Refines the base theme styles to match
   the current design-system cards.

   Sections:
     1. Header — remove duplicate wordmark
     2. Homepage — tame the "Recently updated" rail
     3. Callouts — pill-chip labels, no left-border accent
     4. Code blocks — toolbar header (lang + copy), no overlap
     5. Sticky TOC — reading-rail w/ vertical track + active node
     6. Review score block — magazine-style ticks + pull-quote
     7. Form inputs — matching control heights
     8. Step pattern — mobile-friendly inline numeral
   ========================================================================== */


/* ----------------------------------------------------------------------------
   1. Header — suppress the duplicate site-title block.
   The site-logo image already contains the "All Things How" wordmark.
   ---------------------------------------------------------------------------- */
.almanac-site-header .almanac-wordmark,
.almanac-site-header .wp-block-site-title { display: none !important; }

.almanac-site-header__brand .almanac-logo img,
.almanac-site-header__brand .wp-block-site-logo img {
  max-height: 40px;        /* nudge a hair larger now that there's no wordmark beside it */
}


/* ----------------------------------------------------------------------------
   2. Homepage — Recently-updated rail.
   Removes the oversized yellow left-border accent and quiets the section so
   the cards do the work. Yellow stays as a small dot in the eyebrow only.
   ---------------------------------------------------------------------------- */

/* These selectors target both the section wrapper and the most common
   class names the [almanac_updated_rail] shortcode emits. The wide list
   covers theme drift across versions. */
.almanac-home .almanac-updated-rail,
.almanac-home__updated-rail,
.almanac-updated-rail {
  border-left: 0 !important;
  padding-left: 0 !important;
  /* Container box (bg/border/radius/padding) lives in §15 — the rail ships
     transparent + flush, so a card treatment here would be dead. */
}

/* Eyebrow above the section heading: small bullet + tracked label, ink color. */
.almanac-updated-rail .almanac-home__eyebrow,
.almanac-updated-rail__eyebrow,
.almanac-home__updated-rail .almanac-home__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--almanac-tan-deep);
  background: transparent;
  padding: 0;
  margin: 0 0 var(--almanac-space-2xs);
}
/* Eyebrow dot is the real animated `.almanac-updated-rail__dot` span (styled in
   almanac.css §22); no pseudo-dot here — it would render a duplicate. */

/* Section heading sits cleanly below the eyebrow */
.almanac-updated-rail .almanac-home__section-title,
.almanac-home__updated-rail .almanac-home__section-title {
  font-family: var(--almanac-font-display);
  font-weight: 600;
  margin: 0 0 var(--almanac-space-md);
}

/* Items: thumbnail + meta + title, each on its own card with quiet hover. */
.almanac-updated-rail__item,
.almanac-home__updated-rail .wp-block-post {
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  padding: var(--almanac-space-sm);
  transition: background var(--almanac-duration) var(--almanac-ease);
}
.almanac-updated-rail__item:hover,
.almanac-home__updated-rail .wp-block-post:hover {
  background: var(--almanac-bg-cream);
}


/* ----------------------------------------------------------------------------
   3. Callouts — pill-chip label instead of emoji + left-border accent.
   Backward-compatible: the existing block markup
     <div class="wp-block-group is-style-almanac-callout-note">
   keeps working; we override the ::before content + the border-left.
   ---------------------------------------------------------------------------- */
[class*="is-style-almanac-callout-"] {
  grid-template-columns: 1fr !important;   /* drop the emoji column */
  gap: 6px !important;
  border-left: 0 !important;
  border-radius: 10px !important;
  padding: var(--almanac-space-sm) var(--almanac-space-md) !important;
}

/* Hide the original glyph; we replace it with a labelled chip via the
   :first-child rule below. */
[class*="is-style-almanac-callout-"]::before {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  align-self: start !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  font-family: var(--almanac-font-sans) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  font-style: normal !important;
}

.is-style-almanac-callout-note    { background: color-mix(in srgb, var(--almanac-tan-soft)    65%, var(--almanac-bg-paper)) !important; }
.is-style-almanac-callout-note::before    { content: "Note" !important;     background: var(--almanac-tan-soft);    color: var(--almanac-tan-deep); }

.is-style-almanac-callout-tip     { background: color-mix(in srgb, var(--almanac-success-soft) 80%, var(--almanac-bg-paper)) !important; }
.is-style-almanac-callout-tip::before     { content: "Tip" !important;      background: var(--almanac-success-soft); color: #126B36; }

.is-style-almanac-callout-warning { background: color-mix(in srgb, var(--almanac-warning-soft) 75%, var(--almanac-bg-paper)) !important; }
.is-style-almanac-callout-warning::before { content: "Watch out" !important; background: var(--almanac-warning-soft); color: #8B5410; }

.is-style-almanac-callout-info    { background: color-mix(in srgb, var(--almanac-info-soft)    75%, var(--almanac-bg-paper)) !important; }
.is-style-almanac-callout-info::before    { content: "Info" !important;     background: var(--almanac-info-soft);   color: #1F4F8F; }

/* Dark-mode contrast for the chip text colors */
[data-almanac-theme="dark"] .is-style-almanac-callout-tip::before     { color: #6DD08E; }
[data-almanac-theme="dark"] .is-style-almanac-callout-warning::before { color: #F2C078; }
[data-almanac-theme="dark"] .is-style-almanac-callout-info::before    { color: #9CC0EC; }


/* ----------------------------------------------------------------------------
   4. Code blocks — toolbar header holding the language label + Copy button.
   Restyles the existing pre[data-language] markup; the JS-injected
   .almanac-copy-btn is repositioned into the header strip.
   ---------------------------------------------------------------------------- */
.almanac-post__content pre,
.almanac-post__content .wp-block-code {
  padding: 0 !important;
  background: var(--almanac-bg-cream) !important;
  border: 1px solid var(--almanac-border) !important;
  border-radius: var(--almanac-radius-md) !important;
  overflow: hidden !important;     /* clip header strip + scroll separately */
}

/* The toolbar header — fabricated entirely from pseudo-elements + abs-positioned copy btn */
.almanac-post__content pre[data-language] {
  position: relative !important;
  padding-top: 36px !important;     /* room for the header strip */
}
.almanac-post__content pre[data-language]::before {
  content: attr(data-language) !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  background: var(--almanac-bg-canvas) !important;
  border-bottom: 1px solid var(--almanac-border) !important;
  font-family: var(--almanac-font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--almanac-fg-tertiary) !important;
  border-radius: 0 !important;
}
.almanac-post__content pre code {
  display: block;
  padding: 14px 18px;
  background: transparent;
}

/* Reposition the JS-injected copy button into the toolbar */
.almanac-copy-btn {
  top: 4px !important;
  right: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--almanac-fg-secondary) !important;
  font-family: var(--almanac-font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  opacity: 1 !important;      /* always visible, less surprise than hover-reveal */
  z-index: 2 !important;
}
.almanac-copy-btn:hover { background: var(--almanac-yellow) !important; color: var(--almanac-on-yellow) !important; }


/* ----------------------------------------------------------------------------
   5. Sticky TOC — reading-rail with vertical track + active node.
   Replaces the card-with-yellow-soft-active-state look.
   ---------------------------------------------------------------------------- */
.almanac-toc {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 0 28px !important;
  box-shadow: none !important;
}

/* Vertical track */
.almanac-toc::before {
  content: "" !important;
  position: absolute !important;
  left: 8px;
  top: 28px;
  bottom: 4px;
  width: 1px;
  background: var(--almanac-border-strong);
}

.almanac-toc__eyebrow {
  margin: 0 0 12px !important;
  letter-spacing: 0.14em !important;
}

.almanac-toc__list { gap: 4px !important; }

.almanac-toc__item { position: relative !important; }
.almanac-toc__item a {
  padding: 4px 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--almanac-fg-secondary) !important;
  font-size: 14px !important;
}
.almanac-toc__item a:hover { background: transparent !important; color: var(--almanac-fg-primary) !important; }

/* Sub-items connect via a horizontal tick from the rail */
.almanac-toc__item--sub { padding-left: 14px !important; }
.almanac-toc__item--sub::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 13px;
  width: 14px;
  height: 1px;
  background: var(--almanac-border-strong);
}
.almanac-toc__item--sub a { padding-left: 0 !important; font-size: 13px !important; color: var(--almanac-fg-tertiary) !important; }

/* Active state — yellow node centered on the rail, display-serif item */
.almanac-toc__item.is-active::before {
  content: "" !important;
  position: absolute !important;
  left: -24px;
  top: 8px;
  width: 10px; height: 10px;
  background: var(--almanac-yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--almanac-bg-paper);
  z-index: 1;
}
.almanac-toc__item.is-active > a {
  background: transparent !important;
  border-left: 0 !important;
  color: var(--almanac-fg-primary) !important;
  /* Keep the 14px Inter line + box metrics identical to inactive items so the
     scroll-spy transition never reflows the rail; signal active via the yellow
     rail dot (.is-active::before) + color/weight only. */
  font-weight: 600 !important;
  padding-left: 0 !important;
}

/* Mobile TOC keeps its card chrome for tap affordance — only desktop becomes a rail */
@media (max-width: 1023px) {
  .almanac-toc { padding: var(--almanac-space-md) !important; background: var(--almanac-bg-canvas) !important; border: 1px solid var(--almanac-border) !important; border-radius: var(--almanac-radius-md) !important; }
  .almanac-toc::before { display: none; }
  .almanac-toc__item--sub::before { display: none; }
  .almanac-toc__item.is-active::before { display: none; }
  .almanac-toc__item.is-active > a {
    border-left: 2px solid var(--almanac-yellow) !important;
    background: var(--almanac-yellow-soft) !important;
    padding-left: 10px !important;
  }
}


/* ----------------------------------------------------------------------------
   6. Review score block — magazine-style.
   Replaces the horizontal bar + colored left-border accent with a
   10-segment tick scale and a tan-rule pull-quote.

   Targets the review-score block markup:
     <div class="almanac-score almanac-score--great">
       <div class="almanac-score__head">
         <p class="almanac-score__label">Verdict</p>
         <p class="almanac-score__value"><span class="almanac-score__num">8.5</span><span class="almanac-score__max">/10</span></p>
       </div>
       <div class="almanac-score__bar"><div class="almanac-score__bar-fill" style="width:85%"></div></div>
       <p class="almanac-score__verdict-title">…</p>
       <p class="almanac-score__verdict-text">…</p>
       <!-- pros / cons skipped here -->
     </div>
   ---------------------------------------------------------------------------- */
.almanac-score {
  border-left: 0 !important;
  border-radius: 14px !important;
  padding: var(--almanac-space-xl) !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: var(--almanac-space-xl) !important;
  align-items: start !important;
}
.almanac-score__head { display: flex !important; flex-direction: column !important; gap: 10px !important; min-width: 130px; }
.almanac-score__label { letter-spacing: 0.16em !important; }
.almanac-score__value {
  font-size: clamp(3rem, 8vw, 4.5rem) !important;
  font-weight: 700 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.04em !important;
}
.almanac-score__max {
  font-family: var(--almanac-font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--almanac-fg-tertiary) !important;
  vertical-align: super !important;
  margin-left: 2px !important;
}

/* 10-tick scale. Expects the review-score block to emit
 * <span class="almanac-score__tick is-on|is-half"> children inside
 * .almanac-score__bar. */
.almanac-score__bar {
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: repeat(10, 1fr) !important;
  gap: 3px !important;
  align-items: center !important;
}
.almanac-score__bar-fill { display: none !important; }   /* legacy bar-fill — unused by the tick scale */

.almanac-score__tick {
  display: block;
  height: 10px;
  background: var(--almanac-bg-cream);
  border: 1px solid var(--almanac-border);
  border-radius: 2px;
}
.almanac-score__tick.is-on {
  background: var(--almanac-yellow);
  border-color: var(--almanac-yellow-deep);
}
.almanac-score__tick.is-half {
  background: linear-gradient(90deg, var(--almanac-yellow) 50%, var(--almanac-bg-cream) 50%);
  border-color: var(--almanac-yellow-deep);
}
/* Color variants — tick fill follows score bucket */
.almanac-score--great .almanac-score__tick.is-on   { background: var(--almanac-success); border-color: #126B36; }
.almanac-score--great .almanac-score__tick.is-half { background: linear-gradient(90deg, var(--almanac-success) 50%, var(--almanac-bg-cream) 50%); border-color: #126B36; }
.almanac-score--mixed .almanac-score__tick.is-on   { background: var(--almanac-warning); border-color: #8B5410; }
.almanac-score--mixed .almanac-score__tick.is-half { background: linear-gradient(90deg, var(--almanac-warning) 50%, var(--almanac-bg-cream) 50%); border-color: #8B5410; }
.almanac-score--rough .almanac-score__tick.is-on   { background: var(--almanac-danger);  border-color: #8E2828; }
.almanac-score--rough .almanac-score__tick.is-half { background: linear-gradient(90deg, var(--almanac-danger) 50%, var(--almanac-bg-cream) 50%); border-color: #8E2828; }

/* Right column — pull-quote in serif italic with tan rule */
.almanac-score__verdict-title {
  margin: 0 0 var(--almanac-space-2xs) !important;
}
.almanac-score__verdict-text {
  border-left: 2px solid var(--almanac-tan) !important;
  padding-left: var(--almanac-space-sm) !important;
  font-family: var(--almanac-font-serif) !important;
  font-style: italic !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--almanac-fg-secondary) !important;
}

/* Pros / cons span the full card instead of squishing into the narrow
   score column (the §6 grid only placed head + verdict). */
.almanac-score__pc {
  grid-column: 1 / -1 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--almanac-space-lg);
}
@media (min-width: 640px) {
  .almanac-score__pc { grid-template-columns: 1fr 1fr; }
}
.almanac-score__pc-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--almanac-space-2xs);
}
.almanac-score__pros .almanac-score__pc-title { color: var(--almanac-success); }
.almanac-score__cons .almanac-score__pc-title { color: var(--almanac-danger); }
.almanac-score__list {
  margin: 0;
  padding-left: var(--almanac-space-md);
}

@media (max-width: 640px) {
  .almanac-score { grid-template-columns: 1fr !important; gap: var(--almanac-space-md) !important; }
}


/* ----------------------------------------------------------------------------
   7. Form inputs — all controls share a 42px box.
   Fixes the 2px height drift between bordered inputs and the unbordered
   submit button.
   ---------------------------------------------------------------------------- */
.almanac-newsletter__form input[type="email"],
.almanac-newsletter__form .wp-block-button__link,
.almanac-newsletter__form button,
.almanac-search-form input[type="search"],
.almanac-search-form .wp-block-button__link,
.almanac-search-form button {
  height: 42px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

.almanac-newsletter__form .wp-block-button__link,
.almanac-newsletter__form button {
  border: 1px solid var(--almanac-fg-primary) !important;   /* match input border thickness */
}


/* ----------------------------------------------------------------------------
   8. Step pattern (filter output) — mobile inline numeral.
   The filter wraps "Step N:" prose in:
     <div class="almanac-step">
       <a class="almanac-step__anchor"><span class="almanac-step__num">1</span></a>
       <div class="almanac-step__body">…</div>
     </div>
   On narrow viewports we collapse to a single column and inline-shrink the numeral.
   ---------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .almanac-step {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .almanac-step__anchor { align-self: start; }
  .almanac-step__num {
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
  }
  /* If the body has a leading heading, pair the numeral with it inline. */
  .almanac-step__body > :first-child {
    display: inline;
  }
}


/* ----------------------------------------------------------------------------
   Misc tidy
   ---------------------------------------------------------------------------- */

/* Article cards are flat list rows separated by a hairline — no surface box
   (background/border/radius) and NO hover background fill. The rows sit flush
   to the gutter (padding-left:0) to maximise width, so a hover/selected bg
   would awkwardly touch the content edge; the hover affordance is the title
   underline only (§17 .almanac-card__title a:hover). */
.almanac-home__latest .almanac-card,
.almanac-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--almanac-border);
  border-radius: 0;
}


/* ============================================================================
   Phase 14 — feedback widget, related-guides rail, recently-updated rail.
   Appended last so these win over the base sheet and the sections above.
   ============================================================================ */

/* ---- Feedback: inline editorial bar (was a centered card) ---------------- */
.almanac-feedback {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--almanac-space-md) !important;
  margin-block: var(--almanac-space-2xl) !important;
  padding: var(--almanac-space-md) 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--almanac-border) !important;
  border-bottom: 1px solid var(--almanac-border) !important;
  border-radius: 0 !important;
  text-align: left !important;
  flex-wrap: wrap;
}
.almanac-feedback::before { content: none !important; }   /* kill the old "Thanks!" pseudo */
.almanac-feedback__lede { display: flex; align-items: center; gap: var(--almanac-space-sm); min-width: 0; }
.almanac-feedback__mascot { width: 36px !important; height: 36px !important; flex: 0 0 auto; margin: 0 !important; }
.almanac-feedback__mascot--celebrating { display: none; }
.almanac-feedback__title {
  font-family: var(--almanac-font-display) !important;
  font-size: 1.0625rem !important; font-weight: 600 !important;
  letter-spacing: -0.005em; margin: 0 !important; color: var(--almanac-fg-primary);
}
.almanac-feedback__actions { display: inline-flex !important; gap: var(--almanac-space-xs) !important; flex: 0 0 auto; margin: 0 !important; }
.almanac-feedback__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 12px !important;
  background: var(--almanac-bg-cream);
  border: 1px solid var(--almanac-border-strong);
  border-radius: var(--almanac-radius-pill) !important;
  color: var(--almanac-fg-primary);
  font: 600 0.875rem/1 var(--almanac-font-sans);
  cursor: pointer;
  transition: all var(--almanac-duration) var(--almanac-ease);
}
.almanac-feedback__btn:hover { background: var(--almanac-yellow); border-color: var(--almanac-yellow); color: var(--almanac-on-yellow); transform: translateY(-1px); }
.almanac-feedback__btn.is-selected { background: var(--almanac-yellow); border-color: var(--almanac-yellow-deep); color: var(--almanac-on-yellow); }
.almanac-feedback__thanks {
  font-family: var(--almanac-font-serif); font-style: italic;
  font-size: 1.0625rem; line-height: 1.4; color: var(--almanac-fg-secondary); margin: 0;
}
.almanac-feedback__form,
.almanac-feedback__count { display: none !important; }   /* the bar drops the free-text form */
.almanac-feedback:not([data-state="thanks"]) .almanac-feedback__thanks { display: none; }
.almanac-feedback[data-state="thanks"] .almanac-feedback__title,
.almanac-feedback[data-state="thanks"] .almanac-feedback__actions { display: none !important; }
.almanac-feedback[data-state="thanks"] .almanac-feedback__mascot--idle { display: none; }
.almanac-feedback[data-state="thanks"] .almanac-feedback__mascot--celebrating { display: block; }
@media (max-width: 520px) {
  .almanac-feedback { flex-direction: column; align-items: flex-start; gap: var(--almanac-space-sm); }
}

/* ---- Related: magazine "Keep reading" image-top cards -------------------- */
.almanac-related {
  margin-block: var(--almanac-space-2xl) !important;
  padding-top: var(--almanac-space-lg) !important;
  border-top: 1px solid var(--almanac-border) !important;
}
.almanac-related::before { content: none !important; }    /* drop the centred yellow dot */
.almanac-related__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--almanac-space-md); margin-bottom: var(--almanac-space-lg); flex-wrap: wrap;
}
.almanac-related__eyebrow {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--almanac-tan-deep); margin: 0 0 var(--almanac-space-2xs);
}
.almanac-related__title {
  font-family: var(--almanac-font-display) !important;
  font-size: clamp(1.375rem, 2.4vw, 1.625rem) !important;
  font-weight: 600 !important; line-height: 1.18; letter-spacing: -0.014em; margin: 0 !important;
}
.almanac-related__more { font-size: 0.875rem; font-weight: 600; color: var(--almanac-tan-deep); text-decoration: none; white-space: nowrap; }
.almanac-related__more:hover { text-decoration: underline; text-decoration-color: var(--almanac-yellow); text-decoration-thickness: 2px; }
.almanac-related__list {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
  display: grid !important;
  /* grid-template-columns + gap are set by §15 (flat 1fr / 1fr 1fr rows). */
}
.almanac-related__item { margin: 0 !important; }
/* flex-direction + gap are set by §15 (image-left rows). */
.almanac-related__link { display: flex !important; text-decoration: none; min-width: 0; padding: 0 !important; background: transparent !important; }
.almanac-related__link:hover { background: transparent !important; }
/* flex + thumb size are set by §15 (fixed 104px image-left). */
.almanac-related__thumb {
  position: relative; width: 100%;
  border-radius: var(--almanac-radius-md); overflow: hidden;
  background: var(--almanac-bg-cream); border: 1px solid var(--almanac-border);
}
.almanac-related__thumb img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; border: 0 !important; }
.almanac-related__pill {
  align-self: flex-start; font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--almanac-tan-deep); margin: 0;
}
/* font-size + line-clamp are set by §15 (0.9375rem, clamp 2). */
.almanac-related__headline {
  font-family: var(--almanac-font-display); font-weight: 600;
  line-height: 1.3; letter-spacing: -0.008em;
  color: var(--almanac-fg-primary); margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.almanac-related__link:hover .almanac-related__headline { text-decoration: underline; text-decoration-color: var(--almanac-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* font-family is set by §15 (sans). */
.almanac-related__meta { font-size: 0.75rem; color: var(--almanac-fg-tertiary); }

/* ---- Recently-updated rail: when-column rows (drops misaligned thumbs) ----
   __list grid-template/gap, __link and __when live styling are set by §15
   (lines ~1711-1742); only the grid display + the survivors below are kept. */
.almanac-updated-rail__list { display: grid !important; }
.almanac-updated-rail__thumb { display: none !important; }   /* no thumbnails — they were misaligning */
.almanac-updated-rail__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.almanac-updated-rail__headline {
  font-family: var(--almanac-font-sans) !important; font-weight: 600 !important;
  font-size: 0.9375rem !important; line-height: 1.3; color: var(--almanac-fg-primary);
  -webkit-line-clamp: 2;
}
.almanac-updated-rail__cat { font-size: 0.75rem; color: var(--almanac-fg-tertiary); }

/* Phase 14.1 — remove orphaned full-height yellow left bar on the rail. */
.almanac-updated-rail::before { display: none !important; content: none !important; }
/* (padding-left removed — §15 ships the rail flush via padding:0 !important.) */
/* Rail items are borderless rows inside the single outer card (design spec). */
.almanac-updated-rail__item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}


/* ============================================================================
   Phase 15 — full design-system parity: table, lists, callout icons, toast
   Matches the updated preview/ spec cards (table, lists, links, toast) +
   the callout icon vocabulary. Appended last.
   ============================================================================ */

/* ---- Tables: BOLD standout — inverted dark header bar, zebra rows --------- */
.almanac-post__content table thead th {
  font-family: var(--almanac-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--almanac-bg-paper) !important;
  background: var(--almanac-fg-primary) !important;
  border: 0 !important;
  padding: 13px 16px !important;
  vertical-align: middle;
}
/* Row-header th (e.g. first-column labels) read as strong labels, not the bar. */
.almanac-post__content table tbody th {
  font-weight: 700 !important;
  color: var(--almanac-fg-primary) !important;
  background: transparent !important;
}
.almanac-post__content table td { vertical-align: middle; padding: 13px 16px !important; }
.almanac-post__content table tbody td { border-top: 1px solid var(--almanac-border) !important; border-bottom: 0 !important; }
.almanac-post__content table tbody tr:first-child td { border-top: 0 !important; }
.almanac-post__content table tbody tr:nth-child(even) td { background: var(--almanac-bg-cream) !important; }  /* zebra */
.almanac-post__content table tbody td:first-child { font-weight: 600; color: var(--almanac-fg-primary); }
@media (hover: hover) {
  .almanac-post__content table tbody tr:hover td { background: var(--almanac-yellow-soft) !important; }
}
.almanac-post__content table .is-numeric,
.almanac-post__content table td.is-numeric,
.almanac-post__content table th.is-numeric { text-align: right !important; font-variant-numeric: tabular-nums; }
.almanac-post__content table .is-center,
.almanac-post__content table td.is-center,
.almanac-post__content table th.is-center { text-align: center !important; }
/* Compact density for long reference matrices */
.almanac-post__content table.almanac-table--compact th,
.almanac-post__content table.almanac-table--compact td { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
/* Opt-in zebra for print / long-scroll dashboards */
.almanac-post__content table.almanac-table--zebra tbody tr:nth-child(even) td { background: var(--almanac-bg-cream) !important; }
.almanac-post__content table caption {
  caption-side: top;
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--almanac-fg-tertiary);
  padding: 0 0 var(--almanac-space-xs);
}

/* ---- Description lists (dt / dd) ------------------------------------------ */
.almanac-post__content dl { margin: 1.25rem 0; display: grid; gap: 0; }
.almanac-post__content dt {
  font-weight: 600;
  color: var(--almanac-fg-primary);
  margin-top: 0.75rem;
}
.almanac-post__content dt:first-child { margin-top: 0; }
.almanac-post__content dd {
  margin: 0.125rem 0 0;
  padding-left: 1rem;
  color: var(--almanac-fg-secondary);
}

/* ---- Ordered-list markers in Fraunces ------------------------------------ */
.almanac-post__content ol > li::marker {
  font-family: var(--almanac-font-display);
  font-weight: 600;
  color: var(--almanac-tan-deep);
}
.almanac-post__content ul > li::marker { color: var(--almanac-fg-tertiary); }
/* Nested ordered lists soften from tan-deep down to fg-tertiary so depth reads
   without louder indentation. (Design spec calls for fg-quaternary here, but at
   ~3.3:1 that fails WCAG AA for marker text; fg-tertiary is the softest tan that
   still clears 4.5:1.) */
.almanac-post__content li ul > li::marker,
.almanac-post__content li ol > li::marker { color: var(--almanac-fg-tertiary) !important; }

/* ---- Callout chips get the brand's inline icon vocabulary ----------------- */
[class*="is-style-almanac-callout-"]::before {
  padding-left: 22px !important;
  background-repeat: no-repeat !important;
  background-position: 7px center !important;
  background-size: 11px 11px !important;
}
.is-style-almanac-callout-note::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23785F30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='20' y2='6'/%3E%3Cline x1='8' y1='12' x2='20' y2='12'/%3E%3Cline x1='8' y1='18' x2='20' y2='18'/%3E%3Cline x1='4' y1='6' x2='4.01' y2='6'/%3E%3Cline x1='4' y1='12' x2='4.01' y2='12'/%3E%3Cline x1='4' y1='18' x2='4.01' y2='18'/%3E%3C/svg%3E") !important;
}
.is-style-almanac-callout-tip::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23126B36' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.7.5 1 1.3 1 2.1V18h6v-1.2c0-.8.3-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") !important;
}
.is-style-almanac-callout-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B5410' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") !important;
}
.is-style-almanac-callout-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F4F8F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
}

/* Dark mode: the chip pills flip to dark backgrounds, so lighten the icon
   strokes to match the dark-mode chip text colors (lines 145-147) — otherwise
   the dark stroke vanishes on the dark pill. */
[data-almanac-theme="dark"] .is-style-almanac-callout-note::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D6B883' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='20' y2='6'/%3E%3Cline x1='8' y1='12' x2='20' y2='12'/%3E%3Cline x1='8' y1='18' x2='20' y2='18'/%3E%3Cline x1='4' y1='6' x2='4.01' y2='6'/%3E%3Cline x1='4' y1='12' x2='4.01' y2='12'/%3E%3Cline x1='4' y1='18' x2='4.01' y2='18'/%3E%3C/svg%3E") !important;
}
[data-almanac-theme="dark"] .is-style-almanac-callout-tip::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236DD08E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.7.5 1 1.3 1 2.1V18h6v-1.2c0-.8.3-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") !important;
}
[data-almanac-theme="dark"] .is-style-almanac-callout-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F2C078' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") !important;
}
[data-almanac-theme="dark"] .is-style-almanac-callout-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CC0EC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
}

/* ---- Toast — floating pill with celebrating mascot (code-copy) ------------ */
.almanac-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: 9999px;
  box-shadow: var(--almanac-shadow-lift);
  font-size: 14px;
  font-weight: 600;
  color: var(--almanac-fg-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--almanac-duration) var(--almanac-ease), transform var(--almanac-duration) var(--almanac-ease);
}
.almanac-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.almanac-toast img { width: 32px; height: 32px; }
@media (prefers-reduced-motion: reduce) { .almanac-toast { transition: opacity var(--almanac-duration) linear; } }

/* Codes status pills — align to the table spec (new=yellow-soft+ring,
 * working=success-soft, expired=cream strikethrough). */
.almanac-codes-status--new {
  background: var(--almanac-yellow-soft) !important;
  color: #8B5410 !important;
  box-shadow: inset 0 0 0 1px var(--almanac-yellow-deep);
}
/* Dark mode: #8B5410 on the dark yellow-soft (#3D3000) is ~2.08:1 and fails AA;
   switch the ink to gold for legibility on the dark chip. */
[data-almanac-theme="dark"] .almanac-codes-status--new { color: var(--almanac-yellow-deep) !important; }
.almanac-codes-status--working { background: var(--almanac-success-soft) !important; color: #126B36 !important; }
.almanac-codes-status--expired { background: var(--almanac-bg-cream) !important; color: var(--almanac-fg-tertiary) !important; text-decoration: line-through; }

/* Copy-ready code pill — monospace identifier chip for codes/reference tables. */
.almanac-codes-pill {
  display: inline-block;
  padding: 6px 12px;
  background: var(--almanac-yellow-soft);
  color: var(--almanac-fg-primary);
  border: 1px solid var(--almanac-yellow-deep);
  border-radius: 6px;
  font-family: var(--almanac-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Footer tagline — serif italic editorial flourish (design spec). */
.almanac-site-footer__tagline { font-family: var(--almanac-font-serif) !important; font-style: italic !important; }

/* External-link glyph in prose (links spec). */
.almanac-ext-icon { width: 12px; height: 12px; vertical-align: -1px; margin-left: 2px; color: var(--almanac-fg-tertiary); display: inline-block; }

/* ============================================================================
   9 · POST HEADERS — routed by post type
   ============================================================================
   Codes posts    → `.almanac-post-header--freshness-anchor`
   Guide posts    → `.almanac-post-header--jump-map`
   News + default → `.almanac-post-header--trust-band`

   Each shares the design tokens — no new colors or fonts. Markup comes from the
   parts/post-header-*.html parts and inc/post-header-shortcodes.php.
   ============================================================================ */

/* Shared atoms ------------------------------------------------------------- */
/* The .almanac-post-header__eyebrow (+ a / a:hover) rules live in the shared
   base layout below. */
.almanac-post-header__byline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--almanac-space-md);
  font-size: 0.9375rem;
  color: var(--almanac-fg-tertiary);
}
.almanac-post-header__byline .wp-block-post-author,
.almanac-post-header__byline .almanac-post-header__author {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--almanac-fg-secondary);
  font-weight: 500;
}
.almanac-post-header__byline .wp-block-post-author__avatar img {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--almanac-border);
}

/* ===========================================================================
   Shared editorial base layout — every variant (codes/guide/news/review) uses it.
   eyebrow (⊕ chips) → full-width headline → grid[ media | meta ] → author bio.
   DOM order is meta-then-media, so mobile stacks
     title → dek → byline → actions → image → bio;
   on desktop CSS places the media in column 1 (left), meta in column 2 (right).
   =========================================================================== */

/* The inner is our own flow container: render the eyebrow, headline, grid and
   author-bio as full-width, left-aligned blocks. This overrides both the legacy
   `display:grid` base rule (almanac.css) AND WordPress's constrained-layout
   child centering (max-width:content-size + margin:auto) that only appears on
   the live site — without it the short headline/eyebrow render centered. */
.almanac-post-header .almanac-post-header__inner { display: block; }
.almanac-post-header .almanac-post-header__inner > * { max-width: none; margin-inline: 0; }

/* Eyebrow — uppercase categories with a thin gold "/" between segments */
.almanac-post-header__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 0;
  margin: 0 0 16px;
  font-family: var(--almanac-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--almanac-fg-primary);
}
.almanac-post-header__eyebrow-seg { display: inline-flex; align-items: center; }
.almanac-post-header__eyebrow-seg:not(:first-child)::before {
  content: "/";
  margin: 0 0.7em;
  color: var(--almanac-yellow-deep);
  font-weight: 600;
}
.almanac-post-header__eyebrow a { color: inherit; text-decoration: none; }
.almanac-post-header__eyebrow a:hover { color: var(--almanac-yellow-deep); }

/* Headline — heavy, left-aligned, full width above the two-column body */
.almanac-post-header__title {
  font-family: var(--almanac-font-display);
  font-size: clamp(2rem, 1.25rem + 3.1vw, 3.5rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.022em;
  margin: 0;
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--almanac-fg-primary);
}

/* Two-column body */
.almanac-post-header__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 22px;
}
@media (min-width: 1000px) {
  .almanac-post-header__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
    margin-top: 26px;
    margin-bottom: 0.875rem !important;
  }
  .almanac-post-header__media { grid-column: 1; grid-row: 1; }
  .almanac-post-header__meta  { grid-column: 2; grid-row: 1; }
}

/* Tighten the very top of the article body — no top padding/margin above the
   first block (overrides the inline global padding on the group). */
.wp-block-group.almanac-post__body.has-global-padding {
  padding-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Meta column (right on desktop) — dek · byline · actions · optional card */
.almanac-post-header__meta  { min-width: 0; }
.almanac-post-header__media { min-width: 0; }
@media (min-width: 1000px) {
  /* Masthead lockup: the dek stays at the TOP of the meta column; the byline,
     verified stamp and action row drop to the BOTTOM, aligned with the foot of
     the hero image. */
  .almanac-post-header__meta { display: flex; flex-direction: column; align-self: stretch; }
  .almanac-post-header__meta > .almanac-post-header__byrow { margin-top: auto; }
}

/* Standfirst / dek (the leading "/" glyph is supplied by §9z) */
.almanac-post-header__dek {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--almanac-fg-secondary);
  text-wrap: pretty;
}
.almanac-post-header__dek .wp-block-post-excerpt__excerpt { margin: 0; }
.almanac-post-header__dek--italic { font-family: var(--almanac-font-serif); font-style: italic; }

/* Run-in standfirst — the dek flows inline after the headline on mobile (the
   editorial "headline / standfirst" lockup). Desktop uses the meta-column dek
   (--col); the run-in is hidden there. */
/* Kill WordPress's constrained-layout block-gap above the headline lockup so the
   eyebrow's own margin-bottom sets the eyebrow->title gap (matching nav->eyebrow). */
.almanac-post-header__lede { margin-top: 0; }
.almanac-post-header__dek-runin { display: none; }
@media (max-width: 999px) {
  .almanac-post-header__dek--col { display: none; }
  /* WordPress wpautop wraps the run-in shortcode output in a <p> (a block),
     which would push the dek onto its own line. Flatten it to inline so the
     standfirst flows directly after the headline. */
  .almanac-post-header__lede p { display: inline; margin: 0; }
  /* Smaller mobile headline so it doesn't tower over the run-in standfirst. */
  .almanac-post-header__lede .almanac-post-header__title { display: inline; font-size: 1.4375rem; line-height: 1.12; }
  .almanac-post-header__dek-runin {
    display: inline;
    font-family: var(--almanac-font-serif);
    font-size: 1.4375rem;   /* same size as the run-in title */
    font-weight: 400;
    line-height: 1.12;
    color: var(--almanac-fg-secondary);
  }
  .almanac-post-header__dek-runin::before {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 0.78em;
    margin-right: 0.28em;
    vertical-align: 0.04em;
    /* Hand-drawn arrow into the summary (replaces the "/"). #B2935B reads the
       same in light + dark, so no theme override is needed here. */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22' fill='none' stroke='%23B2935B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11.4C9 10.8 18 11.2 27 10.8'/%3E%3Cpath d='M20.5 5C23.5 7.6 26 9.6 27.6 10.9 25.8 12.4 23.2 14.6 20.2 17.4'/%3E%3C/svg%3E") no-repeat center / contain;
  }
}

/* Byline — "by ⊕ {Name}" then the date, stacked on their own rows */
.almanac-post-header__byline {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  margin-top: 16px;
  font-family: var(--almanac-font-sans);
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--almanac-fg-tertiary);
}
.almanac-post-header__by { color: var(--almanac-fg-secondary); }
.almanac-post-header__author-link {
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: baseline;
  color: var(--almanac-fg-primary);
  font-weight: 700;
  text-decoration: none;
}
.almanac-post-header__author-link:hover { color: var(--almanac-yellow-deep); }
.almanac-post-header__date {
  font-size: 0.75rem;
  color: var(--almanac-fg-tertiary);
}

/* Byline + actions on ONE row — author/avatar left, share icons right. Keeps the
   masthead footer to two lines (row + verify) instead of three. */
.almanac-post-header__byrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--almanac-space-sm);
  flex-wrap: nowrap;
}
.almanac-post-header__byrow .almanac-post-header__byline {
  margin-top: 0;
  flex-direction: row;        /* author (+ date) inline, not stacked */
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
}
.almanac-post-header__byrow .almanac-post-header__by { white-space: nowrap; }
.almanac-post-header__byrow .almanac-post-actions { margin: 0; flex: none; }
/* On codes posts the verify line already carries the date, so drop the byline's
   duplicate "Updated …" stamp. */
.almanac-post-header--codes .almanac-post-header__date { display: none; }
/* Author avatar — a full circle no taller than the byline line. */
.almanac-post-header__avatar {
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
/* No underline / line under the author name. */
.almanac-post-header__author-link,
.almanac-post-header__author-name {
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
}

/* Media column (left on desktop) — hero + caption */
.almanac-post-header__hero { margin: 0; }
.almanac-post-header__hero img {
  display: block; width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--almanac-border);
  background: var(--almanac-bg-cream);
}

/* Author-bio strip — "[avatar] ⊕ {Name} is a senior editor…" */
.almanac-author-bio {
  display: flex; align-items: flex-start; gap: 13px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--almanac-border);
}
.almanac-author-bio__avatar {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--almanac-border);
  object-fit: cover;
}
.almanac-author-bio__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--almanac-fg-tertiary);
}
.almanac-author-bio__name {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--almanac-fg-primary);
  font-weight: 700;
  text-decoration: none;
  margin-right: 5px;
}
.almanac-author-bio__name:hover { color: var(--almanac-yellow-deep); }

/* Mobile — tighten the vertical rhythm toward the editorial mobile lede density */
@media (max-width: 767px) {
  /* Drop the header's redundant side padding (.almanac-main already supplies
     the page gutter) so the lockup isn't double-inset on phones. */
  .almanac-post-header__inner { padding-inline: 0; }
  /* Tight editorial rhythm between header elements (dense lockup). */
  .almanac-post-header__eyebrow { gap: 4px 0; margin-bottom: 0.625rem; }
  .almanac-post-header__grid    { margin-top: 0.875rem; gap: 0.875rem; }
  .almanac-post-header__dek     { font-size: 1.0625rem; line-height: 1.3; }
  .almanac-post-header__byline  { margin-top: 0.625rem; }
  .almanac-post-actions         { margin-top: 0.75rem; }
  .almanac-author-bio           { margin-top: 1.125rem; padding-top: 1.125rem; }
}

/* RIGHT — the evidence panel: hero + stamp fused into one card */
.almanac-post-header__evidence {
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-lg);
  overflow: hidden;
  box-shadow: var(--almanac-shadow-card);
}
.almanac-post-header__evidence .almanac-post-header__hero { margin: 0; }
.almanac-post-header__evidence .almanac-post-header__hero img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--almanac-bg-cream);
  border-radius: 0;          /* the card clips the corners */
  border: 0;
}

/* Verification stamp (codes): borderless timestamp — check badge + status line
   + inline meta grid — docked in the meta column under the action row. */
.almanac-verify {
  margin-top: 0;
  margin-bottom: 0.875rem;
}
.almanac-verify__status {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 0 7px;
  margin: 0;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.almanac-verify__label { white-space: nowrap; }
.almanac-verify__rel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.almanac-verify__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  background: var(--almanac-success);
  color: #fff;
}
.almanac-verify__label {
  font-family: var(--almanac-font-sans);
  font-size: 0.8125rem; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  color: var(--almanac-fg-secondary);
  white-space: nowrap;
}
.almanac-verify__rel {
  font-family: var(--almanac-font-sans);
  font-size: 0.8125rem; font-weight: 600;
  color: var(--almanac-fg-primary);
  white-space: nowrap;
}
.almanac-verify__full {
  font-family: var(--almanac-font-sans);
  font-size: 0.8125rem;
  color: var(--almanac-fg-tertiary);
  white-space: nowrap;
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.almanac-verify__full::before {
  content: "·";
  margin-right: 7px;
  color: var(--almanac-fg-quaternary);
}
.almanac-verify__meta {
  margin: 12px 0 0;
  display: flex; flex-wrap: wrap;
  gap: 10px 22px;
}
.almanac-verify__meta > div { display: flex; flex-direction: column; gap: 1px; }
.almanac-verify__meta dt {
  margin: 0;
  font-family: var(--almanac-font-sans);
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--almanac-fg-quaternary);
}
.almanac-verify__meta dd {
  margin: 0;
  font-size: 13px; font-weight: 500;
  color: var(--almanac-fg-secondary);
}
.almanac-verify__meta .mono {
  font-family: var(--almanac-font-mono);
  font-size: 12px;
  color: var(--almanac-fg-tertiary);
}
/* (The badge gets a static hand-stamped ring via ::after below, line ~1755 —
   no animation, so the prefers-reduced-motion guard + almanac-anchor-pulse
   keyframe were no-ops and were removed.) */

/* Codes posts use the shared editorial grid — no codes-specific layout. */

/* -------- Trust Band (news / default) ------------------------------------ */
.almanac-trust-band {
  background: var(--almanac-yellow);
  color: #1A1612;
  border-top: 1px solid color-mix(in srgb, var(--almanac-yellow-deep) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--almanac-yellow-deep) 60%, transparent);
}
.almanac-trust-band__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px;
  max-width: 82rem;
  margin: 0 auto;
  padding: 10px var(--almanac-space-md);
  font-family: var(--almanac-font-sans);
  font-size: 13px;
  line-height: 1.4;
}
.almanac-trust-band__icon { display: inline-flex; align-items: center; color: #1A1612; }
.almanac-trust-band__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px;
  flex: 1;
}
.almanac-trust-band__sep { color: rgba(26, 22, 18, 0.4); }
.almanac-trust-band__mono { font-family: var(--almanac-font-mono); }
.almanac-post-header--trust-band .almanac-post-header__inner {
  text-align: center;
}
.almanac-post-header__title--centered { margin-inline: auto; }
.almanac-post-header--trust-band .almanac-post-header__title {
  font-family: var(--almanac-font-display);
  font-size: clamp(2.25rem, 5vw, 3.625rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  max-width: 720px;
  margin: var(--almanac-space-sm) auto 0;
}
.almanac-post-header__dek--centered {
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
}
.almanac-post-header__byline--centered { justify-content: center; }
.almanac-post-header__hero-wrap {
  padding: 10px var(--almanac-space-md) var(--almanac-space-md);
}
.almanac-post-header__hero--cinematic img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--almanac-radius-lg);
  border: 1px solid var(--almanac-border);
}

/* Mobile · Trust Band · stack two band rows, hero falls to 3:2 */
@media (max-width: 640px) {
  .almanac-trust-band__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px var(--almanac-space-sm) 12px;
    gap: 4px;
  }
  .almanac-post-header--trust-band .almanac-post-header__title { font-size: 1.875rem; }
  .almanac-post-header__hero--cinematic img { aspect-ratio: 3 / 2; }
}

/* -------- Variant D · Jump Map ------------------------------------------- */
/* Guide posts use the shared editorial grid; the [almanac_jump_map] rail sits
   full-width below the two-column body (styled by .almanac-jump-map below). */

.almanac-jump-map {
  /* Grid item of the constrained-layout grid. A definite width:100% makes the
     item take the cell width instead of letting the flex track's content size
     the grid column — otherwise the 220px chips force the column (and the page)
     to ~1312px on mobile. The track's own overflow-x:auto then scrolls. */
  width: 100%;
  min-width: 0;
  margin-top: var(--almanac-space-lg);
  padding-top: var(--almanac-space-md);
  border-top: 1px solid var(--almanac-border);
}
.almanac-jump-map__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--almanac-space-sm);
  gap: var(--almanac-space-md);
  flex-wrap: wrap;
}
.almanac-jump-map__eyebrow {
  font-family: var(--almanac-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--almanac-fg-tertiary);
  margin: 0;
}
.almanac-jump-map__spy {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--almanac-font-sans);
  font-size: 12px;
  color: var(--almanac-fg-tertiary);
}
.almanac-jump-map__bar {
  display: inline-block;
  width: 120px; height: 4px;
  background: var(--almanac-bg-mist);
  border-radius: 9999px;
  overflow: hidden;
}
.almanac-jump-map__bar-fill {
  display: block;
  height: 100%;
  background: var(--almanac-yellow);
  transition: width var(--almanac-duration-lg) var(--almanac-ease);
}
.almanac-jump-map__track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.almanac-jump-map__chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px;
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--almanac-fg-primary);
  font-family: var(--almanac-font-sans);
  transition: background var(--almanac-duration) var(--almanac-ease),
              border-color var(--almanac-duration) var(--almanac-ease);
}
.almanac-jump-map__chip:hover {
  background: var(--almanac-bg-cream);
  border-color: var(--almanac-border-strong);
}
.almanac-jump-map__chip.is-active {
  border-color: var(--almanac-yellow-deep);
  background: var(--almanac-yellow-soft);
}
.almanac-jump-map__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--almanac-yellow);
  font-family: var(--almanac-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--almanac-on-yellow);
  flex-shrink: 0;
}
.almanac-jump-map__chip-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.almanac-jump-map__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--almanac-fg-primary);
}
.almanac-jump-map__sub {
  font-size: 11px;
  color: var(--almanac-fg-tertiary);
  line-height: 1.4;
}
/* Scroll-progress dots — the mobile cousin of the desktop "N of M" bar.
   Hidden on desktop (the .almanac-jump-map__bar carries progress there). */
.almanac-jump-map__dots { display: none; }
.almanac-jump-map__dots i {
  width: 18px; height: 3px;
  background: var(--almanac-bg-mist);
  border-radius: 9999px;
  display: block;
  transition: background var(--almanac-duration) var(--almanac-ease);
}
.almanac-jump-map__dots i.is-active { background: var(--almanac-yellow); }

/* Mobile · Variant D · grid → horizontal scroll rail, hero → 3:2 */
@media (max-width: 1023px) {
  .almanac-post-header--jump-map .almanac-post-header__grid--guide {
    grid-template-columns: 1fr;
    gap: var(--almanac-space-md);
  }
  .almanac-post-header--jump-map .almanac-post-header__hero--portrait img { aspect-ratio: 3 / 2; }
  .almanac-jump-map__track {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }
  .almanac-jump-map__chip { flex: 0 0 220px; scroll-snap-align: start; }
  .almanac-jump-map__dots {
    display: flex; gap: 6px; justify-content: center;
    margin-top: 10px;
  }
}

/* Dark-mode adjustments (auto-honoured via existing --almanac-* dark tokens) */
[data-almanac-theme="dark"] .almanac-trust-band {
  background: var(--almanac-yellow);          /* yellow stays brand-pure */
  color: #1A1612;                              /* AA on yellow even in dark */
}
[data-almanac-theme="dark"] .almanac-jump-map__chip.is-active {
  background: color-mix(in srgb, var(--almanac-yellow) 22%, var(--almanac-bg-canvas));
}

/* ============================================================================
   9z · EDITORIAL-DENSITY RETROFIT — maximise screen space, tight vertical rhythm
   ============================================================================
   Shared atoms layered on top of all four variants. The reference (a dense
   magazine mobile lede) packs eyebrow → headline → standfirst → byline → actions
   → media → caption into the least honest vertical space. We adopt that density
   and its two structural tells — the "/" headline·standfirst lockup and the
   one-row action rail — in the brand's warm palette/fonts (no purple, no follow
   pills). Each variant keeps its signature widget; only the loose whitespace is gone.
   ============================================================================ */

/* -- The lockup: standfirst leads with a hand-drawn arrow that points into the
   summary (replaces the "/" borrowed from editorial layouts — a different motif). -- */
.almanac-post-header__dek--slash .wp-block-post-excerpt__excerpt::before,
.almanac-post-header__dek--slash > p:first-child::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 0.82em;
  margin-right: 0.3em;
  vertical-align: 0.02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22' fill='none' stroke='%23785F30' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11.4C9 10.8 18 11.2 27 10.8'/%3E%3Cpath d='M20.5 5C23.5 7.6 26 9.6 27.6 10.9 25.8 12.4 23.2 14.6 20.2 17.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
[data-almanac-theme="dark"] .almanac-post-header__dek--slash .wp-block-post-excerpt__excerpt::before,
[data-almanac-theme="dark"] .almanac-post-header__dek--slash > p:first-child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22' fill='none' stroke='%23D6B883' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11.4C9 10.8 18 11.2 27 10.8'/%3E%3Cpath d='M20.5 5C23.5 7.6 26 9.6 27.6 10.9 25.8 12.4 23.2 14.6 20.2 17.4'/%3E%3C/svg%3E");
}

/* -- One-row action rail (copy · share · comments) ----------------------------
   Sits flush under the byline. Circular icon buttons echo the header avatar
   chrome; the comments count reads as quiet text. -------------------------- */
.almanac-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.almanac-post-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Hand-drawn sketched ring (replaces the clean 1px circle). */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%231a1612' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M26 4C36 3 44 13 43 24 42 35 31 45 20 43 10 41 4 30 7 19 9 11 17 5 27 4'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  color: var(--almanac-fg-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--almanac-duration) var(--almanac-ease),
              transform var(--almanac-duration) var(--almanac-ease);
}
[data-almanac-theme="dark"] .almanac-post-actions__btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%23E7E0D2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M26 4C36 3 44 13 43 24 42 35 31 45 20 43 10 41 4 30 7 19 9 11 17 5 27 4'/%3E%3C/svg%3E");
}
.almanac-post-actions__btn:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%23E5BC00' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M26 4C36 3 44 13 43 24 42 35 31 45 20 43 10 41 4 30 7 19 9 11 17 5 27 4'/%3E%3C/svg%3E");
  color: var(--almanac-fg-primary);
  transform: rotate(-4deg);
}
.almanac-post-actions__btn:focus-visible {
  outline: 3px solid var(--almanac-yellow);
  outline-offset: 2px;
}
.almanac-post-actions__divider {
  width: 1px;
  height: 22px;
  background: var(--almanac-border);
  margin: 0 2px;
}
.almanac-post-actions__comments {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--almanac-fg-secondary);
  text-decoration: none;
}
.almanac-post-actions__comments strong { color: var(--almanac-fg-primary); }
.almanac-post-actions__comments:hover { color: var(--almanac-fg-primary); text-decoration: underline; }

/* Centered variant (Trust Band) centers its rail too. */
.almanac-post-header--trust-band .almanac-post-actions { justify-content: center; }

/* -- Mono-italic featured-image caption ("… Image: Dell") -------------------- */
.almanac-post-figcaption {
  font-family: var(--almanac-font-mono);
  font-style: italic;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--almanac-fg-tertiary);
  margin: 8px 0 0;
}
.almanac-post-figcaption__credit {
  font-style: normal;
  color: var(--almanac-fg-quaternary);
}
/* Links inside the caption (e.g. Ghost's Unsplash "Photo by … on Unsplash"
   attribution) read as quiet, underlined credits. */
.almanac-post-figcaption a {
  color: var(--almanac-fg-secondary);
  text-decoration: underline;
  text-decoration-color: var(--almanac-tan);
  text-underline-offset: 2px;
}
.almanac-post-figcaption a:hover { color: var(--almanac-fg-primary); }
/* Trust Band: caption tracks the centered cinematic hero. */
.almanac-post-header--trust-band .almanac-post-figcaption { text-align: center; }

/* -- Page header (page.html) — same tight headline rhythm ------------------- */
.almanac-page__title {
  font-family: var(--almanac-font-display);
  font-size: clamp(2rem, 4vw, 2.875rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 var(--almanac-space-md);
}

/* -- Mobile: the rail and lockup stay tight; never let actions wrap loosely -- */
@media (max-width: 640px) {
  .almanac-post-actions { gap: 8px; margin-top: 1.125rem; }
  .almanac-post-actions__btn { width: 36px; height: 36px; }
}

/* ============================================================================
   10 · MOBILE NAV + SITEWIDE GUTTER
   ============================================================================ */

/* Hamburger — hidden on desktop, shown on mobile next to search/theme. Matches
   the search/theme toggle chrome. */
.almanac-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--almanac-radius-md);
  color: var(--almanac-fg-primary);
  cursor: pointer;
  transition: background var(--almanac-duration) var(--almanac-ease),
              border-color var(--almanac-duration) var(--almanac-ease);
}
.almanac-menu-toggle:hover { background: var(--almanac-bg-cream); border-color: var(--almanac-border); }

@media (max-width: 900px) {
  .almanac-menu-toggle { display: inline-flex; }
  /* Open state: the primary nav drops down full-width below the sticky header */
  .almanac-site-header.is-menu-open .almanac-site-header__nav {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--almanac-bg-paper);
    border-bottom: 1px solid var(--almanac-border);
    box-shadow: var(--almanac-shadow-soft);
    padding: 6px 16px 10px;
  }
  .almanac-site-header.is-menu-open .almanac-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .almanac-site-header.is-menu-open .almanac-nav a {
    display: block;
    padding: 13px 2px;
    border-bottom: 1px solid var(--almanac-border);
  }
  .almanac-site-header.is-menu-open .almanac-nav li:last-child a { border-bottom: 0; }
}

/* ============================================================================
   11 · SPACING SYSTEM — one sitewide side gutter (editorial: 20px mobile -> 40px)
   ============================================================================
   A single responsive gutter lives on the outermost wrapper of every page type
   plus the header and footer; inner content blocks never re-pad horizontally,
   so the whole site aligns to one column. theme.json root padding carries this
   same clamp for the has-global-padding wrappers (home/archive/category/...);
   the rules below cover the wrappers that pad themselves. */
:root { --almanac-gutter: clamp(1.25rem, 4vw, 2.5rem); }
.almanac-main        { padding-inline: var(--almanac-gutter); }
.almanac-site-header { padding-inline: var(--almanac-gutter) !important; }
.almanac-site-footer { padding-inline: var(--almanac-gutter) !important; }
.almanac-post-header__inner,
.almanac-post__body  { padding-inline: 0 !important; }

/* Header -> content: drop WordPress's root block-gap so every page starts tight
   under the sticky bar; each page's own top padding then sets the space. */
.wp-site-blocks > main { margin-block-start: 0 !important; }

/* Body reading cadence — editorial grouped rhythm in scale steps: paragraphs sit
   24px apart, clear air before a heading, tight after it (heading hugs its
   section). All values land on the spacing scale. */
.almanac-post__content > *      { margin-block-start: 1.5rem; }   /* 24px between blocks */
.almanac-post__content > p + p  { margin-block-start: 1.5rem; }   /* 24px paragraph rhythm */
.almanac-post__content h2       { margin-block-start: 2.5rem; }   /* 40px before a section */
.almanac-post__content h3       { margin-block-start: 2rem; }     /* 32px before a sub-section */
.almanac-post__content h4       { margin-block-start: 1.5rem; }   /* 24px */
.almanac-post__content > h2 + *,
.almanac-post__content > h3 + *,
.almanac-post__content > h4 + * { margin-block-start: 0.75rem; }  /* 12px: heading hugs body */

/* Cards (home/archive/category) — internal atoms on the scale; grid view gets
   a touch more separation between stories. */
.almanac-card__body { gap: var(--almanac-space-xs); }            /* 8px eyebrow/title/excerpt */
.almanac-view-grid .almanac-cards { gap: var(--almanac-space-lg); } /* 24px between grid stories */

/* Mobile vertical tightening (the side gutter is handled sitewide above). */
@media (max-width: 767px) {
  .almanac-post__body { padding-top: var(--almanac-space-xs) !important; margin-block-start: var(--almanac-space-sm) !important; }
  .almanac-site-header { padding-block: 0.375rem !important; }
  .almanac-site-header > * { margin-block: 0 !important; }
  /* Archive-type pages: one consistent top/bottom rhythm on mobile. Single
     posts (.almanac-main) are excluded — their post-header owns the top space. */
  .wp-site-blocks > main:not(.almanac-main) {
    padding-block: var(--almanac-space-lg) var(--almanac-space-xl) !important;
  }
  /* Pull the header up under the nav bar; the gap below the bar matches the
     eyebrow->title gap (8px). Drop the header's bottom rule so no line sits
     under the featured image. */
  .almanac-post-header { padding-top: 1.125rem !important; padding-bottom: var(--almanac-space-sm) !important; border-bottom: 0 !important; }
  /* Tighten the Jump Map: less air above the rail and into the body below */
  .almanac-jump-map { margin-top: 14px; padding-top: 14px; }
  .almanac-jump-map__head { margin-bottom: 10px; }
}

/* ============================================================================
   12 · JUMP-TO-SECTION DROPDOWN (guides) — general-purpose collapsed TOC
   ============================================================================
   Replaces the old step-by-step chip rail. A single collapsed bar that opens to
   reveal every section at once in a responsive grid. Native <details> toggle. */
.almanac-jump {
  margin-top: 0;
  margin-bottom: 0.875rem;
  border: 1px solid var(--almanac-border);
  border-radius: 12px;
  background: var(--almanac-bg-canvas);
  overflow: hidden;
}
.almanac-jump__summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px;
  cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none;
}
.almanac-jump__summary::-webkit-details-marker { display: none; }
.almanac-jump__summary:hover { background: var(--almanac-bg-cream); }
.almanac-jump__lead { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.almanac-jump__icon { color: var(--almanac-yellow-deep); flex: none; }
.almanac-jump__label { font-family: var(--almanac-font-sans); font-weight: 700; font-size: 0.9375rem; color: var(--almanac-fg-primary); }
.almanac-jump__meta { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.almanac-jump__count {
  font-family: var(--almanac-font-sans);
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--almanac-tan-deep);
  background: var(--almanac-yellow-soft);
  padding: 3px 9px; border-radius: 9999px;
}
.almanac-jump__chevron { color: var(--almanac-fg-tertiary); flex: none; transition: transform var(--almanac-duration) var(--almanac-ease); }
.almanac-jump[open] .almanac-jump__chevron { transform: rotate(180deg); }
.almanac-jump__grid {
  list-style: none; margin: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--almanac-border);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px;
  counter-reset: almjump;
}
.almanac-jump__grid li { margin: 0; }
.almanac-jump__link {
  counter-increment: almjump;
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 10px; border-radius: 8px;
  font-family: var(--almanac-font-sans); font-size: 0.875rem; line-height: 1.35;
  color: var(--almanac-fg-secondary); text-decoration: none;
  transition: background var(--almanac-duration) var(--almanac-ease), color var(--almanac-duration) var(--almanac-ease);
}
/* Numbered sections — a quick-scannable 1..N rail of mono numerals. */
.almanac-jump__link::before {
  content: counter(almjump);
  flex: none;
  font-family: var(--almanac-font-mono);
  font-size: 0.75rem; font-weight: 600;
  color: var(--almanac-yellow-deep);
  min-width: 1.1em; text-align: right;
}
.almanac-jump__link:hover { background: var(--almanac-yellow-soft); color: var(--almanac-fg-primary); }
.almanac-jump__link:hover::before { color: var(--almanac-tan-deep); }
@media (min-width: 700px) {
  .almanac-jump__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Guides show the header "Jump to section" dropdown, so the body TOC sidebar +
   its mobile toggle are redundant on phones/tablets — hide them there. The
   sticky sidebar TOC still appears on desktop (>=1024px). */
@media (max-width: 1023px) {
  .almanac-type-guide  .almanac-post__toc-col,
  .almanac-type-how-to .almanac-post__toc-col,
  .almanac-type-guide  .almanac-toc__toggle,
  .almanac-type-how-to .almanac-toc__toggle { display: none !important; }
  /* The toc-col is hidden above, but grid-template-areas still reserves its row
     + the 2rem row-gap, leaving dead space under the jump bar. Drop the toc row
     so content sits tight beneath the jump. */
  .almanac-type-guide  .almanac-post__grid,
  .almanac-type-how-to .almanac-post__grid {
    grid-template-areas: "main" "aside" !important;
  }
}

/* Desktop uses the sticky sidebar TOC; hide the header jump dropdown there so
   the two don't both show (mobile = jump dropdown, desktop = sidebar). */
@media (min-width: 1024px) {
  .almanac-jump { display: none; }
}

/* Right rail is NON-sticky: Mediavine attaches its own sticky sidebar ad unit
   here and needs to own the scroll behaviour, so the column must scroll with the
   page rather than position:sticky. (The left TOC rail keeps its own stickiness.) */
@media (min-width: 1024px) {
  .almanac-post__aside,
  .almanac-news__rail {
    position: static !important;
    top: auto !important;
  }
}
/* Mediavine sticky-sidebar mount — the direct-child <span> of the right rail that
   Mediavine targets (aside[data-sidebar-right] > span) and appends its ad to.
   Block so it wraps the sidebar widgets without breaking flow. Never trap the ad
   with overflow/fixed height. */
.almanac-post__aside-mount { display: block; min-width: 0; }

/* ============================================================================
   13 · MOBILE LIST ROWS — compact image-left layout (fit more posts on screen)
   ============================================================================
   The base stacks the card to a full-width image-on-top at <=640px; instead keep
   the desktop list shape (small thumbnail left, title + meta right) so several
   stories fit per screen. */
@media (max-width: 640px) {
  .almanac-cards .almanac-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding-block: 14px;
  }
  .almanac-cards .almanac-card__media { flex: 0 0 104px; }
  .almanac-cards .almanac-card__media img {
    aspect-ratio: 4 / 3;
    max-height: none;
    border-radius: var(--almanac-radius-md);
  }
  .almanac-cards .almanac-card__body { gap: 4px; min-width: 0; }
  .almanac-cards .almanac-card__cat { font-size: 0.6875rem; }
  .almanac-cards .almanac-card__title a { font-size: 0.9375rem; line-height: 1.3; }
  /* Drop the excerpt on phones — the compact row is title + category + date. */
  .almanac-cards .almanac-card__excerpt { display: none; }
}

/* The card body is a flex item next to the thumbnail; WordPress's block-gap was
   adding a 24px margin-top, pushing the text 24px below the image (misaligned
   rows). Zero it so title/category align to the top of the thumbnail. */
.almanac-cards .almanac-card__body { margin-block: 0; }

/* ============================================================================
   14 · Feedback favicon, on-brand copy states, full-width toast, freshness line
   ============================================================================ */
/* Feedback widget now uses the site favicon in place of the mascot. */
.almanac-feedback__icon { width: 34px; height: 34px; border-radius: 8px; flex: none; }

/* "Copied" confirmation — on-brand dark chip, not the off-palette green. */
.almanac-codes-copy.is-copied,
.almanac-copy-btn.is-copied {
  background: var(--almanac-fg-primary) !important;
  color: var(--almanac-bg-paper) !important;
  border-color: var(--almanac-fg-primary) !important;
}

/* Copy toast: a full content-width bar on mobile instead of a fat floating pill. */
@media (max-width: 640px) {
  .almanac-toast {
    left: 16px; right: 16px;
    transform: translateY(10px);
    border-radius: 12px;
    justify-content: flex-start;
  }
  .almanac-toast.is-visible { transform: translateY(0); }
}

/* On codes posts the freshness line ("Verified live · Updated … · checked …")
   already carries the date, so drop the duplicate date from the byline. */
.almanac-type-codes .almanac-post-header__date { display: none; }

/* ============================================================================
   15 · Keep-reading (related) flat rows + energetic recently-updated rail
   ============================================================================ */
/* Keep-reading — same flat image-left treatment as the listing cards. */
.almanac-related__list { grid-template-columns: 1fr !important; gap: 0 !important; }
@media (min-width: 700px) {
  .almanac-related__list { grid-template-columns: 1fr 1fr !important; column-gap: var(--almanac-space-xl) !important; }
}
.almanac-related__link {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--almanac-border);
}
.almanac-related__thumb {
  flex: 0 0 104px !important;
  aspect-ratio: 4 / 3 !important;
  border: 0 !important;
  border-radius: var(--almanac-radius-md) !important;
}
.almanac-related__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.almanac-related__headline { -webkit-line-clamp: 2 !important; font-size: 0.9375rem !important; }
.almanac-related__meta { font-family: var(--almanac-font-sans) !important; }

/* Recently-updated rail — drop the box, sit flush to the gutter, and give each
   row an energetic yellow time-chip. */
.almanac-updated-rail {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.almanac-updated-rail__list { grid-template-columns: 1fr !important; gap: 0 !important; }
@media (min-width: 700px) {
  .almanac-updated-rail__list { grid-template-columns: 1fr 1fr !important; column-gap: var(--almanac-space-xl) !important; }
}
.almanac-updated-rail__link {
  align-items: flex-start !important;   /* top-align: the time chip sits with the headline's first line */
  gap: 12px !important;
  padding: 12px 0 !important;
  background: transparent !important;   /* §21b base painted a white card here */
  border: 0 !important;
  border-bottom: 1px solid var(--almanac-border) !important;   /* hairline divider only */
  border-radius: 0 !important;
  transform: none !important;           /* drop the §21b translateY lift */
}
.almanac-updated-rail__link:hover { background: transparent !important; transform: none !important; }
.almanac-updated-rail__link:hover .almanac-updated-rail__headline {
  text-decoration: underline; text-decoration-color: var(--almanac-yellow);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.almanac-updated-rail__when {
  flex: 0 0 auto !important;
  margin-top: 1px !important;           /* optically center the chip against the headline cap-height */
  padding: 4px 9px !important;
  background: var(--almanac-yellow) !important;
  color: var(--almanac-on-yellow) !important;
  border-radius: 9999px !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  font-variant-numeric: tabular-nums;   /* keep "8m"/"15m"/"37m" the same width so headlines don't jitter */
}
/* Copy stack — a touch more air between headline and the category eyebrow. */
.almanac-updated-rail__link .almanac-updated-rail__copy { gap: 4px !important; }
/* Category reads as a brand eyebrow (matches the listing-card kicker), not a
   stray gray run of text — that bare label was the "unfinished" tell. */
.almanac-updated-rail__cat {
  font-family: var(--almanac-font-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--almanac-tan-deep) !important;
}
/* Close the module cleanly — no hairline dangling under the final row. */
.almanac-updated-rail__item:last-child .almanac-updated-rail__link { border-bottom: 0 !important; }
@media (min-width: 700px) {
  .almanac-updated-rail__item:nth-last-child(2) .almanac-updated-rail__link { border-bottom: 0 !important; }
}

/* Author name sits clean — no underline/marker flourish (it was drawing
   unwanted attention to the byline). */

/* Hand-drawn ring around the verified check — a "hand-stamped" approval mark. */
.almanac-verify__badge { position: relative; overflow: visible; }
.almanac-verify__badge::after {
  content: "";
  position: absolute; inset: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%231e9d52' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M24 4C34 3 41 13 40 23 39 33 28 41 18 39 9 37 3 27 6 17 8 9 16 5 25 4'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* ===========================================================================
   PREFERRED SOURCE ON GOOGLE — multi-placement CTAs (bar · card · footer · home)
   Brand-warm, hand-drawn star, CWV-safe (static inline SVG, tiny inline JS for
   the dismissible bar). Different copy in each spot; one shared link.
   =========================================================================== */

/* -- Slim, dismissible bar pinned to the bottom-CENTRE of the viewport.
   Emitted hidden on single posts; bindPrefBar reveals it after scroll and adds
   .is-hidden whenever the in-content / end-of-article CTA (or footer) is on
   screen. Centred + max-width so it never overlaps the content column. Surface
   (subtle paper vs standout yellow) is set by the per-placement modifier. -- */
.almanac-prefbar {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 2.5vw, 1.5rem);
  transform: translateX(-50%);
  z-index: 90;
  width: min(680px, calc(100vw - 1.5rem));
  border-radius: var(--almanac-radius-pill);
  box-shadow: var(--almanac-shadow-lift);
  font-family: var(--almanac-font-sans);
  transition: opacity var(--almanac-duration-lg) var(--almanac-ease), transform var(--almanac-duration-lg) var(--almanac-ease);
}
.almanac-prefbar[hidden] { display: none; }
/* Animated out-state — kept in the DOM (display:none would break the observer). */
.almanac-prefbar.is-hidden { opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none; }

/* Surfaces */
.almanac-prefbar.almanac-prefsrc--standout {
  background: var(--almanac-yellow);
  color: var(--almanac-on-yellow);
  border: 2px solid var(--almanac-on-yellow);
}
.almanac-prefbar.almanac-prefsrc--subtle {
  background: var(--almanac-bg-paper);
  color: var(--almanac-fg-primary);
  border: 1px solid var(--almanac-border);
}

.almanac-prefbar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 16px;
  font-size: 0.875rem;
  line-height: 1.3;
}
.almanac-prefbar__star,
.almanac-prefbar__icon { flex: none; display: inline-flex; }
.almanac-prefbar__star svg { width: 20px; height: 20px; }
/* On the yellow (standout) field the star's yellow fill vanishes — recolour to ink. */
.almanac-prefbar.almanac-prefsrc--standout .almanac-prefbar__star svg { fill: var(--almanac-on-yellow); stroke: var(--almanac-on-yellow); }
.almanac-prefbar__text { min-width: 0; }
.almanac-prefbar__text strong { font-weight: 700; }
.almanac-prefbar__cta {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: var(--almanac-fg-primary);
  color: var(--almanac-bg-paper);
  border-radius: var(--almanac-radius-pill);
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--almanac-duration) var(--almanac-ease);
}
.almanac-prefbar.almanac-prefsrc--standout .almanac-prefbar__cta { background: #1A1612; color: #FBF8EF; }
.almanac-prefbar__cta:hover { transform: translateY(-1px); }
.almanac-prefbar__close {
  flex: none;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}
.almanac-prefbar__close:hover { opacity: 1; background: rgba(0,0,0,0.08); }
@media (max-width: 600px) {
  .almanac-prefbar { width: calc(100vw - 1.5rem); }
  .almanac-prefbar__inner { gap: 8px; padding: 7px 8px 7px 12px; }
  .almanac-prefbar__text { font-size: 0.8125rem; }
}
@media (prefers-reduced-motion: reduce) { .almanac-prefbar { transition: none; } }

/* -- End-of-article standout card -- */
.almanac-prefsrc-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin: 2rem 0 0;
  padding: 20px 22px;
  background: var(--almanac-bg-paper);
  border: 3px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90' fill='none' stroke='%23E5BC00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4C40 2 54 6 76 4 85 4 86 6 86 15 88 39 84 54 86 75 86 85 84 86 75 86 51 88 36 84 14 86 5 86 4 84 4 75 2 51 6 36 4 14 4 6 6 4 16 4Z'/%3E%3C/svg%3E") 18 / 3.2px round;
  border-radius: 8px;
}
.almanac-prefsrc-card__star { flex: none; }
.almanac-prefsrc-card__star svg { width: 34px; height: 34px; margin-top: 2px; }
.almanac-prefsrc-card__body { min-width: 0; }
.almanac-prefsrc-card__title {
  margin: 0 0 4px;
  font-family: var(--almanac-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--almanac-fg-primary);
}
.almanac-prefsrc-card__text {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--almanac-fg-secondary);
}
.almanac-prefsrc-card__cta,
.almanac-prefsrc-home__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: var(--almanac-fg-primary);
  color: var(--almanac-bg-paper);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background var(--almanac-duration) var(--almanac-ease), transform var(--almanac-duration) var(--almanac-ease);
}
.almanac-prefsrc-card__cta:hover,
.almanac-prefsrc-home__cta:hover { background: var(--almanac-yellow-deep); color: var(--almanac-on-yellow); transform: translateY(-1px); }

/* -- Homepage band -- */
.almanac-prefsrc-home {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 18px 22px;
  background: var(--almanac-yellow-soft);
  border: 3px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90' fill='none' stroke='%23E5BC00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4C40 2 54 6 76 4 85 4 86 6 86 15 88 39 84 54 86 75 86 85 84 86 75 86 51 88 36 84 14 86 5 86 4 84 4 75 2 51 6 36 4 14 4 6 6 4 16 4Z'/%3E%3C/svg%3E") 18 / 3.2px round;
  border-radius: 8px;
}
.almanac-prefsrc-home__star { flex: none; }
.almanac-prefsrc-home__star svg { width: 32px; height: 32px; display: block; }
.almanac-prefsrc-home__text { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1rem; line-height: 1.5; color: var(--almanac-fg-primary); }
.almanac-prefsrc-home__cta { flex: none; }
@media (max-width: 640px) {
  .almanac-prefsrc-home { flex-wrap: wrap; gap: 12px; }
  .almanac-prefsrc-home__cta { width: 100%; justify-content: center; }
}

/* -- In-content CTA (mid-article, highest-attention) -------------------------
   Lives inside .almanac-post__content, so selectors are content-scoped to win
   over prose link/heading styling. */
.almanac-post__content .almanac-prefsrc-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 15px;
  margin: 2rem 0;
  padding: 18px 20px;
  background: var(--almanac-bg-cream);
  border: 3px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90' fill='none' stroke='%23E5BC00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4C40 2 54 6 76 4 85 4 86 6 86 15 88 39 84 54 86 75 86 85 84 86 75 86 51 88 36 84 14 86 5 86 4 84 4 75 2 51 6 36 4 14 4 6 6 4 16 4Z'/%3E%3C/svg%3E") 18 / 3.2px round;
  border-radius: 8px;
}
.almanac-post__content .almanac-prefsrc-inline__star { flex: none; }
.almanac-post__content .almanac-prefsrc-inline__star svg { width: 30px; height: 30px; margin-top: 2px; display: block; }
.almanac-post__content .almanac-prefsrc-inline__body { min-width: 0; }
.almanac-post__content .almanac-prefsrc-inline__title {
  margin: 0 0 5px;
  font-family: var(--almanac-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--almanac-fg-primary);
}
.almanac-post__content .almanac-prefsrc-inline__text {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--almanac-fg-primary);
}
.almanac-post__content .almanac-prefsrc-inline__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: var(--almanac-fg-primary);
  color: var(--almanac-bg-paper);
  border: 0;
  border-radius: 999px;
  font-family: var(--almanac-font-sans);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  background-image: none;
  transition: background var(--almanac-duration) var(--almanac-ease), transform var(--almanac-duration) var(--almanac-ease);
}
.almanac-post__content .almanac-prefsrc-inline__cta:hover {
  background: var(--almanac-yellow-deep);
  color: var(--almanac-fg-primary);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .almanac-post__content .almanac-prefsrc-inline { gap: 12px; padding: 16px; }
  .almanac-post__content .almanac-prefsrc-inline__cta { width: 100%; justify-content: center; }
}
/* The CTA already says "→"; suppress the auto external-link glyph almanac.js
   appends to in-content external links so it doesn't read "→ ↗". */
.almanac-post__content .almanac-prefsrc-inline__cta .almanac-ext-icon { display: none; }


/* ============================================================================
   Sidebar preferred-source card — BOLD, stand-out: a solid brand-yellow surface
   that pops against the paper (and warm-dark) sidebar. Replaces the sidebar
   newsletter widget. Dark ink throughout (on-yellow), ink-recoloured star, and
   a solid dark CTA for contrast on the yellow field.
   ============================================================================ */
.almanac-prefsrc-sidebar {
  background: var(--almanac-yellow);
  border: 2px solid var(--almanac-on-yellow);
  border-radius: var(--almanac-radius-lg);
  padding: var(--almanac-space-lg);
  box-shadow: var(--almanac-shadow-card);
}
.almanac-prefsrc-sidebar__star { display: inline-flex; }
/* On the yellow field the star's yellow fill would vanish — recolour to ink. */
.almanac-prefsrc-sidebar__star svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: var(--almanac-on-yellow);
  stroke: var(--almanac-on-yellow);
}
.almanac-prefsrc-sidebar__title {
  font-family: var(--almanac-font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--almanac-on-yellow);
  margin: var(--almanac-space-xs) 0 var(--almanac-space-2xs);
}
.almanac-prefsrc-sidebar__text {
  font-family: var(--almanac-font-sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--almanac-on-yellow);
  margin: 0 0 var(--almanac-space-md);
}
.almanac-prefsrc-sidebar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.6875rem 1rem;
  /* Fixed ink/paper — the card is always yellow, so this stays dark-on-yellow
     in both colour schemes. */
  background: #1A1612;
  color: #FBF8EF;
  border-radius: var(--almanac-radius-md);
  font-family: var(--almanac-font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: transform var(--almanac-duration) var(--almanac-ease), background var(--almanac-duration) var(--almanac-ease);
}
.almanac-prefsrc-sidebar__cta:hover { transform: translateY(-1px); background: #000; }
.almanac-prefsrc-sidebar__cta .almanac-ext-icon { display: none; }
@media (prefers-reduced-motion: reduce) { .almanac-prefsrc-sidebar__cta { transition: none; } }


/* ============================================================================
   Grotesque typography set (Settings → Reading → Headline typeface).
   Re-points the display token to a geometric grotesque for tighter, more
   utilitarian headlines (a denser, news-style alternative to the warm serif).
   Body stays Inter; serif/mono unchanged. The webfont loads only when selected.
   ============================================================================ */
.almanac-fonts-grotesk {
  --almanac-font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
}
/* Space Grotesk sets wide — nudge display headings tighter to hold the density. */
.almanac-fonts-grotesk h1,
.almanac-fonts-grotesk h2,
.almanac-fonts-grotesk h3,
.almanac-fonts-grotesk .almanac-post-header__title,
.almanac-fonts-grotesk .wp-block-post-title,
.almanac-fonts-grotesk .wp-block-query-title {
  letter-spacing: -0.03em;
}

/* Poly set — a classic transitional serif. It ships a single 400 weight, so
   headings use 400 (faux-bold looks broken) and lean on size for hierarchy;
   near-zero tracking suits the serif. The italic run-in dek picks up Poly's
   true italic. */
.almanac-fonts-poly {
  --almanac-font-display: "Poly", "Newsreader", Georgia, serif;
}
.almanac-fonts-poly h1,
.almanac-fonts-poly h2,
.almanac-fonts-poly h3,
.almanac-fonts-poly h4,
.almanac-fonts-poly .almanac-post-header__title,
.almanac-fonts-poly .wp-block-post-title,
.almanac-fonts-poly .wp-block-query-title,
.almanac-fonts-poly .wp-block-heading {
  font-weight: 400;          /* Poly has no bold weight */
  letter-spacing: -0.005em;
}

/* Google Sans set — a geometric sans. Use a bold display weight and slightly
   tight tracking, which geometric letterforms carry well at large sizes. */
.almanac-fonts-google-sans {
  /* "Google Sans Fallback" is the metric-matched fallback (see almanac.css §0) so
     the H1/H2 headings do not re-flow when Google Sans swaps in — the main source
     of the article header's layout shift. */
  --almanac-font-display: "Google Sans", "Google Sans Fallback", "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
}
.almanac-fonts-google-sans h1,
.almanac-fonts-google-sans h2,
.almanac-fonts-google-sans h3,
.almanac-fonts-google-sans .almanac-post-header__title,
.almanac-fonts-google-sans .wp-block-post-title,
.almanac-fonts-google-sans .wp-block-query-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Sans headline sets: run the standfirst in the same sans family as the title
   (not the serif run-in) so the headline/standfirst lockup reads as one face. */
.almanac-fonts-grotesk .almanac-post-header__dek-runin,
.almanac-fonts-google-sans .almanac-post-header__dek-runin {
  font-family: var(--almanac-font-display);
}


/* ============================================================================
   Preferred-source PER-PLACEMENT surfaces (Appearance → Almanac Options).
   Each placement carries an `almanac-prefsrc--{subtle|standout}` modifier:
     • subtle   — the placement's own quiet card (paper surface) — the base style.
     • standout — repaint the card with the bold brand-yellow surface.
   The card-like placements (in-content, end-of-article, homepage band) default
   subtle, so only the standout repaint needs declaring here. The sidebar/footer
   card defaults to the bold surface, so its SUBTLE override lives further below.
   ============================================================================ */
:is(.almanac-prefsrc-inline, .almanac-prefsrc-card, .almanac-prefsrc-home, .almanac-prefsrc-leftrail).almanac-prefsrc--standout {
  background: var(--almanac-yellow) !important;
  border: 2px solid var(--almanac-on-yellow) !important;
  border-image: none !important;
  border-radius: var(--almanac-radius-lg) !important;
  box-shadow: var(--almanac-shadow-card) !important;
}
:is(.almanac-prefsrc-inline, .almanac-prefsrc-card, .almanac-prefsrc-home, .almanac-prefsrc-leftrail).almanac-prefsrc--standout :is([class$="__title"], [class$="__text"]),
:is(.almanac-prefsrc-inline, .almanac-prefsrc-card, .almanac-prefsrc-home, .almanac-prefsrc-leftrail).almanac-prefsrc--standout [class$="__text"] strong {
  color: var(--almanac-on-yellow) !important;
}
:is(.almanac-prefsrc-inline, .almanac-prefsrc-card, .almanac-prefsrc-home, .almanac-prefsrc-leftrail).almanac-prefsrc--standout [class$="__star"] svg {
  fill: var(--almanac-on-yellow) !important;
  stroke: var(--almanac-on-yellow) !important;
}
:is(.almanac-prefsrc-inline, .almanac-prefsrc-card, .almanac-prefsrc-home, .almanac-prefsrc-leftrail).almanac-prefsrc--standout [class$="__cta"] {
  background: #1A1612 !important;
  color: #FBF8EF !important;
  border-color: #1A1612 !important;
}
:is(.almanac-prefsrc-inline, .almanac-prefsrc-card, .almanac-prefsrc-home, .almanac-prefsrc-leftrail).almanac-prefsrc--standout [class$="__cta"]:hover {
  background: #000 !important;
}

/* Sidebar/footer card SUBTLE override — drop the bold yellow for a quiet paper
   card matching the in-content style (the bold surface is its standout/default). */
.almanac-prefsrc-sidebar.almanac-prefsrc--subtle {
  background: var(--almanac-bg-paper) !important;
  border: 1px solid var(--almanac-border) !important;
  color: var(--almanac-fg-primary) !important;
}
.almanac-prefsrc-sidebar.almanac-prefsrc--subtle :is(.almanac-prefsrc-sidebar__title) { color: var(--almanac-fg-primary) !important; }
.almanac-prefsrc-sidebar.almanac-prefsrc--subtle :is(.almanac-prefsrc-sidebar__text) { color: var(--almanac-fg-secondary) !important; }
.almanac-prefsrc-sidebar.almanac-prefsrc--subtle .almanac-prefsrc-sidebar__star svg {
  fill: var(--almanac-yellow) !important;
  stroke: var(--almanac-on-yellow) !important;
}
.almanac-prefsrc-sidebar.almanac-prefsrc--subtle .almanac-prefsrc-sidebar__cta {
  background: var(--almanac-fg-primary) !important;
  color: var(--almanac-bg-paper) !important;
}


/* ============================================================================
   Left-rail preferred-source card — a compact card that floats in the left
   (TOC) rail on wide single posts (>=1400px, where that rail is its own column
   and is sticky). Hidden on narrower viewports (no left rail there). JS
   (bindPrefLeftrail) reveals it and re-hides it whenever another preferred-
   source box is on screen, so only one ever shows at a time. Default surface is
   the quiet "subtle" paper card; "standout" repaint is handled by the umbrella
   rule above.
   ============================================================================ */
.almanac-prefsrc-leftrail { display: none; }
@media (min-width: 1400px) {
  .almanac-prefsrc-leftrail {
    display: block;
    margin-top: var(--almanac-space-lg);
    padding: var(--almanac-space-md);
    background: var(--almanac-bg-paper);
    border: 1px solid var(--almanac-border);
    border-radius: var(--almanac-radius-lg);
    box-shadow: var(--almanac-shadow-card);
    transition: opacity var(--almanac-duration-lg) var(--almanac-ease), transform var(--almanac-duration-lg) var(--almanac-ease);
  }
  /* Auto-hidden state (another preferred-source box is on screen). */
  .almanac-prefsrc-leftrail.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
  }
}
.almanac-prefsrc-leftrail__star { display: inline-flex; }
.almanac-prefsrc-leftrail__star svg { width: 24px; height: 24px; display: block; }
.almanac-prefsrc-leftrail__title {
  font-family: var(--almanac-font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--almanac-fg-primary);
  margin: var(--almanac-space-2xs) 0 var(--almanac-space-2xs);
}
.almanac-prefsrc-leftrail__text {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--almanac-fg-secondary);
  margin: 0 0 var(--almanac-space-sm);
}
.almanac-prefsrc-leftrail__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.75rem;
  background: var(--almanac-fg-primary);
  color: var(--almanac-bg-paper);
  border-radius: var(--almanac-radius-md);
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
  transition: background var(--almanac-duration) var(--almanac-ease);
}
.almanac-prefsrc-leftrail__cta:hover { background: #000; }
.almanac-prefsrc-leftrail__cta .almanac-ext-icon { display: none; }
@media (prefers-reduced-motion: reduce) { .almanac-prefsrc-leftrail { transition: none; } }


/* ============================================================================
   Square corners (Settings → Reading → Corner style = Square).
   Zeroes the radius tokens AND every hardcoded border-radius site-wide — cards,
   buttons, inputs, pills, avatars, images/thumbnails — so corners are uniformly
   hard-edged. All-or-nothing; rounded is the default (no class, tokens as-is).
   ============================================================================ */
.almanac-corners-square {
  --almanac-radius-sm: 0; --almanac-radius-md: 0; --almanac-radius-lg: 0;
  --almanac-radius-xl: 0; --almanac-radius-2xl: 0; --almanac-radius-pill: 0;
}
.almanac-corners-square *,
.almanac-corners-square *::before,
.almanac-corners-square *::after {
  border-radius: 0 !important;
}


/* ============================================================================
   Text selection on yellow surfaces — the global gold ::selection highlight is
   invisible on a solid-yellow field, so flip to a dark highlight (light text)
   inside the bold standout preferred-source cards. (The Quick Answer card now
   uses a soft tint with theme-default ink, so the global highlight is fine and
   it's intentionally left out here.)
   The standout modifier is emitted only on the yellow surfaces, so it's the
   umbrella for every standout preferred-source placement (in-content, card,
   home, sidebar, footer, bar).
   ============================================================================ */
.almanac-prefsrc--standout::selection,
.almanac-prefsrc--standout ::selection {
  background: #1A1612;
  color: #FBF8EF;
}


/* ============================================================================
   Image frame — light-toned photos blend into the cream/dark canvas, so every
   image / thumbnail / avatar gets the same hairline the theme uses on tables
   (1px solid var(--almanac-border)). Matches table/details framing; radius is
   left to each element's own rule so circular avatars keep their ring.
   ============================================================================ */
.almanac-post__content img,
.almanac-post__content .kg-image-card img,
.almanac-post__content .kg-image,
.almanac-post-header__hero img,
.almanac-post-header__featured img,
.almanac-cat-rail__thumb img,
.almanac-card__media img,
.almanac-related__thumb img,
.wp-block-image img,
.wp-block-avatar img,
.wp-block-post-author__avatar img,
.almanac-author__avatar img,
.almanac-author-bio__avatar img,
.almanac-comment-avatar img {
  border: 1px solid var(--almanac-border) !important;
}

/* ============================================================================
   Wide-table expand — desktop affordance + full-width overlay (built in JS)
   ============================================================================ */
/* "Expand" button pinned to the table's top-right corner. Desktop only. */
.almanac-table-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  font-family: var(--almanac-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--almanac-fg-secondary);
  background: var(--almanac-bg-paper);
  border: 1px solid var(--almanac-border-strong);
  border-radius: var(--almanac-radius-pill);
  box-shadow: var(--almanac-shadow-card);
  cursor: pointer;
  transition: color var(--almanac-duration) var(--almanac-ease),
              background var(--almanac-duration) var(--almanac-ease),
              border-color var(--almanac-duration) var(--almanac-ease);
}
.almanac-table-expand svg { flex: none; }
.almanac-table-expand:hover {
  color: var(--almanac-on-yellow);
  background: var(--almanac-yellow);
  border-color: var(--almanac-yellow);
}
@media (min-width: 1024px) {
  .almanac-table-expand { display: inline-flex; }
}

/* Backdrop + centered box. Healthy top/bottom padding keeps the box off the
   viewport edges; the box is capped at the site's max content width. */
.almanac-table-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vh, 5rem) clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--almanac-fg-primary) 50%, transparent);
  opacity: 0;
  transition: opacity 0.18s var(--almanac-ease);
}
.almanac-table-overlay.is-open { opacity: 1; }
.almanac-table-overlay__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(82rem, 100%);
  max-height: 100%;
  background: var(--almanac-bg-paper);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-lg);
  box-shadow: var(--almanac-shadow-lift);
  overflow: hidden;
  transform: translateY(10px) scale(0.99);
  transition: transform 0.18s var(--almanac-ease);
}
.almanac-table-overlay.is-open .almanac-table-overlay__box { transform: none; }
.almanac-table-overlay__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--almanac-fg-secondary);
  background: var(--almanac-bg-paper);
  border: 1px solid var(--almanac-border-strong);
  border-radius: 50%;
  box-shadow: var(--almanac-shadow-card);
  cursor: pointer;
  transition: color var(--almanac-duration) var(--almanac-ease),
              background var(--almanac-duration) var(--almanac-ease),
              border-color var(--almanac-duration) var(--almanac-ease);
}
.almanac-table-overlay__close:hover {
  color: var(--almanac-on-yellow);
  background: var(--almanac-yellow);
  border-color: var(--almanac-yellow);
}
.almanac-table-overlay__scroll {
  overflow: auto;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  -webkit-overflow-scrolling: touch;
}
/* Lift the centered-layout reading-column cap inside the overlay so the cloned
   table fills the full box width. */
.almanac-table-overlay .almanac-post__content {
  max-width: none !important;
  margin: 0 !important;
}
.almanac-table-overlay__scroll table { width: 100%; margin: 0; }

/* ============================================================================
   News article — a single editorial reading column with a right rail on desktop.
   The rail is ALWAYS present (the [almanac_news_sidebar] shortcode emits
   aside[data-sidebar-right] > span) so Mediavine has its sticky-sidebar ad mount;
   it also shows the editorial widgets when "News sidebar" is left/right. The rail
   is NON-sticky so Mediavine owns the stick behaviour. Below 1024px (no Mediavine
   sidebar ad) the rail collapses and news is single column.
   ============================================================================ */
.almanac-news__rail { display: none; }

@media (min-width: 1024px) {
  .almanac-news {
    display: grid;
    max-width: 66rem;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) 20rem;   /* content | right rail */
    column-gap: clamp(1.75rem, 3vw, 2.75rem);
    align-items: start;
  }
  /* "Left" moves the whole rail (editorial widgets + ad) to the left. */
  body.almanac-news-sidebar-left .almanac-news { grid-template-columns: 20rem minmax(0, 1fr); }
  body.almanac-news-sidebar-left .almanac-news__rail { order: -1; }
  .almanac-news__main { min-width: 0; }
  .almanac-news__rail { display: block; margin-top: 0; }
}