/* ==========================================================================
   CUSTOM WORDPRESS STYLESHEET

   Table of Contents:
   1. Navigation & Submenus
   2. Accessibility (A11y)
   3. Site Branding Link
   4. Clickable Event Cards
   5. Past Events — Filters & Show More
   6. Event Media Badges (Photos/Videos chips)
   ========================================================================== */

/* ==========================================================================
   1. Navigation & Submenus
   Used On: Navigation blocks
   Added: June 11, 2026
   ========================================================================== */

/* WordPress core itself (wp-includes/blocks/navigation/style.css) sets
   `.has-child .submenu-container > .item > .content { display: flex;
   flex-grow: 1; padding: 0.5em 1em; }` — a 5-class selector that beats a
   plain 3-class one, so an earlier, simpler version of this rule lost the
   cascade on `display`/`padding` and only its unopposed properties
   (flex-direction, align-items) actually applied. That's also why a flex
   *row* here doesn't just work for free: flex-wrap treats the label as one
   atomic item, so a two-word label like "Faith Communities" that can't fit
   beside the icon even at its longest single word gets pushed entirely
   below the icon rather than wrapping in place — confirmed live before
   landing on this approach. Repeating core's exact selector (so this wins
   on specificity + later source order, no !important needed) swaps back
   to a plain block container, where a hanging indent works
   correctly: padding-inline-start + a matching negative text-indent is the
   classic trick — text-indent shifts only the first line, canceling *part*
   of the padding so the icon lands right where the label's own text used
   to start (core's original 1em left gutter — canceling the *whole*
   padding instead, as an earlier version of this rule did, leaves the icon
   flush against the dropdown's edge with no inset at all, which reads as a
   layout bug); any wrapped continuation line of the label answers to the
   padding alone, landing indented under the label's own start rather than
   back under the icon. Icon width + margin-inline-end is 1.3em, so the
   left padding is core's original 1em *plus* that 1.3em (both em-based, so
   this keeps working if the item's font-size ever changes), and the
   text-indent cancels only the 1.3em icon portion — not the full padding —
   so line 1 still opens with the original 1em gutter before the icon. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  display: block;
  padding: 0.5em 1em 0.5em 2.3em;
  text-indent: -1.3em;
}

/* Reveal and style default hidden WordPress menu descriptions */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  font-weight: normal;
  line-height: 1.3;
  opacity: 0.7;
  margin-top: 2px;
  text-indent: 0; /* text-indent inherits — cancel the parent's hanging-indent value or this line shifts left too */
  white-space: normal; /* Allows long descriptions to wrap naturally */
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
    padding: 12px;
    height: auto;
    width: auto;
}

/* Highlight the active/current page link in the navigation */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  /* Parent theme sets `a { text-decoration-thickness: 1px !important }`,
     so this one genuinely needs !important to win. */
  text-decoration-thickness: 2px !important;
  font-weight: 600;
}

/* Optional: Keep the submenu description styling intact when it's the current page */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__description {
  text-decoration: none;
  font-weight: normal;
}
/* ==========================================================================
   2. Accessibility (A11y)
   Used On: parts/event-archives.html (Past Events filter bar legend)
   Added: June 11, 2026
   ========================================================================== */

/* Hide content visually while keeping it readable for screen readers.
   Used by the Past Events filter bar's <legend> (section 5). */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* ==========================================================================
   3. Site Branding Link
   Used On: parts/header.html, parts/footer.html (.litw-branding group)
   Added: September 7, 2026
   ==========================================================================

   The Site Logo and Site Title sit side by side. The logo block renders its own
   <a rel="home">; the title block is deliberately isLink:false, so there is
   exactly ONE link and one accessible name in the group. Stretching that link's
   ::after over the whole group makes the wordmark clickable too without adding
   a second anchor -- one tab stop, one accessible name, no nested interactive
   elements. Do NOT set isLink:true on the Site Title: that reintroduces the
   two-adjacent-links pattern the audit flagged.

   In the header the title carries blockVisibility viewport tablet/mobile:false,
   so core hides it with display:none below 1024px. The group then shrinks to
   the logo alone and the overlay shrinks with it -- no dead click area.
   ========================================================================== */

.litw-branding {
  position: relative;
}

/* Stretch the logo's link across the group. `custom-logo-link` is what the
   Site Logo block emits when a custom logo is set; `wp-block-site-logo__link`
   is the fallback when it falls back to the site icon. */
.litw-branding :is(.custom-logo-link, .wp-block-site-logo__link)::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Cursor + hover affordance over the wordmark, which is now part of the link. */
.litw-branding:hover .wp-block-site-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* Focus ring must outline what is actually clickable (the whole group), not
   just the logo. `:has(:focus-visible)` rather than `:focus-within` so a mouse
   click does not draw it -- same convention as the blob safeguards below. */
