/* ==========================================================================
   LIVING FIELD — COMPONENTS
   Extracted from SANDBOX_concept_3_living_field_v2.html (approved 2026-08-10).

   Consumes lf-tokens.css. Load order:
     lf-tokens.css -> lf-components.css -> page-specific styles.

   Contents
     1  Base and reset
     2  Field, imagery and veils
     3  Layout primitives
     4  Navigation
     5  Typography
     6  Reveal system
     7  Vital cards
     8  Root cards (five domains)
     9  Stillness beat
    10  Score chapter
    11  Species cards
    12  CTA set
    13  Footer
    14  Responsive
    15  Reduced motion
   ========================================================================== */


/* ==========================================================================
   1  BASE AND RESET
   ========================================================================== */

*{ margin:0; padding:0; box-sizing:border-box }

body{
  background:var(--lf-loam);
  color:var(--lf-text);
  font-family:var(--lf-hum);
  font-weight:var(--lf-fw-body);
  line-height:var(--lf-lh-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--lf-gold); color:var(--lf-loam) }

/* Keyboard focus must survive on a dark ground — the lumen ring is the
   only affordance that reads against every surface in the language. */
:focus-visible{
  outline:2px solid var(--lf-lumen);
  outline-offset:3px;
  border-radius:2px;
}

.lf-visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ==========================================================================
   2  FIELD, IMAGERY AND VEILS
   The depth ladder: field imagery (0) -> veils (1) -> content (2) -> nav (60).
   ========================================================================== */

.lf-field{
  position:fixed; inset:0; z-index:var(--lf-z-field);
}

/* Full-bleed Higgsfield plate, screen-blended into the loam ground. */
.lf-plate{
  position:fixed; inset:0; z-index:var(--lf-z-field);
  pointer-events:none;
  background-size:cover;
  background-position:center;
  opacity:var(--lf-img-opacity-hero);
  mix-blend-mode:screen;
  filter:saturate(var(--lf-img-saturate));
  transition:opacity var(--lf-dur-veil) var(--lf-ease);
}
.lf-plate.is-dimmed{ opacity:var(--lf-img-opacity-hero-dim) }

/* Section-scoped plate — sits inside a positioned section, not fixed. */
.lf-plate-section{
  position:absolute; inset:0;
  pointer-events:none;
  background-size:cover;
  background-position:center;
  opacity:var(--lf-img-opacity-section);
  mix-blend-mode:screen;
  filter:saturate(.8);
}

/* Dimming veil driven by the stillness beat. */
.lf-veil{
  position:fixed; inset:0; z-index:var(--lf-z-veil);
  pointer-events:none;
  background:var(--lf-loam-deep);
  opacity:0;
  transition:opacity var(--lf-dur-slow) var(--lf-ease);
}
.lf-veil.is-on{ opacity:var(--lf-veil-opacity) }

/* Permanent vignette — holds attention to the centre of the field. */
.lf-grain{
  position:fixed; inset:0; z-index:var(--lf-z-veil);
  pointer-events:none;
  opacity:.5;
  background:var(--lf-vignette);
}


/* ==========================================================================
   3  LAYOUT PRIMITIVES
   ========================================================================== */

main{ position:relative; z-index:var(--lf-z-content) }

.lf-section{
  padding:0 var(--lf-gutter);
  position:relative;
}

.lf-measure{
  max-width:var(--lf-measure-page);
  margin:0 auto;
}

/* Standard chapter rhythm. .lf-chapter-tight follows a chapter that has
   already opened the space above it. */
.lf-chapter{
  padding-top:var(--lf-chapter-y);
  padding-bottom:var(--lf-chapter-y);
}
.lf-chapter-tight{ padding-top:var(--lf-space-xl) }


/* ==========================================================================
   4  NAVIGATION
   ========================================================================== */

.lf-nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--lf-z-nav);
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--lf-space-sm);
  padding:var(--lf-nav-y) var(--lf-gutter);
  border-bottom:1px solid transparent;
  transition:background var(--lf-dur-mid) var(--lf-ease),
             border-color var(--lf-dur-mid) var(--lf-ease);
}
/* Once the page moves, the nav takes a ground of its own. Without it,
   copy scrolling underneath ran straight through the links (2026-10-01).
   .is-scrolled and .is-open are set by lf-ui.js. */
