/* Christ Church Loresho; pattern stylesheet.
   Every value here is copied from the design system: tokens/ for variables,
   components/ for geometry and states. Nothing is invented.
   Plain CSS, custom properties only, no build step. Mobile first.
   One block per pattern, each with its own ccl- namespace, so each converts
   to a single WordPress pattern or template part. */

/* ---------------------------------------------------------------- 1. SKIP LINK
   global-chrome.md 1. First focusable thing in the document. */
.ccl-skip{position:absolute;left:var(--margin-outer);top:-100px;z-index:200;padding:var(--space-3) var(--space-5);background:var(--black);color:var(--white);font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);text-decoration:none;transition:top var(--dur-state) var(--ease)}
.ccl-skip:focus{top:8px;color:var(--white)}

/* ------------------------------------------------------------------- 2. HEADER
   design.md 5.1. Logo left, menu control right, nothing else, any viewport.
   Not sticky. */
.ccl-header{height:var(--header-h);background:var(--white);border-bottom:var(--border-hair);display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding-inline:var(--margin-outer)}
.ccl-header__home{display:flex;align-items:center;min-height:44px;text-decoration:none}
.ccl-header__logo{height:clamp(32px,4vw,40px);width:auto;display:block}
.ccl-header__menu{min-width:44px;height:44px;display:flex;align-items:center;gap:var(--space-3);background:none;border:0;padding:0;cursor:pointer;color:var(--black);text-decoration:none;transition:color var(--dur-state) var(--ease)}
.ccl-header__menu:hover{color:var(--brick-ember)}
.ccl-header__menu-label{font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:var(--track-label)}
.ccl-header__bars{display:grid;gap:5px;width:24px;flex:0 0 24px}
.ccl-header__bars span{height:2px;background:currentColor}

/* --------------------------------------------------------------- 3. NAV PANEL
   design.md 5.2, Variant A, Black. Full page overlay, identical at every
   viewport. IT DOES NOT ANIMATE IN. Present or not.
   Opens two ways, so it works with JavaScript switched off:
   :target for no JS, .is-open for the enhanced JS path. */
.ccl-nav-panel{display:none;position:fixed;inset:0;z-index:100;background:var(--black);padding:var(--space-5) var(--margin-outer) var(--space-7);flex-direction:column;overflow:auto}
.ccl-nav-panel:target,.ccl-nav-panel.is-open{display:flex}
.ccl-nav-panel__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5)}
.ccl-nav-panel__home{display:block;text-decoration:none}
.ccl-nav-panel__logo{height:40px;width:auto;display:block}
.ccl-nav-panel__close{width:44px;height:44px;flex:0 0 44px;background:none;border:0;cursor:pointer;display:grid;place-items:center;text-decoration:none;color:var(--white)}
.ccl-nav-panel__close span{position:relative;width:24px;height:24px;display:block}
.ccl-nav-panel__close span::before,.ccl-nav-panel__close span::after{content:"";position:absolute;top:11px;left:0;width:24px;height:2px;background:var(--white)}
.ccl-nav-panel__close span::before{transform:rotate(45deg)}
.ccl-nav-panel__close span::after{transform:rotate(-45deg)}
.ccl-nav-panel__nav{margin-top:var(--space-8)}
.ccl-nav-panel__list{list-style:none;margin:0;padding:0}
/* .ccl-nav-row sets the row height, 64px stepping to 48px on short screens.
   It is a design system class and lives in tokens/layout.css, as does
   .ccl-nav-link, which sets the link size at each of those steps. Neither is
   redefined here. The row is the positioning context for the link overlay
   below. */
.ccl-nav-panel__item{display:flex;align-items:center;position:relative}
.ccl-nav-panel__link{display:inline-flex;align-items:center;gap:var(--space-4);font-family:var(--font-sans);font-weight:var(--weight-bold);line-height:var(--lh-nav);letter-spacing:var(--track-nav);color:var(--white);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px;transition:color var(--dur-state) var(--ease),transform var(--dur-state) var(--ease)}
.ccl-nav-panel__link:hover{color:var(--jasper);border-bottom-color:var(--jasper);transform:translateY(calc(var(--nav-link-rise) * -1))}
.ccl-nav-panel__link[aria-current=page]{color:var(--brick-ember);border-bottom-color:var(--brick-ember);transform:none}
/* The visible link is only as tall as its own text, so the underline sits
   against the word rather than at the foot of the row. The tap target is the
   whole row, taken out to the row height by an overlay, which is the same
   device the cards use. Nothing moves visually. */
.ccl-nav-panel__link::after{content:"";position:absolute;inset:0}
/* The header, nav panel and footer are identical markup on every page, so the
   current nav item is not marked in the part itself. The page names itself on
   the body element and the state is selected from there. In WordPress the
   navigation block emits aria-current=page itself and this pair of rules is
   what the body class hooks into. */
body[data-ccl-current=us] .ccl-nav-panel__link[data-ccl-nav=us],
body[data-ccl-current=sundays] .ccl-nav-panel__link[data-ccl-nav=sundays],
body[data-ccl-current=children] .ccl-nav-panel__link[data-ccl-nav=children],
body[data-ccl-current=beliefs] .ccl-nav-panel__link[data-ccl-nav=beliefs],
body[data-ccl-current=resources] .ccl-nav-panel__link[data-ccl-nav=resources],
body[data-ccl-current=visit] .ccl-nav-panel__link[data-ccl-nav=visit]{color:var(--brick-ember);border-bottom-color:var(--brick-ember);transform:none}
.ccl-nav-panel__detail{margin-top:var(--space-9);font-family:var(--font-sans);font-size:var(--text-md);color:var(--white);display:grid;gap:var(--space-2)}
.ccl-nav-panel a:focus-visible,.ccl-nav-panel button:focus-visible{outline:var(--focus-width) solid var(--focus-colour-invert);outline-offset:var(--focus-offset)}
/* Six links plus the address and the service times must all be seen at once
   on a landscape phone, so the panel shrinks rather than scrolls. The link
   size and row height step down in tokens/layout.css at the same two
   heights; what steps down here is the panel's own vertical rhythm, using
   the spacing scale and no value outside it. */
