/* ------------------------------------------------------------------
   mainlyart.com - design layer for the semantic rebuild
   Replaces: publicstyle.css, mbcsmbmcp.css (Easy Button & Menu Maker),
   layerslider.css, side-menu/styles.css, overlay-minimal.css,
   videolightbox.css, addtohomescreen.css, Window.Metro.css.
   ------------------------------------------------------------------ */

/* Three faces, subset to Latin by fp_fonts.py: 710 KB of TTF -> 68 KB of WOFF.
   ONE Raleway family at two real weights, so font-weight does its own job -
   the CMS declared five families and swapped names instead, which left every
   <strong> in a Raleway block faux-bolded. */
@font-face {
  font-family: 'Raleway';
  src: url('/fonts/raleway-400.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('/fonts/raleway-700.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/opensans-400.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ink:        #333333;
  --ink-soft:   #5f6368;
  /* DECORATION ONLY - rules, borders, focus accents, and text on the dark bar.
     White text on this is 2.53:1, which is what the CMS shipped for years. */
  --brand:      #00aeef;
  --brand-dk:   #009bc9;
  /* The same hue walked down in HSL until it clears WCAG AA in BOTH
     directions: white-on-it 5.02:1 and it-on-white 5.02:1. Everything that
     carries text - the footer, the buttons, the panel headings, the PLEASE
     NOTE band and every body link - uses this. See fp_palette.py and NOTES.md;
     the CMS palette failed AA on 147 text/background pairs. */
  --brand-ink:  #00789e;
  --brand-ink-h:#00637f;   /* hover: darker still, so it never loses contrast */
  --bar:        #1e1e1e;   /* graphics/headerbg.png sampled                 */
  --bar-2:      #2a2a2a;
  --rule:       #e2e4e8;
  --page:       #ffffff;
  --shell:      1200px;
  --gutter:     clamp(16px, 4vw, 32px);
  --head-real:  92px;      /* JS overwrites from header.offsetHeight        */
  --tile-gap:   20px;
  --font:       'OpenSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display:    'Raleway', var(--font);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.65 var(--font);
}

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

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

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(28px, 4.2vw, 40px); font-weight: 700; }
h2 { font-size: clamp(21px, 2.6vw, 26px); font-weight: 700; color: var(--ink); }
h3 { font-size: 18px; font-weight: 700; }
p  { margin: 0 0 1.1em; }

.maShell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.maSkip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: #fff; color: var(--ink); padding: 12px 18px; font-weight: 700;
}
.maSkip:focus { left: 8px; top: 8px; outline: 3px solid var(--brand); }

/* ---------------------------------------------------------- masthead */
.maHead {
  position: sticky; top: 0; z-index: 1200;
  background: var(--bar);
  border-bottom: 1px solid #000;
}
.maHeadIn {
  display: flex; align-items: center; gap: 20px;
  min-height: 92px; padding-block: 12px;
}
.maLogo { flex: 0 0 auto; display: inline-flex; align-items: center; }
/* height MUST be auto. Capping the width with max-width while a fixed
   `height: 92px` stands draws the 271x92 mark at 148x92 on a 320px phone -
   2.16 against its natural 2.95, i.e. 37% too tall. The probe measures
   rect.width/rect.height against naturalWidth/naturalHeight, which is the only
   way this gets caught; the eye reads a squashed wordmark as just a bold one. */
.maLogo img { width: 271px; height: auto; max-width: min(271px, 46vw); }

.maHeadSpace { flex: 1 1 auto; }

/* --- desktop bar */
.maNav { display: flex; }
.maMenu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px);
}
.maMenu > li { margin: 0; }
.maMenu > li > a {
  display: block; padding: 10px 2px;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase;
  color: #ffffff; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.maMenu > li > a:hover,
.maMenu > li > a:focus-visible { color: var(--brand); border-bottom-color: var(--brand); }
.maMenu > li > a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }

.maCall {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 3px;
  background: var(--brand-ink); color: #ffffff !important;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
}
.maCall:hover, .maCall:focus-visible { background: var(--brand-ink-h); color: #fff !important; }
.maCall svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* --- burger + drawer (base state: hidden, so nothing leaks on desktop).
   .maNavFoot carries a SECOND copy of the call button for the open drawer;
   without a base-level display:none it renders inside the desktop bar as well,
   which put 1178px of content in a 1136px box and hung the real button 12px off
   the right edge at 1200. Everything the drawer owns is hidden at base level. */
.maBurger { display: none; }
.maBackdrop { display: none; }
.maNavFoot { display: none; }

/* ---------------------------------------------------------- hero
   The hero image is a COMPOSITION, not a photograph: the left 50.6% is a
   furniture shot and the right 49.4% is a solid black panel that the CMS
   positioned its (image-based) copy over, at left:700px = 56%.

   So `object-fit: cover` is the wrong reflex. Cropping slides the panel out
   from under the words at every container ratio but one, and white text then
   lands on a bright white wall - fp_heroink.py measures the worst pixel in the
   copy region at 1.03:1 un-panelled. Never crop it: emit the image at its own
   ratio and position the copy over the panel BY PERCENTAGE, which maps exactly
   onto the artwork because the img always fills its box.
   (README/yac-robot: a photograph tolerates cropping, a composition does not.) */
.maHero { position: relative; background: var(--bar); }
.maHeroWrap { position: relative; }
.maHero img.maHeroBg {
  display: block; width: 100%; height: auto;
}
.maHeroCopy {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: 50.6%;                      /* measured: where the black panel starts */
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  text-align: left;
  padding: var(--gutter) clamp(14px, 3vw, 54px);
}
.maHeroCopy > * { max-width: 100%; }
/* 400, not 300: there is no Raleway Light in the subset, and asking for one
   makes the browser pick 400 anyway - say so rather than implying a face. */
.maHeroCopy h1 {
  color: #ffffff; font-weight: 400; font-size: clamp(26px, 5.2vw, 56px);
  line-height: 1.08; margin: 0 0 22px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.maBtn {
  display: inline-block; padding: 13px 30px; border-radius: 2px;
  background: var(--brand-ink); color: #ffffff !important;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
}
.maBtn:hover, .maBtn:focus-visible { background: var(--brand-ink-h); color: #fff !important; }
.maBtn.maBtnGhost {
  background: transparent; color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, .8);
}
.maBtn.maBtnGhost:hover, .maBtn.maBtnGhost:focus-visible {
  background: rgba(255, 255, 255, .14); border-color: #fff;
}

/* ---------------------------------------------------------- main */
main { display: block; }
.maMain { padding-block: clamp(32px, 5vw, 60px); }

.maCols {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}
.maCols > * { min-width: 0; }

.maPageHead { margin-bottom: 26px; }
.maPageHead h1 { color: var(--ink); margin: 0; }
.maPageHead::after {
  content: ""; display: block; width: 64px; height: 4px;
  background: var(--brand); margin-top: 14px;
}

.maBody h2 {
  margin-top: 1.7em; padding-bottom: .3em;
  border-bottom: 1px solid var(--rule);
}
.maBody h2:first-child { margin-top: 0; }
.maBody ul { padding-left: 1.25em; }
.maBody li { margin-bottom: .4em; }
.maBody a { text-decoration: underline; text-underline-offset: 2px; }

/* an aside panel */
.maPanel {
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  background: #fbfcfd;
}
.maPanelHd {
  background: var(--brand-ink); color: #ffffff;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 18px 20px; text-align: center;
}
.maPanelBd { padding: 20px; }
.maPanelBd > :last-child { margin-bottom: 0; }

/* hours / spec tables rebuilt as definition rows */
.maSpec { margin: 0 0 1.1em; }
.maSpec div { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.maSpec div:last-child { border-bottom: 0; }
.maSpec dt { flex: 0 0 108px; font-weight: 700; margin: 0; }
.maSpec dd { margin: 0; }

/* featured-item cards (was a JS ticker showing one at a time) */
.maFeat { display: grid; gap: var(--tile-gap); }
.maFeatCard { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: #fff; }
.maFeatCard img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.maFeatCard .maFeatMeta { padding: 12px 14px; font-size: 14px; }
.maFeatCard .maFeatMeta div { display: flex; gap: 8px; padding: 2px 0; }
.maFeatCard .maFeatMeta dt { flex: 0 0 92px; font-weight: 700; margin: 0; color: var(--ink-soft); }
.maFeatCard .maFeatMeta dd { margin: 0; }

.maEmbed { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.maEmbed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.maHomeGrid { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.maPoints { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.maPoints > li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
.maPoints img { width: 32px; height: 32px; }
.maPoints h2 {
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .35em; border: 0; padding: 0;
}
.maPoints p { margin: 0; }
.maLede { font-size: clamp(20px, 2.5vw, 26px); font-family: var(--display); font-weight: 700; line-height: 1.25; margin-bottom: .7em; }

/* ---------------------------------------------------------- arrivals band */
/* image-set so the WebP is actually used - a CSS background gets no srcset, and
   without this the band quietly served the JPEG fallback to every browser. */
.maArrivals {
  background: var(--bar) url("/graphics/subfooterbg.jpg") center / cover no-repeat;
  background-image: image-set(url("/graphics/subfooterbg-1280w.webp") type("image/webp"),
                              url("/graphics/subfooterbg.jpg") type("image/jpeg"));
  background-position: center; background-size: cover; background-repeat: no-repeat;
  color: #ffffff; padding-block: clamp(36px, 5vw, 58px); text-align: center;
  position: relative;
}
.maArrivals::before {
  content: ""; position: absolute; inset: 0; background: rgba(12, 14, 18, .58);
}
.maArrivals > * { position: relative; }
.maArrivals h2 {
  color: #ffffff; font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 26px;
}
.maArrivalGrid {
  display: grid; gap: var(--tile-gap); margin-bottom: 26px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.maArrivalGrid a { display: block; border-radius: 3px; overflow: hidden; background: #fff; }
.maArrivalGrid img { display: block; width: 100%; aspect-ratio: 250 / 188; object-fit: cover; }
.maViewAll {
  display: inline-block; color: #ffffff !important;
  font-family: var(--display); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--brand); padding-bottom: 3px;
}
.maViewAll:hover, .maViewAll:focus-visible { color: var(--brand) !important; }

/* ---------------------------------------------------------- press band */
.maPress { padding-block: clamp(28px, 4vw, 44px); }
.maPressRow {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 52px);
}
/* reserve the ROW, not the item - these six logos are six different natural
   heights, drawn that way relative to each other (README/drauermd) */
.maPressRow > li { height: 56px; display: flex; align-items: center; }
.maPressRow img { max-height: 100%; width: auto; }

.maNote {
  background: var(--brand-ink); color: #ffffff;
  padding: 18px var(--gutter); text-align: center; font-size: 15px;
}
.maNote strong { letter-spacing: .06em; }
.maNote a { color: #ffffff; text-decoration: underline; }

/* ---------------------------------------------------------- footer */
.maFoot { background: var(--brand-ink); color: #ffffff; padding-block: clamp(32px, 4vw, 46px); }
.maFootGrid {
  display: grid; gap: clamp(26px, 4vw, 60px);
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}
.maFoot h2 {
  color: #ffffff; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 14px; border: 0; padding: 0;
  display: flex; align-items: center; gap: 10px;
}
.maFoot h2 img { width: 32px; height: 32px; }
.maFoot a { color: #ffffff; }
.maFoot address { font-style: normal; line-height: 1.9; }
/* Base state = a plain list of all seven. That is what a reader with no JS
   gets: long, but complete. ma.js adds .is-slider and shows one at a time. */
.maQuotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.maQuotes blockquote { margin: 0; }
.maQuotes p { margin: 0 0 .5em; font-style: italic; }
.maQuotes cite { font-style: normal; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; opacity: .95; }

/* --- slider. All slides occupy ONE grid cell, so the box is as tall as the
   tallest quote and the footer never jumps height as it advances. Sizing to
   the current slide instead would shift everything below it on every tick. */
.maQuoteBox.is-slider .maQuotes { gap: 0; }
.maQuoteBox.is-slider .maQuote {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease;
}
.maQuoteBox.is-slider .maQuote.is-on { opacity: 1; visibility: visible; }

.maQuoteNav {
  display: flex; align-items: center; gap: 6px;
  margin-top: 16px;
}
.maQuoteBtn {
  width: 34px; height: 34px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #ffffff; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 3px;
}
.maQuoteBtn:hover { background: rgba(255, 255, 255, .16); }
.maQuoteBtn:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.maQuoteBtn svg { width: 15px; height: 15px; fill: currentColor; }

.maQuoteDots { display: flex; gap: 7px; margin-inline: 6px auto; }
.maQuoteDot {
  width: 10px; height: 10px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid #ffffff;
  background: transparent;
}
.maQuoteDot[aria-current="true"] { background: #ffffff; }
.maQuoteDot:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.maQuoteCount { font-size: 12px; opacity: .9; margin-left: 4px; }

@media (prefers-reduced-motion: reduce) {
  .maQuoteBox.is-slider .maQuote { transition: none; }
}
.maSocial { list-style: none; display: flex; gap: 14px; margin: 18px 0 0; padding: 0; }
.maSocial a { display: inline-flex; }
.maLegal {
  border-top: 1px solid rgba(255, 255, 255, .3);
  margin-top: clamp(26px, 3vw, 38px); padding-top: 20px;
  font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
}

/* ---------------------------------------------------------- form */
.maForm { display: grid; gap: 16px; max-width: 620px; }
.maField { display: grid; gap: 6px; }
.maField label { font-weight: 700; font-size: 14px; }
.maField .maReq { color: #c0392b; }
.maField input, .maField textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: 11px 13px; border: 1px solid #c3c8d0; border-radius: 3px; background: #fff;
}
.maField textarea { min-height: 150px; resize: vertical; }
.maField input:focus, .maField textarea:focus {
  outline: 3px solid rgba(0, 120, 158, .45); border-color: var(--brand-ink); outline-offset: 0;
}
.maHp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.maErr { color: #a4291c; font-size: 14px; font-weight: 700; }
.maNotice { padding: 14px 16px; border-radius: 3px; margin-bottom: 18px; }
.maNotice.ok { background: #e7f7ec; border: 1px solid #9ad3ab; color: #14532d; }
.maNotice.bad { background: #fdecea; border: 1px solid #eaa9a1; color: #7d1d12; }

/* ================================================================== */
/*  < 1080px : the bar runs out of room. The number is MEASURED:      */
/*  logo 271 + menu 535 + call 166 + two 20px flex gaps = 1012 of     */
/*  content, plus the shell's 32px gutters = 1076. So 1080 is the     */
/*  narrowest window the bar fits, and it belongs on the bar side of  */
/*  the boundary - hence 1079.98, not 1080.                          */
/* ================================================================== */
@media (max-width: 1079.98px) {
  .maNav {
    position: fixed;
    top: var(--head-real); right: 0; bottom: 0;
    width: min(360px, 84vw);
    background: var(--bar-2);
    transform: translateX(100%);
    transition: transform .26s ease;
    overflow-y: auto;
    z-index: 1400;
    display: block;
    padding: 8px 0 28px;
    visibility: hidden;
  }
  html.maNavOpen .maNav { transform: translateX(0); visibility: visible; }

  .maMenu { display: block; }
  .maMenu > li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .maMenu > li > a {
    padding: 15px 24px; font-size: 16px; border-bottom: 0;
    border-left: 4px solid transparent;
  }
  .maMenu > li > a:hover,
  .maMenu > li > a:focus-visible,
  .maMenu > li > a[aria-current="page"] {
    border-bottom: 0; border-left-color: var(--brand); background: rgba(255, 255, 255, .06);
  }

  .maBurger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none;
    background: transparent; border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 3px; color: #fff; cursor: pointer; padding: 0;
  }
  .maBurger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
  .maBurger .maX { display: none; }
  html.maNavOpen .maBurger .maX { display: block; }
  html.maNavOpen .maBurger .maBars { display: none; }

  .maBackdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0; pointer-events: none; transition: opacity .26s ease;
    z-index: 1300;
  }
  html.maNavOpen .maBackdrop { opacity: 1; pointer-events: auto; }
  html.maNavOpen { overflow: hidden; }
  /* a sticky masthead opens a stacking context, so the drawer inside it would
     resolve UNDER a body-level backdrop and every tap would close the panel
     (README/macathletix, drauermd). Lift the bar while the panel is open. */
  html.maNavOpen .maHead { z-index: 1500; }

  /* the drawer carries the call-to-action that no longer fits in the bar */
  .maNavFoot { display: block; padding: 20px 24px 0; }
  .maNavFoot .maCall { display: flex; justify-content: center; }

  .maCols { grid-template-columns: minmax(0, 1fr); }
  .maFootGrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .maHomeGrid { grid-template-columns: minmax(0, 1fr); }
  .maArrivalGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the panel is 49.4% of the width, so its usable box shrinks with the
     viewport - tighten the inset before stacking */
  .maHeroCopy { padding-inline: 14px; }
  .maHeroCopy h1 { margin-bottom: 14px; }
}

/* Below this the black panel is too narrow to hold "Vintage Modern Furniture"
   at a readable size (49.4% of 700px is 346px, less 28px of inset), so the copy
   comes OUT of the artwork and sits underneath it on the same solid colour.
   Stacking is the honest answer; shrinking the type until it fits inside a
   third of a phone screen is not. */
@media (max-width: 700px) {
  .maHeroCopy {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    background: var(--bar);
    align-items: center; text-align: center;
    padding: 26px var(--gutter) 32px;
  }
  .maHeroCopy h1 { text-shadow: none; }
}

@media (max-width: 620px) {
  .maHeadIn { min-height: 76px; gap: 12px; }
  /* height stays auto here too. Re-fixing it in this tier is what kept the
     wordmark squashed after the base rule was corrected - a height set in one
     media-query tier has to be undone by the SAME selector in the next. */
  .maLogo img { width: 200px; height: auto; }
  /* the header must not eat the call to action (README/sspallets):
     below this width the button becomes an icon-only 46x46 tel: target
     so the logo, the call and the burger still fit a 320px line. */
  .maCall { padding: 0; width: 46px; height: 46px; justify-content: center; }
  .maCall .maCallText { display: none; }
  .maCall svg { width: 18px; height: 18px; }
  .maSpec dt { flex-basis: 92px; }
}

@media (max-width: 480px) {
  .maArrivalGrid { grid-template-columns: minmax(0, 1fr); }
  .maLegal { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .maNav, .maBackdrop { transition: none; }
}