@charset "UTF-8";

/*
 * Inner pages: the blog index and archives, posts, author profiles and the imported service
 * and location pages. Uses the tokens from site.css and the section grid from homepage.css.
 * Every size, weight, leading and tracking comes from a type role token.
 */

.site-main--standard,
.site-main--archive,
.site-main--article,
.site-main--page {
  padding: calc(var(--bh-header-height) + var(--bh-space-lg)) var(--bh-gutter) var(--bh-space-xl);
}

.site-main > .bh-grid + .bh-grid,
.site-main > section + section {
  margin-block-start: var(--bh-space-xl);
}

.page-hero {
  gap: 1rem;
}

.page-hero__title,
.article__title {
  grid-column: 1 / -1;
  max-width: 18ch;
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-statement);
  font-weight: var(--bh-weight-statement);
  line-height: var(--bh-leading-display);
  letter-spacing: var(--bh-tracking-display);
  text-wrap: balance;
}

.page-hero .eyebrow,
.page-hero .lede,
.page-hero .breadcrumbs,
.page-hero .filter-list,
.page-hero__filters,
.page-hero__actions,
.article__header > * {
  grid-column: 1 / -1;
}

.page-hero .lede {
  max-width: 60ch;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.eyebrow__count {
  margin-inline-start: 0.9rem;
  color: var(--bh-muted);
  letter-spacing: var(--bh-tracking-label);
}

.section-title {
  grid-column: 1 / -1;
  margin: 0 0 var(--bh-space-md);
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h2);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--bh-muted);
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--bh-ease-out);
}

.breadcrumbs a:hover {
  color: var(--bh-white);
}

.filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-start: 0.5rem;
}

.filter-list .is-active {
  background: var(--bh-white);
  color: var(--bh-black);
}

.filter-list .pill__count {
  margin-inline-start: 0.5em;
  opacity: 0.55;
}

/* Post cards ---------------------------------------------------------------- */

.post-grid {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--bh-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: color-mix(in srgb, var(--bh-white) 3%, transparent);
  transition: transform 0.55s var(--bh-ease-glide), border-color 0.35s var(--bh-ease-out), background 0.35s var(--bh-ease-out);
}

.post-card:hover {
  border-color: color-mix(in srgb, var(--bh-cyan) 55%, var(--bh-line));
  background: color-mix(in srgb, var(--bh-white) 5%, transparent);
  transform: translateY(-4px);
}

.post-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: color-mix(in srgb, var(--bh-white) 6%, transparent);
}

.post-card__media img,
.post-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--bh-ease-glide);
}

.post-card__placeholder {
  background:
    radial-gradient(circle at 30% 30%, rgb(24 217 255 / 35%), transparent 45%),
    radial-gradient(circle at 70% 70%, rgb(255 43 189 / 35%), transparent 45%),
    var(--bh-surface);
}

.post-card:hover .post-card__media img {
  transform: scale(1.04);
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.1rem 1.25rem 1.25rem;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-micro);
}

.post-card__meta > * + *::before {
  margin-inline-end: 0.5rem;
  color: var(--bh-line);
  content: "·";
}

.post-card__category {
  position: relative;
  z-index: 1;
  color: var(--bh-cyan);
  text-decoration: none;
}

.post-card__category:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.post-card__title {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-snug);
  letter-spacing: var(--bh-tracking-heading);
  transition: color 0.3s var(--bh-ease-out);
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
}

/* The title link covers the whole card; the category link sits above it. */
.post-card__title a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.post-card:hover .post-card__title {
  color: var(--bh-cyan);
}

.post-card__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.post-card__author {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: auto 0 0;
  padding-block-start: 0.85rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
}

/* The lead article ------------------------------------------------------------ */

.post-feature {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--bh-grid-gap);
  align-items: center;
  padding: clamp(0.85rem, 1.6vw, 1.25rem);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: color-mix(in srgb, var(--bh-white) 3%, transparent);
  transition: border-color 0.35s var(--bh-ease-out);
}

.post-feature:hover {
  border-color: color-mix(in srgb, var(--bh-cyan) 55%, var(--bh-line));
}

.post-feature__media {
  grid-column: 1 / span 7;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: calc(var(--bh-radius) - 0.4rem);
  background: color-mix(in srgb, var(--bh-white) 6%, transparent);
}

.post-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--bh-ease-glide);
}

.post-feature:hover .post-feature__media img {
  transform: scale(1.03);
}

.post-feature__body {
  grid-column: 8 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem 0.75rem 0.5rem 0.25rem;
}

