/* Lalibela — editorial stone system */

:root {
  /* Logo colours. The Σύλλογος asked for these four — burgundy, yellow, grey,
     white — to carry every page, and for no black backgrounds or buttons. The
     legacy token names below are kept so the rest of the file need not change;
     each now points at a logo colour. Sampled from assets/img/logo.jpg. */
  --burgundy: #921d2f;
  --burgundy-deep: #6c1322;
  --sun: #ebc066;
  --sun-deep: #d9a63f;
  --greige: #b5ae97;
  --greige-light: #e6e2d6;

  --tuff: var(--sun);
  --tuff-deep: var(--burgundy);
  --basalt: var(--burgundy-deep);
  --dusk: var(--burgundy);
  --plaster: var(--greige-light);
  --bone: #faf8f3;
  --paper: #ffffff;
  --ember: var(--burgundy);
  --ink: #2a2422;
  --muted: #625a55;
  --line: rgba(42, 36, 34, .14);
  --line-strong: rgba(42, 36, 34, .28);
  --line-light: rgba(255, 255, 255, .2);
  --crimson: var(--burgundy);

  /* One family for headings and text, as the Σύλλογος asked: Ubuntu Sans is the
     rounded humanist face nearest to Trebuchet MS / Microsoft JhengHei that
     ships Greek as a web font. Trebuchet stays as the local fallback. */
  --font: "Ubuntu Sans", "Trebuchet MS", "Microsoft JhengHei", "Segoe UI", sans-serif;
  --display: var(--font);

  --max: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 8vw, 8rem);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --cut: 12px;

  --fs-1: clamp(2.6rem, 6vw, 5.4rem);
  --fs-2: clamp(1.9rem, 3.6vw, 3.2rem);
  --fs-3: clamp(1.15rem, 1.5vw, 1.45rem);
  --fs-lead: clamp(1.1rem, 1.3vw, 1.3rem);
  --fs-num: clamp(2.4rem, 4.4vw, 4.2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }

body.llb-body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bone);
  line-height: 1.68;
  font-size: 1.0625rem;
  font-feature-settings: "kern", "liga", "locl";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.llb-nav-open { overflow: hidden; }
::selection { background: rgba(235, 192, 102, .45); color: var(--basalt); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--crimson); text-underline-offset: .18em; }
a:hover { color: var(--ember); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 .45em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--fs-1); }
h2 { font-size: var(--fs-2); }
h3 { font-size: var(--fs-3); letter-spacing: -0.012em; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }

.llb-wrap { width: min(var(--max), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.llb-skip { position: absolute; left: -999px; }
.llb-skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 99; }
.llb-visually-hidden,
.llb-hp,
.llb-form .llb-hp,
.llb-form input.llb-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: 0 !important;
  top: 0 !important;
}

/* ---------- editorial labels ---------- */

.llb-kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: .7rem;
  color: var(--tuff-deep);
  margin: 0 0 1rem;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
}
.llb-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  background: var(--ember);
}
.llb-kicker--light { color: var(--tuff); }
.llb-kicker--light::before { background: var(--tuff); }

.llb-lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 34rem;
  line-height: 1.5;
}
.llb-meta { color: var(--muted); font-size: .92rem; }
.llb-section { padding: var(--section) 0; }
.llb-sectionhead { margin-bottom: clamp(2rem, 4vw, 3.4rem); max-width: 46rem; }
.llb-sectionhead p:not(.llb-kicker) { color: var(--muted); max-width: 40rem; margin: 0; }
.llb-sectionhead h2 { margin-bottom: .5rem; }
.llb-sectionhead--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: none;
  padding-bottom: clamp(1rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}
.llb-sectionhead--row > div { max-width: 40rem; }
.llb-sectionhead--row h2 { margin-bottom: 0; }
.llb-sectionhead--row .llb-textlink { flex-shrink: 0; padding-bottom: .3rem; }
.llb-band__more { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.llb-center { justify-content: center; }
.llb-ornament, .llb-rule, .llb-window { display: none; }

/* ---------- buttons ---------- */

.llb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 54px;
  padding: 0 1.6rem;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  background: var(--ember);
  color: #fff7ee;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .005em;
  border: 0;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s, transform .25s var(--ease);
}
.llb-btn:hover { background: var(--basalt); color: var(--bone); transform: translateY(-2px); }
.llb-btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  clip-path: none;
}
.llb-btn--ghost:hover { background: var(--burgundy); color: #fff; box-shadow: inset 0 0 0 1.5px var(--burgundy); }
.llb-cta .llb-btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(42, 36, 34, .55); }
.llb-cta .llb-btn--ghost:hover { background: #fff; color: var(--burgundy); box-shadow: inset 0 0 0 1.5px #fff; }
.llb-cta .llb-kicker--light { color: var(--burgundy); }
.llb-cta .llb-kicker--light::before { background: var(--burgundy); }
.llb-btn--donate { background: var(--sun); color: var(--ink); min-height: 46px; padding: 0 1.15rem; font-size: .95rem; }
.llb-btn--donate:hover { background: var(--burgundy); color: #fff; }

/* Burgundy is the action colour on light ground, so on the burgundy bands it
   would vanish: there the accent swaps to the logo's yellow, and a filled
   button becomes yellow with dark text. Scoped through the token, so every
   kicker rule, focus ring and bar inside these bands follows. */
.llb-stats, .llb-footer, .llb-mobile, .llb-price, .llb-video, .llb-lightbox { --ember: var(--sun); }
.llb-footer .llb-btn:not(.llb-btn--ghost),
.llb-mobile .llb-btn:not(.llb-btn--ghost),
.llb-price .llb-btn:not(.llb-btn--ghost) { background: var(--sun); color: var(--ink); }
.llb-footer .llb-btn:not(.llb-btn--ghost):hover,
.llb-mobile .llb-btn:not(.llb-btn--ghost):hover,
.llb-price .llb-btn:not(.llb-btn--ghost):hover { background: #fff; color: var(--burgundy); }
.llb-btn--small { min-height: 44px; font-size: .95rem; }
.llb-btn--block { width: 100%; }

.llb-textlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--tuff);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.llb-textlink::after { content: "→"; transition: transform .25s var(--ease); }
.llb-textlink:hover { border-color: var(--ember); color: var(--ember); }
.llb-textlink:hover::after { transform: translateX(4px); }

/* ---------- header ---------- */

.llb-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 246, 239, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s, background .3s;
}
.llb-header.is-scrolled {
  background: rgba(250, 246, 239, .97);
  box-shadow: 0 1px 0 var(--line), 0 14px 34px -22px rgba(22, 18, 15, .5);
}
.llb-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: var(--ember);
  pointer-events: none;
}
/* space-between is what pushes the actions to the right edge once .llb-nav is
   display:none below 980px. It is inert on desktop: an auto margin absorbs all
   the free space before justify-content is applied, and .llb-nav has one, so
   there is nothing left to distribute. */
.llb-header__bar {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 108px;
  transition: min-height .3s var(--ease);
}
.llb-header.is-scrolled .llb-header__bar { min-height: 76px; }
.llb-logo { flex-shrink: 0; display: block; }
.llb-logo img { height: 92px; width: auto; transition: height .3s var(--ease); }
.llb-header.is-scrolled .llb-logo img { height: 64px; }
.llb-nav { margin-left: auto; }
.llb-menu { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.llb-menu > li { position: relative; }
.llb-menu a {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .65rem .7rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
}
.llb-menu > li > a::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: .3rem;
  height: 2px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.llb-menu > li:hover > a::after,
.llb-menu .current-menu-item > a::after,
.llb-menu .current-menu-ancestor > a::after { transform: scaleX(1); }
.llb-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .45; }
.llb-sub {
  display: block;
  position: absolute;
  left: 0;
  min-width: 244px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 26px 50px -28px rgba(22, 18, 15, .55);
  padding: .5rem 0;
  list-style: none;
  margin: .3rem 0 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  /* Closing waits 120ms, so a pointer that slips off for a moment does not
     snap the panel shut and fade it in again over the page text. */
  transition: opacity .14s ease .12s, transform .14s ease .12s, visibility 0s linear .26s;
}
/* Invisible bridge over the gap between the link and the panel: without it
   the pointer lost hover on the way down and the panel faded out mid-move. */
.llb-sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-.3rem - 6px);
  height: calc(.3rem + 6px);
}
.llb-menu > li:hover > .llb-sub, .llb-menu > li:focus-within > .llb-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
/* Moving to another item closes the previous panel at once, so two
   half-faded panels never overlap. */
.llb-menu:hover > li:not(:hover) > .llb-sub { opacity: 0; visibility: hidden; transition: none; }
.llb-sub a { padding: .55rem 1.1rem; font-weight: 500; }
.llb-sub a:hover { background: var(--plaster); }
.llb-header__actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
/* Two rules instead of three, centred and offset by transform only, so the open
   state is a rotation about the centre and nothing has to be re-topped. The
   border is the affordance, so it is heavier than --line-strong: that token
   composites to ~1.8:1 on bone, under the 3:1 a control boundary needs. */
.llb-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-width: 48px;
  min-height: 48px;
  padding: 0 .35rem;
  border: 0;
  background: none;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(26, 22, 19, .55);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.llb-burger__box { display: block; position: relative; width: 22px; height: 14px; }
.llb-burger__box::before, .llb-burger__box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  height: 2px;
  background: currentColor;
  transition: transform .34s var(--ease);
}
.llb-burger__box::before { transform: translateY(-4px); }
.llb-burger__box::after { transform: translateY(4px); }
.llb-burger[aria-expanded="true"] {
  background: var(--basalt);
  color: var(--bone);
  box-shadow: inset 0 0 0 1.5px var(--basalt);
}
.llb-burger[aria-expanded="true"] .llb-burger__box::before { transform: rotate(45deg); }
.llb-burger[aria-expanded="true"] .llb-burger__box::after { transform: rotate(-45deg); }
/* Decorative — the accessible name is the visually hidden "Μενού", which must
   not change with state. .56rem keeps ΚΛΕΙΣΕ inside 48px; min-width rather than
   a fixed width means a wider face cannot clip it. */
.llb-burger__label {
  display: block;
  font-family: var(--font);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
}
.llb-burger__word--close,
.llb-burger[aria-expanded="true"] .llb-burger__word--open { display: none; }
.llb-burger[aria-expanded="true"] .llb-burger__word--close { display: inline; }
[hidden] { display: none !important; }
/* Panel styling lives in the mobile block at the end of this file; this keeps it
   out of the layout above 980px even if [hidden] is removed. */
.llb-mobile { display: none; }

/* ---------- hero ---------- */

