@layer reset, legacy, base, layout, typography, components, utilities;

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  img {
    display: block;
    /* max-width: 100%; */
    height: auto;
  }
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
  }
  ul {
    list-style: none;
  }
}

@layer legacy {
  /* a {
    color: white !important;
  } */
  /* a {
    color: unset !important;
  } */
  .exhibition-smaller-title,
  .exhibition-standard-details {
    color: var(--body-clr-5) !important;
  }
  .past-events-subtitle {
    color: var(--body-clr-5) !important;
  }
  .past-events-date {
    color: var(--body-clr-2) !important;
  }
  @media (max-width: 767px) {
    .exhibition-opening-night-title,
    .exhibition-subtitle-details {
      margin-top: 1rem !important;
    }
    .past-event-item {
      flex-wrap: wrap;
    }
    .past-event-item .vert-line-break {
      display: none !important;
    }
    .past-event-item .past-events-date {
      width: 100%;
    }
  }
}

@layer base {
  body {
    background-color: var(--grey-0);
    color: var(--grey-15);
    font-family: 'helvetica-neue-world', sans-serif;
    font-size: var(--fs-3);
    font-weight: var(--fw-light);
    line-height: var(--lh-5);
  }

  :root {
    /* Layout tokens */
    --max-width: 2000px;
    --columns: 16;
    --gutter: clamp(20px, 2vw + 0.5rem, 2rem);
    --gutter: clamp(10px, 1.5vw + 0.1rem, 3rem);
    --gutter-small: clamp(7px, 0.5vw, 0.5rem);
    --page-gutter: clamp(1rem, 2vw + 0.5rem, 2rem);
    --section-padding: clamp(8rem, 12vw, 13.75rem);

    /* Spacing scale */
    --inset-1: clamp(0.5rem, 1vw, 1rem);
    --inset-2: clamp(1rem, 2vw, 2rem);
    --inset-3: clamp(1.5rem, 3vw, 3rem);
    --inset-4: clamp(2rem, 4vw, 4rem);
    --inset-5: clamp(2.5rem, 5vw, 5rem);
    --inset-6: clamp(3rem, 6vw, 6rem);
    --inset-7: clamp(3.5rem, 7vw, 7rem);
    --inset-8: clamp(4rem, 8vw, 8rem);
    --inset-9: clamp(4.5rem, 9vw, 9rem);
    --inset-10: clamp(5rem, 10vw, 10rem);
    --inset-11: clamp(5.5rem, 11vw, 11rem);
    --inset-12: clamp(6rem, 12vw, 12rem);
    --inset-13: clamp(6.5rem, 13vw, 13rem);
    --inset-14: clamp(7rem, 14vw, 14rem);
    --inset-15: clamp(7.5rem, 15vw, 15rem);

    /* Typography scale */
    --fs-0: clamp(0.65rem, 1vw, 0.775rem); /* ~11–14px */
    --fs-1: clamp(0.75rem, 1vw, 0.875rem); /* ~11–14px */
    --fs-2: clamp(0.75rem, 1.1vw, 0.9375rem); /* ~12–15px */
    --fs-3: 1rem;
    @media (min-width: 768px) {
      --fs-3: clamp(0.8125rem, 1.2vw, 1rem); /* ~13–16px */
    }
    --fs-4: clamp(0.875rem, 1.3vw, 1.0625rem); /* ~14–17px */
    --fs-5: clamp(0.9375rem, 1.4vw, 1.125rem); /* ~15–18px */
    --fs-6: clamp(1rem, 1.5vw, 1.375rem); /* 16–22px */
    --fs-7: clamp(1.0625rem, 1.6vw, 1.4375rem); /* 17–23px */
    --fs-8: clamp(1.125rem, 1.7vw, 1.5rem); /* 18–24px */
    --fs-9: clamp(1.1875rem, 1.8vw, 1.5625rem); /* 19–25px */
    --fs-10: clamp(1.25rem, 1.9vw, 1.625rem); /* 20–26px */
    --fs-11: clamp(1.5rem, 2vw, 1.5rem);
    --fs-12: clamp(1.5rem, 3vw, 2rem);
    --fs-13: clamp(2rem, 4vw, 3rem);
    --fs-14: clamp(2.5rem, 5vw, 4rem);

    /* Font weights */
    --fw-thin: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    /* Letter spacing */
    --ls-0: -0.2rem;
    --ls-1: -0.11rem;
    --ls-2: -0.06rem;
    --ls-3: -0.03rem;
    --ls-4: 0rem;
    --ls-5: 0.02rem;
    --ls-6: 0.04rem;
    --ls-7: 0.06rem;
    --ls-8: 0.08rem;
    --ls-9: 0.1rem;
    --ls-10: 0.13rem;
    --ls-11: 0.15rem;
    --ls-12: 0.175rem;
    --ls-13: 0.2rem;

    /* Line height */
    --lh-0: 1;
    --lh-1: 1.04;
    --lh-2: 1.2;
    --lh-3: 1.3;
    --lh-4: 1.4;
    --lh-5: 1.5;
    --lh-6: 1.6;
    --lh-7: 1.7;
    --lh-8: 1.8;
    --lh-9: 2.2;
    --lh-10: 2.5;

    /* Color */
    --grey-20: hsl(0, 0%, 0%);
    --grey-19: hsl(0, 0%, 5.3%);
    --grey-18: hsl(0, 0%, 10.5%);
    --grey-17: hsl(0, 0%, 15.8%);
    --grey-16: hsl(0, 0%, 21.1%);
    --grey-15: hsl(0, 0%, 26.3%);
    --grey-14: hsl(0, 0%, 31.6%);
    --grey-13: hsl(0, 0%, 36.8%);
    --grey-12: hsl(0, 0%, 42.1%);
    --grey-11: hsl(0, 0%, 47.4%);
    --grey-10: hsl(0, 0%, 52.6%);
    --grey-9: hsl(0, 0%, 57.9%);
    --grey-8: hsl(0, 0%, 63.2%);
    --grey-7: hsl(0, 0%, 68.4%);
    --grey-6: hsl(0, 0%, 73.7%);
    --grey-5: hsl(0, 0%, 78.9%);
    --grey-4: hsl(0, 0%, 84.2%);
    --grey-3: hsl(0, 2%, 89.5%);
    --grey-2: hsl(0, 0%, 94.7%);
    --grey-1: hsl(0, 0%, 97%);
    --grey-0: hsl(0, 0%, 100%);

    --body-clr-1: hsl(0, 0%, 73.7%);
    --body-clr-2: hsl(0, 0%, 62%);
    --body-clr-3: hsl(0, 0%, 50%);
    --body-clr-4: hsl(0, 0%, 40.6%);
    --body-clr-5: hsl(0, 0%, 32.6%);
    --body-clr-6: hsl(0, 0%, 20%);
    --body-clr-7: hsl(0, 0%, 0%);
  }
}

