/* ================================================================
   PATCH ROBOWARS · /about — THE LOGBOOK
   A programme dossier. Right-aligned cover sheet, exhibits, stamps,
   checklists. Quiet, archival, confident.
   Local rules namespaced .lb- (logbook).
   ================================================================ */

.lb-page {
  position: relative;
  background: transparent;
  color: var(--ink);
  isolation: isolate;
  padding: 0;
}
.lb-page > * { position: relative; z-index: 1; }

/* ── Cover sheet — right-aligned title block w/ left margin metadata ── */
.lb-cover {
  position: relative;
  padding: 128px var(--page-side) 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: 48px;
  row-gap: 40px;
  align-items: stretch;
  border-bottom: 1px dashed var(--rule);
  overflow: hidden;
  isolation: isolate;
}
.lb-cover > .lb-margin,
.lb-cover > .lb-title-block {
  position: relative;
  z-index: 1;
  grid-row: 1;
}
.lb-cover > .lb-margin { grid-column: 1; }
.lb-cover > .lb-title-block { grid-column: 2; }

/* Cover hero crossfade gallery */
.hero-img-bg-img--cycle {
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .hero-img-bg-img--cycle { transition: none; }
}

/* ── FN-2025 Roster strip — embedded in cover hero ─────────────── */
/* Visual language matches cp-coord / sp-coord: mono 10px / 0.32em,
   faint dashed top rule, flex: 1 bar that draws itself once on load. */
