/* ===================================================
   earthity — blog.css: the blog's library (/blog/) and post pages (/blog/<slug>/).
   Load after base.css.

   The pages are generated by blog/build/ from Sanity (blog/CLAUDE.md). Their markup lives in
   blog/build/templates/*.mjs and, for a post's body, blog/build/portable-text.mjs — rename a
   class here and rename it there. Design: Claude Design "Field Notes" (Library, Post A).
   =================================================== */

/* base.css gives html and body overflow-x: hidden. On body that makes it a scroll container of
   its own, and a sticky element inside one never sticks (it is the post rail's scroller, and it
   never scrolls). clip hides the same overflow without becoming a scroller. */
.blog-page { overflow-x: clip; }

.blog__container,
.post__container {
  max-width: 1216px;
  margin: 0 auto;
  padding-inline: var(--spacing-07);
}

/* The design's small metadata type. IBM Plex Mono is self-hosted at 400 and 500 only, so the
   design's 600 is 500 here. */
.blog-card__kicker,
.blog-card__meta,
.post__date,
.post__hero-caption,
.post__rail-label,
.post-related__kicker,
.post-related__date,
.article__caption,
.article__quote-source,
.article__note {
  font-family: var(--font-mono);
  letter-spacing: 0.32px;
}


/* ===================================================
   LIBRARY (/blog/)
   =================================================== */

.blog {
  background: var(--white);
  color: var(--eu-text-primary);
}

/* data-theme="dark" flips the tokens; the band still paints its own ground. Equal padding above
   and below, with the head centring the title and tagline on each other, so the title sits in the
   vertical middle of the band when there is no featured post. */
.blog__hero {
  padding-block: var(--spacing-10);
  background: var(--gray-100);
  color: var(--eu-text-primary);
}

.blog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-05) var(--spacing-07);
}
.blog__title { color: var(--white); }
.blog__tagline {
  max-width: 44ch;
  color: var(--gray-30);
}

.blog-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--spacing-09);
  margin-block: var(--spacing-06) var(--spacing-05);
  padding-top: var(--spacing-09);
  border-top: 1px solid var(--gray-80);
}
.blog-featured__copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06);
}
.blog-featured__title {
  color: var(--white);
  text-wrap: pretty;
}
.blog-featured__dek {
  max-width: 50ch;
  color: var(--gray-30);
}
/* The DS button reserves its trailing 64px for an icon; the arrow sits in it. */
.blog-featured__cta {
  position: relative;
  align-self: flex-start;
}
.blog-featured__cta .eu-icon {
  position: absolute;
  right: 20px;
}
.blog-featured__media {
  position: relative;
  display: block;
  min-height: 300px;
  background: var(--gray-90);
}
.blog-featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog__library { padding-block: var(--spacing-09) var(--spacing-12); }
.blog__empty { padding-block: var(--spacing-10); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-07);
  list-style: none;
}
.blog-grid__item { display: flex; }

/* An eu-tile laid out as a card: image flush to the edges, body padded below it. */
.blog-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0;
}
.blog-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--gray-20);
}
.blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-04);
  padding: 20px;
}
.blog-card__kicker {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--blue-60);
}
.blog-card__title {
  color: var(--eu-text-primary);
  text-wrap: pretty;
}
.blog-card__meta {
  margin-top: auto;
  padding-top: var(--spacing-03);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--gray-60);
}


/* ===================================================
   POST (/blog/<slug>/)
   =================================================== */

.post {
  background: var(--white);
  color: var(--eu-text-primary);
}

/* The hero leads the page when there is one; the header then sits a step below its caption. */
.post__hero { padding-top: var(--spacing-07); }
.post__header {
  max-width: 800px;
  padding-top: var(--spacing-07);
}
.post__hero + .post__header { padding-top: var(--spacing-09); }
.post__title {
  margin-bottom: var(--spacing-06);
  text-wrap: pretty;
}
.post__dek {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: var(--fw-light);
  line-height: 1.45;
  color: var(--gray-70);
  text-wrap: pretty;
}

.post__byline {
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
  margin-top: var(--spacing-08);
  padding-block: var(--spacing-05);
  border-block: 1px solid var(--gray-20);
}
.post__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  object-fit: cover;
}
.post__author-name { font-weight: var(--fw-semibold); }
.post__date {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gray-60);
}

