/* ==========================================================================
   layout.css — page frame: top bar, containers, sections, footer
   ========================================================================== */
.container { width: min(100% - 2 * var(--s-5), var(--container)); margin-inline: auto; }

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) clamp(var(--s-4), 4vw, var(--s-7));
  background: linear-gradient(to bottom, rgba(13, 11, 9, 0.92), rgba(13, 11, 9, 0));
}
.topbar__brands { display: flex; align-items: center; gap: var(--s-4); }
.logo--bianco  { height: 22px; width: auto; }
.logo--frasers { height: 38px; width: auto; }
.brand-divider { width: 1px; height: 30px; background: var(--line-strong); }

.chapters { padding: var(--s-9) 0; border-top: 1px solid var(--line); background: var(--bg); }
.section-title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl);
  text-align: center; margin: var(--s-3) 0 var(--s-7);
}

.footer {
  display: grid; justify-items: center; gap: var(--s-3);
  padding: var(--s-8) var(--s-5) var(--s-7);
  border-top: 1px solid var(--line); text-align: center;
}
.footer__logo  { height: 30px; width: auto; opacity: 0.85; }
.footer__tag   { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--ink-soft); }
.footer__legal { font-size: var(--text-xs); color: var(--ink-mute); letter-spacing: 0.04em; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }