/* ==========================================================================
   Jubilee Memorial College — design system
   "Collegiate editorial": warm paper canvas, scholarly serif display
   (Fraunces) + newspaper-grotesque body (Libre Franklin), navy as
   structure, gold as precision accent. Built on Bootstrap 5, written
   from scratch. Class API preserved so every page restyles cohesively.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --jmc-navy:        #1a2e5a;
  --jmc-navy-700:    #15264a;
  --jmc-navy-dark:   #0f1d3a;   /* legacy token name, kept */
  --jmc-navy-900:    #0a142c;
  --jmc-gold:        #c9a84c;
  --jmc-gold-deep:   #a07e2c;   /* gold that passes contrast on paper */
  --jmc-gold-light:  #e7d196;
  --jmc-gold-soft:   #f3e7c4;

  /* ---- Warm paper neutral system --------------------------------------- */
  --jmc-paper:       #faf7f0;   /* dominant page canvas */
  --jmc-paper-deep:  #f2ede0;   /* alternating sections */
  --jmc-surface:     #ffffff;   /* raised cards */
  --jmc-white:       #ffffff;   /* legacy token name, kept */
  --jmc-offwhite:    #f2ede0;   /* legacy token name, kept */
  --jmc-ink:         #1d2433;   /* body text */
  --jmc-text:        #1d2433;   /* legacy token name, kept */
  --jmc-muted:       #5b6477;
  --jmc-line:        #e4ddcc;   /* hairline on paper */
  --jmc-line-strong: #d4ccb6;

  /* ---- Type ------------------------------------------------------------- */
  --ff-display: 'Lora', Georgia, serif;
  --ff-sans:    'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-font-sans-serif: var(--ff-sans);
  --bs-body-font-family: var(--ff-sans);
  --bs-body-color: var(--jmc-ink);
  --bs-body-bg: var(--jmc-paper);
  --bs-link-color-rgb: 26, 46, 90;

  /* fluid modular scale */
  --t-eyebrow: .74rem;
  --t-sm:  clamp(.84rem, .81rem + .15vw, .92rem);
  --t-base: clamp(1rem, .97rem + .18vw, 1.075rem);
  --t-lead: clamp(1.1rem, 1.04rem + .35vw, 1.28rem);
  --t-h3:  clamp(1.25rem, 1.12rem + .6vw, 1.6rem);
  --t-h2:  clamp(1.7rem, 1.4rem + 1.5vw, 2.7rem);
  --t-h1:  clamp(2.1rem, 1.6rem + 2.6vw, 3.7rem);

  /* ---- Space ------------------------------------------------------------ */
  --space-section: clamp(3.25rem, 2.2rem + 4.6vw, 6.5rem);

  /* ---- Material --------------------------------------------------------- */
  --radius:    12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(10, 20, 44, .05),
               0 3px 10px -4px rgba(10, 20, 44, .08);
  --shadow-md: 0 2px 6px rgba(10, 20, 44, .05),
               0 18px 40px -16px rgba(10, 20, 44, .22);
  --ease:      cubic-bezier(.22, 1, .36, 1);

  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--jmc-ink);
  background-color: var(--jmc-paper);
  font-feature-settings: "kern", "liga", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Faint paper grain for depth — never noticeable, just felt. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ---- Headings ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.14;
  color: var(--jmc-navy);
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
}

p { margin-bottom: 1rem; }

a {
  color: var(--jmc-navy);
  text-decoration: none;
  transition: color .18s var(--ease);
}
a:hover { color: var(--jmc-gold-deep); }

::selection { background: var(--jmc-gold-soft); color: var(--jmc-navy-900); }

:focus-visible {
  outline: 2px solid var(--jmc-gold-deep);
  outline-offset: 2px;
  border-radius: 3px;
}

img { max-width: 100%; }

/* ---- Eyebrow + section head (used where markup allows) ------------------ */
.jmc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--ff-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jmc-gold-deep);
  line-height: 1.15;
  margin-bottom: .7rem;
}

.text-center .jmc-eyebrow { justify-content: center; }

/* ---- Skip link ---------------------------------------------------------- */
.jmc-skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 2000;
  background: var(--jmc-gold);
  color: var(--jmc-navy-900);
  padding: .6rem 1.1rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.jmc-skip-link:focus { left: 0; }

/* ---- Topbar ------------------------------------------------------------- */
.jmc-topbar {
  background-color: var(--jmc-navy-900);
  color: rgba(255, 255, 255, .68);
  font-size: .8rem;
  letter-spacing: .01em;
  border-bottom: 1px solid rgba(201, 168, 76, .14);
}
.jmc-topbar a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.jmc-topbar a:hover { color: var(--jmc-gold-light); }

/* ---- Navbar ------------------------------------------------------------- */
.jmc-navbar {
  background-color: var(--jmc-navy);
  padding-top: .85rem;
  padding-bottom: .85rem;
  box-shadow: 0 1px 0 rgba(201, 168, 76, .16);
  transition: padding .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.jmc-navbar.is-scrolled {
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: var(--jmc-navy-900);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6),
              0 1px 0 rgba(201, 168, 76, .22);
}
.jmc-navbar .navbar-brand { display: flex; align-items: center; gap: .8rem; }
.jmc-navbar .navbar-brand img {
  height: 50px;
  width: auto;
  transition: height .3s var(--ease);
}
.jmc-navbar.is-scrolled .navbar-brand img { height: 40px; }
.jmc-navbar .navbar-brand .jmc-brand-text { color: #fff; line-height: 1.12; }
.jmc-navbar .navbar-brand .jmc-brand-text strong {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: block;
}
.jmc-navbar .navbar-brand .jmc-brand-text span {
  font-family: var(--ff-sans);
  font-size: .68rem;
  font-weight: 500;
  color: var(--jmc-gold-light);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.jmc-navbar .nav-link {
  color: rgba(255, 255, 255, .82);
  font-size: .92rem;
  font-weight: 500;
  padding: .4rem .95rem;
  position: relative;
}
.jmc-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: .95rem;
  right: .95rem;
  bottom: .12rem;
  height: 1.5px;
  background: var(--jmc-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ease);
}
.jmc-navbar .nav-link:hover,
.jmc-navbar .nav-link:focus,
.jmc-navbar .nav-link.active { color: #fff; }
.jmc-navbar .nav-link:hover::after,
.jmc-navbar .nav-link:focus::after,
.jmc-navbar .nav-link.active::after { transform: scaleX(1); }
.jmc-navbar .nav-link.dropdown-toggle::after {
  display: none !important;
}
.jmc-navbar .dropdown-chevron {
  width: 10px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.25s ease;
}
.jmc-navbar .nav-link,
.jmc-navbar .dropdown-item {
  outline: none !important;
  box-shadow: none !important;
}
@media (min-width: 992px) {
  .jmc-navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block !important;
    margin-top: 0;
  }
  .jmc-navbar .nav-item.dropdown:hover .dropdown-chevron {
    transform: rotate(180deg);
  }
}
.jmc-navbar .dropdown-menu {
  border: none;
  border-top: 2px solid var(--jmc-gold);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0;
  margin-top: .35rem;
  background: var(--jmc-surface);
}
.jmc-navbar .dropdown-item {
  font-family: var(--ff-sans);
  font-size: .9rem;
  font-weight: 500;
  color: var(--jmc-ink);
  padding: .55rem .9rem;
  border-radius: 6px;
  transition: background-color .16s var(--ease), color .16s var(--ease),
              padding-left .16s var(--ease);
}
.jmc-navbar .dropdown-item:hover,
.jmc-navbar .dropdown-item:focus,
.jmc-navbar .dropdown-item.active {
  background-color: var(--jmc-paper-deep);
  color: var(--jmc-navy);
  padding-left: 1.15rem;
}
.jmc-navbar .dropdown-divider { border-color: var(--jmc-line); opacity: 1; }
.jmc-navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .25);
  padding: .35rem .55rem;
}
.jmc-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(201, 168, 76, .4); }

@media (max-width: 991.98px) {
  .jmc-navbar .navbar-collapse {
    margin-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: .5rem;
  }
  .jmc-navbar .nav-link::after { display: none; }
  .jmc-navbar .dropdown-menu {
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding-left: 1rem;
  }
  .jmc-navbar .dropdown-item { color: rgba(255, 255, 255, .8); }
  .jmc-navbar .dropdown-item:hover,
  .jmc-navbar .dropdown-item:focus,
  .jmc-navbar .dropdown-item.active {
    background: transparent;
    color: var(--jmc-gold-light);
  }
}

/* ---- Interior page header band ------------------------------------------ */
.jmc-page-header {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201, 168, 76, .14) 0%, transparent 55%),
    linear-gradient(135deg, var(--jmc-navy) 0%, var(--jmc-navy-900) 100%);
  color: #fff;
  padding: clamp(2.6rem, 1.8rem + 3vw, 4.4rem) 0 clamp(2rem, 1.4rem + 2vw, 3rem);
  position: relative;
}
.jmc-page-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--jmc-gold) 0%, transparent 60%);
}
.jmc-page-header h1 {
  font-family: var(--ff-display);
  font-size: var(--t-h1);
  font-weight: 600;
  color: #fff;
  margin: .15rem 0 .4rem;
}
.jmc-page-header .lead { color: rgba(255, 255, 255, .72); font-size: var(--t-lead); }
.jmc-page-header .breadcrumb { margin-bottom: .65rem; font-size: .82rem; }
.jmc-page-header .breadcrumb-item,
.jmc-page-header .breadcrumb-item a {
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  font-weight: 500;
}
.jmc-page-header .breadcrumb-item a:hover { color: var(--jmc-gold-light); }
.jmc-page-header .breadcrumb-item.active { color: var(--jmc-gold-light); }
.jmc-page-header .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, .35);
  content: "\27f6";
}

/* ---- Sections & titles -------------------------------------------------- */
.jmc-section { padding: var(--space-section) 0; }

.jmc-section-title {
  font-family: var(--ff-display);
  font-size: var(--t-h2);
  color: var(--jmc-navy);
  font-weight: 600;
  letter-spacing: -0.016em;
  margin-bottom: 1.5rem;
}
/* Refined brand rule — short, thin, deliberate (not a heavy underline). */
.jmc-section-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--jmc-gold);
  margin-top: .85rem;
}
.jmc-section-title.text-center { margin-bottom: 1.7rem; }
.jmc-section-title.text-center::after { margin-left: auto; margin-right: auto; }
/* When a title follows an eyebrow inside .jmc-section-head, drop the rule. */

/* ---- Cards -------------------------------------------------------------- */
.jmc-card {
  position: relative;
  border: 1px solid var(--jmc-line);
  border-radius: var(--radius);
  background: var(--jmc-surface);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
  height: 100%;
  overflow: hidden;
}
/* Gold keyline that draws across the top on hover. */
.jmc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--jmc-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.jmc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--jmc-line-strong);
}
.jmc-card:hover::before { transform: scaleX(1); }
.jmc-card .card-title {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--jmc-navy);
  letter-spacing: -0.01em;
}
.jmc-card .card-body { padding: 1.5rem; }
.jmc-card .stretched-link { color: var(--jmc-navy); font-weight: 600; }
.jmc-card .stretched-link .bi {
  transition: transform .25s var(--ease);
  display: inline-block;
}
.jmc-card:hover .stretched-link { color: var(--jmc-gold-deep); }
.jmc-card:hover .stretched-link .bi { transform: translateX(4px); }
.jmc-card .card-img-top { border-radius: 0; }

/* ---- Buttons ------------------------------------------------------------ */
.btn-jmc-primary,
.btn-jmc-outline {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .65rem;
  font-family: var(--ff-sans);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 7px;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-jmc-primary {
  background-color: var(--jmc-gold);
  border: 1px solid var(--jmc-gold);
  color: var(--jmc-navy-900);
  box-shadow: 0 8px 20px -10px rgba(201, 168, 76, .8);
}
.btn-jmc-primary:hover,
.btn-jmc-primary:focus {
  background-color: var(--jmc-navy);
  border-color: var(--jmc-navy);
  color: #fff;
  transform: translateY(-2px);
}
.btn-jmc-outline {
  border: 1.5px solid var(--jmc-gold-deep);
  color: var(--jmc-gold-deep);
  background: transparent;
}
.btn-jmc-outline:hover,
.btn-jmc-outline:focus {
  background-color: var(--jmc-navy);
  border-color: var(--jmc-navy);
  color: #fff;
  transform: translateY(-2px);
}

/* On a dark band the outline button needs light strokes. */

/* ---- Badges ------------------------------------------------------------- */
.notification-badge {
  display: inline-block;
  background: transparent;
  color: var(--jmc-gold-deep);
  border: 1px solid var(--jmc-gold);
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* ---- Gallery ------------------------------------------------------------ */
.jmc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
}
.jmc-gallery-grid a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
  position: relative;
}
.jmc-gallery-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 20, 44, .45) 100%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.jmc-gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}
.jmc-gallery-grid a:hover img { transform: scale(1.07); }
.jmc-gallery-grid a:hover::after { opacity: 1; }
@media (max-width: 575.98px) {
  .jmc-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Map strip (legacy base; refined later in the rebuild layer) -------- */
.jmc-map iframe {
  width: 100%;
  min-height: 340px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: block;
}

/* ---- Rich text ---------------------------------------------------------- */
.jmc-richtext { line-height: 1.8; font-size: var(--t-base); color: var(--jmc-ink); }
.jmc-richtext h2,
.jmc-richtext h3,
.jmc-richtext h4 {
  font-family: var(--ff-display);
  color: var(--jmc-navy);
  margin-top: 2rem;
  margin-bottom: .65rem;
}
.jmc-richtext a { color: var(--jmc-navy); text-decoration: underline; }
.jmc-richtext a:hover { color: var(--jmc-gold-deep); }
.jmc-richtext img { border-radius: var(--radius-sm); margin: 1rem 0; }
.jmc-richtext blockquote {
  border-left: 3px solid var(--jmc-gold);
  padding: .35rem 0 .35rem 1.25rem;
  margin: 1.5rem 0;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--jmc-navy);
}

/* ---- Lightbox (used by gallery album via jmc.js) ------------------------ */
#jmcLightbox .modal-content {
  background: transparent;
  border: none;
}
#jmcLightbox .modal-body {
  padding: 0;
}
#jmcLightbox .modal-dialog {
  width: min(96vw, 1400px);
  max-width: none;
  margin: 1rem auto;
}
#jmcLightbox .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
#jmcLightbox img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 5rem);
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
#jmcLightbox .jmc-lightbox-caption {
  color: rgba(255, 255, 255, .85);
  text-align: center;
  margin-top: .75rem;
  font-size: .9rem;
}
.jmc-lightbox-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  z-index: 2;
}
.jmc-lightbox-close:hover,
.jmc-lightbox-close:focus-visible {
  background: rgba(0, 0, 0, .78);
  color: #fff;
}
[data-lightbox-src] {
  cursor: zoom-in;
}

/* ---- Footer ------------------------------------------------------------- */
.jmc-footer {
  background: linear-gradient(135deg, #020712 0%, #030d24 100%);
  color: rgba(255, 255, 255, .68);
  padding: clamp(2.75rem, 2rem + 2.5vw, 4rem) 0 1.75rem;
  border-top: 3px solid var(--jmc-gold);
  font-size: .92rem;
}
.jmc-footer h5 {
  color: #fff;
  font-family: var(--ff-display);
  font-size: 1.12rem;
  margin-bottom: 1.15rem;
}
.jmc-footer p { color: rgba(255, 255, 255, .62); }
.jmc-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.jmc-footer a:hover { color: var(--jmc-gold-light); }
.jmc-footer ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.jmc-footer ul li { margin-bottom: .6rem; }
.jmc-footer ul li a { position: relative; padding-left: 1rem; }
.jmc-footer ul li a::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--jmc-gold);
}

/* ---- Utilities ---------------------------------------------------------- */

main#main-content { min-height: 50vh; }
.text-muted { color: var(--jmc-muted) !important; }
.text-white-50 { color: rgba(255, 255, 255, .7) !important; }
.alert { border-radius: var(--radius-sm); border: 1px solid var(--jmc-line); }

/* ---- Scroll reveal (progressive enhancement) ---------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal][data-reveal-delay="5"] { transition-delay: .4s; }
.no-js [data-reveal],
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Mockup-matched home layout
   ========================================================================== */

:root {
  --jmc-home-navy: #06275a;
  --jmc-home-navy-2: #001f4d;
  --jmc-home-gold: #d9a63f;
  --jmc-home-ink: #051b44;
  --jmc-home-muted: #25314a;
  --jmc-home-line: #e8dfcd;
  --jmc-home-paper: #fffdf8;
}

body {
  background: #fff;
  color: var(--jmc-home-muted);
}

.container {
  max-width: 1120px;
}

.jmc-topbar {
  min-height: 34px;
  background: var(--jmc-home-navy-2);
  border: 0;
  color: #fff;
  font-size: 14px;
}

.jmc-topbar .container {
  display: flex;
  justify-content: flex-end;
}

.jmc-topbar__links {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 34px;
}

.jmc-topbar a {
  color: #fff;
  line-height: 1;
  text-decoration: none;
}

.jmc-topbar a:hover {
  color: var(--jmc-home-gold);
}

.jmc-navbar,
.jmc-navbar.is-scrolled {
  position: relative;
  top: auto;
  background: #fff;
  border-bottom: 1px solid #d9dde6;
  box-shadow: 0 2px 10px rgba(8, 25, 60, .08);
  padding: 10px 0;
}