.post__hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  background: var(--gray-10);
}
.post__hero-caption {
  max-width: 60ch;
  padding-top: var(--spacing-04);
  font-size: 11px;
  line-height: 1.5;
  color: var(--gray-60);
}

/* The article column with the rail beside it. The rail follows the article in the document
   (text first for a screen reader or a phone); on a wide screen it moves into the left column. */
.post__layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: var(--spacing-10);
  align-items: start;
  padding-block: var(--spacing-10) var(--spacing-12);
}
.post__layout > .article {
  grid-column: 2;
  grid-row: 1;
}

.post__rail {
  position: sticky;
  top: var(--spacing-07);
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06);
}
.post__rail-label {
  margin-bottom: var(--spacing-04);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gray-60);
}
.post__rail-block--read {
  padding-bottom: var(--spacing-06);
  border-bottom: 1px solid var(--gray-20);
}
.post__rail-block--read .post__rail-label { margin-bottom: var(--spacing-03); }
.post__rail-block:not(.post__rail-block--read) + .post__rail-block {
  padding-top: var(--spacing-06);
  border-top: 1px solid var(--gray-20);
}

.post__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-02);
  list-style: none;
}

.post__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-03);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--type-body-short-01-size);
  line-height: var(--type-body-short-01-lh);
  letter-spacing: var(--type-body-short-01-ls);
  color: var(--eu-link-primary);
  cursor: pointer;
}
.post__copy:hover { color: var(--eu-link-primary-hover); }
.post__copy:focus-visible {
  outline: 2px solid var(--eu-focus);
  outline-offset: 2px;
}
.post__copy-status {
  margin-top: var(--spacing-03);
  color: var(--eu-support-success);
}
.post__copy-status:empty { display: none; }
.post__copy-url {
  width: 100%;
  margin-top: var(--spacing-03);
  padding: 6px 8px;
  border: 1px solid var(--gray-30);
  background: var(--gray-10);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--eu-text-primary);
}

/* Reading progress, in CSS alone: both bars run on a view timeline of the article — empty when
   its first line reaches the top of the screen, full when its last line reaches the bottom.
   Where scroll-driven animations aren't supported the bars simply don't show. */
.read-progress,
.post__progress,
.post__rail-block--read { display: none; }
.read-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60; /* over the mobile menu (50) */
  height: 3px;
  pointer-events: none;
}
.post__progress {
  height: 2px;
  background: var(--gray-20);
}
.read-progress__bar,
.post__progress-bar {
  height: 100%;
  background: var(--blue-60);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@keyframes blog-read-progress {
  to { transform: scaleX(1); }
}
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  .post { timeline-scope: --post-article; }
  .post__layout > .article { view-timeline: --post-article block; }
  .read-progress,
  .post__progress,
  .post__rail-block--read { display: block; }
  .read-progress__bar,
  .post__progress-bar {
    animation: blog-read-progress linear both;
    animation-timeline: --post-article;
    animation-range: contain 0% contain 100%;
  }
}


/* ===================================================
   ARTICLE BODY — the Portable Text renderer's output
   Bare elements get their prose defaults through :where(), which weighs nothing, so each
   block's own class below always wins over them without a fight.
   =================================================== */

.article {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 672px;
}

:where(.article) p,
:where(.article) li {
  font-size: 1.0625rem;
  line-height: 1.65;
}
:where(.article) h2 {
  margin-top: 20px;
  font-size: var(--type-heading-03-size);
  font-weight: var(--type-heading-03-weight);
  line-height: var(--type-heading-03-lh);
  text-wrap: pretty;
}
:where(.article) h3 {
  margin-top: var(--spacing-04);
  font-size: var(--type-heading-04-size);
  font-weight: var(--type-heading-04-weight);
  line-height: var(--type-heading-04-lh);
  text-wrap: pretty;
}
:where(.article) strong { font-weight: var(--fw-semibold); }
:where(.article) a {
  color: var(--eu-link-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:where(.article) a:hover { color: var(--eu-link-primary-hover); }
:where(.article) code {
  padding: 1px 4px;
  background: var(--gray-10);
  font-family: var(--font-mono);
  font-size: 0.9em;
}
:where(.article) ul,
:where(.article) ol {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-03);
  padding-left: var(--spacing-06);
}
:where(.article) li > ul,
:where(.article) li > ol { margin-top: var(--spacing-03); }
:where(.article) li::marker { color: var(--gray-60); }

.article__blockquote {
  padding-left: var(--spacing-05);
  border-left: 2px solid var(--gray-20);
  color: var(--gray-70);
}

.article__figure {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-04);
}
.article__img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--gray-10);
}
.article__caption {
  max-width: 60ch;
  font-size: 11px;
  line-height: 1.5;
  color: var(--gray-60);
}