.lf-nav.is-scrolled,
.lf-nav.is-open{
  background:rgba(var(--lf-loam-rgb),.86);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--lf-hairline);
}
/* Touch devices: no blur. The bar sits over a canvas that repaints every
   frame, so backdrop-filter would re-blur continuously on a phone GPU.
   A near-opaque ground reads the same at that size. */
@media(pointer:coarse){
  .lf-nav.is-scrolled{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(var(--lf-loam-rgb),.94);
  }
}
.lf-nav.is-open{ background:var(--lf-loam) }   /* opaque: at .97 the hero headline still bled through the panel */

.lf-wordmark{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:1.4rem;
  letter-spacing:var(--lf-ls-tight);
  color:var(--lf-text);
  text-decoration:none;
}

.lf-nav-links{
  display:flex; align-items:center; gap:var(--lf-space-md);
  list-style:none;
}
.lf-nav-links a{
  display:inline-flex; align-items:center;
  min-height:44px;                     /* full touch target, not just the glyphs */
  font-size:var(--lf-fs-sm);
  color:var(--lf-text-dim);
  text-decoration:none;
  transition:color var(--lf-dur-fast) var(--lf-ease);
}
.lf-nav-links a:hover,
.lf-nav-links a[aria-current="page"]{ color:var(--lf-text) }

/* Menu toggle — injected by lf-ui.js, shown only where the links collapse.
   Below 900px (phones and portrait tablets) the links fold into a panel
   under the bar; from 900px up they sit inline. One breakpoint, so the
   nav changes shape once rather than squeezing through the tablet range. */
.lf-nav-toggle{
  display:none;
  margin-left:auto;
  min-height:44px; min-width:44px;
  padding:0 1rem;
  align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--lf-hairline-hover);
  border-radius:var(--lf-radius-pill);
  color:var(--lf-text);
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono);
  letter-spacing:var(--lf-ls-mono-3);
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color var(--lf-dur-fast) var(--lf-ease);
}
.lf-nav-toggle:hover,
.lf-nav-toggle[aria-expanded="true"]{ border-color:var(--lf-lumen) }

@media(max-width:899px){
  .lf-nav-toggle{ display:inline-flex }
  .lf-nav .lf-nav-links{ display:none }
  .lf-nav.is-open .lf-nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    max-height:calc(100vh - 100%); overflow-y:auto;
    padding:var(--lf-space-3xs) var(--lf-gutter) var(--lf-space-sm);
    background:var(--lf-loam);
    border-bottom:1px solid var(--lf-hairline);
  }
  .lf-nav.is-open .lf-nav-links a{
    width:100%; min-height:48px;
    font-size:var(--lf-fs-body);
    border-top:1px solid var(--lf-hairline);
  }
}
@media(max-width:419px){
  .lf-nav{ gap:.6rem }
  .lf-nav-toggle{ padding:0 .8rem }
  .lf-nav .lf-btn-sm{ padding:var(--lf-space-2xs) 1.05rem; font-size:.8rem }
}


/* ==========================================================================
   5  TYPOGRAPHY
   ========================================================================== */

.lf-eyebrow{
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono);
  letter-spacing:var(--lf-ls-mono-6);
  text-transform:uppercase;
  color:var(--lf-lumen);
  margin-bottom:var(--lf-space-md);
}

.lf-h1{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-display);
  line-height:var(--lf-lh-display);
  letter-spacing:var(--lf-ls-display);
  max-width:var(--lf-measure-display);
}

.lf-h2{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-h2);
  line-height:var(--lf-lh-h2);
  letter-spacing:var(--lf-ls-h2);
  max-width:var(--lf-measure-h2);
}

/* The glow is the language's emphasis mark — it replaces bold entirely. */
.lf-glow{ color:var(--lf-lumen) }
.lf-h1 .lf-glow{ text-shadow:var(--lf-glow-lumen-text) }

.lf-lead{
  margin-top:var(--lf-space-xl);
  max-width:var(--lf-measure-lead);
  font-size:var(--lf-fs-lead);
  color:var(--lf-text-dim);
}

