/*
 * LeagueHangar.com — layout and hierarchy.
 *
 * THERE IS NO HEX IN THIS FILE, on purpose, and that is the same rule
 * frontend/src/styles/app.css lives under. Every colour arrives as a custom
 * property from tokens.css, which is GENERATED from brand/tokens.json, which is
 * generated by measuring assets/wingman_logo.png. So the page cannot drift from
 * the mark by somebody nudging a value here, and a palette change repaints the
 * site without touching a rule in this file. tests/test_site.py fails on a hex.
 *
 * IT COMMITS TO ONE LOOK. The mark is a dark navy ground with gold on it; a
 * light rendering of it would be a different mark. So the palette is painted
 * explicitly rather than inherited, and there is no prefers-color-scheme block
 * to swap it for something nobody drew.
 *
 * NOTHING IS FETCHED. No @import, no font URL, no background pointing at a CDN.
 * The type stack is the same one the product ships, which is a list of faces
 * the reader's machine already has and a system fallback when it does not: a
 * page selling software that sends nothing may not itself open a connection to
 * a font host to say so.
 */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-gold-text);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

h1,
h2,
h3,
h4 {
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}

/* The type scale's floor is the product's own, and nothing goes under it. */
.lh-note,
.lh-badge,
.lh-tier,
.lh-colophon {
  font-size: 0.8125rem; /* 13px */
  color: var(--ink-muted);
  line-height: 1.5;
}

.lh-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lh-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--gold-highlight);
  color: var(--ink-on-gold);
  padding: 0.6rem 1rem;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}

.lh-skip:focus {
  left: 0;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--accent-gold-text);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ shell */

/*
 * THE MEASURE IS THE COMP'S. 1320px, not the 1180 that stood here: the ratified
 * page runs its content to within about 40px of a 1672px canvas, and a narrower
 * shell is what pushed the room photograph down to a third of the fold. Reading
 * width is unaffected -- every text block carries its own max-width in ch, so
 * the prose measure is set by the type and the shell only says how far the
 * cards and the pictures may run.
 */
.lh-shell {
  width: min(1320px, calc(100% - 2.5rem));
  margin-inline: auto;
}

.lh-narrow {
  width: min(760px, calc(100% - 2.5rem));
}

.lh-section {
  padding: clamp(3rem, 7vw, 6rem) 0;
}

.lh-section-raised {
  background: var(--surface-raised);
}

.lh-section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 0.6em;
}

/* A heading under a section title. It exists because "You stay in control"
   became the section's name and "What leaves this machine" became the first
   thing inside it -- a real second level, rather than a class the markup names
   and this file never defines, which is the defect PROJECT_RECORD 51 found six
   of on the first geometry run. */
.lh-sub-title {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  margin: 2.5rem 0 0.6em;
  color: var(--ink-primary);
}

.lh-section-lede {
  max-width: 62ch;
  color: var(--ink-secondary);
  margin: 0 0 2.5rem;
}

/* ----------------------------------------------------------------- header */

.lh-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-base);
  border-bottom: 1px solid var(--surface-float);
}

.lh-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
  flex-wrap: wrap;
}

/*
 * THE LOCKUP'S CLEAR SPACE IS THE SEAL'S. --crest-clear-space is a fraction of
 * the crest's own width, so the padding here scales with the mark rather than
 * being a number somebody liked.
 */
.lh-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  padding: calc(var(--crest-clear-space) * 44px);
}

.lh-crest {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}

/*
 * THE DOMAIN IS THE LOCKUP, which is the comp's own call and a correction to
 * what stood here: the page was headed "Wingman / LEAGUE HANGAR", so the site
 * was named in the small print under the product. The site is the seller, the
 * product is what is sold, and the address is what somebody types.
 */
.lh-lockup-words {
  display: flex;
  align-items: baseline;
  line-height: 1.1;
  font-size: 1.2rem;
}

.lh-lockup-words strong {
  letter-spacing: -0.01em;
}

.lh-dotcom {
  color: var(--ink-muted);
  font-weight: 400;
}

.lh-nav {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  flex-wrap: wrap;
}

.lh-nav a {
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: 0.35rem 0;
}

.lh-nav a:hover {
  color: var(--accent-gold-text);
}

/*
 * THE COMP'S "Beta Access" PILL. It is drawn only while the access gate is on,
 * because build.py renders it off the same flag that withholds the artifact --
 * a badge that has to be remembered is a badge that is still up in December.
 */
.lh-beta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--surface-float);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  white-space: nowrap;
}

.lh-beta svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.lh-beta i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold-highlight);
}

/* ------------------------------------------------------------------- hero */

.lh-hero {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(120% 90% at 15% 0%, var(--surface-raised), transparent 62%),
    var(--surface-base);
}

.lh-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/*
 * THE EYEBROW, RULED BOTH SIDES, as the comp draws it. The rules are drawn by
 * the element rather than typed as dashes, so they end where the text ends at
 * any width instead of wrapping onto a line of their own.
 */
.lh-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.4rem;
  color: var(--accent-gold-text);
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lh-eyebrow::before,
.lh-eyebrow::after {
  content: "";
  height: 1px;
  flex: 0 0 clamp(18px, 4vw, 46px);
  background: var(--accent-gold-deep);
  opacity: 0.55;
}

.lh-eyebrow::after {
  flex: 1 1 auto;
}

.lh-hero-mark {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-bottom: 0.35rem;
  min-width: 0;
}

.lh-hero-crest {
  width: clamp(72px, 8vw, 128px);
  height: auto;
  flex: none;
}

/*
 * THE WORDMARK IS SET, NOT PLACED. The mark's own serif exists here only as
 * pixels in a rendered JPEG and brand/tokens.json records the face as
 * UNRESOLVED rather than guessing at it, so the hero word is the SITE typeface
 * in spaced capitals -- which is what the design law already ruled: "two
 * wordmark treatments exist ... the serif belongs to the mark; the hero uses
 * the site typeface".
 *
 * The comp draws it in brushed metal. There is no metal in the seal and a
 * measured one cannot be invented, so the fall is DERIVED from the ink ramp
 * itself: primary at the top to muted at the foot, which is the same three
 * values the page sets every other word in. Where background-clip on text is
 * not available the word is simply ink-primary -- never transparent, because a
 * heading that disappears is the defect this project refuses everywhere else.
 */
.lh-wordmark {
  margin: 0;
  color: var(--ink-primary);
  font-size: clamp(1.7rem, 4.4vw, 4.4rem);
  font-weight: 700;
  letter-spacing: clamp(0.03em, 0.5vw, 0.1em);
  text-transform: uppercase;
  line-height: 1;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lh-wordmark {
    background-image: linear-gradient(
      170deg,
      var(--ink-primary) 0%,
      var(--ink-secondary) 52%,
      var(--ink-muted) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.lh-subhead {
  margin: 0 0 1.1rem;
  color: var(--accent-gold-text);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lh-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-secondary);
  max-width: 46ch;
}

.lh-lede em {
  color: var(--ink-primary);
  font-style: italic;
}

.lh-hero-facts {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
  display: grid;
  gap: 0.6rem;
}

.lh-hero-facts li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-primary);
  font-weight: 500;
}

.lh-hero-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 10px;
  height: 6px;
  border: 2px solid var(--accent-plume);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}

.lh-hero-shot img,
.lh-shot img,
.lh-step-shot img {
  border-radius: 12px;
  border: 1px solid var(--surface-float);
  width: 100%;
}

