/* BeargrassAlmanac heritage stylesheet.
   Source: archived templates April 2026, then de-duplicated and scoped per page.
   Scope rule: anything that differs by page lives under body.page-<id>.
   Tokens (palette, type) live in tokens.css. */

/* ============================================================
   Reset and base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; }

body.almanac-heritage {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  /* No padding-bottom here: the .site-foot provides its own closing band. */
  transition: background 0.3s, color 0.3s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.almanac-heritage.page-essay { font-size: 19px; }
[data-mode="lamplight"] body.almanac-heritage { letter-spacing: 0.01em; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ============================================================
   Heritage chrome (top bar)
   Matches archive/templates/almanac-reading.html
   ============================================================ */
.heritage-chrome {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-elev) 92%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
@supports not (backdrop-filter: blur(1px)) {
  .heritage-chrome { background: var(--paper-elev); }
}
.heritage-chrome__inner {
  max-width: var(--w-chrome);
  margin: 0 auto;
  /* Horizontal padding tied to --pad-x so the chrome edges align
     with body content (sales-main, masthead, lead, footer all use
     --pad-x). Earlier 3vw differed from 4vw in the body, surfacing
     a half-vw off-by between chrome and content at the 1066-1300px
     viewport band. One clamp across chrome + body. */
  padding: 16px var(--pad-x);
  display: flex;
  /* Nowrap on desktop. The cluster (nav + mode-toggle + CTA) and the
     wordmark must share one row; wrapping them was the source of the
     "button cut in half" symptom on narrower desktop viewports. The
     mobile breakpoint at 820px below restores column behavior. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.25rem;
}
.heritage-header-cluster {
  display: flex;
  /* Nowrap on desktop so the nav, mode-toggle, and CTA stay on the
     same row as the wordmark even when the wordmark is large.
     Mobile (<= 820px) breakpoint below this file restores wrap so
     the nav-toggle Menu pattern still works at small widths. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 1.25rem;
  flex: 1 1 auto;
  min-width: 0;
}
.wordmark-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.heritage-chrome .wordmark-type {
  font-family: var(--fraunces);
  /* Chrome wordmark sized for a nav bar (single-row chrome height
     stays under ~52px). The 2026-04-27 doubled chrome wordmark
     made the chrome read as a masthead instead of a nav, and broke
     vertical alignment with the sub-nav row + the rest of the nav
     items. Reverted to a tighter clamp; section identity now lives
     in the row 2 sub-nav, not in an oversized wordmark. */
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
  letter-spacing: -0.02em;
}
.heritage-chrome .wordmark-type .w-the {
  color: var(--ink-sec);
  font-variation-settings: "opsz" 90, "wght" 350, "SOFT" 100, "WONK" 0;
  font-style: italic;
  font-size: 0.64em;
  margin-right: 0.06em;
}
.heritage-chrome .wordmark-type .w-beargrass {
  color: var(--indigo);
  font-variation-settings: "opsz" 120, "wght" 450, "SOFT" 80, "WONK" 1;
}
.heritage-chrome .wordmark-type .w-almanac {
  color: var(--barn);
  font-variation-settings: "opsz" 120, "wght" 800, "SOFT" 0, "WONK" 1;
}

/* Universal chrome wordmark lockup. Same look across every chrome
   (sales, learn, almanac). Section identity rides in the row 2
   sub-nav and the body content, never in the chrome wordmark. */
.heritage-chrome .bgai-wm {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  font-family: var(--fraunces);
  font-weight: 600;
  font-size: inherit;
  letter-spacing: 0.01em;
}
.heritage-chrome .bgai-wm .w-beargrass { color: var(--ink); }
.heritage-chrome .bgai-wm .w-ai {
  color: var(--barn);
  font-weight: 700;
}

.heritage-sitenav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  font-family: var(--ui);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  min-width: 0;
}
.heritage-sitenav a {
  color: var(--ink-sec);
  text-decoration: none;
}
.heritage-sitenav a:hover { color: var(--ink); }
.heritage-sitenav a.is-active { color: var(--barn); font-weight: 600; }

/* ---------------------------------------------------------------------
   Two-row chrome: row 1 (global nav) + row 2 (section sub-nav).
   Row 2 is rendered when the page's chrome supplies a section_nav;
   otherwise the .heritage-chrome__inner--section block is omitted by
   the generator and the chrome reads as one row. See
   templates/chrome/base.html for the rendered slots and
   generator/build.py:build_section_nav_block for the markup.
   --------------------------------------------------------------------- */
.heritage-chrome__inner--section {
  max-width: var(--w-chrome);
  margin: 0 auto;
  /* Same horizontal padding as row 1 (and as body content) so the
     edition indicator and section nav align with the wordmark + nav
     above and the article body below. */
  padding: 0.55rem var(--pad-x);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  font-family: var(--ui);
}

.heritage-edition {
  font-family: var(--ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--barn);
  flex-shrink: 0;
  /* The edition indicator owns the left edge of row 2 so the eye
     reads "what edition am I in" before the section list. */
}
.heritage-edition::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin: 0 0.25rem 0 0.85rem;
  background: var(--rule);
  vertical-align: -0.1em;
}

.heritage-sectionnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.4rem;
  font-family: var(--ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  flex: 1 1 auto;
  min-width: 0;
}
.heritage-sectionnav a {
  color: var(--ink-ter);
  text-decoration: none;
  transition: color 0.18s ease;
}
.heritage-sectionnav a:hover { color: var(--ink); }
.heritage-sectionnav a.is-active {
  color: var(--barn);
  font-weight: 600;
}

@media (max-width: 700px) {
  .heritage-chrome__inner--section {
    /* On narrow widths the sub-nav becomes a horizontally-scrollable
       rail so it does not stack into a tall block above the article. */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }
  .heritage-sectionnav {
    flex-wrap: nowrap;
  }
  .heritage-sectionnav a { white-space: nowrap; }
}

/* CTA wrapper in the chrome. Sits AFTER the mode-toggle on the right
   edge of the chrome row, so the visual order is:
     [wordmark]   [nav links]   [mode toggle]   [CONTACT button]
   Empty wrappers (Almanac, Learn, any chrome with no `cta: True`
   nav item) collapse to zero space via :empty.
   The button is sized to match the text-link rhythm of the nav. */
