/**
 * campa.css
 * The CAMPA page. Everything above the gallery uses the site's standard band
 * design; this file styles the photograph strip at the foot of the page and the
 * viewer that opens from it.
 *
 * Scoped under .campa-page, so no other page is reached from here.
 */

/* Full width (the site style, as on the Wings pages and the home page): the page's blocks run
   inside 5% side margins with no 1240px cap, instead of the band system's narrower default. */
.campa-page .dz-band .dz-wrap { max-width: none; padding-left: 5%; padding-right: 5%; }
@media (max-width: 600px) { .campa-page .dz-band .dz-wrap { padding-left: 20px; padding-right: 20px; } }

.campa-page .campa-gallery-band { overflow: hidden; }

/* ── The strip: it moves on its own, and holds still when hovered ── */
.campa-page .campa-gal {
    position: relative;
    margin-top: 28px;
    /* fade the two ends so pictures enter and leave quietly */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.campa-page .campa-gal-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: campaDrift 160s linear infinite;
    will-change: transform;
}
.campa-page .campa-gal:hover .campa-gal-track,
.campa-page .campa-gal:focus-within .campa-gal-track { animation-play-state: paused; }

@keyframes campaDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* the run is duplicated, so this loops seamlessly */
}

.campa-page .campa-shot {
    position: relative;
    flex: none;
    width: clamp(270px, 27vw, 380px);
    height: clamp(195px, 19.5vw, 265px);
    padding: 0;
    border: 1px solid #e3e6e4;
    border-radius: 10px;
    overflow: hidden;
    background: #eef1ef;
    cursor: pointer;
    font: inherit;
    transition: transform .35s cubic-bezier(.22, .8, .2, 1), box-shadow .35s ease;
}
.campa-page .campa-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.22, .8, .2, 1);
}
.campa-page .campa-shot:hover,
.campa-page .campa-shot:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px -20px rgba(10, 46, 26, .65);
    outline: none;
}
.campa-page .campa-shot:hover img { transform: scale(1.05); }
.campa-page .campa-shot:focus-visible { border-color: #0a2e1a; }

.campa-page .campa-shot-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 14px 11px;
    text-align: left;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: linear-gradient(to top, rgba(10, 46, 26, .9), transparent);
}

/* ── The viewer ── */
.campa-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 28px);
    padding: clamp(16px, 4vw, 54px);
    background: rgba(10, 46, 26, .93);
}
.campa-viewer[hidden] { display: none; }

.campa-stage {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.campa-stage img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 6px;
    background: #0a2e1a;
}
.campa-stage figcaption {
    font-size: .95rem;
    font-weight: 600;
    color: #e6ece8;
    text-align: center;
}

