/* ==========================================================================
   Almanac — frontend stylesheet
   Tokens · Layout · Typography · Components · Templates · Responsive
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. Metric-matched font fallbacks (CLS)
   The web fonts load asynchronously (display=swap), so text first paints in a
   fallback face and re-flows when the web font arrives — that re-flow is the
   article header's layout shift. These fallbacks are system fonts re-scaled (via
   size-adjust / ascent-override / descent-override) to occupy the exact same box
   as each web font, so the swap causes no movement. Overrides generated with
   Capsize from the actual bunny.net woff2 metrics. Keep paired with the matching
   token in `--almanac-font-*` below.
   ---------------------------------------------------------------------------- */
/* local() lists the metric-identical sans each platform actually ships: Arial
   (Windows/macOS), Arimo + Liberation Sans (Linux/ChromeOS/Android WebView),
   Roboto (Android — near-identical metrics). The size-adjust below is computed
   against Arial; the first four are metric-identical so it is exact, Roboto is a
   close approximation. Without these, `local('Arial')` silently fails to bind on
   non-Windows/Mac and the fallback is a no-op. */
@font-face {
  font-family: "Inter Fallback";
  src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans'), local('Roboto');
  font-display: swap;
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
  size-adjust: 107.1194%;
}
@font-face {
  font-family: "Google Sans Fallback";
  src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans'), local('Roboto');
  font-display: swap;
  ascent-override: 95.6986%;
  descent-override: 28.3331%;
  line-gap-override: 0%;
  size-adjust: 100.9419%;
}
@font-face {
  font-family: "Newsreader Fallback";
  src: local('Georgia');
  font-display: swap;
  ascent-override: 76.4676%;
  descent-override: 27.5699%;
  size-adjust: 96.1192%;
}
@font-face {
  font-family: "IBM Plex Mono Fallback";
  src: local('Courier New'), local('CourierNewPSMT');
  font-display: swap;
  ascent-override: 102.5167%;
  descent-override: 27.5045%;
  size-adjust: 99.9837%;
}

/* ----------------------------------------------------------------------------
   1. Design tokens (light)
   Warm-undertone palette anchored on the preserved brand yellow + tan.
   Semantic CSS variables on top of the theme.json palette presets.
   ---------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --almanac-bg-paper:    #FBF8EF;
  --almanac-bg-canvas:   #FFFFFF;
  --almanac-bg-cream:    #F5EFE0;
  --almanac-bg-mist:     #EBE3D2;
  --almanac-bg-overlay:  rgba(26, 22, 18, 0.55);

  /* Foreground */
  --almanac-fg-primary:   #1A1612;
  --almanac-fg-secondary: #4A3F35;
  --almanac-fg-tertiary:  #6B5F53;
  --almanac-fg-quaternary:#948775;
  --almanac-fg-inverted:  #FBF8EF;

  /* Borders */
  --almanac-border:        #EBE3D2;
  --almanac-border-strong: #D6CDB9;
  --almanac-border-faint:  #F5EFE0;

  /* Brand */
  --almanac-yellow:       #FFD700;
  --almanac-yellow-deep:  #E5BC00;
  --almanac-yellow-soft:  #FFF4C2;
  --almanac-yellow-glow:  #FFE74A;
  /* Fixed dark ink for text/glyphs on a solid yellow surface. NOT theme-flipped:
     yellow is the same #FFD700 in both modes, so the on-yellow ink must stay
     dark in both modes (near-white-on-gold fails WCAG). */
  --almanac-on-yellow:    #1A1612;
  --almanac-tan:          #B2935B;
  --almanac-tan-deep:     #785F30; /* darkened from #8E7444 to meet WCAG AA on paper + tan-soft */
  --almanac-tan-soft:     #EFE3CB;

  /* Semantic */
  --almanac-success:      #1E9D52;
  --almanac-success-soft: #DEF0E2;
  --almanac-warning:      #DD8B1E;
  --almanac-warning-soft: #FCEBC8;
  --almanac-danger:       #D14242;
  --almanac-danger-soft:  #FCDCDC;
  --almanac-info:         #3A78C8;
  --almanac-info-soft:    #D9E5F2;

  /* Type */
  --almanac-font-display: "Fraunces", "Newsreader", "Source Serif Pro", "Charter", "Georgia", serif;
  /* Brand default is Google Sans across the theme. The body sans, the serif accent
     face, and the decorative "mono" UI accents (codes list, timestamps, trust band,
     captions…) all resolve to Google Sans for one consistent face. Genuine code/
     command blocks use --almanac-font-code below (true monospace). "Google Sans
     Fallback" is the metric-matched fallback (see §0) so there is no swap re-flow. */
  --almanac-font-sans:    "Google Sans", "Google Sans Fallback", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --almanac-font-serif:   "Google Sans", "Google Sans Fallback", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --almanac-font-mono:    "Google Sans", "Google Sans Fallback", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --almanac-font-code:    "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --almanac-leading-tight: 1.18;
  --almanac-leading-snug:  1.4;
  --almanac-leading-base:  1.65;
  --almanac-leading-loose: 1.78;

  /* Spacing — semantic aliases */
  --almanac-space-3xs: 0.125rem;
  --almanac-space-2xs: 0.25rem;
  --almanac-space-xs:  0.5rem;
  --almanac-space-sm:  0.75rem;
  --almanac-space-md:  1rem;
  --almanac-space-lg:  1.5rem;
  --almanac-space-xl:  2rem;
  --almanac-space-2xl: 3rem;
  --almanac-space-3xl: 4rem;
  --almanac-space-4xl: 6rem;
  --almanac-space-5xl: 9rem;

  /* Radius */
  --almanac-radius-sm:  4px;
  --almanac-radius-md:  8px;
  --almanac-radius-lg:  12px;
  --almanac-radius-xl:  16px;
  --almanac-radius-pill:9999px;

  /* Shadow */
  --almanac-shadow-soft:  0 1px 0 rgba(26,22,18,0.04), 0 4px 12px -4px rgba(26,22,18,0.06);
  --almanac-shadow-card:  0 1px 0 rgba(26,22,18,0.06), 0 8px 24px -8px rgba(26,22,18,0.10);
  --almanac-shadow-lift:  0 20px 48px -16px rgba(26,22,18,0.18);
  --almanac-shadow-focus: 0 0 0 3px rgba(255,215,0,0.45);

  /* Motion */
  --almanac-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --almanac-duration:  180ms;
  --almanac-duration-lg: 280ms;

  /* Layout */
  --almanac-content-narrow: 44rem;
  --almanac-content-wide:   82rem;
  --almanac-header-h:       64px;
  /* Canonical sitewide side gutter. Also re-declared in almanac-overrides.css,
     but defined here too so the editor (which loads only almanac.css) has it. */
  --almanac-gutter:         clamp(1.25rem, 4vw, 2.5rem);
}

/* ----------------------------------------------------------------------------
   2. Design tokens (dark) — warm undertones, NOT slate-gray
   ---------------------------------------------------------------------------- */
[data-almanac-theme="dark"] {
  --almanac-bg-paper:    #1A1410;
  --almanac-bg-canvas:   #2A2218;
  --almanac-bg-cream:    #221C16;
  --almanac-bg-mist:     #2F271F;
  --almanac-bg-overlay:  rgba(0, 0, 0, 0.65);

  --almanac-fg-primary:   #F5EFE2;
  --almanac-fg-secondary: #D6CDB9;
  --almanac-fg-tertiary:  #948775;
  --almanac-fg-quaternary:#6B5F53;
  --almanac-fg-inverted:  #1A1410;

  --almanac-border:        #3A312A;
  --almanac-border-strong: #4A3F35;
  --almanac-border-faint:  #2A2218;

  --almanac-yellow:       #FFD700;
  --almanac-yellow-deep:  #FFE74A;
  --almanac-yellow-soft:  #3D3000;
  --almanac-yellow-glow:  #FFE74A;
  --almanac-tan:          #B2935B;
  --almanac-tan-deep:     #D6B883;
  --almanac-tan-soft:     #3A2E18;

  --almanac-success:      #3EB872;
  --almanac-success-soft: #1A3120;
  --almanac-warning:      #F2A93B;
  --almanac-warning-soft: #3A2A12;
  --almanac-danger:       #E96A6A;
  --almanac-danger-soft:  #3A1A1A;
  --almanac-info:         #5A93D8;
  --almanac-info-soft:    #142235;

  --almanac-shadow-soft:  0 1px 0 rgba(0,0,0,0.3), 0 4px 12px -4px rgba(0,0,0,0.4);
  --almanac-shadow-card:  0 1px 0 rgba(0,0,0,0.35), 0 8px 24px -8px rgba(0,0,0,0.6);
  --almanac-shadow-lift:  0 20px 48px -16px rgba(0,0,0,0.7);
  --almanac-shadow-focus: 0 0 0 3px rgba(255,215,0,0.45);
}

/* color-scheme tells the UA to render scrollbars, form controls, etc. in dark */
:root { color-scheme: light; }
[data-almanac-theme="dark"] { color-scheme: dark; }

/* ----------------------------------------------------------------------------
   3. Base / reset
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--almanac-bg-paper);
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--almanac-fg-primary);
  font-family: var(--almanac-font-sans);
  font-size: 1.0625rem;
  line-height: var(--almanac-leading-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
[data-almanac-theme="dark"] body { background-image: none; }
h1, h2, h3, h4, .wp-block-heading, .wp-block-post-title, .wp-block-query-title {
  font-optical-sizing: auto;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
img[loading="lazy"] { content-visibility: auto; }

a {
  color: var(--almanac-fg-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--almanac-tan);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--almanac-duration) var(--almanac-ease), color var(--almanac-duration) var(--almanac-ease);
}
a:hover, a:focus-visible {
  text-decoration-color: var(--almanac-yellow);
  text-decoration-thickness: 2px;
}

/* Visible focus ring on everything keyboard-actionable */
:where(a, button, input, textarea, select, summary, .almanac-jump__toggle, [tabindex]):focus-visible {
  outline: 3px solid var(--almanac-yellow);
  outline-offset: 2px;
  border-radius: var(--almanac-radius-sm);
}

