/* /news content stylesheet — Kotobaseed design tokens applied to the
   BeeRanked-rendered components.

   Loaded by `scripts/news_chrome_rewriter.py` as
       <link rel="stylesheet" href="/branding/news-content.css">
   right after the apex SPA's CSS bundle, so the kotoba-* CSS variables
   defined there are in scope here (rgb(var(--kotoba-primary-rgb))
   etc.). Caddy serves this file from the `branding/` bind mount.

   Selector strategy: BeeRanked uses Astro and scopes every component's
   CSS via `[data-astro-cid-<hash>]`. That hash changes per BR build, so
   we can't target it. Instead we double up class selectors (e.g.
   `.hero.hero` instead of `.hero`) to match BR's two-token specificity
   without depending on the hash. Equal-specificity ties go to the later
   stylesheet, and this one loads AFTER BR's inlined `<style>`, so we
   win.

   Edit this file freely; the rewriter sidecar bind-mounts it from the
   repo and Caddy serves it live with no rebuild. */

:root {
  /* Aliases so the rest of the file reads cleanly. These resolve to
     whatever the apex theme is (default = sage). */
  --kb-primary: rgb(var(--kotoba-primary-rgb, 22 86 29));
  --kb-primary-soft: rgb(var(--kotoba-primary-rgb, 22 86 29) / 0.08);
  --kb-bg: rgb(var(--kotoba-background-rgb, 244 241 233));
  --kb-bg-warm: rgb(252 250 244);
  --kb-text: rgb(var(--kotoba-text-rgb, 43 70 60));
  --kb-text-soft: rgb(var(--kotoba-text-rgb, 43 70 60) / 0.7);
  --kb-text-mute: rgb(var(--kotoba-text-rgb, 43 70 60) / 0.55);
  --kb-border: rgb(var(--kotoba-text-rgb, 43 70 60) / 0.1);
  --kb-honey: #d6a42f;
  --kb-shadow-soft: 0 1px 2px rgba(64, 60, 50, 0.04),
                    0 8px 24px rgba(64, 60, 50, 0.06);
  --kb-shadow-soft-lg: 0 4px 8px rgba(64, 60, 50, 0.05),
                       0 18px 40px rgba(64, 60, 50, 0.10);
  --kb-radius: 1rem;
  --kb-radius-lg: 1.5rem;
  --kb-radius-xl: 2rem;
}

/* --- Page baseline ---------------------------------------------------- */

/* BR's renderer expects an aggressive universal reset to be in effect
   ( `* { margin: 0; padding: 0 }` ) — when we strip BR's <style>
   blocks, that reset goes with them, and elements BR emits inherit
   browser-default spacing that BR didn't budget for. Restate the
   reset here. Tailwind's class selectors (`.px-4`, `.py-2`, etc.)
   still win on the individual padding/margin properties they set,
   so the React Navbar/Footer's Tailwind-controlled spacing is
   untouched; this only sweeps away the browser defaults that would
   otherwise pad lists, paragraphs, and the BR menus. */

.br-app, .br-app *, .br-app ::before, .br-app ::after {
  margin: 0;
  padding: 0;
}

/* Magazine page architecture — three bands:
     1. Masthead (BR's `.hero`) breaks out to the viewport edges with
        the apex cream background — a hero band the chrome hands off
        into directly.
     2. Editorial body (cover story, topic sections, fresh-off-the-
        press) sits on a pure white `.br-app` canvas — printed-page.
     3. Colophon CTA (rewriter-injected, sibling of `.br-app` inside
        `.flex-grow`) returns to the apex cream — the back cover.
   The min-h-screen apex shell stays cream throughout so any whitespace
   above/below the .br-app canvas reads as paper margins. */
.br-app {
  background: #fff;
}

.min-h-screen {
  background: rgb(var(--kotoba-background-rgb, 244 241 233));
}

/* BR's content widths — used for body wrappers below. */
.br-app .container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
  font-family: 'Quicksand', 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--kb-text);
}

.br-app .container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  font-family: 'Quicksand', 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--kb-text);
}

/* --- MASTHEAD (uses BR's .hero element) ----------------------------- */

/* Editorial masthead. Flush with the apex chrome above, breaks out of
   the white .br-app canvas via negative margins so its cream bg spans
   the viewport edge to edge — a hero band. Wordmark left, italic
   descriptor right, deck + small-caps meta beneath. Closes with 3rem
   of cream breathing room below the masthead content before the white
   editorial body picks up. No hairline rule — the bg colour change
   alone is the divider. */
.hero.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 4.5rem max(2rem, calc(50vw - 50%)) 5rem;
  text-align: left;
  background: rgb(var(--kotoba-background-rgb, 244 241 233));
  box-sizing: border-box;
}

.hero-inner.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* The Kotobaseed logo emitted in the hero by BR. Pin its height so it
   reads as a visual mark, not an oversized banner image. */
.hero-logo {
  height: 2.5rem;
  width: auto;
  display: block;
  margin: 0 auto 1.5rem;
}

/* (Centered hero-inner is set above near .hero — kept here for parity
   with the BR structure but the constraint is already applied.) */

/* Hero badge: text-only wordmark, no pill, no logo. The Kotobaseed
   image BR drops in carries a baked-in white background that reads as
   a hard rectangle on any non-white surface — so we hide it and let
   the wordmark below carry the brand. */
.hero-logo {
  display: none !important;
}

.hero-badge.hero-badge {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-transform: none !important;
  margin: 0 0 0.5rem !important;
  position: relative;
}

/* Magazine masthead descriptor (italic Fraunces, very small) — sits
   to the right of the wordmark on the masthead row. */
.hero-badge.hero-badge::after {
  content: 'A magazine on language learning, independent teaching, and the small craft of getting fluent.';
  display: block;
  flex: 1;
  max-width: 22rem;
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--kb-text-soft);
  text-align: right;
}

