@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');

/* =====================================================================
   CJP-STYLE EDITORIAL DESIGN — RETRO NEWSPAPER / NEO-BRUTALIST
   Palette: Warm cream bg, dark brown ink, rust orange + forest green
   Fonts:  DM Serif Display headings, Space Grotesk body, Playfair accents
   ===================================================================== */

:root {
  --paper: #f4ecd8;
  --paper2: #fffdf6;
  --cream: #fffdf6;
  --ink: #1a1410;
  --muted: #5c4e41;
  --line: #1a1410;
  --green: #1e5631;
  --green-dark: #12371e;
  --red: #e13b19;
  --orange: #e13b19;
  --yellow: #ffc72c;
  --blue: #1c3b57;
  --shadow: 8px 8px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --ring:   3px solid var(--ink);
  --radius: 0px;
}

/* ── Reset & Base ── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); color: var(--ink); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 400; font-size: 16px;
  line-height: 1.6; overflow-x: hidden; opacity: 1 !important;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
#bg-canvas { display: none !important; }
::selection { background: var(--green); color: #fff; }

/* ── Top Ticker Strip ── */
.top-strip {
  height: 48px; background: var(--ink); color: var(--paper);
  border-bottom: 4px solid var(--red);
  overflow: hidden; display: flex; align-items: center;
  position: sticky; top: 0; z-index: 9000;
}
.strip-track {
  display: flex; gap: 2.4rem; min-width: max-content;
  animation: topmove 32s linear infinite;
}
.strip-track span {
  font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 1.1rem; letter-spacing: .1em; white-space: nowrap;
  text-transform: uppercase;
}
.strip-track span::before { content: "✦ "; color: var(--red); }
@keyframes topmove { to { transform: translateX(-50%); } }

/* ── Mid-Page Ticker ── */
.ticker {
  background: var(--red); color: var(--paper);
  padding: 0.85rem 0; margin: 3rem auto;
  width: 105vw; position: relative; left: 50%;
  transform: translateX(-50%);
  overflow: hidden; display: flex; align-items: center;
  border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink);
  box-shadow: 0 8px 0 rgba(26,20,16,.15); z-index: 10;
}
.ticker div {
  display: flex; gap: 2rem; min-width: max-content;
  animation: topmove 30s linear infinite;
}
.ticker span {
  font-family: 'DM Serif Display', serif; font-size: 1.4rem;
  white-space: nowrap; text-transform: uppercase; letter-spacing: .02em;
  display: flex; align-items: center; gap: 2rem;
}
.ticker span::after {
  content: "✦"; color: var(--ink);
  display: inline-block; transform: translateY(0);
}

/* ── Masthead / Header ── */
.masthead, .site-header, .nav {
  position: sticky !important; top: 36px !important; z-index: 8500 !important;
  background: var(--paper) !important;
  border-bottom: 3px solid var(--ink) !important;
  box-shadow: 0 4px 0 rgba(26,20,16,.08) !important;
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 1rem !important;
  padding: .8rem clamp(1rem, 4vw, 4rem) !important;
  backdrop-filter: blur(16px) !important;
}
.brand, .brand-mark, .head-nav {
  font-family: 'DM Serif Display', serif !important;
  text-transform: none !important; color: var(--ink) !important;
  letter-spacing: -.04em !important; line-height: .92 !important;
  font-size: clamp(1.35rem, 2.2vw, 2.2rem) !important;
  text-shadow: none !important;
}
.brand small, .brand-mark em {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-weight: 400; font-size: .72rem; letter-spacing: .14em;
  color: var(--muted); text-shadow: none; margin-top: .2rem;
  text-transform: uppercase;
}

/* ── Navigation Links ── */
.site-nav, .main-nav, .nav-links {
  display: flex !important; align-items: center !important;
  gap: .3rem !important; margin: 0 !important; padding: 0 !important;
}
.site-nav a, .site-nav button, .main-nav a, .main-nav button, .nav-links a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: .88rem !important; font-weight: 600 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  background: transparent !important; border: 3px solid transparent !important;
  border-radius: 0px ; color: var(--ink) !important;
  padding: .48rem .82rem !important; line-height: 1 !important;
  cursor: pointer !important; transition: all .2s ease !important;
}
.site-nav a.active, .site-nav a:hover, .site-nav button:hover,
.department-trigger.active, .main-nav a.active, .main-nav a:hover,
.nav-links a.active, .nav-links a:hover {
  background: var(--red) !important; color: #fff !important;
  border-color: var(--ink) !important; box-shadow: var(--shadow-sm) !important;
  transform: translate(-2px, -2px) !important;
}
.nav-actions { display: flex; align-items: center; gap: .65rem; }
.login-pill, .logout-btn, .btn-nav {
  border: 3px solid var(--ink) !important; background: var(--green) !important;
  color: #fff !important; border-radius: 0px ;
  box-shadow: var(--shadow-sm) !important; padding: .56rem 1rem !important;
  font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: .04em !important; font-size: .85rem !important;
}
.mobile-logout { display: none !important; }
@media (max-width: 1100px) {
  .mobile-logout {
    display: flex !important; justify-content: center !important;
    margin-top: 1rem !important; padding: .8rem !important;
    border: 3px solid var(--ink) !important; font-weight: 700 !important;
    text-transform: uppercase !important; color: #fff !important;
    box-shadow: var(--shadow-sm) !important;
  }
}
.menu-toggle, .hamburger {
  display: none !important; background: var(--paper2) !important;
  border: 3px solid var(--ink) !important; border-radius: 0px !important;
  box-shadow: var(--shadow-sm) !important; padding: .5rem !important;
}
.menu-toggle span, .hamburger span {
  display: block !important; 
  width: 24px !important; 
  height: 3px !important; 
  min-height: 3px !important;
  background: var(--ink) !important; 
  margin: 0 !important;
}

/* ── Hero Section ── */
.hero-cjp {
  min-height: calc(100vh - 118px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 5vw, 5rem) 3rem;
}
.mini-line {
  font-family: 'DM Serif Display', serif; font-size: 2.2rem;
  margin: 0; letter-spacing: -.06em; color: var(--red);
}
.live-line, .eyebrow, .section-kicker {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); font-size: .92rem; margin: .2rem 0 .8rem;
}
.official {
  display: inline-flex; align-items: center;
  background: var(--green); color: #fff;
  border: 3px solid var(--ink); border-radius: 0px ;
  padding: .42rem .8rem; font-weight: 700;
  text-transform: uppercase; box-shadow: var(--shadow-sm);
  margin: .4rem 0 1.1rem; font-size: .82rem;
}

/* ── Headings (All Pages) ── */
.hero-cjp h1, .movement-intro h2, .barrel-section h2,
.vision-section h2, .manifesto-section h2, .section-head h2,
.join-section h2, .page-title, .lab-title, .forum-title,
.insights-heading, .login-header h2 {
  font-family: 'DM Serif Display', serif !important;
  text-transform: none !important; letter-spacing: -.04em !important;
  line-height: .85 !important; color: var(--ink) !important;
  margin: .35rem 0 1.1rem !important;
}
.hero-cjp h1 {
  font-size: clamp(4.2rem, 10vw, 10rem);
  text-shadow: 4px 4px 0 var(--green), 8px 8px 0 rgba(26,20,16,.08);
}
.hero-cjp h1 span {
  font-family: 'Playfair Display', serif; font-style: italic;
  color: var(--red);
  text-shadow: 2px 2px 0 var(--ink), 5px 5px 0 var(--yellow);
}
.hero-desc {
  font-size: clamp(1.02rem, 1.4vw, 1.22rem); font-weight: 500;
  max-width: 720px; color: var(--muted); line-height: 1.65;
}

/* ── CTA Buttons ── */
.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.5rem 0; }
.cta-row a, .movement-card b, .section-head a, .join-section a,
.back-link, .btn-download, .answer-btn, .admin-btn, button[type=submit] {
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--ink) !important; border-radius: 0px ;
  background: var(--ink) !important; color: var(--paper) !important;
  padding: .78rem 1.15rem !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .04em !important;
  box-shadow: var(--shadow-sm) !important; font-size: .88rem !important;
  transition: all .2s ease !important;
}
.cta-row a:hover, .movement-card b:hover, .section-head a:hover,
.join-section a:hover, .back-link:hover, .btn-download:hover, .answer-btn:hover, .submit-btn:hover {
  transform: translate(-4px, -4px) !important;
  box-shadow: 8px 8px 0 var(--ink) !important;
}
.cta-row a:nth-child(2), .section-head a, .btn-download {
  background: var(--paper2) !important; color: var(--ink) !important;
}

/* ── Metrics ── */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .6rem; margin-top: 1.5rem; max-width: 720px;
}
.metrics div, .vision-section aside div, .stat-card-new, .stat-box {
  background: var(--paper2) !important; border: 3px solid var(--ink) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important;
  padding: .85rem !important;
}
.metrics strong, .vision-section aside b, .stat-number {
  display: block; font-family: 'DM Serif Display', serif !important;
  font-size: clamp(1.7rem, 2.8vw, 2.8rem) !important;
  line-height: .9 !important; color: var(--ink) !important;
}
.metrics span, .vision-section aside span, .stat-label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important; letter-spacing: .08em !important;
  color: var(--muted) !important; text-transform: uppercase !important;
  font-size: .75rem !important;
}

/* ── Poster Card ── */
.poster-card {
  min-height: 520px;
  background: var(--paper2) ;
  border: 3px solid var(--ink) !important;
  box-shadow: var(--shadow) !important;
  padding: 2rem;
  max-width: none !important;
}

/* ── Movement Intro ── */
.movement-intro {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem); align-items: center;
  margin: 6rem clamp(1rem, 5vw, 5rem);
}
.movement-intro h2, .barrel-section h2, .vision-section h2,
.manifesto-section h2, .section-head h2, .join-section h2 {
  font-size: clamp(3rem, 6.5vw, 6.5rem) !important;
}
.movement-intro > p { font-weight: 500; color: var(--muted); font-size: 1.15rem; line-height: 1.6; }
.movement-card {
  grid-column: 2; background: var(--paper2);
  border: 3px solid var(--ink); border-radius: 0px ;
  box-shadow: var(--shadow); padding: 2rem;
  display: grid; grid-template-columns: 1fr auto;
  gap: 1.5rem; align-items: center; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.movement-card:hover {
  transform: translate(-6px, -6px); box-shadow: 12px 12px 0 var(--ink);
}
.movement-card span {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  letter-spacing: .12em; color: var(--red); text-transform: uppercase;
  font-size: .82rem;
}
.movement-card h3 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.8rem, 3.8vw, 3.8rem);
  letter-spacing: -.04em; line-height: .88; margin: .2rem 0;
}
.movement-card p { font-weight: 500; color: var(--muted); }

/* ── Barrel / Event Slider Section ── */
.barrel-section {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem; align-items: center;
  background: var(--ink); color: var(--paper);
  border-block: 4px solid var(--ink);
  margin: 6rem 0;
}
.barrel-section h2, .barrel-section p { color: var(--paper) !important; }
.green { color: var(--green) !important; }
.barrel-window {
  height: 390px; perspective: 1300px;
  display: grid; place-items: center; overflow: hidden;
}
.barrel-cylinder {
  position: relative; width: min(540px, 92vw); height: 260px;
  transform-style: preserve-3d; animation: spinBarrel 18s linear infinite;
}
.barrel-cylinder:hover { animation-play-state: paused; }
.barrel-card {
  position: absolute; inset: 0;
  background: var(--paper2); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 0px ;
  box-shadow: var(--shadow-sm); padding: 1.4rem;
  display: flex; flex-direction: column; justify-content: space-between;
  backface-visibility: hidden;
}
.barrel-card small {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  letter-spacing: .1em; color: var(--red); text-transform: uppercase;
  font-size: .78rem;
}
.barrel-card h3 {
  font-family: 'DM Serif Display', serif; font-size: 2.6rem;
  letter-spacing: -.04em; margin: 0; line-height: .88;
}
.barrel-card p { color: var(--ink) !important; font-weight: 500; }
.barrel-card:nth-child(1) { transform: rotateX(0deg) translateZ(205px); }
.barrel-card:nth-child(2) { transform: rotateX(90deg) translateZ(205px); }
.barrel-card:nth-child(3) { transform: rotateX(180deg) translateZ(205px); }
.barrel-card:nth-child(4) { transform: rotateX(270deg) translateZ(205px); }
@keyframes spinBarrel { to { transform: rotateX(-360deg); } }

