/* ============================================================
   RUMMEL SPORT PAGES, THE POSTER LAYER.

   Loads AFTER rummel-page.css and rummel-blocks.css on the fifteen
   sport-<slug>.html inner pages. Those two sheets stay untouched; this
   one adds only what the poster hero and the sport blocks need.

   The reference is the throwback ball poster Kelly supplied 2026-08-08:
   textured paper, a small red kicker line, a short red slab deck, one
   colossal condensed word in Columbia blue running edge to edge, and
   the athlete cut out so he stands ON the letters. Merged here with the
   site system: same tokens, same nav, same motto footer, same type
   families, and smooth dissolves rather than hard seams.

   Three hero variants, picked per sport by a class on .poster:
     .cut    a transparent PNG athlete overlaps the giant word
     .panel  no clean cutout exists; a photo panel sits under the word,
             masked so it dissolves into the paper on every side
     .type   no photo at all (golf, tennis, powerlifting, ultimate).
             The word and the R carry it alone, and it still looks meant.
   ============================================================ */

/* ---- the paper field ---------------------------------------- */
.poster{
  position:relative; overflow:hidden;
  background:#f5f2eb;
  color:var(--navy);
  padding:calc(64px + 2.2rem) 0 0;   /* clears the fixed nav */
}
/* grain and age, all CSS: two gradient weaves plus a soft vignette.
   kept faint on purpose; the texture should be felt, not seen. */
.poster::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    repeating-linear-gradient(83deg,  rgba(11,34,64,.028) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-7deg,  rgba(11,34,64,.022) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 50% 8%,  rgba(255,255,255,.55), transparent 60%),
    radial-gradient(140% 110% at 50% 110%, rgba(11,34,64,.10), transparent 55%);
}
/* two faint fold creases, like the reference's worn stock */
.poster::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(172deg, transparent 0 24.7%, rgba(11,34,64,.045) 25%, rgba(255,255,255,.5) 25.2%, transparent 25.6%),
    linear-gradient(94deg,  transparent 0 78.7%, rgba(11,34,64,.035) 79%, rgba(255,255,255,.4) 79.2%, transparent 79.6%);
  opacity:.5;
}
.poster .p-wrap{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto; padding:0 clamp(15px,4vw,48px);
  display:flex; flex-direction:column; align-items:center;
}

/* (The small red kicker line that used to sit above the deck came out
   2026-08-17 at Kelly's ask; the poster opens on the deck now.) */

/* ---- deck one: the short red slab line ----------------------- */
.p-deck{
  font-family:var(--slab); font-weight:700; text-transform:uppercase;
  color:var(--red); line-height:.9; letter-spacing:.01em;
  font-size:clamp(2.2rem,7.5vw,4.6rem);
  text-align:center; margin-bottom:clamp(.4rem,1vw,.9rem);
}

/* ---- deck two: the colossal word ----------------------------- */
/* Oswald condensed, tight crop like the reference. The exact size is
   set by rummel-sport.js so the word always spans the wrap, one line,
   any word length, any viewport: the auto fit rule. */
.p-word{
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  color:#75B2DD; line-height:.84; letter-spacing:-.015em;
  font-size:20vw;              /* placeholder; JS fits it exactly */
  white-space:nowrap; text-align:center;
  user-select:none;
}
/* the athlete stands on the word, so the word block anchors him */
.p-stage{position:relative; width:100%; text-align:center;}

/* ---- the cutout athlete -------------------------------------- */
.poster.cut .p-stage{margin-bottom:0;}
.p-athlete{
  position:relative; z-index:3; display:block; margin:0 auto;
  margin-top:clamp(-14vw,-9vw,-4rem);      /* rides up onto the word */
  width:min(46vw,430px); height:auto;
  filter:drop-shadow(0 26px 34px rgba(11,34,64,.38));
}
/* soft ground so he does not float */
.p-ground{
  position:relative; z-index:2; margin:-1.2rem auto 0; width:min(40vw,380px); height:26px;
  background:radial-gradient(50% 100% at 50% 0, rgba(11,34,64,.22), transparent 70%);
}

/* ---- the panel variant --------------------------------------- */
/* photo under the word, dissolved into the paper on all sides per the
   smooth designs rule. the word overlaps its top third. */
