/* =============================================================================
   FOR GENERATIONS — Design System
   Faith · Impact · Influence
   Translated from "For Gen Brand Guide FINAL.pdf" (14pp)

   Drop-in stylesheet. Everything is namespaced with `fg-` / `--fg-`.
   Load order:  fonts  →  this file  →  your app CSS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. FONTS
   Figtree is free (Google Fonts). Perfectly Nineties and De Lionist are
   licensed retail fonts, self-hosted from ./assets. The fallback stacks
   still apply while the files load (font-display: swap).
   -------------------------------------------------------------------------- */

/* ROCK THEME COPY. All three families are self-hosted from ../Assets/Fonts —
   no Google Fonts request. Figtree here is the latin subset of the variable
   font (weights 300–900 in one file). Source of truth for everything else is
   ~/Claude/for-generations-brand/for-generations.css; re-run the port script
   in the repo README when that file changes. */

@font-face {
  font-family: "Figtree";
  src: url("../Assets/Fonts/Figtree-latin.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("../Assets/Fonts/Figtree-Italic-latin.woff2") format("woff2");
  font-weight: 300 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Licensed fonts, self-hosted from ../Assets/Fonts (added 2026-09-02).
   Paths are relative to this stylesheet, so the folder can move as a unit.
   In the Rock theme port these become /Themes/<theme>/Assets/Fonts/... */
@font-face {
  font-family: "Perfectly Nineties";
  src: url("../Assets/Fonts/PerfectlyNineties-Regular.woff2") format("woff2"),
       url("../Assets/Fonts/PerfectlyNineties-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("../Assets/Fonts/PerfectlyNineties-Italic.woff2") format("woff2"),
       url("../Assets/Fonts/PerfectlyNineties-Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "De Lionist";
  src: url("../Assets/Fonts/de_lionist-webfont.woff2") format("woff2"),
       url("../Assets/Fonts/de_lionist-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* -----------------------------------------------------------------------------
   1. RAW BRAND TOKENS
   Never reference these directly in components. Use the semantic layer (§3).
   -------------------------------------------------------------------------- */

:root {
  /* --- Primary palette ------------------------------------------------ */
  --fg-cream:       #EDE9E5;   /* universal light — pairs with everything */
  --fg-linen:       #D5CEC4;
  --fg-almond:      #BBAD96;
  --fg-charcoal:    #333333;

  /* --- Additional palette --------------------------------------------- */
  --fg-thyme:       #A1A58F;
  --fg-rosemary:    #62694B;
  --fg-olive:       #3B412A;   /* guide label misprints this as #3B412A4 */
  --fg-winter-sky:  #96A1AD;
  --fg-seaside:     #4F627B;
  --fg-navy:        #28374A;
  --fg-poppy-red:   #C24C30;   /* accent only — see contrast notes */
  --fg-mist:        #B2BBBC;

  /* Derived, NOT a brand color. Poppy Red with Cream text measures 3.98:1 —
     it fails WCAG AA for anything under 24px (19px bold). This is Poppy
     darkened 15% toward Charcoal, which reaches 4.67:1 and stays visually
     within the family. Opt in deliberately when small text must sit on red;
     otherwise use Poppy exactly as specified, for large type and accents. */
  --fg-poppy-deep:  color-mix(in srgb, var(--fg-poppy-red) 85%, var(--fg-charcoal));

  /* --- Tonal classification (drives the pairing rules) ---------------- */
  /* dark  : charcoal, navy, olive                                        */
  /* mid   : rosemary, seaside, poppy-red, almond, thyme, winter-sky      */
  /* light : cream, linen, mist                                           */

  /* --- Type families -------------------------------------------------- */
  --fg-font-display: "Perfectly Nineties", "Bodoni Moda", "Playfair Display",
                     "Libre Baskerville", Georgia, "Times New Roman", serif;
  --fg-font-body:    "Figtree", ui-sans-serif, system-ui, -apple-system,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fg-font-script:  "De Lionist", "Sacramento", "Dancing Script", cursive;
  --fg-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* --- Fluid type scale ----------------------------------------------- */
  --fg-text-display: clamp(2.75rem, 1.4rem + 5.6vw, 5.5rem);
  --fg-text-h1:      clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --fg-text-h2:      clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fg-text-h3:      clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --fg-text-h4:      clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fg-text-lg:      1.125rem;
  --fg-text-base:    1rem;
  --fg-text-sm:      0.9375rem;
  --fg-text-xs:      0.8125rem;
  --fg-text-eyebrow: 0.75rem;

  /* --- Leading & tracking --------------------------------------------- */
  --fg-leading-display: 1.02;
  --fg-leading-heading: 1.12;
  --fg-leading-snug:    1.35;
  --fg-leading-body:    1.6;
  --fg-leading-loose:   1.75;

  --fg-tracking-display: -0.015em;
  --fg-tracking-heading: -0.01em;
  --fg-tracking-body:    0;
  --fg-tracking-wide:    0.08em;
  --fg-tracking-lockup:  0.22em;  /* FAITH · IMPACT · INFLUENCE */

  /* --- Weights (Figtree is variable) ---------------------------------- */
  --fg-weight-light:  300;
  --fg-weight-normal: 400;
  --fg-weight-medium: 500;
  --fg-weight-semi:   600;
  --fg-weight-bold:   700;

  /* --- Spacing (4px base) --------------------------------------------- */
  --fg-space-1:   0.25rem;
  --fg-space-2:   0.5rem;
  --fg-space-3:   0.75rem;
  --fg-space-4:   1rem;
  --fg-space-5:   1.5rem;
  --fg-space-6:   2rem;
  --fg-space-7:   3rem;
  --fg-space-8:   4rem;
  --fg-space-9:   6rem;
  --fg-space-10:  8rem;

  /* --- Layout --------------------------------------------------------- */
  --fg-measure:      68ch;   /* max comfortable paragraph width */
  --fg-measure-tight:46ch;   /* narrow column, as in the guide's callouts */
  --fg-container:    1200px;
  --fg-gutter:       clamp(1.25rem, 4vw, 4rem);

  /* --- Radii ---------------------------------------------------------- */
  /* The brand is predominantly hard-edged print geometry. Soft radius is
     reserved for the "organic shape" frame (guide p.9).                  */
  --fg-radius-none: 0;
  --fg-radius-xs:   2px;
  --fg-radius-sm:   4px;
  --fg-radius-soft: 2.5rem;
  --fg-radius-pill: 999px;
  --fg-notch:       2.5rem;   /* folded-corner size, guide p.8 */

  /* --- Lines ---------------------------------------------------------- */
  --fg-hairline:      1px;
  --fg-rule:          1.5px;
  --fg-border-frame:  0.75rem;   /* thick color frame, guide p.9 */

  /* --- Elevation ------------------------------------------------------ */
  /* Print-flat brand. One soft lift for floating cards; nothing heavier. */
  --fg-shadow-none: none;
  --fg-shadow-card: 0 1px 2px rgb(51 51 51 / 0.04),
                    0 8px 24px -8px rgb(51 51 51 / 0.10);

  /* --- Motion --------------------------------------------------------- */
  --fg-ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --fg-duration-1:  120ms;
  --fg-duration-2:  220ms;
  --fg-duration-3:  420ms;

  /* --- Imagery treatment (guide p.8: nature, blurred, never the focus) - */
  --fg-image-blur:      8px;
  --fg-image-scrim:     rgb(51 51 51 / 0.28);
  --fg-image-saturate:  0.92;
}

/* -----------------------------------------------------------------------------
   2. PALETTES — the color-combination rules, made mechanical
   Guide p.5: "The best color combination uses one dark tone, one mid tone,
   and one light. Cream goes with all combinations. The best light neutrals
   are Cream, Linen, and Mist."

   Each palette below is one of the eight combinations the guide marks with a
   check. Apply a palette class to any container; children inherit it.
   You cannot accidentally build "too dark", "all mid tones", "too light", or
   "too Americana" if you only ever use these.
   -------------------------------------------------------------------------- */

[class*="fg-palette-"] {
  /* Every palette resolves these five. Components only ever read these. */
  --fg-surface:      var(--fg-cream);
  --fg-surface-alt:  var(--fg-light);
  --fg-ink:          var(--fg-dark);
  --fg-ink-muted:    color-mix(in srgb, var(--fg-dark) 62%, var(--fg-cream));
  --fg-line:         color-mix(in srgb, var(--fg-dark) 26%, transparent);
  --fg-accent:       var(--fg-mid);
  --fg-accent-ink:   var(--fg-mid-ink);
}

/* 1. Heritage — Charcoal / Poppy Red / Winter Sky
      CAUTION: this palette's mid tone is Poppy Red. Cream on Poppy is 3.98:1 —
      fine for display type, rules and badges set large, NOT for body copy or
      default-size buttons. For those, set --fg-mid: var(--fg-poppy-deep). */
.fg-palette-heritage  { --fg-dark: var(--fg-charcoal); --fg-mid: var(--fg-poppy-red);  --fg-mid-ink: var(--fg-cream);    --fg-light: var(--fg-winter-sky); --fg-light-ink: var(--fg-charcoal); }
/* 2. Evergreen — Navy / Rosemary / Winter Sky */
.fg-palette-evergreen { --fg-dark: var(--fg-navy);     --fg-mid: var(--fg-rosemary);   --fg-mid-ink: var(--fg-cream);    --fg-light: var(--fg-winter-sky); --fg-light-ink: var(--fg-charcoal); }
/* 3. Orchard — Olive / Seaside / Thyme */
.fg-palette-orchard   { --fg-dark: var(--fg-olive);    --fg-mid: var(--fg-seaside);    --fg-mid-ink: var(--fg-cream);    --fg-light: var(--fg-thyme);      --fg-light-ink: var(--fg-charcoal); }
/* 4. Homestead — Charcoal / Almond / Linen */
.fg-palette-homestead { --fg-dark: var(--fg-charcoal); --fg-mid: var(--fg-almond);     --fg-mid-ink: var(--fg-charcoal); --fg-light: var(--fg-linen);      --fg-light-ink: var(--fg-charcoal); }
/* 5. Hearth — Charcoal / Poppy Red / Almond  (same Poppy caution as Heritage) */
.fg-palette-hearth    { --fg-dark: var(--fg-charcoal); --fg-mid: var(--fg-poppy-red);  --fg-mid-ink: var(--fg-cream);    --fg-light: var(--fg-almond);     --fg-light-ink: var(--fg-charcoal); }
/* 6. Harbor — Navy / Seaside / Winter Sky */
.fg-palette-harbor    { --fg-dark: var(--fg-navy);     --fg-mid: var(--fg-seaside);    --fg-mid-ink: var(--fg-cream);    --fg-light: var(--fg-winter-sky); --fg-light-ink: var(--fg-charcoal); }
/* 7. Grove — Olive / Rosemary / Thyme */
.fg-palette-grove     { --fg-dark: var(--fg-olive);    --fg-mid: var(--fg-rosemary);   --fg-mid-ink: var(--fg-cream);    --fg-light: var(--fg-thyme);      --fg-light-ink: var(--fg-charcoal); }
/* 8. Quarry — Charcoal / Seaside / Thyme */
.fg-palette-quarry    { --fg-dark: var(--fg-charcoal); --fg-mid: var(--fg-seaside);    --fg-mid-ink: var(--fg-cream);    --fg-light: var(--fg-thyme);      --fg-light-ink: var(--fg-charcoal); }

/* Sensible default so unpalette'd pages still look right.
   :where() drops this to zero specificity, so a palette class placed on ANY
   element, including <html> itself, always wins over the default. */
:where(:root) {
  --fg-dark: var(--fg-charcoal);
  --fg-mid: var(--fg-almond);
  --fg-mid-ink: var(--fg-charcoal);
  --fg-light: var(--fg-linen);
  --fg-light-ink: var(--fg-charcoal);
  --fg-surface: var(--fg-cream);
  --fg-surface-alt: var(--fg-linen);
  --fg-ink: var(--fg-charcoal);
  --fg-ink-muted: color-mix(in srgb, var(--fg-charcoal) 62%, var(--fg-cream));
  --fg-line: color-mix(in srgb, var(--fg-charcoal) 26%, transparent);
  --fg-accent: var(--fg-almond);
  --fg-accent-ink: var(--fg-charcoal);
}

/* -----------------------------------------------------------------------------
   3. SURFACES — pick a tonal step, get correct text color for free
   Text pairings are pre-checked for WCAG AA (see README contrast table).
   -------------------------------------------------------------------------- */

.fg-surface-cream { background-color: var(--fg-cream); color: var(--fg-charcoal); }
.fg-surface-light { background-color: var(--fg-light); color: var(--fg-light-ink); }
.fg-surface-mid   { background-color: var(--fg-mid);   color: var(--fg-mid-ink); }
.fg-surface-dark  { background-color: var(--fg-dark);  color: var(--fg-cream); }

.fg-surface-dark {
  --fg-ink: var(--fg-cream);
  --fg-ink-muted: color-mix(in srgb, var(--fg-cream) 72%, var(--fg-dark));
  --fg-line: color-mix(in srgb, var(--fg-cream) 30%, transparent);
}
.fg-surface-mid {
  --fg-ink: var(--fg-mid-ink);
  --fg-ink-muted: color-mix(in srgb, var(--fg-mid-ink) 74%, var(--fg-mid));
  --fg-line: color-mix(in srgb, var(--fg-mid-ink) 30%, transparent);
}
.fg-surface-cream {
  --fg-ink: var(--fg-charcoal);
  --fg-ink-muted: color-mix(in srgb, var(--fg-charcoal) 62%, var(--fg-cream));
  --fg-line: color-mix(in srgb, var(--fg-charcoal) 26%, transparent);
}
/* Tinted light surfaces (Thyme, Winter Sky, Linen, Almond) sit much darker than
   Cream, so a Cream-based muted mix falls to ~1.7:1 on Thyme. Muted ink here is
   mixed against the surface itself at 96% Charcoal, the smallest share that
   clears WCAG AA (4.5:1) on all four: Thyme 4.65, Winter Sky 4.53,
   Almond 5.33, Linen 7.4. The "muted" step is subtle by necessity. */
.fg-surface-light {
  --fg-ink: var(--fg-charcoal);
  --fg-ink-muted: color-mix(in srgb, var(--fg-charcoal) 96%, var(--fg-light));
  --fg-line: color-mix(in srgb, var(--fg-charcoal) 30%, transparent);
}

/* -----------------------------------------------------------------------------
   4. BASE / RESET
   -------------------------------------------------------------------------- */

.fg-root,
.fg-root *,
.fg-root *::before,
.fg-root *::after { box-sizing: border-box; }

.fg-root {
  margin: 0;
  background-color: var(--fg-surface);
  color: var(--fg-ink);
  font-family: var(--fg-font-body);
  font-size: var(--fg-text-base);
  font-weight: var(--fg-weight-normal);
  line-height: var(--fg-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -----------------------------------------------------------------------------
   5. TYPOGRAPHY
   Guide p.2 — Headings: Perfectly Nineties (regular + italic).
               Texture:  De Lionist (script, used sparingly as a layer).
               Body:     Figtree.
   -------------------------------------------------------------------------- */

/* Element-level base styles are wrapped in :where() so they carry ZERO
   specificity. Without this, `.fg-root p` (0,1,1) would outrank `.fg-display`
   (0,1,0) and silently swallow every type utility. */
.fg-display,
.fg-h1, .fg-h2, .fg-h3, .fg-h4,
:where(.fg-root) :is(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--fg-font-display);
  font-weight: var(--fg-weight-normal);
  line-height: var(--fg-leading-heading);
  letter-spacing: var(--fg-tracking-heading);
  text-wrap: balance;
  /* inherit, not var(--fg-ink) — so type placed in a custom color context
     (e.g. over imagery) is not silently forced back to the surface ink. */
  color: inherit;
}

.fg-display {
  font-size: var(--fg-text-display);
  line-height: var(--fg-leading-display);
  letter-spacing: var(--fg-tracking-display);
}
.fg-h1, :where(.fg-root) h1 { font-size: var(--fg-text-h1); }
.fg-h2, :where(.fg-root) h2 { font-size: var(--fg-text-h2); }
.fg-h3, :where(.fg-root) h3 { font-size: var(--fg-text-h3); }
.fg-h4, :where(.fg-root) h4 { font-size: var(--fg-text-h4); }

/* Italic display is a brand voice, not an afterthought — use it on the word
   that carries the emotion. Guide p.2: "It Is *Well* With My Soul". */
.fg-em { font-style: italic; }

/* Script accent. Guide p.2 calls this "Layer for Texture" — it goes over
   imagery or beside a headline. Never for body copy, never for a full line
   of more than ~4 words, never all-caps. */
.fg-script {
  font-family: var(--fg-font-script);
  font-weight: var(--fg-weight-normal);
  font-size: clamp(2rem, 1rem + 4vw, 3.75rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: none;
}
.fg-script--sm { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); }

/* Body copy */
.fg-body,
:where(.fg-root) p {
  margin: 0 0 var(--fg-space-4);
  max-width: var(--fg-measure);
  font-family: var(--fg-font-body);
  font-size: var(--fg-text-base);
  line-height: var(--fg-leading-body);
  color: inherit;
}
.fg-body--lg    { font-size: var(--fg-text-lg); line-height: var(--fg-leading-loose); }
.fg-body--sm    { font-size: var(--fg-text-sm); }
.fg-body--tight { max-width: var(--fg-measure-tight); }
.fg-muted       { color: var(--fg-ink-muted); }

/* Eyebrow / section label. Guide uses this for "Primary Colors", "Icons",
   "Double Page Layout" — small, sans, sentence case, quiet. */
.fg-eyebrow {
  display: block;
  margin: 0 0 var(--fg-space-3);
  font-family: var(--fg-font-body);
  font-size: var(--fg-text-eyebrow);
  font-weight: var(--fg-weight-medium);
  letter-spacing: var(--fg-tracking-wide);
  text-transform: uppercase;
  color: var(--fg-ink-muted);
}
.fg-eyebrow--plain { text-transform: none; letter-spacing: 0.01em; font-size: var(--fg-text-sm); }

/* The tagline lockup: FAITH · IMPACT · INFLUENCE */
.fg-lockup {
  display: inline-block;
  font-family: var(--fg-font-display);
  font-size: var(--fg-text-xs);
  letter-spacing: var(--fg-tracking-lockup);
  text-transform: uppercase;
  color: var(--fg-ink);
  padding: var(--fg-space-2) 0;
  border-top: var(--fg-hairline) solid currentColor;
  border-bottom: var(--fg-hairline) solid currentColor;
}
.fg-lockup__dot { opacity: 0.7; margin: 0 0.35em; }

:where(.fg-root) a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:where(.fg-root) a:hover { text-decoration-color: var(--fg-accent); }

:where(.fg-root) strong { font-weight: var(--fg-weight-semi); }

/* -----------------------------------------------------------------------------
   6. SIGNATURE ELEMENT — the underlined heading
   Every page of the guide leads with a display heading over a hairline rule
   that bleeds past the text on the left. This is the brand's strongest
   layout tell. Use it once per section.
   -------------------------------------------------------------------------- */

.fg-titled {
  display: inline-block;
  padding-bottom: var(--fg-space-3);
  border-bottom: var(--fg-hairline) solid var(--fg-ink);
  margin-bottom: var(--fg-space-6);
}
/* Bleed the rule to the left edge of the container (as in the guide). */
.fg-titled--bleed {
  display: block;
  margin-left: calc(var(--fg-gutter) * -1);
  padding-left: var(--fg-gutter);
  padding-right: var(--fg-space-8);
  max-width: max-content;
}

/* -----------------------------------------------------------------------------
   7. RULES & DIVIDERS  (guide p.9 "Lines")
   -------------------------------------------------------------------------- */

.fg-rule {
  border: 0;
  height: var(--fg-hairline);
  background-color: var(--fg-ink);
  opacity: 0.9;
  margin: var(--fg-space-6) 0;
  width: 100%;
}
.fg-rule--short { width: 8rem; }
.fg-rule--soft  { background-color: var(--fg-line); opacity: 1; }

.fg-rule-v {
  width: var(--fg-hairline);
  align-self: stretch;
  min-height: 3rem;
  background-color: var(--fg-ink);
  opacity: 0.9;
  flex: 0 0 auto;
}

/* Indented block with a vertical rule — guide p.11 paragraph treatment. */
.fg-inset {
  padding-left: var(--fg-space-5);
  border-left: var(--fg-hairline) solid var(--fg-ink);
  max-width: var(--fg-measure-tight);
}

/* Pull quote / scripture block — guide p.10 (Psalm 78 layout). */
.fg-scripture {
  font-family: var(--fg-font-body);
  font-size: var(--fg-text-sm);
  line-height: var(--fg-leading-snug);
  max-width: 42ch;
}
.fg-scripture__ref {
  display: inline-block;
  font-family: var(--fg-font-display);
  font-size: var(--fg-text-h2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: var(--fg-space-2);
  border-bottom: var(--fg-hairline) solid currentColor;
  margin-bottom: var(--fg-space-5);
}

/* -----------------------------------------------------------------------------
   8. LAYOUT
   The guide's layouts are almost entirely: a container, a two-panel split,
   or a stack of framed media. Keep it that simple.
   -------------------------------------------------------------------------- */

.fg-container {
  width: 100%;
  max-width: var(--fg-container);
  margin-inline: auto;
  padding-inline: var(--fg-gutter);
}
.fg-container--wide   { max-width: 1440px; }
.fg-container--narrow { max-width: 760px; }

.fg-section { padding-block: clamp(3rem, 8vw, 7rem); }
.fg-section--tight { padding-block: clamp(2rem, 5vw, 4rem); }

/* Two-panel split — the "Double Page Layout" of guide pp.10–11. */
.fg-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}
@media (min-width: 48rem) {
  .fg-split { grid-template-columns: 1fr 1fr; }
  .fg-split--40-60 { grid-template-columns: 4fr 6fr; }
  .fg-split--60-40 { grid-template-columns: 6fr 4fr; }
}
.fg-split > * { padding: clamp(1.5rem, 4vw, 3.5rem); }
.fg-split--flush > * { padding: 0; }

/* Heading left, supporting copy right — the guide's own page header pattern. */
.fg-header-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fg-space-5);
  align-items: start;
}
@media (min-width: 52rem) {
  .fg-header-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fg-space-8); }
}

.fg-stack       { display: flex; flex-direction: column; gap: var(--fg-space-4); }
.fg-stack--lg   { gap: var(--fg-space-6); }
.fg-row         { display: flex; align-items: center; gap: var(--fg-space-4); flex-wrap: wrap; }

.fg-grid {
  display: grid;
  gap: var(--fg-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

/* -----------------------------------------------------------------------------
   9. SHAPES & FRAMES  (guide p.9)
   -------------------------------------------------------------------------- */

/* Thick color frame around an image or block. */
.fg-frame {
  display: block;
  padding: var(--fg-border-frame);
  background-color: var(--fg-accent);
}
.fg-frame > * { display: block; width: 100%; }

/* Outline-only variant (the Almond frame on p.9). */
.fg-frame--outline {
  background-color: transparent;
  border: var(--fg-border-frame) solid var(--fg-accent);
  padding: 0;
}

/* Polaroid: even sides, deep chin. */
.fg-frame--polaroid {
  padding: var(--fg-border-frame);
  padding-bottom: calc(var(--fg-border-frame) * 4);
  background-color: var(--fg-light);
}

/* Organic shape — three rounded corners, one square. Rotate the exception
   corner with the modifiers. */
.fg-shape-soft    { border-radius: var(--fg-radius-soft); overflow: hidden; }
.fg-shape-soft--bl{ border-radius: var(--fg-radius-soft) var(--fg-radius-soft) var(--fg-radius-soft) 0; }
.fg-shape-soft--br{ border-radius: var(--fg-radius-soft) var(--fg-radius-soft) 0 var(--fg-radius-soft); }
.fg-shape-soft--tl{ border-radius: 0 var(--fg-radius-soft) var(--fg-radius-soft) var(--fg-radius-soft); }
.fg-shape-soft--tr{ border-radius: var(--fg-radius-soft) 0 var(--fg-radius-soft) var(--fg-radius-soft); }

/* Folded / notched corner — the Seaside callout on guide p.8. */
.fg-notched {
  --_n: var(--fg-notch);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, 0 100%);
}
.fg-notched--tr { clip-path: polygon(0 0, calc(100% - var(--_n, 2.5rem)) 0, 100% var(--_n, 2.5rem), 100% 100%, 0 100%); }
/* All four corners cut, the third frame on guide p.9. Default cut is smaller than
   the single notch because it repeats four times. Tune with --fg-chamfer. */
.fg-chamfer {
  --_c: var(--fg-chamfer, 1.25rem);
  clip-path: polygon(var(--_c) 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% calc(100% - var(--_c)),
                     calc(100% - var(--_c)) 100%, var(--_c) 100%, 0 calc(100% - var(--_c)), 0 var(--_c));
}
.fg-chamfer--lg { --fg-chamfer: 2.5rem; }

/* Cream card floated over imagery — guide pp.11, 14. */
.fg-plaque {
  background-color: var(--fg-cream);
  color: var(--fg-charcoal);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  box-shadow: var(--fg-shadow-none);
}
.fg-plaque--float { box-shadow: var(--fg-shadow-card); }

/* -----------------------------------------------------------------------------
   10. MEDIA — photography treatment
   Guide p.8: "Imagery should focus on nature, but be blurred, so that it's
   not too specific. It's meant to add texture and aesthetic, but not be the
   focal point."
   -------------------------------------------------------------------------- */

.fg-media {
  position: relative;
  overflow: hidden;
  background-color: var(--fg-light);
  isolation: isolate;
}
.fg-media > img,
.fg-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Softening filter — apply when the source photo is too sharp/literal. */
.fg-media--soft > img,
.fg-media--soft > video {
  filter: blur(var(--fg-image-blur)) saturate(var(--fg-image-saturate));
  transform: scale(1.06);  /* hides the blurred edge */
}

/* Scrim for text legibility over photography. Always use one — the guide
   never sets type directly on an unscrimmed image. */
.fg-media--scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fg-dark) 12%, transparent) 0%,
    color-mix(in srgb, var(--fg-dark) 55%, transparent) 100%);
}
.fg-media--tint::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: color-mix(in srgb, var(--fg-dark) 45%, transparent);
}
/* Text placed over imagery. Always Cream — the scrim guarantees contrast.
   The --fg-* overrides keep .fg-muted, rules and borders legible too. */
