/* Vault365 marketing/legal site — plain CSS, mobile-first, no framework.
 * Tokens come from tokens.css (loaded before this file on every page). */

* { box-sizing: border-box; }

/* The shell and the measure are two different decisions (2026-10-06,
 * after the live site read "squeezed in" on desktop - one variable,
 * main's old max-width: 720px, had been doing both jobs). The shell is
 * how wide the page's own frame runs - header, footer, main's outer
 * bound, and the brand-panel banner that fills whatever main's width
 * is. The measure is how wide a run of body text gets to be, and it
 * does not grow just because the shell did: it is set on the text
 * elements themselves (below), not inherited from main's width.
 * --site-measure-width stays near the old 720px reading width on
 * purpose; only --site-shell-width widens at desktop. */
:root {
  --site-shell-width: 720px;
  --site-measure-width: 680px;
}

@media (min-width: 768px) {
  :root {
    /* Fluid up to the cap, not a jump: at 768-1120px main still just
       fills the viewport (full-bleed, minus its own side padding), so
       there is no awkward in-between step right where this query
       fires. The cap only engages past 1120px, where it centers with
       margin either side rather than stretching the banner edge to
       edge. */
    --site-shell-width: 1120px;
  }
}

body {
  margin: 0;
  background: var(--vault-color-page);
  color: var(--vault-color-ink);
  font-family: var(--vault-type-body-family);
  font-weight: var(--vault-type-body-weight);
  font-size: var(--vault-type-body-size-mobile);
  line-height: var(--vault-type-body-line-height-mobile);
}

a { color: var(--vault-color-action); }

/* ---- Header / nav --------------------------------------------------- */

header.site-header {
  background: var(--vault-color-surface);
  border-bottom: 1px solid var(--vault-color-line);
}

.site-header__inner {
  max-width: var(--site-shell-width);
  margin: 0 auto;
  padding: var(--vault-space-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vault-space-16);
}

.site-header__wordmark {
  font-family: var(--vault-type-page-title-family);
  font-weight: 700;
  font-size: 19px;
  color: var(--vault-color-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
}

nav.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vault-space-16);
}

nav.site-nav a {
  color: var(--vault-color-ink-muted);
  text-decoration: none;
  font-size: var(--vault-type-secondary-size-mobile);
  font-weight: 600;
}

nav.site-nav a:hover,
nav.site-nav a[aria-current="page"] {
  color: var(--vault-color-action);
}

/* ---- Layout ----------------------------------------------------------- */

main {
  max-width: var(--site-shell-width);
  margin: 0 auto;
  padding: var(--vault-space-24) var(--vault-space-16) var(--vault-space-32);
}

section + section {
  margin-top: var(--vault-space-32);
}

/* The measure, applied to the text element itself so widening the
 * shell above never widens a paragraph with it. Scoped to <main> only
 * so it reaches every page's running prose - the five clubs.html/
 * players.html sections, contact.html's cards, 404.html's one line -
 * without touching .route-link__desc (a <span>, already constrained
 * by its own two-column grid) or .brand-thesis__sub (assets/brand.css
 * sets its own, narrower hero measure - a class selector beats this
 * element one regardless of source order). */
main p {
  max-width: var(--site-measure-width);
}

/* h1 has no bare rule here (2026-10-05, the one-vocabulary pass): every
 * page's <h1> is now .brand-thesis (assets/brand.css), inside the
 * brand-panel shell every page opens with. A bare h1{} rule with
 * nothing left to style is exactly the kind of orphaned CSS this pass
 * exists to remove. */

h2 {
  font-family: var(--vault-type-section-heading-family);
  font-weight: var(--vault-type-section-heading-weight);
  font-size: var(--vault-type-section-heading-size-mobile);
  line-height: var(--vault-type-section-heading-line-height);
  margin: 0 0 var(--vault-space-12);
}

/* The restrained accent for clubs.html/players.html's own five plain
 * <section>+h2+prose sections each (2026-10-06) - "plain h2 and prose
 * repeated five times is a wall." One strong field (the brand-panel
 * hero) already carries the page's visual weight; this is the quiet,
 * repeated device that gives the sections under it rhythm without a
 * second one - a short colour rule, not a box, not a background tint.
 * Scoped to a heading inside a <section> rather than every h2 on the
 * site: only these two pages' long-form sections have one. */
section h2 {
  border-left: 3px solid var(--vault-color-action);
  padding-left: var(--vault-space-12);
}

h3 {
  font-family: var(--vault-type-card-title-family);
  font-weight: var(--vault-type-card-title-weight);
  font-size: var(--vault-type-card-title-size-mobile);
  line-height: var(--vault-type-card-title-line-height);
  margin: var(--vault-space-24) 0 var(--vault-space-8);
}

p { margin: 0 0 var(--vault-space-12); }

