/* ============================================================
   LXP Design System — Tokens
   Three color directions, three type pairings, two densities.
   Default: Stone + Deep Blue, EB Garamond + Switzer, Editorial.
   ============================================================ */

/* Helvetica Neue is system-installed on macOS/iOS and most Adobe-licensed
   Windows machines; Arial / system-ui fall back gracefully on Linux.
   EB Garamond is loaded via <link> in Head.ss (with preconnect) and is
   reserved for italic editorial accents only — pull quotes, taglines and
   the .t-italic utility. Site body + headlines are Helvetica since
   2026-05-23 (see typography block below). */

:root {
  /* ---------- COLOR DIRECTION A: Stone + Deep Blue (default) ---------- */
  --stone-50:  #f7f4ee;
  --stone-100: #efeae0;
  --stone-200: #e3dccd;
  --stone-300: #cbc1ac;
  --stone-400: #a89c83;
  --stone-500: #7a7058;
  --stone-600: #4f4836;
  --stone-700: #2f2b21;
  --stone-800: #1a1813;
  --stone-900: #0f0e0a;

  /* Direction A accent: Deep Mediterranean Blue
     PROVISIONAL (2026-06-04, proposal — not committed): swapped to a warm
     near-black "Espresso Ink" charcoal ramp (hue biased to brown/red, not
     blue). Revert these 7 values to restore the navy. Original navy:
     50 #eef3f7 / 100 #d6e1ec / 200 #aec3d8 / 400 #5a7e9e /
     600 #1f3d5c / 700 #173049 / 800 #0f2236 */
  --accent-a-50:  #f3efec;
  --accent-a-100: #e7ddd6;
  --accent-a-200: #cbbcb1;
  --accent-a-400: #6e5f55;
  --accent-a-600: #36302c;
  --accent-a-700: #2a2421;
  --accent-a-800: #211c19;

  /* Direction B accent: Burgundy / Bordeaux */
  --accent-b-50:  #f7eef0;
  --accent-b-100: #ecd5da;
  --accent-b-200: #d4a3ac;
  --accent-b-400: #9c4a59;
  --accent-b-600: #6b1f2c;
  --accent-b-700: #501620;
  --accent-b-800: #3a0e17;

  /* Direction C accent: Aubergine / Plum */
  --accent-c-50:  #f3eef4;
  --accent-c-100: #e2d5e6;
  --accent-c-200: #bfa3c8;
  --accent-c-400: #6e4a7c;
  --accent-c-600: #432a52;
  --accent-c-700: #321f3f;
  --accent-c-800: #22152c;

  /* Semantic — bound by [data-accent] below.
     Ground system (locked 2026-04-30): bone (#faf7f2) default, same bone
     for the editorial soft band (effectively a no-op tint that lets the
     band-utility shadow trick read), deep Mediterranean blue band for
     conversion zones. */
  --bg:           #faf7f2;            /* bone — preview as main ground */
  --bg-soft:      #faf7f2;            /* bone — secondary band */
  --bg-deep:      #211c19; /* PROVISIONAL warm near-black — was #0f2236 deep navy */
  --bg-elev:      #ffffff;
  --surface:      #ffffff;
  --ink:          #211c19;            /* PROVISIONAL warm near-black — was #0f2236 */
  --ink-soft:     rgba(33, 28, 25, 0.72);  /* PROVISIONAL — was rgba(15,34,54,..) */
  --ink-muted:    rgba(33, 28, 25, 0.62);  /* 0.62 = 4.66:1 on bone — the AA floor
                     for the small eyebrow/label/micro text this token paints.
                     (0.55 measured 3.74:1 — WCAG 1.4.3 fail.) */
  --hairline:     var(--stone-200);
  --hairline-soft:var(--stone-100);
  /* Interactive boundaries (form underlines, input borders) need 3:1
     non-text contrast (WCAG 1.4.11); stone-200 on bone is 1.28:1.
     Decorative hairlines keep --hairline. */
  --hairline-strong: var(--stone-400);
  /* `--rule-band` is the visible, full-bleed top/bottom border on panel-
     sections (MetricBar, DestinationStrip, CaseRail etc.).
     Darker than `--hairline` so the bands actually read as section
     boundaries rather than near-invisible suggestions. */
  --rule-band:    var(--stone-300);

  --accent:       var(--accent-a-600);
  --accent-deep:  var(--accent-a-800);
  --accent-soft:  var(--accent-a-100);
  --accent-faint: var(--accent-a-50);
  --accent-ink:   #ffffff;

  /* Form validation error — a warm red, lighter than the burgundy accent.
     ~4.96:1 on white (#fff), so it passes WCAG AA for the small bold
     message + field-underline use. */
  --error:        #d0342c;

  /* ---------- FEATURE / BRAND-SECONDARY: Logo Orange ----------
     Lifted directly from the X in the LifeXperiences wordmark (#f39200).
     Used for announcements, "featured" pills, campaign moments, and
     anything that needs to break the institutional-blue pattern.
     Does NOT change with the accent toggle — this is a fixed second
     brand color, not a direction. Use sparingly. */
  --feature-50:   #fdf3e2;
  --feature-100:  #fbe1b6;
  --feature-200:  #f8c879;
  --feature-400:  #f5a93a;
  --feature-500:  #f39200;   /* logo orange — the X */
  --feature-600:  #d57f00;
  --feature-700:  #a86200;
  --feature-800:  #6f4000;

  --feature:       var(--feature-500);
  --feature-deep:  var(--feature-700);
  --feature-soft:  var(--feature-100);
  --feature-faint: var(--feature-50);
  --feature-ink:   #ffffff;

  /* ---------- TYPE ----------
     Helvetica (system) for body copy, UI chrome, and all headlines —
     flipped from serif to sans site-wide on 2026-05-23. Switzer (Fontshare)
     is the web-font fallback for systems without Helvetica Neue. EB
     Garamond is loaded but reserved for italic editorial accents only. */
  --sans-helvetica: "Helvetica Neue", "HelveticaNeue", "Helvetica", "Arial", system-ui, sans-serif;
  --sans-inter:     "Inter", "Helvetica Neue", "Helvetica", "Arial", system-ui, sans-serif;
  --sans-switzer:   "Switzer", "Helvetica Neue", "Helvetica", "Arial", system-ui, sans-serif;

  --serif: "EB Garamond", "Garamond", "Charter", "Georgia", serif;
  /* Prefer locally installed Helvetica Neue; fall back to Switzer (web font)
     for systems without it (Linux/Android), then to Helvetica/Arial/system. */
  --sans:  "Helvetica Neue", "HelveticaNeue", "Helvetica", "Switzer", "Arial", system-ui, sans-serif;

  /* Type scale — bold editorial proportions.
     Fluid tiers mix a rem term into the preferred value so the headings
     keep scaling under browser zoom (WCAG 1.4.4) — a vw-only preferred
     value shrinks as the zoomed viewport narrows and caps effective
     scaling at ~130%. Min/max and the 390/1440px sizes are unchanged;
     only mid-tablet widths render a few px larger than the old curve. */
  --t-display: clamp(2.4242rem, 1.5rem + 2.88vw, 3.7576rem);
  --t-hero:    clamp(1.9394rem, 1.212rem + 2.16vw, 3.0303rem);
  --t-h1:      clamp(1.5758rem, 0.909rem + 1.56vw, 2.5455rem);
  --t-h2:      22px;
  /* Section-title tier — leads a major block (why-us, destinations, services,
     sister-brands). Distinct, named step between the 22px sub-label h2 and the
     h1 display tier; `.h--display` reads from this so section titles have a
     single source of truth instead of a per-template patch. */
  --t-section: clamp(1.5758rem, 0.909rem + 1.56vw, 2.5455rem);
  --t-h3:      18px;
  --t-h4:      16px;
  --t-eyebrow: 12px;
  --t-body-lg: 17px;
  --t-body:    15px;
  --t-small:   13px;
  --t-micro:   12px;

  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  /* ---------- SPACE / RADIUS / SHADOW / GRID ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 28px;
  --s-6: 40px;
  --s-7: 48px;
  --s-8: 52px;
  --s-9: 72px;
  --s-10: 96px;
  --s-11: 128px;

  /* Grid gutters — the default gap between cells in the Grid layout
     block (App\Element\ElementGridList). --gap-l matches the editorial
     gutter used on the article page (var(--s-9)). Editors can override
     per block via the Gap field. */
  --gap-s: var(--s-5);   /* 28px — tight tile rows */
  --gap-m: var(--s-7);   /* 48px */
  --gap-l: var(--s-9);   /* 72px — editorial two-column gutter */

  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgba(31,29,22,0.04), 0 1px 2px rgba(31,29,22,0.04);
  --shadow-2: 0 1px 0 rgba(31,29,22,0.04), 0 4px 14px rgba(31,29,22,0.06);
  --shadow-3: 0 1px 0 rgba(31,29,22,0.04), 0 12px 32px rgba(31,29,22,0.08);
  --shadow-4: 0 1px 0 rgba(31,29,22,0.04), 0 28px 60px rgba(31,29,22,0.14);
  /* Directional shadow for off-canvas surfaces (right-edge drawer).
     The –x value is intentional — it casts the shadow leftward, away
     from the viewport edge the panel slides in from. */
  --shadow-drawer: -20px 0 60px rgba(15, 14, 10, 0.18);

  --maxw: 1440px;
  --maxw-text: 720px;
  /* Inner editorial narrowing for content-heavy blocks (e.g. the job
     listing). Left-aligned to the page rail; NOT a second gutter. */
  --maxw-rail: 1100px;
  --gutter: clamp(20px, 4vw, 48px);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Canonical card-image hover. Every <img> that lives inside a clickable
     card (the whole card is the link) animates with these values. Defined
     once so all cards stay in sync; see app.css "CARD IMAGE HOVER" section. */
  --card-img-hover-scale:    1.02;
  --card-img-hover-duration: 400ms;
  --card-img-hover-easing:   ease;
}

