/* ==========================================================================
   LookAmaze R2 — COMPONENT FOUNDATION                    [INERT BY NON-USE]
   ==========================================================================

   WHAT THIS FILE IS
   -----------------
   The documented component layer for the R2 design system. All component
   selectors are scoped through the reserved **`lm-`** namespace; colour,
   typography and spacing design values use the token system (`typography.css`,
   `spacing.css`, `tokens.css`); structural CSS values may remain literal where
   appropriate.

   WHY THIS FILE IS INERT
   ----------------------
   There are no element selectors, no ID selectors and no `!important`. Two
   `.lm-card … .lm-card__title` descendant selectors do exist, and they are safe
   for exactly the same reason as every other rule here: BOTH sides of the
   combinator use the unused `lm-` namespace, so they cannot reach existing
   markup. A rule such as `.lm-button { … }` has **no effect until an element
   actually carries the class `lm-button`**, and nothing on the site carries any
   `lm-` class today (verified: DOM scan returned 0 matching elements — see
   DESIGN-SYSTEM.md §9). Therefore loading this sheet cannot change how the site
   looks.

   NOT DONE YET, AND NOT TO BE DONE WITHOUT APPROVAL: adding these classes to any
   homepage, header/footer, article, archive or Elementor element.

   NAMESPACE CONTRACT — the reserved class list (collision-checked)
   ---------------------------------------------------------------
     layout/measure   .lm-measure  .lm-measure--narrow
     type roles       .lm-display .lm-h1 .lm-h2 .lm-h3 .lm-lead .lm-body
                      .lm-small .lm-caption .lm-ui .lm-kicker
     links            .lm-link  .lm-link--quiet
     rules            .lm-rule  .lm-rule--strong
     buttons          .lm-button  .lm-button--primary  .lm-button--secondary
                      .lm-button--quiet
     cards            .lm-card  .lm-card__media  .lm-card__img  .lm-card__body
                      .lm-card__eyebrow  .lm-card__title  .lm-card__meta
     badges/labels    .lm-badge  .lm-badge--accent  .lm-badge--muted
     notes/callouts   .lm-note  .lm-note__title  .lm-note--info
                      .lm-note--success  .lm-note--warning  .lm-note--error
     captions         .lm-caption  .lm-caption__credit
   Deliberately NOT included yet: motion/transition values, border-radius, dark
   mode, and any class that would restyle existing content. Those are decisions
   for the application steps.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. MEASURE — reading width
   -------------------------------------------------------------------------- */
.lm-measure        { max-width: var(--lm-measure); }
.lm-measure--narrow{ max-width: var(--lm-measure-narrow); }


/* --------------------------------------------------------------------------
   2. EDITORIAL TYPE ROLES — the scale applied to a class, not to elements
   -------------------------------------------------------------------------- */
.lm-display {
  font-family: var(--lm-font-display);
  font-size: var(--lm-fs-display);
  font-weight: var(--lm-weight-semibold);
  line-height: var(--lm-lh-display);
  letter-spacing: var(--lm-track-display);
  color: var(--lm-color-text);
}

.lm-h1 {
  font-family: var(--lm-font-display);
  font-size: var(--lm-fs-h1);
  font-weight: var(--lm-weight-semibold);
  line-height: var(--lm-lh-h1);
  letter-spacing: var(--lm-track-h1);
  color: var(--lm-color-text);
}

.lm-h2 {
  font-family: var(--lm-font-display);
  font-size: var(--lm-fs-h2);
  font-weight: var(--lm-weight-semibold);
  line-height: var(--lm-lh-h2);
  letter-spacing: var(--lm-track-h2);
  color: var(--lm-color-text);
}

.lm-h3 {
  font-family: var(--lm-font-text);
  font-size: var(--lm-fs-h3);
  font-weight: var(--lm-weight-semibold);
  line-height: var(--lm-lh-h3);
  letter-spacing: var(--lm-track-h3);
  color: var(--lm-color-text);
}

.lm-lead {
  font-family: var(--lm-font-text);
  font-size: var(--lm-fs-lead);
  font-weight: var(--lm-weight-regular);
  line-height: var(--lm-lh-lead);
  letter-spacing: var(--lm-track-body);
  color: var(--lm-color-text-muted);
  max-width: var(--lm-measure-narrow);
}

