/* Cary Digest theme: cream page, near-black ink, the brand blue, and a very small amount of burnt orange.
   Rounded shapes (cards 14px, big boxes 28px, buttons and menu links pills) with hard offset shadows in the ink
   colour (no blur). System fonts only: Trebuchet MS for headings, buttons and the menu, Helvetica for text.
   Light only for now.

   Token first: every colour of this theme is a custom property in the one block below, and every rule in this file
   uses those properties, never a colour of its own. A dark mode is then a second block that redefines the palette
   and semantic tokens (and nothing else), for example under a `[data-theme="dark"]` attribute or a media query.
   Everything is scoped under .theme-carydigest (the body class base.html adds from BrandSettings.theme); no other
   theme and no shared file is touched. The brand blue comes from /brand.css (--brand-primary). */

.theme-carydigest {
    color-scheme: light;

    /* ---- Palette (the only place a colour value is written) ---- */
    --cary-cream: #f5f0e0;          /* the same value as Raleighwood's --cream, but this theme's own variable */
    --cary-white: #ffffff;
    --cary-ink: #141414;
    --cary-ink-soft: #4a4a4a;
    --cary-sand: #d9d2bb;           /* hairlines on cream */
    --cary-blue: var(--brand-primary);
    --cary-orange: #c2410c;         /* the highlight: 4.54:1 on cream, 5.18:1 on white (WCAG AA for text) */
    --cary-red: #b91c1c;            /* errors and the cancelled banner only */

    /* ---- Semantic tokens (what the rules below use; a dark block redefines these) ---- */
    --cary-page: var(--cary-cream);
    --cary-surface: var(--cary-white);
    --cary-text: var(--cary-ink);
    --cary-muted: var(--cary-ink-soft);
    --cary-line: var(--cary-sand);
    --cary-border: var(--cary-ink);
    --cary-shadow-colour: var(--cary-ink);
    --cary-link: var(--cary-blue);
    --cary-accent: var(--cary-blue);
    --cary-on-blue: var(--cary-white);
    --cary-blue-deep: color-mix(in srgb, var(--cary-blue) 82%, var(--cary-ink));
    --cary-fill-hover: color-mix(in srgb, var(--cary-blue) 8%, var(--cary-surface));  /* blue links stay 4.5:1 on it */
    --cary-highlight: var(--cary-orange);
    --cary-highlight-tint: color-mix(in srgb, var(--cary-orange) 12%, var(--cary-surface));
    --cary-dot: color-mix(in srgb, var(--cary-text) 50%, var(--cary-surface));  /* 3.5:1 on white */
    /* Full-width section bands on the CMS pages (see "Section bands" below). The pale blue is the brand blue at 9%
       over white (the colour-mix rule after this block); the fixed value is for a browser without color-mix. */
    --cary-sky: #e9f1f8;
    --cary-band-cream: var(--cary-page);
    /* All the bands are cream again (the founder dislikes the white and pale-blue splits): the band tokens point at
       the page colour. To bring a coloured band back, point one of these at --cary-surface or --cary-sky. */
    --cary-band-white: var(--cary-page);
    --cary-band-sky: var(--cary-page);
    --cary-band-pad: 1.75rem;         /* the top and bottom padding of a band, on a desktop */
    --cary-band-pad-mobile: 1.25rem;  /* and on a phone */
    --cary-header-bg: var(--cary-white);  /* the menu bar, and the phone menu's panel, are white */
    --cary-separator: var(--cary-dot);     /* the dot between menu items on a desktop */
    --cary-error: var(--cary-red);
    --cary-error-tint: color-mix(in srgb, var(--cary-red) 9%, var(--cary-surface));

    /* ---- Shape: radii and the hard offset shadows (small things 3 to 4px, cards and buttons 6px, big boxes 10px) ---- */
    --cary-hero-top-gap-mobile: 2rem;     /* from the menu bar to the hero card on a phone (it was 1rem) */
    --cary-hero-bottom-gap-mobile: 0.5rem; /* under the hero's arrows to the subscribe card on a phone (padding of the hero section; the next box adds its own 1rem; it was 1rem) */
    --cary-hero-top-gap: 2rem;  /* from the menu bar to the posts hero on a desktop: as much as between two Home boxes */
    --cary-radius-card: 14px;
    --cary-radius-box: 28px;
    --cary-radius-pill: 9999px;
    --cary-shadow-xs: 3px 3px 0 var(--cary-shadow-colour);
    --cary-shadow-sm: 4px 4px 0 var(--cary-shadow-colour);
    --cary-shadow-md: 6px 6px 0 var(--cary-shadow-colour);
    --cary-shadow-lg: 10px 10px 0 var(--cary-shadow-colour);
    --cary-shadow-sm-hover: 6px 6px 0 var(--cary-shadow-colour);
    --cary-shadow-md-hover: 9px 9px 0 var(--cary-shadow-colour);
    --cary-shadow-lg-hover: 13px 13px 0 var(--cary-shadow-colour);
    --cary-shadow-pressed: 2px 2px 0 var(--cary-shadow-colour);

    /* The phone scale (below 48rem): smaller offsets in three steps, used by every card and control of that size.
       The offsets are tokens of their own so the right gutters that make a card plus its shadow look centred
       (see the end of this file) always match the shadows. */
    --cary-offset-lg-mobile: 5px;  /* big cards and boxes: section boxes, the blue subscribe card, the hero card */
    --cary-offset-md-mobile: 4px;  /* mid cards: event and business cards, form groups */
    --cary-offset-sm-mobile: 3px;  /* small controls: buttons, chips, badges, arrows, inputs */
    --cary-shadow-lg-mobile: var(--cary-offset-lg-mobile) var(--cary-offset-lg-mobile) 0 var(--cary-shadow-colour);
    --cary-shadow-md-mobile: var(--cary-offset-md-mobile) var(--cary-offset-md-mobile) 0 var(--cary-shadow-colour);
    --cary-shadow-sm-mobile: var(--cary-offset-sm-mobile) var(--cary-offset-sm-mobile) 0 var(--cary-shadow-colour);
    --cary-shadow-lg-hover-mobile: 7px 7px 0 var(--cary-shadow-colour);
    --cary-shadow-md-hover-mobile: 6px 6px 0 var(--cary-shadow-colour);
    --cary-shadow-sm-hover-mobile: 4px 4px 0 var(--cary-shadow-colour);
    --cary-shadow-pressed-mobile: 1px 1px 0 var(--cary-shadow-colour);

    /* ---- Type (system fonts only) ---- */
    --cary-font-heading: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    --cary-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* ---- The shared stylesheet's own variables, pointed at the tokens (this also replaces the dark-mode values
       site.css would otherwise apply for a dark colour scheme: this theme is light only) ---- */
    --text: var(--cary-text);
    --muted: var(--cary-muted);
    --line: var(--cary-line);
    --surface: var(--cary-surface);
    --page: var(--cary-page);
    --card-border: var(--cary-border);
    --link-color: var(--cary-link);
    --accent: var(--cary-accent);
    --font-heading: var(--cary-font-heading);
    --font-body: var(--cary-font-body);
    --font-ui: var(--cary-font-heading);
    --header-bg: var(--cary-header-bg);
    --header-border: 2px solid var(--cary-border);
    --footer-bg: var(--cary-header-bg);  /* white like the menu bar (the page itself stays cream) */
    --footer-text: var(--cary-text);
    --section-bg: var(--cary-surface);
    --section-border: 2px solid var(--cary-border);
    --btn-bg: var(--cary-blue);
    --btn-text: var(--cary-on-blue);
    --btn-transform: none;
    --btn-light-text: var(--cary-text);
    --radius: 10px;
    --shadow-soft: none;
    --shadow-featured: var(--cary-shadow-md);
    --shadow-hover: var(--cary-shadow-md-hover);

    /* The shared stylesheet and the Home components also read the Raleighwood palette names from :root. Inside
       this theme they mean this theme's colours (the burnt red of a border, a star or a button is the brand blue). */
    --cream: var(--cary-page);
    --tan: var(--cary-page);
    --ink: var(--cary-text);
    --ink-soft: var(--cary-muted);
    --burnt-red: var(--cary-blue);
    --burnt-red-deep: var(--cary-blue-deep);
    --featured: var(--cary-highlight-tint);
    --font-mono: var(--cary-font-heading);
    --font-serif: var(--cary-font-body);

    background: var(--cary-page);
    color: var(--cary-text);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .theme-carydigest {
        --cary-sky: color-mix(in srgb, var(--cary-blue) 9%, var(--cary-white));
    }
}

/* ---- Base type ---- */
.theme-carydigest h1,
.theme-carydigest h2,
.theme-carydigest h3 {
    font-weight: 700;
    letter-spacing: -0.005em;
}

.theme-carydigest .plain-main .crumbs,
.theme-carydigest .crumbs {
    font-family: var(--font-ui);
}

.theme-carydigest .error,
.theme-carydigest .submit-form .error {
    color: var(--cary-error);  /* site.css lightens this for a dark colour scheme, which this light theme never uses */
}

.theme-carydigest .banner {
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
}

.theme-carydigest .banner.problem {
    border-color: var(--cary-error);
}

.theme-carydigest .banner.cancelled {
    border-color: var(--cary-error);
    border-width: 2px 2px 2px 8px;
    background: var(--cary-error-tint);
    color: var(--cary-error);
}

