/* BeargrassPublishing v2 — chrome.css.

   Persistent site chrome. Direct port of the v1 heritage chrome
   (cream paper-elev tint, sticky, uppercase nav, pill mode toggle,
   ink wordmark with barn "AI" accent), with mode-aware overrides
   layered through :root[data-mode="..."] selectors instead of the
   v1 patches that sat on top via !important. The result is the
   same visible chrome as v1, with no !important.
*/

/* ============================================================
   Heritage chrome (top bar) — sticky, cream-tinted, blurred
   ============================================================ */

.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;
  padding: 16px var(--pad-x);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.25rem;
}

.heritage-header-cluster {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 1.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   Wordmark
   ============================================================ */

.wordmark-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.heritage-chrome .wordmark-type {
  font-family: var(--type-italic);
  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 .bgai-wm {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  font-family: var(--type-italic);
  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-chrome .bgai-wm .w-section {
  font-family: var(--type-ui);
  font-size: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-sec);
  margin-left: 0.6em;
  font-weight: 600;
}

/* ============================================================
   Primary nav (row 1)
   ============================================================ */

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

/* ============================================================
   Section nav (row 2)
   ============================================================ */

.heritage-chrome__inner--section {
  max-width: var(--w-chrome);
  margin: 0 auto;
  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(--type-ui);
}

.heritage-edition {
  font-family: var(--type-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--barn);
  flex-shrink: 0;
}
.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(--type-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 {
    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 in chrome (Contact button)
   ============================================================ */

.heritage-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--type-ui);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.heritage-cta a.cta {
  background: var(--barn);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 2px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  margin: 0;
  transition: filter 0.2s ease;
}
.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 (pill, three-button)
   ============================================================ */

.mode-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  flex-shrink: 0;
}
.mode-toggle__btn {
  background: transparent;
  border: none;
  margin: 0;
  font-family: var(--type-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__btn[aria-pressed="true"] {
  background: var(--warm);
  color: var(--ink-fixed);
  box-shadow: 0 1px 2px rgba(35, 31, 26, 0.12);
  font-weight: 800;
}
.mode-toggle__btn:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* On sunrise pages (banded layouts + the homepage), the chrome rides
   the dark scene; the toggle switches to a dark-friendly pill so the
   active state still reads. */
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__btn { color: rgba(244, 235, 215, 0.75); }
body[data-sunrise] .mode-toggle__btn[aria-pressed="true"] {
  background: var(--barn);
  color: var(--paper);
}

/* Night mode active-state — keep cream pill on dark surface. */
:root[data-mode="night"] .mode-toggle__btn[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);
}

/* ============================================================
   Mobile burger
   ============================================================ */

.nav-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--type-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-sec);
  cursor: pointer;
}
.nav-toggle__bars {
  width: 18px; height: 14px;
  display: inline-flex; flex-direction: column; justify-content: space-between;
}
.nav-toggle__bars span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink-sec);
}

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .heritage-sitenav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-sm) 0 0;
    border-top: 1px solid var(--rule);
    margin-top: var(--sp-sm);
  }
  .heritage-sitenav.is-open { display: flex; }
  .heritage-sitenav a {
    padding: 0.7em 0;
    border-bottom: 1px solid var(--rule);
  }
}

@media (max-width: 700px) {
  .heritage-cta a.cta { padding: 0.35rem 0.65rem; }
  .mode-toggle__btn { padding: 5px 7px; }
}

/* ============================================================
   Inverted chrome — every bgai page rides a sunrise scene; the
   chrome flips to cream-on-dark with a dark→transparent gradient
   so it lifts cleanly off the alpine massif behind. The horizon
   stripe at the top of Pattern Y pages (homepage + about) is the
   small indigo→barn→warm bar.
   ============================================================ */

