/* ==========================================================================
   LEADERSHIP BY DESIGN — DESIGN SYSTEM v1.0
   Phase 0 of the rebuild. Governed by LBD_Website_Governing_Spec_v1-0.

   REPLACES 302 page-namespaced rules across 7,069 lines.
   The old stylesheet defined the same component up to ten times — lbd-fw-hero,
   lbd-key-hero, lbd-consult-hero, lbd-sem-hero, lbd-arch-hero, and so on, with
   near-identical values each time. Nothing governed what a component WAS, so
   every page invented its own. That is the CSS expression of the same root
   cause the content audit found.

   THE RULE: a component is defined once here. Page CSS is layout only —
   grid shape and section order. Page CSS never re-declares a component.

   NOT INCLUDED YET: the theme reset layer. That depends on the parent theme,
   which is an open question. See the note at the foot of this file.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   The existing :root block was sound and carries forward. Scales added.
   ========================================================================== */

:root{
  /* --- brand colour --- */
  --navy:            #1B3A5C;
  --navy-deep:       #112544;
  --navy-mid:        #214A78;
  --navy-shade:      #0D1F36;   /* wheel + portrait grounds */
  --navy-band:       #173a67;   /* the "deep" band */
  --gold:            #BA7517;
  --gold-light:      #D4891A;
  --gold-soft:       #D7A55B;
  --text:            #3D3D3A;
  --text-soft:       #6B6B67;
  --light:           #F4F2EE;
  --cream:           #FAF8F4;
  --rule:            #DEDBD4;
  --rule-warm:       #CFC8BC;
  --white:           #FFFFFF;
  --error:           #B42318;
  --error-bg:        #FEF3F2;

  /* --- alpha values, so translucency is a token not a magic number --- */
  --on-dark-strong:  rgba(255,255,255,.88);
  --on-dark:         rgba(255,255,255,.74);
  --on-dark-soft:    rgba(255,255,255,.60);
  --on-dark-faint:   rgba(255,255,255,.38);
  --hairline:        rgba(255,255,255,.08);
  --hairline-strong: rgba(255,255,255,.16);
  --gold-wash:       rgba(186,117,23,.08);

  /* --- type --- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --fs-micro:  .68rem;
  --fs-kicker: .70rem;
  --fs-small:  .82rem;
  --fs-body:   .98rem;
  --fs-lead:   1.04rem;
  --fs-quote:  1.15rem;
  --fs-h3:     clamp(1.25rem, 1.6vw, 1.55rem);
  --fs-h2:     clamp(1.6rem,  2.5vw, 2.6rem);
  --fs-h1:     clamp(2rem,    3.2vw, 3.5rem);
  --fs-h1-lg:  clamp(2.4rem,  4.2vw, 4.2rem);

  --lh-tight: 1.08;
  --lh-snug:  1.45;
  --lh-body:  1.85;

  --ls-caps: .12em;
  --ls-wide: .18em;

  /* --- space --- */
  --sp-1: .35rem;
  --sp-2: .65rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.4rem;
  --sp-8: clamp(4rem, 8vw, 7rem);

  /* --- layout --- */
  --shell:   1180px;
  --shell-w: 1440px;   /* header only */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --gutter-fixed: 48px;

  /* --- depth, motion, layering --- */
  --shadow-card: 0 14px 36px rgba(0,0,0,.11);
  --shadow-deep: 0 24px 60px rgba(0,0,0,.28);
  --shadow-book: 0 20px 52px rgba(0,0,0,.50);
  --ease: .2s ease;
  --ease-slow: .65s ease;

  --z-header:  900;
  --z-overlay: 9000;
  --z-modal:   9500;
  --z-lightbox:9990;
}

/* Reduced motion — one declaration, honoured everywhere. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--navy-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }

:where(a, button, input, select, textarea):focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}


/* ==========================================================================
   3. LAYOUT — shell and band
   Was: lbd-fw-shell, lbd-key-shell, lbd-consult-shell, lbd-sem-shell,
        lbd-arch-shell, lbd-books-shell, lbd-assess-shell, lbd-result-shell,
        lbd-contact-shell, lbd-home-wrap  →  ONE rule.
   ========================================================================== */

.lbd-shell{
  width: min(var(--shell), calc(100vw - var(--gutter-fixed)));
  margin-inline: auto;
}
.lbd-shell--wide{ width: min(var(--shell-w), calc(100vw - 40px)); }
.lbd-shell--center{ text-align: center; }

@media (max-width: 900px){
  .lbd-shell{ width: calc(100vw - 32px); }
}

/* Bands. Was five sets of four = twenty rules. */
.lbd-band{
  padding-block: var(--sp-7);
  border-bottom: 1px solid var(--hairline);
}
.lbd-band--deep    { background: var(--navy-band); }
.lbd-band--navy    { background: var(--navy-deep); }
.lbd-band--shade   { background: var(--navy-shade); }
.lbd-band--close   { background: var(--navy-band); }
.lbd-band--contrast{
  background: var(--light);
  color: var(--text);
  border-bottom-color: var(--rule);
}