.fg-media__content {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--fg-cream);
  --fg-ink: var(--fg-cream);
  --fg-ink-muted: color-mix(in srgb, var(--fg-cream) 78%, transparent);
  --fg-line: color-mix(in srgb, var(--fg-cream) 45%, transparent);
}

.fg-ratio-1x1  { aspect-ratio: 1 / 1; }
.fg-ratio-4x5  { aspect-ratio: 4 / 5; }
.fg-ratio-9x16 { aspect-ratio: 9 / 16; }
.fg-ratio-16x9 { aspect-ratio: 16 / 9; }
.fg-ratio-3x2  { aspect-ratio: 3 / 2; }

/* -----------------------------------------------------------------------------
   11. TEXTURES  (guide p.7 patterns, p.9 tree rings)
   These are CSS-generated stand-ins so a page is on-brand with zero assets.
   To use the official raster art instead, just override the variable:
     .my-hero { --fg-texture-woodgrain: url("/img/wood-grain.png"); }
   -------------------------------------------------------------------------- */

:root {
  /* Wood grain — SVG turbulence banded into contour lines. */
  --fg-texture-woodgrain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.42' numOctaves='5' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 1 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='360' height='360' fill='%23000' filter='url(%23w)'/%3E%3C/svg%3E");

  /* Tree rings — irregular concentric ellipses, tiled. */
  --fg-texture-treerings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cellipse cx='64' cy='64' rx='5' ry='4'/%3E%3Cellipse cx='63' cy='65' rx='11' ry='9'/%3E%3Cellipse cx='65' cy='63' rx='17' ry='15'/%3E%3Cellipse cx='63' cy='64' rx='23' ry='21'/%3E%3Cellipse cx='65' cy='65' rx='29' ry='26'/%3E%3Cellipse cx='64' cy='63' rx='35' ry='33'/%3E%3Cellipse cx='63' cy='64' rx='42' ry='38'/%3E%3Cellipse cx='65' cy='65' rx='48' ry='45'/%3E%3Cellipse cx='64' cy='64' rx='55' ry='51'/%3E%3Cellipse cx='64' cy='64' rx='61' ry='58'/%3E%3C/g%3E%3C/svg%3E");

  /* One large ring, for use as a corner watermark (guide cover + p.14). */
  --fg-texture-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='300' cy='300' r='18'/%3E%3Ccircle cx='297' cy='303' r='42'/%3E%3Ccircle cx='303' cy='297' r='70'/%3E%3Ccircle cx='299' cy='301' r='101'/%3E%3Ccircle cx='302' cy='299' r='133'/%3E%3Ccircle cx='298' cy='302' r='168'/%3E%3Ccircle cx='301' cy='298' r='205'/%3E%3Ccircle cx='300' cy='301' r='243'/%3E%3Ccircle cx='300' cy='300' r='282'/%3E%3C/g%3E%3C/svg%3E");
}

