/* ============================================================
   CHAAP — the StoryWell design system.

   This file sits ON TOP of style.css. It changes how the site
   looks; it removes nothing. Every page keeps its own markup,
   its cart, its forms, its Netlify Identity, its analytics, its
   structured data and its language editions — this layer only
   restyles what is already there, and adds the section types
   (bands, spreads, strips) the redesigned pages use.

   Loaded after style.css so its rules win. Scoped to
   body.chaap so a page that has not been migrated is untouched.

   Two layers:
     A. site-wide restyle — tokens, type, buttons, cards, header,
        footer. Safe on every page including the 21 translated
        ones, because it changes appearance and not layout.
     B. section types — .k-hero, .k-band, .k-spread, .k-tick and
        the rest, used by pages that have been relaid out.
   ============================================================ */

/* ---------- A. tokens ---------- */
body.chaap {
  --sw-cream: #FFF8EC;
  --sw-dark: #21170F;
  --sw-text: #2E2118;
  --sw-muted: #7A6A59;
  --sw-border: #E4D8C4;
  --sw-saffron: #E8731A;
  --sw-saffron-dark: #C64A2E;
  --sw-turmeric: #F5B301;
  --sw-terracotta: #C64A2E;
  --sw-teal: #1A7A6D;
  --sw-paper: #FBEFD9;
  --disp: 'Yatra One', 'Baloo 2', Georgia, cursive;
  background: var(--sw-cream);
  color: var(--sw-text);
}

/* ---------- A. type ---------- */
body.chaap h1, body.chaap h2, body.chaap h3,
body.chaap .sw-logo, body.chaap .k-price {
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 0;
}
body.chaap { font-family: 'Mukta', system-ui, sans-serif; }

/* ---------- A. header ---------- */
/* style.css sets the overlay header with !important, so this has to match
   it. Without this the nav went cream-on-cream and was unreadable. */
