/* ===========================================================================
   EVEN INNINGS — shared shell for every page except the home page
   ---------------------------------------------------------------------------
   WHY THIS FILE EXISTS, AND WHY IT IS A DELIBERATE DEPARTURE.

   index.html is self-contained by design: one file, zero external requests,
   loads instantly on a phone at a ballfield. That was exactly right for a
   one-page site and it stays true — index.html is untouched by this file apart
   from the nav.

   It stops being right at thirteen pages. Duplicating six hundred lines of CSS
   into every page means every future color change is a thirteen-file edit, and
   twelve of them will eventually be missed. That is the same drift problem as a
   stale showcase image, and this project has been bitten by it before.

   So: sub-pages share one stylesheet. Note what has NOT changed — there are
   still no fonts, no scripts, no analytics and no third-party requests of any
   kind. This is one same-origin file, cached once, serving every page after the
   first. Fewer bytes over the wire than inlining it thirteen times.

   Values below are lifted verbatim from index.html so the two cannot disagree.
   =========================================================================== */

:root{
  --green:#2e7d4f; --green-dk:#1f5c3a; --mint:#8fd6b0; --clay:#c0392b;
  --cream:#f7f4ec; --gold:#e8b53c; --navy:#1c2b39;
  --ink:#1c2b39; --muted:#5c6b73; --line:#d8dfe1; --paper:#ffffff;
  --maxw:1080px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{margin:0;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
  font-size:17px;line-height:1.6;}
a{color:var(--green-dk);}
h1,h2,h3{line-height:1.18;margin:0;letter-spacing:-.02em;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy);
  padding:10px 16px;font-weight:800;z-index:100;border-radius:0 0 8px 0;}
.skip:focus{left:0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
section{padding:70px 0;}
.sec-tag{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--green);margin-bottom:12px;}
h2{font-size:32px;margin-bottom:14px;}
.sec-lead{font-size:18.5px;color:var(--muted);max-width:660px;line-height:1.62;text-wrap:balance;}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy);
  border:none;border-radius:9px;padding:14px 26px;font-size:16px;font-weight:800;
  font-family:inherit;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .2s;
  box-shadow:0 4px 0 #b98d24;}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 #b98d24;}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #b98d24;}
.btn.ghost{background:transparent;color:var(--green-dk);box-shadow:none;
  border:1.5px solid var(--green);font-weight:700;padding:13px 22px;}
.btn.ghost:hover{border-color:var(--green-dk);color:var(--green-dk);transform:none;}

/* ---------- the masthead on a sub-page -------------------------------------
   A slim navy band rather than the home page's full hero. Same navy, same
   brandbar, so a visitor arriving on /about knows immediately they are on the
   same site. */
/* 30px top, not 22px, so the brandbar begins at the same y as the home page's, whose
   hero opens with padding:30px. At 22px the nav sat 8px higher on every sub-page and
   crept up and down as you moved between them. */
.masthead{background:var(--navy);padding:30px 0 20px;}
.brandbar{display:flex;align-items:center;gap:11px;}
.brandbar svg{width:38px;height:38px;flex:none;}
/* 24px, raised from 21px on 8 September. At 21 the cap height was 15px against a
   38px ball — 39% — which read as a wordmark tucked beside the mark rather than
   locked up with it. 24px puts the caps at 17.3px, 45% of the ball, matching the
   proportion the app's own brand block already uses, and opens the gap to the 15px
   nav from 1.4x to 1.6x.

   Measured on this stylesheet's pages at 1280, 1024, 900, 820, 768, 700, 660, 641,
   600, 480, 430, 414, 393, 390, 375, 360 and 320: the brandbar height, the nav's
   left and right edges and the beta chip's width are all identical to what they
   were at 21px. This bar is governed by the 44px touch minimum on a.home and on
   every nav link above the wrap breakpoint, and it wraps below it, so a 25.2px
   wordmark never has to fight anything for room. Nothing moved.

   No narrow-width exception, on purpose: one size at every width on every page.
   The home page's inline copy of this rule carries the same 24px and a note about
   why it looks unsafe in that file and is not. */
.wm{font-size:24px;font-weight:800;letter-spacing:-.4px;color:#fff;text-transform:uppercase;
  line-height:1.05;margin:0;}
.wm i{font-style:normal;font-weight:400;color:var(--mint);}

