/* ============================================================================
   COMPONENT: homepage content widgets (A4) - SKIN tier - from site-wikioo-V2.0.css, original order
   Migrated 2026-07-06. Every rule whose selector targets a widget-exclusive
   class (widget-*, adc-artcard*, oua-artcard, exa-widget-grid, swiper_class,
   w-img-fill) - these classes render only in templates/includes/widgets/*
   and on the 8 homepage templates. Structure tier = static/css/widgets-base.css
   (pre-existing, base-linked x8). PHASE-A FIDELITY: verbatim relocation;
   tokenization is a recorded follow-up. Do not edit without a harness diff.
   ========================================================================= */

/* I1 @layer reconciliation (2026-07-09): our own low-specificity global tag
   selectors — `p{font-size:16px}` (core-V2.1.css) and `H1,H2,H3{font-size:
   29px;line-height:38px}` (base-wikioo-V2.1.css) — now unconditionally beat
   Bootstrap's higher-specificity but layered `.small`/`.h3`/`.h4` typography
   classes, which several widget titles/captions rely on for sizing (only
   some — most widget titles already carry their own dedicated font-size and
   are unaffected either way). The homepage widget rail also rotates content
   per request, so a fix pinned to one specific widget's class would
   silently miss the same fight on whichever widget rotates into view next.
   Same technique as homepage-content-widgets--allpaintingsstore.css: see
   that file for the full rationale on why `:where()` scoping + tie-by-
   source-order (not `!important`/`unset`) is what actually works here. */
:where(.homepage-site-widgets) .small {
  font-size: 0.875em;
}
:where(.homepage-site-widgets) .h3 {
  font-size: 1.75rem;
  line-height: 1.2;
}
:where(.homepage-site-widgets) .h4 {
  font-size: 1.5rem;
  line-height: 1.2;
}

.widget-famous-artwork-day__link img,.widget-museum-4p__cell a img,.widget-museum-4p__museum-img img,.widget-small-translated-field a img {
    transition: filter 0.6s ease, transform 0.6s ease, opacity 0.6s ease;
}

.widget-famous-artwork-day__link:hover img,.widget-museum-4p__cell a:hover img,.widget-museum-4p__museum-img:hover img,.widget-small-translated-field a:hover img {
    filter: contrast(1.5) saturate(0.05) brightness(1.05);
    transform: scale(0.95);
    opacity: 0.8;
}

.widget-famous-artwork-day__figure,.widget-museum-4p__cell,.widget-museum-4p__museum-img {
    background: #000;
}

.widget-famous-artwork-day__link:hover,.widget-museum-4p__cell > a:hover,.widget-small-translated-field a:hover {
    padding: 0 !important;
}

.wikioo-main-content .widget-famous-artwork-day__heading,.wikioo-main-content .widget-stf-wikioo__title,.wikioo-main-content .widget-stf-wikioo__title .widget-museum-4p__title-line2 {
    font-family: var(--font-title);
    font-size: var(--wk-widget-title-size);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink, #1c1c1c);
    text-transform: none;
    text-align: center;
    margin-top: 0;
}

.wikioo-main-content .widget-stf-wikioo__title {
    text-align: left;
    font-weight: 400;
}

.wikioo-main-content .widget-stf-wikioo__title .widget-museum-4p__title-line2 {
    text-align: left;
    font-weight: 400;
}
/* In `@layer important-pins` (declared before Bootstrap's `vendor` layer in
   vendor-layers.css): these titles also carry Bootstrap's `.mb-2` utility,
   which is itself `!important` — per the @layer + `!important` reversal
   rule, an unlayered `!important` can no longer beat it on specificity
   alone once Bootstrap is layered. Order preserved (group rule, then the
   more specific line2 override) so the internal tie between the two still
   resolves the same way it did before Bootstrap was layered. */
@layer important-pins {
  .wikioo-main-content .widget-famous-artwork-day__heading,.wikioo-main-content .widget-stf-wikioo__title,.wikioo-main-content .widget-stf-wikioo__title .widget-museum-4p__title-line2 {
    margin-bottom: 0.875rem !important;
  }
  .wikioo-main-content .widget-stf-wikioo__title .widget-museum-4p__title-line2 {
    margin-bottom: 0 !important;
  }
}

