/* The homepage feed. Loaded by index.html after styles.css, whose tokens it
   reuses; post.html does not load it, so anything overridden here is homepage
   only. */

/* Light mode drops styles.css's warm grey for a neutral one, so body text and
   labels are shades of black. The accent is deliberately left alone: blue stays
   the colour of a link, here and on post.html. */
:root[data-theme="light"],
:root:not([data-theme="dark"]) {
  --muted: #4f4f4f;
}

/* Width of the date column and its gutter, shared with the rows' secondary lines
   so everything under a title hangs off the same edge. */
:root {
  --feed-date-col: 5.5rem;
  --feed-date-gap: 20px;
  /* Everything in the feed column shares this, so the rules under the section
     labels stay flush with the rows. */
  --feed-width: 620px;
  /* The intro copy's measure. The section labels and their rules run to this
     instead, so they bracket the feed rather than sitting flush with it. */
  --intro-width: 680px;
  /* Ties the type stamp to the links. Deliberately the same blue as every other
     link on the site, so it follows the accent through both themes. */
  --feed-link: var(--accent-strong);
}

.feed-intro {
  max-width: var(--intro-width);
  margin-bottom: 36px;
}

/* Sits above the category bar and ignores the current filter, so it needs a
   visible edge of its own to read as a separate shelf rather than as page one. */
/* Spans the wider header measure so its label and rule match the "All Posts" one;
   the list inside still caps itself at the narrower row measure. */
.pinned {
  max-width: var(--intro-width);
  margin: 0 0 64px;
}

.pinned[hidden] {
  display: none;
}

/* Matching section labels, so the two shelves read as siblings. The rule under
   each one is the only horizontal line in the feed - rows are separated by their
   own spacing, not by borders. */
.pinned-heading,
.feed-heading {
  max-width: var(--intro-width);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* styles.css sets this to 1000px for the old homepage. Runs to the intro measure
   like the section label above it, not to the narrower row measure below. */
.category-bar {
  max-width: var(--intro-width);
}

.page-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--feed-width);
  margin-top: 30px;
}

.page-nav[hidden] {
  display: none;
}

/* Empty slots still hold their side of the row so the tally stays centred on
   the first and last page. */
.page-nav-slot {
  flex: 1 1 0;
}

.page-nav-slot--older {
  text-align: right;
}

.page-nav-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: var(--w-label);
  letter-spacing: 0.06em;
}

.page-nav-link:hover {
  color: var(--accent-strong);
}

.page-nav-tally {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: var(--fs-fine);
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.feed-list {
  display: grid;
  gap: 0;
  max-width: var(--feed-width);
}

/* One row shape for both kinds. Post rows get a full-bleed .feed-cover anchor so
   the whole row is clickable, with the chips re-enabled above it. Link rows have
   no cover - their chips are the only targets, since an object has more than one
   destination and no single one is "the" link. */
.feed-item {
  position: relative;
  padding: 13px 0 15px;
}

.feed-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.feed-item--post > *:not(.feed-cover) {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Anything that takes the pointer back from the cover: the chips because they are
   their own links, and the stamp because the date and type are metadata, not a way
   in - taking the pointer makes them inert and keeps the text selectable. */
.feed-chips,
.feed-chips a,
.feed-stamp {
  pointer-events: auto;
}

/* Two columns, the way a publication index sets a dated list: the date holds a
   fixed left column and the title takes the rest, so a wrapped title aligns under
   its own first line instead of running back under the date. Baseline alignment
   seats the label-font date on the title's first baseline. */
.feed-title {
  display: grid;
  grid-template-columns: var(--feed-date-col) minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--feed-date-gap);
  margin: 0;
  font-family: var(--font-text);
  /* A step under --fs-body (18px): the list should sit quieter than the intro
     copy it follows. No token for this size, so it is set here. */
  font-size: 1.0625rem;
  font-weight: 440;
  /* Body line-height, not title: object rows carry a full sentence here, and a
     heading's 1.12 reads as a cramped block once it wraps past two lines. */
  line-height: var(--lh-body);
  letter-spacing: var(--track-title);
}

/* The left column is one stamp - when, then what - so the two lines sit tight
   together and the whole block hangs off the title's first baseline. */
.feed-stamp {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
}

.feed-date {
  display: block;
  color: var(--muted);
  font-weight: var(--w-label);
}

/* Quieter than the date: it repeats on almost every row, so it should read as a
   classification rather than compete with the title. */
.feed-type {
  display: block;
  color: var(--feed-link);
  font-size: var(--fs-fine);
  font-weight: 500;
}

.feed-item--post:hover .feed-title {
  color: var(--accent-strong);
}

/* Secondary lines start where the title does, not under the date column. */
.feed-gallery {
  display: flex;
  align-items: center;
  margin-top: 14px;
}

.feed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0 calc(var(--feed-date-col) + var(--feed-date-gap));
}

.feed-chip {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  padding: 3px 10px;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: var(--fs-fine);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Category chips filter, so they behave like the controls they are. */
.feed-chip--category {
  cursor: pointer;
}

.feed-chip--category:hover {
  border-color: var(--text);
  color: var(--text);
}

/* Secondary links: same pill, tinted so it reads as somewhere to go rather than
   something to filter by. */
.feed-chip--link {
  border-color: var(--border);
  color: var(--feed-link);
  text-decoration: none;
}

.feed-chip--link:hover {
  border-color: var(--feed-link);
}

@media (max-width: 620px) {
  .feed-item {
    padding: 11px 0 12px;
  }
}

/* Below the point where a fixed date column would starve the title, the date
   goes back to being a line of its own above it. */
@media (max-width: 560px) {
  .feed-title {
    display: block;
  }

  .feed-stamp {
    display: flex;
    margin-bottom: 4px;
  }

  /* One line now, so the type needs a separator the stacked column did not. */
  .feed-type::before {
    content: "·";
    margin-right: 0.55em;
  }

  .feed-chips {
    margin-left: 0;
  }
}