.post-feature__flag {
  color: var(--bh-magenta);
}

.post-feature__title {
  max-width: 18ch;
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h2);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
  transition: color 0.3s var(--bh-ease-out);
}

.post-feature__title a {
  color: inherit;
  text-decoration: none;
}

.post-feature__title a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.post-feature:hover .post-feature__title {
  color: var(--bh-cyan);
}

.post-feature__excerpt {
  max-width: 52ch;
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

.post-feature__author {
  margin: 0;
  padding: 0;
}

.post-feature__role {
  opacity: 0.7;
}

.post-feature__role::before {
  content: " · ";
}

.post-feature__cta {
  margin-block-start: 0.25rem;
}

/* Archive furniture ------------------------------------------------------------- */

.archive {
  row-gap: var(--bh-space-md);
}

.archive__head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block-start: var(--bh-space-sm);
}

.archive__head .section-title {
  margin: 0;
}

.archive__page {
  margin: 0;
  color: var(--bh-muted);
}

.archive__empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}

.pagination {
  grid-column: 1 / -1;
  margin-block-start: var(--bh-space-md);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--bh-line);
  border-radius: 999px;
  color: var(--bh-white);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.3s var(--bh-ease-out), background 0.3s var(--bh-ease-out);
}

.pagination a.page-numbers:hover {
  border-color: var(--bh-cyan);
  background: color-mix(in srgb, var(--bh-cyan) 10%, transparent);
}

.pagination .page-numbers.current {
  background: var(--bh-white);
  color: var(--bh-black);
}

/* Author photos ------------------------------------------------------------------- */

.author-photo {
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bh-surface);
}

.author-photo--tiny {
  width: 1.6rem;
  height: 1.6rem;
}

.author-photo--small {
  width: 2.75rem;
  height: 2.75rem;
}

.author-photo--card {
  width: 6.5rem;
  height: 6.5rem;
}

.author-photo--large {
  width: clamp(8rem, 14vw, 12rem);
  height: clamp(8rem, 14vw, 12rem);
}

/* The same treatment as the team portraits on the About page. */
.author-photo__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.96);
}

/* Author profile (author pages) ----------------------------------------------- */

.page-hero--author .breadcrumbs {
  margin-block-end: 0.5rem;
}

.author-profile {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.author-profile__body .page-hero__title {
  max-width: none;
  margin-block: 0.25rem 0.75rem;
}

.author-profile__body .lede {
  max-width: 60ch;
  margin-block: 0.5rem 1.5rem;
}

.author-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.author-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin: 2rem 0 0;
}

.author-stats div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.author-stats dt {
  color: var(--bh-muted);
  font-size: var(--bh-step-micro);
}

.author-stats dd {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-figure);
  font-weight: var(--bh-weight-heading);
  line-height: 1;
  letter-spacing: var(--bh-tracking-display);
}

/* Article ------------------------------------------------------------------- */

.reading-progress {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
}

.reading-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--bh-cyan), var(--bh-magenta));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.article__header {
  row-gap: clamp(1rem, 2vw, 1.5rem);
}

.article__title {
  grid-column: 1 / span 10;
  max-width: 22ch;
  font-size: var(--bh-step-title);
}

.article__standfirst {
  grid-column: 1 / span 8;
  max-width: 60ch;
  margin: 0;
}

.article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-block-start: 0.5rem;
  padding-block: 1.1rem;
  border-block: 1px solid var(--bh-line);
}

.article__byline-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.article__author {
  color: var(--bh-white);
  font-size: var(--bh-step-small);
  font-weight: var(--bh-weight-heading);
  text-decoration: none;
}

.article__author:hover {
  color: var(--bh-cyan);
}

.article__role {
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
}

.article__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 0 0 0 auto;
}

.article__facts div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.article__facts dt {
  color: var(--bh-muted);
  font-size: var(--bh-step-micro);
}

.article__facts dd {
  margin: 0;
  color: var(--bh-white);
}

.article__figure {
  margin: clamp(0.5rem, 2vw, 1.25rem) 0 0;
}

.article__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--bh-radius);
  object-fit: cover;
}

.article__figure figcaption {
  margin-block-start: 0.75rem;
  color: var(--bh-muted);
}

.article__body {
  margin-block-start: var(--bh-space-lg);
  align-items: start;
  row-gap: var(--bh-space-lg);
}

.article__content {
  grid-column: 1 / span 8;
  min-width: 0;
}

.article__aside {
  grid-column: 10 / -1;
  min-width: 0;
}