/* ---------- the trademark symbol -------------------------------------------
   EVEN INNINGS was filed with the USPTO on 8 September 2026, serial 50095739.
   The application is pending, so the notice is TM and not (R). Do not change
   this to (R) until a registration certificate actually issues — using (R)
   before then is a real problem, not a technicality.

   line-height:0 is what stops the raised glyph from adding leading to the line
   it sits on, which would push the masthead wordmark off its 44px baseline and
   open a gap in the footer. The symbol is decorative: every place it appears,
   it is marked aria-hidden, because a screen reader announcing "Even Innings
   trade mark" on every page is noise, and the accessible name is what carries
   the brand to a non-visual reader. */
.tm{font-size:.55em;vertical-align:super;line-height:0;letter-spacing:0;
  font-weight:600;font-style:normal;}
.brandbar a.home{text-decoration:none;display:flex;align-items:center;gap:11px;
  min-height:44px;}

/* ---------- the "Private beta" chip ----------------------------------------
   WHY THIS IS ON EVERY PAGE AND NOT JUST THE HOME PAGE.

   Two reasons, and the second is the better one.

   1. ALIGNMENT. index.html's brandbar is [brand] [nav] [beta chip], and BOTH the nav
      and the chip carry margin-left:auto, so the free space is split between them.
      Sub-pages had no chip, so all the free space landed in front of the nav and the
      nav sat flush to the right edge. Measured at 1280px: the nav ran 759-1034 on the
      home page and 883-1158 on every other page. The nav jumped 124px to the right on
      leaving home and 124px back on returning, at every width above 640px. Reserving
      the space with an invisible spacer would have fixed the jump; carrying the real
      chip fixes it without putting a lie in the markup.

   2. THE DISCLOSURE BELONGED HERE ANYWAY. "Private beta" was stated on exactly one
      page. The rules and method pages exist to be found by search, which means a coach
      can land on /faq or /pricing without ever passing the home page and never learn
      the product is in beta. That is precisely the visitor who most needs to know.

   Values are lifted verbatim from index.html so the two chips cannot differ in width,
   which is what keeps the nav in the same place.

   margin-left:0 IS THE LOAD-BEARING PART, and it is easy to get wrong. index.html ships
   the chip with margin-left:auto, but the builder rewrites it to 0 when it injects the
   nav, precisely so the nav is the only item claiming the free space: the nav takes it
   all, then the chip sits immediately to its right and both end flush at the right edge.
   Copying the chip here with its original "auto" put TWO auto margins on the sub-page
   brandbar, which splits the free space evenly and parked the nav in the middle of the
   bar, 218px left of where the home page puts it. That is the same jump Jeff reported,
   in the opposite direction. Keep this at 0. */
.brandbar .beta{margin-left:0;font-size:11.5px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(232,181,60,.45);
  padding:4px 10px;border-radius:20px;white-space:nowrap;
  /* flex:none added 5 September. Adding Rules pushed the brandbar past the available
     width between 641px and the wrap breakpoint, and flex-shrink squeezed this chip from
     113px to 98px on the home page while sub-pages kept it whole — so the nav sat 15px
     apart between the two again. A pill with nowrap text does not shrink gracefully; it
     just gets tighter than its own padding. Let the wordmark absorb compression. */
  flex:none;}

/* ---------- nav ------------------------------------------------------------
   KEEP IN SYNC WITH THE COPY INLINE IN index.html. Three or four short links
   wrap cleanly at 375px as plain text, so there is no menu button: a hamburger
   means JavaScript, a focus trap and an accessibility surface to get wrong, in
   exchange for hiding four words. */
.sitenav{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;}
.sitenav a{color:#cfe0d6;text-decoration:none;font-size:15px;font-weight:700;
  /* 13px of padding on 18px of line box clears the 44px touch minimum. At 9px it
     was 36px, which the phone check caught. */
  padding:13px 12px;border-radius:7px;line-height:1.2;min-height:44px;
  display:flex;align-items:center;}