.wikioo-main-content .widget-stf-wikioo__label {
    font-family: var(--font-title);
    font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    color: var(--ink, #1c1c1c);
    background: transparent;
    padding: 0.4rem 0.35rem 0;
    position: static;
    pointer-events: auto;
    z-index: auto;
    text-shadow: none;
}

.homepage-site-widgets .widget-small-translated-field {
    background: var(--g0);
    border: 1px solid var(--g400);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    padding: var(--sp-4);
    transition: box-shadow .2s;
}

.widget-stf-wikioo__cell {
    min-width: 0;
}

.widget-stf-wikioo__link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.widget-stf-wikioo__link:hover {
    padding: 0 !important;
}

.homepage-site-widgets .widget-small-translated-field .widget-small-translated-field__media {
    flex: 1 1 auto;
    min-height: 0;
}

.homepage-site-widgets .widget-small-translated-field:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

.widget-famous-artwork-day {
    background: var(--g0);
    border: 1px solid var(--g400);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    padding: var(--sp-4);
    transition: box-shadow .2s;
}

.widget-famous-artwork-day:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

.widget-famous-artwork-day__heading {
    font-family: var(--font-title);
    font-size: var(--wk-widget-title-size);
    font-weight: 600;
    color: var(--ink, #1c1c1c);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 0.875rem;
    text-align: center;
}

.widget-famous-artwork-day__figure {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0 !important; /* keep-important: de-escalation triage 2026-07-07 -- beats Bootstrap .rounded-3/.border utility or base-wikioo a:has(>img) reset (un-de-escalated) */
    background: rgba(0, 0, 0, 0.06);
}

.widget-famous-artwork-day__figure img,.widget-famous-artwork-day__link img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
    vertical-align: middle;
}

.widget-famous-artwork-day__meta {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--g1100) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats a generic catch-all rule earlier in this same file (measured regression when unasserted) */
    font-size: 0.857rem !important; /* keep-important: de-escalation triage 2026-07-07 -- beats a generic catch-all rule earlier in this same file (measured regression when unasserted) */
}

.widget-museum-4p__museum-img {
    border-radius: 0;
}

.widget-museum-4p__cell {
    border-radius: 0;
}

.widget-museum-4p__museum-img,.widget-museum-4p__cell {
    padding: 0.35rem;
    min-width: 0;
    box-sizing: border-box;
}

.widget-museum-4p__museum-img > a,.widget-museum-4p__cell > a {
    position: relative;
    display: block;
    overflow: hidden;
    min-width: 0;
}

.widget-museum-4p__museum-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
    display: block;
}

.widget-museum-4p__cell img {
    /* Override global .w-img-fill (position:absolute; inset:0), which is meant
       for a ratio-box parent. Here the <a> has no intrinsic height, so an absolute
       image collapses the anchor (overflow:hidden) and the black cell shows through.
       Returning the image to normal flow lets aspect-ratio size the anchor. */
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    display: block;
}

.widget-museum-4p__museum-img-placeholder {
    aspect-ratio: 3 / 4;
    min-height: 10rem;
}

.widget-museum-4p__art-grid {
    min-width: 0;
}

@media (max-width: 767.98px) {
  .widget-museum-4p__museum-img,.widget-museum-4p__cell {
        padding: 0.4rem;
    }

  .widget-museum-4p__museum-img img {
        max-height: 18rem;
    }

}
@media (min-width: 768px) {
  .widget-museum-4p__museum-img,.widget-museum-4p__cell {
        padding: 0.45rem;
    }

  .widget-museum-4p__museum-img {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

  .widget-museum-4p__museum-img > a {
        flex: 1 1 auto;
        min-height: 0;
    }

  .widget-museum-4p__museum-img img {
        height: 100%;
        max-height: 22rem;
    }

  .widget-museum-4p__art-grid {
        max-height: 22rem;
    }

}
@media (min-width: 992px) {
  .widget-museum-4p__museum-img img,.widget-museum-4p__art-grid {
        max-height: 24rem;
    }

}
.widget-quiz-artist__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.widget-curated-choice__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.widget-small-translated-field__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

.widget-small-translated-field__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
}

.widget-famous-artwork-day {
    max-width: 42rem;
    margin-inline: auto;
}

.widget-famous-artwork-day__link {
    position: relative;
    display: block;
    color: inherit;
}