.llb-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(90vh, 880px);
  padding: 0;
  background: var(--basalt);
  color: var(--bone);
  isolation: isolate;
  overflow: hidden;
}
.llb-hero__well {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  clip-path: none;
  background: var(--basalt);
  overflow: hidden;
}
.llb-hero__media, .llb-hero__slide { position: absolute; inset: 0; }
.llb-hero__slide { opacity: 0; transition: opacity 1.4s var(--ease); }
.llb-hero__slide.is-active { opacity: 1; }
.llb-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.95) contrast(1.04); }
.llb-hero__well::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(85deg, rgba(22, 18, 15, .78) 0%, rgba(22, 18, 15, .34) 42%, rgba(22, 18, 15, .04) 68%),
    linear-gradient(180deg, rgba(22, 18, 15, .32) 0%, transparent 34%, rgba(22, 18, 15, .5) 100%);
  pointer-events: none;
}
.llb-hero__cut {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--ember) 0 42%, var(--tuff) 42% 100%) bottom / 100% 4px no-repeat;
}
.llb-hero__tablet {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  align-self: end;
  width: min(41rem, 100%);
  margin: 0 0 clamp(2.5rem, 6vw, 5rem);
  margin-inline-start: max(var(--gutter), calc((100% - var(--max)) / 2));
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.8rem) clamp(1.7rem, 3vw, 2.6rem);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  box-shadow: 0 40px 80px -40px rgba(22, 18, 15, .7);
}
.llb-hero__tablet h1 { font-size: clamp(2.5rem, 4.6vw, 4.3rem); margin-bottom: .5rem; }
.llb-hero__tablet .llb-lead { color: var(--muted); max-width: 30rem; }
.llb-hero__tablet .llb-kicker { color: var(--ember); }
.llb-hero__tablet .llb-kicker::before { background: var(--ember); }
.llb-hero__year {
  margin: 1.3rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tuff-deep);
}
.llb-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.llb-hero__badge, .llb-marquee { display: none; }
.llb-dots {
  position: absolute;
  z-index: 3;
  right: max(var(--gutter), calc((100% - var(--max)) / 2));
  bottom: clamp(2.5rem, 6vw, 5rem);
  display: flex;
  gap: .5rem;
}
.llb-dots button {
  width: 34px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(250, 246, 239, .38);
  cursor: pointer;
  transition: background .3s;
}
.llb-dots button.is-active { background: var(--bone); }

/* Desktop: text and photo side by side. Laid over the photo, the card hid the
   children on every slide, which the Σύλλογος flagged; on a phone the stacked
   layout below 980px already kept them clear. */
@media (min-width: 981px) {
  .llb-hero {
    grid-template-columns: minmax(28rem, 42%) minmax(0, 1fr);
    align-items: stretch;
    min-height: min(80vh, 780px);
    background: var(--greige-light);
  }
  .llb-hero__well { grid-area: 1 / 2; }
  .llb-hero__well::after { background: linear-gradient(180deg, transparent 62%, rgba(22, 18, 15, .38) 100%); }
  .llb-hero__tablet {
    grid-area: 1 / 1;
    align-self: center;
    width: auto;
    margin: 0;
    margin-inline-start: max(var(--gutter), calc((100vw - var(--max)) / 2));
    padding: clamp(2.4rem, 4vw, 3.6rem) clamp(1.8rem, 3.4vw, 3.4rem) clamp(2.4rem, 4vw, 3.6rem) 0;
    background: none;
    clip-path: none;
    box-shadow: none;
  }
  .llb-hero__tablet h1 { font-size: clamp(2.4rem, 3.5vw, 3.8rem); }
}

/* ---------- stats ---------- */

.llb-stats { background: var(--burgundy); color: #fff; padding: clamp(2.6rem, 5vw, 4.2rem) 0 clamp(2rem, 4vw, 3rem); }
.llb-stats .llb-kicker { color: var(--tuff); }
.llb-stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-light);
  border-block: 1px solid var(--line-light);
}
.llb-stat { padding: clamp(1.2rem, 2.4vw, 2rem) clamp(.9rem, 1.6vw, 1.4rem); background: var(--dusk); }
.llb-stat strong {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.llb-stat span {
  display: block;
  margin-top: .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tuff);
}
.llb-stats__note { margin: 1.4rem 0 0; opacity: .82; font-size: .82rem; max-width: 52rem; }

/* ---------- editorial spread ---------- */

.llb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  padding: var(--section) 0;
}
.llb-split--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.llb-split > div > h2 { max-width: 22ch; }
.llb-frame { position: relative; background: none; padding: 0; clip-path: none; }
.llb-frame::before {
  content: "";
  position: absolute;
  inset: auto auto -14px -14px;
  width: 42%;
  height: 52%;
  border-left: 3px solid var(--tuff);
  border-bottom: 3px solid var(--tuff);
  pointer-events: none;
}
.llb-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.llb-band { background: var(--plaster); padding: var(--section) 0; position: relative; }
.llb-band::before { display: none; }

/* ---------- offers (photo-led programmes) ---------- */

.llb-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
}
.llb-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.llb-offer:hover {
  transform: translateY(-6px);
  border-color: var(--tuff);
  box-shadow: 0 34px 60px -36px rgba(22, 18, 15, .55);
  color: inherit;
}
.llb-offer__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--plaster); }
.llb-offer__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.llb-offer:hover .llb-offer__media img { transform: scale(1.05); }
.llb-offer__cost {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: .45rem .9rem;
  background: var(--basalt);
  color: var(--bone);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.llb-offer__body { padding: clamp(1.2rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.llb-offer__body h3 { margin: 0; }
.llb-offer__body p { margin: 0; color: var(--muted); font-size: .98rem; }
.llb-offer__go {
  margin-top: auto;
  padding-top: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ember);
}
.llb-offer__go::after { content: "→"; transition: transform .3s var(--ease); }
.llb-offer:hover .llb-offer__go::after { transform: translateX(5px); }

/* ---------- numbered paths ---------- */

.llb-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  border: 0;
}
.llb-path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.3rem, 2.2vw, 1.9rem) clamp(1.7rem, 2.6vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tuff-deep);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.llb-path:hover {
  transform: translateY(-6px);
  border-top-color: var(--ember);
  box-shadow: 0 34px 60px -36px rgba(22, 18, 15, .5);
  color: inherit;
}
.llb-path__n {
  font-family: var(--display);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  font-weight: 700;
  color: var(--tuff);
  line-height: .9;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.llb-path h2, .llb-path h3 { margin: 0; font-size: var(--fs-3); }
.llb-path p { margin: 0; color: var(--muted); font-size: .98rem; }
.llb-path > div { display: flex; flex-direction: column; gap: .45rem; }
.llb-path .llb-meta {
  align-self: flex-start;
  margin-top: .2rem;
  padding: .3rem .65rem;
  background: var(--plaster);
  color: var(--tuff-deep);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.llb-path::after {
  content: "→";
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 700;
  color: var(--ember);
  transition: transform .3s var(--ease);
}
.llb-path:hover::after { transform: translateX(5px); }

/* ---------- cards ---------- */

.llb-cards { display: grid; gap: clamp(1rem, 2vw, 1.7rem); }
.llb-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.llb-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.llb-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.llb-card {
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  box-shadow: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.llb-card:hover {
  transform: translateY(-5px);
  border-color: var(--tuff);
  box-shadow: 0 30px 56px -34px rgba(22, 18, 15, .5);
}
.llb-card--plain { background: var(--paper); border-left: 3px solid var(--tuff-deep); }
.llb-card--plain:hover { transform: none; box-shadow: none; border-left-color: var(--ember); }
.llb-card__media { aspect-ratio: 3 / 2; background: var(--plaster); display: block; overflow: hidden; }
.llb-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.llb-card:hover .llb-card__media img { transform: scale(1.04); }
.llb-card__body { padding: clamp(1.1rem, 2vw, 1.5rem); }
.llb-card__body > *:last-child { margin-bottom: 0; }
.llb-card h2, .llb-card h3 { margin-bottom: .4rem; font-size: var(--fs-3); }
.llb-card h3 a, .llb-card h2 a { text-decoration: none; color: inherit; }
.llb-card h3 a:hover, .llb-card h2 a:hover { color: var(--ember); }
.llb-card .llb-meta { margin-bottom: .4rem; font-size: .86rem; font-weight: 700; letter-spacing: .02em; color: var(--tuff-deep); }
.llb-card p { color: var(--muted); font-size: .98rem; }
.llb-card--person { border: 0; background: none; }
.llb-card--person:hover { transform: none; box-shadow: none; }
.llb-card--person .llb-card__media { aspect-ratio: 4 / 3; background: var(--plaster); border: 1px solid var(--line); }
.llb-card--person .llb-card__media img { object-fit: contain; }
.llb-card--person .llb-card__body { padding: .9rem 0 0; }
.llb-card--person h3 { margin-bottom: .1rem; }
.llb-card--person .llb-meta { letter-spacing: 0; font-weight: 400; color: var(--muted); font-size: .92rem; }

/* ---------- page hero ---------- */

.llb-pagehero { position: relative; background: var(--bone); color: var(--ink); padding: 0; }
.llb-pagehero__bg { display: none; }
.llb-pagehero__well {
  width: 100%;
  margin: 0;
  height: clamp(260px, 46vh, 480px);
  overflow: hidden;
  position: relative;
  clip-path: none;
}
.llb-pagehero__well img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.9); }
.llb-pagehero__well::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(85deg, rgba(22, 18, 15, .6) 0%, rgba(22, 18, 15, .2) 46%, transparent 72%),
    linear-gradient(180deg, rgba(22, 18, 15, .3) 0%, transparent 40%, rgba(22, 18, 15, .42) 100%);
}
.llb-pagehero .llb-wrap { position: relative; z-index: 1; }
.llb-pagehero .llb-tablet {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.3rem, 2.6vw, 2.4rem);
  margin-top: clamp(-5rem, -7vw, -3.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 46rem;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  box-shadow: 0 36px 70px -40px rgba(22, 18, 15, .6);
}
.llb-pagehero .llb-tablet h1 { font-size: clamp(2.2rem, 4.4vw, 3.9rem); margin-bottom: .4rem; }
.llb-pagehero .llb-tablet .llb-lead { color: var(--muted); }
@media (min-width: 981px) {
  /* Taller, so a landscape photo is not cut to a strip through the faces, and
     the card only overlaps the bottom edge instead of the subject. */
  .llb-pagehero__well { height: clamp(340px, 62vh, 620px); }
  .llb-pagehero__well::after {
    background: linear-gradient(180deg, rgba(22, 18, 15, .18) 0%, transparent 30%, transparent 78%, rgba(22, 18, 15, .3) 100%);
  }
  .llb-pagehero .llb-tablet { margin-top: -3rem; }
}
.llb-pagehero--plain {
  background: var(--plaster);
  color: var(--ink);
  padding: clamp(3.4rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.llb-pagehero--plain .llb-tablet { margin: 0; background: none; padding: 0; border: 0; max-width: 52rem; clip-path: none; box-shadow: none; }
.llb-pagehero--plain .llb-lead { color: var(--muted); }

/* ---------- story portrait ---------- */

.llb-storyfig { float: left; width: min(40%, 280px); margin: .3rem 2.2rem 1.4rem 0; }
.llb-storyfig img { width: 100%; height: auto; box-shadow: 10px 10px 0 var(--sun); }
.llb-prose::after { content: ""; display: block; clear: both; }
@media (max-width: 680px) {
  .llb-storyfig { float: none; width: auto; max-width: 260px; margin: 0 0 1.4rem; }
}

/* ---------- prose with a photo beside it ---------- */

.llb-bodyside {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.llb-bodyside .llb-prose > p:first-child { font-size: var(--fs-lead); line-height: 1.5; }
.llb-bodyside__media { margin: 0; position: sticky; top: 7rem; }
.llb-bodyside__media img { aspect-ratio: 4 / 5; }
@media (max-width: 980px) {
  .llb-bodyside { grid-template-columns: 1fr; }
  .llb-bodyside__media { position: static; order: -1; max-width: 32rem; }
  .llb-bodyside__media img { aspect-ratio: 4 / 3; }
}

/* ---------- prose, cta, logos ---------- */

.llb-prose { max-width: 64ch; font-size: 1.09rem; }
/* Keep the container full width so prose stays on the left grid edge, not centred. */
.llb-wrap.llb-prose { max-width: none; }
.llb-wrap.llb-prose > * { max-width: 64ch; }
/* :first-child rather than :first-of-type, so a body that opens with a heading
   does not hand the lead measure to a paragraph in the middle of the page. */
.llb-wrap.llb-prose > p:first-child { font-size: var(--fs-lead); line-height: 1.5; max-width: 48ch; }
.llb-prose > *:first-child { margin-top: 0; }
.llb-prose h2 { margin-top: 1.6em; }
.llb-prose a { color: var(--crimson); }
.llb-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
/* Column headings are sub-section level, so they must not shout like a page h2. */
.llb-grid-2 > div > h2 { font-size: clamp(1.35rem, 1.9vw, 1.8rem); }

.llb-cta { background: var(--greige); color: var(--ink); padding: clamp(3.6rem, 7vw, 6.5rem) 0; position: relative; overflow: hidden; }
.llb-cta::after {
  content: "30";
  position: absolute;
  right: 3%;
  bottom: -3rem;
  font-family: var(--display);
  font-size: clamp(9rem, 24vw, 20rem);
  font-weight: 700;
  line-height: .7;
  color: rgba(255, 255, 255, .22);
  pointer-events: none;
}
.llb-cta__inner { display: flex; justify-content: space-between; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: flex-end; position: relative; z-index: 1; }
.llb-cta h2 { max-width: 26ch; }
.llb-cta p:not(.llb-kicker) { color: rgba(42, 36, 34, .82); max-width: 34rem; margin: 0; }
.llb-cta__actions { display: flex; gap: .7rem; flex-wrap: wrap; flex-shrink: 0; }

.llb-logos { padding: clamp(2.6rem, 5vw, 4rem) 0; background: var(--bone); border-top: 1px solid var(--line); }
.llb-logos h2 { font-size: .74rem; font-family: var(--font); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.6rem; }
.llb-logos__row { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.llb-logo-item { width: auto; background: none; padding: 0; border: 0; }
.llb-logo-item img {
  width: auto;
  max-width: 200px;
  height: clamp(58px, 5.4vw, 78px);
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  mix-blend-mode: multiply;
  transition: opacity .3s, filter .3s;
}
.llb-logo-item:hover img { filter: none; opacity: 1; }

/* ---------- timeline, steps, faq, docs, filters ---------- */

.llb-timeline { list-style: none; margin: 0; padding: 0; }
.llb-timeline li {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding: 0 0 2rem 1.6rem;
  border-left: 2px solid var(--line);
  margin-left: .4rem;
  position: relative;
}
.llb-timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: .55rem;
  width: 10px;
  height: 10px;
  background: var(--ember);
}
.llb-timeline li:last-child { padding-bottom: 0; }
.llb-timeline span { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--tuff-deep); font-variant-numeric: lining-nums tabular-nums; }
.llb-timeline h3 { margin-bottom: .2rem; }
.llb-timeline p { margin: 0; color: var(--muted); }

.llb-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0; }
.llb-steps li { background: var(--paper); padding: 1.4rem; border: 1px solid var(--line); border-top: 3px solid var(--tuff); }
.llb-steps span { font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--tuff); display: block; line-height: 1; margin-bottom: .5rem; }