.sitenav a:hover{color:#fff;background:rgba(255,255,255,.08);}
.sitenav a[aria-current="page"]{color:#fff;background:rgba(143,214,176,.16);}

/* ---------- page head ------------------------------------------------------ */
.pagehead{background:var(--cream);padding:52px 0 46px;border-bottom:1px solid var(--line);}
.pagehead h1{font-size:38px;margin-bottom:12px;}
.pagehead .sec-lead{margin-top:0;}
.crumb{font-size:13.5px;color:var(--muted);margin-bottom:6px;display:flex;
  align-items:center;gap:4px;flex-wrap:wrap;}
.crumb a{color:var(--green-dk);}

/* full-width photo band.
   Capped in height on purpose. At its natural 3:2 the dusk shot is 853px tall on a
   1280px screen, which is the entire first screen: a visitor arrives on /about and
   sees no words at all. A band crops to the part that carries the meaning (the
   lights, the outfield, the two figures) and lets the opening line sit above the
   fold, which is where it has to be. object-position sits above center so heads and
   torsos survive the crop rather than legs. */
.photoband{margin:0;}
.photoband img{display:block;width:100%;height:clamp(230px,46vh,470px);
  object-fit:cover;object-position:center 44%;}
.photoband figcaption{background:var(--navy);color:#8296a0;font-size:12.5px;
  padding:9px 22px;text-align:center;}

/* Two buttons side by side. Added 4 September with the pricing page's second CTA.
   They were siblings inside a <p>, which put them on one row at desktop with only the
   4px inter-word space between them, and stacked them flush at 0px on a phone: two
   adjacent 44px targets touching, which is exactly the mis-tap the 44px floor exists to
   prevent. flex with an explicit gap holds the separation in both directions. */
.ctarow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0;}

/* ---------- long-form prose ------------------------------------------------ */
.prose{max-width:680px;margin:0 auto;}
.prose p{margin:0 0 20px;}
.prose p.lede{font-size:20.5px;line-height:1.55;color:var(--ink);}
.prose h2{font-size:26px;margin:38px 0 12px;}
.prose h3{font-size:19px;margin:30px 0 10px;color:var(--green-dk);}
.prose strong{color:var(--ink);}
.prose ul{margin:0 0 20px;padding-left:22px;}
.prose li{margin-bottom:8px;}
.signoff{margin-top:34px;padding-top:22px;border-top:2px solid var(--line);font-size:16px;
  color:var(--muted);line-height:1.7;}
.signoff b{display:block;color:var(--ink);font-size:17px;}

/* the Article 1 line, wherever it appears */
.aidnote{background:var(--cream);border-left:4px solid var(--green);border-radius:0 8px 8px 0;
  padding:16px 20px;margin:26px 0;font-size:16px;line-height:1.6;}

/* ---------- end-of-page invitation on the rules pages ----------------------
   A rules page is the deepest a stranger goes: they arrive from a search, get
   their answer, and leave without ever learning software exists. Every rules
   detail page carried exactly two in-body links before 6 September — home and
   the rules index — so the best-ranking pages on the site were also the ones
   that converted nobody. This block is the one thing on the page that says
   what Even Innings is. Deliberately quiet: the reader came for a number, and
   a page that shouts loses the trust the citation just earned. */
.pagecta{margin:38px 0 0;padding:24px 26px;background:var(--cream);
  border:1px solid var(--line);border-radius:12px;}
.pagecta h2{margin:0 0 10px;font-size:20px;line-height:1.3;}
.pagecta p{margin:0 0 14px;font-size:16px;line-height:1.6;}
.pagecta p:last-of-type{margin-bottom:0;}
.pagecta .fine{display:block;margin-top:12px;font-size:13.5px;color:var(--muted);}
@media(max-width:640px){.pagecta{padding:20px;} .pagecta h2{font-size:18px;}}

/* ---------- cards: faq, index lists, rules grid ---------------------------- */
.faq-list{list-style:none;padding:0;margin:26px 0 0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:16px;}
.faq-list li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;}
.faq-list h3{font-size:15.5px;color:var(--green-dk);margin:0 0 6px;line-height:1.35;}
.faq-list p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0;}

.cardgrid{list-style:none;padding:0;margin:26px 0 0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:16px;}
.cardgrid li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:0;}
.cardgrid a{display:block;padding:18px 20px;text-decoration:none;color:inherit;border-radius:10px;}
.cardgrid a:hover{background:var(--cream);}
.cardgrid b{display:block;font-size:16px;color:var(--green-dk);margin-bottom:5px;}
.cardgrid span{display:block;font-size:14px;color:var(--muted);line-height:1.55;}

/* Long unbreakable tokens. The USSSA citation prints a 74-character PDF URL as its
   own link text, which forced the page to 492px inside a 375px phone. Nothing else
   on the site does this, but every rules page cites a source and some of those
   sources are long URLs, so the fix belongs on the rule rather than the instance. */