.litw-branding:has(:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

@supports selector(:has(a)) {
  /* Only drop the anchor's own ring once we know the group-level ring above
     will render, so focus is never left invisible. */
  .litw-branding :is(.custom-logo-link, .wp-block-site-logo__link):focus-visible {
    outline: none;
  }
}

/* /* ==========================================================================
   Contact Form 7 - Twenty Twenty-Five (FSE) Integration
   ========================================================================== */

/* 1. Form Layout & Spacing */
.wpcf7 form {
    display: flex;
    flex-direction: column;
    /* 1.25rem between fields: clearly more than the 0.375rem between a
       label and its own box, so each pair still reads as one group. */
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
}

/* Ensure box-sizing applies to all form elements */
.wpcf7 form,
.wpcf7 form * {
    box-sizing: border-box;
}

/* Remove CF7's default paragraph margins to let flex gap handle spacing */
.wpcf7 form p {
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* 2. Labels */
.wpcf7 label {
    display: block;
    font-family: var(--wp--preset--font-family--body, inherit);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast, #111);
    font-weight: 600;
}

/* 3. Inputs & Textareas */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    max-width: 100%; /* Keeps controls inside screen bounds */
    margin-top: 0.375rem;
    padding: 0.5625rem 0.875rem;
    background-color: var(--wp--preset--color--base, #ffffff);
    color: var(--wp--preset--color--contrast, #111111);
    border: 1px solid var(--wp--preset--color--contrast, #111111);
    /* 1rem matches the radius already used on cards and content sections
       site-wide (event/gallery card featured images, the Event Types
       columns) -- one rounding value ties inputs into that same "boxy
       surface" family, distinct from the fully pill-shaped buttons below
       (--wp--custom--button--border-radius, 9999px). */
    border-radius: var(--wp--custom--border-radius, 1rem);
    font-family: inherit;
    /* 16px is the floor: below it iOS Safari zooms the page on focus. */
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Ensure textareas have enough height */
.wpcf7 textarea {
    min-height: 7.5rem;
    resize: vertical;
}

/* 4. Accessibility Focus States */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    /* High contrast outline matching WP core accessibility standards */
    outline: 2px solid var(--wp--preset--color--contrast, #111);
    outline-offset: 2px;
    border-color: var(--wp--preset--color--contrast, #111);
}

/* Placeholder hints ("e.g. City, State"). The browser default #757575 is
   4.34:1 on the base #f7f8fa, under AA's 4.5:1 (1.4.3). #596673 is a
   navy-leaning grey: 5.5:1 on base, 4.8:1 on the deepest light surface
   (accent-7 #e4e9ef), still lighter than the #1e2d3d typed text. */
.wpcf7 ::placeholder,
.wp-block-search__input::placeholder {
    color: #596673;
    opacity: 1; /* Firefox dims placeholders by default */
}

/* 5. Submit Button (Matches core WP Button block) */
.wpcf7 input[type="submit"] {
    display: inline-flex;
    justify-content: center;
    max-width: 100%;
    background-color: var(--wp--preset--color--contrast, #111111);
    color: var(--wp--preset--color--base, #ffffff);
    border: none;
    border-radius: var(--wp--custom--button--border-radius, 9999px);
    min-height: 2.75rem;
    padding: 0.625rem 1.75rem;
    font-size: var(--wp--preset--font-size--small);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease, outline 0.2s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus {
    opacity: 0.85;
}

.wpcf7 input[type="submit"]:focus-visible {
    outline: 2px solid var(--wp--preset--color--contrast, #111);
    outline-offset: 4px;
}

/* 6. Validation & Error Messages */
.wpcf7 .wpcf7-not-valid-tip {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast, #111);
    font-weight: 700;
    margin-top: var(--wp--preset--spacing--10, 0.25rem);
    display: block;
}

/* Response Output Box (Success/Failure at bottom) */
.wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: var(--wp--preset--spacing--30, 1rem);
    border: 2px solid var(--wp--preset--color--contrast, #111);
    background-color: var(--wp--preset--color--base, #ffffff);
    color: var(--wp--preset--color--contrast, #111);
    border-radius: var(--wp--custom--border-radius, 1rem);
    font-weight: 500;
    text-align: center;
}

/* 7. Grouped controls: the checkbox group is a <fieldset> so its question is
   announced as the group name (WCAG 1.3.1). Strip the browser frame and make
   the <legend> read like the other field labels. */
.wpcf7 .litw-cf7-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.wpcf7 .litw-cf7-fieldset legend {
    padding: 0;
    font-family: var(--wp--preset--font-family--body, inherit);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast, #111);
    font-weight: 600;
}

/* Hint text inside a field's <label>: part of the accessible name, but
   visually secondary to the question. */
.wpcf7 .litw-cf7-hint {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    color: #596673; /* the placeholder grey: 5.5:1 on base */
}

/* CF7's autop puts a <br> after the hint; the hint is already a block, so
   that <br> would add a whole empty line before the box. */
.wpcf7 .litw-cf7-hint + br {
    display: none;
}

/* 8. Paired fields. Each field sits in its own <div> (CF7's autop would
   otherwise merge two labels into one <p>). auto-fit drops to one column
   wherever two won't fit at 16rem, so phones get a single column with no
   breakpoint, and a lone visible field spans the row. align-items: end
   lines the inputs up when one label wraps to two lines. */
.wpcf7 .litw-cf7-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1.25rem 1rem;
    align-items: end;
}

/* Option lists: one option per line, two columns where there is room. */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio {
    display: grid;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
}

/* Pill choices (.litw-cf7-pills on the fieldset): the native radio or
   checkbox stays in the DOM, focusable and announced as usual (arrow keys
   move within the radio group), but is visually hidden. The label is the
   pill. Every pill, single- or multi-choice, leads with the same ring;
   selected fills it white with a drawn check and fills the pill Navy, so
   state is never colour-only (1.4.1). The legend says "(choose any)" where
   several are allowed. min-height 2.75rem keeps every
   pill a full-size target. */
.wpcf7 .litw-cf7-pills .wpcf7-checkbox,
.wpcf7 .litw-cf7-pills .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wpcf7 .litw-cf7-pills .wpcf7-list-item label {
    position: relative;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.375rem 1rem 0.375rem 0.625rem;
    border: 1px solid var(--wp--preset--color--accent-3, #2b4a68);
    border-radius: var(--wp--custom--button--border-radius, 9999px);
    background-color: var(--wp--preset--color--accent-1, #ffffff);
    color: var(--wp--preset--color--accent-3, #2b4a68);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wpcf7 .litw-cf7-pills .wpcf7-list-item input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.wpcf7 .litw-cf7-pills .wpcf7-list-item label:hover {
    background-color: var(--wp--preset--color--accent-5, #edf1f5);
}

.wpcf7 .litw-cf7-pills .wpcf7-list-item label:has(input:checked) {
    background-color: var(--wp--preset--color--accent-3, #2b4a68);
    color: var(--wp--preset--color--accent-1, #ffffff);
}

.wpcf7 .litw-cf7-pills .wpcf7-list-item-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Indicator: same size selected or not, so a choice never reflows the row. */
.wpcf7 .litw-cf7-pills .wpcf7-list-item-label::before {
    content: "";
    flex: none;
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-radius: 50%;
}

/* Checked: a white disc with a drawn Navy check (2.25 stroke, round caps,
   like the site's icon set). The SVG carries explicit width/height matching
   its viewBox, or it renders tiny. */
.wpcf7 .litw-cf7-pills label:has(input:checked) .wpcf7-list-item-label::before {
    border-color: var(--wp--preset--color--accent-1, #ffffff);
    background: var(--wp--preset--color--accent-1, #ffffff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%232b4a68' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.875rem 0.875rem no-repeat;
}

.wpcf7 .litw-cf7-pills .wpcf7-list-item label:has(input:focus-visible) {
    outline: 2px solid var(--wp--preset--color--contrast, #1e2d3d);
    outline-offset: 2px;
}

.wpcf7 .wpcf7-list-item {
    margin: 0;
}

.wpcf7 .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-weight: 400;
}

.wpcf7 .wpcf7-list-item input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.15em 0 0;
    accent-color: var(--wp--preset--color--accent-3, #2b4a68);
}

/* Groups the plugin's cf7-enhancements.js shows only for certain answers.
   The grid/block display rules above would otherwise override [hidden]. */
.wpcf7 [data-litw-show-for][hidden] {
    display: none;
}

/* Everything after the topic choice, revealed by the first choice. Same
   column rhythm as the form itself. */
.wpcf7 .litw-cf7-after-topic {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* A revealed group fades in: the animation restarts each time [hidden]
   lifts, because display: none to visible starts animations afresh. */
@media (prefers-reduced-motion: no-preference) {
    .wpcf7 [data-litw-show-for]:not([hidden]) {
        animation: litw-cf7-reveal 0.2s ease-out;
    }
}

@keyframes litw-cf7-reveal {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
}

/* Modal panels (plugin litw/modal) on the site surface: Page white with a
   Navy title, and inputs on card white so they lift off it. The plugin's
   sticky header reads --litw-modal-surface for its own background. */
dialog.litw-modal:not(.litw-modal--search) {
    --litw-modal-surface: var(--wp--preset--color--base, #f7f8fa);
    color: var(--wp--preset--color--contrast, #1e2d3d);
}

/* One step down the scale from h2's xx-large: an exception to "heading
   level sets size", agreed 2026-10-21, so the title fits the drawer on one
   line. */
dialog.litw-modal:not(.litw-modal--search) .litw-modal__title {
    color: var(--wp--preset--color--accent-3, #2b4a68);
    font-size: var(--wp--preset--font-size--x-large);
}

@media (min-width: 600px) {
    dialog.litw-modal:not(.litw-modal--search) {
        --litw-modal-pad: 1.5rem;
    }
}

dialog.litw-modal .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
    background-color: var(--wp--preset--color--accent-1, #ffffff);
}

/* Send pinned to the bottom of the side drawer (600px+), so it is in reach
   however long the form is. Not on the phone sheet, where the keyboard needs
   the room. Bleeds over the panel's side padding (--litw-modal-pad, set by
   the plugin) so the bar spans the panel. */
@media (min-width: 600px) {
    dialog.litw-modal .wpcf7 form p:has(> .wpcf7-submit) {
        position: sticky;
        bottom: 0;
        z-index: 1;
        width: auto;
        max-width: none;
        margin-inline: calc(-1 * var(--litw-modal-pad, 2rem));
        padding: var(--wp--preset--spacing--30, 1rem) var(--litw-modal-pad, 2rem);
        border-top: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
        background: var(--litw-modal-surface, #fff);
    }

    /* The bar is the panel's footer: no padding under it, so at the end of
       the form it sits flush on the bottom edge. */
    dialog.litw-modal .litw-modal__dialog:has(.wpcf7-submit) {
        padding-bottom: 0;
    }
}

/* Thank-you panel (plugin cf7-enhancements.js): after a successful send it
   replaces everything else in the form, including the sticky Send bar. */
.wpcf7 form.litw-cf7-sent > :not(.litw-cf7-thanks) {
    display: none;
}

.wpcf7 .litw-cf7-thanks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-block: 0.5rem 1.5rem;
}

.wpcf7 .litw-cf7-thanks[hidden] {
    display: none;
}

/* Gold disc with a drawn Navy check; decorative, the heading says it. */
.wpcf7 .litw-cf7-thanks::before {
    content: "";
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--wp--preset--color--accent-2, #f2c14e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.25 4.25 8.75-9.5' fill='none' stroke='%232b4a68' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.5rem 1.5rem no-repeat;
}

.wpcf7 .litw-cf7-thanks__title {
    margin: 0;
    color: var(--wp--preset--color--accent-3, #2b4a68);
    font-size: var(--wp--preset--font-size--large);
}

.wpcf7 .litw-cf7-thanks__title:focus {
    outline: none; /* focused by script for the announcement, not by the user */
}

.wpcf7 .litw-cf7-thanks__line {
    width: auto;
    font-size: var(--wp--preset--font-size--small);
}

.wpcf7 .litw-cf7-thanks__summary {
    display: grid;
    gap: 0.375rem;
    width: 100%;
    margin: 0.25rem 0 0.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--wp--custom--border-radius, 1rem);
    background: var(--wp--preset--color--accent-1, #ffffff);
    font-size: var(--wp--preset--font-size--small);
}

.wpcf7 .litw-cf7-thanks__summary > div {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.75rem;
}

.wpcf7 .litw-cf7-thanks__summary > div[hidden] {
    display: none;
}

.wpcf7 .litw-cf7-thanks__summary :is(dt, dd) {
    margin: 0;
    overflow-wrap: anywhere;
}

.wpcf7 .litw-cf7-thanks__summary dt {
    color: #596673;
    font-weight: 600;
}

.wpcf7 .litw-cf7-thanks__close {
    min-height: 2.75rem;
    padding: 0.625rem 1.75rem;
    border: 0;
    border-radius: var(--wp--custom--button--border-radius, 9999px);
    background: var(--wp--preset--color--accent-3, #2b4a68);
    color: var(--wp--preset--color--accent-1, #ffffff);
    font: inherit;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    cursor: pointer;
}

.wpcf7 .litw-cf7-thanks__close:focus-visible {
    outline: 2px solid var(--wp--preset--color--contrast, #1e2d3d);
    outline-offset: 3px;
}

/* Not ready yet (plugin cf7-enhancements.js): outlined instead of filled.
   Still a working button; pressing it early shows CF7's inline errors. */
.wpcf7 form.litw-cf7-incomplete input[type="submit"] {
    background-color: transparent;
    color: var(--wp--preset--color--accent-3, #2b4a68);
    box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-3, #2b4a68);
}

/* ===================================================================
   core/accordion: chevron toggle icon instead of the core plus sign.

   Core saves a literal "+" text node inside
   .wp-block-accordion-heading__toggle-icon (aria-hidden) and rotates
   that span 45deg when the item opens, turning + into x. There is no
   block setting for the glyph, and the "+" is baked into the saved
   post content plus three block deprecations, so this is done purely
   in CSS: hide the glyph, draw a chevron with a rotated border box,
   and swap the open-state rotation to 180deg.

   visibility (not font-size/color) hides the "+" so the span keeps its
   font-size and the 1.2em box and all em sizing below still resolve;
   the pseudo-element opts back in with visibility: visible.

   The pseudo-element must be positioned absolutely, NOT left as a flex
   item. The span is display:flex and the hidden "+" is still a flex
   item taking up width, so justify-content:center would centre the
   *pair* — parking the chevron left of the span's centre, which is the
   origin the 180deg flip rotates about. It would then swing across and
   land right of where it started. Absolute centring puts the box
   centre on the rotation origin, so the flip stays put horizontally.

   No transition is declared here on purpose — core already transitions
   `transform` on this same span, guarded by prefers-reduced-motion, so
   the flip inherits that animation and stays off for reduced motion.
   The panel's own grid-template-rows glide is untouched.
   =================================================================== */

.wp-block-accordion-heading__toggle-icon {
  visibility: hidden;
  position: relative;
}

.wp-block-accordion-heading__toggle-icon::before {
  content: "";
  visibility: visible;
  box-sizing: border-box;
  position: absolute;
  /* Physical, not logical: percentage translates are not
     direction-aware, so top/left is the correct pairing. */
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  /* Centre the box on the span's centre (= the flip's rotation origin),
     then nudge up: a 0.5em square rotated 45deg drops its apex 0.354em
     below the box centre, so the optical centre sits 0.177em low.
     Under the parent's 180deg flip that offset inverts along with the
     shape and re-cancels, so one value covers both states. */
  transform: translate(-50%, calc(-50% - 0.177em)) rotate(45deg);
}

/* Open state: point the chevron up. Same selector as core's 45deg
   plus-to-x rule, won on source order (this sheet loads after the
   per-block styles via its global-styles dependency). */
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
  transform: rotate(180deg);
}

/* ===================================================================
   Native image lightbox: no decoration on the enlarged image.

   WP's lightbox does not re-render the block. It copies the thumbnail's
   inline styles onto the overlay's <figure>/<img> (`state.figureStyles`
   / `state.imgStyles` in core's image view module), so a block-level
   border radius or box shadow set in the editor follows the image
   full-screen. Those corner radii and shadows are per-image *inline*
   declarations, so source order cannot win here -- `!important` is the
   only lever. Third deliberate !important group in this sheet.

   Scoped to the overlay, not the container: the close and navigation
   buttons hold inline SVG, never <img>, so nothing else is affected,
   and both `.lightbox-image-container` copies (zoom-start and enlarged)
   are covered. Gallery images route through this same single overlay,
   so they are covered too.
   =================================================================== */

.wp-lightbox-overlay figure,
.wp-lightbox-overlay img {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The lightbox's visible "Close" label is a <button>, so it falls back to
   the browser's 13.3px control font. Hold it to the type scale's floor. */
.wp-lightbox-overlay .wp-lightbox-close-button {
  font-size: var(--wp--preset--font-size--small);
}

/* ===================================================================
   Native image lightbox: hide the UserWay button while it is open.

   The UserWay widget pins a 44px button 13px off the bottom-right
   corner. Below 960px core parks the lightbox's Previous/Next buttons
   at `bottom: 16px` in the bottom corners (above 960px they move to
   the vertical middle), so on phones the widget sits directly on top
   of "Next" and swallows the tap.

   Stacking cannot be fixed here. UserWay sets `.uwy { z-index:
   2147483647 !important }` -- the 32-bit maximum -- so no value can
   paint above it, and matching it would leave the outcome decided by
   runtime DOM insertion order between a third-party script and core's
   footer-rendered overlay. The video-gallery block wins only because
   `showModal()` puts its <dialog> in the top layer, which no amount of
   CSS can do for core's plain fixed <div>. Hiding the button for the
   duration of the lightbox reproduces that same result: the widget is
   unreachable while a modal is up, and returns the moment it closes.

   `display` rather than `visibility`, and that is not a style choice.
   `visibility` inherits but a descendant can override it, and UserWay's
   button glyph does exactly that: `img.ui_b` computes
   `visibility: visible`, so hiding the `.uwy` wrapper that way leaves
   the 44px icon painted in the corner (verified in-browser -- the
   wrapper reported `hidden` while the button was still on screen).
   `display: none` removes the subtree and cannot be overridden from
   inside it. No `!important` needed: UserWay's inline style sets only
   background-color and overflow, so ordinary specificity wins.

   Keyed on `.active` ALONE, deliberately. Core also carries
   `show-closing-animation`, but that class is present while the box is
   open and is cleared by an `animationend` handler (~410ms, measured).
   Every lightbox animation lives inside `@media not
   (prefers-reduced-motion)`, so for a reduced-motion visitor no
   animation runs, the event never fires, and keying on it would strip
   the accessibility widget off the page permanently after the first
   image was viewed. Do not add it.
   =================================================================== */

body:has(.wp-lightbox-overlay.active) .uwy {
  display: none;
}

/* ===================================================================
   Hand-drawn decorative accents to complement the Beth Ellen wordmark
   font. Underline/frame variants are purely decorative, rendered via
   ::before/::after with no text content — invisible to assistive tech
   automatically, no alt text / ARIA needed. Cutout variants reshape
   real content (images / group backgrounds) via clip-path, so they
   carry a focus-visibility safeguard instead (see below).
   Apply via block editor "Additional CSS class(es)".
   =================================================================== */

/* --- Single-stroke underlines (5 variations): add to a Heading --- */

.litw-underline-1,
.litw-underline-2,
.litw-underline-3,
.litw-underline-4,
.litw-underline-5{
position: relative;
width: fit-content;
}

.litw-underline-1::after,
.litw-underline-2::after,
.litw-underline-3::after,
.litw-underline-4::after,
.litw-underline-5::after {
content: "";
display: block;
width: 100%;
margin-top: 0.15em;
/* Gold is the only doodle colour (design system v1). Decorative, so the
   1.7:1 it makes against the page does not need to meet a contrast floor. */
background-color: var(--wp--preset--color--accent-2, #f2c14e);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
pointer-events: none;
}

.litw-underline-1::after {
height: 0.30em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='24' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M6,8 C35,8 35,15 64,15 C92,15 92,15 121,15 C150,15 150,10 179,10 C208,10 208,12 236,12 C265,12 265,11 294,11' stroke='white' stroke-width='9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='24' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M6,8 C35,8 35,15 64,15 C92,15 92,15 121,15 C150,15 150,10 179,10 C208,10 208,12 236,12 C265,12 265,11 294,11' stroke='white' stroke-width='9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.litw-underline-2::after {
height: 0.32em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='26' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M6,19 C42,19 42,19 78,19 C114,19 114,7 150,7 C186,7 186,7 222,7 C258,7 258,18 294,18' stroke='white' stroke-width='10' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='26' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M6,19 C42,19 42,19 78,19 C114,19 114,7 150,7 C186,7 186,7 222,7 C258,7 258,18 294,18' stroke='white' stroke-width='10' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.litw-underline-3::after {
height: 0.34em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='22' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M6,9 C27,9 27,11 47,11 C68,11 68,10 88,10 C109,10 109,12 129,12 C150,12 150,12 171,12 C191,12 191,8 212,8 C232,8 232,7 253,7 C273,7 273,14 294,14' stroke='white' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='22' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M6,9 C27,9 27,11 47,11 C68,11 68,10 88,10 C109,10 109,12 129,12 C150,12 150,12 171,12 C191,12 191,8 212,8 C232,8 232,7 253,7 C273,7 273,14 294,14' stroke='white' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.litw-underline-4::after {
height: 0.36em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='28' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath d='M6,11 C42,11 42,9 78,9 C114,9 114,13 150,13 C186,13 186,9 222,9 C258,9 258,8 294,8' stroke='white' stroke-width='11' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='28' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath d='M6,11 C42,11 42,9 78,9 C114,9 114,13 150,13 C186,13 186,9 222,9 C258,9 258,8 294,8' stroke='white' stroke-width='11' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.litw-underline-5::after {
height: 0.38em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='24' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M6,13 C30,13 30,15 54,15 C78,15 78,16 102,16 C126,16 126,17 150,17 C174,17 174,15 198,15 C222,15 222,17 246,17 C270,17 270,6 294,6' stroke='white' stroke-width='8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='24' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M6,13 C30,13 30,15 54,15 C78,15 78,16 102,16 C126,16 126,17 150,17 C174,17 174,15 198,15 C222,15 222,17 246,17 C270,17 270,6 294,6' stroke='white' stroke-width='8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Decorative-only flourishes shouldn't render as odd solid blocks under
   Windows High Contrast / forced-colors mode — hide them there instead. */
@media (forced-colors: active) {
.litw-underline-1::after,
.litw-underline-2::after,
.litw-underline-3::after,
.litw-underline-4::after,
.litw-underline-5::after{
display: none;
}
}

/* --- Blobs (2026-10-19): a hand-drawn edge for a photo. .litw-blob
   wobbles a square photo's outline; .litw-blob-round is an organic
   circle for portraits, where border-radius: 50% feels too mechanical.
   Masks unchanged from the two cutout shapes they were renamed from;
   the cutout edge families became the section waves
   (.litw-wave-top/-bottom) at the end of this file. --- */

.litw-blob {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M200.51,100.01 C200.61,102.97 200.69,105.95 200.75,108.95 C200.81,111.95 200.85,114.98 200.86,118.05 C200.88,121.12 200.88,124.24 200.86,127.43 C200.83,130.61 200.78,133.86 200.69,137.19 C200.60,140.53 200.46,143.94 200.24,147.44 C200.03,150.94 199.72,154.52 199.24,158.14 C198.76,161.76 198.11,165.42 197.16,169.00 C196.21,172.58 194.96,176.08 193.29,179.33 C191.62,182.57 189.54,185.55 187.05,188.12 C184.56,190.68 181.65,192.84 178.47,194.55 C175.28,196.27 171.83,197.55 168.28,198.51 C164.73,199.46 161.08,200.08 157.46,200.49 C153.84,200.90 150.25,201.09 146.74,201.17 C143.23,201.24 139.80,201.19 136.46,201.07 C133.12,200.95 129.87,200.76 126.71,200.54 C123.54,200.31 120.46,200.05 117.45,199.77 C114.44,199.49 111.49,199.20 108.60,198.91 C105.70,198.63 102.85,198.34 100.02,198.08 C97.20,197.82 94.39,197.58 91.58,197.37 C88.77,197.16 85.95,196.98 83.10,196.85 C80.24,196.71 77.35,196.61 74.38,196.54 C71.41,196.48 68.37,196.45 65.23,196.42 C62.09,196.40 58.85,196.38 55.50,196.32 C52.15,196.26 48.69,196.14 45.16,195.88 C41.63,195.62 38.02,195.21 34.47,194.51 C30.91,193.81 27.40,192.81 24.11,191.40 C20.83,189.99 17.77,188.16 15.10,185.90 C12.44,183.63 10.16,180.93 8.30,177.94 C6.44,174.94 5.00,171.65 3.88,168.24 C2.75,164.83 1.96,161.30 1.36,157.77 C0.76,154.25 0.36,150.73 0.08,147.28 C-0.21,143.83 -0.39,140.44 -0.51,137.12 C-0.63,133.81 -0.70,130.57 -0.74,127.39 C-0.79,124.22 -0.81,121.11 -0.83,118.04 C-0.85,114.98 -0.86,111.95 -0.88,108.96 C-0.90,105.96 -0.92,102.98 -0.95,100.00 C-0.98,97.02 -1.01,94.03 -1.05,91.03 C-1.09,88.02 -1.12,84.98 -1.15,81.90 C-1.18,78.81 -1.20,75.68 -1.20,72.48 C-1.20,69.28 -1.17,66.01 -1.08,62.66 C-0.99,59.32 -0.84,55.89 -0.58,52.40 C-0.33,48.91 0.05,45.36 0.62,41.79 C1.20,38.23 1.97,34.65 3.07,31.19 C4.17,27.72 5.60,24.38 7.44,21.32 C9.28,18.26 11.53,15.50 14.18,13.16 C16.83,10.83 19.87,8.92 23.15,7.43 C26.43,5.94 29.94,4.86 33.50,4.08 C37.06,3.30 40.67,2.80 44.22,2.46 C47.77,2.12 51.25,1.93 54.64,1.80 C58.02,1.67 61.30,1.60 64.50,1.53 C67.69,1.46 70.78,1.40 73.81,1.32 C76.84,1.24 79.80,1.15 82.73,1.05 C85.65,0.94 88.53,0.82 91.41,0.69 C94.28,0.56 97.14,0.42 100.01,0.29 C102.88,0.16 105.77,0.03 108.68,-0.08 C111.60,-0.19 114.54,-0.28 117.53,-0.35 C120.52,-0.41 123.56,-0.44 126.66,-0.43 C129.76,-0.42 132.91,-0.37 136.14,-0.25 C139.36,-0.13 142.66,0.06 146.01,0.36 C149.36,0.66 152.78,1.07 156.21,1.67 C159.64,2.27 163.08,3.05 166.43,4.13 C169.78,5.21 173.04,6.59 176.04,8.35 C179.04,10.12 181.79,12.27 184.16,14.80 C186.53,17.33 188.52,20.23 190.13,23.36 C191.75,26.49 192.98,29.85 193.96,33.28 C194.93,36.71 195.64,40.20 196.21,43.65 C196.77,47.10 197.19,50.52 197.54,53.86 C197.89,57.20 198.17,60.46 198.42,63.66 C198.68,66.86 198.90,69.99 199.10,73.07 C199.31,76.15 199.50,79.18 199.68,82.18 C199.85,85.18 200.01,88.16 200.15,91.12 C200.29,94.09 200.41,97.04 200.51,100.01 Z' fill='white'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M200.51,100.01 C200.61,102.97 200.69,105.95 200.75,108.95 C200.81,111.95 200.85,114.98 200.86,118.05 C200.88,121.12 200.88,124.24 200.86,127.43 C200.83,130.61 200.78,133.86 200.69,137.19 C200.60,140.53 200.46,143.94 200.24,147.44 C200.03,150.94 199.72,154.52 199.24,158.14 C198.76,161.76 198.11,165.42 197.16,169.00 C196.21,172.58 194.96,176.08 193.29,179.33 C191.62,182.57 189.54,185.55 187.05,188.12 C184.56,190.68 181.65,192.84 178.47,194.55 C175.28,196.27 171.83,197.55 168.28,198.51 C164.73,199.46 161.08,200.08 157.46,200.49 C153.84,200.90 150.25,201.09 146.74,201.17 C143.23,201.24 139.80,201.19 136.46,201.07 C133.12,200.95 129.87,200.76 126.71,200.54 C123.54,200.31 120.46,200.05 117.45,199.77 C114.44,199.49 111.49,199.20 108.60,198.91 C105.70,198.63 102.85,198.34 100.02,198.08 C97.20,197.82 94.39,197.58 91.58,197.37 C88.77,197.16 85.95,196.98 83.10,196.85 C80.24,196.71 77.35,196.61 74.38,196.54 C71.41,196.48 68.37,196.45 65.23,196.42 C62.09,196.40 58.85,196.38 55.50,196.32 C52.15,196.26 48.69,196.14 45.16,195.88 C41.63,195.62 38.02,195.21 34.47,194.51 C30.91,193.81 27.40,192.81 24.11,191.40 C20.83,189.99 17.77,188.16 15.10,185.90 C12.44,183.63 10.16,180.93 8.30,177.94 C6.44,174.94 5.00,171.65 3.88,168.24 C2.75,164.83 1.96,161.30 1.36,157.77 C0.76,154.25 0.36,150.73 0.08,147.28 C-0.21,143.83 -0.39,140.44 -0.51,137.12 C-0.63,133.81 -0.70,130.57 -0.74,127.39 C-0.79,124.22 -0.81,121.11 -0.83,118.04 C-0.85,114.98 -0.86,111.95 -0.88,108.96 C-0.90,105.96 -0.92,102.98 -0.95,100.00 C-0.98,97.02 -1.01,94.03 -1.05,91.03 C-1.09,88.02 -1.12,84.98 -1.15,81.90 C-1.18,78.81 -1.20,75.68 -1.20,72.48 C-1.20,69.28 -1.17,66.01 -1.08,62.66 C-0.99,59.32 -0.84,55.89 -0.58,52.40 C-0.33,48.91 0.05,45.36 0.62,41.79 C1.20,38.23 1.97,34.65 3.07,31.19 C4.17,27.72 5.60,24.38 7.44,21.32 C9.28,18.26 11.53,15.50 14.18,13.16 C16.83,10.83 19.87,8.92 23.15,7.43 C26.43,5.94 29.94,4.86 33.50,4.08 C37.06,3.30 40.67,2.80 44.22,2.46 C47.77,2.12 51.25,1.93 54.64,1.80 C58.02,1.67 61.30,1.60 64.50,1.53 C67.69,1.46 70.78,1.40 73.81,1.32 C76.84,1.24 79.80,1.15 82.73,1.05 C85.65,0.94 88.53,0.82 91.41,0.69 C94.28,0.56 97.14,0.42 100.01,0.29 C102.88,0.16 105.77,0.03 108.68,-0.08 C111.60,-0.19 114.54,-0.28 117.53,-0.35 C120.52,-0.41 123.56,-0.44 126.66,-0.43 C129.76,-0.42 132.91,-0.37 136.14,-0.25 C139.36,-0.13 142.66,0.06 146.01,0.36 C149.36,0.66 152.78,1.07 156.21,1.67 C159.64,2.27 163.08,3.05 166.43,4.13 C169.78,5.21 173.04,6.59 176.04,8.35 C179.04,10.12 181.79,12.27 184.16,14.80 C186.53,17.33 188.52,20.23 190.13,23.36 C191.75,26.49 192.98,29.85 193.96,33.28 C194.93,36.71 195.64,40.20 196.21,43.65 C196.77,47.10 197.19,50.52 197.54,53.86 C197.89,57.20 198.17,60.46 198.42,63.66 C198.68,66.86 198.90,69.99 199.10,73.07 C199.31,76.15 199.50,79.18 199.68,82.18 C199.85,85.18 200.01,88.16 200.15,91.12 C200.29,94.09 200.41,97.04 200.51,100.01 Z' fill='white'/%3E%3C/svg%3E");
}

.litw-blob-round {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M190.6,100.0 C190.0,111.2 183.5,122.0 179.2,132.8 C174.9,143.6 172.3,156.7 164.7,164.7 C157.1,172.8 144.4,177.5 133.7,181.3 C122.9,185.0 111.3,187.0 100.0,187.2 C88.7,187.3 76.0,186.6 66.0,182.2 C55.9,177.7 47.1,168.6 39.6,160.4 C32.1,152.1 25.5,142.8 21.0,132.7 C16.5,122.7 12.7,110.9 12.6,100.0 C12.6,89.1 16.7,77.7 20.7,67.2 C24.7,56.6 29.2,44.8 36.8,36.8 C44.5,28.8 56.0,23.3 66.6,19.3 C77.1,15.3 88.9,12.8 100.0,12.9 C111.1,13.1 122.9,15.9 133.0,20.3 C143.1,24.7 152.3,31.8 160.6,39.4 C169.0,46.9 177.9,55.6 182.9,65.7 C187.9,75.8 191.2,88.8 190.6,100.0 Z' fill='white'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M190.6,100.0 C190.0,111.2 183.5,122.0 179.2,132.8 C174.9,143.6 172.3,156.7 164.7,164.7 C157.1,172.8 144.4,177.5 133.7,181.3 C122.9,185.0 111.3,187.0 100.0,187.2 C88.7,187.3 76.0,186.6 66.0,182.2 C55.9,177.7 47.1,168.6 39.6,160.4 C32.1,152.1 25.5,142.8 21.0,132.7 C16.5,122.7 12.7,110.9 12.6,100.0 C12.6,89.1 16.7,77.7 20.7,67.2 C24.7,56.6 29.2,44.8 36.8,36.8 C44.5,28.8 56.0,23.3 66.6,19.3 C77.1,15.3 88.9,12.8 100.0,12.9 C111.1,13.1 122.9,15.9 133.0,20.3 C143.1,24.7 152.3,31.8 160.6,39.4 C169.0,46.9 177.9,55.6 182.9,65.7 C187.9,75.8 191.2,88.8 190.6,100.0 Z' fill='white'/%3E%3C/svg%3E");
}

/* .litw-blob-tall (2026-10-20): the same hand-drawn outline method, drawn
   on a 200x250 canvas for a 4:5 photo, so the wobble isn't a stretched
   square's. Generator: site-ops/decorative-css/gen_blob_tall.py. */
.litw-blob-tall {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='250' viewBox='0 0 200 250' preserveAspectRatio='none'%3E%3Cpath d='M197.26,125.00 C197.30,128.44 197.38,131.87 197.50,135.35 C197.61,138.83 197.76,142.35 197.92,145.94 C198.07,149.54 198.24,153.21 198.39,156.97 C198.53,160.74 198.66,164.60 198.72,168.57 C198.79,172.54 198.79,176.61 198.66,180.77 C198.53,184.93 198.28,189.17 197.81,193.43 C197.35,197.69 196.67,201.97 195.68,206.14 C194.70,210.31 193.40,214.37 191.74,218.16 C190.07,221.94 188.04,225.45 185.65,228.56 C183.26,231.66 180.53,234.37 177.55,236.64 C174.57,238.92 171.35,240.78 168.03,242.29 C164.71,243.81 161.29,244.98 157.86,245.92 C154.43,246.87 150.99,247.58 147.61,248.16 C144.22,248.75 140.87,249.19 137.58,249.57 C134.29,249.94 131.06,250.23 127.87,250.48 C124.68,250.72 121.54,250.92 118.43,251.07 C115.31,251.23 112.23,251.34 109.17,251.41 C106.10,251.48 103.05,251.51 100.00,251.49 C96.95,251.48 93.90,251.41 90.84,251.29 C87.79,251.18 84.72,251.01 81.62,250.78 C78.53,250.56 75.41,250.28 72.26,249.93 C69.11,249.58 65.92,249.17 62.70,248.67 C59.47,248.17 56.21,247.58 52.91,246.86 C49.62,246.14 46.29,245.28 42.97,244.22 C39.66,243.15 36.35,241.87 33.14,240.29 C29.93,238.71 26.81,236.82 23.91,234.56 C21.00,232.29 18.31,229.65 15.92,226.65 C13.53,223.65 11.45,220.29 9.68,216.69 C7.92,213.09 6.47,209.24 5.29,205.29 C4.10,201.33 3.18,197.28 2.43,193.22 C1.69,189.16 1.13,185.11 0.68,181.10 C0.23,177.10 -0.10,173.14 -0.36,169.25 C-0.62,165.36 -0.80,161.54 -0.93,157.77 C-1.06,154.00 -1.14,150.29 -1.17,146.62 C-1.21,142.95 -1.21,139.33 -1.17,135.73 C-1.14,132.14 -1.08,128.57 -0.99,125.01 C-0.91,121.45 -0.80,117.90 -0.68,114.34 C-0.56,110.77 -0.42,107.20 -0.28,103.58 C-0.14,99.97 0.01,96.32 0.18,92.60 C0.35,88.88 0.53,85.10 0.74,81.23 C0.96,77.36 1.21,73.41 1.55,69.38 C1.89,65.34 2.31,61.23 2.91,57.09 C3.50,52.95 4.26,48.77 5.28,44.69 C6.31,40.60 7.61,36.60 9.25,32.84 C10.89,29.09 12.88,25.59 15.21,22.48 C17.54,19.36 20.22,16.64 23.14,14.35 C26.07,12.05 29.24,10.18 32.53,8.68 C35.82,7.17 39.23,6.03 42.65,5.15 C46.07,4.26 49.51,3.64 52.90,3.17 C56.29,2.70 59.64,2.40 62.93,2.18 C66.22,1.96 69.44,1.83 72.61,1.74 C75.78,1.65 78.89,1.60 81.95,1.56 C85.02,1.52 88.04,1.49 91.04,1.45 C94.04,1.41 97.02,1.35 100.01,1.28 C102.99,1.21 105.98,1.11 109.01,1.00 C112.03,0.89 115.08,0.76 118.20,0.63 C121.31,0.50 124.48,0.36 127.73,0.26 C130.98,0.15 134.31,0.07 137.72,0.08 C141.13,0.09 144.62,0.18 148.17,0.44 C151.73,0.70 155.34,1.14 158.94,1.86 C162.55,2.58 166.15,3.58 169.62,5.00 C173.08,6.42 176.42,8.26 179.48,10.58 C182.53,12.91 185.30,15.72 187.67,18.99 C190.04,22.25 192.00,25.96 193.56,29.97 C195.11,33.97 196.26,38.26 197.07,42.65 C197.89,47.04 198.37,51.52 198.65,55.95 C198.93,60.39 199.00,64.77 198.96,69.04 C198.93,73.30 198.79,77.45 198.61,81.46 C198.44,85.48 198.24,89.36 198.05,93.13 C197.86,96.90 197.69,100.56 197.55,104.14 C197.42,107.72 197.32,111.22 197.27,114.68 C197.22,118.14 197.22,121.57 197.26,125.00 Z' fill='white'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='250' viewBox='0 0 200 250' preserveAspectRatio='none'%3E%3Cpath d='M197.26,125.00 C197.30,128.44 197.38,131.87 197.50,135.35 C197.61,138.83 197.76,142.35 197.92,145.94 C198.07,149.54 198.24,153.21 198.39,156.97 C198.53,160.74 198.66,164.60 198.72,168.57 C198.79,172.54 198.79,176.61 198.66,180.77 C198.53,184.93 198.28,189.17 197.81,193.43 C197.35,197.69 196.67,201.97 195.68,206.14 C194.70,210.31 193.40,214.37 191.74,218.16 C190.07,221.94 188.04,225.45 185.65,228.56 C183.26,231.66 180.53,234.37 177.55,236.64 C174.57,238.92 171.35,240.78 168.03,242.29 C164.71,243.81 161.29,244.98 157.86,245.92 C154.43,246.87 150.99,247.58 147.61,248.16 C144.22,248.75 140.87,249.19 137.58,249.57 C134.29,249.94 131.06,250.23 127.87,250.48 C124.68,250.72 121.54,250.92 118.43,251.07 C115.31,251.23 112.23,251.34 109.17,251.41 C106.10,251.48 103.05,251.51 100.00,251.49 C96.95,251.48 93.90,251.41 90.84,251.29 C87.79,251.18 84.72,251.01 81.62,250.78 C78.53,250.56 75.41,250.28 72.26,249.93 C69.11,249.58 65.92,249.17 62.70,248.67 C59.47,248.17 56.21,247.58 52.91,246.86 C49.62,246.14 46.29,245.28 42.97,244.22 C39.66,243.15 36.35,241.87 33.14,240.29 C29.93,238.71 26.81,236.82 23.91,234.56 C21.00,232.29 18.31,229.65 15.92,226.65 C13.53,223.65 11.45,220.29 9.68,216.69 C7.92,213.09 6.47,209.24 5.29,205.29 C4.10,201.33 3.18,197.28 2.43,193.22 C1.69,189.16 1.13,185.11 0.68,181.10 C0.23,177.10 -0.10,173.14 -0.36,169.25 C-0.62,165.36 -0.80,161.54 -0.93,157.77 C-1.06,154.00 -1.14,150.29 -1.17,146.62 C-1.21,142.95 -1.21,139.33 -1.17,135.73 C-1.14,132.14 -1.08,128.57 -0.99,125.01 C-0.91,121.45 -0.80,117.90 -0.68,114.34 C-0.56,110.77 -0.42,107.20 -0.28,103.58 C-0.14,99.97 0.01,96.32 0.18,92.60 C0.35,88.88 0.53,85.10 0.74,81.23 C0.96,77.36 1.21,73.41 1.55,69.38 C1.89,65.34 2.31,61.23 2.91,57.09 C3.50,52.95 4.26,48.77 5.28,44.69 C6.31,40.60 7.61,36.60 9.25,32.84 C10.89,29.09 12.88,25.59 15.21,22.48 C17.54,19.36 20.22,16.64 23.14,14.35 C26.07,12.05 29.24,10.18 32.53,8.68 C35.82,7.17 39.23,6.03 42.65,5.15 C46.07,4.26 49.51,3.64 52.90,3.17 C56.29,2.70 59.64,2.40 62.93,2.18 C66.22,1.96 69.44,1.83 72.61,1.74 C75.78,1.65 78.89,1.60 81.95,1.56 C85.02,1.52 88.04,1.49 91.04,1.45 C94.04,1.41 97.02,1.35 100.01,1.28 C102.99,1.21 105.98,1.11 109.01,1.00 C112.03,0.89 115.08,0.76 118.20,0.63 C121.31,0.50 124.48,0.36 127.73,0.26 C130.98,0.15 134.31,0.07 137.72,0.08 C141.13,0.09 144.62,0.18 148.17,0.44 C151.73,0.70 155.34,1.14 158.94,1.86 C162.55,2.58 166.15,3.58 169.62,5.00 C173.08,6.42 176.42,8.26 179.48,10.58 C182.53,12.91 185.30,15.72 187.67,18.99 C190.04,22.25 192.00,25.96 193.56,29.97 C195.11,33.97 196.26,38.26 197.07,42.65 C197.89,47.04 198.37,51.52 198.65,55.95 C198.93,60.39 199.00,64.77 198.96,69.04 C198.93,73.30 198.79,77.45 198.61,81.46 C198.44,85.48 198.24,89.36 198.05,93.13 C197.86,96.90 197.69,100.56 197.55,104.14 C197.42,107.72 197.32,111.22 197.27,114.68 C197.22,118.14 197.22,121.57 197.26,125.00 Z' fill='white'/%3E%3C/svg%3E");
}

.litw-blob-tall img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
}

/* mask-image clips focus outlines too, so a shape holding the focused
   element drops its mask while focus is visible. */
.litw-blob:has(:focus-visible),
.litw-blob-round:has(:focus-visible),
.litw-blob-tall:has(:focus-visible) {
-webkit-mask-image: none;
mask-image: none;
}

/* --- Swoop: one bold, uneven curve on the photo edge that faces the text
   (2026-10-15). A different job from the blobs above: they wobble every
   edge by 2-4%, this carves one edge deeply, for a page's hero/lead photo.
   At most one per page, and never text on top of the photo.

   Picked in the editor as an Image/Cover block style (functions.php):
   is-style-litw-swoop-l = curve on the left edge (photo sits right of text),
   is-style-litw-swoop-r = curve on the right edge (photo sits left of text).

   Two mask layers so the curve never distorts with the photo's width: the
   wave SVG is a fixed-depth strip on the curved edge, a plain gradient
   covers the rest (overlapping 1px so no hairline seam shows). In a swoop
   band that stacks (<1100px) the photo always comes first with the curve on
   its bottom edge. A loose swoop image in ordinary stacked columns (<=781px)
   curves on the edge facing the text: top for -l, bottom for -r. --- */

.is-style-litw-swoop-l,
.is-style-litw-swoop-r {
--litw-swoop-depth: clamp(72px, 12vw, 180px);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

.is-style-litw-swoop-l {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M110 0C110 50 0 90 50 150C100 200 165 215 150 300C143 345 150 400 200 400V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M110 0C110 50 0 90 50 150C100 200 165 215 150 300C143 345 150 400 200 400V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
-webkit-mask-position: left top, right top;
mask-position: left top, right top;
-webkit-mask-size: var(--litw-swoop-depth) 100%, calc(100% - var(--litw-swoop-depth) + 1px) 100%;
mask-size: var(--litw-swoop-depth) 100%, calc(100% - var(--litw-swoop-depth) + 1px) 100%;
}

.is-style-litw-swoop-r {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M90 0C90 50 200 90 150 150C100 200 35 215 50 300C57 345 50 400 0 400V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M90 0C90 50 200 90 150 150C100 200 35 215 50 300C57 345 50 400 0 400V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
-webkit-mask-position: right top, left top;
mask-position: right top, left top;
-webkit-mask-size: var(--litw-swoop-depth) 100%, calc(100% - var(--litw-swoop-depth) + 1px) 100%;
mask-size: var(--litw-swoop-depth) 100%, calc(100% - var(--litw-swoop-depth) + 1px) 100%;
}

/* The mask would cut a shadow and rounded corners off anyway, and a tilt
   fights the curve. The swoop is the photo's whole treatment. */
.is-style-litw-swoop-l img,
.is-style-litw-swoop-r img {
border-radius: 0;
box-shadow: none;
rotate: none;
}

/* Swoop band: put a swoop photo in a full-width Columns block and the photo
   runs to the top, bottom and outer edge of the band, while the text column
   still lines up with the wide content edge. The crop leans away from the
   curve so the subject centres in what it leaves visible. A percentage, not
   a pixel offset: it slides only within the photo's own overflow, so it can
   never pull the photo's edge into view. A fixed depth/3 shift did, on a
   photo shaped like its box, and the curve's deep lobe showed a flat edge. */
.wp-block-columns.alignfull:has(> .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r)) {
margin-block-start: 0;
padding: 0;
align-items: stretch;
overflow: clip;
border-radius: 0; /* theme.json rounds every Columns block 1rem */
}

.wp-block-columns.alignfull:has(> .wp-block-column > .is-style-litw-swoop-l) {
padding-left: max(var(--wp--style--root--padding-left), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}

.wp-block-columns.alignfull:has(> .wp-block-column > .is-style-litw-swoop-r) {
padding-right: max(var(--wp--style--root--padding-right), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}

.wp-block-columns.alignfull:has(> .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r)) > .wp-block-column:not(:has(> :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r))) {
padding-block: var(--wp--preset--spacing--60);
}

.wp-block-columns.alignfull > .wp-block-column:has(> :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r)) {
display: flex;
position: relative;
}

.wp-block-columns.alignfull > .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r) {
flex: 1;
margin: 0;
}

.wp-block-columns.alignfull > .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r) img {
width: 100%;
height: 100%;
min-height: 30rem;
object-fit: cover;
}

.wp-block-columns.alignfull > .wp-block-column:has(> .is-style-litw-swoop-l) > .is-style-litw-swoop-l img {
object-position: 35% 50%;
}

.wp-block-columns.alignfull > .wp-block-column:has(> .is-style-litw-swoop-r) > .is-style-litw-swoop-r img {
object-position: 65% 50%;
}

/* A band that opens the page meets the header with no gap. If anything sits
   before the content in <main> (page-no-title had a visually-hidden title
   until 2026-10-19), the flow layout's 1.2rem block gap would open a strip
   above the photo. */
.wp-block-post-content:has(> .wp-block-columns.alignfull:first-child > .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r)) {
margin-block-start: 0;
}

/* Single-event hero with no featured image: Featured Image renders nothing,
   so the swoop-band rules above stop matching and an empty 48% column would
   remain. Drop that column and line the text up with the wide content edge,
   the way the rest of the page sits. */
.wp-block-columns.alignfull.litw-event-hero:not(:has(.wp-block-post-featured-image)) {
padding-block: var(--wp--preset--spacing--50);
padding-inline: max(var(--wp--style--root--padding-left), calc((100vw - var(--wp--style--global--wide-size)) / 2));
border-radius: 0;
}

.litw-event-hero:not(:has(.wp-block-post-featured-image)) > .litw-event-hero__media {
display: none;
}

/* Event subtitle (template single-litw_event): the sans body face under the
   Literata title, so the two stop competing. The size stays on the heading's
   own scale step; the change in face does the separating. */
.litw-event-hero .litw-event-subtitle {
font-family: var(--wp--preset--font-family--open-sans);
font-weight: 600;
line-height: 1.35;
}

/* Optional sun rays riding the curve, the "light" in Light in the Well,
   shining out of the photo toward the copy. Off unless the editor picks a
   spot in the Swoop accents panel (assets/js/swoop-accents.js), which adds
   litw-swoop-rays-top|mid|bottom to the swoop block: place them beside a
   quiet part of the photo, or leave them off. Each spot is a point on the
   curve path below (fraction of the depth, fraction of the height), and the
   rays' source corner sits just off it. Band only; hidden when stacked. */
.wp-block-columns.alignfull > .wp-block-column:has(> :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r)) {
--litw-swoop-depth: clamp(72px, 12vw, 180px);
--litw-rays-size: 4rem;
}

.wp-block-columns.alignfull > .wp-block-column:has(> :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r):is(.litw-swoop-rays-top, .litw-swoop-rays-mid, .litw-swoop-rays-bottom))::before {
content: "";
position: absolute;
z-index: 1;
top: calc(var(--litw-rays-y) - var(--litw-rays-size) * 0.75);
width: var(--litw-rays-size);
height: var(--litw-rays-size);
background-color: var(--wp--preset--color--accent-2, #f2c14e);
/* Drawn at 1 unit = 1px of the 4rem box: ~4.5px strokes, the weight of
   .litw-underline-* on an h2. Each ray bows a little and differs in length
   and width, so it reads as drawn rather than ruled. */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg stroke='white' stroke-linecap='round' fill='none'%3E%3Cpath d='M35 46.5Q22.5 44 10 38.5' stroke-width='4.6'/%3E%3Cpath d='M41 31Q34.5 20.5 26 11.5' stroke-width='4.2'/%3E%3Cpath d='M53 26.5Q55.5 16 54 6' stroke-width='4.8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg stroke='white' stroke-linecap='round' fill='none'%3E%3Cpath d='M35 46.5Q22.5 44 10 38.5' stroke-width='4.6'/%3E%3Cpath d='M41 31Q34.5 20.5 26 11.5' stroke-width='4.2'/%3E%3Cpath d='M53 26.5Q55.5 16 54 6' stroke-width='4.8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
/* Tilt pivots on the rays' source, the point anchored to the curve. */
transform-origin: 90% 78%;
rotate: var(--litw-rays-tilt, 0deg);
pointer-events: none;
}

.wp-block-column:has(> .litw-swoop-rays-top) {
--litw-rays-x: 0.25;
--litw-rays-y: 21%;
}

.wp-block-column:has(> .litw-swoop-rays-mid) {
--litw-rays-x: 0.6;
--litw-rays-y: 52%;
}

.wp-block-column:has(> .litw-swoop-rays-bottom) {
--litw-rays-x: 0.74;
--litw-rays-y: 85%;
}

/* Tilt, from the editor panel: "up" swings the rays toward the top of the
   band, "toward the text" swings them flatter, at the copy. Written for a
   left-edge curve; the right-edge rule mirrors the angle. */
.wp-block-column:has(> .litw-swoop-rays-tilt-up-30) { --litw-rays-tilt: 30deg; }
.wp-block-column:has(> .litw-swoop-rays-tilt-up-15) { --litw-rays-tilt: 15deg; }
.wp-block-column:has(> .litw-swoop-rays-tilt-text-15) { --litw-rays-tilt: -15deg; }
.wp-block-column:has(> .litw-swoop-rays-tilt-text-30) { --litw-rays-tilt: -30deg; }

.wp-block-columns.alignfull > .wp-block-column:has(> .is-style-litw-swoop-l)::before {
left: calc(var(--litw-swoop-depth) * var(--litw-rays-x) - var(--litw-rays-size));
}

/* [class*] lifts this to the base rule's weight, so its mask and rotate win. */
.wp-block-columns.alignfull > .wp-block-column:has(> .is-style-litw-swoop-r[class*="litw-swoop-rays-"])::before {
right: calc(var(--litw-swoop-depth) * var(--litw-rays-x) - var(--litw-rays-size));
/* The left-edge drawing mirrored (x -> 64 - x) rather than scale: -1 1,
   which would flip around the tilt pivot and move the rays off the curve. */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg stroke='white' stroke-linecap='round' fill='none'%3E%3Cpath d='M29 46.5Q41.5 44 54 38.5' stroke-width='4.6'/%3E%3Cpath d='M23 31Q29.5 20.5 38 11.5' stroke-width='4.2'/%3E%3Cpath d='M11 26.5Q8.5 16 10 6' stroke-width='4.8'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg stroke='white' stroke-linecap='round' fill='none'%3E%3Cpath d='M29 46.5Q41.5 44 54 38.5' stroke-width='4.6'/%3E%3Cpath d='M23 31Q29.5 20.5 38 11.5' stroke-width='4.2'/%3E%3Cpath d='M11 26.5Q8.5 16 10 6' stroke-width='4.8'/%3E%3C/g%3E%3C/svg%3E");
transform-origin: 10% 78%;
rotate: calc(var(--litw-rays-tilt, 0deg) * -1);
}

/* Music notes instead of rays (litw-swoop-accent-notes, 2026-10-20): two
   beamed eighths in the same gold and hand-drawn weight, riding the same
   spot and tilt. Not mirrored on a right-edge curve: flipped notes read as
   wrong, not as a reflection. At "bottom" they sit a little higher, in the
   curve's lower indent, and clear of the photo: unlike rays, which spring
   from the curve, notes float beside it (the curve is at ~0.7 there). */
.wp-block-column:has(> .litw-swoop-accent-notes.litw-swoop-rays-bottom) {
--litw-rays-x: 0.6;
--litw-rays-y: 72%;
}

.wp-block-columns.alignfull > .wp-block-column:has(> .litw-swoop-accent-notes[class*="litw-swoop-rays-"])::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='white' stroke='white' stroke-linecap='round'%3E%3Cellipse cx='15.5' cy='50' rx='7' ry='5' transform='rotate(-22 15.5 50)' stroke='none'/%3E%3Cellipse cx='43' cy='43.5' rx='7' ry='5' transform='rotate(-22 43 43.5)' stroke='none'/%3E%3Cpath d='M21.6 48Q22.6 32 21.8 15.5M49.1 41.5Q50 25 49.2 9' fill='none' stroke-width='3.6'/%3E%3Cpath d='M22 14.5Q35 10 49 8.5' fill='none' stroke-width='6.4'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='white' stroke='white' stroke-linecap='round'%3E%3Cellipse cx='15.5' cy='50' rx='7' ry='5' transform='rotate(-22 15.5 50)' stroke='none'/%3E%3Cellipse cx='43' cy='43.5' rx='7' ry='5' transform='rotate(-22 43 43.5)' stroke='none'/%3E%3Cpath d='M21.6 48Q22.6 32 21.8 15.5M49.1 41.5Q50 25 49.2 9' fill='none' stroke-width='3.6'/%3E%3Cpath d='M22 14.5Q35 10 49 8.5' fill='none' stroke-width='6.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* Notes over the photo (litw-swoop-photo-note, 2026-10-20): a white (or gold)
   eighth in the photo's top band, toward the outer edge, with a slightly
   smaller quarter below and inside it, a short rising phrase that lands on
   background (stage wall, sky) rather than on faces. White with a soft
   navy shadow so it holds on dark and light patches; the shadow is drawn
   inside the SVG because a mask would clip a CSS drop-shadow. Static and
   decorative. Band only, like the curve accent; hidden when stacked and in
   forced colours. The eighth fills the box's top-right 64 x 64 units, so
   top/right place the eighth itself. */
.wp-block-columns.alignfull > .wp-block-column:has(> .litw-swoop-photo-note)::after {
content: "";
position: absolute;
z-index: 1;
top: 7%;
width: 5.15rem;
height: 4.8rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='112' viewBox='0 0 120 112'%3E%3Cfilter id='s' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='2.2' flood-color='%2314213d' flood-opacity='.5'/%3E%3C/filter%3E%3Cg filter='url(%23s)' fill='white' stroke='white' stroke-linecap='round'%3E%3Cg transform='translate(56 0) rotate(8 32 32)'%3E%3Cellipse cx='23' cy='48' rx='7' ry='5' transform='rotate(-22 23 48)' stroke='none'/%3E%3Cpath d='M29.2 46Q30.2 30 29.4 12.5' fill='none' stroke-width='3.6'/%3E%3Cpath d='M29.6 12.5Q32 21.5 40.5 25.5Q46 28.5 43.5 37' fill='none' stroke-width='4.2'/%3E%3C/g%3E%3Cg transform='translate(2 40) scale(.88) rotate(-12 32 32)'%3E%3Cellipse cx='23' cy='48' rx='7' ry='5' transform='rotate(-22 23 48)' stroke='none'/%3E%3Cpath d='M29.2 46Q30.2 30 29.4 12.5' fill='none' stroke-width='3.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
}

/* Gold instead of white (litw-swoop-photo-gold): the curve accent's gold,
   same drawing and shadow. */
.wp-block-columns.alignfull > .wp-block-column:has(> .litw-swoop-photo-note.litw-swoop-photo-gold)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='112' viewBox='0 0 120 112'%3E%3Cfilter id='s' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='2.2' flood-color='%2314213d' flood-opacity='.5'/%3E%3C/filter%3E%3Cg filter='url(%23s)' fill='%23f2c14e' stroke='%23f2c14e' stroke-linecap='round'%3E%3Cg transform='translate(56 0) rotate(8 32 32)'%3E%3Cellipse cx='23' cy='48' rx='7' ry='5' transform='rotate(-22 23 48)' stroke='none'/%3E%3Cpath d='M29.2 46Q30.2 30 29.4 12.5' fill='none' stroke-width='3.6'/%3E%3Cpath d='M29.6 12.5Q32 21.5 40.5 25.5Q46 28.5 43.5 37' fill='none' stroke-width='4.2'/%3E%3C/g%3E%3Cg transform='translate(2 40) scale(.88) rotate(-12 32 32)'%3E%3Cellipse cx='23' cy='48' rx='7' ry='5' transform='rotate(-22 23 48)' stroke='none'/%3E%3Cpath d='M29.2 46Q30.2 30 29.4 12.5' fill='none' stroke-width='3.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.wp-block-columns.alignfull > .wp-block-column:has(> .is-style-litw-swoop-l.litw-swoop-photo-note)::after {
right: 18%;
}

.wp-block-columns.alignfull > .wp-block-column:has(> .is-style-litw-swoop-r.litw-swoop-photo-note)::after {
left: 18%;
}

/* A staff phrase instead, in the accent gold (2026-10-20): the
   "You Are My Sunshine" opening (litw-swoop-accent-sunshine) or the rising
   phrase, quarter, two eighths and a half climbing with no bar line
   (litw-swoop-accent-rising). The background-art drawings promoted to the
   foreground, floating beside the curve at the chosen spot with their right
   end clear of the photo. Wider than the rays box, so sized and centred on
   the spot here rather than through --litw-rays-size. Not mirrored on a
   right-edge curve (the melody would run backwards); there it starts clear
   of the photo instead. */
.wp-block-column:has(> .litw-swoop-accent-sunshine) {
--litw-phrase: var(--litw-acc-sunshine);
--litw-phrase-ratio: var(--litw-acc-sunshine-ratio);
--litw-phrase-w: min(170px, 14vw);
--litw-phrase-rot: -1.5deg;
}

.wp-block-column:has(> .litw-swoop-accent-rising) {
--litw-phrase: var(--litw-acc-rising);
--litw-phrase-ratio: var(--litw-acc-rising-ratio);
--litw-phrase-w: min(260px, 20vw);
--litw-phrase-color: var(--litw-art);
}

.wp-block-column:has(> :is(.litw-swoop-accent-sunshine, .litw-swoop-accent-rising).litw-swoop-rays-bottom) {
--litw-rays-x: 0.6;
--litw-rays-y: 72%;
}

/* The bigger rising staff would reach the buttons' row, so at "bottom"
   it drops into the open space below them, and further out, where the
   photo's foot turns away. */
.wp-block-column:has(> .litw-swoop-accent-rising.litw-swoop-rays-bottom) {
--litw-rays-x: 0.72;
--litw-rays-y: 93%;
}

.wp-block-columns.alignfull > .wp-block-column:has(> :is(.litw-swoop-accent-sunshine, .litw-swoop-accent-rising)[class*="litw-swoop-rays-"])::before {
top: var(--litw-rays-y);
width: var(--litw-phrase-w);
height: auto;
aspect-ratio: var(--litw-phrase-ratio);
translate: 0 -50%;
background-color: var(--litw-phrase-color, var(--wp--preset--color--accent-2, #f2c14e));
-webkit-mask-image: var(--litw-phrase);
mask-image: var(--litw-phrase);
transform-origin: 50% 50%;
rotate: calc(var(--litw-rays-tilt, 0deg) + var(--litw-phrase-rot, 0deg));
}

.wp-block-columns.alignfull > .wp-block-column:has(> .is-style-litw-swoop-l:is(.litw-swoop-accent-sunshine, .litw-swoop-accent-rising))::before {
left: calc(var(--litw-swoop-depth) * var(--litw-rays-x) - var(--litw-phrase-w));
}

.wp-block-columns.alignfull > .wp-block-column:has(> .is-style-litw-swoop-r:is(.litw-swoop-accent-sunshine, .litw-swoop-accent-rising)[class*="litw-swoop-rays-"])::before {
right: calc(var(--litw-swoop-depth) * var(--litw-rays-x) - var(--litw-phrase-w));
}

@media (max-width: 781px) {
  .is-style-litw-swoop-l,
  .is-style-litw-swoop-r {
  --litw-swoop-depth: clamp(32px, 10vw, 56px);
  }

  .is-style-litw-swoop-l {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 110C50 110 90 0 150 50C200 100 215 165 300 150C345 143 400 150 400 200H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 110C50 110 90 0 150 50C200 100 215 165 300 150C345 143 400 150 400 200H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  -webkit-mask-position: left top, left bottom;
  mask-position: left top, left bottom;
  -webkit-mask-size: 100% var(--litw-swoop-depth), 100% calc(100% - var(--litw-swoop-depth) + 1px);
  mask-size: 100% var(--litw-swoop-depth), 100% calc(100% - var(--litw-swoop-depth) + 1px);
  }

  .is-style-litw-swoop-r {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90C50 90 90 200 150 150C200 100 215 35 300 50C345 57 400 50 400 0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90C50 90 90 200 150 150C200 100 215 35 300 50C345 57 400 50 400 0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  -webkit-mask-position: left bottom, left top;
  mask-position: left bottom, left top;
  -webkit-mask-size: 100% var(--litw-swoop-depth), 100% calc(100% - var(--litw-swoop-depth) + 1px);
  mask-size: 100% var(--litw-swoop-depth), 100% calc(100% - var(--litw-swoop-depth) + 1px);
  }
}

@media (max-width: 1099px) {
  /* Stacked below 1100px, not just at the core 781px: side by side, the
     photo column turns into a tall sliver once the text column wraps long.
     flex-direction (not flex-basis) so the inline column widths need no
     override flag. Photo goes edge to edge, text keeps the page gutter. */
  .wp-block-columns.alignfull:has(> .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r)) {
  flex-direction: column;
  padding: 0;
  }

  /* Photo first, flush under the header, curve on its bottom edge leading
     into the copy - for both directions. Visual order only: the photo is
     decorative and holds nothing focusable, so reading and tab order are
     unchanged (WCAG 1.3.2, 2.4.3). */
  .wp-block-columns.alignfull > .wp-block-column:has(> :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r)) {
  order: -1;
  }

  .wp-block-columns.alignfull > .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r) {
  --litw-swoop-depth: clamp(32px, 6vw, 64px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90C50 90 90 200 150 150C200 100 215 35 300 50C345 57 400 50 400 0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90C50 90 90 200 150 150C200 100 215 35 300 50C345 57 400 50 400 0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  -webkit-mask-position: left bottom, left top;
  mask-position: left bottom, left top;
  -webkit-mask-size: 100% var(--litw-swoop-depth), 100% calc(100% - var(--litw-swoop-depth) + 1px);
  mask-size: 100% var(--litw-swoop-depth), 100% calc(100% - var(--litw-swoop-depth) + 1px);
  }

  .wp-block-columns.alignfull:has(> .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r)) > .wp-block-column:not(:has(> :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r))) {
  box-sizing: border-box; /* core gives a centred column width: 100% */
  padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
  /* No top padding: the columns' gap already separates the text from the
     photo above, and the two together put the headline 53px under it. */
  padding-block: 0 var(--wp--preset--spacing--50);
  }

  .wp-block-columns.alignfull > .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r) img {
  min-height: 0;
  height: auto;
  aspect-ratio: 2 / 1;
  /* 40vh: on a 1024x768 tablet or small laptop a 28rem photo pushed the
     hero heading below the fold. */
  max-height: min(28rem, 40vh);
  }

  /* Stacked, the curve is on the bottom edge, so centre the crop again
     (same selector weight as the desktop lean). */
  .wp-block-columns.alignfull > .wp-block-column:has(> .is-style-litw-swoop-l) > .is-style-litw-swoop-l img,
  .wp-block-columns.alignfull > .wp-block-column:has(> .is-style-litw-swoop-r) > .is-style-litw-swoop-r img {
  object-position: 50% 50%;
  }

  /* Rays off when stacked: the eyebrow right below already carries them.
     The photo note goes too; the stacked crop moves the faces under it. */
  .wp-block-columns.alignfull > .wp-block-column:has(> :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r))::before,
  .wp-block-columns.alignfull > .wp-block-column:has(> .litw-swoop-photo-note)::after {
  display: none;
  }
}

@media (forced-colors: active) {
  .wp-block-columns.alignfull > .wp-block-column:has(> :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r))::before,
  .wp-block-columns.alignfull > .wp-block-column:has(> .litw-swoop-photo-note)::after {
  display: none;
  }
}

/* Swoop options, set per photo in the Swoop accents panel (swoop-accents.js),
   each stored as a class token on the swoop block (2026-10-19):
   - Bottom end: rounded tuck (default, the paths above) or sharp
     (litw-swoop-end-sharp), the original curve that meets the bottom edge
     square after a last swing toward the text.
   - Band tint: none, Alt, medium navy or warm gold
     (litw-swoop-tint-alt|medium|warm) behind the whole band. Medium and warm
     live here only, so the editor palette stays at its eight colours.
   - Bottom shadow (litw-swoop-shadow-bottom): the header's shadow mirrored
     along the band's foot, so it sinks into the section below. No top
     option: the header casts one, and a tinted band redraws it (below).
   Tint and shadow need the full-width swoop band; a loose swoop ignores them. */
.is-style-litw-swoop-l.litw-swoop-end-sharp {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M110 0C110 50 0 90 50 150C100 200 170 210 150 280C135 330 95 350 95 400H200V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M110 0C110 50 0 90 50 150C100 200 170 210 150 280C135 330 95 350 95 400H200V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
}

.is-style-litw-swoop-r.litw-swoop-end-sharp {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M90 0C90 50 200 90 150 150C100 200 30 210 50 280C65 330 105 350 105 400H0V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M90 0C90 50 200 90 150 150C100 200 30 210 50 280C65 330 105 350 105 400H0V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
}

/* The rays sit on the curve, and the sharp curve is wider at these heights. */
.wp-block-column:has(> .litw-swoop-rays-mid.litw-swoop-end-sharp) {
--litw-rays-x: 0.63;
}

.wp-block-column:has(> .litw-swoop-rays-bottom.litw-swoop-end-sharp) {
--litw-rays-x: 0.58;
}

.wp-block-columns.alignfull:has(> .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r)) {
position: relative;
}

.wp-block-columns.alignfull:has(> .wp-block-column > .litw-swoop-tint-alt) {
background-color: var(--wp--preset--color--accent-5);
}

.wp-block-columns.alignfull:has(> .wp-block-column > .litw-swoop-tint-medium) {
background-color: #e3eaf1;
}

.wp-block-columns.alignfull:has(> .wp-block-column > .litw-swoop-tint-warm) {
background-color: #fffdf9;
}

/* Edge shadows, mirror images of the header's own (0 6px 16px -10px, see
   "Header: white"): as an inset shadow the same values show the same ~4px
   fall-off. A tinted band paints over the shadow the header or breadcrumb
   bar casts into it, so it redraws that along its top; the bottom option
   repeats it upside down so the two match. Above the photo (z-index 2
   clears the rays), so both run the full width. Forced-colors mode drops
   box-shadow by itself. */
.wp-block-columns.alignfull:has(> .wp-block-column > [class*="litw-swoop-tint-"]) {
--litw-band-shadow-top: inset 0 6px 16px -10px rgb(25 25 25 / 0.35);
}

.wp-block-columns.alignfull:has(> .wp-block-column > .litw-swoop-shadow-bottom) {
--litw-band-shadow-bottom: inset 0 -6px 16px -10px rgb(25 25 25 / 0.35);
}

.wp-block-columns.alignfull:has(> .wp-block-column > :is([class*="litw-swoop-tint-"], .litw-swoop-shadow-bottom))::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
box-shadow: var(--litw-band-shadow-top, 0 0 #0000), var(--litw-band-shadow-bottom, 0 0 #0000);
pointer-events: none;
}

@media (max-width: 781px) {
  .is-style-litw-swoop-l.litw-swoop-end-sharp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 110C50 110 90 0 150 50C200 100 210 170 280 150C330 135 350 95 400 95V200H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 110C50 110 90 0 150 50C200 100 210 170 280 150C330 135 350 95 400 95V200H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  }

  .is-style-litw-swoop-r.litw-swoop-end-sharp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90C50 90 90 200 150 150C200 100 210 30 280 50C330 65 350 105 400 105V0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90C50 90 90 200 150 150C200 100 210 30 280 50C330 65 350 105 400 105V0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  }
}

@media (max-width: 1099px) {
  .wp-block-columns.alignfull > .wp-block-column > :is(.is-style-litw-swoop-l, .is-style-litw-swoop-r).litw-swoop-end-sharp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90C50 90 90 200 150 150C200 100 210 30 280 50C330 65 350 105 400 105V0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90C50 90 90 200 150 150C200 100 210 30 280 50C330 65 350 105 400 105V0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  }
}

/* Bottom end "wave" (litw-swoop-end-wave, 2026-10-20): instead of the
   tuck, the curve drops straight down its last stretch, then turns through
   one broad rounded corner into a low wave (one crest) along the photo's
   bottom edge, ending on a trough that meets the outer edge level.

   No seam by construction. The figure's curve ends in a vertical line at
   x = 0.7 x depth for its bottom 25% (y 300-400), easing into it from the
   lower bulge with no overshoot (user: a gentle swoop, not a bump; 0.6-0.65
   read as a stark bulge). The foot is 22% of the height, so it always starts
   inside that vertical stretch, and its corner turns broadly from there
   (2026-10-20: the old 72px foot turned too low and too tight; user wanted
   the bottom swoop to start higher, one curve with the left side). The
   corner and wave are ONE shape, a second mask on the img
   (it intersects the figure's), a fixed-height foot whose left edge is
   placed at that same x and starts vertical. Both edges are vertical at
   the same x where they meet, so nothing depends on the photo's height or
   width. Stitching corner and wave from two differently stretched strips
   (the first version) always left a visible step.

   Side by side only: stacked, the curve is already on the bottom edge. A
   choice of the end select, so it never combines with the sharp end. */
@media (min-width: 1100px) {
  .is-style-litw-swoop-l.litw-swoop-end-wave,
  .is-style-litw-swoop-r.litw-swoop-end-wave {
  --litw-swoop-foot: 22%;
  }

  /* Same specificity as the focus safeguard below, which wins by order. */
  .is-style-litw-swoop-l.litw-swoop-end-wave {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M110 0C110 50 0 90 50 150C100 205 140 235 140 300V400H200V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M110 0C110 50 0 90 50 150C100 205 140 235 140 300V400H200V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  }

  .is-style-litw-swoop-r.litw-swoop-end-wave {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M90 0C90 50 200 90 150 150C100 205 60 235 60 300V400H0V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M90 0C90 50 200 90 150 150C100 205 60 235 60 300V400H0V0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  }

  .wp-block-columns.alignfull > .wp-block-column > .is-style-litw-swoop-l.litw-swoop-end-wave:not(:has(:focus-visible)) img {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C0 65 50 100 125 100C175 100 195 72 250 72C305 72 345 92 400 92V0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C0 65 50 100 125 100C175 100 195 72 250 72C305 72 345 92 400 92V0H0Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  -webkit-mask-position: right bottom, left top;
  mask-position: right bottom, left top;
  -webkit-mask-size: calc(100% - var(--litw-swoop-depth) * 0.7) var(--litw-swoop-foot), 100% calc(100% - var(--litw-swoop-foot) + 1px);
  mask-size: calc(100% - var(--litw-swoop-depth) * 0.7) var(--litw-swoop-foot), 100% calc(100% - var(--litw-swoop-foot) + 1px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  }

  .wp-block-columns.alignfull > .wp-block-column > .is-style-litw-swoop-r.litw-swoop-end-wave:not(:has(:focus-visible)) img {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M400 0C400 65 350 100 275 100C225 100 205 72 150 72C95 72 55 92 0 92V0H400Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M400 0C400 65 350 100 275 100C225 100 205 72 150 72C95 72 55 92 0 92V0H400Z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
  -webkit-mask-position: left bottom, left top;
  mask-position: left bottom, left top;
  -webkit-mask-size: calc(100% - var(--litw-swoop-depth) * 0.7) var(--litw-swoop-foot), 100% calc(100% - var(--litw-swoop-foot) + 1px);
  mask-size: calc(100% - var(--litw-swoop-depth) * 0.7) var(--litw-swoop-foot), 100% calc(100% - var(--litw-swoop-foot) + 1px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  }
}

/* Same focus safeguard as the blobs, for a linked photo. */
.is-style-litw-swoop-l:has(:focus-visible),
.is-style-litw-swoop-r:has(:focus-visible) {
-webkit-mask-image: none;
mask-image: none;
}

/* ==========================================================================
   4. Clickable Event Cards
   Used On: patterns/event-details-for-lists-and-cards.php,
            patterns/event-card-for-grids.php,
            templates/single-litw_event.html (inlined copy of the first)
   Added: September 11, 2026
   ==========================================================================

   Same stretched-link technique as .litw-branding above, for the event cards
   in query loops. The Post Title block is isLink:true and is the ONLY anchor
   in the card -- the "Event Details" read-more that used to sit at the bottom
   was removed precisely so this holds. Stretching the title anchor's ::after
   over the card makes the date, time, location and featured image clickable
   without adding a second anchor: one tab stop, one accessible name (the
   event title), no nested interactive elements.

   Do NOT add another link inside a .litw-clickable-card -- it would sit under
   the overlay and be unreachable by mouse. If one is ever needed, it has to be
   given `position: relative; z-index: 2` (above the overlay's z-index: 1), and
   it costs a second tab stop inside the card.

   Known tradeoff: the overlay intercepts pointer events, so the card's text
   cannot be selected by dragging. That is inherent to the technique.

   The class is on two nesting levels by design. In the list layouts the
   details group IS the card; in the grid layout that same group is nested
   inside the card wrapper that also holds the featured image. The nested rule
   drops the inner group back to `static` so the overlay resolves against the
   outer wrapper and covers the image too.
   ========================================================================== */

.litw-clickable-card {
  position: relative;
}

.litw-clickable-card .litw-clickable-card {
  position: static;
}

/* z-index is load-bearing, not decoration. WP core ships
   `:where(.wp-block-group.wp-block-group-is-layout-constrained){position:relative}`,
   and the card contains at least one constrained group (.litw-event-time-group).
   A positioned descendant later in tree order paints above a z-index:auto
   overlay, which left the event time as a dead spot. Raising the overlay puts
   it above every z-index:auto descendant regardless of their position value. */
.litw-clickable-card .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Hover affordance. The click target is now the whole card but the only thing
   that LOOKS like a link is the title, so hovering anywhere in the card
   underlines the title -- the standard signal for this pattern, and it makes
   the enlarged target discoverable instead of invisible.

   Post titles render `text-decoration: none` at rest here (verified in the
   browser), so this is a real state change rather than a no-op. `:hover` on
   the card beats the parent theme's `elements.link:hover {text-decoration:none}`
   on specificity -- that rule is `:where()`-wrapped, so it carries almost none.
   text-decoration-thickness is the exception and genuinely needs !important,
   for the same reason as the nav rule near the top of this file: the parent
   sets `a { text-decoration-thickness: 1px !important }`.

   The `:has(:focus-visible)` half gives keyboard users the same cue as mouse
   users -- the card-level focus ring below marks the target, the underline
   confirms which title it belongs to. */
.litw-clickable-card:hover .wp-block-post-title a,
.litw-clickable-card:has(:focus-visible) .wp-block-post-title a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 2px !important;
}

/* The overlay covers the card, so the pointer cursor the anchor already sets
   applies everywhere the card is clickable -- no extra rule needed. */

/* Focus ring must outline what is actually clickable (the whole card), not
   just the title text. `:has(:focus-visible)` rather than `:focus-within` so a
   mouse click does not draw it -- same convention as .litw-branding and the
   blob safeguards. */
.litw-clickable-card:has(:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* In the grid layout both the wrapper and the nested details group carry the
   class, so suppress the inner ring -- the outer one already outlines
   everything the click target covers. */
.litw-clickable-card .litw-clickable-card:has(:focus-visible) {
  outline: none;
}

@supports selector(:has(a)) {
  /* Only drop the anchor's own ring once we know the card-level ring above
     will render, so focus is never left invisible. */
  .litw-clickable-card .wp-block-post-title a:focus-visible {
    outline: none;
  }
}

/* ==========================================================================
   5. Past Events — Filters & Show More
   Used On: parts/event-archives.html (.litw-past-events grid)
   Added: September 15, 2026; filters added September 16, 2026
   ==========================================================================

   Replaces the old year-by-year accordion with one flat, unpaginated query
   (up to 100 posts) plus a live filter bar (year / category / location) and
   a "Show more" button. `html` gets the `js` class from a tiny synchronous
   inline script in wp_head (functions.php), before the page paints, and
   only then does any of this apply -- a no-JS visitor gets the full,
   unfiltered list with nothing hidden, never a dead-end truncated view.

   Two rules cooperate on hiding overflow, for different moments:

   1. Before past-events.js has run, overflow past the first 9 cards
      (3 rows at the grid's 3-column width) is hidden by DOM position.
      This is what prevents a flash of all cards between first paint and
      the script executing.
   2. Once past-events.js runs, it adds `litw-js-managed` to the grid and
      switches to hiding by class instead (`.litw-is-clipped`) -- because
      filtering and clipping share one script-owned state machine keyed off
      which cards *match the current filters*, and DOM position can't
      express that. A card hidden because it doesn't match the selected
      category is exactly as hidden as one past the "Show more" cutoff;
      the class doesn't distinguish why, only that it currently isn't
      part of what's shown. See past-events.js's own docblock for why
      layering position-based clipping under a filter breaks "Show more". */
.js .litw-past-events:not(.litw-js-managed) > :nth-child(n+10) {
  display: none;
}
.js .litw-past-events.litw-js-managed > .litw-is-clipped {
  display: none;
}

/* Button is created by past-events.js, not authored as a block -- so a
   no-JS visitor is never shown a control that wouldn't do anything.
   Reuses the theme's own filled-button classes (wp-element-button
   is-style-fill) so it inherits theme.json's button colors instead of
   duplicating them here. */
.litw-past-events-more {
  display: block;
  margin: var(--wp--preset--spacing--40) auto 0;
}

/* Author CSS beats the UA stylesheet's [hidden]{display:none} regardless of
   specificity, so the unconditional `display: block` above would otherwise
   keep the button visible after past-events.js sets `button.hidden = true`
   once everything is revealed. Higher specificity than the rule above
   (class + attribute vs. class alone) wins regardless of source order. */
.litw-past-events-more[hidden] {
  display: none;
}

/* Filter bar. Built entirely by past-events.js (see that file's docblock
   for why), inserted immediately before the Query Loop. Two rows -- the
   Year/Category/Location selects, then the Has Photos/Has Videos chips --
   which sit side by side from 782px up and stack below that (see "Past
   event cards and filter bar" at the end of this file for the toolbar
   surface and widths). Clear/status/no-results come after both rows so
   they read in a sensible order regardless of how much wrapped. */
.litw-past-events-filters {
  margin-bottom: var(--wp--preset--spacing--40);
}

.litw-past-events-filters__fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  border: 0;
  padding: 0;
  margin: 0;
  /* Browsers give <fieldset> a special intrinsic min-width tied to its
     content (like a table cell), which ignores the normal flex-shrink
     rules entirely -- min-width:0 further down the tree (the row, the
     field) can't compensate for the fieldset itself refusing to shrink.
     Without this override it's still the widest select, not the viewport,
     that ends up controlling the page's width on narrow screens. */
  min-width: 0;
}

.litw-past-events-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  /* Same min-width:auto flex-item floor as .litw-past-events-filters__field
     (this row is itself a flex item of the fieldset above) -- without it,
     this row's own intrinsic size still tracks its widest un-shrunk child. */
  min-width: 0;
}

.litw-past-events-filters__field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  /* Flex items default to min-width:auto, which floors their size at their
     content's intrinsic width -- for a <select> that's the widest *option*
     (e.g. a full street address as a location name), not the 11rem below.
     Without this, a long option forces this field (and the row, and the
     page) wider than the viewport on narrow screens instead of letting the
     select's own max-width/ellipsis rule (below) truncate it. */
  min-width: 0;
}

.litw-past-events-filters__field label {
  font-weight: 500;
}

/* Selects styled to match the site's one form-control convention (the CF7
   field rules above), in the design-system colors since 2026-10-15: white
   fill, ink text, 1px navy border (well over the 3:1 a control edge needs), the same
   1rem radius, spacing-token padding. That convention is a light box with
   dark text regardless of what section it sits in. (The archive sat on a
   dark is-style-section-5 until design system v1 made it light; the box
   still guards against that if it moves back.) Without it the plain native
   select would otherwise render at whatever tiny size/contrast the
   browser's UA stylesheet happens to pick. min-width keeps all three a
   consistent size regardless of which option's text is currently selected
   -- "All" is short and would otherwise look like a stub. max-width plus
   the ellipsis trio caps the other end: paired with min-width:0 on the
   field above, a long selected option (long location names especially)
   truncates with "…" inside the 11rem-and-up box instead of overflowing
   it -- a native <select>'s closed-box text supports text-overflow like
   any other inline content once its width is actually constrained. */
.litw-past-events-filters__field select {
  min-width: 11rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--wp--preset--spacing--20, 0.75rem) var(--wp--preset--spacing--30, 1rem);
  background-color: var(--wp--preset--color--accent-1, #fff);
  color: var(--wp--preset--color--accent-4, #34302b);
  border: 1px solid var(--wp--preset--color--accent-3, #2b4a68);
  border-radius: var(--wp--custom--border-radius, 1rem);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--medium);
}

/* Inset (negative offset), not the CF7 fields' outward one: this control
   can end up on a dark section background (it did until 2026-10-14), where an
   outward ring in the same dark contrast color would sit almost invisibly
   against it. Drawing the ring just inside the control's own light fill
   keeps it high-contrast no matter what's behind the control. */
.litw-past-events-filters__field select:focus-visible {
  outline: 2px solid var(--wp--preset--color--contrast, #191919);
  outline-offset: -3px;
}

/* Has Photos / Has Videos: a real <input type="checkbox"> (added 2026-09-17,
   see litw-site-utilities' event_photos_count/event_videos_count), shown as
   a pill in the same language as the gold photo/video chips on the cards it
   filters (section 6). Restyled 2026-10-15 from a sliding toggle. Off: an
   outlined pill with an empty tick circle. On: the gold chip fill with a navy
   tick. State, label and keyboard/screen-reader behavior all still come from
   the native control; only its paint is replaced (`appearance: none`). The
   label's ::after stretches over the whole pill, so a click anywhere on it
   toggles the box. */
.litw-past-events-filters__field--checkbox {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  background-color: var(--wp--preset--color--accent-1, #fff);
  border: 1px solid var(--wp--preset--color--accent-3, #2b4a68);
  border-radius: 999px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.litw-past-events-filters__field--checkbox label {
  cursor: pointer;
  font-weight: 600;
}

.litw-past-events-filters__field--checkbox label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.litw-past-events-filters__field--checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  background-color: var(--wp--preset--color--accent-1, #fff);
  border: 2px solid var(--wp--preset--color--accent-3, #2b4a68);
  border-radius: 50%;
  cursor: pointer;
}

/* The tick, drawn only when checked. */
.litw-past-events-filters__field--checkbox input[type="checkbox"]::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--wp--preset--color--accent-1, #fff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
}

.litw-past-events-filters__field--checkbox:has(:checked) {
  background-color: var(--wp--preset--color--accent-2, #f2c14e);
  border-color: var(--wp--preset--color--accent-2, #f2c14e);
  color: var(--wp--preset--color--accent-4, #34302b);
}

.litw-past-events-filters__field--checkbox input[type="checkbox"]:checked {
  background-color: var(--wp--preset--color--accent-3, #2b4a68);
}

.litw-past-events-filters__field--checkbox input[type="checkbox"]:checked::before {
  opacity: 1;
}

/* The ring goes on the whole pill, not the small circle inside it. */
.litw-past-events-filters__field--checkbox input[type="checkbox"]:focus-visible {
  outline: none;
}

.litw-past-events-filters__field--checkbox:has(:focus-visible) {
  outline: 2px solid var(--wp--preset--color--accent-3, #2b4a68);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .litw-past-events-filters__field--checkbox input[type="checkbox"]:checked::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}

.litw-past-events-filters__clear {
  display: block;
  margin-top: var(--wp--preset--spacing--30);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.litw-past-events-filters__clear[hidden],
.litw-past-events-filters__no-results[hidden] {
  display: none;
}

.litw-past-events-filters__status {
  margin-top: var(--wp--preset--spacing--30);
}

.litw-past-events-filters__no-results {
  margin-top: var(--wp--preset--spacing--30);
  font-style: italic;
}

/* ==========================================================================
   Search results: small featured-image thumbnail
   templates/search.html
   Added: September 16, 2026
   ==========================================================================

   The post-featured-image block's own "width" attribute only ever sizes the
   inner <img> (see render_block_core_post_featured_image() in
   wp-includes/blocks/post-featured-image.php) -- it never reaches the
   wrapping <figure> or the <a> around it. Left alone, the figure/link stay
   block-level and stretch to the full result width, so the clickable area
   would extend far past the visible thumbnail sitting inside it. Constrain
   the wrapper itself so the link's hit area matches what's shown.

   Scoped to this className rather than a bare `.wp-block-post-featured-
   image` selector because several other query loops on the site (event and
   art-gallery cards) intentionally render this block full-width.

   The constrained-layout group wrapping it centers any non-aligned child
   via `margin-left/right: auto !important` (core's generated layout CSS),
   which would otherwise center this narrower-than-content-width thumbnail
   instead of keeping it flush with the title/text below it -- the
   !important needs matching !important to win.
   ========================================================================== */
.litw-search-result-thumb {
  width: 320px;
  margin-left: 0 !important;
}

/* ==========================================================================
   6. Event Media Badges (Photos/Videos chips)
   Used On: patterns/event-card-for-grids.php (event grid cards, e.g. the
   Past Events archive and Upcoming Events cards) and
   templates/single-litw_event.html (the single event page)
   Added: September 17, 2026
   ==========================================================================

   Pill badges shown once an editor has entered a nonzero Number of Photos /
   Number of Videos for that event (event_photos_count / event_videos_count
   meta, litw-site-utilities), reading e.g. "30 Photos" or "1 Video"
   (event_photos_label / event_videos_label, computed server-side).
   litw-site-utilities' hide_disabled_media_badges() removes a badge's
   wrapping `.litw-event-badge-photos` / `-videos` group entirely (not just
   visually) when its count is 0, so there is nothing here to show/hide
   client-side -- same mechanism, same two classes, in both contexts below.

   Two different-looking, differently-marked-up badges share that mechanism:

   - **Grid card** (`.litw-event-badge`): non-interactive, `core/group` >
     `core/paragraph` -- no link or button -- because the whole card is
     already one stretched-link click target (see section 4 above); a link
     here would sit under that overlay and be unreachable by mouse.
   - **Single event page** (`.litw-event-badge-link`): a real `core/button`
     linking to a hardcoded `#photos` / `#videos` anchor elsewhere on the
     page (the editor places the matching `id`), sized larger than the grid
     chip per an explicit accessibility ask for a bigger touch target here.
     There's no stretched-link overlay on this template, so an actual link
     is safe.

   Layout type is `flex` on `.litw-event-badges` (the row) and, for the grid
   chip, on `.litw-event-badge` too (so the icon and label sit inline), not
   `constrained` -- core's `:where(.wp-block-group-is-layout-constrained)
   {position:relative}` is exactly what turned `.litw-event-time-group` into
   a dead click spot under the card's overlay (section 4's z-index note);
   flex groups don't pick up that rule, so the grid chip needs no z-index at
   all (moot for the single-page button, which is a real link and is
   supposed to be clickable).

   Both are deliberately quiet (2026-10-19): the gold pills were the
   heaviest mark on a card and read as the page's main call to action on
   the event page. The grid card shows a muted metadata line, the event page
   uses the Icon Link look (icon + underlined label, inheriting ink).
   The muted #4a5868 measures ~7.4:1 on the white card.
   ========================================================================== */
.litw-event-badges {
  gap: var(--wp--preset--spacing--20);
}

/* Grid card: "6 Videos · 4 Photos" as one muted line of facts. */
.litw-event-badge {
  align-items: center;
  gap: 0.35em;
  color: #4a5868;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
}

.litw-event-badges:has(> .litw-event-badge) {
  gap: 0;
}

/* Separator dot between the two; decorative, kept out of the text. */
.litw-event-badge + .litw-event-badge::before {
  content: "·" / "";
  margin-inline: 0.5em;
}

/* The badge's inner paragraph is a lone flex child, not flowing block
   content -- its default browser margin would otherwise inflate the line. */
.litw-event-badge p {
  margin: 0;
}

/* Single event page: the Icon Link look -- icon plus underlined label in the
   surrounding ink. Still a real link to the #photos / #videos anchor, so it
   keeps its underline and focus ring. Selector targets the className on
   core/button's own wrapper + link (this variant has no .litw-event-badge). */
.wp-block-button.litw-event-badge-link .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0;
  background: none;
  color: inherit;
  border: none;
  border-radius: 0;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The parent theme ships a bare `a { text-decoration-thickness: 1px !important }`. */
.wp-block-button.litw-event-badge-link .wp-block-button__link:hover,
.wp-block-button.litw-event-badge-link .wp-block-button__link:focus-visible {
  text-decoration-thickness: 2px !important;
}

.wp-block-button.litw-event-badge-link .wp-block-button__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Inline links need their own spacing to meet the 24px target spacing rule
   (WCAG 2.5.8): a wide gap keeps each link's 24px circle clear of the other. */
.litw-event-badges:has(.litw-event-badge-link) {
  gap: var(--wp--preset--spacing--30);
}

/* In the event hero, everything after the details (the Sign up button and
   the photo/video links) lines up with the details' text column, as on the
   past-event cards: the date tile's width (4.75rem, litw-site-utilities
   event-date-tile/style.css) plus the Event Details block's gap. Only when
   the block actually drew a tile (.has-tile). */
.litw-event-hero .wp-block-litw-event-details.has-tile ~ :is(.wp-block-buttons, .litw-event-badges) {
  padding-inline-start: calc(4.75rem + var(--wp--preset--spacing--30));
}

/* ===================================================================
   Native image lightbox: "Enlarge" trigger at the 24px minimum target
   size (WCAG 2.5.8). Core ships it at 20x20; this sheet loads after the
   image block's styles, so equal specificity wins on source order.
   =================================================================== */
.wp-lightbox-container button {
  width: 24px;
  height: 24px;
}

/* ===================================================================
   Reduced motion: drop this sheet's own small hover/focus transitions
   (form fields, submit button, past-events filter chips). Larger motion is
   already gated individually; this catches the remaining fades and
   nudges in one place. :is() takes its most specific argument, so the
   first selector matches `.wpcf7 input[type="text"]` and wins on order.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wpcf7 :is(input[type], select, textarea),
  .litw-past-events-filters__field--checkbox {
    transition: none;
  }
}

/* ===================================================================
   Pasted Instagram embeds (Custom HTML on two stories): Instagram puts
   an inline `min-width: 326px` on the <blockquote> and on the <iframe>
   its embed.js swaps in, which forces horizontal scroll at a 320px
   viewport (WCAG 1.4.10). Only an important flag beats an inline
   style, so this one is deliberate, like the lightbox ones.
   =================================================================== */
.instagram-media {
  min-width: 0 !important;
  max-width: 100%;
}

/* ===================================================================
   Homepage feedback, step 1 (2026-10-13): nav hover, header edge,
   story crops, partner logo heights.
   =================================================================== */

/* Header: white (accent-1) against the off-white base, plus a soft
   shadow, separates it from the hero. Raised (2026-10-21) because the
   phone hero photo, edge to edge under it, painted over the shadow. The
   mobile overlay lives inside the header, so it still covers the page;
   z-index 2 sits above the footer's 1. */
header.wp-block-template-part {
  position: relative;
  z-index: 2;
  background-color: var(--wp--preset--color--accent-1);
  box-shadow: 0 6px 16px -10px rgb(25 25 25 / 0.35);
}

/* Core's root block gap puts 20px of base colour between the header
   and <main>. Next to a white header, that strip shows above any page
   that opens on a coloured section (e.g. /events/). */
header.wp-block-template-part + main {
  margin-block-start: 0;
}

/* End of page (2026-10-19, gap widened 2026-10-20): every template ends
   its content spacing--50 above the footer, and the footer adds
   --litw-footer-gap on top, so the space above the footer is the same
   on every page (--litw-footer-space). A page that ends on a full-width
   band sits on the footer instead and takes the same space as the
   band's bottom padding (rule with the waves, below). page.html's body
   wrapper carries its padding here rather than inline so that band
   exception can win. */
:root {
  --litw-footer-gap: clamp(56px, 6vw, 80px);
  --litw-footer-space: calc(var(--wp--preset--spacing--50) + var(--litw-footer-gap));
}

footer.wp-block-template-part {
  margin-block-start: var(--litw-footer-gap);
}

.litw-page-body {
  padding-block-end: var(--wp--preset--spacing--50);
}

.litw-page-body:has(> .wp-block-post-content > .alignfull.has-background:last-child) {
  padding-block-end: 0;
}

/* A query's no-results and pagination wrappers render empty when there are
   results on a single page, but each still took a 1.2rem block gap under
   the last card (the art gallery archive). */
.wp-block-query > .wp-block-group:not(:has(*)) {
  display: none;
}

/* The title lines up with the content under it: a page that opens on a
   wide block (About, Give, Videos) gets a wide title, as the archives
   have; text-width pages (News, Media Toolkit) keep the content width. */
.litw-page-body:has(> .wp-block-post-content > .alignwide:first-child) > .wp-block-post-title {
  max-width: var(--wp--style--global--wide-size);
}

/* Every H1 is navy (theme.json h1 element). The swoop heroes on Home and
   Partner are the exception: their H1 is a long phrase in an editable
   heading block inside a full-width swoop columns block, and keeps the
   Ink body colour (user, 2026-10-21). About's one-word H1 matches Give's,
   so it stays navy. */
.wp-block-columns.alignfull:not(.litw-about-hero) h1.wp-block-heading {
  color: var(--wp--preset--color--accent-4);
}

/* Nav hover/focus: a colour shift plus an underline, kept distinct
   from the current-page state (2px underline + 600 weight, above).
   accent-3 on base is 6.9:1. */
.wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible) {
  color: var(--wp--preset--color--accent-3);
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .wp-block-navigation .wp-block-navigation-item__content {
    transition: color 0.15s ease;
  }
}

/* Story cards: one crop for every featured image, whatever shape the
   source photo is. Not the art gallery grid, which shows each piece whole:
   it is excluded here rather than overridden later, because the override
   (aspect-ratio: auto) also drops the width/height-attribute ratio, and
   lazy `sizes="auto"` images then fall back to core's 3000x1500 intrinsic
   placeholder. :where() keeps this rule's weight unchanged. */
.wp-block-query .wp-block-post-featured-image img:where(:not(.litw-gallery-grid img)) {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Partner logo wall (homepage, 2026-10-19): every logo sits on an identical
   white tile and keeps its own proportions inside a fixed-height box, so
   logos that bring their own background (MRAC's yellow, GTCYS's white)
   read as one set. The tile's white fill gets the hairline card border
   from the white-group rule. The images carry no "scale" setting, so no
   inline object-fit needs overriding. */
/* Four logos: 4 columns, else 2, else 1, so a row never holds one tile
   alone (the block's auto-fill grid gives 3 + 1 at tablet width). Two
   classes so this beats the block-support container rule. */
.wp-block-group.litw-logo-wall {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1000px) {
  .wp-block-group.litw-logo-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 419px) {
  .wp-block-group.litw-logo-wall {
    grid-template-columns: minmax(0, 1fr);
  }
}

.litw-logo-tile {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: var(--wp--preset--spacing--30);
}

.litw-logo-tile .wp-block-image {
  width: 100%;
  margin: 0;
}

.litw-logo-tile .wp-block-image img {
  width: 100%;
  height: 76px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

/* ===================================================================
   Footer columns (homepage feedback step 4, 2026-10-13): four columns
   only fit from about 1280px. Between core's 782px stacking point and
   there, put the brand column on its own row and the three link columns
   in a row beneath it. Core forces `flex-wrap: nowrap !important` from
   782px, and each column carries an inline flex-basis, so both
   overrides need an important flag.
   =================================================================== */
@media (min-width: 782px) and (max-width: 1279px) {
  footer .wp-block-columns.alignwide {
    flex-wrap: wrap !important;
  }

  footer .wp-block-columns.alignwide > .wp-block-column {
    flex: 1 1 0 !important;
  }

  footer .wp-block-columns.alignwide > .wp-block-column:first-child {
    flex-basis: 100% !important;
  }
}

/* Icon Link buttons that open a modal are <button>s, not <a>s, so they
   miss the parent theme's `a` underline (1px, .1em offset) and get the
   browser's thicker default from the plugin's `text-decoration` shorthand.
   Match them to links; the extra element keeps this above that shorthand. */
.wp-block-button.is-style-icon-link > button.wp-block-button__link {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
}

/* Footer social links: in the brand column they wrapped 1 / 1 / 2
   (Facebook, YouTube, then Instagram + TikTok). A 2x2 grid keeps them
   even. Phones keep core's flex wrap, which stacks one per row there. */
@media (min-width: 782px) {
  footer .wp-block-social-links {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--wp--preset--spacing--40);
  }
}

/* Visible social-link labels are sized by core in em off the icon size
   (0.65em of "large" = 23.4px), which sits off the type scale. Pin them
   to body size; the icon keeps its own size. The selector matches the
   specificity of core's `.wp-social-link span:not(.screen-reader-text)`. */
.wp-block-social-links .wp-social-link span.wp-block-social-link-label {
  font-size: var(--wp--preset--font-size--medium);
}

/* ===================================================================
   Motion (homepage feedback step 5, 2026-10-13). Everything here sits
   inside prefers-reduced-motion: no-preference, so a visitor who asks
   for less motion gets none of it.

   - Buttons and grid cards lift slightly on hover and keyboard focus.
     Icon-link buttons look like plain links, so they don't lift.
   - Grid cards and shaped (blob) images rise into place as they
     scroll into view. This is CSS scroll-driven animation only, gated
     on @supports; browsers without it show everything at rest.
     It animates `translate`, never opacity, so text contrast is never
     reduced mid-animation, and it leaves `transform` free for the
     hover lift.
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .wp-block-button:not(.is-style-icon-link) > .wp-element-button,
  .wp-block-post-template.is-layout-grid > li,
  .litw-audience-tile {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .wp-block-button:not(.is-style-icon-link) > .wp-element-button:is(:hover, :focus-visible) {
    transform: translateY(-2px);
  }

  .wp-block-post-template.is-layout-grid > li:is(:hover, :has(:focus-visible)),
  .litw-audience-tile:is(:hover, :has(:focus-visible)) {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wp-block-post-template.is-layout-grid > li,
    main :is(.litw-blob, .litw-blob-round) {
      animation: litw-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

@keyframes litw-rise {
  from {
    translate: 0 2rem;
  }

  to {
    translate: 0 0;
  }
}

/* ===================================================================
   Testimonials (homepage feedback step 3, 2026-10-13). The role line
   under each name is visually secondary.
   =================================================================== */
.litw-testimonial-role {
  opacity: 0.85;
}

/* ===================================================================
   Audience cards (2026-10-14): the homepage "Find your way in" tiles
   and the Partner with Us tabs are one component, so the click from a
   tile lands on a tab that looks the same.

   - .litw-audience-tile: a core Group on the homepage. The title link's
     ::after covers the tile so the whole tile is clickable; the link
     text stays the accessible name and the description is read as the
     next paragraph (same pattern as .litw-clickable-card). Padding lives
     here, not in the block, so the phone layout can change it.
   - .litw-audience-tabs: opt-in class on a litw/tab-list (Additional CSS
     class). The plugin's underline tabs stay the default elsewhere. Text
     inside role="tab" is its accessible name and would be re-read on every
     arrow key, so the tab's description is aria-hidden and attached with
     aria-describedby instead.

   Both share the white card, the same grid columns, and a gold-tint
   icon badge that turns solid gold on hover, focus and selection. The
   focus ring is navy, never currentColor, which would be white on the
   selected (navy) tab. Selected state is keyed off aria-selected, which
   the tab script keeps current.
   =================================================================== */
.litw-audience-tile,
.litw-audience-tabs .litw-tab-control {
  --litw-badge: 2.75rem;
  /* One inner rhythm for both cards at every width (2026-10-19): even
     padding on all four sides, one gap between badge, label and text. */
  --litw-card-pad: 1rem;
  --litw-card-gap: 0.5rem;
  position: relative;
  background: var(--wp--preset--color--accent-1);
  border: 1px solid var(--wp--preset--color--accent-6);
  border-radius: 1rem;
  box-shadow: var(--wp--preset--shadow--natural);
  color: var(--wp--preset--color--accent-4);
}

.litw-audience-tile .litw-text-icon,
.litw-audience-tabs svg.litw-tab-icon,
.litw-audience-tabs .litw-tab-control-icon svg {
  box-sizing: border-box;
  display: block;
  flex: none;
  width: var(--litw-badge);
  height: var(--litw-badge);
  margin: 0;
  padding: calc(var(--litw-badge) * 0.23);
  border-radius: 50%;
  /* A replaced element clips its content to the inner radius, which at
     50% is a circle the size of the icon: strokes in the icon's corners
     (the church's base) were shaved off. The badge stays round anyway. */
  overflow: visible;
  background: color-mix(in srgb, var(--wp--preset--color--accent-2) 30%, white);
  color: var(--wp--preset--color--accent-3);
  transition: background-color 0.2s ease;
}

.litw-audience-tile:is(:hover, :has(:focus-visible)) .litw-text-icon,
.litw-audience-tabs .litw-tab-control:is(:hover, :focus-visible, [aria-selected="true"]) :is(svg.litw-tab-icon, .litw-tab-control-icon svg) {
  background: var(--wp--preset--color--accent-2);
}

.litw-audience-tile:has(:focus-visible),
.litw-audience-tabs .litw-tab-control:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-3);
  outline-offset: 4px;
}

/* Homepage tile: the tab's badge-and-label row, description below. */
.litw-audience-tile {
  padding: var(--litw-card-pad);
}

.litw-audience-tile > p:first-child {
  display: flex;
  align-items: center;
  gap: var(--litw-card-gap);
  margin: 0;
}

/* Title rows line up across a row of tiles, so every description starts at
   the same height even when one title wraps. Each tile spans two rows of the
   parent grid and adopts them as a subgrid. */
@supports (grid-template-rows: subgrid) {
  /* An explicit gap: a subgrid's "normal" gap inherits the parent grid's
     wide one. (The tiles' own blockGap names spacing--10, which this theme
     does not define, so it never applied.) */
  .litw-audience-tile.is-layout-flex {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: var(--litw-card-gap);
    align-content: start;
  }
}

.litw-audience-tile a {
  color: inherit;
  text-decoration: none;
  text-wrap: balance;
}

.litw-audience-tile a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.litw-audience-tile a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.litw-audience-tile a:focus-visible {
  outline: none;
}

/* Stacked card (2026-10-19): badge on top, then label, then description,
   on both surfaces from 601px up. Beside the badge, "Faith Communities"
   and "Sponsors & Volunteers" wrapped at 1200px while the other two
   didn't; stacked, the label gets the card's full width. Same 2x2 / 1x4
   grid as the tabs, so a tile and its tab are the same card at every
   width above phones. */
@media (min-width: 601px) {
  .wp-block-group.is-layout-grid:has(> .litw-audience-tile) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .litw-audience-tile > p:first-child {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 960px) {
  .wp-block-group.is-layout-grid:has(> .litw-audience-tile) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* Partner tabs: same cards as the tiles. Fixed 2x2 / 1x4 (one column on
   phones) rather than
   auto-fit, so the row count is known and the caret below can't point
   at a tab in the next row (auto-fit gave 3+1 between 601 and ~1000px).
   minmax(0, 1fr) lets a column shrink below its longest word, so
   "Communities" can't push the grid past a 320px viewport. */
.litw-tab-list.litw-audience-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
}

@media (min-width: 960px) {
  .litw-tab-list.litw-audience-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.litw-audience-tabs .litw-tab-control {
  display: flex;
  align-items: center;
  gap: var(--litw-card-gap);
  padding: var(--litw-card-pad);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  text-align: start;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* The tab's description (litw/tab-control "description", plugin 2.41.0)
   matches the tile's: small size, regular weight. It is aria-hidden and
   referenced by aria-describedby, so the label alone stays the tab's name. */
.litw-audience-tabs .litw-tab-desc {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
  text-wrap: pretty;
}

@media (min-width: 601px) {
  .litw-audience-tabs .litw-tab-control {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Badge, label and description rows line up across the row even if a
     label wraps, as the tiles' subgrid does. */
  @supports (grid-template-rows: subgrid) {
    .litw-audience-tabs .litw-tab-control.has-description {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: var(--litw-card-gap);
      align-content: start;
      justify-items: start;
    }
  }
}

.litw-audience-tabs .litw-tab-control[aria-selected="true"] {
  background: var(--wp--preset--color--accent-3);
  border-color: var(--wp--preset--color--accent-3);
  color: #fff;
}

/* Caret under the selected tab, pointing at its panel. One row only:
   in two rows a caret on the top row would point at the second row. */
@media (min-width: 960px) {
  .litw-audience-tabs .litw-tab-control[aria-selected="true"]::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    translate: -50% 0;
    border: 9px solid transparent;
    border-bottom: 0;
    border-top-color: var(--wp--preset--color--accent-3);
  }
}

/* Phones: one column, badge beside the label, description below — the
   homepage tile's phone layout, so the two pages show the same card. */
@media (max-width: 600px) {
  .litw-tab-list.litw-audience-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .litw-audience-tabs .litw-tab-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--litw-card-gap);
  }

  .litw-audience-tabs .litw-tab-desc {
    grid-column: 1 / -1;
  }
}

/* Tab panels are focusable (tabindex="0", per the ARIA tabs pattern), so
   a mouse click on any text inside one focused it and drew the parent
   theme's site-wide :focus outline round the whole panel. Keep that
   outline for keyboard focus only. */
.litw-tab-panel:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  .litw-audience-tile:hover,
  .litw-audience-tabs .litw-tab-control:not([aria-selected="true"]):hover {
    box-shadow: var(--wp--preset--shadow--deep);
  }

  .litw-audience-tabs .litw-tab-control {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .litw-audience-tabs .litw-tab-control:not([aria-selected="true"]):hover {
    transform: translateY(-4px);
  }
}

/* ==========================================================================
   Design system v1 (2026-10-14)
   Soft white page, white cards, ONE navy band per page, gold only for
   highlights and doodles. Palette roles live in theme.json:
     base = page · accent-1 = card · accent-5 = alternate section
     accent-6 = hairline · accent-3 = navy (Deep band + buttons)
     accent-2 = gold (fill/decoration only, never text on light)
     accent-4 = ink
   Reference board: https://claude.ai/artifact/AuqJQ4EYbD162HYcXwyhAv
   ========================================================================== */

/* Cards: a white group or column that is not full width is a card. The
   hairline separates white from the near-white page; the soft navy shadow
   comes from the redefined "natural" preset in theme.json. */
:is(.wp-block-group, .wp-block-column).has-accent-1-background-color:not(.alignfull) {
  border: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
}

/* Eyebrow: the small label above a section heading. Add to a Paragraph, or
   to an h2 when the eyebrow IS the section's heading (Past Events, and the
   Upcoming Events block's label) so the outline stays h1 > h2 > h3. Family
   and line height are set here so an h2 doesn't pick up the serif heading
   face from theme.json. */
.litw-eyebrow {
  font-family: var(--wp--preset--font-family--open-sans);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-3, #2b4a68);
}

.is-style-section-5 .litw-eyebrow,
.is-style-section-4 .litw-eyebrow {
  color: var(--wp--preset--color--accent-2, #f2c14e);
}

/* Tilt: a slight hand-placed rotation for feature photos and cards. */
.litw-tilt-l {
  rotate: -1.5deg;
}

.litw-tilt-r {
  rotate: 1.5deg;
}

/* Alternate tilt across a grid of cards (Post Template or any grid): odd
   items lean left, even items lean right. Add to the Post Template block. */
.litw-tilt-alternate > :nth-child(odd) :is(.wp-block-post-featured-image, .wp-block-image) {
  rotate: -1.5deg;
}

.litw-tilt-alternate > :nth-child(even) :is(.wp-block-post-featured-image, .wp-block-image) {
  rotate: 1.5deg;
}

/* Focus on navy surfaces. The parent theme rings buttons in accent-4 ink,
   about 1.4:1 against navy, under the 3:1 non-text minimum. Gold is 5.5:1
   against #2b4a68; the 2px offset keeps navy between the ring and a gold
   button, so the ring still reads around the gold fill. */
:is(.is-style-section-4, .is-style-section-5, .has-accent-3-background-color, .has-contrast-background-color, .has-accent-8-background-color) :is(a, button, .wp-element-button):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2, #f2c14e);
  outline-offset: 2px;
}

/* ===================================================================
   Partner with Us (2026-10-15): hero, tab panels, how-it-works steps,
   we-bring/you-bring cards, FAQ, closing band. All classes are opt-in
   (Additional CSS class on core blocks in page 1572 / pattern 4480),
   so nothing here touches other pages' accordions, lists or cards.

   Card titles inside panels are real h3s (they sit under the panel's
   h2) but are sized as card labels, not section headings: the type
   scale's h3 would wrap three-word titles over three lines in a
   15rem column.
   =================================================================== */
.litw-lede {
  max-width: 40em;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.55;
}

/* Hero: three proof points as icon-free, bold-led lines with a gold tick. */
.litw-hero-points {
  padding-left: 0;
  /* Not "none": Safari/VoiceOver then stops announcing a list. */
  list-style: "\200B";
}

.litw-hero-points li {
  position: relative;
  padding-left: 1.75rem;
}

.litw-hero-points li + li {
  margin-top: 0.5rem;
}

.litw-checklist li::before,
.litw-hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232b4a68' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.7rem 0.7rem no-repeat;
}

/* Tab panel ---------------------------------------------------------- */
.litw-partner-panel {
  padding-top: var(--wp--preset--spacing--40);
}

.litw-partner-panel > * + * {
  margin-block-start: var(--wp--preset--spacing--30);
}

.litw-partner-panel__intro {
  gap: var(--wp--preset--spacing--40);
}

.litw-partner-panel__intro h2 {
  margin-block: 0.25rem 0.75rem;
}

.litw-partner-panel__media img {
  border-radius: 1rem;
  box-shadow: var(--wp--preset--shadow--deep);
}

.litw-partner-panel > .litw-eyebrow {
  margin-block-start: var(--wp--preset--spacing--40);
}

/* Format cards: three across, never an empty fourth track. */
.wp-block-group.litw-format-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--wp--preset--spacing--30);
  margin-block-start: 0.75rem;
}

/* Quiet panels (2026-10-21), not white tiles: a boxed white card with a
   badge beside its label read as another row of the partnership-type tabs
   above. The quiet surface, hairline and no shadow (the About person card's
   treatment) keep them informational; the plain icon stays over the heading. */
.litw-format-card {
  padding: var(--wp--preset--spacing--40);
  background-color: var(--litw-quiet-surface);
  border: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
  border-radius: 1rem;
  box-shadow: none;
}

.litw-format-card h3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-family: var(--wp--preset--font-family--open-sans);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 1.3;
}

.litw-format-card h3 .litw-text-icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  overflow: visible;
  color: var(--wp--preset--color--accent-3);
}

.litw-bring-card h3 .litw-text-icon {
  box-sizing: border-box;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0.55rem;
  overflow: visible;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--accent-2) 30%, white);
  color: var(--wp--preset--color--accent-3);
}

.litw-format-card p {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
}

.litw-format-note {
  font-size: var(--wp--preset--font-size--small);
  font-style: italic;
}

/* Proof: one real quote or one story per panel. */
.wp-block-quote.litw-proof {
  margin-inline: 0;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border: 0;
  border-left: 4px solid var(--wp--preset--color--accent-2);
  border-radius: 0 1rem 1rem 0;
  background: var(--wp--preset--color--accent-5);
}

.wp-block-quote.litw-proof p {
  font-family: var(--wp--preset--font-family--literata);
  font-size: var(--wp--preset--font-size--large);
  font-style: normal;
  line-height: 1.4;
}

.wp-block-quote.litw-proof cite {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--wp--preset--font-size--small);
  font-style: normal;
  font-weight: 600;
}

.litw-story-proof {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30);
  border-radius: 1rem;
}

.litw-story-proof .litw-story-proof__photo {
  flex: none;
  width: 7.5rem;
  margin: 0;
}

.litw-story-proof .litw-story-proof__photo img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.litw-story-proof__body > * {
  margin-block: 0 0.5rem;
}

.litw-story-proof__quote {
  font-family: var(--wp--preset--font-family--literata);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.45;
}

.litw-partner-panel__actions {
  gap: 0.75rem;
}

.litw-back-to-tabs {
  font-size: var(--wp--preset--font-size--small);
}

.litw-back-to-tabs a::before {
  content: "↑ ";
}

/* How it works: numbered steps, four across, a timeline on phones. */
.litw-how {
  margin-block-start: var(--wp--preset--spacing--60);
}

.litw-steps {
  counter-reset: litw-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--wp--preset--spacing--30);
  padding: 0;
  /* Not "none": Safari/VoiceOver then stops announcing a list. */
  list-style: "\200B";
}

.litw-steps li {
  counter-increment: litw-step;
  position: relative;
  padding-top: 3.75rem;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
}

.litw-steps li::before {
  content: counter(litw-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-3);
  color: #fff;
  font-family: var(--wp--preset--font-family--literata);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
}

/* A gold rule joining the numbers on wide screens. */
.litw-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.375rem;
  left: 3.5rem;
  right: 0.75rem;
  border-top: 2px dashed var(--wp--preset--color--accent-2);
}

/* Between the phone timeline and four across, auto-fit leaves 3 + 1, so the
   gold rule after step 3 points at nothing. Hold 2 x 2 and end the rule at
   the end of each row. */
@media (min-width: 782px) and (max-width: 999px) {
  .litw-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .litw-steps li:nth-child(2n)::after {
    display: none;
  }
}

.litw-steps strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--wp--preset--font-size--medium);
}

/* Past partners strip */
.litw-partner-strip {
  margin-block-start: var(--wp--preset--spacing--50);
  padding-block: var(--wp--preset--spacing--30);
  border-block: 1px solid var(--wp--preset--color--accent-6);
  text-align: center;
}

/* On the Mist band since 2026-10-21 it continues How it works: no gap and
   no top rule between them. */
.litw-how + .litw-partner-strip {
  margin-block-start: 0;
  border-block-start: 0;
}

.litw-partner-strip > * {
  margin-block: 0.25rem;
}

.litw-partner-strip__names {
  text-wrap: balance;
}

.litw-ways,
.litw-bring-section {
  margin-block-start: var(--wp--preset--spacing--60);
}

.litw-bring {
  margin-block-start: var(--wp--preset--spacing--30);
}

.litw-bring-card {
  height: 100%;
  padding: var(--wp--preset--spacing--40);
  border-radius: 1rem;
}

.litw-bring-card h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0;
}

.litw-checklist {
  padding: 0;
  /* Not "none": Safari/VoiceOver then stops announcing a list. */
  list-style: "\200B";
}

.litw-checklist li {
  position: relative;
  padding-left: 1.75rem;
}

.litw-checklist li + li {
  margin-top: 0.6rem;
}

/* FAQ ------------------------------------------------------------------
   Wide: heading and help card on the left, one list on the right.
   Narrow: heading, list, then help card (source order). Questions keep
   their h3 level but read at body-large size; one white card with
   hairline dividers instead of nine floating slabs. Gold left rule on
   the open item is a fill, never text. */
.litw-faq {
  margin-block: var(--wp--preset--spacing--60);
  scroll-margin-top: 2rem;
}

.litw-faq > * {
  margin-block-start: 0;
}

.litw-faq__head h2 {
  margin-block: 0.25rem 0.75rem;
}

.litw-faq__list {
  overflow: hidden;
  margin-block-start: var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--accent-1);
  border: 1px solid var(--wp--preset--color--accent-6);
  border-radius: 1rem;
  box-shadow: var(--wp--preset--shadow--natural);
}

.litw-faq__list .wp-block-accordion-item {
  margin: 0;
  border-left: 4px solid transparent;
}

.litw-faq__list .wp-block-accordion-item + .wp-block-accordion-item {
  border-top: 1px solid var(--wp--preset--color--accent-6);
}

.litw-faq__list .wp-block-accordion-item.is-open {
  border-left-color: var(--wp--preset--color--accent-2);
}

.litw-faq__list .wp-block-accordion-heading {
  margin: 0;
  font-family: var(--wp--preset--font-family--open-sans);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.35;
}

.litw-faq__list .wp-block-accordion-heading__toggle {
  min-height: 3.5rem;
  padding: 1rem var(--wp--preset--spacing--30);
  gap: 1rem;
}

.litw-faq__list .wp-block-accordion-heading__toggle:hover {
  background: var(--wp--preset--color--accent-5);
}

.litw-faq__list .wp-block-accordion-heading__toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-3);
  outline-offset: -4px;
}

.litw-faq__list .wp-block-accordion-panel > * {
  max-width: 65ch;
  margin-inline: var(--wp--preset--spacing--30);
}

.litw-faq__list .wp-block-accordion-panel > :last-child {
  margin-bottom: 1.25rem;
}

.litw-faq__help {
  margin-block-start: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30);
  border-radius: 1rem;
}

.litw-faq__help > * {
  margin-block: 0 0.75rem;
}

.litw-faq__help > :last-child {
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .litw-faq {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) 2fr;
    grid-template-areas: "head list" "help list";
    grid-template-rows: auto 1fr;
    column-gap: var(--wp--preset--spacing--50);
    align-items: start;
  }

  .litw-faq__head { grid-area: head; }
  .litw-faq__list { grid-area: list; margin-block-start: 0; }
  .litw-faq__help { grid-area: help; }
}

/* Closing band: tint since 2026-10-19 (it was navy, which merged with
   the footer while that was Night; the footer is Alt deep since
   2026-10-20). */
.litw-closing {
  margin-block-start: var(--wp--preset--spacing--60);
  padding-block: var(--wp--preset--spacing--60);
  text-align: center;
}

.litw-closing.alignfull {
  border-radius: 0;
}

.litw-closing__actions {
  justify-content: center;
}

/* Phones ------------------------------------------------------------- */
@media (max-width: 781px) {
  /* Panel photo repeats the hero's job on a phone; drop it. */
  .litw-partner-panel__media {
    display: none;
  }

  /* Photo above the text: beside it, the text column was ~10 words wide. */
  .litw-story-proof {
    flex-direction: column;
    align-items: flex-start;
  }

  .litw-story-proof .litw-story-proof__photo {
    width: 4.5rem;
  }

  .wp-block-quote.litw-proof {
    padding: var(--wp--preset--spacing--30);
  }

  .wp-block-quote.litw-proof p {
    font-size: var(--wp--preset--font-size--medium);
  }

  /* Full-width buttons are easier targets and don't leave ragged rows. */
  .litw-partner-panel__actions .wp-block-button,
  .litw-partner-hero .wp-block-button,
  .litw-home-hero .wp-block-button {
    flex: 1 1 100%;
  }

  .litw-partner-panel__actions .wp-block-button__link,
  .litw-partner-hero .wp-block-button__link,
  .litw-home-hero .wp-block-button__link {
    width: 100%;
  }

  /* Steps: a vertical timeline. One column, or auto-fit makes 2x2 and the
     connectors run 1 to 3 and 2 to 4. */
  .litw-steps {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }

  .litw-steps li {
    padding-top: 0;
    padding-left: 3.75rem;
    min-height: 2.75rem;
  }

  .litw-steps li:not(:last-child)::after {
    top: 3.25rem;
    bottom: calc(-1 * var(--wp--preset--spacing--30) + 0.5rem);
    left: 1.375rem;
    right: auto;
    border-top: 0;
    border-left: 2px dashed var(--wp--preset--color--accent-2);
  }

  .litw-bring-card {
    padding: var(--wp--preset--spacing--30);
  }

  .litw-faq__list .wp-block-accordion-heading__toggle {
    padding-inline: var(--wp--preset--spacing--20);
  }

  .litw-faq__list .wp-block-accordion-panel > * {
    margin-inline: var(--wp--preset--spacing--20);
  }
}

/* Tile -> tab hand-off: audience-handoff.js names the clicked tile and
   its tab "litw-audience-card" only for a tile click, so the header link
   and Back navigate with no morph (the transition is skipped). */
::view-transition-group(litw-audience-card) {
  animation-duration: 0.35s;
}

/* ==========================================================================
   Event types (2026-10-15): the "two ways to start" cards (wp_block 4501)
   and the event-category archive that holds each type's full description.
   ========================================================================== */

/* The term description is wpautop'd paragraphs with no block gap between them. */
.wp-block-term-description p + p {
  margin-top: 1em;
}

/* Event-type cards are informational, not pressable (2026-10-20): a tint just darker
   than its band, a hairline and no shadow, the same quiet panel as the
   Who We Are person card, so only the Explore button reads as a link.
   They were flat with no surface earlier the same day. The column
   stretches (no vertical alignment set), the card fills it, and the
   actions row takes the leftover space so both rows of links line up. */
/* The quiet surface (2026-10-20): navy at 6%, a touch darker than whatever
   band holds it, for panels that inform rather than press: the event-type
   cards, the person card and the partner logo tiles. The last two get it
   through their preset colour variable, since the preset class sets its
   background as important. --litw-quiet-surface-light is its mirror for
   dark bands: white at 8%, a touch lighter than the band, with the band's
   own light text, gold accents and gold focus ring (2026-10-21). */
:root {
  --litw-quiet-surface: rgb(43 74 104 / 0.06);
  --litw-quiet-surface-light: rgb(255 255 255 / 0.08);
}

.wp-block-group.litw-person {
  --wp--preset--color--accent-5: var(--litw-quiet-surface);
}

.litw-logo-tile {
  --wp--preset--color--accent-1: var(--litw-quiet-surface);
}

.litw-event-types {
  gap: var(--wp--preset--spacing--60);
}

.litw-event-type {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  height: 100%;
  padding: var(--wp--preset--spacing--40);
  background-color: var(--litw-quiet-surface);
  border: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
  border-radius: 1rem;
  box-shadow: none;
}

.litw-event-type > * {
  margin-block: 0;
}

.litw-event-type .wp-block-image {
  margin-bottom: var(--wp--preset--spacing--20);
}

.litw-event-type .wp-block-image img {
  border-radius: 0.75rem;
  box-shadow: none; /* a shadow on the photo reads as a pressable card */
}

.litw-event-type .litw-eyebrow {
  margin-bottom: -0.25rem;
}

.litw-event-type__facts {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--accent-3, #2b4a68);
  font-weight: 600;
}

.litw-event-type__actions {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--20);
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/* ==========================================================================
   Article layout: stories & events on the wide edge (2026-10-15)
   Header, breadcrumb and footer sit on the wide edge; the story and event
   pages used to centre their body in the 645px content column, so each page
   had two or three different left edges. Now every section starts on the
   wide edge, like the event-category pages:
     - /events/ and /stories/ open with the category-page intro
       (.litw-event-type-intro) plus .litw-archive-intro.
     - Story and event singles put the body on the wide edge
       (.litw-wide-body) at a readable measure; event singles add upcoming
       events as a strip of cards below (.litw-event-upcoming).
   ========================================================================== */

/* /events/: the upcoming list fills the intro's right column; the tilted
   photo only shows when nothing is scheduled (the block renders nothing). */
.litw-archive-intro__media:has(.wp-block-litw-upcoming-events) .litw-archive-intro__fallback {
  display: none;
}

/* Story and event singles: the body spans the wide edge. Prose keeps a
   readable measure; galleries, video galleries and accordions (which hold
   the photo galleries) use the full width. */
.litw-wide-body .wp-block-post-content > :not(.wp-block-gallery, .wp-block-litw-video-gallery, .wp-block-accordion) {
  max-width: 48rem;
}

/* Event single: upcoming events as a row of date cards above Past Events.
   The block renders nothing when none are scheduled (or the only one is
   this event), so the strip goes with it. */
.litw-event-upcoming .litw-upcoming__list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.litw-event-upcoming:not(:has(.wp-block-litw-upcoming-events)) {
  display: none;
}

/* Story hero: the portrait illustration stays whole (its lettering runs to
   the edges, so no swoop and no crop); stacked, it is capped so the story
   starts sooner. */
@media (max-width: 781px) {
  .litw-story-hero .wp-block-post-featured-image {
    max-width: 20rem;
  }
}

/* Card titles in post grids: one step down from the h2 default, so three
   across don't wrap to four lines. Stories and event cards match. */
.wp-block-post-template .litw-clickable-card h2.wp-block-post-title {
  font-size: var(--wp--preset--font-size--x-large);
}

/* ==========================================================================
   Site header (2026-10-15)
   One row on the wide edge: branding | nav + search + Contact. Below
   1160px the nav collapses into the overlay ("Menu" button), search moves
   into the overlay, and Contact stays visible at every width.

   The navigation block is overlayMenu:"always", so core's fixed 600px
   breakpoint never applies; the min-width query below is the only switch.
   It mirrors core's own 600px rules for the non-"always" case. 1160px
   leaves ~50px of slack over the measured fit (branding ~305 + nav,
   search and Contact ~701 + gap, inside the wide edge's padding); any
   menu item added later needs this re-measured. At 200% zoom on a 1280px
   screen the header falls back to the overlay.
   ========================================================================== */

.litw-site-header__row {
  padding-block: var(--wp--preset--spacing--20);
  gap: var(--wp--preset--spacing--30);
}

.litw-site-header .litw-branding {
  flex-shrink: 0;
}

.litw-site-header .wp-block-site-title {
  white-space: nowrap;
}

.litw-header-nav-actions {
  gap: var(--wp--preset--spacing--30);
}

.litw-site-header .wp-block-navigation {
  --wp--style--block-gap: var(--wp--preset--spacing--30);
}

/* Search: icon only. The "Search" text node stays in the DOM as the
   button's accessible name; font-size 0 removes it from layout only. */
.litw-header-search .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 0;
}

.litw-header-search .litw-button-icon {
  width: 1.375rem;
  height: 1.375rem;
}

/* Contact never wraps; at phone widths it loses some padding, not words. */
.litw-header-contact .wp-block-button__link {
  white-space: nowrap;
}

/* Menu toggle: a labelled button ("Menu", hasIcon:false) with the
   hamburger drawn in front of the word, 44px tall. */
.litw-site-header .wp-block-navigation__responsive-container-open {
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding-inline: 0.25em;
  font-weight: 600;
}

.litw-site-header .wp-block-navigation__responsive-container-open::before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Overlay close: core renders a bare 24px icon button; give it a 44px
   target to match the toggle that opened it. */
.wp-block-navigation-overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

@media (min-width: 1160px) {
  .litw-site-header .wp-block-navigation__responsive-container-open.always-shown {
    display: none;
  }
  .litw-site-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
    display: block;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }
  .litw-site-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
    display: none;
  }
}

@media (max-width: 1159.98px) {
  /* Two classes to beat core's .wp-block-buttons > .wp-block-button. */
  .litw-header-actions .litw-header-search {
    display: none;
  }
  .litw-site-header .wp-block-site-logo img {
    width: 52px;
    height: auto;
  }
}

/* Breadcrumb bar: only the deep templates (story, event, art and post
   singles, event-category archives) carry it, directly after the header.
   It continues the header's white, and the header's shadow moves to its
   bottom edge, so header + crumb read as one block. */
.litw-breadcrumb-bar {
  margin-block-start: 0;
  border-radius: 0; /* theme.json rounds every group */
  background-color: var(--wp--preset--color--accent-1);
  box-shadow: 0 6px 16px -10px rgb(25 25 25 / 0.35);
}

header.wp-block-template-part:has(+ .litw-breadcrumb-bar) {
  box-shadow: none;
}

.litw-breadcrumb-bar + main {
  margin-block-start: 0;
}

/* The wordmark goes when it no longer fits beside Menu and Contact
   (measured: branding 265 + Menu/Contact 276 + gap needs a 640px
   viewport). The logo link still carries the site name. */
@media (max-width: 639.98px) {
  .litw-site-header .wp-block-site-title {
    display: none;
  }
}

/* Small phones: the row tightens and Contact drops its decorative icon so
   logo, "Menu" and Contact fit at 320px without scrolling (measured: the
   row is exactly full there). */
@media (max-width: 399.98px) {
  .litw-site-header__row,
  .litw-header-nav-actions {
    gap: var(--wp--preset--spacing--20);
  }
  .litw-header-contact .wp-block-button__link {
    padding-inline: 1rem;
  }
  .litw-header-contact .litw-button-icon {
    display: none;
  }
}

/* ==========================================================================
   Past event cards and filter bar (2026-10-15)
   Synced pattern 4496 "Event Card (for grids)", used by the Past Events
   part (4519) and the event-category grid (4670), plus the filter bar that
   past-events.js builds (section 5).

   .litw-card (2026-10-20) is the same surface for the story cards (archive,
   homepage, "More stories" / "More posts") and the art gallery card 4499.
   ========================================================================== */

/* The card: white surface, hairline and soft shadow like the upcoming-events
   and event-type cards. It fills its grid cell and the badge row takes the
   leftover height, so chips line up along the bottom of each row. */
.litw-past-card,
.litw-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  height: 100%;
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--30);
  background-color: var(--wp--preset--color--accent-1, #fff);
  border: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
  border-radius: 1rem;
  box-shadow: var(--wp--preset--shadow--natural, none);
}

.litw-past-card > *,
.litw-card > * {
  margin-block: 0;
}

/* Gallery cards keep their natural height: art-masonry.js measures the card
   to set its row span, so a card that filled its span would grow forever. */
.litw-gallery-grid .litw-card {
  height: auto;
}

/* Keep the card's own corners under the section-4 focus ring, which sets
   `border-radius: 2px` for the older, unboxed cards; the ring follows the
   1rem curve instead of snapping the card square while it has focus. */
.litw-past-card.litw-clickable-card:has(:focus-visible),
.litw-card.litw-clickable-card:has(:focus-visible) {
  border-radius: 1rem;
  outline-color: var(--wp--preset--color--accent-3, #2b4a68);
}

.litw-past-card .wp-block-post-featured-image,
.litw-past-card .wp-block-post-featured-image img,
.litw-card .wp-block-post-featured-image,
.litw-card .wp-block-post-featured-image img {
  border-radius: 0.75rem;
}

/* Date tile on the left, text on the right. The title comes first in the
   DOM so heading navigation lands on it; the grid places the tile. */
.litw-past-card__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--wp--preset--spacing--20);
  row-gap: 0.25rem;
  align-items: start;
}

.litw-past-card__body > * {
  grid-column: 2;
  margin: 0;
}

.litw-past-card__body > .litw-past-card__date {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.litw-past-card .wp-block-post-title,
.litw-card .wp-block-post-title {
  line-height: 1.25;
  text-wrap: balance;
}

/* A bound paragraph whose field is empty still renders an empty <p>. */
.litw-past-card__body > p:empty {
  display: none;
}

/* Follows the place line like one more line of facts: the card's flex gap
   is pulled back to a 0.5rem step. */
.litw-past-card .litw-event-badges {
  margin-top: calc(0.5rem - var(--wp--preset--spacing--20));
  /* Line up with the title/time/place column: the date tile's width
     (4.75rem, litw-site-utilities event-date-tile/style.css) plus the
     body grid's column gap. */
  padding-inline-start: calc(4.75rem + var(--wp--preset--spacing--20));
}

.litw-past-card .litw-event-badges:not(:has(.litw-event-badge)) {
  display: none;
}

/* Filter bar: one white toolbar. Wide screens put selects and chips on one
   line, bottom-aligned; the count and Clear sit on the line below. */
.litw-past-events-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--30);
  background-color: var(--wp--preset--color--accent-1, #fff);
  border: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
  border-radius: 1rem;
}

.litw-past-events-filters__fieldset {
  flex: 1 1 100%;
}

.litw-past-events-filters__status,
.litw-past-events-filters__clear,
.litw-past-events-filters__no-results {
  margin: 0;
}

.litw-past-events-filters__status {
  font-size: var(--wp--preset--font-size--small);
}

.litw-past-events-filters__no-results {
  flex-basis: 100%;
}

@media (min-width: 782px) {
  .litw-past-events-filters__fieldset {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .litw-past-events-filters__row--checkboxes {
    align-items: center;
  }

  /* A select's max-content is its longest option (a full venue name), which
     would push the chips onto a second line. A fixed width keeps one line;
     the ellipsis rule in section 5 truncates the selected text. */
  .litw-past-events-filters__field select {
    width: 12rem;
    min-width: 0;
  }
}

/* Stacked (phones, small tablets): every select the same full width. */
@media (max-width: 781.98px) {
  .litw-past-events-filters__row--selects > .litw-past-events-filters__field {
    flex: 1 1 100%;
  }

  .litw-past-events-filters__field select {
    width: 100%;
  }
}

/* Show more: centred under the grid. It carries `alignfull` (set in
   past-events.js) because the section's left-justified constrained layout
   pins every other child's margin-left to 0 with !important; the doubled
   class then outranks core's `.has-global-padding > .alignfull` margins. */
.litw-past-events-more.alignfull {
  width: fit-content;
  margin-inline: auto;
}


/* ===================================================================
   Section-edge waves (2026-10-19). They replace the stretched
   cutout edge masks: a fixed-height strip drawn outside the band,
   so the wave depth is the same at every section height, nothing inside
   the band is clipped, and keyboard focus never snaps it to a rectangle.
   .litw-wave-top / .litw-wave-bottom (combinable); add .litw-wave--echo
   for the second, translucent layer. The strip inherits the band's own
   background colour, so it works on any palette colour with no tokens.
   Generator: site-ops/decorative-css/notation-primitives.mjs waveSVG().
   =================================================================== */
:root {
  --litw-wave-h: clamp(36px, 7vw, 96px);
}

.litw-wave-top,
.litw-wave-bottom {
  --litw-wave-tile: clamp(760px, 100vw, 1600px); /* about one swell per screen */
  --litw-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'720'%20height%3D'60'%20viewBox%3D'0%200%20720%2060'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2060%20L0%2039.23%20L6%2040.28%20L12%2041.3%20L18%2042.29%20L24%2043.24%20L30%2044.16%20L36%2045.03%20L42%2045.87%20L48%2046.65%20L54%2047.4%20L60%2048.1%20L66%2048.75%20L72%2049.35%20L78%2049.9%20L84%2050.41%20L90%2050.86%20L96%2051.27%20L102%2051.63%20L108%2051.95%20L114%2052.23%20L120%2052.46%20L126%2052.65%20L132%2052.8%20L138%2052.91%20L144%2052.98%20L150%2053.02%20L156%2053.03%20L162%2053.01%20L168%2052.96%20L174%2052.88%20L180%2052.77%20L186%2052.64%20L192%2052.49%20L198%2052.31%20L204%2052.11%20L210%2051.89%20L216%2051.65%20L222%2051.39%20L228%2051.11%20L234%2050.81%20L240%2050.49%20L246%2050.15%20L252%2049.8%20L258%2049.42%20L264%2049.02%20L270%2048.59%20L276%2048.15%20L282%2047.68%20L288%2047.19%20L294%2046.67%20L300%2046.13%20L306%2045.56%20L312%2044.97%20L318%2044.35%20L324%2043.7%20L330%2043.02%20L336%2042.32%20L342%2041.58%20L348%2040.83%20L354%2040.04%20L360%2039.23%20L366%2038.39%20L372%2037.53%20L378%2036.65%20L384%2035.75%20L390%2034.84%20L396%2033.91%20L402%2032.96%20L408%2032.01%20L414%2031.06%20L420%2030.1%20L426%2029.14%20L432%2028.19%20L438%2027.24%20L444%2026.32%20L450%2025.41%20L456%2024.52%20L462%2023.66%20L468%2022.83%20L474%2022.03%20L480%2021.28%20L486%2020.57%20L492%2019.91%20L498%2019.3%20L504%2018.75%20L510%2018.25%20L516%2017.82%20L522%2017.45%20L528%2017.16%20L534%2016.93%20L540%2016.77%20L546%2016.69%20L552%2016.68%20L558%2016.75%20L564%2016.9%20L570%2017.12%20L576%2017.41%20L582%2017.78%20L588%2018.22%20L594%2018.73%20L600%2019.32%20L606%2019.96%20L612%2020.67%20L618%2021.44%20L624%2022.26%20L630%2023.14%20L636%2024.06%20L642%2025.03%20L648%2026.03%20L654%2027.07%20L660%2028.13%20L666%2029.22%20L672%2030.33%20L678%2031.45%20L684%2032.57%20L690%2033.7%20L696%2034.83%20L702%2035.95%20L708%2037.06%20L714%2038.16%20L720%2039.23%20L720%2060%20Z'%2F%3E%3C%2Fsvg%3E");
  position: relative;
  z-index: 1;
  border-radius: 0; /* theme.json rounds every group; a rounded band notches where its wave meets the screen edge */
}

.litw-wave--echo {
  --litw-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'720'%20height%3D'60'%20viewBox%3D'0%200%20720%2060'%20preserveAspectRatio%3D'none'%3E%3Cpath%20fill-opacity%3D'.45'%20d%3D'M0%2060%20L0%2035.04%20L6%2035.28%20L12%2035.48%20L18%2035.63%20L24%2035.74%20L30%2035.81%20L36%2035.84%20L42%2035.84%20L48%2035.8%20L54%2035.73%20L60%2035.63%20L66%2035.5%20L72%2035.35%20L78%2035.17%20L84%2034.98%20L90%2034.76%20L96%2034.53%20L102%2034.28%20L108%2034.01%20L114%2033.74%20L120%2033.45%20L126%2033.15%20L132%2032.84%20L138%2032.52%20L144%2032.2%20L150%2031.86%20L156%2031.51%20L162%2031.16%20L168%2030.8%20L174%2030.42%20L180%2030.04%20L186%2029.64%20L192%2029.23%20L198%2028.81%20L204%2028.37%20L210%2027.92%20L216%2027.45%20L222%2026.97%20L228%2026.47%20L234%2025.95%20L240%2025.41%20L246%2024.85%20L252%2024.28%20L258%2023.68%20L264%2023.06%20L270%2022.43%20L276%2021.77%20L282%2021.1%20L288%2020.41%20L294%2019.71%20L300%2018.99%20L306%2018.25%20L312%2017.51%20L318%2016.76%20L324%2016.01%20L330%2015.25%20L336%2014.49%20L342%2013.74%20L348%2013%20L354%2012.26%20L360%2011.54%20L366%2010.84%20L372%2010.16%20L378%209.5%20L384%208.87%20L390%208.28%20L396%207.73%20L402%207.21%20L408%206.74%20L414%206.32%20L420%205.95%20L426%205.63%20L432%205.37%20L438%205.17%20L444%205.03%20L450%204.96%20L456%204.94%20L462%205%20L468%205.11%20L474%205.3%20L480%205.55%20L486%205.87%20L492%206.25%20L498%206.69%20L504%207.2%20L510%207.77%20L516%208.39%20L522%209.06%20L528%209.79%20L534%2010.57%20L540%2011.39%20L546%2012.25%20L552%2013.14%20L558%2014.07%20L564%2015.02%20L570%2015.99%20L576%2016.98%20L582%2017.98%20L588%2018.99%20L594%2020%20L600%2021.01%20L606%2022.01%20L612%2023%20L618%2023.98%20L624%2024.93%20L630%2025.86%20L636%2026.76%20L642%2027.63%20L648%2028.46%20L654%2029.26%20L660%2030.01%20L666%2030.73%20L672%2031.4%20L678%2032.02%20L684%2032.6%20L690%2033.12%20L696%2033.6%20L702%2034.03%20L708%2034.42%20L714%2034.75%20L720%2035.04%20L720%2060%20Z'%2F%3E%3Cpath%20d%3D'M0%2060%20L0%2039.23%20L6%2040.28%20L12%2041.3%20L18%2042.29%20L24%2043.24%20L30%2044.16%20L36%2045.03%20L42%2045.87%20L48%2046.65%20L54%2047.4%20L60%2048.1%20L66%2048.75%20L72%2049.35%20L78%2049.9%20L84%2050.41%20L90%2050.86%20L96%2051.27%20L102%2051.63%20L108%2051.95%20L114%2052.23%20L120%2052.46%20L126%2052.65%20L132%2052.8%20L138%2052.91%20L144%2052.98%20L150%2053.02%20L156%2053.03%20L162%2053.01%20L168%2052.96%20L174%2052.88%20L180%2052.77%20L186%2052.64%20L192%2052.49%20L198%2052.31%20L204%2052.11%20L210%2051.89%20L216%2051.65%20L222%2051.39%20L228%2051.11%20L234%2050.81%20L240%2050.49%20L246%2050.15%20L252%2049.8%20L258%2049.42%20L264%2049.02%20L270%2048.59%20L276%2048.15%20L282%2047.68%20L288%2047.19%20L294%2046.67%20L300%2046.13%20L306%2045.56%20L312%2044.97%20L318%2044.35%20L324%2043.7%20L330%2043.02%20L336%2042.32%20L342%2041.58%20L348%2040.83%20L354%2040.04%20L360%2039.23%20L366%2038.39%20L372%2037.53%20L378%2036.65%20L384%2035.75%20L390%2034.84%20L396%2033.91%20L402%2032.96%20L408%2032.01%20L414%2031.06%20L420%2030.1%20L426%2029.14%20L432%2028.19%20L438%2027.24%20L444%2026.32%20L450%2025.41%20L456%2024.52%20L462%2023.66%20L468%2022.83%20L474%2022.03%20L480%2021.28%20L486%2020.57%20L492%2019.91%20L498%2019.3%20L504%2018.75%20L510%2018.25%20L516%2017.82%20L522%2017.45%20L528%2017.16%20L534%2016.93%20L540%2016.77%20L546%2016.69%20L552%2016.68%20L558%2016.75%20L564%2016.9%20L570%2017.12%20L576%2017.41%20L582%2017.78%20L588%2018.22%20L594%2018.73%20L600%2019.32%20L606%2019.96%20L612%2020.67%20L618%2021.44%20L624%2022.26%20L630%2023.14%20L636%2024.06%20L642%2025.03%20L648%2026.03%20L654%2027.07%20L660%2028.13%20L666%2029.22%20L672%2030.33%20L678%2031.45%20L684%2032.57%20L690%2033.7%20L696%2034.83%20L702%2035.95%20L708%2037.06%20L714%2038.16%20L720%2039.23%20L720%2060%20Z'%2F%3E%3C%2Fsvg%3E");
}

.litw-wave-top::before,
.litw-wave-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--litw-wave-h);
  background-color: inherit;
  pointer-events: none;
  -webkit-mask: var(--litw-wave-mask) repeat-x 0 0 / var(--litw-wave-tile) 100%;
  mask: var(--litw-wave-mask) repeat-x 0 0 / var(--litw-wave-tile) 100%;
}

/* The strip reaches into the neighbouring section. Half its height comes
   from this margin and the rest from the neighbour's own padding
   (spacing--60), so it never covers content. This assumes the neighbour
   is on the page colour, which holds when waved bands alternate with
   plain sections. */
.litw-wave-top {
  margin-block-start: calc(var(--litw-wave-h) * .5);
}

.litw-wave-bottom {
  margin-block-end: calc(var(--litw-wave-h) * .5);
}

/* A waved band directly after another coloured band (About: Who We Are,
   then History, 2026-10-21; every band touches another since the
   colour-by-meaning orders of 2026-10-21). The reserved margin would show
   the page colour in the wave's troughs, so the band sits flush and the
   band above gives the strip room in its own padding instead. */
.litw-section.has-background:has(+ .litw-wave-top) {
  padding-block-end: calc(clamp(36px, 7vw, 90px) + var(--litw-wave-h) * .5);
}

.alignfull.has-background + .litw-wave-top {
  margin-block-start: 0;
}

/* .litw-wave--alt: the footer's wave (2026-10-19). A subtle sibling of
   the section wave, a touch shallower with its crest shifted, so the
   page's last edge doesn't repeat the bands above it. */
.litw-wave--alt {
  --litw-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'720'%20height%3D'60'%20viewBox%3D'0%200%20720%2060'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2060%20L0%2052.96%20L6%2052.53%20L12%2052.07%20L18%2051.58%20L24%2051.06%20L30%2050.51%20L36%2049.94%20L42%2049.35%20L48%2048.74%20L54%2048.11%20L60%2047.47%20L66%2046.81%20L72%2046.15%20L78%2045.48%20L84%2044.81%20L90%2044.13%20L96%2043.45%20L102%2042.76%20L108%2042.08%20L114%2041.41%20L120%2040.73%20L126%2040.06%20L132%2039.4%20L138%2038.74%20L144%2038.1%20L150%2037.45%20L156%2036.82%20L162%2036.2%20L168%2035.58%20L174%2034.98%20L180%2034.39%20L186%2033.8%20L192%2033.23%20L198%2032.67%20L204%2032.12%20L210%2031.59%20L216%2031.06%20L222%2030.55%20L228%2030.06%20L234%2029.57%20L240%2029.1%20L246%2028.65%20L252%2028.22%20L258%2027.8%20L264%2027.4%20L270%2027.02%20L276%2026.65%20L282%2026.32%20L288%2026%20L294%2025.71%20L300%2025.45%20L306%2025.21%20L312%2025%20L318%2024.83%20L324%2024.68%20L330%2024.57%20L336%2024.49%20L342%2024.45%20L348%2024.45%20L354%2024.49%20L360%2024.57%20L366%2024.69%20L372%2024.85%20L378%2025.06%20L384%2025.31%20L390%2025.6%20L396%2025.94%20L402%2026.32%20L408%2026.75%20L414%2027.22%20L420%2027.73%20L426%2028.29%20L432%2028.88%20L438%2029.52%20L444%2030.2%20L450%2030.91%20L456%2031.66%20L462%2032.44%20L468%2033.24%20L474%2034.08%20L480%2034.94%20L486%2035.82%20L492%2036.71%20L498%2037.63%20L504%2038.55%20L510%2039.47%20L516%2040.41%20L522%2041.34%20L528%2042.26%20L534%2043.18%20L540%2044.09%20L546%2044.98%20L552%2045.85%20L558%2046.69%20L564%2047.51%20L570%2048.3%20L576%2049.06%20L582%2049.78%20L588%2050.46%20L594%2051.1%20L600%2051.7%20L606%2052.25%20L612%2052.75%20L618%2053.2%20L624%2053.6%20L630%2053.95%20L636%2054.24%20L642%2054.48%20L648%2054.67%20L654%2054.8%20L660%2054.88%20L666%2054.91%20L672%2054.88%20L678%2054.8%20L684%2054.68%20L690%2054.5%20L696%2054.28%20L702%2054.01%20L708%2053.7%20L714%2053.35%20L720%2052.96%20L720%2060%20Z'%2F%3E%3C%2Fsvg%3E");
}

/* The echo layer reaches higher than the main wave (about 92% of the
   strip against 72%), so it takes more room from its neighbour. */
.litw-wave-top.litw-wave--echo {
  margin-block-start: calc(var(--litw-wave-h) * .75);
}

/* 1px overlap so no hairline shows between the strip and the band. */
.litw-wave-top::before {
  bottom: calc(100% - 1px);
}

/* The bottom edge is the same tile flipped, shifted so it doesn't mirror the top. */
.litw-wave-bottom::after {
  top: calc(100% - 1px);
  scale: 1 -1;
  -webkit-mask-position: 37% 0;
  mask-position: 37% 0;
}

/* Below 1100px the hero swoop stacks into one bold curve along the photo's
   bottom edge. Section waves take on the same feel there, not the same
   path: the swoop's depth, and one swell stretched across the width. The
   bottom edge is turned end for end so the two edges differ. */
@media (max-width: 1099px) {
  :root {
    --litw-wave-h: clamp(32px, 6vw, 64px);
  }

  .litw-wave-top,
  .litw-wave-bottom {
    --litw-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'720'%20height%3D'60'%20viewBox%3D'0%200%20720%2060'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2060%20L0%2039.23%20L6%2040.28%20L12%2041.3%20L18%2042.29%20L24%2043.24%20L30%2044.16%20L36%2045.03%20L42%2045.87%20L48%2046.65%20L54%2047.4%20L60%2048.1%20L66%2048.75%20L72%2049.35%20L78%2049.9%20L84%2050.41%20L90%2050.86%20L96%2051.27%20L102%2051.63%20L108%2051.95%20L114%2052.23%20L120%2052.46%20L126%2052.65%20L132%2052.8%20L138%2052.91%20L144%2052.98%20L150%2053.02%20L156%2053.03%20L162%2053.01%20L168%2052.96%20L174%2052.88%20L180%2052.77%20L186%2052.64%20L192%2052.49%20L198%2052.31%20L204%2052.11%20L210%2051.89%20L216%2051.65%20L222%2051.39%20L228%2051.11%20L234%2050.81%20L240%2050.49%20L246%2050.15%20L252%2049.8%20L258%2049.42%20L264%2049.02%20L270%2048.59%20L276%2048.15%20L282%2047.68%20L288%2047.19%20L294%2046.67%20L300%2046.13%20L306%2045.56%20L312%2044.97%20L318%2044.35%20L324%2043.7%20L330%2043.02%20L336%2042.32%20L342%2041.58%20L348%2040.83%20L354%2040.04%20L360%2039.23%20L366%2038.39%20L372%2037.53%20L378%2036.65%20L384%2035.75%20L390%2034.84%20L396%2033.91%20L402%2032.96%20L408%2032.01%20L414%2031.06%20L420%2030.1%20L426%2029.14%20L432%2028.19%20L438%2027.24%20L444%2026.32%20L450%2025.41%20L456%2024.52%20L462%2023.66%20L468%2022.83%20L474%2022.03%20L480%2021.28%20L486%2020.57%20L492%2019.91%20L498%2019.3%20L504%2018.75%20L510%2018.25%20L516%2017.82%20L522%2017.45%20L528%2017.16%20L534%2016.93%20L540%2016.77%20L546%2016.69%20L552%2016.68%20L558%2016.75%20L564%2016.9%20L570%2017.12%20L576%2017.41%20L582%2017.78%20L588%2018.22%20L594%2018.73%20L600%2019.32%20L606%2019.96%20L612%2020.67%20L618%2021.44%20L624%2022.26%20L630%2023.14%20L636%2024.06%20L642%2025.03%20L648%2026.03%20L654%2027.07%20L660%2028.13%20L666%2029.22%20L672%2030.33%20L678%2031.45%20L684%2032.57%20L690%2033.7%20L696%2034.83%20L702%2035.95%20L708%2037.06%20L714%2038.16%20L720%2039.23%20L720%2060%20Z'%2F%3E%3C%2Fsvg%3E");
  }

  .litw-wave-top::before,
  .litw-wave-bottom::after {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  .litw-wave-bottom::after {
    scale: -1 -1;
  }

  .litw-wave--alt {
    --litw-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'720'%20height%3D'60'%20viewBox%3D'0%200%20720%2060'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2060%20L0%2052.96%20L6%2052.53%20L12%2052.07%20L18%2051.58%20L24%2051.06%20L30%2050.51%20L36%2049.94%20L42%2049.35%20L48%2048.74%20L54%2048.11%20L60%2047.47%20L66%2046.81%20L72%2046.15%20L78%2045.48%20L84%2044.81%20L90%2044.13%20L96%2043.45%20L102%2042.76%20L108%2042.08%20L114%2041.41%20L120%2040.73%20L126%2040.06%20L132%2039.4%20L138%2038.74%20L144%2038.1%20L150%2037.45%20L156%2036.82%20L162%2036.2%20L168%2035.58%20L174%2034.98%20L180%2034.39%20L186%2033.8%20L192%2033.23%20L198%2032.67%20L204%2032.12%20L210%2031.59%20L216%2031.06%20L222%2030.55%20L228%2030.06%20L234%2029.57%20L240%2029.1%20L246%2028.65%20L252%2028.22%20L258%2027.8%20L264%2027.4%20L270%2027.02%20L276%2026.65%20L282%2026.32%20L288%2026%20L294%2025.71%20L300%2025.45%20L306%2025.21%20L312%2025%20L318%2024.83%20L324%2024.68%20L330%2024.57%20L336%2024.49%20L342%2024.45%20L348%2024.45%20L354%2024.49%20L360%2024.57%20L366%2024.69%20L372%2024.85%20L378%2025.06%20L384%2025.31%20L390%2025.6%20L396%2025.94%20L402%2026.32%20L408%2026.75%20L414%2027.22%20L420%2027.73%20L426%2028.29%20L432%2028.88%20L438%2029.52%20L444%2030.2%20L450%2030.91%20L456%2031.66%20L462%2032.44%20L468%2033.24%20L474%2034.08%20L480%2034.94%20L486%2035.82%20L492%2036.71%20L498%2037.63%20L504%2038.55%20L510%2039.47%20L516%2040.41%20L522%2041.34%20L528%2042.26%20L534%2043.18%20L540%2044.09%20L546%2044.98%20L552%2045.85%20L558%2046.69%20L564%2047.51%20L570%2048.3%20L576%2049.06%20L582%2049.78%20L588%2050.46%20L594%2051.1%20L600%2051.7%20L606%2052.25%20L612%2052.75%20L618%2053.2%20L624%2053.6%20L630%2053.95%20L636%2054.24%20L642%2054.48%20L648%2054.67%20L654%2054.8%20L660%2054.88%20L666%2054.91%20L672%2054.88%20L678%2054.8%20L684%2054.68%20L690%2054.5%20L696%2054.28%20L702%2054.01%20L708%2053.7%20L714%2053.35%20L720%2052.96%20L720%2060%20Z'%2F%3E%3C%2Fsvg%3E");
  }

  .litw-wave--echo {
    --litw-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'720'%20height%3D'60'%20viewBox%3D'0%200%20720%2060'%20preserveAspectRatio%3D'none'%3E%3Cpath%20fill-opacity%3D'.45'%20d%3D'M0%2060%20L0%2035.04%20L6%2035.28%20L12%2035.48%20L18%2035.63%20L24%2035.74%20L30%2035.81%20L36%2035.84%20L42%2035.84%20L48%2035.8%20L54%2035.73%20L60%2035.63%20L66%2035.5%20L72%2035.35%20L78%2035.17%20L84%2034.98%20L90%2034.76%20L96%2034.53%20L102%2034.28%20L108%2034.01%20L114%2033.74%20L120%2033.45%20L126%2033.15%20L132%2032.84%20L138%2032.52%20L144%2032.2%20L150%2031.86%20L156%2031.51%20L162%2031.16%20L168%2030.8%20L174%2030.42%20L180%2030.04%20L186%2029.64%20L192%2029.23%20L198%2028.81%20L204%2028.37%20L210%2027.92%20L216%2027.45%20L222%2026.97%20L228%2026.47%20L234%2025.95%20L240%2025.41%20L246%2024.85%20L252%2024.28%20L258%2023.68%20L264%2023.06%20L270%2022.43%20L276%2021.77%20L282%2021.1%20L288%2020.41%20L294%2019.71%20L300%2018.99%20L306%2018.25%20L312%2017.51%20L318%2016.76%20L324%2016.01%20L330%2015.25%20L336%2014.49%20L342%2013.74%20L348%2013%20L354%2012.26%20L360%2011.54%20L366%2010.84%20L372%2010.16%20L378%209.5%20L384%208.87%20L390%208.28%20L396%207.73%20L402%207.21%20L408%206.74%20L414%206.32%20L420%205.95%20L426%205.63%20L432%205.37%20L438%205.17%20L444%205.03%20L450%204.96%20L456%204.94%20L462%205%20L468%205.11%20L474%205.3%20L480%205.55%20L486%205.87%20L492%206.25%20L498%206.69%20L504%207.2%20L510%207.77%20L516%208.39%20L522%209.06%20L528%209.79%20L534%2010.57%20L540%2011.39%20L546%2012.25%20L552%2013.14%20L558%2014.07%20L564%2015.02%20L570%2015.99%20L576%2016.98%20L582%2017.98%20L588%2018.99%20L594%2020%20L600%2021.01%20L606%2022.01%20L612%2023%20L618%2023.98%20L624%2024.93%20L630%2025.86%20L636%2026.76%20L642%2027.63%20L648%2028.46%20L654%2029.26%20L660%2030.01%20L666%2030.73%20L672%2031.4%20L678%2032.02%20L684%2032.6%20L690%2033.12%20L696%2033.6%20L702%2034.03%20L708%2034.42%20L714%2034.75%20L720%2035.04%20L720%2060%20Z'%2F%3E%3Cpath%20d%3D'M0%2060%20L0%2039.23%20L6%2040.28%20L12%2041.3%20L18%2042.29%20L24%2043.24%20L30%2044.16%20L36%2045.03%20L42%2045.87%20L48%2046.65%20L54%2047.4%20L60%2048.1%20L66%2048.75%20L72%2049.35%20L78%2049.9%20L84%2050.41%20L90%2050.86%20L96%2051.27%20L102%2051.63%20L108%2051.95%20L114%2052.23%20L120%2052.46%20L126%2052.65%20L132%2052.8%20L138%2052.91%20L144%2052.98%20L150%2053.02%20L156%2053.03%20L162%2053.01%20L168%2052.96%20L174%2052.88%20L180%2052.77%20L186%2052.64%20L192%2052.49%20L198%2052.31%20L204%2052.11%20L210%2051.89%20L216%2051.65%20L222%2051.39%20L228%2051.11%20L234%2050.81%20L240%2050.49%20L246%2050.15%20L252%2049.8%20L258%2049.42%20L264%2049.02%20L270%2048.59%20L276%2048.15%20L282%2047.68%20L288%2047.19%20L294%2046.67%20L300%2046.13%20L306%2045.56%20L312%2044.97%20L318%2044.35%20L324%2043.7%20L330%2043.02%20L336%2042.32%20L342%2041.58%20L348%2040.83%20L354%2040.04%20L360%2039.23%20L366%2038.39%20L372%2037.53%20L378%2036.65%20L384%2035.75%20L390%2034.84%20L396%2033.91%20L402%2032.96%20L408%2032.01%20L414%2031.06%20L420%2030.1%20L426%2029.14%20L432%2028.19%20L438%2027.24%20L444%2026.32%20L450%2025.41%20L456%2024.52%20L462%2023.66%20L468%2022.83%20L474%2022.03%20L480%2021.28%20L486%2020.57%20L492%2019.91%20L498%2019.3%20L504%2018.75%20L510%2018.25%20L516%2017.82%20L522%2017.45%20L528%2017.16%20L534%2016.93%20L540%2016.77%20L546%2016.69%20L552%2016.68%20L558%2016.75%20L564%2016.9%20L570%2017.12%20L576%2017.41%20L582%2017.78%20L588%2018.22%20L594%2018.73%20L600%2019.32%20L606%2019.96%20L612%2020.67%20L618%2021.44%20L624%2022.26%20L630%2023.14%20L636%2024.06%20L642%2025.03%20L648%2026.03%20L654%2027.07%20L660%2028.13%20L666%2029.22%20L672%2030.33%20L678%2031.45%20L684%2032.57%20L690%2033.7%20L696%2034.83%20L702%2035.95%20L708%2037.06%20L714%2038.16%20L720%2039.23%20L720%2060%20Z'%2F%3E%3C%2Fsvg%3E");
  }
}

/* Night surfaces (Night, and Night deep on the footer, 2026-10-19):
   theme.json paints headings ink, about 1.1:1 on them, so they take the surface's text colour. */
:is(.has-contrast-background-color, .has-accent-8-background-color, .has-accent-3-background-color) :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* A Navy band (Partner's closing invitation, 2026-10-21) is the colour of
   the default button, so its filled buttons turn gold, as the navy section
   styles in theme.json already do. */
.has-accent-3-background-color .wp-block-button:not(.is-style-outline) > .wp-element-button {
  background-color: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--accent-4);
}

/* A white card on a dark band (Partner's We bring / You bring, the art
   gallery's cards, 2026-10-21) keeps ink text; the band's light text would vanish on it. */
:is(.is-style-section-4, .is-style-section-5, .has-accent-3-background-color, .has-contrast-background-color, .has-accent-8-background-color) :is(.has-accent-1-background-color, .litw-card) {
  color: var(--wp--preset--color--accent-4);
}

/* Eyebrows are navy, which vanishes on a dark band; there they take
   gold (8.3:1 on Night, 5.5:1 on Navy). */
:is(.is-style-section-4, .is-style-section-5, .has-accent-3-background-color, .has-contrast-background-color, .has-accent-8-background-color) .litw-eyebrow {
  color: var(--wp--preset--color--accent-2);
}

/* Testimonials on a dark band (homepage, 2026-10-21): the featured card
   stays white, but the portrait picker sits on the band, so its ink names
   and navy hover ring, selected name and focus ring turn light. */
:is(.is-style-section-4, .is-style-section-5, .has-accent-3-background-color, .has-contrast-background-color, .has-accent-8-background-color) .litw-tm__picker {
  --litw-tm-ink: var(--wp--preset--color--base);
  --litw-tm-navy: var(--wp--preset--color--base);
}

/* A page that ends on a coloured full-width band (About, Partner) sits
   on the footer with no strip of page colour, and the footer's wave
   rises into the band. The band's bottom padding is the same
   --litw-footer-space a plain page ends with, measured to the wave's
   crest, so About and Partner match every other page. */
body:has(:is(main > .wp-block-post-content:last-child, main > :last-child > .wp-block-post-content:last-child) > .alignfull:is(.has-background, [class*="is-style-section-"]):last-child) :is(footer.wp-block-template-part, footer .litw-wave-top) {
  margin-block-start: 0;
}

:is(main > .wp-block-post-content:last-child, main > :last-child > .wp-block-post-content:last-child) > .alignfull:is(.has-background, [class*="is-style-section-"]):last-child {
  padding-block-end: var(--litw-footer-space);
}

@media (forced-colors: active) {
  .litw-wave-top::before,
  .litw-wave-bottom::after {
    display: none;
  }
}

/* ===================================================================
   Accents (Step 5, 2026-10-19)
   Picks: https://claude.ai/artifact/HPqT9VAgcCetLBz3qSoL8d (round 5).
   Shapes are generated into the ACCENTS block below by
   site-ops/decorative-css/gen_accents.mjs; the rules after it are by hand.
   Everything here is decorative only: no DOM, no ARIA, no pointer
   events, and hidden in forced-colors.

   Rules (user): gold for small foreground accents (heading rays);
   faint navy ~14% (white ~15% on dark) for background art and empty
   states. At most one background accent per band. Blobs bleed off a
   side, never off a band's top or bottom.

   The waves own a band's ::before/::after, so band accents (blobs,
   glows) are background-image layers on the band itself: painted
   behind content, clipped to the box, and no stacking to manage.
   Notation art (sunshine, fade, marks) uses ::after, so don't put it
   on a band with .litw-wave-bottom or on a page's last coloured band;
   put it on an inner group instead.
   =================================================================== */

/* ACCENTS:BEGIN (generated by site-ops/decorative-css/gen_accents.mjs; do not edit by hand) */
:root {
  --litw-acc-rays: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%20viewBox%3D'0%200%2040%2040'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'3.3'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M10.45%2032.99%20Q16.12%2033.99%2021.88%2034.2'%2F%3E%3Cpath%20d%3D'M8.88%2026.69%20Q14.93%2022.25%2021.31%2018.3'%2F%3E%3Cpath%20d%3D'M3.62%2022.87%20Q5.59%2017.45%206.79%2011.81'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --litw-acc-blob-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'136'%20height%3D'200'%20viewBox%3D'64%200%20136%20200'%3E%3Cpath%20fill%3D'rgb(43%2074%20104%20%2F%200.07)'%20transform%3D'rotate(18%20100%20100)'%20d%3D'M191.28%2086.21%20C189.75%20105.12%20161.39%20144.4%20146.37%20159.54%20C131.35%20174.69%20118.83%20176.19%20101.15%20177.07%20C83.47%20177.94%2051.95%20178.34%2040.27%20164.81%20C28.58%20151.27%2029.92%20113.69%2031.04%2095.87%20C32.17%2078.04%2036.86%2068.06%2047.04%2057.88%20C57.21%2047.7%2074.01%2036.76%2092.1%2034.79%20C110.19%2032.82%20139.06%2037.5%20155.59%2046.07%20C172.12%2054.64%20192.82%2067.3%20191.28%2086.21Z'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-blob-r: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'136'%20height%3D'200'%20viewBox%3D'0%200%20136%20200'%3E%3Cpath%20fill%3D'rgb(43%2074%20104%20%2F%200.07)'%20transform%3D'rotate(-14%20100%20100)'%20d%3D'M173.87%2088.84%20C176.26%20105.63%20173.88%20135.8%20167.19%20149.23%20C160.5%20162.67%20148.36%20162.82%20133.73%20169.45%20C119.1%20176.07%2098.46%20193.21%2079.4%20188.98%20C60.34%20184.75%2029.14%20157.01%2019.37%20144.07%20C9.61%20131.14%2019.83%20125.43%2020.82%20111.37%20C21.81%2097.31%2016.76%2076.04%2025.32%2059.69%20C33.88%2043.34%2055.51%2018.98%2072.18%2013.26%20C88.85%207.54%20111.9%2019.48%20125.35%2025.36%20C138.79%2031.24%20144.76%2037.95%20152.85%2048.53%20C160.94%2059.11%20171.48%2072.06%20173.87%2088.84Z'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-blob-l-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'136'%20height%3D'200'%20viewBox%3D'64%200%20136%20200'%3E%3Cpath%20fill%3D'rgb(255%20255%20255%20%2F%200.07)'%20transform%3D'rotate(18%20100%20100)'%20d%3D'M191.28%2086.21%20C189.75%20105.12%20161.39%20144.4%20146.37%20159.54%20C131.35%20174.69%20118.83%20176.19%20101.15%20177.07%20C83.47%20177.94%2051.95%20178.34%2040.27%20164.81%20C28.58%20151.27%2029.92%20113.69%2031.04%2095.87%20C32.17%2078.04%2036.86%2068.06%2047.04%2057.88%20C57.21%2047.7%2074.01%2036.76%2092.1%2034.79%20C110.19%2032.82%20139.06%2037.5%20155.59%2046.07%20C172.12%2054.64%20192.82%2067.3%20191.28%2086.21Z'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-blob-r-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'136'%20height%3D'200'%20viewBox%3D'0%200%20136%20200'%3E%3Cpath%20fill%3D'rgb(255%20255%20255%20%2F%200.07)'%20transform%3D'rotate(-14%20100%20100)'%20d%3D'M173.87%2088.84%20C176.26%20105.63%20173.88%20135.8%20167.19%20149.23%20C160.5%20162.67%20148.36%20162.82%20133.73%20169.45%20C119.1%20176.07%2098.46%20193.21%2079.4%20188.98%20C60.34%20184.75%2029.14%20157.01%2019.37%20144.07%20C9.61%20131.14%2019.83%20125.43%2020.82%20111.37%20C21.81%2097.31%2016.76%2076.04%2025.32%2059.69%20C33.88%2043.34%2055.51%2018.98%2072.18%2013.26%20C88.85%207.54%20111.9%2019.48%20125.35%2025.36%20C138.79%2031.24%20144.76%2037.95%20152.85%2048.53%20C160.94%2059.11%20171.48%2072.06%20173.87%2088.84Z'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-rest: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'150'%20height%3D'50'%20viewBox%3D'0%200%20150%2050'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'fd'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20x2%3D'150'%20y1%3D'0'%20y2%3D'0'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'.74'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'0.8'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M0%2037.65%20C3.57%2037.71%2014.29%2038.02%2021.43%2038.02%20C28.57%2038.02%2035.71%2037.63%2042.86%2037.67%20C50%2037.7%2057.14%2038.22%2064.29%2038.23%20C71.43%2038.25%2078.57%2037.74%2085.71%2037.74%20C92.86%2037.75%20100%2038.26%20107.14%2038.26%20C114.29%2038.27%20121.43%2037.8%20128.57%2037.78%20C135.71%2037.76%20146.43%2038.09%20150%2038.15'%2F%3E%3Cpath%20d%3D'M0%2032.15%20C3.57%2032.15%2014.29%2032.19%2021.43%2032.17%20C28.57%2032.15%2035.71%2032.1%2042.86%2032.02%20C50%2031.95%2057.14%2031.73%2064.29%2031.7%20C71.43%2031.68%2078.57%2031.87%2085.71%2031.88%20C92.86%2031.88%20100%2031.76%20107.14%2031.75%20C114.29%2031.73%20121.43%2031.8%20128.57%2031.8%20C135.71%2031.8%20146.43%2031.74%20150%2031.73'%2F%3E%3Cpath%20d%3D'M0%2026.13%20C3.57%2026.05%2014.29%2025.69%2021.43%2025.67%20C28.57%2025.65%2035.71%2026%2042.86%2026.02%20C50%2026.05%2057.14%2025.82%2064.29%2025.84%20C71.43%2025.85%2078.57%2026.06%2085.71%2026.12%20C92.86%2026.17%20100%2026.21%20107.14%2026.17%20C114.29%2026.14%20121.43%2025.9%20128.57%2025.9%20C135.71%2025.9%20146.43%2026.11%20150%2026.16'%2F%3E%3Cpath%20d%3D'M0%2019.92%20C3.57%2019.89%2014.29%2019.73%2021.43%2019.73%20C28.57%2019.72%2035.71%2019.85%2042.86%2019.91%20C50%2019.97%2057.14%2020.05%2064.29%2020.08%20C71.43%2020.12%2078.57%2020.09%2085.71%2020.11%20C92.86%2020.14%20100%2020.22%20107.14%2020.21%20C114.29%2020.21%20121.43%2020.19%20128.57%2020.1%20C135.71%2020.01%20146.43%2019.75%20150%2019.68'%2F%3E%3Cpath%20d%3D'M0%2013.68%20C3.57%2013.7%2014.29%2013.68%2021.43%2013.78%20C28.57%2013.89%2035.71%2014.3%2042.86%2014.31%20C50%2014.33%2057.14%2013.92%2064.29%2013.87%20C71.43%2013.82%2078.57%2014.05%2085.71%2014.02%20C92.86%2013.99%20100%2013.62%20107.14%2013.67%20C114.29%2013.72%20121.43%2014.27%20128.57%2014.32%20C135.71%2014.38%20146.43%2014.03%20150%2013.97'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'70.5'%20y%3D'20'%20width%3D'9'%20height%3D'3.2'%2F%3E%3Cpath%20d%3D'M1.5%2014%20L1.5%2038'%20stroke%3D'%23000'%20stroke-width%3D'1.1'%20fill%3D'none'%2F%3E%3Cpath%20d%3D'M143%2014%20L143%2038'%20stroke%3D'%23000'%20stroke-width%3D'1.1'%20fill%3D'none'%2F%3E%3Crect%20x%3D'145'%20y%3D'14'%20width%3D'3'%20height%3D'24'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-rest-ratio: 150 / 50;
  --litw-acc-sunshine: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'210'%20height%3D'50'%20viewBox%3D'0%200%20210%2050'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'fd'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20x2%3D'210'%20y1%3D'0'%20y2%3D'0'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'.74'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D'none'%20stroke%3D'url(%23fd)'%20stroke-width%3D'0.75'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M0%2037.65%20C3.5%2037.71%2014%2037.96%2021%2038%20C28%2038.04%2035%2037.87%2042%2037.9%20C49%2037.92%2056%2038.18%2063%2038.15%20C70%2038.12%2077%2037.8%2084%2037.74%20C91%2037.67%2098%2037.67%20105%2037.76%20C112%2037.85%20119%2038.19%20126%2038.28%20C133%2038.36%20140%2038.28%20147%2038.28%20C154%2038.28%20161%2038.3%20168%2038.28%20C175%2038.27%20182%2038.25%20189%2038.18%20C196%2038.11%20206.5%2037.91%20210%2037.85'%2F%3E%3Cpath%20d%3D'M0%2032.26%20C3.5%2032.25%2014%2032.23%2021%2032.2%20C28%2032.18%2035%2032.2%2042%2032.11%20C49%2032.02%2056%2031.73%2063%2031.66%20C70%2031.59%2077%2031.61%2084%2031.7%20C91%2031.78%2098%2032.17%20105%2032.18%20C112%2032.19%20119%2031.81%20126%2031.75%20C133%2031.7%20140%2031.83%20147%2031.85%20C154%2031.86%20161%2031.76%20168%2031.84%20C175%2031.91%20182%2032.33%20189%2032.3%20C196%2032.28%20206.5%2031.79%20210%2031.68'%2F%3E%3Cpath%20d%3D'M0%2025.78%20C3.5%2025.84%2014%2026.14%2021%2026.12%20C28%2026.11%2035%2025.78%2042%2025.7%20C49%2025.63%2056%2025.58%2063%2025.66%20C70%2025.74%2077%2026.12%2084%2026.17%20C91%2026.22%2098%2025.93%20105%2025.95%20C112%2025.97%20119%2026.29%20126%2026.28%20C133%2026.27%20140%2025.95%20147%2025.88%20C154%2025.8%20161%2025.84%20168%2025.86%20C175%2025.88%20182%2025.91%20189%2025.99%20C196%2026.07%20206.5%2026.28%20210%2026.34'%2F%3E%3Cpath%20d%3D'M0%2020.28%20C3.5%2020.29%2014%2020.42%2021%2020.34%20C28%2020.26%2035%2019.93%2042%2019.82%20C49%2019.7%2056%2019.65%2063%2019.66%20C70%2019.68%2077%2019.82%2084%2019.91%20C91%2020%2098%2020.16%20105%2020.23%20C112%2020.3%20119%2020.32%20126%2020.31%20C133%2020.29%20140%2020.17%20147%2020.14%20C154%2020.1%20161%2020.11%20168%2020.12%20C175%2020.12%20182%2020.2%20189%2020.16%20C196%2020.12%20206.5%2019.92%20210%2019.87'%2F%3E%3Cpath%20d%3D'M0%2013.92%20C3.5%2013.92%2014%2013.96%2021%2013.92%20C28%2013.87%2035%2013.6%2042%2013.65%20C49%2013.7%2056%2014.2%2063%2014.22%20C70%2014.24%2077%2013.84%2084%2013.78%20C91%2013.72%2098%2013.81%20105%2013.85%20C112%2013.9%20119%2014.07%20126%2014.04%20C133%2014.02%20140%2013.71%20147%2013.7%20C154%2013.7%20161%2014%20168%2014.01%20C175%2014.03%20182%2013.77%20189%2013.81%20C196%2013.84%20206.5%2014.16%20210%2014.23'%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D'46'%20cy%3D'32'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2046%2032)'%2F%3E%3Cpath%20d%3D'M49.55%2031.4%20L49.55%2011'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'70'%20cy%3D'23'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2070%2023)'%2F%3E%3Cpath%20d%3D'M66.45%2023.6%20L66.45%2044'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'94'%20cy%3D'20'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2094%2020)'%2F%3E%3Cpath%20d%3D'M90.45%2020.6%20L90.45%2041'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'138'%20cy%3D'17'%20rx%3D'3.55'%20ry%3D'2.35'%20transform%3D'rotate(-22%20138%2017)'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.35'%2F%3E%3Cpath%20d%3D'M134.45%2017.6%20L134.45%2038'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'170'%20cy%3D'17'%20rx%3D'3.55'%20ry%3D'2.35'%20transform%3D'rotate(-22%20170%2017)'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.35'%2F%3E%3Cpath%20d%3D'M166.45%2017.6%20L166.45%2038'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cpath%20d%3D'M116%2014%20L116%2038'%20stroke%3D'%23000'%20stroke-width%3D'1.1'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-sunshine-ratio: 210 / 50;
  --litw-acc-fade: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'50'%20viewBox%3D'0%200%20200%2050'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'fd'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20x2%3D'200'%20y1%3D'0'%20y2%3D'0'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'.74'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D'none'%20stroke%3D'url(%23fd)'%20stroke-width%3D'0.8'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M0%2037.65%20C3.7%2037.66%2014.81%2037.65%2022.22%2037.7%20C29.63%2037.75%2037.04%2037.93%2044.44%2037.95%20C51.85%2037.96%2059.26%2037.79%2066.67%2037.8%20C74.07%2037.81%2081.48%2037.94%2088.89%2038.01%20C96.3%2038.08%20103.7%2038.21%20111.11%2038.2%20C118.52%2038.19%20125.93%2038.06%20133.33%2037.97%20C140.74%2037.88%20148.15%2037.73%20155.56%2037.68%20C162.96%2037.63%20174.07%2037.69%20177.78%2037.69'%2F%3E%3Cpath%20d%3D'M0%2032.33%20C3.7%2032.32%2014.81%2032.37%2022.22%2032.27%20C29.63%2032.17%2037.04%2031.74%2044.44%2031.72%20C51.85%2031.71%2059.26%2032.19%2066.67%2032.18%20C74.07%2032.18%2081.48%2031.71%2088.89%2031.7%20C96.3%2031.69%20103.7%2032.07%20111.11%2032.11%20C118.52%2032.15%20125.93%2031.93%20133.33%2031.94%20C140.74%2031.96%20148.15%2032.24%20155.56%2032.21%20C162.96%2032.19%20174.07%2031.88%20177.78%2031.82'%2F%3E%3Cpath%20d%3D'M0%2026.27%20C3.7%2026.18%2014.81%2025.69%2022.22%2025.7%20C29.63%2025.71%2037.04%2026.28%2044.44%2026.31%20C51.85%2026.33%2059.26%2025.93%2066.67%2025.85%20C74.07%2025.77%2081.48%2025.77%2088.89%2025.83%20C96.3%2025.9%20103.7%2026.24%20111.11%2026.24%20C118.52%2026.24%20125.93%2025.87%20133.33%2025.81%20C140.74%2025.75%20148.15%2025.81%20155.56%2025.88%20C162.96%2025.96%20174.07%2026.19%20177.78%2026.25'%2F%3E%3Cpath%20d%3D'M0%2019.84%20C3.7%2019.91%2014.81%2020.22%2022.22%2020.28%20C29.63%2020.33%2037.04%2020.24%2044.44%2020.17%20C51.85%2020.09%2059.26%2019.82%2066.67%2019.8%20C74.07%2019.79%2081.48%2020.1%2088.89%2020.09%20C96.3%2020.08%20103.7%2019.76%20111.11%2019.75%20C118.52%2019.73%20125.93%2019.9%20133.33%2019.98%20C140.74%2020.06%20148.15%2020.26%20155.56%2020.22%20C162.96%2020.19%20174.07%2019.85%20177.78%2019.77'%2F%3E%3Cpath%20d%3D'M0%2014.08%20C3.7%2014.06%2014.81%2013.95%2022.22%2013.96%20C29.63%2013.98%2037.04%2014.17%2044.44%2014.16%20C51.85%2014.14%2059.26%2013.89%2066.67%2013.88%20C74.07%2013.87%2081.48%2014.1%2088.89%2014.11%20C96.3%2014.13%20103.7%2014%20111.11%2013.97%20C118.52%2013.94%20125.93%2013.94%20133.33%2013.93%20C140.74%2013.92%20148.15%2013.92%20155.56%2013.9%20C162.96%2013.87%20174.07%2013.81%20177.78%2013.79'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M46.95%205%20L68.15%208%20L68.15%2011%20L46.95%208%20Z'%2F%3E%3Cellipse%20cx%3D'44'%20cy%3D'26'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2044%2026)'%2F%3E%3Cpath%20d%3D'M47.55%2025.4%20L47.55%205'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'64'%20cy%3D'29'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2064%2029)'%2F%3E%3Cpath%20d%3D'M67.55%2028.4%20L67.55%208'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'96'%20cy%3D'32'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2096%2032)'%2F%3E%3Cpath%20d%3D'M99.55%2031.4%20L99.55%2011'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-fade-ratio: 200 / 50;
  --litw-acc-rising: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'50'%20viewBox%3D'0%200%20180%2050'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'fd'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20x2%3D'180'%20y1%3D'0'%20y2%3D'0'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'.74'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D'none'%20stroke%3D'url(%23fd)'%20stroke-width%3D'0.8'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M0%2037.65%20C3.75%2037.73%2015%2038.05%2022.5%2038.15%20C30%2038.24%2037.5%2038.2%2045%2038.23%20C52.5%2038.26%2060%2038.31%2067.5%2038.32%20C75%2038.34%2082.5%2038.31%2090%2038.3%20C97.5%2038.28%20105%2038.28%20112.5%2038.24%20C120%2038.21%20127.5%2038.08%20135%2038.08%20C142.5%2038.08%20150%2038.2%20157.5%2038.23%20C165%2038.25%20176.25%2038.23%20180%2038.23'%2F%3E%3Cpath%20d%3D'M0%2031.76%20C3.75%2031.85%2015%2032.27%2022.5%2032.34%20C30%2032.41%2037.5%2032.2%2045%2032.18%20C52.5%2032.16%2060%2032.25%2067.5%2032.21%20C75%2032.18%2082.5%2031.98%2090%2031.96%20C97.5%2031.95%20105%2032.09%20112.5%2032.14%20C120%2032.19%20127.5%2032.27%20135%2032.27%20C142.5%2032.27%20150%2032.25%20157.5%2032.16%20C165%2032.07%20176.25%2031.79%20180%2031.72'%2F%3E%3Cpath%20d%3D'M0%2026.34%20C3.75%2026.33%2015%2026.32%2022.5%2026.26%20C30%2026.19%2037.5%2025.94%2045%2025.95%20C52.5%2025.96%2060%2026.27%2067.5%2026.3%20C75%2026.33%2082.5%2026.21%2090%2026.11%20C97.5%2026.01%20105%2025.79%20112.5%2025.72%20C120%2025.64%20127.5%2025.56%20135%2025.65%20C142.5%2025.74%20150%2026.22%20157.5%2026.25%20C165%2026.27%20176.25%2025.86%20180%2025.79'%2F%3E%3Cpath%20d%3D'M0%2020%20C3.75%2019.99%2015%2019.98%2022.5%2019.94%20C30%2019.89%2037.5%2019.68%2045%2019.73%20C52.5%2019.78%2060%2020.14%2067.5%2020.23%20C75%2020.33%2082.5%2020.34%2090%2020.29%20C97.5%2020.24%20105%2019.97%20112.5%2019.94%20C120%2019.9%20127.5%2020.06%20135%2020.08%20C142.5%2020.1%20150%2020.09%20157.5%2020.05%20C165%2020.01%20176.25%2019.87%20180%2019.84'%2F%3E%3Cpath%20d%3D'M0%2013.81%20C3.75%2013.88%2015%2014.16%2022.5%2014.23%20C30%2014.31%2037.5%2014.28%2045%2014.27%20C52.5%2014.26%2060%2014.25%2067.5%2014.17%20C75%2014.1%2082.5%2013.8%2090%2013.8%20C97.5%2013.8%20105%2014.17%20112.5%2014.19%20C120%2014.21%20127.5%2013.92%20135%2013.93%20C142.5%2013.93%20150%2014.2%20157.5%2014.21%20C165%2014.21%20176.25%2014.02%20180%2013.98'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M68.95%208%20L92.15%205%20L92.15%208%20L68.95%2011%20Z'%2F%3E%3Cellipse%20cx%3D'40'%20cy%3D'35'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2040%2035)'%2F%3E%3Cpath%20d%3D'M43.55%2034.4%20L43.55%2014'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'66'%20cy%3D'29'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2066%2029)'%2F%3E%3Cpath%20d%3D'M69.55%2028.4%20L69.55%208'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'88'%20cy%3D'26'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2088%2026)'%2F%3E%3Cpath%20d%3D'M91.55%2025.4%20L91.55%205'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'118'%20cy%3D'20'%20rx%3D'3.55'%20ry%3D'2.35'%20transform%3D'rotate(-22%20118%2020)'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.35'%2F%3E%3Cpath%20d%3D'M114.45%2020.6%20L114.45%2041'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-rising-ratio: 180 / 50;
  --litw-acc-tie: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'96'%20height%3D'50'%20viewBox%3D'0%200%2096%2050'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'fd'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20x2%3D'96'%20y1%3D'0'%20y2%3D'0'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'.74'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D'none'%20stroke%3D'url(%23fd)'%20stroke-width%3D'0.8'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M0%2037.65%20C4%2037.68%2016%2037.77%2024%2037.83%20C32%2037.89%2040%2037.93%2048%2038.01%20C56%2038.08%2064%2038.34%2072%2038.29%20C80%2038.24%2092%2037.8%2096%2037.7'%2F%3E%3Cpath%20d%3D'M0%2031.96%20C4%2031.92%2016%2031.73%2024%2031.72%20C32%2031.71%2040%2031.87%2048%2031.9%20C56%2031.93%2064%2031.84%2072%2031.9%20C80%2031.96%2092%2032.2%2096%2032.26'%2F%3E%3Cpath%20d%3D'M0%2026.19%20C4%2026.1%2016%2025.69%2024%2025.68%20C32%2025.66%2040%2026.11%2048%2026.11%20C56%2026.12%2064%2025.76%2072%2025.7%20C80%2025.63%2092%2025.72%2096%2025.72'%2F%3E%3Cpath%20d%3D'M0%2019.69%20C4%2019.72%2016%2019.89%2024%2019.89%20C32%2019.88%2040%2019.61%2048%2019.66%20C56%2019.71%2064%2020.17%2072%2020.19%20C80%2020.2%2092%2019.82%2096%2019.74'%2F%3E%3Cpath%20d%3D'M0%2014.23%20C4%2014.18%2016%2013.99%2024%2013.91%20C32%2013.83%2040%2013.72%2048%2013.77%20C56%2013.83%2064%2014.19%2072%2014.25%20C80%2014.31%2092%2014.15%2096%2014.13'%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D'34'%20cy%3D'29'%20rx%3D'3.55'%20ry%3D'2.35'%20transform%3D'rotate(-22%2034%2029)'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.35'%2F%3E%3Cpath%20d%3D'M37.55%2028.4%20L37.55%208'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'64'%20cy%3D'29'%20rx%3D'3.55'%20ry%3D'2.35'%20transform%3D'rotate(-22%2064%2029)'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.35'%2F%3E%3Cpath%20d%3D'M67.55%2028.4%20L67.55%208'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cpath%20d%3D'M37%2033%20Q49%2040%2061%2033%20Q49%2037.6%2037%2033%20Z'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-tie-ratio: 96 / 50;
  --litw-acc-harmony: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'72'%20height%3D'50'%20viewBox%3D'0%200%2072%2050'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'fd'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20x2%3D'72'%20y1%3D'0'%20y2%3D'0'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'.74'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D'none'%20stroke%3D'url(%23fd)'%20stroke-width%3D'0.8'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M0%2037.65%20C4%2037.7%2016%2037.9%2024%2037.93%20C32%2037.96%2040%2037.84%2048%2037.84%20C56%2037.83%2068%2037.9%2072%2037.91'%2F%3E%3Cpath%20d%3D'M0%2032.07%20C4%2032.08%2016%2032.16%2024%2032.11%20C32%2032.06%2040%2031.82%2048%2031.75%20C56%2031.68%2068%2031.69%2072%2031.68'%2F%3E%3Cpath%20d%3D'M0%2025.68%20C4%2025.77%2016%2026.2%2024%2026.21%20C32%2026.23%2040%2025.78%2048%2025.76%20C56%2025.73%2068%2025.99%2072%2026.04'%2F%3E%3Cpath%20d%3D'M0%2020%20C4%2019.95%2016%2019.76%2024%2019.72%20C32%2019.68%2040%2019.71%2048%2019.76%20C56%2019.82%2068%2020.01%2072%2020.06'%2F%3E%3Cpath%20d%3D'M0%2013.66%20C4%2013.66%2016%2013.65%2024%2013.67%20C32%2013.68%2040%2013.73%2048%2013.76%20C56%2013.78%2068%2013.78%2072%2013.79'%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D'36'%20cy%3D'32'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2036%2032)'%2F%3E%3Cellipse%20cx%3D'36'%20cy%3D'26'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2036%2026)'%2F%3E%3Cpath%20d%3D'M39.55%2031.4%20L39.55%205'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-harmony-ratio: 72 / 50;
  --litw-acc-crescendo: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'110'%20height%3D'50'%20viewBox%3D'0%200%20110%2050'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'fd'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20x2%3D'110'%20y1%3D'0'%20y2%3D'0'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'.74'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D'none'%20stroke%3D'url(%23fd)'%20stroke-width%3D'0.8'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M0%2037.65%20C3.67%2037.76%2014.67%2038.26%2022%2038.29%20C29.33%2038.33%2036.67%2037.94%2044%2037.85%20C51.33%2037.77%2058.67%2037.75%2066%2037.8%20C73.33%2037.85%2080.67%2038.12%2088%2038.16%20C95.33%2038.2%20106.33%2038.05%20110%2038.02'%2F%3E%3Cpath%20d%3D'M0%2031.88%20C3.67%2031.93%2014.67%2032.13%2022%2032.18%20C29.33%2032.23%2036.67%2032.2%2044%2032.18%20C51.33%2032.15%2058.67%2032.04%2066%2032.03%20C73.33%2032.02%2080.67%2032.12%2088%2032.13%20C95.33%2032.14%20106.33%2032.1%20110%2032.1'%2F%3E%3Cpath%20d%3D'M0%2026.22%20C3.67%2026.15%2014.67%2025.87%2022%2025.82%20C29.33%2025.77%2036.67%2025.86%2044%2025.91%20C51.33%2025.97%2058.67%2026.11%2066%2026.15%20C73.33%2026.18%2080.67%2026.21%2088%2026.14%20C95.33%2026.06%20106.33%2025.76%20110%2025.69'%2F%3E%3Cpath%20d%3D'M0%2020.13%20C3.67%2020.1%2014.67%2019.95%2022%2019.98%20C29.33%2020.01%2036.67%2020.26%2044%2020.3%20C51.33%2020.34%2058.67%2020.31%2066%2020.22%20C73.33%2020.12%2080.67%2019.77%2088%2019.74%20C95.33%2019.7%20106.33%2019.96%20110%2020.01'%2F%3E%3Cpath%20d%3D'M0%2014.3%20C3.67%2014.27%2014.67%2014.16%2022%2014.13%20C29.33%2014.1%2036.67%2014.11%2044%2014.1%20C51.33%2014.09%2058.67%2014.02%2066%2014.05%20C73.33%2014.09%2080.67%2014.25%2088%2014.29%20C95.33%2014.33%20106.33%2014.29%20110%2014.29'%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D'30'%20cy%3D'35'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2030%2035)'%2F%3E%3Cpath%20d%3D'M33.55%2034.4%20L33.55%2014'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'54'%20cy%3D'32'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2054%2032)'%2F%3E%3Cpath%20d%3D'M57.55%2031.4%20L57.55%2011'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'78'%20cy%3D'29'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2078%2029)'%2F%3E%3Cpath%20d%3D'M81.55%2028.4%20L81.55%208'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cpath%20d%3D'M88%2043%20L24%2046%20L88%2049'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-crescendo-ratio: 110 / 50;
  --litw-acc-pickup: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'128'%20height%3D'50'%20viewBox%3D'0%200%20128%2050'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'fd'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20x2%3D'128'%20y1%3D'0'%20y2%3D'0'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'.74'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D'none'%20stroke%3D'url(%23fd)'%20stroke-width%3D'0.8'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M0%2037.65%20C3.56%2037.7%2014.22%2037.93%2021.33%2037.96%20C28.44%2038%2035.56%2037.92%2042.67%2037.87%20C49.78%2037.82%2056.89%2037.62%2064%2037.68%20C71.11%2037.75%2078.22%2038.21%2085.33%2038.25%20C92.44%2038.29%2099.56%2037.98%20106.67%2037.94%20C113.78%2037.9%20124.44%2038%20128%2038.01'%2F%3E%3Cpath%20d%3D'M0%2031.98%20C3.56%2031.98%2014.22%2032%2021.33%2031.98%20C28.44%2031.96%2035.56%2031.88%2042.67%2031.85%20C49.78%2031.82%2056.89%2031.75%2064%2031.8%20C71.11%2031.85%2078.22%2032.16%2085.33%2032.15%20C92.44%2032.14%2099.56%2031.79%20106.67%2031.75%20C113.78%2031.71%20124.44%2031.89%20128%2031.92'%2F%3E%3Cpath%20d%3D'M0%2026.06%20C3.56%2026.09%2014.22%2026.25%2021.33%2026.23%20C28.44%2026.2%2035.56%2026%2042.67%2025.92%20C49.78%2025.83%2056.89%2025.73%2064%2025.71%20C71.11%2025.69%2078.22%2025.73%2085.33%2025.8%20C92.44%2025.88%2099.56%2026.12%20106.67%2026.16%20C113.78%2026.21%20124.44%2026.08%20128%2026.06'%2F%3E%3Cpath%20d%3D'M0%2020.04%20C3.56%2020.03%2014.22%2020.02%2021.33%2019.99%20C28.44%2019.95%2035.56%2019.83%2042.67%2019.81%20C49.78%2019.79%2056.89%2019.8%2064%2019.87%20C71.11%2019.93%2078.22%2020.24%2085.33%2020.21%20C92.44%2020.17%2099.56%2019.73%20106.67%2019.66%20C113.78%2019.59%20124.44%2019.76%20128%2019.79'%2F%3E%3Cpath%20d%3D'M0%2014.05%20C3.56%2014.07%2014.22%2014.21%2021.33%2014.15%20C28.44%2014.08%2035.56%2013.7%2042.67%2013.66%20C49.78%2013.62%2056.89%2013.82%2064%2013.92%20C71.11%2014.02%2078.22%2014.25%2085.33%2014.27%20C92.44%2014.29%2099.56%2014.11%20106.67%2014.02%20C113.78%2013.92%20124.44%2013.77%20128%2013.72'%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D'24'%20cy%3D'32'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2024%2032)'%2F%3E%3Cpath%20d%3D'M27.55%2031.4%20L27.55%2011'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'46'%20cy%3D'23'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2046%2023)'%2F%3E%3Cpath%20d%3D'M42.45%2023.6%20L42.45%2044'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'68'%20cy%3D'20'%20rx%3D'3.9'%20ry%3D'2.7'%20transform%3D'rotate(-22%2068%2020)'%2F%3E%3Cpath%20d%3D'M64.45%2020.6%20L64.45%2041'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cellipse%20cx%3D'104'%20cy%3D'17'%20rx%3D'3.55'%20ry%3D'2.35'%20transform%3D'rotate(-22%20104%2017)'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.35'%2F%3E%3Cpath%20d%3D'M100.45%2017.6%20L100.45%2038'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3Cpath%20d%3D'M86%2014%20L86%2038'%20stroke%3D'%23000'%20stroke-width%3D'1.1'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");
  --litw-acc-pickup-ratio: 128 / 50;
}
/* ACCENTS:END */

