/* Theme colors form the card surface; ink is chosen separately for legibility. */
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card {
  --card-accent: var(--sector0, var(--gold));
  --card-light: color-mix(in srgb, var(--card-accent) 34%, var(--panel));
  --card-fill: color-mix(in srgb, var(--card-accent) 48%, var(--panel));
  --card-shade: color-mix(in srgb, var(--card-accent) 56%, var(--panel));
  --card-ink: color-mix(in srgb, var(--text) 50%, #111c1a);
  --card-copy: color-mix(in srgb, var(--card-ink) 95%, var(--card-fill));
  --card-rule: color-mix(in srgb, var(--card-ink) 24%, transparent);
  --card-badge: color-mix(in srgb, var(--card-fill) 70%, var(--panel));
  --card-ornament: color-mix(in srgb, var(--card-ink) 65%, var(--card-accent));
  --card-sheen: color-mix(in srgb, var(--panel) 30%, transparent);
  color: var(--card-ink);
  background: radial-gradient(ellipse at 100% 0%, var(--card-sheen), transparent 62%),
    linear-gradient(145deg, var(--card-light), var(--card-fill) 48%, var(--card-shade));
  border-color: color-mix(in srgb, var(--card-accent) 50%, var(--line));
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card:nth-child(3n + 2) {
  --card-accent: var(--sector1, var(--cyan));
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card:nth-child(3n) {
  --card-accent: var(--sector2, var(--meiers));
}
html:is([data-design="a"],[data-design="c"])[data-palette][data-theme="dark"] .stories-page .library-grid .story-card {
  --card-light: color-mix(in srgb, var(--card-accent) 22%, var(--panel));
  --card-fill: color-mix(in srgb, var(--card-accent) 28%, var(--panel));
  --card-shade: color-mix(in srgb, var(--card-accent) 32%, var(--panel));
  --card-ink: color-mix(in srgb, var(--text) 92%, #fffdf6);
  --card-copy: color-mix(in srgb, var(--card-ink) 93%, var(--card-fill));
  --card-badge: color-mix(in srgb, var(--card-fill) 70%, var(--panel));
  --card-sheen: color-mix(in srgb, var(--card-accent) 7%, transparent);
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card::before {
  content: "";
  display: block;
  position: absolute;
  inset: 10px;
  width: auto;
  height: auto;
  background: transparent;
  border: 1px solid var(--card-rule);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
html[data-design="a"] .stories-page .library-grid .story-card {
  border-left: 3px solid var(--card-accent);
}
html[data-design="c"] .stories-page .library-grid .story-card::before {
  inset: 8px;
  border-color: var(--card-rule);
  opacity: .65;
}
html[data-design="c"] .stories-page .library-grid .book-trim,
html[data-design="c"] .stories-page .library-grid .book-trim .detail-finial {
  color: var(--card-ornament);
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-top .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 9px;
  color: var(--card-ink);
  background: var(--card-badge);
  border: 1px solid var(--card-rule);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .06em;
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-top .eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--card-accent);
  transform: rotate(45deg);
}
html[data-design="c"] .stories-page .library-grid .story-top .eyebrow {
  border-radius: 16px 4px 16px 4px;
}
html[data-design="c"] .stories-page .library-grid .story-top .eyebrow::before {
  border-radius: 50%;
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card .story-tag {
  color: var(--card-copy);
  font-size: 12px;
  line-height: 1.8;
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card h2 a {
  color: var(--card-ink);
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card .story-summary {
  color: var(--card-copy);
  font-size: 14px;
  line-height: 1.95;
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card .story-stats,
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card .story-stats p,
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card .text-link {
  color: var(--card-copy);
  font-size: 13px;
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card .text-link {
  color: var(--card-ink);
  border-bottom: 1px solid var(--card-rule);
  padding-bottom: 3px;
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-bottom {
  border-top: 1px solid color-mix(in srgb, var(--card-ink) 16%, transparent);
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card:focus-within {
  border-color: var(--card-accent);
}
html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card a:focus-visible {
  outline: 2px solid var(--card-ink);
  outline-offset: 4px;
}
@media (hover: hover) {
  html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card:hover {
    border-color: var(--card-accent);
  }
  html:is([data-design="a"],[data-design="c"])[data-palette] .stories-page .library-grid .story-card a:hover {
    color: var(--card-ink);
    text-decoration: underline;
    text-decoration-color: var(--card-ink);
    text-underline-offset: 5px;
  }
}