.article__sticky {
  position: sticky;
  top: calc(var(--bh-header-height) + 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Table of contents */

.toc {
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: color-mix(in srgb, var(--bh-white) 3%, transparent);
}

.toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.toc__summary::-webkit-details-marker {
  display: none;
}

.toc__summary .eyebrow {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

.toc__count {
  color: var(--bh-muted);
  font-size: var(--bh-step-micro);
  white-space: nowrap;
}

.toc__list {
  max-height: min(48vh, 26rem);
  margin: 0;
  padding: 0 1.25rem 1.1rem;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
  counter-reset: toc;
  scrollbar-width: thin;
  scrollbar-color: var(--bh-line) transparent;
}

.toc__item {
  position: relative;
}

.toc__item--h2 {
  counter-increment: toc;
}

.toc__item--h3 {
  display: none;
}

.toc__item--h3.is-visible {
  display: block;
}

.toc__link {
  display: block;
  padding: 0.45rem 0 0.45rem 1.9rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-snug);
  text-decoration: none;
  transition: color 0.25s var(--bh-ease-out);
}

.toc__item--h2 > .toc__link::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62rem;
  color: var(--bh-cyan);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  content: counter(toc, decimal-leading-zero);
}

.toc__item--h2 > .toc__link::after {
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.55rem;
  width: 2px;
  border-radius: 2px;
  background: var(--bh-cyan);
  opacity: 0;
  transition: opacity 0.25s var(--bh-ease-out);
  content: "";
  transform: translateX(-1.25rem);
}

.toc__item--h3 .toc__link {
  padding: 0.3rem 0 0.3rem 3rem;
  font-size: var(--bh-step-micro);
}

.toc__link:hover,
.toc__link[aria-current="true"] {
  color: var(--bh-white);
}

.toc__link[aria-current="true"] {
  font-weight: var(--bh-weight-label);
}

/* Aside call to action */

.aside-card,
.author-card,
.cta-band,
.quote-card {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: color-mix(in srgb, var(--bh-white) 3%, transparent);
}

.aside-card--cta {
  background:
    radial-gradient(circle at 100% 0%, rgb(24 217 255 / 14%), transparent 55%),
    radial-gradient(circle at 0% 100%, rgb(255 43 189 / 12%), transparent 55%),
    color-mix(in srgb, var(--bh-white) 3%, transparent);
}

.aside-card__title {
  margin: 0.25rem 0 0.75rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
}

.aside-card p {
  margin: 0 0 1.25rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
}

.aside-card .eyebrow {
  margin-block-end: 0.5rem;
}

/* Share */

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.share__label {
  margin-inline-end: 0.35rem;
  color: var(--bh-muted);
}

.share__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--bh-line);
  border-radius: 999px;
  background: transparent;
  color: var(--bh-white);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-micro);
  font-weight: var(--bh-weight-label);
  letter-spacing: var(--bh-tracking-label);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s var(--bh-ease-out), background 0.3s var(--bh-ease-out), color 0.3s var(--bh-ease-out);
}

.share__link:hover {
  border-color: var(--bh-cyan);
  background: color-mix(in srgb, var(--bh-cyan) 10%, transparent);
}

.share__link.is-copied {
  border-color: var(--bh-magenta);
  color: var(--bh-magenta);
}

/* Article end: categories, share, author */

.article__end {
  display: grid;
  gap: 1.5rem;
  margin-block-start: var(--bh-space-lg);
  padding-block-start: var(--bh-space-md);
  border-block-start: 1px solid var(--bh-line);
}

.article__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.author-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-block-start: 0.5rem;
}

.author-card .eyebrow {
  margin-block-end: 0.5rem;
}

.author-card__name {
  margin: 0 0 0.2rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
}

.author-card__name a {
  color: inherit;
  text-decoration: none;
}

.author-card__name a:hover {
  color: var(--bh-cyan);
}

.author-card__role {
  margin: 0 0 0.85rem;
  color: var(--bh-cyan);
}

.author-card__bio {
  margin: 0 0 1.1rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

.author-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.author-card__more {
  color: var(--bh-white);
  font-size: var(--bh-step-small);
  text-decoration-color: var(--bh-cyan);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}

/* Neighbours and related */

.article__nav {
  margin-block-start: var(--bh-space-xl);
  padding-block: var(--bh-space-lg);
  border-block: 1px solid var(--bh-line);
}

.post-nav {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  color: var(--bh-white);
  text-decoration: none;
  transition: border-color 0.3s var(--bh-ease-out), background 0.3s var(--bh-ease-out);
}

.post-nav:hover {
  border-color: var(--bh-cyan);
  background: color-mix(in srgb, var(--bh-cyan) 8%, transparent);
}

.post-nav--next {
  align-items: flex-end;
  text-align: end;
}

.post-nav--next:only-child {
  grid-column: 7 / span 6;
}

.post-nav__label {
  color: var(--bh-muted);
}

.post-nav__title {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-snug);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
}

