/* Cornwall Conservatives components. Colours, type families, spacing and radii come from tokens.css. */

.cc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Icons ---------- */
/* Lucide 1.48.0, pasted inline (see the Icons group). The stroke stays 2px at every size and takes the text colour. */
.cc-icon { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.125em; }
.cc-icon * { vector-effect: non-scaling-stroke; }
.cc-icon--16 { width: 16px; height: 16px; }
.cc-icon--20 { width: 20px; height: 20px; }
.cc-icon--24 { width: 24px; height: 24px; }

/* ---------- Page ---------- */
/* The page shell: the page colour, the spacing between sections, the content width and the skip link. Components carry no outer
   margins; a page wraps each section in .cc-page__section (with --bleed for full-width bands). */

body { background: var(--piran-white); }
.cc-page { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--space-32) * 2); padding: var(--space-32) 0 calc(var(--space-32) * 2); }
.cc-page:focus { outline: none; }
.cc-page__section { box-sizing: border-box; width: 100%; max-width: calc(1200px + var(--space-32) * 2); margin: 0 auto; padding: 0 var(--space-32); }
.cc-page__section--bleed { max-width: none; padding: 0; }
.cc-skip-link { position: absolute; top: var(--space-16); left: var(--space-16); z-index: 20; padding: var(--space-10) var(--space-16); border-radius: var(--radius-sm); background: var(--surface); color: var(--navy); font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 700; }
.cc-skip-link:not(:focus) { width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cc-skip-link:focus { outline: 3px solid var(--yellow); outline-offset: 2px; }
.cc-page-title { margin: 0 0 var(--space-16); color: var(--navy); font-family: var(--font-display); font-size: 64px; line-height: 1.05; font-weight: 400; letter-spacing: -1px; text-transform: uppercase; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .cc-page-title { font-size: 40px; }
  .cc-page { row-gap: var(--space-32); padding-top: var(--space-16); }
  .cc-page__section { padding: 0 var(--space-16); }
  .cc-page__section--bleed { padding: 0; }
}

/* ---------- NavBar ---------- */

.cc-navbar { position: relative; z-index: 10; font-family: var(--font-sans); color: var(--surface); }
.cc-navbar, .cc-navbar * { box-sizing: border-box; }
.cc-navbar a { color: inherit; text-decoration: none; }
.cc-navbar :focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }

/* Bar: logo + the three asks */
.cc-navbar__bar { display: flex; align-items: stretch; justify-content: space-between; height: 56px; padding-left: var(--space-32); background: var(--navy-deep); }
.cc-navbar__brand { display: flex; align-items: center; }
.cc-navbar__brand img { display: block; height: 36px; width: auto; }
.cc-navbar__actions { display: flex; }
.cc-navbar__action { display: flex; align-items: center; padding: 0 var(--space-32); font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--navy); }
.cc-navbar__action--volunteer { background: var(--navy-bright); }
.cc-navbar__action--donate { background: var(--red); }
.cc-navbar__action--donate:focus-visible { outline-color: var(--surface); }
.cc-navbar__action:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.cc-navbar__menu { display: none; }

/* Main row: equal-width items, each a title + one-line description */
.cc-navbar__main { position: relative; background: var(--navy); }
.cc-navbar__items { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.cc-navbar__link { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; height: 100%; padding: var(--space-16) var(--space-32) var(--space-16) var(--space-32); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cc-navbar__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); font-size: 16px; line-height: 20px; font-weight: 700; }
.cc-navbar__chevron { flex: none; transition: transform .25s; }
.cc-navbar__chevron:not(.cc-icon) { width: 16px; height: 10px; } /* legacy hand-drawn SVG */
.cc-navbar__desc { font-size: 15px; line-height: 19px; font-style: italic; }
.cc-navbar__link:hover .cc-navbar__title { text-decoration: underline; text-underline-offset: 4px; }
/* The open item becomes a tab joined to its panel */
.cc-navbar__link[aria-expanded="true"] { background: var(--surface-alt); color: var(--navy); }
.cc-navbar__link[aria-expanded="true"] .cc-navbar__chevron { transform: rotate(180deg); }
.cc-navbar__link[aria-expanded="true"]:focus-visible { outline-color: var(--navy); }

/* Dropdown panel */
.cc-navbar__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface-alt); color: var(--ink); border-bottom: 4px solid var(--sky); }
.cc-navbar__panel[hidden] { display: none; }
.cc-navbar__panel :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-navbar__panel-inner { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: var(--space-32); padding: var(--space-32); }
.cc-navbar__intro h2 { margin: 0 0 var(--space-10); color: var(--navy); font-size: 30px; line-height: 34px; font-weight: 800; }
.cc-navbar__intro p { margin: 0 0 var(--space-16); font-size: 18px; line-height: 25px; font-weight: 300; }
.cc-navbar__links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16) var(--space-32); align-content: start; margin: 0; padding: 0; list-style: none; }
.cc-navbar__sublink { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-5) var(--space-10); align-items: center; }
.cc-navbar__arrow { width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: var(--surface); display: grid; place-items: center; }
.cc-navbar__arrow .cc-icon { width: 14px; height: 14px; }
.cc-navbar__arrow svg:not(.cc-icon) { width: 12px; height: 12px; } /* legacy hand-drawn SVG */
.cc-navbar__sublabel { color: var(--navy); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cc-navbar__subdesc { grid-column: 2; font-size: 16px; line-height: 22px; font-weight: 300; }
.cc-navbar__sublink:hover .cc-navbar__sublabel { text-decoration: underline; text-underline-offset: 3px; }

/* Pill buttons used in the panel and the mobile menu */
.cc-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-10); padding: var(--space-10) var(--space-32); border: 2px solid transparent; border-radius: var(--radius-pill); font-size: 16px; line-height: 24px; font-weight: 700; font-family: inherit; text-decoration: none; cursor: pointer; }
.cc-pill--outline { border-color: currentColor; color: var(--navy); }
button.cc-pill--outline { background: transparent; }
.cc-navbar .cc-pill--outline { color: var(--navy); }
.cc-pill--light { background: var(--surface); color: var(--navy); }
.cc-navbar .cc-pill--light { color: var(--navy); }
.cc-pill--donate { background: var(--red); color: var(--surface); }
/* Local action: Cornish gold with navy text, for local events and campaigns */
.cc-pill--local { background: var(--gold); color: var(--navy); }
.cc-pill--local:hover { background: var(--gold-600); }
.cc-pill:hover { text-decoration: underline; text-underline-offset: 3px; }
.cc-pill svg:not(.cc-icon) { width: 16px; height: 16px; } /* legacy hand-drawn SVG */
/* A navy ring edged in white stays visible on light, navy and photo grounds */
.cc-pill:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 8px var(--surface); }
.cc-navbar__mobile-actions { display: none; }