/* The BR-emitted <span>Kotobaseed</span> inside .hero-badge is split
   by the rewriter into <span class="kb-wordmark">
       <span class="kb-wordmark-kotoba">Kotoba</span>
       <span class="kb-wordmark-seed">Seed</span>
     </span>
   so each half gets a clean colour. Sage primary for "Kotoba",
   honey gold for "Seed". */
.hero-badge.hero-badge > span,
.hero-badge.hero-badge > span.kb-wordmark {
  font-family: 'Fraunces', 'Lora', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  display: inline-block;
  flex-shrink: 0;
}

.kb-wordmark-kotoba {
  color: rgb(var(--kotoba-primary-rgb, 22 86 29));
}

.kb-wordmark-seed {
  color: var(--kb-honey);
}

/* Hero-title becomes the magazine "Vol." / issue line + the cover deck
   beneath it. Two lines of typography, no CTA pill. */
.hero-title.hero-title {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--kb-text);
  margin: 1.75rem 0 0;
  max-width: 36rem;
}

.hero-sub.hero-sub {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kb-text-mute);
  margin: 0.85rem 0 0;
}

/* Drop the inline CTA from the masthead — magazines don't ask you to
   "Explore all content"; you scroll. */
.hero-actions.hero-actions { display: none !important; }

/* --- Primary CTA button — editorial text link (no pill) -------------- */

.br-app .btn-primary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0;
  background: transparent;
  color: var(--kb-text) !important;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  transition: color 0.18s ease;
}

.br-app .btn-primary::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--kb-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.br-app .btn-primary:hover::after { transform: scaleX(1); }

.br-app .btn-primary > span[aria-hidden] {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.br-app .btn-primary:hover > span[aria-hidden] {
  transform: translateX(2px);
}

/* --- Section navigation row (BR ships this as `.chips`) ------------ */

/* Sit as a row of clickable pill tabs at the top of the editorial
   content — hairline border, white fill, small-caps Quicksand label
   with a Fraunces count digit at the right. Hovering darkens the
   border and tints the label sage; the cursor + the visible affordance
   make it obvious these are clickable. */

.chips.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin: 3.5rem auto 0;
  padding: 0;
  border-bottom: 0;
  max-width: 1100px;
}

.br-app .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.25rem;
  margin: 0;
  border: 1px solid var(--kb-border);
  border-radius: 9999px;
  background: #fff;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kb-text) !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(64, 60, 50, 0.04);
  transition: border-color 0.18s ease,
              color 0.18s ease,
              background 0.18s ease,
              transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.br-app .chip:hover {
  border-color: rgb(var(--kotoba-primary-rgb, 22 86 29));
  color: rgb(var(--kotoba-primary-rgb, 22 86 29)) !important;
  background: rgb(var(--kotoba-primary-rgb, 22 86 29) / 0.04);
  transform: translateY(-1px);
}

.br-app .chip:hover em {
  color: rgb(var(--kotoba-primary-rgb, 22 86 29));
}

/* Hide BR's per-chip emoji and override its `--c` dot. */
.br-app .chip > span[aria-hidden] { display: none; }
.br-app .chip::before { display: none; }

/* Count badge — small Fraunces numeral inside the pill, set against a
   hairline divider so it reads as data, not decoration. */
.br-app .chip em {
  font-style: normal;
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0;
  vertical-align: baseline;
  color: var(--kb-text-mute);
  background: transparent;
  padding: 0 0 0 0.55rem;
  margin: 0;
  border-left: 1px solid var(--kb-border);
  transition: color 0.18s ease;
}

/* --- Spotlight (featured post on index) ------------------------------ */

/* --- COVER STORY (BR ships this as `.spotlight`) ------------------- */

/* Magazine cover treatment: huge serif headline on white, no card,
   no shadow, no per-type accent colour. The date sits as a small caps
   line below the byline. Hover behaviour is a subtle underline on the
   title, nothing else. */
.spotlight.spotlight {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  position: relative;
  max-width: 1100px;
  margin: 4.5rem auto 4rem;
  padding: 0 2rem;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  border: 0;
  overflow: visible;
  isolation: auto;
  animation: kb-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: none;
}

.spotlight.spotlight::before,
.spotlight.spotlight::after {
  display: none;
}

.spotlight.spotlight:hover {
  transform: none;
  box-shadow: none;
}

.spotlight-body.spotlight-body {
  max-width: 880px;
}

/* "FEATURED" / "LATEST · BLOG" kicker — small caps, uppercase, sage. */
.spotlight-eyebrow.spotlight-eyebrow {
  display: inline-block;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--kotoba-primary-rgb, 22 86 29));
  margin: 0 0 1.5rem;
}

/* The cover headline. Huge Fraunces, tight tracking, dark teal on
   white. This is the centrepiece of the page. */
.spotlight-title.spotlight-title {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--kb-text);
  margin: 0 0 1.5rem;
  max-width: 18ch;
}

/* "Continue reading →" — a single editorial link, underlined on hover. */
.spotlight-cta.spotlight-cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kb-text);
  position: relative;
}

.spotlight-cta.spotlight-cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--kb-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.spotlight.spotlight:hover .spotlight-cta.spotlight-cta::after {
  transform: scaleX(1);
}

/* Date in italic Fraunces above the eyebrow, like a magazine
   contributor line. Sits ABOVE the body because the .spotlight uses
   `flex-direction: column-reverse` — even though BR ships the date
   after the body in source order. Small honey-gold dot before it as
   an editorial flourish. */
.spotlight-date.spotlight-date {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--kb-text-mute);
  margin: 0 0 1.25rem;
  background: transparent;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0;
  text-transform: none;
  align-self: auto;
}

