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