/* 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);
  }
}

/* The partner's lockup, in the band it was drawn for (2026-10-07).
 *
 * 156px is measured, not chosen by eye. The asset's own internal bands, at its
 * native 240px height: mark+swoosh 116px (48%), wordmark 46px (19%), SPORTS bar
 * 29px (12%), tagline 9px (3.75%). At 156px the wordmark inside the lockup
 * lands at ~30px, which is the cap height of the 40px .brand-thesis headline
 * below it - present and equal in weight, not competing with it. Going larger
 * makes the lockup's own wordmark outweigh the headline and says "Vault365"
 * twice at display size, once in the header and once here.
 *
 * The tagline does not survive at this size (5.8px) and is texture, not text -
 * see docs/FINDINGS.md: a legible tagline needs a ~213px box, whose wordmark
 * (41px) then outweighs the headline, and which at 390px is 343px wide inside a
 * 342px content box. That is a property of a four-part lockup, not of this
 * placement, and the fix is a mark+wordmark variant from the partner.
 *
 * margin-bottom is 12px, not the ~30px the gap wants, because the asset carries
 * 29px of transparent space below the tagline at native size - 19px at 156px -
 * so 12px of margin reads as ~31px of air. (Its top and right edges are flush,
 * so no equivalent compensation applies there.) */
.brand-panel__logo {
  display: block;
  height: 128px;
  width: auto;
  /* Cropped to the bottom of the SPORTS bar (2026-10-07). The asset's last
     44px are the "UNLOCK YOUR POTENTIAL" tagline (9px of ink) plus 29px of
     transparent padding. The tagline is #09234F on this panel's #0B1F3A -
     1.07:1, against WCAG's 4.5:1 floor - and renders ~6px tall here, so it
     reads as a smear rather than as text. 196/240 of the artwork is kept;
     128px = 156 x 196/240, which holds the emblem at the size it had before
     the crop. margin-bottom rises from 12px to 30px because the 29px of
     built-in padding went with the crop. */
  aspect-ratio: 387 / 196;
  object-fit: cover;
  object-position: top;
  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 "Vault365"
 * wordmark sat directly above a logo that says Vault365 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 no Vault365 anywhere on screen.
 *
 * 46px is the practical floor for this artwork and is close to it: the lockup
 * is roughly 2:1, so 46px tall is only ~91px wide and the wordmark inside is
 * near the edge of legibility. A horizontal version of the logo would hold the
 * same height in ~230px of width and fix it; that is a new design artifact,
 * not a re-export, because the emblem doubles as the V in "Vault". Until it
 * exists, this is deliberately the smallest the current lockup can go. */
.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: 46px; 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) {
  .brand-nav { gap: 18px; margin-bottom: 26px; font-size: 14px; }
  .brand-bar { gap: 14px; margin-bottom: 26px; }
  .brand-panel__logo--compact { height: 38px; }
}