.heritage-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--ui);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.heritage-cta a.cta {
  background: var(--barn);
  color: var(--paper);
  /* Symmetric vertical padding plus an explicit line-height controls
     the visual height directly. The earlier `height: 1.85em` was
     calculating against an inherited font size that ended up offset
     from the chrome center, dropping the button low in the row.
     This form sizes from its own content and centers cleanly under
     the parent flex `align-items: center`. */
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 2px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.heritage-cta a.cta:hover {
  filter: brightness(1.08);
  color: var(--paper);
}
.heritage-cta a.cta.is-active {
  background: var(--ink);
  color: var(--paper);
}

.mode-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  flex-shrink: 0;
}
.mode-toggle button {
  background: transparent;
  border: none;
  margin: 0;
  font-family: var(--ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 5px 10px;
  color: var(--ink-ter);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  line-height: 1;
}
.mode-toggle button[aria-pressed="true"] {
  background: var(--paper-elev);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(35, 31, 26, 0.12);
}
/* On sunrise pages, the toggle reads against the dark sky */
body[data-sunrise] .mode-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
body[data-sunrise] .mode-toggle button { color: rgba(244, 235, 215, 0.75); }
body[data-sunrise] .mode-toggle button[aria-pressed="true"] {
  background: var(--barn);
  color: var(--paper);
}
html[data-mode="lamplight"] .mode-toggle button[aria-pressed="true"] {
  background: var(--paper-elev);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
}
.mode-toggle button:focus:not(:focus-visible) { outline: none; }
.mode-toggle button:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
.mode-toggle svg { width: 12px; height: 12px; flex-shrink: 0; }

@media (max-width: 700px) {
  /* Mobile chrome stays a single row: wordmark left, cluster right
     (Menu icon, mode pill, Contact button), ALL on one line. The
     earlier rule stacked each item into its own row, eating ~5x the
     vertical space the chrome needed. The 2026-04-27 mobile review
     called this out. The hidden nav drops to a second row when the
     Menu button is tapped (see the 820px block below). */
  .heritage-chrome__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
  }
  .heritage-header-cluster {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.5rem;
    justify-content: flex-end;
  }
  .heritage-chrome .wordmark-type { white-space: nowrap; }
  /* Tighten the cluster items so a 320px viewport can hold them. */
  .heritage-cta a.cta { padding: 0.35rem 0.65rem; }
  .mode-toggle button { padding: 5px 7px; }
  .mode-toggle button svg { width: 12px; height: 12px; }
}

/* ============================================================
   Shared keyframes
   ============================================================ */
@keyframes sprigDraw {
  0%   { stroke-dashoffset: var(--dash, 200); opacity: 0.2; }
  40%  { stroke-dashoffset: 0; opacity: 1; }
  80%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: calc(-1 * var(--dash, 200)); opacity: 0.2; }
}
@keyframes sheenPan {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@keyframes axisSwell {
  0%, 100% { font-variation-settings: "opsz" 90,  "wght" 500, "SOFT" 40, "WONK" 1; }
  50%      { font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 60, "WONK" 1; }
}
@keyframes pqShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@keyframes wmBreath {
  0%, 100% { font-variation-settings: "opsz" 120; }
  50%      { font-variation-settings: "opsz" 130; }
}

/* ============================================================
   Headline treatment hooks
   Selected from archive/typography/almanac-h2-treatments.html.
   Naming: fx-* matches the gallery so cross-reference is easy.
   ============================================================ */

/* H2-3 eyebrow tag above a heading.
   Wrap heading in <header class="fx-eyebrow"> with a <span class="eyebrow">. */
.fx-eyebrow .eyebrow {
  display: block;
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--barn);
  margin-bottom: 0.5rem;
}
.fx-eyebrow .eyebrow::after {
  content: "";
  display: inline-block;
  margin-left: 0.55rem;
  width: 22px;
  height: 1px;
  vertical-align: middle;
  background: color-mix(in srgb, var(--barn) 55%, transparent);
}

/* H2-5 left vertical indigo rule on a heading. */
.fx-left-rule {
  border-left: 3px solid var(--indigo);
  padding-left: 0.85rem;
}

/* H2-11 small-caps utility heading with barn underline.
   Used on the simple-page H3 for editorial sub-section labels. */
.fx-smallcaps {
  font-family: var(--ui);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--barn);
  display: inline-block;
}

/* H2-14 weight cascade per word.
   Wrap each word in <span class="w1"> through <span class="w4">. */
.fx-axis-cascade .w1 { font-variation-settings: "opsz" 80, "wght" 300, "SOFT" 100, "WONK" 0; }
.fx-axis-cascade .w2 { font-variation-settings: "opsz" 80, "wght" 450, "SOFT" 70,  "WONK" 1; }
.fx-axis-cascade .w3 { font-variation-settings: "opsz" 80, "wght" 600, "SOFT" 40,  "WONK" 1; }
.fx-axis-cascade .w4 { font-variation-settings: "opsz" 80, "wght" 800, "SOFT" 0,   "WONK" 1; color: var(--barn); }

/* ============================================================
   ALMANAC HEADING SEMANTIC SYSTEM
   Three named arcs that move weight, SOFT, WONK, and color
   together. Each arc encodes a different editorial role so
   the reader feels the section's job in the type itself.

   Markup pattern:
     <h2 class="fx-build">
       <span class="p1">First phrase</span>
       <span class="p2">middle phrase</span>
       <span class="p3">final phrase</span>
     </h2>

   Optional accent inside any heading:
     <strong class="fx-kw">operative word</strong>
   ============================================================ */

/* Defaults so a heading with these classes still looks right
   if the markup forgets the spans. */
