/* ============================================================
   RUMMEL RAIDER BAND. Page-specific blocks on top of rummel-page.css
   and rummel-blocks.css: the road trip spotlight, the directors,
   the reel-and-gallery, the resource columns and the vintage strip.
   ============================================================ */

/* ---- ROAD TRIP SPOTLIGHT ----
   One date, set colossal in slab, on the dark band. The whole point of
   the block is that a family sees the date from across the room. */
.trip{display:grid;grid-template-columns:auto 1fr;gap:2.4rem;align-items:center;margin-top:1.4rem;}
.trip .date{font-family:var(--slab);text-transform:uppercase;line-height:.86;color:#fff;letter-spacing:.01em;}
.trip .date .m{display:block;font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--rb);letter-spacing:.14em;margin-bottom:.15em;}
.trip .date .d{display:block;font-size:clamp(5rem,12vw,9.5rem);}
.trip .date .y{display:block;font-size:clamp(1rem,2vw,1.35rem);color:var(--rb-type);letter-spacing:.2em;margin-top:.25em;}
.trip .body h3{font-family:var(--slab);text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.05;color:#fff;margin-bottom:.6rem;}
.trip .body p{font-size:1.06rem;line-height:1.65;color:rgba(255,255,255,.82);max-width:54ch;}
.trip .body p+p{margin-top:.6rem;}
.trip .tag{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy);background:var(--gold);border-radius:4px;padding:.4rem .7rem;margin-bottom:1rem;}
@media(max-width:760px){ .trip{grid-template-columns:1fr;gap:1.2rem;} }

/* ---- THE DIRECTORS ----
   The team card, same shape as Ministry's: portrait, role, name in
   Oswald sentence case (a name is not a header), email shown. Two of
   them plus the two Chapellette directors, so a 4 across grid on white. */
.bteam{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.2rem;}
.bteam .person{background:#fff;border-radius:16px;padding:1.8rem 1.4rem 1.6rem;display:flex;flex-direction:column;align-items:center;text-align:center;
  box-shadow:0 1px 3px rgba(11,34,64,.05),0 30px 60px -40px rgba(11,34,64,.5);transition:transform .3s ease,box-shadow .3s ease;}
.bteam .person:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(11,34,64,.06),0 36px 66px -40px rgba(11,34,64,.6);}
.bteam .face{width:104px;height:104px;border-radius:50%;overflow:hidden;background:var(--rb-pale);box-shadow:0 0 0 4px var(--rb-pale);}
.bteam .face img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;}
.bteam .face.blank{display:flex;align-items:center;justify-content:center;font-family:var(--slab);font-size:1.6rem;color:var(--rb-deep);text-transform:uppercase;}
.bteam .role{margin-top:1.1rem;font-family:var(--sans);font-weight:500;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.bteam .name{margin-top:.2rem;font-family:var(--sans);font-weight:600;font-size:1.22rem;line-height:1.2;color:var(--red);}
.bteam .bio{margin-top:.7rem;font-size:.95rem;line-height:1.55;color:var(--ink-soft);}
.bteam .links{margin-top:.9rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;}
.bteam .links a{font-family:var(--sans);font-weight:500;font-size:.9rem;color:var(--rb-deep);text-decoration:none;min-height:36px;display:inline-flex;align-items:center;overflow-wrap:anywhere;}
.bteam .links a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}
@media(max-width:1080px){ .bteam{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .bteam{grid-template-columns:1fr;} }

/* ---- THE GALLERY ----
   The drum major reel came out 2026-08-15 (Kelly: it is a Chapelle
   student and she is no longer drum major), and the .reel rules went
   with it. The gallery now runs the full content width on its own:
   one wide frame over two, so it still ends on a full row. */
.bgal{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;}
.bgal.solo{margin-top:2rem;}
.bgal .g{aspect-ratio:4/3;background-size:cover;background-position:center;border-radius:12px;
  box-shadow:0 1px 3px rgba(11,34,64,.06),0 22px 44px -30px rgba(11,34,64,.55);transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.bgal .g:hover{transform:translateY(-4px);}
.bgal .g.wide{grid-column:span 2;aspect-ratio:2/1;}
@media(max-width:520px){ .bgal{grid-template-columns:1fr;} .bgal .g.wide{grid-column:span 1;aspect-ratio:4/3;} }

/* ---- RESOURCE COLUMNS ----
   The block library's .track-cols, with real links inside the lists. */
.res .track-col ul{list-style:none;padding:0;margin:0;}
.res .track-col li{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.5;}
.res .track-col li:last-child{border-bottom:0;}
.res .track-col li a{color:var(--rb-deep);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;min-height:36px;}
.res .track-col li a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}
.res .track-col li a svg{width:14px;height:14px;opacity:.6;flex:none;}
.res .track-col li small{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:.1rem;}

/* The vintage strip and the .anniv anniversary layout were removed with
   the "Sixty years of Chapellettes" section, 2026-08-15 (Kelly: "remove
   this all for now"). Both are in git if the section comes back. */

/* ---- HERO: COPY ON TOP ----
   Kelly, 2026-08-15: "on desktop this needs to be better placed, the
   kids are getting lost." She was right, and repositioning could not
   fix it. The DC photograph is 3:2 in a 1.64:1 frame, so there are only
   about 80px of vertical crop to play with, and the band sits across
   56% to 91% of the image: exactly where the shared hero drops its copy.

   So the copy moves instead of the photograph. The sky and the face of
   the memorial are the emptiest part of the frame and hold white type
   cleanly, and the whole lower half is handed back to the students. The
   photo is pinned to its bottom edge (50% 100%) so the front row of
   dancers clears the wash instead of dissolving into it.

   Scoped to .topcopy so the other six section fronts are untouched. */
header.open.topcopy{align-items:flex-start;}
header.open.topcopy .wrap{padding-top:clamp(2.2rem,4.5vw,4.2rem);padding-bottom:2rem;}
/* the shared wash rises from the bottom to white and would fade the front
   row out. Pulled back so it lands under the plaza, not under the kneeling
   dancers, and a soft top scrim carries the copy instead. */
header.open.topcopy .wash{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0)   90%,
      rgba(255,255,255,.42) 94%,
      rgba(255,255,255,.86) 97.5%,
      #fff                  100%),
    linear-gradient(180deg,
      rgba(6,23,48,.62)  0%,
      rgba(6,23,48,.42) 26%,
      rgba(6,23,48,.14) 44%,
      rgba(6,23,48,0)   58%);}
header.open.topcopy .display{text-shadow:0 4px 34px rgba(6,23,48,.75);}
header.open.topcopy .sub{text-shadow:0 2px 20px rgba(6,23,48,.7);}
/* below 1081 the shared sheet stacks the hero: photo on top, copy beneath
   on the navy band. That already reads well, so hand it straight back. */
@media(max-width:1080px){
  header.open.topcopy{align-items:stretch;}
  header.open.topcopy .wrap{padding-top:2.4rem;padding-bottom:7rem;}
  header.open.topcopy .wash{top:auto;bottom:0;height:120px;
    background:linear-gradient(180deg,
      rgb(var(--ink-band-rgb) / 0) 0%,rgba(255,255,255,.55) 62%,rgba(255,255,255,.92) 84%,
      #fff 93%,#fff 100%);}
}