/*
  Layout mirrors rayberrystudio.com (Wix Studio). Every size is a fraction of
  --sf, the page width, the same way the Wix page scales. On screens 1000px and
  narrower the mobile layout takes over and --sf stops growing at 700px.
*/

:root {
  --sbw: 0px; /* scrollbar width, set by site.js */
  --sf: calc(100vw - var(--sbw));

  --paper: #ffffff;
  --ink: #000000;
  --muted: #595959;
  --placeholder: #e7e6e3;

  --font-display: "Wix Madefor Display", "Helvetica Neue", Arial, sans-serif;
  /* Avenir Light where the device has it (Mac, iPhone, iPad); Nunito Sans elsewhere */
  --font-avenir: "Avenir", "Avenir Next", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
}

@media (max-width: 1000px) {
  :root { --sf: min(calc(100vw - var(--sbw)), 700px); }
}

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

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* full-bleed rows are 100vw wide; never let them cause sideways scrolling */
main { overflow-x: clip; }

img,
video { display: block; }

h1, h2, p { margin: 0; font-weight: 400; }

/* ---------- Menu (same on every page; fixed to the top right corner) ---------- */

.site-menu {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50; /* under the painting viewer */
  font-family: var(--font-avenir);
}

.site-menu__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.site-menu__toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.site-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 16px 24px 18px;
  background: var(--paper);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.site-menu__panel[hidden] { display: none; }

.site-menu__list,
.site-menu__shows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-menu a {
  display: block;
  padding: 6px 0;
  color: var(--ink);
  font-size: 17px;
  text-decoration: none;
}

.site-menu a:hover,
.site-menu a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.site-menu a[aria-current="page"] { color: var(--muted); }

.site-menu__heading {
  display: block;
  margin-top: 12px;
  padding-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-menu__shows a { font-style: italic; }

.site-menu__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* phones: icon only, so it stays clear of the name over the video */
@media (max-width: 600px) {
  .site-menu { top: 12px; right: 12px; }
  .site-menu__toggle { width: 40px; padding: 0; justify-content: center; }
  .site-menu__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: calc(var(--sf) * 0.71257);
  overflow: hidden;
  background: var(--placeholder);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__name {
  position: relative;
  width: 84.12%;
  margin: 0 auto;
  padding-top: calc(var(--sf) * 0.0335815);
  font-family: var(--font-display);
  font-size: calc(var(--sf) * 0.06875);
  line-height: 1;
  text-align: center;
  color: var(--ink);
}

/* ---------- Title block ---------- */

.intro {
  padding-top: calc(var(--sf) * 0.1069458);
  padding-bottom: calc(var(--sf) * 0.029513);
  text-align: center;
  color: var(--muted);
  font-family: var(--font-avenir);
  font-weight: 200; /* resolves to Avenir Light (300) on Apple devices, Nunito Sans ExtraLight elsewhere */
}

.intro__title {
  width: 84.12%;
  margin: 0 auto calc(var(--sf) * 0.0249756);
  font-style: italic;
  font-weight: 200;
  font-size: calc(var(--sf) * 0.03125);
  line-height: 1;
}

.intro__subtitle {
  width: 84.12%;
  margin: 0 auto;
  padding-bottom: 2.5em; /* the two empty lines under this line on the Wix page */
  font-weight: 200;
  font-size: calc(var(--sf) * 0.0140625);
  line-height: 1.25;
}

/* Event notice under the homepage video, in the past show's title type.
   The paintings' own top padding supplies the space below it. */
.event { padding-bottom: 0; }
.event .intro__title { line-height: 1.2; }
.event__details { list-style: none; padding: 0; }
.event__details li + li { margin-top: 0.5em; }

/* ---------- Paintings (rows as arranged on the Freeform board) ---------- */

.gallery {
  --page: calc(100vw - var(--sbw));     /* full-bleed rows */
  --col: calc(var(--sf) * 0.75);        /* the widest row */
  --gap-x: calc(var(--col) * 0.09);     /* between paintings in a row */
  --gap-y: calc(var(--col) * 0.14);     /* between rows */
  width: var(--col);
  margin: 0 auto;
  padding-top: var(--gap-y);
  padding-bottom: calc(var(--sf) * 0.1716431);
}

.gallery__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap-x);
  width: calc(var(--col) * var(--w) + (var(--n) - 1) * var(--gap-x));
  max-width: 100%;
  margin: 0 auto;
}

.gallery__row + .gallery__row { margin-top: var(--gap-y); }

/* Edge to edge across the whole page, outside the column (two classes so the phone rules don't narrow it) */
.gallery .gallery__row--bleed {
  width: var(--page);
  max-width: none;
  margin-left: calc((var(--col) - var(--page)) / 2);
  margin-right: 0;
}

/* Growing in proportion to width/height gives every painting in a row the same height */
.gallery__item {
  flex: var(--ar) 1 0%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  object-fit: cover;
  background: var(--placeholder);
}

.gallery__item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* ---------- Gallery-wall photo: point at a small painting to see it large ---------- */

.wall {
  position: relative;
  flex: 1 1 100%; /* fill its edge-to-edge row */
  min-width: 0;
}

.wall > img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  background: var(--placeholder);
}