.fx-build,
.fx-pivot,
.fx-settle {
  display: inline;
}
.fx-build > span,
.fx-pivot > span,
.fx-settle > span {
  display: inline;
  transition: font-variation-settings 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Unified "settle cadence" for all three arcs:
     p1: firm, saturated palette color
     p2: medium weight, SOFT opens, color mixes 70% toward ink
     p3: light, SOFT wide open, italic, color mixes 40% toward ink
   Each arc class only sets --fx-color. This lets the ambient
   gradient's semantic rotation (indigo -> barn -> olive) read as
   a chord with the heading, rather than three different heading
   treatments competing for attention. */
/* Arc to color mapping.
   Barn opens (fx-build, section I). Indigo thinks (fx-pivot,
   section II). Olive closes (fx-settle, section III). This is
   the canonical claim stated on the colophon palette. Do not
   swap without also swapping the colophon text. */
.fx-build  { --fx-color: var(--barn);   }
.fx-pivot  { --fx-color: var(--indigo); }
.fx-settle { --fx-color: var(--olive);  }

.fx-build > .p1,
.fx-pivot > .p1,
.fx-settle > .p1 {
  font-variation-settings: "opsz" 80, "wght" 700, "SOFT" 20, "WONK" 1;
  color: var(--fx-color);
}
.fx-build > .p2,
.fx-pivot > .p2,
.fx-settle > .p2 {
  font-variation-settings: "opsz" 80, "wght" 500, "SOFT" 50, "WONK" 1;
  color: color-mix(in srgb, var(--fx-color) 70%, var(--ink));
}
.fx-build > .p3,
.fx-pivot > .p3,
.fx-settle > .p3 {
  font-variation-settings: "opsz" 80, "wght" 350, "SOFT" 100, "WONK" 0;
  color: color-mix(in srgb, var(--fx-color) 40%, var(--ink));
  font-style: italic;
}

/* Anti-compete rule.
   When the page's H1 wears the .sheen-swell animation, the first
   H2 below it calms its axis cascade so the two do not fight for
   the eye. Arc color is preserved (p1 full arc color, p2 70% mix,
   p3 40% mix). Only the font-variation axes are firmed up: weight
   holds near 600 across all three phrases, SOFT drops to 25, WONK
   is 0, and the p3 italic is dropped. The heading still carries
   its arc identity through color; it just stops echoing the soft
   animated feel of the H1 sheen. Applies automatically to any
   article that pairs an .sheen-swell H1 with an fx- first H2. */
body:has(h1.headline.sheen-swell)
  article.article-body > header.fx-eyebrow:first-of-type
  :is(.fx-build, .fx-pivot, .fx-settle) > span {
  font-variation-settings: "opsz" 80, "wght" 600, "SOFT" 25, "WONK" 0;
  font-style: normal;
}

/* fx-kw. Operative noun. Drop inside any heading.
   Heaviest weight, barn red, SOFT 0. The hinge of the sentence. */
.fx-kw {
  font-variation-settings: "opsz" 80, "wght" 800, "SOFT" 0, "WONK" 1;
  color: var(--barn);
  font-style: normal;
  font-weight: inherit;
}

/* H2-15 sheen sweep. Letters always legible.
   Gradient is 300% wide, sweep moves left to right only.
   Already used on hero headlines via .sheen-sweep, here we
   alias .fx-sheen to match the gallery name. */
.fx-sheen {
  background-image: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--warm) 50%,
    var(--ink) 60%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-sheen-sweep 3.6s ease-in-out infinite;
  will-change: background-position;
}
html[data-mode="lamplight"] .fx-sheen {
  background-image: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--indigo) 50%,
    var(--ink) 60%, var(--ink) 100%);
}
@keyframes fx-sheen-sweep {
  0%   { background-position: 100% 0%; }
  100% { background-position:   0% 0%; }
}

/* Reduced-motion: kill animation, restore solid ink fill. */
@media (prefers-reduced-motion: reduce) {
  .fx-sheen,
  .sheen-sweep {
    animation: none !important;
    background: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
  }
}

/* ============================================================
   Shared utilities
   ============================================================ */
.clear { clear: both; }

/* Sheen sweep effect for headlines (used on essay and photo-essay) */
.sheen-sweep {
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--warm) 50%,
    var(--ink) 60%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheenPan 8s ease-in-out infinite, axisSwell 12s ease-in-out infinite;
}

/* Wordmark cascade used inside footer-wm */
.wm {
  font-family: var(--fraunces);
  letter-spacing: -0.015em;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1;
  color: var(--ink);
  animation: wmBreath 16s ease-in-out infinite;
}
.wm .w-the {
  font-variation-settings: "opsz" 90, "wght" 350, "SOFT" 100, "WONK" 0;
  font-style: italic;
  font-size: 0.64em;
  margin-right: 0.08em;
  color: var(--ink-sec);
}
.wm .w-beargrass {
  font-variation-settings: "opsz" 120, "wght" 450, "SOFT" 80, "WONK" 1;
  color: var(--indigo);
}
.wm .w-almanac {
  font-variation-settings: "opsz" 120, "wght" 800, "SOFT" 0, "WONK" 1;
  margin-left: 0.08em;
  color: var(--barn);
}

/* Bio divider, used on essay / field-notes / photo-essay */
.bio-wrap {
  max-width: var(--w-read);
  margin: var(--sp-lg) auto 0;
  padding: 0 var(--pad-x);
  text-align: center;
}
.bio-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 0;
}
/* Bio sprig. Now renders the canonical beargrass mark via
   <use href="#bg-mark">. The symbol's paths use stroke="currentColor",
   so the container's `color` property paints the glyph. Size is
   square because the mark is upright (stem + bud). */
.bio-sprig {
  width: 52px;
  height: 52px;
  color: var(--olive);
  display: block;
}
.bio-trio { display: flex; gap: 0.55rem; align-items: center; }
.bio-trio span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.bio-trio .d1 { background: var(--barn); }
.bio-trio .d2 { background: var(--indigo); }
.bio-trio .d3 { background: var(--olive); }
.bio-body {
  font-family: var(--serif);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-sec);
  max-width: 52ch;
  margin: 0.8rem auto 0;
}
.bio-fin {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 60;
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--ink-ter);
  text-align: center;
  max-width: var(--w-read);
  margin: var(--sp-2xl) auto 0;
  padding: 0 var(--pad-x);
  letter-spacing: 0.02em;
}

/* End-of-article location, used on essay / field-notes / photo-essay */
.loc {
  max-width: var(--w-read);
  margin: var(--sp-2xl) auto 0;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  clear: both;
}
.loc-from {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 60;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-ter);
}
.loc-coords {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--indigo);
}
.loc-rule {
  width: 40px;
  height: 1px;
  background: var(--rule);
  margin: 0.3rem auto;
}

/* ============================================================
   Unified site footer (every page; one source of truth)
   Built from build/templates/base.html using ISSUE constants
   in build/generate.py. Replaces the former per-page
   .footer-wm and .issue-foot* blocks.
   ============================================================ */
