/* ===========================
   FCGD — Legal pages (dark)
   Scope: headers, toc, sections, typography
   =========================== */
:root{
  --field-blue-1: #0b1b3f;   /* deep navy */
  --field-blue-2: #133b8a;   /* rich blue  */
  --field-red-1:  #6c0e12;   /* dark crimson */
  --field-red-2:  #b01418;   /* brandy red  */

  --fg-1: #e9f0fb;           /* main text */
  --fg-2: #c9d5eb;           /* secondary */
  --fg-muted: #97a6c3;       /* muted */
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.14);
  --shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Page background (full site may already set this; keep if needed) */
body{
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(176,20,24,.22) 0%, rgba(176,20,24,0) 60%),
    radial-gradient(800px 380px at 110% 40%, rgba(108,14,18,.16) 0%, rgba(108,14,18,0) 70%),
    linear-gradient(135deg, var(--field-blue-1) 0%, var(--field-blue-2) 100%) fixed;
  color: var(--fg-1);

}

/* ---------- Hero ---------- */
.about-hero{
  position: relative;
  color: #fff;
  padding-bottom: 30px;
}
.about-hero .wrap{ position: relative; z-index: 1; }
.about-hero h1{
  margin: 0 0 .35rem 0;
  font-weight: 900;
  letter-spacing:.2px;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem);
}
.about-hero .subtitle{
  margin: 0;
  color: var(--fg-2);
}



/* ---------- Main layout ---------- */
.about-wrap{
  padding: 3vw;
}

/* Readable content defaults */
.prose{
  line-height: 1.65;
  color: var(--fg-1);
}
.prose p{ margin: 0 0 1rem; color: var(--fg-1); }
.prose .muted{ color: var(--fg-muted); }

.prose a{
  color: #fff;
  text-underline-offset: .18em;
  text-decoration-color: rgba(255,255,255,.4);
}
.prose a:hover{ text-decoration-color: rgba(255,255,255,.85); }

/* Headings */
.prose h2{
  margin: 0 0 .6rem;
  font-size: clamp(1.1rem, .9rem + 1vw, 1.8rem);
  font-weight: 800;
  color: #fff;
}
.prose h3{
  margin: 1rem 0 .4rem;
  font-size: clamp(1rem, .9rem + .6vw, 1.3rem);
  color: var(--fg-2);
}

/* Lists */
.prose ul, .prose ol{ margin: .5rem 0 1rem 1.2rem; }
.prose li{ margin: .25rem 0; }

/* ---------- Section panels ---------- */
.section{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(14px, 2.4vw, 24px);
  margin-bottom: clamp(14px, 2.4vw, 24px);
}

/* Accent bar for h2 inside sections */
.section > h2{
  position: relative; padding-top: 2px;
}
.section > h2::after{
  content:""; display:block; height:3px; width:52px; margin-top:.5rem;
  border-radius:999px;
  background: linear-gradient(90deg, var(--field-red-2), var(--field-red-1));
}

/* ---------- In-page TOC chips ---------- */
.toc{
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.toc a{
  display:inline-block;
  padding: 6px 10px; border-radius: 999px;
  color: var(--fg-2); text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.toc a:hover{ color:#fff; background: rgba(255,255,255,.12); }

/* ---------- Tables / code (if ever used) ---------- */
.prose table{
  width:100%; border-collapse: collapse; margin: .5rem 0 1rem;
  background: rgba(0,0,0,.15);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.prose th, .prose td{ padding: .6rem .7rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.prose th{ text-align:left; color:#fff; background: rgba(255,255,255,.06); }
.prose tr:last-child td{ border-bottom:none; }

.prose code{
  background: rgba(255,255,255,.08);
  padding: .1rem .35rem; border-radius: 6px;
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid #93c5fd; outline-offset: 3px; border-radius: 8px;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 640px){
  .section{ padding: 14px; border-radius: 14px; }
  .toc{ padding: 8px 10px; }
  .about-hero h1{ font-size: clamp(1.5rem, 1.2rem + 4vw, 2.2rem); }
}