::selection {
  background: var(--almanac-yellow);
  color: var(--almanac-on-yellow);
}

/* theme.json statically pins headings to --wp--preset--color--ink, which is
 * fixed at the light-mode value. Override here so headings switch with the
 * data-almanac-theme attribute.
 */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-query-title {
  color: var(--almanac-fg-primary);
}
.wp-block-site-title,
.wp-block-site-title a {
  color: var(--almanac-fg-primary);
}
a:where(:not(.wp-element-button)) {
  color: var(--almanac-fg-primary);
}
:where(a:where(:not(.wp-element-button)):hover) {
  color: var(--almanac-tan-deep);
}
:root :where(.wp-element-button, .wp-block-button__link) {
  background-color: var(--almanac-fg-primary);
  color: var(--almanac-fg-inverted);
}
:where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption) {
  color: var(--almanac-fg-tertiary);
}

/* ----------------------------------------------------------------------------
   4. Layout — constrained containers, structured grid for guide template
   ---------------------------------------------------------------------------- */
.almanac-main {
  display: block;
  padding-inline: var(--almanac-gutter);
}

/* Article grid — revenue-first responsive order. The right rail (sticky sidebar
 * ad + newsletter) is the priority, so it survives to a much lower width than
 * the left TOC, which collapses into the "Jump to section" dropdown first.
 *   <1024px  : 1 column  — content only  (TOC = dropdown, rail drops below)
 *   1024-1399: 2 columns — content | right rail  (TOC = dropdown)
 *   >=1400px : 3 columns — TOC | content | right rail
 * Content caps at 48rem (768px) so a 728px leaderboard fits inside the body. */
.almanac-post__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "toc" "main" "aside";
  gap: var(--almanac-space-xl);
  /* Intentional +2rem spacer track over the wide content token (see grid note). */
  max-width: calc(var(--almanac-content-wide) + 2rem);
  margin-inline: auto;
}
.almanac-post__toc-col { grid-area: toc; }
.almanac-post__main    { grid-area: main; }
.almanac-post__aside   { grid-area: aside; }

@media (min-width: 1024px) {
  /* Content | right rail. A trailing spacer track keeps content flush-left
     (aligned with the header/title) and the rail hugging it, with page
     whitespace pushed to the far right. */
  .almanac-post__grid {
    grid-template-columns: minmax(0, 48rem) 20rem minmax(0, 1fr);
    grid-template-areas:
      "toc   aside ."
      "main  aside .";
    align-items: start;
    column-gap: clamp(1.75rem, 3vw, 2.75rem);
    row-gap: var(--almanac-space-md);
  }
  .almanac-post__aside {
    display: block;
    position: sticky;
    top: calc(var(--almanac-header-h) + 1rem);
    align-self: start;
  }
}
@media (min-width: 1400px) {
  .almanac-post__grid {
    grid-template-columns: 12rem minmax(0, 1fr) 20rem;
    grid-template-areas: "toc main aside";
  }
  .almanac-post__toc-col {
    position: sticky;
    top: calc(var(--almanac-header-h) + 1rem);
    align-self: start;
    max-height: calc(100vh - var(--almanac-header-h) - 2rem);
    overflow-y: auto;
  }
}

.almanac-post__main {
  min-width: 0;
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}
@media (min-width: 1024px) { .almanac-post__main { margin-inline: 0; } }

/* On narrow screens the right rail sits below the content */
@media (max-width: 1023px) {
  .almanac-post__aside {
    max-width: var(--almanac-content-narrow);
    margin-inline: auto;
    margin-top: var(--almanac-space-xl);
  }
}

/* ----------------------------------------------------------------------------
   4b. Layout modes — centered (default) vs. left-sidebar (74rem)
   Toggle: Appearance → Almanac Options → "Left sidebar". functions.php stamps
   the body class `almanac-layout-centered` (default) or `almanac-layout-sidebar`.
   ---------------------------------------------------------------------------- */
body.almanac-layout-centered { --almanac-content-wide: 69rem; }  /* ~1104px shell */
body.almanac-layout-sidebar  { --almanac-content-wide: 74rem; }  /* opt-in wider shell + left TOC */

/* Centered reading column = 600px. ONLY tables, images, galleries and Mediavine
   ad slots break out to 700px. Everything else (paragraphs, steps, codes,
   callouts, code blocks…) stays 600px simply by living inside the 600px
   container — no per-block capping that wide blocks (e.g. .gpc-codes) slip past. */
.almanac-layout-centered {
  --almanac-measure: 37.5rem;   /* 600px — the reading column */
  --almanac-media-wide:   43.75rem;  /* 700px — tables / images / ads only */
}
.almanac-layout-centered .almanac-post__main { max-width: var(--almanac-media-wide); }
/* Wide content (Almanac Options → Wide content): widen the reading column from
   the 600px measure to the full 700px media width, so body text fills the content
   area instead of sitting in a narrower centred column (the side gap is removed;
   tables/images/ads already at media width now line up flush). */
.almanac-content-wide.almanac-layout-centered { --almanac-measure: var(--almanac-media-wide); }
@media (min-width: 1024px) {
  .almanac-layout-centered .almanac-post__content {
    max-width: var(--almanac-measure);
    margin-inline: auto;
  }
  /* Break ONLY tables, images and Mediavine ads out to the 700px media width
     (centred via negative margins). NB: bare `figure` is intentionally excluded —
     Ghost wraps codes/HTML cards in <figure class="kg-html-card">, so we only
     widen figures that actually contain an image. */
  .almanac-layout-centered .almanac-post__content > :is(
    .kg-image-card, .wp-block-image, .kg-gallery-card, figure:has(img),
    .wp-block-table, .almanac-table-wrap,
    .mv-ad-box, .mv-content-ad, [class*="mv-ad"], [class*="mv-content"],
    [class*="mediavine"], .adthrive-ad
  ) {
    max-width: none;
    margin-inline: calc((var(--almanac-measure) - var(--almanac-media-wide)) / 2);
  }
  /* …but images interleaved with the step-by-step boxes stay at the 600px reading
     width (no break-out) so they line up with the numbered steps. */
  .almanac-layout-centered .almanac-post__content > .almanac-step + :is(figure:has(img), .kg-image-card, .wp-block-image, .kg-gallery-card),
  .almanac-layout-centered .almanac-post__content > :is(figure:has(img), .kg-image-card, .wp-block-image, .kg-gallery-card):has(+ .almanac-step) {
    margin-inline: 0;
  }
}

/* Jump box. The centered layout uses the [almanac_jump_map] dropdown (.almanac-jump);
   the sidebar TOC panel, its JS mobile toggle, and the leftrail CTA card (which
   otherwise reserves ~200px of dead space at the top) are all hidden. !important
   beats the JS inline display on the mobile toggle + leftrail card. */
.almanac-layout-centered .almanac-post__toc-col .almanac-toc,
.almanac-layout-centered .almanac-toc--mobile,
.almanac-layout-centered .almanac-prefsrc-leftrail { display: none !important; }
.almanac-layout-centered .almanac-jump { display: block; margin-inline: 0; }  /* show + left-align with body text */
.almanac-layout-centered .almanac-post__toc-col { text-align: left; }
.almanac-layout-centered .almanac-post__toc { position: static; }
/* Left-sidebar layout: the contents panel shows; the jump-map dropdown is hidden. */
.almanac-layout-sidebar .almanac-jump { display: none !important; }
/* Jump box switched off in Almanac Options → drop the whole TOC column. */
.almanac-jumpbox-off .almanac-post__toc-col { display: none !important; }

@media (min-width: 1024px) {
  .almanac-layout-centered .almanac-post__grid {
    grid-template-columns: minmax(0, var(--almanac-media-wide)) 20rem;
    grid-template-areas: "toc aside" "main aside";
    column-gap: clamp(1.75rem, 3vw, 2.75rem);
    justify-content: center;
  }
  .almanac-layout-centered .almanac-post__toc-col {
    position: static; max-height: none; overflow: visible;
    /* explicit 600px box (not auto→shrink-to-content) so it lines up with the
       600px body column inside the 700px cell; the jump sits at its left edge. */
    width: var(--almanac-measure); max-width: 100%; margin-inline: auto;
  }
  .almanac-layout-centered .almanac-post__main { margin-inline: 0; }
}

/* Site-wide shell — every template's main content area adopts the active shell
   width (69rem centered / 74rem sidebar), so the tightening applies to the homepage,
   archives, author/category/tag, search and pages, not just single posts. The
   templates hard-code contentSize:82rem; capping the <main> reins their children
   in to the shell. (Single posts keep their own grid + rail.) */
.almanac-home,
.almanac-archive,
.almanac-author,
.almanac-category,
.almanac-tag,
.almanac-search-results,
.almanac-page {
  max-width: var(--almanac-content-wide);
  margin-inline: auto;
}

/* ----------------------------------------------------------------------------
   5. Site header
   ---------------------------------------------------------------------------- */
.almanac-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Solid (no backdrop-filter): a filtered ancestor would become the containing
     block for every position:fixed descendant (search overlay, scroll progress,
     skip link, the preferred-source bar's neighbours), pinning them to the
     header box instead of the viewport. Solid keeps the sticky header crisp and
     lets those overlays cover the screen correctly. */
  background: var(--almanac-bg-paper);
  border-bottom: 1px solid var(--almanac-border);
  transition: padding var(--almanac-duration) var(--almanac-ease), background var(--almanac-duration) var(--almanac-ease);
}
.almanac-site-header.is-scrolled { box-shadow: var(--almanac-shadow-soft); }

.almanac-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--almanac-space-md);
  max-width: var(--almanac-content-wide);
  margin-inline: auto;
}

