/* ==========================================================================
   Generic Page Styles (page.css)
   Clean, luxury typography for standard, legal, and institutional pages.
   ========================================================================== */

body.generic-page {
  background: var(--charcoal, #1a1814);
}

.generic-page-article .generic-page-layout,
.generic-page-layout {
  background: var(--field-bg, #fffdf8);
  color: var(--charcoal, #1a1814);
}

.generic-page-hero {
  position: relative;
  padding: clamp(120px, 14vh, 160px) 24px clamp(48px, 6vh, 72px);
  background: linear-gradient(180deg, #11100d 0%, #1a1814 100%);
  color: var(--paper, #f3efe7);
  border-bottom: 1px solid rgba(197, 155, 95, 0.18);
}

.generic-page-hero-inner {
  width: min(840px, 100%);
  margin: 0 auto;
}

.generic-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font: 600 11px/1 var(--sans, "Manrope", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 239, 231, 0.65);
}

.generic-breadcrumb a {
  color: rgba(243, 239, 231, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}

.generic-breadcrumb a:hover,
.generic-breadcrumb a:focus-visible {
  color: #c59b5f;
}

.generic-breadcrumb .breadcrumb-separator {
  opacity: 0.45;
}

.generic-breadcrumb .breadcrumb-current {
  color: #c59b5f;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generic-page-title {
  margin: 0 0 16px;
  font: 600 clamp(32px, 4.4vw, 56px) / 1.05 var(--serif, "EB Garamond", serif);
  letter-spacing: -0.035em;
  color: #f7f3ec;
}

.generic-page-lead {
  max-width: 680px;
  margin: 0;
  font: 500 clamp(16px, 1.8vw, 19px) / 1.6 var(--sans, "Manrope", sans-serif);
  color: rgba(243, 239, 231, 0.82);
}

.generic-page-hero-media {
  width: min(840px, 100%);
  margin: 32px auto 0;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(197, 155, 95, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
}

.generic-page-thumbnail {
  display: block;
  width: 100%;
  height: clamp(220px, 35vw, 420px);
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   Content Layout & Typographic Rhythm
   ========================================================================== */

.generic-page-article .generic-page-layout {
  padding: clamp(48px, 7vw, 96px) 24px clamp(64px, 9vw, 120px);
}

.generic-page-content {
  width: min(840px, 100%);
  margin: 0 auto;
  font: 400 16px / 1.85 var(--sans, "Manrope", sans-serif);
  color: var(--charcoal, #1a1814);
}

.generic-page-content > *:first-child {
  margin-top: 0;
}

.generic-page-content h2 {
  margin: 48px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(138, 115, 85, 0.2);
  font: 600 clamp(24px, 3vw, 34px) / 1.15 var(--serif, "EB Garamond", serif);
  letter-spacing: -0.025em;
  color: var(--charcoal, #1a1814);
}

.generic-page-content h3 {
  margin: 36px 0 14px;
  font: 600 clamp(19px, 2.2vw, 23px) / 1.25 var(--slab, "Roboto Slab", serif);
  color: var(--deep-green, #3a4a35);
}

.generic-page-content h4,
.generic-page-content h5,
.generic-page-content h6 {
  margin: 28px 0 10px;
  font: 700 16px / 1.35 var(--sans, "Manrope", sans-serif);
  letter-spacing: 0.04em;
  color: var(--warm-brown, #8a7355);
}

.generic-page-content p {
  margin: 0 0 24px;
}

.generic-page-content ul,
.generic-page-content ol {
  margin: 0 0 28px;
  padding-left: 28px;
}

.generic-page-content li {
  margin-bottom: 8px;
  line-height: 1.75;
}

.generic-page-content li::marker {
  color: #c59b5f;
}

.generic-page-content blockquote {
  position: relative;
  margin: 36px 0;
  padding: 22px 28px;
  border-left: 3px solid var(--olive, #3a4a35);
  background: rgba(58, 74, 53, 0.05);
  font: 500 19px / 1.55 var(--serif, "EB Garamond", serif);
  font-style: italic;
  color: var(--deep-green, #3a4a35);
}

.generic-page-content blockquote p:last-child {
  margin-bottom: 0;
}

.generic-page-content a {
  color: #a37a3f;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.generic-page-content a:hover,
.generic-page-content a:focus-visible {
  color: var(--deep-green, #3a4a35);
}

.generic-page-content strong,
.generic-page-content b {
  font-weight: 700;
  color: #11100d;
}

.generic-page-content hr {
  border: 0;
  height: 1px;
  background: rgba(138, 115, 85, 0.22);
  margin: 44px 0;
}

/* Tables */
.generic-page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 36px 0;
  font-size: 15px;
  border: 1px solid rgba(26, 24, 20, 0.12);
}

.generic-page-content th {
  text-align: left;
  padding: 14px 18px;
  background: rgba(26, 24, 20, 0.06);
  border-bottom: 2px solid #c59b5f;
  font-weight: 700;
  font-family: var(--sans, "Manrope", sans-serif);
  color: var(--charcoal, #1a1814);
}

.generic-page-content td {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(26, 24, 20, 0.08);
}

.generic-page-content tr:nth-child(even) td {
  background: rgba(26, 24, 20, 0.02);
}

/* Page links for multipage content */
.page-links {
  display: flex;
  gap: 8px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(138, 115, 85, 0.2);
}

.page-links .page-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(197, 155, 95, 0.35);
  border-radius: 4px;
  font: 600 13px var(--sans, "Manrope", sans-serif);
  color: var(--charcoal, #1a1814);
  text-decoration: none;
}

.page-links a .page-number:hover {
  background: #c59b5f;
  color: #fff;
  border-color: #c59b5f;
}

@media (max-width: 680px) {
  .generic-page-hero {
    padding: 108px 18px 40px;
  }
  .generic-page-article .generic-page-layout {
    padding: 36px 18px 72px;
  }
}