/* =========================================================================
   Página "Nossa história" (historia/index.html, gerada por tools/build_historia.py)
   Reaproveita a barra e o rodapé de projeto.css; tokens e .btn/.brand vêm de style.css.
   ========================================================================= */

.hs { --accent: var(--terracota); --on-accent: var(--offwhite); --ink: var(--terracota); }
.hs .pjbar { background: rgba(243, 239, 236, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--grafite); box-shadow: 0 1px 0 rgba(31, 31, 31, .08); }
.hs .pjbar::before { display: none; }
.hs .pjbar a:focus-visible { outline-color: var(--terracota); }

/* ---------- Topo: título + foto ---------- */
.hs__hero {
  max-width: 1200px; margin: 0 auto; padding: clamp(112px, 17vh, 170px) var(--gutter) clamp(40px, 7vh, 80px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); column-gap: clamp(40px, 7vw, 110px); align-items: center;
}
.hs__eyebrow { margin: 0 0 16px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--terracota); }
.hs h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.hs h1 em { color: var(--terracota); }
.hs__media { position: relative; margin: 0; max-width: 460px; width: 100%; justify-self: end; }
.hs__media::before {                               /* bloco sálvia atrás da foto, como na seção "quem somos" da Home */
  content: ""; position: absolute; z-index: 0; inset: 6% -6% -6% 6%; background: var(--salvia);
}
.hs__media img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* ---------- Texto ---------- */
.hs__body { max-width: 40rem; margin: 0 auto; padding: 0 var(--gutter) clamp(24px, 5vh, 56px); }
.hs__sec p { margin: 0 0 1.25em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.8; color: rgba(31, 31, 31, .84); }
.hs__sec--lead p:first-child { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.4; color: var(--grafite); }
.hs__sec h2 { margin: clamp(40px, 7vh, 64px) 0 .6em; font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; }
.hs__sec h2 em { color: var(--terracota); }
.hs__quote {
  margin: clamp(32px, 6vh, 56px) 0; padding: 4px 0 4px clamp(18px, 3vw, 30px); border-left: 2px solid var(--terracota);
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.18; color: var(--terracota);
}

@media (max-width: 860px) {
  .hs__hero { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .hs__media { justify-self: center; max-width: 400px; width: calc(100% - 6%); margin-right: 6%; }
}

/* "óri" / "ori" destacados em todas as palavras (história, originalidade, origens...) */
.hs .ori { color: var(--terracota); }
.hs__quote .ori, .hs__eyebrow .ori { color: var(--grafite); }      /* a frase em destaque já é terracota: aqui o "óri" inverte para grafite */

/* foto própria da página de história (formato original, sem recorte 4:5) */
.hs__media--own { max-width: 520px; }
.hs__media--own img { aspect-ratio: auto; object-fit: contain; }