/* The dark ink brand panel, ported from static/login.css's .login-brand
 * (vaultapp/templates/login.html) - Colin's own assessment, 2026-10-05:
 * "login.html is the best-designed page in the product and the website
 * looks like a different company made it." Same rules, same values,
 * renamed from .login-* to .brand-* since this is reused outside the
 * login page itself - the login page's own classes stay exactly as they
 * are in static/login.css; this is a parallel copy for the site that
 * doesn't share a template engine with the app.
 *
 * Every page opens with this shell now (2026-10-05, the one-vocabulary
 * pass): index.html, clubs.html and players.html carry the full
 * eyebrow/h1/sub/(pipeline), and contact.html the same shell without the
 * pipeline. One opening, not a bespoke one per page - a bare <h1> was
 * "the single biggest reason [a page] reads as a different site"
 * (Colin's own framing for why contact.html needed this too).
 *
 * Carries over, per the original instruction: the dark ink panel
 * itself, the mono letterspaced eyebrow (dropped on index.html alone,
 * 2026-10-06 revision - its job moved into that page's own headline),
 * the thesis with its emphasized span, the two quiet concentric rings
 * as the only ornament, and the pipeline strip - index.html's own
 * three steps (Coaching -> Evaluation -> Follow-up, cut from the
 * original four: "Record" is not a step, it's where the other three
 * land), the login page's own family-side thesis reused verbatim on
 * players.html, and no pipeline strip on players.html or contact.html
 * (docs/briefs/WEBSITE_COPY_FOUR_PAGES.md: it "does not belong"
 * there). */

/* BEGIN GENERATED BRAND-PANEL TOKENS - see website/generate_shared_css.py, do not edit by hand */
:root {
  --brand-panel-ink-text: #E7ECF5;
  --brand-panel-eyebrow: #9FB3D6;
  --brand-panel-emphasis: #8FB0FF;
  --brand-panel-sub: #B7C3DA;
  --brand-panel-pipeline-text: #C7D2E6;
  --brand-panel-pipeline-arrow: #6E85AD;
  --brand-panel-ring-strong: rgba(231, 236, 245, 0.14);
  --brand-panel-ring-soft: rgba(231, 236, 245, 0.10);
  --brand-panel-pipeline-border: rgba(231, 236, 245, 0.22);
  --brand-panel-thesis-max: 40px;
  --brand-panel-pipeline-margin-top: 32px;
  --brand-panel-thesis-mobile: 26px;
  --brand-panel-eyebrow-margin-top: 28px;
  --brand-panel-sub-font-size: 15px;
  --brand-panel-pipeline-font-size: 11.5px;
}
/* END GENERATED BRAND-PANEL TOKENS */

.brand-panel {
  background: var(--vault-color-ink);
  color: var(--brand-panel-ink-text);
  position: relative;
  overflow: hidden;
  /* Full-bleed (2026-10-06, after 7b952d72's shell/measure split made
     the panel read as "a card floating in grey" past ~1120px wide):
     this is the same break-out idiom used to escape any constrained
     ancestor - 100vw cancels main's own max-width for this one
     element, and the negative left margin re-centers it against the
     viewport instead of against main's narrower box. The band always
     runs edge to edge; what reads inside it is capped one level in,
     by .brand-panel__inner below, the same way header.site-header and
     footer.site-footer already paint full width while their own
     __inner holds the shell-capped, centred content - this just
     brings the panel in line with a pattern the page already used. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* The component's own spacing before whatever follows it (2026-10-06):
     every one of its four callers repeated this as an inline
     style="margin-bottom:32px" - the token system existing is worth
     nothing if the newest code on the smallest surface in the repo
     doesn't use it. One rule, here, not four copies of the same pixel
     value on each caller. */
  margin-bottom: var(--vault-space-32);
}

/* A single, quiet mark - not decoration for its own sake: the ring stands
 * for the record, unbroken as it moves club to club (login.css's own
 * comment, identical reasoning here). */
.brand-panel::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid var(--brand-panel-ring-strong);
}
.brand-panel::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -160px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid var(--brand-panel-ring-soft);
}

/* Hero art (2026-10-14). Bottom-aligned so the figures stand on the
 * band's own edge rather than floating in it. The scrim fades the ink
 * across the image's left third: .brand-thesis deliberately fills the
 * shell width (see __inner below), so headline and art share horizontal
 * space and the gradient is what keeps the type readable instead of
 * narrowing a line that was widened on purpose. Hidden below 900px,
 * where the text would have to run over the figures to fit. */
/* The headline earns its own contrast (2026-10-14): a full-height scrim
 * strong enough to protect one line of display type also flattened the
 * left-hand figure into the band. The shadow does the legibility work
 * where the type actually is, so the art keeps its luminance. */
.brand-panel .brand-thesis {
  text-shadow: 0 1px 2px rgba(11, 31, 58, 0.95), 0 2px 24px rgba(11, 31, 58, 0.85), 0 0 56px rgba(11, 31, 58, 0.7);
}

