:root { --navy:#04284f; --cream:#f5efe7; --red:#9f0803; --gold:#d79700; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:#111; font-family:Arial,Helvetica,sans-serif; }
.page-shell { width:100%; }
.artwork-wrap { position:relative; width:100%; max-width:1535px; margin:0 auto; line-height:0; background:#001d3b; }
.master-artwork { display:block; width:100%; height:auto; }
.hotspot { position:absolute; display:block; z-index:2; background:transparent; border-radius:4px; }
.hotspot:focus-visible { outline:3px solid white; outline-offset:2px; box-shadow:0 0 0 6px rgba(157,8,3,.9); }
.nav { top:.4%; height:4.1%; }
.history { left:25.4%; width:7.5%; }
.get-involved { left:35.8%; width:10.8%; }
.faqs { left:48.2%; width:5.2%; }
.contact { left:55.5%; width:7.5%; }
/* Full feature cards are clickable. Coordinates match the approved 1535 x 1024 official homepage PNG. */
.card { top:51.2%; height:30.6%; }
.schedule { left:4.0%; width:16.1%; }
.parade { left:21.6%; width:17.3%; }
.swag { left:40.4%; width:15.9%; }
.baseball { left:57.6%; width:15.8%; }
.family { left:74.7%; width:18.9%; }
.weather-notice { left:3.9%; top:82.9%; width:22.0%; height:13.4%; }
.website { left:10.9%; top:96.0%; width:15.3%; height:3.2%; }
.facebook { left:80.3%; top:91.1%; width:2.2%; height:3.0%; }
.instagram { left:85.1%; top:91.1%; width:2.2%; height:3.0%; }
.content-section { max-width:1000px; margin:0 auto; min-height:52vh; padding:72px 28px; border-bottom:1px solid rgba(0,0,0,.12); }
.content-section h2 { margin:0 0 18px; color:var(--navy); font-family:Georgia,'Times New Roman',serif; font-size:clamp(2rem,4vw,3.5rem); }
.content-section h3 { margin:0 0 18px; color:var(--red); font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.5rem,3vw,2.25rem); }
.content-section p { margin:0; font-size:1.15rem; line-height:1.7; }
.section-kicker { color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.schedule-intro { max-width:850px; }
.schedule-list { margin-top:34px; border-top:3px solid var(--navy); }
.schedule-row { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; padding:18px 4px; border-bottom:1px solid rgba(0,0,0,.18); font-size:1.15rem; }
.schedule-event { font-weight:700; }
.schedule-time { color:var(--red); font-weight:700; text-align:right; }
.section-action { margin-top:28px !important; }
.button { display:inline-block; padding:13px 22px; border-radius:6px; background:var(--red); color:#fff; font-weight:700; text-decoration:none; }
.button:hover { filter:brightness(1.06); }
@media (max-width:700px) {
  .artwork-wrap { min-width:0; width:100%; max-width:100%; }
  body { overflow-x:hidden; }
  .content-section { min-height:auto; padding:52px 22px; }
  .schedule-row { grid-template-columns:1fr; gap:6px; }
  .schedule-time { text-align:left; }
}

/* Interior page shared layout */
.interior-header { background:var(--navy); color:#fff; padding:18px 24px; }
.interior-header-inner { max-width:1000px; margin:0 auto; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.interior-header a { color:#fff; text-decoration:none; font-weight:700; }
.interior-page { max-width:1000px; margin:0 auto; padding:64px 28px 80px; }
.interior-page h1 { margin:0 0 12px; color:var(--navy); font:700 clamp(2.5rem,6vw,4.5rem)/1 Georgia,'Times New Roman',serif; }
.interior-page h2 { margin:0 0 18px; color:var(--red); font:700 clamp(1.5rem,3vw,2.25rem)/1.2 Georgia,'Times New Roman',serif; }
.interior-page .lead { font-size:1.2rem; line-height:1.65; max-width:850px; }
.back { display:inline-block; margin-top:34px; color:var(--navy); font-weight:700; }
.homepage-only { background:#001d3b; }
@media (max-width:760px) {
  .interior-header-inner { align-items:flex-start; flex-direction:column; }
  .interior-page { padding-top:42px; }
}

/* Schedule page readability adjustment: keep times closer to event names. */
.schedule-page .schedule-list { max-width:760px; }


/* Responsive canvas correction: preserve approved artwork while preventing
   horizontal overflow and white viewport gaps on tablet/smartphone. */
html { background: var(--cream) !important; }
body.homepage-only { min-height: 0; overflow-x: hidden; }
body.homepage-only .page-shell { width: 100%; }
body.homepage-only .artwork-wrap { min-width: 0 !important; }
body.homepage-only .master-artwork { max-width: 100%; height: auto; }