/* One spot over each small painting (positions from tools/wall.json) */
.wall__spot {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.wall__spot:hover,
.wall__spot.is-active,
.wall__spot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

/* The close-up, held on the half of the screen away from the pointer so the wall stays visible */
.wall-preview {
  position: fixed;
  top: 50%;
  z-index: 40;
  max-width: 44vw;
  max-height: 78vh;
  transform: translateY(-50%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.wall-preview[hidden] { display: none; }
.wall-preview[data-side="left"] { left: 3vw; }
.wall-preview[data-side="right"] { right: 3vw; }

/* ---------- Past show page: painting grid (the original Wix layout) ---------- */

.show-grid {
  list-style: none;
  width: 93.77%;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 0;
}

.show-grid__item {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.show-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.show-grid__item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (max-width: 1129px) {
  .show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Spacers between bands ---------- */

.spacer--1 { height: calc(var(--sf) * 0.046875); }
.spacer--2 { height: calc(var(--sf) * 0.0508572); }
.spacer--3 { height: calc(var(--sf) * 0.051747); }
.spacer--4 { height: calc(var(--sf) * 0.0355903); }

/* ---------- Centered images ---------- */

.feature img {
  margin: 0 auto;
  height: auto;
  object-fit: cover;
  background: var(--placeholder);
}

.feature--wide-1 {
  padding-top: calc(var(--sf) * 0.0327271);
  padding-bottom: calc(var(--sf) * 0.046875);
}
.feature--wide-1 img { width: 71.55%; aspect-ratio: 3.0725 / 1; }

.feature--wide-2 {
  padding-top: calc(var(--sf) * 0.0288696);
  padding-bottom: calc(var(--sf) * 0.0396851);
}
.feature--wide-2 img { width: 75.02%; aspect-ratio: 3.0755 / 1; }

.feature--large {
  padding-top: calc(var(--sf) * 0.0403931);
  padding-bottom: calc(var(--sf) * 0.1716431);
}
.feature--large img { width: 74.61%; aspect-ratio: 1.5063 / 1; }

/* ---------- Edge-to-edge images ---------- */

.fullbleed {
  position: relative;
  overflow: hidden;
}

.fullbleed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fullbleed--2 { height: calc(var(--sf) * 0.467795); }

/* The image stays fixed to the screen and the band scrolls over it (Wix "Reveal") */
.fullbleed--fixed {
  height: calc(var(--sf) * 0.366515);
  clip-path: inset(0);
}

.fullbleed--fixed img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

/* ---------- Footer ---------- */

.site-footer { height: calc(var(--sf) * 0.0702908); }

/* ---------- Mobile and tablet (Wix switches layouts at 1000px) ---------- */

@media (max-width: 1000px) {
  .hero { height: calc(var(--sf) * 0.96795); }
  .hero__name {
    width: 87.7%;
    padding-top: calc(var(--sf) * 0.1204728);
    font-size: calc(var(--sf) * 0.0923077);
  }

  .intro {
    padding-top: calc(var(--sf) * 0.0794872);
    padding-bottom: calc(var(--sf) * 0.0067308);
  }
  .intro__title {
    width: 87.7%;
    margin-bottom: calc(var(--sf) * 0.0666266);
    font-size: calc(var(--sf) * 0.0512821);
    font-weight: 500;
  }
  .intro__subtitle {
    width: 87.7%;
    font-size: calc(var(--sf) * 0.0410256);
  }

  .gallery {
    --col: calc(var(--sf) * 0.877);
    --gap-x: calc(var(--col) * 0.06);
    --gap-y: calc(var(--col) * 0.12);
    padding-bottom: calc(var(--sf) * 0.205128);
  }
  .gallery__row {
    flex-wrap: wrap;
    width: 100%;
  }
  .gallery__item { flex: 0 0 100%; }
  .gallery__item--tall { flex-basis: calc((100% - var(--gap-x)) / 2); }

  .show-gallery { padding-bottom: calc(var(--sf) * 0.205128); }
  .show-grid {
    width: 87.7%;
    grid-template-columns: minmax(0, 1fr);
  }

  .spacer--1,
  .spacer--4 { height: calc(var(--sf) * 0.102564); }
  .spacer--2,
  .spacer--3 { height: calc(var(--sf) * 0.512821); }

  .feature--wide-1,
  .feature--wide-2 {
    padding-top: calc(var(--sf) * 0.1025641);
    padding-bottom: calc(var(--sf) * 0.1025641);
  }
  .feature--wide-1 img,
  .feature--wide-2 img { width: 87.69%; }

  .feature--large {
    padding-top: calc(var(--sf) * 0.0307292);
    padding-bottom: calc(var(--sf) * 0.0921875);
  }
  .feature--large img { width: 100%; }

  .fullbleed--fixed,
  .fullbleed--2 { height: calc(var(--sf) * 0.512821); }

  .site-footer { height: calc(var(--sf) * 0.512821); }
}

/* ---------- Full-screen painting viewer ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 77px 96px;
  background: var(--paper);
}

.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.lightbox__btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.lightbox__btn[hidden] { display: none; }
.lightbox__btn:focus-visible { outline: 2px solid var(--ink); }

.lightbox__close { top: 26px; right: 27px; }
.lightbox__prev,
.lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 27px; }
.lightbox__next { right: 27px; }

@media (max-width: 1000px) {
  .lightbox { padding: 64px 44px; }
  .lightbox__close { top: 10px; right: 6px; }
  .lightbox__prev { left: 0; }
  .lightbox__next { right: 0; }
}

body.is-locked { overflow: hidden; }

/* ---------- Fades copied from the Wix page ---------- */

/* Fade in once when scrolled into view (timing per element via --enter-ms) */
.js [data-enter] { opacity: 0; }
.js [data-enter].is-in {
  opacity: 1;
  transition: opacity var(--enter-ms, 1200ms) cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-enter] { opacity: 1; }
  .js [data-enter].is-in { transition: none; }
}