/* Color direction toggles */
[data-accent="b"] {
  --accent:       var(--accent-b-600);
  --accent-deep:  var(--accent-b-800);
  --accent-soft:  var(--accent-b-100);
  --accent-faint: var(--accent-b-50);
}
[data-accent="c"] {
  --accent:       var(--accent-c-600);
  --accent-deep:  var(--accent-c-800);
  --accent-soft:  var(--accent-c-100);
  --accent-faint: var(--accent-c-50);
}

/* Type system (2026-05-23): Helvetica Neue site-wide — headlines, body copy,
   UI chrome. Garamond is reserved for italic editorial accents (taglines,
   pull quotes, the .t-italic utility) only. Long-form reading copy was
   flipped from Garamond to Helvetica on Daddy's call; the optical-size
   correction that bumped body to 19px is no longer needed (back to 17px). */
.t-display, .t-h1, .t-h2, .t-h3, .t-h4,
.dsnav-brand, .heroBlock h1, .stat-num,
.servItem h3, .servItem .num,
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-style: normal;
  line-height: 1.08;
}
h3, h4, .t-h3, .t-h4 { line-height: 1.12; }
.t-display, .heroBlock h1 { font-weight: 700; letter-spacing: -0.028em; }
.t-h1                     { font-weight: 700; letter-spacing: -0.022em; }