.related {
  margin-block-start: var(--bh-space-xl);
  row-gap: var(--bh-space-md);
}

.related__head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.related__head .section-title {
  margin: 0;
}

.related__head .eyebrow {
  margin-block-end: 0.75rem;
}

/* Long-form copy ------------------------------------------------------------ */

.prose {
  max-width: 68ch;
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
}

.prose--page {
  grid-column: 1 / span 9;
}

.prose > :first-child {
  margin-block-start: 0;
}

.prose h2,
.prose h3,
.prose h4,
.prose h5 {
  margin: 2.4em 0 0.7em;
  font-family: var(--bh-font-display);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
  scroll-margin-block-start: calc(var(--bh-header-height) + 1.5rem);
}

.prose h2 {
  font-size: var(--bh-step-h2);
}

.prose h3 {
  margin-block-start: 1.9em;
  font-size: var(--bh-step-h3);
}

.prose h4,
.prose h5 {
  margin-block-start: 1.6em;
  font-size: var(--bh-step-h4);
}

/* A short cyan rule marks the start of each section of an article. */
.prose--article h2::before {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-block-end: 1rem;
  border-radius: 2px;
  background: var(--bh-cyan);
  content: "";
}

/* Drop cap on the opening paragraph. */
.prose--article > p:first-child::first-letter {
  margin-inline-end: 0.1em;
  color: var(--bh-white);
  font-family: var(--bh-font-display);
  font-weight: var(--bh-weight-heading);
  initial-letter: 3;
}

@supports not (initial-letter: 3) {
  .prose--article > p:first-child::first-letter {
    float: inline-start;
    margin: 0.1em 0.12em 0 0;
    font-size: 3.1em;
    line-height: 0.82;
  }
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.25em;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.4em;
}

.prose li {
  margin-block-end: 0.45em;
  padding-inline-start: 0.2em;
}

.prose li::marker {
  color: var(--bh-cyan);
}

.prose ol li::marker {
  font-family: var(--bh-font-mono);
  font-size: 0.8em;
  font-weight: var(--bh-weight-label);
}

.prose a {
  color: var(--bh-white);
  text-decoration-color: var(--bh-cyan);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: color 0.25s var(--bh-ease-out);
}

.prose a:hover {
  color: var(--bh-cyan);
}

.prose strong {
  color: var(--bh-white);
  font-weight: var(--bh-weight-heading);
}

.prose figure {
  margin: 2.2em 0;
}

.prose img {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.2em 0;
  border-radius: var(--bh-radius);
}

.prose figure img {
  margin: 0;
}

.prose figcaption {
  margin-block-start: 0.75rem;
  color: var(--bh-muted);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.prose blockquote {
  margin: 2.2em 0;
  padding: 1.4rem 1.75rem;
  border-inline-start: 3px solid var(--bh-magenta);
  border-radius: 0 var(--bh-radius) var(--bh-radius) 0;
  background: color-mix(in srgb, var(--bh-white) 3%, transparent);
  color: var(--bh-white);
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-statement);
  line-height: var(--bh-leading-body);
  letter-spacing: var(--bh-tracking-heading);
}

.prose blockquote p {
  margin: 0;
}

.prose blockquote p + p {
  margin-block-start: 0.75em;
}

.prose hr {
  height: 1px;
  margin: 3em 0;
  border: 0;
  background: var(--bh-line);
}

.prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 2em 0;
  border: 0;
  border-radius: var(--bh-radius);
}

.table-scroll {
  margin: 2.2em 0;
  overflow-x: auto;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  scrollbar-width: thin;
}

.prose table {
  width: 100%;
  min-width: 34rem;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.92em;
  line-height: var(--bh-leading-body);
}

.prose th,
.prose td {
  padding: 0.8em 1em;
  border-block-end: 1px solid var(--bh-line);
  text-align: left;
  vertical-align: top;
}

.prose tr:last-child td {
  border-block-end: 0;
}

.prose th {
  background: color-mix(in srgb, var(--bh-white) 5%, transparent);
  color: var(--bh-white);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-micro);
  font-weight: var(--bh-weight-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.prose tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bh-white) 2%, transparent);
}

.prose code {
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--bh-white) 8%, transparent);
  font-family: var(--bh-font-mono);
  font-size: 0.85em;
}

