/* =====================================================================
   brand.css  —  Brian Brixon
   The look of the site, on top of Bootstrap 5.3.8. Load order:
     bootstrap.min.css  ->  tokens.css  ->  brand.css

   Every color, size and timing comes from tokens.css. If you need a new
   color, add a token there first.

   Contents
     1.  Bootstrap bridge        14. Proof strip
     2.  Base type and text      15. Timeline
     3.  Helpers                 16. FAQ accordion
     4.  Focus and skip link     17. Status pills
     5.  Sections and texture    18. Forms and choice cards
     6.  Knot divider            19. Alerts
     7.  Corner brackets         20. Footer
     8.  Header and navigation   21. Back to top
     9.  Buttons and links       22. The monogram and its draw-on
     10. Cards                   23. Motion (reveals, hovers, page transitions)
     11. Browser frame           24. Reduced motion
     12. Gallery and filters     25. Print
     13. Pull quote              26. Vellum sections
                                 27. High contrast
   ===================================================================== */


/* ---- 1. Bootstrap bridge ---------------------------------------------
   Bootstrap components read these --bs-* variables. They are set again on
   every section type so that a vellum section's form fields, accordions
   and so on pick up the vellum colors. */
:root,
.bb-section--forest,
.bb-section--vellum,
.bb-section--bog,
.bb-on-forest,
.bb-on-vellum {
  --bs-body-bg: var(--bb-bg);
  --bs-body-color: var(--bb-text);
  --bs-emphasis-color: var(--bb-heading);
  --bs-heading-color: var(--bb-heading);
  --bs-secondary-color: var(--bb-text-muted);
  --bs-tertiary-color: var(--bb-text-muted);
  --bs-secondary-bg: var(--bb-surface);
  --bs-tertiary-bg: var(--bb-surface);
  --bs-border-color: var(--bb-rule);
  --bs-border-color-translucent: var(--bb-rule);
  --bs-link-hover-color: var(--bb-link-hover);
  --bs-code-color: var(--bb-voice);
  --bs-form-invalid-color: var(--bb-error);
  --bs-form-invalid-border-color: var(--bb-error);
  --bs-form-valid-color: var(--bb-success);
  --bs-form-valid-border-color: var(--bb-success);
}
:root {
  --bs-body-font-family: var(--bb-font-text);
  --bs-body-font-size: var(--step-0);
  --bs-body-font-weight: 400;
  --bs-body-line-height: var(--bb-leading-body);
  --bs-border-radius: var(--bb-radius-control);
  --bs-border-radius-sm: var(--bb-radius-control);
  --bs-border-radius-lg: var(--bb-radius-card);
}
.container,
.container-fluid {
  --bs-gutter-x: calc(var(--bb-gutter) * 2);
}


/* ---- 2. Base type and text ------------------------------------------- */
/* The runes of the Elder Futhark, drawn for this site in the knot's
   straight lines (tools/build-runes.mjs). unicode-range means the file
   (under 2 KB) only loads when a rune is on the page. */
@font-face {
  font-family: "BB Runes";
  src: url("../fonts/bb-runes.woff") format("woff");
  font-display: swap;
  unicode-range: U+16A0-16F8;
}
/* Stand-ins while the Adobe fonts load (they're named right after each
   Adobe font in tokens.css and editions.css): Georgia and Segoe UI,
   resized to the width of Freight and Gill Sans Nova, and with their
   heights set to match, so a line of text takes the same room before and
   after the real font arrives and the page doesn't jump. The numbers were
   measured against the fonts in kit puh2jtf (each italic on its own, and
   the semibold Gill Sans in capitals, as the site sets its labels and
   buttons): if the kit's fonts change, measure them again. A computer or
   phone without Georgia or Segoe UI (Android, say) skips these and
   carries on down the list as before, and Safari, for now, takes the
   width but not the heights. */
@font-face {
  font-family: "Freight Big Fallback";
  src: local("Georgia");
  size-adjust: 79.5%;
  ascent-override: 120.8%;
  descent-override: 35.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Freight Big Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 71.1%;
  ascent-override: 135%;
  descent-override: 39.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Freight Text Fallback";
  src: local("Georgia");
  size-adjust: 92%;
  ascent-override: 106.5%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Freight Text Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 83.7%;
  ascent-override: 117.1%;
  descent-override: 32.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Gill Sans Nova Fallback";
  src: local("Segoe UI");
  font-weight: 400;
  size-adjust: 91.2%;
  ascent-override: 104.2%;
  descent-override: 27.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Gill Sans Nova Fallback";
  src: local("Segoe UI Semibold"), local("SegoeUI-Semibold");
  font-weight: 600;
  size-adjust: 105.7%;
  ascent-override: 90.8%;
  descent-override: 24.6%;
  line-gap-override: 0%;
}
html {
  scroll-padding-top: calc(var(--bb-header-h-condensed) + var(--space-s));
  scrollbar-color: var(--bb-moss) var(--bb-bog-oak);
}
body {
  padding-top: var(--bb-header-h);   /* room for the fixed header */
  background-color: var(--bb-bg);
  color: var(--bb-text);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bb-section--vellum {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
::selection {
  background-color: color-mix(in srgb, var(--bb-accent) 40%, transparent);
  color: var(--bb-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 var(--space-s);
  color: var(--bb-heading);
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: var(--bb-leading-display);
  letter-spacing: var(--bb-tracking-display);
}
h2, .h2 {
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: var(--bb-tracking-display);
}
h3, .h3 {
  font-family: var(--bb-font-text);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.2;
}
h4, .h4 {
  font-family: var(--bb-font-text);
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.3;
}
h5, .h5, h6, .h6 {
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
}
.bb-display-xl {
  font-size: var(--step-5);
  line-height: 0.98;
}
/* The "illuminated" accent: one italic word per headline, at most. */
h1 em, h2 em, .h1 em, .h2 em, .bb-display-xl em {
  font-style: italic;
  font-weight: 300;
  color: var(--bb-voice);
}

p { margin: 0 0 var(--space-s); }
strong, b { font-weight: 600; }

a {
  color: var(--bb-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--bb-dur-hover), text-decoration-color var(--bb-dur-hover);
}
a:hover {
  color: var(--bb-link-hover);
  text-decoration-color: currentColor;
}

small, .small {
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
}
code, kbd, pre, samp {
  font-family: var(--bb-font-code);
  font-size: 0.9em;
}
code { color: var(--bb-voice); }
pre {
  padding: var(--space-s) var(--space-m);
  background-color: var(--bb-surface);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-card);
  color: var(--bb-text);
}
hr {
  border: 0;
  border-top: 1px solid var(--bb-rule);
  opacity: 1;
}
img, svg, picture, video { max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
table, time, .bb-num { font-variant-numeric: tabular-nums lining-nums; }


/* ---- 3. Helpers --------------------------------------------------------- */
.bb-measure { max-width: var(--bb-measure); }
.bb-prose > * { max-width: var(--bb-measure); }
.bb-prose > * + h2 { margin-top: var(--space-xl); }
.bb-prose > * + h3 { margin-top: var(--space-l); }

.bb-lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--bb-text);
  max-width: 40ch;
}
.bb-muted { color: var(--bb-text-muted); }

.bb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin: 0 0 var(--space-s);
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  line-height: 1.3;
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  color: var(--bb-voice);
}
.bb-eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1px;
  background-color: var(--bb-accent);
}
.bb-eyebrow--plain::before { display: none; }

.bb-section-head {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}
.bb-section-head > :last-child { margin-bottom: 0; }
.bb-section-head--center {
  margin-inline: auto;
  text-align: center;
}
.bb-section-head--center .bb-lead { margin-inline: auto; }
.bb-section-head--center .bb-eyebrow::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1px;
  background-color: var(--bb-accent);
}

/* Which part of a photo stays in view when it is cropped. */
.bb-op-top    { object-position: 50% 15%; }
.bb-op-bottom { object-position: 50% 85%; }
.bb-op-left   { object-position: 20% 50%; }
.bb-op-right  { object-position: 80% 50%; }

/* Icons: Font Awesome drawings written into the page by bb_icon()
   (inc/icons/). Sized like a letter of the text around them, the same
   way Font Awesome sizes its own inline icons. Duotone icons have a
   strong layer (.fa-primary) and a faint one (.fa-secondary). */
.bb-fa {
  box-sizing: content-box;
  display: inline-block;
  width: 1.25em;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  fill: currentColor;
}
.bb-fa .fa-primary {
  fill: var(--fa-primary-color, currentColor);
  opacity: var(--fa-primary-opacity, 1);
}
.bb-fa .fa-secondary {
  fill: var(--fa-secondary-color, currentColor);
  opacity: var(--fa-secondary-opacity, 0.4);
}


/* ---- 4. Focus and skip link --------------------------------------------
   Carried over from css/enhancements.css, restyled: a 2px bronze ring with
   a gap, for keyboard users only. */
