/*
Theme Name: insuredbytrinity
Theme URI: https://clickuplocal.com
Author: ClickUpLocal
Author URI: https://clickuplocal.com
Description: The custom Brain Box theme for insuredbytrinity. Built from the CUL Brain Box Starter (CUL-WebKit-20 main, 10d7efd). Requires the CUL Brain Box plugin.
Version: 0.1.0
Requires Plugins: clickuplocal-ai
Text Domain: clickuplocal-insuredbytrinity
*/

/* Plain on purpose.
   This canvas is the one every new site starts from, so it commits to as
   little as it can: a neutral palette, the system typeface, generous space and
   nothing that belongs to a trade. The colours and the faces come from the
   owner's Brand settings, so a new client is a palette away from their own
   site. Copy this file and rework the :root block first. */

/* One neutral palette, one typeface, one set of spacing. Everything that makes
   a site look like its owner comes from Brand, so this file is the part nobody
   should have to argue with. */
:root {
    /* The Brand tool prints --color-* and --font-* on :root at wp_head 99.
       Custom properties resolve at computed-value time, after the whole
       cascade, so these var() references pick the owner's choice up even
       though this stylesheet is earlier in the document. The literal after
       each comma is this canvas's own default, used when they have not
       chosen. Before this, the Brand screen wrote five colours and two fonts
       that nothing on the site ever read. */
    --cs-ink: var(--color-text, #1c2530);
    --cs-ink-soft: #5c6875;
    --cs-paper: var(--color-background, #ffffff);
    --cs-surface: #f4f6f8;
    --cs-line: #e2e7ec;
    --cs-accent: var(--color-primary, #1b4d7a);
    --cs-accent-dk: var(--color-secondary, #12395c);
    --cs-gold: var(--color-accent, #b4762c);
    --cs-radius: 8px;
    --cs-radius-lg: 10px;
    /* 1280px of CONTENT, not counting the side padding (Derek, 5 October 2026). */
    --cs-content: 1280px;
    --cs-gutter: 28px;
    --cs-max: calc(var(--cs-content) + 2 * var(--cs-gutter));
    --container-gutter: 1.5rem;
    --container: calc(var(--cs-content) + 2 * var(--container-gutter));
    /* The offer band. Deliberately not --cs-surface: the offer is the one
       thing on the page with money attached and it has to separate from the
       alternating sections around it. */
    --cs-offer-bg: #12395c;
    --cs-offer-ink: #f3f7fb;
    /* The system typeface until the owner picks their own in Brand. No font
       request at all on a site that has not chosen, which is one fewer thing
       between a visitor and the page. */
    --cs-display: var(--font-heading, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --cs-body: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--cs-paper);
    color: var(--cs-ink);
    font-family: var(--cs-body);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--cs-display);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0 0 16px;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; letter-spacing: -.01em; }
p { margin: 0 0 18px; }

/* Nothing below 16px anywhere, labels and fine print included. */
small, .cs-fine, figcaption, label { font-size: 16px; }

.cs-container { max-width: var(--cs-max); margin: 0 auto; padding: 0 var(--cs-gutter); }
.cs-section { padding: 96px 0; }
.cs-section-alt { background: var(--cs-surface); }
.cs-head { max-width: 720px; margin: 0 0 48px; }
.cs-foot { margin-top: 48px; }

.cs-eyebrow {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cs-accent);
    margin: 0 0 14px;
}

.cs-lead { font-size: 1.25rem; color: var(--cs-ink-soft); }

/* Buttons */
.cs-btn {
    display: inline-block;
    padding: 15px 30px;
    border: 2px solid var(--cs-ink);
    border-radius: var(--cs-radius);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .12s ease, background .12s ease, color .12s ease;
}
.cs-btn:hover { transform: translateY(-2px); }

/* Visible keyboard focus on everything interactive. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--cs-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Jump past the header and nav straight to the content. Off screen until it
   is focused, then it lands where it can be read. */
.cs-skip {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 100;
    padding: 12px 20px;
    background: var(--cs-ink);
    color: var(--cs-paper);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--cs-radius);
    transition: top .15s ease;
}
.cs-skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .cs-btn:hover { transform: none; }
}
.cs-btn-solid { background: var(--cs-ink); color: var(--cs-paper); }
.cs-btn-ghost { background: transparent; }
.cs-btn-accent { background: var(--cs-accent); border-color: var(--cs-accent); color: var(--cs-paper); }
.cs-btn-accent:hover { background: var(--cs-accent-dk); border-color: var(--cs-accent-dk); color: var(--cs-paper); }

/* Header */
.cs-site-header {
    /* Never sticky and never fixed. The header scrolls away with the page.
       position:relative stays, because the mobile menu below is absolutely
       positioned and would otherwise anchor to the viewport instead. */
    position: relative; z-index: 40;
    background: var(--cs-paper);
    border-bottom: 1px solid var(--cs-line);
}
.cs-site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.cs-logo { text-decoration: none; font-family: var(--cs-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.cs-logo-img { max-height: 46px; width: auto; }

.cs-nav ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.cs-nav a { font-size: 17px; font-weight: 600; text-decoration: none; }
/* Not the button. The Book now sits in the nav, so this rule was repainting
   its label the accent colour on its accent background, and hovering the one
   control the header exists for made the words disappear. */
.cs-nav a:not(.cs-btn):hover { color: var(--cs-accent); }
.cs-nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.cs-nav-toggle span { display: block; width: 26px; height: 2px; background: var(--cs-ink); margin: 5px 0; }

/* Hero: a full bleed background image with the copy laid over it. */
.cs-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(30rem, 62vh, 44rem);
    padding: 96px 0;
    border-bottom: 1px solid var(--cs-line);
    background-color: var(--cs-surface);
    background-image: var(--cs-hero-img);
    background-size: cover;
    background-position: center;
}

/* The scrim. Text over a photograph is only legible if we guarantee the
   contrast ourselves, because we have no idea what the owner will upload.
   Darkest where the copy sits, clearing toward the far edge so the picture
   still reads as a picture. */
.cs-hero.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(8, 10, 14, .82) 0%,
        rgba(8, 10, 14, .66) 42%,
        rgba(8, 10, 14, .22) 100%
    );
}