.lb-cover-roster {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 0 24px;
  border-top: 1px dashed var(--rule-faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-top: auto;
}

/* Eyebrow tab — sits OUTSIDE the strip, above its top-left corner */
.lb-cover-roster-eyebrow {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--orange);
  white-space: nowrap;
  pointer-events: none;
}
.lb-cover-roster-eyebrow .pip {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--orange);
  animation: lb-cover-roster-pip 1.6s ease-in-out infinite;
}
@keyframes lb-cover-roster-pip {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Hidden sizer — renders every name in flow so we can measure each
   intrinsic width once on mount (and on resize). Those measurements
   drive the explicit width on the visible stage so the bar can
   transition its width smoothly via flex layout. */
.lb-cover-roster-sizer {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.lb-cover-roster-sizer > .lb-cover-roster-name {
  display: inline-block;
  margin-right: 8px;
}

/* Name stage — width set inline in JS to the measured width of the
   active name; transitions on the same 1.2s bezier as the text fade
   so the bar's flex-allocated width follows the same curve, no snap. */
.lb-cover-roster-stage {
  position: relative;
  flex: 0 0 auto;
  line-height: 1;
  min-height: 26px;
  overflow: hidden;
  transition: width 1.2s ease-in-out;
}
.lb-cover-roster-name {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55), 0 0 22px rgba(255, 106, 26, 0.18);
}
.lb-cover-roster-name--current,
.lb-cover-roster-name--outgoing {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.lb-cover-roster-name--current  { animation: lb-cover-roster-name-in  1.2s ease-in-out; }
.lb-cover-roster-name--outgoing { animation: lb-cover-roster-name-out 1.2s ease-in-out forwards; pointer-events: none; }
@keyframes lb-cover-roster-name-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-cover-roster-name-out { from { opacity: 1; } to { opacity: 0; } }

/* Bar — single solid amber line; flex:1 absorbs whatever horizontal
   space remains. The stage's width transition drives the bar's width
   on every animation frame, so the bar grows/shrinks along the same
   bezier curve as the text fade — no snap, no opacity tricks. */
.lb-cover-roster-bar {
  flex: 1 1 0;
  height: 1px;
  background: var(--amber);
  box-shadow: 0 0 6px rgba(255, 176, 26, 0.55);
}

/* Five indicators — one per slide, orange diamonds, active filled */
.lb-cover-roster-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.lb-cover-roster-dot {
  width: 6px;
  height: 6px;
  border: 1px solid var(--orange);
  background: transparent;
  transform: rotate(45deg);
  transition: background 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
  opacity: 0.55;
}
.lb-cover-roster-dot.is-active {
  background: var(--orange);
  box-shadow: 0 0 6px rgba(255, 106, 26, 0.7);
  opacity: 1;
}

.lb-cover-roster-id {
  flex: 0 0 auto;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .lb-cover-roster-stage             { transition: none; }
  .lb-cover-roster-name--current     { animation: none; }
  .lb-cover-roster-name--outgoing    { animation: none; opacity: 0; }
  .lb-cover-roster-dot               { transition: none; }
  .lb-cover-roster-eyebrow .pip      { animation: none; }
}

@media (max-width: 760px) {
  .lb-cover-roster {
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 0 14px;
  }
  .lb-cover-roster-eyebrow {
    position: static;
    margin-bottom: 0;
    flex-basis: 100%;
  }
  .lb-cover-roster-bar { flex-basis: 100%; order: 99; }
}

/* Left margin: filing metadata column */
.lb-margin {
  position: relative;
  border-right: 1px dashed var(--rule);
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.lb-margin .lb-row { display: flex; flex-direction: column; gap: 4px; }
.lb-margin .lb-row .k { color: var(--ink-dim); font-size: 9px; letter-spacing: 0.36em; }
.lb-margin .lb-row .v { color: var(--ink); font-weight: 500; }
.lb-margin .lb-row .v.em { color: var(--orange); }
.lb-margin .lb-row .v.amber { color: var(--amber); }

/* Stamp inside margin */
.lb-stamp {
  position: relative;
  align-self: flex-start;
  padding: 8px 14px;
  border: 2px solid var(--orange);
  color: var(--orange);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 700;
  transform: rotate(-3deg);
  background: rgba(255, 106, 26, 0.06);
  margin-top: 8px;
}
.lb-stamp.amber {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(245, 197, 24, 0.06);
  transform: rotate(2deg);
}
.lb-stamp.bracket {
  border-style: dashed;
  transform: rotate(-1deg);
}
.lb-stamp .star {
  display: inline-block;
  margin-right: 6px;
}

/* Right block: dossier title */
.lb-title-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lb-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  align-items: center;
}
.lb-tag .pip {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--amber);
}

.lb-title {
  font-family: var(--display);
  font-size: clamp(54px, 7.4vw, 124px);
  letter-spacing: 0.005em;
  line-height: 0.94;
  margin: 0;
  text-transform: uppercase;
  color: var(--ink);
  text-align: right;
}
.lb-title .accent { color: var(--orange); }
.lb-title .doc-no {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.42em;
  color: var(--ink-mute);
  margin-bottom: 14px;
  font-weight: 500;
}

/* Hero lede — dossier preamble */
.lb-lede {
  margin: 22px 0 0 auto;
  max-width: 92ch;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-dim);
  text-align: right;
  text-wrap: pretty;
  position: relative;
  padding-right: 18px;
  border-right: 2px solid var(--orange);
}
.lb-lede-em {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.lb-lede-mark {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .lb-lede {
    text-align: left;
    margin: 22px 0 0;
    padding: 0 0 0 14px;
    border-right: none;
    border-left: 2px solid var(--orange);
  }
}

.lb-classification {
  margin-top: 28px;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.36em;
  color: var(--ink-dim);
  text-transform: uppercase;
  flex-wrap: wrap;
}
.lb-classification span { display: inline-flex; align-items: center; gap: 6px; }
.lb-classification .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
}

/* Decorative document spine: thin orange rule down the right gutter */
.lb-cover::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    var(--orange) 0 12px,
    transparent 12px 22px
  );
  opacity: 0.5;
  pointer-events: none;
}

