/* Long-form layer over the gallery's tokens (../styles.css).
 *
 * The gallery is a grid you scan; a post is a column you read, so the only
 * things that change here are measure, rhythm, and the devices prose needs —
 * pull quotes, a claim block, a figure with a caption, a results table. The
 * palette, the ground, and the wordmark stay exactly as they are, because a
 * reader arriving from the gallery should not feel handed to a different site.
 */

.post {
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}

.post-head {
  max-width: 46rem;
  padding: 3rem 0 2rem;
}

.post-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 0.9rem;
}

.post-head h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0 0 1rem;
}

.standfirst {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 1.6rem;
  font-size: 0.85rem;
  color: var(--quiet);
}

/* The video is the argument, so it gets the full column width and sits before
   the first paragraph rather than illustrating one. */
.post-figure {
  margin: 0 0 2.6rem;
}

.post-figure video {
  width: 100%;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #05070c;
}

.post-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--quiet);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
}

.post-body {
  max-width: 46rem;
}

.post-body h2 {
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  margin: 2.8rem 0 0.9rem;
  text-wrap: balance;
}

.post-body p {
  font-size: 1.02rem;
  line-height: 1.68;
  margin: 0 0 1.1rem;
  color: #dfe6ee;
}

.post-body strong { color: var(--ink); }

.post-body a {
  color: var(--cyan);
  text-underline-offset: 3px;
}

/* The one claim the post exists to make. Used once. */
.claim {
  border-left: 3px solid var(--amber);
  background: linear-gradient(90deg, rgba(241, 191, 107, 0.10), transparent 70%);
  padding: 1rem 0 1rem 1.2rem;
  margin: 0 0 2rem;
  border-radius: 0 8px 8px 0;
}

.claim p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.6;
}

.results {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow-x: auto;
  margin: 0 0 1.6rem;
}

.results table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.94rem;
}

.results th,
.results td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
}

.results tr:last-child td { border-bottom: 0; }

.results th {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
  font-weight: 600;
}

.results td.n {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.results td.same { color: var(--cyan); }
.results td.diff { color: var(--amber); font-weight: 600; }

.post-body pre {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(5, 7, 12, 0.75);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0 0 1.4rem;
}

.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.post-body :not(pre) > code {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* Series navigation: a post in a series should say where it sits. */
.series-nav {
  max-width: 46rem;
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.92rem;
}

.series-nav a { color: var(--cyan); }
.series-nav .next { text-align: right; }
.series-nav .muted { color: var(--quiet); display: block; font-size: 0.8rem; }

/* Scoped to `.post-list` until that layout was removed, which left every `.tag`
   on the site unstyled while still being marked up — the kind of regression a
   dead-rule sweep causes if it only checks that the rule is unused. */
.tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- blog index

   The index used to be `<main class="post">` — literally an article, with the
   post list bolted into its body. That reads as one long page whatever is on
   it, and it does not get better as posts are added: there is nowhere for a
   date, nowhere for a thumbnail, and every series lands in the same column of
   prose. This is a separate layout so the index can grow along its own axis.  */

.blog {
  width: min(var(--max), 100% - 3rem);
  margin: 0 auto;
  padding: 3.5rem 0 5rem;
}

.blog-masthead {
  max-width: 44rem;
  margin-bottom: 3rem;
}

.blog-masthead .post-kicker { margin-bottom: 0.6rem; }

.blog-masthead h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.blog-masthead p {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0;
}

/* A series is a section of the index, not a page of its own — five posts do
   not justify five thin pages. The markup is self-contained so that when one
   series outgrows the index it can be lifted out without restyling. */
.blog-series { margin-top: 3rem; }

.blog-series > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}

.blog-series > header h2 {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0;
}

.blog-series > header p {
  margin: 0;
  color: var(--quiet);
  font-size: 0.9rem;
  text-align: right;
}

.blog-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease;
}

.blog-card:hover { border-color: rgba(112, 214, 209, 0.45); transform: translateY(-2px); }

/* No hover lift for anyone who asked not to be moved. */
@media (prefers-reduced-motion: reduce) {
  .blog-card { transition: border-color 140ms ease; }
  .blog-card:hover { transform: none; }
}

.blog-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  background: #0b1017;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.15rem 1.25rem 1.35rem;
  flex: 1;
}

.blog-card h3 {
  font-size: 1.1rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}

.blog-card h3 a { text-decoration: none; color: inherit; }
.blog-card h3 a:hover { color: var(--cyan); }

/* The whole card is the click target, not just the words in the heading. */
.blog-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.blog-card { position: relative; }

.blog-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--quiet);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog-meta .tag { margin: 0; }

.blog-card-footer { margin-top: auto; padding-top: 0.9rem; }

/* Announced but unwritten. Dimmed and not a link, so it cannot be mistaken for
   one — a card that looks clickable and is not is worse than no card. */
.blog-card.pending { opacity: 0.55; }
.blog-card.pending:hover { transform: none; border-color: var(--line); }

.blog-card.pending .blog-thumb-empty {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(
    135deg, transparent, transparent 9px,
    rgba(255, 255, 255, 0.035) 9px, rgba(255, 255, 255, 0.035) 18px);
}

@media (max-width: 640px) {
  .blog { width: min(var(--max), 100% - 2rem); padding-top: 2.5rem; }
  .blog-series > header { flex-direction: column; gap: 0.3rem; }
  .blog-series > header p { text-align: left; }
}

/* A dateline on the article pages themselves, so a post carries when it was
   written without the reader going back to the index to find out. */
.post-dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  color: var(--quiet);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}

.post-dateline .dot { opacity: 0.5; }