.cs-hero-inner { position: relative; max-width: 46rem; }
/* The offer page. The claim lives in the hero so nobody scrolls to act. */
.cs-hero-offer { padding: 72px 0; text-align: left; background-color: var(--cs-surface); background-image: none; }
.cs-hero-offer::before { content: none; }
.cs-offer-hero { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .cs-offer-hero { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
.cs-offer-hero .culc-claim { max-width: none; }
.cs-offer-hero .culc-claim-title { font-size: clamp(2rem, 4.5vw, 3rem); }
.cs-offer-hero-see img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: var(--cs-radius-lg);
}
/* Both owner controls in one row, under the offer rather than above it. */
.cs-offer-owner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-offer-owner .culc-inline-bar { margin: 0; }
.cs-offer-owner .culc-inline-edit { margin-top: 0; }

.cs-offer-detail { display: grid; gap: 44px; align-items: start; }
@media (min-width: 900px) { .cs-offer-detail { grid-template-columns: 1.5fr 1fr; } }
.cs-offer-fine {
    background: var(--cs-surface); border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-lg); padding: 26px 28px;
}
.cs-offer-fine h2 { font-size: 1.15rem; margin: 0 0 12px; }
.cs-offer-fine p { font-size: 17px; color: var(--cs-ink-soft); }
.cs-offer-fine p:last-child { margin-bottom: 0; }

/* One hero on every page but the homepage: same height, centred, so moving
   between them does not feel like moving between sites. */
.cs-hero-page {
    min-height: 0;
    padding: 88px 0;
    text-align: center;
    background-color: var(--cs-surface);
    background-image: none;
}
.cs-hero-page::before { content: none; }
.cs-hero-page .cs-container { max-width: 52rem; }
.cs-hero-page .cs-head { max-width: none; margin: 0; }
.cs-hero-page h1 { margin: 0 0 14px; }
.cs-hero-page .cs-hero-sub,
.cs-hero-page .cs-lead { margin-inline: auto; max-width: 46ch; }
@media (max-width: 780px) { .cs-hero-page { padding: 56px 0; } }

/* Blog cards: a title is a link, but a wall of underlined headings reads as a
   search results page rather than as writing worth reading. */
/* The image was sitting straight against the headline. */
.cs-card img { margin-bottom: 18px; border-radius: var(--cs-radius); }
.cs-card h3 { margin-bottom: 10px; }
.cs-card h3 a { text-decoration: none; }
.cs-card h3 a:hover, .cs-card h3 a:focus-visible { text-decoration: underline; }
.cs-hero h1 { letter-spacing: -.015em; margin-bottom: 20px; }

