/* ==========================================================================
   AVERAGE JOES — collegiate program system, light ground

   Reference: medfordrogues.com. Pro club sites are LIGHT — white/near-white
   content, brand colour confined to the header, footer and accents, with
   photography carrying the page. Keep it that way here especially — this club's
   pink and cyan are far louder than the greens this layout was built for, and
   flooding the page with either turns a program site into a flyer.

   Value structure now:
     dark band  → header, hero, footer, stat strip   (~25% of the page)
     light      → all content sections               (~75%)
     plum       → headings, eyebrows, rules, and the primary action ON LIGHT
     pink       → the primary action ON DARK — fills and rules, not small text
     cyan       → small text and eyebrows ON DARK

   CONTRAST — the reason pink and cyan split the on-dark work between them.
   This palette is louder but less legible than a green/gold one, and the two
   bright colours fail in opposite directions:

     plum #8C205A on white  → 8.5:1  ✓ text, any size
     pink #EF028B on white  → 3.4:1  ✗ never use as text on a light ground
     pink #EF028B on coal   → 4.5:1  — right on the AA line. Fine as a FILL
                              behind near-black text, and fine for large display
                              type, but it fails the 0.7–0.8rem uppercase
                              eyebrows this layout uses everywhere.
     cyan #02AFF0 on coal   → 7.4:1  ✓ which is why the eyebrows are cyan.

   So: pink is a fill, cyan is the small-text accent, plum does everything on
   white. Swapping pink back into the eyebrow slot to "use more pink" will
   quietly break legibility on the darkest 25% of the page.

   Type: Big Shoulders Display (condensed athletic) over Barlow.
   No emoji anywhere in the public interface.
   ========================================================================== */

:root{
  --page:#FFFFFF;
  --band:#F5F2F6;        /* cool alternating band — faint plum cast */
  --text:#191418;
  --muted:#635C66;
  --rule:#E4DEE6;
}

.aj{background:var(--page);color:var(--text)}
.aj-wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* Dark surfaces — the brand anchors */
.aj-dark{background:var(--coal);color:var(--paper)}

/* Section eyebrow: number + label */
.aj-eyebrow{
  display:flex;align-items:baseline;gap:14px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;
  color:var(--plum);margin-bottom:24px;
}
.aj-eyebrow::after{content:'';flex:1;height:1px;background:var(--rule)}
.aj-num{font-variant-numeric:tabular-nums;opacity:.55}
.aj-dark .aj-eyebrow{color:var(--cyan)}
.aj-dark .aj-eyebrow::after{background:rgba(2,175,240,.30)}

/* ---- Topbar ---- */
.aj-bar{background:var(--coal);position:sticky;top:0;z-index:60;border-bottom:3px solid var(--pink)}
.aj-bar-inner{max-width:1180px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:16px;height:70px}
.aj-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.aj-bar-logo{height:44px;width:auto}
.aj-bar-name{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.34rem;line-height:1;color:var(--paper);text-transform:uppercase;letter-spacing:.01em;
}
.aj-nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.aj-nav a{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.8rem;text-decoration:none;color:rgba(245,242,246,.8);
  padding:10px 14px;white-space:nowrap;transition:color .15s,background .15s;
}
.aj-nav a:hover{color:var(--coal);background:var(--pink)}
.aj-nav a.aj-nav-cta{color:var(--coal);background:var(--pink);margin-left:10px;font-weight:700;padding:10px 20px}
.aj-nav a.aj-nav-cta:hover{background:var(--paper);color:var(--coal)}

/* ---- Hero: a compact dark band, not a full-height field of green ---- */
.aj-hero{position:relative;overflow:hidden;background:var(--coal)}
.aj-hero-mark{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(460px,46vw);opacity:.1;pointer-events:none;user-select:none;
}
/* padding-block only — the horizontal gutter must come from .aj-wrap, or the
   hero text goes flush to the edge on any window narrower than the max-width. */
