.journal-head, .journal, .journal-prose { --measure: 62ch; }

.journal-post__dateline {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--tight-gap) var(--head-gap);
  margin: 0 auto; max-width: var(--measure);
  font-size: var(--f-2); letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-soft);
}

.journal {
  --journal-lane: calc(var(--measure) * var(--phi));
  background: var(--surface); padding-inline: var(--gutter);
}
.journal__inner { width: min(100%, var(--journal-lane)); margin-inline: auto; }

.journal__toolbar {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--tight-gap) var(--head-gap);
  padding-bottom: var(--head-gap); border-bottom: 1px solid var(--accent);
}
.journal__count {
  margin: 0; max-width: var(--measure);
  font-size: var(--f-2); letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}

.journal__list { list-style: none; margin: 0; padding: 0; }
.journal__row { border-bottom: 1px solid var(--hairline); }

.journal__link {
  color: var(--ink); text-decoration: none;
  display: grid; gap: var(--stack-gap); padding: var(--head-gap) 0;
}
.journal__link:hover { background: var(--surface); }
.journal__date {
  font-size: var(--f-1); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.journal__title { font-weight: 600; }
.journal__dek { max-width: var(--measure); margin: var(--tight-gap) 0 0; }
.journal__empty { max-width: var(--measure); margin: var(--inset) auto 0; }

.journal__card { --ratio-post: 3 / 2; aspect-ratio: var(--ratio-post); width: min(100%, calc(var(--measure) / var(--phi))); }

img.journal__card { display: block; object-fit: cover;
                    object-position: var(--focal); }

img.journal__card--upright { object-fit: contain; object-position: 50% 50%;
                             background: var(--hairline); }

.journal-prose { background: var(--paper); padding-inline: var(--gutter); }

.journal-prose__lane {

  --journal-post-lane: calc(var(--measure) + 2 * var(--head-gap));
  width: min(100%, var(--journal-post-lane)); margin-inline: auto;
  display: flow-root;
}

@property --journal-text {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.journal-prose__lane { --journal-text: var(--measure); }

.journal-prose__lane > p,
.journal-prose__head,
.journal-prose__list { max-width: var(--journal-text); margin-inline: auto; }
.journal-prose__list { padding-inline-start: var(--head-gap); }

.journal-prose__lane a { overflow-wrap: anywhere; color: var(--accent-ink); }

.journal-prose__figure { display: block; margin-inline: auto; }
.journal-prose__figure-plate { width: 100%; aspect-ratio: var(--fig-r, 4 / 3); }

img.journal-prose__figure-plate { display: block; object-fit: cover; height: auto; }
.journal-prose__caption {
  font-size: var(--f-1); color: var(--ink-soft); margin-top: var(--tight-gap);
}

.journal-prose__figure .slot-empty { overflow: hidden; }
.journal-prose__figure .slot-note { overflow-wrap: anywhere; }

.journal-prose__figure--wide { width: min(100%, var(--fig-w, 100%)); }

.journal-prose__figure { clear: both; }

@media (min-width: 56rem) {
  .journal__link {
    grid-template-columns: max-content minmax(0, 1fr) calc(var(--measure) / var(--phi2));
    column-gap: var(--s2); align-items: start;
  }
}

@media (min-width: 72rem) {
  .journal-prose__list { display: flow-root; clear: both; }

  .journal-prose__list { min-width: calc(var(--journal-text) / var(--sqphi)); }

  .journal-prose__figure--left,
  .journal-prose__figure--right {
    width: min(calc(var(--measure) / var(--phi2)), var(--fig-w, 100%));
    margin-block: var(--stack-gap) var(--head-gap);
  }
  .journal-prose__figure--left  { float: left;  margin-inline: 0 var(--head-gap); }
  .journal-prose__figure--right { float: right; margin-inline: var(--head-gap) 0; }
}