p {
        line-height: 1.6;
    }
/* Haikus category — yw.jpg background behind the article body AND the
   category listing page (added 2026-06-26; image at /images/Haikus/yw.jpg;
   pageclass_sfx " haikus-bg" on menu item 1417 puts body.haikus-bg on every
   page under the Haikus menu item — listing + individual articles.
   See [[Mark-Wagner]] vault doc for the full build history.) */
body.haikus-bg .com-content-article__body,
body.haikus-bg .com-content-category-blog {
    background-image: url("/images/Haikus/haikubg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 24px;
    border-radius: 6px;
}


/* Mobile stacking order for the three-column layout (added 2026-08-07).
   Stock Cassiopeia's <=767.98px grid-template-areas places side-r BEFORE
   side-l, so on a phone the right sidebar jumped above the left one. Tim
   wants reading order to follow the desktop left-to-right sense: main
   content first, then the left column, then the right column. Only rows 4
   and 5 differ from Cassiopeia's own declaration -- everything else is
   copied verbatim so banner/top/bottom placement is untouched.
   Uses max-width (not the range syntax the core file uses) purely for
   broader browser support; user.css loads after template.css so it wins. */
@media (max-width: 767.98px) {
    .site-grid {
        grid-template-areas:
            ". banner banner banner banner ."
            ". top-a top-a top-a top-a ."
            ". top-b top-b top-b top-b ."
            ". comp comp comp comp ."
            ". side-l side-l side-l side-l ."
            ". side-r side-r side-r side-r ."
            ". bot-a bot-a bot-a bot-a ."
            ". bot-b bot-b bot-b bot-b .";
    }
}

/* ============================================================
   Fluid typography (added 2026-08-14)
   Replaces fixed sizing with clamp(min, preferred + vw, max) so text
   scales with viewport width but can never get too small on a phone
   or oversized on a wide monitor. rem is used (not em) so sizes don't
   compound when nested, and so a visitor's own browser font-size
   preference is still respected. Pure vw is deliberately avoided --
   it breaks user zoom and has no floor or ceiling.
   ============================================================ */

/* Body copy: 16px on a phone -> ~19px on a wide screen */
body,
.com-content-article__body p,
.com-content-category-blog p,
.com-content-article__body li,
.com-content-category-blog li {
    font-size: clamp(1rem, 0.94rem + 0.28vw, 1.1875rem);
}

/* SliderCK captions were hard-coded to 25px at every width, which is
   oversized on a 360px phone. Keeps the same 25px on desktop, scales
   down to 16px on small screens. !important + the id selector are
   needed because the module injects its own #sliderckNNN rule. */
.swiper-caption,
[id^="sliderck"] .swiper-caption {
    font-size: clamp(1rem, 0.8rem + 0.9vw, 1.5625rem) !important;
    line-height: 1.3;
}

/* Sub-headings: Cassiopeia already makes h1 fluid, these are not. */
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }