/* The marketing site's look (D-13, R-265): the app's D-01 tokens (R-253),
   night on :root and day when the visitor's phone or computer is set to
   light, so the site follows the same setting the app does. Every page on
   orbitathletics.com links this file; a page's own <style> keeps only what
   is particular to it, and uses these names, never a colour literal.
   Barlow for everything people read, Barlow Semi Condensed for headings,
   numbers and small labels (R-365); Sora only in the wordmark beside the
   mark, which is part of the logo. */
:root{
  --bg:#07121E; --bg2:#0B1A2A; --card:#0F2133; --surface:#0F2133; --surface-2:#152B41;
  --glass:rgba(18,38,58,.42); --glass-card:rgba(18,38,58,.42);
  --glass-line:rgba(255,255,255,.14); --glass-hi:rgba(255,255,255,.16);
  --rim-a:rgba(255,255,255,.55); --rim-b:rgba(255,255,255,.18);
  --ink:#FAF3E6; --muted:#BAC6CF; --faint:#8E9DAA;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.16);
  --accent:#3DAE78; --accent-hi:#5CCB94; --accent-soft:rgba(61,174,120,.16); --accent-ink:#9BE4BE; --on-accent:#04170E;
  --right:#D2551C; --right-ink:#F0916A; --req:#FF5E57;
  --mint:#9BE4BE; --sky:#8FB8E8; --gold:#E5B96A; --planet:#1F5B3E;
  --mark-ring:#3DAE78; --mark-runner:#F3E9D8; --mark-sat:#9BE4BE;
  --field-1:rgba(61,174,120,.42); --field-2:rgba(78,134,196,.30); --field-3:rgba(31,91,62,.5);
  --wash:255 255 255; --shade:0 0 0; --shadow-c:rgba(0,0,0,.6);
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;
  --mono:var(--font-display);   /* small labels (the name kept from Plex Mono) */
  --wordmark:"Sora",system-ui,sans-serif;   /* "Orbit Athletics" beside the mark, nothing else */
  --blur:blur(28px) saturate(180%);
  --spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.22,1,.36,1);
  --tap:44px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#F5F2EA; --bg2:#ECE7DB; --card:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1EEE6;
    --glass:rgba(255,255,255,.62); --glass-card:rgba(255,255,255,.62);
    --glass-line:rgba(255,255,255,.9); --glass-hi:#FFFFFF;
    --rim-a:#FFFFFF; --rim-b:rgba(255,255,255,.7);
    --ink:#0B1A2A; --muted:#3D4D5A; --faint:#5F6D79;
    --line:rgba(11,26,42,.13); --line2:rgba(11,26,42,.2);
    --accent:#1F5B3E; --accent-hi:#2B7A54; --accent-soft:rgba(31,91,62,.12); --accent-ink:#1E7A4F; --on-accent:#F8F1E3;
    --right:#B4431A; --right-ink:#B4431A; --req:color-mix(in srgb,#FF5E57 78%,#0B1A2A);
    --mint:#1E7A4F; --sky:#2E69A8; --gold:#8F6210;
    --mark-ring:#2A8A5C; --mark-runner:#0B1A2A; --mark-sat:#1E7A4F;   /* R-364: 4.7:1 on cream, 5.3:1 on white, where #3DAE78 read 2.5 and 2.8 */
    --field-1:rgba(61,174,120,.30); --field-2:rgba(143,184,232,.45); --field-3:rgba(229,185,106,.30);
    --wash:11 26 42; --shade:30 50 40; --shadow-c:rgba(30,50,40,.22);
    color-scheme:light;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}

/* The colour field behind every page: three soft blobs from the tokens,
   drifting slowly; still under reduced motion. */
.sfield{position:fixed;inset:-20% -30%;z-index:-1;pointer-events:none}
.sfield i{position:absolute;border-radius:50%;filter:blur(64px)}
.sfield i:nth-child(1){width:62%;height:34%;left:28%;top:6%;background:var(--field-1);animation:drift 18s ease-in-out infinite alternate}
.sfield i:nth-child(2){width:56%;height:30%;left:-4%;top:36%;background:var(--field-2);animation:drift 22s ease-in-out infinite alternate-reverse}
.sfield i:nth-child(3){width:72%;height:36%;left:30%;top:62%;background:var(--field-3);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(8%,6%) scale(1.12)}}

/* The bar on top: glass, sticky, the mark and the two ways in. */
.snav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px max(16px,calc((100vw - 1120px)/2));
  padding-top:max(10px,env(safe-area-inset-top));
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--glass-line)}
.snav .bn{display:flex;align-items:center;gap:8px;font:400 16px var(--wordmark);margin-right:auto;color:var(--ink);text-decoration:none;min-height:var(--tap)}
.snav .bn span{color:var(--accent-ink);font-weight:300}
h1,h2,h3{font-family:var(--font-display)}
.snav .bn svg{width:34px;height:24px;flex:none}
/* R-268: below 380 px the bar's mark, Coaches and Sign in did not fit beside
   "Athletics" (10 px over at 360), so the mark keeps "Orbit" alone there,
   as the home page's bar does on a phone */
@media (max-width:380px){.snav .bn span{display:none}}

.wrapS{max-width:1120px;margin:0 auto;padding-inline:20px}
@media (max-width:480px){.wrapS{padding-inline:16px}}

/* Buttons: a 44 px floor everywhere, a spring on press. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;border:0;
  font:600 15px var(--font);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .45s var(--spring),box-shadow .25s,background .25s}
.btn:active{transform:scale(.96);transition-duration:.12s}
.btn.pri{background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--on-accent);
  box-shadow:inset 0 1px 0 rgb(var(--wash) / .3),0 10px 22px -10px var(--accent)}
.btn.sec{background:var(--glass);color:var(--ink);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi)}
.btn.sm{min-height:var(--tap);padding:0 16px;font-size:14px}
.btn.txt{background:none;color:var(--accent-ink);padding:0;min-height:var(--tap)}
.btn:disabled{opacity:.5;cursor:default}
.btn .chev{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--wash) / .22);margin-right:-10px}

/* Glass card with a lit rim. */
.g{position:relative;background:var(--glass-card);border-radius:24px;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 36px -18px var(--shadow-c)}
.g::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,var(--rim-a) 0%,transparent 38%,transparent 62%,var(--rim-b) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

.kick{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}

.foot{padding:28px 0 calc(40px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;font-size:14px;color:var(--muted);
  border-top:1px solid var(--line);margin-top:40px}
.foot .sp{margin-right:auto;display:flex;align-items:center;gap:8px;min-height:var(--tap)}
.foot .sp svg{width:28px;height:20px}
.foot a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap)}
.foot a:hover{color:var(--ink)}
/* R-125: what Orbit is, under every page's links (the app says it too) */
.foot .safe{flex-basis:100%;margin:2px 0 0;font-size:13px;color:var(--muted)}

/* A browser without color-mix or backdrop-filter still gets a solid bar. */
@supports not (backdrop-filter:blur(1px)){ .snav{background:var(--bg2)} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}