:focus-visible {
  outline: 2px solid var(--bb-focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible,
.btn-close:focus-visible {
  outline: 2px solid var(--bb-focus);
  outline-offset: 3px;
  box-shadow: none;
}

.bb-skip {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background-color: var(--bb-accent);
  color: var(--bb-accent-ink);
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  text-decoration: none;
  border-radius: var(--bb-radius-control);
  transform: translateY(-300%);
}
.bb-skip:focus,
.bb-skip:focus-visible {
  transform: none;
  color: var(--bb-accent-ink);
}


/* ---- 5. Sections and texture --------------------------------------------
   <section class="bb-section bb-section--forest"> (or --vellum, --bog).
   Each gets a very faint mottled grain from grain.png. */
.bb-section {
  position: relative;
  isolation: isolate;
  overflow-x: clip;   /* soft glows may spill sideways without making the page scroll */
  padding-block: var(--space-section);
  background-color: var(--bb-bg);
  color: var(--bb-text);
}
.bb-section--tight { padding-block: calc(var(--space-section) * 0.55); }
.bb-section--flush-top { padding-top: 0; }
.bb-section::before,
.bb-textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Mottled grain on dark, fine paper grain on vellum (set in tokens.css). */
  background-image: var(--bb-grain-image);
  background-size: var(--bb-grain-size);
  background-position: var(--bb-grain-pos);
  opacity: var(--bb-grain-opacity);
}
.bb-textured {
  position: relative;
  isolation: isolate;
}


/* ---- 6. Knot divider -----------------------------------------------------
   Between major sections only, never twice in a row: <?= bb_divider() ?>
   The plait is one closed loop in ten pieces (inline SVG), so it can draw
   itself in as one unbroken line (the "knots" effect, section 23). */
.bb-divider {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  max-width: 34rem;
  margin: 0 auto;
  color: var(--bb-ornament);
}
.bb-divider::before,
.bb-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background-image: linear-gradient(to left, var(--bb-accent), transparent);
  opacity: 0.8;
}
.bb-divider::after { background-image: linear-gradient(to right, var(--bb-accent), transparent); }
.bb-divider__knot {
  flex: none;
  width: 120px;
  height: 16px;
  overflow: visible;
  opacity: 0.7;
}
/* Where each piece starts and how long it is, as a share of the whole
   line (the draw takes 900ms end to end). */
.bb-divider__knot path { stroke-dasharray: 1 1; --s: 0; --l: 0.0874; }
.bb-divider__knot path:nth-child(1)  { --s: 0;      --l: 0.1506; }
.bb-divider__knot path:nth-child(2)  { --s: 0.1506; }
.bb-divider__knot path:nth-child(3)  { --s: 0.2379; }
.bb-divider__knot path:nth-child(4)  { --s: 0.3253; }
.bb-divider__knot path:nth-child(5)  { --s: 0.4126; }
.bb-divider__knot path:nth-child(6)  { --s: 0.5;    --l: 0.1506; }
.bb-divider__knot path:nth-child(7)  { --s: 0.6506; }
.bb-divider__knot path:nth-child(8)  { --s: 0.7379; }
.bb-divider__knot path:nth-child(9)  { --s: 0.8253; }
.bb-divider__knot path:nth-child(10) { --s: 0.9126; }


/* ---- 7. Corner brackets ---------------------------------------------------
   Add .bb-corners to a frame for knotwork corners (top-left and
   bottom-right). Add .bb-corners--hover too and they only fade in when a
   card is hovered or focused. */
.bb-corners { position: relative; }
.bb-corners::before,
.bb-corners::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: var(--bb-corner-size, 1.75rem);
  height: var(--bb-corner-size, 1.75rem);
  background-color: var(--bb-corner-color, var(--bb-accent));
  -webkit-mask: url("../img/brand/corner.svg") center / contain no-repeat;
          mask: url("../img/brand/corner.svg") center / contain no-repeat;
  pointer-events: none;
  transition: opacity var(--bb-dur-hover), transform var(--bb-dur-hover);
}
.bb-corners::before {
  top: var(--bb-corner-inset, 0.75rem);
  left: var(--bb-corner-inset, 0.75rem);
}
.bb-corners::after {
  right: var(--bb-corner-inset, 0.75rem);
  bottom: var(--bb-corner-inset, 0.75rem);
  transform: rotate(180deg);
}
/* Brackets that sit just outside a framed screenshot. */
.bb-corners--outside { --bb-corner-inset: -0.85rem; }
.bb-corners--hover::before,
.bb-corners--hover::after { opacity: 0; }
.bb-corners--hover:hover::before,
.bb-corners--hover:hover::after,
.bb-card:hover .bb-corners--hover::before,
.bb-card:hover .bb-corners--hover::after,
.bb-card:focus-within .bb-corners--hover::before,
.bb-card:focus-within .bb-corners--hover::after,
a:focus-visible .bb-corners--hover::before,
a:focus-visible .bb-corners--hover::after { opacity: 1; }


/* ---- 8. Header and navigation ---------------------------------------------
   88px tall at the top of the page, 64px once you scroll 40px (site.js adds
   .is-condensed). Below 992px the nav becomes a Bootstrap offcanvas panel. */
/* Fixed, over a spacer of its full height (body's padding), so when it
   condenses nothing below it moves: no layout shift while scrolling. */
.bb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  isolation: isolate;
  background-color: var(--bb-bg);
  border-bottom: 1px solid transparent;
  view-transition-name: site-header;
  transition: background-color var(--bb-dur-ui), border-color var(--bb-dur-ui);
}
.bb-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--bb-grain-image);
  background-size: var(--bb-grain-size);
  background-position: var(--bb-grain-pos);
  opacity: var(--bb-grain-opacity);
  transition: opacity var(--bb-dur-ui);
}
.bb-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: var(--bb-header-h);
  transition: min-height var(--bb-dur-ui) var(--bb-ease-out);
}
.bb-header.is-condensed {
  background-color: var(--bb-forest-raised);
  border-bottom-color: color-mix(in srgb, var(--bb-bronze) 30%, transparent);
}
.bb-header.is-condensed::before { opacity: 0; }
.bb-header.is-condensed .bb-header__inner { min-height: var(--bb-header-h-condensed); }

.bb-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  color: var(--bb-heading);
  text-decoration: none;
}
.bb-brand:hover { color: var(--bb-heading); }
.bb-brand .bb-knot {
  height: 2.75rem;
  color: var(--bb-accent);
  transition: height var(--bb-dur-ui) var(--bb-ease-out);
}
.is-condensed .bb-brand .bb-knot { height: 2.125rem; }
/* The name, in the Norse wordmark (tools/build-wordmark.mjs). */
.bb-brand .bb-wordmark {
  display: block;
  height: 1.3rem;
  width: auto;
  color: var(--bb-heading);
  transition: height var(--bb-dur-ui) var(--bb-ease-out), color var(--bb-dur-hover);
}
.bb-brand:hover .bb-wordmark { color: var(--bb-bronze-light); }
.is-condensed .bb-brand .bb-wordmark { height: 1.05rem; }
.bb-wordmark { display: block; height: 1em; width: auto; overflow: visible; }

.bb-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  color: var(--bb-text-muted);
  text-decoration: none;
}
.bb-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  height: 1px;
  background-color: var(--bb-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--bb-dur-ui) var(--bb-ease-out);
}
.bb-nav__link:hover,
.bb-nav__link[aria-current="page"] { color: var(--bb-heading); }
.bb-nav__link:hover::after,
.bb-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.bb-menu__cta {
  margin-left: clamp(1rem, 2vw, 2rem);
  white-space: nowrap;
}

.bb-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--bb-heading);
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
}
.bb-menu-toggle__icon {
  display: grid;
  gap: 5px;
  width: 22px;
}
.bb-menu-toggle__icon::before,
.bb-menu-toggle__icon::after {
  content: "";
  height: 1.5px;
  background-color: var(--bb-accent);
}
.bb-menu-toggle__icon::after {
  width: 70%;
  justify-self: end;
}
/* The phone menu needs JavaScript to open; without it there's no button,
   and the same links are in the footer. */
.no-js .bb-menu-toggle { display: none; }

/* 992–1199px: the inline nav only just fits, so tighten it a little. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .bb-header__inner { gap: var(--space-s); }
  .bb-nav { gap: 1.1rem; }
  .bb-nav__link { letter-spacing: 0.08em; }
  .bb-menu__cta { margin-left: 1.25rem; }
}

@media (max-width: 991.98px) {
  .bb-menu {
    --bs-offcanvas-width: min(26rem, 88vw);
    --bs-offcanvas-bg: var(--bb-bog-oak);
    --bs-offcanvas-color: var(--bb-text);
    --bs-offcanvas-border-color: var(--bb-rule);
    --bs-offcanvas-padding-x: var(--space-l);
    --bs-offcanvas-padding-y: var(--space-m);
  }
  .bb-menu .offcanvas-header { min-height: var(--bb-header-h-condensed); }
  .bb-menu .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }
  .bb-menu .btn-close {
    --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
    width: 44px;
    height: 44px;
  }
  .bb-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .bb-nav__link {
    width: 100%;
    min-height: 60px;
    font-family: var(--bb-font-display);
    font-weight: 300;
    font-size: var(--step-2);
    letter-spacing: var(--bb-tracking-display);
    text-transform: none;
    color: var(--bb-heading);
    border-bottom: 1px solid var(--bb-rule);
  }
  .bb-nav__link::after {
    bottom: -1px;
    transform-origin: left;
  }
  .bb-menu__cta {
    margin-left: 0;
    align-self: flex-start;
  }
}


/* ---- 9. Buttons and links ------------------------------------------------
   Bronze primary, outline secondary, and .bb-link: a text link whose
   underline grows. Buttons are real <a> or <button> elements. */
