/* =====================================================================
   lumos.css — Lumos Framework 2.3 conventions, ported to plain HTML/CSS
   (no Webflow). Shared core for the Growth and Airway route homepages.

   Embodies the Lumos systems:
   - Namespaced variables (--site--, --space--, --section-space--,
     --text-size--, --theme--, --swatch--)
   - Breakpointless: rem-based fluid sizing via clamp() between
     --site--viewport-min (20rem) and --site--viewport-max (90rem).
     No px. No pixel breakpoints. Layouts wrap; grids autofit;
     container queries use em.
   - Themes: u-theme-* set --theme--* from --swatch--*; children inherit.
   - Text styles: u-text-style-* apply the type scale.
   - Class naming: custom (type_variation_element), utility (u-), combo (is-).

   Each route page sets its own --swatch--* and --font--* (and loads its
   fonts), then consumes these utilities. Route-specific component styles
   live in the page itself.
   ===================================================================== */

:root{
  /* ---- site ---- */
  --site--viewport-min: 20rem;
  --site--viewport-max: 90rem;
  --site--max-width: 75rem;       /* 1200px */
  --site--margin: clamp(1.25rem, 0.7rem + 2.6vw, 2.5rem);
  --site--gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  --site--column-count: 12;

  /* ---- space scale (space/1–8), fluid, all below smallest section space ---- */
  --space--1: clamp(0.5rem, 0.48rem + 0.1vw, 0.625rem);
  --space--2: clamp(0.75rem, 0.69rem + 0.27vw, 1rem);
  --space--3: clamp(1rem, 0.89rem + 0.54vw, 1.5rem);
  --space--4: clamp(1.5rem, 1.3rem + 0.98vw, 2.25rem);
  --space--5: clamp(2rem, 1.57rem + 2.14vw, 3.5rem);
  --space--6: clamp(3rem, 2.36rem + 3.21vw, 5rem);
  --space--7: clamp(4rem, 2.86rem + 5.71vw, 7rem);
  --space--8: clamp(5rem, 3.21rem + 8.93vw, 10rem);

  /* ---- section spacing (vertical padding within sections) ---- */
  --section-space--main: clamp(4rem, 2.7rem + 6.4vw, 8rem);
  --section-space--large: clamp(6rem, 4rem + 10vw, 11rem);
  --section-space--small: clamp(2.5rem, 1.8rem + 3.6vw, 5rem);
  --section-space--none: 0rem;
  --section-space--page-top: clamp(6rem, 4.5rem + 7.1vw, 9.5rem);

  /* ---- type scale (fluid), family slots filled per route ---- */
  --text-size--display: clamp(2.75rem, 1.45rem + 6.5vw, 5rem);
  --text-size--h1: clamp(2.25rem, 1.43rem + 4.1vw, 3.75rem);
  --text-size--h2: clamp(1.75rem, 1.3rem + 2.3vw, 2.75rem);
  --text-size--h3: clamp(1.3rem, 1.13rem + 0.86vw, 1.625rem);
  --text-size--h4: clamp(1.1rem, 1.01rem + 0.45vw, 1.3rem);
  --text-size--large: clamp(1.125rem, 1.04rem + 0.43vw, 1.3rem);
  --text-size--main: 1.0625rem;   /* 17px body */
  --text-size--small: 0.8125rem;  /* 13px */

  --lh--tight: 1.08;
  --lh--snug: 1.22;
  --lh--normal: 1.65;
  --ls--tight: -0.012em;
  --ls--wide: 0.22em;

  --radius--s: 0.1875rem;
  --radius--m: 0.5rem;
  --radius--l: 1.125rem;
  --radius--pill: 62.4375rem;
}

/* ---- reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:100%; }
body{
  margin:0;
  background:var(--theme--background);
  color:var(--theme--text);
  font-family:var(--font--body);
  font-size:var(--text-size--main);
  line-height:var(--lh--normal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; }

/* =====================================================================
   THEMES — set --theme--* from --swatch--*; children inherit.
   ===================================================================== */