body.bgai-studio .heritage-chrome,
body.bgai-learn  .heritage-chrome {
  background-color: transparent;
  background-image: linear-gradient(to bottom,
    rgba(10, 16, 36, 0.78) 0%,
    rgba(10, 16, 36, 0.42) 60%,
    rgba(10, 16, 36, 0)    100%);
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
body.bgai-studio .heritage-chrome .bgai-wm .w-beargrass,
body.bgai-learn  .heritage-chrome .bgai-wm .w-beargrass {
  color: var(--cream-fixed);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.85),
               0 0 14px rgba(10, 16, 36, 0.5);
}
body.bgai-studio .heritage-chrome .bgai-wm .w-ai,
body.bgai-learn  .heritage-chrome .bgai-wm .w-ai {
  color: var(--warm-bright);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.85),
               0 0 14px rgba(10, 16, 36, 0.5);
}
body.bgai-studio .heritage-sitenav a,
body.bgai-learn  .heritage-sitenav a {
  color: var(--cream-fixed);
  opacity: 0.92;
  text-shadow: 0 1px 3px rgba(10, 16, 36, 0.85);
}
body.bgai-studio .heritage-sitenav a:hover,
body.bgai-learn  .heritage-sitenav a:hover { opacity: 1; }
body.bgai-studio .heritage-sitenav a.is-active,
body.bgai-learn  .heritage-sitenav a.is-active { color: var(--warm); }

body.bgai-studio .heritage-chrome__inner--section,
body.bgai-learn  .heritage-chrome__inner--section {
  border-top-color: rgba(244, 235, 215, 0.18);
  background: transparent;
}
body.bgai-studio .heritage-sectionnav a,
body.bgai-learn  .heritage-sectionnav a {
  color: rgba(244, 235, 215, 0.78);
  text-shadow: 0 1px 3px rgba(10, 16, 36, 0.85);
}
body.bgai-studio .heritage-sectionnav a:hover,
body.bgai-learn  .heritage-sectionnav a:hover { color: var(--cream-fixed); }
body.bgai-studio .heritage-sectionnav a.is-active,
body.bgai-learn  .heritage-sectionnav a.is-active { color: var(--warm); }

/* Horizon stripe at the top of Pattern Y pages */
body.page-index .heritage-chrome::before,
body.page-about .heritage-chrome::before,
body.layout-banded .heritage-chrome::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--indigo) 0%,
    var(--barn)   50%,
    var(--warm)   100%);
  opacity: 0.85;
  z-index: 1;
}

/* Mode toggle on sunrise pages — already covered by body[data-sunrise]
   above, but body.bgai-studio is the same set in v2. */
body.bgai-studio .mode-toggle,
body.bgai-learn  .mode-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
body.bgai-studio .mode-toggle__btn,
body.bgai-learn  .mode-toggle__btn { color: rgba(244, 235, 215, 0.85); }
body.bgai-studio .mode-toggle__btn[aria-pressed="true"],
body.bgai-learn  .mode-toggle__btn[aria-pressed="true"] {
  background: #d4a25a;
  color: var(--ink-fixed);
  font-weight: 800;
  text-shadow: none;
}

/* ============================================================
   Persistent sunrise hero (Pattern X / heritage pages)
   ============================================================ */

.sunrise-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.sunrise-bg object,
.sunrise-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sunrise-bg--dim::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(244, 235, 215, 0.42);
  pointer-events: none;
}
:root[data-mode="night"] .sunrise-bg--dim::after { background: rgba(10, 16, 36, 0.55); }
:root[data-mode="open"]  .sunrise-bg--dim::after { background: transparent; }

/* Banded pages don't show the persistent hero — each band carries
   its own scene. */
body.layout-banded .sunrise-bg { display: none; }

/* ============================================================
   Footer
   ============================================================ */

.site-foot {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: var(--sp-3xl) var(--pad-x) var(--sp-2xl);
  border-top: 1px solid var(--rule);
}
.site-foot__inner {
  max-width: var(--w-plate);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-xl);
  align-items: start;
}
.site-foot__sprig {
  width: 48px; height: 48px;
  color: var(--barn);
  opacity: 0.75;
}
.site-foot__sprig svg { width: 100%; height: 100%; }
.site-foot__wm {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--type-italic);
  font-size: 1.2rem;
  font-weight: 600;
}
.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__nav {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-xl);
  margin-top: var(--sp-md);
}
.site-foot__col { display: flex; flex-direction: column; gap: 0.4rem; }
.site-foot__col-title {
  font-family: var(--type-ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-ter);
  margin-bottom: 0.4rem;
  font-weight: 700;
}
.site-foot__col a {
  font-family: var(--type-ui);
  font-size: var(--fs-sm);
  color: var(--ink-sec);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-foot__col a:hover { color: var(--barn); }
.site-foot__meta {
  grid-column: 1 / -1;
  margin-top: var(--sp-lg);
  font-family: var(--type-ui);
  font-size: var(--fs-xs);
  color: var(--ink-ter);
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-md);
}