@media (max-height:780px){
  .ccl-nav-panel__nav{margin-top:var(--space-6)}
  .ccl-nav-panel__detail{margin-top:var(--space-7)}
}
@media (max-height:620px){
  .ccl-nav-panel{padding-top:var(--space-4);padding-bottom:var(--space-5)}
  .ccl-nav-panel__logo{height:32px}
  .ccl-nav-panel__nav{margin-top:var(--space-5)}
  .ccl-nav-panel__detail{margin-top:var(--space-6)}
}
/* The panel sits in the DOM at load, display:none, so opening costs nothing
   and its links stay out of the tab order and out of the accessibility tree
   until it opens. No hidden attribute: it would defeat the :target path. */
body.ccl-nav-open{overflow:hidden}

/* ------------------------------------------------------------------- 4. FOOTER
   design.md 5.3 and global-chrome.md 3. NO RED IN THE FOOTER: Brick Ember on
   Black is 3.39:1 and footer text is not large. Link states change decoration,
   never colour. Columns are plain headings and lists, never accordions. */
.ccl-footer{background:var(--black);color:var(--white);padding:var(--space-9) var(--margin-outer) var(--space-7)}
.ccl-footer__inner{max-width:var(--w-wide);margin-inline:auto}
.ccl-footer__head{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;line-height:var(--lh-tight);color:var(--dust-grey);margin:0 0 var(--space-3)}
.ccl-footer__list{list-style:none;margin:0;padding:0;display:grid}
.ccl-footer__link{color:var(--white);font-family:var(--font-sans);font-size:var(--text-md);line-height:1.9;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.ccl-footer__link:hover{color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ccl-footer__utility{border-top:1px solid var(--dust-grey);margin-top:var(--space-8);padding-top:var(--space-6);display:grid;gap:var(--space-5)}
.ccl-footer__utility-row{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;justify-content:space-between}
/* The footer logo is a link home, matching the header logo. 44px hit area,
   and the same aria-label as the header so a screen reader hears one
   destination named the same way twice, not two different things. */
.ccl-footer__home{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.ccl-footer__logo{height:32px;width:auto;display:block}
.ccl-footer__utility-links{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center}
.ccl-footer__line{font-family:var(--font-sans);font-size:var(--text-md);color:var(--white);margin:0}
.ccl-footer__confession{font-family:var(--font-serif);font-size:var(--text-sm);font-style:italic;line-height:1.5;color:var(--dust-grey);margin:0;max-width:60ch}
.ccl-footer a:focus-visible{outline:var(--focus-width) solid var(--focus-colour-invert);outline-offset:var(--focus-offset)}

/* -------------------------------------------------------------- 5. BREADCRUMB
   design.md 5.11. Never a Home crumb. Slash separator in Dust Grey, never a
   chevron. Wraps, never truncates. */
.ccl-breadcrumb{margin-bottom:var(--space-4)}
.ccl-breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--lh-tight)}
.ccl-breadcrumb__list li{display:flex;align-items:center;gap:var(--space-2)}
.ccl-breadcrumb__link{color:var(--graphite);text-decoration-thickness:1px;text-underline-offset:3px}
.ccl-breadcrumb__current{color:var(--black)}
.ccl-breadcrumb__sep{color:var(--dust-grey)}

/* ------------------------------------------------------------- 5b. TYPE TABLE
   THE ONE PLACE THAT SAYS WHAT EVERY HEADING AND EVERY PARAGRAPH IS.
   Added 21 September on Ben's instruction, because a heading's font was
   coming from the block it sat in rather than from its level: Our story on
   Us was PT Serif and One church, the same level on the same page, was Open
   Sans. Levels decide now, not blocks.

   THE SPLIT. Reading pages, meaning a single article and a single sermon,
   are serif headed below the H1. Every other page is sans headed. A page
   declares which it is with data-ccl-reading on the body element, and no
   other markup changes anywhere.

   THE H1 IS OPEN SANS ON EVERY PAGE, reading page or not. Ben, 21 September.
   The title is the one heading that behaves the same everywhere, so a reader
   arriving on an article recognises it as the same site; the serif begins
   underneath it, where the reading begins.

   WEIGHT FOLLOWS FAMILY, and it has to. Open Sans ships 400, 600 and 700 in
   this build. PT Serif ships 400 and 700 only. A semibold heading exists in
   sans and does not exist in serif, so sans headings are 600, serif headings
   are 700, and H1 is 700 in both.

   HEADINGS          size    weight sans / serif
   H1                3xl     700          Open Sans on every page
   H2                2xl     600 / 700    a section heading
   H3                xl      600 / 700    a heading inside a section
   H4                lg      600 / 700    defined, not yet used by any page

   PARAGRAPHS
   Long reading      PT Serif base-serif, 1.75, 68 character measure
   Interface body    Open Sans base, 1.65
   Standfirst        PT Serif lg, Graphite. Serif on every page, sans headed
                     or not: it is the first line of reading, not a label
   Meta              Open Sans md, Graphite. Date, author, passage
   Caption           Open Sans sm, Graphite, beneath an image
   Small print       Open Sans sm, Graphite
   Eyebrow           Open Sans xs, 600, uppercase, tracked 0.1em

   EXEMPT, deliberately, and they stay Open Sans on a reading page too:
   cards, the footer, the nav panel, buttons, breadcrumbs, pills, topic
   tiles, pagination, form labels and image slot labels. They are interface,
   not reading, and they are the same on all 30 pages. */
body{--heading-font:var(--font-sans);--heading-weight:var(--weight-semibold)}
[data-ccl-reading]{--heading-font:var(--font-serif);--heading-weight:var(--weight-bold)}

/* H4. Defined so the table is complete. No page uses it yet. */
.ccl-h4{font-family:var(--heading-font);font-size:var(--text-lg);font-weight:var(--heading-weight);line-height:var(--lh-tight);letter-spacing:var(--track-normal);color:var(--black);margin:var(--space-6) 0 var(--space-3)}

/* The three paragraph roles that had no class of their own. */
.ccl-text-body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--lh-body);color:var(--black)}
.ccl-caption{font-family:var(--font-sans);font-size:var(--text-sm);line-height:1.45;color:var(--graphite);margin:var(--space-3) 0 0}
.ccl-smallprint{font-family:var(--font-sans);font-size:var(--text-sm);line-height:1.5;color:var(--graphite)}