.widget-famous-artwork-day__overlay-line {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.widget-museum-4p__title-line { color: #111; }

.widget-museum-4__label,.widget-museum-6h__label,.widget-museum-single__caption,.widget-artist-spotlight__art-title,.widget-pop10__art-title,.widget-famous10__art-title {
  font-family: var(--font-title, inherit);
  font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: none;
  font-style: normal;
  font-synthesis: none;
}

.wikioo-main-content .widget-stf-wikioo__label {
  font-family: var(--font-title);
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--ink, #1c1c1c);
  background: transparent;
  padding: 0.4rem 0.35rem 0;
  position: static;
}

/* ── A4 second pass (2026-07-06): widget ROOT-class rules (roots are set on the
   homepage markup, so they escaped the widget-exclusive census) ── */

.widget-mpl__tile img,.widget-curated-choice__tile img,.widget-artist-otd5__media img,.widget-artist-otd5__art a img,.widget-article-kw__cell a img,.widget-quiz-artist__img-inner img {
    transition: filter 0.6s ease, transform 0.6s ease, opacity 0.6s ease;
}

.widget-mpl__tile:hover img,.widget-curated-choice__tile:hover img,.widget-artist-otd5__media:hover img,.widget-artist-otd5__art a:hover img,.widget-article-kw__cell a:hover img,.widget-quiz-artist__img-inner:hover img {
    filter: contrast(1.5) saturate(0.05) brightness(1.05);
    transform: scale(0.95);
    opacity: 0.8;
}

.widget-mpl__tile,.widget-curated-choice__tile,.widget-artist-otd5__media,.widget-artist-otd5__art,.widget-quiz-artist__img-inner {
    background: #000;
}

.widget-mpl__tile:hover,.widget-curated-choice__tile:hover,.widget-artist-otd5__media:hover,.widget-artist-otd5__art > a:hover,.widget-article-kw__cell a:hover,.widget-quiz-artist__img-inner:hover {
    padding: 0 !important;
}

.widget-curated-choice__cta:hover,.widget-mpl__cta:hover {
    padding: 1.1rem 1.25rem;
}

.widget-museum-4p__cta:hover {
    padding: 0.75rem 1.2rem;
}

@media (min-width: 768px) {
  .widget-curated-choice__cta:hover,.widget-mpl__cta:hover {
        padding: 1rem 1.15rem;
    }

  .widget-museum-4p__cta:hover {
        padding: 0.85rem 1.35rem;
    }

}
.widget-mpl {
    --mpl-bg:      var(--g0);
    --mpl-border:  var(--g400);
    --mpl-accent:  var(--g1500);

    background:  var(--g0);
    box-shadow:  0 1px 4px rgba(0,0,0,.07);
    transition:  box-shadow .2s;
}
/* In `@layer important-pins` (declared before Bootstrap's `vendor` layer in
   vendor-layers.css): fights Bootstrap's `.border` utility, which is itself
   `!important` — per the @layer + `!important` reversal rule, an unlayered
   `!important` can no longer beat it on specificity alone once Bootstrap is
   layered. */
@layer important-pins {
  .widget-mpl {
    border: 1px solid var(--g400) !important;
  }
}

.widget-mpl:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
}

.widget-mpl__info {
    background: var(--g0);
    padding: var(--sp-4) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats a generic catch-all rule earlier in this same file (measured regression when unasserted) */
}

.widget-mpl__info h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--g1500);
    line-height: 1.3;
}

.widget-mpl__info p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.857rem;
    color: var(--g1100);
}

.widget-mpl__group-col {
    background: var(--g0);
    border-color: var(--g400);
}

.widget-mpl__tile {
    background: var(--g200);
    padding: 2px !important; /* keep-important: de-escalation triage 2026-07-07 -- beats Bootstrap .rounded-3/.border utility or base-wikioo a:has(>img) reset (un-de-escalated) */
}

.widget-mpl__caption {
    border-top: 1px solid var(--g400);
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--g800);
    padding: 9px 12px;
    text-align: left;
}

.widget-mpl__caption a {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 8px;
    color: var(--g1500);
    text-decoration: none;
    display: block;
    transition: background .12s;
}

.widget-mpl__caption a:hover {
    background: var(--g100) !important;
    color: var(--g1500) !important;
    text-decoration: none !important;
}

.widget-mpl__cta {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--g1500);
    color: var(--g1500);
    background: transparent;
    padding: 5px 9px;
    border-radius: 0;
    transition: background .12s;
}

.widget-mpl__cta:hover {
    background: var(--g200) !important;
    color: var(--g1500) !important;
}

.wikioo-main-content .widget-stf__title,.wikioo-main-content .widget-faf__title,.wikioo-main-content .widget-article-kw__title,.wikioo-main-content .widget-artist-otd5__title,.wikioo-main-content .widget-quiz-museum__eyebrow {
    font-family: var(--font-title);
    font-size: var(--wk-widget-title-size);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink, #1c1c1c);
    text-align: center;
    margin-top: 0;
}

.wikioo-main-content .widget-faf__title {
    text-align: left;
}