.spotlight-date.spotlight-date::before {
  content: '◆';
  display: inline-block;
  font-size: 0.5rem;
  color: var(--kb-honey);
  transform: translateY(-1px);
}

/* --- Section heading ("Explore everything" etc.) --------------------- */

/* --- EDITORIAL SECTION HEADER (BR ships as `.section-head`) -------- */

.section-head.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto 3rem;
  padding: 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--kb-text);
  text-align: left;
}

.section-head.section-head h2 {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  letter-spacing: -0.01em;
  color: var(--kb-text);
  margin: 0;
}

.section-head.section-head p {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kb-text-mute);
  margin: 0;
  flex-shrink: 0;
}

/* "All articles →" link inside .section-head. */
.section-head.section-head .more {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kb-text) !important;
  text-decoration: none !important;
  position: relative;
  flex-shrink: 0;
}

.section-head.section-head .more::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--kb-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-head.section-head .more:hover::after { transform: scaleX(1); }

/* --- FRESH OFF THE PRESS (BR ships `.latest-grid` + `.post-card`) -- */

/* Editorial article previews. Two-column at desktop, hairline rules
   between rows, type kicker in small caps, Fraunces title, italic
   excerpt, italic date. No per-type accent colour, no card boxes. */

.latest-grid.latest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  border-top: 1px solid var(--kb-border);
}

@media (max-width: 720px) {
  .latest-grid.latest-grid {
    grid-template-columns: 1fr;
  }
}

.post-card.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.5rem 2.5rem 0;
  border-bottom: 1px solid var(--kb-border);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  text-decoration: none !important;
  color: var(--kb-text);
  transition: none;
}

/* Vertical hairline between the two columns (desktop only). */
@media (min-width: 720px) {
  .post-card.post-card:nth-child(odd) {
    border-right: 1px solid var(--kb-border);
    padding-right: 2.5rem;
  }
  .post-card.post-card:nth-child(even) {
    padding-left: 2.5rem;
  }
  /* Drop the bottom border on the last row of each column. */
  .post-card.post-card:nth-last-child(-n + 2):nth-child(odd),
  .post-card.post-card:nth-last-child(-n + 1):nth-child(even) {
    border-bottom-color: transparent;
  }
}

/* Small-caps type label (Blog / Wiki / Documentation). */
.post-type.post-type {
  display: inline-block;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--kotoba-primary-rgb, 22 86 29));
  margin-bottom: 1rem;
}

/* Article title — Fraunces serif, no underline. Reveals an underline
   from the title on hover (magazine treatment). */
.post-title.post-title {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--kb-text);
  margin: 0 0 0.85rem;
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--kb-text), var(--kb-text));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: 2px;
}

.post-card.post-card:hover .post-title.post-title {
  background-size: 100% 1px;
}

/* Italic excerpt (optional — only some posts have one). */
.post-excerpt.post-excerpt {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--kb-text-soft);
  margin: 0.5rem 0 1rem;
  max-width: 36rem;
}

/* Italic Fraunces date — sits at the bottom of the card like a print
   byline. */
.post-date.post-date {
  display: block;
  margin-top: auto;
  padding-top: 1rem;
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--kb-text-mute);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-transform: none;
  padding-left: 0;
  padding-right: 0;
}

/* --- Explore grid (category tiles) ----------------------------------- */

/* --- EDITORIAL TOPIC SECTIONS (BR ships as `.block` + `.explore-*`) */

/* Numbered editorial list of sections. Each topic gets a Roman / arabic
   counter, a Fraunces section title, italic deck, and a small caps
   meta. No cards, no shadows, no emoji, no per-type accent. Just type. */

.br-app .block.block {
  max-width: 1100px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
  position: relative;
}

/* Honey-gold fleuron ornament centered above each major section — a
   small editorial flourish that marks a change in voice between the
   cover story, the topic index, and Fresh off the press. */
.br-app .block.block::before {
  content: '❋';
  display: block;
  text-align: center;
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-size: 1.25rem;
  color: var(--kb-honey);
  opacity: 0.55;
  margin: 0 0 2.5rem;
  line-height: 1;
  letter-spacing: 0;
}

.explore-grid.explore-grid {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: kb-section;
}

/* Dense magazine table-of-contents row: numeral | name + deck | count.
   Tight vertical rhythm so the section reads as an editorial index,
   not a stacked list of cards. */
.explore-card.explore-card {
  counter-increment: kb-section;
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--kb-border);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  color: var(--kb-text);
  overflow: visible;
  isolation: auto;
  transition: background 0.15s ease;
}

.explore-grid.explore-grid > a:last-child {
  border-bottom: 1px solid var(--kb-border);
}

.explore-card.explore-card:hover {
  background: rgb(var(--kotoba-primary-rgb, 22 86 29) / 0.025);
}

/* Roman numeral counter — tight, in line with the row's baseline. */
.explore-card.explore-card::before {
  content: counter(kb-section, upper-roman) '.';
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--kb-honey);
  letter-spacing: -0.01em;
  align-self: baseline;
  background: transparent;
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  filter: none;
  display: block;
  line-height: 1.4;
}

.explore-card.explore-card::after { display: none; }

.explore-card.explore-card:hover {
  transform: none;
  box-shadow: none;
}

.explore-card.explore-card:hover .explore-name.explore-name {
  color: rgb(var(--kotoba-primary-rgb, 22 86 29));
}

.explore-card.explore-card:hover::before { color: var(--kb-text); }

/* Kill the emoji icon BR ships. */
.explore-icon.explore-icon {
  display: none !important;
}

/* Section name + deck inline in the second column. */
.explore-name.explore-name {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--kb-text);
  display: inline;
  transition: color 0.18s ease;
}

/* Italic deck — rendered inline, separated from the name by an em
   dash so each row reads like a single editorial line. */
