/* Chackbay BallPark Inc. Phase 1 informational site.
   Colours taken from the 1994 hand-painted sign, the press box, and the flyers.
   No external fonts or scripts: the site must render correctly straight from
   disk (file://) with no server and no network. */

:root {
  --green-900: #0f3320;
  --green-800: #164529;
  --green-700: #1d5c37;
  --green-600: #256f43;
  --gold: #f0b323;
  --gold-dark: #c9900d;
  --cream: #faf7ef;
  --paper: #ffffff;
  --ink: #1c1f1d;
  --ink-soft: #4a534d;
  --line: #e2ded1;
  --shadow: 0 2px 4px rgba(15, 51, 32, .06), 0 8px 24px rgba(15, 51, 32, .08);
  --wrap: 1080px;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Audience skews older: parents and grandparents. Base size stays generous. */
  font-size: 18px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-700); }
a:hover { color: var(--green-600); }

/* Chrome already draws a strong two-tone ring here, verified by tabbing the nav and
   looking at it, so this is consistency across browsers rather than a repair. Gold
   reads on the green header and on white; on the two gold surfaces it would vanish,
   so those invert to the dark green. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

nav.site-nav a[aria-current="page"]:focus-visible,
.btn.gold:focus-visible,
.announce .kicker:focus-visible {
  outline-color: var(--green-900);
}

/* Someone who has asked their system to reduce motion gets no smooth scroll and no
   lift on the tiles. Everything still works; it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .tile:hover { transform: none; }
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); color: var(--green-800); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }

.lede { font-size: 1.15rem; color: var(--ink-soft); }

/* ---------- preview banner ----------
   Shown while the site is in review. Delete the .preview-banner block from each
   page (and this rule) to launch. */

.preview-banner {
  background: #7a4b00;
  color: #fff5e0;
  text-align: center;
  padding: 9px 18px;
  font-size: .88rem;
  line-height: 1.45;
  border-bottom: 3px solid var(--gold);
}

/* Lighter than --gold: the brand gold on this brown measures ~4.1:1, just under
   the 4.5:1 WCAG AA threshold. Caught by an axe-core audit, not by eye. */
.preview-banner strong { color: #ffdb8a; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- header ---------- */

.site-header {
  background: var(--green-900);
  color: #fff;
  border-bottom: 4px solid var(--gold);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
}

.brand img { width: 54px; height: auto; flex: none; }

.brand-name {
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: .01em;
}

.brand-sub {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

nav.site-nav { display: flex; flex-wrap: wrap; gap: 4px; }

nav.site-nav a {
  color: #e8f0e9;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: 8px 13px;
  border-radius: 6px;
  white-space: nowrap;
}

nav.site-nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

nav.site-nav a[aria-current="page"] {
  background: var(--gold);
  color: var(--green-900);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--green-900);
  color: #fff;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: clamp(320px, 52vw, 560px);
  object-fit: cover;
  /* The hero is a night photograph and is already dark. Knocking it back the
     way a bright daytime shot needs would kill the field lights, which are the
     whole point of the picture. */
  opacity: .88;
}

.hero-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 24px 20px;
  /* Scrim is heaviest top and bottom, lightest across the middle, so the
     headline stays legible without flattening the lights on the horizon. */
  background: linear-gradient(180deg,
    rgba(6, 20, 12, .62) 0%,
    rgba(6, 20, 12, .28) 42%,
    rgba(6, 20, 12, .34) 62%,
    rgba(6, 20, 12, .82) 100%);
}

/* The phone crop is not the desktop framing. At 390px the hero is 320px tall and
   `cover` lands the tagline on lit turf rather than on the dark treeline, while the
   scrim above is at its lightest (.28) in exactly that band. Measured under the
   glyph pixels, not estimated: the gold tagline came to 3.51:1 median against the
   4.5:1 it needs, failing on 94.5% of its pixels. Desktop measures 7.47:1 and the
   white h1 passes everywhere, so only phones are darkened and the lights survive
   on the framing where they actually read. */
@media (max-width: 700px) {
  .hero-body {
    background: linear-gradient(180deg,
      rgba(6, 20, 12, .72) 0%,
      rgba(6, 20, 12, .62) 38%,
      rgba(6, 20, 12, .70) 62%,
      rgba(6, 20, 12, .88) 100%);
  }
}

.hero-body h1 {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.7);
  margin-bottom: .25em;
}

.hero-tagline {
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  color: var(--gold);
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7);
}

.hero-credit {
  position: absolute;
  right: 12px;
  bottom: 8px;
  margin: 0;
  font-size: .72rem;
  color: rgba(255,255,255,.55);
}