.cs-menu-desc { margin: 4px 0 0; font-size: 17px; color: var(--cs-ink-soft); max-width: 46ch; }
.cs-menu-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-menu-tags span {
    font-size: 16px; color: var(--cs-accent); background: var(--cs-surface);
    padding: 2px 9px; border-radius: 999px;
}
.cs-menu-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--cs-line); font-size: 17px; color: var(--cs-ink-soft); max-width: 62ch; }
.cs-hero-sub { font-size: 1.3rem; color: var(--cs-ink-soft); max-width: 54ch; }
.cs-hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* Light copy on the photograph. */
.cs-hero.has-image h1 { color: #fff; }
.cs-hero.has-image .cs-eyebrow { color: #fff; opacity: .82; }
.cs-hero.has-image .cs-hero-sub { color: rgba(255, 255, 255, .88); }
.cs-hero.has-image .cs-btn-solid { background: #fff; border-color: #fff; color: var(--cs-ink); }
.cs-hero.has-image .cs-btn-ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }
.cs-hero.has-image .cs-btn-ghost:hover { background: #fff; border-color: #fff; color: var(--cs-ink); }
.cs-hero.has-image a:focus-visible,
.cs-hero.has-image button:focus-visible { outline-color: #fff; }

/* No photo yet: the same quiet diagonal panel the other slots use, so an
   unedited homepage still reads as designed rather than unfinished. */
.cs-hero.no-image {
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 26px,
        rgba(0, 0, 0, .022) 26px 52px
    );
}
.cs-hero-prompt {
    margin: 28px 0 0;
    font-size: 16px;
    color: var(--cs-ink-soft);
    padding: 12px 16px;
    border: 1px dashed var(--cs-line);
    border-radius: var(--cs-radius);
    background: var(--cs-paper);
    display: inline-block;
}
.cs-hero-prompt a { font-weight: 700; color: var(--cs-accent); }

/* Media slots. One component for a set photo and for an empty one, so the
   layout does not move when an owner finally adds the picture. */
.cs-media { border-radius: var(--cs-radius-lg); overflow: hidden; aspect-ratio: var(--cs-ratio, 4 / 5); }
.cs-media img { width: 100%; height: 100%; object-fit: cover; }

.cs-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    color: var(--cs-ink-soft);
    /* A quiet tint with a soft diagonal, so it reads as a designed panel
       rather than as a photo that failed to load. */
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 22px,
            rgba(0, 0, 0, .022) 22px 44px
        ),
        var(--cs-surface);
    border: 1px solid var(--cs-line);
}
.cs-media-mark { width: 64px; height: 48px; color: var(--cs-ink); }
.cs-media-hint { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.cs-media-add {
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: var(--cs-radius);
    border: 2px solid var(--cs-ink);
    color: var(--cs-ink);
    background: var(--cs-paper);
}
.cs-media-add:hover { background: var(--cs-ink); color: var(--cs-paper); }

/* Cards, always three across so a row never reads as a lopsided four. */
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
/* What is on gets two, not three. Three of anything reads as a set to skim
   past; two gives each event enough room to be read as a thing you might
   actually turn up to. */
.cs-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
.cs-card {
    background: var(--cs-paper);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-lg);
    padding: 32px;
}
.cs-card p:last-child { margin-bottom: 0; }

/* Split */
.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }


/* Contact band */
.cs-band { background: var(--cs-ink); color: var(--cs-paper); }
/* Not --cs-accent: the band is --cs-ink, and the terracotta accent on very
   dark brown is barely a colour. Gold is the canvas's second accent and it
   follows the Brand tool through --color-accent like everything else. This
   was #9fb0ff, a periwinkle inherited from the starter canvas's blue, which
   rendered an accent coloured eyebrow on an accent coloured band. */
.cs-band .cs-eyebrow { color: var(--cs-gold); }
.cs-band a { color: var(--cs-paper); }
.cs-band-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: start; }
.cs-hours-row { display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.16); padding: 12px 0; margin: 0; font-size: 17px; }

/* Footer */
.cs-site-footer { background: var(--cs-surface); padding: 64px 0 40px; border-top: 1px solid var(--cs-line); }
/* The owner bar sits below the footer, outside it. Signed out it takes this and
   disappears into the footer above; signed in it wears the workspace colour and
   is meant to be seen. See culc_ownerbar(). */
