/* ==========================================================================
   Million Memory Project Primary Styles
   ========================================================================== */

/* ==========================================================================
   Font Imports
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;1,400&family=Roboto+Condensed:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Brand System
   ========================================================================== */

:root {

    /* ==================================================
       MILLION MEMORY PROJECT
       Parent Brand
       ================================================== */

    --mmp-ink: #332E2B;
    --mmp-white: #FFFFFF;
    --mmp-archive: #F0F5FB;
    --mmp-river: #3F5461;
    --mmp-parchment: #E5DBC2;

    /* ==================================================
       MMP Website Page Palette
       Mockup-aligned warm editorial palette
       ================================================== */

    --mmp-page-ink: #302b28;
    --mmp-page-paper: #fffaf1;
    --mmp-page-cream: #f4efe6;
    --mmp-page-muted: #6b625c;
    --mmp-page-quiet: #7a716b;      /* lighter than muted, still 4.77:1 on white */
    --mmp-page-blue: #3f5461;
    --mmp-page-sage: #6b7c7a;
    --mmp-page-gold: #d8b46a;
    --mmp-page-gold-light: #e4c784; /* gold button hover */
    --mmp-page-clay: #8a5f45;
    --mmp-page-green: #2f5b2e;      /* text on green-tint (6.6:1) */
    --mmp-page-green-tint: #e4efdd; /* Available Now pill */    --mmp-page-border: rgba(48, 43, 40, 0.15);
    --mmp-page-border-light: rgba(48, 43, 40, 0.08);
    --mmp-page-shadow: 0 24px 60px rgba(48, 43, 40, 0.14);
    --mmp-lift-shadow: 0 6px 18px rgba(48, 43, 40, 0.08); /* a card lifted off the page (Launch Circle levels) */

    /* ==================================================
       SOUND ARCHIVE BOOKS
       Music Publishing / Artist Books
       ================================================== */

    --sab-steel: #506A7A;
    --sab-sage: #6B7C7A;
    --sab-warm: #E5DBC2;
    --sab-gray: #9B9B9B;

    /* ==================================================
       APPALACHIAN MEMORY PROJECT
       Oral History / Community Archives
       ================================================== */

    --amp-forest: #326031;
    --amp-field: #EAEBD6;

    /* ==================================================
       MILLION MEMORY PROJECT (imprint)
       Palette TBD
       ================================================== */

    /*
    --mmp-primary:
    --mmp-secondary:
    --mmp-accent:
    */

    /* ==================================================
       Active Brand Defaults
       ================================================== */

    --brand-accent: var(--mmp-river);

    /* ==================================================
       Typography
       ================================================== */

    --mmp-font-heading: "Roboto Condensed", sans-serif;
    --mmp-font-editorial: "Lora", serif;
    --mmp-font-body: "Inter", sans-serif;

    /* ==================================================
       Global UI Tokens
       ================================================== */

    --mmp-color-text: var(--mmp-ink);
    --mmp-color-text-muted: rgba(51, 46, 43, 0.72);
    --mmp-color-border: rgba(51, 46, 43, 0.16);

    /* ==================================================
       Layout Widths
       ================================================== */

    --mmp-container-width: var(--mmp-container-wide-width); /* was 1040px; all pages match the 1440px homepage width */
    --mmp-container-wide-width: 1440px;
    --mmp-container-narrow-width: 760px;
    --mmp-container-padding: 40px; /* was 24px; +1rem gutter (2026-10-21) */

    /* Heading spacing: one line-height and tracking per level. Sizes stay
       per section; set spacing with these, never per page. */
    --mmp-display-line-height: 1.04;   /* page H1s */
    --mmp-display-tracking: -0.02em;
    --mmp-h2-line-height: 1.1;         /* section headings */
    --mmp-h2-tracking: -0.015em;
    --mmp-h3-line-height: 1.2;         /* card, step and small headings */
    --mmp-h3-tracking: -0.01em;
    --mmp-eyebrow-line-height: 1.3;    /* uppercase labels above headings */
    --mmp-eyebrow-tracking: 0.14em;

    /* Body text inside cards ("buckets"): use the .mmp-card-text class. */
    --mmp-card-text-size: 1rem; /* 16px at every width; was clamp(1.05rem, 1.25vw, 1.2rem) */
    --mmp-profile-photo-size: 96px; /* "About the …" photos; matches mmp-contributor-photo in mmp_image_slot_sizes() */

    /* Imprint page masthead logo (SAB, AMP, MMP). */
    --mmp-imprint-logo-size: clamp(220px, 24vw, 360px);
    --mmp-imprint-logo-size-stacked: 140px;
    /* Imprint page H1, the same size on all three pages, so "Appalachian
       Memory Project" (11.2 × the font size wide) fits one line: stacked
       (phones, tablets) between the gutters; side by side (901px up) in the
       copy column, see "Imprint page mastheads". */
    --mmp-imprint-title-size: min(clamp(3.25rem, 6vw, 4.5rem), calc((100vw - 72px) / 11.2));

    --mmp-shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.06);
    --mmp-panel-radius: 18px; /* cream panels: cart totals, order summary, store notices */

    /* Form fields (Books filters, Contact form): one look for every input. */
    --mmp-field-height: 46px;
    --mmp-field-bg: var(--mmp-page-paper);
    --mmp-field-border: 1px solid var(--mmp-page-border);
    --mmp-field-radius: 999px;          /* text areas use --mmp-field-radius-box */
    --mmp-field-radius-box: 20px;
    --mmp-field-padding-x: 18px;
    --mmp-field-focus: var(--mmp-page-gold);
}

