/* ============================================================
   RUMMEL HISTORY. The digital museum layer on top of rummel-page.css
   and rummel-blocks.css: the then and now slider, the origin quote,
   the firsts, the vitrine with its lightbox, the decades, and the
   "now" gallery. Cool neutrals only; the paper feel comes from white,
   pale Columbia and hairlines, never cream or sepia.
   ============================================================ */

/* ---- THEN AND NOW ----
   Two photographs of the same corner of campus, 1964 and today, one
   over the other. A handle splits them; drag it, or use the arrow keys.
   The headline sits on top, and the split sweeps once on arrival so the
   reader sees what it does before touching it. */
.tn-hero,header.open.tn-hero{position:relative;display:block;overflow:hidden;background:var(--navy);color:#fff;padding-top:64px;min-height:0;height:auto;}
.tn{position:relative;width:100%;height:min(82vh,760px);min-height:460px;user-select:none;touch-action:pan-y;}
.tn .layer{position:absolute;inset:0;background-size:cover;background-position:center;}
.tn .layer.then{filter:saturate(.05) contrast(1.05);}
.tn .layer.now{clip-path:inset(0 0 0 var(--x,50%));}
.tn .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(11,34,64,.25),0 0 30px rgba(0,0,0,.35);z-index:3;pointer-events:none;}
.tn .knob{position:absolute;top:50%;left:var(--x,50%);width:58px;height:58px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 12px 30px rgba(11,34,64,.45),0 0 0 6px rgba(255,255,255,.18);z-index:4;display:flex;align-items:center;justify-content:center;gap:6px;cursor:ew-resize;pointer-events:none;}
.tn .knob i{display:block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;}
.tn .knob i.l{border-right:8px solid var(--navy);}
.tn .knob i.r{border-left:8px solid var(--navy);}
.tn input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5;-webkit-appearance:none;appearance:none;}
.tn .tag{position:absolute;bottom:clamp(1rem,3vw,2rem);z-index:6;font-family:var(--slab);text-transform:uppercase;font-size:clamp(.8rem,1.5vw,1rem);letter-spacing:.2em;color:#fff;
  background:rgba(11,34,64,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:.5rem .8rem;pointer-events:none;}
.tn .tag.then{left:clamp(15px,4vw,48px);}
.tn .tag.now{right:clamp(15px,4vw,48px);}
.tn .tag b{color:var(--rb);font-weight:700;margin-left:.5em;}
.tn .veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(11,34,64,.55) 0%,rgba(11,34,64,0) 34%,rgba(11,34,64,0) 62%,rgba(11,34,64,.62) 100%);}
.tn .hint{position:absolute;left:50%;bottom:clamp(1rem,3vw,2rem);transform:translateX(-50%);z-index:6;font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85);pointer-events:none;
  opacity:0;animation:tnhint 1s ease 2.4s forwards;}
@keyframes tnhint{to{opacity:1;}}
@media(max-width:600px){ .tn{height:70vh;} .tn .tag{font-size:.7rem;padding:.4rem .6rem;} .tn .hint{display:none;} }

/* ---- THE ORIGIN ----
   The sheriff and the Archbishop, June 1, 1955. A quotation set large,
   the source beneath it, and the account beside it. */
.origin{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start;margin-top:1.6rem;}
.origin .q{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,.5);}
/* the quote mark reads as watermark, not as punctuation shouting at you
   (Kelly, 2026-08-15: "make this cooler, this is too harsh"). Bigger and
   far fainter, pushed up behind the first line and clipped by the card so
   it dissolves into the corner rather than sitting on it. */
.origin .q{overflow:hidden;}
.origin .q::before{content:"\201C";position:absolute;left:.55rem;top:-1.6rem;z-index:0;
  font-family:var(--slab);font-size:11rem;line-height:1;
  color:var(--rb);opacity:.13;pointer-events:none;}
