/* Image-led browsing, scoped separately from the guide reading layouts. */
.guide-feature .guide-cover {
  display: block;
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #e8dfd2;
}
.guide-cover img,
.card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.guide-feature:hover .guide-cover { transform: none; }
.guide-feature:hover .guide-cover img,
.visual-card:hover .card-art img { transform: scale(1.035); }
.guide-feature h3 { font-size: 1.08rem; }

.guide-library .hero { padding-block: clamp(44px, 6vw, 76px) 44px; }
.guide-library .hero h1 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.guide-library .hero h1 em { font-style: normal; font-weight: inherit; }
.guide-library .card.visual-card,
.guide-library .topic-card.visual-card {
  padding: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
}
.card-art {
  display: block;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #e8dfd2;
}
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}
.guide-library .visual-card .eyebrow {
  margin-bottom: 12px;
  font-size: .66rem;
  letter-spacing: .09em;
}
.guide-library .visual-card h3,
.guide-library .visual-card h2 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.025em;
}
.guide-library .topic-card h2 { font-size: 1.8rem; }
.guide-library .visual-card p:not(.eyebrow) { font-size: .88rem; line-height: 1.7; }
.guide-library .visual-card .card-body > span { padding-top: 6px; font-size: .84rem; }
.guide-library .topic-card .card-art { aspect-ratio: 3 / 2; }

/* Live type stays sharp at every card size and leaves the presenter unobstructed. */
.thumbnail-cover {
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  border-radius: 18px;
  background: #18212e;
}
.thumbnail-kicker,
.thumbnail-title {
  position: absolute;
  left: 5.5%;
  z-index: 1;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  pointer-events: none;
}
.thumbnail-kicker {
  top: 7.5%;
  color: #ffd29e;
  font-size: 10px;
  font-size: clamp(8px, 2.5cqw, 17px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: .14em;
}
.thumbnail-title {
  top: 17%;
  width: 54%;
  color: #fffaf1;
  font-size: 26px;
  font-size: clamp(15px, 6.7cqw, 62px);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -.045em;
  text-shadow: 0 2px 8px #11192766;
}
.thumbnail-title > div,
.thumbnail-title em { display: block; white-space: nowrap; }
.thumbnail-title em { color: #ffd29e; font-style: normal; font-weight: inherit; }

/* The guide opening uses a real cover image; chapter content keeps its reading styles. */
.illustrated-guide .cover {
  background: #f8f5ee;
  color: #18212e;
  border-bottom: 1px solid #d9d5ca;
}
.illustrated-guide .cover-label { color: #a8451c; }
.illustrated-guide .cover-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: center;
}
.illustrated-guide .cover h1 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.5rem, 4.3vw, 4.5rem);
  font-weight: 750;
  letter-spacing: -.05em;
  line-height: 1.07;
  overflow-wrap: anywhere;
}
.illustrated-guide .cover h1 em { color: #a8451c; font-style: normal; }
.illustrated-guide .cover-subtitle {
  color: #53616e;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
}
.illustrated-guide .cover-art { width: 100%; max-width: none; margin: 0; }
.illustrated-guide .cover-art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 18px;
}
.illustrated-guide .cover-bottom { color: #53616e; border-color: #d9d5ca; }
.illustrated-guide .cover-bottom a { color: #a8451c; border-color: #a8451c; }
@media (max-width: 680px) {
  .illustrated-guide .cover-grid { grid-template-columns: 1fr; gap: 24px; }
  .illustrated-guide .cover h1 { font-size: clamp(2.45rem, 10vw, 3.6rem); }
  .illustrated-guide .cover-art { max-width: 520px; margin-inline: auto; }
  .card-body { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-cover img, .card-art img { transition: none; }
  .guide-feature:hover .guide-cover img,
  .visual-card:hover .card-art img { transform: none; }
}
@media print {
  .illustrated-guide .cover { background: white; }
  .illustrated-guide .cover h1 { font-size: 36pt; }
  .illustrated-guide .cover-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .illustrated-guide .cover-art img { max-height: 220px; object-fit: contain; }
}