.lm-body {
  font-family: var(--lm-font-text);
  font-size: var(--lm-fs-body);
  font-weight: var(--lm-weight-regular);
  line-height: var(--lm-lh-body);
  letter-spacing: var(--lm-track-body);
  color: var(--lm-color-text);
  max-width: var(--lm-measure);
}

.lm-small {
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-small);
  font-weight: var(--lm-weight-regular);
  line-height: var(--lm-lh-small);
  letter-spacing: var(--lm-track-ui);
  color: var(--lm-color-text-muted);
}

.lm-caption {
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-caption);
  font-weight: var(--lm-weight-regular);
  line-height: var(--lm-lh-caption);
  letter-spacing: var(--lm-track-caption);
  color: var(--lm-color-text-muted);
}

.lm-caption__credit {
  display: block;
  color: var(--lm-color-border-strong);
}

.lm-ui {
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-ui);
  font-weight: var(--lm-weight-medium);
  line-height: var(--lm-lh-ui);
  letter-spacing: var(--lm-track-ui);
  color: var(--lm-color-text);
}

.lm-kicker {
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-caption);
  font-weight: var(--lm-weight-semibold);
  line-height: var(--lm-lh-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lm-color-accent);
}


/* --------------------------------------------------------------------------
   3. EDITORIAL LINKS
   -------------------------------------------------------------------------- */
.lm-link {
  color: var(--lm-color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--lm-color-border-strong);
}

.lm-link:hover,
.lm-link:focus-visible {
  color: var(--lm-color-accent-2);
  border-bottom-color: var(--lm-color-accent-2);
}

.lm-link--quiet {
  color: var(--lm-color-text);
  border-bottom-color: var(--lm-color-border-strong);
}

.lm-link--quiet:hover,
.lm-link--quiet:focus-visible {
  color: var(--lm-color-accent);
  border-bottom-color: var(--lm-color-accent);
}


/* --------------------------------------------------------------------------
   4. RULES / DIVIDERS
   -------------------------------------------------------------------------- */
.lm-rule {
  border: 0;
  border-top: 1px solid var(--lm-color-border);
  margin: var(--lm-space-md) 0;
}

.lm-rule--strong {
  border-top-color: var(--lm-color-border-strong);
}


/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.lm-button {
  display: inline-block;
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-ui);
  font-weight: var(--lm-weight-medium);
  line-height: var(--lm-lh-ui);
  letter-spacing: var(--lm-track-ui);
  padding: var(--lm-space-xs) var(--lm-space-md);
  border: 1px solid var(--lm-color-border-strong);
  background: var(--lm-color-surface);
  color: var(--lm-color-text);
  text-decoration: none;
  cursor: pointer;
}

.lm-button--primary {
  background: var(--lm-color-accent);
  border-color: var(--lm-color-accent);
  color: var(--lm-color-text-on-accent);
}

.lm-button--primary:hover,
.lm-button--primary:focus-visible {
  background: var(--lm-color-accent-2);
  border-color: var(--lm-color-accent-2);
}

.lm-button--secondary {
  background: transparent;
  border-color: var(--lm-color-accent);
  color: var(--lm-color-accent);
}

.lm-button--secondary:hover,
.lm-button--secondary:focus-visible {
  background: var(--lm-color-surface);
  border-color: var(--lm-color-accent-2);
  color: var(--lm-color-accent-2);
}

.lm-button--quiet {
  background: var(--lm-color-surface);
  border-color: var(--lm-color-border-strong);
  color: var(--lm-color-text);
}

.lm-button--quiet:hover,
.lm-button--quiet:focus-visible {
  border-color: var(--lm-color-accent);
  color: var(--lm-color-accent);
}

.lm-button:focus-visible {
  outline: 2px solid var(--lm-color-focus);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.lm-card {
  background: var(--lm-color-surface);
  border: 1px solid var(--lm-color-border);
  display: block;
  color: var(--lm-color-text);
  text-decoration: none;
}

.lm-card__media {
  display: block;
  border-bottom: 1px solid var(--lm-color-border);
}

.lm-card__img {
  display: block;
  width: 100%;
  height: auto;
}

.lm-card__body {
  padding: var(--lm-card-padding);
}

.lm-card__eyebrow {
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-caption);
  font-weight: var(--lm-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lm-color-accent);
  margin-bottom: var(--lm-space-2xs);
}