/* Compact hero for interior pages */
.page-head {
  background: var(--green-800);
  color: #fff;
  padding: 38px 0 32px;
  border-bottom: 4px solid var(--gold);
}
.page-head h1 { color: #fff; margin-bottom: .2em; }
.page-head p { color: #cfe0d3; margin: 0; max-width: 62ch; }

/* ---------- sections ---------- */

section { padding: 46px 0; }
section.tight { padding: 32px 0; }
section.alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-title { text-align: center; margin-bottom: 1.2em; }

/* The home page proof of the hero line, sitting directly under it. Held narrow and
   centred so it reads as one thought rather than as a block of body copy. */
.intro-line {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--ink-soft);
}

/* Randy's sentence, and the point of the section. It carried .lede at first, which
   is soft grey, so the claim rendered fainter than the list of examples underneath
   it. Descending emphasis now runs heading, claim, evidence. */
.intro-claim {
  max-width: 54ch;
  margin: 0 auto .9em;
  text-align: center;
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- announcement ---------- */

.announce {
  background: var(--paper);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow);
  max-width: 760px;
  margin: 0 auto;
}

.announce .kicker {
  display: inline-block;
  background: var(--gold);
  color: var(--green-900);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.announce h2 { margin-bottom: .35em; }
.announce p:last-of-type { margin-bottom: 1.2em; }

/* ---------- tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.tile {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green-700);
  border-radius: var(--radius);
  padding: 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease;
}

.tile:hover { transform: translateY(-3px); border-top-color: var(--gold); color: inherit; }
.tile h3 { color: var(--green-800); margin-bottom: .35em; }
.tile p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* ---------- stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  text-align: center;
}

.stat {
  background: var(--green-800);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 14px;
}

.stat b {
  display: block;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 800;
  color: var(--gold);
  line-height: 1.1;
}

.stat span { font-size: .88rem; color: #d5e4d9; }

.stat-note { text-align: center; font-size: .86rem; color: var(--ink-soft); margin-top: 14px; }

/* ---------- split ---------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 34px;
  align-items: center;
}

.split img { border-radius: var(--radius); box-shadow: var(--shadow); }

figure { margin: 0; }
figcaption { font-size: .86rem; color: var(--ink-soft); margin-top: 8px; }

/* ---------- emblem showcase ---------- */

.emblem-showcase { text-align: center; }
.emblem-showcase img { width: min(300px, 68vw); margin: 0 auto 14px; }

/* The Cajuns' own motto, sitting with the 1994 emblem because that block is already
   their identity on the page. It was a floating note halfway up and read as thrown
   in. Colour matches the Wall of Fame roles: --gold-dark measures ~2.6:1 on white
   and fails AA; this is ~5.5:1. */
.cajuns-motto {
  font-size: 1.12rem;
  font-weight: 700;
  color: #8a6200;
  margin: -.15em 0 .7em;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--green-700);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 6px;
  border: 2px solid var(--green-700);
}

.btn:hover { background: var(--green-600); border-color: var(--green-600); color: #fff; }

.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--green-900); }
.btn.gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }

.btn.ghost { background: transparent; color: var(--green-700); }
.btn.ghost:hover { background: var(--green-700); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: .95rem;
  min-width: 560px;
}

caption {
  caption-side: bottom;
  font-size: .86rem;
  color: var(--ink-soft);
  text-align: left;
  padding-top: 10px;
}

th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }

/* Coach Pitch and Kid Pitch both use a machine; the names are legacy and say the
   opposite of what happens. Annotated on the row rather than in a footnote, because
   a parent scans this table for their child's age and stops reading there. */
.div-note { font-weight: 400; font-size: .88em; color: var(--ink-soft); white-space: nowrap; }
thead th { background: var(--green-800); color: #fff; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fbfaf6; }
td.home { color: var(--green-700); font-weight: 700; }
td.away { color: var(--ink-soft); font-weight: 600; }
tr.bye td { color: var(--ink-soft); font-style: italic; }

/* ---------- responsive tables ----------
   A 6-column schedule cannot be read on a phone by scrolling sideways, and most
   of this audience is on a phone. Under 700px each row restacks into its own
   card, with the column name carried in via data-label. */

@media (max-width: 700px) {
  table.responsive {
    min-width: 0;
    display: block;
    background: transparent;
    box-shadow: none;
  }

  table.responsive thead { display: none; }
  table.responsive tbody { display: block; }

  table.responsive tbody tr,
  table.responsive tbody tr:nth-child(even) {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--green-700);
    border-radius: var(--radius);
    margin-bottom: 14px;
    padding: 4px 15px 10px;
    box-shadow: var(--shadow);
  }

  table.responsive tbody tr.bye { border-left-color: var(--line); }

  /* A bye week or an undecided playoff has no kickoff times, and stacking three
     em-dashes under it is noise. Hide the empty cells and drop the redundant
     label from the one that remains. */
  table.responsive tr.no-times td:not([data-label="Opponent"]) { display: none; }
  table.responsive tr.no-times td[data-label="Opponent"] {
    justify-content: flex-start;
    border-top: 0;
    padding-top: 0;
  }
  table.responsive tr.no-times td[data-label="Opponent"]::before { content: none; }

  table.responsive th[scope="row"] {
    display: block;
    border: 0;
    padding: 10px 0 6px;
    font-size: 1.1rem;
    color: var(--green-800);
  }

  table.responsive td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border: 0;
    border-top: 1px solid var(--line);
    padding: 8px 0;
    text-align: right;
  }

  table.responsive td::before {
    content: attr(data-label);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: left;
    flex: none;
  }

  /* A cell spanning both gendered columns needs no redundant label. */
  table.responsive td[colspan] { justify-content: flex-start; }

  /* Once the table is display:block the caption loses its width and collapses
     to one word per line. Seen in a real 390px screenshot, not predicted. */
  table.responsive caption {
    display: block;
    width: 100%;
    padding-top: 4px;
    padding-bottom: 12px;
  }
}