.almanac-site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--almanac-space-sm);
  flex: 0 0 auto;
}
.almanac-site-header__brand .wp-block-site-logo img,
.almanac-site-header__brand .almanac-logo img {
  max-height: 36px;
  width: auto;
  transition: transform var(--almanac-duration) var(--almanac-ease);
}
.almanac-site-header__brand:hover .almanac-logo img { transform: rotate(-2deg) scale(1.02); }

.almanac-site-header__nav {
  flex: 1 1 auto;
  justify-content: center;
}
.almanac-nav {
  display: flex;
  align-items: center;
  gap: var(--almanac-space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}
.almanac-nav li { margin: 0; }
.almanac-nav a {
  color: var(--almanac-fg-primary);
  text-decoration: none;
  padding-block: 4px;
  position: relative;
}
.almanac-nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--almanac-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.almanac-site-header__tools {
  display: flex;
  align-items: center;
  gap: var(--almanac-space-xs);
  flex: 0 0 auto;
}

.almanac-search-toggle,
.almanac-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  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-search-toggle:hover,
.almanac-theme-toggle:hover {
  background: var(--almanac-bg-cream);
  border-color: var(--almanac-border);
}

.almanac-theme-toggle__sun { display: block; }
.almanac-theme-toggle__moon { display: none; }
[data-almanac-theme="dark"] .almanac-theme-toggle__sun { display: none; }
[data-almanac-theme="dark"] .almanac-theme-toggle__moon { display: block; }

/* Dark-mode toggle disabled in theme options → hide the header switch. */
.almanac-no-darkmode .almanac-theme-toggle { display: none !important; }

/* Light/dark logo pair (theme option). Show the one matching the active scheme;
   default to the light logo when no theme attribute is set. */
.almanac-logo__img--dark { display: none; }
[data-almanac-theme="dark"] .almanac-logo__img--light { display: none; }
[data-almanac-theme="dark"] .almanac-logo__img--dark { display: inline-block; }

@media (max-width: 900px) {
  .almanac-site-header__nav { display: none; }
}
@media (max-width: 640px) {
  .almanac-site-header__tools { gap: 2px; }
  .almanac-site-header { padding-inline: var(--almanac-space-sm) !important; }
}

/* Scroll-progress indicator */
.almanac-scroll-progress {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--almanac-yellow) var(--scroll-progress, 0%), transparent var(--scroll-progress, 0%));
  z-index: 60;
  pointer-events: none;
  transition: opacity var(--almanac-duration) var(--almanac-ease);
}
body:not(.almanac-single) .almanac-scroll-progress { opacity: 0; }
/* The progress bar (and the header's other fixed children) are direct children
   of the constrained <header>, so WordPress's block-gap flow gives them a
   margin-block-start that pushes this position:fixed bar ~24px down from the top
   edge. Zero it for the header only — a site-wide reset also collapses the
   homepage section gaps. */
.almanac-site-header.is-layout-constrained > * { margin-block: 0; }

/* Search overlay */
.almanac-search-overlay {
  position: fixed;
  inset: 0;
  background: var(--almanac-bg-overlay);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: almanac-fade-in 140ms var(--almanac-ease);
}
.almanac-search-overlay[hidden] { display: none; }
.almanac-search-overlay__panel {
  position: relative;
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-xl);
  padding: var(--almanac-space-lg);
  width: min(92vw, 36rem);
  box-shadow: var(--almanac-shadow-lift);
}
.almanac-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--almanac-space-sm);
}
.almanac-search-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--almanac-fg-tertiary);
}
.almanac-search-form input[type="search"] {
  width: 100%;
  font: inherit;
  font-size: 1.125rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--almanac-border-strong);
  border-radius: var(--almanac-radius-md);
  background: var(--almanac-bg-paper);
  color: var(--almanac-fg-primary);
}
.almanac-search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--almanac-yellow);
  box-shadow: var(--almanac-shadow-focus);
}
.almanac-search-overlay__close {
  position: absolute;
  top: 8px; right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--almanac-fg-tertiary);
  cursor: pointer;
  padding: 4px 10px;
}
@keyframes almanac-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------------
   6. Buttons
   ---------------------------------------------------------------------------- */
.almanac-btn,
.wp-block-button__link.is-style-almanac-primary,
.wp-block-button__link.is-style-almanac-outline,
.wp-block-button__link.is-style-almanac-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--almanac-space-xs);
  padding: 0.625rem 1.125rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--almanac-radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--almanac-duration) var(--almanac-ease), color var(--almanac-duration) var(--almanac-ease), border-color var(--almanac-duration) var(--almanac-ease), transform var(--almanac-duration) var(--almanac-ease);
  white-space: nowrap;
}
.almanac-btn:active { transform: translateY(1px); }
.almanac-btn--primary,
.wp-block-button__link.is-style-almanac-primary {
  background: var(--almanac-fg-primary);
  color: var(--almanac-fg-inverted);
}
.almanac-btn--primary:hover,
.wp-block-button__link.is-style-almanac-primary:hover {
  background: var(--almanac-yellow);
  color: var(--almanac-on-yellow);
}
.almanac-btn--outline,
.wp-block-button__link.is-style-almanac-outline {
  background: transparent;
  color: var(--almanac-fg-primary);
  border-color: var(--almanac-border-strong);
}
.almanac-btn--outline:hover,
.wp-block-button__link.is-style-almanac-outline:hover {
  border-color: var(--almanac-fg-primary);
  background: var(--almanac-bg-cream);
}
.almanac-btn--ghost,
.wp-block-button__link.is-style-almanac-ghost {
  background: transparent;
  color: var(--almanac-fg-primary);
  padding-inline: 0.75rem;
}
.almanac-btn--ghost:hover,
.wp-block-button__link.is-style-almanac-ghost:hover {
  background: var(--almanac-bg-cream);
}
.almanac-btn--yellow {
  background: var(--almanac-yellow);
  color: var(--almanac-on-yellow);
}
.almanac-btn--yellow:hover { background: var(--almanac-yellow-deep); }

/* ----------------------------------------------------------------------------
   7. Post header — guide variant (the workhorse)
   ---------------------------------------------------------------------------- */
.almanac-post-header {
  padding-top: var(--almanac-space-lg);
  padding-bottom: var(--almanac-space-lg);
}
.almanac-post-header__inner {
  max-width: var(--almanac-content-wide);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  display: grid;
  gap: var(--almanac-space-md);
}
.almanac-post-header__meta-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--almanac-space-sm);
  font-size: 0.875rem;
}
.almanac-post-header__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--almanac-space-2xs);
  color: var(--almanac-fg-tertiary);
}
.almanac-post-header__breadcrumbs a { color: var(--almanac-fg-secondary); }
.almanac-post-header__breadcrumbs-sep::before { content: " / "; padding: 0 var(--almanac-space-2xs); }
.almanac-post-header__category {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--almanac-tan-soft);
  color: var(--almanac-tan-deep);
  border-radius: var(--almanac-radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.almanac-post-header__title {
  font-family: var(--almanac-font-display);
  font-size: clamp(2rem, 4vw, 2.625rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--almanac-fg-primary);
  font-optical-sizing: auto;
}
.almanac-post-header__dek {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--almanac-fg-secondary);
  max-width: 50rem;
  margin: 0;
}
.almanac-post-header__meta-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--almanac-space-md);
  padding-top: var(--almanac-space-sm);
  font-size: 0.9375rem;
  color: var(--almanac-fg-tertiary);
}
.almanac-post-header__author {
  display: inline-flex;
  align-items: center;
  gap: var(--almanac-space-xs);
  font-weight: 500;
  color: var(--almanac-fg-secondary);
  text-decoration: none;
}
.almanac-post-header__author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--almanac-bg-cream);
}
.almanac-post-header__sep::before { content: "·"; color: var(--almanac-fg-quaternary); padding: 0 var(--almanac-space-2xs); }

.almanac-post-header__featured {
  margin-top: var(--almanac-space-md);
}
.almanac-post-header__featured img {
  width: 100%;
  height: auto;
  border-radius: var(--almanac-radius-lg);
  border: 1px solid var(--almanac-border);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Codes-page verification banner */
.almanac-codes-banner {
  background: var(--almanac-yellow-soft);
  border-top: 1px solid var(--almanac-yellow-deep);
  border-bottom: 1px solid var(--almanac-yellow-deep);
  padding: var(--almanac-space-sm) var(--almanac-space-md);
  margin: 0 !important;
}
.almanac-codes-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--almanac-space-xs);
  max-width: var(--almanac-content-wide);
  margin-inline: auto;
  color: var(--almanac-fg-primary);
  font-size: 0.9375rem;
}
.almanac-codes-banner__icon { color: var(--almanac-yellow-deep); flex: 0 0 auto; display: inline-flex; }
.almanac-codes-banner__label strong { font-weight: 700; }

/* ----------------------------------------------------------------------------
   8. Last-updated badge — colour-coded freshness
   ---------------------------------------------------------------------------- */
.almanac-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--almanac-space-2xs);
  padding: 3px 0;
  border-radius: var(--almanac-radius-pill);
  font-size: 10px;
  font-weight: 600;
}
.almanac-updated__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.almanac-updated--fresh {
  background: transparent;
  color: var(--almanac-tan-deep);
}
.almanac-updated--fresh .almanac-updated__dot {
  background: var(--almanac-yellow);
  box-shadow: 0 0 0 2px rgba(255,215,0,0.25);
}
.almanac-updated--recent {
  background: var(--almanac-tan-soft);
  color: var(--almanac-tan-deep);
}
.almanac-updated--recent .almanac-updated__dot { background: var(--almanac-tan-deep); }
.almanac-updated--older {
  background: var(--almanac-bg-cream);
  color: var(--almanac-fg-tertiary);
}
.almanac-updated--older .almanac-updated__dot { background: var(--almanac-fg-quaternary); }

/* ----------------------------------------------------------------------------
   9. Table of contents — sticky, scroll-spy
   ---------------------------------------------------------------------------- */
