/* ============================================================
   Dang! Articles — shared stylesheet
   Built on Warm Obsidian brand (frozen March 2026).
   ============================================================ */

:root {
  /* Core neutrals */
  --dang-bg:            #F7F5F2;
  --dang-card:          #FFFFFF;
  --dang-text:          #17191B;
  --dang-text-2:        #5F6468;
  --dang-text-3:        #6F6A64;
  --dang-text-4:        #B0ACA8;
  --dang-border:        #DDD7CF;
  --dang-border-2:      #E4E0DA;

  /* Brand accent (Copper) — never on severity elements */
  --dang-accent:        #7A5842;
  --dang-accent-press:  #654836;
  --dang-accent-surface:#EFE7E0;
  --dang-accent-ghost:  #FBF5F0;

  /* Reversed / dark */
  --dang-obsidian:      #111315;
  --dang-cream:         #F4F0E8;
  --dang-copper-light:  #C4946E;

  /* Functional severity (NEVER branding) */
  --dang-high:          #B83030;
  --dang-high-bg:       #FDEAEA;
  --dang-med:           #A56A1F;
  --dang-med-bg:        #FEF3E6;
  --dang-clear:         #4F6B57;
  --dang-clear-accent:  #4A8A50;
  --dang-clear-bg:      #EDF5EF;

  /* Type */
  --dang-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", system-ui, sans-serif;
  --dang-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Inter", system-ui, sans-serif;

  --dang-text-body:      17px;
  --dang-text-secondary: 15px;
  --dang-text-label:     13px;
  --dang-text-caption:   12px;
  --dang-text-micro:     11px;

  --dang-text-wordmark-md: 20px;
  --dang-text-headline:    26px;
  --dang-text-title:       20px;
  --dang-text-subtitle:    18px;

  --dang-w-regular:  400;
  --dang-w-semibold: 600;
  --dang-w-bold:     700;
  --dang-w-black:    900;

  --dang-lh-tight:  1.25;
  --dang-lh-snug:   1.40;
  --dang-lh-normal: 1.47;

  --dang-ls-wordmark-md: -1px;
  --dang-ls-wordmark-lg: -2px;
  --dang-ls-micro:       0.5px;

  /* Radii */
  --dang-radius-sm:   4px;
  --dang-radius-md:   8px;
  --dang-radius-lg:   10px;
  --dang-radius-xl:   12px;
  --dang-radius-2xl:  14px;
  --dang-radius-3xl:  16px;

  /* Spacing */
  --dang-s-1:  4px;
  --dang-s-2:  8px;
  --dang-s-3:  10px;
  --dang-s-4:  12px;
  --dang-s-5:  14px;
  --dang-s-6:  16px;
  --dang-s-7:  18px;
  --dang-s-8:  20px;
  --dang-s-10: 24px;
  --dang-s-12: 28px;
  --dang-s-14: 32px;

  /* Borders */
  --dang-border-hairline: 0.5px;
  --dang-border-thin:     1px;
  --dang-border-med:      1.5px;
  --dang-border-accent:   2px;
  --dang-border-risk:     3px;

  /* Motion */
  --dang-ease-out:   cubic-bezier(0.33, 1, 0.68, 1);
  --dang-dur-fast:   100ms;
  --dang-dur-normal: 250ms;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--dang-bg);
  color: var(--dang-text);
  font-family: var(--dang-font-sans);
  font-size: var(--dang-text-body);
  line-height: var(--dang-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, li {
  font-size: var(--dang-text-body);
  font-weight: var(--dang-w-regular);
  line-height: var(--dang-lh-normal);
  color: var(--dang-text);
  margin: 0 0 var(--dang-s-5);
}

a { color: var(--dang-accent); text-decoration: none; }
a:hover { color: var(--dang-accent-press); text-decoration: underline; }

strong { font-weight: var(--dang-w-semibold); }

::selection { background: var(--dang-accent-surface); color: var(--dang-text); }

/* ============================================================
   Wordmark
   ============================================================ */
.dang-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--dang-font-display);
  font-weight: var(--dang-w-black);
  color: var(--dang-text);
  letter-spacing: var(--dang-ls-wordmark-lg);
  line-height: 1;
  text-decoration: none;
}
.dang-wordmark:hover { text-decoration: none; color: var(--dang-text); }
.dang-wordmark__bang {
  display: inline-block;
  transform: rotate(-15deg);
  transform-origin: bottom left;
  color: var(--dang-accent);
  margin-left: 5px;
  letter-spacing: 0;
}
.dang-wordmark--md { font-size: var(--dang-text-wordmark-md); letter-spacing: var(--dang-ls-wordmark-md); }
.dang-wordmark--md .dang-wordmark__bang { margin-left: 3px; }

