/* Size typography against the card, including cards embedded in the effect gallery. */
.story-card{container-type:inline-size}
.story-card h3{font-size:clamp(18px,7.4cqi,23px)}
.story-card .story-kind{font-size:clamp(10px,4cqi,12px)!important;line-height:1.2}
.story-card .story-desc{
 top:69%;bottom:5.5%;left:9%;right:9%;
 gap:1cqi;font-size:clamp(12px,4.7cqi,15px);line-height:1.4;
 color:#35230f;text-shadow:none;font-weight:600;
}
.story-card .story-desc strong{
 flex:none;margin:0;font-size:.94em;line-height:1.25;color:#563415;
 white-space:nowrap;
}
.story-card .story-desc>span{display:block;flex:none;white-space:pre-line}
.story-card .story-desc::selection,.story-card .story-desc *::selection{background:#674422;color:#fff7e5}
.story-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
@media(max-width:880px){
 .story-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
 .story-card-grid{grid-template-columns:minmax(0,1fr);max-width:310px;margin-inline:auto}
}
/* A readable card gets its own row instead of becoming a miniature thumbnail. */
@media(max-width:620px){
 .detail{display:block}
 .detail #card-display{width:100%;max-width:290px;margin:0 auto 22px}
 .detail #detail-note{font-size:12px}
 .detail .result{margin-top:16px}
}