/* ==========================================================================
   Bajo Port — design system
   --------------------------------------------------------------------------
   Working-harbour editorial. Harbour-grey ground, deep navy structure,
   brass as the single accent. Spectral for display, Public Sans for text.

   RULES OBSERVED IN THIS FILE
   1. No global element rules for local problems. Everything is scoped under
      `.bjp` (body class) or a component class. Nothing here restyles a bare
      `table`, `a[style]`, or sets `overflow-wrap` on a prose container.
   2. Every colour is defined once on bare `:root`; the dark blocks only
      redefine tokens, never introduce a colour that exists nowhere else.
   3. Long-token wrapping is handled per-token (`.bjp-url`), never per-prose.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ground & surface */
  --bjp-bg:            #C8D0D4;
  --bjp-bg-elevated:   #FFFFFF;
  --bjp-surface-alt:   #B3BEC4;
  --bjp-surface-soft:  #D6DDE0;

  /* Ink */
  --bjp-ink:           #101C24;
  --bjp-ink-muted:     #374650;
  --bjp-ink-onDark:    #EDF1F3;
  --bjp-ink-onDark-mut:#B9C7CE;

  /* Structure */
  --bjp-navy:          #0E3A50;
  --bjp-navy-deep:     #082431;
  --bjp-navy-solid:    #0E3A50;
  --bjp-navy-tint:     #BAC7CD;

  /* Accent */
  --bjp-brass:         #B8823C;
  --bjp-brass-deep:    #573A16;
  --bjp-brass-onDark:  #E8BC6E;
  --bjp-brass-tint:    #E4D3B4;

  /* Signal */
  --bjp-good:          #20523C;
  --bjp-good-tint:     #BCCDC4;
  --bjp-warn-deep:     #6B3A10;
  --bjp-warn-tint:     #EBD9BE;

  /* Lines & elevation */
  --bjp-line:          #AFBCC2;
  --bjp-line-strong:   #93A4AC;
  --bjp-shadow-sm: 0 1px 2px rgba(10,25,35,.06), 0 2px 10px rgba(10,25,35,.06);
  --bjp-shadow-md: 0 2px 4px rgba(10,25,35,.05), 0 14px 34px rgba(10,25,35,.11);
  --bjp-shadow-lg: 0 4px 8px rgba(10,25,35,.05), 0 28px 60px rgba(10,25,35,.16);

  /* Form surfaces (kept explicit — inputs inherit nothing useful) */
  --bjp-field-bg:   #FFFFFF;
  --bjp-field-ink:  #142430;
  --bjp-field-line: #6E7F8A;
  --bjp-field-ph:   #4B5C68;

  /* Type */
  --bjp-font-display: "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --bjp-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Modular scale — 1.200 minor third, fluid between 380px and 1280px */
  --bjp-t-xs:   clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);
  --bjp-t-sm:   clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --bjp-t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --bjp-t-md:   clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --bjp-t-lg:   clamp(1.25rem, 1.16rem + 0.42vw, 1.5rem);
  --bjp-t-xl:   clamp(1.5rem, 1.34rem + 0.75vw, 1.9375rem);
  --bjp-t-2xl:  clamp(1.8125rem, 1.55rem + 1.25vw, 2.5rem);
  --bjp-t-3xl:  clamp(2.125rem, 1.7rem + 2vw, 3.25rem);

  /* Space — 4px base */
  --bjp-s-1: 0.25rem;  --bjp-s-2: 0.5rem;   --bjp-s-3: 0.75rem;
  --bjp-s-4: 1rem;     --bjp-s-5: 1.5rem;   --bjp-s-6: 2rem;
  --bjp-s-7: 2.5rem;   --bjp-s-8: 3rem;     --bjp-s-9: 4rem;
  --bjp-s-10: 5.5rem;

  --bjp-section-y: clamp(2.75rem, 1.5rem + 4.2vw, 4.75rem);

  /* Radius */
  --bjp-r-sm: 8px; --bjp-r-md: 14px; --bjp-r-lg: 22px; --bjp-r-pill: 999px;

  /* Layout */
  --bjp-container: 1180px;
  --bjp-container-narrow: 760px;
  --bjp-gutter: clamp(1.125rem, 0.7rem + 1.9vw, 2rem);

  /* Fixed header height — consumed by scroll-margin-top on every anchor
     target, so deep links never land under the bar. */
  --bjp-header-h: 68px;

  /* Role pairs — a fill and the ink that sits on it, always defined together
     so a dark-mode token flip can never leave a label stranded on its own
     background. Every one of these is re-declared in both dark blocks. */
  --bjp-btn-primary-bg:       #082431;
  --bjp-btn-primary-bg-hover: #0E3A50;
  --bjp-btn-primary-ink:      #FFFFFF;
  --bjp-btn-brass-bg:         #573A16;
  --bjp-btn-brass-bg-hover:   #3F2A10;
  --bjp-btn-brass-ink:        #FFFFFF;
  --bjp-btn-ghost-ink:        #082431;
  --bjp-nav-hover-ink:        #082431;
  --bjp-chip-bg:              #BAC7CD;
  --bjp-chip-ink:             #082431;

  color-scheme: light;
}

@media (min-width: 900px) {
  :root { --bjp-header-h: 76px; }
}

/* Dark: only token values change. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bjp-bg:            #0A1620;
    --bjp-bg-elevated:   #0F202B;
    --bjp-surface-alt:   #132734;
    --bjp-surface-soft:  #101F2A;
    --bjp-ink:           #EDE6D6;
    --bjp-ink-muted:     #AEBDC6;
    --bjp-ink-onDark:    #EDE6D6;
    --bjp-ink-onDark-mut:#AEBDC6;
    --bjp-navy:          #7FBEE0;
    --bjp-navy-deep:     #061621;
    --bjp-navy-solid:    #16394B;
    --bjp-navy-tint:     #132A35;
    --bjp-brass:         #E1A857;
    --bjp-brass-deep:    #E8BC6E;
    --bjp-brass-onDark:  #E8BC6E;
    --bjp-brass-tint:    #2B2213;
    --bjp-good:          #6FCBA0;
    --bjp-good-tint:     #12291F;
    --bjp-warn-deep:     #E0B071;
    --bjp-warn-tint:     #2A2114;
    --bjp-line:          #223140;
    --bjp-line-strong:   #35485A;
    --bjp-shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
    --bjp-shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.42);
    --bjp-shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 28px 60px rgba(0,0,0,.5);
    --bjp-field-bg:   #0F202B;
    --bjp-field-ink:  #EDE6D6;
    --bjp-field-line: #68808F;

    --bjp-btn-primary-bg:       #1B4155;
    --bjp-btn-primary-bg-hover: #24566F;
    --bjp-btn-primary-ink:      #F2F7FA;
    --bjp-btn-brass-bg:         #E1A857;
    --bjp-btn-brass-bg-hover:   #EFC07A;
    --bjp-btn-brass-ink:        #17120A;
    --bjp-btn-ghost-ink:        #EDE6D6;
    --bjp-nav-hover-ink:        #EDE6D6;
    --bjp-chip-bg:              #17313E;
    --bjp-chip-ink:             #CFDDE5;
    --bjp-field-ph:   #AEBDC6;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bjp-bg:            #0A1620;
  --bjp-bg-elevated:   #0F202B;
  --bjp-surface-alt:   #132734;
  --bjp-surface-soft:  #101F2A;
  --bjp-ink:           #EDE6D6;
  --bjp-ink-muted:     #AEBDC6;
  --bjp-ink-onDark:    #EDE6D6;
  --bjp-ink-onDark-mut:#AEBDC6;
  --bjp-navy:          #7FBEE0;
  --bjp-navy-deep:     #061621;
  --bjp-navy-solid:    #16394B;
  --bjp-navy-tint:     #132A35;
  --bjp-brass:         #E1A857;
  --bjp-brass-deep:    #E8BC6E;
  --bjp-brass-onDark:  #E8BC6E;
  --bjp-brass-tint:    #2B2213;
  --bjp-good:          #6FCBA0;
  --bjp-good-tint:     #12291F;
  --bjp-warn-deep:     #E0B071;
  --bjp-warn-tint:     #2A2114;
  --bjp-line:          #223140;
  --bjp-line-strong:   #35485A;
  --bjp-shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --bjp-shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.42);
  --bjp-shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 28px 60px rgba(0,0,0,.5);
  --bjp-field-bg:   #0F202B;
  --bjp-field-ink:  #EDE6D6;
  --bjp-field-line: #68808F;

  --bjp-btn-primary-bg:       #1B4155;
  --bjp-btn-primary-bg-hover: #24566F;
  --bjp-btn-primary-ink:      #F2F7FA;
  --bjp-btn-brass-bg:         #E1A857;
  --bjp-btn-brass-bg-hover:   #EFC07A;
  --bjp-btn-brass-ink:        #17120A;
  --bjp-btn-ghost-ink:        #EDE6D6;
  --bjp-nav-hover-ink:        #EDE6D6;
  --bjp-chip-bg:              #17313E;
  --bjp-chip-ink:             #CFDDE5;
  --bjp-field-ph:   #AEBDC6;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. BASE — scoped to the theme body class
   -------------------------------------------------------------------------- */
.bjp *, .bjp *::before, .bjp *::after { box-sizing: border-box; }