.wikioo-main-content .widget-quiz-museum__eyebrow {
    text-align: left;
}
/* In `@layer important-pins` (declared before Bootstrap's `vendor` layer in
   vendor-layers.css): these widget titles also carry Bootstrap's `.text-
   uppercase`/`.mb-1`/`.mb-2` utilities, which are themselves `!important` —
   per the @layer + `!important` reversal rule, an unlayered `!important`
   can no longer beat them on specificity alone once Bootstrap is layered.
   Order preserved (group rule, then the more specific eyebrow override) so
   the internal tie between the two still resolves the same way it did
   before Bootstrap was layered. */
@layer important-pins {
  .wikioo-main-content .widget-stf__title,.wikioo-main-content .widget-faf__title,.wikioo-main-content .widget-article-kw__title,.wikioo-main-content .widget-artist-otd5__title,.wikioo-main-content .widget-quiz-museum__eyebrow {
    text-transform: none !important;
    margin-bottom: 0.875rem !important;
  }
  .wikioo-main-content .widget-quiz-museum__eyebrow {
    margin-bottom: 0.5rem !important;
  }
}

.wikioo-main-content .widget-curated-choice__label,.wikioo-main-content .widget-curated-choice__label--hero,.wikioo-main-content .widget-curated-choice__label--small {
    font-family: var(--font-title);
    font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    color: var(--ink, #1c1c1c);
    background: transparent;
    padding: 0.4rem 0.35rem 0;
    position: static;
    pointer-events: auto;
    z-index: auto;
    text-shadow: none;
}
.widget-museum-4p {
    --widget-museum-accent: var(--g1500);

    background: var(--g0);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border-radius: 0;
    transition: box-shadow .2s;
}
/* In `@layer important-pins` (declared before Bootstrap's `vendor` layer in
   vendor-layers.css): fights Bootstrap's `.border` utility, which is itself
   `!important` — per the @layer + `!important` reversal rule, an unlayered
   `!important` can no longer beat it on specificity alone once Bootstrap is
   layered. */
@layer important-pins {
  .widget-museum-4p {
    border: 1px solid var(--g400) !important;
  }
}

.widget-museum-4p:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
}

.widget-museum-4p .h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 400;
    color: var(--g1500);
}

.widget-museum-4p__title-line2 {
    color: var(--g1500);
}

.widget-museum-4p__layout {
    min-width: 0;
}

@media (max-width: 767.98px) {
  .widget-museum-4p__layout > [class*="col-"]:not(:last-child) {
        margin-bottom: 0.25rem;
    }

}
.widget-museum-4p__cta {
    background: transparent;
    border: 1px solid var(--g1500);
    color: var(--g1500);
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 0;
    transition: background .12s;
}

.widget-museum-4p__cta:hover,.widget-museum-4p__cta:focus {
    background: var(--g200) !important;
    color: var(--g1500) !important;
}

.widget-artist-otd5 {
    background: var(--g0);
    border: 1px solid var(--g400);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    transition: box-shadow .2s;
}

.widget-artist-otd5:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
}

.widget-artist-otd5__title {
    font-family: var(--font-title);
    font-size: var(--wk-widget-title-size);
    font-weight: 600;
    color: var(--ink, #1c1c1c);
    text-align: center;
    padding-bottom: 14px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.widget-quiz-museum__card,.widget-quiz-artist__card {
    border-radius: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
/* In `@layer important-pins` (declared before Bootstrap's `vendor` layer in
   vendor-layers.css): fights Bootstrap's `.bg-transparent`/`.border`
   utilities, which are themselves `!important` — per the @layer +
   `!important` reversal rule, an unlayered `!important` can no longer beat
   them on specificity alone once Bootstrap is layered. */
@layer important-pins {
  .widget-quiz-museum__card,.widget-quiz-artist__card {
    background: var(--g0) !important;
    border: 1px solid var(--g400) !important;
  }
}

.widget-quiz-museum__kicker {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--g1500);
}

.widget-quiz-museum__eyebrow {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--g800);
}

.widget-quiz-artist__title-top {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 9px !important; /* keep-important: de-escalation triage 2026-07-07 -- beats Bootstrap .rounded-3/.border utility or base-wikioo a:has(>img) reset (un-de-escalated) */
    font-weight: 400 !important; /* keep-important: de-escalation triage 2026-07-07 -- beats Bootstrap .rounded-3/.border utility or base-wikioo a:has(>img) reset (un-de-escalated) */
    letter-spacing: 0.14em !important; /* keep-important: de-escalation triage 2026-07-07 -- beats Bootstrap .rounded-3/.border utility or base-wikioo a:has(>img) reset (un-de-escalated) */
    color: var(--g0);
    background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);
}