/* the red close button */
.campa-close {
    position: absolute;
    top: clamp(14px, 3vw, 28px);
    right: clamp(14px, 3vw, 28px);
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.7rem;
    line-height: 1;
    color: #fff;
    background: #b4442f;
    box-shadow: 0 10px 22px -10px rgba(180, 68, 47, .9);
    transition: background .25s ease, transform .25s ease;
}
.campa-close:hover { background: #b4442f; transform: scale(1.06); }

/* a step either side of the picture */
.campa-step {
    flex: none;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.campa-step:hover {
    background: rgba(255, 255, 255, .2);
    border-color: #fff;
    transform: scale(1.06);
}

@media (max-width: 640px) {
    .campa-step { width: 42px; height: 42px; font-size: 1.05rem; }
    .campa-close { width: 40px; height: 40px; font-size: 1.45rem; }
    .campa-stage img { max-height: 64vh; }
}

@media (prefers-reduced-motion: reduce) {
    .campa-page .campa-gal-track { animation: none; }
    .campa-page .campa-gal { overflow-x: auto; }
    .campa-page .campa-shot:hover { transform: none; }
    .campa-page .campa-shot:hover img { transform: none; }
}


/* ══════════════════════════════════════════════════════════
   Colour and motion for the page's own content

   The bands, headings and the reveal as a band scrolls in come from
   the site's standard design (wing_design.css / .js). What follows
   only gives each card and each list its own colour, draws the marks
   as outlines rather than filled chips, and brings the cards in one
   after another once their band has arrived.

   wing_design.js puts .dz-ready on the page element itself, which is
   the same element as .campa-page, so those two are written together
   with no space between them.
   ══════════════════════════════════════════════════════════ */

/* ── A colour per card, set from the CMS as that card's "tone" ── */
.campa-page .dz-tone-webgold { --cp-tone: #b8900f; }
.campa-page .dz-tone-green  { --cp-tone: #2d6a4f; }
.campa-page .dz-tone-lime   { --cp-tone: #2d6a4f; }
.campa-page .dz-tone-teal   { --cp-tone: #2d6a4f; }
.campa-page .dz-tone-mint   { --cp-tone: #2d6a4f; }
.campa-page .dz-tone-blue   { --cp-tone: #8fc9a3; }
.campa-page .dz-tone-sky    { --cp-tone: #2d6a4f; }
.campa-page .dz-tone-cyan   { --cp-tone: #2d6a4f; }
.campa-page .dz-tone-aqua   { --cp-tone: #2d6a4f; }
.campa-page .dz-tone-amber  { --cp-tone: #b8900f; }
.campa-page .dz-tone-gold   { --cp-tone: #b8900f; }
.campa-page .dz-tone-orange { --cp-tone: #b8900f; }
.campa-page .dz-tone-rose   { --cp-tone: #b4442f; }
.campa-page .dz-tone-violet { --cp-tone: #8fc9a3; }
.campa-page .dz-tone-indigo { --cp-tone: #8fc9a3; }
.campa-page .dz-tone-stone  { --cp-tone: #4b5563; }

/* ── Cards ──────────────────────────────────────────────────
   The standard card is .dz-card-item (not .dz-card). Its top edge
   carries a 4px bar; here that bar is drawn in the card's own colour
   and widens from the left as the pointer arrives. */
/* --cp-tone is not given a value here: the .dz-tone-* rules above set it on this
   same element, and a value written here would have the same weight and win,
   leaving every card the one colour. Each use below carries its own fallback. */
.campa-page .dz-card-item {
    transition: transform .4s cubic-bezier(.22, .8, .2, 1),
                box-shadow .4s ease, border-color .4s ease;
}
.campa-page .dz-card-item::before {
    background: linear-gradient(90deg,
                var(--cp-tone, #2d6a4f),
                color-mix(in srgb, var(--cp-tone, #2d6a4f) 45%, #ffffff));
    transform-origin: 0 50%;
    transition: transform .45s cubic-bezier(.22, .8, .2, 1);
}
.campa-page .dz-card-item:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--cp-tone, #2d6a4f) 38%, transparent);
    box-shadow: 0 26px 46px -24px color-mix(in srgb, var(--cp-tone, #2d6a4f) 70%, transparent);
}
.campa-page .dz-card-item:hover::before { transform: scaleY(1.6); }

/* The mark: an outline ring in the card's colour, not a filled chip.
   Font Awesome Free has no outline cut of most of these glyphs, so the
   ring and the stroke colour carry the outline look. */
.campa-page .dz-card-icon {
    background: transparent;
    border: 1.6px solid color-mix(in srgb, var(--cp-tone, #2d6a4f) 42%, transparent);
    color: var(--cp-tone, #2d6a4f);
    box-shadow: none;
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1),
                background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.campa-page .dz-card-item:hover .dz-card-icon {
    transform: translateY(-3px) rotate(-6deg) scale(1.07);
    background: color-mix(in srgb, var(--cp-tone, #2d6a4f) 10%, transparent);
    border-color: var(--cp-tone, #2d6a4f);
    box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--cp-tone, #2d6a4f) 75%, transparent);
}

/* The cards of a band arrive one after another, once the band itself has.
   They start where the band's own reveal leaves them, so nothing moves twice. */
.campa-page.dz-ready .dz-reveal .dz-cards .dz-card-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s cubic-bezier(.22, .8, .2, 1),
                transform .55s cubic-bezier(.22, .8, .2, 1),
                box-shadow .4s ease, border-color .4s ease;
}
.campa-page.dz-ready .dz-reveal.dz-in .dz-cards .dz-card-item {
    opacity: 1;
    transform: none;
}
.campa-page.dz-ready .dz-reveal.dz-in .dz-cards .dz-card-item:nth-child(2) { transition-delay: .07s; }
.campa-page.dz-ready .dz-reveal.dz-in .dz-cards .dz-card-item:nth-child(3) { transition-delay: .14s; }
.campa-page.dz-ready .dz-reveal.dz-in .dz-cards .dz-card-item:nth-child(4) { transition-delay: .21s; }
.campa-page.dz-ready .dz-reveal.dz-in .dz-cards .dz-card-item:nth-child(5) { transition-delay: .28s; }
.campa-page.dz-ready .dz-reveal.dz-in .dz-cards .dz-card-item:nth-child(6) { transition-delay: .35s; }
.campa-page.dz-ready .dz-reveal.dz-in .dz-cards .dz-card-item:nth-child(7) { transition-delay: .42s; }
.campa-page.dz-ready .dz-reveal.dz-in .dz-cards .dz-card-item:nth-child(8) { transition-delay: .49s; }
.campa-page.dz-ready .dz-reveal.dz-in .dz-cards .dz-card-item:nth-child(9) { transition-delay: .56s; }

/* ── Lists: the marker drawn as a ring, and the point easing aside ── */
.campa-page .dz-list-mark {
    background: transparent;
    border: 1.6px solid rgba(45, 106, 79, .42);
    color: #2d6a4f;
    box-shadow: none;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
                background .3s ease, border-color .3s ease;
}
.campa-page .dz-list li {
    transition: transform .3s cubic-bezier(.22, .8, .2, 1), box-shadow .3s ease;
}
.campa-page .dz-list li:hover { transform: translateX(5px); }
.campa-page .dz-list li:hover .dz-list-mark {
    transform: scale(1.1);
    background: rgba(45, 106, 79, .1);
    border-color: #2d6a4f;
}
/* on the dark band the standard design already draws the mark in gold */
.campa-page .dz-dark .dz-list-mark { border-color: rgba(184, 144, 15, .45); color: var(--dz-gold); }

/* ── Figures, if a run of numbers is ever added from the CMS ── */
.campa-page .dz-stat-icon {
    background: transparent;
    border: 1.6px solid color-mix(in srgb, var(--cp-tone, #2d6a4f) 45%, transparent);
    color: var(--cp-tone, #2d6a4f);
    transition: transform .4s cubic-bezier(.22, .8, .2, 1), background .4s ease;
}
.campa-page .dz-stat:hover .dz-stat-icon {
    transform: translateY(-4px) scale(1.06);
    background: color-mix(in srgb, var(--cp-tone, #2d6a4f) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .campa-page .dz-card-item,
    .campa-page .dz-card-item:hover,
    .campa-page .dz-card-item:hover .dz-card-icon,
    .campa-page .dz-list li:hover,
    .campa-page .dz-list li:hover .dz-list-mark,
    .campa-page .dz-stat:hover .dz-stat-icon { transform: none; }
    .campa-page .dz-card-item:hover::before { transform: none; }
    .campa-page.dz-ready .dz-reveal .dz-cards .dz-card-item { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   A shorter page

   The standard band breathes 96px above and below, which over sixteen
   bands is most of the scrolling on its own, and a list puts one point
   per full-width row. Both are fine on a page of four or five bands;
   this page has sixteen, so it is tightened here and its lists read in
   two columns once there is room. Scoped to .campa-page, so the bands
   everywhere else keep the measurements they were given.
   ══════════════════════════════════════════════════════════ */

.campa-page .dz-band { padding: 58px 0; }
.campa-page .dz-band:first-child { padding-top: 48px; }

/* Points sit two abreast on a wide screen, and a little closer together */
.campa-page .dz-list { gap: 12px; }
.campa-page .dz-list li { padding: 14px 18px; }
@media (min-width: 900px) {
    .campa-page .dz-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .campa-page .dz-list.dz-readable { max-width: 1180px; }
}

/* The lead paragraph under a heading does not need the full measure */
.campa-page .dz-lead { margin-bottom: 6px; }

/* ══════════════════════════════════════════════════════════
   Objectives: white tiles instead of the standard band's green tint,
   each numbered and lifting its own colour on hover — a mix of marks
   rather than the one green ring every other list on the site uses.
   Scoped to this one band by id; the other lists on this page (and the
   generic .dz-list ring everywhere else) are untouched.
   ══════════════════════════════════════════════════════════ */
#section-1312.dz-tint { background: #f9f6ef; border-top: 1px solid #fef7d6; border-bottom: 1px solid #fef7d6; }
#section-1312.dz-tint::before { content: none; }

#section-1312 .dz-list {
    counter-reset: campa-obj;
    gap: 22px;
}
#section-1312 .dz-list li {
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    gap: 18px;
    padding: 26px 56px 26px 24px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #fef7d6;
    box-shadow: 0 16px 36px -26px rgba(10, 46, 26, .3);
}
#section-1312 .dz-list li::after {
    content: counter(campa-obj, decimal-leading-zero);
    counter-increment: campa-obj;
    position: absolute;
    right: 18px;
    top: 14px;
    font: 800 30px/1 Roboto, sans-serif;
    letter-spacing: -.02em;
    color: rgba(10, 46, 26, .09);
    pointer-events: none;
}
#section-1312 .dz-list li:hover {
    transform: translateY(-6px) rotate(-.6deg);
    box-shadow: 0 26px 50px -24px rgba(10, 46, 26, .38);
}
#section-1312.dz-tint .dz-list li:hover { border-color: #f1c40f; }

#section-1312 .dz-list-mark {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #0a2e1a, #2d6a4f);
}
#section-1312 .dz-list li:nth-child(2) .dz-list-mark { background: linear-gradient(135deg, #b8900f, #b8900f); }
#section-1312 .dz-list li:nth-child(3) .dz-list-mark { background: linear-gradient(135deg, #0a2e1a, #2d6a4f); }
#section-1312 .dz-list li:nth-child(4) .dz-list-mark { background: linear-gradient(135deg, #2d6a4f, #2d6a4f); }
#section-1312 .dz-list li:hover .dz-list-mark {
    transform: scale(1.1) rotate(-8deg);
    background-color: transparent;
}

#section-1312 .dz-list li > span:last-child {
    font-size: .98rem;
    line-height: 1.65;
    color: #1a472a;
    font-weight: 500;
    padding-top: 6px;
}

/* the tiles rise in one after another once the band is scrolled to */
.campa-page.dz-ready #section-1312.dz-reveal .dz-list li { opacity: 0; transform: translateY(20px); }
.campa-page.dz-ready #section-1312.dz-reveal.dz-in .dz-list li {
    opacity: 1;
    transform: none;
    transition: opacity .55s cubic-bezier(.22, .8, .2, 1), transform .55s cubic-bezier(.22, .8, .2, 1);
}
#section-1312 .dz-list li:nth-child(1) { transition-delay: 0s !important; }
#section-1312 .dz-list li:nth-child(2) { transition-delay: .1s !important; }
#section-1312 .dz-list li:nth-child(3) { transition-delay: .2s !important; }
#section-1312 .dz-list li:nth-child(4) { transition-delay: .3s !important; }

@media (prefers-reduced-motion: reduce) {
    .campa-page.dz-ready #section-1312.dz-reveal .dz-list li { opacity: 1; transform: none; }
}

/* Four across for a short run of figures. The standard design stops at three,
   so the step down to two and then one is given here as well. */
.campa-page .dz-cards.dz-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .campa-page .dz-cards.dz-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .campa-page .dz-cards.dz-cols-4 { grid-template-columns: 1fr; } }

/* Cards carry a short line of figures rather than a paragraph, so they do not
   need the standard card's room. */
.campa-page .dz-card-item { padding: 26px 22px; }
.campa-page .dz-card-icon { width: 50px; height: 50px; margin-bottom: 14px; font-size: 1.15rem; }
.campa-page .dz-card-item h3 { font-size: 1.05rem; margin-bottom: 8px; }

/* The rule under a heading: the page's green running into gold rather than a flat
   gold bar, and closer to the content it introduces than the standard 48px. */
.campa-page .dz-underline {
    width: 72px;
    margin-bottom: 26px;
    background: linear-gradient(90deg, #2d6a4f, #f1c40f);
}

/* The table of implementing agencies reads better with its rows picked out. */
.campa-page .dz-table tbody tr { transition: background .2s ease; }
.campa-page .dz-table tbody tr:nth-child(even) { background: rgba(45, 106, 79, .04); }
.campa-page .dz-table tbody tr:hover { background: rgba(45, 106, 79, .1); }

/* ── Meghalaya State CAMPA Fund: no picture of its own, so a decorative landmark
   mark stands in for one, watermarked into a bordered, gold-edged card. ── */
#section-1316 .dz-wrap { max-width: 980px; }
#section-1316 .dz-text {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #fef7d6 130%);
    border: 1px solid #f1c40f;
    border-radius: 24px;
    padding: 48px 56px 48px 64px;
    box-shadow: 0 25px 60px -30px rgba(10, 46, 26, .35);
}
#section-1316 .dz-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(180deg, #0a2e1a, #b8900f);
}
#section-1316 .dz-text::after {
    content: "\f66f";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: -14px;
    bottom: -28px;
    font-size: 11rem;
    color: rgba(10, 46, 26, .06);
    pointer-events: none;
}
#section-1316 .dz-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #0a2e1a;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 30px);
}
#section-1316 .dz-title::before {
    content: "\f66f";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    flex: none;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(184, 144, 15, .2);
    color: #0a2e1a;
    font-size: 1.15rem;
}
#section-1316 .dz-prose { position: relative; }
#section-1316 .dz-prose p {
    font-size: 1rem;
    line-height: 1.85;
    color: #334135;
}
#section-1316 .dz-prose.dz-dropcap p::first-letter {
    float: left;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 60px;
    font-weight: 800;
    line-height: .8;
    margin: 8px 10px 0 0;
    color: #0a2e1a;
}
/* the two paragraphs arrive as one block with a <br> between them; read as two */
#section-1316 .dz-prose br { display: block; content: ""; margin-top: 20px; }

@media (max-width: 760px) {
    #section-1316 .dz-text { padding: 34px 26px 34px 30px; }
    #section-1316 .dz-text::after { font-size: 7rem; }
}

/* ══════════════════════════════════════════════════════════
   Giving the page more than one shape

   Sixteen bands of cards read as one long list, so some of them are
   set apart: the plan of operation becomes a run of deep green steps
   on sand, and the figures for community work are drawn as the dark
   tiles the Wildlife pages use. (The laws and the committees have
   blocks of their own, further down.) Bands are named by their own
   id because the difference is in what they say, not in their kind.
   ══════════════════════════════════════════════════════════ */

/* ── The Annual Plan of Operation: steps on sand ── */
#section-1322 { background: #f2ede1; }
#section-1322 .dz-list { max-width: 1120px; }
#section-1322 .dz-list li {
    background: #0a2e1a;
    border: 0;
    color: #f2ede1;
    box-shadow: 0 14px 30px -22px rgba(10, 46, 26, .8);
    transition: transform .4s cubic-bezier(.22, .8, .2, 1), box-shadow .4s ease;
}
/* the twist: each step lifts and tips a little, the even ones the other way */
#section-1322 .dz-list li:hover {
    transform: translateY(-5px) rotate(-.7deg);
    box-shadow: 0 24px 44px -24px rgba(10, 46, 26, .9);
}
#section-1322 .dz-list li:nth-child(even):hover { transform: translateY(-5px) rotate(.7deg); }
#section-1322 .dz-list-mark {
    background: rgba(184, 144, 15, .12);
    border-color: rgba(184, 144, 15, .55);
    color: #f1c40f;
}
#section-1322 .dz-list li:hover .dz-list-mark {
    background: #f1c40f;
    border-color: #f1c40f;
    color: #0a2e1a;
}

/* ── A picture beside the written sections ── */
.campa-page .dz-frame img { border-radius: 14px; }
.campa-page .dz-frame figcaption {
    font-size: .85rem;
    color: #6b7280;
    margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
    #section-1322 .dz-list li:hover,
    #section-1322 .dz-list li:nth-child(even):hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   The runs of figures as small squares

   Key Achievements holds a figure and a word or two: Key Achievements and
   Infrastructure & Protection. They are drawn as small squares, as many
   to a row as the screen allows, which reads as a set of tiles and takes
   less height than wide cards. Laws and the Three Committees carry
   several hundred words each and keep the standard card, so the squares
   are asked for by band id rather than by a rule about cards in general.
   (Community & Capacity Building is a run of figures on a dark field and
   is drawn by the standard design, not from here.)
   ══════════════════════════════════════════════════════════ */

/* The coloured rule along the top edge is dropped everywhere on this page;
   the ring around each mark already carries that card's colour. */
.campa-page .dz-card-item::before { content: none; }

#section-1323 .dz-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 1000px) { #section-1323 .dz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { #section-1323 .dz-cards { grid-template-columns: 1fr; } }
#section-1323 .dz-card-item {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centred: all four cards carry the same shape of content, so they stay in
       step with one another and the square does not sit half empty */
    justify-content: center;
    padding: 20px 16px;
    border-radius: 14px;
}
#section-1323 .dz-card-icon {
    flex: none;          /* a fixed-height flex column would otherwise squash it flat */
    width: 42px;
    height: 42px;
    margin: 0 0 10px;
    border-radius: 11px;
    font-size: .9rem;
}
#section-1323 .dz-card-item h3 {
    font-size: .88rem;
    line-height: 1.3;
    margin-bottom: 6px;
}
#section-1323 .dz-card-item .dz-prose p { font-size: .76rem; line-height: 1.45; margin: 0; }

/* ══════════════════════════════════════════════════════════
   Infrastructure & Protection: nine sand cards, set out as the
   Wildlife page sets out its divisions

   The same card as Divisional Administrative Jurisdiction: a round mark
   top left, the card's number top right, the name small and quiet above,
   and the figure beneath it as the one thing the eye lands on. The colour
   is the sand the site already uses for a quiet card; the weights are
   medium rather than heavy, so the figure reads by its size and not by
   being shouted. Three across and three down.
   ══════════════════════════════════════════════════════════ */

/* The nine cards run as one continuous strip, right to left, the same technique as the
   photograph strip at the foot of the page: the section clips at its normal width, and the
   track inside it (as wide as all the cards laid out in a row) drifts under a transform,
   duplicated once by js/designs/campa.js so the loop has no seam. Hovering holds it still. */
#section-1324 .dz-wrap { overflow: hidden; }
#section-1324 .dz-cards {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 16px;
    counter-reset: campa-infra;
    animation: campaInfraDrift 42s linear infinite;
    will-change: transform;
}
#section-1324 .dz-cards:hover,
#section-1324 .dz-cards:focus-within { animation-play-state: paused; }
@keyframes campaInfraDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* the run is duplicated, so this loops seamlessly */
}

/* No `transition` is written here: the page-wide card rules own it, together with the
   staggered arrival, and a shorthand at this weight would wipe out both. The darker
   sand on hover comes from the ::before wash, which carries its own. */
#section-1324 .dz-card-item {
    counter-increment: campa-infra;
    position: relative;
    isolation: isolate;
    flex: none;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 17px 20px 19px;
    border: 1px solid #fef7d6;
    border-radius: 14px;
    background: #fef7d6;
    box-shadow: none;
}
#section-1324 .dz-card-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    height: auto;
    border-radius: inherit;
    background: rgba(107, 79, 10, .09);
    opacity: 0;
    transform: none;
    transition: opacity .2s ease;
}
#section-1324 .dz-card-item:hover { transform: translateY(-2px); border-color: #f1c40f; box-shadow: 0 16px 28px -22px rgba(107, 79, 10, .65); }
#section-1324 .dz-card-item:hover::before { opacity: 1; transform: none; }

/* the card's number, as the divisions are numbered on the Wildlife page */
#section-1324 .dz-card-item::after {
    content: counter(campa-infra, decimal-leading-zero);
    position: absolute;
    top: 19px;
    right: 20px;
    font: 700 13px/1 Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
    color: rgba(10, 46, 26, .4);
}
/* the duplicated run (js/designs/campa.js) restarts the count at its first card, so the
   strip reads 01-09 twice rather than running on to 18 */
#section-1324 .dz-card-item.campa-infra-restart { counter-reset: campa-infra 0; }

#section-1324 .dz-card-icon {
    width: 40px;
    height: 40px;
    margin: 0 0 12px;
    border-radius: 50%;
    font-size: 1rem;
    background: rgba(255, 255, 255, .5);
}

/* the name: small, medium weight, quiet */
#section-1324 .dz-card-item h3 {
    margin: 0 0 6px;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    color: #5b6b60;
}

/* the figure: large, but only medium weight */
#section-1324 .dz-card-item .dz-prose { width: 100%; }
#section-1324 .dz-card-item .dz-prose p {
    margin: 0;
    font: 500 1.5rem/1.2 Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: #0a2e1a;
}
/* two figures on one card (patrolling paths and footpath; constructed and maintained):
   each is a line of its own, smaller, with its label running into it. A label is the
   <strong> in the text, and is set quiet here rather than left at the standard bold. */
#section-1324 .dz-card-item .dz-prose p:has(strong) {
    font-size: 1.02rem;
    line-height: 1.6;
}
#section-1324 .dz-card-item .dz-prose strong {
    margin-right: 4px;
    font: 500 .82rem/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: 0;
    text-transform: none;
    color: #5b6b60;
}

@media (prefers-reduced-motion: reduce) {
    #section-1324 .dz-cards { animation: none; }
    #section-1324 .dz-wrap { overflow-x: auto; }
}

/* ══════════════════════════════════════════════════════════
   Utilisation of the Money & Functions of the State CAMPA Cell:
   beige band (no more green tint), each point its own thin-bordered
   card rather than a ledger row or a plain ringed point.
   ══════════════════════════════════════════════════════════ */

#section-1317.dz-tint, #section-1320.dz-tint {
    background: #f9f6ef;
    border-top: 1px solid #fef7d6;
    border-bottom: 1px solid #fef7d6;
}
#section-1317.dz-tint::before, #section-1320.dz-tint::before { content: none; }

#section-1317 .dz-list, #section-1320 .dz-list {
    grid-template-columns: 1fr;
    max-width: 960px;
    gap: 14px;
}

/* Functions of the State CAMPA Cell has more points than Utilisation of the Money,
   so it runs in two columns to keep the band from running tall. */
#section-1320 .dz-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 980px;
    gap: 12px 18px;
}
#section-1320 .dz-list li { padding: 15px 18px; }
@media (max-width: 700px) {
    #section-1320 .dz-list { grid-template-columns: 1fr; }
}
#section-1317 .dz-list li, #section-1320 .dz-list li {
    background: #ffffff;
    border: 1px solid #f1c40f;
    border-radius: 14px;
    box-shadow: none;
    padding: 18px 20px;
    gap: 16px;
    align-items: flex-start;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#section-1317 .dz-list li:hover, #section-1320 .dz-list li:hover {
    background: #ffffff;
    transform: translateX(4px);
    border-color: #0a2e1a;
    box-shadow: 0 10px 24px -18px rgba(10, 46, 26, .35);
}
#section-1317 .dz-list-mark, #section-1320 .dz-list-mark {
    width: 34px;
    height: 34px;
    flex: none;
    background: #0a2e1a;
    border: 0;
    border-radius: 10px;
    color: #f9f6ef;
    font: 700 .95rem/1 "Plus Jakarta Sans", sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 0;
    box-shadow: none;
    transition: background-color .3s ease, color .3s ease;
}
#section-1317 .dz-list li:hover .dz-list-mark, #section-1320 .dz-list li:hover .dz-list-mark {
    background: #b8900f;
    color: #0a2e1a;
    transform: none;
}

