/* ============================================================
   RUMMEL SECTION PAGE, FOUNDATION.

   Pairs with rummel-blocks.css and rummel-page.js. Load all three,
   in that order, on every section front: Academics, Student Life,
   Ministry, Athletics, Admissions, Alumni, About Us.

   This file holds what a page CANNOT delete: tokens, the type floor,
   the wrap, buttons, the nav, the section header, the footer, and the
   mobile floor. Anything a page can delete lives in rummel-blocks.css.

   Descended from academics-concepts.css, which is now FROZEN. Six
   academics concept files still link it and each one redefines .rail,
   .progs, .tracks and .statband inline, so editing the old sheet leaks
   properties into layouts nobody is looking at any more. Change this
   file instead. Never that one.

   Columbia Blue leads. Red punctuates. Navy is ink and chrome, never a
   dominant fill. No clip-path, anywhere.
   ============================================================ */

@font-face{
  font-family:'SquareSlab';
  src:url('fonts/SquareSlab711BdBTBold.woff2') format('woff2'),
      url('fonts/SquareSlab711BdBTBold.ttf') format('truetype');
  font-weight:700; font-display:swap;
}

:root{
  /* brand */
  --rb:#75B2DD;            /* Columbia Blue, the lead */
  --rb-mid:#4E92C4;
  --rb-deep:#2B6E9E;
  --rb-steel:#1D5A85;
  --rb-pale:#EAF4FC;
  --rb-type:#C7E3F7;      /* Columbia tint that passes as TEXT on the deep blues */
  --red:#C8102E;           /* punctuation only */
  --red-deep:#B00E29;
  --gold:#F4C430;          /* SIGN UP only. never on a red fill: red on gold is Brother Martin */
  --gold-lift:#FFD451;     /* the hover, a touch brighter rather than darker */
  --navy:#0B2240;          /* ink and chrome, never a dominant fill */
  --navy-2:#081A33;
  --navy-3:#061730;
  --paper:#FFFFFF;
  --paper-2:#F7F9FC;
  --cream:#FBF9F5;
  --ink:#16202C;
  --ink-soft:#41505F;
  --line:#E3E9F0;

  /* type */
  --slab:'SquareSlab','Roboto Slab','Oswald',Arial,sans-serif;
  --sans:'Oswald',Arial,sans-serif;
  --serif:'Lora',Georgia,serif;

  /* ---- THE TYPE FLOOR. Nothing on these pages goes below it. ---- */
  --t-display: clamp(2.9rem, 6vw, 5.2rem);   /* page title      */
  --t-h2:      clamp(2rem, 3.6vw, 3rem);     /* section title   */
  --t-h3:      1.45rem;                       /* card title      */
  --t-lede:    1.2rem;                        /* 19px section lede */
  --t-body:    1.0625rem;                     /* 17px body       */
  --t-list:    1rem;                          /* 16px list/table */
  --t-label:   0.82rem;                       /* 13px min label  */
  --t-stat:    clamp(3rem, 5vw, 4.2rem);
  --t-statlab: 0.82rem;

  --lh-body:1.7;
  --shadow:0 1px 2px rgba(11,34,64,.04), 0 18px 44px -24px rgba(11,34,64,.42);
  --shadow-lg:0 30px 70px -34px rgba(11,34,64,.55);
  --dots:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  --dots-dark:radial-gradient(rgba(11,34,64,.13) 1px, transparent 1.4px);

  /* the rail's width, which the drawer and #below both have to agree with.
     it was hardcoded in three places and they drifted apart once already. */
  --rail-w:290px;
}

/* ============================================================
   THE PER SECTION TOKEN TABLE.

   All seven pages in one place, on purpose. A palette is judged by
   comparison, so scattering these across seven files would mean nobody
   could ever see the system at once.

   --ink-band       the dark section field, and where the rail's fall lands
   --ink-band-rgb   the SAME color as space separated channels. not optional:
                    the hero wash and the photo dissolve carry eleven
                    translucent stops of this color that a hex swap cannot
                    reach, so they read rgb(var(--ink-band-rgb) / .30)
   --rail-end       where the rail gradient finishes. defaults to the band,
                    but a band outside the blue family has to override it or
                    the rail interpolates through mud
   --accent         punctuation on WHITE sections. red on every page
   --accent-rgb     the same, as channels
   --accent-band    punctuation ON the dark band, where red may not survive

   Rummel's palette is narrow on purpose, so seven genuinely distinct dark
   bands do not exist inside it. Three blue bands across seven pages is the
   honest answer. Near identical blues would read as a mistake, not a system.
   (A softened red band for Athletics was proposed and rendered; Kelly
   reviewed it 2026-08-08 and kept Athletics on the shared blue scheme.)
   ============================================================ */

:root{
  --ink-band:#14496F;
  --ink-band-rgb:20 73 111;
  --rail-end:var(--ink-band);
  --accent:var(--red);
  --accent-rgb:200 16 46;
  --accent-band:var(--red);
}

/* mid. the approved Academics value. */
body[data-section="academics"],
body[data-section="about"]{
  --ink-band:#14496F; --ink-band-rgb:20 73 111;
}

/* steel. the brightest and most welcoming of the three, for the pages
   whose job is to make someone want to walk in. Athletics joined this band
   2026-08-08: Kelly reviewed the proposed softened red live and called it,
   Athletics runs the same scheme as the others. */
body[data-section="admissions"],
body[data-section="student-life"],
body[data-section="athletics"],
body[data-section="support"]{
  --ink-band:#1D5A85; --ink-band-rgb:29 90 133;
}
/* Support joined the steel band 2026-08-14 rather than getting a fourth blue.
   Its job is the same as Admissions: turn a reader into an action. A fourth
   near blue would read as a mistake, which is the whole point of the note
   above. If Kelly would rather tie Support to Alumni, move the selector to
   the deep block below. One line, nothing else changes. */

/* deep and quiet. */
body[data-section="ministry"],
body[data-section="alumni"]{
  --ink-band:#0F3557; --ink-band-rgb:15 53 87;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* the ROOT is what a phone actually scrolls, so this is what stops the page
     sliding sideways (Kelly, 2026-08-16, on her phone). body clips too, below. */
  overflow-x:hidden;}
body{
  font-family:var(--serif);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--navy-2);
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden. Safari treats a body with overflow-x:hidden as a scroll
     container and un-sticks the nav: on Kelly's phone the bar rode up with the
     page and the R was cut off (2026-08-16). clip never makes a scroll
     container, so sticky holds everywhere; hidden stays as the fallback. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--rb);color:#fff;}

/* ---------- layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 2.4rem;}
.wrap-narrow{max-width:960px;margin:0 auto;padding:0 2.4rem;}
section{padding:6rem 0;}

/* ---------- type roles ---------- */
.display{font-family:var(--slab);font-size:var(--t-display);line-height:.95;
  text-transform:uppercase;letter-spacing:.005em;}
