/**
 * Notes series: a shelf of small notebook pages, each a link to one note.
 *
 * The card reuses the article's paper tokens (cream ruled page, red margin,
 * dark-mode twin) at card scale. It deliberately looks like a page, not a
 * product card: the home page is full of product cards, and the band is
 * the one thing on it that is not for sale.
 */
.section-notes-series {
  --notes-paper: #fbf8ef;
  --notes-ink: #1f1f21;
  --notes-muted: #6b6b6e;
  --notes-rule: #d6dfea;
  --notes-margin: #e8a4a4;
  --notes-head: #1f5fa8;
  --notes-line: 24px;
}

:root[data-theme='dark'] .section-notes-series {
  --notes-paper: #1c1d24;
  --notes-ink: #ececf0;
  --notes-muted: #9c9ca6;
  --notes-rule: #2a2c38;
  --notes-margin: #6e3a3a;
  --notes-head: #8ab8f5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .section-notes-series {
    --notes-paper: #1c1d24;
    --notes-ink: #ececf0;
    --notes-muted: #9c9ca6;
    --notes-rule: #2a2c38;
    --notes-margin: #6e3a3a;
    --notes-head: #8ab8f5;
  }
}

.notes-series__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.notes-series__eyebrow {
  margin-bottom: var(--space-2);
}

.notes-series__heading { margin: 0; }

.notes-series__text {
  margin: var(--space-3) 0 0;
  max-width: 52ch;
  color: var(--color-muted);
}

@media screen and (max-width: 749px) {
  .notes-series__head { flex-direction: column; align-items: flex-start; }
}

/* The shelf: a scroll-snap row on phones, a 4-up grid from tablet. */
.notes-series__shelf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72vw, 280px);
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 var(--space-3);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.notes-series__shelf::-webkit-scrollbar { display: none; }

.notes-series__item { scroll-snap-align: start; }

@media screen and (min-width: 750px) {
  .notes-series__shelf {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
}

@media screen and (min-width: 990px) {
  .notes-series__shelf {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* One page. */
.note-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 216px;
  padding: var(--space-4) var(--space-4) var(--space-4) 36px;
  color: var(--notes-ink);
  background-color: var(--notes-paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--notes-line) - 1px),
    var(--notes-rule) calc(var(--notes-line) - 1px),
    var(--notes-rule) var(--notes-line)
  );
  background-position: 0 var(--space-4);
  border-radius: 6px 10px 10px 6px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 6%), 0 8px 20px rgb(0 0 0 / 8%);
  text-decoration: none;
  line-height: var(--notes-line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.note-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 22px;
  width: 0;
  border-left: 1px solid var(--notes-margin);
  border-right: 1px solid var(--notes-margin);
  padding-left: 2px;
}

.note-card:hover,
.note-card:focus-visible {
  transform: translateY(-4px) rotate(-0.6deg);
  box-shadow: 0 1px 0 rgb(0 0 0 / 6%), 0 16px 32px rgb(0 0 0 / 14%);
}

.note-card__series {
  margin: 0;
  color: var(--notes-muted);
  font-style: italic;
  line-height: var(--notes-line);
}

.note-card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: var(--notes-line);
  color: var(--notes-head);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  margin: var(--notes-line) 0 0;
}

.note-card__excerpt {
  margin-top: var(--notes-line);
  color: var(--notes-ink);
  font-size: 14px;
  line-height: var(--notes-line);
}

.note-card__read {
  margin-top: auto;
  padding-top: var(--notes-line);
  color: var(--notes-muted);
  font-style: italic;
  line-height: var(--notes-line);
}

/* ================================================================== */
/* Store skin: the shelf of notes as the store's own cards instead of  */
/* ruled notebook pages - the same ground, line and radius as a       */
/* product card, the series label in brand purple, the title in the   */
/* heading face, and "Read" that lights up on hover.                  */
/* ================================================================== */
.note-card {
  gap: var(--space-3);
  min-height: 220px;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-ink) 3%, var(--color-bg));
  background-image: none;
  box-shadow: none;
  color: var(--color-ink);
  line-height: 1.5;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.note-card::before {
  display: none;
}

.note-card:hover,
.note-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-brand) 55%, transparent);
  box-shadow: 0 16px 32px -18px rgb(0 0 0 / 45%);
}

.note-card__series {
  color: var(--color-brand);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

.note-card__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.note-card__excerpt {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.5;
}

.note-card__read {
  padding-top: var(--space-3);
  color: var(--color-ink);
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
  .note-card__read {
    transition: letter-spacing 0.3s ease, color 0.3s ease;
  }

  .note-card:hover .note-card__read {
    color: var(--color-brand);
    letter-spacing: 0.03em;
  }
}

/* Every card the same height: rows share the tallest card's height
   (grid-auto-rows: 1fr), each card fills its cell, and the title and
   excerpt are clamped so one long note cannot stretch the whole shelf.
   "Read" stays pinned to the bottom by the card's own margin-top: auto. */
.notes-series__shelf {
  grid-auto-rows: 1fr;
}

.notes-series__item {
  display: flex;
}

.note-card {
  flex: 1;
  height: 100%;
}

.note-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.note-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}