.poster.panel .p-stage{margin-top:clamp(.6rem,1.4vw,1.2rem);}
.p-panel{
  position:relative; z-index:1; margin:clamp(-8vw,-5vw,-2rem) auto 0;
  width:min(92%,880px); aspect-ratio:16/9.4; background-size:cover;
  -webkit-mask-image:radial-gradient(78% 72% at 50% 46%, #000 55%, transparent 98%);
          mask-image:radial-gradient(78% 72% at 50% 46%, #000 55%, transparent 98%);
}
.poster.panel .p-word{position:relative; z-index:2;}

/* ---- the type only variant ----------------------------------- */
.poster.type .p-r{
  height:clamp(84px,14vw,150px); width:auto; display:block; margin:clamp(1rem,3vw,2.4rem) auto 0;
  filter:drop-shadow(0 18px 30px rgba(11,34,64,.25));
}

/* ---- the coach chip (the reference's name lockup) ------------ */
/* one line, the head coach's name. It stepped up a size on 2026-08-17
   ("slightly larger") and lost the Est. 1962 line under it the same day. */
.p-chip{
  position:relative; z-index:4;
  font-family:var(--sans); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; font-size:clamp(.86rem,1.8vw,1.1rem);
  color:var(--red); text-align:center;
  margin:clamp(1rem,2.4vw,1.8rem) 0 0;
}

/* ---- the dissolve from paper into the page ------------------- */
.p-fade{
  position:relative; z-index:2; height:clamp(56px,9vw,110px); margin-top:clamp(1.2rem,3vw,2.6rem);
  background:linear-gradient(180deg, transparent, #fff);
}

/* ---- below the poster: sport blocks -------------------------- */
.sp-body{background:#fff;}
.sp-sec{padding:clamp(2.6rem,6vw,4.6rem) 0;}
.sp-sec .wrap{max-width:1180px; margin:0 auto; padding:0 clamp(15px,4vw,48px);}

/* facts row: season, levels, coach as quiet chips */
.sp-facts{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
  margin:0 0 clamp(2rem,4vw,3rem);
}
.sp-facts .f{
  font-family:var(--sans); font-weight:600; font-size:.86rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); background:#f2f6fa; border:1px solid rgba(29,90,133,.16);
  border-radius:999px; padding:.62rem 1.15rem;
}
.sp-facts .f b{color:var(--red); font-weight:600;}

/* banner years: the title wall */
.sp-banners{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;}
.sp-banners .b{
  font-family:var(--slab); font-weight:700; font-size:1.06rem; letter-spacing:.04em;
  color:#fff; background:var(--ink-band); border-radius:10px; padding:.7rem 1.05rem .6rem;
  box-shadow:0 10px 22px -12px rgba(11,34,64,.5);
}
.sp-banners .b span{display:block; font-family:var(--sans); font-weight:600; font-size:.6rem; letter-spacing:.2em; opacity:.75; margin-top:.2rem;}
.sp-banners .b.gold{background:linear-gradient(160deg,#C8102E,#b00e29);}

/* history lines under the banners */
.sp-hist{max-width:640px; margin:1.6rem auto 0; text-align:center; font-size:1.02rem; line-height:1.65; color:var(--ink-soft);}

/* two up gallery, dissolved edges, never hard seams */
.sp-gallery{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:clamp(2rem,4vw,3rem);}
.sp-gallery .g{
  aspect-ratio:3/2; background-size:cover; background-position:center; border-radius:16px;
  box-shadow:0 18px 44px -20px rgba(11,34,64,.45);
}
.sp-gallery.one{grid-template-columns:1fr; max-width:760px; margin-left:auto; margin-right:auto;}

/* back to athletics link */
.sp-back{
  position:absolute; z-index:5; top:calc(64px + 1rem); left:clamp(15px,4vw,48px);
  font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy); opacity:.6; text-decoration:none;
}
.sp-back:hover{opacity:1; color:var(--red);}

/* ---- the championship slider --------------------------------- */
/* One slide per title. Photo slides carry art mined from the actual
   yearbook of that season; card slides carry the year huge in the
   poster's Columbia blue until their spread gets mined too. */
.champs{position:relative; margin-top:.6rem;}
.ch-track{
  display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem .2rem 1.2rem; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ch-track::-webkit-scrollbar{display:none;}
.ch-slide{
  flex:0 0 min(74%,520px); scroll-snap-align:center; position:relative;
  aspect-ratio:16/10.5; border-radius:18px; overflow:hidden; margin:0;
  box-shadow:0 18px 44px -18px rgba(11,34,64,.5);
}
.ch-img{position:absolute; inset:0; background-size:cover; background-position:center;}
.ch-slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 38%, rgba(11,34,64,.88));
}
.ch-slide figcaption{position:absolute; z-index:2; left:1.3rem; right:1.3rem; bottom:1.05rem; color:#fff;}
.ch-slide .y{
  font-family:var(--slab); font-weight:700; display:block; line-height:.9;
  font-size:clamp(2.4rem,5.6vw,3.4rem); letter-spacing:.01em;
  text-shadow:0 4px 18px rgba(0,0,0,.35);
}
.ch-slide .t{
  font-family:var(--sans); font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  font-size:.76rem; display:block; margin-top:.4rem; color:#75B2DD;
}
.ch-slide .c{font-family:'Lora',Georgia,serif; font-size:.86rem; line-height:1.45; display:block; margin-top:.35rem; opacity:.85;}
/* the year card variant */
.ch-slide.card{background:linear-gradient(160deg,#1D5A85,#0F3557);}
.ch-slide.card::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(117,178,221,.16) 1px, transparent 1px);
  background-size:22px 22px;
}
.ch-slide.card .y{font-size:clamp(3.6rem,9vw,5.4rem); color:#75B2DD; text-shadow:none;}
.ch-slide.card::after{background:linear-gradient(180deg, transparent 55%, rgba(11,34,64,.5));}
/* arrows */
.ch-btn{
  position:absolute; z-index:5; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(29,90,133,.18);
  background:#fff; color:var(--navy); font-size:1.5rem; line-height:1; cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(11,34,64,.4);
  transition:color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ch-btn:hover{color:var(--red); transform:translateY(-50%) scale(1.06);}
.ch-btn:focus-visible{outline:3px solid var(--red); outline-offset:2px;}
.ch-btn.prev{left:-10px;} .ch-btn.next{right:-10px;}
@media(max-width:760px){
  .ch-slide{flex-basis:84%;}
  .ch-btn{width:42px; height:42px;}
  .ch-btn.prev{left:-4px;} .ch-btn.next{right:-4px;}
}

/* ---- the sport tile grid on athletics-c7 --------------------- */
/* every sport, one photo tile, one click through to its page. the
   four sports with no local photograph yet get the type treatment,
   same DNA as their pages' type only posters, so nothing fakes. */
.sgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
.sg{
  position:relative; display:block; aspect-ratio:4/3; border-radius:16px;
  overflow:hidden; text-decoration:none;
  box-shadow:0 16px 40px -18px rgba(11,34,64,.45);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.sg:hover{transform:translateY(-5px); box-shadow:0 26px 54px -20px rgba(11,34,64,.55);}
.sg:focus-visible{outline:3px solid var(--red); outline-offset:3px;}
/* the photograph Ken Burns on hover (Kelly, 2026-08-16): a slow, continuous
   drift rather than a snap to 1.05 and stop. It eases in over the first
   second and then keeps creeping for as long as the pointer stays, so the
   picture reads as alive instead of enlarged. Scale is small and the pan is
   a few pixels, because the tile is 4:3 and anything bigger crops the
   subject out of the corner. Off under reduced motion, where the tile just
   lifts and the picture holds still. */
.sg .ph{
  position:absolute; inset:0; background-size:cover;
  transform-origin:50% 45%;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.sg:hover .ph{transform:scale(1.06) translate(-1.2%, -.8%);
  animation:sgBurns 9s ease-in-out 1.1s infinite alternate;}
@keyframes sgBurns{
  from{transform:scale(1.06) translate(-1.2%, -.8%);}
  to  {transform:scale(1.10) translate( 1.0%,  .9%);}
}
@media(prefers-reduced-motion:reduce){
  .sg .ph{transition:none;}
  .sg:hover .ph{transform:none; animation:none;}
}
.sg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 42%, rgba(11,34,64,.86));
}
.sg .nm{
  position:absolute; z-index:2; left:1.1rem; right:1.1rem; bottom:.95rem;
  color:#fff; font-family:var(--slab); font-weight:700; font-size:1.3rem;
  line-height:1.05; text-transform:uppercase; letter-spacing:.02em;
}
.sg .nm span{
  display:block; font-family:var(--sans); font-weight:600; font-size:.66rem;
  letter-spacing:.2em; opacity:.8; margin-top:.3rem;
}
.sg .ssn{
  position:absolute; z-index:2; top:.9rem; left:1.1rem;
  font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; background:rgba(200,16,46,.92);
  padding:.32rem .65rem; border-radius:999px;
}
/* the type only tile: steel field, the word, the R */
.sg.typeonly .ph{
  background:linear-gradient(160deg, #1D5A85, #14496F);
}
.sg.typeonly .word{
  position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  color:#75B2DD; font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:1;
  padding:0 1rem 1.4rem; text-align:center;
}
.sg.typeonly .word img{height:2.2em; width:auto; opacity:.9;}
.sg.typeonly .word b{font-weight:700; margin-left:.45em;}

/* ---- responsive ---------------------------------------------- */
@media(max-width:1080px){
  .sgrid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .p-athlete{width:min(62vw,320px); margin-top:-16vw;}
  .p-panel{width:100%; aspect-ratio:4/3.4;}
  .sp-gallery{grid-template-columns:1fr;}
  .sp-back{top:calc(58px + .8rem);}
}
@media(max-width:560px){
  .sgrid{grid-template-columns:1fr; gap:1.1rem;}
  .sg{aspect-ratio:16/10;}
}
@media(prefers-reduced-motion:no-preference){
  .p-athlete{transition:transform .5s cubic-bezier(.16,1,.3,1);}
  .poster:hover .p-athlete{transform:translateY(-6px);}
}


/* ============================================================
   ATHLETICS FRONT (athletics-c7.html), added 2026-08-15 for Kelly's
   review notes. Three additive runs, nothing above touched:
     .sg.note      the fifteenth tile in the sport grid
     .rafters      every state title as a hanging banner
     .coach-strip  the Athletic Director contact strip
   ============================================================ */

/* ---- the athletics hero headline ------------------------------ */
/* "The Raiders are OUT FOR A VICTORY." wants to break on the colour change, not
   mid phrase. The shared rule caps the display at 24ch, which is wide enough to
   pull "out for" up onto line one. 18ch lands the break exactly on the em at
   every desktop width; below 1080 the copy comes off the photograph onto the
   band and the shared 20ch balance rule takes over, which is what a phone needs
   (the phrase is wider than a 393px screen, so it must be free to wrap). */
body[data-section="athletics"] header.open .display{max-width:18ch;}
@media(max-width:1080px){
  body[data-section="athletics"] header.open .display{max-width:20ch;}
}

/* ---- the note tile ------------------------------------------- */
/* Fourteen sports in three columns strand two on the last row, and the
   balanced grid rule wants that row full. The fifteenth slot carries the
   intramurals note that used to sit under the grid, so the hole becomes the
   most deliberate tile in the row. At two columns (1080 and down) fourteen
   divides evenly, so the note leaves the grid and spans the full width as a
   strip underneath, and on a phone it is simply one more row. */
.sg.note{
  display:flex; flex-direction:column; justify-content:flex-end; gap:0;
  background:linear-gradient(160deg,#EEF6FC 0%,#DCEBF7 100%);
  border:1px solid rgba(29,90,133,.16); box-shadow:none;
  padding:1.35rem 1.4rem 1.2rem;
}
.sg.note::after{display:none;}
/* Rufus, the light blue single colour mark off the brand masters (Kelly,
   2026-08-16: put a light blue Rufus behind here). He is square where the R was
   tall, so he sits low and right, larger, and quiet enough that the question
   still reads over him. The R watermark this replaced sat top right at 52%. */
.sg.note .r{position:absolute; right:-1.6rem; bottom:-1.9rem; top:auto; width:82%; opacity:.42;
  pointer-events:none; transition:transform .6s cubic-bezier(.16,1,.3,1);}
.sg.note:hover .r{transform:rotate(-4deg) scale(1.04);}
.sg.note .t{position:relative; font-family:var(--slab); text-transform:uppercase; font-size:1.3rem;
  line-height:1.12; letter-spacing:.02em; color:var(--navy);}
.sg.note p{position:relative; font-family:var(--serif); font-size:.96rem; line-height:1.5;
  color:var(--ink-soft); margin-top:.5rem;}
/* the tile is one question and one button (Kelly, 2026-08-16: make this cleaner,
   just say Looking for club sports? and a button to Student Life). The go line
   became a real button: filled, 44px, the same red-to-lift the site buttons use,
   never a bare text link a thumb has to hunt for. */
.sg.note .go{position:relative; margin-top:1rem; font-family:var(--sans); font-weight:600;
  font-size:var(--t-label); letter-spacing:.13em; text-transform:uppercase; color:#fff;
  background:var(--red); border-radius:10px; padding:0 1.15rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:44px;
  align-self:flex-start; box-shadow:0 10px 24px -12px rgba(200,16,46,.55);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;}
.sg.note .go span{transition:transform .18s ease;}
.sg.note:hover .go{background:var(--red-deep,#B00E29); transform:translateY(-1px);
  box-shadow:0 14px 28px -12px rgba(200,16,46,.65);}
.sg.note:hover .go span{transform:translateX(4px);}
.sg.note small{position:relative; display:block; margin-top:.5rem; font-family:var(--serif);
  font-size:.74rem; line-height:1.4; color:var(--ink-soft); opacity:.85;}
@media(max-width:1080px){
  .sg.note{grid-column:1 / -1; aspect-ratio:auto; display:grid;
    grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t go";
    align-items:center; column-gap:1.6rem; padding:1.25rem 1.5rem;}
  .sg.note .t{grid-area:t;} .sg.note .go{grid-area:go; margin-top:0;}
  .sg.note .r{width:38%; right:-1.4rem; bottom:-2rem; top:auto; opacity:.32;}
}
@media(max-width:560px){
  .sg.note{grid-template-columns:minmax(0,1fr); grid-template-areas:"t" "go"; row-gap:.2rem;}
  .sg.note .go{margin-top:.6rem; justify-self:start;}
}

/* ---- the rafters --------------------------------------------- */
/* Every LHSAA team state title, one banner each, hanging from a beam and
   scrolling sideways with native snap. The banner field is Columbia Blue (the
   lead colour) with a red rod at the top. Type is WHITE AND RED, Rummel on a
   Rummel banner (Kelly, 2026-08-16: these are navy, they should be white and
   red). Year and sport are red; the labels and the coach are white. White on
   Columbia measures about 2.8:1, so every white line carries the same solid
   navy offset the rail uses, one shadow and no blur, which holds the edges
   crisp without the halo that reads cheap. A yearbook photograph fills the top of the banner IN FULL COLOUR from
   the start (Kelly, 2026-08-16: make these all full colour to begin with;
   the blue duotone with colour on hover was the first pass and it hid the
   photographs) and dissolves into the field per the smooth designs rule.
   Under each year the head coach is named rather than a game note. The
   banners hang in when the strip scrolls into view and then sway almost
   imperceptibly, which is the one motion moment on the section. */
.rafters-sec .sec-head{margin-bottom:.4rem;}
.rafters{position:relative;}
.raf-beam{position:absolute; left:0; right:0; top:2.4rem; height:3px; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.26) 10%,rgba(255,255,255,.26) 90%,rgba(255,255,255,0));}
.raf-track{
  display:flex; gap:1.5rem; align-items:flex-start;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* the vertical padding is what keeps the hover lift and the banner shadow
     inside the clip: overflow-y is hidden so the strip cannot scroll up and down */
  padding:2.4rem 0 3.6rem;
  padding-left:max(2.4rem, calc((100% - 1280px) / 2 + 2.4rem));
  padding-right:max(2.4rem, calc((100% - 1280px) / 2 + 2.4rem));
  scroll-padding-left:max(2.4rem, calc((100% - 1280px) / 2 + 2.4rem));
}
.raf-track::-webkit-scrollbar{display:none;}
.raf-track:focus-visible{outline:3px solid var(--rb); outline-offset:-3px;}
.banner{
  flex:0 0 clamp(232px,21vw,290px); scroll-snap-align:start; position:relative;
  aspect-ratio:5/7; text-decoration:none; color:var(--navy); display:block;
  transform-origin:50% -12px;
}
.b-sway,.b-in{position:absolute; inset:0; display:block;}
.b-sway{transform-origin:50% -12px;}
.b-in{overflow:hidden; border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#75B2DD 0%,#75B2DD 60%,#67A9D8 100%);
  box-shadow:0 28px 52px -24px rgba(0,0,0,.6);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;}
.banner:hover .b-in{transform:translateY(-6px); box-shadow:0 36px 62px -24px rgba(0,0,0,.65);}
/* the rod */
.b-in::before{content:""; position:absolute; left:0; right:0; top:0; height:9px; z-index:6;
  background:linear-gradient(180deg,#D3183A,#B00E29); box-shadow:0 2px 6px rgba(0,0,0,.28);}
/* the photograph, in full colour from the start. the second colour layer
   (.b-ph-c) that used to surface on hover is now the same image at rest,
   so the markup did not have to change: both layers show, both are colour. */
.b-ph,.b-ph-c{position:absolute; left:0; right:0; top:0; height:60%; display:block;
  background-size:cover; background-position:center 30%;}
.b-ph{filter:none; mix-blend-mode:normal; opacity:1;}
.b-ph-c{opacity:1;}
/* the dissolve: photo into field, ending exactly where the photo ends.
   The old ramp reached 60% Columbia at its midpoint, which sat squarely over
   the lower half of the photograph and blue washed it even after the duotone
   came off (Kelly, 2026-08-16: full colour ALWAYS). The ramp now stays clear
   through most of its height and only turns to the field in the last stretch,
   so the picture reads true and only its bottom edge melts into the banner. */
.b-in .fade{position:absolute; left:0; right:0; top:44%; height:16%; z-index:2; display:block;
  background:linear-gradient(180deg,rgba(117,178,221,0) 0%,rgba(117,178,221,.18) 45%,rgba(117,178,221,.72) 82%,#75B2DD 100%);}
/* the type banner: no photograph yet, the R stands in */
.banner .b-mark{position:absolute; z-index:2; left:50%; top:16%; width:36%; height:auto;
  transform:translateX(-50%); filter:drop-shadow(0 10px 20px rgba(11,34,64,.25));}
.banner.hall .b-mark-hof{filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));}
/* type */
.b-txt{position:absolute; z-index:4; left:1.15rem; right:1.15rem; bottom:1.05rem; display:block;}
.b-lab{display:block; font-family:var(--sans); font-weight:600; font-size:var(--t-label); letter-spacing:.18em;
  text-transform:uppercase; color:#fff; text-shadow:0 1px 0 rgba(11,34,64,.55);}
.b-sport{display:block; font-family:var(--slab); text-transform:uppercase; font-size:1.02rem; line-height:1.1;
  letter-spacing:.03em; color:var(--red); margin-top:.25rem; text-shadow:0 1px 0 rgba(11,34,64,.35);}
.b-year{display:block; font-family:var(--slab); text-transform:uppercase; line-height:.92;
  font-size:clamp(2.5rem,4vw,3.15rem); letter-spacing:.005em; color:var(--red); margin-top:.15rem;
  text-shadow:0 2px 0 rgba(11,34,64,.32);}
/* the line under the year names the head coach. it reserves two lines whether
   or not it needs them, so every year sits at the same height across the strip.
   Oswald rather than the serif, because a name is a label, not a sentence. */
.b-note{display:block; font-family:var(--sans); font-weight:500; font-size:.86rem; line-height:1.4;
  letter-spacing:.06em; text-transform:uppercase; color:#fff; margin-top:.5rem; min-height:2.8em;
  text-shadow:0 1px 0 rgba(11,34,64,.55);}
.b-note .who{display:block; font-family:var(--sans); font-weight:400; font-size:.7rem; letter-spacing:.16em;
  color:rgba(255,255,255,.78); margin-bottom:.1rem;}
/* the Hall card that ends the strip: the deep band blue, white type */
.banner.hall .b-in{background:linear-gradient(180deg,#14496F 0%,#0F3557 100%);}
.banner.hall .b-in::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--dots); background-size:13px 13px; opacity:.4;}
.banner.hall .b-lab{color:var(--rb-type);}
.banner.hall .b-sport{color:#fff; font-size:1.3rem; margin-top:.35rem;}
.banner.hall .b-note{color:rgba(255,255,255,.86); min-height:0;}
.banner.hall .go{display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; min-height:32px;
  font-family:var(--sans); font-weight:600; font-size:var(--t-label); letter-spacing:.13em;
  text-transform:uppercase; color:var(--rb);}
.banner.hall .go span{transition:transform .18s ease;}
.banner.hall:hover .go span{transform:translateX(4px);}
/* the Hall card now carries the Athletic Hall of Fame lockup, a wide mark, so it
   takes most of the card rather than the R's third (Kelly, 2026-08-16: bigger). */
.banner.hall .b-mark{top:9%; width:78%;}

/* the hover, Kelly's spec (2026-08-15): the type lights up red and white and is
   really easy to read. A navy field rises behind the type block so white and red
   both read on it, the year and the sport go white, the label goes red, and the
   photograph colours in above. All on transitions, nothing snaps. */
.b-in .lit{position:absolute; left:0; right:0; bottom:0; height:46%; z-index:3; display:block;
  opacity:0; transition:opacity .45s ease; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,34,64,0) 0%,rgba(11,34,64,.82) 32%,rgba(11,34,64,.94) 100%);}
.banner:hover .b-in .lit,.banner:focus-visible .b-in .lit{opacity:1;}
.b-lab,.b-sport,.b-year,.b-note{transition:color .35s ease, text-shadow .35s ease;}
.banner:hover .b-lab,.banner:focus-visible .b-lab{color:#E8324F;}
.banner:hover .b-sport,.banner:hover .b-year,.banner:hover .b-note,
.banner:focus-visible .b-sport,.banner:focus-visible .b-year,.banner:focus-visible .b-note{color:#fff;}
.banner:hover .b-year,.banner:focus-visible .b-year{text-shadow:0 2px 18px rgba(0,0,0,.35);}
.banner.hall .lit{display:none;}
.banner:focus-visible{outline:3px solid var(--rb); outline-offset:4px;}

/* the entrance and the sway. entrance on .banner, sway on .b-sway, lift on
   .b-in, so the three transforms never fight over one element. */
.rafters.js .banner{opacity:0; transform:rotate(-4deg) translateY(-18px);}
.rafters.js.in .banner{animation:rafHang 1.05s cubic-bezier(.2,.85,.25,1) both;
  animation-delay:calc(var(--i,0) * 70ms);}
@keyframes rafHang{
  0%{opacity:0; transform:rotate(-4deg) translateY(-18px);}
  70%{opacity:1; transform:rotate(.9deg) translateY(2px);}
  100%{opacity:1; transform:rotate(0) translateY(0);}
}
.rafters.in .b-sway{animation:rafSway 7.5s ease-in-out infinite alternate;
  animation-delay:calc(1.1s + var(--i,0) * -1.3s);}
@keyframes rafSway{from{transform:rotate(-.5deg);} to{transform:rotate(.5deg);}}
@media(prefers-reduced-motion:reduce){
  .rafters.js .banner{opacity:1; transform:none; animation:none;}
  .rafters.in .b-sway{animation:none;}
}

/* the arrows */
.raf-btn{
  position:absolute; z-index:5; top:calc(50% + .2rem); transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:#fff; color:var(--navy); font-size:1.6rem; line-height:1; cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.6);
  transition:color .15s ease, transform .15s ease, opacity .3s ease, box-shadow .15s ease;
}
.raf-btn:hover{color:var(--red); transform:translateY(-50%) scale(1.06);}
.raf-btn:focus-visible{outline:3px solid var(--rb); outline-offset:2px;}
.raf-btn.prev{left:calc(max(2.4rem, (100% - 1280px) / 2 + 2.4rem) - 23px);}
.raf-btn.next{right:calc(max(2.4rem, (100% - 1280px) / 2 + 2.4rem) - 23px);}
.rafters.at-start .raf-btn.prev,.rafters.at-end .raf-btn.next{opacity:0; pointer-events:none;}

/* under the strip: individual champions and the Hall */
.raf-foot{display:flex; justify-content:space-between; align-items:center; gap:1.2rem 2rem;
  flex-wrap:wrap; margin-top:.2rem;}
.indiv{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem;}
.indiv .lab{font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rb-type); margin-right:.4rem;}
.indiv .chip{font-family:var(--sans); font-weight:600; font-size:.84rem; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:999px; padding:.55rem 1rem; line-height:1.3;}
.indiv .chip b{color:var(--rb); font-weight:600; margin-left:.35em; letter-spacing:.06em;}
@media(max-width:1080px){
  .raf-btn{display:none;}
}
@media(max-width:760px){
  .banner{flex-basis:min(70vw,290px);}
  .raf-track{padding-left:1.25rem; padding-right:1.25rem; scroll-padding-left:1.25rem; gap:1.1rem;}
  .raf-foot{flex-direction:column; align-items:stretch;}
  .indiv .lab{width:100%; margin-right:0;}
}

/* ---- the coach strip ----------------------------------------- */
/* One person, shown: the face, the role quiet above a red Oswald name (the
   drawer contact's own convention), the address and the number as real
   links that are also legible enough to write down. */
.coach-strip{padding:3.4rem 0 3.6rem;}
.coach{display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.4rem 2.2rem;
  align-items:center; background:var(--rb-pale); border-left:5px solid var(--rb-deep);
  padding:1.9rem 2.2rem 1.9rem 2rem;}
.coach .face{width:98px; height:98px; border-radius:50%; overflow:hidden; background:#fff;
  box-shadow:0 12px 26px -14px rgba(11,34,64,.5);}
.coach .face img{width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;}
.coach .role{font-family:var(--sans); font-weight:500; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);}
.coach .name{font-family:var(--sans); font-weight:600; font-size:1.55rem; line-height:1.15;
  color:var(--red); letter-spacing:.005em; margin-top:.15rem;}
.coach .what{font-family:var(--serif); font-size:1rem; line-height:1.6; color:var(--ink-soft);
  margin-top:.5rem; max-width:56ch;}
/* Kelly, 2026-08-15: no paragraph; the address and the number sit right under
   the name, on one line where there is room and stacked where there is not.
   2026-08-17, "clean this up more": they are quiet outlined chips now rather
   than two runs of blue text, and the extension rides the number as a lighter
   trailing note instead of a comma splice inside the label. Mirrored verbatim
   in rummel-blocks.css, which carries the same block for the Director of
   Alumni. Change one, change both. */
.coach .links{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .7rem; margin-top:.9rem;}
.coach .links a{font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.02em;
  color:var(--navy); text-decoration:none; min-height:46px; display:inline-flex; align-items:center;
  gap:.6rem; white-space:nowrap; padding:0 1.05rem; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  transition:border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;}
.coach .links a svg{width:17px; height:17px; flex:none; color:var(--rb-deep); opacity:1;}
.coach .links a .ext{font-weight:500; color:var(--ink-soft); letter-spacing:.02em;}
.coach .links a:hover{border-color:var(--rb-deep); transform:translateY(-2px);
  box-shadow:0 10px 22px -14px rgba(11,34,64,.55);}
@media(max-width:960px){
  .coach .links{gap:.6rem;}
}
@media(max-width:560px){
  .coach{padding:1.4rem 1.2rem; gap:1rem 1rem;}
  .coach .face{width:74px; height:74px;}
  .coach .name{font-size:1.32rem;}
  /* full width chips on a phone: one obvious tap target each, stacked, with air
     between them rather than the flush 44px rows that read as one lump */
  .coach .links{flex-direction:column; align-items:stretch; gap:.55rem;}
  .coach .links a{white-space:normal; justify-content:flex-start;
    font-size:clamp(.88rem,4vw,.98rem); padding:.72rem 1rem;}
}

/* ═══════════════ SCHEDULE ═══ the coach's schedule, live from the Staff Hub.
   Drawn by rummel-schedule.js in the Schedule Editor's own look so what the
   family sees is what the coach typed. Card, head rule, date circles, home
   washes in red from the right and away in Columbia blue. ══════════════════ */
.sp-schedule{padding-top:clamp(1.2rem,3vw,2.2rem);}
.sp-schedule .sec-head{margin-bottom:clamp(1.2rem,2.6vw,1.8rem);}
.sp-schedule .sch{max-width:680px; margin:0 auto; background:#fff; border-radius:14px; position:relative;
  padding:26px 30px 14px; box-shadow:0 1px 3px rgba(11,34,64,.05), 0 30px 64px -38px rgba(11,34,64,.45);}
.sch-head{display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:14px;
  padding-bottom:9px; border-bottom:3px solid var(--navy); margin-bottom:8px;}
.sch-r{height:2.6rem; width:auto; flex:none;}   /* fixed, never scaled to the text */
.sch-brand{min-width:0;}
.sch-eyebrow{font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--rb-deep); line-height:1;}
.sch-title{font-family:var(--slab); font-weight:700; text-transform:uppercase; font-size:1.7rem; line-height:.92; letter-spacing:.01em; color:var(--rb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sch-tix{display:inline-flex; align-items:center; font-family:var(--sans); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy); background:var(--gold); border-radius:4px; padding:.42rem .7rem; text-decoration:none; white-space:nowrap; min-height:32px; transition:background .18s ease;}
.sch-tix:hover{background:var(--gold-lift);}

/* level picker: button + menu */
.sch-pick{position:relative; display:inline-block; margin:2px 0 6px;}
.sch-pick-btn{font-family:var(--sans); font-weight:600; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#9CA3AF;
  background:none; border:0; padding:.55rem .1rem; min-height:44px; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;}
.sch-pick-btn b{color:var(--navy); font-weight:600;}
.sch-pick-btn .chev{display:inline-block; transition:transform .18s ease; line-height:1; margin-top:-.35em;}
.sch-pick.open .sch-pick-btn .chev{transform:rotate(180deg);}
.sch-pick-menu{position:absolute; top:100%; left:0; z-index:20; min-width:200px; background:#fff; border-radius:10px; padding:.4rem;
  box-shadow:0 16px 40px rgba(11,34,64,.25); display:none;}
.sch-pick.open .sch-pick-menu{display:block;}
.sch-pick-menu button{display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); padding:.6rem .7rem; border-radius:6px; min-height:40px;}
.sch-pick-menu button:hover{background:var(--navy); color:#fff;}
.sch-pick-menu button.on{background:var(--rb-pale);}
.sch-pick-menu button.on:hover{background:var(--navy);}
.sch-pick-menu .mute{font-size:.55rem; letter-spacing:.08em; opacity:.55; font-weight:500;}

/* rows */
.sch-rows{margin-top:2px;}
.sch-row{display:grid; grid-template-columns:48px 38px 1fr auto 40px; gap:1.05rem; align-items:center; padding:.66rem .5rem .66rem .9rem;
  border-bottom:1px solid #E6EDF5; border-radius:8px; position:relative; transition:background .14s;}
.sch-row.home{background:linear-gradient(270deg, rgba(200,16,46,.08) 0%, #fff 42%);}
.sch-row.away{background:linear-gradient(270deg, #EBF5FB 0%, #fff 42%);}
.sch-row.home:hover{background:linear-gradient(270deg, rgba(200,16,46,.15) 0%, #F6F9FC 44%);}
.sch-row.away:hover{background:linear-gradient(270deg, #DEEDF8 0%, #F6F9FC 44%);}
.sch-row.past{opacity:.5;}
.sch-row.next{box-shadow:inset 3px 0 0 var(--gold);}
.sch-circle{width:46px; height:46px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid #E2E6EB; background:#fff; font-family:var(--sans); line-height:1;}
.sch-circle .m{font-size:.52rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;}
.sch-circle .d{font-size:1.05rem; font-weight:700;}
.sch-circle.home,.sch-time.home{color:var(--red);}
.sch-circle.away,.sch-time.away{color:var(--rb-deep);}
.sch-logo{width:36px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none;}
.sch-logo img{width:100%; height:100%; object-fit:contain; display:block;}
.sch-logo .ph{font-family:var(--sans); font-weight:700; font-size:.6rem; color:#9aa3ad;}
.sch-info{min-width:0;}
.sch-name{font-family:var(--sans); font-weight:600; font-size:.86rem; text-transform:uppercase; letter-spacing:.03em; color:var(--navy); line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sch-meta{display:flex; align-items:center; gap:.45rem; margin-top:.28rem; flex-wrap:wrap;}
.sch-meta .pill{font-family:var(--sans); font-size:.52rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.18rem .55rem; border-radius:99px; color:#fff; line-height:1.2;}
.sch-meta .pill.h{background:var(--red);}
.sch-meta .pill.a{background:var(--rb);}
.sch-loc,.sch-sub{font-family:var(--sans); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:#606060;}
.sch-right{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none;}
.sch-dow{font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#7a8a99; line-height:1;}
.sch-time{font-family:var(--sans); font-weight:600; font-size:.8rem; text-align:right; white-space:nowrap;}
.sch-empty{text-align:center; padding:2.2rem 1rem 1.6rem; color:#6f7a86; font-family:var(--sans); font-size:.9rem; letter-spacing:.02em;}
.sch-upd{font-family:var(--sans); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:#9aa3ad; text-align:right; padding:.7rem .2rem 0;}

/* ---- add to calendar (Kelly, 2026-08-17) --------------------------
   One quiet single color glyph at the end of every row, a 40px target.
   Navy at rest, red on hover, like every other icon on the site. Tap it
   and the family gets the same six calendar tiles the event emails use,
   in a popup right here, filled from what the coach typed. */
.sch-cal{width:40px; height:40px; border-radius:50%; border:0; background:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; color:var(--rb-deep); opacity:.72;
  transition:opacity .15s ease, background .15s ease, color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color:transparent;}
.sch-cal svg{width:20px; height:20px; display:block;}
.sch-cal:hover,.sch-cal:focus-visible{opacity:1; color:var(--red); background:rgba(200,16,46,.08); transform:scale(1.06); outline:0;}
.sch-cal:focus-visible{box-shadow:0 0 0 3px rgba(117,178,221,.55);}
.sch-row.past .sch-cal{visibility:hidden;}   /* a game already played has nothing to add */

/* the popup: the same overlay the Clamor calendar service draws on other
   sites, so a family who met it in an email meets the same thing here */
.sch-atc-ov{position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(11,34,64,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .2s ease; overscroll-behavior:contain;}
.sch-atc-ov.is-open{opacity:1;}
.sch-atc-dlg{position:relative; width:100%; max-width:420px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px);
  background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 30px 70px -20px rgba(11,34,64,.55);
  transform:translateY(10px) scale(.985); transition:transform .22s cubic-bezier(.34,1.2,.64,1);
  display:flex; flex-direction:column;}
.sch-atc-ov.is-open .sch-atc-dlg{transform:none;}
.sch-atc-x{position:absolute; top:11px; right:11px; z-index:2; width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.82); color:#1E3F66; font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow:0 1px 3px rgba(11,34,64,.14), inset 0 0 0 1px rgba(30,63,102,.10); font-family:var(--sans);
  transition:background .15s ease, color .15s ease, transform .15s ease;}
.sch-atc-x:hover{background:#fff; color:var(--red); transform:scale(1.06);}
.sch-atc-fr{width:100%; border:0; display:block; height:300px; flex:0 0 auto; transition:height .18s ease; overflow:auto; -webkit-overflow-scrolling:touch;}
@media(max-width:480px){ .sch-atc-ov{padding:12px;} .sch-atc-dlg{max-width:none; border-radius:16px;} }
@media(prefers-reduced-motion:reduce){ .sch-atc-ov,.sch-atc-dlg,.sch-atc-fr,.sch-cal{transition:none;} }

@media(max-width:560px){
  .sp-schedule .sch{padding:20px 12px 10px; border-radius:12px;}
  .sch-head{gap:10px;}
  .sch-title{font-size:1.4rem;}
  .sch-row{grid-template-columns:44px 1fr auto 36px; gap:.6rem; padding:.6rem .2rem .6rem .6rem;}
  .sch-logo{display:none;}
  .sch-circle{width:44px; height:44px;}
  .sch-name{white-space:normal;}
  .sch-cal{width:36px; height:36px;}
  .sch-cal svg{width:19px; height:19px;}
}

/* ═══════════════ ROSTER ═══ the team photo and the names by grade. The
   tab strip reuses the block library's .tabs-nav look; the list is a
   plain columned roll, three across on desktop, one on a phone. ═══════ */
.sp-roster .team-photo{margin:0 0 clamp(1.8rem,4vw,2.8rem); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 3px rgba(11,34,64,.06), 0 30px 64px -38px rgba(11,34,64,.5); background:#fff;}
.sp-roster .team-photo img{display:block; width:100%; height:auto;}
.sp-roster .team-photo figcaption{font-family:var(--sans); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rb-deep); padding:.8rem 1.1rem; background:#fff;}
.sp-roster .team-photo figcaption span{color:#8a94a0;}
.ros-tabs .tabs-nav{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.ros-tabs .tabs-nav::-webkit-scrollbar{display:none;}
.ros-tabs .tab-btn{padding:.9rem 1.2rem;}
.ros-tabs .tab-btn .n{display:inline-block; margin-left:.5rem; font-size:.7rem; letter-spacing:.04em; color:#9aa3ad; font-weight:600;}
.ros-tabs .tab-btn.active .n{color:var(--red);}
.ros-list{list-style:none; margin:0; padding:0; columns:3; column-gap:2.4rem;}
.ros-list li{break-inside:avoid; font-family:var(--sans); font-weight:500; font-size:1.02rem; letter-spacing:.02em; color:var(--navy);
  padding:.55rem .2rem; border-bottom:1px solid #E6EDF5; display:flex; align-items:baseline; gap:.6rem;}
.ros-list li em{font-style:normal; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rb-deep); margin-left:auto;}
.ros-list li .num{font-family:var(--slab); text-transform:uppercase; color:var(--red); min-width:2.2ch; text-align:right;}
.ros-list li .pos{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:#7a8a99; margin-left:auto;}
@media(max-width:1080px){ .ros-list{columns:2;} }
@media(max-width:640px){ .ros-list{columns:1;} .ros-tabs .tab-btn{padding:.8rem .9rem; font-size:.78rem;} }

/* the varsity table: number, name, position, grade, height, weight */
.ros-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ros-table{width:100%;border-collapse:collapse;font-family:var(--sans);}
.ros-table th{font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rb-deep);text-align:left;padding:.5rem .6rem;border-bottom:2px solid var(--navy);}
.ros-table td{padding:.55rem .6rem;border-bottom:1px solid #E6EDF5;font-size:.98rem;color:var(--navy);vertical-align:middle;}
.ros-table td.no{font-family:var(--slab);text-transform:uppercase;color:var(--red);font-size:1.05rem;width:3.4rem;}
.ros-table td.nm{font-weight:500;letter-spacing:.02em;}
.ros-table td.pos{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--rb-deep);}
.ros-table td.gr,.ros-table td.ht,.ros-table td.wt{color:#606060;font-size:.9rem;white-space:nowrap;}
.ros-table tbody tr:hover td{background:#F6F9FC;}
.ros-note{margin-top:1rem;font-family:var(--sans);font-size:.9rem;line-height:1.6;color:#606060;}
.ros-note b{color:var(--navy);font-weight:600;}
.ros-note em{font-style:normal;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#8a94a0;margin-left:.15rem;}
.coaches{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;}
.coaches .co{background:#f2f6fa;border:1px solid rgba(29,90,133,.16);border-radius:10px;padding:.9rem 1rem;}
.coaches .co.head{grid-column:1/-1;background:var(--navy);border-color:var(--navy);}
.coaches .co b{display:block;font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--navy);letter-spacing:.02em;}
.coaches .co.head b{color:#fff;font-size:1.3rem;}
.coaches .co b .y{color:inherit;}
.coaches .co span{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rb-deep);margin-top:.2rem;}
.coaches .co.head span{color:var(--rb);}
@media(max-width:820px){ .coaches{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .ros-table th.ht,.ros-table th.wt,.ros-table td.ht,.ros-table td.wt{display:none;} .coaches{grid-template-columns:1fr;} }


/* ═══════════════ ON THIS PAGE ═══ the jump row (Kelly, 2026-08-17).
   "A dropdown inner navigation on the sport pages so it is easy to get
   to the schedule, roster, championships and coaches." It is the same
   IN THIS SECTION row the section pages carry on phones, drawn by
   rummel-sport.js from data-jump on the blocks, so a sport gains Roster
   and Coaches the day its roster lands and loses nothing when a block is
   deleted. The section pages show the row only under 1080 because the
   rail takes over above; a sport page has no rail, so here it stays at
   every width and its content lines up with the poster's own gutters. */
body.sp-its .its{display:block;}
@media(min-width:1081px){
  .sp-its .its-hd,.sp-its .its-list a{
    padding-left:max(1.25rem, calc(50% - 590px + 3rem));
    padding-right:max(1.25rem, calc(50% - 590px + 3rem));
  }
}
/* jumps land under the sticky bars, not beneath them */
.sp-body [id]{scroll-margin-top:calc(var(--nav-h,72px) + 3.6rem);}