.fg-texture {
  position: relative;
  isolation: isolate;
}
.fg-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* The source art is black; we mask a flat brand color through it so the
     texture always matches the current tonal step. */
  background-color: var(--fg-texture-color, var(--fg-ink));
  -webkit-mask-image: var(--fg-texture-woodgrain);
  mask-image: var(--fg-texture-woodgrain);
  -webkit-mask-size: 360px;
  mask-size: 360px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: var(--fg-texture-opacity, 0.16);
}
.fg-texture--woodgrain::before {
  -webkit-mask-image: var(--fg-texture-woodgrain); mask-image: var(--fg-texture-woodgrain);
  -webkit-mask-size: 360px; mask-size: 360px;
}
.fg-texture--treerings::before {
  -webkit-mask-image: var(--fg-texture-treerings); mask-image: var(--fg-texture-treerings);
  -webkit-mask-size: 128px; mask-size: 128px;
}
/* Real pattern artwork (brand guide p.7). Single-color 900px tiles with alpha,
   masked exactly like the CSS stand-ins, so they tint with --fg-texture-color.
   Mask size is set for 2x displays (900px tile shown at 450px). */
.fg-texture--woodgrain-art::before {
  -webkit-mask-image: url("../Assets/Images/patterns/wood-grain.png"); mask-image: url("../Assets/Images/patterns/wood-grain.png");
  -webkit-mask-size: 450px; mask-size: 450px;
}
.fg-texture--treerings-art::before {
  -webkit-mask-image: url("../Assets/Images/patterns/tree-rings.png"); mask-image: url("../Assets/Images/patterns/tree-rings.png");
  -webkit-mask-size: 540px; mask-size: 540px;
}
@supports (mask-image: url("x.webp")) {
  .fg-texture--woodgrain-art::before { -webkit-mask-image: url("../Assets/Images/patterns/wood-grain.webp"); mask-image: url("../Assets/Images/patterns/wood-grain.webp"); }
  .fg-texture--treerings-art::before { -webkit-mask-image: url("../Assets/Images/patterns/tree-rings.webp"); mask-image: url("../Assets/Images/patterns/tree-rings.webp"); }
}
.fg-texture--subtle::before { opacity: 0.10; }
.fg-texture--strong::before { opacity: 0.30; }