/* Mobile: bar + menu button; the main row becomes a full-width accordion */
@media (max-width: 900px) {
  .cc-navbar__bar { padding-left: var(--space-16); }
  .cc-navbar__brand img { height: 30px; }
  .cc-navbar__actions { display: none; }
  .cc-navbar__menu { display: grid; place-items: center; width: 56px; height: 56px; border: 0; background: transparent; color: var(--surface); cursor: pointer; }
  .cc-navbar__menu svg:not(.cc-icon) { width: 24px; height: 24px; } /* legacy hand-drawn SVG */
  .cc-navbar__menu .cc-navbar__icon-close, .cc-navbar.is-open .cc-navbar__menu .cc-navbar__icon-open { display: none; }
  .cc-navbar.is-open .cc-navbar__menu .cc-navbar__icon-close { display: block; }
  .cc-navbar__main { display: none; }
  .cc-navbar.is-open .cc-navbar__main { display: block; }
  .cc-navbar__items { grid-auto-flow: row; }
  .cc-navbar__item { border-bottom: 1px solid var(--navy-bright); }
  .cc-navbar__link { height: auto; padding: var(--space-16); }
  .cc-navbar__panel { position: static; border-bottom: 0; }
  .cc-navbar__panel-inner { grid-template-columns: 1fr; gap: var(--space-16); padding: var(--space-16); }
  .cc-navbar__intro h2 { display: none; }
  .cc-navbar__links { grid-template-columns: 1fr; }
  .cc-navbar__mobile-actions { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-16); }
  .cc-navbar__mobile-actions .cc-pill--outline { color: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-navbar__chevron { transition: none; }
}

/* ---------- AskCards ---------- */

.cc-asks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); margin: 0; padding: 0; list-style: none; font-family: var(--font-sans); }
.cc-asks *, .cc-asks *::after { box-sizing: border-box; }
.cc-ask { position: relative; display: flex; flex-direction: column; gap: var(--space-16); min-height: 320px; padding: var(--space-32); border-radius: var(--radius-md); background: var(--navy); color: var(--surface); transition: transform .15s cubic-bezier(.4, 0, .2, 1); }
.cc-ask--volunteer { background: var(--navy-bright); }
.cc-ask--donate { background: var(--red); }
.cc-ask__label { margin: 0; font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.cc-ask__pitch { margin: 0; font-size: 30px; line-height: 36px; font-weight: 400; letter-spacing: -.02em; }
.cc-ask__body { margin: 0; font-size: 18px; line-height: 25px; font-weight: 400; }
.cc-ask__cta { align-self: flex-start; margin-top: auto; text-decoration: none; }
.cc-ask .cc-pill--light { color: var(--navy); }
/* The pill's link covers the whole card: one link per card, the whole card clickable */
.cc-ask__cta::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.cc-ask:hover .cc-ask__cta { text-decoration: underline; text-underline-offset: 3px; }
.cc-ask__cta:focus-visible { outline: 3px solid var(--surface); outline-offset: 4px; box-shadow: none; }
/* Hover and keyboard focus lift the card 4px; no shadow. */
@media (hover: hover) {
  .cc-ask:hover { transform: translateY(-4px); }
}
.cc-ask:has(.cc-ask__cta:focus-visible) { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .cc-ask { transition: none; transform: none !important; }
}

/* ---------- Hero ---------- */

.cc-hero { position: relative; display: flex; align-items: flex-end; min-height: 560px; padding: var(--space-32); overflow: hidden; background: var(--navy-deep); font-family: var(--font-sans); }
.cc-hero, .cc-hero * { box-sizing: border-box; }
.cc-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-hero__content { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); max-width: 900px; }
.cc-hero__tag { margin: 0; padding: var(--space-5) var(--space-10); background: var(--surface); color: var(--navy); font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* Each wrapped line of the headline gets its own navy box */
.cc-hero__title { margin: 0; font-family: var(--font-display); font-size: 100px; line-height: 1.2; font-weight: 400; letter-spacing: -1px; text-transform: uppercase; overflow-wrap: anywhere; }
.cc-hero__title span, .cc-hero__lead span { padding: 0 .12em; background: var(--navy); color: var(--surface); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cc-hero__lead { margin: 0; max-width: 640px; font-size: 24px; line-height: 36px; font-weight: 400; }
.cc-hero__lead span { padding: .1em .4em; }
.cc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-10); }
.cc-hero .cc-pill--light { color: var(--navy); }

@media (max-width: 900px) {
  .cc-hero { min-height: 480px; padding: var(--space-16) var(--space-16) var(--space-32); }
  .cc-hero__title { font-size: 52px; letter-spacing: 0; }
  .cc-hero__lead { font-size: 18px; line-height: 28px; }
}

/* ---------- Stories ---------- */
/* A row of photo-top news and event cards. Each card is one link: the headline's ::after covers the card.
   Never clip the card's overflow: that would cut off the focus ring drawn on ::after. */