/* ---- Header and menu ---- */
.theme-carydigest .site-header {
    /* the same soft shadow as the Raleighwood menu bar; the only soft shadow in this otherwise hard-shadow theme */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.theme-carydigest .main-nav {
    gap: 4px;
}

/* The current page is marked by bold ink text and a 3px orange underline with rounded ends, not by a fill. The
   other items are regular weight. The selected item is made bolder with a thin text stroke, not a heavier font
   weight, so its width is the same as before and its neighbours never move between pages. The underline is a
   pseudo-element (the shared markup is untouched, aria-current stays as it is) as wide as the label: its ends sit
   one --cary-nav-pad in from the link's edges. A hover is a light fill. */
.theme-carydigest .main-nav a {
    --cary-nav-pad: 12px;
    position: relative;
    padding: 0 var(--cary-nav-pad);
    border-radius: var(--cary-radius-pill);
    font-weight: 400;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.theme-carydigest .main-nav a:hover {
    background: var(--cary-fill-hover);
    text-decoration: none;
}

.theme-carydigest .main-nav a[aria-current="page"] {
    color: var(--cary-text);
    text-decoration: none;
    -webkit-text-stroke: 0.6px currentColor;
}

.theme-carydigest .main-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--cary-nav-pad);
    right: var(--cary-nav-pad);
    bottom: 6px;
    height: 3px;
    border-radius: var(--cary-radius-pill);
    background: var(--cary-highlight);
    pointer-events: none;
}

/* From 60rem (the breakpoint the shared header uses for separators): one small round dot between two menu items,
   drawn on the following link's left edge, in the middle of a 12px gap between the links. Decorative: no content,
   no clicks. */
@media (min-width: 60rem) {
    .theme-carydigest .main-nav {
        gap: 12px;
    }

    .theme-carydigest .main-nav a + a::before {
        content: "";
        position: absolute;
        left: -6px;
        top: 50%;
        width: 5px;
        height: 5px;
        margin: -2.5px 0 0 -2.5px;
        border-radius: 50%;
        background: var(--cary-separator);
        pointer-events: none;
    }
}

@media (min-width: 70rem) {
    .theme-carydigest .main-nav a {
        --cary-nav-pad: 16px;
    }
}

@media (min-width: 48rem) and (max-width: 59.99rem) {
    .theme-carydigest .main-nav a {
        --cary-nav-pad: 9px;
    }
}

.theme-carydigest .wordmark {
    font-family: var(--font-heading);
}

/* The header logo is 70% of the shared size at every breakpoint (shared: 48px from 60rem, 36px from 48rem to 60rem,
   40px on a phone; that is 2.1rem, 1.575rem and 1.75rem here). The width follows the picture's own shape; the
   <img> keeps its width and height attributes (the shape is reserved before it loads), and its @2x file is still
   served. object-fit keeps the logo undistorted if the phone's grid column is ever narrower than the logo. */
.theme-carydigest {
    --cary-logo-height: 2.1rem;
}

@media (min-width: 48rem) and (max-width: 59.99rem) {
    .theme-carydigest {
        --cary-logo-height: 1.575rem;
    }
}

@media (max-width: 47.99rem) {
    .theme-carydigest {
        --cary-logo-height: 1.75rem;
    }
}

.theme-carydigest .site-header .logo-img {
    height: var(--cary-logo-height);
    width: auto;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 47.99rem) {
    /* On a phone the header is the logo on the left and the Menu toggle on the right: the header's Subscribe button
       is not drawn here (the page has the blue subscribe card; the desktop header keeps its button), and the toggle
       takes its column. The toggle's invisible left padding is pulled into the gutter so its icon ends where
       the page content ends; the 44 x 44px target stays. The dropdown panel is unchanged: it is positioned against
       the header and spans its full width. */
    .theme-carydigest .site-header .header-inner {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .theme-carydigest .site-header .header-inner > .btn {
        display: none;
    }

    /* three columns: an empty one, the logo in the middle one (so it is centred on the screen, not just between
       the other items) and the toggle, right-aligned, in the third */
    .theme-carydigest .site-header .logo {
        grid-column: 2;
        justify-self: center;
        border-radius: var(--radius);  /* its focus ring is drawn with rounded corners */
    }

    .theme-carydigest .site-header .logo-img {
        object-position: center;
    }

    .theme-carydigest .mobile-nav {
        grid-column: 3;
        justify-self: end;
        margin-right: -10px;  /* the 24px icon sits 10px inside the 44px box, so it ends at the 16px gutter */
    }

    /* The Menu toggle is the hamburger icon alone: ink bars, no box, no outline, no shadow, a 44 x 44px target and the
       accent focus ring (drawn round). The word "Menu" is the summary's own text (shared markup, not edited), so it
       is pushed out of the 44px box and cut off by the summary's overflow instead of being removed: it is still in the
       accessibility tree, so the toggle is announced as "Menu". The icon is 24px wide with 7px between the bars
       (about 17px tall) and turns into an X when the menu is open. */
    .theme-carydigest .nav-menu summary {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0 0 0 10px;  /* (44 - 24) / 2: the icon sits in the middle of the box */
        gap: 0;
        justify-content: flex-start;
        overflow: hidden;
        text-indent: 100px;
        white-space: nowrap;
        border: 0;
        border-radius: var(--cary-radius-pill);
        background: transparent;
        box-shadow: none;
    }

    .theme-carydigest .nav-menu summary:focus-visible {
        outline: 3px solid var(--cary-accent);
        outline-offset: 0;
    }

    .theme-carydigest .nav-menu .nav-burger {
        position: relative;
        flex: 0 0 auto;
        width: 24px;
        height: 3px;
        border-radius: var(--cary-radius-pill);
        box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
    }

    .theme-carydigest .nav-menu .nav-burger::before,
    .theme-carydigest .nav-menu .nav-burger::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        border-radius: var(--cary-radius-pill);
        background: currentColor;
        opacity: 0;
    }

    /* open: the three bars become an X (the shared styles already drop the outer bars) */
    .theme-carydigest .nav-menu[open] .nav-burger {
        background: transparent;
        box-shadow: none;
    }

    .theme-carydigest .nav-menu[open] .nav-burger::before,
    .theme-carydigest .nav-menu[open] .nav-burger::after {
        opacity: 1;
    }

    .theme-carydigest .nav-menu[open] .nav-burger::before {
        transform: rotate(45deg);
    }

    .theme-carydigest .nav-menu[open] .nav-burger::after {
        transform: rotate(-45deg);
    }

    .theme-carydigest .nav-menu[open] summary {
        background: transparent;
    }

    .theme-carydigest .nav-list {
        border-top: 2px solid var(--cary-border);  /* the panel starts over the header's own bottom line */
        border-bottom: 2px solid var(--cary-border);
        border-radius: 0 0 var(--cary-radius-box) var(--cary-radius-box);
        box-shadow: var(--cary-shadow-sm);
        padding: 4px 0 8px;
    }

    /* each row is a pill as wide as its label (centred), so the current item's underline can be as wide as the
       label too; rows are 52px tall and at least 80px wide, well over the 44px target */
    .theme-carydigest .nav-list a {
        --cary-nav-pad: 28px;
        width: fit-content;
        min-width: 5rem;
        font-weight: 400;
        border-top: 0;
        margin: 2px auto;
        padding: 0 var(--cary-nav-pad);
        border-radius: var(--cary-radius-pill);
    }

    .theme-carydigest .nav-list a:hover,
    .theme-carydigest .nav-list a:focus-visible {
        background: var(--cary-fill-hover);
    }

    .theme-carydigest .nav-list a[aria-current="page"] {
        -webkit-text-stroke: 0.6px currentColor;
    }

    /* the shared 24x2px bar becomes the same 3px orange underline as the desktop menu */
    .theme-carydigest .nav-list a[aria-current="page"]::after {
        left: var(--cary-nav-pad);
        right: var(--cary-nav-pad);
        bottom: 9px;
        width: auto;
        height: 3px;
        margin-left: 0;
        border-radius: var(--cary-radius-pill);
        background: var(--cary-highlight);
    }
}

/* ---- Buttons ---- */
.theme-carydigest .btn {
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
    padding: 8px 20px;
    letter-spacing: 0.01em;
    box-shadow: var(--cary-shadow-md);
}

.theme-carydigest .btn-small {
    padding: 8px 18px;
    box-shadow: var(--cary-shadow-sm);
}

.theme-carydigest .btn:hover {
    filter: none;
    box-shadow: var(--cary-shadow-md-hover);
    background: var(--cary-blue-deep);
}

.theme-carydigest .btn:active {
    box-shadow: var(--cary-shadow-pressed);
}

.theme-carydigest .btn-small:hover {
    box-shadow: var(--cary-shadow-sm-hover);
}

@media (prefers-reduced-motion: no-preference) {
    .theme-carydigest .btn:hover {
        transform: translate(-2px, -2px);
    }

    .theme-carydigest .btn:active {
        transform: translate(3px, 3px);
    }
}

.theme-carydigest .btn-light,
.theme-carydigest .site-footer .btn-light {
    background: var(--cary-surface);
    color: var(--cary-text);
    border-color: var(--cary-border);
}

.theme-carydigest .btn-light:hover {
    background: var(--cary-fill-hover);
}

/* The quieter button of a pair (the thanks page's "Return home"): the surface colour, like the light button */
.theme-carydigest .btn-secondary {
    background: var(--cary-surface);
    color: var(--cary-text);
    border-color: var(--cary-border);
}

.theme-carydigest .btn-secondary:hover {
    background: var(--cary-fill-hover);
    color: var(--cary-text);
}

/* In the footer the join button is the primary one */
.theme-carydigest .site-footer .btn-light {
    background: var(--cary-blue);
    color: var(--cary-on-blue);
}

.theme-carydigest .site-footer .btn-light:hover {
    background: var(--cary-blue-deep);
}

.theme-carydigest .btn.btn-red {
    border-color: var(--cary-border);
}

.theme-carydigest .share-row .btn-light,
.theme-carydigest .actions-row .btn-light {
    background: var(--cary-surface);
    border-color: var(--cary-border);
}

.theme-carydigest .share-row .btn-light:hover,
.theme-carydigest .actions-row .btn-light:hover {
    background: var(--cary-fill-hover);
}

