/* ============================================================
   DeFi Analysis — Consulting / Economist Aesthetic
   Typography-first, authoritative, restrained.
   Light mode primary. Dark mode supported via prefers-color-scheme.
   ============================================================ */

/* --- Design Tokens --- */
:root {
  /* Light palette — warm white, charcoal, navy, restrained red */
  --color-bg:            #fafaf8;
  --color-bg-alt:        #f2f1ee;
  --color-surface:       #ffffff;
  --color-border:        #e2e0dc;
  --color-border-light:  #e6e6e6;

  --color-text-primary:   #1a1a23;
  --color-text-secondary: #4a4954;
  --color-text-tertiary:  #8a8994;
  --color-text-inverse:   #fafaf8;

  --color-accent:        #b4313e;
  --color-accent-dim:    #9b1b31;
  --color-navy:          #1e2a4a;
  --color-navy-light:    #e8ecf4;
  --color-positive:      #2d6a4f;
  --color-positive-bg:   #edf7f1;
  --color-negative:      #8b2500;
  --color-negative-bg:   #fdf2ed;

  /* Typography */
  --font-display: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', 'Consolas', monospace;

  /* Spacing (6px base — tighter than typical for report density) */
  --s-1:  0.375rem;
  --s-2:  0.75rem;
  --s-3:  1.125rem;
  --s-4:  1.5rem;
  --s-5:  2rem;
  --s-6:  2.5rem;
  --s-8:  3.5rem;
  --s-10: 5rem;
  --s-12: 7rem;

  /* Radii — minimal */
  --r-sm: 2px;
  --r-md: 4px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 150ms;
  --norm: 250ms;
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #0d0d12;
    --color-bg-alt:        #12121a;
    --color-surface:       #181822;
    --color-border:        #2a2a35;
    --color-border-light:  #1e1e28;

    --color-text-primary:   #e8e8ec;
    --color-text-secondary: #a0a0aa;
    --color-text-tertiary:  #686878;
    --color-text-inverse:   #0d0d12;

    --color-accent:        #e84855;
    --color-accent-dim:    #c41e3a;
    --color-navy:          #8a9bc0;
    --color-navy-light:    #1e2a3a;
    --color-positive:      #4dab7a;
    --color-positive-bg:   #0f261a;
    --color-negative:      #e8734a;
    --color-negative-bg:   #2a1510;
  }
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  background: var(--color-bg);
}

::selection {
  background: var(--color-accent);
  color: #fff;
}

/* Accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-3);
  padding: var(--s-1) var(--s-2);
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 200;
  border-radius: var(--r-sm);
}
.skip-link:focus {
  top: var(--s-2);
}

/* --- Container --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 var(--s-4); }
.container--narrow { max-width: 720px; }

/* ============================================================
   MASTHEAD — Understated, authoritative
   ============================================================ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
  transition: box-shadow var(--norm);
}
.masthead--scrolled {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.masthead__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
}
.masthead__brand {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
}
.masthead__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.masthead__name-accent {
  color: var(--color-accent);
  font-weight: 600;
}
.masthead__section {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}
.masthead__nav {
  display: flex;
  gap: var(--s-1);
}
.masthead__link {
  padding: var(--s-1) var(--s-2);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--fast), background var(--fast);
}
.masthead__link:hover,
.masthead__link:focus-visible {
  color: var(--color-accent);
  background: var(--color-navy-light);
}
.masthead__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.masthead__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  position: relative;
}
.masthead__toggle-bar,
.masthead__toggle-bar::before,
.masthead__toggle-bar::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 1px;
  transition: transform var(--norm), opacity var(--fast);
}
.masthead__toggle-bar {
  position: relative;
  margin: 0 auto;
}
.masthead__toggle-bar::before,
.masthead__toggle-bar::after {
  content: '';
  position: absolute;
  left: 0;
}
.masthead__toggle-bar::before { top: -5px; }
.masthead__toggle-bar::after  { top: 5px; }

/* ============================================================
   ARTICLE HEADER
   ============================================================ */
.article {
  padding-bottom: var(--s-12);
}
.article__header {
  padding: var(--s-10) 0 var(--s-6);
  text-align: center;
}
.article__kicker {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--s-4);
}
.article__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin-bottom: var(--s-4);
  text-wrap: balance;
}
.article__dek {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  text-wrap: pretty;
  max-width: 600px;
  margin: 0 auto var(--s-4);
}
.article__meta {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}
.article__meta-sep {
  margin: 0 var(--s-1);
  color: var(--color-border);
}

/* ============================================================
   KEY FIGURES — Data ribbon
   ============================================================ */
.figures {
  padding: 0 var(--s-4) var(--s-6);
}
.figures__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-md);
  overflow: hidden;
}
.figure {
  background: var(--color-surface);
  padding: var(--s-4);
  text-align: center;
}
.figure__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--s-1);
}
.figure__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}
.figure__note {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
}

