/* A casa (/casa). Owner: page-casa (.orchestration/site-2026-10-09/contrato.md).
   Page layout only: colours, type, frames, the board and the wall come from tokens.css and site.css, and no token or
   shared class is redefined here. Terracota appears once, as the wall behind the oven, with nothing black on it. */

/* ---------- opening: the castanho field; each paragraph of the story next to its photograph ---------- */

/* 48 px between blocks on a phone (contrato, «página cheia»); the frames' credits sit inside that gap */
.casa-abertura__grelha { display: grid; row-gap: var(--md-s-7); }
.casa-abertura__p2, .casa-abertura__p3 { max-width: var(--md-measure); }
.casa-abertura__f1 { --md-tilt: -0.7deg; }
.casa-abertura__f2 { --md-tilt: 1deg; width: 92%; justify-self: end; }

@media (min-width: 64em) {
  .casa-abertura__grelha {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--md-s-7);
    row-gap: var(--md-s-5);
    align-items: center;
  }
  .casa-abertura__titulo { grid-column: 1 / -1; margin-bottom: var(--md-s-6); }
  .casa-abertura__titulo .ln > span { white-space: nowrap; }
  .casa-abertura__p1 { grid-column: 1 / 6; grid-row: 2; }
  .casa-abertura__f1 { grid-column: 6 / -1; grid-row: 2; }
  /* the second photograph swaps sides and hangs lower, beside the two paragraphs it belongs to */
  .casa-abertura__f2 { grid-column: 1 / 8; grid-row: 3 / span 2; width: 100%; justify-self: stretch; margin-top: var(--md-s-9); }
  .casa-abertura__p2 { grid-column: 8 / -1; grid-row: 3; align-self: end; margin-top: var(--md-s-9); }
  .casa-abertura__p3 { grid-column: 8 / -1; grid-row: 4; align-self: start; }
}

/* ---------- Regras da Casa: the whole board, one list item per rule, the lines of the board inside it ---------- */

.casa-regras__in { display: grid; justify-items: center; gap: var(--md-s-6); }
.casa-regras__quadro { width: min(100%, 40rem); max-width: none; --md-tilt: 0.5deg; }
.casa-regras__titulo { margin-bottom: var(--md-s-6); font-size: var(--md-t-small); }
/* each rule writes itself as one piece (data-giz), so the chalk follows the width of its own words */
.casa-regras__lista .md-board__line { width: fit-content; max-width: 100%; margin-inline: auto; }
.casa-regras__lista .md-board__line + .md-board__line { margin-top: var(--md-s-5); }
.regra__a, .regra__b { display: block; }
/* Gloock never below 20 px (brand-brief.md), so the smaller line has a floor */
.regra__b { margin-top: 2px; font: 400 max(1.25rem, var(--md-t-lead)) / 1.3 var(--md-font-display); }
.casa-regras__fonte { max-width: 30rem; text-align: center; }
/* the narrowest phones: less padding inside the board and a slightly smaller first line, so most rules keep their lines */
@media (max-width: 23.75em) {
  .casa-regras__quadro { padding-inline: var(--md-s-4); }
  .casa-regras__lista .md-board__line { font-size: 1.375rem; }
}

/* ---------- the two rooms: one wall per house, the room's text hangs on it like a label ---------- */

.casa-salas__cab { margin-bottom: var(--md-s-8); }
.casa-salas__cab .lead { margin-top: var(--md-s-4); }
.casa-parede + .casa-parede { margin-top: var(--md-s-9); }

.casa-rotulo { display: grid; gap: var(--md-s-4); justify-items: start; max-width: 38rem; }
.casa-rotulo__selo { width: 112px; height: auto; margin-bottom: var(--md-s-2); }
.casa-rotulo .ligacao { margin-top: var(--md-s-2); }

/* a tilt per frame, so no two neighbours hang at the same angle (README of brand/fotografia) */
.casa-f--ma-sala { --md-tilt: -0.9deg; }
.casa-f--ma-quadros { --md-tilt: 1.2deg; }
.casa-f--ma-baixo { --md-tilt: -0.5deg; }
.casa-f--pa-coluna { --md-tilt: 0.8deg; }
.casa-f--pa-quadros { --md-tilt: -1.1deg; }
.casa-f--pa-sala { --md-tilt: 0.6deg; }
.casa-f--forno { --md-tilt: -0.8deg; }

/* a tablet held upright: still one column (the wall turns into two at 900 px), so the frames shrink and keep their
   differences instead of filling the width one after another */
@media (min-width: 37.5em) and (max-width: 56.24em) {
  .casa-parede .md-frame.is-w92 { width: 78%; }
  .casa-parede .md-frame.is-w78 { width: 62%; }
  .casa-parede .md-frame.is-w64 { width: 50%; }
}

@media (min-width: 900px) {
  /* Paço de Arcos mirrors Massamá: its label hangs in the narrow column on the right, the frames on the left */
  .casa-parede--paco > .casa-parede__etiqueta { grid-column: 2; grid-row: 1; padding-top: 0; }
  .casa-parede--paco > .md-wall__col:not(.casa-parede__etiqueta) { grid-column: 1; grid-row: 1; padding-top: var(--md-s-8); }
  .casa-parede--paco .casa-f--pa-sala { align-self: flex-end; }
}

/* ---------- the oven: the page's one terracota wall ---------- */

.casa-filete { margin-block: 0; }
.casa-forno__grelha { display: grid; gap: var(--md-s-7); align-items: center; }
.casa-forno__texto { display: grid; gap: var(--md-s-4); }
/* on a phone the wall runs to both edges of the screen, like the façade it comes from */
.casa-forno__parede {
  display: grid; justify-items: center;
  margin-inline: calc(-1 * var(--md-s-gutter));
  padding: var(--md-s-8) var(--md-s-gutter) var(--md-s-7);
}
.casa-forno__parede .md-frame { width: min(100%, 34rem); }
/* while the wall bleeds it ends the section: it meets the castanho closing directly, with no cream strip between */
@media (max-width: 63.99em) {
  .casa-forno { padding-bottom: 0; }
}

@media (min-width: 64em) {
  .casa-forno__grelha { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--md-s-8); }
  .casa-forno__parede { grid-column: 1; grid-row: 1; margin-inline: 0; padding: var(--md-s-9) var(--md-s-8) var(--md-s-8); }
  .casa-forno__texto { grid-column: 2; grid-row: 1; }
}

/* ---------- closing: the large seal in cream on castanho, its ring turning on its own (data-selo-gira) ---------- */

.casa-fecho__grelha { display: grid; gap: var(--md-s-7); justify-items: start; }
.casa-fecho__texto { display: grid; gap: var(--md-s-6); justify-items: start; }
.casa-selo { display: block; width: min(60vw, 240px); height: auto; color: var(--md-cream); fill: currentColor; overflow: visible; }

@media (min-width: 48em) {
  .casa-fecho__grelha { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--md-s-9); }
  .casa-selo { width: clamp(220px, 24vw, 320px); }
}