body.bjp {
  margin: 0;
  background: var(--bjp-bg);
  color: var(--bjp-ink);
  font-family: var(--bjp-font-body);
  font-size: var(--bjp-t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

.bjp img, .bjp svg, .bjp video { max-width: 100%; height: auto; display: block; }

.bjp h1, .bjp h2, .bjp h3, .bjp h4 {
  font-family: var(--bjp-font-display);
  color: var(--bjp-ink);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
.bjp h5, .bjp h6 { font-family: var(--bjp-font-body); margin: 0; }
.bjp p { margin: 0; }

.bjp a { color: var(--bjp-navy); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.bjp a:hover { color: var(--bjp-brass-deep); }

/* Focus: one visible ring everywhere, never removed. */
.bjp a:focus-visible,
.bjp button:focus-visible,
.bjp summary:focus-visible,
.bjp input:focus-visible,
.bjp select:focus-visible,
.bjp textarea:focus-visible,
.bjp [tabindex]:focus-visible {
  outline: 2px solid var(--bjp-brass-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Anchor targets clear the fixed header. Applied to the elements that are
   actually linked to, not to every element on the page. */
.bjp [id]:target,
.bjp .bjp-anchor,
.bjp .bjp-sec[id],
.bjp .bjp-faq-group[id],
.bjp .bjp-qa[id],
.bjp #bjp-main {
  scroll-margin-top: calc(var(--bjp-header-h) + 16px);
}

.bjp .bjp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bjp-navy-deep); color: #FFFFFF;
  padding: 12px 20px; border-radius: 0 0 var(--bjp-r-sm) 0;
  font-weight: 600; text-decoration: none;
  scroll-margin-top: 0;
}
.bjp-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.bjp-wrap { max-width: var(--bjp-container); margin-inline: auto; padding-inline: var(--bjp-gutter); }
.bjp-wrap--narrow { max-width: var(--bjp-container-narrow); }
.bjp-section { padding-block: var(--bjp-section-y); }
.bjp-section--tight { padding-block: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); }
.bjp-section--elevated { background: var(--bjp-bg-elevated); }
.bjp-section--soft { background: var(--bjp-surface-soft); }
.bjp-section--navy { background: var(--bjp-navy-deep); }

.bjp-stack > * + * { margin-top: var(--bjp-s-4); }
.bjp-grid { display: grid; gap: var(--bjp-s-5); }
@media (min-width: 640px)  { .bjp-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px)  { .bjp-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
                             .bjp-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .bjp-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Any wide child (tables, code, charts) scrolls inside its own box so the
   page body never scrolls sideways. Opt-in wrapper, not a global table rule. */
.bjp-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* --------------------------------------------------------------------------
   4. TYPE COMPONENTS
   -------------------------------------------------------------------------- */
.bjp .bjp-eyebrow {
  display: inline-flex; align-items: center; gap: var(--bjp-s-2);
  font-family: var(--bjp-font-body);
  font-size: var(--bjp-t-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bjp-brass-deep);
}
.bjp-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--bjp-brass); border-radius: 2px;
}
.bjp .bjp-eyebrow--onDark { color: var(--bjp-brass-onDark); }
.bjp-eyebrow--onDark::before { background: var(--bjp-brass-onDark); }
.bjp-eyebrow--plain::before { display: none; }

.bjp-h1    { font-size: var(--bjp-t-3xl); }
.bjp-h2    { font-size: var(--bjp-t-2xl); }
.bjp-h3    { font-size: var(--bjp-t-xl); }
.bjp-h4    { font-size: var(--bjp-t-lg); }
.bjp .bjp-lead  { font-size: var(--bjp-t-md); color: var(--bjp-ink-muted); line-height: 1.65; }
.bjp .bjp-muted { color: var(--bjp-ink-muted); }
.bjp-small { font-size: var(--bjp-t-sm); }
.bjp-xs    { font-size: var(--bjp-t-xs); }
.bjp .bjp-onDark      { color: var(--bjp-ink-onDark); }
.bjp .bjp-onDark-mut  { color: var(--bjp-ink-onDark-mut); }

.bjp-rule { height: 2px; width: 88px; background: var(--bjp-brass); border: 0; border-radius: 2px; margin: 0; }

/* Editorial prose — used for admin-authored HTML bodies. Deliberately does
   NOT set overflow-wrap; long URLs are wrapped with .bjp-url on the token. */
.bjp .bjp-prose { color: var(--bjp-ink-muted); }
/* Reset and flow are kept at the SAME specificity so source order decides:
   `.bjp-prose p { margin:0 }` (0,1,1) used to beat `.bjp-prose > * + *`
   (0,1,0), which silently removed the gap between every pair of paragraphs
   in a multi-paragraph body. Both rules now target direct children. */
/* These must out-rank the base reset `.bjp p { margin:0 }` (0,1,1), so they
   carry the `.bjp` prefix and land at (0,2,0). Without it the flow rule lost
   and consecutive paragraphs rendered with no separation at all. */
.bjp .bjp-prose > * { margin: 0; }
.bjp .bjp-prose > * + * { margin-top: var(--bjp-s-4); }
.bjp .bjp-prose li > p { margin: 0; }
.bjp .bjp-prose li > p + p { margin-top: var(--bjp-s-2); }
.bjp .bjp-prose h2 { font-size: var(--bjp-t-xl); color: var(--bjp-ink); margin-top: var(--bjp-s-7); }
.bjp .bjp-prose h3 { font-size: var(--bjp-t-lg); color: var(--bjp-ink); margin-top: var(--bjp-s-6); }
.bjp .bjp-prose ul, .bjp .bjp-prose ol { margin: 0; padding-left: 1.35em; }
.bjp .bjp-prose li + li { margin-top: var(--bjp-s-2); }
.bjp .bjp-prose strong { color: var(--bjp-ink); font-weight: 650; }
.bjp .bjp-prose a { color: var(--bjp-navy); font-weight: 500; }
.bjp-prose table { border-collapse: collapse; width: 100%; font-size: var(--bjp-t-sm); }
.bjp-prose th, .bjp-prose td { border: 1px solid var(--bjp-line); padding: var(--bjp-s-3); text-align: left; }
.bjp .bjp-prose th { background: var(--bjp-surface-soft); color: var(--bjp-ink); font-weight: 700; }

/* Per-token wrapping for bare URLs and other unbreakable strings. */
.bjp-url { overflow-wrap: anywhere; word-break: break-word; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.bjp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bjp-s-2);
  min-height: 46px; padding: 0.75rem 1.4rem;
  font-family: var(--bjp-font-body); font-size: var(--bjp-t-sm); font-weight: 700;
  letter-spacing: 0.02em; line-height: 1.2;
  border-radius: var(--bjp-r-pill); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bjp-btn i { font-size: 1.15em; }
.bjp-btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .bjp-btn { transition: none; } .bjp-btn:hover { transform: none; } }

.bjp .bjp-btn--primary { background: var(--bjp-btn-primary-bg); color: var(--bjp-btn-primary-ink); box-shadow: var(--bjp-shadow-sm); }
.bjp .bjp-btn--primary:hover { background: var(--bjp-btn-primary-bg-hover); color: var(--bjp-btn-primary-ink); box-shadow: var(--bjp-shadow-md); }

.bjp .bjp-btn--brass { background: var(--bjp-btn-brass-bg); color: var(--bjp-btn-brass-ink); box-shadow: var(--bjp-shadow-sm); }
.bjp .bjp-btn--brass:hover { background: var(--bjp-btn-brass-bg-hover); color: var(--bjp-btn-brass-ink); box-shadow: var(--bjp-shadow-md); }

.bjp .bjp-btn--ghost { background: transparent; color: var(--bjp-btn-ghost-ink); border-color: var(--bjp-line-strong); }
.bjp .bjp-btn--ghost:hover { background: var(--bjp-bg-elevated); color: var(--bjp-btn-ghost-ink); border-color: var(--bjp-line-strong); }

.bjp .bjp-btn--onDark { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.5); }
.bjp .bjp-btn--onDark:hover { background: rgba(255,255,255,.12); color: #FFFFFF; border-color: #FFFFFF; }

.bjp .bjp-btn--solidOnDark { background: #FFFFFF; color: #082431; }
.bjp .bjp-btn--solidOnDark:hover { background: var(--bjp-brass-tint); color: var(--bjp-brass-deep); }

.bjp-btn--block { width: 100%; }

/* Text link that reads as an action. */
.bjp .bjp-link-arrow {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 700; font-size: var(--bjp-t-sm);
  color: var(--bjp-navy); text-decoration: none;
}
.bjp-link-arrow i { transition: transform .2s ease; }
.bjp .bjp-link-arrow:hover { color: var(--bjp-brass-deep); }
.bjp-link-arrow:hover i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .bjp-link-arrow i { transition: none; } }

/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.bjp-card {
  background: var(--bjp-bg-elevated);
  border: 1px solid var(--bjp-line);
  border-radius: var(--bjp-r-md);
  box-shadow: var(--bjp-shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.bjp-card--hover:hover { border-color: var(--bjp-brass); box-shadow: var(--bjp-shadow-md); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .bjp-card, .bjp-card--hover:hover { transition: none; transform: none; } }
.bjp-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--bjp-surface-alt); overflow: hidden; }
.bjp-card-media img { width: 100%; height: 100%; object-fit: cover; }
.bjp-card-body { padding: var(--bjp-s-5); display: flex; flex-direction: column; gap: var(--bjp-s-3); flex: 1; }
.bjp-card-title { font-size: var(--bjp-t-lg); }
.bjp .bjp-card-title a { text-decoration: none; color: inherit; }
.bjp .bjp-card-title a:hover { color: var(--bjp-brass-deep); }
.bjp-card-foot { margin-top: auto; padding-top: var(--bjp-s-2); }

/* Numbered method card (the "How this guide works" pattern). */
.bjp-step { display: flex; gap: var(--bjp-s-4); align-items: flex-start; }
.bjp .bjp-step-num {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bjp-navy-deep); color: #FFFFFF;
  font-family: var(--bjp-font-display); font-size: 1.0625rem; font-weight: 600;
}
.bjp-step-title { font-size: var(--bjp-t-md); margin-bottom: var(--bjp-s-2); }