.lh-hero-shot figcaption,
.lh-shot figcaption {
  margin-top: 0.9rem;
  color: var(--ink-muted);
  font-size: 0.875rem;
  max-width: 68ch;
}

.lh-shot figcaption strong {
  color: var(--ink-secondary);
}

figure {
  margin: 0;
}

/* ---------------------------------------------------------------- buttons */

.lh-button {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 1rem;
}

.lh-button-gold {
  background: var(--gold-highlight);
  color: var(--ink-on-gold);
}

.lh-button-gold:hover {
  background: var(--gold-highlight);
}

.lh-button-quiet {
  border-color: var(--surface-float);
  color: var(--ink-primary);
  background: var(--surface-raised);
}

.lh-button-quiet:hover {
  border-color: var(--accent-gold-text);
  color: var(--accent-gold-text);
}

/* --------------------------------------------------------- the two lanes */

/*
 * THE COMP'S PAIR, AND THE COPY DECK'S HEADINGS. The two cards are the deck's
 * "First draft? / Fifteenth?" pair; what the comp's own bullets said under
 * them was mock labs, strategy presets and real-time help, none of which exist
 * in anything a stranger can download, and all of which site/claims.json
 * refuses by name. The lane survives, the list is this build's.
 */
.lh-section-tight {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.lh-audience-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.lh-audience {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  background: var(--surface-raised);
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
}

.lh-audience h2 {
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}

.lh-audience[data-lane="rookie"] h2 {
  color: var(--accent-plume);
}

.lh-audience[data-lane="veteran"] h2 {
  color: var(--accent-gold-text);
}

.lh-audience-lede {
  margin: 0 0 0.9rem;
  color: var(--ink-primary);
  font-weight: 500;
}

.lh-audience-words {
  min-width: 0;
}

.lh-hex {
  flex: none;
  width: clamp(52px, 6vw, 68px);
}

.lh-hex svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lh-hex .lh-hex-frame {
  stroke-width: 2.5;
  opacity: 0.5;
}

.lh-audience[data-lane="rookie"] .lh-hex-frame {
  stroke: var(--accent-plume);
}

.lh-audience[data-lane="veteran"] .lh-hex-frame {
  stroke: var(--accent-gold-text);
}

.lh-audience[data-lane="rookie"] .lh-glyph {
  stroke: var(--accent-plume);
}

.lh-audience[data-lane="veteran"] .lh-glyph {
  stroke: var(--accent-gold-text);
}

.lh-ticks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.lh-ticks li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.lh-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 9px;
  height: 5px;
  border: 2px solid currentColor;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  opacity: 0.9;
}

.lh-audience[data-lane="rookie"] .lh-ticks li::before {
  color: var(--accent-plume);
}

.lh-audience[data-lane="veteran"] .lh-ticks li::before {
  color: var(--accent-gold-text);
}

.lh-ticks em {
  color: var(--ink-primary);
  font-style: italic;
}

/* ------------------------------------------------------------------ cards */

/*
 * ONE STRIP, RULED BETWEEN THE FOUR -- the comp's own shape, and it says
 * something four separate boxes do not: these are four faces of one thing
 * rather than four features on a list. The fourth cell is tinted rather than
 * outlined, because the ratified correction seated Private & Secure INSIDE the
 * four and a box of its own would put it beside them again.
 */
.lh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: var(--surface-raised);
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  overflow: hidden;
}

.lh-card {
  border-left: 1px solid var(--surface-float);
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
}

/*
 * THE COMP'S FOUR, WITH ITS ICONS AND ITS COLOUR RHYTHM: green, gold, gold,
 * green, reading left to right. The icons are inline geometry -- no file, no
 * fetch, nothing depicting a screen or a person -- because every <img> on this
 * page is a photograph of the shipped build and an icon may not be mistaken
 * for one.
 */
.lh-icon {
  display: block;
  width: 44px;
  margin-bottom: 0.9rem;
}

.lh-icon svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: var(--accent-gold-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lh-card:nth-child(1) .lh-icon svg,
.lh-card:nth-child(4) .lh-icon svg {
  stroke: var(--accent-plume);
}

.lh-card h3 {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.6rem;
}

.lh-card:nth-child(1) h3,
.lh-card:nth-child(4) h3 {
  color: var(--accent-plume);
}

.lh-card p {
  color: var(--ink-secondary);
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
}

.lh-card p:first-of-type {
  color: var(--ink-primary);
  font-weight: 500;
}

.lh-cards > .lh-card:first-child {
  border-left: 0;
}

.lh-card-private {
  background: linear-gradient(180deg, var(--field-shadow), transparent 62%);
}

.lh-card-more a {
  font-size: 0.875rem;
}

.lh-section-raised .lh-cards {
  background: var(--surface-overlay);
}

/* ------------------------------------------------------------------ shots */

.lh-shot {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.lh-shot:last-child {
  margin-bottom: 0;
}

/* A shot that opens a section rather than illustrating a paragraph. */
#private .lh-shot {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ------------------------------------------------------------------- gaps */

.lh-gaps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.lh-gap {
  background: var(--surface-raised);
  border: 1px solid var(--surface-float);
  border-left: 3px solid var(--accent-gold-deep);
  border-radius: 10px;
  padding: 1.2rem 1.35rem;
}

.lh-gap h3 {
  font-size: 1rem;
  margin: 0.4rem 0 0.5rem;
}

.lh-gap p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.875rem;
}

.lh-tier {
  display: inline-block;
  border: 1px solid var(--surface-float);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lh-tier[data-tier="1"] {
  color: var(--accent-gold-text);
  border-color: var(--accent-gold-deep);
}

/* --------------------------------------------------------------- download */

/*
 * The hard facts, above the table. They were beside the way in until the access
 * card moved to the hero -- the comp's own position for it -- so what is left
 * here is one column and the strike list's "ESPN-only above the download" is
 * satisfied twice: once under the card, once here.
 */
.lh-before-download {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  margin-bottom: 3rem;
}

.lh-hard-fact {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.lh-hard-fact strong {
  color: var(--ink-primary);
}

.lh-privacy-line {
  border-left: 3px solid var(--accent-gold-text);
  padding-left: 1rem;
}

/*
 * THE COMP'S CLUBHOUSE CARD, WITH THE CODE BOX TAKEN OUT OF IT.
 *
 * The comp draws an access-code field and a greyed DOWNLOAD WINGMAN button
 * under it. This build refuses both, and the refusal is older than the comp:
 * the gate is a BUILD SWITCH, so with it on the artifact is not in the output
 * at all and there is nothing on the host for a code to unlock. A box that
 * accepts a code and can never produce a file is a control that exists to be
 * refused, and a locked button over a file that is not there is the curtain
 * this project names by name. What is kept is the card, its position, and its
 * job: it is where the download appears when the gate comes off, which is one
 * flag and one rebuild.
 */
.lh-gate,
.lh-get-primary {
  background: var(--surface-overlay);
  border: 1px solid var(--accent-gold-deep);
  border-radius: 12px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 1.75rem 0 1rem;
  max-width: 34rem;
}

.lh-gate h3 {
  font-size: 1.25rem;
  color: var(--accent-gold-text);
}

.lh-gate p {
  color: var(--ink-secondary);
  margin: 0 0 1.2rem;
}

.lh-get-primary .lh-note {
  margin: 0.9rem 0 0;
}

.lh-table-title {
  font-size: 1.25rem;
  margin-top: 0;
}

/*
 * `position: relative` IS LOAD-BEARING AND IS NOT DECORATION. The table inside
 * this box is wider than a phone on purpose and scrolls, which contains it --
 * but the screen-reader-only labels in its header are `position: absolute`, and
 * an absolutely positioned element with no positioned ancestor is laid out
 * against the PAGE rather than against the box that clips. One 1px span sitting
 * at the far end of a 720px table therefore made the whole document 248px wider
 * than the phone showing it. Found by the width gate, not by eye.
 */
.lh-table-scroll {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--surface-float);
  border-radius: 12px;
}

.lh-releases {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-size: 0.875rem;
}

.lh-releases th,
.lh-releases td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--surface-float);
  vertical-align: middle;
}