/* ══════════════════════════════════════════════════════════
   The caption under a photograph

   The standard design lays it over the foot of the picture on a dark
   green bar; the colour set earlier made it grey on that bar and so
   unreadable. It is light again, and a shade stronger.
   ══════════════════════════════════════════════════════════ */

.campa-page .dz-frame figcaption {
    margin-top: 0;
    padding: 12px 18px;
    background: linear-gradient(to top, rgba(10, 46, 26, .95), rgba(10, 46, 26, .78));
    color: #f2ede1;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
}

/* ══════════════════════════════════════════════════════════
   Introduction: a deep green card on the page, not a green band

   The same card the Wildlife pages use for a highlighted board: rounded,
   the forest green, a soft shadow, the heading in gold. The band around
   it is the ordinary page colour (the section's look is "White" in the
   CMS). The words run in two columns so the card is wide and short
   rather than a long strip of text.
   ══════════════════════════════════════════════════════════ */

#section-1311 .dz-text {
    max-width: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 46px 54px 48px;
    border-radius: 20px;
    background: linear-gradient(160deg, #1a472a 0%, #0a2e1a 66%);
    box-shadow: 0 20px 50px rgba(10, 46, 26, .25);
}
/* a soft light in the corner, as the site's other green cards carry */
#section-1311 .dz-text::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 360px;
    height: 360px;
    right: -100px;
    top: -130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 144, 15, .17), transparent 68%);
}
#section-1311 .dz-title { margin-bottom: 22px; color: #f1c40f; }
#section-1311 .dz-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 14px;
    border-radius: 3px;
    background: rgba(184, 144, 15, .6);
}
#section-1311 .dz-prose { columns: 2; column-gap: 54px; }
/* the CMS hands this over as one paragraph with line breaks inside it, so the paragraph
   itself has to be allowed to run on from one column into the next */
