/* Self-hosted so the fonts are present at first paint. Loading these from
   fonts.googleapis.com blocked rendering for ~510ms and left every heading to
   re-flow when the real face arrived — that swap was the whole of the site's
   0.38 layout shift. Both families are SIL Open Font License. */
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-variable.woff2') format('woff2');
}

/* =========================================================
   Pecan Grove Tennis Association — shared styles
   Style: Sporty & energetic
   Edit brand colors in :root below to re-skin the whole site
   ========================================================= */

:root {
  --court:      #173d2c;   /* deep court green */
  --court-dark: #093a28;   /* darker green for depth */
  --optic:      #d8e04d;   /* tennis-ball optic yellow (accent) */
  --optic-deep: #b8c235;
  --clay:       #e4572e;   /* clay/orange accent (pickleball) */
  --ink:        #14231c;   /* near-black text */
  --paper:      #f7f8f3;   /* off-white background */
  --white:      #ffffff;
  --muted:      #5c6b63;
  --line:       #e2e6dd;
  --radius:     16px;
  --shadow:     0 18px 40px -20px rgba(9, 58, 40, .35);
  --maxw:       1180px;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--court); text-decoration: none; }

/* ---------- Typographic scale ---------- */
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.02; margin: 0 0 .4em; letter-spacing: .5px; text-transform: uppercase; }
h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 700; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 600; }
p  { margin: 0 0 1rem; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 60ch; }
.eyebrow {
  font-family: var(--head); text-transform: uppercase; letter-spacing: 3px;
  font-weight: 600; font-size: .95rem; color: var(--court);
  display: inline-flex; align-items: center; gap: .5rem;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--optic); display: inline-block; }

.container { width: min(var(--maxw), 92%); margin-inline: auto; }
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--head); text-transform: uppercase; letter-spacing: 1px;
  font-weight: 600; font-size: 1.05rem;
  padding: .85rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--optic); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(184,194,53,.9); }