.site-foot {
  margin-top: 4rem;
  padding: 2.25rem var(--pad-x) 2.75rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-elev);
}
.site-foot__inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  text-align: center;
}
.site-foot__sprig {
  display: flex;
  justify-content: center;
  margin-bottom: 0.85rem;
}
.site-foot__sprig svg {
  width: 48px;
  height: 48px;
  color: var(--olive);
}
/* Footer wordmark locked to the chrome wordmark. Same size, same
   colors, same weight. Single brand mark in two positions on the
   page. The .bgai-wm child carries its own color/weight rules
   (defined alongside the chrome wordmark above); the wrapper sets
   the font sizing and link reset. */
.site-foot__wm {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--fraunces);
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 0.65rem;
}
.site-foot__wm .bgai-wm {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  font-weight: 600;
  font-size: inherit;
  letter-spacing: 0.01em;
}
.site-foot__wm .bgai-wm .w-beargrass { color: var(--ink); }
.site-foot__wm .bgai-wm .w-ai {
  color: var(--barn);
  font-weight: 700;
}
.site-foot__meta {
  margin-top: 0.4rem;
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--ink-ter);
}

/* Integrated site-foot nav. Three columns, centered, sits between
   the wordmark and the meta line. The "Current edition" entry in the
   Almanac column resolves to the live issue at build time; see
   build_footer_nav in generator/build.py. */
.site-foot__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: center;
  gap: var(--gap-xl);
  max-width: 720px;
  margin: var(--sp-lg) auto var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--rule);
  text-align: left;
}
.site-foot__col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.site-foot__col-title {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--barn);
  margin-bottom: 0.35rem;
}
.site-foot__col a {
  font-family: var(--serif);
  font-size: var(--fs-sm);
  color: var(--ink-sec);
  text-decoration: none;
  line-height: 1.5;
}
.site-foot__col a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .site-foot__nav {
    grid-template-columns: 1fr;
    gap: var(--gap-md);
    text-align: center;
  }
  .site-foot__col { gap: 0.25rem; }
}

/* Section break ornament.
   Two variants, both flanked by thin rule lines:
     .sec-break--mark: the canonical beargrass glyph, upright.
                       Used between the first and second sections
                       of an argument. This is where the base mark
                       does its work.
     .sec-break--buds: bud cluster only, minimal. Used later in
                       the argument, after the reader has turned. */
.sec-break {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  max-width: 420px;
  margin: 2.75rem auto;
  clear: both;
}
.sec-break .rule-line {
  flex: 1;
  height: 1px;
  background: var(--ink);
  opacity: 0.2;
}
.sec-break__svg {
  width: 36px;
  height: 36px;
  color: var(--olive);
  flex: 0 0 auto;
}
.sec-break__svg--buds {
  width: 56px;
  height: 18px;
  color: var(--warm);
}

/* ============================================================
   Illustrated glyphs (.bg-illus)
   Per-page hero/section ornaments referencing #bg-* symbols
   from the chrome sprite. Default tonal weight: --ink-sec.
   ============================================================ */
.bg-illus {
  display: flex;
  justify-content: center;
  margin: var(--sp-lg) auto;
  color: var(--ink-sec);
}
.bg-illus svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}
.bg-illus--small svg { max-width: 140px; }
.bg-illus--large svg { max-width: 480px; }
.bg-illus--full svg { max-width: 720px; }
.bg-illus--ink { color: var(--ink); }
.bg-illus figcaption {
  margin-top: var(--sp-2xs);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-sec);
  text-align: center;
}

/* ============================================================
   PAGE: Index
   ============================================================ */
body.page-index .cover-flourish {
  display: flex;
  justify-content: center;
  padding: var(--sp-lg) 0 var(--sp-3xs);
}
body.page-index .cover-flourish svg { width: 200px; height: 56px; }
body.page-index .cover-flourish path {
  fill: none;
  stroke: var(--olive);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  --dash: 360;
  animation: sprigDraw 6s ease-in-out infinite;
}

/* Home hero. Replaces the old masthead (duplicate wordmark + dateline)
   with an orienting headline + one supporting line. The wordmark in the
   chrome above already establishes brand; the hero answers "what is
   this and is it for me?" before the Bloom Test box pulls the visitor
   into action. */
body.page-index .home-hero {
  max-width: var(--w-wide);
  margin: var(--sp-lg) auto var(--sp-md);
  padding: var(--sp-md) var(--pad-x) var(--sp-xl);
  text-align: left;
}
body.page-index .home-hero__headline {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 0;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--sp-sm);
  max-width: 22ch;
}
body.page-index .home-hero__deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 60;
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink-sec);
  margin: 0;
  max-width: 60ch;
}
body.page-index .cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
  max-width: 640px;
  margin: var(--sp-lg) auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