/* --------------------------------------------------------- 6. BANDS AND TYPE
   design.md 4.3. A page alternates White and Desert Storm. Two Desert Storm
   bands per page maximum, never adjacent. One Black band per page maximum,
   excluding the footer. Brick Ember is never a band. */
.ccl-band{padding-block:var(--space-section);padding-inline:var(--margin-outer);background:var(--white);color:var(--black)}
.ccl-band--alt{background:var(--desert-storm);color:var(--black)}
.ccl-band--black{background:var(--black);color:var(--white)}
.ccl-band__inner{max-width:var(--w-wide);margin-inline:auto}
.ccl-band__inner--reading{max-width:var(--w-reading)}
.ccl-band__inner--content{max-width:var(--w-content)}
/* The 4px Brick Ember rule above a section heading. Draws itself left to
   right, once, from the view() timeline in tokens/motion.css. */
.ccl-band__rule{height:var(--rule-accent);width:96px;background:var(--brick-ember);margin-bottom:var(--space-5)}
.ccl-band--black .ccl-band__rule{background:var(--white)}
.ccl-eyebrow{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brick-ember);margin:0 0 var(--space-3)}
.ccl-band--black .ccl-eyebrow{color:var(--dust-grey)}
.ccl-band__heading{font-family:var(--heading-font);font-size:var(--text-2xl);font-weight:var(--heading-weight);line-height:var(--lh-h2);letter-spacing:var(--track-h2);margin:0 0 var(--space-6);max-width:28ch}

.ccl-page-head{padding:var(--space-10) var(--margin-outer) var(--space-9)}
/* The head on Desert Storm, so the page opens on the alternate band and the
   content below it returns to White. Our Beliefs, Ben 21 September. Counts
   as one of the two Desert Storm bands a page is allowed. */
.ccl-page-head--alt{background:var(--desert-storm)}
.ccl-page-head__inner{max-width:var(--w-content);margin-inline:auto}
.ccl-h1{font-family:var(--font-sans);font-size:var(--text-3xl);line-height:var(--lh-h1);letter-spacing:var(--track-h1);font-weight:var(--weight-bold);margin:var(--space-5) 0 var(--space-6)}
.ccl-standfirst{font-family:var(--font-serif);font-size:var(--text-lg);font-weight:var(--weight-regular);line-height:1.55;color:var(--graphite);max-width:var(--w-reading);margin:0}

/* Long form. design.md 3: anything read at more than roughly 150 words is
   PT Serif, at the 68 character measure. Rhythm from tokens/spacing.css. */
.ccl-prose{font-family:var(--font-serif);font-size:var(--text-base-serif);line-height:var(--lh-reading);max-width:var(--w-reading);margin-inline:auto}
.ccl-prose > p{margin:0 0 var(--rhythm-para-to-para)}
.ccl-prose > p:last-child{margin-bottom:0}
/* Headings inside the flow take the page's heading font, section 5b. On a
   reading page that is PT Serif, which is design.md 6.3. Everywhere else it
   is Open Sans, which is Ben's decision of 21 September. */
.ccl-prose__h2{font-family:var(--heading-font);font-size:var(--text-2xl);font-weight:var(--heading-weight);line-height:var(--lh-h2);margin:var(--rhythm-para-to-heading) 0 var(--space-4)}
.ccl-prose__h2:first-child{margin-top:0}
.ccl-prose__h3{font-family:var(--heading-font);font-size:var(--text-xl);font-weight:var(--heading-weight);line-height:var(--lh-h3);margin:var(--space-7) 0 var(--space-4)}
.ccl-prose__link-row{display:flex;flex-wrap:wrap;gap:var(--space-5);margin:var(--space-6) 0 0}

/* ----------------------------------------------------------------- 7. BUTTONS
   design.md 5.4. 48px minimum, radius 0, Open Sans md 600, padding 14px 28px.
   ONE PRIMARY BUTTON PER SCREENFUL. Primary hover is Black, never Jasper:
   a hover must never lower contrast. Nothing shrinks on press. */
.ccl-btn{min-height:48px;padding:14px 28px;border-radius:0;font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);line-height:1;letter-spacing:var(--track-label);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background-color var(--dur-state) var(--ease),color var(--dur-state) var(--ease),border-color var(--dur-state) var(--ease)}
.ccl-btn--primary{background:var(--brick-ember);color:var(--white);border:0}
.ccl-btn--primary:hover{background:var(--black);color:var(--white)}
.ccl-btn--primary:active{background:var(--black);outline:1px solid var(--white);outline-offset:-1px}
.ccl-btn--secondary{background:transparent;color:var(--black);border:1px solid var(--black)}
.ccl-btn--secondary:hover{background:var(--black);color:var(--white)}
.ccl-btn--tertiary{background:none;border:0;padding:0;min-height:44px;color:var(--black);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ccl-btn--tertiary:hover{color:var(--brick-ember);text-decoration:underline}

/* ------------------------------------------------------------- 8. IMAGE SLOTS
   Every image in the build is a labelled slot at its final ratio, so dropping
   real photography in later causes no layout shift. Ratio classes come from
   tokens/layout.css, because two of them change at a breakpoint and a custom
   property cannot be read inside a media query.
   No stroke, no border, no frame on any photograph: design.md 7.2. */
/* A real photograph in a fixed ratio container. No stroke, no border, no
   frame: design.md 7.2. --focal moves the crop's focal point per image so a
   face is never cut by the container, which is the one thing the ratio
   classes cannot know on their own. Set it on the figure, never on the img. */
.ccl-photo{position:relative;margin:0;width:100%;overflow:hidden;background:var(--desert-storm)}
.ccl-photo > img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% var(--focal,50%)}

.ccl-slot{position:relative;width:100%;overflow:hidden;background:var(--dust-grey);display:grid;place-items:center;text-align:center;padding:var(--space-5)}
.ccl-slot__text{display:grid;gap:var(--space-2);max-width:46ch}
.ccl-slot__name{font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);line-height:var(--lh-tight);color:var(--black)}
.ccl-slot__subject{font-family:var(--font-serif);font-size:var(--text-md);line-height:1.5;color:var(--black)}
.ccl-slot__meta{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--graphite)}
.ccl-slot img{width:100%;height:100%;object-fit:cover;display:block}
/* design.md 5.5. Where a sermon or event has no photograph the card image
   area fills with solid Brick Ember carrying the reversed brandmark at 25
   percent of card width. CARD SIZE ONLY: at header width it reads as a
   rendering failure. */
