/* 02 · História — o laço se abre e vira a linha do tempo */
.hi-sec{overflow:clip}
.hi-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;--r:clamp(13rem,30vw,28rem);background:radial-gradient(circle var(--r) at 80% 34% in oklab,rgb(227 210 180 / .42),transparent 100%),radial-gradient(circle var(--r) at 16% 74% in oklab,rgb(236 220 216 / .55),transparent 100%),radial-gradient(circle var(--r) at 52% 52% in oklab,rgb(251 249 246 / .9),transparent 100%)}
.hi-topo{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.hi-titulo{max-width:17ch}
.hi-intro{margin-top:1.3rem;max-width:30rem}

.hi-palco{position:relative;container-type:inline-size;--W:320;--H:1420;aspect-ratio:320/1420;width:min(100%,26rem);margin:2.6rem auto 0}
.hi-fio{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none}
.hi-fio-d{display:none}
.hi-rastro{stroke:rgb(168 129 60 / .2);stroke-width:1}
.hi-traco{stroke-width:1.6;filter:drop-shadow(1.5px 2.5px 1.5px rgb(70 45 5 / .26));stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--hi-p,1));transition:stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1)}

.hi-marcos{list-style:none;padding:0}
.hi-marco{display:contents}
.hi-ano,.hi-conta,.hi-fala{position:absolute;left:calc(var(--x)/var(--W)*100%);top:calc(var(--y)/var(--H)*100%)}
.hi-ano,.hi-conta{translate:-50% -50%;font-family:var(--wf-serif);line-height:1;color:var(--wf-tinta);white-space:nowrap}
.hi-ano{font-size:9.6cqw;letter-spacing:-.01em}
.hi-conta{display:flex;flex-direction:column;align-items:center;text-align:center}
.hi-conta b{font-weight:400;font-size:10.5cqw;color:var(--wf-vinho)}
.hi-conta span{font-family:var(--wf-sans);font-size:max(14px,4.375cqw);line-height:1.25;color:var(--wf-tinta-2);margin-top:.25em;white-space:normal;width:6.2em}
.hi-fala{width:calc(var(--w)/var(--W)*100%);font-size:max(14px,4.375cqw);line-height:1.52;color:var(--wf-tinta-2)}
.hi-rot{font-size:max(14px,3.9cqw);letter-spacing:.14em;text-transform:uppercase;color:var(--wf-ouro-esc);margin-bottom:.35em}
.hi-cita{font-family:var(--wf-serif);font-size:1.38em;line-height:1.28;color:var(--wf-tinta)}
.hi-autor{font-size:max(14px,.92em);margin:.25em 0 .5em}
.hi-fala p+.hi-cita{margin-top:.45em}

/* celular e tablet: a linha desce pela esquerda e dá uma volta por ano */
.hi-m1{--x:108;--y:66}.hi-m2{--x:102;--y:322}.hi-m3{--x:93;--y:572}.hi-m4{--x:102;--y:812}
.hi-m1 .hi-fala{--x:52;--y:142;--w:266}
.hi-m2 .hi-fala{--x:52;--y:394;--w:266}
.hi-m3 .hi-fala{--x:52;--y:636;--w:266}
.hi-m4 .hi-fala{--x:52;--y:884;--w:266}
.hi-conta-a{--x:88;--y:1204}.hi-conta-b{--x:232;--y:1204}
.hi-m5 .hi-fala{--x:26;--y:1294;--w:290}
.hi-m3 .hi-ano{font-size:8.6cqw}
.hi-cita-g{font-size:1.5em}
.hi-cita em{font-style:normal;color:var(--wf-vinho)}

@media (min-width:700px) and (max-width:1099.9px){
  .hi-dentro{display:grid;grid-template-columns:minmax(0,1fr) 26rem;gap:2.5rem;align-items:start}
  .hi-topo{position:sticky;top:2.5rem}
  .hi-palco{margin-top:.5rem}
}

/* desktop: a linha sobe da esquerda para a direita, uma volta para cima, outra para baixo, e fecha no laço */
@media (min-width:1100px){
  .hi-dentro{display:grid;grid-template-columns:minmax(0,1fr)}
  .hi-topo,.hi-palco{grid-area:1/1}
  .hi-topo{position:relative;z-index:1;align-self:start;max-width:46%}
  .hi-intro{margin-top:1.1rem;max-width:25rem}
  .hi-palco{--W:1280;--H:860;aspect-ratio:1280/860;width:100%;margin-top:clamp(0px,(1440px - 100vw)*.3,6.5rem)}
  .hi-fio-d{display:block}.hi-fio-m{display:none}
  .hi-ano{font-size:4.5cqw}
  .hi-m3 .hi-ano{font-size:3.6cqw}
  .hi-conta b{font-size:4.5cqw}
  .hi-conta span{font-size:max(14px,1.2cqw)}
  .hi-fala{font-size:max(14px,1.3cqw)}
  .hi-rot{font-size:max(14px,1.1cqw)}
  .hi-m2 .hi-fala,.hi-m5 .hi-fala{top:auto;bottom:calc((var(--H) - var(--y))/var(--H)*100%)}
  .hi-m1{--x:142;--y:512}.hi-m2{--x:392;--y:704}.hi-m3{--x:630;--y:434}.hi-m4{--x:852;--y:588}
  .hi-m1 .hi-fala{--x:46;--y:706;--w:240}
  .hi-m2 .hi-fala{--x:286;--y:524;--w:250}
  .hi-m3 .hi-fala{--x:516;--y:600;--w:246}
  .hi-m4 .hi-fala{--x:976;--y:432;--w:298}
  .hi-cita-g{font-size:1.62em;line-height:1.24}
  .hi-conta-a{--x:1034;--y:262}.hi-conta-b{--x:1206;--y:262}
  .hi-m5 .hi-fala{--x:972;--y:140;--w:292}
}