.lh-releases thead th {
  color: var(--ink-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.lh-releases tbody tr:last-child th,
.lh-releases tbody tr:last-child td {
  border-bottom: 0;
}

.lh-releases tbody th {
  color: var(--ink-primary);
  font-weight: 600;
  white-space: nowrap;
}

.lh-releases tr[data-current="true"] {
  background: var(--surface-overlay);
}

.lh-badge {
  display: inline-block;
  margin-left: 0.5rem;
  background: var(--gold-highlight);
  color: var(--ink-on-gold);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lh-file,
.lh-size {
  color: var(--ink-secondary);
  white-space: nowrap;
}

.lh-sha {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.lh-releases th:nth-child(4),
.lh-releases td:nth-child(4) {
  width: 100%;
}

.lh-sha code {
  color: var(--ink-secondary);
  word-break: break-all;
  font-size: 0.75rem;
  flex: 1;
}

.lh-copy {
  flex: none;
  background: var(--surface-float);
  color: var(--ink-primary);
  border: 1px solid var(--surface-float);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.lh-copy:hover {
  border-color: var(--accent-gold-text);
  color: var(--accent-gold-text);
}

.lh-copy[data-copied="true"] {
  background: var(--gold-highlight);
  color: var(--ink-on-gold);
  border-color: var(--accent-gold-text);
}

.lh-download-link {
  font-weight: 600;
  white-space: nowrap;
}

.lh-download-held {
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ steps */

/*
 * THE COMP'S INSTALL STRIP: numbered circles reading left to right, each with
 * its own picture under it. THREE OF THEM AND NOT FOUR, and that is standing
 * law rather than a layout choice -- the comp's ladder is Unlock Access,
 * Download Installer, Run Installer, Launch & Import, and there IS no
 * installer. Wingman is a zip and a .cmd file inside it, so a step headed "Run
 * Installer / No admin tricks required" describes software this build is not.
 * The pictures are photographs of the real screens for the same reason the
 * room shot is.
 */
.lh-steps {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.lh-step {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.85rem;
  align-content: start;
  background: var(--surface-raised);
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
}

.lh-step-number {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--accent-plume);
  color: var(--accent-plume);
  font-weight: 700;
}

.lh-step h3 {
  font-size: 1.05rem;
  color: var(--accent-plume);
  margin-bottom: 0.5rem;
}

.lh-step h3 code {
  color: var(--ink-primary);
  font-size: 0.9em;
}

.lh-step-shot {
  margin: 0;
  align-self: end;
}

.lh-step p {
  color: var(--ink-secondary);
  margin: 0;
  max-width: 46ch;
}

/* ------------------------------------------------------------------ facts */

.lh-facts {
  margin: 0;
  display: grid;
  gap: 1.5rem;
}

.lh-facts dt {
  color: var(--accent-gold-text);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.lh-facts dd {
  margin: 0;
  color: var(--ink-secondary);
}

.lh-feedback {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 1rem;
}

.lh-feedback li {
  background: var(--surface-raised);
  border: 1px solid var(--surface-float);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  color: var(--ink-secondary);
}

.lh-feedback strong {
  color: var(--ink-primary);
  display: block;
  margin-bottom: 0.2rem;
}

.lh-contact {
  margin: 0 0 1rem;
}

/* ----------------------------------------------------------------- footer */

.lh-footer {
  background: var(--surface-raised);
  border-top: 1px solid var(--surface-float);
  padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem;
}

/*
 * THE COMP'S FOOTER STRIP -- a centred line ruled to both edges -- CARRYING
 * DIFFERENT WORDS. The comp's own line is "SMARTER DRAFTS. STRONGER TEAMS.
 * YOUR LEAGUE.", and §4's strike list swapped it before this page existed. It
 * would have had to go anyway: a stronger team and a better league are a
 * promise about a finish, which site/claims.json refuses by name and the
 * licence disclaims on its face. What stands there instead is quoted from the
 * Agreement's own §1, so the last line of the page is a term of the contract.
 */
.lh-tagline {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2rem);
  margin: 0 0 2.5rem;
  color: var(--ink-primary);
  font-size: clamp(0.95rem, 1.9vw, 1.25rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
}

.lh-tagline::before,
.lh-tagline::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--accent-gold-deep);
  opacity: 0.45;
}

.lh-tagline span {
  flex: 0 1 auto;
}

.lh-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.lh-footer-cols h4 {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}

.lh-footer-cols p {
  margin: 0 0 0.6rem;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.lh-colophon {
  border-top: 1px solid var(--surface-float);
  padding-top: 1.5rem;
  margin: 0;
}

.lh-colophon code {
  word-break: break-all;
  font-size: 0.6875rem; /* 11px, the floor, and never below it */
}

/* ------------------------------------------------------------ narrow view */

@media (max-width: 900px) {
  /*
   * THE STRIP BECOMES A STACK, so its rules turn ninety degrees with it. A
   * left-hand divider on a column that is now a row reads as a stray line.
   */
  .lh-card {
    border-left: 0;
    border-top: 1px solid var(--surface-float);
  }

  .lh-cards > .lh-card:first-child {
    border-top: 0;
  }

  .lh-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lh-hero-shot {
    order: -1;
  }

  .lh-hero-mark {
    flex-wrap: wrap;
  }

  .lh-header-inner {
    padding-block: 0.6rem;
  }

  .lh-nav {
    width: 100%;
  }
}

@media (max-width: 560px) {
  /*
   * THE PAIR STACKS AND THE HEXES STAY BESIDE THEIR WORDS. A phone is one of
   * the three widths this page is looked at in a real browser, and the icon
   * column is what would otherwise push a heading off its own card.
   */
  .lh-audience {
    gap: 0.8rem;
  }

  .lh-hex {
    width: 44px;
  }

  .lh-sha {
    flex-direction: column;
    align-items: flex-start;
  }

  .lh-sha code {
    max-width: none;
  }
}

/* --------------------------------------------------------------- clubhouse
 *
 * The access panel. The code field and its button sit on one row; the download
 * slot below is drawn LOCKED until a correct code is entered, and the sentence
 * under it says in plain words that this is not security. Every colour comes
 * from the seal, and the gold that words are drawn in is `--accent-gold-text`
 * rather than `--accent-gold`: on the ratified master the rim's own median is
 * the body of a lit bevel's ramp and cannot carry type.
 */
.lh-clubhouse-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
}

.lh-code {
  flex: 1 1 12rem;
  min-width: 0;
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 0.9rem;
  color: var(--ink-primary);
  background: var(--surface-base);
  border: 1px solid var(--accent-gold-deep);
  border-radius: 8px;
}

.lh-code:focus-visible {
  outline: 2px solid var(--accent-gold-text);
  outline-offset: 2px;
}

.lh-code-said {
  margin: 0.8rem 0 0;
  min-height: 1.4em;
  color: var(--ink-secondary);
}

.lh-clubhouse-download {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--surface-float);
}

/* Locked reads as locked: the row is present, named, and plainly not yet a
   control -- which is the opposite of drawing nothing and letting its absence
   look like its presence. */
.lh-clubhouse-download[data-locked="true"] .lh-download-held {
  display: block;
  font-weight: 600;
  color: var(--ink-muted);
}

.lh-clubhouse-download[data-locked="true"] .lh-note {
  margin: 0.25rem 0 0;
}

.lh-clubhouse-plain {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--surface-float);
  color: var(--ink-muted);
}

.lh-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================================
 * THE FOUR-COMP BUILD (2026-08-23)
 *
 * Six pages and a 404, in the world the ratified comps draw: a hangar ground,
 * the aviator eagle, and the nav and footer strips carried across every page.
 * Everything below is layout and hierarchy only — there is still no hex in
 * this file, and every colour is a token measured off the mark.
 *
 * THE ILLUSTRATION IS DECORATION AND IS DRAWN AS SUCH. The mascot and the
 * hangar bay are aria-hidden, sit behind the words at low contrast, and are
 * pinned so they can never take a line of type with them: a marketing page
 * whose art competes with its sentences is a page nobody finishes reading.
 * ==========================================================================*/

/* ------------------------------------------------------ masthead and nav */

.lh-lockup-words {
  display: grid;
  gap: 0.1rem;
}

.lh-lockup-sub {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* THE PAGE YOU ARE ON IS MARKED, and it is marked with the state the browser
   already knows about rather than a class the build has to remember to set. */
.lh-nav a[aria-current="page"] {
  color: var(--accent-gold-text);
}

.lh-nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.35rem;
  border-radius: 2px;
  background: var(--accent-gold-text);
}

/* ------------------------------------------------------------- the heroes */

/*
 * ONE HERO SHAPE, TWO SIZES. The front page's runs full height with the
 * product shot beside it; every other page's is the same ground and the same
 * eyebrow with the art at a quarter of the weight, so a reader always knows
 * which building they are in.
 */
.lh-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(90% 70% at 12% 0%, var(--surface-raised), transparent 60%),
    var(--surface-base);
  border-bottom: 1px solid var(--surface-float);
}

.lh-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/*
 * THE ART LAYER. Absolutely positioned behind the content, never in flow, so
 * it cannot change where a word sits at any width — and pointer-events off,
 * so it cannot swallow a click meant for a link underneath it.
 */
.lh-hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.lh-hero-art::after {
  /* THE SCRIM. The art is a lit photograph and the words are on top of it, so
     the ground under the type is painted back in rather than trusted. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--surface-base) 0%,
    var(--surface-base) 38%,
    transparent 78%
  );
}

.lh-hero-bay {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(320px, 46vw, 720px);
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
  opacity: 0.34;
  filter: saturate(0.85);
  mask-image: linear-gradient(to left, rgb(0 0 0) 30%, transparent 100%);
}

.lh-hero-mascot {
  position: absolute;
  bottom: -6%;
  right: clamp(-40px, 2vw, 40px);
  width: clamp(230px, 30vw, 460px);
  height: auto;
  opacity: 0.9;
  mask-image: linear-gradient(to bottom, rgb(0 0 0) 74%, transparent 99%);
}

/* The slim variant: no mascot, and the bay is a wash rather than a picture. */
.lh-hero-art-slim .lh-hero-bay {
  opacity: 0.2;
  width: clamp(280px, 40vw, 620px);
}

.lh-headline {
  margin: 0 0 0.35rem;
  font-size: clamp(2.4rem, 6vw, 4.1rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.lh-headline-page {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: 1rem;
}

.lh-gold {
  color: var(--accent-gold-text);
}

.lh-lede-wide {
  max-width: 62ch;
}

.lh-lede-hero {
  max-width: 54ch;
}

.lh-hero-facts-wide {
  max-width: 62ch;
  margin-bottom: 2rem;
}

.lh-hero-secondary {
  margin: 1.1rem 0 0;
}

.lh-button-icon {
  display: inline-flex;
  width: 1.1em;
  margin-right: 0.5rem;
}

.lh-button-icon svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------- designed for night */

/*
 * THE SIX-CARD GRID. Two rows of three at full width, exactly as the comp
 * draws it, and it degrades to two and then one rather than shrinking a card
 * below the width its own heading needs.
 */
.lh-night {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.6rem, 4vw, 3.4rem);
}

.lh-night-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lh-night li {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.15rem;
}

.lh-night h3 {
  margin: 0.55rem 0 0.2rem;
  font-size: 1.0625rem;
}

.lh-night p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  max-width: 34ch;
}

.lh-night .lh-icon {
  width: 42px;
}

/* ---------------------------------------------------------------- the flow */

.lh-flow {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
}

.lh-flow li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.2rem;
  align-items: start;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  background: var(--surface-raised);
}

.lh-flow-number {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--accent-gold-deep);
  color: var(--accent-gold-text);
  font-weight: 700;
}

.lh-flow h2 {
  margin: 0.2rem 0 0.4rem;
  font-size: 1.25rem;
}

.lh-flow p {
  margin: 0;
  color: var(--ink-secondary);
  max-width: 74ch;
}

/* ------------------------------------------------------------- split pairs */

.lh-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: 2rem;
}