/* ── Vision Section ── */
.vision-section {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem; align-items: stretch;
  margin: 6rem clamp(1rem, 5vw, 5rem);
}
.vision-section > div, .vision-section article, .vision-section aside, .about-image {
  background: var(--paper2); border: 3px solid var(--ink);
  border-radius: 0px ; box-shadow: var(--shadow); padding: 2rem;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vision-section > div:hover, .vision-section article:hover, .vision-section aside:hover, .about-image:hover {
  transform: translate(-6px, -6px); box-shadow: 12px 12px 0 var(--ink);
}
.vision-section p, .vision-section article p {
  font-size: 1rem; font-weight: 400; color: var(--muted); line-height: 1.65;
}
.vision-section h3, .vision-section aside h3 {
  font-family: 'DM Serif Display', serif; font-size: 1.8rem;
  letter-spacing: -.04em;
}
.vision-section aside div { margin: .75rem 0; }

/* ── Faculty / Manifesto ── */
.manifesto-section {
  margin: 6rem clamp(1rem, 5vw, 5rem);
}

.manifesto-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.manifesto-list article {
  min-height: 200px; background: var(--paper2);
  border: 3px solid var(--ink); border-radius: 0px ;
  box-shadow: var(--shadow); padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.manifesto-list article:hover {
  transform: translate(-6px, -6px); box-shadow: 12px 12px 0 var(--ink);
}
.manifesto-list span {
  font-family: 'DM Serif Display', serif; font-size: 2.8rem;
  color: var(--red); line-height: .85;
}
.manifesto-list p {
  font-family: 'DM Serif Display', serif; font-size: 1.8rem;
  letter-spacing: -.04em; line-height: .9; margin: 0;
}
.manifesto-list b {
  font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  letter-spacing: .1em; color: var(--muted); font-size: .82rem;
  text-transform: uppercase;
}

/* ── Students Section ── */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
  margin: 6rem clamp(1rem, 5vw, 5rem) 2.5rem;
}
.students-grid, .container-students {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1.5rem !important;
  margin: 0 clamp(1rem, 5vw, 5rem) 6rem !important;
}

/* ── Cards (Universal) ── */
.student-card, .card, .program-card, .resource-section, .showcase-card,
.content-card, .post-query-card, .query-card, .queries-section,
.stat-card-new, .table-wrap, .admin-controls, .login-card {
  background: var(--paper2) !important; border: 3px solid var(--ink) !important;
  border-radius: 0px ; box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important; backdrop-filter: none !important;
  transition: all .2s ease !important;
}
.student-card {
  padding: 1.5rem; min-height: 150px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer;
}
.student-card:hover, .card:hover, .program-card:hover {
  transform: translate(-6px, -6px); box-shadow: 12px 12px 0 var(--ink) !important;
}
.student-card span {
  font-family: 'DM Serif Display', serif; font-size: 2.2rem;
  color: var(--red); line-height: .85;
}
.student-card h3, .card h3, .program-card h3, .resource-section h2, .showcase-card h2 {
  font-family: 'DM Serif Display', serif !important;
  letter-spacing: -.04em !important; line-height: .92 !important;
  color: var(--ink) !important;
}
.student-card p, .card p, .resource-item span, .event-desc, .sub-text {
  font-weight: 500 !important; color: var(--muted) !important;
}

/* ── Join CTA Section ── */
.join-section {
  margin: 6rem clamp(1rem, 5vw, 5rem);
  padding: clamp(2rem, 5vw, 5rem);
  background: var(--red); border: 3px solid var(--ink);
  border-radius: 0px ; box-shadow: var(--shadow); color: #fff;
}
.join-section h2 { color: #fff !important; text-shadow: 3px 3px 0 var(--ink); }
.join-section p { font-size: 1.15rem; font-weight: 500; }

/* ── Footer ── */
.footer-cjp, .footer {
  background: var(--ink) !important; color: var(--paper) !important;
  border-top: 3px solid var(--red); padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 5vw, 5rem) !important;
}
.footer-cjp h2, .footer h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.8rem, 8vw, 8rem);
  letter-spacing: -.04em; line-height: .82; margin: 0 0 1rem;
}

/* ── Department Drawer ── */
.department-drawer {
  position: fixed; top: 0; right: 0;
  width: min(660px, 94vw); height: 100vh;
  background: linear-gradient(135deg, rgba(255, 253, 246, 0.92) 0%, rgba(235, 226, 208, 0.9) 100%);
  border-left: 6px solid var(--ink);
  box-shadow: -20px 0 50px rgba(0,0,0,0.25), -8px 0 0 rgba(26,20,16,.15);
  z-index: 10000; transform: translateX(110%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: clamp(1.2rem, 4vw, 3rem); overflow: auto;
}
.department-drawer::before {
  content: ''; position: absolute; top: 0; right: 100%;
  width: 100vw; height: 100vh; background: rgba(18, 16, 12, 0.6);
  opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
}
.department-drawer.open::before { opacity: 1; pointer-events: auto; }
.department-drawer.open { transform: translateX(0); }
.drawer-close {
  position: absolute; right: 1rem; top: 1rem;
  width: 48px; height: 48px; border: 3px solid var(--ink);
  border-radius: 50%; background: var(--red); color: #fff;
  box-shadow: var(--shadow-sm); font-size: 1.8rem; line-height: 1;
  transition: transform 0.3s ease, background 0.3s ease;
}
.drawer-close:hover { transform: rotate(90deg) scale(1.1); background: var(--ink); }
.department-drawer h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.8rem, 7vw, 6rem);
  opacity: 0; transform: translateX(30px);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  letter-spacing: -.04em; line-height: .85;
  margin: 1rem 0 2rem;
  text-shadow: 3px 3px 0 var(--green); color: var(--ink);
}
.department-drawer.open h2 { opacity: 1; transform: translateX(0); transition-delay: 0.1s; }
.drawer-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.drawer-columns section {
  background: rgba(255, 255, 255, 0.5); border: 2px solid var(--ink);
  border-radius: 0px ; box-shadow: 4px 4px 0 rgba(26,20,16,.1); padding: 1rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.department-drawer.open .drawer-columns section { opacity: 1; transform: translateY(0); }
.department-drawer.open .drawer-columns section:nth-child(1) { transition-delay: 0.2s; }
.department-drawer.open .drawer-columns section:nth-child(2) { transition-delay: 0.3s; }
.drawer-columns h3 {
  font-family: 'DM Serif Display', serif;
  letter-spacing: -.04em; font-size: 1.7rem; margin: .2rem 0 1rem;
}
.drawer-columns a {
  display: block; padding: .8rem; margin: 0.5rem 0 !important;
  background: rgba(255, 253, 246, 0.8) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 3px 3px 0 rgba(26,20,16,.1) !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.drawer-columns b {
  display: block; font-family: 'DM Serif Display', serif;
  letter-spacing: -.03em; font-size: 1.05rem;
}
.drawer-columns span {
  font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  letter-spacing: .08em; color: var(--muted); font-size: .78rem;
  text-transform: uppercase;
}

/* ── Floating Sections Nav ── */
.floating-sections {
  position: fixed; left: 50%; bottom: 1rem;
  transform: translate(-50%, 120px); opacity: 0; z-index: 8000;
  display: flex; gap: .4rem;
  background: var(--ink); border: 3px solid var(--ink);
  border-radius: 0px ; box-shadow: var(--shadow-sm);
  padding: .35rem; transition: .35s;
}
.floating-sections.visible { opacity: 1; transform: translate(-50%, 0); }
.floating-sections a {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  letter-spacing: .06em; border-radius: 0px ;
  padding: .5rem .85rem; color: var(--paper); font-size: .82rem;
  text-transform: uppercase;
}
.floating-sections a:hover { background: var(--red); color: #fff; }

/* ── Popup / Modal ── */
.popup-modal, .popup {
  display: none; position: fixed; inset: 0;
  background: rgba(26,20,16,.7); z-index: 11000;
  align-items: center; justify-content: center;
}
.popup-content {
  background: var(--paper2) !important; color: var(--ink) !important;
  border: 5px solid var(--ink) !important; border-radius: 0px ;
  box-shadow: var(--shadow) !important; padding: 2rem !important;
  min-width: min(400px, 92vw) !important; position: relative;
}
.close-btn {
  position: absolute; right: 1rem; top: 1rem;
  border: 3px solid var(--ink); background: var(--red); color: #fff;
  border-radius: 50%; width: 36px; height: 36px; font-weight: 700;
}
.popup-content h3 {
  font-family: 'DM Serif Display', serif; font-size: 2.2rem;
  letter-spacing: -.04em;
}

/* ── Form Inputs ── */
input, textarea, .search-input, .admin-input {
  background: var(--cream) !important; color: var(--ink) !important;
  border: 3px solid var(--ink) !important; border-radius: 0px !important;
  padding: 1rem !important; font-weight: 500 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* ── Page Cover  ── */
.page-cover {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(330px, 44vw, 520px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.2rem, 4vw, 3rem) !important;
  margin: 0 0 clamp(1.4rem, 3vw, 2.4rem) !important;
  background: var(--paper) ;
}
.page-cover::before {
  content: attr(data-page); position: absolute; right: -1.3rem; top: -.8rem;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(5rem, 18vw, 14rem);
  letter-spacing: -.06em; color: rgba(26,20,16,.1);
  z-index: -1; line-height: .8;
}
.page-cover::after {
  content: "Official Department Desk"; position: absolute; top: 1rem; left: 1rem;
  background: var(--ink); color: var(--paper);
  border: 3px solid var(--ink); border-radius: 0px ;
  padding: .42rem .72rem; font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; letter-spacing: .1em; font-size: .82rem;
  text-transform: uppercase;
}
.cover-kicker {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; font-size: 1rem;
  background: var(--paper2); border: 2px solid var(--ink);
  border-radius: 0px ; box-shadow: var(--shadow-sm);
  padding: .4rem .72rem; width: max-content; max-width: 100%;
}
.page-cover h1 {
  font-family: 'DM Serif Display', serif !important;
  letter-spacing: -.06em !important; line-height: .82 !important;
  font-size: clamp(3.8rem, 10vw, 9rem) !important;
  margin: .65rem 0 !important;
  text-shadow: 3px 3px 0 var(--paper), 6px 6px 0 rgba(26,20,16,.12);
  max-width: 1100px; color: var(--ink) !important;
}
.page-cover h1 span {
  font-family: 'Playfair Display', serif; font-style: italic;
  color: var(--red); text-shadow: 2px 2px 0 var(--ink), 4px 4px 0 var(--yellow);
}
.page-cover p {
  font-weight: 500; font-size: clamp(1rem, 1.5vw, 1.25rem);
  max-width: 780px; margin: 0 0 1rem; color: var(--ink) !important;
}
.cover-stats {
  display: flex; gap: .55rem; flex-wrap: wrap;
}
.cover-stats b {
  background: var(--ink); color: var(--paper); border-radius: 0px ;
  padding: .5rem .85rem; font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; letter-spacing: .1em; font-size: .88rem;
  text-transform: uppercase;
}

/* ── Inner pages ── */
.container, .lab-container, .forum-container, .event-container,
.table-wrap, .stats-grid, .table-controls, .section-divider, .insights-hero {
  width: 100% !important; max-width: 1500px !important; margin-inline: auto !important;
}
.container, .lab-container, .forum-container, .event-container {
  padding-top: clamp(1.6rem, 4vw, 4rem) !important;
}
.back-link {
  margin-bottom: 1.25rem !important; background: var(--green) !important;
  color: #fff !important;
}

/* ── Resource Sections ── */
.resource-section, .program-card, .showcase-card, .post-query-card,
.query-card, .content-card, .admin-controls, .stat-card-new, .table-wrap,
.forum-header, .login-card, .highlight-box, .event-info-grid,
.eligibility-card, .requirement-item {
  background: var(--paper2) !important; color: var(--ink) !important;
  border: 3px solid var(--ink) !important; border-radius: 0px ;
  box-shadow: var(--shadow) !important; backdrop-filter: none !important;
}
.program-card:hover,
.query-card:hover, .stat-card-new:hover, .highlight-box:hover {
  transform: translate(-2px, -2px) !important; box-shadow: 7px 7px 0 var(--ink) !important;
}
.resource-section h2, .program-card h3, .showcase-card > h2, .post-query-card h2,
.form-label, .section-heading, .highlight-box h4, .forum-title, .lab-title,
.page-title, .insights-heading, .section-divider h2 {
  font-family: 'DM Serif Display', serif !important;
  letter-spacing: -.04em !important; line-height: .88 !important;
  color: var(--ink) !important;
}

/* ── Academic Resources Grid ── */
.resources-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)) !important;
  gap: 2rem !important;
  margin: 3rem 0 6rem !important;
}
.resource-section {
  padding: clamp(1.5rem, 4vw, 2.5rem) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  height: 100%;
}
.resource-section h2 {
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  margin: 0 0 1.25rem !important;
  border-bottom: 4px solid var(--ink) !important;
  padding-bottom: 0.75rem !important;
}
.resource-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex: 1;
}
.resource-item {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 1rem !important;
  background: var(--cream) !important; border: 3px solid var(--ink) !important;
  border-radius: var(--radius) !important; padding: 1.5rem !important;
  color: var(--ink) !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.resource-item:hover {
  transform: translate(-4px, -4px) !important;
  box-shadow: 8px 8px 0 var(--ink) !important;
}
.resource-item span {
  font-size: 1.05rem !important;
  line-height: 1.4 !important;
}
.resource-item strong {
  display: block !important;
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.6rem !important;
  letter-spacing: -.02em !important;
  margin-bottom: 0.25rem !important;
  color: var(--red) !important;
}
.resource-item span, .event-desc, .highlight-box p, .query-text,
.forum-header p, .sub-text, .info-value, .output-label, .admin-input, .search-input {
  color: var(--ink) !important; font-weight: 500 !important;
}
.btn-download, .answer-btn, .action-btn, .admin-btn, .submit-btn, #submitBtn {
  background: var(--green) !important; color: #fff !important;
  border: 3px solid var(--ink) !important; box-shadow: var(--shadow-sm) !important;
  border-radius: 0px ; font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* ── Event details ── */
.event-hero {
  width: 100% !important; max-height: 620px !important;
  object-fit: cover !important; border: 3px solid var(--ink) !important;
  border-radius: 0px ; box-shadow: var(--shadow) !important;
  background: var(--ink) !important;
}
.event-info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 1rem !important; background: var(--green) !important; color: #fff !important;
}
.info-label {
  color: rgba(255,255,255,.8) !important; font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important; letter-spacing: .1em !important; font-size: .88rem !important;
  text-transform: uppercase !important;
}
.highlights-grid, .photo-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
  gap: 1rem !important;
}
.gallery-img, .photo-gallery img {
  height: clamp(200px, 26vw, 340px) !important; width: 100% !important;
  object-fit: cover !important; border: 3px solid var(--ink) !important;
  border-radius: 0px !important; box-shadow: var(--shadow-sm) !important;
}