/* Colour inheritance — set once on the band, not per element. */
.lbd-band:not(.lbd-band--contrast){ color: var(--on-dark); }
.lbd-band:not(.lbd-band--contrast) h2,
.lbd-band:not(.lbd-band--contrast) h3{ color: var(--white); }
.lbd-band--contrast h2,
.lbd-band--contrast h3{ color: var(--navy); }


/* ==========================================================================
   4. TYPE COMPONENTS
   ========================================================================== */

.lbd-kicker{
  display: inline-block;
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}

h1, h2, h3, .lbd-display{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
}
h1{ font-size: var(--fs-h1); max-width: 20ch; }
h1.lbd-h1--lg{ font-size: var(--fs-h1-lg); }
h2{ font-size: var(--fs-h2); max-width: 26ch; }
h3{ font-size: var(--fs-h3); }

/* Split headings. Was lbd-XX-h-white / -h-navy / -h-gold across eight
   namespaces = twenty-four rules. */
.lbd-h-white{ color: var(--white); }
.lbd-h-navy { color: var(--navy); }
.lbd-h-gold { color: var(--gold); font-style: italic; }
.lbd-band--contrast .lbd-h-white{ color: var(--navy); }

p{ max-width: 68ch; margin: 0 0 var(--sp-3); }
.lbd-lead{ font-size: var(--fs-lead); }
.lbd-note{ font-size: var(--fs-small); color: var(--text-soft); display: block; }
.lbd-band:not(.lbd-band--contrast) .lbd-note{ color: var(--on-dark-faint); }
.lbd-micro{
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold);
}


/* ==========================================================================
   5. EMPHASIS COMPONENTS
   ========================================================================== */

/* Callout. Was defined eight times. */
.lbd-callout{
  margin-block: var(--sp-4) var(--sp-3);
  padding: 1.35rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: var(--gold-wash);
  max-width: 68ch;
}
.lbd-callout p{
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: var(--lh-snug);
  color: var(--on-dark-strong);
}
/* Same rule as the list: on a light band the dark-ground colour vanishes. */
.lbd-band--contrast .lbd-callout p,
.lbd-band--light .lbd-callout p{ color: var(--navy); }
.lbd-band--contrast .lbd-callout p{ color: var(--navy); }

/* Statement — the large italic gold assertions. */
.lbd-statement{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.25;
  color: var(--gold);
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
}

/* Pull quote — larger, no background. */
.lbd-pullquote{
  margin-block: var(--sp-5);
  padding: 1.25rem 0 1.25rem 1.75rem;
  border-left: 3px solid var(--gold);
}
.lbd-pullquote p{
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.28;
  color: var(--gold);
}

/* Stacked list with gold rules — result mode lists, inclusions, arcs. */
.lbd-stack{ display: grid; gap: .7rem; margin-top: var(--sp-4); max-width: 68ch; }
.lbd-stack__item{
  padding: .9rem 1rem;
  border-left: 2px solid var(--gold);
  background: var(--gold-wash);
  color: var(--on-dark-strong);
  line-height: 1.6;
}
.lbd-band--contrast .lbd-stack__item{ color: var(--text); }

/* Rule-separated list — governing laws, seminar arc. */
.lbd-list{ display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.lbd-list__item{ padding-bottom: .9rem; border-bottom: 1px solid var(--hairline); }
.lbd-list__item:last-child{ border-bottom: 0; padding-bottom: 0; }
.lbd-list__label{
  display: inline-block;
  margin-right: .55rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold);
}
.lbd-list__title{ color: var(--white); font-weight: 600; }
.lbd-list__desc{ color: var(--on-dark); }
/* On a light band the dark-ground colours are invisible. The band sets the
   ground, so the list follows it rather than assuming navy. */
.lbd-band--contrast .lbd-list__title,
.lbd-band--light .lbd-list__title{ color: var(--navy); }
.lbd-band--contrast .lbd-list__desc,
.lbd-band--light .lbd-list__desc{ color: var(--text); }

/* The misread paragraph — result pages, section five. */
.lbd-misread{
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
  line-height: 1.62;
}
@media (max-width: 640px){ .lbd-misread{ padding-left: 1rem; } }


/* ==========================================================================
   6. CARDS
   ========================================================================== */

.lbd-card-grid{
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.lbd-card-grid--flush{ gap: 0; border: 1px solid var(--rule); }

.lbd-card{
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 1.75rem 1.5rem;
  transition: transform var(--ease), box-shadow var(--ease);
}
.lbd-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.lbd-card p{ max-width: none; margin: 0; color: var(--text); }
.lbd-card__badge{
  display: inline-block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white);
  background: var(--gold);
  padding: .22rem .65rem;
}