.theme-carydigest .pager .btn {
    background: var(--cary-surface);
    color: var(--cary-text);
    border: 2px solid var(--cary-border);
}

@media (hover: hover) {
    .theme-carydigest .pager a.btn:hover {
        background: var(--cary-blue);
        color: var(--cary-on-blue);
        border-color: var(--cary-border);
    }
}

.theme-carydigest .btn.is-disabled,
.theme-carydigest .share-row .btn.is-disabled,
.theme-carydigest .pager .is-disabled {
    box-shadow: none;
    transform: none;
    border-color: var(--cary-muted);
}

.theme-carydigest .share-icons .btn {
    padding: 0;
    box-shadow: var(--cary-shadow-sm);
}

.theme-carydigest .actions-row .btn {
    padding: 8px 20px;
}

/* ---- Footer ---- */
.theme-carydigest .site-footer {
    border-top: 2px solid var(--cary-border);  /* the same line as under the menu bar; square corners at every width */
}

.theme-carydigest .site-footer a:not(.btn) {
    font-weight: 700;
}

/* ---- Home: boxes, hero, chip, stats, marquee, cards ---- */
.theme-carydigest .pg-box {
    border-radius: var(--cary-radius-box);
    box-shadow: var(--cary-shadow-lg);
}

.theme-carydigest .deco-card {
    border-top-left-radius: var(--cary-radius-box);
    border-top-right-radius: var(--cary-radius-box);
    box-shadow: var(--cary-shadow-lg);
}

.theme-carydigest .deco-card::before {
    display: none;  /* the red top band of the other brand */
}

.theme-carydigest .hero-headline em {
    text-decoration-color: var(--cary-highlight);
    text-decoration-thickness: 4px;
    text-underline-offset: 5px;
}

.theme-carydigest .box-sub,
.theme-carydigest .band-text p,
.theme-carydigest .news-note,
.theme-carydigest .news-title,
.theme-carydigest .card-heading {
    font-style: normal;
}

.theme-carydigest .card-heading {
    font-size: 1.25rem;
}

.theme-carydigest .live-indicator {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
    box-shadow: var(--cary-shadow-sm);
    padding: 8px 18px;
}

.theme-carydigest .live-text {
    text-transform: none;
    letter-spacing: 0.01em;
    font-family: var(--font-heading);
}

.theme-carydigest .live-cursor {
    color: var(--cary-highlight);
    font-family: var(--font-heading);
}

.theme-carydigest .stats-container {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-md);
}

.theme-carydigest .stat-value {
    font-family: var(--font-heading);
    color: var(--cary-blue);
}

.theme-carydigest .stat-label {
    font-family: var(--font-body);
    color: var(--cary-muted);
}

.theme-carydigest .stat-block:not(:last-child) {
    border-right-color: var(--cary-line);
}

.theme-carydigest .stats-note {
    font-style: normal;
}

/* The subscribe band is the one solid blue block of the page */
.theme-carydigest .pg-band {
    background: var(--cary-blue);
    color: var(--cary-on-blue);
}

.theme-carydigest .pg-band .band-text h2,
.theme-carydigest .pg-band .band-text p {
    color: var(--cary-on-blue);
}

.theme-carydigest .pg-band .box-cta-split::before {
    background-image: radial-gradient(circle, var(--cary-on-blue) 2.5px, transparent 3px);
    opacity: 0.8;
}

.theme-carydigest .pg-band .btn {
    background: var(--cary-surface);
    color: var(--cary-text);
}

.theme-carydigest .pg-band .btn:hover {
    background: var(--cary-fill-hover);
}

.theme-carydigest .pg-band a:focus-visible {
    outline-color: var(--cary-on-blue);
}

/* Post cards, story cards and quotes: rounded, hard shadow; the washi tape is left out on this brand */
.theme-carydigest .post-card,
.theme-carydigest .story-card {
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-md);
}

.theme-carydigest .post-image {
    border-radius: calc(var(--cary-radius-card) - 2px) calc(var(--cary-radius-card) - 2px) 0 0;
}

.theme-carydigest .post-text {
    border-radius: 0 0 calc(var(--cary-radius-card) - 2px) calc(var(--cary-radius-card) - 2px);
}

.theme-carydigest .story-media img,
.theme-carydigest .story-media .img-placeholder {
    border-radius: calc(var(--cary-radius-card) - 2px) calc(var(--cary-radius-card) - 2px) 0 0;
}

.theme-carydigest .news-section .post-card::after,
.theme-carydigest .stories-section .story-card::after {
    display: none;
}

.theme-carydigest .news-section .post-card:hover,
.theme-carydigest .stories-section .story-card:hover,
.theme-carydigest .news-section .post-card:focus-within,
.theme-carydigest .stories-section .story-card:focus-within {
    transform: none;
    box-shadow: var(--cary-shadow-md-hover);
}

@media (prefers-reduced-motion: no-preference) {
    .theme-carydigest .news-section .post-card:hover,
    .theme-carydigest .stories-section .story-card:hover,
    .theme-carydigest .news-section .post-card:focus-within,
    .theme-carydigest .stories-section .story-card:focus-within {
        transform: translate(-2px, -2px);
    }
}

.theme-carydigest .quote-card {
    background: var(--cary-page);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-sm);
}

.theme-carydigest .avatar {
    border: 2px solid var(--cary-border);
}

.theme-carydigest .sent-badge,
.theme-carydigest .story-tag {
    border-radius: var(--cary-radius-pill);
}

.theme-carydigest .sent-badge {
    color: var(--cary-text);
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    box-shadow: var(--cary-shadow-xs);
}

.theme-carydigest .story-tag {
    border: 2px solid var(--cary-border);
    padding: 2px 9px;
}

.theme-carydigest .accordion details {
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-sm);
}

.theme-carydigest .accordion summary {
    border-radius: var(--cary-radius-card);
}

.theme-carydigest .pg-offers .offer-row {
    border-top: 2px solid var(--cary-line);
}

.theme-carydigest .img-placeholder {
    background-color: var(--cary-line);
}

.theme-carydigest .partner-name {
    font-family: var(--font-heading);
}

/* ---- Event and business cards ---- */
.theme-carydigest .cards {
    row-gap: 18px;
}

.theme-carydigest .event-card {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-md);
}

.theme-carydigest .event-card:hover {
    border-color: var(--cary-border);
    box-shadow: var(--cary-shadow-md-hover);
}

@media (hover: hover) and (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
    .theme-carydigest .event-card:hover {
        transform: translate(-2px, -2px);
    }

    .theme-carydigest .is-boosted .event-card:hover {
        transform: translate(-2px, -2px);
    }
}

.theme-carydigest .is-boosted .event-card {
    border: 2px solid var(--cary-border);
    box-shadow: var(--cary-shadow-md);
}

.theme-carydigest .is-boosted .event-card:hover {
    box-shadow: var(--cary-shadow-md-hover);
}

/* An editor's pick (and a local favorite): the blue border; the star is the orange highlight */
.theme-carydigest .event-card.is-pick,
.theme-carydigest .is-boosted .event-card.is-pick {
    border-color: var(--cary-blue);
}

.theme-carydigest .event-card.is-pick::after {
    color: var(--cary-highlight);
}

.theme-carydigest .event-card-regular .card-media-square .img-placeholder {
    border-radius: var(--radius);
}

/* The megaphone of a Featured card and listing: drawn in the orange highlight, using the shared icon as a mask */
.theme-carydigest .is-boosted .event-card::before,
.theme-carydigest .is-featured .biz-card::before,
.theme-carydigest .featured-mark .megaphone,
.theme-carydigest .pick-key-megaphone {
    background: var(--cary-highlight);
    -webkit-mask: url("../images/megaphone.7b25fe88d257.svg") center / contain no-repeat;
    mask: url("../images/megaphone.7b25fe88d257.svg") center / contain no-repeat;
}

/* The business placeholder pictures are red (the shared SVGs); turned to the brand blue until real photos exist */
.theme-carydigest [class*="biz-ph-"] .img-placeholder {
    filter: hue-rotate(205deg) saturate(0.7);
}

.theme-carydigest .pick-key-star {
    color: var(--cary-highlight);
}

.theme-carydigest .when-badge,
.theme-carydigest .badge.when-badge {
    color: var(--cary-text);
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
    box-shadow: var(--cary-shadow-xs);
}

.theme-carydigest .event-hero .when-badge {
    box-shadow: var(--cary-shadow-xs);
}

.theme-carydigest .extra-badge {
    background: var(--cary-surface);
    border: 1.5px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
    box-shadow: none;
}

.theme-carydigest .badge.repeats,
.theme-carydigest .badge.price-pill,
.theme-carydigest .badge.cat-badge,
.theme-carydigest .badge.loc-badge {
    background: var(--cary-surface);
    border: 1.5px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
    padding: 0 10px;
}

.theme-carydigest .badge.featured {
    background: var(--cary-highlight-tint);
    color: var(--cary-text);
    border: 2px solid var(--cary-border);
    box-shadow: var(--cary-shadow-xs);
}

.theme-carydigest .badge.favorite {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
}

.theme-carydigest .badge.happening-now {
    border-color: var(--cary-border);
    background: var(--cary-highlight-tint);
}

.theme-carydigest .badge.boosted {
    border-radius: var(--cary-radius-pill);
}

.theme-carydigest .open-badge {
    border: 1.5px solid currentColor;
}

.theme-carydigest .open-badge.is-soon {
    color: var(--cary-text);
    background: var(--cary-highlight-tint);
}

.theme-carydigest .chip {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
    padding: 2px 12px;
    box-shadow: var(--cary-shadow-xs);
}

.theme-carydigest .chip:hover {
    background: var(--cary-fill-hover);
    border-color: var(--cary-border);
}