.lh-split-card {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  background: var(--surface-raised);
}

.lh-split-card h3 {
  margin: 0 0 0.9rem;
  font-size: 1.2rem;
  color: var(--accent-gold-text);
}

.lh-split-card p {
  color: var(--ink-secondary);
}

/* ------------------------------------------------------- four-card decks */

.lh-cards-four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  overflow: hidden;
}

.lh-cards-four > .lh-card {
  border-left: 1px solid var(--surface-float);
}

.lh-cards-four > .lh-card:first-child {
  border-left: 0;
}

/*
 * BUILT AND NOT BUILT, WEARING DIFFERENT CHIPS. A card describing a surface
 * this build does not have may not look like a card describing one it does —
 * that is the whole reason the panels kept their designed places instead of
 * being deleted, and a chip nobody can miss is what makes keeping them honest.
 */
.lh-state-chip {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lh-state-chip[data-state="built"] {
  color: var(--accent-plume);
  border: 1px solid var(--accent-plume);
}

.lh-state-chip[data-state="planned"] {
  color: var(--ink-muted);
  border: 1px dashed var(--ink-muted);
}

/* ---------------------------------------------------------- the war rooms */

.lh-room-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: 2.4rem;
}

.lh-shot-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
  color: var(--ink-primary);
}

.lh-shot-head strong {
  font-size: 1.0625rem;
}

/*
 * IT SAYS PHOTOGRAPH AND NOT "LIVE PREVIEW". The comps badge these panels
 * LIVE PREVIEW, and they are neither live nor a preview: they are pictures of
 * a build that already exists, taken by a script in this repository. The word
 * on the chip is the true one.
 */
.lh-shot-tag {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--accent-plume);
  color: var(--accent-plume);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lh-room-notes {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
}

.lh-room-notes h3 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1rem;
}

.lh-room-notes p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.lh-room-notes .lh-icon {
  width: 36px;
}

/* --------------------------------------------------------- transmissions */

/*
 * TRANSPARENT FICTION, DRAWN AS FICTION. No star row appears anywhere on this
 * site: a star is a rating and nobody has rated anything. The note above the
 * cards is styled to be read rather than skipped, because it is the sentence
 * that makes the section honest.
 */
.lh-fiction-note {
  border-left: 2px solid var(--accent-gold-deep);
  padding-left: 1rem;
}