body.page-index .cols a {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
body.page-index .cols a.c1 { color: var(--barn); }
body.page-index .cols a.c2 { color: var(--indigo); }
body.page-index .cols a.c3 { color: var(--olive); }

body.page-index .lead {
  max-width: var(--w-wide);
  margin: 2.5rem auto 1rem;
  padding: 0 var(--pad-x);
}
body.page-index .lead-inner {
  padding: var(--sp-xl);
  background: var(--paper-elev);
  border: 1px solid var(--rule);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-xl);
  align-items: center;
}
@media (max-width: 720px) {
  body.page-index .lead-inner { grid-template-columns: 1fr; }
}
body.page-index .lead-fig {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--paper), var(--rule));
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-ter);
  font-weight: 600;
  overflow: hidden;
}
body.page-index .lead-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-index .lead-eyebrow {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--barn);
  margin-bottom: 0.75rem;
}
body.page-index .lead-headline {
  font-family: var(--fraunces);
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--warm) 50%,
    var(--ink) 60%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheenPan 8s ease-in-out infinite, axisSwell 12s ease-in-out infinite;
}
body.page-index .lead-deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 40;
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink-sec);
  margin-bottom: 1rem;
}
body.page-index .lead-read {
  font-family: var(--ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid var(--indigo);
  padding-bottom: 2px;
}

body.page-index .toc {
  max-width: var(--w-wide);
  margin: var(--sp-2xl) auto 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
@media (max-width: 820px) {
  body.page-index .toc { grid-template-columns: 1fr; gap: var(--gap-xl); }
}
body.page-index .toc-col h2 {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 40, "WONK" 1;
  font-size: var(--fs-xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid;
}
body.page-index .toc-col.c1 h2 { color: var(--barn);   border-color: var(--barn); }
body.page-index .toc-col.c2 h2 { color: var(--indigo); border-color: var(--indigo); }
body.page-index .toc-col.c3 h2 { color: var(--olive);  border-color: var(--olive); }

/* Eyebrow above each TOC column heading. Color matches column. */
body.page-index .toc-col > .eyebrow {
  display: block;
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
body.page-index .toc-col > .eyebrow::after {
  content: "";
  display: inline-block;
  margin-left: 0.55rem;
  width: 22px;
  height: 1px;
  vertical-align: middle;
}
body.page-index .toc-col.c1 > .eyebrow         { color: var(--barn); }
body.page-index .toc-col.c1 > .eyebrow::after  { background: color-mix(in srgb, var(--barn) 55%, transparent); }
body.page-index .toc-col.c2 > .eyebrow         { color: var(--indigo); }
body.page-index .toc-col.c2 > .eyebrow::after  { background: color-mix(in srgb, var(--indigo) 55%, transparent); }
body.page-index .toc-col.c3 > .eyebrow         { color: var(--olive); }
body.page-index .toc-col.c3 > .eyebrow::after  { background: color-mix(in srgb, var(--olive) 55%, transparent); }
body.page-index .toc-item { margin-bottom: 1.25rem; }
body.page-index .toc-item h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
  color: var(--ink);
}
body.page-index .toc-item h3 a { color: inherit; text-decoration: none; }
body.page-index .toc-item h3 a:hover { color: var(--warm); }
body.page-index .toc-item p {
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-sec);
  margin: 0 0 var(--sp-3xs);
}
body.page-index .toc-byline {
  font-family: var(--ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--ink-ter);
}

/* ============================================================
   PAGE: Essay
   ============================================================ */
body.page-essay .cover-flourish {
  display: flex;
  justify-content: center;
  padding: var(--sp-lg) 0 0;
}
body.page-essay .cover-flourish svg {
  width: 200px;
  height: 54px;
  color: var(--olive);
}
body.page-essay .cover-flourish path {
  fill: none;
  stroke: var(--olive);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  --dash: 320;
  animation: sprigDraw 6s ease-in-out infinite;
}

body.page-essay .article-head {
  max-width: var(--w-wide);
  margin: var(--sp-lg) auto var(--sp-md);
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--gap-lg);
}
body.page-essay .rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--barn);
  border-right: 1px solid var(--rule);
  padding: var(--sp-xs) 0;
  align-self: stretch;
}
body.page-essay .headline {
  font-family: var(--display);
  font-size: var(--fs-disp-lg);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 22ch;
  color: var(--ink);
  margin: 0;
}
body.page-essay .headline.sheen-swell {
  font-family: var(--fraunces);
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--warm) 50%,
    var(--ink) 60%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheenPan 8s ease-in-out infinite, axisSwell 12s ease-in-out infinite;
}
body.page-essay .deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 40;
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.5;
  margin: 0.9rem 0 0;
  max-width: 52ch;
  color: var(--ink-sec);
}

body.page-essay .article-body {
  max-width: var(--w-wide);
  margin: var(--sp-lg) auto 0;
  padding: 0 var(--pad-x);
}
body.page-essay .article-body p {
  margin: 0 0 1.4rem;
  color: var(--ink);
}
body.page-essay .body-open::first-letter {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 120, "wght" 500, "SOFT" 40, "WONK" 1;
  font-size: 4.4rem;
  line-height: 0.9;
  float: left;
  padding: 0.3rem 0.6rem 0 0;
  color: var(--warm);
}

body.page-essay .fig { margin: var(--sp-lg) 0; }
body.page-essay .fig.left  { float: left;  margin-right: 1.5rem; margin-bottom: 0.75rem; max-width: 42%; }
body.page-essay .fig.right { float: right; margin-left: 1.5rem;  margin-bottom: 0.75rem; max-width: 42%; }
@media (max-width: 640px) {
  body.page-essay .fig.left,
  body.page-essay .fig.right { float: none; max-width: 100%; margin-left: 0; margin-right: 0; }
}
body.page-essay .fig-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--paper-elev), var(--rule));
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-ter);
  font-weight: 600;
  text-align: center;
}
body.page-essay .fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
body.page-essay .fig--issue {
  max-width: var(--w-wide);
  margin: var(--sp-md) auto var(--sp-xl);
  padding: 0 var(--pad-x);
}
body.page-essay .fig-cap {
  margin-top: 0.5rem;
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 60;
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-ter);
}
body.page-essay .fig-cap b {
  color: var(--indigo);
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-xxs);
  margin-right: 0.5rem;
}

body.page-essay .sec-heading {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 40, "WONK" 1;
  font-size: var(--fs-3xl);
  line-height: 1.2;
  color: var(--indigo);
  margin: 0 0 var(--sp-md);
  max-width: 32ch;
}

/* In-article section headings.
   The heading itself uses one of fx-build / fx-pivot / fx-settle
   (per-phrase weight, SOFT, WONK, color). The eyebrow above it
   carries the matching arc color so the eye groups them. */
body.page-essay .article-body > header.fx-eyebrow { margin: var(--sp-xl) 0 var(--sp-md); }
body.page-essay .article-body > header.fx-eyebrow .sec-heading { max-width: 32ch; }

/* Eyebrow color cued by the heading's arc class.
   :has() is supported in current browsers; the eyebrow falls
   back to its default barn color in browsers without it. */
body.page-essay header.fx-eyebrow:has(.fx-build) .eyebrow         { color: var(--barn); }
body.page-essay header.fx-eyebrow:has(.fx-build) .eyebrow::after  { background: color-mix(in srgb, var(--barn) 55%, transparent); }
body.page-essay header.fx-eyebrow:has(.fx-pivot) .eyebrow         { color: var(--indigo); }
body.page-essay header.fx-eyebrow:has(.fx-pivot) .eyebrow::after  { background: color-mix(in srgb, var(--indigo) 55%, transparent); }
body.page-essay header.fx-eyebrow:has(.fx-settle) .eyebrow        { color: var(--olive); }
body.page-essay header.fx-eyebrow:has(.fx-settle) .eyebrow::after { background: color-mix(in srgb, var(--olive) 55%, transparent); }

