/* ==========================================================================
   Bloodless Diamonds Africa — site stylesheet

   Palette: warm white, beige, black, gold. Archivo throughout.
   Square corners, flat planes, hairline rules. Gold is the only accent —
   it marks actions and figures and never fills a page.

   No CSS framework and no third-party stylesheet.
   ========================================================================== */

/* Fonts: SELF-HOSTED. The @font-face rules live in /assets/fonts/archivo.css,
   generated by `python fetch_fonts.py` and linked from the page head before
   this file. Nothing here reaches fonts.googleapis.com or fonts.gstatic.com,
   so no visitor's IP address is handed to a third party to render text, and
   the CSP in src/index.js is `style-src 'self'; font-src 'self'`.

   If you ever see text in Arial, the font files are missing — run
   `python fetch_fonts.py`. The site is designed to stay legible either way. */

/* Metric-matched fallback. Arial is ~3% wider than Archivo at the same size;
   overriding the metrics means the page does not visibly reflow when the real
   font finishes loading. Costs nothing and removes the layout shift. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  --bg:        #FAF8F3;   /* paper */
  --surface:   #EFEAE1;   /* card beige */
  --beige:     #E1D9CA;   /* band beige */
  --ink:       #14130F;   /* black / body text */
  --white:     #FFFFFF;   /* header bar, form fields */
  --gold:      #A8863C;   /* accent 600 — buttons, figures */
  --gold-text: #866A2C;   /* accent 700 — accent text on light */
  --gold-lite: #D3BA83;   /* accent 400 — kickers on black */
  --rule:      rgba(20, 19, 15, 0.16);
  --rule-inv:  rgba(255, 255, 255, 0.18);

  --font: "Archivo", "Archivo Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1200px;
  --gutter: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(40px, 5.4vw, 64px); }
h2 { font-size: clamp(30px, 3.4vw, 40px); }
h3 { font-size: 25px; }
h4 { font-size: 19px; }

p { margin: 0 0 1em; max-width: 68ch; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-text); text-underline-offset: 3px; }
a:hover { color: #5E4A1E; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: #E6D4AE; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 0; }

/* --- layout ------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.band-ink   { background: var(--ink); color: #fff; }
.band-beige { background: var(--beige); }
.band-ink a { color: var(--gold-lite); }
.band-ink h1, .band-ink h2, .band-ink h3 { color: #fff; }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text);
  margin: 0 0 14px;
}
.band-ink .kicker { color: var(--gold-lite); }

.lede { font-size: 20px; line-height: 1.5; max-width: 62ch; }

/* --- header ------------------------------------------------------------- */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 100;
}
.header__inner {
  display: flex; align-items: center; gap: 28px;
  min-height: 76px;
}
.header__logo img { width: 200px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav a {
  color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 500;
  padding: 8px 0;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-text); }
.nav__toggle { display: none; }