/* ---------- calendar list ---------- */

.calendar { list-style: none; margin: 0; padding: 0; }

.calendar li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.calendar li:last-child { border-bottom: 0; }
.calendar .when { font-weight: 800; color: var(--green-800); min-width: 190px; }

/* ---------- wall of fame ---------- */

.honor-roll {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  /* Cards size to their own content. One honoree with a real story is several
     times taller than a two-line entry, and stretching left the short ones as
     mostly empty boxes. */
  align-items: start;
}

.honoree {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow);
}

.honoree h3 {
  font-size: 1.4rem;
  color: var(--green-800);
  margin-bottom: .15em;
}

.honoree .role {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  /* Darker than --gold-dark, which measures ~2.6:1 on white and fails AA.
     This is ~5.5:1. Small uppercase text is exactly where contrast matters. */
  color: #8a6200;
  margin-bottom: 14px;
}

.honoree p { margin-bottom: .8em; }
.honoree p:last-child { margin-bottom: 0; }

.honoree .inscription {
  border-left: 3px solid var(--line);
  padding-left: 14px;
  font-style: italic;
  color: var(--ink-soft);
  font-size: .95rem;
}

/* A nomination prompt sitting in the same grid as the honorees. */
.honoree.open-slot {
  background: transparent;
  border: 2px dashed var(--line);
  border-top: 2px dashed var(--line);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.honoree.open-slot h3 { color: var(--ink-soft); }

/* ---------- memories gallery ---------- */

.era { margin-bottom: 42px; }
.era:last-child { margin-bottom: 0; }

.era > h3 {
  font-size: 1.35rem;
  color: var(--green-800);
  border-bottom: 3px solid var(--gold);
  padding-bottom: 8px;
  margin-bottom: .35em;
}

.era > p { color: var(--ink-soft); font-size: .95rem; max-width: 62ch; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.photo {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.photo a { display: block; background: var(--green-900); line-height: 0; }

/* `contain`, not `cover`. The first contact sheet used cover and cropped the
   subject out of every tile -- Randy called it correctly. In a gallery of family
   photographs the faces are the content, so the whole frame stays visible and
   the letterboxing sits on park green. */
/* A square frame, not a letterbox one. Most of what people saved off Facebook is
   a phone photo -- 720x960 -- and in a 348x200 frame `contain` rendered it 150px
   wide with green bars either side, measured on a 390px screen. A square frame
   gives a portrait photo 75% of the tile width and a landscape one all of it.
   The fixed height is the fallback for phones too old for aspect-ratio. */
.photo img { width: 100%; height: 260px; object-fit: contain; }

@supports (aspect-ratio: 1 / 1) {
  .photo img { height: auto; aspect-ratio: 1 / 1; }
}

.photo figcaption {
  padding: 13px 15px 15px;
  font-size: .93rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.photo .year {
  align-self: flex-start;
  background: var(--gold);
  color: var(--green-900);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.photo .credit {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- written memories ---------- */

.quote-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}

.memory-quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px 18px;
  box-shadow: var(--shadow);
  margin: 0;
}

.memory-quote p { font-size: .97rem; margin-bottom: .7em; }
.memory-quote footer { font-size: .85rem; font-weight: 700; color: var(--green-800); }

/* ---------- notes ---------- */

.note {
  background: #fffaea;
  border-left: 4px solid var(--gold);
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  font-size: .95rem;
  color: var(--ink-soft);
}

.note strong { color: var(--ink); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--green-900);
  color: #cfe0d3;
  padding: 40px 0 28px;
  border-top: 4px solid var(--gold);
  font-size: .95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px;
  margin-bottom: 26px;
}

/* h3 rather than h4: the footer followed an h2, and jumping to h4 skips a level,
   which screen-reader users navigate by. Styling is unchanged. */
.site-footer h3 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }
.site-footer a { color: var(--gold); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 18px;
  font-size: .85rem;
  color: #9db3a4;
}

.footer-bottom p { margin: 0 0 .4em; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .brand img { width: 44px; }
  nav.site-nav a { padding: 7px 10px; font-size: .9rem; }
  .calendar .when { min-width: 100%; }
}