.tabbernav a{font-size:100%}h3{font-size:180%}.content p a, .content li a{border-bottom-color:rgba(70, 169, 122, 1)}.mp-nav-section-preview h3{font-size:120%}.loc_marker, .curr_loc_marker, .osm_roundup_loc_marker, .ui-tabs-nav .ui-state-default.ui-state-active, .ui-tabs-nav .ui-state-default.ui-state-hover, .ui-tabs-nav .ui-state-default:hover, .mp-carousel .mp-swiper-pagination .mp-swiper-pagination-bullet-active, .tabberactive a{background-color:rgba(34, 34, 34, 1)}a, .mp-dropbtn{color:rgba(70, 169, 122, 1)}.mainnav, .subnav{font-size:120%}header .eventinfos .datetime{font-size:130%}.mp-grid-9 .mp-grid-8 .mp-carousel h3{font-size:180%}.mp-loc-url a, .buy_url a, .location-reservation, .reserve{border-color:rgba(70, 169, 122, 1)}#side .mp-classiclist .mp-list-item h3{font-size:144%}.loc_info h4{font-size:180%}.curr_loc_marker:before, .loc_marker:before, .osm_loc_marker:before, .osm_roundup_loc_marker:before{border-top-color:rgba(34, 34, 34, 1)}.mp-text:before, .loc_info:before, .event_info:before, #title:before, #related h4:before, .mp-result h4:before, .mp-cal .mp-infos.mp-location a{font-style:normal;font-weight:bold;font-family:"source-sans-3",sans-serif;color:rgba(70, 169, 122, 1)}.mp-grid-9 .mp-carousel .mp-description{font-size:120%}.mp-grid-6 .mp-carousel .mp-description{font-size:100%}.media-content h2{font-size:120%}.osm_event_marker{border-color:rgba(70, 169, 122, 1)}h2{font-size:264%}button, .flatpickr-current-month, input.btn, .reset, .submit_event, .mp-view-more, .view_more, .mp-goto-search, .mp-button, .toggle_view{font-family:"source-sans-3",sans-serif}.mainnav, .subnav, .subnav_nested, #textnav, .header_links{font-style:normal;font-weight:bold;font-family:"source-sans-3",sans-serif}.mp-cal .mp-event-item .mp-description{font-size:90%}.media-content p{font-size:95%}.mp-title h2 a{color:rgba(70, 169, 122, 1)}.alpha_search .on{border-bottom-color:rgba(70, 169, 122, 1);color:rgba(70, 169, 122, 1)}.event_title+a{font-size:110%}.sectiontitle h1{font-size:216%}.mp-carousel h3{font-size:300%}.mp-carousel .mp-description{line-height:130%}.content q{font-size:120%;font-weight:normal;font-family:"source-sans-3",sans-serif;color:rgba(70, 169, 122, 1)}.mp-grid-3 .mp-carousel h3{font-size:156%}label{font-size:70%}pre{line-height:150%}.roundup-object .number{font-size:180%}.mp-cal .mp-event-item h3{font-size:132%}.roundup-location .number{font-size:180%}h1{font-size:324%}.mp-title h2, .events_list h3{font-size:120%;color:rgba(70, 169, 122, 1);font-weight:bold;font-family:"source-sans-3",sans-serif;font-style:normal}h4{font-size:168%}.mp-grid-4 .mp-classiclist h3{font-size:144%}.mp-grid-12 .mp-grid-12 .mp-carousel .mp-description{font-size:125%}h1 a, h2 a, h3 a, h4 a, legend{color:rgba(34, 34, 34, 1)}.mp-grid-8 .mp-grid-6 .mp-carousel h3{font-size:156%}.marker-cluster-small div, .marker-cluster-medium div{background-color:rgba(34, 34, 34, 1)}.event_info h4{font-size:180%}.content blockquote::before, .mp-feats{color:rgba(70, 169, 122, 1)}.mp-h2-header h2{font-style:normal;font-family:"source-sans-3",sans-serif;font-size:156%}button{font-size:130%}legend{font-size:125%}h1, h2, h3, h4, .roundup-object .number, .roundup-location .number, legend{font-style:normal;font-weight:normal;font-family:"source-sans-3",sans-serif}.mp-grid-3 .mp-classiclist h3{font-size:144%}.ui-tabs-nav .ui-state-default, .mp-filterbar-checkboxmenu-title, .mp-feats{font-style:normal;font-weight:bold;font-family:"source-sans-3",sans-serif}.osm_loc_marker, .osm_roundup_loc_marker, .mp-loc-follows .chicklet{border-color:rgba(34, 34, 34, 1)}.event_marker:before, .osm_event_marker:before, .mp-a11y-tool.open #mp-a11y-menu{border-top-color:rgba(70, 169, 122, 1)}.content p{line-height:150%}.tags a, .mp-tagcloud-list a, .tagcloud-list a{font-family:"source-sans-3",sans-serif;background-color:rgba(70, 169, 122, 1)}.mp-slider .mp-text h3{font-size:144%}.event_marker, .mp-bubble-content, button, .mp-button, input.form_submit, input.btn, .mp-filterbar-menu .active, .mp-filterbar-textbar.mp-has-filters:before, .reset, .submit_event, .mp-view-more, .view_more, .mp-goto-search, .toggle_view, .flatpickr-day.selected.startRange, .flatpickr-day.inRange, .flatpickr-day.inRange.prevMonthDay, .flatpickr-day.inRange.nextMonthDay, .flatpickr-day.selected.endRange, .mp-a11y-toggle, .mp-a11y-menuitem a.active{background-color:rgba(70, 169, 122, 1)}.mp-grid-4 .mp-carousel h3{font-size:156%}body, p, .content li, input, pre, .media-content h2, input, textarea, select{font-size:100%;font-family:"source-sans-3",sans-serif}.mp-layout-sprocket.mp-grid-4 .mp-cal .mp-event-item h3{font-size:132%}.subtitle{font-size:120%}.mp-h2-header{border-color:rgba(34, 34, 34, 1)}.mp-grid-12 .mp-grid-12 .mp-classiclist h3{font-size:240%}nav a, .mega-toggle, .roundup-object .number, .roundup-location .number{color:rgba(34, 34, 34, 1)}.pagination a.ord.active, .pagination a.ord.active:hover, .pagination a:hover{border-color:rgba(70, 169, 122, 1);background-color:rgba(70, 169, 122, 1)}.mp-grid-8 .mp-carousel .mp-description{font-size:120%}.mp-grid-6 .mp-carousel h3{font-size:180%}.field.event_tags legend{font-size:70%}@media only screen and (max-width:48em){h1{font-size:240%}.mp-grid-12 .mp-grid-12 .mp-carousel p.mp-description{font-size:100%}.mp-layout-sprocket .mp-carousel p.mp-description{font-size:100%}button{font-size:120%}#topnav .pull{background-color:rgba(34, 34, 34, 1)}.mp-layout-sprocket h3{font-size:170%}.mp-layout-sprocket .mp-description{font-size:100%}.mp-slider ul .mp-list-item .mp-text h3{font-size:132%}}.chicklets {
  display: flex;
  justify-content: center;
}
#logo .chicklets, #topnav .mega-menu .chicklets {
  display: none !important;
}
nav li>a, #textnav, .featured .loc_info:before,
.mp-sponsored .mp-text:before,
.mp-sponsored .loc_info:before,
.mp-sponsored .event_info:before,
.mp-sponsored #title:before,
.mp-result.mp-sponsored h4:before,
#related .mp-sponsored h4:before,
.ui-tabs-nav .ui-state-default,
.mp-title h2,
.mp-h2-header h2,
.sidebartitle h3,
.events_list h3,
.tags a,
.mp-tagcloud-list a,
.tagcloud-list a {
  text-transform: uppercase;
  letter-spacing: .05em;
}
button, .mp-button, .flatpickr-current-month, .reset, .submit_event,
.mp-view-more, .mp-goto-search, .view_more,
.pagination .next,
.pagination .prev,
.ord, .submit,
input.form_submit,
.tags a, .mp-tagcloud-list a, .tagcloud-list a, .mp-infos.mp-section,
.mp-feature #title:before,
.mp-loc-url a, .buy_url a, .location-reservation, .reserve {
  border-radius: 2px;
}
.ui-tabs-nav .ui-state-default {
  border-radius:  2px 2px 0 0;
}
.mp-a11y-toggle {
  border-radius:  0 2px 2px 0;
}
@media only screen and (min-width: 48.07em) {
  #topnav, .subnav, .subnav_nested, .mega-menu {
    background-color: rgba(255, 255, 255, 1);
  }
}
@media only screen and (max-width: 48em) {
  #topnav, #topnav .pull {
    background-color: rgba(255, 255, 255, 1);
  }
}
nav#topnav {
  border-bottom-width: 1px;
}
#bottomnav a, #textnav a, #copyright p, #mp_credits, #mp_credits a {
  color: rgba(34, 34, 34, 1);
}
#top {
  background-color: rgba(255, 255, 255, 1);
}
nav#topnav {
  border-bottom-color: rgba(211, 211, 211, 1);
}
nav#topnav {
  border-top-color: rgba(211, 211, 211, 1);
}
body {
  max-width: 100%;
  width: 100%;
}
#top {
  margin: 0;
}
#bottom {
  box-shadow: 0 -2px 1px #efefef;
}
#topnav {
  max-width: 100%;
  box-shadow: 0 2px 3px -1px rgba(51,51,51,.3);
  }
#topnav .mainnav {
  max-width: 1280px;
  width: 100%;
  margin: auto;
  }
@media only screen and (min-width: 80em) {
  .mp-section-wrapper .RSS_link {
    right: calc((100% - 1248px) / 2);
  }
}
@media only screen and (min-width: 48.07em) {
  #topnav a {
    color: rgba(34, 34, 34, 1);
  }
}
@media only screen and (max-width: 48em) {
  #topnav a, #topnav .pull {
    color: rgba(34, 34, 34, 1);
  }
}
#bottom {
  background-color: rgba(255, 255, 255, 1);
}
nav#topnav {
  border-top-width: 0px;
}
.logo > a .standard {
  height: 200px;
  width: auto;
}
#topnav a:hover, #topnav .selected>a, .subnav_nested.open {
  color: rgba(70, 169, 122, 1);
}
.logo .header_links a {
  color: rgba(0, 0, 0, 1);
}
.search.submit {
  background-color: rgba(0, 0, 0, 1);
}
@media only screen and (max-width: 48em){
  #logo #CSE, #logo #mp-search-bar { display: none }
}
@media only screen and (max-width: 34em) {
  .header_links {
    display: none;
  }
}/* ==========================================================================
   D-DIN Web Font — loaded from jsDelivr CDN (GitHub: amcchord/datto-d-din)
   License: SIL Open Font License v1.1
   ========================================================================== */