@media (max-width: 1000px) {
  .header__logo img { width: 150px; }
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--rule);
    padding: 18px var(--gutter) 24px; gap: 4px;
  }
  .nav.is-open a { padding: 12px 0; width: 100%; }
  .nav__toggle {
    display: block; margin-left: auto;
    background: none; border: 1px solid var(--ink); color: var(--ink);
    font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
    padding: 14px 16px; cursor: pointer; min-height: 44px;
  }
}

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 26px;
  font: 600 16px/1.2 var(--font); letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent; border-radius: 0;
  cursor: pointer; transition: background .15s, color .15s;
}
.btn-primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-primary:hover { background: var(--gold-text); border-color: var(--gold-text); color: #fff; }
.btn-secondary { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-secondary:hover { background: var(--beige); color: var(--ink); }
/* Secondary button on any dark ground. .hero is dark but is not .band-ink,
   so it must be listed explicitly — otherwise the button renders black on
   black and is invisible. */
.band-ink .btn-secondary,
.hero .btn-secondary { border-color: rgba(255,255,255,.5); color: #fff; }
.band-ink .btn-secondary:hover,
.hero .btn-secondary:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-ghost {
  background: none; border: 0; padding: 0; min-height: 0;
  color: var(--gold-text); text-decoration: underline;
}

/* --- hero --------------------------------------------------------------- */
.hero { background: var(--ink); color: #fff; padding: 96px 0 0; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero__solo { max-width: 780px; }
.hero__solo h1 { font-size: clamp(44px, 6.2vw, 72px); }
.hero__solo p { font-size: 20px; max-width: 58ch; }
.hero h1 { margin-bottom: 24px; }
.hero p { color: rgba(255,255,255,.82); font-size: 19px; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 32px; } .hero { padding-top: 56px; } }

.photo {
  background: #24221C; color: rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; min-height: 340px; padding: 24px;
}
.photo--light { background: var(--beige); color: rgba(20,19,15,.45); }
figure { margin: 0; }
figcaption { font-size: 12px; color: rgba(20,19,15,.6); padding-top: 10px; }
.band-ink figcaption { color: rgba(255,255,255,.55); }

/* --- figure row --------------------------------------------------------- */
.figrow {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-inv); margin-top: 72px;
}
.figrow > div { padding: 30px 24px 40px; border-right: 1px solid var(--rule-inv); }
.figrow > div:last-child { border-right: 0; }
.figrow b { display: block; font-size: 42px; font-weight: 700; color: var(--gold-lite); line-height: 1; }
.figrow span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 10px; }
@media (max-width: 780px) {
  .figrow { grid-template-columns: repeat(2, 1fr); }
  .figrow > div { border-bottom: 1px solid var(--rule-inv); }
  .figrow > div:nth-child(2n) { border-right: 0; }
}

/* --- cards -------------------------------------------------------------- */
.card {
  background: var(--surface); border: 0; padding: 28px 30px;
  display: flex; flex-direction: column;
}
.card h3 { font-size: 22px; margin-bottom: .4em; }
.card p { font-size: 16px; margin-bottom: 18px; }
.card__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { background: var(--beige); }

.tag {
  display: inline-block; padding: 5px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 0; background: var(--beige); color: #3A3733;
}
.tag--producing { background: var(--gold); color: #fff; }

/* --- data list ---------------------------------------------------------- */
.datalist { border-top: 1px solid var(--rule); margin: 0; }
.datalist div {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.datalist dt { font-size: 15px; }
.datalist dd { margin: 0; font-weight: 600; text-align: right; }
.band-ink .datalist, .band-ink .datalist div { border-color: var(--rule-inv); }

/* --- breadcrumb --------------------------------------------------------- */
.crumb {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(20,19,15,.55); padding: 22px 0 0;
}
.crumb a { color: rgba(20,19,15,.55); text-decoration: none; }
.crumb a:hover { color: var(--gold-text); }

/* --- forms -------------------------------------------------------------- */
.form { max-width: 560px; }
.field { margin-bottom: 22px; }
.field label {
  display: block; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; margin-bottom: 7px;
}
.field .hint { font-weight: 400; color: rgba(20,19,15,.6); }
.input, select.input, textarea.input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 16px/1.4 var(--font);
  background: var(--white); color: var(--ink);
  border: 1px solid #C9BFAC; border-radius: 0;
}
textarea.input { min-height: 130px; resize: vertical; }
.input:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--gold); flex: 0 0 auto; }
.error { color: #8C2A20; font-size: 14px; font-weight: 600; margin-top: 6px; }
.btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.formnote { font-size: 14px; color: rgba(20,19,15,.65); margin-top: 20px; }

/* --- steps -------------------------------------------------------------- */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 20px 46px; font-size: 16px;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--gold-text);
}

/* --- faq ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 0;
  font-size: 19px; font-weight: 700; letter-spacing: -.015em;
  display: flex; justify-content: space-between; gap: 20px; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-text); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding-bottom: 20px; }

/* --- prose (legal pages) ------------------------------------------------ */
.prose h2 { font-size: 27px; margin-top: 44px; }
.prose h3 { font-size: 20px; margin-top: 30px; }
.prose ul { max-width: 68ch; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6B655B; }
.tablewrap { overflow-x: auto; }