.explore-blurb.explore-blurb {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--kb-text-soft);
  line-height: 1.4;
  display: inline;
  margin: 0;
}

.explore-blurb.explore-blurb::before {
  content: ' — ';
  color: var(--kb-text-mute);
  font-style: normal;
}

/* "N entries →" meta in the third column. */
.explore-count.explore-count {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kb-text-mute);
  margin: 0;
  padding: 0;
  border: 0;
  align-self: baseline;
  text-align: right;
}

.explore-count.explore-count > span {
  color: var(--kb-text-mute);
  font-size: 0.6875rem;
  margin-left: 0.4rem;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.explore-card.explore-card:hover .explore-count.explore-count > span {
  transform: translateX(2px);
  color: rgb(var(--kotoba-primary-rgb, 22 86 29));
}

@media (max-width: 720px) {
  .explore-card.explore-card {
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    padding: 0.9rem 0;
  }
  .explore-name.explore-name,
  .explore-blurb.explore-blurb { display: inline; }
  .explore-count.explore-count {
    grid-column: 2 / -1;
    text-align: left;
    padding-left: 0;
    margin-top: 0.25rem;
  }
}

/* --- Article body (.prose) ------------------------------------------- */

.prose.prose {
  font-family: 'Quicksand', 'Inter', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--kb-text);
  max-width: 38rem;
  margin: 0 auto;
}

.prose.prose h1 {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.prose.prose h2 {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.625rem;
  letter-spacing: -0.015em;
  margin: 2.5rem 0 0.75rem;
  color: var(--kb-text);
}

.prose.prose h3 {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  margin: 2rem 0 0.5rem;
  color: var(--kb-text);
}

.prose.prose p {
  margin: 0 0 1.25rem;
}

.prose.prose a {
  color: var(--kb-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(var(--kotoba-primary-rgb, 22 86 29) / 0.35);
  transition: text-decoration-color 0.15s;
}

.prose.prose a:hover {
  text-decoration-color: var(--kb-primary);
}

.prose.prose strong {
  color: var(--kb-text);
  font-weight: 700;
}

.prose.prose em {
  color: var(--kb-text-soft);
}

.prose.prose ul,
.prose.prose ol {
  margin: 0 0 1.25rem 1.25rem;
  padding-left: 0.5rem;
}

.prose.prose li {
  margin: 0 0 0.5rem;
}

.prose.prose li::marker {
  color: var(--kb-honey);
}

.prose.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 3px solid var(--kb-honey);
  color: var(--kb-text-soft);
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.125rem;
}

.prose.prose code {
  font-family: 'SF Mono', ui-monospace, 'Cascadia Code', monospace;
  font-size: 0.9em;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--kb-primary-soft);
  color: var(--kb-primary);
}

.prose.prose pre {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--kb-radius);
  background: #1c1a16;
  color: #f4f1e9;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.55;
}

.prose.prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.prose.prose hr {
  border: 0;
  border-top: 1px solid var(--kb-border);
  margin: 2.5rem auto;
  max-width: 8rem;
}

.prose.prose img {
  border-radius: var(--kb-radius);
  margin: 1.5rem 0;
  box-shadow: var(--kb-shadow-soft);
}

/* --- Article header (single blog post) ------------------------------ */

/* BR emits the article header with inline `style=""` attributes, so the
   font-size/weight/colour properties need !important to win. Everything
   else (alignment, family, padding) BR doesn't touch, so plain rules
   are fine. */

/* The breadcrumb nav above the article — center + soft typography. */
.br-app .container > nav:first-of-type {
  justify-content: center !important;
  text-align: center !important;
  margin-bottom: 2.5rem !important;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.8125rem !important;
  letter-spacing: 0.01em;
}

.br-app .container > nav:first-of-type a {
  color: var(--kb-primary) !important;
  text-decoration: none;
  transition: opacity 0.15s;
}

.br-app .container > nav:first-of-type a:hover {
  opacity: 0.75;
}

.br-app .container > nav:first-of-type span {
  color: var(--kb-text-mute) !important;
}

/* Center the article header block + give it a max width that
   matches the prose column. */
article > header {
  text-align: center;
  max-width: 38rem;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 3rem !important;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--kb-border);
}

/* The "Article" eyebrow — convert from a block to a pill. */
article > header > div:first-child {
  display: inline-block;
  padding: 0.35rem 0.9rem !important;
  border-radius: 9999px;
  background: var(--kb-primary-soft);
  color: var(--kb-primary) !important;
  font-family: 'Quicksand', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.25rem !important;
}

/* The article title — Fraunces serif, calmer weight. */
article > header > h1 {
  font-family: 'Fraunces', 'Lora', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(2.25rem, 4.5vw, 3rem) !important;
  line-height: 1.15 !important;
  color: var(--kb-text) !important;
  margin: 0 0 0.875rem !important;
}

/* The publish date. */
article > header > p {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--kb-text-mute) !important;
  letter-spacing: 0.02em;
  margin: 0 !important;
}

/* Article wrapper + prose can stay nicely centered. */
article {
  max-width: 38rem;
  margin: 0 auto;
}

/* The "← Back to Blog" link below the article. */
.br-app .container > div:last-child {
  max-width: 38rem;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.br-app .container > div:last-child > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Quicksand', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--kb-primary) !important;
  text-decoration: none;
  transition: opacity 0.15s;
}

.br-app .container > div:last-child > a:hover {
  opacity: 0.75;
}

/* --- Listing pages (blog index entries) ------------------------------ */

/* BR's listing intro: <div><h1>Blog</h1><p>1 post</p></div>. Center it. */
.br-app .container-wide > div:first-child {
  max-width: 100% !important;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem !important;
}

