/* Deskrune v4c — Typography refinements.
 *
 * Variable Fraunces axis tuning + restrained drop-cap + softer marquee.
 *
 * Drop-cap: 3.5em (was 5em — too aggressive). Tighter line-height. Ink
 * color (not orange) so it doesn't fight section accent.
 *
 * Marquee: lower opacity, hairline border, halved message rotation.
 */


/* ─── Variable Fraunces axis tuning ──────────────────────────────────── */

:root.dr-v4 h1,
:root.dr-v4 .display-large {
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
@media (max-width: 760px) {
  :root.dr-v4 h1,
  :root.dr-v4 .display-large {
    font-variation-settings: 'opsz' 72, 'SOFT' 50, 'WONK' 0;
  }
}

:root.dr-v4 h2 {
  font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 0;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
:root.dr-v4 h3,
:root.dr-v4 h4 {
  font-variation-settings: 'opsz' 36, 'SOFT' 35, 'WONK' 0;
  letter-spacing: -0.012em;
}
:root.dr-v4 blockquote,
:root.dr-v4 .pull-quote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-variation-settings: 'opsz' 60, 'SOFT' 100, 'WONK' 1;
  letter-spacing: -0.005em;
}
:root.dr-v4 .hero-lede,
:root.dr-v4 .lede {
  font-variation-settings: 'opsz' 24, 'SOFT' 60, 'WONK' 0;
}
:root.dr-v4 .kicker,
:root.dr-v4 .hero-eyebrow,
:root.dr-v4 .qi-eyebrow,
:root.dr-v4 .eyebrow {
  font-variation-settings: 'opsz' 9, 'SOFT' 30, 'WONK' 0;
}


/* ─── Drop-cap (refined) ──────────────────────────────────────────────── */

body.q-page main article > p:first-of-type::first-letter,
body.q-page article.section.warm > div > p:first-of-type::first-letter,
body[class*="library"] main article > p:first-of-type::first-letter,
body[class*="afm-page"] main article > p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.8em, 4.5vw, 3.5em);
  font-style: italic;
  font-weight: 500;
  line-height: 0.9;
  float: left;
  margin: 0.05em 0.08em -0.02em 0;
  color: var(--dr-ink);
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 1;
  /* hairline thicken so it reads on cream paper */
  text-shadow: 0 0 1px rgba(20, 20, 19, 0.04);
}

:root[data-theme="dark"] body.q-page main article > p:first-of-type::first-letter,
:root[data-theme="dark"] body.q-page article.section.warm > div > p:first-of-type::first-letter,
:root[data-theme="dark"] body[class*="library"] main article > p:first-of-type::first-letter {
  color: var(--dr-ink);
}


/* ─── Marquee tickers (softened) ──────────────────────────────────────── */

.dr-ticker {
  position: relative;
  overflow: hidden;
  border-top: 0.5px solid var(--dr-rule);
  border-bottom: 0.5px solid var(--dr-rule);
  background: transparent;       /* no fill — texture passes through */
  padding: 12px 0;
  margin: 24px 0;
  mask-image: linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%);
}
.dr-ticker-track {
  display: inline-flex;
  gap: 56px;
  white-space: nowrap;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 1.1vw + 0.5rem, 18px);
  color: var(--dr-ink-soft);
  font-variation-settings: 'opsz' 36, 'SOFT' 80, 'WONK' 1;
  animation: dr-ticker-scroll 90s linear infinite;
  will-change: transform;
  opacity: 0.78;
}
.dr-ticker-track > span { flex-shrink: 0; letter-spacing: 0.005em; }
.dr-ticker-track > span.dr-ticker-sep {
  color: var(--dr-clay);
  opacity: 0.55;
  font-style: normal;
}
@keyframes dr-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) and (pointer: fine) {
  .dr-ticker:hover .dr-ticker-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .dr-ticker-track { animation: none; transform: translate3d(0,0,0); }
}