/* Headline emphasis — wrap a phrase in <em> inside any headline to set
   it in lighter sans against the surrounding bold. The contrast in weight
   carries the editorial accent; no serif italic required. Opt-in to the
   logo-orange highlight by adding .hl (or wrapping in <span class="hl">) —
   reserved for hero moments, not section titles. */
h1 em, h2 em, h3 em, h4 em,
.t-display em, .t-hero em, .t-h1 em, .t-h2 em, .t-h3 em, .t-h4 em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.005em;
  color: inherit;
}
h1 .hl, h2 .hl, h3 .hl, h4 .hl,
.t-display .hl, .t-hero .hl, .t-h1 .hl, .t-h2 .hl, .t-h3 .hl, .t-h4 .hl,
h1 em.hl, h2 em.hl, h3 em.hl, h4 em.hl {
  color: var(--feature);
}

/* Display heading — opt-in class that lifts any heading (h2 in practice)
   to the --t-h1 display tier. Use on section titles that lead a major
   block (home-services, why-us, destinations, sister-brands) where the
   modest 22px --t-h2 reads as a sub-label. */
.h--display {
  font-size: var(--t-section);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Body / paragraph copy in Source Serif 4, roman. Headlines stay
   roman via the heading rule above; UI labels stay roman via
   the Helvetica block below. <em>/<i> render italic by browser
   default — no override needed.

   Wrapped in :where() so the rule has zero specificity — that lets
   any class (e.g. .card forcing sans on tile body copy) win without
   needing !important. Color = ink-soft so all body copy reads at
   the calmer ~72% strength by default; full --ink is reserved for
   headlines + structural surfaces. */
:where(.t-body-lg, .t-body, .t-small, p, li) {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink-soft);
}
/* Light/negative body copy on a DARK ground keeps regular 400 — light 300 reads
   too faint on dark. Same zero specificity as the base; wins by source order for
   p/li/.t-body inside these dark/inverse sections. */