.jmc-navbar .navbar-brand {
  gap: 16px;
  text-decoration: none;
}

.jmc-navbar .navbar-brand img,
.jmc-navbar.is-scrolled .navbar-brand img {
  height: 48px;
  width: auto;
}

.jmc-navbar .navbar-brand .jmc-brand-text {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--jmc-home-ink);
  line-height: 1;
}

.jmc-navbar .navbar-brand .jmc-brand-text strong {
  max-width: 280px;
  font-size: 24px;
  font-weight: 600;
  color: var(--jmc-home-navy-2);
  line-height: 1.15;
}

.jmc-navbar .nav-link {
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 8px;
  white-space: nowrap;
}

.jmc-navbar .nav-link::after {
  display: none;
}

.jmc-navbar .nav-link:hover,
.jmc-navbar .nav-link:focus,
.jmc-navbar .nav-link.active {
  color: var(--jmc-home-navy);
}

.jmc-navbar .dropdown-menu {
  border: 1px solid #e2e6ef;
  border-radius: 4px;
  margin-top: 12px;
  padding: 0;
}

.jmc-navbar .dropdown-item {
  border-radius: 4px;
  font-size: 13px;
}

.jmc-home-hero {
  position: relative;
  min-height: 342px;
  overflow: hidden;
  background: #fff;
}

.jmc-home-hero__image {
  position: absolute;
  inset: 0 0 0 36%;
  background-image: url("../img/hero-main.jpeg");
  background-size: cover;
  background-position: center;
}

.jmc-home-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 30%, rgba(255,255,255,.48) 52%, rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
}

.jmc-home-hero__inner {
  position: relative;
  min-height: 342px;
  display: flex;
  align-items: center;
}

.jmc-home-hero__copy {
  width: 44%;
  padding-left: 0;
  transform: translateY(14px);
}

.jmc-home-kicker {
  margin: 0 0 18px;
  color: var(--jmc-home-navy-2);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.jmc-home-hero h1 {
  margin: 0 0 18px;
  color: var(--jmc-home-navy-2);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.04;
}

.jmc-home-hero h1 span {
  color: var(--jmc-home-gold);
}

.jmc-home-hero__lead {
  max-width: 375px;
  margin: 0 0 24px;
  color: #25314a;
  font-size: 16px;
  line-height: 1.55;
}

.jmc-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 45px;
  padding: 0 21px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.jmc-home-btn--primary {
  background: var(--jmc-home-navy-2);
  color: #fff;
}

.jmc-home-btn--primary:hover {
  color: #fff;
  background: #0a336f;
}

.jmc-home-btn--outline {
  min-height: 35px;
  border: 1px solid var(--jmc-home-navy);
  color: var(--jmc-home-navy);
  background: #fff;
}

.jmc-home-btn--outline:hover {
  color: #fff;
  background: var(--jmc-home-navy);
}

.jmc-home-stats {
  background: linear-gradient(90deg, var(--jmc-home-navy-2), #002e6b);
  color: #fff;
}

.jmc-home-stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 89px;
}

.jmc-home-stat {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 18px 20px;
  border-left: 1px solid rgba(255,255,255,.18);
}

.jmc-home-stat:first-child {
  border-left: 0;
}

.jmc-home-stat i {
  color: var(--jmc-home-gold);
  font-size: 35px;
}

.jmc-home-stat strong {
  display: block;
  color: #fff;
  font-size: 23px;
  line-height: 1;
}

.jmc-home-stat span {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.88);
  font-size: 12px;
  line-height: 1.2;
}

.jmc-home-intro {
  padding: 80px 0;
  background-color: #ffffff !important;
}

.jmc-home-intro__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.jmc-home-welcome {
  padding: 0;
}

.jmc-home-welcome h2,
.jmc-home-why h2 {
  margin: 0 0 24px;
  color: var(--jmc-home-navy-2);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
}

.jmc-home-welcome h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.jmc-home-welcome p {
  margin: 0 0 32px;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.72;
}

.jmc-home-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.jmc-home-value-grid div {
  text-align: center;
}

.jmc-home-value-grid i {
  display: block;
  margin-bottom: 8px;
  color: var(--jmc-home-gold);
  font-size: 27px;
}

.jmc-home-value-grid span {
  display: block;
  color: var(--jmc-home-navy-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.jmc-home-campus-card {
  padding-top: 21px;
}

.jmc-home-campus-card img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 6px;
}

.jmc-home-panels {
  overflow: hidden;
}

.jmc-ticker-bar {
  background: #ffffff;
  border-bottom: 1px solid var(--jmc-line, #e4ddd3);
  color: var(--jmc-navy-900, #0a142c);
  padding: 10px 0;
  overflow: hidden;
}

.jmc-ticker-bar--navy {
  background: var(--jmc-navy-900, #0a142c);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.jmc-ticker-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.jmc-ticker-badge {
  background: var(--jmc-navy-900, #0a142c);
  color: #ffffff;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.jmc-ticker-content {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.jmc-ticker-content a {
  display: inline-block;
  color: var(--jmc-navy, #1a2e5a);
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 600;
  animation: jmc-marquee 25s linear infinite;
  padding-left: 100%;
}

.jmc-ticker-content a:hover {
  color: var(--jmc-home-gold-deep, #a07e2c);
  animation-play-state: paused;
}

.jmc-ticker-bar--navy .jmc-ticker-badge {
  background: var(--jmc-home-gold, #d9a63f);
  color: var(--jmc-navy-900, #0a142c);
}

.jmc-ticker-bar--navy .jmc-ticker-content a {
  color: rgba(255, 255, 255, 0.95);
}

.jmc-ticker-bar--navy .jmc-ticker-content a:hover {
  color: var(--jmc-home-gold, #d9a63f);
}

@keyframes jmc-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.jmc-home-panels__split {
  display: grid;
  grid-template-columns: 40% 60%;
}

.jmc-home-panels__left-col {
  background:
    radial-gradient(90% 130% at 50% -25%, rgba(217, 166, 63, .2), transparent 60%),
    linear-gradient(160deg, #06275a 0%, #001f4d 55%, #00112e 100%);
  display: flex;
  justify-content: flex-end;
}

.jmc-home-panels__right-col {
  background: #ffffff;
  display: flex;
  justify-content: flex-start;
  border-left: 1px solid var(--jmc-home-line, #e6eaf1);
}

.jmc-home-panel-inner {
  width: 100%;
  max-width: 660px;
  padding: 64px 24px;
  box-sizing: border-box;
}

.jmc-home-panel-inner--right {
  max-width: 100%;
  padding-right: 24px;
}

.jmc-home-panel-inner--left h2 {
  color: #ffffff !important;
}

.jmc-home-panel-inner--left .jmc-home-panel__head > a {
  color: rgba(255, 255, 255, 0.65);
}

.jmc-home-panel-inner--left .jmc-home-panel__head > a:hover {
  color: var(--jmc-home-gold);
}

/* Eyebrow spacing fix inside panel heads */
.jmc-home-panel__head .jmc-eyebrow {
  margin-bottom: .25rem;
}

.jmc-eyebrow--light {
  color: var(--jmc-home-gold);
}

.jmc-home-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.jmc-home-panel__head > a {
  color: var(--jmc-home-navy-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
  padding-top: 4px;
}

.jmc-home-panel__head > a:hover {
  color: var(--jmc-home-gold);
}

.jmc-home-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.jmc-home-panel__head > a {
  color: var(--jmc-home-navy-2);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.jmc-home-notice-list {
  display: flex;
  flex-direction: column;
}

.jmc-home-notice-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;
  transition: gap .18s ease;
}

.jmc-home-notice-item:last-of-type {
  border-bottom: 0;
}

.jmc-home-notice-item:hover {
  gap: 20px;
}

.jmc-home-notice-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.jmc-home-notice-item__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jmc-home-gold);
}

.jmc-home-notice-item__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255,255,255,.9);
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 400; /* regular — user-chosen 2026-07-09 */
  line-height: 1.35;
}

.jmc-home-notice-item:hover .jmc-home-notice-item__title,
.jmc-home-panel__head > a:hover {
  color: var(--jmc-home-gold);
}

.jmc-home-event {
  display: flex !important;
  align-items: stretch;
  gap: 14px;
  min-height: 0 !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--jmc-home-line) !important;
}

.jmc-home-event__media {
  flex-shrink: 0;
  width: 130px;
  height: 100%;
  min-height: 80px;
  align-self: center;
  border-radius: 8px;
  overflow: hidden;
  background: var(--jmc-paper-deep);
}

.jmc-home-event__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jmc-home-event__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--jmc-line-strong);
  font-size: 20px;
}

.jmc-home-event__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.jmc-home-event__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jmc-home-gold);
}

.jmc-home-event__title {
  color: var(--jmc-home-navy-2);
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jmc-home-event__excerpt {
  font-size: 13px;
  color: var(--jmc-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jmc-home-event:hover .jmc-home-event__title {
  color: var(--jmc-home-gold);
}

.jmc-home-why {
  padding: 48px 0;
  background: linear-gradient(160deg, #001a42 0%, #000c24 100%);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.jmc-home-why h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
}

.jmc-home-why__row {
  display: flex;
}

.jmc-home-why__item {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  padding-left: 24px;
  padding-right: 24px;
}

.jmc-home-why__item:first-child {
  padding-left: 0;
}

.jmc-home-why__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border: 1.5px solid var(--jmc-home-gold);
  border-radius: 50%;
  color: var(--jmc-home-gold);
  background: transparent;
}

.jmc-home-why__icon-wrap i {
  font-size: 20px;
  line-height: 1;
}

.jmc-home-why__item-body strong {
  display: block;
  color: #fff;
  font-family: var(--ff-sans);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.jmc-home-why__item-body span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (min-width: 992px) {
  .jmc-home-why__item {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .jmc-home-why__item:last-child {
    border-right: none;
  }
}

@media (max-width: 991.98px) {
  .jmc-home-why {
    padding: 40px 0;
  }
  .jmc-home-why h2 {
    margin-bottom: 20px;
  }
  .jmc-home-why__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .jmc-home-why__item {
    padding: 0;
    border-right: none;
  }
}

@media (max-width: 575.98px) {
  .jmc-home-why__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.jmc-footer {
  margin-top: 0;
  padding: 56px 0 0;
  border-top: 0;
  background: linear-gradient(160deg, #030d24 0%, #010614 100%);
  color: rgba(255,255,255,.76);
}

.jmc-footer__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding: 0 0 40px;
}

.jmc-footer__brand-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.jmc-footer__brand-head img {
  border-radius: 6px;
}

.jmc-footer__brand-head strong {
  display: block;
  color: #fff;
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

.jmc-footer__brand-head span {
  display: block;
  margin-top: 4px;
  color: var(--jmc-home-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.jmc-footer p {
  max-width: 450px;
  margin: 0 0 20px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  line-height: 1.65;
}

.jmc-footer__social {
  display: flex;
  gap: 12px;
}

.jmc-footer__social a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.jmc-footer__social a:hover {
  color: var(--jmc-navy-900);
  background: var(--jmc-home-gold);
  border-color: var(--jmc-home-gold);
}

.jmc-footer__col {
  padding-left: 40px;
  border-left: 0;
}

.jmc-footer h5 {
  display: flex;
  align-items: center;
  gap: .6rem;
  position: relative;
  margin: 0 0 16px;
  color: var(--jmc-home-gold);
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jmc-footer h5 i {
  font-size: 1.2em;
}

.jmc-footer nav a {
  display: block;
  margin-bottom: 14px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  text-decoration: none;
  transition: color .16s var(--ease);
}

.jmc-footer nav a:hover,
.jmc-footer__bottom a:hover,
.jmc-footer__policies a:hover {
  color: var(--jmc-home-gold);
}

.jmc-footer__policies {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding-bottom: 24px;
}

.jmc-footer__policies a {
  position: relative;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  text-decoration: none;
  transition: color .16s var(--ease);
}

.jmc-footer__policies a:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 2px;
  right: -.9rem;
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,.28);
}

.jmc-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.jmc-footer__bottom a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
}

.jmc-footer__credit {
  color: var(--jmc-home-gold) !important;
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .jmc-navbar,
  .jmc-navbar.is-scrolled {
    padding: 14px 0;
  }

  .jmc-navbar .navbar-brand .jmc-brand-text strong {
    font-size: 16px;
  }

  .jmc-navbar .navbar-collapse {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e6eaf1;
  }

  .jmc-navbar .dropdown-menu {
    box-shadow: none;
  }

  .jmc-home-hero__image {
    left: 22%;
  }

  .jmc-home-hero__copy {
    width: 62%;
    padding-left: 0;
  }

  .jmc-home-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .jmc-home-intro__grid,
.jmc-footer__main {
    grid-template-columns: 1fr;
  }

  .jmc-home-welcome,
.jmc-home-why h2,
.jmc-footer__main,
.jmc-footer__bottom {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
  }

  .jmc-footer__col {
    border-left: 0;
    padding-left: 0;
  }

  .jmc-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 575.98px) {
  .jmc-home-hero {
    min-height: 520px;
  }

  .jmc-home-hero__image {
    inset: 218px 0 0 0;
  }

  .jmc-home-hero__veil {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.96) 43%, rgba(255,255,255,.15) 70%);
  }

  .jmc-home-hero__inner {
    align-items: flex-start;
    min-height: 520px;
    padding-top: 34px;
  }

  .jmc-home-hero__copy {
    width: 100%;
  }

  .jmc-home-hero h1 {
    font-size: 36px;
  }

  .jmc-home-stats__grid,
.jmc-home-value-grid {
    grid-template-columns: 1fr;
  }

  .jmc-home-stat {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
  }

  .jmc-home-stat:first-child {
    border-top: 0;
  }
}

/* ==========================================================================
   Rebuild layer (2026-07) — components for the scraped-content site.
   Later rules override the legacy blocks above at equal specificity.
   ========================================================================== */

/* ---- Topbar: socials left, utility links right -------------------------- */
.jmc-topbar { display: block; }
.jmc-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
}
.jmc-topbar__social { display: flex; gap: .35rem; }
.jmc-topbar__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .78rem;
  color: rgba(255, 255, 255, .75);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.jmc-topbar__social a:hover {
  color: var(--jmc-navy-900);
  background: var(--jmc-gold-light);
}
.jmc-topbar__links { display: flex; gap: 1.35rem; }

/* External-link glyph in dropdowns */
.jmc-ext-icon { font-size: .68em; margin-left: .3em; opacity: .6; }

/* ---- Footer contact block ------------------------------------------------ */
.jmc-footer__contact { margin: 1rem 0 1.1rem; font-style: normal; }
.jmc-footer__contact p {
  display: flex;
  gap: .65rem;
  align-items: baseline;
  margin-bottom: .55rem;
  font-size: var(--t-sm);
}
.jmc-footer__contact i { color: var(--jmc-gold); flex: 0 0 auto; }
.jmc-footer__contact a { color: inherit; }

/* ---- Hero actions -------------------------------------------------------- */
.jmc-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}

.jmc-home-btn--gold {
  background: var(--jmc-gold);
  color: var(--jmc-navy-900);
  border: 1px solid var(--jmc-gold);
}
.jmc-home-btn--gold:hover {
  background: var(--jmc-gold-light);
  border-color: var(--jmc-gold-light);
  color: var(--jmc-navy-900);
}

/* ---- News cards ----------------------------------------------------------- */
.jmc-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.jmc-news-grid--index { grid-template-columns: repeat(3, 1fr); }
.jmc-news-card {
  display: flex;
  flex-direction: column;
  background: var(--jmc-surface);
  border: 1px solid var(--jmc-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.jmc-news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.jmc-news-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--jmc-paper-deep);
}
.jmc-news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
.jmc-news-card:hover .jmc-news-card__media img { transform: scale(1.05); }
.jmc-news-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 2rem;
  color: var(--jmc-line-strong);
}
.jmc-news-card__body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.05rem 1.2rem 1.25rem;
}
.jmc-news-card__meta {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jmc-gold-deep);
  margin: 0;
}
.jmc-news-card__body h3,
.jmc-news-card__body h2 {
  font-size: 1.06rem;
  line-height: 1.35;
  margin: 0;
}
.jmc-news-card__body h3 a,
.jmc-news-card__body h2 a {
  color: var(--jmc-navy);
  text-decoration: none;
}
.jmc-news-card__body h3 a:hover,
.jmc-news-card__body h2 a:hover { color: var(--jmc-gold-deep); }
.jmc-news-card__excerpt {
  font-size: var(--t-sm);
  color: var(--jmc-muted);
  margin: 0;
}

/* News index front page: one big lead story + compact list of recent
   stories beside it; older posts continue in the card grid below.
   The two featured columns stretch to equal height: the rail rows share
   the leftover space evenly so neither column trails dead air. */
.jmc-news-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  flex-wrap: wrap;
  padding-bottom: .95rem;
  border-bottom: 1px solid var(--jmc-line);
}
.jmc-news-toolbar .jmc-filter-chips { margin: 0; }
.jmc-news-toolbar__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem 1.1rem;
}
/* Pill chrome comes from .jmc-notif-search; here it only needs sizing.
   A fixed width (not a flex basis) so the tools group's intrinsic width
   includes it fully and the count sits beside the pill without wrapping.
   Extra specificity beats .jmc-notif-search's own flex, defined later. */
.jmc-news-toolbar .jmc-news-search {
  flex: 0 0 auto;
  width: 300px;
  max-width: 100%;
  padding-block: .38rem;
}
.jmc-news-search__btn {
  display: inline-flex;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--jmc-muted);
  cursor: pointer;
}
.jmc-news-search__btn:hover { color: var(--jmc-navy); }
.jmc-news-toolbar__count a {
  color: var(--jmc-gold-deep);
  font-weight: 600;
  text-decoration: none;
}
.jmc-news-toolbar__count a:hover { text-decoration: underline; }
.jmc-news-toolbar__count {
  font-family: var(--ff-sans);
  font-size: var(--t-sm);
  color: var(--jmc-muted);
  white-space: nowrap;
  margin: 0;
}
.jmc-news-featured {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.jmc-news-lead {
  display: flex;
  flex-direction: column;
  background: var(--jmc-surface);
  border: 1px solid var(--jmc-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.jmc-news-lead:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.jmc-news-lead__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--jmc-paper-deep);
}
.jmc-news-lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
.jmc-news-lead:hover .jmc-news-lead__media img { transform: scale(1.04); }
.jmc-news-lead__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .55rem;
  padding: 1.3rem 1.5rem 1.6rem;
}
.jmc-news-lead__badge {
  display: inline-block;
  background: var(--jmc-gold);
  color: var(--jmc-navy-900);
  border-radius: 3px;
  padding: .15rem .5rem;
  margin-right: .5rem;
}
.jmc-news-lead__title {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.3;
  margin: 0;
}
.jmc-news-lead__title a {
  color: var(--jmc-navy);
  text-decoration: none;
}
.jmc-news-lead__title a:hover { color: var(--jmc-gold-deep); }
.jmc-news-lead__excerpt {
  color: var(--jmc-muted);
  margin: 0;
}
.jmc-news-side {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Each rail story takes an equal share of the lead card's height, so the
   hairline dividers space themselves evenly and the two columns bottom out
   together. */
.jmc-news-side__item {
  display: flex;
  flex: 1 1 0;
  gap: .9rem;
  align-items: center;
  padding-block: .9rem;
  border-bottom: 1px solid var(--jmc-line);
}
.jmc-news-side__item:first-child { padding-top: 0; }
.jmc-news-side__item:last-child { border-bottom: 0; padding-bottom: 0; }
.jmc-news-side__thumb {
  flex: 0 0 108px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
  background: var(--jmc-paper-deep);
}
.jmc-news-side__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
.jmc-news-side__item:hover .jmc-news-side__thumb img { transform: scale(1.06); }
.jmc-news-side__thumb .jmc-news-card__placeholder { font-size: 1.4rem; }
.jmc-news-side__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.jmc-news-side__title {
  font-size: .98rem;
  line-height: 1.4;
  margin: 0;
}
.jmc-news-side__title a {
  color: var(--jmc-navy);
  text-decoration: none;
}
.jmc-news-side__title a:hover { color: var(--jmc-gold-deep); }
/* Labelled rule between the featured area and the older-stories grid. */
.jmc-news-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem) 0 1.5rem;
  font-family: var(--ff-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jmc-muted);
}
.jmc-news-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--jmc-line);
}

