/* Catalogue chapters on the shared motion-webtoon engine (work/catalogue/build_engine.py).
   The engine and its CSS stay shared; this adds each story's look: logo face, field tones, feathered art and big text beats. */

/* cover logo in the story's own face */
.cover .logo.cat-logo{font:700 clamp(30px,9.5cqw,54px)/.98 var(--cat-logo-f);color:#fff;text-wrap:balance;letter-spacing:0;
  text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.6)}
.cover .kicker{letter-spacing:.14em}

/* borderless art that melts into the field colour */
.panel.cat-feather .art{box-shadow:none}
.panel.cat-feather .art>img.media,.panel.cat-feather .art>video.media{
  -webkit-mask-image:linear-gradient(#0000 0,#000 8%,#000 92%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 8%,#000 92%,#0000 100%)}

/* chapter title card at the top of the strip */
.tag.cat-chap{text-align:center;font:800 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--cat-acc)}
.tag.cat-chap-title{text-align:center;font:700 clamp(30px,9cqw,50px)/1 var(--cat-logo-f);color:var(--cat-ink,#1d1817);text-wrap:balance}

/* narration that owns the screen */
.tag.cat-big{text-align:center;white-space:pre-line;font:800 clamp(19px,5.6cqw,31px)/1.2 'Shantell Sans',system-ui,sans-serif;color:var(--cat-ink,#1d1817);
  text-transform:uppercase;letter-spacing:.01em;translate:0 10px;transition:opacity .45s,translate .6s cubic-bezier(.2,.8,.2,1)!important}
.tag.cat-big.on{translate:none}

/* light fields: dark ink; dark fields: light ink */
body{--cat-ink:#1d1817}
body[data-tone=dusk],body[data-tone=night],body[data-tone=void]{--cat-ink:#f2ece4}

/* sfx in the story's accent */
body[data-look] .sfx{color:var(--cat-acc)}
body[data-look=zine] .sfx,body[data-look=noir] .sfx{color:#f4f4f0;-webkit-text-stroke-color:#000}

/* per-look field tints (the engine's tones, recoloured to each look's paper) */
body[data-look=riso]{--t-cream:#f3eee4;--t-linen:#efe6da;--t-day:#f3eee4}
body[data-look=watercolour]{--t-cream:#faf7f0;--t-linen:#f4efe4;--t-day:#f7f6f1}
body[data-look=flatprint]{--t-cream:#ece5d8;--t-linen:#e4dccd;--t-dusk:#3a3140;--t-night:#241e29}
body[data-look=gouache]{--t-cream:#f1e6d2;--t-linen:#eadcc3;--t-dusk:#3b2a20}
body[data-look=nouveau]{--t-cream:#f6f0e3;--t-linen:#efe5cf;--t-dusk:#2a2238;--t-night:#18132a}
body[data-look=cutpaper]{--t-cream:#f4e9d8;--t-linen:#ecdcc4;--t-dusk:#264653;--t-night:#1b323b}
body[data-look=ballpoint]{--t-day:#f7f7f2;--t-cream:#f7f7f2;--t-linen:#efefe8}
body[data-look=chibi]{--t-cream:#fff8e6;--t-linen:#ffefd0;--t-day:#eef8ff}
body[data-look=neoncel]{--t-night:#11141c;--t-void:#07090e;--t-dusk:#1c2230}
body[data-look=retrocel]{--t-dusk:#1f2433;--t-night:#151927;--t-cream:#f4ebe0}
body[data-look=noir]{--t-night:#141516;--t-void:#0a0a0b;--t-dusk:#26282b;--t-ash:#cfcfcb}
body[data-look=zine]{--t-void:#0d0d0d;--t-night:#121212;--t-ash:#d8d8d2}
body[data-look=boldink]{--t-day:#f4f3ef;--t-cream:#f4f3ef;--t-night:#141414}

/* notify cards: a neutral message icon in the story's accent instead of Family Chat's "L" */
body[data-look] .notify .nt-icon{font-size:0;background:var(--cat-acc)}
body[data-look] .notify .nt-icon::after{content:"";width:19px;height:14px;border-radius:7px;background:#fff;box-shadow:-5px 6px 0 -4px #fff}

/* edge to edge: gutters between pictures are a clean blend from the colours along the bottom of the panel above
   into the colours along the top of the panel below (catalogue-reader.js), never a flat band or blurred mush */
.gutter.cat-blend{position:relative;z-index:3}
.strip{overflow-x:clip}

/* circle reaction insets overlap the bottom of the panel above, like a webtoon inset, instead of floating on a band */
body[data-look] .strip .panel.cat-inset{position:relative;z-index:2;margin-top:calc(var(--w,64) * var(--u) * -.7)!important;margin-bottom:calc(var(--w,64) * var(--u) * -.3)!important}
.panel.cat-inset .art{filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
body[data-look] .strip .panel.cat-inset.cat-inset-up{margin-top:calc(var(--w,64) * var(--u) * -1 - 3 * var(--u))!important;margin-bottom:calc(3 * var(--u))!important}

/* ---- from the murim panelling study (docs/murim-panelling-study.md §3.5–3.6): lettering and SFX coloured by meaning ---- */
/* SFX by meaning: mundane pastel handwriting, violence red-black brush, magic gold glow, speed neon, stage-direction words */
.sfx.cat-mundane{font-family:'Patrick Hand',cursive;color:#a596b8;-webkit-text-stroke:0;letter-spacing:.06em;font-size:clamp(24px,calc(7 * var(--u)),44px)}
.sfx.cat-violence{color:#7d0f14;-webkit-text-stroke:.06em #120606;text-shadow:.05em .05em 0 #ffffff55;letter-spacing:.01em}
.sfx.cat-magic{color:#ffd56a;-webkit-text-stroke:.05em #6b3d00;text-shadow:0 0 12px #ffb32e,0 0 26px #ff8a00aa}
.sfx.cat-speed{color:#9ff3ff;-webkit-text-stroke:.05em #05313a;text-shadow:0 0 10px #22e6ff,0 0 22px #22e6ff88;font-style:italic}
.sfx.cat-stage{font:600 clamp(14px,calc(4 * var(--u)),22px)/1 'Patrick Hand',cursive;color:#8f8a96;-webkit-text-stroke:0;letter-spacing:.18em;text-shadow:none}
/* bare narration tinted by meaning: red death, purple grief, blue resolve, gold power */
.tag.cat-big.cat-tint-red{color:#b3121c}
.tag.cat-big.cat-tint-purple{color:#7b4fa0}
.tag.cat-big.cat-tint-blue{color:#3f5fc2}
.tag.cat-big.cat-tint-gold{color:#b88a1e}
body[data-tone=dusk] .tag.cat-big.cat-tint-red,body[data-tone=night] .tag.cat-big.cat-tint-red,body[data-tone=void] .tag.cat-big.cat-tint-red{color:#ff4a52}
body[data-tone=dusk] .tag.cat-big.cat-tint-purple,body[data-tone=night] .tag.cat-big.cat-tint-purple,body[data-tone=void] .tag.cat-big.cat-tint-purple{color:#c6a3ec}
body[data-tone=dusk] .tag.cat-big.cat-tint-blue,body[data-tone=night] .tag.cat-big.cat-tint-blue,body[data-tone=void] .tag.cat-big.cat-tint-blue{color:#8fb0ff}
body[data-tone=dusk] .tag.cat-big.cat-tint-gold,body[data-tone=night] .tag.cat-big.cat-tint-gold,body[data-tone=void] .tag.cat-big.cat-tint-gold{color:#f2c45a}
/* place card: a ragged ink brush-stroke label */
.tag.cat-place{display:inline-block;width:auto!important;padding:.35em 1.1em .4em;font:700 clamp(15px,calc(4.4 * var(--u)),24px)/1 var(--cat-logo-f);letter-spacing:.08em;color:#f6f1e8;
  background:#141010;clip-path:polygon(2% 12%,10% 0,40% 6%,72% 0,98% 8%,100% 55%,96% 100%,60% 92%,28% 100%,4% 90%,0 50%);transform:rotate(-1.5deg)}
/* symbol beat: a giant ! or ?! drawn as an object, alone in the field */
.tag.cat-symbol{text-align:center;font:400 clamp(90px,calc(30 * var(--u)),190px)/1 Bangers,Impact,sans-serif;color:var(--cat-acc);-webkit-text-stroke:.03em var(--cat-ink);paint-order:stroke fill;
  transform:scale(.6) rotate(-6deg);transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .2s!important}
.tag.cat-symbol.on{transform:none}
/* bubbles: text sits centred in every bubble; thought clouds get room inside their scalloped edge */
.bubble.caption .copy,.bubble.thought .copy{text-align:center}
.bubble.thought .copy{padding:1.05em 1.6em}
.gag-enabled .bubble.shout .copy{padding:1.15em 1.5em}
.bubble .bub{isolation:isolate}