.theme-carydigest .chip-static,
.theme-carydigest .chip-static:hover {
    background: var(--cary-surface);
    border: 1.5px solid var(--cary-border);
    box-shadow: none;
}

.theme-carydigest .more-card,
.theme-carydigest .promo-card,
.theme-carydigest .empty-card,
.theme-carydigest .ghost-card {
    border: 2px dashed var(--cary-border);
    border-radius: var(--cary-radius-card);
}

.theme-carydigest .more-card:hover {
    background: var(--cary-fill-hover);
    border-color: var(--cary-border);
}

.theme-carydigest .related-more-card {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-md);
}

.theme-carydigest .related-more-card:hover {
    border-color: var(--cary-border);
    box-shadow: var(--cary-shadow-md-hover);
}

@media (hover: hover) and (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
    .theme-carydigest .related-more-card:hover {
        transform: translate(-2px, -2px);
        box-shadow: var(--cary-shadow-md-hover);
    }
}

.theme-carydigest .is-featured .biz-card {
    border: 2px solid var(--cary-border);
    box-shadow: var(--cary-shadow-md);
}

@media (hover: hover) and (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
    .theme-carydigest .is-featured .biz-card:hover {
        transform: translate(-2px, -2px);
        box-shadow: var(--cary-shadow-md-hover);
    }
}

.theme-carydigest .is-featured .biz-card.is-pick {
    border-color: var(--cary-blue);
}

/* ---- Section headings, carousel and pager parts ---- */
.theme-carydigest .pick-line::before {
    border-top-color: var(--cary-highlight);
}

/* background-color, not the shorthand: the dots keep their content-box clip from site.css */
.theme-carydigest .carousel-dot,
.theme-carydigest .pager-dot::before {
    background-color: var(--cary-dot);
}

.theme-carydigest .carousel-dot.is-active,
.theme-carydigest .pager-dot.is-active::before {
    background-color: var(--cary-blue);
}

/* A looping row keeps the previous card just off its left edge; with the row's 10px of left padding that card's hard
   shadow showed as a black sliver. No left padding here (the hover lift of the first card is cut by 2px, nothing else). */
.theme-carydigest .carousel > .cards {
    padding-left: 0;
    margin-left: 0;
    scroll-padding-inline: 0 10px;
}

.theme-carydigest .carousel-btn {
    color: var(--cary-text);
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-sm);
}

.theme-carydigest .strip-btn {
    color: var(--cary-text);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    background: var(--cary-surface);
}

.theme-carydigest .strip-btn:hover,
.theme-carydigest .strip-btn:focus-visible {
    background: var(--cary-blue);
    color: var(--cary-on-blue);
}

.theme-carydigest .day-jump a,
.theme-carydigest .day-jump span {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
    padding: 6px 14px;
    font-weight: 700;
}

.theme-carydigest .day-jump a:hover,
.theme-carydigest .day-jump a:focus-visible {
    background: var(--cary-fill-hover);
    border-color: var(--cary-border);
}

.theme-carydigest .day-jump .strip-reset {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--cary-border);
    border-radius: 0;
    padding: 0;
}

.theme-carydigest .day-jump .show-all {
    background: transparent;
    border-color: var(--cary-border);
}

.theme-carydigest .day-jump .is-active {
    background: var(--cary-blue);
    color: var(--cary-on-blue);
    border-color: var(--cary-border);
}

.theme-carydigest .carousel-play {
    border: 2px solid var(--cary-border);
    color: var(--cary-text);
}

/* ---- Search and filter bar ---- */
.theme-carydigest .filters label,
.theme-carydigest .advanced-heading {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cary-text);
}

.theme-carydigest .filters .check {
    font-weight: 400;
}

.theme-carydigest .filters input:not([type="checkbox"]),
.theme-carydigest .filters select {
    border: 2px solid var(--cary-border);
    border-radius: var(--radius);
    background-color: var(--cary-surface);
}

.theme-carydigest .filters .search-row input[type="search"],
.theme-carydigest .filters .action-row select,
.theme-carydigest .filters .action-row button {
    border-radius: var(--cary-radius-pill);
    padding-left: 20px;
    box-shadow: var(--cary-shadow-sm);
}

/* the drop-down arrow is drawn here in the text colour (the shared picture has the other brand's red) */
.theme-carydigest .filters select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--cary-text) 50%),
        linear-gradient(135deg, var(--cary-text) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

.theme-carydigest .filters button {
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
    letter-spacing: 0.01em;
}

.theme-carydigest .filters button:hover {
    background: var(--cary-blue-deep);
}

.theme-carydigest .advanced summary {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9375rem;
}

/* ---- Event page ---- */
.theme-carydigest .event-hero {
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-box);
    box-shadow: var(--cary-shadow-lg);
    background: var(--cary-line);
}

.theme-carydigest .event-page.featured .event-hero,
.theme-carydigest .event-page.is-pick .event-hero,
.theme-carydigest .event-page.featured.is-pick .event-hero {
    border: 2px solid var(--cary-border);
    box-shadow: var(--cary-shadow-lg);
}

.theme-carydigest .event-page.is-pick .event-hero {
    border-color: var(--cary-blue);
}

.theme-carydigest .event-image {
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
}

/* The share icons are drawn in the text colour, using the shared pictures as masks */
.theme-carydigest .share-icon {
    background: var(--cary-text);
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.theme-carydigest .share-icon-email {
    -webkit-mask-image: url("../images/share-email.8d29d83710f2.svg");
    mask-image: url("../images/share-email.8d29d83710f2.svg");
}

.theme-carydigest .share-icon-text {
    -webkit-mask-image: url("../images/share-text.9bc205a2b098.svg");
    mask-image: url("../images/share-text.9bc205a2b098.svg");
}

.theme-carydigest .share-icon-share {
    -webkit-mask-image: url("../images/share-native.f64f8f26046d.svg");
    mask-image: url("../images/share-native.f64f8f26046d.svg");
}

.theme-carydigest .share-icon-link {
    -webkit-mask-image: url("../images/share-link.cab8bd2dacba.svg");
    mask-image: url("../images/share-link.cab8bd2dacba.svg");
}

.theme-carydigest .share-copy.is-copied .share-icon-link {
    background-image: none;
    -webkit-mask-image: url("../images/share-check.dbba093a575d.svg");
    mask-image: url("../images/share-check.dbba093a575d.svg");
}

.theme-carydigest .organizer-line,
.theme-carydigest .note {
    font-style: normal;
}

.theme-carydigest .venue .map-link:hover {
    color: var(--cary-blue-deep);
}

/* ---- Directory pages ---- */
.theme-carydigest .hours-table tr.today {
    background: var(--cary-highlight-tint);
}

.theme-carydigest .hood-item {
    border-bottom: 2px solid var(--cary-line);
}

/* ---- Forms (submit, errors) ---- */
.theme-carydigest .submit-form fieldset {
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    background: var(--cary-surface);
    box-shadow: var(--cary-shadow-md);
    padding: 14px 18px 8px;
    margin-bottom: 26px;
}

/* a group inside a group (categories, the format choice, "You are") is flat */
.theme-carydigest .submit-form fieldset fieldset {
    border: 2px solid var(--cary-line);
    box-shadow: none;
    background: var(--cary-page);
    margin-bottom: 14px;
}

.theme-carydigest .submit-form legend {
    padding: 0 8px;
    font-size: 1.0625rem;
}

.theme-carydigest .submit-form label {
    font-weight: 700;
}

.theme-carydigest .submit-form label.choice {
    font-weight: 400;
}

.theme-carydigest .submit-form input[type="text"],
.theme-carydigest .submit-form input[type="email"],
.theme-carydigest .submit-form input[type="url"],
.theme-carydigest .submit-form input[type="date"],
.theme-carydigest .submit-form input[type="time"],
.theme-carydigest .submit-form select,
.theme-carydigest .submit-form textarea {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--radius);
    padding: 9px 12px;
}

.theme-carydigest .submit-form .has-error input,
.theme-carydigest .submit-form .has-error select,
.theme-carydigest .submit-form .has-error textarea {
    border-color: var(--cary-error);
}

.theme-carydigest .submit-form input[type="checkbox"],
.theme-carydigest .submit-form input[type="radio"] {
    accent-color: var(--cary-blue);
}

.theme-carydigest .error-summary {
    border: 2px solid var(--cary-error);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-sm);
}

/* ---- Home, round 2 ---- */

/* 1. No typewriter chip, no hero headline line, no hero "Join for free" button on this brand. The old hero block's
   headline stays in the page for screen readers and search engines (it is the page's h1) but is not drawn; the
   chip and the button are not drawn at all. The brand's Home content replaces the hero with the post carousel;
   until the editor has done that this keeps the page clean. */
.theme-carydigest .pg-typewriter,
.theme-carydigest .pg-hero .btn,
.theme-carydigest .pg-hero .pg-bg {
    display: none;
}

