/* BeargrassPublishing v2 — publication.css.

   Owns editorial ornaments and mode-aware H1/H2 typography. Single
   source of truth for: drop caps, fx-eyebrow, sec-heading,
   sheen-swell, sec-break, pullquote, related-reading, body-open,
   CTA buttons, hero typography per mode (Paper / Night / Open).

   No !important. Specificity wins via root[data-mode="..."] qualifiers.
*/

/* ============================================================
   Keyframes
   ============================================================ */

@keyframes sheenPan {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0%   0; }
}
@keyframes axisSwell {
  0%, 100% { font-variation-settings: "opsz" 60, "wght" 400, "SOFT" 30, "WONK" 0; }
  50%      { font-variation-settings: "opsz" 90, "wght" 460, "SOFT" 70, "WONK" 0; }
}
@keyframes openSheenPan {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0%   0; }
}
@keyframes heroCaslonBreath {
  0%, 100% { font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0,  "WONK" 0; }
  50%      { font-variation-settings: "opsz" 144, "wght" 460, "SOFT" 30, "WONK" 0; }
}
@keyframes heroNightSheen {
  0%, 100% { background-position: 100% 0%; }
  50%      { background-position: 0%   0%; }
}
@keyframes heroBounce {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ============================================================
   Body baseline
   ============================================================ */

body {
  font-family: var(--type-body);
  color: var(--ink);
  background: var(--paper);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--indigo); text-decoration-color: rgba(43, 69, 99, 0.4); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }

/* ============================================================
   Eyebrow / fx-eyebrow
   ============================================================ */

.eyebrow {
  font-family: var(--type-ui);
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 600;
  display: block;
  margin-bottom: 0.35rem;
}

.fx-eyebrow { margin: 2.25rem 0 0.25rem; padding: 0; }

/* Eyebrow color follows the heading's arc class. Barn opens, indigo
   thinks, olive closes — the editorial chord across a banded page. */
header.fx-eyebrow:has(.fx-build)  .eyebrow { color: var(--barn); }
header.fx-eyebrow:has(.fx-pivot)  .eyebrow { color: var(--indigo); }
header.fx-eyebrow:has(.fx-settle) .eyebrow { color: var(--olive); }

/* ============================================================
   Section heading (.sec-heading, .sheen-swell)
   ============================================================ */

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

/* Paper sheen — ink → warm gradient text-clip pan. */
.sec-heading.sheen-swell,
.headline.sheen-swell {
  font-family: var(--type-italic);
  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;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sheenPan var(--sheen-duration) ease-in-out infinite,
             axisSwell var(--axis-duration) ease-in-out infinite;
}

/* Night — cream → gold → cream gradient pan. */
:root[data-mode="night"] .sec-heading.sheen-swell,
:root[data-mode="night"] .headline.sheen-swell {
  background-image: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--warm) 50%,
    var(--ink) 60%, var(--ink) 100%);
}

/* Open mode body H2 — ONE continuous frosted strip per heading.
   Block-level + width: fit-content so the strip hugs text but holds
   together across line wraps. The dark/warm gradient pans across as
   the Open shimmer signature. Preserved verbatim from the locked
   spec; do not regress. */
:root[data-mode="open"] .band__content .sec-heading,
:root[data-mode="open"] .band__content h2,
:root[data-mode="open"] .band__content h3 {
  color: var(--cream-fixed);
  -webkit-text-fill-color: var(--cream-fixed);
  background-image: linear-gradient(100deg,
    rgba(10, 16, 36, 0.62) 0%,
    rgba(10, 16, 36, 0.62) 35%,
    rgba(212, 162, 90, 0.4) 50%,
    rgba(10, 16, 36, 0.62) 65%,
    rgba(10, 16, 36, 0.62) 100%);
  background-size: 250% 100%;
  background-position: 100% 0%;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0.3em 0.6em 0.34em;
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(10, 16, 36, 0.4);
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.7);
  font-family: var(--type-display);
  font-variation-settings: "opsz" 96, "wght" 420, "SOFT" 20, "WONK" 0;
  letter-spacing: -0.014em;
  line-height: 1.15;
  animation: openSheenPan var(--open-pan-duration) ease-in-out infinite;
}

/* ============================================================
   Headline (legacy + hero band shared base)
   ============================================================ */

.headline {
  font-family: var(--type-display);
  font-size: var(--fs-disp-lg);
  line-height: 1.04;
  letter-spacing: var(--ls-tight);
  max-width: 22ch;
  color: var(--ink);
  margin: 0;
}

.deck {
  font-family: var(--type-italic);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 40;
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  margin: 0.9rem 0 0;
  max-width: 52ch;
  color: var(--ink-sec);
}

/* ============================================================
   Drop cap
   ============================================================ */