/* --- footer ------------------------------------------------------------- */
.footer { background: var(--ink); color: rgba(255,255,255,.72); padding: 72px 0 40px; font-size: 15px; }
.footer h4 { color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.footer a { color: rgba(255,255,255,.72); text-decoration: none; display: block; padding: 6px 0; }
.footer a:hover { color: var(--gold-lite); }
.footer__legal {
  border-top: 1px solid var(--rule-inv); margin-top: 48px; padding-top: 24px;
  font-size: 13px; color: rgba(255,255,255,.5);
}
.footer__legal p { max-width: 90ch; }

/* --- sticky mobile CTA -------------------------------------------------- */
.stickycta { display: none; }
@media (max-width: 780px) {
  .stickycta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--white); border-top: 1px solid var(--rule); padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .stickycta .btn { width: 100%; }
  body { padding-bottom: 76px; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   Utility classes
   ==========================================================================
   These replace the `style="..."` attributes the pages used to carry.

   Not a style preference — a requirement. The Content-Security-Policy in
   src/index.js sets `style-src 'self'` with no `'unsafe-inline'`, and that
   directive governs inline style ATTRIBUTES as well as <style> blocks. Any
   `style="margin-top:40px"` in the markup is silently dropped by the browser
   in production, so the page renders subtly wrong on the live site while
   looking perfect when opened as a local file.

   So: no inline style attributes anywhere in pages.py or build.py. If a page
   needs a one-off adjustment, add a class here. The alternative — putting
   'unsafe-inline' in the CSP — trades a real protection for a convenience.
   ========================================================================== */
.tac { text-align: center; }
.m-0 { margin: 0; }
.mb-6 { margin: 0 0 6px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-36 { margin-top: 36px; }
.mt-40 { margin-top: 40px; }
.mt-64 { margin-top: 64px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.mb-tight { margin-bottom: .3em; }
.pt-0 { padding-top: 0; }
.pt-12 { padding-top: 12px; }
.pt-24 { padding-top: 24px; }
.fs-15 { font-size: 15px; }
.fs-22 { font-size: 22px; }
.fs-25 { font-size: 25px; }
.measure { max-width: 760px; }
.measure-840 { max-width: 840px; }
.grid--wide { gap: 56px; align-items: start; }
.section--center { min-height: 56vh; display: flex; align-items: center; }
.on-dark { color: rgba(255,255,255,.82); }
.on-dark-dim { color: rgba(255,255,255,.7); }
.img-full { width: 100%; height: auto; }
.img-740 { width: 100%; max-width: 740px; }
.card__bleed { margin: -28px -30px 22px; }
.card--split {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
}
@media (max-width: 700px) {
  .card--split { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   Photographic backgrounds
   ==========================================================================
   A photograph behind a dark band, held at low opacity under a gradient
   scrim, so the picture reads as texture and the text stays readable.

   Two rules govern this and they are not negotiable:

   1. The image is DECORATION. It sits behind the text in a container with
      aria-hidden and an empty alt, so a screen reader never announces it and
      nothing meaningful is lost if it fails to load. Anything a visitor
      actually needs to know is in the text.

   2. Contrast comes from the scrim, not from luck. The ink base plus the
      gradient overlay keeps white body text above 4.5:1 (WCAG AA) whatever
      photograph is dropped in — including a bright, sun-blown one. Do not
      raise --hero-photo-opacity past about .32 without re-checking contrast
      with a real image in place.
   ========================================================================== */
:root {
  --hero-photo-opacity: .22;
  --band-photo-opacity: .16;
  /* The footer runs the photograph fainter than the content bands. Its text is
     the smallest and lowest-contrast on the site — links at 72% white, the
     legal block at 50% — so it has the least contrast headroom to give away. */
  --footer-photo-opacity: .10;
}

.hasbg { position: relative; isolation: isolate; overflow: hidden; }
.hasbg > .wrap { position: relative; z-index: 1; }

.bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; user-select: none;
}
.bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: var(--band-photo-opacity);
  /* Desaturated and slightly lifted so a colourful photograph does not fight
     the gold accent, and so the mid-tones do not crush to black. */
  filter: grayscale(35%) contrast(105%);
}
/* The scrim. Darkest at the top and bottom edges where headings and buttons
   sit, lightest through the middle where the photograph is allowed to show. */
.bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20,19,15,.86) 0%,
      rgba(20,19,15,.55) 42%,
      rgba(20,19,15,.72) 78%,
      rgba(20,19,15,.94) 100%);
}
.hero .bg img { opacity: var(--hero-photo-opacity); }
.footer .bg img { opacity: var(--footer-photo-opacity); }
/* A flat scrim in the footer rather than the gradient. The footer is tall and
   its text runs the full height, so there is no band that can be left lighter
   the way the middle of a hero can. */
.footer .bg::after { background: rgba(20,19,15,.80); }
/* On a narrow screen the text block is taller relative to the image, so the
   scrim has to work harder. */
@media (max-width: 700px) {
  .bg::after { background: rgba(20,19,15,.80); }
}
/* Some people set a preference for reduced data. Honour it: the scrim alone
   is a perfectly good background. */
@media (prefers-reduced-data: reduce) {
  .bg img { display: none; }
}

/* ==========================================================================
   Photographs — figures, strips and captions
   ========================================================================== */
figure img { width: 100%; height: auto; }
.fig--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.fig--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.fig--square img { aspect-ratio: 1 / 1; object-fit: cover; }

/* A row of photographs. The column count follows how many photographs have
   actually been supplied, so a strip of three holding two is not two pictures
   and a gap. Collapses to two columns, then one. */
.photostrip { display: grid; gap: 20px; }
.photostrip--1 { grid-template-columns: 1fr; }
.photostrip--2 { grid-template-columns: repeat(2, 1fr); }
.photostrip--3 { grid-template-columns: repeat(3, 1fr); }
.photostrip--4 { grid-template-columns: repeat(4, 1fr); }
.photostrip figure { margin: 0; }
.photostrip img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) {
  .photostrip--3, .photostrip--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .photostrip { grid-template-columns: 1fr !important; }
}

