/* ============================================================
   DUENHAS — BASE & COMPONENTES DO SISTEMA
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on;
}

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

a { color: inherit; text-decoration: none; }

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

/* ---------- CONTAINER & GRADE ---------- */

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gutter);
}

/* ---------- TIPOGRAFIA ---------- */

.t-hero {
  font-size: var(--text-hero);
  font-weight: 560;
  font-stretch: 115%;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.t-display {
  font-size: var(--text-2xl);
  font-weight: 540;
  font-stretch: 110%;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.t-title {
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.t-heading {
  font-size: var(--text-lg);
  font-weight: 480;
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
}

.t-lead {
  font-size: var(--text-md);
  font-weight: 420;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.t-body { font-size: var(--text-base); line-height: var(--leading-base); }

.t-small {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--color-ink-soft);
}

/* Acento editorial — itálico serifado dentro de títulos grotescos */
.t-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Label mono — o “EXPEDIENTE” da FAUUSP */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.label--ink { color: var(--color-ink); }
.label--accent { color: var(--color-accent); }

/* ---------- FILETES ---------- */

.rule         { border: 0; border-top: var(--rule-solid); }
.rule--strong { border-top: var(--rule-strong); }
.rule--dashed { border-top: var(--rule-dashed); }

/* ---------- COMPONENTES ---------- */

/* Breadcrumb — ENSINO / PÓS-GRADUAÇÃO / ... */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--color-ink); }

/* Link com sublinhado animado */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.link:hover::after {
  transform: scaleX(0);
  transform-origin: right;
}

/* Botão editorial */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out);
}
.btn:hover { background: var(--color-ink); color: var(--color-paper); }

.btn--solid { background: var(--color-ink); color: var(--color-paper); }
.btn--solid:hover { background: var(--color-accent); color: var(--color-ink); }

/* Lista de definição — “Expediente / Contato” da sidebar FAUUSP */
.meta-list { list-style: none; }
.meta-list li {
  padding-block: var(--space-3);
  border-bottom: var(--rule-dashed);
}
.meta-list li:first-child { border-top: var(--rule-dashed); }
.meta-list .meta-key {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-mute);
  margin-bottom: var(--space-1);
}
.meta-list .meta-value { font-size: var(--text-sm); color: var(--color-ink); }

/* Tabela editorial */
.index-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: baseline;
  gap: var(--grid-gutter);
  padding-block: var(--space-4);
  border-bottom: var(--rule-solid);
}
.index-row .index-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-mute);
}

/* ---------- UTILITÁRIOS ---------- */

.upper { text-transform: uppercase; }
.muted { color: var(--color-ink-mute); }
.soft  { color: var(--color-ink-soft); }

.inverse {
  background: var(--color-inverse);
  color: var(--color-inverse-fg);
}
.inverse ::selection { background: var(--color-paper); color: var(--color-ink); }

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