/* =========================================================================
   BRANDON HEART — community gazette, signed design system (prefix bh-)
   Metaphor: the town square and its notice board. Porch (header), streets
   (nav), banner (gazette hero), notice (section), board (mosaic), flyer
   (tile), docket (dated feed), dateline, lede, spreader, column, foot.
   Chart: cream paper + deep pine + warm neutrals, marigold accent.
   Serif display (Hoefler/Baskerville) over a humanist sans body.
   3px corners, 1px hairlines, 3px double rules for the dateline,
   drop caps, small-cap kickers, four inline SVG ornaments, auto dark mode.
   ========================================================================= */

:root {

  /* ---- 1. CHART: 3 hues + 1 accent + papers ------------------------------ */
  --paper:         #f5f1e6;  /* cream, the gazette page                    */
  --paper-deep:    #ece7d7;  /* slightly sunk cream                        */
  --pine:          #1d4438;  /* deep pine green: porch, foot, wells        */
  --pine-deep:     #143128;  /* pressed pine                               */
  --ink:           #212a22;  /* running text, near-black green             */
  --ink-soft:      #4e5a4e;  /* datelines, captions, soft mentions         */
  --accent:        #b06a10;  /* marigold: links, rules, focus              */
  --accent-strong: #8a4f08;  /* hover and kickers, darker in light mode    */
  --line:          #cfc7b0;  /* 1px hairlines on paper                     */
  --panel:         #ece7d7;  /* boxed asides                               */
  --banner-ink:    #f3efe2;  /* copy over the hero shade                   */
  --foot-text:     #dbe4d8;  /* foot copy on pine                          */
  --foot-link:     #f0c27a;  /* foot links on pine                         */

  /* ---- 2. TYPOGRAPHY (composed system stacks, nothing remote) ------------ */
  --title-font: "Hoefler Text", "Baskerville", "Baskerville Old Face", "Palatino Linotype", Palatino, Georgia, serif;
  --body-font: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --title-weight: 600;
  --caps-spacing: 0.18em;    /* kickers and datelines                     */

  /* Fluid editorial scale. */
  --fs-0:    clamp(1.03rem, 0.99rem + 0.2vw, 1.14rem);   /* body            */
  --fs-1:    clamp(1.14rem, 1.07rem + 0.35vw, 1.34rem);  /* standfirst, h3  */
  --fs-2:    clamp(1.34rem, 1.2rem + 0.7vw, 1.72rem);    /* sub heads       */
  --fs-3:    clamp(1.66rem, 1.38rem + 1.4vw, 2.35rem);   /* section titles  */
  --fs-4:    clamp(2.05rem, 1.5rem + 2.8vw, 3.3rem);     /* page h1         */
  --fs-hero: clamp(2.35rem, 1.55rem + 4vw, 4.2rem);      /* home h1         */

  --body-leading: 1.66;
  --title-leading: 1.12;

  /* ---- 3. RHYTHM AND MEASURES -------------------------------------------- */
  --measure:       64ch;
  --measure-wide:  1340px;
  --page-margin:   clamp(1.15rem, 4.2vw, 4.6rem);
  --gutter:        clamp(0.9rem, 2.2vw, 2.1rem);
  --breath:        clamp(2.8rem, 6.5vw, 6.5rem);
  --offset:        clamp(1.3rem, 3.4vw, 3.8rem);

  /* ---- 4. DETAILS --------------------------------------------------------- */
  --radius:    3px;
  --rule:      1px solid var(--line);
  --rule-pine: 2px solid var(--pine);
  --motion:    150ms ease;
}