.brand-panel__art {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: min(48%, 580px);
  pointer-events: none;
}
.brand-panel__art img {
  display: block;
  width: 100%;
  height: auto;
}
.brand-panel__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11, 31, 58, 0.92) 0%, rgba(11, 31, 58, 0.34) 18%, rgba(11, 31, 58, 0) 38%);
}
@media (max-width: 900px) {
  .brand-panel__art { display: none; }
}

.brand-panel__inner {
  position: relative;
  z-index: 1;
  /* Capped to the shell, not to a reading measure (2026-10-06, Colin's
     own correction): this used to be a fixed 640px, which is a
     paragraph's width, not a headline's - "nobody reads a display
     line the way they read a paragraph." The eyebrow, h1 and pipeline
     strip below now fill this box at whatever width the shell itself
     is; only .brand-thesis__sub keeps a narrower measure, set
     directly on that one paragraph rather than inherited from here. */
  max-width: var(--site-shell-width);
  margin: 0 auto;
  /* Horizontal padding is --site-shell-inset (assets/style.css), not a
     literal 48px, as of 2026-10-06: "the top isn't centered but the
     bottom is" (Colin) - this box and main's own content box now read
     their left padding from the same variable, so the hero and the
     body text under it share one left edge instead of each centring a
     different-width box independently. Top/bottom stays a literal
     56px - vertical rhythm, not part of this. */
  padding: 56px var(--site-shell-inset);
}

/* .brand-wordmark retired (2026-10-06, found during this pass' own
 * orphan audit): never had a caller on any page since this file was
 * first written - the header wordmark sits on the light surface above
 * the panel, not inside it, so .site-header__wordmark (assets/
 * style.css) was always the real class in use. */

/* .eyebrow (2026-10-05, the one-vocabulary pass): moved here in full
 * from assets/style.css, which used to carry a light-surface base rule
 * for this class with brand-panel overriding just its colour and
 * margin. Every eyebrow on the site now renders inside .brand-panel -
 * every page opens with the same shell - so the light-surface version
 * had no caller left; one definition here, in the file that owns its
 * only real context, rather than a base in one file and an override
 * in another for a single concept. */
.eyebrow {
  display: block;
  font-family: var(--vault-type-eyebrow-family);
  font-weight: var(--vault-type-eyebrow-weight);
  font-size: var(--vault-type-eyebrow-size-mobile);
  letter-spacing: var(--vault-type-eyebrow-letter-spacing-mobile);
  text-transform: var(--vault-type-eyebrow-transform);
  color: var(--brand-panel-eyebrow);
  margin: var(--brand-panel-eyebrow-margin-top) 0 14px;
}
@media (min-width: 768px) {
  .eyebrow {
    font-size: var(--vault-type-eyebrow-size-desktop);
    letter-spacing: var(--vault-type-eyebrow-letter-spacing-desktop);
  }
}

/* Jamie's Vault1 lockup (`C111`, received 2026-11-12), in the band the old one
 * was drawn for.
 *
 * **The metal version, not the flat one, because this band is dark ink.**
 * `docs/brand/vault1/README.md` measured it and so did I, at 128px and 64px on
 * this exact background: the flat lockup's "ault1" is dark navy on dark navy
 * and all but disappears, where the metal one's chrome outline carries it. The
 * flat lockup is the primary on light surfaces, which this is not - and the
 * brand README's own Use column says the same thing from the other side: metal
 * for the marketing hero, which is what this band is.
 *
 * **No crop any more.** The old asset carried a tagline and 29px of transparent
 * padding under it, so this rule cropped 196/240 of the artwork and compensated
 * the margin for what the crop removed. Jamie's PNG is the lockup alone, edge
 * to edge, so the height does all of it and the margin is the gap it looks
 * like.
 *
 * **"SPORTS" does not survive at this size**, as the old lockup's tagline did
 * not: it is the smallest band of a three-part lockup in a 128px box. The
 * compact lockup asked of Jamie (that README, item 4) is what fixes it, and
 * nothing here should grow to chase it - a lockup big enough to read "SPORTS"
 * outweighs the headline under it. */
.brand-panel__logo {
  display: block;
  height: 128px;
  width: auto;
  margin: 0 0 30px;
}

.brand-thesis {
  font-family: var(--vault-type-page-title-family);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, var(--brand-panel-thesis-max));
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 18px;
  color: var(--brand-panel-ink-text);
}
.brand-thesis em {
  font-style: normal;
  color: var(--brand-panel-emphasis);
}
.brand-thesis__sub {
  font-size: var(--brand-panel-sub-font-size);
  line-height: 1.6;
  color: var(--brand-panel-sub);
  max-width: 46ch;
  margin: 0;
}

