/* ==========================================================================
   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-blue: #3f5461;
    --mmp-page-sage: #6b7c7a;
    --mmp-page-gold: #d8b46a;
    --mmp-page-clay: #8a5f45;
    --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);

    /* ==================================================
       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);
    --brand-accent-secondary: var(--mmp-archive);

    /* ==================================================
       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);
    --mmp-color-border-light: rgba(51, 46, 43, 0.10);

    /* ==================================================
       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: 24px;

    --mmp-section-padding-lg: 96px;
    --mmp-section-padding-md: 72px;
    --mmp-section-padding-sm: 52px;

    --mmp-shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.06);
    --mmp-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.07);
}

/* ==========================================================================
   Future Brand Wrappers
   ========================================================================== */

.brand-mmp {
    --brand-accent: var(--mmp-river);
    --brand-accent-secondary: var(--mmp-archive);
}

.brand-sab {
    --brand-accent: var(--sab-steel);
    --brand-accent-secondary: var(--sab-sage);
}

.brand-amp {
    --brand-accent: var(--amp-forest);
    --brand-accent-secondary: var(--amp-field);
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   Imprints page width fixes
   Keeps full-width section backgrounds while constraining content.
   ========================================================================== */

.mmp-ip-hero-grid,
.mmp-ip-imprint-grid,
.mmp-ip-together-grid {
    max-width: var(--mmp-container-wide-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-inline: auto;
}

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

.mmp-ip-panels,
.mmp-ip-media-small-grid,
.mmp-ip-path-grid {
    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;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

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;
}

.mmp-section {
    padding-block: var(--mmp-section-padding-lg);
}

.mmp-section--medium {
    padding-block: var(--mmp-section-padding-md);
}

.mmp-section--compact {
    padding-block: var(--mmp-section-padding-sm);
}

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

.mmp-section--archive {
    background: var(--mmp-archive);
}

.mmp-section--ink {
    background: var(--mmp-ink);
    color: var(--mmp-white);
}

.mmp-section--accent {
    background: var(--brand-accent);
    color: var(--mmp-white);
}

.mmp-section--accent-secondary {
    background: var(--brand-accent-secondary);
}

.mmp-section--ink h1,
.mmp-section--ink h2,
.mmp-section--ink h3,
.mmp-section--ink h4,
.mmp-section--ink h5,
.mmp-section--ink h6,
.mmp-section--accent h1,
.mmp-section--accent h2,
.mmp-section--accent h3,
.mmp-section--accent h4,
.mmp-section--accent h5,
.mmp-section--accent h6 {
    color: var(--mmp-white);
}

.mmp-section--ink p,
.mmp-section--accent p {
    color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   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);
}

/* Books page: hero, "why" and CTA are centered 850px blocks by design
   (books.css). Let that win over the generic cap above. */
.entry-content > .wp-block-group > .wp-block-group.mmp-books-hero-inner,
.entry-content > .wp-block-group > .wp-block-group.mmp-books-why-inner,
.entry-content > .wp-block-group > .wp-block-group.mmp-books-cta-inner {
    max-width: 850px;
}

/* 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,
.entry-content .mmp-about-people-wrap > p,
.entry-content .mmp-books-hero-inner > p,
.entry-content .mmp-books-why-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: 1;
    font-weight: 800;
    letter-spacing: 0.14em;
    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: 1;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

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

.mmp-lede {
    max-width: 760px;
    color: var(--brand-accent);
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    line-height: 1.6;
}

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

.mmp-max-text {
    max-width: 760px;
}

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

.wp-block-button__link,
.mmp-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;
}

.mmp-button,
a.mmp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--mmp-ink);
    background: transparent;
    color: var(--mmp-ink);
}

.mmp-button:hover,
a.mmp-button:hover {
    background: var(--mmp-ink);
    color: var(--mmp-white);
}

.mmp-button--dark,
a.mmp-button--dark,
.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);
}

.mmp-button--dark:hover,
a.mmp-button--dark:hover,
.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);
}

.mmp-button--accent,
a.mmp-button--accent {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--mmp-white);
}

.mmp-button--accent:hover,
a.mmp-button--accent:hover {
    background: var(--mmp-ink);
    border-color: var(--mmp-ink);
    color: var(--mmp-white);
}

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

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

.mmp-card {
    background: var(--mmp-white);
    border: 1px solid var(--mmp-color-border);
    border-radius: 0;
    box-shadow: var(--mmp-shadow-card);
}

.mmp-card--flat {
    box-shadow: none;
}

.mmp-card--accent {
    border-color: var(--brand-accent);
}

/* ==========================================================================
   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;
}

.mmp-image-frame {
    border: 1px solid var(--mmp-color-border);
    box-shadow: var(--mmp-shadow-subtle);
}

.mmp-image-square {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.mmp-image-portrait {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.mmp-image-landscape {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* ==========================================================================
   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 24px
   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;
}

/* Grids that sit inside an already-guttered wrapper fill it instead of
   insetting another 24px (they used to start 48px in, off the header's
   edge). Covers the shared masthead and the Imprints and About Us heroes. */
.mmp-container-wide .mmp-masthead-grid,
.mmp-container-wide .mmp-ip-hero-grid,
.mmp-container-wide .mmp-ip-imprint-grid,
.mmp-container-wide .mmp-ip-together-grid,
.mmp-about-hero-wrap .mmp-about-hero-inner {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* About Us "image moment": a full-bleed background image (absolutely
   positioned), exempt from the content-width cap on images above. */
.entry-content > .wp-block-group > .wp-block-image.mmp-about-wide-image {
    width: auto;
    max-width: none;
    margin: 0 !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%;
}

/* 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;
}

.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: 20px;
        --mmp-section-padding-lg: 72px;
        --mmp-section-padding-md: 58px;
        --mmp-section-padding-sm: 44px;
    }

    body {
        font-size: 17px;
    }
}

@media (max-width: 544px) {
    :root {
        --mmp-container-padding: 18px;
        --mmp-section-padding-lg: 56px;
        --mmp-section-padding-md: 46px;
        --mmp-section-padding-sm: 36px;
    }

    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 {
  max-width: var(--mmp-container-wide-width);
  width: calc(100% - (var(--mmp-container-padding) * 2)) !important;
  margin: 0 auto !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: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  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: 0.95 !important;
  letter-spacing: -0.055em !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 tagline under the lede */
.mmp-masthead-note {
  font-family: var(--mmp-font-editorial);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--mmp-page-ink);
  border-left: 3px solid var(--mmp-page-gold);
  padding-left: 18px;
  max-width: 560px;
  margin: 26px 0 0 !important;
}

/* Optional pull-quote under the lede */
.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: 0.14em;
  line-height: 1;
  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 {
  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: -0.06em !important;
  line-height: 0.88 !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;
}

.mmp-masthead-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;
}

@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;
  }
}

/* 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);
}