/* Style: Bold Banner. Full red header band, big uppercase headings, chunky blocks. Loaded after site.css. */
:root {
  --serif: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}
h1, h2, .brand-name, .site-nav a, .btn, .card h2, .timeline h2, .ann h3 { text-transform: uppercase; letter-spacing: .04em; }

.site-header { background: var(--red); border-top: 0; border-bottom: 6px solid var(--ink); }
.brand { color: #fff; }
.brand img { background: #fff; border-radius: 50%; padding: 2px; }
.brand-sub { color: #fde3df; }
.menu-btn { background: var(--red-dark); color: #fff; border-color: #fff; }
.menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { background: #fff; }
.site-nav { background: var(--red); border-bottom-color: var(--ink); }
.site-nav a { color: #fff; }
@media (max-width: 899px) { .site-nav a { border-bottom-color: rgba(255, 255, 255, .25); } }
.site-nav a[aria-current="page"] { color: #fff; text-decoration: underline; }
@media (min-width: 900px) {
  .site-nav, .site-nav.open { gap: 4px 26px; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; text-decoration: none; }
}

.hero { background: linear-gradient(115deg, var(--ink) 0%, var(--ink) 62%, var(--red) 62%, var(--red) 64%, var(--ink) 64%); }
.hero-row { padding-top: 60px; padding-bottom: 64px; }
@media (max-width: 899px) { .hero { background: var(--ink); border-bottom: 8px solid var(--red); } }
.hero h1 { font-weight: 600; font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.05; max-width: 20ch; }
.btn { border-radius: 0; padding: 14px 26px; font-size: 1.05rem; }

.page-title { border-bottom: 8px solid var(--red); }
.page-title h1 { font-weight: 600; }
.prose h2 { font-weight: 600; border-top: 4px solid var(--ink); }

.announcements { background: var(--paper); }
.section-label { display: inline-block; background: var(--red); color: #fff; padding: 6px 10px; }
.ann { border: 0; border-left: 8px solid var(--red); border-radius: 0; background: #fff; box-shadow: 0 2px 0 var(--ink); }
.card, .timeline, .toc { border: 2px solid var(--ink); border-radius: 0; }
.card h2, .timeline h2 { background: var(--ink); color: #fff; margin: -18px -20px 14px; padding: 12px 20px; border-bottom: 4px solid var(--red); font-weight: 600; }
.class-name { font-size: 1.05rem; }

.site-footer { border-top: 8px solid var(--red); }

/* The sans font on this site goes up to semibold (600); ask for that instead of a faked bold. */
.hero h1, .page-title h1, .prose h2, .prose h3, .card h2, .timeline h2, .ann h3, .profile h3, .class-card h3, .event h3,
.link-card h2, .album-name, .album-title, .archive-year, .notice h2, .brand-name, .footer-name, .db-big, .profile-initials { font-weight: 600; }