/* ============================================================
   Site header / footer
   ============================================================ */
header.site-header {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--dang-s-8) var(--dang-s-10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--dang-border-hairline) solid var(--dang-border);
}
header.site-header .back {
  font-size: var(--dang-text-secondary);
  color: var(--dang-text-2);
  font-weight: var(--dang-w-regular);
}
header.site-header .back:hover { color: var(--dang-text); text-decoration: none; }
header.site-header .back::before { content: "‹ "; color: var(--dang-text-3); }

footer.site-footer {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--dang-s-10);
  border-top: var(--dang-border-hairline) solid var(--dang-border);
}
footer.site-footer .ft-links {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--dang-s-4);
  display: flex;
  gap: var(--dang-s-8);
  flex-wrap: wrap;
}
footer.site-footer .ft-links li { margin: 0; }
footer.site-footer .ft-links a {
  color: var(--dang-text-2);
  font-size: var(--dang-text-secondary);
}
footer.site-footer .ft-links a:hover { color: var(--dang-text); text-decoration: none; }
footer.site-footer .ft-copy {
  font-size: var(--dang-text-caption);
  color: var(--dang-text-3);
  margin: 0;
}

/* ============================================================
   Layout
   ============================================================ */
main.article {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--dang-s-14) var(--dang-s-10) 64px;
}

main.index {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--dang-s-14) var(--dang-s-10) 64px;
}

/* ============================================================
   Breadcrumb
   ============================================================ */
nav.crumbs {
  font-size: var(--dang-text-caption);
  color: var(--dang-text-3);
  margin-bottom: var(--dang-s-6);
}
nav.crumbs a { color: var(--dang-text-3); }
nav.crumbs a:hover { color: var(--dang-text-2); text-decoration: none; }

/* ============================================================
   Article headings
   ============================================================ */
main.article h1 {
  font-size: clamp(26px, 4vw, 34px);
  font-family: var(--dang-font-display);
  font-weight: var(--dang-w-semibold);
  line-height: var(--dang-lh-tight);
  letter-spacing: -0.3px;
  color: var(--dang-text);
  margin: 0 0 var(--dang-s-4);
}

main.article p.lede {
  font-size: var(--dang-text-subtitle);
  color: var(--dang-text-2);
  line-height: var(--dang-lh-snug);
  margin: 0 0 var(--dang-s-4);
}

main.article p.meta {
  font-size: var(--dang-text-caption);
  color: var(--dang-text-3);
  margin: 0 0 var(--dang-s-10);
}

main.article h2 {
  font-size: var(--dang-text-title);
  font-weight: var(--dang-w-semibold);
  line-height: var(--dang-lh-snug);
  color: var(--dang-text);
  margin: var(--dang-s-14) 0 var(--dang-s-4);
  letter-spacing: -0.2px;
}

main.article h3 {
  font-size: var(--dang-text-subtitle);
  font-weight: var(--dang-w-semibold);
  line-height: var(--dang-lh-snug);
  color: var(--dang-text);
  margin: var(--dang-s-10) 0 var(--dang-s-2);
}

