/* ============================================================
   BLACKAMERICAN.NINJA: visual identity. Site-specific.

   WHO THIS IS FOR
   Black readers across the US, roughly 25 to 55, who want the real
   numbers on the issues that hit their families (money, housing,
   work, health, voting, rights) and somewhere useful to go next.
   Tired of outrage bait and of coverage that treats them as a
   statistic. Reading on a phone, sharing what's useful into the
   family group chat.

   WHAT THE DESIGN HAS TO SAY
   Sharp and proud, with the confidence of a front page in the Black
   press tradition: big condensed headlines, figures you can read
   from across the room, and the source printed right under them.

   SIGNATURES
   The figure card: an indigo band with the topic in gold, the
   figure set huge, the comparison beneath it, and the source and
   year printed on every card. A wordmark with .ninja in gold.

   COLOR
   Deep indigo, the color of adire cloth; gold; warm cream paper;
   near-black ink; rust for small accents and the focus ring. Gold
   sits on indigo and ink, never on cream. Every pair is checked by
   the build script.

   TYPE
   Anton for headlines and figures, condensed like a newspaper
   banner. Literata for reading, built for long text on screens.
   Epilogue for labels and navigation.
   ============================================================ */

:root {
  --cream:       #f7f2e8;
  --card:        #fffdf8;
  --ink:         #16161d;
  --ink-soft:    #4a4755;
  --indigo:      #1f2a6b;
  --indigo-deep: #151d4f;
  --gold:        #e0a526;
  --rust:        #9c3b1f;
  --line:        #e5dccb;   /* decorative rules only */

  --accent:     var(--indigo);
  --accent-ink: #ffffff;
  --focus:      var(--rust);
  --measure:    66ch;

  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --body:    'Literata', Georgia, 'Times New Roman', serif;
  --label:   'Epilogue', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[hidden] { display: none !important; }

body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.7; background: var(--cream); color: var(--ink); }

.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }

h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.02; text-transform: uppercase; letter-spacing: 0.01em; }
h1 { font-size: clamp(2.6rem, 7.5vw, 5.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.6rem; }
h3 { font-family: var(--label); font-weight: 700; font-size: 1.15rem; line-height: 1.25; margin-bottom: 0.3rem; }
p + p { margin-top: 0.85rem; }
a { color: var(--indigo); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--rust); }
a[href^="mailto:"] { overflow-wrap: anywhere; }

.kicker { font-family: var(--label); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rust); margin-bottom: 0.6rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 52ch; }
.fine { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.85rem; }

/* ---- Header ------------------------------------------------ */
.site-header { background: var(--ink); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.55rem; }
.brand { display: inline-flex; align-items: baseline; min-height: 44px; padding-top: 0.35rem; font-family: var(--display); font-size: 1.7rem; text-transform: uppercase; letter-spacing: 0.02em; color: #ffffff; text-decoration: none; }
.brand span { color: var(--gold); font-size: 0.8em; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--label); font-weight: 600; color: #ffffff; text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { color: var(--gold); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.site-header :focus-visible { outline-color: var(--gold); }

main { padding-block: 2.75rem 4rem; }
.hero { padding-bottom: 1.5rem; border-bottom: 6px solid var(--ink); }
.hero h1 { max-width: 16ch; margin-bottom: 0.9rem; }
.section { margin-top: 3.25rem; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; }
.section-head a { font-family: var(--label); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

/* ---- THE FIGURE CARD --------------------------------------- */
.stats { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.stat { background: var(--card); border: 2px solid var(--ink); max-width: none; display: flex; flex-direction: column; }
.stat-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; background: var(--indigo); padding: 0.45rem 0.9rem; }
.stat-top p { margin: 0; font-family: var(--label); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.stat-top .topic { color: var(--gold); }
.stat-top .year { color: #ffffff; }
.stat-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.figure { margin: 0.2rem 0 0; }
.figure .big { display: block; font-family: var(--display); font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1; color: var(--ink); }
.who { font-family: var(--label); font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); }
.compare { margin: 0.5rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.compare .cval { font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--indigo); margin-right: 0.35rem; }
.unit { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.4rem; }
.plain { margin-top: 0.6rem; font-size: 0.975rem; }
.source { margin-top: auto; padding-top: 0.7rem; font-family: var(--label); font-size: 0.8125rem; color: var(--ink-soft); }
.source a { font-weight: 700; }

/* ---- Rights ------------------------------------------------ */
.band { background: var(--indigo); color: #ffffff; padding: clamp(1.5rem, 4vw, 2.5rem); }
.band h2 { color: #ffffff; }
.band a { color: #ffffff; }
.band :focus-visible { outline-color: var(--gold); }
.topic-links { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.topic-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 2px solid var(--gold); font-family: var(--label); font-weight: 700; text-decoration: none; }
.topic-links a:hover { background: var(--gold); color: var(--ink); }
.jump ul { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--label); font-weight: 700; }
.resources { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.resource { background: var(--card); border-left: 6px solid var(--indigo); padding: 1rem 1.1rem 0.8rem; max-width: none; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--line); }
.resource .topic { font-family: var(--label); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust); margin: 0 0 0.3rem; }
.runby { font-family: var(--label); font-size: 0.875rem; color: var(--ink-soft); margin: 0 0 0.5rem; }
.when { margin-top: 0.6rem; }
.meta { margin: 0.7rem 0 0; display: grid; gap: 0.25rem; }
.meta div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; }
.meta dt { font-family: var(--label); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); padding-top: 0.15rem; }
.meta dd { margin: 0; font-size: 0.95rem; }
.go { margin-top: auto; padding-top: 0.5rem; font-family: var(--label); font-weight: 700; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Commentary, panels, buttons --------------------------- */
.standards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.standards li { background: var(--card); border-top: 6px solid var(--gold); padding: 1rem 1.1rem; max-width: none; }
.empty { border: 2px dashed var(--ink-soft); padding: 1.75rem; text-align: center; }
.empty p { margin-inline: auto; }
.panel { background: var(--card); border: 2px solid var(--ink); padding: 1rem 1.25rem; margin-top: 1.5rem; }
.panel--note { border-color: var(--rust); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; background: var(--indigo); color: #ffffff; border: 2px solid var(--indigo); font-family: var(--label); font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--indigo-deep); border-color: var(--indigo-deep); color: #ffffff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #ffffff; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.prose h2 { margin-top: 2.25rem; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.5rem; }

.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-family: var(--label); font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--ink); background: #ffffff; }
.signup button { justify-self: start; }

/* ---- Footer: dark band, gold focus ring -------------------- */
.site-footer { background: var(--ink); color: var(--cream); margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-family: var(--label); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; font-family: var(--label); }
.site-footer a:hover { color: var(--gold); }
.site-footer .fine { color: #cfd2e6; margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--gold); }

@media (max-width: 30rem) {
  .meta div { grid-template-columns: 1fr; gap: 0; }
}
@media (forced-colors: active) {
  .stat, .resource, .band, .btn, .panel, .standards li, .topic-links a { border: 1px solid; }
}