/* Match the Young Copy mark used on the interim v13 homepage. */
.variant-b {
  --navy: #17211f;
  --rust: #1f6b57;
  --paper: #f7f4ee;
  --white: #fff;
  --muted: #5e6c68;
  --line: #d9ded8;
  --wash: #ece8df;
  --green-dark: #104d40;
  --gold: #c8982d;
}

.variant-b .light {
  color: var(--gold);
}

.variant-b .primary:hover {
  background: var(--green-dark);
}

.variant-b .header .brand,
.expanded-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
}

.variant-b .header .brand > span,
.expanded-footer .brand > span {
  font-weight: 800;
}

.variant-b .header .brand {
  color: var(--navy);
}

.variant-b .header .brand-mark,
.expanded-footer .brand-mark {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.expanded-footer .brand {
  color: var(--paper);
}

.expanded-footer .brand-mark {
  border-color: currentColor;
}

/* Keep article typography and navigation aligned with the interim site. */
.blog-design {
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
}
.blog-design .header {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 12px max(32px, calc((100% - 1160px) / 2 + 32px));
  background: rgba(247, 244, 238, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  gap: 28px;
}
.blog-design .header nav { margin-left: auto; gap: 24px; font-size: 15px; font-weight: 700; }
.blog-design .header nav a:hover,
.blog-design .header nav a:focus-visible { color: var(--rust); }
.blog-design .header .persistent-cta { min-height: 42px; padding: 10px 18px; border-radius: 6px; font-size: 14px; font-weight: 800; }
.blog-design .post-heading { max-width: 860px; }
.blog-design .post-heading h1 { font-size: clamp(36px, 4.03vw, 58px); }

@media (min-width: 901px) and (max-width: 960px) {
  .blog-design .header { display: flex; flex-wrap: nowrap; min-height: 0; padding: 12px 18px; gap: 20px; }
  .blog-design .header .menu-button { display: none; }
  .blog-design .header nav { display: flex; flex-direction: row; align-items: center; order: 0; width: auto; max-height: none; margin-left: auto; padding: 0; gap: 16px; overflow: visible; }
  .blog-design .header nav a { padding: 0; border: 0; white-space: nowrap; font-size: 14px; }
  .blog-design .header .persistent-cta { width: auto; max-width: none; min-height: 42px; padding: 10px 14px; white-space: nowrap; font-size: 13px; }
}

@media (max-width: 900px) {
  .blog-design .header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    top: auto;
    padding: 10px 18px;
    gap: 10px 18px;
  }
  .blog-design .header nav {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-template-columns: none;
    gap: 8px 18px;
    width: 100%;
    max-height: none;
    margin: 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    overflow: visible;
    font-size: 14px;
  }
  .blog-design .header nav a { min-height: 24px; display: inline-flex; align-items: center; padding: 0; border: 0; white-space: normal; font-size: 14px; }
  .blog-design .header .persistent-cta { order: 0; flex: 0 0 auto; width: auto; max-width: none; white-space: nowrap; }
  .blog-design .header .menu-button { display: none; }
}
@media (max-width: 560px) {
  .blog-design .header nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }
  .blog-design .header .persistent-cta {
    order: 4;
    flex: 1 0 100%;
    width: 100%;
    max-width: none;
    min-height: 48px;
    padding: 10px 16px;
    justify-content: center;
  }
  .blog-design .header:has(.menu-button) .persistent-cta { font-size: 14px; }
}
@media (max-width: 620px) {
  .blog-design .post-heading h1 { font-size: 36px; }
}

/* Keep mobile navigation and footer link hit areas at least 24px tall without moving text. */
@media (max-width: 900px) {
  .blog-design .header nav a { padding-block: 3px; margin-block: -3px; }
  .expanded-footer nav a { padding-block: 2px; margin-block: -2px; }
}

/* The linked wordmark responds without adding motion. */
.blog-design .header .brand:hover{color:var(--rust)}
.blog-design .header .brand:hover .brand-mark{border-color:currentColor}
.blog-design .expanded-footer .brand:hover{color:#c8982d}
.blog-design .expanded-footer .brand:hover .brand-mark{border-color:currentColor}