.widget-quiz-museum__img-wrap {
    border-radius: 0;
}

.widget-quiz-artist__img {
    border-radius: 0 !important; /* keep-important: de-escalation triage 2026-07-07 -- beats Bootstrap .rounded-3/.border utility or base-wikioo a:has(>img) reset (un-de-escalated) */
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}

.widget-quiz-artist__img-inner {
    overflow: hidden;
    position: absolute;
    inset: 0;
}

.widget-quiz-artist .col-12.col-md-5,.widget-quiz-artist .col-12.col-lg-4 {
    min-width: 0;
    max-width: 100%;
}

.widget-quiz-artist__opt .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding-left: 0;
}

.widget-quiz-artist__opt .form-check-input {
    flex: 0 0 auto;
    margin: 0.2em 0 0;
    float: none;
}

.widget-quiz-artist__opt .form-check-label {
    flex: 1 1 auto;
    line-height: 1.4;
}

.widget-quiz-artist__title-top,.widget-quiz-artist__caption {
    z-index: 1;
}

.widget-quiz-museum__btn,.widget-quiz-artist__btn {
    color: var(--g1500) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats Bootstrap .rounded-3/.border utility or base-wikioo a:has(>img) reset (un-de-escalated) */
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 8px;
    font-weight: 400 !important; /* keep-important: de-escalation triage 2026-07-07 -- beats Bootstrap .rounded-3/.border utility or base-wikioo a:has(>img) reset (un-de-escalated) */
    letter-spacing: 0.14em !important; /* keep-important: de-escalation triage 2026-07-07 -- beats Bootstrap .rounded-3/.border utility or base-wikioo a:has(>img) reset (un-de-escalated) */
    text-transform: uppercase;
    border-radius: 0;
    transition: background .12s;
}
/* In `@layer important-pins` (declared before Bootstrap's `vendor` layer in
   vendor-layers.css): fights Bootstrap's `.border` utility (and a
   bg-transparent-style default), which is itself `!important` — per the
   @layer + `!important` reversal rule, an unlayered `!important` can no
   longer beat it on specificity alone once Bootstrap is layered. */
@layer important-pins {
  .widget-quiz-museum__btn,.widget-quiz-artist__btn {
    background: transparent !important;
    border: 1px solid var(--g1500) !important;
  }
}

.widget-quiz-museum__btn:hover,.widget-quiz-museum__btn:focus,.widget-quiz-artist__btn:hover,.widget-quiz-artist__btn:focus {
    background: var(--g200) !important;
    color: var(--g1500) !important;
    border-color: var(--g1500) !important;
}

.widget-article-kw {
    background: var(--g0);
    border-radius: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    transition: box-shadow .2s;
}
/* In `@layer important-pins` (declared before Bootstrap's `vendor` layer in
   vendor-layers.css): fights Bootstrap's `.border` utility, which is itself
   `!important` — per the @layer + `!important` reversal rule, an unlayered
   `!important` can no longer beat it on specificity alone once Bootstrap is
   layered. */
@layer important-pins {
  .widget-article-kw {
    border: 1px solid var(--g400) !important;
  }
}

.widget-article-kw:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
}

.widget-article-kw__title {
    font-family: var(--font-title);
    font-size: var(--wk-widget-title-size);
    font-weight: 600;
    color: var(--ink, #1c1c1c);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.widget-article-kw__cell {
    /* Image well geometry — inner <img class="w-img-fill"> is position:absolute,
       so the cell needs an explicit aspect-ratio or it collapses to height 0
       (image invisible). Matches the per-brand pattern (APS/WA/OUA). */
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0;
    background: var(--g200);
}

.widget-article-kw__cell a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.widget-article-kw__cell--wide {
    aspect-ratio: 16 / 9;
}

.widget-curated-choice {
    --wcc-section-bg: var(--g0)    !important; /* keep-important: de-escalation triage 2026-07-07 -- custom-property tokens beat this widget's own inline <style> tag, which redefines the same --wcc-* custom properties (ties on specificity, wins by later DOM position without this) */
    --wcc-gallery-bg: var(--g150)  !important; /* keep-important: same as above */
    --wcc-title:      var(--g1500) !important; /* keep-important: same as above */
    --wcc-subtitle:   var(--g1100) !important; /* keep-important: same as above */
    --wcc-btn-border: var(--g1500) !important; /* keep-important: same as above */
    --wcc-btn-text:   var(--g1500) !important; /* keep-important: same as above */

    background:  var(--g0) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats a generic catch-all rule earlier in this same file (measured regression when unasserted) */
    border:      1px solid var(--g400);
    box-shadow:  0 1px 4px rgba(0,0,0,.07);
    transition:  box-shadow .2s;
    padding:     var(--sp-4) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats a generic catch-all rule earlier in this same file (measured regression when unasserted) */
    margin-bottom: var(--sp-8);
}

.widget-curated-choice:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
}