/* Tones. Deeper gold on light bands; brand gold and white art on the
   dark surfaces (the same list as the navy focus-ring rule). A white
   card inside a dark band goes back to the light tones. */
:root {
  --litw-accent: #d49b1f;
  --litw-art: rgb(43 74 104 / 0.14);
  --litw-glow-a: 0.2;
}

:is(.is-style-section-4, .is-style-section-5, .has-accent-3-background-color, .has-contrast-background-color, .has-accent-8-background-color) {
  --litw-accent: var(--wp--preset--color--accent-2, #f2c14e);
  --litw-art: rgb(255 255 255 / 0.15);
  --litw-glow-a: 0.26;
}

:is(.is-style-section-4, .is-style-section-5, .has-accent-3-background-color, .has-contrast-background-color, .has-accent-8-background-color) .has-accent-1-background-color {
  --litw-accent: #d49b1f;
  --litw-art: rgb(43 74 104 / 0.14);
  --litw-glow-a: 0.2;
}

/* Heading rays: three strokes fanning from the top-right of the last
   letter. An inline-block, not an inline box: Safari masks only the
   first tile of a masked inline box and paints the rest of it solid
   (2026-10-20). An atomic inline right after a letter has no break
   opportunity before it, so the accent still wraps with the last word.
   vertical-align lifts it toward the cap line. The empty alt text keeps
   it out of the accessible name; the negative top margin keeps the
   raised box from growing the line. */
.litw-rays-end-corner::after {
  content: "";
  content: "" / "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.12em;
  vertical-align: 0.42em;
  background-color: var(--litw-accent);
  -webkit-mask: var(--litw-acc-rays) no-repeat center / 100% 100%;
  mask: var(--litw-acc-rays) no-repeat center / 100% 100%;
}

/* Side-bleed blobs: -l or -r, sized by the band's height
   (-s 50%, -m 70% (default), -l 92%). */
:is(.litw-bg-blob-bleed-l, .litw-bg-blob-bleed-l-s, .litw-bg-blob-bleed-l-m, .litw-bg-blob-bleed-l-l) {
  background-image: var(--litw-acc-blob-l);
  background-position: left center;
}

:is(.litw-bg-blob-bleed-r, .litw-bg-blob-bleed-r-s, .litw-bg-blob-bleed-r-m, .litw-bg-blob-bleed-r-l) {
  background-image: var(--litw-acc-blob-r);
  background-position: right center;
}

:is(.is-style-section-4, .is-style-section-5, .has-accent-3-background-color, .has-contrast-background-color, .has-accent-8-background-color):is(.litw-bg-blob-bleed-l, .litw-bg-blob-bleed-l-s, .litw-bg-blob-bleed-l-m, .litw-bg-blob-bleed-l-l) {
  background-image: var(--litw-acc-blob-l-dark);
}

:is(.is-style-section-4, .is-style-section-5, .has-accent-3-background-color, .has-contrast-background-color, .has-accent-8-background-color):is(.litw-bg-blob-bleed-r, .litw-bg-blob-bleed-r-s, .litw-bg-blob-bleed-r-m, .litw-bg-blob-bleed-r-l) {
  background-image: var(--litw-acc-blob-r-dark);
}

[class*="litw-bg-blob-bleed-"] {
  background-repeat: no-repeat;
  background-size: auto 70%;
}

:is(.litw-bg-blob-bleed-l-s, .litw-bg-blob-bleed-r-s) {
  background-size: auto 50%;
}

:is(.litw-bg-blob-bleed-l-l, .litw-bg-blob-bleed-r-l) {
  background-size: auto 92%;
}

/* Gold glows: warm light with a long, soft falloff. */
.litw-glow-corner {
  background-image: radial-gradient(70% 90% at 0% 0%, rgb(242 193 78 / var(--litw-glow-a)) 0%, rgb(242 193 78 / calc(var(--litw-glow-a) * 0.45)) 35%, rgb(242 193 78 / 0) 72%);
}

.litw-glow-rise {
  background-image: radial-gradient(75% 85% at 50% 115%, rgb(242 193 78 / calc(var(--litw-glow-a) * 1.1)) 0%, rgb(242 193 78 / calc(var(--litw-glow-a) * 0.45)) 40%, rgb(242 193 78 / 0) 75%);
}

/* Empty states: one bar holding a whole rest, closed by the final
   barline (the piece ends here). Add to the group or paragraph that
   holds the message; the art sits above it, aligned with its text. */
.litw-staff-rest::before {
  content: "";
  display: block;
  width: min(280px, 82%);
  aspect-ratio: var(--litw-acc-rest-ratio);
  margin-block-end: var(--wp--preset--spacing--30);
  margin-inline: 0 auto;
  background-color: var(--litw-art);
  -webkit-mask: var(--litw-acc-rest) center / contain no-repeat;
  mask: var(--litw-acc-rest) center / contain no-repeat;
}

.litw-staff-rest:is(.has-text-align-center, .is-content-justification-center)::before {
  margin-inline: auto;
}

/* Background notation: "You Are My Sunshine" (G C D | E E, sung at
   performances), the fading melody (footer sign-off), and the page
   marks: tie (stories), harmony (unused), crescendo (Give), pickup
   (Partner with Us). Drawn behind the element's content. Place each
   where there is real empty space at phone and desktop widths by
   setting --litw-art-top/right/bottom/left/w/rot on the placement;
   the default is right-hand side, vertically centred. */
:is(.litw-staff-sunshine, .litw-staff-fade, .litw-mark-tie, .litw-mark-harmony, .litw-mark-crescendo, .litw-mark-pickup) {
  position: relative;
  isolation: isolate;
}

:is(.litw-staff-sunshine, .litw-staff-fade, .litw-mark-tie, .litw-mark-harmony, .litw-mark-crescendo, .litw-mark-pickup)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--litw-art-top, 50%) var(--litw-art-right, 4%) var(--litw-art-bottom, auto) var(--litw-art-left, auto);
  width: var(--litw-art-w, 30%);
  aspect-ratio: var(--litw-art-ratio);
  translate: var(--litw-art-shift, 0 -50%);
  rotate: var(--litw-art-rot, 0deg);
  background-color: var(--litw-art);
  -webkit-mask: var(--litw-art-mask) center / contain no-repeat;
  mask: var(--litw-art-mask) center / contain no-repeat;
  pointer-events: none;
}