/* Single big ring, bled off a corner. */
.fg-ring-mark {
  position: absolute;
  z-index: 0;
  width: clamp(12rem, 34vw, 30rem);
  aspect-ratio: 1;
  pointer-events: none;
  background-color: var(--fg-texture-color, var(--fg-ink));
  -webkit-mask-image: var(--fg-texture-ring);
  mask-image: var(--fg-texture-ring);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: var(--fg-texture-opacity, 0.22);
}
/* Real tree-ring artwork (brand kit, 9 cuts). Single-color PNGs with alpha,
   so they mask exactly like the CSS-drawn ring: set `color` or
   --fg-texture-color to tint. Also usable in .fg-texture::before via
   --fg-texture-woodgrain / --fg-texture-treerings if a tiled cut is wanted.
   Files are trimmed to the artwork's bounding box at 1600px; WebP where the
   browser supports it in mask-image (all current browsers), PNG fallback. */
.fg-ring-mark--art-1 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-1.png"); }
.fg-ring-mark--art-2 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-2.png"); }
.fg-ring-mark--art-3 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-3.png"); }
.fg-ring-mark--art-4 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-4.png"); }
.fg-ring-mark--art-5 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-5.png"); }
.fg-ring-mark--art-6 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-6.png"); }
.fg-ring-mark--art-7 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-7.png"); }
.fg-ring-mark--art-8 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-8.png"); }
.fg-ring-mark--art-9 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-9.png"); }
/* The real cuts are not perfectly round; let the box follow the artwork. */
[class*="fg-ring-mark--art-"] { aspect-ratio: auto; height: clamp(12rem, 34vw, 30rem); }
@supports (mask-image: url("x.webp")) {
  .fg-ring-mark--art-1 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-1.webp"); }
  .fg-ring-mark--art-2 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-2.webp"); }
  .fg-ring-mark--art-3 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-3.webp"); }
  .fg-ring-mark--art-4 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-4.webp"); }
  .fg-ring-mark--art-5 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-5.webp"); }
  .fg-ring-mark--art-6 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-6.webp"); }
  .fg-ring-mark--art-7 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-7.webp"); }
  .fg-ring-mark--art-8 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-8.webp"); }
  .fg-ring-mark--art-9 { --fg-texture-ring: url("../Assets/Images/rings/tree-ring-9.webp"); }
}