:where(.home-rfp-cta, .rfp, .element-textext__left--inverse, .element-textext__body--inverse, .element-hero--split .element-hero__text--inverse) :where(.t-body-lg, .t-body, .t-small, p, li) {
  font-weight: 400;
}

/* Bold emphasis inside the light 300 reading voice is full BOLD 700 — the
   strong contrast against the 300 body voice is the point. Switzer ships a
   true 700 (switzer-700.woff2); system Helvetica Neue has Bold. The whole body
   voice is 300 (body, p, li, .t-body*), so this is the global default for
   <strong>/<b>. (Same weight as headings, so no heading guard needed.) */
strong, b {
  font-weight: 700;
}

/* Pull quotes in Baskerville italic */
.pullQuote blockquote,
blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Italic accents stay Baskerville italic */
.t-italic { font-family: var(--serif); font-style: italic; }

/* DS RULE: anything that is "interface" rather than "reading copy" is set
   in Helvetica. That covers small structural labels, numerics, all UI
   components (buttons, inputs, chips, pills, badges), and any tag/label
   chrome. Garamond is reserved for headlines, body copy, and editorial
   accents (italics, pull quotes). Never set Garamond on a UI label. */
.t-eyebrow, .t-micro, .t-num,
.caption, .meta, .label, .tag, code,
.btn, button, input, select, textarea,
.chip, .badge, .featurePill, .pill {
  font-family: var(--sans);
  font-feature-settings: "tnum";
  font-style: normal;
}

/* Eyebrows are ALWAYS sans-serif and roman. Catches any class with
   "eyebrow" in its name (.t-eyebrow, .home-intro__eyebrow,
   .element-hero__eyebrow, etc.) regardless of which other classes
   are or aren't on the element. Defensive guarantee. */
[class*="eyebrow"] {
  font-family: var(--sans);
  font-style: normal;
}

/* Region labels (.destination__region, .service-destination__region)
   are also UI labels — always sans + roman. Same defensive pattern
   as eyebrows above. */
[class*="region"] {
  font-family: var(--sans);
  font-style: normal;
}

/* ---------- BAND UTILITIES ----------
   Full-bleed background bands that any section can opt into. The bg fills
   edge-to-edge via the box-shadow + clip-path trick so the markup keeps
   its existing max-width / centering — no wrapper element needed. */
.section--soft,
.section--deep {
  position: relative;
  box-shadow: 0 0 0 100vmax var(--_band-bg, var(--bg-soft));
  clip-path: inset(0 -100vmax);
}
.section--soft { --_band-bg: var(--bg-soft); background: var(--bg-soft); }
.section--deep {
  --_band-bg:      var(--bg-deep);
  background:      var(--bg-deep);
  --ink:           #f4f1ea;
  --ink-soft:      rgba(244, 241, 234, 0.72);
  --ink-muted:     rgba(244, 241, 234, 0.55);
  --hairline:      rgba(244, 241, 234, 0.18);
  --hairline-soft: rgba(244, 241, 234, 0.08);
  color:           var(--ink);
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--sans);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  /* Light 300 is the base sans voice. Light/negative text on a DARK ground stays
     400 (300 reads too faint on dark): .home-rfp-cta, .rfp, the *--inverse blocks. */
  font-weight: 300;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- TYPOGRAPHY UTILITIES ---------- */
.t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.t-display { font-size: var(--t-display); letter-spacing: -0.022em; }
.t-h1      { font-size: var(--t-h1); letter-spacing: -0.02em; }
.t-h2      { font-size: var(--t-h2); letter-spacing: -0.005em; line-height: var(--lh-snug); }
.t-h3      { font-size: var(--t-h3); line-height: var(--lh-snug); }
.t-h4      { font-size: var(--t-h4); line-height: 1.3; }
.t-italic  { font-style: italic; }

