/* Ubuntu @font-face — REVIEW SITE ONLY. The Squarespace console STRIPS these
   (build_sqsp_console.mjs) because SQSP serves Ubuntu itself from
   file.squarespace-cdn.com via Design > Fonts; duplicating them there was the
   last thing tying production to the review host. flash-site-review is not on
   Squarespace, so it still needs them or Leah's preview loses the typeface. */
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;src:url(https://flash-site-review.vercel.app/fonts/ubuntu-400.woff2) format('woff2')}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:500;font-display:swap;src:url(https://flash-site-review.vercel.app/fonts/ubuntu-500.woff2) format('woff2')}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;src:url(https://flash-site-review.vercel.app/fonts/ubuntu-700.woff2) format('woff2')}
@font-face{font-family:'Ubuntu';font-style:italic;font-weight:500;font-display:swap;src:url(https://flash-site-review.vercel.app/fonts/ubuntu-500i.woff2) format('woff2')}
@font-face{font-family:'Ubuntu';font-style:italic;font-weight:700;font-display:swap;src:url(https://flash-site-review.vercel.app/fonts/ubuntu-700i.woff2) format('woff2')}

/* Metric-matched fallback (2026-08-03). Ubuntu arrives from Squarespace's font
   CDN ~900ms in; before it lands the browser paints in a fallback whose glyphs
   are a different width, and the swap reflowed the hero headline — that single
   event was 0.043 of a 0.053 desktop CLS (PSI read 0.112 and failed Agentic
   Browsing on it). Measured: Ubuntu renders at 98.1% of Arial's width, so the
   fallback is scaled to match and its vertical box is overridden to Ubuntu's
   own metrics (hhea asc 776 / desc 185 / gap 56 per 1000em, divided by the
   0.981 size-adjust). Result: the pre-swap text occupies the same space, so the
   swap is invisible. NOTE: this face must survive the console's @font-face
   strip — that strip targets only self-hosted (flash-site-review) faces. */
@font-face{font-family:'Ubuntu Fallback';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:98.1%;ascent-override:79.1%;descent-override:18.9%;line-gap-override:5.7%}

/* =====================================================================
   MEDINA COUNTY FLASH — Brand System
   Special Olympics, Medina County, Ohio
   Palette sampled from the official team logo (Flash Blue #0050D0).
   Confirm exact hex with the team before production.
   ===================================================================== */

:root{
  /* ---- Brand blue scale ---- */
  --blue-50:#EAF1FE;
  --blue-100:#D4E2FD;
  --blue-200:#A9C4FB;
  --blue-300:#6F9DF6;
  --blue-400:#2E7DF0;
  --blue-500:#0070F0;   /* Flash Bright (logo highlight) */
  --blue-600:#0050D0;   /* FLASH BLUE — primary */
  --blue-700:#0040A8;
  --blue-800:#00307E;
  --blue-900:#002A6B;   /* Flash Navy */
  --blue-950:#001A45;   /* deep navy base */

  /* ---- Neutrals (cool) ---- */
  --white:#ffffff;
  --paper:#F6F9FF;      /* page tint */
  --n-50:#F1F4FA;
  --n-100:#E5E9F2;
  --n-200:#CBD3E1;
  --n-300:#A6B0C4;
  --n-500:#6B7490;
  --n-700:#414B63;
  --ink:#16203A;        /* body text */
  --black:#0A0E16;      /* logo black */

  /* ---- Semantic ---- */
  --brand:var(--blue-600);
  --brand-bright:var(--blue-500);
  --brand-deep:var(--blue-800);
  --navy:var(--blue-900);
  --accent-text:var(--blue-700);   /* AA blue text on light */
  --gold:#FFC72C;                  /* medal accent, sparing use only */
  --focus:#1559c7;

  /* ---- Type ---- */
  --font:'Ubuntu', 'Ubuntu Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display-style:italic;          /* athletic, matches logo script energy */

  /* ---- Geometry ---- */
  --maxw:1140px;
  --radius:18px;
  --radius-lg:26px;
  --radius-pill:999px;

  /* ---- Elevation + glass ---- */
  --shadow-sm:0 6px 18px -10px rgba(11,27,58,.35);
  --shadow:0 18px 44px -22px rgba(11,27,58,.5);
  --shadow-lg:0 30px 70px -30px rgba(11,27,58,.6);
  --glass:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.8);
  --glass-brd:rgba(255,255,255,.75);
  --blur:saturate(160%) blur(18px);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);font-size:17px;line-height:1.55;
  background:var(--paper);position:relative;overflow-x:hidden;
}
/* signature royal aurora mesh behind everything */
body::before{
  content:"";position:fixed;inset:-10% -10% auto -10%;height:135vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42% 40% at 10% 5%, rgba(0,80,208,.20), transparent 60%),
    radial-gradient(44% 40% at 92% 0%, rgba(0,112,240,.18), transparent 62%),
    radial-gradient(52% 52% at 82% 72%, rgba(0,80,208,.14), transparent 60%),
    radial-gradient(48% 48% at 14% 92%, rgba(0,112,240,.10), transparent 62%);
}
img{max-width:100%;display:block}
a{color:var(--accent-text)}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.08;color:var(--navy)}
h1{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:700;font-style:var(--display-style);text-transform:uppercase;letter-spacing:-.01em}
h2{font-size:clamp(1.55rem,3.2vw,2.3rem);font-weight:700;font-style:var(--display-style);text-transform:uppercase;letter-spacing:-.005em}
h3{font-size:1.18rem;font-weight:700}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:60px 0}