/* Red-flag heading + badge */
main.article h3.flag-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--dang-s-3);
  margin: var(--dang-s-12) 0 var(--dang-s-3);
  padding-top: var(--dang-s-4);
  border-top: var(--dang-border-hairline) solid var(--dang-border-2);
}
main.article h3.flag-heading:first-of-type { border-top: none; padding-top: 0; }

.flag-badge {
  display: inline-block;
  font-family: var(--dang-font-sans);
  font-size: var(--dang-text-micro);
  font-weight: var(--dang-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--dang-ls-micro);
  background: var(--dang-high-bg);
  color: var(--dang-high);
  padding: 3px var(--dang-s-2);
  border-radius: var(--dang-radius-sm);
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
   Audience block
   ============================================================ */
.audience {
  background: var(--dang-card);
  border: var(--dang-border-hairline) solid var(--dang-border);
  border-radius: var(--dang-radius-2xl);
  padding: var(--dang-s-6) var(--dang-s-7);
  margin: 0 0 var(--dang-s-12);
}
.audience p {
  margin: var(--dang-s-2) 0;
  font-size: var(--dang-text-secondary);
  color: var(--dang-text);
  line-height: var(--dang-lh-snug);
}
.audience p:first-child { margin-top: 0; }
.audience p:last-child  { margin-bottom: 0; }
.audience strong { color: var(--dang-text); font-weight: var(--dang-w-semibold); }

/* ============================================================
   Table of contents
   ============================================================ */
nav.toc {
  background: var(--dang-card);
  border: var(--dang-border-hairline) solid var(--dang-border);
  border-radius: var(--dang-radius-2xl);
  padding: var(--dang-s-6) var(--dang-s-8);
  margin: 0 0 var(--dang-s-14);
}
nav.toc h2 {
  font-size: var(--dang-text-micro);
  font-weight: var(--dang-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--dang-ls-micro);
  color: var(--dang-text-3);
  margin: 0 0 var(--dang-s-4);
  line-height: 1;
}
nav.toc ol {
  margin: 0;
  padding-left: var(--dang-s-8);
  font-size: var(--dang-text-secondary);
}
nav.toc li {
  margin: var(--dang-s-2) 0;
  color: var(--dang-text);
  padding-left: var(--dang-s-1);
}
nav.toc li::marker { color: var(--dang-text-3); }
nav.toc a { color: var(--dang-text); }
nav.toc a:hover { color: var(--dang-accent); text-decoration: none; }

/* ============================================================
   Article body
   ============================================================ */
main.article ul:not(.checks):not(.ft-links) {
  margin: 0 0 var(--dang-s-5);
  padding-left: var(--dang-s-8);
}
main.article ul:not(.checks):not(.ft-links) li { margin-bottom: var(--dang-s-2); }

/* Rule engine checks list */
ul.checks {
  background: var(--dang-card);
  border: var(--dang-border-hairline) solid var(--dang-border);
  border-radius: var(--dang-radius-2xl);
  padding: var(--dang-s-7) var(--dang-s-8);
  margin: var(--dang-s-6) 0;
  list-style: none;
}
ul.checks li {
  font-size: var(--dang-text-body);
  color: var(--dang-text);
  padding-left: var(--dang-s-7);
  position: relative;
  margin-bottom: var(--dang-s-5);
  line-height: var(--dang-lh-snug);
}
ul.checks li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--dang-accent);
  font-weight: var(--dang-w-bold);
  font-size: var(--dang-text-body);
}
ul.checks li:last-child { margin-bottom: 0; }

/* ============================================================
   Callouts
   ============================================================ */
.callout {
  background: var(--dang-accent-ghost);
  border: var(--dang-border-hairline) solid var(--dang-accent-surface);
  border-left: var(--dang-border-risk) solid var(--dang-accent);
  border-radius: 0 var(--dang-radius-xl) var(--dang-radius-xl) 0;
  padding: var(--dang-s-5) var(--dang-s-7);
  margin: var(--dang-s-6) 0;
  font-size: var(--dang-text-secondary);
  color: var(--dang-text);
}
.callout p { margin: 0; font-size: var(--dang-text-secondary); }
.callout strong { color: var(--dang-text); }