.cc-stories { font-family: var(--font-sans); }
.cc-stories, .cc-stories * { box-sizing: border-box; }
.cc-stories__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-10) var(--space-16); margin-bottom: var(--space-16); }
.cc-stories__title { margin: 0; color: var(--navy); font-size: 26px; line-height: 28px; font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; }
.cc-stories--page .cc-page-title { margin: 0; }
.cc-stories__all { display: inline-flex; align-items: center; gap: var(--space-5); color: var(--navy); font-size: 16px; line-height: 24px; font-weight: 700; text-decoration: none; }
.cc-stories__all:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cc-stories__all:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-stories__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin: 0; padding: 0; list-style: none; }
.cc-story { position: relative; display: flex; flex-direction: column; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface-alt); }
.cc-story__media { overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--navy-deep); }
.cc-story__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.cc-story__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-10); padding: var(--space-16); }
.cc-story__tag { margin: 0; color: var(--navy); font-size: 14px; line-height: 21px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cc-story__title { margin: 0; color: var(--navy); font-size: 20px; line-height: 26px; font-weight: 700; overflow-wrap: anywhere; }
.cc-story__link { color: inherit; text-decoration: none; }
.cc-story__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.cc-story:hover .cc-story__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cc-story__link:focus-visible { outline: none; }
.cc-story__link:focus-visible::after { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-story__meta { display: flex; align-items: center; gap: var(--space-5); margin: 0; color: var(--ink); font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.cc-story__summary { margin: 0; color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 300; overflow-wrap: anywhere; }
/* Hover and keyboard focus zoom the photo inside its frame; the frame, not the card, clips it. */
@media (hover: hover) {
  .cc-story:hover .cc-story__photo { transform: scale(1.05); }
}
.cc-story:has(.cc-story__link:focus-visible) .cc-story__photo { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .cc-story__photo { transition: none; transform: none !important; }
}

@media (max-width: 900px) {
  .cc-stories__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pledges ---------- */
/* Static local-priority cards: a navy icon tile, a heading and a line or two of text. Nothing inside a card
   is a link; the row's one link sits underneath. The transparent border is the card's edge in forced colours. */

.cc-pledges { font-family: var(--font-sans); }
.cc-pledges, .cc-pledges * { box-sizing: border-box; }
.cc-pledges__title { margin: 0 0 var(--space-16); color: var(--navy); font-size: 26px; line-height: 28px; font-weight: 700; text-transform: uppercase; }
.cc-pledges__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin: 0; padding: 0; list-style: none; }
.cc-pledge { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-32); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface-alt); }
.cc-pledge__tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--navy); color: var(--surface); }
.cc-pledge__heading { margin: 0; color: var(--navy); font-size: 20px; line-height: 26px; font-weight: 700; overflow-wrap: anywhere; }
.cc-pledge__body { margin: 0; color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 300; overflow-wrap: anywhere; }
.cc-pledges__more { display: inline-flex; align-items: center; gap: var(--space-5); margin-top: var(--space-16); color: var(--navy); font-size: 16px; line-height: 24px; font-weight: 700; text-decoration: none; }
.cc-pledges__more:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cc-pledges__more:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

@media (max-width: 900px) {
  .cc-pledges__list { grid-template-columns: minmax(0, 1fr); }
  .cc-pledge { padding: var(--space-16); }
}

/* ---------- QuoteBand ---------- */
/* A full-width navy band: a pull quote beside the speaker's portrait. The quote sits at the bottom of row 1 and the
   caption at the top of row 2, so they stay together beside a taller portrait. The opening mark is CSS, with empty
   alternative text so screen readers skip it. */