.prose pre {
  margin: 2em 0;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: color-mix(in srgb, var(--bh-white) 4%, transparent);
  font-size: 0.85em;
  line-height: var(--bh-leading-body);
}

.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* The call to action placed between sections of long posts. */
.prose-cta {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  margin: 2.8em 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background:
    radial-gradient(circle at 100% 0%, rgb(24 217 255 / 14%), transparent 50%),
    radial-gradient(circle at 0% 100%, rgb(255 43 189 / 12%), transparent 50%),
    color-mix(in srgb, var(--bh-white) 3%, transparent);
}

.prose-cta .eyebrow {
  margin: 0 0 0.25rem;
}

.prose-cta__title {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
}

.prose-cta__copy {
  max-width: 48ch;
  margin: 0 0 0.75rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

/* Page furniture ------------------------------------------------------------ */

.link-grid {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-grid__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  color: var(--bh-white);
  font-family: var(--bh-font-display);
  font-weight: var(--bh-weight-heading);
  text-decoration: none;
  transition: border-color 0.3s var(--bh-ease-out), background 0.3s var(--bh-ease-out);
}

.link-grid__item:hover {
  border-color: var(--bh-cyan);
  background: rgb(24 217 255 / 6%);
}

.link-grid__arrow {
  display: inline-flex;
  width: 1.2rem;
  color: var(--bh-cyan);
}

.quote-grid {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--bh-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.quote-card {
  margin: 0;
}

.quote-card p {
  margin: 0 0 1rem;
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

.quote-card cite {
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  font-style: normal;
}

.map-embed {
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: var(--bh-radius);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: clamp(18rem, 45vw, 30rem);
  border: 0;
  filter: grayscale(1) invert(0.92) hue-rotate(180deg) contrast(0.9);
}

.faq__list {
  grid-column: 1 / span 9;
}

.faq__item {
  border-block-end: 1px solid var(--bh-line);
}

.faq__item summary {
  position: relative;
  padding: 1.1rem 3rem 1.1rem 0;
  cursor: pointer;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0.25rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  color: var(--bh-cyan);
  font-size: var(--bh-step-h3);
  font-weight: 300;
  transition: rotate 0.4s var(--bh-ease-glide);
}

.faq__item[open] summary::after {
  rotate: 45deg;
}

.faq__answer {
  max-width: 62ch;
  padding-block-end: 1.25rem;
  color: var(--bh-muted);
  line-height: var(--bh-leading-body);
}

.faq__answer p {
  margin: 0;
}

.cta-band {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background:
    radial-gradient(circle at 10% 0%, rgb(24 217 255 / 16%), transparent 45%),
    radial-gradient(circle at 90% 100%, rgb(255 43 189 / 16%), transparent 45%),
    color-mix(in srgb, var(--bh-white) 3%, transparent);
}

.cta-band > div {
  flex: 1 1 28rem;
}

.cta-band__title {
  max-width: 22ch;
  margin: 0.5rem 0 0.75rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h2);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
}

.cta-band p {
  margin: 0;
  color: var(--bh-muted);
}

/* Layout breakpoints ---------------------------------------------------------- */

@media (min-width: 60.01rem) {
  /* Beside the copy the contents list is always open; the summary is just a label. */
  .toc__summary {
    pointer-events: none;
  }
}

@media (max-width: 60rem) {
  .article__title,
  .article__standfirst,
  .article__content,
  .article__aside,
  .prose--page,
  .faq__list,
  .post-feature__media,
  .post-feature__body,
  .post-nav,
  .post-nav--next:only-child {
    grid-column: 1 / -1;
  }

  /* The aside dissolves: the contents list moves above the copy, the call to action below. */
  .article__aside,
  .article__sticky {
    display: contents;
  }

  .toc {
    order: -1;
  }

  .toc__summary::after {
    color: var(--bh-cyan);
    font-size: var(--bh-step-h3);
    font-weight: 300;
    line-height: 1;
    content: "+";
    transition: rotate 0.4s var(--bh-ease-glide);
  }

  .toc[open] .toc__summary::after {
    rotate: 45deg;
  }

  .share--aside {
    display: none;
  }

  .article__figure img {
    aspect-ratio: 16 / 10;
  }

  .article__facts {
    width: 100%;
    margin-inline-start: 0;
  }

  .author-card {
    grid-template-columns: 1fr;
  }

  .author-profile {
    grid-template-columns: 1fr;
  }

  .post-feature__body {
    padding: 0.5rem 0.5rem 0.75rem;
  }

  .post-feature__title {
    max-width: none;
  }
}

/* Structure modules (parts/structure-modules.php): hub indexes, clusters, place lists. --- */

.cluster {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.cluster__head {
  max-width: 44rem;
}

.cluster__head .lede {
  margin-block-start: 0.75rem;
}

.cluster__group {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  font-weight: var(--bh-weight-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-card {
  position: relative;
  display: grid;
  gap: 0.5rem;
  min-height: 100%;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  padding-inline-end: 3rem;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  color: var(--bh-white);
  text-decoration: none;
  background: color-mix(in srgb, var(--bh-white) 3%, transparent);
  transition: border-color 0.35s var(--bh-ease-out), background-color 0.35s var(--bh-ease-out), transform 0.45s var(--bh-ease-out);
}

.hub-card:hover,
.hub-card:focus-visible {
  border-color: color-mix(in srgb, var(--bh-magenta) 55%, transparent);
  background: color-mix(in srgb, var(--bh-magenta) 8%, transparent);
  transform: translateY(-3px);
}

.hub-card__title {
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight, 1.2);
  letter-spacing: var(--bh-tracking-heading);
  text-wrap: balance;
}

.hub-card__blurb {
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-body, 1.55);
}

.hub-card__arrow {
  position: absolute;
  inset-block-start: clamp(1.1rem, 2vw, 1.5rem);
  inset-inline-end: 1.1rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--bh-line);
  border-radius: 50%;
  transition: transform 0.4s var(--bh-ease-out), border-color 0.35s;
}

.hub-card__arrow svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-card:hover .hub-card__arrow {
  border-color: var(--bh-magenta);
  transform: translateX(3px);
}

.places {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.places a {
  color: var(--bh-white);
  text-decoration: none;
  border-block-end: 1px solid color-mix(in srgb, var(--bh-white) 22%, transparent);
  transition: border-color 0.3s, color 0.3s;
}

.places a:hover,
.places a:focus-visible {
  color: var(--bh-magenta);
  border-color: var(--bh-magenta);
}

.places--columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 0.6rem 1.5rem;
}

.places--wide {
  margin-block-start: 0.5rem;
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.place-table {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--bh-line);
}

.place-table__row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 2fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-block-end: 1px solid var(--bh-line);
}

.place-table__name {
  font-weight: var(--bh-weight-heading);
}

.place-table__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.place-table__links a {
  color: var(--bh-muted);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s;
}

.place-table__links a:hover,
.place-table__links a:focus-visible {
  color: var(--bh-magenta);
}

/* Topic links in the article calls to action. */
.prose-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.aside-card__related {
  margin: 0.9rem 0 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.aside-card__related a {
  color: var(--bh-white);
  text-decoration: none;
  border-block-end: 1px solid color-mix(in srgb, var(--bh-white) 30%, transparent);
}

.aside-card__related a:hover,
.aside-card__related a:focus-visible {
  color: var(--bh-magenta);
  border-color: var(--bh-magenta);
}

.page-hero__service {
  margin: 1.25rem 0 0;
}

/* Blog polish: pills inside prose, the contents list, the aside card, spacing. ---------- */

/* A pill inside the copy keeps its own ink; the prose link colour must not reach it. */
.prose a.pill {
  color: var(--bh-black);
  text-decoration: none;
}

.prose a.pill--secondary,
.prose a.pill--ghost {
  color: var(--bh-white);
}

@media (hover: hover) {
  .prose a.pill--primary:hover,
  .prose a.pill--primary:focus-visible {
    color: #05030a;
  }
}

/* The contents list: no box, a hairline, quiet numerals, the current section in ink. */
.toc {
  border: 0;
  border-radius: 0;
  background: none;
}

.toc__summary {
  padding: 0 0 0.85rem;
  border-block-end: 1px solid var(--bh-line);
}

.toc__count {
  display: none;
}

.toc__list {
  max-height: min(54vh, 30rem);
  padding: 0.85rem 0 0;
}

.toc__link {
  padding: 0.38rem 0 0.38rem 2.2rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-snug);
}

.toc__item--h2 > .toc__link::before {
  inset-block-start: 0.55rem;
  color: color-mix(in srgb, var(--bh-muted) 70%, transparent);
  transition: color 0.25s var(--bh-ease-out);
}

.toc__item--h2 > .toc__link::after {
  display: none;
}

.toc__link:hover,
.toc__link[aria-current="true"] {
  color: var(--bh-white);
}

.toc__item--h2 > .toc__link[aria-current="true"]::before,
.toc__item--h2 > .toc__link:hover::before {
  color: var(--bh-cyan);
}

.toc__item--h3 .toc__link {
  padding: 0.25rem 0 0.25rem 2.2rem;
  font-size: var(--bh-step-micro);
}

.article__sticky {
  gap: 2rem;
}

/* The aside call to action is an orb card: dark, the bubble, the white pill. */
.aside-card--cta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border-color: rgb(255 255 255 / 9%);
  background:
    radial-gradient(120% 95% at 100% 0%, #1a1031 0%, rgb(26 16 49 / 0%) 58%),
    #0b0712;
}

/* The bubble stays in the card's top-right corner, clear of the heading. */
.aside-card--cta .orb-card__bubble {
  --turn: 24deg;
  inset-inline-end: -26%;
  inset-block-start: -44%;
  width: 62%;
}

.aside-card--cta .orb-card__bubble--small {
  inset-inline-end: 30%;
  inset-block-start: 8%;
  width: 4%;
}

.aside-card--cta .eyebrow {
  margin-block-end: 0.75rem;
}

.aside-card--cta .aside-card__title {
  max-width: 14em;
  margin: 0 0 0.6rem;
}

.aside-card--cta p {
  max-width: 30ch;
  margin: 0 0 1.25rem;
}

.aside-card--cta .pill {
  align-self: flex-start;
}

.aside-card__related {
  display: grid;
  gap: 0.35rem;
  margin: 1.4rem 0 0;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--bh-line);
  text-transform: none;
  letter-spacing: 0;
}

