/* ============================================================================
   THE HEADER LOCKUP — one geometry, every venue
   Source of truth: 177X-ai/brand. Synced, never edited in a consumer repo.

   Before this, every product sized its own header: Strike's wordmark at 34px
   (30px in admin), Coil's at 12.8px, Rattle's at 23px, and Coil, Track and
   Diamond carried no `by 177X` at all. Five venues, five answers.

   This file is the answer. A product supplies two things — its name as text and
   its mark as a URL — and gets the house geometry for free.

       <a class="x-lockup" href="/">
         <span class="x-lockup__word">COIL</span>
         <span class="x-lockup__mark" aria-hidden="true"></span>
         <span class="x-lockup__by" aria-hidden="true"></span>
       </a>

       .x-lockup { --x-product-mark: url('./brand/assets/coil-mark-ink.svg'); }

   Strike is the exception and stays as-is: its wordmark is a single drawn SVG
   with the by-line already inside it, and its mark is SUBSTITUTED into the word
   rather than trailing it (§ 16.4). Give that <img> `height: var(--x-lockup-h)`
   and it matches this geometry without being rebuilt.

   ACCESSIBILITY. The word is real text — the mark and by-line are decorative
   background images marked aria-hidden, so a screen reader announces the
   product name once, not three times. Do not swap the word for an image.
   ========================================================================== */

:root {
  /* The word's cap height. Everything else is derived from it, so a product
     that needs a bigger header changes ONE number and stays in proportion. */
  --x-lockup-word: 22px;

  /* Strike's combined wordmark SVG is 196.9 units tall with an 84-unit cap
     height, so its image must be word / 0.4266 to put its letters on the same
     baseline as everyone else's live text. */
  --x-lockup-h: 52px;

  /* The by-line. § 16.5 sets 9px as the minimum legible size; 11 gives it room
     without competing with the word. */
  --x-lockup-by: 11px;
}

.x-lockup {
  display: inline-grid;
  grid-template-areas: "word mark" "by by";
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: 0 0.45em;
  text-decoration: none;
  line-height: 1;
}

.x-lockup__word {
  grid-area: word;
  font-family: var(--x-font-display);
  font-weight: var(--x-weight-medium);
  font-size: var(--x-lockup-word);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--x-text);
  line-height: 1;
}

/* Trailing mark (§ 16.4).
   Use the `-lockup-` asset here, NOT the `-mark-` badge. The badge carries 10
   units of padding on every side for the rounded-square avatar, which eats 26%
   of the height in a header slot before a single stroke is drawn — and a stroke
   figure already reads lighter than the letterform beside it. The lockup
   variants are the same drawing, cropped to their ink.

   1.25x, not 1.05x: cropped ink at cap height sits visually smaller than the
   letters it trails, because the letters have overshoot and the mark does not. */
.x-lockup__mark {
  grid-area: mark;
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  font-size: var(--x-lockup-word);
  background: var(--x-product-mark) center / contain no-repeat;
}

/* The by-line sits under the word, left-aligned to it. The image itself comes
   from the surface files: the X is Voltage on a dark ground and Voltage Deep on
   a light one, because Voltage on Paper is 1.15:1. Use the shipped file — do
   not redraw it (§ 16.5). */
.x-lockup__by {
  grid-area: by;
  display: block;
  height: var(--x-lockup-by);
  margin-top: 0.35em;
  background: var(--x-endorsement) left center / contain no-repeat;
}

/* THE BY-LINE AS LIVE TEXT — `by 177X AI`.
   ===========================================================================
   § 16.5 decided the company is "177X AI" and the by-line becomes `by 177X AI`,
   then HELD it: no venue was to ship the new wording until every venue could,
   because the shipped endorsement is outlined paths and appending two glyphs
   needs Space Grotesk 700, which does not ship as a real file.

   The hold assumed the only way to set the by-line was to bake it. It is not.
   Set live, the wording is a string — so a venue can carry `by 177X AI` today,
   and the generator becomes an upgrade rather than a prerequisite.

   Setting it live also settles a question the baked asset can only answer by
   being redrawn: the numeral. This renders Space Grotesk's own 1, which is what
   `endorsement.svg` already contains, so a venue using this and a venue using
   the asset show the same glyph.

   WEIGHT. § Type ships 400 and 500 only. The house name takes 500 against the
   400 of `by`; 700 would be synthesised, and a faux-bold house name is worse
   than a lighter true one. When 700 ships, this is the one line to change.

       <span class="x-lockup__by x-lockup__by--text" aria-hidden="true">by
         <b>177<i class="x-lockup__x">X</i> AI</b></span>

   The X and only the X carries the accent (§ 16.5, option 8a), through the
   accent-as-text role so it resolves to Voltage Deep on a light ground where
   bright Voltage would be 1.15:1.
   ========================================================================== */