/* Dark card — contact lanes. */
.lbd-card--dark{
  background: rgba(255,255,255,.04);
  border-color: var(--hairline-strong);
}
.lbd-card--dark p{ color: var(--on-dark); }

@media (max-width: 900px){ .lbd-card-grid{ grid-template-columns: 1fr; } }


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.lbd-button-row{
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: var(--sp-4);
}
.lbd-button,
.lbd-button--secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 2rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.lbd-button{ background: var(--gold); color: var(--white); border-color: var(--gold); }
.lbd-button:hover{ background: var(--gold-light); border-color: var(--gold-light); }

.lbd-button--secondary{
  background: transparent;
  color: var(--on-dark-strong);
  border-color: rgba(255,255,255,.30);
}
.lbd-button--secondary:hover{ border-color: var(--gold); color: var(--gold); }

/* On light grounds, the secondary flips. Was declared per page. */
.lbd-band--contrast .lbd-button--secondary,
.lbd-card .lbd-button--secondary{
  color: var(--navy);
  border-color: var(--rule-warm);
}
.lbd-button:active, .lbd-button--secondary:active{ transform: scale(.97); }


/* ==========================================================================
   8. FORMS
   ========================================================================== */

.lbd-form{ margin-top: var(--sp-4); max-width: 68ch; }
.lbd-form__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.lbd-form label{
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: .45rem;
}
.lbd-band--contrast .lbd-form label{ color: var(--navy); }
.lbd-form input,
.lbd-form select,
.lbd-form textarea{
  width: 100%;
  padding: .9rem .95rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--rule-warm);
}
.lbd-form__error{
  padding: .95rem 1rem;
  border-left: 3px solid var(--error);
  background: var(--error-bg);
  color: #7A271A;
  font-size: .95rem;
  line-height: 1.5;
}
@media (max-width: 900px){ .lbd-form__grid{ grid-template-columns: 1fr; } }


/* ==========================================================================
   9. MEDIA
   ========================================================================== */

.lbd-wheel{
  max-width: min(480px, 48vh);
  max-height: 48vh;
  width: calc(100vw - var(--gutter-fixed));
  margin: 0 auto var(--sp-3);
}
.lbd-book-cover img{ max-width: 200px; box-shadow: var(--shadow-book); border-radius: 2px; }
.lbd-book-cover--sm img{ max-width: 180px; }

.lbd-video{
  position: relative;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-deep);
  background: #091A33;
}
.lbd-video video{ display: block; width: 100%; height: auto; }