.lh-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: 2rem;
}

.lh-quote {
  position: relative;
  padding: 1.5rem 1.6rem 1.3rem;
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  background: var(--surface-raised);
}

.lh-quote-mark {
  position: absolute;
  top: 0.35rem;
  left: 1rem;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent-gold-deep);
}

.lh-quote blockquote {
  margin: 0.9rem 0 1.1rem;
}

.lh-quote blockquote p {
  margin: 0;
  color: var(--ink-secondary);
  font-style: italic;
}

.lh-quote figcaption {
  display: grid;
  gap: 0.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--surface-float);
}

.lh-quote-who {
  font-weight: 700;
  color: var(--accent-gold-text);
  font-size: 0.9375rem;
}

.lh-quote-note {
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------- install extras */

.lh-steps-cards .lh-step {
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  background: var(--surface-raised);
}

.lh-steps-cards .lh-step h2 {
  margin: 0.15rem 0 0.5rem;
  font-size: 1.2rem;
}

.lh-steps-cards .lh-step h2 code {
  font-size: 0.95em;
  color: var(--accent-gold-text);
}

.lh-after {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}

.lh-after-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}

.lh-after-facts h3 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1rem;
}

.lh-after-facts p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.lh-after-facts .lh-icon {
  width: 36px;
}

.lh-help {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  background: var(--surface-raised);
}

.lh-help h3 {
  margin: 0.5rem 0 0.4rem;
  font-size: 1.0625rem;
}

.lh-help p {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.lh-help .lh-icon {
  width: 36px;
}

.lh-faq {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: 2rem;
}

.lh-faq article {
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  background: var(--surface-raised);
}

.lh-faq h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--accent-gold-text);
}

.lh-faq p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.lh-beta-line {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--surface-float);
}

.lh-section-title-inline {
  margin-top: 3rem;
}

/* ------------------------------------------------------------- the callout */

.lh-callout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
  margin-top: 2.4rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--accent-gold-deep);
  border-radius: 14px;
  background: var(--surface-raised);
}

.lh-callout h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.lh-callout p {
  color: var(--ink-secondary);
}

.lh-callout .lh-contact {
  display: grid;
  gap: 0.7rem;
  justify-items: stretch;
  margin: 0;
}

.lh-callout .lh-button {
  text-align: center;
}

/* -------------------------------------------------------- the footer strip */

/*
 * THE STRIP THE COMPS CARRY ALONG THE BOTTOM OF EVERY PAGE, and it carries no
 * star row: the comps end theirs with five stars beside a tagline, and a star
 * is a rating of a thing nobody has rated. What replaces it is a fourth fact.
 */
.lh-footer-strip {
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0 0 2rem;
  border-bottom: 1px solid var(--surface-float);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

.lh-footer-strip li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.8rem;
  align-items: center;
}

.lh-strip-icon {
  grid-row: span 2;
  width: 30px;
}

.lh-strip-icon svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: var(--accent-plume);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lh-footer-strip strong {
  font-size: 0.9375rem;
}

.lh-footer-strip span:not(.lh-strip-icon) {
  color: var(--ink-muted);
  font-size: 0.875rem;
}

/* ------------------------------------------------------------------- 404 */

.lh-lost {
  min-height: 52vh;
  display: grid;
  align-content: center;
}

.lh-lost-links {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.lh-lost-links a {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--surface-float);
  border-radius: 12px;
  background: var(--surface-raised);
  text-decoration: none;
}

.lh-lost-links a:hover {
  border-color: var(--accent-gold-deep);
}

.lh-lost-links strong {
  color: var(--accent-gold-text);
}

.lh-lost-links span {
  color: var(--ink-muted);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------- widths */

@media (max-width: 1100px) {
  .lh-night,
  .lh-night-four,
  .lh-room-notes,
  .lh-after-facts,
  .lh-footer-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lh-cards-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lh-cards-four > .lh-card:nth-child(3) {
    border-left: 0;
  }

  .lh-faq,
  .lh-quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lh-after {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  /* THE ART GETS OUT OF THE WAY BEFORE IT GETS IN IT. At these widths the
     words take the whole column, so the mascot is dropped rather than
     shrunk behind them — a decoration is never worth a line of type. */
  .lh-hero-mascot {
    display: none;
  }

  .lh-hero-bay {
    width: 100%;
    opacity: 0.16;
    mask-image: linear-gradient(to top, rgb(0 0 0) 20%, transparent 90%);
  }

  .lh-hero-art::after {
    background: linear-gradient(
      180deg,
      var(--surface-base) 0%,
      transparent 60%,
      var(--surface-base) 100%
    );
  }

  .lh-room-pair,
  .lh-split,
  .lh-callout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .lh-night,
  .lh-night-four,
  .lh-room-notes,
  .lh-after-facts,
  .lh-footer-strip,
  .lh-faq,
  .lh-quotes {
    grid-template-columns: minmax(0, 1fr);
  }

  .lh-cards-four {
    grid-template-columns: minmax(0, 1fr);
  }

  .lh-cards-four > .lh-card {
    border-left: 0;
    border-top: 1px solid var(--surface-float);
  }

  .lh-cards-four > .lh-card:first-child {
    border-top: 0;
  }

  .lh-flow li {
    grid-template-columns: minmax(0, 1fr);
  }

  .lh-flow-number {
    grid-row: auto;
  }
}

/* ------------------------------------------------- the art band, corrected
 *
 * FOUND BY LOOKING, at 1600x1000, on the first build of all six pages.
 *
 * `.lh-hero-art` was `inset: 0`, which makes the art as tall as the SECTION it
 * sits in. On the front page that put the mascot in the dead space under the
 * product shot; on the install page, whose section carries five step cards, it
 * anchored him a thousand pixels below the headline he is meant to stand
 * beside. An absolutely-positioned decoration inherits whatever height its
 * container happens to have, and a container whose height is content is a
 * container whose height is an accident.
 *
 * So the band is BOUNDED: the art occupies a hero-sized strip at the top of
 * whatever section it is in, and nothing below that strip can move it.
 */
.lh-hero-art {
  bottom: auto;
  height: clamp(340px, 44vw, 560px);
}

/* The front page's hero IS the hero, so its band is the whole of it. */
.lh-hero .lh-hero-art {
  height: 100%;
}

/*
 * AND ON THE FRONT PAGE THE MASCOT IS IN FLOW. He is the one piece of art the
 * comp puts BETWEEN the words and the product panel rather than behind them,
 * and a decoration that has to be positioned against a photograph is a
 * decoration that should be stacked with it instead.
 */
.lh-hero-right {
  display: grid;
  gap: 0;
  align-content: start;
}

.lh-hero .lh-hero-mascot {
  position: static;
  width: clamp(220px, 24vw, 380px);
  justify-self: end;
  margin: 0 clamp(0px, 2vw, 28px) -2.2rem 0;
  opacity: 1;
  mask-image: linear-gradient(to bottom, rgb(0 0 0) 78%, transparent 100%);
}

/* THE HERO'S BUTTON ROW, as the comp draws it: gold first, quiet beside it. */
.lh-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.6rem 0 0;
}

/* The bay is a ground, not a subject: it sat at a third opacity behind the
   product shot and read as noise rather than as a hangar. */
.lh-hero-bay {
  opacity: 0.22;
}

/*
 * FIVE STEP CARDS, AND THEY ARE EQUAL. `auto-fit minmax(280px, 1fr)` gave four
 * across and one orphan at 1600, with wildly unequal heights because a card's
 * height was its prose. The columns are declared, the prose was cut to a card's
 * worth, and the pictures sit at the bottom of the cards that have one.
 */
.lh-steps-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-top: 2.6rem;
}