.almanac-toc {
  padding: var(--almanac-space-md);
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  max-height: calc(100vh - var(--almanac-header-h) - 2rem);
  overflow-y: auto;
  font-size: 0.9375rem;
}
.almanac-toc__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 0 var(--almanac-space-sm) 0;
}
.almanac-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.almanac-toc__item a {
  display: block;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--almanac-fg-secondary);
  border-radius: var(--almanac-radius-sm);
  border-left: 2px solid transparent;
  transition: background var(--almanac-duration) var(--almanac-ease), color var(--almanac-duration) var(--almanac-ease), border-color var(--almanac-duration) var(--almanac-ease);
  line-height: 1.4;
}
.almanac-toc__item a:hover {
  color: var(--almanac-fg-primary);
  background: var(--almanac-bg-cream);
}
.almanac-toc__item--sub a { padding-left: 22px; font-size: 0.875rem; }
.almanac-toc__item.is-active > a {
  color: var(--almanac-fg-primary);
  font-weight: 600;
  border-left-color: var(--almanac-yellow);
  background: var(--almanac-yellow-soft);
}

/* Mobile TOC — collapsible jump-to button. The full .almanac-toc panel
 * stays hidden until the user taps the toggle; otherwise the eyebrow +
 * frame would appear as a confusing empty "On this page" card next to
 * the button.
 */
.almanac-toc--mobile { display: none; }
@media (max-width: 1399px) {
  .almanac-post__toc { position: relative; top: auto; }
  .almanac-toc--mobile { display: block; }
  .almanac-toc[data-mobile-collapsed="true"] { display: none; }
  .almanac-toc[data-mobile-collapsed="false"] { display: block; margin-top: var(--almanac-space-xs); }
  /* Decorated jump bar — matches the guide .almanac-jump summary so the
     collapsed "Jump to section" looks identical everywhere it appears. The
     inner icon/label/count/chevron reuse the global .almanac-jump__* styles. */
  .almanac-toc__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    background: var(--almanac-bg-canvas);
    border: 1px solid var(--almanac-border);
    border-radius: 12px;
    font-family: inherit;
    cursor: pointer;
    color: inherit;
    text-align: left;
    transition: background var(--almanac-duration) var(--almanac-ease);
  }
  .almanac-toc__toggle:hover { background: var(--almanac-bg-cream); }
  .almanac-toc__toggle[aria-expanded="true"] .almanac-jump__chevron { transform: rotate(180deg); }
}

/* ----------------------------------------------------------------------------
   10. Prose — the meat of the guide template
   ---------------------------------------------------------------------------- */
.almanac-post__content {
  font-size: 1.0625rem;
  line-height: var(--almanac-leading-base);
  color: var(--almanac-fg-primary);
  min-width: 0;
}
@media (max-width: 640px) {
  .almanac-post__content { font-size: 1rem; }
}
.almanac-post__content > *,
.almanac-post__content > * > * { min-width: 0; }
.almanac-post__content img,
.almanac-post__content figure,
.almanac-post__content video,
.almanac-post__content iframe { max-width: 100%; }
/* Block-axis spacing — wins over WP's :where(.is-layout-flow) > * rule and
 * avoids the previous `p {margin:0}` reset that was clobbering the sibling
 * spacer for paragraphs.
 */
.almanac-post__content > * { margin-block-start: 1.25rem; margin-block-end: 0; }
.almanac-post__content > :first-child { margin-block-start: 0; }
.almanac-post__content > p + p { margin-block-start: 1rem; }
.almanac-post__content > h2 + *,
.almanac-post__content > h3 + *,
.almanac-post__content > h4 + * { margin-block-start: 0.75rem; }

.almanac-post__content p:has(img) { text-align: center; }

.almanac-post__content h2,
.almanac-post__content h3,
.almanac-post__content h4,
.almanac-post__content h5,
.almanac-post__content h6 {
  font-family: var(--almanac-font-display);
  color: var(--almanac-fg-primary);
  scroll-margin-top: calc(var(--almanac-header-h) + 1rem);
  margin: 2.25rem 0 0;
  position: relative;
}
.almanac-post__content h2 { font-size: clamp(1.5rem, 2.8vw, 1.875rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.014em; margin-block-start: 2rem; }
.almanac-post__content h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; margin-block-start: 1.625rem; }
.almanac-post__content h4 { font-size: 1.1875rem; font-weight: 600; line-height: 1.32; margin-block-start: 1.25rem; }
.almanac-post__content > hr + :where(h2, h3, h4) { margin-block-start: 0.75rem; }
.almanac-post__content > :where(p, figure, ul, ol) + hr { margin-block-start: 1rem; }
.almanac-post__content h5 { font-size: 1.0625rem; font-weight: 600; }
.almanac-post__content h6 { font-family: var(--almanac-font-sans); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--almanac-fg-tertiary); }

/* Anchor links — small "#" on hover */
.almanac-post__content h2[id]::before,
.almanac-post__content h3[id]::before {
  content: "#";
  position: absolute;
  left: -1.25rem;
  color: var(--almanac-yellow-deep);
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--almanac-duration) var(--almanac-ease);
}
.almanac-post__content h2[id]:hover::before,
.almanac-post__content h3[id]:hover::before { opacity: 1; }
@media (max-width: 720px) {
  .almanac-post__content h2[id]::before,
  .almanac-post__content h3[id]::before { display: none; }
}

.almanac-post__content ul,
.almanac-post__content ol {
  padding-left: 1.5rem;
}
.almanac-post__content li { margin-top: var(--almanac-space-xs); }
.almanac-post__content li:first-child { margin-top: 0; }
.almanac-post__content li::marker { color: var(--almanac-tan-deep); font-weight: 600; }
.almanac-post__content ul li::marker { color: var(--almanac-fg-tertiary); }
.almanac-post__content li ul li::marker,
.almanac-post__content li ol li::marker { color: var(--almanac-fg-tertiary); }

.almanac-post__content blockquote {
  margin: 1.5rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--almanac-tan);
  font-family: var(--almanac-font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--almanac-fg-secondary);
}

.almanac-post__content figure { margin: 1.5rem 0; }
.almanac-post__content figcaption {
  font-size: 0.875rem;
  color: var(--almanac-fg-tertiary);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

.almanac-post__content img {
  border-radius: var(--almanac-radius-md);
  border: 1px solid var(--almanac-border);
}

.almanac-post__content hr {
  border: 0;
  height: 1px;
  background: var(--almanac-border);
  margin-block: 1.25rem;
}

/* Inline code */
.almanac-post__content :not(pre) > code,
.almanac-post__content :not(pre) > kbd {
  font-family: var(--almanac-font-code);
  font-size: 0.9em;
  padding: 0.125em 0.4em;
  background: var(--almanac-bg-cream);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-sm);
  color: var(--almanac-fg-primary);
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.almanac-post__content kbd {
  border-bottom-width: 2px;
  font-size: 0.85em;
}

.almanac-post__content mark {
  background: var(--almanac-yellow-soft);
  color: var(--almanac-fg-primary);
  padding: 0.1em 0.2em;
  border-radius: var(--almanac-radius-sm);
}

.almanac-post__content abbr[title] {
  text-decoration: underline dotted var(--almanac-tan);
  cursor: help;
}

/* Pre / code blocks */
.almanac-post__content pre,
.almanac-post__content .wp-block-code {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.125rem 1.25rem;
  background: var(--almanac-bg-cream);
  border: 1px solid var(--almanac-border);
  border-radius: 14px;
  overflow-x: auto;
  font-family: var(--almanac-font-code);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--almanac-fg-primary);
  -webkit-overflow-scrolling: touch;
}
.almanac-post__content pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}
.almanac-post__content pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--almanac-fg-tertiary);
  background: var(--almanac-bg-canvas);
  padding: 2px 8px;
  border-radius: var(--almanac-radius-sm);
}
.almanac-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  color: var(--almanac-fg-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--almanac-radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--almanac-duration) var(--almanac-ease), background var(--almanac-duration) var(--almanac-ease);
}
.almanac-post__content pre:hover .almanac-copy-btn,
.almanac-post__content .wp-block-code:hover .almanac-copy-btn { opacity: 1; }
.almanac-copy-btn:hover { background: var(--almanac-yellow); color: var(--almanac-on-yellow); }
.almanac-copy-btn.is-copied { background: var(--almanac-success); color: white; opacity: 1; }

/* Tables */
.almanac-post__content table,
.almanac-post__content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 1.5rem 0;
}
.almanac-post__content table th,
.almanac-post__content table td {
  padding: 0.875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--almanac-border);
  vertical-align: top;
}
.almanac-post__content table th {
  font-weight: 700;
  background: var(--almanac-bg-cream);
  color: var(--almanac-fg-primary);
}
.almanac-post__content table thead { background: var(--almanac-bg-cream); }
.almanac-post__content table colgroup { display: none; }
.almanac-post__content table tbody tr:nth-child(even) td { background: var(--almanac-bg-cream); }
.almanac-post__content table tbody tr:hover td { background: var(--almanac-yellow-soft); }

/* Responsive table wrap — JS adds this wrapper.
 * Scroll affordance defaults hidden; JS sets data-overflows="true" when
 * the inner table is actually wider than the wrap.
 */
.almanac-table-wrap {
  position: relative;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  -webkit-overflow-scrolling: touch;
}
.almanac-table-wrap table { margin: 0; border-radius: 0; }
.almanac-table-wrap::after {
  content: "← scroll →";
  display: none;
  font-size: 0.75rem;
  color: var(--almanac-fg-tertiary);
  text-align: center;
  padding: 4px;
  border-top: 1px dashed var(--almanac-border);
  background: var(--almanac-bg-cream);
}
.almanac-table-wrap[data-overflows="true"]::after { display: block; }