/* ── Section — generic logbook entry ────────────────────────────── */
.lb-section {
  padding: 64px var(--page-side) 32px;
  border-bottom: 1px dashed var(--rule-faint);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.lb-section > .lb-section-num {
  flex: 0 0 100px;
  align-self: flex-start;
}
.lb-section > .lb-section-head,
.lb-section > .lb-mission-body,
.lb-section > .lb-checklist {
  /* Right column container — but sections have multiple right-column siblings.
     Wrap them with a flex column wrapper via :not selector won't work; use grow on each. */
}
.lb-section-body-col {
  flex: 1 1 auto;
  min-width: 0;
}
.lb-section-head {
  margin-bottom: 24px;
}
.lb-section .lb-mission-body,
.lb-section .lb-checklist {
  display: block;
}
.lb-section .lb-mission-body .lb-evidence,
.lb-section .lb-checklist .lb-checklist-aside {
  margin-bottom: 18px;
}
.lb-section-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--ink-faint);
  text-transform: uppercase;
  position: sticky;
  top: 96px;
  z-index: 5;
}
.lb-section-num .em { color: var(--orange); font-weight: 700; }
.lb-section-num .amber { color: var(--amber); font-weight: 700; }
.lb-section-title {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0;
}
.lb-section-title .em { color: var(--orange); }
.lb-section-title .amber { color: var(--amber); }

/* ── Mission body — single paragraph w/ circled phrase ─────────── */
.lb-mission-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 48px;
}
.lb-mission-body .lb-evidence {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink-dim);
  text-transform: uppercase;
  border-left: 2px solid var(--amber);
  padding: 6px 0 6px 14px;
  align-self: start;
}

/* Inline external link inside body copy */
.lb-link {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: rgba(255, 106, 26, 0.5);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.lb-link:hover { text-decoration-color: var(--orange); }
.lb-mission-body p {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 1040px;
  margin: 0;
  text-wrap: pretty;
}
.lb-mission-body p strong { color: var(--ink); font-weight: 600; }

/* Hand-circled phrase — inline highlight that doesn't disrupt flow */
.lb-circle {
  display: inline;
  position: relative;
  padding: 2px 4px;
  color: var(--orange);
  font-weight: 600;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 106, 26, 0.15) 30%,
    rgba(255, 106, 26, 0.15) 90%,
    transparent 90%
  );
  border-bottom: 1.5px solid var(--orange);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── Exhibit photo — date-stamped, document-pasted ─────────────── */
.lb-exhibit {
  margin: 24px var(--page-side) 64px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.lb-exhibit > .lb-exhibit-meta {
  flex: 0 0 100px;
  align-self: flex-start;
  position: sticky;
  top: 96px;
  z-index: 5;
}
.lb-exhibit > .lb-exhibit-frame {
  flex: 1 1 auto;
  min-width: 0;
}
.lb-exhibit-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.4;
}
.lb-exhibit-meta .id { color: var(--orange); font-weight: 700; letter-spacing: 0.22em; font-size: 10px; }
.lb-exhibit-meta .label { color: var(--ink); }
.lb-exhibit-meta .ts { color: var(--amber); }

.lb-exhibit-frame {
  position: relative;
  background: #000;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
}
.lb-exhibit-frame .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: contrast(1.04) saturate(1) brightness(0.86);
}
.lb-exhibit-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.06) 3px 4px),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Corner crosshairs on exhibit */
.lb-exhibit-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    linear-gradient(to right, var(--orange) 0 14px, transparent 14px),
    linear-gradient(to bottom, var(--orange) 0 14px, transparent 14px),
    linear-gradient(to left, var(--orange) 0 14px, transparent 14px),
    linear-gradient(to top, var(--orange) 0 14px, transparent 14px);
  background-position: top left, top left, top right, bottom right;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-repeat: no-repeat;
  /* fallback: simple corner marks via inset borders */
}
.lb-exhibit-frame .lb-corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--orange);
  z-index: 4;
}
.lb-exhibit-frame .lb-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.lb-exhibit-frame .lb-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.lb-exhibit-frame .lb-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.lb-exhibit-frame .lb-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.lb-exhibit-frame .ts-stamp {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 5;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--amber);
  text-transform: uppercase;
  background: rgba(0,0,0,0.6);
  padding: 4px 8px;
  border: 1px dashed rgba(245,197,24,0.4);
}
.lb-exhibit-frame .ex-stamp {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  padding: 5px 10px;
  border: 2px solid var(--orange);
  color: var(--orange);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(0,0,0,0.5);
  transform: rotate(-3deg);
}

