/* Heralds Band — tokens de design
   Cores tiradas do logo oficial: o dourado do SVG e os azuis da arte de fundo. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fontes/big-shoulders-display-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fontes/big-shoulders-display-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fontes/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fontes/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* cores */
  --abismo: #04040c;
  --noite: #07051a;
  --marinho: #141355;
  --royal: #1f1e87;
  --royal-vivo: #2b2ab0;

  --dourado-fundo: #b8862f;
  --dourado: #d4a954;
  --dourado-claro: #eac984;
  --creme: #f8ebc0;

  --branco: #f2f1ee;
  --texto: #c2c4d2;
  --texto-fraco: #8f92a6;

  /* tipografia */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --corpo: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* medidas */
  --secao-y: clamp(3.2rem, 6.5vw, 5.6rem);
  --borda-x: clamp(1.25rem, 5vw, 4rem);
  --largura: 1240px;
  --leitura: 62ch;
  --transicao: 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--abismo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  color: var(--branco);
}

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--dourado-claro);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
}

/* etiqueta em mono: usada como sobretítulo em todas as seções */
.etiqueta {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dourado);
}

/* pentagrama: cinco linhas douradas, a assinatura visual do site */
.pentagrama {
  height: 9px;
  border: 0;
  margin: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--dourado) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}