.lbd-avatar{ display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.lbd-avatar img{
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover; object-position: center 15%;
  border: 2px solid var(--gold);
  flex-shrink: 0;
}
.lbd-avatar__name{
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}

.lbd-portrait{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  border-bottom: 1px solid var(--hairline);
}
.lbd-portrait__text{
  background: var(--navy-shade);
  padding: clamp(3rem, 5vw, 5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.lbd-portrait__img{ overflow: hidden; min-height: 420px; }
.lbd-portrait__img img{ width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
@media (max-width: 720px){
  .lbd-portrait{ grid-template-columns: 1fr; }
  .lbd-portrait__img{ min-height: 360px; order: -1; }
}


/* ==========================================================================
   10. HERO + RINGS
   Was six hero definitions and six ring sets. One of each.
   ========================================================================== */

.lbd-hero{
  position: relative;
  overflow: hidden;
  padding: 6rem 0 4.25rem;
  background:
    radial-gradient(circle at 78% 30%, rgba(186,117,23,.10) 0%, rgba(186,117,23,0) 30%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-band) 100%);
  border-bottom: 1px solid var(--hairline);
  color: var(--on-dark);
}
.lbd-hero--full{ min-height: 100vh; display: flex; align-items: center; }
.lbd-hero__content{ position: relative; z-index: 2; }

.lbd-rings{
  position: absolute;
  right: -120px; top: 40px;
  width: 520px; height: 520px;
  opacity: .12;
  pointer-events: none;
}
.lbd-rings__ring{
  position: absolute; inset: 0; margin: auto;
  border-radius: 50%;
  border: 1px solid var(--gold);
  animation: lbd-ring-pulse 5.5s ease-out infinite;
}
.lbd-rings__ring:nth-child(1){ width:140px; height:140px; animation-delay: 0s; }
.lbd-rings__ring:nth-child(2){ width:240px; height:240px; animation-delay: 1s; }
.lbd-rings__ring:nth-child(3){ width:340px; height:340px; animation-delay: 2s; }
.lbd-rings__ring:nth-child(4){ width:440px; height:440px; animation-delay: 3s; }
.lbd-rings__ring:nth-child(5){ width:540px; height:540px; animation-delay: 4s; }

@keyframes lbd-ring-pulse{
  0%   { transform: scale(.88); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: scale(1.04); opacity: 0; }
}

/* Photographic hero — seminar. */
.lbd-hero--photo{ background-size: cover; background-position: center 60%; }
.lbd-hero--photo::before{
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(17,37,68,.80) 0%, rgba(17,37,68,.88) 100%);
}
.lbd-hero--photo .lbd-shell{ position: relative; z-index: 2; }

@media (max-width: 900px){
  .lbd-hero{ padding: 5rem 0 3.5rem; }
  .lbd-rings{ width: 320px; height: 320px; right: -80px; top: 70px; }
  .lbd-rings__ring:nth-child(1){ width: 90px;  height: 90px;  }
  .lbd-rings__ring:nth-child(2){ width: 150px; height: 150px; }
  .lbd-rings__ring:nth-child(3){ width: 220px; height: 220px; }
  .lbd-rings__ring:nth-child(4){ width: 290px; height: 290px; }
  .lbd-rings__ring:nth-child(5){ width: 360px; height: 360px; }
}


/* ==========================================================================
   11. SCROLL REVEAL — failsafe gated
   Governing Spec M9. Content is visible by default and only hides once JS
   proves it is running by adding .lbd-js to <html>. A script failure can
   never blank a section.
   ========================================================================== */

html.lbd-js .lbd-reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
  transition-delay: var(--reveal-delay, 0s);
}
html.lbd-js .lbd-reveal.is-visible{ opacity: 1; transform: none; }


/* ==========================================================================
   12. UTILITIES
   ========================================================================== */

.lbd-sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lbd-stack-gap > * + *{ margin-top: var(--sp-3); }


/* ==========================================================================
   OPEN — resolve before this file is final
   ==========================================================================

   1. THEME RESET LAYER. Not written. It depends on the parent theme, which
      is unconfirmed. The old stylesheet carried 96 !important declarations
      overriding theme output, including on html and body. A child theme with
      real templates should make nearly all of them unnecessary.

   2. FONTS. The old stylesheet loaded Cormorant Garamond and Jost with an
      @import inside the CSS, which blocks rendering until the stylesheet and
      then the font CSS both resolve. Move to a preconnect plus stylesheet
      link in the head, or self-host. Recommend self-hosting — it removes a
      third-party dependency and a GDPR consideration.

   3. PAGE LAYOUT FILES. Each page gets a small layout file for grid shape
      and section order only. No page file may re-declare a component.
      Enforcement is by review, since CSS cannot enforce it.
   ========================================================================== */


/* ==========================================================================
   13. HEADER
   ========================================================================== */

.lbd-header{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(27,58,92,.97);
  border-bottom: 1px solid var(--hairline);
}
/* No backdrop-filter. It creates a stacking context that traps
   position:fixed descendants, which is why the previous mobile nav had to be
   injected into document.body to escape the header. */

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

.lbd-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: 1.1rem 0 .65rem;
}
.lbd-header__logo{
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--white);
  white-space: nowrap;
}
.lbd-header__logo span{ color: var(--gold); }

.lbd-nav__list{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.lbd-nav__list a{
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  transition: color var(--ease);
}
.lbd-nav__list a:hover{ color: var(--gold); }

/* The assessment CTA — the site-wide safety net, on every page. */
.lbd-nav__list .lbd-nav-cta > a,
.lbd-nav__list a.lbd-nav-cta{
  padding: .7rem 1.25rem;
  border: 1.5px solid var(--gold);
  color: var(--gold);
}
.lbd-nav__list .lbd-nav-cta > a:hover{ background: var(--gold); color: var(--white); }

@media (max-width: 1200px){
  .lbd-nav__list{ gap: 1rem; }
  .lbd-nav__list a{ font-size: .72rem; }
}

/* --- toggle --- */
.lbd-nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none; border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lbd-nav-toggle__bar{
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 1px;
  transform-origin: center;
  transition: transform var(--ease), opacity var(--ease), width var(--ease);
}
body.lbd-nav-open .lbd-nav-toggle__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.lbd-nav-open .lbd-nav-toggle__bar:nth-child(2){ opacity: 0; width: 0; }
body.lbd-nav-open .lbd-nav-toggle__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* --- mobile panel. A sibling toggle, not an injected overlay. --- */
@media (max-width: 960px){
  .lbd-nav-toggle{ display: flex; }

  .lbd-nav{
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem 3rem;
    background: rgba(17,37,68,.98);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ease), visibility var(--ease);
  }
  body.lbd-nav-open .lbd-nav{ opacity: 1; visibility: visible; }
  body.lbd-nav-open{ overflow: hidden; }

  .lbd-nav__list{
    flex-direction: column;
    gap: 0;
    width: 100%;
    white-space: normal;
  }
  .lbd-nav__list li{ width: 100%; }
  .lbd-nav__list a{
    display: block;
    width: 100%;
    padding: .9rem 1.5rem;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 400;
    color: rgba(255,255,255,.88);
    border-bottom: 1px solid var(--hairline);
  }
  .lbd-nav__list li:first-child a{ border-top: 1px solid var(--hairline); }
  .lbd-nav__list .lbd-nav-cta > a{
    width: auto;
    margin: 1.75rem auto 0;
    display: inline-block;
    padding: .9rem 2.5rem;
    border-bottom: 1.5px solid var(--gold);
  }
}


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.lbd-footer{
  background: var(--navy-shade);
  border-top: 1px solid rgba(186,117,23,.3);
}
.lbd-footer__main{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
  padding: 4rem 0 3rem;
}
.lbd-footer__logo{
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: .5rem;
}
.lbd-footer__logo span{ color: var(--gold); font-style: italic; }
.lbd-footer__premise{
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--on-dark-faint);
  margin-bottom: var(--sp-2);
}
.lbd-footer__postal{
  font-size: var(--fs-micro);
  color: rgba(255,255,255,.30);
  letter-spacing: .02em;
  text-transform: none;
}
.lbd-footer h4{
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin: 0 0 var(--sp-3);
}
.lbd-footer__list{ list-style: none; margin: 0; padding: 0; }
.lbd-footer__list li{ margin-bottom: .45rem; }
.lbd-footer__list a,
.lbd-footer__cta p{ font-size: var(--fs-small); color: rgba(255,255,255,.65); }
.lbd-footer__list a:hover{ color: var(--gold); }
.lbd-footer__cta p{ line-height: 1.6; margin-bottom: var(--sp-3); }
.lbd-footer__cta .lbd-button{ font-size: .72rem; padding: .7rem 1.5rem; white-space: nowrap; }