.widget-curated-choice__gallery-panel {
    background: var(--g150) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats a generic catch-all rule earlier in this same file (measured regression when unasserted) */
    padding: var(--sp-4) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats a generic catch-all rule earlier in this same file (measured regression when unasserted) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.widget-curated-choice__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    align-items: stretch;
}

@media (min-width: 768px) {
  .widget-curated-choice__main {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--sp-4);
    }

}
.widget-curated-choice__art-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-2);
    width: 100%;
    min-width: 0;
    aspect-ratio: 2 / 1;
    max-height: 14.5rem;
    overflow: hidden;
}

@media (min-width: 768px) {
  .widget-curated-choice__art-grid {
        max-height: 18rem;
    }

}
.widget-curated-choice__grid-item {
    border-radius: 0 !important; /* keep-important: de-escalation triage 2026-07-07 -- beats a generic catch-all rule earlier in this same file (measured regression when unasserted) */
    background: var(--g200) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats a generic catch-all rule earlier in this same file (measured regression when unasserted) */
    overflow: hidden;
    position: relative;
    min-height: 0;
    min-width: 0;
    display: flex;
}

.widget-curated-choice__grid-item--1 {
    grid-row: 1 / span 2;
    grid-column: 1;
}

.widget-curated-choice__grid-item--2 {
    grid-column: 2;
    grid-row: 1;
}

.widget-curated-choice__grid-item--3 {
    grid-column: 3;
    grid-row: 1;
}

.widget-curated-choice__grid-item--4 {
    grid-column: 2;
    grid-row: 2;
}

.widget-curated-choice__grid-item--5 {
    grid-column: 3;
    grid-row: 2;
}

.widget-curated-choice__tile {
    background: var(--g200) !important; /* keep-important: de-escalation triage 2026-07-07 -- specific-over-generic override within this file; loses to the shared/generic rule when unasserted */
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.widget-curated-choice__tile::before,.widget-curated-choice__tile::after {
    display: none;
}

.widget-curated-choice__label {
    z-index: 1;
}

.widget-curated-choice__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
  .widget-curated-choice__intro {
        min-height: 100%;
        justify-content: center;
    }

}
.widget-curated-choice:hover .widget-curated-choice__art-grid a:hover img.mouseover_effect_images,.widget-curated-choice:hover .widget-curated-choice__art-grid img.mouseover_effect_images:hover {
    filter: contrast(1.5) saturate(0.05) brightness(1.05);
    transform: scale(0.95);
    opacity: 0.8;
}

.widget-curated-choice__head {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 16px !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
    font-weight: 400;
    color: var(--g1500) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
    text-transform: none !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
    letter-spacing: 0 !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
    line-height: 1.3 !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
}

.widget-curated-choice__desc {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--g1100) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
    font-size: 0.857rem !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
}

.widget-curated-choice__cta {
    border: 1px solid var(--g1500) !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
    color: var(--g1500);
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 8px !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
    font-weight: 400 !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
    letter-spacing: 0.14em !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
    text-transform: uppercase;
    padding: 5px 9px !important; /* keep-important: de-escalation triage 2026-07-07 -- beats this widget's own inline <style> tag in widget_curated_choice.html (ties on specificity, wins by later DOM position without this) */
    background: transparent;
    transition: background .12s;
}

.widget-curated-choice__cta span {
    color: var(--g1500);
}

.widget-curated-choice__cta::before {
    background: var(--g200);
}

.widget-curated-choice__cta:hover span,.widget-curated-choice__cta:hover {
    color: var(--g1500) !important;
}

.widget-faf {
    background: var(--g0);
    border: none;
    box-shadow: none;
    color: var(--g1400);
}

.widget-faf__ruler {
    background: var(--g300);
    opacity: 1;
}

