/* ─────────────────────────────────────────────────────────
   Niranta — quote pages
   Quotes use the same A4 sheet as articles, with a
   typographically heavier opener (mark + quote line +
   attribution) inside the masthead. Body prose is the
   shared .ed-body-text from article.css.
   ───────────────────────────────────────────────────────── */

/* Tighter top padding inside the sheet for quote pages —
   the masthead is the visual anchor, not the body length. */
.a4-sheet.a4-sheet-quote {
  padding-top: var(--s-12);
}

/* The amber opening glyph — pulsates gently to draw the eye to the quote.
   Animation respects prefers-reduced-motion: users who've opted out get a
   static glyph. */
.a4-sheet-quote .quote-mark {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.4;
  color: var(--brand);
  margin: var(--s-2) 0 var(--s-4);
  display: inline-block;       /* needed for transform to apply */
  transform-origin: left center;
}

@keyframes quote-mark-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.78;
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .a4-sheet-quote .quote-mark {
    animation: quote-mark-pulse 2.6s ease-in-out infinite;
  }
}

/* The quote line itself — display-sized, italic, lowercase */
.a4-sheet-quote .quote-text {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-transform: lowercase;
}

/* Attribution — small caps under the quote */
.a4-sheet-quote .quote-attribution {
  font-family: var(--font-display);
  font-size: var(--t-h4); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-5);
}

/* Meta strip — already styled by article.css .ed-meta;
   we only add a top margin so it sits below the quote. */
.a4-sheet-quote .ed-meta {
  margin-top: var(--s-2);
}

/* Body prose: inherit .ed-body-text from article.css.
   No extra rules needed — paragraphs, links, headings,
   blockquote, code all look identical to article body. */

@media (max-width: 880px) {
  .a4-sheet.a4-sheet-quote { padding-top: var(--s-8); }
  .a4-sheet-quote .quote-mark { font-size: 64px; margin-bottom: var(--s-3); }
  .a4-sheet-quote .quote-text { font-size: 22px; }
}
@media (max-width: 460px) {
  .a4-sheet-quote .quote-mark { font-size: 52px; }
  .a4-sheet-quote .quote-text { font-size: var(--t-h3); line-height: 1.4; }
  .a4-sheet-quote .quote-attribution { font-size: var(--t-eyebrow); }
}