:root {
  --blog-accent-color: #16634e;
  --blog-paper-color: #fcfcfa;
  --blog-ink-color: #222b28;
}
.blog {
  --blog-reading-width: 760px;
  --blog-display-font: georgia, "Times New Roman", serif;
  background: var(--blog-canvas);
  color: var(--blog-foreground);
}

.blog a {
  color: var(--blog-link-color);
}

.blog :focus-visible {
  outline-color: var(--blog-accent-color);
}

.blog .blog__header {
  max-width: 1240px;
  padding-block: 30px;
  border-color: var(--blog-rule);
}

.blog .blog__brand {
  font-size: 1.65rem;
  font-weight: 750;
  color: var(--blog-foreground) !important;
}

.blog .blog__brand-dot {
  color: var(--blog-accent-color);
}

.blog .blog__nav {
  align-items: center;
  gap: 32px;
  font-size: 0.85rem;
}

.blog .blog__nav a {
  color: var(--blog-foreground);
}

.blog .blog__nav a:last-child {
  border: 1px solid var(--blog-rule);
  border-radius: 100px;
  padding: 7px 16px;
}

.blog .blog__main {
  max-width: 1240px;
}

.blog .blog__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center;
  gap: 32px;
  padding-block: 66px 56px;
  border-color: var(--blog-rule);
}

.blog .blog__eyebrow {
  color: var(--blog-link-color);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 750;
}

.blog .blog__intro h1 {
  font-family: var(--blog-display-font);
  font-size: clamp(4rem, 11vw, 9.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.075em;
  margin: 22px 0 25px;
}

.blog .blog__description {
  max-width: 570px;
  color: var(--blog-muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

.blog__emblem {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: var(--blog-accent-color);
  font-size: 14rem;
  line-height: 1;
  transform: rotate(-12deg);
}

.blog__emblem-orbit {
  position: absolute;
  width: 76%;
  height: 76%;
  border: 1px solid var(--blog-rule);
  border-radius: 50%;
  transform: rotate(30deg) scaleY(0.5);
}

.blog__section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-block: 30px 22px;
}

.blog__section-heading h2 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog__section-heading a {
  font-size: 0.8rem;
}

.blog .blog__articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.blog .blog-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 26px;
  border-color: var(--blog-rule);
  gap: 24px;
}

.blog .blog-card__image {
  width: 100%;
}

.blog .blog-card__image img {
  display: block;
  border-radius: 0;
  aspect-ratio: 1.8;
}

.blog-card__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.8;
  overflow: hidden;
  background: var(--blog-ink-color);
  color: var(--blog-paper-color) !important;
}

.blog-card__art-mark {
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 1;
  color: var(--blog-accent-color);
  transform: rotate(15deg);
}

.blog-card__art-index {
  position: absolute;
  inset-inline-start: 24px;
  inset-block-start: 20px;
  font-family: var(--blog-display-font);
  font-size: 1.6rem;
  font-style: italic;
}

