/* Blog — extends landing.css. Load landing.css first for :root tokens,
   .wrap/.btn/.nav/.foot, and the sticky-nav/reveal JS hooks; this file only
   adds what the blog needs on top of that. */

/* ── Listing page intro ── */
.blog-intro { padding-top: 56px; }
.blog-intro__title { font-family: var(--font-serif); font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 14px; text-wrap: balance; }
.blog-intro__sub { font-family: var(--font-sans); font-size: 17px; color: var(--ink-soft); max-width: 54ch; margin: 0 0 40px; }

/* ── Featured post: full-bleed photo, headline overlaid directly on it.
   The image-led hero-with-overlay is the brand's sanctioned move for
   photo-forward content — no card chrome, no tag pill, category folds
   into the plain-text byline instead. ── */
.post-hero { display: block; position: relative; text-decoration: none; color: inherit; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lift); margin-bottom: 64px; }
.post-hero__art { display: block; width: 100%; aspect-ratio: 16/10; }
.post-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .95s var(--ease-cine); }
.post-hero:hover .post-hero__art img { transform: scale(1.03); }
.post-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,42,40,0) 38%, rgba(30,29,26,.55) 72%, rgba(20,19,17,.88) 100%);
}
.post-hero__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 28px 28px; }
.post-hero__meta { display: block; font-family: var(--font-sans); font-size: 13.5px; color: rgba(250,248,243,.82); margin: 0 0 10px; }
.post-hero__title { display: block; font-family: var(--font-serif); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.12; color: #FAF8F3; margin: 0 0 10px; max-width: 26ch; text-wrap: balance; }
.post-hero__excerpt { display: block; font-family: var(--font-sans); font-size: 16px; color: rgba(250,248,243,.88); max-width: 56ch; line-height: 1.5; margin: 0; }
@media (max-width: 640px) { .post-hero__excerpt { display: none; } }

/* ── The rest of the posts: a plain editorial list, not a repeated card
   grid — each row pairs a photo with text, divided by a rule, no
   boxes/shadows repeating the hero's treatment. ── */
.post-list { padding-bottom: 88px; }
.post-list__item {
  display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start;
  padding: 32px 0; text-decoration: none; color: inherit;
  border-top: 1px solid var(--line);
}
.post-list__item:last-child { border-bottom: 1px solid var(--line); }
.post-list__art { display: block; aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden; }
.post-list__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .85s var(--ease-cine); }
.post-list__item:hover .post-list__art img { transform: scale(1.04); }
.post-list__meta { display: block; font-family: var(--font-sans); font-size: 13px; color: var(--ink-faint); margin: 0 0 8px; }
.post-list__title { display: block; font-family: var(--font-serif); font-size: 24px; line-height: 1.25; letter-spacing: -.005em; margin: 0 0 8px; color: var(--ink); }
.post-list__excerpt { display: block; font-family: var(--font-sans); font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; max-width: 62ch; }
@media (max-width: 640px) {
  .post-list__item { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Article page ── */
.article-hero { position: relative; margin-bottom: 48px; }
.article-hero__art { display: block; width: 100%; aspect-ratio: 16/9; max-height: 560px; }
.article-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,42,40,0) 30%, rgba(30,29,26,.6) 68%, rgba(18,17,15,.9) 100%);
}
.article-hero__text {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 680px; margin: 0 auto; padding: 28px 20px 36px;
}
.article-hero__meta { display: block; font-family: var(--font-sans); font-size: 14px; color: rgba(250,248,243,.85); margin: 0 0 12px; }
.article-hero__title { font-family: var(--font-serif); font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; letter-spacing: -.01em; color: #FAF8F3; margin: 0; max-width: 24ch; text-wrap: balance; }
/* Top-right, with its own dark chip behind it, not bottom-right relying on
   the shared scrim: the title/meta anchor bottom-left and can wrap to 3
   lines on narrow screens, tall enough to reach a bottom-right credit at
   any viewport width -- two earlier attempts (bottom-right against the
   scrim alone, then position:static below the image on mobile, which grew
   .article-hero and dragged the inset:0 scrim down with it) both broke on
   mobile. Top-right never competes with that box, at any width, and the
   chip's own background means contrast doesn't depend on where the scrim
   happens to be light or dark under it. */
.article-hero__credit {
  position: absolute; right: 12px; top: 12px; margin: 0;
  font-family: var(--font-sans); font-size: 11px; color: rgba(250,248,243,.92);
  background: rgba(20,19,17,.45); padding: 4px 10px; border-radius: var(--r-pill);
}
.article-hero__credit a { color: inherit; }

.article-dek { max-width: 680px; margin: 0 auto 8px; font-family: var(--font-sans); font-size: 18px; color: var(--ink-soft); line-height: 1.55; padding: 0 20px; }

.article-body { max-width: 680px; margin: 0 auto; padding: 32px 20px 72px; font-family: var(--font-sans); }
.article-body p { font-size: 17.5px; line-height: 1.75; color: var(--ink); margin: 0 0 22px; text-wrap: pretty; }
.article-body h2 { font-family: var(--font-serif); font-size: 28px; line-height: 1.2; margin: 44px 0 16px; letter-spacing: -.005em; }
.article-body h3 { font-family: var(--font-sans); font-weight: 700; font-size: 19px; margin: 32px 0 12px; }
.article-body ul, .article-body ol { font-size: 17.5px; line-height: 1.7; color: var(--ink); padding-left: 24px; margin: 0 0 22px; }
.article-body li { margin-bottom: 8px; }
.article-body li::marker { color: var(--accent); }
.article-body blockquote {
  margin: 40px 0; padding: 0; font-family: var(--font-serif); font-style: italic;
  font-size: 23px; line-height: 1.45; color: var(--accent-deep); text-align: center;
}
.article-body strong { font-weight: 700; }
.article-body a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.article-body a:hover { text-decoration-color: currentColor; }
/* .article-cta's button is an <a> nested inside .article-body, so the prose
   link rule above (higher specificity than .btn/.btn--primary alone) was
   winning and rendering it as underlined accent-colored text instead of a
   solid button. Two classes here outrank .article-body a's one-class-plus-tag. */
.article-cta .btn { text-decoration: none; color: #fff; }
.article-cta .btn:hover { text-decoration: none; }

.article-cta {
  max-width: 680px; margin: 0 auto 72px; padding: 28px 28px 30px; background: var(--cream);
  border-radius: var(--r-lg); text-align: center;
}
.article-cta p { font-family: var(--font-sans); font-size: 15.5px; color: var(--ink-soft); margin: 0 0 16px; }

/* ── Keep reading: previous + next pointers side by side, not a repeated
   card grid — plain text with a photo thumbnail, same shape as the post
   list. Two columns keep each link's title from stretching across the full
   680px measure with nothing to its right, which is what a single centered
   link did before this was a pair. ── */
.keep-reading { padding: 0 0 88px; border-top: 1px solid var(--line); }
.keep-reading__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  max-width: 680px; margin: 0 auto;
}
.keep-reading__link {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center;
  text-decoration: none; color: inherit; padding-top: 32px; min-width: 0;
}
.keep-reading__art { display: block; aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden; }
.keep-reading__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.keep-reading__eyebrow { display: block; font-family: var(--font-sans); font-size: 12px; color: var(--ink-faint); margin: 0 0 6px; }
.keep-reading__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-family: var(--font-serif); font-size: 18px; line-height: 1.3; margin: 0; color: var(--ink);
}
@media (max-width: 640px) {
  .keep-reading__grid { grid-template-columns: 1fr; gap: 8px; }
  .keep-reading__link:last-child { padding-top: 16px; }
}

