/* Page templates: homepage and project */
.lead { font-size: 1.25rem; line-height: 1.5; max-width: 60ch; }
.muted { color: var(--c-muted); }
.list-plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.section--tight { padding-block: clamp(24px, 4vw, 40px); }
.section--surface { background: var(--c-surface); }

/* Hero */
.hero { padding-block: clamp(32px, 6vw, 72px); }
.hero__grid { display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; }
.hero__copy h1 { margin-bottom: .4em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__art { width: 100%; max-width: 320px; height: auto; justify-self: center; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1.1fr .9fr; gap: 48px; }
  .hero__art { max-width: none; }
}
/* front-page band: light mint vertical gradient (aqua-mint at the top, the footer mint in the middle, ending exactly on the page background) with dark text + a soft aqua glow low on the right (off on narrow screens); all numbers are tokens */
.hero--band { position: relative; overflow: hidden; color: var(--c-ink); min-height: var(--hero-band-h); padding-top: var(--hero-pad-top); padding-bottom: calc(var(--hero-overlap) + 24px);
  background:
    radial-gradient(ellipse var(--hero-glow-rx) var(--hero-glow-ry) at var(--hero-glow-x) var(--hero-glow-y), rgba(var(--hero-glow), var(--hero-glow-a)), transparent),
    linear-gradient(180deg, var(--hero-stop-1) var(--hero-pos-1), var(--hero-stop-2) var(--hero-pos-2), var(--hero-stop-3) var(--hero-pos-3), var(--hero-stop-4) var(--hero-pos-4), var(--hero-stop-5) var(--hero-pos-5), var(--hero-stop-6) var(--hero-pos-6), var(--hero-stop-7) var(--hero-pos-7), var(--hero-stop-8) var(--hero-pos-8), var(--hero-stop-9) var(--hero-pos-9)); }
.hero--band .hero__grid { position: relative; z-index: 1; align-items: start; }
.hero--band .hero__art { align-self: center; }
.hero--band h1 { font-size: var(--fs-hero-h1); }
.hero--band .lead { color: var(--c-ink); font-size: var(--hero-lead-fs); line-height: var(--hero-lead-lh); }
.hero--band .btn { padding: var(--hero-btn-pad); }
.hero--band .btn--secondary { border-color: var(--c-accent); }
@media (max-width: 700px) { .hero--band .hero__art { display: none; } }
.section--overlap { position: relative; z-index: 2; margin-top: calc(-1 * var(--hero-overlap)); padding-top: 0; }

/* Topic tiles with icons */
.grid--tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.section .grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tile { gap: 12px; }
.tile__icon { width: 96px; height: 96px; }
.tile__count { font-size: .9375rem; }

/* Link callouts */
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--shadow-card); background: linear-gradient(135deg, var(--c-tint), var(--c-tile-2)); }
.callout h2 { font-size: var(--fs-h3); margin-bottom: .25em; }
.callout p { margin: 0; }

/* Project */
.project__head { padding-top: 24px; max-width: 760px; margin-inline: auto; }
.project__head .breadcrumbs { margin-bottom: 24px; }
.project__media { margin-top: 24px; }
.project__image { display: block; width: 100%; max-height: 560px; object-fit: cover; border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.project__body { max-width: 760px; margin-inline: auto; }
.project__body h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.project__foot { max-width: 760px; margin-inline: auto; padding-block: 32px 64px; }
.byline { margin: 0; font-size: .9375rem; }

.params { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; padding: 0; }
.params__item { border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 12px 20px; background: var(--c-tile-1); min-width: 120px; }
.params__item:nth-child(2n) { background: var(--c-tile-2); }
.params__item:nth-child(3n) { background: var(--c-tile-4); }
.params dt { font-size: .8125rem; font-weight: 500; color: var(--c-muted); }
.params dd { margin: 0; font: 600 1.125rem/1.3 var(--font-head); }

.before-download { margin-top: 24px; padding: 20px 24px; border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--shadow-card); background: var(--c-tint); }
.before-download h3 { margin-bottom: .5em; }
.before-download ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.project__body .notice { margin-top: 24px; }
.entry-content > * + * { margin-top: 1em; }
.project__head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); margin-bottom: .35em; }
.list-plain .pill { margin-inline: 6px; }

/* guide + hub */
.guide__answer { margin: 0 0 8px; font-size: 1.125rem; }
.toc { margin-top: 32px; padding: 20px 24px; border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--shadow-card); background: var(--c-tile-2); }
.toc__title { margin: 0 0 .5em; }
.toc ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.guide .entry-content h2 { scroll-margin-top: 24px; margin-top: 1.6em; }
.hub__title { margin: 24px 0 .3em; }
.hub__pager { padding-block: 16px 64px; }
.pagination .nav-links, .hub__pager ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 32px 0 0; padding: 0; }
.pagination .page-numbers, .hub__pager a.page-numbers, .hub__pager span.page-numbers { display: inline-block; padding: 10px 18px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-card); text-decoration: none; font-weight: 500; }
.pagination .page-numbers.current, .hub__pager .page-numbers.current { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-mint); }
.catalog { margin-top: 32px; }
.tax-craft_topic .section__head h2, .single-post .section__head h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.hub__title, .archive .section h1, .blog .section h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
.archive .breadcrumbs, .blog .breadcrumbs, .tax-craft_topic .breadcrumbs { margin-bottom: 24px; }

/* collections + utility */
.collection__intro > * { margin: 0 0 1em; }
.linkrow { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.linkrow__item { display: inline-block; padding: 12px 22px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-card); color: var(--c-ink); font-weight: 500; text-decoration: none; }
.linkrow__item:hover { background: var(--c-mint); }
.step__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; margin-right: 12px; border: 1px solid var(--c-accent); border-radius: 50%; background: var(--c-mint); color: var(--c-accent); font-size: .6em; vertical-align: middle; }
.page__body { max-width: 760px; margin-inline: auto; padding-block: 24px 64px; }
.page__body h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); margin: 24px 0 .5em; }
.search-again { margin-block: 24px; max-width: 520px; }
.search-form { display: flex; gap: 8px; flex-wrap: wrap; }
.search-form label { flex: 1 1 200px; }
.search-form .search-field { width: 100%; padding: 14px 20px; border: 1px solid var(--c-line); border-radius: var(--r-pill); font: 500 1rem/1 var(--font-body); color: var(--c-ink); background: var(--c-card); }
.search-form .search-submit { padding: 14px 28px; border: var(--bw) solid var(--c-accent); border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-mint); font: 600 1rem/1 var(--font-body); cursor: pointer; }
.search-topics { margin-top: 40px; }
.notfound { text-align: center; display: flex; flex-direction: column; align-items: center; }
.notfound__art { width: min(100%, 360px); height: auto; margin-bottom: 16px; }
.notfound .hero__actions { justify-content: center; }
.notfound h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
.notfound .lead { margin-inline: auto; }
.notfound .search-again { width: 100%; }
.notfound .search-form { justify-content: center; }
.page .section__head h2, .search .section__head h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.search .breadcrumbs, .page .breadcrumbs { margin-bottom: 24px; }