.fg-ring-mark--tr { top: 0; right: 0; transform: translate(38%, -42%); }
.fg-ring-mark--bl { bottom: 0; left: 0; transform: translate(-42%, 38%); }
.fg-ring-mark--tl { top: 0; left: 0; transform: translate(-42%, -42%); }
.fg-ring-mark--br { bottom: 0; right: 0; transform: translate(38%, 38%); }

/* -----------------------------------------------------------------------------
   11b. CUT-OUTS & STONES  (guide p.10)
   The ten organic cut-outs are single-color masks extracted from the guide's own
   artwork, so they tint like the rings and patterns. Two uses, both from the guide:
   "Cut outs can overlay images or be used to mask images."

   Overlay (a tinted silhouette placed on a surface or photo):
     <span class="fg-cutout fg-cutout--7" style="--fg-cutout-size:14rem"></span>

   Mask (a photo cut to the shape):
     <div class="fg-media fg-cutout-mask fg-cutout--2" style="--fg-cutout-size:24rem">
       <img src="…" alt="">
     </div>

   Stones are a textured Navy/Seaside raster cluster (guide p.10) with real alpha;
   place with <img class="fg-stones"> at small sizes. The source is 482px wide, so
   keep it under ~30rem on screen.
   -------------------------------------------------------------------------- */