.widget-faf__title {
    font-family: var(--font-title);
    font-size: var(--wk-widget-title-size);
    font-weight: 600;
    color: var(--ink, #1c1c1c);
    text-transform: none;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.widget-faf__portrait,.widget-faf__painting {
    /* Image well geometry — the inner <img class="w-img-fill"> is position:absolute,
       so the anchor needs an explicit aspect-ratio or it collapses to height 0
       (image invisible). Matches the per-brand pattern (ADC/BPA/TI). */
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--g200);
}

/* In `@layer important-pins` (declared before Bootstrap's `vendor` layer in
   vendor-layers.css): fights Bootstrap's `.text-dark` utility, which is
   itself `!important` — per the @layer + `!important` reversal rule, an
   unlayered `!important` can no longer beat it on specificity alone once
   Bootstrap is layered. */
@layer important-pins {
  .widget-faf__name a {
    color: var(--g1500) !important;
  }
}

.widget-faf__meta {
    color: var(--g1100);
}

.widget-faf__flash li {
    color: var(--g1200);
}

.widget-stf {
    --stf-bg:    var(--g0);
    --stf-title: var(--g1500);
    --stf-label: var(--g1400);

    background: var(--g0);
    border: 1px solid var(--g400);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    transition: box-shadow .2s;
}

.widget-stf:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
}

.widget-stf__title {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--g1500);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}

.widget-stf__media {
    background: var(--g200);
}

.widget-stf__label {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--g800);
    text-align: left;
}

.widget-stf__label a {
    color: var(--g1400);
    display: block;
    transition: background .12s;
    text-decoration: none;
}

.widget-stf__label a:hover {
    background: var(--g100) !important;
    color: var(--g1500) !important;
    text-decoration: none !important;
}

.widget-quiz-artist__title-top,.widget-stf__label,.widget-mpl__caption,.widget-mpl__caption a,.widget-mpl__cta,.widget-quiz-museum__eyebrow,.widget-quiz-museum__caption,.widget-museum-4p__cta {
    font-family: var(--font-title-accent);
}

.widget-museum-4p h2[style],.widget-museum-4p h2[style] span {
    font-family: var(--font-title);
    color: var(--g1500, #1a1a1a);
}

.widget-museum-4p .small[style],.widget-museum-4p .small[style] p {
    font-family: var(--font-body);
    color: #444;
    font-weight: 400;
}

.widget-mpl__info h2 {
    font-family: var(--font-title);
}

.widget-article-kw .widget-article-kw__meta.w-overlay-bottom,.widget-article-kw__meta.w-overlay-bottom {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.74rem;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.35;
    color: #fff;
    padding: 1.5rem 0.7rem 0.6rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%);
    overflow: hidden;
    max-height: 55%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

.widget-quiz-museum__btn,.widget-quiz-artist__btn,.widget-curated-choice__cta {
    font-family: var(--font-title-accent) !important; /* keep-important: de-escalation triage 2026-07-07 -- this later, more-specific-intent rule is the deliberate final authority for these 3 buttons' font-family; loses to their own earlier per-widget font-family default without this */
}

.widget-mpl {
    --mpl-part-pad: 0.35rem;
    --mpl-art-pad: 0.28rem;
}

.widget-mpl__part { padding: var(--mpl-part-pad); box-sizing: border-box; }

.widget-mpl__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 14rem;
}

.widget-mpl__group-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.widget-mpl__group-stack {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.widget-mpl__tile {
    position: relative;
    overflow: hidden;
    display: block;
    height: 100%;
    min-height: 0;
    padding: var(--mpl-art-pad);
    box-sizing: border-box;
}

.widget-mpl__img {
    position: absolute;
    left: var(--mpl-art-pad);
    top: var(--mpl-art-pad);
    width: calc(100% - 2 * var(--mpl-art-pad));
    height: calc(100% - 2 * var(--mpl-art-pad));
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
}

.widget-famous-artwork-day__over {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 1rem 1rem 0.85rem;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 65%, transparent 100%);
}