body.page-essay .pullquote {
  max-width: 54ch;
  margin: var(--sp-2xl) auto;
  text-align: center;
  clear: both;
}
body.page-essay .pullquote hr {
  border: 0;
  height: 1px;
  width: 64px;
  margin: 0 auto;
  background: var(--ink);
  opacity: 0.35;
}
body.page-essay .pullquote p {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 72, "wght" 350, "SOFT" 60, "WONK" 0;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  padding: 1.1rem 0;
  margin: 0;
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 42%,
    var(--warm) 50%,
    var(--ink) 58%, var(--ink) 100%);
  background-size: 400% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pqShimmer 14s ease-in-out infinite;
}

/* ============================================================
   PAGE: Field notes
   ============================================================ */
body.page-field-notes .article-head {
  max-width: var(--w-wide);
  margin: var(--sp-xl) auto var(--sp-md);
  padding: 0 var(--pad-x);
}
body.page-field-notes .split-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--gap-md);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}
body.page-field-notes .split-row .left {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--barn);
}
body.page-field-notes .split-row .right {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 18, "wght" 400, "SOFT" 60;
  font-style: italic;
  font-size: 0.85rem;
  text-align: right;
  color: var(--ink-ter);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
body.page-field-notes .headline {
  font-family: var(--fraunces);
  font-size: var(--fs-disp-md);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 22ch;
  color: var(--ink);
  margin: 0;
}
body.page-field-notes .deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 40;
  font-style: italic;
  font-size: var(--fs-base);
  line-height: 1.55;
  margin: 0.7rem 0 0;
  max-width: 52ch;
  color: var(--ink-sec);
}

body.page-field-notes .article-body {
  max-width: var(--w-wide);
  margin: var(--sp-lg) auto 0;
  padding: 0 var(--pad-x);
}
body.page-field-notes .article-body p {
  margin: 0 0 1.2rem;
  color: var(--ink);
}

body.page-field-notes .fig { margin: 1.2rem 0; }
body.page-field-notes .fig.left  { float: left;  margin-right: 1.25rem; margin-bottom: 0.5rem; max-width: 42%; }
body.page-field-notes .fig.right { float: right; margin-left: 1.25rem;  margin-bottom: 0.5rem; max-width: 42%; }
@media (max-width: 640px) {
  body.page-field-notes .fig.left,
  body.page-field-notes .fig.right { float: none; max-width: 100%; margin-left: 0; margin-right: 0; }
}
body.page-field-notes .fig-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--paper-elev), var(--rule));
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-ter);
  font-weight: 600;
  text-align: center;
}
body.page-field-notes .fig-cap {
  margin-top: 0.4rem;
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 60;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-ter);
}
body.page-field-notes .fig-cap b {
  color: var(--indigo);
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  margin-right: 0.5rem;
}
body.page-field-notes .orn {
  display: inline-block;
  width: 14px;
  height: 8px;
  vertical-align: middle;
  margin: 0 0.5em;
}
body.page-field-notes .orn path {
  fill: none;
  stroke: var(--warm);
  stroke-width: 1.1;
  stroke-linecap: round;
}

/* ============================================================
   PAGE: Photo essay
   ============================================================ */
body.page-photo-essay .article-head {
  max-width: var(--w-wide);
  margin: var(--sp-xl) auto var(--sp-lg);
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--gap-lg);
}
body.page-photo-essay .rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--olive);
  border-right: 1px solid var(--rule);
  padding: var(--sp-xs) 0;
}
body.page-photo-essay .headline {
  font-family: var(--fraunces);
  font-size: var(--fs-disp-md);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0;
  color: var(--ink);
}
/* Photo-essay headline carries the fx-axis-cascade weight + color
   cascade as its signature; per-word colors must be visible, so
   the sheen background-clip is dropped here. The sheen still
   lives on the Index lead-headline as the once-per-issue gesture. */
body.page-photo-essay .deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 40;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0.9rem 0 0;
  max-width: 52ch;
  color: var(--ink-sec);
}

body.page-photo-essay .intro {
  max-width: var(--w-wide);
  margin: var(--sp-lg) auto;
  padding: 0 var(--pad-x);
  font-family: var(--serif);
  font-size: var(--fs-md);
  line-height: 1.7;
}

body.page-photo-essay .plate {
  max-width: var(--w-plate);
  margin: var(--sp-2xl) auto;
  padding: 0 var(--pad-x);
}
body.page-photo-essay .plate-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--paper-elev), var(--rule));
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-ter);
  font-weight: 600;
  text-align: center;
}
body.page-photo-essay .plate-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
}
@media (max-width: 640px) {
  body.page-photo-essay .plate-pair { grid-template-columns: 1fr; }
}
body.page-photo-essay .plate-pair .plate-img { aspect-ratio: 4 / 5; }
body.page-photo-essay .plate-meta {
  max-width: var(--w-read);
  margin: var(--sp-sm) auto 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap-md);
  align-items: start;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}
@media (max-width: 640px) {
  body.page-photo-essay .plate-meta { grid-template-columns: 1fr; }
}
body.page-photo-essay .plate-cap {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 60;
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-sec);
}
body.page-photo-essay .plate-cap b {
  color: var(--barn);
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--fs-xxs);
  margin-right: 0.6rem;
}
body.page-photo-essay .plate-coords {
  font-family: var(--ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--indigo);
  white-space: nowrap;
  align-self: start;
  padding-top: 0.15rem;
}
body.page-photo-essay .pullquote {
  max-width: 54ch;
  margin: var(--sp-2xl) auto;
  text-align: center;
  padding: 0 var(--pad-x);
}
body.page-photo-essay .pullquote hr {
  border: 0;
  height: 1px;
  width: 64px;
  margin: 0 auto;
  background: var(--ink);
  opacity: 0.35;
}
body.page-photo-essay .pullquote p {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 72, "wght" 350, "SOFT" 60, "WONK" 0;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  padding: 1.1rem 0;
  margin: 0;
  color: var(--ink);
}

/* ============================================================
   PAGE: Colophon
   ============================================================ */
