/* The Release cards page: the latest release's cover beside its TL;DR, then the earlier releases
   as a list. A release card: its cover beside its opening, and its figures. Loaded on those pages,
   and on the blog's front page, which lists the posts in the same blocks (blog.css). Colors are
   --andrey-* tokens. */

/* ---------- the intro ---------- */
.bd-article section:has(> .release-latest) > h1 + p {
  max-width: 46rem;
  margin-bottom: 1.75rem;
  color: var(--andrey-muted);
  font-size: 1.05rem;
}

/* ---------- the cover and the tile: the brand's stipple ground ---------- */
/* A release without its own art shows the stipple ground in the covers' tones, shaded where the
   text sits (`release-ground.jpg`, site/cards.py), so it matches the art covers. `.bd-content
   .sd-card` is the theme's selector; the extra class wins over it. */
.bd-content .sd-card.release-cover,
.bd-content .sd-card.release-tile {
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background:
    url("release-ground.jpg?v=f3f1722d") center / cover no-repeat,
    var(--andrey-ground-navy);
  color: var(--andrey-ground-ink);
}

.bd-content .sd-card.release-cover .sd-card-body,
.bd-content .sd-card.release-tile .sd-card-body {
  display: flex;
  flex-direction: column;
  background: none;
}

.release-cover .sd-card-text,
.release-tile .sd-card-text {
  margin: 0;
  color: var(--andrey-ground-ink);
}

/* The card's link covers it; the ring goes round the cover, outside its clipped edge. */
.bd-content
  .sd-card:is(.release-cover, .release-tile)
  .sd-stretched-link:focus-visible::after {
  outline: none;
}

.release-cover:has(.sd-stretched-link:focus-visible),
.release-tile:has(.sd-stretched-link:focus-visible) {
  outline: 3px solid var(--andrey-accent);
  outline-offset: 3px;
}

/* The latest release's cover: a printed issue, bound on the left. A masthead along the top edge,
   the title below it, and the version at the bottom under an amber dot. */
.release-cover {
  aspect-ratio: 8.5 / 11;
  border-radius: 3px 7px 7px 3px;
  box-shadow:
    inset 5px 0 6px -3px color-mix(in srgb, var(--andrey-ground-navy) 75%, transparent),
    inset 6px 0 0 -5px color-mix(in srgb, var(--andrey-ground-ink) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--andrey-ground-navy) 22%, transparent),
    0 2px 3px color-mix(in srgb, var(--andrey-ground-navy) 16%, transparent),
    10px 22px 40px -16px color-mix(in srgb, var(--andrey-ground-navy) 55%, transparent);
}

html[data-theme="dark"] .release-cover {
  box-shadow:
    inset 5px 0 6px -3px color-mix(in srgb, var(--andrey-ground-navy) 75%, transparent),
    inset 6px 0 0 -5px color-mix(in srgb, var(--andrey-ground-ink) 22%, transparent),
    0 0 0 1px
      color-mix(in srgb, var(--andrey-ground-cobalt-light) 22%, transparent),
    10px 22px 44px -14px color-mix(in srgb, var(--andrey-ground-cobalt) 32%, transparent);
}

/* The release's own art, `release-cards/<release>.jpg`, in place of the ground; navy shows until it
   loads. The bare class keeps 0.2.0's art, which its released card uses; each later card, and
   each earlier release's tile, adds `release-art-<release>`. A tile shows the art's middle. */
.bd-content .sd-card.release-cover.release-art {
  background:
    url("release-cards/0.2.0.jpg?v=73d9e445") center / cover no-repeat,
    var(--andrey-ground-navy);
}

.bd-content .sd-card:is(.release-cover, .release-tile).release-art-0-2-0 {
  background:
    url("release-cards/0.2.0.jpg?v=73d9e445") center 62% / cover no-repeat,
    var(--andrey-ground-navy);
}

.bd-content .sd-card:is(.release-cover, .release-tile).release-art-0-3-0 {
  background:
    url("release-cards/0.3.0.jpg?v=4c2a11a8") center 62% / cover no-repeat,
    var(--andrey-ground-navy);
}

.bd-content .sd-card:is(.release-cover, .release-tile).release-art-0-4-0 {
  background:
    url("release-cards/0.4.0.jpg?v=bb8d575a") center 62% / cover no-repeat,
    var(--andrey-ground-navy);
}

.bd-content .sd-card:is(.release-cover, .release-tile).release-art-0-5-0 {
  background:
    url("release-cards/0.5.0.jpg?v=2e5c4406") center 62% / cover no-repeat,
    var(--andrey-ground-navy);
}