.lbd-footer__bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: 1.25rem 0;
  border-top: 1px solid var(--hairline);
}
.lbd-footer__bottom p{ font-size: var(--fs-micro); color: rgba(255,255,255,.30); margin: 0; max-width: none; }
.lbd-footer__bottom a{ color: rgba(255,255,255,.40); }
.lbd-footer__bottom a:hover{ color: var(--gold); }

@media (max-width: 768px){
  .lbd-footer__main{ grid-template-columns: 1fr; gap: var(--sp-5); padding: 2.5rem 0 2rem; }
  .lbd-footer__bottom{ flex-direction: column; text-align: center; }
}


/* ==========================================================================
   15. LIGHTBOX
   ========================================================================== */

.lbd-zoom img{ cursor: zoom-in; transition: transform .3s ease; }
.lbd-zoom:hover img{ transform: scale(1.02); }

.lbd-lightbox{
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(8,16,36,.95);
  cursor: zoom-out;
}
.lbd-lightbox img{
  max-width: min(1300px, 90vw);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
}


/* ==========================================================================
   16. WPFORMS — bring plugin output into the design system
   WPForms ships its own styling. Rather than fight it with !important, set
   WPForms to "Base styling only" in its settings and let these rules do the
   work. Settings > General > Include Form Styling > Base Styling Only.
   ========================================================================== */

.lbd-form .wpforms-container{ margin: 0; max-width: none; }
.lbd-form .wpforms-form{ display: grid; gap: var(--sp-3); }

.lbd-form .wpforms-field{ padding: 0; }
.lbd-form .wpforms-field-label{
  display: block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: .45rem;
}
.lbd-band--contrast .lbd-form .wpforms-field-label{ color: var(--navy); }
.lbd-form .wpforms-required-label{ color: var(--gold); }

.lbd-form input[type="text"],
.lbd-form input[type="email"],
.lbd-form input[type="tel"],
.lbd-form input[type="url"],
.lbd-form input[type="date"],
.lbd-form input[type="number"],
.lbd-form select,
.lbd-form textarea{
  width: 100%;
  padding: .9rem .95rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--rule-warm);
  border-radius: 0;
}
.lbd-form textarea{ min-height: 8rem; resize: vertical; }
.lbd-form input:focus, .lbd-form select:focus, .lbd-form textarea:focus{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Name fields sit side by side on a wide viewport. */
.lbd-form .wpforms-field-name .wpforms-field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 640px){
  .lbd-form .wpforms-field-name .wpforms-field-row{ grid-template-columns: 1fr; }
}

/* Checkbox and radio lists. */
.lbd-form .wpforms-field-checkbox ul,
.lbd-form .wpforms-field-radio ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.lbd-form .wpforms-field-checkbox li,
.lbd-form .wpforms-field-radio li{
  padding: .8rem .9rem;
  border: 1px solid var(--rule-warm);
  background: var(--white);
}
.lbd-form .wpforms-field-checkbox label,
.lbd-form .wpforms-field-radio label{
  display: flex; align-items: flex-start; gap: .7rem;
  color: var(--text); text-transform: none; letter-spacing: 0;
  font-size: 1rem; font-weight: 400; margin: 0; cursor: pointer;
}
.lbd-form input[type="checkbox"], .lbd-form input[type="radio"]{
  width: 18px; height: 18px; margin: .18rem 0 0; flex: 0 0 auto; accent-color: var(--gold);
}

