/*
Theme Name: Bladez N Fadez
Theme URI: https://example.com/bladez-n-fadez
Author: Bladez N Fadez
Description: A one-page barbershop theme. Black and white with a shining gold accent, semi-cursive italic display type, and barber-pole trim on every section where something happens (call, book, visit, write).
Version: 1.10.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bladez-n-fadez
Tags: one-column, custom-menu, custom-logo, editor-style, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Primary: black. Secondary: white. Accent: gold. */
  --bnf-ink:        #000000;
  --bnf-ink-soft:   #0a0a0b;
  --bnf-ink-raised: #131316;
  --bnf-ink-line:   #26262b;
  --bnf-paper:      #ffffff;
  --bnf-paper-dim:  #f4f4f2;
  --bnf-muted:      #a9a9b2;
  --bnf-muted-dark: #55555e;

  /* Gold. The flat tone is for borders and small text; the gradient shines. */
  --bnf-gold:       #c9a227;
  --bnf-gold-deep:  #7a5c18;
  --bnf-gold-lit:   #f7e07a;
  --bnf-gold-hot:   #fff8d6;
  --bnf-gold-gradient: linear-gradient(
      100deg,
      var(--bnf-gold-deep)  0%,
      var(--bnf-gold)      16%,
      var(--bnf-gold-lit)  34%,
      var(--bnf-gold-hot)  46%,
      var(--bnf-gold-lit)  58%,
      var(--bnf-gold)      78%,
      var(--bnf-gold-deep) 100%);

  /* Barber pole */
  --bnf-pole-red:   #c8102e;
  --bnf-pole-blue:  #0a3161;
  --bnf-pole-white: #ffffff;
  --bnf-pole-width: 22px;
  --bnf-pole-band:  14px;   /* one stripe, measured across the gradient axis */
  --bnf-pole-cycle: 79.2px; /* 4 bands * 14px * sqrt(2) -- one seamless loop at 45deg */

  --bnf-display: "Kaushan Script", "Brush Script MT", "Segoe Script", cursive;
  --bnf-serif:   "Playfair Display", Georgia, "Times New Roman", serif;
  --bnf-body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --bnf-shell:   1180px;
  --bnf-gutter:  clamp(1.25rem, 5vw, 3rem);
  --bnf-section: clamp(4.5rem, 10vw, 8rem);
  --bnf-radius:  2px;
  --bnf-ease:    cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* --bnf-header-h is published by main.js from the header's resting height;
   the fallback covers the no-JS case and the first paint. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bnf-header-h, 176px) + 1.5rem);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bnf-ink);
  color: var(--bnf-paper);
  font-family: var(--bnf-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, iframe { max-width: 100%; display: block; }
a { color: var(--bnf-gold-lit); text-decoration: none; }
a:hover { color: var(--bnf-gold-hot); }

h1, h2, h3, h4 {
  font-family: var(--bnf-display);
  font-weight: 400;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: .005em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(3rem, 9vw, 6.5rem); }
h2 { font-size: clamp(2.35rem, 6vw, 4rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
h4 { font-family: var(--bnf-serif); font-size: 1.15rem; }

.bnf-shell {
  width: min(100% - (var(--bnf-gutter) * 2), var(--bnf-shell));
  margin-inline: auto;
}

.bnf-eyebrow {
  font-family: var(--bnf-body);
  font-style: normal;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--bnf-gold);
  margin: 0 0 1rem;
}

.bnf-lede {
  font-family: var(--bnf-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--bnf-muted);
  max-width: 56ch;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed; top: 1rem; left: 1rem;
  width: auto; height: auto; clip-path: none;
  z-index: 999;
  background: var(--bnf-paper); color: var(--bnf-ink);
  padding: .75rem 1.25rem; font-weight: 700;
}

:focus-visible {
  outline: 2px solid var(--bnf-gold-lit);
  outline-offset: 3px;
}

/* ==========================================================================
   3. The gold shine
   ========================================================================== */

.bnf-gold-text {
  background-image: var(--bnf-gold-gradient);
  background-size: 250% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: bnf-shine 7s var(--bnf-ease) infinite;
}

@keyframes bnf-shine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.bnf-rule {
  width: 92px; height: 2px;
  border: 0; margin: 0 0 1.75rem;
  background-image: var(--bnf-gold-gradient);
  background-size: 250% 100%;
  animation: bnf-shine 7s var(--bnf-ease) infinite;
}

.bnf-rule--center { margin-inline: auto; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.bnf-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  font-family: var(--bnf-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: var(--bnf-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--bnf-ease), box-shadow .25s var(--bnf-ease), color .25s;
}

.bnf-btn:hover { transform: translateY(-2px); }

/* Gold fill -- the shine lives in the background, so the label stays black. */
.bnf-btn--gold {
  color: var(--bnf-ink);
  background-image: var(--bnf-gold-gradient);
  background-size: 250% 100%;
  box-shadow: 0 10px 30px -14px rgba(201, 162, 39, .9);
  animation: bnf-shine 7s var(--bnf-ease) infinite;
}

.bnf-btn--gold:hover {
  color: var(--bnf-ink);
  box-shadow: 0 16px 38px -14px rgba(247, 224, 122, .95);
}

.bnf-btn--ghost {
  color: var(--bnf-paper);
  border-color: rgba(201, 162, 39, .55);
  background: transparent;
}

.bnf-btn--ghost:hover {
  color: var(--bnf-gold-hot);
  border-color: var(--bnf-gold-lit);
}

/* Buttons are not text links: the .bnf-act underline below must not reach
   them, or Book online / Get directions / Call the shop render underlined. */
.bnf-act .bnf-btn { text-decoration: none; }

/* On the white barber-pole sections the ghost button inverts. */
.bnf-act .bnf-btn--ghost {
  color: var(--bnf-ink);
  border-color: rgba(0, 0, 0, .35);
}

.bnf-act .bnf-btn--ghost:hover {
  color: var(--bnf-ink);
  border-color: var(--bnf-ink);
  background: rgba(0, 0, 0, .05);
}

/* ==========================================================================
   5. Header / navigation
   ========================================================================== */

.bnf-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 1.4rem 0;
  /* Solid black for the first 40% -- the wordmark sits there and needs a flat
     ground -- then easing out to the translucent tint on the right. */
  background-color: transparent;
  background-image: linear-gradient(
      90deg,
      var(--bnf-ink) 0%,
      var(--bnf-ink) 40%,
      rgba(0, 0, 0, .35) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: padding .3s var(--bnf-ease), background .3s, border-color .3s;
}

.bnf-header.is-stuck {
  padding: .7rem 0;
  background-image: linear-gradient(
      90deg,
      var(--bnf-ink) 0%,
      var(--bnf-ink) 40%,
      rgba(0, 0, 0, .92) 100%);
  border-bottom-color: var(--bnf-ink-line);
}

.bnf-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Doubled from the original 2rem / 54px. The nav beside it is unchanged --
   only the brand scales, so the header simply grows taller to fit it. */
.bnf-brand {
  font-family: var(--bnf-display);
  font-style: italic;
  font-size: clamp(3rem, 5.2vw, 4rem);
  line-height: 1;
  white-space: nowrap;
}

.bnf-brand img {
  max-height: 108px;
  width: auto;
  transition: max-height .3s var(--bnf-ease);
}

/* Give some of that height back once the header sticks. */
.bnf-header.is-stuck .bnf-brand { font-size: clamp(2.1rem, 3.6vw, 2.8rem); }
.bnf-header.is-stuck .bnf-brand img { max-height: 76px; }

.bnf-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  list-style: none;
  margin: 0; padding: 0;
}

.bnf-nav a {
  position: relative;
  color: var(--bnf-paper);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .35rem 0;
}

.bnf-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background-image: var(--bnf-gold-gradient);
  background-size: 250% 100%;
  transition: width .3s var(--bnf-ease);
}

.bnf-nav a:hover,
.bnf-nav .is-current > a { color: var(--bnf-gold-lit); }
.bnf-nav a:hover::after,
.bnf-nav .is-current > a::after { width: 100%; }

.bnf-nav__cta { display: none; }

.bnf-burger {
  display: none;
  width: 46px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(201, 162, 39, .5);
  border-radius: var(--bnf-radius);
  cursor: pointer;
}

.bnf-burger span,
.bnf-burger span::before,
.bnf-burger span::after {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  background: var(--bnf-gold-lit);
  transition: transform .3s var(--bnf-ease), opacity .2s;
}

.bnf-burger span::before,
.bnf-burger span::after { content: ""; position: relative; }
.bnf-burger span::before { top: -6px; }
.bnf-burger span::after  { top: 4px; }

.bnf-burger[aria-expanded="true"] span { background: transparent; }
.bnf-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.bnf-burger[aria-expanded="true"] span::after  { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 900px) {
  .bnf-burger { display: block; }

  .bnf-nav {
    position: absolute;
    inset: 100% 0 auto;
    background: rgba(0, 0, 0, .97);
    border-bottom: 1px solid var(--bnf-ink-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--bnf-ease);
  }

  .bnf-nav.is-open { max-height: 70vh; }

  .bnf-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--bnf-gutter) 2rem;
  }

  .bnf-nav li { border-bottom: 1px solid var(--bnf-ink-line); }
  .bnf-nav a { display: block; padding: 1.1rem 0; }
  .bnf-nav a::after { display: none; }
  .bnf-nav__cta { display: block; padding-top: 1.5rem; }
  .bnf-nav__cta .bnf-btn { width: 100%; justify-content: center; }
}