.btn {
  --bs-btn-font-family: var(--bb-font-ui);
  --bs-btn-font-weight: var(--bb-weight-ui);
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-line-height: 1.2;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.875rem;
  --bs-btn-border-radius: var(--bb-radius-control);
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 48px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--bb-dur-hover), background-color var(--bb-dur-hover), border-color var(--bb-dur-hover), transform var(--bb-dur-hover);
}
.btn-sm {
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-font-size: var(--step--1);
  min-height: 42px;
}
.btn-primary {
  --bs-btn-color: var(--bb-accent-ink);
  --bs-btn-bg: var(--bb-accent);
  --bs-btn-border-color: var(--bb-accent);
  --bs-btn-hover-color: var(--bb-accent-ink);
  --bs-btn-hover-bg: var(--bb-accent-hover);
  --bs-btn-hover-border-color: var(--bb-accent-hover);
  --bs-btn-active-color: var(--bb-accent-ink);
  --bs-btn-active-bg: var(--bb-accent-hover);
  --bs-btn-active-border-color: var(--bb-accent-hover);
  --bs-btn-disabled-color: var(--bb-accent-ink);
  --bs-btn-disabled-bg: var(--bb-accent);
  --bs-btn-disabled-border-color: var(--bb-accent);
}
.btn-secondary {
  --bs-btn-color: var(--bb-heading);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bb-accent);
  --bs-btn-hover-color: var(--bb-heading);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bb-accent) 14%, transparent);
  --bs-btn-hover-border-color: var(--bb-accent-hover);
  --bs-btn-active-color: var(--bb-heading);
  --bs-btn-active-bg: color-mix(in srgb, var(--bb-accent) 22%, transparent);
  --bs-btn-active-border-color: var(--bb-accent-hover);
  --bs-btn-disabled-color: var(--bb-text-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bb-rule);
}
.bb-section--vellum .btn-secondary { --bs-btn-border-color: var(--bb-bronze-deep); }
.btn .bb-arrow { transition: transform var(--bb-dur-hover) var(--bb-ease-out); }

.bb-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding-block: 0.4em;
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  color: var(--bb-link);
  text-decoration: none;
}
.bb-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--bb-dur-ui) var(--bb-ease-out);
}
button.bb-link {
  padding-inline: 0;   /* no button padding, so it lines up with the links around it */
  border: 0;
  background: none;
  cursor: pointer;
}
.bb-link:hover { color: var(--bb-link-hover); }
.bb-link:hover::after,
.bb-link:focus-visible::after { transform: scaleX(1); }
.bb-link .bb-arrow { transition: transform var(--bb-dur-hover) var(--bb-ease-out); }

.bb-arrow {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}
/* The gap before an external arrow is a margin, not a space, so the
   underline stops at the end of the words. */
.bb-footer__list .bb-arrow {
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.38em;
  vertical-align: -0.05em;
  opacity: 0.7;
}

.bb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}


/* ---- 10. Cards --------------------------------------------------------------
   .bb-card is the base. The whole card is one link: put .stretched-link on
   the card's text link. */
.bb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--bb-surface);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-card);
  overflow: hidden;
  transition: transform var(--bb-dur-hover) var(--bb-ease-out), box-shadow var(--bb-dur-hover), border-color var(--bb-dur-hover);
}
.bb-card:hover,
.bb-card:focus-within {
  border-color: color-mix(in srgb, var(--bb-accent) 40%, var(--bb-rule));
  box-shadow: 0 24px 48px -32px var(--bb-bog-oak);
}
.bb-card__media {
  position: relative;
  aspect-ratio: var(--bb-media-ratio, 3 / 2);
  overflow: hidden;
  background-color: var(--bb-bog-oak);
}
.bb-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms var(--bb-ease-out);
}
.bb-card__media--wide { --bb-media-ratio: 1600 / 732; border-radius: var(--bb-radius-card); }   /* the Peak drawing's own shape */
.bb-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m) var(--space-m) var(--space-l);
}
.bb-card__body > * { margin: 0; }
.bb-card__title {
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: var(--bb-tracking-display);
}
.bb-card__title--sm { font-size: var(--step-2); }
.bb-card__text { color: var(--bb-text-muted); }
.bb-card__action { margin-top: auto; padding-top: var(--space-xs); }
@supports selector(:has(*)) {
  .bb-card .stretched-link:focus-visible { outline: none; }
  .bb-card:has(.stretched-link:focus-visible) {
    outline: 2px solid var(--bb-focus);
    outline-offset: 3px;
  }
}

/* The four crafts: 2 x 2 from tablet up; the first row (Websites,
   Engraving) gets taller pictures. */
.bb-crafts {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
.bb-crafts > * { --bb-media-ratio: 16 / 10; }
@media (min-width: 768px) {
  .bb-crafts { grid-template-columns: repeat(2, 1fr); }
  .bb-crafts > :nth-child(-n + 2) { --bb-media-ratio: 4 / 3; }
}

.bb-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-text-muted);
}
.bb-facts li { display: inline-flex; gap: 0.4em; }
.bb-facts dt, .bb-facts .bb-facts__label { font-weight: var(--bb-weight-ui); color: var(--bb-heading); }


/* ---- 11. Browser frame ------------------------------------------------------
   A thin window bar around a site screenshot. The bar is decorative
   (aria-hidden); the screenshot's alt text says what it shows. */
.bb-browser {
  margin: 0;
  overflow: hidden;
  background-color: var(--bb-bog-oak);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-card);
  box-shadow: 0 32px 64px -44px var(--bb-bog-oak);
}
.bb-browser__bar {
  display: grid;
  grid-template-columns: 3.5rem 1fr 3.5rem;
  align-items: center;
  height: 2.125rem;
  padding: 0 0.75rem;
  background-color: var(--bb-surface);
  border-bottom: 1px solid var(--bb-rule);
}
.bb-browser__dots { display: flex; gap: 6px; }
.bb-browser__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bb-field-line);
  opacity: 0.6;
}
.bb-browser__url {
  justify-self: center;
  overflow: hidden;
  max-width: 100%;
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--bb-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bb-browser__shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
.bb-card .bb-browser {
  border: 0;
  border-bottom: 1px solid var(--bb-rule);
  border-radius: 0;
  box-shadow: none;
}


/* ---- 12. Gallery and filters ------------------------------------------------ */
.bb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space-l);
}
.bb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid var(--bb-field-line);
  border-radius: var(--bb-radius-control);
  color: var(--bb-text);
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--bb-dur-hover), background-color var(--bb-dur-hover), border-color var(--bb-dur-hover);
}
.no-js [data-filter-for] { display: none; }   /* filters need JavaScript; without it every piece shows */
.bb-chip:hover { border-color: var(--bb-accent); }
.bb-chip[aria-pressed="true"] {
  background-color: var(--bb-accent);
  border-color: var(--bb-accent);
  color: var(--bb-accent-ink);
}
/* A small diamond marks the pressed chip, so the state isn't color alone. */
.bb-chip[aria-pressed="true"]::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  background-color: currentColor;
  transform: rotate(45deg);
}
.bb-chip__count {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.bb-chip[aria-pressed="true"] .bb-chip__count { opacity: 1; }   /* faded, it's too faint on bronze (4.1:1); full, 6.3:1 */

.bb-gallery {
  display: grid;
  gap: var(--space-m) var(--space-s);
  grid-template-columns: repeat(2, 1fr);    /* two across on phones */
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 576px) {
  .bb-gallery {
    gap: var(--space-l) var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  }
}
.bb-gallery__item[hidden] { display: none; }
.bb-gallery__link {
  --bb-corner-size: 1.5rem;
  --bb-corner-inset: 0.6rem;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bb-radius-card);
  background-color: var(--bb-bog-oak);
}
.bb-gallery__link img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 450ms var(--bb-ease-out);
}
.bb-gallery__caption {
  padding-top: 0.75rem;
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--bb-text-muted);
}
.bb-gallery__title {
  display: block;
  font-family: var(--bb-font-text);
  font-size: 1.0625rem;
  color: var(--bb-text);
}

/* GLightbox, restyled to match. */
.glightbox-container .goverlay { background-color: color-mix(in srgb, var(--bb-bog-oak) 96%, transparent); }
.glightbox-clean .gslide-description { background-color: var(--bb-bog-oak); }
.glightbox-clean .gdesc-inner { padding: 1rem 1.25rem 1.25rem; }
.glightbox-clean .gslide-title {
  margin-bottom: 0.25rem;
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-1);
  color: var(--bb-bone);
}
.glightbox-clean .gslide-desc {
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--bb-lichen);
}
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: color-mix(in srgb, var(--bb-forest-raised) 88%, transparent);
  border-radius: var(--bb-radius-control);
}
.glightbox-clean .gclose path,
.glightbox-clean .gnext path,
.glightbox-clean .gprev path { fill: var(--bb-bone); }
.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover { background-color: var(--bb-moss); }
.glightbox-clean button:focus-visible {
  outline: 2px solid var(--bb-bronze);
  outline-offset: 2px;
}


/* ---- 13. Pull quote / testimonial frame ------------------------------------ */
.bb-quote {
  --bb-corner-size: 2.25rem;
  --bb-corner-inset: 1rem;
  position: relative;
  max-width: 54rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-card);
  text-align: center;
}
.bb-quote blockquote { margin: 0 0 var(--space-m); }
.bb-quote blockquote p {
  margin: 0;
  font-family: var(--bb-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.18;
  letter-spacing: var(--bb-tracking-display);
  color: var(--bb-heading);
  text-wrap: balance;
  hanging-punctuation: first last;
}
.bb-quote figcaption {
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  color: var(--bb-text-muted);
}
.bb-glyph {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  color: var(--bb-ornament);
  vertical-align: middle;
}
.bb-quote .bb-glyph {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto var(--space-m);
}


/* ---- 14. Proof strip ----------------------------------------------------------
   A short row of true facts, separated by small knots. */
.bb-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding: var(--space-m) 0;
  list-style: none;
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--bb-text-muted);
  border-block: 1px solid var(--bb-rule);
}
.bb-proof li {
  display: inline-flex;
  align-items: center;
}
.bb-proof li + li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 1.25rem;
  background-color: var(--bb-ornament);
  -webkit-mask: url("../img/brand/knot-glyph.svg") center / contain no-repeat;
          mask: url("../img/brand/knot-glyph.svg") center / contain no-repeat;
}
.bb-proof strong {
  font-weight: var(--bb-weight-ui);
  color: var(--bb-heading);
}