/* Fact chip row under the hero. */
.bjp-facts { display: grid; gap: var(--bjp-s-3); }
@media (min-width: 720px) { .bjp-facts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .bjp-facts { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.bjp-fact {
  display: flex; gap: var(--bjp-s-3); align-items: flex-start;
  padding: var(--bjp-s-4);
  background: var(--bjp-bg-elevated);
  border: 1px solid var(--bjp-line);
  border-left: 3px solid var(--bjp-brass);
  border-radius: var(--bjp-r-sm);
}
.bjp .bjp-fact i { color: var(--bjp-brass-deep); font-size: 1.25rem; flex: none; margin-top: 2px; }
.bjp .bjp-fact-label { font-weight: 700; font-size: var(--bjp-t-sm); color: var(--bjp-ink); display: block; }
.bjp .bjp-fact-value { font-size: var(--bjp-t-sm); color: var(--bjp-ink-muted); }

/* Image credit line — matches the live site's sourcing discipline. */
.bjp .bjp-credit { font-size: var(--bjp-t-xs); color: var(--bjp-ink-muted); margin-top: var(--bjp-s-2); }
.bjp .bjp-credit a { color: var(--bjp-ink-muted); }
.bjp .bjp-credit--onImage {
  position: absolute; right: 8px; bottom: 8px; margin: 0;
  background: rgba(8,36,49,.78); color: #EDF1F3;
  padding: 3px 9px; border-radius: var(--bjp-r-pill);
  backdrop-filter: blur(3px);
}
.bjp .bjp-credit--onImage a { color: #EDF1F3; }

/* --------------------------------------------------------------------------
   7. HEADER + MEGA MENU
   -------------------------------------------------------------------------- */
/* Floating privacy notice — anchored bottom-left.
   It sits above page content but below the mobile drawer (z 120), and clear of
   the back-to-top control, which is anchored bottom-right. Not a modal: the
   page behind it stays scrollable and operable. */
.bjp .bjp-notice {
  position: fixed;
  z-index: 110;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: min(820px, calc(100vw - 32px));
  background: var(--bjp-bg-elevated);
  color: var(--bjp-ink-muted);
  border: 1px solid var(--bjp-line);
  border-left: 3px solid var(--bjp-brass);
  border-radius: var(--bjp-r-md);
  box-shadow: var(--bjp-shadow-lg);
  font-size: var(--bjp-t-xs);
  line-height: 1.65;
}
/* Wide and short rather than narrow and tall: the text takes the row and the
   actions sit beside it, so the card reads as a strip along the bottom edge
   instead of a column climbing the viewport. Stacks below 640px, where there
   is no width to spare. */
.bjp-notice-inner {
  display: flex; flex-direction: column;
  gap: var(--bjp-s-3); padding: var(--bjp-s-4) var(--bjp-s-5);
}
@media (min-width: 640px) {
  .bjp-notice-inner { flex-direction: row; align-items: center; gap: var(--bjp-s-5); }
  .bjp-notice-body { flex: 1 1 auto; min-width: 0; }
  .bjp-notice-actions { flex: 0 0 auto; }
}

/* The notice text is long by design — it enumerates exactly what is stored.
   Cap the card and let the text scroll inside it rather than letting the card
   grow past the viewport on a short screen. */
/* Below 640px the card cannot grow sideways, so the text area is capped
   tighter and scrolls — a shorter card that scrolls beats a tall one that
   occupies half the screen. Above 640px the row layout keeps the text short
   enough that this cap is rarely reached. */
.bjp-notice-body { max-height: min(30vh, 172px); overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 640px) { .bjp-notice-body { max-height: min(42vh, 260px); } }
.bjp .bjp-notice-text { margin: 0; }
.bjp .bjp-notice a { color: var(--bjp-navy); text-decoration: underline; }
.bjp .bjp-notice a:hover { color: var(--bjp-brass-deep); }
.bjp-notice-actions { display: flex; gap: var(--bjp-s-2); align-items: center; }
.bjp-notice-dismiss { flex: none; min-height: 40px; padding-inline: 1.1rem; }

/* Entrance: a short rise, skipped entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .bjp .bjp-notice { animation: bjp-notice-in .32s cubic-bezier(.16,.84,.44,1) both; }
  @keyframes bjp-notice-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* The wide card reaches under the back-to-top control (anchored bottom-right)
   on any viewport narrower than ~900px. Rather than suppress the control, lift
   it above the card: --bjp-notice-h is published by the script from the card's
   measured height, so the offset stays correct whatever the text wraps to. */
@media (max-width: 900px) {
  body.bjp-notice-open .bjp-totop {
    bottom: calc(var(--bjp-notice-h, 0px) + 28px);
  }
}

/* Very short viewports: give the text less room rather than overflowing. */
@media (max-height: 520px) {
  .bjp-notice-body { max-height: 34vh; }
}

/* A capped text area has to look scrollable, or the copy simply appears to
   stop mid-sentence. The class is set by the script only when the content
   actually overflows, so the fade never appears over complete text. */
.bjp-notice-body { scrollbar-width: thin; }
.bjp-notice-body.is-scrollable {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.bjp-notice-body.is-scrollable:focus-within,
.bjp-notice-body.is-scrollable:hover {
  -webkit-mask-image: none; mask-image: none;   /* full text while reading it */
}

.bjp-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--bjp-bg-elevated);
  border-bottom: 1px solid var(--bjp-line);
}
.bjp-header-inner {
  display: flex; align-items: center; gap: var(--bjp-s-4);
  min-height: var(--bjp-header-h);
}
.bjp-brand { display: inline-flex; align-items: center; gap: var(--bjp-s-3); text-decoration: none; flex: none; }
.bjp .bjp-brand-mark {
  width: 36px; height: 36px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--bjp-navy-deep); color: var(--bjp-brass-onDark);
  font-size: 1.15rem;
}
.bjp .bjp-brand-name {
  font-family: var(--bjp-font-display); font-size: 1.1875rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--bjp-ink); line-height: 1.1;
  white-space: nowrap;
}
.bjp .bjp-brand-tag { display: block; font-family: var(--bjp-font-body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bjp-ink-muted); white-space: nowrap; }

.bjp-nav { display: none; margin-left: auto; }
.bjp-header-actions { display: flex; align-items: center; gap: var(--bjp-s-2); margin-left: auto; }
@media (min-width: 1240px) { .bjp-header-actions { margin-left: var(--bjp-s-3); } }

.bjp-nav-list { display: flex; align-items: center; gap: var(--bjp-s-1); list-style: none; margin: 0; padding: 0; }
.bjp-nav-item { position: static; }
.bjp .bjp-nav-link {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .6rem .7rem; border-radius: var(--bjp-r-sm);
  font-size: 0.875rem; font-weight: 600; color: var(--bjp-ink); text-decoration: none;
  white-space: nowrap;
}
.bjp .bjp-nav-link:hover { background: var(--bjp-surface-soft); color: var(--bjp-nav-hover-ink); }
.bjp .bjp-nav-item.is-current > .bjp-nav-link { color: var(--bjp-brass-deep); }
.bjp-nav-item.is-current > .bjp-nav-link::after {
  content: ""; position: absolute; margin-top: 2.1rem; width: 18px; height: 2px;
  background: var(--bjp-brass); border-radius: 2px;
}
.bjp-nav-caret { font-size: .95em; opacity: .7; }
.bjp-nav-toggle { display: none; }

@media (min-width: 1240px) {
  .bjp-nav { display: block; }
  .bjp-mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bjp-bg-elevated);
    border-top: 1px solid var(--bjp-line);
    border-bottom: 1px solid var(--bjp-line);
    box-shadow: var(--bjp-shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .bjp-nav-item.has-children:hover > .bjp-mega,
  .bjp-nav-item.has-children:focus-within > .bjp-mega,
  .bjp-nav-item.has-children.is-open > .bjp-mega {
    opacity: 1; visibility: visible; transform: none;
  }
  .bjp-mega-inner { max-width: var(--bjp-container); margin-inline: auto; padding: var(--bjp-s-6) var(--bjp-gutter); }
  .bjp-mega-list {
    list-style: none; margin: 0; padding: 0;
    columns: 3; column-gap: var(--bjp-s-6);
  }
  .bjp-mega-item { break-inside: avoid; margin-bottom: 2px; }
.bjp .bjp-mega-link {
    display: block; padding: .5rem .7rem; border-radius: var(--bjp-r-sm);
    font-size: 0.875rem; line-height: 1.45; color: var(--bjp-ink-muted); text-decoration: none;
  }
.bjp .bjp-mega-link:hover { background: var(--bjp-surface-soft); color: var(--bjp-nav-hover-ink); }
.bjp .bjp-mega-item.is-current > .bjp-mega-link { color: var(--bjp-brass-deep); font-weight: 650; }
  @media (prefers-reduced-motion: reduce) { .bjp-mega { transition: none; } }
}

/* Mobile drawer */
.bjp .bjp-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--bjp-r-sm);
  background: transparent; border: 1px solid var(--bjp-line);
  color: var(--bjp-ink); cursor: pointer; font-size: 1.3rem;
}
/* Must match the base rule's specificity (0,2,0) or it never applies — the
   bare selector lost to `.bjp .bjp-burger` and left the burger on screen
   beside the desktop nav, overflowing the header. */
@media (min-width: 1240px) { .bjp .bjp-burger { display: none; } }
.bjp-drawer {
  position: fixed; inset: 0; z-index: 120;
  background: var(--bjp-bg-elevated);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: none;
}
.bjp-drawer.is-open { display: block; }
.bjp-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bjp-s-4);
  min-height: var(--bjp-header-h); border-bottom: 1px solid var(--bjp-line); }
.bjp-drawer .bjp-nav-list { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--bjp-s-4); }
.bjp-drawer .bjp-nav-item { border-bottom: 1px solid var(--bjp-line); position: relative; }
.bjp-drawer .bjp-nav-link { padding: .95rem .25rem; font-size: 1rem; border-radius: 0; flex: 1; }
.bjp-drawer .bjp-nav-caret { display: none; }
.bjp-drawer .bjp-nav-item.has-children { display: flex; flex-wrap: wrap; align-items: center; }
.bjp .bjp-drawer .bjp-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: transparent; border: 0; color: var(--bjp-ink-muted); cursor: pointer; font-size: 1.15rem;
}
.bjp-drawer .bjp-nav-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.bjp-drawer .bjp-mega { display: none; flex-basis: 100%; }
.bjp-drawer .bjp-nav-item.is-open > .bjp-mega { display: block; }
.bjp-drawer .bjp-mega-inner { padding: 0 0 var(--bjp-s-4); }
.bjp-drawer .bjp-mega-list { list-style: none; margin: 0; padding: 0 0 0 var(--bjp-s-3);
  border-left: 2px solid var(--bjp-brass-tint); }
.bjp .bjp-drawer .bjp-mega-link { display: block; padding: .6rem .5rem; font-size: .9375rem;
  color: var(--bjp-ink-muted); text-decoration: none; }
.bjp .bjp-drawer .bjp-mega-link:hover { color: var(--bjp-nav-hover-ink); }