.fg-cutout {
  display: block;
  width: var(--fg-cutout-size, 12rem);
  aspect-ratio: var(--fg-cutout-ratio, 1);
  background-color: var(--fg-texture-color, currentColor);
  -webkit-mask: var(--fg-cutout-src) no-repeat center / contain;
  mask: var(--fg-cutout-src) no-repeat center / contain;
  opacity: var(--fg-cutout-opacity, 1);
  pointer-events: none;
}
.fg-cutout--flip  { transform: scaleX(-1); }
.fg-cutout--rot90 { transform: rotate(90deg); }
.fg-cutout-mask {
  width: var(--fg-cutout-size, 20rem);
  aspect-ratio: var(--fg-cutout-ratio, 1);
  background: transparent;
  -webkit-mask: var(--fg-cutout-src) no-repeat center / contain;
  mask: var(--fg-cutout-src) no-repeat center / contain;
}
.fg-cutout-mask > img { width: 100%; height: 100%; object-fit: cover; }
.fg-stones { display: block; width: var(--fg-stones-size, 18rem); height: auto; }
.fg-cutout--1 { --fg-cutout-src: url("../Assets/Images/shapes/organic-01.png"); --fg-cutout-ratio: 359/512; }
.fg-cutout--2 { --fg-cutout-src: url("../Assets/Images/shapes/organic-02.png"); --fg-cutout-ratio: 558/477; }
.fg-cutout--3 { --fg-cutout-src: url("../Assets/Images/shapes/organic-03.png"); --fg-cutout-ratio: 456/354; }
.fg-cutout--4 { --fg-cutout-src: url("../Assets/Images/shapes/organic-04.png"); --fg-cutout-ratio: 318/350; }
.fg-cutout--5 { --fg-cutout-src: url("../Assets/Images/shapes/organic-05.png"); --fg-cutout-ratio: 308/365; }
.fg-cutout--6 { --fg-cutout-src: url("../Assets/Images/shapes/organic-06.png"); --fg-cutout-ratio: 345/341; }
.fg-cutout--7 { --fg-cutout-src: url("../Assets/Images/shapes/organic-07.png"); --fg-cutout-ratio: 336/604; }
.fg-cutout--8 { --fg-cutout-src: url("../Assets/Images/shapes/organic-08.png"); --fg-cutout-ratio: 327/537; }
.fg-cutout--9 { --fg-cutout-src: url("../Assets/Images/shapes/organic-09.png"); --fg-cutout-ratio: 408/332; }
.fg-cutout--10 { --fg-cutout-src: url("../Assets/Images/shapes/organic-10.png"); --fg-cutout-ratio: 377/343; }