/* ---------- Accessibility ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:400;border-radius:0 0 8px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Brand element: lightning bolt ---------- */
.bolt{display:inline-block;width:.4em;height:1.1em;background:currentColor;
  clip-path:polygon(65.5% 52.7%,93% 29.1%,61.4% 33.1%,84.1% 0%,0% 55.2%,36% 49.4%,9.9% 73.5%,41.1% 68.7%,19.1% 100%,100% 48.1%);vertical-align:-.12em}
.bolt--blue{color:var(--brand)}
.bolt--bright{color:var(--brand-bright)}

/* bolt divider (decorative section break) */
.bolt-rule{display:flex;align-items:center;gap:14px;color:var(--brand);margin:8px 0 22px}
.bolt-rule::before,.bolt-rule::after{content:"";height:3px;flex:1;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--brand-bright),transparent)}
.bolt-rule .bolt{font-size:1.4rem}

/* ---------- Logo treatments ---------- */
.logo{display:block}
/* full-color logo for light backgrounds */
.logo--color{height:auto}
/* knockout: solid white silhouette for dark/photo backgrounds */
.logo--knockout{filter:brightness(0) invert(1)}
/* lockup chip: place the full-color logo on dark, on a clean white wafer */
.logo-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;
  border-radius:16px;padding:10px 14px;box-shadow:var(--shadow)}
/* secondary one-color bolt+wordmark mark (fully recolorable / knockout-ready) */
.flashmark{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-style:italic;
  text-transform:uppercase;letter-spacing:.01em;line-height:1;color:var(--navy)}