.bjp .bjp-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--bjp-r-sm);
  background: transparent; border: 1px solid var(--bjp-line);
  color: var(--bjp-ink); cursor: pointer; font-size: 1.15rem;
}
.bjp-theme-toggle:hover { border-color: var(--bjp-navy); }
.bjp-icon-moon { display: none; }
:root[data-theme="dark"] .bjp-icon-sun { display: none; }
:root[data-theme="dark"] .bjp-icon-moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bjp-icon-sun { display: none; }
  :root:not([data-theme="light"]) .bjp-icon-moon { display: inline; }
}

.bjp-header-cta { display: none; }
@media (min-width: 560px) { .bjp-header-cta { display: inline-flex; } }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.bjp .bjp-hero { position: relative; background: var(--bjp-navy-deep); color: var(--bjp-ink-onDark); overflow: hidden; }
.bjp-hero-media { position: absolute; inset: 0; }
.bjp-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Two-stop scrim: dark enough at the text side for AA on any photograph. */
.bjp-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,18,26,.94) 0%, rgba(6,18,26,.86) 42%, rgba(6,18,26,.55) 78%, rgba(6,18,26,.42) 100%),
    linear-gradient(180deg, rgba(6,18,26,.55) 0%, rgba(6,18,26,.20) 45%, rgba(6,18,26,.70) 100%);
}
.bjp-hero-inner { position: relative; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.bjp-hero-body { max-width: 46rem; display: flex; flex-direction: column; gap: var(--bjp-s-4); }
.bjp .bjp-hero-kicker { font-family: var(--bjp-font-display); font-size: var(--bjp-t-md); font-style: italic; color: var(--bjp-brass-onDark); }
.bjp .bjp-hero-title { font-size: var(--bjp-t-3xl); color: #FFFFFF; }
.bjp .bjp-hero-sub { font-size: var(--bjp-t-md); color: var(--bjp-ink-onDark-mut); max-width: 40rem; }
.bjp-hero-actions { display: flex; flex-wrap: wrap; gap: var(--bjp-s-3); margin-top: var(--bjp-s-2); }

/* Compact page header for interior pages. */
.bjp .bjp-pagehead { background: var(--bjp-navy-deep); color: var(--bjp-ink-onDark); position: relative; overflow: hidden; }
.bjp-pagehead-inner { position: relative; padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); }
.bjp-pagehead-body { max-width: 48rem; display: flex; flex-direction: column; gap: var(--bjp-s-3); }
.bjp .bjp-pagehead-title { font-size: var(--bjp-t-2xl); color: #FFFFFF; }
.bjp .bjp-pagehead-sub { font-size: var(--bjp-t-md); color: var(--bjp-ink-onDark-mut); }

.bjp .bjp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; font-size: var(--bjp-t-xs); color: var(--bjp-ink-onDark-mut); }
.bjp .bjp-crumbs a { color: var(--bjp-ink-onDark-mut); text-decoration: none; }
.bjp .bjp-crumbs a:hover { color: var(--bjp-brass-onDark); text-decoration: underline; }
.bjp .bjp-crumbs-sep { color: rgba(237,241,243,.55); }

/* --------------------------------------------------------------------------
   9. SECTION HEADINGS
   -------------------------------------------------------------------------- */
.bjp-sechead { display: flex; flex-direction: column; gap: var(--bjp-s-3); max-width: 44rem; margin-bottom: var(--bjp-s-7); }
.bjp-sechead--center { text-align: center; margin-inline: auto; align-items: center; }
.bjp .bjp-sechead p { color: var(--bjp-ink-muted); font-size: var(--bjp-t-md); }

/* --------------------------------------------------------------------------
   10. FAQ — categorised accordion (pill nav + filtered list)
   -------------------------------------------------------------------------- */
.bjp-faq-nav { display: flex; flex-wrap: wrap; gap: var(--bjp-s-2); margin-bottom: var(--bjp-s-6); }
.bjp-faq-nav--center { justify-content: center; }
.bjp .bjp-faq-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 42px; padding: .55rem 1.05rem;
  border-radius: var(--bjp-r-pill);
  font-family: var(--bjp-font-body); font-size: .875rem; font-weight: 650; line-height: 1;
  color: var(--bjp-ink); background: var(--bjp-bg-elevated);
  border: 1px solid var(--bjp-line); cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bjp .bjp-faq-pill i { font-size: 1.1rem; color: var(--bjp-brass-deep); }
.bjp-faq-pill:hover { border-color: var(--bjp-brass); }
.bjp .bjp-faq-pill.is-active { background: var(--bjp-navy-deep); color: #FFFFFF; border-color: var(--bjp-navy-deep); }
.bjp .bjp-faq-pill.is-active i { color: var(--bjp-brass-onDark); }
.bjp-faq-count { font-size: .75rem; font-weight: 700; opacity: .72; }
@media (prefers-reduced-motion: reduce) { .bjp-faq-pill { transition: none; } }

.bjp-faq-list { display: flex; flex-direction: column; gap: var(--bjp-s-3); }
.bjp-qa {
  background: var(--bjp-bg-elevated);
  border: 1px solid var(--bjp-line);
  border-radius: var(--bjp-r-md);
  box-shadow: var(--bjp-shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bjp-qa[open] { border-color: var(--bjp-brass); box-shadow: var(--bjp-shadow-md); }
.bjp-qa > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--bjp-s-4);
  padding: var(--bjp-s-4) var(--bjp-s-5);
}
.bjp-qa > summary::-webkit-details-marker { display: none; }
.bjp .bjp-qa-q { font-family: var(--bjp-font-display); font-size: var(--bjp-t-md); font-weight: 600; color: var(--bjp-ink); margin: 0; }
.bjp .bjp-qa-sign {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bjp-brass-tint); border: 1px solid var(--bjp-brass);
  color: var(--bjp-brass-deep); font-size: 1.05rem;
}
.bjp-qa .bjp-icon-minus { display: none; }
.bjp-qa[open] .bjp-icon-plus { display: none; }
.bjp-qa[open] .bjp-icon-minus { display: inline; }
.bjp .bjp-qa-a {
  padding: 0 var(--bjp-s-5) var(--bjp-s-5);
  border-top: 1px solid var(--bjp-line);
  margin-top: 0; padding-top: var(--bjp-s-4);
  color: var(--bjp-ink-muted); font-size: var(--bjp-t-sm); line-height: 1.8;
}
.bjp-faq-group + .bjp-faq-group { margin-top: var(--bjp-s-8); }
.bjp-faq-group-title { font-size: var(--bjp-t-xl); margin-bottom: var(--bjp-s-4); display: flex; align-items: center; gap: var(--bjp-s-3); }
.bjp .bjp-faq-group-title i { color: var(--bjp-brass-deep); }

/* --------------------------------------------------------------------------
   11. BOAT COMPARISON CARDS
   -------------------------------------------------------------------------- */
.bjp-boat { position: relative; }
.bjp .bjp-boat-tag {
  align-self: flex-start;
  font-size: var(--bjp-t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: var(--bjp-r-pill);
  background: var(--bjp-brass-tint); color: var(--bjp-brass-deep); border: 1px solid var(--bjp-brass);
}
.bjp .bjp-boat-price { font-family: var(--bjp-font-display); font-size: var(--bjp-t-md); color: var(--bjp-navy); font-weight: 600; }
.bjp-boat-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bjp-s-2); }
.bjp .bjp-boat-specs li { display: flex; gap: var(--bjp-s-2); font-size: var(--bjp-t-sm); color: var(--bjp-ink-muted); }
.bjp .bjp-boat-specs i { color: var(--bjp-brass-deep); flex: none; margin-top: .2em; }

/* --------------------------------------------------------------------------
   12. TOOLS — tabs, calculator, checklist
   -------------------------------------------------------------------------- */
.bjp-tabs { display: flex; flex-wrap: wrap; gap: var(--bjp-s-2); margin-bottom: var(--bjp-s-5); }
.bjp .bjp-tab {
  min-height: 44px; padding: .6rem .95rem; border-radius: var(--bjp-r-pill);
  font-size: .8125rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--bjp-ink); border: 1px solid var(--bjp-line);
}
.bjp-tab:hover { border-color: var(--bjp-brass); }
.bjp .bjp-tab[aria-selected="true"] { background: var(--bjp-navy-deep); color: #FFFFFF; border-color: var(--bjp-navy-deep); }

.bjp-panel {
  background: var(--bjp-bg-elevated); border: 1px solid var(--bjp-line);
  border-radius: var(--bjp-r-lg); padding: var(--bjp-s-6); box-shadow: var(--bjp-shadow-sm);
}
@media (min-width: 900px) { .bjp-panel { padding: var(--bjp-s-7); } }

.bjp-field { display: flex; flex-direction: column; gap: var(--bjp-s-2); }
.bjp .bjp-field > label { font-size: var(--bjp-t-sm); font-weight: 700; color: var(--bjp-field-ink); }
.bjp-field input, .bjp-field select, .bjp-field textarea {
  font-family: inherit; font-size: var(--bjp-t-sm);
  min-height: 46px; padding: .6rem .8rem;
  background: var(--bjp-field-bg); color: var(--bjp-field-ink);
  border: 1px solid var(--bjp-field-line); border-radius: var(--bjp-r-sm);
  width: 100%;
}
.bjp-field input::placeholder, .bjp-field textarea::placeholder { color: var(--bjp-field-ph); }
.bjp-field select { appearance: none; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.bjp-readout { display: flex; flex-direction: column; gap: var(--bjp-s-3); }
.bjp-readout-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bjp-s-4);
  padding-bottom: var(--bjp-s-3); border-bottom: 1px dashed var(--bjp-line); }
.bjp .bjp-readout-label { font-size: var(--bjp-t-sm); color: var(--bjp-ink-muted); }
.bjp .bjp-readout-value { font-family: var(--bjp-font-display); font-size: var(--bjp-t-lg); font-weight: 600; color: var(--bjp-ink);
  font-variant-numeric: tabular-nums; text-align: right; }
.bjp .bjp-readout-total .bjp-readout-value { color: var(--bjp-brass-deep); }
.bjp .bjp-note { font-size: var(--bjp-t-xs); color: var(--bjp-ink-muted); line-height: 1.7; }

