/* Bigrise shared stylesheet, v2 (August 2026 rebuild, PREVIEW COPY).
 * White background, ink black, Bigrise blue. Georgia everywhere.
 * Editorial system: rules and space give structure, not boxes and shadows.
 * Page-specific CSS stays in each page's own <style> block, emitted after
 * this file so it still wins the cascade.
 */

* {
  margin: 0; padding: 0; box-sizing: border-box;
}
*::before {
  margin: 0; padding: 0; box-sizing: border-box;
}
*::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
:root {
  --w-nav: 1260px;
  --w-page: 1100px;
  --w-prose: 720px;
  --w-form: 620px;

  --accent: #2563eb;
  --accent-border: #bfdbfe;
  --accent-dark: #1d4ed8;
  --accent-soft: #eff4ff;
  /* amber/green/red kept ONLY for guide.html callouts and form errors */
  --amber: #b45309;
  --amber-border: #fde68a;
  --amber-soft: #fffbeb;
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-warm: #f5f7fb; /* was warm grey; now a cool near-white for hover states */
  --border: #e8e8e8;
  --rule: #1a1a1a;
  --green: #059669;
  --green-border: #a7f3d0;
  --green-soft: #ecfdf5;
  --ink: #1a1a1a;
  --ink-light: #4a4a4a;
  --ink-muted: #6b6b6b;   /* was #737373: 4.46:1 on the tinted band, below the 4.5:1 AA floor */
  --radius: 4px;
  --radius-lg: 4px;
  --red: #dc2626;
  --red-border: #fecaca;
  --red-soft: #fef2f2;
  /* shadows kept as variables so old page CSS doesn't break, but flattened */
  --shadow-lg: none;
  --shadow-md: none;
  --shadow-sm: none;
}
html {
  scroll-behavior: smooth; font-size: 17px;
}
body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--accent); color: #fff;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Nav ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink);
  padding: 0 2rem;
}
.nav-inner {
  max-width: var(--w-nav); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  height: 58px;
}
.nav-brand {
  text-decoration: none; display: flex; align-items: center; flex-shrink: 0;
}
.nav-logo {
  width: 132px; height: auto;
}

@media (max-width: 900px) {
  .nav-logo {
    width: 118px;
  }
}
.nav-links {
  display: flex; align-items: center; gap: 0.1rem; white-space: nowrap;
  list-style: none;
}
.nav-links a {
  text-decoration: none; color: var(--ink-light);
  font-size: 0.82rem;
  padding: 0.4rem 0.55rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-links a:hover {
  color: var(--ink); border-bottom-color: var(--ink);
}
.nav-links a.active {
  color: var(--accent); border-bottom-color: var(--accent);
}
.nav-cta {
  background: var(--accent) !important; color: #fff !important;
  padding: 0.45rem 1rem !important; border-radius: var(--radius) !important;
  border-bottom: none !important;
  transition: background 0.15s !important;
  margin-left: 0.5rem;
}
.nav-cta:hover {
  background: var(--accent-dark) !important;
}
.nav-toggle {
  display: none; background: none; border: none;
  cursor: pointer; padding: 0.5rem;
  flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 1px;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }
  .nav-links {
    display: none; position: absolute;
    top: 58px; left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--ink);
    flex-direction: column; padding: 1rem;
    align-items: stretch;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    padding: 0.7rem 1rem; width: 100%; border-bottom: none;
  }
  .nav-cta {
    margin-left: 0 !important; margin-top: 0.5rem; text-align: center;
  }
}

/* ── Shared editorial primitives ── */
.kicker {
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-muted);
  display: block; margin-bottom: 1rem;
}
/* The rule: a solid blue line. The site's divider, and what the page
   ball bounces off (js/ball.js). */
.section-rule {
  border: none; border-top: 3px solid var(--accent);
  border-radius: 2px;
  margin: 0 0 1.2rem;
}

/* ── Nav intro: typed tagline + the ball off the i ── */
.nav-tagline {
  font-size: 0.82rem; color: var(--ink-light);
  margin-left: 0.85rem; white-space: nowrap;
  border-left: 1px solid var(--border);
  padding-left: 0.85rem;
  min-height: 1em;
}
.nav-tagline.typing::after {
  content: ""; display: inline-block;
  width: 1px; height: 0.9em; background: var(--accent);
  margin-left: 1px; vertical-align: -0.1em;
  animation: nav-caret 0.7s steps(1) infinite;
}
@keyframes nav-caret { 50% { opacity: 0; } }
.nav-ball {
  position: absolute; width: 7px; height: 7px;
  background: var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 5;
}
.nav-ball.landed { opacity: 0; transition: opacity 0.18s; }
@media (max-width: 1080px) {
  .nav-tagline { display: none; }
}

/* ── The page ball (physics toy, js/ball.js) ── */
.page-ball {
  position: absolute; z-index: 800;
  width: 26px; height: 26px;
  background: var(--accent); border-radius: 50%;
  cursor: grab; touch-action: none;
}
/* The live ball moves every frame, so it is positioned with transform and
   pinned at 0,0. left/top cannot be composited, so writing them each frame
   forced a layout and a paint per frame, which Safari showed as jitter.
   Dead balls are placed once and never move, so they keep left/top. */