body { --culc-ownerbar-bg: var(--cs-surface); }
.cs-footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 40px; }
.cs-footer-grid h4 { font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
.cs-footer-grid ul { list-style: none; margin: 0; padding: 0; }
/* Eight links in one column runs the footer to twice the height it needs. */
.cs-footer-grid .cs-footer-links { columns: 2; column-gap: 28px; }
@media (max-width: 560px) { .cs-footer-grid .cs-footer-links { columns: 1; } }
.cs-footer-grid li { margin-bottom: 10px; font-size: 17px; }
.cs-footer-grid a { text-decoration: none; }
.cs-footer-grid a:hover { color: var(--cs-accent); }
.cs-colophon { border-top: 1px solid var(--cs-line); padding-top: 24px; font-size: 16px; color: var(--cs-ink-soft); }

/* Editorial post body */
.cs-prose { max-width: 74ch; }
.cs-prose img { border-radius: var(--cs-radius); margin: 28px 0; }
.cs-prose h2 { margin-top: 44px; }
.cs-meta { font-size: 16px; color: var(--cs-ink-soft); margin-bottom: 28px; }

/* The plugin's own owner tool screens (Add Offer, Business Info, and the rest)
   render inside this body but are the plugin's own light forms, not this
   theme's public design. Keep the canvas from styling them. */
body.cul-screen-page .cs-hero,
body.cul-screen-page .cs-section { padding: 40px 0; }

/* Owner tools are worked, not read, so they must not be squeezed into the
   74ch reading measure the prose class sets for articles. */
body.cul-screen-page .cs-prose { max-width: none; }

/* A front door screen prints its own greeting, so the page title above it is
   a second competing headline that says nothing. */
body.cul-screen-home .cs-head { display: none; }

/* On an owner's tool screens the engine prints its own workspace bar, so this
   canvas stands its header down. The public nav and a Book now button aimed at
   somebody who wants a table have no business in the room where the owner is
   working, and having both made the two halves of the product look like one. */
body.cul-screen-page .cs-site-header,
body.cul-screen-page .cs-site-footer { display: none; }


/* -----------------------------------------------------------------------------
 * The homepage
 *
 * The other pages share one flat hero so they read as a set. The homepage is
 * the exception on purpose: it is the only page that has to make somebody want
 * to eat here before they have read a word, so it keeps the tall photograph.
 * -------------------------------------------------------------------------- */

.cs-hero-home { min-height: clamp(34rem, 76vh, 50rem); }

/* Open now. The question a local business is asked most, answered before
   anybody has to hunt for the hours, so it sits in the hero rather than in the
   footer where opening times normally go to die. */
.cs-open {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    margin: 26px 0 0;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--cs-line);
    background: var(--cs-paper);
    font-size: 17px;
    color: var(--cs-ink-soft);
}
.cs-open strong { color: var(--cs-ink); font-weight: 700; }
.cs-open-dot {
    align-self: center;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--cs-ink-soft);
}
.cs-open.is-open .cs-open-dot { background: #2f7a45; }

/* Over a photograph the badge has to carry its own ground, or it disappears
   into whatever the owner uploaded. */
.cs-hero.has-image .cs-open {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(8, 10, 14, .55);
    color: rgba(255, 255, 255, .84);
}
.cs-hero.has-image .cs-open strong { color: #fff; }
.cs-hero.has-image .cs-open .cs-open-dot { background: rgba(255, 255, 255, .7); }
.cs-hero.has-image .cs-open.is-open .cs-open-dot { background: #67d68a; }

/* A centred section head, for the bands where the content below is a grid and
   a left aligned heading would hang off the side of it. */
.cs-head-centre { max-width: 42rem; margin-inline: auto; text-align: center; }
.cs-foot-centre { text-align: center; }

/* The taste of the menu. Three across, twice, because a person deciding where
   looking for a local business wants to see the work, and real photographs do
   about the cooking. */
.cs-taste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
.cs-taste-item { display: flex; flex-direction: column; }
.cs-taste-photo {
    margin-bottom: 20px;
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
    background: var(--cs-surface);
}
.cs-taste-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cs-taste-section {
    margin: 0 0 8px;
    font-family: var(--cs-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cs-gold);
}
.cs-taste-item h3 { margin: 0 0 10px; font-size: 1.4rem; }
.cs-taste-desc { margin: 0 0 14px; font-size: 17px; color: var(--cs-ink-soft); }
.cs-taste-price {
    margin: auto 0 0;
    font-family: var(--cs-display);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--cs-ink);
}

/* The date on an event card, above the name, because the night is what decides
   whether somebody is interested at all. It reads as a sentence now that the
   engine supplies the full range, so the uppercase label treatment that suited
   "TUE 15 SEP" would just be shouting. */
.cs-card-when {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cs-accent);
}


/* -----------------------------------------------------------------------------
 * Contact
 *
 * Two columns that both have something to say. The old version stacked a small
 * form against a list of details and centred them, which left a column of empty
 * paper the height of the opening hours.
 * -------------------------------------------------------------------------- */

.cs-contact { display: grid; gap: 56px; align-items: start; }
@media (min-width: 900px) { .cs-contact { grid-template-columns: 1.15fr .85fr; gap: 64px; } }

.cs-contact-or {
    margin: 36px 0 14px;
    font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cs-ink-soft);
}
.cs-contact-direct { display: flex; flex-wrap: wrap; gap: 12px; }