/* ── Lab ── */
.code-block, .output-block {
  background: #1a1410 !important; color: #faf5ec !important;
  border: 3px solid var(--ink) !important; border-radius: 0px ;
  box-shadow: var(--shadow-sm) !important; max-width: 100% !important;
  overflow: auto !important; font-size: clamp(.78rem, 1.4vw, .95rem) !important;
}
.output-label {
  font-family: 'Space Grotesk', sans-serif !important; font-weight: 600 !important;
  font-size: 1.1rem !important; letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ── Forum ── */
.forum-container { display: block !important; }
.forum-header {
  text-align: left !important; padding: clamp(1rem, 3vw, 2rem) !important;
  margin-bottom: 1.2rem !important;
}
.forum-title { font-size: clamp(2.8rem, 7vw, 6.5rem) !important; }
.forum-title span, .lab-title span, .page-title span, .insights-heading span {
  font-family: 'Playfair Display', serif !important; font-style: italic !important;
  color: var(--red) !important;
  text-shadow: 2px 2px 0 var(--ink), 4px 4px 0 var(--yellow) !important;
}
.form-group input, .form-group textarea, .admin-input, .search-input, .input-group input {
  background: var(--cream) !important; border: 3px solid var(--ink) !important;
  border-radius: var(--radius) !important; color: var(--ink) !important;
  font-weight: 500 !important; box-shadow: var(--shadow-sm) !important;
}
.query-meta {
  font-family: 'Space Grotesk', sans-serif !important; font-weight: 600 !important;
  letter-spacing: .08em !important; color: var(--red) !important;
  font-size: .88rem !important; text-transform: uppercase !important;
}

/* ── Insights table ── */
.stats-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important; padding-top: 0 !important;
}
.stat-card-new { text-align: left !important; }
.stat-icon { filter: none !important; }
.stat-number {
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important; color: var(--ink) !important;
}
.stat-label {
  font-family: 'Space Grotesk', sans-serif !important; font-weight: 500 !important;
  letter-spacing: .12em !important; color: var(--muted) !important;
  text-transform: uppercase !important;
}
.table-wrap { overflow: auto !important; padding: 1rem !important; }
.sgpa-table {
  min-width: 720px !important; border-collapse: separate !important;
  border-spacing: 0 .72rem !important;
}
.sgpa-table thead th {
  font-family: 'Space Grotesk', sans-serif !important; font-weight: 600 !important;
  font-size: .88rem !important; color: var(--ink) !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
}
.sgpa-table tbody tr {
  background: var(--cream) !important; box-shadow: var(--shadow-sm) !important;
}
.sgpa-table tbody td {
  font-weight: 600 !important; color: var(--ink) !important;
  border-top: 3px solid var(--ink) !important; border-bottom: 3px solid var(--ink) !important;
}
.sgpa-table tbody td:first-child { border-left: 3px solid var(--ink) !important; }
.sgpa-table tbody td:last-child { border-right: 3px solid var(--ink) !important; }

/* ── Dashboard ── */
section { scroll-margin-top: 140px; }
.list-item {
  background: var(--cream) !important; border: 3px solid var(--ink) !important;
  border-radius: var(--radius) !important; margin: .65rem 0 !important;
  padding: 1rem !important; color: var(--ink) !important;
}
.hero-name {
  font-family: 'DM Serif Display', serif !important; color: var(--ink) !important;
  background: none !important; -webkit-text-fill-color: var(--ink) !important;
  text-shadow: 3px 3px 0 var(--green) !important;
  letter-spacing: -.04em !important;
}
.grade-pill {
  background: var(--yellow) !important; border: 3px solid var(--ink) !important;
  color: var(--ink) !important; border-radius: 0px ;
}

/* ── Drawer and floating menu ── */
.department-drawer {
  background: rgba(255, 253, 246, 0.85) !important; 
  backdrop-filter: blur(12px) !important; 
  -webkit-backdrop-filter: blur(12px) !important;
  border-left: 5px solid var(--ink) !important;
  box-shadow: -15px 0 40px rgba(0,0,0,0.15), -8px 0 0 rgba(26,20,16,.12) !important;
  width: min(560px, 94vw) !important;
}
.department-drawer h2 { font-size: clamp(2.8rem, 7vw, 5.5rem) !important; }
.drawer-columns a {
  background: var(--cream) !important; border: 3px solid var(--ink) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.drawer-columns a:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}
.floating-sections {
  background: var(--ink) !important; border: 3px solid var(--ink) !important;
  border-radius: 0px ; box-shadow: var(--shadow) !important;
  padding: .35rem !important;
}
.floating-sections a {
  background: var(--paper) !important; color: var(--ink) !important;
  border-radius: 0px ; font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important; letter-spacing: .08em !important;
  padding: .55rem .78rem !important;
}

/* ── Bottom Nav ── */
.bottom-nav {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 19000; display: none; gap: .5rem;
  background: rgba(255, 253, 246, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  padding: .5rem; max-width: calc(100vw - 2rem); overflow-x: auto;
  transition: transform 0.3s ease; scrollbar-width: none;
}
.bottom-nav::-webkit-scrollbar { display: none; }
.bottom-nav a {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: .06em; white-space: nowrap;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0px ;
  padding: .6rem 1rem; font-size: .85rem; text-transform: uppercase;
  transition: all 0.2s ease; display: inline-flex; align-items: center;
}
.bottom-nav a:hover {
  background: var(--yellow); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink);
}
.bottom-nav a.active { 
  background: var(--red); color: #fff; transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); 
}

/* ── Home polish ── */
.hero-cjp { padding-top: clamp(1.5rem, 4vw, 4rem) !important; }
.poster-card { animation: posterFloat 6s ease-in-out infinite; }
@keyframes posterFloat {
  0%, 100% { transform: rotate(1deg) translateY(0); }
  50% { transform: rotate(-.5deg) translateY(-8px); }
}
.barrel-cylinder { transform-style: preserve-3d; }
.barrel-card { backface-visibility: hidden; }
.manifesto-list article, .student-card { position: relative; overflow: hidden; }
.manifesto-list article::after, .student-card::after {
  content: ""; position: absolute; inset: auto -20% -65% -20%;
  height: 100%; background: var(--green); transform: rotate(-8deg);
  z-index: 0; opacity: .12;
}
.manifesto-list article > *, .student-card > * { position: relative; z-index: 1; }

.footer {
  background: var(--ink) !important; color: var(--paper) !important;
  border-top: 5px solid var(--red) !important;
  padding: 2rem !important; text-align: center !important; font-weight: 500 !important;
}

/* ── Reveal animation ── */
.ultra-reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease var(--delay), transform .5s ease var(--delay);
}
.ultra-reveal.is-visible { opacity: 1; transform: none; }

/* ── Cockroach Janata Brutalist Overhauls ── */
.hero-brutalist {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 5px solid var(--ink); margin: 2rem clamp(1rem, 5vw, 4rem);
  background: var(--paper2); box-shadow: 12px 12px 0 var(--ink);
}
.hero-main-text {
  padding: clamp(2rem, 5vw, 5rem); border-right: 5px solid var(--ink);
  display: flex; flex-direction: column; justify-content: center;
}
.official-badge {
  display: inline-block; border: 3px solid var(--ink); padding: .4rem .8rem;
  font-weight: 700; font-size: .85rem; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 2rem; width: max-content;
  background: var(--yellow); color: var(--ink);
}
.hero-main-text h1 {
  font-family: 'DM Serif Display', serif !important; font-size: clamp(2.5rem, 10vw, 8rem) !important;
  line-height: .85 !important; margin: 0 0 1.5rem !important; text-transform: uppercase;
}
.highlight-red {
  background: var(--red); color: #fff; padding: 0 .5rem; display: inline-block;
}
.hero-stats-sidebar { display: flex; flex-direction: column; }
.stat-block-heavy {
  flex: 1; padding: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 5px solid var(--ink);
  display: flex; flex-direction: column; justify-content: center; transition: background .3s;
}
.stat-block-heavy:last-child { border-bottom: none; }
.stat-block-heavy strong {
  font-family: 'DM Serif Display', serif; font-size: clamp(2rem, 8vw, 5rem);
  line-height: 1; display: block;
}
.stat-block-heavy span {
  font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; font-weight: 600;
  letter-spacing: .1em; font-size: .9rem; margin-top: .5rem;
}

/* ── Full-Width Hero Variant (For Subpages) ── */
.hero-brutalist.full-width {
  grid-template-columns: 1fr;
}
.hero-brutalist.full-width .hero-main-text {
  border-right: none;
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem);
}
.hero-brutalist.full-width.has-stats .hero-main-text {
  border-bottom: 5px solid var(--ink);
}
.hero-brutalist.full-width .hero-stats-sidebar {
  flex-direction: row;
}
.hero-brutalist.full-width .stat-block-heavy {
  flex: 1;
  border-bottom: none;
  border-right: 5px solid var(--ink);
  text-align: center;
}
.hero-brutalist.full-width .stat-block-heavy:last-child {
  border-right: none;
}

