/* Página Nossa história: composição própria sobre a base (base.css), o movimento (movimento.css) e os componentes (componentes.css).
   Direção visual (site/direcao-visual.html, Nossa história 7/3/2): "a pessoa por trás das cestas, contada como leitura, não como página institucional". Editorial: título grande
   em serifa e um parágrafo curto à direita (sem foto na primeira tela); o retrato fica fixo à esquerda enquanto quatro trechos rolam à direita; uma citação em faixa chocolate
   (a única); três fotos 4:5 em alturas diferentes com legenda; e o convite ao contato em três colunas discretas. */

/* ---------- topo: título grande e parágrafo curto deslocado à direita ---------- */
.topo--historia{min-height:var(--sec-h);display:grid;align-content:center;padding-block:var(--s6) var(--s7)}
.topo--historia>.container{width:100%}
.historia-topo{display:grid;gap:var(--s6)}
.topo--historia .migalhas{margin-bottom:0}
.topo--historia h1{max-width:14ch;font-size:clamp(2.75rem,.8rem + 6.6vw,8rem);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
@media(min-width:900px){.topo--historia h1{max-width:66%}}
.historia-topo__lead{display:grid;gap:var(--s4);max-width:34rem}
@media(min-width:900px){.historia-topo__lead{margin-left:auto}}
.historia-topo__lead p{margin:0}
.historia-topo__nota{font-size:15px;line-height:1.55;color:var(--suave)}

/* ---------- relato: retrato fixo à esquerda, texto rolando à direita ---------- */
.relato{padding-block:var(--s8);border-top:1px solid var(--linha)}
.relato__grade{display:grid;gap:var(--s7)}
@media(min-width:900px){.relato__grade{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,140px);align-items:start}}
.relato__retrato figure{margin:0;display:grid;gap:var(--s3)}
.relato__retrato .slot{width:min(62vw,360px)}
@media(min-width:900px){
  .relato__retrato{position:sticky;top:calc(var(--cab-h) + var(--s6))}
  .relato__retrato .slot{width:100%;max-width:min(100%,calc((var(--sec-h) - 140px) * .8))}
}
.relato__retrato figcaption{font-size:14px;line-height:1.45;color:var(--suave);max-width:30ch}
.trecho{max-width:38rem;padding-block:var(--s7);border-top:1px solid var(--linha)}
.trecho:first-child{padding-top:0;border-top:0}
.trecho p.trecho__marca{margin:0 0 var(--s3);font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.trecho h3{margin-bottom:var(--s5);font-size:clamp(2rem,1rem + 2.8vw,3.75rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.trecho p{margin:0 0 var(--s4);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.65}
.trecho a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ouro);text-underline-offset:3px}

/* ---------- citação: a única faixa chocolate da página ---------- */
.citacao{display:grid;align-content:center;padding-block:var(--s8);min-height:min(70svh,640px)}
.citacao>.container{width:100%}
.citacao figure{margin:0;max-width:64rem}
.citacao blockquote{margin:0}
.citacao blockquote p{margin:0;color:#fff;font:500 clamp(2.25rem,1rem + 4.4vw,5.5rem)/1.05 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.citacao blockquote p::before{content:"\201C"}
.citacao blockquote p::after{content:"\201D"}
.citacao blockquote em{color:var(--ouro)}
.citacao figcaption{margin-top:var(--s6);font-size:15px;color:#e8dccf}

/* ---------- fotos com legenda: 4:5 em alturas diferentes ---------- */
.fotos{padding-block:var(--s8)}
.fotos__cab{display:grid;gap:var(--s4);max-width:46rem;margin-bottom:var(--s7)}
.fotos h2{font-size:clamp(2.25rem,1rem + 3.2vw,4.5rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.fotos__grade{display:grid;gap:var(--s6) clamp(12px,1.6vw,24px)}
@media(min-width:760px){.fotos__grade{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .foto-leg:nth-child(2){margin-top:clamp(32px,5vw,88px)}
  .foto-leg:nth-child(3){margin-top:clamp(16px,2.4vw,44px)}}
.foto-leg{margin:0;display:grid;gap:var(--s3);align-content:start}
.foto-leg__foto{overflow:hidden;border-radius:var(--r-img)}
.foto-leg .slot{width:100%}
.foto-leg figcaption{max-width:30ch;font-size:15px;line-height:1.5;color:var(--suave)}
@media(max-width:759px){.foto-leg{max-width:22rem}}

/* ---------- fale com a gente: três colunas discretas ---------- */
.fale{padding-block:var(--s8);border-top:1px solid var(--linha)}
.fale h2{margin-bottom:var(--s6);font-size:clamp(2rem,1rem + 2.8vw,3.5rem);line-height:1.05;letter-spacing:-.02em}
.fale__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)}
@media(min-width:760px){.fale__lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,80px)}}
.fale__lista li{display:grid;gap:var(--s2);align-content:start;padding-top:var(--s4);border-top:1px solid var(--ouro);max-width:30ch;line-height:1.5}
.fale__lista .link-seta{justify-self:start;margin-top:var(--s2)}
.fale__rotulo{font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.fale__nota{margin:var(--s6) 0 0;font-size:15px;color:var(--suave)}
.fale__nota a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ouro);text-underline-offset:3px}