.btn-primary:hover { background: var(--optic-deep); }
.btn-dark { background: var(--court); color: #fff; }
.btn-dark:hover { background: var(--court-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { border-color: var(--optic); color: var(--optic); }
.btn-outline { background: transparent; color: var(--court); border-color: var(--court); }
.btn-outline:hover { background: var(--court); color: #fff; }

/* ---------- Header / nav ---------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,248,243,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Account actions live in their own strip above the main nav, so the nav row
   carries only the club's pages. */
.top-bar { background: var(--court); }
.top-bar-inner { display: flex; justify-content: flex-end; align-items: center; gap: 1.1rem; padding: .35rem 0; }
.top-signin { font-family: var(--head); text-transform: uppercase; letter-spacing: .6px; font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.88); }
.top-signin:hover { color: var(--optic); }
.btn-sm { padding: .3rem .95rem; font-size: .85rem; box-shadow: none; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: .7rem 0; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--head); font-weight: 700; text-transform: uppercase; color: var(--ink); letter-spacing: .5px; }
.brand small { display: block; font-family: var(--body); font-weight: 500; letter-spacing: 2px; font-size: .6rem; color: var(--muted); text-transform: uppercase; }
.brand b { font-size: 1.15rem; line-height: 1; }
.brand-lockup { height: clamp(46px, 5vw, 58px); width: auto; display: block; }
@media (max-width: 640px) { .brand-lockup { height: 42px; } }
/* The club crest. It is nearly square where the old lockup was 4.5:1, so it
   carries its own heights — at the lockup's it would read as a stamp. It is
   also far narrower, which gives the nav back about 170px beside it. */
/* flex:none and max-width:none keep the global img{max-width:100%} from ever
   letting the row squeeze the crest — its artwork runs to the very edge of the
   file, so even a pixel of squeeze or clip bites into the letters. */
.brand { flex: none; }
.brand-crest { height: clamp(68px, 6.8vw, 92px); width: auto; max-width: none; aspect-ratio: 438 / 320; display: block; }
@media (max-width: 640px) { .brand-crest { height: 58px; } }
.footer-brand .brand-crest { height: 120px; }

.nav-links { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  position: relative; white-space: nowrap;
  font-family: var(--head); text-transform: uppercase; letter-spacing: .5px; font-size: 1.02rem; font-weight: 500;
  color: var(--ink); padding: .5rem .75rem; border-radius: 8px; transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--court); background: rgba(23,61,44,.07); }
.nav-links a.active { color: var(--court); }
.nav-links a.active::after { content:""; position:absolute; left:.75rem; right:.75rem; bottom:1px; height:3px; background: var(--optic); border-radius: 3px; }
/* Book a Court is the one nav item members use week to week, so it carries the
   heaviest weight the self-hosted Barlow Condensed set has. */
.nav-links a.ext { font-weight: 700; }
/* Marks links that leave the PGTA site (e.g. the MUD booking system). */
.ext::after { content: " \2197"; font-size: .78em; opacity: .6; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--ink); border-radius: 3px; margin: 5px 0; transition: .2s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden; padding: 0;
  background:
    linear-gradient(135deg, rgba(9,58,40,.92), rgba(23,61,44,.78)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="%23173d2c"/><path d="M0 30h60M30 0v60" stroke="%23ffffff" stroke-opacity="0.06" stroke-width="2"/></svg>');
  background-size: cover, 60px 60px;
}
.hero::after {
  content:""; position:absolute; right:-10%; top:-20%; width:55%; height:140%;
  background: radial-gradient(circle, rgba(216,224,77,.22), transparent 60%);
  transform: rotate(12deg); pointer-events:none;
}
.hero-inner { position: relative; z-index: 2; padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(4rem, 9vw, 6.5rem); }
.hero h1 { color: #fff; max-width: 20ch; }
.hero h1 .hl { color: var(--optic); }
.hero p { font-size: 1.25rem; color: rgba(255,255,255,.9); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.hero-badges { display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.4rem; }
.hero-badges div { display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; color:rgba(255,255,255,.9); }
.hero-badges .dot { width:10px;height:10px;border-radius:50%;background:var(--optic); }

/* Home hero: the copy sits beside the court photograph. These come after the
   .hero rules above deliberately — same specificity, so order is what lets the
   h1 and the lead step down from the full-width sizes they set. */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hero-split h1 { font-size: clamp(2.4rem, 4vw, 3.8rem); max-width: 16ch; }
.hero-split p { font-size: 1.12rem; max-width: 48ch; }
.hero-photo { margin: 0; }
/* height:auto is load-bearing — the img carries width/height attributes, and
   without it the 941px height attribute wins and the picture runs to a column. */
.hero-photo img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 2rem; }
  .hero-split h1 { max-width: none; }
}

/* diagonal divider under hero */
.slant { height: 70px; background: var(--paper); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%); margin-top: -70px; position: relative; z-index: 3; }
.slant-green { height: 70px; background: var(--court); clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%); }

/* ---------- Stat strip ---------- */
.stats { background: var(--court); color:#fff; }
.stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align:center; }
.stat b { font-family: var(--head); font-size: clamp(2.4rem,5vw,3.4rem); color: var(--optic); display:block; line-height:1; }
.stat span { text-transform: uppercase; letter-spacing: 1.5px; font-size: .8rem; color: rgba(255,255,255,.85); }

/* ---------- Cards / grids ---------- */
.section-head { max-width: 62ch; margin-bottom: 2.6rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: 0 8px 24px -18px rgba(9,58,40,.4);
  transition: transform .18s ease, box-shadow .18s ease; position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card .icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(216,224,77,.18); color: var(--court); margin-bottom: 1rem; font-size: 1.6rem;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); margin: 0; }
.card .tag { position:absolute; top:0; right:0; background:var(--optic); color:var(--ink); font-family:var(--head); text-transform:uppercase; letter-spacing:1px; font-size:.75rem; padding:.25rem .7rem; border-bottom-left-radius:10px; }
.card.clay .icon { background: rgba(228,87,46,.15); color: var(--clay); }