/* details / summary */
.almanac-post__content details {
  margin: 1.5rem 0;
  padding: 0;
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
}
.almanac-post__content details summary {
  cursor: pointer;
  padding: 0.875rem 1rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--almanac-space-sm);
}
.almanac-post__content details summary::-webkit-details-marker { display: none; }
.almanac-post__content details summary::after {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* Hand-drawn plus (replaces the typographic "+" from the editorial reference);
     rotates to an × when open. Tan reads the same in light + dark. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B2935B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3.6 12.2C9 11.6 15 12.7 20.4 11.9'/%3E%3Cpath d='M12.2 3.6C11.6 9 12.7 15 11.9 20.4'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--almanac-duration) var(--almanac-ease);
}
.almanac-post__content details[open] summary::after { transform: rotate(45deg); }
.almanac-post__content details > *:not(summary) {
  padding: 0 1rem 1rem;
  margin-top: 0.5rem;
}

/* ----------------------------------------------------------------------------
   11. Step pattern (from filter) — visible numbering for "Step N:" prose
   ---------------------------------------------------------------------------- */
.almanac-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--almanac-space-md);
  margin-block: 1rem;
  padding: var(--almanac-space-md);
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: 14px;
  position: relative;
  scroll-margin-top: calc(var(--almanac-header-h) + 1rem);
}
.almanac-step__anchor {
  display: inline-flex;
  text-decoration: none;
  align-self: start;
}
.almanac-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--almanac-yellow);
  color: var(--almanac-on-yellow);
  border-radius: 50%;
  font-family: var(--almanac-font-display);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background var(--almanac-duration) var(--almanac-ease);
}
.almanac-step:hover .almanac-step__num { background: var(--almanac-yellow-deep); }
.almanac-step__body > :first-child { margin-top: 0; }
.almanac-step__body > :last-child  { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   12. Callouts (block style on core/group)
   ---------------------------------------------------------------------------- */
[class*="is-style-almanac-callout-"] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--almanac-space-sm);
  padding: var(--almanac-space-md) var(--almanac-space-lg);
  margin: 1.5rem 0;
  border-radius: 14px;
  border-left: 4px solid;
  font-size: 0.9375rem;
  line-height: 1.55;
}
[class*="is-style-almanac-callout-"]::before {
  font-size: 1.25rem;
  line-height: 1;
  padding-top: 2px;
}
.is-style-almanac-callout-note {
  background: var(--almanac-bg-cream);
  border-color: var(--almanac-tan);
  color: var(--almanac-fg-primary);
}
.is-style-almanac-callout-note::before { content: "📝"; }
.is-style-almanac-callout-tip {
  background: var(--almanac-success-soft);
  border-color: var(--almanac-success);
  color: var(--almanac-fg-primary);
}
.is-style-almanac-callout-tip::before { content: "💡"; }
.is-style-almanac-callout-warning {
  background: var(--almanac-warning-soft);
  border-color: var(--almanac-warning);
  color: var(--almanac-fg-primary);
}
.is-style-almanac-callout-warning::before { content: "⚠️"; }
.is-style-almanac-callout-info {
  background: var(--almanac-info-soft);
  border-color: var(--almanac-info);
  color: var(--almanac-fg-primary);
}
.is-style-almanac-callout-info::before { content: "ℹ️"; }

/* ----------------------------------------------------------------------------
   12b. Review score block (almanac/score)
   ---------------------------------------------------------------------------- */
.almanac-score {
  display: grid;
  gap: var(--almanac-space-lg);
  margin: var(--almanac-space-xl) 0;
  padding: var(--almanac-space-xl);
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-left: 4px solid var(--almanac-yellow);
  border-radius: var(--almanac-radius-lg);
  box-shadow: var(--almanac-shadow-card);
}
.almanac-score--great { border-left-color: var(--almanac-success); }
.almanac-score--good  { border-left-color: var(--almanac-yellow);  }
.almanac-score--mixed { border-left-color: var(--almanac-warning); }
.almanac-score--rough { border-left-color: var(--almanac-danger);  }

.almanac-score__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--almanac-space-xs);
}
.almanac-score__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--almanac-tan-deep);
}
.almanac-score__value {
  margin: 0;
  font-family: var(--almanac-font-display);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--almanac-fg-primary);
}
.almanac-score__num { color: var(--almanac-fg-primary); }
.almanac-score__max { color: var(--almanac-fg-tertiary); font-weight: 500; font-size: 0.6em; }

.almanac-score__bar {
  height: 8px;
  background: var(--almanac-bg-cream);
  border-radius: var(--almanac-radius-pill);
  overflow: hidden;
}

.almanac-score__verdict-title {
  margin: 0 0 var(--almanac-space-2xs);
  font-family: var(--almanac-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.almanac-score__verdict-text {
  margin: 0;
  font-family: var(--almanac-font-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--almanac-fg-secondary);
}

.almanac-score__pc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--almanac-space-lg);
  padding-top: var(--almanac-space-md);
  border-top: 1px solid var(--almanac-border);
}
@media (min-width: 640px) {
  .almanac-score__pc { grid-template-columns: 1fr 1fr; }
}
.almanac-score__pc-title {
  margin: 0 0 var(--almanac-space-xs);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--almanac-fg-tertiary);
}
.almanac-score__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--almanac-space-xs);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.almanac-score__list li {
  position: relative;
  padding-left: 1.5rem;
}
.almanac-score__pros .almanac-score__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--almanac-success);
  font-weight: 700;
}
.almanac-score__cons .almanac-score__list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--almanac-danger);
  font-weight: 700;
}

/* Drop cap — reserved for review template's first paragraph */
.almanac-post--review .almanac-post__content > p:first-of-type::first-letter {
  font-family: var(--almanac-font-display);
  font-weight: 600;
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  margin: 0.1em 0.1em 0 -0.04em;
  color: var(--almanac-fg-primary);
  font-optical-sizing: auto;
}
.almanac-post--review .almanac-post__content > p:first-of-type {
  font-size: 1.125rem;
  line-height: 1.55;
}

/* ----------------------------------------------------------------------------
   13. Series nav
   ---------------------------------------------------------------------------- */
.almanac-series-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--almanac-space-md);
  margin: var(--almanac-space-2xl) 0 var(--almanac-space-xl);
  padding: var(--almanac-space-lg);
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
}
.almanac-series-nav a {
  display: flex;
  flex-direction: column;
  gap: var(--almanac-space-2xs);
  padding: var(--almanac-space-sm);
  border-radius: var(--almanac-radius-sm);
  text-decoration: none;
  transition: background var(--almanac-duration) var(--almanac-ease);
}
.almanac-series-nav a:hover { background: var(--almanac-bg-cream); }
.almanac-series-nav__next { text-align: right; align-items: flex-end; }
.almanac-series-nav__direction {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--almanac-fg-tertiary);
}
.almanac-series-nav__title {
  font-weight: 600;
  line-height: 1.3;
  color: var(--almanac-fg-primary);
}
.almanac-series-nav__spacer { display: block; }

@media (max-width: 640px) {
  .almanac-series-nav { grid-template-columns: 1fr; }
  .almanac-series-nav__next { text-align: left; align-items: flex-start; }
}

/* ----------------------------------------------------------------------------
   14. Related guides rail
   ---------------------------------------------------------------------------- */
.almanac-related {
  position: relative;
  margin-block: var(--almanac-space-xl);
  padding-top: var(--almanac-space-lg);
  border-top: 1px solid var(--almanac-border);
}
.almanac-related::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--almanac-yellow);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px var(--almanac-bg-paper);
}
.almanac-related__title {
  font-family: var(--almanac-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 var(--almanac-space-md) 0;
  letter-spacing: -0.012em;
}
.almanac-related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--almanac-space-md);
}
.almanac-related__link {
  display: flex;
  gap: var(--almanac-space-sm);
  padding: var(--almanac-space-sm);
  text-decoration: none;
  border-radius: var(--almanac-radius-md);
  transition: background var(--almanac-duration) var(--almanac-ease);
}
.almanac-related__link:hover { background: var(--almanac-bg-cream); }
.almanac-related__thumb {
  flex: 0 0 80px;
}
.almanac-related__thumb img {
  width: 80px;
  height: 80px;
  border-radius: var(--almanac-radius-sm);
  object-fit: cover;
}
.almanac-related__copy {
  display: flex;
  flex-direction: column;
  gap: var(--almanac-space-2xs);
  min-width: 0;
}
.almanac-related__headline {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--almanac-fg-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.almanac-related__date {
  font-size: 0.8125rem;
  color: var(--almanac-fg-tertiary);
}

/* ----------------------------------------------------------------------------
   15. Feedback widget — was this helpful?
   Styled wholesale in almanac-overrides.css (loaded later with !important);
   no base rules live here.
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   16. Newsletter strip
   ---------------------------------------------------------------------------- */
.almanac-newsletter {
  padding: var(--almanac-space-lg);
  background: var(--almanac-bg-cream);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  text-align: left;
}
.almanac-site-footer .almanac-newsletter { background: var(--almanac-bg-canvas); }
.almanac-newsletter__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--almanac-fg-secondary);
  margin: 0 0 var(--almanac-space-xs);
}
.almanac-newsletter__title {
  font-family: var(--almanac-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 var(--almanac-space-xs);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.almanac-newsletter__lede {
  margin: 0 0 var(--almanac-space-md);
  color: var(--almanac-fg-secondary);
  font-size: 0.9375rem;
}
.almanac-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--almanac-space-xs);
}
.almanac-newsletter__form input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  background: var(--almanac-bg-paper);
  color: var(--almanac-fg-primary);
  border: 1px solid var(--almanac-border-strong);
  border-radius: var(--almanac-radius-md);
}
.almanac-newsletter__form input[type="email"]:focus {
  outline: none;
  border-color: var(--almanac-yellow);
  box-shadow: var(--almanac-shadow-focus);
}

/* In-content insert variant */
.almanac-newsletter--inline {
  margin: 2rem 0;
  padding: var(--almanac-space-lg);
}

