/* Daily Life of the Prince, the Baby and the Stray: series look.
   Loaded only by cat-management pages and scoped to [data-series="cat-management"],
   so no other series changes. Cosy sitcom: warm paper, chunky inked lettering,
   sticker-like bubbles, panels that feel printed. */
body[data-series="cat-management"]{
  --ink:#3a2a22;
  --paper:#fbf4e6;
  --paper-2:#f4e9d6;
  --bubble:#fffdf7;
  --shadow:rgba(80,52,34,.22);
}

/* Paper: a faint risograph grain over the cream so the page isn't flat digital beige. */
body[data-series="cat-management"] .strip{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Panels: printed on the page, an inked keyline and a soft paper lift. */
/* drop-shadow follows each panel's real silhouette (slants, circles, insets), unlike box-shadow */
body[data-series="cat-management"] .panel .art{
  filter:drop-shadow(1.6px 0 0 var(--ink)) drop-shadow(-1.6px 0 0 var(--ink)) drop-shadow(0 1.6px 0 var(--ink)) drop-shadow(0 -1.6px 0 var(--ink)) drop-shadow(0 9px 9px var(--shadow));
}
body[data-series="cat-management"] .panel{padding:0 calc(2.2 * var(--u))}

/* Panels arrive with a small settle rather than just being there. */
@media (prefers-reduced-motion:no-preference){
  body[data-series="cat-management"].js .panel .art{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
}

/* Speech: chunky ink line, warm white, a hard offset shadow like a sticker. */
body[data-series="cat-management"] .bubble.speech path{
  fill:var(--bubble);stroke:var(--ink);stroke-width:3;stroke-linejoin:round;
  filter:drop-shadow(3px 4px 0 var(--shadow));
}
body[data-series="cat-management"] .bubble.speech .copy{
  color:var(--ink);font-weight:600;letter-spacing:.005em;line-height:1.22;
  font-size:clamp(16px,calc(4.35 * var(--u)),24px);
}
/* Shouts get extra weight. */
body[data-series="cat-management"] .bubble.shout .copy{font-weight:700;color:#2c1c15}

/* Thoughts: soft cloud, lighter ink, so they never read as spoken. */
body[data-series="cat-management"] .bubble.thought path,
body[data-series="cat-management"] .bubble.thought circle{fill:#fffaf1;stroke:#7a6455;stroke-width:2.2;filter:drop-shadow(2px 3px 0 rgba(80,52,34,.12))}
body[data-series="cat-management"] .bubble.thought .copy{color:#5a463b}

/* Narrator: a little cream index card with a washi-tape corner. */
body[data-series="cat-management"] .bubble.caption rect{fill:#f7ecd5;stroke:var(--ink);stroke-width:2;filter:drop-shadow(2px 3px 0 var(--shadow))}
body[data-series="cat-management"] .bubble.caption .copy{color:var(--ink);text-transform:none;letter-spacing:.01em;font-style:italic;font-weight:500}
body[data-series="cat-management"] .bubble.caption .bub{position:relative}
body[data-series="cat-management"] .bubble.caption .bub::before{
  content:"";position:absolute;z-index:2;top:-9px;left:14px;width:46px;height:16px;
  background:rgba(232,162,103,.62);transform:rotate(-6deg);border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* Phone pop-ins: a real-looking notification rather than a plain box. */
body[data-series="cat-management"] .notify{
  border-radius:20px!important;background:rgba(255,253,248,.96)!important;
  box-shadow:0 0 0 2px var(--ink),0 10px 24px -8px var(--shadow)!important;
}

/* On-art sound effects already use the bright outline style; give them a hand-printed lean. */
body[data-series="cat-management"] .sfx span{text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink),3px 4px 0 rgba(80,52,34,.25)}

@media (prefers-reduced-motion:reduce){
  body[data-series="cat-management"] .bubble path,body[data-series="cat-management"] .bubble rect{filter:none}
}

/* Shaped panels (ovals, slants) must not show the art box behind them. */
body[data-series="cat-management"] .panel .art{background:transparent}