.llb-faq details { border-bottom: 1px solid var(--line); padding: 1.15rem 0; }
.llb-faq summary { cursor: pointer; font-weight: 700; font-family: var(--display); font-size: 1.15rem; }
.llb-faq details[open] summary { color: var(--ember); }

.llb-docs { list-style: none; padding: 0; columns: 2; gap: clamp(1.5rem, 4vw, 3rem); }
.llb-docs a { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; text-decoration: none; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.llb-docs a:hover { color: var(--ember); }

.llb-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; }
.llb-filters a {
  padding: .5rem 1rem;
  background: transparent;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
.llb-filters a.is-active, .llb-filters a:hover { background: var(--basalt); color: var(--bone); border-color: var(--basalt); }

.llb-help, .llb-trust { text-align: left; padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.llb-help h2 { max-width: 24ch; }
.llb-trust { background: var(--plaster); border-block: 1px solid var(--line); }
.llb-trust .llb-wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.llb-trust p { margin: 0; font-weight: 600; }

.llb-map iframe { width: 100%; height: 320px; border: 0; }
.llb-video { aspect-ratio: 16 / 9; margin-bottom: 1.5rem; }
.llb-video iframe { width: 100%; height: 100%; border: 0; }
.llb-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.llb-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--plaster); }
/* Homepage grid: six squares per row. Three of the twelve originals are under
   600px, so the tile is deliberately small and never asked to upscale. */
.llb-gallery--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.llb-gallery--six img { aspect-ratio: 1; }
.llb-beforeafter img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; padding: .5rem; }

/* ---------- lightbox ---------- */

.llb-gallery__link { display: block; position: relative; overflow: hidden; background: var(--plaster); }
.llb-gallery__link img { transition: transform .6s var(--ease); }
.llb-gallery__link:hover img, .llb-gallery__link:focus-visible img { transform: scale(1.05); }
/* Ember tick on hover: the tile opens a viewer, it does not navigate. */
.llb-gallery__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  background: var(--ember);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.llb-gallery__link:hover::after, .llb-gallery__link:focus-visible::after { opacity: 1; }

.llb-lightbox {
  --chip: 52px;
  --notch: 11px;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: clamp(.6rem, 2vw, 1.4rem) clamp(.7rem, 3vw, 2.4rem) clamp(.7rem, 2vw, 1.5rem);
  border: 0;
  background: none;
  color: var(--bone);
  overflow: hidden;
}
/* Only [open], so the dialog keeps the UA display: none while it is closed. */
.llb-lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(.5rem, 1.4vw, 1rem);
}
/* Lifted in the middle so bright photos have ground to sit on. The depth comes
   from the gradient, not from letting the page show: at 3% the headlines behind
   were still legible and competed with the photo. */
.llb-lightbox::backdrop { background: radial-gradient(125% 95% at 50% 30%, rgba(30, 24, 20, .988), rgba(10, 8, 7, .997)); }

.llb-lightbox__bar { display: flex; align-items: center; gap: 1rem; }
.llb-lightbox__title {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: rgba(250, 246, 239, .56);
}
.llb-lightbox__title::before { content: ""; width: 26px; height: 2px; background: var(--ember); }
/* The script holds this back 220ms, so a cached photo never flashes a label. */
.llb-lightbox__loading {
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--tuff);
  opacity: 0;
}
.llb-lightbox.is-loading .llb-lightbox__loading { opacity: 1; }
.llb-lightbox__close { margin-left: auto; }

/* Flex, not grid: the image's percentage max-height only resolves against a
   flex parent, so a grid stage lets tall photos spill past the viewport.
   pinch-zoom keeps two-finger zoom with the browser while single-finger drags
   reach the script. */
.llb-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  touch-action: pinch-zoom;
  user-select: none;
}
.llb-lightbox__img, .llb-lightbox__ghost {
  width: auto;
  height: auto;
  /* --w and --h are the served file's own pixels, so a small original stays
     small instead of being stretched into mush. */
  max-width: min(100%, var(--w, 100%));
  max-height: min(100%, var(--h, 100%));
  box-shadow: 0 0 0 1px rgba(250, 246, 239, .13), 0 26px 60px -26px rgba(0, 0, 0, .9);
}
/* Positioned, so it paints over the outgoing frame. --dx/--dy follow the finger. */
.llb-lightbox__img {
  position: relative;
  z-index: 1;
  translate: var(--dx, 0px) var(--dy, 0px);
  scale: calc(1 - var(--fade, 0) * .1);
  opacity: calc(1 - var(--fade, 0) * .75);
}
.llb-lightbox[data-state="loading"] .llb-lightbox__img { filter: blur(12px); }
.llb-lightbox__ghost { position: absolute; inset: 0; margin: auto; opacity: 0; pointer-events: none; }

