/* 4 · Trajetória — a conta (noite). Prefixo tj-. */
.tj-grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
.tj-topo { grid-column: 1 / 8; grid-row: 1; position: relative; z-index: 2; }
.tj-frase {
  margin: .4em 0 0;
  font-family: var(--f-titulo); font-weight: 300;
  font-size: clamp(2.25rem, 4.3vw, 4.125rem); line-height: 1.06; letter-spacing: -.028em;
  color: var(--papel); text-wrap: balance;
}
.tj-frase b { font-weight: 700; }
.tj-ano { font-size: 1em; color: var(--lampada); letter-spacing: -.03em; }
.tj-assina { margin-top: 18px; font-size: 1rem; color: var(--noite-suave); }
.tj-assina::before { content: "— "; }

/* retrato do congresso: figura grande, sangrando à direita, sob a luz da luminária */
.tj-retrato {
  grid-column: 7 / 13; grid-row: 1 / 3;
  position: relative; z-index: 1;
  margin: calc(var(--sec-pad) * -.35) calc(var(--margem) * -1) 0 0;
  pointer-events: none;
}
.tj-retrato::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -12%; width: 130%; aspect-ratio: 1; translate: -50% 0;
  background: radial-gradient(in oklab circle closest-side, color-mix(in oklab, var(--lampada) 36%, transparent), color-mix(in oklab, var(--lampada) 12%, transparent) 52%, transparent);
}
.tj-retrato img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .5) 14%, #000 32%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .5) 14%, #000 32%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent);
  mask-composite: intersect;
}

/* a conta: um livro-caixa */
.tj-conta { grid-column: 1 / 8; grid-row: 2; position: relative; z-index: 2; margin-top: clamp(48px, 6vw, 88px); max-width: 720px; }
.tj-conta-nota { font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--noite-suave); padding-bottom: 14px; border-bottom: 3px double rgba(243, 237, 228, .28); }
.tj-linhas { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.tj-linha {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; column-gap: clamp(18px, 2vw, 28px);
  padding: 16px 0 14px;
  border-bottom: 1px solid rgba(243, 237, 228, .13);
}
.tj-linha dt { text-align: right; font-size: clamp(3rem, 5.4vw, 5.25rem); }
.tj-linha dd { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.25; color: var(--papel); }
.tj-linha dd span { display: block; margin-top: 4px; font-size: 1rem; color: var(--noite-suave); }
.tj-linha.tj-total { border-bottom: 0; border-top: 3px double rgba(226, 196, 143, .55); margin-top: -1px; padding-top: 18px; }
.tj-total dt { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.75rem, 2.8vw, 2.75rem); line-height: 1; color: var(--lampada); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tj-total dd { color: var(--noite-suave); font-size: clamp(1.125rem, 1.4vw, 1.25rem); }

/* a linha do tempo */
.tj-tempo {
  grid-column: 1 / -1; grid-row: 3; margin-top: clamp(72px, 7vw, 104px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px);
  --tj-p: 1;
}
.js .tj-tempo { --tj-p: 0; }
.tj-sub { grid-column: 1 / -1; margin: 0 0 clamp(28px, 4vw, 48px); font-family: var(--f-titulo); font-weight: 300; font-size: var(--t-sub); letter-spacing: -.015em; color: var(--papel); }
.tj-sub b { font-weight: 700; }
.tj-sub-faixa { display: inline-block; margin-left: .5em; font-weight: 700; font-size: .62em; letter-spacing: 0; color: var(--lampada); font-variant-numeric: tabular-nums; vertical-align: .18em; }
.tj-fecho { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; }
.tj-rosto { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 6%; box-shadow: 0 0 0 2px var(--lampada), 0 0 0 7px rgba(226, 196, 143, .14); background: var(--noite-3); }
.tj-anos { list-style: none; margin: 0; padding: 0; position: relative; --col: 9rem; }
.tj-anos::before, .tj-anos::after { content: ""; position: absolute; left: var(--col); top: 6px; bottom: 6px; width: 2px; margin-left: -1px; border-radius: 2px; }
.tj-anos::before { background: rgba(243, 237, 228, .14); }
.tj-anos::after { background: linear-gradient(to bottom, color-mix(in oklab, var(--lampada) 30%, transparent), var(--lampada)); transform-origin: top; transform: scaleY(var(--tj-p, 1)); }
.tj-ano-linha {
  position: relative;
  display: grid; grid-template-columns: var(--col) minmax(0, 1fr); align-items: start;
  padding: 22px 0;
}
.tj-ano-linha::before {
  content: ""; position: absolute; left: calc(var(--col) - 6px); top: 36px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--noite); box-shadow: inset 0 0 0 2px rgba(243, 237, 228, .38); transition: background .5s, box-shadow .5s;
}
.tj-quando {
  padding-right: 30px; text-align: right;
  font-family: var(--f-titulo); font-weight: 700; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: rgba(243, 237, 228, .5); transition: color .6s;
}
.tj-fatos { padding-left: 34px; display: grid; align-content: start; gap: 12px; font-size: var(--t-base); line-height: 1.55; color: var(--papel); }
.tj-faixa { display: block; font-size: var(--t-mini); letter-spacing: .1em; font-weight: 600; color: var(--noite-suave); font-variant-numeric: tabular-nums; }
.tj-ano-linha.aceso .tj-quando { color: var(--papel); }
.tj-ano-linha.aceso::before { background: var(--lampada); box-shadow: 0 0 0 5px rgba(226, 196, 143, .16); }
.tj-marco.aceso .tj-quando { color: var(--lampada); }
html:not(.js) .tj-ano-linha::before { background: var(--lampada); }
html:not(.js) .tj-quando { color: var(--papel); }

