:root {
  --ink: #102033;
  --paper: #f4efe4;
  --deep: #0b1c2c;
  --muted: #5d6b78;
  --school: #12324d;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  background: radial-gradient(1200px 600px at 10% -10%, #dce7f2 0%, transparent 55%), var(--paper);
  color: var(--ink);
}
h1, h2, h3, strong, .brand, .door-cta, .nav-tile strong, button, .eyebrow {
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; }

.site-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px clamp(16px, 4vw, 40px);
  background: var(--deep);
  color: #f7f1e6;
}
.brand { text-decoration: none; }
.brand-kicker, .eyebrow {
  display: block;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
  margin-bottom: 4px;
  opacity: .8;
}
.header-actions, .session-chip { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.text-link, .primary-link { color: #f0d48a; font-family: "Avenir Next", "Segoe UI", sans-serif; font-weight: 800; }
.inline-form { margin: 0; }
.inline-form button, .login-form button, .lightbox button, .primary {
  background: #f0d48a;
  color: var(--deep);
  border: 0;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 800;
  cursor: pointer;
}

.landing-main, .school-main, .login-main { padding: 24px clamp(16px, 4vw, 40px) 64px; }
.hero h1, .login-card h1, .school-hero h1 { font-size: clamp(2rem, 6vw, 4.4rem); line-height: .95; margin: 0 0 12px; }
.lede, .hero-copy p { font-size: 1.15rem; max-width: 46rem; }

.door-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.school-door {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  display: block;
  box-shadow: 0 24px 50px rgba(11, 28, 44, .22);
}
.door-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.door-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.72) 70%, var(--school));
}
.door-body {
  position: relative;
  z-index: 1;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
}
.logo-plate {
  width: 92px;
  height: 92px;
  background: #fff;
  border: 4px solid var(--school);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.logo-plate img { width: 78px; height: 78px; object-fit: contain; }
.door-kicker { margin: 0; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.school-door h2 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 6px 0; }
.door-name, .door-place { margin: 0 0 8px; }
.door-cta {
  display: inline-block;
  margin-top: 10px;
  background: #fff;
  color: var(--deep);
  padding: 10px 14px;
  font-weight: 800;
}

.school-hero {
  position: relative;
  min-height: 360px;
  color: #fff;
  overflow: hidden;
}
.school-hero.compact { min-height: 220px; background: var(--school); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-copy {
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, rgba(11,28,44,.82), rgba(11,28,44,.28));
  min-height: 360px;
  padding: 32px clamp(16px, 4vw, 40px);
}
.school-hero.compact .hero-copy { min-height: 220px; background: transparent; }
.public-note { font-weight: 700; color: #f0d48a; }

.pictorial-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 28px;
}
.nav-tile {
  min-height: 132px;
  padding: 16px;
  text-decoration: none;
  background: #fff;
  border: 3px solid var(--school);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}
.nav-tile.private { background: #102033; color: #f7f1e6; border-color: #102033; }
.nav-icon {
  width: 42px;
  height: 42px;
  margin-bottom: auto;
  background: var(--school);
  -webkit-mask: var(--tile) center / contain no-repeat;
  mask: var(--tile) center / contain no-repeat;
}
.nav-tile.private .nav-icon { background: #f0d48a; }
.nav-tile[data-icon="gallery"] { --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='black'/%3E%3C/svg%3E"); }
.nav-tile[data-icon="dates"] { --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='15' fill='black'/%3E%3C/svg%3E"); }
.nav-tile[data-icon="groups"] { --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='9' r='3' fill='black'/%3E%3Ccircle cx='16' cy='9' r='3' fill='black'/%3E%3C/svg%3E"); }
.nav-tile[data-icon="portfolio"] { --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='7' width='16' height='12' fill='black'/%3E%3C/svg%3E"); }
.nav-tile[data-icon="booking"] { --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16v8H4zM8 4h8v8H8z' fill='black'/%3E%3C/svg%3E"); }
.nav-tile[data-icon="submit"] { --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 18h16L12 4z' fill='black'/%3E%3C/svg%3E"); }
.nav-tile[data-icon="access"] { --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='black'/%3E%3Cpath d='M4 20c2-4 14-4 16 0' fill='black'/%3E%3C/svg%3E"); }
.nav-tile[data-icon="campus"] { --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20V10l9-6 9 6v10H3z' fill='black'/%3E%3C/svg%3E"); }
.nav-tile small { color: var(--muted); font-family: "Avenir Next", "Segoe UI", sans-serif; }
.nav-tile.private small { color: #d7c7a2; }

.gallery-grid, .event-grid, .mini-doors { display: grid; gap: 16px; }
.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-grid, .mini-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-card, .event-card, .info-card, .private-card, .login-card {
  background: #fff;
  border: 1px solid #d9d1c3;
  padding: 0;
}
.gallery-open { width: 100%; padding: 0; border: 0; background: #111; cursor: pointer; }
.gallery-open img { width: 100%; height: 280px; object-fit: cover; }
.gallery-card figcaption, .event-card, .info-card, .private-card, .login-card { padding: 16px; }
.gallery-card span, .event-card p, .info-card p { color: var(--muted); }
.mini-door {
  min-height: 120px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  text-decoration: none;
  border-left: 10px solid var(--school);
}
.mini-door img { width: 64px; height: 64px; object-fit: contain; }
.band-head { margin: 28px 0 14px; }
.login-card { max-width: 560px; margin: 40px auto; }
.login-form { display: grid; gap: 14px; }
.login-form input { min-height: 48px; padding: 10px 12px; width: 100%; }
.status.error { background: #fde8e8; color: #8a1f1f; padding: 10px 12px; font-family: "Avenir Next", "Segoe UI", sans-serif; }
.lightbox { border: 0; padding: 18px; max-width: min(920px, 96vw); }
.lightbox img { width: 100%; max-height: 70vh; object-fit: contain; background: #111; }
.status.success { background:#e7f5ee; color:#175c3e; padding:10px 12px; font-family:"Avenir Next","Segoe UI",sans-serif; }
.status-pill { display:inline-block; font-family:"Avenir Next","Segoe UI",sans-serif; font-weight:800; padding:4px 10px; background:#eee; }
.booking-card.status-PENDING .status-pill { background:#fff3cd; }
.booking-card.status-CONFIRMED .status-pill, .booking-card.status-APPROVED .status-pill { background:#d4edda; }
.booking-card.status-DECLINED .status-pill, .booking-card.status-CANCELLED .status-pill { background:#f8d7da; }
.booking-card.status-NEEDS\\ CHANGE .status-pill, .booking-card.status-NEEDS { background:#ffe8cc; }
.login-card.wide { max-width: 860px; }
.details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.action-row { display:flex; flex-wrap:wrap; gap:10px; }
.capacity-ref { background:#f7f1e6; padding:16px; margin:18px 0; border:1px solid #d9d1c3; }
.capacity-ref p { margin:8px 0; }

@media (max-width: 860px) {
  .site-header, .header-actions { flex-direction: column; align-items: flex-start; }
  .door-grid, .gallery-grid, .event-grid, .mini-doors, .pictorial-nav { grid-template-columns: 1fr 1fr; }
  .school-door, .door-body { min-height: 340px; }
  .nav-tile { min-height: 120px; }
}
@media (max-width: 560px) {
  .door-grid, .gallery-grid, .event-grid, .mini-doors { grid-template-columns: 1fr; }
  .pictorial-nav { grid-template-columns: 1fr 1fr; }
  .school-door, .door-body { min-height: 380px; }
}