/* Acervo brand pages: the shared frame. Side navigation, page and section rhythm, tiles and the mark.
   Only tokens; each chapter adds its own styles beside this. */
body { background: var(--bg); }
.br { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

/* Side navigation, after the brand guidelines it follows: one column of chapters, the current one open. */
.br-nav { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); }
.br-nav .home { display: flex; align-items: center; gap: var(--s-10); height: var(--head); padding: 0 var(--s-20); border-bottom: 1px solid var(--line); font-weight: 600; font-size: var(--fs-lg); }
.br-nav .home svg { width: 24px; height: 24px; }
.br-nav .home span { color: var(--muted); font-weight: 400; }
.br-nav nav { flex: 1; overflow-y: auto; padding: var(--s-16) var(--s-12); }
.br-nav .ch { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 36px; padding: 0 var(--s-8); border-radius: var(--r-option); color: var(--muted); font-size: var(--fs-base); transition: background var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease); }
.br-nav .ch:hover { background: var(--surface); color: var(--ink); }
.br-nav .ch[aria-current="page"] { color: var(--ink); font-weight: 500; }
.br-nav .ch .soon { color: var(--faint); font-size: var(--fs-xs); font-weight: 400; }
.br-nav .sub { display: grid; padding: var(--s-2) 0 var(--s-10) var(--s-12); }
.br-nav .sub a { padding: var(--s-6) var(--s-8); border-radius: var(--r-option); color: var(--muted); font-size: var(--fs-md); transition: color var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease); }
.br-nav .sub a:hover { color: var(--ink); background: var(--surface); }
.br-nav .sub a.on { color: var(--ink); }
.br-nav .foot { padding: var(--s-16) var(--s-20); border-top: 1px solid var(--line); color: var(--faint); font-size: var(--fs-sm); }
.br-nav .foot a { color: var(--muted); }
@media (max-width: 860px) {
  .br { grid-template-columns: 1fr; }
  .br-nav { position: sticky; top: 0; z-index: var(--z-header); height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .br-nav nav, .br-nav .foot { display: none; }
}

/* Content */
.br-main { min-width: 0; }
.br-page { max-width: 1040px; padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) var(--s-96) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.br-crumb { display: flex; align-items: center; height: var(--head); color: var(--muted); font-size: var(--fs-md); border-bottom: 1px solid var(--line); }
.br-intro { padding-block: var(--s-64) var(--s-48); }
.br-intro h1 { margin: 0; font-size: var(--fs-display); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
.br-intro p { margin: var(--s-24) 0 0; max-width: 60ch; color: var(--muted); font-size: var(--fs-lede); line-height: 1.5; text-wrap: pretty; }
.br-sec { padding-block: var(--s-56); border-top: 1px solid var(--line); scroll-margin-top: var(--s-16); }
.br-sec h2 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.br-sec h3 { margin: var(--s-40) 0 var(--s-12); font-size: var(--fs-xl); font-weight: 600; }
.br-sec > p, .br-lead { margin: var(--s-16) 0 0; max-width: 62ch; color: var(--muted); font-size: var(--fs-lg); line-height: 1.6; text-wrap: pretty; }
.br-grid { display: grid; gap: var(--s-12); margin-top: var(--s-28); }
.br-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .br-g3, .br-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .br-g2, .br-g3 { grid-template-columns: 1fr; } .br-tile { min-height: 160px; } }
.br-tile { position: relative; display: grid; place-items: center; min-height: 220px; border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.br-tile.dark { background: var(--ink); }
.br-cap { display: flex; justify-content: space-between; gap: var(--s-8); margin-top: var(--s-10); font-size: var(--fs-md); }
.br-cap span:last-child { color: var(--faint); }
.br-code { font: 500 var(--fs-sm)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }

/* The mark */
.lockup { display: inline-flex; align-items: center; gap: .32em; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.lockup svg { width: 1.18em; height: 1.18em; flex: none; }
.lockup.stack { flex-direction: column; gap: .36em; }
.lockup.stack svg { width: 1.9em; height: 1.9em; }
.sym { display: block; }
.sym path { transform-box: fill-box; transform-origin: 50% 100%; }