/* --- Mobile quick-action bar ---------------------------------------------
   Icon-only row inside the fixed header, below the logo. Phone, email, map and
   booking, each hidden when its Customizer value is empty. Desktop hides the
   whole bar -- the full nav and the Book button already cover these. */

.bnf-quickbar { display: none; }

.bnf-icon {
  width: 21px;
  height: 21px;
  pointer-events: none;
}

@media (max-width: 900px) {
  .bnf-quickbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: .5rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(201, 162, 39, .3);
    transition: margin-top .3s var(--bnf-ease), padding-top .3s var(--bnf-ease);
  }

  .is-stuck .bnf-quickbar { margin-top: .6rem; padding-top: .6rem; }

  .bnf-quickbar__btn {
    display: grid;
    place-items: center;
    min-height: 46px;
    color: var(--bnf-gold-lit);
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(201, 162, 39, .45);
    border-radius: var(--bnf-radius);
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s var(--bnf-ease), background .25s, border-color .25s, color .25s;
  }

  .bnf-quickbar__btn:hover {
    color: var(--bnf-gold-hot);
    border-color: var(--bnf-gold-lit);
    background: rgba(201, 162, 39, .12);
  }

  .bnf-quickbar__btn:active { transform: scale(.95); }

  /* Booking is the one action we want them to take, so it carries the gold. */
  .bnf-quickbar__btn--primary {
    color: var(--bnf-ink);
    border-color: transparent;
    background-image: var(--bnf-gold-gradient);
    background-size: 250% 100%;
    box-shadow: 0 6px 18px -10px rgba(201, 162, 39, .9);
    animation: bnf-shine 7s var(--bnf-ease) infinite;
  }

  .bnf-quickbar__btn--primary:hover {
    color: var(--bnf-ink);
    border-color: transparent;
    background-color: transparent;
  }
}

/* ==========================================================================
   6. Sections -- dark by default
   ========================================================================== */

.bnf-section {
  position: relative;
  padding: var(--bnf-section) 0;
}

.bnf-section--tint { background: var(--bnf-ink-soft); }

.bnf-section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bnf-section__head--center { text-align: center; }
.bnf-section__head--center .bnf-lede { margin-inline: auto; }

/* Sits under the lede as a second line: same measure, but body face and bold
   so it reads as a notice rather than more editorial copy. */
.bnf-services__discount {
  margin: .85rem auto 0;
  max-width: 56ch;
  font-family: var(--bnf-body);
  font-size: .95rem;
  letter-spacing: .01em;
  color: var(--bnf-gold);
}

/* Hairline of gold between dark sections. */
.bnf-section + .bnf-section:not(.bnf-act)::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .35), transparent);
}

/* ==========================================================================
   7. Action sections -- white paper, black text, barber-pole sides
   ========================================================================== */

.bnf-act {
  position: relative;
  background: var(--bnf-paper);
  color: var(--bnf-ink);
  padding-inline: calc(var(--bnf-pole-width) + .5rem);
  overflow: hidden;
}

.bnf-act h2,
.bnf-act h3,
.bnf-act h4 { color: var(--bnf-ink); }

.bnf-act .bnf-eyebrow { color: var(--bnf-muted-dark); }
.bnf-act .bnf-lede { color: var(--bnf-muted-dark); }

/* Text links only -- .bnf-act .bnf-btn in section 4 opts the buttons out. */
.bnf-act a { color: var(--bnf-ink); text-decoration: underline; text-underline-offset: .25em; }
.bnf-act a:hover { color: var(--bnf-pole-red); }

.bnf-act .bnf-rule {
  background-image: linear-gradient(90deg, var(--bnf-pole-red), var(--bnf-pole-blue));
  animation: none;
}

/* The poles themselves. 45deg stripes, translated one full cycle so the loop
   is invisible; --bnf-pole-cycle is the band set times sqrt(2). */
.bnf-act::before,
.bnf-act::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: var(--bnf-pole-width);
  background-image: repeating-linear-gradient(
      45deg,
      var(--bnf-pole-red)   0 var(--bnf-pole-band),
      var(--bnf-pole-white) var(--bnf-pole-band) calc(var(--bnf-pole-band) * 2),
      var(--bnf-pole-blue)  calc(var(--bnf-pole-band) * 2) calc(var(--bnf-pole-band) * 3),
      var(--bnf-pole-white) calc(var(--bnf-pole-band) * 3) calc(var(--bnf-pole-band) * 4));
  box-shadow:
    inset  6px 0 12px -6px rgba(0, 0, 0, .55),
    inset -6px 0 12px -6px rgba(0, 0, 0, .55);
  animation: bnf-pole 2.4s linear infinite;
}

