@import url('/surf-design.css');
@import url('/surf-shell.css');
@import url('/surf-editorial.css');
  
* {
  box-sizing:border-box}
body.club-page,body.cms-body {
  margin:0;
  font-family:var(--surf-font);
  color:#07111f;
  background:#fff;
  line-height:1.6}
a {
  color:#0057b8}
button,input,select,textarea {
  font:inherit}
button,a.action {
  cursor:pointer;
  min-height:44px;
  padding:10px 18px;
  border:1px solid #0057b8;
  border-radius:6px;
  background:#0057b8;
  color:white;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center}
button:disabled {
  opacity:.55;
  cursor:wait}
button.secondary {
  background:white;
  color:#0057b8}
input,select,textarea {
  display:block;
  width:100%;
  padding:12px;
  border:1px solid #b7c5d4;
  border-radius:5px;
  background:white;
  color:#07111f}
textarea {
  min-height:130px}
label {
  display:block;
  font-weight:650;
  margin:15px 0}
label small {
  display:block;
  font-weight:400;
  color:#48576a}
input[type=checkbox] {
  width:auto;
  display:inline-block}
h1 {
  font-size:clamp(34px,5vw,64px);
  line-height:1.05;
  letter-spacing:-.04em}
h2 {
  font-size:28px;
  line-height:1.15;
  letter-spacing:-.02em}
h3 {
  font-size:22px}
p {
  max-width:75ch}
.club-header {
  padding:20px 6vw;
  background:white;
  border-bottom:1px solid #dce2e9;
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  font-weight:800;
  color:#07111f;
  text-decoration:none}
.brand img {
  object-fit:contain}
.club-header nav {
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:wrap}
.club-header nav a {
  font-size:14px;
  font-weight:650}
.club-header .menu {
  margin-left:auto}
main {
  max-width:1280px;
  margin:auto;
  padding:48px 6vw 80px}
.kicker {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#0057b8;
  font-weight:800}
.grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px}
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px}
.card,.panel {
  background:white;
  border:1px solid #dce2e9;
  border-radius:10px;
  padding:28px;
  min-width:0}
.card img,.story-image {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:contain;
  border-radius:6px}
.card .crest {
  height:90px;
  width:76px;
  object-fit:contain}
.actions,#tabs {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:24px 0}
.muted {
  color:#48576a;
  font-size:14px}
.badge {
  display:inline-block;
  border-radius:20px;
  background:#e8f2fd;
  padding:4px 10px;
  font-size:12px}
.list {
  display:flex;
  flex-direction:column;
  gap:10px}
.list button {
  text-align:left;
  justify-content:flex-start}
.editor {
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:28px}
main details {
  margin:16px 0}
main summary {
  cursor:pointer;
  font-weight:700;
  min-height:44px;
  padding:10px 0}
.error {
  color:#a32d19}
#notice {
  padding:14px;
  background:#e8f2fd;
  border-radius:6px;
  max-width:none}
.article {
  max-width:800px}
.article .body {
  white-space:pre-line}
.club-footer {
  padding:36px 6vw;
  border-top:1px solid #dce2e9;
  background:white}
.club-footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:24px}
.filters {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:24px 0}
.filters label {
  flex:1 1 140px}
.hero-cta {
  background:#07111f;
  color:white;
  padding:32px;
  border-radius:10px;
  margin:32px 0}
.hero-cta a {
  color:white}
.skip {
  position:absolute;
  left:-10000px}
.skip:focus {
  left:10px;
  top:10px;
  background:white;
  padding:12px;
  z-index:99}
:focus-visible {
  outline:3px solid #d7a644;
  outline-offset:3px}
pre {
  white-space:pre-wrap;
  word-break:break-word}
.honeypot {
  position:absolute;
  left:-10000px}
@media(max-width:760px) {
  .editor,.grid {
  grid-template-columns:1fr}
main {
  padding-top:30px}
.club-header .menu {
  margin-left:0}
.club-header nav {
  gap:14px}
.card,.panel {
  padding:22px}
.actions>* {
  flex:1 1 150px}
h1 {
  font-size:38px}
}
@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important}
}

.team-card { border-top:4px solid #0057b8; }
.team-card.team-u11 { border-top-color:#7042a4; }
.article .body { white-space:normal; max-width:72ch; line-height:1.8; }
.article .body h2 { margin-top:2rem; font-size:1.6rem; }
.article .body ul { padding-left:1.5rem; }
.article .story-image { object-fit:contain; height:auto; }

.member-login { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin:24px 0 48px; }
.member-login h1 { font-size:clamp(36px,5vw,58px); }
.member-login .panel { border-top:4px solid #0057b8; padding:36px; }
@media(max-width:760px) { .member-login { grid-template-columns:1fr; gap:20px; }.member-login .panel { padding:24px; } }