/* -----------------------------------------------------------------------------
   12. BUTTONS & CONTROLS
   The guide has no button spec. These are derived from its geometry:
   hard edges, hairline borders, generous tracking, no gradients.
   -------------------------------------------------------------------------- */

/* These reference the semantic tokens directly rather than routing through
   local --_bg / --_fg variables: slightly more verbose, but the cascade is
   readable in devtools and each variant states its own full color set.
   Buttons carry a background-color transition, so if you swap the palette
   class at runtime the new color eases in over --fg-duration-2 rather than
   applying instantly. (Worth knowing when testing: getComputedStyle read
   immediately after a class swap returns the pre-transition value.) */

.fg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fg-space-2);
  padding: 0.75rem 1.5rem;
  border: var(--fg-hairline) solid var(--fg-dark);
  border-radius: var(--fg-radius-none);
  background-color: var(--fg-dark);
  color: var(--fg-cream);
  font-family: var(--fg-font-body);
  font-size: var(--fg-text-sm);
  font-weight: var(--fg-weight-medium);
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fg-duration-2) var(--fg-ease),
              color var(--fg-duration-2) var(--fg-ease),
              border-color var(--fg-duration-2) var(--fg-ease);
}
.fg-btn:hover {
  background-color: color-mix(in srgb, var(--fg-dark) 86%, var(--fg-cream));
  border-color: color-mix(in srgb, var(--fg-dark) 86%, var(--fg-cream));
}

/* Variant base rules come first, then their hover states, so that a variant's
   :hover (0,2,0) always lands after .fg-btn:hover (0,2,0). */
.fg-btn--accent {
  background-color: var(--fg-accent);
  border-color: var(--fg-accent);
  color: var(--fg-accent-ink);
}
.fg-btn--outline {
  background-color: transparent;
  border-color: currentColor;
  color: var(--fg-ink);
}
.fg-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--fg-ink);
  padding-inline: 0;
  text-underline-offset: 0.35em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.fg-btn--accent:hover {
  background-color: color-mix(in srgb, var(--fg-accent) 88%, var(--fg-charcoal));
  border-color: color-mix(in srgb, var(--fg-accent) 88%, var(--fg-charcoal));
}
.fg-btn--outline:hover {
  background-color: var(--fg-ink);
  border-color: var(--fg-ink);
  color: var(--fg-surface);
}
.fg-btn--ghost:hover {
  background-color: transparent;
  border-color: transparent;
  text-decoration-color: var(--fg-accent);
}

.fg-btn--lg { padding: 1rem 2rem; font-size: var(--fg-text-base); }
.fg-btn--sm { padding: 0.5rem 1rem; font-size: var(--fg-text-xs); }

.fg-root :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fg-accent);
  outline-offset: 2px;
}

/* Form controls */
.fg-field { display: flex; flex-direction: column; gap: var(--fg-space-2); }
.fg-label {
  font-size: var(--fg-text-sm);
  font-weight: var(--fg-weight-medium);
  color: var(--fg-ink);
}
.fg-input, .fg-select, .fg-textarea {
  font-family: var(--fg-font-body);
  font-size: var(--fg-text-base);
  color: var(--fg-ink);
  background-color: color-mix(in srgb, var(--fg-cream) 70%, transparent);
  border: var(--fg-hairline) solid var(--fg-line);
  border-radius: var(--fg-radius-none);
  padding: 0.7rem 0.85rem;
  width: 100%;
}
.fg-input::placeholder, .fg-textarea::placeholder { color: var(--fg-ink-muted); }
.fg-input:focus, .fg-select:focus, .fg-textarea:focus { border-color: var(--fg-accent); }
.fg-help { font-size: var(--fg-text-xs); color: var(--fg-ink-muted); }