.lm-card__title {
  font-family: var(--lm-font-display);
  font-size: var(--lm-fs-h3);
  font-weight: var(--lm-weight-semibold);
  line-height: var(--lm-lh-h3);
  letter-spacing: var(--lm-track-h3);
  color: var(--lm-color-text);
  margin-bottom: var(--lm-space-2xs);
}

.lm-card__meta {
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-caption);
  line-height: var(--lm-lh-caption);
  letter-spacing: var(--lm-track-caption);
  color: var(--lm-color-text-muted);
}

.lm-card:hover .lm-card__title,
.lm-card:focus-visible .lm-card__title {
  color: var(--lm-color-accent);
}

.lm-card:focus-visible {
  outline: 2px solid var(--lm-color-focus);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   7. BADGES / LABELS
   -------------------------------------------------------------------------- */
.lm-badge {
  display: inline-block;
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-caption);
  font-weight: var(--lm-weight-semibold);
  line-height: var(--lm-lh-ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: var(--lm-space-3xs) var(--lm-space-2xs);
  border: 1px solid var(--lm-color-border-strong);
  background: var(--lm-color-surface);
  color: var(--lm-color-text-muted);
}

.lm-badge--accent {
  background: var(--lm-color-accent);
  border-color: var(--lm-color-accent);
  color: var(--lm-color-text-on-accent);
}

.lm-badge--muted {
  background: var(--lm-color-bg);
  border-color: var(--lm-color-border);
  color: var(--lm-color-text-muted);
}


/* --------------------------------------------------------------------------
   8. NOTES / CALLOUTS
   Used for editorial asides, corrections and status messages.
   A left rule carries the status colour; text remains primary text colour so
   contrast is never carried by the status colour alone.
   -------------------------------------------------------------------------- */
.lm-note {
  background: var(--lm-color-surface);
  border: 1px solid var(--lm-color-border);
  border-left: 4px solid var(--lm-color-border-strong);
  padding: var(--lm-space-md);
  color: var(--lm-color-text);
  font-family: var(--lm-font-text);
  font-size: var(--lm-fs-body);
  line-height: var(--lm-lh-body);
  max-width: var(--lm-measure);
}

.lm-note__title {
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-ui);
  font-weight: var(--lm-weight-semibold);
  line-height: var(--lm-lh-ui);
  letter-spacing: var(--lm-track-ui);
  margin-bottom: var(--lm-space-2xs);
}

.lm-note--info    { border-left-color: var(--lm-color-accent-2); }
.lm-note--success { border-left-color: var(--lm-color-success); }
.lm-note--warning { border-left-color: var(--lm-color-warning); }
.lm-note--error   { border-left-color: var(--lm-color-error); }


/* --------------------------------------------------------------------------
   9. ACCESSIBILITY — visible focus on our own interactive components only
   -------------------------------------------------------------------------- */