.u-theme-light{
  --theme--background: var(--swatch--light-100);
  --theme--surface: var(--swatch--light-200);
  --theme--text: var(--swatch--dark-700);
  --theme--heading: var(--swatch--dark-900);
  --theme--text-muted: var(--swatch--dark-600);
  --theme--border: var(--swatch--light-300);
  --theme--primary: var(--swatch--brand-500);
  --theme--on-primary: var(--swatch--brand-text);
  --theme--accent: var(--swatch--accent-500);
  background:var(--theme--background); color:var(--theme--text);
}
.u-theme-surface{
  --theme--background: var(--swatch--light-200);
  --theme--surface: var(--swatch--light-100);
  --theme--text: var(--swatch--dark-700);
  --theme--heading: var(--swatch--dark-900);
  --theme--text-muted: var(--swatch--dark-600);
  --theme--border: var(--swatch--light-300);
  --theme--primary: var(--swatch--brand-500);
  --theme--on-primary: var(--swatch--brand-text);
  --theme--accent: var(--swatch--accent-500);
  background:var(--theme--background); color:var(--theme--text);
}
.u-theme-brand{
  --theme--background: var(--swatch--brand-500);
  --theme--surface: var(--swatch--brand-600);
  --theme--text: color-mix(in srgb, var(--swatch--brand-text) 90%, transparent);
  --theme--heading: var(--swatch--brand-text);
  --theme--text-muted: color-mix(in srgb, var(--swatch--brand-text) 72%, transparent);
  --theme--border: color-mix(in srgb, var(--swatch--brand-text) 26%, transparent);
  --theme--primary: var(--swatch--light-100);
  --theme--on-primary: var(--swatch--brand-500);
  --theme--accent: var(--swatch--accent-500);
  background:var(--theme--background); color:var(--theme--text);
}
.u-theme-dark{
  --theme--background: var(--swatch--dark-900);
  --theme--surface: var(--swatch--dark-800);
  --theme--text: color-mix(in srgb, var(--swatch--light-100) 86%, transparent);
  --theme--heading: var(--swatch--light-100);
  --theme--text-muted: color-mix(in srgb, var(--swatch--light-100) 66%, transparent);
  --theme--border: color-mix(in srgb, var(--swatch--light-100) 22%, transparent);
  --theme--primary: var(--swatch--brand-500);
  --theme--on-primary: var(--swatch--brand-text);
  --theme--accent: var(--swatch--accent-500);
  background:var(--theme--background); color:var(--theme--text);
}
/* headings default to the theme heading colour + the display family
   (zero-specificity :where, so u-text-style-* and component classes override).
   h1/h2 take --font--weight-display so display headings can be lighter than h3/h4. */
:where(h1,h2){ color:var(--theme--heading, var(--theme--text)); font-family:var(--font--display); font-weight:var(--font--weight-display, var(--font--display-weight,480)); line-height:var(--lh--snug); }
:where(h3,h4){ color:var(--theme--heading, var(--theme--text)); font-family:var(--font--display); font-weight:var(--font--display-weight,480); line-height:var(--lh--snug); }
:where(h1,h2,h3,h4) :is(em,i){ font-weight:var(--font--weight-emphasis,400); font-style:italic; }

/* =====================================================================
   TEXT STYLES — u-text-style-*
   ===================================================================== */
.u-text-style-display{ font-family:var(--font--display); font-size:var(--text-size--display); line-height:var(--lh--tight); letter-spacing:-0.02em; font-weight:var(--font--weight-display, var(--font--display-weight,480)); }
.u-text-style-h1{ font-family:var(--font--display); font-size:var(--text-size--h1); line-height:var(--lh--tight); letter-spacing:var(--ls--tight); font-weight:var(--font--weight-display, var(--font--display-weight,480)); }
.u-text-style-h2{ font-family:var(--font--display); font-size:var(--text-size--h2); line-height:var(--lh--snug); letter-spacing:var(--ls--tight); font-weight:var(--font--weight-display, var(--font--display-weight,480)); }
.u-text-style-h3{ font-family:var(--font--display); font-size:var(--text-size--h3); line-height:var(--lh--snug); letter-spacing:var(--ls--tight); font-weight:var(--font--display-weight,500); }
.u-text-style-h4{ font-family:var(--font--display); font-size:var(--text-size--h4); line-height:1.3; font-weight:600; }
.u-text-style-large{ font-family:var(--font--body); font-size:var(--text-size--large); line-height:1.6; }
.u-text-style-main{ font-family:var(--font--body); font-size:var(--text-size--main); line-height:var(--lh--normal); }
.u-text-style-small{ font-family:var(--font--body); font-size:var(--text-size--small); line-height:1.5; }
.u-text-style-eyebrow{ font-family:var(--font--label); font-size:var(--text-size--small); letter-spacing:var(--ls--wide); text-transform:uppercase; font-weight:600; line-height:1.4; }

.u-color-primary{ color:var(--theme--primary); }
.u-color-muted{ color:var(--theme--text-muted); }
.u-color-accent{ color:var(--theme--accent); }

/* =====================================================================
   LAYOUT UTILITIES
   ===================================================================== */