.ccl-slot--brandmark{background:var(--brick-ember);padding:0}
.ccl-slot--brandmark img{width:25%;height:auto;object-fit:contain}

/* ------------------------------------------------------------------- 9. CARDS
   design.md 5.5. Image top, edge to edge, no inset, no stroke. space-5
   padding, 1px Dust Grey border, radius 0, White, no shadow. */
.ccl-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7);list-style:none;margin:0;padding:0}
/* A list item that wraps a card rather than being one stretches to the row. */
.ccl-cards > li{display:grid}
@media (min-width:768px){.ccl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ccl-cards--three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ccl-card{position:relative;background:var(--white);border:1px solid var(--dust-grey);border-radius:0;display:flex;flex-direction:column;transition:border-color var(--dur-state) var(--ease)}
.ccl-card:hover{border-color:var(--black)}
.ccl-card:active{border-color:var(--black);background:var(--desert-storm)}
.ccl-card__media{overflow:hidden}
.ccl-card__media > *{transition:transform var(--dur-image) var(--ease)}
.ccl-card:hover .ccl-card__media > *{transform:scale(var(--card-image-scale))}
.ccl-card__body{padding:var(--space-5);display:grid;gap:var(--space-2);flex:1}
.ccl-card__eyebrow{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;line-height:var(--lh-h2);color:var(--brick-ember);margin:0}
.ccl-card__title{margin:0;font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);line-height:var(--lh-h3)}
.ccl-card__title a{color:var(--black);text-decoration:none;text-underline-offset:3px}
.ccl-card:hover .ccl-card__title a{text-decoration:underline}
/* The title is a real anchor and the whole surface is clickable via an
   overlay pseudo element. design.md 5.5. */
.ccl-card__title a::after{content:"";position:absolute;inset:0}
.ccl-card__meta{font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--lh-tight);color:var(--graphite);margin:0}
.ccl-card__standfirst{font-family:var(--font-serif);font-size:var(--text-md);line-height:1.55;color:var(--graphite);margin:0}
.ccl-card__foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:var(--space-3)}
.ccl-card__play{width:28px;height:28px;background:var(--black);display:grid;place-items:center;flex:0 0 28px}
.ccl-card__play span{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--white);margin-left:2px}
/* Event card date block. design.md 5.5: day numeral Open Sans 700 2xl,
   month xs uppercase. Past events do not render. */
.ccl-card__date{display:grid;gap:var(--space-1);margin:0 0 var(--space-2)}
.ccl-card__day{font-family:var(--font-sans);font-size:var(--text-2xl);font-weight:var(--weight-bold);line-height:1;color:var(--black)}
.ccl-card__month{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--graphite)}
.ccl-card__title a:focus-visible{outline:var(--focus-width) solid var(--focus-colour);outline-offset:var(--focus-offset)}
/* Route card. The homepage's three destinations. Same shell, a serif line in
   place of the meta row. */
.ccl-card__route-line{font-family:var(--font-serif);font-size:var(--text-base-serif);line-height:1.55;color:var(--graphite);margin:0}

/* ------------------------------------------------------------ 10. TOPIC TILES
   design.md 5.6. Six fixed tiles. No icons. No counts. Minimum 88px. */
.ccl-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);list-style:none;margin:0;padding:0}
@media (min-width:768px){.ccl-topics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.ccl-topics{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ccl-topic{min-height:88px;display:grid;place-items:center;text-align:center;padding:var(--space-4);background:var(--desert-storm);color:var(--black);border:var(--border-hair);border-radius:0;font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);text-decoration:none;transition:background-color var(--dur-state) var(--ease),color var(--dur-state) var(--ease)}
.ccl-topic:hover,.ccl-topic:focus-visible{background:var(--black);color:var(--white)}

/* ----------------------------------------------------------------- 11. FILTERS
   design.md 5.7. Single select topic plus a type toggle. Filtering changes
   the URL and loads a real page, which is what keeps topic archives
   indexable. Every pill is an anchor. Pills wrap, never scroll sideways. */
.ccl-filters{display:grid;gap:var(--space-4)}
.ccl-filters__group{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
.ccl-pill{min-height:40px;display:inline-flex;align-items:center;padding:0 var(--space-4);border-radius:0;background:transparent;color:var(--black);border:1px solid var(--graphite);font-family:var(--font-sans);font-size:var(--text-md);text-decoration:none;transition:border-color var(--dur-state) var(--ease),background-color var(--dur-state) var(--ease)}
.ccl-pill:hover{border-color:var(--black);color:var(--black)}
.ccl-pill[aria-current]{background:var(--black);color:var(--white);border-color:var(--black)}
.ccl-filters__clear{justify-self:start;font-family:var(--font-sans);font-size:var(--text-md);color:var(--black);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}

/* ------------------------------------------------------------ 12. SEARCH FIELD
   design.md 5.8. Resources, the Read footer column, and the foot of every
   sermon and article. Not in the header, not in the nav panel.
   52px, 1px Graphite border, 16px so iOS Safari does not zoom on focus. */
.ccl-search{max-width:var(--w-reading)}
.ccl-search__label{display:block;font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);line-height:var(--lh-tight);color:var(--black);margin-bottom:var(--space-3)}
.ccl-search__label--hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ccl-search__field{position:relative}
.ccl-search__input{width:100%;height:52px;padding:0 52px 0 var(--space-4);background:var(--white);border:var(--border-field);border-radius:0;font-family:var(--font-sans);font-size:var(--text-input-min);color:var(--black)}
.ccl-search__input::placeholder{color:var(--graphite);opacity:1}
.ccl-search__submit{position:absolute;top:4px;right:4px;width:44px;height:44px;background:none;border:0;border-radius:0;cursor:pointer;display:grid;place-items:center}
.ccl-search--on-dark .ccl-search__label{color:var(--white)}
.ccl-search--on-dark .ccl-search__input{border:1px solid var(--dust-grey)}

/* ------------------------------------------------------------- 13. PAGINATION
   design.md 6.4. Numbered, never infinite scroll. Previous and Next are
   words, not chevrons: there is no icon set in this system. 44px hit areas. */
.ccl-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.ccl-pagination__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ccl-pagination__step{font-family:var(--font-sans);font-size:var(--text-md);color:var(--black);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.ccl-pagination__num{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-3);border:1px solid var(--dust-grey);background:transparent;color:var(--black);font-family:var(--font-sans);font-size:var(--text-md);text-decoration:none}
.ccl-pagination__num:hover{border-color:var(--black);color:var(--black)}
.ccl-pagination__num[aria-current=page]{border-color:var(--black);background:var(--black);color:var(--white);font-weight:var(--weight-semibold)}
.ccl-pagination__position{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--graphite);margin:var(--space-4) 0 0}