/* ============================================================
   SSS triptych — Speedy / Safe / Simple
   ============================================================ */

.sss-triptych {
  background: var(--paper-elev);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.sss-triptych__inner {
  max-width: var(--w-plate);
  margin: 0 auto;
  padding: var(--sp-xl) var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xl);
}
@media (max-width: 720px) {
  .sss-triptych__inner { grid-template-columns: 1fr; gap: var(--sp-lg); }
}
.sss-triptych__col {
  text-decoration: none;
  color: var(--ink);
  display: block;
  border-left: 2px solid var(--barn);
  padding-left: var(--sp-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.sss-triptych__col--safe   { border-left-color: var(--indigo); }
.sss-triptych__col--simple { border-left-color: var(--olive); }
.sss-triptych__col:hover   { transform: translateX(2px); }
.sss-triptych__word {
  display: block;
  font-family: var(--type-italic);
  font-variation-settings: "opsz" 80, "wght" 600, "SOFT" 30, "WONK" 1;
  font-size: var(--fs-2xl);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.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(--type-italic);
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-sec);
  margin: 0;
  max-width: 32ch;
}

/* Open mode footer — adopts Night palette so the cinematic register
   carries through to bottom of the page. */
:root[data-mode="open"] .site-foot {
  background: var(--surface-night);
  color: var(--cream-fixed);
  border-top-color: rgba(240, 230, 207, 0.18);
}
:root[data-mode="open"] .site-foot__wm,
:root[data-mode="open"] .site-foot__col a { color: rgba(240, 230, 207, 0.85); }
:root[data-mode="open"] .site-foot__col a:hover { color: var(--warm); }
:root[data-mode="open"] .site-foot__col-title { color: rgba(240, 230, 207, 0.7); }
:root[data-mode="open"] .site-foot__meta {
  color: rgba(240, 230, 207, 0.7);
  border-top-color: rgba(240, 230, 207, 0.18);
}
:root[data-mode="open"] .site-foot__sprig { color: var(--warm); }
:root[data-mode="open"] .site-foot__wm .bgai-wm .w-beargrass { color: var(--cream-fixed); }
:root[data-mode="open"] .site-foot__wm .bgai-wm .w-ai { color: var(--warm); }
:root[data-mode="open"] .sss-triptych {
  background: rgba(22, 33, 46, 0.7);
  border-top-color: rgba(240, 230, 207, 0.18);
  border-bottom-color: rgba(240, 230, 207, 0.18);
}
:root[data-mode="open"] .sss-triptych__sentence { color: rgba(240, 230, 207, 0.85); }

/* Night — explicit footer override so the cream wordmark, cream column
   labels, cream column links all render correctly on the dark token-swapped
   --paper surface. Without this, the footer inherits Night cream type
   on Night dark surface but the per-element overrides we already shipped
   for Open are missing for Night. */
:root[data-mode="night"] .site-foot {
  background: var(--paper);
  color: var(--ink);
  border-top-color: var(--rule);
}
:root[data-mode="night"] .site-foot__sprig { color: var(--warm); }
:root[data-mode="night"] .site-foot__wm { color: var(--ink); }
:root[data-mode="night"] .site-foot__wm .bgai-wm .w-beargrass { color: var(--ink); }
:root[data-mode="night"] .site-foot__wm .bgai-wm .w-ai { color: var(--warm); }
:root[data-mode="night"] .site-foot__col a { color: var(--ink-sec); }
:root[data-mode="night"] .site-foot__col a:hover { color: var(--warm); }
:root[data-mode="night"] .site-foot__col-title { color: var(--ink-ter); }
:root[data-mode="night"] .site-foot__meta {
  color: var(--ink-ter);
  border-top-color: var(--rule);
}
:root[data-mode="night"] .sss-triptych {
  background: var(--paper-elev);
  border-top-color: var(--rule);
  border-bottom-color: var(--rule);
}
:root[data-mode="night"] .sss-triptych__sentence { color: var(--ink-sec); opacity: 0.92; }