.bjp-check-groups { display: grid; gap: var(--bjp-s-5); }
@media (min-width: 760px) { .bjp-check-groups { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.bjp-check-group-title { font-size: var(--bjp-t-md); margin-bottom: var(--bjp-s-3); }
.bjp-check { display: flex; align-items: flex-start; gap: var(--bjp-s-3); padding: .45rem 0; cursor: pointer; }
.bjp-check input { width: 20px; height: 20px; flex: none; margin-top: .2em; accent-color: var(--bjp-navy-deep); }
.bjp .bjp-check span { font-size: var(--bjp-t-sm); color: var(--bjp-ink-muted); }
.bjp .bjp-check input:checked + span { color: var(--bjp-ink-muted); text-decoration: line-through; opacity: .72; }
.bjp-check-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--bjp-s-3); margin-bottom: var(--bjp-s-5); }
.bjp .bjp-check-count { font-family: var(--bjp-font-display); font-size: var(--bjp-t-lg); font-weight: 600; color: var(--bjp-ink); }

/* --------------------------------------------------------------------------
   13. JUMP NAV ("Jump to a section")
   -------------------------------------------------------------------------- */
.bjp-jump { background: var(--bjp-bg-elevated); border: 1px solid var(--bjp-line); border-radius: var(--bjp-r-md); padding: var(--bjp-s-5); }
.bjp .bjp-jump-title { font-size: var(--bjp-t-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bjp-brass-deep); margin-bottom: var(--bjp-s-3); }
.bjp-jump-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bjp-s-2); }
@media (min-width: 760px) { .bjp-jump-list { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--bjp-s-5); } }
.bjp .bjp-jump-list a { font-size: var(--bjp-t-sm); color: var(--bjp-navy); text-decoration: none; display: inline-flex; gap: .45em; }
.bjp .bjp-jump-list a:hover { color: var(--bjp-brass-deep); text-decoration: underline; }
.bjp .bjp-jump-list i { color: var(--bjp-brass); flex: none; margin-top: .25em; font-size: .9em; }

/* --------------------------------------------------------------------------
   14. CALLOUTS
   -------------------------------------------------------------------------- */
.bjp-callout {
  display: flex; gap: var(--bjp-s-4);
  padding: var(--bjp-s-5);
  border-radius: var(--bjp-r-md);
  border: 1px solid var(--bjp-line);
  background: var(--bjp-bg-elevated);
}
.bjp-callout i { flex: none; font-size: 1.35rem; margin-top: .1em; }
.bjp-callout-title { font-family: var(--bjp-font-body); font-weight: 800; font-size: var(--bjp-t-sm);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--bjp-s-2); }
.bjp .bjp-callout p { font-size: var(--bjp-t-sm); color: var(--bjp-ink-muted); line-height: 1.75; }
.bjp-callout--source { border-left: 3px solid var(--bjp-good); }
.bjp-callout--source i, .bjp-callout--source .bjp-callout-title { color: var(--bjp-good); }
.bjp-callout--myth { border-left: 3px solid var(--bjp-warn-deep); background: var(--bjp-warn-tint); }
.bjp-callout--myth i, .bjp-callout--myth .bjp-callout-title { color: var(--bjp-warn-deep); }
.bjp-callout--disclosure { border-left: 3px solid var(--bjp-brass); }
.bjp-callout--disclosure i, .bjp-callout--disclosure .bjp-callout-title { color: var(--bjp-brass-deep); }

/* --------------------------------------------------------------------------
   15. CTA BAND
   -------------------------------------------------------------------------- */
.bjp .bjp-cta { background: var(--bjp-navy-deep); color: var(--bjp-ink-onDark); position: relative; overflow: hidden; }
.bjp-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1000px 380px at 15% 0%, rgba(184,130,60,.18), transparent 62%);
}
.bjp-cta-inner { position: relative; display: flex; flex-direction: column; gap: var(--bjp-s-4); max-width: 44rem; }
.bjp .bjp-cta-title { font-size: var(--bjp-t-2xl); color: #FFFFFF; }
.bjp .bjp-cta-text { color: var(--bjp-ink-onDark-mut); font-size: var(--bjp-t-md); }
.bjp-cta-actions { display: flex; flex-wrap: wrap; gap: var(--bjp-s-3); margin-top: var(--bjp-s-2); }
.bjp .bjp-cta-fine { font-size: var(--bjp-t-xs); color: var(--bjp-ink-onDark-mut); line-height: 1.7; margin-top: var(--bjp-s-2); }

/* --------------------------------------------------------------------------
   16. POST / ARCHIVE
   -------------------------------------------------------------------------- */
.bjp .bjp-postmeta { display: flex; flex-wrap: wrap; gap: var(--bjp-s-3); align-items: center;
  font-size: var(--bjp-t-xs); color: var(--bjp-ink-muted); }
.bjp .bjp-cat-chip {
  font-size: var(--bjp-t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: var(--bjp-r-pill);
  background: var(--bjp-chip-bg); color: var(--bjp-chip-ink); text-decoration: none;
}
.bjp .bjp-cat-chip:hover { background: var(--bjp-brass-tint); color: var(--bjp-brass-deep); }
.bjp-pagination { display: flex; flex-wrap: wrap; gap: var(--bjp-s-2); justify-content: center; margin-top: var(--bjp-s-8); }
.bjp .bjp-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .7rem; border-radius: var(--bjp-r-sm);
  background: var(--bjp-bg-elevated); border: 1px solid var(--bjp-line);
  color: var(--bjp-ink); text-decoration: none; font-weight: 650; font-size: var(--bjp-t-sm);
}
.bjp-pagination .page-numbers:hover { border-color: var(--bjp-brass); }
.bjp .bjp-pagination .page-numbers.current { background: var(--bjp-navy-deep); color: #FFFFFF; border-color: var(--bjp-navy-deep); }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.bjp .bjp-footer { background: var(--bjp-navy-deep); color: var(--bjp-ink-onDark-mut); }
.bjp-footer-top { padding-block: var(--bjp-s-6) var(--bjp-s-5); }
/* The footer carries far more links than a content section, so it gets a
   wider measure than the 1180px article container. At six columns that is
   ~227px per track instead of ~180px, which is the difference between most
   page titles fitting on one line and nearly all of them wrapping onto two. */
@media (min-width: 1440px) { .bjp-footer .bjp-wrap { max-width: 1360px; } }
.bjp .bjp-footer h2, .bjp .bjp-footer h3 { color: #FFFFFF; }

/* ---- Identity band ------------------------------------------------------
   Brand, the standing disclosure and the contact details sit side by side in
   one short band. Previously they stacked down a single first column, which
   made that column taller than the whole link grid beside it. */
.bjp-footer-band { display: grid; gap: var(--bjp-s-4); }
@media (min-width: 760px)  { .bjp-footer-band { grid-template-columns: 1fr 1fr; gap: var(--bjp-s-5); } }
@media (min-width: 1100px) {
  .bjp-footer-band { grid-template-columns: minmax(0,1.05fr) minmax(0,1.2fr) minmax(0,.85fr);
                     gap: var(--bjp-s-6); align-items: start; }
}
.bjp-footer-brand { display: flex; flex-direction: column; gap: var(--bjp-s-3); }
.bjp .bjp-footer-blurb { font-size: var(--bjp-t-sm); line-height: 1.6; color: var(--bjp-ink-onDark-mut); }

.bjp .bjp-footer-disclosure {
  border: 1px solid rgba(232,188,110,.42); border-left: 3px solid var(--bjp-brass-onDark);
  border-radius: var(--bjp-r-sm); padding: var(--bjp-s-4);
  font-size: var(--bjp-t-sm); line-height: 1.6; color: var(--bjp-ink-onDark);
  background: rgba(232,188,110,.08);
}

/* ---- Link columns — one row, never wrapping onto a second -------------- */
.bjp-footer-links {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  margin-top: var(--bjp-s-6);
  padding-top: var(--bjp-s-5);
  border-top: 1px solid rgba(237,241,243,.14);
}
/* Deliberately no intermediate column count: three columns of six blocks is
   two tall rows, which is worse than a stack of folded rows. */
/* Six tracks for six blocks. The previous five-track grid held six children,
   so the sixth dropped to a row of its own beside four empty tracks. */
@media (min-width: 1100px) {
  /* A generous column gap matters more here than elsewhere: these labels are
     full page titles that fill their track, and a 16px gutter left adjacent
     columns reading as one run of text. */
  .bjp-footer-links { grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--bjp-s-5) var(--bjp-s-6); }
}

.bjp .bjp-footcol-title {
  font-family: var(--bjp-font-body); font-size: var(--bjp-t-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bjp-brass-onDark);
  margin-bottom: var(--bjp-s-3);
}

/* Collapsible link groups. Below 700px the summary is a real control; above
   it the group is permanently open and the summary reads as a column title. */
.bjp-footcol { min-width: 0; }
.bjp-footcol > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--bjp-s-3);
  padding-block: var(--bjp-s-2);
  min-height: 40px;
}
.bjp-footcol > summary::-webkit-details-marker { display: none; }
.bjp-footcol + .bjp-footcol { border-top: 1px solid rgba(237,241,243,.10); }
.bjp-footcol-chevron { color: var(--bjp-ink-onDark-mut); transition: transform .2s ease; }
.bjp-footcol[open] .bjp-footcol-chevron { transform: rotate(180deg); }
.bjp-footcol[open] > summary { margin-bottom: var(--bjp-s-2); }
@media (prefers-reduced-motion: reduce) { .bjp-footcol-chevron { transition: none; } }

@media (min-width: 1100px) {
  /* A column heading, not a control: no pointer, no chevron, no divider. */
  .bjp-footcol > summary { cursor: default; pointer-events: none; padding-block: 0; min-height: 0; margin-bottom: var(--bjp-s-3); }
  .bjp-footcol[open] > summary { margin-bottom: var(--bjp-s-3); }
  .bjp-footcol-chevron { display: none; }
  .bjp-footcol + .bjp-footcol { border-top: 0; }
}
.bjp-footlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bjp .bjp-footlist a {
  color: var(--bjp-ink-onDark-mut); text-decoration: none;
  font-size: 0.78125rem; line-height: 1.4;
}
.bjp .bjp-footlist a:hover { color: var(--bjp-brass-onDark); text-decoration: underline; }