@media (max-width: 760px) {
  .hero-brutalist.full-width .hero-stats-sidebar {
    flex-direction: column !important;
  }

  /* Scale down the massive 6rem desktop margins for mobile */
  .movement-intro, .vision-section, .manifesto-section, .join-section, .barrel-section, .section-head {
    margin-top: 3rem !important;
    margin-bottom: 2.5rem !important;
  }
  .hero-brutalist.full-width .stat-block-heavy {
    border-right: none !important;
    border-bottom: 3px solid var(--ink) !important;
  }
  .hero-brutalist.full-width .stat-block-heavy:last-child {
    border-bottom: none !important;
  }
}

/* ── Brutalist About Section ── */
.about-brutalist {
  display: grid; grid-template-columns: 1fr 1fr; border: 5px solid var(--ink);
  margin: 3rem clamp(1rem, 5vw, 4rem); box-shadow: 12px 12px 0 var(--ink);
  background: var(--paper2);
}
.about-content-container {
  padding: clamp(2rem, 5vw, 5rem); border-right: 5px solid var(--ink);
  display: flex; flex-direction: column; justify-content: center;
}
.massive-heading {
  font-family: 'DM Serif Display', serif; font-size: clamp(2.5rem, 10vw, 7rem);
  line-height: .85; margin: 0 0 2rem; color: var(--ink); text-transform: uppercase;
}
.about-body p { font-size: 1.15rem; line-height: 1.6; font-weight: 500; margin-bottom: 1.5rem; }
.about-img-container { overflow: hidden; display: flex; }
.about-img-container img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.2); transition: filter .4s ease; min-height: 100%;
}
.about-img-container:hover img { filter: grayscale(0%); }

/* =======================================================================
   RESPONSIVE BREAKPOINTS
   ======================================================================= */