.t-eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
}
.t-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-loose); color: var(--ink-soft); }
.t-body    { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-soft); }
/* Secondary tiers step up to 400. The base sans voice is light 300, but at
   13px (.t-small) and 12px (.t-micro, on --ink-muted = 4.66:1, the AA floor)
   light 300 thins out — verified faint at every DPR in a side-by-side render,
   and at these sizes the lightness reads as thinness, not elegance. Same
   size-tiered weight bump already used for dark grounds (:293). 300 stays the
   reading voice at body sizes (.t-body-lg / .t-body). */
.t-small   { font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); font-weight: 400; }
.t-micro   { font-size: var(--t-micro); line-height: 1.5; color: var(--ink-muted); letter-spacing: 0.02em; font-weight: 400; }
.t-num     { font-feature-settings: "tnum","lnum"; font-variant-numeric: tabular-nums; }

/* ---------- LAYOUT ---------- */
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--s-9) 0; }
.section-tight { padding: var(--s-8) 0; }
.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }

/* ---------- BUTTONS ---------- */
.btn {
  --pad-y: 14px;
  --pad-x: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--r-sm);
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-deep); color: var(--accent-ink); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--stone-300);
}
.btn-secondary:hover { border-color: var(--ink); background: var(--stone-100); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding-left: 0; padding-right: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--ink);
  border-top: 0; border-left: 0; border-right: 0;
  --pad-y: 6px;
}
.btn-ghost:hover { color: var(--accent); border-bottom-color: var(--accent); }
.btn-sm { --pad-y: 9px; --pad-x: 14px; font-size: 13px; }
.btn-lg { --pad-y: 18px; --pad-x: 28px; font-size: 16px; }
.btn .arrow { display: inline-block; transition: transform 220ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- FEATURE / ANNOUNCEMENT (Brass) ---------- */
.featurePill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--feature);
  color: var(--feature-ink);
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.featurePill.is-soft {
  background: var(--feature-soft);
  color: var(--feature-deep);
}
.featurePill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.announcementBar {
  background: var(--feature);
  color: var(--feature-ink);
  border-bottom: 1px solid var(--feature-deep);
}
.announcementBar .shell {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  height: 40px;
  font-family: var(--sans);
  font-size: 13px;
}
.announcementBar .a-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.85;
}
.announcementBar a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.announcementBar a:hover { text-decoration-thickness: 2px; }
.announcementBar .a-close {
  background: transparent; color: inherit;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  opacity: 0.7;
}
.announcementBar .a-close:hover { opacity: 1; background: rgba(255,255,255,0.12); }

/* ---------- LINKS / CHIPS / RULES ---------- */
.link-underline {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  font-weight: 500;
  font-size: 15px;
}
.link-underline:hover { color: var(--accent); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 12px; letter-spacing: 0.04em;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  background: var(--surface);
  cursor: pointer;
  transition: all 160ms var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.hr-thick { border: 0; border-top: 1px solid var(--ink); margin: 0; }

/* ---------- INPUTS ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.input, .select, .textarea {
  font: inherit;
  width: 100%;
  padding: 14px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-faint);
}
.textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%231a1813' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

/* ---------- CARDS ----------
   .card = typo-scope reset for any tile/card container holding body copy.
   Cancels the global body-lg correction (17px serif) back to base (15px) —
   constrained card widths read 17px as oversized. Also forces sans on card
   body copy: at tile widths the serif read as decorative rather than
   editorial. Pull-quote surfaces (testimonial, review) override locally.

   For the DS reference page's framed demo card (background + border chrome),
   use .ds-card. Real site tiles are photo-driven and never want chrome. */
.card {
  font-family: var(--sans);
  font-size: 16px;
  line-height: var(--lh-body);
}
/* The :where(p, li) global serif rule above has zero specificity but
   still applies directly to descendant <p>/<li>, beating inheritance
   from .card. Explicit descendant rule restores sans inside cards. */
.card p,
.card li {
  font-family: inherit;
}

/* DS reference page only — framed demo card chrome. */
.ds-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.ds-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }

/* ---------- IMAGE / PHOTO TREATMENT ---------- */
.photo {
  position: relative;
  background: var(--stone-200);
  overflow: hidden;
  border-radius: 20px;
}
.photo[data-ratio="hero"]    { aspect-ratio: 16 / 9; }
.photo[data-ratio="wide"]    { aspect-ratio: 3 / 2; }
.photo[data-ratio="square"]  { aspect-ratio: 1 / 1; }
.photo[data-ratio="tall"]    { aspect-ratio: 4 / 5; }
.photo[data-ratio="portrait"]{ aspect-ratio: 3 / 4; }

