/*
Theme Name: Black Moon
Theme URI: https://blackmoonrecordings.com
Author: Unnus Latif
Description: A block theme for Black Moon Recordings. Black and white, Archivo, photography first. Built to share a design language with unnuslatif.com.
Version: 2.4.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blackmoon
*/

/* No gap between the header and the first section, or between
   full-width sections. Normal paragraphs keep their spacing. */
body .wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull + .alignfull,
.wp-block-post-content > .alignfull + .wp-block-cover,
.wp-block-post-content > .wp-block-cover + .alignfull { margin-block-start: 0; }

/* Anchor links glide instead of jumping; sections leave a little
   room at the top when landed on. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 1.5rem; }

/* ------------------------------------------------------------
   Type. theme.json handles family, weight, size and case; this
   adds the extended width that makes the headings feel like the
   link page, and turns it off again for body copy.
   ------------------------------------------------------------ */

h1, h2, .wp-block-post-title,
.wp-block-site-title {
  font-stretch: 112%;
}
h3, h4, h5, h6 { font-stretch: 100%; }

.has-xx-large-font-size { font-stretch: 112%; }

/* Hairline rules used on section tops, columns, and lists. */
.bm-rule { border-top: 1px solid var(--wp--preset--color--rule); }

/* Dim body text helper (the "note" voice on the link page). */
.has-dim-color a { color: inherit; }

/* Column groups that should read as a row of panels with hairlines between them. */
.bm-panels > .wp-block-column {
  border-top: 1px solid rgba(242, 240, 235, 0.22);
  padding-top: 1.25rem;
}

/* ------------------------------------------------------------
   Photo sections. Same recipe as the link page: the photo shows
   in the upper part, the text sits at the bottom, and a gradient
   runs the bottom to near-black so every line is on a dark ground.
   The Overlay slider still works on top of this.
   ------------------------------------------------------------ */
.bm-section, .bm-hero { isolation: isolate; }
.bm-section::after, .bm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15,15,15,0) 0%, rgba(15,15,15,0.35) 40%, rgba(15,15,15,0.92) 100%),
    linear-gradient(90deg, rgba(15,15,15,0.45) 0%, rgba(15,15,15,0) 60%);
}
.bm-section .wp-block-cover__inner-container,
.bm-hero .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }

/* On a photo, secondary text is paper at 80%, not the flat-page grey. */
.bm-section .has-dim-color, .bm-hero .has-dim-color,
.bm-section .has-dim-color a, .bm-hero .has-dim-color a { color: rgba(242, 240, 235, 0.8) !important; }
.bm-section .wp-block-column { border-top-color: rgba(242, 240, 235, 0.3); }

/* ------------------------------------------------------------
   Buttons. Primary = paper on ink (from theme.json). Outline =
   the quiet second action.
   ------------------------------------------------------------ */

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background: transparent;
  color: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--dim);
  padding-top: calc(0.9rem - 1px);
  padding-bottom: calc(0.9rem - 1px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
  background: transparent;
  color: var(--wp--preset--color--paper);
  border-color: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------
   Black and white, guaranteed. The filter sits on the whole photo
   section, so a warm duotone, a coloured overlay, or a sepia
   original all come out neutral. Content images too.
   ------------------------------------------------------------ */

.wp-block-cover .wp-block-cover__video-background,
.wp-block-cover .wp-block-cover__image-background,
.wp-block-cover.has-parallax,
.wp-block-cover.is-repeated { filter: grayscale(1) contrast(1.05); }
.bm-section, .bm-hero { filter: grayscale(1); }
.wp-block-image img, .wp-block-media-text__media img { filter: grayscale(1); }
/* Fixed-background covers keep their filter but lose the parallax; that's a browser rule. */
.wp-block-cover.has-parallax { background-attachment: scroll; }

/* Hero and photo sections: line the bottom-left content up with the
   76rem grid used elsewhere, and keep the phone gutter. */
.bm-hero.has-custom-content-position .wp-block-cover__inner-container,
.bm-section.has-custom-content-position .wp-block-cover__inner-container {
  box-sizing: border-box;
  padding-left: max(var(--wp--preset--spacing--40), calc((100% - 76rem) / 2));
  padding-right: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--60);
  max-width: none;
}

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */

.wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--dim); }
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--paper); text-decoration: none; }
/* Phone menu overlay: dark, big stacked links, left-aligned. !important because
   core's block stylesheet loads after the theme's. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--ink) !important;
  color: var(--wp--preset--color--paper) !important;
  padding: 6rem 1.5rem 2.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; justify-content: flex-start !important; gap: 0.9rem !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--wp--preset--color--paper) !important;
  font-size: clamp(2rem, 9vw, 2.6rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--paper) !important; }
.wp-block-navigation__responsive-container-close { top: 1.25rem !important; right: 1.5rem !important; }
.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

/* ------------------------------------------------------------
   WooCommerce. The store inherits the tokens above; this trims
   the shadows, borders and colours Woo adds on its own.
   ------------------------------------------------------------ */

:root {
  --wc-primary: var(--wp--preset--color--paper);
  --wc-primary-text: var(--wp--preset--color--ink);
  --wc-secondary: var(--wp--preset--color--surface);
  --wc-secondary-text: var(--wp--preset--color--paper);
  --wc-highlight: var(--wp--preset--color--paper);
  --wc-highlight-text: var(--wp--preset--color--ink);
  --wc-content-bg: var(--wp--preset--color--ink);
  --wc-subtext: var(--wp--preset--color--dim);
  --wc-form-border-color: var(--wp--preset--color--rule);
  --wc-form-border-radius: 2px;
}

/* Product grid */
.wc-block-product-template .wc-block-product,
.wp-block-post-template .wc-block-product,
ul.products li.product { text-align: left; }

.wc-block-product .wp-block-post-title,
.wc-block-grid__product-title,
ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  font-stretch: 100%;
  margin: 0.75rem 0 0.15rem;
}

.wc-block-components-product-price,
.wc-block-grid__product-price,
ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--wp--preset--color--dim);
  font-size: 0.9375rem;
  font-weight: 400;
}
.wc-block-components-product-price ins, .price ins { text-decoration: none; color: var(--wp--preset--color--paper); }

.wc-block-product img,
ul.products li.product img,
.woocommerce-product-gallery__image img {
  border-radius: 2px;
  background: var(--wp--preset--color--surface);
}

/* Woo buttons: match the theme button */
.wc-block-components-button,
.wc-block-components-button:not(.is-link),
.wp-block-button.wc-block-components-product-button .wp-block-button__link,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  border: 0;
  border-radius: 2px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-transform: none;
  padding: 0.8rem 1.2rem;
  box-shadow: none;
  transition: background-color 120ms ease;
}
.wc-block-components-button:hover,
.wp-block-button.wc-block-components-product-button .wp-block-button__link:hover,
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover {
  background: #FFFFFF;
  color: var(--wp--preset--color--ink);
}
.wc-block-components-button.outlined, .wc-block-components-button.contained.outlined {
  background: transparent; color: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--dim);
}

/* Cards, panels, tables, notices */
.wc-block-components-order-summary,
.wc-block-components-sidebar-layout .wc-block-components-sidebar,
.wc-block-cart .wc-block-components-totals-wrapper,
.wc-block-components-panel,
.woocommerce-checkout #payment,
.woocommerce table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: transparent;
  border-color: var(--wp--preset--color--rule);
  border-radius: 2px;
  box-shadow: none;
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--wp--preset--color--rule); }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top: 1px solid var(--wp--preset--color--rule); border-left: 0; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--wp--preset--color--dim); }

/* Form fields */
.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px;
  color: var(--wp--preset--color--paper);
  font-family: inherit;
}
.wc-block-components-text-input input:focus,
.woocommerce form .form-row input.input-text:focus { border-color: var(--wp--preset--color--dim); outline: none; box-shadow: none; }

/* Single product */
.woocommerce div.product .product_title,
.wp-block-post-title.product_title { text-transform: none; font-stretch: 100%; letter-spacing: -0.02em; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-bottom: 1px solid var(--wp--preset--color--rule); border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--wp--preset--color--paper); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--wp--preset--color--dim); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--paper); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--wp--preset--color--rule); }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