/* Automatic dark mode: same chart, lamplit. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:         #131f19;
    --paper-deep:    #0e1813;
    --pine:          #1a3d32;
    --pine-deep:     #122b23;
    --ink:           #e9e4d3;
    --ink-soft:      #b4b1a0;
    --accent:        #d69a3c;
    --accent-strong: #e9b666;
    --line:          #37493e;
    --panel:         #1a2b22;
    --foot-text:     #d7e0d4;
    --foot-link:     #f0c27a;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: var(--fs-0);
  line-height: var(--body-leading);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) {
  ::selection { background: var(--accent); color: #1a1206; }
}

h1, h2, h3, h4 {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  line-height: var(--title-leading);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4); letter-spacing: 0.001em; }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-1); line-height: 1.22; }
h4 { font-size: 1rem; }

p, ul, ol { margin: 0 0 1.15em; }
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--motion);
}
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
hr { border: 0; border-top: var(--rule); margin: var(--breath) 0; }

/* =========================================================================
   ORNAMENTS — four inline glyphs, reused everywhere (heart, star, burst,
   fleuron). CurrentColor only, so both modes and every context work.
   ========================================================================= */

.bh-glyph { display: inline-block; width: 0.62em; height: 0.62em; fill: currentColor; vertical-align: -0.04em; }
.bh-glyph--heart { width: 0.72em; height: 0.72em; }
.bh-glyph--burst { width: 0.7em; height: 0.7em; }

/* Fleuron: a full-width divider, lines and diamond. */
.bh-fleuron {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 2.6rem 0 2.2rem; color: var(--accent-strong);
}
.bh-fleuron::before, .bh-fleuron::after {
  content: ""; flex: 1; border-top: var(--rule);
}
.bh-fleuron svg { width: 0.85rem; height: 0.85rem; fill: currentColor; flex: none; }

/* =========================================================================
   FRAME
   ========================================================================= */

/* Skip link. DO NOT REMOVE. */
.bh-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; z-index: 50;
}
.bh-skip:focus { left: 0.6rem; top: 0.6rem; }

/* The common: useful width of any content zone. */
.bh-common {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.bh-scene { display: block; }

/* --- Porch (header) ------------------------------------------------------- */
.bh-porch {
  background: var(--pine);
  padding-block: clamp(0.85rem, 1.9vw, 1.35rem);
  border-bottom: 4px solid var(--accent);
}
.bh-porch__row {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem 1.6rem;
}
.bh-mast {
  font-family: var(--title-font);
  font-size: clamp(1.32rem, 1.1rem + 0.95vw, 1.9rem);
  color: var(--paper); text-decoration: none;
  font-weight: var(--title-weight);
}
.bh-mast .bh-glyph--heart { color: var(--foot-link); margin-right: 0.34rem; }
.bh-mast__tag {
  display: block;
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: var(--caps-spacing);
  text-transform: uppercase;
  color: var(--foot-link);
  margin-top: 0.3rem;
}
.bh-streets ul {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  list-style: none; margin: 0; padding: 0;
}
.bh-streets a {
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--foot-text); text-decoration: none;
  padding-bottom: 0.22rem; border-bottom: 1px solid transparent;
  transition: color var(--motion), border-color var(--motion);
}
.bh-streets a:hover, .bh-streets [aria-current="page"] {
  border-bottom-color: var(--foot-link); color: #fff;
}
@media (prefers-color-scheme: dark) {
  .bh-streets a:hover, .bh-streets [aria-current="page"] { color: var(--paper); }
}

/* --- Trail (breadcrumb) ---------------------------------------------------- */
.bh-trail {
  font-size: 0.8rem; color: var(--ink-soft);
  font-family: var(--body-font);
  padding-block: 1.15rem;
}
.bh-trail ol {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.55rem;
  list-style: none; margin: 0; padding: 0;
}
.bh-trail li + li::before { content: "›"; margin-right: 0.55rem; color: var(--accent); }

/* =========================================================================
   HOME BANNER — the gazette front page: photo behind a HARD-CODED shade,
   dateline row between double rules, display serif, modes under bursts.
   ========================================================================= */