.theme-carydigest .pg-hero {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 2. The posts hero (cms/blocks PostHeroBlock; structure in components/post_hero.css) */
/* the gap between the pictures; post_hero.css derives the column widths from it so the small pictures add up to
   the large one's height */
.theme-carydigest .hero-posts {
    --hp-gap: 14px;
}

@media (min-width: 64rem) {
    .theme-carydigest .hero-posts {
        --hp-gap: 18px;
    }
}

/* More room between the menu bar and the hero on a desktop (the section's own 16px of padding becomes the token);
   the space below the carousel is unchanged. */
@media (min-width: 48rem) {
    .theme-carydigest .hero-posts-section {
        padding-top: var(--cary-hero-top-gap);
    }
}

/* The line above the carousel (post_hero.html, Cary only). The section's top padding above it is the old gap above
   the carousel; the margin under the sub line is the new gap before the pictures. */
.theme-carydigest .hero-posts-title {
    /* Optical centring: the block sits in the cream space between the menu bar's line and the carousel. A line box
       adds air above the capitals, so the title is pulled up a little (-6px) and the sub line's bottom margin is
       longer by the same amount, which leaves the carousel where it was and makes the visible space above the
       title equal the visible space below the sub line. */
    margin: -6px 0 0;
    font-family: var(--cary-font-heading);
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
    line-height: 1.15;
    text-align: center;
    text-wrap: balance;
    color: var(--cary-text);
}

.theme-carydigest .hero-posts-sub {
    margin: 0.5rem 0 calc(1.5rem + 6px);  /* the 6px mirrors the title's -6px pull-up, so the carousel does not move */
    font-family: var(--cary-font-body);
    font-style: italic;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    line-height: 1.4;
    text-align: center;
    text-wrap: balance;
    color: var(--cary-muted);
}

@media (max-width: 47.99rem) {
    /* The phone title is one line: 6vw is 21.6px at 360, 23.4px at 390 and 25.8px at 430, so the 28 characters fit
       inside the 16px side gutters (328px at 360) with the sub line (16px) clearly smaller. */
    .theme-carydigest .hero-posts-title {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
        margin-top: -5px;
    }

    .theme-carydigest .hero-posts-sub {
        font-size: clamp(1rem, 4.6vw, 1.125rem);  /* 16.6px at 360, 18px from 391 up (the one-line sub fits at every phone width) */
        margin-bottom: calc(1.25rem + 5px);
    }
}

/* Phones: one post at a time, a smaller shadow (the slide leaves room for it) */
@media (max-width: 47.99rem) {
    .theme-carydigest .hero-posts-section {
        padding-top: var(--cary-hero-top-gap-mobile);
        padding-bottom: var(--cary-hero-bottom-gap-mobile);
    }

    .theme-carydigest .hp-item[data-slot] .hp-link {
        border-radius: var(--cary-radius-card);
        box-shadow: var(--cary-shadow-md);
    }

    .theme-carydigest .hp-item[data-slot] .hp-link:hover {
        box-shadow: var(--cary-shadow-md-hover);
        transform: none;
    }

    /* the caption is the lower part of the card: no outline or shadow of its own, the card's corners round it */
    .theme-carydigest .hero-posts .hp-item[data-slot] .hp-caption {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--cary-surface);
    }

    /* Every slide's caption reserves the height of a two-line title and a two-line subtitle (12px + 14px padding,
       2 x 1.2 x 1.0625rem, 4px, 2 x 1.3 x 0.875rem = 6.7rem), so the cards are all the same height and the controls
       below never move. The shared rule cuts a longer title at two lines with an ellipsis and the subtitle is cut
       the same way (the full text stays in the page for screen readers). A short title or subtitle sits at the top
       with the spare room below. The date is the badge on the picture, not a line of the caption. */
    .theme-carydigest .hero-posts .hp-item[data-slot] .hp-caption {
        min-height: 6.7rem;
    }

    /* on a phone every slide is a full card: the subtitle and badge take the large-card sizes whatever the slot */
    .theme-carydigest .hero-posts .hp-item[data-slot] .hp-sub {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-top: 4px;
        font-size: 0.875rem;
        line-height: 1.3;
    }

    .theme-carydigest .hero-posts .hp-item[data-slot] .hp-badge {
        top: 10px;
        left: 10px;
        padding: 1px 10px;
        font-size: 0.8125rem;
        line-height: 1.5;
        border-width: 2px;
        box-shadow: var(--cary-shadow-xs);
    }

    .theme-carydigest .hp-controls {
        margin-top: 4px;
    }

/* The controls row is as wide as the large card: [prev] at the card's left edge, [next] at its right edge, the
       dots centred between them (the play button, shown only for a fine pointer, so not on a phone, sits at the
       left beside prev). The row is 5px wider than the card on the right (the card's gutter for its shadow), so
       its right margin takes that back; the arrows' own shadows then hang outside the card box like the card's.
       Only CSS: the order and the aria are the script's and the template's. */
    .theme-carydigest .hp-controls {
        justify-content: flex-start;
        margin-right: 5px;
    }

    /* the dots share the space between the arrows evenly (each keeps its 28 x 44px hit area) */
    .theme-carydigest .hp-dots {
        flex: 1 1 auto;
        justify-content: space-evenly;
        margin: 0;
    }
}

.theme-carydigest .hp-link {
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    background: var(--cary-line);
    box-shadow: var(--cary-shadow-sm);
}

.theme-carydigest .hp-item[data-slot="0"] .hp-link {
    border-radius: var(--cary-radius-box);
    box-shadow: var(--cary-shadow-lg);
}

.theme-carydigest .hp-item:not([data-slot="0"]) .hp-link:hover {
    box-shadow: var(--cary-shadow-sm-hover);
}

@media (prefers-reduced-motion: no-preference) {
    .theme-carydigest .hp-link {
        transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    }

    .theme-carydigest .hp-item:not([data-slot="0"]) .hp-link:hover {
        transform: translate(-2px, -2px);
    }
}

.theme-carydigest .hp-caption {
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-xs);
}

.theme-carydigest .hp-item[data-slot="0"] .hp-caption {
    border-radius: var(--cary-radius-card);
}

.theme-carydigest .hp-title {
    font-family: var(--font-heading);
    color: var(--cary-text);
}

.theme-carydigest .hp-date {
    color: var(--cary-highlight);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* The posts hero card's date is a badge in the top-left corner of the picture (the look of the event cards' date
   badge: white pill, 2px ink outline, small bold text, the small hard shadow), after the caption in the markup so a
   screen reader still hears the title first; and the post's subtitle under the title: muted, at most two lines. */
.theme-carydigest .hp-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 1px 10px;
    font: 700 0.8125rem/1.5 var(--cary-font-body);
    white-space: nowrap;
    color: var(--cary-text);
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
    box-shadow: var(--cary-shadow-xs);
}

.theme-carydigest .hp-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-top: 2px;
    font: 400 0.875rem/1.3 var(--cary-font-body);
    color: var(--cary-muted);
}

/* the three small cards (a desktop): a smaller badge and the title only. The subtitle belongs to the large card; a
   phone shows every slide as a full card and turns the subtitle back on (the phone block above). */
.theme-carydigest .hp-item:not([data-slot="0"]) .hp-badge {
    top: 6px;
    left: 6px;
    padding: 0 7px;
    font-size: 0.6875rem;
    line-height: 1.5;
    border-width: 1.5px;
    box-shadow: none;
}

.theme-carydigest .hp-item:not([data-slot="0"]) .hp-sub {
    display: none;
}

/* The archive card, the last slide of the phone carousel (post_hero.html; hidden from 48rem). It has the frame of a
   post card (the .hp-link rule above: border, radius, hard shadow) with a pale panel where the picture would be and
   a centred label in the caption. */
.theme-carydigest .hp-archive-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cary-sky);
    color: var(--cary-blue);
}

/* The arrows are generated here, not written in the template (tests/test_button_arrows.py keeps bare arrow glyphs out
   of the block templates); the empty alternative text keeps a screen reader on the link's text alone. */
.theme-carydigest .hp-archive-arrow {
    font: 700 3rem/1 var(--cary-font-heading);
}

.theme-carydigest .hp-archive-arrow::before {
    content: "\2192" / "";
}

.theme-carydigest .hp-archive .hp-title::after {
    content: " \2192" / "";
}

.theme-carydigest .hp-archive .hp-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;  /* its height is the same reserved caption height as a post's (the phone rule above) */
}

.theme-carydigest .hp-archive:hover .hp-title,
.theme-carydigest .hp-archive:focus-visible .hp-title {
    color: var(--cary-link);
    text-decoration: underline;
}

.theme-carydigest .hp-arrow,
.theme-carydigest .hp-play {
    color: var(--cary-text);
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    box-shadow: var(--cary-shadow-xs);
    font-weight: 700;
}

.theme-carydigest .hp-arrow:hover,
.theme-carydigest .hp-play:hover {
    background: var(--cary-blue);
    color: var(--cary-on-blue);
}

.theme-carydigest .hp-controls {
    gap: 8px;
    margin-top: 14px;
}

/* A desktop: the controls sit in the middle of the cream space between the lowest shadow of the pictures and the top of
   the next card (a 4px gap above them and 33px below was measured), not against the pictures. The row moves down by
   14px with a longer top margin and gives the same 14px back with a negative bottom margin, so the hero is exactly as
   tall as before and the next section does not move. The row then reaches 14px into the next section's own top
   padding, whose band background would paint over the arrows' lower edge, so the row is lifted above it. */
@media (min-width: 48rem) {
    .theme-carydigest .hp-controls {
        position: relative;
        z-index: 1;
        margin-top: 28px;
        margin-bottom: -14px;
    }
}

.theme-carydigest .hp-dot::before {
    background-color: var(--cary-dot);
}

.theme-carydigest .hp-dot.is-active::before {
    background-color: var(--cary-blue);
}

.theme-carydigest .hp-link:focus-visible,
.theme-carydigest .hp-dot:focus-visible,
.theme-carydigest .hp-arrow:focus-visible,
.theme-carydigest .hp-play:focus-visible {
    outline-color: var(--cary-blue);
}

/* 3. No testimonials ("Locals Love ...") section on this brand: the whole section is not drawn (the block has
   no class of its own, so it is found by its quote list). The brand's Home content no longer holds the block;
   this keeps the page clean if an editor adds it back. */
.theme-carydigest .pg-inner:has(> .pg-box > .quote-grid) {
    display: none;
}

/* 4. No Latest Newsletter card on this brand (the picture and "Read the newsletter" box). The one Subscribe
   call-to-action is the blue subscribe band, which the brand's Home content places directly above the Events
   Calendar box; it is the unchanged shared block (its link is {% subscribe_href "home_band" %}). */