/* Login / My account text link, and the mini cart */
.wp-block-woocommerce-customer-account .wc-block-customer-account__account-text,
.wp-block-woocommerce-customer-account a { color: var(--wp--preset--color--dim); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.wp-block-woocommerce-customer-account a:hover { color: var(--wp--preset--color--paper); }
/* Mini cart + account icons in the header */
.wc-block-mini-cart__button,
.wp-block-woocommerce-customer-account,
.wp-block-woocommerce-customer-account a,
.wp-block-woocommerce-customer-account a:hover { color: var(--wp--preset--color--paper) !important; }
.wp-block-woocommerce-customer-account svg,
.wc-block-customer-account__account-icon,
.wc-block-mini-cart__icon { fill: var(--wp--preset--color--paper) !important; color: var(--wp--preset--color--paper) !important; }
.wc-block-mini-cart__button { background: transparent; }
.wc-block-mini-cart__badge { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); border: 0; }
.wc-block-mini-cart__drawer { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.wc-block-components-drawer__close { color: var(--wp--preset--color--paper); }

/* Sale badge */
.wc-block-components-product-sale-badge, .woocommerce span.onsale {
  background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink);
  border: 0; border-radius: 2px; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------
   Forms, site-wide. Covers Woo quantity, sorting, review form,
   checkout fields, and anything else that renders an input.
   ------------------------------------------------------------ */

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select,
.woocommerce .quantity .qty {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  max-width: 100%;
}
select { padding-right: 2rem; }
input:focus, textarea:focus, select:focus { border-color: var(--wp--preset--color--dim); outline: none; box-shadow: none; }
label { color: var(--wp--preset--color--dim); font-size: 0.9375rem; }
.woocommerce .quantity .qty { width: 4.5rem; text-align: center; }

/* Product grid: left-aligned card text, whatever Woo's template says */
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-price,
.wc-block-product .wc-block-components-product-rating,
.wc-block-product .wc-block-components-product-button,
.wc-block-product .has-text-align-center,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .button {
  text-align: left !important;
  justify-content: flex-start !important;
}
.wc-block-components-product-button .wp-block-button { margin-left: 0; }
.wc-block-product .wp-block-post-title a { text-decoration: none; }
.wc-block-product .wp-block-post-title a:hover { text-decoration: underline; }

/* Single product: sentence-case name, modest section headings */
.single-product .wp-block-post-title,
.woocommerce div.product .product_title {
  text-transform: none;
  font-stretch: 100%;
  letter-spacing: -0.025em;
  font-size: var(--wp--preset--font-size--x-large);
}
.woocommerce-Reviews-title,
#reviews h2, #comments h2,
.related > h2,
.wp-block-woocommerce-related-products h2,
.up-sells > h2,
.wp-block-woocommerce-product-details h2,
.woocommerce-tabs .panel h2,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
  font-size: var(--wp--preset--font-size--large) !important;
  letter-spacing: -0.02em;
}
.comment-reply-title { display: block; font-weight: 600; }
.woocommerce .star-rating span::before, .woocommerce .star-rating::before, .stars a { color: var(--wp--preset--color--paper); }
.woocommerce-breadcrumb { color: var(--wp--preset--color--dim); font-size: 0.875rem; }
.woocommerce-breadcrumb a { color: var(--wp--preset--color--dim); }
.woocommerce-result-count { color: var(--wp--preset--color--dim); }
.wc-block-components-product-button.align-center { justify-content: flex-start; text-align: left; }
.wc-block-components-product-button .wp-block-button__link { margin: 0.35rem 0 0; }

/* Woo notice banners: no traffic-light colours */
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-error {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px;
  color: var(--wp--preset--color--paper);
}
.wc-block-components-notice-banner > svg { background: var(--wp--preset--color--paper); fill: var(--wp--preset--color--ink); }
.wc-block-components-notice-banner a { color: var(--wp--preset--color--paper); }
.wc-block-components-totals-wrapper, .wc-block-components-totals-item { border-color: var(--wp--preset--color--rule); }