.aside-card__related-label {
  color: var(--bh-muted);
  font-size: var(--bh-step-micro);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

.aside-card__related .text-link {
  width: fit-content;
  border-block-end: 1px solid var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  text-transform: uppercase;
}

/* The call to action between sections: dark, the still fading in from the right. */
.prose-cta {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  justify-items: stretch;
  gap: 0;
  margin: 3em 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--bh-line);
  background: #0b0712;
}

.prose-cta__body {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
}

.prose-cta__title {
  max-width: 12em;
}

.prose-cta__copy {
  max-width: 40ch;
  margin: 0 0 0.9rem;
}

/* `.prose figure` sets a vertical margin; this figure must reach the card's edges. */
.prose .prose-cta__media,
.prose-cta__media {
  position: relative;
  width: 100%;
  min-height: 15rem;
  margin: 0;
  align-self: stretch;
}

.prose .prose-cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 40%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}

@media (max-width: 47.99rem) {
  .prose-cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .prose-cta__media {
    order: -1;
    min-height: 11rem;
  }

  .prose .prose-cta__media img {
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent);
    mask-image: linear-gradient(180deg, #000 50%, transparent);
  }
}

/* When the aside dissolves into the article grid on narrow screens, its pieces span it
   (otherwise each drops into a single 40px column). */