.blog-card__art-caption {
  position: absolute;
  inset-inline-start: 24px;
  inset-block-end: 18px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog .blog-card:nth-child(2) .blog-card__art {
  background: var(--blog-accent-color);
}

.blog
  .blog-card:nth-child(2)
  .blog-card__art-mark {
  color: var(--blog-paper-color);
  transform: rotate(45deg) scale(1.25);
}

.blog .blog-card:nth-child(3) .blog-card__art {
  background: color-mix(
    in srgb,
    var(--blog-ink-color) 12%,
    var(--blog-paper-color)
  );
  color: var(--blog-ink-color) !important;
}

.blog
  .blog-card:nth-child(3)
  .blog-card__art-mark {
  color: var(--blog-ink-color);
  transform: rotate(-25deg) scale(1.3);
}

.blog .blog-card h2 {
  font-family: var(--blog-display-font);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.045em;
  margin-block: 18px;
}

.blog .blog-card h2 a {
  color: var(--blog-foreground);
}

.blog .blog-card__excerpt {
  color: var(--blog-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.blog .blog__meta {
  color: var(--blog-muted);
  font-size: 0.72rem;
}

.blog .blog__badge {
  color: var(--blog-link-color);
  background: transparent;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
}

.blog .blog-card__footer {
  font-size: 0.76rem;
  padding-top: 12px;
  border-top: 1px solid var(--blog-rule);
}

.blog .blog-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: var(--blog-ink-color);
  border: 0;
  padding: 0;
  color: var(--blog-paper-color);
}

.blog .blog-card:first-child .blog-card__content {
  padding: clamp(24px, 4vw, 52px);
}

.blog .blog-card:first-child .blog-card__art,
.blog
  .blog-card:first-child
  .blog-card__image
  img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 380px;
  border-inline-end: 1px solid
    color-mix(in srgb, var(--blog-paper-color) 22%, transparent);
}

.blog .blog-card:first-child .blog-card__art-mark {
  font-size: clamp(14rem, 30vw, 26rem);
  transform: rotate(-12deg);
}

.blog .blog-card:first-child h2 a,
.blog .blog-card:first-child .blog-card__footer a {
  color: var(--blog-paper-color);
}

.blog .blog-card:first-child h2 {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
}

.blog .blog-card:first-child .blog-card__excerpt,
.blog .blog-card:first-child .blog__meta {
  color: color-mix(in srgb, var(--blog-paper-color) 80%, var(--blog-ink-color));
}

.blog .blog-card:first-child .blog__badge {
  color: var(--blog-paper-color);
}

.blog .blog-card:first-child .blog-card__footer {
  border-color: color-mix(
    in srgb,
    var(--blog-paper-color) 25%,
    var(--blog-ink-color)
  );
}

.blog .blog-article__header {
  border-color: var(--blog-rule);
  padding-top: 64px;
}

.blog .blog-article h1 {
  font-family: var(--blog-display-font);
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.blog .blog-article__standfirst {
  color: var(--blog-muted);
  font-size: 1.2rem;
}

.blog .blog-article__body h2 {
  font-family: var(--blog-display-font);
  font-size: 2rem;
  font-weight: 400;
}

.blog .blog-article__body blockquote {
  border-color: var(--blog-accent-color);
  color: var(--blog-muted);
  font-style: italic;
}

.blog .blog-article__body pre {
  background: color-mix(in srgb, var(--blog-foreground) 6%, var(--blog-canvas));
  border-color: var(--blog-rule);
}

.blog .blog-discussion {
  border-color: var(--blog-rule);
}

.blog .blog-discussion__heading h2 {
  font-family: var(--blog-display-font);
  font-size: 2.4rem;
  font-weight: 400;
}

.blog .blog-discussion p,
.blog .blog__updated {
  color: var(--blog-muted);
}

.blog .blog__footer {
  max-width: 1240px;
  padding-block: 36px;
  margin-top: 48px;
  border-color: var(--blog-rule);
  color: var(--blog-muted);
}

.blog .blog__empty {
  grid-column: 1 / -1;
}

@media (width <= 700px) {
  .blog .blog__intro {
    grid-template-columns: 1fr;
    padding-block: 42px 26px;
  }

  .blog__emblem {
    display: none;
  }

  .blog .blog__intro h1 {
    font-size: clamp(3.5rem, 18vw, 7rem);
  }

  .blog .blog__articles {
    grid-template-columns: 1fr;
  }

  .blog .blog-card:first-child {
    grid-template-columns: 1fr;
  }

  .blog .blog-card:first-child .blog-card__art,
  .blog
    .blog-card:first-child
    .blog-card__image
    img {
    aspect-ratio: 1.6;
    min-height: 0;
    border: 0;
    height: auto;
  }

  .blog
    .blog-card:first-child
    .blog-card__content {
    padding: 24px;
  }

  .blog .blog__nav {
    gap: 20px;
  }
}

.blog {
  --blog-display-font:
    system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
}

.blog .blog__brand {
  font-family:
    ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
}

.blog .blog__brand::before {
  content: ">_";
  font-size: 0.85em;
  color: var(--blog-link-color);
}

.blog .blog__brand-dot {
  display: none;
}

.blog .blog__intro h1 {
  font-family:
    ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(2.8rem, 9vw, 7rem);
  font-weight: 700;
  letter-spacing: normal;
}

.blog .blog__eyebrow,
.blog .blog__section-heading,
.blog .blog-card__art-caption {
  font-family:
    ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.blog .blog__emblem span,
.blog .blog-card__art-mark {
  display: none;
}

.blog .blog__emblem::before {
  content: ">_";
  font:
    700 5rem ui-monospace,
    monospace;
  color: var(--blog-canvas);
}

.blog .blog-card__art::after {
  content: "$ _";
  position: absolute;
  inset: 25% 12%;
  font:
    700 clamp(3rem, 7vw, 6rem) ui-monospace,
    monospace;
  color: inherit;
}

.blog .blog-card h2,
.blog .blog-article__header h1 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

.blog .blog-article__body {
  font-family: var(--blog-display-font);
  font-size: 1.1rem;
  line-height: 1.8;
}

.blog .blog-article__body h2,
.blog .blog-discussion__heading h2 {
  font-weight: 700;
}

.blog .blog__emblem {
  background: var(--blog-foreground);
  border-radius: 18px;
  transform: rotate(4deg);
  box-shadow: 0 18px 0 var(--blog-tint);
}

.blog .profiler-results {
  display: none;
}