.theme-carydigest .news-section {
    display: none;
}

/* 5. No print marks (the grey wedge, the brand caption and the crop lines above the footer) on this brand */
.theme-carydigest .pm-wrap {
    display: none;
}

/* (from the first step: with the old hero gone, a card that sat beside it is a centred, full-width item) */
.theme-carydigest .hero-band-inner {
    grid-template-columns: minmax(0, 1fr);
}

.theme-carydigest .hero-band-inner > .news-section {
    grid-column: 1;
    grid-row: 1;
}

.theme-carydigest .hero-band .news-card {
    max-width: 30rem;
    margin: 0 auto;
}

/* ---- Phones: one shadow scale, and cards that look centred (cary 18) ----
   Below 48rem the three shadow steps shrink (5px, 4px, 3px, the --cary-*-mobile tokens above) by redefining the
   shared step tokens, so every rule of this file that uses a step follows without being touched. Buttons take the
   small step. Then each card gets a right gutter as wide as its shadow: a card's left edge is 16px from the screen
   edge and its shadow's right edge is 16px from the other edge, so the ink outline reads as centred. Only a top-level
   card gets it: a card inside a card keeps its place, and a row that scrolls sideways is left alone. */
@media (max-width: 47.99rem) {
    .theme-carydigest {
        --cary-shadow-lg: var(--cary-shadow-lg-mobile);
        --cary-shadow-md: var(--cary-shadow-md-mobile);
        --cary-shadow-sm: var(--cary-shadow-sm-mobile);
        --cary-shadow-xs: var(--cary-shadow-sm-mobile);
        --cary-shadow-lg-hover: var(--cary-shadow-lg-hover-mobile);
        --cary-shadow-md-hover: var(--cary-shadow-md-hover-mobile);
        --cary-shadow-sm-hover: var(--cary-shadow-sm-hover-mobile);
        --cary-shadow-pressed: var(--cary-shadow-pressed-mobile);
    }

    /* buttons: the small step */
    .theme-carydigest .btn {
        box-shadow: var(--cary-shadow-sm);
    }

    .theme-carydigest .btn:hover {
        box-shadow: var(--cary-shadow-sm-hover);
    }

    .theme-carydigest .btn:active {
        box-shadow: var(--cary-shadow-pressed);
    }

    /* the hero card is a big card like the blue subscribe card */
    .theme-carydigest .hero-posts .hp-item[data-slot] .hp-link {
        box-shadow: var(--cary-shadow-lg);
    }

    .theme-carydigest .hero-posts .hp-item[data-slot] .hp-link:hover {
        box-shadow: var(--cary-shadow-lg-hover);
    }

    /* right gutters: the shadow's own offset */
    .theme-carydigest .pg-box {
        margin-right: var(--cary-offset-lg-mobile);
    }

    /* The posts hero: the slide to the left must not show in the 5px of room the row keeps to the left of a slide
       (for the focus ring; the row scrolls 5px short of each slide's start). A card's hard shadow ends at its slide's
       right edge, so the next slide's room showed the previous card's outline and shadow. Fix: each slide is 5px
       wider than the row (flex-basis) and keeps the card's width with 5px more right padding, so that room holds
       only empty padding. post_hero.js steps by the slide's own width, so the stride follows. */
    .theme-carydigest .hero-posts .hp-item[data-slot] {
        flex-basis: calc(100% + 5px);
        padding-right: calc(var(--cary-offset-lg-mobile) + 5px);
    }

    .theme-carydigest .event-hero {
        width: calc(100% - var(--cary-offset-lg-mobile));  /* (a fixed 100% in the shared rule: a margin would overflow) */
    }

    .theme-carydigest .cards {
        padding-right: var(--cary-offset-md-mobile);
    }

    .theme-carydigest .pinned .cards,
    .theme-carydigest .related .cards,
    .theme-carydigest .pg-box .cards {
        padding-right: 0;
    }

    .theme-carydigest .submit-form fieldset {
        margin-right: var(--cary-offset-md-mobile);
    }

    .theme-carydigest .submit-form fieldset fieldset {
        margin-right: 0;
    }

    .theme-carydigest .error-summary {
        margin-right: var(--cary-offset-sm-mobile);
    }

    .theme-carydigest .filters,
    .theme-carydigest .pager,
    .theme-carydigest .footer-links {
        padding-right: var(--cary-offset-sm-mobile);
    }

    .theme-carydigest .event-actions .btn {
        width: calc(100% - var(--cary-offset-sm-mobile));
    }
}

/* ---- Section bands (cary 19) ----
   A CMS page is a stack of sections (main.cms-main > section.pg-inner), each a centred, max-width column holding
   one or two cards. Here each section can be a full-width band behind its cards: the colour is painted by a
   box-shadow with a huge spread on the section, and clip-path cuts it off above and below the section (and not at
   the sides), so it reaches both screen edges with no markup, no wrapper and no horizontal scrolling (a shadow adds
   no scrollable overflow). The cards, their outlines, their hard shadows and the gutters of cary 18 are unchanged.
   Bands that touch have no gap between them. Cream is the page itself, so the hero and any block not named here
   stay cream. From the top of the Home page: hero (cream), subscribe (white), events calendar (sky), sponsorships
   (cream), then the footer (white): no two neighbours share a colour. */
.theme-carydigest .cms-main > .pg-inner:not(.hero-posts-section) {
    padding-top: var(--cary-band-pad);
    padding-bottom: var(--cary-band-pad);
}

.theme-carydigest .cms-main > .pg-inner:has(> .pg-band),
.theme-carydigest .cms-main > .pg-inner:has(> .pg-box > .promo),
.theme-carydigest .cms-main > .stories-section {
    background-color: var(--cary-band);  /* the column itself ... */
    box-shadow: 0 0 0 100vmax var(--cary-band);  /* ... and everything beside it (an outer shadow is not drawn under its own box) */
    clip-path: inset(0 -100vmax);
}

.theme-carydigest .cms-main > .pg-inner:has(> .pg-band) {
    --cary-band: var(--cary-band-white);
}

.theme-carydigest .cms-main > .pg-inner:has(> .pg-box > .promo),
.theme-carydigest .cms-main > .stories-section {
    --cary-band: var(--cary-band-sky);
}

/* the hero is on the page's cream: a short bottom padding under its arrows (the next band adds its own top padding,
   so the gap from the arrows to the next card is 0.5rem plus the band padding) */
.theme-carydigest .hero-posts-section {
    padding-bottom: var(--cary-hero-bottom-gap-mobile);
}

/* no gap between the last band and the footer, and no strip under the last band */
.theme-carydigest .cms-main {
    padding-bottom: 0;
}

.theme-carydigest .cms-main + .site-footer {
    margin-top: 0;
}

@media (max-width: 47.99rem) {
    .theme-carydigest .cms-main > .pg-inner:not(.hero-posts-section) {
        padding-top: var(--cary-band-pad-mobile);
        padding-bottom: var(--cary-band-pad-mobile);
    }
}

/* ---- Subscribe landing pages (newsletter/subscribe*.html) ----
   The same centred structure as the other brand's landing page (site.css: .subscribe-*, .landing-*, .join-box), in
   this theme's card language: one white card with the 2px ink outline and the hard shadow on the cream page, holding
   the logo, the heading, two lines of copy and the address field and the blue button as one joined pill. No map, no
   new art. */
.theme-carydigest .subscribe-landing {
    max-width: 33rem;
    padding: 2rem 1.75rem 1.75rem;
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-box);
    box-shadow: var(--cary-shadow-lg);
}

.theme-carydigest .subscribe-landing .landing-logo {
    width: min(14.5rem, 100%);
    margin-bottom: 1.25rem;
}

.theme-carydigest .subscribe-landing .landing-title {
    font-family: var(--cary-font-heading);
    font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
    font-weight: 700;
    color: var(--cary-text);
}

.theme-carydigest .subscribe-landing .landing-tagline,
.theme-carydigest .subscribe-landing .landing-reassure {
    font-family: var(--cary-font-body);
    color: var(--cary-text);
}

.theme-carydigest .subscribe-landing .landing-reassure {
    color: var(--cary-muted);
}

.theme-carydigest .subscribe-form .join-box {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-box);
}

.theme-carydigest .subscribe-form .join-box input[type="email"] {
    padding: 0 18px;
    font-family: var(--cary-font-body);
    font-size: 1.0625rem;
    color: var(--cary-text);
    background: transparent;
    border: 0;
    border-radius: var(--cary-radius-pill);
}

.theme-carydigest .subscribe-form .join-box input[type="email"]::placeholder {
    color: var(--cary-muted);
    opacity: 1;
}

.theme-carydigest .subscribe-form .join-box input[type="email"]:focus-visible {
    outline: 3px solid var(--cary-blue);
    outline-offset: 0;
}

.theme-carydigest .subscribe-form .join-box .has-error input[type="email"] {
    box-shadow: inset 0 0 0 2px var(--cary-error);
}

/* the button is part of the joined box: no shadow of its own, and it does not jump on hover */
.theme-carydigest .subscribe-form .join-box .btn {
    padding: 0 24px;
    border: 0;
    box-shadow: none;
    transform: none;
}

.theme-carydigest .subscribe-form .join-box .btn:hover,
.theme-carydigest .subscribe-form .join-box .btn:active {
    box-shadow: none;
    transform: none;
}

.theme-carydigest .subscribe-form .hint {
    font-size: 0.8125rem;
    color: var(--cary-muted);
}

/* on a phone: a narrower card (its shadow gets the same right gutter as the other cards) with less side padding, so
   the 300px Turnstile widget has room */
@media (max-width: 47.99rem) {
    .theme-carydigest .subscribe-landing {
        width: calc(100% - var(--cary-offset-lg-mobile));
        padding: 1.5rem 0.75rem 1.25rem;
        box-shadow: var(--cary-shadow-lg-mobile);
    }
}

