/* h4d35x0 field log.
   Entries follow the format the persona already uses on Instagram:
     UPPERCASE title        what was done
     lowercase subtitle     the technical specifics
     lowercase restraint    what was deliberately NOT done
   Short by design. This is a log of things done, not a blog. */

.h4-log {
  max-width: 82rem;
  margin: 0 auto;
  padding: 2rem 1.6rem 6rem;
}

.h4-log__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 2rem;
  padding: 1.4rem 0 1.2rem;
  border-bottom: 1px solid var(--h4-line);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.15rem;
  color: var(--h4-dim);
}
.h4-log__host { color: var(--h4-fg); }
.h4-log__spacer { flex: 1 1 auto; }
.h4-log__bar b { font-weight: 400; color: var(--h4-accent); }

.h4-log__lede {
  max-width: 62ch;
  margin: 3.2rem 0 0;
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--h4-fg);
}

/* ---- entry list ---- */
.h4-log__list { margin: 3.2rem 0 0; padding: 0; list-style: none; }

.h4-entry {
  padding: 1.8rem 0;
  border-top: 1px solid var(--h4-line);
}
.h4-entry:last-child { border-bottom: 1px solid var(--h4-line); }

.h4-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.1rem;
  color: var(--h4-dim);
}
.h4-entry__date { color: var(--h4-accent); }

.h4-entry__title { margin: 0; font-size: 1.9rem; line-height: 1.25; }
.h4-entry__title a {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--h4-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.h4-entry__title a:hover,
.h4-entry__title a:focus-visible { border-bottom-color: var(--h4-accent); }

.h4-entry__sub {
  margin: 0.7rem 0 0;
  max-width: 66ch;
  font-size: 1.4rem;
  line-height: 1.65;
  color: var(--h4-fg);
}

/* the signature move: what was deliberately not done */
.h4-entry__restraint,
.h4-article__restraint {
  display: inline-block;
  margin: 1rem 0 0;
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 2px solid var(--h4-accent);
  font-size: 1.25rem;
  color: var(--h4-dim);
}

.h4-log__empty { margin: 3.2rem 0 0; color: var(--h4-warn); }

/* ---- single entry ---- */
.h4-article { max-width: 82rem; margin: 0 auto; padding: 2rem 1.6rem 6rem; }
.h4-article__title {
  margin: 2.4rem 0 0;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.h4-article__body { margin: 2.4rem 0 0; }

.h4-log__back,
.h4-article__back {
  display: inline-flex;
  gap: 0.6rem;
  margin: 3.2rem 0 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.15rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.h4-log__back::before,
.h4-article__back::before { content: '<'; color: var(--h4-accent); }
.h4-log__back:hover, .h4-log__back:focus-visible,
.h4-article__back:hover, .h4-article__back:focus-visible { border-bottom-color: var(--h4-accent); }

@media screen and (max-width: 749px) {
  .h4-log__bar { letter-spacing: 0.1em; }
  .h4-entry__title { font-size: 1.7rem; }
}