/* ---- 15. Timeline -------------------------------------------------------------- */
.bb-timeline {
  --bb-year-col: 5rem;
  position: relative;
  max-width: 48rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-timeline::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: calc(var(--bb-year-col) + 1.25rem);
  width: 1px;
  background-color: var(--bb-rule);
}
.bb-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--bb-year-col) 1fr;
  column-gap: 2.5rem;
  padding-block: var(--space-s);
}
.bb-timeline__item::before {
  content: "";
  position: absolute;
  top: calc(var(--space-s) + 0.7rem);
  left: calc(var(--bb-year-col) + 1.25rem - 4px);
  width: 9px;
  height: 9px;
  background-color: var(--bb-bg);
  border: 1px solid var(--bb-accent);
  transform: rotate(45deg);
}
.bb-timeline__year {
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1;
  text-align: right;
  color: var(--bb-voice);
  font-variant-numeric: tabular-nums lining-nums;
}
.bb-timeline__body > :last-child { margin-bottom: 0; }
.bb-timeline__title {
  margin-bottom: 0.25rem;
  font-family: var(--bb-font-text);
  font-weight: 600;
  font-size: var(--step-1);
}
.bb-timeline__body p { color: var(--bb-text-muted); }


/* ---- 16. FAQ accordion (Bootstrap's accordion, restyled) --------------------- */
.bb-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--bb-text);
  --bs-accordion-border-color: var(--bb-rule);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-color: var(--bb-heading);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--bb-heading);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 1.25rem;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  max-width: 52rem;
  border-top: 1px solid var(--bb-rule);
}
.bb-accordion .accordion-item {
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--bb-rule);
}
.bb-accordion .accordion-button {
  gap: 1.5rem;
  font-family: var(--bb-font-text);
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.35;
}
.bb-accordion .accordion-button:focus-visible {
  outline: 2px solid var(--bb-focus);
  outline-offset: 2px;
}
/* A plus that turns into a minus. */
.bb-accordion .accordion-button::after {
  width: 14px;
  height: 14px;
  background-image:
    linear-gradient(var(--bb-accent), var(--bb-accent)),
    linear-gradient(var(--bb-accent), var(--bb-accent));
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 100% 1.5px, 1.5px 100%;
  transform: none;
  transition: background-size var(--bb-dur-ui) var(--bb-ease-out);
}
.bb-accordion .accordion-button:not(.collapsed)::after {
  background-size: 100% 1.5px, 1.5px 0;
  transform: none;
}
.bb-accordion .accordion-body {
  max-width: var(--bb-measure);
  padding-bottom: 1.5rem;
  color: var(--bb-text-muted);
}
.bb-accordion .accordion-body > :last-child { margin-bottom: 0; }
/* Without JavaScript the questions can't open, so every answer shows and
   the plus signs (and the pointer) go. */
.no-js .bb-accordion .accordion-collapse.collapse { display: block; }
.no-js .bb-accordion .accordion-button { pointer-events: none; }
.no-js .bb-accordion .accordion-button::after { display: none; }


/* ---- 17. Status pills (the only rounded shape on the site) ------------------ */
.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3rem 0.8rem;
  border: 1px solid currentColor;
  border-radius: var(--bb-radius-pill);
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The dot differs by status too (full, half, empty), not only its color. */
.bb-pill::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: currentColor;
}
.bb-pill--live { color: var(--bb-success); }
.bb-pill--beta { color: var(--bb-voice); }
.bb-pill--beta::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.bb-pill--dev { color: var(--bb-text-muted); }
.bb-pill--dev::before { background: transparent; }


/* ---- 18. Forms and choice cards ----------------------------------------------- */
.form-label,
.bb-label {
  margin-bottom: 0.4rem;
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--bb-heading);
}
.bb-optional {
  font-weight: 400;
  color: var(--bb-text-muted);
}
.form-text {
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-text-muted);
}
.form-control,
.form-select {
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font-family: var(--bb-font-text);
  font-size: var(--step-0);
  color: var(--bb-text);
  background-color: var(--bb-field-bg);
  border: 1px solid var(--bb-field-line);
  border-radius: var(--bb-radius-control);
}
.form-control::placeholder { color: var(--bb-text-muted); }
.form-control:focus,
.form-select:focus {
  color: var(--bb-text);
  background-color: var(--bb-field-bg);
  border-color: var(--bb-accent);
  box-shadow: none;
  outline: 2px solid var(--bb-focus);
  outline-offset: 2px;
}
textarea.form-control { min-height: 9rem; }
/* Select arrow in lichen (dark) or ink-soft (vellum). Colors are written
   out because an image can't read CSS variables. */
.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A9B8AF' stroke-linecap='square' stroke-width='1.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.bb-section--vellum .form-select,
.bb-on-vellum .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234D5C53' stroke-linecap='square' stroke-width='1.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option { background-color: var(--bb-field-bg); color: var(--bb-text); }

/* Errors: the border changes AND a written message appears, linked to the
   field with aria-describedby. Bootstrap's warning icon is removed. */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--bb-error);
  background-image: none;
  padding-right: 0.9rem;
}
.form-control.is-invalid:focus { border-color: var(--bb-error); box-shadow: none; }
.invalid-feedback {
  margin-top: 0.4rem;
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-error);
}

.form-check { min-height: 1.75rem; padding-left: 2em; }
.form-check-input {
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.2em;
  margin-left: -2em;
  background-color: var(--bb-field-bg);
  border: 1px solid var(--bb-field-line);
}
.form-check-input[type="checkbox"] { border-radius: var(--bb-radius-control); }
.form-check-input:focus {
  border-color: var(--bb-accent);
  box-shadow: none;
  outline: 2px solid var(--bb-focus);
  outline-offset: 2px;
}
.form-check-input:checked {
  background-color: var(--bb-accent);
  border-color: var(--bb-accent);
}
/* Tick and dot in forest (#14221A), drawn as images. */
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2314221A' stroke-linecap='square' stroke-width='2.5' d='m5 10 3.5 3.5L15 7'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2314221A'/%3e%3c/svg%3e");
}
.form-check-label { cursor: pointer; }

.bb-fieldset {
  min-width: 0;
  margin: 0 0 var(--space-l);
  padding: 0;
  border: 0;
}
.bb-legend {
  float: none;
  width: auto;
  margin-bottom: var(--space-s);
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--bb-heading);
}

/* Large radio cards: "What can I help with?" */
.bb-choices {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 576px) { .bb-choices { grid-template-columns: repeat(2, 1fr); } }
.bb-choice {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}
.bb-choice__input {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.bb-choice__card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.2rem 1rem;
  height: 100%;
  padding: 1.1rem 2.5rem 1.1rem 1.25rem;
  background-color: var(--bb-field-bg);
  border: 1px solid var(--bb-field-line);
  border-radius: var(--bb-radius-card);
  transition: border-color var(--bb-dur-hover), background-color var(--bb-dur-hover), box-shadow var(--bb-dur-hover);
}
.bb-choice__icon {
  grid-row: span 2;
  font-size: 1.5rem;
  line-height: 1.2;
}
.bb-choice__title {
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.15;
  color: var(--bb-heading);
}
.bb-choice__hint {
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--bb-text-muted);
}
.bb-choice:hover .bb-choice__card { border-color: var(--bb-accent); }
.bb-choice__input:checked + .bb-choice__card {
  border-color: var(--bb-accent);
  background-color: color-mix(in srgb, var(--bb-accent) 9%, var(--bb-field-bg));
  box-shadow: inset 0 0 0 1px var(--bb-accent);
}
/* The chosen card gets a diamond, so the choice isn't shown by color alone. */
.bb-choice__input:checked + .bb-choice__card::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--bb-accent);
  transform: rotate(45deg);
}
.bb-choice__input:focus-visible + .bb-choice__card {
  outline: 2px solid var(--bb-focus);
  outline-offset: 3px;
}


/* Contact page */
.bb-hp {                         /* the honeypot: off-screen for people, tempting to bots */
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.bb-legend--sm {
  font-size: var(--step-1);
  margin-bottom: var(--space-xs);
}
.bb-topic-fields {
  padding: var(--space-m);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-card);
}
.bb-topic-fields[hidden] { display: none; }
.bb-contact-aside {
  position: sticky;
  top: calc(var(--bb-header-h-condensed) + var(--space-m));
  padding: var(--space-l);
  background-color: var(--bb-surface);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-card);
}
.bb-contact-aside__email {
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.bb-contact-aside__email a {
  color: var(--bb-heading);
  text-decoration-color: color-mix(in srgb, var(--bb-accent) 60%, transparent);
  user-select: all;
}
.bb-alert__list {
  grid-column: 2;
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}
.bb-alert__list a { color: var(--bb-text); }

/* ---- 19. Alerts ------------------------------------------------------------- */
.bb-alert {
  --fa-primary-color: var(--bb-alert-color, var(--bb-voice));
  --fa-secondary-color: var(--bb-alert-color, var(--bb-voice));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  margin-bottom: var(--space-m);
  padding: 1rem 1.25rem;
  background-color: var(--bb-surface);
  border: 1px solid var(--bb-rule);
  border-left: 3px solid var(--bb-alert-color, var(--bb-voice));
  border-radius: var(--bb-radius-card);
  color: var(--bb-text);
}
.bb-alert__icon {
  grid-row: span 2;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--bb-alert-color, var(--bb-voice));
}
.bb-alert__title {
  margin: 0;
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--bb-heading);
}
.bb-alert p { margin: 0; }
.bb-alert--success { --bb-alert-color: var(--bb-success); }
.bb-alert--error   { --bb-alert-color: var(--bb-error); }
.bb-alert--info    { --bb-alert-color: var(--bb-voice); }