@media (max-width: 1100px) {
  .hero-cjp, .barrel-section, .vision-section, .movement-intro {
    grid-template-columns: 1fr;
  }
  .movement-card { grid-column: auto; }
  .manifesto-list { grid-template-columns: repeat(2, 1fr); }
  .poster-card { min-height: 400px; }
  .site-nav, .main-nav, .nav-links {
    position: fixed !important; right: 1rem; left: 1rem; top: 105px;
    background: var(--paper2) !important; border: 2px solid var(--ink);
    border-radius: 0px ; box-shadow: var(--shadow);
    padding: 1rem !important; display: none !important; flex-direction: column !important;
    align-items: stretch !important;
  }
  .site-nav.active, .main-nav.active, .nav-links.active { display: flex !important; }
  .site-nav a, .site-nav button, .main-nav a, .main-nav button, .nav-links a {
    width: 100%; justify-content: center;
  }
  .menu-toggle, .hamburger { display: block !important; }
  .drawer-columns { grid-template-columns: 1fr; }
  .floating-sections { display: none; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  
  .hero-brutalist, .about-brutalist { grid-template-columns: 1fr; }
  .hero-main-text, .about-content-container { border-right: none; border-bottom: 5px solid var(--ink); }
  .hero-stats-sidebar { flex-direction: row; flex-wrap: wrap; }
  .stat-block-heavy { flex: 1 1 50%; border-bottom: none; border-right: 5px solid var(--ink); }
  .stat-block-heavy:nth-child(even) { border-right: none; }
  .stat-block-heavy:nth-child(1), .stat-block-heavy:nth-child(2) { border-bottom: 5px solid var(--ink); }
}

@media (max-width: 660px) {
  .top-strip { justify-content: flex-start; }
  .hero-cjp h1 { font-size: clamp(3.2rem, 18vw, 5.5rem); }
  .poster-card h2 { font-size: 3.8rem; }
  .metrics, .manifesto-list { grid-template-columns: 1fr; }
  .movement-intro, .vision-section, .manifesto-section, .issues-section,
  .barrel-section, .container, .lab-container, .forum-container,
  .event-container { padding-inline: 1rem !important; }
  .barrel-window { height: 320px; }
  .barrel-cylinder { width: 88vw; height: 220px; }
  .barrel-card:nth-child(1) { transform: rotateX(0deg) translateZ(155px); }
  .barrel-card:nth-child(2) { transform: rotateX(90deg) translateZ(155px); }
  .barrel-card:nth-child(3) { transform: rotateX(180deg) translateZ(155px); }
  .barrel-card:nth-child(4) { transform: rotateX(270deg) translateZ(155px); }
  .section-head { align-items: flex-start; flex-direction: column; }
  .drawer-close { width: 42px; height: 42px; }
  .brand { font-size: 1.25rem !important; }
  .login-pill { display: none !important; }
  
  .hero-stats-sidebar { flex-direction: column; }
  .stat-block-heavy { flex: 1 1 100%; border-right: none !important; border-bottom: 5px solid var(--ink) !important; }
  .stat-block-heavy:last-child { border-bottom: none !important; }
  .about-img-container img { min-height: 350px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* FINAL REPAIR PASS: layout safety, no hidden text, sideways event barrel, responsive polish */
:root {
  --safe-top: 118px;
}
html, body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden !important;
}
body {
  opacity: 1 !important;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { min-width: 0; }
img, video, canvas, svg { max-width: 100%; }

/* Prevent poster/newspaper typography from clipping or hiding behind overlays */
.hero-cjp h1,
.poster-card h2,
.page-cover h1,
.movement-intro h2,
.barrel-section h2,
.vision-section h2,
.manifesto-section h2,
.section-head h2,
.join-section h2,
.forum-title,
.lab-title,
.page-title,
.insights-heading,
.login-poster h1,
.login-header h2,
.department-drawer h2 {
  line-height: .88 !important;
  overflow: visible !important;
  text-wrap: balance;
  overflow-wrap: break-word;
}
p, span, b, strong, a, li, td, th, label, input, textarea, button { overflow-wrap: break-word; }

/* Header + menus: keep layers separate so nav never covers content unexpectedly */
.top-strip { z-index: 30000 !important; }
.masthead, .nav, .site-header {
  z-index: 29000 !important;
  isolation: isolate;
}
.site-nav, .main-nav, .nav-links { z-index: 29500 !important; }
.site-nav.active, .main-nav.active, .nav-links.active { z-index: 31000 !important; }
.scroll-container, main { position: relative; z-index: 1; }
.masthead + .department-drawer,
.department-drawer {
  z-index: 32000 !important;
  top: 0 !important;
  padding-top: clamp(1.25rem, 3vw, 2.4rem) !important;
}
.drawer-close {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  float: right !important;
  background: var(--red) !important;
  color: #fff !important;
  border: 3px solid var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}
.department-drawer.open { transform: translateX(0) !important; }
.drawer-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}
.drawer-columns section { min-width: 0 !important; }
.drawer-columns a { display: block !important; margin: .7rem 0 !important; }

/* Inner pages: give content breathing room and stop card text from being clipped */
.container, .lab-container, .forum-container, .event-container,
.insights-hero, .stats-grid, .table-controls, .section-divider, .table-wrap {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.page-cover, .poster-card, .resource-section, .program-card, .showcase-card, .post-query-card,
.query-card, .content-card, .stat-card-new, .highlight-box, .login-poster, .login-panel, .login-card {
  overflow: visible !important;
}
.page-cover {
  margin-top: clamp(.75rem, 2vw, 1.4rem) !important;
}
.page-cover::before { z-index: 0 !important; pointer-events: none !important; }
.page-cover > * { position: relative !important; z-index: 1 !important; }
.page-cover::after { z-index: 2 !important; }
.cover-kicker { width: fit-content !important; max-width: 100% !important; }
.cover-stats { position: relative !important; z-index: 1 !important; }

/* Sideways rolling barrel: rotate around the Y axis, not top-to-bottom */
.barrel-section {
  grid-template-columns: 1fr 1fr !important;
  overflow: hidden !important;
  position: relative !important;
}
.barrel-window {
  min-height: 430px !important;
  height: auto !important;
  overflow: visible !important;
  perspective: 1600px !important;
  display: grid !important;
  place-items: center !important;
  padding: 2.5rem 0 !important;
}
.barrel-cylinder {
  width: min(600px, 72vw) !important;
  height: 285px !important;
  transform-style: preserve-3d !important;
  animation: spinBarrelSide 20s linear infinite !important;
  position: relative !important;
}
.barrel-cylinder:hover { animation-play-state: paused !important; }
.barrel-card {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  justify-content: space-between !important;
}
.barrel-card h3 { font-size: clamp(2rem, 4vw, 3.4rem) !important; line-height: .9 !important; }
.barrel-card p { font-size: clamp(.95rem, 1.5vw, 1.08rem) !important; line-height: 1.35 !important; }
.barrel-card:nth-child(1) { transform: rotateY(0deg) translateZ(300px) !important; }
.barrel-card:nth-child(2) { transform: rotateY(90deg) translateZ(300px) !important; }
.barrel-card:nth-child(3) { transform: rotateY(180deg) translateZ(300px) !important; }
.barrel-card:nth-child(4) { transform: rotateY(270deg) translateZ(300px) !important; }
@keyframes spinBarrelSide { to { transform: rotateY(-360deg) } }

/* Repair login: no cramped/hidden poster text, clean form layout */
body.login-page-fixed {
  min-height: 100svh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.login-stage {
  align-items: stretch !important;
  min-height: auto !important;
  padding-bottom: 2rem !important;
}
.login-poster,
.login-panel {
  min-height: auto !important;
  overflow: visible !important;
}
.login-poster {
  min-height: 560px !important;
  display: flex !important;
  gap: 1.2rem !important;
}
.login-poster::before { z-index: 0 !important; }
.login-poster > * { position: relative !important; z-index: 1 !important; }
.login-poster h1 {
  font-size: clamp(3.8rem, 7.5vw, 7.7rem) !important;
  letter-spacing: -.04em !important;
  max-width: 100% !important;
}
.poster-copy { max-width: 100% !important; }
.login-panel { justify-content: flex-start !important; }
.login-card { max-width: 100% !important; }
.input-group input { font-size: 1rem !important; }
.error-message { position: relative !important; z-index: 2 !important; }

/* Tables and long code blocks should scroll instead of breaking layout */
.table-wrap, .code-block, .output-block { overflow: auto !important; -webkit-overflow-scrolling: touch; }
.sgpa-table { width: 100% !important; }
.code-block, .output-block { white-space: pre !important; }

/* Forms and forum cards */
.form-group input, .form-group textarea, .admin-input, .search-input, .input-group input {
  max-width: 100% !important;
}
.query-card, .post-query-card, .forum-header { position: relative !important; z-index: 1 !important; }
.query-actions, .task-actions, .cta-row { display: flex !important; flex-wrap: wrap !important; gap: .65rem !important; }

/* Mobile/tablet: avoid overlay collisions and use a horizontal barrel rail */
@media (max-width: 1180px) {
  .barrel-section { grid-template-columns: 1fr !important; }
  .barrel-window { min-height: 390px !important; }
  .barrel-cylinder { width: min(560px, 78vw) !important; height: 270px !important; }
  .barrel-card:nth-child(1) { transform: rotateY(0deg) translateZ(280px) !important; }
  .barrel-card:nth-child(2) { transform: rotateY(90deg) translateZ(280px) !important; }
  .barrel-card:nth-child(3) { transform: rotateY(180deg) translateZ(280px) !important; }
  .barrel-card:nth-child(4) { transform: rotateY(270deg) translateZ(280px) !important; }
}

@media (max-width: 760px) {
  :root { --safe-top: 104px; }
  .ticker { padding: 0.6rem 0 !important; margin: 1.5rem 0 2.5rem !important; width: 110vw !important; }
  .ticker span { font-size: 1rem !important; gap: 1.5rem !important; }
  .top-strip { height: 32px !important; }
  .strip-track span { font-size: .95rem !important; }
  .masthead, .nav, .site-header {
    min-height: 68px !important;
    padding: .65rem .8rem !important;
    gap: .55rem !important;
  }
  .brand, .head-nav {
    max-width: 210px !important;
    font-size: 1.15rem !important;
    line-height: .9 !important;
    text-shadow: none !important;
  }
  .site-nav, .main-nav, .nav-links {
    max-height: calc(100svh - 122px) !important;
    overflow: auto !important;
  }
  .department-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: 0 !important;
    padding: 1rem !important;
  }
  .drawer-columns { grid-template-columns: 1fr !important; }
  .department-drawer h2 { font-size: clamp(3rem, 14vw, 5.2rem) !important; }
  .hero-cjp, .movement-intro, .vision-section, .manifesto-section, .issues-section, .barrel-section,
  .container, .lab-container, .forum-container, .event-container, .insights-hero, .stats-grid, .table-wrap, .table-controls, .section-divider {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }
  .hero-cjp h1, .page-cover h1 {
    font-size: clamp(3.05rem, 15vw, 5.7rem) !important;
    letter-spacing: -.04em !important;
    line-height: .92 !important;
    text-shadow: 2px 2px 0 var(--paper), 4px 4px 0 rgba(26,20,16,.1) !important;
  }
  .poster-card h2, .movement-intro h2, .vision-section h2, .manifesto-section h2, .section-head h2, .join-section h2, .barrel-section h2 {
    font-size: clamp(2.75rem, 13vw, 5rem) !important;
    line-height: .92 !important;
  }
  .page-cover { min-height: auto !important; padding-top: 4.4rem !important; }
  .page-cover::after { font-size: .78rem !important; max-width: calc(100% - 1.4rem) !important; white-space: normal !important; }
  .metrics, .manifesto-list, .students-grid, .stats-grid, .highlights-grid, .photo-gallery {
    grid-template-columns: 1fr !important;
  }
  .resource-item, .list-item { flex-direction: column !important; align-items: stretch !important; text-align: center !important; }
  .resource-item span, .list-item > span, .task-info { display: block !important; margin-bottom: 0.75rem !important; justify-content: center !important; width: 100% !important; }
  .resource-item .btn-download, .btn-download, .answer-btn, .task-actions { width: 100% !important; justify-content: center !important; }

  /* Mobile barrel becomes a sideways scroll rail to prevent all 3D overlay issues */
  .barrel-window {
    min-height: 0 !important;
    height: auto !important;
    perspective: none !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 1rem 0 1.4rem !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .barrel-cylinder {
    width: max-content !important;
    height: auto !important;
    display: flex !important;
    gap: 1rem !important;
    transform: none !important;
    animation: none !important;
    padding-right: 1rem !important;
  }
  .barrel-card,
  .barrel-card:nth-child(1), .barrel-card:nth-child(2), .barrel-card:nth-child(3), .barrel-card:nth-child(4) {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 min(82vw, 360px) !important;
    height: auto !important;
    min-height: 235px !important;
    transform: none !important;
    scroll-snap-align: center;
  }
  .barrel-card h3 { font-size: 2.35rem !important; }

  .login-stage {
    width: min(100% - 1rem, 1180px) !important;
    grid-template-columns: 1fr !important;
    margin-top: .8rem !important;
  }
  .login-poster {
    min-height: auto !important;
    padding: 1.1rem !important;
  }
  .login-poster h1 {
    font-size: clamp(3rem, 14vw, 5rem) !important;
    line-height: .92 !important;
    text-shadow: 2px 2px 0 var(--login-ink), 4px 4px 0 var(--login-red) !important;
  }
  .poster-copy { font-size: .98rem !important; line-height: 1.45 !important; }
  .poster-badges { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .poster-badges b { font-size: 1.45rem !important; min-height: 54px !important; }
  .login-header h2 { font-size: clamp(2.8rem, 13vw, 4.7rem) !important; line-height: .9 !important; }
  .bottom-nav { max-width: calc(100vw - 12px) !important; }
}

@media (max-width: 430px) {
  .brand, .head-nav { max-width: 168px !important; font-size: 1rem !important; }
  .menu-toggle { width: 42px !important; height: 40px !important; }
  .hero-cjp h1, .page-cover h1 { font-size: clamp(2.65rem, 14vw, 4.45rem) !important; }
  .poster-card { min-height: auto !important; gap: 1.1rem !important; }
  .poster-card h2 { font-size: clamp(2.75rem, 16vw, 4.6rem) !important; }
  .poster-card blockquote { font-size: 1rem !important; }
  .cover-stats b { font-size: .78rem !important; padding: .4rem .62rem !important; }
  .login-home { font-size: .9rem !important; padding: .48rem .65rem !important; }
  .login-brand { font-size: 1.25rem !important; }
  .login-poster h1 { font-size: clamp(2.7rem, 15vw, 4.25rem) !important; }
  .login-card { padding: 1rem !important; }
  .input-group input { min-height: 52px !important; }
}

/* =========================================================
   FINAL MOBILE + WHOLE-SITE AUDIT FIX
   - removes 3D event barrel everywhere
   - converts events into a clean sideways slider
   - fixes forum/forms/cards/mobile overlays across all pages
   ========================================================= */
html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
body { min-height: 100svh; }
main, .scroll-container { width: 100%; max-width: 100%; overflow: visible !important; }

/* Stable header/menu on all pages */
.masthead, .nav, .site-header { width: 100% !important; max-width: 100vw !important; }
.site-nav, .nav-links, .main-nav { min-width: 0 !important; }
.site-nav a, .site-nav button, .nav-links a, .nav-links button { white-space: nowrap !important; }
.menu-toggle, .hamburger { flex: 0 0 auto !important; }
.brand, .head-nav { min-width: 0 !important; overflow: visible !important; }
.nav-actions { flex: 0 0 auto !important; }

/* Whole page spacing safety */
.hero-cjp, .movement-intro, .vision-section, .manifesto-section, .issues-section, .join-section,
.container, .lab-container, .forum-container, .event-container, .insights-hero, .stats-grid, .table-wrap, .table-controls, .section-divider {
  width: 100% !important;
  max-width: 1500px !important;
  margin-inline: auto !important;
  overflow: visible !important;
}
.page-cover, .poster-card, .movement-card, .vision-section > div, .vision-section article, .vision-section aside,
.resource-section, .program-card, .showcase-card, .post-query-card, .query-card, .forum-header, .content-card,
.stat-card-new, .highlight-box, .event-info-grid, .login-card, .login-panel, .login-poster {
  overflow: visible !important;
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* All giant headings: no clipping */
.hero-cjp h1, .poster-card h2, .movement-intro h2, .vision-section h2, .manifesto-section h2, .section-head h2,
.join-section h2, .page-title, .lab-title, .forum-title, .insights-heading, .page-cover h1, .login-header h2, .login-poster h1,
.barrel-section h2, .event-slide-section h2 {
  line-height: .94 !important;
  padding-bottom: .08em !important;
  overflow: visible !important;
  text-wrap: balance;
}

/* Remove 3D barrel completely: turn old barrel markup into a sideways slide rail */
.barrel-section, .event-slide-section {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: clamp(1rem, 3vw, 2rem) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-block: 3px solid var(--ink) !important;
  max-width: none !important;
  padding: clamp(2.2rem, 5vw, 5rem) clamp(1rem, 5vw, 5rem) !important;
}
.barrel-section h2, .barrel-section p, .event-slide-section h2, .event-slide-section p { color: var(--paper) !important; }
.barrel-window {
  height: auto !important;
  min-height: 0 !important;
  perspective: none !important;
  display: block !important;
  overflow: hidden !important;
  padding: .7rem 0 1.1rem !important;
}
.barrel-cylinder, .event-rail {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  gap: 1rem !important;
  transform: none !important;
  transform-style: flat !important;
  animation: sideSlide 26s linear infinite !important;
  will-change: transform;
}
.barrel-cylinder:hover, .event-rail:hover { animation-play-state: paused !important; }
.barrel-card, .event-slide-card,
.barrel-card:nth-child(1), .barrel-card:nth-child(2), .barrel-card:nth-child(3), .barrel-card:nth-child(4) {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 clamp(280px, 34vw, 470px) !important;
  min-height: 260px !important;
  height: auto !important;
  transform: none !important;
  backface-visibility: visible !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: var(--paper2) !important;
  color: var(--ink) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 0px ;
  box-shadow: var(--shadow) !important;
  padding: 1.25rem !important;
}
.barrel-card h3, .event-slide-card h3 { font-size: clamp(2.1rem, 4vw, 3.6rem) !important; line-height: .92 !important; }
.barrel-card p, .event-slide-card p { color: var(--ink) !important; font-weight: 500 !important; line-height: 1.35 !important; }
@keyframes sideSlide { 0% { transform: translateX(0) } 50% { transform: translateX(min(-24%, -260px)) } 100% { transform: translateX(0) } }

/* Event page: clean slide rail before content, no overlap */
.page-events .event-slide-section, .page-events .barrel-section { margin: 1.2rem auto 2rem !important; border-radius: 0px ; border: 3px solid var(--ink) !important; box-shadow: var(--shadow) !important; }
.page-events .showcase-card { margin: 1.5rem auto 2.2rem !important; max-width: 1180px !important; }
.page-events .event-hero { height: auto !important; max-height: 560px !important; aspect-ratio: 16/9 !important; object-fit: cover !important; background: #111 !important; border: 3px solid var(--ink) !important; border-radius: 0px ; box-shadow: var(--shadow) !important; }
.page-events .event-info-grid, .event-info-grid { background: var(--paper) !important; border: 3px solid var(--ink) !important; border-left: 10px solid var(--green) !important; box-shadow: var(--shadow-sm) !important; }
.info-label, .section-heading { color: var(--red) !important; }
.info-value, .event-desc, .event-desc p, .highlight-box p { color: var(--ink) !important; }
.photo-gallery { align-items: stretch !important; }
.gallery-img { height: clamp(180px, 22vw, 300px) !important; object-fit: cover !important; border: 3px solid var(--ink) !important; border-radius: 0px ; box-shadow: var(--shadow-sm) !important; }

/* Forum hard repair */
.page-forum .forum-container { display: block !important; max-width: 1180px !important; margin-inline: auto !important; }
.forum-header, .post-query-card, .queries-section { margin: 0 auto 1.3rem !important; max-width: 1050px !important; }
.post-query-card, .queries-section { background: var(--paper2) !important; color: var(--ink) !important; border: 3px solid var(--ink) !important; border-radius: 0px ; box-shadow: var(--shadow) !important; padding: clamp(1rem, 3vw, 2rem) !important; }
.form-group { width: 100% !important; margin-bottom: 1rem !important; }
.forum-input, .forum-textarea, .answer-input, .answer-textarea, input, textarea, select, .admin-input, .search-input {
  width: 100% !important;
  max-width: 100% !important;
  border: 3px solid var(--ink) !important;
  border-radius: 0px ;
  background: var(--paper) !important;
  color: var(--ink) !important;
  min-height: 54px !important;
  padding: .9rem 1rem !important;
  font: 500 1rem/1.35 'Space Grotesk', system-ui, sans-serif !important;
  box-shadow: inset 2px 2px 0 rgba(26,20,16,.06) !important;
}
.forum-textarea, .answer-textarea, textarea { min-height: 140px !important; resize: vertical !important; }
.queries-list { display: grid !important; gap: 1rem !important; width: 100% !important; }
.query-card {
  padding: 1rem !important;
  display: block !important;
  border: 3px solid var(--ink) !important;
  border-radius: 0px ;
  background: var(--paper) !important;
  box-shadow: var(--shadow-sm) !important;
  width: 100% !important;
}
.query-meta { display: flex !important; flex-wrap: wrap !important; gap: .6rem 1rem !important; align-items: center !important; margin-bottom: .7rem !important; }
.query-text { font-size: 1.05rem !important; line-height: 1.45 !important; margin: .6rem 0 1rem !important; white-space: pre-wrap !important; }
.query-actions { display: flex !important; flex-wrap: wrap !important; gap: .65rem !important; align-items: center !important; }
.answer-section, .answers-container, .answer-form { margin-top: 1rem !important; max-width: 100% !important; overflow: visible !important; }
.answer-card, .answer-item { border: 3px solid var(--ink) !important; border-radius: 0px ; background: rgba(30,86,49,.08) !important; padding: .8rem !important; margin: .7rem 0 !important; color: var(--ink) !important; }
.no-queries { border: 3px dashed var(--ink) !important; border-radius: 0px ; padding: 1.5rem !important; text-align: center !important; font-weight: 500 !important; background: var(--paper) !important; }

/* Tables and dashboard safety */
.table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
table { min-width: 100% !important; }
.list-item, .resource-item { gap: 1rem !important; }

/* Mobile full audit */
@media (max-width: 1180px) {
  .barrel-section, .event-slide-section { grid-template-columns: 1fr !important; }
  .barrel-window { overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; }
  .barrel-cylinder, .event-rail { animation: none !important; width: max-content !important; max-width: none !important; padding-right: 1rem !important; }
  .barrel-card, .event-slide-card { scroll-snap-align: start !important; flex-basis: min(78vw, 390px) !important; }
}
@media (max-width: 760px) {
  body { padding-bottom: 74px !important; }
  .top-strip { position: sticky !important; top: 0 !important; z-index: 9500 !important; }
  .masthead, .nav, .site-header { position: sticky !important; top: 32px !important; z-index: 9000 !important; min-height: 70px !important; }
  .menu-toggle, .hamburger { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 5px !important; padding: 0.5rem !important; }
  .site-nav, .nav-links, .main-nav {
    position: fixed !important;
    top: 104px !important;
    left: .65rem !important;
    right: .65rem !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: var(--paper2) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0px ;
    box-shadow: var(--shadow) !important;
    padding: .85rem !important;
    max-height: calc(100svh - 145px) !important;
    overflow: auto !important;
  }
  .site-nav.active, .nav-links.active, .main-nav.active { display: flex !important; }
  .site-nav a, .site-nav button, .nav-links a, .main-nav a { width: 100% !important; text-align: left !important; justify-content: flex-start !important; padding: .82rem 1rem !important; border-color: var(--ink) !important; background: var(--paper) !important; }
  .desktop-only, .login-pill { display: none !important; }
  .hero-cjp { grid-template-columns: 1fr !important; min-height: auto !important; padding-top: 1.4rem !important; }
  .poster-card { transform: none !important; animation: none !important; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .movement-card { display: block !important; }
  .vision-section { grid-template-columns: 1fr !important; }
  .section-head { flex-direction: column !important; align-items: flex-start !important; }
  .students-grid, .manifesto-list, .stats-grid, .highlights-grid, .photo-gallery { grid-template-columns: 1fr !important; }
  .page-cover { min-height: auto !important; padding: 3.7rem .95rem 1.2rem !important; }
  .page-cover h1, .hero-cjp h1 { font-size: clamp(2.75rem, 14.5vw, 5.45rem) !important; line-height: .98 !important; letter-spacing: -.04em !important; }
  .page-title, .forum-title, .lab-title, .insights-heading { font-size: clamp(2.5rem, 13vw, 4.8rem) !important; line-height: .98 !important; }
  .poster-card h2, .movement-intro h2, .vision-section h2, .manifesto-section h2, .section-head h2, .join-section h2, .barrel-section h2, .event-slide-section h2 { font-size: clamp(2.45rem, 12.5vw, 4.5rem) !important; line-height: .98 !important; }
  .barrel-section, .event-slide-section { padding: 1.4rem .85rem !important; border-radius: 0 !important; }
  .barrel-card, .event-slide-card { flex-basis: min(84vw, 360px) !important; min-height: 220px !important; }
  .barrel-card h3, .event-slide-card h3 { font-size: 2.15rem !important; }
  .event-hero { aspect-ratio: 4/3 !important; max-height: none !important; }
  .event-info-grid { grid-template-columns: 1fr !important; padding: 1rem !important; }
  .showcase-card { padding: 1rem !important; border-radius: 0px ; }
  .showcase-card > h2 { font-size: clamp(1.65rem, 8vw, 2.45rem) !important; line-height: 1 !important; }
  .forum-header, .post-query-card, .queries-section { width: 100% !important; }
  .query-actions .answer-btn, .submit-btn, button[type=submit] { width: 100% !important; }
  .query-meta { display: block !important; }
  .query-time { display: block !important; margin-top: .25rem !important; }
  .department-drawer { top: 0 !important; height: 100svh !important; overflow: auto !important; z-index: 10000 !important; }
  .bottom-nav { z-index: 9200 !important; }
}
@media (max-width: 430px) {
  .brand, .head-nav { max-width: 165px !important; font-size: .96rem !important; }
  .brand small { display: none !important; }
  .metrics { grid-template-columns: 1fr !important; }
  .cover-stats { display: grid !important; grid-template-columns: 1fr !important; gap: .45rem !important; }
  .cta-row a, .section-head a, .join-section a, .back-link { width: 100% !important; }
  .barrel-card, .event-slide-card { flex-basis: 86vw !important; padding: 1rem !important; }
  .bottom-nav { left: 6px !important; right: 6px !important; gap: .18rem !important; padding: .35rem !important; }
  .bottom-nav a { font-size: .72rem !important; padding: .45rem .38rem !important; }
}
.Moments .showcase-card { max-width: 980px !important; margin: 1rem auto !important; }
.Moments-item-title { font-family: 'DM Serif Display', serif !important; text-transform: none !important; letter-spacing: -.04em !important; font-size: clamp(2rem, 5vw, 4rem) !important; line-height: .95 !important; color: var(--ink) !important; }
.Moments-item-info { font-weight: 500 !important; font-size: 1.05rem !important; line-height: 1.65 !important; color: var(--ink) !important; }
.Moments .gallery-img { width: 100% !important; max-height: 540px !important; object-fit: cover !important; margin: 1rem 0 !important; }

/* FINAL MOBILE + BUG FIX PASS
   This file intentionally loads last. It fixes clipping, overlays, forum/table bugs,
   and replaces the event barrel visual with a flat sideways slider. */

:root { --safe-bottom: 86px; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
body { padding-bottom: var(--safe-bottom); }
.scroll-container, main, .container, .lab-container, .forum-container, .event-container, .table-wrap, .stats-grid, .insights-hero { width: 100%; max-width: 100%; overflow: visible !important; }

/* stop text from getting clipped by the aggressive replica headings */
h1, h2, h3, .page-cover h1, .ultra-replica-cover h1, .forum-title, .insights-heading, .page-title, .lab-title, .login-header h2, .hero-cjp h1, .poster-card h2 { overflow: visible !important; word-break: normal; overflow-wrap: anywhere; hyphens: auto; }
.page-cover h1, .ultra-replica-cover h1 { font-size: clamp(3.1rem, 12vw, 8.5rem) !important; line-height: .88 !important; letter-spacing: -.04em !important; text-shadow: 3px 3px 0 var(--green), 6px 6px 0 rgba(26,20,16,.08) !important; }
.page-cover, .ultra-replica-cover { min-height: auto !important; padding: clamp(2rem, 7vw, 4.5rem) clamp(1rem, 5vw, 4rem) !important; border-radius: 0px ; overflow: hidden !important; }
.cover-stats { display: flex; flex-wrap: wrap; gap: .55rem; max-width: 100%; }
.cover-stats b { white-space: nowrap; }

/* Header/nav stability */
.top-strip { position: sticky !important; top: 0 !important; width: 100%; }
.masthead, .nav { min-height: 78px !important; max-width: 100%; }
.site-nav a, .site-nav button, .nav-links a { white-space: nowrap; }
.menu-toggle, .hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* Drawer never covers content permanently and scrolls internally */
.department-drawer { max-width: min(520px, 92vw) !important; width: min(520px, 92vw) !important; overflow-y: auto !important; padding-bottom: 2rem !important; z-index: 10000 !important; }
.department-drawer h2 { font-size: clamp(2.5rem, 9vw, 5.2rem) !important; line-height: .9 !important; }
.drawer-columns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
.drawer-columns a { min-width: 0; overflow-wrap: anywhere; }

/* Bottom mobile quick nav: do not cover last rows/cards */
.bottom-nav { 
  z-index: 9200 !important; left: 50% !important; transform: translateX(-50%) !important; 
  width: calc(100% - 2rem) !important; max-width: 500px !important; bottom: 1.25rem !important; 
  display: flex !important; justify-content: flex-start !important; gap: .5rem !important; 
  overflow-x: auto !important; scrollbar-width: none; 
  background: rgba(255, 253, 246, 0.95) !important; border: 3px solid var(--ink) !important;
  box-shadow: 6px 6px 0 var(--ink) !important; padding: 0.5rem !important;
}
.bottom-nav::-webkit-scrollbar { display: none !important; }
.bottom-nav a { flex: 0 0 auto !important; white-space: nowrap !important; font-weight: 700 !important; border: 2px solid var(--ink) !important; box-shadow: 2px 2px 0 rgba(26,20,16,.1) !important; }

/* HERO / HOME responsive */
.hero-cjp { width: 100%; grid-template-columns: 1fr 1fr !important; gap: clamp(1rem, 3vw, 3rem) !important; }
.poster-card { min-width: 0 !important; max-width: 100%; }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.movement-card { min-width: 0; }

/* Replace barrel styles with a flat 2D slider look */
.barrel-window, .barrel-track { transform: none !important; animation: none !important; height: auto !important; perspective: none !important; }
.barrel-card { position: relative !important; transform: none !important; animation: none !important; backface-visibility: visible !important; }
.event-slide-section, .event-flat-slider { background: var(--ink) !important; color: var(--paper) !important; border-block: 3px solid var(--ink) !important; padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1rem, 5vw, 5rem) !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(1rem, 4vw, 2.5rem) !important; align-items: center !important; overflow: hidden !important; }
.event-slide-copy h2, .event-flat-copy h2 { font-family: 'DM Serif Display', serif !important; text-transform: none !important; font-size: clamp(2.75rem, 7vw, 6.8rem) !important; line-height: .88 !important; color: var(--paper) !important; }
.event-slide-copy p, .event-flat-copy p { color: var(--paper) !important; font-family: 'Space Grotesk', sans-serif !important; font-weight: 500; }
.event-slider-wrap { min-width: 0; width: 100%; position: relative; }
.event-rail, .event-track { display: flex !important; gap: 1rem !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; padding: .4rem .35rem 1.1rem !important; overscroll-behavior-x: contain; scrollbar-color: var(--green) var(--paper); }
.event-rail::-webkit-scrollbar, .event-track::-webkit-scrollbar { height: 10px; }
.event-rail::-webkit-scrollbar-track, .event-track::-webkit-scrollbar-track { background: var(--paper); border: 2px solid var(--ink); border-radius: 0px ; }
.event-rail::-webkit-scrollbar-thumb, .event-track::-webkit-scrollbar-thumb { background: var(--green); border: 2px solid var(--ink); border-radius: 0px ; }
.event-slide-card, .event-card-flat { flex: 0 0 clamp(260px, 46vw, 420px) !important; scroll-snap-align: start !important; background: var(--paper2) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 0px ; box-shadow: var(--shadow) !important; padding: 1.1rem !important; min-height: 230px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
.event-slide-card h3, .event-card-flat h3 { font-family: 'DM Serif Display', serif !important; font-size: clamp(2rem, 5vw, 4rem) !important; line-height: .86 !important; letter-spacing: -.04em !important; margin: .5rem 0 !important; color: var(--ink) !important; }
.event-slide-card small, .event-card-flat small { font-family: 'Space Grotesk', sans-serif !important; font-weight: 600 !important; letter-spacing: .1em !important; color: var(--red) !important; font-size: .85rem !important; text-transform: uppercase !important; }
.event-slide-card p, .event-card-flat p { color: var(--ink) !important; font-weight: 500 !important; margin: 0 !important; font-family: 'Space Grotesk', sans-serif !important; }
.slider-controls { display: flex; gap: .6rem; margin-top: .9rem; }
.slider-controls button { width: 48px; height: 44px; border: 2px solid var(--ink) !important; background: var(--green) !important; color: #fff !important; border-radius: 0px ; box-shadow: var(--shadow-sm) !important; font-size: 1.25rem; font-weight: 700; cursor: pointer; }

/* Event detail page cards */
.showcase-card, .post-query-card, .queries-section, .resource-section, .program-card, .content-card { overflow: visible !important; max-width: 100% !important; border-radius: 0px ; }
.event-hero { width: 100% !important; max-height: 68vh !important; border: 2px solid var(--ink) !important; border-radius: 0px ; object-fit: cover !important; background: #000 !important; }
.event-info-grid, .highlights-grid, .photo-gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; }
.event-desc, .highlight-box p, .showcase-card p { overflow-wrap: anywhere; }

/* Forum repairs */
.forum-container { padding-top: clamp(1.5rem, 5vw, 4rem) !important; }
.forum-header, .post-query-card, .queries-section { width: 100%; max-width: 980px !important; margin-inline: auto !important; }
.post-query-card, .query-card, .queries-section { background: var(--paper2) !important; border: 2px solid var(--ink) !important; border-radius: 0px ; box-shadow: var(--shadow-sm) !important; color: var(--ink) !important; }
.post-query-card { padding: clamp(1rem, 4vw, 2rem) !important; }
.form-label { font-family: 'DM Serif Display', serif !important; letter-spacing: -.04em !important; color: var(--ink) !important; line-height: .95 !important; }
.forum-input, .forum-textarea, .post-query-card input, .post-query-card textarea, .search-input, .admin-input, input, textarea { width: 100% !important; max-width: 100% !important; border: 2px solid var(--ink) !important; border-radius: 0px ; background: var(--cream) !important; color: var(--ink) !important; padding: 1rem !important; font-weight: 500 !important; outline: none !important; box-shadow: inset 2px 2px 0 rgba(26,20,16,.05) !important; }
.forum-textarea, .post-query-card textarea { min-height: 140px !important; resize: vertical !important; }
.query-card { padding: 1rem !important; margin-bottom: 1rem !important; }
.query-meta, .query-actions { display: flex !important; flex-wrap: wrap !important; gap: .6rem !important; align-items: center !important; justify-content: space-between !important; }
.query-text { font-size: 1rem !important; font-weight: 500 !important; line-height: 1.55 !important; color: var(--ink) !important; overflow-wrap: anywhere !important; }
.answer-form { width: 100% !important; }
.answer-form textarea { min-height: 110px !important; }
.answer-btn, .submit-btn { white-space: normal !important; min-height: 42px !important; }

/* Insights page table/card repair */
.insights-hero { padding-bottom: 1rem !important; }
.insights-heading { font-family: 'DM Serif Display', serif !important; font-size: clamp(2.9rem, 12vw, 6.8rem) !important; line-height: .9 !important; min-height: 0 !important; white-space: normal !important; text-align: center !important; letter-spacing:-.04em !important; }
.stats-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; padding-top: 1rem !important; padding-bottom: 1rem !important; }
.table-wrap { overflow: visible !important; padding-top: 0 !important; }
.sgpa-table { width: 100% !important; max-width: 100% !important; border-collapse: separate !important; border-spacing: 0 12px !important; table-layout: auto !important; }
.sgpa-table thead th { background: var(--ink) !important; color: var(--paper) !important; border: 0 !important; padding: 1rem !important; font-family: 'Space Grotesk', sans-serif !important; letter-spacing: .1em !important; }
.sgpa-table tbody tr { background: var(--paper2) !important; border: 2px solid var(--ink) !important; box-shadow: var(--shadow-sm) !important; border-radius: 0px ; overflow: hidden !important; }
.sgpa-table tbody td { background: transparent !important; color: var(--ink) !important; border-top: 2px solid var(--ink) !important; border-bottom: 2px solid var(--ink) !important; padding: 1rem !important; vertical-align: middle !important; font-weight: 600 !important; }
.sgpa-table tbody td:first-child { border-left: 2px solid var(--ink) !important; border-radius: 0px 0 0 12px !important; }
.sgpa-table tbody td:last-child { border-right: 2px solid var(--ink) !important; border-radius: 0 12px 12px 0 !important; }
.sgpa-cell { min-width: 160px !important; display: grid !important; gap: .5rem !important; }
.sgpa-bar-wrap { height: 10px !important; background: rgba(26,20,16,.1) !important; border: 1px solid var(--ink) !important; border-radius: 0px ; overflow: hidden !important; }
.sgpa-bar-fill { height: 100% !important; background: var(--green) !important; }
.rank-badge { background: var(--red) !important; color: #fff !important; border: 2px solid var(--ink) !important; box-shadow: 2px 2px 0 var(--ink) !important; }

/* Login page repair */
.login-page, .page-login { min-height: 100vh !important; }
.login-shell, .login-container { width: min(1120px, 100%) !important; margin-inline: auto !important; padding: clamp(1rem, 4vw, 3rem) !important; }
.login-card { max-width: 520px !important; width: 100% !important; overflow: visible !important; }

@media (max-width: 1100px) {
  .site-nav, .nav-links { position: fixed !important; top: 112px !important; left: 1rem !important; right: 1rem !important; display: none !important; flex-direction: column !important; align-items: stretch !important; background: var(--paper2) !important; border: 2px solid var(--ink) !important; border-radius: 0px ; box-shadow: var(--shadow) !important; padding: 1rem !important; max-height: calc(100vh - 150px) !important; overflow: auto !important; z-index: 9300 !important; }
  .site-nav.active, .nav-links.active { display: flex !important; }
  .site-nav a, .site-nav button, .nav-links a { width: 100% !important; text-align: left !important; justify-content: flex-start !important; padding: .9rem 1rem !important; border-color: var(--ink) !important; background: var(--cream) !important; }
  .menu-toggle, .hamburger { display: flex !important; flex-direction: column !important; }
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .hero-cjp { grid-template-columns: 1fr !important; }
  .poster-card { min-height: 400px !important; transform: none !important; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .movement-intro, .vision-section, .manifesto-section { grid-template-columns: 1fr !important; }
  .movement-card { grid-column: auto !important; grid-template-columns: 1fr !important; }
  .event-slide-section, .event-flat-slider { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  :root { --safe-bottom: 96px; }
  .top-strip { height: 30px !important; }
  .strip-track span { font-size: .88rem !important; }
  .masthead, .nav { top: 30px !important; min-height: 70px !important; padding: .65rem .8rem !important; }
  .brand, .head-nav { font-size: clamp(1.1rem, 6vw, 1.55rem) !important; letter-spacing: -.04em !important; text-shadow: none !important; }
  .login-pill, .logout-btn, .btn-nav { padding: .52rem .78rem !important; font-size: .78rem !important; }
  .site-nav, .nav-links { top: 100px !important; left: .7rem !important; right: .7rem !important; }
  .department-drawer { inset: 0 0 0 auto !important; width: 94vw !important; max-width: 94vw !important; border-left: 2px solid var(--ink) !important; padding: 1rem !important; }
  .drawer-columns { grid-template-columns: 1fr !important; }
  .floating-sections { display: none !important; }
  .bottom-nav { display: flex !important; padding: 0.5rem !important; bottom: 1.25rem !important; }
  .bottom-nav a { font-size: .8rem !important; padding: .55rem .85rem !important; }

  .page-cover, .ultra-replica-cover { margin: 0 !important; padding: 4.5rem 1rem 1.6rem !important; border-radius: 0px ; }
  .page-cover::after { max-width: calc(100% - 2rem) !important; box-sizing: border-box !important; white-space: normal !important; line-height: 1.4 !important; }
  .page-cover h1, .ultra-replica-cover h1 { font-size: clamp(2.65rem, 17vw, 5.5rem) !important; line-height: .92 !important; letter-spacing: -.04em !important; text-shadow: 2px 2px 0 var(--green) !important; }
  .cover-kicker { font-size: .85rem !important; width: fit-content !important; white-space: normal !important; line-height: 1.4 !important; }
  .cover-stats b { font-size: .75rem !important; padding: .48rem .62rem !important; }

  .hero-cjp, .movement-intro, .vision-section, .manifesto-section, .issues-section, .barrel-section, .container, .lab-container, .forum-container, .event-container, .insights-hero, .stats-grid, .table-wrap, .table-controls, .section-divider { padding-left: .85rem !important; padding-right: .85rem !important; }
  .hero-cjp h1 { font-size: clamp(3rem, 17vw, 6rem) !important; line-height: .9 !important; text-shadow: 2px 2px 0 var(--green) !important; }
  .poster-card h2 { font-size: clamp(2.8rem, 15vw, 5.1rem) !important; line-height: .9 !important; }
  .poster-card { min-height: 360px !important; border-width: 3px !important; box-shadow: 3px 3px 0 var(--ink) !important; padding: 1rem !important; }
  .poster-card p { font-size: 1.25rem !important; }
  .poster-card blockquote { font-size: 1.05rem !important; }
  .stamp { width: 85px; height: 85px; font-size: 1rem; }
  .metrics, .stats-grid { grid-template-columns: 1fr !important; }

  /* Mobile SGPA cards: no more hidden/overlaid labels */
  .sgpa-table, .sgpa-table thead, .sgpa-table tbody, .sgpa-table tr, .sgpa-table td { display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  .sgpa-table thead { display: none !important; }
  .sgpa-table tbody { display: grid !important; gap: .9rem !important; }
  .sgpa-table tbody tr { display: block !important; border: 2px solid var(--ink) !important; border-radius: 0px ; box-shadow: var(--shadow-sm) !important; overflow: hidden !important; background: var(--paper2) !important; }
  .sgpa-table tbody td { display: grid !important; grid-template-columns: 88px minmax(0, 1fr) !important; align-items: center !important; gap: .8rem !important; border: 0 !important; border-bottom: 2px solid var(--ink) !important; border-radius: 0 !important; padding: .85rem 1rem !important; color: var(--ink) !important; min-height: 52px !important; }
  .sgpa-table tbody td:last-child { border-bottom: 0 !important; }
  .sgpa-table tbody td::before { content: attr(data-label); font-family: 'Space Grotesk', sans-serif !important; letter-spacing: .1em !important; color: var(--muted) !important; font-size: .88rem !important; font-weight: 600 !important; }
  .sgpa-cell { min-width: 0 !important; width: 100% !important; }
  .sgpa-value { font-size: 1.15rem !important; color: var(--ink) !important; }

  .event-slide-card, .event-card-flat { flex-basis: min(82vw, 340px) !important; min-height: 210px !important; }
  .event-slide-card h3, .event-card-flat h3 { font-size: clamp(2.25rem, 12vw, 4rem) !important; }
  .slider-controls button { width: 44px; height: 40px; }

  .forum-title, .page-title, .lab-title, .insights-heading { font-size: clamp(2.6rem, 14vw, 5.2rem) !important; line-height: .92 !important; }
  .query-meta, .query-actions { align-items: flex-start !important; justify-content: flex-start !important; }
  .answer-btn, .submit-btn, button[type=submit] { width: 100% !important; }
  .event-hero { height: auto !important; max-height: 460px !important; }
  .photo-gallery .gallery-img, .gallery-img { height: auto !important; min-height: 180px !important; }
}

@media (max-width: 420px) {
  .bottom-nav { width: calc(100% - 1.2rem) !important; bottom: 1rem !important; gap: 0.4rem !important; padding: 0.4rem !important; }
  .bottom-nav a { font-size: .75rem !important; padding: .5rem .75rem !important; }
  .nav-actions { gap: .4rem !important; }
  .page-cover h1, .ultra-replica-cover h1 { font-size: clamp(2.35rem, 18vw, 4.4rem) !important; }
  .sgpa-table tbody td { grid-template-columns: 74px minmax(0, 1fr) !important; padding: .75rem !important; }
}

:root {
  --login-ink: #1a1410;
  --login-paper: #f4ecd8;
  --login-paper-2: #fffdf6;
  --login-red: #e13b19;
  --login-green: #1e5631;
  --login-yellow: #ffc72c;
  --login-muted: #5c4e41;
  --login-shadow: 8px 8px 0 var(--login-ink);
  --login-shadow-sm: 4px 4px 0 var(--login-ink);
}

* { box-sizing: border-box; }

body.login-page-fixed {
  min-height: 100vh !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: none;
  color: var(--login-ink) !important;
  font-family: Inter, system-ui, sans-serif !important;
  opacity: 1 !important;
}

.login-strip {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  padding: .45rem 1rem !important;
  overflow: hidden !important;
  background: var(--login-ink) !important;
  color: var(--login-paper) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.login-strip span {
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  letter-spacing: .12em !important;
  font-size: 1.15rem !important;
}

.login-strip span::after { content: ' •'; color: var(--login-yellow); margin-left: 1.5rem; }

.login-masthead {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: .85rem clamp(1rem, 4vw, 4rem) !important;
  background: rgba(244,229,191,.96) !important;
  border-bottom: 6px solid var(--login-ink) !important;
  box-shadow: 0 7px 0 rgba(18,16,12,.18) !important;
}

.login-brand {
  color: var(--login-ink) !important;
  text-decoration: none !important;
  font-family: 'Archivo Black', Impact, sans-serif !important;
  font-size: clamp(1.55rem, 3vw, 2.6rem) !important;
  line-height: .78 !important;
  letter-spacing: -.09em !important;
  text-transform: uppercase !important;
  text-shadow: 3px 3px 0 var(--login-green) !important;
}

.login-brand span { color: var(--login-red); text-shadow: 2px 2px 0 var(--login-ink); }

.login-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: white !important;
  background: var(--login-red) !important;
  border: 4px solid var(--login-ink) !important;
  border-radius: 0px ;
  box-shadow: var(--login-shadow-sm) !important;
  padding: .68rem 1.1rem !important;
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  font-size: 1.15rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.login-stage {
  width: min(1180px, calc(100% - 2rem)) !important;
  margin: clamp(1rem, 4vw, 3.4rem) auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(1rem, 3vw, 2rem) !important;
  align-items: stretch !important;
}

.login-poster,
.login-panel {
  border: 6px solid var(--login-ink) !important;
  border-radius: 0px ;
  box-shadow: var(--login-shadow) !important;
  overflow: hidden !important;
}

.login-poster {
  position: relative !important;
  min-height: 620px !important;
  padding: clamp(1.4rem, 4vw, 3rem) !important;
  background: var(--paper) ;
  background-size: 52px 52px, auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.login-poster::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 4px solid var(--login-ink);
  border-radius: 0px ;
  pointer-events: none;
}

.poster-kicker,
.form-kicker,
.panel-number {
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--login-red) !important;
  font-size: 1.25rem !important;
  margin: 0 0 1rem !important;
}

.login-poster h1 {
  position: relative !important;
  margin: 0 !important;
  font-family: 'Archivo Black', Impact, sans-serif !important;
  font-size: clamp(4.4rem, 9vw, 8.7rem) !important;
  line-height: .76 !important;
  letter-spacing: -.12em !important;
  color: var(--login-paper) !important;
  text-transform: uppercase !important;
  text-shadow: 6px 6px 0 var(--login-ink), 11px 11px 0 var(--login-red) !important;
  z-index: 1 !important;
}

.login-poster h1 span { color: var(--login-yellow) !important; }

.poster-copy {
  position: relative !important;
  z-index: 1 !important;
  max-width: 620px !important;
  margin: 1.4rem 0 !important;
  font-size: clamp(1rem, 1.6vw, 1.25rem) !important;
  line-height: 1.55 !important;
  font-weight: 900 !important;
  color: var(--login-ink) !important;
  background: rgba(244,229,191,.84) !important;
  border: 4px solid var(--login-ink) !important;
  border-radius: 0px ;
  padding: 1rem !important;
}

.poster-badges {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: .8rem !important;
}

.poster-badges b {
  display: grid !important;
  place-items: center !important;
  min-height: 82px !important;
  background: var(--login-paper) !important;
  border: 5px solid var(--login-ink) !important;
  border-radius: 0px ;
  box-shadow: var(--login-shadow-sm) !important;
  font-family: 'Archivo Black', Impact, sans-serif !important;
  font-size: clamp(1.8rem, 4vw, 3.4rem) !important;
  letter-spacing: -.08em !important;
}

.login-panel {
  background: var(--login-paper-2) !important;
  padding: clamp(1rem, 3vw, 1.6rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.panel-number {
  color: var(--login-muted) !important;
  margin-bottom: .8rem !important;
}

.login-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(1.25rem, 4vw, 2rem) !important;
  background: var(--login-paper) !important;
  border: 5px solid var(--login-ink) !important;
  border-radius: 0px ;
  box-shadow: var(--login-shadow-sm) !important;
  color: var(--login-ink) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

.login-header { text-align: left !important; margin: 0 0 1.5rem !important; }
.login-header h2 {
  margin: 0 0 .75rem !important;
  font-family: 'Archivo Black', Impact, sans-serif !important;
  font-size: clamp(3rem, 7vw, 5.1rem) !important;
  line-height: .78 !important;
  letter-spacing: -.11em !important;
  text-transform: uppercase !important;
  color: var(--login-ink) !important;
  text-shadow: 4px 4px 0 var(--login-green) !important;
}
.login-header p:not(.form-kicker), .login-note {
  color: var(--login-muted) !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

.input-group { margin-bottom: 1rem !important; opacity: 1 !important; }
.input-group label {
  display: block !important;
  margin: 0 0 .45rem !important;
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--login-ink) !important;
  font-size: 1.05rem !important;
}
.input-group input {
  width: 100% !important;
  min-height: 58px !important;
  padding: .95rem 1rem !important;
  background: #fff8e4 !important;
  color: var(--login-ink) !important;
  border: 3px solid var(--login-ink) !important;
  border-radius: 0px ;
  box-shadow: inset 3px 3px 0 rgba(18,16,12,.10) !important;
  font: 900 1rem Inter, sans-serif !important;
  outline: none !important;
}
.input-group input:focus {
  background: white !important;
  box-shadow: 0 0 0 5px rgba(79,159,80,.35), inset 3px 3px 0 rgba(18,16,12,.10) !important;
}

.btn-submit {
  width: 100% !important;
  min-height: 62px !important;
  margin: .55rem 0 0 !important;
  opacity: 1 !important;
  border: 5px solid var(--login-ink) !important;
  border-radius: 0px ;
  background: var(--login-red) !important;
  color: white !important;
  box-shadow: var(--login-shadow-sm) !important;
  font-family: 'Archivo Black', Impact, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: -.03em !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.btn-submit:hover { transform: translate(-3px, -3px) !important; box-shadow: 8px 8px 0 var(--login-ink) !important; background: #c92e25 !important; }
.btn-submit:disabled { opacity: .72 !important; cursor: wait !important; }

.error-message {
  display: none;
  background: #ffe0dc !important;
  border: 4px solid var(--login-red) !important;
  color: #7e1610 !important;
  border-radius: 0px ;
  padding: .9rem !important;
  margin-bottom: 1rem !important;
  font-weight: 900 !important;
}

.login-note {
  margin: 1rem 0 0 !important;
  padding-top: 1rem !important;
  border-top: 3px solid var(--login-ink) !important;
  font-size: .9rem !important;
}

@media (max-width: 980px) {
  .login-stage { grid-template-columns: 1fr !important; }
  .login-poster { min-height: 460px !important; }
}

@media (max-width: 560px) {
  .login-masthead { padding: .7rem 1rem !important; }
  .login-home { padding: .55rem .8rem !important; font-size: 1rem !important; }
  .login-stage { width: min(100% - 1rem, 1180px) !important; margin-top: .75rem !important; }
  .login-poster, .login-panel { border-width: 4px !important; border-radius: 0px ; box-shadow: 5px 5px 0 var(--login-ink) !important; }
  .login-poster { min-height: 390px !important; }
  .poster-badges { grid-template-columns: 1fr 1fr 1fr !important; gap: .45rem !important; }
  .poster-badges b { min-height: 58px !important; border-width: 3px !important; }
  .login-card { border-width: 4px !important; border-radius: 0px ; }
}

/* =======================================================================
   ULTIMATE RESPONSIVE CATCH-ALL (Mobile & Small Devices)
   ======================================================================= */
@media (max-width: 760px) {
  /* Revert: Keep Brutalist Sections Contained and Safe */
  .hero-brutalist, .about-brutalist,
  .showcase-card,
  .post-query-card, .queries-section,
  .content-card, .join-section, .event-flat-slider {
    margin: 1.5rem 0 !important; 
    padding: 1.5rem 1rem !important; 
    border-left: 3px solid var(--ink) !important;
    border-right: 3px solid var(--ink) !important;
    box-shadow: 4px 4px 0 var(--ink) !important;
    border-top-width: 3px !important;
    border-bottom-width: 3px !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .resources-grid { margin: 1.5rem 0 3rem !important; gap: 1.5rem !important; }
  .resource-section { margin: 0 !important; padding: 1.5rem 1rem !important; }
  
  .hero-main-text, .about-content-container {
    padding: 1rem 0 2rem !important;
    border-bottom: 3px solid var(--ink) !important;
  }
  .hero-brutalist.full-width:not(.has-stats) .hero-main-text {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .hero-stats-sidebar { flex-direction: column !important; }
  .stat-block-heavy {
    flex: 1 1 100% !important;
    padding: 1.5rem 0 !important;
    border-right: none !important;
    border-bottom: 3px solid var(--ink) !important;
  }
  .stat-block-heavy:last-child { border-bottom: none !important; padding-bottom: 0 !important; }

  /* Keep videos safely inside the card */
  .event-hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-left: 3px solid var(--ink) !important;
    border-right: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* Table Controls Stack */
  .table-controls { flex-direction: column !important; align-items: stretch !important; }
  .table-controls input, .table-controls select { width: 100% !important; min-width: 100% !important; margin-bottom: 0.5rem !important; box-sizing: border-box !important; }

  /* About Section Image Safety */
  .about-img-container { margin: 1.5rem 0 0 !important; border-top: 3px solid var(--ink) !important; width: 100% !important; box-sizing: border-box !important; }
  .about-img-container img { min-height: 250px !important; object-position: center !important; }

  /* Footer Flex Stack */
  .footer-cjp { padding: 3rem 1.25rem !important; }
  .footer-cjp > div { flex: 1 1 100% !important; min-width: 100% !important; margin-bottom: 1.5rem; }
  .footer-cjp h2 { font-size: clamp(3rem, 14vw, 4.5rem) !important; }

  /* Ensure all major buttons are tap-friendly on mobile */
  .btn-download, .answer-btn, .action-btn, .admin-btn, .submit-btn, button[type=submit], .cta-row a {
    width: 100% !important;
    text-align: center !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  
  /* Dashboard Task lists overlapping fix */
  .list-item { align-items: stretch !important; flex-direction: column !important; }
  .task-info, .task-actions { width: 100% !important; justify-content: space-between !important; }
  .task-info { margin-bottom: 1rem !important; }
}

@media (max-width: 480px) {
  .cta-row a { width: 100% !important; text-align: center !important; }
  .cover-stats b { font-size: 0.75rem !important; padding: 0.4rem 0.6rem !important; }
  .official-badge { font-size: 0.75rem !important; padding: 0.3rem 0.6rem !important; margin-bottom: 1rem !important; }
  
  /* Event showcase safety */
  .showcase-card { padding: 1rem !important; }
  .event-desc { padding: 1rem !important; font-size: 1rem !important; }
}

/* =======================================================================
   FINAL DEFINITIVE MOBILE RESPONSIVENESS PATCH
   Ensures no horizontal scrolling, proper stacking, and touch-friendly UI
   ======================================================================= */
@media (max-width: 768px) {
  /* 1. Rigidly prevent horizontal overflow */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
  }

  /* 2. Stack all major layout grids to single column */
  .hero-cjp, .hero-brutalist, .about-brutalist, .movement-intro, 
  .vision-section, .manifesto-section, .barrel-section, 
  .event-slide-section, .login-stage, .drawer-columns,
  .movement-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 1.5rem !important;
  }

  .metrics {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  .manifesto-list, .stats-grid, .photo-gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* 3. Contain oversized text that breaks layouts */
  h1, h2, h3, h4, h5, h6, .brand, .page-cover h1, .login-poster h1, .massive-heading {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }
  
  .hero-cjp h1, .page-cover h1, .login-poster h1 {
    font-size: clamp(2.5rem, 12vw, 4rem) !important;
    line-height: 1.1 !important;
  }

  /* 4. Touch-friendly form elements and buttons */
  input, textarea, select, .btn-submit, .submit-btn, .answer-btn, .btn-download, .cta-row a {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* 5. Safe padding for main containers */
  .container, .hero-cjp, .page-cover, .footer, .login-shell, .about-content-container, .hero-main-text {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    box-sizing: border-box !important;
  }

  /* 6. Fix Bottom Nav */
  .bottom-nav {
    width: calc(100% - 2rem) !important;
    max-width: 500px !important;
    bottom: 1.5rem !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    padding: 0.5rem !important;
    background: rgba(255, 253, 246, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 6px 6px 0 var(--ink) !important;
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .bottom-nav a:hover, .bottom-nav a.active {
    box-shadow: 3px 3px 0 var(--ink) !important;
    transform: translateY(-2px) !important;
  }
  body {
    padding-bottom: 90px !important; /* Account for floating nav */
  }
  
  /* 7. Event slider strict containment */
  .event-slider-wrap, .barrel-window {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  
  .event-rail, .event-track {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}