.bd-content .sd-card:is(.release-cover, .release-tile).release-art-0-6-0 {
  background:
    url("release-cards/0.6.0.jpg?v=2a4343d6") center 62% / cover no-repeat,
    var(--andrey-ground-navy);
}

.bd-content .sd-card:is(.release-cover, .release-tile).release-art-0-7-0 {
  background:
    url("release-cards/0.7.0.jpg?v=9454c9c6") center 62% / cover no-repeat,
    var(--andrey-ground-navy);
}

.bd-content .sd-card:is(.release-cover, .release-tile).release-art-0-8-0 {
  background:
    url("release-cards/0.8.0.jpg?v=c0995153") center 62% / cover no-repeat,
    var(--andrey-ground-navy);
}

.bd-content .sd-card:is(.release-cover, .release-tile).release-art-0-9-0 {
  background:
    url("release-cards/0.9.0.jpg?v=2380b03a") center 62% / cover no-repeat,
    var(--andrey-ground-navy);
}

.bd-content .sd-card.release-cover .sd-card-body {
  padding: 1.2rem 1.7rem 1.9rem 2.05rem;
}

.release-cover .sd-card-text:nth-of-type(1) {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid
    color-mix(in srgb, var(--andrey-ground-ink) 24%, transparent);
  color: color-mix(in srgb, var(--andrey-ground-ink) 82%, transparent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.release-cover .sd-card-text:nth-of-type(2) {
  max-width: 14rem;
  margin-top: 1.5rem;
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.release-cover .sd-card-text:nth-of-type(3) {
  margin-top: auto;
  font-size: 3.25rem;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.85;
}

/* The brand's node: one amber dot above the version (`DESIGN.md`, "Node and edge"). */
.release-cover .sd-card-text:nth-of-type(3)::before {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: var(--andrey-ground-amber);
}

/* An earlier release's tile: its art or the ground, square, the version at the bottom left. */
.release-tile {
  aspect-ratio: 1;
  border-radius: var(--andrey-radius-md);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--andrey-ground-navy) 20%, transparent),
    0 6px 14px -8px color-mix(in srgb, var(--andrey-ground-navy) 55%, transparent);
}

html[data-theme="dark"] .release-tile {
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--andrey-ground-cobalt-light) 22%, transparent);
}

.bd-content .sd-card.release-tile .sd-card-body {
  justify-content: flex-end;
  padding: 0.5rem 0.55rem 0.55rem 0.6rem;
}

.release-tile .sd-card-text {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ---------- the latest release: the cover beside its TL;DR ---------- */
.release-latest {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: 2.25rem;
  align-items: start;
  padding: 1.9rem 1.9rem 1.9rem 2.1rem;
  border: 1px solid var(--andrey-line);
  border-radius: var(--andrey-radius-lg);
  background: radial-gradient(
      36rem 26rem at 0% 0%,
      color-mix(in srgb, var(--andrey-accent) 8%, transparent),
      transparent 70%
    ),
    var(--andrey-surface);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--andrey-ground-navy) 6%, transparent),
    0 12px 32px -12px color-mix(in srgb, var(--andrey-ground-navy) 18%, transparent);
}

.release-tldr {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding-top: 0.25rem;
}

.release-tldr p,
.release-tldr ul {
  margin: 0;
}

/* The abstract. */
.release-tldr > p {
  color: var(--andrey-ink);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* The three numbers, each over what it counts. */
.release-stats ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  border-block: 1px solid var(--andrey-line);
  list-style: none;
}