.article__quote {
  display: flex;
  flex-direction: column;
}
.article__quote-text {
  padding-block: var(--spacing-04);
  font-family: var(--font-brand);
  color: var(--gray-100);
}
.article__quote-text p {
  font-size: 1.75rem;
  font-weight: var(--fw-light);
  line-height: 1.3;
  text-wrap: pretty;
}
.article__quote-source {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gray-60);
}

.article__stats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  margin-block: var(--spacing-04);
}
/* The DS label asks for mono 600; 500 is the heaviest mono the site ships. */
.article__stat .eu-stat__label { font-weight: 500; }

.article__steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  list-style: none;
}
.article__step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  background: var(--gray-10);
}
.article__step-num {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--blue-60);
}
.article__step-title,
.article__step-text {
  font-size: var(--type-body-short-01-size);
  line-height: var(--type-body-short-01-lh);
  letter-spacing: var(--type-body-short-01-ls);
}
.article__step-title {
  margin-bottom: 6px;
  font-weight: var(--fw-semibold);
}
.article__step-text { color: var(--eu-text-secondary); }
.article__step-text + .article__step-text { margin-top: var(--spacing-03); }

.article__cta {
  display: flex;
  align-items: center;
  gap: var(--spacing-07);
  margin-block: var(--spacing-04);
  padding: var(--spacing-07);
  background: var(--gray-100);
  color: var(--eu-text-primary);
}
.article__cta-copy { flex: 1; }
.article__cta-title {
  margin-bottom: 6px;
  font-size: var(--type-body-short-01-size);
  font-weight: var(--fw-semibold);
  line-height: var(--type-body-short-01-lh);
  color: var(--white);
}
.article__cta-body {
  font-size: var(--type-caption-01-size);
  line-height: var(--type-caption-01-lh);
  letter-spacing: var(--type-caption-01-ls);
  color: var(--gray-30);
}
.article__cta-btn { flex: none; }

.article__note {
  margin-top: var(--spacing-04);
  padding-top: var(--spacing-06);
  border-top: 1px solid var(--gray-20);
  color: var(--gray-60);
}
.article__note-title,
.article__note-body {
  font-size: 11px;
  line-height: 1.6;
}
.article__note-title {
  font-weight: 500;
  text-transform: uppercase;
}
.article__note-body + .article__note-body { margin-top: var(--spacing-03); }


/* ===================================================
   RELATED
   =================================================== */

.post-related {
  padding-block: var(--spacing-10);
  border-top: 1px solid var(--gray-20);
  background: var(--gray-10);
}
.post-related__header .eu-section-header__bar { width: 64px; }
.post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-07);
  list-style: none;
}
.post-related__grid > li { display: flex; }
.post-related__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-04);
  padding: 20px;
}
.post-related__kicker {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--blue-60);
}
.post-related__title {
  color: var(--eu-text-primary);
  text-wrap: pretty;
}
.post-related__date {
  margin-top: auto;
  padding-top: var(--spacing-03);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--gray-60);
}


/* ===================================================
   SMALLER SCREENS
   =================================================== */

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .blog-featured { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the picture leads. It is a duplicate link hidden from assistive tech, so moving
     it changes nothing for the reading order. */
  .blog-featured__media {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .post__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--spacing-09);
  }
  .post__layout > .article { grid-column: 1; }
  .post__rail {
    position: static;
    grid-column: 1;
    grid-row: 2;
  }
  /* The bar across the top of the screen already shows progress; one below the text wouldn't. */
  .post__rail-block--read { display: none; }

  .post-related__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .blog__container,
  .post__container { padding-inline: var(--spacing-05); }

  .blog__hero { padding-block: var(--spacing-09); }
  .blog-featured__title { font-size: var(--type-heading-02-size); }
  .blog-grid { grid-template-columns: minmax(0, 1fr); }

  .post__title { font-size: var(--type-heading-02-size); }
  .post__dek { font-size: 1.125rem; }
  .post__byline { flex-wrap: wrap; }

  .article__stats { grid-auto-flow: row; }
  .article__cta {
    flex-direction: column;
    align-items: flex-start;
  }
}