/* chalkthis.io as a comic book (Nov 13, 2026). Loaded last on every page except Draw My Business, after pop.css (the
   whole-site comic skin) and comic.css (panels, captions, balloons, sound effects). Colors and type stay the kit's.
   This sheet holds the homepage's comic hero, seven scenes that slide to the left (scripts/home/comic.mjs), and the
   small finishing touches that make the rest of the site match the Winter Warm-up page.
   All lettering is real text; the pictures carry none. */

/* ---------- the comic hero: a row of scenes ---------- */
.cx-hero { position: relative; isolation: isolate; overflow: hidden; padding: 118px 0 30px; background-color: var(--pop-navy); background-image: var(--pop-dots-light); background-size: 9px 9px; border-bottom: 6px solid var(--pop-ink); color: var(--pop-cream); }
.cx-hero .cm-snow { z-index: 0; }
.cx-wrap { position: relative; z-index: 1; }

/* The row: one scene fills it, the next waits just off the right edge. Without JavaScript it scrolls sideways
   (swipe, trackpad, or the numbered tabs, which are links to each scene). */
.cx-track { display: flex; gap: 40px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 18px 18px 22px 4px; margin: -18px -18px -22px -4px; }
.cx-track::-webkit-scrollbar { display: none; }
.cx-track:focus-visible { outline: 3px solid var(--pop-mustard); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .cx-track { scroll-behavior: auto; transition: none !important; } }

.cx-scene { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 14fr); gap: 36px; align-items: center; min-width: 0; }
.cx-scene:target { scroll-margin-top: 0; }

/* The words: straight on the night page, like the Winter Warm-up cover. */
.cx-copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cx-copy > * { margin: 0; }
.cx-issue { color: var(--pop-mustard); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cx-no { display: inline-block; padding: 3px 9px; background: var(--pop-mustard); color: var(--pop-ink); border: 2px solid var(--pop-ink); box-shadow: 2px 2px 0 var(--pop-ink); }
.cx-hero .cx-title { color: var(--pop-cream); text-shadow: 4px 4px 0 var(--pop-ink); }
.cx-hero h1.cx-title { font-size: 64px; line-height: .98; }
.cx-hero h2.cx-title { font-size: 52px; line-height: 1.02; }
.cx-hero .cm-tagline { margin: -4px 0 0 !important; }
.cx-caption { position: relative; font-size: 17px; line-height: 26px; box-shadow: 5px 5px 0 var(--pop-mustard); max-width: 520px; }
.cx-caption .cm-caption-tag { margin-bottom: 4px; }
.cx-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px !important; }
.cx-hero .ck-btn--secondary { background: var(--pop-cream); color: var(--pop-ink); }
.home a.cx-more { align-self: flex-start; color: var(--pop-mustard); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.home a.cx-more:hover { color: var(--pop-cream); }
.cx-more:focus-visible { outline: 3px solid var(--pop-mustard); outline-offset: 3px; }

/* The sign-up cards inside the scenes (the Winter Warm-up claim, the free snapshot). */
.cx-hero .home-ask-card { max-width: 520px; margin: 0; background: var(--pop-cream); color: var(--pop-ink); box-shadow: 8px 8px 0 var(--pop-ink); }
.cx-hero .home-ask-card .body-l { font-size: 16px; line-height: 24px; }
.cx-hero .home-snap-card::before { display: none; }
.cx-hero .cm-claim-price strong { font-size: 38px; }
.cx-hero .home-ask-card { padding: 18px 22px; gap: 10px; }
.cx-hero .home-ask-card .home-fields { gap: 8px 12px; }
.cx-hero .home-ask-card .ck-input { height: 44px; }
.cx-hero .home-ask-card .home-form-foot { margin-top: 2px; }

/* The picture: a full comic panel, never covered by words. */
.cx-art { position: relative; margin: 0; aspect-ratio: 3 / 2; border: 5px solid #FBF7EC; outline: 3px solid var(--pop-ink); box-shadow: 14px 14px 0 rgba(4, 16, 30, .55); background: var(--pop-ink); }
.cx-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; display: block; }
.cx-scene--winter .cx-art img { object-position: 100% 100%; }
/* Sound effects sit on the panel's edge, over sky or wall, never over a face. */
.cx-sfx { z-index: 2; pointer-events: none; font-size: 54px; }
.cx-sfx--tr { right: -14px; top: -26px; bottom: auto; transform: rotate(8deg); }
.cx-sfx--bl { left: -16px; bottom: -22px; right: auto; transform: rotate(-9deg); }

/* ---------- the controls: back, the numbered scene tabs, next, pause ---------- */
.cx-controls { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.cx-tabs { display: flex; flex: 1 1 auto; min-width: 0; gap: 6px; margin: 0; padding: 4px 6px 8px 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tabs li { flex: none; }
.cx-tabs li:first-child { margin-left: auto; }
.cx-tabs li:last-child { margin-right: auto; }
.cx-tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; overflow: hidden; background: rgba(238, 232, 226, .1); color: var(--pop-cream); border: 2px solid rgba(238, 232, 226, .5); font-family: var(--font-sans); font-weight: 700; font-size: 13px; line-height: 18px; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, transform .15s; }
.cx-tab:hover { background: rgba(238, 232, 226, .22); }
.cx-tab:focus-visible { outline: 3px solid var(--pop-mustard); outline-offset: 2px; }
.cx-tab-no { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pop-cream); color: var(--pop-ink); font-family: var(--font-display); font-weight: 900; font-size: 14px; }
.cx-hero .cx-tab[aria-current="true"], .cx-hero .cx-tab[aria-current="true"]:hover { background: var(--pop-mustard); color: var(--pop-ink); border-color: var(--pop-ink); box-shadow: 3px 3px 0 var(--pop-ink); transform: translate(-1px, -1px); }
.cx-tab[aria-current="true"] .cx-tab-no { background: var(--pop-ink); color: var(--pop-mustard); }
/* While the scenes move on by themselves, the current tab fills up until the next scene. */
.cx-tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--pop-ink); }
.cx-hero.is-playing .cx-tab[aria-current="true"]::after { animation: cx-fill var(--cx-ms, 8000ms) linear forwards; }
@keyframes cx-fill { to { width: 100%; } }