.llb-lightbox__rail { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.llb-lightbox__meta { min-width: 0; text-align: center; }
.llb-lightbox__caption {
  margin: 0 0 .3rem;
  font-family: var(--display);
  font-size: clamp(.9rem, 1vw, 1.02rem);
  line-height: 1.42;
  color: rgba(250, 246, 239, .8);
  max-width: 62ch;
  text-wrap: balance;
}
.llb-lightbox__count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.llb-lightbox__label { font-size: .6rem; font-weight: 700; letter-spacing: .22em; color: rgba(250, 246, 239, .42); }
.llb-lightbox__at { font-family: var(--display); font-size: 1.02rem; font-weight: 700; line-height: 1; }
.llb-lightbox__total { font-size: .76rem; color: rgba(250, 246, 239, .46); }

.llb-lightbox__close, .llb-lightbox__nav {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--chip);
  height: var(--chip);
  padding: 0;
  border: 0;
  background: rgba(16, 13, 11, .55);
  box-shadow: inset 0 0 0 1px var(--line-light);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  color: var(--bone);
  cursor: pointer;
  transition: background .22s var(--ease), box-shadow .22s, scale .22s var(--ease);
}
.llb-lightbox__close:hover, .llb-lightbox__nav:hover { background: var(--ember); box-shadow: inset 0 0 0 1px rgba(255, 247, 238, .55); }
.llb-lightbox__close:active, .llb-lightbox__nav:active { scale: .94; }
/* clip-path crops an outline off, so the focus ring is drawn inside the shape. */
.llb-lightbox__close:focus-visible, .llb-lightbox__nav:focus-visible {
  outline: none;
  background: var(--ember);
  box-shadow: inset 0 0 0 2px var(--bone);
}
.llb-lightbox__nav {
  --chip: 56px;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.llb-lightbox__nav--prev { left: clamp(.4rem, 1.5vw, 1.3rem); }
.llb-lightbox__nav--next { right: clamp(.4rem, 1.5vw, 1.3rem); }
.llb-lightbox__x { display: block; position: relative; width: 17px; height: 17px; }
.llb-lightbox__x::before, .llb-lightbox__x::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 17px;
  height: 2px;
  background: currentColor;
}
.llb-lightbox__x::before { transform: rotate(45deg); }
.llb-lightbox__x::after { transform: rotate(-45deg); }
.llb-lightbox__arrow {
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.llb-lightbox__nav--next .llb-lightbox__arrow { transform: translateX(-2px) rotate(45deg); }
.llb-lightbox__nav--prev .llb-lightbox__arrow { transform: translateX(2px) rotate(-135deg); }
.llb-lightbox__nav--next:hover .llb-lightbox__arrow { translate: 2px 0; }
.llb-lightbox__nav--prev:hover .llb-lightbox__arrow { translate: -2px 0; }
body.llb-lightbox-open { overflow: hidden; }

/* Phones: the pair moves down beside the caption, into thumb reach and off
   the photo. */
@media (max-width: 680px) {
  .llb-lightbox { --chip: 46px; --notch: 9px; }
  .llb-lightbox__nav { --chip: 46px; position: static; translate: none; }
  .llb-lightbox__rail { justify-content: space-between; gap: .6rem; }
  .llb-lightbox__caption { font-size: .86rem; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Entry animations rather than display/overlay transitions: fading the exit
     would keep a closed dialog painted in the top layer, and dismissal wants to
     feel immediate anyway. */
  .llb-lightbox[open] { animation: llb-lightbox-in .24s var(--ease); }
  .llb-lightbox[open]::backdrop { animation: llb-lightbox-in .3s var(--ease); }
  .llb-lightbox__loading { transition: opacity .2s; }
  .llb-lightbox.is-loading .llb-lightbox__loading { animation: llb-shot-wait 1.5s ease-in-out infinite; }
  .llb-lightbox__img { transition: filter .45s var(--ease), translate .3s var(--ease), scale .3s var(--ease), opacity .3s var(--ease); }
  /* Nothing eases while a finger is on it. */
  .llb-lightbox.is-dragging .llb-lightbox__img { transition: none; }
  .llb-lightbox__img.is-from-next { animation: llb-shot-next .36s var(--ease); }
  .llb-lightbox__img.is-from-prev { animation: llb-shot-prev .36s var(--ease); }
  .llb-lightbox__img.is-from-open { animation: llb-shot-open .36s var(--ease); }
  .llb-lightbox__ghost.is-out { animation: llb-shot-out .34s var(--ease); }
}
@keyframes llb-lightbox-in { from { opacity: 0; } }
@keyframes llb-shot-next { from { opacity: 0; translate: 7% 0; } }
@keyframes llb-shot-prev { from { opacity: 0; translate: -7% 0; } }
@keyframes llb-shot-open { from { opacity: 0; scale: .965; } }
@keyframes llb-shot-out { from { opacity: 1; } }
@keyframes llb-shot-wait { 50% { opacity: .3; } }

/* ---------- stories ---------- */

.llb-storylist { display: grid; gap: 0; }
.llb-storylist .llb-card {
  display: grid;
  grid-template-columns: min(260px, 32%) 1fr;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: clamp(1.2rem, 2.4vw, 2rem) 0;
}
.llb-storylist .llb-card:hover { transform: none; box-shadow: none; }
.llb-storylist .llb-card:hover .llb-card__media img { transform: scale(1.04); }
.llb-storylist .llb-card--text { grid-template-columns: 1fr; }
.llb-storylist .llb-card__media { aspect-ratio: 4 / 3; }
.llb-storylist .llb-card__body { padding: 0; align-self: center; }
.llb-storylist .llb-card h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }

.llb-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
  padding-bottom: clamp(2rem, 4vw, 3.4rem);
  margin-bottom: clamp(1rem, 2vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.llb-featured--plain { grid-template-columns: 1fr; }
.llb-featured__media { display: block; overflow: hidden; }
.llb-featured__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transition: transform .7s var(--ease);
}
.llb-featured__media:hover img { transform: scale(1.03); }
.llb-featured h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.llb-featured p { color: var(--muted); }

.llb-quote {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0 0 1.2rem;
  padding-left: 1.2rem;
  border-left: 3px solid var(--ember);
}

.llb-ethiopia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.llb-facts { display: grid; gap: 0; }
.llb-fact { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.llb-fact:last-child { border-bottom: 1px solid var(--line); }
.llb-fact strong { display: block; font-family: var(--display); font-size: 1.2rem; margin-bottom: .2rem; }
.llb-fact p { margin: 0; color: var(--muted); font-size: .98rem; }

/* ---------- centres ---------- */

.llb-centres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.7rem);
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.llb-place { background: none; border: 0; }
.llb-place:hover { border: 0; }
.llb-place__media {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--plaster);
  overflow: hidden;
  position: relative;
}
.llb-place__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.llb-place__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(22, 18, 15, .5) 100%);
  transition: opacity .4s;
}
.llb-place:hover .llb-place__media img { transform: scale(1.05); }
.llb-ph { display: grid; place-items: center; height: 100%; font-family: var(--display); font-size: 1.3rem; color: var(--tuff-deep); padding: 1rem; text-align: center; }
.llb-place__body { padding: .9rem 0 0; }
.llb-place h3 { margin: 0; font-size: 1.25rem; }
.llb-place h3 a { text-decoration: none; color: inherit; }
.llb-place:hover h3 a { color: var(--ember); }
.llb-place .llb-meta { margin: .15rem 0 0; font-size: .9rem; }
.llb-flag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  margin-bottom: .3rem;
  text-transform: uppercase;
}
.llb-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.llb-flag--on { color: var(--ember); }
.llb-flag--off { color: var(--muted); }
.llb-kicker--space { margin-top: clamp(1.6rem, 3vw, 2.6rem); }

/* ---------- rails ---------- */

.llb-rail { display: grid; gap: 0; }
.llb-rail article {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  border-top: 1px solid var(--line);
  transition: background .3s;
}
.llb-rail article:last-child { border-bottom: 1px solid var(--line); }
.llb-rail span {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tuff-deep);
  font-variant-numeric: lining-nums tabular-nums;
}
.llb-rail h3 { margin: 0 0 .2rem; }
.llb-rail p { margin: 0; color: var(--muted); font-size: .98rem; max-width: 60ch; }
.llb-rail h3 a, .llb-featured h2 a { text-decoration: none; color: inherit; }
.llb-rail h3 a:hover, .llb-featured h2 a:hover { color: var(--ember); }

/* ---------- forms ---------- */

.llb-form { display: grid; gap: .95rem; }
.llb-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.llb-form label { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; }
.llb-form input, .llb-form textarea, .llb-form select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: .8rem .95rem;
  font: inherit;
  background: var(--paper);
  transition: border-color .2s, box-shadow .2s;
}
.llb-form input:focus, .llb-form textarea:focus, .llb-form select:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(200, 70, 28, .16);
}
.llb-span { grid-column: 1 / -1; }
/* Beats the `.llb-form label` grid rule, which would stack the box above its text. */
.llb-form .llb-check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .92rem; }
.llb-form .llb-check input { width: auto; margin-top: .3rem; flex-shrink: 0; }
.llb-form--compact { gap: .6rem; }
.llb-form__ok, .llb-form__err { margin: 0; font-size: .92rem; font-weight: 600; }
.llb-form__err { color: var(--ember); }
.llb-notice { padding: 1rem 1.2rem; margin-bottom: 1.4rem; border-left: 3px solid; }
.llb-notice--ok { background: #e8f0e6; border-color: #4b7a44; }
.llb-notice--err { background: #f7e6e1; border-color: var(--ember); }

/* ---------- footer ---------- */

.llb-footer { background: var(--burgundy); color: rgba(255, 255, 255, .86); padding: clamp(3rem, 6vw, 5rem) 0 0; }
.llb-footer a { color: #fff8ef; text-decoration: none; }
.llb-footer a:hover { color: var(--tuff); }
.llb-footer h2 {
  font-size: .72rem;
  font-family: var(--font);
  color: var(--tuff);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.llb-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.llb-footer__grid > div > p { font-size: .96rem; }
.llb-footer__menu, .llb-legal { list-style: none; padding: 0; margin: 0; }
.llb-footer__menu a, .llb-legal a { display: inline-block; padding: .3rem 0; font-size: .96rem; }
.llb-badge {
  display: inline-block;
  border-left: 2px solid var(--tuff);
  padding: .2rem 0 .2rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tuff);
}
.llb-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.llb-social a { font-size: .9rem; font-weight: 600; border-bottom: 1px solid var(--line-light); }
.llb-footer__legal { border-top: 1px solid var(--line-light); padding: 1.2rem 0; font-size: .88rem; }
.llb-footer__legal p { margin: 0; }
.llb-footer__legal .llb-wrap { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.llb-legal { display: flex; gap: 1.4rem; }
.llb-logo--foot { display: inline-block; margin-bottom: 1.3rem; }
/* The full colour mark is a JPEG on white, so it sits on its own white tile
   on the burgundy band rather than showing a hard white box edge. */
.llb-logo--foot img { height: 132px; width: auto; background: #fff; padding: 10px; box-sizing: content-box; }
.llb-pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.llb-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.llb-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .6rem;
  border: 1px solid var(--line-strong);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.llb-pagination .page-numbers.current, .llb-pagination .page-numbers:hover { background: var(--basalt); color: var(--bone); border-color: var(--basalt); }

/* ---------- shared rhythm helpers ---------- */

.llb-section--tight { padding: clamp(2.6rem, 5vw, 4.4rem) 0; }
.llb-prose--wide > * { max-width: 78ch; }
.llb-prose--compact { font-size: .98rem; }
.llb-prose--compact p, .llb-prose--compact li { color: var(--muted); }
.llb-note {
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--tuff);
  color: var(--muted);
  font-size: .92rem;
  max-width: 70ch;
}

/* Numbered statutory text reads as a list, not as one long paragraph. */
.llb-prose--numbered ol { counter-reset: llb-purpose; list-style: none; padding: 0; margin: 0; }
.llb-prose--numbered ol > li {
  counter-increment: llb-purpose;
  position: relative;
  padding: 1.1rem 0 1.1rem 3.2rem;
  border-top: 1px solid var(--line);
  max-width: 78ch;
}
.llb-prose--numbered ol > li:last-child { border-bottom: 1px solid var(--line); }
.llb-prose--numbered ol > li::before {
  content: counter(llb-purpose, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tuff-deep);
  letter-spacing: .02em;
}

/* Two-column editorial block: argument left, supporting matter right. */
.llb-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: start;
}
.llb-editorial--reverse { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.llb-editorial--reverse .llb-editorial__text { order: 2; }
.llb-editorial--reverse .llb-editorial__aside { order: 1; }
.llb-editorial__text > h2 { margin-top: 0; }
.llb-editorial__aside { padding-top: .4rem; }
.llb-editorial__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--plaster);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

/* ---------- people ---------- */

.llb-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
}
.llb-people--quiet {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.2rem, 2.6vw, 2.2rem);
}
.llb-person {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tuff);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.llb-person__head { display: flex; align-items: center; gap: 1.1rem; }
.llb-person__head > div { min-width: 0; }
.llb-person__head h3 { margin: 0; font-size: 1.2rem; }
/* Larger on request. The current files are 150–200px originals, which hold
   up at this size; a new portrait of 400px or more will be sharp. */
.llb-person__photo {
  flex: 0 0 auto;
  width: 168px;
  height: 168px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 4px;
  overflow: hidden;
}
.llb-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.llb-person--compact .llb-person__photo { width: 128px; height: 128px; }
@media (max-width: 680px) {
  .llb-person__photo { width: 120px; height: 120px; }
  .llb-person--compact .llb-person__photo { width: 104px; height: 104px; }
}
.llb-person__role {
  margin: .2rem 0 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ember);
}
.llb-person__since { margin: .2rem 0 0; font-size: .88rem; color: var(--muted); }
.llb-person__bio { color: var(--muted); font-size: .98rem; }
.llb-person__bio p { margin: 0 0 .7rem; }
.llb-person__bio > p:last-child { margin-bottom: 0; }
.llb-person__more[open] { margin-top: .2rem; }
.llb-person__more summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ember);
}
.llb-person__more summary::-webkit-details-marker { display: none; }
.llb-person__more summary::after { content: ' +'; }
.llb-person__more[open] summary::after { content: ' –'; }
.llb-person__more[open] summary { margin-bottom: .7rem; }
.llb-person__more p:last-child { margin-bottom: 0; }

