/*
 * Fontinha — Pizzeria, a história.
 *
 * Figma: banda 784..1362 em desktop (578) e 376..735 em telemóvel (359).
 *
 * ============================================================
 * AS FONTES SÃO AS DO DESENHO
 * ============================================================
 *
 * Lido nos nós, não inferido: a abertura e o wordmark são **Brevis Regular** e
 * todo o corpo é **Poppins**. As duas estão instaladas em assets/fonts/ e são
 * desta página — o resto do site continua em Baro e Gill Sans.
 *
 *   abertura, wordmark   Brevis 400
 *   história             Poppins 300
 *   "Each slice…"        Poppins 400
 *   "Did you know…"      Poppins 600 em desktop, 700 em telemóvel
 *   fecho                o mesmo
 *
 * ============================================================
 * O RITMO VERTICAL É UM FLUXO SÓ
 * ============================================================
 *
 * Em desktop os blocos não têm margens escolhidas: o passo entre linhas é
 * 22.12 e as distâncias entre blocos são 44.24 — duas linhas, ou seja **uma
 * linha em branco**. Daí `line-height: 1.2` (22.12 / 18.431) e margens de um
 * passo inteiro.
 *
 * Mobile first, com o desktop aos 1200.
 */

.pizzeria-historia.section {
	background: var(--s-bg-sand);
	color: var(--s-text-terracota);
	text-align: center;

	/* A banda tem 359 e o bloco de texto acaba em 710 de 735: 25 no fim. O topo
	   é a tinta do wordmark, em 396 de 376 — 20. */
	padding-block: 23px 25px;
}

/* ============================================================
   O wordmark
   ============================================================ */

/*
 * Letra viva, e **trocável por SVG** quando os 39 nós forem agrupados no Figma.
 * Ver o comentário do pizzeria-historia.php: o que falta enquanto for texto é o
 * medalhão que faz de O em "FONTINHA" e as formas da Brevis.
 *
 * **Com a Brevis instalada, o corpo passa a ser aferido pela ALTURA da tinta**,
 * que é o que mantém o tamanho óptico de um logótipo. Enquanto isto esteve em
 * Baro as duas medidas não podiam bater ao mesmo tempo — a Baro é muito mais
 * larga por unidade de altura — e ficou pela largura, com as maiúsculas 18
 * mais baixas. Agora a face é a do desenho e sobra só a diferença do medalhão:
 * a tinta sai ~14 mais larga que os 325 do frame, porque o nosso O é um O
 * normal e o do desenho é a roseta, que é mais larga do que a letra.
 *
 * Em telemóvel a tinta passa de 325 para 85 de largura — 0.2615 — e os corpos
 * seguem esse factor.
 */
.pizzeria-historia__marca {
	margin: 0;

	font-family: "Brevis", var(--font-display);
	font-weight: 400;
	line-height: 1;
}

.pizzeria-historia__marca-nome,
.pizzeria-historia__marca-sub {
	display: block;
	text-transform: uppercase;
}

.pizzeria-historia__marca-nome {
	font-size: 15.0px;
}

/*
 * "PIZZERIA" é espacejado e muito mais pequeno: 99 de avanço para 13 de altura
 * de maiúscula em desktop, contra os 325x58.72 de cima. O espacejamento sai da
 * conta — o texto tem 8 letras e a caixa de 99 pede 0.235em a 5.4px.
 */
.pizzeria-historia__marca-sub {
	margin-top: 0.28em;

	font-size: 3.8px;
	letter-spacing: 0.262em;

	/* O espacejamento acrescenta um espaço depois da última letra e desloca a
	   palavra para a esquerda. Metade de volta põe o centro no sítio. */
	text-indent: 0.262em;
}

/* ============================================================
   O texto
   ============================================================ */

