/* ===== hi · A história (parede papel) ===== */
.hi-secao{--hi-trilho:clamp(3.4rem,9vw,8.5rem);padding-top:clamp(3.5rem,8vw,7rem)}
.hi-grade{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(2.2rem,5vw,3.5rem)}
.hi-secao blockquote{quotes:none}

/* cabeça */
.hi-titulo{max-width:11em}
.hi-abre{position:relative;margin-top:clamp(1.6rem,3vw,2.4rem);max-width:30rem;padding-left:1.4rem;border-left:1px solid var(--fio);color:var(--tinta)}

/* retrato: a foto é cortada reta na esquerda e embaixo, então encosta nessas bordas do painel */
.hi-figura{position:relative;width:min(100%,26rem)}
.hi-painel{aspect-ratio:4/4.7;isolation:isolate}
.hi-painel::after{content:"";position:absolute;z-index:2;inset:auto 0 0 0;height:30%;background:linear-gradient(to top in oklab,rgb(88 48 10/.38),transparent);pointer-events:none}
.hi-painel img{position:absolute;left:0;bottom:0;width:86%;height:auto;max-width:none;transform:translateY(27%)}
.hi-legenda{position:relative;z-index:1;margin:-1.6rem 0 0 auto;width:min(86%,19rem);padding:1.05rem 1.3rem 1.1rem;background:var(--marfim);border-radius:0 0 0 1.6rem;box-shadow:0 14px 34px rgb(35 40 26/.1)}
.hi-legenda p{font-family:var(--f-serifa);font-size:1.2rem;line-height:1.25;font-style:italic;font-weight:400;color:var(--tinta)}
.hi-legenda span{display:block;margin-top:.5rem;font-size:var(--t-mini);color:var(--tinta-suave)}

/* o caminho */
.hi-caminho{position:relative;padding-left:var(--hi-trilho)}
.hi-linha{position:absolute;left:0;top:0;width:var(--hi-trilho);height:100%;pointer-events:none;overflow:visible}
.hi-linha .hi-rastro{fill:none;stroke:var(--fio);stroke-width:1;stroke-dasharray:1 7;stroke-linecap:round;opacity:.75}
.hi-linha .hi-ponta{color:var(--tinta);opacity:0}
.hi-caminho:not(.hi-vivo) .hi-linha{display:none}
.hi-caminho:not(.hi-vivo)::before{content:"";position:absolute;left:calc(var(--hi-trilho)/2);top:1rem;bottom:0;width:2px;background:var(--caramelo-texto)}
.hi-tempos{list-style:none;padding:0;display:grid;row-gap:clamp(4rem,9vw,7.5rem)}
.hi-tempo{max-width:40rem}
.hi-tempo>*+*{margin-top:1.5rem}
.hi-marco{display:flex;align-items:center;gap:.45em;font-family:var(--f-sem);font-size:var(--t-mini);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta)}
.hi-marco::after{content:"";flex:1;height:1px;margin-left:.6em;background:var(--fio)}
.hi-marco span{color:var(--tinta-suave);font-weight:400}

.hi-fala p{font-family:var(--f-serifa);font-variation-settings:"opsz" 60}
.hi-fala--doce p{font-size:clamp(1.85rem,3.5vw,3.1rem);line-height:1.06;letter-spacing:-.02em;font-style:italic;font-weight:250;color:var(--caramelo-texto);text-wrap:balance}
.hi-fala--firme p{font-size:clamp(1.85rem,3.5vw,3.1rem);line-height:1.04;letter-spacing:-.025em;font-weight:860;color:var(--tinta);text-wrap:balance}
.hi-fala--media p{font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.36;font-weight:400;color:var(--tinta);font-variation-settings:"opsz" 24}
.hi-fala--media em{font-style:italic;font-weight:300;color:var(--caramelo-texto)}
.hi-fala--media strong{font-weight:760}
.hi-tempo>.hi-fala--doce,.hi-tempo>.hi-fala--firme{margin-top:1rem}
.hi-conta{font-size:clamp(1.0625rem,1.25vw,1.15rem);line-height:1.6;max-width:34rem}

/* a pauta: frases curtas em linhas de caderno; a que não cabe sai da pauta */
.hi-pauta p{display:grid;font-family:var(--f-serifa);font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.25;font-weight:600;color:var(--tinta)}
.hi-pauta span{display:block;padding:.6rem 0;border-bottom:1px solid var(--fio)}
.hi-pauta span:first-of-type{border-top:1px solid var(--fio)}
.hi-pauta .hi-pauta-fora{justify-self:start;border-bottom:0;margin:.5rem 0 0 clamp(1.5rem,12%,5rem);padding:0;font-style:italic;font-weight:250;font-size:1.25em;color:var(--caramelo-texto);transform:rotate(-2.5deg);transform-origin:left center}
.hi-pauta--firme i{display:block;margin-bottom:.9rem;font-style:normal;font-weight:400;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.36}
.hi-pauta--firme span{font-weight:760;font-size:1.08em;letter-spacing:-.012em}
.hi-vozes p{font-family:var(--f-serifa);font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.3;color:var(--tinta)}
.hi-vozes span{display:block;font-style:italic;font-weight:250;font-size:clamp(1.6rem,2.7vw,2.4rem);line-height:1.1;letter-spacing:-.015em;color:var(--caramelo-texto);margin-top:.35rem}
.hi-vozes span+span{margin-left:clamp(1.5rem,12%,5rem)}
.hi-tempo>.hi-vozes{margin-top:2rem}

