/* ============================================================================
   LUX INVICTA — the mark. PINNED COMPONENT, DO NOT REDESIGN.
   ----------------------------------------------------------------------------
   Requires tokens.css. Brandon's decisions, 2026-07-31:

     TYPE    Monument = Archivo (wdth 125, wght 800) + JetBrains Mono
     LION    FULL COLOUR is primary. lion-silver.png is the mono alternate for
             when colour can't be used. White / graphite / gold are OUT.
     FORM    Three orientations of ONE identity, not three competing logos:

               .lux-mark--stacked   PRIMARY. Hero, social avatar, anywhere the
                                    mark is the subject.        (gate option L2)
               .lux-mark--row       LOCKUP. Nav, footer, email signature.
                                    (gate option L1)
               .lux-mark--seal      STAMP. Favicon, watermark, foil on paper.
                                    (gate option L3)

   Scale everything with --mark-size (the wordmark's font-size). Never restyle
   the internals; if a variant needs a size that isn't here, set --mark-size.

   The subline letters are individual <span>s ON PURPOSE: flex space-between
   spreads them to exactly the width of the word above at ANY size, with no JS
   and no per-font tracking to re-tune. Copy the markup verbatim.

   The lion is a plain <img src>. Swap the file to change treatment:
     assets/brand/lion.png         full colour  ← default
     assets/brand/lion-silver.png  mono alternate
   (Deliberately NOT a CSS `content:` swap — `content` on <img> is unreliable
   outside Chromium and this component has to survive every browser.)
   ========================================================================== */

.lux-mark {
  --mark-size: 2rem;
  display: flex;
  align-items: center;
  gap: 0.62em;
  font-size: var(--mark-size);
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-variation-settings: var(--disp-width);
  text-transform: uppercase;
  line-height: 0.92;
  color: var(--ink);
  text-decoration: none;
}

.lux-mark__lion {
  display: block;
  flex: none;
  width: auto;
}

.lux-mark__word {
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Subline: spread edge-to-edge across the word above it.
   ⚠️ SIZE FLOORS — the subline is a fraction of --mark-size, so it goes
   illegible before the wordmark does. Measured minimums:
       .lux-mark--stacked   --mark-size >= 2.75rem  (sub lands ~9.7px)
       .lux-mark--row       --mark-size >= 2rem     (sub lands ~9.6px)
   BELOW THOSE, add .lux-mark--compact, which drops the rule + subline
   entirely. Do NOT just shrink the full lockup — at 1.5rem the subline
   computes to 5.6px and at 0.95rem to 3.6px, which is decoration, not type. */
.lux-mark__sub {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.22em;
  letter-spacing: 0; /* the flex spread IS the tracking */
  color: var(--ink-body);
}

/* Compact: below the floors above. Lion + wordmark only. */
.lux-mark--compact .lux-mark__sub,
.lux-mark--compact .lux-mark__rule {
  display: none;
}
.lux-mark__sub > span {
  display: block;
}

.lux-mark__rule {
  border: 0;
  border-top: 1px solid var(--hairline-strong);
  width: 100%;
  margin: 0.22em 0 0.16em;
}

/* ---- PRIMARY · stacked (L2) --------------------------------------------- */
.lux-mark--stacked {
  flex-direction: column;
  gap: 0;
  text-align: center;
}
.lux-mark--stacked .lux-mark__lion {
  height: 1.55em;
  margin-bottom: 0.34em;
}
.lux-mark--stacked .lux-mark__sub {
  color: var(--ink-muted);
}

/* ---- LOCKUP · horizontal (L1) ------------------------------------------- */
.lux-mark--row .lux-mark__lion {
  height: 1.32em;
}
/* fit-content so the text column hugs LUX and the subline matches its width */
.lux-mark--row .lux-mark__text {
  width: fit-content;
}
.lux-mark--row .lux-mark__sub {
  font-size: 0.3em;
  margin-top: 0.5em;
}

/* ⚠️ In COMPACT row form the wordmark must read "Lux Invicta" on one line.
   The two-tier form puts INVICTA in the subline, and compact hides the
   subline — so a compact row still saying just "Lux" is a bug, not a logo. */

/* ---- STAMP · seal (L3) --------------------------------------------------- */
.lux-mark--seal {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--mark-size) * 5.6);
  aspect-ratio: 1;
}
.lux-mark--seal .lux-mark__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lux-mark--seal .lux-mark__ring circle {
  fill: none;
  stroke: var(--hairline-strong);
  stroke-width: 1;
}
.lux-mark--seal .lux-mark__ring text {
  font-family: var(--font-display);
  font-weight: var(--disp-weight);
  font-variation-settings: var(--disp-width);
  text-transform: uppercase;
  fill: var(--ink);
}
.lux-mark--seal .lux-mark__lion {
  width: 44%;
  height: auto;
}

/* ⚠️ MEASURED 2026-07-31 — the size floors above are UNREACHABLE on a phone.
   "LUX INVICTA" needs 8.34px of width per 1px of --mark-size, and a typical
   hero frame at 390px leaves ~285px of content width. That caps --mark-size at
   ~34px, which is BELOW the 2.75rem (44px) floor the subline needs to stay
   legible. There is no viable full stacked lockup at phone width.

   So the stacked mark auto-compacts here instead of leaving each variant to
   rediscover it — and to overflow its own frame in the meantime. Capping
   font-size (rather than --mark-size) avoids an invalid self-referencing
   custom property. --row is deliberately NOT compacted: hiding its subline
   would leave the word reading just "Lux". */
@media (max-width: 480px) {
  .lux-mark--stacked {
    font-size: min(var(--mark-size), 2rem);
  }
  .lux-mark--stacked .lux-mark__sub,
  .lux-mark--stacked .lux-mark__rule {
    display: none;
  }
}

/* Below 640px the word above can wrap, so "spread to the parent" stops meaning
   "match the word" and just stretches. Fall back to plain wide tracking. */
@media (max-width: 640px) {
  .lux-mark__sub {
    display: block;
    letter-spacing: var(--track-caps-wide);
    margin-right: calc(-1 * var(--track-caps-wide));
  }
  .lux-mark__sub > span {
    display: inline;
  }
}