.aj-hero-inner{position:relative;z-index:2;padding-top:60px;padding-bottom:56px}
.aj-kicker{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.32em;font-size:.82rem;color:var(--cyan);margin-bottom:12px;
}
.aj-hero h1{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(3rem,10vw,7rem);line-height:.84;
  letter-spacing:-.005em;color:var(--paper);margin:0;
}
.aj-hero-rule{height:3px;background:var(--pink);width:min(460px,80%);margin:24px 0 18px}
.aj-hero-meta{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.92rem;color:rgba(245,242,246,.82);
}
.aj-hero-sub{max-width:520px;margin-top:16px;color:rgba(245,242,246,.72);font-size:1.04rem;line-height:1.6}
.aj-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* Buttons */
.aj-btn{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;text-decoration:none;font-size:.88rem;
  padding:15px 30px;border-radius:2px;transition:background .16s,color .16s,border-color .16s;
}
/* Primary action: plum on the light ground, pink on dark surfaces. Pink as a
   button FILL is fine — it carries near-black text, not light. It is only as
   small text on dark that it falls under AA. */
.aj-btn-solid{background:var(--plum);color:#fff}
.aj-btn-solid:hover{background:#6E1746}
.aj-dark .aj-btn-solid,.aj-hero .aj-btn-solid,.aj-pagehead .aj-btn-solid,.aj-merch-hero .aj-btn-solid,.aj-merch-band .aj-btn-solid{background:var(--pink);color:var(--coal)}
.aj-dark .aj-btn-solid:hover,.aj-hero .aj-btn-solid:hover,.aj-pagehead .aj-btn-solid:hover,.aj-merch-hero .aj-btn-solid:hover,.aj-merch-band .aj-btn-solid:hover{background:var(--paper)}
.aj-btn-line{background:transparent;color:var(--plum);border:1px solid var(--plum)}
.aj-btn-line:hover{background:var(--plum);color:#fff}
.aj-dark .aj-btn-line{color:var(--paper);border-color:rgba(245,242,246,.5)}
.aj-dark .aj-btn-line:hover{background:var(--paper);color:var(--coal);border-color:var(--paper)}

/* ---- Stat strip: dark, sits under the hero ---- */
.aj-facts{display:grid;grid-template-columns:repeat(3,1fr);background:var(--plum)}
.aj-fact{padding:22px 32px;border-right:1px solid rgba(245,242,246,.16)}
.aj-fact:last-child{border-right:none}
.aj-fact dt{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:.68rem;color:rgba(245,242,246,.72);margin-bottom:5px;
}
.aj-fact dd{
  margin:0;font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:700;
  font-size:1.45rem;text-transform:uppercase;color:#fff;line-height:1;letter-spacing:.01em;
}

/* ---- Sections: light by default ---- */
.aj-panel{padding:78px 0}
.aj-panel-band{background:var(--band)}
.aj-panel h2{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(2rem,5vw,3.2rem);line-height:.96;
  letter-spacing:-.005em;color:var(--coal);margin-bottom:22px;
}
.aj-dark .aj-panel h2,.aj-panel.aj-dark h2{color:var(--paper)}
.aj-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.aj-body{font-size:1.06rem;line-height:1.75;color:var(--muted);max-width:56ch}
.aj-body p+p{margin-top:16px}
.aj-dark .aj-body{color:rgba(245,242,246,.76)}

/* Program pillars — hairline list */
.aj-list{border-top:2px solid var(--plum)}
.aj-list-row{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--rule)}
.aj-list-n{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.74rem;
  letter-spacing:.2em;color:var(--plum);padding-top:5px;font-variant-numeric:tabular-nums;
}
.aj-list-t{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.22rem;color:var(--coal);margin-bottom:4px;letter-spacing:.01em;
}
.aj-list-d{color:var(--muted);font-size:.97rem;line-height:1.6}

/* ---- Empty states ---- */
.aj-empty{border-top:2px solid var(--plum);padding:26px 0 0;color:var(--muted);font-size:.98rem;max-width:52ch}
.aj-empty strong{
  display:block;font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;
  font-weight:700;text-transform:uppercase;font-size:1.12rem;color:var(--coal);
  margin-bottom:6px;letter-spacing:.01em;
}
.aj-dark .aj-empty{border-color:var(--pink);color:rgba(245,242,246,.6)}
.aj-dark .aj-empty strong{color:var(--paper)}

/* ---- Partners: horizontal logo band, like a club sponsor row.
   The band itself (.logo-marquee / .logo-track / .spon-*) lives in styles.css and
   is shared with the partner page; these rules only place it on the panel. ---- */
.sponsor-wall{margin-top:30px}
.sponsor-wall:empty{display:none}
.sponsor-wall .logo-marquee.is-static .logo-track{justify-content:flex-start}
.aj-partner-aside{align-self:center;color:var(--muted);font-size:.95rem;max-width:38ch}

/* ---- Footer ---- */
.aj-foot{background:var(--coal);border-top:3px solid var(--pink);padding:54px 0 40px;color:rgba(245,242,246,.58);font-size:.92rem}
.aj-foot-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.aj-foot-logo{width:64px}
.aj-foot-name{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;color:var(--paper);font-size:1.5rem;line-height:1;letter-spacing:.01em;
}
.aj-foot-name span{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.22em;color:var(--cyan);margin-top:6px}
.aj-foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;border-top:1px solid rgba(245,242,246,.14);padding-top:26px}
.aj-foot h4{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.7rem;color:var(--cyan);margin-bottom:10px;
}
.aj-foot p{margin:0 0 5px}
.aj-foot a{color:rgba(245,242,246,.74);text-decoration:none}
.aj-foot a:hover{color:var(--cyan)}
.aj-foot-legal{border-top:1px solid rgba(245,242,246,.14);margin-top:28px;padding-top:20px;font-size:.82rem;color:rgba(245,242,246,.42)}

/* ---- Support page ---- */
.aj-pagehead{background:var(--coal);position:relative;overflow:hidden;padding:56px 0 50px}
.aj-pagehead h1{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(2.4rem,7vw,4.6rem);line-height:.9;
  color:var(--paper);margin:0 0 16px;letter-spacing:-.005em;
}
.aj-pagehead p{max-width:56ch;color:rgba(245,242,246,.74);font-size:1.04rem;line-height:1.7}

/* Progress toward the goal */
.aj-goal{margin-top:26px;max-width:640px}
.aj-goal-bar{height:6px;background:rgba(245,242,246,.16);position:relative;overflow:hidden}
.aj-goal-bar>div{position:absolute;top:0;bottom:0;transition:width .8s cubic-bezier(.2,.7,.3,1)}
.aj-goal-raised{background:var(--pink);left:0}
.aj-goal-cash{background:rgba(239,2,139,.55)}
.aj-goal-pending{background:rgba(239,2,139,.28)}
.aj-goal-stats{display:flex;align-items:baseline;gap:12px;margin-top:16px;flex-wrap:wrap}
.aj-goal-raised-n{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:2.4rem;color:#fff;line-height:1;font-variant-numeric:tabular-nums;
}
.aj-goal-of{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.82rem;color:rgba(245,242,246,.66);
}
.aj-goal-note{margin-top:6px;font-size:.9rem;color:var(--cyan)}

/* Sponsorship rate card */
.aj-tiers{width:100%;border-collapse:collapse}
.aj-tiers th{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.7rem;color:var(--plum);text-align:left;
  padding:0 0 12px;border-bottom:2px solid var(--plum);
}
.aj-tiers th:last-child,.aj-tiers td:last-child{text-align:right}
.aj-tiers td{padding:15px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.aj-tier-name{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.14rem;color:var(--coal);letter-spacing:.01em;
}
.aj-tier-size{font-size:.89rem;color:var(--muted);margin-top:2px}
.aj-tier-price{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.45rem;color:var(--plum);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.aj-tier-left{font-size:.78rem;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.12em}
.aj-tier-full{color:#A9B3AD}

.aj-banner-fig{margin:0;border:1px solid var(--rule);background:#fff}
.aj-banner-fig img{width:100%;display:block}
.aj-banner-cap{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:.7rem;color:var(--muted);padding:11px 16px;border-top:1px solid var(--rule);
}

/* ---- Motion ---- */
@media (prefers-reduced-motion:no-preference){
  .aj-rise{animation:tjRise .8s cubic-bezier(.2,.7,.3,1) backwards}
  .aj-rise-2{animation-delay:.08s}
  .aj-rise-3{animation-delay:.16s}
  .aj-rise-4{animation-delay:.24s}
  @keyframes tjRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

.aj a:focus-visible,.aj-btn:focus-visible,.aj-nav a:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

@media (max-width:900px){
  .aj-split{grid-template-columns:1fr;gap:40px}
  .aj-facts{grid-template-columns:1fr}
  .aj-fact{border-right:none;border-bottom:1px solid rgba(245,242,246,.16);padding:18px 24px}
  .aj-fact:last-child{border-bottom:none}
  .aj-panel{padding:56px 0}
  .aj-hero-inner{padding:44px 0 42px}
  .aj-hero-mark{opacity:.07;right:-24%}
  .aj-wrap,.aj-bar-inner{padding:0 22px}
  /* Section anchors drop out on small screens; the TEAM links must not — they
     are the only route to the team pages from the nav. */
  .aj-nav a.aj-nav-sec{display:none}
  .aj-nav{gap:0}
  .aj-nav a{padding:10px 9px;font-size:.76rem;letter-spacing:.1em}
  .aj-nav a.aj-nav-cta{margin-left:6px;padding:10px 13px}
}

/* Phone type/spacing for the hero. The stacked photo layout itself lives in the
   MOBILE CORRECTIONS block at the end of this file — it has to come after the
   PHOTOGRAPHY rules to win the cascade. */
@media (max-width:760px){
  .aj-hero h1{font-size:clamp(2.6rem,13vw,4rem)}
  .aj-hero-rule{margin:18px 0 14px}
  .aj-cta-row{margin-top:24px}
  .aj-btn{padding:14px 22px;font-size:.82rem}
}

/* ==========================================================================
   PHOTOGRAPHY
   Photo-led hero, per medfordrogues.com. Faces sit in the upper two thirds, so
   the scrim rises from the bottom and the wordmark sits low-left over it —
   nothing is printed across the players.
   ========================================================================== */
.aj-hero--photo{
  background:var(--coal);display:flex;align-items:flex-end;
  /* Hold a fixed shape instead of a fixed height. With a capped height the band
     grew wider-and-wider on big monitors (3.1:1 at 1920, 4.1:1 at 2560) and
     cover-cropping discarded more of the photo each step — which is what was
     slicing the coaches' hats off. Growing the height with the width keeps the
     crop constant at every size. */
  /* Height derived from viewport WIDTH, not aspect-ratio: aspect-ratio made the
     element shrink horizontally on wide monitors and the band stopped being
     full-bleed. min(...,78vh) stops a tall hero swallowing a short screen. */
  min-height:clamp(420px, min(40vw, 78vh), 860px);
}
.aj-hero-img{
  position:absolute;inset:0;background-size:cover;background-position:center 18%;
  background-repeat:no-repeat;background-image:var(--hero);
}
.aj-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,19,20,.34) 0%,rgba(23,19,20,.12) 34%,rgba(23,19,20,.72) 74%,rgba(23,19,20,.94) 100%);
}
.aj-hero--photo .aj-hero-inner{padding-top:0;padding-bottom:46px;width:100%}
.aj-hero--photo h1{text-shadow:0 3px 26px rgba(0,0,0,.55)}
.aj-hero--photo .aj-hero-meta,.aj-hero--photo .aj-hero-sub{text-shadow:0 2px 14px rgba(0,0,0,.6)}
.aj-hero--photo .aj-hero-mark{display:none}

/* Honour label — states a real result, never decoration */
.aj-honour{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:16px;
  border:1px solid rgba(239,2,139,.6);padding:8px 15px;border-radius:2px;
  background:rgba(23,19,20,.55);backdrop-filter:blur(4px);
}
.aj-honour span{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.76rem;color:var(--cyan);
}

/* Feature block: photo beside copy */
.aj-figure{position:relative;overflow:hidden;background:var(--band)}
.aj-figure img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}

/* Photo grid — mixed portrait/landscape, tiled without gaps */
.aj-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--rule)}
.aj-photo{position:relative;overflow:hidden;background:var(--band)}
.aj-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.aj-photo:hover img{transform:scale(1.04)}
.aj-photo--tall{grid-row:span 2}
.aj-photo--wide{grid-column:span 2}
@media (max-width:900px){
  .aj-photos{grid-template-columns:repeat(2,1fr)}
  .aj-photo--wide{grid-column:span 2}
}

