* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --base-multiple: 10px;
}

html {
  font-size: var(--base-multiple);
}

body {
  font-family: sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
}

.pub-authors { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.pub-author { display: inline-flex; align-items: center; gap: 8px; }
.pub-author-avatar { width: 32px; height: 32px; border-radius: 999px !important; object-fit: cover; }
.pub-author-name { font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: white;}
.pub-author:hover .pub-author-name { color: #a9a7a7 !important; }

.switch-svg:hover .switch-to-black-hover {
    background-color: black !important;
}

.switch-svg:hover .switch-to-black-hover svg path {
    stroke: white;
}

.switch-to-black-hover {
    max-height: 56px;
    max-width: 56px;
}

.float {
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes float {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(4px, -6px) rotate(0.4deg); }
  50%  { transform: translate(-3px, -3px) rotate(-0.3deg); }
  75%  { transform: translate(-5px, 4px) rotate(0.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .float { animation: none; }
}

ul {
  margin-left: 1.3em;
  list-style-position: outside;
}
ul ul {
  margin-left: 0.5em;
}
ul li {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

a {
  color: inherit;
}

/* Disable format width SVG with link */
.elementor-widget-image a img[src$=".svg"] {
  width: inherit !important;
}

.zoom-on-hover div {
    overflow: hidden;
}

.zoom-on-hover img {
  width: 100%;
  height: 100%;
  transition: all .3s ease;
}

.zoom-on-hover:hover img {
  transform: scale(1.05);
}


/* Filter UI */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.filter-group label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: "Styrene B";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-transform: uppercase;
    color: #000;
}

.filter-group input[type="radio"],
.filter-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid #000;
    background-color: transparent;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.filter-group input[type="radio"] { border-radius: 50%; }
.filter-group input[type="checkbox"] { border-radius: 50%; }
.filter-group input:checked { background-color: #000; }

.filter-group input:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Loop results */
.filter-marker { display: none !important; }

.filtered-loop-results {
    display: grid;
    grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
    gap: var(--grid-gap, 24px);
    transition: opacity 0.2s;
}

.filtered-loop-results.is-loading {
    opacity: 0.5;
    pointer-events: none;
}
.filter-loading,
.filter-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #666;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 .5em;
}

.pagination-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}
.pagination-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: transparent 0px solid;
    background: transparent;
    cursor: pointer;
    font-family: "Styrene A";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    color: #717171;
}
.pagination-buttons button.active {
    color: #E0626C;
}

/* Prev/next arrow button styling */
.pagination-buttons button.pagination-prev,
.pagination-buttons button.pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0; /* hide numeric text if any */
    color: #717171;
}
.pagination-buttons button.pagination-prev svg,
.pagination-buttons button.pagination-next svg {
    width: 24px;
    height: 24px;
    display: block;
}
.pagination-buttons button[disabled] {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* Align ellipsis to the bottom of the pagination row */
.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 .25em 6px;
    align-self: flex-end;
    line-height: 1;
    color: #717171;
}

@media (max-width: 1024px) {
    .filtered-loop-results {
        grid-template-columns: repeat(var(--cols-tablet, 2), 1fr);
    }
}

@media (max-width: 600px) {
    .filtered-loop-results {
        grid-template-columns: repeat(var(--cols-mobile, 1), 1fr);
    }
}

.filter-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    font-family: "Styrene B";
    font-size: 12px;
    font-weight: 400;
    line-height: 110%;
    text-transform: uppercase;
    color: #000;

    background-color: transparent;
    border: 1.5px solid #000;
    border-radius: 0;
    padding: 8px 32px 8px 12px;
    cursor: pointer;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 7px;

    width: 100%;
    max-width: 280px;
}

.filter-group select:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.filter-group select::-ms-expand {
    display: none;
}

.filter-group select option {
    font-family: sans-serif; /* native list usually ignores custom fonts anyway */
    color: #000;
    background: #fff;
}

.filter-group.is-conditional-hidden { display: none; }

/* Knack form */

:is(#knack-dist_14, #knack-dist_15) {
    font-family: "Styrene B", sans-serif;
    color: #000;
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px 64px;
    background-color: #fff;
    border-radius: 14px;
}

/* ---------- Title ---------- */
:is(#knack-dist_14, #knack-dist_15) .kn-title {
    font-family: "Styrene A", sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 110%;
    color: #000;
    margin: 0 0 40px;
}