.release-stats li {
  margin: 0;
  padding: 0.8rem 0.9rem 0.85rem 0;
  color: var(--andrey-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.release-stats li + li {
  padding-left: 0.9rem;
  border-left: 1px solid var(--andrey-line);
}

.release-stats strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--andrey-ink);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.release-meta a {
  font-weight: 500;
  text-decoration: none;
}

.release-meta a:hover {
  text-decoration: underline;
}

/* The card, and the post once it is out. */
.release-actions p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.release-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--andrey-line);
  border-radius: var(--andrey-radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.release-actions a {
  background: var(--andrey-surface);
  color: var(--andrey-ink);
  transition:
    background-color var(--andrey-dur) var(--andrey-ease),
    border-color var(--andrey-dur) var(--andrey-ease);
}

.release-actions a:hover {
  border-color: var(--andrey-accent);
  color: var(--andrey-ink);
  text-decoration: none;
}

.release-actions a:first-child {
  border-color: var(--andrey-ground-cobalt);
  background: var(--andrey-ground-cobalt);
  color: var(--andrey-ground-ink);
  font-weight: 600;
}

.release-actions a:first-child:hover {
  border-color: var(--andrey-ground-navy);
  background: color-mix(
    in srgb,
    var(--andrey-ground-cobalt) 82%,
    var(--andrey-ground-navy)
  );
  color: var(--andrey-ground-ink);
}

/* An arrow after each link to a page. */
.release-actions a::after,
.release-meta a::after {
  content: "";
  flex: none;
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: var(--release-arrow) center / contain no-repeat;
  mask: var(--release-arrow) center / contain no-repeat;
}

.release-latest,
.release-row {
  --release-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
}

.release-actions a:focus-visible,
.release-body a:focus-visible,
.release-meta a:focus-visible {
  outline: 2px solid var(--andrey-accent);
  outline-offset: 2px;
  border-radius: var(--andrey-radius-sm);
  box-shadow: none;
}

/* ---------- a release card: the cover beside the opening, then the figures ---------- */
/* The cover, at the size it takes on a narrow screen, floats at the start of the opening, and the
   text wraps round it. The card keeps sphinx-design's bottom margin, so only the others are set. */
.release-opening {
  display: flow-root;
  margin: 0.25rem 0 2rem;
}

.release-opening .release-cover {
  float: left;
  width: 13.5rem;
  margin-top: 0.35rem;
  margin-right: 2rem;
}

.bd-content .release-opening .sd-card.release-cover .sd-card-body {
  padding: 1rem 1.3rem 1.5rem 1.6rem;
}

.release-opening .release-cover .sd-card-text:nth-of-type(1) {
  font-size: 0.7rem;
}

.release-opening .release-cover .sd-card-text:nth-of-type(2) {
  margin-top: 1.1rem;
  font-size: 1.65rem;
}

.release-opening .release-cover .sd-card-text:nth-of-type(3) {
  font-size: 2.6rem;
}

.release-opening-text > p:first-child {
  margin-top: 0;
}

.release-opening-text > p:last-child {
  margin-bottom: 0;
}

/* The race takes the article's spacing, as in a post. */
.bd-article .race {
  margin: 2rem 0;
}

/* ---------- earlier releases ---------- */
.bd-article section:has(> .release-row) > h2 {
  margin: 2.75rem 0 0;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--andrey-line);
  color: var(--andrey-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.release-row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--andrey-line);
}

.release-row p,
.release-row ul {
  margin: 0;
}

.bd-article .release-body h3 {
  margin: 0.05rem 0 0.25rem;
  font-size: 1.12rem;
  font-weight: 600;
}

.release-body h3 a {
  color: var(--andrey-ink);
  text-decoration: none;
}

.release-body h3 a:hover {
  color: var(--andrey-accent);
}

.release-body > p {
  color: var(--andrey-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* The facts. */
.release-body ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-top: 0.45rem;
  padding: 0;
  color: var(--andrey-ink);
  font-size: 0.84rem;
  list-style: none;
}

.release-body li {
  margin: 0;
}

.release-body strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The date, then the card and the post. */
.release-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  padding-top: 0.15rem;
}

.release-meta > p {
  margin-bottom: 0.15rem;
  color: var(--andrey-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.release-meta ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  padding: 0;
  list-style: none;
}

.release-meta li {
  margin: 0;
}

.release-meta a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

/* The note under the list. */
.release-row ~ p {
  margin-top: 1.25rem;
  color: var(--andrey-muted);
  font-size: 0.88rem;
}

/* ---------- narrow screens: the cover over its TL;DR ---------- */
@media (max-width: 760px) {
  .release-latest {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.4rem 1.15rem 1.3rem;
  }

  .release-cover {
    justify-self: center;
    width: 13.5rem;
  }

  .release-opening .release-cover {
    float: none;
    margin: 0 auto;
  }

  .bd-content .sd-card.release-cover .sd-card-body {
    padding: 1rem 1.3rem 1.5rem 1.6rem;
  }

  .release-cover .sd-card-text:nth-of-type(1) {
    font-size: 0.7rem;
  }

  .release-cover .sd-card-text:nth-of-type(2) {
    margin-top: 1.1rem;
    font-size: 1.65rem;
  }

  .release-cover .sd-card-text:nth-of-type(3) {
    font-size: 2.6rem;
  }

  .release-stats ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .release-stats li,
  .release-stats li + li {
    padding: 0.55rem 0;
    border-left: 0;
  }

  .release-stats li + li {
    border-top: 1px solid var(--andrey-line);
  }

  .release-stats li p {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.75rem;
  }

  .release-stats strong {
    margin: 0;
    font-size: 1.2rem;
  }

  .release-row {
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 0.9rem;
  }

  .release-tile .sd-card-text {
    font-size: 0.8rem;
  }

  .release-meta {
    grid-column: 2;
    align-items: flex-start;
    padding-top: 0;
  }

  .release-meta ul {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .release-actions a {
    transition: none;
  }
}