/* Slide-up variant */
.almanac-newsletter--slideup {
  position: fixed;
  bottom: var(--almanac-space-md);
  right: var(--almanac-space-md);
  max-width: 22rem;
  z-index: 90;
  box-shadow: var(--almanac-shadow-lift);
  animation: almanac-slide-up 320ms var(--almanac-ease);
}
.almanac-newsletter--slideup[hidden] { display: none; }
.almanac-newsletter__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 0;
  color: var(--almanac-fg-tertiary);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
}
@keyframes almanac-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ----------------------------------------------------------------------------
   17. Article listings — unified card, switchable layout.

   Every post listing (home, archives, search) renders the SAME card markup in
   a `.almanac-cards` post-template:

     .almanac-cards            (the <ul> post-template)
       .almanac-card           (one story)
         .almanac-card__media  (featured image)
         .almanac-card__body   (text column)
           .almanac-card__cat / __title / __excerpt / __meta

   The site-wide Settings → Reading option flips the body class between
   `.almanac-view-list` (default) and `.almanac-view-grid`; only CSS changes,
   never the markup. LIST is the default below; GRID is layered on top under
   the body.almanac-view-grid scope.
   ---------------------------------------------------------------------------- */

/* ---- LIST view (default) — full-width rows, image left -------------------- */
.almanac-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.almanac-cards > li { margin: 0; }
.almanac-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--almanac-space-md);
  padding: var(--almanac-space-md) 0;
  border-bottom: 1px solid var(--almanac-border);
}
/* No hover background fill — the row is flush-left (padding-left:0), so a bg
   would touch the content edge. Hover cue is the title underline below. */
/* No closing divider on the final list-view row (it sits directly above
   pagination). Matches the last-child border reset used elsewhere. Grid view
   carries its own full border, so this is scoped to the default list view. */
body:not(.almanac-view-grid) .almanac-cards > li:last-child .almanac-card { border-bottom: 0; }
.almanac-card__media {
  flex: 0 0 200px;
  margin: 0;
  line-height: 0;
}
.almanac-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--almanac-radius-md);
  border: 0;
}
.almanac-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Category reads as a quiet tan eyebrow in both views (no pill chrome). */
.almanac-card__cat,
.almanac-card__cat a {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--almanac-tan-deep);
  text-decoration: none;
  background: none;
  padding: 0;
}
.almanac-card__title { margin: 0; }
.almanac-card__title a {
  font-family: var(--almanac-font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--almanac-fg-primary);
  text-decoration: none;
}
.almanac-card__title a:hover { text-decoration: underline; text-decoration-color: var(--almanac-yellow); text-decoration-thickness: 2px; }
.almanac-card__excerpt {
  font-size: 0.9375rem;
  color: var(--almanac-fg-secondary);
  margin: 0;
  line-height: 1.5;
}
/* Full-width so the inner date↔category-pill row can space-between to the card
   edge (the card body is a flex column with align-items:flex-start, which would
   otherwise shrink this template-part wrapper to its content width). */
.almanac-card__meta { font-size: 0.75rem; color: var(--almanac-fg-tertiary); align-self: stretch; width: 100%; }

/* ---- GRID view (Settings → Reading = Grid) — three-up surface cards ------- */
.almanac-view-grid .almanac-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--almanac-space-md);
}
.almanac-view-grid .almanac-card {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-bottom: 0;
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-lg);
  overflow: hidden;
}
.almanac-view-grid .almanac-card:hover { background: var(--almanac-bg-cream); }
.almanac-view-grid .almanac-card__media { flex: none; }
.almanac-view-grid .almanac-card__media img {
  aspect-ratio: 3 / 2;
  border-radius: 0;
}
.almanac-view-grid .almanac-card__body { padding: 14px; gap: 8px; }
.almanac-view-grid .almanac-card__title a { font-size: 1.0625rem; font-weight: 600; }

/* ---- Responsive ----------------------------------------------------------- */
/* Grid: 3-up desktop → 2-up tablet → 1-up mobile (WP core skips the tablet tier). */
@media (min-width: 601px) and (max-width: 1023px) {
  .almanac-view-grid .almanac-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .almanac-view-grid .almanac-cards { grid-template-columns: 1fr; }
}
/* List rows stack the image on top on narrow screens. */
@media (max-width: 640px) {
  .almanac-cards .almanac-card { flex-direction: column; align-items: stretch; }
  .almanac-cards .almanac-card__media { flex: none; }
  .almanac-cards .almanac-card__media img { aspect-ratio: 3 / 2; max-height: 220px; }
}

/* ----------------------------------------------------------------------------
   18. Pill chips (post terms in is-style-almanac-pills)
   ---------------------------------------------------------------------------- */
.is-style-almanac-pills a,
.wp-block-post-terms.is-style-almanac-pills a {
  display: inline-block;
  padding: 4px 12px;
  background: var(--almanac-tan-soft);
  color: var(--almanac-tan-deep);
  border-radius: var(--almanac-radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background var(--almanac-duration) var(--almanac-ease), color var(--almanac-duration) var(--almanac-ease);
}
.is-style-almanac-pills a:hover {
  background: var(--almanac-yellow-soft);
  color: var(--almanac-fg-primary);
}

/* ----------------------------------------------------------------------------
   19. Post meta strip
   ---------------------------------------------------------------------------- */
.almanac-post-meta {
  font-size: 0.875rem;
  color: var(--almanac-fg-tertiary);
  gap: var(--almanac-space-sm) !important;
}
.almanac-post-meta a {
  color: var(--almanac-tan-deep);
  text-decoration: none;
}
.almanac-post-meta a:hover { color: var(--almanac-fg-primary); text-decoration: underline; }
.almanac-post-meta__author { font-weight: 600; color: var(--almanac-fg-secondary); }
.almanac-post-meta__sep { color: var(--almanac-fg-quaternary); }
.almanac-post-meta__reading::before { content: ""; }

/* Listing-card meta row — date on the left, category as a right-aligned pill,
   both on one line (was: category kicker up top + lone date down here).
   Forced flex + full width so the pill reaches the card edge regardless of
   whether WP's generated layout class lands on the template part. */
.almanac-post-meta {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  align-self: stretch;
}
.almanac-post-meta__date { flex: 0 0 auto; white-space: nowrap; }
.almanac-post-meta__cat {
  flex: 0 1 auto;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  margin: 0;
}
/* Category keeps its original quiet tan eyebrow look — just relocated onto the
   date line (right-aligned), no pill chrome. */
.almanac-post-meta__cat,
.almanac-post-meta__cat a {
  font-family: var(--almanac-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--almanac-tan-deep);
  text-decoration: none;
  background: none;
  padding: 0;
  white-space: nowrap;
}
.almanac-post-meta__cat a:hover { color: var(--almanac-yellow-deep); }

/* ----------------------------------------------------------------------------
   20. Empty states / 404
   ---------------------------------------------------------------------------- */
.almanac-empty,
.almanac-404__inner {
  text-align: center;
  padding: var(--almanac-space-2xl) 0;
}
.almanac-empty img,
.almanac-404__mascot img {
  margin: 0 auto var(--almanac-space-md);
  display: block;
  width: 140px;
  height: auto;
}
.almanac-404__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--almanac-tan-deep);
  margin: 0 0 var(--almanac-space-sm);
}
.almanac-404__title,
.almanac-empty__title {
  font-family: var(--almanac-font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--almanac-space-sm);
}
.almanac-404__lede,
.almanac-empty__lede {
  max-width: 32rem;
  margin: 0 auto var(--almanac-space-lg);
  color: var(--almanac-fg-secondary);
  font-size: 1.0625rem;
}
.almanac-404__actions {
  display: flex;
  gap: var(--almanac-space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------------------
   20b. Auth — signup/signin pages
   ---------------------------------------------------------------------------- */
.almanac-auth {
  display: flex;
  justify-content: center;
}
.almanac-auth__card {
  width: 100%;
  max-width: 28rem;
  padding: var(--almanac-space-2xl) var(--almanac-space-xl);
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-xl);
  text-align: center;
  box-shadow: var(--almanac-shadow-card);
}
.almanac-auth__mascot {
  display: block;
  margin: 0 auto var(--almanac-space-md);
  width: 96px;
  height: auto;
}
.almanac-auth__mascot[hidden] { display: none; }
[hidden] { display: none !important; }
.almanac-auth__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--almanac-fg-secondary);
  margin: 0 0 var(--almanac-space-xs);
}
.almanac-auth__title {
  font-family: var(--almanac-font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--almanac-space-sm);
}
.almanac-auth__lede {
  font-size: 1rem;
  color: var(--almanac-fg-secondary);
  line-height: 1.5;
  margin: 0 0 var(--almanac-space-lg);
}
.almanac-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--almanac-space-sm);
}
.almanac-auth__form input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.875rem 1rem;
  background: var(--almanac-bg-paper);
  color: var(--almanac-fg-primary);
  border: 1px solid var(--almanac-border-strong);
  border-radius: var(--almanac-radius-md);
  text-align: center;
}
.almanac-auth__form input[type="email"]:focus {
  outline: none;
  border-color: var(--almanac-yellow);
  box-shadow: var(--almanac-shadow-focus);
}
.almanac-auth__form .almanac-btn {
  justify-content: center;
  padding-block: 0.875rem;
}
.almanac-auth__alt {
  margin: var(--almanac-space-lg) 0 0;
  font-size: 0.9375rem;
  color: var(--almanac-fg-tertiary);
}
.almanac-auth__alt a { color: var(--almanac-tan-deep); }
.almanac-auth__success-title {
  font-family: var(--almanac-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--almanac-space-sm);
}
.almanac-auth__success-lede {
  margin: 0 0 var(--almanac-space-md);
  color: var(--almanac-fg-secondary);
}
.almanac-auth__success-help {
  font-size: 0.875rem;
  color: var(--almanac-fg-tertiary);
  margin: 0;
}
.almanac-auth__resend {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--almanac-tan-deep);
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}
.almanac-auth__error-msg {
  color: var(--almanac-danger);
  margin: var(--almanac-space-md) 0 0;
  font-size: 0.9375rem;
}

/* ----------------------------------------------------------------------------
   20c. Account page
   ---------------------------------------------------------------------------- */