.cc-quote-band { padding: calc(var(--space-32) * 2) var(--space-32); background: var(--navy); color: var(--surface); font-family: var(--font-sans); }
.cc-quote-band, .cc-quote-band * { box-sizing: border-box; }
.cc-quote-band__inner { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: var(--space-32); max-width: 960px; margin: 0 auto; }
.cc-quote-band__portrait { display: block; grid-row: 1 / span 2; align-self: center; width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius-md); background: var(--navy-bright); }
.cc-quote-band__quote { grid-column: 2; align-self: end; margin: 0; font-size: 24px; line-height: 34px; font-weight: 300; overflow-wrap: anywhere; }
.cc-quote-band__quote p { margin: 0; }
.cc-quote-band__quote::before { content: "“" / ""; display: block; color: var(--yellow); font-family: var(--font-display); font-size: 72px; line-height: 0.8; }
.cc-quote-band__by { grid-column: 2; align-self: start; display: flex; flex-direction: column; margin-top: var(--space-16); font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.cc-quote-band__name { font-weight: 700; }
.cc-quote-band__role { font-weight: 300; }

@media (max-width: 900px) {
  .cc-quote-band { padding: var(--space-32) var(--space-16); }
  .cc-quote-band__inner { grid-template-columns: minmax(0, 1fr); }
  .cc-quote-band__portrait { grid-row: auto; width: 120px; height: 120px; margin-bottom: var(--space-16); }
  .cc-quote-band__quote, .cc-quote-band__by { grid-column: 1; }
  .cc-quote-band__quote { font-size: 20px; line-height: 28px; }
}

/* ---------- Footer ---------- */
/* Two navy-deep bands: brand, Contact and Follow us over the legal band (policies, imprint, copyright).
   The imprint is legally required: never hide, fade or shrink anything in .cc-footer__legal. */

.cc-footer { background: var(--navy-deep); color: var(--surface); font-family: var(--font-sans); }
.cc-footer, .cc-footer * { box-sizing: border-box; }
.cc-footer__main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-32); padding: var(--space-32); }
.cc-footer__logo { display: inline-block; }
.cc-footer__logo img { display: block; height: 40px; width: auto; }
.cc-footer__about { max-width: 36ch; margin: var(--space-16) 0 0; font-size: 16px; line-height: 24px; font-weight: 300; }
.cc-footer__title { margin: 0 0 var(--space-16); font-size: 17px; line-height: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cc-footer__list { display: grid; gap: var(--space-10); margin: 0; padding: 0; list-style: none; }
.cc-footer__item { display: flex; align-items: center; gap: var(--space-10); min-width: 0; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.cc-footer address { font-style: normal; }
.cc-footer a { color: inherit; text-decoration: none; }
.cc-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cc-footer a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.cc-footer__social { display: inline-flex; align-items: center; gap: var(--space-5); }
.cc-footer__legal { display: grid; gap: var(--space-10); padding: var(--space-16) var(--space-32); border-top: 1px solid var(--navy-bright); font-size: 14px; line-height: 21px; font-weight: 400; }
.cc-footer__legal p { margin: 0; }
.cc-footer__policies { display: flex; flex-wrap: wrap; gap: var(--space-16); margin: 0; padding: 0; list-style: none; }

@media (max-width: 900px) {
  .cc-footer__main { grid-template-columns: minmax(0, 1fr); padding: var(--space-16); }
  .cc-footer__legal { padding: var(--space-16); }
}

/* ---------- PiranHero ---------- */
/* The St Piran cross is the piran-white gutter (grid gap) between four panels, never drawn over content. */

.cc-piran-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: minmax(380px, auto) minmax(96px, auto); gap: var(--cross-bar); overflow: hidden; border-radius: var(--radius-lg); background: var(--piran-white); font-family: var(--font-sans); }
.cc-piran-hero, .cc-piran-hero * { box-sizing: border-box; }
.cc-piran-hero__message { display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; min-height: 0; padding: 48px 44px; background-color: var(--navy); color: var(--surface); outline: 1px solid transparent; outline-offset: -1px; }
.cc-piran-hero__eyebrow { margin: 0; color: var(--gold); font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cc-piran-hero__title { margin: 0; font-family: var(--font-display); font-size: 56px; line-height: 1.02; font-weight: 400; text-transform: uppercase; text-wrap: balance; }
.cc-piran-hero__lede { max-width: 480px; margin: 0; font-size: 18px; line-height: 1.5; }
/* Photos fill their cell but never size the grid; the panels set the row heights. */
.cc-piran-hero__photo { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; contain: size; }
.cc-piran-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 16px 44px; background: var(--piran-black); }
.cc-piran-hero__text-action { padding: 9px 0; border: 0; background: none; color: var(--piran-white); font: 700 16px var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.cc-piran-hero__text-action--quiet { color: var(--grey); font-size: 15px; font-weight: 600; }
.cc-piran-hero__text-action:hover { text-decoration: underline; text-underline-offset: 3px; }
.cc-piran-hero__text-action:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* Motion: a looping video in the main cell, with a pause button (see the PiranHero README). */
.cc-piran-hero__media { position: relative; min-height: 0; overflow: hidden; }
.cc-piran-hero__motion { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--navy); color: var(--piran-white); cursor: pointer; }
.cc-piran-hero__motion[hidden] { display: none; }
.cc-piran-hero__motion:hover { background: var(--navy-deep); }
.cc-piran-hero__motion:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.cc-piran-hero__motion-play, .cc-piran-hero__motion[aria-pressed="true"] .cc-piran-hero__motion-pause { display: none; }
.cc-piran-hero__motion[aria-pressed="true"] .cc-piran-hero__motion-play { display: inline-block; }
/* Backstop for the script: no motion control when the visitor asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  .cc-piran-hero__motion { display: none; }
}

@media (max-width: 900px) {
  /* Stack navy panel, photo, black bar; the cross becomes horizontal seams. */
  .cc-piran-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .cc-piran-hero__photo { height: 220px; }
  .cc-piran-hero__photo--secondary { display: none; }
  .cc-piran-hero__message { padding: 36px 28px; }
  .cc-piran-hero__title { font-size: 40px; line-height: 1.05; }
  .cc-piran-hero__actions { padding: 16px 28px; }
}
@media (max-width: 560px) {
  .cc-piran-hero__message { padding: 32px 20px; }
  .cc-piran-hero__actions { padding: 16px 20px; }
}

@media (max-width: 900px) {
  .cc-asks { grid-template-columns: 1fr; }
  .cc-ask { min-height: 0; padding: var(--space-16) var(--space-16) var(--space-32); }
  .cc-ask__pitch { font-size: 24px; line-height: 30px; }
}

/* ---------- Article ---------- */
/* A news article: header, optional photo and .cc-prose. .cc-prose styles plain CMS HTML (no classes inside);
   every prose selector is scoped to it so nothing leaks. The article centres its own 680px column. */
.cc-article { box-sizing: border-box; max-width: 680px; margin-inline: auto; font-family: var(--font-sans); color: var(--ink); overflow-wrap: break-word; }
.cc-article__tag { margin: 0 0 var(--space-10); color: var(--navy); font-size: 14px; line-height: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cc-article__standfirst { margin: 0 0 var(--space-16); font-size: 22px; line-height: 1.45; font-weight: 300; }
.cc-article__byline { margin: 0 0 var(--space-32); padding-top: var(--space-10); border-top: 1px solid var(--grey); font-size: 14px; line-height: 1.5; }
.cc-article__figure, .cc-prose figure { margin: 0 0 var(--space-32); }
.cc-article__figure img, .cc-prose figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); }
.cc-article__figure figcaption, .cc-prose figcaption { margin-top: var(--space-10); font-size: 14px; line-height: 1.5; }
.cc-prose { font-family: var(--font-sans); font-size: 19px; line-height: 1.6; font-weight: 400; color: var(--ink); overflow-wrap: break-word; }
.cc-prose p { margin: 0 0 1em; }
.cc-prose h2 { margin: 1.6em 0 .5em; color: var(--navy); font-size: 28px; line-height: 1.2; font-weight: 800; }
.cc-prose h3 { margin: 1.4em 0 .4em; color: var(--navy); font-size: 22px; line-height: 1.3; font-weight: 700; }
.cc-prose a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cc-prose a:hover { text-decoration-thickness: 3px; }
.cc-prose a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-prose ul, .cc-prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.cc-prose li { margin: .3em 0; }
.cc-prose li > ul, .cc-prose li > ol { margin: .3em 0 0; }
.cc-prose li::marker { color: var(--navy); }
.cc-prose blockquote { margin: 1.5em 0; padding: 4px 0 4px var(--space-16); border-left: 4px solid var(--navy); color: var(--navy); font-size: 24px; line-height: 1.4; font-weight: 300; }
.cc-prose blockquote p { margin: 0 0 .4em; }
.cc-prose cite { display: block; color: var(--ink); font-size: 16px; line-height: 1.5; font-style: normal; font-weight: 700; }
.cc-prose img { max-width: 100%; height: auto; }
.cc-prose strong { font-weight: 700; }
.cc-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--grey); }
.cc-prose > :first-child { margin-top: 0; }
.cc-prose > :last-child { margin-bottom: 0; }
.cc-prose--centred { max-width: 680px; margin-inline: auto; }

