/* ---------- Builder helpers ---------- */
.cm-dark .elementor-heading-title { color: var(--cm-ivory) !important; }
.cm-dark .cm-eyebrow .elementor-heading-title { color: var(--cm-yellow) !important; }
.cm-eyebrow .elementor-heading-title { color: var(--cm-coral-dark) !important; }
.cm-kicker p, .cm-note p { margin: 0; }
.cm-note .cm-hand { display: inline-block; transform: rotate(-3deg); color: var(--cm-muted) !important; font-size: 24px !important; }
.cm-kicker .cm-hand { font-size: 24px !important; }
.cm-card { background: #fff; border: 2px solid var(--cm-ink); border-radius: 14px; box-shadow: 8px 8px 0 var(--cm-ink); }
.cm-ideas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cm-ideas li { position: relative; padding-left: 28px; color: var(--cm-ink); }
.cm-ideas li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 14px; border-radius: 50%; background: var(--cm-coral); border: 2px solid var(--cm-ink); }
.cm-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cm-tile-text { align-items: center; justify-content: center; text-align: center; min-height: 88px; }
.cm-btn-on-dark .elementor-button { border-color: var(--cm-ivory) !important; color: var(--cm-ivory) !important; }
.cm-btn-on-dark .elementor-button:hover { background: var(--cm-ivory) !important; color: var(--cm-ink) !important; }
.cm-seo-block { border-top: 1px solid var(--cm-line); padding-top: 40px !important; }
.cm-section .rank-math-breadcrumb p { margin: 0; font-size: 14px; color: var(--cm-muted); }
.cm-section .rank-math-breadcrumb a { color: var(--cm-muted); }

/* ---------- Real artwork layouts (v1.1) ---------- */
.cm-ba-solo { position: relative; max-width: 470px; margin: 0 auto; transform: rotate(1.5deg); }
.cm-ba-solo .cm-media img { display: block; width: 100%; height: auto; }
.cm-ba-cap { position: absolute; left: -18px; bottom: 28px; margin: 0; background: var(--cm-yellow); border: 2px solid var(--cm-ink); border-radius: 8px; padding: 4px 14px; transform: rotate(-5deg); font-size: 24px !important; color: var(--cm-ink) !important; }
.cm-story-real { max-width: 1000px; }
.cm-story-art { width: var(--w, 100%); margin: 0 auto; }
.cm-story-art .cm-media img { display: block; width: 100%; height: auto; }
.cm-review-art { max-width: 320px; }
.cm-review-art .cm-frame { box-shadow: 6px 6px 0 var(--cm-ink); }
.cm-review-art .cm-media img { display: block; width: 100%; height: auto; }
.cm-strip-item .cm-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
	.cm-story-art { width: 100%; }
	.cm-ba-solo { max-width: 360px; }
	.cm-ba-cap { left: -6px; font-size: 20px !important; }
}
.cm-anno-left { flex-direction: row-reverse; }
@media (max-width: 820px) {
	.cm-story-real { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
	.cm-story-real .cm-story-art { flex: 0 0 100%; margin-bottom: 14px; }
	.cm-story-real .cm-anno { position: static; }
	.cm-story-real .cm-anno i { display: none; }
}

/* ---------- Hand-drawn loop, drawn as a pen stroke (v1.1.2) ---------- */
.cm-circle.has-loop::after { display: none; }
.cm-circle .cm-loop {
	position: absolute; left: -7%; top: -16%; width: 114%; height: 132%;
	overflow: visible; pointer-events: none;
}
.cm-circle .cm-loop path {
	fill: none; stroke: var(--cm-coral); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 1; stroke-dashoffset: 1;
}
.cm-circle.is-in .cm-loop path { animation: cm-loop 1.15s cubic-bezier(.55, .1, .35, 1) .25s forwards; }
@keyframes cm-loop { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
	.cm-circle .cm-loop path, .cm-circle.is-in .cm-loop path { animation: none; stroke-dashoffset: 0; }
}

/* Long circled phrases (v1.1.3): never wider than their column. A phrase that fits stays on one line;
   one that doesn't wraps onto balanced lines inside the loop instead of running under the image. */
.cm-circle { white-space: normal; max-width: 100%; text-wrap: balance; }
.cm-h1 .elementor-heading-title, .cm-h2 .elementor-heading-title { overflow-wrap: break-word; }