/* Poster (B): campaign pages. Forest green, contour lines, red brush, huge condensed type,
   ruled newspaper data boxes. */

.poster {
  background-color: var(--bg);
  color: var(--fg);
}

/* faint topographic contour lines (tileable; generated by tools/generate-topo.py) */
.topo {
  background-image: url("/img/topo-guarda.svg");
  background-size: 1200px 1200px;
  background-repeat: repeat;
  background-position: 62% 18%;
}
@media (max-width: 47.99rem) {
  .topo { background-size: 820px 820px; }
}

/* ------------------------------------------------------------------ hero */
.poster-hero {
  position: relative;
  padding-block: var(--s-7) var(--s-8);
  border-bottom: var(--rule) solid var(--rule-color);
}
@media (min-width: 62rem) {
  .poster-hero { padding-block: var(--s-8) var(--s-9); }
}
.poster-hero__inner {
  display: grid;
  gap: var(--s-5);
  align-content: start;
}
.poster-hero__title {
  margin: 0;
  max-width: 15ch;
  font-size: var(--display-1);
  line-height: 0.86;
  letter-spacing: -0.012em;
}
.poster-hero__lede {
  max-width: 34rem;
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.45;
}
.poster-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-2) 0 0;
}
/* giant outlined numeral (error pages) — drawn like a contour */
.poster-hero__code {
  margin: 0 0 calc(var(--s-4) * -1);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--display-stretch);
  font-size: clamp(7rem, 4rem + 22vw, 20rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
}

/* ------------------------------------------------------------------ brush-stroke highlight
   <span class="brush">fábrica</span> — the red stroke from the movement's banner */
.brush {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-block;
  padding: 0 0.1em;
  margin: 0 0.02em;
  color: var(--white);
}
.brush::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.05em -0.14em 0 -0.18em;
  background: var(--red-600);
  transform: skewX(-6deg) rotate(-1.3deg);
  /* ragged bristle ends left and right, a slightly wavering top and bottom edge */
  clip-path: polygon(
    2% 10%, 12% 6%, 27% 8%, 41% 3%, 58% 6%, 74% 1%, 88% 4%, 97.5% 0%,
    99% 12%, 96.5% 19%, 100% 27%, 98.5% 36%, 97% 41%, 99.5% 52%, 97.8% 63%, 100% 72%, 96.8% 81%, 98.6% 92%,
    86% 97%, 70% 94%, 52% 100%, 33% 96%, 17% 99%, 3% 95%,
    0.5% 86%, 2.8% 77%, 0% 66%, 1.6% 55%, 3.2% 47%, 0.6% 37%, 2.4% 26%, 0% 17%
  );
}
.brush--lime { color: var(--green-900); }
.brush--lime::before { background: var(--lime-400); }

.lime { color: var(--lime-400); }

/* ------------------------------------------------------------------ ruled data box
   <div class="datagrid"><div class="datagrid__cell"><p class="datagrid__n">50.000 m²</p><p class="datagrid__l">…</p></div>…</div> */
.datagrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 46%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-heavy) solid var(--fg);
  overflow: hidden;
}
.datagrid__cell {
  margin-left: -1px;                 /* hides the first column's left rule */
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 1px);
  border-left: var(--rule) solid var(--rule-color);
  border-bottom: var(--rule) solid var(--rule-color);
  background: var(--bg);
  min-width: 0;
}
.datagrid__n {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--display-stretch);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.75rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: none;           /* values keep their typed case: "50.000 m²", "REN" */
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.datagrid__n--alarm { color: var(--alarm); }
.datagrid__n small { font-size: 0.5em; letter-spacing: 0; }
.datagrid__l {
  margin: 0;
  max-width: 22rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-muted);
}

/* ------------------------------------------------------------------ petition counter
   <div class="counter"><p class="counter__n"><span data-countup="412">412</span> <span class="counter__unit">assinaturas</span></p>
     <progress class="counter__bar" max="1000" value="412">412 / 1000</progress><p class="counter__goal">…</p></div> */
.counter {
  display: grid;
  gap: var(--s-2);
  max-width: 36rem;
  padding-top: var(--s-3);
  border-top: var(--rule-heavy) solid var(--fg);
}
.counter__n {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--display-stretch);
  font-size: var(--display-3);
  line-height: 0.9;
  font-variant-numeric: tabular-nums lining-nums;
}
.counter__unit {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 400;
  font-stretch: normal;
  color: var(--fg-muted);
}
.counter__bar {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.9rem;
  border: 1.5px solid var(--fg);
  border-radius: 0;
  background: transparent;
  color: var(--red-600);
}
.counter__bar::-webkit-progress-bar { background: transparent; }
.counter__bar::-webkit-progress-value { background: var(--red-600); }
.counter__bar::-moz-progress-bar { background: var(--red-600); }
.counter__goal {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

/* survey-map coordinate annotation */
.coords {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.coords .icon { width: 1.1rem; height: 1.1rem; color: var(--accent); }

/* a full-width poster band (sections below the hero) */
.band {
  padding-block: var(--s-7);
  border-bottom: var(--rule) solid var(--rule-color);
}
.band--paper {
  --bg: var(--paper-50);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-600);
  --rule-color: var(--paper-300);
  --accent: var(--red-700);
  --alarm: var(--red-700);
  --cite: var(--red-700);
  --flag: var(--ochre-700);
  --focus: var(--ink-900);
  --btn-bg: var(--ink-900);
  --btn-fg: var(--paper-50);
  --btn-shadow: var(--red-600);
  background: var(--bg);
  color: var(--fg);
}