.lh-steps-cards .lh-step {
  grid-template-rows: auto 1fr auto;
}

.lh-steps-cards .lh-step p {
  font-size: 0.9375rem;
  max-width: none;
}

.lh-steps-cards .lh-step code {
  overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  .lh-steps-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .lh-steps-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .lh-hero-right {
    order: -1;
  }

  .lh-hero .lh-hero-mascot {
    display: none;
  }
}

/* ---------------------------------------------- the artwork's own edges
 *
 * FOUND BY LOOKING, second pass. The cuts are RECTANGLES out of a rendered
 * illustration, so their four edges are hard: on the install page the hangar
 * inside the crop is lighter than the page's ground and the seam drew a box
 * around the mascot. A crop that announces it is a crop is worse than no
 * illustration at all.
 *
 * Feathered on three sides and not four. The top is left alone deliberately --
 * the eagle's crown begins eight pixels below it, and a top fade eats the head
 * before it reaches the seam. What the top edge shows is hangar ceiling, which
 * is already within a shade of the ground it sits on.
 */
.lh-hero-mascot {
  mask-image:
    linear-gradient(to bottom, rgb(0 0 0) 72%, transparent 100%),
    linear-gradient(to right, transparent 0, rgb(0 0 0) 14%, rgb(0 0 0) 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.lh-hero .lh-hero-mascot {
  mask-image:
    linear-gradient(to bottom, rgb(0 0 0) 76%, transparent 100%),
    linear-gradient(to right, transparent 0, rgb(0 0 0) 12%, rgb(0 0 0) 88%, transparent 100%);
}

/* The band on an inner page stops above the content under it: at 44vw the
   mascot's feet reached into the first row of step cards. */
.lh-page-hero .lh-hero-art {
  height: clamp(300px, 34vw, 470px);
}

/*
 * A THUMBNAIL IN A CARD IS A THUMBNAIL. Two of the five install cards carry a
 * picture and three do not -- there is no screen of "check a checksum" and
 * inventing one would be illustrating something that does not happen -- so the
 * pictures are capped rather than allowed to set the height of the whole deck.
 */
.lh-steps-cards .lh-step-shot img {
  max-height: 108px;
  object-fit: cover;
  object-position: top center;
}

/* The install page's two photographs, moved out of the step cards and under
   the deck: capped to a thumbnail inside a card they were unreadable, and
   three of the five cards had no screen to show because there is no screen of
   checking a checksum. */
.lh-install-shots {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

/* ==================================================================
 * PROJECT_RECORD 56 — THE COMPOSITION, REBUILT TO THE COMPS
 *
 * The governor read the live site on his own 3440-wide monitor and ruled it
 * nothing like the four ratified comps. Every rule below answers one of the
 * things he named, and the ones that are a JUDGEMENT rather than a measurement
 * say so, because a number nobody can account for is a number nobody can argue
 * with later.
 *
 * WHAT DID NOT MOVE: not one word on any page, not one claim, not one refusal.
 * Uppercasing a heading is a rendering and not an edit; the strings are the
 * strings config and the fragments already held.
 * ================================================================== */

/* --------------------------------------------- the measure follows the screen
 *
 * 1320px is a comfortable measure at 1600 -- 82% of the width -- and a strip at
 * 3440, where it is 38%. That single number is most of "a narrow strip lost in
 * empty navy". It is not fixed by picking a bigger fixed number, because a
 * bigger fixed number has the same defect further out, so the band SCALES and
 * is capped only where a card row would otherwise become a caption stretched
 * across a wall.
 *
 * READING WIDTH IS UNAFFECTED. Every prose block on this site already carries
 * its own max-width in `ch`, so widening the shell moves cards and pictures and
 * leaves the measure of a sentence exactly where the type set it.
 */
.lh-shell {
  width: min(1760px, calc(100% - 4rem));
}

/*
 * AND THE NARROW MEASURE HAD TO BE RESTORED, BECAUSE THIS RULE KILLED IT.
 *
 * PROJECT_RECORD 59, found by photographing a new page and looking at it.
 * `.lh-narrow` is declared above at line ~128 and this rule is declared here;
 * same specificity, later wins, so from the day the shell was widened EVERY
 * `lh-shell lh-narrow` section has been drawn at the full band. Measured
 * rather than reasoned: the element carries both classes and reports 1760px at
 * 1920 AND at 3440, where 760 was the ratified value.
 *
 * The comment above says "reading width is unaffected -- every prose block
 * already carries its own max-width in ch". That is true of `.lh-lede` and
 * `.lh-section-lede` and it is NOT true of a `dd`, a `dt` or a bare `<p>`, and
 * the narrow container was what covered those. The visible cost was the whole
 * of "what leaves this machine" on the trust page, set at a 1760px measure
 * since 56 with nobody noticing -- no overflow, no overlap, no type under the
 * floor, so no gate could see it.
 *
 * IT IS RESTORED AND NOT REDESIGNED: the same 760px that was ratified, at a
 * specificity a later single-class rule cannot silently take away again. 56's
 * own reasoning is what makes this safe at 3440 -- "what makes the page read as
 * composed is not the width of its text: it is that the art and the section
 * grounds run edge to edge behind it", and they still do.
 */
.lh-shell.lh-narrow {
  width: min(760px, calc(100% - 2.5rem));
  /*
   * AND IT IS ALIGNED, NOT CENTRED, WHICH IS THE HALF THE REPAIR NEEDED.
   *
   * Restoring the width alone left the page with a ragged left edge: the hero
   * and every wide section start at the band's left margin, and a centred
   * 760px column starts 580px further in at 1920. That was survivable when the
   * band was 1320 and the offset was 280; it is not at 1760, and it read as
   * two pages stacked. Photographed and looked at, which is the only way this
   * kind of thing is ever found.
   *
   * So the narrow column keeps the band's own left edge and gives its slack
   * back on the right, where a short measure is supposed to end. The
   * expression is the outer shell's left offset, written out rather than
   * guessed: same 1760 cap, same 4rem gutter, same 2rem floor.
   */
  margin-inline: max(2rem, (100% - min(1760px, 100% - 4rem)) / 2) auto;
}

/*
 * TWO MEASURES PAST 2200px, AND THE SPLIT IS THE POINT.
 *
 * One band for the whole page was wrong in both directions. At 1320 it was a
 * strip in a void; at 2440 the hero composed beautifully and every DENSE
 * section behind it -- a six-cell icon grid, a seven-column tier list, a
 * releases table -- became tiny text stretched across a wall, which is the
 * same defect wearing the opposite coat.
 *
 * So the HERO keeps the wide band, because it is a composition and its art
 * bleeds past it anyway, and everything else keeps a measure a person can
 * read. What makes the page read as composed rather than as a floating column
 * is not the width of its text: it is that the art and the section grounds run
 * edge to edge behind it.
 */
@media (min-width: 2200px) {
  .lh-hero > .lh-shell,
  .lh-page-hero > .lh-shell {
    width: min(2440px, calc(100% - 7rem));
  }

  /* The band is drawn at the width of its own box, so a wider screen draws a
     taller picture; the hero has to have room for it or the bottom is cut. */
  .lh-hero,
  .lh-page-hero {
    min-height: clamp(900px, 33vw, 1180px);
  }
}

/* ------------------------------------------------- the hero is a cinematic band
 *
 * THE COMPS' LOUDEST SIGNATURE. All four open with hangar art running edge to
 * edge and the eagle large in frame. What stood here was a 314x216 bay at 22%
 * opacity and a 504px mascot, inside the 1320px column -- a small rectangle
 * orphaned in navy, which is exactly what the governor called it.
 *
 * THE ART IS NOW THE SECTION'S GROUND rather than an object inside it. It is
 * painted by `.lh-hero-art` itself, keyed on the band tools/site/artwork.py
 * assigned to this page, so no page chooses its own picture.
 */
.lh-hero,
.lh-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(520px, 30vw, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lh-hero-art[data-band] {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

/*
 * THREE LAYERS, NAMED, BECAUSE NEGATIVE z-index IS NOT A LAYER ORDER.
 *
 * The first build of this put the wash on ``::before`` at ``z-index: -1``,
 * meaning to paint it behind the band's own background. It does not: a child
 * with a negative z-index paints behind its parent's background only when the
 * parent is NOT a stacking context, and this parent is one -- it is positioned
 * and carries a z-index. So the blurred ground painted ON TOP of the sharp
 * artwork, and the photograph of it shows a smear where the eagle is. It was
 * found by looking, which is the only way it could have been: every assertion
 * about the art passed, because the art was there.
 *
 * So the three layers are three things with names and an explicit order:
 * the wash behind, the scene over it, the scrim over both.
 */
.lh-hero-art[data-band]::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 0;
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(30px) saturate(0.5) brightness(0.28);
}

/*
 * THE SCENE. It owns the right of the band, which is where the comps put the
 * eagle: their headline ends at 42% of the canvas and the shield's rim begins
 * at 45%. Its left edge is a mask rather than a cut, so the picture fades into
 * the wash instead of ending on the straight vertical line that made the old
 * mascot read as a cutout pasted onto navy.
 */
.lh-hero-scene {
  position: absolute;
  top: 0;
  right: 0;
  left: 38%;
  bottom: auto;
  /*
   * THE BOX IS THE PICTURE'S OWN SHAPE. Stretched to the hero's full height the
   * box was taller than the artwork drawn inside it, so the fade-out at 72% of
   * the BOX landed below the picture and the picture's own bottom edge stayed
   * fully opaque -- a hard horizontal seam across the hangar, photographed on
   * the install page. Binding the box to the band's aspect puts the fade back
   * on the artwork, where it was meant to be.
   */
  aspect-ratio: 872 / 448;
  z-index: 1;
  background-image: inherit;
  background-repeat: no-repeat;
  /*
   * SIZED BY WIDTH, NOT BY `cover`. The scene box is as tall as the hero's
   * words, so `cover` scaled the band up until it filled that height and then
   * cropped 39% of its width away -- which photographed as an eagle's head
   * filling the frame with no shield, no jets and no sign. Sizing to the box's
   * width draws the WHOLE ratified band at about 1.4x here, and the wash
   * carries whatever height is left under it.
   */
  background-position: right top;
  background-size: 100% auto;
  /* Two soft edges, not two cuts: left into the wash, bottom into the ground.
     A straight edge on artwork is what made the retired mascot read as a
     rectangle pasted onto navy. */
  mask-image:
    linear-gradient(to right, transparent 0%, rgb(0 0 0) 15%),
    linear-gradient(to bottom, rgb(0 0 0) 72%, transparent 98%);
  mask-composite: intersect;
}

.lh-hero-art[data-band]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      100deg,
      var(--surface-base) 0%,
      var(--surface-base) 20%,
      transparent 62%
    ),
    linear-gradient(to top, var(--surface-base) 0%, transparent 20%);
}

.lh-hero-art[data-band="art-hero-main"] {
  background-image: url("/img/art-hero-main.png");
}

.lh-hero-art[data-band="art-hero-install"] {
  background-image: url("/img/art-hero-install.png");
}

.lh-hero-art[data-band="art-hero-feedback"] {
  background-image: url("/img/art-hero-feedback.png");
}

/*
 * THE FRONT PAGE'S TWO COLUMNS, STACKED THE WAY THE COMP STACKS THEM. The comp
 * puts the eagle in the upper right and the demo panel BELOW him, starting at
 * 54% of the canvas height -- not beside the headline. Built as a plain two-
 * column row, the photograph sat exactly where the eagle is and hid him
 * completely, which is what the first rebuild photographed.
 */
.lh-hero .lh-hero-inner {
  align-items: start;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}

.lh-hero .lh-hero-right {
  /* The comp starts the demo panel at 54% of the canvas height, under the
     eagle rather than across him. This is that, held at every width. */
  padding-top: clamp(160px, 21vw, 600px);
}

.lh-hero .lh-hero-words {
  max-width: 62ch;
}

/* ------------------------------------------------------- display type, restored
 *
 * The headline was capped at 4.1rem, so it stopped growing at 65px and was the
 * same size on a laptop and on a 3440 monitor. The comps set their first line
 * at roughly 5.3% of the canvas; these caps land under that at every width and
 * the floor the gate asserts is 3.4%, which leaves a longer headline room to
 * step down without falling back to body copy.
 */
.lh-headline {
  font-size: clamp(2.6rem, 4.7vw, 7.6rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
}

.lh-headline-page {
  font-size: clamp(2.3rem, 4.4vw, 7.6rem);
  margin-bottom: 0.7rem;
  /*
   * A MEASURE, BECAUSE THE COMPS' FACE IS CONDENSED AND THIS ONE IS NOT. The
   * ratified headlines end at about 42% of the canvas and the shield begins at
   * 45%; set in the site's own stack the same words run to 72% and cross the
   * lit part of the picture. Nothing here may fetch a face, so the words wrap
   * instead -- which costs a line and keeps every one of them on the ground
   * the scrim paints.
   */
  max-width: 26ch;
}

/*
 * THE SECOND LINE IS A DISPLAY LINE, IN GOLD, AS ALL FOUR COMPS DRAW IT. It was
 * a 1.85rem sentence in gold, which reads as a subtitle rather than as the
 * other half of a headline. The WORDS are untouched -- `WIN MORE.` is refused
 * and stays refused, and what is set here is the sentence the strike list put
 * in its place.
 */
.lh-subhead {
  /*
   * THE COMP'S GOLD LINE IS TWO WORDS AND THIS ONE IS A SENTENCE, because
   * `WIN MORE.` is a refused claim and what replaced it is the strike list's
   * own wording. So it is set as a display line and NOT at the headline's
   * size: at 3.4rem in a hero column it took five lines and pushed the whole
   * composition down. The measure is what keeps it to two.
   */
  font-size: clamp(1.25rem, 2.05vw, 2.5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  max-width: 32ch;
}

/* Section headers are set in capitals on every comp. Same words, drawn the way
   the picture draws them. */
.lh-section-title {
  font-size: clamp(1.5rem, 2.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.lh-lede-hero,
.lh-lede {
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
}

/* --------------------------------------------------------------- the nav strip
 *
 * The comps put a line icon beside every nav label and a hairline between the
 * items. The strip was bare text, which is one of the things that made the
 * masthead read as unstyled even when it was not.
 */
.lh-nav {
  gap: 0;
}

.lh-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1.1rem;
  border-left: 1px solid var(--surface-float);
}

.lh-nav a:first-child {
  border-left: 0;
}

.lh-nav-icon {
  display: inline-flex;
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.lh-nav-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent-plume-text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The comp's Beta Access pill: gold outline, a lock, and an arrow. */
.lh-beta {
  gap: 0.5rem;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--accent-gold-text);
  border-radius: 999px;
  color: var(--accent-gold-text);
}

.lh-beta-arrow {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------ the quote, drawn inline
 *
 * The mark sat on a line of its own above the quote -- an orphan, which is what
 * the governor saw. The comps set it beside the first line, hanging into the
 * left margin the way a printed pull quote does.
 */
.lh-quote {
  position: relative;
  padding-left: 2.6rem;
}

.lh-quote-mark {
  position: absolute;
  left: 0.6rem;
  top: 0.1rem;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent-gold-text);
  opacity: 0.75;
}

/* The attribution and its note are two facts, and they are drawn as two. This
   is the styled half of what the gate now asserts as geometry. */
.lh-quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* ---------------------------------------------------------- the footer strip
 *
 * Four facts with a hairline between them, as every comp draws it, and running
 * the full width of the page rather than stopping at the reading measure.
 */
.lh-footer-strip > li + li {
  border-left: 1px solid var(--surface-float);
  padding-left: clamp(1rem, 2vw, 2.4rem);
}

/* =========================================================== the voice pass
 *
 * PROJECT_RECORD 59. The sections the voice pass added — the two format
 * sellers, the value ladder, the current-build block, the third-party notices —
 * name classes, and a class the markup names and the stylesheet never defines
 * is a defect this project has already had once (PROJECT_RECORD 49.8 found
 * three of them at a stroke). Every one below exists because a page uses it.
 *
 * NO COLOUR IS CHOSEN HERE. Same rule as the rest of this file: every value is
 * a token out of brand/tokens.json, so nothing on this site is a colour
 * somebody picked in a stylesheet.
 */

/* A row of feature chips under a photograph. They name things the room really
 * draws — Can-I-Wait, Hard stop, Room pulse — and they are LABELS rather than
 * links, so nothing here is styled to look pressable. */
.lh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.lh-chip {
  display: inline-block;
  border: 1px solid var(--surface-float);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem; /* 12px — above the seal's 11px floor */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  background: var(--surface-raised);
  white-space: nowrap;
}

/* The one sentence a seller section is built around. It is a PULL QUOTE and
 * never a heading: the heading above it is the claim, this is the question the
 * reader is already asking. */
.lh-pull {
  margin: 1.4rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent-gold-deep);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--accent-gold-text);
  font-weight: 600;
}

/* The auction value ladder: four rungs, each a term the war room actually
 * draws on its own card. */
.lh-ladder {
  margin: 1.6rem 0 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-base);
}

.lh-ladder dt {
  padding: 0.9rem 1.2rem 0.2rem;
  font-weight: 600;
  color: var(--accent-gold-text);
  letter-spacing: 0.02em;
}

.lh-ladder dd {
  margin: 0;
  padding: 0 1.2rem 0.95rem;
  color: var(--ink-secondary);
  border-bottom: 1px solid var(--surface-float);
}

.lh-ladder dd:last-of-type {
  border-bottom: 0;
}

/* The second line on a night card — a subline or a single link, quieter than
 * the paragraph above it and never a second paragraph competing with it. */
.lh-card-sub {
  margin-top: 0.6rem;
  font-size: 0.875rem; /* 14px */
  color: var(--ink-muted);
}

.lh-card-sub a {
  color: var(--accent-gold-text);
}

/* Snake and auction stated side by side, in the reader's own terms. */
.lh-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}

.lh-pair > p {
  margin: 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--surface-float);
  border-left: 3px solid var(--accent-gold-deep);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--ink-secondary);
}