.lf-intro{
  margin-top:var(--lf-space-md);
  max-width:var(--lf-measure-intro);
  font-size:var(--lf-fs-intro);
  color:var(--lf-text-dim);
}
/* Links inside intro and lead copy were unstyled (browser blue on loam,
   2.05:1 on the Stacks index). Padding lifts a standalone link such as
   "Back to home" to a 24px target without disturbing the line. */
.lf-intro a:not(.lf-btn),
.lf-lead a:not(.lf-btn){
  color:var(--lf-lumen);
  display:inline-block;
  padding:.15rem 0;
  text-underline-offset:3px;
}
.lf-intro a:not(.lf-btn):hover,
.lf-lead a:not(.lf-btn):hover{ color:var(--lf-gold) }

/* Article breadcrumb ("← The Stacks", "← Blog"). Type and colour stay with
   each page; this only gives the 11px-high link a real target. */
.lf-crumb{
  display:inline-flex; align-items:center;
  min-height:24px;
}

/* Secondary text link under a closing CTA (pricing). Padding only — the
   page keeps its own type. */
.lf-cta-secondary{ padding:.6rem 0 }


/* ==========================================================================
   6  REVEAL SYSTEM
   Elements carrying .lf-reveal rise into place once, on first intersection.
   The .is-in class is applied by lf-ui.js.
   ========================================================================== */

.lf-reveal{
  opacity:0;
  transform:translateY(var(--lf-reveal-rise));
  transition:opacity var(--lf-dur-slow) var(--lf-ease),
             transform var(--lf-dur-slow) var(--lf-ease);
}
.lf-reveal.is-in{ opacity:1; transform:none }

/* No-JS guard: never leave content permanently invisible. */
.no-js .lf-reveal{ opacity:1; transform:none }


/* ==========================================================================
   7  HERO
   ========================================================================== */

.lf-hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
}
/* The measure's auto margins opt it out of the column's stretch, so it
   shrank to its content and centred — hero copy then started further in
   than the sections below it. Full width keeps one left edge. */
.lf-hero > .lf-measure{ width:100% }

/* Text scrim. The hero sits over both the canvas field and a plate, neither
   of which can be relied on for contrast — plate imagery is bright and
   varies per page, and the field is live. This lays ground under the copy
   without flattening the image at the edges, where it does its work.
   Sits behind the hero's own content but above the fixed field layers. */
.lf-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(10,15,12,.92) 0%,
    rgba(10,15,12,.78) 34%,
    rgba(10,15,12,.34) 62%,
    transparent 86%);
}
@media(max-width:700px){
  /* No room to fade horizontally on a phone — go vertical instead. */
  .lf-hero::before{
    background:linear-gradient(180deg,
      rgba(10,15,12,.55) 0%,
      rgba(10,15,12,.86) 45%,
      rgba(10,15,12,.86) 100%);
  }
}

.lf-hero-hint{
  position:absolute; bottom:var(--lf-space-lg); left:var(--lf-gutter);
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono-xs);
  letter-spacing:var(--lf-ls-mono-4);
  text-transform:uppercase;
  color:var(--lf-lumen-dim);
  animation:lf-pulse 3s ease-in-out infinite;
}
@keyframes lf-pulse{ 0%,100%{opacity:.4} 50%{opacity:1} }


/* ==========================================================================
   8  VITAL CARDS
   Three-up inheritance cards. Replaced the terror numbers (ledger §8).
   ========================================================================== */

.lf-vitals{
  display:grid; grid-template-columns:1fr;
  gap:var(--lf-space-sm);
  margin-top:var(--lf-space-2xl);
}
@media(min-width:860px){ .lf-vitals{ grid-template-columns:repeat(3,1fr) } }

.lf-vital{
  background:var(--lf-card-bg);
  border:1px solid var(--lf-hairline-2);
  border-radius:var(--lf-radius-card);
  padding:var(--lf-space-xl);
  backdrop-filter:blur(6px);
  transition:border-color var(--lf-dur-mid) var(--lf-ease),
             transform var(--lf-dur-mid) var(--lf-ease);
}
.lf-vital:hover{
  border-color:var(--lf-hairline-hover);
  transform:translateY(-4px);
}
.lf-vital b{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-vital);
  display:block;
  color:var(--lf-gold);
  line-height:1.25;
}
.lf-vital span{
  font-size:var(--lf-fs-sm);
  color:var(--lf-text-dim);
  display:block;
  margin-top:var(--lf-space-2xs);
  line-height:var(--lf-lh-card);
}