/* Caveat uses severity-medium — legitimately a caution context */
.caveat {
  background: var(--dang-med-bg);
  border-left: var(--dang-border-risk) solid var(--dang-med);
  border-radius: 0 var(--dang-radius-xl) var(--dang-radius-xl) 0;
  padding: var(--dang-s-5) var(--dang-s-7);
  margin: var(--dang-s-6) 0;
  font-size: var(--dang-text-secondary);
  color: var(--dang-text);
}
.caveat p { margin: 0; font-size: var(--dang-text-secondary); }
.caveat strong { color: var(--dang-med); font-weight: var(--dang-w-semibold); }

/* ============================================================
   CTA
   ============================================================ */
aside.cta {
  background: var(--dang-accent-ghost);
  border: var(--dang-border-hairline) solid var(--dang-accent-surface);
  border-radius: var(--dang-radius-3xl);
  padding: var(--dang-s-10) var(--dang-s-12);
  margin: var(--dang-s-14) 0;
}
aside.cta h2 {
  font-size: var(--dang-text-title);
  margin: 0 0 var(--dang-s-2);
  color: var(--dang-text);
  letter-spacing: -0.2px;
}
aside.cta p {
  color: var(--dang-text-2);
  font-size: var(--dang-text-secondary);
  margin: 0 0 var(--dang-s-6);
  line-height: var(--dang-lh-snug);
}

a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--dang-accent);
  color: #FFFFFF;
  padding: 0 var(--dang-s-10);
  border-radius: var(--dang-radius-2xl);
  font-weight: var(--dang-w-semibold);
  font-size: var(--dang-text-body);
  text-decoration: none;
  transition: background var(--dang-dur-fast) var(--dang-ease-out);
}
a.btn:hover {
  background: var(--dang-accent-press);
  color: #FFFFFF;
  text-decoration: none;
}

/* ============================================================
   FAQ
   ============================================================ */
main.article section.faq { margin: var(--dang-s-14) 0; }
main.article section.faq h2 { margin-bottom: var(--dang-s-6); }
main.article section.faq h3 {
  font-size: var(--dang-text-body);
  font-weight: var(--dang-w-semibold);
  color: var(--dang-text);
  margin: var(--dang-s-10) 0 var(--dang-s-2);
}
main.article section.faq p {
  font-size: var(--dang-text-body);
  color: var(--dang-text);
  margin-bottom: 0;
  line-height: var(--dang-lh-normal);
}

/* ============================================================
   Related guides
   ============================================================ */
section.related {
  border-top: var(--dang-border-hairline) solid var(--dang-border);
  padding-top: var(--dang-s-12);
  margin-top: var(--dang-s-14);
}
section.related h2 { margin-bottom: var(--dang-s-6); }
section.related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--dang-s-4);
}
section.related li { margin: 0; }
section.related li a {
  display: block;
  padding: var(--dang-s-5) var(--dang-s-6);
  background: var(--dang-card);
  border: var(--dang-border-hairline) solid var(--dang-border);
  border-radius: var(--dang-radius-xl);
  color: var(--dang-text);
  font-size: var(--dang-text-secondary);
  font-weight: var(--dang-w-regular);
  text-decoration: none;
  transition: border-color var(--dang-dur-fast) var(--dang-ease-out);
}
section.related li a:hover {
  border-color: var(--dang-accent);
  color: var(--dang-text);
  text-decoration: none;
}

/* ============================================================
   Disclaimer
   ============================================================ */