.lm-link:focus-visible {
  outline: 2px solid var(--lm-color-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   R3 — FOOTER CHROME LAYER (lm-footer*)
   --------------------------------------------------------------------------
   Owner ....... LookAmaze R2 Child · css/components.css (the lm- layer)
   Consumer .... template 7334, DRAFT + UNASSIGNED. No serving element carries
                 these classes, so this block is INERT BY NON-USE and cannot
                 change the current site.
   Scope ....... every selector is scoped under .lm-footer.
   Discipline .. every colour / family / size / tracking / spacing value is an
                 --lm-* token. No literal colour, no literal font stack, no
                 !important, no JS, no PHP, no Elementor-kit change, no radius
                 (radius remains an open decision).
   Specificity . Elementor’s container/widget rules reach the same weight, so
                 layout-critical selectors double the block class on purpose.
   ========================================================================== */

.lm-footer {
  --lm-footer-max: 1140px;
  background: var(--lm-color-bg);
  border-top: 1px solid var(--lm-color-border);
  color: var(--lm-color-text);
  padding-block: var(--lm-space-2xl) 0;
}

.lm-footer .e-con-inner { padding-block: 0; }

.lm-footer .lm-footer__inner.lm-footer__inner {
  box-sizing: border-box;
  max-width: var(--lm-footer-max);
  margin-inline: auto;
  padding-inline: var(--lm-gutter);
}

.lm-footer .lm-footer__band.lm-footer__band {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: var(--lm-space-xl) var(--lm-space-2xl);
  padding-block: var(--lm-space-2xl) var(--lm-space-xl);
}

.lm-footer .elementor-widget:last-child { margin-block-end: 0; }

.lm-footer .lm-footer__wordmark .elementor-heading-title {
  font-family: var(--lm-font-display);
  font-size: var(--lm-fs-h2);
  font-weight: var(--lm-weight-semibold);
  line-height: var(--lm-lh-h2);
  letter-spacing: var(--lm-track-h2);
  font-variation-settings: "SOFT" var(--lm-fraunces-soft), "WONK" var(--lm-fraunces-wonk);
  color: var(--lm-color-text);
  margin: 0;
  overflow-wrap: break-word;
}

.lm-footer .lm-footer__tagline .elementor-widget-container {
  font-family: var(--lm-font-text);
  font-size: var(--lm-fs-lead);
  line-height: var(--lm-lh-lead);
  color: var(--lm-color-text-muted);
  max-width: var(--lm-measure-narrow);
  margin-block-start: var(--lm-space-sm);
}

.lm-footer .lm-footer__tagline p { margin: 0; }

.lm-footer .lm-footer__label { margin-block-end: var(--lm-space-sm); }

.lm-footer .lm-footer__label .elementor-heading-title {
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-caption);
  font-weight: var(--lm-weight-medium);
  line-height: var(--lm-lh-caption);
  letter-spacing: var(--lm-track-caption);
  text-transform: uppercase;
  color: var(--lm-color-text-muted);
  margin: 0;
}

.lm-footer .lm-footer__list ul { list-style: none; margin: 0; padding: 0; }
.lm-footer .lm-footer__list li { margin: 0; padding: 0; }

.lm-footer .lm-footer__list a {
  font-family: var(--lm-font-text);
  font-size: var(--lm-fs-body);
  line-height: var(--lm-lh-body);
  letter-spacing: var(--lm-track-body);
  color: var(--lm-color-text);
  text-decoration: none;
  overflow-wrap: break-word;
}

.lm-footer .lm-footer__list a:hover { color: var(--lm-color-accent); }
.lm-footer .lm-footer__list a:focus-visible {
  outline: 2px solid var(--lm-color-focus);
  outline-offset: 2px;
}

.lm-footer .lm-footer__list--info a {
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-small);
  letter-spacing: var(--lm-track-ui);
  color: var(--lm-color-text-muted);
}

.lm-footer .lm-footer__bottom.lm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lm-space-sm) var(--lm-space-md);
  border-top: 1px solid var(--lm-color-border);
  padding-block: var(--lm-space-md) var(--lm-space-lg);
}

.lm-footer .lm-footer__copyright .elementor-widget-container,
.lm-footer .lm-footer__copyright p {
  font-family: var(--lm-font-ui);
  font-size: var(--lm-fs-caption);
  line-height: var(--lm-lh-caption);
  letter-spacing: var(--lm-track-caption);
  color: var(--lm-color-text-muted);
  margin: 0;
}

.lm-footer .lm-footer__inner * { min-width: 0; }

@media (min-width: 1025px) {
  .lm-footer .lm-footer__list a { display: inline-block; padding-block: var(--lm-space-2xs); }
}

@media (max-width: 1024px) {
  .lm-footer .lm-footer__band.lm-footer__band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lm-space-xl);
    padding-block: var(--lm-space-xl) var(--lm-space-lg);
  }
  .lm-footer .lm-footer__list a { display: block; padding-block: var(--lm-space-xs); }
  .lm-footer .lm-footer__list li + li { border-top: 1px solid var(--lm-color-border); }
}

/* R3 footer — measured corrections (390/1024 real render).
   Structural floors are expressed as literal minimums, matching the existing
   convention of literal structural values (44px tap target, 1024px breakpoint):
   the fluid --lm-fs-* tokens resolve below a legible floor when Astra's root
   font-size shrinks on small viewports. */
.lm-footer .lm-footer__label .elementor-heading-title,
.lm-footer .lm-footer__copyright .elementor-widget-container,
.lm-footer .lm-footer__copyright p,
.lm-footer .lm-footer__list--info a {
  font-size: max(var(--lm-fs-caption), 14px);
}