.bnf-act::before { left: 0; }
.bnf-act::after  { right: 0; }

@keyframes bnf-pole {
  from { background-position: 0 0; }
  to   { background-position: 0 var(--bnf-pole-cycle); }
}

/* Same trim, used as a standalone divider between dark sections. */
.bnf-pole-bar {
  height: var(--bnf-pole-width);
  background-image: repeating-linear-gradient(
      45deg,
      var(--bnf-pole-red)   0 var(--bnf-pole-band),
      var(--bnf-pole-white) var(--bnf-pole-band) calc(var(--bnf-pole-band) * 2),
      var(--bnf-pole-blue)  calc(var(--bnf-pole-band) * 2) calc(var(--bnf-pole-band) * 3),
      var(--bnf-pole-white) calc(var(--bnf-pole-band) * 3) calc(var(--bnf-pole-band) * 4));
  box-shadow: inset 0 6px 12px -6px rgba(0, 0, 0, .5), inset 0 -6px 12px -6px rgba(0, 0, 0, .5);
  animation: bnf-pole 2.4s linear infinite;
}

@media (max-width: 700px) {
  :root { --bnf-pole-width: 14px; --bnf-pole-band: 9px; --bnf-pole-cycle: 50.9px; }
}

/* ==========================================================================
   8. Hero
   ========================================================================== */

.bnf-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Top padding is the header's own height plus breathing room, so the fixed
     header can never overlap the hero at any viewport. */
  padding-top: calc(var(--bnf-header-h, 176px) + clamp(1.5rem, 6vh, 4.5rem));
  padding-bottom: clamp(4rem, 10vh, 7rem);
  overflow: hidden;
}

.bnf-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(201, 162, 39, .22), transparent 58%),
    radial-gradient(90%  70% at 12% 88%, rgba(10, 49, 97, .3),   transparent 60%),
    var(--bnf-ink);
}

/* Faint razor-stripe texture over the hero. */
.bnf-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, .045) 0 1px,
      transparent 1px 14px);
}

.bnf-hero__inner { position: relative; z-index: 1; }

.bnf-hero__title { margin-bottom: .35em; }
.bnf-hero__title small {
  display: block;
  font-family: var(--bnf-body);
  font-style: normal;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--bnf-muted);
  margin-bottom: 1.5rem;
}

.bnf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.bnf-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--bnf-ink-line);
}

.bnf-hero__meta dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bnf-gold);
  margin-bottom: .35rem;
}

.bnf-hero__meta dd {
  margin: 0;
  font-family: var(--bnf-serif);
  font-style: italic;
  font-size: 1.4rem;
}

/* ==========================================================================
   9. Services
   ========================================================================== */

.bnf-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--bnf-ink-line);
  border: 1px solid var(--bnf-ink-line);
}

.bnf-service {
  position: relative;
  background: var(--bnf-ink);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: background .35s var(--bnf-ease);
}

.bnf-service:hover { background: var(--bnf-ink-raised); }

.bnf-service__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.bnf-service h3 { margin: 0; }

.bnf-service__price {
  font-family: var(--bnf-serif);
  font-style: italic;
  font-size: 1.5rem;
  background-image: var(--bnf-gold-gradient);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: bnf-shine 7s var(--bnf-ease) infinite;
}

.bnf-service p { margin: 0; color: var(--bnf-muted); font-size: .95rem; }

.bnf-service__dur {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bnf-gold);
}

/* ==========================================================================
   10. Team
   ========================================================================== */

.bnf-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.bnf-barber { text-align: center; }

.bnf-barber__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--bnf-ink-raised), var(--bnf-ink));
  border: 1px solid var(--bnf-ink-line);
}

.bnf-barber__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter .5s var(--bnf-ease), transform .6s var(--bnf-ease);
}

.bnf-barber:hover .bnf-barber__frame img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.04);
}

/* Placeholder monogram when no photo is set. */
.bnf-barber__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--bnf-display);
  font-style: italic;
  font-size: 4.5rem;
  background-image: var(--bnf-gold-gradient);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: bnf-shine 7s var(--bnf-ease) infinite;
}

.bnf-barber__frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background-image: var(--bnf-gold-gradient);
  background-size: 250% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--bnf-ease);
}

.bnf-barber:hover .bnf-barber__frame::after { transform: scaleX(1); }

.bnf-barber h3 { margin-bottom: .15rem; }

.bnf-barber__role {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bnf-gold);
}