/* ==========================================================================
   9  ROOT CARDS — the five benchmark domains
   ========================================================================== */

.lf-roots{
  display:grid; grid-template-columns:1fr;
  gap:var(--lf-space-xs);
  margin-top:var(--lf-space-2xl);
}
@media(min-width:900px){ .lf-roots{ grid-template-columns:repeat(5,1fr) } }

.lf-root{
  border:1px solid var(--lf-hairline);
  border-radius:var(--lf-radius-root);
  padding:1.7rem var(--lf-space-sm);
  min-height:230px;
  position:relative; overflow:hidden;
  background:var(--lf-card-bg-flat);
  transition:border-color var(--lf-dur-mid) var(--lf-ease);
}
.lf-root:hover{ border-color:var(--lf-hairline-gold) }

/* Root-system drawing anchored to the base of each card. */
.lf-root svg{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:110px; opacity:.85;
}

.lf-root .lf-code{
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono-2xs);
  letter-spacing:var(--lf-ls-mono-5);
  color:var(--lf-gold);
}
.lf-root h3{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-h3-sm);
  margin-top:var(--lf-space-2xs);
  line-height:var(--lf-lh-h3);
}
.lf-root .lf-pct{
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono-lg);
  color:var(--lf-lumen-dim);
  margin-top:var(--lf-space-3xs);
  display:block;
}


/* ==========================================================================
   10  STILLNESS BEAT
   A held moment: the field settles, the world dims, one line stands alone.
   ========================================================================== */

.lf-stillness{ min-height:150vh; position:relative }

.lf-stillness-stick{
  position:sticky; top:0; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
}

.lf-still-inner{
  text-align:center;
  max-width:var(--lf-measure-still);
  padding:0 1rem;
}

.lf-still-node{
  width:10px; height:10px; border-radius:50%;
  background:var(--lf-gold);
  margin:0 auto var(--lf-space-lg);
  box-shadow:var(--lf-glow-node);
  animation:lf-breathe 4s ease-in-out infinite;
}
@keyframes lf-breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.35)} }

.lf-still-line{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-still);
  line-height:var(--lf-lh-still);
  letter-spacing:var(--lf-ls-still);
}

.lf-still-aside{
  position:absolute; bottom:12vh; left:var(--lf-gutter);
  max-width:var(--lf-measure-aside);
  font-size:var(--lf-fs-xs);
  color:var(--lf-text-dim);
  opacity:.8;                /* .55 measured 3.05:1 — .8 is 5.2:1 (WCAG AA) */
  line-height:var(--lf-lh-aside);
}


/* ==========================================================================
   11  SCORE CHAPTER
   ========================================================================== */

.lf-score-chapter{ position:relative; overflow:hidden }

.lf-seed-wrap{
  display:grid; grid-template-columns:1fr;
  gap:var(--lf-space-2xl);
  align-items:center;
  margin-top:var(--lf-space-xl);
  position:relative;
}
@media(min-width:940px){ .lf-seed-wrap{ grid-template-columns:1fr 1fr } }

.lf-seed{
  width:100%; max-width:440px;
  margin:0 auto; display:block;
}

.lf-seed-copy p{ color:var(--lf-text-dim); max-width:var(--lf-measure-lead) }
.lf-seed-copy p + p{ margin-top:var(--lf-space-xs) }

.lf-stat{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-stat);
  color:var(--lf-text);
  line-height:1; display:block;
  margin-bottom:1rem;
}
.lf-stat small{
  display:block;          /* inline, it wraps mid-word at display sizes */
  font-size:.22em;
  color:var(--lf-lumen-dim);
  font-family:var(--lf-mono);
  letter-spacing:var(--lf-ls-mono-2);
  margin-top:.6em;
}


/* ==========================================================================
   12  SPECIES CARDS — the product ecosystem
   ========================================================================== */

.lf-species{
  list-style:none;
  display:grid; grid-template-columns:1fr;
  gap:var(--lf-space-xs);
  margin-top:3.6rem;
}
@media(min-width:820px){  .lf-species{ grid-template-columns:1fr 1fr } }
@media(min-width:1120px){ .lf-species{ grid-template-columns:repeat(3,1fr) } }