.litw-staff-sunshine {
  --litw-art-mask: var(--litw-acc-sunshine);
  --litw-art-ratio: var(--litw-acc-sunshine-ratio);
  --litw-art-rot: -1.5deg;
}

.litw-staff-fade {
  --litw-art-mask: var(--litw-acc-fade);
  --litw-art-ratio: var(--litw-acc-fade-ratio);
}

.litw-mark-tie {
  --litw-art-mask: var(--litw-acc-tie);
  --litw-art-ratio: var(--litw-acc-tie-ratio);
}

.litw-mark-harmony {
  --litw-art-mask: var(--litw-acc-harmony);
  --litw-art-ratio: var(--litw-acc-harmony-ratio);
}

.litw-mark-crescendo {
  --litw-art-mask: var(--litw-acc-crescendo);
  --litw-art-ratio: var(--litw-acc-crescendo-ratio);
}

.litw-mark-pickup {
  --litw-art-mask: var(--litw-acc-pickup);
  --litw-art-ratio: var(--litw-acc-pickup-ratio);
}

/* .litw-art-inline: the art follows the host's last word instead of
   being placed in the box. An inline-block whose negative right margin
   zeroes its line width, so it never wraps or moves the text. Size with
   --litw-art-w; --litw-art-gap and --litw-art-va nudge it. */
