/* Page structure and responsive layout.
   Section backgrounds run full-bleed; content sits in a centred
   .container capped at --content-max so wide monitors don't stretch
   the layout thin. */
* { box-sizing: border-box; }

/* The [hidden] attribute is how every page here shows and hides things -
   search results, the announcements archive, the compose fields. The
   browser's own rule for it is `display: none`, but that comes from the
   user-agent stylesheet, so ANY author rule setting a display (and most of
   our components set `display: flex`) silently wins and the element stays
   on screen while JS believes it is hidden. This puts the attribute back in
   charge. It is the one place !important is the right answer. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
}

h1, h2, h3 { margin: 0; font-weight: 500; }

a { text-decoration: none; color: var(--sir-blue); }
a:hover { color: var(--gold); }

.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* Header */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 76px;
}

.site-logo { height: 38px; width: auto; flex: 0 0 auto; }

.site-nav { display: flex; align-items: center; gap: 36px; }
.site-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  padding: 27px 0 25px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--sir-blue); }
.site-nav a.is-active {
  color: var(--sir-blue);
  font-weight: 600;
  border-bottom-color: var(--sir-blue);
}

.header-actions { display: flex; align-items: center; gap: 16px; }

/* Hero */
.hero {
  background: linear-gradient(120deg, var(--sir-blue-ink) 0%, var(--sir-blue) 55%, #0b3159 100%);
  padding: 56px 0 92px;
}
.hero-inner { display: flex; flex-direction: column; gap: 18px; }

.hero-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.2vw, 46px);
  color: var(--white);
  line-height: 1.15;
}

.gold-hairline { width: 56px; height: 1px; background: var(--gold); }

.hero-sub {
  margin: 0;
  max-width: 560px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--sir-blue-5);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }

/* Quick actions overlap the hero */
.quick-actions { margin-top: -48px; }
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* Main grid: announcements + rail */
.main-section { padding: 48px 0 56px; }
.main-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.col-announcements { grid-column: span 2; display: flex; flex-direction: column; gap: 18px; }
.col-rail { display: flex; flex-direction: column; gap: 24px; }

/* Bands */
.band { padding: 52px 0 56px; }
.band-grey { background: var(--bg-grey); }
.band-inner { display: flex; flex-direction: column; gap: 22px; }

.tools-grid, .files-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.people-grid > div { display: flex; flex-direction: column; gap: 18px; }
/* A hidden beta column (js/beta.js) gives its width back to the other. */
.people-grid:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }

/* Section headers */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.section-head h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--sir-blue);
}
.section-head h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--sir-blue);
}
.section-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
/* On the grey band, --muted falls under AA contrast — use body grey. */
.band-grey .section-sub { color: var(--text); }

/* Footer */
.site-footer {
  background: var(--sir-blue);
  padding: 44px 0;
}
.footer-inner { display: flex; flex-direction: column; gap: 24px; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer-divider { height: 1px; background: var(--sir-blue-2); }

/* Responsive */
@media (max-width: 1100px) {
  .site-nav { display: none; }
}

@media (max-width: 900px) {
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-grid { grid-template-columns: minmax(0, 1fr); }
  .col-announcements { grid-column: auto; }
  .tools-grid, .files-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-grid { grid-template-columns: minmax(0, 1fr); }
  .search-pill input { width: 120px; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 520px) {
  .tools-grid, .files-grid { grid-template-columns: minmax(0, 1fr); }
  .search-pill { display: none; }
}