/* ============================================================
   CPA · Coletivo Popular Autista
   Identidade visual compartilhada (homepage, identidade, blog).
   Paleta sensorialmente acolhedora: preto suave, papel quente,
   vermelho oxblood, dourado antigo. Sem flashes, sem autoplay.
   ============================================================ */

:root {
  /* paper & ink */
  --paper:        #EFE9DC;
  --paper-warm:   #E8E0CD;
  --paper-deep:   #DDD3BC;
  --ink:          #1A1814;
  --ink-soft:     #3A332A;
  --ink-mute:     #6A5F50;

  /* signal colors, muted versions */
  --oxblood:      #8C2A2A;
  --oxblood-deep: #6B1F1F;
  --gold:         #A88341;
  --gold-soft:    #C9A968;

  /* rhythm */
  --rule: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  --rule-gold: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);

  /* type */
  --display: "Lexend", -apple-system, BlinkMacSystemFont, sans-serif;
  --body:    "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --gutter: clamp(20px, 4vw, 56px);
  --max:    1340px;
}

/* ============================================================
   TEMA ESCURO
   ============================================================ */

[data-theme="dark"] {
  --paper:        #1E1A15;
  --paper-warm:   #241F18;
  --paper-deep:   #141009;
  --ink:          #E6DFD0;
  --ink-soft:     #B5ADA0;
  --ink-mute:     #786E5E;
  --oxblood:      #B03535;
  --oxblood-deep: #8C2A2A;
  --gold:         #C9A968;
  --gold-soft:    #A88341;
}
[data-theme="dark"] body::before {
  mix-blend-mode: screen;
  opacity: 0.08;
}

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

em { font-style: normal; color: var(--oxblood); }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  font-feature-settings: "ss01", "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* paper grain, very low opacity, no animation */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.13  0 0 0 0 0.10  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::selection { background: var(--oxblood); color: var(--paper); }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  transition: border-color 240ms ease, color 240ms ease;
}
a:hover { border-bottom-color: var(--oxblood); color: var(--oxblood); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* ============================================================
   SHELL
   ============================================================ */

.shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 13px;
  z-index: 100;
}
.skip:focus { left: 16px; top: 16px; outline: 2px solid var(--gold); }

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead {
  position: relative;
  z-index: 3;
  padding-top: clamp(24px, 3vw, 40px);
}

.masthead__rule {
  border-top: var(--rule-gold);
  margin: 14px 0;
}
.masthead__rule--thick { border-top: 2px solid var(--ink); margin: 6px 0; }

.masthead__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand__mark {
  height: 45px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
/* anel preto do logo some no fundo escuro: chip claro fixo só no dark */
[data-theme="dark"] .brand__mark {
  background: #EFE9DC;
  border-radius: 11px;
  padding: 4px;
}

.brand__word {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.brand__word small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}

.masthead__nav {
  display: flex;
  justify-self: center;
  gap: clamp(14px, 2.2vw, 32px);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.masthead__nav a {
  border-bottom: 0;
  padding-bottom: 2px;
  position: relative;
}
.masthead__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--oxblood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}
.masthead__nav a:hover::after { transform: scaleX(1); }

.masthead__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-align: right;
  color: var(--ink-soft);
  line-height: 1.5;
}
.masthead__meta b { color: var(--oxblood); font-weight: 500; }

.theme-toggle {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 2px;
  padding: 3px 7px;
  transition: color 220ms ease, border-color 220ms ease;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 38%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}

@media (max-width: 860px) {
  .masthead__row { grid-template-columns: auto auto; grid-template-rows: auto auto; row-gap: 14px; }
  .masthead__nav { grid-column: 1 / -1; justify-self: start; flex-wrap: wrap; }
  .masthead__meta { text-align: right; }
}

/* ============================================================
   EYEBROW (rótulo de seção)
   ============================================================ */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "§";
  color: var(--oxblood);
  font-family: var(--display);
  font-size: 16px;
}
.eyebrow b { color: var(--oxblood); font-weight: 500; }

.section-link { border-bottom: 0; }
.section-link::after {
  content: " #";
  color: var(--oxblood);
  opacity: 0;
  margin-left: 0.4em;
  transition: opacity 200ms ease;
}
.section-link:hover::after,
.section-link:focus-visible::after { opacity: 1; }

/* ============================================================
   FOOTER (brado de fechamento)
   ============================================================ */

footer.cry {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(56px, 7vw, 100px) 0 clamp(28px, 3vw, 48px);
  position: relative;
}
footer.cry::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--oxblood);
}

.cry__shout {
  font-family: var(--display);
  font-weight: 380;
  font-size: clamp(36px, 6.5vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.cry__shout em { color: var(--gold-soft); }
.cry__shout u { text-decoration: underline; text-decoration-color: var(--oxblood); text-decoration-thickness: 4px; text-underline-offset: 8px; }

.cry__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}
.cry__col h4 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
}
.cry__col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cry__col a { color: var(--paper); border-bottom: 0; font-size: 14.5px; }
.cry__col a:hover { color: var(--gold-soft); }
.cry__col p { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--paper) 75%, transparent); }

.cry__base {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}
.cry__base b { color: var(--gold-soft); font-weight: 500; }
.cry__base a { color: var(--paper); border-bottom: 0; }
.cry__base a:hover { color: var(--gold-soft); }

@media (max-width: 760px) {
  .cry__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .cry__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   REVEAL: slow, gentle, single-pass
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: gentleRise 900ms cubic-bezier(.2, .6, .2, 1) forwards;
}
.reveal-1 { animation-delay: 80ms; }
.reveal-2 { animation-delay: 220ms; }
.reveal-3 { animation-delay: 360ms; }
.reveal-4 { animation-delay: 500ms; }
.reveal-5 { animation-delay: 640ms; }

@keyframes gentleRise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* focus rings */
*:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 1px;
}