/* NSA Florida Fastpitch — mobile first. Every rule below the base applies
   upward from a phone, because that is where this site is actually read. */

:root {
  --red: #b0121a;
  --red-dark: #8c0e15;
  --navy: #10233f;
  --navy-soft: #273c5c;
  --ink: #16202b;
  --body: #3f4e5e;
  --muted: #6c7c8c;
  --line: #d9e0e7;
  --line-soft: #eaeff3;
  --ground: #f4f6f9;
  --surface: #fff;
  --gold: #9a6b00;
  --gold-bg: #fdf4de;
  --green: #1d6b4c;
  --green-bg: #e6f4ed;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(22, 32, 43, .06), 0 4px 14px rgba(22, 32, 43, .07);
  --wrap: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--body);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--ink); line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: 1.75rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--red); }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 760px; }
main { padding: 24px 0 56px; }
.skip {
  position: absolute; left: -9999px; background: var(--navy); color: #fff;
  padding: 10px 16px; z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 4px; }

/* ---------- header ---------- */
header.site { background: var(--navy); color: #fff; }
.bar {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.mark {
  background: var(--red); color: #fff; font-weight: 800; letter-spacing: .06em;
  padding: 5px 9px; border-radius: 6px; font-size: .95rem;
}
.word { font-weight: 650; letter-spacing: -.01em; font-size: 1.02rem; }
.menu {
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 7px; padding: 9px 14px; font: inherit; font-size: .9rem; cursor: pointer;
  min-height: 44px;
}
.nav { display: none; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, .15); }
body.nav-open .nav { display: flex; }
.nav a {
  color: #fff; text-decoration: none; padding: 14px 16px; font-weight: 550;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  max-width: var(--wrap); width: 100%; margin: 0 auto;
}
.nav a[aria-current="page"] { color: #ffd9db; box-shadow: inset 3px 0 0 var(--red); }

/* ---------- page banner ----------
   Every page other than the home page wears a shorter version of the hero:
   same navy, same photograph, same taper, with the page's title on it. It is
   the hero's own rules at a smaller size, so there is one banner on the site
   rather than nine different headers. */
.pagehead {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: #fff; padding: 34px 0 32px;
  margin-bottom: 26px;
  /* NOT a flex container. .wrap carries "margin: 0 auto", and an auto margin
     on the cross axis cancels flex stretch — the wrap shrank to its own
     content and centred itself, so the banner's title sat 250px right of
     every other column on the page. Block flow keeps it on the grid. */
}
.pagehead > .wrap { position: relative; }
.pagehead h1 { color: #fff; margin: 0; text-shadow: 0 1px 14px rgba(8, 18, 34, .55); }
.pagehead .lede {
  color: #e6edf6; margin: .5em 0 0; max-width: 46rem;
  text-shadow: 0 1px 10px rgba(8, 18, 34, .5);
}
.pagehead .lede a { color: #fff; }
/* The art sits behind the words, and the words stay inside the column that
   the photograph does not reach. */
@media (min-width: 900px) {
  .pagehead > .wrap > * { max-width: 36rem; }
}
@media (max-width: 860px) {
  .pagehead .hero-photo { opacity: .26; }
}
/* The Rules page supplies its own artwork (the weather scene) in place of the
   photograph; it fills the band the same way. */
.pagehead .scene { position: absolute; inset: 0; height: 100%; z-index: -2; opacity: .5; }
.pagehead .scene svg { width: 100%; height: 100%; }

/* ---------- hero ---------- */
/* The hero carries NSA Florida's own photographs — the action shots from the
   old site's template background, the only softball imagery the association
   owns.

   They are PORTRAIT (295x578 originally). Everything that went wrong before
   came from forcing them into a short wide banner: cropping a tall photo into
   a letterbox cuts the players' heads off. So the banner is tall enough to
   show them WHOLE ("auto 100%" fits the height, never crops), and the layer
   holding them is only as wide as the photographs — which is also what makes
   the fade work, since a mask on a full-width layer was fading across empty
   navy and leaving the photo edge hard. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: #fff; padding: 46px 0 44px;
  min-height: 400px;                  /* tall enough for an upright photograph */
}
/* A real <img>, not a pseudo-element background. background-size:auto 100%
   kept resolving to something far short of the banner height and there was
   no way to see why; an element has a box I can measure. */
.hero-photo {
  position: absolute; top: 0; z-index: -2;
  /* Align the photo's right edge with the content column rather than the
     window, so it sits on the same grid as the nav and the text. */
  right: max(0px, calc((100% - var(--wrap)) / 2));
  height: 100%; width: auto; max-width: none;
  object-fit: cover; object-position: center top;
  /* Dissolve the left edge into the navy so there is no pasted rectangle. */
  /* Tapered on BOTH edges so neither side ends on a hard line. The left fade
     is long because it has to dissolve across to the text; the right one is
     short and gentle on purpose — the batter's face sits near that edge, and
     a long fade there would wash her out. It softens the boundary without
     taking anything off her. */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.55) 30%, #000 68%, #000 88%, rgba(0,0,0,.45) 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.55) 30%, #000 68%, #000 88%, rgba(0,0,0,.45) 100%);
}
@media (max-width: 860px) {
  /* No room for a photo column beside the words: it becomes a faint wash
     behind everything instead. */
  .hero { min-height: 0; }
  .hero-photo {
    width: 100%; height: 100%; object-position: center 22%;
    opacity: .3;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(16,35,63,.7) 0%, rgba(16,35,63,.8) 100%);
  }
}
.hero > .wrap { position: relative; }
.hero h1 { color: #fff; font-size: 1.9rem; text-shadow: 0 1px 14px rgba(8, 18, 34, .55); }
.hero .eyebrow {
  text-transform: uppercase; letter-spacing: .13em; font-size: .72rem;
  font-weight: 700; color: #ffb3b7; margin: 0 0 .6em;
}
.hero-body { color: #e6edf6; text-shadow: 0 1px 10px rgba(8, 18, 34, .5); }
/* The hero text column stops before the photographs start, so a long line
   never runs across a player's face. */
.hero .wrap > * { max-width: 46rem; }
@media (min-width: 900px) { .hero .wrap > * { max-width: 34rem; } }
.hero-body a { color: #fff; }
.hero-body ul { padding-left: 1.1em; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.btn {
  display: inline-block; background: var(--red); color: #fff; text-decoration: none;
  font-weight: 650; padding: 13px 20px; border-radius: 8px; min-height: 44px;
  border: 2px solid var(--red);
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .55); }
.btn.ghost:hover { background: rgba(255, 255, 255, .12); }
/* .ghost is for the dark hero — white text on a translucent white border,
   which is invisible on a white panel. .outline is the same shape for light
   surfaces. */
.btn.outline { background: #fff; color: var(--red); border-color: var(--line); }
.btn.outline:hover { border-color: var(--red); background: #fff5f5; }

/* ---------- sections ---------- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 14px; }
.sec-head h2 { margin: 0; }
.more { font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lede { font-size: 1.05rem; max-width: 62ch; }
.count { color: var(--muted); font-size: .88rem; margin: -.3em 0 1em; }
.empty {
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 20px; color: var(--muted); text-align: center;
}
.crumb { font-size: .9rem; margin-bottom: .6em; }
.crumb a { text-decoration: none; font-weight: 600; }

/* ---------- tournament cards ---------- */
.cards { display: grid; gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-link { display: block; padding: 16px; color: inherit; text-decoration: none; }
.card-link:hover h3 { color: var(--red); }
.card h3 { margin: 0 0 12px; font-size: 1.02rem; }
.card-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.card-head:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: var(--line-soft); color: var(--muted);
}
.chip.now { background: #fde9ea; color: var(--red); }
.chip.warn { background: var(--gold-bg); color: var(--gold); }
.chip.done { background: var(--green-bg); color: var(--green); }

.meta, .facts { margin: 0; display: grid; gap: 7px; }
.meta > div, .facts > div { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline; }
.meta dt, .facts dt {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 700;
}
.meta dd, .facts dd { margin: 0; font-size: .93rem; color: var(--ink); }
.facts {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; gap: 12px; margin-bottom: 24px;
}
.facts > div { grid-template-columns: 72px 1fr; }
.facts dd { font-size: 1rem; }

/* ---------- results ---------- */
.results { margin: 0 0 28px; }
.division { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.division h3 { margin: 0 0 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.placings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.placings li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; }
.pos { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.place-1 .pos { color: var(--gold); }
.place-2 .pos { color: var(--navy-soft); }
.team { color: var(--ink); font-weight: 600; }
.place-1 .team { font-size: 1.05rem; }
.note { grid-column: 2; font-size: .82rem; color: var(--muted); }

/* ---------- notes + downloads ---------- */
.notes { margin-bottom: 28px; }
.notes ul { padding-left: 1.15em; }
.notes li { margin-bottom: .4em; }
.downloads { margin-bottom: 24px; }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.files a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; text-decoration: none; color: var(--ink); font-weight: 600;
  min-height: 44px;
}
.files a:hover { border-color: var(--red); color: var(--red); }
.fmeta { font-size: .74rem; color: var(--muted); font-weight: 700; letter-spacing: .05em; white-space: nowrap; }

.prevnext { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .88rem; }
.prevnext a { text-decoration: none; font-weight: 600; }

/* ---------- footer ---------- */
footer.site { background: var(--navy); color: #c3d0e0; padding: 32px 0 20px; margin-top: 40px; }
footer.site .cols { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; display: grid; gap: 22px; }
footer.site h2 { color: #fff; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .7em; }
footer.site p { font-size: .9rem; margin: 0; }
footer.site a { color: #fff; }
.fine { max-width: var(--wrap); margin: 26px auto 0; padding: 16px 16px 0; border-top: 1px solid rgba(255, 255, 255, .13); font-size: .8rem; color: #8ea2bb; }

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  h1 { font-size: 2.1rem; }
  .hero h1 { font-size: 2.4rem; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  footer.site .cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .menu { display: none; }
  /* Contained, not full-bleed. Centring the items across the whole window
     left them floating clear of the logo and of every column below; the bar
     now starts and ends on the same grid as the rest of the page. */
  .nav {
    display: flex; flex-direction: row; border-top: none;
    max-width: var(--wrap); margin: 0 auto; padding: 0 16px;
    justify-content: space-between; gap: 4px;
    background: rgba(0, 0, 0, .18);
  }
  .nav a { width: auto; border-bottom: none; padding: 14px 10px; font-size: .94rem; white-space: nowrap; }
  .nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--red); color: #fff; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  footer.site .cols { grid-template-columns: repeat(4, 1fr); }
  main { padding: 32px 0 72px; }
}

/* ---------- admin ---------- */
body.admin { background: #eef1f5; }
.adminbar { background: var(--ink); color: #fff; padding: 10px 16px; font-size: .9rem; }
.adminbar .wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.adminbar a { color: #fff; text-decoration: none; font-weight: 600; }
.adminbar .spacer { margin-left: auto; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); min-height: 46px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field .hint { font-size: .8rem; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.row2 { display: grid; gap: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
button.btn, input[type="submit"] { font: inherit; cursor: pointer; }
.btn.small { padding: 9px 14px; font-size: .88rem; min-height: 40px; }
.btn.danger { background: #fff; color: var(--red); border-color: var(--line); }
.btn.danger:hover { background: #fde9ea; border-color: var(--red); }
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 600; }
.flash.ok { background: var(--green-bg); color: var(--green); }
.flash.bad { background: #fde9ea; color: var(--red); }
.adminlist { display: grid; gap: 8px; }
.adminrow {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; display: grid; gap: 4px;
}
.adminrow .top { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
.adminrow a { text-decoration: none; font-weight: 650; color: var(--ink); }
.adminrow a:hover { color: var(--red); }
.adminrow .sub { font-size: .84rem; color: var(--muted); }
.divrow { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.divrow .dname { font-weight: 700; font-size: .85rem; color: var(--muted); }
.divrow input { min-height: 44px; }
@media (min-width: 700px) {
  .row2 { grid-template-columns: 1fr 1fr; }
  .divrow { grid-template-columns: 76px 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- schedule archive ---------- */
.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;
}
.searchbar { display: flex; gap: 8px; margin: 0 0 22px; flex-wrap: wrap; }
.searchbar input {
  flex: 1 1 240px; font: inherit; padding: 12px 14px; min-height: 46px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.years { display: grid; gap: 10px; }
.year {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: baseline;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 18px; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  min-height: 44px;
}
.year:hover { border-color: var(--red); }
.year:hover .yr { color: var(--red); }
.yr { font-size: 1.3rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.yn { color: var(--body); font-size: .92rem; }
.ys { color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.pageof { color: var(--muted); font-size: .85rem; }
@media (min-width: 640px) { .years { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .years { grid-template-columns: repeat(3, 1fr); } }

/* ---------- posted results ----------
   A ladder of weekends, each with its age groups. Champion and runner-up sit
   in one row per division: on a phone the row stacks, so the label has to
   travel with the team name rather than sitting in a column header. */
.board { display: grid; gap: 16px; margin: 22px 0 8px; }
.result-event {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--red); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.re-head { margin: 0 0 4px; font-size: 1.1rem; line-height: 1.3; }
.re-head a { color: var(--ink); text-decoration: none; }
.re-head a:hover { text-decoration: underline; }
.re-when { display: block; font-size: .85rem; font-weight: 500; color: var(--muted); margin-top: 3px; }
.re-note { margin: 8px 0 0; font-size: .88rem; font-style: italic; color: var(--muted); }
.re-divs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
/* Grid, not flex: with flex each place sized to its own text and the
   Runner-up column zig-zagged down the card by however long the champion's
   name happened to be. */
.re-divs li {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px 12px;
  padding-top: 8px; border-top: 1px solid var(--line);
}
.re-div { font-weight: 700; color: var(--red); font-size: .95rem; }
.re-places { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 20px; }
@media (min-width: 520px) { .re-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.re-place { display: flex; flex-direction: column; font-size: .95rem; color: var(--ink); }
.re-place.second { color: var(--body); }
.re-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.list-heading { margin: 34px 0 0; font-size: 1.15rem; }

/* ---------- sponsors ---------- */
.sponsors { display: grid; gap: 14px; margin-top: 22px; }
.sponsor {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; text-decoration: none; color: inherit; box-shadow: var(--shadow);
}
a.sponsor:hover { border-color: var(--red); }
/* Logos arrive in whatever shape the sponsor gave us, so fix the box and let
   the image scale inside it — never stretch a sponsor's mark. */
.slogo { display: flex; align-items: center; justify-content: center; min-height: 120px; }
.slogo img { max-width: 100%; max-height: 150px; width: auto; height: auto; }
.noLogo { font-size: 1.15rem; font-weight: 700; color: var(--ink); text-align: center; }
.sblurb { margin: 0; font-size: .92rem; color: var(--body); text-align: center; }
.svisit { font-size: .85rem; font-weight: 650; color: var(--red); text-align: center; }
/* Hotel cards reuse the sponsor grid. The detail lines stack under the brand
   mark; margin-top:auto keeps the booking line on the bottom edge so a row of
   cards with different amounts of detail still lines up. */
.hmeta {
  display: flex; flex-direction: column; gap: 4px; margin: 0 0 auto;
  text-align: center;
}
.hname { font-weight: 700; color: var(--ink); }
.harea { font-size: .92rem; color: var(--body); }
.hphone { font-size: .92rem; color: var(--body); }
.hnote { font-size: .88rem; color: var(--muted); font-style: italic; }
@media (min-width: 640px) { .sponsors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .sponsors { grid-template-columns: repeat(3, 1fr); } }

/* ---------- homepage notice panel ---------- */
.notice-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--red); border-radius: var(--radius);
  padding: 20px 22px; margin: 28px 0 8px; box-shadow: var(--shadow);
}
.notice-panel h2 { margin: 0 0 12px; font-size: 1.1rem; }
.notice-panel p { margin: 0 0 .9em; }
.notice-panel p:last-child { margin-bottom: 0; }
.notice-panel ul { margin: 0 0 .9em; padding-left: 1.15em; }
.notice-panel li { margin-bottom: .45em; }
.notice-panel a { font-weight: 600; }

/* ---------- headings written as "Something:" in an editable page ---------- */
.prose-h {
  font-size: 1.05rem; margin: 1.6em 0 .5em;
  padding-bottom: .35em; border-bottom: 2px solid var(--line);
}
.prose-h:first-child { margin-top: 0; }

/* ---------- brand mark ---------- */
.brandmark {
  height: 34px; width: auto; display: block;
  background: #fff; border-radius: 5px; padding: 3px 5px;
}
@media (min-width: 900px) { .brandmark { height: 40px; } }

/* ---------- tournaments grouped by month ---------- */
.jump {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px;
}
.jump a {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; text-decoration: none; font-weight: 650; font-size: .9rem;
  color: var(--ink); min-height: 38px; display: inline-flex; align-items: center;
}
.jump a:hover { border-color: var(--red); color: var(--red); }
.month { margin: 0 0 30px; scroll-margin-top: 12px; }
.month-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 1.05rem; margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.month-n {
  font-size: .75rem; font-weight: 700; color: var(--muted);
  background: var(--line-soft); border-radius: 999px; padding: 3px 10px;
}

/* ---------- tappable footer ----------
   Footer links were 20px tall. These are the phone numbers someone jabs at
   while standing on a field holding a scorebook, so give them a real target
   without turning the footer into a list of buttons. */
footer.site p a {
  display: inline-block;
  padding: 7px 0;
  line-height: 1.3;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (pointer: coarse) {
  footer.site p a { padding: 9px 0; }
}

/* ---------- phone and email are actions, not prose ----------
   An inline link inside a sentence can fairly stay inline-sized, but a phone
   number or an email address is the thing the visitor came to tap — often
   one-handed, outdoors, in sunlight. Give those a real target wherever they
   appear, without inflating ordinary text links. */
a[href^="tel:"], a[href^="mailto:"] {
  display: inline-block;
  /* Vertical padding only. The horizontal 2px used to push the sentence's
     full stop away from the number — "(727) 348-7301 ." — and bought nothing:
     the number is already a wide target, it is the HEIGHT that was missing. */
  padding: 8px 0;
  line-height: 1.25;
  font-weight: 600;
  text-underline-offset: 3px;
}
@media (pointer: coarse) {
  /* Vertical only, same reason as above: the 2px either side floated the
     sentence's full stop away from the number. This touch override is the
     one that actually applies on a phone, so missing it left the gap on
     exactly the devices the padding exists for. */
  a[href^="tel:"], a[href^="mailto:"] { padding: 10px 0; }
}

/* ---------- seasons: collapsible, and some actual colour ---------- */
.season { margin: 0 0 14px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.season-head {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 15px 18px; min-height: 56px;
  background: linear-gradient(100deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: #fff; font-weight: 700;
}
.season-head::-webkit-details-marker { display: none; }
.season-head:hover { background: linear-gradient(100deg, #16304f 0%, #32496c 100%); }
.season-year { font-size: 1.45rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.season-n { font-size: .85rem; font-weight: 600; color: #c3d4ea; }
/* A chevron drawn in CSS, flipped when the season is open. */
.season-cue {
  margin-left: auto; width: 11px; height: 11px; flex: none;
  border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .15s ease;
}
.season[open] .season-cue { transform: rotate(225deg) translate(-2px, -2px); }
.season-body { padding: 18px 16px 6px; background: var(--ground); }
.season-body .month:last-child { margin-bottom: 14px; }

/* Month heads get the brand red rather than a plain grey rule. */
.month-head {
  border-bottom: none; padding: 0 0 0 12px;
  border-left: 4px solid var(--red); margin-bottom: 14px;
}
.month-head span:first-child { color: var(--ink); }

/* Cards lift a little and pick up the brand colour on the way past. */
.card { transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease; }
.card:hover { border-color: var(--red); transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(176,18,36,.08), 0 10px 22px rgba(22,32,43,.10); }

.older {
  margin: 26px 0 0; padding: 20px 22px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--navy-soft);
}
.older h2 { font-size: 1.05rem; margin-bottom: .5em; }
.older p { margin: 0 0 .8em; color: var(--body); max-width: 62ch; }
.older .cta { margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; } .season-cue { transition: none; }
}

/* ---------- drawn scene banner ---------- */
.scene { width: 100%; height: 140px; overflow: hidden; background: #8fc7ea; }
.scene svg { display: block; width: 100%; height: 100%; }
@media (min-width: 640px) { .scene { height: 180px; } }
@media (min-width: 1024px) { .scene { height: 220px; } }
.scene + .wrap { padding-top: 24px; }

/* external-link cue in the nav */
.ext {
  display: inline-block; width: .55em; height: .55em; margin-left: .4em;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(.1em); opacity: .75;
}