@media (max-width: 1024px) {
  .lm-footer .lm-footer__list a {
    font-size: max(var(--lm-fs-body), 17px);
    padding-block: max(var(--lm-space-xs), 12px);
  }
}
/* ==========================================================================
   R3 — FOOTER CHROME LAYER · V2 REFINEMENT (lm-footer*)
   --------------------------------------------------------------------------
   Restates only the values that changed; everything in the V1 blocks above
   still stands. Scoped under .lm-footer, tokens only, no !important, no JS/PHP,
   no Elementor-kit change, no radius. Template 7334 is DRAFT + UNASSIGNED, so
   this block stays inert by non-use on the serving site.
   Desktop proportions are deliberately weighted — brand strongest, Sections
   second, Information quietest — not three equal columns.
   ========================================================================== */

.lm-footer {
  --lm-footer-max: 1240px;   /* publication-chrome ceiling, matching the masthead.
                                The article reading measure is unchanged. */
}

/* 1. Desktop band — weighted three-column rhythm */
.lm-footer .lm-footer__band.lm-footer__band {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.05fr) minmax(0, 0.85fr);
  column-gap: var(--lm-space-2xl);
  padding-block: var(--lm-space-2xl) var(--lm-space-2xl);
}

/* 2. Brand hierarchy — restrained desktop increase only */
.lm-footer .lm-footer__wordmark .elementor-heading-title {
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 36px);   /* 28 → 36px */
}

/* 3. Scanning without rule-line clutter */
.lm-footer .lm-footer__list li + li { border-top: 0; }

/* 4. Tablet — brand full width, then Sections | Information side by side */
@media (max-width: 1024px) and (min-width: 641px) {
  .lm-footer .lm-footer__band.lm-footer__band {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: var(--lm-space-xl);
    row-gap: var(--lm-space-xl);
    padding-block: var(--lm-space-xl) var(--lm-space-lg);
  }
  .lm-footer .lm-footer__brand { grid-column: 1 / -1; }
}

/* 5. Mobile — single column, editorial rhythm */
@media (max-width: 640px) {
  .lm-footer .lm-footer__band.lm-footer__band {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--lm-space-xl);
    padding-block: var(--lm-space-xl) var(--lm-space-lg);
  }
  .lm-footer .lm-footer__brand { grid-column: auto; }
}

/* ==========================================================================
   R3 — FOOTER CHROME LAYER · V2.1 SOCIAL ROW (lm-footer*)
   --------------------------------------------------------------------------
   Modular by construction: one flex row, controlled gap, NO fixed column
   count, NO dividers, NO centring — so it stays correct with 2, 3, 4 or more
   items, and removing an item orphans nothing and needs no redesign.
   Each link's accessible name is its own visible platform text.
   Template 7334 is DRAFT + UNASSIGNED, so this stays inert by non-use.
   ========================================================================== */

.lm-footer .lm-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lm-space-xs) var(--lm-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: var(--lm-space-md);
}

.lm-footer .lm-footer__social li { margin: 0; padding: 0; }

.lm-footer .lm-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--lm-font-ui);
  font-size: max(var(--lm-fs-caption), 14px);
  line-height: var(--lm-lh-caption);
  letter-spacing: var(--lm-track-caption);
  text-transform: uppercase;
  color: var(--lm-color-text-muted);
  text-decoration: none;
  padding-block: var(--lm-space-2xs);
}

.lm-footer .lm-footer__social-link:hover { color: var(--lm-color-accent); }

.lm-footer .lm-footer__social-link:focus-visible {
  outline: 2px solid var(--lm-color-focus);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .lm-footer .lm-footer__social-link {
    min-height: 44px;
    min-width: 44px;
    padding-block: var(--lm-space-xs);
  }
}

/* ==========================================================================
   R3 — FOOTER CHROME LAYER · V2.2 SOCIAL ICONS (lm-footer*)
   --------------------------------------------------------------------------
   Supersedes the V2.1 text treatment of the same selectors: the row now shows
   three monochrome icons rather than platform names. Each link's accessible
   name comes from its own aria-label, and the glyph is decorative
   (aria-hidden), so no duplicate names. The pending platform is a
   non-focusable span, hidden from assistive tech, never an empty anchor.
   Scoped under .lm-footer, tokens only, no !important, no brand colours, no
   fixed column count — flex + gap still scales to 2, 3, 4 or more items.
   ========================================================================== */

.lm-footer .lm-footer__social { gap: var(--lm-space-sm); }

.lm-footer .lm-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--lm-color-text-muted);
  text-decoration: none;
}