/* ------------------------------------------------------------ 14. EMPTY STATE
   design.md 5.5. A single Graphite md line inside a 1px Dust Grey box.
   Never a blank region. */
.ccl-empty{border:var(--border-hair);border-radius:0;padding:var(--space-5)}
.ccl-empty__heading{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);line-height:var(--lh-h3);color:var(--black);margin:0 0 var(--space-3)}
.ccl-empty__line{font-family:var(--font-sans);font-size:var(--text-md);color:var(--graphite);margin:0}

/* -------------------------------------------------------------- 15. LEADERSHIP
   design.md 6.3. A list, not a card grid. A grid of headshots implies a
   directory and the roles are unconfirmed. Must render a name with no role
   without looking broken. 4:5 portraits.
   One person is one self contained block: portrait, heading, that person's
   own paragraphs. Nothing of one person's is separated from the rest of it. */
.ccl-leaders{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-9)}
.ccl-leaders__person{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
/* One photograph of both of them heads the section, so a person's block is
   type only. Image to text is space-8, the system's own rhythm. */
.ccl-leaders__photo{margin:0 0 var(--space-8)}
.ccl-leaders__heading{font-family:var(--heading-font);font-size:var(--text-xl);font-weight:var(--heading-weight);line-height:var(--lh-h3);color:var(--black);margin:0 0 var(--space-4)}
.ccl-leaders__name{font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-bold);line-height:var(--lh-tight);letter-spacing:var(--track-label);color:var(--black);margin:var(--space-4) 0 0}
.ccl-leaders__role{font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--lh-tight);color:var(--graphite);margin:var(--space-1) 0 0}
.ccl-leaders__note{font-family:var(--font-serif);font-size:var(--text-base-serif);line-height:var(--lh-reading);color:var(--black);margin:0}
.ccl-leaders__note p{margin:0 0 var(--rhythm-para-to-para)}
.ccl-leaders__note p:last-child{margin-bottom:0}

/* ----------------------------------------------------------------- 16. NOTICE
   The visible placeholder for anything the copy files mark [Open] or blocked.
   1px Black box, xs uppercase label, serif sm Graphite body. It is a build
   device and is removed when the decision is made, not restyled. */
.ccl-notice{border:var(--border-strong);border-radius:0;padding:var(--space-5) var(--space-6);max-width:var(--w-reading)}
.ccl-notice__label{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--black);margin:0 0 var(--space-2)}
.ccl-notice__body{font-family:var(--font-serif);font-size:var(--text-sm);line-height:1.6;color:var(--graphite);margin:0}

/* --------------------------------------------------------------- 17. SPECIMEN
   The article and sermon specimens are marked NOT CHURCH TEACHING and NOT
   SUBMITTED FOR APPROVAL. Where they stand in for real archive items the mark
   travels with them. */
.ccl-specimen{display:inline-block;justify-self:start;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--black);border:var(--border-strong);padding:var(--space-1) var(--space-2);margin:0}

/* ------------------------------------------------------------------- 18. HERO
   design.md 6.2. Full bleed photograph. No text over photography: where a
   heading must sit with an image it goes in a solid Black panel at full
   opacity, occupying its own area, beneath. */
.ccl-hero__panel{background:var(--black);color:var(--white);padding:var(--space-10) var(--margin-outer)}
.ccl-hero__panel-inner{max-width:var(--w-wide);margin-inline:auto}
.ccl-hero__h1{font-family:var(--font-sans);font-size:var(--text-4xl);line-height:var(--lh-display);letter-spacing:var(--track-display);font-weight:var(--weight-bold);margin:0;max-width:24ch}
.ccl-hero__line{font-family:var(--font-serif);font-size:var(--text-lg);line-height:1.55;color:var(--white);max-width:var(--w-reading);margin:var(--space-6) 0 0}
.ccl-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:var(--space-7) 0 0}
/* The secondary button is a Black border and a Black label, which disappears
   on a Black panel. tokens/base.css already establishes .on-dark as the
   inversion hook for links and focus rings; this extends the same hook to
   the secondary button, mirroring its defined states with the two colours
   swapped. No new colour, and the hover still darkens rather than lightens.
   Recorded as decision 17: derived from the system, not defined by it. */
.on-dark .ccl-btn--secondary{color:var(--white);border-color:var(--white)}
.on-dark .ccl-btn--secondary:hover{background:var(--white);color:var(--black)}

/* PHOTOGRAPHY BAND. Full bleed, edge to edge, no stroke, no frame, no gap.
   Three photographs, static. Not a slider: carousels and anything that moves
   without being touched are banned. */