/* ============================================================
   SECTIONS — Report-style
   ============================================================ */
.section {
  padding: var(--s-10) 0;
}
.section--alt {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}
.section__num {
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-border);
  line-height: 1;
  margin-bottom: var(--s-1);
}
.section__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--s-5);
  letter-spacing: -0.01em;
}
.section__body {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--s-4);
  line-height: 1.75;
}
.section__body--intro {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* --- Comparison Table --- */
.comparison {
  margin: var(--s-5) 0;
}
.comparison__caption {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-2);
}
.comparison__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.comparison__table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-primary);
  padding: var(--s-2) var(--s-3);
  border-bottom: 2px solid var(--color-border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.comparison__table th:last-child {
  color: var(--color-accent);
}
.comparison__table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}
.comparison__table td:last-child {
  font-weight: 500;
  color: var(--color-navy);
}
.comparison__table tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   ECOSYSTEM — Numbered analysis items
   ============================================================ */
.ecosystem {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--color-border-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-md);
  overflow: hidden;
}
.eco-item {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--color-surface);
  transition: background var(--fast);
}
.eco-item:hover { background: var(--color-bg); }
.eco-item__label {
  flex-shrink: 0;
  width: 2rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-border);
  line-height: 1.4;
}
.eco-item__body { flex: 1; }
.eco-item__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--s-1);
}
.eco-item__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--s-1);
}
.eco-item__examples {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

/* ============================================================
   TWO-COLUMN PANELS — Benefits / Risks
   ============================================================ */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.two-col__panel {
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--color-border-light);
}
.two-col__panel--positive {
  background: var(--color-positive-bg);
  border-left: 3px solid var(--color-positive);
}
.two-col__panel--negative {
  background: var(--color-negative-bg);
  border-left: 3px solid var(--color-negative);
}
.panel__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--s-4);
}
.panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.panel__item dt {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.panel__item dd {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   PATHWAY — Numbered steps
   ============================================================ */
.pathway {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.pathway__step {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-md);
  transition: border-color var(--fast);
}
.pathway__step:hover { border-color: var(--color-border); }
.pathway__num {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-navy-light);
  border-radius: var(--r-sm);
}
.pathway__body { flex: 1; }
.pathway__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--s-1);
}
.pathway__body p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* --- Disclaimer --- */
.disclaimer {
  margin-top: var(--s-6);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  line-height: 1.6;
}
.disclaimer strong {
  color: var(--color-text-secondary);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--color-border);
  padding: var(--s-8) 0 0;
  background: var(--color-bg-alt);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--s-8);
  padding-bottom: var(--s-6);
  flex-wrap: wrap;
}
.footer__brand { max-width: 280px; }
.footer__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.footer__name-accent { color: var(--color-accent); }
.footer__tagline {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: var(--s-1);
}
.footer__location {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-top: var(--s-1);
}
.footer__links { display: flex; gap: var(--s-8); }
.footer__col { display: flex; flex-direction: column; gap: var(--s-1); }
.footer__heading {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--s-1);
}
.footer__link {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--fast);
}
.footer__link:hover,
.footer__link:focus-visible { color: var(--color-accent); }
.footer__base {
  border-top: 1px solid var(--color-border-light);
  padding: var(--s-3) 0;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}
.footer__base .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__base a {
  color: var(--color-accent);
  text-decoration: none;
}

/* ============================================================
   SCROLL ANIMATIONS — Subtle fade-in only
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .masthead__nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-1);
    background: var(--color-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--norm);
    z-index: 90;
  }
  .masthead__nav--open {
    opacity: 1;
    pointer-events: auto;
  }
  .masthead__link { font-size: 1.125rem; padding: var(--s-2) var(--s-3); }
  .masthead__toggle { display: block; z-index: 95; }

  .figures__grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .pathway__step { flex-direction: column; gap: var(--s-2); padding: var(--s-3); }
  .footer__inner { flex-direction: column; gap: var(--s-5); }
  .footer__links { gap: var(--s-5); }
  .footer__base .container { flex-direction: column; gap: var(--s-1); text-align: center; }
  .comparison__table { font-size: 0.75rem; }
  .comparison__table th,
  .comparison__table td { padding: var(--s-1) var(--s-2); }
}

@media (max-width: 480px) {
  .figures__grid { grid-template-columns: 1fr; }
  .article__header { padding: var(--s-6) 0 var(--s-4); }
  .article__title { font-size: 1.75rem; }
  .section { padding: var(--s-6) 0; }
  .eco-item { flex-direction: column; gap: var(--s-2); padding: var(--s-4); }
  .section__num { font-size: 2.5rem; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}