:root {
  --burgundy: #8f271f;
  --wine: #4c1512;
  --gold: #ebcc7e;
  --cream: #fff8ef;
  --paper: #ffffff;
  --ink: #17110f;
  --muted: #6f625c;
  --line: #e7d9ce;
}

html { background: var(--cream); }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: "Roboto", "Open Sans", system-ui, sans-serif;
  line-height: 1.7;
}
a { color: var(--burgundy); }
a:hover { color: var(--wine); }
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--wine);
  color: #fff;
  padding: .5rem .75rem;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

.site-navbar {
  background: rgba(255, 248, 239, .96);
  border-bottom: 1px solid var(--gold);
  min-height: 5rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 40;
}
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 13rem;
}
.brand-title,
.footer-brand {
  color: var(--burgundy);
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.brand-subtitle,
.eyebrow {
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.navbar-item {
  color: var(--ink);
  font-weight: 600;
}
.navbar-item:hover {
  background: transparent !important;
  color: var(--burgundy) !important;
}

.homepage-portal {
  min-height: calc(100vh - 5rem);
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.portal-brand {
  text-align: center;
  padding: 2.2rem 1rem 1.8rem;
}
.portal-brand h1 {
  color: var(--burgundy);
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: clamp(2.3rem, 4vw, 4rem);
  font-weight: 700;
  line-height: .95;
}
.portal-brand p:last-child {
  color: var(--wine);
  font-weight: 600;
}
.portal-panels {
  display: flex;
  flex: 1;
  min-height: 34rem;
}
.portal-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 32rem;
  border-right: 1px solid rgba(255,255,255,.55);
  transition: flex .45s ease;
}
.portal-panel:hover { flex: 1.18; }
.portal-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.portal-panel:hover img { transform: scale(1.04); }
.portal-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(76,21,18,.86));
}
.portal-copy {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 2rem;
  color: #fff;
}
.portal-copy strong {
  display: block;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: clamp(1.9rem, 3vw, 3.2rem);
  line-height: 1.05;
}
.portal-copy em {
  display: block;
  max-width: 30rem;
  margin-top: .8rem;
  font-style: normal;
}
.portal-copy span:last-child {
  display: inline-block;
  margin-top: 1rem;
  border-bottom: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
}

.page-hero {
  background: linear-gradient(135deg, var(--cream), #fff);
  border-bottom: 1px solid var(--line);
  padding-top: 4rem;
  padding-bottom: 3rem;
}
.title,
.content h1,
.content h2,
.content h3,
.content h4 {
  color: var(--burgundy);
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
}
.lead {
  color: var(--muted);
  font-size: 1.2rem;
  max-width: 48rem;
}
.content-section {
  background: var(--cream);
}
.article-container {
  max-width: 920px !important;
}
.article-shell,
.content-card,
.image-card,
.site-sidebar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(76, 21, 18, .07);
}
.article-shell {
  padding: clamp(1.25rem, 4vw, 3rem);
}
.article-shell blockquote {
  border-left: 3px solid var(--gold);
  color: var(--wine);
}
.article-dates,
.toc-list {
  color: var(--muted);
  font-size: .92rem;
}
.toc-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
}
.toc-list ul { margin: 0; }
.image-card {
  margin: 1.25rem 0;
  overflow: hidden;
}
.image-card img {
  display: block;
  width: 100%;
  height: auto;
}
.image-card figcaption {
  color: var(--muted);
  font-size: .9rem;
  padding: .75rem 1rem;
}
.gallery-grid .image-card {
  height: 100%;
}
.content-card {
  height: 100%;
  overflow: hidden;
}
.card-content .title {
  margin-bottom: .75rem;
}
.source-links {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding-top: 1.5rem;
}
.source-link-grid {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.source-link {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--burgundy);
  display: block;
  font-weight: 600;
  padding: .8rem 1rem;
}
.source-link:hover {
  border-color: var(--gold);
  color: var(--wine);
}
.button.is-primary,
.button.is-primary.is-light {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}
.button.is-primary:hover,
.button.is-primary.is-light:hover {
  background: var(--wine);
  color: #fff;
}
.site-breadcrumbs {
  margin-bottom: 1.5rem;
}
.site-sidebar {
  padding: 1.25rem;
}
.site-footer {
  background: var(--wine);
  color: #f7ebe4;
}
.site-footer a,
.site-footer .footer-brand {
  color: #fff;
}
.footer-heading {
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
}
.footer-link {
  display: block;
  margin: .35rem 0;
}

@media (max-width: 768px) {
  .site-navbar { padding: 0 .75rem; }
  .brand-lockup { align-items: flex-start; min-width: auto; }
  .brand-title { font-size: 1.4rem; }
  .portal-panels { flex-direction: column; min-height: auto; }
  .portal-panel { min-height: 18rem; }
  .portal-panel:hover { flex: 1; }
  .portal-copy { bottom: 1.25rem; }
  .article-shell { padding: 1.15rem; }
}