/* ==========================================================================
   TEAMS — the organization fields several age groups
   ========================================================================== */
.aj-teams-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;background:var(--rule);border:1px solid var(--rule);margin-top:8px}
.aj-team-card{
  background:#fff;padding:32px 28px;text-decoration:none;display:flex;flex-direction:column;
  transition:background .18s;position:relative;
}
.aj-team-card:hover{background:var(--band)}
.aj-team-age{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:3.4rem;line-height:.85;color:var(--plum);letter-spacing:-.01em;
}
.aj-team-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.8rem;color:var(--coal);margin-top:12px;
}
.aj-team-tag{color:var(--muted);font-size:.95rem;line-height:1.55;margin-top:10px}
.aj-team-go{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.76rem;color:var(--plum);margin-top:auto;padding-top:22px;
}
.aj-team-card:hover .aj-team-go{color:var(--coal)}

/* Team links in the footer use the footer's own link style, not the topbar's */
.aj-foot-teams{display:flex;flex-direction:column;gap:5px}
.aj-foot-teams a{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;color:rgba(245,242,246,.74);
  text-decoration:none;padding:0;background:none;
}
.aj-foot-teams a:hover{color:var(--cyan);background:none}

/* ---- Schedule ---- */
.aj-sched{border-top:2px solid var(--plum)}
.aj-sched-row{
  display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule);
}
.aj-sched-date{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  color:var(--plum);line-height:.95;font-variant-numeric:tabular-nums;
}
.aj-sched-mon{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;font-family:'Barlow Condensed',sans-serif}
.aj-sched-day{display:block;font-size:2rem}
.aj-sched-title{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.2rem;color:var(--coal);letter-spacing:.01em;
}
.aj-sched-loc{color:var(--muted);font-size:.94rem;margin-top:4px;line-height:1.5}
.aj-sched-kind{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.68rem;color:var(--plum);
  border:1px solid var(--rule);padding:5px 10px;white-space:nowrap;
}
.aj-sched-time{display:block;color:var(--muted);font-size:.84rem;margin-top:6px;text-align:right;letter-spacing:.04em}
.aj-sched-note{margin-top:18px;font-size:.84rem;color:var(--muted)}
@media (max-width:640px){
  .aj-sched-row{grid-template-columns:64px 1fr;gap:16px}
  .aj-sched-kind{grid-column:2;justify-self:start;margin-top:8px}
  .aj-sched-day{font-size:1.6rem}
  .aj-sched-time{text-align:left}
}