/* One card: the map, then the address, then the hours. Somebody who has found
   this page wants all three at once, not three bands apart. */
.cs-contact-card {
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-lg);
    background: var(--cs-paper);
    overflow: hidden;
}
.cs-contact-map { aspect-ratio: 4 / 3; background: var(--cs-surface); }
.cs-contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.cs-contact-card-body { padding: 28px 30px 32px; }
.cs-contact-card-body h2 { font-size: 1.3rem; margin: 0 0 10px; }
.cs-contact-card-body h2 + p { margin-top: 0; }
.cs-contact-card-body > * + h2 { margin-top: 30px; }
.cs-contact-address { font-size: 17px; margin-bottom: 6px; }

/* Days and times as a description list, so the pairing is real rather than two
   spans in a row that happen to sit next to each other. */
.cs-hours { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 14px 0 0; }
.cs-hours dt { font-size: 17px; color: var(--cs-ink-soft); }
.cs-hours dd {
    margin: 0; text-align: right; font-size: 17px;
    font-variant-numeric: tabular-nums;
}
.cs-contact-card .cs-open { margin: 0 0 4px; }


/* Three things worth knowing, between the food and the story. No cards: they
   are claims about the place, not products, and boxing them makes them look
   like a pricing table. */
.cs-why { padding-top: 0; }
.cs-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.cs-why-item h3 { font-size: 1.3rem; margin: 0 0 10px; }
.cs-why-item p { margin: 0; font-size: 17px; color: var(--cs-ink-soft); }
.cs-why-item + .cs-why-item { position: relative; }
.cs-why-item + .cs-why-item::before {
    content: ""; position: absolute; left: -20px; top: 4px; bottom: 4px;
    border-left: 1px solid var(--cs-line);
}


/* The offer, straight under the hero when one is running. Tighter than a full
   band because it is the second thing on the page, not the first. */
.cs-home-offer { padding: 56px 0; }