.litw-art-inline::after {
  position: relative;
  display: inline-block;
  inset: auto;
  width: var(--litw-art-w);
  margin: 0 calc(-1 * var(--litw-art-w)) 0 var(--litw-art-gap, 0.75rem);
  vertical-align: var(--litw-art-va, middle);
  translate: none;
}

@media (forced-colors: active) {
  .litw-rays-end-corner::after,
  .litw-staff-rest::before,
  :is(.litw-staff-sunshine, .litw-staff-fade, .litw-mark-tie, .litw-mark-harmony, .litw-mark-crescendo, .litw-mark-pickup)::after {
    display: none;
  }

  :is([class*="litw-bg-blob-bleed-"], .litw-glow-corner, .litw-glow-rise) {
    background-image: none;
  }

  footer.wp-block-template-part::before {
    display: none;
  }

  :is(main > .wp-block-post-content:last-child, main > :last-child > .wp-block-post-content:last-child) > .alignfull:last-child {
    background-image: none;
  }
}

/* --- Accent placements ---------------------------------------------- */

/* Homepage hero: "You Are My Sunshine". Side by side (1100px and up) it
   follows the last word of the lead paragraph ("…disabilities.") into the
   gap before the photo's curve: an inline-block whose negative right
   margin zeroes its line width, so it never wraps and never moves the
   text. If the line runs long it tucks under the photo, which paints
   over it. Stacked, a second copy sits under the buttons, on the right.
   Each host shows its copy at its own widths. */