.br-app .container-wide > div:first-child > h1 {
  font-family: 'Fraunces', 'Lora', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(2.25rem, 4.5vw, 3rem) !important;
  color: var(--kb-text) !important;
  margin-bottom: 0.5rem !important;
}

.br-app .container-wide > div:first-child > p {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 1.0625rem !important;
  color: var(--kb-text-soft) !important;
}

/* Entry cards (each post in the listing). */
.entry-card.entry-card {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-radius: var(--kb-radius);
  background: #fff;
  box-shadow: var(--kb-shadow-soft);
  border-left: 3px solid var(--c, var(--kb-honey));
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.entry-card.entry-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--kb-shadow-soft-lg);
}

.entry-kicker.entry-kicker {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kb-primary);
  margin-bottom: 0.35rem;
}

.entry-title.entry-title {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--kb-text);
  margin-bottom: 0.35rem;
}

.entry-meta.entry-meta {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.875rem;
  color: var(--kb-text-mute);
}

.entry-arrow.entry-arrow {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--kb-primary);
  margin-left: 1.5rem;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.entry-card.entry-card:hover .entry-arrow.entry-arrow {
  transform: translateX(3px);
}

/* --- Navbar mount: let Tailwind drive ---------------------------------

   The React Navbar + Footer mount via news_chrome_mount.jsx and bring
   their own Tailwind classes (pl-9, py-1.5, rounded-md, border-kotoba-
   text/20, focus:ring-1, etc.) — exactly the same ones rendered on the
   apex SPA. Since the rewriter now strips every BR stylesheet, nothing
   leaks through and Tailwind's compiled rules in apex.css are the
   single source of truth for these elements. We do NOT add any
   defensive overrides here — any !important on input padding /
   border-radius / height would make the /news search bar look
   different from the apex, which is the opposite of what we want.

   If a future BR upgrade reintroduces an interfering global rule,
   patch the strip in the rewriter rather than restyling here. */

/* --- Wiki single page ------------------------------------------------ */

/* Article wrapper — centered column matching the apex reading width. */
.wiki-article.wiki-article {
  max-width: 38rem;
  margin: 0 auto;
  padding: 0 0.5rem;
}

.wiki-article.wiki-article > header {
  text-align: center;
  margin-bottom: 2.5rem !important;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--kb-border);
}

/* Eyebrow rendered via ::before so "WIKI ARTICLE" appears above the
   title without depending on BR markup. */
.wiki-article.wiki-article > header::before {
  content: 'Wiki article';
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: var(--kb-primary-soft);
  color: var(--kb-primary);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.wiki-article-title.wiki-article-title {
  font-family: 'Fraunces', 'Lora', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(2.25rem, 4.5vw, 3rem) !important;
  line-height: 1.15 !important;
  color: var(--kb-text) !important;
  margin: 0 0 0.75rem !important;
}

.wiki-article.wiki-article > header > p {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--kb-text-mute) !important;
  letter-spacing: 0.02em;
  margin: 0 !important;
}

/* Table of contents — a soft card with sage primary numbering. */
.wiki-toc.wiki-toc {
  margin: 0 auto 3rem;
  max-width: 32rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--kb-radius-lg);
  background: var(--kb-primary-soft);
  border-left: 3px solid var(--kb-primary);
}

.wiki-toc-title.wiki-toc-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kb-primary);
  margin-bottom: 0.75rem;
}

.wiki-toc-list.wiki-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: kb-toc;
}

.wiki-toc-list.wiki-toc-list li {
  counter-increment: kb-toc;
  position: relative;
  padding: 0.4rem 0 0.4rem 1.75rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.wiki-toc-list.wiki-toc-list li::before {
  content: counter(kb-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.45rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--kb-honey);
}

.wiki-toc-list.wiki-toc-list a {
  color: var(--kb-text);
  text-decoration: none;
  transition: color 0.15s;
}

.wiki-toc-list.wiki-toc-list a:hover {
  color: var(--kb-primary);
}

.wiki-toc-sub.wiki-toc-sub {
  list-style: none;
  margin: 0.25rem 0 0 0.75rem;
  padding: 0;
  border-left: 1px solid var(--kb-border);
  padding-left: 0.75rem;
}

.wiki-toc-sub.wiki-toc-sub li {
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

/* --- Wiki / docs body — same treatment as .prose -------------------- */

/* Both wiki articles and docs bodies use `.wiki-body` (docs also adds
   `.docs-body`). Apply the same typographic treatment as `.prose` so
   the article body reads consistently across types. */

.wiki-body.wiki-body {
  font-family: 'Quicksand', 'Inter', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--kb-text);
  max-width: 38rem;
  margin: 0 auto;
}

.wiki-body.wiki-body h1,
.wiki-body.wiki-body h2,
.wiki-body.wiki-body h3 {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--kb-text);
  scroll-margin-top: 5rem;
}

.wiki-body.wiki-body h2 {
  font-size: 1.625rem;
  margin: 2.5rem 0 0.75rem;
}

.wiki-body.wiki-body h3 {
  font-size: 1.25rem;
  margin: 2rem 0 0.5rem;
}

.wiki-body.wiki-body p {
  margin: 0 0 1.25rem;
}

.wiki-body.wiki-body a {
  color: var(--kb-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(var(--kotoba-primary-rgb, 22 86 29) / 0.35);
  transition: text-decoration-color 0.15s;
}

.wiki-body.wiki-body a:hover {
  text-decoration-color: var(--kb-primary);
}

.wiki-body.wiki-body strong { color: var(--kb-text); font-weight: 700; }
.wiki-body.wiki-body em { color: var(--kb-text-soft); }

.wiki-body.wiki-body ul,
.wiki-body.wiki-body ol {
  margin: 0 0 1.25rem 1.25rem;
  padding-left: 0.5rem;
}

.wiki-body.wiki-body li { margin: 0 0 0.5rem; }
.wiki-body.wiki-body li::marker { color: var(--kb-honey); }
.wiki-body.wiki-body li > p { margin-bottom: 0.25rem; }

.wiki-body.wiki-body blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 3px solid var(--kb-honey);
  color: var(--kb-text-soft);
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.125rem;
}

