Anatomia — EDDINGTON · Guia didático

Prancha 01

Direção

A quarta evolução do Horizonte de Eventos abandona a tela e finge papel. A referência é o evento científico que fundou a metáfora da casa: o eclipse de 1919, quando as expedições de Sobral e Príncipe provaram que a massa curva a luz. Se a Ezon Partners fala de atração, este estudo é a fonte primária — o arquivo onde a doutrina está impressa.

A demonstração aqui é de contenção: nada de WebGL, nada de vídeo. O luxo vem do ritmo de impressão — margens generosas, colunas assimétricas (2fr/1fr), capitulares, notas de rodapé e fólios. O único movimento permitido é o que uma página impressa toleraria: revelações discretas e uma parallax lenta na gravura central.

Variância: 7
Movimento: 3
Densidade: 5

Prancha 02

Paleta de impressão

Cinco tintas, três papéis de função. O oxblood aparece no máximo duas ou três vezes por tela; o ouro nunca vira texto — só filete. Nenhum branco nem preto absolutos.

Osso#F1EAE0papel da página
Prancha#E7DECFfundos de figura e faixas
Espresso#221D18tinta de texto
Oxblood#6E1F26ênfase única — títulos §, capitulares, notas
Ouro batido#B98A2Ffiletes e ornamentos, jamais texto

Contraste corpo/papel: espresso sobre osso ≈ 13,9:1 · oxblood sobre osso ≈ 8,3:1 — ambos acima do mínimo AA de 4,5:1. Sombras tingidas de sépia (rgba(62,44,27,…)), nunca cinza neutro.

Prancha 03

Tipografia

Par puramente de imprensa: uma didone de display com eixo óptico variável e uma serifa de texto desenhada para corpo pequeno. Nenhuma sans na página.

Bodoni Moda · display · opsz variável · 400–900 + itálico

A Curvatura da Luz

Newsreader · texto · 200–800 + itálico

Seis minutos de escuridão no sertão do Ceará foram suficientes para reorganizar a física — e, um século depois, a identidade de uma casa que estuda atração. Corpo 18/1,66, medida de 62 caracteres.

Versaletes compostos · caixa-alta + tracking .16em

Edição Nº 1 · A Curvatura da Luz · MMXXVI

Prancha 04

Pranchas geradas

Três imagens de arquivo sintéticas — geradas por IA em estilo colótipo/gravura, tratadas para assentar no papel: mix-blend-mode: multiply funde a chapa ao fundo, e uma retícula de meio-tom em ::after imita a impressão de época.

Prancha da coroa solar — Est. I — coroa do eclipse

Gravura da deflexão da luz — Fig. 1 — gravura central (parallax)

Prancha do telescópio — Est. II — o astrográfico

Pipeline: GPT Image 2 (direção de arte por prompt, estilo colótipo sépia) → cwebp -q 82 → moldura em papel-prancha com sombra tingida. Nenhuma fotografia real foi usada.

Prancha 05

Técnicas de composição

Capitular de imprensa

Sem imagens, sem spans extras: o ::first-letter do primeiro parágrafo vira a capitular em Bodoni, flutuada como numa oficina tipográfica.

.dropcap::first-letter {
  font-family: 'Bodoni Moda';
  font-size: 4.35em;
  line-height: .76;
  float: left;
  padding: .06em .09em 0 0;
  color: var(--oxblood);
}

Retícula de meio-tom

Um radial-gradient de 3px repetido sobre a prancha, em mix-blend-mode: overlay, devolve às imagens o granulado de colótipo.

.plate-frame::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(
    rgba(34,29,24,.16) 1px, transparent 1.1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

Notas de rodapé verdadeiras

Chamadas <sup> com âncoras de ida e volta e numeração por counter() — navegáveis por teclado, como notas de papel jamais foram.

.footnotes li { counter-increment: fn; }
.footnotes li::before {
  content: counter(fn) ".";
  color: var(--oxblood);
}

Uma única parallax

Só a gravura central se move — 26px de curso, calculados por requestAnimationFrame apenas enquanto a figura está visível (IntersectionObserver liga e desliga o listener de scroll). Com prefers-reduced-motion, o movimento não existe.

var progress = 1 - 2 * ((rect.top + rect.height/2)
                / (vh + rect.height));
img.style.setProperty('--plx',
  (progress * 26).toFixed(1) + 'px');

Grade de revista

Spreads em grid-template-columns: 2fr 1fr com fólios e filetes; abaixo de 880px tudo colapsa para coluna única — a assimetria é privilégio de tela larga.

.spread { display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 879px) {
  .spread { grid-template-columns: 1fr; } }