/* ---- Bottom bar --------------------------------------------------------
   The utility links live here inline. "Information" repeated the Company
   column verbatim, so as a full column it cost height and said nothing new. */
.bjp-footer-bottom { border-top: 1px solid rgba(237,241,243,.16); padding-block: var(--bjp-s-4); }
.bjp-footer-bottom-inner { display: flex; flex-direction: column; gap: var(--bjp-s-3); }
@media (min-width: 900px) {
  .bjp-footer-bottom-inner { flex-direction: row; flex-wrap: wrap; align-items: center;
                             justify-content: space-between; gap: var(--bjp-s-4); }
}
.bjp-footer-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.bjp .bjp-footer-inline a { font-size: var(--bjp-t-xs); color: var(--bjp-ink-onDark-mut); text-decoration: none; }
.bjp .bjp-footer-inline a:hover { color: var(--bjp-brass-onDark); text-decoration: underline; }
/* Measured against the footer navy: .34 gave 2.8:1. .55 gives 5.18:1, which
   clears AA with margin while still reading as a divider rather than a link. */
.bjp-footer-sep { color: rgba(237,241,243,.55); font-size: var(--bjp-t-xs); }
/* "Explore & verify:" is a visible label, not a divider — it takes the muted
   ink token (9.28:1 light / 8.34:1 dark on this ground). */
.bjp .bjp-footer-label { color: var(--bjp-ink-onDark-mut); font-size: var(--bjp-t-xs); }
.bjp .bjp-footer-legal { font-size: var(--bjp-t-xs); color: var(--bjp-ink-onDark-mut); line-height: 1.6; margin: 0; max-width: 46rem; }

.bjp .bjp-totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bjp-navy-deep); color: #FFFFFF; border: 1px solid rgba(255,255,255,.22);
  cursor: pointer; box-shadow: var(--bjp-shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, bottom .25s ease;
}
.bjp-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .bjp-totop { transition: none; } }

/* --------------------------------------------------------------------------
   18. UTILITIES
   -------------------------------------------------------------------------- */
.bjp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.bjp-center { text-align: center; }
.bjp-flex { display: flex; }
.bjp-wrap-gap { flex-wrap: wrap; gap: var(--bjp-s-3); }

/* Scroll reveal — opt-in per section, respects reduced motion. */
.bjp-reveal { opacity: 0; transform: translateY(22px); }
.bjp-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.16,.84,.44,1); }
@media (prefers-reduced-motion: reduce) { .bjp-reveal { opacity: 1 !important; transform: none !important; } }

/* ==========================================================================
   19. IMAGERY — figures, credits, bento, mosaic, editorial split
   --------------------------------------------------------------------------
   Added for the front-page rework. Every rule here is scoped to its own
   component class; nothing restyles a bare element or reaches outside the
   block it names. All colours reuse tokens already censused in §1.
   ========================================================================== */

/* ---- Figure + credit --------------------------------------------------- */
/* The credit sits on a bottom scrim rather than a floating pill, so it stops
   covering the subject of the photograph while staying always-visible
   (CC BY attribution has to remain legible, not hover-only). */
.bjp-figure { position: relative; overflow: hidden; margin: 0; background: var(--bjp-surface-alt); }
.bjp-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bjp-figure--r43  { aspect-ratio: 4 / 3; }
.bjp-figure--r169 { aspect-ratio: 16 / 9; }
.bjp-figure--r32  { aspect-ratio: 3 / 2; }
.bjp-figure--r11  { aspect-ratio: 1 / 1; }
.bjp-figure--r45  { aspect-ratio: 4 / 5; }
.bjp-figure--fill { height: 100%; }

.bjp .bjp-figcredit {
  position: absolute; inset-inline: 0; bottom: 0; margin: 0;
  padding: 1.6rem 0.85rem 0.5rem;
  font-size: 0.6875rem; line-height: 1.35; color: rgba(255,255,255,.88);
  background: linear-gradient(to top, rgba(6,18,26,.88) 0%, rgba(6,18,26,.62) 45%, rgba(6,18,26,0) 100%);
  pointer-events: none;
}
.bjp .bjp-figcredit a { color: rgba(255,255,255,.88); text-decoration: underline; pointer-events: auto; }
.bjp .bjp-figcredit a:hover { color: var(--bjp-brass-onDark); }

/* Zoom on hover, only where the card is a link. */
.bjp-figure--zoom img { transition: transform .55s cubic-bezier(.16,.84,.44,1); }
.bjp-card--hover:hover .bjp-figure--zoom img,
a:hover > .bjp-figure--zoom img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .bjp-figure--zoom img { transition: none; }
  .bjp-card--hover:hover .bjp-figure--zoom img, a:hover > .bjp-figure--zoom img { transform: none; }
}

/* ---- Bento grid — one feature tile plus a satellite grid ---------------- */
.bjp-bento { display: grid; gap: var(--bjp-s-4); grid-template-columns: 1fr; }
@media (min-width: 680px)  { .bjp-bento { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) {
  /* A six-column track: the feature takes four columns over two rows, and the
     satellites divide the remainder without leaving a hole in the last row.
     Item counts are declared on the container so each case can tile exactly. */
  .bjp-bento { grid-template-columns: repeat(6, minmax(0,1fr)); grid-auto-rows: minmax(198px, auto); }
  .bjp-bento > *            { grid-column: span 2; }
  .bjp-bento > .is-feature  { grid-column: span 4; grid-row: span 2; }

  /* feature + 2 satellites stacked beside it, then a full-width pair */
  .bjp-bento[data-count="5"] > :nth-child(4),
  .bjp-bento[data-count="5"] > :nth-child(5) { grid-column: span 3; }

  /* feature + 2 beside, then one full-width closer */
  .bjp-bento[data-count="4"] > :nth-child(4) { grid-column: span 6; }

  /* feature + 1 beside: let it fill its own column block */
  .bjp-bento[data-count="3"] > :nth-child(2),
  .bjp-bento[data-count="3"] > :nth-child(3) { grid-column: span 2; }
  .bjp-bento[data-count="3"] > :nth-child(3) { grid-column: span 6; }
}

/* A tile is a link whose whole surface is the target. */
.bjp .bjp-tile {
  position: relative; display: flex; flex-direction: column;
  min-height: 210px; border-radius: var(--bjp-r-md); overflow: hidden;
  border: 1px solid var(--bjp-line);
  background: var(--bjp-navy-deep);
  text-decoration: none; color: var(--bjp-ink-onDark);
  box-shadow: var(--bjp-shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.bjp-tile:hover { box-shadow: var(--bjp-shadow-md); transform: translateY(-3px); border-color: var(--bjp-brass); }
@media (prefers-reduced-motion: reduce) { .bjp-tile { transition: none; } .bjp-tile:hover { transform: none; } }
.bjp-tile-media { position: absolute; inset: 0; }
.bjp-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.16,.84,.44,1); }
.bjp-tile:hover .bjp-tile-media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .bjp-tile-media img, .bjp-tile:hover .bjp-tile-media img { transition: none; transform: none; } }
/* Scrim carries the text; strong at the foot where the copy sits. */
.bjp-tile-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,18,26,.93) 0%, rgba(6,18,26,.78) 32%, rgba(6,18,26,.34) 62%, rgba(6,18,26,.18) 100%);
}
.bjp-tile-body {
  position: relative; margin-top: auto;
  padding: var(--bjp-s-5); display: flex; flex-direction: column; gap: var(--bjp-s-2);
}
.bjp .bjp-tile-title { font-size: var(--bjp-t-lg); color: #FFFFFF; }
.bjp-bento > .is-feature .bjp-tile-title { font-size: var(--bjp-t-xl); }
.bjp .bjp-tile-text { font-size: var(--bjp-t-sm); color: rgba(255,255,255,.86); line-height: 1.6; }
.bjp .bjp-tile-cta {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--bjp-t-sm); font-weight: 700; color: var(--bjp-brass-onDark);
}
.bjp-tile-cta i { transition: transform .2s ease; }
.bjp-tile:hover .bjp-tile-cta i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .bjp-tile-cta i { transition: none; } }
.bjp .bjp-tile-credit {
  position: absolute; top: var(--bjp-s-3); right: var(--bjp-s-3);
  font-size: 0.625rem; line-height: 1.3; color: rgba(255,255,255,.78);
  max-width: 58%; text-align: right; pointer-events: none;
  text-shadow: 0 1px 3px rgba(6,18,26,.9);
}

/* ---- Editorial split — image column beside a content column ------------- */
.bjp-split { display: grid; gap: var(--bjp-s-6); align-items: start; }
@media (min-width: 900px) {
  .bjp-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--bjp-s-8); }
  .bjp-split--flip > .bjp-split-media { order: 2; }
  .bjp-split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Tools: the interactive panel needs the wider half or its tab row wraps. */
  .bjp-split--panel { grid-template-columns: minmax(0, 1fr) minmax(0, 0.74fr); gap: var(--bjp-s-6); }
  .bjp-split--panel > .bjp-split-media { position: sticky; top: calc(var(--bjp-header-h) + 20px); }
}
.bjp-split-media { display: grid; gap: var(--bjp-s-4); }
.bjp-split-media .bjp-figure { border-radius: var(--bjp-r-md); box-shadow: var(--bjp-shadow-md); }
/* Two stacked plates, the second inset — reads as a contact sheet, not a slab. */
.bjp-split-media--stack { grid-template-columns: repeat(6, 1fr); }
.bjp-split-media--stack > :first-child { grid-column: 1 / 6; }
.bjp-split-media--stack > :last-child  { grid-column: 3 / 7; margin-top: calc(var(--bjp-s-4) * -1); }
.bjp-split-media--stack > :only-child  { grid-column: 1 / 7; margin-top: 0; }

