/* ============================================================
   RUMMEL TRADITIONS AND LANDMARKS. The archive layer on top of
   rummel-page.css and rummel-blocks.css: the lyric sheets and the sheet
   music vitrine, the crest explorer, the R and the yearbook shelf,
   Rufus and Rumpus, and the landmark cards. Reuses the History page's
   lightbox (.hlb) so the two museum pages behave the same.
   ============================================================ */

/* ---- THE SONGS ----
   Two lyric sheets side by side, set the way a program prints them, and
   under them the vitrine: the founder's handwritten Alma Mater, the
   trumpet part of the fight song, and the 1964 band. */
.songs{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2rem;align-items:stretch;}
.song{position:relative;background:#fff;border-radius:16px;padding:2.4rem 2.4rem 2rem;box-shadow:0 1px 3px rgba(11,34,64,.05),0 34px 70px -40px rgba(11,34,64,.55);
  background-image:linear-gradient(180deg,var(--rb-pale) 0,#fff 130px);overflow:hidden;}
.song::before{content:"";position:absolute;left:50%;top:0;width:64px;height:3px;transform:translateX(-50%);background:var(--red);border-radius:0 0 3px 3px;}
.song.fight::before{background:var(--rb-deep);}
.song h3{font-family:var(--slab);text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em;color:var(--navy);text-align:center;}
.song .by{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rb-deep);text-align:center;margin:.35rem 0 1.4rem;line-height:1.6;}
.song .lyr{font-size:1.14rem;line-height:1.75;color:var(--ink);text-align:center;max-width:40ch;margin:0 auto;}
.song .lyr p+p{margin-top:1.1rem;}
.song .lyr .shout{font-family:var(--slab);text-transform:uppercase;color:var(--red);letter-spacing:.06em;font-size:1.25rem;}
.song .story{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.95rem;line-height:1.6;color:var(--ink-soft);}
.song .story b{color:var(--navy);font-weight:600;}
@media(max-width:920px){ .songs{grid-template-columns:1fr;} .song{padding:2rem 1.4rem 1.7rem;} .song .lyr{font-size:1.05rem;} }

/* the vitrine grid is shared with History (rummel-history.css) */

/* ---- THE CREST ----
   The crest on the left, four hotspots over the four quarters. Hover or
   tap a quarter and the panel on the right explains it; the quarter
   lifts with a soft Columbia halo. Keyboard reaches all four. */
.crest-wrap{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:3rem;align-items:center;margin-top:2rem;}
.crest{position:relative;aspect-ratio:1/1;max-width:520px;margin:0 auto;width:100%;}
.crest img{width:100%;height:100%;display:block;filter:drop-shadow(0 30px 50px rgba(11,34,64,.28));transition:filter .4s ease;}
.crest .hs{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:10px;padding:0;
  transition:background .25s ease,box-shadow .25s ease;}
.crest .hs.on,.crest .hs:hover,.crest .hs:focus-visible{background:rgba(117,178,221,.22);box-shadow:0 0 0 3px rgba(255,255,255,.7),0 0 0 6px rgba(117,178,221,.55),0 14px 30px -10px rgba(11,34,64,.45);outline:none;}
.crest .hs.q1{left:24%;top:28%;width:25%;height:25%;border-radius:12px 4px 4px 4px;}
.crest .hs.q2{left:50%;top:28%;width:25%;height:25%;border-radius:4px 12px 4px 4px;}
.crest .hs.q3{left:29%;top:54%;width:20%;height:24%;border-radius:4px 4px 4px 14px;}
.crest .hs.q4{left:50%;top:54%;width:20%;height:24%;border-radius:4px 4px 14px 4px;}
.crest .hs.qx{left:47%;top:28%;width:6%;height:50%;border-radius:4px;}
.crest .hs .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.crest-panel{background:#fff;border-radius:16px;padding:2.2rem 2.2rem 2rem;box-shadow:0 1px 3px rgba(11,34,64,.05),0 34px 70px -40px rgba(11,34,64,.55);min-height:300px;position:relative;}
.crest-panel .k{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rb-deep);}
.crest-panel h3{font-family:var(--slab);text-transform:uppercase;font-size:1.6rem;line-height:1.05;color:var(--navy);margin-top:.35rem;transition:opacity .25s ease;}
.crest-panel p{font-size:1.06rem;line-height:1.7;color:var(--ink);margin-top:.9rem;transition:opacity .25s ease;}
.crest-panel.swap h3,.crest-panel.swap p{opacity:0;}
.crest-panel .dots{display:flex;gap:.5rem;margin-top:1.4rem;}
.crest-panel .dots button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(29,90,133,.25);background:#fff;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.08em;color:var(--navy);}
.crest-panel .dots button.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.crest-panel .hint{margin-top:1.2rem;font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#8a94a0;}
@media(max-width:920px){ .crest-wrap{grid-template-columns:1fr;gap:1.6rem;} .crest{max-width:420px;} }

/* ---- THE R ----
   The story on the left, the 1972 photographs on the right, and under
   them the yearbook shelf: fifty five spines, one scroll, the R arriving
   in the last row. */
.rstory{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start;margin-top:2rem;}
.rstory .txt p{font-size:1.06rem;line-height:1.7;color:var(--ink);}
.rstory .txt p+p{margin-top:.9rem;}
.rstory .txt b{color:var(--red);font-weight:600;}
.rstory .bigr{display:flex;align-items:center;gap:1.4rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);}
.rstory .bigr img{width:120px;height:auto;filter:drop-shadow(0 16px 26px rgba(11,34,64,.25));}
.rstory .bigr .w{font-family:var(--slab);text-transform:uppercase;font-size:1.3rem;line-height:1.05;color:var(--navy);}
.rstory .bigr .w em{font-style:normal;color:var(--red);display:block;font-size:.85em;letter-spacing:.06em;}
.r72{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.r72 .g{border-radius:12px;overflow:hidden;background:#F3F6F9;box-shadow:0 1px 3px rgba(11,34,64,.06),0 22px 44px -30px rgba(11,34,64,.55);cursor:zoom-in;border:0;padding:0;text-align:left;font:inherit;color:inherit;}
.r72 .g img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;}
.r72 .g.wide{grid-column:span 2;}
.r72 .g.wide img{aspect-ratio:16/9;object-position:center 30%;}
.r72 .g figcaption{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rb-deep);padding:.6rem .8rem;background:#fff;}
@media(max-width:920px){ .rstory{grid-template-columns:1fr;} }

.shelf-wrap{margin-top:2.6rem;}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;}
.shelf-head h3{font-family:var(--slab);text-transform:uppercase;font-size:1.3rem;color:var(--navy);}
.shelf-head .n{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rb-deep);}
.shelf{position:relative;}
.shelf .track{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem .2rem 1.4rem;scrollbar-width:thin;scrollbar-color:var(--rb) transparent;-webkit-overflow-scrolling:touch;}
.shelf .book{flex:0 0 auto;width:150px;scroll-snap-align:start;border:0;background:none;padding:0;cursor:zoom-in;text-align:left;font:inherit;color:inherit;}
.shelf .book img{display:block;width:150px;height:196px;object-fit:cover;object-position:top;border-radius:4px 8px 8px 4px;
  box-shadow:-2px 0 0 rgba(0,0,0,.08) inset,0 14px 28px -14px rgba(11,34,64,.6);transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.shelf .book:hover img{transform:translateY(-6px) rotate(-1deg);}
.shelf .book .y{display:block;margin-top:.5rem;font-family:var(--slab);text-transform:uppercase;font-size:.9rem;color:var(--navy);letter-spacing:.06em;}
.shelf .book.mark .y{color:var(--red);}
.shelf .book .t{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#8a94a0;line-height:1.4;}
.shelf .arrow{position:absolute;top:44%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--navy);font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -12px rgba(11,34,64,.6);z-index:2;}
.shelf .arrow.l{left:-10px;} .shelf .arrow.r{right:-10px;}
.shelf .arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.shelf-eras{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem;}
.shelf-eras button{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:#f2f6fa;border:1px solid rgba(29,90,133,.16);border-radius:6px;padding:.5rem .8rem;cursor:pointer;}
.shelf-eras button:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
@media(max-width:600px){ .shelf .book{width:118px;} .shelf .book img{width:118px;height:154px;} .shelf .arrow{display:none;} }

/* ---- RUFUS AND RUMPUS ---- */
.rufus{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:3rem;align-items:center;margin-top:2rem;}
.rufus .art{position:relative;}
.rufus .art img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 50px rgba(11,34,64,.3));animation:rufusRide 7s ease-in-out infinite;}
@keyframes rufusRide{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-8px) rotate(-1deg);}}
.rufus .art .halo{position:absolute;left:50%;top:55%;width:110%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(117,178,221,.35),rgba(117,178,221,0) 68%);z-index:-1;}
.rufus .txt p{font-size:1.06rem;line-height:1.7;color:var(--ink);}
.rufus .txt p+p{margin-top:.9rem;}
.rufus .txt b{color:var(--red);font-weight:600;}
.rufus .quote{margin-top:1.4rem;padding:1.2rem 1.4rem;background:var(--rb-pale);border-left:4px solid var(--rb-deep);border-radius:0 12px 12px 0;font-size:1.05rem;line-height:1.65;color:var(--navy);}
.rufus .quote .who{display:block;margin-top:.5rem;font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rb-deep);}
.rufus-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;margin-top:1.8rem;}
.rufus-strip button{border:0;background:none;padding:0;cursor:zoom-in;text-align:center;font:inherit;color:inherit;}
.rufus-strip img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 40%;border-radius:8px;box-shadow:0 12px 26px -16px rgba(11,34,64,.6);transition:transform .3s ease;}
.rufus-strip button:hover img{transform:translateY(-4px);}
.rufus-strip span{display:block;margin-top:.4rem;font-family:var(--slab);text-transform:uppercase;font-size:.82rem;color:var(--navy);letter-spacing:.06em;}
@media(max-width:920px){ .rufus{grid-template-columns:1fr;} .rufus .art{max-width:340px;margin:0 auto;} .rufus-strip{grid-template-columns:repeat(3,1fr);} }