@media (max-width: 60rem) {
  .toc,
  .aside-card--cta,
  .share--aside {
    grid-column: 1 / -1;
  }
}

/* The industry guides strip under an industry post (single.php). */

.industries {
  margin-block-start: var(--bh-space-lg);
  padding-block: var(--bh-space-lg);
}

.industries + .related {
  margin-block-start: 0;
}

.industries__list {
  grid-column: 1 / -1;
  font-size: var(--bh-step-body-lg);
}

/* The reference pages beside the blog: the guides hub, the glossary, the HTML sitemap and
   the budget calculator (inc/guides.php, parts/interior/guides.php, glossary.php,
   sitemap.php, calculator.php). ------------------------------------------------------ */

.guides .bh-grid,
.glossary .bh-grid {
  row-gap: var(--bh-space-lg);
}

.guides__index {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.guides__group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--bh-grid-gap);
  padding-block-start: var(--bh-space-md);
  border-block-start: 1px solid var(--bh-line);
}

.guides__head {
  grid-column: 1 / span 4;
}

.guides__head .eyebrow {
  margin-block-end: 0.6rem;
  color: var(--bh-cyan);
}

.guides__copy {
  max-width: 22rem;
  margin: 0.6rem 0 0;
  color: var(--bh-muted);
  line-height: var(--bh-leading-body);
}

.guides__list {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--bh-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide__link {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: color-mix(in srgb, #fff 72%, transparent);
  text-decoration: none;
  transition: border-color 0.35s var(--bh-ease-out), translate 0.5s var(--bh-ease-glide);
}

.guide__link:hover,
.guide__link:focus-visible {
  translate: 0 -3px;
  border-color: color-mix(in srgb, var(--bh-cyan) 55%, transparent);
}

.guide__title {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  line-height: var(--bh-leading-tight);
  text-wrap: balance;
}

.guide__copy {
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-body);
}

.guide__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: auto;
  padding-block-start: 0.5rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.guide__arrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 0.35s var(--bh-ease-out);
}

