/* Page building blocks shared by inner pages: section padding, section heads, inner page header, toolbar. */
.s-sec{padding:var(--section-y) var(--gutter)}

.s-sec.is-flush-top{padding-top:0}
.big{font-size:var(--fs-section);font-weight:var(--fw-bold);color:var(--title)}
.s-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.s-head p{max-width:46ch;margin-top:8px}
.comp{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* inner page header */
.p-head{padding:64px var(--gutter) 36px}
.p-head.is-flush{padding-bottom:0}
.p-head h1,.p-head h2{font-weight:var(--fw-bold);font-size:var(--fs-page-title);line-height:1.15;color:var(--title)}
.p-head p{font-size:var(--fs-19);max-width:52ch;margin-top:14px}
.crumbs{font-size:var(--fs-14);color:var(--grey);margin-bottom:14px;display:flex;gap:8px}
.crumbs a{text-decoration:none}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:0 var(--gutter) 28px}
.toolbar .count{font-size:var(--fs-15);color:var(--grey)}

@media (max-width:760px){.s-sec,.p-head,.toolbar{padding-inline:var(--gutter-m)}}

/* One-page site: each former page is a block in index.html (no divider line between them) and lands under the sticky header when the menu scrolls to it */
.page-sec{scroll-margin-top:var(--nav-small)}
@media (max-width:760px){.page-sec{scroll-margin-top:var(--nav-small-m)}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* inner pages: the path back home, with the page name as its heading */
.pg-top{padding:28px var(--gutter) 0}
.pg-top .crumbs{margin:0;align-items:center}
.pg-top h1{font:inherit;color:var(--head)}
@media (max-width:760px){.pg-top{padding-inline:var(--gutter-m)}}