.wiki-body.wiki-body code {
  font-family: 'SF Mono', ui-monospace, 'Cascadia Code', monospace;
  font-size: 0.9em;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--kb-primary-soft);
  color: var(--kb-primary);
}

.wiki-body.wiki-body pre {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--kb-radius);
  background: #1c1a16;
  color: #f4f1e9;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.55;
}

.wiki-body.wiki-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.wiki-body.wiki-body hr {
  border: 0;
  border-top: 1px solid var(--kb-border);
  margin: 2.5rem auto;
  max-width: 8rem;
}

.wiki-body.wiki-body img {
  border-radius: var(--kb-radius);
  margin: 1.5rem 0;
  box-shadow: var(--kb-shadow-soft);
}

.wiki-body.wiki-body table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.wiki-body.wiki-body th,
.wiki-body.wiki-body td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--kb-border);
  text-align: left;
  vertical-align: top;
}

.wiki-body.wiki-body th {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kb-text-mute);
}

/* Section-target highlight — when a TOC link opens a section, briefly
   wash the heading in sage-soft so the reader's eye lands on it. */
.wiki-body.wiki-body h2:target,
.wiki-body.wiki-body h3:target,
.prose.prose h2:target,
.prose.prose h3:target {
  background: var(--kb-primary-soft);
  padding: 0.4rem 0.75rem;
  margin-left: -0.75rem;
  border-radius: 4px;
  animation: kb-target-flash 1.6s ease;
}

@keyframes kb-target-flash {
  0%   { background: rgb(var(--kotoba-primary-rgb, 22 86 29) / 0.25); }
  100% { background: var(--kb-primary-soft); }
}

/* --- Wiki + docs listing card (also used for the wiki list page) ---- */

.br-app .card {
  display: block;
  padding: 1.25rem 1.5rem;
  margin: 0;
  border-radius: var(--kb-radius);
  background: #fff;
  box-shadow: var(--kb-shadow-soft);
  border-left: 3px solid var(--kb-honey);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.br-app .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--kb-shadow-soft-lg);
}

.br-app .card p {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--kb-text) !important;
  margin: 0 !important;
}

.br-app .card span {
  color: var(--kb-primary) !important;
  font-size: 1.25rem;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.br-app .card:hover span { transform: translateX(3px); }

/* --- Docs layout (shell + sidebar + main) --------------------------- */

.docs-shell.docs-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 3rem;
  max-width: 1200px;
  margin: 1rem auto 3rem;
  padding: 0 1.5rem;
  align-items: start;
}

/* Single-column variant for the docs index page. */
.docs-shell.docs-shell.no-toc {
  grid-template-columns: 240px minmax(0, 1fr);
}

@media (max-width: 900px) {
  .docs-shell.docs-shell,
  .docs-shell.docs-shell.no-toc {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.docs-sidebar.docs-sidebar {
  position: sticky;
  top: 5rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--kb-radius-lg);
  background: #fff;
  box-shadow: var(--kb-shadow-soft);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}

@media (max-width: 900px) {
  .docs-sidebar.docs-sidebar {
    position: static;
    max-height: none;
  }
}

.docs-sidebar-home.docs-sidebar-home {
  display: block;
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--kb-text) !important;
  text-decoration: none !important;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--kb-border);
  transition: color 0.15s;
}

.docs-sidebar-home.docs-sidebar-home:hover {
  color: var(--kb-primary) !important;
}

.docs-nav.docs-nav {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.docs-nav-group.docs-nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.docs-nav-section.docs-nav-section {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kb-text-mute);
  margin: 0 0 0.4rem;
}

.docs-nav-list.docs-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.docs-nav-link.docs-nav-link {
  display: block;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.9rem;
  color: var(--kb-text-soft) !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}

.docs-nav-link.docs-nav-link:hover {
  background: var(--kb-primary-soft);
  color: var(--kb-primary) !important;
}

.docs-nav-link.docs-nav-link.is-active,
.docs-nav-link.docs-nav-link[aria-current='page'] {
  background: var(--kb-primary-soft);
  color: var(--kb-primary) !important;
  font-weight: 600;
}

.docs-main.docs-main {
  min-width: 0;
}

.docs-breadcrumb.docs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 2rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.8125rem;
  color: var(--kb-text-mute);
}

.docs-breadcrumb.docs-breadcrumb a {
  color: var(--kb-primary) !important;
  text-decoration: none !important;
  transition: opacity 0.15s;
}

.docs-breadcrumb.docs-breadcrumb a:hover { opacity: 0.75; }
.docs-breadcrumb-sep.docs-breadcrumb-sep { color: var(--kb-text-mute); }
.docs-breadcrumb-current.docs-breadcrumb-current { color: var(--kb-text); font-weight: 600; }

.docs-header.docs-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--kb-border);
}

.docs-title.docs-title {
  font-family: 'Fraunces', 'Lora', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  line-height: 1.15 !important;
  color: var(--kb-text) !important;
  margin: 0 0 0.5rem !important;
}

.docs-meta.docs-meta {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 0.875rem !important;
  color: var(--kb-text-mute) !important;
  letter-spacing: 0.02em;
  margin: 0 !important;
}

.docs-body.docs-body {
  /* Inherits everything from .wiki-body which is co-applied. */
  max-width: 100%;
}

/* Docs index page (listing groups + entries). */
.docs-index.docs-index {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.docs-index-group.docs-index-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.docs-index-section.docs-index-section {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kb-primary) !important;
  margin: 0 0 0.25rem !important;
}