body.chaap .sw-header,
body.chaap .sw-header.sw-header-overlay {
  background: #21170F !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: sticky;
  top: 0;
  border-bottom: 0;
  box-shadow: none;
}
body.chaap .sw-header .sw-logo,
body.chaap .sw-header .sw-logo * { color: #FFF8EC !important; }
body.chaap .sw-nav a {
  color: #FFF8EC !important;
  background: rgba(255, 248, 236, 0.1);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
body.chaap .sw-nav a:hover,
body.chaap .sw-nav a[aria-current="page"] { background: var(--sw-saffron); }
body.chaap .sw-header-actions .sw-cart-link,
body.chaap .sw-header-actions .sw-menu-toggle { color: #FFF8EC !important; }

/* ---------- A. buttons ---------- */
body.chaap .btn, body.chaap .sw-btn, body.chaap .btn-primary,
body.chaap .sw-btn-primary, body.chaap button.sw-btn {
  border-radius: 999px;
  font-family: var(--sw-font-body);
  font-weight: 700;
}
body.chaap .btn-primary, body.chaap .sw-btn-primary {
  background: var(--sw-saffron);
  border-color: var(--sw-saffron);
  color: #fff;
}

/* ---------- A. book covers get their coloured chaap ---------- */
body.chaap .book-card-image {
  background: var(--sw-turmeric);
  border-radius: 4px;
  padding: 14px;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.08;
  height: auto;
  transform: rotate(-1.5deg);
}
body.chaap .book-card:nth-child(5n+2) .book-card-image { background: var(--sw-teal); transform: rotate(1.3deg); }
body.chaap .book-card:nth-child(5n+3) .book-card-image { background: var(--sw-terracotta); }
body.chaap .book-card:nth-child(5n+4) .book-card-image { background: #2E6E8E; transform: rotate(1.7deg); }
body.chaap .book-card:nth-child(5n)   .book-card-image { background: #7A5C9E; transform: rotate(-1.1deg); }
body.chaap .book-card-image img {
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  object-fit: contain; padding: 0;
  box-shadow: 0 8px 18px rgba(33, 23, 15, 0.32);
}
body.chaap .book-card { background: none; border: 0; box-shadow: none; }

/* ---------- A. footer ---------- */
body.chaap .sw-footer { background: #21170F; color: #FFF8EC; }
body.chaap .sw-footer a { color: #F5B301; }

/* ============================================================
   B. section types — used by relaid-out pages
   ============================================================ */
body.chaap .k-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
body.chaap .k-sec { padding: 58px 0; }
body.chaap .k-sec.paper { background: var(--sw-paper); }
body.chaap .k-sec.dark { background: #21170F; color: #FFF8EC; }
body.chaap .k-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
body.chaap .k-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
body.chaap .k-head a { font-size: 0.85rem; font-weight: 700; color: var(--sw-terracotta); text-decoration: none; }
body.chaap .k-sec.dark .k-head a { color: var(--sw-turmeric); }

body.chaap .k-btn { display: inline-block; background: var(--sw-saffron); color: #fff;
  padding: 12px 26px; border-radius: 999px; text-decoration: none; font-weight: 700; }
body.chaap .k-btn.ghost { background: transparent; color: #21170F; box-shadow: inset 0 0 0 2px #21170F; }
body.chaap .k-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* motif rules and the still ticker */
body.chaap .k-motif { height: 26px; background-color: var(--sw-terracotta);
  background-image: radial-gradient(circle, #FFF8EC 3px, transparent 3.5px);
  background-size: 26px 26px; background-position: center; }
body.chaap .k-motif.teal { background-color: var(--sw-teal); }
body.chaap .k-motif.gold { background-color: var(--sw-turmeric);
  background-image: radial-gradient(circle, #21170F 3px, transparent 3.5px); }
body.chaap .k-tick { background: #21170F; color: #FFF8EC; padding: 11px 0; }
body.chaap .k-tick-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 34px; }
body.chaap .k-tick span { font-family: var(--disp); font-size: clamp(0.8rem, 1vw, 1rem); opacity: 0.86; }

/* hero */
body.chaap .k-hero {
  position: relative; overflow: hidden;
  background-color: #F3E6D4;
  background-image: url('/images/bear-cropped.webp');
  background-repeat: no-repeat;
  background-size: 74% auto;
  background-position: right -2% bottom -3%;
  min-height: calc(53.3vw + 30px);
  display: flex; align-items: center;
}
body.chaap .k-hero > .k-wrap { width: 100%; position: relative; z-index: 2; }
body.chaap .k-hero-copy { padding: 48px 0 40px; max-width: 27ch; }
body.chaap .k-hey { font-family: var(--disp); font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--sw-saffron); }
body.chaap .k-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3.3rem); line-height: 1.1; color: #21170F; }
body.chaap .k-sub { margin-top: 14px; font-size: 1.06rem; line-height: 1.7; color: #4A3B2C; }

/* the figures, on the bear's own ground */
body.chaap .k-figs { border-top: 1px solid rgba(33,23,15,0.2); margin-top: 28px;
  padding-top: 22px; max-width: 30ch; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
body.chaap .k-figs b { display: block; font-family: var(--disp); font-size: 1.75rem; line-height: 1.1; color: #21170F; }
body.chaap .k-figs span { font-size: 0.68rem; letter-spacing: 0.08em; color: #6B5B49; }

/* paper planes */
body.chaap .k-deco { position: absolute; pointer-events: none; z-index: 1; }
body.chaap .k-trail1 { top: 12%; left: 16%; transform: rotate(-12deg); }
body.chaap .k-plane1 { top: 8%;  left: 36%; animation: sw-fly 10s ease-in-out infinite; }
body.chaap .k-trail2 { top: 34%; left: 21%; transform: rotate(-5deg); }
body.chaap .k-plane2 { top: 31%; left: 41%; animation: sw-fly 13s ease-in-out infinite 3s; }
body.chaap .k-trail3 { top: 56%; left: 18%; transform: rotate(3deg); }
body.chaap .k-plane3 { top: 54%; left: 33%; animation: sw-fly 16s ease-in-out infinite 6s; }

/* full-bleed painted band */
body.chaap .k-band {
  background-color: #21170F; background-image: var(--art);
  background-repeat: no-repeat; background-size: cover; background-position: var(--p, center);
  aspect-ratio: 3 / 2; max-height: 1180px;
  display: flex; align-items: flex-end; padding: 34px 0;
}
body.chaap .k-band > .k-wrap { width: 100%; }
body.chaap .k-band-copy { background: rgba(28,19,12,0.84); color: #FFF8EC;
  padding: 26px 30px 30px; max-width: 46ch; border-radius: 3px; }
body.chaap .k-band.right-copy .k-band-copy { margin-left: auto; }
body.chaap .k-band-copy h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
body.chaap .k-band-copy p { line-height: 1.75; margin-top: 10px; opacity: 0.92; }

/* style.css paints every heading with --sw-dark at (0,0,1), which beats the
   colour these dark surfaces set on their container -- so "The Chaupal" and
   its siblings were rendering brown-on-brown. Headings take the surface's
   own colour instead. */
body.chaap .k-band-copy :is(h1, h2, h3, h4),
body.chaap .k-sec.dark :is(h1, h2, h3, h4),
body.chaap .k-langband :is(h1, h2, h3, h4),
body.chaap .sw-footer :is(h1, h2, h3, h4) { color: inherit; }

/* full-width spread on the artwork's own ground */
body.chaap .k-spread { background-color: var(--g, #F4E9D4); padding: 58px 0 0; overflow: hidden; }
body.chaap .k-spread > .k-wrap { max-width: 1300px; }
body.chaap .k-spread-copy { max-width: 52ch; }
body.chaap .k-spread-copy h2 { font-size: clamp(1.7rem, 2.8vw, 3.2rem); line-height: 1.08; }
body.chaap .k-spread-copy p { margin-top: 12px; line-height: 1.7;
  font-size: clamp(1.05rem, 1.15vw, 1.35rem); color: #3A2D20; }
body.chaap .k-spread-art {
  display: block; width: min(100%, 1100px); margin: 30px auto 0;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 7%, #000 93%, rgba(0,0,0,0) 100%),
                      linear-gradient(to top, rgba(0,0,0,0) 0, #000 6%, #000 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 7%, #000 93%, rgba(0,0,0,0) 100%),
                      linear-gradient(to top, rgba(0,0,0,0) 0, #000 6%, #000 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* A five-panel spread squeezed into 390px puts its captions at seven pixels.
   On a phone the panelled artwork keeps its real size inside a swipeable
   frame; on wider screens the wrapper leaves no box behind at all. */
body.chaap .k-spread-scroll { display: contents; }
body.chaap .k-swipe-hint { display: none; }

/* The corner fold in style.css is a white wedge drawn to sit against a white
   card. Chaap cards have no card -- the wedge floated on the coloured panel
   and read as a rendering fault. */
body.chaap .book-card-image::after { display: none; }

/* full-bleed foot strip */
body.chaap .k-strip { background-color: #F6EBD8; position: relative; overflow: hidden;
  padding: 60px 0 calc(112vw * 0.435 - 22px); }
body.chaap .k-strip::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('/images/publishing-journey.webp'); background-repeat: no-repeat;
  background-size: 112vw auto; background-position: left 50% bottom -22px;
  -webkit-mask-image: linear-gradient(to top, #000 91%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to top, #000 91%, rgba(0,0,0,0) 100%);
  -webkit-mask-size: 112vw calc(112vw * 0.435); mask-size: 112vw calc(112vw * 0.435);
  -webkit-mask-position: left 50% bottom -22px; mask-position: left 50% bottom -22px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
body.chaap .k-strip > .k-wrap { position: relative; z-index: 1; }

/* language band */
body.chaap .k-langband { background: #21170F; color: #FFF8EC; padding: 40px 0; }
body.chaap .k-langband .k-wrap { display: flex; gap: 26px 40px; align-items: center;
  justify-content: space-between; flex-wrap: wrap; }
body.chaap .k-langband h2 { font-size: clamp(1.4rem, 2.2vw, 2.1rem); }
body.chaap .k-langband p { margin-top: 6px; opacity: 0.82; font-size: 0.95rem; }
body.chaap .k-langs { display: flex; gap: 10px; flex-wrap: wrap; }
body.chaap .k-langs a { background: #FFF8EC; color: #21170F; padding: 9px 18px;
  border-radius: 999px; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
body.chaap .k-langs a:nth-child(3n+2) { background: var(--sw-teal); color: #FFF8EC; }
body.chaap .k-langs a:nth-child(3n)   { background: var(--sw-terracotta); color: #FFF8EC; }

/* cards used for reviews and journal */
body.chaap .k-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
body.chaap .k-card { text-decoration: none; color: inherit; background: #fff;
  border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgba(33,23,15,0.12); display: block; }
body.chaap .k-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
body.chaap .k-card.sq img { aspect-ratio: 1/1; }
body.chaap .k-cbody { padding: 15px 17px 19px; display: block; }
body.chaap .k-card b { display: block; font-size: 1rem; line-height: 1.35; }
body.chaap .k-card span { display: block; font-size: 0.82rem; color: var(--sw-muted); margin-top: 4px; }
body.chaap .k-tag { display: inline-block; background: var(--sw-turmeric); color: #21170F;
  font-size: 0.7rem; padding: 3px 10px; border-radius: 999px; font-weight: 700; margin-bottom: 8px; }

/* quotes */
body.chaap .k-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
body.chaap .k-q { border-left: 4px solid var(--sw-saffron); padding-left: 15px; }
body.chaap .k-q p { line-height: 1.65; }
body.chaap .k-q b { display: block; margin-top: 9px; font-size: 0.85rem; }

@keyframes sw-fly {
  0%, 100% { transform: translate(0, 0) rotate(-14deg); }
  50%      { transform: translate(16px, -9px) rotate(-14deg); }
}
@media (prefers-reduced-motion: reduce) { body.chaap .k-deco { animation: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* the art is 118vw wide and 0.72 as tall, so reserve its real height —
     at 62vw the clouds were climbing into the figures */
  body.chaap .k-hero { display: block; min-height: 0; background-size: 118% auto;
    background-position: center bottom -2%; padding-bottom: calc(118vw * 0.72); }
  body.chaap .k-hero-copy { padding: 30px 0 8px; max-width: none; }
  body.chaap .k-deco { display: none; }
  body.chaap .k-figs { max-width: none; margin-top: 22px; }
  body.chaap .k-figs b { font-size: 1.5rem; }
  body.chaap .k-band { aspect-ratio: auto; max-height: none;
    background-size: 100% auto; background-position: center top;
    padding: calc(66.7vw + 18px) 0 22px; }
  body.chaap .k-band-copy, body.chaap .k-band.right-copy .k-band-copy {
    max-width: none; margin-left: 0; padding: 20px 22px 24px; }
  body.chaap .k-spread { padding-top: 40px; }
  body.chaap .k-spread-art { width: 112%; margin-left: -6%; margin-top: 20px; }
  body.chaap .k-spread-scroll { display: block; overflow-x: auto; overflow-y: hidden;
    margin: 0 -24px; padding: 0 24px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  body.chaap .k-spread-scroll::-webkit-scrollbar { display: none; }
  body.chaap .k-spread-scroll .k-spread-art { width: 780px; max-width: none;
    margin-left: 0;
    /* the side fades belong to a spread that ends at the screen edge; inside
       the swipe frame they only wash out the first and last panel */
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0, #000 6%, #000 100%);
            mask-image: linear-gradient(to top, rgba(0,0,0,0) 0, #000 6%, #000 100%); }
  body.chaap .k-swipe-hint { display: block; margin: 10px 0 0; font-size: 0.82rem;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--sw-muted); }
  body.chaap .k-strip { padding: 40px 0 calc(112vw * 0.435 - 22px); }
  body.chaap .k-cards, body.chaap .k-quotes { grid-template-columns: 1fr; }
  body.chaap .k-sec { padding: 40px 0; }
}

/* ---- testimonials get their chaap ------------------------------------
   The quotes were plain boxes. They now sit on the same cycling colours
   the book covers use, so a wall of them reads as one set rather than a
   grid of white rectangles. */
body.chaap .wol-card,
body.chaap .k-q {
  border-left: 6px solid var(--sw-turmeric);
  border-radius: 4px;
  background: #FFF8EC;
  padding: 20px 22px;
}
body.chaap .wol-card:nth-child(5n+2), body.chaap .k-q:nth-child(5n+2) { border-left-color: var(--sw-teal); }
body.chaap .wol-card:nth-child(5n+3), body.chaap .k-q:nth-child(5n+3) { border-left-color: var(--sw-terracotta); }
body.chaap .wol-card:nth-child(5n+4), body.chaap .k-q:nth-child(5n+4) { border-left-color: #2E6E8E; }
body.chaap .wol-card:nth-child(5n),   body.chaap .k-q:nth-child(5n)   { border-left-color: #7A5C9E; }
body.chaap .k-q p, body.chaap .wol-quote { color: #2E2118; }
body.chaap .k-sec.dark .k-q { background: #2E2118; }
body.chaap .k-sec.dark .k-q p, body.chaap .k-sec.dark .k-q b { color: #FFF8EC; }

/* ---- dark mode -------------------------------------------------------
   body.chaap was redefining the palette at a higher specificity than
   [data-theme="dark"] on the root, so half the page took the light tokens
   and half kept the dark ones — which is how quotes ended up black on
   black. The dark theme now gets its own Chaap palette, and the sections
   that are hardcoded cream or ink are restated for it. */
[data-theme="dark"] body.chaap {
  --sw-cream: #16120E;
  --sw-white: #221A14;
  --sw-dark: #F2E7D6;
  --sw-text: #E4D8C6;
  --sw-muted: #A2907B;
  --sw-border: #3A2E24;
  --sw-paper: #1E1710;
  background: #16120E;
  color: #E4D8C6;
}
[data-theme="dark"] body.chaap .k-sec.paper { background: #1E1710; }
[data-theme="dark"] body.chaap .k-sec.dark { background: #0F0C09; }
[data-theme="dark"] body.chaap .k-hero { background-color: #241C14; }
[data-theme="dark"] body.chaap .k-hero h1,
[data-theme="dark"] body.chaap .k-sub { color: #F2E7D6; }
[data-theme="dark"] body.chaap .k-figs { border-top-color: rgba(242,231,214,0.24); }
[data-theme="dark"] body.chaap .k-figs b { color: #F2E7D6; }
[data-theme="dark"] body.chaap .k-figs span { color: #A2907B; }
[data-theme="dark"] body.chaap .k-btn.ghost { color: #F2E7D6; box-shadow: inset 0 0 0 2px #F2E7D6; }
[data-theme="dark"] body.chaap .k-spread-copy p { color: #E4D8C6; }
[data-theme="dark"] body.chaap .wol-card,
[data-theme="dark"] body.chaap .k-q { background: #221A14; }
[data-theme="dark"] body.chaap .k-q p, [data-theme="dark"] body.chaap .k-q b,
[data-theme="dark"] body.chaap .wol-quote, [data-theme="dark"] body.chaap .wol-name,
[data-theme="dark"] body.chaap .wol-role { color: #E4D8C6; }
[data-theme="dark"] body.chaap .k-card { background: #221A14; }
[data-theme="dark"] body.chaap .k-card span { color: #A2907B; }
[data-theme="dark"] body.chaap .k-strip { background-color: #1E1710; }
[data-theme="dark"] body.chaap .k-spread { background-color: #1E1710 !important; }
[data-theme="dark"] body.chaap .k-spread-art { mix-blend-mode: normal; opacity: 0.94; }

/* ---- dark mode, continued -------------------------------------------
   Review and blog cards were rendering dark text on their own dark card,
   because style.css sets those colours from tokens that body.chaap had
   already overridden to the light palette. Restated for the dark theme. */
[data-theme="dark"] body.chaap .review-card,
[data-theme="dark"] body.chaap .blog-card,
[data-theme="dark"] body.chaap .book-card-body {
  background: #221A14;
  color: #E4D8C6;
}
[data-theme="dark"] body.chaap .review-card *,
[data-theme="dark"] body.chaap .blog-card * { color: #E4D8C6; }
[data-theme="dark"] body.chaap .review-card a,
[data-theme="dark"] body.chaap .blog-card a,
[data-theme="dark"] body.chaap .review-readmore { color: var(--sw-turmeric); }
[data-theme="dark"] body.chaap .review-meta-badge,
[data-theme="dark"] body.chaap .k-tag { background: var(--sw-turmeric); color: #21170F; }
[data-theme="dark"] body.chaap .blog-date,
[data-theme="dark"] body.chaap .book-author,
[data-theme="dark"] body.chaap .review-book-author { color: #A2907B; }
[data-theme="dark"] body.chaap .k-langband { background: #0F0C09; }
[data-theme="dark"] body.chaap .sw-footer { background: #0F0C09; }

/* ---- the featured post, and giving the card stacks a lead ------------
   A page that is only a grid of equal cards has nothing to look at first.
   Each of these pages now leads with one item at full width, and the rest
   follow as the grid. */
body.chaap .k-lead {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 38px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--sw-border);
}
body.chaap .k-lead img { width: 100%; border-radius: 6px; display: block;
  box-shadow: 0 10px 26px rgba(33,23,15,0.18); }
body.chaap .k-lead h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.15; margin-top: 10px; }
body.chaap .k-lead p { line-height: 1.75; margin-top: 12px; font-size: 1.05rem; }
body.chaap .k-lead .k-meta { font-size: 0.85rem; color: var(--sw-muted); margin-top: 8px; }
@media (max-width: 900px) { body.chaap .k-lead { grid-template-columns: 1fr; gap: 18px; } }

/* the SINCE 2016 DELHI stamp, set low-left where it clears the figures */
body.chaap .k-stamp {
  /* clear of the cookie bar, which is fixed to the foot of the viewport */
  position: absolute; left: 24px; bottom: 92px; z-index: 2;
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: #21170F; color: #FFF8EC;
  transform: rotate(-8deg);
  font-size: 0.58rem; letter-spacing: 0.14em; line-height: 1.5;
}
body.chaap .k-stamp b { display: block; font-family: var(--disp); font-size: 1.15rem; letter-spacing: 0; }
@media (max-width: 900px) {
  body.chaap .k-stamp { left: auto; right: 14px; top: 14px; bottom: auto; width: 74px; height: 74px; font-size: 0.5rem; }
  body.chaap .k-stamp b { font-size: 0.95rem; }
}

/* readable long-form measure and size */
body.chaap .k-prose p { line-height: 1.85; margin-top: 16px; font-size: clamp(1.02rem, 1.1vw, 1.2rem); }
body.chaap .k-prose p:first-child { margin-top: 0; }

/* a long essay set in one narrow column left half the page empty */
body.chaap .k-prose--two { columns: 2; column-gap: 52px; max-width: none; }
body.chaap .k-prose--two p { break-inside: avoid; margin-top: 0; margin-bottom: 18px; }
@media (max-width: 900px) { body.chaap .k-prose--two { columns: 1; } }

/* contact details: aligned rows that work in both themes */
body.chaap .k-contact { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px 48px; max-width: 760px; }
body.chaap .k-contact > div { border-top: 1px solid rgba(255, 248, 236, 0.26); padding-top: 12px; }
body.chaap .k-contact dt { font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.72; }
body.chaap .k-contact dd { margin: 6px 0 0; line-height: 1.65; font-size: 1.02rem; }
body.chaap .k-contact a { color: var(--sw-turmeric); text-decoration: none; }
body.chaap .k-contact a:hover { text-decoration: underline; }
@media (max-width: 900px) { body.chaap .k-contact { grid-template-columns: 1fr; } }

/* the Wall's featured quote reads as a pull-quote, not a card */
body.chaap .k-lead--quote { grid-template-columns: 1fr; }
body.chaap .k-lead--quote blockquote { margin: 0; border-left: 8px solid var(--sw-saffron); padding-left: 26px; }
body.chaap .k-lead--quote blockquote p { font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.5rem); line-height: 1.3; color: var(--sw-dark); margin: 0; }
body.chaap .k-lead--quote footer { margin-top: 16px; display: flex; gap: 14px;
  flex-wrap: wrap; align-items: baseline; font-size: 0.92rem; color: var(--sw-muted); }
body.chaap .k-lead--quote footer b { color: var(--sw-text); }

/* ---- one page header for every page ----------------------------------
   Some pages carried sw-page-header, two had only a visually-hidden
   heading and no header at all, and the heading sizes differed. Every
   page that is not the home page now gets the same treatment: kicker-free
   display heading taking the width it is given, with the standfirst
   beside it rather than under it. */
body.chaap .sw-page-header {
  background: var(--sw-paper);
  padding: 72px 0 62px;
  border-bottom: 0;
}
body.chaap .sw-page-header .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px 56px;
  align-items: end;
}
body.chaap .sw-page-header h1 {
  font-family: var(--disp);
  font-size: clamp(2.1rem, 4.4vw, 4.4rem);
  line-height: 1.08;
  max-width: 15ch;
  margin: 0;
  color: var(--sw-dark);
}
body.chaap .sw-page-header p {
  margin: 0 0 10px;
  max-width: 42ch;
  font-size: clamp(1.02rem, 1.15vw, 1.3rem);
  line-height: 1.65;
  color: var(--sw-muted);
}
[data-theme="dark"] body.chaap .sw-page-header { background: #1E1710; }
@media (max-width: 900px) {
  body.chaap .sw-page-header { padding: 44px 0 38px; }
  body.chaap .sw-page-header .container { grid-template-columns: 1fr; gap: 12px; }
  body.chaap .sw-page-header p { margin-bottom: 0; }
}

/* ---- mobile ----------------------------------------------------------
   The open menu was cream links on a cream panel — literally invisible.
   The panel now matches the header it drops out of, so the same cream
   pills that work on desktop work here. */
@media (max-width: 900px) {
  body.chaap .sw-nav,
  body.chaap #mainNav {
    background: #21170F !important;
    border-top: 1px solid rgba(255, 248, 236, 0.14);
    padding: 12px 16px 18px;
    gap: 8px;
  }
  body.chaap .sw-nav a {
    color: #FFF8EC !important;
    background: rgba(255, 248, 236, 0.1);
    display: block;
    padding: 11px 16px;
  }
  body.chaap .sw-menu-toggle,
  body.chaap .sw-cart-link { color: #FFF8EC !important; }

  /* Illustrations ran at three different widths down one phone screen —
     342 for spreads, 390 for bands, 340 for cards. The full-bleed artwork
     now shares one edge; only the cards stay inside the text margin. */
  body.chaap .k-spread { padding-left: 0; padding-right: 0; }
  body.chaap .k-spread > .k-wrap { padding-left: 0; padding-right: 0; }
  body.chaap .k-spread-copy { padding: 0 20px; }
  body.chaap .k-spread-art { width: 100%; max-width: none; margin: 20px 0 0; }
}
[data-theme="dark"] body.chaap .sw-nav,
[data-theme="dark"] body.chaap #mainNav { background: #0F0C09 !important; }

/* The mark is black artwork. It was fine on the old cream header and
   disappears entirely on the ink one, in both themes and at every size.
   Inverting it to white keeps the shape and puts it back on the bar.
   !important is needed: index.html carries an inline filter:none. */
body.chaap .sw-logo img,
[data-theme="dark"] body.chaap .sw-logo img {
  filter: brightness(0) invert(1) !important;
  opacity: 1;
}

/* ---- mobile hero -----------------------------------------------------
   The bear and fox earn their place on a wide screen, where the drawing
   sits beside the words and the two read as one picture. On a phone it
   stacks underneath instead — a whole screen of artwork the reader has to
   scroll past, with 331px of empty page reserved for it before it loads.
   It is a desktop illustration, so it is desktop only now.

   With the art gone the badge no longer needs to be pinned, and pinning
   was what put it on top of the headline. It sits in the flow, after the
   copy, where it reads as a sign-off. */
@media (max-width: 900px) {
  body.chaap .k-hero {
    background-image: none;
    padding-bottom: 34px;
    min-height: 0;
  }
  body.chaap .k-hero-copy { padding: 34px 0 0; }
  body.chaap .k-stamp {
    /* the badge is a sibling of .k-wrap, so it needs its own gutter */
    position: static;
    margin: 26px 24px 0 auto;
    transform: rotate(-6deg);
  }
}