/* ============================================================
   Ty i Ja look, "rust" palette for the Germany monitor.
   Four inks only, everything else screened tints on paper:
     paper #F1E8D0  ink #131010  rust #9C3B26  mustard #E8C33B
   Flat throughout: no gradients, no blurred shadows. Offsets
   are solid ink. Square corners. This :root is the single
   source of truth; app.js reads tokens via getComputedStyle.
   ============================================================ */
:root {
  --bg: #f1e8d0;       /* paper */
  --ink: #131010;      /* pure black */
  --lead: #9c3b26;     /* rust ink, the lead */
  --micro: #e8c33b;    /* mustard, under 5 percent of the page */

  /* screened tints */
  --muted: #6e6250;
  --line: #ddd0b1;
  --band: #e6dabc;
  --soft-ink: #a5987f;
  --lead-screen: #c98d7c;  /* screened rust for secondary series */
  --panel-bg: #ede2c6;

  /* chart series (app.js reads these) */
  --series-de: #131010;      /* Germany is always the heavy black line */
  --series-peer: #a5987f;    /* peers are quiet screened ink */
  --series-eu: #9c3b26;      /* EU-27 in rust */
  --series-hi: #c98d7c;      /* secondary highlight */

  --serif: "Lora", Georgia, serif;
  --display: "Shrikhand", "Cooper Black", serif;
  --caps: "Anton", "Arial Narrow", sans-serif;
}

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

body {
  font-family: var(--serif);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  position: relative;
}

/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- masthead ---------- */
.masthead {
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 20px 8px;
  position: relative;
}
.mast-tab {
  display: inline-block;
  border: 2px solid var(--ink);
  padding: 3px 12px;
  font-family: var(--caps);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  background: var(--micro);
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 18px;
}
.mast-title {
  font-family: var(--caps);
  font-size: clamp(44px, 9vw, 92px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.mast-title em {
  font-style: normal;
  color: var(--lead);
}
.mast-sub {
  max-width: 620px;
  margin-top: 16px;
  font-size: 17px;
}

/* ---------- contents menu, fixed left like a docs sidebar ---------- */
html { scroll-behavior: smooth; }

.toc {
  position: fixed;
  top: 56px;
  bottom: 24px;
  left: max(16px, calc(50% - 430px - 250px));
  width: 224px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid var(--ink);
  background: var(--bg);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 14px 14px 18px;
  z-index: 10;
}
.toc-head {
  font-family: var(--caps);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.toc-topic {
  display: block;
  font-family: var(--caps);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lead);
  text-decoration: none;
  margin: 12px 0 4px;
}
.toc-topic:first-of-type { margin-top: 2px; }
.toc ul { list-style: none; }
.toc li a {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--line);
}
.toc li a:hover { color: var(--ink); border-left-color: var(--soft-ink); }
.toc li a.active {
  color: var(--ink);
  border-left-color: var(--lead);
  background: var(--band);
}

/* the menu lives in the left margin; hide it when the margin is gone */
@media (max-width: 1360px) {
  .toc { display: none; }
}

/* ---------- panels ---------- */
main {
  max-width: 860px;
  margin: 0 auto;
  padding: 30px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.panel {
  border: 2px solid var(--ink);
  background: var(--bg);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 26px 26px 20px;
  position: relative;
  scroll-margin-top: 34px; /* room for the overflowing stamp when jumped to */
}
.panel.counter { background: var(--panel-bg); }

.stamp {
  position: absolute;
  top: -14px;
  right: 18px;
  font-family: var(--caps);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  padding: 4px 10px 2px;
  background: var(--bg);
  transform: rotate(2deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.stamp.worsening { background: var(--lead); color: var(--bg); }
.stamp.improving { background: var(--ink);  color: var(--bg); }
.stamp.flat      { background: var(--micro); }
.stamp.mixed     { background: var(--bg); }

.panel h2 {
  font-family: var(--caps);
  font-size: clamp(24px, 4.4vw, 36px);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 2px 0 2px;
}
.panel .sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 14px;
}

.chart-wrap { margin: 6px 0 4px; }
.chart-wrap svg { display: block; width: 100%; height: auto; }

.takeaway {
  font-size: 15.5px;
  max-width: 640px;
  margin-top: 10px;
}
.takeaway strong { color: var(--lead); }

.src {
  margin-top: 12px;
  font-family: var(--caps);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft-ink);
}

/* ---------- flip card: the causes on the back ---------- */
.card3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.card3d.flipped { transform: rotateY(180deg); }
.face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face.front { position: relative; }
.face.back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: var(--band);
  border: 2px solid var(--ink);
  padding: 16px 18px 52px;
  overflow-y: auto;
}
.face.back .sub { margin-bottom: 10px; }

.flip-btn {
  font-family: var(--caps);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border: 2px solid var(--ink);
  background: var(--micro);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 5px 10px 3px;
  cursor: pointer;
}
.flip-btn:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }
.face.front .flip-btn { display: block; margin: 14px 0 0 auto; }
.face.back .flip-btn { position: absolute; right: 14px; bottom: 14px; }

.cause-grade {
  display: inline-block;
  font-family: var(--caps);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  padding: 3px 9px 1px;
  transform: rotate(-1deg);
  box-shadow: 2px 2px 0 var(--ink);
  margin-bottom: 12px;
}
.cause-grade.documented { background: var(--ink); color: var(--bg); }
.cause-grade.partial { background: var(--micro); }

.cause-text {
  font-size: 15px;
  max-width: 640px;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .card3d { transition: none; }
}

/* chartless fact stamps */
.factrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.fact {
  border: 2px solid var(--ink);
  background: var(--bg);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 18px 18px 14px;
  position: relative;
}
.fact .big {
  font-family: var(--caps);
  font-size: 34px;
  line-height: 1;
  color: var(--lead);
}
.fact p { font-size: 13.5px; margin-top: 6px; }
.fact .src { margin-top: 8px; }

/* svg text */
text {
  font-family: var(--caps);
  fill: var(--ink);
}
.tick { font-size: 10px; fill: var(--muted); letter-spacing: 0.05em; }
.endlabel { font-size: 11px; letter-spacing: 0.06em; }
.axis { stroke: var(--ink); stroke-width: 2; }
.grid { stroke: var(--line); stroke-width: 1; }
.grid.ref { stroke: var(--soft-ink); stroke-dasharray: 5 4; } /* index base line, e.g. 2015 = 100 */

/* ---------- footer ---------- */
.colophon {
  max-width: 860px;
  margin: 40px auto 0;
  padding: 22px 20px 46px;
  border-top: 2px solid var(--ink);
  font-size: 12.5px;
  color: var(--muted);
}
.colo-mark {
  margin-top: 10px;
  font-family: var(--caps);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft-ink);
}

@media (max-width: 560px) {
  .panel { padding: 18px 14px 14px; }
  .stamp { right: 8px; }
}