.docs-index-list.docs-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
}

.docs-index-link.docs-index-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--kb-radius);
  background: #fff;
  box-shadow: var(--kb-shadow-soft);
  border-left: 3px solid var(--kb-primary);
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--kb-text) !important;
  text-decoration: none !important;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.docs-index-link.docs-index-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--kb-shadow-soft-lg);
}

.docs-index-arrow.docs-index-arrow {
  color: var(--kb-primary);
  font-size: 1.25rem;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.docs-index-link.docs-index-link:hover .docs-index-arrow.docs-index-arrow {
  transform: translateX(3px);
}

/* Optional right-side on-page TOC rail (longer docs). */
.docs-toc-rail.docs-toc-rail {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.875rem;
}

.docs-toc-sticky.docs-toc-sticky {
  position: sticky;
  top: 5rem;
}

@media (max-width: 1100px) {
  .docs-toc-rail.docs-toc-rail { display: none; }
}

/* --- Page wrappers BR emits for wiki + docs -------------------------
   BR sets `class="wiki-page"` / `class="docs-page"` on the BODY
   element itself. We deliberately DO NOT add padding or layout here
   — it would push the apex Navbar down and break the sticky chrome.
   Use these only as scoping prefixes if a per-type override is ever
   needed (e.g. .wiki-page .br-app … to target a wiki-only tweak). */

/* --- Category archive page (same shape as the blog listing) -------- */

/* BR archive pages reuse `.container-wide` + `<h1>Title</h1><p>Sub</p>`
   + `.entry-card` grid (already styled). The category name + count
   line render through the existing listing-intro styles. We only add:
   the type-context line ABOVE the category name (small-caps kicker)
   when BR emits one as `.archive-kicker`/`.category-kicker` — both
   selectors targeted defensively. */

.archive-kicker.archive-kicker,
.category-kicker.category-kicker,
.br-app .container-wide [class$="-kicker"] {
  display: inline-block;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--kotoba-primary-rgb, 22 86 29));
  margin-bottom: 1rem;
}

/* --- Pagination ----------------------------------------------------- */

/* Editorial pagination: tight centered row beneath the listing, with
   a hairline rule above. Numbered pages render as italic Fraunces;
   Prev/Next as small-caps Quicksand with the underline-reveal
   treatment. Current page reads in honey gold. Targets `.pagination`,
   `.pager`, and generic `nav[aria-label*="agination"]` defensively
   so it covers whichever shape BR ships. */

.br-app .pagination,
.br-app .pager,
.br-app nav[aria-label*='agination' i] {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 1100px;
  margin: 4rem auto 2rem;
  padding: 2.5rem 2rem 0;
  border-top: 1px solid var(--kb-border);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kb-text-mute);
}

.br-app .pagination a,
.br-app .pager a,
.br-app nav[aria-label*='agination' i] a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  color: var(--kb-text) !important;
  text-decoration: none !important;
  position: relative;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.18s ease;
}

.br-app .pagination a::after,
.br-app .pager a::after,
.br-app nav[aria-label*='agination' i] a::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.15rem;
  height: 1px;
  background: var(--kb-text);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.br-app .pagination a:hover::after,
.br-app .pager a:hover::after,
.br-app nav[aria-label*='agination' i] a:hover::after {
  transform: scaleX(1);
}

/* Numbered page links (Fraunces italic). Sits between the prev/next
   small-caps anchors, reads as the volume marker in a magazine. */
.br-app .pagination .page,
.br-app .pagination li > a:not(.prev):not(.next):not([rel='prev']):not([rel='next']),
.br-app .pager .page,
.br-app nav[aria-label*='agination' i] .page {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Current page — honey gold italic, no hover underline. */
.br-app .pagination [aria-current='page'],
.br-app .pagination .is-current,
.br-app .pagination .active,
.br-app .pager [aria-current='page'],
.br-app nav[aria-label*='agination' i] [aria-current='page'] {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--kb-honey) !important;
  background: transparent;
  border: 0;
  letter-spacing: -0.01em;
  text-transform: none;
  padding: 0.5rem 0.85rem;
  pointer-events: none;
}

/* Disabled / non-link pagination items (ellipsis, current, gaps). */
.br-app .pagination .disabled,
.br-app .pagination span:not([aria-current]) {
  color: var(--kb-text-mute);
  padding: 0.5rem 0.85rem;
}

/* Prev / next labels — italic-arrow embellishment on the small caps
   anchor. */
.br-app .pagination .prev::before,
.br-app .pagination [rel='prev']::before,
.br-app .pager .prev::before {
  content: '←';
  margin-right: 0.3rem;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
}

.br-app .pagination .next::after,
.br-app .pagination [rel='next']::after,
.br-app .pager .next::after {
  content: '→';
  margin-left: 0.3rem;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
}

/* --- Changelog (renders when entries are published) ----------------- */

.changelog.changelog,
.changelog-page.changelog-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.changelog-entry.changelog-entry {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--kb-border);
}

.changelog-entry.changelog-entry:last-child {
  border-bottom: 0;
}

.changelog-version.changelog-version {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: var(--kb-primary-soft);
  color: var(--kb-primary);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.changelog-date.changelog-date {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.8125rem;
  color: var(--kb-text-mute);
  margin-left: 0.75rem;
}

.changelog-title.changelog-title {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--kb-text);
  margin: 0 0 1rem;
}