.litw-home-hero p.litw-staff-sunshine::after {
  position: relative;
  display: inline-block;
  inset: auto;
  width: 170px;
  margin: 0 -170px 0 0.75rem;
  vertical-align: -0.35em;
  translate: none;
}

.litw-home-hero .wp-block-buttons.litw-staff-sunshine {
  --litw-art-top: calc(100% + var(--wp--preset--spacing--20));
  --litw-art-right: 2%;
  --litw-art-w: min(170px, 45%);
  --litw-art-shift: 0 0;
}

@media (max-width: 1099px) {
  .litw-home-hero p.litw-staff-sunshine::after {
    display: none;
  }
}

@media (min-width: 1100px) {
  .litw-home-hero .wp-block-buttons.litw-staff-sunshine::after {
    display: none;
  }
}

/* /events/ intro: two leads, one shown. With events scheduled, the
   upcoming list fills the right column and the usual lead shows; with
   none (the block renders nothing), the "no scheduled events" lead shows
   instead, under the rest. display:none keeps the hidden one out of the
   accessibility tree too. */
.litw-archive-intro:has(.wp-block-litw-upcoming-events) .litw-archive-intro__lead--none,
.litw-archive-intro:not(:has(.wp-block-litw-upcoming-events)) .litw-archive-intro__lead:not(.litw-archive-intro__lead--none) {
  display: none;
}