.guide__link:hover .guide__arrow svg {
  translate: 0.25rem 0;
}

/* Glossary: a definition list, two columns of terms. */
.glossary__list {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--bh-space-md) var(--bh-grid-gap);
  margin: 0;
}

.glossary__term {
  scroll-margin-top: calc(var(--bh-header-height) + 1rem);
}

.glossary__term dt {
  margin: 0 0 0.4rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h4);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  line-height: var(--bh-leading-tight);
}

.glossary__term dd {
  margin: 0;
  color: var(--bh-muted);
  line-height: var(--bh-leading-body);
  text-wrap: pretty;
}

.glossary__term dd p {
  margin: 0 0 0.5rem;
}

/* Sitemap: columns of plain lists. */
.sitemap__columns {
  grid-column: 1 / -1;
  columns: 3;
  column-gap: var(--bh-grid-gap);
}

.sitemap__group {
  break-inside: avoid;
  margin-block-end: var(--bh-space-md);
}

.sitemap__group .section-title {
  margin: 0 0 0.6rem;
  font-size: var(--bh-step-h4);
}

.sitemap__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap__list li {
  padding: 0.25rem 0;
  border-block-start: 1px solid var(--bh-line);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-body);
}

.sitemap__list a {
  text-decoration: none;
}

.sitemap__list a:hover,
.sitemap__list a:focus-visible {
  color: var(--bh-cyan);
}

/* Calculator: the inputs on the left, the result as a card on the right. */
.calculator .bh-grid {
  row-gap: var(--bh-space-lg);
}

.calculator__intro {
  grid-column: 1 / span 7;
}

.calculator__form {
  grid-column: 1 / span 6;
  display: grid;
  gap: 1.4rem;
  align-content: start;
}

.calculator__field label {
  display: block;
  margin-block-end: 0.4rem;
  font-weight: var(--bh-weight-heading);
}

.calculator__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-sm);
  background: color-mix(in srgb, #fff 80%, transparent);
  color: inherit;
  font: inherit;
  font-size: var(--bh-step-body-lg);
  font-variant-numeric: tabular-nums;
}

.calculator__field input:focus-visible {
  outline: 2px solid var(--bh-cyan);
  outline-offset: 2px;
}

.calculator__hint {
  margin: 0.4rem 0 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-body);
}

.calculator__result {
  grid-column: 8 / -1;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: color-mix(in srgb, #fff 72%, transparent);
  box-shadow: 0 1.4rem 3rem rgb(11 7 18 / 6%);
}

.calculator__label {
  margin: 0;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.calculator__figure {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-figure);
  font-weight: var(--bh-weight-statement);
  letter-spacing: var(--bh-tracking-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calculator__unit {
  font-size: var(--bh-step-body-lg);
  font-weight: var(--bh-weight-body);
  letter-spacing: 0;
  color: var(--bh-muted);
}

.calculator__range {
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.calculator__breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0.6rem 0 0;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--bh-line);
}

.calculator__breakdown dt {
  margin: 0 0 0.2rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
}

.calculator__breakdown dd {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  font-variant-numeric: tabular-nums;
}

.calculator__note {
  margin: 0.4rem 0 0.6rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-body);
}

.calculator__about {
  grid-column: 1 / span 8;
}

@media (max-width: 63.99rem) {
  .guides__head,
  .guides__list,
  .glossary__list,
  .calculator__intro,
  .calculator__form,
  .calculator__result,
  .calculator__about {
    grid-column: 1 / -1;
  }

  .sitemap__columns {
    columns: 2;
  }
}

@media (max-width: 47.99rem) {
  .sitemap__columns {
    columns: 1;
  }

  .calculator__breakdown {
    grid-template-columns: 1fr;
  }
}

/* More in this series (single.php): the post's guide group, as a plain list of the others. */
.series__copy {
  max-width: 28rem;
  margin: 0.5rem 0 0;
  color: var(--bh-muted);
  line-height: var(--bh-leading-body);
}

.series__list {
  grid-column: 1 / -1;
}


/* A still dropped into a long run of paragraphs (single.php). It takes the reading column's
   full width and a consistent crop, so it reads as a beat in the article rather than an
   illustration of the paragraph above it. */

.prose .prose__still {
  margin: 2.6em 0;
  padding: 0;
  overflow: hidden;
}

.prose .prose__still img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: inherit;
}