.event-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.4rem;margin:1.6rem 0 2.4rem}
/* Board officers: four equal cards that fill their rows instead of stranding one. */
.officer-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.event-card h3{margin-top:0}
.event-meta{font-size:.9rem;color:#555}
.check-list{padding-left:1.2rem}.check-list li{margin:.4rem 0}
.rules-note{font-size:.65em;font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
.rules-list{columns:2;column-gap:3rem;max-width:900px}
.rules-list li{break-inside:avoid}
@media (max-width:640px){.rules-list{columns:1}}
.rules-list-compact{font-size:.92rem}
.price{margin:.3rem 0 .8rem}
.price b{font-family:var(--head);font-size:2.2rem;color:var(--court);font-weight:700}
.price span{color:var(--muted);font-weight:600}
.price-note{margin:-.5rem 0 .8rem;color:var(--muted);font-size:.85rem;font-weight:600}
.member-note{margin-top:1.4rem;color:var(--muted);font-size:.95rem}
.steps-list{padding-left:1.3rem}
.steps-list li{margin:.9rem 0;line-height:1.55}
.form-narrow{max-width:680px}

/* Feature split */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split.rev { direction: rtl; } .split.rev > * { direction: ltr; }
.media-card {
  border-radius: 20px; min-height: 340px; background: var(--court); position: relative; overflow: hidden;
  display:grid; place-items:center; color:#fff; box-shadow: var(--shadow);
}
/* Gives a photograph more of the row than the copy, and a taller card with it.
   Used on the men's page, where the team shot has ten faces in one line and is
   unreadable at the default card size. The widths hold for `.split.rev` too:
   the copy is the first child either way, so it keeps the narrower track. */
.split.wide-media { grid-template-columns: .85fr 1.15fr; }
.media-card.lg { min-height: clamp(360px, 30vw, 430px); }
/* For an upright photograph, so `object-fit: cover` has almost nothing to crop. */
.media-card.portrait { min-height: clamp(400px, 40vw, 560px); }
.media-card.optic { background: linear-gradient(135deg, var(--optic), var(--optic-deep)); color: var(--ink); }
.media-card.clay { background: linear-gradient(135deg, #f0704a, var(--clay)); }
.media-card .big-emoji { font-size: 6rem; filter: drop-shadow(0 8px 12px rgba(0,0,0,.2)); }
.media-card.photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-card .court-lines { position:absolute; inset:14px; border:3px solid rgba(255,255,255,.5); border-radius:8px; }
.media-card .court-lines::before { content:""; position:absolute; inset:0; margin:auto; width:3px; background:rgba(255,255,255,.5); }
.media-card .court-lines::after { content:""; position:absolute; left:0; right:0; top:50%; height:3px; background:rgba(255,255,255,.5); }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; }
.checklist li::before { content: "✔"; color: var(--court); font-weight: 700; background: rgba(216,224,77,.35); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; flex: none; font-size: .8rem; }

/* Pills / meta */
.pill-row { display:flex; flex-wrap:wrap; gap:.6rem; margin:.8rem 0 1.4rem; }
.pill { background:#fff; border:1px solid var(--line); border-radius:999px; padding:.35rem .9rem; font-size:.85rem; font-weight:600; color:var(--court); }

/* CTA band */
.cta-band { background: var(--ink); color: #fff; border-radius: 24px; padding: clamp(2.2rem,5vw,3.5rem); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content:""; position:absolute; left:-40px; bottom:-40px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,var(--optic),transparent 65%); opacity:.35; }
.cta-band h2 { color:#fff; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 52ch; margin-inline:auto; }
.cta-band .hero-actions { justify-content:center; }

/* Page banner (interior pages) */
.page-banner { background: var(--court); color:#fff; position:relative; overflow:hidden; padding: 0; }
.page-banner::after { content:""; position:absolute; right:-6%; top:-40%; width:40%; height:180%; background:radial-gradient(circle,rgba(216,224,77,.2),transparent 60%); transform:rotate(12deg); }
.page-banner .container { position:relative; z-index:2; padding: clamp(1.8rem,4vw,2.6rem) 0 clamp(2.4rem,5vw,3.4rem); }
.page-banner h1 { color:#fff; }
.page-banner p { color: rgba(255,255,255,.9); max-width: 60ch; font-size:1.15rem; }
.crumbs { font-size:.85rem; letter-spacing:1px; text-transform:uppercase; color:var(--optic); margin-bottom:.6rem; font-family:var(--head); }
.crumbs a { color: rgba(255,255,255,.85); }

/* ---------- Forms ---------- */
.form-wrap { background:#fff; border:1px solid var(--line); border-radius:20px; padding: clamp(1.6rem,4vw,2.6rem); box-shadow: var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field { display:flex; flex-direction:column; gap:.35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight:600; font-size:.9rem; }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size:1rem; padding:.75rem .9rem; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline:3px solid rgba(216,224,77,.5); border-color:var(--court); }
.checkbox-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.checkbox-row label { display:flex; align-items:center; gap:.45rem; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem; font-size:.9rem; font-weight:500; cursor:pointer; min-height:2.75rem; }
.checkbox-row input { accent-color: var(--court); width:1.15rem; height:1.15rem; }
@media (max-width:640px){
  .checkbox-row { gap:.5rem }
  .checkbox-row label { font-size:1rem; flex:1 1 auto; justify-content:flex-start }
  .form-wrap .btn, form .btn-primary { width:100%; min-height:3rem }
}
.form-success { background: rgba(216,224,77,.2); border:1px solid var(--optic-deep); color: var(--court-dark); border-radius:12px; padding:1rem 1.2rem; margin-bottom:1.2rem; font-weight:600; }
.form-error{margin-top:1rem;padding:.8rem 1rem;border-radius:8px;background:#fdecea;color:#a4262c;font-weight:600}
.form-error.hidden{display:none}
.hidden { display:none; }

/* Info cards row */
.info-row { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
/* A row of two cards, so they fill the width instead of leaving a third empty
   and squeezing a phone number onto two lines. */
.info-row.two { grid-template-columns: repeat(2,1fr); }
/* A telephone number is one token — it never breaks across lines, anywhere. */
a[href^="tel:"] { white-space: nowrap; }
.info-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.4rem; }
.info-card b { font-family:var(--head); text-transform:uppercase; letter-spacing:.5px; color:var(--court); display:block; margin-bottom:.3rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--court-dark); color: rgba(255,255,255,.82); padding: 3.5rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:2rem; }
.site-footer h4 { color:#fff; letter-spacing:1px; }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: var(--optic); }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); margin-top:2.5rem; padding-top:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.85rem; color:rgba(255,255,255,.6); }
/* Designer credit, a line under the copyright row. The link inherits the muted
   colour rather than the footer's brighter link colour, so the credit stays a
   credit and does not compete with the club's own footer links. */
.footer-credit { padding-top:1rem; text-align:left; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.5); }
.footer-credit a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.footer-credit a:hover { color:var(--optic); }
.footer-brand .brand { color:#fff; }
.footer-brand p { max-width:34ch; color:rgba(255,255,255,.7); margin-top:.8rem; }

/* ---------- Responsive ---------- */
/* Nav has its own breakpoints, wider than the layout ones below. It carries
   NINE items plus the CTA — Men's Play, Women's Play, Juniors, Pickleball,
   Lessons, Courts, Book a Court, Events, Sign In — which no longer fit beside
   the logo until about 1560px. Labels are nowrap, so the only honest options
   are a tightened nav or the burger; these thresholds were measured back when
   the bar also carried Home, so they have a little slack now rather than too
   little (the earlier ones assumed 8 items and left the bar wrapping onto two
   lines at 1568px). */
@media (max-width: 1250px) {
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 0 5%; border-bottom-width: 0;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .25s ease, padding .25s ease, visibility 0s linear .25s; }
  /* max-height:0 cannot swallow padding or a border, so the closed menu carries
     neither — otherwise a 20px strip of it (with the first link's text) shows
     under the header on every page. visibility keeps the hidden links out of
     the tab order. The open menu scrolls, or a phone held sideways cannot reach
     the last items: the header is sticky, so scrolling the page never moves it. */
  .nav-links.open { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto;
    padding: .6rem 5%; border-bottom-width: 1px; box-shadow: var(--shadow); visibility: visible;
    transition: max-height .25s ease, padding .25s ease; }
  .nav-links a { display: block; border-radius: 0; padding: .8rem .5rem; border-bottom: 1px solid var(--line); }
  .nav-links a.active::after { display:none; }
  .nav-toggle { display: block; }
}
@media (min-width: 1251px) and (max-width: 1560px) {
  .nav-links { gap: 0; }
  .nav-links a { font-size: .86rem; padding: .5rem .38rem; letter-spacing: .1px; }
  .nav-links a.active::after { left: .38rem; right: .38rem; }
  .brand-lockup { height: 46px; }
}
@media (max-width: 900px) {
  .grid-3, .info-row { grid-template-columns: 1fr 1fr; }
  .stats .grid { grid-template-columns: 1fr 1fr; }
  .split, .grid-2, .form-grid { grid-template-columns: 1fr; }
  .split.rev { direction: ltr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid-3, .info-row, .stats .grid, .footer-grid { grid-template-columns: 1fr; }
  /* .info-row.two outranks the line above, so it has to stack explicitly. */
  .info-row.two { grid-template-columns: 1fr; }
}

/* Court-line motif: baseline + service boxes, used as section accents */
.court-lines{position:relative}
.court-lines::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cg fill='none' stroke='%23173d2c' stroke-width='3'%3E%3Crect x='10' y='10' width='380' height='180'/%3E%3Cline x1='10' y1='100' x2='390' y2='100'/%3E%3Crect x='105' y='10' width='190' height='180'/%3E%3Cline x1='200' y1='10' x2='200' y2='190'/%3E%3C/g%3E%3C/svg%3E");
  background-size:420px;background-repeat:repeat}
.card,.info-card,.event-card{transition:transform .18s ease,box-shadow .18s ease}
.card:hover,.info-card:hover,.event-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(23,61,44,.14)}
.fade-in{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.fade-in.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .fade-in{opacity:1;transform:none;transition:none}
  .card,.info-card,.event-card{transition:none}
}
.photo-slot{background:repeating-linear-gradient(45deg,#e8efe9,#e8efe9 12px,#f2f6f2 12px,#f2f6f2 24px);
  border:2px dashed #173d2c33;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#173d2c99;font-weight:600;min-height:220px}

/* Lesson rate tables. The scroll wrapper keeps the page body from ever
   scrolling sideways on a narrow phone. */
.rate-heading{font-family:var(--head);color:var(--court);font-size:1.35rem;margin:1.6rem 0 .6rem;text-transform:uppercase;letter-spacing:.5px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rate-table{width:100%;max-width:520px;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rate-table th,.rate-table td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.rate-table thead th{font-family:var(--head);text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;color:var(--court);background:var(--sand,#f6f5f0)}
.rate-table tbody th{font-weight:600}
.rate-table td{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.rate-table tbody tr:last-child th,.rate-table tbody tr:last-child td{border-bottom:0}
.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}

.play-time{margin:-.15rem 0 .55rem;color:var(--muted);font-size:.9rem;font-weight:600}

/* Trophy Room. Champions get the weight; finalist and consolation stay quiet
   so a column of names still scans by year. Tables scroll inside their own
   wrapper on a phone rather than widening the page. */
.lifetime-band{background:#fff;border-bottom:1px solid var(--line)}
.lifetime-list{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.lifetime-list li{border-radius:14px;padding:1.1rem 1.2rem;background:var(--court);color:#fff;border-top:4px solid var(--optic)}
.lt-year{display:block;font-family:var(--head);color:var(--optic);font-size:1rem;letter-spacing:1px}
.lt-name{display:block;font-family:var(--head);font-size:1.45rem;text-transform:uppercase;letter-spacing:.3px;line-height:1.15}
@media (max-width:900px){.lifetime-list{grid-template-columns:repeat(2,1fr)}}
.trophy-jump{padding-bottom:0}
.trophy-section{padding:clamp(2rem,5vw,3rem) 0;scroll-margin-top:130px}
.trophy-section h2{margin-bottom:.1rem}
.tr-span{color:var(--muted);font-weight:600;margin:0 0 1rem}
.trophy-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:640px}
.trophy-table th,.trophy-table td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.trophy-table thead th{font-family:var(--head);text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;color:var(--court);background:var(--sand,#f6f5f0)}
.trophy-table tbody th{font-family:var(--head);font-size:1.1rem;color:var(--court);white-space:nowrap;width:7.5rem}
.trophy-table td{color:var(--muted)}
.trophy-table td.tr-champ{color:var(--ink);font-weight:600}
.trophy-table tbody tr:last-child th,.trophy-table tbody tr:last-child td{border-bottom:0}
.trophy-table tr.tr-b{background:#fafaf6}
.tr-draw{display:inline-block;font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:var(--optic);color:var(--ink);border-radius:999px;padding:.1rem .45rem;vertical-align:middle}
.tr-amp{color:var(--muted);font-weight:400}
.tr-none{color:#b7bfb9}
.tr-top{margin:.8rem 0 0;font-size:.9rem}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}