.almanac-account__header { margin-bottom: var(--almanac-space-xl); padding-bottom: var(--almanac-space-lg); border-bottom: 1px solid var(--almanac-border); }
.almanac-account__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--almanac-tan-deep);
  margin: 0;
}
.almanac-account__title {
  font-family: var(--almanac-font-display);
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--almanac-space-sm);
}
.almanac-account__lede { color: var(--almanac-fg-secondary); margin: 0; }
.almanac-account__section { padding-bottom: var(--almanac-space-lg); border-bottom: 1px solid var(--almanac-border); }
.almanac-account__section:last-child { border-bottom: 0; }
.almanac-account__section--danger { background: var(--almanac-bg-cream); padding: var(--almanac-space-lg); border-radius: var(--almanac-radius-md); }
.almanac-account__section-title {
  font-family: var(--almanac-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--almanac-space-sm);
}
.almanac-account__field { font-size: 1rem; margin: 0 0 var(--almanac-space-2xs); }
.almanac-account__field-help { font-size: 0.875rem; color: var(--almanac-fg-tertiary); margin: 0; }
.almanac-account__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--almanac-space-sm);
  margin-top: var(--almanac-space-sm);
}
.almanac-account__form input[type="text"] {
  flex: 1 1 14rem;
  padding: 0.625rem 0.875rem;
  font: inherit;
  background: var(--almanac-bg-paper);
  color: var(--almanac-fg-primary);
  border: 1px solid var(--almanac-border-strong);
  border-radius: var(--almanac-radius-md);
}
.almanac-account__form input[type="text"]:focus {
  outline: none;
  border-color: var(--almanac-yellow);
  box-shadow: var(--almanac-shadow-focus);
}
.almanac-account__prefs {
  flex-direction: column;
  gap: var(--almanac-space-xs);
}
.almanac-account__prefs label {
  display: flex;
  align-items: center;
  gap: var(--almanac-space-xs);
  font-size: 0.9375rem;
  cursor: pointer;
}
.almanac-account__prefs label input { accent-color: var(--almanac-yellow-deep); }

/* ----------------------------------------------------------------------------
   20d. Member-only content gate
   ---------------------------------------------------------------------------- */
.almanac-gate {
  position: relative;
  margin: var(--almanac-space-xl) 0;
  padding: var(--almanac-space-xl);
  background: linear-gradient(180deg, transparent, var(--almanac-bg-cream) 60%);
  border-top: 1px solid var(--almanac-border);
  text-align: center;
}
.almanac-gate::before {
  content: "";
  position: absolute;
  inset: -120px 0 100% 0;
  background: linear-gradient(180deg, transparent, var(--almanac-bg-paper) 90%);
  pointer-events: none;
}
.almanac-gate__title {
  font-family: var(--almanac-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--almanac-space-sm);
}
.almanac-gate__lede {
  margin: 0 auto var(--almanac-space-md);
  max-width: 32rem;
  color: var(--almanac-fg-secondary);
}
.almanac-gate__cta {
  display: inline-flex;
  gap: var(--almanac-space-sm);
}

/* Newsletter success / error */
.almanac-newsletter__thanks { margin: 0; font-weight: 600; color: var(--almanac-success); }
.almanac-newsletter__error  { margin: var(--almanac-space-xs) 0 0; font-size: 0.875rem; color: var(--almanac-danger); }

/* ----------------------------------------------------------------------------
   21. Pagination
   ---------------------------------------------------------------------------- */
.wp-block-query-pagination {
  display: flex !important;
  align-items: center;
  gap: var(--almanac-space-sm) !important;
  margin-top: var(--almanac-space-xl);
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-comments-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 36px;
  min-height: 44px;
  padding: 0 0.625rem;
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  color: var(--almanac-fg-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background var(--almanac-duration) var(--almanac-ease), border-color var(--almanac-duration) var(--almanac-ease), color var(--almanac-duration) var(--almanac-ease);
}
.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover,
.wp-block-comments-pagination .page-numbers:hover {
  background: var(--almanac-yellow-soft);
  border-color: var(--almanac-yellow);
}
.wp-block-query-pagination .page-numbers.current,
.wp-block-comments-pagination .page-numbers.current {
  background: var(--almanac-fg-primary);
  color: var(--almanac-fg-inverted);
  border-color: var(--almanac-fg-primary);
}

/* Search results page */
.almanac-search-results__header {
  margin-bottom: var(--almanac-space-xl);
}
.almanac-search-results__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--almanac-tan-deep);
  margin: 0;
}
.almanac-search-results__title {
  font-family: var(--almanac-font-display);
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
}
.almanac-search-results__title .wp-block-query-title { display: inline; }

/* ----------------------------------------------------------------------------
   21b. Homepage — "Recently updated" rail (the USP)
   ---------------------------------------------------------------------------- */
.almanac-updated-rail {
  position: relative;
  padding: var(--almanac-space-md) var(--almanac-space-md) var(--almanac-space-md) var(--almanac-space-lg);
  margin: 0;
  background: transparent;
  border: 0;
}
.almanac-updated-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--almanac-yellow);
  border-radius: 2px;
}
.almanac-updated-rail__header {
  display: flex;
  flex-direction: column;
  gap: var(--almanac-space-2xs);
  margin-bottom: var(--almanac-space-md);
}
.almanac-updated-rail__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--almanac-space-2xs);
  font-family: var(--almanac-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--almanac-tan-deep);
  margin: 0;
}
.almanac-updated-rail__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--almanac-yellow-deep);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.25);
  animation: almanac-pulse 2.4s var(--almanac-ease) infinite;
}
.almanac-updated-rail__title {
  font-family: var(--almanac-font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.1;
  margin: 0;
  font-optical-sizing: auto;
}
.almanac-updated-rail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: min-content;
  gap: var(--almanac-space-sm);
  counter-reset: almanac-updated-counter;
}
.almanac-updated-rail__item {
  counter-increment: almanac-updated-counter;
  margin: 0;
}
.almanac-updated-rail__link {
  display: flex;
  gap: var(--almanac-space-sm);
  padding: var(--almanac-space-xs) var(--almanac-space-sm);
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  text-decoration: none;
  transition: border-color var(--almanac-duration) var(--almanac-ease), transform var(--almanac-duration) var(--almanac-ease);
  position: relative;
}
.almanac-updated-rail__link:hover {
  border-color: var(--almanac-yellow);
  transform: translateY(-1px);
}
.almanac-updated-rail__link::before { display: none; }
.almanac-updated-rail__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.almanac-updated-rail__headline {
  font-family: var(--almanac-font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--almanac-fg-primary);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   21c. Homepage — category rails
   ---------------------------------------------------------------------------- */
.almanac-home__section-title {
  font-family: var(--almanac-font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.1;
  margin: 0 0 var(--almanac-space-md);
}

.almanac-cat-rail {
  position: relative;
  border-top: 1px solid var(--almanac-border);
  padding-top: var(--almanac-space-lg);
}
.almanac-cat-rail::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--almanac-yellow);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px var(--almanac-bg-paper);
}
.almanac-cat-rail__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--almanac-space-md);
  margin-bottom: var(--almanac-space-md);
  flex-wrap: wrap;
}
.almanac-cat-rail__title {
  font-family: var(--almanac-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.almanac-cat-rail__title a { text-decoration: none; color: inherit; }
.almanac-cat-rail__title a:hover { text-decoration: underline; text-decoration-color: var(--almanac-yellow); text-decoration-thickness: 2px; }
.almanac-cat-rail__more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--almanac-tan-deep);
  text-decoration: none;
  transition: color var(--almanac-duration) var(--almanac-ease);
}
.almanac-cat-rail__more:hover { color: var(--almanac-fg-primary); text-decoration: underline; }
.almanac-cat-rail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--almanac-space-md);
}
.almanac-cat-rail__item { margin: 0; }
.almanac-cat-rail__link {
  display: flex;
  flex-direction: column;
  gap: var(--almanac-space-2xs);
  text-decoration: none;
  color: inherit;
}
.almanac-cat-rail__thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--almanac-radius-md);
  border: 1px solid var(--almanac-border);
}
.almanac-cat-rail__headline {
  font-family: var(--almanac-font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--almanac-fg-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Extra room above the headline only when a thumb precedes it, so thumbless
   cards align to the grid-row top instead of being pushed down. */
.almanac-cat-rail__thumb + .almanac-cat-rail__headline { margin-top: var(--almanac-space-xs); }
.almanac-cat-rail__link:hover .almanac-cat-rail__headline { text-decoration: underline; text-decoration-color: var(--almanac-yellow); text-decoration-thickness: 2px; }
.almanac-cat-rail__date {
  font-size: 0.8125rem;
  color: var(--almanac-fg-tertiary);
}

/* ----------------------------------------------------------------------------
   21d. Tag / category / author archive headers (hub-grade)
   ---------------------------------------------------------------------------- */
.almanac-tag__header,
.almanac-category__header,
.almanac-author__header,
.almanac-archive__header {
  padding-bottom: var(--almanac-space-lg);
  border-bottom: 1px solid var(--almanac-border);
}
.almanac-tag__eyebrow,
.almanac-category__eyebrow,
.almanac-author__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--almanac-tan-deep);
  margin: 0;
}
.almanac-tag__title,
.almanac-category__title,
.almanac-author__name,
.almanac-archive__title {
  font-family: var(--almanac-font-display);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 var(--almanac-space-xs);
}
.almanac-tag__description,
.almanac-category__description,
.almanac-author__bio,
.almanac-archive__description {
  font-size: 1.0625rem;
  color: var(--almanac-fg-secondary);
  max-width: 56rem;
  line-height: 1.55;
  margin: 0;
}
.almanac-tag__count {
  font-size: 0.875rem;
  color: var(--almanac-fg-tertiary);
  margin: var(--almanac-space-xs) 0 0;
}
.almanac-author__avatar img { border-radius: 50%; }

/* ----------------------------------------------------------------------------
   22. Footer
   ---------------------------------------------------------------------------- */