/* ---- Roster: a list, the way a team roster is actually printed ----
   Two columns on desktop so a 13-player squad reads compactly instead of as one
   long thin strip; a single column on phones. */
.aj-roster-count{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.72rem;color:var(--muted);margin:0 0 10px;
}
.aj-roster{
  list-style:none;margin:0;padding:0;border-top:2px solid var(--plum);
  columns:2;column-gap:64px;
}
.aj-player{
  display:flex;align-items:baseline;gap:18px;
  padding:13px 2px;border-bottom:1px solid var(--rule);
  break-inside:avoid;-webkit-column-break-inside:avoid;
}
.aj-player-num{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.4rem;line-height:1;color:var(--plum);
  min-width:2.4ch;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.aj-player-num.is-blank{color:#C9D0CB}
.aj-player-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:1.02rem;color:var(--coal);line-height:1.2;
}
@media (max-width:700px){
  .aj-roster{columns:1}
  .aj-player{padding:12px 2px}
}

/* ==========================================================================
   MOBILE CORRECTIONS  — appended last on purpose.
   The .aj-hero--photo{display:flex} rule in the PHOTOGRAPHY block sits later in
   this file than the earlier @media query, so it won the cascade at every width
   and the stacked phone layout never actually took effect. Overrides that must
   beat it have to come after it.
   ========================================================================== */

/* Outline buttons on DARK surfaces. The hero and page header are dark but carry
   no .aj-dark class, so pine-on-pine was rendering at roughly 1.5:1 contrast —
   "The Program" was effectively invisible. */
.aj-hero .aj-btn-line,
.aj-pagehead .aj-btn-line{color:var(--paper);border-color:rgba(245,242,246,.55)}
.aj-hero .aj-btn-line:hover,
.aj-pagehead .aj-btn-line:hover{background:var(--paper);color:var(--coal);border-color:var(--paper)}

@media (max-width:760px){
  /* Stack: whole photo, then the wordmark on solid pine beneath it. */
  .aj-hero--photo{display:block;min-height:0;align-items:initial}
  .aj-hero--photo .aj-hero-img{
    position:relative;inset:auto;width:100%;aspect-ratio:4/3;
    background-position:center;background-image:var(--hero-mobile,var(--hero));
  }
  .aj-hero--photo .aj-hero-scrim{display:none}
  .aj-hero--photo .aj-hero-inner{padding-top:26px;padding-bottom:30px}
  .aj-hero--photo h1,
  .aj-hero--photo .aj-hero-meta,
  .aj-hero--photo .aj-hero-sub{text-shadow:none}

  /* The brand wordmark plus five nav items cannot fit 390px — the text was
     overrunning the 10U link. The badge alone identifies the site here. */
  .aj-bar-name{display:none}
  .aj-bar-logo{height:40px}
}

/* Touch targets and label legibility on phones.
   Footer links rendered 18–21px tall (hard to hit with a thumb) and the stat
   labels came out at 10.9px. Both measured on a 390px viewport. */
@media (max-width:760px){
  .aj-foot-cols p{margin:0}
  .aj-foot-cols p a,
  .aj-foot-teams a{display:inline-block;padding:9px 0;line-height:1.25}
  .aj-foot-cols{gap:18px}
  .aj-fact dt{font-size:.78rem;letter-spacing:.18em}
  .aj-fact{padding:16px 22px}
  .aj-eyebrow{font-size:.8rem}
}

/* ---- Social marks in the header ---- */
.aj-social{display:flex;align-items:center;gap:2px;margin-left:12px}
.aj-social a{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:3px;
  color:rgba(245,242,246,.78);transition:color .15s,background .15s;
}
.aj-social a:hover{color:var(--coal);background:var(--pink)}
.aj-social svg{width:17px;height:17px;display:block}
@media (max-width:760px){
  /* Space is tight next to the team links; keep the marks but tighten them. */
  .aj-social{margin-left:6px;gap:0}
  .aj-social a{width:30px;height:30px}
  .aj-social svg{width:16px;height:16px}
}

/* Staff-only preview marker — makes it unmistakable that a section is switched
   off for the public even though a logged-in coach can see it. */
.aj-preview-note{
  border-left:4px solid var(--spark);background:#FFF4E8;color:#7A4A18;
  padding:14px 18px;margin-bottom:22px;font-size:.95rem;line-height:1.6;max-width:60ch;
}

/* "This is only an idea" marker — must read unambiguously, since the concept
   view deliberately shows a mockup and prices that are not yet real. */
.aj-concept-flag{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  color:var(--coal);background:var(--pink);padding:7px 14px;margin-bottom:14px;
}

/* Nav wordmark gains the gold "Southern Oregon" kicker, echoing the hero. */
.aj-bar-name{line-height:1.05}
.aj-bar-kicker{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;
  color:var(--cyan);margin-bottom:3px;
}

/* ==========================================================================
   TALL HERO — for photos that aren't wide enough for a cinematic band.
   A 1.4:1 team photo forced into a 2.58:1 band loses 46% of its height, which
   means heads or legs. Instead the photo sits beside the wordmark at its own
   aspect ratio, and nobody gets cropped out.
   ========================================================================== */
@media (min-width:761px){
  .aj-hero--tall{
    /* Narrower type column, wider photo: the wordmark is short, so an equal
       split left it stranded in dead space. */
    display:grid;grid-template-columns:minmax(0,360px) minmax(0,660px);
    justify-content:center;align-items:center;gap:56px;
    padding:44px 32px;min-height:0;
  }
  .aj-hero--tall .aj-hero-scrim{display:none}
  .aj-hero--tall .aj-hero-img{
    position:relative;inset:auto;order:2;width:100%;justify-self:center;
    aspect-ratio:var(--hero-ar,1.4);background-position:center;
    /* Cap by WIDTH derived from the ratio, not by height. A portrait photo in a
       660px column would be over 1000px tall — taller than the viewport — and
       capping the height would just crop the photo again. Deriving the width
       keeps the whole frame at a sane height whatever shape it is. */
    max-width:calc(560px * var(--hero-ar,1.4));
  }
  .aj-hero--tall .aj-hero-inner{
    order:1;position:static;padding:0;max-width:none;margin:0;width:auto;
  }
  .aj-hero--tall h1{font-size:clamp(3.4rem,8vw,6.5rem);text-shadow:none}
  .aj-hero--tall .aj-hero-meta,.aj-hero--tall .aj-hero-sub{text-shadow:none}
  .aj-hero--tall .aj-hero-rule{width:100%;margin:20px 0 16px}
  .aj-hero--tall .aj-hero-img{box-shadow:0 18px 44px rgba(0,0,0,.45)}
}
/* On phones the stacked layout already shows the whole photo — just use the
   real aspect ratio rather than assuming 4:3. */
@media (max-width:760px){
  /* the phone is served the -mobile file, so it needs that file's ratio */
  .aj-hero--photo .aj-hero-img{aspect-ratio:var(--hero-ar-m,var(--hero-ar,4/3))}
}

/* ---- Coaching staff ---- */
.aj-staff{display:grid;gap:22px;margin-top:4px}
.aj-coach{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start}
.aj-coach-photo{
  width:96px;aspect-ratio:4/5;background:var(--band);overflow:hidden;
  border:1px solid var(--rule);
}
.aj-coach-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* faces sit high in a headshot, so bias the frame upward */
  object-position:center 22%;
}
.aj-coach-photo.is-empty{
  display:flex;align-items:center;justify-content:center;
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.7rem;color:#B9C2BB;
}
.aj-coach-role{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.7rem;color:var(--plum);margin-bottom:5px;
}
.aj-coach-name{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.3rem;color:var(--coal);line-height:1;letter-spacing:.01em;
}
.aj-coach-bio{color:var(--muted);font-size:.97rem;line-height:1.6;margin-top:9px;max-width:46ch}
@media (max-width:520px){
  .aj-coach{grid-template-columns:76px 1fr;gap:14px}
  .aj-coach-photo{width:76px}
}

