/* Outros tempos · touradasacorda.com — the pieces of the historical register, era by era.
   Loaded after styles.css, terceira.css, letreiro.css and historia.css (the wall, the plaques, the opening and the
   section frame come from them); type only from their tokens (--t-small, --t-body, --t-lead, --t-h2, --t-display). */

/* ---- the opening: six painted tiles, one for each era, each a way in ---- */
.friso.friso-seis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ot .ab-lado .como { margin: 0; }

/* ---- the pieces: a card each, in the order of the years ---- */
.pecas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; }
.peca { display: flex; flex-direction: column; min-width: 0; background: var(--wall); color: var(--ink); }
.escuro .peca a { color: var(--cobalt); }
.escuro .peca :focus-visible { outline-color: var(--ink); }
.peca-corpo { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px clamp(18px, 2vw, 28px) 8px; }
.peca-ano { margin: 0; font-size: var(--t-h2); font-style: italic; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--cobalt); font-variant-numeric: lining-nums; }
.peca-dia { margin: -2px 0 0; font-size: var(--t-small); color: var(--muted); }
.peca-t { margin: 0; font-size: var(--t-lead); font-weight: 600; line-height: 1.3; max-width: 30ch; }
.peca-porque { margin: 0; max-width: 46ch; }
.peca-meta, .peca-cred { margin: 0; font-size: var(--t-small); color: var(--muted); max-width: 46ch; }
.peca-meta { margin-top: 4px; }
.peca-aviso { margin: 4px 0 0; padding: 12px 14px; font-size: var(--t-small); font-weight: 600; color: var(--manganes); background: var(--lilas-claro); }
.peca-fim { margin: auto 0 0; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.peca-lig { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--cobalt); text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .peca-lig:hover { color: var(--ink); } }
@media (hover: hover) and (pointer: fine) { .escuro .peca .peca-lig:hover { color: var(--ink); } }
.peca-dir { font-weight: 600; }

/* a film that plays here: the clip's own thumbnail and a play button, until the visitor presses it */
.peca-midia { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--navy); overflow: hidden; }
.peca-midia img { display: block; width: 100%; height: 100%; object-fit: cover; }
.peca-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.peca-play {
  position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; display: grid; place-items: center; border: 0; border-radius: 0; cursor: pointer;
  background: var(--cobalt); color: var(--paper);
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .peca-play:hover { background: var(--navy); transform: scale(1.06); } }
.peca-play:active { transform: scale(.97); }
.peca-play svg { width: 36px; height: 36px; fill: currentColor; margin-left: 5px; }
/* a public-domain book page already on the site, on paper, as on /historia */
.peca-pagina { aspect-ratio: auto; background: var(--paper); padding: clamp(10px, 1.4vw, 16px); }
.peca-pagina img { height: auto; object-fit: contain; }

/* ---- 1906 against 2006 ---- */
.antes-agora { display: grid; gap: 16px; margin-bottom: clamp(16px, 2vw, 32px); padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px); background: var(--wall); color: var(--ink); }
.aa-q { margin: 0; }
.aa-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 920px; }
.aa-l { display: grid; grid-template-columns: 5ch minmax(0, 1fr) 4ch; align-items: center; gap: clamp(10px, 2vw, 20px); }
.aa-ano { font-size: var(--t-lead); font-weight: 600; color: var(--cobalt); font-variant-numeric: lining-nums; }
.aa-pista { display: block; height: 44px; background: var(--paper); }
.aa-barra { display: block; height: 100%; background: var(--cobalt); }
.aa-n { font-size: var(--t-h2); font-weight: 600; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.antes-agora .nota { margin: 0; max-width: 64ch; }

/* ---- the register by decade ---- */
.decadas { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; max-width: 720px; }
.dc-l { display: grid; grid-template-columns: 7ch minmax(0, 1fr) 3ch; align-items: center; gap: clamp(10px, 2vw, 16px); }
.dc-d { font-size: var(--t-small); color: var(--soft); font-variant-numeric: lining-nums; }
.dc-pista { display: block; height: 28px; }
.dc-barra { display: block; height: 100%; background: var(--paper); }
.dc-n { font-size: var(--t-small); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.escuro .nota { color: var(--soft); }
.seguir { max-width: 52ch; }
.seguir a { text-underline-offset: 5px; }

.sem-dados p { margin: 0; padding: 24px; background: var(--wall); color: var(--ink); }
.sem-js { margin: 0; padding: 24px var(--m); background: var(--wall); }

/* ---- tablet and phone ---- */
@media (max-width: 1080px) {
  .pecas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .friso.friso-seis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pecas { grid-template-columns: 1fr; }
  .friso.friso-seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .peca-play { width: 80px; height: 80px; }
  .aa-l { grid-template-columns: 4.5ch minmax(0, 1fr) 3.4ch; }
  .dc-l { grid-template-columns: 6.5ch minmax(0, 1fr) 3ch; }
}
@media (prefers-reduced-motion: reduce) { .peca-play { transition: none; } }