/* ---- 20. Footer ---------------------------------------------------------------- */
.bb-footer {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-2xl) var(--space-l);
  background-color: var(--bb-bg);
  color: var(--bb-text-muted);
  border-top: 1px solid var(--bb-rule);
}
.bb-footer__grid {
  display: grid;
  gap: var(--space-xl) var(--space-l);
  grid-template-columns: 1fr;
}
@media (min-width: 576px) {
  .bb-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .bb-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .bb-footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .bb-footer__brand { grid-column: auto; }
}
.bb-brand--footer {
  margin: 0 0 var(--space-m);
}
.bb-brand--footer .bb-knot { height: 3rem; }
.bb-brand--footer .bb-wordmark { height: 1.45rem; }
.bb-footer__about { max-width: 32ch; }
.bb-footer__heading {
  margin-bottom: var(--space-s);
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  color: var(--bb-heading);
}
.bb-footer__list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-footer__list a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--bb-text);
  text-decoration: none;
}
.bb-footer__list a:hover {
  color: var(--bb-link);
  text-decoration: underline;
}
.bb-footer__email {
  display: inline-block;
  margin-top: var(--space-xs);
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-1);
  color: var(--bb-heading);
  text-decoration: none;
}
.bb-footer__email:hover { color: var(--bb-link); }
.bb-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: var(--space-s) 0 0 -0.6rem;
  padding: 0;
  list-style: none;
}
.bb-social a {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  color: var(--bb-lichen);
  text-decoration: none;
  border-radius: var(--bb-radius-control);
}
.bb-social a:hover { color: var(--bb-verdigris-light); }
.bb-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-l);
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--bb-rule);
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
}
.bb-footer__base p { margin: 0; }

/* The Pikes Peak footer (Amendment 1): the illustration across the top at
   its own shape (45.75% of the width), never shorter than 220px, with the
   footer's content on bog oak below. content-visibility lets the browser
   skip drawing it all until it's nearly on screen. */
.bb-footer--peak {
  padding-top: 0;
  border-top: 0;
}
.bb-footer__peak {
  margin: 0 0 var(--space-xl);
  content-visibility: auto;
  contain-intrinsic-size: auto 660px;
}
.bb-footer__stage {
  height: max(220px, 45.75vw);
  overflow: hidden;
}
.bb-footer .pp { --pp-ground: var(--bb-bog-oak); }
.bb-footer__sky {
  margin: var(--space-2xs) auto 0;
  padding-inline: var(--bb-gutter);
  font-family: var(--bb-font-ui);
  font-variant-caps: all-small-caps;
  font-size: var(--step-0);
  letter-spacing: 0.08em;
  color: var(--bb-lichen);
  text-align: center;
  text-wrap: balance;   /* on two lines, the lines are even: no word left on its own */
}
.bb-footer__sky time { font-size: 0.82em; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* "1:00 am" stays together */
.bb-footer__body {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}


/* ---- 21. Back to top --------------------------------------------------------------
   A plain link to #top. With JavaScript it only appears once you've
   scrolled down, and it scrolls smoothly. */
.bb-to-top {
  position: fixed;
  right: var(--space-m);
  bottom: var(--space-m);
  z-index: 1020;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background-color: var(--bb-forest-raised);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-control);
  color: var(--bb-accent);
  text-decoration: none;
  transition: opacity var(--bb-dur-ui), visibility var(--bb-dur-ui), transform var(--bb-dur-ui), border-color var(--bb-dur-hover);
}
.bb-to-top:hover {
  border-color: var(--bb-accent);
  color: var(--bb-accent-hover);
}
.bb-to-top svg { width: 16px; height: 16px; }
.js .bb-to-top:not(.is-visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}


/* ---- 22. The monogram and its draw-on -------------------------------------------
   Inline with inc/partials/monogram.php. Its color is the CSS "color". */
.bb-knot {
  display: block;
  width: auto;
  height: 100%;
  overflow: visible;
  color: var(--bb-accent);
}
.bb-knot__draw { opacity: 0; }

/* Hero: the knot on a faint "lantern" glow, with a small caption. */
.bb-hero-mark {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  margin: 0;
}
.bb-hero-mark__stage {
  position: relative;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 1;
}
.bb-hero-mark__stage::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--bb-verdigris) 24%, transparent),
    color-mix(in srgb, var(--bb-verdigris) 7%, transparent) 58%,
    transparent 100%);
}
/* The rune ring behind the knot (Amendment 1.2): the Elder Futhark round
   a double band, Berkano in bronze at the top, right above the knot.
   Made by tools/build-rune-ring.mjs (inc/partials/rune-ring.php). */
.bb-runering {
  position: absolute;
  inset: -10%;                 /* big enough that the knot stands inside the inner band */
  z-index: -1;
  width: 120%;
  max-width: none;             /* (svg has max-width: 100% site-wide) */
  height: 120%;
  overflow: visible;
  color: var(--bb-verdigris);
}
.bb-runering__bands,
.bb-runering .rr { stroke-opacity: 0.32; }
.bb-runering .rr--berkano {
  stroke: var(--bb-bronze);
  stroke-opacity: 0.85;
}
.bb-hero-mark:has(.bb-runering) .bb-hero-mark__caption { margin-top: 1.5rem; }   /* clear of the ring */

/* Positioned so the knot can't stretch its square stage. */
.bb-hero-mark .bb-knot {
  position: absolute;
  top: 11%;
  left: 50%;
  height: 78%;
  transform: translateX(-50%);
}
.bb-hero-mark__caption {
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--bb-text-muted);
  text-align: center;
}
.bb-rune {
  font-family: var(--bb-font-ui);
  color: var(--bb-accent-text);
}


/* ---- 22b. Page layouts: hero, splits, full-bleed, principles, routes -------------- */

/* Hero: sized to its content (about 80% of the screen at most), never full height. */
.bb-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(80vh, 760px);
  padding-block: var(--space-2xl) var(--space-l);
}
.bb-hero__row { flex: 1; align-items: center; }
.bb-hero .bb-lead { max-width: 36ch; margin-bottom: var(--space-l); }
.bb-hero .bb-proof { margin-top: var(--space-2xl); }
@media (max-width: 991.98px) {
  .bb-hero .bb-hero-mark__stage { max-width: 17rem; margin-inline: auto; }
}

/* Two columns: a picture and its words. Add --reverse to swap sides. */
.bb-split {
  display: grid;
  gap: var(--space-l) clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
@media (min-width: 992px) {
  .bb-split { grid-template-columns: 7fr 5fr; }
  .bb-split--even { grid-template-columns: 1fr 1fr; }
  .bb-split--reverse > :first-child { order: 2; }
}
.bb-split__body > :last-child { margin-bottom: 0; }
.bb-split--top { align-items: start; }

/* Label and value pairs: client type, since, what I did. */
.bb-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
  margin: var(--space-m) 0;
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
}
.bb-dl dt {
  font-weight: var(--bb-weight-ui);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  color: var(--bb-text-muted);
}
.bb-dl dd { margin: 0; color: var(--bb-text); }

/* A photograph that runs edge to edge of the screen. */
.bb-bleed {
  margin: 0 calc(50% - 50vw);
}
.bb-bleed img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 768px) { .bb-bleed img { aspect-ratio: 16 / 9; max-height: 85vh; } }
.bb-bleed figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-l);
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-s) var(--bb-gutter) 0;
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-text-muted);
}
.bb-bleed__title {
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-1);
  color: var(--bb-heading);
}

/* Principles: four short, true statements. */
.bb-principles {
  display: grid;
  gap: var(--space-xl) var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .bb-principles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .bb-principles { grid-template-columns: repeat(4, 1fr); } }
.bb-principles li {
  padding-top: var(--space-m);
  border-top: 1px solid var(--bb-rule);
}
.bb-principles li::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1px;
  margin: calc(var(--space-m) * -1 - 1px) 0 var(--space-m);
  background-color: var(--bb-accent);
}
@media (min-width: 1200px) { .bb-principles--3 { grid-template-columns: repeat(3, 1fr); } }
.bb-principles h3 {
  margin-bottom: var(--space-xs);
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.15;
}
.bb-principles p { margin: 0; color: var(--bb-text-muted); }

/* Closing call to action: two routes. */
.bb-routes {
  display: grid;
  gap: var(--space-m);
  max-width: 60rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .bb-routes { grid-template-columns: 1fr 1fr; } }
.bb-route {
  --bb-corner-size: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l);
  background-color: var(--bb-surface);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-card);
}
.bb-route h3 {
  margin: 0;
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-2);
}
.bb-route p { margin: 0; color: var(--bb-text-muted); }
.bb-route .btn { align-self: flex-start; margin-top: auto; }
.bb-route .bb-route__action { margin-top: var(--space-s); }

/* The "lost the thread" page */
.bb-lost {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  min-height: min(70vh, 640px);
  align-content: center;
  text-align: center;
}
.bb-lost__knot {
  width: min(60vw, 18rem);
  height: auto;
  color: var(--bb-ornament);
}
.bb-lost .bb-lead { margin-inline: auto; }
.bb-lost__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs) var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ---- 22c. Web section: audiences, services, process, client grid, case study ------- */

/* Page hero for inner pages (smaller than the home hero). */
.bb-page-hero {
  padding-block: var(--space-2xl) var(--space-xl);
}
/* 20 characters of Freight Big, written in em rather than ch so the box
   is the same width before and after the font arrives. */