#section-1311 .dz-prose p { color: rgba(242, 237, 225, .9); }
#section-1311 .dz-prose strong { color: #f1c40f; }
#section-1311 .dz-dropcap > p:first-child::first-letter { color: #f1c40f; }
@media (max-width: 860px) {
    #section-1311 .dz-text { padding: 34px 26px 36px; }
    #section-1311 .dz-prose { columns: 1; }
}

/* ══════════════════════════════════════════════════════════
   The photograph strip, edge to edge

   It now sits outside the page's centred container (see gallery.html),
   so it runs the full width of the band and the pictures enter and
   leave at the edges of the screen. The fade at each end stays, a
   little narrower.
   ══════════════════════════════════════════════════════════ */

.campa-page .campa-gal {
    margin-top: 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

/* ══════════════════════════════════════════════════════════
   In the site's dark mode

   The whole page is inverted there (css/darkmode.css), and the
   standard dark bands are inverted back so they stay dark. The green
   card, the green steps and the picture viewer are dark on purpose, so
   they are given the same treatment, and the picture inside the viewer
   is left alone because the page's own rule already restores it.
   ══════════════════════════════════════════════════════════ */

html[data-opera-dark="true"] #section-1311 .dz-text,
html[data-opera-dark="true"] #section-1322 .dz-list li,
html[data-opera-dark="true"] .campa-viewer { filter: invert(1) hue-rotate(180deg); }
html[data-opera-dark="true"] .campa-viewer img { filter: none; }

/* ══════════════════════════════════════════════════════════
   Laws Governing CAMPA: a vertical accordion of hanging "bookmark"
   cards, exactly one open at a time. Every selector below is scoped
   under .campa-laws so nothing here reaches any other section or page.
   (templates/core/designs/campa/laws.html, js/designs/campa.js)
   ══════════════════════════════════════════════════════════ */

.campa-laws {
    background: #fef7d6;
    border-radius: 28px;
    padding: 56px 48px 60px;
}

.campa-laws .campa-laws-title {
    margin: 0;
    text-align: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 4.4vw, 46px);
    letter-spacing: -0.01em;
    color: #0a2e1a;
}