.origin .q p{position:relative;z-index:1;font-size:1.22rem;line-height:1.7;color:var(--navy);}
.origin .q p+p{margin-top:1rem;}
.origin .q .src{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rb-deep);}
.origin .txt p{font-size:1.06rem;line-height:1.7;color:var(--ink);}
.origin .txt p+p{margin-top:.9rem;}
.origin .txt b{color:var(--red);font-weight:600;}
/* floated, not stacked: the groundbreaking photograph sat on a full line
   of its own and left the column looking broken in half (Kelly,
   2026-08-15). It now hangs right and the prose closes around it. */
.origin .pic{float:right;width:56%;margin:.35rem 0 1rem 1.6rem;}
.origin .pic img{display:block;width:100%;height:auto;border-radius:12px;
  box-shadow:0 22px 44px -30px rgba(11,34,64,.6);}
.origin .cap{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rb-deep);margin-top:.7rem;}
.origin .txt::after{content:"";display:block;clear:both;}
@media(max-width:920px){ .origin{grid-template-columns:1fr;} }
/* a float needs room to be worth having. On a narrow column it just makes
   ragged two-word lines, so it goes back to full width and stacks. */
@media(max-width:640px){
  .origin .pic{float:none;width:100%;margin:1.4rem 0 0;}
}