.bb-page-hero h1 { max-width: 10.28em; }
.bb-page-hero .bb-lead { max-width: 44ch; margin-bottom: var(--space-l); }

/* Who it's for: icon + short line, in a row. */
.bb-audiences {
  display: grid;
  gap: var(--space-l) var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 576px) { .bb-audiences { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .bb-audiences { grid-template-columns: repeat(4, 1fr); } }
.bb-audiences li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 0.25rem 1rem;
  align-items: start;
}
.bb-audiences .bb-icon {
  grid-row: span 2;
  font-size: 1.75rem;
  line-height: 1.1;
}
.bb-audiences h3 {
  margin: 0;
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.1;
}
.bb-audiences p { margin: 0; color: var(--bb-text-muted); }

/* Service cards: icon, title, one or two sentences. */
.bb-services {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 768px) { .bb-services { grid-template-columns: repeat(2, 1fr); } }
.bb-service {
  position: relative;
  padding: var(--space-l);
  background-color: var(--bb-surface);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-card);
}
.bb-service .bb-icon {
  display: block;
  margin-bottom: var(--space-s);
  font-size: 2rem;
}
.bb-service h3 {
  margin-bottom: var(--space-xs);
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.05;
}
.bb-service p { margin: 0; color: var(--bb-text-muted); }

/* Process: a real sequence, so a numbered list. */
.bb-steps {
  display: grid;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bb-step;
}
@media (min-width: 768px) { .bb-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .bb-steps { grid-template-columns: repeat(5, 1fr); gap: var(--space-m); } }
.bb-steps li {
  counter-increment: bb-step;
  padding-top: var(--space-m);
  border-top: 1px solid var(--bb-rule);
}
.bb-steps li::before {
  content: counter(bb-step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--bb-voice);
  font-variant-numeric: tabular-nums lining-nums;
}
.bb-steps h3 {
  margin-bottom: 0.35rem;
  font-family: var(--bb-font-text);
  font-weight: 600;
  font-size: var(--step-1);
}
.bb-steps p { margin: 0; color: var(--bb-text-muted); }

/* Case-study cards (Selected work) */
.bb-work {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 992px) { .bb-work { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) and (max-width: 991.98px) { .bb-work { grid-template-columns: repeat(2, 1fr); } }

/* KeeperSuite apps: two by two from tablet up. */
.bb-apps {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 768px) { .bb-apps { grid-template-columns: repeat(2, 1fr); } }

/* Sites I build and look after: small framed screenshots with live links. */
.bb-clients {
  display: grid;
  gap: var(--space-l) var(--space-m);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 576px) { .bb-clients { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .bb-clients { grid-template-columns: repeat(3, 1fr); } }
.bb-client {
  display: block;
  color: var(--bb-text);
  text-decoration: none;
}
.bb-client .bb-browser { transition: border-color var(--bb-dur-hover), transform var(--bb-dur-hover) var(--bb-ease-out); }
.bb-client:hover { color: var(--bb-heading); }
.bb-client:hover .bb-browser { border-color: color-mix(in srgb, var(--bb-accent) 45%, var(--bb-rule)); }
.bb-client__name {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin-top: 0.75rem;
  font-family: var(--bb-font-text);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.bb-client__meta {
  display: block;
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-text-muted);
}

/* A short full-width band with one call to action. */
.bb-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-xl);
}
.bb-band h2 { margin: 0; max-width: 22ch; }
.bb-band p { margin: 0.5rem 0 0; color: var(--bb-text-muted); max-width: 46ch; }

/* Breadcrumb */
.bb-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin: 0 0 var(--space-l);
  padding: 0;
  list-style: none;
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-text-muted);
}
.bb-crumbs li + li::before {
  content: "/";
  margin-right: 0.6rem;
  opacity: 0.6;
}
.bb-crumbs a { color: var(--bb-link); }

/* Case study: a vellum reading layout. */
.bb-study__head { max-width: 50rem; }
.bb-study__head h1 { margin-bottom: var(--space-s); }
.bb-study__meta {
  display: grid;
  gap: var(--space-s) var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin: var(--space-l) 0 0;
  padding: var(--space-m) 0;
  border-block: 1px solid var(--bb-rule);
}
.bb-study__meta div { min-width: 0; }
.bb-study__meta dt {
  margin-bottom: 0.2rem;
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  color: var(--bb-text-muted);
}
.bb-study__meta dd {
  margin: 0;
  font-family: var(--bb-font-text);
  line-height: 1.4;
}
.bb-study__meta dd a .bb-arrow { margin-left: 0.23em; }   /* a space's width, as a margin, so the underline stops at the address */
.bb-study__shot { margin-block: var(--space-xl); }
.bb-study__body {
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
}
@media (min-width: 992px) { .bb-study__body { grid-template-columns: minmax(0, 1fr) 20rem; } }
.bb-study__body h2 {
  font-size: var(--step-3);
  margin-top: 0;
}
.bb-study__body section + section { margin-top: var(--space-xl); }
.bb-study__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-study__list li {
  position: relative;
  padding: 0 0 var(--space-s) 1.75rem;
  max-width: var(--bb-measure);
}
.bb-study__list li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0.2rem;
  width: 0.45em;
  height: 0.45em;
  border: 1px solid var(--bb-accent-text);
  transform: rotate(45deg);
}
.bb-tech {
  align-self: start;
  padding: var(--space-m);
  background-color: var(--bb-surface);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-card);
}
.bb-tech h2 {
  margin-bottom: var(--space-s);
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  color: var(--bb-text-muted);
}
.bb-tech dl { margin: 0; }
.bb-tech dt {
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  color: var(--bb-heading);
}
.bb-tech dd {
  margin: 0 0 var(--space-s);
  font-family: var(--bb-font-code);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bb-text);
}
.bb-tech dd:last-child { margin-bottom: 0; }

/* Next / previous case study */
.bb-pager {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--bb-rule);
}
@media (min-width: 768px) { .bb-pager { grid-template-columns: 1fr 1fr; } }
.bb-pager a {
  display: block;
  color: var(--bb-heading);
  text-decoration: none;
}
.bb-pager a:hover .bb-pager__title { color: var(--bb-link); }
.bb-pager__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  color: var(--bb-text-muted);
}
.bb-pager__title {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.15;
  transition: color var(--bb-dur-hover);
}
.bb-pager__next { text-align: right; }
.bb-pager__next .bb-pager__label { justify-content: flex-end; }
.bb-arrow--back { transform: rotate(180deg); }


/* ---- 22d. Engraving and photography ----------------------------------------------- */

/* A tall photograph beside an inner-page hero. Its width is set here, not
   left to the picture, so its room is kept before the picture arrives
   (in the Celtic edition it can load late) and nothing moves when it does. */
.bb-hero-photo {
  --bb-corner-size: 1.75rem;
  width: 100%;
  margin: 0;
}
.bb-hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--bb-radius-card);
}
.bb-hero-photo figcaption {
  margin-top: var(--space-s);
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-text-muted);
}
@media (max-width: 991.98px) {
  .bb-hero-photo { max-width: 26rem; }
}
@media (min-width: 992px) {
  .bb-hero-photo { max-width: 480px; }   /* beside the text: as wide as its column, up to 480px */
}

/* Three service cards in a row from 992px. */
@media (min-width: 992px) {
  .bb-services--3 { grid-template-columns: repeat(3, 1fr); }
}
/* Four steps in a row from 1200px. */
@media (min-width: 1200px) {
  .bb-steps--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-l); }
}

/* Photography wall (CSS columns keep each photo's own shape). */
.bb-wall {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 1;
  column-gap: var(--space-m);
}
@media (min-width: 576px) { .bb-wall { columns: 2; } }
@media (min-width: 1200px) { .bb-wall { columns: 3; } }
.bb-wall > li {
  break-inside: avoid;
  margin-bottom: var(--space-m);
}
.bb-wall a {
  --bb-corner-size: 1.4rem;
  --bb-corner-inset: 0.6rem;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bb-radius-card);
  background-color: var(--bb-bog-oak);
}
.bb-wall img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 450ms var(--bb-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .bb-wall a:hover img,
  .bb-wall a:focus-visible img { transform: scale(1.03); }
}


/* ---- 22e. Pikes Peak: the living illustration ------------------------------------
   the layered Peak illustration (assets/img/brand/pikes-peak.svg), inlined by
   bb_peak(). Its colors are the --pp-* variables below; data-phase on the
   <svg> picks a palette to match the real sky over Colorado Springs
   (worked out in PHP, then kept current by site.js). The night palette is
   the drawing's own. */
