/* 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). */

.brand-panel {
  background: var(--vault-color-ink);
  color: #E7ECF5;
  position: relative;
  overflow: hidden;
  padding: 56px 48px;
  /* 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 rgba(231, 236, 245, 0.14);
}
.brand-panel::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -160px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(231, 236, 245, 0.10);
}

.brand-panel__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

/* .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: #9FB3D6;
  margin: 28px 0 14px;
}
@media (min-width: 768px) {
  .eyebrow {
    font-size: var(--vault-type-eyebrow-size-desktop);
    letter-spacing: var(--vault-type-eyebrow-letter-spacing-desktop);
  }
}

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

.brand-pipeline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 32px;
  font-family: var(--vault-type-eyebrow-family);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: #C7D2E6;
}
.brand-pipeline__step {
  padding: 7px 12px;
  border: 1px solid rgba(231, 236, 245, 0.22);
  border-radius: var(--vault-radius-pill);
  white-space: nowrap;
}
.brand-pipeline__arrow {
  padding: 0 8px;
  color: #6E85AD;
}

/* .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 {
    padding: 32px 24px 36px;
  }
  .brand-panel::before, .brand-panel::after {
    display: none;
  }
  .brand-thesis {
    font-size: 26px;
  }
}