.pizzeria-historia__texto {
	/* A caixa do bloco em telemóvel é o nó 4005:26156: 363 de 375. */
	margin-inline: auto;
	width: 96.8%; /* 363 / 375 */

	font-family: "Poppins", var(--font-body);
	font-size: 10px;
	line-height: 1.5; /* 15 / 10 */
}

/*
 * A abertura. É a única linha em Brevis no desenho, e a única que sai da escala
 * do resto: 12.417 contra os 10 do corpo em telemóvel, 18.431 contra 18.431 em
 * desktop — ou seja, em desktop só se distingue pela face.
 */
.pizzeria-historia__lead {
	margin: 28px 0 0; /* tinta da abertura em 446, tinta do wordmark acaba em 418 */

	font-family: "Brevis", var(--font-display);
	font-size: 12.417px;
	line-height: 1.2;
}

/* O bloco começa 16 abaixo da abertura — o `gap` do nó 4005:26156. */
.pizzeria-historia__corpo {
	margin-top: 16px;
}

.pizzeria-historia__corpo p {
	margin: 0;

	font-weight: 300;
}

.pizzeria-historia__corpo p + p {
	margin-top: 1.5em;
}

.pizzeria-historia__nota {
	margin-top: 16px;
}

.pizzeria-historia__nota-titulo,
.pizzeria-historia__nota-texto,
.pizzeria-historia__fecho {
	margin: 0;
}

/* O `gap` de 8 do nó 4005:26155, entre as duas linhas da nota. */
/* Poppins Regular (400), como o nó diz. Esteve em 500 enquanto a Regular não
   estava instalada — ver fonts.css. */
.pizzeria-historia__nota-texto {
	margin-top: 8px;

	font-weight: 400;
}

/* 700 em telemóvel e 600 em desktop: os dois frames não usam o mesmo peso. */
.pizzeria-historia__nota-titulo,
.pizzeria-historia__fecho {
	font-weight: 700;
}

.pizzeria-historia__fecho {
	margin-top: 16px;
}

/* ============================================================
   Desktop (1200px e acima)
   ============================================================ */

@media (min-width: 1200px) {

	/*
	 * A banda tem 578. A tinta do wordmark começa em 861 de 784 — 77 — e o
	 * último bloco acaba em 1248.70, ou seja 113.30 antes do fim.
	 */
	.pizzeria-historia.section {
		padding-block: 86px 113.3px;
	}

	.pizzeria-historia__marca-nome {
		font-size: 57.3px;
	}

	.pizzeria-historia__marca-sub {
		margin-top: 0.29em;

		font-size: 14.5px;
		letter-spacing: 0.262em;
		text-indent: 0.262em;
	}

	/*
	 * A coluna. No frame as linhas são nós soltos com `nowrap` e quebra
	 * manual — a mais larga tem 1269. Aqui o texto flui, e a largura é a
	 * dessa linha para as quebras caírem o mais perto possível do desenho.
	 */
	.pizzeria-historia__texto {
		width: 88.125%; /* 1269 / 1440 */

		font-size: 18.431px;
		line-height: 1.2; /* 22.12 / 18.431 */
	}

	/*
	 * Um passo inteiro entre blocos: no frame são 44.24 de distância entre as
	 * linhas vizinhas de dois blocos, e o passo é 22.12. Uma linha em branco.
	 */
	.pizzeria-historia__lead {
		/* Aferido pela TINTA: a abertura do frame começa em 1003 e a do
		   wordmark acaba em 943 — 60 de distância entre tintas. */
		margin-top: 58px;

		font-size: 18.431px;
	}

	.pizzeria-historia__corpo,
	.pizzeria-historia__nota,
	.pizzeria-historia__fecho {
		margin-top: 22.12px;
	}

	/* Entre as duas linhas da nota não há linha em branco: é o passo normal. */
	.pizzeria-historia__nota-texto {
		margin-top: 0;
	}

	.pizzeria-historia__nota-titulo,
	.pizzeria-historia__fecho {
		font-weight: 600;
	}
}