@layer layout {
  /* Base section */
  .primary-footer,
  .gallery section {
    max-width: var(--max-width);
    margin-inline: auto;
    margin-inline: var(--gutter);
  }

  /* Layout types */
  [data-layout='grid'] {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gutter-small);
  }
  [data-layout='split-screen'] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  [data-layout='flex-split-horizontal'] {
    display: flex;
    flex-direction: column;
    /* gap: var(--inset-6); */
    @media (min-width: 768px) {
      flex-direction: row;
      gap: var(--inset-6);
    }
  }
  [data-layout='content-rhs'] {
    display: grid;
    grid-template-rows: auto;
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    @media (min-width: 768px) {
      margin-left: auto;
      margin-right: var(--gutter);
    }
  }
  [data-layout='asymmetric'] {
    grid-template-columns: 3fr 7fr;
  }
  [data-layout='center'] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: var(--gutter-small);
  }

  [data-layout='gallery'] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gutter-small);
    padding: var(--gutter-small);

    @media (min-width: 768px) {
      grid-template-columns: 1fr;
      justify-items: center;
    }
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  /* Grid positions */
  .g-1-1 {
    grid-column: 1 / span 1;
  }
  .g-1-2 {
    grid-column: 1 / span 2;
  }
  .g-2-2 {
    grid-column: 2 / span 2;
  }
  .g-3-14 {
    grid-column: 3 / span 13;
  }
  .g-2-1 {
    grid-column: 2 / span 1;
  }
  .g-3-1 {
    grid-column: 3 / span 1;
  }
  .g-4-1 {
    grid-column: 4 / span 1;
  }
  .g-5-1 {
    grid-column: 5 / span 1;
  }
  .g-6-1 {
    grid-column: 6 / span 1;
  }
  .g-2-3 {
    grid-column: 3 / span 3;
  }
  .g-1-1 {
    grid-column: 1 / span 1;
  }
  .g-2-5 {
    grid-column: 2 / span 5;
  }
  .g-3-5 {
    grid-column: 3 / span 5;
  }
  .g-2-5 {
    grid-column: 2 / span 5;
  }
  .g-4-3 {
    grid-column: 4 / span 3;
  }

  .g-footer-col-1 {
    grid-column: 3 / span 3;
  }
  .g-footer-col-2 {
    grid-column: 8 / span 7;
    @media (min-width: 768px) {
      grid-column: 6 / span 3;
    }
  }

  @media (max-width: 767px) {
    .g-2-5 {
      grid-column: 2/15;
    }
  }

  /* Flow spacing */
  .flow-0 > * + * {
    margin-top: 0.25rem;
  }
  .flow-1 > * + * {
    margin-top: 0.5rem;
  }
  .flow-2 > * + * {
    margin-top: 0.75rem;
  }
  .flow-3 > * + * {
    margin-top: 1rem;
  }
  .flow-4 > * + * {
    margin-top: 1.5rem;
  }
  .flow-5 > * + * {
    margin-top: 2rem;
  }
  .flow-6 > * + * {
    margin-top: 3rem;
  }
  .flow-10 > * + * {
    margin-top: 6.5rem;
  }

  /* Gap */
  [data-gap='4'] {
    gap: var(--inset-4);
  }
  [data-gap='5'] {
    gap: var(--inset-5);
  }
  [data-gap='10'] {
    gap: var(--inset-5);
    gap: 150px;
  }
  [data-gap='paintings-gallery'] {
    row-gap: 4vh;
    @media (min-width: 768px) {
      gap: 9vh;
    }
  }
  [data-gap='exhibitions-panel'] {
    row-gap: 4vh;
    @media (min-width: 768px) {
      gap: 13vh;
    }
  }
}