/* Selected work: on phones the player comes first, then the buttons share a row. */
@media (max-width: 781px) {
  #work .wp-block-columns { display: flex; flex-direction: column; }
  #work .wp-block-columns > .wp-block-column:first-child { order: 2; }
  #work .wp-block-columns > .wp-block-column:last-child { order: 1; }
  #work .wp-block-buttons { flex-wrap: nowrap; gap: 0.5rem; }
  #work .wp-block-buttons .wp-block-button { flex: 1 1 0; }
  #work .wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* ============================================================
   v1.4: store pass
   ============================================================ */

/* Product grids: every thumbnail the same square, whatever shape the photo is. */
.bm-grid .wc-block-components-product-image,
.bm-grid .wc-block-components-product-image a { display: block; }
.bm-grid .wc-block-components-product-image img,
ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  height: auto;
  border-radius: 2px;
  background: var(--wp--preset--color--surface);
}
.bm-grid .wp-block-post-title { font-size: 1rem; }
.bm-grid .wp-block-post-title a { text-decoration: none; }
.bm-grid .wp-block-post-title a:hover { text-decoration: underline; }
.bm-grid .wc-block-components-product-price { text-align: left; }

/* Selects: draw our own, so Safari can't clip the option text. */
select,
.woocommerce div.product form.cart .variations select,
.wc-block-components-sort-select__select,
.woocommerce-ordering select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: auto;
  line-height: 1.3;
  padding: 0.6rem 2.4rem 0.6rem 0.8rem;
  min-width: 11rem;
  background-color: var(--wp--preset--color--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23F2F0EB' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  color: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px;
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
select option { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--paper); }

/* Variations table on the product page */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { border: 0; padding: 0; vertical-align: middle; }
.woocommerce div.product form.cart .variations tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.woocommerce div.product form.cart .variations th.label { min-width: 4rem; }
.woocommerce div.product form.cart .variations label { color: var(--wp--preset--color--dim); font-size: 0.9375rem; }
.woocommerce div.product form.cart .reset_variations { color: var(--wp--preset--color--dim); font-size: 0.8125rem; margin-left: 0.5rem; }
.woocommerce div.product form.cart .woocommerce-variation-price { margin-bottom: 0.75rem; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart .single_variation_wrap { flex-basis: 100%; }

/* Disabled add-to-cart (nothing selected yet): quiet, not a grey slab */
.woocommerce .button.disabled, .woocommerce .button:disabled,
.woocommerce a.button.disabled, .woocommerce button.button.disabled,
.woocommerce button.button:disabled[disabled] {
  background: transparent;
  color: var(--wp--preset--color--dim);
  border: 1px solid var(--wp--preset--color--rule);
  opacity: 1;
  cursor: not-allowed;
}

/* Headings written inside product descriptions are copy, not poster type. */
.wp-block-woocommerce-product-details h1, .wp-block-woocommerce-product-details h2,
.wp-block-woocommerce-product-details h3, .wp-block-woocommerce-product-details h4,
.woocommerce-Tabs-panel h1, .woocommerce-Tabs-panel h2, .woocommerce-Tabs-panel h3, .woocommerce-Tabs-panel h4,
.wp-block-post-excerpt h1, .wp-block-post-excerpt h2, .wp-block-post-excerpt h3 {
  text-transform: none;
  font-stretch: 100%;
  letter-spacing: -0.015em;
  line-height: 1.25;
  font-weight: 700;
}
.wp-block-woocommerce-product-details h1, .woocommerce-Tabs-panel h1 { font-size: var(--wp--preset--font-size--large); }
.wp-block-woocommerce-product-details h2, .woocommerce-Tabs-panel h2 { font-size: 1.2rem; }
.wp-block-woocommerce-product-details h3, .wp-block-woocommerce-product-details h4,
.woocommerce-Tabs-panel h3, .woocommerce-Tabs-panel h4 { font-size: 1.0625rem; }
.woocommerce-Tabs-panel > h2:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Woo repeats the tab name as a heading */
.wp-block-woocommerce-product-details p, .woocommerce-Tabs-panel p { color: rgba(242, 240, 235, 0.85); max-width: 46rem; }
.wp-block-woocommerce-product-details iframe, .woocommerce-Tabs-panel iframe { max-width: 100%; border-radius: 2px; }

/* Product meta line */
.wp-block-woocommerce-product-meta { color: var(--wp--preset--color--dim); margin-top: 1.25rem; }
.wp-block-woocommerce-product-meta a { color: var(--wp--preset--color--dim); }
.wp-block-woocommerce-product-meta a:hover { color: var(--wp--preset--color--paper); }

/* Gallery */
.wc-block-product-gallery, .woocommerce-product-gallery { --wc-product-gallery-border-radius: 2px; }
.woocommerce-product-gallery__trigger { background: var(--wp--preset--color--paper); }

/* Short description under the price */
.wp-block-post-excerpt.has-dim-color p { color: rgba(242, 240, 235, 0.85); }

/* Pagination */
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { color: var(--wp--preset--color--dim); text-decoration: none; }
.wp-block-query-pagination a:hover, .wp-block-query-pagination .current { color: var(--wp--preset--color--paper); }

/* Store title and count */
.wp-block-query-title { margin-top: 0.25rem; }
.woocommerce-result-count, .wc-block-product-results-count { color: var(--wp--preset--color--dim); font-size: 0.875rem; }

.bm-related { margin-top: var(--wp--preset--spacing--70); }

/* ============================================================
   v2.0: motion and the contact form
   ============================================================ */

/* Reveal on scroll. Only when JS is present (html.bm-js), so
   nothing is ever hidden without it. Reduced motion turns it off. */
.bm-js .bm-reveal {
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.2,.65,.2,1), transform 900ms cubic-bezier(.2,.65,.2,1);
  transition-delay: calc(var(--bm-i, 0) * 90ms);
  will-change: opacity, transform;
}
.bm-js .bm-reveal.bm-up         { transform: translateY(22px); }
.bm-js .bm-reveal.bm-up-zoom    { transform: translateY(26px) scale(0.965); }
.bm-js .bm-reveal.bm-from-left  { transform: translateX(-40px); }
.bm-js .bm-reveal.bm-from-right { transform: translateX(40px); }
.bm-js .bm-reveal.is-in         { opacity: 1; transform: none; }