/* ---- Bands: admissions / alumni ------------------------------------------ */
.jmc-admission-band {
  background:
    radial-gradient(120% 180% at 100% 0%, rgba(201, 168, 76, .18), transparent 55%),
    linear-gradient(120deg, var(--jmc-navy-900), var(--jmc-navy));
  color: #fff;
  padding: clamp(2.2rem, 2rem + 2vw, 3.6rem) 0;
}
.jmc-admission-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(2rem, 4vw, 4rem);
}
.jmc-admission-band__copy {
  flex: 1 1 380px;
  max-width: 560px;
}
.jmc-admission-band h2 {
  color: #fff;
  margin: 0;
  font-size: var(--t-h2);
}

.jmc-admission-band__details {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1 1 420px;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(201, 168, 76, .3);
  border-radius: 14px;
  background: rgba(201, 168, 76, .06);
}
.jmc-admission-band--light .jmc-admission-band__details {
  border-color: #e3e8f0;
  background: #f7f9fc;
}
.jmc-admission-band__detail {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  width: 100%;
}
.jmc-admission-band__detail-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--jmc-gold-light);
  color: var(--jmc-gold-light);
  font-size: 16px;
}
.jmc-admission-band--light .jmc-admission-band__detail-icon {
  border-color: var(--jmc-home-gold);
  color: var(--jmc-home-gold);
}
.jmc-admission-band__detail span {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jmc-gold-light);
  margin-bottom: .3rem;
}
.jmc-admission-band__detail p {
  margin: 0;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.45;
}
.jmc-admission-band__detail strong { font-weight: 600; }
.jmc-admission-band--light .jmc-admission-band__detail span { color: var(--jmc-home-gold); }
.jmc-admission-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.2rem;
}
.jmc-alumni-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--jmc-home-navy-2) 0%, #00265c 60%, #002e6b 100%);
  border-top: none;
  border-bottom: none;
  padding: clamp(2.8rem, 2.2rem + 3vw, 4.4rem) 0;
  color: #fff;
}
.jmc-alumni-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 160% at 100% 0%, rgba(217, 166, 63, .16), transparent 55%);
  pointer-events: none;
}
.jmc-alumni-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.jmc-alumni-band__copy {
  position: relative;
  padding-left: 2.4rem;
}
.jmc-alumni-band__copy::before {
  content: "\201C";
  position: absolute;
  left: -.4rem;
  top: -2.2rem;
  font-family: var(--ff-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--jmc-home-gold);
  opacity: .45;
}
.jmc-alumni-band .jmc-eyebrow { color: var(--jmc-home-gold); }
.jmc-alumni-band h2 { margin-bottom: .5rem; color: #fff; }
.jmc-alumni-band__text {
  color: rgba(255, 255, 255, .78);
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
}
.jmc-alumni-band__aside {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
}
.jmc-alumni-band__note {
  color: rgba(255, 255, 255, .82);
  margin: 0 0 1.1rem;
  font-size: .92rem;
  line-height: 1.5;
}
.jmc-alumni-band__more {
  display: block;
  margin-top: .9rem;
  font-size: var(--t-sm);
  color: var(--jmc-home-gold);
}
.jmc-alumni-band__more:hover { color: #fff; }

/* ---- Chips / filters / pagination ---------------------------------------- */
.jmc-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.jmc-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .9rem;
  border: 1px solid var(--jmc-line-strong);
  border-radius: 999px;
  background: var(--jmc-surface);
  color: var(--jmc-navy);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.jmc-chip:hover { background: var(--jmc-gold-soft); color: var(--jmc-navy-900); }
.jmc-chip.is-active {
  background: var(--jmc-navy);
  border-color: var(--jmc-navy);
  color: #fff;
}
.jmc-pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.2rem;
}
.jmc-pagination__status { font-size: var(--t-sm); color: var(--jmc-muted); }

/* ---- Article (news post) --------------------------------------------------- */
.jmc-page-header--article h1.jmc-article-title {
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.4rem);
  max-width: 24ch;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.jmc-article-meta {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.jmc-page-header .jmc-article-meta,
.jmc-page-header .jmc-article-meta a { color: var(--jmc-gold-light); }
.jmc-notif-detail .jmc-article-meta { color: var(--jmc-gold-deep); }
/* Article reading layout lives in the "News article page" block at the end
   of this file (sidebar layout retired 2026-07-09). */

/* ---- Notifications table ---------------------------------------------------- */
.jmc-notif-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.jmc-notif-search {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 260px;
  max-width: 380px;
  background: var(--jmc-surface);
  border: 1px solid var(--jmc-line-strong);
  border-radius: 999px;
  padding: .45rem 1.1rem;
}
.jmc-notif-search i { color: var(--jmc-muted); }
.jmc-notif-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font-size: var(--t-sm);
  color: var(--jmc-ink);
}
.jmc-tag {
  display: inline-block;
  padding: .12rem .6rem;
  border-radius: 999px;
  background: var(--jmc-gold-soft);
  color: var(--jmc-navy-900);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jmc-notif-detail { max-width: 76ch; }

/* ---- Departments ------------------------------------------------------------- */

.jmc-dept-contact {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  align-items: center;
  font-size: var(--t-sm);
  margin-bottom: 1.6rem;
}

/* ---- Faculty profile ----------------------------------------------------------- */
.jmc-profile {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: start;
}
.jmc-profile__photo {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin-bottom: 1.1rem;
}
.jmc-profile__facts {
  background: var(--jmc-surface);
  border: 1px solid var(--jmc-line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.jmc-profile__facts p { margin-bottom: .55rem; font-size: var(--t-sm); }
.jmc-profile__facts p:last-child { margin-bottom: 0; }
.jmc-profile__facts span {
  display: block;
  font-size: var(--t-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jmc-gold-deep);
}
.jmc-profile__body { max-width: 72ch; }
.jmc-backlink {
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}

/* ---- Gallery / album cards ------------------------------------------------------ */
.jmc-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

/* ---- Custom Newsletter Cards ---- */
.jmc-newsletter-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--jmc-line, #e2e6ef);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.jmc-newsletter-card__media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--jmc-paper-deep, #f3f4f6);
  position: relative;
}
.jmc-newsletter-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jmc-newsletter-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 2.4rem;
  color: var(--jmc-line-strong);
}
.jmc-newsletter-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.jmc-newsletter-card__title {
  margin: 0 0 0.5rem;
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--jmc-navy, #001f4d);
}
.jmc-newsletter-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  font-family: var(--ff-sans);
  font-size: 0.85rem;
  color: var(--jmc-muted, #6b7280);
}
.jmc-newsletter-card__date {
  font-weight: 400;
}
.jmc-newsletter-card__issue {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.jmc-newsletter-card__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
}
.jmc-newsletter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  box-sizing: border-box;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.jmc-newsletter-btn--view {
  flex-grow: 1;
  padding: 0 1.25rem;
  background-color: var(--jmc-home-navy-2, #001f4d);
  color: #fff !important;
  border: 1px solid var(--jmc-home-navy-2, #001f4d);
}
.jmc-newsletter-btn--view:hover {
  background-color: #001236;
  border-color: #001236;
}
.jmc-newsletter-btn--view i {
  margin-right: 0.5rem;
}
.jmc-newsletter-btn--download {
  width: 44px;
  padding: 0;
  background-color: transparent;
  color: var(--jmc-home-navy-2, #001f4d) !important;
  border: 1px solid var(--jmc-home-navy-2, #001f4d);
}
.jmc-newsletter-btn--download:hover {
  background-color: rgba(0, 31, 77, 0.06);
}

/* Album photo tiles are buttons (open the lightbox) */
.jmc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .8rem;
}
.jmc-gallery-grid .jmc-photo-card {
  all: unset;
  cursor: zoom-in;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.jmc-gallery-grid .jmc-photo-card:focus-visible {
  outline: 2px solid var(--jmc-gold-deep);
  outline-offset: 2px;
}
.jmc-gallery-grid .jmc-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s var(--ease);
}
.jmc-gallery-grid .jmc-photo-card:hover img { transform: scale(1.06); }

/* ---- Prose (scraped page bodies) -------------------------------------------------- */
.jmc-prose { max-width: 100%; }
.jmc-prose h2, .jmc-prose h3 {
  margin-top: 2.1rem;
  margin-bottom: .8rem;
}
.jmc-prose h2:first-child, .jmc-prose h3:first-child { margin-top: 0; }
.jmc-prose h3 {
  font-size: var(--t-h3);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--jmc-line);
}
.jmc-prose h4 { margin-top: 1.6rem; font-size: 1.1rem; }
.jmc-prose ul, .jmc-prose ol { margin-bottom: 1.1rem; padding-left: 1.4rem; }
.jmc-prose li { margin-bottom: .35rem; }
.jmc-prose figure { margin: 1.6rem 0; }
.jmc-prose figure img,
.jmc-richtext img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.jmc-prose table,
.jmc-richtext table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  margin: 1.4rem 0;
  background: var(--jmc-surface);
}
.jmc-prose table td, .jmc-prose table th,
.jmc-richtext table td, .jmc-richtext table th {
  border: 1px solid var(--jmc-line-strong);
  padding: .6rem .9rem;
}
.jmc-prose table tr:first-child td,
.jmc-prose table th,
.jmc-richtext table tr:first-child td,
.jmc-richtext table th {
  background: var(--jmc-paper-deep);
  font-weight: 600;
  color: var(--jmc-navy);
}

/* People grids inside prose (administration page) */
.jmc-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 2rem;
}
.jmc-person {
  margin: 0;
  background: var(--jmc-surface);
  border: 1px solid var(--jmc-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.jmc-person img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 0;
  box-shadow: none;
}
.jmc-person figcaption { padding: .8rem .9rem .95rem; }
.jmc-person figcaption strong {
  display: block;
  font-family: var(--ff-display);
  color: var(--jmc-navy);
  font-size: .98rem;
  line-height: 1.3;
}
.jmc-person figcaption span {
  display: block;
  font-size: .8rem;
  color: var(--jmc-muted);
  margin-top: .15rem;
}

/* ---- Map strip ----------------------------------------------------------------------- */
.jmc-map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  filter: grayscale(.25);
}

/* ---- Responsive ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  
  .jmc-news-grid, .jmc-news-grid--index { grid-template-columns: repeat(2, 1fr); }
  .jmc-alumni-band__inner { grid-template-columns: 1fr; }
  .jmc-alumni-band__copy { padding-left: 0; }
  .jmc-alumni-band__copy::before { position: static; display: block; margin-bottom: -1.2rem; }
  .jmc-profile { grid-template-columns: 1fr; }
  .jmc-profile__photo { max-width: 320px; }
}

@media (max-width: 639.98px) {
  .jmc-topbar__links { gap: .9rem; }

  .jmc-news-grid, .jmc-news-grid--index { grid-template-columns: 1fr; }
  
  .jmc-admission-band__inner { flex-direction: column; align-items: flex-start; }

  /* Notifications feed on small screens */
  .jmc-notif-item { flex-wrap: wrap; padding: 14px 16px; }
  .jmc-notif-item__chevron { display: none; }
}

/* Standalone button usage (no Bootstrap .btn base class required). */
.btn-jmc-primary,
.btn-jmc-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.5rem;
  text-decoration: none;
  border-radius: 7px;
  font-weight: 600;
}

/* ==========================================================================
   Reference-theme adjustments (2026-07) — refinements over the mockup layer.
   ========================================================================== */

/* Clean white canvas — no paper grain. */
body::before { display: none; }

/* Serif = Fraunces everywhere the mockup layer hardcoded Georgia. */
.jmc-navbar .navbar-brand .jmc-brand-text strong,
.jmc-navbar .nav-link,
.jmc-home-kicker,
.jmc-home-hero h1,
.jmc-home-stat strong,
.jmc-home-welcome h2,
.jmc-home-why h2 {
  font-family: var(--ff-display);
}
.jmc-navbar .nav-link { font-size: 13.5px; }

/* Dark hamburger on the white navbar. */
.jmc-navbar .navbar-toggler { border-color: rgba(0, 31, 77, .35); }
.jmc-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,31,77,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Four stats instead of the mockup's five. */
.jmc-home-stats__grid { grid-template-columns: repeat(4, 1fr); }
.jmc-home-stat:first-child { border-left: 0; }