.h2{font-family:var(--slab);font-size:var(--t-h2);line-height:1.05;
  text-transform:uppercase;letter-spacing:.01em;color:var(--navy);}
.h3{font-family:var(--slab);font-size:var(--t-h3);line-height:1.15;
  text-transform:uppercase;letter-spacing:.02em;color:var(--navy);}
/* 82ch, not the shared sheet's old 62ch. 62 stopped the text around 710px inside
   a 1203px column and read as though it were being cut off early. 82 is
   deliberately at the top of the readable band, not the full column: past roughly
   80 characters the eye loses the return sweep. */
.lede{font-size:var(--t-lede);line-height:1.68;color:var(--ink-soft);max-width:82ch;}
.body{font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-soft);}
.label{font-family:var(--sans);font-weight:600;font-size:var(--t-label);
  letter-spacing:.2em;text-transform:uppercase;}
/* em is restyled to a color device, not emphasis. It is how the second half of
   every heading turns blue. Never actually italic. */
em{font-style:normal;color:var(--rb-deep);}
.on-dark em{color:var(--rb);}

/* the section header. no eyebrow label above the heading, ever, and no vertical
   section mark: Kelly cut the bar as too much visually, and the side rule it
   replaced needed 1.7rem of left padding that pushed every heading 27px inboard
   of the card grid under it. The heading stands on its own, on one straight edge. */