/* a sombra: o trecho escuro da história */
.hi-sombra{--fio:rgb(226 199 150/.32);padding:clamp(1.7rem,3.4vw,2.8rem) clamp(1.3rem,3.4vw,2.8rem) clamp(1.6rem,3vw,2.4rem);background:radial-gradient(120% 90% at 100% 0 in oklab,#3a4326,transparent 70%),var(--oliva-noite);color:var(--marfim);border-radius:0 clamp(3.5rem,9vw,7rem) 0 0}
.hi-sombra .hi-fala--doce p{color:var(--palha-clara);max-width:13em}
.hi-ja{margin-top:1.6rem}
.hi-ja p{display:grid;row-gap:.5rem;font-family:var(--f-serifa);font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.28;font-style:italic;font-weight:300;color:var(--marfim)}
.hi-ja span{display:block;padding-top:.55rem;border-top:1px solid var(--fio)}
.hi-ja span:nth-child(2){margin-left:clamp(1rem,8%,3rem)}
.hi-ja span:nth-child(3){margin-left:clamp(2rem,16%,6rem)}

.hi-virada{padding-top:.6rem}
.hi-virada strong{display:block;margin-top:.8rem;font-size:clamp(2rem,3.9vw,3.4rem);line-height:1;letter-spacing:-.028em;font-weight:860;font-variation-settings:"opsz" 60;text-wrap:balance}

.hi-mudou{margin-top:2.8rem;display:grid;row-gap:1.4rem}
.hi-mudou-olho{display:flex;align-items:center;gap:.8rem;font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.hi-mudou-olho::after{content:"";flex:1;height:1px;background:var(--fio)}
.hi-leve p{font-style:italic;font-weight:300}

/* a luz do retrato acompanha a história (só quando ele fica parado ao lado) */
.hi-penumbra,.hi-clarao{position:absolute;inset:0;pointer-events:none;transition:opacity .7s linear}
.hi-penumbra{background:linear-gradient(200deg in oklab,rgb(38 45 25/.9),rgb(38 45 25/.55));opacity:var(--hi-sombra,0)}
.hi-clarao{background:radial-gradient(circle at 78% 22% in oklab,rgb(244 214 150/.75),transparent 62%);opacity:var(--hi-luz,0)}
.hi-painel img{z-index:1}

/* fecho: a frase que resume, no tamanho do título */
.hi-fecho{margin-top:clamp(3.5rem,7vw,6rem);padding-top:clamp(2.8rem,6vw,5rem);border-top:1px solid var(--fio)}
.hi-fecho-fala{position:relative}
.hi-fecho-fala::before{content:"“";display:block;font-family:var(--f-serifa);font-style:italic;font-weight:300;font-size:clamp(5rem,7vw,6.5rem);line-height:.6;height:.36em;color:var(--palha)}
.hi-fecho-fala p{font-family:var(--f-serifa);font-variation-settings:"opsz" 60;font-size:clamp(2.15rem,5.9vw,5.4rem);line-height:.98;letter-spacing:-.028em;font-weight:400;max-width:14.5em;text-wrap:balance}
.hi-fecho-fala strong{font-weight:860}
.hi-fecho-fala em{font-style:italic;font-weight:250;color:var(--caramelo-texto)}
.hi-fecho-pe{margin-top:clamp(1.8rem,3.4vw,2.8rem);display:flex;flex-wrap:wrap;gap:.6rem 2.5rem;align-items:center;justify-content:space-between}
.hi-fecho-nome{font-family:var(--f-serifa);font-size:1.15rem;font-weight:500;color:var(--tinta)}
.hi-fecho-nome small{display:block;margin-top:.25rem;font-family:var(--f-sem);font-size:var(--t-mini);font-weight:400;color:var(--tinta-suave);max-width:27rem}

@media (min-width:1000px){
  .hi-grade{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2.5rem,5vw,5.5rem);row-gap:clamp(3.5rem,6vw,5.5rem)}
  .hi-cabeca{grid-column:2;grid-row:1}
  .hi-figura{grid-column:1;grid-row:1/span 2;align-self:start;position:sticky;top:clamp(1.5rem,5vh,3.5rem);width:100%}
  .hi-painel{aspect-ratio:auto;height:min(74vh,40rem)}
  .hi-painel img{width:auto;height:112%;transform:none;bottom:-22%}
  .hi-caminho{grid-column:2;grid-row:2;margin-left:calc(var(--hi-trilho)*-.35)}
}
@media (min-width:1000px){
  .hi-fecho-fala::before{position:absolute;right:100%;top:.02em;margin-right:.06em;height:auto;line-height:1}
  .hi-fecho{padding-left:var(--recuo)}
}
@media (max-width:999px){
  .hi-figura{justify-self:start;margin-left:calc(var(--borda)*-1);width:min(94%,27rem)}
}
@media (min-width:700px) and (max-width:999px){
  .hi-grade{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(1.8rem,4vw,3rem)}
  .hi-figura{grid-column:1;grid-row:1;justify-self:stretch;width:auto}
  .hi-cabeca{grid-column:2;grid-row:1;align-self:end;padding-bottom:3.2rem}
  .hi-caminho{grid-column:1/-1;margin-top:1.5rem}
  .hi-legenda{width:min(92%,19rem)}
}