/* Logo settles into place on load */
@keyframes bm-logo-in {
  from { opacity: 0; transform: rotate(-14deg) scale(0.85); }
  to   { opacity: 1; transform: none; }
}
.bm-js .wp-block-site-logo img { animation: bm-logo-in 1100ms cubic-bezier(.2,.65,.2,1) both; }
.bm-js .wp-block-navigation-item { animation: bm-fade-in 700ms ease both; animation-delay: calc(400ms + var(--bm-n, 0) * 60ms); }
@keyframes bm-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Photo backgrounds: slightly oversized so the parallax drift never shows an edge.
   translate (drift) and scale (hero settle) are separate properties so they don't fight. */
.bm-js .bm-parallax { scale: 1.12; will-change: translate; }
.bm-js .bm-hero .wp-block-cover__image-background { transition: scale 8s ease-out; scale: 1.16; }
.bm-js .bm-hero.is-loaded .wp-block-cover__image-background { scale: 1.12; }

/* Quiet hover motion */
.bm-grid .wc-block-product img { transition: transform 500ms cubic-bezier(.2,.6,.2,1); }
.bm-grid .wc-block-product:hover img { transform: scale(1.03); }
.wp-block-button__link { transition: background-color 120ms ease, border-color 120ms ease, transform 160ms ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-navigation .wp-block-navigation-item__content { transition: color 140ms ease; }

/* Contact form */
.bm-contact { display: grid; gap: 1rem; }
.bm-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.bm-contact__wide { grid-column: 1 / -1; }
.bm-contact__field, .bm-contact label:not(.bm-contact__check) { display: grid; gap: 0.35rem; color: rgba(242,240,235,0.8); font-size: 0.9375rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.bm-contact legend { padding: 0; margin-bottom: 0.35rem; }
.bm-opt { color: rgba(242,240,235,0.45); font-size: 0.8125rem; margin-left: 0.25rem; }
.bm-contact input:not([type="checkbox"]), .bm-contact textarea, .bm-contact select {
  width: 100%;
  background: rgba(15,15,15,0.7);
  border: 1px solid rgba(242,240,235,0.25);
  color: var(--wp--preset--color--paper);
  border-radius: 2px;
  padding: 0.75rem 0.85rem;
  font: inherit;
  min-width: 0;
}
.bm-contact select { padding-right: 2.4rem; min-width: 0; }
.bm-contact input:focus, .bm-contact textarea:focus, .bm-contact select:focus { border-color: var(--wp--preset--color--paper); outline: none; }
.bm-contact input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 3rem; }
.bm-contact input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; }
.bm-contact__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.45rem 1rem; }
.bm-contact__check { display: flex; align-items: center; gap: 0.55rem; color: var(--wp--preset--color--paper); font-size: 0.9375rem; cursor: pointer; }
.bm-contact__check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--wp--preset--color--paper); }
.bm-contact .is-missing input, .bm-contact .is-missing select, .bm-contact .is-missing textarea,
fieldset.is-missing .bm-contact__checks { outline: 1px solid #F0A0A0; outline-offset: 2px; border-radius: 2px; }
.bm-contact ::placeholder { color: rgba(242,240,235,0.4); }
.bm-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bm-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.25rem; }
.bm-contact__actions button.wp-block-button__link { height: auto; align-self: flex-start; padding: 0.9rem 1.6rem; }
.bm-contact__alt { color: rgba(242,240,235,0.7); font-size: 0.9rem; }
.bm-contact__alt a { color: var(--wp--preset--color--paper); }
@media (max-width: 599px) { .bm-contact__alt { flex-basis: 100%; } }
.bm-contact__status { margin: 0; min-height: 1.4em; font-size: 0.9375rem; }
.bm-contact__status.is-ok { color: var(--wp--preset--color--paper); }
.bm-contact__status.is-error { color: #F0A0A0; }

/* Apple Music embed fills its column */
.bm-embed { display: block; width: 100%; }

/* Store strip on the home page */
#store .wp-block-buttons { margin-bottom: 0.35rem; }

/* Gallery */
.bm-gallery .wp-block-image img { border-radius: 2px; filter: grayscale(1); }
/* Sideways entrances never cause a horizontal scrollbar */
.wp-site-blocks { overflow-x: clip; }

/* ============================================================
   Phones: a step down in type, shorter photo sections, less scroll.
   ============================================================ */
@media (max-width: 599px) {
  body { font-size: 16px; }
  h1, .wp-block-heading.has-xx-large-font-size { font-size: 2.35rem !important; letter-spacing: -0.035em; }
  h2 { font-size: 1.85rem !important; }
  h3 { font-size: 1.15rem !important; }
  .has-large-font-size { font-size: 1.1rem !important; }
  .bm-hero { min-height: 82svh !important; padding-top: var(--wp--preset--spacing--60) !important; }
  .bm-section { min-height: 0 !important; padding-top: clamp(8rem, 30vh, 12rem) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
  main .wp-block-group.alignfull { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
  #about .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
  .bm-embed { height: 380px; }
  .wp-block-columns { gap: 1.25rem !important; }
  /* form: short fields pair up, checkboxes in two columns, tighter inputs */
  .bm-contact__grid { grid-template-columns: 1fr 1fr; gap: 0.75rem 0.75rem; }
  .bm-contact__grid > .bm-contact__field:nth-child(-n+2) { grid-column: 1 / -1; }   /* name, email full width */
  .bm-contact input:not([type="checkbox"]), .bm-contact select { padding: 0.65rem 0.75rem; }
  .bm-contact select { padding-right: 2.2rem; }
  .bm-contact__checks { grid-template-columns: 1fr 1fr; gap: 0.4rem 0.6rem; }
  .bm-contact__check { font-size: 0.875rem; }
}

/* HubSpot's embedded form, on a paper card so its white background is a choice */
.bm-hscard { background: var(--wp--preset--color--paper); border-radius: 2px; padding: clamp(1rem, 3vw, 1.75rem); }
.bm-hscard iframe { width: 100% !important; display: block; }
.bm-hsform:empty { min-height: 28rem; }
.bm-contact__alt--below { margin: 0.9rem 0 0; }
@media (max-width: 599px) { .bm-hscard { padding: 0.75rem; } }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation-delay: calc(var(--bm-n, 0) * 70ms); animation-duration: 450ms; }