.disclaimer {
  font-size: var(--dang-text-caption);
  color: var(--dang-text-3);
  border-top: var(--dang-border-hairline) solid var(--dang-border);
  padding-top: var(--dang-s-8);
  margin-top: var(--dang-s-10);
  line-height: var(--dang-lh-snug);
}

/* ============================================================
   Index page
   ============================================================ */
.index-hero {
  margin: 0 0 var(--dang-s-14);
}
.index-hero h1 {
  font-size: clamp(32px, 5vw, 44px);
  font-family: var(--dang-font-display);
  font-weight: var(--dang-w-semibold);
  line-height: var(--dang-lh-tight);
  letter-spacing: -0.5px;
  color: var(--dang-text);
  margin: 0 0 var(--dang-s-5);
}
.index-hero p.hero-lede {
  font-size: var(--dang-text-subtitle);
  color: var(--dang-text-2);
  line-height: var(--dang-lh-snug);
  max-width: 620px;
  margin: 0;
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--dang-s-6);
  margin: var(--dang-s-10) 0;
}

.index-card {
  display: flex;
  flex-direction: column;
  background: var(--dang-card);
  border: var(--dang-border-hairline) solid var(--dang-border);
  border-radius: var(--dang-radius-2xl);
  padding: var(--dang-s-8) var(--dang-s-8) var(--dang-s-7);
  color: var(--dang-text);
  text-decoration: none;
  transition: border-color var(--dang-dur-fast) var(--dang-ease-out);
}
.index-card:hover {
  border-color: var(--dang-accent);
  text-decoration: none;
  color: var(--dang-text);
}

.index-card .card-kicker {
  font-size: var(--dang-text-micro);
  font-weight: var(--dang-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--dang-ls-micro);
  color: var(--dang-accent);
  margin-bottom: var(--dang-s-3);
}
.index-card .card-title {
  font-family: var(--dang-font-display);
  font-size: var(--dang-text-title);
  font-weight: var(--dang-w-semibold);
  line-height: var(--dang-lh-snug);
  color: var(--dang-text);
  margin: 0 0 var(--dang-s-3);
  letter-spacing: -0.2px;
}
.index-card .card-preview {
  font-size: var(--dang-text-secondary);
  color: var(--dang-text-2);
  line-height: var(--dang-lh-snug);
  margin: 0 0 var(--dang-s-6);
  flex-grow: 1;
}
.index-card .card-meta {
  font-size: var(--dang-text-caption);
  color: var(--dang-text-3);
}
.index-card .card-meta::after {
  content: " →";
  color: var(--dang-accent);
  margin-left: var(--dang-s-1);
  font-weight: var(--dang-w-semibold);
}

.index-cta {
  background: var(--dang-accent-ghost);
  border: var(--dang-border-hairline) solid var(--dang-accent-surface);
  border-radius: var(--dang-radius-3xl);
  padding: var(--dang-s-12);
  margin: var(--dang-s-14) 0 0;
}
.index-cta h2 {
  font-size: var(--dang-text-title);
  font-weight: var(--dang-w-semibold);
  margin: 0 0 var(--dang-s-2);
  color: var(--dang-text);
  letter-spacing: -0.2px;
}
.index-cta p {
  font-size: var(--dang-text-secondary);
  color: var(--dang-text-2);
  margin: 0 0 var(--dang-s-6);
  line-height: var(--dang-lh-snug);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
  header.site-header,
  main.article,
  main.index,
  footer.site-footer {
    padding-left: var(--dang-s-6);
    padding-right: var(--dang-s-6);
  }
  main.article { padding-top: var(--dang-s-10); padding-bottom: 48px; }
  main.article h1 { font-size: 26px; }
  .index-hero h1 { font-size: 28px; }
  main.article h2 { font-size: 19px; margin-top: var(--dang-s-12); }
  main.article h3 { font-size: 17px; }
  main.article h3.flag-heading { gap: var(--dang-s-2); }
  aside.cta { padding: var(--dang-s-8); }
  .index-cta { padding: var(--dang-s-8); }
}