/* .eyebrow moved to assets/brand.css (2026-10-05, the one-vocabulary
 * pass): every eyebrow on the site now renders inside .brand-panel,
 * which is a dark surface - the light-surface version that lived here
 * had no caller left to serve. One definition, in the file that owns
 * its only context, instead of a light base here and a dark override
 * there. */

.muted { color: var(--vault-color-ink-soft); }

/* ---- Cards -------------------------------------------------------------- */

.card {
  background: var(--vault-color-surface);
  border: 1px solid var(--vault-color-line);
  border-radius: var(--vault-radius-card);
  padding: var(--vault-space-16);
  /* Same measure as running prose (2026-10-06, the shell/measure
     split): contact.html's three cards hold one short line or two -
     left at the shell's own width they stretched into mostly-empty
     boxes once the shell widened at desktop. */
  max-width: var(--site-measure-width);
}

.card + .card { margin-top: var(--vault-space-16); }

/* .card-grid/.card-grid--2/.card-grid--3 and .card-action retired
 * (2026-10-06, the copy revision that moved index.html's two audience
 * routes from cards to text links - .route-link below): contact.html
 * is the only page with more than one .card now, and it already
 * stacks them with .card + .card above, needing no grid. Zero callers
 * left for any of the three. */

/* .hero retired (2026-10-05, the one-vocabulary pass, Colin's own
 * instruction): it was the old vocabulary's version of what
 * .brand-panel now does site-wide, and keeping both is what produced
 * the split look - one class, not two competing ones for the same
 * job. Its one caller (website/clubs.html) now opens with the same
 * brand-panel shell every other page does. */

/* ---- Route links (2026-10-06) -------------------------------------------
 * index.html's two audience routes, as text - not cards. Colin's own
 * framing for why the previous cards had to go: "the bottom two
 * sections look oddly disconnected and incongruous... blocky vs the
 * top which is simple, informative, and impactful." No border, no
 * background, no pill - the whole point is that this reads as the
 * same block as the panel above it, not a second visual language. */

.route-links {
  display: grid;
  gap: var(--vault-space-24);
  margin-top: var(--vault-space-32);
}

.route-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.route-link__label {
  display: block;
  font-family: var(--vault-type-page-title-family);
  font-weight: 700;
  font-size: 19px;
  color: var(--vault-color-action);
  margin-bottom: var(--vault-space-8);
}

.route-link:hover .route-link__label { text-decoration: underline; }

.route-link__desc {
  display: block;
  color: var(--vault-color-ink-muted);
  font-size: 15px;
  line-height: 1.55;
}

/* ---- Buttons ------------------------------------------------------------ */

.button {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--vault-radius-pill);
  font-family: var(--vault-type-button-label-family);
  font-weight: var(--vault-type-button-label-weight);
  font-size: var(--vault-type-button-label-size-mobile);
  text-decoration: none;
}

.button--primary {
  background: var(--vault-color-action);
  color: var(--vault-color-surface);
}

/* .button--secondary retired (2026-10-06): its one caller was
 * index.html's old "See the player side" link, gone with the cards
 * it belonged to. /clubs' own close is button--primary; nothing on
 * the site asks for the outlined treatment now. */

/* ---- Legal-document placeholders -------------------------------------- */

.tbd {
  display: inline;
  background: var(--vault-color-attention-tint);
  color: var(--vault-color-attention);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: var(--vault-type-secondary-size-mobile);
  font-weight: 600;
  white-space: nowrap;
}

.legal-notice {
  background: var(--vault-color-action-tint);
  border: 1px solid var(--vault-color-line);
  border-radius: var(--vault-radius-card);
  padding: var(--vault-space-16);
  margin-bottom: var(--vault-space-24);
}

.legal-notice p:last-child { margin-bottom: 0; }

ul, ol {
  padding-left: 20px;
  margin: 0 0 var(--vault-space-12);
}

li { margin-bottom: var(--vault-space-8); }

/* ---- Footer ------------------------------------------------------------ */

footer.site-footer {
  border-top: 1px solid var(--vault-color-line);
  margin-top: var(--vault-space-32);
}

.site-footer__inner {
  max-width: var(--site-shell-width);
  margin: 0 auto;
  padding: var(--vault-space-16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--vault-space-16);
  justify-content: space-between;
  font-size: var(--vault-type-secondary-size-mobile);
  color: var(--vault-color-ink-faint);
}

.site-footer__inner a {
  color: var(--vault-color-ink-soft);
}

/* ---- Desktop refinements (mobile is the default, this only adds) ------ */

@media (min-width: 768px) {
  body {
    font-size: var(--vault-type-body-size-desktop);
    line-height: var(--vault-type-body-line-height-desktop);
  }
  h2 { font-size: var(--vault-type-section-heading-size-desktop); }
  h3 { font-size: var(--vault-type-card-title-size-desktop); }
  .button { font-size: var(--vault-type-button-label-size-desktop); }
  .route-links { grid-template-columns: repeat(2, 1fr); gap: var(--vault-space-32); }
}