/* ===========================================================================
   Stadence — web design system

   A direct port of the iOS register. Values are lifted from, and must stay in
   sync with, the app source:
     CollegeFootballMob/DesignSystem/Theme.swift          (color, spacing, radius, type)
     CollegeFootballMob/DesignSystem/MeshWash.swift       (the off-white mesh)
     CollegeFootballMob/DesignSystem/ViewModifiers.swift  (card, segmented control)
     CollegeFootballMob/Components/ChalkMotifs.swift      (hash rule, underline)

   Dark only, on purpose: the app has no light mode, so neither does the site.
   =========================================================================== */

@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Regular.ttf") format("truetype");   font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Medium.ttf") format("truetype");    font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-SemiBold.ttf") format("truetype");  font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Bold.ttf") format("truetype");      font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Black.ttf") format("truetype");     font-weight: 900; font-display: swap; }
@font-face { font-family: "Graduate"; src: url("/assets/fonts/Graduate-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;

  /* Theme.Color — the ground is a lifted dark gray, not black, so accent
     washes dissolve into it instead of hitting a near-black wall. */
  --bg:              #191A21;
  --bg-rgb:          25, 26, 33;  /* same value as --bg, as r,g,b — lets a
                                      gradient fade to a *transparent version of
                                      the ground* instead of to the generic
                                      "transparent" keyword, which browsers
                                      interpolate through black and produces a
                                      visible muddy band partway through the fade. */
  --surface:         #1D1E25;
  --surface-elev:    #24252D;
  --card:            #1E1F26;
  --card-elev:       #24252D;
  --fill:            rgba(255,255,255,.06);
  --separator:       rgba(255,255,255,.08);
  --hairline:        rgba(255,255,255,.06);

  --text:            #FFFFFF;
  --text-2:          rgba(255,255,255,.72);
  --text-3:          rgba(255,255,255,.55);

  /* Semantic partition — these do not trade places.
     brand = chrome. accent = scoring/positive only. live = scarlet. */
  --brand:           #4C9CFF;
  --accent:          #2FD45E;
  --live:            #E10600;
  --gold:            #F0B23C;

  /* Theme.Spacing — 4pt grid */
  --s-xxs: .125rem; --s-xs: .25rem;  --s-sm: .5rem;   --s-md: .75rem;
  --s-lg:  1rem;    --s-xl: 1.25rem; --s-xxl: 1.75rem; --s-xxxl: 2.5rem;

  /* Theme.Radius */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 100px;

  --wrap: 68rem;
  --nav-h: 4.25rem;
}

/* ---------- The mesh wash ---------------------------------------------------
   MeshWash.swift is a 3x3 MeshGradient of nine muted sand/cream/blush/lavender
   values, reproduced as stacked radial gradients at the same control points.
   Deliberately desaturated — a material, not a rainbow — and luminous enough
   that BLACK text sits on it. The app's only warm surface, and therefore its
   only "on" state: primary CTAs, the selected segment, icon chips.            */

.mesh {
  background-color: #DCCFD4;
  background-image:
    radial-gradient(90% 90% at   0%   0%, #E8DCCB 0%, rgba(232,220,203,0) 70%),
    radial-gradient(80% 80% at  50%   0%, #E4D3D3 0%, rgba(228,211,211,0) 70%),
    radial-gradient(90% 90% at 100%   0%, #DCCBD8 0%, rgba(220,203,216,0) 70%),
    radial-gradient(80% 90% at   0%  50%, #EDE0CD 0%, rgba(237,224,205,0) 70%),
    radial-gradient(70% 70% at  55%  42%, #DCCFD4 0%, rgba(220,207,212,0) 70%),
    radial-gradient(80% 90% at 100%  50%, #CBC6D9 0%, rgba(203,198,217,0) 70%),
    radial-gradient(90% 90% at   0% 100%, #E0D2BE 0%, rgba(224,210,190,0) 70%),
    radial-gradient(80% 80% at  45% 100%, #D2C4CC 0%, rgba(210,196,204,0) 70%),
    radial-gradient(90% 90% at 100% 100%, #C4C2D6 0%, rgba(196,194,214,0) 70%);
}

/* ---------- Reset --------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
/* Reserve the scrollbar's width on every page. Without this, moving from a
   long page (scrollbar present) to a short one (no scrollbar) widens the
   viewport by the scrollbar's width and the whole layout — masthead included —
   jumps sideways. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
       background: var(--fill); padding: .1em .35em; border-radius: 5px; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-xl); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--card-elev); color: var(--text);
  padding: var(--s-md) var(--s-lg); border-radius: var(--r-sm);
}
.skip-link:focus { left: var(--s-lg); top: var(--s-lg); }

/* ---------- Typography ------------------------------------------------------
   Graduate is rationed: wordmark, screen titles, section titles, numerals.
   Everything else is Inter. clamp() so the page scales fluidly — the one place
   the web build improves on the app, which truncates at accessibility sizes.  */

.display {
  font-family: "Graduate", "Inter", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
}

.kicker {
  font-size: .625rem; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--s-xs);
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.125rem); }
h3 { font-size: clamp(1.0625rem, 2vw, 1.25rem); }
p  { margin: 0 0 var(--s-lg); color: var(--text-2); }
.lede { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--text-2); }

/* ---------- Chalk motifs ----------------------------------------------------
   ChalkMotifs.swift draws these as field markings: paired hash marks at 7pt
   spacing, and the goal-line stripe.                                          */

.chalk-rule {
  flex: 1; height: 7px; min-width: 1.5rem; align-self: center;
  background-image: repeating-linear-gradient(
    to right, rgba(255,255,255,.16) 0 1px, transparent 1px 7px);
}

.chalk-underline {
  width: 44px; height: 3px; border-radius: 2px; margin: var(--s-lg) 0;
  background: linear-gradient(to right,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.8) 100%);
}

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

.section-head { display: flex; align-items: baseline; gap: var(--s-md); margin-bottom: var(--s-lg); }
.section-head .title { font-size: clamp(1.125rem, 2.4vw, 1.5rem); white-space: nowrap; }
.section-head .count { font-family: "Graduate", serif; color: var(--text-3); font-size: .875rem; }
.section-sub { color: var(--text-3); font-size: .875rem; margin: -.5rem 0 var(--s-xl); }

/* ---------- Card ------------------------------------------------------------
   CardSurface: solid fill + a hairline grading white .10 -> .02 top to bottom.
   Separation by value and edge, never by shadow.                              */

.card { position: relative; background: var(--card); border-radius: var(--r-lg); padding: var(--s-xl); }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; padding: 1px;
  background: linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.02));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.card.elevated { background: var(--card-elev); }
.card.hero { background: var(--card-elev); padding: var(--s-xxl); }
.card.hero::after { background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.03)); }

/* ---------- Buttons ---------------------------------------------------------
   The hero CTA is the mesh with black heavy text — WashCapsuleLabel.
   PressableStyle's 0.985 scale becomes :active.                               */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8125rem 1.5rem; border: 0; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), filter .18s ease;
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn:active { transform: scale(.985); filter: brightness(.97); }
.btn-primary { color: rgba(0,0,0,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.btn-secondary { color: var(--text); background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.btn-secondary:hover { background: var(--fill); }

/* ---------- Icon chip — WashIconChip, a varsity patch --------------------- */

.chip {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 30%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  color: #14151a;
}
.chip .glyph, .chip svg { width: 56%; height: 56%; }
.glyph { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor;
         stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Marketing site chrome ------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(25,26,33,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap { min-height: var(--nav-h); display: flex; align-items: center; gap: var(--s-lg); }
.wordmark { display: flex; align-items: center; }
.wordmark img { height: 2rem; width: auto; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.site-nav a { padding: .4375rem .875rem; border-radius: var(--r-pill);
              color: var(--text-2); font-size: .8125rem; font-weight: 600; }
.site-nav a:hover { color: var(--text); background: var(--fill); text-decoration: none; }
.site-nav a[aria-current="page"] { color: rgba(0,0,0,.85); font-weight: 800; }

/* ---------- Hero ------------------------------------------------------------ */

/* padding-block, never the `padding` shorthand: these classes are applied
   alongside `.wrap`, and a shorthand would reset its inline gutter to 0. */
.hero { padding-block: clamp(3rem, 9vw, 6rem) clamp(2rem, 5vw, 3.5rem); }
.hero-grid { display: grid; gap: clamp(2rem, 6vw, 4rem); grid-template-columns: 1fr; align-items: center; }
.hero h1 { letter-spacing: -.02em; }
.hero .lede { max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-md); margin-top: var(--s-xl); }
.hero-note { font-size: .8125rem; color: var(--text-3); margin-top: var(--s-lg); }

.device {
  position: relative; margin-inline: auto; width: min(19rem, 78vw);
  border-radius: 2.75rem; padding: .5rem;
  background: linear-gradient(160deg, #34353E, #17181E 60%);
  box-shadow: 0 2.5rem 5rem rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.09);
}
.device img { border-radius: 2.3rem; }

/* ---------- Numbered rows --------------------------------------------------- */

.rows { border-top: 1px solid var(--separator); }
.row { display: flex; align-items: flex-start; gap: var(--s-lg);
       padding: var(--s-xl) var(--s-xs); border-bottom: 1px solid var(--separator); color: inherit; }
a.row:hover { text-decoration: none; background: rgba(255,255,255,.025); }
.row .num { font-family: "Graduate", serif; font-size: .8125rem; color: var(--text-3);
            padding-top: .2rem; min-width: 1.75rem; }
.row .row-body { flex: 1; min-width: 0; }
.row .row-body strong { display: block; font-size: 1.0625rem; font-weight: 600; }
.row .row-body small { display: block; color: var(--text-3); font-size: .875rem; margin-top: .125rem; }
.row .arrow { color: var(--text-3); align-self: center; }

/* ---------- Grids ----------------------------------------------------------- */

.grid { display: grid; gap: var(--s-lg); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

.feature { display: flex; flex-direction: column; gap: var(--s-md); }
.feature h3 { font-size: 1.0625rem; }
.feature p { margin: 0; font-size: .9375rem; color: var(--text-3); }

/* Five tabs, one row on desktop — the grid echoes the app's tab bar. */
.shots { display: grid; gap: var(--s-lg); grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.shot { display: flex; flex-direction: column; gap: var(--s-md); }
.shot .frame { border-radius: var(--r-xl); overflow: hidden; background: var(--card);
               box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.shot .frame img { width: 100%; }
.shot .label { font-family: "Graduate", serif; text-transform: uppercase; font-size: .9375rem; }
.shot .desc { font-size: .8125rem; color: var(--text-3); margin: 0; }

/* ---------- Bands / documents ------------------------------------------------ */

.band { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.band-inner { text-align: center; max-width: 44rem; margin-inline: auto; }
.band-inner .chalk-underline { margin-inline: auto; }
.band-copy { font-size: clamp(1.125rem, 2.6vw, 1.5rem); color: var(--text); line-height: 1.5; }

.doc-shell { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr;
             padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem); }
.doc-aside { color: var(--text-3); font-size: .8125rem; }
.doc-aside .updated { margin: 0 0 var(--s-md); }
.doc { max-width: 42rem; }
.doc h1 { margin-bottom: var(--s-lg); }
.doc h2 { font-family: "Graduate", serif; font-weight: 400; text-transform: uppercase;
          letter-spacing: .02em; font-size: 1.25rem; margin: var(--s-xxl) 0 var(--s-md); }
.doc ul { margin: 0 0 var(--s-lg); padding-left: 1.15rem; color: var(--text-2); }
.doc li { margin-bottom: var(--s-sm); }
.doc .inline-links { display: flex; flex-wrap: wrap; gap: var(--s-lg); margin-top: var(--s-xxl); font-size: .875rem; }

.callout { display: flex; gap: var(--s-lg); align-items: flex-start; }
.callout .callout-body { flex: 1; min-width: 0; }
.callout .callout-body p:last-child { margin-bottom: 0; }
.email { font-family: "Graduate", serif; font-size: clamp(1.125rem, 3.4vw, 1.625rem);
         color: var(--text); word-break: break-word; display: inline-block; margin-bottom: var(--s-md); }

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

.site-footer { border-top: 1px solid var(--separator); padding: var(--s-xxl) 0 var(--s-xl); margin-top: var(--s-xxxl); }
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--s-xl); justify-content: space-between; align-items: flex-start; }
.footer-grid p { margin: var(--s-sm) 0 0; color: var(--text-3); font-size: .875rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-lg); }
.footer-links a { color: var(--text-2); font-size: .875rem; }
.legal-note { margin-top: var(--s-xl); color: var(--text-3); font-size: .75rem; line-height: 1.5; }

/* ---------- Responsive -------------------------------------------------------- */

/* Narrow: the nav drops to its own row and becomes a horizontal rail rather than
   wrapping to two ragged lines — the app's chip-rail idiom, trailing fade included. */
@media (max-width: 34rem) {
  .site-header .wrap { flex-direction: column; align-items: stretch; gap: var(--s-sm); padding-block: var(--s-md); }
  .site-nav { margin-left: 0; overflow-x: auto; scrollbar-width: none;
              mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; }
  .hero-actions .btn { flex: 1 1 auto; }
}

@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
  .doc-shell { grid-template-columns: 12rem 1fr; }
  .doc-aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; }
}

.scroll-x { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}