.x-lockup__by--text {
  height: auto;
  background: none;
  font-family: var(--x-font-display);
  font-weight: var(--x-weight-regular);
  font-size: var(--x-lockup-by);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--x-label);
  white-space: nowrap;
}
.x-lockup__by--text b {
  font-weight: var(--x-weight-medium);
  letter-spacing: 0.02em;
}
.x-lockup__by--text .x-lockup__x {
  font-style: normal;
  color: var(--x-accent-text);
}

/* THE BLOCK VARIANT — mark centred on the whole lockup, not on the word.
   ===========================================================================
   OPT-IN. The base geometry above is unchanged and five venues stay on it;
   none of them asked for this. Add `x-lockup--block` alongside `x-lockup` to
   take it.

       <a class="x-lockup x-lockup--block" href="/" aria-label="Coil by 177X AI">

   It differs from the base in exactly three values, and each has a reason:

   MARK CENTRED ON THE BLOCK. The base puts the mark on line 1 beside the word,
   with the by-line spanning underneath. Here the two text lines form a column
   and the mark centres against the pair. That is a composition choice, not a
   correction — a mark on line 1 reads as part of the word, a mark on the block
   reads as a companion to the whole thing.

   MARK AT 1.32em, not 1.25em. The base size assumes a mark cropped to cap
   height. Coil's crop includes the wedge tail, so the recognisable coil square
   is about 80% of the box width and reads small against the letters at 1.25.
   A product whose mark IS cropped to cap height should not take this variant's
   size without checking it.

   BY-LINE AT 0.22em, not 0.35em. Not a preference. 0.35 is calibrated for the
   mark sitting on line 1, where the by-line has the mark's height beside it to
   hold the two lines together. Once the mark centres on the block that support
   is gone, and at 0.35 the word and the by-line read as two separate elements
   rather than one lockup.

   Everything else — the word as real text, mark and by-line aria-hidden, the
   by-line's weights and colours, Space Grotesk's own numeral, the X and only
   the X accented — is inherited unchanged and must stay that way.

   HOW. The base is already a grid, so the variant is one template change: the
   mark spans BOTH rows in column two instead of sitting in row one.
   `align-items: center` then centres it against the pair, and that is inherited
   from the base so it needs no restating. Same markup, same DOM order, no
   wrapper element.
   =========================================================================== */
.x-lockup--block {
  grid-template-areas: "word mark"
                       "by   mark";
  /* THE COLUMN GAP, MEASURED AGAINST THE WORD RATHER THAN THE AMBIENT TEXT.
     The base's "gap: 0 0.45em" sits on .x-lockup, which never sets a
     font-size — so unlike every other em in this file it resolves against
     whatever the consumer's surrounding text happens to be, not against
     --x-lockup-word. .x-lockup__mark does set it, which is why the mark is
     correctly 1.32 x 22px = 29px while the gap beside it is 0.45 x 13.1px =
     5.9px in Coil's header. The reference prototype puts font-size 22px on the
     container and gets 9.9px.
     Stated against the word here, so the variant keeps its proportion wherever
     it is used: 0.5 x 22px = 11px. Slightly wider than the base's intended
     9.9px, and deliberately — with the mark centred on the block the line it
     has to clear is the BY-LINE, which is wider than the word at every size,
     so the same nominal gap reads tighter here than on the base geometry.
     Scoped to the variant: the base's behaviour is untouched, and the five
     products on it render exactly as before. Whether the base should be
     word-relative too is a real question and a wider blast radius — raised
     separately rather than smuggled in here. */
  column-gap: calc(var(--x-lockup-word) * 0.5);
}
.x-lockup--block > .x-lockup__mark {
  width: 1.32em;
  height: 1.32em;
}
.x-lockup--block > .x-lockup__by {
  margin-top: 0.22em;
}

/* Products that pair the lockup with a descriptor ("admin console", "benchmark
   / index service"). Aligns to the word, not the block, so the descriptor does
   not drift down beside the by-line. */
.x-lockup-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
}
.x-lockup-row > .x-lockup-sub {
  font-family: var(--x-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--x-label);
  white-space: nowrap;
  margin-top: calc((var(--x-lockup-word) - 11px) / 2);
}