/* ---- Mosaic gallery ---------------------------------------------------- */
.bjp-mosaic { display: grid; gap: var(--bjp-s-3); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 760px)  { .bjp-mosaic { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1060px) {
  /* Rows are a fixed height so a tall tile is exactly two of them. The span
     pattern is chosen in PHP per item count, so the block always closes on a
     straight edge instead of leaving a half-empty trailing row. */
  .bjp-mosaic { grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 186px; }
  .bjp-mosaic > * { grid-row: span 1; min-height: 0; }
  .bjp-mosaic > .is-tall { grid-row: span 2; }
  .bjp-mosaic > .is-wide { grid-column: span 2; }
}
.bjp-mosaic .bjp-figure {
  border-radius: var(--bjp-r-sm); height: 100%; aspect-ratio: auto;
  border: 1px solid var(--bjp-line);
}
@media (max-width: 1059px) { .bjp-mosaic .bjp-figure { aspect-ratio: 4 / 3; } }

/* ---- Thumbnail link list ----------------------------------------------- */
.bjp .bjp-thumbcard {
  display: grid; grid-template-columns: 88px minmax(0,1fr); gap: var(--bjp-s-4);
  align-items: center; padding: var(--bjp-s-3);
  background: var(--bjp-bg-elevated); border: 1px solid var(--bjp-line);
  border-radius: var(--bjp-r-md); text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
@media (min-width: 560px) { .bjp-thumbcard { grid-template-columns: 108px minmax(0,1fr); } }
.bjp-thumbcard:hover { border-color: var(--bjp-brass); box-shadow: var(--bjp-shadow-sm); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .bjp-thumbcard { transition: none; } .bjp-thumbcard:hover { transform: none; } }
.bjp-thumbcard .bjp-figure { border-radius: var(--bjp-r-sm); }
.bjp .bjp-thumbcard-title { font-size: var(--bjp-t-md); color: var(--bjp-ink); margin-bottom: var(--bjp-s-1); }
.bjp .bjp-thumbcard:hover .bjp-thumbcard-title { color: var(--bjp-brass-deep); }
.bjp .bjp-thumbcard-text { font-size: var(--bjp-t-sm); color: var(--bjp-ink-muted); line-height: 1.55; }

/* ---- Photographic CTA band --------------------------------------------- */
.bjp-cta--photo { position: relative; }
.bjp-cta--photo .bjp-cta-photo-media { position: absolute; inset: 0; }
.bjp-cta--photo .bjp-cta-photo-media img { width: 100%; height: 100%; object-fit: cover; }
.bjp-cta--photo .bjp-cta-photo-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,18,26,.95) 0%, rgba(6,18,26,.88) 46%, rgba(6,18,26,.62) 100%),
              linear-gradient(180deg, rgba(6,18,26,.45) 0%, rgba(6,18,26,.35) 100%);
}
.bjp-cta--photo::after { display: none; }

/* ---- Pull-quote / lead figure inside prose ------------------------------ */
.bjp-leadfig { margin: 0 0 var(--bjp-s-7); border-radius: var(--bjp-r-md); overflow: hidden; box-shadow: var(--bjp-shadow-md); }

/* ---- Journal: degrade gracefully when there are few posts --------------- */
.bjp-journal-grid { display: grid; gap: var(--bjp-s-5); }
@media (min-width: 700px)  { .bjp-journal-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px)  { .bjp-journal-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* A single post gets a wide editorial card instead of one lonely column. */
@media (min-width: 760px) {
  .bjp-journal-grid[data-count="1"] > .bjp-card { grid-template-columns: 1fr 1fr; display: grid; }
  .bjp-journal-grid[data-count="1"] .bjp-card-media { aspect-ratio: auto; min-height: 260px; }
}

/* ---- Section head with an action on the right -------------------------- */
.bjp-sechead--row {
  max-width: none; flex-direction: row; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between; gap: var(--bjp-s-4);
}
.bjp-sechead-main { display: flex; flex-direction: column; gap: var(--bjp-s-3); max-width: 44rem; }

/* ---- Tighter rhythm: consecutive same-ground sections should not stack
        two full paddings into one dead gap. ---------------------------- */
.bjp-section + .bjp-section--flush { padding-top: 0; }


/* ---- 20. RHYTHM -------------------------------------------------------- */
/* Two full section paddings meeting on the same ground read as dead space.
   Where a block is followed by another on the same plane, pull them together. */
.bjp-section--elevated + .bjp-section--elevated,
.bjp-section--soft + .bjp-section--soft { padding-top: 0; }
.bjp-section > .bjp-wrap > .bjp-sechead:last-child { margin-bottom: 0; }

/* ---- 21. ON-DARK CREDIT ------------------------------------------------ */
/* The hero credit sits on the dark hero ground, where the light-ground ink
   token has no contrast. Its own variant, rather than a global override. */
.bjp .bjp-credit--onDark { color: rgba(237, 241, 243, .82); }
.bjp .bjp-credit--onDark a { color: rgba(237, 241, 243, .82); }
.bjp .bjp-credit--onDark a:hover { color: var(--bjp-brass-onDark); }

/* ---- 22. NARROW HEADER ------------------------------------------------- */
/* At 320-360px the brand block plus the action cluster exceeded the viewport
   and pushed the document into horizontal scroll. The tagline is decorative,
   so it is the part that yields — the wordmark and controls stay intact.
   Scoped to the header; no global layout rule is involved. */
@media (max-width: 400px) {
  /* Scoped to the header: this was a fix for the header's action cluster
     overflowing, and it should not reach the footer brand, which has room
     for its tagline and benefits from the context. */
  .bjp .bjp-header .bjp-brand-tag { display: none; }
  .bjp .bjp-header-inner { gap: var(--bjp-s-2); }
  .bjp .bjp-header .bjp-brand { gap: var(--bjp-s-2); }
  .bjp .bjp-header-actions { gap: 4px; }
  .bjp .bjp-header .bjp-brand-name { font-size: 1.0625rem; }
}
@media (max-width: 340px) {
  /* Last resort at the very bottom of the range: the colour toggle is a
     convenience and the drawer still reaches every destination. */
  .bjp .bjp-theme-toggle { display: none; }
}

/* ==========================================================================
   23. LONGFORM — the complete-guide reader
   --------------------------------------------------------------------------
   A 14-section read was previously a single narrow column with a ragged
   two-up jump list, which sat oddly beside the card- and grid-based sections
   around it. It now uses the same split language as the method and tools
   blocks: a sticky index rail beside a numbered article column.

   Colours reuse tokens already censused in §1; no new values are introduced.
   ========================================================================== */

.bjp-longform { display: grid; gap: var(--bjp-s-6); align-items: start; }
@media (min-width: 1000px) {
  .bjp-longform { grid-template-columns: minmax(0, 252px) minmax(0, 1fr); gap: var(--bjp-s-8); }
}

/* ---- Index rail -------------------------------------------------------- */
.bjp-toc {
  background: var(--bjp-bg-elevated);
  border: 1px solid var(--bjp-line);
  border-radius: var(--bjp-r-md);
  padding: var(--bjp-s-5);
  box-shadow: var(--bjp-shadow-sm);
}
@media (min-width: 1000px) {
  .bjp-toc {
    position: sticky; top: calc(var(--bjp-header-h) + 20px);
    max-height: calc(100vh - var(--bjp-header-h) - 40px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}
.bjp .bjp-toc-title {
  font-family: var(--bjp-font-body);
  font-size: var(--bjp-t-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bjp-brass-deep);
  margin: 0 0 var(--bjp-s-4);
}
.bjp-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: bjptoc; }
.bjp-toc-item + .bjp-toc-item { margin-top: 2px; }
.bjp .bjp-toc-link {
  display: grid; grid-template-columns: 1.65em minmax(0, 1fr); gap: .5em;
  align-items: start;
  padding: .5rem .55rem;
  border-radius: var(--bjp-r-sm);
  font-size: .8125rem; line-height: 1.45;
  color: var(--bjp-ink-muted); text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bjp .bjp-toc-link:hover { background: var(--bjp-surface-soft); color: var(--bjp-nav-hover-ink); }
.bjp .bjp-toc-link.is-active {
  background: var(--bjp-surface-soft);
  color: var(--bjp-nav-hover-ink);
  border-left-color: var(--bjp-brass);
  font-weight: 650;
}
.bjp-toc-num {
  font-family: var(--bjp-font-display);
  font-variant-numeric: tabular-nums;
  font-size: .75rem; font-weight: 600;
  color: var(--bjp-brass-deep);
  padding-top: .08em;
}
.bjp .bjp-toc-link.is-active .bjp-toc-num { color: var(--bjp-brass-deep); }
@media (prefers-reduced-motion: reduce) { .bjp .bjp-toc-link { transition: none; } }

/* Mobile: the rail folds into a disclosure so it never eats the first screen. */
.bjp-toc-mobile > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--bjp-s-3);
}
.bjp-toc-mobile > summary::-webkit-details-marker { display: none; }
.bjp-toc-mobile[open] > summary { margin-bottom: var(--bjp-s-4); }
.bjp-toc-chevron { transition: transform .2s ease; color: var(--bjp-ink-muted); }
.bjp-toc-mobile[open] .bjp-toc-chevron { transform: rotate(180deg); }
@media (min-width: 1000px) {
  .bjp-toc-mobile > summary { display: none; }
  .bjp-toc-mobile[open] > summary { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .bjp-toc-chevron { transition: none; } }

/* ---- Article column ---------------------------------------------------- */
.bjp-article { max-width: 44rem; }
.bjp-article-lead { font-size: var(--bjp-t-md); line-height: 1.7; }
.bjp-article-sec + .bjp-article-sec {
  margin-top: var(--bjp-s-7);
  padding-top: var(--bjp-s-7);
  border-top: 1px solid var(--bjp-line);
}
.bjp-article-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bjp-s-3);
  align-items: baseline; margin-bottom: var(--bjp-s-4);
}
.bjp-article-num {
  font-family: var(--bjp-font-display);
  font-variant-numeric: tabular-nums;
  font-size: .8125rem; font-weight: 600;
  color: var(--bjp-brass-deep);
  padding-top: .35em;
  letter-spacing: .04em;
}
.bjp .bjp-article-title { font-size: var(--bjp-t-lg); margin: 0; }

/* Language chip — the guide genuinely runs bilingual sections; marking them
   is honest labelling, not decoration. Only set where the wording declares it. */
.bjp-lang-chip {
  display: inline-flex; align-items: center; gap: .35em;
  margin-left: .6em; vertical-align: middle;
  padding: .12rem .5rem; border-radius: var(--bjp-r-pill);
  font-family: var(--bjp-font-body);
  font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--bjp-chip-bg); color: var(--bjp-chip-ink);
  border: 1px solid var(--bjp-line);
  white-space: nowrap;
}

