/* Christ Church Loresho design tokens.
   The nine token files from the design system, concatenated in the order the
   built pages linked them, and otherwise untouched. Do not edit this file: it
   is a vendored copy and an edit here is lost the next time it is refreshed.
   Override in ccl-state.css instead. */

/* ===== tokens/fonts.css ===== */
/* Fonts. design.md 2.2. Two families, self hosted, no third face.

   Self hosted WOFF2, latin subset, font-display: swap. No third party origin,
   no @import, no render blocking request chain.

   Eight faces are declared. Only three are ever fetched by a normal page:
   Open Sans 400 and 700, PT Serif 400. The rest load only where they are
   actually used, because an unused @font-face is never downloaded.

   The declared set is deliberately narrow. The type scale uses 400, 600 and
   700 only, so 300, 500 and 800 are not declared even though the binaries
   exist. A system that declares a weight it forbids invites drift. */

@font-face{font-family:"Open Sans";src:url("../fonts/open-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/open-sans-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/open-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/open-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PT Serif";src:url("../fonts/pt-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PT Serif";src:url("../fonts/pt-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PT Serif";src:url("../fonts/pt-serif-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PT Serif";src:url("../fonts/pt-serif-700-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

/* Preload in the document head, in this order, nothing else:
   open-sans-400.woff2, pt-serif-400.woff2, open-sans-700.woff2 */

:root{
  --font-sans:"Open Sans",-apple-system,"Segoe UI",Roboto,sans-serif; /* @kind font */
  --font-serif:"PT Serif",Georgia,"Times New Roman",serif; /* @kind font */
}


/* ===== tokens/colours.css ===== */
/* Colour; design.md 2.1 and logo.md. Seven web tokens. There is no eighth.
   Onyx and Alabaster Grey are recorded in logo.md as supporting brand colours
   but are NOT part of the seven-token web palette. They are namespaced
   --brand-* so they cannot be reached by accident in a web layout.

   THERE IS NO GREEN IN THIS SYSTEM. The garden feeling comes from space,
   light, photography and slow motion. Never from a colour token. */

:root{
  /* Base values */
  --white:#FFFFFF; /* @kind color */ /* CMYK 0 0 0 0 */
  --desert-storm:#F7F7F7; /* @kind color */ /* CMYK 0 0 0 3 */
  --black:#000000; /* @kind color */ /* CMYK 60 40 40 100 (rich black) */
  --graphite:#3B3838; /* @kind color */ /* CMYK not confirmed; see readme caveats */
  --brick-ember:#C40A0A; /* @kind color */ /* CMYK 0 95 95 23 */
  --jasper:#E52E2E; /* @kind color */ /* CMYK 0 80 80 10 */
  --dust-grey:#D9D1D1; /* @kind color */ /* CMYK 0 4 4 15 */

  /* Supporting brand colours. Print and identity contexts only. */
  --brand-onyx:#1A1717; /* @kind color */ /* CMYK 0 12 12 90 */
  --brand-alabaster-grey:#EDE5E5; /* @kind color */ /* CMYK not confirmed; see readme caveats */

  /* Semantic aliases; reach for these in layout, not the base values */
  --surface:var(--white); /* @kind color */
  --surface-alt:var(--desert-storm); /* @kind color */ /* alternate section band only */
  --surface-invert:var(--black); /* @kind color */ /* one black band per page maximum */
  --surface-accent:var(--brick-ember); /* @kind color */ /* nav panel and card fallback only */

  --text:var(--black); /* @kind color */
  --text-meta:var(--graphite); /* @kind color */ /* meta, captions, helper, error */
  --text-invert:var(--white); /* @kind color */
  --text-accent:var(--brick-ember); /* @kind color */ /* eyebrows, links, never body copy */
  --text-quiet-invert:var(--dust-grey); /* @kind color */ /* footer column heads, confessional */

  --line:var(--dust-grey); /* @kind color */ /* decorative rules, card edges */
  --line-field:var(--graphite); /* @kind color */ /* interactive boundaries */
  --line-strong:var(--black); /* @kind color */

  --accent:var(--brick-ember); /* @kind color */
  --accent-hover:var(--jasper); /* @kind color */ /* large text and non-text only */

  /* Proportion is roughly 60-30-10. White or Black dominant, Brick Ember
     used deliberately. Brick Ember is never a section band on the website. */
}


/* ===== tokens/typography.css ===== */
/* Type scale and typographic roles; design.md 2.3 and 3.
   Fluid. Mobile ratio 1.2, desktop 1.25. Nine presets.
   The split rule: anything read at more than roughly 150 words is PT Serif.
   Everything else is Open Sans. */

:root{
  --text-xs:0.75rem; /* @kind font */
  --text-sm:0.8125rem; /* @kind font */
  --text-md:0.9375rem; /* @kind font */
  --text-base:1rem; /* @kind font */ /* interface */
  --text-base-serif:1.0625rem; /* @kind font */ /* long form, rises to 1.1875rem at lg */
  --text-lg:clamp(1.125rem,2.5vw,1.3125rem); /* @kind font */
  --text-xl:clamp(1.25rem,3vw,1.625rem); /* @kind font */
  --text-2xl:clamp(1.5rem,4vw,2.25rem); /* @kind font */
  --text-3xl:clamp(1.875rem,5vw,3rem); /* @kind font */
  --text-4xl:clamp(2.25rem,7vw,4.5rem); /* @kind font */

  /* Minimum interactive font size. Below 16px iOS Safari zooms on focus. */
  --text-input-min:16px; /* @kind font */

  --lh-display:1.0; /* @kind font */
  --lh-nav:1.15; /* @kind font */
  --lh-h1:1.08; /* @kind font */
  --lh-h1-serif:1.15; /* @kind font */
  --lh-h2:1.2; /* @kind font */
  --lh-h3:1.3; /* @kind font */
  --lh-tight:1.4; /* @kind font */
  --lh-body:1.65; /* @kind font */ /* interface body */
  --lh-reading:1.75; /* @kind font */ /* long form body */
  --lh-quote:1.4; /* @kind font */

  --track-display:-0.03em; /* @kind font */
  --track-nav:-0.02em; /* @kind font */
  --track-h1:-0.02em; /* @kind font */
  --track-h2:-0.01em; /* @kind font */
  --track-normal:0; /* @kind font */
  --track-label:0.01em; /* @kind font */
  --track-caps:0.1em; /* @kind font */ /* eyebrows and footer column heads only */

  --weight-regular:400; /* @kind font */
  --weight-semibold:600; /* @kind font */
  --weight-bold:700; /* @kind font */

  /* Reading measure capped at 68 characters, roughly 680px at PT Serif 19px. */
  --measure:68ch; /* @kind font */
}

@media (min-width:1024px){
  :root{--text-base-serif:1.1875rem}
}


/* ===== tokens/spacing.css ===== */
/* Spacing; design.md 2.4 and 4.3. 4px base, ten steps.
   Section padding is the single biggest lever on calm. Do not reduce it to
   fit more in. Cut content instead. */

:root{
  --space-1:4px; /* @kind spacing */
  --space-2:8px; /* @kind spacing */
  --space-3:12px; /* @kind spacing */
  --space-4:16px; /* @kind spacing */
  --space-5:24px; /* @kind spacing */
  --space-6:32px; /* @kind spacing */
  --space-7:48px; /* @kind spacing */
  --space-8:64px; /* @kind spacing */
  --space-9:96px; /* @kind spacing */
  --space-10:128px; /* @kind spacing */

  --space-section:clamp(64px,10vw,128px); /* @kind spacing */

  /* Vertical rhythm, design.md 4.3 */
  --rhythm-heading-to-para:var(--space-3); /* @kind spacing */
  --rhythm-para-to-para:var(--space-5); /* @kind spacing */
  --rhythm-para-to-heading:var(--space-8); /* @kind spacing */
  --rhythm-block-to-block:var(--space-7); /* @kind spacing */
  --rhythm-image-to-caption:var(--space-2); /* @kind spacing */
  --rhythm-bleed-to-text:var(--space-8); /* @kind spacing */

  /* Minimum distance between any red element and any image edge. */
  --keepaway-red-image:var(--space-6); /* @kind spacing */
}


/* ===== tokens/layout.css ===== */
/* Layout; design.md 2.6 and 4. */

:root{
  --w-reading:680px; /* @kind spacing */ /* all long form */
  --w-content:720px; /* @kind spacing */ /* theme.json contentSize */
  --w-wide:1200px; /* @kind spacing */ /* theme.json wideSize */
  --w-full:100vw; /* @kind spacing */ /* photography and the nav panel only */

  --gutter:16px; /* @kind spacing */
  --margin-outer:24px; /* @kind spacing */
  --columns:4; /* @kind other */

  --header-h:64px; /* @kind spacing */

  /* Image ratios; design.md 7.1 */
  --ratio-hero-mobile:4/5; /* @kind other */
  --ratio-hero:16/9; /* @kind other */
  --ratio-card:16/9; /* @kind other */
  --ratio-header-mobile:3/2; /* @kind other */
  --ratio-portrait:4/5; /* @kind other */ /* leadership only */
}

@media (min-width:768px){
  :root{
    --columns:8; /* @kind other */
    --gutter:24px; /* @kind spacing */
    --margin-outer:40px; /* @kind spacing */
  }
}
@media (min-width:1024px){
  :root{
    --columns:12; /* @kind other */
    --gutter:32px; /* @kind spacing */
    --margin-outer:56px; /* @kind spacing */
    --header-h:88px; /* @kind spacing */
  }
}

/* Breakpoints, for reference. CSS custom properties cannot be used in media
   queries, so these are written out at each use site.
   sm 480px · md 768px cards two up · lg 1024px cards three up · xl 1280px cap
   There is no nav breakpoint. The panel is identical at every width. */

/* Ratio classes. A CSS custom property cannot be read inside a media query,
   so the responsive pairs from design.md 7.1 live here as classes and
   ImageSlot reaches for them by name. Cards stay 16:9 on every screen: that
   is a [Fact] and the client confirmed it again. */
.ccl-ratio-card{aspect-ratio:16/9}
.ccl-ratio-portrait{aspect-ratio:4/5}
.ccl-ratio-square{aspect-ratio:1/1}
.ccl-ratio-hero{aspect-ratio:4/5}
.ccl-ratio-header{aspect-ratio:3/2}
@media (min-width:768px){
  .ccl-ratio-hero{aspect-ratio:16/9}
  .ccl-ratio-header{aspect-ratio:16/9}
}
@media (min-width:1024px){
  .ccl-ratio-hero{max-height:78vh}
}

/* The nav panel holds six links at display size plus two lines of practical
   detail. On a short screen that does not fit, and the client chose shrinking
   the links over scrolling the panel. Height, not width: a landscape phone is
   the real constraint. */
.ccl-nav-link{font-size:var(--text-4xl)}
.ccl-nav-row{min-height:64px}
@media (max-height:780px){
  .ccl-nav-link{font-size:var(--text-2xl)}
  .ccl-nav-row{min-height:56px}
}
@media (max-height:620px){
  .ccl-nav-link{font-size:var(--text-xl)}
  .ccl-nav-row{min-height:48px}
}

/* Footer columns. Four tracks of auto-fit minmax(190px, 1fr) computed to
   three at a 924px viewport, orphaning the fourth column on its own row.
   Fixed track counts instead: one column on a small phone, a 2x2 block
   through the middle of the range, four across at lg. */
.ccl-footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7)}
@media (max-width:479px){
  .ccl-footer-cols{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1024px){
  .ccl-footer-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* ===== tokens/borders.css ===== */
/* Borders, radii, focus; design.md 2.5.

   RADIUS IS 0. EVERYWHERE. NO EXCEPTIONS, including the audio track and form
   fields. The mark is two hard edged blocks. A rounded corner contradicts it.

   NO SHADOWS. Depth is 1px borders and background bands. There is no shadow
   token in this system and adding one is a change to the brand, not a tweak. */

:root{
  --radius:0; /* @kind radius */

  --border-hair:1px solid #D9D1D1; /* @kind other */ /* decorative, card edges, dividers */
  --border-field:1px solid #3B3838; /* @kind other */ /* interactive boundaries */
  --border-strong:1px solid #000000; /* @kind other */
  --border-accent:1px solid #C40A0A; /* @kind other */

  --rule-accent:4px; /* @kind spacing */ /* Brick Ember rule above section headings and images */
  --rule-scripture:3px; /* @kind spacing */ /* Dust Grey left rule on scripture blocks */
  --rule-error:3px; /* @kind spacing */ /* Brick Ember left rule on error messages */

  --focus-width:2px; /* @kind spacing */
  --focus-colour:#000000; /* @kind color */
  --focus-colour-invert:#FFFFFF; /* @kind color */ /* on Black or Brick Ember panels */
  --focus-offset:2px; /* @kind spacing */
}


/* ===== tokens/motion.css ===== */
/* Motion; design.md 5.14. Slow, small, never asks for attention.
   Total JavaScript across the whole site is three behaviours: the nav panel
   toggle, the copy link button, the audio player. Everything else is CSS.

   Banned: parallax, scroll hijacking, counters, carousels, autoplaying
   sliders, modals other than the nav panel, anything that moves untouched. */

:root{
  --dur-state:150ms; /* @kind other */ /* hover and focus colour changes */
  --dur-transition:200ms; /* @kind other */ /* cross document view transitions */
  --dur-image:300ms; /* @kind other */ /* card image scale to 1.02 */
  --dur-entry:400ms; /* @kind other */ /* section entry */
  --dur-rule:600ms; /* @kind other */ /* the rule that draws itself */
  --ease:ease-out; /* @kind other */ /* no bounce, no overshoot, anywhere */

  --entry-shift:12px; /* @kind other */ /* translateY on section entry */
  --nav-link-rise:4px; /* @kind other */ /* nav panel link hover */
  --card-image-scale:1.02; /* @kind other */
}

@media (prefers-reduced-motion:reduce){
  :root{
    --dur-state:0ms; /* @kind other */
    --dur-transition:0ms; /* @kind other */
    --dur-image:0ms; /* @kind other */
    --dur-entry:0ms; /* @kind other */
    --dur-rule:0ms; /* @kind other */
    --entry-shift:0px; /* @kind spacing */
    --nav-link-rise:0px; /* @kind spacing */
    --card-image-scale:1; /* @kind other */
  }
}

/* The two scroll driven behaviours from design.md 5.14, built. Both run on
   the compositor from a view() timeline: no IntersectionObserver, no script.
   Where the timeline is unsupported the content is simply already there,
   which is the correct fallback and the reason for the @supports block. */
@keyframes ccl-entry{from{opacity:0;transform:translateY(var(--entry-shift))}to{opacity:1;transform:none}}
@keyframes ccl-rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.ccl-entry{animation:ccl-entry var(--dur-entry) var(--ease) both;animation-timeline:view();animation-range:entry 0% cover 22%}
.ccl-rule{transform-origin:left center;animation:ccl-rule-draw var(--dur-rule) var(--ease) both;animation-timeline:view();animation-range:entry 0% cover 18%}

@supports not (animation-timeline:view()){
  .ccl-entry,.ccl-rule{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .ccl-entry,.ccl-rule{animation:none}
}


/* ===== tokens/print.css ===== */
/* Print; extension beyond design.md, which is web only.
   Confirmed with the client, September 2026:
   · A-series only. Kenya is metric.
   · Posters and roll-up banners MAY carry a full Brick Ember field.
   · Service sheet, welcome card, business card and letterhead stay
     white or black dominant. Red is accent, rules and small blocks only.
   · Posters are photograph-led. The image fills the sheet and all type sits
     in a solid Black or White panel. Never type over the photograph.

   Radius 0 and no shadows hold in print exactly as they do on the web. */

:root{
  /* Trim sizes */
  --paper-a3-w:297mm; /* @kind spacing */
  --paper-a3-h:420mm; /* @kind spacing */
  --paper-a4-w:210mm; /* @kind spacing */
  --paper-a4-h:297mm; /* @kind spacing */
  --paper-a5-w:148mm; /* @kind spacing */
  --paper-a5-h:210mm; /* @kind spacing */
  --paper-a6-w:105mm; /* @kind spacing */
  --paper-a6-h:148mm; /* @kind spacing */
  --card-business-w:85mm; /* @kind spacing */
  --card-business-h:55mm; /* @kind spacing */
  --banner-w:850mm; /* @kind spacing */
  --banner-h:2000mm; /* @kind spacing */

  /* Production */
  --bleed:3mm; /* @kind spacing */
  --safe-a3:15mm; /* @kind spacing */
  --safe-a4:12mm; /* @kind spacing */
  --safe-a5:10mm; /* @kind spacing */
  --safe-a6:8mm; /* @kind spacing */
  --safe-business:5mm; /* @kind spacing */
  --banner-safe-top:200mm; /* @kind spacing */ /* below this is hidden by the cassette */

  /* Print type minimums. Nothing smaller than these goes to press. */
  --print-min-body:9pt; /* @kind other */
  --print-min-caption:7pt; /* @kind other */
  --print-body:10.5pt; /* @kind other */
  --print-reading:11pt; /* @kind other */

  /* Print spacing; the same generosity as the web, in millimetres */
  --print-space-1:2mm; /* @kind spacing */
  --print-space-2:4mm; /* @kind spacing */
  --print-space-3:6mm; /* @kind spacing */
  --print-space-4:10mm; /* @kind spacing */
  --print-space-5:16mm; /* @kind spacing */
  --print-space-6:24mm; /* @kind spacing */
}

/* CMYK, supplied by the client September 2026. Recorded here as reference
   only. CSS cannot express CMYK, so artwork sent to press must carry these
   values set in the layout application, not converted from the hex.

   Black            CMYK 60 40 40 100   (rich black; do not use flat K100
                                         on large fields, it prints washy)
   Brick Ember      CMYK  0 95 95  23
   White            CMYK  0  0  0   0
   Desert Storm     CMYK  0  0  0   3
   Onyx             CMYK  0 12 12  90
   Dust Grey        CMYK  0  4  4  15
   Jasper           CMYK  0 80 80  10

   NOT CONFIRMED; do not send to press without checking:
   Graphite #3B3838        supplied as CMYK 0 5 5 7, which prints near white
   Alabaster Grey #EDE5E5  supplied as CMYK 0 3 3 7
   These two values do not correspond to their hex and look transposed or
   mistyped. Kenyan Grafik should confirm. See readme.md caveats.

   Pantone equivalents are not specified anywhere in the brand system. */

@page{margin:0}


/* ===== tokens/base.css ===== */
/* Base element defaults. The smallest possible reset plus the typographic
   defaults design.md 3 fixes. Nothing decorative belongs in this file. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--lh-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4,p,figure,blockquote{margin:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}

/* Radius is 0 everywhere, including form controls, which carry a UA radius. */
input,textarea,select,button{border-radius:0;font:inherit;color:inherit}

/* Links. Body links are Black with a 1px underline at 3px offset, hover
   Brick Ember with the underline retained. Colour is never the only signal. */
a{color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--text-accent);text-decoration-line:underline}
a:focus-visible{outline:var(--focus-width) solid var(--focus-colour);outline-offset:var(--focus-offset)}

/* On Black or Brick Ember panels the focus ring is White. */
.on-dark a,.on-accent a{color:var(--text-invert)}
.on-dark a:hover,.on-accent a:hover{color:var(--text-invert)}
.on-dark a:focus-visible,.on-accent a:focus-visible{outline-color:var(--focus-colour-invert)}

:focus-visible{outline:var(--focus-width) solid var(--focus-colour);outline-offset:var(--focus-offset)}

/* Long form. Anything over roughly 150 words. */
.prose{font-family:var(--font-serif);font-size:var(--text-base-serif);line-height:var(--lh-reading);max-width:var(--w-reading)}

/* No justified text. Ragged right throughout. */
p{text-align:left}

/* Cross document view transitions; design.md 5.14. Two lines of CSS. */
@view-transition{navigation:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}