.brand-pipeline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--brand-panel-pipeline-margin-top);
  font-family: var(--vault-type-eyebrow-family);
  font-size: var(--brand-panel-pipeline-font-size);
  letter-spacing: 0.03em;
  color: var(--brand-panel-pipeline-text);
}
.brand-pipeline__step {
  padding: 7px 12px;
  border: 1px solid var(--brand-panel-pipeline-border);
  border-radius: var(--vault-radius-pill);
  white-space: nowrap;
}
.brand-pipeline__arrow {
  padding: 0 8px;
  color: var(--brand-panel-pipeline-arrow);
}

/* .brand-pipeline__caption retired (2026-10-06, the copy revision that
 * removed index.html's "All of it kept in the athlete's Vault" line
 * under the strip - the sub paragraph already says the Vault keeps all
 * of it, and a caption repeating that was redundant for the same
 * reason the caption itself once argued against a fourth pill). Zero
 * callers left. */

@media (max-width: 640px) {
  .brand-panel__inner {
    /* Horizontal component is --site-shell-inset's own mobile value
       (24px) spelled out via the variable, not a second literal 24px
       that could drift from it - same reasoning as the desktop rule
       above. */
    padding: 32px var(--site-shell-inset) 36px;
  }
  .brand-panel::before, .brand-panel::after {
    display: none;
  }
  .brand-panel__logo {
    /* 112px -> 181px wide, inside the 342px content box a 390px viewport
       leaves after --site-shell-inset. The 26px headline here has a ~19px cap
       height and the lockup's wordmark lands at 21.5px, holding the same
       relationship to it that the desktop pair has. */
    height: 92px;      /* 112 x 196/240, matching the crop above */
    margin-bottom: 22px;
  }
  .brand-thesis {
    font-size: var(--brand-panel-thesis-mobile);
  }
}


/* The site header was removed on 2026-10-07 (Colin): its small text wordmark
 * sat directly above a logo that spells the name in full, and the duplication
 * was the reason the header existed at all. Its three links moved into the
 * brand panel, right-aligned to the same shell edge the header used.
 *
 * On the home page the nav sits alone above the large lockup. On the other
 * three pages there is no large lockup, so a small one sits opposite the nav -
 * without it those pages carry the name nowhere on screen.
 *
 * **64px, raised from 46px on 2026-11-12 with Jamie's lockup** (`C111`). The
 * reasoning is the old comment's, with the number measured again on the new
 * artwork: this lockup is 2:1, so 46px tall is ~92px wide and "Vault1" inside
 * it renders as a smudge - rendered at both and looked at, which is the only
 * way this question is answerable. At 64px the name reads and the mark still
 * sits level with the nav links beside it rather than over them.
 *
 * It is still a stopgap. A compact lockup without "SPORTS" is item 4 of what
 * `docs/brand/vault1/README.md` asks of Jamie; that is a new design artifact
 * rather than a re-export, because the emblem doubles as the V in "Vault". */
.brand-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 28px;
  margin-bottom: 34px;
}
.brand-nav a {
  color: #AFC3DA;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  /* Found verifying login.html at 390px (2026-10-07): a fourth link
     left no room for "For clubs"/"For players" to stay on one line
     each, and with no flex-wrap on the parent, the items shrank
     instead of wrapping - "For" and "clubs" broke onto separate lines
     mid-item, inside a single link. flex-wrap above now lets whole
     items drop to a second row instead; nowrap here is what makes an
     item drop as a unit rather than its own text wrapping first. */
  white-space: nowrap;
}
.brand-nav a:hover { color: #FFFFFF; }
.brand-nav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: #2F6FB8; }

.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.brand-bar .brand-nav { margin-bottom: 0; }

.brand-panel__logo--compact { height: 64px; margin: 0; }

/* The logo is the way home (2026-10-07). Removing the site header removed its
 * "Vault365" link, which was the only route back to the home page from the
 * three inner pages - the footer has no home link either. Found by Colin on
 * the deployed site, not by a test. */
.brand-home {
  display: inline-flex;
  line-height: 0;
  border-radius: 4px;
  text-decoration: none;
}
.brand-home:focus-visible { outline: 2px solid #4F9BE8; outline-offset: 4px; }

@media (max-width: 640px) {
  /* 6px, not the 18px shared with index.html's own full-width nav
     (measured 2026-10-20): on clubs.html/players.html/contact.html/
     login.html/404.html the nav sits beside the compact logo inside
     .brand-bar, not alone - 342px of content box minus the logo's own
     75px leaves 253px for four items that measure 224px of text at
     18px gap needs 278px, so "Log in" wrapped alone onto its own line
     (confirmed by bounding-box measurement, not assumed). At 6px the
     same four items measure 242px, fitting on one line with 11px to
     spare. index.html's nav has the full 342px to itself either way,
     so this only tightens an already-comfortable fit there. */
  .brand-nav { gap: 6px; margin-bottom: 26px; font-size: 14px; }
  .brand-bar { gap: 14px; margin-bottom: 26px; }
  /* The same proportion at 390px as 64px holds at 1320. */
  .brand-panel__logo--compact { height: 52px; }
}