:root {
  --wine: #3a101c;
  --wine-dark: #210a10;
  --wine-soft: #5a1b29;
  --cream: #f5efe6;
  --cream-deep: #e8dfd3;
  --gold: #b99055;
  --gold-light: #d9bd8a;
  --ink: #281d1c;
  --pink: #d8b6b2;
  --line: rgba(95, 63, 45, .22);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 75px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--serif); letter-spacing: .05em; }
h2 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: .4rem; }
.section-kicker,.eyebrow { color: var(--gold); font-size: .68rem; letter-spacing: .28em; font-weight: 600; line-height: 1.6; }

/* NAV */
.topbar {
  height: 62px; position: sticky; top: 0; z-index: 20;
  background: rgba(47, 16, 25, .96); color: var(--cream);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3.5vw; border-bottom: 1px solid rgba(217,189,138,.22);
}
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--serif); color: var(--gold-light); font-weight: 700; letter-spacing: .11em; font-size: 1.25rem; white-space: nowrap; }
.brand-crest,.footer-crest,.hero-crest {
  display: grid; place-items: center; border: 1px solid var(--gold);
  color: var(--gold-light); font-family: var(--serif); font-weight: 700;
}
.brand-crest { width: 30px; height: 30px; border-radius: 50%; font-size: .75rem; }
.nav { display: flex; align-items: center; gap: 1.6rem; font-size: .66rem; letter-spacing: .15em; font-weight: 600; }
.nav a { opacity: .86; padding: 22px 0 19px; border-bottom: 2px solid transparent; }
.nav a:hover,.nav a.active { color: var(--gold-light); border-color: var(--gold); }
.menu-toggle { display:none; background:none; border:0; color:var(--cream); font-size:1.5rem; }