.ccl-photos{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.ccl-photos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The featured card on the homepage sits at content width so the latest
   sermon reads larger than the five beneath it. Same card, wider column. */
.ccl-sermons__featured{max-width:var(--w-content)}

/* Latest sermon, card plus list. Ben, 20 September, decision 23. The latest
   sermon keeps its card at content width. The five others are a plain list
   beside it on desktop, sized to match the card, and fall underneath it on
   mobile. A list item is not a card, so the design system's every card
   carries an image rule does not reach them, which is what makes this
   buildable before any photography exists. */
.ccl-sermons__latest{display:grid;gap:var(--space-7)}
@media (min-width:1024px){
  .ccl-sermons__latest{grid-template-columns:minmax(0,var(--w-content)) minmax(0,1fr);gap:var(--space-8);align-items:start}
  .ccl-sermons__latest .ccl-sermons__featured{max-width:none}
  .ccl-sermons__more{align-self:stretch}
}
.ccl-sermons__more{display:flex;flex-direction:column;min-width:0}
.ccl-sermon-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:var(--border-hair);flex:1 1 auto}
.ccl-sermon-list__item{border-bottom:var(--border-hair);flex:1 1 0;display:flex;align-items:center;min-height:56px}
.ccl-sermon-list__link{display:block;width:100%;padding:var(--space-4) 0;text-decoration:none}
.ccl-sermon-list__link:hover .ccl-sermon-list__title,
.ccl-sermon-list__link:focus-visible .ccl-sermon-list__title{color:var(--brick-ember);text-decoration:underline;text-underline-offset:3px}
.ccl-sermon-list__title{display:block;font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-semibold);line-height:1.35;color:var(--black);margin:0}
.ccl-sermon-list__tag{display:block;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--graphite);margin:var(--space-2) 0 0}

/* --------------------------------------------------------------- 18b. SUNDAY
   What a Sunday morning is actually like. Ben, 20 September, decision 25 and
   open item 22. Every line here is verbatim from sundays.md or faqs.md. Four
   short facts, then the link on to Sundays for the rest. Not cards: there is
   no photography for them and a card without an image is not permitted. */
.ccl-sunday{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0 0 var(--space-8)}
/* Four items on one row at lg, two by two in between. auto-fit alone breaks
   three plus an orphan at laptop widths, which reads as a mistake. */
@media (min-width:768px) and (max-width:1199px){
  .ccl-sunday{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.ccl-sunday__item{margin:0;padding:var(--space-6) 0 0;border-top:var(--rule-accent) solid var(--brick-ember)}
.ccl-sunday__label{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-bold);line-height:1.35;color:var(--black);margin:0 0 var(--space-3)}
.ccl-sunday__text{font-family:var(--font-serif);font-size:var(--text-base);line-height:1.65;color:var(--black);margin:0}
.ccl-sunday__text + .ccl-sunday__text{margin-top:var(--space-4)}
.ccl-sunday__item .ccl-notice{max-width:none;margin:0 0 var(--space-4)}

/* --------------------------------------------------------------- 18c. HERO
   Footage with the words on top of it. Ben, 21 September.
   THIS IS A CHANGE TO THE BRAND AND NOT AN EXCEPTION TO IT. The design
   system says no text over photography, and that a heading which must sit
   with a picture goes in a solid Black panel of its own, beside or beneath.
   It also bans every device normally used to make overlaid text readable:
   no scrim, no gradient, no tint, no blur, no reduced opacity image. Ben
   overruled all of that in writing and asked for the words dead centre so
   he can judge it. Nothing is doing any work here to help legibility, by
   instruction. Recorded as open item 28. */
.ccl-hero{position:relative;background:var(--black)}
/* The overlay is in flow, not absolutely positioned, so the stage grows with
   whatever copy is in it and min-height acts as a floor rather than a
   ceiling. Absolute positioning here cannot grow the stage, which pushed the
   words off centre and would clip the buttons the moment Ben's real hero
   copy runs longer than this placeholder. */
.ccl-hero__stage{position:relative;display:grid;margin:0;overflow:hidden;min-height:clamp(560px,82vh,900px)}
.ccl-hero__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.ccl-hero__overlay{position:relative;display:grid;place-items:center;padding:var(--space-9) var(--margin-outer);text-align:center}
.ccl-hero__overlay-inner{max-width:var(--w-content);margin-inline:auto}
.ccl-hero__overlay .ccl-hero__h1{color:var(--white);max-width:none;margin:0}
/* tokens/base.css sets p{text-align:left} to keep everything ragged right, and
   an element rule beats the centring this overlay inherits. A class rule wins it
   back for this one paragraph, with no !important needed. */
.ccl-hero__overlay .ccl-hero__line{margin-inline:auto;text-align:center}
.ccl-hero__overlay .ccl-hero__actions{justify-content:center}
/* Removed, not reduced. The design system is explicit about that. */
@media (prefers-reduced-motion:reduce){
  .ccl-hero__video{animation:none}
}
/* The black band carries the traffic paragraph now, so its prose has to
   invert with the band. */
.ccl-band--black .ccl-prose,
.ccl-band--black .ccl-prose p{color:var(--white)}

/* --------------------------------------------------------------- 19. TAGLINE
   The only printed strapline on the site. One band, centred, nothing else in
   it. "And it is beautiful" is never set in type. */
.ccl-tagline{display:flex;justify-content:center}
.ccl-tagline img{height:clamp(56px,9vw,112px);width:auto}

/* ---------------------------------------------------------- 20. VISIT PROMPT
   The one conversion block in the system, and it is quiet. No urgency device
   of any kind. Carries the page's only primary button. */
.ccl-visit{background:var(--desert-storm);border-radius:0;padding:var(--space-8) var(--space-6);display:grid;gap:var(--space-5);justify-items:start;max-width:var(--w-content)}
.ccl-visit__heading{font-family:var(--heading-font);font-size:var(--text-2xl);font-weight:var(--heading-weight);line-height:var(--lh-h2);letter-spacing:var(--track-h2);color:var(--black);margin:0}
.ccl-visit__body{font-family:var(--font-serif);font-size:var(--text-lg);line-height:1.55;color:var(--graphite);max-width:var(--w-reading)}
.ccl-visit__body p{margin:0}

/* ------------------------------------------------------------ 21. PULL QUOTE
   PT Serif xl, 400 italic, 1.4. No quotation mark ornament, no oversized
   punctuation, no attribution photograph. */
.ccl-pullquote{margin:0;max-width:var(--w-reading)}
.ccl-pullquote blockquote{margin:0;font-family:var(--font-serif);font-size:var(--text-xl);font-style:italic;font-weight:var(--weight-regular);line-height:var(--lh-quote);color:var(--black)}

/* -------------------------------------------------- 21b. ARTICLE PULL QUOTE
   One treatment. Ben chose it on 21 September from three and the other two
   were deleted rather than left in the file.
   THE SENTENCE IS ALWAYS LIFTED WORD FOR WORD FROM THE ARTICLE BODY. A pull
   quote is a repetition of something already said on the page, never new
   writing, because the copy is signed and a pull quote is not a place to
   write around that.
   aria-hidden, because a screen reader should not read the same sentence
   twice: it is already in the flow a paragraph or two above. */
.ccl-pull{margin:var(--space-9) 0;max-width:var(--w-reading)}
.ccl-pull__text{margin:0;font-family:var(--font-serif);color:var(--black)}
.ccl-pull__attrib{margin:var(--space-4) 0 0;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--graphite)}

