/* Version B: Instagram-story style.
   Orange runs the full length of the page, content sits on white rounded cards,
   and key headings are black label blocks with white type.
   Loaded after site.css only when built with --theme b. */

.theme-b {
  --card-radius: 22px;
  --card-shadow: 0 22px 44px -24px rgba(70, 35, 0, 0.55);
  --card-gap: clamp(1.25rem, 3vw, 2.25rem);
  --card-pad: clamp(1.5rem, 4.5vw, 3.75rem);
  background: var(--orange);
}

.theme-b main { padding-bottom: var(--card-gap); }
.theme-b .band--paper { background: transparent; }

/* Cards */
.theme-b .card {
  background: var(--white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
  border-top: 0;
}
.theme-b .wrap.card {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  margin: 0 auto var(--card-gap);
}
.theme-b .wrap.split--ruled::before { display: none; }
.theme-b .split--ruled { border-top: 0; }

/* Home spacing between cards */
.theme-b .page-home main > .band--orange .hero { padding-bottom: clamp(3rem, 7vw, 6rem); }
.theme-b .band--paper .section.card { margin-bottom: var(--card-gap); }

/* Label headings: white type on black blocks, like the story stickers */
.theme-b .hero__title span {
  width: fit-content;
  background: var(--ink);
  color: var(--white);
  padding: 0.02em 0.22em 0.1em;
  margin-bottom: 0.1em;
  border-radius: 0.09em;
  transform: rotate(-1.6deg);
  transform-origin: left center;
}
.theme-b .hero__title span:nth-child(2) { margin-left: 0.18em; }
.theme-b .hero__title span:nth-child(3) { margin-left: 0.06em; }
.theme-b .hero__title { line-height: 1.04; }
@media (max-width: 479px) { .theme-b .hero__title span { white-space: normal; } }

.theme-b .page-intro__title,
.theme-b .section-title {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  padding: 0.06em 0.3em 0.12em;
  border-radius: 0.1em;
  transform: rotate(-1.4deg);
  transform-origin: left center;
}
.theme-b .section-title { font-size: var(--step-3); }
.theme-b .split__intro > * + * { margin-top: 1.25rem; }

.theme-b .cta__title {
  display: inline;
  background: var(--ink);
  color: var(--white);
  padding: 0.04em 0.25em 0.1em;
  line-height: 1.32;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 0.08em;
}
.theme-b .cta__title + .cta__text { margin-top: 2rem; }

/* Buttons on orange: white pill, like the "Tell me more" sticker */
.theme-b .band--orange .button--dark,
.theme-b .cta .button--dark {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
  box-shadow: 0 8px 18px -10px rgba(70, 35, 0, 0.7);
}
.theme-b .band--orange .button--dark:hover,
.theme-b .cta .button--dark:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.theme-b .site-header .button--dark { box-shadow: none; }

/* The closing band no longer needs its own colour change */
.theme-b .cta { background: transparent; }
.theme-b .cta__inner { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem); }

/* Services page */
.theme-b .jump-list { padding-top: clamp(0.5rem, 2vw, 1rem); }
.theme-b .jump-list a { background: var(--ink); color: var(--white); border-color: var(--ink); }
.theme-b .jump-list a:hover { background: var(--white); color: var(--ink); }
.theme-b .service-list, .theme-b .about-detail { padding-block: var(--card-gap) 0; display: grid; gap: var(--card-gap); }
.theme-b .service-list > .service:first-child, .theme-b .about-detail > section:first-child { border-top: 0; }
.theme-b .service, .theme-b .about-detail > section, .theme-b .other-support { padding: var(--card-pad); }

/* About and contact */
.theme-b .profile--about { margin-top: var(--card-gap); }
.theme-b .contact { padding-top: var(--card-gap); padding-bottom: 0; gap: var(--card-gap); align-items: start; }
.theme-b .contact__details { padding: clamp(1.5rem, 3vw, 2.25rem); }
.theme-b .contact__details .details { border-top: 0; padding-top: 0; }
.theme-b .details dd { font-size: var(--step-0); overflow-wrap: break-word; }
.theme-b .form-status { background: var(--paper); }

/* Legal pages */
.theme-b .legal { padding-top: var(--card-gap); padding-bottom: 0; }
.theme-b .legal__toc a, .theme-b .breadcrumb a { color: var(--ink); }
.theme-b .prose h2:first-child { margin-top: 0; }
.theme-b .collection-notice { border-radius: 14px; }

/* Utility pages without cards */
.theme-b .page-404 main > .section, .theme-b .page-thanks main > .section { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .theme-b .hero__title span, .theme-b .page-intro__title, .theme-b .section-title { transform: none; }
}
@media print {
  .theme-b { background: none; }
  .theme-b .card { box-shadow: none; }
}

/* Services and About box headings as black tape strips, matching the other section headings. */
.theme-b .service__title {
  justify-self: start; align-self: start; width: fit-content; max-width: 100%;
  background: var(--ink); color: var(--white); padding: 0.08em 0.32em 0.14em; border-radius: 0.1em;
  transform: rotate(-1.4deg); transform-origin: left center; line-height: 1.15;
}