/* Hero: two CTAs side by side. */
.jmc-home-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* Welcome quick tiles are links (Courses / Facilities / Activities / Gallery). */
.jmc-home-value-grid a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 10px 4px;
  border-radius: 6px;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.jmc-home-value-grid a:hover { background: #f2f5fa; transform: translateY(-2px); }
.jmc-home-value-grid a i {
  display: block;
  margin-bottom: 8px;
  color: var(--jmc-home-gold);
  font-size: 27px;
}
.jmc-home-value-grid a span {
  display: block;
  color: var(--jmc-home-navy-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.jmc-home-value-grid a small {
  display: block;
  margin-top: 2px;
  color: var(--jmc-home-muted);
  font-weight: 500;
  font-size: 11px;
}
.jmc-home-welcome__text p { margin: 0 0 14px; color: #1f2937; font-size: 14px; line-height: 1.72; }

/* Announcements card: let content define height; button in normal flow. */

/* Light admissions strip to sit on the white canvas. */
.jmc-admission-band--light {
  background: #fff;
  color: var(--jmc-home-ink);
  border-top: 1px solid #e3e8f0;
  border-bottom: 1px solid #e3e8f0;
}
.jmc-admission-band--light h2 { color: var(--jmc-home-navy-2); }

/* Interior page header aligns with the mockup navy. */
.jmc-page-header {
  background: linear-gradient(120deg, var(--jmc-home-navy-2), #0a336f);
}

@media (max-width: 991.98px) {
  .jmc-home-hero__copy { width: 100%; transform: none; }
  .jmc-home-hero__veil {
    background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,.55) 100%);
  }
  .jmc-home-intro__grid { grid-template-columns: 1fr; }
  .jmc-home-stats__grid { grid-template-columns: repeat(2, 1fr); }
  
}
@media (max-width: 639.98px) {
  .jmc-home-stats__grid { grid-template-columns: 1fr 1fr; }
  .jmc-home-value-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hero proportions closer to the reference mockup. */
.jmc-home-hero { min-height: 420px; }
.jmc-home-hero__inner { min-height: 420px; }
.jmc-map { background: #eef2f7; }

/* ==========================================================================
   Scale refinements (2026-07) — the mockup layer was transcribed at the
   reference image's 1024px pixel scale, which reads undersized on a real
   desktop viewport: narrow canvas, squat hero, small type. This layer brings
   the desktop rhythm up to the reference's *proportions* instead.
   ========================================================================== */

/* A flat max-width leaves ever-growing side gutters as the viewport gets
   wider (1200px on a 1920 screen = 360px of dead space per side). Scale the
   canvas with the viewport instead, capped so text lines don't run too long. */
.container { width: min(90%, 1440px); max-width: 1440px; margin-inline: auto; }

/* Four feature cards, not the mockup's five — no dead column on the right. */

@media (min-width: 992px) {
  /* Top bar + navbar */
  .jmc-topbar { font-size: 14px; }
  .jmc-topbar__links { min-height: 36px; }
  .jmc-navbar,
  .jmc-navbar.is-scrolled { padding: 14px 0; }
  .jmc-navbar .navbar-brand img,
  .jmc-navbar.is-scrolled .navbar-brand img { height: 54px; }
  .jmc-navbar .nav-link { font-size: 15px; padding: 8px 11px; }

  /* Hero */
  .jmc-home-hero,
  .jmc-home-hero__inner { min-height: 480px; }
  .jmc-home-hero__copy { width: 46%; transform: translateY(8px); }
  .jmc-home-kicker { font-size: 19px; margin-bottom: 20px; }
  .jmc-home-hero h1 { font-size: 50px; margin-bottom: 20px; }
  .jmc-home-hero__lead { max-width: 440px; margin-bottom: 28px; font-size: 17px; line-height: 1.6; }

  /* Buttons: one consistent height (the mockup layer left the outline
     variant 10px shorter than the primary next to it). */
  .jmc-home-btn { min-height: 50px; padding: 0 26px; font-size: 15px; }
  .jmc-home-btn--outline { min-height: 50px; }

  /* Stats band */
  .jmc-home-stats__grid { min-height: 116px; }
  .jmc-home-stat { padding: 24px 28px; gap: 18px; }
  .jmc-home-stat i { font-size: 40px; }
  .jmc-home-stat strong { font-size: 30px; }
  .jmc-home-stat span { margin-top: 6px; font-size: 13.5px; }

  /* Welcome / intro */
  .jmc-home-intro__grid { gap: 44px; }
  .jmc-home-welcome { padding: 56px 0 48px; }
  .jmc-home-welcome h2 { font-size: 30px; margin-bottom: 26px; }
  
  .jmc-home-welcome p,
  .jmc-home-welcome__text p { font-size: 15.5px; line-height: 1.75; }
  .jmc-home-welcome__text p { margin-bottom: 16px; }
  .jmc-home-value-grid { gap: 22px; }
  .jmc-home-value-grid a { padding: 12px 6px; }
  .jmc-home-value-grid a i { margin-bottom: 10px; font-size: 31px; }
  .jmc-home-value-grid a span { font-size: 13.5px; }
  .jmc-home-value-grid a small { margin-top: 3px; font-size: 12px; }
  .jmc-home-campus-card { padding-top: 56px; }
  .jmc-home-campus-card img { height: 330px; }

  /* Announcements card */

  /* Departments · Life at JMC · News & Events panels */
  .jmc-home-panels { padding-bottom: 0; }

  .jmc-home-panel__head > a { font-size: 12.5px; }
  .jmc-home-event { padding: 12px 0 !important; }
  .jmc-home-event__media { width: 130px; height: 100%; min-height: 80px; align-self: center; }
  .jmc-home-event__title { font-size: 14.5px; line-height: 1.35; }
  
  .jmc-home-notice-item__title { font-size: 15px; }

  /* Why Choose JMC band responsive */
  .jmc-home-why h2 { font-size: 32px; }

  /* Footer rhythm */
  .jmc-footer { padding-top: 48px; }
  .jmc-footer__main { gap: 36px; padding-bottom: 40px; }
  .jmc-footer__bottom { padding: 20px 0; font-size: 13px; }
}

/* ==========================================================================
   Softer edges (2026-07) — the mockup layer's buttons and boxed elements
   used near-sharp 3–6px corners; round them to match the site's --radius /
   --radius-sm scale (8px / 12px) used elsewhere, so the home page reads
   consistently "softly rounded" rather than sharp.
   ========================================================================== */
.jmc-home-btn { border-radius: var(--radius-sm); }

.jmc-home-campus-card img { border-radius: var(--radius); }

.jmc-home-value-grid a { border-radius: 10px; }

/* ==========================================================================
   Beti Bachao Beti Padhao strip (2026-07) — mandatory Govt. of India
   initiative badge, placed just below the hero.
   ========================================================================== */
.jmc-bbbp {
  background: var(--jmc-paper-deep);
  border-bottom: 1px solid var(--jmc-line);
}

.jmc-bbbp__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
}

.jmc-bbbp__inner img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.jmc-bbbp__inner p {
  margin: 0;
  color: var(--jmc-muted);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.jmc-bbbp__inner strong {
  color: var(--jmc-navy);
  font-family: var(--ff-display);
}

@media (max-width: 575.98px) {
  .jmc-bbbp__inner {
    gap: 12px;
  }
  .jmc-bbbp__inner img {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   Side breathing room (2026-07) — Bootstrap's default .container gutter
   (12px each side) reads cramped against the site's generous vertical
   rhythm; give every page more air on the left/right regardless of
   viewport width.
   ========================================================================== */
.container {
  padding-inline: clamp(20px, 4vw, 56px);
}

/* News / blog index — extra breathing room on left and right */
.jmc-section > .container {
  padding-inline: clamp(32px, 7vw, 96px);
}

/* ==========================================================================
   Button weight (2026-07) — every button class was set to 700 (or the
   .btn-jmc-* family to 600); bold reads heavy/shouty across a page with
   many CTAs. Drop to regular weight everywhere buttons appear.
   ========================================================================== */
.btn-jmc-primary,
.btn-jmc-outline,
.jmc-home-btn {
  font-weight: 400;
}

/* ==========================================================================
   UI refinement pass (2026-07) — balance, spacing rhythm, type ratio and
   weight. Appended last so it wins the cascade; earlier layers untouched.
   ========================================================================== */

/* ---- Weight ladder --------------------------------------------------------
   700 was carrying almost everything — nav, kicker, list rows, news titles —
   which flattens hierarchy and reads heavy. Reserve 700 for real headings;
   drop supporting/interface text to 600. (Home notification titles sit at
   the base layer's 500 — user-chosen medium weight, 2026-07-09.) */
.jmc-navbar .nav-link,
.jmc-home-panel__head > a,
.jmc-home-event__title {
  font-weight: 600;
}

/* ---- Hero kicker → eyebrow ------------------------------------------------
   Was 19px/700 navy, competing head-to-head with the H1. Recast it as the
   site's quiet gold, letter-spaced eyebrow (matching the .jmc-eyebrow used in
   the admissions/alumni bands) so the headline clearly leads. */
.jmc-home-kicker {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jmc-gold-deep);
  line-height: 1.15;
  margin-bottom: 16px;
}

/* ---- Hero headline: a touch more air between the two stacked lines --------- */
.jmc-home-hero h1 { line-height: 1.1; letter-spacing: -.01em; }

/* ---- Hero veil: hold the white further right so the photo's left edge no
   longer shows as a hard vertical seam under the copy. Desktop only — the
   mobile veil (full-width copy) is tuned separately above. -------------------- */
@media (min-width: 992px) {
  .jmc-home-hero__veil {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.96) 40%,
        rgba(255,255,255,.72) 56%,
        rgba(255,255,255,.18) 76%,
        rgba(255,255,255,0)   90%),
      linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.06));
  }
}

/* ---- Intro triptych: resolve the ragged column heights --------------------
   The middle campus photo ended well above both the text column and the navy
   notifications card, leaving a large void. Stretch all three columns to a
   shared height so the photo and the card land on one clean bottom line. */
.jmc-home-intro__grid { align-items: stretch; }
.jmc-home-campus-card { display: flex; flex-direction: column; }
.jmc-home-campus-card img { flex: 1 1 auto; height: 100%; min-height: 320px; }

@media (min-width: 992px) {
  .jmc-home-campus-card img { min-height: 360px; }
}

/* ---- Panels: give "News & Events" the same gold rule + rhythm as its
   siblings (its heading lives in a flex head, which had swallowed the spacing). */
.jmc-home-panel__head { align-items: baseline; margin-bottom: 24px; }
.jmc-home-panel__head h2 { margin-bottom: 0; }

/* ==========================================================================
   Interior document pages (2026-07-07) — the page-header title rendered at
   full hero scale (--t-h1, up to ~3.7rem), which overwhelms interior pages
   and long titles ("Admission To BA 1 Course"). And once .jmc-prose was
   centered, the left-aligned header title no longer shared an edge with the
   centered body, so the page read lopsided. Fix both: bring the interior
   title down to an appropriate size, and — on prose pages only — put the
   header and the body in one centered reading column so title + content align
   and the page reads as a single balanced document.
   ========================================================================== */

/* Interior title: sized for a page header, not a homepage hero. */
.jmc-page-header h1 {
  font-size: clamp(1.8rem, 1.35rem + 1.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* ==========================================================================
   Title / display face → Lora (2026-07-07)
   ========================================================================== */
:root {
  --ff-display: 'Lora', Georgia, serif;
}

/* Primary navigation is UI chrome, not a title — keep it on the sans face so
   the menu stays crisp while headings become serif. */
.jmc-navbar .nav-link { font-family: var(--ff-sans); }

/* Serif display sits optically smaller/tighter than the outgoing sans; drop the
   negative tracking the sans headline needed so Minion breathes at its design
   width. */
.jmc-home-hero h1,
.jmc-page-header h1 { letter-spacing: 0; }

/* ==========================================================================
   Department directory (2026-07-07) — /departments/ rebuilt as a ledger:
   a left identity rail per department (name, gold rule, contact, count)
   with the faculty as circular portraits on the right. Circles unify the
   mismatched source photos (wide office shots) that the old 4:4.6 card
   crop mangled; the rail absorbs the dead right half the old auto-fill
   grid left behind. The Head of Department carries an offset gold ring.
   .jmc-roster / .jmc-roster__person are shared with the department detail
   page. (Named "roster" — .jmc-person already belongs to the administration
   page's card grid above, and .jmc-person img outranks any __photo class.)
   ========================================================================== */

/* Jump index under the page header — six departments make a long scroll. */
.jmc-deptdir-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1rem;
  padding-bottom: 2rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--jmc-line);
}
.jmc-deptdir-index a {
  font-family: var(--ff-sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jmc-navy);
  text-decoration: none;
  padding: .5rem 1.25rem;
  background: var(--jmc-paper-deep);
  border: 1px solid var(--jmc-line-strong);
  border-radius: 100px;
  transition: all .2s var(--ease);
}
.jmc-deptdir-index a:hover,
.jmc-deptdir-index a:focus-visible {
  color: #ffffff;
  background: var(--jmc-navy);
  border-color: var(--jmc-navy);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* One department = identity rail + roster. */
.jmc-deptdir {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-block: clamp(2.2rem, 1.8rem + 1.6vw, 3.4rem);
  scroll-margin-top: 120px;
}
.jmc-deptdir + .jmc-deptdir { border-top: 1px solid var(--jmc-line); }

.jmc-deptdir__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.jmc-deptdir__rail h2 {
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  line-height: 1.22;
  margin: 0;
}
.jmc-deptdir__rail h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--jmc-gold);
  margin: .8rem auto 0;
}
.jmc-deptdir__tagline {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--jmc-muted);
  margin: .9rem 0 0;
}
.jmc-deptdir__meta {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  font-size: var(--t-sm);
  color: var(--jmc-muted);
}
.jmc-deptdir__meta li {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  min-width: 0;
}
.jmc-deptdir__meta i { color: var(--jmc-gold-deep); }
.jmc-deptdir__meta a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.jmc-deptdir__meta a:hover { color: var(--jmc-gold-deep); }
.jmc-deptdir__about {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.3rem;
  font-family: var(--ff-sans);
  font-size: .92rem;
  font-weight: 600;
  color: var(--jmc-navy);
  text-decoration: none;
}
.jmc-deptdir__about i { transition: transform .2s var(--ease); }
.jmc-deptdir__about:hover { color: var(--jmc-gold-deep); }
.jmc-deptdir__about:hover i { transform: translateX(4px); }

/* Roster of circular portraits. */
.jmc-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 280px);
  justify-content: center;
  gap: 3.5rem 3.5rem;
  align-content: start;
}
.jmc-roster__empty { color: var(--jmc-muted); }

.jmc-roster__person {
  position: relative;
  text-align: center;
  padding: .3rem .2rem;
}
.jmc-roster__photo {
  display: block;
  width: clamp(180px, 12vw + 100px, 240px);
  height: auto; /* beat the height attribute so aspect-ratio can bite */
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  box-shadow:
    0 0 0 1px var(--jmc-line-strong),
    0 14px 26px -16px rgba(10, 20, 44, .4);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.jmc-roster__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jmc-paper-deep);
  color: var(--jmc-line-strong);
  font-size: 2.9rem;
}
/* Head of Department: an offset gold ring — the one loud mark per roster. */
.jmc-roster__person--hod .jmc-roster__photo {
  box-shadow:
    0 0 0 3px var(--jmc-surface),
    0 0 0 5px var(--jmc-gold),
    0 14px 26px -16px rgba(10, 20, 44, .4);
}
.jmc-roster__name {
  font-size: 1rem;
  line-height: 1.3;
  margin: .85rem 0 .15rem;
}
.jmc-roster__name a {
  color: inherit;
  text-decoration: none;
}
.jmc-roster__role {
  font-family: var(--ff-sans);
  font-size: var(--t-sm);
  color: var(--jmc-muted);
  line-height: 1.4;
  margin: 0;
}
.jmc-roster__cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .45rem;
  font-family: var(--ff-sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--jmc-gold-deep);
}
.jmc-roster__cta i { transition: transform .2s var(--ease); }

/* Whole tile is clickable (stretched-link); echo it on hover/focus. */
.jmc-roster__person:hover .jmc-roster__photo {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 2px var(--jmc-gold-deep),
    0 18px 30px -16px rgba(10, 20, 44, .45);
}
.jmc-roster__person--hod:hover .jmc-roster__photo {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px var(--jmc-surface),
    0 0 0 5px var(--jmc-gold-deep),
    0 18px 30px -16px rgba(10, 20, 44, .45);
}
.jmc-roster__person:hover .jmc-roster__name,
.jmc-roster__person:focus-within .jmc-roster__name { color: var(--jmc-gold-deep); }
.jmc-roster__person:hover .jmc-roster__cta i { transform: translateX(3px); }
.jmc-roster__person:focus-within {
  outline: 2px solid var(--jmc-gold-deep);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.jmc-roster__person .stretched-link:focus { outline: none; }

.jmc-roster--page { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 767.98px) {
  .jmc-deptdir { grid-template-columns: 1fr; gap: 1.5rem; }
  .jmc-deptdir-index { gap: .4rem 1.2rem; }
  .jmc-roster { grid-template-columns: repeat(auto-fit, 200px); gap: 2.5rem 2rem; }
  .jmc-roster__photo { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .jmc-roster__photo,
  .jmc-roster__cta i,
  .jmc-deptdir__about i { transition: none; }
  .jmc-roster__person:hover .jmc-roster__photo,
  .jmc-roster__person--hod:hover .jmc-roster__photo { transform: none; }
}

/* ==========================================================================
   Secondary (top utility) bar (2026-07-07) — the topbar read too small/cramped.
   Give it a little more height, larger link text, and bigger social icons.
   ========================================================================== */
/* Phones keep the original compact topbar — the enlarged links + icons below
   otherwise force the row wider than a ~390px viewport and push the whole
   layout into horizontal overflow. Enlarge only from tablet up. */
@media (min-width: 576px) {
  .jmc-topbar { font-size: 13px; }
  .jmc-topbar .container { min-height: 46px; }
  .jmc-topbar__social a { width: 30px; height: 30px; font-size: .92rem; }
}
@media (min-width: 992px) {
  .jmc-topbar { font-size: 14.5px; }
  .jmc-topbar .container { min-height: 50px; }
  .jmc-topbar__links { gap: 1.6rem; }
  .jmc-topbar__social a { width: 32px; height: 32px; font-size: 1rem; }
}

/* ==========================================================================
   Hover dropdowns (2026-07-07) — jmc.js opens navbar dropdowns on
   mouseenter at desktop widths. Bootstrap leaves a .125rem gap between the
   toggle and the menu; crossing that gap fires mouseleave and snaps the
   menu shut, so close it up where hover-open is active.
   ========================================================================== */
@media (min-width: 992px) and (hover: hover) {
  .jmc-navbar .dropdown-menu { margin-top: 0; }
}

/* ==========================================================================
   Page-transition skeleton (2026-07-07) — #jmcSkeleton (base.html include)
   is a fixed overlay sketching the page shell: nav strip, navy header band,
   text lines and a card row. jmc.js toggles .is-active on internal-link
   clicks; the next document load discards it naturally.
   ========================================================================== */
.jmc-skeleton {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  overflow: hidden;
  background: #fff;
}
.jmc-skeleton.is-active { display: block; animation: jmc-skel-in .18s var(--ease); }
@keyframes jmc-skel-in { from { opacity: 0; } to { opacity: 1; } }

.jmc-skeleton__bone {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #e9ebf0;
}
.jmc-skeleton__bone::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  animation: jmc-shimmer 1.3s infinite;
}
@keyframes jmc-shimmer { to { transform: translateX(100%); } }

/* Nav strip */
.jmc-skeleton__nav { border-bottom: 1px solid var(--jmc-line); }
.jmc-skeleton__nav-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 18px;
}
.jmc-skeleton__bone--logo { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }
.jmc-skeleton__bone--brand { width: min(240px, 40%); height: 18px; }
.jmc-skeleton__nav-links {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 22px;
}
.jmc-skeleton__nav-links .jmc-skeleton__bone { width: 58px; height: 12px; }
.jmc-skeleton__nav-links .jmc-skeleton__bone--btn { width: 108px; height: 40px; border-radius: var(--radius-sm); }
@media (min-width: 992px) {
  .jmc-skeleton__nav-links { display: flex; }
}