.sec-head{margin-bottom:3rem;}
.sec-head .rule{width:64px;height:4px;background:var(--accent);margin-bottom:1.4rem;}
.sec-head .lede{margin-top:1.1rem;}
.on-dark .sec-head .rule{background:var(--accent-band);}
.on-dark .h2{color:#fff;}
.on-dark .lede,.on-dark .body{color:rgba(255,255,255,.92);}

/* ---------- buttons: 44px+ always ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:600;font-size:.94rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:1.05rem 2.1rem;min-height:52px;border:2px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{background:var(--red-deep);}
.btn-blue{background:var(--rb-deep);color:#fff;}
.btn-blue:hover{background:var(--rb-steel);}
/* THE SIGN UP BUTTON. Gold is the house standard for anything that registers a
   family for something (Kelly, 2026-08-14: "make the buttons yellow so they stand
   out, that should be the standard across all pages"), which leaves red for
   everything else and makes the one action a parent came to do unmistakable.

   Ink text, never white: white on #F4C430 fails contrast badly, navy on gold is
   about 9:1 and reads crisp at button size.

   One brand caution, deliberately recorded here so it is not lost. Gold is also
   Brother Martin's second colour, and red plus gold on a dark red field reads as
   theirs. So a gold button is fine on white, on navy, and over a photograph, and
   must never sit on a red fill. Check the band behind it before using it. */
/* The glow is what makes it read sleek rather than a flat swatch: a wide, low
   opacity gold shadow so the button looks lit from behind rather than pasted on.
   It is the treatment already approved on alumni-board.html. Kelly, 2026-08-14:
   "very sleek". */
.btn-gold{background:var(--gold);color:var(--navy);
  box-shadow:0 10px 26px rgba(244,196,48,.28);}
.btn-gold:hover{background:var(--gold-lift);
  box-shadow:0 16px 34px rgba(244,196,48,.44);}
/* The shadow has to animate too, or the hover lift arrives before its own glow
   and the button looks like it is sliding out from under a static blob. */
.btn-gold{transition:transform .18s ease, background .18s ease, box-shadow .18s ease;}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);}
.btn-ghost-navy{border-color:var(--navy);color:var(--navy);}
.btn-ghost-navy:hover{background:var(--navy);color:#fff;}
.btn .ar{transition:transform .18s ease;}
.btn:hover .ar{transform:translateX(4px);}

/* ============================================================
   NAV. Two rows.

   Utility row on top: Alumni, Parents, Give, Shop, Staff. Quiet, small caps,
   for the people who already belong here. Main bar below: six sections.

   Sub navigation on five areas only, About Athletics Alumni Give Shop, which
   are the only five whose children exist. The old "no dropdowns" note was
   never anti dropdown, it was anti 404, and that still holds for the four
   flat items: Admissions, Academics, Ministry, Student Life.

   Opens on hover AND on focus, so it is reachable from a keyboard, and it
   fades plus rises rather than snapping, per the smooth designs rule.
   ============================================================ */
.nav{position:sticky;top:0;z-index:100;
  background:rgb(var(--ink-band-rgb) / .92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(117,178,221,.24);}

/* ---- utility row ---- */
.nav-util{border-bottom:1px solid rgba(117,178,221,.16);background:rgba(255,255,255,.05);}
.nav-util-in{max-width:1280px;margin:0 auto;padding:0 2.4rem;height:38px;
  display:flex;align-items:center;justify-content:flex-end;gap:.1rem;}
.nav-util a{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.72);padding:0 .8rem;line-height:38px;
  transition:color .16s ease;white-space:nowrap;}
.nav-util a:hover,.nav-util a:focus-visible{color:var(--rb-type,#75B2DD);}
/* the utility row marks the current page too. Alumni and Give live up here now,
   so without this the whole Alumni and Support families had no current marker. */
.nav-util a.here{color:var(--rb-type,#75B2DD);box-shadow:inset 0 -2px 0 var(--rb,#75B2DD);}
/* Shop leaves the website, so it is gold and says so with an arrow. Gold sits on
   navy here, never on a red fill, per the brand caution over .btn-gold. */
/* GIVE IS THE ONLY COLOURED LINK IN THE ROW (Kelly, 2026-08-16). Gold is the
   CTA colour everywhere else on the site, so the one link asking for money is
   the one that owns it. Shop wore the gold only because it used to be the
   sole outlier; it now sits plain, the same as Parents. One highlight in a
   row of three is a highlight, two is a pattern and neither one lands.
   The .nav-shop class stays on the markup as a hook. Nothing colours it. */
.nav-util a.nav-give{color:var(--gold,#F4C430);font-weight:500;}
.nav-util a[target="_blank"]::after{content:"\2197";font-size:.78em;margin-left:.3em;opacity:.8;}

/* ---- main bar ---- */
.nav-in{max-width:1280px;margin:0 auto;padding:0 2.4rem;height:84px;
  display:flex;align-items:center;gap:2rem;}
.nav-brand{display:flex;align-items:center;gap:.9rem;flex-shrink:0;}
.nav-brand img{height:46px;width:auto;}
/* The header brand is the R alone, at every width (Kelly, 2026-08-17: "return this R
   to the header"). It used to be the R plus the school name retyped in Oswald, which
   the Brand page forbids: never retype a wordmark. The Primary Mark (.nav-mark, R
   beside the drawn wordmark) was tried on desktop and Kelly asked for the R by itself,
   so it stays in the markup but never shows. The R carries the brand; the drawn
   wordmark lives in the footer rail. */
.nav-brand .nav-r{display:block;}
.nav-brand .nav-mark{display:none;}
.nav-brand span{display:none;}
.nav-links{display:flex;gap:.2rem;margin-left:auto;list-style:none;}
.nav-links > li{position:relative;}
.nav-links a{font-family:var(--sans);font-weight:500;font-size:.86rem;
  letter-spacing:.07em;text-transform:uppercase;padding:.8rem .95rem;
  min-height:44px;display:inline-flex;align-items:center;transition:color .16s ease;color:#fff;}
.nav-links a:hover,.nav-links a.here{color:var(--rb-type,#75B2DD);}
.nav-links a.here{box-shadow:inset 0 -3px 0 var(--accent);}
.nav-cta{margin-left:1rem;flex-shrink:0;}
.nav-cta .btn{padding:.85rem 1.5rem;min-height:46px;font-size:.84rem;}

/* ---- the sub menus ---- */
.nav-sub-wrap{position:relative;}
.nav-links .nav-sub-wrap > a[aria-haspopup]::after,
.nav-util .nav-uh::after{content:"\25BE";font-size:.62em;margin-left:.45em;opacity:.7;}
.nav-sub{position:absolute;top:100%;left:0;min-width:230px;z-index:120;
  background:rgba(11,34,64,.97);backdrop-filter:blur(14px);
  border:1px solid rgba(117,178,221,.28);border-top:2px solid var(--rb,#75B2DD);
  border-radius:0 0 10px 10px;padding:.5rem 0;
  box-shadow:0 22px 44px -18px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility .28s;}
.nav-util .nav-sub{left:auto;right:0;}
/* the LAST item in the bar opens leftward or it hangs off the screen. Athletics
   is last and its panel is 430px wide, which pushed the document 90px past the
   viewport and gave the whole site a horizontal scrollbar at 1320. */
.nav-links > li:last-child > .nav-sub,
/* Athletics is no longer last since Alumni came back into the bar, but its
   two column panel is 430px wide and still hangs off a 1360 screen from where
   it sits. Any wide panel opens leftward, whatever its position. */
.nav-links > li > .nav-sub-wide{left:auto;right:0;}
.nav-sub-wrap:hover > .nav-sub,
.nav-sub-wrap:focus-within > .nav-sub,
.nav-sub-wrap.open > .nav-sub{opacity:1;visibility:visible;transform:translateY(0);}
.nav-sub a{padding:.62rem 1.15rem;min-height:44px;line-height:1.3;
  font-family:var(--sans);font-weight:400;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap;
  display:flex;flex-direction:column;justify-content:center;
  transition:color .16s ease,background .16s ease;}
.nav-sub a:hover,.nav-sub a:focus-visible{color:var(--rb-type,#75B2DD);background:rgba(117,178,221,.1);}
.nav-sub a i{font-style:normal;text-transform:none;letter-spacing:.01em;
  font-size:.72rem;color:rgba(255,255,255,.5);margin-top:.12rem;}
.nav-sub a b{font-weight:500;}
/* the same picture rule for the desktop dropdown, so the Shop menu does not
   read as two different menus depending on the screen */
.nav-sub-shop{min-width:288px;}
.nav-sub a:has(img){display:grid;grid-template-columns:auto 1fr;
  align-items:center;column-gap:.75rem;}
.nav-sub a img{grid-row:1 / span 2;grid-column:1;
  width:44px;height:44px;border-radius:8px;object-fit:cover;
  box-shadow:0 2px 8px -3px rgba(0,0,0,.7);}
.nav-sub a:has(img) b{grid-column:2;grid-row:1;align-self:end;}
.nav-sub a:has(img) i{grid-column:2;grid-row:2;align-self:start;}
/* Athletics has fifteen children, so it lays out in two columns rather than a
   column taller than most laptop screens. */
.nav-sub-wide{min-width:430px;display:grid;grid-template-columns:1fr 1fr;}
.nav-sub-wide a:first-child{grid-column:1 / -1;border-bottom:1px solid rgba(117,178,221,.2);}

/* OUTSIDE LINKS IN A DROPDOWN, both surfaces. Student Life carries the first
   two in the main bar (Rummel Streaming Network, Photos), 2026-08-17.
   The arrow is ABSOLUTELY POSITIONED, not the inline ::after the utility row
   uses on line 282. Both .nav-sub a and .nav-pull .pdrill a are
   flex-direction:column, so an in flow pseudo element becomes its own flex
   item and the arrow lands on a second line under the label. Taking it out of
   flow and pinning it to a reserved right gutter is the only version that sits
   beside the words on both the desktop menu and the phone Pull Down.
   :not(:has(img)) keeps this off the Shop picture tiles, which are a grid and
   already carry the utility row rule. */
.nav-links .nav-sub a[target="_blank"]:not(:has(img)){position:relative;padding-right:2.3rem;}
.nav-links .nav-sub a[target="_blank"]:not(:has(img))::after{content:"\2197";
  position:absolute;right:1.15rem;top:50%;transform:translateY(-50%);
  font-size:.85em;line-height:1;opacity:.8;}
.nav-pull .pdrill a[target="_blank"]:not(:has(img)){position:relative;padding-right:1.7rem;}
.nav-pull .pdrill a[target="_blank"]:not(:has(img))::after{content:"\2197";
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:.95em;line-height:1;opacity:.8;}

/* the bar LEAVES rather than shrinking. the half collapsed version read as
   clipping, not as a transition. it rises straight out on the same curve and the
   same half second the rail uses to come in, so the hand off is one motion.
   at 1080 and down the bar stays put, because the rail is a thin strip there and
   there is nothing to hand off. */
.nav{transition:transform .5s cubic-bezier(.16,1,.3,1);}
@media(min-width:1081px){
  body.railed .nav{transform:translateY(-100%);}
}

/* ============================================================
   THE PULL DOWN. The mobile navigation, Kelly's pick 2026-08-16.

   The bar IS the handle, so the target is the full width of the screen
   instead of a 48px burger in a corner. It opens on a plain TAP as well as
   a drag, because a gesture nobody notices is not ease of use, it is a
   secret. The three line icon and the grip are on screen at all times. It
   was a MENU pill until 2026-08-16; Kelly: an icon does the same job and
   the word was too obvious. Do not bring the word back.

   rummel-page.js builds .nav-pull from the markup already in the nav, so
   adding a nav item needs nothing here.
   ============================================================ */
/* The button is an icon, not a word (Kelly, 2026-08-16). Three stacked lines
   in Columbia Blue, bare on the band with no pill around it. While the shade
   is open the middle line fades and the outer two swing into an X. 44px
   square so the target stays a thumb's size even though the drawing is 22px.
   A soft Columbia circle shows on hover and keyboard focus only, so it never
   reads as a boxed button at rest. */
.nav-menubtn{display:none;margin-left:auto;align-items:center;justify-content:center;
  flex-shrink:0;width:44px;height:44px;padding:0;margin-right:-.6rem;
  color:var(--rb,#75B2DD);background:transparent;border:0;border-radius:50%;cursor:pointer;
  transition:background .18s ease;}   /* Columbia Blue lines, Kelly 2026-08-16 */
.nav-menubtn:hover,.nav-menubtn:focus-visible{background:rgba(117,178,221,.18);outline:none;}
.nav-menubtn .mi{position:relative;display:block;width:22px;height:16px;}
.nav-menubtn .mi s{position:absolute;left:0;width:22px;height:2px;border-radius:2px;
  background:currentColor;text-decoration:none;
  transition:transform .34s cubic-bezier(.16,1,.3,1),top .34s cubic-bezier(.16,1,.3,1),
             opacity .2s ease;}
.nav-menubtn .mi s:nth-child(1){top:0;}
.nav-menubtn .mi s:nth-child(2){top:7px;}
.nav-menubtn .mi s:nth-child(3){top:14px;}
.nav.pull-open .nav-menubtn .mi s{top:7px;}
.nav.pull-open .nav-menubtn .mi s:nth-child(1){transform:rotate(45deg);}
.nav.pull-open .nav-menubtn .mi s:nth-child(2){opacity:0;}
.nav.pull-open .nav-menubtn .mi s:nth-child(3){transform:rotate(-45deg);}
/* THE GRIP STRIP IS GONE, 2026-08-16. It was a 16px band under the bar with a
   small handle in it, advertising the drag. Kelly: "remove the drawer bar, it
   is pointless." The icon already says menu and the whole bar is still
   draggable, so the strip was a permanent hint nobody needed. It is no longer
   built in rummel-page.js either. The rule below only keeps any stale markup
   from showing up on a page that has not been re-pasted. */
.nav-grip{display:none!important;}

/* THE SHADE FILLS THE SCREEN. Kelly, 2026-08-16: "I want the menus to fit
   perfectly on mobile and fill the full screen." So its height is not the sum
   of its rows, it is everything from the bottom of the bar to the bottom of
   the viewport, and the rows are centered in that space rather than stacked at
   the top over a void. The list still scrolls if a phone is short enough or a
   section list long enough to need it, and the utility strip stays pinned to
   the bottom edge where a thumb expects it.

   --nav-bar-h is the BAR, not the whole nav. rummel-page.js publishes both,
   because the grip strip sits between them and belongs to neither sum.
   dvh, not vh, so the mobile browser chrome collapsing does not change it.

   WHERE IT PARKS WHEN CLOSED, and why it is not top:100%.

   The shade is taller than the bar, so translating it up by its own height
   cannot lift it clear of the screen: its bottom edge lands wherever its top
   offset put it. At top:100% that edge is the bottom of the WHOLE nav, which
   means the closed shade lies across the bar, and since it is a positioned
   element with a z-index it wins the paint order against the in flow bar. The
   result on a phone was the shade's own bottom strip, Alumni Parents Give
   Shop and a grip, sitting where the wordmark and the MENU button belong,
   with the six sections nowhere on screen.

   With the grip strip removed the nav IS the bar, so top:100% now lands the
   closed edge exactly on the bottom of the bar and the bar hides it. That is
   also why .nav-in has to outrank the shade in the paint order: see the rule
   in the phone media query. */
.nav-pull{display:none;position:absolute;left:0;right:0;top:100%;z-index:90;
  height:calc(100dvh - var(--nav-bar-h,72px));
  flex-direction:column;
  background:linear-gradient(180deg,#0B2240 0%,#1E4E7E 55%,#2B6E9E 100%);
  border-bottom:2px solid var(--rb,#75B2DD);
  box-shadow:0 16px 36px -12px rgba(0,0,0,.55);
  transform:translateY(-100%);will-change:transform;overflow:hidden;}
.nav-pull.anim{transition:transform .46s cubic-bezier(.16,1,.3,1);}
/* The rows STRETCH to fill, they do not sit in a centered clump with dead air
   above and below. Each section takes an equal share of whatever height the
   screen gives, so the dividers land on an even rhythm all the way down and
   the menu reads as designed for the screen rather than dropped onto it.
   min-height is the floor: once six rows at 60px will not fit, they stop
   stretching, the list overflows and scrolls, and a short landscape phone
   still reaches Athletics. */
.nav-pull > ul{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;}
.nav-pull > .pu{flex:none;}
.nav-pull ul{list-style:none;margin:0;padding:0 1.25rem;}
.nav-pull ul li{flex:1 1 0;min-height:60px;display:flex;}
.nav-pull .pl{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 0;color:#fff;
  font-family:var(--slab),'Roboto Slab',serif;text-transform:uppercase;
  font-size:1.18rem;letter-spacing:.045em;border-bottom:1px solid rgba(255,255,255,.17);}
.nav-pull ul li:last-child .pl{border-bottom:0;}
/* A chevron on its own, Columbia Blue, no count (Kelly, 2026-08-16). Sized off
   the row rather than set in the label face so it reads as a mark, not a
   character: the slab comma-height glyph looked like a typo at small sizes. */
.nav-pull .pl .ct{font-family:var(--sans);font-weight:300;font-size:1.5rem;line-height:1;
  color:var(--rb,#75B2DD);letter-spacing:0;padding-left:.6rem;}
.nav-pull .pu{display:flex;align-items:center;justify-content:space-between;gap:2px;
  padding:0 .75rem;background:rgba(117,178,221,.16);border-top:1px solid rgba(117,178,221,.36);}
.nav-pull .pu a{flex:1 1 0;min-width:0;text-align:center;min-height:46px;line-height:46px;
  font-family:var(--sans);font-weight:400;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.88);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Give is the only coloured link in the strip and now the only larger one
   (Kelly, 2026-08-16). Shop went back to plain: one highlight in a row of
   three reads as a highlight, two read as a pattern and neither lands. */
.nav-pull .pu a.nav-give{color:var(--gold,#F4C430);font-weight:500;font-size:.8rem;
  letter-spacing:.07em;}
/* .pfoot is GONE. See the note in rummel-page.js where it used to be built. */

/* THE CLOSING LINE. Kelly's pick out of six, 2026-08-16: a robust red band
   under Parents, Give and Shop, RAIDER PRIDE in white SquareSlab set almost
   large enough to fill it, panning in as the shade lands.

   The size is NOT declared here. rummel-page.js measures the band and grows
   the type to the widest that fits, because one hardcoded size cannot serve a
   320px SE and a 430px Pro Max, and this is a phrase that has to look
   deliberate on both. The band clips, so the entrance can travel.

   Raider Pride, never Go Raiders. Slab, uppercase, never italic. */
.nav-pull .ppride{flex:none;display:flex;align-items:center;justify-content:center;
  height:70px;overflow:hidden;background:var(--red,#C8102E);
  border-top:1px solid rgba(255,255,255,.18);}
.nav-pull .ppride span{display:block;color:#fff;line-height:1;white-space:nowrap;
  font-family:var(--slab),'Roboto Slab',serif;text-transform:uppercase;letter-spacing:.02em;
  will-change:transform,opacity,filter;}
.nav.pull-open .nav-pull .ppride span{
  animation:pridePan .95s cubic-bezier(.2,.7,.2,1) .1s both;}
@keyframes pridePan{
  from{transform:scale(.84) translateX(-18px);opacity:0;filter:blur(8px);letter-spacing:.3em;}
  to{transform:none;opacity:1;filter:blur(0);letter-spacing:.02em;}}
@media (prefers-reduced-motion: reduce){
  .nav.pull-open .nav-pull .ppride span{animation:none;}}

/* The sub panel slides in over the shade, so the page underneath is never
   lost. inset:0 means it inherits the full screen height from the shade for
   free. Its own children are laid out as a column so the list can center the
   same way the sections do, and the type is a size up on both the panel title
   and the links (Kelly, 2026-08-16: the sub menus should fill the screen and
   these titles should be bigger). */
.nav-pull .pdrill{position:absolute;inset:0;z-index:6;padding:.7rem 1.25rem 1rem;
  background:linear-gradient(180deg,#0B2240 0%,#1E4E7E 100%);
  transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);
  overflow:hidden;display:flex;flex-direction:column;}
.nav.pull-sub .nav-pull .pdrill{transform:translateX(0);}
/* The arrow sits ON the title line and the words "All sections" are gone
   (Kelly, 2026-08-16). One row, one idea: back, and where you are. The title
   is Columbia Blue so the panel head reads as navigation rather than as
   another white heading competing with the links under it. */
.nav-pull .pdrill .phead{flex:none;display:flex;align-items:center;gap:.5rem;
  margin:0 0 .6rem;}
.nav-pull .pdrill .pback{flex:none;display:flex;align-items:center;justify-content:center;
  width:40px;height:44px;margin-left:-12px;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:300;font-size:2rem;line-height:1;
  color:var(--rb,#75B2DD);transition:transform .18s ease;}
.nav-pull .pdrill .pback:hover,.nav-pull .pdrill .pback:focus-visible{transform:translateX(-3px);outline:none;}
.nav-pull .pdrill h5{flex:1 1 auto;min-width:0;font-family:var(--slab),'Roboto Slab',serif;
  text-transform:uppercase;color:var(--rb,#75B2DD);font-size:1.5rem;margin:0;letter-spacing:.02em;}
/* The LIST is the scroller, not the panel, so the back arrow and the title
   stay put while a long list moves under them. And it centres with auto
   margins on the first and last link rather than justify-content:center,
   because a centred flex column that overflows throws half the overflow ABOVE
   the top edge, where no scroll can reach it. That is what happened to
   Athletics on phones (Kelly, 2026-08-17): fifteen links, the panel opened at
   Basketball, and Athletics Home and Baseball were simply gone. Auto margins
   collapse to zero the moment the list is taller than the room, so a short
   list still floats to the middle and a long one starts at the top. */
.nav-pull .pdrill .pitems{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.nav-pull .pdrill .pitems > a:first-child{margin-top:auto;}
.nav-pull .pdrill .pitems > a:last-child{margin-bottom:auto;}
/* Stretched on the same rule as the sections, so a drill down does not read as
   a shorter, tighter list bolted onto a full screen menu. The ceiling matters:
   Shop has only two children, and without it those two split the whole panel
   and floated 200px apart. Capped, they stay a list and centre in the space. */
.nav-pull .pdrill a{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;
  min-height:56px;max-height:104px;padding:.6rem 0;color:#fff;
  font-family:var(--sans);font-weight:400;
  font-size:1.24rem;letter-spacing:.02em;border-bottom:1px solid rgba(117,178,221,.18);}
.nav-pull .pdrill a:last-child{border-bottom:0;}
/* ATHLETICS is the one sub menu too long for a single column on a phone, so
   it takes the same shape it has on desktop (.nav-sub-wide, above): two
   columns of sports under an Athletics Home that spans both. Eight rows at a
   52px floor is 416px, which fits every phone in _mobile-preview.html, so all
   fourteen sports are on screen at once and nothing scrolls. The rows then
   share whatever height is left (1fr), on the same rule as every other panel:
   the list fills the screen rather than sitting as a tight clump with dead
   air around it. The ceiling is the single column's 104px times eight rows,
   and auto margins centre the capped block on a tablet.
   The class comes from rummel-page.js, which reads .nav-sub-wide off the real
   dropdown when it builds the panel. Dividers sit on the TOP of every link
   after the first, so an odd count never leaves a row without its rule. */
.nav-pull .pdrill.wide .pitems{display:grid;grid-template-columns:1fr 1fr;column-gap:1.25rem;
  grid-auto-rows:minmax(52px,1fr);align-content:start;align-content:safe center;
  max-height:832px;margin:auto 0;}
.nav-pull .pdrill.wide .pitems > a{min-height:52px;max-height:none;margin:0;
  border-bottom:0;border-top:1px solid rgba(117,178,221,.18);}
.nav-pull .pdrill.wide .pitems > a:first-child{grid-column:1 / -1;border-top:0;}
.nav-pull .pdrill a i{font-style:normal;font-size:.8rem;color:rgba(255,255,255,.55);margin-top:.15rem;}

/* A sub menu item that carries a picture turns into a row: thumbnail on the
   left, the two lines of text beside it. Only the two Shop links have one, and
   the rule keys off the image itself rather than a class, so adding a picture
   to any other item is a one line change in rummel-nav.html and nothing here.
   The thumbnails are Rummel photographs of our own students in the gear, never
   a store logo. See the note in rummel-nav.html. */
/* Grid, not flex row: the picture spans both text lines instead of sitting
   beside a title with the description shunted alongside it. */
.nav-pull .pdrill a:has(img){display:grid;grid-template-columns:auto 1fr;
  align-items:center;column-gap:.85rem;}
.nav-pull .pdrill a img{grid-row:1 / span 2;grid-column:1;
  width:54px;height:54px;border-radius:10px;object-fit:cover;
  box-shadow:0 2px 8px -3px rgba(0,0,0,.7);}
.nav-pull .pdrill a:has(img) b{grid-column:2;grid-row:1;font-weight:500;align-self:end;}
.nav-pull .pdrill a:has(img) i{grid-column:2;grid-row:2;align-self:start;margin-top:.1rem;}

/* legacy burger. kept so any page still carrying the old markup degrades
   quietly instead of showing a stray button. */
.nav-burger,.nav-sheet{display:none;}

/* ============================================================
   FOOTER. Required, locked, identical on every page.

   Lifted out of template-landing.html's inline <style>, where it was
   copy pasted into 20+ production pages. c7 shipped with no footer at
   all, which is the one place the Academics page is inconsistent with
   the rest of the site.
   ============================================================ */
.motto-footer{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);padding:4.8rem 2rem;text-align:center;}
.motto-footer::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;z-index:6;background:linear-gradient(90deg,var(--red),var(--rb) 70%);}
.motto-footer::after{content:"";position:absolute;left:0;top:0;height:3px;width:24%;z-index:7;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.8) 50%,rgba(255,255,255,0));transform:translateX(-140%);animation:mfGlint 9s ease-in-out infinite;will-change:transform;}
@keyframes mfGlint{0%,18%{transform:translateX(-140%);}58%,100%{transform:translateX(540%);}}
.motto-footer .mf-dots{position:absolute;inset:0;z-index:0;opacity:.3;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px);background-size:13px 13px;pointer-events:none;}
.motto-footer .mf-glow{position:absolute;z-index:1;left:50%;top:50%;width:960px;height:960px;margin:-480px 0 0 -480px;pointer-events:none;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.motto-footer .mf-glow i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(78,146,196,.32) 0%,rgba(43,110,158,.15) 38%,rgba(11,34,64,0) 68%);animation:mfBreathe 7s ease-in-out infinite;}
@keyframes mfBreathe{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.12);opacity:1;}}
.motto-footer .mf-wm{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--slab);text-transform:uppercase;font-size:clamp(2.8rem,10.4vw,9.2rem);letter-spacing:.05em;line-height:1;color:rgba(255,255,255,.05);white-space:nowrap;pointer-events:none;user-select:none;}
.motto-footer .mf-rot{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;}
.motto-footer .mf-line{grid-area:1/1;margin:0;font-family:var(--slab);text-transform:uppercase;letter-spacing:.12em;line-height:1.35;font-size:clamp(1.35rem,3.6vw,2.5rem);color:#fff;}
.motto-footer .mf-line em{font-style:normal;color:var(--rb);}
.motto-footer .mf-ell{background:linear-gradient(90deg,#fff 0%,#75B2DD 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.motto-footer.mf-js .mf-line{opacity:0;filter:blur(8px);transition:opacity 1.05s ease,filter 1.05s ease;}
.motto-footer.mf-js .mf-line.on{opacity:1;filter:blur(0);}
.motto-footer.mf-js .mf-line.off{opacity:0;transition:opacity .4s ease,filter .4s ease;}
@media(min-width:768px){
  .motto-footer .mf-line{white-space:nowrap;}
  .motto-footer.mf-js .mf-line{letter-spacing:.34em;transition:letter-spacing 1.15s cubic-bezier(.2,.7,.2,1),opacity 1.05s ease,filter 1.05s ease;}
  .motto-footer.mf-js .mf-line.on{letter-spacing:.12em;}
  .motto-footer.mf-js .mf-line.off{transition:opacity .4s ease,filter .4s ease;}
}
.motto-footer:not(.mf-js) .mf-line+.mf-line{display:none;}
.motto-footer:not(.mf-js) .mf-line em,.motto-footer .mf-line.on em{animation:mfForever 5.5s ease-in-out 1.4s infinite;}
@keyframes mfForever{0%,100%{text-shadow:0 0 14px rgba(117,178,221,.22);}50%{text-shadow:0 0 32px rgba(117,178,221,.62);}}
/* the policy line (Kelly, 2026-08-15). Two quiet links under the mottos on every public
   page: the school's nondiscrimination policy and the Archdiocese's Safe Environment
   program. Oswald at the label floor, muted white, Columbia on hover, 44px targets. The
   dot between them goes away when the row stacks on a narrow phone. The same rules are
   carried inline on the pages that still keep their footer styles in a <style> block
   (homepage, news, calendar, register); change both or they drift. */
.motto-footer .mf-links{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 .2rem;margin-top:2.6rem;}
.motto-footer .mf-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;font-family:var(--sans,'Oswald',Arial,sans-serif);font-weight:500;font-size:var(--t-label,.82rem);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.68);text-decoration:none;transition:color .18s ease;}
.motto-footer .mf-links a:hover,.motto-footer .mf-links a:focus-visible{color:#75B2DD;}
.motto-footer .mf-links a[target="_blank"]::after{content:"\2197";font-size:.72em;margin-left:.4em;opacity:.75;}
.motto-footer .mf-links i{display:block;width:4px;height:4px;border-radius:50%;background:rgba(117,178,221,.7);}
@media(max-width:480px){.motto-footer .mf-links{flex-direction:column;gap:.1rem;}.motto-footer .mf-links i{display:none;}}

/* ── THE FACTS RAIL ─────────────────────────────────────────────────────────
   Kelly's pick from the footer lookbook, 2026-08-17: "The Prayer, then the
   Facts." The dark motto band is untouched and keeps its moment; a white rail
   rides underneath it carrying the things a footer actually has to carry, the
   mark, the address, the phone, the socials, and the legal line.

   It is a SIBLING of .motto-footer, not a child, because .motto-footer is
   overflow:hidden over a navy gradient and a white band cannot live inside
   that. The policy links stay up in the dark band where they already are, so
   nothing is said twice.

   Three columns on desktop, one centred column on a phone, and the legal row
   spans the full width underneath either way. */
.mf-facts{position:relative;background:#fff;
  padding:2.2rem clamp(15px,4vw,48px) calc(2.2rem + var(--mf-bar,46px));}   /* the bottom pad reserves the studio bar */
.mf-facts .mf-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem 2rem;align-items:center;}
.mf-facts .mf-mark{height:44px;width:auto;}
.mf-facts .mf-addr{font-family:var(--sans,'Oswald',Arial,sans-serif);font-weight:500;font-size:.92rem;letter-spacing:.04em;line-height:1.7;color:var(--navy);}
.mf-facts .mf-addr b{color:var(--red);font-weight:600;}
.mf-facts .mf-addr a{color:inherit;text-decoration:none;}
.mf-facts .mf-addr a:hover,.mf-facts .mf-addr a:focus-visible{text-decoration:underline;text-underline-offset:3px;}
.mf-facts .mf-soc{display:flex;gap:.7rem;align-items:center;}
.mf-facts .mf-soc a{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--rb-pale,#EAF4FC);color:var(--navy);text-decoration:none;transition:transform .25s ease,background .25s ease,color .25s ease;}
.mf-facts .mf-soc a svg{width:19px;height:19px;fill:currentColor;}
.mf-facts .mf-soc a:hover,.mf-facts .mf-soc a:focus-visible{background:var(--navy);color:#fff;transform:translateY(-3px);}
/* The muting sits on the two facts, not on the row: the studio bar below is a child of
   this row in the markup and an opacity on the row would wash the navy out with it. */
.mf-facts .mf-legal{grid-column:1/-1;border-top:1px solid var(--line,#E3E9F0);padding-top:1rem;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.6rem 1.4rem;font-family:var(--sans,'Oswald',Arial,sans-serif);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);}
.mf-facts .mf-legal > span{opacity:.62;}
/* The policy links (2026-08-17). They used to sit up in the dark band as a 44px tap
   row under the prayers, and Kelly found them too big over the words. Now the very
   last row of the rail: two small links, in the legal row's own voice, so nothing in
   the prayer band competes with the prayer. Same size and case as the copyright. */
.mf-facts .mf-policy{grid-column:1/-1;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.3rem .5rem;margin-top:-.2rem;font-family:var(--sans,'Oswald',Arial,sans-serif);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);opacity:.55;}
.mf-facts .mf-policy a{color:inherit;text-decoration:none;padding:.35rem .4rem;transition:color .18s ease;}
.mf-facts .mf-policy a:hover,.mf-facts .mf-policy a:focus-visible{color:var(--rb-deep,#2B6E9E);text-decoration:underline;text-underline-offset:3px;}
.mf-facts .mf-policy i{display:block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;}
/* ── THE STUDIO BAR ──────────────────────────────────────────────────────────
   Kelly, 2026-08-17: "put Clamor Studio in a navy bar on the very bottom, make
   it more sleek." So the credit leaves the legal row and becomes the last thing
   on every page: one slim navy band the full width of the screen, a Columbia
   hairline along its top, BUILT BY in Oswald and the studio's full legal name
   in Fraunces, centred, quiet, and the whole bar is the link.

   The markup does not move. .mf-built still sits inside .mf-legal on the fifty
   odd pages that carry the rail, and is pinned to the bottom of .mf-facts from
   here, so one rule serves every footer and no sweep has to touch them. The
   rail's bottom padding (above) reserves the bar's height so nothing overlaps.
   line-height does the vertical centring, which keeps the two faces on one
   baseline the way they were in the row. */
.mf-facts .mf-built{position:absolute;left:0;right:0;bottom:0;height:var(--mf-bar,46px);
  display:block;text-align:center;line-height:var(--mf-bar,46px);white-space:nowrap;
  background:var(--navy);box-shadow:inset 0 1px 0 rgba(117,178,221,.3);
  color:rgba(255,255,255,.6);text-decoration:none;
  font-family:var(--sans,'Oswald',Arial,sans-serif);
  transition:background .22s ease;}
.mf-facts .mf-built i{font-style:normal;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;margin-right:.7em;}
.mf-facts .mf-built .clamor{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:600;font-size:.84rem;letter-spacing:.005em;text-transform:none;color:rgba(255,255,255,.92);text-decoration:none;transition:color .22s ease;}
.mf-facts .mf-built:hover .clamor,.mf-facts .mf-built:focus-visible .clamor{color:var(--rb);}
.mf-facts .mf-built:focus-visible{outline:2px solid var(--rb);outline-offset:-4px;}
@media(max-width:820px){
  .mf-facts .mf-in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.2rem;}
  .mf-facts .mf-legal{justify-content:center;text-align:center;}
}
@media(max-width:480px){.mf-facts .mf-policy{flex-direction:column;gap:.15rem;}.mf-facts .mf-policy i{display:none;}}
/* on a narrow phone the street and the phone number together run the full width
   with about a pixel to spare either side. Give the number its own line instead,
   so the block keeps a real gutter rather than a technical one. */
@media(max-width:520px){
  .mf-facts .mf-addr .mf-dot{display:none;}
  .mf-facts .mf-addr .mf-tel{display:block;}
}

/* 1080 and down: IN THIS SECTION replaces the strip. Kelly's pick 2026-08-16.

   The strip failed four ways on a phone, all measured on Academics at 393px:
   three of five sections sat off the right edge behind a swipe nothing hinted
   at, no section was ever marked current, it was fixed to the top at z 120
   OVER the site nav so the main menu vanished the moment it arrived, and the
   word Academics was hidden so five bare labels arrived unexplained.

   This is one slim row that sits UNDER the site bar, never over it. It says
   what it is in words, IN THIS SECTION, then names where you are, then opens
   downward into the full list on a tap. It is BUILT BY rummel-page.js FROM
   THE SAME RAIL MARKUP, so a page still adds a section by adding a data-rail
   block and nothing else. The desktop rail is untouched. */
@media(max-width:1080px){
  body.railed #below{padding-left:0;}
  body.railed .motto-footer{margin-left:0;}
  /* the strip is gone. .rail stays in the DOM because it is the data the row
     is built from and the spy still marks .on inside it. !important because
     academics.html carries an inline .rail{display:flex} from its concept
     stylesheet that loads AFTER this file and would otherwise win. */
  .rail{display:none !important;}
}

/* Anchor jumps land BELOW the sticky bars, not under them. Without this the
   In This Section menu and the rail put a section's top under 120px of chrome
   and its first block looked cut off (Kelly, 2026-08-16, on the phone). --nav-h
   is published by rummel-page.js; the extra is the row plus a breath. Above
   1080 the bar leaves once the rail is in, so a smaller margin does it. */
#below [id]{scroll-margin-top:calc(var(--nav-h,72px) + 3.6rem);}
@media(min-width:1081px){ #below [id]{scroll-margin-top:2rem;} }

/* ---- the row. hidden above 1080. ---- */
.its{display:none;position:sticky;z-index:95;
  /* directly under the site bar, whatever height the bar is on this page */
  top:var(--nav-h,72px);
  background:rgb(var(--ink-band-rgb) / .97);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(117,178,221,.34);
  box-shadow:0 10px 26px -18px rgba(0,0,0,.6);}
.its-hd{display:flex;align-items:center;gap:.7rem;min-height:46px;padding:0 1.25rem;
  /* a button does not stretch to its parent on its own, and rummel-blocks.css
     resets button widths, so on the template pages this sat at 103px pushed
     to the right. Both width and box-sizing stated outright. */
  width:100%;box-sizing:border-box;position:relative;
  background:none;border:0;cursor:pointer;text-align:left;color:#fff;font:inherit;
  -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;}
.its-hd .t{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.62);flex:none;}
.its-hd .c{font-family:var(--slab);font-size:.92rem;letter-spacing:.035em;text-transform:uppercase;
  color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.its-hd .k{flex:none;font-size:.62rem;color:var(--rb);
  transition:transform .3s cubic-bezier(.16,1,.3,1);}
.its.open .its-hd .k{transform:rotate(180deg);}
/* the hairline of progress along the bottom edge: how far down the page you
   are, without a bar that takes its own row */
.its-pl{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;}
.its-pl i{display:block;height:100%;width:0;background:var(--rb);transition:width .25s ease;}

.its-list{list-style:none;margin:0;padding:0;overflow:hidden;
  max-height:0;transition:max-height .38s cubic-bezier(.16,1,.3,1);
  border-top:1px solid rgba(117,178,221,0);}
.its.open .its-list{border-top-color:rgba(117,178,221,.24);}
.its-list a{display:flex;align-items:center;gap:.8rem;min-height:48px;padding:.5rem 1.25rem;
  color:#fff;border-top:1px solid rgba(255,255,255,.1);}
.its-list li:first-child a{border-top:0;}
.its-list .n{font-family:var(--slab);font-size:.72rem;letter-spacing:.1em;
  color:rgba(255,255,255,.5);width:1.6rem;flex:none;}
.its-list .l{font-family:var(--slab);font-size:.92rem;letter-spacing:.035em;text-transform:uppercase;}
.its-list a.on{background:rgba(117,178,221,.16);}
.its-list a.on .n,.its-list a.on .l{color:var(--rb);}
.its-list a:active{background:rgba(255,255,255,.1);}

@media(max-width:1080px){
  body.has-its .its{display:block;}
}
@media(prefers-reduced-motion:reduce){
  .its-hd .k,.its-list,.its-pl i{transition:none;}
}


/* ============================================================
   MOBILE. Type GROWS here, it never shrinks.
   15px minimum gutter, no horizontal scroll, 44px targets.
   ============================================================ */

/* THE PULL DOWN TAKES OVER AT 1100.

   Measured in the browser 2026-08-16 with the SEVEN item bar, not estimated:
   wordmark 226 + gap 32 + seven links 713 + the 2.4rem sides 77 = 1048px is
   the point where the brand and the links collide. 1100 gives 52px of
   headroom, which covers the reflow when Oswald finishes loading. (An earlier
   note here guessed 831 by using the wrong link width. Re-measure, never
   estimate: getBoundingClientRect on .nav-brand and .nav-links, plus the
   .nav-in gap and padding.)

   History: 1180 with seven links plus Apply, 1220 once Support made it eight,
   1120 once Apply was removed on 2026-08-15, 1000 when the bar dropped to six
   with the utility row above it, and 1100 now that Alumni has come back into
   the main bar. ADDING OR REMOVING A LINK MEANS RE-MEASURING THIS NUMBER.

   THE JS CONSTANT MUST MATCH. rummel-page.js reads --nav-pull-bp off this
   element rather than keeping its own copy, because the two silently
   disagreed for months (CSS 1120, JS 1220) and left a dead band where an open
   sheet sat beside visible desktop links. Change the number here only.

   The rail keeps its own 1080 breakpoint. The two are independent. */
:root{--nav-pull-bp:1100;}
@media(max-width:1100px){
  .nav-links{display:none;}
  .nav-util{display:none;}          /* its links move into the pull down */
  .nav-menubtn{display:inline-flex;}
  .nav-grip{display:flex;}
  .nav-pull{display:flex;}

  /* THE BAR HAS TO OUTRANK THE SHADE. The shade is positioned and carries a
     z-index, so an in flow bar loses the paint order to it no matter where it
     is parked: a shade taller than the bar cannot be lifted clear of the
     screen by its own height, it can only be hidden BEHIND something. Without
     this the phone showed the shade's own bottom strip, Alumni Parents Give
     Shop over a grip, exactly where the wordmark and the MENU button belong,
     and the six sections were nowhere on screen.
     The band color has to be re-declared here rather than inherited, because
     it lives on .nav, the parent, and a parent's background paints under
     every child, the shade included. */
  .nav-in{position:relative;z-index:95;background:rgb(var(--ink-band-rgb));
    cursor:grab;user-select:none;}
  .nav-in:active{cursor:grabbing;}
}
@media(max-width:760px){
  :root{
    --t-lede:1.22rem;      /* up from 1.2 */
    --t-body:1.09rem;      /* up from 1.0625 */
    --t-list:1.05rem;
    --t-label:0.85rem;
    --t-h3:1.5rem;
    --t-statlab:0.85rem;
  }
  /* 1.25rem is 20px, which clears the 15px minimum side gutter with room. */
  .wrap,.wrap-narrow,.nav-in{padding-left:1.25rem;padding-right:1.25rem;}
  section{padding:4.2rem 0;}
  .nav-in{height:72px;gap:.6rem;}
  /* the full wordmark plus the Apply button will not fit 375px without clipping
     the button, so the mark goes to the R alone on phones */
  .nav-brand span,.rail .brand span{display:none;}
  .nav-brand img{height:40px;}
  .nav-cta{margin-left:0;}
  .nav-cta .btn{padding:.8rem 1.05rem;font-size:.82rem;}
  .nav-brand{min-height:44px;align-items:center;}
  .btn{width:100%;justify-content:center;}
  .nav-cta .btn{width:auto;}
  .motto-footer{padding:3.6rem 1.25rem;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
  .motto-footer::after,.motto-footer .mf-glow i,.motto-footer .mf-line em{animation:none!important;}
  .motto-footer.mf-js .mf-line{transition:none;letter-spacing:.12em;filter:none;}
  .motto-footer .mf-glow{transition:none;}
}

/* ── REGISTRATION CLOSED CHIP ─────────────────────────────────────────────────
   registration-gate.js turns every admissions event button into this until the
   day registration opens (Kelly, 2026-08-17: "Registration Opens 8/19"). It keeps
   the button's own size and place, so the layout does not move on the day it
   flips back to a real link. Quiet on purpose: this is information, not an alarm,
   so it is the page's paper and a Columbia rule rather than the gold of a live
   button, and it does not lift on hover because there is nothing to press. */
.reg-closed:not(.prog){
  cursor:default!important;pointer-events:none;
  background:#fff!important;color:var(--rb-deep,#2B6E9E)!important;
  border:1.5px solid var(--rb,#75B2DD)!important;box-shadow:none!important;
  transform:none!important;text-decoration:none!important;
  font-family:var(--sans,'Oswald',Arial,sans-serif);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
}
.reg-closed:not(.prog)::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--rb,#75B2DD);margin-right:.5em;vertical-align:middle;
}
/* the dark hero on the homepage: paper chip would glare, so it goes glassy there */
.events .reg-closed:not(.prog),.hero .reg-closed:not(.prog){
  background:rgba(255,255,255,.1)!important;color:#fff!important;border-color:rgba(117,178,221,.7)!important;
}