.lm-footer .lm-footer__social-link svg,
.lm-footer .lm-footer__social-link i {
  display: block;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  fill: currentColor;
}

.lm-footer .lm-footer__social-link:hover { color: var(--lm-color-accent); }

.lm-footer .lm-footer__social-link:focus-visible {
  outline: 2px solid var(--lm-color-focus);
  outline-offset: 2px;
}

/* pending platform: visible, inert, hidden from assistive tech */
.lm-footer .lm-footer__social-link--pending {
  color: var(--lm-color-text-muted);
  cursor: default;
}

@media (max-width: 1024px) {
  .lm-footer .lm-footer__social-link {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
}

/* ==========================================================================
   R4 — HOMEPAGE LAYER (lm-home*)
   --------------------------------------------------------------------------
   Owner ....... LookAmaze R2 Child · css/components.css
   Consumer .... the R4 homepage candidate (Draft page, NOT ASSIGNED): inert by
                 non-use on the currently assigned homepage.
   Scope ....... every selector is scoped under .lm-home.
   Discipline .. tokens only — no literal colour, no literal font stack, no
                 !important, no JS, no radius (radius is still an open decision).
   Width ....... 1240px, matching the approved publication-chrome ceiling.
   ========================================================================== */

.lm-home { --lm-home-max: 1240px; background: var(--lm-color-bg); color: var(--lm-color-text); }
.lm-home .e-con-inner { padding-block: 0; }
.lm-home__wrap { box-sizing: border-box; max-width: var(--lm-home-max); margin-inline: auto; padding-inline: var(--lm-gutter); }
.lm-home__section { padding-block: var(--lm-space-2xl); }
.lm-home__section + .lm-home__section, .lm-home__band + .lm-home__section, .lm-home__section + .lm-home__band { border-top: 1px solid var(--lm-color-border); }

.lm-home__kicker { font-family: var(--lm-font-ui); font-size: max(var(--lm-fs-caption), 13px); font-weight: var(--lm-weight-medium); letter-spacing: var(--lm-track-caption); text-transform: uppercase; color: var(--lm-color-text-muted); margin: 0 0 var(--lm-space-sm); }
.lm-home__h2 { font-family: var(--lm-font-display); font-size: var(--lm-fs-h2); font-weight: var(--lm-weight-semibold); line-height: var(--lm-lh-h2); letter-spacing: var(--lm-track-h2); font-variation-settings: "SOFT" var(--lm-fraunces-soft), "WONK" var(--lm-fraunces-wonk); color: var(--lm-color-text); margin: 0 0 var(--lm-space-lg); }
.lm-home__lead-title, .lm-home__band-title { font-family: var(--lm-font-display); font-weight: var(--lm-weight-semibold); font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.5rem); line-height: 1.14; letter-spacing: var(--lm-track-h3); font-variation-settings: "SOFT" var(--lm-fraunces-soft), "WONK" var(--lm-fraunces-wonk); margin: 0; }
.lm-home__card-title, .lm-home__row-title { font-family: var(--lm-font-display); font-size: var(--lm-fs-h3); font-weight: var(--lm-weight-semibold); line-height: var(--lm-lh-h3); letter-spacing: var(--lm-track-h3); font-variation-settings: "SOFT" var(--lm-fraunces-soft), "WONK" var(--lm-fraunces-wonk); margin: 0; }

.lm-home a { color: inherit; text-decoration: none; }
.lm-home .lm-home__lead-title a, .lm-home .lm-home__band-title a, .lm-home .lm-home__card-title a, .lm-home .lm-home__row-title a, .lm-home__linklist a, .lm-home__meta a, .lm-home__latest-item a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: color .15s ease, background-size .2s ease; }
.lm-home .lm-home__lead-title a:hover, .lm-home .lm-home__band-title a:hover, .lm-home .lm-home__card-title a:hover, .lm-home .lm-home__row-title a:hover, .lm-home__linklist a:hover, .lm-home__meta a:hover, .lm-home__latest-item a:hover { color: var(--lm-color-accent); background-size: 100% 1px; }
.lm-home a:focus-visible { outline: 2px solid var(--lm-color-focus); outline-offset: 2px; }