/* Navy header band, echoing .jmc-page-header */
.jmc-skeleton__hero {
  background: var(--jmc-home-navy-2, #001f4d);
  padding: clamp(36px, 6vw, 64px) 0 clamp(28px, 5vw, 52px);
  margin-bottom: clamp(28px, 5vw, 56px);
}
.jmc-skeleton__hero .jmc-skeleton__bone {
  background: rgba(255, 255, 255, .13);
}
.jmc-skeleton__hero .jmc-skeleton__bone::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
}
.jmc-skeleton__bone--crumb { width: 180px; height: 12px; margin-bottom: 22px; }
.jmc-skeleton__bone--title { width: min(380px, 60%); height: 34px; }

/* Body: a few text lines and a row of card ghosts */
.jmc-skeleton__body .jmc-skeleton__bone--line { height: 14px; margin-bottom: 14px; }
.jmc-skeleton__body .jmc-skeleton__bone--line:nth-of-type(1) { width: 46%; }
.jmc-skeleton__body .jmc-skeleton__bone--line:nth-of-type(2) { width: 88%; }
.jmc-skeleton__body .jmc-skeleton__bone--line:nth-of-type(3) { width: 72%; }
.jmc-skeleton__body .jmc-skeleton__bone--line:nth-of-type(4) { width: 84%; }
.jmc-skeleton__body .jmc-skeleton__bone--line:nth-of-type(5) { width: 58%; }
.jmc-skeleton__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
  margin: 26px 0 30px;
}
.jmc-skeleton__bone--card { height: 170px; border-radius: var(--radius); }

@media (prefers-reduced-motion: reduce) {
  .jmc-skeleton.is-active { animation: none; }
  .jmc-skeleton__bone::after { animation: none; }
}

/* ==========================================================================
   Gallery — editorial photo wall (2026-07-07)
   The old gallery was timid white cards in a plain grid with a sea of empty
   space. Rebuilt so the photography leads: a large featured "moment" tile
   plus a tight grid of full-bleed covers with the title + count/year as an
   overlay. Five albums pack cleanly into a 4-col wall with the first spanning
   2x2. Adapts (dense flow) to any album count.
   ========================================================================== */

.jmc-albumwall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 14px;
}

.jmc-albumtile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  background: var(--jmc-home-navy-2);
  box-shadow: 0 1px 2px rgba(5, 20, 44, .06), 0 14px 30px -20px rgba(5, 20, 44, .4);
  isolation: isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.jmc-albumtile--feature {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.jmc-albumtile:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(5, 20, 44, .08), 0 26px 46px -22px rgba(5, 20, 44, .5);
}
.jmc-albumtile:focus-visible {
  outline: 3px solid var(--jmc-home-gold);
  outline-offset: 3px;
}

.jmc-albumtile__media { position: absolute; inset: 0; }
.jmc-albumtile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.jmc-albumtile:hover .jmc-albumtile__media img { transform: scale(1.06); }
.jmc-albumtile__ph {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 2.6rem; color: rgba(255, 255, 255, .3);
}

/* Bottom scrim + text. A thin gold rule slides in on hover as the accent. */
.jmc-albumtile__overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 20px 18px;
  background: linear-gradient(to top,
    rgba(0, 15, 40, .88) 0%, rgba(0, 15, 40, .5) 32%, rgba(0, 15, 40, 0) 62%);
}
.jmc-albumtile__overlay::before {
  content: "";
  position: absolute; left: 20px; bottom: 0;
  width: 34px; height: 3px;
  background: var(--jmc-home-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.jmc-albumtile:hover .jmc-albumtile__overlay::before,
.jmc-albumtile:focus-visible .jmc-albumtile__overlay::before { transform: scaleX(1); }

.jmc-albumtile__meta {
  font-family: var(--ff-sans);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--jmc-home-gold);
  margin-bottom: .45rem;
}
.jmc-albumtile__title {
  font-family: var(--ff-display);
  font-size: 1.15rem; line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 10, 30, .4);
}
.jmc-albumtile--feature .jmc-albumtile__title {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem);
}
.jmc-albumtile__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .55rem;
  font-family: var(--ff-sans);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.jmc-albumtile__cta i { color: var(--jmc-home-gold); transition: transform .2s var(--ease); }
.jmc-albumtile:hover .jmc-albumtile__cta,
.jmc-albumtile:focus-visible .jmc-albumtile__cta { opacity: 1; transform: none; }
.jmc-albumtile:hover .jmc-albumtile__cta i { transform: translateX(3px); }

/* Tablet: two columns, feature becomes a wide banner across the top. */
@media (max-width: 991.98px) {
  .jmc-albumwall { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .jmc-albumtile--feature { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
  .jmc-albumtile__cta { opacity: 1; transform: none; }   /* no hover on touch */
  .jmc-albumtile__overlay::before { transform: scaleX(1); }
}
/* Phone: single column stack. */
@media (max-width: 575.98px) {
  .jmc-albumwall { grid-template-columns: 1fr; }
  .jmc-albumtile { aspect-ratio: 3 / 2; }
  .jmc-albumtile--feature { aspect-ratio: 3 / 2; }
}

/* ---- Album detail: masonry so photos show uncropped at their own heights -- */
.jmc-gallery-grid {
  display: block;
  column-count: 3;
  column-gap: 12px;
}
.jmc-gallery-grid .jmc-photo-card {
  aspect-ratio: auto;
  width: 100%;
  margin: 0 0 12px;
  break-inside: avoid;
  border-radius: 12px;
}
.jmc-gallery-grid .jmc-photo-card img { height: auto; }
@media (max-width: 767.98px) { .jmc-gallery-grid { column-count: 2; } }
@media (max-width: 479.98px) { .jmc-gallery-grid { column-count: 1; } }

/* ==========================================================================
   Sticky main navbar (2026-07-07) — the slim navy topbar scrolls away and the
   white main navbar pins to the top. jmc.js already adds .is-scrolled past
   24px; use it to lift the bar with a shadow once it's floating.
   ========================================================================== */
.jmc-navbar,
.jmc-navbar.is-scrolled {
  position: sticky;
  top: 0;
  z-index: 1030;
}
.jmc-navbar.is-scrolled {
  box-shadow: 0 4px 20px rgba(8, 25, 60, .14);
}

/* ==========================================================================
   Gallery header + scalable album grid + home preview (2026-07-07)
   - .jmc-galhead: a distinct, centered gallery page header (replaces the
     generic left banner on gallery pages) with a faint contact-sheet dot grid.
   - .jmc-albumgrid: a uniform auto-fill grid for /gallery that scales to any
     number of albums (the featured 2x2 wall only packs nicely at exactly 5).
   - .jmc-home-gallery: the 5-album preview wall on the home page.
   ========================================================================== */

/* ---- Gallery header (centered, modern) ----------------------------------- */
.jmc-galhead {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: clamp(2.8rem, 2rem + 3vw, 4.6rem) 0 clamp(2.4rem, 1.6rem + 2.6vw, 4rem);
  background:
    radial-gradient(90% 130% at 50% -25%, rgba(217, 166, 63, .2), transparent 60%),
    linear-gradient(160deg, #06275a 0%, #001f4d 55%, #00112e 100%);
}
.jmc-galhead::before {                       /* faint contact-sheet dot grid */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000, transparent 78%);
          mask-image: radial-gradient(120% 85% at 50% 0%, #000, transparent 78%);
  pointer-events: none;
}
.jmc-galhead::after {                        /* centered gold rule at the base */
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 96px; height: 3px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--jmc-home-gold), transparent);
}
.jmc-galhead__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.jmc-galhead__eyebrow {
  font-family: var(--ff-sans);
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--jmc-home-gold);
  line-height: 1.15;
  margin: 0 0 .55rem;
}
.jmc-galhead h1 {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  line-height: 1.08; color: #fff; margin: 0;
}
.jmc-galhead__sub {
  max-width: 75ch; margin: .95rem auto 0;
  color: rgba(255, 255, 255, .74); font-size: 1rem; line-height: 1.5;
}
/* Breadcrumb, centered and re-coloured for this header. */
.jmc-galhead .breadcrumb {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin-top: 1rem; margin-bottom: 0; font-size: .82rem;
}
.jmc-galhead .breadcrumb-item,
.jmc-galhead .breadcrumb-item a { color: rgba(255, 255, 255, .62); text-decoration: none; font-weight: 500; }
.jmc-galhead .breadcrumb-item a:hover { color: var(--jmc-home-gold); }
.jmc-galhead .breadcrumb-item.active { color: var(--jmc-home-gold); }
.jmc-galhead .breadcrumb-item + .breadcrumb-item::before { content: "\27f6"; color: rgba(255, 255, 255, .32); padding: 0 .5rem; }

/* ---- Scalable album grid (/gallery) -------------------------------------- */
.jmc-albumgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.jmc-albumgrid .jmc-albumtile { aspect-ratio: 4 / 3; }
@media (max-width: 991.98px) {
  .jmc-albumgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .jmc-albumgrid { grid-template-columns: 1fr; }
  .jmc-albumgrid .jmc-albumtile { aspect-ratio: 3 / 2; }
}