.bnf-barber p { color: var(--bnf-muted); font-size: .93rem; margin: .75rem 0 0; }

/* ==========================================================================
   11. Gallery collage + lightbox
   ========================================================================== */

/* The collage is one link wrapping a row of padded photo cards. They overlap
   via negative margin -- no absolute positioning, so the row simply centres
   itself and cannot collapse if a card is missing. */

.bnf-collage {
  /* One knob drives the pile: --bnf-card is the card's edge length, and the
     overlap is a fixed fraction of it. Row width for n cards is therefore
     n*card - (n-1)*0.48*card, which is what the breakpoints below keep inside
     the viewport. */
  --bnf-card: min(400px, 27.5vw);
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.bnf-collage__stack {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.bnf-collage__card {
  position: relative;
  box-sizing: border-box;
  /* Never grow, never shrink, never stretch to the row height. All three are
     stated explicitly -- an inherited align-items:stretch was what previously
     turned these into tall slivers. */
  flex: 0 0 auto;
  align-self: center;
  width: var(--bnf-card);
  height: var(--bnf-card);
  aspect-ratio: 1 / 1;
  /* The overlap. First card resets it so the row stays centred. */
  margin-left: calc(var(--bnf-card) * -0.48);
  padding: clamp(9px, 1.1vw, 18px);
  background: var(--bnf-paper);
  box-shadow:
    0 30px 60px -18px rgba(0, 0, 0, .95),
    0 10px 22px -8px rgba(0, 0, 0, .75);
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0));
  transition: transform .45s var(--bnf-ease), box-shadow .45s var(--bnf-ease);
}

.bnf-collage__card:first-child { margin-left: 0; }

/* Uniform padding + a square card means the photo area is square too. */
.bnf-collage__card img,
.bnf-collage__blank {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.5) contrast(1.05);
  transition: filter .5s var(--bnf-ease);
}

.bnf-collage__blank {
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--bnf-serif);
  font-style: italic;
  font-size: .85rem;
  color: var(--bnf-muted-dark);
  background: linear-gradient(140deg, #d8d8d4, #f1f1ee);
  filter: none;
}

/* Each card owns its resting angle and lift, so the hover fan and the
   reduced-motion reset can both derive from them instead of restating. The
   middle cards sit on top, the way a dropped pile actually stacks. */
.bnf-collage__card:nth-child(1) { --rot: -9deg;   --dy: 14px;  z-index: 1; }
.bnf-collage__card:nth-child(2) { --rot: 5.5deg;  --dy: -18px; z-index: 2; }
.bnf-collage__card:nth-child(3) { --rot: -4deg;   --dy: 8px;   z-index: 4; }
.bnf-collage__card:nth-child(4) { --rot: 8deg;    --dy: -10px; z-index: 3; }
.bnf-collage__card:nth-child(5) { --rot: -6.5deg; --dy: 16px;  z-index: 2; }
.bnf-collage__card:nth-child(6) { --rot: 3.5deg;  --dy: -14px; z-index: 1; }

.bnf-collage:hover .bnf-collage__card,
.bnf-collage:focus-visible .bnf-collage__card {
  transform: rotate(calc(var(--rot, 0deg) * 1.35)) translateY(calc(var(--dy, 0px) * 1.5));
  box-shadow:
    0 42px 74px -18px rgba(0, 0, 0, 1),
    0 12px 26px -8px rgba(0, 0, 0, .8);
}

.bnf-collage:hover .bnf-collage__card img { filter: grayscale(0) contrast(1); }

.bnf-collage__cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  transition: transform .35s var(--bnf-ease);
}

.bnf-collage:hover .bnf-collage__cue { transform: translateY(3px); }

.bnf-collage__cue-label {
  font-family: var(--bnf-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  background-image: var(--bnf-gold-gradient);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: bnf-shine 7s var(--bnf-ease) infinite;
}

.bnf-collage__cue-count {
  font-family: var(--bnf-serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--bnf-muted);
}

/* Six cards is the ceiling -- section-gallery.php slices the list to 6. These
   step the count down and shrink the card so the row keeps fitting the
   viewport: 400px squares simply cannot all fit on a phone. */
@media (max-width: 980px) {
  .bnf-collage { --bnf-card: min(400px, 31vw); }
  .bnf-collage__card:nth-child(n+6) { display: none; }
}

@media (max-width: 700px) {
  .bnf-collage { --bnf-card: min(340px, 37vw); }
  .bnf-collage__card:nth-child(n+5) { display: none; }

  .bnf-collage__card {
    box-shadow:
      0 18px 36px -14px rgba(0, 0, 0, .95),
      0 6px 14px -6px rgba(0, 0, 0, .75);
  }
}

/* --- Full-screen carousel ------------------------------------------------ */

.bnf-lightbox {
  position: fixed;
  inset: 0;
  height: 100svh; /* Ignored where unsupported -- inset:0 already covers it. */
  z-index: 200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: rgba(0, 0, 0, .97);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--bnf-ease), visibility .3s;
}