.almanac-site-footer {
  margin-top: 0;
  background: var(--almanac-bg-cream);
  border-top: 1px solid var(--almanac-border-strong);
  color: var(--almanac-fg-secondary);
}
.almanac-site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--almanac-space-xl);
  margin-bottom: var(--almanac-space-lg);
  justify-content: space-between;
}
.almanac-site-footer__brand {
  flex: 1 1 22rem;
  max-width: 26rem;
}
.almanac-site-footer__newsletter {
  flex: 1 1 22rem;
  max-width: 28rem;
}
.almanac-site-footer__brand .almanac-logo img { max-height: 32px; width: auto; }
.almanac-site-footer__tagline {
  margin-top: var(--almanac-space-sm);
  font-size: 0.9375rem;
  color: var(--almanac-fg-tertiary);
  line-height: 1.5;
}
.almanac-site-footer__rule {
  border: 0;
  height: 1px;
  background: var(--almanac-border);
  margin: var(--almanac-space-lg) 0;
}
.almanac-site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--almanac-space-md);
  font-size: 0.875rem;
  color: var(--almanac-fg-tertiary);
}
.almanac-site-footer__copyright { margin: 0; }
.almanac-footer-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--almanac-space-lg);
}
.almanac-footer-nav li { margin: 0; }
.almanac-footer-nav a {
  font-size: 0.875rem;
  color: var(--almanac-fg-tertiary);
  text-decoration: none;
  transition: color var(--almanac-duration) var(--almanac-ease);
}
.almanac-footer-nav a:hover { color: var(--almanac-fg-primary); text-decoration: underline; }

/* ----------------------------------------------------------------------------
   23. Comments
   ---------------------------------------------------------------------------- */
/* Hide the entire comments section when the post has neither comments nor a
 * comment form (closed comments). Otherwise the 64px wrapper padding renders
 * as dead space between the post body and the footer.
 */
.almanac-comments:not(:has(form)):not(:has(.wp-block-comment-template li)) {
  display: none;
}
.wp-block-comments-pagination,
.wp-block-comments-form,
.wp-block-comment-template {
  margin-top: var(--almanac-space-xl);
}
.wp-block-comment-template li {
  padding: var(--almanac-space-md) 0;
  border-top: 1px solid var(--almanac-border);
}
.wp-block-comment-author-name a { font-weight: 600; }
.wp-block-comments-form textarea,
.wp-block-comments-form input[type="text"],
.wp-block-comments-form input[type="email"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  background: var(--almanac-bg-canvas);
  color: var(--almanac-fg-primary);
  border: 1px solid var(--almanac-border-strong);
  border-radius: var(--almanac-radius-md);
}

/* ----------------------------------------------------------------------------
   24. Print
   ---------------------------------------------------------------------------- */
@media print {
  .almanac-site-header,
  .almanac-site-footer,
  .almanac-toc,
  .almanac-feedback,
  .almanac-related,
  .almanac-newsletter,
  .almanac-scroll-progress,
  .almanac-search-overlay,
  .almanac-series-nav { display: none !important; }
  body { background: white; color: black; font-size: 11pt; }
  .almanac-post__main { max-width: 100%; }
  a { color: black; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .almanac-post__content h2[id]::before,
  .almanac-post__content h3[id]::before { display: none; }
}

/* ----------------------------------------------------------------------------
   25. Reduced motion
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ----------------------------------------------------------------------------
   26. Sidebar — two-column shell for home + archive templates
   ----------------------------------------------------------------------------
   `.almanac-layout` wraps the post river (`.almanac-layout__main`) next to a
   sticky `.almanac-sidebar`. Mobile-first: stacked by default, two columns
   from 1024px up (matching the article rail breakpoint). The sidebar holds
   the newsletter, a "Recently updated" list, categories and a tag cloud.
   ---------------------------------------------------------------------------- */
.almanac-layout { display: block; }
.almanac-layout__main { min-width: 0; }
.almanac-sidebar { margin-top: var(--almanac-space-2xl); }

@media (min-width: 1024px) {
  .almanac-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--almanac-space-2xl);
  }
  .almanac-layout__main { flex: 1 1 auto; }
  .almanac-sidebar {
    flex: 0 0 19rem;
    width: 19rem;
    margin-top: 0;
    position: sticky;
    top: calc(var(--almanac-header-h) + 1rem);
    align-self: flex-start;
  }
}

/* Widget shell ------------------------------------------------------------- */
.almanac-sidebar__inner { width: 100%; }
.almanac-widget {
  margin: 0;
  padding: 0;
}
.almanac-widget__title {
  font-family: var(--almanac-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 var(--almanac-space-sm);
  padding-bottom: var(--almanac-space-xs);
  border-bottom: 2px solid var(--almanac-border-strong);
}
.almanac-widget__eyebrow {
  font-family: var(--almanac-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--almanac-tan-deep);
  margin: 0 0 var(--almanac-space-2xs);
}

/* Newsletter widget -------------------------------------------------------- */
.almanac-widget--newsletter {
  background: var(--almanac-bg-cream);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  padding: var(--almanac-space-lg);
}
.almanac-widget--newsletter .almanac-widget__title {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: var(--almanac-space-2xs);
}
.almanac-widget__lede {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--almanac-fg-secondary);
  margin: 0 0 var(--almanac-space-sm);
}
.almanac-widget__form {
  display: flex;
  flex-direction: column;
  gap: var(--almanac-space-xs);
}
.almanac-widget__form input[type="email"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  border: 1px solid var(--almanac-border-strong);
  border-radius: var(--almanac-radius-md);
  background: var(--almanac-bg-paper);
  color: var(--almanac-fg-primary);
}
.almanac-widget__form input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--almanac-tan);
  box-shadow: var(--almanac-shadow-focus);
}
.almanac-widget__form .almanac-btn { width: 100%; justify-content: center; }

/* Recently updated list ---------------------------------------------------- */
.almanac-widget__posts { list-style: none; margin: 0; padding: 0; }
.almanac-widget__posts > li { margin: 0; }
.almanac-widget__post {
  padding: var(--almanac-space-sm) 0;
  border-bottom: 1px solid var(--almanac-border);
}
.almanac-widget__posts > li:last-child .almanac-widget__post { border-bottom: 0; padding-bottom: 0; }
.almanac-widget__post-title { margin: 0; }
.almanac-widget__post-title a {
  font-family: var(--almanac-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--almanac-fg-primary);
  text-decoration: none;
}
.almanac-widget__post-title a:hover { color: var(--almanac-tan-deep); }
.almanac-widget__post-date {
  display: block;
  font-size: 0.75rem;
  color: var(--almanac-fg-tertiary);
}
.almanac-widget__post-date::before { content: "Updated "; }

/* Categories list ---------------------------------------------------------- */
.almanac-widget__cats-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.almanac-widget__cats-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--almanac-space-sm);
  margin: 0;
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--almanac-border);
  /* core/categories appends the post count as a bare text node (no .post-count
     span), which becomes the trailing flex item. These li-level styles render
     that bare count small/tertiary; the anchor re-asserts its own size/colour. */
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--almanac-fg-quaternary);
}
.almanac-widget__cats-list li:last-child { border-bottom: 0; }
.almanac-widget__cats-list a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--almanac-fg-secondary);
  text-decoration: none;
}
.almanac-widget__cats-list a:hover { color: var(--almanac-tan-deep); }
/* Kept for the legacy categories widget, which does emit a .post-count span. */
.almanac-widget__cats-list .post-count {
  flex: none;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--almanac-fg-quaternary);
}

/* Tag cloud ---------------------------------------------------------------- */
.almanac-widget__tags-cloud { display: flex; flex-wrap: wrap; gap: var(--almanac-space-2xs); }
.almanac-widget__tags-cloud a {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem !important;
  font-weight: 500;
  line-height: 1.4;
  color: var(--almanac-fg-secondary);
  background: var(--almanac-bg-cream);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-pill);
  text-decoration: none;
}
.almanac-widget__tags-cloud a:hover {
  color: var(--almanac-fg-primary);
  border-color: var(--almanac-tan);
  background: var(--almanac-tan-soft);
}

/* ----------------------------------------------------------------------------
   Contact form — on-brand, light/dark aware (tokens flip with the theme).
   Markup lives on the page; assets/js/contact.js submits it inline.
   ---------------------------------------------------------------------------- */
.almanac-contact-form {
  max-width: 34rem;
  margin: 2rem 0;
  display: grid;
  gap: var(--almanac-space-md);
}
.almanac-contact-form .almanac-field { display: grid; gap: 0.4rem; }
.almanac-contact-form label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--almanac-fg-secondary);
}
.almanac-contact-form input,
.almanac-contact-form textarea {
  width: 100%;
  font: inherit;
  color: var(--almanac-fg-primary);
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--almanac-duration) var(--almanac-ease),
              box-shadow var(--almanac-duration) var(--almanac-ease);
}
.almanac-contact-form textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.almanac-contact-form input::placeholder,
.almanac-contact-form textarea::placeholder { color: var(--almanac-fg-secondary); opacity: 0.55; }
.almanac-contact-form input:focus,
.almanac-contact-form textarea:focus {
  outline: none;
  border-color: var(--almanac-yellow-deep, var(--almanac-yellow));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--almanac-yellow) 42%, transparent);
}
.almanac-contact-form__submit {
  justify-self: start;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: var(--almanac-bg-paper);
  background: var(--almanac-fg-primary);
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  transition: background var(--almanac-duration) var(--almanac-ease),
              color var(--almanac-duration) var(--almanac-ease),
              transform var(--almanac-duration) var(--almanac-ease);
}
.almanac-contact-form__submit:hover {
  background: var(--almanac-yellow);
  color: var(--almanac-on-yellow, #1a1612);
  transform: translateY(-1px);
}
.almanac-contact-form__submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.almanac-contact-form__status { margin: 0.25rem 0 0; font-size: 0.92rem; line-height: 1.5; }
.almanac-contact-form__status.is-success { color: var(--almanac-success, #2e7d32); font-weight: 600; }
.almanac-contact-form__status.is-error { color: var(--almanac-danger, #c0392b); }
.almanac-contact-form .almanac-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }