/* ═══════════════════════════════════════════════════════════════════════════
   ELEANOR WHITMORE — POEMS PAGE
   poems.css · Additive stylesheet · Depends on style.css
   ═══════════════════════════════════════════════════════════════════════════

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────────────
   1.  Page-level tokens (poems page only)
   2.  Poetry Hero
   3.  Poetry Stats Bar
   4.  Featured Poem Section
   5.  Featured Poem Extensions (poem--featured)
   6.  Collections Grid
   7.  Archive Controls (search + filters + count)
   8.  Poem Archive List
   9.  Poem Entry (accordion row)
   10. Poem Entry — Open State
   11. Share Toast
   12. Publications Bar
   13. Archive Empty State & Pagination
   14. Animations
   15. Responsive — Tablet (≤1024px)
   16. Responsive — Mobile (≤768px)
   17. Responsive — Small Mobile (≤480px)
   18. Reduced Motion
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. PAGE-LEVEL TOKENS (poems page only)
─────────────────────────────────────────────────────────────────────────── */
.page-poetry {
  /* Collection badge colours */
  --badge-i-bg:    rgba(184, 150, 90, 0.10);
  --badge-i-color: #7A5E2A;
  --badge-i-border:rgba(184, 150, 90, 0.25);

  --badge-ii-bg:    rgba(123, 45, 53, 0.08);
  --badge-ii-color: var(--color-accent);
  --badge-ii-border:rgba(123, 45, 53, 0.20);

  --badge-unc-bg:    rgba(107, 91, 78, 0.08);
  --badge-unc-color: var(--color-text-secondary);
  --badge-unc-border:var(--color-border);

  /* Poem toggle animation */
  --poem-expand-dur: 380ms;
  --poem-expand-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ───────────────────────────────────────────────────────────────────────────
   2. POETRY HERO
─────────────────────────────────────────────────────────────────────────── */
.poetry-hero {
  background-color: var(--color-bg);
  padding-top: var(--space-20);
  position: relative;
  overflow: hidden;
}

/* Faint ruled-paper lines behind the hero text */
.poetry-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 31px,
    var(--color-border-light) 31px,
    var(--color-border-light) 32px
  );
  opacity: 0.35;
  pointer-events: none;
}

.poetry-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: var(--space-16);
}

.poetry-hero__content {
  flex: 1;
  max-width: 640px;
}

.poetry-hero__eyebrow {
  font-family: var(--font-caps);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  display: block;

  /* Entrance animation */
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.05s;
}

.poetry-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 300;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-8);

  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.15s;
}

.poetry-hero__description {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 52ch;
  border-left: 2px solid var(--color-accent-light);
  padding-left: var(--space-5);

  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.3s;
}

/* Large ornamental glyph (purely decorative) */
.poetry-hero__ornament {
  flex-shrink: 0;
  align-self: center;
  animation: fadeIn 1.2s ease both;
  animation-delay: 0.4s;
}

.poetry-hero__ornament-glyph {
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 10rem);
  color: var(--color-border);
  line-height: 1;
  user-select: none;
  display: block;
  opacity: 0.5;
}


/* ───────────────────────────────────────────────────────────────────────────
   3. POETRY STATS BAR
─────────────────────────────────────────────────────────────────────────── */
.poetry-stats {
  background-color: var(--color-text);
  padding-block: var(--space-5);
  position: relative;
  z-index: 1;
}

.poetry-stats__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.poetry-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.poetry-stats__divider {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: rgba(245, 240, 232, 0.2);
  line-height: 1;
  align-self: center;
}

.poetry-stats__number {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1;
}

.poetry-stats__label {
  font-family: var(--font-caps);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.6); /* raised from 0.4 for WCAG AA */
}


/* ───────────────────────────────────────────────────────────────────────────
   4. FEATURED POEM SECTION
─────────────────────────────────────────────────────────────────────────── */
.poetry-featured {
  background-color: var(--color-surface);
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
}