.campa-laws .campa-laws-underline {
    display: block;
    width: 80px;
    height: 4px;
    margin: 18px auto 44px;
    border-radius: 4px;
    background: #b8900f;
}

.campa-laws .campa-laws-stack {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.campa-laws .campa-law-card {
    position: relative;
    background: #0a2e1a;
    border: 1px solid #f1c40f;
    border-radius: 16px;
    padding: 24px 34px 24px 128px;
    cursor: pointer;
    outline: none;
    transition: background-color .4s ease, box-shadow .4s ease;
}

.campa-laws .campa-law-card::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(254, 247, 214, .4);
    border-radius: 11px;
    pointer-events: none;
}

.campa-laws .campa-law-card:focus-visible {
    box-shadow: 0 0 0 3px #b8900f;
}

.campa-laws .campa-law-card.is-open {
    background: #1a472a;
    box-shadow: 0 18px 40px -18px rgba(10, 46, 26, .55);
}

.campa-laws .campa-law-name {
    margin: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 22px);
    color: #fef7d6;
}

/* the hanging bookmark ribbon, its year written top to bottom */
.campa-laws .campa-law-ribbon {
    position: absolute;
    left: 34px;
    top: -2px;
    width: 64px;
    height: 104px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14px;
    background: #b8900f;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
    transition: height .5s cubic-bezier(.3, 1.4, .5, 1);
}

