/* ============================================
   ACTA — DESIGN SYSTEM
   Inspired by Folk.app · Forja Visual Brief
   Warm cream base, editorial typography, premium components
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=DM+Serif+Display:ital@0;1&display=swap');

/* === RESET === */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* === TOKENS === */
:root {
  /* Warm cream backgrounds — never pure white */
  --bg:            #F7F5F0;
  --bg-card:       #FDFCFA;
  --bg-surface:    #F0EDE6;
  --bg-dark:       #1C1917;

  /* Text */
  --text-primary:  #1C1917;
  --text-secondary:#57534E;
  --text-tertiary: #A8A29E;

  /* Borders */
  --border:        #E7E4DC;
  --border-strong: #D4CFC5;

  /* Semantic accents — earthy, muted */
  --sage:          #6B8F71;   /* consensus / yes */
  --sage-bg:       #EEF4EF;
  --terra:         #A05C47;   /* conflict / no */
  --terra-bg:      #F6EDEA;
  --amber:         #B5813A;   /* uncertain / pending */
  --amber-bg:      #F8F0E3;
  --slate:         #5C6B7A;   /* contested */
  --slate-bg:      #EBF0F4;
  --purple:        #6E5FA6;   /* complex */
  --purple-bg:     #EEEBf6;

  /* CTA */
  --cta:           #1C1917;
  --cta-text:      #FDFCFA;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(28,25,23,.06), 0 1px 2px rgba(28,25,23,.04);
  --shadow:    0 4px 12px rgba(28,25,23,.08), 0 1px 4px rgba(28,25,23,.05);
  --shadow-lg: 0 8px 32px rgba(28,25,23,.12), 0 2px 8px rgba(28,25,23,.06);

  /* Fonts */
  --font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
}

/* === BASE === */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* === NAV === */
nav {
  background: rgba(247,245,240,0.92);
  border-bottom: 1px solid var(--border);
  padding: 0 2.5rem;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 640px) { nav { padding: 0 1.25rem; } }
nav .logo {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text-primary);
  text-decoration: none;
}
nav .logo span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* === MAIN LAYOUT === */
main {
  max-width: 76rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  main { padding: 3.5rem 2.5rem 7rem; gap: 2rem; }
}
@media (min-width: 1024px) {
  main { padding: 4rem 4rem 8rem; gap: 2rem; }
}

/* === TAGS & LABELS === */
.tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-block;
  margin-bottom: .75rem;
}

/* === HEADINGS === */
h1 {
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--text-primary);
  margin-bottom: 1.75rem;
}
h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* === VERDICT BAR === */
.verdict-wrap { margin-bottom: 1.25rem; }
.verdict-bar-track { position: relative; padding-top: 1.5rem; }
.verdict-arrow {
  position: absolute; top: 0;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid var(--text-primary);
  transition: left 700ms cubic-bezier(.34,1.56,.64,1);
}
.verdict-bar {
  height: 28px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(28,25,23,.1);
  overflow: hidden;
  position: relative;
  background: linear-gradient(to right, var(--terra) 0%, var(--amber) 50%, var(--sage) 100%);
}
.vd-divs { position: absolute; inset: 0; display: flex; pointer-events: none; }
.vd-divs span { flex: 1; border-right: 1px solid rgba(255,255,255,.2); }
.vd-divs span:last-child { border-right: none; }
.vd-labels {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.1rem; z-index: 10; pointer-events: none;
}
.vd-labels span {
  font-size: .6rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9);
}

/* === META / PUB ICONS === */
.meta { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; }
.meta p { font-size: .9rem; color: var(--text-secondary); line-height: 1.55; }
.pub-icons { display: flex; align-items: center; flex-wrap: wrap; margin-top: .35rem; }
.pub-icons img {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 2.5px solid var(--bg);
  background: var(--bg-card);
  object-fit: cover;
  margin-left: -.5rem;
  box-shadow: var(--shadow-sm);
}
.pub-icons img:first-child { margin-left: 0; }

/* === CARD === */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) { .card { padding: 2rem 2.25rem; } }
@media (min-width: 1024px) { .card { padding: 2.25rem 2.5rem; } }
.card-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}
@media (min-width: 640px) { .card-title { font-size: 1.1rem; } }

/* === BADGES === */
.vbadge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: var(--radius-sm);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}
.vbadge.yes,  .vbadge.g    { background: var(--sage-bg);   color: var(--sage); }
.vbadge.no,   .vbadge.n    { background: var(--terra-bg);  color: var(--terra); }
.vbadge.mixed,.vbadge.a    { background: var(--amber-bg);  color: var(--amber); }
.vbadge.split,.vbadge.p    { background: var(--slate-bg);  color: var(--slate); }
.vbadge.complex            { background: var(--purple-bg); color: var(--purple); }
.vbadge.both               { background: var(--amber-bg);  color: var(--amber); }
.vbadge.instr              { background: var(--purple-bg); color: var(--purple); }
.vbadge.critical           { background: var(--slate-bg);  color: var(--slate); }
.vbadge.neutral            { background: var(--bg-surface); color: var(--text-secondary); }
.vbadge.r { background: var(--terra-bg); color: var(--terra); }