.page-ball.live {
  left: 0; top: 0;
  will-change: transform;
}
.page-ball.held { cursor: grabbing; }
/* No invisible halo around the ball. An earlier version added a 48px tap
   target here, but generated content inherits the ball's touch-action: none,
   so a swipe starting in the halo stopped the page scrolling. On a phone,
   losing a scroll gesture on the landing page costs more than an easier grab,
   so the target is the visible 26px dot and nothing more. */
.page-basket {
  position: absolute; z-index: 799;
  transform-origin: 20% 90%;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.page-basket.tipped {
  transform: rotate(-42deg);
}
.hoop-rim {
  fill: none; stroke: var(--accent); stroke-width: 3.5;
}
.hoop-stand {
  fill: none; stroke: var(--ink); stroke-width: 2.5;
  stroke-linecap: round;
}
.hoop-net path {
  fill: none; stroke: var(--ink-muted); stroke-width: 1.4;
  stroke-linecap: round; opacity: 0.7;
}
.page-basket.made .hoop-net {
  animation: net-sway 0.5s ease;
  transform-origin: 50% 25%;
}
@keyframes net-sway {
  30% { transform: scaleY(1.12) skewX(-4deg); }
  65% { transform: scaleY(1.04) skewX(3deg); }
  100% { transform: none; }
}

/* ── The sling game ── */
.game-band {
  position: absolute; z-index: 798;
  pointer-events: none; display: none;
}
.game-band line {
  stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-dasharray: 1 6;
}
.game-anchor {
  position: absolute; z-index: 797;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink);
  pointer-events: none;
}
.game-hint {
  position: absolute; z-index: 797;
  font-size: 0.72rem; font-style: italic;
  color: var(--ink-muted);
  pointer-events: none;
  transition: opacity 0.5s;
}
.game-hint.gone { opacity: 0; }
.game-score {
  position: absolute; z-index: 799;
  font-size: 1.15rem; font-style: italic;
  color: var(--green);
  pointer-events: none;
}
.dead-ball {
  cursor: default; pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.dead-ball.fading { opacity: 0; }
.game-score.pop {
  animation: score-pop 0.4s ease;
}
@keyframes score-pop {
  35% { transform: scale(1.45); }
  100% { transform: none; }
}
.page-ball.respawn {
  animation: ball-in 0.15s ease;
}
/* Opacity only. This used to animate transform, which fought the translate3d
   the ball is now positioned with and would have thrown it to the top left
   corner for the length of the animation. */
@keyframes ball-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Headings: one style, black, roman weight, no full stops, never bold,
   no italic/blue accent words (Archie, 12-13 Aug). */
h1, h2, h3 {
  font-weight: 400;
}
h1 em, h2 em, h3 em, .display em {
  font-style: normal; color: inherit;
}

/* ── Page header (inner pages) ── */
.page-header {
  padding: 8rem 2rem 2rem;
  max-width: var(--w-page); margin: 0 auto;
  text-align: left;
}
.page-header-eyebrow {
  font-size: 0.72rem;
  color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 1rem;
  padding-top: 1.2rem; border-top: 1px solid var(--rule);
}
.page-header h1 {
  font-size: 1.25rem;
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 0.8rem;
  max-width: 850px;
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--ink);
  padding: 2.5rem 2rem; text-align: left;
  font-size: 0.78rem; color: var(--ink-muted);
  max-width: none;
}
.footer-sep {
  width: 1px; height: 0.9em; background: var(--border);
  align-self: center;
}
.site-footer > * {
  max-width: var(--w-nav); margin-left: auto; margin-right: auto;
}
.footer-links {
  display: flex; justify-content: flex-start; gap: 1.5rem;
  margin-bottom: 0.8rem; list-style: none; flex-wrap: wrap;
}
.footer-links a {
  color: var(--ink-light); text-decoration: none;
  font-size: 0.78rem; border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.footer-links a:hover {
  color: var(--accent); border-bottom-color: var(--accent);
}
.site-footer p a {
  color: var(--ink-muted);
}
.site-footer p a:hover {
  color: var(--accent);
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem 2rem; flex-wrap: wrap;
}
.footer-bottom p { margin: 0; }
.footer-social {
  display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0;
  align-items: center;
}
.footer-social a {
  display: inline-flex; color: var(--ink-muted);
  transition: color 0.15s;
}
.footer-social a:hover { color: var(--accent); }
.footer-social svg { width: 1.05rem; height: 1.05rem; fill: currentColor; display: block; }

@media (max-width: 640px) {
  html {
    font-size: 16px;
  }
  .page-header {
    padding: 7rem 1.2rem 1.5rem;
  }
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--accent); color: #fff;
  padding: 0.8rem 1.7rem; border-radius: var(--radius);
  text-decoration: none; font-size: 0.92rem;
  transition: background 0.15s;
  border: 1px solid var(--accent); cursor: pointer;
  font-family: inherit;
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; color: var(--ink);
  padding: 0.8rem 1.7rem; border-radius: var(--radius);
  text-decoration: none; font-size: 0.92rem;
  border: 1px solid var(--ink);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  cursor: pointer;
  font-family: inherit;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ── Tinted band: the section separator ── */
.band {
  background: #f5f8ff;
}

/* ── Motion discipline ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── Skip link (WCAG 2.4.1 Bypass Blocks) ──
   Off screen until it takes focus, then it lands top left over everything. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}


/* ── "(optional)" hint beside a form label ── */
.opt {
  color: var(--ink-muted);
  font-weight: normal;
}