/* Faint background glyph */
.poetry-featured::after {
  content: '❦';
  position: absolute;
  bottom: var(--space-12);
  right: 6vw;
  font-family: var(--font-display);
  font-size: 7rem;
  color: var(--color-border);
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}


/* ───────────────────────────────────────────────────────────────────────────
   5. FEATURED POEM EXTENSIONS
─────────────────────────────────────────────────────────────────────────── */

/* Publication note inside the header */
.poem__publication {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-secondary);
}

/* Footer actions row */
.poem__footer--featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.poem__footer-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* Share button icon alignment */
.poem__share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}


/* ───────────────────────────────────────────────────────────────────────────
   6. COLLECTIONS GRID
─────────────────────────────────────────────────────────────────────────── */
.poetry-collections {
  background-color: var(--color-bg);
  padding-block: var(--space-24);
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  list-style: none;
}

/* Base collection card */
.collection-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--transition-base),
    transform  var(--transition-slow);
}

.collection-card:hover {
  box-shadow: var(--shadow-book);
  transform: translateY(-3px);
}

/* Top colour stripe — varies per collection */
.collection-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--color-border), var(--color-accent-light));
}

.collection-card--accent::before {
  background: linear-gradient(to right, var(--color-accent-light), var(--color-accent));
}

.collection-card--forthcoming::before {
  background: linear-gradient(to right, var(--color-border-light), var(--color-border));
  opacity: 0.5;
}

.collection-card--forthcoming {
  opacity: 0.75;
}

.collection-card--forthcoming:hover {
  opacity: 1;
}

.collection-card__inner {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space-1);
}

/* Large Roman numeral */
.collection-card__number {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 300;
  font-style: italic;
  color: var(--color-border);
  line-height: 1;
  margin-bottom: var(--space-4);
  user-select: none;
}

.collection-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.collection-card__year {
  font-family: var(--font-caps);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.8;
}

.collection-card--forthcoming .collection-card__year {
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.collection-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.collection-card__description {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  flex: 1;
}

.collection-card__count {
  font-family: var(--font-caps);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-text-secondary);
  opacity: 0.7;
  margin-top: var(--space-2);
}


/* ───────────────────────────────────────────────────────────────────────────
   7. ARCHIVE CONTROLS
─────────────────────────────────────────────────────────────────────────── */
.poetry-archive {
  background-color: var(--color-surface);
  padding-block: var(--space-24);
  border-top: 1px solid var(--color-border-light);
}

.archive-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border-light);
}

/* Search field */
.archive-search {
  width: 100%;
  max-width: 540px;
}

.archive-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.archive-search__icon {
  position: absolute;
  left: var(--space-4);
  color: var(--color-text-secondary);
  pointer-events: none;
  flex-shrink: 0;
}

.archive-search__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem var(--space-10) 0.7rem calc(var(--space-4) + 22px);
  height: 48px;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  appearance: none;
}

.archive-search__input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.archive-search__input:focus {
  outline: none;
  border-color: var(--color-accent-light);
  box-shadow: 0 0 0 3px rgba(196, 146, 138, 0.18);
}

/* Custom search clear — overrides browser default */
.archive-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.archive-search__clear {
  position: absolute;
  right: var(--space-3);
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  min-width: 28px;
  min-height: 28px;
}

.archive-search__clear:hover {
  color: var(--color-text);
  background-color: var(--color-border-light);
}

/* Filter pills */
.archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.filter-pill {
  font-family: var(--font-caps);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  min-height: 36px;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    color            var(--transition-fast);
}

.filter-pill:hover,
.filter-pill:focus-visible {
  border-color: var(--color-accent-light);
  color: var(--color-text);
}

.filter-pill--active,
.filter-pill[aria-pressed="true"] {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.filter-pill--active:hover,
.filter-pill[aria-pressed="true"]:hover {
  background-color: #621f27;
  border-color: #621f27;
}

/* Results count */
.archive-results-count {
  font-family: var(--font-caps);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  opacity: 0.8;
}

#results-number {
  font-weight: 500;
  color: var(--color-text);
}


/* ───────────────────────────────────────────────────────────────────────────
   8. POEM ARCHIVE LIST
─────────────────────────────────────────────────────────────────────────── */
.poem-archive {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
}

/* Hidden state applied by JS during filter/search */
.poem-entry[hidden],
.poem-entry[aria-hidden="true"] {
  display: none;
}


/* ───────────────────────────────────────────────────────────────────────────
   9. POEM ENTRY (accordion row)
─────────────────────────────────────────────────────────────────────────── */
.poem-entry {
  border-bottom: 1px solid var(--color-border-light);
}

.poem-entry:first-child {
  border-top: 1px solid var(--color-border-light);
}

.poem-entry__article {
  /* no extra wrapper styles needed */
}

/* Summary row — always visible */
.poem-entry__summary {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-5);
  padding-inline: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.poem-entry__summary:hover {
  background-color: rgba(28, 24, 20, 0.025);
}

/* Toggle chevron button */
.poem-entry__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    transform        var(--transition-base);
}

.poem-entry__toggle:hover,
.poem-entry__toggle:focus-visible {
  background-color: var(--color-bg);
  border-color: var(--color-accent-light);
}

/* The + / × icon drawn with CSS */
.poem-entry__toggle-icon {
  position: relative;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poem-entry__toggle-icon::before,
.poem-entry__toggle-icon::after {
  content: '';
  position: absolute;
  background-color: var(--color-text-secondary);
  border-radius: 1px;
  transition:
    transform     var(--transition-base),
    opacity       var(--transition-fast);
}

/* Horizontal bar */
.poem-entry__toggle-icon::before {
  width: 12px;
  height: 1px;
}

/* Vertical bar (becomes horizontal when open) */
.poem-entry__toggle-icon::after {
  width: 1px;
  height: 12px;
}

/* Header area in summary */
.poem-entry__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.poem-entry__meta-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Collection badge */
.poem-entry__collection-badge {
  font-family: var(--font-caps);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: 2px;
  background-color: var(--badge-i-bg);
  color: var(--badge-i-color);
  border: 1px solid var(--badge-i-border);
  white-space: nowrap;
}

.poem-entry__collection-badge--ii {
  background-color: var(--badge-ii-bg);
  color: var(--badge-ii-color);
  border-color: var(--badge-ii-border);
}

.poem-entry__collection-badge--unc {
  background-color: var(--badge-unc-bg);
  color: var(--badge-unc-color);
  border-color: var(--badge-unc-border);
}

.poem-entry__year {
  font-family: var(--font-caps);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  opacity: 0.65;
}

/* Title button (clickable to expand) */
.poem-entry__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.poem-entry__title-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: color var(--transition-fast);
}

.poem-entry__title-btn:hover,
.poem-entry__title-btn:focus-visible {
  color: var(--color-accent);
  outline: none;
}

.poem-entry__title-btn:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* First line preview */
.poem-entry__first-line {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  opacity: 0.8;
  line-height: 1.5;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity var(--transition-fast);
}

/* Right-side metadata (theme tags) */
.poem-entry__meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.poem-entry__theme-tag {
  font-family: var(--font-caps);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.8; /* raised from 0.55 */
  white-space: nowrap;
}


/* ───────────────────────────────────────────────────────────────────────────
   10. POEM ENTRY — OPEN STATE
─────────────────────────────────────────────────────────────────────────── */

/* When the accordion is expanded */
.poem-entry.is-open .poem-entry__toggle {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.poem-entry.is-open .poem-entry__toggle-icon::before,
.poem-entry.is-open .poem-entry__toggle-icon::after {
  background-color: var(--color-white);
}

/* Rotate the vertical bar to form × */
.poem-entry.is-open .poem-entry__toggle-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.poem-entry.is-open .poem-entry__summary {
  background-color: rgba(123, 45, 53, 0.03);
}

.poem-entry.is-open .poem-entry__title-btn {
  color: var(--color-accent);
}

.poem-entry.is-open .poem-entry__first-line {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* Body panel */
.poem-entry__body {
  /* hidden attribute handles display:none; we animate with max-height */
  padding: 0 var(--space-8) 0 calc(44px + var(--space-4) + var(--space-2));
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--poem-expand-dur) var(--poem-expand-ease);
}

/* JS removes [hidden] and sets max-height inline for animation */
.poem-entry__body:not([hidden]) {
  padding-bottom: var(--space-8);
}

/* Poem text within the accordion body */
.poem-entry__text {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border-light);
  max-width: 44ch;
}

/* poem__stanza is already defined in style.css; these are scoped additions */
.poem-entry__text .poem__stanza {
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--color-text);
  font-style: normal;
}

.poem-entry__text .poem__stanza + .poem__stanza {
  margin-top: var(--space-5);
  margin-bottom: 0;
}

/* Footer row inside body panel */
.poem-entry__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-light);
  flex-wrap: wrap;
}

.poem-entry__pub-note {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-secondary);
  opacity: 0.8;
  line-height: 1.5;
}


/* ───────────────────────────────────────────────────────────────────────────
   11. SHARE TOAST
─────────────────────────────────────────────────────────────────────────── */
.poem__share-toast {
  font-family: var(--font-caps);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-accent);
  min-height: 1.5em;
  transition: opacity var(--transition-base);
}

/* Global floating toast injected by JS */
.share-toast-global {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background-color: var(--color-text);
  color: var(--color-white);
  font-family: var(--font-caps);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(28, 24, 20, 0.25);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity   300ms ease,
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.share-toast-global.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ───────────────────────────────────────────────────────────────────────────
   12. PUBLICATIONS BAR
─────────────────────────────────────────────────────────────────────────── */
.poetry-publications {
  background-color: var(--color-bg);
  padding-block: var(--space-16);
}

.publications-inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-block: var(--space-8);
}

.publications-label {
  font-family: var(--font-caps);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
}

.publications-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  list-style: none;
  align-items: center;
}

.publications-list__item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-secondary);
  opacity: 0.85; /* raised from 0.75 */
  transition: opacity var(--transition-fast);
  hyphens: auto; /* prevents overflow on narrow viewports */
}

.publications-list__item:hover {
  opacity: 1;
}

/* Dot separator between items */
.publications-list__item + .publications-list__item::before {
  content: '·';
  margin-right: var(--space-6);
  font-style: normal;
  color: var(--color-border);
}


/* ───────────────────────────────────────────────────────────────────────────
   13. ARCHIVE EMPTY STATE & PAGINATION
─────────────────────────────────────────────────────────────────────────── */
.archive-empty-state {
  padding-block: var(--space-16);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.archive-empty-state__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.archive-pagination {
  padding-top: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-8);
}

.archive-pagination__note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-secondary);
  opacity: 0.75;
  line-height: 1.6;
}


/* ───────────────────────────────────────────────────────────────────────────
   14. ANIMATIONS
   (Keyframes already declared in style.css: fadeInUp, fadeIn)
   These classes are added by the shared initScrollReveal() in main.js.
─────────────────────────────────────────────────────────────────────────── */

