/* CIL Jacksonville: the site's look. Applies only to pages that carry it (body.cil-new: see
   inc/look.php). CIL's own colours and fonts, used with more restraint: white space, one
   accent per section, text that passes contrast checks, and one button style. */

body.cil-new {
	--cn-ink: #17202b;
	--cn-muted: #4b5563;
	--cn-teal: #11b8bf;          /* brand teal: accents and large shapes only (too light for text) */
	--cn-teal-deep: #0a6166;     /* text and buttons on light backgrounds */
	--cn-teal-tint: #e8f7f8;
	--cn-maroon: #9e005d;
	--cn-yellow: #ebde2d;
	--cn-bg: #f6f8f9;
	--cn-night: #0b1020;
	--cn-line: #e3e8ec;
	--cn-radius: 16px;
	--cn-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);
	--cn-head: "Montserrat", system-ui, sans-serif;
	--cn-body: "Merriweather Sans", system-ui, sans-serif;
	background: #fff;
	color: var(--cn-ink);
	font-family: var(--cn-body);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.6;
}

/* ------------------------------------------------------------ page frame */
body.cil-new #header,
body.cil-new .hero-section { display: none; }
body.cil-new .ct-container-full { padding-top: 0; padding-bottom: 0; }
/* The page's own sections reach the edges of the content area whatever the theme's Customizer says
   about pages ("boxed" content with padding, a background and a shadow on the live site). */
body.cil-new [class*="ct-container"] > article[class*="post"] {
	--has-boxed: var(--false); --has-wide: var(--true); --theme-boxed-content-spacing: 0px;
	padding: 0; background: none; box-shadow: none; border-radius: 0;
}
body.cil-new .entry-content > * { margin-top: 0; margin-bottom: 0; }
body.cil-new .cn-wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }

body.cil-new h1, body.cil-new h2, body.cil-new h3 {
	font-family: var(--cn-head); color: var(--cn-ink); letter-spacing: -.01em; margin: 0;
}
body.cil-new h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; line-height: 1.15; }
body.cil-new h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }
body.cil-new p { margin: 0; }
body.cil-new img { max-width: 100%; height: auto; display: block; }
body.cil-new a { color: var(--cn-teal-deep); }
body.cil-new :focus-visible { outline: 3px solid var(--cn-maroon); outline-offset: 3px; border-radius: 6px; }
body.cil-new .cn-footer :focus-visible { outline-color: var(--cn-yellow); }   /* visible on the dark footer */

/* ------------------------------------------------------------ buttons */
body.cil-new .cn-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
	padding: 12px 24px; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
	font-family: var(--cn-head); font-weight: 700; font-size: 15px; line-height: 1.2;
	text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.cil-new .cn-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, .16); }