.prose a, .cite a, code{overflow-wrap:anywhere;}
code{font-size:.92em;background:var(--cream);padding:1px 5px;border-radius:4px;}

/* A rules table with four columns has nowhere to go on a 375px phone. Scroll it
   inside its own box rather than letting it push the whole page sideways. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 24px;}
.tablewrap .ruletable{margin:0;}
.tablewrap:focus-visible{outline:2px solid #1f5c3a;outline-offset:2px;border-radius:4px;}

/* the rules tables */
.ruletable{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:15.5px;}
.ruletable th,.ruletable td{border:1px solid var(--line);padding:9px 12px;text-align:left;}
.ruletable thead th{background:var(--green);color:#fff;font-size:13.5px;letter-spacing:.4px;
  text-transform:uppercase;}
.ruletable tbody tr:nth-child(even){background:var(--cream);}
.cite{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 26px;}

/* the hold banner on any page not cleared for publication */
.holdbar{background:#fff6d6;border:1px solid var(--gold);border-radius:9px;
  padding:14px 18px;margin:0 0 26px;font-size:15px;line-height:1.6;color:var(--ink);}
.holdbar b{color:var(--green-dk);}

/* ---------- footer --------------------------------------------------------- */
footer{background:var(--navy);color:#8296a0;font-size:13px;padding:34px 0;}
footer .wrap{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:center;}
footer a{color:var(--mint);}
footer .legal{max-width:640px;line-height:1.6;}
footer .fine{display:block;margin-top:9px;font-size:11.5px;color:#93a6b0;}
/* Carried over from index.html verbatim, where it already existed:
   "The footer mail link measured 74x15 on a phone — under the 24px floor WCAG 2.2
   sets for a target, and the only way anyone reaches you from this page. Padding
   rather than a bigger font, so it reads the same and is simply easier to hit."
   I rebuilt the footer for v2 and left this behind, which the phone check caught. */
footer .foot-mail{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;}

/* ---------- footer nav, 6 September 2026 -----------------------------------
   The masthead is not sticky. On the home page and About — the two long ones —
   it scrolls away and the footer held a single mailto, so a reader who reached
   the bottom had nowhere to go but back up. Same NAV as the masthead, generated
   from the same list.
   Quiet on purpose: this is a way out, not a call to action. It sits under a
   hairline below the legal block so it reads as part of the footer rather than
   as a second menu bar, and the current page is unlinked. 44px targets, as the
   phone check required of the masthead. */
footer .footnav-wrap{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.10);}
.footnav{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;}
.footnav a,.footnav span{font-size:14px;font-weight:600;line-height:1.2;
  min-height:44px;display:inline-flex;align-items:center;padding:0 10px;border-radius:7px;}
.footnav a{color:var(--mint);text-decoration:none;}
.footnav a:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:underline;}
.footnav a:focus-visible{outline:2px solid var(--mint);outline-offset:2px;}
.footnav span[aria-current="page"]{color:#93a6b0;}
@media (max-width:640px){.footnav a,.footnav span{padding:0 8px;}}

/* Breadcrumb links are navigation rather than prose, so they get the same
   treatment. Inline links inside a sentence do NOT: WCAG 2.5.8 exempts them,
   and padding them would wreck the line spacing of the paragraph. */
.crumb a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 4px;}

/* ---------- responsive ----------------------------------------------------- */
@media (max-width:900px){
  .faq-list{grid-template-columns:1fr;}
  .cardgrid{grid-template-columns:repeat(2,1fr);}
  h2{font-size:27px;}
  .pagehead h1{font-size:31px;}
  .sec-lead{max-width:none;}
}
/* 760, not 640. The breakpoint was set when the nav had four items; Rules made it five
   and the brandbar began overflowing at ~656px, where flex-shrink silently compressed
   whatever it could reach. Wrapping BEFORE anything has to be squashed is the fix — a
   breakpoint that arrives after compression starts is not a breakpoint, it is a limit. */
@media (max-width:760px){
  .cardgrid{grid-template-columns:1fr;}
  .brandbar{flex-wrap:wrap;}
  .sitenav{margin-left:0;width:100%;}
  section{padding:52px 0;}
  /* 24px, not 30px. Below 640 the brandbar wraps and the nav drops to its own row, so
     the nav's y position is set by the height of the row above it. On the home page
     that row is the 38px logo; here it is a.home, which carries min-height:44px because
     it is a link and has to clear the touch floor. That 6px difference pushed the nav
     row 6px lower on every sub-page. Taking 6px off the top padding cancels it exactly,
     and the touch target is untouched. */
  .masthead{padding-top:24px;}
}