/* ---- Home gallery preview ------------------------------------------------- */
.jmc-home-gallery { background: #fff; padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.jmc-home-gallery__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding-top: clamp(2.75rem, 1.8rem + 3vw, 4.25rem);
  margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
}
.jmc-home-gallery__head .jmc-eyebrow { margin-bottom: .55rem; }
.jmc-home-gallery h2 {
  font-family: var(--ff-display);
  color: var(--jmc-home-navy-2);
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem);
  line-height: 1.1; margin: 0;
}
.jmc-home-gallery__all {
  display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
  font-family: var(--ff-sans); font-size: .88rem; font-weight: 600; letter-spacing: .01em;
  color: var(--jmc-home-navy-2); text-decoration: none; white-space: nowrap;
  padding-bottom: .3rem;
}
.jmc-home-gallery__all i { color: var(--jmc-home-gold); transition: transform .2s var(--ease); }
.jmc-home-gallery__all:hover i { transform: translateX(3px); }
@media (max-width: 575.98px) {
  .jmc-home-gallery__head { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* Contact page map gets more room than the 340px strip elsewhere. */
.jmc-map--contact iframe { height: clamp(380px, 52vh, 500px); }

/* ==========================================================================
   Editorial Section Ledger Page Layout (2026-07-07)
   ========================================================================== */
.jmc-editorial-quote-box {
  background: var(--jmc-paper-deep);
  border: 1px solid var(--jmc-line);
  border-left: 4px solid var(--jmc-gold);
  padding: 40px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.jmc-quote-decorator {
  font-family: 'Lora', Georgia, serif;
  font-size: 120px;
  color: var(--jmc-gold-soft);
  position: absolute;
  top: -20px;
  left: 20px;
  line-height: 1;
  z-index: 1;
  user-select: none;
}
.jmc-quote-text {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  color: var(--jmc-navy);
  font-style: italic;
  position: relative;
  z-index: 2;
  margin-bottom: 15px;
  line-height: 1.5;
}
.jmc-quote-author {
  font-family: var(--ff-sans);
  font-size: var(--t-eyebrow);
  color: var(--jmc-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.jmc-section-ledger {
  margin-top: 56px;
}
.jmc-ledger-rail {
  position: sticky;
  top: 100px;
}
.jmc-ledger-title {
  font-family: var(--ff-display);
  font-size: 2.1rem;
  color: var(--jmc-navy);
  font-weight: 600;
  margin-bottom: 1rem;
}
.jmc-ledger-desc {
  color: var(--jmc-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.jmc-ledger-divider {
  width: 48px;
  height: 2px;
  background: var(--jmc-gold);
}

.jmc-ledger-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.jmc-ledger-card {
  display: flex;
  gap: 32px;
  background: var(--jmc-surface);
  border: 1px solid var(--jmc-line);
  padding: 32px;
  border-radius: var(--radius);
  transition: border-color 0.28s var(--ease), box-shadow 0.28s var(--ease), transform 0.28s var(--ease);
}
.jmc-ledger-card:hover {
  border-color: var(--jmc-gold-light);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.jmc-ledger-card__num {
  font-family: var(--ff-display);
  font-size: 2rem;
  color: var(--jmc-gold-deep);
  font-weight: 600;
  opacity: 0.6;
  line-height: 1;
}
.jmc-ledger-card__body {
  flex-grow: 1;
}
.jmc-ledger-card__title {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  color: var(--jmc-navy);
  margin: 0 0 8px;
  font-weight: 600;
  transition: color 0.2s ease;
}
.jmc-ledger-card:hover .jmc-ledger-card__title {
  color: var(--jmc-gold-deep);
}
.jmc-ledger-card__text {
  color: var(--jmc-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
  line-height: 1.6;
}
.jmc-ledger-card__link {
  font-family: var(--ff-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--jmc-navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}
.jmc-ledger-card__link .jmc-arrow {
  transition: transform 0.2s var(--ease);
}
.jmc-ledger-card:hover .jmc-ledger-card__link {
  color: var(--jmc-gold-deep);
}
.jmc-ledger-card:hover .jmc-ledger-card__link .jmc-arrow {
  transform: translateX(4px);
}

@media (max-width: 991.98px) {
  .jmc-ledger-card {
    gap: 20px;
    padding: 24px;
  }
  .jmc-ledger-rail {
    position: static;
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   Editorial Sidebar Page Layout (2026-07-07)
   ========================================================================== */
.jmc-page-intro-box {
  background: var(--jmc-paper-deep);
  border-left: 3px solid var(--jmc-gold);
  padding: 20px 24px;
  border-radius: 4px;
}
.jmc-page-intro-lead {
  font-family: var(--ff-sans);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--jmc-navy);
  margin-bottom: 0;
}

.text-gold {
  color: var(--jmc-gold);
}

/* ==========================================================================
   Annual Events Page (2026-07-07)
   ========================================================================== */

/* ==========================================================================
   Editorial About Us Page Custom Styles (2026-07-07)
   ========================================================================== */
.jmc-about-hero {
  background: linear-gradient(165deg, var(--jmc-navy-900) 0%, var(--jmc-navy) 100%);
  padding: 80px 0;
  border-bottom: 3px solid var(--jmc-gold);
  position: relative;
  overflow: hidden;
}
.jmc-about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 L100 100 M100 0 L0 100' stroke='rgba(201,168,76,0.03)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}
.jmc-about-hero__logo-wrapper {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s var(--ease);
}
.jmc-about-hero__logo-wrapper:hover {
  transform: rotate(5deg) scale(1.04);
}
.jmc-about-hero__logo {
  width: 100px;
  height: auto;
}
.jmc-about-hero__eyebrow {
  font-family: var(--ff-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 0.8rem;
}
.jmc-about-hero__title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 1.8rem + 2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
.jmc-about-hero__lead {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--ff-sans);
  max-width: 70ch;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Sidebar grid (Value-grid replica) */

.jmc-about-value-card {
  background: var(--jmc-surface, #fff);
  border: 1px solid var(--jmc-line, rgba(0,0,0,0.06));
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--jmc-navy);
  text-decoration: none !important;
  transition: all 0.28s var(--ease);
}
.jmc-about-value-card i {
  margin-bottom: 0 !important;
}
.jmc-about-value-card:hover {
  border-color: var(--jmc-gold);
  background: #fffdf7;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -15px rgba(201, 168, 76, 0.15);
}

/* Feature link cards list */
.jmc-about-feature-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #f5f5f5;
  border: none;
  border-radius: var(--radius-sm);
  padding: 28px 20px;
  color: var(--jmc-navy) !important;
  transition: all 0.26s var(--ease);
}
.jmc-about-feature-card__icon {
  font-size: 1.6rem;
  color: var(--jmc-gold-deep);
  display: flex;
  align-items: center;
}
.jmc-about-feature-card__body {
  flex-grow: 1;
}
.jmc-about-feature-card__body h4 {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}
.jmc-about-feature-card__body p {
  color: var(--jmc-muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
}
.jmc-about-feature-card__arrow {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--jmc-gold-deep);
  opacity: 0.85;
  transition: transform 0.2s var(--ease);
}
.jmc-about-feature-card:hover {
  background: #ebebeb;
  transform: translateY(-2px);
}
.jmc-about-feature-card:hover .jmc-about-feature-card__arrow {
  transform: translateX(4px);
  opacity: 1;
}

@media (max-width: 575.98px) {
  
  .jmc-about-hero {
    padding: 50px 0;
  }
}

/* Custom Vision & Mission Cards in About Page (Flat, borderless & distinct colors) */
.jmc-about-vision-card,
.jmc-about-mission-card {
  position: relative;
  padding: 48px;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 40px;
  border: none;
  box-shadow: none;
}
.jmc-about-vision-card {
  background: #fbf6ea; /* Very soft warm gold tint */
}
.jmc-about-mission-card {
  background: #f1f6fa; /* Very soft cool blue tint */
}

.jmc-about-card-quote-icon {
  font-size: 72px;
  position: absolute;
  right: 24px;
  bottom: 0px;
  line-height: 1;
  opacity: 0.08;
  pointer-events: none;
  font-family: 'Lora', Georgia, serif;
}
.jmc-about-vision-card .jmc-about-card-quote-icon {
  color: var(--jmc-gold);
}
.jmc-about-mission-card .jmc-about-card-quote-icon {
  color: var(--jmc-navy);
}

.jmc-about-card-title {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--jmc-navy);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.jmc-about-vision-card .jmc-about-card-title {
  color: var(--jmc-gold-deep);
}
.jmc-about-vision-card .jmc-about-card-title::before {
  content: "👁";
  font-size: 1.3rem;
  opacity: 0.9;
}
.jmc-about-mission-card .jmc-about-card-title::before {
  content: "🎯";
  font-size: 1.3rem;
  opacity: 0.9;
}

.jmc-about-card-content {
  font-family: var(--ff-sans);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--jmc-ink);
  margin: 0;
}

@media (max-width: 767.98px) {
  .jmc-about-vision-card,
  .jmc-about-mission-card {
    padding: 24px;
  }
}

/* ==========================================================================
   Infrastructure & Facilities Page — Premium Layout (2026-07-07)
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.jmc-infra-hero {
  background: linear-gradient(160deg, var(--jmc-navy-900, #06122e) 0%, var(--jmc-navy) 100%);
  position: relative;
  overflow: hidden;
}
.jmc-infra-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(201,168,76,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.jmc-infra-hero__content-wrap {
  padding: 80px 0 0;
}
.jmc-infra-hero__eyebrow {
  font-family: var(--ff-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--jmc-gold);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.jmc-infra-hero__title {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 2rem + 2.5vw, 3.6rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.jmc-infra-hero__sub {
  color: rgba(255,255,255,0.75);
  font-size: 1.1rem;
  max-width: 60ch;
  line-height: 1.65;
  font-family: var(--ff-sans);
}
.jmc-infra-hero .breadcrumb-item,
.jmc-infra-hero .breadcrumb-item a {
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem;
  text-decoration: none;
  font-family: var(--ff-sans);
}
.jmc-infra-hero .breadcrumb-item a:hover { color: var(--jmc-gold); }
.jmc-infra-hero .breadcrumb-item.active { color: rgba(255,255,255,0.7); }
.jmc-infra-hero .breadcrumb-item + .breadcrumb-item::before {
  content: "⟶";
  color: rgba(255,255,255,0.2);
}

/* Stat Bar */
.jmc-infra-hero__stat-bar {
  margin-top: 56px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(8px);
  padding: 22px 0;
}
.jmc-infra-hero__stats {
  display: flex;
  gap: 0;
  justify-content: space-around;
  flex-wrap: wrap;
}
.jmc-infra-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 24px;
  position: relative;
}
.jmc-infra-hero__stat + .jmc-infra-hero__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(255,255,255,0.12);
}
.jmc-infra-hero__stat-num {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--jmc-gold);
  line-height: 1;
}
.jmc-infra-hero__stat-label {
  font-family: var(--ff-sans);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Section Commons ──────────────────────────────────────────────────── */
.jmc-infra-section {
  padding: 96px 0;
}
.jmc-infra-section--alt {
  background: var(--jmc-paper-deep, #f8f5f0);
}
.jmc-infra-divider {
  height: 1px;
  background: var(--jmc-line, #e4ddd3);
  margin: 0;
}

.jmc-infra-section__head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 56px;
}
.jmc-infra-section__icon-badge {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--jmc-gold), var(--jmc-gold-deep, #a87c28));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  box-shadow: 0 4px 16px rgba(201,168,76,0.3);
  margin-top: 4px;
}
.jmc-infra-section__icon-badge--navy {
  background: linear-gradient(135deg, var(--jmc-navy), #0d2151);
  box-shadow: 0 4px 16px rgba(13,21,81,0.25);
}
.jmc-infra-section__icon-badge--gold {
  background: linear-gradient(135deg, var(--jmc-gold), var(--jmc-gold-deep, #a87c28));
}
.jmc-infra-section__head h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.7rem, 1.5rem + 1.2vw, 2.4rem);
  font-weight: 700;
  color: var(--jmc-navy);
  margin-bottom: 8px;
}
.jmc-infra-section__lead {
  font-family: var(--ff-sans);
  font-size: var(--t-base);
  color: var(--jmc-muted);
  line-height: 1.65;
  max-width: 70ch;
  margin: 0;
}

/* ── Sports Grid ──────────────────────────────────────────────────────── */
.jmc-infra-sports-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.jmc-infra-sport-card {
  background: var(--jmc-surface, #fff);
  border: 1px solid var(--jmc-line, #e4ddd3);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  display: flex;
  flex-direction: column;
}
.jmc-infra-sport-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.jmc-infra-sport-card__img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--jmc-paper-deep, #f8f5f0);
}
.jmc-infra-sport-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.jmc-infra-sport-card:hover .jmc-infra-sport-card__img-wrap img {
  transform: scale(1.06);
}
.jmc-infra-sport-card__body {
  padding: 22px 20px 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jmc-infra-sport-card__icon {
  font-size: 1.2rem;
  color: var(--jmc-gold-deep, #a87c28);
}
.jmc-infra-sport-card__body h3 {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--jmc-navy);
  margin: 0;
}
.jmc-infra-sport-card__body p {
  font-family: var(--ff-sans);
  font-size: 0.84rem;
  color: var(--jmc-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Photo Mosaic (Classrooms) ────────────────────────────────────────── */
.jmc-infra-photo-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 40px;
  aspect-ratio: 2 / 1;
}
.jmc-infra-photo-mosaic__main,
.jmc-infra-photo-mosaic__thumb {
  overflow: hidden;
  background: var(--jmc-paper-deep, #f8f5f0);
}
.jmc-infra-photo-mosaic__main { border-radius: var(--radius) 0 0 var(--radius); }
.jmc-infra-photo-mosaic__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jmc-infra-photo-mosaic__thumb:first-child { border-radius: 0 var(--radius) 0 0; }
.jmc-infra-photo-mosaic__thumb:last-child { border-radius: 0 0 var(--radius) 0; }
.jmc-infra-photo-mosaic__main img,
.jmc-infra-photo-mosaic__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.jmc-infra-photo-mosaic__side {
  height: 100%;
}
.jmc-infra-photo-mosaic__thumb {
  flex: 1;
}
.jmc-infra-photo-mosaic:hover img { transform: scale(1.04); }

/* Feature pills */
.jmc-infra-features-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.jmc-infra-feature-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--jmc-surface, #fff);
  border: 1px solid var(--jmc-line, #e4ddd3);
  border-radius: 100px;
  font-family: var(--ff-sans);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--jmc-navy);
  box-shadow: var(--shadow-sm);
}
.jmc-infra-feature-pill i {
  color: var(--jmc-gold-deep, #a87c28);
  font-size: 1rem;
}

/* ── Library ──────────────────────────────────────────────────────────── */
.jmc-infra-section h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  font-weight: 700;
  color: var(--jmc-navy);
  margin-bottom: 16px;
}
.jmc-infra-section p {
  font-family: var(--ff-sans);
  font-size: 0.95rem;
  color: var(--jmc-muted);
  line-height: 1.7;
}
.jmc-infra-library-stats {
  display: flex;
  gap: 0;
  margin-top: 32px;
  border: 1px solid var(--jmc-line, #e4ddd3);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
}
.jmc-infra-library-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 12px;
  text-align: center;
  border-right: 1px solid var(--jmc-line, #e4ddd3);
  background: var(--jmc-surface, #fff);
}
.jmc-infra-library-stat:last-child { border-right: none; }
.jmc-infra-library-stat strong {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--jmc-navy);
}
.jmc-infra-library-stat span {
  font-family: var(--ff-sans);
  font-size: 0.72rem;
  color: var(--jmc-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .jmc-infra-sports-grid { grid-template-columns: 1fr; }
  .jmc-infra-photo-mosaic {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }
  .jmc-infra-photo-mosaic__main {
    aspect-ratio: 1020 / 800;
  }
  .jmc-infra-photo-mosaic__thumb {
    aspect-ratio: 1020 / 800;
  }
  .jmc-infra-photo-mosaic__main { border-radius: var(--radius) var(--radius) 0 0; }
  .jmc-infra-photo-mosaic__side {
    flex-direction: row;
  }
  .jmc-infra-photo-mosaic__thumb:first-child { border-radius: 0 0 0 var(--radius); }
  .jmc-infra-photo-mosaic__thumb:last-child { border-radius: 0 0 var(--radius) 0; }
  .jmc-infra-section { padding: 60px 0; }
  
  .jmc-infra-section__head { flex-direction: column; gap: 16px; }
}

/* ==========================================================================
   Flat UI Override (2026-07-07)
   Remove glow / gradient styling from buttons, cards, text, and icons.
   ========================================================================== */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, strong, small,
button,
.bi,
.material-symbols-outlined {
  text-shadow: none !important;
  filter: none !important;
}

.btn,
[class*="btn-jmc"],
.jmc-home-btn,
.jmc-home-gallery__all,
.jmc-backlink,
button {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.jmc-card,
.jmc-news-card,
.jmc-albumtile,
.jmc-ledger-card,
.jmc-about-value-card,
.jmc-about-feature-card,
.jmc-about-vision-card,
.jmc-about-mission-card,
.jmc-infra-sport-card,
.jmc-infra-feature-pill,
.jmc-profile,
.jmc-notif-feed,
.jmc-gallery-grid .jmc-photo-card {
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

.jmc-card::before,
.jmc-card::after,
.jmc-news-card__media::after,
.jmc-albumtile__overlay::before {
  background-image: none !important;
  box-shadow: none !important;
}

.jmc-infra-section__icon-badge,
.jmc-infra-sport-card__icon,
.jmc-about-feature-card__icon,
.jmc-about-value-card i,
.jmc-about-card-quote-icon,
.jmc-home-event__media,
.jmc-home-stat i,
.jmc-footer__social a {
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Keep infrastructure icon badges visible with flat solid fills. */
.jmc-infra-section__icon-badge {
  background: var(--jmc-gold) !important;
  color: #fff !important;
}

.jmc-infra-section__icon-badge--navy {
  background: var(--jmc-navy) !important;
}

.jmc-infra-section__icon-badge--gold {
  background: var(--jmc-gold) !important;
}

/* ── Newsletters Grid (3 Columns) ────────────────────────────────────── */
.jmc-album-grid--newsletters {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 991.98px) {
  .jmc-album-grid--newsletters {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575.98px) {
  .jmc-album-grid--newsletters {
    grid-template-columns: 1fr !important;
  }
}

/* Style all subpage headers with the same dark blue gradient as the gallery header */
.jmc-page-header,
.jmc-about-hero,
.jmc-infra-hero {
  background:
    radial-gradient(90% 130% at 50% -25%, rgba(217, 166, 63, .2), transparent 60%),
    linear-gradient(160deg, #06275a 0%, #001f4d 55%, #00112e 100%) !important;
}

.jmc-home-hero__veil {
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 30%, rgba(255,255,255,.48) 52%, rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
}

.jmc-page-header::before,
.jmc-page-header::after,
.jmc-about-hero::before,
.jmc-infra-hero::before {
  background-image: none !important;
}

.jmc-page-header::after {
  background: var(--jmc-gold) !important;
}

/* Home intro image: keep real top and bottom breathing room instead of
   stretching the photo to the full column height. */
.jmc-home-intro__grid {
  align-items: center !important;
}

.jmc-home-campus-card {
  display: block !important;
  padding: 32px 0 !important;
}

.jmc-home-campus-card img {
  display: block;
  height: 380px !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (min-width: 992px) {
  .jmc-home-campus-card {
    padding: 32px 0 !important;
  }

  .jmc-home-campus-card img {
    height: 360px !important;
  }
}

/* Home hero: reduce photo width and soften its left edge into the white copy
   area so the seam does not read as a hard cut. */
.jmc-home-hero__image {
  inset: 0 0 0 30% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center right !important;
}

.jmc-home-hero__veil {
  background:
    linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.98) 18%, rgba(255,255,255,.8) 20%, rgba(255,255,255,.28) 24%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
}

/* ==========================================================================
   College Clubs Page — Custom Premium Layout (2026-07-07)
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────── */

/* ── Section Commons ─────────────────────────────────────────────────── */
.jmc-clubs-section {
  padding: 80px 0;
}
.jmc-clubs-section--alt {
  background: var(--jmc-paper-deep, #f8f5f0);
}

/* ── Overlapping Image Gallery ───────────────────────────────────────── */
.jmc-clubs-gallery {
  position: relative;
  height: 380px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.jmc-clubs-gallery__item {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius);
  border: 4px solid var(--jmc-surface, #fff);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), z-index 0s;
}
.jmc-clubs-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jmc-clubs-gallery__item--primary {
  top: 0;
  left: 0;
  width: 75%;
  height: 75%;
  z-index: 1;
}
.jmc-clubs-gallery__item--secondary {
  bottom: 0;
  right: 0;
  width: 65%;
  height: 65%;
  z-index: 2;
}

/* Hover Interactive Effects */
.jmc-clubs-gallery:hover .jmc-clubs-gallery__item--primary {
  transform: translate(-8px, -8px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  z-index: 3;
}
.jmc-clubs-gallery:hover .jmc-clubs-gallery__item--secondary {
  transform: translate(8px, 8px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* ── Club Content Styling ───────────────────────────────────────────── */
.jmc-clubs-intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(201,168,76,0.12);
  color: var(--jmc-gold-deep, #a07e2c);
  border-radius: 4px;
  font-family: var(--ff-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.jmc-clubs-name {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 1.6rem + 1.2vw, 2.4rem);
  font-weight: 700;
  color: var(--jmc-navy);
  margin-bottom: 1.2rem;
}
.jmc-clubs-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jmc-clubs-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.jmc-clubs-bullet-icon {
  flex-shrink: 0;
  color: var(--jmc-gold-deep, #a07e2c);
  font-size: 1rem;
  line-height: 1.5;
}
.jmc-clubs-bullet-text {
  font-family: var(--ff-sans);
  font-size: 0.95rem;
  color: var(--jmc-muted);
  line-height: 1.55;
}

/* ── Responsive overrides ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .jmc-clubs-gallery {
    height: 280px;
    max-width: 380px;
    margin-bottom: 30px;
  }
  .jmc-clubs-section {
    padding: 56px 0;
  }
}

/* ==========================================================================
   Home page section rhythm (2026-07-07)
   Admissions → About → Notifications/News were all sitting on ~white
   backgrounds back to back, so the page read as one long undifferentiated
   wall. Give each stop on the scroll its own material: white (the ask) →
   warm paper (the story) → cool bulletin wash (the desk) → navy (campus
   pride) → navy (the alumni letter). Cards get solid accent bars instead of
   shadows since box-shadow/background-image are stripped with !important
   from .jmc-home-panel elsewhere in this file (Flat UI Override).
   ========================================================================== */
.jmc-home-intro {
  background: var(--jmc-paper-deep);
  border-top: 1px solid var(--jmc-line);
  border-bottom: 1px solid var(--jmc-line);
}

.jmc-home-value-grid a {
  background: #fff;
  border: 1px solid var(--jmc-line);
}
.jmc-home-value-grid a:hover {
  background: #fff;
  border-color: var(--jmc-home-gold);
}

.jmc-home-panels {
  background: #eef2f8;
  border-top: 1px solid #dde5f0;
  border-bottom: 1px solid #dde5f0;
}

.jmc-home-panel__head {
  align-items: center;
}

/* Ensure all form controls and inputs are white only */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="password"],
select,
textarea {
  background-color: #ffffff !important;
  color: var(--jmc-ink) !important;
}

/* Container margin alignments for split panels */
@media (min-width: 1400px) {
  .jmc-home-panel-inner--left {
    padding-left: calc((100vw - 1320px) / 2 + 15px) !important;
    padding-right: 64px !important;
    max-width: calc(660px + (100vw - 1320px) / 2) !important;
  }
  .jmc-home-panel-inner--right {
    padding-right: calc((100vw - 1320px) / 2 + 15px) !important;
    padding-left: 64px !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .jmc-home-panel-inner--left {
    padding-left: calc((100vw - 1140px) / 2 + 15px) !important;
    padding-right: 48px !important;
    max-width: calc(570px + (100vw - 1140px) / 2) !important;
  }
  .jmc-home-panel-inner--right {
    padding-right: calc((100vw - 1140px) / 2 + 15px) !important;
    padding-left: 48px !important;
    max-width: 100% !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .jmc-home-panel-inner--left {
    padding-left: calc((100vw - 960px) / 2 + 15px) !important;
    padding-right: 36px !important;
    max-width: calc(480px + (100vw - 960px) / 2) !important;
  }
  .jmc-home-panel-inner--right {
    padding-right: calc((100vw - 960px) / 2 + 15px) !important;
    padding-left: 36px !important;
    max-width: 100% !important;
  }
}

@media (max-width: 991.98px) {
  .jmc-home-panels__split {
    grid-template-columns: 1fr;
  }
  .jmc-home-panel-inner--left,
  .jmc-home-panel-inner--right {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 24px !important;
  }
  .jmc-home-panels__right-col {
    border-left: none;
    border-top: 1px solid var(--jmc-home-line, #e6eaf1);
  }
}

/* ==========================================================================
   Layer 5 — Motion & error pages (added after the mockup-matched layers)
   ========================================================================== */

/* ---- Page-header entrance (interior banners) ---------------------------- */
@keyframes jmcHeadRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.js .jmc-galhead__inner > *,
.js .jmc-page-header .container > * {
  animation: jmcHeadRise .55s var(--ease) both;
}
.js .jmc-galhead__inner > *:nth-child(2),
.js .jmc-page-header .container > *:nth-child(2) { animation-delay: .08s; }
.js .jmc-galhead__inner > *:nth-child(3),
.js .jmc-page-header .container > *:nth-child(3) { animation-delay: .16s; }
.js .jmc-galhead__inner > *:nth-child(4),
.js .jmc-page-header .container > *:nth-child(4) { animation-delay: .24s; }

/* ---- Error pages (400 / 403 / 404 / 500) ---------------------------------
   A record card on a cool slate field. Navy is the only accent — the gold
   belongs to the content pages, and an error is not a moment to celebrate.
   The status code is an outlined watermark so the destinations lead.
   Tokens are local (--err-*) because 500.html must inline the same design
   without jmc.css: keep the two in sync.                                    */
.jmc-errorpage {
  --err-field: #eef1f7;
  --err-card:  #ffffff;
  --err-ink:   #0a142c;
  --err-navy:  #1a2e5a;
  --err-muted: #5b6477;
  --err-rule:  #d8dfeb;

  position: relative;
  background: var(--err-field);
  padding: 4.5rem 0 5.5rem;
  overflow: hidden;
}
.jmc-errorpage .container { position: relative; }

.jmc-errorpage__card {
  background: var(--err-card);
  border: 1px solid var(--err-rule);
  border-top: 3px solid var(--err-navy);
  border-radius: 4px;
  max-width: 60rem;
  margin: 0 auto;
  padding: 3rem clamp(1.5rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.js .jmc-errorpage__card { animation: jmcHeadRise .55s var(--ease) both; }

/* Status block — the signature: a stroked numeral, not a solid slab. */
.jmc-errorpage__status { position: relative; }
.jmc-errorpage__code {
  font-family: "Lora", Georgia, serif;
  font-weight: 700;
  font-size: clamp(4.5rem, 9vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--err-navy);
  margin: 0 0 .9rem;
}
@supports not (-webkit-text-stroke: 1px black) {
  .jmc-errorpage__code { color: var(--err-navy); opacity: .22; }
}
.jmc-errorpage__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .7rem;
  font-weight: 700;
  color: var(--err-navy);
  border: 1px solid var(--err-rule);
  border-radius: 3px;
  padding: .3rem .6rem;
  margin: 0;
}

.jmc-errorpage__body { padding-top: .35rem; }
.jmc-errorpage__title {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--err-ink);
  margin: 0 0 .6rem;
}
.jmc-errorpage__text {
  max-width: 34rem;
  margin: 0 0 1.75rem;
  color: var(--err-muted);
}
.jmc-errorpage__actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
/* The site's primary button is gold; on an error page navy carries the action. */
.jmc-errorpage__actions .btn-jmc-primary {
  background: var(--err-navy);
  border-color: var(--err-navy);
  color: #fff;
}
.jmc-errorpage__actions .btn-jmc-primary:hover,
.jmc-errorpage__actions .btn-jmc-primary:focus-visible {
  background: var(--err-ink);
  border-color: var(--err-ink);
  color: #fff;
}
.jmc-errorpage__actions .btn-jmc-outline {
  border-color: var(--err-rule);
  color: var(--err-navy);
}
.jmc-errorpage__actions .btn-jmc-outline:hover,
.jmc-errorpage__actions .btn-jmc-outline:focus-visible {
  background: var(--err-navy);
  border-color: var(--err-navy);
  color: #fff;
}

/* Destinations — a 404 exists to hand the reader somewhere to go, so each
   link says what it holds rather than sitting in a naked row. */
.jmc-errorpage__links {
  grid-column: 1 / -1;           /* spans the card, under both columns */
  margin: .75rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--err-rule);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* six links, two even rows */
  gap: .25rem 1.5rem;
}
.jmc-errorpage__links a {
  display: block;
  padding: .55rem .65rem;
  margin-left: -.65rem;
  border-radius: 3px;
  color: var(--err-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  transition: background .2s var(--ease);
}
.jmc-errorpage__links a span {
  display: block;
  color: var(--err-muted);
  font-weight: 400;
  font-size: .85rem;
  margin-top: .1rem;
}
.jmc-errorpage__links a:hover,
.jmc-errorpage__links a:focus-visible { background: var(--err-field); }

/* ==========================================================================
   Home page — body copy set to a consistent 16px across every section
   ========================================================================== */
.jmc-home-hero__lead,
.jmc-bbbp__inner p,
.jmc-admission-band__summary,
.jmc-admission-band__detail p,
.jmc-home-notice-item__title,
.jmc-home-event__excerpt,
.jmc-home-welcome__text p,
.jmc-alumni-band__text,
.jmc-alumni-band__note,
.jmc-home-why__item-body span {
  font-size: 16px !important;
}

/* About page — prose titles/content and vision/mission cards matched to the
   home page About section (.jmc-home-welcome h2 / .jmc-home-welcome__text p).
   No italics anywhere on this page. */
.jmc-about-content .jmc-prose h2,
.jmc-about-content .jmc-prose h3,
.jmc-about-card-title {
  font-family: var(--ff-display);
  font-size: 27px !important;
  font-weight: 700 !important;
  color: var(--jmc-home-navy-2) !important;
  line-height: 1.1;
  font-style: normal !important;
}
.jmc-about-card-title {
  margin: 0 0 16px !important;
}
.jmc-about-content .jmc-prose p,
.jmc-about-card-content {
  font-family: var(--ff-sans);
  font-size: 16px !important;
  color: #1f2937 !important;
  line-height: 1.72;
  font-style: normal !important;
}
.jmc-about-content .jmc-prose em,
.jmc-about-content .jmc-prose i,
.jmc-about-card-content em,
.jmc-about-card-content i {
  font-style: normal !important;
}

/* Skill Courses page — section titles/content matched to the home page
   About section (.jmc-home-welcome h2 / .jmc-home-welcome__text p). */
.jmc-skill-courses-container .jmc-clubs-name {
  font-family: var(--ff-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--jmc-home-navy-2);
  line-height: 1.1;
  margin-bottom: 24px;
}
.jmc-skill-courses-container .jmc-infra-section__lead {
  font-family: var(--ff-sans);
  font-size: 16px !important;
  color: #1f2937;
  line-height: 1.72;
  max-width: none;
}

/* College Clubs page — section titles/content matched to the home page
   About section (.jmc-home-welcome h2 / .jmc-home-welcome__text p). */
.jmc-clubs-container .jmc-clubs-name {
  font-family: var(--ff-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--jmc-home-navy-2);
  line-height: 1.1;
  margin-bottom: 24px;
}
.jmc-clubs-container .jmc-clubs-bullet-text {
  font-family: var(--ff-sans);
  font-size: 16px !important;
  color: #1f2937;
  line-height: 1.72;
}

/* Home About eyebrow gets swept up by the broad ".jmc-home-welcome p" rule
   (color/size meant for body copy) — restore the standard eyebrow look. */
.jmc-home-welcome .jmc-eyebrow {
  color: var(--jmc-gold-deep) !important;
  font-size: var(--t-eyebrow) !important;
  margin: 0 0 .7rem !important;
}

/* Board of Governors — Administration page (2026-07) */
.jmc-board-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 18px 20px;
  background: #fff;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--jmc-line, #e4ddd3);
}
.jmc-board-row__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.14);
  color: var(--jmc-gold-deep);
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 700;
}
.jmc-board-row__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.jmc-board-row__name {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--jmc-navy);
  line-height: 1.3;
}
.jmc-board-row__role {
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--jmc-muted);
  margin-top: 2px;
}

/* Administrative / Support staff rosters — Administration page (2026-07) */
.jmc-staff-list {
  background: #fff;
  border: 1px solid var(--jmc-line, #e4ddd3);
  border-radius: var(--radius, 10px);
  overflow: hidden;
}
.jmc-staff-list__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--jmc-line, #e4ddd3);
}
.jmc-staff-list__row:last-child { border-bottom: none; }
.jmc-staff-list__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(26, 46, 90, 0.07);
  color: var(--jmc-navy);
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 700;
}
.jmc-staff-list--gold .jmc-staff-list__avatar {
  background: rgba(201, 168, 76, 0.14);
  color: var(--jmc-gold-deep);
}
.jmc-staff-list__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.jmc-staff-list__name {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--jmc-navy);
  line-height: 1.3;
}
.jmc-staff-list__role {
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--jmc-muted);
  margin-top: 2px;
}

/* Infrastructure & Facilities page — eyebrow/title/body matched to the
   home page About section (.jmc-home-welcome). */
.jmc-infra-section .jmc-eyebrow {
  font-size: var(--t-eyebrow) !important;
  color: var(--jmc-gold-deep) !important;
}
.jmc-infra-section__head h2,
.jmc-infra-section h2 {
  font-family: var(--ff-display);
  font-size: 27px !important;
  font-weight: 700 !important;
  color: var(--jmc-home-navy-2) !important;
  line-height: 1.1;
}
.jmc-infra-section .jmc-infra-section__lead,
.jmc-infra-section p {
  font-family: var(--ff-sans);
  font-size: 16px !important;
  color: #1f2937 !important;
  line-height: 1.72;
}

/* Annual Events page — single-image variant of .jmc-clubs-gallery.
   Events only ever have one photo, so it fills the whole frame and
   stretches to match the paired text column instead of the diagonal
   primary/secondary pair used on the clubs page. */
.jmc-clubs-gallery--single {
  position: relative;
  height: auto;
  width: 100%;
  max-width: 560px;
  min-height: 320px;
}
.jmc-clubs-gallery--single .jmc-clubs-gallery__item--full {
  position: static;
  width: 100%;
  height: 100%;
  min-height: inherit;
}
@media (max-width: 991.98px) {
  .jmc-clubs-gallery--single {
    min-height: 280px;
  }
}

/* Document library / notifications feed (2026-07) */
.jmc-notif-sortbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}
.jmc-notif-sortbar__label {
  font-size: var(--t-sm);
  color: var(--jmc-muted);
  margin-right: .2rem;
}
.jmc-notif-feed {
  display: flex;
  flex-direction: column;
  background: var(--jmc-surface, #fff);
  border: 1px solid var(--jmc-line, #e4ddd3);
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
}
.jmc-notif-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--jmc-line, #e4ddd3);
  transition: background .15s var(--ease);
}
.jmc-notif-item:last-child { border-bottom: none; }
.jmc-notif-item:hover { background: var(--jmc-paper, #f8f5f0); }
.jmc-notif-item.d-none { display: none; }
.jmc-notif-item__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.05rem;
  background: rgba(26, 46, 90, 0.07);
  color: var(--jmc-navy);
}
.jmc-notif-item__icon--admission,
.jmc-notif-item__icon--event {
  background: rgba(201, 168, 76, 0.14);
  color: var(--jmc-gold-deep);
}
.jmc-notif-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.jmc-notif-item__title {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--jmc-navy);
  text-decoration: none;
  line-height: 1.35;
}
.jmc-notif-item:hover .jmc-notif-item__title { color: var(--jmc-gold-deep); }
.jmc-notif-item__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-sm);
  color: var(--jmc-muted);
}
.jmc-notif-item__dot { color: var(--jmc-line-strong); }
.jmc-notif-item__dl {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--jmc-line-strong);
  color: var(--jmc-navy);
  text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.jmc-notif-item__dl:hover {
  background: var(--jmc-navy);
  border-color: var(--jmc-navy);
  color: #fff;
}
.jmc-notif-item__chevron {
  flex-shrink: 0;
  color: var(--jmc-line-strong);
  font-size: 1rem;
}
.jmc-notif-item__none {
  padding: 24px 22px;
  margin: 0;
}

/* Courses page — FYUGP category definitions & paper sub-lists (2026-07) */
.jmc-course-terms {
  display: flex;
  flex-direction: column;
  background: var(--jmc-surface, #fff);
  border: 1px solid var(--jmc-line, #e4ddd3);
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
}
.jmc-course-terms__row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--jmc-line, #e4ddd3);
}
.jmc-course-terms__row:last-child { border-bottom: none; }
.jmc-course-terms__term {
  flex: 0 0 150px;
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--jmc-gold-deep);
}
.jmc-course-terms__desc {
  font-size: 16px;
  color: #1f2937;
  line-height: 1.6;
}
@media (max-width: 575.98px) {
  .jmc-course-terms__row { flex-direction: column; gap: 4px; }
  .jmc-course-terms__term { flex: none; }
}

/* "Additional University Courses" — registrar-slip cards (2026-07) */
.jmc-course-paper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.jmc-course-paper {
  position: relative;
  overflow: hidden;
  padding: 28px 26px;
  background: var(--jmc-surface, #fff);
  border: 1px solid var(--jmc-line, #e4ddd3);
  border-radius: 12px;
}
.jmc-course-paper__mark {
  position: absolute;
  top: -16px;
  right: 6px;
  font-family: var(--ff-display);
  font-size: 108px;
  font-weight: 700;
  line-height: 1;
  color: var(--jmc-navy);
  opacity: .05;
  pointer-events: none;
  user-select: none;
}
.jmc-course-paper__code {
  position: relative;
  display: block;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jmc-gold-deep);
  margin-bottom: 10px;
}
.jmc-course-paper__title {
  position: relative;
  margin: 0 0 8px;
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--jmc-navy);
  line-height: 1.3;
}
.jmc-course-paper__desc {
  position: relative;
  margin: 0;
  font-size: 15px;
  color: var(--jmc-muted);
  line-height: 1.6;
}
.jmc-course-paper__sublist {
  position: relative;
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--jmc-line-strong, #d8cfc0);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jmc-course-paper__sublist li {
  font-size: 14px;
  color: var(--jmc-muted);
  line-height: 1.5;
}
.jmc-course-paper__sublist li b {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--jmc-navy);
  margin-right: 2px;
}

@media (max-width: 767.98px) {
  .jmc-course-paper-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ accordion — admission page (2026-07-08)
   Moved out of an inline <style> block in admission_page.html.
   ========================================================================== */
.jmc-faq-accordion .accordion-button {
  background-color: var(--jmc-surface, #fff);
  color: var(--jmc-navy);
  border: none;
  box-shadow: none !important;
  padding: 1.25rem 1.5rem;
  transition: background-color 0.2s ease;
}
.jmc-faq-accordion .accordion-button:not(.collapsed) {
  background-color: var(--jmc-paper-deep, #f8f5f0);
  color: var(--jmc-navy);
}
.jmc-faq-accordion .accordion-button::after {
  filter: brightness(0.2);
}
.jmc-faq-accordion .accordion-item {
  border: 1px solid var(--jmc-line) !important;
  background-color: var(--jmc-surface, #fff);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.jmc-faq-accordion .accordion-item:hover {
  border-color: var(--jmc-gold) !important;
}
.jmc-faq-accordion .accordion-body {
  padding: 1.25rem 1.5rem;
  background-color: var(--jmc-surface, #fff);
}

/* ==========================================================================
   Layer 7 — Tablet & mobile pass (2026-07-08)
   Every rule below only tightens layout under 992px; desktop (≥992px) is
   untouched. Appended last so it wins the cascade over the earlier layers,
   including the flat-override !important rules it has to counter.
   ========================================================================== */

/* ---- Phones get the full canvas width (the 90% canvas + big gutters left
   only ~295px of content on a 375px screen). 24px gutters also absorb the
   -24px side margins of Bootstrap .g-5 rows, which overflowed by 4px. ------ */
@media (max-width: 575.98px) {
  .container {
    width: 100%;
    padding-inline: 24px;
  }
}

/* ---- Main navbar: collapsed menu on the white bar ------------------------
   The legacy navy-navbar layer painted mobile dropdown links white — invisible
   on today's white navbar. Restore dark ink and give the open menu a scroll
   limit so long menus never trap the page. */
@media (max-width: 991.98px) {
  .jmc-navbar .navbar-collapse {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
  .jmc-navbar .nav-link { padding: 9px 4px; }
  .jmc-navbar .dropdown-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 2px 0 8px 14px;
  }
  .jmc-navbar .dropdown-item {
    color: #33415c;
    padding: 7px 10px;
  }
  .jmc-navbar .dropdown-item:hover,
  .jmc-navbar .dropdown-item:focus,
  .jmc-navbar .dropdown-item.active {
    background: #f2f5fa;
    color: var(--jmc-home-navy);
    padding-left: 10px;
  }
}

/* ---- Home hero: stacked copy-over-photo under 992px -----------------------
   The flat-override layer pins the photo to the right 70% with !important at
   every width, which buried the old phone layout. Re-assert a stacked hero:
   white copy block on top, photo as a full-width banner pinned to the bottom,
   with a soft white fade at the seam. */
@media (max-width: 991.98px) {
  .jmc-home-hero,
  .jmc-home-hero__inner { min-height: 0; }
  .jmc-home-hero__inner {
    align-items: flex-start;
    /* padding-block only: the inline gutter comes from the .container rule
       above (shorthand padding here would zero it and glue copy to the edge). */
    padding-block: 38px 320px;
  }
  .jmc-home-hero__copy {
    width: 100%;
    max-width: 600px;
    transform: none;
  }
  .jmc-home-hero__image {
    inset: auto 0 0 0 !important;
    height: 280px;
    background-position: center !important;
  }
  .jmc-home-hero__veil {
    background: linear-gradient(180deg,
      #fff 0%,
      #fff calc(100% - 300px),
      rgba(255, 255, 255, 0) calc(100% - 220px)) !important;
  }
}
@media (max-width: 575.98px) {
  .jmc-home-hero__inner { padding-block: 30px 268px; }
  .jmc-home-hero__image { height: 232px; }
  .jmc-home-hero__veil {
    background: linear-gradient(180deg,
      #fff 0%,
      #fff calc(100% - 252px),
      rgba(255, 255, 255, 0) calc(100% - 180px)) !important;
  }
}

/* ---- Home stats band: coherent 2×2 hairline grid on phones --------------- */
@media (max-width: 639.98px) {
  .jmc-home-stat {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding: 14px 12px;
    gap: 12px;
  }
  .jmc-home-stat:nth-child(-n+2) { border-top: 0; }
  .jmc-home-stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .18); }
  .jmc-home-stat i { font-size: 26px; }
  .jmc-home-stat strong { font-size: 20px; }
}

/* ---- Home admission band: stacked details card sizes itself -------------- */
@media (max-width: 639.98px) {
  .jmc-admission-band__copy,
  .jmc-admission-band__details {
    flex-basis: auto;
    width: 100%;
  }
}

/* ---- Home split panels: lighter padding on phones ------------------------ */
@media (max-width: 575.98px) {
  .jmc-home-panel-inner--left,
  .jmc-home-panel-inner--right { padding: 44px 20px !important; }
  .jmc-home-event__media { width: 104px; min-height: 68px; }
}

/* ---- Home intro photo: shorter crop on phones ----------------------------- */
@media (max-width: 575.98px) {
  .jmc-home-campus-card img { height: 260px !important; }
}

/* ---- Prose & rich-text tables: scroll instead of overflowing ------------- */
@media (max-width: 767.98px) {
  .jmc-prose table,
  .jmc-richtext table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Courses: registrar-slip cards get a 2-up step on tablets ------------ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .jmc-course-paper-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ---- Infrastructure: hero stat bar and library counters ------------------ */
@media (max-width: 767.98px) {
  .jmc-infra-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 0;
  }
  .jmc-infra-hero__stat + .jmc-infra-hero__stat::before { display: none; }
}
@media (max-width: 479.98px) {
  .jmc-infra-library-stats { flex-direction: column; }
  .jmc-infra-library-stat {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--jmc-line);
  }
  .jmc-infra-library-stat:last-child { border-bottom: 0; }
}

/* ---- Section pages: quote box and ledger cards on phones ------------------ */
@media (max-width: 575.98px) {
  .jmc-editorial-quote-box { padding: 28px 22px; }
  .jmc-quote-decorator { font-size: 80px; }
  .jmc-ledger-card {
    flex-direction: column;
    gap: 10px;
    padding: 20px;
  }
}

/* ---- Footer: keep the three columns side by side on tablets -------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .jmc-footer__main {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 32px;
  }
}

/* ---- Forms & search: 16px inputs stop iOS focus-zoom ---------------------- */
@media (max-width: 575.98px) {
  .jmc-notif-search input,
  .form-control,
  .form-select { font-size: 16px; }
}

/* ==========================================================================
   Home News & Events thumbnails (2026-07-09) — the thumb box used
   height:100%, which resolves to auto inside the flex row, so each thumb
   took its photo's intrinsic aspect ratio (a portrait photo rendered about
   twice as tall as its neighbours). Pin every thumb to one landscape ratio;
   object-fit:cover crops the photo to it.
   ========================================================================== */
.jmc-home-event__media {
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
  align-self: center;
}

/* The last event in the home News & Events list needs no divider below it
   (the base rule paints border-bottom on every .jmc-home-event with
   !important, so the override must match). */
.jmc-home-event:last-of-type {
  border-bottom: 0 !important;
}

/* ==========================================================================
   News article page (2026-07-15) — editorial story layout.
   Canonical URL is /blog/<slug>/. The article gets its own masthead and
   media composition rather than reusing the standard interior page header.
   ========================================================================== */
.jmc-story-hero {
  position: relative;
  overflow: clip;
  background: transparent;
  border-bottom: 0;
}
.jmc-story-hero::before {
  content: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, .03) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(15, 23, 42, .03) 1px, transparent 1px) 0 0 / 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.35), transparent 78%);
  pointer-events: none;
}
.jmc-story-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 1rem + 1.6vw, 2.5rem);
  padding: 0 0 clamp(.75rem, .55rem + 1vw, 1.25rem);
}
.jmc-story-hero__copy {
  width: 100%;
  max-width: 100%;
  padding: 0;
  text-align: left;
}
.jmc-story-hero__title {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-family: var(--ff-sans);
  font-size: 1.75rem;
  line-height: 1.12;
  letter-spacing: -.015em;
  font-weight: 600;
  color: #10233f;
  text-wrap: normal;
}
.jmc-story-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.15rem;
  align-items: center;
  justify-content: flex-start;
  margin: 1.25rem 0 0;
  color: #4b5b72;
  font-size: .88rem;
}
.jmc-story-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.jmc-story-hero__meta-item .bi {
  font-size: 14px;
  color: #8a6a2f;
}
.jmc-story-hero__deck {
  margin: 1.5rem 0 0;
  max-width: 58ch;
  font-size: clamp(1.025rem, 0.98rem + 0.25vw, 1.15rem);
  line-height: 1.85;
  color: #334155;
  border-left: 2px solid var(--jmc-gold);
  padding-left: 1.25rem;
}
.jmc-story-hero__media {
  margin: 0;
  width: 100%;
  position: relative;
}
.jmc-story-hero__media::after {
  content: none;
}
.jmc-story-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  border: 0;
  box-shadow: none;
}

.jmc-article-page {
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-bottom: clamp(4rem, 3rem + 3vw, 6rem);
}
.jmc-article {
  padding-top: 0;
  padding-bottom: 0;
}
.jmc-article__col {
  width: 100%;
  max-width: min(100%, 920px);
  margin-inline: auto;
}
@media (max-width: 991.98px) {
  .jmc-article__col {
    max-width: 100%;
  }
}
.jmc-story-marker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.15rem;
  color: #7b8798;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.jmc-story-marker__line {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, #b69254, rgba(182, 146, 84, .22));
}
.jmc-article__body {
  font-size: 17.5px;
  line-height: 1.88;
  color: #1f2937;
}
/* Lede: only the article's opening paragraph reads larger with a scholarly drop cap */
.jmc-article__lede > p:first-child {
  font-size: 20px;
  line-height: 1.78;
  color: var(--jmc-navy);
}
.jmc-article__lede > p:first-child::first-letter {
  font-family: var(--ff-display);
  font-size: 3.8rem;
  font-weight: 600;
  float: left;
  line-height: 0.82;
  margin-right: 0.12em;
  margin-top: 0.05em;
  color: var(--jmc-navy);
}
.jmc-article__body p { margin-bottom: 1.25rem; }

@media (max-width: 991.98px) {
  .jmc-story-hero__inner {
    gap: 2rem;
  }
  .jmc-story-hero__title {
    max-width: 100%;
  }
  .jmc-story-hero__media {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .jmc-story-hero__inner {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
  }
  .jmc-story-hero__title {
    max-width: 100%;
    font-size: clamp(1.85rem, 1.25rem + 3vw, 2.75rem);
  }
  .jmc-story-hero__deck {
    font-size: 1rem;
    line-height: 1.75;
  }
}
.jmc-news-ribbon {
  background: var(--jmc-home-gold);
  border-block: 1px solid rgba(0, 31, 77, .18);
  padding: 8px 0;
  overflow: hidden;
}
.jmc-news-ribbon__inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.jmc-news-ribbon__tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; background: var(--jmc-home-navy-2); color: #fff; font-family: var(--ff-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; padding: 4px 10px; border-radius: 4px; }
.jmc-news-ribbon__tag i { color: var(--jmc-home-gold); }
.jmc-news-ribbon__track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.jmc-news-ribbon__track a {
  display: inline-block;
  padding-left: 100%;
  animation: jmc-marquee 22s linear infinite;
  color: var(--jmc-home-navy-2);
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.jmc-news-ribbon__track a:hover {
  animation-play-state: paused;
}
/* Static fallback: without this, the padding-left:100% start position keeps
   the link permanently off-screen when animations are disabled. */
@media (prefers-reduced-motion: reduce) {
  .jmc-news-ribbon__track a {
    animation: none;
    padding-left: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.jmc-article-section { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } .jmc-article-section__media { display: grid; gap: 1rem; } .jmc-article-section__media img, .jmc-article-section__card img, .jmc-article-section--image-row img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px !important; border: 1px solid rgba(15, 23, 42, .06); box-shadow: var(--shadow-sm); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .jmc-article-section__media img:hover, .jmc-article-section__card img:hover, .jmc-article-section--image-row img:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .jmc-article-section--media-text { display: grid; gap: 1.5rem 2.5rem; align-items: start; } @media (min-width: 768px) { .jmc-article-section--media-first { grid-template-columns: 320px minmax(0, 1fr); } .jmc-article-section--media-last { grid-template-columns: minmax(0, 1fr) 320px; } } .jmc-article-section--card-row, .jmc-article-section--two-col { display: grid; gap: 1.75rem 1.5rem; } @media (min-width: 640px) { .jmc-article-section--card-row { grid-template-columns: repeat(3, 1fr); } .jmc-article-section--two-col { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 3vw, 4rem); } } .jmc-article-section--image-row { display: flex; flex-wrap: wrap; gap: .75rem; } .jmc-article-section--image-row img { flex: 1 1 calc((100% - 1.5rem) / 3); min-width: 180px; max-width: calc(50% - .375rem); } @media (max-width: 480px) { .jmc-article-section--image-row img { min-width: 100%; max-width: 100%; } } .jmc-article-section__card { margin: 0; background: var(--jmc-surface); border: 1px solid var(--jmc-line); border-radius: 14px; padding: 0.8rem; box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .jmc-article-section__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .jmc-article-section__card img { border-radius: 8px !important; } .jmc-article-section__card figcaption { margin-top: .75rem; font-size: .92rem; line-height: 1.6; color: #4b5563; } .jmc-article-section__card figcaption p { margin-bottom: .35rem; }
.jmc-richtext blockquote { border-left: 4px solid var(--jmc-gold) !important; padding: 1.25rem 1.75rem !important; margin: 2.2rem 0 !important; background: rgba(201, 168, 76, 0.045) !important; border-radius: 0 12px 12px 0 !important; font-family: var(--ff-display) !important; font-style: italic !important; font-size: 1.25rem !important; line-height: 1.65 !important; color: var(--jmc-navy) !important; position: relative !important; } .jmc-richtext blockquote::before { content: "“"; position: absolute; left: 10px; top: -10px; font-size: 4rem; color: var(--jmc-gold); opacity: 0.15; font-family: var(--ff-display); } .jmc-article__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2.2rem, 1.8rem + 2vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--jmc-line); } .jmc-article__foot-label { font-family: var(--ff-sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--jmc-muted); } .jmc-article__share { display: flex; gap: .6rem; } .jmc-article__share a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--jmc-line-strong); color: var(--jmc-navy); font-size: .95rem; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .jmc-article__share a:hover, .jmc-article__share a:focus-visible { background: var(--jmc-navy); border-color: var(--jmc-navy); color: #fff; transform: translateY(-3px); } .jmc-backlink { font-family: var(--ff-sans); font-weight: 600; color: var(--jmc-navy); font-size: 0.92rem; transition: color 0.2s var(--ease), transform 0.2s var(--ease); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .jmc-backlink:hover { color: var(--jmc-gold-deep); transform: translateX(-4px); } .jmc-article-more { background: var(--jmc-paper-deep); border-top: 1px solid var(--jmc-line); padding-block: clamp(2.5rem, 1.8rem + 2.5vw, 4.5rem); } .jmc-article-more__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.2rem, 1rem + 1vw, 2rem); } .jmc-article-more__head .jmc-eyebrow { margin-bottom: .4rem; } .jmc-article-more__head h2 { font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.2rem); margin: 0; } .jmc-article-more__all { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; font-family: var(--ff-sans); font-size: .88rem; font-weight: 600; color: var(--jmc-home-navy-2); text-decoration: none; white-space: nowrap; padding-bottom: .3rem; } .jmc-article-more__all i { color: var(--jmc-home-gold); transition: transform .2s var(--ease); } .jmc-article-more__all:hover i { transform: translateX(3px); } @media (max-width: 575.98px) { .jmc-article__body { font-size: 16px; } .jmc-article__body > p:first-child { font-size: 17.5px; } .jmc-article__foot .jmc-backlink { margin-left: 0 !important; width: 100%; } .jmc-article-more__head { flex-direction: column; align-items: flex-start; gap: .5rem; } }
/* ---- News article balance pass (2026-07-15) ----------------------------- */
.jmc-article-more {
  background: transparent;
  border-top: 0;
  padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/* ---- Adaptive grouped-image layouts for news articles ------------------- */
.jmc-article-section--card-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.jmc-article-section--card-row > * {
  grid-column: span 4;
}
.jmc-article-section--card-row.jmc-article-section--count-1 > * {
  grid-column: 1 / -1;
}
.jmc-article-section--card-row.jmc-article-section--count-2 > * {
  grid-column: span 6;
}
.jmc-article-section--card-row.jmc-article-section--count-4 > * {
  grid-column: span 6;
}

/* ---- Album: layout_5 (--image-row) orientation-aware mosaic (2026-07-15) -
   Portrait uploads no longer crop. Tiles keep a uniform column width; each
   tile's grid row-span is measured from the image's natural aspect ratio in
   JS (initAlbumMosaic in jmc.js), so the box always matches the photo's
   orientation. grid-auto-rows is a fine track that the row-spans quantise
   against, and grid-auto-flow: dense backfills the gaps that taller portrait
   tiles would otherwise leave. */
.jmc-article-section--image-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: row dense;
}
.jmc-article-section--image-row > img {
  grid-column: auto;
  grid-row: span 28; /* ~4:3 fallback before JS measures / if JS is off */
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  aspect-ratio: auto; /* box now comes from the grid area, not a fixed ratio */
  object-fit: cover;  /* box matches the true ratio, so this only trims rounding */
}

@media (max-width: 767.98px) {
  .jmc-article-section--card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .jmc-article-section--card-row > * {
    grid-column: auto !important;
  }
  .jmc-article-section--card-row.jmc-article-section--count-1 > * {
    grid-column: 1 / -1 !important;
  }
  .jmc-article-section--image-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .jmc-article-section--card-row {
    grid-template-columns: 1fr;
  }
  .jmc-article-section--card-row > * {
    grid-column: 1 / -1 !important;
  }
  .jmc-article-section--image-row {
    grid-template-columns: 1fr;
  }
}

/* ---- Exact grouped-card row patterns for --card-row (1-10 cards) -------- */
@media (min-width: 768px) {
  .jmc-article-section--card-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  .jmc-article-section--card-row > * {
    grid-column: span 2 !important;
  }

  .jmc-article-section--card-row.jmc-article-section--count-1 > * {
    grid-column: 1 / -1 !important;
  }

  .jmc-article-section--card-row.jmc-article-section--count-2 > *,
  .jmc-article-section--card-row.jmc-article-section--count-4 > * {
    grid-column: span 3 !important;
  }

  .jmc-article-section--card-row.jmc-article-section--count-5 > *:nth-child(-n+2),
  .jmc-article-section--card-row.jmc-article-section--count-7 > *:nth-child(-n+2),
  .jmc-article-section--card-row.jmc-article-section--count-7 > *:nth-last-child(-n+2),
  .jmc-article-section--card-row.jmc-article-section--count-10 > *:nth-child(-n+2),
  .jmc-article-section--card-row.jmc-article-section--count-10 > *:nth-child(6),
  .jmc-article-section--card-row.jmc-article-section--count-10 > *:nth-child(7) {
    grid-column: span 3 !important;
  }

  .jmc-article-section--card-row.jmc-article-section--count-8 > *:nth-child(-n+3),
  .jmc-article-section--card-row.jmc-article-section--count-8 > *:nth-last-child(-n+3) {
    grid-column: span 2 !important;
  }

  .jmc-article-section--card-row.jmc-article-section--count-8 > *:nth-child(4),
  .jmc-article-section--card-row.jmc-article-section--count-8 > *:nth-child(5) {
    grid-column: span 3 !important;
  }

  .jmc-article-section--card-row.jmc-article-section--count-9 > * {
    grid-column: span 2 !important;
  }
}

/* ---- News cover image: respect native orientation (2026-07-15) ----------
   The hero/cover keeps its 16:10 fallback box only until initCoverOrientation
   (jmc.js) measures the image. A landscape cover then shows at its natural
   ratio across the column; a portrait cover is centred at a portrait width and
   capped in height, so neither orientation is ever cropped. */
.jmc-story-hero__media.is-oriented img {
  aspect-ratio: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  margin-inline: auto;
}
.jmc-story-hero__media.is-portrait img {
  max-width: min(100%, 460px);
  max-height: 80vh;
}

/* Error pages — the status block sits above the copy once the two columns
   no longer fit side by side. */
@media (max-width: 40rem) {
  .jmc-errorpage { padding: 3rem 0 4rem; }
  .jmc-errorpage__card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.25rem 1.5rem;
  }
  .jmc-errorpage__links { grid-template-columns: 1fr; }
}
@media (min-width: 40.0625rem) and (max-width: 61.9375rem) {
  .jmc-errorpage__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}