.bh-banner { position: relative; }
.bh-banner__photo {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.bh-banner__shade {
  position: absolute; inset: 0;
  background: rgba(16, 38, 31, 0.78);   /* hard color, never a variable */
}
.bh-banner__copy {
  position: relative;
  padding-block: clamp(1.5rem, 3.4vw, 2.4rem);
  color: var(--banner-ink);
}
.bh-banner__dateline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 1.1rem;
  border-top: 3px double rgba(243, 239, 226, 0.65);
  border-bottom: 3px double rgba(243, 239, 226, 0.65);
  padding-block: 0.5rem;
  margin-bottom: clamp(1rem, 2.4vw, 1.7rem);
  font-family: var(--body-font);
  font-size: 0.72rem; letter-spacing: var(--caps-spacing);
  text-transform: uppercase;
  color: var(--banner-ink);
}
.bh-banner__dateline .bh-glyph { color: var(--foot-link); }
.bh-banner__copy h1 { color: inherit; max-width: 24ch; font-size: var(--fs-hero); }
.bh-banner__deck {
  margin: 1rem 0 0; max-width: 58ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
  line-height: 1.55;
}
.bh-banner__modes {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem;
  margin: 1.2rem 0 0 !important;
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 0.74rem !important;
  letter-spacing: var(--caps-spacing);
  text-transform: uppercase;
  color: var(--foot-link) !important;
}
.bh-banner__modes .bh-glyph { color: var(--accent); }

/* =========================================================================
   NOTICE: a section of any page
   ========================================================================= */

.bh-notice { margin-top: clamp(1.9rem, 4vw, 3.2rem); }
.bh-notice__head {
  display: flex; flex-wrap: wrap;
  align-items: end; justify-content: space-between;
  gap: 0.6rem 2rem;
  border-top: var(--rule-pine);
  padding-top: 0.85rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.6rem);
}
.bh-notice__title {
  max-width: 30ch;
  display: flex; align-items: baseline; gap: 0.6rem;
}
.bh-notice__title .bh-glyph { color: var(--accent); align-self: center; }
.bh-notice__note {
  font-size: 0.83rem; color: var(--ink-soft); max-width: 42ch; margin: 0;
  font-family: var(--body-font);
}

/* Kicker: small-cap label above a headline. */
.bh-kicker {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 0.68rem; letter-spacing: var(--caps-spacing);
  text-transform: uppercase; color: var(--accent-strong);
  margin-bottom: 0.55rem;
}
.bh-kicker::before {
  content: ""; width: 1.6rem; border-top: 2px solid var(--accent);
}

/* =========================================================================
   BOARD: the notice-board mosaic (heart of the skeleton)
   ========================================================================= */

.bh-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  list-style: none; margin: 0; padding: 0;
}
.bh-flyer { grid-column: span 3; margin: 0; position: relative; }
.bh-flyer--full  { grid-column: span 6; }
.bh-flyer--wide  { grid-column: span 4; }
.bh-flyer--half  { grid-column: span 3; }
.bh-flyer--third { grid-column: span 2; }

/* Vertical misalignment: breaks the regular grid. */
.bh-flyer--drop  { margin-top: var(--offset); }
.bh-flyer--drop2 { margin-top: calc(var(--offset) * 2); }

.bh-flyer__window { overflow: hidden; background: var(--pine); border-radius: var(--radius); }
.bh-flyer__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--motion), filter var(--motion);
}
.bh-flyer__window--portrait { aspect-ratio: 3 / 4; }
.bh-flyer__window--landscape { aspect-ratio: 4 / 3; }
.bh-flyer__window--square   { aspect-ratio: 1 / 1; }
.bh-flyer__window--pano     { aspect-ratio: 21 / 9; }
.bh-flyer__window--tall     { aspect-ratio: 2 / 3; }