.lm-home__dek, .lm-home__family-story { font-family: var(--lm-font-text); font-size: var(--lm-fs-body); line-height: var(--lm-lh-body); color: var(--lm-color-text-muted); margin: var(--lm-space-sm) 0 0; }
.lm-home__meta { font-family: var(--lm-font-ui); font-size: max(var(--lm-fs-caption), 13px); letter-spacing: var(--lm-track-caption); color: var(--lm-color-text-muted); margin: var(--lm-space-sm) 0 0; }

.lm-home__thumb { display: block; overflow: hidden; background: var(--lm-color-surface); }
.lm-home__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lm-home__thumb--lead, .lm-home__thumb--card { aspect-ratio: 16 / 9; }

.lm-home__lead { display: grid; gap: var(--lm-space-xl) var(--lm-space-2xl); grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); padding-block: var(--lm-space-2xl); }
.lm-home__rail { display: grid; align-content: start; gap: var(--lm-space-lg); }
.lm-home__rail-block { padding-block-start: var(--lm-space-lg); border-top: 1px solid var(--lm-color-border); }
.lm-home__rail-block:first-child { padding-block-start: 0; border-top: 0; }
.lm-home__linklist { list-style: none; margin: 0; padding: 0; }
.lm-home__linklist li { margin: 0 0 var(--lm-space-sm); }
.lm-home__linklist a { font-family: var(--lm-font-text); font-size: var(--lm-fs-body); line-height: var(--lm-lh-body); }

.lm-home__family { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--lm-space-lg) var(--lm-space-xl); padding-block: var(--lm-space-lg); border-top: 1px solid var(--lm-color-border); }
.lm-home__family:first-child { border-top: 0; }
.lm-home__family-name { font-family: var(--lm-font-display); font-size: var(--lm-fs-h3); font-weight: var(--lm-weight-semibold); margin: 0; }
.lm-home__family-name a:hover { color: var(--lm-color-accent); }
.lm-home__family-story { margin: 0; }

.lm-home__practical { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lm-space-xl); }
.lm-home__practical-cell { padding-block-start: var(--lm-space-lg); border-top: 2px solid var(--lm-color-text); }

.lm-home__band { padding-block: var(--lm-space-2xl); }
.lm-home__band + .lm-home__band { border-top: 1px solid var(--lm-color-border); }
.lm-home__band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--lm-space-sm) var(--lm-space-md); margin-block-end: var(--lm-space-lg); }
.lm-home__band-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--lm-space-xl) var(--lm-space-2xl); }
.lm-home__band-list { list-style: none; margin: 0; padding: 0; }
.lm-home__band-list li { padding-block: var(--lm-space-md); border-top: 1px solid var(--lm-color-border); }
.lm-home__band-list li:first-child { border-top: 0; padding-block-start: 0; }
.lm-home__band-list p { font-family: var(--lm-font-text); font-size: var(--lm-fs-small); line-height: var(--lm-lh-body); color: var(--lm-color-text-muted); margin: var(--lm-space-2xs) 0 0; }

.lm-home__guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lm-space-lg) var(--lm-space-2xl); }
.lm-home__guide { padding-block-start: var(--lm-space-lg); border-top: 1px solid var(--lm-color-border); }
.lm-home__guide p { font-family: var(--lm-font-text); font-size: var(--lm-fs-small); line-height: var(--lm-lh-body); color: var(--lm-color-text-muted); margin: var(--lm-space-2xs) 0 0; }
.lm-home__guide--featured { grid-row: span 2; }

.lm-home__latest { display: grid; gap: 0; }
.lm-home__latest-item { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--lm-space-md); align-items: baseline; padding-block: var(--lm-space-sm); border-top: 1px solid var(--lm-color-border); }
.lm-home__latest-item:first-child { border-top: 0; }
.lm-home__latest-item time { font-family: var(--lm-font-ui); font-size: max(var(--lm-fs-caption), 13px); letter-spacing: var(--lm-track-caption); color: var(--lm-color-text-muted); }
.lm-home__latest-item a { font-family: var(--lm-font-text); font-size: var(--lm-fs-body); line-height: var(--lm-lh-body); }

@media (max-width: 1024px) {
  .lm-home__lead { grid-template-columns: minmax(0, 1fr); }
  .lm-home__family { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-sm); }
  .lm-home__practical { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-lg); }
  .lm-home__band-body { grid-template-columns: minmax(0, 1fr); }
  .lm-home__guides { grid-template-columns: minmax(0, 1fr); }
  .lm-home__guide--featured { grid-row: auto; }
}
@media (max-width: 640px) {
  .lm-home__latest-item { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-2xs); }
  .lm-home__section, .lm-home__band { padding-block: var(--lm-space-xl); }
}
.lm-home__wrap * { min-width: 0; }

