/* ===========================================================================
   AIX Mediterran — logo.css   (approved mark: direction 1a)
   Stacked wordmark: "AIX" in Forum, "MEDITERRAN" letterspaced between two gold
   hairlines, "MEAT & VEGGIE" micro line. Pure type + 1px rules — it scales from
   a 48px favicon tile to the hero without an SVG.
   Loads after tokens.css. BEM. No CDN.

   Sizes: .logo (default, header) · .logo--sm (footer/mobile) · .logo--hero
   Grounds: default = on light · .logo--on-dark = on aegean/photo
   =========================================================================== */

.logo {
  --_name: 1.75rem;   /* AIX */
  --_word: .75rem;    /* MEDITERRAN */
  --_sub: .5625rem;   /* MEAT & VEGGIE */
  --_ink: var(--color-aegean-800);
  --_word-ink: var(--color-gold-900);
  --_rule: var(--color-gold-500);
  --_sub-ink: var(--color-charcoal-soft);

  display: inline-flex; flex-direction: column; align-items: center;
  text-align: center; text-decoration: none; line-height: 1;
}
.logo--sm   { --_name: 1.375rem; --_word: .6875rem; --_sub: .5rem; }
.logo--hero { --_name: clamp(2.5rem, 7vmin, 4.25rem); --_word: clamp(.8125rem, 1.6vmin, 1.125rem); --_sub: clamp(.5625rem, 1vmin, .75rem); }

.logo--on-dark {
  --_ink: #fff;
  --_word-ink: var(--color-gold-300);
  --_sub-ink: rgba(255,255,255,.72);
}

.logo__name {
  font-family: var(--font-heading); font-size: var(--_name);
  text-transform: uppercase; letter-spacing: .14em; color: var(--_ink);
}
/* the rules sit flush with the word, so the block reads as one unit */
.logo__word {
  display: flex; align-items: center; gap: .625rem; margin-top: .5rem;
  font-size: var(--_word); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .34em; color: var(--_word-ink);
}
.logo__word::before, .logo__word::after {
  content: ""; flex: 1 1 auto; min-width: 1.25rem; height: 1px; background: var(--_rule);
}
.logo__sub {
  margin-top: .5rem; font-size: var(--_sub); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: .4em; color: var(--_sub-ink);
}

/* Favicon / app tile: the monogram alone, never the full stack under ~64px */
.logo-tile {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--radius-lg); background: var(--color-aegean-800);
  font-family: var(--font-heading); font-size: 1.1875rem; color: #fff;
  text-decoration: none;
}
.logo-tile--gold { background: var(--color-gold-500); color: var(--color-aegean-950); }
.logo-tile--light { background: #fff; color: var(--color-aegean-800); border: 1px solid var(--color-border); }