/* ---- The faded map (CaryMapBG-1920.webp, a web copy of the Cary map with soft transparent edges) behind the subscribe
   page and the Home page ----
   Where: the subscribe landing's main area (.subscribe-main) and the Home page's main area (main.home-page, set by
   cms/home_page.html; no other page has it). Colour: the page's own cream is the base (it shows through the soft edges
   of the map) and a cream wash of 50% lies over the map, so the page still reads cream and the map is a visible hint.
   Sizing: the tile is 15% wider than the page (at least 1400px, centred: its soft left and right edges fall outside the
   screen, and a phone sees the middle of it at a readable scale) and repeats down the page; its soft top and bottom
   edges blend each repeat into the next. A plain CSS background: one file, no extra request beyond it, nothing that
   delays the first picture, no fixed attachment. */
.theme-carydigest .subscribe-main,
.theme-carydigest .cms-main.home-page {
    background-color: var(--cary-page);
    background-image:
        linear-gradient(color-mix(in srgb, var(--cary-page) 50%, transparent), color-mix(in srgb, var(--cary-page) 50%, transparent)),
        url("../images/CaryMapBG-1920.d43e7cabc71a.webp");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% 100%, max(115%, 1400px) auto;
}

/* On a phone (640px and narrower) the tile is 1400px wide and only its middle shows, so the Home page is given just that
   middle: CaryMapBG-mobile.webp is the middle 900 of CaryMapBG-1920.webp's 1892 pixels at the same scale (1400 / 1892),
   about a quarter of the bytes, drawn at 1400 * 900 / 1892 px, centred. Only the url() and the size change. The subscribe
   page keeps the full picture (its size is `cover`, which would show a different part of a crop).
   The breakpoint is 640px, not 40rem: a media query's rem is the browser's default font size, so a visitor with a larger
   default would be given the crop on screens wider than it covers (a hard map edge). */
@media (max-width: 640px) {
    .theme-carydigest .cms-main.home-page {
        background-image:
            linear-gradient(color-mix(in srgb, var(--cary-page) 50%, transparent), color-mix(in srgb, var(--cary-page) 50%, transparent)),
            url("../images/CaryMapBG-mobile.c5c210dbab9c.webp");
        background-size: 100% 100%, calc(1400px * 900 / 1892) auto;
    }
}

/* The Home page's full-width bands are opaque (cream, painted by a shadow and the section's own colour) and would hide
   the map, so on this page the band colours are transparent. Paddings, cards and the carousel are not touched. */
.theme-carydigest .home-page {
    --cary-band-cream: transparent;
    --cary-band-white: transparent;
    --cary-band-sky: transparent;
}

/* ---- Sponsorships page: the partners-page layout in the Cary look (one appended block) ----
   The same layout as the Raleighwood Sponsorships page (the structure is the same idea, the look is this theme's):
   the title across the top; the stats (with their line) in the left column, vertically centred beside the right column,
   which holds "What You Get", the points and the button; Past Partners; What We Offer as picture-left rows with sand
   dividers, stacked with the picture on top on a phone; and the inquiry card with its copy line, the text and button on
   the left and a faded Cary map panel on the right. Every number and sentence is a field of the page's blocks
   (cms/blocks.py). The hook is the main area that has a Sponsor intro (`:has(> .sponsor-intro)`), so no template class
   is needed and no other page is touched. The intro's own section is `display: contents`, so its title, heading, list
   and button are grid items of the main area, and the stats block (the next section) sits beside them. */
.theme-carydigest .cms-main:has(> .sponsor-intro) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 40px;
    max-width: var(--content-width);
    margin: 0 auto;
    align-items: center;
}

.theme-carydigest .cms-main:has(> .sponsor-intro) > * {
    grid-column: 1 / -1;
    min-width: 0;
    margin-left: 0;  /* a grid item with auto side margins would shrink to its content instead of filling its column */
    margin-right: 0;
}

.theme-carydigest .cms-main:has(> .sponsor-intro) > .sponsor-intro {
    display: contents;
}

.theme-carydigest .sponsor-intro > * {
    min-width: 0;
}

.theme-carydigest .sponsor-intro .sponsor-title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 28px 16px 8px;
    font-family: var(--cary-font-heading);
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    line-height: 1.15;
    color: var(--cary-text);
}

.theme-carydigest .cms-main:has(> .sponsor-intro) > .pg-stats {
    grid-column: 1;
    grid-row: 2;
}

.theme-carydigest .sponsor-intro .box-heading {
    grid-column: 1;
    grid-row: 3;
    margin: 16px 16px 4px;
    font-family: var(--cary-font-heading);
    color: var(--cary-text);
}

.theme-carydigest .sponsor-intro .points {
    grid-column: 1;
    grid-row: 4;
    max-width: none;
    margin: 8px 16px;
    font-size: 1.0625rem;
    line-height: 1.45;
}

.theme-carydigest .sponsor-intro .points li {
    margin-bottom: 12px;
}

.theme-carydigest .sponsor-intro .box-cta {
    grid-column: 1;
    grid-row: 5;
    margin: 12px 16px 20px;
}

.theme-carydigest .pg-stats .stats-note {
    margin-bottom: 10px;
    font-style: italic;
    font-size: 1rem;
    color: var(--cary-muted);
}

@media (min-width: 48rem) {
    .theme-carydigest .cms-main:has(> .sponsor-intro) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .theme-carydigest .cms-main:has(> .sponsor-intro) > .pg-stats {
        grid-row: 2 / span 3;
    }

    .theme-carydigest .sponsor-intro .box-heading,
    .theme-carydigest .sponsor-intro .points,
    .theme-carydigest .sponsor-intro .box-cta {
        grid-column: 2;
    }

    .theme-carydigest .sponsor-intro .box-heading {
        grid-row: 2;
        align-self: end;
    }

    .theme-carydigest .sponsor-intro .points {
        grid-row: 3;
        align-self: center;
    }

    .theme-carydigest .sponsor-intro .box-cta {
        grid-row: 4;
        align-self: start;
    }
}

/* Past Partners and What We Offer: a sand divider above each, the heading in the theme's heading font */
.theme-carydigest .cms-main:has(> .sponsor-intro) .pg-partners,
.theme-carydigest .cms-main:has(> .sponsor-intro) .pg-offers {
    margin: 24px 16px 0;
    padding: 28px 0 0;
    border-top: 2px solid var(--cary-line);
}

.theme-carydigest .cms-main:has(> .sponsor-intro) .pg-partners .box-heading,
.theme-carydigest .cms-main:has(> .sponsor-intro) .pg-offers > .box-heading {
    margin-bottom: 20px;
    font-family: var(--cary-font-heading);
    font-size: 1.75rem;
    color: var(--cary-text);
}

.theme-carydigest .pg-offers .offer-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 28px 0;
    border-top: 2px solid var(--cary-line);
}

.theme-carydigest .pg-offers .offer-row:first-of-type {
    border-top: 0;
    padding-top: 8px;
}

/* the picture is a card like the other cards of this theme (white edge, 2px ink outline, small hard shadow) */
.theme-carydigest .pg-offers .offer-media {
    padding: 0 var(--cary-offset-md-mobile, 4px) var(--cary-offset-md-mobile, 4px) 0;  /* room for the shadow */
}

.theme-carydigest .pg-offers .offer-media img,
.theme-carydigest .pg-offers .offer-media .img-placeholder {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-md);
}

.theme-carydigest .pg-offers .offer-text h3 {
    margin: 0 0 12px;
    font-family: var(--cary-font-heading);
    font-size: 1.5rem;
    color: var(--cary-text);
}

.theme-carydigest .pg-offers .offer-quote {
    margin: 0 0 12px;
    font-style: italic;
    color: var(--cary-muted);
    quotes: "\201C" "\201D";
}

.theme-carydigest .pg-offers .offer-quote::before {
    content: open-quote;
}

.theme-carydigest .pg-offers .offer-quote::after {
    content: close-quote;
}

.theme-carydigest .pg-offers .offer-text p {
    margin: 0 0 16px;
}

@media (min-width: 48rem) {
    .theme-carydigest .pg-offers .offer-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: 48px;
    }
}

/* the inquiry card (the theme's big white card): the copy line, the text and button on the left, a faded Cary map on the right */
.theme-carydigest .pg-box.inquiry .box-heading {
    font-family: var(--cary-font-heading);
    color: var(--cary-text);
}

.theme-carydigest .pg-box.inquiry .box-sub {
    margin-bottom: 18px;
}

.theme-carydigest .pg-box.inquiry .inquiry-layout {
    align-items: stretch;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
}

.theme-carydigest .pg-box.inquiry .inquiry-note {
    align-self: center;
    padding: 8px 12px;
}

.theme-carydigest .pg-box.inquiry .inquiry-note p {
    margin: 0 0 16px;
}

.theme-carydigest .pg-box.inquiry .inquiry-map {
    min-height: 15rem;
}

.theme-carydigest .pg-box.inquiry .inquiry-map img,
.theme-carydigest .pg-box.inquiry .inquiry-map .img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 15rem;
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    background-color: var(--cary-page);
    background-image:
        linear-gradient(color-mix(in srgb, var(--cary-page) 30%, transparent), color-mix(in srgb, var(--cary-page) 30%, transparent)),
        url("../images/CaryMapBG-1920.d43e7cabc71a.webp");
    background-position: center;
    background-size: cover;
}

.theme-carydigest .pg-box.inquiry .inquiry-map img {
    background: none;
}