.llb-rolelist { list-style: none; padding: 0; margin: 0; }
.llb-rolelist li { padding: .85rem 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.llb-rolelist li:last-child { border-bottom: 1px solid var(--line); }
.llb-rolelist strong { font-family: var(--display); font-size: 1.05rem; }
.llb-rolelist span { color: var(--muted); font-size: .84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.llb-rolelist--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.llb-rolelist--grid li:nth-child(2) { border-top: 1px solid var(--line); }

/* ---------- partners ---------- */

.llb-partners { display: grid; gap: 0; }
.llb-partner {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0;
  border-top: 1px solid var(--line);
}
.llb-partner:last-child { border-bottom: 1px solid var(--line); }
.llb-partner__mark {
  display: grid;
  place-items: center;
  min-height: 96px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 1rem;
}
.llb-partner__mark img { max-height: 68px; width: auto; mix-blend-mode: multiply; }
.llb-partner__initials { font-family: var(--display); font-size: 1.9rem; font-weight: 700; color: var(--tuff-deep); }
.llb-partner__body h3 { margin: 0 0 .4rem; }
.llb-partner__body p { margin: 0 0 .7rem; color: var(--muted); max-width: 68ch; }

.llb-logogrid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: center;
}
.llb-logogrid .llb-logo-item { display: grid; place-items: center; min-height: 124px; background: var(--paper); border: 1px solid var(--line); padding: 1.15rem; }
.llb-logogrid .llb-logo-item img { max-height: 82px; max-width: min(100%, 220px); width: auto; mix-blend-mode: multiply; }
/* The logo is wrapped in its website link: centre inside the link too. */
.llb-logogrid .llb-logo-item > a { display: grid; place-items: center; width: 100%; }
.llb-logogrid .llb-logo-item span { font-weight: 600; color: var(--muted); text-align: center; font-size: .95rem; }

/* ---------- vision / values ---------- */

.llb-statement { border-top: 3px solid var(--ember); padding-top: clamp(1.2rem, 2.6vw, 2rem); }
.llb-statement__text > * {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.9vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 700;
  max-width: 34ch;
  margin: 0;
}

.llb-values {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.llb-value { background: var(--paper); border: 1px solid var(--line); padding: clamp(1.1rem, 2.2vw, 1.6rem); }
.llb-value__num {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tuff);
  line-height: 1;
  margin-bottom: .7rem;
}
.llb-value h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.llb-value p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ---------- results ---------- */

.llb-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.llb-figure { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.llb-figure strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--basalt);
}
.llb-figure h3 { margin: .5rem 0 .3rem; font-size: 1.05rem; }
.llb-figure p { margin: 0; color: var(--muted); font-size: .94rem; }

.llb-splitbar { display: flex; height: 14px; margin-bottom: 1.6rem; overflow: hidden; }
.llb-splitbar span { width: var(--w); background: var(--tuff); }
.llb-splitbar span:nth-child(2) { background: var(--ember); }
.llb-splitbar span:nth-child(3) { background: var(--dusk); }
.llb-splitbar span:nth-child(4) { background: var(--tuff-deep); }
.llb-splitlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.llb-splitlist li {
  display: grid;
  grid-template-columns: 14px 7ch minmax(0, 18ch) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: .95rem 0;
  border-top: 1px solid var(--line);
}
.llb-splitlist li:last-child { border-bottom: 1px solid var(--line); }
.llb-splitlist__swatch { width: 14px; height: 14px; background: var(--tuff); transform: translateY(2px); }
.llb-splitlist li:nth-child(2) .llb-splitlist__swatch { background: var(--ember); }
.llb-splitlist li:nth-child(3) .llb-splitlist__swatch { background: var(--dusk); }
.llb-splitlist li:nth-child(4) .llb-splitlist__swatch { background: var(--tuff-deep); }
.llb-splitlist strong { font-family: var(--display); font-size: 1.4rem; }
.llb-splitlist__label { font-weight: 700; }
.llb-splitlist__text { color: var(--muted); font-size: .94rem; }

.llb-tags { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.llb-tags li { padding: .32rem .7rem; background: var(--plaster); border: 1px solid var(--line); font-size: .88rem; font-weight: 600; }

/* ---------- video ---------- */

/* Poster button, not an iframe: the player only loads on click. */
.llb-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--basalt);
  cursor: pointer;
  overflow: hidden;
}
.llb-video img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .3s; }
.llb-video:hover img { transform: scale(1.04); opacity: .9; }
.llb-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 68px;
  background: var(--ember);
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease), background .3s;
}
.llb-video__play::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 18px solid var(--bone);
  border-block: 12px solid transparent;
  margin-left: 5px;
}
.llb-video:hover .llb-video__play { transform: scale(1.08); background: var(--crimson); }
.llb-video iframe { width: 100%; height: 100%; border: 0; }
.llb-embed { aspect-ratio: 16 / 9; margin-bottom: 1.6rem; }
.llb-embed iframe { width: 100%; height: 100%; border: 0; }
/* Play badge marks a card whose still came from an interview. */
.llb-card__media--video { position: relative; }
.llb-card__media--video::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 20px solid var(--bone);
  border-block: 13px solid transparent;
  filter: drop-shadow(0 2px 10px rgba(22, 18, 15, .6));
  transition: transform .3s var(--ease);
}
.llb-card:hover .llb-card__media--video::after { transform: scale(1.12); }

.llb-figurevideo { margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; }
.llb-figurevideo figcaption { padding-top: .6rem; font-size: .9rem; color: var(--muted); }

.llb-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.llb-videocard { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.llb-videocard__body { padding: clamp(1rem, 2vw, 1.4rem); display: flex; flex-direction: column; gap: .4rem; }
.llb-videocard h3 { margin: 0; font-size: 1.12rem; }
.llb-videocard h3 a { text-decoration: none; color: inherit; }
.llb-videocard h3 a:hover { color: var(--ember); }
.llb-videocard p { margin: 0; color: var(--muted); font-size: .95rem; }
.llb-videocard .llb-textlink { margin-top: auto; padding-top: .5rem; }

/* ---------- transparency documents ---------- */

.llb-docgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
.llb-docgroup h3 {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 .4rem;
  font-size: 1.2rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--basalt);
}
.llb-docgroup h3 span {
  font-family: var(--font);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  margin-left: auto;
}
.llb-docs { list-style: none; padding: 0; margin: 0; columns: auto; }
.llb-docs li { border-bottom: 1px solid var(--line); }
.llb-docs a {
  display: grid;
  grid-template-columns: 5ch minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: baseline;
  padding: .75rem 0;
  text-decoration: none;
  border: 0;
  color: var(--ink);
  font-weight: 600;
}
.llb-docs a:hover { color: var(--ember); }
.llb-docs__year { font-family: var(--display); font-weight: 700; color: var(--tuff-deep); }
.llb-docs__meta { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
.llb-docs a:hover .llb-docs__meta { color: var(--ember); }
.llb-docs__note { margin: 0 0 .6rem; font-size: .88rem; color: var(--muted); }

/* ---------- centre + mission + project archives ---------- */

.llb-centre { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.llb-centre__media { display: block; aspect-ratio: 4 / 3; background: var(--plaster); overflow: hidden; }
.llb-centre__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.llb-centre:hover .llb-centre__media img { transform: scale(1.05); }
.llb-centre__body { padding: clamp(.9rem, 1.8vw, 1.3rem); display: flex; flex-direction: column; gap: .35rem; }
.llb-centre__body h3 { margin: 0; font-size: 1.18rem; }
.llb-centre__body h3 a { text-decoration: none; color: inherit; }
.llb-centre:hover h3 a { color: var(--ember); }
.llb-centre__city { margin: 0; font-size: .86rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tuff-deep); }
.llb-centre__body p { margin: 0; color: var(--muted); font-size: .95rem; }
.llb-centre__body .llb-flag { margin-top: auto; align-self: flex-start; }
.llb-centre--quiet { background: transparent; border-color: var(--line); }
.llb-centre--quiet .llb-centre__media { aspect-ratio: 16 / 9; }

.llb-facts { display: grid; gap: 0; margin: 0; }
.llb-facts > div { display: grid; grid-template-columns: minmax(0, 11ch) minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.llb-facts > div:last-child { border-bottom: 1px solid var(--line); }
.llb-facts dt { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.llb-facts dd { margin: 0; font-weight: 600; }

.llb-tasks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.llb-tasks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--line-light); color: rgba(250, 246, 239, .88); font-size: .98rem; }
.llb-tasks__mark { width: 18px; height: 2px; background: var(--tuff); transform: translateY(.7em); }
.llb-band .llb-tasks li { border-color: var(--line); color: var(--ink); }

.llb-years { display: grid; gap: 0; }
.llb-year {
  display: grid;
  grid-template-columns: 7ch minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--line);
}
.llb-year:last-child { border-bottom: 1px solid var(--line); }
.llb-year__num { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1; color: var(--tuff-deep); }
.llb-year__body h3 { margin: 0 0 .3rem; }
.llb-year__body h3 a { text-decoration: none; color: inherit; }
.llb-year__body h3 a:hover { color: var(--ember); }
.llb-year__places { margin: 0 0 .4rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.llb-year__body p { margin: 0 0 .6rem; color: var(--muted); }
.llb-year__video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.llb-works { display: grid; gap: clamp(2.4rem, 5vw, 4rem); }
.llb-work { border-top: 3px solid var(--tuff); padding-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.llb-work__head h3 { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.llb-beforeafter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.6rem, 1.6vw, 1.2rem); }
.llb-beforeafter figure { margin: 0; }
.llb-beforeafter figcaption { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: .5rem; }
.llb-work__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.llb-work__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.6rem); margin: 1.4rem 0 0; }
.llb-work__facts dt { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tuff-deep); margin-bottom: .3rem; }
.llb-work__facts dd { margin: 0; color: var(--muted); }

/* ---------- hub + strand cards ---------- */

.llb-hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); }
.llb-hubcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background: var(--paper);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: transform .35s var(--ease), border-color .35s;
}
.llb-hubcard:hover { transform: translateY(-4px); border-color: var(--ember); color: inherit; }
.llb-hubcard h3 { margin: 0; font-size: 1.1rem; }
.llb-hubcard p { margin: 0; color: var(--muted); font-size: .94rem; }
.llb-hubcard__go { display: block; width: 26px; height: 2px; background: var(--ember); margin-top: auto; padding-top: .9rem; transition: width .35s var(--ease); }
.llb-hubcard:hover .llb-hubcard__go { width: 42px; }