/* -----------------------------------------------------------------------------
   13. CARDS, BADGES, TABLES
   -------------------------------------------------------------------------- */

.fg-card {
  background-color: var(--fg-surface);
  color: var(--fg-ink);
  border: var(--fg-hairline) solid var(--fg-line);
  border-radius: var(--fg-radius-none);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.fg-card--flat  { border: 0; }
.fg-card--float { border: 0; box-shadow: var(--fg-shadow-card); }
.fg-card__title {
  font-family: var(--fg-font-display);
  font-size: var(--fg-text-h3);
  line-height: var(--fg-leading-heading);
  margin: 0 0 var(--fg-space-3);
}

.fg-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  font-size: var(--fg-text-xs);
  font-weight: var(--fg-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--fg-accent);
  color: var(--fg-accent-ink);
  border-radius: var(--fg-radius-none);
}
.fg-badge--outline { background-color: transparent; color: var(--fg-ink); border: var(--fg-hairline) solid var(--fg-line); }

.fg-table { width: 100%; border-collapse: collapse; font-size: var(--fg-text-sm); }
.fg-table th, .fg-table td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: var(--fg-hairline) solid var(--fg-line); }
.fg-table th {
  font-family: var(--fg-font-body);
  font-weight: var(--fg-weight-semi);
  font-size: var(--fg-text-xs);
  letter-spacing: var(--fg-tracking-wide);
  text-transform: uppercase;
  color: var(--fg-ink-muted);
}

/* -----------------------------------------------------------------------------
   14. LOGO USAGE
   Guide p.6: "When using the logo in color, keep it to one or two colors and
   make sure the logo contrasts enough from the background to be read easily.
   For the text-only version, only use one color."
   Wrap your <img>/<svg> logo in .fg-logo to get correct sizing + clear space.
   -------------------------------------------------------------------------- */

.fg-logo {
  display: inline-block;
  /* Clear space = 50% of the logo's height on all sides (derived from the
     guide's own margins). Never crowd the mark. */
  padding: calc(var(--fg-logo-size, 3rem) * 0.5);
  line-height: 0;
}
.fg-logo > svg, .fg-logo > img {
  display: block;
  height: var(--fg-logo-size, 3rem);
  width: auto;
}
.fg-logo--flush { padding: 0; }
.fg-logo--sm { --fg-logo-size: 2rem; }
.fg-logo--lg { --fg-logo-size: 5rem; }
.fg-logo--xl { --fg-logo-size: 8rem; }

/* Recolorable logo from an EXTERNAL svg file.
   An <img src="logo.svg"> cannot inherit currentColor — the SVG is an isolated
   document. Masking a flat color through the file's silhouette solves that:

     <span class="fg-logo-mark" style="--fg-logo-src:url(assets/logo-primary.svg);
                                       --fg-logo-ratio:1.334"></span>

   Set `color` on any ancestor to recolor. For two-color logo treatments, use an
   inline <svg> with fill="currentColor" on the paths you want to vary. */
.fg-logo-mark {
  display: block;
  height: var(--fg-logo-size, 3rem);
  width: calc(var(--fg-logo-size, 3rem) * var(--fg-logo-ratio, 1));
  background-color: currentColor;
  -webkit-mask: var(--fg-logo-src) no-repeat center / contain;
  mask: var(--fg-logo-src) no-repeat center / contain;
}

/* Single-color recolor for an inline SVG logo (set fill="currentColor"). */
.fg-logo--ink      { color: var(--fg-ink); }
.fg-logo--cream    { color: var(--fg-cream); }
.fg-logo--olive    { color: var(--fg-olive); }
.fg-logo--navy     { color: var(--fg-navy); }
.fg-logo--rosemary { color: var(--fg-rosemary); }
.fg-logo--seaside  { color: var(--fg-seaside); }

/* -----------------------------------------------------------------------------
   15. UTILITIES
   -------------------------------------------------------------------------- */

.fg-text-center { text-align: center; }
.fg-text-right  { text-align: right; }
.fg-relative    { position: relative; }
.fg-clip        { overflow: hidden; }
.fg-full        { width: 100%; }
.fg-mt-0 { margin-top: 0; }  .fg-mb-0 { margin-bottom: 0; }
.fg-mb-2 { margin-bottom: var(--fg-space-2); }
.fg-mb-4 { margin-bottom: var(--fg-space-4); }
.fg-mb-6 { margin-bottom: var(--fg-space-6); }
.fg-mb-8 { margin-bottom: var(--fg-space-8); }

.fg-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;
}

/* -----------------------------------------------------------------------------
   16. ACCESSIBILITY & PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fg-root *, .fg-root *::before, .fg-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Verified contrast (WCAG 2.1). Every surface/ink pair the palette layer can
   produce passes AA — with one exception, Poppy Red:
     Charcoal on Cream      10.46  AAA        Cream on Seaside      5.17  AA
     Cream on Charcoal      10.46  AAA        Charcoal on Thyme     4.99  AA
     Cream on Navy          10.02  AAA        Charcoal on WinterSky 4.81  AA
     Cream on Olive          8.80  AAA        Cream on Rosemary     4.77  AA
     Charcoal on Linen       8.10  AAA        Cream on Poppy Red    3.98  large only
     Charcoal on Mist        6.45  AA         Charcoal on Poppy Red 2.63  FAIL
     Charcoal on Almond      5.73  AA
   Use --fg-poppy-deep (4.67:1) when small text must sit on red. */

@media print {
  .fg-root { background: #fff; color: #000; }
  .fg-texture::before, .fg-ring-mark { display: none; }
}