.lh-pair strong {
  color: var(--ink-primary);
}

/* The current build, stated as a block rather than buried in a table. */
.lh-current-build {
  margin-top: 1.8rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  background: var(--surface-raised);
}

.lh-current-build h2,
.lh-current-build h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.lh-current-build p {
  margin: 0.35rem 0;
}

.lh-current-build code {
  word-break: break-all;
}

/* A command somebody is meant to type. Block, monospaced, and selectable as
 * one thing — a checksum instruction split across a wrap is an instruction
 * somebody gets wrong. */
.lh-command {
  display: block;
  padding: 0.8rem 1rem;
  border: 1px solid var(--surface-float);
  border-radius: 10px;
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  overflow-x: auto;
  white-space: pre;
}

/* A split where one side is words and the other is a photograph. */
.lh-split-figure {
  align-items: center;
}

.lh-split-words > :first-child {
  margin-top: 0;
}

/* Three routes rather than four (PROJECT_RECORD 59). */
.lh-cards-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  overflow: hidden;
}

.lh-cards-three > .lh-card {
  border-left: 1px solid var(--surface-float);
}

.lh-cards-three > .lh-card:first-child {
  border-left: 0;
}

/* The line that closes an audience lane. */
.lh-audience-close {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--accent-gold-text);
}