.pp {
  display: block;
  width: 100%;
  height: 100%;
  --pp-sky-top: #060D0A;  --pp-sky-mid: #0C1712;  --pp-sky-low: #1B2E24;
  --pp-rock-0: #0F1B15;   --pp-rock-1: #1A2C23;   --pp-rock-2: #284335;
  --pp-snow: #7E958B;     --pp-crest: rgba(125, 187, 163, 0.3);
  --pp-hill-1: #14231B;   --pp-hill-2: #101D17;   --pp-fore: #0C1712;
  --pp-ground: #0C1712;   --pp-hatch: rgba(0, 0, 0, 0.28);
  --pp-stars: 1;          --pp-beacon: 0.85;
}
.pp[data-phase="dawn"], .pp[data-phase="dusk"] {
  --pp-sky-top: #0B1A1F;  --pp-sky-mid: #1A2F33;  --pp-sky-low: #3A4E48;
  --pp-rock-0: #122019;   --pp-rock-1: #1D3128;   --pp-rock-2: #2D4A3C;
  --pp-snow: #8FA59B;     --pp-crest: rgba(160, 196, 180, 0.35);
  --pp-stars: 0.55;       --pp-beacon: 0.55;
}
.pp[data-phase="firstlight"] {           /* sunrise behind you lights the Peak's face */
  --pp-sky-top: #1A2E36;  --pp-sky-mid: #3D5657;  --pp-sky-low: #93A99E;
  --pp-rock-0: #1A2A21;   --pp-rock-1: #2C3E31;   --pp-rock-2: #4A5A45;
  --pp-snow: #DDB29A;     --pp-crest: rgba(236, 196, 160, 0.55);
  --pp-hill-1: #17271D;   --pp-hill-2: #122018;
  --pp-stars: 0.2;        --pp-beacon: 0;
}
.pp[data-phase="alpenglow"] {            /* the sun sets behind the Peak */
  --pp-sky-top: #15252A;  --pp-sky-mid: #4B4540;  --pp-sky-low: #B8844F;
  --pp-rock-0: #111D17;   --pp-rock-1: #1C2E24;   --pp-rock-2: #2C4436;
  --pp-snow: #B59A82;     --pp-crest: rgba(221, 178, 122, 0.5);
  --pp-stars: 0.2;        --pp-beacon: 0.25;
}
.pp[data-phase="morning"], .pp[data-phase="evening"] {
  --pp-sky-top: #2D4A52;  --pp-sky-mid: #6C8882;  --pp-sky-low: #D3C09A;
  --pp-rock-0: #22352A;   --pp-rock-1: #334A3B;   --pp-rock-2: #4D6553;
  --pp-snow: #D8CDB6;     --pp-crest: rgba(236, 231, 220, 0.35);
  --pp-hill-1: #1F3326;   --pp-hill-2: #1A2B21;   --pp-fore: #13211A;
  --pp-stars: 0;          --pp-beacon: 0;
}
.pp[data-phase="morning"] { --pp-snow: #E0CDB2; --pp-sky-low: #C9C8A8; }
.pp[data-phase="day"] {
  --pp-sky-top: #3E6970;  --pp-sky-mid: #7EA19E;  --pp-sky-low: #C3D2C7;
  --pp-rock-0: #2A3F31;   --pp-rock-1: #3F5847;   --pp-rock-2: #5E7766;
  --pp-snow: #E4E6DE;     --pp-crest: rgba(236, 231, 220, 0.4);
  --pp-hill-1: #25392C;   --pp-hill-2: #1E3025;   --pp-fore: #13211A;
  --pp-hatch: rgba(0, 0, 0, 0.18);
  --pp-stars: 0;          --pp-beacon: 0;
}
/* The drawing's colors, as classes (bb_peak() turns its inline styles into these). */
.pps-sky-top { stop-color: var(--pp-sky-top); }
.pps-sky-mid { stop-color: var(--pp-sky-mid); }
.pps-sky-low { stop-color: var(--pp-sky-low); }
.pps-ground  { stop-color: var(--pp-ground); }
.ppf-rock-0 { fill: var(--pp-rock-0); }
.ppf-rock-1 { fill: var(--pp-rock-1); }
.ppf-rock-2 { fill: var(--pp-rock-2); }
.ppf-snow   { fill: var(--pp-snow); }
.ppf-hill-1 { fill: var(--pp-hill-1); }
.ppf-hill-2 { fill: var(--pp-hill-2); }
.ppf-fore   { fill: var(--pp-fore); }
.ppk-hatch  { stroke: var(--pp-hatch); }
.ppk-crest  { stroke: var(--pp-crest); }
.pp .pp-stars  { opacity: var(--pp-stars); transition: opacity 2s; }
.pp .pp-beacon { opacity: var(--pp-beacon); }

/* A live Peak is a stack of layers, one <svg> each (see bb_peak()), so a
   layer can glide without the drawing being repainted. Every layer is
   24px wider than its frame (12px each side), so a sideways shift never
   shows an edge; the frame clips the extra. */
.pp--layers {
  position: relative;
  overflow: hidden;
}
.pp--layers > .pp-layer {
  position: absolute;
  top: 0;
  left: -12px;
  width: calc(100% + 24px);
  max-width: none;             /* (svg has max-width: 100% site-wide, which would cut the overhang) */
  height: 100%;
}
.pp--layers.is-moving > .pp-layer:not([data-depth="0"]) { will-change: transform; }

/* A shooting star (fx/peak.js adds one now and then, at night, in the footer). */
.pp-shoot {
  position: absolute;
  width: 90px;
  height: 1px;
  background-image: linear-gradient(to right, transparent, var(--bb-bone));
  opacity: 0;
  transform: rotate(24deg);
  transform-origin: right center;
  pointer-events: none;
}

/* Full-width band (About page): the drawing's own shape, at least 260px tall. */
.bb-peak {
  position: relative;
  margin: 0;
  background-color: var(--bb-bg);
}
/* Height set directly (45.75vw is the drawing's own shape at full width): an
   aspect-ratio plus a min-height would widen the band past the screen on phones. */
.bb-peak__stage {
  width: 100%;
  height: max(260px, 45.75vw);
  overflow: hidden;
}
.bb-peak .pp { --pp-ground: var(--bb-bg); }
.bb-peak figcaption {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-s) var(--bb-gutter) 0;
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--bb-text-muted);
  text-align: center;
  text-wrap: balance;   /* on two lines, the lines are even: no "Peak" left on its own */
}
.bb-peak time { font-variant-numeric: tabular-nums; white-space: nowrap; }   /* "1:00 am" stays together */

/* The old illuminated B, as heritage art on the About page. */
.bb-heritage {
  justify-self: center;
  max-width: 13rem;
  margin: 0;
  text-align: center;
}
.bb-heritage img { width: 10rem; height: auto; }
.bb-heritage figcaption {
  margin-top: var(--space-s);
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-text-muted);
}

/* Then and now: a range input wipes from the photo to the drawing. */
.bb-compare { margin: 0; }
.bb-compare__stage {
  --pos: 50%;
  position: relative;
  aspect-ratio: 1600 / 732;
  overflow: hidden;
  border-radius: var(--bb-radius-card);
  background-color: var(--bb-bog-oak);
}
/* The drawing was traced from this photo at 1600px wide, shifted up 170px.
   (-23% rather than the exact -23.22%, so the photo reaches the bottom edge.) */
.bb-compare__photo img {
  position: absolute;
  top: -23%;
  left: 0;
  width: 100%;
  height: auto;
}
.bb-compare__art {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.bb-compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background-color: var(--bb-bronze);
  pointer-events: none;
}
.bb-compare__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background-color: var(--bb-bronze);
  transform: rotate(45deg);
}
.bb-compare__control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-s);
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-text-muted);
}
.bb-compare__control input {
  width: 100%;
  accent-color: var(--bb-bronze);
  cursor: ew-resize;
}
.no-js .bb-compare__control { display: none; }
.bb-compare figcaption {
  margin-top: var(--space-xs);
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-text-muted);
}


/* ---- 22f. Colophon ------------------------------------------------------------------- */
.bb-colophon {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  margin: 0;
}
@media (min-width: 768px) {
  .bb-colophon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bb-colophon dt {
  margin-bottom: var(--space-2xs);
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--bb-heading);
}
.bb-colophon dd {
  margin: 0;
  max-width: var(--bb-measure);
}