/* ── Education / outcomes — checklist on graph paper ───────────── */
.lb-checklist {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 48px;
}
.lb-checklist-aside {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink-mute);
  text-transform: uppercase;
  border-left: 2px solid var(--orange);
  padding: 6px 0 6px 14px;
  align-self: start;
}
.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px dashed var(--rule);
  /* graph-paper texture — very subtle */
  background-image:
    linear-gradient(to right, rgba(245,197,24,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,197,24,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  max-width: 820px;
}
.lb-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 18px 16px;
  border-bottom: 1px dashed var(--rule);
}
.lb-item .check {
  position: relative;
  width: 26px;
  height: 26px;
  border: 2px solid var(--orange);
  margin-top: 2px;
  background: rgba(255, 106, 26, 0.04);
}
.lb-item .check::before, .lb-item .check::after {
  content: "";
  position: absolute;
  background: var(--orange);
  height: 2px;
  border-radius: 1px;
  transform-origin: left center;
}
.lb-item .check::before {
  width: 14px;
  top: 13px;
  left: 4px;
  transform: rotate(48deg);
}
.lb-item .check::after {
  width: 22px;
  top: 16px;
  left: 7px;
  transform: rotate(-42deg);
}
.lb-item .body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.lb-item .body .k {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.lb-item .body .d {
  color: var(--ink-dim);
  font-size: 14px;
  font-weight: 400;
}
.lb-item .ix {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-mute);
  text-transform: uppercase;
  white-space: nowrap;
  align-self: center;
}
.lb-item .ix .num { color: var(--orange); font-weight: 700; }

/* ── Personnel — Appendix A ─────────────────────────────────────── */
.lb-personnel {
  padding: 64px var(--page-side) 48px;
  border-bottom: 1px dashed var(--rule-faint);
}
.lb-personnel-head {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 48px;
  align-items: baseline;
  margin-bottom: 28px;
}
.lb-personnel-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.lb-personnel-tag .em { color: var(--orange); font-weight: 700; }
.lb-personnel-title {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0;
}
.lb-personnel-title .accent { color: var(--orange); }
.lb-personnel-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-dim);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.lb-personnel-meta .row { display: flex; gap: 14px; }
.lb-personnel-meta .v { color: var(--orange); }

/* ── Talk to the committee — two-door CTA (reuses .sp-cta-* card styles) ── */
.lb-join {
  padding: 96px var(--page-side) 120px;
  position: relative;
}
.lb-join-head {
  margin: 0 0 36px;
}
/* Override sp-cta inner max-widths so the CTA matches the rest of the about
   page's content column (driven by .lb-join's outer var(--page-side) padding) */
.lb-join .sp-cta-grid,
.lb-join .sp-cta-foot {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.lb-join-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--orange);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.lb-join-eyebrow .pip {
  width: 8px; height: 8px;
  background: var(--orange);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 12px var(--orange);
}
.lb-join-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.lb-join-title {
  font-family: var(--display);
  font-size: clamp(52px, 6vw, 96px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
  white-space: nowrap;
}
.lb-join-title .accent { color: var(--orange); }
.lb-join-lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  text-align: right;
  text-wrap: pretty;
  align-self: center;
}

/* Foot strip — strip the box, bigger + brighter type so the breadcrumbs read */
.lb-join .sp-cta-foot {
  border: none;
  background: transparent;
  padding: 22px 0 0;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--ink);
}
.lb-join .sp-cta-foot .pipe { color: var(--ink-mute); }