/* Banner layout disclaimer — the club promises the RATIO between levels, and the
   print shop owns the actual sizing, so say so plainly next to the mock-up. */
.aj-banner-note{
  border-left:4px solid var(--plum);background:var(--band);
  padding:14px 18px;margin-top:16px;max-width:60ch;
}
/* direct child only — :first-child ignores text nodes, so a <strong> mid-sentence
   inside the <p> was also matching and turning into a heading */
.aj-banner-note > strong:first-child{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--plum);margin-bottom:6px;
}
.aj-banner-note p{color:var(--muted);font-size:.94rem;line-height:1.65;margin:0}

/* "Why we're raising" — headline over full-width copy. The rule under the headline
   does the job the empty second column used to do: separate the two without a gap. */
.aj-why-h{padding-bottom:16px;border-bottom:2px solid var(--plum);margin-bottom:26px}
/* Full bleed to the .aj-wrap gutters. The inherited .aj-body cap (56ch) is tuned
   for a half-width column and left the copy stopping mid-page with nothing beside
   it — override rather than raise, so the text meets the same margins as the rule
   above it and the section edges. */
.aj-why-body{max-width:none}

/* "Why" runs straight into "Sponsorship", so the standard 78+78 panel gap reads as
   a hole between two halves of one argument. Scoped to this panel and to desktop:
   .aj-panel is shared with index/merch/team, and the mobile spacing is already
   right. padding-bottom only — never a shorthand, which would strip the gutter. */