.changelog-notes.changelog-notes {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Note categories ship as classes like changelog-added / -fixed / etc.
   Each gets a coloured pill. */
.changelog-note.changelog-note {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-left: 0;
}

.changelog-category.changelog-category {
  flex-shrink: 0;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 9999px;
  min-width: 4.5rem;
  text-align: center;
}

.changelog-category-added       { background: rgb(var(--kotoba-primary-rgb, 22 86 29) / 0.12); color: var(--kb-primary); }
.changelog-category-fixed       { background: #f2cd73; color: #6b4e0e; }
.changelog-category-changed     { background: #d6cdb2; color: #4a4234; }
.changelog-category-removed     { background: #f8e6da; color: #a83a22; }
.changelog-category-deprecated  { background: var(--kb-border); color: var(--kb-text-mute); }
.changelog-category-security    { background: rgb(168 58 34 / 0.12); color: #a83a22; }

.changelog-note.changelog-note p {
  margin: 0;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--kb-text);
}

/* --- Changelog (current BR markup: inline-styled <section id="v-vN-N-N">)
   ----------------------------------------------------------------------
   BR's renderer changed shape from the original .changelog-* classes
   above. The current output puts every release into
   `<section id="v-vMAJOR-MINOR-PATCH">` inside a flex column wrapper.
   These rules target the live markup so the changelog matches the rest
   of the magazine, AND reverse the list so the most recent version is
   at the top. */

/* Reverse the order — newest at top, oldest at bottom. */
.br-app main div:has(> section[id^="v-v"]),
.br-app div[style*="flex-direction: column"]:has(> section[id^="v-v"]) {
  flex-direction: column-reverse !important;
}

/* Each release becomes a soft-modern card on the cream page. */
.br-app section[id^="v-v"] {
  background: #ffffff;
  border: 1px solid var(--kb-border);
  border-radius: 24px;
  box-shadow: 0 10px 30px -12px rgba(43, 70, 60, 0.12);
  padding: 1.75rem 2rem !important;
}

/* The version heading inside each section — big Fraunces, brand green. */
.br-app section[id^="v-v"] h2 {
  font-family: 'Fraunces', 'Lora', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.625rem !important;
  letter-spacing: -0.02em !important;
  color: var(--kb-primary) !important;
}

/* The release title (BR ships as a sibling <span>). */
.br-app section[id^="v-v"] > div > span {
  font-family: 'Quicksand', sans-serif !important;
  color: var(--kb-text) !important;
}

/* Date — italic Fraunces, muted. */
.br-app section[id^="v-v"] time {
  font-family: 'Fraunces', 'Lora', Georgia, serif !important;
  font-style: italic !important;
  color: var(--kb-text-mute) !important;
}

/* Body paragraph inside the section reads as editorial prose. */
.br-app section[id^="v-v"] p {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: var(--kb-text) !important;
}

/* --- Editorial colophon CTA (injected on every /news page) ---------- */

/* Reads like the back-page subscriber prompt in a print magazine.
   Hairline border top + bottom, generous whitespace, italic deck, two
   editorial links separated by a hairline middle rule. */

.kb-cta {
  position: relative;
  margin: 6rem auto 5rem;
  padding: 0 2rem;
  max-width: 1100px;
}

.kb-cta-inner {
  position: relative;
  padding: 4rem 0 4rem;
  background: transparent;
  border-top: 1px solid var(--kb-text);
  border-bottom: 1px solid var(--kb-text);
  color: var(--kb-text);
  text-align: center;
  overflow: visible;
  isolation: auto;
  box-shadow: none;
  border-radius: 0;
}

.kb-cta-inner::before { display: none; }

.kb-cta-eyebrow {
  display: inline-block;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--kotoba-primary-rgb, 22 86 29));
  margin-bottom: 1.5rem;
}

.kb-cta-title {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--kb-text);
  margin: 0 auto 1.5rem;
  max-width: 32rem;
}

.kb-cta-title br { display: none; }

.kb-cta-sub {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--kb-text-soft);
  max-width: 32rem;
  margin: 0 auto 2.5rem;
}

.kb-cta-actions {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
}

/* Editorial text links with the magazine underline-reveal treatment. */
.kb-cta-primary,
.kb-cta-secondary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 1.25rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: none;
  position: relative;
}

.kb-cta-primary {
  color: var(--kb-text) !important;
  border-right: 1px solid var(--kb-border);
}

.kb-cta-secondary {
  color: var(--kb-text) !important;
}

.kb-cta-primary::after,
.kb-cta-secondary::after {
  content: '';
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 0.1rem;
  height: 1px;
  background: var(--kb-text);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.kb-cta-primary:hover::after,
.kb-cta-secondary:hover::after { transform: scaleX(1); }

.kb-cta-primary:hover,
.kb-cta-secondary:hover {
  color: rgb(var(--kotoba-primary-rgb, 22 86 29)) !important;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.kb-cta-primary > span[aria-hidden] {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.kb-cta-primary:hover > span[aria-hidden] { transform: translateX(2px); }

@media (max-width: 540px) {
  .kb-cta-actions { flex-direction: column; gap: 0.5rem; }
  .kb-cta-primary { border-right: 0; }
}

/* --- Animation -------------------------------------------------------- */

@keyframes kb-fade-up {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Subtle entrance for major content blocks. */
.spotlight.spotlight,
.br-app .block.block,
.prose.prose,
.wiki-article.wiki-article,
.docs-shell.docs-shell,
.kb-cta {
  animation: kb-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.spotlight.spotlight { animation-delay: 0.05s; }
.br-app .block.block { animation-delay: 0.1s; }
.kb-cta { animation-delay: 0.15s; }

/* --- Accessibility ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero.hero,
  .spotlight.spotlight,
  .br-app .block.block,
  .prose.prose,
  .wiki-article.wiki-article,
  .docs-shell.docs-shell,
  .kb-cta,
  .wiki-body.wiki-body h2:target,
  .wiki-body.wiki-body h3:target,
  .prose.prose h2:target,
  .prose.prose h3:target {
    animation: none;
  }
}