.drop-cap::first-letter {
  font-family: var(--type-display);
  font-size: 3.2em;
  line-height: 0.9;
  float: left;
  color: var(--barn);
  margin: 0.05em 0.12em -0.1em 0;
}
:root[data-mode="night"] .drop-cap::first-letter,
:root[data-mode="open"]  .drop-cap::first-letter {
  color: var(--warm);
}
:root[data-mode="open"]  .drop-cap::first-letter {
  text-shadow: 0 1px 6px rgba(10, 16, 36, 0.7);
}

/* ============================================================
   Body prose (band__content paragraphs)
   ============================================================ */

.band__content p,
.band__content li {
  font-family: var(--type-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.band__content .body-open {
  font-family: var(--type-italic);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-sec);
  margin: 0 0 var(--sp-md);
  max-width: 56ch;
}
.band__content a { color: var(--indigo); }
.band__content b,
.band__content strong { color: var(--ink); font-weight: 700; }

/* Open mode body type rides the scene with a text-shadow stack for
   contrast. Paragraphs stay solid cream over band background. */
:root[data-mode="open"] .band__content p,
:root[data-mode="open"] .band__content li {
  color: var(--cream-fixed);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.75);
}
:root[data-mode="open"] .band__content .body-open {
  color: rgba(240, 230, 207, 0.94);
}
:root[data-mode="open"] .band__content a {
  color: var(--warm);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.75);
}
:root[data-mode="open"] .band__content b,
:root[data-mode="open"] .band__content strong {
  color: var(--cream-fixed);
}

/* ============================================================
   Section break (sec-break sprig)
   ============================================================ */

.sec-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: var(--sp-lg) auto;
  color: var(--barn);
  opacity: 0.85;
  max-width: 360px;
}
.sec-break .rule-line { flex: 1; max-width: 80px; height: 1px; background: currentColor; }
.sec-break svg { width: 36px; height: 12px; color: currentColor; }
:root[data-mode="night"] .sec-break,
:root[data-mode="open"]  .sec-break { color: var(--warm); }

/* ============================================================
   CTA button
   ============================================================ */

.cta {
  display: inline-block;
  font-family: var(--type-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  padding: 0.85em 1.6em;
  background: var(--barn);
  color: var(--cream-fixed);
  border-radius: 3px;
  text-decoration: none;
  margin-top: var(--sp-md);
  transition: background 0.2s ease, transform 0.2s ease;
}
.cta:hover {
  background: color-mix(in srgb, var(--barn) 88%, var(--ink) 12%);
  transform: translateY(-1px);
}
:root[data-mode="night"] .cta { background: var(--barn); color: var(--paper-tint); }
:root[data-mode="open"]  .cta {
  background: var(--warm);
  color: var(--ink-fixed);
  box-shadow: 0 6px 22px rgba(10, 16, 36, 0.4);
}

/* ============================================================
   Pullquote
   ============================================================ */

.pull,
.pullquote {
  font-family: var(--type-italic);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.4;
  color: var(--ink-sec);
  margin: var(--sp-lg) 0;
  padding: 0.4rem 0 0.4rem 1.2rem;
  border-left: 2px solid var(--barn);
}
:root[data-mode="night"] .pull,
:root[data-mode="night"] .pullquote { border-left-color: var(--warm); }
:root[data-mode="open"]  .pull,
:root[data-mode="open"]  .pullquote {
  color: var(--cream-fixed);
  border-left-color: var(--warm);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.75);
}

/* ============================================================
   Related reading list (V band on banded pages)
   ============================================================ */

.related-reading__list {
  display: grid;
  gap: var(--sp-md);
  margin: var(--sp-md) 0 0;
}
.related-reading__item {
  display: block;
  padding: var(--sp-md) 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}
.related-reading__item:first-child { border-top: 0; }
.related-reading__item:hover { opacity: 0.85; }
.related-reading__item h3 {
  font-family: var(--type-italic);
  font-variation-settings: "opsz" 36, "wght" 500, "SOFT" 40;
  font-size: var(--fs-xl);
  line-height: 1.25;
  margin: 0 0 0.4rem;
  color: var(--indigo);
}
.related-reading__item p {
  font-family: var(--type-body);
  font-size: var(--fs-sm);
  color: var(--ink-sec);
  margin: 0 0 0.3rem;
  line-height: var(--lh-normal);
}
.related-reading__item .related-reading__time {
  font-family: var(--type-ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-ter);
}
:root[data-mode="open"] .related-reading__item h3 { color: var(--warm); }
:root[data-mode="open"] .related-reading__item p { color: rgba(240, 230, 207, 0.94); }

/* ============================================================
   About-page photo figure
   ============================================================ */

.about-photo { margin: var(--sp-lg) 0; max-width: 520px; }
.about-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.about-photo figcaption {
  font-family: var(--type-italic);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--ink-ter);
  margin-top: 0.5rem;
  line-height: var(--lh-normal);
}
:root[data-mode="open"] .about-photo figcaption { color: rgba(240, 230, 207, 0.85); }