/* :target is the no-script path -- following the collage link opens it with no
   JS at all. .is-open is what the script uses, since it calls preventDefault
   and the hash therefore never changes when the script is running. */
.bnf-lightbox:target,
.bnf-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bnf-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--bnf-ink-line);
}

.bnf-lightbox__counter {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bnf-gold);
}

.bnf-lightbox__close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  text-decoration: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--bnf-paper);
  background: transparent;
  border: 1px solid var(--bnf-ink-line);
  border-radius: var(--bnf-radius);
  cursor: pointer;
  transition: color .25s, border-color .25s;
}

.bnf-lightbox__close:hover { color: var(--bnf-gold-lit); border-color: var(--bnf-gold); }

/* Scroll-snap track: native momentum and swipe on touch, buttons scroll it by
   one viewport on desktop. No transform bookkeeping to get out of sync. */
.bnf-lightbox__track {
  display: flex;
  /* min-height:0 is required on every box between the fixed shell and the
     image; without it each one refuses to shrink below its content and the
     whole column grows down the page. */
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.bnf-lightbox__track::-webkit-scrollbar { display: none; }

.bnf-lightbox__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
  place-items: center;
  margin: 0;
  padding: clamp(1rem, 4vw, 2.5rem);
  min-width: 0;
  min-height: 0;
}

.bnf-lightbox__slide img {
  /* Intrinsic ratio is preserved automatically: a replaced element with auto
     width and height shrinks to whichever max- constraint bites first. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.bnf-lightbox__blank {
  display: grid;
  place-items: center;
  width: min(90%, 640px);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 4 / 3;
  font-family: var(--bnf-serif);
  font-style: italic;
  color: var(--bnf-muted-dark);
  background: linear-gradient(140deg, var(--bnf-ink-raised), var(--bnf-ink));
  border: 1px solid var(--bnf-ink-line);
}

.bnf-lightbox__slide figcaption {
  max-height: 22%;
  overflow-y: auto;
  font-family: var(--bnf-serif);
  font-style: italic;
  color: var(--bnf-muted);
  text-align: center;
}

.bnf-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 2rem;
  line-height: 1;
  color: var(--bnf-paper);
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--bnf-ink-line);
  border-radius: 50%;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}

.bnf-lightbox__nav:hover {
  color: var(--bnf-gold-lit);
  border-color: var(--bnf-gold);
  background: rgba(0, 0, 0, .85);
}

.bnf-lightbox__nav[disabled] { opacity: .25; cursor: default; }
.bnf-lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.bnf-lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

/* Stops the page behind the lightbox from scrolling with it. */
.bnf-lightbox-open { overflow: hidden; }

/* ==========================================================================
   12. Testimonials
   ========================================================================== */

/* Reviews carousel. Same scroll-snap approach as the lightbox: swipe, momentum
   and snapping come from the browser, the buttons just scroll by one card, and
   the dots read their state back from scrollLeft. The card design below is
   unchanged -- only the container became a track. */
.bnf-carousel { position: relative; }

.bnf-quotes {
  --bnf-quote-gap: clamp(1.5rem, 3vw, 2.5rem);
  --bnf-per-view: 3;
  display: flex;
  gap: var(--bnf-quote-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding-bottom: .25rem;
}

.bnf-quotes::-webkit-scrollbar { display: none; }

.bnf-quote {
  flex: 0 0 calc(
    (100% - (var(--bnf-per-view) - 1) * var(--bnf-quote-gap)) / var(--bnf-per-view)
  );
  scroll-snap-align: start;
}

@media (max-width: 980px) { .bnf-quotes { --bnf-per-view: 2; } }
@media (max-width: 680px) { .bnf-quotes { --bnf-per-view: 1; } }

.bnf-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.bnf-carousel__controls[hidden] { display: none; }

.bnf-carousel__nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--bnf-paper);
  background: transparent;
  border: 1px solid var(--bnf-ink-line);
  border-radius: 50%;
  cursor: pointer;
  transition: color .25s, border-color .25s, opacity .25s;
}

.bnf-carousel__nav:hover { color: var(--bnf-gold-lit); border-color: var(--bnf-gold); }
.bnf-carousel__nav[disabled] { opacity: .3; cursor: default; }

.bnf-carousel__dots { display: flex; align-items: center; gap: .6rem; }

.bnf-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  background: var(--bnf-ink-line);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .3s, transform .3s var(--bnf-ease);
}