/* Poem archive entry stagger on initial load */
.poem-entry {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.poem-entry:nth-child(1) { animation-delay: 0.05s; }
.poem-entry:nth-child(2) { animation-delay: 0.10s; }
.poem-entry:nth-child(3) { animation-delay: 0.15s; }
.poem-entry:nth-child(4) { animation-delay: 0.20s; }
.poem-entry:nth-child(5) { animation-delay: 0.25s; }
.poem-entry:nth-child(6) { animation-delay: 0.30s; }
.poem-entry:nth-child(7) { animation-delay: 0.35s; }
.poem-entry:nth-child(8) { animation-delay: 0.40s; }

/* Collection card stagger */
.collection-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.collection-card:nth-child(1) { animation-delay: 0.05s; }
.collection-card:nth-child(2) { animation-delay: 0.15s; }
.collection-card:nth-child(3) { animation-delay: 0.25s; }


/* ───────────────────────────────────────────────────────────────────────────
   15. RESPONSIVE — TABLET (≤1024px)
─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .collection-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 520px;
    justify-self: center;
    width: 100%;
  }

  .poetry-hero__ornament {
    display: none; /* hide large glyph on smaller screens */
  }

  .poem-entry__meta-right {
    display: none; /* hide theme tags on tablet — too cramped */
  }

  .poem-entry__summary {
    grid-template-columns: 44px 1fr;
  }

}


/* ───────────────────────────────────────────────────────────────────────────
   16. RESPONSIVE — MOBILE (≤768px)
─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .poetry-hero {
    padding-top: var(--space-12);
  }

  .poetry-hero__inner {
    padding-bottom: var(--space-10);
  }

  .poetry-hero__heading {
    font-size: clamp(3rem, 14vw, 4.5rem);
    margin-bottom: var(--space-6);
  }

  .poetry-hero__description {
    font-size: var(--text-base);
    max-width: none;
  }

  .poetry-stats__list {
    gap: var(--space-4);
  }

  .poetry-stats__divider {
    display: none;
  }

  .poetry-stats__item {
    flex-direction: row;
    gap: var(--space-2);
    align-items: baseline;
  }

  .poetry-stats__number {
    font-size: var(--text-lg);
  }

  /* Featured poem section */
  .poetry-featured {
    padding-block: var(--space-16);
  }

  .poetry-featured::after {
    display: none;
  }

  /* Collections: single column */
  .collections-grid {
    grid-template-columns: 1fr;
  }

  .collection-card:nth-child(3) {
    max-width: none;
    justify-self: auto;
  }

  /* Archive controls */
  .archive-search {
    max-width: none;
  }

  .archive-filters {
    gap: var(--space-2);
  }

  .filter-pill {
    font-size: 0.625rem;
    padding: var(--space-1) var(--space-3);
    min-height: 32px;
  }

  /* Poem entry rows */
  .poem-entry__summary {
    grid-template-columns: 36px 1fr;
    gap: var(--space-3);
    padding-block: var(--space-4);
    padding-inline: var(--space-2);
  }

  .poem-entry__toggle {
    width: 30px;
    height: 30px;
  }

  .poem-entry__title {
    font-size: var(--text-lg);
  }

  .poem-entry__body {
    padding-left: calc(36px + var(--space-3) + var(--space-2));
    padding-right: var(--space-2);
  }

  /* Publications bar */
  .publications-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .publications-list {
    gap: var(--space-2) var(--space-4);
  }

  .publications-list__item + .publications-list__item::before {
    margin-right: var(--space-4);
  }

}


/* ───────────────────────────────────────────────────────────────────────────
   17. RESPONSIVE — SMALL MOBILE (≤480px)
─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .poetry-hero__heading {
    font-size: clamp(2.75rem, 18vw, 3.5rem);
  }

  .poem-entry__meta-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .poem-entry__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .archive-pagination {
    text-align: left;
    align-items: flex-start;
  }

  .poetry-stats__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    justify-items: center;
  }

  .poetry-stats__divider {
    display: none;
  }

}


/* ───────────────────────────────────────────────────────────────────────────
   18. REDUCED MOTION
─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .poetry-hero__eyebrow,
  .poetry-hero__heading,
  .poetry-hero__description,
  .poetry-hero__ornament,
  .poem-entry,
  .collection-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .poem-entry__body {
    transition: none;
  }

  .poem-entry__toggle,
  .poem-entry__toggle-icon::before,
  .poem-entry__toggle-icon::after {
    transition: none;
  }

  .share-toast-global {
    transition: opacity 150ms ease;
  }

}