body.page-colophon .article-head {
  max-width: var(--w-wide);
  margin: var(--sp-xl) auto var(--sp-lg);
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--gap-lg);
}
body.page-colophon .rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--olive);
  border-right: 1px solid var(--rule);
  padding: var(--sp-xs) 0;
}
body.page-colophon .headline {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 24ch;
  color: var(--ink);
  margin: 0;
}
body.page-colophon .deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 40;
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.5;
  margin: 0.7rem 0 0;
  max-width: 52ch;
  color: var(--ink-sec);
}

body.page-colophon .colophon {
  max-width: var(--w-wide);
  margin: var(--sp-xl) auto 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 780px) {
  body.page-colophon .colophon { grid-template-columns: 1fr; gap: var(--gap-xl); }
}
body.page-colophon .col-section { margin-bottom: 2rem; }
body.page-colophon .col-section h2 {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 40, "WONK" 1;
  font-size: var(--fs-xl);
  line-height: 1.15;
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid;
}
body.page-colophon .col-section.c1 h2 { color: var(--barn);   border-color: var(--barn); }
body.page-colophon .col-section.c2 h2 { color: var(--indigo); border-color: var(--indigo); }
body.page-colophon .col-section.c3 h2 { color: var(--olive);  border-color: var(--olive); }

/* Eyebrow above each Colophon column heading. Color matches column. */
body.page-colophon .col-section > .eyebrow {
  display: block;
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
body.page-colophon .col-section > .eyebrow::after {
  content: "";
  display: inline-block;
  margin-left: 0.55rem;
  width: 22px;
  height: 1px;
  vertical-align: middle;
}
body.page-colophon .col-section.c1 > .eyebrow        { color: var(--barn); }
body.page-colophon .col-section.c1 > .eyebrow::after { background: color-mix(in srgb, var(--barn) 55%, transparent); }
body.page-colophon .col-section.c2 > .eyebrow        { color: var(--indigo); }
body.page-colophon .col-section.c2 > .eyebrow::after { background: color-mix(in srgb, var(--indigo) 55%, transparent); }
body.page-colophon .col-section.c3 > .eyebrow        { color: var(--olive); }
body.page-colophon .col-section.c3 > .eyebrow::after { background: color-mix(in srgb, var(--olive) 55%, transparent); }
body.page-colophon .col-section p {
  margin: 0 0 0.8rem;
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.7;
}
body.page-colophon .col-section p b { color: var(--ink); font-weight: 600; }
body.page-colophon .col-section p i {
  font-family: var(--fraunces);
  font-style: italic;
  color: var(--ink-sec);
}
body.page-colophon .col-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.page-colophon .col-list li {
  margin-bottom: 0.4rem;
  padding-left: 1.5rem;
  position: relative;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
body.page-colophon .col-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 1px;
  background: var(--warm);
}
body.page-colophon .col-list li b {
  font-family: var(--ui);
  font-weight: 600;
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-sec);
  margin-right: 0.5rem;
}
body.page-colophon .col-section.c1 .col-list li b { color: var(--barn);   }
body.page-colophon .col-section.c2 .col-list li b { color: var(--indigo); }
body.page-colophon .col-section.c3 .col-list li b { color: var(--olive);  }

/* ============================================================
   Simple markdown pages (svg-library, issue-archive, 404)
   ============================================================ */
.heritage-simple-wrap {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 1.75rem var(--pad-x) var(--sp-3xl);
}
.almanac-prose-simple {
  font-family: var(--serif);
  line-height: 1.7;
  font-size: var(--fs-md);
  color: var(--ink);
}
.almanac-prose-simple h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--sp-2xs);
}
/* Simple-page H1 opting into the fx-axis-cascade treatment
   (issue archive). Matches the photo-essay and field-notes H1:
   Fraunces variable, larger clamp, tighter line-height, barn
   keyword on the last phrase via fx-kw inside w4. */
.almanac-prose-simple h1.fx-axis-cascade {
  font-family: var(--fraunces);
  font-size: var(--fs-disp-md);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 0 0.8rem;
}
/* Simple-page H2: H2-5 left vertical indigo rule.
   Quiet, editorial, fits svg-library / archive / 404. */
.almanac-prose-simple h2 {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 40, "WONK" 1;
  font-size: var(--fs-2xl);
  line-height: 1.2;
  color: var(--ink);
  margin: 2rem 0 0.7rem;
  border-left: 3px solid var(--indigo);
  padding-left: 0.85rem;
}
/* Simple-page H3: H2-11 small-caps utility, ui font, barn rule. */
.almanac-prose-simple h3 {
  font-family: var(--ui);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.6rem 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--barn);
  display: inline-block;
}
.almanac-prose-simple p { margin: 0 0 var(--sp-md); }
.almanac-prose-simple ul,
.almanac-prose-simple ol { margin: 0 0 1rem 1.4rem; padding: 0; }
.almanac-prose-simple li { margin-bottom: 0.4rem; }
.almanac-prose-simple a {
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--indigo) 35%, transparent);
  text-underline-offset: 2px;
}
.almanac-prose-simple a:hover { text-decoration-color: var(--indigo); }
.almanac-prose-simple code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--paper-tint);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  color: var(--barn);
}
.almanac-prose-simple pre {
  background: var(--paper-elev);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  overflow: auto;
  margin: 1.2rem 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-sec);
}
.almanac-prose-simple pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* ============================================================
   SVG library page
   Renders the four beargrass symbols at working size and
   describes where each one is used. Hero callout for the
   canonical mark, then a grid of the family.
   ============================================================ */