/* Oversized opening quote mark in Brick Ember, the text set beside it, and
   the whole thing inset from both sides so the quote sits narrower than the
   column it interrupts. Ben, 21 September: no rules, they break the flow.
   BEN HAS SEEN THIS AND CHOSE IT. design.md's own pull quote component,
   section 21 above, says no quotation mark ornament and no oversized
   punctuation. This is both, so it is a deviation from the design system and
   not an application of it. Recorded in handoff.md, open item 37. */
.ccl-pull--mark{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-5);align-items:start;padding-inline:var(--space-6)}
.ccl-pull--mark .ccl-pull__mark{font-family:var(--font-serif);font-weight:var(--weight-bold);font-size:var(--text-4xl);line-height:0.72;color:var(--brick-ember)}
.ccl-pull--mark .ccl-pull__text{font-size:var(--text-xl);line-height:var(--lh-quote);font-style:italic;font-weight:var(--weight-regular);max-width:46ch;padding-right:var(--space-5)}

/* ------------------------------------------------------------------- 22. STUB
   design.md 5.13. White. space-10 top padding. H1 3xl. One PT Serif line at
   lg. space-8. Three tertiary links. space-7. Search field. Nothing else.
   No image. The three links never change and never become five. */
.ccl-stub{padding:var(--space-10) var(--margin-outer) var(--space-10)}
.ccl-stub__inner{max-width:var(--w-content);margin-inline:auto}
.ccl-stub__h1{font-family:var(--font-sans);font-size:var(--text-3xl);line-height:var(--lh-h1);letter-spacing:var(--track-h1);font-weight:var(--weight-bold);margin:0 0 var(--space-5)}
.ccl-stub__line{font-family:var(--font-serif);font-size:var(--text-lg);line-height:1.55;color:var(--graphite);max-width:var(--w-reading);margin:0}
.ccl-stub__links{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-8)}
.ccl-stub__search{margin-top:var(--space-7)}

/* -------------------------------------------------------- 23. SPECIMEN MARK
   The wrapper that carries the specimen notice at the top and the foot of
   the article and the sermon. Removed with the specimen, not restyled. */
.ccl-post-mark{padding:var(--space-7) var(--margin-outer) 0}
.ccl-post-mark--foot{padding:0 var(--margin-outer) var(--space-9)}
.ccl-post-mark > .ccl-notice{margin-inline:auto}

/* ------------------------------------------------------- 24. POST HEADER
   single-article.md 1 and single-sermon.md 1. The typographic header, which
   is what renders when no header photograph exists, and that is every
   article and every sermon at launch. H1 on Desert Storm. PT Serif, because
   an article H1 is the start of the reading, not an interface label.
   The solid Brick Ember block is a card device: at header width it reads as
   a rendering failure and is never used here. */
.ccl-post-head{background:var(--desert-storm);padding:var(--space-9) var(--margin-outer) var(--space-10);margin-top:var(--space-7)}
.ccl-post-head__inner{max-width:var(--w-reading);margin-inline:auto}
.ccl-post-head__eyebrow{margin:var(--space-7) 0 0}
/* The post H1 is Open Sans on a serif headed page too. Ben, 21 September. */
.ccl-post-head__h1{font-family:var(--font-sans);font-size:var(--text-3xl);line-height:var(--lh-h1);letter-spacing:var(--track-h2);font-weight:var(--weight-bold);margin:var(--space-4) 0 var(--space-6);text-wrap:pretty}
.ccl-post-head__meta{font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--lh-tight);color:var(--graphite);margin:0}
.ccl-post-head__standfirst{font-family:var(--font-serif);font-size:var(--text-lg);line-height:1.55;color:var(--graphite);margin:var(--space-5) 0 0}
/* The no recording state. A line, not a box: the box is the empty state for
   a list, and a sermon without audio is not an empty list. */
.ccl-post-head__no-audio{font-family:var(--font-serif);font-size:var(--text-sm);font-style:italic;line-height:1.6;color:var(--graphite);margin:var(--space-7) 0 0}

/* --------------------------------------------------------- 25. POST BODY
   The reading column for a single article or a single sermon. 680, PT Serif,
   1.75. Headings inside the flow are PT Serif, per design.md 6.3. */
.ccl-post{max-width:var(--w-reading);margin-inline:auto;padding:var(--space-10) var(--margin-outer)}
.ccl-post__rule{height:var(--rule-accent);width:96px;background:var(--brick-ember);margin:0 0 var(--space-9)}
.ccl-post__rule--after-scripture{margin:var(--space-10) 0 var(--space-9)}
.ccl-post__flow{font-family:var(--font-serif);font-size:var(--text-base-serif);line-height:var(--lh-reading);color:var(--black)}
.ccl-post__flow > p{margin:0 0 var(--rhythm-para-to-para)}
.ccl-post__flow > p:last-child{margin-bottom:0}
.ccl-post__h2{font-family:var(--heading-font);font-size:var(--text-2xl);font-weight:var(--heading-weight);line-height:var(--lh-h2);margin:var(--rhythm-para-to-heading) 0 var(--space-4)}
.ccl-post__h2--first{margin:0 0 var(--space-6)}

/* --------------------------------------------------------- 26. SCRIPTURE
   design.md 3. PT Serif 1rem, 1.75, Black, 3px DUST GREY left rule. The rule
   is never Brick Ember: red on a left rule is the form error state, and a
   passage of scripture is not an error. Reference beneath in Open Sans sm
   Graphite. The translation is an open item and is not named. */