/* Caption: the flyer's legend under the image, never a slab. */
.bh-flyer__caption { padding-top: 0.75rem; margin-top: 0.75rem; border-top: var(--rule); }
.bh-flyer__num {
  display: inline-block;
  font-family: var(--title-font);
  font-size: 0.78rem; letter-spacing: 0.22em;
  color: var(--accent-strong);
  margin-bottom: 0.4rem;
}
.bh-flyer__num::after {
  content: ""; display: inline-block; width: 1.4rem;
  border-top: 1px solid var(--line);
  margin-left: 0.5rem; vertical-align: 0.24em;
}
.bh-flyer__title {
  font-family: var(--title-font);
  font-size: var(--fs-1);
  line-height: 1.2; margin: 0;
}
.bh-flyer--full .bh-flyer__title,
.bh-flyer--wide .bh-flyer__title { font-size: var(--fs-2); }
.bh-flyer__link { color: var(--ink); text-decoration: none; transition: color var(--motion); }
.bh-flyer__link:hover { color: var(--accent); }
.bh-flyer__link::after { content: ""; position: absolute; inset: 0; }
.bh-flyer:hover .bh-flyer__img { transform: scale(1.015); }
.bh-flyer__blurb {
  margin: 0.45rem 0 0; color: var(--ink-soft); font-size: 0.87rem;
  line-height: 1.5; max-width: 46ch;
}
.bh-flyer__tag {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0.6rem 0 0;
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-strong);
}
.bh-flyer__tag .bh-glyph { color: var(--accent); }
.bh-board--dense { --gutter: clamp(0.7rem, 1.5vw, 1.3rem); }

/* =========================================================================
   DOCKET: the dated feed of the home page
   ========================================================================= */

.bh-docket {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.6rem, 4vw, 3.4rem);
  list-style: none; margin: 0; padding: 0;
}
.bh-item {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  padding-block: clamp(1rem, 2.2vw, 1.4rem);
  border-top: var(--rule);
}
.bh-item__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pine);
  border-radius: var(--radius);
}
.bh-dateline {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-strong); margin: 0 0 0.32rem;
}
.bh-dateline::before {
  content: ""; width: 0.5rem; height: 0.5rem; flex: none;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.bh-item h3 { margin: 0 0 0.35rem; }
.bh-item h3 a { color: var(--ink); text-decoration: none; }
.bh-item h3 a:hover { color: var(--accent); }
.bh-item p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.52; max-width: 56ch; }

/* =========================================================================
   DEEP PAGES (article, gate, trust)
   ========================================================================= */

.bh-lede {
  padding-block: clamp(1.4rem, 3.4vw, 2.9rem) clamp(1.2rem, 2.6vw, 2.2rem);
  max-width: 54rem;
}
.bh-lede h1 { max-width: 26ch; }
.bh-lede__standfirst {
  font-family: var(--title-font);
  font-size: var(--fs-1);
  line-height: 1.42;
  color: var(--ink-soft); margin-top: 1.1rem; max-width: 58ch;
}
.bh-byline {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  border-top: var(--rule); border-bottom: var(--rule);
  padding-block: 0.55rem;
}
.bh-byline a { color: var(--ink-soft); }
.bh-byline a:hover { color: var(--accent); }

/* Spreader: full-width image, direct child of .bh-scene. */
.bh-spreader { margin: 0; }
.bh-spreader__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--pine); }
.bh-spreader__caption {
  max-width: var(--measure-wide); margin-inline: auto;
  padding: 0.75rem var(--page-margin) 0;
  font-size: 0.8rem; color: var(--ink-soft);
  font-style: italic;
}

/* Reading column. */
.bh-column { max-width: var(--measure); margin-top: var(--breath); }
.bh-column h2 { margin-top: 2.4rem; }
.bh-column h3 { margin-top: 1.9rem; }
.bh-column h2:first-child, .bh-column h3:first-child { margin-top: 0; }
.bh-column ul, .bh-column ol { padding-left: 1.15rem; }
.bh-column li { margin-bottom: 0.42em; }
.bh-column li::marker { color: var(--accent-strong); }

/* Drop cap: the gazette lettrine, on the opening paragraph. */
.bh-column > p:first-of-type::first-letter {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  float: left;
  font-size: 3.05em;
  line-height: 0.8;
  padding: 0.06em 0.14em 0 0;
  color: var(--accent-strong);
}

/* Exergue: pull quote with a thick left rule. */
.bh-pull {
  margin: 2.2rem 0; padding-left: 1.4rem;
  border-left: 4px solid var(--accent);
  font-family: var(--title-font);
  font-size: clamp(1.18rem, 1.02rem + 0.8vw, 1.6rem);
  line-height: 1.36;
}
.bh-panel {
  background: var(--panel);
  border-top: 2px solid var(--pine);
  padding: clamp(1.1rem, 2.8vw, 1.9rem); margin: 2.4rem 0;
  border-radius: 0 0 var(--radius) var(--radius);
}
.bh-panel > :last-child { margin-bottom: 0; }