.bnf-carousel__dot:hover { background: var(--bnf-gold); }

.bnf-carousel__dot.is-active {
  background-image: var(--bnf-gold-gradient);
  background-size: 250% 100%;
  transform: scale(1.35);
}

.bnf-quote {
  position: relative;
  padding: clamp(2rem, 3.5vw, 2.75rem);
  background: var(--bnf-ink);
  border: 1px solid var(--bnf-ink-line);
}

.bnf-quote::before {
  content: "\201C";
  position: absolute;
  top: -.35em; left: .35em;
  font-family: var(--bnf-serif);
  font-size: 6rem;
  line-height: 1;
  color: rgba(201, 162, 39, .22);
}

.bnf-quote blockquote {
  position: relative;
  margin: 0 0 1.5rem;
  font-family: var(--bnf-serif);
  font-style: italic;
  font-size: 1.1rem;
}

.bnf-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bnf-gold);
}

.bnf-quote__meta {
  color: var(--bnf-muted);
  letter-spacing: .14em;
}

.bnf-quote__meta::before {
  content: "/";
  margin-right: .55rem;
  color: var(--bnf-ink-line);
}

/* What the reviewer came in for. Gold-edged so they read as shop services,
   distinct from the muted source tag beside them. */
.bnf-quote__services {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.25rem;
}

.bnf-quote__service {
  padding: .28rem .6rem;
  font-family: var(--bnf-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bnf-gold);
  border: 1px solid rgba(201, 162, 39, .45);
  border-radius: 999px;
  white-space: nowrap;
}

/* Where the review came from -- Google, Facebook, and so on. Links out to the
   original when a URL is set, so the claim is checkable. */
.bnf-quote__source {
  padding: .3rem .6rem;
  font-size: .64rem;
  letter-spacing: .16em;
  color: var(--bnf-muted);
  border: 1px solid var(--bnf-ink-line);
  border-radius: 999px;
  white-space: nowrap;
  transition: color .25s, border-color .25s;
}

a.bnf-quote__source:hover {
  color: var(--bnf-gold-lit);
  border-color: var(--bnf-gold);
}

.bnf-stars {
  letter-spacing: .25em;
  font-size: .9rem;
  margin-bottom: 1rem;
  color: var(--bnf-gold-lit);
}

/* ==========================================================================
   13. Call to action band
   ========================================================================== */

.bnf-cta { padding: clamp(3.5rem, 7vw, 5.5rem) calc(var(--bnf-pole-width) + .5rem); }

.bnf-cta__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.bnf-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.bnf-cta__phone {
  display: block;
  font-family: var(--bnf-display);
  font-style: italic;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin-bottom: .35rem;
}

/* The number is display type, not a body link. Opting it out of the .bnf-act
   underline takes the .bnf-act prefix -- .bnf-cta__phone alone (0,1,0) loses
   to .bnf-act a (0,1,1), which is what the old !important was papering over. */
.bnf-act .bnf-cta__phone { text-decoration: none; }

.bnf-cta__note {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bnf-muted-dark);
}

@media (max-width: 820px) {
  .bnf-cta__grid { grid-template-columns: 1fr; text-align: center; }
  .bnf-cta__actions { justify-content: center; }
}

/* ==========================================================================
   14. Location + hours + map
   ========================================================================== */

.bnf-visit__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.bnf-hours { list-style: none; margin: 0 0 2rem; padding: 0; }

.bnf-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px dashed rgba(0, 0, 0, .16);
  font-size: .95rem;
}

.bnf-hours dt, .bnf-hours .day {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
}

.bnf-hours .time { font-family: var(--bnf-serif); font-style: italic; }
.bnf-hours li.is-closed .time { color: var(--bnf-pole-red); }

.bnf-address {
  font-family: var(--bnf-serif);
  font-style: italic;
  font-size: 1.2rem;
  margin: 0 0 1.5rem;
}

.bnf-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 3px solid var(--bnf-ink);
  background: var(--bnf-paper-dim);
  filter: grayscale(1) contrast(1.1);
  transition: filter .4s var(--bnf-ease);
}

.bnf-map:hover { filter: none; }
.bnf-map iframe { width: 100%; height: 100%; border: 0; }

.bnf-map__fallback {
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
  padding: 2rem;
  font-family: var(--bnf-serif);
  font-style: italic;
  color: var(--bnf-muted-dark);
}