/* R4 homepage — mobile legibility floor. The fluid --lm-fs-small token resolves
   below a readable size once Astra shrinks the root font-size on small
   viewports, so these two excerpt styles carry an explicit minimum, matching the
   structural-literal convention already used for the footer's mobile text. */
@media (max-width: 1024px) {
  .lm-home .lm-home__band-list p,
  .lm-home .lm-home__guide p { font-size: max(var(--lm-fs-small), 14px); }
}

/* ==========================================================================
   R4 V2 — OPENING HIERARCHY · DEAD-SPACE · 390 READING-COPY FLOOR
   --------------------------------------------------------------------------
   Owner ....... LookAmaze R2 Child · css/components.css
   Consumer .... the R4 homepage candidate (page 7356, Draft, NOT ASSIGNED):
                 inert by non-use on the currently assigned homepage.
   Scope ....... every selector scoped under .lm-home. Compound selectors are
                 used deliberately so these rules outrank the V1 block by
                 specificity as well as by source order.
   Purpose ..... (1) make the opening text-led and asymmetric:
                     kicker → H1 → dek → lead image, with the image supporting
                     rather than dominating, and text before image at ≤1024;
                 (2) close the masthead → first-editorial-content gap;
                 (3) put a ~16px floor under sentence-style reading copy at 390
                     without enlarging utility metadata.
   ========================================================================== */

/* --- (1) text-led asymmetric opening ------------------------------- */
.lm-home .lm-home__lead { display: block; padding-block: var(--lm-space-md) var(--lm-space-xl); }
.lm-home .lm-home__lead-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--lm-space-xl) var(--lm-space-2xl);
  align-items: start;
}
.lm-home .lm-home__lead-text, .lm-home .lm-home__lead-media { min-width: 0; }
.lm-home .lm-home__lead-text { align-self: start; }
.lm-home .lm-home__lead-media { margin: 0; align-self: start; }
.lm-home .lm-home__lead-title { margin: 0; }

/* the supporting rail sits below the opening and stays subordinate */
.lm-home .lm-home__rail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--lm-space-lg) var(--lm-space-xl);
  align-items: start;
  margin-block-start: var(--lm-space-xl);
  padding-block-start: var(--lm-space-lg);
  border-top: 1px solid var(--lm-color-border);
}
.lm-home .lm-home__rail > .lm-home__rail-block { padding-block-start: 0; border-top: 0; }
.lm-home .lm-home__rail .lm-home__thumb--card { margin-block-end: var(--lm-space-sm); }

@media (max-width: 1024px) {
  .lm-home .lm-home__lead-inner { grid-template-columns: minmax(0, 1fr); }
  .lm-home .lm-home__rail { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-lg); }
}

/* --- (3) 390 reading-copy floor: sentence copy only, not metadata --- */
@media (max-width: 640px) {
  .lm-home .lm-home__dek,
  .lm-home .lm-home__family-story,
  .lm-home .lm-home__band-list p,
  .lm-home .lm-home__guide p,
  .lm-home .lm-home__latest-item a { font-size: max(var(--lm-fs-body), 16px); }
}

/* --- (2) close the masthead -> first-editorial-content gap ---------- */
.lm-home .lm-home__wrap { padding-block-start: 0; }
.lm-home .lm-home__lead { padding-block-start: 0; }
.lm-home { margin-block-start: -32px; }

/* R4 V2 — mobile dead-space correction. The masthead → first-editorial-content
   gap measured 23px at 390 (target band 24–44px), because the Elementor
   container's own block padding is smaller at mobile than the desktop value the
   scoped negative offset was tuned against. This trims the mobile-only offset so
   the opening lands inside the band. */
@media (max-width: 640px) {
  .lm-home { margin-block-start: -22px; }
}
/* R4 typography correction — the Astra theme applies a site-wide
   `text-transform: capitalize` to h1–h6; inside .lm-home, headings must render
   with their authored casing as stored. Scoped to the homepage layer only. */
.lm-home h1,
.lm-home h2,
.lm-home h3 {
  text-transform: none;
}