/* ---- Minimum legible size on a touch device -------------------------------
   Same floor as index.html, and the same reasoning: sizes tuned on a desktop do
   not survive a phone held at arm's length, and this audience is coaches and
   board members who are mostly over forty. 14px is the floor, 15px for real
   body copy. Keyed to pointer:coarse rather than width so it follows the device
   rather than the window. */
@media (pointer:coarse){
  .faq-list p, .cardgrid span, .cite, .crumb{font-size:14px;line-height:1.55;}
  .prose p, .prose li{font-size:16px;}
  footer .legal{font-size:14px;line-height:1.55;}
  /* 14px, matching index.html. This is the line that says the software may not be
     copied or redistributed, so it has to be readable. */
  footer .fine{font-size:14px;}
  /* The footer mail link, raised from 13px on 4 September. It already had a 44px touch
     target, so it was easy to hit and hard to read: 35 characters at 13px on a phone,
     under the 14px floor this block exists to enforce. It is the only route to a human
     on any page of the site, so of everything in the footer it is the last thing that
     should be the smallest.

     It was missed for weeks because site-mobile.js scans p, li, span, figcaption, label
     and .fine, and not a. The gate had no opinion about links, so nothing objected. Add
     "a" to that selector list and the live landing page, which still ships this at 13px,
     will report it too. */
  footer .foot-mail{font-size:14px;}
  .photoband figcaption{font-size:13px;}
}

/* The footer lockup is white-on-navy; print drops backgrounds by default, leaving a
   white wordmark on white paper. Found 17 September 2026 by the Fable audit. */
@media print{ footer .footlock{display:none;} }

/* ---- Practice guide (/practice-guide), 23 September 2026 --------------------------
   Built by tools/practice-guide/build-web.js. Lane colors match the printed practice
   plan and the PDF: infield blue, outfield green. */
.pg-dl{margin:6px 0 18px;}
.pg-toc{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:0 0 30px;font-size:15px;}
.pg-toc b{color:var(--muted);font-weight:700;margin-right:4px;}
.pg-toc a{padding:8px 12px;min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:22px;text-decoration:none;font-weight:600;}
.pg-toc a:hover{border-color:var(--green);}
.pg-flow{list-style:none;margin:8px 0 22px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:pg;}
.pg-flow li{background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);border-radius:6px;padding:12px 14px;font-size:15px;line-height:1.45;}
.pg-flow li b{display:block;font-size:17px;margin:2px 0 4px;}
.pg-clk{font-size:13px;font-weight:800;color:var(--green-dk);letter-spacing:.3px;}
.pg-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px;}
.pg-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--green);border-radius:6px;padding:16px 18px;}
.pg-card h3{margin:0 0 8px;font-size:19px;}
.pg-card p{margin:0;font-size:16px;line-height:1.55;}
.pg-card dl{margin:0;display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:16px;line-height:1.5;}
.pg-card dt{font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding-top:3px;}
.pg-card dt.if,.pg-sit b.if{color:#1c4a80;}
.pg-card dt.of,.pg-sit b.of{color:var(--green-dk);}
.pg-card dt.watch{color:#8a5a22;}
.pg-card dd{margin:0;}
.pg-badge{display:inline-block;font-size:13px;font-weight:700;color:var(--green-dk);background:#e7f3ec;border-radius:12px;padding:3px 9px;vertical-align:3px;margin-left:6px;}
.pg-sits{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px;}
.pg-sit{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 16px 12px 10px;}
.pg-sit h3{margin:0 0 6px;font-size:19px;}
.pg-sit p{margin:0 0 6px;font-size:16px;line-height:1.5;}
.pg-fig{margin:0;flex:none;}
.pg-fig svg{display:block;width:200px;height:200px;}
@media (max-width:900px){.pg-flow{grid-template-columns:1fr 1fr;}.pg-cards,.pg-sits{grid-template-columns:1fr;}}
@media (max-width:560px){.pg-flow{grid-template-columns:1fr;}.pg-sit{flex-direction:column;align-items:flex-start;}.pg-fig svg{width:260px;height:260px;}.pg-card dl{grid-template-columns:1fr;gap:2px;}.pg-card dd{margin-bottom:6px;}}
@media print{.pg-toc,.pg-dl{display:none;}}