.ccl-scripture{margin:0;border-left:3px solid var(--dust-grey);padding-left:var(--space-5);max-width:var(--w-reading)}
.ccl-scripture__quote{margin:0;font-family:var(--font-serif);font-size:1rem;line-height:var(--lh-reading);color:var(--black)}
.ccl-scripture__ref{margin-top:var(--space-2);font-family:var(--font-sans);font-size:var(--text-sm);line-height:1.45;color:var(--graphite)}

/* ---------------------------------------------------------- 27. POST FOOT
   design.md 5.12. Secondary buttons, side by side, space-3 apart, wrapping
   to full width below. Renders correctly with both buttons, one, or none:
   nothing present means no row, never an empty row.
   The copy link button is the one control here that needs JavaScript, so it
   ships hidden and the script reveals it. With JavaScript off there is no
   dead control, and nothing about the layout depends on it. */
.ccl-post-foot{margin-top:var(--space-10);padding-top:var(--space-7);border-top:1px solid var(--dust-grey)}
.ccl-post-foot__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* .ccl-btn sets display, which would defeat the hidden attribute on its own. */
.ccl-btn[hidden]{display:none}
.ccl-post-foot__line{font-family:var(--font-serif);font-size:var(--text-sm);font-style:italic;line-height:1.6;color:var(--graphite);margin:var(--space-5) 0 0}
.ccl-post-foot__filed{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-7)}
.ccl-post-foot__filed-label{font-family:var(--font-sans);font-size:var(--text-md);color:var(--graphite)}

/* -------------------------------------------------------- 28. POST SEARCH
   The search field at the foot of every article and every sermon, with its
   own label. Not the footer search, and not the header: there is no search
   in the header or the nav panel. */
.ccl-post-search{padding:var(--space-10) var(--margin-outer)}
.ccl-post-search__inner{max-width:var(--w-reading);margin-inline:auto}
.ccl-post-search__heading{font-family:var(--heading-font);font-size:var(--text-xl);font-weight:var(--heading-weight);line-height:var(--lh-h3);margin:0 0 var(--space-6)}

/* ------------------------------------------------------------------ 30. VIDEO
   A YouTube video where NOTHING LOADS FROM YOUTUBE UNTIL IT IS CLICKED,
   except the poster image, which is one request to their servers on page
   load. Ben accepted that on 21 September. Self host the poster before
   launch and the page makes no third party request at all until a click.
   The facade is a real link to the video, so with JavaScript off a click
   opens it on YouTube rather than doing nothing. With JavaScript on the
   script swaps a youtube-nocookie iframe into the same box.
   The play control is a solid Black panel, which is the device the design
   system already uses when type has to sit with a photograph. It is not red:
   red must keep space-6 clear of any image edge, and this sits on the image.
   16:9, radius 0, no shadow, no scrim, no tint. */
.ccl-video-band{padding:var(--space-9) var(--margin-outer) 0}
.ccl-video{margin:0 auto;max-width:var(--w-content)}
.ccl-video__frame{position:relative;display:block;aspect-ratio:16/9;background:var(--black);overflow:hidden}
.ccl-video__frame img{display:block;width:100%;height:100%;object-fit:cover}
.ccl-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ccl-video__play{position:absolute;left:var(--space-5);bottom:var(--space-5);display:inline-flex;align-items:center;gap:var(--space-3);min-height:48px;padding:0 var(--space-5);background:var(--black);color:var(--white);font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:var(--track-label)}
.ccl-video__frame:hover .ccl-video__play{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ccl-video__frame:focus-visible{outline:var(--focus-width) solid var(--focus-colour);outline-offset:var(--focus-offset)}
.ccl-video__triangle{width:0;height:0;border-left:10px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
/* The iframe the script swaps in, in place of the facade. */
.ccl-video__embed{display:block;width:100%;aspect-ratio:16/9;border:0}

/* The photograph between the lede and the body of an article. Content width,
   not full bleed, so the reading column still leads the page. No stroke, no
   frame: design.md 7.2. space-8 to the text block below it. */
.ccl-post-figure{max-width:var(--w-content);margin:var(--space-9) auto 0;padding-inline:var(--margin-outer)}

/* ----------------------------------------------------------- 29. NOT FOUND
   design.md 5.13. Its own pattern, not the stub with a swapped heading: the
   stub returns HTTP 200 at a real URL and this returns HTTP 404 at an
   address that does not exist. Same layout, same tone, nothing else shared.
   No image, no hero, no card. Nothing that makes an error look like a
   destination. The three links never become five. */
.ccl-notfound{padding:var(--space-10) var(--margin-outer)}
.ccl-notfound__inner{max-width:var(--w-reading);margin-inline:auto}
.ccl-notfound__h1{font-family:var(--font-sans);font-size:var(--text-3xl);line-height:var(--lh-h1);letter-spacing:var(--track-h1);font-weight:var(--weight-bold);margin:0}
.ccl-notfound__line{font-family:var(--font-serif);font-size:var(--text-base-serif);line-height:var(--lh-reading);color:var(--black);margin:var(--space-6) 0 0}
.ccl-notfound__line--second{margin-top:var(--space-5)}
.ccl-notfound__links{display:flex;flex-wrap:wrap;gap:var(--space-6);margin:var(--space-8) 0 0}
.ccl-notfound__search{margin-top:var(--space-8)}

/* ------------------------------------------------------- 30. SHARED UTILITIES
   Used by more than one pattern. Kept to the minimum: this is not a utility
   framework, and the brief forbids one. */
.ccl-stack-block{margin-top:var(--rhythm-block-to-block)}
.ccl-stack-section{margin-top:var(--rhythm-para-to-heading)}
.ccl-link-row{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.ccl-link-row--centre{justify-content:center}
.ccl-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------ 31. NOT BUILT YET MARKER
   REVIEW DEVICE. DELETE AT CONVERSION, along with every ccl-todo span in the
   pages and the ccl-review-key line in the footer. It exists so that Kip can
   see which links land on a page nobody has written yet, without clicking
   one to find out.
   currentColor and no new size, so it reads the same on White, on Desert
   Storm and on the Black footer and nav panel, and no colour is introduced
   that the system does not have. The asterisk carries aria-hidden and the
   words sit beside it for a screen reader. */
.ccl-todo{font-family:var(--font-sans);font-weight:var(--weight-bold);margin-left:var(--space-1)}
.ccl-review-key{font-weight:var(--weight-bold)}