/* the name band: three names considered, one chosen */
.names{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem;}
.names .nm{border-radius:14px;padding:1.6rem 1.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
/* the name that won, marked in Rummel gold (Kelly, 2026-08-15: "something
   to indicate it won"). Gold on navy only, and never paired with a red
   fill: red and gold together is Brother Martin. */
.names .nm.win{background:rgba(244,180,23,.10);border-color:rgba(244,180,23,.62);
  box-shadow:0 0 0 1px rgba(244,180,23,.22),0 26px 52px -34px rgba(244,180,23,.45);}
.names .nm.win .k{color:#F4B517;opacity:1;}
.names .nm .k{font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rb-type);opacity:.85;}
.names .nm h3{font-family:var(--slab);text-transform:uppercase;font-size:1.25rem;line-height:1.1;color:#fff;margin-top:.4rem;}
.names .nm.win h3{color:var(--rb);}
.names .nm p{font-size:.96rem;line-height:1.6;color:rgba(255,255,255,.78);margin-top:.5rem;}
@media(max-width:820px){ .names{grid-template-columns:1fr;} }

/* ---- THE FIRSTS ----
   Six cards, two full rows of three. Each is one thing the charter class
   decided, and the number or the word is set big. */
.firsts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2rem;}
.first{background:#fff;border-radius:16px;padding:1.8rem 1.6rem 1.6rem;box-shadow:0 1px 3px rgba(11,34,64,.05),0 30px 60px -40px rgba(11,34,64,.5);border-top:4px solid var(--rb-deep);
  transition:transform .3s ease,box-shadow .3s ease;}
.first:nth-child(3n+2){border-top-color:var(--red);}
.first:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(11,34,64,.06),0 36px 66px -40px rgba(11,34,64,.6);}
.first .big{font-family:var(--slab);text-transform:uppercase;font-size:2rem;line-height:1;color:var(--red);letter-spacing:.01em;}
.first:nth-child(3n+2) .big{color:var(--rb-deep);}
.first h3{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem;}
.first p{font-size:.98rem;line-height:1.6;color:var(--ink);margin-top:.7rem;}
.first p b{color:var(--navy);font-weight:600;}
.first .lost{margin-top:.8rem;font-family:var(--sans);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#8a94a0;line-height:1.7;}
.first .lost s{opacity:.7;}
@media(max-width:920px){ .firsts{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .firsts{grid-template-columns:1fr;} }

/* ---- THE VITRINE ----
   Objects from the display case in the main building, each in a white
   mount with a card, on a cool grey wall. Click for the full scan. */
.vitrine{background:linear-gradient(180deg,#EEF3F8 0%,#E6EEF6 100%);}
.vit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2rem;}
.vit{background:#fff;border-radius:12px;padding:1rem 1rem 1.05rem;box-shadow:0 1px 3px rgba(11,34,64,.06),0 26px 50px -34px rgba(11,34,64,.6);cursor:zoom-in;border:0;text-align:left;font:inherit;color:inherit;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;}
.vit:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(11,34,64,.06),0 34px 60px -34px rgba(11,34,64,.7);}
.vit:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
.vit .m{aspect-ratio:4/5;background:#F3F6F9;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.vit .m img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .6s ease;}
.vit:hover .m img{transform:scale(1.03);}
.vit .m.contain img{object-fit:contain;padding:.4rem;background:#fff;}
.vit .y{margin-top:.85rem;font-family:var(--slab);text-transform:uppercase;font-size:1.05rem;color:var(--red);line-height:1;}
.vit .t{font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.03em;text-transform:uppercase;color:var(--navy);margin-top:.25rem;line-height:1.3;}
.vit .c{font-size:.9rem;line-height:1.5;color:var(--ink-soft);margin-top:.35rem;}
@media(max-width:1080px){ .vit-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:760px){ .vit-grid{grid-template-columns:repeat(2,1fr);gap:.9rem;} .vit{padding:.7rem;} }
@media(max-width:420px){ .vit-grid{grid-template-columns:1fr;} }

/* the lightbox */
.hlb{position:fixed;inset:0;z-index:400;background:rgba(6,23,48,.92);display:flex;align-items:center;justify-content:center;padding:clamp(15px,4vw,48px);opacity:0;pointer-events:none;transition:opacity .3s ease;}
.hlb.on{opacity:1;pointer-events:auto;}
.hlb[hidden]{display:none;}
.hlb figure{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:.9rem;}
.hlb img{max-width:100%;max-height:calc(100vh - 160px);object-fit:contain;border-radius:8px;box-shadow:0 40px 90px rgba(0,0,0,.6);background:#fff;}
.hlb figcaption{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);text-align:center;}
.hlb .x{position:absolute;top:1rem;right:1rem;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hlb .x:hover{background:var(--red);border-color:var(--red);}
.hlb .nv{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hlb .nv:hover{background:var(--red);border-color:var(--red);}
.hlb .nv.p{left:1rem;} .hlb .nv.n{right:1rem;}
@media(max-width:600px){ .hlb .nv{display:none;} }

/* ---- THE DECADES ----
   A vertical spine, the year colossal on the left, the event card on the
   right. Steps light as they scroll into view. */
.decades{position:relative;margin-top:2.4rem;}
.decades::before{content:"";position:absolute;left:clamp(88px,12vw,150px);top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--rb),var(--rb-deep) 60%,rgba(43,110,158,.15));}
.dec{position:relative;display:grid;grid-template-columns:clamp(88px,12vw,150px) 1fr;gap:1.6rem;padding:0 0 2.2rem;opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.dec.on{opacity:1;transform:none;}
.dec .yr{font-family:var(--slab);text-transform:uppercase;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:.9;color:var(--red);text-align:right;padding-right:1.6rem;position:relative;}
.dec .yr::after{content:"";position:absolute;right:-7px;top:.35em;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--rb-deep);box-shadow:0 0 0 4px #fff;}
.dec.big .yr::after{background:var(--red);border-color:var(--red);}
.dec .card{background:#fff;border-radius:14px;padding:1.4rem 1.6rem 1.3rem;box-shadow:0 1px 3px rgba(11,34,64,.05),0 26px 50px -36px rgba(11,34,64,.55);max-width:720px;}
.dec .card h3{font-family:var(--slab);text-transform:uppercase;font-size:1.15rem;line-height:1.15;color:var(--navy);}
.dec .card p{font-size:1rem;line-height:1.65;color:var(--ink);margin-top:.5rem;}
.dec .card p b{color:var(--red);font-weight:600;}
.dec .card .when{font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rb-deep);margin-bottom:.4rem;}
.dec .card .pic{margin-top:1rem;border-radius:10px;overflow:hidden;max-width:420px;}
.dec .card .pic img{display:block;width:100%;height:auto;}
@media(max-width:600px){ .decades::before{left:16px;} .dec{grid-template-columns:1fr;gap:.5rem;padding-left:2.4rem;} .dec .yr{text-align:left;padding-right:0;} .dec .yr::after{left:-31px;right:auto;} }

/* ---- NOW ----
   The campus today, and where the museum continues. Six tiles, three
   across, two full rows; three of them are links to the Raider Room set. */
.now{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem;}
.now .t{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;text-decoration:none;color:#fff;
  box-shadow:0 1px 3px rgba(11,34,64,.06),0 26px 50px -34px rgba(11,34,64,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.now .t:hover{transform:translateY(-4px);}
.now .t::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,34,64,0) 45%,rgba(11,34,64,.7));}
.now .t .l{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:2;}
.now .t .l b{display:block;font-family:var(--slab);text-transform:uppercase;font-size:1.1rem;line-height:1.1;letter-spacing:.02em;}
.now .t .l span{display:block;font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rb);margin-top:.25rem;}
.now a.t .l span::after{content:" \203A";}
@media(max-width:820px){ .now{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .now{grid-template-columns:1fr;} }

/* ---- AERIAL HERO ----
   Kelly, 2026-08-15: "I want an aerial shot of the campus." Rummel's own
   drone frame of the field, with Metairie behind it. No copy over it: the
   headline and lede came off in the same pass, so the photograph is the
   whole hero and the only job left is landing it cleanly on the page. */
header.open.aerial-hero{position:relative;display:block;overflow:hidden;
  width:100%;min-height:0;height:auto;background:var(--navy);}
header.open.aerial-hero .ph{position:relative;inset:auto;width:100%;
  aspect-ratio:1.78/1;max-height:min(78vh,860px);
  background-size:cover;animation:none;}
/* the photograph dissolves into the page rather than stopping on an edge */
header.open.aerial-hero .wash{position:absolute;left:0;right:0;bottom:0;top:auto;
  height:26%;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.30) 52%,
    rgba(255,255,255,.78) 80%,
    #fff                  100%);}
header.open.aerial-hero .dots{position:absolute;inset:0;background:var(--dots);
  background-size:13px 13px;opacity:.22;pointer-events:none;}
@media(max-width:760px){
  header.open.aerial-hero .ph{aspect-ratio:4/3;}
}

/* ---- THEN AND NOW, INLINE ----
   The slider moved out of the hero and into the 1962 section when the
   aerial took that spot. Same component, sat in the page instead of
   bleeding full width, so it reads as an exhibit rather than a banner. */
.tn-inline{margin-top:2.4rem;border-radius:16px;overflow:hidden;
  box-shadow:0 2px 6px rgba(11,34,64,.08),0 40px 80px -46px rgba(11,34,64,.6);}
.tn-inline .tn{height:min(60vh,540px);min-height:360px;}
@media(max-width:600px){ .tn-inline .tn{height:56vh;min-height:300px;} }

/* the visually hidden page heading */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- 1966 FROM THE AIR ----
   The opening spread of the 1966 yearbook: the only period aerial in the
   archive. It runs wide because that is the point of it, and the caption
   sits under it rather than over it, so nothing covers the neighbourhood. */
.aerial66{margin:2.6rem 0 0;}
.aerial66 img{display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 2px 6px rgba(11,34,64,.08),0 40px 80px -46px rgba(11,34,64,.6);}
.aerial66 figcaption{margin-top:1rem;font-size:.98rem;line-height:1.6;
  color:var(--ink-soft);max-width:72ch;}
.aerial66 figcaption b{color:var(--navy);font-weight:600;}
.aerial66 .src{display:block;margin-top:.5rem;font-family:var(--sans);font-weight:600;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rb-deep);}