/* ══ Notes ════════════════════════════════════════════════════════ */

.notes { list-style: none; margin: 0 auto; padding: 0; max-width: var(--maxw); }

.note-row { border-top: var(--hair) solid var(--line-quiet); }
.note-row:last-child { border-bottom: var(--hair) solid var(--line-quiet); }

.note-row__link {
  display: grid;
  /* Thumb column is fixed-width and always present (even empty) so the
     title text lands at the same x on every row, whether or not that
     particular note has a banner image. */
  grid-template-columns: 3.5rem 5.5rem minmax(0, 1fr) 5rem;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) 0;
  transition: background-color var(--d-fast) var(--ease), padding-inline var(--d-base) var(--ease);
}
.note-row__link:hover { background: var(--field-deep); padding-inline: var(--s-3); }

.note-row__num {
  align-self: baseline;
  font: 500 var(--t-label)/1.8 var(--mono);
  letter-spacing: var(--track-label);
  color: var(--line);
}

.note-row__thumb {
  display: block;
  width: 5.5rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: transparent;
}
.note-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.note-row__thumb.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--field-deep);
  border: var(--hair) solid var(--line-quiet);
}
.note-row__thumb.is-placeholder svg { width: 34%; height: 34%; color: var(--text-faint); }
.note-row__tag { display: block; margin-bottom: var(--s-3); }
.note-row__title {
  font-size: var(--t-h2);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: 1.12;
  max-width: 26ch;
}
.note-row__link:hover .note-row__title { color: var(--line); }
.note-row__dek {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 58ch;
}
.note-row__read { text-align: right; color: var(--text-faint); white-space: nowrap; }

/* ── single note ──────────────────────────────────────────────────
   Measure is the whole design here. 62ch is where a line stops needing
   effort to track, and an essay that is not read to the end has failed
   regardless of how it looks. */

/* Full-bleed banner. It is the article's first child, outside every
   .section wrapper, so nothing constrains its width to begin with — no
   negative-margin breakout needed. Height is clamped to the viewport
   width rather than driven by the image's own aspect ratio, since a tall
   or square source shouldn't be able to push the masthead off-screen. */
.note-cover {
  position: relative;
  width: 100%;
  height: clamp(200px, 34vw, 480px);
  overflow: hidden;
  background: var(--field-deep);
}
.note-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Sinks the banner's bottom edge into the masthead section below it
   (which shares .section's var(--field) background) so the two read as
   one continuous piece rather than an image sitting on top of a page. */
.note-cover::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 46%;
  background: linear-gradient(to bottom, transparent, var(--field));
  pointer-events: none;
}

.note-back {
  display: inline-flex;
  align-items: center;
  /* Padding expands the tap target to 44px without growing the visible
     label; negative margin cancels the padding back out of the layout so
     surrounding spacing reads the same as before. */
  min-height: 44px;
  padding: var(--s-3) var(--s-3);
  margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) calc(var(--s-4) - var(--s-3));
  font: 500 var(--t-label)/1 var(--mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
}
.note-back:hover { color: var(--line); }

.note-head { max-width: 46rem; }
.note-head__title {
  margin-top: var(--s-4);
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: var(--track-tight);
  max-width: 20ch;
}
.note-head__dek {
  margin-top: var(--s-4);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 48ch;
}

.note-body { max-width: 40rem; }
.note-body p {
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 62ch;
}
.note-body p + p { margin-top: var(--s-4); }
.note-body__lead {
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
  letter-spacing: -0.012em;
  color: var(--text);
}

/* Rich content from the admin editor. The allowed tag set is deliberately
   small (h2, h3, p, ul, ol, blockquote, a) so an essay stays an essay and
   never grows the layout surface of the page it's read on. */
.note-body h2 {
  margin-top: var(--s-6);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: var(--track-tight);
  max-width: 62ch;
}
.note-body h3 {
  margin-top: var(--s-5);
  font-size: 1.1875rem;
  font-weight: 500;
  max-width: 62ch;
}
.note-body ul,
.note-body ol {
  margin-top: var(--s-4);
  padding-left: 1.3em;
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 62ch;
}
.note-body li + li { margin-top: var(--s-2); }
.note-body blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  background: var(--field-deep);
  font-style: italic;
  color: var(--text-dim);
  max-width: 58ch;
}
.note-body blockquote p { max-width: none; }
.note-body a { color: var(--line); text-decoration: underline; text-underline-offset: 3px; }
.note-body a:hover { color: var(--line-hi); }

.note-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-5);
  max-width: 46rem;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--hair) solid var(--line-quiet);
}
.note-foot__next { display: block; max-width: 32ch; }
.note-foot__title {
  display: block;
  margin-top: var(--s-3);
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
}
.note-foot__next:hover .note-foot__title { color: var(--line); }
.note-foot__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }

@media (max-width: 760px) {
  /* The thumbnail is a desktop-only affordance. A fourth grid column has no
     room on a narrow screen, and re-flowing it in only adds a fiddly new
     layout for a "nice to have" — text stays full width and scannable
     instead. display:none (not just hidden) removes it from the grid
     entirely, so the row falls back to exactly the num+body+read layout
     that existed before thumbnails, unaffected by the extra markup. */
  /* .is-placeholder repeated here: two classes outrank one on specificity
     regardless of source order, so plain .note-row__thumb alone would lose
     to the .is-placeholder rule's display:flex and leave placeholder boxes
     visible on mobile while real-photo thumbnails correctly hid. */
  .note-row__thumb,
  .note-row__thumb.is-placeholder { display: none; }
  .note-row__link { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .note-row__read { grid-column: 2; text-align: left; margin-top: var(--s-3); }
}