.cx-arrow, .cx-pause { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 3px solid var(--pop-ink); background: var(--pop-mustard); color: var(--pop-ink); box-shadow: 4px 4px 0 var(--pop-ink); cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 14px; }
.cx-arrow { width: 48px; border-radius: 50%; }
.cx-pause { padding: 0 12px; background: var(--pop-cream); border-radius: 6px; }
.cx-arrow:hover, .cx-pause:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--pop-ink); }
.cx-arrow:active, .cx-pause:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pop-ink); }
.cx-arrow:focus-visible, .cx-pause:focus-visible { outline: 3px solid var(--pop-cream); outline-offset: 3px; }
.cx-arrow[hidden], .cx-pause[hidden] { display: none; }
.cx-pause-icon { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.cx-pause[aria-pressed="true"] .cx-pause-icon { width: 0; height: 0; border-left: 12px solid currentColor; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

/* ---------- the rest of the homepage, in the same comic ---------- */
/* The workflow cards: each picture is a landscape comic panel now, not a clay figure on a stand. */
.comic .home-service .home-stand { max-width: none; }
.comic .home-service .home-stand img { aspect-ratio: 3 / 2; }
.comic .home-custom-art .home-stand img { aspect-ratio: 1 / 1; }
.comic .home-team-face { background: #FBF7EC; }
/* A "chapter" tag above each section heading, like the Winter Warm-up page. */
.comic #workflows .home-head > h2::before, .comic #how .home-head > h2::before { display: block; width: max-content; margin-bottom: 14px; padding: 5px 12px; background: var(--pop-ink); color: var(--pop-mustard); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-shadow: none; }
.comic #workflows .home-head > h2::before { content: "the lineup"; }
.comic #how .home-head > h2::before { content: "how we start"; }

/* ---------- narrower screens ---------- */
@media (max-width: 1080px) {
  .cx-hero h1.cx-title { font-size: 60px; }
  .cx-hero h2.cx-title { font-size: 42px; }
  .cx-scene { gap: 26px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Phones and small tablets: the picture on top, the words under it. */
@media (max-width: 860px) {
  .cx-hero { padding: 96px 0 28px; }
  /* Each scene keeps its own height on a phone (site.js fits the row to the scene showing). */
  .cx-track { gap: 24px; align-items: flex-start; transition: height .3s ease; }
  .cx-scene { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 22px; }
  .cx-art { order: -1; }
  .cx-hero h1.cx-title { font-size: 48px; }
  .cx-hero h2.cx-title { font-size: 34px; }
  .cx-sfx { font-size: 38px; }
  .cx-sfx--tr { right: -6px; top: -16px; }
  .cx-sfx--bl { left: 6px; bottom: 4px; }
  .cx-caption { font-size: 16px; line-height: 24px; }
  .cx-controls { flex-wrap: wrap; margin-top: 26px; }
  .cx-tabs { order: -1; flex-basis: 100%; }
  .cx-controls .cx-arrow { width: 44px; height: 44px; }
  .cx-pause { margin-left: auto; height: 44px; }
}
@media (max-width: 520px) {
  .cx-hero h1.cx-title { font-size: 42px; }
  .cx-hero h2.cx-title { font-size: 30px; }
  .cx-hero .home-fields { grid-template-columns: minmax(0, 1fr); }
  .cx-ctas .ck-btn { flex: 1 1 auto; justify-content: center; }
  .cx-art { box-shadow: 8px 8px 0 rgba(4, 16, 30, .55); }
}

/* ---------- the workflow pages ---------- */
/* The "example" note hangs off the bottom of the picture, so it never covers what the picture shows (Joe's rule:
   captions never cover a face, a balloon or other words, and every picture shows what its caption says). */
@media (min-width: 861px) {
  .comic .wf-hero-art { margin-bottom: 64px; }
  .comic .wf-example { top: calc(100% - 22px); bottom: auto; left: -24px; }
}

/* ---------- the A(i)-Team ---------- */
/* "start here" rides on the role line, not on the portrait, so it never covers a face (Joe's rule). Each portrait has
   its own background color (mustard, coral, teal, sky blue), drawn into the picture. */
.comic .home-team-tag { position: static; margin-left: 8px; transform: rotate(-2deg); vertical-align: middle; }
.comic .home-team-role { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.comic .home-team-role .home-team-tag { flex: none; }