/* ---- LANDMARKS ----
   Eight cards, four across, two full rows. Photo, name, year, the story,
   and a link where the landmark continues online. */
.lm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2rem;}
.lm{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(11,34,64,.05),0 30px 60px -40px rgba(11,34,64,.55);display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;text-decoration:none;color:inherit;}
.lm:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(11,34,64,.06),0 36px 66px -40px rgba(11,34,64,.65);}
.lm .pic{aspect-ratio:4/3;background-size:cover;background-position:center;}
.lm .body{padding:1.2rem 1.3rem 1.3rem;display:flex;flex-direction:column;flex:1;}
.lm .yr{font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);}
.lm h3{font-family:var(--slab);text-transform:uppercase;font-size:1.12rem;line-height:1.1;color:var(--navy);margin-top:.3rem;}
.lm p{font-size:.94rem;line-height:1.55;color:var(--ink-soft);margin-top:.6rem;}
.lm p b{color:var(--navy);font-weight:600;}
.lm .go{margin-top:auto;padding-top:.9rem;font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rb-deep);}
a.lm .go::after{content:" \203A";}
/* COMING SOON tile, Kelly 2026-08-17: the Hall of Fame stays unlinked until she opens
   it. Same card, no link, a quiet Columbia dot where the arrow would be. */
.lm.lm-soon{cursor:default;}
.lm .go.soon{color:var(--navy);display:inline-flex;align-items:center;gap:.55rem;}
.lm .go.soon::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rb);box-shadow:0 0 0 4px rgba(117,178,221,.22);flex:none;}
@media(max-width:1080px){ .lm-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .lm-grid{grid-template-columns:1fr;} }
.gone{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.4rem;}
.gone summary{cursor:pointer;font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rb-deep);list-style:none;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;}
.gone summary::-webkit-details-marker{display:none;}
.gone summary::before{content:"+";font-family:var(--slab);font-size:1.2rem;color:var(--red);}
.gone[open] summary::before{content:"\2212";}
.gone .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1rem;}
.gone h4{font-family:var(--slab);text-transform:uppercase;font-size:1rem;color:var(--navy);}
.gone p{font-size:.92rem;line-height:1.55;color:var(--ink-soft);margin-top:.4rem;}
@media(max-width:820px){ .gone .cols{grid-template-columns:1fr;} }