.flashmark .bolt{font-size:1.5em;color:var(--brand)}
.flashmark.on-dark{color:#fff}
.flashmark.on-dark .bolt{color:#fff}

/* ---------- Buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.02em;padding:12px 22px;border-radius:var(--radius-pill);cursor:pointer;
  background:linear-gradient(180deg,var(--blue-500),var(--blue-600));color:#fff;border:1px solid var(--brand-deep);
  box-shadow:0 12px 26px -10px rgba(0,80,208,.6)}
.btn:hover{filter:brightness(1.06)}
.btn.line{background:rgba(255,255,255,.85);color:var(--accent-text);border-color:var(--glass-brd);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.btn.line:hover{background:#fff}
.btn.on-dark.line{background:rgba(255,255,255,.92);color:var(--brand-deep);border-color:#fff}
.btn.sm{padding:9px 16px;font-size:.92rem}

/* ---------- Surfaces ---------- */
.card,.panel{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow)}
.card{padding:24px;border-radius:var(--radius)}
.panel{padding:32px;border-radius:var(--radius-lg)}
.card.solid,.panel.solid{background:#fff}

.eyebrow{color:var(--accent-text);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;margin-bottom:8px}
.badge{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;font-weight:700;
  font-style:italic;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;padding:6px 14px;border-radius:var(--radius-pill)}
.badge .bolt{color:#fff}

.grid{display:grid;gap:22px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Header / nav ---------- */
header.site{position:sticky;top:0;z-index:200;background:var(--glass-strong);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid rgba(11,27,58,.12)}
.bar{display:flex;align-items:center;gap:14px;max-width:var(--maxw);margin:0 auto;padding:10px 20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.brand img{width:52px;height:52px;object-fit:contain}
.brand .nm{font-weight:700;font-style:italic;text-transform:uppercase;font-size:1.14rem;line-height:1;color:var(--navy)}
.brand .accred{display:block;font-size:.64rem;font-style:normal;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-text);font-weight:700;margin-top:3px}
nav.primary{margin-left:auto;display:flex;gap:2px;align-items:center;flex-wrap:wrap}
nav.primary a{color:var(--navy);text-decoration:none;padding:9px 11px;border-radius:10px;font-weight:500;font-size:.95rem}
nav.primary a:hover{background:rgba(0,80,208,.10)}
nav.primary a[aria-current="page"]{color:var(--brand);background:rgba(0,80,208,.10);font-weight:700}

/* ---------- Page hero (interior) ---------- */
.pagehero{position:relative;color:#fff;overflow:hidden;background:linear-gradient(120deg,var(--blue-950),var(--blue-700))}
.pagehero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.pagehero .inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:54px 20px 58px}
.pagehero h1{color:#fff;margin:0 0 .15em}
.pagehero p{color:#dfe8fb;max-width:60ch;margin:0}

/* ---------- Forms ---------- */
form.block{display:grid;gap:14px;max-width:520px}
.field{display:grid;gap:6px}
.field label{font-weight:500}
.req{color:var(--accent-text)}
.field input,.field select,.field textarea{font:inherit;padding:12px;border:1px solid var(--n-500);
  border-radius:12px;width:100%;background:rgba(255,255,255,.9)}
.hint{color:var(--n-700);font-size:.88rem}
fieldset{border:1px solid rgba(11,27,58,.16);border-radius:14px;padding:16px;margin:0}
legend{font-weight:700;font-style:italic;text-transform:uppercase;padding:0 6px;color:var(--navy)}

/* ---------- Gallery / media ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:1/1;background:var(--blue-50);
  box-shadow:var(--shadow);border:1px solid var(--glass-brd)}
.gallery img{width:100%;height:100%;object-fit:cover}

/* sports list */
ul.sports{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px}
ul.sports li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(11,27,58,.14);padding:12px 0;align-items:center}
ul.sports li .nm{font-weight:700;font-style:italic;text-transform:uppercase;font-size:1.02rem;color:var(--navy)}
ul.sports .season{color:var(--n-700);font-size:.9rem;white-space:nowrap}

/* calendar subscribe pills */
.subscribe{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.subscribe a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--navy);
  border:1px solid rgba(11,27,58,.2);border-radius:var(--radius-pill);padding:10px 16px;font-weight:500;background:rgba(255,255,255,.85)}
.subscribe a:hover{background:#fff}

/* product / gear cards */
.gear{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gear .item{background:#fff;border:1px solid var(--n-100);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.gear .item img{width:100%;height:240px;object-fit:contain;background:#fff;padding:10px}
.gear .item .meta{padding:14px 16px;border-top:1px solid var(--n-100)}
.gear .item .meta .t{font-weight:700;color:var(--navy);font-size:.98rem}
.gear .item .meta .p{color:var(--accent-text);font-weight:700}

/* swatch (brand guide) */
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.swatch{border-radius:14px;overflow:hidden;border:1px solid var(--n-100);background:#fff}
.swatch .chip{height:78px}
.swatch .lab{padding:8px 10px;font-size:.8rem}
.swatch .lab b{display:block;color:var(--navy)}
.swatch .lab span{color:var(--n-700)}

/* ---------- Footer ---------- */
footer.site{margin-top:18px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'64'%20height%3D'64'%20viewBox%3D'0%200%2064%2064'%3E%3Cg%20fill%3D'%2523ffffff'%20fill-opacity%3D'0.1'%3E%3Cpath%20transform%3D'translate%2813%2C2%29%20scale%280.0375%29'%20d%3D'M244.19%20384.7%2046.69%20800%20100.35%20549.33%2024.16%20588.38%2087.97%20395.32%200%20441.46%20205.3%200%20149.99%20264.82%20227.22%20232.49%20160.01%20421.38Z'%2F%3E%3Cpath%20transform%3D'translate%2845%2C32%29%20scale%280.0375%29'%20d%3D'M244.19%20384.7%2046.69%20800%20100.35%20549.33%2024.16%20588.38%2087.97%20395.32%200%20441.46%20205.3%200%20149.99%20264.82%20227.22%20232.49%20160.01%20421.38Z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), linear-gradient(180deg,#0E2350,var(--navy));background-size:64px 64px,auto;color:#fff;padding:46px 0 26px}
footer.site a{color:#fff}
footer.site h3{color:#fff}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
footer .social a{display:inline-flex;align-items:center;gap:8px;margin-right:16px;text-decoration:none}
footer address{font-style:normal;line-height:1.7}
.legal{border-top:1px solid rgba(255,255,255,.2);margin-top:30px;padding-top:16px;font-size:.85rem;color:#c8d4ec}

/* ---------- Responsive ---------- */
@media(max-width:880px){
  .cols-2,.cols-3,.cols-4,.gear,footer .cols{grid-template-columns:1fr 1fr}
  .swatches{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
  /* big content cards go single-column so nothing clips the viewport edge */
  .cols-2,.cols-3,.cols-4,.gear{grid-template-columns:1fr}
  .ul.sports,ul.sports,.gallery{grid-template-columns:1fr 1fr}
  /* single column so the wide "coordinator" column can't overflow the viewport */
  footer .cols{grid-template-columns:1fr}
  /* keep nav reachable — wrap it to its own row instead of hiding it (no hamburger here) */
  .bar{flex-wrap:wrap;height:auto;row-gap:6px}
  nav.primary{margin-left:0;width:100%;justify-content:flex-start;gap:4px 12px}
  nav.primary a{font-size:.9rem;padding:6px 8px}
  .panel{padding:22px}
}

/* =====================================================================
   ICON SYSTEM + ADDED BRAND ELEMENTS
   ===================================================================== */
/* inline-svg icon utility: inherits color, scales with text */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic--fill{fill:currentColor;stroke:none}
.ic-link{display:inline-flex;align-items:center;gap:8px}
.ic-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ic-list li{display:flex;align-items:center;gap:10px}
.ic-list .ic{color:var(--brand);width:20px;height:20px}

/* icon tile (quick-link / feature) */
.feature-ic{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--blue-500),var(--blue-700));color:#fff;box-shadow:var(--shadow-sm)}
.feature-ic .ic{width:24px;height:24px;stroke-width:2}

/* sport tile icon */
.sporticon{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-50);color:var(--brand);border:1px solid var(--blue-100)}
.sporticon .ic{width:24px;height:24px}

/* stat band */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.stat-item .n{font-size:2.4rem;font-weight:700;font-style:italic;color:var(--brand);line-height:1}
.stat-item .k{font-size:.9rem;color:var(--n-700);font-weight:500;margin-top:4px}
@media(max-width:680px){.stat-band{grid-template-columns:1fr 1fr}}

/* speed-streak motif (decorative) */
.streaks{display:inline-flex;flex-direction:column;gap:5px}
.streaks i{display:block;height:4px;border-radius:4px;background:var(--brand-bright)}
.streaks i:nth-child(1){width:42px}
.streaks i:nth-child(2){width:30px;background:var(--brand)}
.streaks i:nth-child(3){width:18px;background:var(--blue-300)}

/* medal chip */
.medal{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE08A,var(--gold));color:#6b4e00;box-shadow:var(--shadow-sm)}
.medal .ic{width:22px;height:22px}

/* framed photo with bolt corner accent */
.framed{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--glass-brd)}
.framed::after{content:"";position:absolute;left:0;bottom:0;width:0;height:0;
  border-left:46px solid var(--brand);border-top:46px solid transparent}
.framed .corner-bolt{position:absolute;left:6px;bottom:6px;color:#fff;z-index:2;font-size:1.1rem}

/* contact method rows with icons */
.contact-rows{display:grid;gap:12px;margin:6px 0}
.contact-rows a,.contact-rows .row{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.contact-rows .ic{color:var(--brand);width:20px;height:20px}

/* hidden sprite host */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* die-cut "sticker" logo treatment for dark / photo backgrounds
   white contour follows the logo silhouette (offset-path style) via stacked drop-shadows */
.logo-sticker{display:inline-block;background:#fff;border-radius:26px;padding:22px 26px;line-height:0;
  box-shadow:0 16px 32px -12px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.04)}
.logo-sticker img{display:block;width:100%;height:auto}
.logo-sticker .base{display:none}
.logo-sticker.tilt{transform:rotate(-3deg)}

/* tiling lightning-bolt pattern (brand texture) */
.bolt-pattern{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'64'%20height%3D'64'%20viewBox%3D'0%200%2064%2064'%3E%3Cg%20fill%3D'%25230050D0'%20fill-opacity%3D'0.08'%3E%3Cpath%20transform%3D'translate%2813%2C2%29%20scale%280.0375%29'%20d%3D'M244.19%20384.7%2046.69%20800%20100.35%20549.33%2024.16%20588.38%2087.97%20395.32%200%20441.46%20205.3%200%20149.99%20264.82%20227.22%20232.49%20160.01%20421.38Z'%2F%3E%3Cpath%20transform%3D'translate%2845%2C32%29%20scale%280.0375%29'%20d%3D'M244.19%20384.7%2046.69%20800%20100.35%20549.33%2024.16%20588.38%2087.97%20395.32%200%20441.46%20205.3%200%20149.99%20264.82%20227.22%20232.49%20160.01%20421.38Z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:64px 64px;background-repeat:repeat}
.bolt-pattern.on-dark{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'64'%20height%3D'64'%20viewBox%3D'0%200%2064%2064'%3E%3Cg%20fill%3D'%2523ffffff'%20fill-opacity%3D'0.15'%3E%3Cpath%20transform%3D'translate%2813%2C2%29%20scale%280.0375%29'%20d%3D'M244.19%20384.7%2046.69%20800%20100.35%20549.33%2024.16%20588.38%2087.97%20395.32%200%20441.46%20205.3%200%20149.99%20264.82%20227.22%20232.49%20160.01%20421.38Z'%2F%3E%3Cpath%20transform%3D'translate%2845%2C32%29%20scale%280.0375%29'%20d%3D'M244.19%20384.7%2046.69%20800%20100.35%20549.33%2024.16%20588.38%2087.97%20395.32%200%20441.46%20205.3%200%20149.99%20264.82%20227.22%20232.49%20160.01%20421.38Z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}