@media (max-width: 820px) {
  .bnf-visit__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   15. Contact form
   ========================================================================== */

.bnf-contact__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.bnf-form { display: grid; gap: 1.25rem; }

.bnf-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.bnf-field { display: grid; gap: .45rem; }

.bnf-field label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.bnf-field input,
.bnf-field select,
.bnf-field textarea {
  width: 100%;
  padding: .95rem 1rem;
  font-family: var(--bnf-body);
  font-size: 1rem;
  color: var(--bnf-ink);
  background: var(--bnf-paper-dim);
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: var(--bnf-radius);
  transition: border-color .25s, box-shadow .25s, background .25s;
}

.bnf-field textarea { min-height: 150px; resize: vertical; }

.bnf-field input:focus,
.bnf-field select:focus,
.bnf-field textarea:focus {
  outline: none;
  background: var(--bnf-paper);
  border-color: var(--bnf-ink);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .35);
}

/* Honeypot -- hidden from people, visible to bots. */
.bnf-field--trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.bnf-form__submit { justify-self: start; }

.bnf-notice {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid;
  background: var(--bnf-paper-dim);
  font-size: .95rem;
}

.bnf-notice--ok    { border-color: var(--bnf-pole-blue); }
.bnf-notice--error { border-color: var(--bnf-pole-red); }

.bnf-contact__aside dl { margin: 0; }

.bnf-contact__aside dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bnf-muted-dark);
  margin-top: 1.5rem;
}

.bnf-contact__aside dd {
  margin: .3rem 0 0;
  font-family: var(--bnf-serif);
  font-style: italic;
  font-size: 1.15rem;
}

@media (max-width: 820px) {
  .bnf-contact__grid,
  .bnf-form__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.bnf-footer {
  background: var(--bnf-ink);
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
  border-top: 1px solid var(--bnf-ink-line);
}

.bnf-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.bnf-footer h4 {
  font-family: var(--bnf-body);
  font-style: normal;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bnf-gold);
  margin-bottom: 1rem;
}

.bnf-footer p, .bnf-footer li { color: var(--bnf-muted); font-size: .95rem; }
.bnf-footer ul { list-style: none; margin: 0; padding: 0; }
.bnf-footer li { padding: .3rem 0; }
.bnf-footer a { color: var(--bnf-muted); }
.bnf-footer a:hover { color: var(--bnf-gold-lit); }

.bnf-footer__brand {
  font-family: var(--bnf-display);
  font-style: italic;
  font-size: 2rem;
  margin-bottom: .75rem;
}

/* Facebook first, then Instagram: an icon disc with the handle beside it. The
   list reset comes from .bnf-footer ul above. A network with no URL renders as
   a span, so the hover treatment is hung on a.bnf-social, not .bnf-social. */
.bnf-socials { margin-top: 1.25rem; }
.bnf-socials li { padding: .35rem 0; }

.bnf-social {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: color .3s, transform .3s var(--bnf-ease);
}

.bnf-social__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: 1px solid var(--bnf-ink-line);
  border-radius: 50%;
  transition: border-color .3s;
}

/* The built-in glyph is stroked in currentColor and follows the link; an
   uploaded file keeps whatever colour is baked into it. */
.bnf-social__icon img { width: 20px; height: 20px; object-fit: contain; }

a.bnf-social:hover { transform: translateX(3px); }
a.bnf-social:hover .bnf-social__icon { border-color: var(--bnf-gold); }

.bnf-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--bnf-ink-line);
  font-size: .8rem;
  color: var(--bnf-muted-dark);
}

/* Second row of the same band -- sits outside .bnf-footer__base so the
   left/right split of the two lines above it is left alone. */
.bnf-footer__credit {
  margin-top: .9rem;
  text-align: center;
}

.bnf-footer .bnf-footer__credit,
.bnf-footer .bnf-footer__credit a { font-size: .78rem; color: var(--bnf-muted-dark); }
.bnf-footer .bnf-footer__credit a:hover { color: var(--bnf-gold-lit); }

/* ==========================================================================
   17. Scroll reveal + motion preferences
   ========================================================================== */

.bnf-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--bnf-ease), transform .7s var(--bnf-ease);
}

.bnf-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .bnf-reveal { opacity: 1; transform: none; }

  /* Keep the gold readable once its sweep is frozen. */
  .bnf-gold-text,
  .bnf-service__price,
  .bnf-barber__initials,
  .bnf-collage__cue-label,
  .bnf-carousel__dot.is-active { background-position: 46% 50%; }

  /* Cards hold their resting angle and lift rather than fanning open. */
  .bnf-collage:hover .bnf-collage__card,
  .bnf-collage:focus-visible .bnf-collage__card {
    transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0));
  }
}

/* ==========================================================================
   18. WordPress editor + admin bar
   ========================================================================== */

.admin-bar .bnf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bnf-header { top: 46px; } }

.alignwide  { max-width: var(--bnf-shell); margin-inline: auto; }
.alignfull  { width: 100%; }
.wp-caption { max-width: 100%; }