.lf-species li{
  border:1px solid var(--lf-hairline);
  border-radius:var(--lf-radius-card);
  padding:1.9rem;
  background:var(--lf-card-bg-soft);
  transition:border-color var(--lf-dur-mid) var(--lf-ease),
             transform var(--lf-dur-mid) var(--lf-ease);
}
.lf-species li:hover{
  border-color:var(--lf-hairline-hover-2);
  transform:translateY(-4px);
}
.lf-species h3{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-h3);
}
.lf-species .lf-lat{
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono-2xs);
  letter-spacing:var(--lf-ls-mono-2);
  text-transform:uppercase;
  color:var(--lf-lumen-dim);
  display:block;
  margin-bottom:.8rem;
}
.lf-species p{
  color:var(--lf-text-dim);
  font-size:var(--lf-fs-sm);
  margin-top:var(--lf-space-2xs);
}


/* ==========================================================================
   12b  PROCESS STEPS
   Numbered sequence — a process laid out in order. Added in B2 for
   how-it-works; reusable by any page that has to show a sequence.
   ========================================================================== */

.lf-steps{ list-style:none; margin-top:var(--lf-space-2xl) }

.lf-step{
  display:grid; grid-template-columns:1fr; gap:var(--lf-space-2xs);
  padding:var(--lf-space-xl) 0;
  border-top:1px solid var(--lf-hairline);
}
@media(min-width:820px){
  .lf-step{ grid-template-columns:6rem 1fr; gap:var(--lf-space-lg) }
}
.lf-step:last-child{ border-bottom:1px solid var(--lf-hairline) }

.lf-step-n{
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono-lg);
  letter-spacing:var(--lf-ls-mono-5);
  color:var(--lf-gold);
  padding-top:.35rem;
}
.lf-step h3{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-h3);
  line-height:var(--lf-lh-h3);
}
.lf-step p{
  color:var(--lf-text-dim);
  font-size:var(--lf-fs-sm);
  margin-top:var(--lf-space-2xs);
  max-width:var(--lf-measure-intro);
}
/* The one-line takeaway that closes each step. */
.lf-step-note{
  display:block;
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono-2xs);
  letter-spacing:var(--lf-ls-mono-2);
  text-transform:uppercase;
  color:var(--lf-lumen-dim);
  margin-top:var(--lf-space-xs);
}


/* ==========================================================================
   12c  STACK CARDS — the Stacks index grid
   ========================================================================== */

.lf-stacks{
  list-style:none;
  display:grid; grid-template-columns:1fr;
  gap:var(--lf-space-xs);
  margin-top:var(--lf-space-2xl);
}
@media(min-width:820px){  .lf-stacks{ grid-template-columns:1fr 1fr } }
@media(min-width:1180px){ .lf-stacks{ grid-template-columns:repeat(3,1fr) } }

.lf-stack{
  border:1px solid var(--lf-hairline);
  border-radius:var(--lf-radius-card);
  background:var(--lf-card-bg-soft);
  transition:border-color var(--lf-dur-mid) var(--lf-ease),
             transform var(--lf-dur-mid) var(--lf-ease);
}
.lf-stack:hover{
  border-color:var(--lf-hairline-hover-2);
  transform:translateY(-4px);
}
/* Whole card is the target — the anchor fills it rather than sitting inside. */
.lf-stack a{
  display:block; padding:1.9rem;
  text-decoration:none; color:inherit;
}
.lf-stack h3{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-h3-sm);
  line-height:var(--lf-lh-h3);
}
.lf-stack p{
  color:var(--lf-text-dim);
  font-size:var(--lf-fs-sm);
  margin-top:var(--lf-space-2xs);
}
.lf-stack .lf-stack-more{
  display:block; margin-top:var(--lf-space-xs);
  font-family:var(--lf-mono); font-size:var(--lf-fs-mono-2xs);
  letter-spacing:var(--lf-ls-mono-2); text-transform:uppercase;
  color:var(--lf-lumen);
}


/* ==========================================================================
   12d  ARTICLE — long-form Stacks pages
   Prose measure is tighter than the page measure: reading, not scanning.
   ========================================================================== */