/* === PUBLICATION TABLE === */
.persp-grid { display: flex; flex-direction: column; gap: 0; }
.persp-row {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.persp-row:last-child { border-bottom: none; }
.persp-row-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: .5rem;
  margin-bottom: .4rem;
}
.persp-pub { font-weight: 700; font-size: .875rem; line-height: 1.25; }
.persp-type { font-size: .68rem; color: var(--text-tertiary); margin-top: .1rem; }
.persp-sum { font-size: .9rem; color: var(--text-secondary); line-height: 1.65; }
@media (min-width: 680px) {
  .persp-row { display: flex; flex-direction: row; gap: 1.25rem; align-items: start; }
  .persp-row-header { display: flex; flex-direction: column; align-items: flex-start; width: 160px; min-width: 160px; flex-shrink: 0; gap: .2rem; margin-bottom: 0; }
  .persp-sum { flex: 1; }
}

/* === STAT GRID === */
.stat-row { display: grid; grid-template-columns: repeat(2,1fr); gap: .875rem; }
@media (min-width: 600px) { .stat-row { grid-template-columns: repeat(3,1fr); gap: 1rem; } }
.stat-box {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  border: 1px solid var(--border);
}
.stat-n {
  font-size: 1.75rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1; margin-bottom: .3rem;
}
.stat-n.r { color: var(--terra); }
.stat-n.g { color: var(--sage); }
.stat-n.a { color: var(--amber); }
.stat-n.p { color: var(--purple); }
.stat-n.t { color: var(--slate); }
.stat-l { font-size: .82rem; color: var(--text-secondary); line-height: 1.45; }
.stat-s { font-size: .7rem; color: var(--slate); margin-top: .3rem; font-weight: 600; }

/* === TWO COLUMNS === */
.two-col { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 600px) { .two-col { display: grid; grid-template-columns: 1fr 1fr; } }

/* === SIDE CARDS === */
.side-card {
  border-radius: var(--radius);
  padding: 1.25rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.side-card.yes { border-top: 3px solid var(--terra); }
.side-card.no  { border-top: 3px solid var(--sage); }
.side-card.agree  { border-top: 3px solid var(--sage); }
.side-card.diverge{ border-top: 3px solid var(--terra); }
.side-card.risk   { border-top: 3px solid var(--terra); }
.side-card.safe   { border-top: 3px solid var(--sage); }
.side-title {
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem;
}

/* === EXPANDABLE LIST === */
.expandable-list { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.expandable-list li {
  display: flex; gap: .5rem;
  font-size: .95rem; color: var(--text-secondary); line-height: 1.7;
}
.expandable-list li.hidden { display: none; }

/* === SHOW MORE BUTTON === */
.show-more-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  margin-top: .875rem; padding: .5rem .875rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: .78rem; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.show-more-btn:hover { background: var(--border); }
.show-more-btn svg { width: 13px; height: 13px; transition: transform .2s; flex-shrink: 0; }
.show-more-btn.open svg { transform: rotate(180deg); }

/* === TIMELINE === */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: .875rem; padding-bottom: 1.25rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-left { display: flex; flex-direction: column; align-items: center; width: 5rem; flex-shrink: 0; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: .3rem; }
.tl-dot.ally  { background: var(--sage); }
.tl-dot.crack { background: var(--amber); }
.tl-dot.break { background: var(--terra); }
.tl-line { width: 2px; flex: 1; background: var(--border); margin-top: 4px; }
.tl-date { font-size: .68rem; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; text-align: center; margin-top: .15rem; }
.tl-content h4 { font-size: .875rem; font-weight: 700; color: var(--text-primary); margin-bottom: .2rem; }
.tl-content p { font-size: .875rem; color: var(--text-secondary); line-height: 1.6; }

/* === BULLETS === */
.bullets { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.bullets li { display: flex; gap: .5rem; font-size: .9rem; color: var(--text-secondary); line-height: 1.65; }
.dot { color: var(--slate); flex-shrink: 0; margin-top: .15rem; }

/* === QUOTES === */
.quote-block { border-left: 3px solid var(--border-strong); padding-left: 1.1rem; margin-bottom: 1.2rem; }
.quote-block:last-child { margin-bottom: 0; }
.quote-text { font-size: .95rem; color: var(--text-primary); line-height: 1.75; font-style: italic; margin-bottom: .3rem; }
.quote-source { font-size: .78rem; font-weight: 600; color: var(--text-tertiary); }

/* === LINKS === */
a.src {
  color: var(--slate);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted var(--slate);
}
a.src:hover { border-bottom-style: solid; }

/* === FOOTER === */
footer {
  border-top: 1px solid var(--border);
  padding: 1.75rem 1.5rem;
  text-align: center;
  font-size: .78rem;
  color: var(--text-tertiary);
  margin-top: 1rem;
  background: var(--bg-card);
}
footer a { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
footer a:hover { color: var(--text-primary); }