:root { --navy:#111d30; --ink:#f4f7fc; --muted:#b5c2d4; --accent:#ee483e; --line:#334156; --blue:#609ac7; --white:#fff; --ice:#c8dcec; }
* { box-sizing:border-box; }
body { margin:0; background:var(--navy); color:var(--ink); font:16px/1.75 Arial,Helvetica,sans-serif; }
a { color:inherit; text-underline-offset:5px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid var(--ice); outline-offset:6px; }
.skip-link { position:absolute; top:-100px; left:16px; padding:12px; background:var(--navy); z-index:5; }
.skip-link:focus { top:12px; }
.shell { max-width:1240px; padding-left:48px; padding-right:48px; margin:auto; }
header { border-bottom:1px solid var(--line); }
.header-inner { min-height:106px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.wordmark { display:flex; align-items:center; gap:14px; font-size:22px; line-height:1; letter-spacing:-0.8px; font-weight:800; text-decoration:none; white-space:nowrap; }
.logo-mark { display:grid; place-items:center; width:43px; height:43px; background:var(--accent); color:var(--white); font-size:19px; font-style:italic; transform:skew(-7deg); }
.brand-light { font-weight:400; }
.wordmark small { font-size:11px; color:var(--muted); margin-left:3px; letter-spacing:0; }
.header-note { font-size:12px; color:var(--muted); }
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:48px; align-items:center; min-height:580px; padding-top:64px; padding-bottom:64px; }
.status { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.15em; font-weight:bold; margin:0 0 26px; color:var(--muted); }
.status > span { width:7px; height:7px; background:var(--accent); }
h1 { font-size:clamp(42px,5vw,66px); line-height:1.04; letter-spacing:-0.055em; margin:0 0 30px; font-weight:850; overflow-wrap:anywhere; }
h1 > span { color:var(--accent); }
.intro { font-size:18px; color:var(--muted); max-width:530px; margin:0 0 22px; line-height:1.8; }
.welcome { font-size:15px; margin:0; color:var(--ink); }
.league-list { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:38px; }
.league-list span { font-size:10px; font-weight:bold; letter-spacing:0.05em; color:var(--muted); }
.rink-art { min-width:0; }
.rink-art > svg { display:block; width:100%; transform:rotate(-12deg); }
.rink-boundary { stroke:var(--ice); stroke-width:3; }
.rink-red { stroke:var(--accent); stroke-width:2; }
.rink-blue { stroke:var(--blue); stroke-width:2; }
.rink-red.fill { fill:var(--accent); }
.stick { stroke:var(--ice); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; }
.puck { fill:var(--ink); }
.rink-caption { display:block; text-align:center; font-size:9px; letter-spacing:0.11em; color:var(--muted); margin-top:40px; }
.intermission { display:grid; grid-template-columns:230px minmax(0,1fr); gap:48px; border-top:1px solid var(--line); padding-top:26px; padding-bottom:40px; }
.period-label { color:var(--accent); font-size:11px; font-weight:bold; letter-spacing:0.08em; }
.intermission p { color:var(--muted); max-width:650px; font-size:14px; margin:0; }
footer { border-top:1px solid var(--line); }
.footer-inner { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:11px; }
.footer-inner > span:first-child { font-weight:bold; letter-spacing:0.06em; }
.error-page { padding-top:70px; padding-bottom:70px; }
.error-brand { display:inline-block; margin-bottom:60px; font-weight:bold; font-size:15px; text-decoration:none; }
.back-link { display:inline-block; margin-top:10px; }
@media (max-width:950px) {
  .shell { padding-left:32px; padding-right:32px; }
  .wordmark { font-size:19px; }
  .hero { gap:32px; }
  .rink-caption { font-size:8px; }
  .intermission { grid-template-columns:190px minmax(0,1fr); gap:32px; }
}
@media (max-width:700px) {
  .shell { padding-left:24px; padding-right:24px; }
  .header-inner { min-height:100px; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; padding-top:20px; padding-bottom:20px; }
  .wordmark { font-size:19px; gap:10px; }
  .logo-mark { width:34px; height:34px; font-size:16px; }
  .wordmark small { font-size:9px; }
  .header-note { font-size:11px; }
  .hero { grid-template-columns:minmax(0,1fr); padding-top:44px; padding-bottom:36px; gap:44px; min-height:0; }
  h1 { font-size:47px; }
  .intro { font-size:17px; }
  .welcome { font-size:14px; }
  .league-list { gap:10px 16px; margin-top:28px; }
  .rink-art { max-width:420px; margin:auto; width:100%; }
  .rink-art > svg { transform:rotate(-7deg); }
  .rink-caption { margin-top:20px; font-size:8px; }
  .intermission { grid-template-columns:minmax(0,1fr); gap:14px; padding-top:24px; padding-bottom:32px; }
  .footer-inner { flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; padding-top:24px; padding-bottom:24px; }
}
@media (max-width:360px) {
  .shell { padding-left:20px; padding-right:20px; }
  .wordmark { font-size:17px; }
  .wordmark small { font-size:8px; }
  h1 { font-size:41px; }
}