/* Nine-slice parchment: 65px source slices preserve corner details and pins.
   border-image-repeat:stretch stretches only edge strips along their length;
   the centre texture fills the content area. */
.world-grid .story-card {
  --card-rotation:-1deg;
  width:min(100%,500px);
  margin:0 auto;
  border:34px solid transparent;
  border-image-source:url("./assets/parchment-1000w-transparent.webp");
  border-image-slice:65 fill;
  border-image-width:34px;
  border-image-outset:0;
  border-image-repeat:stretch;
  padding:9px 8px 8px;
  transform:rotate(var(--card-rotation));
  transform-origin:center center;
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  color:var(--ink);
  filter:drop-shadow(0 8px 10px #0009);
}
.world-grid .story-card--square { --card-rotation:0deg; }
.world-grid .story-card--tilt-left { --card-rotation:-1deg; }
.world-grid .story-card--tilt-right { --card-rotation:1deg; }

.world-grid .story-card__header { text-align:center; padding:0 4px 12px; }
.world-grid .story-card__header h2 {
  /* Match the handwritten character-name lettering from the character cards. */
  margin:0; color:#17120d; font-family:"Bangers",cursive;
  font-style:normal; font-weight:400; letter-spacing:.025em;
  font-size:clamp(1.45rem,6vw,2.1rem); line-height:1.05;
  text-transform:uppercase; overflow-wrap:anywhere;
}
.world-grid .story-card__image {
  width:100%; aspect-ratio:4 / 3; overflow:hidden;
  border:2px solid #24180e; background:#182720;
}
.world-grid .story-card__image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.world-grid .story-card__text {
  width:94%; margin:15px auto 17px; color:var(--ink);
  /* Match the approved character-card body typography (v26). */
  font-family:"Kalam",cursive; font-size:clamp(1rem,4vw,1.1rem);
  font-weight:400; line-height:1.2; letter-spacing:0; text-align:left;
}
@media (max-width:420px) {
  .world-grid .story-card__text { font-size:1.08rem; line-height:1.2; }
}
.story-card__button {
  align-self:center; display:inline-flex; justify-content:center; align-items:center;
  gap:12px; max-width:100%; padding:9px 17px;
  color:#21170d; background:var(--yellow); border:2px solid #80510f;
  border-radius:12px; box-shadow:inset 0 1px 0 #ffe68c,0 3px 0 #8b5b19;
  text-decoration:none; font-family:"Kalam",cursive; font-size:1.02rem;
  font-weight:700; line-height:1.1;
}
.story-card__button span { font-size:1.15em; }
.story-card__button:focus-visible { outline:3px solid white; outline-offset:4px; }


/* Integration adapter: only layout changes; the canonical v32 card styles above remain intact. */
.world-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:stretch; }
.world-grid > .story-card {
  box-sizing:border-box; width:100%; min-width:0; max-width:500px; margin:0 auto;
  background:transparent; padding:9px 8px 8px; border:34px solid transparent;
  border-image-source:url("./assets/parchment-1000w-transparent.webp");
  border-image-slice:65 fill; border-image-width:34px; border-image-repeat:stretch;
}
.world-grid > .story-card .story-card__header { text-align:center; padding:0 4px 12px; }
.world-grid > .story-card .story-card__header h2 {
  margin:0; color:#17120d; font-family:"Bangers",cursive; font-weight:400;
  letter-spacing:.025em; text-transform:uppercase; line-height:1.05;
  font-size:clamp(1.3rem,2.3vw,2rem); overflow-wrap:anywhere;
}
.world-grid > .story-card .story-card__image {
  width:100%; height:auto; aspect-ratio:16/10; overflow:hidden;
  border:2px solid #24180e; background:#182720;
}
.world-grid > .story-card .story-card__image img,
.world-grid > .story-card .story-card__image .placeholder {
  display:block; width:100%; height:100%; object-fit:cover;
}
.world-grid > .story-card .story-card__text {
  width:94%; margin:15px auto 17px; color:#24180e;
  font-family:"Kalam",cursive; font-size:clamp(1rem,1.5vw,1.1rem);
  font-weight:400; line-height:1.2; text-align:left;
}
@media(max-width:800px) {
  .world-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .world-grid > .story-card { width:min(100%,500px); }
  .world-grid > .story-card .story-card__header h2 { font-size:clamp(1.45rem,6vw,2.1rem); }
  .world-grid > .story-card .story-card__image { aspect-ratio:16/10; }
  .world-grid > .story-card .story-card__text { font-size:1.08rem; }
}