.u-container{ width:100%; max-width:var(--site--max-width); margin-inline:auto; padding-inline:var(--site--margin); container-type:inline-size; }
.u-section{ padding-block:var(--section-space--main); }
.u-section-large{ padding-block:var(--section-space--large); }
.u-section-small{ padding-block:var(--section-space--small); }
.u-section-page-top{ padding-top:var(--section-space--page-top); padding-bottom:var(--section-space--main); }
.u-border-top{ border-top:1px solid var(--theme--border); }

.u-grid-autofit{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(18rem,100%), 1fr)); gap:var(--site--gutter); }
.u-grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--site--gutter); }
.u-grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--site--gutter); }
.u-flex{ display:flex; }
.u-flex-wrap{ display:flex; flex-wrap:wrap; gap:var(--space--3); }
.u-flex-align-center{ align-items:center; }
.u-flex-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--space--4); flex-wrap:wrap; }

/* gap helpers tied to the space scale */
.u-gap-2{ gap:var(--space--2); } .u-gap-3{ gap:var(--space--3); } .u-gap-4{ gap:var(--space--4); } .u-gap-5{ gap:var(--space--5); }

/* margin-trim — strip first-child top / last-child bottom margin */
.u-margin-trim > *:first-child{ margin-top:0; }
.u-margin-trim > *:last-child{ margin-bottom:0; }

/* text rhythm: headings + paragraphs carry bottom margin, collapse in block flow */
.u-rich :where(h1,h2,h3,h4){ margin:0 0 var(--space--3); }
.u-rich :where(p){ margin:0 0 var(--space--3); }
.u-measure{ max-width:64ch; }
.u-measure-narrow{ max-width:46ch; }

/* =====================================================================
   COMPONENTS shared across routes
   ===================================================================== */
/* button */
.u-button{ display:inline-flex; align-items:center; gap:var(--space--2); font-family:var(--font--label); font-size:0.9375rem; font-weight:600; letter-spacing:0.01em; padding:0.9rem 1.6rem; border-radius:var(--btn-radius, var(--radius--s)); text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s, color .25s, box-shadow .25s, border-color .25s; }
.u-button.is-primary{ background:var(--theme--primary); color:var(--theme--on-primary); }
.u-button.is-primary:hover{ transform:translateY(-2px); box-shadow:0 0.625rem 1.5rem -0.75rem var(--theme--primary); }
.u-button.is-ghost{ background:transparent; color:var(--theme--text); border-color:var(--theme--border); }
.u-button.is-ghost:hover{ border-color:var(--theme--primary); color:var(--theme--primary); }
.u-button.is-small{ padding:0.5rem 1.05rem; font-size:0.8125rem; }
.u-textlink{ font-family:var(--font--label); font-size:0.9375rem; font-weight:600; color:var(--theme--primary); text-decoration:none; display:inline-flex; align-items:center; gap:var(--space--2); }
.u-textlink .arr{ transition:transform .25s; }
.u-textlink:hover .arr{ transform:translateX(0.3rem); }

/* placeholder image block */
.u-placeholder{ position:relative; border:1px solid var(--theme--border); background:linear-gradient(135deg, var(--theme--surface), var(--theme--background)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--space--4); gap:var(--space--2); min-height:14rem; overflow:hidden; }
.u-placeholder::after{ content:""; position:absolute; inset:0.5rem; border:1px solid var(--theme--border); opacity:.5; pointer-events:none; }
.u-placeholder .ph-tag{ font-family:var(--font--label); font-size:0.625rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--theme--primary); opacity:.75; }
.u-placeholder .ph-desc{ font-family:var(--font--display); font-style:italic; font-size:0.9375rem; line-height:1.45; color:var(--theme--text); max-width:34ch; opacity:.85; }

/* =====================================================================
   MOTION
   ===================================================================== */
.u-reveal{ opacity:0; transform:translateY(1.1rem); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.u-reveal.is-in{ opacity:1; transform:none; }
@keyframes lumos-rise{ from{ opacity:0; transform:translateY(1.4rem); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .u-reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
}

/* =====================================================================
   BREAKPOINTLESS — container-query helpers (em, matched globally)
   Stack 2/3-col grids as the container narrows. No px breakpoints.
   ===================================================================== */
@container (width < 52em){
  .u-grid-2.is-cq{ grid-template-columns:1fr; }
  .u-grid-3.is-cq{ grid-template-columns:1fr 1fr; }
}
@container (width < 34em){
  .u-grid-3.is-cq{ grid-template-columns:1fr; }
}