/* =====================================================================
   lverbeeck.com - blog.css
   Page-specific styles for the Journal listing (blog.html) and the
   article template (blog/<slug>.html). Loaded AFTER base.css on those
   two page types only. Reuses base tokens, .container, .posts/.post,
   .img-ph, .label, .arrow-link and the .reveal animation system.
   No external requests.
   ===================================================================== */

/* ============================================================ LISTING
   Tumbled giant serif "JRNL" header - a smaller-scale reuse of the
   homepage hero .hl letters technique. */
.jrnl-hero {
  /* clear the fixed header, then give the composition room to breathe */
  padding-top: calc(var(--header-h) + clamp(36px, 7vw, 84px));
}
.jrnl-letters {
  display: flex;
  align-items: flex-end;
  font-family: var(--serif);
  font-weight: 300;
  line-height: .7;
  /* deliberately smaller than the homepage hero (34vw / 30rem max) */
  font-size: clamp(4rem, 16vw, 13rem);
  color: var(--ink);
  margin-left: -.03em;
  margin-bottom: -.03em;          /* let baselines kiss the rule below */
  user-select: none;
  pointer-events: none;
}
/* individual tumbled letters, scattered like the reference OGAKI/JRNL.
   Final transform stored per letter in --rot/--ty (+ --drop stagger), same
   mechanism as the homepage hero .hl letters in base.css. */
.jl {
  display: inline-block;
  transform-origin: bottom center;
  transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0));
}
.jl--j { --rot: -6deg; --ty: 3%;  --drop: 0ms; }
.jl--r { --rot: 7deg;  --ty: -7%; --drop: 110ms; margin-left: -.02em; }
.jl--n { --rot: -8deg; --ty: 5%;  --drop: 220ms; margin-left: -.01em; }
.jl--l { --rot: 5deg;  --ty: -4%; --drop: 330ms; margin-left: -.02em; }

/* JS drop-in: start upright, tumble into place on .letters-drop (mirrors the
   homepage hero). --fall-ease is defined in base.css (loaded first). */
html.js .jrnl-letters .jl {
  transform: none;
  transition: transform .9s var(--fall-ease);
  transition-delay: var(--drop, 0ms);
  will-change: transform;
}
html.js .jrnl-letters.letters-drop .jl {
  transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0));
}

/* Reduced motion: render the tumbled final state immediately, no animation. */
@media (prefers-reduced-motion: reduce) {
  html.js .jrnl-letters .jl {
    transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0));
    transition: none;
  }
}

/* meta row under the rule: THE JOURNAL / centre line / month-year */
.jrnl-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 12px 24px;
  margin-top: clamp(16px, 2.2vw, 26px);
}
.jrnl-meta__item {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}
.jrnl-meta__item:nth-child(1) { justify-self: start;  text-align: left; }
.jrnl-meta__item:nth-child(2) { justify-self: center; text-align: center; }
.jrnl-meta__item:nth-child(3) { justify-self: end;    text-align: right; }

/* ------------------------------------------------ listing post grid
   Reuse base .posts (2-up) + .post; scale titles up for an index page,
   darken the category label, and open up the row gap for 3 rows. */
.blog-list .posts {
  column-gap: clamp(20px, 1.7vw, 24px);   /* tight gutter, as reference */
  row-gap: clamp(52px, 8vw, 96px);
}
/* Journal illustration: two-tone ink line-art centred on the --bg-alt tint mat,
   framed exactly like the approved sample sheet. Shared by the listing cards
   and the article header. object-fit: contain keeps the whole drawing visible. */
.post-art {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 7;              /* near-square listing mat (was the img-ph ratio) */
  object-fit: contain;
  padding: 9%;
  background-color: var(--bg-alt);
  border: 1px solid var(--rule);
}
.blog-list .post__cat { color: var(--ink); }
.blog-list .post__title {
  font-size: clamp(1.75rem, 2.4vw + .75rem, 2.6rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  max-width: 20ch;
}
.blog-list .post__excerpt { max-width: 46ch; }

/* ============================================================ ARTICLE
   Narrow editorial column (~720px content width). */
.article {
  padding-top: calc(var(--header-h) + clamp(44px, 9vw, 104px));
  padding-bottom: clamp(72px, 11vw, 150px);
}
.article__col { max-width: 720px; margin-inline: auto; }

.article__head { margin-bottom: clamp(36px, 5vw, 60px); }
.article__meta {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.article__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4vw + .55rem, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-top: clamp(18px, 2vw, 28px);
  max-width: 18ch;
}

/* article-header illustration: the same line-art on a wider banner mat, set
   between the title and the body, full column width. */
.article__art { margin-bottom: clamp(32px, 5vw, 56px); }
.article__art .post-art {
  aspect-ratio: 16 / 9;
  padding: 6% 10%;
}

/* ------------------------------------------------ richtext body */
.article__body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1875rem, .5vw + 1.05rem, 1.25rem);  /* 19-20px */
  line-height: 1.65;
  color: var(--ink);
}
.article__body > :first-child { margin-top: 0; }
.article__body p { margin-top: 1.35em; }

.article__body h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.65rem, 1.6vw + 1.15rem, 2rem);      /* ~32px */
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-top: 1.9em;
  margin-bottom: .05em;
}
.article__body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, .9vw + 1.05rem, 1.5rem);      /* ~24px */
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-top: 1.7em;
  margin-bottom: .05em;
}

.article__body ul { margin-top: 1.2em; padding-left: 0; }
.article__body li {
  position: relative;
  padding-left: 1.5em;
  margin-top: .7em;
  line-height: 1.5;
}
.article__body li::before {          /* hairline dash marker */
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: .8em;
  height: 1px;
  background: var(--ink);
}
.article__body li strong { font-weight: 600; }
.article__body strong { font-weight: 600; }

.article__body blockquote {
  position: relative;
  margin: 2.9em 0 1.6em;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.6vw + 1.05rem, 2rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}
/* small brand mark centered above the blockquote's top hairline rule */
.article__body blockquote::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -150%);
  width: 26px;
  height: 26px;
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20fill='none'%20stroke='%23221F20'%20stroke-width='3.4'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M50%206%2088.11%2028%2088.11%2072%2050%2094%2011.89%2072%2011.89%2028Z'/%3E%3Cpath%20d='M11.89%2028%2050%2094%2088.11%2028'/%3E%3C/svg%3E") center / contain no-repeat;
}

.article__body a {
  border-bottom: 1px solid var(--rule);
  transition: border-color .25s var(--ease);
}
.article__body a:hover { border-color: var(--ink); }

/* ------------------------------------------------ end-of-article CTA */
.article__cta {
  margin-top: clamp(56px, 8vw, 88px);
  padding-top: clamp(40px, 6vw, 60px);
  border-top: 1px solid var(--rule);
}
.article__cta-kicker { color: var(--ink-soft); margin-bottom: 18px; }
.article__cta-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw + .9rem, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: clamp(22px, 3vw, 32px);
  max-width: 16ch;
}

/* ============================================================ Responsive
   base.css already collapses .posts to 1 col at 820px and handles the
   header burger. Here we only tidy the meta row and letter scale. */
@media (max-width: 600px) {
  .jrnl-meta {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .jrnl-meta__item:nth-child(2),
  .jrnl-meta__item:nth-child(3) {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 400px) {
  /* keep the four tumbled letters on one line at 360px */
  .jrnl-letters { font-size: clamp(3.4rem, 20vw, 5rem); }
}