/* D-DIN Regular */
@font-face {
  font-family: 'D-DIN';
  src: url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* D-DIN Bold */
@font-face {
  font-family: 'D-DIN';
  src: url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN-Bold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* D-DIN Italic */
@font-face {
  font-family: 'D-DIN';
  src: url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN-Italic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   Apply D-DIN as the default font across the site
   ========================================================================== */

body {
  font-family: 'D-DIN', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'D-DIN', sans-serif !important;
}

nav, .nav, .navigation {
  font-family: 'D-DIN', sans-serif !important;
}

/* ============================================================
   Homepage (Mockup A) overrides - scoped to homepage only.
   Hides the standard white masthead + breadcrumbs and the
   duplicate footer nav on the homepage, where the new
   full-bleed hero and dark footer sprockets take over.
   ============================================================ */
body.mp-type-homepage #top,
body.mp-type-homepage #breadcrumbs{display:none !important}
body.mp-type-homepage .mp-html{padding-top:0 !important;padding-bottom:0 !important}
body.mp-type-homepage .mp-layout-sprocket{margin-top:0 !important;margin-bottom:0 !important;padding-top:0 !important;padding-bottom:0 !important}
body.mp-type-homepage #maincontent{padding-bottom:0 !important;margin-bottom:0 !important}
body.mp-type-homepage #bottom{background:#1c1b1f !important;margin-top:0 !important;padding:0 0 18px !important;border:0 !important}
body.mp-type-homepage #bottom #bottomads,
body.mp-type-homepage #bottom #bottomnav,
body.mp-type-homepage #bottom #textnav,
body.mp-type-homepage #bottom .chicklets,
body.mp-type-homepage #bottom #copyright{display:none !important}
body.mp-type-homepage #bottom #mp_credits{margin:0 !important;padding:8px 0 0 !important}
body.mp-type-homepage #bottom #mp_credits,
body.mp-type-homepage #bottom #mp_credits a{color:rgba(255,255,255,.35) !important}

/* Homepage carousel (Now Showing) - match Mockup A styling */
body.mp-type-homepage .mp-carousel{width:100vw;margin-left:calc(50% - 50vw);background:#faf8f4;border-top:1px solid #e6e2d8;border-bottom:1px solid #e6e2d8;padding:64px 0 56px}
body.mp-type-homepage .mp-carousel .mp-title,body.mp-type-homepage .mp-carousel .mp-swiper-container{max-width:1160px;margin-left:auto;margin-right:auto}
body.mp-type-homepage .mp-carousel .mp-title h2{text-align:center;font:600 12px/1 'Inter',sans-serif !important;letter-spacing:.24em;text-transform:uppercase;color:#4a7d61 !important;margin:0 0 30px}
body.mp-type-homepage .mp-carousel .mp-swiper-container{border-radius:16px;overflow:hidden;border:1px solid #e6e2d8}
body.mp-type-homepage .mp-carousel .mp-text h3,body.mp-type-homepage .mp-carousel .mp-text h3 a{font-family:'Fraunces',Georgia,serif !important;font-weight:600 !important;letter-spacing:-.01em}
body.mp-type-homepage .mp-carousel .mp-kicker{font:600 11px/1 'Inter',sans-serif !important;letter-spacing:.2em;text-transform:uppercase;border:0 !important;background:transparent !important;padding:0 !important;color:#fff !important;opacity:.92}
body.mp-type-homepage .mp-carousel .mp-description,body.mp-type-homepage .mp-carousel .mp-description span{font-family:'Inter',sans-serif !important}
body.mp-type-homepage .mp-carousel .mp-credits{display:none !important}

/* Homepage slider (Now Showing) - card styling to match Mockup A.
   NOTE: .mp-slides transform/width override disables slide animation;
   fine for <=2 items visible - revisit when more artists are added. */
body.mp-type-homepage .mp-slider{width:100vw;margin-left:calc(50% - 50vw);background:#faf8f4;border-top:1px solid #e6e2d8;border-bottom:1px solid #e6e2d8;padding:64px 0 56px}
body.mp-type-homepage .mp-slider .mp-title,body.mp-type-homepage .mp-slider .mp-frame{max-width:1160px;margin-left:auto;margin-right:auto}
body.mp-type-homepage .mp-slider .mp-title h2{border-top:0 !important;text-align:center;font:600 12px/1 'Inter',sans-serif !important;letter-spacing:.24em;text-transform:uppercase;color:#4a7d61 !important;margin:0 0 30px;float:none !important;width:100% !important}
body.mp-type-homepage .mp-slider .mp-slides{display:flex;justify-content:center;transform:none !important;width:auto !important}
body.mp-type-homepage .mp-slider .mp-js_slide{width:480px !important;margin:0 12px;float:none !important}
body.mp-type-homepage .mp-slider .mp-item-wrapper{background:#fff;border:1px solid #e6e2d8;border-radius:16px;overflow:hidden;height:100%}
body.mp-type-homepage .mp-slider .mp-thumb{height:280px !important;padding-bottom:0 !important;overflow:hidden}
body.mp-type-homepage .mp-slider .mp-thumb a{display:block;height:100%}
body.mp-type-homepage .mp-slider .mp-thumb img{width:100% !important;height:100% !important;object-fit:cover;position:static !important}
body.mp-type-homepage .mp-slider .mp-text{padding:22px 26px 28px}
body.mp-type-homepage .mp-slider .mp-kicker{font:600 11px/1 'Inter',sans-serif !important;letter-spacing:.2em;text-transform:uppercase;border:0 !important;background:transparent !important;padding:0 !important;color:#b65647 !important;margin:0 0 10px}
body.mp-type-homepage .mp-slider .mp-text h3,body.mp-type-homepage .mp-slider .mp-text h3 a{font-family:'Fraunces',Georgia,serif !important;font-weight:600 !important;font-size:24px !important;letter-spacing:-.01em;color:#16151a !important;text-decoration:none !important}
body.mp-type-homepage .mp-slider .mp-description,body.mp-type-homepage .mp-slider .mp-description span{font-family:'Inter',sans-serif !important;color:#4c4a52 !important;font-size:15.5px !important;line-height:1.6}
body.mp-type-homepage .mp-slider .mp-credits{display:none !important}
@media(max-width:700px){body.mp-type-homepage .mp-slider .mp-js_slide{width:86vw !important}}

/* === MFARD HP v8 START === */
/* Museum For A Rainy Day homepage, Proposal B v8, for Metro Publisher HTML sprockets (root <div class="mfh">).
   Rollback: delete everything from START to END. */
/* D-DIN from jsDelivr (datto-d-din @main; all 8 URLs checked 200 on 22 Oct 2026). The family names match screen.css,
   so the duplicates of 'D-DIN' 400/700/italic are harmless; 'D-DIN Condensed' is new and only used by the big headlines. */
@font-face { font-family: 'D-DIN'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN.woff') format('woff'); }
@font-face { font-family: 'D-DIN'; font-style: normal; font-weight: 700; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN-Bold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN-Bold.woff') format('woff'); }
@font-face { font-family: 'D-DIN'; font-style: italic; font-weight: 400; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN-Italic.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DIN-Italic.woff') format('woff'); }
@font-face { font-family: 'D-DIN Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DINCondensed-Bold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DINCondensed-Bold.woff') format('woff'); }

/* ---------- A. Metro Publisher neutralisers (only where an .mfh sprocket is present) ----------
   The theme boxes main/.mp-grid-12 at 1280px, pads .mp-html 1.2rem, centres text in main and pads
   ".mp-layout-sprocket section". These make every wrapper around an .mfh sprocket full-bleed and paddingless. */
body.mp-type-homepage:has(.mfh) { max-width: none !important; background: #000 !important; }
body.mp-type-homepage #maincontent:has(.mfh),
body.mp-type-homepage .mp-section-wrapper:has(.mfh),
body.mp-type-homepage .mp-layout-container:has(.mfh),
body.mp-type-homepage .mp-container-wrapper:has(.mfh),
body.mp-type-homepage .mp-layout-sprocket:has(.mfh),
body.mp-type-homepage .mp-html:has(.mfh) {
  display: block !important; width: auto !important; max-width: none !important; float: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  text-align: left !important; vertical-align: top !important;
}
/* the homepage title, RSS link and breadcrumbs (theme already hides most of these on the homepage; belt and braces) */
body.mp-type-homepage:has(.mfh) .sectiontitle,
body.mp-type-homepage:has(.mfh) .RSS_link,
body.mp-type-homepage:has(.mfh) #breadcrumbs { display: none !important; }
/* the theme header: hidden while the v8 header sprocket (00-header) is on the page */
body.mp-type-homepage:has(.mfh-s-header) #top { display: none !important; }
/* the theme footer strip under the v8 footer sprocket: black, only the MP credits remain (screen.css hides the rest) */
body.mp-type-homepage:has(.mfh) #bottom { background: #000 !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; max-width: none !important; }
/* Alternative if a wrapper ever re-boxes the sprocket: a 100vw breakout (can add a horizontal scrollbar on desktop browsers with classic scrollbars).
.mfh { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
*/

/* ---------- B. reset the theme's element rules inside .mfh (theme.css + screen.css hit p, h1-h6, a, nav, li, section, article) ---------- */
.mfh { display: flow-root; width: 100%; text-align: left; }   /* flow-root keeps child margins inside the sprocket's black ground */
.mfh :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, span, strong, small, nav, figure, header, footer, section, div) { color: inherit; font-family: inherit; text-transform: none; }
.mfh :is(a, li) { letter-spacing: normal; }   /* screen.css: nav li>a { letter-spacing: .05em } */
.mfh :is(section, header, footer, nav, figure, article) { padding: 0; max-width: none; float: none; }
.mfh :is(ul, ol, li) { list-style: none; }
.mfh img { border: 0; height: auto; }
.mfh a:hover { color: inherit; }

/* ---------- v8 (all of it, scoped under .mfh; classes renamed mfh-*) ---------- */
.mfh {
  --black: #000000; --board: #101412; --rule: #2E3732;
  --green: #0F5A3D; --green-2: #0B4430; --rule-g: #2F6A52;
  --cream: #F3EFE6; --mist: #C9CFC9; --ink: #0A0D0B;
  --mint: #6FD39A;
  --pink: #F2A7B8; --pink-ink: #3A0F1C; --sky: #8EC5F0; --sky-ink: #06223A; --lilac: #C9B6F2; --ochre: #D9A441; --ochre-ink: #1E1405;
  --muted: #6E9A86;   /* inactive arrow glyph */
  --display: 'D-DIN Condensed', 'D-DIN', 'Arial Narrow', sans-serif;   /* big width-fitted headlines */
  --sign: 'D-DIN', 'Arial Narrow', sans-serif;   /* small display / UI text */
  --body: 'D-DIN', system-ui, sans-serif;
  --m: clamp(16px, 4.45vw, 64px);
  /* spacing scale (the only spacing values used): 8 / 16 / 32 / 64 / 128 */
  --s1: 8px; --s2: 16px; --s3: 32px; --s4: 64px; --s5: 128px;
  --gut: var(--s3);   /* the one gutter: grid, device columns, artist columns, routes */
  color-scheme: dark;
}
.mfh, .mfh * { box-sizing: border-box; }
html:has(.mfh) { scroll-behavior: smooth; }
.mfh { margin: 0; background: var(--black); color: var(--cream); font: 400 19px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
.mfh img { display: block; max-width: 100%; }
.mfh a { color: inherit; text-underline-offset: 5px; }
.mfh a:focus-visible, .mfh .mfh-menu-btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.mfh .mfh-wrap { max-width: 1440px; margin: 0 auto; padding-inline: max(var(--m), env(safe-area-inset-left, 0px)) max(var(--m), env(safe-area-inset-right, 0px)); }
.mfh .mfh-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.mfh .mfh-arr { display: inline-block; vertical-align: -0.08em; }

/* v8: no single-word last lines in running text (D-DIN sets narrower than Public Sans, which moved some breaks) */
.mfh .mfh-lede, .mfh .mfh-freeline, .mfh .mfh-art-head p, .mfh .mfh-closing p, .mfh .mfh-routes .mfh-what { text-wrap: pretty; }

/* ---------- header: logo and nav on the black top ---------- */
.mfh .mfh-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s2); position: relative; }
.mfh .mfh-home { display: block; color: var(--cream); height: 80px; }
.mfh .mfh-logo { display: block; height: 100%; width: auto; }
.mfh .mfh-bar .mfh-main { display: flex; gap: var(--s3); align-items: center; font-size: 16px; }
.mfh .mfh-bar .mfh-main a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mfh .mfh-bar .mfh-main a:hover { text-decoration: underline; }
.mfh .mfh-get { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 16px; border-radius: 8px; background: var(--cream); color: var(--ink); font: 700 21px/1 var(--sign); text-decoration: none; white-space: nowrap; }
.mfh .mfh-bar .mfh-main a.mfh-get:hover { text-decoration: none; background: #fff; }
.mfh .mfh-compact { display: none; align-items: center; gap: 8px; }
.mfh .mfh-menu .mfh-menu-btn { list-style: none; cursor: pointer; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #3A433E; color: var(--cream); }
.mfh .mfh-menu-btn::-webkit-details-marker { display: none; }
.mfh .mfh-menu .mfh-bars { width: 18px; height: 12px; border-top: 3px solid currentColor; border-bottom: 3px solid currentColor; position: relative; }
.mfh .mfh-menu .mfh-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 1.5px; height: 3px; background: currentColor; }
.mfh .mfh-menu.is-open .mfh-menu-btn { background: var(--cream); color: var(--ink); }
.mfh .mfh-menu-panel { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; background: var(--black); border-bottom: 1px solid var(--rule); padding: 0 var(--m) 12px; }
.mfh .mfh-menu-panel ul { list-style: none; margin: 0; padding: 0; }
.mfh .mfh-menu-panel li + li { border-top: 1px solid var(--rule); }
.mfh .mfh-menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; text-decoration: none; font: 700 28px/1 var(--sign); }

/* ---------- 1. arrival: the invitation and the place as one moment ---------- */
.mfh .mfh-hero { padding-top: var(--s2); }
/* headline 144px; intro 25px since v8 (24px before, +1px for D-DIN); the intro spans 7 of 12 columns */
.mfh h1 { font: 700 clamp(70px, 8.2vw, 118px)/0.84 var(--display); margin: 0; letter-spacing: -0.01em; }
.mfh h1 .mfh-m { display: none; }
.mfh .mfh-hero-sub { margin-top: var(--s4); align-items: end; }
.mfh .mfh-lede { grid-column: 1 / 8; margin: 0; font-size: clamp(21px, 1.74vw, 25px); line-height: 1.5; }
.mfh .mfh-caption { grid-column: 9 / 13; justify-self: end; margin: 0; display: inline-flex; align-items: center; gap: var(--s1); font: 700 22px/1 var(--sign); color: var(--mist); }
.mfh .mfh-caption .mfh-arr { color: var(--cream); }
/* the gallery view: full bleed, a letterbox placed directly under the words */
.mfh .mfh-place { margin: var(--s4) 0 0; height: clamp(220px, 25vw, 360px); position: relative; overflow: hidden; }
.mfh .mfh-place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 98%; }

/* ---------- 2. devices: three equal columns on the grid (4 + 4 + 4), hairline dividers centred in the gutter ---------- */
.mfh .mfh-devices { padding-top: var(--s4); scroll-margin-top: 12px; }
.mfh .mfh-adm { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin: 0 0 var(--s1); font: 700 clamp(40px, 4vw, 56px)/1 var(--display); }
.mfh .mfh-adm .mfh-free { color: var(--mint); }
.mfh .mfh-freeline { margin: 0 0 var(--s3); color: var(--mist); font-size: 19px; max-width: 46em; }
.mfh .mfh-choices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); border-top: 1px solid var(--rule); }
.mfh .mfh-choice { position: relative; padding: var(--s3) 0 0; display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.mfh .mfh-choice + .mfh-choice::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gut) / -2); width: 1px; background: var(--rule); }
.mfh .mfh-devs { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0; padding: 0; list-style: none; }
.mfh .mfh-devs li { display: inline-flex; align-items: center; gap: var(--s1); font: 700 24px/1 var(--sign); white-space: nowrap; }
.mfh .mfh-devs .mfh-ico { color: var(--mist); }
/* official badges, unmodified; Google's PNG clear space trimmed by its frame exactly as in the reference */
.mfh .mfh-b-apple img { height: 48px; width: auto; }
.mfh .mfh-b-google { position: relative; display: block; width: 162px; height: 48px; }
.mfh .mfh-b-google img { position: absolute; left: -12.1px; top: -12.1px; height: 72px; width: auto; max-width: none; }
.mfh .mfh-b-store { white-space: nowrap; display: inline-flex; flex-direction: column; justify-content: center; height: 48px; padding: 0 16px; border: 1px solid #A6A6A6; border-radius: 9px; background: #000; color: #fff; text-decoration: none; line-height: 1.15; }
.mfh .mfh-b-store small { font-size: 10.5px; color: #c9c9c9; }
.mfh .mfh-b-store strong { font-size: 16px; font-weight: 600; }

/* ---------- 3. the artists: a deep-green field; one row of equal cells, two per artist ---------- */
.mfh .mfh-artists { margin-top: var(--s5); background: var(--green-2); padding: var(--s5) 0; scroll-margin-top: 0; }
.mfh .mfh-art-head { align-items: end; row-gap: var(--s3); container-type: inline-size; }
.mfh .mfh-art-head h2 { grid-column: 1 / -1; margin: 0; font: 700 8.77cqi/0.9 var(--display); white-space: nowrap; }  /* sized so the line spans the full content width (D-DIN Condensed Bold; 8.15cqi with Barlow) */
.mfh .mfh-art-head h2 .mfh-m { display: none; }
.mfh .mfh-art-head p { grid-column: 1 / -1; margin: 0; font-size: 23px; line-height: 1.5; }
/*
  v4 (Mark's reference): each artist is one "pair" of two equal cells:
    cell 1  portrait, the full height of the row
    cell 2  artwork tile on top (2 parts) and the artist's label card below (3 parts), split by the same 16px gap
  All cells are equal: pair = (row - gap) / 2, cell = (pair - gap) / 2, so at 1440 the four cells are 316px wide.
  The row height comes from the portrait (4:5), so tiles, cards and portraits top- and bottom-align for every artist.
  Portrait crops: --pos (desktop) and --pos-m (phone) per artist, set inline; both figures are photographed at the
  same scale (head top at 24% of frame height) and are placed at the same point in the cell.
  Artwork tiles: an <img> inside .tile is object-fit: cover; adjust its crop with --pos on the .tile (default 50% 50%).
  More artists: add a .pair (template commented in the HTML). The row scrolls by one pair with scroll-snap;
  the arrows enable themselves only when there is something to scroll to.
*/
.mfh .mfh-now-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s3) 0 var(--s2); }
.mfh .mfh-now { margin: 0; font: 700 24px/1.1 var(--sign); color: var(--cream); }
.mfh .mfh-steps { display: flex; gap: var(--s1); }
.mfh .mfh-step { width: 48px; height: 48px; display: inline-grid; place-items: center; border: 0; border-radius: 4px; padding: 0; cursor: pointer; background: var(--green); color: var(--cream); }
.mfh .mfh-step.mfh-next { background: var(--mint); color: var(--ink); }
.mfh .mfh-step.is-disabled, .mfh .mfh-step.mfh-next:disabled { cursor: default; background: var(--green); color: var(--muted); }
.mfh .mfh-step:not(.is-disabled):hover { filter: brightness(1.08); }
.mfh .mfh-step:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.mfh .mfh-pairs { display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.mfh .mfh-pairs::-webkit-scrollbar { display: none; }
.mfh .mfh-pairs:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.mfh .mfh-pair { flex: 0 0 calc((100% - var(--s2)) / 2); margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); scroll-snap-align: start; }
.mfh .mfh-portrait { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; position: relative; border-radius: 4px; background: var(--green); }
.mfh .mfh-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.mfh .mfh-side { display: grid; grid-template-rows: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s2); min-height: 0; }
.mfh .mfh-tile { margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: var(--green); }
.mfh .mfh-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.mfh .mfh-tile.mfh-pending { background: transparent; box-shadow: inset 0 0 0 1px var(--sky); display: flex; align-items: center; justify-content: center; padding: var(--s2); }
.mfh .mfh-tbc { margin: 0; color: var(--sky); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: center; line-height: 1.5; max-width: 16em; }
.mfh .mfh-card { border-radius: 4px; padding: var(--s3) 24px 24px; display: flex; flex-direction: column; align-items: flex-start; min-height: 0; }
.mfh .mfh-card .mfh-name { margin: 0 0 var(--s1); font: 700 36px/0.95 var(--sign); }
.mfh .mfh-where { margin: 0; font-size: 19px; line-height: 1.4; }
.mfh .mfh-meet { margin-top: auto; display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; font-size: 17px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; color: inherit; }
.mfh .mfh-meet:hover { text-decoration-thickness: 2px; }
.mfh .mfh-meet:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mfh .mfh-cristina .mfh-card { background: var(--ochre); color: var(--ochre-ink); }
.mfh .mfh-kaori .mfh-card { background: var(--pink); color: var(--pink-ink); }
/* for a third and fourth artist (see the HTML template) */
.mfh .mfh-lilac .mfh-card { background: var(--lilac); color: var(--ink); }
.mfh .mfh-sky .mfh-card { background: var(--sky); color: var(--sky-ink); }

/* ---------- 4. closing: a cream field; the routes sit inside it, split 6 | 6 on the grid ---------- */
.mfh .mfh-closing { background: var(--cream); color: var(--ink); padding: var(--s5) 0 var(--s4); }
.mfh .mfh-closing .mfh-grid { align-items: end; row-gap: var(--s3); }
.mfh .mfh-closing h2 { grid-column: 1 / -1; margin: 0; font: 700 clamp(72px, 10vw, 144px)/0.86 var(--display); color: var(--green); }
.mfh .mfh-closing p { grid-column: 1 / 7; margin: 0; font-size: 21px; color: #1B2420; }
.mfh .mfh-closing .mfh-get { grid-column: 7 / 13; grid-row: 2; justify-self: end; align-self: end; background: var(--green); color: var(--cream); font-size: 30px; min-height: 64px; padding: 0 24px; gap: var(--s2); }
.mfh .mfh-closing .mfh-get:hover { background: var(--green-2); }
.mfh .mfh-closing a:focus-visible { outline-color: var(--green); }
.mfh .mfh-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); margin-top: var(--s5); border-top: 1px solid rgba(15, 90, 61, .4); color: var(--green); }
.mfh .mfh-routes a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0 0; text-decoration: none; }
.mfh .mfh-routes a + a::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gut) / -2); width: 1px; background: rgba(15, 90, 61, .4); }
.mfh .mfh-routes strong { display: block; font: 700 36px/1 var(--sign); }
.mfh .mfh-routes .mfh-what { display: block; color: #1B2420; font-size: 17px; margin-top: var(--s1); }
.mfh .mfh-routes a:hover strong { text-decoration: underline; }
.mfh .mfh-routes .mfh-arr { color: var(--green); flex: none; }

.mfh .mfh-footer { padding: var(--s4) 0; color: var(--mist); font-size: 14px; }
.mfh .mfh-footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-bottom: var(--s2); }
.mfh .mfh-footer nav a { color: var(--cream); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; }
.mfh .mfh-footer nav a:hover { text-decoration: underline; }
.mfh .mfh-footer p { margin: 0 0 var(--s1); max-width: 70em; }

@media (max-width: 1100px) {
  .mfh .mfh-bar .mfh-main { display: none; }
  .mfh .mfh-compact { display: flex; }
  .mfh .mfh-lede { grid-column: 1 / 9; }
  .mfh .mfh-caption { grid-column: 9 / 13; }
  .mfh .mfh-art-head h2, .mfh .mfh-art-head p { grid-column: 1 / -1; }
  .mfh .mfh-art-head p { max-width: 34em; }
}
/* ---------- mobile: the same walk, told vertically ---------- */
@media (max-width: 760px) {
  .mfh { --gut: 16px; --m: 16px; --s5: 64px; --s4: 32px; }   /* on a phone the two largest steps drop one place on the scale */
  .mfh { font-size: 18px; }
  .mfh .mfh-bar { padding-block: var(--s2) var(--s1); gap: var(--s2); }
  .mfh .mfh-home { height: 60px; }
  .mfh .mfh-get { font-size: 17px; padding: 0 10px 0 12px; gap: 4px; }   /* v8: 19px/6px gap with Barlow; D-DIN Bold is wider, so tightened to keep the 16px right margin at 390 */
  .mfh .mfh-hero { padding-top: var(--s2); }
  .mfh h1 { font-size: 72px; line-height: 0.86; }   /* 72px headline; intro 19px since v8 (18px before) */
  .mfh h1 .mfh-d { display: none; }
  .mfh h1 .mfh-m { display: inline; }
  .mfh .mfh-art-head h2 { white-space: normal; }
  .mfh .mfh-art-head h2 .mfh-d { display: none; }
  .mfh .mfh-art-head h2 .mfh-m { display: inline; }
  .mfh .mfh-hero-sub { margin-top: var(--s3); }
  .mfh .mfh-lede { grid-column: 1 / -1; font-size: 19px; line-height: 1.5; }
  .mfh .mfh-caption { display: none; }
  .mfh .mfh-place { margin-top: var(--s4); height: auto; aspect-ratio: 3 / 2; }
  /* phone crop: both of Cristina's right-hand paintings whole, a sliver of the dark ceiling kept as a seam into the black page */
  .mfh .mfh-place img { inset: auto; left: -77%; top: -30%; width: 194%; height: auto; max-width: none; }
  .mfh .mfh-adm { font-size: 40px; display: block; }
  .mfh .mfh-adm span { display: block; }
  .mfh .mfh-freeline { font-size: 17px; margin: var(--s2) 0 var(--s3); }
  .mfh .mfh-choices { grid-template-columns: minmax(0, 1fr); }
  /* rows: devices left, badge in a fixed 162px slot so all three badges share one left edge */
  .mfh .mfh-choice { display: grid; grid-template-columns: minmax(0, 1fr) 162px; align-items: center; gap: var(--s2); padding: var(--s3) 0; }
  .mfh .mfh-choice > a { justify-self: start; }
  .mfh .mfh-choice + .mfh-choice::before { content: none; }
  .mfh .mfh-choice + .mfh-choice { border-top: 1px solid var(--rule); }
  .mfh .mfh-devs { flex-direction: column; gap: var(--s1); }
  .mfh .mfh-devs li { font-size: 21px; }
  .mfh .mfh-art-head h2 { font-size: 64px; }
  .mfh .mfh-art-head p { font-size: 18px; }
  /* phone: one artist pair per slide, swiped or stepped with the arrows; the cells keep their two-up reading */
  .mfh .mfh-now-row { margin: var(--s3) 0 var(--s1); }
  .mfh .mfh-now { font-size: 22px; text-wrap: balance; }   /* two even lines beside the arrows, not one word left over */
  .mfh .mfh-pair { flex-basis: 100%; }
  .mfh .mfh-portrait { aspect-ratio: auto; height: 360px; }
  .mfh .mfh-portrait img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .mfh .mfh-side { height: 360px; grid-template-rows: 120px minmax(0, 1fr); }
  .mfh .mfh-tbc { font-size: 13px; letter-spacing: .1em; }
  .mfh .mfh-card { padding: var(--s2); }
  .mfh .mfh-card .mfh-name { font-size: 28px; }
  .mfh .mfh-where { font-size: 17px; }
  .mfh .mfh-meet { font-size: 16px; }
  .mfh .mfh-closing h2 { font-size: 84px; }
  .mfh .mfh-closing p { grid-column: 1 / -1; font-size: 18px; }
  .mfh .mfh-closing .mfh-get { grid-column: 1 / -1; grid-row: auto; justify-self: start; font-size: 26px; min-height: 64px; }
  .mfh .mfh-routes { grid-template-columns: minmax(0, 1fr); }
  .mfh .mfh-routes a { padding: var(--s3) 0; }
  .mfh .mfh-routes a + a::before { content: none; }
  .mfh .mfh-routes a + a { border-top: 1px solid rgba(15, 90, 61, .4); }
  .mfh .mfh-routes strong { font-size: 30px; }
  .mfh .mfh-footer nav { gap: 0 var(--s3); }
}
@media (max-width: 370px) { .mfh h1 { font-size: 64px; } .mfh .mfh-compact .mfh-get { font-size: 16px; } }

/* ---------- C. Metro Publisher additions to v8 (CKEditor-safe markup: no inline SVG, no <button>, no <details>, no inline styles) ---------- */
/* screen.css forces font-family: 'D-DIN' !important on h1-h6 and nav; v8's display faces are restored here */
.mfh h1, .mfh h2, .mfh .mfh-adm, .mfh .mfh-art-head h2, .mfh .mfh-closing h2 { font-family: var(--display) !important; }
.mfh h3, .mfh h4, .mfh nav { font-family: var(--sign) !important; }
.mfh .mfh-bar .mfh-main, .mfh .mfh-footer nav { font-family: var(--body) !important; }

/* the black ground travels with each sprocket */
.mfh { background: var(--black); }
.mfh.mfh-s-closing { background: var(--cream); }

/* MP-build only (not in v8): legal row restored from the live footer. Quiet: same 14px/mist as the footer small print,
   same gap scale and 44px rows as the footer nav above, so its items line up on the same left edge. Mist on black = 13.5:1 */
.mfh .mfh-footer .mfh-legal { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: var(--s2) 0 0; font-size: 14px; color: var(--mist); }
.mfh .mfh-footer .mfh-legal > * { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; color: var(--mist); }
.mfh .mfh-footer .mfh-legal a { text-decoration: none; }
.mfh .mfh-footer .mfh-legal a:hover, .mfh .mfh-footer .mfh-legal a:focus-visible { color: var(--cream); text-decoration: underline; }

/* arrows: the text glyph (arrow characters) stays in the markup so CKEditor never sees an empty element; v8's SVG is drawn as a mask */
.mfh .mfh-arr { --a: 20px; display: inline-block; flex: none; width: var(--a); height: var(--a); font-size: 0; line-height: 0; overflow: hidden; color: inherit;
  background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M4 14h17M13 6l8 8-8 8' fill='none' stroke='%23000' stroke-width='4.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M4 14h17M13 6l8 8-8 8' fill='none' stroke='%23000' stroke-width='4.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; }
.mfh .mfh-arr-d { transform: rotate(90deg); }
.mfh .mfh-arr-l { transform: rotate(180deg); }
.mfh .mfh-arr-u { transform: rotate(270deg); }
.mfh .mfh-get .mfh-arr { --a: 20px; }
.mfh .mfh-compact .mfh-get .mfh-arr { --a: 18px; }
.mfh .mfh-menu-panel .mfh-arr { --a: 22px; }
.mfh .mfh-caption .mfh-arr { --a: 20px; }
.mfh .mfh-step .mfh-arr { --a: 22px; }
.mfh .mfh-meet .mfh-arr { --a: 18px; }
.mfh .mfh-closing .mfh-get .mfh-arr { --a: 26px; }
.mfh .mfh-routes .mfh-arr { --a: 30px; }

/* device icons, same technique (v8 SVGs, 28px, mist) */
.mfh .mfh-ico { display: inline-block; flex: none; width: 28px; height: 28px; font-size: 0; line-height: 0; overflow: hidden; background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.mfh .mfh-ico-phone { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='13' y='4' width='14' height='32' rx='3.5'/%3E%3Cpath d='M18 31.5h4'/%3E%3C/svg%3E"); }
.mfh .mfh-ico-ipad { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='7' y='5' width='26' height='30' rx='3'/%3E%3Cpath d='M18 31h4'/%3E%3C/svg%3E"); }
.mfh .mfh-ico-tablet { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='9' width='34' height='23' rx='3'/%3E%3Cpath d='M32 18.5v4'/%3E%3C/svg%3E"); }
.mfh .mfh-ico-headset { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 14h30a2 2 0 0 1 2 2v8a4 4 0 0 1-4 4h-6l-3-4h-8l-3 4H7a4 4 0 0 1-4-4v-8a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }

/* logo: an <img> of the cream logo instead of the inline SVG */
.mfh .mfh-home .mfh-logo { height: 100%; width: auto; max-width: none; }

/* mobile menu without <details>: the panel opens on .is-open (mfh.js) or on :target (no-JS fallback) */
.mfh .mfh-menu { position: static; }
.mfh .mfh-menu-btn { text-decoration: none; }
.mfh .mfh-menu .mfh-bars { display: block; font-size: 0; line-height: 0; overflow: hidden; color: inherit; }
.mfh .mfh-menu-panel { display: none; }
.mfh .mfh-menu.is-open .mfh-menu-panel, .mfh .mfh-menu:target .mfh-menu-panel { display: block; }
.mfh .mfh-menu:target .mfh-menu-btn { background: var(--cream); color: var(--ink); }

/* artist arrows as links: v8's disabled look is the default until mfh.js finds something to scroll to */
.mfh .mfh-step { text-decoration: none; }
.mfh .mfh-step.is-disabled { pointer-events: none; }
.mfh .mfh-steps .mfh-step.mfh-next.is-disabled { background: var(--green); color: var(--muted); }

/* the Cristina tile swap (v8 used <picture>) */
.mfh .mfh-tile img.mfh-only-m { display: none; }

/* crops (v8 set these inline as --pos / --pos-m) */
.mfh .mfh-cristina .mfh-portrait { --pos: 100% 50%; --pos-m: 92% 50%; }
.mfh .mfh-kaori .mfh-portrait { --pos: 93.1% 50%; --pos-m: 86.8% 50%; }
.mfh .mfh-cristina .mfh-tile { --pos: 50% 50%; }
.mfh .mfh-kaori .mfh-tile { --pos: 50% 45%; }
.mfh .mfh-portrait img, .mfh .mfh-tile img { max-width: none; height: 100%; }

@media (max-width: 760px) {
  .mfh .mfh-tile img.mfh-only-d { display: none; }
  .mfh .mfh-tile img.mfh-only-m { display: block; }
  .mfh .mfh-place img { height: auto; }
}
/* === MFARD HP v8 END === */

/* === MFARD FA v1 START === */
/* For Artists page (v42 layout) on the homepage v8 system. Needs the MFARD HP v8 block (mfh.css) already in screen.css:
   it reuses its tokens, reset, header, footer, .mfh-wrap/.mfh-grid, h1, .mfh-lede, .mfh-get, .mfh-meet and .mfh-arr.
   Everything here is scoped under .mfa (the For Artists sprockets) or body.mp-type-section:has(#section_for-artists .mfa). */

/* ---------- A. Metro Publisher neutralisers on the For Artists section page (the v8 ones are gated on the homepage) ---------- */
body.mp-type-section:has(#section_for-artists .mfa) { max-width: none !important; background: #000 !important; }
body.mp-type-section:has(#section_for-artists .mfa) #maincontent:has(.mfh),
body.mp-type-section:has(#section_for-artists .mfa) .mp-section-wrapper:has(.mfh),
body.mp-type-section:has(#section_for-artists .mfa) .mp-layout-container:has(.mfh),
body.mp-type-section:has(#section_for-artists .mfa) .mp-container-wrapper:has(.mfh),
body.mp-type-section:has(#section_for-artists .mfa) .mp-layout-sprocket:has(.mfh),
body.mp-type-section:has(#section_for-artists .mfa) .mp-html:has(.mfh) {
  display: block !important; width: auto !important; max-width: none !important; float: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  text-align: left !important; vertical-align: top !important;
}
/* section title, RSS link and breadcrumbs ("Home > For Artists") */
body.mp-type-section:has(#section_for-artists .mfa) .sectiontitle,
body.mp-type-section:has(#section_for-artists .mfa) .RSS_link,
body.mp-type-section:has(#section_for-artists .mfa) #breadcrumbs { display: none !important; }
/* the theme header, while the v8 header sprocket is on the page */
body.mp-type-section:has(#section_for-artists .mfa):has(.mfh-s-header) #top { display: none !important; }
/* the theme footer strip: black, only the MP credits remain (same as the homepage rules in screen.css) */
body.mp-type-section:has(#section_for-artists .mfa) #bottom { background: #000 !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; max-width: none !important; padding: 0 0 18px !important; }
body.mp-type-section:has(#section_for-artists .mfa) #bottom :is(#bottomads, #bottomnav, #textnav, .chicklets, #copyright) { display: none !important; }
body.mp-type-section:has(#section_for-artists .mfa) #mp_credits { margin: 0 !important; padding: 8px 0 0 !important; }

/* ---------- B. reset for the elements v8 never used (theme rules hit them) ---------- */
.mfa :is(b, em, small, strong, details, summary, ol, ul, li, h1, h2, p) { font-family: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
.mfa :is(h1, h2, p, ul, ol) { margin: 0; padding: 0; }
.mfa b, .mfa strong { font-weight: 700; }
.mfa img { max-width: 100%; }

/* ---------- shared roles ---------- */
.mfa {
  --on-lilac: #21134A; --on-mint: #062A1C; --on-sky: #06223A; --on-pink: var(--pink-ink);
  --gap: var(--s2);                               /* the one cell gap */
  --hdr: 112px;                                   /* v8 header: 80px logo + 2 x 16px */
}
/* kicker / eyebrow: small caps label, D-DIN Bold */
.mfa .mfa-kicker { font: 700 14px/1 var(--sign); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); margin: 0 0 var(--s2); }
.mfa .mfa-band .mfa-kicker { color: inherit; }
.mfa .mfa-lilac-t { color: var(--lilac) !important; }
/* section headlines: D-DIN Condensed Bold, one size for every section h2 */
.mfa h2 { font: 700 64px/0.92 var(--display); letter-spacing: -0.005em; margin: 0 0 var(--s3); text-wrap: balance; }
/* captions: D-DIN Bold */
.mfa .mfa-caption { font: 700 17px/1.4 var(--sign); margin: var(--s2) 0 0; }
/* CTA: the v8 .mfh-get at its closing size */
.mfa .mfa-cta { font-size: 30px; min-height: 64px; padding: 0 24px; gap: var(--s2); }
.mfa .mfa-cta .mfh-arr { --a: 26px; }
.mfa .mfa-cta:hover { background: #fff; text-decoration: none; }
.mfa .mfa-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.mfa .mfa-free { margin: 0; font-weight: 700; }
.mfa .mfh-meet .mfh-arr { --a: 18px; }
.mfa p { text-wrap: pretty; }
/* the current page in the v8 nav */
body.mp-type-section:has(#section_for-artists .mfa) .mfh .mfh-bar .mfh-main a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
body.mp-type-section:has(#section_for-artists .mfa) .mfh .mfh-menu-panel a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------- 01 arrival ---------- */
.mfa .mfa-arrival { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: max(640px, calc(100vh - var(--hdr))); overflow: hidden; background: var(--black); }
.mfa .mfa-arrival-bg { position: absolute; inset: 0; z-index: -2; width: 100%; max-width: none; height: 100% !important; object-fit: cover; object-position: 100% 42%; }
.mfa .mfa-arrival::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.9) 0, rgba(0,0,0,.7) 34%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.05)), linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0) 46%); }
.mfa .mfa-arrival-in { width: 100%; padding-block: var(--s4); }
.mfa .mfa-arrival h1 { max-width: 6.4em; font-size: clamp(70px, 8.2vw, 118px); line-height: .86; }   /* v42 size: at the v8 144px the CTA falls below a 1440x900 first view */
.mfa .mfa-lines { margin-top: var(--s3); }
.mfa .mfa-offer { max-width: 34em; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); color: var(--mist); }
.mfa .mfa-offer b { color: var(--cream); }
.mfa .mfa-credit { position: absolute; right: var(--m); bottom: var(--s4); margin: 0; font: 700 17px/1.4 var(--sign); color: var(--mist); }
@media (min-width: 1441px) { .mfa .mfa-credit { right: calc((100% - 1440px) / 2 + var(--m)); } }

/* ---------- 02 an artist in the Museum ---------- */
.mfa .mfa-photo { width: 100%; max-width: none; height: clamp(520px, 44vw, 680px) !important; object-fit: cover; object-position: 40% 55%; }
.mfa .mfa-c-cap { padding-block: var(--s4); align-items: start; }
.mfa .mfa-c-who { grid-column: 1 / 6; }
.mfa .mfa-c-count { grid-column: 6 / 13; }
.mfa .mfa-artist-name { margin: 0 0 var(--s2); }
.mfa .mfa-c-who p:not(.mfa-kicker) { max-width: 28em; margin: 0 0 var(--s1); }
.mfa .mfa-marks-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin: 0; }
.mfa .mfa-marks-line b { font: 700 120px/.8 var(--display); color: var(--pink); }
.mfa .mfa-marks-line strong { font: 700 36px/1 var(--sign); }
.mfa .mfa-marks-cap { margin: var(--s2) 0 0; color: var(--mist); }
.mfa .mfa-gallery { position: relative; }
.mfa .mfa-g-img { width: 100%; max-width: none; height: clamp(560px, 46vw, 700px) !important; object-fit: cover; object-position: 50% 58%; }
.mfa .mfa-g-over { position: absolute; left: 0; right: 0; top: var(--s3); pointer-events: none; }
.mfa .mfa-plan { grid-column: 1 / 6; pointer-events: auto; }
.mfa .mfa-marks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s1); list-style: none; }
.mfa .mfa-marks li { aspect-ratio: 3 / 2; border: 1.25px solid rgba(242,167,184,.85); background: var(--board); font-size: 0; line-height: 0; color: transparent; overflow: hidden; }
.mfa .mfa-marks li:nth-child(5) { background: var(--sky); border-color: var(--sky); }
.mfa .mfa-marks li:nth-child(6) { background: var(--mint); border-color: var(--mint); }
.mfa .mfa-marks li:nth-child(7) { background: var(--lilac); border-color: var(--lilac); }
.mfa .mfa-plan-key { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s2); font-size: 16px; line-height: 1.4; }
.mfa .mfa-plan-key li { display: flex; align-items: center; gap: var(--s1); }
.mfa .mfa-plan-key li::before { content: ""; width: 16px; height: 10px; flex: none; }
.mfa .mfa-plan-key .mfa-k1::before { background: var(--sky); }
.mfa .mfa-plan-key .mfa-k2::before { background: var(--mint); }
.mfa .mfa-plan-key .mfa-k3::before { background: var(--lilac); }
.mfa .mfa-plan-cap { margin-top: var(--s2); font: 700 24px/1.2 var(--sign); color: var(--cream); }
/* the photo caption sits at the top of the plan block, over the dark ceiling (homepage caption role: D-DIN Bold 22px mist); the photo ends the section */
.mfa .mfa-g-cap { margin: 0 0 var(--s2); font: 700 22px/1.2 var(--sign); color: var(--mist); }
.mfa .mfa-g-img { vertical-align: top; }

/* ---------- 03-06 colour bands (440px on desktop) ---------- */
.mfa .mfa-band { color: var(--on); background: var(--paint); }
.mfa .mfa-lilac { --paint: var(--lilac); --on: var(--on-lilac); }
.mfa .mfa-mint { --paint: var(--mint); --on: var(--on-mint); }
.mfa .mfa-sky { --paint: var(--sky); --on: var(--on-sky); }
.mfa .mfa-pink { --paint: var(--pink); --on: var(--on-pink); }
.mfa .mfa-band-in { min-height: 440px; padding-block: var(--s3); align-items: center; row-gap: var(--s3); }
.mfa .mfa-band .mfa-txt { grid-column: 1 / 6; }
.mfa .mfa-band .mfa-pic, .mfa .mfa-band .mfa-say { grid-column: 6 / 13; }
.mfa .mfa-flip .mfa-pic { grid-column: 1 / 6; grid-row: 1; }
.mfa .mfa-flip .mfa-txt { grid-column: 6 / 13; grid-row: 1; }
.mfa .mfa-band .mfa-txt > p { max-width: 30em; }
.mfa .mfa-passage h2 { margin-bottom: 0; }
.mfa .mfa-say { font-size: 22px; line-height: 1.5; max-width: 32em; }
.mfa .mfa-band img { width: 100%; border-radius: 4px; }
.mfa .mfa-pic-wide { aspect-ratio: 2.4 / 1; height: auto; object-fit: cover; object-position: 50% 42%; }
/* bullets */
.mfa .mfa-fx { display: grid; gap: var(--s2); list-style: none; }
.mfa .mfa-fx li { position: relative; padding-left: 24px; line-height: 1.4; list-style: none; }
.mfa .mfa-fx li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
@media (min-width: 1101px) { .mfa .mfa-lilac .mfa-fx li, .mfa .mfa-pink .mfa-fx li:first-child { white-space: nowrap; } }
/* disclosures (native details/summary, no script) */
.mfa .mfa-disc { margin-top: var(--s2); border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.mfa .mfa-disc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); min-height: 48px; font: 700 17px/1.2 var(--sign); }
.mfa summary::-webkit-details-marker { display: none; }
.mfa .mfa-disc summary::after { content: "+"; font: 400 24px/1 var(--body); }
.mfa .mfa-disc[open] summary::after { content: "\2013"; }
.mfa .mfa-disc-in { max-width: 36em; padding-bottom: var(--s1); font-size: 17px; line-height: 1.6; }
.mfa .mfa-disc-in p + p { margin-top: var(--s1); }
.mfa summary:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
/* Cristina's paintings: three equal-gap images on one bottom line */
.mfa .mfa-works { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: var(--gap); align-items: end; }
/* four portraits (the v42 composite, split into its four photographs) and the directory */
.mfa .mfa-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.mfa .mfa-four img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: 50% 30%; }
.mfa .mfa-who-list { margin-top: var(--s2); list-style: none; }
.mfa .mfa-who-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: var(--s1) 0; border-bottom: 1px solid color-mix(in srgb, var(--on-pink) 35%, transparent); list-style: none; }
.mfa .mfa-who-list b { font: 700 22px/1 var(--sign); }
.mfa .mfa-who-list small { font: 700 14px/1 var(--sign); letter-spacing: .12em; text-transform: uppercase; }
.mfa .mfa-pink .mfa-fx { gap: var(--s1); }

/* ---------- 07 information desk ---------- */
.mfa .mfa-desk { padding-block: var(--s5); }
.mfa .mfa-counter { border-top: 1px solid var(--rule); padding-top: var(--s4); align-items: start; row-gap: var(--s4); }
.mfa .mfa-desk-txt { grid-column: 1 / 6; min-width: 0; }
.mfa .mfa-drawers { grid-column: 7 / 13; min-width: 0; border-top: 1px solid var(--rule); }
.mfa .mfa-desk-txt p { max-width: 34em; margin: 0 0 var(--s2); }
.mfa .mfa-desk-txt .mfa-kicker { margin-bottom: var(--s2); }
.mfa .mfa-second { color: var(--mist) !important; font-size: 17px; }
.mfa .mfa-licence { margin: 0 0 var(--s1); }
.mfa .mfa-noacc { margin: 0 !important; }
.mfa .mfa-drawer { border-bottom: 1px solid var(--rule); }
.mfa .mfa-drawer summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr 24px; gap: var(--s2); align-items: center; min-height: 64px; }
.mfa .mfa-drawer summary b { font: 700 24px/1 var(--sign); }
.mfa .mfa-drawer summary small { font-size: 16px; line-height: 1.3; color: var(--mist); }
.mfa .mfa-drawer summary::after { content: "+"; font: 400 26px/1 var(--body); color: var(--mist); text-align: center; }
.mfa .mfa-drawer[open] summary::after { content: "\2013"; }
.mfa .mfa-in { padding: 0 0 var(--s3); font-size: 17px; line-height: 1.6; }
.mfa .mfa-in ol { list-style: decimal; padding-left: 1.2em; }
.mfa .mfa-in ul { list-style: disc; padding-left: 1.2em; }
.mfa .mfa-in li { list-style: inherit; margin-bottom: var(--s1); }
.mfa .mfa-in a { text-decoration: underline; text-underline-offset: 4px; }
.mfa .mfa-ph { color: var(--mist); font-style: italic; }

/* ---------- 08 closing wall ---------- */
.mfa .mfa-close { background: var(--green); padding-block: var(--s5); }
.mfa .mfa-close h2 { font-size: clamp(72px, 10vw, 144px); line-height: .86; max-width: 9em; margin: 0; }
.mfa .mfa-close .mfa-actions { margin-top: var(--s4); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .mfa .mfa-band-in { min-height: 0; padding-block: var(--s5); }
  .mfa .mfa-band .mfa-txt, .mfa .mfa-band .mfa-pic, .mfa .mfa-band .mfa-say,
  .mfa .mfa-flip .mfa-txt, .mfa .mfa-flip .mfa-pic { grid-column: 1 / -1; grid-row: auto; }
  .mfa .mfa-c-who, .mfa .mfa-c-count, .mfa .mfa-desk-txt, .mfa .mfa-drawers { grid-column: 1 / -1; }
  .mfa .mfa-c-cap { row-gap: var(--s4); }
  .mfa .mfa-g-over { position: static; padding-block: var(--s3) var(--s4); }
  .mfa .mfa-plan { grid-column: 1 / -1; }
}
/* ---------- phone (v8 tokens already step down: gutter 16, margins 16, s4 32, s5 64) ---------- */
@media (max-width: 760px) {
  .mfa { --hdr: 92px; }
  .mfa .mfa-arrival { min-height: 0; flex-direction: column; align-items: stretch; }
  .mfa .mfa-arrival-in { padding-block: var(--s5) var(--s3); }
  .mfa .mfa-arrival h1 { max-width: none; font-size: 72px; }
  .mfa .mfa-offer { font-size: 17px; }
  .mfa .mfa-credit { position: relative; right: auto; bottom: auto; margin: 0 var(--m) var(--s3); font-size: 16px; }
  .mfa h2 { font-size: 48px; margin-bottom: var(--s2); }
  .mfa .mfa-marks-line b { font-size: 72px; }
  .mfa .mfa-marks-line strong { font-size: 24px; }
  .mfa .mfa-photo { height: 300px !important; }
  .mfa .mfa-g-img { height: 280px !important; }
  .mfa .mfa-marks { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .mfa .mfa-plan-cap { font-size: 22px; }
  .mfa .mfa-say { font-size: 19px; }
  .mfa .mfa-fx li { font-size: 18px; }
  .mfa .mfa-four { gap: var(--s1); }
  .mfa .mfa-works { gap: var(--s1); }
  .mfa .mfa-drawer summary { grid-template-columns: minmax(0, 1fr) 24px; gap: 4px var(--s2); padding-block: var(--s2); }
  .mfa .mfa-drawer summary b { font-size: 22px; }
  .mfa .mfa-drawer summary small { grid-column: 1; grid-row: 2; }
  .mfa .mfa-drawer summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .mfa .mfa-close h2 { font-size: 64px; }
  .mfa .mfa-cta { font-size: 21px; min-height: 56px; padding: 0 16px; gap: var(--s1); }
  .mfa .mfa-cta .mfh-arr { --a: 20px; }
}
/* === MFARD FA v1 END === */
/* === MFARD MOBILE FIX 2026-10-31 START === */
/* 1. Homepage "Find an artist you'll want to know." — never allowed to run off the edge.
   Desktop look unchanged where cqi sizing works (it still fits on one line); wraps instead of clipping
   on browsers/font metrics where it doesn't, and gets a vw size where cqi is unsupported (older Safari/tablets). */
.mfh .mfh-art-head h2 { white-space: normal; overflow-wrap: break-word; max-width: 100%; }
@supports not (font-size: 1cqi) {
  .mfh .mfh-art-head h2 { font-size: clamp(44px, 7.4vw, 112px); }
}
/* 2+3. For Artists arrival hero: on tablets / short or tall non-desktop screens the photo no longer
   fills the whole first screen; the headline starts near the top. Desktop (>1100px) unchanged. */
@media (max-width: 1100px) {
  .mfa .mfa-arrival { min-height: min(max(480px, calc(100vh - var(--hdr))), 60vh); align-items: flex-end; }
  .mfa .mfa-arrival-in { padding-block: var(--s3) var(--s3); }
  .mfa .mfa-arrival { flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .mfa .mfa-credit { position: relative; right: auto; bottom: auto; margin: 0 var(--m) var(--s3); }   /* shorter hero: credit sits below the CTA instead of over it */
}
@media (max-width: 760px) {
  .mfa .mfa-arrival { min-height: 0; }
  .mfa .mfa-arrival-in { padding-block: 24px var(--s3); }
  .mfa .mfa-arrival h1 { font-size: 60px; }
}
/* 4. 360px phones: header "Get the app" ran 10px past the edge (page scrolled sideways). */
@media (max-width: 380px) {
  .mfh .mfh-home { height: 52px; }
  .mfh .mfh-get { font-size: 15px; padding: 0 8px 0 10px; }
}
/* === MFARD MOBILE FIX 2026-10-31 END === */
/* === MFARD TALL VIEWPORT FIX 2026-10-31 START === */
@media (min-height: 1400px) {
  .mfa .mfa-arrival { min-height: max(640px, min(calc(100vh - var(--hdr)), 1000px)); }
}
/* === MFARD TALL VIEWPORT FIX 2026-10-31 END === */
/* === MFARD ARTIST PROFILE v1 START === */
/* v1.1. Scope: only articles filed in the Artists section (body:has(#pagetype_article .section a[href$="/artists"])). Nav, header, breadcrumbs, footer untouched. */
body:has(#pagetype_article .section a[href$="/artists"]) { --ap-green:#0F5A3D; --ap-cream:#F3EFE6; --ap-lilac:#C9B6F2; --ap-mint:#6FD39A; --ap-sky:#8EC5F0; --ap-pink:#F2A7B8; --ap-gold:#D9A441; --ap-ink:#14261D; --ap-accent:var(--ap-gold); --ap-band:440px;
  --ap-sign:'D-DIN Condensed','Arial Narrow',sans-serif; --ap-label:'D-DIN',Arial,sans-serif; }
body:has(#pagetype_article .section a[href$="/artists"]).mfap-accent-lilac{--ap-accent:var(--ap-lilac)} body:has(#pagetype_article .section a[href$="/artists"]).mfap-accent-mint{--ap-accent:var(--ap-mint)} body:has(#pagetype_article .section a[href$="/artists"]).mfap-accent-sky{--ap-accent:var(--ap-sky)}
body:has(#pagetype_article .section a[href$="/artists"]).mfap-accent-pink{--ap-accent:var(--ap-pink)} body:has(#pagetype_article .section a[href$="/artists"]).mfap-accent-gold{--ap-accent:var(--ap-gold)}

/* Hide timestamps, tools, right rail, empty related, and any raw embed source that got escaped */
body:has(#pagetype_article .section a[href$="/artists"]) #pageinfos, body:has(#pagetype_article .section a[href$="/artists"]) #bottompageinfos, body:has(#pagetype_article .section a[href$="/artists"]) article#main > aside.tools, body:has(#pagetype_article .section a[href$="/artists"]) #backlink_container, body:has(#pagetype_article .section a[href$="/artists"]) #related:empty, body:has(#pagetype_article .section a[href$="/artists"]) aside#side, body:has(#pagetype_article .section a[href$="/artists"]) .mfap-hide { display:none !important; }
body:has(#pagetype_article .section a[href$="/artists"]) { overflow-x:clip; }
body:has(#pagetype_article .section a[href$="/artists"]) #pagetype_article { display:block; max-width:none; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); box-sizing:border-box; background:var(--ap-cream); color:var(--ap-ink); }
body:has(#pagetype_article .section a[href$="/artists"]) article#main { float:none; width:auto; max-width:none; margin:0; padding:0; text-align:left; }

/* 1. Artwork on cream wall + wall label */
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-art { margin:0; width:100%; box-sizing:border-box; padding:64px 24px 48px; background:var(--ap-cream); display:flex; flex-direction:column; align-items:center; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-art img { display:block; max-height:640px; max-width:min(100%,1100px); width:auto; height:auto; box-shadow:0 18px 40px rgba(20,38,29,.18); }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-art figcaption { margin-top:24px; background:#fff; padding:10px 16px; font:700 14px/1.35 var(--ap-label); letter-spacing:.02em; color:var(--ap-ink); box-shadow:0 1px 3px rgba(20,38,29,.15); }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-art figcaption:empty { display:none; }

/* 2. Gallery line, name, description */
body:has(#pagetype_article .section a[href$="/artists"]) article#main > header, body:has(#pagetype_article .section a[href$="/artists"]) #content > div { max-width:760px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; box-sizing:content-box; }
body:has(#pagetype_article .section a[href$="/artists"]) article#main > header { padding-top:8px; }
body:has(#pagetype_article .section a[href$="/artists"]) #title { margin:0; padding:0; }
body:has(#pagetype_article .section a[href$="/artists"]) #title:before { content:none !important; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-meta { margin:0 0 8px; font:700 15px/1.3 var(--ap-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ap-green); }
body:has(#pagetype_article .section a[href$="/artists"]) #title h1 { margin:0 0 12px; font:700 clamp(56px,8vw,104px)/.92 var(--ap-sign) !important; color:var(--ap-green); letter-spacing:0; text-transform:none; overflow-wrap:anywhere; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-desc { margin:0 0 32px; font:400 22px/1.4 var(--ap-label); color:var(--ap-ink); }

/* 3. Bio with floated portrait (right) */
body:has(#pagetype_article .section a[href$="/artists"]) #content { margin:0; padding:0 0 64px; width:auto; float:none; }
body:has(#pagetype_article .section a[href$="/artists"]) #content > div { display:flow-root; font:400 19px/1.6 var(--ap-label); color:var(--ap-ink); }
body:has(#pagetype_article .section a[href$="/artists"]) #content p { margin:0 0 1em; font:inherit; color:inherit; }
body:has(#pagetype_article .section a[href$="/artists"]) #content p.lead { font-size:21px; }
body:has(#pagetype_article .section a[href$="/artists"]) img.mfap-photo { float:right; width:33%; max-width:240px; height:auto; margin:6px 0 16px 28px; border-radius:4px; }
/* embed wrappers (whatever MP puts round the CODE) collapse to nothing once JS has moved the pieces out */
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-embed-src { margin:0 !important; padding:0 !important; border:0 !important; }

/* 4. Bands: equal 440px */
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard, body:has(#pagetype_article .section a[href$="/artists"]) .mfap-visit { box-sizing:border-box; width:100%; height:var(--ap-band); overflow:hidden; margin:0 !important; max-width:none !important; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-html:has(.mfap-visit) { padding:0 !important; margin:0 !important; max-width:none !important; text-align:left; }

/* Meet other artists (Posterboard 173 real markup: section.mp-posterboard > .mp-title h2 + ul > li.mp-list-item > .mp-item-wrapper > .mp-thumb + .mp-text) */
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard { background:var(--ap-green); color:var(--ap-cream); padding:40px 0 40px max(24px,calc(50vw - 600px)); display:flex; flex-direction:column; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard.mfap-empty { display:none !important; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-title { display:block !important; margin:0 0 20px; padding:0; border:0; background:none; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-title h2 { margin:0; padding:0; font:700 44px/1 var(--ap-sign) !important; color:var(--ap-cream); text-transform:none; letter-spacing:0; border:0; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard > ul { height:auto !important; position:static !important; display:flex !important; flex-wrap:nowrap; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 24px 8px 0; margin:0; list-style:none; flex:1 1 auto; min-height:0; scrollbar-width:thin; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard li.mp-list-item { flex:0 0 240px; width:240px !important; max-width:none !important; float:none !important; margin:0 !important; padding:0 !important; list-style:none; scroll-snap-align:start; border-radius:4px; overflow:hidden; background:var(--ap-c,var(--ap-lilac)); color:var(--ap-ink); border:0; opacity:1 !important; transform:none !important; position:static !important; left:auto !important; top:auto !important; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard li.mp-list-item:before { content:none !important; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard li.mfap-current { display:none !important; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-item-wrapper { display:flex; flex-direction:column; height:100%; margin:0; padding:0; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-thumb { margin:0; padding:0; width:100%; height:160px; flex:0 0 160px; overflow:hidden; float:none; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-thumb a { display:block; height:100%; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-thumb img { display:block; width:100% !important; height:100% !important; max-width:none; object-fit:cover; object-position:50% 20%; margin:0; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-credits { display:none; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-text { padding:16px 20px 20px; margin:0; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-text h3 { margin:0 0 6px; padding:0; font:700 30px/.95 var(--ap-sign) !important; letter-spacing:0; text-transform:none; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-text a { color:inherit; text-decoration:none; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-description { margin:0; font:700 14px/1.3 var(--ap-label); color:inherit; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard li.mp-list-item:focus-within { outline:3px solid var(--ap-cream); outline-offset:2px; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-c1{--ap-c:var(--ap-pink)} body:has(#pagetype_article .section a[href$="/artists"]) .mfap-c2{--ap-c:var(--ap-lilac)} body:has(#pagetype_article .section a[href$="/artists"]) .mfap-c3{--ap-c:var(--ap-sky)} body:has(#pagetype_article .section a[href$="/artists"]) .mfap-c4{--ap-c:var(--ap-mint)} body:has(#pagetype_article .section a[href$="/artists"]) .mfap-c5{--ap-c:var(--ap-gold)} body:has(#pagetype_article .section a[href$="/artists"]) .mfap-c0{--ap-c:var(--ap-cream)}
body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-view-more, body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-more { display:none; }

/* Visit band (accent) */
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-visit { background:var(--ap-accent); color:var(--ap-ink); display:flex; flex-direction:column; justify-content:center; padding:40px max(24px,calc(50vw - 600px)); }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-visit h2 { margin:0 0 12px; font:700 clamp(44px,6vw,72px)/.95 var(--ap-sign) !important; color:var(--ap-ink); text-transform:none; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-visit p { margin:0 0 28px; font:400 20px/1.4 var(--ap-label); max-width:560px; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-stores { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:0; padding:0; list-style:none; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-stores li { margin:0; padding:0; list-style:none; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-stores li:before { content:none !important; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-stores a { display:inline-flex; align-items:center; height:52px; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-stores img { height:52px; width:auto; display:block; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-stores .mfap-quest { padding:0 18px; border-radius:8px; background:var(--ap-cream); color:var(--ap-ink); font:700 16px/1.1 var(--ap-label); text-decoration:none; flex-direction:column; justify-content:center; align-items:flex-start; }
body:has(#pagetype_article .section a[href$="/artists"]) .mfap-stores .mfap-quest small { font:400 11px/1 var(--ap-label); }

@media (max-width:760px){
  /* phone: 52px left gutter so the fixed accessibility toggle never covers content */
  body:has(#pagetype_article .section a[href$="/artists"]) .mfap-art { padding:32px 16px 28px 52px; }
  body:has(#pagetype_article .section a[href$="/artists"]) .mfap-art img { max-height:min(640px,70vh); }
  body:has(#pagetype_article .section a[href$="/artists"]) article#main > header, body:has(#pagetype_article .section a[href$="/artists"]) #content > div { padding-left:52px; padding-right:16px; }
  body:has(#pagetype_article .section a[href$="/artists"]) #title h1 { font-size:56px !important; }
  body:has(#pagetype_article .section a[href$="/artists"]) .mfap-desc { font-size:19px; }
  body:has(#pagetype_article .section a[href$="/artists"]) #content > div { font-size:17px; }
  body:has(#pagetype_article .section a[href$="/artists"]) #content p.lead { font-size:18px; }
  body:has(#pagetype_article .section a[href$="/artists"]) img.mfap-photo { width:38%; max-width:150px; margin:4px 0 10px 16px; }
  body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard { padding:32px 0 32px 52px; }
  body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard .mp-title h2 { font-size:36px !important; }
  body:has(#pagetype_article .section a[href$="/artists"]) .mp-posterboard li.mp-list-item { flex-basis:210px; width:210px !important; }
  body:has(#pagetype_article .section a[href$="/artists"]) .mfap-visit { padding:32px 16px 88px 52px; }
  body:has(#pagetype_article .section a[href$="/artists"]) .mfap-visit h2 { font-size:44px !important; }
  body:has(#pagetype_article .section a[href$="/artists"]) .mfap-visit p { font-size:17px; margin-bottom:20px; }
  body:has(#pagetype_article .section a[href$="/artists"]) .mfap-stores img, body:has(#pagetype_article .section a[href$="/artists"]) .mfap-stores a { height:44px; }
}
/* === MFARD ARTIST PROFILE v1 END === */
/* === MFARD VISIT v1 START === */
/* Visit section page (/visit) restyle. Scoped ONLY to the Visit section index page:
   body.mp-type-section that contains #section_visit (Visit articles such as /visit/our-apps/ are mp-type-article and untouched).
   Header (#top, #topnav) and footer (#bottom) markup and styling are NOT changed, except that the existing
   li.selected "Visit" nav item gets an underline here. Fonts: live site D-DIN (brief says Barlow; live site wins).
   The shared devices sprocket (.mfh.mfh-s-devices, styled by the MFARD HP v8 block) is made full-bleed here.
   Rollback: delete everything from START to END. */
body.mp-type-section:has(#section_visit) { max-width: none !important; background: #000 !important; }
body.mp-type-section #section_visit {
  --v-cream: #F3EFE6; --v-green: #0F5A3D; --v-ink: #26231E; --v-rule: #D9D2C3; --v-mist: #C9CFC9;
  --v-band: 520px; --v-m: clamp(16px, 4.45vw, 64px);
  --v-display: 'D-DIN Condensed', 'D-DIN', 'Arial Narrow', sans-serif;
  --v-label: 'D-DIN', 'Arial Narrow', sans-serif;
}
/* "Visit" marked current (the theme already puts .selected on it) */
body.mp-type-section #section_visit #topnav .mainnav > li.selected > a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* main and wrappers full width, no theme boxing */
body.mp-type-section #section_visit #maincontent,
body.mp-type-section #section_visit .mp-section-wrapper { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; float: none !important; }
body.mp-type-section #section_visit .mp-layout-container,
body.mp-type-section #section_visit .mp-container-wrapper,
body.mp-type-section #section_visit .mp-layout-sprocket {
  display: block !important; width: auto !important; max-width: none !important; float: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important;
}
body.mp-type-section #section_visit .RSS_link { display: none !important; }
body.mp-type-section #section_visit #breadcrumbs { background: #000; color: var(--v-mist); padding: 12px var(--v-m) 0; margin: 0; max-width: none; }
body.mp-type-section #section_visit #breadcrumbs a { color: var(--v-mist); }

/* 1. Page title on the black outer background */
body.mp-type-section #section_visit header.sectiontitle { display: block !important; margin: 0 !important; padding: 32px var(--v-m) 48px !important; max-width: 1440px; margin-inline: auto !important; box-sizing: border-box; border: 0 !important; background: none !important; }
body.mp-type-section #section_visit header.sectiontitle h1 { margin: 0; padding: 0; border: 0; font: 700 clamp(70px, 8.2vw, 118px)/0.84 var(--v-display) !important; color: var(--v-cream) !important; letter-spacing: -0.01em; text-transform: none; }
body.mp-type-section #section_visit header.sectiontitle h1:before { content: none !important; }

/* 2+3. The two cream bands: same compact height */
body.mp-type-section #section_visit section.mp-gallery,
body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) {
  box-sizing: border-box; min-height: var(--v-band); margin: 0 !important; background: var(--v-cream) !important; color: var(--v-ink);
  padding: 48px max(var(--v-m), calc((100% - 1440px) / 2 + var(--v-m))) !important; border: 0; max-width: none !important; float: none !important;
}
body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) { border-top: 1px solid var(--v-rule) !important; }
body.mp-type-section #section_visit section.mp-gallery { display: flex; flex-direction: column; justify-content: center; }

/* 2. List of supported devices (Gallery sprocket) */
body.mp-type-section #section_visit .mp-gallery .mp-title { margin: 0 0 32px; padding: 0; border: 0; background: none; }
body.mp-type-section #section_visit .mp-gallery .mp-title h2 { margin: 0; padding: 0; border: 0; float: none; width: auto; font: 700 clamp(40px, 4vw, 56px)/1 var(--v-display) !important; color: var(--v-green) !important; text-transform: none; letter-spacing: 0; }
body.mp-type-section #section_visit .mp-gallery ul.mp-curated { display: flex; flex-direction: column; gap: 32px; margin: 0; padding: 0; list-style: none; height: auto !important; }
body.mp-type-section #section_visit .mp-gallery li.mp-list-item { width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; list-style: none; border: 0; }
body.mp-type-section #section_visit .mp-gallery li.mp-list-item:before { content: none !important; }
body.mp-type-section #section_visit .mp-gallery .mp-item-wrapper { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 32px; margin: 0; padding: 0; background: none; }
body.mp-type-section #section_visit .mp-gallery .mp-thumb { flex: 0 0 min(480px, 45%); width: min(480px, 45%) !important; aspect-ratio: 3 / 2; height: auto !important; padding: 0 !important; margin: 0; overflow: hidden; float: none; position: relative; }
body.mp-type-section #section_visit .mp-gallery .mp-thumb a { display: block !important; position: absolute !important; inset: 0; height: auto !important; padding: 0 !important; }
body.mp-type-section #section_visit .mp-gallery .mp-thumb img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; position: absolute !important; inset: 0; margin: 0; }
body.mp-type-section #section_visit .mp-gallery .mp-credits { display: none; }
body.mp-type-section #section_visit .mp-gallery .mp-text { flex: 1 1 0; width: auto !important; min-width: 0; position: static !important; margin: 0; padding: 0; text-align: left; }
body.mp-type-section #section_visit .mp-gallery .mp-text:before { content: none !important; }
body.mp-type-section #section_visit .mp-gallery .mp-text h3 { margin: 0 0 12px; padding: 0; font: 700 clamp(32px, 3vw, 44px)/1 var(--v-display) !important; text-transform: none; letter-spacing: 0; }
body.mp-type-section #section_visit .mp-gallery .mp-text h3 a { color: var(--v-ink) !important; text-decoration: none !important; border: 0 !important; }
body.mp-type-section #section_visit .mp-gallery .mp-text h3 a:hover { color: var(--v-green) !important; }
body.mp-type-section #section_visit .mp-gallery .mp-description,
body.mp-type-section #section_visit .mp-gallery .mp-description span { margin: 0; font: 400 21px/1.5 var(--v-label) !important; color: var(--v-ink) !important; max-width: 36em; }
body.mp-type-section #section_visit .mp-gallery :is(.mp-view-more, .mp-more) { display: none; }

/* 3. FAQ (HTML sprocket): all open, 3 columns on desktop. The inline padding/grey background on .content is overridden. */
body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) .content { padding: 0 !important; background: transparent !important; column-count: 3; column-gap: 32px; font: 400 19px/1.55 var(--v-label); color: var(--v-ink); }
body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) .content p { margin: 0 0 24px; font: inherit; color: inherit; break-inside: avoid; }
body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) .content p:first-child { column-span: all; margin: 0 0 32px; font: 700 clamp(40px, 4vw, 56px)/1 var(--v-display); color: var(--v-green); }
body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) .content p:not(:first-child):has(> strong:only-child) { margin: 0 0 6px; font: 700 20px/1.25 var(--v-label); color: var(--v-ink); break-after: avoid; }
body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) .content strong { font-weight: 700; }
body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) .content a { color: var(--v-green) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; border: 0 !important; }

/* 4. Shared devices sprocket (.mfh-s-devices, HP3) on the black ground; its look comes from the MFARD HP v8 block */
body.mp-type-section #section_visit .mp-html:has(.mfh) { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; background: transparent !important; border: 0 !important; text-align: left !important; }
body.mp-type-section #section_visit .mfh-s-devices .mfh-devices { padding-bottom: 64px; }

/* phone */
@media (max-width: 760px) {
  body.mp-type-section #section_visit { --v-band: 780px; }
  body.mp-type-section #section_visit header.sectiontitle { padding: 24px 16px 32px 52px !important; }
  body.mp-type-section #section_visit header.sectiontitle h1 { font-size: 72px !important; }
  body.mp-type-section #section_visit #breadcrumbs { padding-left: 52px; }
  /* 52px left gutter so the fixed accessibility toggle never covers content */
  body.mp-type-section #section_visit section.mp-gallery,
  body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) { padding: 40px 16px 40px 52px !important; }
  body.mp-type-section #section_visit .mp-gallery .mp-item-wrapper { flex-direction: column !important; align-items: stretch; gap: 20px; }
  body.mp-type-section #section_visit .mp-gallery .mp-thumb { flex: none; width: 100% !important; }
  body.mp-type-section #section_visit .mp-gallery .mp-text { flex: none; }
  body.mp-type-section #section_visit .mp-gallery .mp-title h2,
  body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) .content p:first-child { font-size: 40px; }
  body.mp-type-section #section_visit .mp-gallery .mp-title h2 { font-size: 40px !important; }
  body.mp-type-section #section_visit .mp-gallery .mp-description,
  body.mp-type-section #section_visit .mp-gallery .mp-description span { font-size: 18px !important; }
  body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) .content { column-count: 1; font-size: 17px; }
  body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) .content p { margin-bottom: 20px; }
  body.mp-type-section #section_visit .mp-html:not(:has(.mfh)) .content p:not(:first-child):has(> strong:only-child) { font-size: 19px; margin-bottom: 4px; }
  body.mp-type-section #section_visit .mfh-s-devices .mfh-wrap { padding-left: 52px; }
  /* 52px gutter leaves too little room for devices + the 162px badge slot side by side: stack them */
  body.mp-type-section #section_visit .mfh-s-devices .mfh-choice { grid-template-columns: minmax(0, 1fr); }
}
/* === MFARD VISIT v1 END === */
/* === MFARD VISIT HEADER START === */
/* /visit shows the HP3 header + footer sprockets (same as the homepage), so MP's default white header, breadcrumbs and footer are hidden,
   mirroring the MFARD HP v8 block (A). The .mfh styles are not homepage-scoped, so the HP3 header needs no extra rules.
   Rollback: delete everything from START to END. */
body.mp-type-section #section_visit:has(.mfh-s-header) #top,
body.mp-type-section #section_visit:has(.mfh-s-header) #breadcrumbs { display: none !important; }
body.mp-type-section #section_visit:has(.mfh-s-footer) #bottom { background: #000 !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; max-width: none !important; padding: 0 0 18px !important; }
body.mp-type-section #section_visit:has(.mfh-s-footer) #bottom :is(#bottomads, #bottomnav, #textnav, .chicklets, #copyright) { display: none !important; }
body.mp-type-section #section_visit #bottom #mp_credits, body.mp-type-section #section_visit #bottom #mp_credits a { color: rgba(255,255,255,.35) !important; }
body.mp-type-section #section_visit, body.mp-type-section #section_visit #page, body.mp-type-section #section_visit #body { background: #000 !important; }
/* "Visit" is the current item in the HP3 header nav (and menu panel) */
body.mp-type-section #section_visit .mfh-s-header .mfh-bar .mfh-main a[href$="/visit"],
body.mp-type-section #section_visit .mfh-s-header .mfh-menu-panel a[href$="/visit"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
/* Title fix: HP3 header above the section title (flex column + order) */
body.mp-type-section #section_visit .mp-section-wrapper { display: flex !important; flex-direction: column !important; }
body.mp-type-section #section_visit .mp-section-wrapper > .mp-layout-container:has(.mfh-s-header) { order: -1 !important; }
/* === MFARD VISIT HEADER END === */

/* === MFARD ARTIST HEADER START === */
/* Artist profiles (Artists section articles) show the HP3 header + footer sprockets (Layout 60: Above Content / Below Content), like /visit.
   MP's default white #top, breadcrumbs and footer are hidden; the header sits at the very top of the page, full width, on a black outer background.
   The artist content keeps its cream wall section. Same scope as MFARD ARTIST PROFILE v1.
   Rollback: delete everything from START to END. */
body:has(#pagetype_article .section a[href$="/artists"]), body:has(#pagetype_article .section a[href$="/artists"]) #page, body:has(#pagetype_article .section a[href$="/artists"]) #body { background:#000 !important; }
body:has(#pagetype_article .section a[href$="/artists"]) #top, body:has(#pagetype_article .section a[href$="/artists"]) #breadcrumbs { display:none !important; }
body:has(#pagetype_article .section a[href$="/artists"]) #page, body:has(#pagetype_article .section a[href$="/artists"]) #body, body:has(#pagetype_article .section a[href$="/artists"]) #maincontent, body:has(#pagetype_article .section a[href$="/artists"]) #pagetype_article, body:has(#pagetype_article .section a[href$="/artists"]) article#main { margin-top:0 !important; padding-top:0 !important; }
body:has(#pagetype_article .section a[href$="/artists"]) #maincontent { max-width:none !important; width:auto !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; border:0 !important; background:transparent !important; }
body:has(#pagetype_article .section a[href$="/artists"]) article#main > .mp-html:has(.mfh-s-header) { display:block !important; margin:0 !important; padding:0 !important; max-width:none !important; width:100% !important; background:#000 !important; border:0 !important; text-align:left !important; }
body:has(#pagetype_article .section a[href$="/artists"]) article#main > .mp-html:has(.mfh-s-footer) { display:block !important; margin:0 !important; padding:0 !important; max-width:none !important; width:100% !important; background:#000 !important; border:0 !important; text-align:left !important; }
body:has(#pagetype_article .section a[href$="/artists"]) article#main > .mp-html .content { padding:0 !important; background:transparent !important; }
body:has(#pagetype_article .section a[href$="/artists"]) #related { display:none !important; }
body:has(#pagetype_article .section a[href$="/artists"]):has(.mfh-s-footer) #bottom { background:#000 !important; border:0 !important; box-shadow:none !important; margin:0 !important; max-width:none !important; padding:0 0 18px !important; }
body:has(#pagetype_article .section a[href$="/artists"]):has(.mfh-s-footer) #bottom :is(#bottomads, #bottomnav, #textnav, .chicklets, #copyright) { display:none !important; }
body:has(#pagetype_article .section a[href$="/artists"]) #bottom #mp_credits, body:has(#pagetype_article .section a[href$="/artists"]) #bottom #mp_credits a { color:rgba(255,255,255,.35) !important; }
/* === MFARD ARTIST HEADER END === */
/* === MFARD ABOUT v1 START === */
/* About page (/about, MP page type: body.mp-type-page.mp-sidebar) restyle. Scope: a page-type body whose breadcrumbs link to /about
   (only /about matches). about.js wraps the H1 and the H3 sections into bands without changing any text, and brings in the
   shared HP3 header, devices and footer (sprockets if attached, otherwise cloned from the homepage HTML).
   Rollback: delete everything from START to END (and the JS block). */
body.mp-type-page:has(#breadcrumbs a[href$="/about"]), body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #body, body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #page { background:#000 !important; max-width:none !important; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) {
  --ab-cream:#F3EFE6; --ab-lilac:#C9B6F2; --ab-mint:#6FD39A; --ab-pink:#F2A7B8; --ab-green:#0F5A3D; --ab-ink:#0A0D0B;
  --ab-m:clamp(16px,4.45vw,64px); --ab-band:480px;
  --ab-display:'D-DIN Condensed','D-DIN','Arial Narrow',sans-serif; --ab-label:'D-DIN','Arial Narrow',sans-serif;
}
/* MP default header, breadcrumbs, sidebar and footer nav hidden (HP3 header/footer replace them) */
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #top, body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #breadcrumbs, body.mp-type-page:has(#breadcrumbs a[href$="/about"]) aside#side, body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .RSS_link { display:none !important; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]):has(.mfh-s-footer) #bottom { background:#000 !important; border:0 !important; box-shadow:none !important; margin:0 !important; max-width:none !important; padding:0 0 18px !important; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]):has(.mfh-s-footer) #bottom :is(#bottomads,#bottomnav,#textnav,.chicklets,#copyright) { display:none !important; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #bottom #mp_credits, body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #bottom #mp_credits a { color:rgba(255,255,255,.35) !important; }
/* wrappers full width, no theme boxing */
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) :is(#maincontent,#pagetype_page,#main,#content,.mp-section-wrapper,.mp-layout-container,.mp-container-wrapper,.mp-layout-sprocket,.mp-html):not(.mfh *) {
  display:block !important; width:auto !important; max-width:none !important; float:none !important; margin:0 !important;
  padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; text-align:left !important;
}
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfh-ab-slot { display:block; width:100%; }
/* title: cream display type on the black page (like the homepage hero headline) */
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #title, body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #title .title { margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #title h1 {
  font-family:var(--ab-display) !important; font-weight:700 !important; color:var(--ab-cream) !important;
  font-size:clamp(56px,9vw,128px) !important; line-height:.92 !important; letter-spacing:-.01em !important; text-transform:none !important;
  margin:0 !important; padding:clamp(40px,6vw,88px) var(--ab-m) clamp(32px,4.5vw,64px) !important; text-align:left !important;
}
/* bands */
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #content.mfab-on { font-size:0; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-band {
  box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); column-gap:clamp(32px,4.5vw,64px);
  align-items:start; height:var(--ab-band); overflow:hidden; padding:56px var(--ab-m); color:var(--ab-ink); font-size:18px;
}
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-intro { background:var(--ab-cream); }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-c1 { background:var(--ab-lilac); }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-c2 { background:var(--ab-mint); }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-c3 { background:var(--ab-pink); }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-head h3, body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-pull {
  font-family:var(--ab-display) !important; font-weight:700 !important; font-size:clamp(36px,3.6vw,52px) !important; line-height:.98 !important;
  color:var(--ab-ink) !important; margin:0 !important; padding:0 !important; text-transform:none !important; letter-spacing:0 !important;
}
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-head h3 strong { font-weight:inherit !important; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-pull { color:var(--ab-green) !important; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-text p {
  font-family:var(--ab-label) !important; font-size:18px !important; line-height:1.5 !important; color:var(--ab-ink) !important;
  margin:0 0 14px !important; padding:0 !important; max-width:none !important;
}
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-text p:last-child { margin-bottom:0 !important; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-text strong { font-weight:700 !important; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-text em { font-style:italic; }
/* shared devices block and HP3 sprockets keep their own HP v8 styling; make their slots full bleed */
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfh-s-header, body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfh-s-devices, body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfh-s-footer { display:block; width:100%; }
/* phone: stacked, all bands equal to the tallest (about.js sets --ab-band-ph; 700px fallback), 52px left gutter for the a11y button */
@media (max-width:767px) {
  body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #title h1 { font-size:clamp(48px,15vw,72px) !important; padding:32px 16px 28px 52px !important; }
  body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-band { display:block; height:var(--ab-band-ph,700px); padding:36px 16px 36px 52px; }
  body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-head { margin-bottom:18px; }
  body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-head h3 { font-size:36px !important; }
  body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-pull { display:none !important; }
  body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-text p { font-size:17px !important; line-height:1.45 !important; }
  body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-intro .mfab-lede { font-family:var(--ab-display) !important; font-weight:700 !important; font-size:30px !important; line-height:1.02 !important; color:var(--ab-green) !important; }
  body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-band.mfab-measure { height:auto !important; }
}
/* === MFARD ABOUT v1 END === */
/* MFARD ABOUT HEADER ORDER START */
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #main:not(.mfh *) { display:flex !important; flex-direction:column !important; }
body.mp-type-page:has(#breadcrumbs a[href$="/about"]) #main > .mp-html:has(.mfh-s-header) { order:-1 !important; }
/* MFARD ABOUT HEADER ORDER END */
/* MFARD ABOUT PHONE FIX START */
@media (max-width:767px) { body.mp-type-page:has(#breadcrumbs a[href$="/about"]) .mfab-band { height:auto !important; min-height:var(--ab-band-ph,573px) !important; overflow:visible !important; } }
/* MFARD ABOUT PHONE FIX END */