/* ==========================================================================
   Global Base
   ========================================================================== */

body {
    color: var(--mmp-color-text);
    background: var(--mmp-white);
    font-family: var(--mmp-font-body);
    font-size: 18px;
    line-height: 1.65;
}

body,
button,
input,
select,
textarea {
    font-family: var(--mmp-font-body);
}

img {
    max-width: 100%;
    height: auto;
}

.mmp-ip-panels {
    width: 100%;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.entry-title,
.wp-block-heading {
    color: var(--mmp-ink);
    font-family: var(--mmp-font-heading);
    font-weight: 700;
}

/* ".entry-content hN" outranks Astra's ".entry-content :where(hN)". */
h1,
.entry-content h1,
.entry-title,
.site-content .entry-title {
    line-height: var(--mmp-display-line-height);
    letter-spacing: var(--mmp-display-tracking);
}

h2,
.entry-content h2 {
    line-height: var(--mmp-h2-line-height);
    letter-spacing: var(--mmp-h2-tracking);
}

h3,
h4,
h5,
h6,
.entry-content :is(h3, h4, h5, h6),
.site-title {
    line-height: var(--mmp-h3-line-height);
    letter-spacing: var(--mmp-h3-tracking);
}

h1,
.entry-title {
    font-size: clamp(3rem, 6vw, 5rem);
}

h2 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
}

h3 {
    font-size: clamp(1.7rem, 3vw, 2.25rem);
}

h4 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
}

p {
    color: var(--mmp-color-text-muted);
}