/* Card borders — both faint, just brighter than the grid background,
   so the corner brackets remain the dominant edge cue. Each card's border
   tint matches its own accent (orange / amber) so the two doors still read
   as distinct families. */
.lb-join .sp-cta-card.primary {
  border: 1px solid var(--rule);
}
.lb-join .sp-cta-card.secondary {
  border: 1px solid rgba(255, 176, 26, 0.18);
}
.lb-join .sp-cta-card.secondary .label .num { color: var(--orange); }

@media (max-width: 900px) {
  .lb-join { padding: 64px 20px 80px; }
  .lb-join-head-row { grid-template-columns: 1fr; gap: 18px; }
  .lb-join-lede { text-align: left; padding-top: 0; }
}

.lb-footer {
  padding: 40px var(--page-side) 80px;
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.lb-footer-stamps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lb-footer-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--ink-mute);
  text-transform: uppercase;
  border-top: 1px dashed var(--rule);
  padding-top: 18px;
}
.lb-footer-line .seal {
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--orange);
  line-height: 1;
}
.lb-footer-line .signed {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.lb-footer-line .signed .who {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lb-cover { padding: 128px 20px 0; grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .lb-cover > .lb-title-block { grid-column: 1; }
  .lb-cover::after { display: none; }
  .lb-margin { display: none; }
  .lb-title-block { text-align: left; min-height: auto; }
  .lb-tag { justify-content: flex-start; }
  .lb-title { text-align: left; }
  .lb-classification { justify-content: flex-start; }

  .lb-section {
    padding: 48px 20px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .lb-section > .lb-section-num { flex: 0 0 auto; }
  .lb-section-num { position: static; }
  .lb-section-head, .lb-mission-body, .lb-checklist { grid-template-columns: 1fr; gap: 18px; }

  .lb-exhibit {
    margin: 16px 20px 48px;
    max-width: calc(100% - 40px);
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .lb-exhibit > .lb-exhibit-meta { flex: 0 0 auto; position: static; }

  .lb-item {
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    padding: 16px 12px;
  }
  .lb-item .check { width: 22px; height: 22px; }
  .lb-item .check::before { width: 12px; top: 11px; left: 3px; }
  .lb-item .check::after  { width: 18px; top: 14px; left: 5px; }
  .lb-item .ix {
    grid-column: 1 / -1;
    align-self: start;
    margin-top: 4px;
    padding-left: 36px;
    font-size: 9px;
  }

  .lb-personnel { padding: 48px 20px 32px; }
  .lb-personnel-head { grid-template-columns: 1fr; gap: 18px; }
  .lb-personnel-meta { align-items: flex-start; }
  .lb-footer { grid-template-columns: 1fr; padding: 32px 20px 64px; }
  .lb-footer-line { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lb-footer-line .signed { align-items: flex-start; }
}

/* ── §02 — "WE BRING" three-card grid ──────────────────────────── */
.lb-bring-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 32px;
}
.lb-bring-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 22px 22px 24px;
  background: var(--paper);
  min-height: 280px;
}
.lb-bring-card-bg {
  /* slightly darker than the page heroes so card text stays dominant */
  filter: contrast(1.04) saturate(0.9) brightness(0.6);
}
.lb-bring-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
}
.lb-bring-card-stamps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: auto;
}
.lb-bring-card-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--orange);
  text-transform: uppercase;
}
.lb-bring-card-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--amber);
  text-transform: uppercase;
}
.lb-bring-card-title {
  font-family: var(--display);
  font-size: clamp(28px, 2.4vw, 36px);
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0;
}
.lb-bring-card-title .em { color: var(--orange); }
.lb-bring-card-body {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
  max-width: 36ch;
}

@media (max-width: 900px) {
  .lb-bring-grid { grid-template-columns: 1fr; }
  .lb-bring-card { min-height: 220px; }
}