/* Submit — inherit the button component. */
.lbd-form .wpforms-submit{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 2rem;
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--white); background: var(--gold);
  border: 1.5px solid var(--gold); border-radius: 0; cursor: pointer;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.lbd-form .wpforms-submit:hover{ background: var(--gold-light); border-color: var(--gold-light); }
.lbd-form .wpforms-submit:active{ transform: scale(.97); }

/* Errors and confirmation. */
.lbd-form .wpforms-error{ color: var(--error); font-size: var(--fs-small); margin-top: .35rem; }
.lbd-form input.wpforms-error, .lbd-form textarea.wpforms-error, .lbd-form select.wpforms-error{ border-color: var(--error); }
.lbd-form .wpforms-confirmation-container-full{
  padding: 1.35rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: var(--gold-wash);
  color: var(--on-dark-strong);
}
.lbd-band--contrast .lbd-form .wpforms-confirmation-container-full{ color: var(--navy); }
.lbd-form .wpforms-confirmation-container-full p{ margin: 0; }

/* Multi-page progress — the Consulting two-step. */
.lbd-form .wpforms-page-indicator{
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--text-soft);
}
.lbd-form .wpforms-page-indicator .wpforms-page-indicator-page-number{ color: var(--gold); font-weight: 600; }


/* ==========================================================================
   17. TENSION — full-width stacked, alternating
   The approved two-column grid could not hold 150-word scenes: it produced
   two walls of text with ragged heights and shrank the wheels to thumbnails.
   ========================================================================== */

.lbd-tensions{ display: grid; gap: var(--sp-7); margin-top: var(--sp-6); }

.lbd-tension{
  display: grid;
  grid-template-columns: minmax(240px, 34%) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--rule);
}
.lbd-tensions .lbd-tension:last-child{ border-bottom: 0; padding-bottom: 0; }

.lbd-tension--flip .lbd-tension__wheel{ order: 2; }
.lbd-tension--flip .lbd-tension__body { order: 1; }

.lbd-tension__wheel{ position: sticky; top: 7rem; }
.lbd-tension__wheel img{ width: 100%; height: auto; border-radius: 3px; }

.lbd-tension__body h3{ margin-bottom: var(--sp-3); }
.lbd-tension__body h3 span{ display: block; }
.lbd-tension__body h3 .lbd-h-gold{ font-size: .68em; }
.lbd-tension__body p{ max-width: 62ch; }

.lbd-tension__q{
  margin-top: var(--sp-4);
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  line-height: var(--lh-snug);
  color: var(--navy);
}

@media (max-width: 860px){
  .lbd-tension{ grid-template-columns: 1fr; }
  .lbd-tension__wheel{ position: static; max-width: 340px; }
  .lbd-tension--flip .lbd-tension__wheel{ order: 0; }
  .lbd-tension--flip .lbd-tension__body { order: 0; }
}


/* ==========================================================================
   18. FOOTER SIGNAL — the closing line on the home page
   ========================================================================== */

.lbd-signal{ padding-block: var(--sp-6); }
.lbd-signal__line{
  max-width: 42ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.35;
  color: var(--on-dark-strong);
}
.lbd-signal__line em{ color: var(--gold); font-style: italic; }

/* Three-up card grid — the six-branch home grid, and any future 3-col use. */
@media (max-width: 1100px){
  .lbd-card-grid[style*="--cols:3"]{ grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   19. TALKS — keynote descriptions
   Written for an event planner: runtime and fit are scannable, and the
   program-copy block is visually separated so it reads as a gift rather
   than as more persuasion.
   ========================================================================== */

.lbd-talks{ display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }

.lbd-talk{
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--rule);
}
.lbd-talks .lbd-talk:last-of-type{ border-bottom: 0; padding-bottom: 0; }

.lbd-talk h3{ margin-bottom: .25rem; max-width: 24ch; }
.lbd-talk__sub{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}

/* Runtime and fit — a definition list, because that is what it is. */
.lbd-talk__meta{
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1.1rem;
  margin: 0 0 var(--sp-4);
  padding: .9rem 0;
  border-block: 1px solid var(--rule);
  max-width: 68ch;
}
.lbd-talk__meta dt{
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold);
  padding-top: .18rem;
}
.lbd-talk__meta dd{ margin: 0; font-size: var(--fs-small); color: var(--text); }

/* The liftable paragraph. Set apart so a planner can find and copy it. */
.lbd-talk__program{
  margin: var(--sp-4) 0;
  padding: 1.35rem 1.5rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  max-width: 68ch;
}
.lbd-talk__program p{
  margin: .5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--navy);
}

@media (max-width: 640px){
  .lbd-talk__meta{ grid-template-columns: 1fr; gap: .15rem; }
  .lbd-talk__meta dd{ margin-bottom: .5rem; }
}


/* ==========================================================================
   20. ARTICLES — the library and the reading view
   Prose is what gets indexed, quoted and forwarded. This is built for
   reading: one column, generous measure, nothing interrupting the argument.
   ========================================================================== */

.lbd-article-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