@media (min-width:901px){
  .aj-panel-why{padding-bottom:32px}
}

/* Heading for the full-width levels grid. Deliberately lighter than .aj-panel h2
   so it reads as a subhead inside section 02, not a new section. */
.aj-levels-h{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1;
  color:var(--coal);margin:56px 0 20px;padding-bottom:12px;border-bottom:2px solid var(--plum);
}

/* Gear placement — an offer, not a level, so it reads warmer than the grey
   explanatory notes and carries a tappable phone number on mobile. */
.aj-gear-note{
  border:1px solid var(--plum);border-left:4px solid var(--plum);
  background:#fff;padding:14px 18px;margin-top:16px;max-width:60ch;
}
.aj-gear-note > strong:first-child{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--plum);margin-bottom:6px;
}
.aj-gear-note p{color:var(--text);font-size:.94rem;line-height:1.65;margin:0}
.aj-gear-note a{color:var(--plum);font-weight:700;white-space:nowrap}

/* ---- Team store ------------------------------------------------------------
   The shop lives on an outside vendor's site; this page's only job is to make
   the click feel worth making. Photo band + countdown + one repeated CTA. */
.aj-merch-hero{position:relative;background:var(--coal);overflow:hidden;padding:0}
.aj-merch-hero-img{position:absolute;inset:0;background-image:var(--shot);background-size:cover;background-position:center 30%;opacity:.42}
.aj-merch-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,19,20,.55) 0%,rgba(23,19,20,.82) 70%,rgba(23,19,20,.94) 100%)}
/* padding-block ONLY. The horizontal gutter comes from .aj-wrap on the same
   element, and the padding shorthand would wipe it out — which put the hero
   text hard against both screen edges on mobile. */