@media (min-width: 48rem) {
    .theme-carydigest .pg-box.inquiry .inquiry-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* ---- The public event form: the two boxes (required, optional) and the Featured box in the Cary card look ----
   White cards with the 2px ink outline, the card radius and the hard shadow, a pale title bar, groups inside a box in
   the flat sand-outlined style the form already used, and the required star in the theme's burnt orange. The layout
   (two columns from 64rem) is in site.css. */
.theme-carydigest .form-box {
    /* Cary only: the box holding the form is a clear light grey, so the white inputs, pickers and chips read against it. The
       elements that deliberately match the box (the chevron button) take the same token through --section-bg. */
    --cary-form-grey: #ecedee;
    --section-bg: var(--cary-form-grey);
    background: var(--cary-form-grey);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-md);
}

.theme-carydigest .form-box-title {
    font-family: var(--cary-font-heading);
    border-bottom: 2px solid var(--cary-border);
    border-radius: calc(var(--cary-radius-card) - 2px) calc(var(--cary-radius-card) - 2px) 0 0;
    background: var(--cary-blue-deep);   /* the dark blue Cary uses for its hovered buttons and deep fills, with white text */
    color: var(--cary-on-blue);
}

.theme-carydigest .form-heading {
    font-family: var(--cary-font-heading);
}

.theme-carydigest .submit-form .req {
    color: var(--cary-highlight);
}

/* a group inside a box is flat (the photo, the choices): a sand outline on the page's cream, no shadow */
.theme-carydigest .submit-form .form-box fieldset {
    border: 2px solid var(--cary-line);
    border-radius: var(--cary-radius-card);
    box-shadow: none;
    background: var(--cary-page);
    margin-bottom: 14px;
    padding: 10px 14px 6px;
}

.theme-carydigest .submit-form .form-box .field.choices legend {
    padding: 0 6px;
    font-weight: 700;
}

.theme-carydigest .submit-form .form-box fieldset#photo {
    margin-bottom: 14px;
    padding: 10px 14px 6px;
    background: var(--cary-page);
    border: 2px solid var(--cary-line);
}

@media (max-width: 47.99rem) {
    .theme-carydigest .form-box {
        margin-right: var(--cary-offset-md-mobile);
        box-shadow: var(--cary-shadow-md-mobile);
    }

    .theme-carydigest .submit-form .form-box fieldset {
        margin-right: 0;
    }
}

/* the live character counter's warning colour (low or over) is the theme's error colour */
.theme-carydigest .char-count.is-low,
.theme-carydigest .char-count.is-over,
.theme-carydigest .repeat-sentence.is-over,
.theme-carydigest .venue-group.is-typeahead.link-shown .only-new-venue > .hint {
    color: var(--cary-error);
}

/* the divider under the top block of the Required box: the sand rule the Sponsorships dividers use */
.theme-carydigest .form-divider {
    border-top: 2px solid var(--cary-line);
}

/* the natural dates' calendar button and error line (site.css) in the Cary look */
.theme-carydigest .date-cal {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--radius);
}

/* the real (hidden) time input must stay one invisible pixel: this theme's input look (2px border, padding, width) made it a 28 x 22 box */
.theme-carydigest .submit-form .date-entry .date-native {
    width: 1px;
    height: 1px;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

.theme-carydigest .section-lock-hint {
    color: var(--cary-error);
}

.theme-carydigest .date-echo.is-error {
    color: var(--cary-error);
}

/* the price preview box (site.css): white with the 2px black outline of the inputs (change 83: it was cream with a sand outline) */
.theme-carydigest .price-preview {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
}

/* the flyer picker (site.css): the button-style label is the Cary secondary button (white, 2px black outline, pill); the preview frame
   and its thumbnail are white with the 2px black outline of the inputs, no tan */
.theme-carydigest .flyer-preview {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
}

.theme-carydigest .flyer-thumb {
    border: 2px solid var(--cary-border);
    border-radius: var(--radius);
}

/* the centred sub-headings' rules on either side of the title use the same sand rule */
.theme-carydigest .form-section-title::before,
.theme-carydigest .form-section-title::after {
    border-top: 2px solid var(--cary-line);
}

/* the categories picker (site.css): the select-like trigger, its panel, the chips and the Done button in the Cary look */
.theme-carydigest .multi-select > summary {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--radius);
}

.theme-carydigest .multi-select-panel {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-md);
}

/* the venue type-ahead's list (site.css) looks like the categories panel */
.theme-carydigest .venue-combo-list {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-md);
}

.theme-carydigest .multi-select .chip {
    background: var(--cary-surface);
    border: 1.5px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
    padding: 0 10px;
    font-weight: 700;
}

.theme-carydigest .multi-select-done {
    padding: 0 22px;
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-pill);
}

/* Change 83 (Cary pass): the groups of choices inside the Event Submission box (Categories, How often, On these days, You are, the
   photo) are NOT boxed: no tan fill, no sand outline, no padding, and the legend reads like the bold labels of the fields beside
   them, as on the other brand. Their pickers and answers keep the white, 2px black look. */
.theme-carydigest .submit-form .form-box fieldset.field.choices,
.theme-carydigest .submit-form .form-box fieldset#photo {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
}

.theme-carydigest .submit-form .form-box .field.choices legend,
.theme-carydigest .submit-form .form-box fieldset#photo legend {
    padding: 0;
    margin-bottom: 2px;
    font-size: 0.9375rem;
    font-weight: 700;
}

/* the flyer block's legend is a field label like Ticket price: the body font and the label's line height and gap */
.theme-carydigest .submit-form .form-box fieldset#photo legend {
    font-family: inherit;
    line-height: inherit;
    margin-bottom: 4px;
}

/* the legends sit level with the labels beside them (site.css nudges them 1px for the other brand's font) */
@media (min-width: 64rem) {
    .theme-carydigest .form-top > #id_categories > legend,
    .theme-carydigest .form-date-row > #id_format > legend {
        top: 0;
    }
}

.theme-carydigest .form-section-title {
    font-family: var(--cary-font-heading);
}

/* in the date row the group ("How often does it happen?", "On these days") has no space under it, so it ends level with the
   inputs beside it */
.theme-carydigest .submit-form .form-box .form-date-row > .field.choices,
.theme-carydigest .submit-form .form-box .form-date-rest .repeat-row .field.choices {
    margin-bottom: 0;
}

/* ===== FEATURED INTEREST CARDS (ADR 0129), Cary look - design block, safe to tweak or remove as a whole =====
   White cards with the 2px black border on the form's grey (no tan box); the chosen card gets a dark-blue border, a thicker
   rim and a dark-blue "Selected" tick (no tint: the card stays white); the heading is the dark blue. */
.theme-carydigest .interest-block {
    border-top: 2px solid var(--cary-line);
}

.theme-carydigest .submit-form .form-box .interest-block .field.choices legend {
    font-family: var(--cary-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cary-blue-deep);
}

.theme-carydigest .interest-card {
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
}

.theme-carydigest .interest-price,
.theme-carydigest .interest-title {
    font-family: var(--cary-font-heading);
}

.theme-carydigest .interest-selected {
    color: var(--cary-blue-deep);
}

@supports selector(:has(*)) {
    .theme-carydigest .interest-card:has(> input:checked) {
        border-color: var(--cary-blue-deep);
        box-shadow: 0 0 0 2px var(--cary-blue-deep);
    }

    .theme-carydigest .interest-card:has(> input:focus-visible) {
        outline: 3px solid var(--cary-highlight);
        outline-offset: 3px;
    }
}
/* ===== end FEATURED INTEREST CARDS (Cary) ===== */

/* the cards' words are regular weight (the theme makes labels bold); only the chosen card's title is bold (site.css) */
.theme-carydigest .submit-form .interest-card {
    font-weight: 400;
}

.theme-carydigest .interest-card > .interest-price {
    font-weight: 700;
}

/* ===== FEATURED INTEREST EXAMPLE PANEL (ADR 0129), Cary look - design block, safe to tweak or remove as a whole =====
   The example cards inherit Cary's own card styling (the .event-card rules above); only the panel's own parts are set here. */
.theme-carydigest .interest-examples {
    border-top: 2px solid var(--cary-line);
}

.theme-carydigest .interest-examples-label {
    font-family: var(--cary-font-heading);
    color: var(--cary-blue-deep);
}

/* the Video feature bar (size and spacing are shared, site.css): Cary blue (the Event Submission bar's own --cary-blue-deep) with white
   words, and the same hard shadow and 2px black border as the example card */
.theme-carydigest .example-video-bar {
    background: var(--cary-blue-deep);
    color: var(--cary-on-blue);
    border: 2px solid var(--cary-border);
    border-radius: var(--cary-radius-card);
    box-shadow: var(--cary-shadow-md);
}

/* ===== end FEATURED INTEREST EXAMPLE PANEL (Cary) ===== */

/* ===== FORM PROGRESS AIDS (Cary look) - design block, safe to tweak or remove as a whole =====
   A white track with the 2px black border and the Cary blue fill; while the bar is stuck at the top it is slimmer (6px high, 1px
   border) with a black hairline under the row. The check marks are the Cary blue. */
@media (min-width: 48rem) {
    .theme-carydigest .form-box {
        --submit-bar-top: 64px;   /* the Cary menu is 66px high from 48rem: 2px under its edge */
    }
}

.theme-carydigest .submit-form .submit-box-legend {
    color: var(--cary-error);
}

.theme-carydigest .submit-progress-track {
    height: 14px;
    background: var(--cary-surface);
    border: 2px solid var(--cary-border);
}

.theme-carydigest .submit-progress.is-stuck .submit-progress-track {
    height: 8px;
    border-width: 1px;
}

.theme-carydigest .submit-progress.is-stuck {
    border-bottom-color: var(--cary-border);
}

.theme-carydigest .submit-progress-fill {
    background: var(--cary-blue);
}

.theme-carydigest .section-check {
    color: var(--cary-blue-deep);
}
/* ===== end FORM PROGRESS AIDS (Cary) ===== */