@layer typography {
  [data-type='headline-4'] {
    font-size: 1.75rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
  }
  [data-type='headline-2'] {
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
  }
  [data-type='subhead'] {
    font-size: var(--fs-body-7);
    font-weight: var(--fw-medium);
    font-weight: 500;
    color: var(--grey-0);
  }
  [data-type='smaller'] {
    font-size: var(--fs-1);
    font-weight: var(--fw-light);
  }
  [data-type='smallest'] {
    font-size: var(--fs-0);
    font-weight: var(--fw-light);
    letter-spacing: var(--ls-5);
  }
  [data-type='body-light'] {
    font-size: var(--text-base);
    font-weight: var(--fw-light);
    line-height: var(--leading-normal);
  }
  [data-type='body-regular'] {
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    line-height: var(--leading-normal);
  }
  [data-type='body-medium'] {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    line-height: var(--leading-normal);
  }
  [data-type='body-bold'] {
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    line-height: var(--leading-normal);
  }
  [data-type='caption'] {
    font-size: var(--text-sm);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-wide);
  }

  [data-type='nav-weight-2'] {
    font-weight: var(--fw-regular);
  }
}

@layer components {
  /* #region - Site Chrome */
  .site-chrome[data-theme='light-chrome'] {
    --chrome-text: var(--grey-1);
    --color-link: var(--grey-2);
    --color-link-emphasis: var(--grey-1);
    --color-link-hover: var(--grey-0);
    --color-link-on: var(--grey-0);
  }
  @media (max-width: 767px) {
    .site-chrome[data-theme='light-chrome'] {
      --color-link: var(--grey-14);
      --color-link-hover: var(--grey-20);
      --color-link-on: var(--grey-20);
    }
  }
  .site-chrome[data-theme='dark-chrome'] {
    --chrome-text: var(--grey-17) !important;
    --color-link: var(--grey-14) !important;
    --color-link-emphasis: var(--grey-17);
    --color-link-hover: var(--grey-20);
    --color-link-on: var(--grey-20) !important;
  }
  .site-chrome {
    --chrome-text: var(--grey-17);
    --color-link: var(--grey-14);
    --color-link-emphasis: var(--grey-17);
    --color-link-hover: var(--grey-20);
    --color-link-on: var(--grey-20);
    height: 100vh;
    width: 100%;
    z-index: 100;
    position: fixed;
    pointer-events: none;
  }
  .site-chrome > * {
    pointer-events: all;
  }
  .rs-topheading,
  .purchase-enquiries,
  .primary-nav-wrapper {
    color: var(--chrome-text);
    transition: color 0.5s ease;
  }
  .header-logo-bar img {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: auto;

    @media (min-width: 768px) {
      width: 115px;
      height: auto;
    }
  }
  .rs-topheading {
    position: absolute;
    top: 10px;
    right: 3rem;
    font-size: var(--fs-5);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-3);

    @media (min-width: 768px) {
      right: var(--gutter);
    }
  }
  .primary-nav-wrapper {
    position: absolute;
    top: 50%;
    left: var(--gutter);
    transform: translateY(-50%);
    line-height: var(--lh-7);
  }
  .purchase-enquiries {
    position: absolute;
    bottom: 20px;
    left: var(--gutter);
    font-weight: var(--fw-medium);
  }
  /* #endregion */

  /* #region - Nav */
  .primary-nav-wrapper {
    display: none;
    @media (min-width: 768px) {
      display: block;
    }
  }
  .menu-item-has-children {
    position: relative;
  }
  .sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    padding-left: clamp(4px, 4vw, 100px);
    pointer-events: none;
    width: max-content;
  }
  .menu-item-has-children:hover .sub-menu,
  .menu-item-has-children.is-active .sub-menu,
  .menu-item-has-children.current-menu-ancestor .sub-menu {
    pointer-events: auto;
  }

  .nav-char {
    display: inline-block;
    opacity: 0;
    transform: translateX(-4px);
    transition:
      opacity 0.1s ease,
      transform 0.1s ease;
  }
  .nav-char.is-visible {
    opacity: 1;
    transform: translateX(0);
  }
  .nav-transparency {
    opacity: 0.1;
  }
  /* #endregion */

  /* #region - Mobile Nav — moved outside @layer, see bottom of file */
  /* #endregion */

  /* #region - Footer */
  .primary-footer {
    background-color: var(--grey-3);
    background-color: hsl(0, 2%, 94.5%);
    margin-top: var(--gutter);
    /* margin-bottom: 50px; */
    padding-block: var(--inset-6);
    margin-inline: 0 !important;
  }
  .footer-copywrite {
    margin-top: var(--inset-11);
    margin-top: 20vh;
  }
  /* #endregion */

  /* #region - Reveal animation */
  .reveal-down.is-ready {
    transform: translateY(-60px);
    transition: transform 0.7s ease;
  }
  .reveal-down.is-visible {
    transform: translateY(0);
  }
  /* #endregion */

  /* #region - Home */
  .home-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 0;
  }

  @media (min-width: 768px) {
    .home-hero.fullscreen-desktop {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 30%;
        height: 100%;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
        pointer-events: none;
      }
    }
  }
  .hero-exhibition-halfscreen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }
  .collection-label {
    padding-right: 2rem;
  }
  .collection-label-lhs {
    padding-left: var(--gutter);
  }
  .rosie-intro-wrapper {
    max-width: 40ch;
    text-align: center;
    margin-inline: 20px;
  }
  .paintings-intro {
    margin-bottom: 100px;
  }
  .paintings-intro p:first-of-type {
    margin-top: 6rem;
  }
  .home-painting-strip {
    width: 20px;
    height: 100%;
    object-fit: cover;
    @media (min-width: 768px) {
      width: 50px;
    }
  }
  .home-painting-strip img {
    height: 100px;
  }
  .home-paintings-intro-text {
    max-width: 50ch;
    margin-bottom: clamp(50px, 10vw + 30px, 200px);
  }
  .exhibitions {
    padding-inline: var(--gutter);
    margin-top: var(--section-padding);
  }
  .exhibitions-view-all {
    margin-top: 10px;
    @media (min-width: 768px) {
      margin-top: 30px;
    }
  }
  .exhibition-current {
    row-gap: 3rem;
    @media (min-width: 768px) {
      row-gap: 5rem;
    }
  }
  .exhibitions-events-calendar {
    margin-top: 60px;
    @media (min-width: 768px) {
      margin-top: 160px;
    }
  }
  .exhibitions-home {
    margin-top: 20vh;
    padding-inline: var(--gutter);
    @media (min-width: 768px) {
      margin-top: clamp(4rem, 8vw, 10rem);
    }
  }
  .exhibition-main {
    /* --columns: 6; */
    margin-top: 1.5rem;
    padding-block: var(--inset-6);
    padding-left: var(--ml-grid-4);
    color: var(--body-clr-4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 7rem;

    background-image: url('../img/home/hm-exhibitions-bg-mbl.jpg');
    background-size: cover;
    width: 100%;
    height: 100%;

    @media (min-width: 768px) {
      background-image: url('../img/home/hm-exhibitions-bg.jpg');
    }
  }
  @media (max-width: 768px) {
    .exhibition-current-card.flow-4 > * + * {
      margin-top: 0.5rem;
    }
    [data-layout='content-rhs'] {
      margin: 1.6rem;
    }
  }
  .upcoming-exhibition-lede {
    font-weight: var(--fw-medium);
    color: var(--body-clr-6);
    margin-bottom: 10rem;
    @media (min-width: 768px) {
      margin-bottom: 0;
    }
  }
  .exhibition-past [data-layout='flex-split-horizontal'] {
    gap: 2rem;
    margin-right: 20px;
    & > * {
      flex: 1 1 0;
      min-width: 120px;
    }
  }
  /* #endregion */

  /* #region - Paintings Gallery */
  .gallery-painting-wrapper {
    padding-top: var(--inset-10);

    @media (min-width: 768px) {
      padding-top: var(--inset-5);
    }
  }
  .gallery-painting-card img {
    max-width: 100%;

    @media (min-width: 768px) {
      max-width: 40vw;
      max-width: clamp(350px, 40vw + 5rem, 750px);
    }

    @media (min-width: 768px) and (max-height: 700px) {
      max-width: clamp(150px, 30vw + 1rem, 350px);
    }

    @media (min-width: 768px) and (min-height: 700px) {
      max-width: clamp(250px, 30vw + 1rem, 500px);
    }

    @media (min-width: 768px) and (min-height: 800px) {
      max-width: clamp(350px, 40vw + 5rem, 600px);
    }

    @media (min-width: 768px) and (min-height: 1000px) {
      max-width: clamp(350px, 40vw + 5rem, 750px);
    }
  }

  .gallery-painting {
    width: auto;
    max-height: 70vh;
    max-height: min(70vh, calc(100vw * 0.6));
    transform-origin: center center;
    transition: transform 0.4s ease;

    @media (hover: hover) {
      cursor: zoom-in;
    }
  }

  .gallery-painting-card.is-zoomed .gallery-painting {
    transform: scale(1.36);
    cursor: zoom-out;
    box-shadow: 0 0 0 30px var(--grey-0);
  }

  .gallery-painting-card.is-zoomed {
    position: relative;
    z-index: 1;
  }
  .gallery-painting-info {
    margin-top: 1rem;
    font-size: var(--fs-1);
    color: var(--grey-12);
  }
  .painting-medium {
    margin-left: 0.5rem;
  }
  .tax-painting_status .primary-footer {
    margin-top: var(--inset-10);
  }
  /* #endregion */

  /* #region - Process */
  .exhibition-hero-upcoming-banner {
    grid-column: left-gutter / right-gutter !important;
    align-items: end;
  }
  .exhibition-hero-upcoming-banner a {
    flex-direction: row !important;
  }
  .exhibition-down-arrow {
    margin-left: 20px;
    width: 35px !important;
    height: 35px !important;
  }
  .page-template-page-process {
    background-color: rgb(22, 22, 22);
  }
  /* #endregion */

  /* #region - About */
  @media (max-width: 767px) {
    .about main.primary-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .about-text-wrapper {
      grid-column: 1 / -1;
      order: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .portrait-img-wrapper {
      grid-column: 1 / -1;
      order: 1;
      margin-top: -100px;
    }
  }

  .about .header-main {
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    z-index: 100;
    position: relative;
  }
  .about .logo-main {
    display: grid;
    align-items: flex-start;
    z-index: 100;
  }
  .about .logo-main img {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 100px;
  }

  .about-text-col {
    display: flex;
    flex-direction: column;
    width: clamp(300px, 60%, 550px);
    margin-bottom: 100px;
    gap: 20px;
  }
  .bio-heading {
    margin-top: 80px;
    margin-bottom: 2rem;
  }
  .about .view-more-panel {
    margin-top: 0;
    margin-left: auto;
    margin-right: 40px;
    text-align: right;
  }
  .fullwidth-panel {
    width: 100%;
    display: flex;
  }
  .rosie-portrait {
    width: 100%;
    height: 85vh;
    height: 85dvh;
    object-fit: cover;
    object-position: center center;
  }
  .portrait-img-wrapper img {
    object-position: right !important;
  }

  @media (min-width: 768px) {
    .about-text-wrapper {
      grid-column: center / right-fullwidth !important;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;

      margin-top: 20vh !important;
      margin-bottom: 10vh !important;
    }
    .portrait-img-wrapper {
      grid-column: center / left-fullwidth !important;
      margin-top: -0 !important;
      margin-left: 0 !important;
      margin-bottom: 0rem !important;
      height: 100vh !important;

      position: sticky;
      top: 0;
      left: 0;
    }
    .rosie-portrait {
      width: 100%;
      height: 100% !important;
      object-fit: cover;
      object-position: center center;
    }
    .bio-heading {
      margin-top: 80px;
      margin-bottom: 2rem;
    }
    .about-text-col {
      margin-left: 20px;
    }
    .about-link {
      padding-top: 80px;
    }
  }
  /* #endregion */
}

@layer utilities {
  .fullscreen {
    height: 100vh;

    @media (min-width: 768px) {
      height: 100vh;
    }
  }
  .fullscreen-desktop {
    height: 70vh;
    @media (min-width: 768px) {
      height: 100vh;
    }
  }
  .nearlyfullscreen {
    height: 60vh;
    @media (min-width: 768px) {
      height: 90vh;
    }
  }
  .maxheight {
    height: 100%;
    min-height: 0;
  }
  .three-quarterscreen {
    height: 75vh;
  }
  .widescreen {
    padding: 0;
  }
  .tight {
    padding-block: 0;
  }
  .split {
    display: flex;
  }
  .split-vert {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  @media (max-width: 768px) {
    .hide-on-mobile {
      display: none;
    }
  }

  /* Margin - Set width */
  .ml-1 {
    margin-left: var(--inset-1) !important;
  }
  .ml-2 {
    margin-left: var(--inset-2) !important;
  }
  .ml-3 {
    margin-left: var(--inset-3) !important;
  }
  .ml-4 {
    margin-left: var(--inset-4) !important;
  }
  .ml-5 {
    margin-left: var(--inset-5) !important;
  }

  /* Margin - % for grid cols */
  .ml-grid-1 {
    margin-left: 20%;
  }
  .ml-grid-2 {
    margin-left: 40%;
  }
  .ml-grid-3 {
    margin-left: 60%;
  }
  .ml-grid-4 {
    margin-left: 80%;
  }
  .ml-grid-5 {
    margin-left: 100%;
  }

  /* Typography modifiers */
  .light {
    font-weight: var(--font-light) !important;
  }
  .bold {
    font-weight: var(--font-bold) !important;
  }
  .medium {
    font-weight: var(--fw-medium) !important;
  }
  .tracking-tight {
    letter-spacing: var(--tracking-tight) !important;
  }
  .uppercase {
    text-transform: uppercase !important;
  }
  .text-center {
    text-align: center !important;
  }
  .italic {
    font-style: italic !important;
  }
  .link-underline {
    text-decoration: underline !important;
  }
  .light {
    color: var(--body-clr-2) !important;
  }
  .dark {
    color: var(--body-clr-5) !important;
  }
  .black {
    color: var(--body-clr-7) !important;
  }
  .regular {
    font-size: var(--fs-3) !important;
    font-weight: var(--fw-light);
  }
  .small {
    font-size: var(--fs-2) !important;
  }
  .verysmall {
    font-size: var(--fs-1) !important;
  }

  /* links */
  /* default link without animated underline */
  /* a {
    color: var(--color-link, var(--grey-15));
    text-decoration: var(--link-underline, none);
  }
  a:hover {
    color: var(--color-link-hover, var(--grey-20));
    text-decoration: var(--link-underline-hover, underline);
    text-underline-offset: 0.2em;
  } */
  a {
    color: var(--color-link, var(--grey-14));
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: var(--link-underline-size, 0%) var(--link-underline-weight, 1px);
    background-position: left bottom;
    background-repeat: no-repeat;
    transition:
      background-size 0.2s ease,
      color 0.5s ease;
  }
  a:hover {
    color: var(--color-link-hover, var(--grey-20));
    background-size: var(--link-underline-hover-size, 100%) var(--link-underline-weight, 1px);
  }
  a[data-color='emphasis'] {
    color: var(--color-link-emphasis);
  }
  a[data-color='emphasis']:hover {
    color: var(--color-link-hover);
  }
  #primary-nav .current-menu-item > a {
    font-weight: var(--fw-medium);
    color: var(--grey-20) !important;
    color: var(--color-link-on, var(--grey-20)) !important;
  }
  [data-link='default'] {
    --link-underline: none;
    --link-underline-hover: underline;
    text-underline-offset: 0.2em;
  }
  [data-link='underline'] {
    --link-underline-size: 100%;
    --link-underline-weight: 1px;
  }
  [data-link='underline-heavy'] {
    --link-underline-size: 100%;
    --link-underline-weight: 2px;
  }
  [data-link='hover'] {
    --link-underline: none;
    --link-underline-hover: underline;
    --link-underline-size: 0%;
    --link-underline-hover-size: 100%;
  }
}

/* ------------------------------------------- */
/* ----------------   Testing   -------------- */
/* ------------------------------------------- */

/* #region - Template */
/* #endregion */
/* #region - Testing */
.bg {
  background-color: rgb(184, 183, 183);
}
.bgred {
  background-color: rgba(111, 34, 34, 0.444);
}
.border {
  border: 2px solid rgb(27, 27, 27);
}
.borderred {
  border: 1px solid red;
}
.bordergreen {
  border: 1px solid green;
}
.borderblue {
  border: 1px solid blue;
}
.border10 {
  border: 10px solid grey;
}
/* #endregion - Testing */

/* VS Code */
/* close regions cmd+k cmd+8 */
/* Cmd+K Cmd+0 — fold all levels */
/* Cmd+K Cmd+1 — fold level 1 only */
/* Cmd+K Cmd+J — unfold everything */

/* cmd b - hide show left panel */
/* cmd shift e - file explorer */
/* cmd shift g - git */
/* cmd shift k - extensions */
/* cmd shift f - search */
/* cmd shift w - word wrap */
/* cmd shift h - find replace */
/* cmd k z - zen mode */
/* ctr g - go to line number */
/* Cmd + K, Cmd + S - set shortcuts */

/* Safari */
/* ctr cmd r - responsive mode safari */

/* ------------------------------------------- */
/* ----------   Mobile Nav (unlayered)  ------- */
/* ------------------------------------------- */
/* Kept outside @layer so it wins over unlayered parent main.css on non-front-page routes */

/* #region - Mobile Nav */
@media (max-width: 767px) {
  #primary-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem !important;
  }
  .sub-menu.process-subnav li {
    padding-bottom: 1rem;
    font-size: var(--fs-7);
  }
}
/* Hamburger */
.nav-toggle {
  display: block;
  position: absolute;
  top: 14px;
  right: var(--gutter);
  z-index: 200;
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 20px;
  padding: 0;
}
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}
.nav-toggle__line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--chrome-text, var(--grey-17));
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.nav-toggle__line:first-child {
  transform-origin: center;
  margin-bottom: 8px;
}
.nav-toggle.is-open .nav-toggle__line:first-child {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__line:last-child {
  transform: translateY(-5px) rotate(-45deg);
}
/* Fullscreen overlay */
.mobile-nav {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: var(--grey-1);
  z-index: 150;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
  font-size: var(--fs-11);
}
@media (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
}
.mobile-nav.is-open {
  transform: translateY(0);
  pointer-events: auto;
}
/* Two-column layout container */
.mobile-nav__columns {
  display: flex;
  align-items: center;
  position: relative;
  padding-block: 3rem;
}
/* Tier 1 column */
.mobile-nav nav {
  width: 50%;
}
.mobile-nav nav > ul {
  padding-left: clamp(3rem, 7vw, 5rem);
  padding-right: clamp(1.5rem, 5vw, 3rem);
}
/* Nav list */
.mobile-nav__list {
  list-style: none;
}
.mobile-nav__list a {
  color: var(--grey-0);
  text-decoration: none;
  font-size: var(--fs-8);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-8);
  text-transform: uppercase;
  display: block;
  padding: 0.75rem 0;
}
.mobile-nav__list a:hover {
  color: var(--grey-5);
}
/* Tier 2 — positions relative to parent li, first item aligns with Paintings */
.mobile-nav .menu-item-has-children {
  position: relative;
}
.mobile-nav .sub-menu {
  position: absolute;
  left: 100%;
  top: 0;
  width: calc(50vw + clamp(1.5rem, 5vw, 3rem));
  padding-left: clamp(1.5rem, 5vw, 3rem);
  border-left: 2px solid var(--grey-11);
  opacity: 1;
  pointer-events: auto;
  max-height: none;
  overflow: visible;
}
/* Logo — centered at bottom */
.mobile-nav-logo {
  display: flex;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.mobile-nav-logo img {
  width: 45px;
  height: auto;
}
/* #endregion - Mobile Nav */