/* ---------- Pagination ---------- */
/* Numbered pages with Previous and Next. Under 600px the numbers hide and "Page N of M" shows.
   The status is display:none on wide screens, so screen readers don't hear the position twice. */
.cc-pagination { font-family: var(--font-sans); }
.cc-pagination__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-10); margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; font-weight: 700; }
.cc-pagination__page { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 var(--space-10); border-radius: var(--radius-pill); color: var(--navy); text-decoration: none; }
.cc-pagination__page[aria-current="page"] { background: var(--navy); color: var(--surface); }
.cc-pagination__prev, .cc-pagination__next { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-5); min-height: 48px; padding: 0 var(--space-10); color: var(--navy); text-decoration: none; }
.cc-pagination__prev .cc-icon { transform: scaleX(-1); }
.cc-pagination a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cc-pagination__page[aria-current="page"]:hover { text-decoration: none; }
.cc-pagination a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 8px var(--surface); }
.cc-pagination__gap { min-width: 24px; color: var(--navy); text-align: center; }
.cc-pagination__status { display: none; color: var(--ink); font-weight: 400; }
.cc-stories + .cc-pagination { margin-top: var(--space-32); }
/* Forced colours drop the navy circle, so the current page alone gets a border. */
@media (forced-colors: active) {
  .cc-pagination__page[aria-current="page"] { border: 2px solid CanvasText; }
}
@media (max-width: 600px) {
  .cc-pagination__item, .cc-pagination__gap { display: none; }
  .cc-pagination__status { display: block; }
  .cc-pagination__prev, .cc-pagination__next { padding: 0; }
}

/* ---------- CampaignAsk ---------- */
/* A campaign's one ask: a navy granite panel (with .cc-granite) holding an eyebrow, the ask, one sentence and one Local pill.
   It sets background-color, never the background shorthand, so the granite's background-image survives. */