.lbd-article-card{
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--rule);
  transition: transform var(--ease), box-shadow var(--ease);
}
.lbd-article-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
/* Hold the ratio rather than a fixed height. `height: 190px` was a second
   crop on top of the one add_image_size already made, and between them a
   16:9 composition lost both its sides and its top. The height line stays
   as a fallback for browsers without aspect-ratio; anything modern uses
   the ratio and the art arrives whole. */
.lbd-article-card__img img{
  width: 100%;
  height: 190px;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
}
.lbd-article-card__body{ padding: 1.4rem 1.35rem 1.5rem; }

.lbd-article-card__meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin-bottom: .6rem;
}
.lbd-article-card__phase,
.lbd-article__kind,
.lbd-article-card__kind{
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold);
}
.lbd-article-card__kind,
.lbd-article__kind{
  color: var(--text-soft);
  border-left: 1px solid var(--rule-warm);
  padding-left: .55rem;
}
.lbd-article-card__time,
.lbd-article__time{
  font-size: var(--fs-micro);
  color: var(--text-soft);
  margin-left: auto;
}
.lbd-article-card h3{ font-size: 1.28rem; margin-bottom: .55rem; }
.lbd-article-card h3 a{ color: var(--navy); }
.lbd-article-card h3 a:hover{ color: var(--gold); }
.lbd-article-card p{ margin: 0; font-size: var(--fs-small); color: var(--text-soft); max-width: none; }

/* --- reading view --- */
.lbd-article__head{
  background: var(--navy-deep);
  padding: 4.5rem 0 2.5rem;
  border-bottom: 1px solid var(--hairline);
}
.lbd-article__head h1{ max-width: 22ch; color: var(--white); }
.lbd-article__head .lbd-lead{ max-width: 60ch; color: var(--on-dark); }
.lbd-article__meta{ display: flex; align-items: center; gap: .7rem; margin-bottom: var(--sp-3); }
.lbd-article__meta .lbd-kicker{ margin: 0; }
.lbd-article__meta .lbd-article__kind{ border-left-color: var(--hairline-strong); }
.lbd-article__by{
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--on-dark-faint);
}
.lbd-article__by span{ margin-left: .55rem; padding-left: .55rem; border-left: 1px solid var(--hairline-strong); }

/* --- the plate, behind the header type -------------------------------------
   Was a separate block below the header, which made the first screen three
   stacked rectangles with two hard seams. The image is still an <img> and not
   a background: a background has no alt attribute, and that string is the only
   part of a picture an AI retrieval system reads.

   The scrim is a horizontal gradient rather than a flat wash — opaque under the
   type on the left, clearing toward the right where every plate puts its
   subject. A wash heavy enough to guarantee contrast everywhere would hide the
   picture, which is the whole reason it is there. */

.lbd-article__head--plate{ position: relative; overflow: hidden; }
.lbd-article__head--plate > .lbd-shell{ position: relative; z-index: 2; }

.lbd-article__plate{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lbd-article__plate img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Down, not centred. The header crops to roughly the middle 60% of a 16:9
     plate, and every plate carries its own burned-in category name in the top
     quarter — which would ghost in at the very top edge, saying the same word
     the kicker says a hundred pixels below it. Biasing the crop downward puts
     that type above the cut and brings up the foreground instead. */
  object-position: center 62%;
  display: block;
}

/* Over a plate the reading time was --text-soft on a bright patch of sky and
   effectively invisible. On flat navy it was fine; the picture changed the
   ground under it. */
.lbd-article__head--plate .lbd-article__time{ color: var(--on-dark); }
.lbd-article__head--plate .lbd-article__kind{ color: var(--on-dark); }

/* Two layers. The horizontal one protects the type; the vertical one lands the
   image into the body below instead of ending on a cut. */
.lbd-article__head--plate::before,
.lbd-article__head--plate::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.lbd-article__head--plate::before{
  background: linear-gradient(
    100deg,
    rgba(13, 31, 54, .94) 0%,
    rgba(13, 31, 54, .88) 34%,
    rgba(13, 31, 54, .55) 62%,
    rgba(13, 31, 54, .30) 100%
  );
}
.lbd-article__head--plate::after{
  background: linear-gradient(
    to bottom,
    rgba(13, 31, 54, .55) 0%,
    rgba(13, 31, 54, 0) 22%,
    rgba(13, 31, 54, 0) 68%,
    rgba(13, 31, 54, .75) 100%
  );
}

/* Taller with a plate behind it — the type needs room to sit inside the picture
   rather than on top of a stripe of it. */
.lbd-article__head--plate{ padding: 6rem 0 4.5rem; border-bottom: 0; }

@media (max-width: 900px){
  /* At phone width the crop is tight enough that the plate reads as noise
     behind the headline. Keep it, lose the contest: heavier scrim, less height. */
  .lbd-article__head--plate{ padding: 3.25rem 0 2.5rem; }
  .lbd-article__head--plate::before{
    background: linear-gradient(
      160deg,
      rgba(13, 31, 54, .95) 0%,
      rgba(13, 31, 54, .88) 55%,
      rgba(13, 31, 54, .72) 100%
    );
  }
}