.campa-laws .campa-law-card.is-open .campa-law-ribbon {
    height: 152px;
}

.campa-laws .campa-law-year {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 800;
    font-size: 22px;
    color: #0a2e1a;
    letter-spacing: .02em;
}

/* the description opens with the grid-rows 0fr -> 1fr technique, no JS height measuring */
.campa-laws .campa-law-desc-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .55s cubic-bezier(.22, .8, .2, 1);
}

.campa-laws .campa-law-card.is-open .campa-law-desc-wrap {
    grid-template-rows: 1fr;
}

.campa-laws .campa-law-desc {
    overflow: hidden;
    min-height: 0;
}

.campa-laws .campa-law-desc p {
    margin: 14px 0 0;
    max-width: 68ch;
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(254, 247, 214, .92);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
}

.campa-laws .campa-law-card.is-open .campa-law-desc p {
    opacity: 1;
    transform: none;
    transition-delay: .2s;
}

/* cards rise in on scroll, staggered; each ribbon unfurls .5s after its own card */
.campa-page.dz-ready .dz-reveal .campa-laws .campa-law-card { opacity: 0; transform: translateY(28px); }
.campa-page.dz-ready .dz-reveal .campa-laws .campa-law-ribbon {
    clip-path: polygon(0 0, 100% 0, 100% 0, 50% 0, 0 0);
}
.campa-page.dz-ready .dz-reveal.dz-in .campa-laws .campa-law-card {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.22, .8, .2, 1), transform .6s cubic-bezier(.22, .8, .2, 1);
}
.campa-page.dz-ready .dz-reveal.dz-in .campa-laws .campa-law-ribbon {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
    transition: clip-path .5s cubic-bezier(.22, .8, .2, 1), height .5s cubic-bezier(.3, 1.4, .5, 1);
}
.campa-page.dz-ready .dz-reveal.dz-in .campa-laws .campa-law-card:nth-child(1) { transition-delay: 0s; }
.campa-page.dz-ready .dz-reveal.dz-in .campa-laws .campa-law-card:nth-child(2) { transition-delay: .2s; }
.campa-page.dz-ready .dz-reveal.dz-in .campa-laws .campa-law-card:nth-child(3) { transition-delay: .4s; }
.campa-page.dz-ready .dz-reveal.dz-in .campa-laws .campa-law-card:nth-child(1) .campa-law-ribbon { transition-delay: .5s; }
.campa-page.dz-ready .dz-reveal.dz-in .campa-laws .campa-law-card:nth-child(2) .campa-law-ribbon { transition-delay: .7s; }
.campa-page.dz-ready .dz-reveal.dz-in .campa-laws .campa-law-card:nth-child(3) .campa-law-ribbon { transition-delay: .9s; }

