/* Blog archive cards */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-5); }
.post-card { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: #fff; }
.post-card__media { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--color-surface-dark); text-decoration: none; }
.post-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.post-card:hover .post-card__media img { transform: scale(1.035); }
.post-card__placeholder { display: grid; place-items: center; block-size: 100%; color: rgba(255,255,255,.7); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .12em; background: radial-gradient(circle at 75% 30%, #4f52e0, transparent 35%), #14191f; }
.post-card__body { padding: var(--space-5); }
.post-card__meta { display: flex; gap: var(--space-2); margin-block-end: var(--space-3); color: var(--color-text-muted); font-size: var(--text-small); }
.post-card__title { font-size: var(--text-h3); line-height: 1.5; }
.post-card__title a { text-decoration: none; }
.post-card__body > p { margin-block-start: var(--space-3); color: var(--color-text-muted); }
.post-card__link { display: inline-block; margin-block-start: var(--space-4); color: var(--color-accent); font-weight: 700; text-decoration: none; }
.archive-body { padding-block: clamp(3rem, 7vw, 7rem); }
.archive-body .page-numbers { list-style: none; display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-7) 0 0; padding: 0; }
.archive-body .page-numbers a,
.archive-body .page-numbers .current { display: grid; place-items: center; min-inline-size: 2.6rem; min-block-size: 2.6rem; padding: .4rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); text-decoration: none; }
.archive-body .page-numbers .current { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.empty-state { padding: var(--space-8); text-align: center; border: 1px dashed var(--color-line-strong); border-radius: var(--radius-lg); }
.empty-state p { margin-block-start: var(--space-3); color: var(--color-text-muted); }

/* A rising half-dome carries the light page through blue into the black journal. */
.blog-transition { --bt: 0; --bt-y: 6vh; --bt-black: 0; position: relative; z-index: 4; block-size: 125vh; background: #fff; }
.blog-transition__sticky { position: sticky; inset-block-start: 0; block-size: 100vh; block-size: 100dvh; overflow: hidden; background: #fff; }
.blog-transition__sticky::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #000002; opacity: var(--bt-black); pointer-events: none; will-change: opacity; }
.blog-transition__field {
  position: absolute; inset-inline: -18vw; inset-block-start: 30vh; z-index: 1; block-size: 220vh;
  border-radius: 50% 50% 0 0 / 7% 7% 0 0;
  background: linear-gradient(to bottom,
    #fefeff 0%,
    #f8f9fe 5%,
    #edeffc 10%,
    #dfe3f9 15%,
    #cbd1f6 20%,
    #b8c0f2 25%,
    #9fabed 30%,
    #8292e8 35%,
    #6076e2 40%,
    #3e5ad8 45%,
    #163dca 50%,
    #032cba 55%,
    #0224a0 60%,
    #011e88 65%,
    #01166b 70%,
    #010e4f 75%,
    #010939 80%,
    #010420 85%,
    #01020f 90%,
    #000106 95%,
    #000002 100%);
  box-shadow: none;
  transform: translate3d(0, var(--bt-y), 0); will-change: transform;
}
.blog-transition__field::before { content: ""; position: absolute; inset: -18vh 12% auto; block-size: 30vh; border-radius: 50%; background: radial-gradient(ellipse at center,rgba(145,157,237,.3) 0%,rgba(190,198,248,.16) 38%,rgba(255,255,255,0) 74%); filter: blur(3.2rem); opacity: calc(.25 + var(--bt) * .55); pointer-events: none; }
/* Homepage journal: rows on the left, active featured image on the physical right. */
.blog-preview { position: relative; z-index: 5; min-block-size: 100vh; margin-block-start: 0; padding-block: clamp(2.75rem, 4vw, 4.5rem) clamp(5rem, 9vw, 9rem); background: #000108; color: #fff; }
.blog-preview__inner { max-inline-size: 90rem; opacity: var(--ba, 1); transform: translate3d(0, var(--ba-y, 0), 0); will-change: opacity, transform; }
.blog-preview__head { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .58fr); align-items: start; gap: clamp(3rem, 8vw, 9rem); direction: ltr; }
.blog-preview__title,
.blog-preview__intro { direction: rtl; }
.blog-preview__title > span { display: block; color: rgba(255,255,255,.22); font-size: clamp(2.5rem, 5.5vw, 6.5rem); font-weight: 900; line-height: .9; }
.blog-preview__title h2 { max-inline-size: 16ch; margin: 0; font-size: clamp(2.5rem, 5vw, 5.8rem); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.blog-preview__intro { padding-block-start: .5rem; color: rgba(255,255,255,.62); }
.blog-preview__intro p { line-height: 1.8; }
.blog-preview__all { display: inline-flex; margin-block-start: 1.6rem; padding: .75rem 1.7rem; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill); color: #fff; font-size: .8rem; text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); }
.blog-preview__all:hover { color: #101011; background: #fff; border-color: #fff; }
.blog-preview__layout { display: grid; grid-template-columns: minmax(30rem, 1fr) minmax(18rem, 24rem); align-items: center; gap: clamp(3rem, 8vw, 9rem); margin-block-start: clamp(4.75rem, 8vw, 8.5rem); direction: ltr; }
.blog-preview__list { min-inline-size: 0; direction: rtl; }
.blog-row { border-block-end: 1px solid rgba(255,255,255,.12); }
.blog-row:first-child { border-block-start: 1px solid rgba(255,255,255,.12); }
.blog-row a { display: grid; grid-template-columns: minmax(0,1fr) auto 1.5rem; align-items: center; gap: 1.4rem; min-block-size: 5.2rem; padding-block: .8rem; color: rgba(255,255,255,.56); text-decoration: none; transition: color var(--transition-fast), padding var(--transition-base); }
.blog-row__main { min-inline-size: 0; }
.blog-row time,
.blog-row__category { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; }
.blog-row time { display: block; margin-block-end: .15rem; color: rgba(255,255,255,.38); }
.blog-row h3 { margin: 0; overflow: hidden; color: rgba(255,255,255,.82); font-size: clamp(.95rem, 1.25vw, 1.2rem); font-weight: 600; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.blog-row__category { white-space: nowrap; }
.blog-row__arrow { opacity: 0; transform: translateX(8px); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.blog-row.is-active a,
.blog-row a:hover,
.blog-row a:focus-visible { color: #fff; padding-inline-start: .7rem; }
.blog-row.is-active h3 { color: #fff; }
.blog-row.is-active .blog-row__arrow,
.blog-row a:hover .blog-row__arrow,
.blog-row a:focus-visible .blog-row__arrow { opacity: 1; transform: none; }
.blog-preview__media { position: relative; aspect-ratio: 1.35; align-self: center; overflow: hidden; background: #171719; direction: rtl; }
.blog-preview__image { position: absolute; inset: 0; margin: 0; opacity: 0; clip-path: inset(8% 0 8% 0); transform: scale(1.045); transition: opacity 260ms ease, clip-path 520ms cubic-bezier(.2,.8,.2,1), transform 650ms cubic-bezier(.2,.8,.2,1); }
.blog-preview__image.is-active { opacity: 1; clip-path: inset(0); transform: none; }
.blog-preview__image img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.blog-preview__placeholder { display: grid; block-size: 100%; place-content: center; gap: .6rem; text-align: center; background: radial-gradient(circle at 70% 25%, #3b3fd0, transparent 34%), linear-gradient(145deg,#161729,#09090d); }
.blog-preview__placeholder b { font-family: var(--font-mono); font-size: clamp(2rem,5vw,4rem); letter-spacing: .12em; }
.blog-preview__placeholder small { color: rgba(255,255,255,.5); }
.blog-preview__empty { display: grid; grid-template-columns: auto 1fr; gap: 2rem; margin-block-start: 6rem; padding-block: 2rem; border-block: 1px solid rgba(255,255,255,.12); }
.blog-preview__empty > span { color: rgba(255,255,255,.2); font-family: var(--font-mono); font-size: 3rem; }
.blog-preview__empty h3 { margin: 0; font-size: var(--text-h3); }
.blog-preview__empty p { margin-block-start: .4rem; color: rgba(255,255,255,.5); }
@media (max-width: 63.99em) {
  .blog-transition { block-size: 115vh; }
  .blog-transition__field { transform: translate3d(0, var(--bt-y), 0); }
  .blog-preview__head { grid-template-columns: 1fr; gap: 2rem; }
  .blog-preview { margin-block-start: 0; padding-block-start: 3rem; }
  .blog-preview__layout { grid-template-columns: 1fr; gap: 2rem; margin-block-start: 4rem; }
  .blog-preview__media { grid-row: 1; inline-size: min(100%, 32rem); }
  .blog-preview__list { grid-row: 2; }
}
@media (max-width: 39.99em) {
  .blog-preview__title > span { font-size: 2.4rem; }
  .blog-preview__title h2 { font-size: 2.5rem; }
  .blog-row a { grid-template-columns: minmax(0,1fr) 1rem; gap: .75rem; }
  .blog-row__category { display: none; }
  .blog-preview__media { aspect-ratio: 16/10; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-transition { block-size: 52vh; background: linear-gradient(to bottom,#fefeff 0%,#dfe3f9 16%,#9fabed 30%,#3e5ad8 44%,#032cba 57%,#01166b 70%,#010420 84%,#000002 100%); }
  .blog-transition__sticky { display: none; }
  .blog-preview { margin-block-start: 0; }
  .blog-preview__inner { opacity: 1; transform: none; }
  .blog-preview__image { transition: none; }
}