@media (max-width: 980px) {
    .cs-split, .cs-band-inner { grid-template-columns: 1fr; gap: 40px; }
    .cs-grid, .cs-footer-grid { grid-template-columns: 1fr; }
    .cs-taste { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
    .cs-why-grid { grid-template-columns: 1fr; gap: 32px; }
    .cs-why-item + .cs-why-item::before { content: none; }
    .cs-hero-home { min-height: 0; }
    .cs-section { padding: 64px 0; }
    .cs-hero { padding: 64px 0; min-height: 0; }
    .cs-nav-toggle { display: block; }
    .cs-nav ul {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: flex-start; gap: 0;
        background: var(--cs-paper); border-bottom: 1px solid var(--cs-line); padding: 12px 28px 20px;
    }
    .cs-nav.is-open ul { display: flex; }
    .cs-nav ul li { width: 100%; padding: 12px 0; }
}

@media (max-width: 620px) {
    .cs-taste { grid-template-columns: 1fr; }
}

/* Single event -------------------------------------------------------------
   A poster at the top, the story and the sign-up below it. The sign-up column
   is narrower than the story on purpose: it is a thing to do, not a thing to
   read, and it should not compete with the words for the eye. */

.cs-hero-event { padding: 88px 0 72px; text-align: left; }
.cs-hero-event .cs-hero-inner { max-width: 60rem; }
.cs-hero-event.has-image h1,
.cs-hero-event.has-image .cs-eyebrow { color: #fff; }

/* The three things somebody needs before anything else: the day, the time,
   and whether it costs. Set as facts on one line rather than as a list. */
.cs-evt-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    font-size: 17px;
    font-weight: 600;
}
.cs-hero-event.has-image .cs-evt-facts { color: #fff; }
.cs-hero-event:not(.has-image) .cs-evt-facts { color: var(--cs-ink-soft); }
.cs-evt-facts li { position: relative; }
.cs-evt-facts li + li::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

.cs-evt-past { margin: 24px 0 0; font-size: 17px; }
.cs-hero-event.has-image .cs-evt-past { color: #fff; }

.cs-evt-body {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
@media (max-width: 900px) { .cs-evt-body { grid-template-columns: 1fr; gap: 40px; } }

.cs-evt-main > h2 { margin-bottom: 18px; }
.cs-evt-flyer { margin: 32px 0 0; }
.cs-evt-flyer img { border-radius: var(--cs-radius-lg); width: 100%; }

.cs-evt-side { display: flex; flex-direction: column; gap: 20px; }
.cs-evt-card {
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-lg);
    background: var(--cs-paper);
    padding: 24px;
}
.cs-evt-card h3 { margin: 0 0 14px; font-size: 1.25rem; }
.cs-evt-dl { margin: 0; }
.cs-evt-dl dt {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cs-accent);
    margin-top: 14px;
}
.cs-evt-dl dt:first-child { margin-top: 0; }
.cs-evt-dl dd { margin: 3px 0 0; font-size: 17px; }
.cs-evt-directions { margin: 18px 0 0; font-size: 16px; }

.cs-evt-host-label {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cs-ink-soft);
}
.cs-evt-host-name { margin: 0; font-weight: 700; font-size: 18px; }
.cs-evt-host-where { margin: 4px 0 0; font-size: 16px; color: var(--cs-ink-soft); }

.cs-evt-more { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--cs-line); }
.cs-evt-more h2 { margin-bottom: 24px; }
.cs-evt-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .cs-evt-more-grid { grid-template-columns: 1fr; } }
.cs-evt-more-card {
    display: block;
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-lg);
    padding: 20px 22px;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cs-evt-more-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(36, 23, 15, .08); }
.cs-evt-more-date {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cs-accent);
    margin-bottom: 6px;
}
.cs-evt-more-title { display: block; font-weight: 700; font-size: 18px; line-height: 1.3; }
.cs-evt-more-where { display: block; margin-top: 4px; font-size: 16px; color: var(--cs-ink-soft); }
@media (prefers-reduced-motion: reduce) { .cs-evt-more-card:hover { transform: none; } }

/* Private events -----------------------------------------------------------
   The form sits beside the copy rather than under it, because the enquiry is
   what the page is for and nobody should have to scroll to find it. */
.cs-pe-body {
    display: grid;
    /* Near enough even. The right column holds a seven column diary, and a
       calendar squeezed into a third of the page is a calendar nobody can
       tap a Saturday on. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: start;
}
@media (max-width: 900px) { .cs-pe-body { grid-template-columns: 1fr; gap: 40px; } }
.cs-pe-main > h2 { margin-bottom: 16px; }
.cs-pe-main > h3 { margin: 36px 0 12px; }
.cs-pe-form {
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-lg);
    background: var(--cs-surface);
    padding: 28px;
}
.cs-pe-form > h2 { font-size: 1.6rem; margin-bottom: 16px; }

/* The map, full width, between the contact card and the questions. It is a
   break in the page as much as it is a map, so it runs edge to edge. */
.cs-contact-mapband {
    display: block;
    width: 100%;
    /* Was a flat 420px with a 300px override under 780px, the one fixed height
       in this file. A map has no natural size, so it takes one from the
       viewport and stops growing before it eats a laptop screen. */
    height: clamp(300px, 38vw, 460px);
    background: var(--cs-surface);
    border-top: 1px solid var(--cs-line);
    border-bottom: 1px solid var(--cs-line);
}
.cs-contact-mapband iframe { display: block; width: 100%; height: 100%; border: 0; }

/* The FAQs part brings its own section and container so that a template which
   just prints questions gets the right measure. When a template has already
   opened a container and written its own heading, the part must not add a
   second one on top: that is where the gap between the heading and the first
   question came from. */
.cs-container .culc-faqs-section { padding: 0; }
.cs-container .culc-faqs-wrap { padding: 0; max-width: none; }

/* Social links on the contact page. Quieter than the phone and email buttons
   beside them, because a message on Instagram is the third-best way to reach
   a business, not the first. */
.cs-contact-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
}
.cs-contact-social a {
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--cs-line);
    padding-bottom: 2px;
}
.cs-contact-social a:hover { border-bottom-color: var(--cs-accent); color: var(--cs-accent); }