/* Escala de tipo fluida — gerei no utopia.fyi e colei aqui.
   @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);
}

/* Mesma coisa, mas pra espaço. Não inventei esses clamps na mão.
   @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-3xl&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vi, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vi, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vi, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);

  /* pares vizinhos (s→m, m→l etc) */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vi, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vi, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vi, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vi, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vi, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vi, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);

  /* o padding do body usa esse: estreito no celular, folgado no desktop */
  --space-s-3xl: clamp(1.125rem, -1.0924rem + 11.087vi, 7.5rem);
}

:root {
  /* sobrou do original; o fundo de verdade é o creme no body */
  --background: #333;
  --foreground: #000;
}

/* Bruphy no corpo, Boxout no título, Berkeley só nos links dos selos.
   Fraunces é o plano B se o woff2 não carregar. */
@font-face {
  font-family: "Bruphy Text";
  font-weight: normal;
  font-style: normal;
  src: url("type/BruphyText-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Bruphy Text";
  font-weight: bold;
  font-style: normal;
  src: url("type/BruphyText-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Bruphy Text";
  font-weight: 600;
  font-style: normal;
  src: url("type/BruphyText-Black.woff2") format("woff2");
}

@font-face {
  font-family: "Boxout";
  font-weight: 900;
  font-style: normal;
  src: url("type/Boxout02-Wide-Black.woff2") format("woff2");
}

@font-face {
  font-family: "Berkeley Mono";
  font-weight: 300;
  font-style: normal;
  src: url("type/BerkeleyMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("type/Fraunces.woff2") format("woff2");
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  /* evita o pulo de layout quando a barra de rolagem aparece */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-family: "Bruphy Text", "Fraunces", Georgia, serif;
  font-size: var(--step-2);
  line-height: 1.5;
  background-color: var(--background);
  color: #212529;
  max-width: 100rem;
  margin: auto;
  padding: var(--space-s-3xl);
  background: #ffe8cc; /* creme — mesma cor dos selos */
}

img {
  max-width: 100%;
}

p img {
  max-width: 100%;
}

h1 {
  color: #d6336c; /* o rosa do pacto */
  font-family: "Boxout", sans-serif;
  font-weight: 900;
  margin: 0 0 1rem 0;
  line-height: 1.15;
  text-transform: uppercase;
}

h1 small {
  font-size: 60%;
  color: #888;
  margin-left: .5em;
}

h2, h3, h4, h5, h6 {
  color: #d6336c;
  font-family: "Bruphy Text", sans-serif;
  font-weight: 600;
  margin: 3rem 0 0 0;
  line-height: 1.15;
}

p {
  margin: 1rem 0;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-1); }

h1 img {
  width: 1.5em;
  vertical-align: middle;
}

ul {
  margin: 0;
  padding: 0;
}

.smaller {
  font-size: 80%;
}

#info {
  margin-top: 2.5em;
}

summary {
  margin-top: 1em;
}

/* o h2 do pacto não deve gritar — é só o começo do texto */
#pledge h2 {
  margin: 2rem 0 0 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
}

#pledge p {
  margin: 2rem 0;
}

#badges {
  background: #ffd8a8; /* um pouco mais quente que o fundo da página */
  border-radius: var(--step-0);
  padding: var(--space-m);
  /* vaza um pouco pra fora pra o bloco respirar */
  margin: var(--space-m) calc((var(--space-m) / 2) * -1);
}

#badges p:first-child {
  margin: .5em 0 2em 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-xl);
}

.box {
  flex-grow: 0;
}

.break {
  /* força quebra de linha no flex (selo / empilhado / festa / botão) */
  flex-basis: 100%;
  height: 0;
}

summary {
  margin-bottom: 1em;
  font-weight: bold;
}

summary:hover {
  cursor: pointer;
}

#badges .flex {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 1;
  gap: var(--space-l);
}

#badges .box {
  flex-basis: 130px;
  flex-grow: 0;
  line-height: 1.1;
}

#badges .box {
  margin: 1rem 0 0 0;
  font-family: "Berkeley Mono", monospace;
  font-size: 70%;
}

#badges .box ul {
  margin: .5rem 0 .5rem 2.5rem;
}

#badges .box img {
  width: 130px;
}

a:link, a:visited, a:hover, a:active {
  color: #000;
}

/* aviso amarelo, caso precise um dia — hoje a página não usa */
.notice {
  background: #000;
  color: #ffd43b;
  font-weight: bold;
  padding: .6rem 1.3rem;
  border-radius: var(--step-0);
  margin-top: -2rem;
  margin-bottom: 3rem;
  display: inline-block;
}

#footer {
  margin-top: 3em;
}