/* The article gets a reading ground. Everywhere else the field can show
   through behind the copy, because everywhere else the copy is short. Here
   it is a page of continuous prose in --lf-text-dim, and the plate behind
   varies in brightness as you scroll — so the measure sits on its own
   ground. No border: it should read as ground, not as a card. */
.lf-article{
  max-width:68ch; margin:0 auto;
  background:rgba(10,15,12,.72);
  border-radius:var(--lf-radius-card);
  padding:var(--lf-space-2xl) var(--lf-space-xl);
}
@media(max-width:700px){
  .lf-article{ padding:var(--lf-space-xl) var(--lf-space-sm) }
}

.lf-article p{
  color:var(--lf-text-dim);
  font-size:var(--lf-fs-intro);
  line-height:var(--lf-lh-aside);
  margin-top:var(--lf-space-xs);
}
/* The opening paragraph carries the weight of a standfirst. */
.lf-article .lf-standfirst{
  color:var(--lf-text);
  font-size:var(--lf-fs-lead);
  margin-top:var(--lf-space-md);
}
.lf-article h2{
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-h3);
  line-height:var(--lf-lh-h3);
  color:var(--lf-text);
  margin-top:var(--lf-space-2xl);
}
.lf-article a{ color:var(--lf-lumen) }

/* ---- legal pages ----
   Same reading ground as .lf-article, with the heading and list styling the
   legal content markup needs. The copy inside is carried verbatim from the
   pre-redesign pages — this is a reskin, so nothing here changes a word. */
.lf-legal{
  max-width:76ch; margin:0 auto;
  background:rgba(10,15,12,.72);
  border-radius:var(--lf-radius-card);
  padding:var(--lf-space-2xl) var(--lf-space-xl);
}
@media(max-width:700px){
  .lf-legal{ padding:var(--lf-space-xl) var(--lf-space-sm) }
}
.lf-legal h2{
  font-family:var(--lf-display); font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-h3); line-height:var(--lf-lh-h3);
  color:var(--lf-text); margin-top:var(--lf-space-2xl);
}
.lf-legal h3{
  font-family:var(--lf-display); font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-h3-sm); color:var(--lf-text);
  margin-top:var(--lf-space-md);
}
.lf-legal p{
  color:var(--lf-text-dim); font-size:var(--lf-fs-sm);
  line-height:var(--lf-lh-aside); margin-top:var(--lf-space-xs);
}
.lf-legal ul, .lf-legal ol{ margin:var(--lf-space-xs) 0 0 1.4rem }
.lf-legal li{
  color:var(--lf-text-dim); font-size:var(--lf-fs-sm);
  line-height:var(--lf-lh-aside); margin-top:var(--lf-space-3xs);
}
.lf-legal a{ color:var(--lf-lumen) }
.lf-legal strong{ color:var(--lf-text); font-weight:var(--lf-fw-display) }
.lf-legal table{ width:100%; border-collapse:collapse; margin-top:var(--lf-space-xs); font-size:var(--lf-fs-sm) }
.lf-legal th, .lf-legal td{
  text-align:left; padding:var(--lf-space-2xs);
  border-bottom:1px solid var(--lf-hairline); color:var(--lf-text-dim);
}
.lf-legal th{ color:var(--lf-lumen); font-weight:var(--lf-fw-body) }
.lf-legal .legal-date{
  font-family:var(--lf-mono); font-size:var(--lf-fs-mono-2xs);
  letter-spacing:var(--lf-ls-mono-2); text-transform:uppercase;
  color:var(--lf-lumen-dim); display:block;
}

/* Pull quote — one line lifted out of the flow. */
.lf-pull{
  margin:var(--lf-space-2xl) 0;
  padding-left:var(--lf-space-md);
  border-left:2px solid var(--lf-gold);
  font-family:var(--lf-display);
  font-weight:var(--lf-fw-display);
  font-size:var(--lf-fs-still);
  line-height:var(--lf-lh-still);
  letter-spacing:var(--lf-ls-still);
  color:var(--lf-text);
}

/* Article banner. Replaces the pre-redesign 1200x400 plates. */
.lf-banner{
  display:block; width:100%; height:auto;
  border-radius:var(--lf-radius-card);
  overflow:hidden;
  margin-top:var(--lf-space-xl);
  border:1px solid var(--lf-hairline);
}