.llb-strands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.llb-strand { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.llb-strand:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -28px rgba(22, 18, 15, .5); color: inherit; }
.llb-strand__media { aspect-ratio: 16 / 10; background: var(--plaster); overflow: hidden; }
.llb-strand__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.llb-strand:hover .llb-strand__media img { transform: scale(1.05); }
.llb-strand__body { padding: clamp(1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.llb-strand__body h3 { margin: 0; font-size: 1.2rem; }
.llb-strand__body p { margin: 0; color: var(--muted); font-size: .95rem; }
.llb-strand__count { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.llb-strand__count strong { font-family: var(--display); font-size: 1.25rem; color: var(--ink); }

.llb-empty { border-top: 3px solid var(--tuff); padding-top: clamp(1.4rem, 3vw, 2.2rem); max-width: 62ch; }
.llb-empty h2 { margin: 0 0 .6rem; }
.llb-empty p { color: var(--muted); }

/* ---------- motion ---------- */

/* Only hide for the reveal once JS has confirmed it can reveal it again. */
html.llb-js .llb-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
html.llb-js .llb-reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .llb-menu a { padding: .6rem .5rem; font-size: .9rem; }
  .llb-footer__grid { grid-template-columns: 1fr 1fr; }
  .llb-figures, .llb-values, .llb-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Four up leaves ~215px per card here, too narrow for a photo plus a name,
     a region and a sentence, so the four-column grids step down first. */
  .llb-centres, .llb-cards--4, .llb-gallery, .llb-gallery--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* A logo needs far less width than a card, so three up before two. */
  .llb-logogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .llb-people--quiet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .llb-year { grid-template-columns: 6ch minmax(0, 1fr); }
  .llb-year__video { grid-column: 2; max-width: 320px; }
}
@media (max-width: 980px) {
  .llb-nav { display: none; }
  .llb-stats__grid { grid-template-columns: repeat(3, 1fr); }
  .llb-cards--2, .llb-cards--3, .llb-cards--4, .llb-offers, .llb-paths, .llb-centres, .llb-grid-2, .llb-steps, .llb-gallery, .llb-gallery--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .llb-videos, .llb-strands, .llb-docgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .llb-editorial, .llb-editorial--reverse { grid-template-columns: 1fr; }
  .llb-editorial--reverse .llb-editorial__text { order: 1; }
  .llb-editorial--reverse .llb-editorial__aside { order: 2; }
  .llb-split, .llb-split--rev, .llb-ethiopia, .llb-featured { grid-template-columns: 1fr; }
  .llb-split { gap: 2rem; }
  .llb-split .llb-frame { order: -1; }
  .llb-split--rev .llb-frame { order: 0; }
  .llb-cta__inner { flex-direction: column; align-items: flex-start; }
  /* Stack instead of overlaying, so the card cannot swallow the whole photo. */
  .llb-hero { display: block; min-height: 0; background: var(--bone); }
  .llb-hero__well { height: 46vh; min-height: 280px; }
  .llb-hero__tablet {
    width: calc(100% - var(--gutter) * 2);
    margin: -3rem var(--gutter) 0;
  }
  .llb-dots { display: none; }
}
@media (max-width: 680px) {
  .llb-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .llb-stat:last-child { grid-column: 1 / -1; }
  .llb-cards--2, .llb-cards--3, .llb-cards--4, .llb-grid-2, .llb-steps, .llb-footer__grid, .llb-form__grid, .llb-docs, .llb-centres, .llb-offers, .llb-paths { grid-template-columns: 1fr; }
  .llb-docs { columns: 1; }
  .llb-people, .llb-people--quiet, .llb-figures, .llb-values, .llb-hub, .llb-videos, .llb-strands,
  .llb-docgroups, .llb-tasks, .llb-rolelist--grid, .llb-work__facts { grid-template-columns: 1fr; }
  .llb-logogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .llb-partner { grid-template-columns: 1fr; gap: 1rem; }
  .llb-partner__mark { max-width: 200px; }
  /* Year label sits above the entry so the text keeps a full-width measure. */
  .llb-year { grid-template-columns: 1fr; gap: .5rem; }
  .llb-year__video { grid-column: 1; max-width: none; }
  .llb-splitlist li { grid-template-columns: 14px 7ch minmax(0, 1fr); }
  .llb-splitlist__text { grid-column: 2 / -1; }
  .llb-rolelist--grid li:nth-child(2) { border-top: 0; }
  .llb-facts > div { grid-template-columns: 1fr; gap: .2rem; }
  .llb-storylist .llb-card { grid-template-columns: 1fr; gap: .9rem; }
  .llb-timeline li, .llb-rail article { grid-template-columns: 1fr; gap: .3rem; }
  .llb-sectionhead--row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .llb-hero__well { height: 42vh; min-height: 260px; }
  .llb-hero__actions .llb-btn { flex: 1 1 auto; }
  .llb-quote { padding-left: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.llb-js .llb-reveal { opacity: 1; transform: none; }
}

/* ---------- mobile header + menu ---------- */

@keyframes llb-panel-in { from { opacity: 0; } }
@keyframes llb-nav-in { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 980px) {
  .llb-header__bar { min-height: 76px; gap: .75rem; }
  .llb-header.is-scrolled .llb-header__bar { min-height: 60px; }
  .llb-header__actions { gap: .5rem; }
  /* Height only, so any replacement ratio works without touching this. */
  .llb-logo img { height: 64px; }
  .llb-header.is-scrolled .llb-logo img { height: 50px; }
  .llb-burger { display: inline-flex; }

  /* Ember, not dusk: ember is the action colour everywhere else on the site, and
     a navy block was the heaviest mass in a bone bar. Smaller too — here it
     stands next to a 38px-wide logo, not a full desktop nav. A 12px notch is a
     quarter of a 44px button, so the token is trimmed for this size. */
  .llb-btn--donate {
    --cut: 9px;
    background: var(--sun);
    color: var(--ink);
    min-height: 44px;
    padding: 0 1rem;
    font-size: .88rem;
  }
  .llb-btn--donate:hover { background: var(--burgundy); color: #fff; }

  /* The bar is a tenth of a 664px viewport, so it leaves on the way down and
     comes back on the first upward move. JS owns is-hidden and never sets it
     under prefers-reduced-motion; focus-within is the keyboard escape hatch,
     since a focused link must never sit off-screen. */
  .llb-header { transition: box-shadow .3s, background .3s, transform .34s var(--ease); }
  .llb-header.is-hidden { transform: translateY(-100%); }
  .llb-header.is-hidden:focus-within { transform: none; }

  /* The trigger lives in the masthead, so the masthead stays put and opaque over
     the dark panel, and the progress rule sweeps out to become the panel's top
     rule. The transition is scoped to the open state — on .llb-progress itself
     it would make the scroll indicator lag. */
  /* Fixed, not sticky, while the menu is open: the scroll lock sets
     overflow:hidden on body, which turns body into the scroll container, and
     a sticky bar then sat at the top of the document — opened mid-page, the
     bar and its close button were 1000px+ above the screen. */
  body.llb-nav-open .llb-header { position: fixed; top: 0; left: 0; right: 0; transform: none; background: var(--paper); backdrop-filter: none; }
  body.llb-nav-open .llb-header .llb-progress {
    transform: scaleX(1);
    transition: transform .5s var(--ease);
  }

  /* dvh because the iOS toolbar makes vh taller than the visible viewport, and
     padding-top from a JS-measured var because the bar is 64px or 52px depending
     on the scrolled state at the moment it was opened. */
  .llb-mobile {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 35;
    padding: var(--llb-bar-h, 64px) 0 0;
    background: var(--basalt);
    color: rgba(234, 220, 200, .82);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .llb-mobile:not([hidden]) { animation: llb-panel-in .3s var(--ease) both; }
  .llb-mobile :focus-visible { outline-color: var(--tuff); }

  /* Same measure as .llb-header__bar, so the index numbers sit on the logo's own
     left margin. min-height:100% plus margin-top:auto on the foot pins the
     actions to the bottom on tall screens without a second fixed layer. */
  .llb-mobile__inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: min(560px, calc(100% - var(--gutter) * 2));
    margin-inline: auto;
    padding: 1.15rem 0 max(1.6rem, env(safe-area-inset-bottom));
  }

  .llb-mobile__menu, .llb-mobile__menu ul { list-style: none; margin: 0; padding: 0; }
  .llb-mobile__menu { counter-reset: llb-nav; }
  /* Two columns: the title keeps its link, the disclosure button is a sibling.
     The submenu spans both. --d is set per row in main.js. */
  .llb-mobile__menu > li {
    counter-increment: llb-nav;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    border-top: 1px solid var(--line-light);
  }
  .llb-mobile__menu > li:last-child { border-bottom: 1px solid var(--line-light); }
  .llb-mobile:not([hidden]) .llb-mobile__menu > li {
    animation: llb-nav-in .44s var(--ease) both;
    animation-delay: var(--d, 0ms);
  }
  .llb-mobile__menu > li > a {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    align-items: baseline;
    padding: .8rem 0;
    text-decoration: none;
    color: #fff8ef;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.4rem, 5.6vw, 1.9rem);
    line-height: 1.14;
    letter-spacing: -0.022em;
  }
  .llb-mobile__menu > li:not(.menu-item-has-children) > a { grid-column: 1 / -1; }
  /* A printed contents page. Tabular figures keep the spine straight 01 to 07,
     and the baseline grid puts the number on the title's baseline. */
  .llb-mobile__menu > li > a::before {
    content: counter(llb-nav, decimal-leading-zero);
    font-family: var(--font);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--tuff);
  }
  .llb-mobile__menu > li.current-menu-item > a::before,
  .llb-mobile__menu > li.current-menu-ancestor > a::before,
  .llb-mobile__menu > li.current-menu-parent > a::before { color: var(--ember); }

  /* A plus that becomes a minus, built from the same two 2px rules as the
     burger, so the whole navigation is made of one primitive. */
  .llb-mobile__toggle {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 56px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line-light);
    background: none;
    color: var(--tuff);
    cursor: pointer;
    transition: color .25s var(--ease);
  }
  .llb-mobile__toggle > span { display: block; position: relative; width: 15px; height: 15px; }
  .llb-mobile__toggle > span::before,
  .llb-mobile__toggle > span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -1px;
    height: 2px;
    background: currentColor;
    transition: transform .3s var(--ease);
  }
  .llb-mobile__toggle > span::after { transform: rotate(90deg); }
  .llb-mobile__toggle[aria-expanded="true"] { color: var(--ember); }
  .llb-mobile__toggle[aria-expanded="true"] > span::after { transform: rotate(0deg); }

  /* display rather than an animated height: animating height on a subtree is the
     one non-compositor thing this panel could do, so it does not. The rows
     inside carry the motion instead, and a CSS animation restarts by itself
     every time the list re-enters the render tree. */
  .llb-mobile__menu > li > ul {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
    padding: 0 0 .85rem 2.35rem;
  }
  .llb-mobile__menu > li.is-open > ul { display: block; }
  .llb-mobile__menu > li > ul > li + li { border-top: 1px solid rgba(250, 246, 239, .08); }
  .llb-mobile__menu > li.is-open > ul > li {
    animation: llb-nav-in .34s var(--ease) both;
    animation-delay: var(--d, 0ms);
  }
  .llb-mobile__menu ul a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem 0;
    text-decoration: none;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(234, 220, 200, .78);
  }
  .llb-mobile__menu ul a:hover { color: #fff8ef; }
  .llb-mobile__menu ul .current-menu-item > a { color: var(--tuff); }

  .llb-mobile__foot { margin-top: auto; padding-top: 1.5rem; }
  .llb-mobile:not([hidden]) .llb-mobile__foot {
    animation: llb-nav-in .5s var(--ease) both;
    animation-delay: 300ms;
  }
  /* Same pair, same order, same weights as .llb-hero__actions. */
  .llb-mobile__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
  .llb-mobile__actions .llb-btn {
    --cut: 10px;
    min-height: 50px;
    padding: 0 .7rem;
    font-size: .94rem;
    text-align: center;
  }
  .llb-mobile .llb-btn--ghost { color: #fff8ef; box-shadow: inset 0 0 0 1.5px var(--line-light); }
  .llb-mobile .llb-btn--ghost:hover {
    background: var(--bone);
    color: var(--basalt);
    box-shadow: inset 0 0 0 1.5px var(--bone);
  }
  /* The same 26px ember rule that opens every kicker on the site. */
  .llb-mobile__tel {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    margin-top: .9rem;
    font-family: var(--font);
    font-weight: 700;
    font-size: .98rem;
    color: #fff8ef;
    text-decoration: none;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .llb-mobile__tel::before { content: ""; flex: 0 0 auto; width: 26px; height: 2px; background: var(--ember); }
  .llb-mobile__tel:hover { color: var(--tuff); }
  /* The hero's own stamp, closing the panel the way it closes the hero card. */
  .llb-mobile__stamp {
    margin: 1.2rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-light);
    font-family: var(--font);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tuff);
  }

  /* Nothing can remove [hidden] without JS, and .llb-nav is display:none here,
     so a no-script visitor would otherwise have no navigation at all. */
  html:not(.llb-js) .llb-mobile[hidden] {
    display: block !important;
    position: static;
    height: auto;
    padding-top: 1.25rem;
    animation: none;
  }
  html:not(.llb-js) .llb-mobile__menu > li > ul { display: block; }
  html:not(.llb-js) .llb-burger { display: none; }
}

@media (max-width: 360px) {
  .llb-btn--donate { padding: 0 .8rem; font-size: .86rem; }
  .llb-mobile__menu > li { grid-template-columns: minmax(0, 1fr) 50px; }
  .llb-mobile__toggle { width: 50px; }
  .llb-mobile__actions .llb-btn { padding: 0 .5rem; font-size: .88rem; }
}

/* The block above already clears every animation and transition; this only
   unwinds the one state JS can set. */
@media (prefers-reduced-motion: reduce) {
  .llb-header.is-hidden { transform: none; }
}

/* === nav/stories/support hub === */

/* A numbered path is one link, so its call to action is a span. It is given
   the weight of a button because the card has to read as a choice, not as a
   paragraph, and the arrow that used to close the card would repeat it. */
.llb-path--cta::after { content: none; }
.llb-path__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  align-self: flex-start;
  margin-top: auto;
  padding: .62rem 1.15rem;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  background: var(--ember);
  color: #fff7ee;
  font-weight: 700;
  font-size: .95rem;
  transition: background .25s var(--ease), color .25s;
}
.llb-path__cta::after { content: "→"; transition: transform .3s var(--ease); }
.llb-path:hover .llb-path__cta { background: var(--basalt); color: var(--bone); }
.llb-path:hover .llb-path__cta::after { transform: translateX(4px); }

