/* KaddieIQ page chrome — header, theme toggle and footer.
 *
 * Shared by every page. These rules were duplicated in kiq-2026.css and
 * kiq-ballfit.css, byte-identical in nine of ten selectors, and the news
 * page needed a third copy — which is the point at which a shared file
 * stops being tidiness and starts being the only sane option.
 *
 * Colours come from kiq-tokens.css. Nothing here declares one.
 */

/* ---------- header ---------- */
.kiq-header{position:sticky;top:env(safe-area-inset-top,0);z-index:40;padding:0 clamp(16px,4vw,52px);
  display:flex;align-items:center;justify-content:space-between;height:64px;
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.kiq-brand{display:inline-flex;align-items:center;gap:10px;color:var(--gold);text-decoration:none}
.kiq-mark{height:38px;width:auto}
.kiq-wm{font:var(--fw-display) 18px/1 var(--head);color:var(--ink);letter-spacing:-.01em}
.kiq-wm .g{color:var(--wm)}
.tt{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--rule);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.tt button{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.tt button[aria-checked="true"]{color:var(--gold-hi);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--hair)}
.tt svg{width:14px;height:14px}.tt button:focus-visible,.kiq-brand:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

/* ---------- footer ---------- */
/* ================= FOOTER ================= */
footer{border-top:1px solid var(--rule);background:var(--bg-2);padding:52px clamp(20px,5vw,64px) 36px;color:var(--muted);font-size:14px;transition:background-color .5s ease}
.foot{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot h2{font:var(--fw-title) 15px/1.3 var(--head);color:var(--ink);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--gold-hi)}
.foot a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
.foot .about p{margin:0 0 10px;max-width:34ch}
.legal{max-width:880px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--rule);font-size:13px;line-height:1.7;text-align:center;text-wrap:balance}
.legal p{margin:0}
@media(max-width:760px){
  .foot{grid-template-columns:1fr 1fr}
  .foot .about{grid-column:1 / -1}
}

/* ---------- brand primitives ---------- */
/* Links inherit their surrounding colour; each region sets its own. Without
   this the footer fell back to the browser's default link blue on any page
   whose sheet did not happen to repeat the rule — which is exactly what
   happened when the news page arrived.

   .g is the brand's accent half-word — the FIT in BallFIT, the IQ in ShotIQ,
   the Detector in Lie Detector. .v marks a variant: the Pro in BallFIT Pro. */
a{color:inherit}
.g{color:var(--wm)}
.v{color:var(--pro)}

/* ---------- site nav drawer ----------
 * Every page but the homepage — the medallion ring on index.html already is
 * the homepage's own way to get to every other page, so this would be a
 * second, redundant nav sitting right next to it there. Pages this small
 * don't need a header nav bar; a left-edge pull-tab keeps the header itself
 * uncluttered (just the wordmark and the theme toggle) while still putting
 * every other page one click away from any of them. Content is built by
 * kiq-nav.js from the footer's own Explore/More lists already on the page,
 * not duplicated here — one list of links to keep in step, not two. */
.kiq-navtab{position:fixed;left:0;top:50%;z-index:50;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:40px;height:auto;padding:18px 9px;
  border:1px solid var(--hair);border-left:0;border-radius:0 12px 12px 0;
  background:var(--panel);color:var(--gold);cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:3px 0 16px -8px rgba(0,0,0,.45);
  transition:width .2s ease,color .2s ease,border-color .2s ease;
  animation:kiq-navtab-glow 2.2s ease-in-out infinite}
.kiq-navtab:hover{width:44px;color:var(--gold-hi);border-color:var(--gold);animation-play-state:paused}
/* Deliberately heavy — never fully off at rest, then flares out much
   further on the pulse, so the tab reads at a glance even unfocused. */
@keyframes kiq-navtab-glow{
  0%,100%{box-shadow:3px 0 16px -8px rgba(0,0,0,.45),0 0 16px 4px color-mix(in srgb,var(--gold) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}
  50%{box-shadow:3px 0 16px -8px rgba(0,0,0,.45),0 0 48px 16px color-mix(in srgb,var(--gold) 85%,transparent),0 0 0 1px color-mix(in srgb,var(--gold) 75%,transparent)}
}
@media (prefers-reduced-motion:reduce){.kiq-navtab{animation:none}}
.kiq-navtab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.kiq-navtab svg{width:17px;height:17px;flex:none}
/* Vertical, bottom-to-top — reads normally by tilting your head to the
   left, the usual convention for a tab pinned to the page's left edge.
   Sized deliberately large (not a caption) so the tab reads as a labelled
   door to the rest of the site, not a stray icon easy to scroll past. */
.kiq-navtab-label{writing-mode:vertical-rl;transform:rotate(180deg);
  font:var(--fw-title) 15px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap}
.kiq-navtab:hover .kiq-navtab-label{color:var(--gold-hi)}

.kiq-navdrawer-backdrop{position:fixed;inset:0;z-index:58;display:none;
  background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.kiq-navdrawer-backdrop.open{display:block}

.kiq-navdrawer{position:fixed;top:0;left:0;bottom:0;z-index:59;width:min(180px,80vw);
  background:var(--panel);border-right:1px solid var(--hair);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  padding:28px 16px 32px;overflow-y:auto;
  transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1)}
.kiq-navdrawer.open{transform:translateX(0)}
.kiq-navdrawer-close{position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;
  border:0;border-radius:50%;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;
  transition:background-color .2s ease,color .2s ease}
.kiq-navdrawer-close:hover{color:var(--ink);background:var(--surface)}
.kiq-navdrawer-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.kiq-navdrawer-group{margin:0 0 30px}
.kiq-navdrawer-group h2{margin:0 0 14px;font:var(--fw-title) 12px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.kiq-navdrawer-group ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.kiq-navdrawer-group a{color:var(--ink);text-decoration:none;font:var(--fw-title) 15px/1.3 var(--head)}
.kiq-navdrawer-group a:hover{color:var(--gold-hi)}
.kiq-navdrawer-group a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}

/* Pinned above every group — the way back to the homepage, not one
   Explore item among the others. */
.kiq-navdrawer-home{display:flex;align-items:center;gap:10px;margin:34px 0 22px;padding-bottom:18px;
  border-bottom:1px solid var(--hair);color:var(--gold);text-decoration:none;
  font:var(--fw-title) 17px/1 var(--head);letter-spacing:.02em}
.kiq-navdrawer-home svg{width:20px;height:20px;flex:none}
.kiq-navdrawer-home:hover{color:var(--gold-hi)}
.kiq-navdrawer-home:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}

@media (prefers-reduced-motion:reduce){
  .kiq-navdrawer{transition:none}
}

/* ---------- contour-map background ---------- */
/* The hole diagram behind every page, drawn as a mask so it takes the page's
   own ink colour and sits at --bp-op. Which hole is a page's own business:
   each sheet sets --bp-land/--bp-port, and those paths must be relative to
   the sheet that declares them, because a url() in a custom property resolves
   against the stylesheet using the var(), not the document. */
.bg-bp{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--bp-op);
  background-color:currentColor;color:var(--ink);
  -webkit-mask:var(--bp-land) center/cover no-repeat;mask:var(--bp-land) center/cover no-repeat}
@media(max-aspect-ratio:1/1){.bg-bp{-webkit-mask-image:var(--bp-port);mask-image:var(--bp-port)}}
main{position:relative;z-index:1}