/* lists.css — the perch, references and scratch index pages.
 * Load after style.css and pages.css.
 *
 * Adds three things pages.css does not have:
 *   .page-head--art   a page head with an illustration printed beside the title
 *   .month-group      perch logs grouped by month, each month a heading over a card grid
 *   .entries--full    archive entries that show their whole description (links inside it stay clickable)
 *
 * Perch markup is rewritten by muninn_utils.perch_publish into a flat
 *   <ul class="post-list"><li><a href>Title</a><span class="post-date">…</span><p class="post-desc">…</p></li>…
 * so the log selectors below (.post-list > li, > a, .post-date, .post-desc) must keep working
 * without the .month-group wrappers. A small script on the perch page adds them at load time.
 */

/* ── Illustrated page head ───────────────────────────────────────────────── */
.page-head--art {
  display: grid;
  /* the art takes at most 40% of the row, so a one-word title such as References still fits its column */
  grid-template-columns: minmax(0, 1fr) minmax(0, min(26rem, 40%));
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-bottom: 2.8rem;
}
.page-head--art::after { display: none; } /* the art carries its own registration marks */
.head-copy { min-width: 0; }
.head-art {
  --off-register: var(--coral-a);
  position: relative;
  margin: 0 0.6rem 0.5rem 0;
  container-type: inline-size;
}
@media (prefers-color-scheme: dark) {
  /* coral at 32% over night stock printed as a heavy maroon slab */
  :root:not([data-theme="light"]) .head-art { --off-register: rgba(240, 138, 115, 0.18); }
}
.head-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: 2px;
  background: var(--plate);
  /* the coral plate printed a little off register */
  box-shadow: 0.6rem 0.5rem 0 var(--off-register), var(--shadow);
}
.head-art::before, .head-art::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0.85;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 6px, var(--coral) 6.5px 7.5px, transparent 8px),
    linear-gradient(var(--coral), var(--coral)) 50% 50% / 1px 100% no-repeat,
    linear-gradient(var(--coral), var(--coral)) 50% 50% / 100% 1px no-repeat;
}
.head-art::before { top: -11px; left: -11px; }
.head-art::after { bottom: -22px; right: -22px; }

/* ── Perch: months and log cards ─────────────────────────────────────────── */
.month-group { margin-top: 3.2rem; }
.month-group:first-of-type { margin-top: 2.6rem; }
.month {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0 0 1.2rem;
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--head);
}
.month small {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.month::after {
  content: "";
  flex: 1;
  align-self: center;
  height: 1px;
  background: var(--line-strong);
}

.post-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.6rem, 4.5vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-list > li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.1rem 0 1.7rem;
  border-top: 1px solid var(--line-strong);
}
.post-list > li:nth-child(-n + 2) { border-top: 2px solid var(--head); }
.post-list .post-date {
  order: -1;
  margin: 0 0 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.post-list > li.is-fly .post-date::after { content: "\00a0\00b7\00a0 Fly"; color: var(--sage-ink); }
.post-list > li > a {
  font-family: var(--f-display);
  font-size: clamp(1.18rem, 1.08rem + 0.4vw, 1.45rem);
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--head);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.2s ease;
}
.post-list > li > a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the target */
.post-list > li:hover > a { color: var(--head); text-decoration-color: var(--coral); }
.post-list > li > a:focus-visible { outline: 0; text-decoration-color: var(--coral); }
@supports selector(:has(a)) {
  .post-list > li:has(> a:focus-visible) { outline: 3px solid var(--coral); outline-offset: 6px; border-radius: 2px; }
}
.post-list .post-desc {
  margin: 0.6rem 0 0;
  font-size: 0.94rem;
  line-height: 1.52;
  color: var(--fg-2);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The "Fly 2026-06-14 — " prefix is shown by the date line, so the script hides it from sight only. */
.fly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Archive entries (references, scratch) ───────────────────────────────── */
.entries--full .entry-desc {
  display: block;
  overflow: visible;
  font-size: 0.97rem;
  line-height: 1.55;
}
.entry-desc a { position: relative; z-index: 2; } /* links inside a description sit above the row's click target */
.entry-path, .entry-files {
  margin: 0.8rem 0 0;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.entry-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  padding: 0;
  list-style: none;
}
.entry-files li {
  margin: 0;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .page-head--art { grid-template-columns: 1fr; gap: 1.8rem; }
  .head-art { max-width: min(100% - 1rem, 30rem); margin-right: 1rem; }
  .post-list { grid-template-columns: minmax(0, 1fr); }
  .post-list > li:nth-child(2) { border-top: 1px solid var(--line-strong); }
}
@media (max-width: 600px) {
  /* The blog index also leads with a feature entry that has its own art. On a phone the head art
     and the feature art together put the first entry about 1,400px down, so the head art goes
     and the feature art is cropped wider. */
  .page-head--art:has(~ .feature) .head-art { display: none; }
  .page-head--art:has(~ .feature) { padding-bottom: 1.6rem; }
  .feature .entry-art { aspect-ratio: 16 / 7; }
}
@media (max-width: 620px) {
  /* archive descriptions carry links and file names, so they take the full width */
  .entries--full .entry { grid-template-columns: minmax(0, 1fr); }
  .entries--full .entry-art { display: none; }
  .entries--full .entry-body { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .post-list > li > a { transition: none; }
}