.lh-feedback-routes {
  flex-wrap: wrap;
}

.lh-beta-spec {
  margin-top: 1.2rem;
}

/* ------------------------------------------------- the third-party notices
 *
 * A licence is somebody else's words and is drawn as such: a preformatted block
 * that scrolls inside its own box rather than wrapping a legal instrument into
 * a shape its author did not choose. It is long on purpose.
 */
.lh-components {
  display: grid;
  gap: 1rem;
  margin-top: 1.8rem;
}

.lh-component {
  border: 1px solid var(--surface-float);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  background: var(--surface-raised);
}

.lh-component h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.lh-component-name {
  color: var(--ink-primary);
}

.lh-component-version {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-weight: 400;
}

.lh-component-what {
  margin: 0 0 0.6rem;
  color: var(--ink-secondary);
}

.lh-component-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
}

.lh-licence-tag {
  display: inline-block;
  border: 1px solid var(--accent-gold-deep);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--accent-gold-text);
  white-space: nowrap;
}

.lh-licence {
  margin: 0;
  max-height: 22rem;
  overflow: auto;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--surface-float);
  border-radius: 10px;
  background: var(--surface-base);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* A component with no text to reproduce says so IN THE PLACE THE TEXT WOULD
 * HAVE GONE, because an empty box reads exactly like a component that has no
 * licence at all. */
.lh-licence-gap {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--surface-float);
  border-radius: 10px;
}

@media (max-width: 900px) {
  .lh-cards-three {
    grid-template-columns: 1fr;
  }

  .lh-cards-three > .lh-card {
    border-left: 0;
    border-top: 1px solid var(--surface-float);
  }

  .lh-cards-three > .lh-card:first-child {
    border-top: 0;
  }
}

/* ------------------------------------------------------------- the narrow end
 *
 * Below the hero's two-column width the band would crop the eagle to a wing, so
 * it steps back to a top-anchored cover and the words take the whole column.
 * The floor here is a phone, which the comps do not draw at all.
 */
@media (max-width: 900px) {
  .lh-hero,
  .lh-page-hero {
    min-height: 0;
    padding-top: clamp(2rem, 8vw, 3.5rem);
  }

  .lh-hero-art[data-band] {
    height: clamp(240px, 58vw, 420px);
    background-size: cover;
    background-position: 62% top;
  }

  .lh-hero-art[data-band]::after {
    background:
      linear-gradient(to bottom, transparent 0%, var(--surface-base) 82%),
      linear-gradient(100deg, var(--surface-base) 0%, transparent 62%);
  }

  .lh-nav a {
    border-left: 0;
    padding: 0.35rem 0.6rem;
  }

  .lh-subhead {
    max-width: none;
  }
}