/* Theme Name: Neil Mcinnes 2026 Theme URI: https://neilmcinnes.com Author: Neil McInnes Author URI: https://neilmcinnes.com Description: A lean, modern full-site editing theme for the Neil McInnes artist portfolio. Requires at least: 6.7 Tested up to: 6.8 Requires PHP: 7.4 Version: 1.0.323 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: neil-mcines-2026 Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, portfolio, blog */ /* * theme.json custom keys "h1"…"h6" are kebab-cased by WordPress to --h-1…--h-6. * Styles (and this file) historically reference --h1…--h6. Alias so both resolve. */ :root { --wp--custom--font-size--h1: var(--wp--custom--font-size--h-1, 3.161rem); --wp--custom--font-size--h2: var(--wp--custom--font-size--h-2, 2.7676rem); --wp--custom--font-size--h3: var(--wp--custom--font-size--h-3, 2.4172rem); --wp--custom--font-size--h4: var(--wp--custom--font-size--h-4, 1.8477rem); --wp--custom--font-size--h5: var(--wp--custom--font-size--h-5, 1.4944rem); --wp--custom--font-size--h6: var(--wp--custom--font-size--h-6, 1.0466rem); } /* * Keep the hamburger/close X on the same horizontal inset when the overlay * locks scroll (otherwise losing the scrollbar shifts the close ~15px right). */ html { scrollbar-gutter: stable; } /* * Hide from sighted visitors. The element stays in the document, so search * engines and screen readers still read it. Focus brings links and controls back. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .visually-hidden:focus, .visually-hidden:focus-visible { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } body { font-family: var(--wp--custom--font-family--base, "Figtree", sans-serif); font-optical-sizing: auto; font-style: normal; font-weight: var(--wp--custom--font-weight--medium, 500); color: var(--wp--custom--color--grey, #73736f); } .has-figtree-font-family { font-family: var(--wp--custom--font-family--base, "Figtree", sans-serif); font-optical-sizing: auto; font-style: normal; } /* ------------------------------------------------------------------------- Heading utilities (match Figma type styles; Figtree instead of Avenir) Usage:

looks like an H1 ------------------------------------------------------------------------- */ .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--wp--custom--font-family--heading, "Figtree", sans-serif); font-optical-sizing: auto; font-style: normal; font-weight: var(--wp--custom--font-weight--medium, 500); letter-spacing: var(--wp--custom--letter-spacing--none, 0); color: var(--wp--custom--color--black, #181818); } .h1 { font-size: var(--wp--custom--font-size--h1); line-height: var(--wp--custom--line-height--heading, 1); } .h2 { font-size: var(--wp--custom--font-size--h2); line-height: var(--wp--custom--line-height--heading, 1); } .h3 { font-size: var(--wp--custom--font-size--h3); line-height: var(--wp--custom--line-height--heading, 1); } .h4 { font-size: var(--wp--custom--font-size--h4); line-height: var(--wp--custom--line-height--heading, 1); } .h5 { font-size: var(--wp--custom--font-size--h5); line-height: var(--wp--custom--line-height--body, 1.56); } .h6 { font-size: var(--wp--custom--font-size--h6); line-height: var(--wp--custom--line-height--heading, 1); } /* ------------------------------------------------------------------------- Page header H1 — theme black (body default text is grey; lede paragraphs stay muted). !important beats core .has-muted-color on saved archive intro headings. ------------------------------------------------------------------------- */ .nm-artwork__title, .nm-about__name, .nm-contact__heading, .nm-essays__title, .nm-visual-art-archive__title, .nm-media-art-archive__title, .nm-illustration-archive__title, .nm-exhibitions-archive__title, .nm-artwork__intro > h1, .nm-about__intro > h1, .nm-contact__intro > h1, .nm-essays__intro-title-col > h1, .nm-visual-art-archive__intro h1, .nm-media-art-archive__intro h1, .nm-illustration-archive__intro h1, .nm-exhibitions-archive__intro h1, .nm-visual-art-archive__intro .nm-visual-art-archive__subtitle, .nm-media-art-archive__intro .nm-media-art-archive__subtitle, .nm-illustration-archive__intro .nm-illustration-archive__subtitle, .nm-exhibitions-archive__intro .nm-exhibitions-archive__subtitle, main > h1.wp-block-post-title, main > .wp-block-post-title, .nm-essays__list > .wp-block-query-title, main > .wp-block-group > h1.wp-block-heading:first-child { color: var(--wp--preset--color--black, var(--wp--custom--color--black, #181818)) !important; } /* ------------------------------------------------------------------------- Utilities ------------------------------------------------------------------------- */ .shadow { box-shadow: 0 18px 15px 0 rgba(0, 0, 0, 0.25); } img.shadow { border-radius: 2px; } /* ------------------------------------------------------------------------- Project Image block Hover lift lives on the , not the . .nm-img-fade sets `transition: opacity` on the image with higher specificity, which was wiping `transition: transform` and making the lift instantaneous. ------------------------------------------------------------------------- */ .nm-project-image { width: 100%; overflow: visible; /* Room for translateY(-5px) so the lift is not clipped. */ padding-top: 5px; margin-top: -5px; } .nm-project-image a, .nm-project-image__link { display: block; line-height: 0; overflow: visible; transition: transform 0.3s ease-in-out; } .nm-project-image img, .nm-project-image img.shadow { width: 100%; height: auto; display: block; } .nm-project-image a:hover, .nm-project-image a:focus-visible, .nm-project-image__link:hover, .nm-project-image__link:focus-visible { transform: translateY(-5px); } @media (prefers-reduced-motion: reduce) { .nm-project-image a, .nm-project-image__link { transition: none; } .nm-project-image a:hover, .nm-project-image a:focus-visible, .nm-project-image__link:hover, .nm-project-image__link:focus-visible { transform: none; } } /* ------------------------------------------------------------------------- Image load fade-in (hold space via width/height attrs; fade once decoded) ------------------------------------------------------------------------- */ .wp-site-blocks img.nm-img-fade { opacity: 0; transition: opacity 0.4s ease; } .wp-site-blocks img.nm-img-fade.nm-img-loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { .wp-site-blocks img.nm-img-fade { opacity: 1; transition: none; } } /* No JS — keep images visible (fade script never marks .nm-img-loaded). */ @media (scripting: none) { .wp-site-blocks img.nm-img-fade { opacity: 1; transition: none; } } p:not(.wp-block-site-title):not(.nm-header__section), .wp-block-paragraph:not(.nm-header__section) { font-family: var(--wp--custom--font-family--base, "Figtree", sans-serif); font-size: var(--wp--custom--font-size--body); font-weight: var(--wp--custom--font-weight--medium, 500); line-height: var(--wp--custom--line-height--body, 1.56); color: var(--wp--custom--color--grey, #73736f); } li, figcaption, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-table, .wp-block-post-excerpt, .wp-block-post-date, .wp-block-post-author, .wp-block-post-terms, .wp-block-site-tagline { color: var(--wp--custom--color--grey, #73736f); } a { color: var(--wp--custom--color--grey, #73736f); text-decoration: none; } a:hover { color: var(--wp--custom--color--black, #181818); } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a, .wp-block-post-title a, .wp-block-site-title a { color: inherit; } /* ------------------------------------------------------------------------- Text links — 2px pseudo underline (never native text-decoration underline) Utility: .nm-text-link · auto in post content · home-footer · about exhibition Excludes: buttons, image links, nav, site title ------------------------------------------------------------------------- */ a.nm-text-link, .entry-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img)), .wp-block-post-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img)), .nm-home-footer__link a, .nm-about__exhibition-link a, .nm-contact__detail a, .nm-visual-art-archive__explore a, .nm-media-art-archive__explore a, .nm-artwork__collection-explore a, .nm-project-details__watch-video a { position: relative; text-decoration: none; } /* Wrapping

must never use native underline — it paints through the child . */ .nm-home-footer__link, .nm-about__exhibition-link, .nm-contact__detail, .nm-visual-art-archive__explore, .nm-media-art-archive__explore, .nm-artwork__collection-explore, .nm-project-details__watch-video { text-decoration: none !important; } .nm-home-footer__link::after, .nm-about__exhibition-link::after, .nm-contact__detail::after, .nm-visual-art-archive__explore::after, .nm-media-art-archive__explore::after, .nm-artwork__collection-explore::after, .nm-project-details__watch-video::after { content: none; } a.nm-text-link::after, .entry-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img))::after, .wp-block-post-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img))::after, .nm-home-footer__link a::after, .nm-about__exhibition-link a::after, .nm-contact__detail a::after, .nm-visual-art-archive__explore a::after, .nm-media-art-archive__explore a::after, .nm-artwork__collection-explore a::after, .nm-project-details__watch-video a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: var(--wp--custom--color--surface, #f6f6f5); transform: translateY(2px); transition: transform 0.5s ease, background-color 0.5s ease; pointer-events: none; } a.nm-text-link:hover::after, a.nm-text-link:focus-visible::after, .entry-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img)):hover::after, .entry-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img)):focus-visible::after, .wp-block-post-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img)):hover::after, .wp-block-post-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img)):focus-visible::after, .nm-home-footer__link a:hover::after, .nm-home-footer__link a:focus-visible::after, .nm-about__exhibition-link a:hover::after, .nm-about__exhibition-link a:focus-visible::after, .nm-contact__detail a:hover::after, .nm-contact__detail a:focus-visible::after, .nm-visual-art-archive__explore a:hover::after, .nm-visual-art-archive__explore a:focus-visible::after, .nm-media-art-archive__explore a:hover::after, .nm-media-art-archive__explore a:focus-visible::after, .nm-artwork__collection-explore a:hover::after, .nm-artwork__collection-explore a:focus-visible::after, .nm-project-details__watch-video a:hover::after, .nm-project-details__watch-video a:focus-visible::after { transform: translateY(5px); background-color: var(--wp--custom--color--black, #181818); } @media (prefers-reduced-motion: reduce) { a.nm-text-link::after, .entry-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img))::after, .wp-block-post-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img))::after, .nm-home-footer__link a::after, .nm-about__exhibition-link a::after, .nm-contact__detail a::after, .nm-visual-art-archive__explore a::after, .nm-media-art-archive__explore a::after { transition: background-color 0.01ms linear; } a.nm-text-link:hover::after, a.nm-text-link:focus-visible::after, .entry-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img)):hover::after, .entry-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img)):focus-visible::after, .wp-block-post-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img)):hover::after, .wp-block-post-content a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .nm-artwork__recent-title-link, .nm-featured-artwork__title-link, .nm-about__exhibition-title-link)):not(:has(img)):focus-visible::after, .nm-home-footer__link a:hover::after, .nm-home-footer__link a:focus-visible::after, .nm-about__exhibition-link a:hover::after, .nm-about__exhibition-link a:focus-visible::after, .nm-contact__detail a:hover::after, .nm-contact__detail a:focus-visible::after, .nm-visual-art-archive__explore a:hover::after, .nm-visual-art-archive__explore a:focus-visible::after, .nm-media-art-archive__explore a:hover::after, .nm-media-art-archive__explore a:focus-visible::after { transform: translateY(2px); } } /* * Focus rings: keyboard-only via :focus-visible. * Mouse/touch :focus does not leave an outline; Tab / keyboard still does. * No JS polyfill — theme targets modern browsers (WP 6.7+). */ :where(.wp-site-blocks *:focus:not(:focus-visible)) { outline: none; } :where(.wp-site-blocks *:focus-visible) { outline-width: 2px; outline-style: solid; outline-offset: 2px; } /* ------------------------------------------------------------------------- Kill WP layout blockGap on main. theme.json styles.spacing.blockGap emits: .wp-site-blocks > * + * { margin-block-start: var(--wp--style--block-gap); } which spaces header → main. Zero block-start on main only; leave other gaps. ------------------------------------------------------------------------- */ .wp-site-blocks > main, .wp-site-blocks > .wp-block-group:has(> main), .wp-site-blocks > .wp-block-template-part:has(> main), main.wp-block-group { margin-block-start: 0; padding-block-start: 0; } /* * A new page with no designed header sits against the site header. * X-Large (spacing 70) opens the content area. Skip the front page, the * posts page, and any page whose content already includes a header * (post, exhibit, visual art, media art, illustration, or a full page shell). */ body.page-template-default:not(.home):not(.blog) main.wp-block-group, body.page-template-page-no-title main.wp-block-group:not(:has( .post-header, .exhibit-header, .visual-art-header, .media-art-header, .illustration-header, .nm-about, .nm-artwork, .nm-contact )) { padding-top: var(--wp--preset--spacing--70, clamp(2.5rem, 6vw, 4.5rem)); } /* ------------------------------------------------------------------------- Horizontal inset — keep side padding on full-bleed sections at all widths (alignfull + alignwide). Uses root padding vars from theme.json. ------------------------------------------------------------------------- */ .nm-header.alignfull, .nm-footer.alignfull, .nm-home-footer.alignfull, .nm-about.alignfull, .nm-artwork.alignfull, .nm-contact.alignfull, .nm-post.alignfull, .nm-exhibit.alignfull, .nm-media-art.alignfull, .nm-visual-art.alignfull, .nm-visual-art-archive.alignfull, .nm-media-art-archive.alignfull, .nm-illustration-archive.alignfull { box-sizing: border-box; padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem)); padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 1.25rem)); } /* * Post-type single headers (title + category/label): Large top spacing. * Covers exhibit / media art / visual art template wrappers. * Essay post (.nm-post) uses archive-style intro padding (80 / 60) instead. */ .nm-exhibit.alignfull, .nm-media-art.alignfull, .nm-visual-art.alignfull { padding-top: var(--wp--preset--spacing--60, clamp(1.75rem, 4vw, 3rem)) !important; } /* * Essays archive inset (intro columns + article cards including thumbnails). * * Pad the intro columns grid itself (.nm-essays__intro-grid) — that is the * element wrapping the title/lede columns — and .nm-essays__list with the same * root padding vars. Do not rely on max-width alone near ~1170px viewports. * Never put horizontal padding on .nm-essay__heading. */ .nm-essays > .nm-essays__intro.alignfull, .nm-essays > .nm-essays-query { margin-left: 0; margin-right: 0; width: auto; max-width: none; } /* Intro band: vertical only; horizontal inset is on the inner columns grid. */ .nm-essays__intro.alignfull, .nm-essays__intro { box-sizing: border-box; padding-left: 0 !important; padding-right: 0 !important; } /* Intro columns + article list — matching horizontal inset (root padding vars). */ .nm-essays__intro > .nm-essays__intro-grid, .nm-essays__intro .nm-essays__intro-grid.nm-essays__inner, .nm-essays-query .nm-essays__list { box-sizing: border-box; padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem)) !important; padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 1.25rem)) !important; } /* ------------------------------------------------------------------------- Header (Figma: Header / 2001:76) Single row: brand left · nav right (gap 12px, items nowrap) ------------------------------------------------------------------------- */ /* Slim copyright footer: chrome border (beats FSE inline overrides). */ .nm-footer.alignfull:has(> .nm-footer__chrome) { border-top: 1px solid var(--wp--preset--color--chrome-border, #BCBCAD) !important; } /* Desktop header rule: 1px chrome border (beats FSE inline grey). */ @media (min-width: 1200px) { header.nm-header.alignfull { border-bottom: 1px solid var(--wp--preset--color--chrome-border, #BCBCAD) !important; } } .nm-header__inner { width: 100%; max-width: none; flex-wrap: nowrap; align-items: center; gap: 1.5rem; } /* Override Site Editor–saved header parts (alignwide / constrained parent). */ .nm-header.is-layout-constrained > .nm-header__inner, .nm-header .nm-header__inner.alignwide { width: 100%; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .nm-header__brand { flex-shrink: 0; gap: 0.3125rem; /* 5px */ white-space: nowrap; /* * Single type size for site title + "/ …" suffix. * Children inherit so they cannot diverge (e.g. body

rules beating --h4). */ font-family: var(--wp--custom--font-family--heading, "Figtree", sans-serif); font-size: var(--wp--custom--font-size--h4, 1.8477rem); font-weight: 500; line-height: var(--wp--custom--line-height--heading, 1); } .nm-header__brand .nm-header__title, .nm-header__brand .nm-header__title a, .nm-header__brand .nm-header__section, .nm-header__brand .nm-header__section a { margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; text-decoration: none; white-space: nowrap; } .nm-header__title, .nm-header__title a { color: var(--wp--preset--color--black); } .nm-header__section { margin: 0; white-space: nowrap; } /* * Header collapse band (≤1199px): * Force WP Navigation overlay/hamburger (core default is 600px via * @media (min-width: 600px) on .wp-block-navigation__responsive-container* * and the open button). Horizontal nowrap links overflow well above 600px. */ @media (max-width: 1199px) { .nm-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .nm-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } .nm-header__nav { flex-shrink: 0; } .nm-header__nav .wp-block-navigation__container, .nm-header__nav .wp-block-navigation__responsive-container-content { flex-wrap: nowrap !important; align-items: center; gap: 0.75rem; /* 12px */ } .nm-header__nav .wp-block-navigation-item { flex-shrink: 0; } .nm-header__nav .wp-block-navigation-item__content { position: relative; padding: 0.6875rem 0.625rem; /* 11px 10px */ color: var(--wp--preset--color--grey, #73736f); font-size: var(--wp--custom--font-size--menu, 1.25rem); /* 20px */ font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; } .nm-header__nav .wp-block-navigation-item__content:hover, .nm-header__nav .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--black); text-decoration: none; } /* Same 2px ::after underline as .nm-text-link — inset to padding so line sits under the label. */ .nm-header__nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0.625rem; bottom: 0.6875rem; width: calc(100% - 1.25rem); height: 2px; background-color: var(--wp--custom--color--surface, #f6f6f5); opacity: 0; transform: translateY(2px); transition: transform 0.5s ease, background-color 0.5s ease, opacity 0.5s ease; pointer-events: none; } .nm-header__nav .wp-block-navigation-item__content:hover::after, .nm-header__nav .wp-block-navigation-item__content:focus-visible::after { opacity: 1; transform: translateY(5px); background-color: var(--wp--custom--color--black, #181818); } @media (prefers-reduced-motion: reduce) { .nm-header__nav .wp-block-navigation-item__content::after { transition: background-color 0.01ms linear, opacity 0.01ms linear; } .nm-header__nav .wp-block-navigation-item__content:hover::after, .nm-header__nav .wp-block-navigation-item__content:focus-visible::after { transform: translateY(2px); } } /* * Mobile overlay drawer: center menu items/text. * Desktop keeps items-justified-right; WP overlay reuses * --navigation-layout-justification-setting for column align-items (was flex-end). * * Close control must share the hamburger’s screen box (≤1199px): * - overlay keeps horizontal inset (root padding); vertical inset lives on the * dialog scrollport (top 1.61rem; bottom 3.22rem = 2× — was equal 1.61rem) * - content: kill WP’s pad-top-only calc(2rem + 24px) for absolute close; close is * sticky/in-flow now — padding + margin top/bottom stay equal (0) * - top offset centers the icon in the brand/h4 line (same as flex-centered open btn) * * Scroll: html.has-modal-open locks page scroll; Lenis is paused while open * (see nm-nav-dropdowns.js). The dialog is the scrollport (not the overlay) so a * sticky close can stay on screen — position:fixed is trapped by WP’s overlay * transform / fixed scroll container and scrolls away with content. * Scrollbar is hidden (wheel/touch still scroll). */ .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open { --navigation-layout-justification-setting: center; padding-top: 0; padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 1.25rem)); padding-bottom: 0; padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem)); overflow: hidden; max-height: 100%; max-height: 100dvh; } /* Drop WP wide-size centering; shell fills overlay, dialog is the scrollport. */ .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { max-width: none; width: 100%; margin-left: 0; margin-right: 0; height: 100%; max-height: 100%; overflow: hidden; } .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { max-width: none; width: 100%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; height: 100%; max-height: 100%; padding-top: 1.61rem; padding-bottom: 3.22rem; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; } .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::-webkit-scrollbar { display: none; } /* * Content grows with nested lists; vertical scroll stays on the dialog. * Override WP overlay content pad-top: calc(2rem + 24px) (no pad-bottom) so * top/bottom padding and margin stay symmetric once the close is sticky/in-flow. */ .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { overflow: visible; max-height: none; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list, .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item:last-child, .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list > .wp-block-navigation-item:last-child { margin-top: 0; margin-bottom: 0; } /* * Sticky close: stays at top of the dialog scrollport while links scroll under. * Full-width flex row keeps the icon right-aligned like the hamburger. */ .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: sticky; top: calc((var(--wp--custom--font-size--h4, 1.8477rem) - 24px) / 2); right: auto; left: auto; display: flex; justify-content: flex-end; width: 100%; margin: 0; padding: 0; z-index: 2; } .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list { align-items: center; text-align: center; } /* Overlay stack: +20% type; roomier item gap (desktop unchanged). */ .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.5rem; /* was 1.25rem (menu); ×1.2 */ } .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list { gap: 1.5rem; /* was 0.975rem */ } /* Overlay zeroes link padding; keep underline flush under the label. */ .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { left: 0; bottom: 0; width: 100%; } /* ------------------------------------------------------------------------- Header nav dropdowns (additive — About anchors + art-type terms) White panel shrink-wraps under the parent; children fade in staggered. Mobile overlay: one continuous stagger (parents + children, tree order). ------------------------------------------------------------------------- */ .nm-header__nav .has-child { position: relative; } /* * Center under the parent (left: 50% + translateX(-50%)). Beat core: * .items-justified-right … { left: auto; right: 0 } and open-state min-width: 200px * (focus-within / aria-expanded out-specs a plain .nm-header__nav rule and grows * the panel leftward on click). translateX pairs with scaleY so centering does not * fight the scale-in animation. */ .nm-header__nav.wp-block-navigation.items-justified-right .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container, .nm-header__nav.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container, .nm-header__nav .has-child > .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--base, #fff); border: 0; box-shadow: none; gap: 0.15rem; /* Desktop flyout: center under parent; shrink-wrap to label + padding. */ left: 50%; right: auto; top: 100%; width: max-content; min-width: 0; padding: 0.5rem 0.35rem 0.65rem; transform: translateX(-50%) scaleY(0); transform-origin: top center; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, visibility 0s linear 0.28s; } .nm-header__nav .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item { opacity: 0; transform: translateY(0.2rem); transition: opacity 0.22s ease, transform 0.22s ease; transition-delay: 0s; /* Fill the shrink-wrapped ul so text-align:center centers in the panel. */ width: 100%; } .nm-header__nav .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 0.45rem 0.75rem; font-size: 1.0625rem; /* slightly smaller than top-level menu */ color: var(--wp--preset--color--grey); /* match computed top-level nav link color */ text-align: center; white-space: nowrap; width: 100%; } .nm-header__nav .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label { display: block; width: 100%; text-align: inherit; } .nm-header__nav .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover, .nm-header__nav .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--black); } /* No underline / pseudo accents on submenu links (top-level keeps ::after). */ .nm-header__nav .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before, .nm-header__nav .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; display: none; } /* Open: hover / focus (desktop flyout) — same left/width as closed base. */ @media (hover: hover) { .nm-header__nav.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .nm-header__nav .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container { left: 50%; right: auto; width: max-content; min-width: 0; transform: translateX(-50%) scaleY(1); transition-delay: 0s; } .nm-header__nav .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item { opacity: 1; transform: none; transition-delay: calc(0.06s + (var(--nm-submenu-i, 0) * 0.045s)); } } /* Match core :not(.open-on-hover-click) so min-width: 200px / right: 0 cannot win on click. */ .nm-header__nav.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container, .nm-header__nav.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container, .nm-header__nav .has-child:not(.open-on-click):focus-within > .wp-block-navigation__submenu-container, .nm-header__nav .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { visibility: visible; overflow: visible; opacity: 1; left: 50%; right: auto; width: max-content; height: auto; min-width: 0; transform: translateX(-50%) scaleY(1); transition-delay: 0s; } .nm-header__nav .has-child:not(.open-on-click):focus-within > .wp-block-navigation__submenu-container > .wp-block-navigation-item, .nm-header__nav .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container > .wp-block-navigation-item { opacity: 1; transform: none; transition-delay: calc(0.06s + (var(--nm-submenu-i, 0) * 0.045s)); } /* * Mobile overlay: always-expanded nested lists (no hover / flyout). * Must beat desktop flyout selectors that include .items-justified-right * and .wp-block-navigation__container > .has-child (scaleY(0), absolute, etc.). */ .nm-header__nav.wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container, .nm-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container, .nm-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container, .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container, .nm-header__nav.wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container, .nm-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container, .nm-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { background-color: transparent; border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 0.75rem; /* was 0.15rem; match roomier overlay stack */ height: auto; left: auto; min-width: 0; opacity: 1; overflow: visible; padding: 20px 0 0.25rem; position: static; right: auto; top: auto; transform: none; transform-origin: initial; transition: none; visibility: visible; width: auto; } .nm-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item, .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item { opacity: 1; transform: none; transition: none; visibility: visible; width: auto; } /* * Mobile open: stagger every link (parent + child) via continuous --nm-submenu-i. * Animate the direct content link so parent opacity does not hide nested children. */ .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open.nm-nav-dropdown--animating .wp-block-navigation__responsive-container-content .wp-block-navigation-item > .wp-block-navigation-item__content { animation: nm-nav-submenu-item-in 0.28s ease both; animation-delay: calc(0.04s + (var(--nm-submenu-i, 0) * 0.045s)); } .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { width: auto; font-size: 1.25rem; /* between parent 1.5rem and desktop submenu */ padding: 0.2rem 0; text-align: center; white-space: normal; } /* * Mobile overlay footer links (About / Exhibition / Contact): appended in PHP, * hidden from the desktop header row; included in overlay stagger tree walk. */ .nm-header__nav .wp-block-navigation-item.nm-nav-mobile-only { display: none !important; } .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nm-nav-mobile-only { display: list-item !important; } .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nm-nav-mobile-footer__item:first-of-type { margin-top: var(--wp--preset--spacing--60, clamp(1.75rem, 4vw, 3rem)); } @keyframes nm-nav-submenu-item-in { from { opacity: 0; transform: translateY(0.25rem); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .nm-header__nav .has-child > .wp-block-navigation__submenu-container, .nm-header__nav .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item { transition: none; } .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open.nm-nav-dropdown--animating .wp-block-navigation__responsive-container-content .wp-block-navigation-item > .wp-block-navigation-item__content { animation: none; } } /* About page anchor targets. */ .nm-about__intro[id], .nm-about__credits[id], .nm-about__exhibitions[id] { scroll-margin-top: 1.5rem; } /* ------------------------------------------------------------------------- Home Footer (Figma: Home Footer / 2161:703) ------------------------------------------------------------------------- */ .nm-home-footer__title { margin: 0; font-size: 2.3125rem !important; } .nm-home-footer__text { margin: 0; max-width: 37.625rem; /* ~602px — Figma bio width */ } .nm-home-footer__nav { width: max-content; } .nm-home-footer__link { margin: 0; padding: 0.6875rem 0; /* 11px */ text-decoration: none !important; /* never underline the wrapping

*/ } .nm-home-footer__link a { color: var(--wp--preset--color--black, #181818); text-decoration: none; } .nm-home-footer__link a:hover { color: var(--wp--preset--color--black, #181818); } /* ------------------------------------------------------------------------- Footer chrome — copyright row (matches live .nm-header padding + 1px border) Legacy inquiries footer: .nm-footer__columns / .nm-footer__form (Contact page reuses form styles). ------------------------------------------------------------------------- */ /* Slim copyright footer only (.nm-footer__chrome); not inquiries / home-footer. */ .nm-footer.alignfull:has(> .nm-footer__chrome) { padding-top: 1.61rem; padding-bottom: 4.83rem; } .nm-footer__chrome { align-items: center; min-height: 0; } .nm-footer__copyright { margin: 0; } .nm-footer__heading { margin-top: 0; margin-bottom: 1.5rem; } /* * Stacked inquiries footer (≤781px = WP columns breakpoint): * - Double the former column blockGap (spacing|60) between intro and form. * - Pull .nm-footer__copyright below the form (desktop keeps it in the left column). * Uses display:contents so copyright can order among column siblings without markup change. */ @media screen and (max-width: 781px) { .nm-footer__columns:not(.is-not-stacked-on-mobile) { gap: 0 !important; } .nm-footer__columns:not(.is-not-stacked-on-mobile) > .nm-footer__intro { display: contents; } .nm-footer__columns:not(.is-not-stacked-on-mobile) .nm-footer__heading { order: 1; width: 100%; } .nm-footer__columns:not(.is-not-stacked-on-mobile) .nm-footer__text { order: 2; width: 100%; /* Was blockGap top = spacing|60; double when stacked. */ margin-bottom: calc(2 * var(--wp--preset--spacing--60, clamp(1.75rem, 4vw, 3rem))) !important; } .nm-footer__columns:not(.is-not-stacked-on-mobile) > .nm-footer__form { order: 3; width: 100%; flex-basis: 100% !important; } .nm-footer__columns:not(.is-not-stacked-on-mobile) .nm-footer__copyright { order: 4; width: 100%; } } .nm-footer__form .wpcf7 { max-width: 100%; width: 100%; } .nm-footer__form .wpcf7 form { display: grid; grid-template-columns: 1fr; row-gap: 1.875rem; /* ~30px between field groups */ align-items: start; } /* Name/email (or any) pair: side-by-side when space allows, stack when not */ .nm-footer__form .two-column, .wpcf7 .two-column { display: flex; flex-wrap: wrap; gap: 1.875rem 3.1875rem; /* row / column — match form + former name/email gaps */ width: 100%; } .nm-footer__form .two-column > *, .wpcf7 .two-column > * { flex: 1 1 16rem; min-width: min(100%, 16rem); box-sizing: border-box; } .nm-footer__form .wpcf7 form > p, .nm-footer__form .two-column > p { margin: 0; display: flex; flex-direction: column; gap: 0; color: var(--wp--custom--color--black, #181818); font-family: var(--wp--custom--font-family--base, "Figtree", sans-serif); font-size: var(--wp--custom--font-size--form-label, 1.5rem); font-weight: var(--wp--custom--font-weight--medium, 500); font-style: normal; line-height: 1; letter-spacing: 0; } .nm-footer__form .wpcf7-form-control-wrap { display: block; width: 100%; } /* Labels (Figma: Name / Email / Message — 24px Medium, black) */ .nm-footer__form label { display: block; margin: 0; padding: 0; color: var(--wp--custom--color--black, #181818); font-family: var(--wp--custom--font-family--base, "Figtree", sans-serif); font-size: var(--wp--custom--font-size--form-label, 1.5rem); font-weight: var(--wp--custom--font-weight--medium, 500); font-style: normal; line-height: 1; letter-spacing: 0; } .nm-footer__form label .wpcf7-form-control-wrap { margin-top: 0.75rem; } /* Text fields */ .nm-footer__form input.wpcf7-text, .nm-footer__form input.wpcf7-email, .nm-footer__form input.wpcf7-tel, .nm-footer__form input.wpcf7-url, .nm-footer__form textarea.wpcf7-textarea { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0.95rem 1.15rem; border: 0; border-radius: 0; background: transparent; color: var(--wp--custom--color--black, #181818); font-family: var(--wp--custom--font-family--base, "Figtree", sans-serif); font-size: var(--wp--custom--font-size--form-label, 1.5rem); font-weight: var(--wp--custom--font-weight--medium, 500); font-style: normal; line-height: 1; letter-spacing: 0; outline: none; -webkit-appearance: none; appearance: none; } .nm-footer__form input.wpcf7-text::placeholder, .nm-footer__form input.wpcf7-email::placeholder, .nm-footer__form input.wpcf7-tel::placeholder, .nm-footer__form input.wpcf7-url::placeholder, .nm-footer__form textarea.wpcf7-textarea::placeholder { color: var(--wp--custom--color--black, #181818); font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; opacity: 1; } /* Name / Email: 55px tall, bottom + right border only */ .nm-footer__form input.wpcf7-text, .nm-footer__form input.wpcf7-email, .nm-footer__form input.wpcf7-tel, .nm-footer__form input.wpcf7-url { height: 3.4375rem; /* 55px */ border-bottom: 2px solid var(--wp--custom--color--surface, #f6f6f5); border-right: 2px solid var(--wp--custom--color--surface, #f6f6f5); transition: border-color 0.25s ease; } /* Message: full light border, ~226px tall */ .nm-footer__form textarea.wpcf7-textarea { min-height: 14.1185rem; /* ~226px */ padding-top: 1rem; border: 2px solid var(--wp--custom--color--surface, #f6f6f5); resize: vertical; transition: border-color 0.25s ease; } /* Hover (not focused): light grey → muted grey */ .nm-footer__form input.wpcf7-text:hover:not(:focus), .nm-footer__form input.wpcf7-email:hover:not(:focus), .nm-footer__form input.wpcf7-tel:hover:not(:focus), .nm-footer__form input.wpcf7-url:hover:not(:focus) { border-bottom-color: var(--wp--custom--color--grey, #73736f); border-right-color: var(--wp--custom--color--grey, #73736f); } .nm-footer__form textarea.wpcf7-textarea:hover:not(:focus) { border-color: var(--wp--custom--color--grey, #73736f); } /* Submit button (Figma: 55px tall, ~118px wide, black fill, white 24px label) */ .nm-footer__form input.wpcf7-submit, .nm-footer__form button.wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 7.3475rem; /* ~117.56px */ height: 3.4375rem; /* 55px */ margin: 0; padding: 0 1.15rem; border: 0; border-radius: 0; background: var(--wp--custom--color--black, #181818); color: var(--wp--custom--color--white, #ffffff); font-family: var(--wp--custom--font-family--base, "Figtree", sans-serif); font-size: var(--wp--custom--font-size--form-label, 1.5rem); font-weight: var(--wp--custom--font-weight--medium, 500); font-style: normal; line-height: 1; letter-spacing: 0; text-align: center; cursor: pointer; -webkit-appearance: none; appearance: none; transition: opacity 0.15s ease; } .nm-footer__form input.wpcf7-submit:hover, .nm-footer__form button.wpcf7-submit:hover { opacity: 0.88; } /* * Text fields: border color marks the active field for mouse and keyboard. * Outline suppressed; keyboard users still get the black border cue. */ .nm-footer__form input.wpcf7-text:focus, .nm-footer__form input.wpcf7-email:focus, .nm-footer__form input.wpcf7-tel:focus, .nm-footer__form input.wpcf7-url:focus { outline: none; box-shadow: none; border-bottom-color: var(--wp--custom--color--black, #181818); border-right-color: var(--wp--custom--color--black, #181818); } .nm-footer__form textarea.wpcf7-textarea:focus { outline: none; box-shadow: none; border-color: var(--wp--custom--color--black, #181818); } .nm-footer__form input.wpcf7-submit:focus:not(:focus-visible), .nm-footer__form button.wpcf7-submit:focus:not(:focus-visible) { outline: none; } .nm-footer__form input.wpcf7-submit:focus-visible, .nm-footer__form button.wpcf7-submit:focus-visible { outline: 2px solid var(--wp--custom--color--black, #181818); outline-offset: 2px; } .nm-footer__form .wpcf7-not-valid-tip, .nm-footer__form .wpcf7-response-output { color: var(--wp--custom--color--grey, #73736f); font-size: var(--wp--custom--font-size--body, 1.125rem); font-weight: var(--wp--custom--font-weight--medium, 500); line-height: var(--wp--custom--line-height--body, 1.56); } /* ------------------------------------------------------------------------- Contact page (Figma: contact page / 2019:829) Left: Inquiries + body + email/phone · Right: same CF7 as footer Top padding = 2× spacing|70 (clamp(2.5rem, 6vw, 4.5rem)). ------------------------------------------------------------------------- */ .nm-contact.alignfull { padding-top: clamp(5rem, 12vw, 9rem) !important; } .nm-contact__heading { margin-top: 0; margin-bottom: 1.5rem; font-size: var(--wp--custom--font-size--h1, 3.161rem) !important; } .nm-contact__text { margin-top: 0; margin-bottom: 0; } .nm-contact__details { max-width: 31.4375rem; /* 503px — Figma body/link column */ } .nm-contact__detail { margin: 0; } .nm-contact__detail a { color: inherit; } /* * Stacked contact page (≤781px = WP columns breakpoint): * Double the column blockGap (spacing|60) between intro and form when stacked. * Desktop side-by-side column gap matches credits (12.6875rem) — see shared tracks below. */ @media screen and (max-width: 781px) { .nm-contact__columns:not(.is-not-stacked-on-mobile) { row-gap: calc(2 * var(--wp--preset--spacing--60, clamp(1.75rem, 4vw, 3rem))) !important; } } /* Contact form column reuses .nm-footer__form (fields, .two-column, submit). */ /* ------------------------------------------------------------------------- Essays archive (Figma: Essays / 12:357) Intro band · post list (title / date / excerpt + image) · prev/next pagination Shared content column: intro grid + article list use the same max-width and centering. Side inset is padding-inline on .nm-essays__intro-grid / .nm-essays__list (root padding vars) — max-width alone is not enough near ~1170px viewports. Never put horizontal padding on .nm-essay__heading. ------------------------------------------------------------------------- */ .nm-essays__inner { box-sizing: border-box; width: 100%; max-width: 73.125rem; /* 1170px — Figma Frame 152; shared by intro + articles */ margin-left: auto; margin-right: auto; } .nm-essays__title { margin: 0; font-size: var(--wp--custom--font-size--h1, 3.161rem) !important; } .nm-essays__lede, .nm-essays__lede p { margin: 0; max-width: 46.25rem; /* ~740px — Figma lede width */ } /* * Essay card grid: * Desktop — heading + excerpt in the left column, 25% image spanning both rows. * Mobile (≤640px) — heading | image header row; excerpt full-width below. */ .nm-essay, .wp-block-group.nm-essay { display: grid; grid-template-columns: minmax(0, 1fr) 25%; grid-template-areas: "heading image" "excerpt image"; column-gap: 3.25rem; /* 52px */ row-gap: 2rem; align-items: start; width: 100%; } /* Neutralize core flow-layout sibling margins inside the grid. */ .nm-essay > *, .nm-essay.is-layout-flow > *, .wp-block-group.nm-essay.is-layout-flow > * { margin-block-start: 0; } .nm-essay__heading { grid-area: heading; display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; } .nm-essay__heading > *, .nm-essay__heading.is-layout-flow > * { margin-block-start: 0; } .nm-essay__excerpt { grid-area: excerpt; min-width: 0; } /* * Beat WP global styles: * .has-global-padding { padding-left/right: var(--wp--style--root--padding-*) } * (injected when layout is constrained + useRootPaddingAwareAlignments). */ .nm-essay__heading, .wp-block-group.nm-essay__heading, .nm-essay__heading.has-global-padding, .wp-block-group.nm-essay__heading.has-global-padding, .nm-essay .nm-essay__heading.has-global-padding, .nm-essay__content, .wp-block-group.nm-essay__content, .nm-essay__content.has-global-padding, .wp-block-group.nm-essay__content.has-global-padding, .nm-essay .nm-essay__content.has-global-padding { min-width: 0; padding-left: 0 !important; padding-right: 0 !important; } .nm-essay__title, .nm-essay__title a { margin: 0; color: var(--wp--custom--color--black, #181818); font-size: var(--wp--custom--font-size--h3, 2.4172rem) !important; font-weight: var(--wp--custom--font-weight--medium, 500); line-height: var(--wp--custom--line-height--heading, 1); text-decoration: none; transition: color 0.2s ease; } .nm-essay__title a:hover, .nm-essay__title a:focus-visible { color: var(--wp--custom--color--grey, #73736f); } .nm-essay__date, .nm-essay__heading .nm-essay__date.wp-block-post-date { margin: 0; margin-block-start: 0; letter-spacing: 0.6px; } .nm-essay__excerpt, .nm-essay__excerpt p { margin: 0; color: var(--wp--custom--color--grey, #73736f); font-size: var(--wp--custom--font-size--body, 1.125rem); font-weight: var(--wp--custom--font-weight--medium, 500); line-height: var(--wp--custom--line-height--body, 1.56); } .nm-essay__excerpt .wp-block-post-excerpt__more-text { margin: 1.5rem 0 0; } /* Read more — big-explore type (same as .nm-artwork__collection-explore) + .nm-text-link underline. */ .nm-essay__excerpt .wp-block-post-excerpt__more-link { position: relative; color: var(--wp--custom--color--black, #181818); font-size: var(--wp--custom--font-size--big-explore, 1.374rem); font-weight: 500; line-height: 1; text-decoration: none; } .nm-essay__excerpt .wp-block-post-excerpt__more-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: var(--wp--custom--color--surface, #f6f6f5); transform: translateY(2px); transition: transform 0.5s ease, background-color 0.5s ease; pointer-events: none; } .nm-essay__excerpt .wp-block-post-excerpt__more-link:hover::after, .nm-essay__excerpt .wp-block-post-excerpt__more-link:focus-visible::after { transform: translateY(5px); background-color: var(--wp--custom--color--black, #181818); } @media (prefers-reduced-motion: reduce) { .nm-essay__title a { transition: none; } .nm-essay__excerpt .wp-block-post-excerpt__more-link::after { transition: background-color 0.01ms linear; } .nm-essay__excerpt .wp-block-post-excerpt__more-link:hover::after, .nm-essay__excerpt .wp-block-post-excerpt__more-link:focus-visible::after { transform: translateY(2px); } } .nm-essay__image { grid-area: image; display: block; width: 100%; max-width: 100%; margin: 0; } .nm-essay__image img, .nm-essay__image a, .nm-essay__image .wp-block-post-featured-image__link, .nm-essay__image-placeholder { display: block; width: 100%; } .nm-essay__image img, .nm-essay__image-placeholder { aspect-ratio: 1 / 1; height: auto; object-fit: cover; } /* Empty-state square when no featured image (Figma surface #F6F6F5). */ .nm-essay__image-placeholder { background-color: var(--wp--custom--color--surface, #f6f6f5); } .nm-essays-pagination__nav { width: 100%; gap: 1.5rem; } .nm-essays-pagination__nav .wp-block-query-pagination-previous, .nm-essays-pagination__nav .wp-block-query-pagination-next { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.6875rem 0.625rem; color: var(--wp--custom--color--grey, #73736f); font-size: 1.617rem; /* ~25.87px — Figma pagination label */ font-weight: var(--wp--custom--font-weight--medium, 500); line-height: 1; text-decoration: none; } .nm-essays-pagination__nav .wp-block-query-pagination-previous:hover, .nm-essays-pagination__nav .wp-block-query-pagination-next:hover { color: var(--wp--custom--color--black, #181818); } .nm-essays-pagination__nav .wp-block-query-pagination-next { margin-left: auto; } .nm-essays-pagination__nav .wp-block-query-pagination-previous::before, .nm-essays-pagination__nav .wp-block-query-pagination-next::after { content: ""; display: block; flex-shrink: 0; width: 1.5rem; height: 4.5rem; background-color: currentColor; -webkit-mask: url("assets/images/pagination-chevron.svg") center / contain no-repeat; mask: url("assets/images/pagination-chevron.svg") center / contain no-repeat; } .nm-essays-pagination__nav .wp-block-query-pagination-previous::before { transform: scaleX(-1); } /* ------------------------------------------------------------------------- Post single (essays) — archive-style header + 60/40 sticky media column Featured + alignnone/alignright body images stack in the media column (JS). Parked sticky top: 7vh; margin-bottom: 14vh advances the next push; images max-height: 86vh. Intro uses 2xl (80) / Large (60) vertical padding like visual-art archives. ------------------------------------------------------------------------- */ .nm-post__intro { box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--content-size, 1200px); margin-inline: auto; padding-top: var(--wp--preset--spacing--80, clamp(3.5rem, 8vw, 6rem)); padding-bottom: var(--wp--preset--spacing--60, clamp(1.75rem, 4vw, 3rem)); } .nm-post__title, .wp-block-group.post-header > h1.wp-block-post-title, .wp-block-group.post-header h1.alignwide.wp-block-post-title, .post-header h1.wp-block-post-title, .post-header h1.wp-block-heading, .post-header h1, .post-header .wp-block-post-title, .post-header .wp-block-heading { font-family: var(--wp--custom--font-family--heading, "Figtree", sans-serif); font-size: var(--wp--custom--font-size--h1, 3.161rem) !important; font-weight: var(--wp--custom--font-weight--medium, 500); line-height: var(--wp--custom--line-height--heading, 1); letter-spacing: var(--wp--custom--letter-spacing--none, 0); color: var(--wp--preset--color--black, var(--wp--custom--color--black, #181818)); margin: 0; text-wrap: balance; } .nm-post__date, .nm-post__date.wp-block-post-date { display: block; margin: 0.75rem 0 0; font-size: 1.25rem; font-weight: var(--wp--custom--font-weight--medium, 500); line-height: 1.56; letter-spacing: 0.6px; color: var(--wp--custom--color--grey, #73736f); } .nm-post__layout { align-items: flex-start; box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--content-size, 1200px); margin-inline: auto; } .nm-post__content { min-width: 0; } .nm-post__body { max-width: none; } /* Essay single — a bit more space above section headings than default blockGap. */ .nm-post__body h2:not(:first-child), .nm-post__body h2.wp-block-heading:not(:first-child), .nm-post__body h3:not(:first-child), .nm-post__body h3.wp-block-heading:not(:first-child) { margin-block-start: 2.5rem; } /* * Content lists: outside markers in the padding gutter so the marker’s left * edge aligns with paragraphs; wrapped li text stays indented under the first line. */ .nm-post__body ul, .nm-post__body ol, .entry-content ul, .entry-content ol { margin-left: 0; margin-inline-start: 0; padding-left: 1.375em; padding-inline-start: 1.375em; list-style-position: outside; } .nm-post__body li > ul, .nm-post__body li > ol, .entry-content li > ul, .entry-content li > ol { padding-left: 1.25em; padding-inline-start: 1.25em; } .nm-post__body ul li + li, .nm-post__body ol li + li, .entry-content ul li + li, .entry-content ol li + li { margin-block-start: 0.75em; } .nm-post__media { position: sticky; top: 7vh; align-self: flex-start; min-width: 0; } /* * When JS stacks featured + alignnone/alignright body images, the column itself * is no longer sticky — each .nm-post__sticky-slot child sticks at top: 7vh so * images butt against each other. margin-bottom: 14vh (= 21vh − 7vh) lengthens * each sticky child’s contribution to flow so the next image begins pushing * earlier than image-height alone would allow. */ .nm-post__media.is-nm-sticky-stack { position: static; top: auto; align-self: stretch; } .nm-post__sticky-marker { display: block; height: 0; margin: 0; padding: 0; overflow: hidden; pointer-events: none; } .nm-post__sticky-slot { box-sizing: border-box; width: 100%; } .nm-post__sticky-slot > .nm-post__featured-image, .nm-post__sticky-slot > .wp-block-image, .nm-post__sticky-slot > figure { position: sticky; top: 7vh; float: none; margin: 0 0 14vh; width: 100%; max-width: none; } .nm-post__featured-image, .nm-post__featured-image.wp-block-post-featured-image { /* Same 14vh push as sticky-slot images (even when featured is alone / not slotted). */ margin: 0 0 14vh; width: 100%; } /* Essay images (featured + in-flow): never taller than 86% of the viewport. */ .nm-post__featured-image img, .nm-post__body .wp-block-image img, .nm-post__body figure.alignnone img, .nm-post__body figure.alignright img, .nm-post__sticky-slot img { display: block; width: 100%; max-width: 100%; height: auto; max-height: 86vh; object-fit: contain; object-position: top center; } /* ------------------------------------------------------------------------- Post single — previous / next essay (Figma: single post / 2001:164) Labels match archive pagination size (~25.87px); cards echo essay list. ------------------------------------------------------------------------- */ .nm-post-nav-wrap { box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--content-size, 1200px); margin-inline: auto; } /* * Margin on .nm-post-nav alone loses to WP global layout: * :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 } * (nav is the only child of .nm-post-nav-wrap). Extra class beats that (0,2,0) rule. */ .nm-post-nav-wrap.wp-block-group > .nm-post-nav { box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--content-size, 1200px); margin-top: var(--wp--preset--spacing--70, clamp(2.5rem, 6vw, 4.5rem)); margin-inline: auto; padding-top: var(--wp--preset--spacing--50, clamp(1.5rem, 3vw, 2rem)); border-top: 4px solid var(--wp--custom--color--surface, #f6f6f5); } .nm-post-nav__inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 3rem 2.5rem; } .nm-post-nav__side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; flex: 1 1 18rem; max-width: 32rem; min-width: 0; } .nm-post-nav__side--next { margin-left: auto; } .nm-post-nav__label-wrap { margin: 0; margin-inline: 0; padding: 0.6875rem 0; padding-inline: 0; text-decoration: none !important; } .nm-post-nav__label-wrap::after { content: none; } .nm-post-nav__label { display: inline-block; margin-inline: 0; padding-inline: 0; color: var(--wp--custom--color--grey, #73736f); font-size: 1.617rem; /* ~25.87px — Figma pagination label */ font-weight: var(--wp--custom--font-weight--medium, 500); line-height: 1; } .nm-post-nav__card { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; width: 100%; color: inherit; text-decoration: none; } .nm-post-nav__card:hover .nm-post-nav__title, .nm-post-nav__card:focus-visible .nm-post-nav__title { color: var(--wp--custom--color--grey, #73736f); } .nm-post-nav__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; flex: 1 1 auto; min-width: 0; } .nm-post-nav__title { display: block; font-family: var(--wp--custom--font-family--heading, "Figtree", sans-serif); font-size: var(--wp--custom--font-size--h4, 1.8477rem); font-weight: var(--wp--custom--font-weight--medium, 500); line-height: 1; color: var(--wp--custom--color--black, #181818); text-wrap: balance; transition: color 0.2s ease; } .nm-post-nav__date { display: block; font-size: 1.25rem; font-weight: var(--wp--custom--font-weight--medium, 500); line-height: 1.56; letter-spacing: 0.6px; color: var(--wp--custom--color--grey, #73736f); } .nm-post-nav__excerpt { display: block; font-size: 1.125rem; font-weight: var(--wp--custom--font-weight--medium, 500); line-height: 1.56; color: var(--wp--custom--color--grey, #73736f); } .nm-post-nav__thumb { display: block; flex: 0 0 6.375rem; width: 6.375rem; height: 6.375rem; overflow: hidden; background-color: var(--wp--custom--color--surface, #f6f6f5); } .nm-post-nav__thumb img, .nm-post-nav__thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------------------- About Page (Figma: About Page / 10:282) Intro · Production Credits · Exhibitions — uses regular Footer (Inquiries) ------------------------------------------------------------------------- */ .nm-about__name { margin: 0; font-size: var(--wp--custom--font-size--h1, 3.161rem) !important; } .nm-about__role { margin: 0.3rem 0 0; } .nm-about__portrait { margin: 0; max-width: 25.5625rem; /* 409px */ } .nm-about__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .nm-about__bio { margin: 0 0 1.25rem; max-width: 54rem; /* ~864px — Figma bio width */ } .nm-about__bio:last-child { margin-bottom: 0; } .nm-about__section-title { margin: 0 0 2.5rem; font-size: var(--wp--custom--font-size--h2, 2.7676rem) !important; } .nm-about__credit-list > .nm-about__credit-row + .nm-about__credit-row, .nm-about__credit-list > .wp-block-columns + .wp-block-columns { margin-block-start: 3.0625rem; /* 49px — Figma row gap */ } .nm-about__credit-label { margin: 0; font-size: var(--wp--custom--font-size--h5, 1.4944rem) !important; } .nm-about__credit-line { margin: 0; font-size: 1.4344rem !important; /* was 1.6875rem; ×0.85 heading taper */ font-weight: var(--wp--custom--font-weight--medium, 500); } .nm-about__credit-line + .nm-about__credit-line { margin-top: 0; } .nm-about__credit-title { color: var(--wp--custom--color--black, #181818); font-weight: var(--wp--custom--font-weight--medium, 500); } .nm-about__credit-meta { color: var(--wp--custom--color--grey, #73736f); font-weight: var(--wp--custom--font-weight--medium, 500); } .nm-about__exhibition-title { margin: 0 0 0.75rem; } .nm-about__exhibition-text { margin: 0; max-width: 100%; } .nm-about__exhibition-copy > .nm-about__exhibition-text + .nm-about__exhibition-link { margin-block-start: 1.5rem; } .nm-about__exhibition-title-link { color: inherit; text-decoration: none; } .nm-about__exhibition-title-link::after { content: none; } .nm-about__exhibition-title-link:hover, .nm-about__exhibition-title-link:focus-visible { color: var(--wp--custom--color--grey, #73736f); text-decoration: none; } .nm-about__exhibition-link { margin: 0; font-size: var(--wp--custom--font-size--big-explore, 1.374rem); /* Beat saved block inline text-decoration:underline on the

(ancestor decoration paints through the ; none on the child cannot cancel it). */ text-decoration: none !important; } .nm-about__exhibition-link::after { content: none; } .nm-about__exhibition-link a { color: var(--wp--custom--color--black, #181818); text-decoration: none; } .nm-about__exhibition-link a:hover { color: var(--wp--custom--color--black, #181818); text-decoration: none; } .nm-about__exhibition-image { margin: 0; } .nm-about__exhibition-image img { display: block; width: 100%; height: auto; object-fit: cover; } .nm-about__exhibition-caption { margin: 0.75rem 0 0; } /* * Desktop: shared two-column tracks (Production Credits reference): * 0 1 27.5% | 12.6875rem gap | 0 1 72.5% — shrink so percentages share the row * minus column-gap (not 72.5% of full row width). Used by credits, exhibitions, * Contact / Inquiries, and About footer inquiries (saved block markup). */ @media screen and (min-width: 782px) { /* Beat WP core .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-grow: 1; flex-basis: 0; } */ .wp-block-columns.nm-about__credit-row > .wp-block-column.nm-about__credit-label-col, .wp-block-columns.nm-about__exhibition > .wp-block-column.nm-about__exhibition-copy, .wp-block-columns.nm-contact__columns > .wp-block-column.nm-contact__intro, .wp-block-columns.nm-footer__columns > .wp-block-column.nm-footer__intro { flex: 0 1 27.5% !important; min-width: 0; max-width: none; } .wp-block-columns.nm-about__credit-row > .wp-block-column.nm-about__credit-body-col, .wp-block-columns.nm-about__exhibition > .wp-block-column.nm-about__exhibition-media, .wp-block-columns.nm-contact__columns > .wp-block-column.nm-footer__form, .wp-block-columns.nm-footer__columns > .wp-block-column.nm-footer__form { flex: 0 1 72.5% !important; min-width: 0; } .wp-block-columns.nm-contact__columns, .wp-block-columns.nm-footer__columns { column-gap: 12.6875rem !important; } /* * Exhibitions archive only: same tracks as the intro header * (40% | 3.125rem | 60%). Both rows shrink by that gap, so the * image shares the lede column's left and right edges. */ .nm-exhibitions-archive .wp-block-columns.nm-about__exhibition { column-gap: 3.125rem !important; } .nm-exhibitions-archive .wp-block-columns.nm-about__exhibition > .wp-block-column.nm-about__exhibition-copy { flex: 0 1 40% !important; } .nm-exhibitions-archive .wp-block-columns.nm-about__exhibition > .wp-block-column.nm-about__exhibition-media { flex: 0 1 60% !important; } } /* A bit more space between successive exhibitions (group blockGap stays spacing|70). */ .nm-about__exhibitions > .nm-about__exhibition + .nm-about__exhibition { margin-block-start: calc( var(--wp--preset--spacing--70, clamp(2.5rem, 6vw, 4.5rem)) + 1.25rem ); } /* * Stacked exhibition columns (≤781px = WP columns breakpoint): * Image column first, then copy (DOM is copy → media for desktop L/R layout). * Modest bump of row-gap between media and copy (was spacing|50 via inline gap). * Desktop column gap (12.6875rem) stays unchanged. */ @media screen and (max-width: 781px) { .nm-about__exhibition:not(.is-not-stacked-on-mobile) { flex-direction: column; column-gap: 0 !important; row-gap: var(--wp--preset--spacing--60, clamp(1.75rem, 4vw, 3rem)) !important; } .nm-about__exhibition:not(.is-not-stacked-on-mobile) > .nm-about__exhibition-copy, .nm-about__exhibition:not(.is-not-stacked-on-mobile) > .nm-about__exhibition-media { flex-basis: 100% !important; width: 100% !important; max-width: 100%; } .nm-about__exhibition:not(.is-not-stacked-on-mobile) .nm-about__exhibition-media { order: -1; } } /* ------------------------------------------------------------------------- Exhibit single — Figma "Exhibit Single" (2019:742) ------------------------------------------------------------------------- */ .nm-exhibit__intro { padding-bottom: 2.15rem; /* Figma intro → hero gap */ } .nm-exhibit__title, .nm-media-art__title, .nm-visual-art__title, .nm-illustration__title { margin: 0; text-wrap: balance; } /* * User-added exhibit page header (.exhibit-header). * Beat theme.json :root :where(.wp-block-post-title) and group inheritance. * Prefer WP's real custom prop (--h-1); --h1 is aliased on :root above. */ .wp-block-group.exhibit-header > h1.wp-block-post-title, .wp-block-group.exhibit-header > h1.wp-block-heading, .wp-block-group.exhibit-header h1.alignwide.wp-block-post-title, .exhibit-header h1.wp-block-post-title, .exhibit-header h1.wp-block-heading, .exhibit-header h1, .exhibit-header .wp-block-post-title, .exhibit-header .wp-block-heading, .wp-block-group.media-art-header > h1.wp-block-post-title, .wp-block-group.media-art-header > h1.wp-block-heading, .wp-block-group.media-art-header h1.alignwide.wp-block-post-title, .media-art-header h1.wp-block-post-title, .media-art-header h1.wp-block-heading, .media-art-header h1, .media-art-header .wp-block-post-title, .media-art-header .wp-block-heading, .nm-media-art__title, .wp-block-group.visual-art-header > h1.wp-block-post-title, .wp-block-group.visual-art-header > h1.wp-block-heading, .wp-block-group.visual-art-header h1.alignwide.wp-block-post-title, .visual-art-header h1.wp-block-post-title, .visual-art-header h1.wp-block-heading, .visual-art-header h1, .visual-art-header .wp-block-post-title, .visual-art-header .wp-block-heading, .nm-visual-art__title, .wp-block-group.illustration-header > h1.wp-block-post-title, .wp-block-group.illustration-header > h1.wp-block-heading, .wp-block-group.illustration-header h1.alignwide.wp-block-post-title, .illustration-header h1.wp-block-post-title, .illustration-header h1.wp-block-heading, .illustration-header h1, .illustration-header .wp-block-post-title, .illustration-header .wp-block-heading, .nm-illustration__title { font-family: var(--wp--custom--font-family--heading, "Figtree", sans-serif); font-size: var(--wp--custom--font-size--h1, 3.161rem) !important; font-weight: var(--wp--custom--font-weight--medium, 500); line-height: var(--wp--custom--line-height--heading, 1); letter-spacing: var(--wp--custom--letter-spacing--none, 0); color: var(--wp--preset--color--black, var(--wp--custom--color--black, #181818)); margin: 0; text-wrap: balance; } .nm-exhibit__label { margin: 0.75rem 0 0; } /* Media Art single — same header rhythm as exhibit */ .nm-media-art__intro { padding-bottom: 2.15rem; } .nm-media-art__type-label { margin: 0.75rem 0 0; } /* * Media art hero — #111 fill when container exceeds image; scale to hero width, * capped at 95vh, centered. Default / 16:9 (alignwide) keeps this treatment. * 4:3 is capped to content-size below. */ .nm-media-art__hero { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; min-width: min(100%, var(--wp--style--global--content-size, 1200px)); margin-top: 0; margin-bottom: 3.5rem; padding: 0; background-color: #111; } /* 4:3 — featured area limited to normal (non-wide) content width. */ body.nm-media-art--ratio-4-3 .nm-media-art__hero, .nm-media-art.nm-media-art--ratio-4-3 .nm-media-art__hero { max-width: var(--wp--style--global--content-size, 1200px); min-width: 0; width: 100%; margin-left: auto; margin-right: auto; } .nm-media-art__hero .wp-block-post-featured-image, .nm-media-art__hero-image { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 100%; margin: 0; } .nm-media-art__hero .wp-block-post-featured-image a, .nm-media-art__hero-image a { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 100%; } .nm-media-art__hero .wp-block-post-featured-image img, .nm-media-art__hero-image img { display: block; box-sizing: border-box; /* Fill hero width (may upscale) so tall-enough ratios can reach max-height:95vh. */ width: 100% !important; height: auto !important; max-width: 100%; max-height: 95vh; object-fit: contain !important; object-position: center; } .nm-media-art__details { align-items: flex-start; } .nm-media-art__meta, .nm-media-art__body, .nm-media-art__body p { font-size: 1.125rem; font-weight: 500; line-height: 1.56; } .nm-media-art__body > *:first-child { margin-top: 0; } .nm-media-art__body > *:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------- Project Details — ACF two-column (meta left, description right) ------------------------------------------------------------------------- */ .nm-project-details, .nm-project-details.alignwide { display: grid; grid-template-columns: minmax(0, 28%) minmax(0, 1fr); column-gap: var(--wp--preset--spacing--60, 3rem); row-gap: var(--wp--preset--spacing--50, 2rem); align-items: flex-start; box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--content-size, 1200px); margin-top: 0; margin-bottom: 4rem; margin-inline: auto; padding-top: var(--wp--preset--spacing--70, clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: var(--wp--preset--spacing--70, clamp(2.5rem, 6vw, 4.5rem)); text-align: left; } .nm-project-details:not(:has(.nm-project-details__meta)):not( :has(.nm-project-details__description) ) { display: none; } .nm-project-details:not(:has(.nm-project-details__meta)) { grid-template-columns: minmax(0, 1fr); } .nm-project-details:not(:has(.nm-project-details__description)) { grid-template-columns: minmax(0, 28%); } .nm-project-details__meta, .nm-project-details__meta-line, .nm-project-details__description, .nm-project-details__description p { font-size: 1.125rem; font-weight: 500; line-height: 1.56; color: var(--wp--custom--color--grey, #73736f); } .nm-project-details__meta { min-width: 0; } .nm-project-details__meta-line { margin: 0; } .nm-project-details__description { min-width: 0; } .nm-project-details__description > *:first-child { margin-top: 0; } .nm-project-details__description > *:last-child { margin-bottom: 0; } /* Watch video — same big-explore typography as artwork collection explore links. */ .nm-project-details__watch-video { margin: 1.25rem 0 0; font-size: var(--wp--custom--font-size--big-explore, 1.374rem); font-weight: 500; line-height: 1; color: var(--wp--custom--color--black, #181818); } .nm-project-details__description .nm-project-details__watch-video, .nm-project-details__description .nm-project-details__watch-video a { font-size: var(--wp--custom--font-size--big-explore, 1.374rem); font-weight: 500; line-height: 1; color: var(--wp--custom--color--black, #181818); } .nm-project-details__watch-video a { color: inherit; } @media (max-width: 781px) { .nm-project-details, .nm-project-details:not(:has(.nm-project-details__meta)), .nm-project-details:not(:has(.nm-project-details__description)) { grid-template-columns: minmax(0, 1fr); } } /* Visual Art / Illustration single — exhibit header rhythm + framed hero */ .nm-visual-art__intro, .nm-illustration__intro { padding-bottom: 2.15rem; } .nm-visual-art__type-label { margin: 0.75rem 0 0; } .nm-visual-art__hero, .nm-illustration__hero { box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; height: auto; min-height: 400px; max-height: 90vh; margin-top: 0; margin-bottom: 3.5rem; padding: 6vw; } .nm-visual-art__hero { background-color: var(--wp--preset--color--surface, #f6f6f5); max-height: 75vh; padding: 6vh 4vw; } /* Prev/next edge chevrons overlay the framed illustration hero. */ .nm-illustration__hero { position: relative; overflow: visible; background-color: transparent; } .nm-illustration__hero-nav { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .nm-illustration__nav.nm-edge-nav { z-index: 3; pointer-events: auto; text-decoration: none; } .nm-visual-art__hero .wp-block-post-featured-image, .nm-visual-art__hero-image, .nm-illustration__hero .wp-block-post-featured-image, .nm-illustration__hero-image { box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; align-self: stretch; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; margin: 0; overflow: visible; } .nm-visual-art__hero .wp-block-post-featured-image a, .nm-visual-art__hero-image a, .nm-illustration__hero .wp-block-post-featured-image a, .nm-illustration__hero-image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; overflow: visible; } /* Full image, original aspect ratio. WP core defaults scale to "cover" and injects inline object-fit:cover — !important beats that. max-height accounts for hero padding within max-height (visual art: 6vh×2 within 75vh). At ≤781px the square frame overrides visual art with max-height:100%. */ .nm-visual-art__hero .wp-block-post-featured-image img, .nm-visual-art__hero-image img, .nm-illustration__hero .wp-block-post-featured-image img, .nm-illustration__hero-image img { display: block; box-sizing: border-box; width: auto !important; height: auto !important; max-width: 100%; max-height: calc(90vh - 12vw); object-fit: contain !important; object-position: center; } .nm-visual-art__hero .wp-block-post-featured-image img, .nm-visual-art__hero-image img { max-height: calc(75vh - 12vh); } .nm-visual-art__details, .nm-illustration__details { align-items: flex-start; } .nm-visual-art__meta, .nm-visual-art__body, .nm-visual-art__body p, .nm-illustration__meta, .nm-illustration__body, .nm-illustration__body p { font-size: 1.125rem; font-weight: 500; line-height: 1.56; } .nm-visual-art__body > *:first-child, .nm-illustration__body > *:first-child { margin-top: 0; } .nm-visual-art__body > *:last-child, .nm-illustration__body > *:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------- Visual / Media Art archive landings H1 · two-column intros + big-explore · full-bleed surface sliders ------------------------------------------------------------------------- */ .nm-artwork.alignfull { box-sizing: border-box; padding-top: var(--wp--preset--spacing--60, clamp(1.75rem, 4vw, 3rem)) !important; } /* * Archive landings: top inset lives on the __intro columns row only (spacing|60). * Do not stack root wrapper padding-top with intro padding (was 60 + 80). */ .nm-visual-art-archive.alignfull, .nm-media-art-archive.alignfull, .nm-illustration-archive.alignfull, .nm-exhibitions-archive.alignfull { box-sizing: border-box; padding-top: 0 !important; } .nm-visual-art-archive__intro, .nm-media-art-archive__intro, .nm-illustration-archive__intro, .nm-exhibitions-archive__intro { padding-top: var(--wp--preset--spacing--60, clamp(1.75rem, 4vw, 3rem)) !important; } .nm-visual-art-archive__title, .nm-media-art-archive__title, .nm-illustration-archive__title, .nm-exhibitions-archive__title, .nm-artwork__title { margin: 0; text-align: left; font-size: var(--wp--custom--font-size--h1, 3.161rem) !important; } /* ------------------------------------------------------------------------- Illustration archive — term-style intro · surface grid band · 4-col squares ------------------------------------------------------------------------- */ .nm-illustration-archive__lede, .nm-illustration-archive__lede p { margin: 0; max-width: 51.3125rem; text-align: left; } .nm-illustration-archive__intro.alignwide, .nm-exhibitions-archive__intro.alignwide { box-sizing: border-box; align-items: flex-start; width: 100%; max-width: var(--wp--style--global--wide-size, 1480px); margin-left: auto; margin-right: auto; } .nm-illustration-archive__intro, .nm-exhibitions-archive__intro { align-items: flex-start; } .nm-exhibitions-archive__list { margin-block-start: 0; } .nm-illustration-archive__grid-band.alignfull { box-sizing: border-box; width: auto; max-width: none; margin-left: calc(-1 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem))); margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 1.25rem))); background-color: var(--wp--preset--color--surface, #f6f6f5); } .nm-illustration-archive__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; margin: 0; padding: 0; list-style: none; overflow: visible; } .nm-illustration-archive__cell { margin: 0; aspect-ratio: 1 / 1; min-width: 0; overflow: visible; } .nm-illustration-archive__link { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 100%; /* Extra room so img.shadow / hover lift are not clipped. */ padding: 0.75rem 0.75rem 1.25rem; overflow: visible; text-decoration: none; } /* * Transition on the default (not :hover) so un-hover animates too. * Include opacity + beat .wp-site-blocks img.nm-img-fade specificity so its * `transition: opacity` shorthand does not wipe transform/box-shadow. */ .wp-site-blocks .nm-illustration-archive__link img.nm-img-fade, .nm-illustration-archive__link img, .nm-illustration-archive__img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, opacity 0.4s ease; } /* Lighter shadow for archive grid only; painting/slider keep .shadow. */ .nm-illustration-archive img.shadow, .nm-illustration-archive__img.shadow { box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2); } .nm-illustration-archive__link:hover img, .nm-illustration-archive__link:focus-visible img, .nm-illustration-archive__link:hover .nm-illustration-archive__img, .nm-illustration-archive__link:focus-visible .nm-illustration-archive__img { transform: scale(1.05) translateY(-3px); } /* Restores default .shadow on hover (stronger than the grid override). */ .nm-illustration-archive__link:hover img.shadow, .nm-illustration-archive__link:focus-visible img.shadow, .nm-illustration-archive__link:hover .nm-illustration-archive__img.shadow, .nm-illustration-archive__link:focus-visible .nm-illustration-archive__img.shadow { box-shadow: 0 18px 15px 0 rgba(0, 0, 0, 0.25); } @media (prefers-reduced-motion: reduce) { .wp-site-blocks .nm-illustration-archive__link img.nm-img-fade, .nm-illustration-archive__link img, .nm-illustration-archive__img { transition: none; } .nm-illustration-archive__link:hover img, .nm-illustration-archive__link:focus-visible img, .nm-illustration-archive__link:hover .nm-illustration-archive__img, .nm-illustration-archive__link:focus-visible .nm-illustration-archive__img { transform: none; } } @media screen and (max-width: 1100px) { .nm-illustration-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } } @media screen and (max-width: 480px) { .nm-illustration-archive__grid { grid-template-columns: 1fr; gap: 1.75rem; } .nm-illustration-archive__link { padding: 0.625rem 0.625rem 1rem; } } .nm-visual-art-archive__title, .nm-visual-art-archive__subtitle, .nm-media-art-archive__title, .nm-media-art-archive__subtitle, .nm-illustration-archive__title, .nm-illustration-archive__subtitle, .nm-exhibitions-archive__title, .nm-exhibitions-archive__subtitle { margin: 0; text-align: left; font-size: var(--wp--custom--font-size--h1, 3.161rem) !important; } .nm-visual-art-archive__lede, .nm-visual-art-archive__lede p, .nm-media-art-archive__lede, .nm-media-art-archive__lede p, .nm-illustration-archive__lede, .nm-illustration-archive__lede p { margin: 0; max-width: 51.3125rem; /* ~821px — Figma lede */ text-align: left; } .nm-visual-art-archive__explore, .nm-media-art-archive__explore { margin: 0; color: var(--wp--custom--color--black, #181818); } .nm-visual-art-archive__explore a, .nm-media-art-archive__explore a { color: inherit; } .nm-visual-art-archive__explore a:hover, .nm-visual-art-archive__explore a:focus-visible, .nm-media-art-archive__explore a:hover, .nm-media-art-archive__explore a:focus-visible { color: var(--wp--custom--color--black, #181818); } /* * Type sections break out of archive root padding (alignfull). * Use width:auto (not 100%): with WP/theme negative margins, width:100% only * shifts the box left and leaves a gap on the right equal to ~2× root padding. * Intro rows stay theme wideSize (1480px), centered inside section padding. */ .nm-visual-art-archive__section.alignfull, .nm-media-art-archive__section.alignfull { box-sizing: border-box; width: auto; max-width: none; margin-left: calc(-1 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem))); margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 1.25rem))); } .nm-visual-art-archive__intro.alignwide, .nm-media-art-archive__intro.alignwide { box-sizing: border-box; align-items: flex-start; width: 100%; max-width: var(--wp--style--global--wide-size, 1480px); margin-left: auto; margin-right: auto; } .nm-visual-art-archive__intro, .nm-media-art-archive__intro { align-items: flex-start; } .nm-visual-art-slider { /* * Vertical bleed inside the scrollport (not track padding): browsers cannot * pair overflow-x:auto with overflow-y:visible, so the viewport keeps * overflow-y:hidden and expands its clip box into the frame via matching * negative margin + padding. Shadows, hover lift, and title cards paint * in that bleed without growing the grey band or adding card padding. */ /* Min 80px grey-frame whitespace above/below artwork; grows with 6vw. */ --nm-visual-art-slider-max-height: min(760px, 100vh); --nm-visual-art-slider-frame-pad-y: max(80px, 6vw); --nm-visual-art-slider-bleed-top: max(var(--nm-visual-art-slider-frame-pad-y), 1.25rem); --nm-visual-art-slider-bleed-bottom: max(var(--nm-visual-art-slider-frame-pad-y), 5.75rem); position: relative; z-index: 0; box-sizing: border-box; width: 100%; margin-top: 0; margin-bottom: 0; overflow: visible; } /* Lift the whole slider above neighbors while a title card is showing. */ .nm-visual-art-slider:hover, .nm-visual-art-slider:focus-within { z-index: 5; } /* * Edge-to-edge grey frames: cancel section has-global-padding (root padding) * so the surface reaches the viewport edges. width:auto expands with the * negative margins; width:100% would leave a right-side gap. */ .nm-visual-art-archive .nm-visual-art-slider.alignfull, .nm-media-art-archive .nm-visual-art-slider.alignfull { width: auto; max-width: none; margin-left: calc(-1 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem))); margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 1.25rem))); } .nm-visual-art-slider__frame { position: relative; z-index: 0; box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 400px; height: 760px; max-height: var(--nm-visual-art-slider-max-height); /* * Outer full-bleed surface: overflow visible so nothing is clipped here. * Vertical pad only: L/R must stay 0 so the viewport is edge-to-edge. * Horizontal inset lives on the track (scrollable), so slides bleed past * the page edges while scrolling instead of clipping in a padded box. */ padding: var(--nm-visual-art-slider-frame-pad-y, max(80px, 6vw)) 0; overflow: visible; background-color: var(--wp--preset--color--surface, #f6f6f5); } .nm-visual-art-slider__viewport { /* * Inner horizontal scrollport. overflow-y cannot stay visible when * overflow-x is auto, so keep Y clipped and enlarge the clip rect with * content-box padding + equal negative margins (scrollport bleed). * Snap is JS-only (ease on release / arrows) so native scroll-snap cannot * race the settle animation after pointer-up. */ box-sizing: content-box; overflow-x: auto; overflow-y: hidden; width: 100%; height: 100%; min-height: 0; margin-top: calc(-1 * var(--nm-visual-art-slider-bleed-top)); margin-bottom: calc(-1 * var(--nm-visual-art-slider-bleed-bottom)); padding-top: var(--nm-visual-art-slider-bleed-top); padding-bottom: var(--nm-visual-art-slider-bleed-bottom); scroll-snap-type: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; /* * Allow vertical page scroll over the slider. Horizontal pans are owned by * nm-visual-art-slider.js after axis lock (|dx| >= |dy|); pan-x alone was * blocking vertical scroll on phones. */ touch-action: pan-y; } .nm-visual-art-slider__viewport::-webkit-scrollbar { display: none; } .nm-visual-art-slider__viewport.is-dragging, .nm-visual-art-slider__viewport.is-settling { scroll-behavior: auto; } .nm-visual-art-slider__viewport.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; } /* * While the track moves under the pointer, :hover would animate lift + title * cards (transform/opacity transitions) and read as flicker. Snap stays off in * .is-settling too; keep hover motion disabled until the ease finishes. */ .nm-visual-art-slider__viewport.is-dragging .nm-visual-art-slider__link, .nm-visual-art-slider__viewport.is-settling .nm-visual-art-slider__link, .nm-visual-art-slider__viewport.is-dragging .nm-visual-art-slider__title, .nm-visual-art-slider__viewport.is-settling .nm-visual-art-slider__title, .wp-site-blocks .nm-visual-art-slider__viewport.is-dragging img.nm-img-fade, .wp-site-blocks .nm-visual-art-slider__viewport.is-settling img.nm-img-fade, .nm-visual-art-slider__viewport.is-dragging .nm-visual-art-slider__image, .nm-visual-art-slider__viewport.is-settling .nm-visual-art-slider__image { transition: none; } .nm-visual-art-slider__viewport.is-dragging .nm-visual-art-slider__link:hover, .nm-visual-art-slider__viewport.is-dragging .nm-visual-art-slider__link:focus-visible, .nm-visual-art-slider__viewport.is-settling .nm-visual-art-slider__link:hover, .nm-visual-art-slider__viewport.is-settling .nm-visual-art-slider__link:focus-visible { transform: none; } .nm-visual-art-slider__viewport.is-dragging .nm-visual-art-slider__slide:hover, .nm-visual-art-slider__viewport.is-dragging .nm-visual-art-slider__slide:focus-within, .nm-visual-art-slider__viewport.is-settling .nm-visual-art-slider__slide:hover, .nm-visual-art-slider__viewport.is-settling .nm-visual-art-slider__slide:focus-within { z-index: 0; } .nm-visual-art-slider__viewport.is-dragging .nm-visual-art-slider__slide:hover .nm-visual-art-slider__title, .nm-visual-art-slider__viewport.is-dragging .nm-visual-art-slider__slide:focus-within .nm-visual-art-slider__title, .nm-visual-art-slider__viewport.is-settling .nm-visual-art-slider__slide:hover .nm-visual-art-slider__title, .nm-visual-art-slider__viewport.is-settling .nm-visual-art-slider__slide:focus-within .nm-visual-art-slider__title { opacity: 0; visibility: hidden; } .nm-visual-art-slider__track { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; /* Shared Visual Art + Media Art archive slider spacing. */ gap: 174px; width: max-content; min-width: 100%; margin: 0; /* * Horizontal inset only (scrollable). Vertical room for shadows / title * cards lives on the viewport bleed, not as track padding. */ padding: 0 6vw; list-style: none; box-sizing: border-box; } .nm-visual-art-slider__slide { position: relative; z-index: 0; flex: 0 0 auto; margin: 0; padding: 0; line-height: 0; overflow: visible; } .nm-visual-art-slider__slide:hover, .nm-visual-art-slider__slide:focus-within { z-index: 20; } .nm-visual-art-slider__link { position: relative; display: block; line-height: 0; overflow: visible; transition: transform 0.3s ease-in-out; } .nm-visual-art-slider__link:hover, .nm-visual-art-slider__link:focus-visible { transform: translateY(-7.5px); } /* * Artwork title card: under the image's resting box (slide), not the lifting * link — so hover lift does not move the card. Opacity/visibility only. * Paints in the viewport bleed (and above neighbors via z-index). * Hidden until hover / keyboard focus; aria-hidden — image alt already names the link. */ .nm-visual-art-slider__title { position: absolute; top: calc(100% + 1.5vw); left: 50%; z-index: 30; box-sizing: border-box; max-width: min(100%, 14rem); padding: 0.7rem 1.1rem; border-radius: 0; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); color: var(--wp--custom--color--black, #181818); font-family: var(--wp--custom--font-family--heading, "Figtree", sans-serif); font-size: 18px; font-weight: 500; line-height: 1.3; text-align: center; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -1px); transition: opacity 0.2s ease, visibility 0.2s ease; } .nm-visual-art-slider__slide:hover .nm-visual-art-slider__title, .nm-visual-art-slider__slide:focus-within .nm-visual-art-slider__title { opacity: 1; visibility: visible; } .nm-visual-art-slider__image, .nm-visual-art-slider__slide img { display: block; box-sizing: border-box; width: auto !important; height: auto !important; max-width: min(42vw, 36rem); /* * Fit within slider frame: top + bottom frame pad (min 80px each). * Shadows / title cards use viewport bleed, not image-box shrinkage. */ max-height: calc(var(--nm-visual-art-slider-max-height) - (2 * var(--nm-visual-art-slider-frame-pad-y, max(80px, 6vw)))); object-fit: contain !important; object-position: center; user-select: none; -webkit-user-drag: none; } .nm-visual-art-slider__image--sculpture { box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.25); border-radius: 2px; } /* * Shared edge chevrons — Visual Art archive sliders, gallery lightbox, * and illustration single hero prev/next. * Tall masked stroke from pagination-chevron.svg; sit near left/right edges. */ .nm-edge-nav { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 3rem; height: 5rem; padding: 0; margin: 0; border: none; border-radius: 0; background: transparent; color: var(--wp--custom--color--grey, #73736f); cursor: pointer; transform: translateY(-50%); transition: opacity 150ms ease, color 150ms ease; } .nm-edge-nav:hover { color: var(--wp--custom--color--black, #181818); } .nm-edge-nav:focus:not(:focus-visible) { outline: none; } .nm-edge-nav:focus-visible { color: var(--wp--custom--color--black, #181818); outline: 2px solid var(--wp--custom--color--black, #181818); outline-offset: 2px; } .nm-edge-nav--prev { left: 0.5rem; } .nm-edge-nav--next { right: 0.5rem; } .nm-edge-nav__chevron { display: block; width: 1.5rem; height: 4.5rem; background-color: currentColor; -webkit-mask: url("assets/images/pagination-chevron.svg") center / contain no-repeat; mask: url("assets/images/pagination-chevron.svg") center / contain no-repeat; } .nm-edge-nav--prev .nm-edge-nav__chevron { transform: scaleX(-1); } /* Above title cards so edge controls stay clickable. */ .nm-visual-art-slider__nav { z-index: 40; } /* * Archive slider arrows: ≥50px hit zone without moving the chevron. * Shared .nm-edge-nav stays 3rem; ::before expands the clickable box only. */ .nm-visual-art-slider__nav.nm-edge-nav::before { content: ''; position: absolute; top: 50%; left: 50%; width: 50px; height: 100%; min-height: 50px; transform: translate(-50%, -50%); } .nm-visual-art-slider__nav:disabled, .nm-visual-art-slider__nav[aria-disabled='true'], .nm-visual-art-slider__nav[hidden] { opacity: 0.25; cursor: default; pointer-events: none; } .nm-visual-art-slider--editor { min-height: 8rem; padding: 1.5rem; background-color: var(--wp--preset--color--surface, #f6f6f5); } .nm-exhibit__hero { margin-top: 0; margin-bottom: 3.5rem; } .nm-exhibit__hero img { display: block; width: 100%; height: auto; } .nm-exhibit__details { align-items: flex-start; } .nm-exhibit__meta, .nm-exhibit__meta .nm-exhibit__meta-line, .nm-exhibit__body, .nm-exhibit__body p { font-size: 1.125rem; font-weight: 500; line-height: 1.56; color: var(--wp--custom--color--grey, #73736f); } .nm-exhibit__meta { margin: 0; } .nm-exhibit__meta .nm-exhibit__meta-line { margin: 0; } .nm-exhibit__body > *:first-child { margin-top: 0; } .nm-exhibit__body > *:last-child { margin-bottom: 0; } .nm-exhibit-gallery { display: flex; flex-direction: column; gap: 1.8125rem; /* ~29px — Figma Frame 154 gap */ margin: 0; width: 100%; } .nm-exhibit-gallery__row { margin: 0; padding: 0; width: 100%; } .nm-exhibit-gallery__row--pair { display: grid; gap: 1.8125rem; align-items: stretch; } .nm-exhibit-gallery__row--pair-asymmetric { grid-template-columns: 42.78% 1fr; } .nm-exhibit-gallery__row--pair-equal { grid-template-columns: 1fr 1fr; } .nm-exhibit-gallery__item { margin: 0; padding: 0; min-width: 0; overflow: hidden; } .nm-exhibit-gallery__image, .nm-exhibit-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; } .nm-exhibit-gallery__row--full .nm-exhibit-gallery__image, .nm-exhibit-gallery__row--full img { height: auto; object-fit: contain; } .nm-exhibit-gallery--editor { min-height: 8rem; } /* ------------------------------------------------------------------------- Core Gallery — equal column widths (no last-row stretch) WP core sets flex-grow: 1 on gallery figures / .blocks-gallery-item, so an incomplete last row expands to fill the row (Sample Frames, Production Stills, and any columns-* gallery). Keep items at their column width; leave empty space. Excludes .nm-gallery (aspect-ratio flex pairs). ------------------------------------------------------------------------- */ .wp-block-gallery.has-nested-images:not(.nm-gallery) figure.wp-block-image { flex-grow: 0; } .wp-block-gallery:not(.has-nested-images):not(.nm-gallery) .blocks-gallery-item, .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item { flex-grow: 0; } /* ------------------------------------------------------------------------- Sample Frames + Production Stills — brightness hover Pattern groups get .nm-sample-frames / .nm-production-stills via metadata.name (render_block_core/group). Brighten gallery images 20% on hover. Include opacity so nm-img-fade transition is not wiped. ------------------------------------------------------------------------- */ .nm-sample-frames .wp-block-gallery figure.wp-block-image img, .nm-production-stills .wp-block-gallery figure.wp-block-image img { transition: filter 300ms ease, opacity 0.4s ease; } .nm-sample-frames .wp-block-gallery figure.wp-block-image:hover img, .nm-production-stills .wp-block-gallery figure.wp-block-image:hover img { filter: brightness(1.2); } @media (prefers-reduced-motion: reduce) { .nm-sample-frames .wp-block-gallery figure.wp-block-image img, .nm-production-stills .wp-block-gallery figure.wp-block-image img { transition: none; } } /* ------------------------------------------------------------------------- Core Gallery + .nm-gallery (Westeck project-gallery pattern) Add Additional CSS class "nm-gallery" on a core Gallery block. Per-image alignment: - Align center → full-width single row, natural aspect ratio - Align none (or any non-center) → flex pair cells (equal row height; width from image aspect via assets/js/nm-gallery-flex.js) Does not affect the custom exhibit-gallery block. ------------------------------------------------------------------------- */ .wp-block-gallery.nm-gallery { --wp--style--unstable-gallery-gap: 1.8125rem; display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; align-content: flex-start; gap: var(--wp--style--unstable-gallery-gap, 1.8125rem) !important; } /* Full-width row — Align center */ .wp-block-gallery.nm-gallery figure.wp-block-image.aligncenter, .wp-block-gallery.nm-gallery.has-nested-images figure.wp-block-image.aligncenter:not(#individual-image), .wp-block-gallery.nm-gallery:not(.has-nested-images) .blocks-gallery-item figure.aligncenter { margin: 0 !important; padding: 0 !important; flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; box-sizing: border-box; overflow: hidden; } .wp-block-gallery.nm-gallery figure.wp-block-image.aligncenter > a, .wp-block-gallery.nm-gallery figure.wp-block-image.aligncenter > div, .wp-block-gallery.nm-gallery:not(.has-nested-images) .blocks-gallery-item figure.aligncenter > a, .wp-block-gallery.nm-gallery:not(.has-nested-images) .blocks-gallery-item figure.aligncenter > div { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; height: auto !important; overflow: hidden; } .wp-block-gallery.nm-gallery figure.wp-block-image.aligncenter img, .wp-block-gallery.nm-gallery:not(.has-nested-images) .blocks-gallery-item figure.aligncenter img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; object-fit: unset !important; } /* Pair / column cells — Align none (and any non-center); flex set in JS */ .wp-block-gallery.nm-gallery figure.wp-block-image:not(.aligncenter), .wp-block-gallery.nm-gallery.has-nested-images figure.wp-block-image:not(.aligncenter):not(#individual-image), .wp-block-gallery.nm-gallery:not(.has-nested-images) .blocks-gallery-item figure:not(.aligncenter) { margin: 0 !important; padding: 0 !important; flex: 1 1 0; min-width: 0; min-height: 0; box-sizing: border-box; overflow: hidden; display: flex !important; flex-direction: column !important; } .wp-block-gallery.nm-gallery figure.wp-block-image:not(.aligncenter) > a, .wp-block-gallery.nm-gallery figure.wp-block-image:not(.aligncenter) > div, .wp-block-gallery.nm-gallery:not(.has-nested-images) .blocks-gallery-item figure:not(.aligncenter) > a, .wp-block-gallery.nm-gallery:not(.has-nested-images) .blocks-gallery-item figure:not(.aligncenter) > div { display: flex !important; flex: 1 1 auto; width: 100% !important; min-height: 0; height: 100% !important; margin: 0 !important; padding: 0 !important; } .wp-block-gallery.nm-gallery figure.wp-block-image:not(.aligncenter) img, .wp-block-gallery.nm-gallery:not(.has-nested-images) .blocks-gallery-item figure:not(.aligncenter) img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; } /* Crop images on — keep natural ratio for center; pairs stay cover */ .wp-block-gallery.nm-gallery.is-cropped figure.wp-block-image.aligncenter:not(#individual-image) img, .wp-block-gallery.nm-gallery.is-cropped:not(.has-nested-images) .blocks-gallery-item figure.aligncenter img { width: 100% !important; height: auto !important; object-fit: unset !important; } @media screen and (max-width: 781px) { /* * Mobile heading scale (≈0.63× theme.json h1–h4; h5/h6 floored for readability). * Matches post-title H1 mobile size (2.3375rem). Overrides both WP kebab tokens * (--h-1…) and legacy aliases (--h1…) so elements + utilities pick it up. */ :root { --wp--custom--font-size--h-1: 2.3375rem; --wp--custom--font-size--h-2: 1.975rem; --wp--custom--font-size--h-3: 1.67rem; --wp--custom--font-size--h-4: 1.235rem; --wp--custom--font-size--h-5: 1.125rem; --wp--custom--font-size--h-6: 1rem; --wp--custom--font-size--h1: 2.3375rem; --wp--custom--font-size--h2: 1.975rem; --wp--custom--font-size--h3: 1.67rem; --wp--custom--font-size--h4: 1.235rem; --wp--custom--font-size--h5: 1.125rem; --wp--custom--font-size--h6: 1rem; } /* * Header brand (site title + section): ×1.2 over mobile h4. * Hamburger: ×1.2 box (24→28.8), bars drawn at absolute 2px so stroke * weight does not scale with the icon (WP handle paths are 1.5 viewBox units). */ .nm-header__brand { font-size: 1.482rem; /* was 1.235rem (mobile h4); ×1.2 */ } .nm-header__nav .wp-block-navigation__responsive-container-open svg { width: 28.8px; /* was 24px; ×1.2 */ height: 28.8px; fill: transparent; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 19.2px 2px; /* 16/24 of 28.8 — same horizontal span as WP handle */ background-position: center 9px, /* 7.5 × 1.2 */ center 18px; /* 15 × 1.2 */ background-repeat: no-repeat; } .nm-header__nav .wp-block-navigation__responsive-container-open svg path { opacity: 0; } /* Match close icon size to the larger hamburger so open/close share a box. */ .nm-header__nav .wp-block-navigation__responsive-container-close svg { width: 28.8px; height: 28.8px; } .nm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: calc((1.482rem - 28.8px) / 2); } .nm-post__layout { flex-direction: column-reverse; } .nm-post__media { position: static; padding-top: var(--wp--preset--spacing--50, clamp(1.25rem, 5vw, 1.75rem)); padding-bottom: var(--wp--preset--spacing--50, clamp(1.25rem, 5vw, 1.75rem)); } .nm-post__media.is-nm-sticky-stack { position: static; align-self: auto; } .nm-post__sticky-slot > .nm-post__featured-image, .nm-post__sticky-slot > .wp-block-image, .nm-post__sticky-slot > figure, .nm-post__featured-image, .nm-post__featured-image.wp-block-post-featured-image { position: static; top: auto; margin-bottom: 0; } /* Pull-out body images stay in flow (full width), matching featured. */ .nm-post__body .wp-block-image.alignnone, .nm-post__body .wp-block-image.alignright, .nm-post__body .wp-block-image.align-right, .nm-post__body figure.alignnone, .nm-post__body figure.alignright { float: none; margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } .nm-post__intro { padding-top: var(--wp--preset--spacing--70, clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: var(--wp--preset--spacing--50, clamp(1.25rem, 5vw, 1.75rem)); } .nm-post__title, .wp-block-group.post-header > h1.wp-block-post-title, .wp-block-group.post-header h1.alignwide.wp-block-post-title, .post-header h1.wp-block-post-title, .post-header h1.wp-block-heading, .post-header h1, .post-header .wp-block-post-title, .post-header .wp-block-heading { font-size: 2.3375rem !important; } /* * Post/single body headings: beat editor inline font-size / preset classes * so h2–h6 shrink with the same mobile rhythm as H1. */ .nm-post__body h1, .nm-post__body h1.wp-block-heading, .nm-post__body .h1, .entry-content h1, .entry-content h1.wp-block-heading, .entry-content .h1 { font-size: 2.3375rem !important; } .nm-post__body h2, .nm-post__body h2.wp-block-heading, .nm-post__body .h2, .entry-content h2:not(.nm-artwork__collection-label):not(.nm-about__exhibition-title), .entry-content h2.wp-block-heading:not(.nm-artwork__collection-label):not(.nm-about__exhibition-title), .entry-content .h2 { font-size: 1.975rem !important; } .nm-post__body h3, .nm-post__body h3.wp-block-heading, .nm-post__body .h3, .entry-content h3, .entry-content h3.wp-block-heading, .entry-content .h3 { font-size: 1.67rem !important; } .nm-post__body h4, .nm-post__body h4.wp-block-heading, .nm-post__body .h4, .entry-content h4, .entry-content h4.wp-block-heading, .entry-content .h4 { font-size: 1.235rem !important; } .nm-post__body h5, .nm-post__body h5.wp-block-heading, .nm-post__body .h5, .entry-content h5, .entry-content h5.wp-block-heading, .entry-content .h5 { font-size: 1.125rem !important; } .nm-post__body h6, .nm-post__body h6.wp-block-heading, .nm-post__body .h6, .entry-content h6, .entry-content h6.wp-block-heading, .entry-content .h6 { font-size: 1rem !important; } .nm-post__date, .nm-post__date.wp-block-post-date { font-size: 1.125rem; } .nm-post-nav__inner { flex-direction: column; gap: 2.5rem; } .nm-post-nav__side, .nm-post-nav__side--next { max-width: none; margin-left: 0; } .nm-post-nav__label { font-size: 1.125rem; } .nm-post-nav__title { font-size: 1.67rem; } .nm-post-nav__date { font-size: 1.125rem; } .nm-post-nav__excerpt { font-size: 1rem; } .nm-essay__title, .nm-essay__title a { font-size: 1.9125rem !important; } .nm-essay__excerpt, .nm-essay__excerpt p { font-size: var(--wp--custom--font-size--body, 1.125rem) !important; } .nm-essays__title { font-size: 2.3375rem !important; } .nm-essays-pagination__nav .wp-block-query-pagination-previous, .nm-essays-pagination__nav .wp-block-query-pagination-next { font-size: 1.125rem; } .nm-essays-pagination__nav .wp-block-query-pagination-previous::before, .nm-essays-pagination__nav .wp-block-query-pagination-next::after { width: 1rem; height: 3rem; } .nm-about__name, .nm-contact__heading { font-size: 2.125rem !important; } .nm-about__section-title { font-size: 1.9125rem !important; } .nm-about__credit-label, .nm-about__credit-line { font-size: 1.25rem !important; } /* Stacked exhibition title: one step up from the two-column size (h4) to h3. */ .nm-about__exhibition-title { font-size: var(--wp--custom--font-size--h3, 1.67rem) !important; } .nm-about__credit-row, .nm-contact__columns:not(.is-not-stacked-on-mobile), .nm-footer__columns:not(.is-not-stacked-on-mobile) { column-gap: 1.5rem !important; } .nm-exhibit__title, .wp-block-group.exhibit-header > h1.wp-block-post-title, .wp-block-group.exhibit-header > h1.wp-block-heading, .wp-block-group.exhibit-header h1.alignwide.wp-block-post-title, .exhibit-header h1.wp-block-post-title, .exhibit-header h1.wp-block-heading, .exhibit-header h1, .exhibit-header .wp-block-post-title, .exhibit-header .wp-block-heading, .nm-exhibit__title, .nm-media-art__title, .wp-block-group.media-art-header > h1.wp-block-post-title, .wp-block-group.media-art-header > h1.wp-block-heading, .wp-block-group.media-art-header h1.alignwide.wp-block-post-title, .media-art-header h1.wp-block-post-title, .media-art-header h1.wp-block-heading, .media-art-header h1, .media-art-header .wp-block-post-title, .media-art-header .wp-block-heading, .nm-visual-art__title, .wp-block-group.visual-art-header > h1.wp-block-post-title, .wp-block-group.visual-art-header > h1.wp-block-heading, .wp-block-group.visual-art-header h1.alignwide.wp-block-post-title, .visual-art-header h1.wp-block-post-title, .visual-art-header h1.wp-block-heading, .visual-art-header h1, .visual-art-header .wp-block-post-title, .visual-art-header .wp-block-heading, .nm-illustration__title, .wp-block-group.illustration-header > h1.wp-block-post-title, .wp-block-group.illustration-header > h1.wp-block-heading, .wp-block-group.illustration-header h1.alignwide.wp-block-post-title, .illustration-header h1.wp-block-post-title, .illustration-header h1.wp-block-heading, .illustration-header h1, .illustration-header .wp-block-post-title, .illustration-header .wp-block-heading { font-size: 2.125rem !important; } .nm-exhibit__intro, .nm-media-art__intro, .nm-visual-art__intro, .nm-illustration__intro { padding-bottom: 1.5rem; } .nm-exhibit__hero, .nm-media-art__hero, .nm-visual-art__hero, .nm-illustration__hero { margin-top: 0; margin-bottom: 2rem; } .nm-visual-art__hero, .nm-illustration__hero { height: auto; min-height: 0; max-height: 90vh; aspect-ratio: 1 / 1; padding: 2rem; } .nm-visual-art__hero { max-height: 75vh; padding: 6vh 4vw; } /* * Square frame is shorter than 90vh at mid widths — size the image to the * figure (definite via aspect-ratio + height:100%), not the viewport. */ .nm-visual-art__hero .wp-block-post-featured-image img, .nm-visual-art__hero-image img, .nm-illustration__hero .wp-block-post-featured-image img, .nm-illustration__hero-image img { max-height: 100%; } .nm-exhibit-gallery__row--pair-asymmetric, .nm-exhibit-gallery__row--pair-equal { grid-template-columns: 1fr; } .nm-visual-art-archive__title, .nm-media-art-archive__title, .nm-illustration-archive__title, .nm-exhibitions-archive__title { font-size: 2.125rem !important; } .nm-illustration-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } .nm-illustration-archive__link { padding: 0.625rem 0.625rem 1rem; } .nm-visual-art-archive__title, .nm-visual-art-archive__subtitle, .nm-media-art-archive__title, .nm-media-art-archive__subtitle, .nm-illustration-archive__title, .nm-illustration-archive__subtitle, .nm-exhibitions-archive__title, .nm-exhibitions-archive__subtitle { font-size: 1.9125rem !important; } .nm-visual-art-slider { /* Cap vertical whitespace on small screens; keep title-card bleed. */ --nm-visual-art-slider-frame-pad-y: min(80px, 10vw); --nm-visual-art-slider-bleed-top: max(var(--nm-visual-art-slider-frame-pad-y), 2rem); --nm-visual-art-slider-bleed-bottom: max(var(--nm-visual-art-slider-frame-pad-y), 5.75rem); } .nm-visual-art-slider__frame { min-height: 0; height: auto; max-height: var(--nm-visual-art-slider-max-height); padding: var(--nm-visual-art-slider-frame-pad-y) 0; } .nm-visual-art-slider__track { gap: 2rem; padding-left: 1.25rem; padding-right: 1.25rem; } .nm-visual-art-slider__image, .nm-visual-art-slider__slide img { max-width: min(72vw, 22rem); max-height: calc(var(--nm-visual-art-slider-max-height) - (2 * var(--nm-visual-art-slider-frame-pad-y))); } .nm-edge-nav--prev { left: 0.35rem; } .nm-edge-nav--next { right: 0.35rem; } .nm-edge-nav__chevron { width: 1rem; height: 3rem; } } /* * Narrow phones: one artwork per view (full scrollport width). * Slider snap is JS-only at all breakpoints; 174px gap stays above 640px. * Frame stays edge-to-edge (no L/R pad); 10vw inset lives on each slide so * the overflow viewport is not clipped. Track L/R padding stays 0. */ @media screen and (max-width: 640px) { /* * Essay archive — stacked card: heading | image row; excerpt full-width below. * (641px–781px keeps desktop grid: excerpt beside image in left column.) */ .nm-essay, .wp-block-group.nm-essay { grid-template-areas: "heading image" "excerpt excerpt"; column-gap: 1rem; /* Inline pattern uses padding-top: 5rem; ~20% less above each essay on mobile. */ padding-top: 4rem !important; } .nm-essay__excerpt { grid-column: 1 / -1; width: 100%; max-width: none; } .nm-visual-art-slider__frame { /* Vertical pad only — keep the scrollport full-bleed. */ padding-left: 0; padding-right: 0; } .nm-visual-art-slider__viewport { /* Size slides against the scrollport, not the max-content track. */ container-type: inline-size; } .nm-visual-art-slider__track { gap: 0; padding-left: 0; padding-right: 0; } .nm-visual-art-slider__slide { box-sizing: border-box; display: flex; flex: 0 0 100cqi; align-items: center; justify-content: center; width: 100cqi; padding-left: 10vw; padding-right: 10vw; } .nm-visual-art-slider__image, .nm-visual-art-slider__slide img { /* One image fills the slide content box (inset by slide L/R pad). */ max-width: 100%; } /* Pull archive slider arrows flush to the viewport edges. */ .nm-visual-art-slider__nav.nm-edge-nav--prev { left: 0; } .nm-visual-art-slider__nav.nm-edge-nav--next { right: 0; } } /* ------------------------------------------------------------------------- Artwork page — Figma Artwork (2024:925) H1 + lede · Featured Artwork · Recent Works · Collections ------------------------------------------------------------------------- */ .nm-artwork__intro { max-width: 63.5625rem; /* ~1017px intro measure from Figma */ } .nm-artwork__lede { margin: 0; font-size: 1.214375rem !important; /* was 1.8125rem; ×0.67 */ } /* * Artwork h2 section titles (Featured / Recent): native h2 type tokens. * Padding: was 0/0. Top += spacing|70 (with .nm-artwork blockGap|70 → 2× top). * Bottom → spacing|60 (~1.5× prior section blockGap|50 rhythm). */ .nm-artwork h2:not(.nm-artwork__collection-label):not(.nm-about__exhibition-title), .nm-artwork h2.wp-block-heading:not(.nm-artwork__collection-label):not(.nm-about__exhibition-title), .nm-artwork h2.nm-artwork__section-title { margin: 0; padding-top: var(--wp--preset--spacing--70, clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: var(--wp--preset--spacing--60, clamp(1.75rem, 4vw, 3rem)); font-size: var(--wp--custom--font-size--h2, 2.7676rem) !important; font-weight: var(--wp--custom--font-weight--medium, 500); line-height: var(--wp--custom--line-height--heading, 1); letter-spacing: var(--wp--custom--letter-spacing--none, 0); } /* Collection section labels — h3 token (beats baked h2 + 3.125rem on --split). */ .nm-artwork h2.nm-artwork__section-title.nm-artwork__section-title--split, .nm-artwork h3.nm-artwork__section-title, .nm-artwork .nm-artwork__section-title--split { margin: 0; font-size: var(--wp--custom--font-size--h3, 2.4172rem) !important; font-weight: var(--wp--custom--font-weight--medium, 500); line-height: var(--wp--custom--line-height--heading, 1); letter-spacing: var(--wp--custom--letter-spacing--none, 0); } .nm-artwork__section-title--split { color: var(--wp--custom--color--black, #181818); } .nm-artwork__section-title-row .nm-artwork__section-title-main { margin: 0; } .nm-artwork__section-title-row .nm-artwork__section-title-muted { margin: 0; font-size: var(--wp--custom--font-size--h3, 2.4172rem); font-weight: var(--wp--custom--font-weight--medium, 500); line-height: var(--wp--custom--line-height--heading, 1); } .nm-artwork__section-title-muted { color: var(--wp--custom--color--grey, #73736f); } /* Featured Artwork — copy left, grey image surface right */ .nm-featured-artwork, .nm-featured-artwork.nm-featured-artwork--preview { display: grid; grid-template-columns: minmax(16rem, 0.34fr) minmax(0, 0.66fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; width: 100%; } .nm-featured-artwork__copy { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .nm-featured-artwork__title { margin: 0; font-size: var(--wp--custom--font-size--h3, 2.4172rem); font-weight: 500; line-height: 1; color: var(--wp--custom--color--black, #181818); } .nm-featured-artwork__title-link { color: inherit; text-decoration: none; transition: color 0.2s ease; } .nm-featured-artwork__title-link::after { content: none; } .nm-featured-artwork__title-link:hover, .nm-featured-artwork__title-link:focus-visible { color: var(--wp--custom--color--grey, #73736f); text-decoration: none; } .nm-featured-artwork__term { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.56; letter-spacing: 0.6px; color: var(--wp--custom--color--grey, #73736f); } .nm-featured-artwork__excerpt { margin: 0.5rem 0 0; max-width: 32rem; font-size: 1.125rem; font-weight: 500; line-height: 1.56; color: var(--wp--custom--color--grey, #73736f); } .nm-featured-artwork__details { margin-top: 1.5rem; padding-top: 0; } .nm-featured-artwork__detail-line { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.56; color: var(--wp--custom--color--grey, #73736f); } .nm-featured-artwork__editor-note { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--wp--custom--color--grey, #73736f); } .nm-featured-artwork__media { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; width: 100%; min-height: 0; max-height: 90vh; height: auto; padding: clamp(3rem, 7vw, 6rem); /* Visible so hover lift is not clipped by the grey frame. */ overflow: visible; background-color: var(--wp--preset--color--surface, #f6f6f5); } /* * Hover lift on the , not the — .nm-img-fade sets * `transition: opacity` on the image and would wipe transform. * No slider-style title card on the Artwork page. */ .nm-featured-artwork__image-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-height: 0; overflow: visible; text-decoration: none; transition: transform 0.3s ease-in-out; } .nm-featured-artwork__image-link:hover, .nm-featured-artwork__image-link:focus-visible { transform: translateY(-7.5px); } .nm-featured-artwork__figure { display: flex; align-items: center; justify-content: center; margin: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-height: 0; } .nm-featured-artwork__figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; margin-inline: auto; } .nm-featured-artwork__no-image, .nm-featured-artwork__loading { margin: 0; padding: 2rem; color: var(--wp--custom--color--grey, #73736f); } /* * Recent Works section is alignfull inside .nm-artwork (root-padded). * Use width:auto (not 100%): with WP negative margins, width:100% only * shifts left and leaves a right gap (~2× root padding) — cards and * heading then sit narrower than Featured / Collections. */ .nm-artwork > .nm-artwork__section--recent.alignfull { box-sizing: border-box; width: auto; max-width: none; margin-left: calc(-1 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem))); margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 1.25rem))); } /* * Nested alignfull would also cancel section has-global-padding; keep it * in-flow so only .nm-artwork__recent-grid performs the desktop breakout * (avoids double negative margins / horizontal overflow). */ .nm-artwork__section--recent > .nm-artwork__recent.alignfull { box-sizing: border-box; width: auto; max-width: none; margin-left: 0; margin-right: 0; } /* * Desktop flush 3-col: cancel section root padding (has-global-padding). * Prefer width:auto + root-padding negative margins (same as archive * sliders). At max-width 900px margins are reset for equal page gutters. */ .nm-artwork__recent-grid { box-sizing: border-box; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; width: auto; max-width: none; margin-top: var(--wp--preset--spacing--50, 1.5rem); margin-left: calc(-1 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem))); margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 1.25rem))); min-height: 0; } .nm-artwork__recent-item { display: flex; flex-direction: column; /* Space below grey band / above title + term. */ gap: 1.875rem; min-width: 0; text-align: center; } .nm-artwork__recent-meta { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .nm-artwork__recent-band { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; min-height: 0; max-height: min(90vh, 640px); padding: clamp(3rem, 7vw, 6rem); /* Visible so hover lift is not clipped by the grey box. */ overflow: visible; background-color: var(--wp--preset--color--surface, #f6f6f5); } .nm-artwork__recent-image-cell { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; max-height: 100%; height: 100%; } .nm-artwork__recent-image-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-height: 0; overflow: visible; text-decoration: none; transition: transform 0.3s ease-in-out; } .nm-artwork__recent-image-link:hover, .nm-artwork__recent-image-link:focus-visible { transform: translateY(-7.5px); } .nm-artwork__recent-image { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; margin-inline: auto; } .nm-artwork__recent-title { margin: 0; font-size: var(--wp--custom--font-size--h4); font-weight: 500; line-height: 1; color: var(--wp--custom--color--black, #181818); } .nm-artwork__recent-title-link { color: inherit; text-decoration: none; transition: color 0.2s ease; } .nm-artwork__recent-title-link::after { content: none; } .nm-artwork__recent-title-link:hover, .nm-artwork__recent-title-link:focus-visible { color: var(--wp--custom--color--grey, #73736f); text-decoration: none; } .nm-artwork__recent-term { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.56; letter-spacing: 0.6px; color: var(--wp--custom--color--grey, #73736f); } /* Collections — grey image panels + label / explore footer */ .nm-artwork__collection-grid { box-sizing: border-box; display: grid; gap: 0.5rem; width: auto; max-width: none; margin-left: calc(-1 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem))); margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 1.25rem))); } .nm-artwork__collection-grid--visual { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nm-artwork__collection-grid--media { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nm-artwork__collection-card { display: flex; flex-direction: column; min-width: 0; } .nm-artwork__collection-media { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: min(clamp(16rem, 35vw, 41.8rem), 90vh); max-height: 90vh; padding: clamp(3rem, 7vw, 6rem); /* Visible so hover lift is not clipped by the grey panel. */ overflow: visible; background-color: var(--wp--preset--color--surface, #f6f6f5); } /* Visual / Media Art collections — lock grey panels to 4×3 */ .nm-artwork__collection-grid--visual .nm-artwork__collection-media, .nm-artwork__collection-grid--media .nm-artwork__collection-media { aspect-ratio: 1 / 1; width: min(100%, 90vh); min-height: 0; max-height: 90vh; height: auto; margin-inline: auto; } /* Media Art columns — tighter grey-box padding */ .nm-artwork__collection-grid--media .nm-artwork__collection-media { padding: clamp(1.25rem, 4vw, 3rem); } .nm-artwork__collection-image-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-height: 0; overflow: visible; text-decoration: none; transition: transform 0.3s ease-in-out; } .nm-artwork__collection-image-link:hover, .nm-artwork__collection-image-link:focus-visible { transform: translateY(-7.5px); } .nm-artwork__collection-image { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; margin-inline: auto; } .nm-artwork__collection-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.875rem var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem)) 0; } .nm-artwork__collection-grid--visual .nm-artwork__collection-card:first-child .nm-artwork__collection-footer { padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 1.25rem)); } .nm-artwork__collection-grid--visual .nm-artwork__collection-card:last-child .nm-artwork__collection-footer { padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 1.25rem)); } .nm-artwork__collection-label { margin: 0; padding: 0; font-size: var(--wp--custom--font-size--h4); font-weight: 500; line-height: 1; letter-spacing: var(--wp--custom--letter-spacing--none, 0); color: var(--wp--custom--color--black, #181818); } .nm-artwork__collection-label a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .entry-content .nm-artwork__collection-label a::after, .wp-block-post-content .nm-artwork__collection-label a::after, .nm-artwork__collection-label a::after { content: none; } .nm-artwork__collection-label a:hover, .nm-artwork__collection-label a:focus-visible { color: var(--wp--custom--color--grey, #73736f); text-decoration: none; } .nm-artwork__collection-explore { margin: 0; font-size: var(--wp--custom--font-size--big-explore, 1.374rem); font-weight: 500; line-height: 1; text-align: right; white-space: nowrap; color: var(--wp--custom--color--black, #181818); } .nm-artwork__collection-explore a { color: inherit; } .nm-artwork__collection-explore a:hover, .nm-artwork__collection-explore a:focus-visible { color: var(--wp--custom--color--black, #181818); } @media (max-width: 900px) { .nm-featured-artwork, .nm-featured-artwork.nm-featured-artwork--preview { grid-template-columns: 1fr; } .nm-featured-artwork__media { order: -1; } .nm-artwork__recent-grid, .nm-artwork__collection-grid--visual, .nm-artwork__collection-grid--media { grid-template-columns: 1fr; gap: 4rem; } /* * 1-col Recent Works: match Featured / Collections content width. * Pull the alignfull section back into .nm-artwork gutters and drop its * has-global-padding inset + grid breakout (equal L/R page margins). */ .nm-artwork > .nm-artwork__section--recent.alignfull { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .nm-artwork__recent-grid { margin-left: 0; margin-right: 0; } /* 1-col: term + explore flush with grey box edges (not root-padding inset). */ .nm-artwork__collection-footer, .nm-artwork__collection-grid--visual .nm-artwork__collection-card:first-child .nm-artwork__collection-footer, .nm-artwork__collection-grid--visual .nm-artwork__collection-card:last-child .nm-artwork__collection-footer { box-sizing: border-box; width: min(100%, 90vh); margin-inline: auto; padding-left: 0; padding-right: 0; } .nm-artwork__collection-label { text-align: left; } .nm-artwork__collection-explore { text-align: right; } } @media (prefers-reduced-motion: reduce) { .nm-featured-artwork__image-link, .nm-artwork__recent-image-link, .nm-artwork__collection-image-link { transition: none; } .nm-featured-artwork__image-link:hover, .nm-featured-artwork__image-link:focus-visible, .nm-artwork__recent-image-link:hover, .nm-artwork__recent-image-link:focus-visible, .nm-artwork__collection-image-link:hover, .nm-artwork__collection-image-link:focus-visible { transform: none; } } /* ------------------------------------------------------------------------- Exhibited Works — one grey box per piece, same 0.5rem gap as the Visual Art sculpture / painting panels. Title card + lift match the archive slider and stay inside each box. ------------------------------------------------------------------------- */ .nm-exhibited-works { --nm-exhibited-cols: var(--nm-exhibited-works-columns, 3); --nm-exhibited-pad: clamp(0.85rem, calc(4vw / var(--nm-exhibited-cols, 3)), 2rem); /* Matched top and bottom slots keep the image centered while the title is hidden. */ --nm-exhibited-title-slot: 2.15rem; box-sizing: border-box; background: transparent; overflow: visible; } .nm-exhibited-works--empty { padding: 1.5rem; background-color: var(--wp--preset--color--surface, #f6f6f5); color: var(--wp--custom--color--grey, #73736f); font-size: 1rem; font-weight: 500; line-height: 1.5; } .entry-content .nm-exhibited-works__grid, .wp-block-post-content .nm-exhibited-works__grid, .nm-exhibited-works__grid { display: grid; grid-template-columns: repeat(var(--nm-exhibited-cols, var(--nm-exhibited-works-columns, 3)), minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; overflow: visible; } .entry-content .nm-exhibited-works__grid > .nm-exhibited-works__cell, .wp-block-post-content .nm-exhibited-works__grid > .nm-exhibited-works__cell, .nm-exhibited-works__grid > .nm-exhibited-works__cell { margin-block: 0; } .nm-exhibited-works__cell { position: relative; z-index: 0; display: grid; grid-template-rows: var(--nm-exhibited-title-slot, 2.15rem) minmax(0, 1fr) var(--nm-exhibited-title-slot, 2.15rem); align-items: center; justify-items: center; box-sizing: border-box; aspect-ratio: 1 / 1; min-width: 0; margin: 0; padding: var(--nm-exhibited-pad, 0.85rem); overflow: visible; background-color: var(--wp--preset--color--surface, #f6f6f5); } .nm-exhibited-works__cell:hover, .nm-exhibited-works__cell:focus-within { z-index: 5; } .nm-exhibited-works__link { grid-row: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; overflow: visible; line-height: 0; text-decoration: none; transition: transform 0.3s ease-in-out; } .nm-exhibited-works__link:hover, .nm-exhibited-works__link:focus-visible { transform: translateY(-7.5px); } .nm-exhibited-works__link:focus:not(:focus-visible) { outline: none; } .nm-exhibited-works__link:focus-visible { outline: 2px solid var(--wp--custom--color--black, #181818); outline-offset: 3px; } .nm-exhibited-works__image, .nm-exhibited-works__link img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; } .nm-exhibited-works__image--sculpture { box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.25); border-radius: 2px; } .nm-exhibited-works__missing { color: var(--wp--custom--color--grey, #73736f); font-size: 1rem; font-weight: 500; line-height: 1.3; text-align: center; } /* * Compact title card in the bottom slot. A matching empty slot above the * image keeps the artwork centered while the card is hidden. The link lifts; * the card does not. */ .nm-exhibited-works__title { position: absolute; bottom: 0.4rem; left: 50%; z-index: 2; box-sizing: border-box; max-width: calc(100% - 0.8rem); margin: 0; padding: 0.2rem 0.45rem; border-radius: 0; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); color: var(--wp--custom--color--black, #181818); font-family: var(--wp--custom--font-family--heading, "Figtree", sans-serif); font-size: 0.75rem; font-weight: 500; line-height: 1.2; text-align: center; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%); transition: opacity 0.2s ease, visibility 0.2s ease; } .nm-exhibited-works__cell:hover .nm-exhibited-works__title, .nm-exhibited-works__cell:focus-within .nm-exhibited-works__title { opacity: 1; visibility: visible; } /* Desktop uses the chosen maximum. Step down; never exceed that maximum. */ @media (max-width: 1400px) { .nm-exhibited-works { --nm-exhibited-cols: min(4, var(--nm-exhibited-works-columns, 3)); } } @media (max-width: 1100px) { .nm-exhibited-works { --nm-exhibited-cols: min(3, var(--nm-exhibited-works-columns, 3)); } } @media (max-width: 781px) { .nm-exhibited-works { --nm-exhibited-cols: min(2, var(--nm-exhibited-works-columns, 3)); } } @media (max-width: 480px) { .nm-exhibited-works { --nm-exhibited-cols: 1; } } @media (prefers-reduced-motion: reduce) { .nm-exhibited-works__link { transition: none; } .nm-exhibited-works__link:hover, .nm-exhibited-works__link:focus-visible { transform: none; } .nm-exhibited-works__title { transition: none; } }