/* ---- 23. Motion -------------------------------------------------------------------
   Everything that moves lives in here, so "reduce motion" turns it all off
   and the page simply shows its finished state. Content is visible by
   default; the hidden starting state needs the "js" class on <html>. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Sections fade in and rise 12px; children of [data-reveal-group]
     follow one another 60ms apart (site.js sets the delays). */
  .js .bb-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--bb-dur-reveal) var(--bb-ease-out), transform var(--bb-dur-reveal) var(--bb-ease-out);
  }
  .js .bb-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* Hovers: cards lift 2px, pictures grow to 1.03 at most. */
  .bb-card:hover,
  .bb-card:focus-within { transform: translateY(-2px); }
  .bb-card:hover .bb-card__media img,
  .bb-gallery__link:hover img,
  .bb-gallery__link:focus-visible img { transform: scale(1.03); }
  .btn:hover .bb-arrow,
  .bb-link:hover .bb-arrow { transform: translateX(3px); }

  /* The monogram draws itself as one unbroken line, then the crossings
     tighten into place. Only once per visit (site.js remembers). */
  .js:not(.bb-drawn) .bb-knot--draw .bb-knot__art {
    opacity: 0;
    animation: bb-knot-in 500ms var(--bb-ease-out) calc(var(--bb-dur-draw) + 150ms) forwards;
  }
  .js:not(.bb-drawn) .bb-knot--draw .bb-knot__draw {
    opacity: 1;
    animation: bb-knot-out 500ms linear calc(var(--bb-dur-draw) + 150ms) forwards;
  }
  .js:not(.bb-drawn) .bb-knot--draw .bb-knot__draw path {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: bb-knot-draw var(--bb-dur-draw) var(--bb-ease-draw) 150ms forwards;
  }

  /* Then the rune ring is carved in, one rune after another clockwise
     round the band, and comes back to Berkano at the top last. */
  .js:not(.bb-drawn) .bb-hero-mark__stage .bb-runering__bands {
    opacity: 0;
    animation: bb-knot-in 900ms var(--bb-ease-out) calc(var(--bb-dur-draw) * 0.6) forwards;
  }
  .js:not(.bb-drawn) .bb-hero-mark__stage .rr {
    opacity: 0;
    animation: bb-rr-in 360ms var(--bb-ease-out) forwards;
    animation-delay: calc(var(--bb-dur-draw) + 250ms + var(--rr, 0) * 55ms);
  }
  .js:not(.bb-drawn) .bb-hero-mark__stage .rr--berkano { animation-name: bb-rr-berkano; animation-duration: 900ms; }
  .rr1 { --rr: 1; }   .rr2 { --rr: 2; }   .rr3 { --rr: 3; }   .rr4 { --rr: 4; }
  .rr5 { --rr: 5; }   .rr6 { --rr: 6; }   .rr7 { --rr: 7; }   .rr8 { --rr: 8; }
  .rr9 { --rr: 9; }   .rr10 { --rr: 10; } .rr11 { --rr: 11; } .rr12 { --rr: 12; }
  .rr13 { --rr: 13; } .rr14 { --rr: 14; } .rr15 { --rr: 15; } .rr16 { --rr: 16; }
  .rr17 { --rr: 17; } .rr18 { --rr: 18; } .rr19 { --rr: 19; } .rr20 { --rr: 20; }
  .rr21 { --rr: 21; } .rr22 { --rr: 22; } .rr23 { --rr: 23; }
  .rr0 { --rr: 25; }

  /* Knot dividers draw themselves in (fx/knots.js; data-fx="knots").
     Hidden only once JavaScript is running, and shown anyway after 5
     seconds if fx/knots.js never arrives. */
  html.js:not([data-fx-off~="knots"]) .bb-divider[data-fx~="knots"]:not(.is-drawn) path {
    stroke-dashoffset: 1;
    animation: bb-fx-show-line 0s 5s forwards;
  }
  html.js:not([data-fx-off~="knots"]) .bb-divider[data-fx~="knots"]:not(.is-drawn)::before,
  html.js:not([data-fx-off~="knots"]) .bb-divider[data-fx~="knots"]:not(.is-drawn)::after {
    transform: scaleX(0);
    animation: bb-fx-show-rule 0s 5s forwards;
  }
  .bb-divider[data-fx~="knots"]::before { transform-origin: right center; }
  .bb-divider[data-fx~="knots"]::after  { transform-origin: left center; }
  html.js .bb-divider.is-armed path,
  html.js .bb-divider.is-armed::before,
  html.js .bb-divider.is-armed::after { animation: none; }
  html.js .bb-divider.is-drawing path {
    animation: bb-knot-draw calc(900ms * var(--l)) linear calc(900ms * var(--s)) forwards;
  }
  html.js .bb-divider.is-drawing::before,
  html.js .bb-divider.is-drawing::after {
    animation: bb-fx-show-rule 900ms var(--bb-ease-out) forwards;
  }

  /* Pikes Peak: the stars twinkle (each at its own point in the cycle)
     and the summit beacon breathes, only while that Peak is on screen
     (fx/peak.js adds .is-moving). Layers drift with the scroll. */
  .pp.is-moving:is([data-phase="night"], [data-phase="dawn"], [data-phase="dusk"]) .pp-tw { animation: pp-twinkle 5s ease-in-out infinite; }
  .pp-tw-1 { animation-delay: -0.5s; }  .pp-tw-2 { animation-delay: -1s; }
  .pp-tw-3 { animation-delay: -1.5s; }  .pp-tw-4 { animation-delay: -2s; }
  .pp-tw-5 { animation-delay: -2.5s; }  .pp-tw-6 { animation-delay: -3s; }
  .pp-tw-7 { animation-delay: -3.5s; }  .pp-tw-8 { animation-delay: -4s; }
  .pp-tw-9 { animation-delay: -4.5s; }
  .pp.is-moving .pp-beacon { animation: pp-beacon 3.6s ease-in-out infinite; }
  /* When the sky changes (dusk to night, say), the colors cross-fade. */
  .pp [class^="ppf-"] { transition: fill 1.5s ease; }
  .pp [class^="pps-"] { transition: stop-color 1.5s ease; }
  .pp [class^="ppk-"] { transition: stroke 1.5s ease; }
  .pp-shoot { animation: pp-shoot 900ms ease-out forwards; }

  /* Page to page: a 250ms cross-fade; the header stays put. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: var(--bb-dur-ui); }
}
@keyframes pp-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes pp-shoot {
  0%   { opacity: 0; transform: rotate(24deg) translateX(0); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(24deg) translateX(240px); }
}
@keyframes pp-beacon  { 0%, 100% { opacity: var(--pp-beacon); } 50% { opacity: calc(var(--pp-beacon) * 0.35); } }
@keyframes bb-knot-draw { to { stroke-dashoffset: 0; } }
@keyframes bb-fx-show-line { to { stroke-dashoffset: 0; } }
@keyframes bb-fx-show-rule { to { transform: none; } }
@keyframes bb-knot-in   { to { opacity: 1; } }
@keyframes bb-knot-out  { to { opacity: 0; } }
@keyframes bb-rr-in { to { opacity: 1; } }
@keyframes bb-rr-berkano {
  0%   { opacity: 0; stroke-width: 1.05; }
  55%  { opacity: 1; stroke-width: 1.9; stroke-opacity: 1; }
  100% { opacity: 1; stroke-width: 1.05; }
}


/* ---- 24. Reduced motion (carried over from css/enhancements.css) ------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ---- 25. Print ------------------------------------------------------------------------
   Dark ink on white paper, whatever the section: on paper the dark
   sections take the vellum sections' colors (tokens.css), and the page,
   its sections and its cards print no background, even with "Background
   graphics" turned on. */
@media print {
  :root,
  .bb-section--forest,
  .bb-on-forest,
  .bb-section--bog {
    color-scheme: light;
    --bb-bg:          transparent;
    --bb-surface:     transparent;
    --bb-field-bg:    transparent;
    --bb-text:        var(--bb-ink);
    --bb-text-muted:  var(--bb-ink-soft);
    --bb-heading:     var(--bb-ink);
    --bb-voice:       var(--bb-verdigris-deep);
    --bb-link:        var(--bb-verdigris-deep);
    --bb-link-hover:  var(--bb-ink);
    --bb-rule:        var(--bb-flax);
    --bb-field-line:  var(--bb-flax);
    --bb-accent-text: var(--bb-bronze-deep);
    --bb-focus:       var(--bb-bronze-deep);
    --bb-error:       var(--bb-danger-deep);
    --bb-success:     var(--bb-sage-deep);
    --bb-grain-opacity: 0;
    --fa-primary-color:   var(--bb-verdigris-deep);
    --fa-secondary-color: var(--bb-verdigris);
  }
  .bb-header, .bb-skip, .bb-to-top, .bb-menu-toggle, .bb-chips { display: none !important; }
  html, body, .bb-section, .bb-footer {
    background: none !important;
    color: var(--bb-ink) !important;
  }
  .bb-section::before, .bb-footer::before, .bb-section--vellum::after { display: none; }
  .bb-reveal { opacity: 1 !important; transform: none !important; }
  h1, h2, h3, h4 { color: var(--bb-ink) !important; }
  a { color: var(--bb-ink); }
  .bb-social a, .bb-footer__sky { color: var(--bb-text-muted); }   /* lichen on screen: too pale on paper */
  /* A picture the laser hasn't finished with prints as itself, without
     the dimming or the laser's own drawing over it. */
  [data-fx~="laser"] img { filter: none !important; animation: none !important; }
  .bb-laser { display: none !important; }
}


/* ---- 26. Vellum sections: a softer way into the light ------------------
   (Amendment 1.3.) Scrolling from a dark section into a light one was a
   jump from near-black to near-white. Now:
   1. the dark section casts a soft shadow onto the page, top and bottom;
   2. the page warms a little toward its top and bottom edges, like an old
      leaf (inside the section's padding, so it never sits behind text);
   3. as a light section scrolls in, it comes up from lamplight to full
      light, the way your eyes adjust (not with "reduce motion"; browsers
      without scroll-driven animation just show it).
   The parchment texture itself is vellum.png (tokens.css). */
.bb-section--vellum {
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--bb-bog-oak) 32%, transparent), transparent 2.75rem),
    linear-gradient(to top,    color-mix(in srgb, var(--bb-bog-oak) 32%, transparent), transparent 2.75rem),
    linear-gradient(to bottom, color-mix(in srgb, var(--bb-sepia) 11%, transparent), transparent var(--space-section),
                               transparent calc(100% - var(--space-section)), color-mix(in srgb, var(--bb-sepia) 11%, transparent));
}

/* 3. Lamplight to full light, tied to the scroll position. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bb-section--vellum::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-color: var(--bb-umber);
      opacity: 0;
      animation: bb-lamplight linear both;
      animation-timeline: view();
    }
  }
}
/* Dim while the page's edge is coming up the screen, full light by the time
   it is a third of the way up; the same in reverse at the bottom, for
   scrolling back up. */
@keyframes bb-lamplight {
  entry 0%  { opacity: 0.55; }
  entry 35% { opacity: 0; }
  exit 65%  { opacity: 0; }
  exit 100% { opacity: 0.55; }
}


/* ---- 27. High contrast (Windows contrast themes) ------------------------
   With "forced colors" on, the browser repaints the page in the visitor's
   few theme colors and drops backgrounds and shadows, which is how a
   chosen topic card, a pressed filter chip and the menu button's lines
   are drawn. These bring them back in the theme's own colors, without
   moving anything or touching the focus ring. (The edition toggle's is in
   editions.css, the keepsake choices' in fx.css.) */
@media (forced-colors: active) {
  .bb-choice__input:checked + .bb-choice__card,
  .bb-chip[aria-pressed="true"] { border-color: Highlight; }
  .bb-choice__input:checked + .bb-choice__card::after,
  .bb-chip[aria-pressed="true"]::before { background-color: Highlight; }
  .bb-menu-toggle__icon::before,
  .bb-menu-toggle__icon::after { background-color: ButtonText; }
}