/* HERO */
.hero {
  min-height: 660px; position: relative; overflow: hidden; color: var(--cream);
  background:
    linear-gradient(90deg, rgba(22,8,10,.75), rgba(22,8,10,.40)),
    url("https://images.unsplash.com/photo-1564981797816-1043664bf78d?auto=format&fit=crop&w=2200&q=85") center/cover;
}
.hero-overlay { position:absolute; inset:0; background: radial-gradient(circle at 70% 35%, transparent 0, rgba(19,8,10,.2) 40%, rgba(16,7,9,.55) 100%); }
.hero-content {
  position: relative;
  z-index: 1;
  width: min(900px, 92vw);
  min-height: 660px;
  margin: 0 auto;
  padding: 85px 1.5rem 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-crest { width: 86px; height: 86px; border-radius: 50%; margin: 0 auto 1.4rem; font-size: 1.9rem; }
.hero h1 { font-size: clamp(4rem, 7vw, 6.7rem); line-height: .72; margin: .7rem 0 1.2rem; text-shadow: 0 2px 18px #000; }
.hero-tagline { font-family: var(--serif); color: var(--gold-light); letter-spacing: .17em; font-size: 1rem; line-height: 1.55; }
.ornament { color: var(--gold); font-size: 2.2rem; line-height: 1; margin: .7rem 0 1rem; }
.btn {
  display: inline-block; padding: .95rem 2.2rem; border-radius: 999px; border: 1px solid var(--gold);
  letter-spacing: .17em; font-size: .65rem; font-weight: 700; transition: .25s ease;
}
.primary { background: var(--wine); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.primary:hover { transform: translateY(-2px); background: #531827; }
.secondary { color: var(--wine); background: transparent; }
.secondary:hover { background: var(--wine); color: var(--cream); }


/* STATS */
.stats { display:grid; grid-template-columns: repeat(4,1fr); background: #f8f4ee; border-bottom:1px solid var(--line); }
.stats article {
  min-height: 100px;
  padding: .7rem 1rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  border-right:1px solid var(--line);
}
.extracurricular-stat .stat-icon { align-self: center; }
.stat-button {
  display: inline-block;
  margin-top: .55rem;
  padding: .38rem .6rem;
  border: 1px solid var(--gold);
  color: var(--wine);
  font-size: .42rem;
  letter-spacing: .1em;
  font-weight: 700;
  white-space: nowrap;
  transition: .2s ease;
}
.stat-button:hover {
  background: var(--wine);
  color: var(--cream);
}
.stats article:last-child { border-right:0; }
.stat-icon { font-size: 1.9rem; color: #77573d; }
.stats strong { display:block; font-family:var(--serif); font-size:1.7rem; letter-spacing:.12em; line-height:1; }
.stats small { display:block; margin-top:.35rem; font-size:.55rem; letter-spacing:.14em; }

/* ABOUT */
.split-section { display:grid; grid-template-columns: 1fr 1.2fr; min-height:410px; }
.text-panel { padding: 4.5rem 12%; align-self:center; }
.text-panel p:not(.section-kicker) { font-size:.83rem; line-height:1.7; max-width:380px; }
.image-panel { min-height:410px; }
.academy-image { background:url("https://images.unsplash.com/photo-1498243691581-b145c3f54a5a?auto=format&fit=crop&w=1500&q=85") center/cover; }
.text-link { display:inline-block; margin-top:1rem; font-size:.6rem; letter-spacing:.14em; font-weight:700; border-bottom:1px solid currentColor; padding-bottom:.3rem; }

/* HOUSES */
.houses-section { padding: 4.3rem 6vw; background: linear-gradient(180deg,#f6f0e8,#eee5d8); }
.section-heading { text-align:center; margin-bottom:2rem; }
.section-heading > p:last-child { font-size:.75rem; margin-bottom:0; color:#5c514a; }
.house-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; max-width:1200px; margin:auto; }
.house-card { min-height:245px; padding:1.7rem 1rem; text-align:center; border-radius:8px; border:1px solid rgba(70,35,28,.2); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:.25s ease; }
.house-card:hover { transform:translateY(-6px); box-shadow:0 15px 35px rgba(43,20,20,.15); }
.house-symbol { font-size:2.7rem; opacity:.7; }
.house-card h3 { font-size:1.25rem; letter-spacing:.12em; margin:.7rem 0 .45rem; }
.house-card p { font-size:.53rem; line-height:1.7; letter-spacing:.12em; }
.house-card a { margin-top:.3rem; font-size:.55rem; letter-spacing:.1em; border-bottom:1px solid currentColor; }
.foxglove { background:linear-gradient(135deg,#4c1018,#741e2b); color:#f6e6d9; }
.primrose { background:linear-gradient(135deg,#d9b8b6,#c99895); color:#412629; }
.snowdrop { background:linear-gradient(135deg,#faf5ec,#e6ddd0); color:#493d33; }
.wysteria { background:linear-gradient(135deg,#31202e,#4b3348); color:#f3e7ec; }

/* CAMPUS / LIFE */
.dual-row { display:grid; grid-template-columns:1fr 1fr; }
.campus-block { min-height:420px; background:url("https://images.unsplash.com/photo-1606761568499-6d2451b23c66?auto=format&fit=crop&w=1500&q=85") center/cover; position:relative; color:var(--cream); }
.campus-overlay { position:absolute; inset:0; padding:3.4rem; text-align:center; background:linear-gradient(rgba(26,11,12,.25),rgba(26,11,12,.7)); }
.campus-overlay h2 { margin-bottom:1.5rem; }
.campus-links { display:flex; justify-content:center; gap:1.3rem; margin:2rem 0; }
.campus-links span { display:flex; flex-direction:column; gap:.4rem; align-items:center; font-size:1.5rem; }
.campus-links small { font-size:.48rem; letter-spacing:.1em; }
.light { color:var(--cream); }
.life-block { padding:3.4rem 7%; text-align:center; background:#f3ece3; }
.life-block .muted { font-size:.7rem; color:#6f625b; }
.life-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; margin:2rem auto; max-width:620px; }
.life-grid a { min-height:115px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.7rem; border:1px solid var(--line); background:rgba(255,255,255,.25); font-size:1.7rem; transition:.2s; }
.life-grid a:hover { background:var(--cream); transform:translateY(-3px); }
.life-grid span { font-size:.48rem; letter-spacing:.08em; }


/* EXTRACURRICULAR ACTIVITY BUTTONS */
.activity-buttons {
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin:1.25rem 0 0;
}
.activity-button {
  width:100%;
  min-height:42px;
  padding:.7rem 1rem;
  border:1px solid var(--line);
  border-radius:2px;
  background:rgba(255,255,255,.22);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.07em;
  text-align:left;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.activity-button:hover,
.activity-button:focus-visible {
  background:var(--cream);
  border-color:var(--gold);
  transform:translateX(3px);
  outline:none;
}
body.dark-mode .activity-button {
  background:rgba(255,255,255,.045);
  color:#f5efe6 !important;
  border-color:rgba(217,189,138,.20);
}
body.dark-mode .activity-button:hover,
body.dark-mode .activity-button:focus-visible {
  background:#2b2226;
  color:#f5efe6 !important;
  border-color:var(--gold-light);
}
@media (max-width:700px) {
  .activity-button { min-height:44px; }
}

/* EVENTS */
.events-section { padding:4.5rem 10%; text-align:center; background:#f7f1e9; }
.event-list { max-width:820px; margin:2rem auto; }
.event-list article { display:grid; grid-template-columns:90px 1fr; text-align:left; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.event-list time { font-size:.58rem; color:#7a6758; letter-spacing:.08em; padding-top:.25rem; }
.event-list h3 { margin:0 0 .25rem; font-size:1.2rem; letter-spacing:.08em; }
.event-list p { margin:0; font-size:.65rem; color:#756963; }

/* ACTIVITIES + DIRECTORY */
.activities,.directory-section { padding:4.5rem 8%; text-align:center; }
.activities { background:var(--pink); }
.activities > p:not(.section-kicker),.directory-section > p:not(.section-kicker) { max-width:600px; margin:0 auto 1.7rem; font-size:.75rem; line-height:1.7; }
.directory-section { background:#efe7dc; }
.student-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; max-width:1100px; margin:1.7rem auto 0; }

/* FLIP CARDS (used by student directory + house rosters) */
.flip-card { display:block; perspective:1200px; height:250px; border:0; background:none; padding:0; }
.flip-card-inner { position:relative; width:100%; height:100%; text-align:center; transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
.flip-card:hover .flip-card-inner,
.flip-card:focus-visible .flip-card-inner { transform:rotateY(180deg); }
.flip-card-front,.flip-card-back {
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--line); background:rgba(255,255,255,.55); overflow:hidden;
}
.flip-card-front { display:flex; flex-direction:column; padding:0; }
.flip-card-front img { width:100%; height:52%; object-fit:cover; display:block; }
.flip-card-front .card-name { flex:1; display:flex; align-items:center; justify-content:center; padding:.4rem; border-top:3px solid var(--wine); }
.flip-card-front .card-name strong { font-family:var(--serif); font-size:.88rem; letter-spacing:.03em; }
.flip-card-back {
  transform:rotateY(180deg); background:var(--wine); color:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem .8rem;
}
.flip-card-back strong { font-family:var(--serif); font-size:.9rem; margin-bottom:.3rem; }
.flip-card-back span.card-house { font-size:.55rem; letter-spacing:.08em; color:var(--gold-light); margin-bottom:.5rem; }
.flip-card-back p { font-size:.6rem; line-height:1.6; color:#e9dfd6; margin:0 0 .55rem; }
.card-tags { display:flex; gap:.3rem; flex-wrap:wrap; justify-content:center; }
.card-tags span {
  background:rgba(217,189,138,.16); border:1px solid var(--gold-light); color:var(--gold-light);
  border-radius:999px; padding:.2rem .55rem; font-size:.44rem; letter-spacing:.06em; font-weight:600;
}
.student-card.fg .card-name { border-top-color:#741e2b; }
.student-card.pr .card-name { border-top-color:#c99895; }
.student-card.sn .card-name { border-top-color:#cfc4b3; }
.student-card.wy .card-name { border-top-color:#4b3348; }

/* CTA + FOOTER */
.final-cta { min-height:170px; padding:3rem 8%; display:flex; gap:2rem; align-items:center; justify-content:space-between; background:linear-gradient(90deg,#260b12,var(--wine)); color:var(--cream); border-top:1px solid rgba(217,189,138,.3); }
.final-cta h2 { font-size:1.65rem; margin:0; }
footer { background:#210a10; color:#d9cec4; padding:2rem 7%; display:grid; grid-template-columns:1fr auto; gap:1.5rem; border-top:1px solid rgba(217,189,138,.25); }
.footer-brand { display:flex; align-items:center; gap:.8rem; }
.footer-crest { width:40px; height:40px; border-radius:50%; }
.footer-brand strong { display:block; font-family:var(--serif); letter-spacing:.12em; font-size:.9rem; color:var(--gold-light); }
.footer-brand small { display:block; font-size:.48rem; letter-spacing:.1em; margin-top:.35rem; }
.footer-links { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.footer-links a,footer>small { font-size:.48rem; letter-spacing:.1em; }
footer>small { grid-column:1/-1; opacity:.6; }

/* TOP BUTTON */
.back-to-top { position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:50%; border:1px solid var(--gold); background:var(--wine); color:var(--cream); display:none; cursor:pointer; z-index:10; }
.back-to-top.show { display:block; }

@media (max-width: 1050px) {
  .nav { gap:.8rem; font-size:.55rem; }
}

@media (max-width: 780px) {
  .topbar { padding:0 1.2rem; }
  .brand { font-size:1rem; }
  .menu-toggle { display:block; }
  .nav { display:none; position:absolute; top:62px; left:0; right:0; background:var(--wine-dark); flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.5rem 1rem; }
  .nav.open { display:flex; }
  .nav a { padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.08); }

  .hero { min-height:780px; }
  .hero-content { min-height: 640px; padding:75px 1.5rem; width:100%; }
  .hero h1 { font-size:4rem; }
  .stats { grid-template-columns:1fr 1fr; }
  .stats article { border-bottom:1px solid var(--line); }
  .split-section,.dual-row { grid-template-columns:1fr; }
  .image-panel { min-height:300px; }
  .house-grid { grid-template-columns:1fr 1fr; }
  .life-grid { grid-template-columns:1fr 1fr; }
  .student-grid { grid-template-columns:1fr 1fr; }
  .final-cta { flex-direction:column; text-align:center; }
  footer { grid-template-columns:1fr; text-align:center; }
  .footer-brand { justify-content:center; }
  .footer-links { justify-content:center; }
}

@media (max-width: 480px) {
  .brand-crest { display:none; }
  .brand { font-size:.88rem; }
  .hero h1 { font-size:3.2rem; }
  .stats article { min-height:88px; gap:.5rem; }
  .stats strong { font-size:1.35rem; }
  .text-panel { padding:3.5rem 9%; }
  .houses-section,.buzz-section { padding-left:1rem; padding-right:1rem; }
  .house-grid { gap:.45rem; }
  .house-card { min-height:215px; padding:.8rem .4rem; }
  .campus-overlay { padding:2.5rem 1rem; }
  .campus-links { gap:.65rem; }
  .campus-links span { font-size:1.2rem; }
  .student-grid { grid-template-columns:1fr; }
}

/* DARK MODE */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-left: .2rem;
  padding: .5rem .7rem;
  border: 1px solid rgba(217,189,138,.42);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  transition: .2s ease;
  white-space: nowrap;
}
.theme-toggle:hover { color: var(--gold-light); border-color: var(--gold); background: rgba(217,189,138,.08); }
.theme-toggle > span:first-child { font-size: .9rem; line-height: 1; }

body.dark-mode {
  /* Keep the original light text palette in dark mode. */
  --cream: #f5efe6;
  --cream-deep: #e8dfd3;
  --ink: #eee7df;
  --line: rgba(217,189,138,.20);
  background: #171215;
  color: #eee7df;
}
body.dark-mode .topbar { background: rgba(18,8,12,.97); }
body.dark-mode .stats { background: #211a1d; }
body.dark-mode .houses-section { background: linear-gradient(180deg,#211a1d,#171316); }
body.dark-mode .life-block { background: #211a1d; }
body.dark-mode .events-section { background: #1c1719; }
body.dark-mode .activities { background: #4b2630; }
body.dark-mode .directory-section { background: #211a1d; }
body.dark-mode .life-grid a { background: rgba(255,255,255,.04); }
body.dark-mode .life-grid a:hover { background: #2b2226; }
body.dark-mode .flip-card .flip-inner { background: rgba(255,255,255,.05); }
body.dark-mode .final-cta { background: linear-gradient(90deg,#16070b,#3a101c); }
body.dark-mode footer { background: #10080b; }
body.dark-mode .secondary { color: var(--gold-light); }
body.dark-mode .secondary:hover { background: var(--wine); color: var(--cream); }

/* Quiz dark mode, including its page-local styles. */
body.dark-mode .quiz-card { background: #211a1d !important; color: #eee7df !important; box-shadow: 0 20px 45px rgba(0,0,0,.35) !important; }
body.dark-mode .quiz-option { background: #2a2225 !important; color: #eee7df !important; border-color: rgba(217,189,138,.22) !important; }
body.dark-mode .quiz-option:hover { background: #35282d !important; }
body.dark-mode .quiz-start p,
body.dark-mode .quiz-result-blurb { color: #cfc4bd !important; }
body.dark-mode .quiz-progress { background: rgba(217,189,138,.18) !important; }
body.dark-mode .quiz-question-image { border-color: rgba(217,189,138,.25) !important; }

@media (max-width: 1100px) {
  .theme-toggle-label { display: none; }
  .theme-toggle { padding: .5rem .65rem; }
}
@media (max-width: 700px) {
  .theme-toggle { position: absolute; right: 4.2rem; top: 13px; margin: 0; }
}

/* EXTRACURRICULARS DARK MODE */
body.dark-mode .extra-page {
  background: #171215 !important;
  color: #eee7df;
}
body.dark-mode .extra-hero {
  color: #f5efe6 !important;
  background:
    linear-gradient(rgba(18,8,12,.78), rgba(18,8,12,.88)),
    url("https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=1800&q=85") center/cover;
}
body.dark-mode .extra-info h2,
body.dark-mode .extra-info p,
body.dark-mode .extra-info li,
body.dark-mode .extra-info a {
  color: #eee7df;
}
body.dark-mode .extra-info p { color: #d8cfca !important; }
body.dark-mode .extra-info li { color: #cfc4bd !important; border-color: rgba(217,189,138,.20); }
body.dark-mode .extra-row { border-color: rgba(217,189,138,.20); }
body.dark-mode .extra-info .text-link { color: #d9bd8a !important; }
body.dark-mode .extra-info .text-link:hover { color: #f5efe6 !important; }
body.dark-mode .extra-page + footer { background: #10080b; color: #f5efe6; }