body.page-svg-library .svg-callout {
  margin: 1.8rem auto 2.2rem;
  padding: 2.4rem 1rem;
  background: var(--paper-elev);
  border: 1px solid var(--rule);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-svg-library .svg-callout--mark {
  color: var(--olive);
}
body.page-svg-library .svg-showcase--mark {
  width: 160px;
  height: 160px;
}
body.page-svg-library .svg-grid--family {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-md);
  margin: var(--sp-lg) 0;
}
@media (max-width: 600px) {
  body.page-svg-library .svg-grid--family { grid-template-columns: 1fr; }
}
body.page-svg-library .svg-card {
  background: var(--paper-elev);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.6rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  min-height: 210px;
  justify-content: space-between;
}
body.page-svg-library .svg-card--wide {
  grid-column: span 2;
}
@media (max-width: 600px) {
  body.page-svg-library .svg-card--wide { grid-column: span 1; }
}
body.page-svg-library .svg-family__svg {
  width: 96px;
  height: 96px;
  color: var(--olive);
}
body.page-svg-library .svg-family__svg--drift {
  width: 260px;
  height: auto;
  color: var(--olive);
}
body.page-svg-library .svg-family__svg--buds {
  width: 180px;
  height: auto;
  color: var(--warm);
}
body.page-svg-library .svg-family__svg--stem {
  width: 24px;
  height: 96px;
  color: var(--olive);
}
body.page-svg-library .svg-card .svg-card__label {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-sec);
  font-weight: 600;
}
body.page-svg-library .svg-card .svg-card__note {
  font-family: var(--serif);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-ter);
  text-align: center;
  max-width: 36ch;
}

/* ============================================================
   Speedy / Safe / Simple — universal pillar treatments
   The chord lives sitewide. Two elements:
     .sss-eyebrow  — a small inline triptych above the article H1
                     (Spoken: persistent on every sales-page hero).
                     Inserted into the article-head right column.
     .sss-triptych — a pre-footer panel with anchor sentences
                     (Declared: persistent on every page, sitewide).
                     Inserted by the chrome template before <footer>.
   Per-pillar color follows the locked arc:
     --barn (Speedy), --indigo (Safe), --olive (Simple).
   ============================================================ */

.sss-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.sss-eyebrow__word--speedy { color: var(--barn); }
.sss-eyebrow__word--safe   { color: var(--indigo); }
.sss-eyebrow__word--simple { color: var(--olive); }
.sss-eyebrow__sep {
  color: var(--ink-ter);
  font-weight: 400;
  letter-spacing: 0;
}

/* SSS triptych as pre-footer band. Lives inside <footer class="site-foot">,
   visible only on sales chrome (body.bgai-studio). On Learn and Almanac
   chrome the triptych is suppressed; the footer below remains. */
.sss-triptych {
  margin: 0 calc(var(--pad-x) * -1) var(--sp-lg);
  padding-top: var(--sp-2xs);
  border-bottom: 1px solid var(--rule);
}
body:not(.bgai-studio) .sss-triptych { display: none; }
.sss-triptych__inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: var(--sp-xl) var(--pad-x) var(--sp-2xl);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-xl);
}
.sss-triptych__col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-left: var(--sp-md);
  border-left: 2px solid;
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: transform 120ms ease;
}
.sss-triptych__col:hover { transform: translateX(2px); }
.sss-triptych__col:hover .sss-triptych__sentence { color: var(--ink); }
.sss-triptych__col--speedy { border-left-color: var(--barn); }
.sss-triptych__col--safe   { border-left-color: var(--indigo); }
.sss-triptych__col--simple { border-left-color: var(--olive); }
.sss-triptych__word {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 96, "wght" 600;
  font-size: var(--fs-2xl);
  letter-spacing: -0.01em;
  line-height: 1;
}
.sss-triptych__col--speedy .sss-triptych__word { color: var(--barn); }
.sss-triptych__col--safe   .sss-triptych__word { color: var(--indigo); }
.sss-triptych__col--simple .sss-triptych__word { color: var(--olive); }
.sss-triptych__sentence {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 40;
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--ink-sec);
  margin: 0;
}
@media (max-width: 720px) {
  .sss-triptych__inner { grid-template-columns: 1fr; gap: var(--gap-md); }
}

/* Related reading — bottom-of-page strip on sales pages that points
   into the Learn library. Two- or three-up grid, hairline above. */
.related-reading {
  max-width: var(--w-wide);
  margin: var(--sp-2xl) auto 0;
  padding: var(--sp-md) var(--pad-x) 0;
  border-top: 1px solid var(--rule);
}
.related-reading__eyebrow {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--barn);
  margin: 0 0 var(--sp-md);
}
.related-reading__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-lg);
}
@media (max-width: 720px) {
  .related-reading__list { grid-template-columns: 1fr; gap: var(--gap-md); }
}
.related-reading__item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--ink);
}
.related-reading__item h3 {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 500;
  font-size: var(--fs-lg);
  line-height: 1.25;
  margin: 0;
}
.related-reading__item:hover h3 { color: var(--warm); }
.related-reading__item p {
  font-family: var(--serif);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-sec);
  margin: 0;
}
.related-reading__time {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-ter);
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .heritage-chrome,
  .mode-toggle,
  .heritage-sitenav,
  .site-foot { display: none !important; }
  body.almanac-heritage { background: #fff; color: #000; }
}

/* ---------------------------------------------------------------------
   Mobile nav toggle. Desktop keeps the inline nav; at <= 820px the
   .nav-toggle button becomes visible and the nav collapses until
   the toggle is pressed. Added 2026-04-22 as a Step 10 follow-up
   (QA-LOG section "Mobile nav is cramped on BgAI").
   --------------------------------------------------------------------- */

.heritage-chrome .nav-toggle {
  display: none;
  align-items: center;
  gap: var(--gap-sm);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  font-family: var(--ui);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.heritage-chrome .nav-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.heritage-chrome .nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 14px;
}
.heritage-chrome .nav-toggle__bars span {
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}

@media (max-width: 820px) {
  .heritage-chrome .nav-toggle {
    display: inline-flex;
  }
  .heritage-chrome .heritage-sitenav {
    display: none;
    flex-basis: 100%;
    order: 3;
    padding-top: 0.75rem;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
  .heritage-chrome .heritage-sitenav.is-open {
    display: flex;
  }
  .heritage-chrome .heritage-sitenav a {
    padding: var(--sp-xs) 0;
    width: 100%;
  }
  .heritage-chrome .heritage-header-cluster {
    flex-wrap: wrap;
  }
}

/* Very narrow widths: drop the "MENU" word so the toggle is just
   the three-bar icon. Saves ~50px in the row 1 cluster so the
   wordmark + Menu icon + mode pill + CONTACT all fit on a
   320-360px viewport without wrapping. */
@media (max-width: 480px) {
  .heritage-chrome .nav-toggle__label { display: none; }
  .heritage-chrome .nav-toggle { padding: 0.4rem 0.55rem; }
  .heritage-cta a.cta { padding: 0.35rem 0.6rem; font-size: 11px; }
}