/* Related links at the foot of an article. */
.lf-related{ list-style:none; margin-top:var(--lf-space-md) }
.lf-related li{ border-top:1px solid var(--lf-hairline) }
.lf-related li:last-child{ border-bottom:1px solid var(--lf-hairline) }
.lf-related a{
  display:block; padding:var(--lf-space-xs) 0;
  color:var(--lf-text); text-decoration:none;
  font-size:var(--lf-fs-sm);
  transition:color var(--lf-dur-fast) var(--lf-ease);
}
.lf-related a:hover{ color:var(--lf-lumen) }


/* ==========================================================================
   13  CTA SET
   ========================================================================== */

/* Pill button — the single button shape in the language. */
.lf-btn{
  display:inline-block;
  font-weight:var(--lf-fw-display);
  color:var(--lf-loam);
  background:var(--lf-lumen);
  border:0;
  border-radius:var(--lf-radius-pill);
  text-decoration:none;
  cursor:pointer;
  transition:background var(--lf-dur-fast) var(--lf-ease),
             transform var(--lf-dur-fast) var(--lf-ease),
             box-shadow var(--lf-dur-fast) var(--lf-ease);
}

/* Small — navigation scale. */
.lf-btn-sm{
  font-size:.85rem;
  padding:var(--lf-space-2xs) 1.5rem;
}
.lf-btn-sm:hover{
  background:var(--lf-gold);
  transform:translateY(-1px);
  box-shadow:var(--lf-glow-gold-sm);
}

/* Large — closing CTA scale. */
.lf-btn-lg{
  font-size:1rem;
  padding:1.1rem 2.6rem;
}
.lf-btn-lg:hover{
  background:var(--lf-gold);
  transform:translateY(-2px);
  box-shadow:var(--lf-glow-gold-md);
}

.lf-cta{
  min-height:88vh;
  display:flex; flex-direction:column; justify-content:center;
}
.lf-cta .lf-salute{
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono);
  letter-spacing:var(--lf-ls-mono-6);
  text-transform:uppercase;
  color:var(--lf-gold);
  margin-bottom:1.6rem;
}
.lf-cta .lf-h2{
  font-size:var(--lf-fs-cta);
  max-width:var(--lf-measure-cta);
}
.lf-cta .lf-btn{
  margin-top:var(--lf-space-xl);
  align-self:flex-start;
}
.lf-cta small{
  display:block;
  margin-top:1.6rem;
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono-sm);
  letter-spacing:var(--lf-ls-mono-3);
  text-transform:uppercase;
  color:var(--lf-lumen-dim);
}


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

.lf-footer{
  position:relative; z-index:var(--lf-z-content);
  display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:var(--lf-space-sm);
  padding:var(--lf-space-lg) var(--lf-gutter);
  border-top:1px solid var(--lf-hairline);
  font-family:var(--lf-mono);
  font-size:var(--lf-fs-mono-xs);
  letter-spacing:var(--lf-ls-mono);
  text-transform:uppercase;
  color:var(--lf-lumen-dim);
}
.lf-footer a{
  /* Footer type is 10px mono, so the glyph box alone was 12px tall —
     under the WCAG 2.5.8 minimum. The link box is now 24px, 44px on touch. */
  display:inline-flex; align-items:center; justify-content:center;
  min-height:24px; min-width:24px;      /* "FAQ" alone was 23px wide */
  color:var(--lf-lumen-dim);
  text-decoration:none;
  transition:color var(--lf-dur-fast) var(--lf-ease);
}
.lf-footer a:hover{ color:var(--lf-text) }
@media(pointer:coarse){ .lf-footer a{ min-height:44px } }

.lf-footer-links{
  display:flex; flex-wrap:wrap; align-items:center;
  column-gap:var(--lf-space-sm); row-gap:0;
  list-style:none;
}


/* ==========================================================================
   15  RESPONSIVE
   ========================================================================== */

/* Gutter and chapter rhythm are fluid tokens now (lf-tokens.css), so they
   no longer step here. What remains is genuine re-layout for phones. */
@media(max-width:700px){
  .lf-footer{ padding-top:var(--lf-space-xl); padding-bottom:var(--lf-space-xl) }
  .lf-still-aside{
    right:var(--lf-gutter);
    max-width:none;
  }
}