/* documento dentro do ano: só no celular/tablet em pé */
.tj-doc { display: none; margin: 0; }
.tj-doc img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 34px -14px rgba(0, 0, 0, .7); }
.tj-doc figcaption { margin-top: 10px; font-size: .9375rem; color: var(--noite-suave); }

/* parede de documentos (desktop): o do ano aceso vem para a frente */
.tj-parede { position: sticky; top: 22vh; align-self: start; display: grid; margin-top: 10px; }
.tj-quadro {
  grid-area: 1 / 1; margin: 0; transform-origin: 50% 60%;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, .9));
  opacity: var(--o, .5); filter: brightness(var(--b, .55));
  transition: transform .8s var(--curva), opacity .6s, filter .6s;
}
.tj-quadro img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 30px 50px -20px rgba(0, 0, 0, .8); }
.tj-quadro figcaption { margin-top: 16px; font-size: 1rem; color: var(--noite-suave); opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.tj-quadro figcaption b { display: block; font-family: var(--f-titulo); font-size: 1.375rem; color: var(--lampada); }
.tj-quadro:nth-child(1) { --x: -6%; --y: -7%; --r: -4deg; }
.tj-quadro:nth-child(2) { --x: 7%; --y: -4%; --r: 3deg; }
.tj-quadro:nth-child(3) { --x: -4%; --y: 5%; --r: 2deg; }
.tj-quadro:nth-child(4) { --x: 6%; --y: 7%; --r: -2.5deg; }
.tj-quadro.frente { --x: 0; --y: 0; --r: -1deg; --s: 1; --o: 1; --b: 1; z-index: 2; }
.tj-quadro.frente figcaption { opacity: 1; visibility: visible; }
html:not(.js) .tj-quadro:first-child { --x: 0; --y: 0; --s: 1; --o: 1; --b: 1; z-index: 2; }
html:not(.js) .tj-quadro:first-child figcaption { opacity: 1; visibility: visible; }

.tj-registro { grid-column: 1 / -1; margin-top: clamp(36px, 4vw, 56px); padding-top: 20px; border-top: 1px solid rgba(243, 237, 228, .14); font-size: 1rem; color: var(--noite-suave); }
.tj-pt { color: var(--lampada); padding: 0 .2em; }
.tj-nw { white-space: nowrap; }

/* notebook menor */
@media (max-width: 1100px) {
  .tj-anos { --col: 7rem; }
  .tj-tempo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* tablet em pé e celular: coluna única, documento dentro do ano */
@media (max-width: 860px) {
  .tj-grade { grid-template-columns: minmax(0, 1fr); }
  .tj-topo, .tj-retrato, .tj-conta, .tj-tempo { grid-column: 1; grid-row: auto; }
  .tj-retrato { margin: 20px calc(var(--margem) * -1) 0; width: auto; display: flex; justify-content: center; }
  .tj-retrato img { width: min(100%, 520px); }
  .tj-retrato::before { top: -4%; width: 110%; }
  .tj-conta { margin-top: -40px; max-width: none; }
  .tj-tempo { grid-template-columns: minmax(0, 1fr); }
  .tj-parede { display: none; }
  .tj-doc { display: block; margin-top: 18px; width: min(70%, 300px); transform: rotate(-1.2deg); }
  .tj-anos { --col: 6px; }
  .tj-ano-linha { grid-template-columns: minmax(0, 1fr); padding: 20px 0 20px 34px; }
  .tj-ano-linha::before { left: 0; top: 28px; }
  .tj-quando { text-align: left; padding: 0 0 10px; font-size: 2.125rem; }
  .tj-fatos { padding-left: 0; }
}
@media (max-width: 520px) {
  .tj-linhas { grid-template-columns: minmax(0, 1fr); }
  .tj-linha { grid-template-columns: minmax(0, 1fr); padding: 14px 0 12px; }
  .tj-linha dt { text-align: left; font-size: clamp(2.75rem, 14vw, 3.5rem); }
  .tj-linha dd { margin-top: 4px; font-size: 1.25rem; }
  .tj-linha.tj-total dt { font-size: 2.25rem; }
  .tj-linha.tj-total dd { margin-top: 6px; font-size: 1.125rem; }
  .tj-rosto { width: 60px; height: 60px; }
  .tj-fecho { column-gap: 14px; }
}