strong,
b {
    color: var(--mmp-ink);
    font-weight: 700;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--brand-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover,
a:focus {
    color: var(--mmp-ink);
}

/* ==========================================================================
   Layout Helpers
   ========================================================================== */

.mmp-container {
    max-width: var(--mmp-container-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-inline: auto;
}

.mmp-container-wide {
    max-width: var(--mmp-container-wide-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-inline: auto;
}

.mmp-container-narrow {
    max-width: var(--mmp-container-narrow-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-inline: auto;
}

/* Imprint page mastheads (SAB, AMP, MMP): one H1 style for all three. */
:is(.mmp-sab-hero, .mmp-amp-hero, .mmp-mmp-hero) h1 {
    color: var(--mmp-page-paper);
    font-size: var(--mmp-imprint-title-size);
    line-height: var(--mmp-display-line-height);
    letter-spacing: var(--mmp-display-tracking);
    margin: 0;
}

/* Side by side, the H1 is sized from the masthead row (a size container):
   the copy column is 55% of the row less its gap. The 64px is the widest
   page gap (MMP's), so all three pages get the same size. */
@media (min-width: 901px) {
    :is(.mmp-sab-hero-grid, .mmp-amp-hero-grid, .mmp-mmp-hero-grid) {
        container-type: inline-size;
    }

    :is(.mmp-sab-hero, .mmp-amp-hero, .mmp-mmp-hero) h1 {
        font-size: min(var(--mmp-imprint-title-size), calc((100cqi - 64px) * 0.55 / 11.2));
    }
}

/* The logo is a mark beside the copy, not the hero image. Stacked, it sits
   above the eyebrow. */
:is(.mmp-sab-hero-grid, .mmp-amp-hero-grid, .mmp-mmp-hero-grid) > .wp-block-column:last-child {
    display: flex;
    justify-content: center;
    align-items: center;
}

:is(.mmp-sab-hero-grid, .mmp-amp-hero-grid, .mmp-mmp-hero-grid) > .wp-block-column:last-child .wp-block-image {
    width: var(--mmp-imprint-logo-size);
    margin: 0;
}

:is(.mmp-sab-hero-grid, .mmp-amp-hero-grid, .mmp-mmp-hero-grid) .wp-block-image img {
    width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    :is(.mmp-sab-hero-grid, .mmp-amp-hero-grid, .mmp-mmp-hero-grid) > .wp-block-column:last-child {
        order: -1;
        justify-content: flex-start;
    }

    :is(.mmp-sab-hero-grid, .mmp-amp-hero-grid, .mmp-mmp-hero-grid) > .wp-block-column:last-child .wp-block-image {
        width: var(--mmp-imprint-logo-size-stacked);
    }
}

/* Two-column split: add .mmp-split to a Columns block and set --mmp-split
   (the first column's share) in page CSS instead of the editor's per-column
   width, which writes inline styles. Below 782px WordPress stacks columns. */
.mmp-split {
    --mmp-split: 50%;
}

@media (min-width: 782px) {
    .mmp-split > .wp-block-column:first-child {
        flex: 0 1 var(--mmp-split);
    }

    .mmp-split > .wp-block-column:last-child {
        flex: 0 1 calc(100% - var(--mmp-split));
    }
}

/* ==========================================================================
   Gutenberg / Astra Content Width Control
   Keeps full-width backgrounds but constrains readable content.
   ========================================================================== */

.entry-content > .wp-block-group > .wp-block-columns,
.entry-content > .wp-block-group > .wp-block-group:not(.alignfull),
.entry-content > .wp-block-group > .wp-block-heading,
.entry-content > .wp-block-group > p,
.entry-content > .wp-block-group > .wp-block-buttons,
.entry-content > .wp-block-group > .wp-block-image,
.entry-content > .wp-block-group > .wp-block-quote,
.entry-content > .wp-block-group > .wp-block-separator {
    max-width: var(--mmp-container-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-left: auto;
    margin-right: auto;
}

.entry-content > .wp-block-group > .wp-block-columns[class*="hero"],
.entry-content > .wp-block-group > .wp-block-columns[class*="grid"],
.entry-content > .wp-block-group > .wp-block-columns[class*="gallery"],
.entry-content > .wp-block-group > .wp-block-columns[class*="media"],
.entry-content > .wp-block-group > .wp-block-columns[class*="project"],
.entry-content > .wp-block-group > .wp-block-columns[class*="launch"],
.entry-content > .wp-block-group > .wp-block-columns[class*="featured"] {
    max-width: var(--mmp-container-wide-width);
}

/* Wrapper groups marked .mmp-container-wide use the wide width, not the
   narrow cap above (which otherwise wins on specificity). */
.entry-content > .wp-block-group > .wp-block-group.mmp-container-wide:not(.alignfull) {
    max-width: var(--mmp-container-wide-width);
}

/* Readable line length. Standard containers now share the 1440px page
   width, so running text directly inside them is capped. */
.entry-content .mmp-container > p {
    max-width: var(--mmp-container-narrow-width);
}

/* Centered sections keep their capped paragraphs centered. */
.entry-content .mmp-container[class*="-cta"] > p,
.entry-content .mmp-ip-intro-inner > p {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   Editorial Text Helpers
   ========================================================================== */

.mmp-kicker {
    margin: 0 0 12px;
    color: var(--brand-accent);
    font-family: var(--mmp-font-body);
    font-size: 0.78rem;
    line-height: var(--mmp-eyebrow-line-height);
    font-weight: 800;
    letter-spacing: var(--mmp-eyebrow-tracking);
    text-transform: uppercase;
}

/* Section labels share the kicker style everywhere (2026-10-19). Before,
   .mmp-section-label was only styled on the draft How It Works page, so it
   showed as plain body text (e.g. "What guides us" on What We Do).
   .mmp-label-light is the variant for dark bands. */
.mmp-section-label {
    margin: 0 0 12px;
    color: var(--brand-accent);
    font-family: var(--mmp-font-body);
    font-size: 0.78rem;
    line-height: var(--mmp-eyebrow-line-height);
    font-weight: 800;
    letter-spacing: var(--mmp-eyebrow-tracking);
    text-transform: uppercase;
}

.mmp-section-label.mmp-label-light {
    color: var(--mmp-page-gold);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link,
.mmp-level__button,
.mmp-book-extra__button {
    border-radius: 0;
    font-family: var(--mmp-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--mmp-ink);
    color: var(--mmp-white);
    border: 1px solid var(--mmp-ink);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--mmp-white);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.mmp-level__button,
.mmp-book-extra__button {
    border: 1px solid var(--mmp-ink);
    color: var(--mmp-ink);
}

/* ==========================================================================
   Cards
   ========================================================================== */

/* Body text in any card or bucket. Size comes from --mmp-card-text-size;
   section stylesheets set color and spacing only, never font-size. */
.mmp-card-text {
    font-size: var(--mmp-card-text-size);
}

/* ==========================================================================
   Images
   Preserve intentional PNG/SVG transparency site-wide.
   ========================================================================== */

figure,
.wp-block-image,
.wp-block-image figure,
.wp-block-image img,
img {
    background-color: transparent !important;
}

/* ==========================================================================
   WordPress Block Defaults
   ========================================================================== */

.wp-block-group.alignfull,
.wp-block-cover.alignfull {
    padding-left: var(--mmp-container-padding);
    padding-right: var(--mmp-container-padding);
}

.wp-block-cover {
    color: var(--mmp-white);
}

.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4,
.wp-block-cover h5,
.wp-block-cover h6 {
    color: var(--mmp-white);
}

.wp-block-cover p {
    color: rgba(255, 255, 255, 0.84);
}

.wp-block-separator {
    border-color: var(--mmp-color-border);
}

/* ==========================================================================
   Astra Compatibility
   ========================================================================== */

/* One page grid everywhere (2026-10-19): Astra's containers (header,
   footer, default pages such as Contact, Cart and product pages) use the
   same box as .mmp-container-wide: up to 1440px of content with
   --mmp-container-padding gutters. Full-width page-builder pages keep Astra's own rule for
   #content and set their containers per section. */
.ast-container {
    max-width: calc(var(--mmp-container-wide-width) + (var(--mmp-container-padding) * 2));
    padding-left: var(--mmp-container-padding);
    padding-right: var(--mmp-container-padding);
}

/* Astra's mobile header bar pads itself (20px) around a padless
   container; use the page gutter instead. */
.ast-mobile-header-wrap .ast-primary-header-bar {
    padding-left: var(--mmp-container-padding) !important;
    padding-right: var(--mmp-container-padding) !important;
}

/* Top-level page sections are full-bleed bands; their inner containers
   set the gutter. Astra adds a default 54px side padding to them (and a few
   older page styles add 40px), which pushed content off the page grid. */
.entry-content > .wp-block-group,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Default pages (Cart, Checkout, …): Astra pulls "wide" blocks out 20px
   past its own padding on smaller screens; keep them on the page grid. */
.ast-plain-container .entry-content .alignwide {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
}

/* Cart "You may be interested in…" heading (was an inline block style). */
.wp-block-woocommerce-product-collection > .wp-block-heading {
    margin-bottom: 1rem;
}

/* Short pages have no scrollbar; reserve its space so the header and
   content don't shift between pages (no effect with overlay scrollbars). */
html {
    scrollbar-gutter: stable;
}

.site-content {
    background: var(--mmp-white);
}

.main-header-menu .menu-link,
.ast-builder-menu .main-navigation > ul > li > a {
    font-family: var(--mmp-font-heading);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Desktop dropdowns grow to fit their longest item on one line (Astra's
   fixed 240px broke "Appalachian Memory Project"); never narrower. */
.ast-desktop .main-header-menu .sub-menu {
    width: max-content;
    min-width: 240px;
}

.ast-site-identity .site-title a {
    font-family: var(--mmp-font-heading);
    font-weight: 700;
}

.ast-single-post .entry-content a,
.ast-comment-content a:not(.ast-comment-edit-reply-wrap a) {
    text-underline-offset: 3px;
}

/* ==========================================================================
   WooCommerce Base Compatibility
   ========================================================================== */

.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--mmp-font-heading);
    font-weight: 700;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    color: var(--mmp-ink);
    font-family: var(--mmp-font-body);
    font-weight: 800;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 921px) {
    :root {
        --mmp-container-padding: 36px; /* was 20px */
    }

    body {
        font-size: 17px;
    }
}

@media (max-width: 544px) {
    :root {
        --mmp-container-padding: 34px; /* was 18px */
    }

    body {
        font-size: 16px;
    }
}
/* ==========================================================================
   PAGE MASTHEAD (2026-10-15)
   Reusable hero matching the Imprints masthead: paper-to-cream background,
   same padding, 24px-inset 46/54 grid, kicker, display headline, lede,
   and a tall rounded media panel on the right. Used on Our Story,
   Partners and What We Do; the text-only variant is used on Books. The media column takes an image block or the
   [Hero image] placeholder paragraph; both get the panel styling.
   ========================================================================== */

.mmp-masthead {
  background:
    radial-gradient(circle at 12% 18%, rgba(199, 151, 77, 0.14), transparent 34%),
    linear-gradient(180deg, var(--mmp-page-paper), var(--mmp-page-cream));
  padding: clamp(4.5rem, 7vw, 6.5rem) 0 !important;
  margin: 0 !important;
}

.mmp-masthead-grid {
  margin: 0 !important;
  gap: clamp(2rem, 5vw, 4rem) !important;
  align-items: center !important;
}

.mmp-masthead-grid > .mmp-masthead-copy {
  flex-basis: 46% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch !important;
}

.mmp-masthead-grid > .mmp-masthead-media {
  flex-basis: 54% !important;
}

.mmp-masthead-kicker {
  font-family: var(--mmp-font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: var(--mmp-eyebrow-tracking);
  text-transform: uppercase;
  line-height: var(--mmp-eyebrow-line-height);
  color: var(--mmp-page-blue);
  margin: 0 0 1.6em !important;
}

.mmp-masthead-title {
  font-family: var(--mmp-font-heading) !important;
  font-weight: 800 !important;
  font-size: clamp(3rem, 5.6vw, 5.6rem) !important;
  line-height: var(--mmp-display-line-height) !important;
  letter-spacing: var(--mmp-display-tracking) !important;
  color: var(--mmp-page-ink) !important;
  margin: 0 !important;
  text-wrap: balance;
}

.mmp-masthead-lede {
  color: var(--mmp-page-muted);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.7;
  max-width: 600px;
  margin: 26px 0 0 !important;
}

/* Optional pull-quote under the lede: a quote block, or a paragraph with
   .mmp-masthead-quote-text when it's the site's own statement (Our Story). */
.mmp-masthead-quote {
  border-left: 3px solid var(--mmp-page-gold);
  padding-left: 18px !important;
  max-width: 560px;
  margin: 30px 0 0 !important;
}

.mmp-masthead-quote-label {
  font-family: var(--mmp-font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: var(--mmp-eyebrow-tracking);
  line-height: var(--mmp-eyebrow-line-height);
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0 0 10px !important;
}

.mmp-masthead-quote .wp-block-quote {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mmp-masthead-quote .wp-block-quote p,
.mmp-masthead-quote .mmp-masthead-quote-text {
  font-family: var(--mmp-font-editorial);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--mmp-page-ink);
  margin: 0 !important;
}

/* Text-only variant (no media): the title column and an aside column
   (statement + lede) share a bottom baseline. Used on Books. */
.mmp-masthead--text .mmp-masthead-grid {
  align-items: flex-end !important;
}

.mmp-masthead--text .mmp-masthead-grid > .mmp-masthead-copy {
  align-self: auto !important;
}

.mmp-masthead-grid > .mmp-masthead-aside {
  flex-basis: 54% !important;
  border-left: 3px solid var(--mmp-page-gold);
  padding-left: clamp(1.25rem, 2.5vw, 2rem) !important;
}

.mmp-masthead-title--xl {
  font-size: clamp(3.4rem, 8vw, 7.2rem) !important;
  letter-spacing: var(--mmp-display-tracking) !important;
  line-height: var(--mmp-display-line-height) !important;
}

.mmp-masthead-statement {
  font-family: var(--mmp-font-editorial);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.25;
  color: var(--mmp-page-ink);
  margin: 0 !important;
}

.mmp-masthead-aside .mmp-masthead-lede {
  margin-top: 16px !important;
}

/* Media panel: image block or placeholder */
.mmp-masthead-media .wp-block-image,
.mmp-masthead-image-placeholder {
  height: 560px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--mmp-page-shadow);
  margin: 0 !important;
}

.mmp-masthead-media .wp-block-image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Placeholder look, shared by any slot still waiting for its photo. */
.mmp-masthead-image-placeholder,
.mmp-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(63, 84, 97, 0.18), rgba(107, 124, 122, 0.10)),
    var(--mmp-page-cream);
  border: 1px dashed rgba(48, 43, 40, 0.25);
  color: var(--mmp-page-muted);
  font-family: var(--mmp-font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* A photo dropped into a placeholder in the editor fills it, and the
   placeholder look goes (it was centred and shrunk, 2026-10-23). */
.mmp-masthead-image-placeholder:has(img),
.mmp-image-placeholder:has(img) {
  display: block;
  background: none;
  border: 0;
}

:is(.mmp-masthead-image-placeholder, .mmp-image-placeholder) .wp-block-image {
  width: 100%;
  height: 100%;
  margin: 0;
}

:is(.mmp-masthead-image-placeholder, .mmp-image-placeholder) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 920px) {
  .mmp-masthead-grid,
  .mmp-masthead--text .mmp-masthead-grid {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mmp-masthead-grid > .mmp-masthead-copy,
  .mmp-masthead-grid > .mmp-masthead-media,
  .mmp-masthead-grid > .mmp-masthead-aside {
    flex-basis: 100% !important;
  }

  .mmp-masthead-media .wp-block-image,
  .mmp-masthead-image-placeholder {
    height: 420px;
  }
}

@media (max-width: 680px) {
  .mmp-masthead-media .wp-block-image,
  .mmp-masthead-image-placeholder {
    height: 280px;
    border-radius: 18px;
  }
}

/* Imprint "why" sections (MMP "Why many voices", AMP "Why it matters"):
   kicker, heading and text on the left, a small 3:2 image on the right.
   One look for both pages; was .mmp-mmp-why (2026-10-23). */
.mmp-why {
  padding-block: 92px !important;
  background:
    linear-gradient(135deg, rgba(107, 124, 122, 0.14), transparent 42%),
    var(--mmp-page-cream);
}

.mmp-why-copy h2 {
  color: var(--mmp-page-ink) !important;
  max-width: 900px;
}

.mmp-why-copy p:not(.mmp-kicker) {
  color: var(--mmp-page-muted);
  max-width: var(--mmp-container-narrow-width);
}

.mmp-why-grid {
  --mmp-split: 68%;
  gap: clamp(2rem, 5vw, 4rem) !important;
  align-items: center !important;
  margin: 0 !important;
}

.mmp-why-image {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 2;
  margin: 0 0 0 auto !important;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--mmp-page-shadow);
}

.mmp-why-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stacks at 900px, like the rest of the imprint pages: copy, then the
   image at full width. */
@media (max-width: 900px) {
  .mmp-why {
    padding-block: 68px !important;
  }

  .mmp-why-grid {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mmp-why-image {
    max-width: none;
    margin-left: 0 !important;
  }
}

@media (max-width: 781px) {
  .mmp-why-image {
    border-radius: 18px;
  }
}

/* Imprint page galleries (AMP, MMP; one look, AMP's values, 2026-10-25):
   main image left (65%), two side images stacked right. Side by side, the
   main image fills the row, so it ends level with the side images (Kevin,
   2026-10-25). Stacks at 900px, the main image then at least 420px tall
   (280px from 680px), as AMP's own image rule had it. */
.mmp-amp-gallery-grid,
.mmp-mmp-gallery-grid {
  --mmp-split: 65%;
  gap: 20px !important;
  align-items: stretch;
  margin-top: 36px !important;
}

.mmp-amp-gallery-main,
.mmp-mmp-gallery-main {
  height: 100%;
}

.mmp-amp-gallery-grid .mmp-amp-gallery-main img,
.mmp-mmp-gallery-grid .mmp-mmp-gallery-main img {
  height: 100%;
  min-height: 500px;
  object-fit: cover;
}

.mmp-amp-gallery-side,
.mmp-mmp-gallery-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mmp-amp-gallery-side .mmp-amp-image img,
.mmp-mmp-gallery-side .mmp-mmp-image,
.mmp-mmp-gallery-side .mmp-mmp-image img {
  min-height: 240px;
}

@media (max-width: 900px) {
  .mmp-amp-gallery-grid,
  .mmp-mmp-gallery-grid {
    flex-direction: column !important;
  }

  .mmp-amp-gallery-grid .mmp-amp-gallery-main img,
  .mmp-mmp-gallery-grid .mmp-mmp-gallery-main img {
    height: auto;
    min-height: 420px;
  }
}

@media (max-width: 680px) {
  .mmp-amp-gallery-grid .mmp-amp-gallery-main img,
  .mmp-mmp-gallery-grid .mmp-mmp-gallery-main img {
    min-height: 280px;
  }
}

/* Single product page: Coming Soon books can't be ordered yet (inc/mmp-catalog.php). */
.mmp-coming-soon-note {
  font-family: var(--mmp-font-body);
  font-weight: 700;
  color: var(--mmp-page-blue);
}