/* Page marks (2026-10-19), each where there is space at both widths.
   Story pages: the tie (connection) follows the date in the story hero. */
.wp-block-post-date.litw-mark-tie {
  --litw-art-w: clamp(96px, 9vw, 130px);
  --litw-art-gap: 1.25rem;
  --litw-art-rot: -5deg;
}

/* Give: the crescendo (growing) in the open space beside the donation
   form; stacked, the form fills the width, so it moves up beside the
   short "Give Online" heading. Anchored to the bottom, where the
   form's fixed height makes the position stable. */
.litw-mark-crescendo {
  --litw-art-top: auto;
  --litw-art-bottom: 240px;
  --litw-art-left: calc(min(30rem, 100%) + 12%);
  --litw-art-right: auto;
  --litw-art-w: clamp(160px, 18vw, 240px);
  --litw-art-shift: 0 50%;
  --litw-art-rot: -4deg;
}

@media (max-width: 781px) {
  .litw-mark-crescendo {
    --litw-art-top: 1.25rem;
    --litw-art-bottom: auto;
    --litw-art-left: auto;
    --litw-art-right: 0;
    --litw-art-w: 110px;
    --litw-art-shift: 0 -50%;
  }
}

/* Partner with Us: pickup notes (the lead-in) after "Two ways to start".
   Stacked there's no room after "start" on a narrow phone, so it moves up
   to the empty right end of the eyebrow line above, inside the box. */
.litw-mark-pickup {
  --litw-art-w: clamp(100px, 11vw, 150px);
  --litw-art-gap: 1rem;
  --litw-art-va: -0.1em;
  --litw-art-rot: -4deg;
}

@media (max-width: 781px) {
  .litw-mark-pickup.litw-art-inline::after {
    position: absolute;
    inset: auto 0 calc(100% + 0.25rem) auto;
    width: 96px;
    margin: 0;
  }
}

/* Footer: the fading melody above the copyright line, in the spacer. */
.litw-staff-fade {
  --litw-art-top: auto;
  --litw-art-bottom: calc(100% + 0.25rem);
  --litw-art-left: 50%;
  --litw-art-right: auto;
  --litw-art-w: 190px;
  --litw-art-shift: -50% 0;
}

/* ===================================================================
   About (2026-10-20)
   =================================================================== */

/* Vision and Mission as two voices in the swoop hero's text column: an
   eyebrow h2 over a large serif line. */
.litw-voice > p {
  font-family: var(--wp--preset--font-family--literata);
  line-height: 1.4;
  text-wrap: pretty;
}

/* A person: round-blob portrait beside role, name, contact and bio, in
   one flat tinted panel (see the About block at the end of the file). Narrower than wide so a short bio doesn't leave the
   text column mostly empty; portrait on top on a phone. */
.wp-block-group.litw-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--wp--preset--spacing--50);
  row-gap: var(--wp--preset--spacing--30);
  max-width: 54rem;
}

.litw-person > * {
  margin-block: 0;
}

.litw-person > .wp-block-image img {
  width: clamp(150px, 16vw, 210px);
}

/* Phone: one centred column, portrait on top, then role, name, email
   and bio, so nothing has to share a 300px line. */
@media (max-width: 599px) {
  .wp-block-group.litw-person {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .litw-person > .wp-block-image img {
    width: 140px;
  }
}

/* A lead paragraph: large, and medium on a phone, where a long large
   paragraph runs a dozen lines. Used in place of the Large size preset,
   whose class can't be overridden by size alone. */
.litw-lead {
  font-size: var(--wp--preset--font-size--large);
}

/* .litw-section: one vertical rhythm for a page's sections (About,
   2026-10-20). Padding, not margin, so it never collapses and a
   neighbouring band's wave always has room to reach into it. The
   floor is 56px: the spacing--60/70 presets drop to 30-50px on a phone,
   which made sections run together. */
.litw-section {
  padding-block: clamp(36px, 7vw, 90px);
}

/* Phone spacing (2026-10-20): the 30px gutter and 30px block gap ate
   16% of a 375px screen. The gutter is fluid: 16px at 320px, 24px at
   600px, back to the 30px token by ~780px. --spacing--40 (the block gap
   and the Home bands' padding) drops from 30px to 20px. */
@media (max-width: 781px) {
  body {
    --wp--style--root--padding-left: clamp(16px, 2.857vw + 6.86px, 30px);
    --wp--style--root--padding-right: clamp(16px, 2.857vw + 6.86px, 30px);
    --wp--preset--spacing--40: 20px;
  }

  /* Space above the footer wave: the 56px floor is too deep on a phone.
     On :root because --litw-footer-space is resolved there. */
  :root {
    --litw-footer-gap: 40px;
  }
}

.litw-section:not(.alignfull) {
  margin-block: 0;
}

/* .litw-stack-media-first: Columns that stack the photo first on a
   phone, so a long text column doesn't push it a screen away. */
@media (max-width: 781px) {
  .litw-lead {
    font-size: var(--wp--preset--font-size--medium);
  }

  .litw-stack-media-first > .wp-block-column:has(> .wp-block-image) {
    order: -1;
  }
}

/* ===================================================================
   Video photo (2026-10-20): a photo that plays a video. Put
   .litw-video-photo on the column (or group) holding an Image and a
   YouTube Video Popup block. The popup's one link stays the visible
   caption and the only tab stop; its ::after stretches over the whole
   box so the photo is the click target too, and a gold play badge on
   the photo says so. Turn the image's own lightbox off. Add
   .litw-video-portrait for a vertical video (a YouTube Short).
   =================================================================== */
.litw-video-photo {
  /* Resolved here: inside .wp-block-image the palette's accent-2 is
     shadowed by a pale per-block value. */
  --litw-play-fill: var(--wp--preset--color--accent-2, #f2c14e);
  position: relative;
}

.litw-video-photo > .wp-block-image {
  position: relative;
}

.litw-video-photo > .wp-block-image::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 4rem;
  height: 4rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--litw-play-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2315212d' d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 56% 50% / 1.75rem 1.75rem;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.85), 0 6px 18px rgb(21 33 45 / 0.35);
  pointer-events: none;
}

.litw-video-photo .wp-block-litw-youtube-video-popup {
  margin-top: var(--wp--preset--spacing--30);
  font-weight: 600;
}

.litw-video-photo .litw-video-popup__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .litw-video-photo > .wp-block-image::after {
    transition: scale 0.18s ease;
  }
}

.litw-video-photo:has(.litw-video-popup__link:hover) > .wp-block-image::after {
  scale: 1.08;
}

/* The link's own ring sits on the caption; the photo gets one too, so
   the whole target reads as focused. */
.litw-video-photo:has(.litw-video-popup__link:focus-visible) > .wp-block-image img {
  outline: 2px solid var(--wp--preset--color--accent-3, #2b4a68);
  outline-offset: 4px;
}

.litw-video-portrait .wp-block-litw-youtube-video-popup .litw-video-popup__lightbox {
  width: min(24rem, calc(100vw - 2rem), calc((100vh - 2rem - 2.75rem) * 9 / 16));
  width: min(24rem, calc(100vw - 2rem), calc((100svh - 2rem - 2.75rem) * 9 / 16));
}

.litw-video-portrait .wp-block-litw-youtube-video-popup .litw-video-popup__player {
  aspect-ratio: 9 / 16;
}

@media (forced-colors: active) {
  .litw-video-photo > .wp-block-image::after {
    display: none;
  }
}

/* ===================================================================
   Give (2026-10-20): intro beside the donation form, then "Other ways
   to give" as the page's navy band.

   .litw-givebutter wraps the [givebutter-widget] shortcode (functions.php)
   and holds the form's final height from first paint, so nothing under
   it moves while it loads. The widget renders nothing, then a 188px
   stub, then the form; its final height depends only on its width.
   Measured 2026-10-20 (first step of the form, goal bar off): 597px
   under 272px, 573px from 272px, 487px from 386px. Re-measure if
   Givebutter changes the form; a stale value leaves a gap, never a clip.
   assets/js/givebutter-loader.js reveals the form when it reaches the
   reserve. Until then a skeleton shaped like the form shows a status
   line; after 8s the line says the form is slow and a button to
   Givebutter's own page appears. Without JS the widget can't render,
   so only a plain link to that page shows.
   =================================================================== */
.litw-givebutter {
  container-type: inline-size;
}

.litw-givebutter__frame {
  display: grid;
}

.litw-givebutter__frame > * {
  grid-area: 1 / 1;
  min-width: 0;
}

/* Content height, not stretched to the reserve: the loader measures it. */
.litw-givebutter__widget {
  align-self: start;
}

.litw-givebutter.is-js .litw-givebutter__frame {
  min-height: 597px;
}

@container (min-width: 272px) {
  .litw-givebutter.is-js .litw-givebutter__frame {
    min-height: 573px;
  }
}

@container (min-width: 386px) {
  .litw-givebutter.is-js .litw-givebutter__frame {
    min-height: 487px;
  }
}

/* The hidden widget still loads and lays out; visibility keeps it out of
   the tab order and the accessibility tree until it is revealed. */
.litw-givebutter.is-js .litw-givebutter__widget {
  visibility: hidden;
  opacity: 0;
}

.litw-givebutter.is-ready .litw-givebutter__widget {
  visibility: visible;
  opacity: 1;
}

/* The placeholder: a card the size and shape of Givebutter's (480px
   wide, left-aligned), so the swap reads as the form filling in. */
.litw-givebutter.is-js .litw-givebutter__placeholder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  max-width: 480px;
  padding: 24px 24px 28px;
  border: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
  border-radius: 12px;
  background-color: var(--wp--preset--color--accent-1, #fff);
}

/* [hidden] alone loses to the display above. */
.litw-givebutter.is-js .litw-givebutter__placeholder[hidden] {
  display: none;
}

.litw-givebutter:not(.is-js) :is(.litw-givebutter__skeleton, .litw-givebutter__msg, .litw-givebutter__bone),
.litw-givebutter.is-js .litw-givebutter__link,
.litw-givebutter:not(.is-slow) .litw-givebutter__button {
  display: none;
}

.litw-givebutter__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.litw-givebutter__bone {
  display: block;
  border-radius: 8px;
  background-color: var(--wp--preset--color--accent-5, #edf1f5);
}

.litw-givebutter__bone.is-title {
  align-self: center;
  width: 40%;
  height: 20px;
  margin-block-end: 4px;
}

.litw-givebutter__bone.is-tabs {
  height: 44px;
}

.litw-givebutter__pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.litw-givebutter__pills > .litw-givebutter__bone {
  height: 48px;
}

/* Narrow, Givebutter wraps the frequency tabs 2 x 2 and the amounts
   into two columns; the skeleton follows. */
@container (max-width: 385px) {
  .litw-givebutter__bone.is-tabs {
    height: 92px;
  }

  .litw-givebutter__pills {
    grid-template-columns: repeat(2, 1fr);
  }
}

.litw-givebutter__bone.is-button {
  flex: none;
  height: 50px;
}

.litw-givebutter__status {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  text-align: center;
}

.litw-givebutter__status > p {
  margin: 0;
}

.litw-givebutter__msg {
  font-weight: 600;
}

/* The slow-state button: wp-element-button brings the colours, but the
   pill shape is on .wp-block-button__link, which this isn't. */
.litw-givebutter__button {
  display: inline-block;
  margin-block-start: var(--wp--preset--spacing--20);
  border-radius: 9999px;
  text-decoration: none;
}

.litw-givebutter__msg:empty {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .litw-givebutter__bone {
    background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.7), transparent);
    background-repeat: no-repeat;
    background-size: 50% 100%;
    animation: litw-givebutter-shimmer 1.6s ease-in-out infinite;
  }

  .litw-givebutter.is-ready .litw-givebutter__widget {
    transition: opacity 0.3s ease;
  }
}

@keyframes litw-givebutter-shimmer {
  from {
    background-position: -100% 0;
  }

  to {
    background-position: 200% 0;
  }
}

/* Hero: the lead line, the form, the rest of the text, the photo. That
   is the stacked (phone) order, so the form comes right after the lead.
   Side by side (782px, core's column break) the text, then the photo,
   run down the left and the form spans them on the right. The band's
   wave is drawn above the band and the band already reserves half its
   height as margin, so the hero only adds a little breathing room. */
.litw-give-hero {
  display: grid;
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  align-items: start;
  margin-block-end: calc(var(--litw-section-space) * .85);
}
.litw-give-hero > * {
  margin-block: 0;
}

.litw-give-more > * + * {
  margin-block-start: var(--wp--preset--spacing--20);
}

.litw-give-photo img {
  width: 100%;
  max-width: 440px;
}

@media (min-width: 782px) {
  .litw-give-hero {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    grid-template-rows: auto auto 1fr;
  }

  .litw-give-hero > .litw-give-form {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .litw-give-lead {
    grid-row: 1;
  }

  .litw-give-more {
    grid-row: 2;
  }

  .litw-give-photo {
    grid-row: 3;
    margin-block-start: var(--wp--preset--spacing--20);
  }
}

/* Other ways to give: quiet panels (2026-10-21; white cards before). No
   colour of their own in the markup, so text, links and focus follow the
   band. The band is Mist since the colour-by-meaning orders; on a dark
   band they take the light mirror. */
.litw-give-way {
  background-color: var(--litw-quiet-surface);
  border-radius: 1rem;
  box-shadow: none;
}

:is(.has-contrast-background-color, .has-accent-3-background-color, .has-accent-8-background-color) .litw-give-way {
  background-color: var(--litw-quiet-surface-light);
  border: 1px solid rgb(255 255 255 / 0.14);
}

.litw-give-way > * {
  margin-block: 0;
}

.litw-give-way > * + * {
  margin-block-start: var(--wp--preset--spacing--20);
}

@media (forced-colors: active) {
  .litw-givebutter__bone {
    border: 1px solid CanvasText;
  }
}

/* ==========================================================================
   Art gallery (2026-10-20)
   Artwork is shown whole: never cropped, masked or swooped, and never
   enlarged past its file size (several files are under 500px wide). The
   one rule that does that everywhere: width/height auto, max-width 100%,
   and a height cap -- no forced width.
     - Single: .litw-gallery-wall, a full-width Alt deep band holding the
       lead piece (functions.php: litw_child_art_wall), then the other
       pieces stacked, each fitting the screen height. Several pieces with
       no text of their own: a filmstrip on the wall instead. Pieces with a
       poem or note: each beside its text.
     - Archive: .litw-gallery-grid, row-span masonry (assets/js/art-masonry.js).
     - Homepage: .litw-gallery-strip, four hand-picked pieces.
   ========================================================================== */

/* --- Single: the wall ---------------------------------------------------- */
/* Square corners: theme.json rounds every group, but a full-bleed band
   ends at the viewport edge (same rule as the swoop band). */
.litw-gallery-wall {
  padding-block: var(--wp--preset--spacing--50);
  border-radius: 0;
  /* The band paints over the breadcrumb bar's shadow, so it redraws it
     along its top (same values as the swoop bands). */
  box-shadow: inset 0 6px 16px -10px rgb(25 25 25 / 0.35);
}

/* fit-content keeps the lightbox's enlarge button on the picture's corner
   rather than at the band's edge. */
.litw-gallery-wall figure.litw-gallery-wall__art {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.litw-gallery-wall__art img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(80svh, 900px);
  box-shadow: var(--wp--preset--shadow--deep);
}

.litw-gallery-wall__video {
  width: min(100%, 60rem);
  margin-inline: auto;
}

.litw-gallery-wall__video .wp-block-litw-video-gallery {
  grid-template-columns: 1fr;
}

/* --- Single: the other pieces, stacked ---------------------------------- */
/* Galleries become one column. Core sizes gallery images with
   `:not(#individual-image)` selectors (an ID's weight) plus up to two
   pseudo-classes, so two :not(#litw) are needed to win on source order
   without !important. */
.single-litw_artgallery_item .wp-block-post-content .wp-block-gallery.has-nested-images {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--50);
}

.single-litw_artgallery_item .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#litw):not(#litw) {
  width: auto;
  max-width: 100%;
  flex-grow: 0;
}

/* The figure hugs its picture, so the lightbox's enlarge button sits on
   the picture's corner. */
.single-litw_artgallery_item .wp-block-post-content figure.wp-block-image {
  width: fit-content;
  max-width: 100%;
}

/* align-self: the lightbox makes the figure a flex column, whose default
   stretch would widen the picture to the column and letterbox it. */
.litw-gallery-wall__art img,
.single-litw_artgallery_item .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#litw):not(#litw) img,
.single-litw_artgallery_item .wp-block-post-content figure.wp-block-image img {
  align-self: flex-start;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(80svh, 900px);
  object-fit: contain;
}

/* --- Single: the filmstrip (several pieces, no text of their own) ------- */
/* Every piece at one height, side by side, the next one peeking in. The
   first piece starts on the wide edge, like the title below; when they all
   fit, they centre. A piece is never taller than its file (no enlarging)
   or wider than the screen less 3rem, so on a phone the next piece still
   peeks in: --litw-art-height and --litw-art-ratio come
   from litw_child_art_filmstrip(). */
.litw-filmstrip {
  --litw-filmstrip-pad: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
}

.litw-filmstrip__track {
  display: flex;
  align-items: flex-end;
  justify-content: safe center;
  gap: var(--wp--preset--spacing--40);
  /* A scroller clips both ways, so the padding is room for the deep
     shadow (6px 6px 30px: ~24px above a piece, ~36px below). The top
     margin cancels the top room, keeping the pieces where they were. */
  margin: -1.5rem 0 0;
  padding: 1.5rem var(--litw-filmstrip-pad) 2.5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--litw-filmstrip-pad);
  scrollbar-width: thin;
}

.litw-filmstrip__slide {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
}

.litw-filmstrip figure.wp-block-image {
  width: fit-content;
  margin: 0;
}

.litw-filmstrip figure.wp-block-image img {
  display: block;
  align-self: flex-start;
  width: auto;
  height: min(70svh, 720px, var(--litw-art-height), calc((100vw - 2 * var(--wp--style--root--padding-left) - 3rem) / var(--litw-art-ratio)));
  max-width: none;
  box-shadow: var(--wp--preset--shadow--deep);
}

.litw-filmstrip figcaption {
  margin-block: var(--wp--preset--spacing--20) 0;
  text-align: start;
}

/* 44px chips; the 1px border carries the 3:1 boundary on the Alt deep
   band (WCAG 1.4.11). */
.litw-filmstrip__nav:not([hidden]) {
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
}

.litw-filmstrip__nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--wp--preset--color--contrast);
  border-radius: 50%;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
}

.litw-filmstrip__nav button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

/* --- Single: a piece beside its text (poems, notes) --------------------- */
/* litw_child_art_piece() splits the group into art | text. The pieces'
   wrapper is let out of the 48rem prose measure (see "Article layout");
   its own prose keeps it; separators span the pieces. */
.litw-wide-body .wp-block-post-content > :has(.litw-art-piece) {
  max-width: none;
}

.litw-wide-body .wp-block-post-content > :has(.litw-art-piece) > :not(.litw-art-piece, .wp-block-separator) {
  max-width: 48rem;
}

.litw-art-piece__body {
  display: grid;
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  align-items: start;
}

@media (min-width: 782px) {
  .litw-art-piece__body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  /* One picture stays in view while a long poem scrolls past it, clear
     of the admin bar when one is showing (core sets the variable). */
  .litw-art-piece__art.is-sticky {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--40));
  }

  /* Outweighs the stacked-pieces cap above (".single-… figure img"). */
  .single-litw_artgallery_item .wp-block-post-content .litw-art-piece__art.is-sticky figure.wp-block-image img {
    max-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--wp--preset--spacing--40));
  }
}

/* --- Archive: row-span masonry ------------------------------------------ */
.litw-gallery-grid {
  align-items: start;
}

/* 8px rows; each card spans its own height (set by art-masonry.js). The
   vertical gap is folded into the span, so row-gap goes to zero. */
.litw-gallery-grid.is-masonry {
  grid-auto-rows: 8px;
  row-gap: 0;
}

/* The story cards' 3:4 crop skips this grid (see "Story cards"), so each
   image keeps its attribute ratio and the inline object-fit: cover crops
   nothing. */

/* --- Event photos: the same masonry ------------------------------------ */
/* functions.php adds .litw-masonry to every photo gallery on an event page.
   Core's gallery is a flex row sized by `:not(#individual-image)` selectors
   (an ID's weight), hence the two :not(#litw). Columns go by width, not by
   the gallery's own setting, so every event has the same rhythm. Without
   JavaScript it stays a plain top-aligned grid. */
.wp-block-gallery.has-nested-images.litw-masonry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