body.cil-new .cn-btn--maroon { background: var(--cn-maroon); color: #fff; }
body.cil-new .cn-btn--maroon:hover { background: #7f004b; }
body.cil-new .cn-btn--teal { background: var(--cn-teal-deep); color: #fff; }
body.cil-new .cn-btn--teal:hover { background: #084d51; }
body.cil-new .cn-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
body.cil-new .cn-btn--ghost:hover { background: rgba(255, 255, 255, .1); }
body.cil-new .cn-more {
	font-family: var(--cn-head); font-weight: 700; font-size: 15px; color: var(--cn-teal-deep);
	text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
}
body.cil-new .cn-more::after { content: "\2192"; transition: transform .15s ease; }
body.cil-new .cn-more:hover::after { transform: translateX(4px); }
body.cil-new .cn-more:hover { text-decoration: underline; }

/* ------------------------------------------------------------ header and menu */
body.cil-new .cn-header {
	position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px); border-bottom: 1px solid var(--cn-line);
}
body.admin-bar.cil-new .cn-header { top: 32px; }
body.cil-new .cn-header__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
/* The logo: the CIL mark with JACKSONVILLE beside it, sitting on the same line as the bottom of
   the letters; "Center for Independent Living" runs underneath, across the logo's full width. */
body.cil-new .cn-logo {
	display: inline-grid; grid-template-columns: auto auto; align-items: end; column-gap: 9px; row-gap: 5px;
	text-decoration: none; flex: none;
}
body.cil-new .cn-logo img { height: 44px; width: auto; }
body.cil-new .cn-logo__text { display: contents; }
body.cil-new .cn-logo__name {
	font-family: var(--cn-head); font-weight: 600; font-size: 20.2px; line-height: 1; letter-spacing: .05em;
	text-transform: uppercase; color: var(--cn-maroon); margin-bottom: -2.1px;
}
body.cil-new .cn-logo__tag {
	grid-column: 1 / -1; width: 0; min-width: 100%;          /* as wide as the row above, never wider */
	text-align: justify; text-align-last: justify;            /* spread the words to both edges */
	font-family: var(--cn-head); font-weight: 500; font-size: 14.95px; line-height: 1; letter-spacing: .01em;
	color: #0a7f85; white-space: nowrap;   /* the logo's teal, a shade deeper so the words stay readable */
}
body.cil-new .cn-nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
body.cil-new .cn-nav li { position: relative; margin: 0; }
body.cil-new .cn-nav > ul > li > a:not(.cn-btn),
body.cil-new .cn-nav > ul > li > button {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
	border: 0; background: none; border-radius: 10px; cursor: pointer;
	font-family: var(--cn-head); font-weight: 600; font-size: 16px; color: var(--cn-ink); text-decoration: none;
}
body.cil-new .cn-nav > ul > li > a:not(.cn-btn):hover,
body.cil-new .cn-nav > ul > li > button:hover { background: var(--cn-teal-tint); color: var(--cn-teal-deep); }
body.cil-new .cn-has-sub > button::after {
	content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
body.cil-new .cn-has-sub > button[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
body.cil-new .cn-sub {
	display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; z-index: 60;
	list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--cn-line);
	border-radius: 14px; box-shadow: var(--cn-shadow);
}
body.cil-new .cn-has-sub > button[aria-expanded="true"] + .cn-sub { display: block; }
body.cil-new .cn-sub ul { list-style: none; margin: 0; padding: 0; }
body.cil-new .cn-sub a:not(.cn-more) {
	display: block; padding: 9px 12px; border-radius: 8px; color: var(--cn-ink); text-decoration: none; font-size: 16px;
}
body.cil-new .cn-sub a:not(.cn-more):hover { background: var(--cn-teal-tint); color: var(--cn-teal-deep); }
/* Programs: grouped under headings, in two columns. */
body.cil-new .cn-has-sub > button[aria-expanded="true"] + .cn-mega { display: block; width: min(600px, 100vw - 48px); padding: 14px 14px 10px; }
body.cil-new .cn-mega__groups { column-count: 2; column-gap: 20px; }
body.cil-new .cn-mega__group { break-inside: avoid; }
body.cil-new .cn-nav a[aria-current="page"] { color: var(--cn-teal-deep); }
body.cil-new .cn-mega__h {
	font-family: var(--cn-head); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--cn-maroon); padding: 10px 12px 4px;   /* the Donate button's colour, so headings stand apart from the links */
}
body.cil-new .cn-mega__all { border-top: 1px solid var(--cn-line); margin-top: 8px; padding: 6px 12px 0; }
/* search: a magnifier button that opens a small search box (always open inside the phone menu) */
body.cil-new .cn-search > button { padding: 8px 12px; }
body.cil-new .cn-search > button::after { display: none; }
body.cil-new .cn-search .cn-sub { left: auto; right: 0; width: min(380px, 100vw - 48px); padding: 16px; }
body.cil-new .cn-search__form label { display: block; font-family: var(--cn-head); font-weight: 600; font-size: 15px; margin-bottom: 8px; color: var(--cn-ink); }
body.cil-new .cn-search__row { display: flex; gap: 8px; }
body.cil-new .cn-search__row input {
	flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1.5px solid #9aa5b1; border-radius: 999px;
	font: inherit; color: var(--cn-ink); background: #fff;
}
body.cil-new .cn-search__row input:focus-visible { outline: 3px solid var(--cn-teal-deep); outline-offset: 1px; border-color: var(--cn-teal-deep); }
body.cil-new .cn-nav__donate { margin-left: 10px; }
body.cil-new .cn-menu-btn { display: none; }

@media (max-width: 900px) {
	body.cil-new .cn-header__row { min-height: 68px; flex-wrap: wrap; }
	body.cil-new .cn-logo { column-gap: 8px; row-gap: 4px; }
	body.cil-new .cn-logo img { height: 38px; }
	body.cil-new .cn-logo__name { font-size: 17.5px; margin-bottom: -1.8px; }
	body.cil-new .cn-logo__tag { font-size: 12.9px; }
	body.cil-new .cn-menu-btn {
		display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
		border: 2px solid var(--cn-ink); border-radius: 999px; background: #fff; color: var(--cn-ink);
		font-family: var(--cn-head); font-weight: 700; font-size: 15px; cursor: pointer;
	}
	body.cil-new .cn-menu-btn__bars,
	body.cil-new .cn-menu-btn__bars::before,
	body.cil-new .cn-menu-btn__bars::after { display: block; width: 18px; height: 2px; background: currentColor; content: ""; }
	body.cil-new .cn-menu-btn__bars { position: relative; }
	body.cil-new .cn-menu-btn__bars::before { position: absolute; top: -6px; }
	body.cil-new .cn-menu-btn__bars::after { position: absolute; top: 6px; }
	body.cil-new .cn-nav { display: none; flex-basis: 100%; padding: 4px 0 18px; }
	/* The header stays at the top of the screen, so an open menu taller than the screen scrolls
	   inside itself (Programs has 17 links); the page behind it stays still. */
	body.cil-new .cn-nav.is-open { display: block; max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	body.cil-new .cn-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
	body.cil-new .cn-nav > ul > li > a:not(.cn-btn),
	body.cil-new .cn-nav > ul > li > button { width: 100%; justify-content: space-between; font-size: 18px; padding: 12px 8px; }
	body.cil-new .cn-sub { position: static; border: 0; box-shadow: none; padding: 0 0 6px 14px; }
	body.cil-new .cn-has-sub > button[aria-expanded="true"] + .cn-mega { width: auto; padding: 0 0 6px 14px; }
	body.cil-new .cn-mega__groups { column-count: 1; }
	body.cil-new .cn-search { order: -1; margin-bottom: 8px; }
	body.cil-new .cn-search > button { display: none !important; }
	body.cil-new .cn-search .cn-sub { display: block; width: auto; padding: 4px 0 8px; }
	body.cil-new .cn-nav__donate { margin: 12px 0 0; }
	body.cil-new .cn-nav__donate .cn-btn { width: 100%; }
}

/* ------------------------------------------------------------ footer */
/* Four centred rows: link columns, social icons, contact + Volunteer, one small legal line. */
body.cil-new #footer { display: none; }
body.cil-new .cn-footer { background: var(--cn-night); color: #c9d0dd; padding: 56px 0 28px; text-align: center; }
body.cil-new .cn-footer a { color: #fff; text-decoration: none; }
body.cil-new .cn-footer a:not(.cn-btn):hover { text-decoration: underline; }
/* a link inside a line of words is underlined, so it doesn't rely on colour alone (WCAG 1.4.1) */
body.cil-new .cn-footer__contact p a, body.cil-new .cn-footer__legal p:not(.cn-footer__policy) a { text-decoration: underline; text-underline-offset: 2px; }
/* headings in the brand teal, so a column's title doesn't read as one more link (links are white) */
body.cil-new .cn-footer h2 {
	color: var(--cn-teal); font-family: var(--cn-head); font-size: 13px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; line-height: 1.3; margin: 0 0 12px;
}
body.cil-new .cn-footer ul { list-style: none; margin: 0; padding: 0; }
body.cil-new .cn-footer__cols { display: flex; justify-content: center; gap: clamp(40px, 9vw, 120px); }
body.cil-new .cn-footer__cols li { margin: 8px 0; }
body.cil-new .cn-footer__cols a { font-size: 16px; display: inline-block; min-height: 24px; }
body.cil-new .cn-footer__social { display: flex; justify-content: center; gap: 14px; margin-top: 18px !important; }
body.cil-new .cn-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
body.cil-new .cn-footer__social a:hover { background: rgba(255, 255, 255, .12); }
body.cil-new .cn-footer__icon {
	display: block; width: 28px; height: 28px; background: #fff;
	-webkit-mask: var(--cn-icon) center / contain no-repeat; mask: var(--cn-icon) center / contain no-repeat;
}
body.cil-new .cn-footer__contact {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 36px;
	margin-top: 18px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14);
}
body.cil-new .cn-footer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
body.cil-new .cn-footer__contact h2 { margin-bottom: 6px; }
body.cil-new .cn-footer__contact p { font-size: 16px; line-height: 1.6; }
body.cil-new .cn-footer__contact span { opacity: .5; padding: 0 4px; }
body.cil-new .cn-footer__legal {
	display: flex; flex-direction: column; align-items: center; gap: 6px;   /* one centred line each */
	margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 13px; color: #aab3c2;
}
body.cil-new .cn-footer__legal a { color: #dfe4ec; }
body.cil-new .cn-footer__policy { text-align: center; }
body.cil-new .cn-footer__policy a { margin: 0 10px; }
@media (max-width: 560px) {
	body.cil-new .cn-footer__cols { flex-direction: column; gap: 28px; }
}
/* ============================================================ page sections */
/* The page builders (Eva's data -> block markup) write class names only. Every colour, size,
   font and space for those classes is here, so a page's look is changed in one place.

   A section's STYLE is one of five named styles. Each sets the background and the colours that
   go with it, so text is always readable on it. */
body.cil-new, body.cil-new .cil-style-plain {
	--cil-bg: #fff; --cil-text: var(--cn-muted); --cil-head: var(--cn-ink); --cil-eyebrow: var(--cn-teal-deep);
	--cil-btn-bg: var(--cn-teal-deep); --cil-btn-text: #fff;
	--cil-outline-bg: #fff; --cil-outline-text: var(--cn-teal-deep); --cil-outline-border: var(--cn-teal-deep);
	--cil-strong-bg: var(--cn-maroon); --cil-strong-text: #fff;
}
body.cil-new .cil-style-soft { --cil-bg: var(--cn-bg); }            /* light grey */
body.cil-new .cil-style-tinted { --cil-bg: var(--cn-teal-tint); }   /* light teal */
body.cil-new .cil-style-accent {                                    /* deep teal */
	--cil-bg: var(--cn-teal-deep); --cil-text: #e6f6f7; --cil-head: #fff; --cil-eyebrow: var(--cn-yellow);
	--cil-btn-bg: #fff; --cil-btn-text: var(--cn-teal-deep);
	--cil-outline-bg: transparent; --cil-outline-text: #fff; --cil-outline-border: rgba(255, 255, 255, .7);
	--cil-strong-bg: var(--cn-yellow); --cil-strong-text: var(--cn-night);
}
body.cil-new .cil-style-dark {                                      /* dark */
	--cil-bg: var(--cn-night); --cil-text: #e8ebf3; --cil-head: #fff; --cil-eyebrow: var(--cn-yellow);
	--cil-btn-bg: var(--cn-yellow); --cil-btn-text: var(--cn-night);
	--cil-outline-bg: transparent; --cil-outline-text: #fff; --cil-outline-border: rgba(255, 255, 255, .7);
	--cil-strong-bg: var(--cn-yellow); --cil-strong-text: var(--cn-night);
}
body.cil-new .cil-style-accent :focus-visible, body.cil-new .cil-style-dark :focus-visible { outline-color: var(--cn-yellow); }

/* WordPress and the theme put a gap between blocks; grids and cards set their own spacing */
body.cil-new :is(.cil-cards, .cil-people, .cil-logos, .cil-gallery, .cil-team-card, .cil-page-body, .cil-intro) > * { margin-block: 0; }

/* a section: a band as wide as the window, its content as wide as the rest of the site */
body.cil-new:has(.cil-section) { overflow-x: clip; }
body.cil-new .cil-section {
	width: 100vw; max-width: none !important; margin: 0 0 0 calc(50% - 50vw) !important;
	padding: clamp(40px, 5.2vw, 70px) 0; background: var(--cil-bg); color: var(--cil-text);
}
body.cil-new .cil-section[id] { scroll-margin-top: 90px; }
body.cil-new .cil-section > * { width: min(1160px, 100% - 48px); max-width: none !important; margin-inline: auto !important; }
body.cil-new .cil-section :is(h1, h2, h3), body.cil-new .cil-intro :is(h2, h3) { color: var(--cil-head); }
body.cil-new .cil-section > h2 { margin-bottom: clamp(20px, 3vw, 32px); }
/* ONE gap between sections (Dennis, 2026-10-05). Each section has the same space above and
   below its content. Where two sections with the same background meet, the second gives up its
   top space, so the gap between any two sections is always one space, never two. */
body.cil-new .cil-section.cil-style-plain + .cil-section.cil-style-plain,
body.cil-new .cil-section.cil-style-soft + .cil-section.cil-style-soft,
body.cil-new .cil-section.cil-style-tinted + .cil-section.cil-style-tinted,
body.cil-new .cil-section.cil-style-accent + .cil-section.cil-style-accent,
body.cil-new .cil-section.cil-style-dark + .cil-section.cil-style-dark { padding-top: 0; }

body.cil-new .cil-section p, body.cil-new .cil-intro p { color: var(--cil-text); }
body.cil-new .cil-section p + p, body.cil-new .cil-intro p + p { margin-top: 12px; }
body.cil-new .cil-section figure { margin: 0; }
body.cil-new .cil-eyebrow {
	color: var(--cil-eyebrow) !important; font-family: var(--cn-head); font-weight: 700; font-size: 13px;
	letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px;
}
/* a small logo beside the small line (a feature's "logo") */
body.cil-new .cil-eyebrow-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
body.cil-new .cil-eyebrow-row .cil-eyebrow { margin: 0; }
body.cil-new .cil-eyebrow-row .cil-eyebrow-logo { flex: none; margin: 0; }
body.cil-new .cil-eyebrow-row .cil-eyebrow-logo img { display: block; width: 44px; height: 44px; }
body.cil-new .cil-lead { font-size: 18px; max-width: 62ch; margin-bottom: clamp(20px, 3vw, 32px); }

/* buttons written by the builders: "main" (no class), "outline" and "strong" */
body.cil-new .entry-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
body.cil-new .entry-content .wp-block-button { margin: 0; }
body.cil-new .entry-content .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px;
	border-radius: 999px; border: 2px solid var(--cil-btn-bg); background: var(--cil-btn-bg); color: var(--cil-btn-text);
	font-family: var(--cn-head); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
body.cil-new .entry-content .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, .16); }
body.cil-new .entry-content .cil-btn--outline .wp-block-button__link {
	background: var(--cil-outline-bg); color: var(--cil-outline-text); border-color: var(--cil-outline-border);
}
body.cil-new .entry-content .cil-btn--strong .wp-block-button__link {
	background: var(--cil-strong-bg); color: var(--cil-strong-text); border-color: var(--cil-strong-bg);
}

/* an icon before a button's or a quick link's words (cil-ico-NAME), in the words' own colour */
body.cil-new .entry-content [class*="cil-ico-"] .wp-block-button__link::before {
	content: ""; display: block; position: static; flex: none; width: 18px; height: 18px; margin-right: 8px; background: currentColor;
	-webkit-mask: var(--cil-ico) center / contain no-repeat; mask: var(--cil-ico) center / contain no-repeat;
	opacity: 1; filter: none; z-index: auto; border-radius: 0; transition: none;   /* the theme uses this spot for a blurred, faded-out button shadow */
}
body.cil-new .entry-content [class*="cil-ico-"] .wp-block-button__link:hover::before { opacity: 1; }
/* a quick link's icon sits in a small rounded tile, like the icons on the cards */
body.cil-new .entry-content .cil-btn--link[class*="cil-ico-"] .wp-block-button__link { position: relative; }
body.cil-new .entry-content .cil-btn--link[class*="cil-ico-"] .wp-block-button__link::before {
	width: 28px; height: 28px; margin-right: 10px; border-radius: 8px;
	background: color-mix(in srgb, currentColor 12%, transparent); -webkit-mask: none; mask: none;
}
body.cil-new .entry-content .cil-btn--link[class*="cil-ico-"] .wp-block-button__link::after {
	content: ""; position: absolute; left: 6px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: currentColor;
	-webkit-mask: var(--cil-ico) center / contain no-repeat; mask: var(--cil-ico) center / contain no-repeat;
}
/* an icon above a side note's heading */
body.cil-new .cil-aside__note .cil-card-icon { width: 40px; height: 40px; border-radius: 12px; background: #fff; margin-bottom: 8px; }
body.cil-new .cil-aside__note .cil-card-icon .cil-icon { width: 22px; height: 22px; }

/* "link": a small text link, for the short list of quick links in a side column */
body.cil-new .entry-content .cil-btn--link .wp-block-button__link {
	min-height: 28px; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
	color: var(--cil-link, var(--cn-teal-deep)); font-size: 15px; font-weight: 600; justify-content: flex-start; text-align: left;
	text-decoration: underline; text-underline-offset: 3px;
}
body.cil-new .entry-content .cil-btn--link .wp-block-button__link:hover { text-decoration-thickness: 2px; box-shadow: none; transform: none; }
body.cil-new .cil-aside .wp-block-button.cil-btn--link, body.cil-new .cil-aside .cil-btn--link .wp-block-button__link { width: auto; }
body.cil-new .cil-aside .wp-block-buttons:has(.cil-btn--link) { gap: 8px; align-items: flex-start; }   /* links start at the left edge, as on the live pages */

/* feature: words with a picture beside them (the picture's side follows the page data) */
body.cil-new .cil-feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin: 0 auto; }
body.cil-new .cil-feature:has(> .cil-feature__media:first-child) { grid-template-columns: .9fr 1.1fr; }
body.cil-new .cil-feature > .wp-block-column { flex-basis: auto !important; min-width: 0; }
body.cil-new .cil-section--feature h2 { margin-bottom: 10px; }
body.cil-new .cil-section--feature p { font-size: 18px; }
/* the picture keeps its own shape: nothing is cropped off (Dennis, 2026-10-05: a square photo lost the person's head) */
body.cil-new .cil-feature__media img { width: 100%; height: auto; object-fit: cover; border-radius: var(--cn-radius); box-shadow: var(--cn-shadow); }
body.cil-new .cil-panel { margin-top: 30px; }
body.cil-new .cil-panel :is(h2, h3) { font-size: 22px; margin-bottom: 4px; }

/* banner: the large feature at the top of the home page */
body.cil-new .cil-section--banner { padding: clamp(34px, 4.4vw, 64px) 0; }
body.cil-new .cil-section--banner .cil-feature { grid-template-columns: minmax(0, 540px) 350px; justify-content: center; gap: clamp(28px, 4vw, 56px); }
body.cil-new .cil-section--banner :is(h1, h2) { font-size: clamp(38px, 5.2vw, 64px); font-weight: 800; line-height: 1.05; margin: 0; }
body.cil-new .cil-section--banner p:not(.cil-eyebrow) { font-size: 19px; margin: 18px 0 0; max-width: 46ch; }
body.cil-new .cil-section--banner .wp-block-buttons { margin-top: 28px; gap: 12px; }
/* smaller words under a feature's buttons: detail that would crowd the opening lines */
body.cil-new .cil-feature__text p.cil-after { font-size: 15px; line-height: 1.55; opacity: .85; margin: 8px 0 0; }
body.cil-new .cil-feature__text .wp-block-buttons + p.cil-after { margin-top: 22px; }
/* a tall poster: a little is trimmed off the top, the bottom is kept */
body.cil-new .cil-section--banner .cil-feature__media img { aspect-ratio: 4 / 5; object-position: center bottom; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }

/* sign-up form (Mailchimp's own fields, inside a feature) */
body.cil-new .cil-feature:has(.cil-signup-form) { grid-template-columns: 1fr 1.1fr; }
body.cil-new .cil-feature:has(.cil-signup-form) .cil-feature__media img { aspect-ratio: 16 / 10; }
body.cil-new .cil-signup-form form { background: #fff; color: var(--cn-ink); border-radius: var(--cn-radius); padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.cil-new .cil-signup-form .indicates-required { grid-column: 1 / -1; font-size: 14px; color: var(--cn-muted); }
body.cil-new .cil-signup-form .mc-field-group:first-of-type, body.cil-new .cil-signup-form .clear, body.cil-new .cil-signup-form .cil-test-note { grid-column: 1 / -1; }
body.cil-new .cil-signup-form label { display: block; font-family: var(--cn-head); font-weight: 600; font-size: 15px; margin-bottom: 6px; color: var(--cn-ink); }
body.cil-new .cil-signup-form input[type="email"], body.cil-new .cil-signup-form input[type="text"] {
	width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid #9aa5b1; border-radius: 10px; font: inherit; color: var(--cn-ink); background: #fff;
}
body.cil-new .cil-signup-form input:focus-visible { outline: 3px solid var(--cn-teal-deep); outline-offset: 1px; border-color: var(--cn-teal-deep); }
body.cil-new .cil-signup-form .helper_text { display: block; font-size: 14px; color: var(--cn-muted); margin-top: 4px; }
body.cil-new .cil-signup-form input[type="submit"] {
	min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px; background: var(--cn-maroon); color: #fff;
	font-family: var(--cn-head); font-weight: 700; font-size: 15px; cursor: pointer;
}
body.cil-new .cil-signup-form .cil-test-note { font-size: 14px; color: var(--cn-muted) !important; }

/* latest news: the newest posts as cards */
body.cil-new .cil-section--latest-news .wp-block-latest-posts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; }
body.cil-new .cil-section--latest-news li {
	width: auto !important; margin: 0 !important; background: #fff; border: 1px solid var(--cn-line); border-radius: var(--cn-radius); overflow: hidden;
	display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease;
}
body.cil-new .cil-section--latest-news li:hover { transform: translateY(-3px); box-shadow: var(--cn-shadow); }
body.cil-new .cil-section--latest-news .wp-block-latest-posts__featured-image { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--cn-bg); border-bottom: 1px solid var(--cn-line); }
body.cil-new .cil-section--latest-news .wp-block-latest-posts__featured-image a { display: block; height: 100%; }
/* the whole picture, never cropped: news pictures are often flyers with words to their edges */
body.cil-new .cil-section--latest-news .wp-block-latest-posts__featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
body.cil-new .cil-section--latest-news .wp-block-latest-posts__post-title {
	display: block; padding: 20px 24px 0; font-family: var(--cn-head); font-weight: 700; font-size: 19px; line-height: 1.3;
	color: var(--cn-ink); text-decoration: none;
}
body.cil-new .cil-section--latest-news .wp-block-latest-posts__post-title:hover { color: var(--cn-teal-deep); text-decoration: underline; }
body.cil-new .cil-section--latest-news .wp-block-latest-posts__post-excerpt { padding: 8px 24px 24px; margin: 0; color: var(--cn-muted); font-size: 16px; }

/* cards: with icons (programs) or with photos (get involved); cil-cols-N = cards or people per row */
body.cil-new .cil-cols-1 { --cil-cols: 1; } body.cil-new .cil-cols-2 { --cil-cols: 2; } body.cil-new .cil-cols-3 { --cil-cols: 3; }
body.cil-new .cil-cols-4 { --cil-cols: 4; } body.cil-new .cil-cols-5 { --cil-cols: 5; } body.cil-new .cil-cols-6 { --cil-cols: 6; }
body.cil-new .cil-section--cards > h2 { text-align: center; }
body.cil-new .cil-section--cards > .cil-lead { text-align: center; }
body.cil-new .cil-cards { display: grid; grid-template-columns: repeat(var(--cil-cols, 3), minmax(0, 1fr)); gap: 20px; }
body.cil-new .cil-card {
	position: relative; background: #fff; border: 1px solid var(--cn-line); border-radius: var(--cn-radius); overflow: hidden;
	padding: 22px 24px 24px; text-align: left; display: flex; flex-direction: column; gap: 8px;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.cil-new .cil-card:hover { transform: translateY(-3px); box-shadow: var(--cn-shadow); border-color: transparent; }
body.cil-new .cil-card > * { max-width: none !important; margin: 0 !important; }
body.cil-new .cil-card p { font-size: 16px; color: var(--cn-muted); }
body.cil-new .cil-card-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--cn-teal-tint); display: grid; place-items: center; margin-bottom: 6px !important; }
body.cil-new .cil-card-icon .cil-icon { display: block; width: 28px; height: 28px; background: var(--cn-teal-deep); }
body.cil-new .cil-card-title { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--cn-ink); }
body.cil-new .cil-card-title a { color: var(--cn-ink); text-decoration: none; }
body.cil-new .cil-card-title a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
body.cil-new .cil-card:hover .cil-card-title a { color: var(--cn-teal-deep); }
/* a card or side note with an icon: the title sits to the right of the icon, centred on it; the
   words run underneath across the full width (Dennis, 2026-10-05) */
body.cil-new .cil-card:has(> .cil-card-icon), body.cil-new .cil-aside__note:has(> .cil-card-icon) {
	display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: center; align-content: start;
}
body.cil-new .cil-card:has(> .cil-card-icon) > *, body.cil-new .cil-aside__note:has(> .cil-card-icon) > * { grid-column: 1 / -1; }
body.cil-new :is(.cil-card, .cil-aside__note) > .cil-card-icon { grid-column: 1; margin: 0 !important; }
body.cil-new :is(.cil-card, .cil-aside__note) > .cil-card-icon + :is(h2, h3, .cil-card-title) { grid-column: 2; margin: 0 !important; }

/* photo cards: the photo fills the top of the card, and the card's button makes the whole card a link */
body.cil-new .cil-cards--photos .cil-card { padding: 0 0 22px; }
body.cil-new .cil-cards--photos .cil-card figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
body.cil-new .cil-cards--photos .cil-card .cil-fit-contain img { object-fit: contain; padding: 18px; }   /* a logo, shown whole */
body.cil-new .cil-cards--photos .cil-card :is(p, .cil-card-title) { padding: 12px 22px 0; }
body.cil-new .cil-cards--photos .cil-card .wp-block-buttons { order: 1; margin: 14px 22px 0 !important; }
body.cil-new .cil-cards--photos .cil-card .wp-block-button__link { min-height: 44px; padding: 9px 20px; }
body.cil-new .cil-cards--photos .cil-card .wp-block-button__link::after { content: ""; position: absolute; inset: 0; }
/* closing words under the cards, with a picture beside them */
body.cil-new .cil-closing {
	display: grid; grid-template-columns: 340px 1fr; gap: 0; margin-top: 28px !important; background: #fff; border: 1px solid var(--cn-line);
	border-radius: var(--cn-radius); overflow: hidden; align-items: stretch;
}
body.cil-new .cil-closing:not(:has(.cil-closing__media)) { grid-template-columns: 1fr; }
body.cil-new .cil-closing > .wp-block-column { flex-basis: auto !important; min-width: 0; }
body.cil-new .cil-closing__media figure, body.cil-new .cil-closing__media img { height: 100%; }
body.cil-new .cil-closing__media img { width: 100%; min-height: 220px; object-fit: cover; }
body.cil-new .cil-closing__text { padding: clamp(24px, 3.5vw, 44px); align-self: center; }
body.cil-new .cil-closing__text p { font-family: var(--cn-head); font-weight: 600; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.45; color: var(--cn-ink); }

/* logos: a still grid */
body.cil-new .cil-section--logos { padding-bottom: 54px; }
body.cil-new .cil-section--logos > h2 { font-size: clamp(20px, 2vw, 24px); text-align: center; color: var(--cil-text); font-weight: 600; margin-bottom: 28px; }
body.cil-new .cil-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
body.cil-new .cil-logos figure { display: grid; place-items: center; height: 96px; padding: 14px; margin: 0 !important; background: #fff; border: 1px solid var(--cn-line); border-radius: 12px; }
body.cil-new .cil-logos figure:has(a):hover { border-color: var(--cn-teal); box-shadow: var(--cn-shadow); }
body.cil-new .cil-logos img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; }

/* ============================================================ inner pages */
/* page banner: a slim dark panel with the page's name, as wide as the content (not edge to edge) */
body.cil-new .cil-page-banner {
	width: min(1160px, 100% - 48px); max-width: none !important; margin: 24px auto 0 !important; border-radius: var(--cn-radius);
	background: var(--cn-night); padding: 22px 28px;
}
body.cil-new .cil-page-banner h1 { color: #fff; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.15; max-width: none; }
body.cil-new .cil-page-body {
	width: min(1160px, 100% - 48px); max-width: none !important; margin-inline: auto !important;
	padding: 22px 0 clamp(40px, 5.2vw, 70px); color: var(--cn-ink);
}
body.cil-new .cil-page-body > * { max-width: none !important; }
body.cil-new .cil-page-body > h2 { font-size: clamp(26px, 2.8vw, 34px); margin: clamp(24px, 3vw, 36px) 0 18px; }
/* Cards beside a side column (the Programs page): the introduction, the cards under their group
   headings and the closing note are the main column; small cards, two to a row. */
body.cil-new .cil-with-aside--cards { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
body.cil-new .cil-with-aside--cards > .cil-main > * { margin-block: 0; }
body.cil-new .cil-with-aside--cards > .cil-main > .cil-lead { text-align: left; max-width: none; margin-inline: 0; }
body.cil-new .cil-with-aside--cards .cil-cards__group { font-size: clamp(21px, 2.1vw, 25px); text-align: left; margin: 34px 0 14px; }
body.cil-new .cil-with-aside--cards .cil-cards { gap: 14px; }
body.cil-new .cil-with-aside--cards .cil-card { padding: 16px 18px; }
body.cil-new .cil-with-aside--cards .cil-card-title { font-size: 17.5px; line-height: 1.3; }
body.cil-new .cil-with-aside--cards .cil-card-title a { color: var(--cn-teal-deep); text-decoration: underline; text-underline-offset: 3px; }
body.cil-new .cil-with-aside--cards .cil-card-title a:hover { text-decoration-thickness: 2px; }
body.cil-new .cil-with-aside--cards .cil-card-icon { width: 44px; height: 44px; border-radius: 12px; }
body.cil-new .cil-with-aside--cards .cil-card-icon .cil-icon { width: 24px; height: 24px; }
body.cil-new .cil-with-aside--cards > .cil-main > .cil-closing { display: block; margin-top: 30px; background: var(--cn-bg); border-left: 4px solid var(--cn-teal); border-radius: 8px; padding: 14px 18px; }
body.cil-new .cil-with-aside--cards > .cil-main > .cil-closing .cil-closing__text { padding: 0; }
body.cil-new .cil-with-aside--cards > .cil-main > .cil-closing p { font-family: var(--cn-body); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--cn-muted); margin: 0; }
body.cil-new .cil-with-aside--cards > .cil-main > .cil-closing a { color: var(--cn-teal-deep); }
/* A form among a text section's words: set off from the words above it by a rule. */
body.cil-new .cil-prose__form { margin-top: 36px; padding-top: 28px; border-top: 3px solid var(--cn-teal); }
body.cil-new .cil-prose__form > * { margin-block: 0; }
body.cil-new .cil-prose__form > :is(h2, h3) { font-size: clamp(24px, 2.5vw, 30px); margin-bottom: 12px; }
body.cil-new .cil-prose__form .cil-form { margin-top: 14px; }
/* A quote at the top of a side column: a dark feature panel, who said it (small portrait beside
   the name) above the words. */
body.cil-new .cil-aside__quote { background: var(--cn-night); border-radius: var(--cn-radius); padding: 24px 24px 22px; --cil-eyebrow: var(--cn-yellow); }
body.cil-new .cil-aside__quote > * { margin-block: 0; }
body.cil-new .cil-aside > .cil-aside__quote + * { margin-top: 18px !important; }
body.cil-new .cil-aside__quote > :is(h2, h3) { color: #fff; font-size: 21px; margin: 6px 0 0; }
body.cil-new .cil-aside__quote .cil-quote__who { display: flex; align-items: center; gap: 14px; margin: 14px 0 16px; }
body.cil-new .cil-aside__quote .cil-quote__who > * { margin: 0; }
body.cil-new .cil-aside__quote .cil-quote__portrait img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: none; }
body.cil-new .cil-aside__quote .cil-quote__by { color: #fff; font-family: var(--cn-head); font-weight: 600; font-size: 15px; line-height: 1.4; }
body.cil-new .cil-aside__quote blockquote { margin: 0; border: 0; border-left: 4px solid var(--cn-teal); padding: 0 0 0 16px; }
body.cil-new .cil-aside__quote blockquote p { color: #e8ebf3; font-family: var(--cn-body); font-size: 16px; font-style: normal; line-height: 1.6; }
/* A titled panel of notes in a side column: one dark box, its notes divided by thin lines. */
/* a sponsor beside the words or cards: a labelled box, so the logo reads as a sponsor */
body.cil-new .cil-sponsor { background: #fff; border: 1px solid var(--cn-line); border-radius: var(--cn-radius); padding: 14px 20px 18px; text-align: center; }
body.cil-new .cil-sponsor__label { font-family: var(--cn-head); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cn-muted); margin: 0 0 10px; }
body.cil-new .cil-sponsor figure { margin: 0; }
body.cil-new .cil-sponsor img { max-height: 72px; width: auto; max-width: 100%; margin-inline: auto; }
body.cil-new .cil-aside__panel { background: var(--cn-night); border-radius: var(--cn-radius); padding: 22px 22px 8px; }
body.cil-new .cil-aside__panel > * { margin-block: 0; }
body.cil-new .cil-aside__panel > :is(h2, h3) { color: #fff; font-size: clamp(21px, 2.1vw, 25px); margin-bottom: 6px; }
body.cil-new .cil-aside__panel > :is(h2, h3)::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--cn-teal); margin-top: 10px; }
body.cil-new .cil-aside__panel .cil-aside__note { background: none; border-radius: 0; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .2); }
body.cil-new .cil-aside__panel > :is(h2, h3) + .cil-aside__note { border-top: 0; }
body.cil-new .cil-aside__panel .cil-aside__note :is(h3, h4) { color: #fff; font-size: 17px; }
body.cil-new .cil-aside__panel .cil-aside__note p { color: #d5dbe6; font-size: 15.5px; }
body.cil-new .cil-aside__panel .cil-aside__note a { color: #fff; }
/* the news page's own words, between its banner and its posts */
body.cil-new .cil-news-intro { padding-bottom: 0; }
body.cil-new .cil-news-intro > h2:first-child { margin-top: 0; }
/* The first section under a page banner sits as close to it as the Team page's body does
   (22 px; approved by Dennis on the tax preparation page, 2026-10-05). */
body.cil-new .cil-page-banner + .cil-section { padding-top: 22px; }

/* the introduction under the banner; a style other than plain puts it in a box */
body.cil-new .cil-intro { background: var(--cil-bg); }
body.cil-new .cil-intro:not(.cil-style-plain) { padding: 20px 24px; border-radius: var(--cn-radius); }
body.cil-new .cil-intro p { max-width: 75ch; font-size: 18px; }
body.cil-new .cil-intro p.cil-highlight { color: var(--cil-eyebrow); font-family: var(--cn-head); font-weight: 700; }

/* people: one card each */
body.cil-new .cil-people {
	--cil-gap: 24px; display: grid; gap: var(--cil-gap);   /* never more than cil-cols-N per row, fewer on narrow screens */
	grid-template-columns: repeat(auto-fill, minmax(max(9rem, calc((100% - (var(--cil-cols, 5) - 1) * var(--cil-gap)) / var(--cil-cols, 5))), 1fr));
}
body.cil-new .cil-team-card {
	background: #fff; border: 1px solid var(--cn-line); border-radius: var(--cn-radius); overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.cil-new .cil-team-card:hover { transform: translateY(-3px); box-shadow: var(--cn-shadow); border-color: transparent; }
body.cil-new .cil-team-card > * { max-width: none !important; }
body.cil-new .cil-team-card figure { margin: 0; }
body.cil-new .cil-team-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
body.cil-new .cil-team-card p { padding: 0 16px; font-size: 15px; line-height: 1.4; }
body.cil-new .cil-team-card__name { margin-top: 14px; font-family: var(--cn-head); font-size: 16px; color: var(--cn-ink); }
body.cil-new .cil-team-card__title { margin-top: 4px; color: var(--cn-muted); }
body.cil-new .cil-team-card p:last-child { padding-bottom: 16px; }
body.cil-new .cil-team-card a { color: inherit; }

/* call-to-action cards at the foot of a page (Volunteer, Internship) */
body.cil-new .cil-cta-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: clamp(32px, 4vw, 52px) 0 0; }
body.cil-new .cil-cta-cards > .wp-block-column { flex-basis: auto !important; min-width: 0; }
body.cil-new .cil-cta-card { background: var(--cn-teal-tint); border-radius: var(--cn-radius); padding: clamp(22px, 3vw, 32px); }
body.cil-new .cil-cta-card > * + * { margin-top: 12px; }
body.cil-new .cil-cta-card h2 { font-size: clamp(22px, 2.2vw, 26px); }
body.cil-new .cil-cta-card ul { margin-bottom: 0; }
body.cil-new .cil-cta-card li { margin: 4px 0; }

/* text: paragraphs, sub-headings and lists, with an optional column beside them */
body.cil-new .cil-page-banner__tagline { color: #c9d0dd; font-size: 17px; margin-top: 6px; }
body.cil-new .cil-prose { max-width: 75ch; }
body.cil-new .cil-with-aside > .cil-prose { max-width: none; }
body.cil-new .cil-prose > * { margin-block: 0; }
body.cil-new .cil-prose > * + * { margin-top: 14px; }
body.cil-new .cil-prose > :is(h2, h3) { font-size: 22px; margin-top: 30px; }
body.cil-new .cil-prose > :is(h2, h3):first-child { margin-top: 0; }
body.cil-new .cil-prose :is(ul, ol) { padding-left: 1.3em; color: var(--cil-text); }
body.cil-new .cil-prose li { margin: 6px 0; }
body.cil-new .cil-prose a, body.cil-new .cil-aside__note a, body.cil-new .cil-section td a { color: var(--cil-link, var(--cn-teal-deep)); text-decoration: underline; text-underline-offset: 2px; }
body.cil-new :is(.cil-style-accent, .cil-style-dark) { --cil-link: #fff; }
body.cil-new .cil-prose strong { color: var(--cil-head); }
body.cil-new .cil-section p.cil-highlight { color: var(--cil-eyebrow); font-family: var(--cn-head); font-weight: 700; }
body.cil-new .cil-with-aside { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-bottom: 0; }
body.cil-new .cil-with-aside > .wp-block-column { flex-basis: auto !important; min-width: 0; }
body.cil-new .cil-aside > * { margin-block: 0; }
body.cil-new .cil-aside > * + * { margin-top: 16px; }
body.cil-new .cil-aside img { width: 100%; border-radius: var(--cn-radius); box-shadow: var(--cn-shadow); }
body.cil-new .cil-aside .wp-block-buttons { flex-direction: column; margin-top: 16px; }
body.cil-new .cil-aside .wp-block-button, body.cil-new .cil-aside .wp-block-button__link { width: 100%; text-align: center; }
body.cil-new .cil-aside__note { background: var(--cn-teal-tint); border-radius: var(--cn-radius); padding: 18px 20px; }
body.cil-new .cil-aside__note > * { margin-block: 0; }
body.cil-new .cil-aside__note :is(h2, h3) { font-size: 17px; color: var(--cn-ink); margin-bottom: 4px; }
body.cil-new .cil-aside__note p { font-size: 16px; color: var(--cn-muted); }

/* a row of photos: equal tiles, as many per row as fit; cil-gallery--small/medium/large sets the tile size */
body.cil-new .cil-gallery { --cil-photo: 220px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(var(--cil-photo), 100%), 1fr)); }
body.cil-new .cil-gallery--small { --cil-photo: 150px; }
body.cil-new .cil-gallery--large { --cil-photo: 340px; }
body.cil-new .cil-gallery figure { margin: 0; }
body.cil-new .cil-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
body.cil-new .cil-gallery figcaption { color: var(--cil-text); font-size: 14px; margin-top: 6px; text-align: left; }
body.cil-new .cil-section--gallery > .cil-lead { margin-bottom: 20px; }

/* a quote: what someone said, who said it, and an optional small portrait */
body.cil-new .cil-quote { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
body.cil-new .cil-quote:not(:has(.cil-quote__portrait)) { grid-template-columns: minmax(0, 1fr); }
body.cil-new .cil-quote > * { margin-block: 0; }
body.cil-new .cil-quote__portrait img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
body.cil-new .cil-quote blockquote { margin: 0; padding: 0 0 0 20px; border: 0; border-left: 4px solid var(--cn-maroon); max-width: 80ch; }
body.cil-new .cil-quote blockquote, body.cil-new .cil-quote blockquote p { font-family: var(--cn-body); font-size: 18px; font-style: normal; line-height: 1.6; color: var(--cil-text); }
body.cil-new .cil-quote cite { display: block; margin-top: 12px; font-family: var(--cn-head); font-weight: 700; font-style: normal; font-size: 15px; color: var(--cil-head); }

/* the side column may also hold a small grid of photos, a video and the page's form */
body.cil-new .cil-aside .cil-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.cil-new .cil-aside .cil-gallery img { border-radius: 10px; box-shadow: none; }
/* a single small picture in the side column (a logo, say) is shown whole, not trimmed to a tile */
body.cil-new .cil-aside .cil-gallery figure:only-child img { aspect-ratio: auto; object-fit: contain; border-radius: 0; }
body.cil-new .cil-aside .wp-block-embed { margin: 0; }
body.cil-new .cil-aside .wp-block-embed iframe { border-radius: 10px; }
body.cil-new .cil-embed__title { font-family: var(--cn-head); font-weight: 600; font-size: 14px; color: var(--cil-head); }
body.cil-new .cil-aside .cil-embed__title + .wp-block-embed { margin-top: 6px; }
body.cil-new .cil-aside .cil-form { margin-top: 10px; }
body.cil-new .cil-aside .cil-form .wpforms-container { padding: 18px; }
body.cil-new .cil-aside .cil-form--embed iframe { min-height: 0; height: 640px; }

@media (max-width: 560px) {
	body.cil-new .cil-quote { grid-template-columns: minmax(0, 1fr); gap: 14px; }   /* portrait above the words on a phone */
}
/* long words in a form's labels wrap whole, never split with a hyphen */
body.cil-new .cil-form .wpforms-container :is(label, legend) { hyphens: manual; overflow-wrap: break-word; }

/* table: scrolls sideways inside its own box on a narrow screen, never the whole page */
body.cil-new .cil-section--table .wp-block-table { overflow-x: auto; margin: 0 auto; }
body.cil-new .cil-section--table table { width: 100%; border-collapse: collapse; background: #fff; color: var(--cn-ink); font-size: 16px; }
body.cil-new .cil-section--table :is(th, td) { border: 1px solid var(--cn-line); padding: 10px 14px; text-align: left; vertical-align: top; }
body.cil-new .cil-section--table thead th { background: var(--cn-night); color: #fff; font-family: var(--cn-head); font-weight: 700; font-size: 14px; }
body.cil-new .cil-section--table tbody th { font-family: var(--cn-head); font-weight: 600; background: var(--cn-bg); }
body.cil-new .cil-section--table figcaption { color: var(--cil-text); font-size: 15px; margin-top: 10px; text-align: left; }

/* video */
body.cil-new .cil-section--embed .wp-block-embed { max-width: 860px; margin: 0 auto; }
body.cil-new .cil-section--embed iframe { border-radius: var(--cn-radius); }
body.cil-new .cil-section--embed figcaption { color: var(--cil-text); font-size: 15px; margin-top: 10px; }

/* forms shown by name ([cil_form]): a WPForms form, an embedded form, or a button to a form elsewhere */
body.cil-new .cil-form { margin-top: 22px; scroll-margin-top: 100px; }
body.cil-new .cil-form iframe { display: block; width: 100%; min-height: 80vh; border: 1px solid var(--cn-line); border-radius: var(--cn-radius); background: #fff; }
body.cil-new .cil-form--link .wp-block-buttons { margin-top: 0; }
body.cil-new .cil-section--form > * { max-width: 760px !important; }
/* WPForms: the site's fonts, colours and button, through WPForms' own style settings */
body.cil-new .cil-form .wpforms-container {
	--wpforms-label-color: var(--cn-ink); --wpforms-label-sublabel-color: var(--cn-muted); --wpforms-label-error-color: #b3261e;
	--wpforms-field-border-radius: 10px; --wpforms-field-border-color: #9aa5b1; --wpforms-field-border-size: 1.5px;
	--wpforms-field-background-color: #fff; --wpforms-field-text-color: var(--cn-ink); --wpforms-field-size-input-height: 48px;
	--wpforms-button-background-color: var(--cn-teal-deep); --wpforms-button-text-color: #fff; --wpforms-button-border-radius: 999px;
	--wpforms-button-size-height: 48px; --wpforms-button-size-padding-h: 24px;
	background: #fff; color: var(--cn-ink); border-radius: var(--cn-radius); border: 1px solid var(--cn-line);
	padding: clamp(20px, 3vw, 32px); margin: 0; font-family: var(--cn-body);
}
body.cil-new .cil-form .wpforms-container .wpforms-field-label, body.cil-new .cil-form .wpforms-container legend.wpforms-field-label { font-family: var(--cn-head); font-weight: 600; font-size: 15px; }
body.cil-new .cil-form .wpforms-container .wpforms-field-description { color: var(--cn-muted); font-size: 14px; }
body.cil-new .cil-form .wpforms-container button[type="submit"] { font-family: var(--cn-head); font-weight: 700; font-size: 15px; }
body.cil-new .cil-form .wpforms-container :is(input, textarea, select):focus-visible { outline: 3px solid var(--cn-teal-deep); outline-offset: 1px; }

/* a form kept elsewhere, opened over the page (kind "dialog"): the form is the only part that scrolls */
html:has(.cn-formdlg[open]) { overflow: hidden; }
body.cil-new .cn-formdlg {
	width: min(900px, 100vw - 32px); height: min(940px, 100dvh - 32px); max-width: none; max-height: none; padding: 0;
	border: 0; border-radius: var(--cn-radius); box-shadow: var(--cn-shadow); background: #fff; color: var(--cn-ink); overflow: hidden;
}
body.cil-new .cn-formdlg[open] { display: flex; flex-direction: column; }
body.cil-new .cn-formdlg::backdrop { background: rgba(11, 16, 32, .65); }
body.cil-new .cn-formdlg__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 24px; border-bottom: 1px solid var(--cn-line); }
body.cil-new .cn-formdlg h2 { font-size: 20px; line-height: 1.25; }
body.cil-new .cn-formdlg__close, body.cil-new .cn-formdlg__leave {
	min-height: 44px; padding: 8px 20px; border-radius: 999px; border: 2px solid var(--cn-teal-deep); background: #fff;
	color: var(--cn-teal-deep); font-family: var(--cn-head); font-weight: 700; font-size: 15px; cursor: pointer;
}
body.cil-new .cn-formdlg__close:hover, body.cil-new .cn-formdlg__leave:hover { background: var(--cn-teal-tint); box-shadow: none; transform: none; }
body.cil-new .cn-formdlg__ask { padding: 14px 24px; background: var(--cn-teal-tint); border-bottom: 1px solid var(--cn-line); }
body.cil-new .cn-formdlg__ask p { font-weight: 700; }
body.cil-new .cn-formdlg__ask div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
body.cil-new .cn-formdlg__ask .cn-btn { min-height: 44px; padding: 8px 20px; }
body.cil-new .cn-formdlg__loading { padding: 24px; color: var(--cn-muted); }
body.cil-new .cn-formdlg iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
body.cil-new .cn-formdlg__foot { padding: 10px 24px; border-top: 1px solid var(--cn-line); font-size: 14px; color: var(--cn-muted); }
/* a website form that opens over the page (kind "wpforms-dialog"): out of sight at the foot of the
   page until its link is followed; inside the dialog it is the part that scrolls */
body.cil-new .cn-formsrc { display: none; }
body.cil-new .cn-formsrc:target { display: block; width: min(820px, 100% - 36px); margin: 32px auto; }
body.cil-new .cn-formdlg .cn-formsrc { display: block; flex: 1; min-height: 0; overflow: auto; width: auto; margin: 0; }
body.cil-new .cn-formdlg .cn-formsrc .wpforms-container { box-shadow: none; border-radius: 0; }
body.cil-new .cn-formdlg .cn-formsrc__title { display: none; }   /* the dialog's bar already names the form */
body.cil-new .cn-formsrc__title { font-size: 24px; margin-bottom: 12px; }
@media (max-width: 640px) {
	body.cil-new .cn-formdlg { width: 100vw; height: 100dvh; border-radius: 0; }
	body.cil-new .cn-formdlg__bar { padding-left: 16px; }
	body.cil-new .cn-formdlg__ask, body.cil-new .cn-formdlg__foot { padding-inline: 16px; }
}

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 1000px) {
	body.cil-new .cil-cards--photos { --cil-cols: 2; }
	body.cil-new .cil-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	body.cil-new .cil-feature, body.cil-new .cil-feature:has(> .cil-feature__media:first-child),
	body.cil-new .cil-section--banner .cil-feature, body.cil-new .cil-feature:has(.cil-signup-form),
	body.cil-new .cil-closing { grid-template-columns: 1fr; }
	body.cil-new .cil-section--banner .cil-feature__media { order: -1; justify-self: center; width: min(100%, 340px); }
	body.cil-new .cil-cards--icons { --cil-cols: 1; }
	body.cil-new .cil-with-aside { grid-template-columns: 1fr; }
	body.cil-new .cil-section--latest-news .wp-block-latest-posts__list { grid-template-columns: 1fr; }
	body.cil-new .cil-closing__media img { max-height: 260px; }
}
@media (max-width: 560px) {
	body.cil-new { font-size: 16px; }
	body.cil-new .cn-wrap { width: calc(100% - 36px); }
	/* Phone: the logo and the Menu button share one row. */
	body.cil-new .cn-header__row { gap: 10px; }
	body.cil-new .cn-logo { column-gap: 8px; row-gap: 4px; }
	body.cil-new .cn-logo img { height: 34px; }
	body.cil-new .cn-logo__name { font-size: 16.5px; margin-bottom: -1.7px; }
	body.cil-new .cn-logo__tag { font-size: 12px; }
	body.cil-new .cn-menu-btn { padding: 8px 12px; gap: 8px; }
	/* the same side margins as the rest of the site */
	body.cil-new .cil-section > *, body.cil-new .cil-page-body { width: calc(100% - 36px); }
	body.cil-new .cil-page-banner { width: calc(100% - 36px); margin-top: 16px !important; padding: 16px 18px; }
	body.cil-new .cil-cards--photos { --cil-cols: 1; }
	body.cil-new .cil-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.cil-new .cil-signup-form form { grid-template-columns: 1fr; }
	body.cil-new .cil-people { --cil-gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* two people per row */
	body.cil-new .cil-team-card p { padding: 0 12px; }
	body.cil-new .cil-cta-cards { grid-template-columns: 1fr; }
	/* full-width buttons that stay inside their card */
	body.cil-new .cil-section .wp-block-button, body.cil-new .cil-section .wp-block-button__link,
	body.cil-new .cil-cta-card .wp-block-button, body.cil-new .cil-cta-card .wp-block-button__link { width: 100%; text-align: center; }
	body.cil-new .cil-cards--photos .cil-card .wp-block-buttons { width: auto; }
}
/* Buttons size themselves including their padding and border, so a full-width button on a phone
   stays inside its card (found on Dennis's iPhone, 2026-10-04: Donate and Connect ran off the right). */
body.cil-new .cn-btn, body.cil-new .wp-block-button__link, body.cil-new .wp-block-button, body.cil-new .wp-block-buttons { box-sizing: border-box; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
	body.cil-new * { transition: none !important; }
	body.cil-new .cn-btn:hover, body.cil-new .cil-card:hover, body.cil-new .cil-team-card:hover,
	body.cil-new .entry-content .wp-block-button__link:hover, body.cil-new .cil-section--latest-news li:hover { transform: none; }
}

/* ============================================================ search results in the new look */
body.cil-new.search .hero-section { display: block; margin: 0 0 24px; padding: 0; }
body.cil-new.search .ct-container { width: min(1160px, 100% - 48px); max-width: none; padding: 24px 0 clamp(40px, 5.2vw, 70px); }
body.cil-new.search .hero-section .entry-header { background: var(--cn-night); border-radius: var(--cn-radius); padding: 22px 28px; }
body.cil-new.search .page-title { color: #fff; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.15; }
body.cil-new.search .entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.cil-new.search .entry-card {
	background: #fff; border: 1px solid var(--cn-line); border-radius: var(--cn-radius); box-shadow: none; padding: 22px 24px;
	display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
body.cil-new.search .entry-card:hover { box-shadow: var(--cn-shadow); border-color: transparent; }
body.cil-new.search .entry-card .entry-title { font-size: 19px; }
/* "nothing matched": readable on the dark title bar, and shown on phones too (the theme hides it there) */
body.cil-new.search .hero-section .page-description { display: block !important; color: #fff; font-family: inherit; margin-top: 10px; }
/* the words the search found, in a result's title and summary */
body.cil-new.search .entry-card mark { background: #fff3a3; color: inherit; padding: 0 2px; border-radius: 3px; }
body.cil-new.search .entry-card .entry-title a { color: var(--cn-ink); text-decoration: none; }
body.cil-new.search .entry-card .entry-title a:hover { color: var(--cn-teal-deep); text-decoration: underline; }
body.cil-new.search .entry-card .ct-media-container { order: -1; margin: -22px -24px 6px; border-radius: 0; }
body.cil-new.search .entry-card .ct-media-container img { width: 100%; aspect-ratio: 16 / 10 !important; object-fit: cover; object-position: top center; }
body.cil-new.search .entry-card .entry-excerpt p { color: var(--cn-muted); font-size: 16px; font-family: var(--cn-body); line-height: 1.55; }
body.cil-new.search .entry-card .entry-meta { display: none; }
@media (max-width: 900px) { body.cil-new.search .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	body.cil-new.search .ct-container { width: calc(100% - 36px); }
	body.cil-new.search .entries { grid-template-columns: 1fr; }
}

/* ============================================================ news posts, news lists, page not found */
/* The theme draws these. Its title block becomes the site's page banner; who wrote the post, the
   comment form and the theme's own footer are never shown. */
body.cil-new :is(.meta-author, .author-box, .ct-comments-container, .ct-footer) { display: none !important; }
body.cil-new:is(.single-post, .blog, .category, .tag, .date, .error404) .hero-section {
	display: block; width: min(1160px, 100% - 48px); margin: 24px auto 0; padding: 0;
}
body.cil-new:is(.single-post, .blog, .category, .tag, .date, .error404) .hero-section .entry-header {
	background: var(--cn-night); border-radius: var(--cn-radius); padding: 22px 28px; text-align: left;
}
body.cil-new:is(.single-post, .blog, .category, .tag, .date, .error404) .page-title {
	color: #fff; font-family: var(--cn-head); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.15; margin: 0;
}
body.cil-new:is(.single-post, .blog, .category, .tag, .date, .error404) .hero-section :is(.entry-meta, .page-description) {
	color: #c9d0dd; font-family: var(--cn-body); font-size: 15px; margin: 8px 0 0; justify-content: flex-start;
}
body.cil-new:is(.single-post, .blog, .category, .tag, .date) .hero-section .entry-meta a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* one post: a readable column */
body.cil-new.single-post .entry-content {
	width: min(760px, 100% - 48px); max-width: none; margin: 0 auto; padding: 28px 0 clamp(40px, 5.2vw, 70px);
	color: var(--cn-ink); font-size: 18px; line-height: 1.65;
}
body.cil-new.single-post .entry-content > * { max-width: none; margin-block: 0 16px; }
body.cil-new.single-post .entry-content :is(h2, h3) { margin-top: 30px; }
body.cil-new.single-post .entry-content h2 { font-size: 26px; }
body.cil-new.single-post .entry-content a { text-decoration: underline; text-underline-offset: 2px; }
body.cil-new.single-post .entry-content img { border-radius: var(--cn-radius); }
body.cil-new.single-post .entry-content :is(ul, ol) { padding-left: 1.3em; }
/* a list of posts: the same cards as the search results */
body.cil-new:is(.blog, .category, .tag, .date) .ct-container { width: min(1160px, 100% - 48px); max-width: none; padding: 24px 0 clamp(40px, 5.2vw, 70px); }
body.cil-new:is(.blog, .category, .tag, .date) .entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.cil-new:is(.blog, .category, .tag, .date) .entry-card {
	background: #fff; border: 1px solid var(--cn-line); border-radius: var(--cn-radius); box-shadow: none; padding: 22px 24px;
	display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
body.cil-new:is(.blog, .category, .tag, .date) .entry-card:hover { box-shadow: var(--cn-shadow); border-color: transparent; }
body.cil-new:is(.blog, .category, .tag, .date) .entry-card .entry-title { font-size: 19px; }
body.cil-new:is(.blog, .category, .tag, .date) .entry-card .entry-title a { color: var(--cn-ink); text-decoration: none; }
body.cil-new:is(.blog, .category, .tag, .date) .entry-card .entry-title a:hover { color: var(--cn-teal-deep); text-decoration: underline; }
body.cil-new:is(.blog, .category, .tag, .date) .entry-card .ct-media-container { order: -1; margin: -22px -24px 6px; border-radius: 0; }
body.cil-new:is(.blog, .category, .tag, .date) .entry-card .ct-media-container img { width: 100%; aspect-ratio: 16 / 10 !important; object-fit: cover; object-position: top center; }
body.cil-new:is(.blog, .category, .tag, .date) .entry-card .entry-excerpt p { color: var(--cn-muted); font-size: 16px; line-height: 1.55; }
body.cil-new:is(.blog, .category, .tag, .date) .entry-card .entry-meta { color: var(--cn-muted); font-size: 13px; }
/* page not found */
body.cil-new.error404 .ct-container, body.cil-new.error404 .entry-content { width: min(760px, 100% - 48px); max-width: none; margin-inline: auto; padding: 28px 0 clamp(40px, 5.2vw, 70px); }
@media (max-width: 900px) { body.cil-new:is(.blog, .category, .tag, .date) .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	body.cil-new:is(.single-post, .blog, .category, .tag, .date, .error404) .hero-section,
	body.cil-new.single-post .entry-content, body.cil-new:is(.blog, .category, .tag, .date) .ct-container { width: calc(100% - 36px); }
	body.cil-new:is(.single-post, .blog, .category, .tag, .date, .error404) .hero-section .entry-header { padding: 16px 18px; }
	body.cil-new:is(.blog, .category, .tag, .date) .entries { grid-template-columns: 1fr; }
}

/* ============================================================ the Events calendar in the new look */
/* The calendar and event pages come from The Events Calendar; these rules give them the site's
   page banner, fonts, colours and buttons. Events themselves are kept in Outlook (or the
   calendar's own editor), not edited through Eva. */
body.cil-new.post-type-archive-tribe_events .hero-section { display: block; width: min(1160px, 100% - 48px); margin: 24px auto 0; padding: 0; }
body.cil-new.post-type-archive-tribe_events .hero-section .entry-header { background: var(--cn-night); border-radius: var(--cn-radius); padding: 22px 28px; }
body.cil-new.post-type-archive-tribe_events .page-title { color: #fff; font-family: var(--cn-head); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.15; margin: 0; }
body.cil-new .tribe-common, body.cil-new .tribe-events {
	--tec-font-family-sans-serif: "Merriweather Sans", system-ui, sans-serif;
	--tec-color-accent-primary: #0a6166; --tec-color-accent-primary-hover: #084d51; --tec-color-accent-primary-active: #084d51;
	--tec-color-text-primary: #17202b; --tec-color-text-events-title: #17202b; --tec-color-link-accent: #0a6166;
	--tec-color-button-primary: #0a6166; --tec-color-button-primary-hover: #084d51;
	--tec-color-background-events: #fff; --tec-color-border-default: #e3e8ec;
}
body.cil-new .tribe-events .tribe-events-l-container { width: min(1160px, 100% - 48px); max-width: none; padding: 20px 0 clamp(40px, 5.2vw, 70px) !important; min-height: 0; }
body.cil-new .tribe-common h1, body.cil-new .tribe-common h2, body.cil-new .tribe-common h3,
body.cil-new .tribe-events .tribe-events-c-top-bar__datepicker-button,
body.cil-new .tribe-events .tribe-events-calendar-month__day-date,
body.cil-new .tribe-events .tribe-events-calendar-month__header-column-title { font-family: var(--cn-head) !important; }
body.cil-new .tribe-common .tribe-common-c-btn, body.cil-new .tribe-common a.tribe-common-c-btn {
	border-radius: 999px; font-family: var(--cn-head); font-weight: 700; font-size: 15px; min-height: 44px; background-color: var(--cn-teal-deep);
}
body.cil-new .tribe-common .tribe-common-c-btn-border, body.cil-new .tribe-common a.tribe-common-c-btn-border,
body.cil-new .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	border-radius: 999px; border-color: var(--cn-teal-deep); color: var(--cn-teal-deep); font-family: var(--cn-head); font-weight: 700;
}
body.cil-new .tribe-events .tribe-events-header__events-bar, body.cil-new .tribe-events .tribe-events-c-events-bar { border-radius: var(--cn-radius); }
body.cil-new .tribe-events .tribe-events-c-events-bar__search-container { border-radius: var(--cn-radius); }
body.cil-new .tribe-events .tribe-events-calendar-month__calendar-event-title-link,
body.cil-new .tribe-events .tribe-events-calendar-list__event-title-link { font-family: var(--cn-head); font-weight: 600; }
body.cil-new .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link,
body.cil-new .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date { color: var(--cn-maroon); }
/* one event */
body.cil-new.single-tribe_events .ct-container-full, body.cil-new.single-tribe_events .tribe-events-pg-template { padding-top: 0; }
body.cil-new #tribe-events-pg-template, body.cil-new .tribe-events-pg-template { width: min(1160px, 100% - 48px); max-width: none; padding: 24px 0 clamp(40px, 5.2vw, 70px); margin-inline: auto; }
body.cil-new .tribe-events-single-event-title { font-family: var(--cn-head); font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--cn-ink); }
body.cil-new .tribe-events-back a, body.cil-new .tribe-events-single a { color: var(--cn-teal-deep); }
body.cil-new .tribe-events-schedule h2, body.cil-new .tribe-events-schedule .tribe-events-schedule__datetime { font-family: var(--cn-body); font-size: 18px; font-weight: 400; color: var(--cn-muted); }
body.cil-new .tribe-events-event-image { max-width: 460px; }
body.cil-new .tribe-events-event-image img { border-radius: var(--cn-radius); box-shadow: var(--cn-shadow); }
body.cil-new .tribe-events-single .tribe-events-content { font-family: var(--cn-body); font-size: 17px; line-height: 1.6; color: var(--cn-ink); max-width: 75ch; }
body.cil-new .tribe-events-single .tribe-events-content h2 { font-size: 24px; margin: 18px 0 8px; }
body.cil-new .tribe-events-single-section { border: 1px solid var(--cn-line); border-radius: var(--cn-radius); }
body.cil-new .tribe-events-single-section-title { font-family: var(--cn-head); }
@media (max-width: 560px) {
	body.cil-new.post-type-archive-tribe_events .hero-section, body.cil-new .tribe-events .tribe-events-l-container,
	body.cil-new #tribe-events-pg-template, body.cil-new .tribe-events-pg-template { width: calc(100% - 36px); }
	body.cil-new.post-type-archive-tribe_events .hero-section .entry-header { padding: 16px 18px; }
}
body.cil-new .tribe-events-single .tribe-events-content p { margin: 0 0 14px; }

/* ------------------------------------------------------------ what the live theme's settings add
   (seen on the live site 2026-10-10; the Local test site's theme settings differ) */
/* search results: the theme's own "Read More" bar under each result (pale words on magenta);
   the result's title is already its link */
body.cil-new.search .entry-card .entry-button { display: none; }
/* home, latest news: "Read more" inside the summary is a link, so it is underlined, not only coloured */
body.cil-new .wp-block-latest-posts__read-more { text-decoration: underline; text-underline-offset: 2px; }
/* Events calendar, month view: today's number in the site's dark teal (the theme's accent was too pale) */
body.cil-new .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum,
body.cil-new .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link { color: var(--cn-teal-deep); }

/* a news category, tag or month: the theme puts its title block inside the list's own column, so
   it takes that column's full width and sits a gap above the cards (it was narrower than the cards
   and touching them); and the theme's word "Category" before the name is dropped */
body.cil-new:is(.category, .tag, .date) .ct-container .hero-section { width: 100%; margin: 0 0 24px; }
body.cil-new:is(.category, .tag, .date) .hero-section .ct-title-label { display: none; }