/* ---------- Two-column grid for field pairs ---------- */
:is(#knack-dist_14, #knack-dist_15) .kn-form-group.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 36px;
}

:is(#knack-dist_14, #knack-dist_15) .kn-form-col,
:is(#knack-dist_14, #knack-dist_15) li.kn-form-col {
    display: contents; /* let children participate in the grid directly */
}

:is(#knack-dist_14, #knack-dist_15) .kn-input {
    margin: 0;
}

/* Full-width fields (membership fee, mailing subs, topics, cities, divider) */
:is(#knack-dist_14, #knack-dist_15) #kn-input-field_101,            /* Membership Fee */
:is(#knack-dist_14, #knack-dist_15) #kn-input-field_100,            /* Mailing Subs */
:is(#knack-dist_14, #knack-dist_15) #kn-input-field_63,
:is(#knack-dist_14, #knack-dist_15) #kn-input-field_99,             /* Update me on */
:is(#knack-dist_14, #knack-dist_15) #kn-input-field_98,             /* Cities of Interest */
:is(#knack-dist_14, #knack-dist_15) .kn-input-divider {
    grid-column: 1 / -1;
}

/* ---------- Labels ---------- */
:is(#knack-dist_14, #knack-dist_15) .kn-label {
    font-family: "Styrene B", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 10px;
    display: block;
}

/* Hide the red asterisks — clean look like the mockup */
:is(#knack-dist_14, #knack-dist_15) .kn-required {
    display: none;
}

/* ---------- Instructions (italic gray helper text) ---------- */
:is(#knack-dist_14, #knack-dist_15) .kn-instructions {
    font-family: "Styrene B", sans-serif;
    font-style: italic;
    font-size: 16px;
    line-height: 120%;
    font-weight: 300;
    color: #717171;
    margin-top: 26px;
    margin-left: 0px;
    width: 100%;
    grid-column: 1 / -1;
    .before {
        display: none;
    }
}
:is(#knack-dist_14, #knack-dist_15) .kn-instructions::before {
    display: none;
}

/* ---------- Text / email / password inputs ---------- */
:is(#knack-dist_14, #knack-dist_15) input.input,
:is(#knack-dist_14, #knack-dist_15) input[type="text"],
:is(#knack-dist_14, #knack-dist_15) input[type="email"],
:is(#knack-dist_14, #knack-dist_15) input[type="password"] {
    font-family: "Styrene B", sans-serif;
    font-size: 14px;
    color: #000;

    background-color: #f2f2f2 !important;
    border: none !important;
    border-radius: 4px !important;

    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    height: auto !important;
    min-height: 0 !important;

    width: 100%;
    box-shadow: none !important;
}

:is(#knack-dist_14, #knack-dist_15) input.input::placeholder {
    color: #9a9a9a;
    text-transform: none;
}

:is(#knack-dist_14, #knack-dist_15) input:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* First/Last name and the two password fields sit side by side */
:is(#knack-dist_14, #knack-dist_15) .control.is-grouped {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
:is(#knack-dist_14, #knack-dist_15) .control.is-grouped > .control {
    width: 100%;
}

/* ---------- Selects ---------- */
:is(#knack-dist_14, #knack-dist_15) .kn-select select,
:is(#knack-dist_14, #knack-dist_15) select.select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    font-family: "Styrene B", sans-serif;
    font-size: 14px;
    color: #000;
    text-transform: none;

    background-color: #f2f2f2 !important;
    border: none !important;
    border-radius: 4px !important;

    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 14px !important;
    padding-right: 36px !important;
    height: auto !important;
    min-height: 0 !important;

    cursor: pointer;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 7px;

    width: 100%;
    max-width: none;
}

:is(#knack-dist_14, #knack-dist_15) .kn-select,
:is(#knack-dist_14, #knack-dist_15) .select {
    height: auto !important;
    width: 100%;
}

:is(#knack-dist_14, #knack-dist_15) select:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

:is(#knack-dist_14, #knack-dist_15) select::-ms-expand {
    display: none;
}

:is(#knack-dist_14, #knack-dist_15) select option {
    font-family: sans-serif;
    color: #000;
    background: #fff;
    text-transform: none;
}

/* ---------- Checkbox groups ---------- */
:is(#knack-dist_14, #knack-dist_15) .kn-checkbox {
    margin-top: 4px;
}

/* Two-column layout for the "Update me on..." and Cities lists */
:is(#knack-dist_14, #knack-dist_15) #kn-input-field_99 .kn-checkbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 6px;
}

:is(#knack-dist_14, #knack-dist_15) #kn-input-field_63 > .control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

:is(#knack-dist_14, #knack-dist_15) #kn-input-field_63 > .control > .control {
    width: 100%;
}

:is(#knack-dist_14, #knack-dist_15) #kn-input-field_98 .kn-checkbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 6px;
}

:is(#knack-dist_14, #knack-dist_15) .kn-checkbox .control {
    margin: 0;
    width: 100%;
}


:is(#knack-dist_14, #knack-dist_15) .kn-checkbox .option.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Styrene B", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
    padding: 4px 0;
}

:is(#knack-dist_14, #knack-dist_15) input[type="checkbox"],
:is(#knack-dist_14, #knack-dist_15) input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border: 1.5px solid #9a9a9a;
    background-color: transparent;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

:is(#knack-dist_14, #knack-dist_15) input[type="checkbox"]:checked,
:is(#knack-dist_14, #knack-dist_15) input[type="radio"]:checked {
    background-color: #000;
    border-color: #000;
}

:is(#knack-dist_14, #knack-dist_15) input[type="checkbox"]:focus-visible,
:is(#knack-dist_14, #knack-dist_15) input[type="radio"]:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ---------- Divider ---------- */
:is(#knack-dist_14, #knack-dist_15) .kn-input-divider hr {
    border: none;
    margin: 8px 0;
}

/* ---------- Submit button ---------- */
:is(#knack-dist_14, #knack-dist_15) .kn-submit {
    margin-top: 48px;
    display: flex;
    justify-content: flex-end;
}

:is(#knack-dist_14, #knack-dist_15) .kn-button,
:is(#knack-dist_14, #knack-dist_15) .kn-button.is-primary {
    font-family: "Styrene B", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 110%;
    text-transform: uppercase;
    color: #000;

    background: transparent !important;
    border: 1px solid #000 !important;
    border-radius: 4px !important;

    padding-top: 14px !important;
    padding-bottom: 14px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    height: auto !important;
    width: auto !important;

    cursor: pointer;
    box-shadow: none !important;
    display: inline-block;
}

:is(#knack-dist_14, #knack-dist_15) .kn-button:hover,
:is(#knack-dist_14, #knack-dist_15) .kn-button.is-primary:hover {
    background: #000 !important;
    color: #fff !important;
}

:is(#knack-dist_14, #knack-dist_15) .kn-button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ---------- Success / error messages ---------- */
:is(#knack-dist_14, #knack-dist_15) .kn-message.success {
    border: 1px solid #000;
    padding: 16px;
    border-radius: 4px;
    font-family: "Styrene B", sans-serif;
    color: #000;
    background: transparent;
}

:is(#knack-dist_14, #knack-dist_15) .kn-message.error {
    border: 1px solid #E0626C;
    padding: 16px;
    border-radius: 4px;
    font-family: "Styrene B", sans-serif;
    color: #E0626C;
    background: transparent;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    :is(#knack-dist_14, #knack-dist_15) {
        padding: 32px 20px;
    }
    :is(#knack-dist_14, #knack-dist_15) .kn-form-group.columns {
        grid-template-columns: 1fr;
    }
    :is(#knack-dist_14, #knack-dist_15) .control.is-grouped {
        grid-template-columns: 1fr;
    }
    :is(#knack-dist_14, #knack-dist_15) #kn-input-field_99 .kn-checkbox {
        grid-template-columns: 1fr 1fr;
    }
    :is(#knack-dist_14, #knack-dist_15) #kn-input-field_98 .kn-checkbox {
        grid-template-columns: 1fr;
    }
    :is(#knack-dist_14, #knack-dist_15) .kn-submit {
        justify-content: center;
    }
}

.theme-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.theme-tag {
    color: black;
    font-size: 12px;
    font-family: "Styrene B", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid currentColor;
    border-color: #F9959D;
    border-radius: 999px;
    padding: 10px 16px;
    text-decoration: none;
    line-height: 1.4;
    transition: background-color .15s ease, color .15s ease;
}
.theme-tag:hover {
    background-color: currentColor;
}

.theme-tag:hover a {
    color: #fff;
}  /* if you wrap text in a span */
.theme-tag:hover {
    /* set your hover text color here */
    background-color: #F9959D;
    color: black;
}