@media (max-width: 760px) {
    .campa-laws { padding: 36px 20px; }
    .campa-laws .campa-law-card { padding-left: 100px; }
    .campa-laws .campa-law-ribbon { width: 56px; left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .campa-laws .campa-law-card,
    .campa-laws .campa-law-ribbon,
    .campa-laws .campa-law-desc-wrap,
    .campa-laws .campa-law-desc p { transition: none !important; }
    .campa-page.dz-ready .dz-reveal .campa-laws .campa-law-card,
    .campa-page.dz-ready .dz-reveal .campa-laws .campa-law-ribbon {
        opacity: 1;
        transform: none;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
    }
}

/* ══════════════════════════════════════════════════════════
   The Three Committees: one at a time under tabs

   The tabs are the site's own. Under them the committee is laid out as
   a spread rather than a box: down the left, its mark, the number of
   its members as a large outlined figure, and who chairs it; on the
   right, how it was constituted and its powers one to a line. The
   sand behind it is the one the site already uses for a quiet card.
   (templates/core/designs/campa/committees.html)
   ══════════════════════════════════════════════════════════ */

.campa-committees { background: #f2ede1; }

.campa-com {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 0 56px;
    align-items: start;
    min-height: 380px;   /* the three differ in length; this keeps the band from jumping as they are switched */
}
.campa-com-body { padding-left: 6px; }
.dz-tab-panel:not([hidden]) .campa-com { animation: campaPanelIn .5s cubic-bezier(.22, .8, .2, 1) both; }
@keyframes campaPanelIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.campa-com-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 26px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--cp-tone, #2d6a4f) 10%, #fff);
    box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--cp-tone, #2d6a4f) 32%, transparent);
}
.campa-com-count {
    font: 800 98px/.9 Roboto, sans-serif;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    color: var(--cp-tone, #2d6a4f);
}
.campa-com-label {
    margin-top: 10px;
    font: 700 .74rem/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #5b6b60;
}
.campa-com-chair {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1.5px solid color-mix(in srgb, var(--cp-tone, #2d6a4f) 28%, transparent);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.5;
    color: #0a2e1a;
}
.campa-com-chair small {
    display: block;
    margin-bottom: 6px;
    font: 700 .68rem/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #5b6b60;
}

.campa-com-lead {
    margin: 0 0 24px;
    font-size: .98rem;
    line-height: 1.75;
    color: #3f4a43;
}
.campa-com-sub {
    margin: 0 0 14px;
    font: 700 .74rem/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cp-tone, #0a2e1a);
}
.campa-com-powers {
    list-style: none;
    margin: 0;
    padding: 0 0 0 8px;
    columns: 2;
    column-gap: 40px;
}
.campa-com-powers li {
    position: relative;
    break-inside: avoid;
    padding: 0 0 13px 28px;
    font-size: .93rem;
    line-height: 1.6;
    color: #0a2e1a;
}
/* a small ring in the committee's colour marks each power; filled so it is visible
   without needing to hover first, not just an outline that reads as near-invisible. */
.campa-com-powers li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2.2px solid var(--cp-tone, #2d6a4f);
    background: color-mix(in srgb, var(--cp-tone, #2d6a4f) 22%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-tone, #2d6a4f) 10%, transparent);
    transition: background .25s ease;
}
.campa-com-powers li:hover::before { background: var(--cp-tone, #2d6a4f); }

@media (max-width: 900px) {
    .campa-com { grid-template-columns: 1fr; gap: 26px 0; min-height: 0; }
    .campa-com-side {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 20px;
        padding: 22px 20px;
    }
    .campa-com-count { font-size: 70px; }
    .campa-com-label { margin-top: 0; }
    .campa-com-chair { flex-basis: 100%; margin-top: 8px; padding-top: 14px; }
    .campa-com-powers { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dz-tab-panel:not([hidden]) .campa-com { animation: none; }
}

/* Introduction: the heading in yellow (another rule held it dark green on the dark card), its underline short and light */
html body .campa-page #section-1311 .dz-text .dz-title { color: #f1c40f !important; font-size: clamp(28px, 2.4vw, 36px); }
html body .campa-page #section-1311 .dz-text .dz-title::after { background: rgba(241, 196, 15, .55); }

/* the table's heading row: deep green with bold yellow text */
html body .dz-page.campa-page .dz-table thead th { background: #0b3d2c !important; color: #f1c40f !important; font-weight: 700 !important; }

/* Key Achievements: smaller cards, larger text */
html body .campa-page #section-1323 .dz-cards { gap: 16px; }
html body .campa-page #section-1323 .dz-card-item { min-height: 0 !important; height: auto !important; padding: 22px 22px 24px !important; }
html body .campa-page #section-1323 .dz-card-icon { width: 46px; height: 46px; margin-bottom: 14px; font-size: 18px; }
html body .campa-page #section-1323 .dz-card-item h3 { margin: 0 0 10px; font-size: 1.3rem; line-height: 1.3; color: #0a2e1a; }
html body .campa-page #section-1323 .dz-prose, html body .campa-page #section-1323 .dz-prose p { font-size: 1.05rem !important; line-height: 1.75; color: #374151; }
html body .campa-page #section-1323 .dz-prose strong { font-size: 1.05rem; color: #1a472a; }
html body .campa-page #section-1323 .dz-card-item { display: flex; flex-direction: column; justify-content: flex-start !important; aspect-ratio: auto !important; }
html body .campa-page #section-1323 .dz-card-icon { margin-top: 0; }

/* Introduction: the first letter is an ordinary letter again, not a large drop cap */
html body .campa-page #section-1311 .dz-dropcap > p:first-child::first-letter { float: none; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; padding: 0; color: inherit; }

/* Community & Capacity Building: the icons in a clear yellow ring, level with the figure's left edge */
html body .campa-page #section-1325 .dz-stat { text-align: left; }
html body .campa-page #section-1325 .dz-stat-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 0 14px; border-radius: 50%;
    background: rgba(241, 196, 15, .12); border: 1.5px solid #f1c40f; }
html body .campa-page #section-1325 .dz-stat-icon i { color: #f1c40f !important; font-size: 20px; }

/* Objectives: the cards a little more highlighted - a thin green border, a light green tint and a stronger number */
html body .campa-page #section-1312 .dz-list li { border: 1px solid rgba(26, 71, 42, .4); background: linear-gradient(135deg, #fff 0%, #e8f1e6 100%); box-shadow: 0 10px 24px -16px rgba(10, 46, 26, .6); }
html body .campa-page #section-1312 .dz-list li::after { color: rgba(26, 71, 42, .28); }
html body .campa-page #section-1312 .dz-list-mark { color: #1a472a; }
html body .campa-page #section-1312 .dz-list li > span:last-child { font-weight: 600; color: #0a2e1a; }

/* Introduction: one column, the paragraphs one after the other (not two side-by-side columns); the highlighted words are yellow */
html body .campa-page #section-1311 .dz-prose { columns: 1; column-count: 1; max-width: none; }
html body .campa-page #section-1311 .dz-prose p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.8; text-align: left; }
html body .campa-page #section-1311 .dz-prose p:last-child { margin-bottom: 0; }
html body .campa-page #section-1311 .dz-prose strong { color: #f1c40f; font-weight: 700; }