/* Book introductions (#/book/<Book>/intro) and the "Introduction to …" cards. Data: data/books/*.json */
.introcard { display: block; margin: 1.2rem 0 1.4rem; padding: 1rem 1.2rem 1.05rem; background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--gold); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s; }
.introcard:hover { transform: translateY(-2px); border-color: var(--gold); }
.introcard span { display: block; }
.introcard .ic-eye { font-family: var(--sans); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.introcard .ic-t { font-family: var(--display); font-size: 1.45rem; font-weight: 700; line-height: 1.2; margin: .15rem 0 .1rem; }
.introcard .ic-s { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }
.introcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .9rem; }
.introcards .introcard { margin: 0; }

.timingbox { margin: 0 0 1.4rem; padding: .9rem 1.2rem 1rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); }
.timingbox h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.timingbox p { margin: 0 0 .5rem; line-height: 1.6; }
.timingbox a { font-family: var(--sans); font-size: .85rem; }
.intro-brief { font-size: 1.05rem; padding: .7rem 1rem; border-left: 3px solid var(--gold); background: var(--paper); border-radius: var(--radius); }

.intro { max-width: 46rem; }
.intro h1 { margin-bottom: .1rem; }
.intro-sub { font-family: var(--display); font-style: italic; font-size: 1.35rem; color: var(--ink-soft); margin: 0 0 .6rem; }
.intro-actions { margin: 1rem 0 .4rem; }
.intro-glance { margin-bottom: 1.2rem; }
.intro-toc { margin: 1.6rem 0 .6rem; padding: .9rem 1.1rem .3rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); }
.intro-toc .eyebrow { margin: 0 0 .2rem; }
.intro-sec { scroll-margin-top: 5rem; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.intro-sec > h2 { margin-top: 0; }
.intro-part h3 { font-family: var(--display); font-size: 1.2rem; margin: 1.4rem 0 .4rem; }
.intro p { line-height: 1.7; }
.intro-outline { list-style: none; padding: 0; margin: .8rem 0 1rem; counter-reset: io; }
.intro-outline li { counter-increment: io; display: grid; grid-template-columns: 2rem 7.5rem 1fr; gap: .2rem .6rem; padding: .5rem 0; border-bottom: 1px dotted var(--rule); font-size: .95rem; }
.intro-outline li::before { content: counter(io) "."; color: var(--gold); font-family: var(--display); font-weight: 700; }
.intro-outline .io-ref { font-family: var(--sans); font-size: .8rem; color: var(--muted); padding-top: .15rem; }
@media (max-width: 560px) {
  .intro-outline li { grid-template-columns: 1.6rem 1fr; }
  .intro-outline .io-ref { grid-column: 2; padding-top: 0; }
  .intro-outline li > :last-child { grid-column: 2; }
}

@media print {
  .intro-actions, .intro-toc, .footer, .comments, .suggest, .ask-fab, .ask-panel, .topbar, .mainnav, .totop, .intro-slot { display: none !important; }
  body, .intro-toc, .introcard { background: #fff !important; box-shadow: none !important; }
  #app, .intro { max-width: none; margin: 0; padding: 0; }
  .intro { font-size: 11pt; color: #000; }
  .intro h1 { font-size: 24pt; }
  .intro .eyebrow a { color: inherit; text-decoration: none; }
  .intro-sec { border-top: 1px solid #bbb; margin-top: 14pt; padding-top: 8pt; }
  .intro h2, .intro h3 { break-after: avoid; page-break-after: avoid; }
  .keyverse, .src, .src blockquote, .intro-outline li, .props div, .bul li { break-inside: avoid; page-break-inside: avoid; }
  .links { display: block; }
  .links li { margin: 0 0 4pt; break-inside: avoid; }
  .links a { border: 0; padding: 0; background: none; }
  .links a::after { content: " — " attr(href); font-family: var(--sans); font-size: 8pt; color: #444; word-break: break-all; }
  .fade-in { animation: none !important; opacity: 1 !important; transform: none !important; }
}