.aj-merch-hero-inner{position:relative;padding-top:74px;padding-bottom:66px;color:var(--paper)}
.aj-merch-hero-inner h1{color:#fff;margin:0}
.aj-merch-lead{max-width:56ch;margin:18px 0 0;color:rgba(245,242,246,.86);font-size:1.06rem;line-height:1.65}
.aj-merch-clock{display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:22px;padding:9px 16px;border:1px solid rgba(212,175,90,.5);border-radius:999px;background:rgba(212,175,90,.1)}
.aj-merch-clock-l{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;font-size:.9rem;color:var(--cyan)}
.aj-merch-clock-n{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.9rem;color:rgba(245,242,246,.72)}
.aj-merch-go{white-space:nowrap}

.aj-merch-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:26px}
.aj-merch-cat{background:var(--page);padding:24px 20px;display:flex;flex-direction:column;gap:5px}
.aj-merch-cat-n{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:1.45rem;color:var(--text);line-height:1}
.aj-merch-cat-d{font-size:.9rem;color:var(--muted)}

.aj-merch-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;margin-top:34px}
.aj-merch-fact{font-size:.94rem;color:var(--muted);line-height:1.6}
.aj-merch-fact strong{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.7px;font-size:1rem;color:var(--text);margin-bottom:3px}
.aj-merch-note{margin-top:20px;font-size:.85rem;color:var(--muted);max-width:56ch;margin-left:auto;margin-right:auto}

/* Landing-page teaser band */
.aj-merch-band{background:var(--coal);color:var(--paper);padding:44px 0}
.aj-merch-band .aj-wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.aj-merch-band h3{font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;font-size:2rem;color:#fff;margin:0;line-height:1.05}
.aj-merch-band p{margin:6px 0 0;color:rgba(245,242,246,.74);font-size:.98rem;max-width:46ch}

@media(max-width:640px){
  .aj-merch-hero-inner{padding-top:54px;padding-bottom:48px}
  .aj-merch-band .aj-wrap{flex-direction:column;align-items:flex-start}
}

/* Very small phones (iPhone SE and similar). The header carries brand + social +
   nav + CTA; once the Shop link joined, that no longer fit at 320px and the gold
   CTA ran off the right edge. The social icons are the safest thing to drop —
   they repeat in the footer, whereas the nav links are the only route to those
   pages on mobile. */
@media (max-width:379px){
  .aj-bar .aj-social{display:none}
  .aj-nav a{padding:10px 7px;letter-spacing:.06em}
  .aj-nav a.aj-nav-cta{padding:10px 11px}
}