.cc-campaign-ask { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: calc(var(--space-32) * 2); border-radius: var(--radius-lg); background-color: var(--navy); color: var(--surface); font-family: var(--font-sans); outline: 1px solid transparent; outline-offset: -1px; }
.cc-campaign-ask__eyebrow { margin: 0; color: var(--gold); font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cc-campaign-ask__title { margin: 0; max-width: 720px; font-family: var(--font-display); font-size: 56px; line-height: 1.02; font-weight: 400; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.cc-campaign-ask__body { margin: 0; max-width: 720px; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.cc-campaign-ask .cc-pill { margin-top: var(--space-10); }
.cc-campaign-page__why-title { max-width: 680px; margin: 0 auto var(--space-16); color: var(--navy); font-family: var(--font-sans); font-size: 26px; line-height: 28px; font-weight: 700; text-transform: uppercase; }
@media (max-width: 900px) {
  .cc-campaign-ask { padding: var(--space-32); }
  .cc-campaign-ask__title { font-size: 40px; line-height: 1.05; }
}

/* ---------- CouncillorList ---------- */
/* The councillors directory: an optional head, an A–Z bar (letters with divisions only) and division-sorted letter groups
   of compact cards. Each card is one link; its ::after covers the card. The transparent border is its forced-colours edge. */
.cc-councillors { font-family: var(--font-sans); }
.cc-councillors__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); margin-bottom: var(--space-32); }
.cc-councillors__head .cc-page-title { margin: 0; }
.cc-councillors__intro { margin: 0; max-width: 680px; color: var(--ink); font-size: 20px; line-height: 1.5; }
.cc-councillors__az-list { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0 0 var(--space-32); padding: 0; list-style: none; }
.cc-councillors__az-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--radius-sm); color: var(--navy); font-size: 18px; font-weight: 700; text-decoration: none; }
.cc-councillors__az-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cc-councillors__az-link:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-councillors__group + .cc-councillors__group { margin-top: var(--space-32); }
.cc-councillors__letter { margin: 0 0 var(--space-16); padding-bottom: var(--space-5); border-bottom: 1px solid var(--grey); color: var(--navy); font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 400; }
.cc-councillors__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin: 0; padding: 0; list-style: none; }
.cc-councillor { position: relative; display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); }
.cc-councillor__photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--navy-bright); }
.cc-councillor__body { min-width: 0; }
.cc-councillor__name { margin: 0; color: var(--navy); font-size: 18px; line-height: 24px; font-weight: 700; overflow-wrap: anywhere; }
.cc-councillor__link { color: inherit; text-decoration: none; }
.cc-councillor__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.cc-councillor:hover .cc-councillor__link { text-decoration: underline; text-underline-offset: 3px; }
.cc-councillor__link:focus-visible { outline: none; }
.cc-councillor__link:focus-visible::after { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-councillor__division { margin: 0; color: var(--ink); font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.cc-councillor__role { margin: 0; color: var(--ink); font-size: 14px; line-height: 21px; }
@media (max-width: 900px) {
  .cc-councillors__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- CouncillorProfile ---------- */
/* A councillor's page head: portrait beside the name (the page's h1), division, role and contact rows. A section, not a
   header, so the page keeps one banner landmark. Stacks with the photo first at 900px and below. */
.cc-councillor-profile { display: flex; align-items: flex-start; gap: var(--space-32); font-family: var(--font-sans); }
.cc-councillor-profile__photo { flex: none; width: 240px; height: 240px; border-radius: var(--radius-md); object-fit: cover; background: var(--navy-bright); }
.cc-councillor-profile__body { min-width: 0; }
.cc-councillor-profile__tag { margin: 0 0 var(--space-10); color: var(--navy); font-size: 14px; line-height: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cc-councillor-profile .cc-page-title { margin-bottom: var(--space-10); }
.cc-councillor-profile__division { margin: 0; color: var(--navy); font-size: 20px; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; }
.cc-councillor-profile__role { margin: var(--space-5) 0 0; color: var(--ink); font-size: 16px; line-height: 24px; }
.cc-councillor-profile__contact { display: grid; gap: var(--space-10); margin: var(--space-16) 0 0; padding: var(--space-16) 0 0; border-top: 1px solid var(--grey); list-style: none; color: var(--ink); font-size: 16px; line-height: 24px; }
.cc-councillor-profile__contact li { display: flex; align-items: center; gap: var(--space-10); overflow-wrap: anywhere; }
.cc-councillor-profile__contact .cc-icon { flex: none; color: var(--navy); }
.cc-councillor-profile__contact a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cc-councillor-profile__contact a:hover { text-decoration-thickness: 3px; }
.cc-councillor-profile__contact a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (max-width: 900px) {
  .cc-councillor-profile { flex-direction: column; gap: var(--space-16); }
  .cc-councillor-profile__photo { width: 160px; height: 160px; }
}

/* ---------- Form ---------- */
/* Form parts: an outlined field (label, optional hint, error message, input/textarea/select), a consent checkbox, an error
   summary and a success panel. Errors use red plus a visible "Error:" and a red bar, never colour alone. initForm in
   bundle.js renders the same error markup a server would. */
.cc-form { display: grid; gap: var(--space-16); max-width: 680px; font-family: var(--font-sans); }
.cc-field__label { display: block; color: var(--navy); font-size: 16px; line-height: 24px; font-weight: 700; }
.cc-field__hint { margin: 0 0 var(--space-5); color: var(--ink); font-size: 14px; line-height: 21px; }
.cc-field__input { box-sizing: border-box; display: block; width: 100%; min-height: 48px; margin: var(--space-5) 0 0; padding: var(--space-10); border: 2px solid var(--navy); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 18px; line-height: 24px; }
textarea.cc-field__input { min-height: 144px; resize: vertical; }
select.cc-field__input { appearance: none; padding-right: 40px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230a3b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 20px 20px; }
.cc-field__input:focus, .cc-check__input:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 8px var(--surface); }
.cc-field--error { border-left: 4px solid var(--red); padding-left: var(--space-16); }
.cc-field--error .cc-field__input { border-color: var(--red); }
.cc-field__error { margin: 0 0 var(--space-5); color: var(--red); font-size: 14px; line-height: 21px; font-weight: 700; }
.cc-check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-10); }
.cc-check__input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--navy); border-radius: 4px; background-color: var(--surface); }
.cc-check__input:checked { background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
.cc-check__label { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.cc-check__label a, .cc-error-summary__list a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cc-check__label a:focus-visible, .cc-error-summary__list a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-check--error { border-left: 4px solid var(--red); padding-left: var(--space-16); }
.cc-check--error .cc-check__input { border-color: var(--red); }
.cc-check .cc-field__error { flex-basis: 100%; }
.cc-check-group { display: grid; gap: var(--space-10); min-width: 0; margin: 0; padding: 0; border: 0; }
.cc-check-group__legend { margin-bottom: var(--space-5); padding: 0; color: var(--navy); font-size: 16px; line-height: 24px; font-weight: 700; }
.cc-check-group .cc-field__hint { margin: 0; }
.cc-check-group .cc-check__label { font-size: 16px; line-height: 24px; }
.cc-check-group--error { border-left: 4px solid var(--red); padding-left: var(--space-16); }
.cc-check-group--error .cc-check__input { border-color: var(--red); }
.cc-error-summary { padding: var(--space-16); border: 4px solid var(--red); background: var(--surface); }
.cc-error-summary:focus { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-error-summary__title { margin: 0 0 var(--space-10); color: var(--navy); font-size: 20px; line-height: 28px; font-weight: 700; }
.cc-error-summary__list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; font-weight: 700; }
.cc-form-success { padding: var(--space-32); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); font-family: var(--font-sans); }
.cc-form-success__title { margin: 0 0 var(--space-10); color: var(--navy); font-size: 24px; line-height: 32px; font-weight: 700; }
.cc-form-success__text { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.5; }
@media (forced-colors: active) {
  .cc-check__input { appearance: auto; }
  select.cc-field__input { appearance: auto; padding-right: var(--space-10); background-image: none; }
}

/* ---------- SignUp ---------- */
/* The email sign-up band: a white panel (red errors stay readable; it can sit straight above the Footer). The transparent
   border is its edge in forced colours. */
.cc-signup { box-sizing: border-box; padding: var(--space-32); border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--surface); font-family: var(--font-sans); }
.cc-signup__title { margin: 0 0 var(--space-10); max-width: 720px; color: var(--navy); font-family: var(--font-display); font-size: 40px; line-height: 1.05; font-weight: 400; text-transform: uppercase; overflow-wrap: anywhere; }
.cc-signup__intro { margin: 0 0 var(--space-16); max-width: 720px; color: var(--ink); font-size: 18px; line-height: 1.5; }
.cc-signup .cc-form { max-width: 720px; }
.cc-signup__row { display: flex; align-items: flex-end; gap: var(--space-10); }
.cc-signup__row .cc-field { flex: 1; min-width: 0; }
.cc-signup__row .cc-pill { flex: none; }
@media (max-width: 600px) {
  .cc-signup { padding: var(--space-16); }
  .cc-signup__title { font-size: 32px; }
  .cc-signup__row { flex-direction: column; align-items: stretch; }
  .cc-signup__row .cc-pill { align-self: flex-start; }
}