/* The secondary choices carry a real button too, aligned across the row so
   three cards of unequal text still finish on the same line. */
.llb-card--choice { display: flex; }
.llb-card--choice .llb-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  width: 100%;
}
.llb-card--choice p { margin-bottom: .6rem; }
.llb-card--choice .llb-btn { margin-top: auto; }

/* One picked story still fills its row rather than sitting in a third of it. */
.llb-cards--1 { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }

/* Trust strip. Every claim is a link to the page that proves it, so the list
   is marked up as links and not as a sentence with one link at the end. */
.llb-trust__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.llb-trust__list li { position: relative; }
.llb-trust__list li + li::before {
  content: "·";
  position: absolute;
  left: -.9rem;
  color: var(--tuff-deep);
}
.llb-trust__list a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.llb-trust__list a:hover { color: var(--ember); border-color: var(--ember); }

/* Once the claims stack one per line the middot no longer separates anything:
   it sits out in the left margin and reads as a stray bullet. */
@media (max-width: 680px) {
  .llb-trust__list { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .llb-trust__list li + li::before { content: none; }
}

/* The category name above a story heading leads back to the hub. */
.llb-kicker__link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.llb-kicker__link:hover { color: var(--ember); border-bottom-color: currentColor; }

/* The filter row sits inside the hero plate on the stories hub, where the
   plain border is too quiet against the photograph behind it. */
.llb-pagehero .llb-filters { margin-top: 1.2rem; }
.llb-pagehero .llb-filters a { background: var(--bone); }
.llb-pagehero .llb-filters a.is-active,
.llb-pagehero .llb-filters a:hover { background: var(--basalt); color: var(--bone); }

/* The sticky header would otherwise cover the heading an anchor lands on. */
.llb-docgroup[id] { scroll-margin-top: clamp(4.5rem, 8vw, 6.5rem); }

/* A section heading row can end in a button as well as a text link. */
.llb-sectionhead--row > .llb-btn { flex-shrink: 0; }

/* === sponsorship/partners/ethiopia === */

/* ---------- Γίνε ανάδοχος ---------- */

.llb-sponsor__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.llb-ticks { list-style: none; padding: 0; margin: 0; max-width: 40rem; }
.llb-ticks li {
  position: relative;
  padding: .85rem 0 .85rem 2.1rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-lead);
}
.llb-ticks li:first-child { border-top: 1px solid var(--line); }
/* Drawn rather than a character, so it keeps its weight next to the serif. */
.llb-ticks li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: 1.45rem;
  width: .62rem;
  height: .34rem;
  border-left: 2px solid var(--ember);
  border-bottom: 2px solid var(--ember);
  transform: rotate(-45deg);
}

/* The one panel on the page that reverses out: the review found the cost
   impossible to locate, and it is the answer to the page's second question. */
.llb-price {
  background: var(--basalt);
  color: var(--bone);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 3px solid var(--ember);
  position: sticky;
  top: clamp(5rem, 9vw, 7rem);
}
.llb-price__title {
  font-size: .82rem;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tuff);
  margin: 0 0 1.2rem;
}
.llb-price__list { margin: 0; }
.llb-price__row + .llb-price__row { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--line-light); }
.llb-price__row dt {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .66);
  margin-bottom: .3rem;
}
.llb-price__row dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.llb-price__row dd strong {
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.llb-price__row dd span { color: var(--tuff); font-weight: 600; }
.llb-price__row dd p { flex: 1 0 100%; margin: .25rem 0 0; font-size: .92rem; color: rgba(250, 246, 239, .72); }
.llb-price__note {
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-light);
  font-size: .86rem;
  line-height: 1.55;
  color: rgba(250, 246, 239, .72);
}

.llb-receives {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.llb-receives li {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-lead);
}
.llb-receives li:nth-child(2) { border-top: 1px solid var(--line); }

.llb-referral {
  margin: 0 0 1.8rem;
  padding: 1rem 1.2rem;
  background: var(--paper);
  border-left: 3px solid var(--ember);
  font-size: 1rem;
}
.llb-referral strong { font-family: var(--display); }

.llb-docs--inline { columns: auto; display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }
/* Two parts, not the archive's three (year | title | type): inheriting that
   grid put the title in the 5ch year column and the type on top of it. */
.llb-docs--inline a {
  flex: 1 1 16rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--burgundy);
}
.llb-docs--inline a:hover { border-color: var(--burgundy); }

/* ---------- partner without a logo file ---------- */

.llb-partner__mark--type { background: var(--basalt); border-color: var(--basalt); }
.llb-partner__word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .42rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--bone);
  text-align: center;
}
.llb-partner__rule { display: block; width: 2.4rem; height: 1px; background: var(--tuff); }
.llb-partner__word b { font-weight: 700; }
.llb-partner__full {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--tuff-deep);
  margin: 0 0 .5rem;
}

/* ---------- in-page navigation (Η Αιθιοπία) ---------- */

.llb-onpage {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.llb-onpage__sticky { position: sticky; top: clamp(5rem, 9vw, 7rem); }
.llb-onpage__list { list-style: none; padding: 0; margin: 1rem 0 0; counter-reset: llb-onpage; }
.llb-onpage__list li { counter-increment: llb-onpage; }
.llb-onpage__list a {
  display: block;
  padding: .6rem 0 .6rem 1.15rem;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.llb-onpage__list a::before {
  content: counter(llb-onpage, decimal-leading-zero);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--tuff-deep);
  margin-right: .6rem;
}
.llb-onpage__list a:hover { color: var(--ink); border-left-color: var(--tuff); }
.llb-onpage__list a[aria-current="true"] { color: var(--ink); border-left-color: var(--ember); }

.llb-onpage__section + .llb-onpage__section { margin-top: clamp(2.6rem, 5vw, 4.2rem); }
/* The sticky header would otherwise cover the heading an anchor lands on. */
.llb-onpage__section { scroll-margin-top: clamp(4.5rem, 8vw, 6.5rem); }
.llb-onpage__section:focus { outline: none; }
.llb-onpage__section:focus-visible { outline: 2px solid var(--ember); outline-offset: 6px; }
.llb-onpage__section h2 { font-size: var(--fs-2); margin-bottom: 1rem; }

.llb-source {
  margin: 1.2rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--muted);
}
.llb-source span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tuff-deep);
  margin-right: .4rem;
}

@media (max-width: 980px) {
  .llb-sponsor__top, .llb-onpage { grid-template-columns: 1fr; }
  .llb-price, .llb-onpage__sticky { position: static; }
  .llb-receives { grid-template-columns: 1fr; }
  /* The contents belongs above the reading column once it stops standing
     beside it, and a horizontal rail costs less height there. */
  .llb-onpage__list { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
  .llb-onpage__list a { border-left: 0; border-bottom: 2px solid var(--line); padding-left: 0; }
  .llb-onpage__list a:hover { border-left: 0; border-bottom-color: var(--tuff); }
  .llb-onpage__list a[aria-current="true"] { border-left: 0; border-bottom-color: var(--ember); }
}

@media (prefers-reduced-motion: reduce) {
  .llb-onpage__list a { transition: none; }
}

/* === nav prominence pass === */

/* «Υποστήριξέ μας» is what the site is for, and in the middle of a row of seven
   it was the quietest thing in the bar. It is now the last entry, immediately
   before the «Κάνε δωρεά» button — the end of the row the eye lands on anyway,
   so the position gives it the prominence the outlined ember chip used to give
   it in second place. The chip is gone with the move: an outline sitting against
   a solid dark button reads as one two-part control that lost half its fill, and
   two emphasised boxes side by side leave nothing to say which is the section and
   which is the single action. What remains is weight against the 600 of the
   entries beside it, and the bar's own sliding underline, which is kept rather
   than suppressed now that it is the only indicator this item has — so hover and
   the current-page state are the same gesture as everywhere else in the row.
   --ink on --bone throughout, 11.9:1. */
.llb-menu > li.llb-nav-support > a { font-weight: 700; }
/* Menu, then button. A little more than the .1rem between plain entries, so the
   pair is two things with a gap rather than a segmented control. On the li, not
   on the link: the sliding underline is positioned against the li's own box. */
.llb-menu > li.llb-nav-support { margin-right: .4rem; }

/* Being last, the dropdown hangs from the right edge of its own item instead of
   the left. left: 0 would start a 244px panel about 250px from the right of the
   viewport and run it off the edge — the .llb-header__bar gutter is the only
   thing outboard of the donate button. Written for the last item rather than for
   this one class, because whatever ends the row has the same problem. */
.llb-menu > li:last-child > .llb-sub { left: auto; right: 0; }

/* A κατηγορία the Σύλλογος has not filled yet. It stays in the row — the
   delivery document names all four — but it is drawn quieter, so four equal
   chips do not promise four equal shelves. --muted holds 5.7:1 on bone. */
.llb-filters a.is-bare { color: var(--muted); border-color: var(--line); }

/* The written empty state behind those two: what is going on, and the way on to
   the κατηγορίες that do have stories. A quoted block rather than a card, in
   the same left-rule language as the page's other asides. */
.llb-prep {
  max-width: 44rem;
  padding: clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tuff);
}
.llb-prep h2 { font-size: var(--fs-3); margin: .4rem 0 .6rem; }
.llb-prep p { margin: 0; color: var(--muted); }
.llb-prep .llb-lead { color: var(--ink); margin: .4rem 0 0; }
.llb-prep p.llb-prep__lead { margin-top: 1.4rem; color: var(--ink); font-weight: 600; }
.llb-prep__routes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }

@media (max-width: 980px) {
  /* The same entry in the mobile contents page, marked by a warm wash across
     the row. Not by the number's colour: that already means «you are here». */
  .llb-mobile__menu > li.llb-nav-support {
    background: linear-gradient(90deg, rgba(200, 70, 28, .22), rgba(200, 70, 28, 0) 72%);
  }
}

/* === programme single / payments === */

/* A programme's photograph and its reading column share a top line rather
   than being centred on each other. MCRC runs to six paragraphs and the
   other two programmes to one sentence apiece, and a frame floating at the
   middle of either reads as decoration that lost its paragraph. The split
   itself, its columns and the mobile stacking are the editorial spread the
   rest of the site uses; only the alignment is particular to this page. */
.llb-programme { align-items: start; }

/* The payment methods are however many the reader can actually use — two,
   one, or none — so the row is sized by what is in it instead of assuming
   two. A lone method takes the full measure, because the empty half of a
   two-column grid is the same hole as a payment option that cannot be used. */
.llb-pay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.llb-pay > div > h2 { font-size: clamp(1.35rem, 1.9vw, 1.8rem); }

/* === terminology and links === */

/* The contact details in Latin script, under the Greek ones. A hairline and a
   label rather than a bordered box: it is the same Σύλλογος at the same
   address, not a second organisation. The block appears on the dark footer
   column and on the light contact page, so the rule is a variable and
   everything else inherits the colour of whichever surface it lands on. */
.llb-contact-en {
  --llb-rule-en: var(--line);
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--llb-rule-en);
}
.llb-contact-en h3 {
  margin: 0 0 .55rem;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tuff-deep);
}
.llb-contact-en p { margin: 0 0 .2rem; font-size: .94rem; }
.llb-contact-en__org { font-weight: 600; }

.llb-footer .llb-contact-en { --llb-rule-en: var(--line-light); }
.llb-footer .llb-contact-en h3 { color: var(--tuff); }

/* What an empty κατηγορία of stories is going to hold, under the note saying
   it holds nothing yet. The κατηγορία's own description, moved down here out
   of the hero so the two lines read as one statement instead of a claim and
   its contradiction. */
.llb-prep p.llb-prep__about { margin-top: 1rem; }
.llb-prep__about strong { color: var(--ink); font-weight: 600; }

/* The YouBeHero photograph, above the button to the platform. It borrows the
   corner bracket the split sections use so the frame is the site's own, but
   not their 4:3 crop: the Σύλλογος has not sent the image yet, and a logo or
   a screen capture cropped to a landscape box loses its edges. */
.llb-ybh__frame { margin: 0 0 1.8rem; max-width: 36rem; }
.llb-frame.llb-ybh__frame img { aspect-ratio: auto; height: auto; }
/* Shown whole: a portrait photograph whose subject runs top to bottom (the
   founding picture of mother and child) loses a face to any 4:3 crop. */
.llb-frame--whole { max-width: 26rem; margin-inline: auto; }
.llb-frame--whole img { aspect-ratio: auto; height: auto; }

/* === figures and centre table === */

/* Every colour here is a custom property from :root, so the bordeaux/yellow
   re-skin changes the palette and this block follows without an edit. */

/* ---------- the headline total ---------- */

.llb-figtotal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(.9rem, 2vw, 1.4rem);
  align-items: baseline;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--line-strong);
}
.llb-figtotal strong {
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -0.03em;
  color: var(--tuff-deep);
}
.llb-figtotal__label { font-weight: 700; align-self: end; }
.llb-figtotal__asof { color: var(--muted); font-size: .88rem; }
.llb-figtotal--light strong { color: var(--tuff); }
.llb-figtotal--light .llb-figtotal__asof { color: rgba(250, 246, 239, .66); }

.llb-figasof {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  letter-spacing: .04em;
}

/* ---------- how the table is read ---------- */

/* Before the table, not after it: the Σύλλογος asked that the reader meet
   «αποφυγή διπλού υπολογισμού» as a condition of reading the numbers, and a
   footnote under a scrolling region is a footnote nobody reaches. */
.llb-fignotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}
.llb-fignote {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tuff);
}
.llb-fignote h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.llb-fignote p { margin: 0; color: var(--muted); font-size: .96rem; }
.llb-band .llb-fignote { background: var(--bone); }

/* ---------- the centre table ---------- */

.llb-figtable { margin: 0; }

/* One real table at every width. Eight columns do not fit 390px, and the
   alternative — a stacked card per centre — throws away the only reason to
   print a table of centres at all, which is reading one centre against
   another. So the narrow screen scrolls sideways and the centre name is
   frozen at the left edge. The region is focusable so the keyboard can scroll
   it, and labelled so it is announced rather than entered blind. */
.llb-figtable__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  container-type: inline-size;
  border-block: 1px solid var(--line-strong);
}
.llb-figtable__scroll:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.llb-figtable table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

.llb-figtable caption {
  caption-side: top;
  text-align: start;
  padding: 0 0 .9rem;
}
/* The caption box is as wide as the table, so its text would run off the
   scrollport on a narrow screen. The inner span is pinned to the scrollport
   instead and sized to it. */
.llb-figtable caption > span {
  display: block;
  position: sticky;
  inset-inline-start: 0;
  width: 100cqi;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}

.llb-figtable th,
.llb-figtable td {
  padding: .7rem .85rem;
  text-align: start;
  vertical-align: top;
  border-top: 1px solid var(--line);
}
/* No vertical sticky here: `overflow-x: auto` already coerces the other axis
   to `auto`, and a header stuck to a box that never scrolls vertically buys
   nothing while risking a stray scrollbar. */
.llb-figtable thead th {
  z-index: 2;
  background: var(--plaster);
  border-top: 0;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tuff-deep);
  line-height: 1.3;
  vertical-align: bottom;
}
.llb-band .llb-figtable thead th { background: var(--bone); }
/* Both the header and its cells, or the column reads as two columns. The
   selector carries the table class because the rule above it is two classes
   deep and would otherwise win. */
.llb-figtable th.llb-figtable__num,
.llb-figtable td.llb-figtable__num { text-align: end; font-variant-numeric: tabular-nums; }

.llb-figtable tbody th[scope="row"],
.llb-figtable tfoot th[scope="row"] {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  white-space: nowrap;
}
.llb-figtable tbody tr:hover td,
.llb-figtable tbody tr:hover th { background: var(--paper); }
.llb-band .llb-figtable tbody tr:hover td,
.llb-band .llb-figtable tbody tr:hover th { background: var(--bone); }

.llb-figtable tbody th a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.llb-figtable tbody th a:hover { color: var(--ember); border-bottom-color: currentColor; }

/* The frozen first column. It needs an opaque ground of its own or the
   scrolled cells show through it. */
.llb-figtable thead th:first-child,
.llb-figtable tbody th[scope="row"],
.llb-figtable tfoot th[scope="row"] {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--bone);
  border-inline-end: 1px solid var(--line-strong);
}
.llb-figtable thead th:first-child { z-index: 3; background: var(--plaster); }
.llb-band .llb-figtable tbody th[scope="row"],
.llb-band .llb-figtable tfoot th[scope="row"] { background: var(--plaster); }
.llb-band .llb-figtable thead th:first-child { background: var(--bone); }

.llb-figtable tfoot th,
.llb-figtable tfoot td {
  border-top: 2px solid var(--line-strong);
  font-weight: 700;
  background: var(--bone);
}
.llb-band .llb-figtable tfoot th,
.llb-band .llb-figtable tfoot td { background: var(--plaster); }

.llb-figtable__status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.llb-figtable__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.llb-figtable__status[data-state="on"] { color: var(--ember); }
.llb-figtable__status[data-state="off"] { color: var(--muted); }

.llb-figtable__hint {
  margin: .8rem 0 0;
  color: var(--muted);
  font-size: .84rem;
}
/* Only worth saying where the table actually scrolls. */
@media (min-width: 61rem) { .llb-figtable__hint { display: none; } }

/* ---------- figure grids that are not four wide ---------- */

.llb-figures--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.llb-figures--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The distribution list carries no explanatory column here, so the label gets
   the track that column was holding instead of wrapping inside 18ch. */
.llb-splitlist--figures li { grid-template-columns: 14px 7ch minmax(0, 1fr); }

/* ---------- the two student costs ---------- */

.llb-costs { display: grid; gap: 0; margin: clamp(1.4rem, 3vw, 2rem) 0 0; max-width: 34rem; }
.llb-costs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .75rem 0;
  border-top: 1px solid var(--line);
}
.llb-costs > div:last-child { border-bottom: 1px solid var(--line); }
.llb-costs dt { color: var(--muted); font-size: .95rem; }
.llb-costs dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }

/* ---------- centre cards ---------- */

.llb-centre__share,
.llb-centre__figures { margin: .3rem 0 0; color: var(--muted); font-size: .88rem; }
.llb-centre__figures { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.llb-centre__figures span { white-space: nowrap; }
.llb-centre__share { font-weight: 600; color: var(--tuff-deep); }

/* ---------- the decorative numeral on the closing band ---------- */

/* Was "30", which needed an edit every January — the same ageing counter the
   Σύλλογος asked twice to be rid of. The founding year does not move. */
.llb-cta::after { content: "1996"; }

@media (max-width: 980px) {
  .llb-figures--5, .llb-figures--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .llb-fignotes { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .llb-figtable table { min-width: 42rem; font-size: .9rem; }
  .llb-figtable th, .llb-figtable td { padding: .6rem .7rem; }
  .llb-figtable tbody th[scope="row"], .llb-figtable tfoot th[scope="row"] { font-size: .95rem; }
  .llb-figtotal { grid-template-columns: 1fr; row-gap: .2rem; }
  .llb-figtotal strong { grid-row: auto; }
}

@media (max-width: 420px) {
  .llb-figures--5, .llb-figures--4 { grid-template-columns: 1fr; }
}

/* ---------- cookie consent ---------- */

/* Burgundy panel bottom-left; both choices the same size and weight, so
   declining is as easy as accepting. Hidden until the script decides. */
.llb-consent {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  width: min(30rem, calc(100% - 2rem));
  padding: 1.2rem 1.3rem 1.3rem;
  background: var(--burgundy);
  color: #fff;
  box-shadow: 0 24px 50px -20px rgba(22, 18, 15, .6);
  font-size: .93rem;
  line-height: 1.55;
}
.llb-consent[hidden] { display: none; }
/* Out of the way while the mobile menu is open; back as soon as it closes. */
body.llb-nav-open .llb-consent { display: none; }
.llb-consent__text { margin: 0 0 1rem; }
.llb-consent__text a { color: var(--sun); }
.llb-consent__text a:hover { color: #fff; }
.llb-consent__actions { display: flex; gap: .6rem; }
.llb-consent__btn {
  flex: 1 1 0;
  min-height: 46px;
  padding: 0 1rem;
  border: 2px solid var(--sun);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.llb-consent__btn--accept { background: var(--sun); color: var(--ink); }
.llb-consent__btn--reject { background: #fff; color: var(--ink); border-color: #fff; }
.llb-consent__btn:hover { background: var(--burgundy-deep); color: #fff; border-color: #fff; }
.llb-consent__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.llb-consent-open {
  padding: .3rem 0;
  border: 0;
  background: none;
  color: #fff8ef;
  font: inherit;
  font-size: .96rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.llb-consent-open:hover { color: var(--tuff); }