@media (min-width: 600px) {
  .wp-block-gallery.has-nested-images.litw-masonry {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .wp-block-gallery.has-nested-images.litw-masonry {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.wp-block-gallery.has-nested-images.litw-masonry.is-masonry {
  grid-auto-rows: 8px;
  row-gap: 0;
}

.wp-block-gallery.has-nested-images.litw-masonry figure.wp-block-image:not(#litw):not(#litw) {
  width: auto;
  max-width: 100%;
}

.wp-block-gallery.has-nested-images.litw-masonry figure.wp-block-image:not(#litw):not(#litw) img {
  width: 100%;
  height: auto;
}

/* --- Homepage strip ------------------------------------------------------ */
/* Each piece sits on a shared baseline in an equal-height box, so the
   titles line up while every shape stays whole. */
.litw-gallery-strip .wp-block-image {
  display: flex;
  align-items: flex-end;
  height: 18rem;
  margin: 0;
}

.litw-gallery-strip .wp-block-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 1rem;
  box-shadow: var(--wp--preset--shadow--deep);
}

@media (max-width: 599px) {
  .litw-gallery-strip .wp-block-image {
    height: 14rem;
  }
}

/* Stretched-link card, as .litw-clickable-card (section 4) does for post
   titles: the heading's link is the card's only anchor. */
.litw-gallery-strip .litw-clickable-card .wp-block-heading a {
  text-decoration: none;
}

.litw-gallery-strip .litw-clickable-card .wp-block-heading a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.litw-gallery-strip .litw-clickable-card:hover .wp-block-heading a,
.litw-gallery-strip .litw-clickable-card:has(:focus-visible) .wp-block-heading a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@supports selector(:has(a)) {
  .litw-gallery-strip .litw-clickable-card .wp-block-heading a:focus-visible {
    outline: none;
  }
}

/* ===================================================================
   About: swoop hero band, per-edge waves, flat person panel, timeline
   (2026-10-20, from the Gemini mockup).
   =================================================================== */

/* Per-edge wave shapes: long, low, one asymmetric crest per tile. Each
   band edge gets its own (a: hero to What We Do, b: What We Do to Who We
   Are, c: Who We Are to History) so no two edges repeat. Set on the
   pseudo-element itself, so they win over the band's own wave mask at
   every width. Same strip mechanism as .litw-wave-top/-bottom above. */
.litw-wave-top-a::before { --litw-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='720'%20height='60'%20viewBox='0%200%20720%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2060%20L0%2049.47%20L6%2049.79%20L12%2050.06%20L18%2050.29%20L24%2050.47%20L30%2050.60%20L36%2050.69%20L42%2050.74%20L48%2050.75%20L54%2050.73%20L60%2050.68%20L66%2050.61%20L72%2050.51%20L78%2050.39%20L84%2050.26%20L90%2050.12%20L96%2049.97%20L102%2049.81%20L108%2049.65%20L114%2049.50%20L120%2049.34%20L126%2049.19%20L132%2049.04%20L138%2048.91%20L144%2048.78%20L150%2048.66%20L156%2048.54%20L162%2048.44%20L168%2048.34%20L174%2048.26%20L180%2048.17%20L186%2048.10%20L192%2048.02%20L198%2047.94%20L204%2047.87%20L210%2047.78%20L216%2047.69%20L222%2047.59%20L228%2047.47%20L234%2047.34%20L240%2047.19%20L246%2047.01%20L252%2046.81%20L258%2046.57%20L264%2046.31%20L270%2046.01%20L276%2045.68%20L282%2045.31%20L288%2044.90%20L294%2044.45%20L300%2043.96%20L306%2043.43%20L312%2042.86%20L318%2042.25%20L324%2041.60%20L330%2040.91%20L336%2040.19%20L342%2039.43%20L348%2038.65%20L354%2037.84%20L360%2037.00%20L366%2036.15%20L372%2035.28%20L378%2034.41%20L384%2033.53%20L390%2032.65%20L396%2031.78%20L402%2030.92%20L408%2030.08%20L414%2029.26%20L420%2028.48%20L426%2027.72%20L432%2027.01%20L438%2026.35%20L444%2025.73%20L450%2025.17%20L456%2024.67%20L462%2024.24%20L468%2023.87%20L474%2023.57%20L480%2023.35%20L486%2023.20%20L492%2023.13%20L498%2023.14%20L504%2023.22%20L510%2023.39%20L516%2023.63%20L522%2023.95%20L528%2024.35%20L534%2024.82%20L540%2025.36%20L546%2025.96%20L552%2026.63%20L558%2027.36%20L564%2028.14%20L570%2028.97%20L576%2029.84%20L582%2030.75%20L588%2031.70%20L594%2032.67%20L600%2033.66%20L606%2034.66%20L612%2035.67%20L618%2036.69%20L624%2037.70%20L630%2038.69%20L636%2039.68%20L642%2040.64%20L648%2041.57%20L654%2042.48%20L660%2043.35%20L666%2044.18%20L672%2044.97%20L678%2045.71%20L684%2046.40%20L690%2047.05%20L696%2047.64%20L702%2048.17%20L708%2048.66%20L714%2049.09%20L720%2049.47%20L720%2060%20Z'/%3E%3C/svg%3E"); }
.litw-wave-bottom-b::after { --litw-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='720'%20height='60'%20viewBox='0%200%20720%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2060%20L0%2038.76%20L6%2038.38%20L12%2038.04%20L18%2037.74%20L24%2037.48%20L30%2037.25%20L36%2037.05%20L42%2036.89%20L48%2036.75%20L54%2036.64%20L60%2036.55%20L66%2036.48%20L72%2036.42%20L78%2036.37%20L84%2036.32%20L90%2036.28%20L96%2036.23%20L102%2036.18%20L108%2036.11%20L114%2036.03%20L120%2035.94%20L126%2035.82%20L132%2035.68%20L138%2035.51%20L144%2035.31%20L150%2035.08%20L156%2034.83%20L162%2034.54%20L168%2034.22%20L174%2033.87%20L180%2033.49%20L186%2033.08%20L192%2032.64%20L198%2032.19%20L204%2031.71%20L210%2031.22%20L216%2030.71%20L222%2030.19%20L228%2029.68%20L234%2029.16%20L240%2028.65%20L246%2028.15%20L252%2027.67%20L258%2027.22%20L264%2026.79%20L270%2026.39%20L276%2026.04%20L282%2025.73%20L288%2025.47%20L294%2025.26%20L300%2025.11%20L306%2025.03%20L312%2025.01%20L318%2025.05%20L324%2025.17%20L330%2025.36%20L336%2025.63%20L342%2025.96%20L348%2026.38%20L354%2026.86%20L360%2027.42%20L366%2028.04%20L372%2028.73%20L378%2029.49%20L384%2030.30%20L390%2031.17%20L396%2032.09%20L402%2033.06%20L408%2034.06%20L414%2035.09%20L420%2036.15%20L426%2037.23%20L432%2038.32%20L438%2039.42%20L444%2040.51%20L450%2041.59%20L456%2042.65%20L462%2043.69%20L468%2044.70%20L474%2045.67%20L480%2046.59%20L486%2047.47%20L492%2048.28%20L498%2049.04%20L504%2049.73%20L510%2050.36%20L516%2050.91%20L522%2051.38%20L528%2051.78%20L534%2052.10%20L540%2052.34%20L546%2052.50%20L552%2052.58%20L558%2052.58%20L564%2052.51%20L570%2052.36%20L576%2052.14%20L582%2051.86%20L588%2051.51%20L594%2051.11%20L600%2050.65%20L606%2050.14%20L612%2049.59%20L618%2049.00%20L624%2048.39%20L630%2047.74%20L636%2047.08%20L642%2046.41%20L648%2045.72%20L654%2045.04%20L660%2044.36%20L666%2043.69%20L672%2043.03%20L678%2042.40%20L684%2041.78%20L690%2041.20%20L696%2040.64%20L702%2040.12%20L708%2039.63%20L714%2039.17%20L720%2038.76%20L720%2060%20Z'/%3E%3C/svg%3E"); }
.litw-wave-top-c::before { --litw-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='720'%20height='60'%20viewBox='0%200%20720%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2060%20L0%2025.55%20L6%2025.63%20L12%2025.72%20L18%2025.82%20L24%2025.92%20L30%2026.03%20L36%2026.13%20L42%2026.22%20L48%2026.31%20L54%2026.40%20L60%2026.47%20L66%2026.53%20L72%2026.58%20L78%2026.62%20L84%2026.64%20L90%2026.66%20L96%2026.67%20L102%2026.68%20L108%2026.68%20L114%2026.67%20L120%2026.67%20L126%2026.67%20L132%2026.67%20L138%2026.69%20L144%2026.72%20L150%2026.77%20L156%2026.83%20L162%2026.93%20L168%2027.05%20L174%2027.20%20L180%2027.38%20L186%2027.61%20L192%2027.87%20L198%2028.18%20L204%2028.54%20L210%2028.94%20L216%2029.39%20L222%2029.89%20L228%2030.44%20L234%2031.04%20L240%2031.69%20L246%2032.39%20L252%2033.14%20L258%2033.93%20L264%2034.76%20L270%2035.63%20L276%2036.54%20L282%2037.47%20L288%2038.44%20L294%2039.42%20L300%2040.42%20L306%2041.43%20L312%2042.45%20L318%2043.46%20L324%2044.47%20L330%2045.46%20L336%2046.42%20L342%2047.36%20L348%2048.27%20L354%2049.14%20L360%2049.95%20L366%2050.72%20L372%2051.43%20L378%2052.07%20L384%2052.65%20L390%2053.15%20L396%2053.58%20L402%2053.93%20L408%2054.19%20L414%2054.37%20L420%2054.46%20L426%2054.47%20L432%2054.39%20L438%2054.22%20L444%2053.97%20L450%2053.63%20L456%2053.20%20L462%2052.70%20L468%2052.13%20L474%2051.48%20L480%2050.76%20L486%2049.98%20L492%2049.14%20L498%2048.25%20L504%2047.32%20L510%2046.34%20L516%2045.34%20L522%2044.30%20L528%2043.25%20L534%2042.18%20L540%2041.11%20L546%2040.04%20L552%2038.97%20L558%2037.92%20L564%2036.89%20L570%2035.88%20L576%2034.90%20L582%2033.96%20L588%2033.05%20L594%2032.19%20L600%2031.38%20L606%2030.61%20L612%2029.90%20L618%2029.24%20L624%2028.63%20L630%2028.08%20L636%2027.59%20L642%2027.15%20L648%2026.76%20L654%2026.43%20L660%2026.15%20L666%2025.92%20L672%2025.74%20L678%2025.60%20L684%2025.50%20L690%2025.44%20L696%2025.41%20L702%2025.41%20L708%2025.43%20L714%2025.48%20L720%2025.55%20L720%2060%20Z'/%3E%3C/svg%3E"); }

/* Hero band: the wrapper around About's hero columns, on the page colour
   since 2026-10-21 (cream before). It holds the sunshine staff below, so
   it is the staff's positioning box. */
.litw-hero-band {
  position: relative;
  padding: 0;
}

.litw-about-hero .litw-voice {
  margin-block: 0;
}

.litw-about-hero > .wp-block-column:not(.litw-about-hero__media) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: flex-start; /* the column's own "vertically centred" setting would win otherwise */
  gap: var(--wp--preset--spacing--40);
}

/* Person: a bio, not a link. Quiet surface, hairline, no shadow, so it
   doesn't read as one of the pressable white cards. */
.wp-block-group.litw-person {
  box-shadow: none;
  border: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
  border-radius: 1rem;
}

/* History on Night: the timeline, dots in gold. An ordered list, so
   reading order is chronological. */
.litw-history {
  color: var(--wp--preset--color--base, #f7f8fa);
}

.litw-history .litw-timeline {
  --litw-tl-line: rgb(247 248 250 / 0.35);
  --litw-tl-dot: var(--wp--preset--color--accent-2, #f2c14e);
  list-style: none;
  margin: var(--wp--preset--spacing--40) 0 0;
  padding: 0 0 0 1.75rem;
  position: relative;
  display: grid;
  gap: var(--wp--preset--spacing--40);
}

.litw-timeline li {
  position: relative;
  margin: 0;
  padding: 0;
}

.litw-timeline li {
  font-size: var(--wp--preset--font-size--medium);
}

.litw-timeline li strong {
  display: block;
  font-family: var(--wp--preset--font-family--literata, serif);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  line-height: 1.2;
}

/* Stacked (and any width under 1100): vertical line on the left. */
.litw-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--litw-tl-line);
}

.litw-timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem + 0px);
  top: 0.4em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--litw-tl-dot);
}

@media (min-width: 1100px) {
  .litw-history .litw-timeline {
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 1.5rem auto;
    column-gap: var(--wp--preset--spacing--40);
    row-gap: 0;
  }

  /* One line, one row of entries beneath it: a dot on the line over each
     entry. (Alternating above and below doubled the height for no gain.) */
  .litw-timeline::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: auto;
    grid-row: 1;
    width: auto;
    height: 2px;
    position: relative;
    grid-column: 1 / -1;
    align-self: center;
  }

  .litw-timeline li {
    grid-row: 2;
  }

  .litw-timeline li:nth-child(1) { grid-column: 1; }
  .litw-timeline li:nth-child(2) { grid-column: 2; }
  .litw-timeline li:nth-child(3) { grid-column: 3; }

  .litw-timeline li::before {
    left: 0;
    top: calc(-0.75rem - 6px);
  }
}

/* The band under the hero is waved straight over it, not over a strip
   of page colour, so it takes no reserved margin. */
.litw-about-hero + .litw-wave-top {
  margin-block-start: 0;
}

/* About hero: copy on the left, a floating blob on the right. The blob is a
   closed shape with its own margin on every side, so no screen edge crops
   the photo at any width. Below 1100px it stacks, photo first. */
/* Since 2026-10-21 the copy starts where Give's title does: the same
   spacing--50 under the header and the same left edge (100%, not 100vw,
   which counts the scrollbar and sat 7px further in). The copy is
   top-aligned, so a taller photo no longer pushes the H1 down. */
.wp-block-columns.litw-about-hero {
  padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
  padding-inline: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
  margin-block: 0;
  align-items: flex-start;
  border-radius: 0; /* theme.json rounds every Columns block 1rem */
}

.litw-about-hero__media {
  display: flex;
  justify-content: flex-end;
}

.litw-about-hero__media .litw-blob-tall {
  margin: 0;
  width: 100%;
  max-width: 28rem;
}

/* Stacked (below 1100px): the photo runs edge to edge under the header and
   only its bottom edge is shaped, one low swell drawn as a fixed-height foot
   under a plain block, so the curve never stretches with the photo. */
@media (max-width: 1099px) {
  .wp-block-columns.litw-about-hero {
    --litw-about-gutter: max(var(--wp--style--root--padding-left), 0px);
    --litw-about-foot: clamp(40px, 9vw, 88px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--50);
    padding-block-start: 0;
    padding-block-end: var(--wp--preset--spacing--50);
    padding-inline: var(--litw-about-gutter);
  }

  .wp-block-columns.litw-about-hero > .litw-about-hero__media {
    order: -1;
    display: block;
    margin-inline: calc(-1 * var(--litw-about-gutter));
    width: calc(100% + 2 * var(--litw-about-gutter));
    max-width: none;
  }

  .litw-about-hero__media .litw-blob-tall {
    width: 100%;
    max-width: none;
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V62C340 62 305 92 235 94C160 96 100 52 0 58Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(#000, #000);
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V62C340 62 305 92 235 94C160 96 100 52 0 58Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(#000, #000);
    -webkit-mask-position: left bottom, left top;
    mask-position: left bottom, left top;
    -webkit-mask-size: 100% var(--litw-about-foot), 100% calc(100% - var(--litw-about-foot) + 1px);
    mask-size: 100% var(--litw-about-foot), 100% calc(100% - var(--litw-about-foot) + 1px);
  }

  .litw-about-hero__media .litw-blob-tall img {
    border-radius: 0;
  }

  .litw-about-hero__media .litw-blob-tall img {
    aspect-ratio: 4 / 3;
    max-height: 32rem;
    object-position: 50% 30%;
  }
}

@media (max-width: 599px) {
  .litw-about-hero__media .litw-blob-tall img {
    aspect-ratio: 1 / 1;
  }
}

/* About hero closer (2026-10-21): a "You Are My Sunshine" staff in Navy,
   centred in the band's bottom padding, above the What We Do wave. Was a
   larger Gold staff straddling the hero / What We Do join, then sat on a
   cream band until the hero moved to the page colour the same day.
   Decorative; hidden in forced-colours mode. */
.litw-hero-band {
  --litw-seam-w: min(320px, 70vw);
  --litw-seam-h: calc(var(--litw-seam-w) * 50 / 210);
  padding-block-end: calc(var(--litw-seam-h) + 28px);
}

.litw-hero-band > .wp-block-columns.litw-about-hero {
  padding-block-end: 0;
}

.litw-hero-band::before {
  content: "";
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: var(--litw-seam-w);
  aspect-ratio: var(--litw-acc-sunshine-ratio);
  translate: -50% 0;
  rotate: -1.5deg;
  background-color: var(--wp--preset--color--accent-3, #2b4a68);
  -webkit-mask: var(--litw-acc-sunshine) center / contain no-repeat;
  mask: var(--litw-acc-sunshine) center / contain no-repeat;
  pointer-events: none;
}

/* Phone: the staff moves up between Vision and Mission, as a divider
   in the copy rather than a closer under the photo. */
@media (max-width: 781px) {
  .litw-hero-band {
    padding-block-end: var(--wp--preset--spacing--40);
  }

  .litw-hero-band::before {
    display: none;
  }

  .litw-hero-band .litw-voice--vision::after {
    content: "";
    display: block;
    width: min(240px, 64vw);
    aspect-ratio: var(--litw-acc-sunshine-ratio);
    margin: var(--wp--preset--spacing--30) auto 0;
    rotate: -1.5deg;
    background-color: var(--wp--preset--color--accent-3, #2b4a68);
    -webkit-mask: var(--litw-acc-sunshine) center / contain no-repeat;
    mask: var(--litw-acc-sunshine) center / contain no-repeat;
  }
}

@media (forced-colors: active) {
  .litw-hero-band::before,
  .litw-hero-band .litw-voice--vision::after {
    display: none;
  }
}

/* Search field focus (2.4.7). In the "button inside" style the visible box
   is the wrapper; core sets `outline: none` on the input inside it
   (wp-includes/blocks/search/style.css), so a keyboard user saw only the
   caret. Ring the wrapper instead. currentColor follows the field's own
   text colour, so the ring reads on both light and navy surfaces. */
.wp-block-search__button-inside .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ==========================================================================
   Media Toolkit (page 122, 2026-10-21)
   Jump links, a "Download all" pill, then three .litw-section groups of
   white .litw-card grids: assets, colour swatches, type specimens.
   Download links are plain <a download> in paragraphs (core/button can't
   save the attribute), styled through the paragraph's class so an edit in
   the editor can't strip it. copy-hex.js adds the swatch Copy buttons.
   ========================================================================== */

.litw-jump-links {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
}

.litw-jump-links li + li::before {
  content: "·";
  content: "·" / "";
  margin-inline: 0.6em;
}

.litw-toolkit-section :is(h2, .litw-asset-card)[id] {
  scroll-margin-top: var(--wp--preset--spacing--40);
}

/* The intro and sections are wide (so the title goes wide with them);
   running text keeps a reading measure. Section rhythm comes from
   .litw-section; the first one sits closer to the intro it continues. */
.litw-toolkit-section > p {
  max-width: 40em;
}

.litw-toolkit-intro + .litw-toolkit-section {
  padding-block-start: var(--wp--preset--spacing--50);
}

/* Back-to-back sections on the same surface: one gap, not two paddings. */
.litw-toolkit-section + .litw-toolkit-section {
  padding-block-start: 0;
}

/* Download pills: the theme's outline button, at 44px. */
.litw-downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
}

.litw-downloads a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--wp--preset--color--accent-3);
  border-radius: 9999px;
  color: var(--wp--preset--color--accent-3);
  font-weight: 600;
  text-decoration: none;
}

.litw-downloads a:hover {
  background-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--accent-1);
}

.litw-downloads a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-3);
  outline-offset: 2px;
}

.litw-download-all a {
  background-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--accent-1);
}

.litw-download-all a:hover {
  background-color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--contrast);
}

.litw-download-all__meta,
.litw-asset-card__meta {
  font-size: var(--wp--preset--font-size--small);
}

/* Card titles are real h3s under the section h2, sized as card labels. */
.litw-asset-card h3,
.litw-type-card h3 {
  font-size: var(--wp--preset--font-size--large);
}

/* Asset previews: one fixed-height tile per card so the rows line up,
   whatever the asset's shape (tall badge, very wide lockup). */
.litw-asset-card__preview {
  display: grid;
  place-items: center;
  height: 12rem;
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--30);
  background-color: var(--litw-quiet-surface);
  border-radius: 0.5rem;
}

.litw-asset-card__preview .wp-block-image {
  margin: 0;
}

.litw-asset-card__preview img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 8.5rem;
}

/* Wordmark and tagline share one em height in their files, so a common
   height cap sets them at the same letter size. */
.litw-asset-card__preview--text img {
  max-height: 5rem;
}

/* The download row takes the leftover height, so the pills line up
   along the bottom of each row of cards. */
.litw-asset-card .litw-downloads {
  margin-top: auto;
}

/* Colour swatches */
.litw-swatch__chip {
  height: 4.5rem;
  border-radius: 0.5rem;
}

.litw-swatch__hex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.litw-swatch__use {
  font-size: var(--wp--preset--font-size--small);
}

/* No side padding: when the button wraps under the hex it stays flush. */
.litw-copy-hex {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--accent-3);
  font: inherit;
  font-family: var(--wp--preset--font-family--open-sans);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.litw-copy-hex:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Type specimens */
.litw-type-card__sample {
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1.1;
}

/* ==========================================================================
   Policy pages: Privacy (3) and Accessibility (319), 2026-10-21
   A wide two-column .litw-policy group: an "On this page" nav that sticks
   beside the text on desktop, and the body as open .litw-policy__section
   groups split by hairlines. Nothing is collapsed, so find-in-page and
   screen readers see every word. The nav comes first in the source, so on
   a phone it is a quiet panel above the text.
   ========================================================================== */

.litw-policy {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  align-items: start;
}

.litw-policy > * {
  margin-block: 0;
}

.litw-policy__toc {
  padding: var(--wp--preset--spacing--30);
  background-color: var(--litw-quiet-surface);
  border: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
  border-radius: 1rem;
}

.litw-policy__toc > * {
  margin-block: 0;
}

/* Same treatment as .litw-eyebrow. */
.litw-policy__toc-label {
  font-family: var(--wp--preset--font-family--open-sans);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-3, #2b4a68);
}

.litw-policy__toc ul {
  columns: 2 15rem;
  column-gap: var(--wp--preset--spacing--40);
  margin-block-start: var(--wp--preset--spacing--20);
  padding-left: 0;
  list-style: none;
}

.litw-policy__toc li {
  break-inside: avoid;
  padding-block: 0.3rem;
  line-height: 1.4;
}

.litw-policy__toc a {
  text-decoration: none;
}

.litw-policy__toc a:hover {
  text-decoration: underline;
}

/* Desktop: the nav becomes a plain rail beside the text and stays in view.
   It scrolls on its own if the list ever outgrows a short window. The
   header doesn't stick, so the offset is only breathing room. */
@media (min-width: 960px) {
  .litw-policy {
    grid-template-columns: 15rem minmax(0, 46rem);
    column-gap: var(--wp--preset--spacing--60);
  }

  .litw-policy__toc {
    position: sticky;
    top: var(--wp--preset--spacing--40);
    max-height: calc(100vh - 2 * var(--wp--preset--spacing--40));
    overflow-y: auto;
    padding: 0 0 0 var(--wp--preset--spacing--30);
    background: none;
    border: 0;
    border-inline-start: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
    border-radius: 0;
  }

  .litw-policy__toc ul {
    columns: auto;
  }
}

.litw-policy__body > * {
  margin-block: 0;
}

.litw-policy__meta {
  color: var(--wp--preset--color--accent-3, #2b4a68);
}

.litw-policy__body > .litw-lede,
.litw-policy__body > .litw-policy__meta {
  margin-block-end: var(--wp--preset--spacing--30);
}

.litw-policy__section {
  padding-block: var(--wp--preset--spacing--40);
  border-block-start: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
}

.litw-policy__body > .litw-policy__section:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.litw-policy__section > :first-child {
  margin-block-start: 0;
}

.litw-policy__section > :last-child {
  margin-block-end: 0;
}

.litw-policy__section h2[id] {
  scroll-margin-top: var(--wp--preset--spacing--40);
}

/* Third-party services (Privacy only): one quiet panel, the same surface
   as the phone contents box, so it groups the six without drawing the eye. */
.litw-service-list {
  margin-block: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30);
  background-color: var(--litw-quiet-surface);
  border: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
  border-radius: 1rem;
}

.litw-service-list ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.litw-service-list li + li {
  margin-block-start: var(--wp--preset--spacing--20);
  padding-block-start: var(--wp--preset--spacing--20);
  border-block-start: 1px solid var(--wp--preset--color--accent-6, #e2e5e9);
}


/* Gentle waves (2026-10-21, trial on the homepage): five shapes about half
   the height of the original set, each drawn once across the full width.
   A page never uses the same shape twice, so no two neighbours match and
   nothing runs A-B-A-B. Use with .litw-wave-top. */
:root {
  --litw-gentle-wave-h: clamp(28px, 4vw, 56px);
  --litw-section-space: clamp(40px, 5vw, 72px);
}

.litw-wave-top:is(.litw-wave--swell, .litw-wave--crest, .litw-wave--lean, .litw-wave--ripple, .litw-wave--dip) {
  --litw-wave-h: var(--litw-gentle-wave-h);
}

/* Section space (2026-10-21): every gentle-waved section reads as
   vertically centred. The space above its content and below it is the same
   --litw-section-space, measured from the wave's midline. The wave hangs
   above the section's top edge, so its top padding gives back half the
   wave. The section above gives the strip room in its bottom padding: half
   of it on the page colour (the strip's other half sits in the reserved
   margin), all of it when coloured (flush, no margin). Sections using this
   carry no padding of their own in the block settings. */
.litw-wave-top:is(.litw-wave--swell, .litw-wave--crest, .litw-wave--lean, .litw-wave--ripple, .litw-wave--dip) {
  padding-block: calc(var(--litw-section-space) - var(--litw-gentle-wave-h) * .5) var(--litw-section-space);
}

:is(.alignfull, .alignwide):has(+ .litw-wave-top:is(.litw-wave--swell, .litw-wave--crest, .litw-wave--lean, .litw-wave--ripple, .litw-wave--dip)) {
  padding-block-end: var(--litw-section-space);
}

.alignfull.has-background:has(+ .litw-wave-top:is(.litw-wave--swell, .litw-wave--crest, .litw-wave--lean, .litw-wave--ripple, .litw-wave--dip)) {
  padding-block-end: calc(var(--litw-section-space) + var(--litw-gentle-wave-h) * .5);
}

/* Old per-section margins (FAQ, ways, bring) would open a strip of page
   colour between two bands. */
.alignfull.has-background:has(+ .litw-wave-top) {
  margin-block-end: 0;
}

.litw-wave-top:is(.litw-wave--swell, .litw-wave--crest, .litw-wave--lean, .litw-wave--ripple, .litw-wave--dip)::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.litw-wave-top.litw-wave--swell { --litw-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='60' viewBox='0 0 720 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 34.0 L20 32.8 L40 31.6 L60 30.4 L80 29.2 L100 28.1 L120 27.0 L140 26.0 L160 25.0 L180 24.1 L200 23.3 L220 22.5 L240 21.9 L260 21.3 L280 20.8 L300 20.5 L320 20.2 L340 20.1 L360 20.0 L380 20.1 L400 20.2 L420 20.5 L440 20.8 L460 21.3 L480 21.9 L500 22.5 L520 23.3 L540 24.1 L560 25.0 L580 26.0 L600 27.0 L620 28.1 L640 29.2 L660 30.4 L680 31.6 L700 32.8 L720 34.0 L720 60Z'/%3E%3C/svg%3E"); }
.litw-wave-top.litw-wave--crest { --litw-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='60' viewBox='0 0 720 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 34.3 L20 33.6 L40 32.6 L60 31.4 L80 30.1 L100 28.5 L120 26.8 L140 25.1 L160 23.4 L180 22.0 L200 20.9 L220 20.2 L240 20.0 L260 20.3 L280 21.1 L300 22.3 L320 23.8 L340 25.5 L360 27.2 L380 28.9 L400 30.4 L420 31.8 L440 32.9 L460 33.8 L480 34.5 L500 35.0 L520 35.3 L540 35.6 L560 35.7 L580 35.9 L600 35.9 L620 36.0 L640 36.0 L660 36.0 L680 36.0 L700 36.0 L720 36.0 L720 60Z'/%3E%3C/svg%3E"); }
.litw-wave-top.litw-wave--lean { --litw-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='60' viewBox='0 0 720 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 38.0 L20 37.1 L40 36.2 L60 35.3 L80 34.5 L100 33.8 L120 33.1 L140 32.5 L160 31.9 L180 31.5 L200 31.2 L220 30.9 L240 30.7 L260 30.6 L280 30.6 L300 30.7 L320 30.8 L340 30.9 L360 31.0 L380 31.1 L400 31.2 L420 31.3 L440 31.4 L460 31.4 L480 31.3 L500 31.1 L520 30.8 L540 30.5 L560 30.1 L580 29.5 L600 28.9 L620 28.2 L640 27.5 L660 26.7 L680 25.8 L700 24.9 L720 24.0 L720 60Z'/%3E%3C/svg%3E"); }
.litw-wave-top.litw-wave--ripple { --litw-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='60' viewBox='0 0 720 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 31.3 L20 29.5 L40 27.9 L60 26.4 L80 25.1 L100 24.0 L120 23.2 L140 22.7 L160 22.5 L180 22.6 L200 22.9 L220 23.6 L240 24.4 L260 25.5 L280 26.8 L300 28.1 L320 29.6 L340 31.1 L360 32.7 L380 34.1 L400 35.5 L420 36.7 L440 37.8 L460 38.7 L480 39.3 L500 39.7 L520 39.9 L540 39.8 L560 39.4 L580 38.9 L600 38.1 L620 37.2 L640 36.1 L660 35.0 L680 33.7 L700 32.5 L720 31.3 L720 60Z'/%3E%3C/svg%3E"); }
.litw-wave-top.litw-wave--dip { --litw-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='60' viewBox='0 0 720 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 22.0 L20 22.0 L40 22.1 L60 22.1 L80 22.2 L100 22.3 L120 22.4 L140 22.7 L160 23.0 L180 23.3 L200 23.8 L220 24.5 L240 25.2 L260 26.1 L280 27.1 L300 28.2 L320 29.3 L340 30.5 L360 31.5 L380 32.5 L400 33.2 L420 33.7 L440 34.0 L460 33.9 L480 33.6 L500 33.0 L520 32.2 L540 31.2 L560 30.1 L580 28.9 L600 27.8 L620 26.7 L640 25.8 L660 24.9 L680 24.2 L700 23.6 L720 23.2 L720 60Z'/%3E%3C/svg%3E"); }

/* Footer (2026-10-21): a straight edge with the header's shadow turned
   upside down. Waves are for dividers between sections only. Positioned
   and raised, or a waved (positioned) section above paints over the shadow. */
.litw-footer {
  position: relative;
  z-index: 1;
  box-shadow: 0 -6px 16px -8px rgb(25 25 25 / 0.4);
}

/* A full-width band whose content runs at the wide width with the old
   left-aligned flow (Partner's sections, 2026-10-21). A constrained layout
   would centre every narrower child, so the band uses the default layout
   and pads itself to the wide edge. Its % padding resolves against the
   post content, which is already inset by the root padding, so that is
   added back. */
.litw-band-wide {
  padding-inline: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--wp--style--root--padding-left)));
}

/* A waved band that opens the page content (Videos, 2026-10-21) sits
   under the template's title, which gives the strip no room; the band
   reserves it in its own top margin. */
.wp-block-post-content > .litw-wave-top:first-child {
  margin-block-start: calc(var(--litw-wave-h) + var(--wp--preset--spacing--30));
}

/* ==========================================================================
   In the News (2026-10-22)
   One list of white .litw-card rows, newest first; the year lives on each
   item instead of in year headings. The headline link is the only anchor in
   a row and its ::after stretches over the card (same technique as
   .litw-clickable-card, which keys on .wp-block-post-title and so can't be
   reused for a plain heading). The list is a 3-column grid like the story
   cards (same 18rem minimum and spacing--50 gap); outlet and date sit above
   the headline.
   ========================================================================== */
.litw-news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--wp--preset--spacing--50);
  margin-block-start: var(--wp--preset--spacing--40);
}

/* The group's flow layout adds a sibling margin on top of the grid gap. */
.litw-news-list > .litw-news-card {
  margin-block: 0;
}

.litw-news-card {
  position: relative;
  gap: var(--wp--preset--spacing--10);
}

.litw-news-card__meta {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.4;
}

.litw-news-card__meta strong,
.litw-news-card__meta time {
  display: block;
}

.litw-news-card__meta strong {
  color: var(--wp--preset--color--accent-3, #2b4a68);
}

.litw-news-card__meta time {
  color: var(--wp--preset--color--accent-4, #34302b);
}

.litw-news-card__title {
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.3;
  text-wrap: balance;
}

.litw-news-card__title a {
  text-decoration: none;
}

.litw-news-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.litw-news-card:hover .litw-news-card__title a,
.litw-news-card:has(:focus-visible) .litw-news-card__title a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 2px !important;
}

.litw-news-card:has(:focus-visible) {
  outline: 2px solid var(--wp--preset--color--accent-3, #2b4a68);
  outline-offset: 3px;
}

.litw-news-card__title a:focus-visible {
  outline: none;
}

.litw-news > .litw-lede {
  margin-inline: 0;
}