/* Anchor affordance: a quiet link mark that appears on hover/focus. */
.bjp .bjp-anchor-link {
  opacity: 0; margin-left: .4em; font-size: .8em;
  color: var(--bjp-brass-deep); text-decoration: none;
  transition: opacity .15s ease;
}
.bjp-article-sec:hover .bjp-anchor-link,
.bjp .bjp-anchor-link:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bjp .bjp-anchor-link { transition: none; } }

/* Lead figure sits flush with the article column. */
.bjp-article .bjp-leadfig { margin-bottom: var(--bjp-s-6); box-shadow: var(--bjp-shadow-sm); }

/* Foot of the read: back to the index. */
.bjp-article-foot {
  margin-top: var(--bjp-s-7); padding-top: var(--bjp-s-5);
  border-top: 1px solid var(--bjp-line);
  display: flex; flex-wrap: wrap; gap: var(--bjp-s-4); align-items: center; justify-content: space-between;
}

/* ==========================================================================
   24. FAQ — full-width split
   --------------------------------------------------------------------------
   The accordion previously sat in the narrow 760px measure while every
   neighbouring section used the full 1180px container, so it read as an
   indented block rather than part of the page. It now uses the same rail +
   content split as the longform reader: the heading and category filter sit
   in a sticky left column, the questions take the remaining width, and the
   answer measure stays readable instead of stretching across the container.

   Tokens are all pre-existing; no new colour values are introduced.
   ========================================================================== */

.bjp-faq-split { display: grid; gap: var(--bjp-s-6); align-items: start; }
@media (min-width: 1000px) {
  .bjp-faq-split { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--bjp-s-8); }
  .bjp-faq-aside { position: sticky; top: calc(var(--bjp-header-h) + 20px); }
}

.bjp-faq-aside .bjp-sechead { margin-bottom: var(--bjp-s-5); }

/* Category filter — a horizontal pill row on small screens, a vertical
   filter list once there is a column to put it in. */
.bjp-faq-nav { display: flex; flex-wrap: wrap; gap: var(--bjp-s-2); margin-bottom: 0; }
@media (min-width: 1000px) {
  .bjp-faq-nav { flex-direction: column; flex-wrap: nowrap; gap: 4px; align-items: stretch; }
  .bjp .bjp-faq-pill {
    justify-content: flex-start;
    width: 100%;
    border-radius: var(--bjp-r-sm);
    border-color: transparent;
    background: transparent;
    padding: .6rem .75rem;
    text-align: left;
  }
  .bjp .bjp-faq-pill:hover { background: var(--bjp-surface-soft); border-color: transparent; }
  .bjp .bjp-faq-pill.is-active {
    background: var(--bjp-surface-soft);
    color: var(--bjp-nav-hover-ink);
    border-color: transparent;
    box-shadow: inset 2px 0 0 0 var(--bjp-brass);
  }
  .bjp .bjp-faq-pill.is-active i { color: var(--bjp-brass-deep); }
  .bjp-faq-pill > span:first-of-type { flex: 1 1 auto; }
  .bjp-faq-count { margin-left: auto; }
}

/* The question column keeps a comfortable measure even in a wide container. */
.bjp-faq-main { max-width: 46rem; }

/* Accordion rows: tighter, with the marker aligned to the first line rather
   than centred, so a two-line question no longer looks lopsided. */
.bjp .bjp-qa > summary { align-items: flex-start; padding: var(--bjp-s-4) var(--bjp-s-5); }
.bjp .bjp-qa-sign { width: 28px; height: 28px; font-size: .9rem; margin-top: 1px; }
.bjp .bjp-qa:hover { border-color: var(--bjp-line-strong); }
.bjp .bjp-qa[open]:hover { border-color: var(--bjp-brass); }

/* Section foot: the updated stamp belongs to the block it describes, not to a
   bare strip of ground between two sections. */
.bjp-faq-foot {
  margin-top: var(--bjp-s-6);
  padding-top: var(--bjp-s-4);
  border-top: 1px solid var(--bjp-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--bjp-s-3);
}
.bjp-faq-foot .bjp-note { display: flex; align-items: center; gap: .5em; margin: 0; }


/* ---- 25. FOOTER ON SMALL SCREENS --------------------------------------
   The identity band and the utility row are the tallest parts once the link
   groups fold, so both are tightened rather than trimmed of content. */
@media (max-width: 699px) {
  .bjp-footer-top { padding-block: var(--bjp-s-5) var(--bjp-s-4); }
  .bjp .bjp-footer-disclosure { padding: var(--bjp-s-3); font-size: var(--bjp-t-xs); line-height: 1.55; }
  .bjp .bjp-footer-blurb { font-size: var(--bjp-t-xs); }
  .bjp-footer-links { margin-top: var(--bjp-s-4); padding-top: var(--bjp-s-3); }
  .bjp-footer-bottom { padding-block: var(--bjp-s-3); }
  .bjp-footer-inline { gap: .3rem .6rem; }
  .bjp-footer-bottom-inner .bjp-btn { align-self: flex-start; }
}

/* ==========================================================================
   26. INTERIOR PAGES — photography
   --------------------------------------------------------------------------
   Guide pages were a dark text header followed by a long text column. They
   now carry the images the source page itself uses: one behind the header,
   one leading the article, and one set into the body partway down.
   ========================================================================== */

/* ---- Photographic page header ----------------------------------------- */
.bjp-pagehead--photo { position: relative; }
.bjp-pagehead-media { position: absolute; inset: 0; }
.bjp-pagehead-media img { width: 100%; height: 100%; object-fit: cover; }
/* Two stops: heavy where the copy sits, lighter towards the open side. */
.bjp-pagehead-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,18,26,.95) 0%, rgba(6,18,26,.88) 46%, rgba(6,18,26,.60) 100%),
    linear-gradient(180deg, rgba(6,18,26,.50) 0%, rgba(6,18,26,.30) 50%, rgba(6,18,26,.72) 100%);
}
.bjp-pagehead--photo .bjp-pagehead-inner { position: relative; }
.bjp-pagehead--photo .bjp-pagehead-inner { padding-block: clamp(3rem, 2rem + 4.2vw, 5.25rem); }
.bjp-pagehead-credit {
  position: relative; margin: var(--bjp-s-4) 0 0;
  font-size: var(--bjp-t-xs); color: rgba(237,241,243,.82);
}
.bjp .bjp-pagehead-credit a { color: rgba(237,241,243,.82); text-decoration: underline; }
.bjp .bjp-pagehead-credit a:hover { color: var(--bjp-brass-onDark); }

/* ---- Figure set into an article section -------------------------------- */
.bjp-secfig { margin: var(--bjp-s-5) 0 0; }
.bjp-secfig .bjp-figure { border-radius: var(--bjp-r-md); box-shadow: var(--bjp-shadow-sm); }
/* Beyond the article measure on wide screens, so the picture reads as a break
   in the column rather than another block of the same width. */
@media (min-width: 1000px) {
  .bjp-secfig { margin-inline: calc(var(--bjp-s-6) * -1) 0; }
  .bjp-secfig .bjp-figure { border-radius: var(--bjp-r-md); }
}

/* ---- Key facts strip --------------------------------------------------- */
.bjp-keyfacts { display: grid; gap: var(--bjp-s-3); }
@media (min-width: 640px)  { .bjp-keyfacts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .bjp-keyfacts { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ==========================================================================
   27. BRAND LOGO
   --------------------------------------------------------------------------
   The logo is sized by height with width:auto, so any aspect ratio renders
   correctly. The markup used to hardcode 180x40, which stretched every logo
   that was not exactly that shape.
   ========================================================================== */
/* Must out-rank the base `.bjp img { height:auto }` (0,1,1), or the logo
   renders at its natural size — 3000px tall in the case that exposed this. */
.bjp .bjp-brand-logo { height: 38px; width: auto; max-width: 220px; object-fit: contain; display: block; }
@media (max-width: 400px) { .bjp .bjp-header .bjp-brand-logo { height: 32px; max-width: 160px; } }

/* The footer brand keeps its on-dark colours whether it renders a logo or
   the mark + wordmark, so the inline styles are no longer needed. */
.bjp .bjp-brand--footer .bjp-brand-name { color: #FFFFFF; }
.bjp .bjp-brand--footer .bjp-brand-tag  { color: var(--bjp-ink-onDark-mut); }
.bjp .bjp-brand--footer .bjp-brand-logo { height: 42px; max-width: 240px; }

/* --------------------------------------------------------------------------
   28. LEGACY CONTENT BLOCKS
   Wrappers written into post_content while bajoport-40m was the active theme,
   which supplied their CSS. Every published post still carries them, so they
   are styled here rather than edited out of 69 posts.
   -------------------------------------------------------------------------- */

/* The prose flow rule (`.bjp-prose > * + *`) reaches direct children only, so
   paragraphs one level down inside these wrappers kept the base `margin: 0`
   and ran together with no gap. :where() holds this at (0,2,0) so the prose
   h2/h3 rhythm at (0,2,1) still wins on headings. */
.bjp .bjp-prose :where(.bjp-depth, .jwu-related, .regal-aeo, .regal-faq, .regal-rail, .bjp2-sources) > * + * {
  margin-top: var(--bjp-s-4);
}

/* "Quick Answer" is the one legacy block carrying no inline styles of its own,
   so it flattened to bare text. Given the theme's own callout treatment. */
.bjp .bjp-prose .regal-aeo {
  padding: var(--bjp-s-5);
  border: 1px solid var(--bjp-line);
  border-left: 3px solid var(--bjp-brass);
  border-radius: var(--bjp-r-md);
  background: var(--bjp-bg-elevated);
}

/* The rest hardcode a light background in an inline style, which no stylesheet
   can override. Their text is pinned dark so dark mode does not paint the
   theme's cream ink onto a near-white box. */
.bjp .bjp-prose .regal-faq, .bjp .bjp-prose .regal-faq-item,
.bjp .bjp-prose .regal-rail, .bjp .bjp-prose .bjp2-sources { color: #101C24; }
.bjp .bjp-prose .regal-faq a, .bjp .bjp-prose .regal-faq-item a,
.bjp .bjp-prose .regal-rail a, .bjp .bjp-prose .bjp2-sources a { color: #0E3A50; }