.lbd-article__body{
  background: var(--light);
  padding: var(--sp-7) 0 var(--sp-6);
  color: var(--text);
}
/* The measure is a separate element from the background. When both sat
   on .lbd-article__body it also carried .lbd-shell's margin-inline:auto,
   so the 760px column centred on the viewport while the header centred at
   --shell — a 210px misalignment, and the cream painted the column instead
   of the section. .lbd-shell now supplies the alignment; this supplies the
   measure, left-aligned within it so the prose starts where the title does.
   700px of Jost is roughly 72 characters. 760 was roughly 90. */
.lbd-article__measure{ width: min(700px, 100%); }
.lbd-article__body p{ font-size: 1.06rem; line-height: 1.7; max-width: none; }
.lbd-article__body h2{
  color: var(--navy);
  margin-top: var(--sp-6);
  /* The display scale is built for hero bands, where a heading is the
     whole point of the block. In prose it is competing with the paragraph
     under it, and --fs-h2 clamping to 2.6rem won. Capped for the reading
     view; the measure supplies the wrap, so 30ch is redundant. */
  font-size: clamp(1.45rem, 1.9vw, 2rem);
  max-width: none;
}
.lbd-article__body h3{ color: var(--navy); margin-top: var(--sp-5); }
.lbd-article__body blockquote{
  margin: var(--sp-5) 0;
  padding: 1.25rem 0 1.25rem 1.75rem;
  border-left: 3px solid var(--gold);
}
.lbd-article__body blockquote p{
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.32;
  color: var(--gold);
}
.lbd-article__body ul, .lbd-article__body ol{ padding-left: 1.4rem; line-height: 1.85; }
.lbd-article__body li{ margin-bottom: .5rem; }
.lbd-article__body a{ color: var(--navy); border-bottom: 1px solid var(--gold); }
.lbd-article__body a:hover{ color: var(--gold); }

/* article body sits on light — undo the dark-band default */
.lbd-article__body{ background: var(--light); }

.lbd-article__pair{
  margin: 0 0 var(--sp-6);
  padding: 1.5rem 1.6rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
}
.lbd-article__pair h3{ margin: .4rem 0 .4rem; font-size: 1.2rem; }
.lbd-article__pair h3 a{ color: var(--navy); }
.lbd-article__pair p{ margin: 0; font-size: var(--fs-small); color: var(--text-soft); }

@media (max-width: 640px){
  .lbd-article__head{ padding: 3rem 0 2rem; }
  .lbd-article__meta{ flex-wrap: wrap; }
  .lbd-article-card__time, .lbd-article__time{ margin-left: 0; }
}


/* ==========================================================================
   21. EPISODES AND PRESS
   ========================================================================== */

.lbd-episode-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.lbd-episode-card{
  padding: 1.4rem 1.35rem 1.5rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  transition: transform var(--ease), box-shadow var(--ease);
}
.lbd-episode-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); }
.lbd-episode-card__meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin-bottom: .55rem;
}
.lbd-episode-card__num,
.lbd-episode-card__phase{
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold);
}
.lbd-episode-card__phase{
  color: var(--text-soft);
  border-left: 1px solid var(--rule-warm); padding-left: .55rem;
}
.lbd-episode-card__time{ font-size: var(--fs-micro); color: var(--text-soft); margin-left: auto; }
.lbd-episode-card h3{ font-size: 1.2rem; margin-bottom: .4rem; }
.lbd-episode-card h3 a{ color: var(--navy); }
.lbd-episode-card h3 a:hover{ color: var(--gold); }
.lbd-episode-card__guest{ font-size: var(--fs-small); color: var(--gold); font-style: italic; margin-bottom: .4rem; }
.lbd-episode-card p{ margin: 0; font-size: var(--fs-small); color: var(--text-soft); max-width: none; }

.lbd-episode__player{ margin-top: var(--sp-4); }
.lbd-episode__player audio{ width: 100%; max-width: 640px; }

/* --- press --- */
.lbd-press-list{ display: grid; gap: var(--sp-4); }
.lbd-press-item{
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.lbd-press-list .lbd-press-item:last-child{ border-bottom: 0; padding-bottom: 0; }
.lbd-press-item__meta{ display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .4rem; }
.lbd-press-item__outlet{
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold);
}
.lbd-press-item__format,
.lbd-press-item__date{ font-size: var(--fs-micro); color: var(--text-soft); }
.lbd-press-item h3{ font-size: 1.32rem; margin-bottom: .4rem; }
.lbd-press-item h3 a{ color: var(--navy); }
.lbd-press-item h3 a:hover{ color: var(--gold); }
.lbd-press-item p{ margin: 0; font-size: var(--fs-small); color: var(--text-soft); }