@media (max-width: 991.98px) {
  .homepage-site-widgets .widget-mpl .row > [class*="col-lg-3"] {
        border-left: none;
        border-right: none;
    }

  .homepage-site-widgets .widget-mpl__info { min-height: auto; }

}
.widget-mpl__part { border-color: var(--mpl-border, var(--g400, #e0d8cc)); }

.widget-mpl__panel,.widget-mpl__min-h-panel { min-height: 14rem; }

.widget-mpl__min-h-half { min-height: 7rem; }

.widget-mpl__min-h-sm { min-height: 3.5rem; }

.widget-mpl__col-quarter { width: 25%; min-width: 0; }

.widget-mpl__col-half { width: 50%; min-width: 0; }

.widget-stf__header-band { letter-spacing: 0.04em; }

.widget-museum-6p__placeholder { min-height: 10rem; }

.widget-museum-4p__title { font-weight: 700; color: #111; }

.widget-museum-4p__meta { line-height: 1.5; color: #111; }

.widget-dqf__question { color: #111; line-height: 1.4; }

.widget-dqf__meta { color: #111; line-height: 1.45; }

@media (max-width: 991.98px) {
  .widget-mpl__col-quarter,.widget-mpl__col-half { width: 100%; }

  .widget-mpl__panel,.widget-mpl__min-h-panel { min-height: 10rem; }

  .widget-mpl__min-h-half { min-height: 6rem; }

}
@media (max-width: 767.98px) {
  .widget-imp10__movement-title { font-size: clamp(18px, 5vw, 24px); }

}
.widget-quiz-museum__opt {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

.widget-quiz-museum__opt .form-check {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding-left: 0;
  }

.widget-quiz-museum__opt .form-check-input {
    flex: 0 0 auto;
    margin: 0.2em 0 0;
    float: none;
  }

.widget-quiz-museum__opt label,.widget-quiz-museum__opt .form-check-label {
    cursor: pointer;
    display: block;
    margin: 0;
    flex: 1 1 auto;
    line-height: 1.4;
  }

.widget-quiz-museum__question { color: #111; line-height: 1.4; }

.widget-artist-otd5__left { min-width: 0; }

.widget-artist-otd5__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
  }

.widget-artist-otd5__art {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    margin: 0;
  }

.widget-artist-otd5__art > a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

.widget-artist-otd5__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

.widget-artist-otd5__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.6rem;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.25;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 100%);
  }

.widget-artist-otd5__art-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.35rem 0.4rem;
    font-size: 0.72rem;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0) 100%);
  }

.widget-quiz-artist__opt label {
    cursor: pointer;
  }

.widget-quiz-artist__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 0.5rem 0.65rem 0.55rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    pointer-events: none;
  }

.widget-faf__painting__cap {
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem; font-weight: 600; line-height: 1.25; text-align: left;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  }

.widget-stf__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
  }

.widget-stf__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

.widget-artist-otd5__img--fill {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.widget-stf__label,.widget-stf__label a,.widget-mpl__category,.widget-mpl__category a,.widget-mpl__caption,.widget-mpl__caption a,.widget-tf-static__category,.widget-tf-static__category a,.widget-recent-own-static__category,.widget-recent-own-static__category a,.widget-stock-ready-static__category,.widget-stock-ready-static__category a,.widget-museum-4p__label,.widget-museum-6p__label,.widget-artist-otd5__label,.widget-artist-otd5__art-title,.widget-curated-choice__label,.widget-curated-choice__label--hero,.widget-curated-choice__label--small,.widget-imp10__art-title,.widget-quiz-artwork__caption {
  font-family: var(--font-title, inherit);
  font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  font-style: normal;
  font-synthesis: none;
}
/* In `@layer important-pins` (declared before Bootstrap's `vendor` layer in
   vendor-layers.css): some of these also carry Bootstrap's `.text-
   uppercase` utility, which is itself `!important` — per the @layer +
   `!important` reversal rule, an unlayered `!important` can no longer beat
   it on specificity alone once Bootstrap is layered. */
@layer important-pins {
  .widget-stf__label,.widget-stf__label a,.widget-mpl__category,.widget-mpl__category a,.widget-mpl__caption,.widget-mpl__caption a,.widget-tf-static__category,.widget-tf-static__category a,.widget-recent-own-static__category,.widget-recent-own-static__category a,.widget-stock-ready-static__category,.widget-stock-ready-static__category a,.widget-museum-4p__label,.widget-museum-6p__label,.widget-artist-otd5__label,.widget-artist-otd5__art-title,.widget-curated-choice__label,.widget-curated-choice__label--hero,.widget-curated-choice__label--small,.widget-imp10__art-title,.widget-quiz-artwork__caption {
    text-transform: none !important;
  }
}

.wikioo-main-content .widget-curated-choice__label,.wikioo-main-content .widget-curated-choice__label--hero,.wikioo-main-content .widget-curated-choice__label--small,.wikioo-main-content .widget-museum-4p__label {
  font-family: var(--font-title);
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--ink, #1c1c1c);
  background: transparent;
  padding: 0.4rem 0.35rem 0;
  position: static;
}

.wikioo-main-content .widget-museum-4p__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: var(--wk-overlay-caption);
  background: var(--wk-overlay-gradient);
  padding: 1.1rem 0.65rem 0.45rem;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.wikioo-main-content .widget-curated-choice__label--hero {
  font-size: clamp(0.875rem, 1.15vw, 1rem);
  padding: 0.45rem 0.4rem 0;
}