.catalog{display:flex; flex-direction:column; min-height:0;}
  .tabs{display:flex; gap:6px; align-items:flex-end; padding-left:6px;}
  .tab{
    flex:1; min-width:0; font-family:'Special Elite',monospace; font-size:clamp(11px,.95vw,13px);
    padding:9px 12px 12px; border:2px solid var(--ink); border-radius:7px 7px 0 0;
    background:#e3d4ad; color:var(--ink); cursor:pointer;
    display:flex; align-items:baseline; gap:8px; overflow:hidden;
    transition:transform .16s ease, background .16s; position:relative; z-index:1;
  }
  .tab:hover:not(.is-active){transform:translateY(-3px) rotate(-1.5deg);}
  .tab .num{color:var(--red); font-weight:700; flex:0 0 auto;}
  .tab--blue   .num{color:var(--num-blue);}
  .tab--green  .num{color:var(--num-green);}
  .tab--yellow .num{color:var(--num-yellow);}
  .tab--red    .num{color:var(--num-red);}
  .tab--purple .num{color:var(--num-purple);}
  .tab .lbl{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .tab.is-active{
    background:var(--card); border-bottom-color:var(--card);
    margin-bottom:-2px; z-index:3;
  }

  .body{
    --accent:var(--red);
    background:var(--card); border:2px solid var(--ink); border-radius:4px;
    padding:clamp(14px,2vh,20px) 26px clamp(14px,2vh,18px) 60px; position:relative;
    min-height:220px;
    background-image:repeating-linear-gradient(var(--card) 0 30px, rgba(55,87,158,.18) 30px 31px);
    background-position:0 18px; box-shadow:5px 6px 0 rgba(33,29,22,.16); overflow:visible;
  }
  .body::before{ /* red margin rule */
    content:""; position:absolute; left:40px; top:0; bottom:0; width:2px;
    background:var(--accent); opacity:.8;
  }
  .hole{
    position:absolute; left:16px; top:50%; width:13px; height:13px; border-radius:50%;
    background:var(--manila); border:2px solid var(--ink); transform:translateY(-50%);
    box-shadow:inset 1px 1px 2px rgba(0,0,0,.3);
  }
  .story-title{
    font-family:'DM Serif Display',serif; font-size:clamp(22px,2.4vw,30px);
    margin:0 0 10px; line-height:1;
  }
  .story p{font-size:clamp(13.5px,1.1vw,16px); line-height:1.45; margin:0 0 8px; color:#322d23; text-wrap:pretty;}
  .read-more{
    font-family:'Special Elite',monospace; font-size:clamp(12px,1vw,14px); color:var(--accent);
    text-decoration:none; border-bottom:1.5px solid var(--accent); display:inline-block;
    margin-top:2px; white-space:nowrap; transition:transform .18s ease;
  }
  .read-more:hover{transform:translateX(4px);}

  /* the margin rule + read-more follow the active tab's colour */
  [data-theme="blue"]   .body{--accent:var(--num-blue);}
  [data-theme="green"]  .body{--accent:var(--num-green);}
  [data-theme="yellow"] .body{--accent:var(--num-yellow);}
  [data-theme="red"]    .body{--accent:var(--num-red);}
  [data-theme="purple"] .body{--accent:var(--num-purple);}

  /* fade-in when a tab is selected */
  .story{animation:fade .28s ease both;}
  @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion:reduce){.story{animation:none;}}