/* Tables: always inside a scroll container of their own. */
.bh-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 2.2rem 0; border-top: var(--rule-pine); border-bottom: var(--rule);
}
.bh-scroll table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.92rem; }
.bh-scroll th, .bh-scroll td {
  text-align: left; padding: 0.62rem 1rem 0.62rem 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.bh-scroll th {
  font-family: var(--body-font);
  font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.bh-scroll tr:last-child td { border-bottom: 0; }

/* Read next. */
.bh-next { border-top: var(--rule-pine); margin-top: var(--breath); padding-top: 1.15rem; }
.bh-next h2 { font-size: var(--fs-2); }
.bh-next ul { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.bh-next li { margin-bottom: 0.6rem; }

/* =========================================================================
   FOOT (footer)
   ========================================================================= */

.bh-foot {
  margin-top: var(--breath);
  background: var(--pine);
  border-top: 4px solid var(--accent);
  padding-block: clamp(2.2rem, 5.5vw, 4rem);
  color: var(--foot-text);
}
.bh-foot__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3.4rem);
}
.bh-foot h2 {
  font-size: 1.15rem; margin-bottom: 0.85rem; color: var(--paper);
}
.bh-foot ul { list-style: none; margin: 0; padding: 0; }
.bh-foot li { margin-bottom: 0.48rem; }
.bh-foot a {
  color: var(--foot-link); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion);
}
.bh-foot a:hover { border-bottom-color: var(--foot-link); }
.bh-foot p { color: var(--foot-text); font-size: 0.9rem; }
.bh-foot__base {
  margin-top: clamp(1.8rem, 4.5vw, 3rem); padding-top: 1.1rem;
  border-top: 1px solid rgba(243, 239, 226, 0.28);
  font-size: 0.75rem; color: var(--foot-text);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.bh-foot__base .bh-glyph { color: var(--foot-link); }

/* =========================================================================
   RESPONSIVE: the board folds, no horizontal overflow anywhere
   ========================================================================= */

@media (max-width: 1020px) {
  .bh-docket { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .bh-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bh-flyer, .bh-flyer--half { grid-column: span 2; }
  .bh-flyer--wide, .bh-flyer--full { grid-column: span 4; }
  .bh-flyer--drop, .bh-flyer--drop2 { margin-top: calc(var(--offset) / 2); }
}
@media (max-width: 620px) {
  .bh-board { grid-template-columns: minmax(0, 1fr); }
  .bh-flyer, .bh-flyer--third, .bh-flyer--half,
  .bh-flyer--wide, .bh-flyer--full { grid-column: span 1; }
  .bh-flyer--drop, .bh-flyer--drop2 { margin-top: 0; }
  .bh-flyer__window--tall { aspect-ratio: 3 / 4; }
  .bh-item { grid-template-columns: 1fr; }
  .bh-item__thumb { max-width: 320px; }
  .bh-column > p:first-of-type::first-letter { font-size: 2.6em; }
}

/* =========================================================================
   PRINT: ink on paper, chrome away, the gazette becomes a gazette
   ========================================================================= */

@media print {
  :root { --paper: #fff; --ink: #000; --ink-soft: #333; --line: #bbb; --panel: #f2f2f2;
          --pine: #000; --accent: #000; --accent-strong: #000; }
  .bh-porch, .bh-foot, .bh-skip, .bh-banner__photo, .bh-banner__shade { display: none; }
  .bh-banner__copy { color: #000; padding-block: 0; }
  .bh-banner__dateline { border-color: #000; }
  body { font-size: 11pt; line-height: 1.45; }
  .bh-banner__copy h1 { font-size: 22pt; }
  a { color: #000; text-decoration: underline; }
  .bh-column { max-width: 100%; }
  .bh-flyer__window, .bh-item__thumb, .bh-spreader__img { break-inside: avoid; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .bh-flyer:hover .bh-flyer__img { transform: none; }
}