/* ═════════════════ Motion ═════════════════
   Everything here is additive polish on top of a page that already works.
   Same tokens as landing.css (--ease-out / --ease-out-soft), same .motion
   gate, and every block has a reduced-motion escape. Nothing below may be
   load-bearing for reading the page. */

/* ── Reading progress ──
   Only meaningful on long articles, so it's added by JS to article pages
   only. Sits above the sticky nav; scaleX is driven from JS via --p. */
.readbar {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: calc(var(--z-sticky) + 1);
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  will-change: transform; pointer-events: none;
  /* Short and linear on purpose. It smooths the per-frame steps into a glide
     without the bar visibly trailing the scroll — an eased curve here would
     make the indicator lie about where the reader actually is. */
  transition: transform .18s linear;
}
@media (prefers-reduced-motion: reduce) { .readbar { display: none; } }

/* ── Post list: stagger the rows in ──
   Reuses the .reveal/.is-in hooks landing.js already drives, so no new
   observer. --i is set by JS; the cap keeps row 20 from waiting a second. */
.motion .post-list .reveal { transition-delay: calc(var(--i, 0) * 150ms); }

/* ── Post rows: let the whole row respond, not just the thumbnail ── */
.post-list__item { transition: background-color .5s var(--ease-out-soft); }
.post-list__item:hover { background-color: color-mix(in srgb, var(--cream) 55%, transparent); }
.post-list__title { transition: color .35s var(--ease-out-soft); }
.post-list__item:hover .post-list__title { color: var(--accent-deep); }

/* ── Keep reading: lift the pair on hover ── */
.keep-reading__link { transition: transform .5s var(--ease-cine); }
.keep-reading__art img { transition: transform .95s var(--ease-cine); }
.keep-reading__link:hover { transform: translateY(-2px); }
.keep-reading__link:hover .keep-reading__art img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .keep-reading__link:hover { transform: none; }
  .keep-reading__link:hover .keep-reading__art img,
  .post-hero:hover .post-hero__art img,
  .post-list__item:hover .post-list__art img { transform: none; }
}

/* ── Article body: reveal structure, never paragraphs ──
   JS tags h2 / blockquote / .article-cta with .reveal, so landing.css's
   rule does the work. Only the travel and duration are overridden: 18px
   over .7s reads as an entrance, which is right for landing-page sections
   and too theatrical mid-article. Revealing every <p> was never on the
   table — text that animates in under the reader's eye fights them. */
.motion .article-body > h2.reveal,
.motion .article-body > blockquote.reveal,
.motion .article-cta.reveal {
  transform: translateY(24px) scale(.99);
  transition-duration: 1.15s;
}
.motion .article-body > h2.reveal.is-in,
.motion .article-body > blockquote.reveal.is-in,
.motion .article-cta.reveal.is-in { transform: none; }

/* ── Article hero: settle the image on load ── */
.motion .article-hero__art img { animation: heroSettle 2.6s var(--ease-cine) both; }
@keyframes heroSettle { from { transform: scale(1.07); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .motion .article-hero__art img { animation: none; }
}