/* ============================================================
   By Design Builders Child — global base layer
   Ported from the prototype's globals.css (base document, reveal
   engine, hero keyframes). Component classes live in components.css.
   ============================================================ */

/* ── Base document ─────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

/* Base typography on the document body. Divi sets its own defaults, so
   these are stated explicitly to re-establish the Monograph rhythm on
   any text that isn't carrying a component class of its own. */
body {
  background-color: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* ── Divi wrapper reset — full-bleed the [bdb_*] sections ──────
   Every shortcode renders a .bdb-scope block that owns its own
   max-width, centering and gutters. Divi, however, drops each Code
   module into a centered row capped at ~1080px with its own section/
   row/column padding, so the partials inherit Divi's gutters and read
   as off (and uneven) left/right margins. Wherever the Divi wrapper
   chain holds a .bdb-scope, strip its width cap, padding and margins
   so the partial controls the horizontal rhythm. Covers homepage
   sections, interior pages, and the Theme Builder header/footer. */
.et_pb_section:has(.bdb-scope),
.et_pb_row:has(.bdb-scope),
.et_pb_row_inner:has(.bdb-scope),
.et_pb_column:has(.bdb-scope),
.et_pb_module:has(.bdb-scope),
.et_pb_code:has(.bdb-scope) > .et_pb_code_inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ── Lenis smooth scroll ───────────────────────────────────── */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Focus ─────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ── Images — always block to remove inline gap ────────────── */
.bdb-scope img,
.bdb-scope video {
  display: block;
  max-width: 100%;
}

/* ── Selection ─────────────────────────────────────────────── */
::selection {
  background: var(--clay);
  color: var(--bone);
}

/* ── Skip link (inc/accessibility.php) ─────────────────────── */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--clay);
  color: var(--bone);
  padding: 0.5rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-to-content:focus {
  left: 1rem;
  top: 1rem;
}

/* ── Gallery scheme — dark-ink sections (hero, interlude, colophon) ──
   Apply via data-scheme="gallery" on the section element. */
[data-scheme="gallery"] {
  background-color: var(--pine);
  color: var(--on-dark);
}

/* ── Editorial em — clay accent word in headlines ──────────── */
.bdb-scope h1 em,
.bdb-scope h2 em,
.bdb-scope h3 em,
.editorial em {
  font-style: normal;
  color: var(--clay);
}

/* ============================================================
   Scroll reveal — CSS-driven IntersectionObserver animations.
   reveal.js adds .is-in on entry. The pre-hidden state is gated on
   html.bdb-anim (set from <head> before paint by inc/enqueue.php) AND
   prefers-reduced-motion: no-preference — so no-JS users and
   reduced-motion users always see content at its final, visible state.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.bdb-anim .bdb-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity var(--dur-reveal) var(--ease-out),
      transform var(--dur-reveal) var(--ease-out);
  }
  html.bdb-anim .bdb-reveal--fade  { transform: none; }
  html.bdb-anim .bdb-reveal--left  { transform: translateX(-34px); }
  html.bdb-anim .bdb-reveal--right { transform: translateX(34px); }

  html.bdb-anim .bdb-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  html.bdb-anim .bdb-reveal-img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-img) var(--ease-out);
  }
  html.bdb-anim .bdb-reveal-img.is-in {
    clip-path: inset(0 0 0% 0);
  }
}

/* ============================================================
   Hero — CSS keyframe animations
   ============================================================ */
@keyframes bdb-hero-scale {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
@keyframes bdb-line-rise {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes bdb-scroll-cue {
  0%, 100% { transform: scaleX(0.4); opacity: 0.55; }
  50%      { transform: scaleX(1);   opacity: 1; }
}
@keyframes bdb-slide-settle {
  from { transform: scale(1.055); }
  to   { transform: scale(1); }
}

.hero-img-animate {
  animation: bdb-hero-scale var(--dur-hero) var(--ease-out) both;
}

/* Slideshow Ken Burns — the active slide settles from a slight zoom over
   the slide interval. The class is re-applied per slide change by
   hero-slideshow.js, restarting the keyframe. */
.hero-slide-active img {
  animation: bdb-slide-settle 7s var(--ease-out) both;
}

.hero-line-clip {
  display: block;
  overflow: hidden;
  line-height: 1.22;
  padding-bottom: 0.12em;
}
.hero-line {
  display: block;
  animation: bdb-line-rise var(--dur-line) var(--ease-out) both;
}
.hero-line-1 { animation-delay: 60ms; }
.hero-line-2 { animation-delay: 210ms; }
.hero-line-3 { animation-delay: 360ms; }

.hero-scroll-cue {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--on-dark-soft);
  transform-origin: left center;
  animation: bdb-scroll-cue 2.4s var(--ease-in-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide-active img { animation: none; }
  .hero-img-animate      { animation: none; }
  .hero-line             { animation: none; transform: translateY(0); opacity: 1; }
  .hero-scroll-cue       { animation: none; }
}