/* Photograph beside text. Reverses the order on request so alternating
   sections do not march down the page in the same direction. */
.mediarow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mediarow--flip > :first-child { order: 2; }
@media (max-width: 900px) {
  .mediarow { grid-template-columns: 1fr; gap: 32px; }
  .mediarow--flip > :first-child { order: 0; }
}

/* A photograph at the top of a card bleeds to the card's edges. */
.card > figure:first-child { margin: -28px -30px 22px; }

/* ==========================================================================
   Document list — the investor pack
   ========================================================================== */
.doclist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.doclist > li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px 28px; align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
}
.doc__title { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 6px; }
.doc__desc { font-size: 15px; margin: 0 0 8px; max-width: 60ch; color: rgba(20,19,15,.78); }
.doc__meta {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(20,19,15,.55); display: flex; flex-wrap: wrap; gap: 14px;
}
.doc__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.doc__actions .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; }
@media (max-width: 700px) {
  .doclist > li { grid-template-columns: 1fr; }
  .doc__actions .btn { flex: 1 1 auto; }
}
/* Shown when a listed document has no file on disk yet, so the page never
   links to a 404. */
.doc--pending { opacity: .62; }
.doc--pending .doc__meta { color: #8C6A20; }

/* Shown on /register/ when the visitor arrived from a "request this document"
   link. Set by nav.js from a fixed table of known documents; the page ships
   with it empty and hidden. */
.docrequest {
  border-left: 3px solid var(--gold);
  background: var(--surface);
  padding: 14px 18px;
  margin: 24px 0 0;
  font-size: 15px;
  max-width: 62ch;
}

/* Inline document references in the body of a content page. */
.doc__inline {
  font-size: .85em; color: rgba(20,19,15,.6); white-space: nowrap;
}
.band-ink .doc__inline { color: rgba(255,255,255,.6); }

.docnote {
  border-top: 1px solid var(--rule);
  margin-top: 36px; padding-top: 20px;
}
.docnote h3 {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: 12px;
}
.docnote__list { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.docnote__list li { padding: 6px 0; }
.band-ink .docnote { border-color: var(--rule-inv); }
.band-ink .docnote h3 { color: var(--gold-lite); }