/* ---------- Contact ---------- */
/* The contact page's layout: the form beside an "Other ways to reach us" aside, stacking (form first) at 900px and below. */
.cc-contact__intro { margin: 0 0 var(--space-32); max-width: 680px; color: var(--ink); font-family: var(--font-sans); font-size: 20px; line-height: 1.5; }
.cc-contact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-32); align-items: start; }
.cc-contact__aside { padding: var(--space-32); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); }
.cc-contact__aside-title { margin: 0 0 var(--space-16); color: var(--navy); font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; }
.cc-contact__list { display: grid; gap: var(--space-10); margin: 0; padding: 0; list-style: none; color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
.cc-contact__list li { display: flex; align-items: center; gap: var(--space-10); overflow-wrap: anywhere; }
.cc-contact__list .cc-icon { flex: none; color: var(--navy); }
.cc-contact__list a, .cc-contact__small a, .cc-contact__reply a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cc-contact__list a:focus-visible, .cc-contact__small a:focus-visible, .cc-contact__reply a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-contact__reply, .cc-contact__small { margin: var(--space-16) 0 0; color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 21px; }
@media (max-width: 900px) {
  .cc-contact { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Content ---------- */
/* A content page (Privacy, Cookies, Accessibility, About): the page title, an optional standfirst and "Last updated" line,
   an "On this page" box from three sections, and .cc-prose, in Article's 680px column. The box's transparent border is its
   forced-colours edge; overflow-wrap: anywhere lets a long unbroken heading wrap inside it. */
.cc-content { box-sizing: border-box; max-width: 680px; margin-inline: auto; font-family: var(--font-sans); color: var(--ink); overflow-wrap: break-word; }
.cc-content__standfirst { margin: 0 0 var(--space-16); font-size: 22px; line-height: 1.45; font-weight: 300; }
.cc-content__standfirst a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cc-content__standfirst a:hover { text-decoration-thickness: 3px; }
.cc-content__standfirst a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-content__updated { margin: 0 0 var(--space-32); padding-top: var(--space-10); border-top: 1px solid var(--grey); font-size: 14px; line-height: 1.5; }
.cc-contents { margin: 0 0 var(--space-32); padding: 24px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); }
.cc-contents__title { margin: 0 0 var(--space-10); color: var(--navy); font-size: 16px; line-height: 24px; font-weight: 700; }
.cc-contents__list { display: grid; gap: var(--space-5); margin: 0; padding-left: 24px; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.cc-contents__list a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cc-contents__list a:hover { text-decoration-thickness: 3px; }
.cc-contents__list a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-content .cc-form + .cc-prose { margin-top: var(--space-32); }
.cc-content .cc-prose + .cc-form { margin-top: var(--space-32); }
.cc-content .cc-form + .cc-action-box { margin-top: var(--space-32); }
@media (max-width: 600px) {
  .cc-contents { padding: var(--space-16); }
}

/* ---------- Volunteer ---------- */
/* The Volunteer page: the intro under the page title, and the form section in a centred 680px column below the
   "Ways to help" cards (the Pledges layout). */
.cc-volunteer__intro { margin: 0; max-width: 680px; color: var(--ink); font-family: var(--font-sans); font-size: 20px; line-height: 1.5; }
.cc-volunteer__form { box-sizing: border-box; max-width: 680px; margin-inline: auto; font-family: var(--font-sans); }
.cc-volunteer__form-title { margin: 0 0 var(--space-10); color: var(--navy); font-size: 26px; line-height: 28px; font-weight: 700; text-transform: uppercase; }
.cc-volunteer__next { margin: 0 0 var(--space-16); color: var(--ink); font-size: 18px; line-height: 1.5; }
.cc-volunteer__small { margin: var(--space-16) 0 0; color: var(--ink); font-size: 14px; line-height: 21px; }
.cc-volunteer__small a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cc-volunteer__small a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ---------- Events ---------- */
/* Events: the EventDetails box (when, where, getting there, accessibility, cost, then Book a place or a note), the Event
   page column and the Events listing. The box's transparent border is its forced-colours edge. */
.cc-event-details { margin: 0 0 var(--space-32); padding: 24px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); font-family: var(--font-sans); }
.cc-event-details__list { display: grid; gap: var(--space-10); margin: 0; }
.cc-event-details__row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-16); }
.cc-event-details__row dt { display: flex; align-items: center; gap: var(--space-5); color: var(--navy); font-size: 16px; line-height: 24px; font-weight: 700; }
.cc-event-details__row dd { margin: 0; color: var(--ink); font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.cc-event-details__row dd a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cc-event-details__row dd a:hover { text-decoration-thickness: 3px; }
.cc-event-details__row dd a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-event-details .cc-pill { margin-top: var(--space-16); }
.cc-event-details__note { margin: var(--space-16) 0 0; color: var(--navy); font-size: 16px; line-height: 24px; font-weight: 700; }
@media (max-width: 600px) {
  .cc-event-details { padding: var(--space-16); }
  .cc-event-details__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.cc-event { box-sizing: border-box; max-width: 680px; margin-inline: auto; font-family: var(--font-sans); color: var(--ink); overflow-wrap: break-word; }
.cc-event__tag { margin: 0 0 var(--space-10); color: var(--navy); font-size: 14px; line-height: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cc-event__standfirst { margin: 0 0 var(--space-16); font-size: 22px; line-height: 1.45; font-weight: 300; }
.cc-events__intro { margin: 0 0 var(--space-32); max-width: 680px; color: var(--ink); font-family: var(--font-sans); font-size: 20px; line-height: 1.5; }
.cc-events__month + .cc-events__month { margin-top: var(--space-32); }
.cc-events__month-title { margin: 0 0 var(--space-16); color: var(--navy); font-size: 26px; line-height: 28px; font-weight: 700; text-transform: uppercase; }
.cc-events__empty { margin: 0; color: var(--ink); font-family: var(--font-sans); font-size: 18px; line-height: 1.5; }
.cc-events__empty a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cc-events__empty a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ---------- Action box ---------- */
/* Action box: a white box holding one page's ask, with a title, a line or two, an optional list, the pill and a small
   note (Donate). The navy variant carries a national ask with a Light pill (Join). Its transparent border is its
   forced-colours edge. */
.cc-action-box { margin: 0 0 var(--space-32); padding: 24px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; overflow-wrap: break-word; }
.cc-action-box__title { margin: 0 0 var(--space-10); color: var(--navy); font-size: 22px; line-height: 28px; font-weight: 700; }
.cc-action-box p { margin: 0 0 var(--space-16); }
.cc-action-box p:last-child { margin-bottom: 0; }
.cc-action-box__list { display: grid; gap: var(--space-5); margin: 0 0 var(--space-16); padding-left: 24px; overflow-wrap: anywhere; }
.cc-action-box .cc-action-box__note { margin: var(--space-16) 0 0; font-size: 14px; line-height: 1.5; }
.cc-action-box a:not(.cc-pill) { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cc-action-box a:not(.cc-pill):focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-action-box--navy { background: var(--navy); color: var(--surface); }
.cc-action-box--navy .cc-action-box__title { color: var(--surface); }
.cc-action-box--navy a:not(.cc-pill) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cc-action-box--navy a:not(.cc-pill):focus-visible { outline: 3px solid var(--surface); outline-offset: 2px; }
@media (max-width: 600px) {
  .cc-action-box { padding: var(--space-16); }
  .cc-action-box .cc-pill { display: flex; box-sizing: border-box; width: 100%; padding-right: var(--space-16); padding-left: var(--space-16); text-align: center; }
}

/* ---------- Associations ---------- */
/* Our associations: the head, then a grid of white cards (three across, one at 900px and below), each with the name,
   the area it covers and its links. Cards hold several links, so they aren't one big link. The transparent border is
   the forced-colours edge. */
.cc-associations { font-family: var(--font-sans); }
.cc-associations__head { margin-bottom: var(--space-32); }
.cc-associations__head .cc-page-title { margin: 0 0 var(--space-16); }
.cc-associations__intro { margin: 0; max-width: 680px; color: var(--ink); font-size: 20px; line-height: 1.5; }
.cc-associations__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin: 0; padding: 0; list-style: none; }
.cc-association { padding: 24px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); overflow-wrap: anywhere; }
.cc-association__name { margin: 0 0 var(--space-5); color: var(--navy); font-size: 22px; line-height: 28px; font-weight: 700; }
.cc-association__area { margin: 0 0 var(--space-16); color: var(--ink); font-size: 16px; line-height: 24px; }
.cc-association__links { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; }
.cc-association__links a { display: inline-flex; align-items: flex-start; gap: var(--space-5); color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cc-association__links a:hover { text-decoration-thickness: 3px; }
.cc-association__links a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-association__links .cc-icon { flex: none; margin-top: 4px; }
.cc-association__name a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cc-association__name a:hover { text-decoration-thickness: 3px; }
.cc-association__name a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-association-page__tag { margin: 0 0 var(--space-10); color: var(--navy); font-size: 14px; line-height: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) {
  .cc-associations__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Search ---------- */
/* Search results in the content column: the count, then a list of results divided by grey rules (decoration), each with
   its type, its title as the one link, an optional date and a summary. */
.cc-search__count { margin: var(--space-32) 0 var(--space-16); color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 700; }
.cc-search__results { margin: 0 0 var(--space-32); padding: 0; list-style: none; border-top: 1px solid var(--grey); }
.cc-search__result { padding: var(--space-16) 0; border-bottom: 1px solid var(--grey); }
.cc-search__type { margin: 0 0 var(--space-5); color: var(--navy); font-size: 14px; line-height: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cc-search__title { margin: 0 0 var(--space-5); font-size: 22px; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; }
.cc-search__title a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cc-search__title a:hover { text-decoration-thickness: 3px; }
.cc-search__title a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cc-search__meta { margin: 0 0 var(--space-5); color: var(--ink); font-size: 14px; line-height: 21px; }
.cc-search__summary { margin: 0; color: var(--ink); font-size: 16px; line-height: 24px; }

/* ---------- Granite ---------- */
/* Cornish granite: a silver-grey speckle over a navy or navy-deep surface. At most one per page. Last in the bundle, so a component's `background:` shorthand cannot reset it. Source: tools/ds/granite.mjs and the README. */

.cc-granite { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='2' seed='11' stitchTiles='stitch' result='big'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2' seed='4' stitchTiles='stitch' result='fine'/%3E%3CfeColorMatrix in='big' type='matrix' values='0 0 0 0 0.86 0 0 0 0 0.88 0 0 0 0 0.9 12 0 0 0 -7.1' result='xtal'/%3E%3CfeColorMatrix in='fine' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 14 0 0 0 -8.8' result='lt'/%3E%3CfeColorMatrix in='fine' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -14 0 0 0 5.2' result='dk'/%3E%3CfeComponentTransfer in='xtal' result='x2'%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer in='lt' result='lt2'%3E%3CfeFuncA type='linear' slope='0.07'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer in='dk' result='dk2'%3E%3CfeFuncA type='linear' slope='0.30'/%3E%3C/feComponentTransfer%3E%3CfeMerge%3E%3CfeMergeNode in='x2'/%3E%3CfeMergeNode in='dk2'/%3E%3CfeMergeNode in='lt2'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-repeat: repeat; }
@media (forced-colors: active), print { .cc-granite { background-image: none; } }