/* Hallmark · shape: Catalogue · genre: editorial · theme: custom (review board) · redesign: none
 * paper: oklch(97% 0.006 95) · accent: oklch(32% 0.03 160) · display: Archivo · body: Archivo · hero: Banner · nav: none · footer: colophon · signature: the four heroes at full width
 * axes: light/grotesk-sans/neutral · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: an internal board, the screenshots carry it · weakest: no motion, on purpose */
:root {
  --color-paper: oklch(97% 0.006 95);
  --color-paper-2: oklch(93% 0.008 95);
  --color-ink: oklch(22% 0.015 160);
  --color-muted: oklch(45% 0.012 160);
  --color-rule: oklch(86% 0.01 95);
  --color-accent: oklch(32% 0.03 160);
  --color-focus: oklch(55% 0.16 45);
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 1.0625rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.topo, .lista, .rodape {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.topo { padding-block: var(--space-2xl) var(--space-xl); }
.marca { margin: 0 0 var(--space-xl); font-weight: 800; font-stretch: 112%; font-size: 1.25rem; }
.topo h1 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem);
  line-height: 1;
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  min-width: 0;
}
.intro { max-width: 58ch; margin: var(--space-lg) 0 0; color: var(--color-muted); text-wrap: pretty; }

.lista { display: grid; gap: var(--space-3xl); padding-block: var(--space-xl) var(--space-3xl); }
.direcao {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-xl);
  align-items: end;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
}
.direcao:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.direcao:nth-child(even) .capa { order: 2; }
.capa { display: block; border-radius: 6px; overflow: hidden; background: var(--color-paper-2); outline-offset: 4px; }
.capa img { transition: transform var(--dur, 420ms) cubic-bezier(0.16, 1, 0.3, 1); }
.capa:hover img { transform: scale(1.015); }
.texto h2 { margin: 0; font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem); line-height: 1.05; font-weight: 800; font-stretch: 112%; }
.texto p { margin: var(--space-md) 0 0; color: var(--color-muted); max-width: 40ch; text-wrap: pretty; }
.links { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.links a { display: inline-block; padding-block: var(--space-sm); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.links li:first-child a { font-weight: 700; color: var(--color-accent); }
.links a:hover { text-decoration-thickness: 2px; }
.links a:active, .capa:active img { opacity: 0.7; }

.rodape { padding-block: var(--space-xl) var(--space-2xl); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 0.9375rem; }
.rodape code { font-size: 0.875em; }

@media (max-width: 60rem) {
  .direcao, .direcao:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .direcao:nth-child(even) .capa { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .capa img { transition: none; }
  .capa:hover img { transform: none; }
}