/* ==========================================================================
   16  REDUCED MOTION
   Motion is decorative throughout — every animation here is safe to drop.
   The canvas field renders its own static frame (see lf-field.js).
   ========================================================================== */

@media(prefers-reduced-motion:reduce){
  .lf-reveal{ transition:none; opacity:1; transform:none }
  .lf-hero-hint{ animation:none }
  .lf-still-node{ animation:none }
  .lf-plate{ transition:none }
  .lf-veil{ transition:none }
  .lf-vital,
  .lf-species li,
  .lf-stack,
  .lf-root,
  .lf-nav,
  .lf-btn{ transition:none }
  .lf-vital:hover,
  .lf-species li:hover,
  .lf-stack:hover,
  .lf-btn:hover{ transform:none }
  html{ scroll-behavior:auto }
}

/* ---- Cookiebot consent banner, restyled to the Living Field kit ----
   Cookiebot's own theme controls are locked on the free plan, so the banner
   is themed here. All three buttons share one style on purpose: Reject all
   must be as prominent as Allow all (UK/EU consent rules). */
#CybotCookiebotDialog{
  background:var(--lf-loam-2,#0F1712)!important;
  color:var(--lf-text,#E6F0E8)!important;
  border:1px solid var(--lf-hairline-2,rgba(184,245,200,.18))!important;
  border-radius:var(--lf-radius-card,16px)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.55)!important;
  font-family:var(--lf-hum)!important;
}
#CybotCookiebotDialog *,
#CybotCookiebotDialog p,
#CybotCookiebotDialog label,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeIntro{
  font-family:var(--lf-hum)!important;
  color:var(--lf-text-dim,#93A89A)!important;
  border-color:var(--lf-hairline,rgba(184,245,200,.12))!important;
}
#CybotCookiebotDialog h2,
#CybotCookiebotDialogBodyContentTitle{
  font-family:var(--lf-display)!important;
  color:var(--lf-text,#E6F0E8)!important;
  font-size:1.35rem!important; letter-spacing:.01em!important;
}
#CybotCookiebotDialog a{ color:var(--lf-lumen,#B8F5C8)!important }
#CybotCookiebotDialog .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive,
#CybotCookiebotDialog .CybotCookiebotDialogNavItemLink:hover{
  color:var(--lf-lumen,#B8F5C8)!important;
  border-bottom-color:var(--lf-lumen,#B8F5C8)!important;
}
#CybotCookiebotDialog .CybotCookiebotDialogNavItemLink{ color:var(--lf-text,#E6F0E8)!important }
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonLabel,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonDescription,
#CybotCookiebotDialog strong{ color:var(--lf-text,#E6F0E8)!important }
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton,
#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonAccept{
  background:var(--lf-lumen,#B8F5C8)!important;
  border:1px solid var(--lf-lumen,#B8F5C8)!important;
  color:var(--lf-loam,#0A0F0C)!important;
  border-radius:100px!important;
  font-family:var(--lf-hum)!important; font-weight:600!important;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton:hover{
  background:var(--lf-gold,#F5D06A)!important; border-color:var(--lf-gold,#F5D06A)!important;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider{
  background-color:rgba(184,245,200,.18)!important;
}
#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider{
  background-color:var(--lf-lumen,#B8F5C8)!important;
}
#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider::before{
  background-color:var(--lf-loam,#0A0F0C)!important;
}
#CybotCookiebotDialog #CybotCookiebotDialogPoweredbyCybot svg *,
#CybotCookiebotDialog #CybotCookiebotDialogPoweredbyImage{ filter:brightness(0) invert(1); opacity:.6 }
#CybotCookiebotDialog .CybotCookiebotScrollContainer,
#CybotCookiebotDialog .CybotCookiebotDialogContentWrapper,
#CybotCookiebotDialog #CybotCookiebotDialogFooter,
#CybotCookiebotDialog #CybotCookiebotDialogHeader,
#CybotCookiebotDialog #CybotCookiebotDialogNav{ background:transparent!important }
#CybotCookiebotDialog .CybotCookiebotFader,
#CybotCookiebotDialog .CybotCookiebotScrollContainer::after{
  background:linear-gradient(180deg,rgba(15,23,18,0),var(--lf-loam-2,#0F1712))!important;
}