.photo svg, .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* When a .photo is part of a .card with content below it, square the bottom
   corners so the image sits flush against the text block. The card itself
   handles outer rounding via overflow:hidden + border-radius. */
.ds-card .photo { border-radius: var(--r-md) var(--r-md) 0 0; }
.photo .caption {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ---------- BADGES (CERTIFICATIONS) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- NAV (system pages) ---------- */
.dsnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 238, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.dsnav-row { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.dsnav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 22px; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.dsnav-brand > span { white-space: nowrap; }
.dsnav-brand .mark {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
  color: var(--bg);
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.dsnav-links { display: flex; gap: 4px; }
.dsnav-links a {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color 140ms var(--ease), background 140ms var(--ease);
}
.dsnav-links a:hover { color: var(--ink); }
.dsnav-links a[aria-current="page"] { color: var(--ink); background: var(--stone-100); }

@media (max-width: 800px) {
  .dsnav-links { display: none; }
}

/* Nav collapse toggle */
.dsnav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  margin-left: 12px;
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  background: transparent;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.dsnav-toggle:hover { background: var(--stone-100); color: var(--ink); }

.dsnav.is-collapsed { transform: translateY(-100%); transition: transform 280ms var(--ease); }
.dsnav { transition: transform 280ms var(--ease); }

.dsnav-show {
  position: fixed; top: 12px; right: 12px; z-index: 60;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: rgba(247, 244, 238, 0.95);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: var(--shadow-2);
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.dsnav-show:hover { color: var(--ink); background: #fff; }
.dsnav-show[hidden] { display: none; }

/* ---------- DOC PAGE LAYOUT ---------- */
.docHero { padding: var(--s-9) 0 var(--s-7); border-bottom: 1px solid var(--hairline); }
.docHero .eyebrow { color: var(--accent); }
.docHero h1 { margin-top: var(--s-3); }
.docHero p { color: var(--ink-soft); margin-top: var(--s-4); font-size: var(--t-body-lg); line-height: var(--lh-loose); }

.docSection { padding: var(--s-8) 0; border-bottom: 1px solid var(--hairline); }
.docSection:last-child { border-bottom: 0; }
.docSection-head { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-7); margin-bottom: var(--s-6); align-items: baseline; }
.docSection-head .num { font-family: var(--sans); font-size: 14px; color: var(--ink-muted); font-feature-settings: "tnum"; }
.docSection-head .title { font-family: var(--sans); font-size: var(--t-h3); }
.docSection-head .lead { color: var(--ink-soft); }

@media (max-width: 800px) {
  .docSection-head { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ---------- TABLE (token tables) ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.tbl th { font-weight: 500; color: var(--ink-muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.tbl td code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--ink); background: var(--stone-100); padding: 2px 6px; border-radius: 3px; }

/* ---------- SWATCH GRID ---------- */
.swatchGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); }
.swatch { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.swatch .chip-color { aspect-ratio: 4 / 3; }
.swatch .meta { padding: 12px 14px; font-size: 12px; }
.swatch .meta .name { color: var(--ink); font-weight: 500; }
.swatch .meta .hex { color: var(--ink-muted); font-family: ui-monospace, monospace; font-size: 11px; margin-top: 2px; }

/* ---------- TWEAKS PANEL ---------- */
.tweaks {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  font-size: 13px;
  overflow: hidden;
}
.tweaks-head { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--hairline); }
.tweaks-head h4 { margin: 0; font-family: var(--sans); font-size: 18px; }
.tweaks-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; }
.tweaks-row { display: flex; flex-direction: column; gap: 8px; }
.tweaks-row > .label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.tweaks-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.tweaks-seg button {
  padding: 8px 6px; font-size: 12px; color: var(--ink-soft); background: var(--surface);
  border-right: 1px solid var(--hairline);
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.tweaks-seg button:last-child { border-right: 0; }
.tweaks-seg button.is-on { background: var(--ink); color: var(--bg); }
.tweaks-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  padding: 12px 16px; font-size: 13px;
  background: var(--ink); color: var(--bg);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-3);
  display: flex; align-items: center; gap: 8px;
}

/* Util */
.flex { display: flex; }
.grid { display: grid; }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.between { justify-content: space-between; }
.center { align-items: center; }
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }
.right { text-align: right; }